:root {
    --color-theme: 0, 71, 187;
    /* --color-theme: 196, 112, 192; */
    --radius: 8px;
    --bs-primary-rgb:0, 71, 187 !important;
    --bs-warning-rgb:255, 205, 0 !important;
    --bs-info-rgb:0, 159, 223 !important;
    --bs-link-color:#0047BB !important;
    --cui-heading-color: 77, 77, 77 !important;
    --cui-link-color:#0047BB !important;
    --cui-link-hover-color: #009FDF !important;
    --cui-nav-link-font-size: 16px !important;
}

.active>.page-link,
.page-link.active{
    background-color: #0047BB !important;
}

.bg-primary{
    background-color: #0047BB !important;
}

.modal-content-dashboard .bg-primary {
    background-color: #0047BB !important;
}

.dropdown-item{
    color: #4D4D4D !important;
}

body {
    background: rgba(var(--color-theme), 0.1) !important;
    color:#4D4D4D !important;
}

.table {
    color: #4D4D4D !important;
}

body > .wrapper {
    background: transparent !important;
}

#sidebar {
    background: #ffffff;
}

.sidebar-brand {
    background-color: transparent;
}

.simplebar-content {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 50px;
    justify-content: space-between;
    height: 100%;
}

.simplebar-content:after,
.simplebar-content:before {
    display: none;
}


.simplebar-content > ul.nav-items__list {
    padding: 0; 
    margin: 0;
}

.simplebar-content .nav-item {
    padding: 0 16px;
}

.sidebar-nav .nav-item .nav-link{
    padding-left: 0;
    padding-right: 0;
    color: #4D4D4D;
}

.sidebar-nav .nav-item .nav-link.active,
.sidebar-nav .nav-item .nav-link:hover {
    background: rgba(var(--color-theme), 0.1) !important;
    color: rgba(var(--color-theme), 1) !important;
    font-weight: 600 !important;
    border-radius: var(--radius);
}

.sidebar-nav .nav-item .nav-link .active{
    font-weight: bold !important;
    color: #4D4D4D !important;
}

.sidebar-nav .nav-item .nav-icon{
    color: #4D4D4D !important;
}

.sidebar-nav .nav-item .nav-link.active .nav-icon,
.sidebar-nav .nav-item .nav-link:hover .nav-icon {
    color: rgba(var(--color-theme), 1) !important;
}

.simplebar-content .powered-site {
    padding-bottom: 30px;
}

.brand-logo{
    margin-right: 80px;
}

.powered-site{
    color: #4D4D4D;
    text-align: center;
}

.app{
    font-family: 'SABICTypefaceText_Rg', Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'SABICTypefaceHeadline_Rg', Arial, Helvetica, sans-serif;
}

.app-body {
    display: flex;
    flex-direction: column;
    padding: 16px !important;
    padding-top: 0 !important;
}

.app-body main {
    background-color: #ffffff;
    border-radius: var(--radius);
    padding: 24px 12px;
    height: 100%;
    flex-grow: 1;
}


.header-toggler {
    margin-left: 8px;
}

.backpack-avatar-menu-container {
    background: rgb(var(--color-theme)) !important;
}

ol.breadcrumb {
    justify-content: flex-start !important;
}

#crudTable_wrapper {
    margin-top: 16px;
}

/* Custom select with icon */
.select-w-icon {
    border: 1px solid rgb(var(--cui-secondary-rgb));
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}

.select-w-icon select {
    min-width: 150px;
    max-width: 220px;
    background: none;
}

.select-w-icon i {
    width: 30px;
    height: 100%;
}
/* Custom select with icon */
.filter-w-icon summary::marker {
    display: none;
}

.filter-w-icon summary::-webkit-details-marker {
    display: none;
}

.filter-w-icon summary {
    min-width: 150px;
    height: 36px;
    font-size: 16px;
    padding: 6px 12px;
    list-style: none;
}

