div.banner {
  border: 1px solid;
  margin: 2px 0;
  padding: 2px 20px;
}

div.banner_info {
  border-color: #b0c4de;
  background: #f0f8ff url("/dossiers/assets/plugin_assets/redmine_banner/info-3eee657d.png") no-repeat 4px;
  padding-left: 26px;
}

div.banner_warn {
  border-color: #f3d51a;
  background: #f9f99e url("/dossiers/assets/plugin_assets/redmine_banner/warn-7fc38bb5.png") no-repeat 4px;
  padding-left: 26px;
}

div.banner_alert {
  border-color: #dd0000;
  background: #ffe3e3 url("/dossiers/assets/plugin_assets/redmine_banner/alert-8a8cdf95.png") no-repeat 4px;
  padding-left: 26px;
}

div.banner_normal {
  background-color: #ffffff;
  border-color: #ffffff;
}

div.banner_nodata {
  text-align: center;
  background-color: #FFEBC1;
  border-color: #FDBF3B;
  color: #A6750C;
}

div.banner_edit {
  background-image: none;
  text-align: right;
  font-size: smaller;
}

span.banner_info {
  background: url("/dossiers/assets/plugin_assets/redmine_banner/info-3eee657d.png") no-repeat left center;
  padding-left: 26px;
  background-size: contain;
}

span.banner_warn {
  background: url("/dossiers/assets/plugin_assets/redmine_banner/warn-7fc38bb5.png") no-repeat left center;
  padding-left: 26px;
  background-size: contain;
}

span.banner_alert {
  background: url("/dossiers/assets/plugin_assets/redmine_banner/alert-8a8cdf95.png") no-repeat left center;
  padding-left: 26px;
  background-size: contain;
}

#admin-menu a.redmine-banner {
  background-image: url("/dossiers/assets/plugin_assets/redmine_banner/alert-msg-c91b1d8f.png");
}

span.use_timer {
  background: url("/dossiers/assets/plugin_assets/redmine_banner/icon-timer-16355d09.png") no-repeat right center;
  padding-right: 20px;
}

div.banner_area {
  position: relative;
}

div.project_banner_area {
  position: relative;
}

div.banner_area div.banner_edit {
  display: block;
  position: absolute;
  bottom: 5px;
  right: 10px;
  font-size: smaller;
  background: none;
  color: #000;
  filter: alpha(opacity=60);
  -moz-opacity: .6;
  opacity: .6;
}

div.banner_area div.banner_edit:hover {
  filter: alpha(opacity=90);
  -moz-opacity: .9;
  opacity: .9;
}

.banner-icon-off {
  background-image: url("/dossiers/assets/plugin_assets/redmine_banner/close-b4e11be0.png");
}

.banner-icon-edit {
  background-image: url("/dossiers/assets/plugin_assets/redmine_banner/edit-e178a37c.png");
}

div.project_banner_area div.banner_edit {
  display: block;
  position: absolute;
  bottom: 5px;
  right: 10px;
  font-size: smaller;
  background: none;
  color: #000;
  filter: alpha(opacity=30);
  -moz-opacity: .3;
  opacity: .3;
}

div.project_banner_area div.banner_edit:hover {
  filter: alpha(opacity=80);
  -moz-opacity: .8;
  opacity: .8;
}

div.banner_area div.banner_more_info {
  display: block;
  position: absolute;
  bottom: 5px;
  right: 50%;
  font-size: smaller;
  background: none;
  color: #000;
  filter: alpha(opacity=50);
  -moz-opacity: .5;
  opacity: .5;
}

div.banner_area div.banner_more_info:hover {
  filter: alpha(opacity=90);
  -moz-opacity: .9;
  opacity: .9;
}

/*------------ plugin settings -----------------*/
.tabular.settings > .settings_for_banner > p {
  padding-left: 200px;
}

.tabular.settings > .settings_for_banner > p > label {
  margin-left: -200px;
  width: 180px;
}
@media (max-width: 899px) {
  #content > div.banner_area {
    margin-bottom: 8px;
  }
}

.fadeout {
  animation: fadeOut 1s;
  animation-fill-mode: both;
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}