.panel {
  position: relative;
  border-radius: 4px;
}
.panel + .panel {
  margin-top: 20px;
}
.panel.panel--sm .panel__content {
  padding: 10px;
}
.panel.panel--sm + .panel--sm {
  margin-top: 10px;
}
.panel.panel--nop .panel__content {
  padding: 0;
}
.panel.panel--shadow {
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1);
}
.panel .panel__header {
  position: relative;
  padding: 20px;
  background: #fff;
  border-radius: 4px 4px 0 0;
  color: #444;
  font-size: .9rem;
  font-weight: 100;
}
.panel .panel__header:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  border-bottom: 1px solid #eee;
}
.panel .panel__header + .panel__content {
  padding-top: 20px;
  border-radius: 0 0 4px 4px;
}
.panel .panel__content {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
}
.panel-alert {
  position: relative;
  padding: 20px;
  border-radius: 4px;
  border: 1px solid #ddd;
  background: #eee;
  line-height: 1.2;
  color: #777;
}
.panel-alert.panel-alert--sm {
  padding: 10px;
}
.panel-alert.panel-alert--green {
  border-color: #4CAF50;
  color: #0a5f0d;
  background: #c7e7c8;
}
.panel-alert.panel-alert--red {
  border-color: #f44336;
  color: #d32f2f;
  background: #fde1df;
}
.panel-alert.panel-alert--blue {
  border-color: #3486db;
  color: #1976d2;
  background: #cce0f6;
}
.panel-alert.panel-alert--yellow {
  border-color: #ffdb4d;
  color: #444;
  background: #ffffff;
}
.panel-alert.panel-alert--icon {
  padding-left: 80px;
}
.panel-alert.panel-alert--icon:before {
  content: '';
  position: absolute;
  left: 20px;
  top: 50%;
  width: 40px;
  height: 40px;
  background-size: 40px;
  margin-top: -20px;
}
.panel-alert.panel-alert--icon-warning:before {
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjI1NnB4IiBoZWlnaHQ9IjI1NnB4Ij4KPGc+Cgk8Zz4KCQk8cGF0aCBkPSJNNTA3LjQ5NCw0MjYuMDY2TDI4Mi44NjQsNTMuNTM3Yy01LjY3Ny05LjQxNS0xNS44Ny0xNS4xNzItMjYuODY1LTE1LjE3MmMtMTAuOTk1LDAtMjEuMTg4LDUuNzU2LTI2Ljg2NSwxNS4xNzIgICAgTDQuNTA2LDQyNi4wNjZjLTUuODQyLDkuNjg5LTYuMDE1LDIxLjc3NC0wLjQ1MSwzMS42MjVjNS41NjQsOS44NTIsMTYuMDAxLDE1Ljk0NCwyNy4zMTUsMTUuOTQ0aDQ0OS4yNTkgICAgYzExLjMxNCwwLDIxLjc1MS02LjA5MywyNy4zMTUtMTUuOTQ0QzUxMy41MDgsNDQ3LjgzOSw1MTMuMzM2LDQzNS43NTUsNTA3LjQ5NCw0MjYuMDY2eiBNMjU2LjE2NywxNjcuMjI3ICAgIGMxMi45MDEsMCwyMy44MTcsNy4yNzgsMjMuODE3LDIwLjE3OGMwLDM5LjM2My00LjYzMSw5NS45MjktNC42MzEsMTM1LjI5MmMwLDEwLjI1NS0xMS4yNDcsMTQuNTU0LTE5LjE4NiwxNC41NTQgICAgYy0xMC41ODQsMC0xOS41MTYtNC4zLTE5LjUxNi0xNC41NTRjMC0zOS4zNjMtNC42My05NS45MjktNC42My0xMzUuMjkyQzIzMi4wMjEsMTc0LjUwNSwyNDIuNjA1LDE2Ny4yMjcsMjU2LjE2NywxNjcuMjI3eiAgICAgTTI1Ni40OTgsNDExLjAxOGMtMTQuNTU0LDAtMjUuNDcxLTExLjkwOC0yNS40NzEtMjUuNDdjMC0xMy44OTMsMTAuOTE2LTI1LjQ3LDI1LjQ3MS0yNS40N2MxMy41NjIsMCwyNS4xNCwxMS41NzcsMjUuMTQsMjUuNDcgICAgQzI4MS42MzgsMzk5LjExLDI3MC4wNiw0MTEuMDE4LDI1Ni40OTgsNDExLjAxOHoiIGZpbGw9IiNEODAwMjciLz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
}
.panel-alert.panel-alert--icon-success:before {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI1MHB4IiBoZWlnaHQ9IjUwcHgiIHZpZXdCb3g9IjAgMCA1MCA1MCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5zdWNjZXNzPC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxkZWZzPjwvZGVmcz4gICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8ZyBpZD0ic3VjY2VzcyI+ICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgZmlsbD0iIzRDQUY1MCIgZmlsbC1ydWxlPSJub256ZXJvIiBjeD0iMjUiIGN5PSIyNSIgcj0iMjUiPjwvY2lyY2xlPiAgICAgICAgICAgIDxwb2x5bGluZSBpZD0iU2hhcGUiIHN0cm9rZT0iI0ZGRkZGRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHBvaW50cz0iMzggMTUgMjIgMzMgMTIgMjUiPjwvcG9seWxpbmU+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=);
}
.panel-alert.panel-alert--icon-info:before {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI1MHB4IiBoZWlnaHQ9IjUwcHgiIHZpZXdCb3g9IjAgMCA1MCA1MCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5pbmZvPC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxkZWZzPjwvZGVmcz4gICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8ZyBpZD0iaW5mbyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjUuMDAwMDAwLCAyNS4wMDAwMDApIHNjYWxlKDEsIC0xKSB0cmFuc2xhdGUoLTI1LjAwMDAwMCwgLTI1LjAwMDAwMCkgIj4gICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsIiBmaWxsPSIjMzQ4NkRCIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGN4PSIyNSIgY3k9IjI1IiByPSIyNSI+PC9jaXJjbGU+ICAgICAgICAgICAgPHBhdGggZD0iTTI1LDEwIEwyNSwzMiIgaWQ9IlNoYXBlIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTI1LDM3IEwyNSwzOSIgaWQ9IlNoYXBlIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj48L3BhdGg+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=);
}
.panel-alert .panel-alert__title {
  font-weight: 700;
  margin: 0 0 10px 0;
  border-bottom: 1px dashed #e58383;
  padding-bottom: 10px;
}
@media (min-width: 320px) and (max-width: 767px) {
  .panel .panel__content {
    padding: 10px;
  }
}