input[readonly] {
    background-color: #f4f4f4; /* Light gray background color */
    color: #666; /* Gray text color */
    border: 1px solid #ddd; /* Light gray border */
    cursor: not-allowed; /* Change cursor to not-allowed */
}

select {
    border: 1px solid #ced4da;
    outline: none; /* Optional: Removes the outline when the select is focused */
    padding: 0.3rem;
    border-radius: 0.25rem;
}

nav.sb-topnav{
    /* background-color: var(--primary-color); */
    background-color: #fff;
    color:#6c7293!important;
}

.sb-sidenav{
    /* background-color: var(--primary-color-soft); */
    background-color: #fff;
    font-weight: 400;
    font-size:0.9em;
}

.sb-sidenav-dark .sb-sidenav-menu .nav-link, .sb-sidenav-dark a{
    color:var(--text-light-color);
}

.sb-sidenav-light .sb-sidenav-menu .nav-link .sb-nav-link-icon{
    color: #c4cff9;
    min-width: 1rem;
}

.sb-sidenav-light .sb-sidenav-menu .nav-link:hover{
    background-color: #eef1ff;
}

.sb-sidenav-light .sb-sidenav-menu .nav-link:hover .sb-nav-link-icon{
    color: #5d78ff;
}

.sb-sidenav-light .sb-sidenav-menu .nav-link.active{
    background-color: #eef1ff;
}

body{
    background-color: #f2f3f8;
}
.navbar{
    background-color: var(--primary-color);
}
.nav-link,.navbar-brand{
    color:#6c7293
}

.navbar-brand .navbar-brand-title{
    text-decoration: none;
    color:#5d78ff
} 

table{
    font-size: 0.8em !important;
}

.btn-primary{
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.btn-primary:hover,.btn-primary:active{
    background-color: var(--primary-color-soft) !important;
    border-color: var(--primary-color-soft) !important;
}

.btn-info{
    color:#fff;
    background-color: var(--info-color);
}

.btn-warning{
    color: #212529;
}

.btn-default{
    color: #fff;
    background-color: gray;
}

.dropdown-menu.show{
    border-radius: 0;
    border-color:transparent;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    font-size: 0.9rem;
}

.dropdown-item{
    padding-bottom: 10px !important;
    padding-top: 10px !important;
}

.dropdown-item:hover, .dropdown-item:focus{
    background-color: var(--bg-highlight-color);
    color: var(--text-highlight-color)
}


.dt-button {
    background:unset !important;
    --bs-btn-padding-y: 0.375rem !important;
    --bs-btn-padding-x: 0.75rem !important;
    --bs-btn-font-family: inherit !important;
    --bs-btn-font-size: 1rem !important;
    --bs-btn-font-weight: 400 !important;
    --bs-btn-line-height: 1.5 !important;
    --bs-btn-color: #fff !important;

    border-radius: 5px !important;
    border: unset !important;
    /* display: inline-block !important; */
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x) !important;
    font-family: var(--bs-btn-font-family) !important;
    font-size: var(--bs-btn-font-size) !important;
    font-weight: var(--bs-btn-font-weight) !important;
    line-height: var(--bs-btn-line-height) !important;
    color: var(--bs-btn-color) !important;
    text-align: center !important;
    text-decoration: none !important;
    vertical-align: middle !important;
    cursor: pointer !important;
}


/* DataTables Copy Button */
.dt-button.buttons-copy {
    background-color: var(--primary-color) !important;
    color: #fff;
}

/* DataTables Excel Button */
.dt-button.buttons-excel {
    background-color: var(--success-color) !important;
    color: #fff;
}

/* DataTables PDF Button */
.dt-button.buttons-pdf {
    background-color: var(--danger-color) !important;
    color: #fff;
}

/* DataTables Print Button */
.dt-button.buttons-print {
    background-color: var(--warning-color) !important;
    color: #000 !important;
}

/* Custom CSS for pagination */
.pagination .page-item:not(.disabled) a.page-link {
    color: var(--primary-color-soft);; /* Change this to your desired color */
    background-color: transparent; /* Set background color to transparent */
    border-color: var(--primary-color); /* Change this to your desired color */
}

.paginate_button.page-item.active a.page-link {
    background-color: var(--primary-color);
    color: #fff !important;
    border-color: #5d78ff !important;
}

.photo-container ul li {
    list-style: none;
}

.table thead th{
    background-color: var(--primary-color-soft) !important;
    color:#f2f3f8
}

.table.table-secondary thead th {
    background-color: var(--info-color) !important;
    color:#f2f3f8
}

.text-accent{
    color: var(--primary-color-soft)
}

.alert-success {
    background-color: #21ff65;
}

.collapse.show .nav-link{
    /* background-color: #eef1ff; */
}

.nav-tabs .nav-link{
    color: var(--bs-nav-tabs-link-active-color);
}

.card{
    border:unset;
    box-shadow: 1px 1px 9px 0px rgba(0,0,0,.1)
}

.card .card-body h5{
    color : var(--primary-color-soft);
    text-transform: uppercase;
    font-size: 1rem;
  }

.has-error .form-control {
    border-color: #ff0000; /* Red border color */
}

@media (min-width:600px){
    .has-row-actions{
        padding: 8px 10px;
    }
    
    .has-row-actions .table-item {
        position: relative; /* Ensure the container is positioned */
    }
    
    .has-row-actions .table-item .actions {
        /* position: absolute; */
        left: 0;
        padding: 10px;
        display: none; /* Initially hidden */
        z-index: 1; /* Ensure it's displayed above other elements */
        text-align: end;
    }
    
    .has-row-actions:hover .table-item .actions {
        display: block; /* Show actions on hover */
    }
}

@media (max-width:600px) {
    .sb-sidenav-toggled #layoutSidenav #layoutSidenav_nav{
        width:100%;
        height: 100%;
    }
}