﻿/*Geeneric CSS*/

:root {
    --main_color: #20409A;
    --must: #FF3D00;
}
a{
    text-decoration:none;
}
 
/*Form Page CSS*/
.form_sec .top_text h1{
    font-size:26px;
}
.home_page .left_side .img_sec{
    height:100vh;
}
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.right_side {
    max-width: 500px;
    margin: 0 auto;
    padding: 15px 25px;
}
.right_side .same_feild:nth-child(1){
    margin-bottom:10px;
}
.logo_sec {
    max-width: 200px;
    margin: 0 auto;
    padding-bottom: 25px;
}
.top_text{
    padding-bottom:24px;
    text-align:center;
}
.top_text h1 {
    color: var(--main_color);
}
.form_sec .login_in{
    font-size:13px;
    color: var(--main_color);
}
.form_sec .same_feild:first-child{
    padding-bottom:20px;
}
.form_sec .same_feild label{
    padding-bottom:5px;
}
.form_sec .same_feild input {
    border-radius: 20px;
    padding: 8px 20px;
    font-size: 14px;
}
.form_sec .same_feild ::placeholder {
    color: #A7A1A1;
    font-size:10px;
}
.same_feild .input_wrap{
    position: relative;
}
.input_wrap .img_logo{
    position:absolute;
    max-width:15px;
    top:50%;
    right:20px;
    transform:translateY(-50%); 
}
.form_sec .starR {
    color: var(--must);
}
.form-control:focus{
    box-shadow: none;
    border-color:var(--main_color);
}
.form-check-input:focus {
    box-shadow: none;
    border-color: var(--main_color);
}
.form_sec .check_text{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
   
}
.form_sec .check_out{
    display:flex;
    align-items:center;
}
.form_sec .check_out label {
    color: var(--main_color);
    font-size: 11px;
    line-height:0px;
}
.form_sec .check_out .form-check-input[type=checkbox]{
    border-color:var(--main_color);
    width:13px;
    height:13px;    
    margin-top:0px !important;
}
.remember a{
    font-size:11px;
    color:var(--main_color) !important;
}
.form_sec .submit_button button {
    padding: 8px 10px;
    width: 100%;
    background: linear-gradient(135deg, #1976D2, #ff794f);
    color: #f9f9f9;
    border: none;
    border-radius: 30px;
    font-size: 15px;
    transition: background 0.3s ease;
}
.form_sec .submit_button button .top_trans{
    display:inline-block;
    transition: transform 0.7s linear;
}
    .form_sec .submit_button button:hover .top_trans {
/*        transform: translateY(-5px);*/
        color: #f9f9f9;
    }


/*FORGOT PAGE CSS*/

.form_sec .same_feild:first-child {
    padding-bottom: 0px !important;
}
.back_text {
    text-align: right;
    margin-bottom: 20px;
}



/*MEdia Queries*/

@media(max-width:1400px) {
    .img_sec {
                height: 100vh;
            }
    .right_side {
        max-width: 370px;
        margin: 0 auto;
        padding: 15px 25px;
    }
}

@media(max-width:1240px) {
    .logo_sec {
        max-width: 120px;
    }
}

@media(max-width:1024px){
    .form_sec .top_text h1{
        font-size:18px;
    }
    .logo_sec {
        padding-bottom: 15px;
    }
    .top_text{
        padding-bottom:10px;
    }
    .form_sec .same_feild:first-child{
        padding-bottom:10px;
    }
    .form_sec .check_text{
        margin-bottom:10px;
    }
    .form_sec .same_feild input {
        border-radius: 5px;
        padding: 6px 12px;
        font-size: 14px;
    }
    .form_sec .submit_button {
        max-width:200px;
        margin: 0 auto;
    }
    .form_sec .submit_button button{
        padding: 6px 10px;
    }
}

@media(max-width:640px){
    .logo_sec{
        max-width:60px;
    }
}

.error-popover {
    position: relative;
    display: inline-block;
    padding: 2px 10px;
    /* background-color: #f8d7da; */
    color: #721c24;
    border: 1px solid #dc3545;
    border-radius: 6px;
    font-size: 13px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    margin-top: 6px;
}

    /* Hide if empty */
    .error-popover:empty {
        display: none !important;
    }


    .error-popover::before {
        content: "";
        position: absolute;
        top: -15px;
        left: 10px;
        border-width: 6px;
        border-style: solid;
        border-color: transparent transparent #f8d7da transparent;
    }