/**=====================
    Login css start
==========================**/
.auth-page {
    background-color: $dark-color;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 0;
    min-height: 100vh;
    overflow: auto;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    padding: calc(25px + (60 - 25) * ((100vw - 320px) / (1920 - 320))) 0;
    background-position: center;

    .ms-auto {
        @media (max-width: 1199px) {
            margin: 0 auto;
        }
    }

    [class*="badge-version-"] {
        &.badge {
            position: absolute;
            bottom: 30px;
            right: 30px;
        }
    }

    .auth-card {
        border-radius: calc(11px + (20 - 11) * ((100vw - 320px) / (1920 - 320)));
        position: relative;
        padding: 40px;
        background-color: $white;
        box-shadow: 0 0 35px 2px rgba(0, 0, 0, 0.05);

        .login-img {
            width: calc(96px + (120 - 96) * ((100vw - 320px) / (1920 - 320)));
        }

        .welcome {
            border-left: 3px solid var(--primary-color);
            padding: calc(2px + (4 - 2) * ((100vw - 320px) / (1920 - 320))) 0 calc(2px + (4 - 2) * ((100vw - 320px) / (1920 - 320))) calc(10px + (16 - 10) * ((100vw - 320px) / (1920 - 320)));
            margin: calc(21px + (30 - 21) * ((100vw - 320px) / (1920 - 320))) 0 calc(16px + (30 - 16) * ((100vw - 320px) / (1920 - 320)));

            h3 {
                font-size: calc(20px + (26 - 20) * ((100vw - 320px) / (1920 - 320)));
                font-weight: 600;
                color: $dark-color;
                margin-bottom: calc(2px + (4 - 2) * ((100vw - 320px) / (1920 - 320)));
            }

            p {
                margin-bottom: 0;
                font-size: calc(13px + (14 - 13) * ((100vw - 320px) / (1920 - 320)));
                font-weight: 400;
                line-height: 1.4;
                color: $dark-text;
            }
        }

        .main {
            svg {
                width: 22px;
                height: 22px;
                color: $tab-border;
                position: absolute;
                top: 44px;
                left: 16px;
                z-index: 1;
            }

            .submit {
                cursor: pointer;
                border-radius: 10px;
                color: $white;
                background-color: var(--primary-color);
                padding: 12px;
                width: 100%;
                font-size: 18px;
                font-weight: 500;
                display: flex;
                align-items: center;
                margin-top: 30px;
            }

            .forgot-pass {
                padding: 10px 0 0;
                text-align: end;
                font-size: 14px;

                a {
                    padding: 0;
                    color: var(--primary-color);
                    font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
                    letter-spacing: 0.5px;
                    display: flex;
                    border: none;
                    align-items: center;
                    justify-content: end;
                    gap: 6px;

                    svg {
                        position: static;
                        color: var(--primary-color);
                        transform: translateX(0px);
                        transition: all 0.2s ease;
                    }

                    &:hover {
                        svg {
                            transform: translateX(calc(-2px + (-5 - -2) * ((100vw - 320px) / (1920 - 320))));
                            transition: all 0.2s ease;
                        }
                    }
                }
            }

            .form-group {
                .position-relative {
                    .toggle-password {
                        i {
                            position: unset;
                        }
                    }
                }
            }

            &:has(.forgot-pass) {
                position: relative;

                .forgot-pass {
                    display: inline-block;
                    position: absolute;
                    bottom: calc(5px + (10 - 5) * ((100vw - 320px) / (1920 - 320)));
                    left: 0;
                    padding: 0;
                }
            }

            .login-form {
                .forgot-pass {
                    position: relative;
                    inset: unset;
                    display: block;
                }
            }
        }
    }

    .alert {
        &.alert-success {
            color: $success-color;
            background-color: rgba($success-color, 0.1);
            padding: 12px 16px;
            border-color: rgba($success-color, 0.5);
            border-radius: $border-radius;

        }
    }

    .animate-object {
        @media (max-width: 1199px) {
            display: none;
        }

        .vase-img {
            position: absolute;
            left: 100px;
            bottom: 60px;
            height: 140px;

            @media (min-width: 1399px) {
                height: 170px;
            }

        }

        .girl-img {
            position: absolute;
            left: 250px;
            bottom: 30px;
            height: 390px;

            @media (min-width: 1399px) {
                height: 430px;
            }
        }

        .lamp-img {
            position: absolute;
            left: 250px;
            top: 0;
            height: 330px;
        }

        .clockbox {
            position: absolute;
            top: 160px;
            opacity: 0.3;
            padding: 8px;
            left: 43%;
        }
    }

    .auth-form {
        .tab-content {
            overflow: hidden auto;

            &::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 6px $light-gray;
            }

            &::-webkit-scrollbar {
                width: 6px;
                height: 5px;
            }

            &::-webkit-scrollbar-thumb {
                background-color: rgba($primary-color, 0.1);
                border-radius: 100px;
            }
        }

        .footer {
            .btn-primary {
                &::before {
                    content: none;
                }
            }
        }

        .tab2-card {
            .nav-tabs {
                .nav-link {
                    &.active {
                        .feather {
                            color: var(--primary-color);
                        }
                    }

                    .feather {
                        position: relative;
                        inset: unset;
                    }
                }
            }
        }

        .phone-detail {
            .col-sm-1 {
                @media (min-width: 420px) {
                    width: 25%;
                }

                @media (max-width: 420.98px) {
                    width: 32%;
                }
            }

            .col-sm-11 {
                @media (min-width: 420px) {
                    width: 75%;
                }

                @media (max-width: 420.98px) {
                    width: 68%;
                }
            }
        }
    }
}

