/* Dark Mode CSS */
/* Header */
html.dark-mode #m_header_nav, html.dark-mode #total_qty_widgets {
    background: #181f39 !important;
}
html.dark-mode .m-header-menu.m-header-menu--skin-light .m-menu__nav>.m-menu__item:hover>.m-menu__link .m-menu__link-text,
html.dark-mode .m-header-menu.m-header-menu--skin-light .m-menu__nav>.m-menu__item:hover>.m-menu__link .m-menu__link-text, .m-header-menu.m-header-menu--skin-light .m-menu__nav>.m-menu__item.m-menu__item--hover>.m-menu__link .m-menu__link-text,
html.dark-mode .m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav>.m-menu__item .m-menu__submenu>.m-menu__subnav>.m-menu__item:hover>.m-menu__link .m-menu__link-text{
    color: #716aca !important;
}
html.dark-mode header .m-menu__link-text,
html.dark-mode div,
html.dark-mode h5,
html.dark-mode header .m-menu__item span {
    color: white !important;
}

html.dark-mode .search-glob-box, 
html.dark-mode .search-glob-box span,
html.dark-mode .m-menu__item select{
    background: #1e2746 !important;
    color: white !important;
}

html.dark-mode #list_content .m-content{
    background: #181f39;
}

html.dark-mode header .m-scrollable,
html.dark-mode header .m-list-timeline__items{
    background: #2e489f;
}
@media (min-width: 1025px){
    html.dark-mode .m-header-menu .m-menu__nav.m-menu__nav--submenu-arrow>.m-menu__item.m-menu__item--submenu.m-menu__item--hover>.m-menu__submenu>.m-menu__arrow:before,
    html.dark-mode .m-header-menu .m-menu__nav.m-menu__nav--submenu-arrow>.m-menu__item.m-menu__item--submenu>.m-menu__submenu .m-menu__submenu.m-menu__submenu--right>.m-menu__arrow:before{
        color: #181f39;
    }
    
    html.dark-mode .m-header-menu.m-header-menu--submenu-skin-light .m-menu__nav>.m-menu__item .m-menu__submenu>.m-menu__subnav{
        background: #181f39;
    }
}
html.dark-mode #logout_menu{
    background: #2e489f;
    color: white;
}
html.dark-mode #logout_menu button{
    background: #5867dd;
    color: white;
    border: 1px solid transparent;
}
html.dark-mode .user-info-sidebar{
    background: #181f39;
}
html.dark-mode .m-dropdown .m-dropdown__wrapper .m-dropdown__inner{
    box-shadow: 0px 0px 15px 1px rgba(69,15,90,5);
}

/* Notification Content */
html.dark-mode #notification_content{
    background: #2e489f;
    border-radius: 10px;
}
html.dark-mode #notification_content .tab-content,
html.dark-mode #notification_content .tab-content span,
html.dark-mode #notification_content .tab-content h4.m-section__sub,
html.dark-mode #notification_content ul li a{
    color: white !important;
}
html.dark-mode .m-list-timeline .m-list-timeline__items .m-list-timeline__item:first-child:before{
    content: none;
}

/* Left Menu */
/* html.dark-mode */

/* Responsive CSS */
@media (min-width: 1025px){
    html.dark-mode .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover,
    html.dark-mode .m-stack.m-stack--desktop.m-stack--ver>.m-stack__item{
        background: #181f39;
    }
    html.dark-mode .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover a i,
    html.dark-mode .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover a span{
        color: lightskyblue !important;
    }
    html.dark-mode #m_aside_left,
    html.dark-mode .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item.m-menu__item--open{
        /* background: #2c2f5f; */
        background: #2c2f5f;
        color: white;
    }
    html.dark-mode .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item.m-menu__item--open{
        background: #181f39;
    }
    html.dark-mode .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item.m-menu__item--open > .m-menu__toggle{
        background: rebeccapurple;
    }
    html.dark-mode #m_aside_left span,
    html.dark-mode .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item>.m-menu__link .m-menu__link-icon,
    html.dark-mode .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item>.m-menu__link .m-menu__link-icon{
        color: white;
    }
    html.dark-mode .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active>.m-menu__link .m-menu__link-icon,
    html.dark-mode .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active>.m-menu__link .m-menu__link-text,
    html.dark-mode .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover span,
    html.dark-mode .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover i{
        color: lightskyblue !important;
    }
}
/* End Responsive CSS */

