* { margin:0; padding:0; }

div.alert-box {
display: block;
padding: 5px 0px 5px 0px;
color: #FFFFFF;
text-align: center;
border: 1px solid rgba(0, 0, 0, 0.1);
text-shadow: 0 1px rgba(0, 0, 0, 0.7);
width:100%;
position: fixed;
line-height: 20px;
}

.alert-box p{
  margin-top: 0;
  margin-bottom: 0;
}

div.alert-box a:not(.minimize-btn) {
  color: #14C7FF;
  text-decoration: none;
}

.alert-box a.close { color: #949eb7; position: absolute; right: 30px; top: 2px; font-size: 14px; opacity: 0.8; padding: 4px; text-decoration:none; font-weight: 100;}

.alert-box a.close:hover,.alert-box a.close:focus { opacity: 0.4; }

.alert-box a span {float: right; width: 20px; font-size: 14px; font-weight: 300;}

#alert-container {
  z-index: 9999;
}

.alert-box {
  position: relative;
  transition: max-height 0.3s ease;
  overflow: hidden;
}

.alert-box.minimized {
  max-height: 39px !important;
}

.in-ocf .alert-box.minimized {
  max-height: 28px !important;
}

.in-ocf .alert-box {
  z-index: 10000;
}

.in-ocf .alert-box a.close { color: #949eb7; position: absolute; right: 30px; font-size: 14px; opacity: 0.8; padding: 4px; text-decoration:none; font-weight: 100;}

.minimize-btn {
  position: absolute;
  top: 20px;
  right: 34px; /* Position before close button */
  color: #FFFFFF;
  text-decoration: none;
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
}

.minimize-btn:hover {
  opacity: 0.7;
}

.alert-box .close{
  position: absolute;
  top: 5px;
  right: 10px;
  color: #FFFFFF;
  text-decoration: none;
  font-size: 24px;
  cursor: pointer;
}

.alert-box a:hover {
  color: inherit;
}