:root {
    --text-color: #192534;
}

html,
body {
    margin: 0;
    height: 100%;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    outline: none;
    vertical-align: top;
    -webkit-tap-highlight-color: transparent;
}

img {
    display: inline-block;
    max-width: 100%;
    user-select: none;
}

table {
    border-collapse: collapse;
}

.button {
    padding: 0;
    display: inline-block;
    box-shadow: none;
    border: none;
    background: none;
    font-size: inherit;
    cursor: pointer;
    user-select: none;
    background-color: #ccc;
    text-decoration: none;
    border-radius: 6px;
    text-align: center;
    padding: 9px 16px;
    font-weight: bold;
    transition: all 150ms ease-in-out;
}

.button:hover {
    color: #fff;
}

.button_lg {
    padding: 18px 30px 19px;
}

.button_block {
    width: 100%;
}

.button_main {
    color: #fff;
    background-color: #FF9300;
}

.button_main:hover {
    background-color: #EC8800;
}

.button_main:active {
    background-color: #D97D00;
}

.button_main:focus {
    background-color: #FF9300;
}

.button_main.button_shadow {
    box-shadow: 0px 16px 24px 0px rgba(255, 153, 0, 0.24);
}

.button_main[disabled],
.button_main.is-disabled {
    background-color: #FFC577;
}

.button_alt {
    color: #fff;
    background-color: #0064DA;
}

.button_alt:hover {
    background-color: #005AC4;
}

.button_alt:active {
    background-color: #0156BC;
}

.button_alt:focus {
    background-color: #0064DA;
}

.button_alt[disabled],
.button_alt.is-disabled {
    color: #9EC4F1;
    background-color: #E9F3FE;
}

.button_light {
    color: #0064DA;
    background-color: #E9F3FE;
}

.button_light:hover {
    color: #0064DA;
    background-color: #E3EEFB;
}

.button_light:active {
    background-color: #D3E4F8;
}

.button_light:focus {
    background-color: #E9F3FE;
}

.button_light[disabled],
.button_light.is-disabled {
    color: #FFFFFF;
    background-color: #E2E8EC;
}

.button_light.button_shadow {
    box-shadow: 0px 16px 24px 0px rgba(205, 217, 255, 0.37);
}

.button_ghost {
    color: var(--test-color);
    background-color: #fff;
}

.button_ghost:hover {
    color: var(--test-color);
    background-color: #fff;
}

.button_ghost:active {
    background-color: #fff;
}

.button_ghost:focus {
    background-color: #fff;
}

.button_ghost[disabled],
.button_ghost.is-disabled {
    color: #FFFFFF;
    background-color: #E2E8EC;
}

form {
    display: contents;
}

.field {
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
    background: none;
    border: none;
    box-shadow: none;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    background-color: #fff;
    padding: 8px 15px;
    border: 1px solid #C3CAD3;
    border-radius: 4px;
    color: var(--text-color);
    height: 60px;
}

.field::-webkit-input-placeholder {
    color: #727A84;
}

.field::-moz-placeholder {
    color: #727A84;
}

.field:-ms-input-placeholder {
    color: #727A84;
}

.field:hover {
    border-color: #9BA4AE;
}

.field:focus {
    border-color: #0064DA;
}

.field-error-text {
    color: #E6191A;
    margin-top: 4px;
    font-size: 12px;
}

.field-info-text {
    margin-top: 3px;
    font-size: 12px;
}

textarea.field {
    resize: vertical;
    height: 5em;
    min-height: 5em;
}

input[type="file"].field {
    cursor: pointer;
}

select.field {
    cursor: pointer;
}

.checkbox {
    user-select: none;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.checkbox input {
    position: absolute;
    z-index: -10;
    opacity: 0;
}

.checkbox__dot {
    position: relative;
    width: 16px;
    min-width: 16px;
    height: 16px;
    border: 1px solid #C3CAD3;
    border-radius: 4px;
}

.checkbox input:checked ~ .checkbox__dot {
    background: #FF9300 url('../img/checkbox-check.svg') 2px 2px no-repeat;
    border-color: #FF9300;
}

.checkbox.is-disabled {
    color: #C3CAD3;
    cursor: default;
}

.checkbox.is-disabled input ~ .checkbox__dot {
    background-color: #C3CAD3;
    border-color: #C3CAD3;
}

.checkbox__text ~ .checkbox__dot,
.checkbox__dot ~ .checkbox__text {
    margin-left: 10px;
}

.tab {
    border-radius: 100px;
    border: 1px solid #E6EBEF;
    font-size: 16px;
    line-height: 24px;
    padding: 5px 11px;
    cursor: pointer;
    user-select: none;
}

.tab:hover {
    color: #0064DA;
}

.tab.is-active {
    border-color: #0064DA;
}

.modal {
    display: none;
}

.modal.is-open {
    display: block;
}

.modal .modal__container {
    margin-top: -12px;
}

.modal__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: safe center;
    padding: 40px;
    z-index: 1000;
    max-height: 100vh;
    overflow-y: auto;
}

.modal__close {
    position: absolute;
    top: -30px;
    right: -32px;
    width: 32px;
    height: 32px;
    background: #E6EBEF url('../img/icons/modal-close.png') center center no-repeat;
    background-size: 14px 14px;
    border-radius: 50%;
    cursor: pointer;
}

.modal__content {
    background-color: #fff;
    border-radius: 11px;
    overflow: hidden;
}

.modal[aria-hidden="false"] .modal__overlay {
    animation: modalFadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.modal[aria-hidden="true"] .modal__overlay {
    animation: modalFadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.modal .modal__container,
.modal .modal__overlay {
    will-change: transform;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modalFadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@media only screen and (max-width: 767px) {
    .checkbox {
        align-items: flex-start;
    }

    .checkbox__text ~ .checkbox__dot,
    .checkbox__dot ~ .checkbox__text {
        margin-top: -1px;
        margin-left: 26px;
        font-size: 13px;
        line-height: 1.33;
    }

    .tab {
        padding: 6px 13px 5px;
    }
}