/* html{
background-color: #f5f7fb;
} */


#roles-table-body tr,
#subUserTableBody tr,
#employee-table-container tr,
#worker-table-container tr,
#project-table-container tr,
#purchase-request-table-body tr,
#sub-user-table-body-wallet tr {
    height: auto !important; /* Ensure height adjusts based on content */
}
#roles-table-body td,
#subUserTableBody td,
#employee-table-container td,
#worker-table-container td ,
#project-table-container td,
#purchase-request-table-body td,
#sub-user-table-body-wallet td{
    padding: 2px 4px !important; /* Reduce padding */
    line-height: 1 !important; /* Tighten line spacing */
    vertical-align: middle !important; /* Ensure content is vertically aligned */
}
#roles-table-body .btn,
#subUserTableBody .btn,
#employee-table-container .btn,
#worker-table-container .btn,
#project-table-container .btn ,
#purchase-request-table-body .btn,
#sub-user-table-body-wallet .btn{
    padding: 2px 6px !important; /* Smaller button padding */
    font-size: 0.85rem !important; /* Slightly smaller font size for buttons */
}




#transaction-table-body tr {
    height: auto !important; /* Ensure height adjusts based on content */
}


#transaction-table-body td{
    padding: 6px 4px !important; /* Reduce padding */
    line-height: 1 !important; /* Tighten line spacing */
    vertical-align: middle !important; /* Ensure content is vertically aligned */
}

#transaction-table-body .btn{
    padding: 6px 6px !important; /* Smaller button padding */
    font-size: 0.85rem !important; /* Slightly smaller font size for buttons */
}




.tooltip-container {
    display: none; /* Hide initially */
    position: absolute; /* Position absolutely */
    z-index: 1000; /* Ensure it appears above other elements */
    background-color: #000000; /* Tooltip background */
    border: none;
    padding: 5px; /* Padding inside tooltip */
    border-radius: 4px; /* Rounded corners */
    white-space: nowrap; /* Prevents text wrapping */
    color: white;
}

.nav-link.nav-link2:hover + .tooltip-container {
    display: block; 
}


.tooltip-container {
    top: 50%; /* Center vertically */
    left: 100%; /* Position to the right of the button */
    transform: translateY(-50%); /* Adjust to center vertically */
    margin-left: 10px; /* Space between button and tooltip */
    margin-top: 20px;
}





table{}


table .action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* padding: 0.25rem 0.5rem; */
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

table .action-btn:hover {
    transform: scale(1.05);
}

table .btn-outline-success:hover {
    background-color: rgba(138, 197, 65, 0.1);
    color: #6b8f42;
}

table .btn-outline-primary:hover {
    background-color: rgba(0, 123, 255, 0.1);
    color: #0056b3;
}

table .btn-outline-danger:hover {
    background-color: rgba(220, 53, 69, 0.1);
    color: #a71d2a;
}

table .gap-2 > * {
    margin-right: 8px;
}


.wallet-amount-container {
    background-color: white;
    padding: 20px;
    display: flex; /* Enables flexbox for alignment */
    align-items: center; /* Vertically centers the content */
    justify-content: center; /* Horizontally centers the content */
    text-align: center; /* Ensures text alignment */
}




.custom-col-minimized {
    width: 60px !important; 
}

body {
    font-family: 'Raleway' !important;
}

#left-column {
    transition: width 0.3s;
}

#v-pills-tab .nav-link {
    transition: all 0.3s;
    white-space: nowrap;
    
}





.hidden {
    display: none !important;
}



#left-column .nav-link {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 0;
    transition: width 0.3s ease, transform 0.3s ease;
}

#left-column .nav-link i {
    transition: transform 0.3s ease;
}

#left-column.expanded .nav-link {
    transform: rotate(0);
}

#left-column:not(.expanded) .nav-link {
    transform: rotate(0);
    overflow: hidden;
    white-space: nowrap;
}


#left-column, #right-column {
    transition: all 0.5s ease-in-out; 
}



.tog-head .tog-image {
    width: 60px;
    height: auto;
    
}


.tog-head .name {
    font-size: 16px;
    font-weight: bold;
    color: rgb(255, 255, 255);
    display: flex;
    align-items: center;
    margin-left: 10px;
}