html.dark-mode .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item:not(.m-menu__item--parent):not(.m-menu__item--open):not(.m-menu__item--expanded):not(.m-menu__item--active):hover,
html.dark-mode .m-aside-menu.m-aside-menu--skin-dark .m-menu__nav>.m-menu__item .m-menu__submenu .m-menu__item.m-menu__item--active{
    background: #2C2F6E;
}

html.dark-mode #m_aside_left .w3samples_table_loader{
    background: #2c2fef;
}

#m_aside_left div:has(.w3samples_table_loader){
    margin-top: 0 !important;
}

/* Dashboard Page */
html.dark-mode body:has(.m-wrapper#dashboard_page), html.dark-mode .m-wrapper#dashboard_page {
    background: #181f39 !important;
}

html.dark-mode #dashboard_page .m-widget24,
html.dark-mode #dashboard_page .m-portlet__body,
html.dark-mode #dashboard_page .m-portlet__head,
html.dark-mode #dashboard_page div.top-widgets-row .m-portlet {
    background: #1e2746 !important;
}

html.dark-mode #dashboard_page .total-widget-items:not(:last-child){
    border-right: 1px solid;
}

html.dark-mode #dashboard_page .m-subheader__title,
html.dark-mode #dashboard_page .m-widget24__title,
html.dark-mode #dashboard_page .m-portlet__body span,
html.dark-mode #dashboard_page .m-portlet__head h3{
    color: white !important;
}

html.dark-mode #dashboard_page rect.highcharts-background {
    fill: #1e2746;
}

html.dark-mode #dashboard_page text.highcharts-title,
html.dark-mode #dashboard_page .highcharts-axis-labels.highcharts-xaxis-labels text,
html.dark-mode #dashboard_page .highcharts-axis-labels.highcharts-yaxis-labels text,
html.dark-mode #dashboard_page text.highcharts-axis-title,
html.dark-mode #dashboard_page .highcharts-legend-item.highcharts-line-series.highcharts-color-undefined.highcharts-series-0 text {
    fill: white !important;
}

html.dark-mode #dashboard_page a:not([href]):not([tabindex]):hover, html.dark-mode #dashboard_page a:not([href]):not([tabindex]):focus{
    color: white;
}

/* List Content Page */
html.dark-mode #list_content,
html.dark-mode body:has(#list_content), 
html.dark-mode #list_content #inner_card_container{
    background: #181f39;
}

html.dark-mode #list_content label{
    color: white !important;
}

html.dark-mode #list_content input[type='file'],
html.dark-mode #list_content .m-portlet__head{
    background: #181f39 !important;
    color: white;
}

html.dark-mode #list_content .m-portlet__body{
    background: #2c2f5f !important;
}

html.dark-mode #list_content table tr.bg-white,
html.dark-mode #list_content table thead tr th,
html.dark-mode #list_content table thead tr td{
    background: #2c2f7f !important;
}

html.dark-mode #list_content .table-bordered th, 
html.dark-mode #list_content .table-bordered td{
    border: 0.1px solid #2E48CB;    
}

html.dark-mode #list_content li.nav-item a.nav-link{
    color: white !important;
}

html.dark-mode #list_content ul.pagination li:not(html.dark-mode #list_content ul.pagination li.active) a.page-link{
    background: #2c2f7f;
    border: none;
    color: white;
    z-index: 1;
}

html.dark-mode #list_content ul.pagination li.active a.page-link{
    border: none;
    color: white;
}

html.dark-mode #list_content .page-item.active .page-link{
    margin-left: 0;
  }
  
/* {
    background: #1e2746;
    } */
html.dark-mode pre,
html.dark-mode textarea.swal2-textarea,
html.dark-mode #list_content table,
html.dark-mode #list_content div{
    color: white;
}

html.dark-mode #list_content .table-hover tbody tr:hover{
    background: #181f39 !important;
    color: white;
}

html.dark-mode #list_content td.sticky-right:not(td.no-before),
html.dark-mode #list_content .td-actions{
    background: #1e2746 !important;
}

html.dark-mode #list_content .td-actions a{
    border: 1px solid #ccc !important;
}

