.modal {
    position: absolute; top: 0; left: 0; z-index: 100;
    width: 100%; height: 100%;
}
.modal__scrollable {
    position: relative;
    overflow: auto;
}
.modal__window {
    position: relative;
    background: #FFF;
}
.modal__tools { display: none; }
.modal__close {
    position: absolute; top: 30px; right: 40px; z-index: 101;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: #F4F5F7;
    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: 20px; left: 12px;
    width: 16px; height: 1px;
    background: #080341;
}
.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__body > .overlay {
    border-radius: 16px;
    overflow: hidden;
}

.modal_scrollable { position: fixed; }

.modal-overlay {
    position: fixed; top: 0; left: 0; z-index: 100;
    width: 100%; height: 100%;
    background: rgba(47, 65, 75, .6);
}

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

.modal .responsive {
    width: 1070px;
    max-width: calc(100vw - 16px);
}
.modal .responsive__header {
    position: relative; z-index: 10;
    padding: 40px 83px 0 40px;
    border-radius: 16px 16px 0 0;
    background: #FFF;
}
.modal .responsive__steps {
    position: relative; z-index: 10;
}
.modal .responsive__header::before {
    content: '';
    display: block;
    position: absolute; bottom: -20px; right: 0; left: 0px;
    height: 20px;
    background: linear-gradient(to top, rgba(255,0,0,0), #FFF);
}
.modal .responsive__header_compact {
    padding-top: 8px;
    padding-bottom: 8px;
}
.modal .responsive__title {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 108%;
}
.modal .responsive__description {
    color: #638394;
    font-size: 0.875rem;
}
.modal .responsive__body {
    padding: 20px 40px;
}
.modal .responsive__body,
.modal .responsive__overflow {
    overflow: auto;
}
.modal .responsive__footer {
    position: relative; z-index: 10;
    padding: 20px 40px 40px;
    border-radius: 0 0 16px 16px;
    background: #FFF;
    text-align: right;
}
.modal .responsive__footer_empty {
    padding: 0;
    height: 16px;
}
.modal .responsive__footer::after {
    content: '';
    display: table;
    clear: both;
}
.modal .responsive__footer::before {
    content: '';
    display: block;
    position: absolute; top: -20px; right: 0; left: 0px;
    height: 20px;
    background: linear-gradient(to bottom, rgba(255,0,0,0), #FFF);
}
.modal .responsive_error .responsive__title {
    color: #EF3E33;
}
.modal .responsive_error .responsive__description {
    color: #333;
}
.modal .responsive__buttons::after {
    content: '';
    display: table;
    clear: both;
}

.modal .data-table__th_first,
.modal .data-table__td_first {
    padding-left: 32px;
}
.modal .data-table__th_last,
.modal .data-table__td_last {
    padding-right: 32px;
}

@media only screen and (min-width: 841px) {

    .modal__container { vertical-align: middle; }

    .modal__wrapper { margin: 0 auto; }

    .modal__window {
        border-radius: 16px;
    }

    .modal .responsive__wrapper_w800 {
        max-width: 800px;
    }
    .modal .responsive__wrapper_w654 {
        max-width: 654px;
    }

    .modal .responsive__steps {
        padding: 20px 40px 20px;
    }

    .modal .responsive__steps::before {
        content: '';
        display: block;
        position: absolute; bottom: -20px; right: 0; left: 0px;
        height: 20px;
        background: linear-gradient(to top, rgba(255,0,0,0), #FFF);
    }
    
    .responsive__steps ~ .responsive__body {
        padding: 20px 40px 20px;
    }
}

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

    .modal__wrapper {
        width: 100%;
    }
    .modal__window {
        height: 100vh;
    }

    .modal .responsive__footer {
        padding-right: 15px;
        padding-left: 15px;
    }

    .modal .responsive {
        max-width: 100vw;
    }
    .modal .responsive__body {
        padding: 16px 15px;
    }

    .modal .responsive__header {
        padding: 24px 83px 10px 15px;
    }
    .modal__close {
        top: 20px;
        right: 30px;
    }

}