[data-component-name="asr:auth"] {
    padding-left: 30px;
}

@media (max-width: 500px) {
    [data-component-name="asr:auth"] {
        padding-left: revert-layer;
    }
}

.auth-page {
    /* max-width: 980px; */
    margin: 2.5rem auto;
    /* padding: 0 24px 40px 0; */
    color: #111;
}

.auth-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.auth-card--flat {
    /* max-width: 520px; */
}

.auth-tabs {
    display: inline-flex;
    gap: 8px;
    margin-bottom: 26px;
}

.auth-tabs button {
    border: 1px solid #d8d8d8;
    background: #f3f3f3;
    padding: 6px 18px;
    border-radius: 2px;
    cursor: pointer;
    font-size: 0.8em;
    color: #5a5a5a;
}

.auth-tabs button.active {
    background: #fff;
    color: #1b1b1b;
    border-color: #7dbb6b;
    box-shadow: inset 0 -2px 0 #7dbb6b;
}

.auth-tabs button:hover {
    border-color: #b9d7b2;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.auth-form > * + * {
    margin-top: 0.6rem;
}

.auth-label {
    font-size: 1rem;
    color: #3a3a3a;
    margin-top: 0;
}

.auth-form input {
    border: 1px solid #d6d6d6;
    border-radius: 2px;
    padding: 0.6rem 0.75rem;
    font-size: 1.125rem;
    /* transform: translate(10px, 10px); */
}

.auth-primary {
    background: #42b649;
    color: #fff;
    border: none;
    border-radius: 2px;
    padding: 0.6rem 1rem;
    cursor: pointer;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    width: fit-content;
    outline: none;
}

.auth-primary:hover:not(:disabled) {
    background: #389f3f;
}

.auth-primary:disabled {
    opacity: 1;
    background: #d8d8d8;
    color: #fff;
    cursor: not-allowed;
}

.auth-error {
    color: #d9534f;
    font-size: 0.9rem;
}

.auth-error--inline {
    font-size: 0.75rem;
    /*margin-top: -0.35rem;*/
}

.auth-note {
    font-size: 0.85rem;
    color: #666;
    text-align: center;
}

.auth-note--error {
    color: #d9534f;
    text-align: left;
    font-size: 0.75rem;
    /*margin-top: -0.35rem;*/
}

.auth-invite {
    padding: 0.75rem 1rem;
    background: #f7f9fb;
    border-radius: 8px;
    border: 1px dashed #d5d5d5;
}

.auth-invite-title {
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.auth-invite-text {
    color: #555;
    font-size: 0.9rem;
}

.auth-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin: 0;
}

.auth-subtitle {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.auth-title + .auth-subtitle {
    margin-top: 0.5rem;
}

.auth-subtitle + * {
    margin-top: 0.5rem;
}

.auth-status {
    font-weight: 600;
    margin: 1rem 0 0.5rem;
}

.auth-status--plain {
    font-weight: 600;
    margin: 0;
    font-size: 1.3em;
    margin-top: 10px;
    color: #1A56DB;
}

.auth-instruction {
    color: #555;
    margin-bottom: 1rem;
}

.auth-link {
    background: none;
    border: none;
    padding: 0;
    color: #7f7f7f;
    cursor: pointer;
    text-align: left;
    font-size: 0.75rem;
    text-decoration: underline;
}

.auth-link:hover {
    color: #38873c !important;
}

.auth-link--back {
    margin: -0.25rem 0 0.6rem;
    text-decoration: none;
    color: #7f7f7f;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    padding-left: 1.125rem;
}

.auth-link--back::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 0.75rem;
    height: 0.375rem;
    transform: translateY(-50%);
    background-color: #878787;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='6' fill='none' viewBox='0 0 12 6'><path fill='%23878787' d='M2.684.103A.352.352 0 0 1 3.182.6L1.137 2.647h10.008a.352.352 0 1 1 0 .703H1.2L3.182 5.33a.352.352 0 0 1-.499.497L.101 3.248a.35.35 0 0 1-.1-.285.35.35 0 0 1 .101-.278z'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='6' fill='none' viewBox='0 0 12 6'><path fill='%23878787' d='M2.684.103A.352.352 0 0 1 3.182.6L1.137 2.647h10.008a.352.352 0 1 1 0 .703H1.2L3.182 5.33a.352.352 0 0 1-.499.497L.101 3.248a.35.35 0 0 1-.1-.285.35.35 0 0 1 .101-.278z'/></svg>") no-repeat center / contain;
}

