/* login*/
.custom-navbar{
    background-color: rgb(33, 80, 127);
}
.logo img {
    width: 100px;
    height: auto;
   }

/* .navbar-brand span {
    font-size: 1.3rem;
} */
.loginHero{
    background-image: url('pc/banner.png');
    height: 90vh;
}
.loginHero div{
  width: fit-content;
  height: fit-content;
  margin: auto;
}
.loginHero div img{
   max-width: 250px;
 }
.navbar-nav .nav-link {
    font-size: 1.3rem;
    color: #ffffff;
}
.logo-img {
    width: 50%;
    max-width: 300px;
    top: 14%;
    transform: translateY(-50%);
}
.custom-login-heading {
    margin-top: -198px;
}
.custom-input {
    margin-top: 6px;
    max-width: 200px;
    margin-left: 199px;
    font-size: 12px;
}
.background-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    z-index: -1;
}
@media (max-width: 576px) {
    .logo-img {
        width: 80%;
        top: 15%;
    }

    .custom-input {
        max-width: 190px;
        margin-left: 219px;
        margin-right: 120px !important;
    }
}
/* users*/
  .login-container {
        margin-top: 10px;
        display: flex;
        justify-content: flex-start; 
        align-items: center;
    } 

    .login-box {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .form-control {
        border-radius: 0%; 
    }
   .login-btn {
        background-color: #fff;
        color: #000000;
        border: 2px solid black; 
        padding: 6px 12px;
        border-radius: 0%;
    }
  @media (max-width: 768px) {
        .login-container {
            justify-content: center; 
            width: 100%; 
        }

        .login-box {
            flex-direction: column;
            align-items: center; 
        }
    }
     /*form*/
    body {
        background-color: #6c87b7;
    }
    .sidebar {
            height: 20vh;
            background-color: #ffffff;
            padding: 15px 0;
            margin-top: 20px;
        }
      
        .form-container {
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            border-radius: 0%;
        }
       
        .small-select {
            width: 80px; 
            text-align: center;
        }
    
        @media (max-width: 768px) {
            .sidebar {
                height: 20vh;
                width: 87%;  
                max-width: 525px; 
                margin: 20px auto; 
                
            }
            .form-container {
                
                padding: 20px;
                border-radius: 0%;
               
                }
        }
        /* basic info page  */
        .basicInfo nav ul li img{
         width:40px;
        }

/*Client info*/
.form-container {
  
    margin: auto; 
}

/*Admisson*/
.admission nav ul li img{
    width:40px;
}
.admission .parent-container {
            background-color: white; 
            padding: 10px 20px 0px 20px;
            border-radius: 8px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            margin: auto;
            
        }
      
        /* .h3-custom {
            margin: 20px 0; 
            margin-top: -10px !important;
            padding-bottom: 2px;
            font-size: 18px; 
            display: inline-block;
            position: relative;
        }
        
        .h3-custom::after {
            content: "";
            display: block;
            width: 87vh;  
            height: 1px;  
            background: rgba(0, 0, 0, 0.3);  
            position: absolute;
            left: -10%;  
            bottom: -5px;  
           
        } */
                
       .admission .form-container{
            border: 1px solid rgb(143, 141, 141);
            padding: 19px;
            border-radius: 0%;
            position: relative;
            margin-bottom: 20px;
        }

       .admission .parent-container .card{
            border: none !important;
        }

       .admission .parent-container .section-title{
            position: absolute;
            top: -12px;
            left: 2%;
            background: #fff;
            padding: 0 10px;
            font-size: 16px;
            font-weight: normal;
        }
     
        @media (max-width: 768px){
            .container .parent-container {
                padding: 15px;
            }
            .container .form-container {
                padding: 10px;
            }
            
            .container .form-control {
                font-size: 12px;
                padding: 5px;
            }
            .h3-custom::after {
               
                width: 70vh;  
                }
        }
        /* code A Phone */
        .codeAPhoneSection .containerRight{
            background-color: white;
        }
        .testSection .inactiveBtn{
          opacity: 0.7;
        }
        .testSection .list-group li span{
            font-weight: bold;
            opacity: 0.7;
          }
        /* users page */
        .UsersSection table thead{
            border-bottom: 2px solid rgb(129, 123, 123) ;
        }
/* reports page  */
.reports nav ul li img{
 width:40px;
}
ul li a {
    cursor:pointer;
}
/* monthlyCapReport section */
.monthlyCapReportSection nav ul li img{
width:40px;
}
.monthlyCapReportSection table thead{
 border-bottom: 2px solid rgb(129, 123, 123) ;
}
/* colorPicker Section */
.colorPickerSection nav ul li img{
 width:40px;
}
.colorPickerSection .parent-container{
width:fit-content;
background-color:transparent; 

}
.colorPickerSection .parent-container {
    background-color: white; 
    padding-right: 10px;
    border-radius: 8px;   
}
 

.colorPickerSection .form-container{
    border: 1px solid rgb(143, 141, 141);
    border-radius: 0%;
    position: relative;
}


.colorPickerSection .parent-container .section-title{
    position: absolute;
    top: -12px;
    left: 2%;
    background: #fff;
    padding: 0 10px;
    font-size: 16px;
    font-weight: normal;
}
.colorPickerSection .GenderStatusParentDiv{
    width:fit-content;
    margin: auto;
}