.filter-w-icon summary i {
    width: 30px;
    height: 100%;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.filter-w-icon summary + div {
    top: 36px;
    z-index: 100;
    min-width: 400px;
}

.filter-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 12px;
}

.date-calendar-w-icon > input[type="text"] {
    min-width: 250px;
    height: 36px;
    font-size: 16px;
    padding: 6px 30px 6px 12px;
    border: 1px solid rgb(var(--cui-secondary-rgb));
    border-radius: 6px;
    /* border-radius: 6px; */
}

.date-calendar-w-icon > i {
    width: 30px;
    height: 100%;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* custom switch */
.custom-switch .switch-wrapper {
    margin-right: -4px;
    margin-left: 2px;
    --cui-form-check-input-checked-bg-color: transparent
}

.custom-switch .form-switch .form-check-input {
    background-position: right center;
    background-color:  #0047BB;
    background-image: var(--cui-form-switch-checked-bg-image, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255, 255, 255, 1)'/%3e%3c/svg%3e"));
}

.custom-switch .form-switch .form-check-input:checked {
    background-position: left center;
    background-color: #0047BB !important;
    background-image: var(--cui-form-switch-checked-bg-image, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255, 255, 255, 1)'/%3e%3c/svg%3e"));
}

@media screen and (max-width: 749px) {
    .select-w-icon select,
    .date-calendar-w-icon > input[type="text"] {
        width: 150px;
        min-width: 150px;
    }
}

#crudTable_wrapper .table-content > .col-sm-12 {
    overflow-x: auto;
}

#crudTable_wrapper #crudTable td, #crudTable_wrapper #crudTable th, #crudTable_wrapper table.dataTable td, #crudTable_wrapper table.dataTable th {
    display: table-cell !important;
}

.org-display {   
    font-size: 18px;
    font-weight: 400;
    position: relative;
    text-align: right;
    display: block;
    margin-top: 10px;
    font-size: 13px;
    /* opacity: 0.5; */
}

.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
    top: 60%;
    left: 0px;
    opacity: 0.5;
    filter: alpha(opacity=50);
 }
 .show-menu-name{
    position: relative;
    text-align: center;
    margin: 15px;
    font-weight:bold;
 }
 .dropstart .dropdown-menu[data-coreui-popper]{
    width: 210px;
 }

 .overlay-content {
    background-color:#EFEFEF;
    /* position: fixed; */
    width: auto;
    height: 100%;
    /* z-index: -1; */
    top: 65px;
    left: 256px;
    /*opacity: 0.5;  in FireFox */ 
    filter: alpha(opacity=50); /* in IE */
}
.overlay-content-dashboard {
    background-color: #EFEFEF;
    position: fixed;
    width: auto;
    height: 100%;
    z-index: -1;
    top: 65px;
    left: 256px;
    opacity: 0.5;  /*in FireFox */
    filter: alpha(opacity=50);
    /* in IE */
}
/*sidepanel hide*/
.overlay-content-hide {  
    background-color:#EFEFEF;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
    top: 65px;
    left: 0px;
    opacity: 0.5; /* in FireFox */ 
    filter: alpha(opacity=50); /* in IE */
}

.loading-overlay{
    position: absolute;
    top: 400px;
    left: 650px;
    color: #000000;
    font-size:25px;
    font-weight: 700px;
}
.loading-overlay-sidebar{
    left:800px !important;
}

.overlay-content-import {
    background-color:#EFEFEF;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
    top: 65px;
    left: 256px;
    opacity: 0.5; /* in FireFox */ 
    filter: alpha(opacity=50); /* in IE */
}

.import-log-btn{
    background-color: #FEEDCA !important;
    border-color: #F9B115 !important;
}

.complete-import-link{
    font-size: 16px;
    padding-right: 10px;
}

.hide{
    display: none !important;
}

.filter-input{
    margin: 0px 10px 0px 0px;
    float: right;
}

.list-filter-input{
    float: right;
}

.filter-area{
    margin: 0px 0px 0px 10px;
}

