.kode-alert {

  color: #fff;

  position: relative;

  border-radius: 0;

  text-align: left;

  margin-bottom: 2px;

  padding: 12px;

  padding-right: 30px

}



.kode-alert a {

  color: inherit;

  text-decoration: underline;

  font-weight: 600

}



.kode-alert h4 {

  font-size: 14px;

  margin: 0;

  color: inherit;

  font-weight: 600;

  line-height: normal

}



.kode-alert .img {

  width: 40px;

  height: 40px;

  position: absolute;

  border-radius: 3px;

  left: 12px;

  top: 12px;

}



.kode-alert-img {

  padding-left: 65px;

  min-height: 44px;

}



.kode-alert-icon {

  padding-left: 40px

}



.kode-alert-icon .fa {

  display: block;

  width: 20px;

  text-align: center;

  position: absolute;

  font-size: 15px;

  left: 12px;

  top: 17px

}



.kode-alert .closed {

  position: absolute;

  right: 3px;

  text-decoration: none;

  font-weight: bold;

  top: 0px;

  font-size: 25px;

  color: #fff;

  padding: 4px

}



.kode-alert .closed:hover {

  color: #000;

}



.kode-alert-click {

  cursor: pointer;

  padding-right: 12px

}



.kode-alert .primary {

  outline: 0;

  border: none;

  background: rgba(0,0,0,0.4);

  color: inherit;

  border-radius: 3px;

  padding: 4px 10px

}



.kode-alert .cancel {

  outline: 0;

  border: none;

  background: rgba(255,255,255,0.4);

  color: rgba(0,0,0,0.8);

  border-radius: 3px;

  padding: 4px 10px

}



.kode-alert .primary:hover,.kode-alert .cancel:hover {

  opacity: 0.9

}



.kode-alert-top,.kode-alert-bottom,.kode-alert-top-left,.kode-alert-top-right,.kode-alert-bottom-left,.kode-alert-bottom-right,.kode-alert-fullscreen {

  box-shadow: 2px 2px 2px rgba(0,0,0,0.1);

  position: fixed;

  display: none;

  z-index: 1000

}



.kode-alert-top {

  top: 0;

  left: 0;

  right: 0

}



.kode-alert-bottom {

  bottom: 80px;

  left: 0;

  right: 0

}



.kode-alert-top-left {

  top: 80px;

  left: 20px

}



.kode-alert-top-right {

  top: 80px;

  right: 20px

}



.kode-alert-bottom-left {

  bottom: 20px;

  left: 20px

}



.kode-alert-bottom-right {

  bottom: 20px;

  right: 20px

}



.kode-alert-fullsize {

  top: 50%;

  left: 50%;

  margin: -20px

}



.alert1 {

  background: #00196B

}



.alert2 {

  background: #33577b

}



.alert3 {

  background: #29E200

}



.alert4 {

  background: #51b7a3

}



.alert5 {

  background: #FF8000

}



.alert6 {

  background: #FF240B

}



.alert7 {

  background: #9a80b9

}



.alert8 {

  background: #a2ded0;

  color: #444

}



.alert8 .closed {

  color: inherit

}



.alert8 a:hover.closed {

  color: inherit

}



.alert9 {

  background: #d2527f

}



.alert10 {

  background: #c78568

}



.alert11 {

  background: #e99844

}



.alert1-light {

  background: #d2e8ff;

  color: #00356c

}



.alert2-light {

  background: #7ea3c9;

  color: #152433

}



.alert3-light {

  background: #83e3aa;

  color: #13532e

}



.alert4-light {

  background: #bde4dc;

  color: #2f7365

}



.alert5-light {

  background: #fad9a4;

  color: #976008

}



.alert6-light {

  background: #fac9c4;

  color: #b11e0e

}



.alert7-light {

  background: #e8e3ef;

  color: #674b88

}



.alert8-light {

  background: #edf9f6;

  color: #2f8571

}



.alert9-light {

  background: #f2cbd9;

  color: #97274e

}



.alert10-light {

  background: #f0dfd8;

  color: #935336

}



.alert11-light {

  background: #f9e3cd;

  color: #b26515

}



.alert1-light .closed,.alert2-light .closed,.alert3-light .closed,.alert4-light .closed,.alert5-light .closed,.alert6-light .closed,.alert7-light .closed,.alert8-light .closed,.alert9-light .closed,.alert10-light .closed,.alert11-light .closed {

  color: inherit;

  opacity: 0.6

}



.alert1-light .closed:hover {

  color: inherit;

  opacity: 0.8

}