.auth-link--back:hover::before {
    background-color: #4aa24f;
}

.auth-link--right {
    /* margin-left: auto; */
}

.auth-spinner {
    width: 1.75rem;
    height: 1.75rem;
    border: 0.1875rem solid #d0d0d0;
    border-top-color: #1e8bc3;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.auth-loading {
    text-align: center;
    padding: 2rem;
}

.auth-phone-input {
    position: relative;
    width: fit-content;
    display: flex;
    gap: 20px;
    align-items: center;
}

.auth-phone-real {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 2;
    cursor: text;
    transform: translate(-1000px, 0px);
}

.auth-phone-boxes {
    display: grid;
    grid-auto-flow: column;
    gap: 0.45rem;
    /* background-color: red; */
}

.auth-phone-box {
    display: inline-flex;
    align-items: center;
    /* justify-content: center; */
    min-width: 2.5rem;
    padding: 0.55rem 0.4rem;
    border: 1px solid #d6d6d6;
    background: transparent;
    font-size: 1.3rem;
    /* font-weight: 600; */
    color: #1b1b1b;
    position: relative;
}

.auth-phone-box.short {
    min-width: 1.75rem;
}

.auth-phone-box.empty {
    color: #cfcfcf;
    background-color: #fbfbfb;
}

.auth-phone-box.partial {
    color: #1b1b1b;
}

.auth-phone-box.filled {
    border-color: transparent;
    background: #fff;
}

.auth-phone-box.active {
    border-color: #a9a9a9;
}

.auth-phone-input.is-editing .auth-phone-box {
    border-color: #7dbb6b;
    box-shadow: inset 0 0 0 1px rgba(125, 187, 107, 0.25);
}

.auth-phone-input.is-editing .auth-phone-box.filled {
    border-color: #7dbb6b;
}

.auth-phone-text {
    line-height: 1;
}

.office_contacts .auth-phone-box {
    box-shadow: 0px 0px 10px -3px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.auth-phone-caret {
    display: inline-block;
    width: 0;
    min-width: 0;
    height: 1em;
    /* background: #2b2b2b; */
    /* margin-left: 0.125rem; */
    animation: auth-caret-blink 1s step-end infinite;
    position: relative;
}

.auth-phone-box.empty .auth-phone-caret {
    position: absolute;
    left: 6px;
}

.auth-phone-caret:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    bottom: 0;
    background-color: #333;
}

.auth-phone-input.is-readonly {}
.auth-phone-input.is-readonly .auth-phone-box {
    /* border-color: #d6d6d6; */
    background: #eeeeee;
}

@keyframes auth-caret-blink {
    50% {
        opacity: 0;
    }
}

.auth-password-input {
    max-width: 23.75rem;
    font-size: 1.25rem;
    letter-spacing: 0.3em;
}

.auth-code-input {
    /* max-width: 13.75rem; */
    font-size: 1.25rem;
    letter-spacing: 0.65em;
    width: 11rem;
}

.auth-actions {
    display: flex;
    align-items: center;
    gap: 3rem;
    /* justify-content: space-between; */
    margin-top: 1.25rem;
}

