div#div-custom-pane {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1099;
  margin-top: 5px;
  margin-left: 225px;
  padding: 0;
  border-radius: 5px;
  height: auto;
  opacity: .9;
}

.custom-pane {
  padding: 10px 25px;
  margin-left: 20px;
  margin-bottom: 5px;
  border-radius: 5px;
  border: solid 3px #fff;
  box-shadow: rgb(220 220 220) 1px 2px 3px;
  pointer-events:none;
  transition-timing-function: ease-out;
  transition: 0.8s;
  transform: translateY(0);
}

.custom-pane-info {
  background: #38B2CE;
}
.custom-pane-info::before {
  content: "ℹ";
  font-size: 115%;
  line-height: 10px;
  color: #fff;
  background: #01536750;
  vertical-align: middle;
  margin-right: 5px;
  padding: 2px 6px;
  border-radius: 15px;
  font-weight: bold;
}
.custom-pane-info.light {
  background: #50C5F180;
  color: #fff;
}
.custom-pane-info.light::before {
  color: #fff;
  background: #50C5F180;
}

.custom-pane-warn {
  background: #FFAD40;
  pointer-events:auto;
}
.custom-pane-warn::before {
  /*content: "⚠";*/
  content: "!";
  font-family: auto;
  font-size: 115%;
  line-height: 10px;
  color: #fff;
  background: #ff110090;
  vertical-align: middle;
  margin-right: 5px;
  padding: 1px 9px;
  border-radius: 15px;
  font-weight: bold;
  transform: scale;
}
.custom-pane-warn.light {
  background: #ffbfcc;
  color: #fff;
}

.custom-pane-close-btn::after {
  content: "✖";
  color: #555;
  float: right;
  cursor: pointer;
  pointer-events:auto;
  margin-left: 50px;
}
.custom-pane-close-btn.light::after {
  color: #fff;
}
