.modal {
  position: absolute; top: 0; left: 0; z-index: 100; width: 100%; height: 100%;
}
.modal__container { vertical-align: middle; }
.modal__wrapper { margin: 0 auto; }
.modal__scrollable {
  position: relative;
  overflow: auto;
}
.modal__window {
  position: relative;
  border-radius: 4px;
  background: #fff;

  -webkit-box-shadow: 0 0 0 1px #E4D8D8;
          box-shadow: 0 0 0 1px #E4D8D8;
}
.modal__tools { display: none; }
.modal__close {
  position: absolute; top: 16px; right: 16px; z-index: 101;
  width: 32px; height: 32px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;

  -webkit-transition: -webkit-transform .3s;
          transition: transform .3s;
}
.modal__close::after,
.modal__close::before {
  content: '';
  display: block;
  position: absolute; top: 15px; left: 4px;
  width: 24px; height: 2px;
  background: #928282;
}
.modal__close::after {
  -webkit-transform: rotate(315deg);
          transform: rotate(315deg);
}
.modal__close::before {
  -webkit-transform: rotate(225deg);
          transform: rotate(225deg);
}

.modal__close:hover {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.modal__close:focus::after,
.modal__close:focus::before {
  background: #eee;
}

.modal_scrollable { position: fixed; }

.modal-overlay {
  position: fixed; top: 0; left: 0; z-index: 100;
  width: 100%; height: 100%;
  background: #483D3D;
  opacity: .6;
}

.modal-disable-scroll { overflow: hidden !important; }

.modal-form {
  width: 600px; max-width: 100%;
}
.modal-form_640 {
  width: 640px; max-width: 100%;
}
.modal-form_480 {
  width: 480px;
}
.modal-form_800 {
  width: 800px;
}
.modal-form__header {
  padding: 20px 56px 19px 32px;
  border-bottom: 1px solid #E8E3DE;
  border-radius: 4px 4px 0 0;
  background: #FCF9F9;
}
.modal-form__title {
  font-size: 18px; font-weight: 600;
  line-height: 24px;
}
.modal-form__title_inline {
  display: inline-block;
}
.modal-form__body {
  padding: 24px 32px 16px;
}
.modal-form__body_compact {
  padding-top: 12px; padding-bottom: 4px;
}
.modal-form__body,
.modal-form__overflow {
  overflow: auto;
}
.modal-form__body_values {
  padding: 16px 0;
}
.modal-form__body_separate {
  border-top: 1px solid #E4D8D8;
}
.modal-form__footer {
  padding: 8px 32px;
  border-top: 1px solid #E8E3DE;
  background: #FCF9F9;
  text-align: right;
}
.modal-form__actions {
  float: right;
  margin-top: -4px;
}
.modal-form__action {
  display: inline-block;
  padding: 8px 0;
}
.modal-form__action_left {
  float: left;
}
.modal-form__footer .button { margin-left: 4px; }
.modal-form__footer .button_left {
  margin-left: 0;
  float: left;
}
.modal-form__footer .switch-block {
  float: left;
  margin: 4px 16px 8px 0;
}
.modal-form__footer .list {
  text-align: left;
}

.modal-form_wide {
  width: 900px;
}

.modal-message {
  width: 480px; max-width: 100%;
}
.modal-message__header {
  position:  relative;
  padding: 20px 56px 0 32px;
}
.modal-message__title {
  font-size: 24px; font-weight: 600;
  line-height: 32px;
}
.modal-message__title_red {
  color: #C5131C;
}
.modal-message__title_green {
  color: #79B27D;
}
.modal-message__body {
  padding: 16px 32px;
  font-size: 18px;
}
.modal-message__footer {
  padding: 8px 32px 16px;
  text-align: right;
}


.modal-section {
  width: 640px; max-width: 100%;
}
.modal-section_800 {
  width: 800px;
}
.modal-section__header {
  padding: 20px 48px 19px 32px;
  border-bottom: 1px solid #E8E3DE;
  border-radius: 4px 4px 0 0;
  background: #FBF2EA;
}
.modal-section__header_actions {
  position: relative;
  padding-right: 80px;
}

.modal-section__body {
  padding: 24px 32px 16px;
}
.modal-section__actions {
  position: absolute;
  top: 16px; right: 48px;
}
.modal-section__title {
  display: inline-block;
  font-size: 18px;
  line-height: 24px;
}
.modal-section__description {
  margin-top: 3px;
  color: #9C8D8D;
  font-size: 12px;
  line-height: 16px;
  min-height: 16px;
}
.modal-section__overflow {
  overflow: auto;
}


.modal-part {
  background: #F9F7F6;
}
.modal-part__header {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  padding: 4px 32px;
  border-top: 1px solid #EBE7E2;
}
.modal-part__header_first {
  border-top: none;
}
.modal-part__title {
  margin: 0;
  padding-top: 5px; padding-bottom: 5px;
  font-size: 16px;
  line-height: 1.33;
}
.modal-part__body {
  border-top: 1px solid #EBE7E2;
  background: #FFF;
}
.modal-part__content {
  padding: 16px 32px;
}
.modal-part__title.toggle-title {
  margin-left: -32px;
  padding-left: 32px;
}
.modal-part__title .toggle-title__toggle::before {
  top: 7px; left: 7px;
}

.modal .page-error {
  padding: 24px 32px;
  max-width: 480px;
}
.modal .page-error__code {
  font-size: 64px;
}
.modal .page-error__title {
  margin-bottom: 16px;
  font-size: 24px;
}
.modal .page-error__description {
  font-size: 16px;
}


@media only screen and (max-width: 800px) {

  .modal-form_wide {
    width: calc(100vw - 32px);
  }

}

@media only screen and (max-width: 640px) {

  .modal-form,
  .modal-section,
  .modal-form_640,
  .modal-form_wide,
  .modal-message {
    width: calc(100vw - 16px);
  }
  .modal-form__header,
  .modal-form__body,
  .modal-form__footer,
  .modal-message__header,
  .modal-message__body,
  .modal-message__footer {
    padding-right: 16px; padding-left: 16px;
  }
  .modal-form__footer .switch-block {
    margin-top: 6px;
  }
  .modal-form__body_values {
    padding: 0;
  }
  .modal-form__action {
    padding-top: 12px;
  }

  .modal-section__header {
    padding-left: 16px;
  }
  .modal-section__body,
  .modal-section__footer {
    padding-right: 16px; padding-left: 16px;
  }

  .modal-part__content {
    padding: 8px;
  }

  .modal .page-error {
    padding: 16px;
  }

}