/* .dashboard-section .right-section .main-form {
    height: 400px;
    background-color: white;
    border-radius: 0px;
    border: none;
    width: 70%;
} */



/* .dashboard-section .right-section {
    
    padding: 50px;
    } */
    
    
    @media (max-width: 576px) {
        .dashboard-section .main-banner {
    /* height: 70vh; */
    }
    
    .dashboard-section .main-banner .main-logo img {
    max-width: 70%;
    }
    
    .dashboard-section .main-banner .banner-image img {
    max-width: 70%;
    }
    
    .dashboard-section .right-section {
    /* height: auto; */
    padding: 20px;
    /* margin-top: 100px; */
    }
    
    .dashboard-section .right-section img {
    max-width: 100%;
    height: auto;
    }
    }
    
    
    .dashboard-section .right-section .main-form{
    height: 400px;
    background-color: white;
    border-radius: 0px;
    border: none;
    width: 95%;
    padding: 20px;
    /* display: flex;
    justify-content: center; */
    
    }
    @media (max-width: 576px) {
        .dashboard-section .right-section .main-form{
    height: 400px;
    background-color: white;
    border-radius: 0px;
    border: none;
    width: 100%;
    /* display: flex;
    justify-content: center; */
    
    }
    }
    
    
    .dashboard-section .right-section .main-form .main-head{
    color: #005a49;
    font-size: 38px;
    margin-top: 25px;
    font-weight:bold;
    text-align: center;
    }
    
    .dashboard-section .right-section .main-form .form-control {
    width: 80%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--bs-body-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: rgb(192, 195, 196);
    background-clip: padding-box;
    border-radius: 0;
    height: 40px;
    /* transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; */
    }
    
    .dashboard-sectionn .right-section .main-form .form-control::placeholder{
    font-weight: bold;
    }
    
    .dashboard-section .right-section .main-form .login-btn{
    width: 140px;
    height: 40px;
    border: none;
    border-radius: 0px;
    background-color: #8ac541;
    text-align: center;
    color: white;
    }
    



/* .pro-sec {
    width: 100px;
    transition: all 0.5s ease; 
} */


/* .pro-sec .expanded {
    background-color: #f8f9fa; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 
    transition: all 0.5s ease; 
    
} */


/* #mobile-nav .nav-link {
    justify-content: center; 
    width: 100%; 
} */



/* .hidden {
    opacity: 0;
    transition: opacity 0.5s ease; 
} */

/* .img-fluid {
    opacity: 1;
    transition: opacity 0.5s ease; 
} */


/* #right-column {
    background-color: #ffffff; 
    transition: all 0.5s ease-in-out; 
} */





   
/*   
    .pro-sec {
        width: 100px;
        transition: width 0.3s ease; 
    }
    
    .pro-sec:hover {
        width: 200px; 
    }

   
    .pro-sec.expanded {
        background-color: #f8f9fa;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 
    }

    
    #right-column {
    
        background-color: #ffffff;
    }


    @media(max-width:992px){
        #right-column {
    
        }
    } */

    /* Hiding images when hidden class is added */
    .hidden {
        display: none !important; /* Hides the element */
    }

   #mobile-nav .nav-pills .nav-link{
    color: #8ac541;
    }


    .nav-pills .nav-link.active, .nav-pills .show>.nav-link{
    color: white !important;
    background-color: #8ac541 !important;
    }


#sidebar {
    width: 200px; /* Normal width */
    overflow: hidden; /* Hide overflow content */
    transition: width 0.3s; /* Smooth transition for width change */
}

#sidebar.minimized {
    width: 80px; /* Minimized width (you can adjust this value) */
}

#sidebar .nav-link {
    justify-content: flex-start; /* Align links to the left */
    padding: 10px; /* Add padding for links */
}

#sidebar.minimized .nav-link {
    justify-content: center; /* Center text in minimized state */
    padding: 0.5rem 0; /* Adjust padding for minimized state */
}

#sidebar.minimized .name {
    display: none; /* Hide the name in minimized state */
}

#sidebar.minimized .image-container {
    display: none; /* Hide the profile image in minimized state */
}