/* Clock styles */

.clockbox {
    background-color: #8396ab;
    border-radius: 4px;
    box-shadow: 6px 1px 13px 5px #001324;

    svg {
        width: 75px;
        height: 75px;
    }
}

.circle {
    fill: #bccfe5;
    stroke: rgb(72 90 112 / 16%);
    stroke-width: 80px;
    stroke-miterlimit: 10;
}

.mid-circle {
    fill: #000;
}

.hour-marks {
    fill: none;
    stroke: $black;
    stroke-width: 9;
    stroke-miterlimit: 10;
}

.hour-hand {
    fill: none;
    stroke: $black;
    stroke-width: 17;
    stroke-miterlimit: 10;
}

.minute-hand {
    fill: none;
    stroke: $black;
    stroke-width: 11;
    stroke-miterlimit: 10;
}

.second-hand {
    fill: none;
    stroke: $black;
    stroke-width: 15px;
    stroke-miterlimit: 10;
}

.sizing-box {
    fill: none;
}

#hour,
#minute,
#second {
    transform-origin: 300px 300px;
    transition: transform 0.5s ease-in-out;
}

.demo-credential {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    .btn {
        width: 100%;
        background-color: transparent;
        color: var(--primary-color);
        border: 1px solid var(--primary-color);
        line-height: 1.75;

        &:hover {
            background-color: var(--primary-color);
            color: $white;
        }
    }
}

.copy-data {
    margin-top: 24px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    background: rgba(242, 242, 242, 0.1);
    border-radius: 4px;
    border: none;
    padding: 10px 13px;
    box-shadow: none;
    outline: none;
    border: 1px dashed #ffffff42;

    .copy-data-div {


        label {
            font-size: 16px;
            color: rgba($dark-color, 0.95);
        }

        p {
            color: rgba($dark-color, 0.95);
            font-size: 14px;
            font-weight: 400;
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 5px;


            span {
                i {
                    font-size: 20px;
                }
            }

            &:last-child {
                margin-bottom: 0;
            }

        }
    }

    .code-box-copy__btn {
        background: transparent;
        border: none;
        color: white;
        font-size: 20px;

    }
}



/**=====================
    Login css end
==========================**/