.modal-registration {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;

    display: none;
}

.modal-registration.active {
    display: flex;
}

.modal-registration__overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;

    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, .7);
}

.modal-registration__container {
    position: relative;

    max-width: 432px;
    width: 100%;
    margin: auto;
    padding: 32px 64px 46px;
    box-sizing: border-box;

    text-align: center;

    background-color: #fff;
    box-shadow: inset 0 -6px 0 #E1E8DC !important;
    border-radius: 10px !important;
}

.modal-registration__close {
    position: absolute;
    top: 32px;
    right: 32px;

    width: 34px;
    height: 34px;

    text-indent: -9999px;

    border-radius: 5px !important;
    background-color: rgba(48, 52, 70, 0.07);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9.03125 8.00391C9.27734 8.27734 9.27734 8.6875 9.03125 8.93359C8.75781 9.20703 8.34766 9.20703 8.10156 8.93359L4.875 5.67969L1.62109 8.93359C1.34766 9.20703 0.9375 9.20703 0.691406 8.93359C0.417969 8.6875 0.417969 8.27734 0.691406 8.00391L3.94531 4.75L0.691406 1.49609C0.417969 1.22266 0.417969 0.8125 0.691406 0.566406C0.9375 0.292969 1.34766 0.292969 1.59375 0.566406L4.875 3.84766L8.12891 0.59375C8.375 0.320312 8.78516 0.320312 9.03125 0.59375C9.30469 0.839844 9.30469 1.25 9.03125 1.52344L5.77734 4.75L9.03125 8.00391Z' fill='%23303446'/%3e%3c/svg%3e ");
    background-repeat: no-repeat;
    background-position: center;
    border: 0;

    cursor: pointer;

    transition: .2s;
}

.modal-registration__close:hover {
    background-color: rgba(48, 52, 70, 0.1);
}

.modal-registration__close:active {
    background-color: rgba(48, 52, 70, 0.15);
}

.modal-registration__icon {
    width: 56px;
    height: 56px;
    display: inline-block;

    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='56' height='56' viewBox='0 0 56 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M28 0.875C13.0156 0.875 0.875 13.125 0.875 28C0.875 42.9844 13.0156 55.125 28 55.125C42.875 55.125 55.125 42.9844 55.125 28C55.125 13.125 42.875 0.875 28 0.875ZM28 6.125C40.0312 6.125 49.875 15.9688 49.875 28C49.875 40.1406 40.0312 49.875 28 49.875C15.8594 49.875 6.125 40.1406 6.125 28C6.125 15.9688 15.8594 6.125 28 6.125ZM43.3125 20.4531L40.7969 17.9375C40.3594 17.3906 39.4844 17.3906 38.9375 17.9375L23.5156 33.25L16.9531 26.6875C16.4062 26.1406 15.6406 26.1406 15.0938 26.6875L12.5781 29.0938C12.1406 29.6406 12.1406 30.5156 12.5781 30.9531L22.5312 41.0156C23.0781 41.5625 23.8438 41.5625 24.3906 41.0156L43.3125 22.3125C43.75 21.7656 43.75 20.8906 43.3125 20.4531Z' fill='%237AC362'/%3e%3c/svg%3e ");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;

    transform: translateY(8px);
}

.modal-registration__title {
    margin-top: 16px;

    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #303446;
}

.modal-registration__text {
    margin-top: 4px;

    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    color: #6A6E7E;
}

.modal-registration__btn {
    display: block;
    width: 100%;
    height: 56px;
    margin-top: 32px;

    font-size: 16px;
    font-weight: 600;
    line-height: 56px;
    color: #fff;

    background: #7AC362;
    border-radius: 5px !important;
    outline: none;
    border: 0;
}

.modal-registration__btn:hover {
    background: #A7CE8E;
}

.modal-registration__btn:active {
    background: #71A955;
}

@media (max-width: 768px) {
    .modal-registration__btn {
        height: 44px;
        line-height: 44px;
    }
}

@media (max-width: 500px) {
    .modal-registration__container {
        margin-left: 24px;
        margin-right: 24px;
        padding: 32px 24px;
    }

    .modal-registration__icon {
        width: 30px;
        height: 38px;
    }

    .modal-registration__title {
        font-size: 14px;
        line-height: 22px;
    }

    .modal-registration__btn {
        max-width: 200px;
        height: 44px;
        margin-left: auto;
        margin-right: auto;

        line-height: 44px;
    }
}