.login-section {
height: 100vh;
width: 100%;
}

.login-section .main-banner {
background: url('images/bg-ai.png') no-repeat center center;
background-size: cover;
background-color: white;
height: 100vh;
}

.login-section .main-banner .main-logo {
display: flex;
justify-content: center;
}

.login-section .main-banner .main-logo img {
max-width: 100%;
height: auto;
margin-top: 50px;
}

.login-section .main-banner .banner-image {
display: flex;
justify-content: center;
margin-top: 100px;
}

.login-section .main-banner .banner-image img {
max-width: 100%;
height: auto;
border-radius: 30% 30% 0px 0px;
}

.login-section .right-section {
background-color: #004c40;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
}

.login-section .right-section img {
max-width: 1000%;
height: 100%;
}

@media (max-width: 1200px) {
.login-section .main-banner {
height: auto;
}

.login-section .right-section {
height: auto;
}
}

@media (max-width: 992px) {
.login-section .main-banner {
height: auto;
}

.login-section .main-banner .main-logo img {
max-width: 90%;
}

.login-section .main-banner .banner-image img {
max-width: 90%;
}

.login-section .right-section {
height: 60vh;
padding: 20px;
}
}

@media (max-width: 768px) {
.login-section .main-banner {
height: 100%;
}

.login-section .main-banner .main-logo img {
max-width: 80%;
}

.login-section .main-banner .banner-image img {
max-width: 80%;
}

.login-section .right-section {
/* height: 50vh; */
padding: 15px;
}
}

@media (max-width: 576px) {
.login-section .main-banner {
/* height: 70vh; */
}

.login-section .main-banner .main-logo img {
max-width: 70%;
}

.login-section .main-banner .banner-image img {
max-width: 70%;
}

.login-section .right-section {
/* height: 100vh; */
padding: 10px;
}

.login-section .right-section img {
max-width: 100%;
height: auto;
}
}

/* 
.login-section .right-section .main-form{
height: 400px;
background-color: white;
border-radius: 0px;
border: none;
width: 90%;


} */

.login-section .right-section .main-form .main-head{
color: #005a49;
font-size: 38px;
margin-top: 25px;
font-weight:bold;
text-align: center;
}

.login-section .right-section .main-form .form-control {
width: 80%;
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: var(--bs-body-color);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: rgb(192, 195, 196);
background-clip: padding-box;
border-radius: 0;
height: 40px;
/* transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; */
}

.login-section .right-section .main-form .form-control::placeholder{
font-weight: bold;
}

.login-section .right-section .main-form .login-btn{
width: 140px;
height: 40px;
border: none;
border-radius: 0px;
background-color: #8ac541;
text-align: center;
color: white;

}





.dashboard-section .pro-sec {
background-size: cover;
background-position: center;
background-image: url(images/bg-ai.png);
/* height: 100vh; */
min-height: 100vh;
display: flex;
flex-direction: column;
text-align: center;
}

.dashboard-section .tab-content{
padding: 50px !important;
}

@media (max-width: 992px) {
    .dashboard-section .tab-content{
        padding: 10px !important ;
        /* margin-top: -95px; */
        }
}


.dashboard-section .pro-sec img{
width: 80%;
height: auto;

}

.dashboard-section .pro-sec .profile-container{
    border: 1px solid black;
    background-color: white;
    border-radius: 5px;
    padding: 5px;
   
}








/* .dashboard-section .pro-sec .image-container {
display: flex;
justify-content: center;
width: 150px;
height: auto;
margin: 0 auto;
} */

.dashboard-section .pro-sec img {
display: block;
margin: 0 auto 0 auto;
}

/* .dashboard-section .pro-sec .name{
font-size: 16px;
font-weight: bold;
color: black;
} */

.dashboard-section .pro-sec .nav-pills .nav-link2,
.nav-pills .show > .nav-link2 {
width: 150px;
border-radius: 0;
background-color: #8ac541;
margin-top: 10px;
color: white;
height: 40px !important;
text-align: center;
font-size: 16px;
display: flex;
justify-content: center;
align-items: center;
border: none;
}

