.auth-layout {
    display: flex;
    background-color: var(--background-1-light);
    min-height: 700px;

    .close-modal {
        display: none;
    }

    .auth-back {
        display: none;
    }

    .start,
    .end {

        .data-wrapper {
            padding: 30px;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;

            .links-and-help-btn {

                .help-btn-wrapper {
                    text-align: end;
                }

                .links-wrapper {
                    text-align: center;
                }
            }

        }
    }

    >.start {
        width: 55%;
        min-width: 55%;

        .image-wrapper {
            width: 100%;
            height: 100%;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    >.end {
        width: 45%;
        min-width: 45%;
    }
}

.modal-body {
    .page {
        min-height: unset !important;
        padding: 0;

        &.center-content {
            min-height: unset;
        }

    }

    .auth-layout {
        height: auto;
        margin-top: 0;

        .close-modal {
            color: var(--base-text-color-gray);
            display: flex !important;
            justify-content: center;
            align-items: center;
            gap: 5px;

            i {
                font-size: 24px;
            }
        }


        .auth-back {
            display: flex;
        }


        .start,
        .end {
            .data-wrapper {
                padding: 30px;
            }
        }


    }
}

.activate-inputs-container {
    width: fit-content;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;

    .activate-inputs {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0px 0;
        width: fit-content;
        margin: auto;

        &.sm {
            input {
                border-radius: 15px;
                width: 48px;
                height: 58px;
            }
        }

        &.invalid {
            input {
                border-color: var(--color-danger-light-300);
            }
        }

        input {
            width: 58px;
            height: 70px;
            margin-inline-end: 10px;
            text-align: center;
            font-size: 2rem;
            font-weight: bold;
            border: 1px solid;
            color: var(--base-text-color);
            background-color: var(--background-1-light);
            border-radius: 20px;
            border-color: var(--color-gray-light-300);

            &:focus,
            &:active {
                background-color: transparent;
                outline: unset !important;
                box-shadow: unset !important;
                color: var(--base-text-color);
                border-color: var(--color-primary-light-300);
            }
        }
    }
}

@media all and (max-width: $breakpoint-lg) {
    .auth-layout {

        br {
            display: none;
        }

        .start,
        .end {
            .data-wrapper {
                padding: 40px;
            }
        }

    }
}

@media all and (max-width: $breakpoint-md) {

    .auth-layout {
        display: flex;
        height: 100vh;

        .start,
        .end {
            width: 100%;
            min-width: 100%;

            .data-wrapper {
                padding: 20px;
            }
        }

        .start {
            display: none;
        }

        .end {}

        .activate-inputs-container .activate-inputs input {
            width: 45px;
            height: 55px;
            border-radius: 16px;
        }
    }

}