/*
   _____ _       _           _    _____      _               _____ _         _           
  / ____| |     | |         | |  / ____|    | |             / ____| |       | |          
 | |  __| | ___ | |__   __ _| | | |     ___ | | ___  _ __  | (___ | |_ _   _| | ___  ___ 
 | | |_ | |/ _ \| '_ \ / _` | | | |    / _ \| |/ _ \| '__|  \___ \| __| | | | |/ _ \/ __|
 | |__| | | (_) | |_) | (_| | | | |___| (_) | | (_) | |     ____) | |_| |_| | |  __/\__ \
  \_____|_|\___/|_.__/ \__,_|_|  \_____\___/|_|\___/|_|    |_____/ \__|\__, |_|\___||___/
                                                                        __/ |            
                                                                       |___/                                                                                                                                     
Author: Online Helden
Version: 0.1
Creation Date: 29-4-2024
Date Modified: 29-4-2024
*/






:root{
    /*
    --ui-body-background-color:rgba(28, 30, 36, 0.95);
    --ui-element-background-color:#303138;
    --ui-main-text-color:white;
    --ui-secondary-text-color:#919191;
    --ui-switching-brand-color:#88FCAD;
    --ui-element-shadow: none;
    --transition-duration:2s;
    */
    
    
    --ui-body-background-color:rgba(28, 30, 36, 0.95);
    --ui-element-background-color:#292730;
    --ui-main-text-color:white;
    --ui-secondary-text-color:#919191;
    --ui-switching-brand-color:#88FCAD;
    --ui-element-shadow: none;
    --transition-duration:2s;
    
    
    
}


#screen-container {

    background-color:
    var(--ui-body-background-color) !important;  
    transition:background-color var(--transition-duration);
         
}


#screen-container::after {

    background-color:
    var(--ui-body-background-color) !important;  
    transition:background-color var(--transition-duration);
         
}




.chart *{
    /*
    
    background-color: var(--ui-element-background-color) !important;
    */

    transition:background-color var(--transition-duration) !important;
    
    
    
}




.apexcharts-grid rect{
 
    fill:var(--ui-element-background-color) !important;
    transition:fill var(--transition-duration) !important;

}


.ui-element-container{
    
    
    background-color:var(--ui-element-background-color) !important;
    transition: background-color var(--transition-duration) !important;
    box-shadow:var(--ui-element-shadow) !important;
    transition:box-shadow var(--transition-duration);
    
    
    
}






text{
    
    fill:var(--ui-main-text-color) !important;
    transition:fill var(--transition-duration) !important;
}


text * {
    
    
    fill:var(--ui-main-text-color) !important;
    transition:fill var(--transition-duration) !important;
}




h2{
    
    color:var(--ui-main-text-color) !important;
    transition:color var(--transition-duration) !important;;
    
}





.apexcharts-menu-icon > svg > path:nth-child(2){
    
    /*fill:var(--ui-main-text-color);*/
}












/*FILTER COLOR LOGIC*/

.daterangepicker{
    
    background-color:var(--ui-element-background-color);
    box-shadow: 4px 4px 8px rgba(0,0,0,0.9);
}

.calendar-table{
    
    border-width:0px !important;
}

.daterangepicker *{
    
    color: var(--ui-main-text-color);
    background-color:var(--ui-element-background-color);
    
}

.daterangepicker .left{
    
    max-width:300px !important;
}

.daterangepicker .right{
    
    max-width:300px !important;
    padding:0px;
}


.daterangepicker .in-range{
    
    background-color:var(--ui-switching-brand-color) !important;
}

.daterangepicker .off{
    
    background-color:var(--ui-element-background-color) !important;
}


.daterangepicker li {
    
    background-color:var(--ui-element-background-color);
    
    font-family:jost, 'sans-serif';
}


.daterangepicker li:hover {
    
    background-color:var(--ui-body-background-color) !important;
    color:var(--ui-main-text-color);

}

.daterangepicker td:hover {
    
    
    background-color:var(--ui-switching-brand-color) !important;
    
    
}

.daterangepicker .active {
    
    background-color:var(--ui-switching-brand-color) !important;
    color: #111 !important;
    
    
}