.dashboard-section .pro-sec .nav-pills .toggle,
.nav-pills .show > .toggle {
width: 70px;
border-radius: 0;
background-color: #8ac541;
margin-top: 10px;
color: white;
height: 40px !important;
text-align: center;
font-size: 16px;
display: flex;
justify-content: center;
align-items: center;
border: none;
}




.dashboard-section .tab-content .search-board{
background-color: white;
width: 100%;
height: 100px;
padding: 30px;

}



@media(max-width:992px){
    
.dashboard-section .tab-content .search-board{
    background-color: white;
    width: 100%;
    height: 100px;
    padding: 30px;
    /* margin-top: 100px; */
    }
    
}


.dashboard-section .tab-content .search-board .form-control{
width: 100%;
border-radius: 0px;

}

.dashboard-section .tab-content  .search-btn{
border: none;
width: 130px;
height: 40px;
background-color: #8ac541;
color: white;
}

/* .dashboard-section .tab-content .main-table {
background-color: white;
width: 100%;
margin-top: 50px;
opacity: 1 !important;
padding: 40px;
position: relative;

}

.dashboard-section .tab-content .main-table::before{
    background-size: cover; 
background-position: center; 
background-repeat: no-repeat;
position: absolute;
background-image: url('{{ asset('images/bg-ai.png') }}');
} */


.dashboard-section .tab-content .main-table {
    background-color: white;
    width: 100%;
    margin-top: 50px;
    opacity: 1 !important;
    padding: 40px;
    position: relative; 
    z-index: 1; 
    overflow: hidden; 
}

.dashboard-section .tab-content .main-table::before {
    content: ""; 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-image: url('/images/bg-ai.png');
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%; 
    z-index: -1; 
    opacity: 0.3;
    
}




/* 
.dashboard-section .tab-content .main-table table {
border-collapse: collapse;
background-color: transparent !important;
border: 1px solid black;
}
.dashboard-section .tab-content .main-table th, td {
border: 1px solid #000000;
text-align: center;
padding: 8px;
background-color: transparent !important;
}
.dashboard-section .tab-content .main-table th {
background-color: transparent !important;
border: 1px solid black;
}

.dashboard-section .tab-content .main-table tbody, td, tfoot, th, thead, tr {
border-color: inherit;
border-style: solid;
border-width: 1px !important;
background-color: transparent !important;
} */





#add_user_roles .main-permission-body{
border: 1px solid rgb(0 0 0 / 16%);
}


#add_user_roles .main-permission-body .main-permission-head{

}

#add_user_roles .main-permission-body thead th{
background-color: #8ac541 !important;
color: white;
}




#add_user_roles .main-permission-body .creative-checkbox {
display: inline;
position: relative;
margin: 10px 10px;
overflow: hidden;
float: left;
}
#add_user_roles .main-permission-body .creative-checkbox p {
padding: 10px;
margin: 0;
float: left;
line-height: 20px;
}
#add_user_roles .main-permission-body .creative-checkbox input {
position: absolute;
visibility: hidden;
}
#add_user_roles .main-permission-body .creative-checkbox input + i {
border: 2px solid #ccc;
width: 40px;
height: 20px;
padding: 2px;
float: left;
border-radius: 20px;
transition: all .25s;
}
#add_user_roles .main-permission-body .creative-checkbox input + i:after {
content: ' ';
background-color: #ccc;
float: left;
width: 50%;
height: 100%;
border-radius: inherit;
transition: inherit;
}
#add_user_roles .main-permission-body .onOff input + i {
border: 2px solid #de1414;
}
#add_user_roles .main-permission-body .onOff input + i:after {
background-color: #de1414;
}
#add_user_roles .main-permission-body .creative-checkbox input:checked + i {
border-color: #8ac541;
}
#add_user_roles .main-permission-body .creative-checkbox input:checked + i:after {
background-color: #8ac541;
margin-left: 50%;
}
#add_user_roles .main-permission-body .creative-checkbox.halo-bg input:checked + i {
background-color: #e4ece3;
}
#add_user_roles .main-permission-body .creative-checkbox.green input:checked + i {
border-color: #8ac541;
}
#add_user_roles .main-permission-body .creative-checkbox.green input:checked + i:after {
background-color: #8ac541;
}