html.dark-mode #list_content .w3samples_table_loader, html.dark-mode #list_content .w3samples_table_loader th{
    background: #1e2746;
}

html.dark-mode #list_content .m-portlet{
    background: #181f39;
}

html.dark-mode #list_content .m-portlet__head-tools button{
    background: #2e489f;
    border: none;
}

html.dark-mode #list_content select,
html.dark-mode #list_content table.crud-table tbody tr:hover td:last-child {
    background: #2c2f7f;
    color: white;
}

html.dark-mode #list_content table thead tr td input,
html.dark-mode #list_content table.crud-table tbody tr td:last-child,
html.dark-mode #show_content table.crud-table tbody tr td:last-child{
    background: #2e489f !important;
    color: white;
}

html.dark-mode #list_content .table-responsive table,
html.dark-mode #laporan_content .table-responsive table,
html.dark-mode #modal_content .table-responsive .w3samples_table_loader{
    /* background: #2e489f; */
    background: #220876;
}

html.dark-mode #list_content div.selected.bg-white{
    background: #2c2f7f !important;
    border-color: white;
}

html.dark-mode #non_transactional_list .table-responsive{
    /* background: #2c2f5f; */
    background: #2e489f;
}

html.dark-mode #not_transactional_list .table-bordered th, 
html.dark-mode #not_transactional_list .table-bordered td{
    border: 0.1px solid #a0a0a0;    
}

html.dark-mode #non_transactional_list .search-row div{
    background: #2e489f;
    background-clip: content-box;
}

html.dark-mode #non_transactional_list .table-wrapper{
    background: #2e489f;
}

html.dark-mode table.crud-table#list_hutang_lain thead tr th.th-action{
    border-color: #2E48CB;
}

/* Show Content */
html.dark-mode #show_content,
html.dark-mode body:has(#show_content), 
html.dark-mode #show_content #inner_card_container,
html.dark-mode #show_content .m-portlet,
html.dark-mode #show_content .m-form,
html.dark-mode #show_content .m-portlet__head,
html.dark-mode #show_content .m-portlet__head button.btn-primary,
html.dark-mode #show_content .m-portlet__head-tools:not(.m-portlet__head-tools.action-buttons) a{
    background: #181f39 !important;
}

html.dark-mode #show_content .m-portlet__head-tools:not(.m-portlet__head-tools.action-buttons) button:not(button.btn-info, button:has(h6), button:has(i)){
    background: #0a8cf0 !important;
}

html.dark-mode #show_content .input-group-append span{
    color: #181f39 !important;
}

html.dark-mode #show_content label,
html.dark-mode #show_content .nav-link,
html.dark-mode #show_content .m-tabs-line.nav.nav-tabs .nav-link:hover i::before,
html.dark-mode #show_content .m-portlet__head-tools i,
html.dark-mode #show_content .m-tabs-line.nav.nav-tabs .nav-link.active i::before{
    color: white !important;
}

html.dark-mode #show_content .m-tabs-line.nav.nav-tabs .nav-link:hover, 
html.dark-mode #show_content .m-tabs-line.nav.nav-tabs .nav-link.active, 
html.dark-mode #show_content .m-tabs-line a.m-tabs__link:hover, 
html.dark-mode #show_content .m-tabs-line a.m-tabs__link.active{
    border-bottom: 2px solid white !important;
}

html.dark-mode #show_content .w3samples_table_loader{
    background: #2e489f;
}

html.dark-mode #show_content .m-portlet__head{
    border-bottom: none;
}

html.dark-mode #show_content .m-portlet__head-tools button,
html.dark-mode #show_content .m-portlet__head-tools a{
    border: none;
}

html.dark-mode #show_content .m-portlet__head-tools.action-buttons button,
html.dark-mode #show_content .m-portlet__head-tools.action-buttons a{
    background: #2c2f7f !important;
}

html.dark-mode #show_content .m-portlet__body,
html.dark-mode #show_content form.m-form,
html.dark-mode #show_content .m-portlet__body label.floating-border-form-group-label,
html.dark-mode #show_content .m-portlet__foot{
    background: #2e489f !important;
}

html.dark-mode #show_content .m-portlet__body label,
html.dark-mode #show_content .m-portlet__body ul li a,
html.dark-mode #show_content .m-portlet__body table tr th,
html.dark-mode #show_content .m-portlet__body table tr td,
html.dark-mode #show_content .m-portlet__body span{
    color: white;
}

