@font-face {
    font-family: Aventa-Black;
    src: url(../dashboard/assets/fonts/ellenluff-aventa/Aventa-Black.ttf);
}
@font-face {
    font-family: Aventa-Semibold;
    src: url(../dashboard/assets/fonts/ellenluff-aventa/Aventa-SemiBold.ttf);
}
@font-face {
    font-family: Aventa-Regular;
    src: url(../dashboard/assets/fonts/ellenluff-aventa/Aventa-Regular.ttf);
}
@font-face {
    font-family: Aventa-Light;
    src: url(../dashboard/assets/fonts/ellenluff-aventa/Aventa-Light.ttf);
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.login-status {
    margin-bottom: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #16a34a; /* Green-600 */
}
.logo{
    display: none;
}
select{
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: 100%;
    padding-right: 2rem;
    margin-right: 2rem;
    background-position-y: 10px;
    background-position-x: calc(100% - 5px);
}
.login{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background-color: #05030e;
    display: flex;
    align-items: center;
    justify-content: center;
    .container {
        padding: 1rem;
        display: flex;
        color: #fff;
        height: calc(100% - 3rem);
        .con:first-child {
            width: 50%;
            padding: 2rem;
            svg{
                width: 1.5rem;
                height: 1.5rem;
            }
            .formContainer{
                display: flex;
                align-items: center;
                flex-direction: column;
                justify-content: center;
                height: 100%;
                padding: 2rem;
                gap: 3rem;
                .form-heading{
                    width: 100%;
                    h1{
                        font-family: Aventa-Semibold;
                        font-size: 2rem;
                    }
                    p{
                        font-family: Aventa-Regular;
                        font-size: 1rem;
                    }
                }
                /* Form styles */
                .login-form {
                    width: 100%;
                    font-family: Aventa-Regular;
                    .form-group {
                        margin-bottom: 1.5rem;
                        .label-link-con{
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
    
                            .forgot-password-link {
                                font-size: 0.875rem;
                                color: #f2f2f2; /* Gray-600 */
                                text-decoration: underline;
                                border-radius: 0.375rem;
                                outline: none;
                                font-family: Aventa-Light;
                        
                                &:hover {
                                    color: #b3b3b3; /* Gray-900 */
                                }
                        
                                &:focus {
                                    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5); /* Indigo focus ring */
                                }
                            }
                        }
    
                        &.remember-me {
                            display: block;
                            margin-top: 1rem;
    
                            .checkbox-label {
                                display: flex;
                                align-items: center;
    
                                .checkbox-text {
                                    margin-left: 0.5rem;
                                    font-size: 0.875rem;
                                    color: #b3b3b3; /* Gray-600 */
                                }
                            }
                        }
                    }
    
                    .form-input {
                        margin-top: 0.25rem;
                        display: block;
                        width: 100%;
                        background-color: transparent;
                        font-size: 1rem;
                        border: 1px solid #b3b3b3; 
                        border-radius: 2.375rem;
                        padding: .8rem ;
                        outline: none;
                        color: white;
                        &:focus {
                            border: 1px solid #8ea9f0;
                            background-color: transparent;
                            box-shadow: 2px 2px 6.5px 0px #525ee4;
                        }
                    }
    
                    .error-message {
                        margin-top: 0.5rem;
                        font-size: 0.875rem;
                        color: #dc2626; /* Red-600 */
                    }
    
                    .bottom{
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-top: 2rem;
                        
                        p{
                            font-family: Aventa-Regular;
                            font-size: .9rem;
    
                            a{
                                color: #8ea9f0;
    
                                &:hover {
                                    color: #424dc5;
                                }
                            }
                        }
                    }
                }
            }
            .RegisterformContainer{
                display: flex;
                align-items: center;
                flex-direction: column;
                justify-content: start;
                height: 100%;
                padding: 2rem;
                gap: 3rem;
                overflow: auto;
                
                .form-heading{
                    width: 100%;
                    h1{
                        font-family: Aventa-Semibold;
                        font-size: 2rem;
                    }
                    p{
                        font-family: Aventa-Regular;
                        font-size: 1rem;
                    }
                }
                /* Form styles */
                .login-form {
                    width: 100%;
                    font-family: Aventa-Regular;
                    .form-group {
                        margin-bottom: 1.5rem;
                        .label-link-con{
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
    
                            .forgot-password-link {
                                font-size: 0.875rem;
                                color: #f2f2f2; /* Gray-600 */
                                text-decoration: underline;
                                border-radius: 0.375rem;
                                outline: none;
                                font-family: Aventa-Light;
                        
                                &:hover {
                                    color: #b3b3b3; /* Gray-900 */
                                }
                        
                                &:focus {
                                    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5); /* Indigo focus ring */
                                }
                            }
                        }
    
                        &.remember-me {
                            display: block;
                            margin-top: 1rem;
    
                            .checkbox-label {
                                display: flex;
                                align-items: center;
    
                                .checkbox-text {
                                    margin-left: 0.5rem;
                                    font-size: 0.875rem;
                                    color: #b3b3b3; /* Gray-600 */
                                }
                            }
                        }
                    }
    
                    .form-input {
                        margin-top: 0.25rem;
                        display: block;
                        width: 100%;
                        background-color: transparent;
                        font-size: 1rem;
                        border: 1px solid #b3b3b3; 
                        border-radius: 2.375rem;
                        padding: .8rem ;
                        outline: none;
                        color: white;
                        &:focus {
                            border: 1px solid #8ea9f0;
                            background-color: transparent;
                            box-shadow: 2px 2px 6.5px 0px #525ee4;
                        }
                    }
    
                    .error-message {
                        margin-top: 0.5rem;
                        font-size: 0.875rem;
                        color: #dc2626; /* Red-600 */
                    }
    
                    .bottom{
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin-top: 2rem;
                        
                        p{
                            font-family: Aventa-Regular;
                            font-size: .9rem;
    
                            a{
                                color: #8ea9f0;
    
                                &:hover {
                                    color: #424dc5;
                                }
                            }
                        }
                    }
                }
            }
            .RegisterformContainer::-webkit-scrollbar{
                display: none !important;
            }
        }
        .con:last-child {
            width: 50%;
            background-color: #0f0d18;
            border-radius: 2.5rem;
            position: relative;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
            background-image: url(../dashboard/assets/img/bgLogo.png);
            background-position: center;
            background-repeat: no-repeat;
            background-size: calc(100% - 9vw);
    
            .contentWraper:first-child {
                position: relative;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                .logo{
                    width: 8.125rem;
                }
            }
            .contentWraper:last-child{
                position: relative;
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                h1{
                    font-size: 4vw;
                    text-align: center;
                    font-family: Aventa-Black;
                }
            }
        }
    }
    
    
    
    /* Action styles */
    .form-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 1.5rem;
    
        a{
            display: block;
            font-size: 14px;
            color:#BECCEE;
            // text-decoration: none;
        }
    
        .login-button {
            display: flex;
            flex-direction: row-reverse;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 1rem;
            padding: 1rem 2rem;
            border: none;
            width: 11rem;
            outline: none;
            border-radius: 5.625rem;
            gap: .5rem;
            transition: all ease-out 1s;
            background: linear-gradient(131.745deg, #525EE4 0%, #0F0D18 100%);
    
            &:hover{
                background: linear-gradient(131.745deg, #0F0D18 0%, #525EE4 100%);
            }
            
            .icon{
                width: 1rem;
                height: 1rem;
            }
        }
    }
    
}
@media (max-width: 925px) {
    .login{
        .container{
            .con:first-child{
                .formContainer{
                    padding: 0rem;
                }
            }
        }
    }
}
@media(max-width:756px){
    .login{
        .container{
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            .con:first-child{
                width: 100%;
                border-radius: 2.5rem;
                display: flex;
                justify-content: flex-start;
                flex-direction: column;
                height: 100%;
                .top{
                    display: flex;
                    width: 100%;
                    align-items: center;
                    .logo{
                        display: flex;
                        width: 100%;
                        justify-content: center;
                        align-items: center;
                        img{
                            width: 20vw;
                        }
                    }
                }
                .formContainer{
                    width: 100%;
                    .form-heading{
                        text-align: center;
                        h1{
                            font-size: 2.5rem;
                        }
                    }
                    .login-form{
                        width: 75%;
                    }
                }
            }
            .con:last-child{
                display: none;
            }
        }
    }
}
@media(max-width:460px){
    .login{
        .container{
            .con:first-child{
                padding: 2rem 0rem;
                .formContainer{
                    .form-heading{
                        h1{
                            font-size: 1.5rem;
                        }
                        p{
                            font-size: .8rem;
                        }
                    }
                    
                }
            }
        }
    }
}