#add_user_roles .main-permission-body .permission-scroll {
max-height: 450px;
overflow-y: auto;
border: 1px solid #ddd;
}






.create-section{
background-color: #f5f7fb;
}

.create-section .container{


}

.create-section .main-heading{
margin-top: 50px;
font-size: 20px;
color: black;



}

.create-section .main-body{
border: 1px solid #0000001c;
margin-top: 40px;
background-color: white;
padding: 30px;
}

.create-section .main-body .save{
width: 100%;
height: 40px;
border: none;
border-radius: 0px;
background-color: #8ac541;
color: white;
font-size: 19px;
}html{
background-color: #f5f7fb;
}


.login-section {
/* height: 100vh; */
width: 100%;
}

.login-section .main-banner {
/* background: url('images/bg-ai.png') no-repeat center center; */
background-size: cover;
background-color: white;
}

.login-section .main-banner .main-logo {
display: flex;
justify-content: center;
}

.login-section .main-banner .main-logo img {
max-width: 100%;
height: auto;
margin-top: 50px;
}

.login-section .main-banner .banner-image {
display: flex;
justify-content: center;
margin-top: 100px;
}

@media (max-width: 992px) {
.login-section .main-banner .banner-image {
display: flex;
justify-content: center;
margin-top: 0px;
}
}


.login-section .main-banner .banner-image img {
max-width: 100%;
height: auto;
border-radius: 30% 30% 0px 0px;
}

.login-section .right-section {
background-color: #004c40;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
}

.login-section .right-section img {
max-width: 1000%;
height: 100%;
}

@media (max-width: 1200px) {
.login-section .main-banner {
height: auto;
}

.login-section .right-section {
height: auto;
}
}

@media (max-width: 992px) {
.login-section .main-banner {
height: auto;
}

.login-section .main-banner .main-logo img {
max-width: 90%;
}

.login-section .main-banner .banner-image img {
max-width: 90%;
}


}

@media (max-width: 768px) {
.login-section .main-banner {
height: 100%;
}

.login-section .main-banner .main-logo img {
max-width: 80%;
}

.login-section .main-banner .banner-image img {
max-width: 80%;
}

.login-section .right-section {
/* height: 50vh; */
padding: 50px;
}
}

@media (max-width: 576px) {
.login-section .main-banner {
/* height: 70vh; */
}

.login-section .main-banner .main-logo img {
max-width: 70%;
}

.login-section .main-banner .banner-image img {
max-width: 70%;
}

.login-section .right-section {
/* height: auto; */
padding: 20px;
/* margin-top: 100px; */
}

.login-section .right-section img {
max-width: 100%;
height: auto;
}
}


.login-section .right-section .main-form{
height: 400px;
background-color: white;
border-radius: 0px;
border: none;
width: 95%;
/* display: flex;
justify-content: center; */

}
@media (max-width: 576px) {
.login-section .right-section .main-form{
height: 400px;
background-color: white;
border-radius: 0px;
border: none;
width: 90%;
/* display: flex;
justify-content: center; */

}
}


.login-section .right-section .main-form .main-head{
color: #005a49;
font-size: 38px;
margin-top: 25px;
font-weight:bold;
text-align: center;
}

.login-section .right-section .main-form .form-control {
width: 80%;
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: var(--bs-body-color);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: rgb(192, 195, 196);
background-clip: padding-box;
border-radius: 0;
height: 40px;
/* transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; */
}

.login-section .right-section .main-form .form-control::placeholder{
font-weight: bold;
}

.login-section .right-section .main-form .login-btn{
width: 140px;
height: 40px;
border: none;
border-radius: 0px;
background-color: #8ac541;
text-align: center;
color: white;
}





.dashboard-section .pro-sec {
background-size: cover;
background-position: center;
background-image: url(images/bg-ai.png);
/* height: 100vh; */
min-height: 100vh;
display: flex;
flex-direction: column;
text-align: center;
}

.dashboard-section .pro-sec img{
width: 80%;
height: auto;

}

.dashboard-section .pro-sec .image-container-block  {
    
display: flex;
justify-content: center;
width: 55px;
height: auto;
margin: 0 auto;
}

.dashboard-section .pro-sec .image-container-flex {
    
    display: flex;
    justify-content: center;
    width: 55px;
    height: auto;
    /* margin: 0 auto; */
    }