.auth-hint {
    font-size: 0.75rem;
    color: #9a9a9a;
    /* margin-top: -0.25rem; */
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.auth-input-wrap {
    position: relative;
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 20px;
}

.auth-input--clearable {
    padding-right: 2rem;
}

.auth-clear {
    /* position: absolute; */
    right: 0.5rem;
    /* top: 50%; */
    /* transform: translateY(-50%); */
    /* width: 1rem; */
    /* height: 1rem; */
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    z-index: 10;
    display: block;
    height: 24px;
}

.auth-clear-icon {
    display: inline-block;
    width: 13px;
    height: 24px;
    background-color: #9a9a9a;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='24' fill='none' viewBox='0 0 18 24'%3E%3Cpath fill='%23323232' d='M14.143 8v13.333H3.857V8zm-1.929-8H5.786L4.5 1.333H0V4h18V1.333h-4.5zm4.5 5.333H1.286v16C1.286 22.8 2.443 24 3.857 24h10.286c1.414 0 2.571-1.2 2.571-2.667z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='24' fill='none' viewBox='0 0 18 24'%3E%3Cpath fill='%23323232' d='M14.143 8v13.333H3.857V8zm-1.929-8H5.786L4.5 1.333H0V4h18V1.333h-4.5zm4.5 5.333H1.286v16C1.286 22.8 2.443 24 3.857 24h10.286c1.414 0 2.571-1.2 2.571-2.667z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.auth-clear:hover .auth-clear-icon {
    background: #4aa24f;
}

.auth-phone-input.has-clear {
    padding-right: 2rem;
}

.auth-phone-input .auth-clear {
    /* right: 0; */
}

.auth-phone-input.has-cancel {
    padding-right: 3.8rem;
}

.auth-phone-input.has-clear.has-cancel {
    padding-right: 5rem;
}

.auth-cancel {
    /* position: absolute; */
    right: 0;
    /* top: 50%; */
    /* transform: translateY(-50%); */
    /* width: 1rem; */
    /* height: 1rem; */
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    z-index: 10;
    display: block;
    height: 21px;
}

.auth-phone-input.has-clear .auth-cancel {
    /* right: 1.5rem; */
}

.auth-cancel-icon {
    display: inline-block;
    width: 16px;
    height: 21px;
    background-color: #9a9a9a;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='21' fill='none' viewBox='0 0 23 21'%3E%3Cpath fill='%23323232' d='M4.05 3.87 0 .598.973 9.75l9.15-.973-4.049-3.271c2.708-3.351 7.631-3.874 10.982-1.167s3.874 7.63 1.167 10.981-7.63 3.875-10.982 1.167l-1.636 2.025a10.41 10.41 0 0 0 14.643-1.556 10.41 10.41 0 0 0-1.556-14.642A10.41 10.41 0 0 0 4.05 3.87'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='21' fill='none' viewBox='0 0 23 21'%3E%3Cpath fill='%23323232' d='M4.05 3.87 0 .598.973 9.75l9.15-.973-4.049-3.271c2.708-3.351 7.631-3.874 10.982-1.167s3.874 7.63 1.167 10.981-7.63 3.875-10.982 1.167l-1.636 2.025a10.41 10.41 0 0 0 14.643-1.556 10.41 10.41 0 0 0-1.556-14.642A10.41 10.41 0 0 0 4.05 3.87'/%3E%3C/svg%3E") no-repeat center / contain;
}

.auth-cancel:hover .auth-cancel-icon {
    background-color: #4aa24f;
}

.auth-phone-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.auth-phone-input.is-readonly .auth-phone-real {
    pointer-events: none;
    cursor: default;
}

.auth-provision-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.auth-provision-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.auth-provision-item--pending {
    color: #8f8f8f;
}

.auth-provision-item--done {
    color: #1b1b1b;
}

.auth-provision-item + .auth-provision-item {
    margin-top: 0.5rem;
}

.auth-provision-icon {
    width: 0.9375rem;
    height: 0.8125rem;
    flex: 0 0 auto;
    display: inline-block;
    background-color: #3ebe44;
}

.auth-provision-icon--loading {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='13' fill='none' viewBox='0 0 15 13'><path stroke='%233ebe44' stroke-linecap='round' d='M2.77.5c-.218.074-.557.62-1.298 1.691-.39.563-.621 1.395-.866 2.839-.406 2.388.458 3.317.886 3.932.512.735.959 1.307 1.605 1.87.657.572 1.927.982 2.884 1.272.558.17 1.094.311 2.175.375 1.179.068 2.594-.037 3.13-.199.747-.227 1.143-.635 2.236-1.729.765-.765.952-1.796.978-3.24.014-.84-.388-1.67-.584-2.284-.203-.637-.752-1.208-1.204-1.61a8.5 8.5 0 0 0-1.325-.971c-.558-.328-1.216-.425-2.295-.512-1.528-.124-2.646.012-2.925.123-.778.311-1.155.959-1.449 1.408-.388.594-.438 1.096-.548 1.546-.125.51-.085 1.909.133 2.966.126.612.583.947.948 1.26.372.318 1.069.411 2.77.45.764.017 1.196-.187 1.707-.311.658-.16.973-.995 1.194-1.693.156-.496-.024-.974-.133-1.235-.182-.439-.765-.538-1.215-.786-.46-.255-1.01-.275-1.412-.264-.115.004-.23.111-.304.199-.098.186-.147.411-.184.759-.012.224-.012.544.134 1.1'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='13' fill='none' viewBox='0 0 15 13'><path stroke='%233ebe44' stroke-linecap='round' d='M2.77.5c-.218.074-.557.62-1.298 1.691-.39.563-.621 1.395-.866 2.839-.406 2.388.458 3.317.886 3.932.512.735.959 1.307 1.605 1.87.657.572 1.927.982 2.884 1.272.558.17 1.094.311 2.175.375 1.179.068 2.594-.037 3.13-.199.747-.227 1.143-.635 2.236-1.729.765-.765.952-1.796.978-3.24.014-.84-.388-1.67-.584-2.284-.203-.637-.752-1.208-1.204-1.61a8.5 8.5 0 0 0-1.325-.971c-.558-.328-1.216-.425-2.295-.512-1.528-.124-2.646.012-2.925.123-.778.311-1.155.959-1.449 1.408-.388.594-.438 1.096-.548 1.546-.125.51-.085 1.909.133 2.966.126.612.583.947.948 1.26.372.318 1.069.411 2.77.45.764.017 1.196-.187 1.707-.311.658-.16.973-.995 1.194-1.693.156-.496-.024-.974-.133-1.235-.182-.439-.765-.538-1.215-.786-.46-.255-1.01-.275-1.412-.264-.115.004-.23.111-.304.199-.098.186-.147.411-.184.759-.012.224-.012.544.134 1.1'/></svg>") no-repeat center / contain;
    animation: spin 1s linear infinite;
}

.auth-provision-icon--idle {
    border-radius: 50%;
    background-color: #c6c6c6;
}

.auth-provision-icon--done {
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='12' fill='none' viewBox='0 0 14 12'><path fill='%2334d53b' d='M4.6 11.3 0 6.7l2-1.9 2.6 2.6L12 0l2 2z'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='12' fill='none' viewBox='0 0 14 12'><path fill='%2334d53b' d='M4.6 11.3 0 6.7l2-1.9 2.6 2.6L12 0l2 2z'/></svg>") no-repeat center / contain;
    background-color: #34d53b;
    animation: none;
}

.of_param_title {
    margin-bottom: 4px;
}

.auth-form .auth-link--back {
    font-size: 1em;
    margin-top: 13px;
    color: #7dbb6b;
    font-weight: bold;
    border-bottom: 1px dashed;
    align-self: baseline;
    padding-left: 26px;
}

.auth-form .auth-link--back::before {
    background: #7dbb6b;
    width: 19px;
    height: 9px;
}

.calc-restricted {
    padding: 1rem;
    background: #fefefe;
    border: 1px solid #ff001b;
    /* color: #721c24; */
    border-radius: 4px;
    /* font-size: 0.9rem; */
}