html.dark-mode #show_content .m-invoice__footer{
    background: #5867dd !important;
    color: white;
}

html.dark-mode #show_content .dropdown-content,
html.dark-mode #show_content thead.bg-white,
html.dark-mode #show_content thead.sticky-top.bg-white{
    background: #2e489f !important;
}

html.dark-mode #show_content .m-demo-icon:hover{
    background: #181f39;
}

html.dark-mode #show_content .m-invoice-2 .m-invoice__wrapper .m-invoice__footer .m-invoice__table table thead tr th,
html.dark-mode #show_content .m-demo-icon .m-demo-icon__preview i,
html.dark-mode #show_content .m-portlet__head-text,
html.dark-mode #show_content .m-demo-icon .m-demo-icon__class
{
    color: white;
}

html.dark-mode #show_content .m-invoice-2 .m-invoice__wrapper .m-invoice__footer .m-invoice__table table tbody tr td{
    color: lightcyan !important;
}

html.dark-mode #show_content ul.pagination li:not(html.dark-mode #show_content ul.pagination li.active) a.page-link{
    background: #2c2f7f;
    border: none;
    color: white;
    z-index: 1;
}

html.dark-mode #show_content .table-hover:not(.modal-content table.table-hover) tbody tr:hover{
    background: #181f39;
}

html.dark-mode #show_content .table-hover:not(.modal-content table.table-hover) tbody tr:hover td{
    background: #181f39 !important;
}

html.dark-mode #show_content .m-tabs-line{
    border-bottom: 1px solid #a0a0a0;
}

html.dark-mode #show_content div.bg-none{
    background: none !important;
}

html.dark-mode #show_content th.bg-white{
    background-color: rgb(88, 103, 221) !important;
    color: white !important;
}
html.dark-mode #show_content td.bg-white{
    background: #2e489f !important;
    color: white !important;
}

html.dark-mode #show_content th.bg-white i{
    color: white !important;
}

html.dark-mode #show_content tr.bg-white{
    background: #2e489f !important;
}

html.dark-mode .m-form__actions--solid{
    background: #2e489f;
}

/* Laporan Content */
html.dark-mode #laporan_content,
html.dark-mode #laporan_content #inner_card_container,
html.dark-mode #laporan_content .m-portlet__head{
    background: #181f39 !important;
}

html.dark-mode #laporan_content .m-portlet__head .dropdown{
    background: none;
}

html.dark-mode #laporan_content .m-portlet__head{
    border-bottom: none;
}

html.dark-mode #laporan_content .m-portlet__body{
    background: #2e489f;
    color: white;
}

/* html.dark-mode #laporan_content .m-form{
    background: #2c2f5f;
} */

html.dark-mode #laporan_content .m-form div.form-wrapper{
    background: #2c2f5f;
}

html.dark-mode #laporan_content .m-portlet__body label{
    color: white;
}

html.dark-mode #laporan_content .w3samples_table_loader, html.dark-mode #laporan_content .w3samples_table_loader th{
    background: #1e2746;
}

html.dark-mode #laporan_content .table-hover tbody tr:hover{
    background: #181f39;
}

html.dark-mode #laporan_content tr.sticky-bottom.bg-white,
html.dark-mode #laporan_content tfoot.bg-light,
html.dark-mode #laporan_content tr.bg-white,
html.dark-mode #laporan_content tr.bg-light,
html.dark-mode #laporan_content th.bg-white{
    background-color: rgb(88, 103, 221) !important;
    color: white !important;
}

html.dark-mode #laporan_content table tr:last-child th{
    background: #2e489f;
}

html.dark-mode #laporan_content .m-portlet__head-tools:not(.m-portlet__head-tools.action-buttons) button{
    background: none !important;
}

/* Modal Content */
html.dark-mode #modal_content div, html.dark-mode #modal_content div.search-list a{
    color: white;
}

html.dark-mode div.search-list-item:focus-within,
html.dark-mode div.search-list-item:hover{
    background: #181f39;
}

html.dark-mode #modal_content .modal-header,
html.dark-mode #modal_content .modal-header button{
    color: white;
}

html.dark-mode #modal_content .modal-header{
    border-bottom: 0;
}