.dashboard-section .pro-sec img {
display: block;
margin: 0 auto 0 auto;
}

.dashboard-section .pro-sec .name{
font-size: 16px;
font-weight: bold;
color: black;
}




.dashboard-section .tab-content .search-board{
background-color: white;
width: 100%;
height: auto;
padding: 30px;
}



.dashboard-section .tab-content .search-board .search-btn{
border: none;
width: 130px;
height: 40px;
background-color: #8ac541;
color: white;
}

/* .dashboard-section .tab-content .main-table{
background-color: white;
width: 100%;
margin-top: 50px;
opacity: .6;
padding: 40px;
} */





@media(max-width:992px){
    .dashboard-section .tab-content .main-table {
        background-color: white;
        /* height: 700px; */
        width: 100%;
        margin-top: 50px;
        opacity: 1 !important;
        padding: 10px !important;
     
        
        /* Adding a background image */
        
        background-size: cover; /* Makes the image cover the entire section */
        background-position: center; /* Centers the image */
        background-repeat: no-repeat; /* Ensures the image doesn't repeat */
        }
     
}


.dashboard-section .tab-content .main-table table {
border-collapse: collapse !important;
background-color: transparent !important;
border: 1px solid black !important;
}
.dashboard-section .tab-content .main-table th, td {
border: 1px solid #000000 !important;
text-align: center !important;
/* padding: 2px; */
background-color: transparent !important;
}
.dashboard-section .tab-content .main-table th {
background-color: transparent !important;
border: 1px solid black !important;
}

.dashboard-section .tab-content .main-table tbody, td, tfoot, th, thead, tr {
border-color: inherit !important;
border-style: solid !important ;
border-width: 1px !important;
height: 10px !important;
}





/* #add_user_roles .main-permission-body{
border: 1px solid rgb(0 0 0 / 16%);
}


#add_user_roles .main-permission-body .main-permission-head{

}

#add_user_roles .main-permission-body thead th{
background-color: #8ac541 !important;
color: white;
}




#add_user_roles .main-permission-body .creative-checkbox {
display: inline;
position: relative;
margin: 10px 10px;
overflow: hidden;
float: left;
}
#add_user_roles .main-permission-body .creative-checkbox p {
padding: 10px;
margin: 0;
float: left;
line-height: 20px;
}
#add_user_roles .main-permission-body .creative-checkbox input {
position: absolute;
visibility: hidden;
}
#add_user_roles .main-permission-body .creative-checkbox input + i {
border: 2px solid #ccc;
width: 40px;
height: 20px;
padding: 2px;
float: left;
border-radius: 20px;
transition: all .25s;
}
#add_user_roles .main-permission-body .creative-checkbox input + i:after {
content: ' ';
background-color: #ccc;
float: left;
width: 50%;
height: 100%;
border-radius: inherit;
transition: inherit;
}
#add_user_roles .main-permission-body .onOff input + i {
border: 2px solid #de1414;
}
#add_user_roles .main-permission-body .onOff input + i:after {
background-color: #de1414;
}
#add_user_roles .main-permission-body .creative-checkbox input:checked + i {
border-color: #8ac541;
}
#add_user_roles .main-permission-body .creative-checkbox input:checked + i:after {
background-color: #8ac541;
margin-left: 50%;
}
#add_user_roles .main-permission-body .creative-checkbox.halo-bg input:checked + i {
background-color: #e4ece3;
}
#add_user_roles .main-permission-body .creative-checkbox.green input:checked + i {
border-color: #8ac541;
}
#add_user_roles .main-permission-body .creative-checkbox.green input:checked + i:after {
background-color: #8ac541;
}

#add_user_roles .main-permission-body .permission-scroll {
max-height: 300px;
overflow-y: auto;
border: 1px solid #ddd;
} */






.create-section{
background-color: #f5f7fb;
}

.create-section .container{


}

.create-section .main-heading{
margin-top: 50px;
font-size: 20px;
color: black;



}

.create-section .main-body{
border: 1px solid #0000001c;
margin-top: 40px;
background-color: white;
padding: 30px;
}

