/*********** material ***********/
@-webkit-keyframes highlight {
  0% {
    background: #FEFFCD;
  }
  100% {
    background: none;
  }
}
@keyframes highlight {
  0% {
    background: #FEFFCD;
  }
  100% {
    background: none;
  }
}
.panels-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.panel {
  transition: all 0.2s ease-in-out;
  background: #FFF;
  border-radius: 2px;
}
.panel.inverse {
  background: #F9F9F9;
  border-radius: 3px;
  flex-grow: 1;
  flex-basis: 50%;
}
.panel.inverse .titleBar {
  background: #F9F9F9;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
}
.panel.inValid:before {
  content: "";
  position: absolute;
  display: block;
  transform: rotate(45deg);
  transition: all 0.2s ease-in-out;
  margin: 20px 0 0 -11px;
  opacity: 1;
  transform: rotate(-45deg);
  margin: 24px 0 0 -9px;
  width: 12px;
  height: 12px;
  border: solid #DD0000;
  border-width: 0 3px 3px 0;
  padding: 3px;
}
.panel.valid:before {
  content: "";
  position: absolute;
  display: block;
  width: 7px;
  height: 15px;
  border: solid #49C21C;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  transition: all 0.2s ease-in-out;
  margin: 22px 0 0 -5px;
  opacity: 1;
}
.panel .panel-errors {
  display: none;
  color: #D00;
  margin-top: -10px;
  padding: 0 25px 12px 25px;
  margin-bottom: 0px;
  border-bottom: 5px solid #D00;
}
.panel.inValid .panel-errors {
  display: flex;
  width: 100%;
}
.panel.hidden {
  display: none;
  opacity: 0;
}
.panel.disabled {
  opacity: 0.3;
}
.panel .titleBar {
  border-bottom: 1px dashed #e4e4e4;
  margin-bottom: 0px;
  background: #F3F3F3;
}
.panel .titleBar:hover .left .arrow:before {
  border-color: #0F8DCB;
}
.panel .titleBar .left {
  display: flex;
}
.panel .titleBar .left i {
  color: #0F8DCB;
  line-height: 30px;
  display: none;
}
.panel .titleBar .left h4 {
  color: #3e3e3e;
  border: 0;
  padding-left: 5px;
}
.panel .titleBar .left .arrow {
  margin-left: auto;
}
.panel .titleBar .left .arrow:before {
  content: "";
  position: relative;
  margin: 6px 0 0 -25px;
  transition: all 0.2s ease-in-out;
  border-color: #d5d5d5;
  border-style: solid;
  border-width: 3px 3px 0 0;
  display: inline-block;
  height: 15px;
  width: 15px;
  vertical-align: top;
  transform: rotate(45deg);
}
.panel .titleBar .right .text {
  font-size: 20px;
  font-weight: 400;
  color: #0B6C9C;
  border: 0;
  padding-left: 15px;
}
.panel .titleBar .right.info {
  justify-content: left;
  display: flex;
}
.panel .titleBar .right.info.hidden {
  display: none;
}
.panel .titleBar .right.info .text {
  color: #0B6C9C;
  white-space: nowrap;
  font-weight: 500;
}
.panel .toggle {
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.panel.closed .content {
  display: none;
}
.panel.opened .titleBar .left .arrow:before {
  transform: rotate(135deg);
  margin: 4px 0 0 -25px;
  border-color: #0F8DCB;
}
.panel.highlight .content {
  -webkit-animation: highlight 1s;
  animation: highlight 1s;
}
.panel .content {
  padding: 0 10px;
  display: flex;
  border-radius: 2px;
  flex-wrap: wrap;
}
.panel .content .full {
  flex-grow: 1;
}
.panel .content .left {
  flex: 1;
}
.panel .content .right {
  flex: 1;
}
.panel .content .right.panel-description {
  color: #6f6f6f;
  font-weight: 300;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}
.panel .content ul.list-choose {
  margin-left: -10px;
}
.panel .content ul.list-choose li {
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 2px;
}
.panel .content ul.list-choose li:hover {
  background: #f3f3f3;
}
/*

panel desc






}*/