.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title {
    color: #263238;
    font-weight: 500;
    font-size: 25px;
    font-family: 'Roboto', sans-serif;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 10px;
}



.mt-4.btn.btn-info {
    background-color: #547ebb;
    color: white;
    border: 2px solid transparent;
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    padding: 7px 15px;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 500;
    margin-right: 20px;
    margin-bottom: 15px;
}


thead {
    background-color: #f9fafb; 
}

th {
    color: #8997BD; 
    font-size: 14px; 
    font-family: 'Roboto', sans-serif; 
    padding: 12px; 
    text-align: left; 
    border-bottom: 1px solid #eceff5; 
}


tbody tr {
    transition: background-color 0.3s; 
    background-color: #ffffff;
}

tbody tr:hover {
    background-color: #ffffff; 
}


tbody td {
    padding: 12px; 
    font-family: 'Roboto', sans-serif; 
    font-size: 14px; 
    color: #000444; 
    border-bottom: 1px solid #eceff5; 
}


.badge.text-bg-success {
    background-color: white; 
    color: #22B783;            
    border: 1px solid #22B783;  
    padding: 5px 10px;   
    border-radius: 5px;   
}


.ri-pencil-fill {
    background-color: #557ef8; 
    color: white;             
    padding: 3px;  
    width: 24px;             
    height: 24px;          
    border-radius: 5px;       
    transition: background-color 0.3s; 
}


.ri-delete-bin-fill {
    background-color: #e95362; 
    color: white;              
    padding: 3px;    
    width: 24px;           
    height: 24px;       
    border-radius: 50%;      
    transition: background-color 0.3s;
}


.ri-check-fill {
    background-color: #2eb493; 
    color: white;             
    padding: 3px;      
    width: 24px;           
    height: 24px;     
    border-radius: 50%;    
    transition: background-color 0.3s; 
}

.custom-heading {
    color: #546e7b;
    font-size: 23.906px;
    margin: 10px 0px 24px;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
}
.form-label{
    font-size: 18px;
    color: #69769e;
}
.placeholder{
    font-size: 18px;
}

.custom-card {
    width: 500px;
    margin: 0 auto; 
    border: none;
    padding: 16px;
}

.form-label {
    margin-bottom: 15px; 
}

.form-control {
    height: 45px;
    font-size: 16px; 
}


.btn.btn-info{
    background-color: #547ebb;
    color: white;
    border: 2px solid transparent;
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    padding: 7px 15px;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 500;
}
.btn.btn-light {
    background-color: transparent; 
    color: #263238; 
    font-weight: 500;
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    border: none; 
    box-shadow: none;

}

.btn.btn-light:hover {
    background-color: transparent; 
    
}

.form-check-input:checked{
    background-color: #005cc8;
    border-color: #005cc8;
}
.form-control{
    margin-top: 10px;
    margin-bottom: 5px;
    padding: 10px;
    line-height: 1.5;
    border: 1px solid #c1c2c3;
    border-radius: 3px;
}


.custom-pencil {
    background-color: #557ef8;
    padding: 5px;
    border-radius: 4px;
    color: white;
    display: inline-block; 
}

.custom-pencil i {
    color: white; 
}

.custom-bin {
    background-color: #e95362;
    padding: 5px;
    border-radius: 4px;
    color: white;
    display: inline-block;
}

.custom-bin i {
    color: white; 
}
.center-icons {
    vertical-align: middle; 
    text-align: center;    
    padding: 20px;         
}

.page-title-box{
    margin-top: 10px;
    background: none;
    border: none;
    box-shadow: none;
    
}

.mb-sm-0{
    font-size: 120px;
    color: #303E67;
    margin-top: 20px;
    font-weight: 600;
}

.card-title{
    color: #263238;
    font-weight: 600;
    font-size: 18px;
}

.navbar-menu .navbar-nav .nav-link i{
    font-size: 26px;
    padding-right: 20px;
}

:is([data-layout=vertical],[data-layout=semibox])[data-sidebar=dark] .navbar-menu{
    background-color: #263238;
    border:#263238;
  }

  body.dark-sidebar .left-sidebar .menu-body .nav-item .nav-link.active {
    color: #547ebb;
    background-color: #12171a; 
    padding: 25px 12px; 
    box-shadow: inset 4px 0 0 #547ebb; 
}

:is([data-layout=vertical],[data-layout=semibox])[data-sidebar=dark] .navbar-nav .nav-sm .nav-link.active{
    color: #547ebb;
    background-color: #12171a; 
    padding: 25px 12px; 
    box-shadow: inset 4px 0 0 #547ebb; 
    border-radius: 5px;
}

.active>.page-link, .page-link.active {
    background-color: #557ef8;
    border: #557ef8;
}

.sidebar-logo {
    background-color: white;
    padding: 20px;
    text-align: center;
}

.sidebar-logo img {
    max-height: 60px;
    width: auto; 
}


.btnheader {
    background-color: white;
    height: 70px;
    border: none;
}

.btnheader:hover {
    background-color: white; 
    color: inherit; 
    border: none; 
    box-shadow: none; 
    transition: none; 
}

.dt-buttons a.dt-button, .dt-buttons button.dt-button, .dt-buttons div.dt-button, .dt-buttons input.dt-button{
    background-color: #547EBB;
    border: #547EBB;
    border-radius: 22px;
    color: white;
}

.dt-buttons a.dt-button:hover, 
.dt-buttons button.dt-button:hover, 
.dt-buttons div.dt-button:hover, 
.dt-buttons input.dt-button:hover {
    background-color: #547EBB; 
    border: none; 
    color: white; 
}


.signuplogo{
    margin-left: 45%;
    width: 10%;
}

#topnav-hamburger-icon {
    display: none;
}

.page-title-right {
    display: none;
}

.navbar-menu .navbar-nav .nav-sm {
    padding-left: 1rem;
}


.vertical-center-heading {
    display: flex;             
    align-items: center;       
    height: 70px;              
    font-size: 24px;           
    color: rgb(7, 7, 7);      
    font-weight: 500;          
    margin-left: 10px;     
    margin-top: 0px;          
    margin-bottom: 5px;       
}

:is([data-layout=vertical],[data-layout=semibox])[data-sidebar=dark] .navbar-nav .nav-link:hover {
    color: #a3a6b7; /* Reset hover color */
    box-shadow: none; /* Remove box-shadow on hover */
}

:is([data-layout=vertical],[data-layout=semibox])[data-sidebar=dark] .navbar-nav .nav-link {
    font-size: 15px;
    font-weight: 500;
}
.page-title-box h4{
    text-transform: unset;
}

:is([data-layout=vertical],[data-layout=semibox])[data-sidebar=dark] .navbar-nav .nav-sm .nav-link:before{
    margin-left: 10px;
}