.create-section .main-body .save{
width: 100%;
height: 40px;
border: none;
border-radius: 0px;
background-color: #8ac541;
color: white;
font-size: 19px;
}


.edit-btn{
width: 50px !important;
height: 30px;
border: none;
border-radius: 0px;
background-color: #8ac541;
color: white;
font-size: 14px;
}


.delete-btn{
width: 50px !important;
height: 30px;
border: none;
border-radius: 0px;
background-color: red;
color: white;
font-size: 14px;
}

/* .close-btn{
width: 50px !important;
height: 30px;
border: none;
border-radius: 0px;
background-color: rgb(0, 8, 255);
color: white;
font-size: 14px;
} */








.pagination .page-item.active .page-link {
    background-color: #8ac541;
    color: #fff;
    border: none;
}

.pagination .page-link {
    color: #8ac541;
    border: 1px solid #ddd;
    padding: 8px 12px;
    margin: 0 4px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.pagination .page-link:hover {
    background-color: #f8f9fa;
    color: #8ac541;
    border-color: #ddd;
}

.pagination .page-item.disabled .page-link {
    color: #6c757d;
    background-color: #fff;
    border-color: #ddd;
}



.pagination .page-link:focus, 
.pagination .page-link:active {
    outline: none; 
    border: none;
    box-shadow: 0 0 10px #8ac541; 
}


.profile-edit {
    padding: 50px;
}


@media(max-width:992px){
    .profile-edit {
        padding: 0px;
        margin-top: 10px;
    } 
    .resp-nav{
        /* border: 1px solid rgb(255, 255, 255); */
        border-radius: 5px;
    }

    .login-section .main-banner .main-logo img{
        margin-top: 0;
    }
    /* .login-section .main-banner{
        height: 52vh;
    } */
}


.login-section .main-banner,
.login-section .right-section {
    height: 100% !important; 
}

@media (max-width: 991px) { /* For tablets and smaller screens */
    .login-section .main-banner,
    .login-section .right-section {
        height: 50vh !important; 
    }
    .login-section .row {
        flex-wrap: wrap !important;
        
    }
}




/* 
   #emptable  th, 
    #emptable td {
        padding: 3px;
        line-height: 1.2; 
        vertical-align: middle; 
        font-size: 14px !important; 
    }

    #emptable {
        border-collapse: collapse; 
    }


    #pro-table  th, 
    #pro-table td {
        padding: 3px;
        line-height: 1.2; 
        vertical-align: middle; 
        font-size: 14px !important; 
    }

   #pro-table {
        border-collapse: collapse; 
    }



     #table  th, 
   #table  td {
        padding: 3px;
        line-height: 1.2; 
        vertical-align: middle; 
        font-size: 14px !important; 
    }

   #table  {
        border-collapse: collapse; 
    }

    #workersTable  th, 
    #workersTable   td {
        padding: 3px;
        line-height: 1.2; 
        vertical-align: middle; 
        font-size: 14px !important; 
    }

    #workersTable {
        border-collapse: collapse; 
    }



    #roletable th,
    #roletable td {
        padding: 3px !important; 
        line-height: 1 !important; 
        vertical-align: middle !important; 
        font-size: 14px !important; 
    }

 
    #roletable {
        border-collapse: collapse !important; 
    }



    #exptable th,
    #exptable td {
        padding: 10px !important; 
        line-height: 1 !important; 
        vertical-align: middle !important; 
        font-size: 14px !important; 
    }

 
    #exptable {
        border-collapse: collapse !important; 
    } */

    /* Pagination adjustments */
  .pagination .page-link {
        padding: 3px 8px !important; 
        font-size: 12px !important; 
        
    }




    /* #roletable th, 
    #roletable td {
        padding: 3px !important;
        line-height: 1 !important; 
        font-size: 15px !important; 
        vertical-align: middle !important; 
    }

    #roletable {
        border-collapse: collapse !important; 
    } 

  
#roletable .btn {
        padding: 2px 6px !important; 
        font-size: 10px !important; 
    } */


    .employee-portal{

        text-align: center;
        font-size: 20px;
        font-weight: bold;
    }

    .leave-request-style{
        margin-right: .25rem !important;
        margin-left: .25rem !important;
    }