.modal{
  display         : flex;
  position        : fixed !important;
  top             : 0;
  bottom          : 0;
  left            : 0;
  right           : 0;
  z-index         : 400;
  background      : rgba(0, 0, 0, 0.5);
  font            : 400 14px/20px UI,sans-serif;
  text-align      : left;
}

.modal input,
.modal select,
.modal textarea{
  border            : solid 1px #5d666f;
}

.modal.hidden{
  display: none;
}

.modal.special .modalHead{
  display: none;
}
.modal:not(.modal.special) .imageOuter,
.modal:not(.modal.special) .title,
.modal:not(.modal.special) .description,
.modal:not(.modal.special) .share,
.modal:not(.modal.special) .features{
  display: none;
}


.modal > div{
  margin        : auto;
  border-radius : 8px;
  box-shadow    : 0 0 21px rgba(0,0,0,0.5);
  background    : #2a2d34;
  max-width     : 600px;
  outline       : 1px solid #5d666f;
}

@media screen and (max-width:640px){
  .modal > div{
    margin        : auto 10px;
  }
}

.modal button{
  padding    : 0;
  border     : 0;
  background : transparent;
  cursor     : pointer;
}

/* head */

.modal .head{
  min-height              : 28px;
  padding                 : 10px;
  -webkit-user-select     : none;
          user-select     : none;
}

.modal .modalHead{
  padding     : 0 10px;
  color       : #fff;
  font        : 600 14px/28px UI,sans-serif;
  text-shadow : 0 0 2px #000;
  cursor      : pointer;
  transition  : color 0.2s;
}

/* Content */

.modal .body {
  max-height  : calc(100vh - 176px);
  overflow    : auto;
  padding     : 20px;
  background  : #434950;
  color       : #f8f8f8;
}

/* Footer */

.modal .footer {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  width: max-content;
  margin: 0 auto;
  padding: 10px;
}

.modal .footer button{
  margin     : 0 5px;
}

.modal button:disabled{
  cursor : default;
}

.modal .bLine button,
.modal .bLine div.button,
.modal button > span{
  cursor        : pointer;
  display       : block;
  padding       : 5px 10px;
  border-radius : 4px;
  background    : #f60;
  color         : #fff;
  font          : 600 14px/18px UI,sans-serif;
  text-shadow   : 0 0 2px rgba(0,0,0,0.25);
  transition    : background 0.2s;
}

.modal .bLine button{
  padding       : 4px 9px;
}

.modal .bLine div.button,
.modal .bLine button{
  margin        : 0 5px;
  display: inline;
}

.modal .bLine button.green{
  background    : #759876;
}

.modal .bLine div.button.red,
.modal .bLine button.red{
  background    : #F30;
}

.modal button:disabled > span{
  background : #ccc;
  color      : #eee;
}

.modal button:focus{
  outline : none;
}

.modal button:focus span{
  background : #c50;
}

.modal .bLine{
  width: max-content;
  margin: 10px auto 0;
}