html.dark-mode #modal_content,
html.dark-mode #modal_content .modal-body{
    background: #2e489f;
    border: none;
    z-index: 10000;
}
html.dark-mode #modal_content .modal-body table tr th,
html.dark-mode #modal_content .modal-body table tr td{
    background: transparent;
    color: white;
}
html.dark-mode #modal_content table.table-hover tbody tr:hover{
    background: #181f39;
}

html.dark-mode #modal_content .modal-header .btn-outline-info:hover,
html.dark-mode #modal_content .modal-header .btn-outline-info:not(:disabled):not(.disabled):active,
html.dark-mode #modal_content .modal-header .btn-outline-info:focus{
    background: none;
    border: none;
    box-shadow: none;
}

html.dark-mode #modal_content .btn-pills{
    box-shadow: none !important;
}

html.dark-mode #modal_content .btn-pills:hover{
    box-shadow: none !important;
    background: deepskyblue;
    border: 1px solid transparent;
}

/* Swal */
html.dark-mode .swal2-popup{
    background: #2e489f;
}
html.dark-mode .swal2-popup .swal2-title,
html.dark-mode label.swal2-input-label,
html.dark-mode input.swal2-input,
html.dark-mode .swal2-html-container{
    color: white;
}

/* Etc */

html.dark-mode div.not-on-dark-mode{
    display: none;
}
html.dark-mode .border-dark-0{
    border: none;
}
html.dark-mode .border-dark-top-0{
    border-top: none;
}
html.dark-mode .border-dark-left-0{
    border-left: none;
}
html.dark-mode .border-dark-bottom-0{
    border-bottom: none;
}
html.dark-mode .border-dark-right-0{
    border-right: none;
}
html.dark-mode #show_content .m-portlet__foot--fit{
    border: none !important;
}
html.dark-mode #show_content .bg-transparent{
    background: transparent !important;
}
html.dark-mode img.icon-img{
    filter: invert(1);
}
html.dark-mode #show_content input,
html.dark-mode #show_content select{
    border: none;
}
html.dark-mode #show_content input:disabled,
html.dark-mode #show_content select:disabled,
html.dark-mode #show_content textarea:disabled{
    background-color: #e0e0e0;
    color: grey;
}
html.dark-mode #show_content .m-portlet__body label:has(input:disabled){
    color: #e0e0e0 !important;
}
/* Focus Shortkey Active */
html.dark-mode .active:not(tr.active){
    background: inherit;
}
html.dark-mode tr.active {
    /* background-color: rgb(1, 59, 77); */
    background: #181f39;
    color: #f4f5f8;
}
html.dark-mode #show_content .form-floating > .form-control:not(.form-control:focus, .form-control:not(:placeholder-shown)) ~ label{
    color: #575962 !important;
}

html.dark-mode b{
    color: white;
}

html.dark-mode .text-pink{
    color: rgb(255, 155, 168);
}

/* Multiselect */
html.dark-mode .multiselect{
    border: none;
    border-radius: 0;
    background: none;
}
html.dark-mode .multiselect-wrapper{
    background: #2e489f !important;
    border-radius: 0;
    border: 1px solid white;
}
html.dark-mode .multiselect-options{
    background: #2e489f !important;
}
html.dark-mode .multi-select .multi-select-header .multi-select-header-placeholder{
    color: white;
}
html.dark-mode .multi-select .multi-select-options{
    background: #2E48CB;
}
html.dark-mode .multi-select .multi-select-options .multi-select-all:hover,
html.dark-mode .multi-select .multi-select-options .multi-select-option:hover{
    background-color: #181f39;
}
html.dark-mode .multi-select .multi-select-options .multi-select-option.multi-select-selected .multi-select-option-radio{
    border-color: #2E48CB;
}
html.dark-mode .multi-select .multi-select-options .multi-select-option.multi-select-selected .multi-select-option-text{
    color: white;
}
/* Modal Search Menu */
html.dark-mode .search-list-item a.active{
    background: #181f39;
}
/* Tabs Component */
html.dark-mode .tabs-component-tab-a, html.dark-mode .tabs-component-panels{
    background: #2e489f !important;
}
html.dark-mode .tabs-component-tab, html.dark-mode .tabs-component-tab--custom{
    border-bottom: none !important;
}
html.dark-mode .tabs-component-tab-a.is-active{
    background: #2c2c2c !important;
}