.list-data-pages{
    width: 50%;
}

.list-filter-button{
    width: 25%;
}

.export-modal-label{
    font-size: 18px;
}

.export-select-items{
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

.export-select-items li{
    list-style: none;
}

.modal-dialog{
    margin: auto;
    max-width: none;  
    width: fit-content;
}

.export-button-group{
    float: right;
}

.import-message{
    font-size: 15px;
    color: #4DC374;
}

#import-error .la-info-circle{
    padding-right: 5px !important;
}
 
.bootstrap-select:not(.input-group-btn),
.bootstrap-select[class*=col-] {
    display: inherit !important;
    max-width: 600px !important;
    min-width: 330px !important;
}

.modal-content {
    width: 1080px !important;
}
.date_select{
    width: 288px !important;
}
.modal-content-dashboard{
    min-width: 1080px !important;
    position: relative !important;
    right: 100%;
    top: 200px;
}
.modal-content-action-list {
    top:200px;
}
.action_cases_count{
    font-size: 16px;
    margin: 5px;
}

.btn-primary, .btn-success {
    background-color: #0047BB !important;
    border-color: #0047BB !important;
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-success:hover,
.btn-success:active,
.btn-success:focus {
    background-color: #009FDF !important;
    border-color: #009FDF !important;
    color: #ffffff;
}

.btn-secondary {
    background-color: #C6C8CA !important;
    border-color: #C6C8CA !important;
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus {
    background-color: #939598 !important;
    border-color: #939598 !important;
}

.modal-content-dashboard .dropdown-toggle, .modal-content-action-list .dropdown-toggle{
    background-color: rgb(230, 231, 232, 0.8) !important;
    color: #4D4D4D !important;
}

.modal-content-dashboard .bs-placeholder,
.modal-content-action-list .bs-placeholder {
    color: #939598 !important;
}

.form-label{
    color: #009FDF !important;
    font-weight: 600 !important;
}

.card-title {
    color: #4D4D4D !important;
}

.dropdown-item.active,
.dropdown-item:active{
    background-color: #009FDF !important;
}

.text-info{
    color: #4D4D4D !important;
}

.daterangepicker .ranges li.active, .daterangepicker td.active,
.daterangepicker td.active:hover{
    background-color: #009FDF !important;
}

.dashboard-filters .bg-primary {
    background-color: rgba(147, 149, 152) !important;
}

.dashboard-filters .bg-warning {
    background-color: rgba(255, 205, 0) !important;
}

.dashboard-filters .bg-info {
    background-color: rgba(0, 159, 223) !important;
}

.dashboard-filters .border-primary {
    border-color: rgba(147, 149, 152) !important;
}

.dashboard-filters .border-warning {
    border-color: rgba(255, 205, 0) !important;
}

.dashboard-filters .border-info {
    border-color: rgba(0, 159, 223) !important;
}

.dashboard-filters .text-primary {
    color:#4D4D4D !important;
}

.dashboard-filters .text-warning {
    color: #4D4D4D !important
}

.dashboard-filters .text-info {
    color: #4D4D4D !important;
}

.dashboard-filters {
    min-height: 50px;
    height: auto;
}

.dashboard-filters .card.rounded{
    background-color: rgb(230, 231, 232, 0.1) !important;
    /* Shadow effect */
    border-radius: 8px;
    /* Optional: rounded corners */
    border: 2px solid #E6E7E8;
    /* Optional: border */
    background-color: white;
    /* Optional: background color */
}

.dashboard-filters .card{
    box-shadow: 4px 0px 10px rgba(151, 150, 150, 0.2) !important;
}

.toggle-text-primary{
    color: #0047BB !important;
}

.dashboard-filters .filter-area .bg-primary {
    background-color: #0047BB !important;
}

.pos-top-10{
    top: 11px !important;
}

#action-due-import .text-bg-secondary{
    color: #ffffff !important;
    background-color: #0047BB !important;
    padding-top: 5px !important;
}