:root{
        --darkmode-light-color: #333947;
        --darkmode-color: #2f3542;
        --darkmode-medium-color: #2b313d;
        --darkmode-dark-color: #2b313d;
        --darkmode-darkest-color:#282d38;
        --darkmode-font-color: #9da7af;
        --darkmode-light-font-color: rgb(183, 191, 197);
        --bg-white:#333947;
        --bg-off-white:#333947;
    }
    
    


    html #os-nav > ul > li{
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    }

    
    html .widget-form fieldset, 
    html fieldset{
        background: rgba(255, 255, 255, 0.05);
    }

    html .ui-slider,
    html .control-panel fieldset,
    .medium-toolbar-container .toolbar-search-box{
        background: rgba(255, 255, 255, 0.05);
    }

    html #side-widget-actions,
    html .button-container{
        background: rgba(0, 0, 0, 0.1);
    }
    
    html .cloud-file-feature{
        background-color:var(--darkmode-light-color)!important;
    }

    html .gradient-button{
        background: var(--darkmode-light-color);
        color: #9da7af!important;
        border-color: rgba(0, 0, 0, 0.3);
    }


    .frost-icon-menu .seperator,
    .icon-menu li a,
    html #os-nav > ul > li > a,
    html .fieldset > .fa{
        color: #9da7af;
    }

    html #os-nav > ul > li > a:hover{
        color: #fff;
    }


    .frost-icon-menu a.selected{
        background:linear-gradient(90deg,rgba(248,249,253,0.05),rgba(248,249,253,0));
    }

    html .medium-toolbar-container,
    html .bg-light-grey-gradient{
        background: var(--darkmode-darkest-color);
    }

    html .bg-grey{
        background: var(--darkmode-darklightest-color)!important;
    }

    #widget .slide-info-container, #side-widget .slide-info-container{
        background: var(--darkmode-darkest-color)!important;
    }
    
    
    html .widget-form.stand-alone .button-container{
        background: var(--darkmode-color);
    }


    html .slide-side-bar fieldset, 
    html .control-panel fieldset{
        border-color: rgba(0, 0, 0, 0.5);
    }



    

    /*======================================================
    // BACKGROUNDS
    /=====================================================*/

    #side-widget-container .widget-slide::-webkit-scrollbar-track ,
    .overflow::-webkit-scrollbar-track,
    .widget-form .fieldset-table::-webkit-scrollbar-track {
        background: var(--darkmode-light-color)!important;
    }
		



		
    /* THUMB */
    #side-widget-container .widget-slide::-webkit-scrollbar-thumb,
    .overflow::-webkit-scrollbar-thumb,
    .widget-form .fieldset-table::-webkit-scrollbar-thumb,
    #side-widget-container .widget-slide::-webkit-scrollbar-thumb,
    .overflow::-webkit-scrollbar-thumb,
    .widget-form .fieldset-table::-webkit-scrollbar-thumb{
        background: rgba(255, 255, 255, .4)!important
    }
    
    html .app-tile,
    html #walkthrough-content,
    
    html .tool-tip-inner{
        background: var(--darkmode-light-color)!important;
    }

    html .table td{
        background: none;
    }
    
    /* Backgrounds */
    html #splash-screen,
    html body,
    html .bg-white,
    html .ui-left-menu,
    html #managable-account-list,
    html #story-builder,
    html #story-view,
    html #side-widget,
    html #app section,
    
    html #presentation-container{
        background:var(--darkmode-color);
        color: var(--darkmode-font-color);
    }

    html .bg-light-grey{
        background:var(--darkmode-medium-color);
    }
    html .bg-dark,
    html body{
        background: var(--darkmode-darkest-color);
    }
    
    
    html .panel,
    html .editor-panel{
        background:var(--darkmode-darkest-color);
    }

    html #app-body .bg-grey{
        background:var(--darkmode-darkest-color)!important;
    }


    html .cli-terminal{
        background:rgba(0,0,0,0.3);
        color: var(--darkmode-font-color);
    }

    html .bg-off-white{
        background: var(--darkmode-light-color)!important;
    }

    html .bg-off-white.round-font-icon i{
        color: #fff;
    }


    html #resolve-chat .tab-navigation{
        background:var(--darkmode-light-color)!important;
    }

    html .post-comment,
    html .channel-timeline-comment{
        background:var(--darkmode-light-color);
    }

    html #campaign-review-top,
    html #editor-dashboard,
    html #editor-timeline{
        background:var(--darkmode-dark-color)!important;
    }

    html .tile-feed-item,
    html .timeline-point-object .content{
        background:var(--darkmode-color)!important;
    }

    html #editor-left,
    html .menu-control .sub-menu,
    html #resolve-tasks,
    html #resolution-main{
        background:var(--darkmode-color)!important;
    }

    .placeholder-thumb,
    .icon-placeholder{
        background-image: url(images/light-blank-image.svg);
    }

    html .grey-heading,
    html .activity-progress,
    html .activity-state-icon,
    html .icon-menu .seperator{
        background:var(--darkmode-dark-color);
        color: var(--darkmode-font-color);
    }

    html .widget-form.stand-alone,
    html .pathway-segments .app-tile,
    html .activity-placeholder-progress,
    html .app-tile .item-details{
        background: var(--darkmode-light-color);
    }

   
    html sub-nav,
    html user-tools,
    html #os-nav,
    html #os-nav > ul > li > a,
    html .stand-alone,
    html .item-author,
    html slide.minimum{
        background:var(--darkmode-color);
    }

    html #os-nav > ul > li > a,
    #os-nav .sub-menu li a{
        background:var(--darkmode-color);
        color: var(--darkmode-font-color);
    }

    .icon-menu li a:hover{
        background: rgba(255, 255, 255,0.2);
        color: #fff;
    }

    
    html .bg-grey-gradient{
        background: var(--darkmode-dark-color);
    }

    html .row-table th{
        background: rgb(0 0 0 / 10%);
    }

    html .dialog-content,
    html .white-widget-slide{
        background:var(--darkmode-color)!important;
    }

    html .menu-selector-container,
    html notice-message,
    html .notification-inner,
    html .snackbar-dialog{
        background: var(--darkmode-light-color);
    }

    .fieldset-table{
        background: rgba(255, 255, 255, 0.05);
    }

    html .button.disabled, html .button.disabled:hover{
        background: rgba(255, 255, 255, 0.05);
        border-color: rgba(0, 0, 0, 0.2)!important;
    }

    
    #analytics-filter,
    .map-tab{
        background: var(--darkmode-light-color)!important;
    }

    html .widget-form .fieldset-table fieldset{
        background: none;
    }

    html .onoff-switch{
        background: rgba(255, 255, 255, .1)!important;
        border-color: rgba(0, 0, 0, 0.2);
    }

    .fixed-overlay,
    .overlay{
        background: rgba(0, 0, 0, 0.5);
    }

    .lined-table th, .lined-table td{
        background: none;
    }

    .ui-slider-handle{background: var(--darkmode-light-color)!important;}
    .tabbed-list nav a.show{
        background: var(--darkmode-font-color)!important;
        
    }

    html #side-widget-container,
    html #widget-container{
        background: var(--darkmode-color)!important;
    }

    /*======================================================
    // FONTS
    /=====================================================*/

    .screen-message-h1,
    html .inputs:focus ~ .placeholder-label, 
    html .inputs:valid ~ .placeholder-label,
    html .row-table th,
    html label,
    html .fa-td,
    html .stat-label,
    html sub-nav ul li a,
    html .tab-navigation li a,
    html .row-header td,
    html .cloud-file-feature-placeholder,
    html .stat-label h1,
    html .inputs:focus ~ .placeholder-label, 
    html .inputs:valid ~ .placeholder-label, 
    html .inputs:read-only ~ .placeholder-label,
    html .toolbar-center,
    html .big-stat.color-black,
    html .activity-placeholder-icon i,
    td a{
        color: var(--darkmode-light-font-color)!important;
    }

    
    html notice-message p,
    html .big-stat,
    html a{
        color: var(--darkmode-light-font-color);
    }

    html .review span{
        color: var(--darkmode-font-color)!important;
    }

    .icon-option-menu li i,
    .flat-button,
    
    html .dialog-content,
    html .inputs,
    html .cell-input,
    html .tool-menu ul li a,
    html .channel-comment-options li a,
    html .post-comment-actions li i,
    html .label-hint,
    user-tools li .taskbar-icon.fa{
        color: var(--darkmode-font-color);
    }


    html .channel-comment-header{
        color: var(--darkmode-light-font-color)!important;
    }

    
    html .comment-time,
    html .highcharts-axis-labels span, 
    html .highcharts-xaxis-labels span{
        color: var(--darkmode-font-color)!important;
    }


    html .gradient-button:hover{
        color: #fff!important;
    }
    #os-nav > ul > li > a.active, #os-nav > ul > li > a:hover{
        color: #fff;
    }

    .tabbed-list nav a{
        color: var(--darkmode-font-color);
    }

    /*======================================================
    // SHADOWS
    /=====================================================*/

    .ui-left-menu{
        box-shadow: rgb(0 0 0 / 60%) 0px 3px 3px;
    }

    #managable-account-list{
        box-shadow: 0 0 3px rgb(0 0 0 / 40%);
    }

    .app-tile{
        box-shadow:  2.5px 25px rgb(0 0 0 / 15%)
    }

    /*======================================================
    // BORDERS
    /=====================================================*/

    html .stat-card-item,
    html .border{
        border-color: rgba(0, 0, 0, 0.2);
    }

    html .activity-placeholder-progress,
    html .activity-placeholder{
        border-color: rgba(255, 255, 255, .1);
    }

    html .pathway-nudge-action-icon{
        border-color: rgba(255, 255, 255, .1)!important;
    }

    html .build-detail-item,
    html .app-option-switch,
    .row-table th, .row-table td,
    html .toolbar-border,
    html .medium-toolbar-container,
    .control-panel{
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    }


    html sub-nav{
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    }

    html .fieldset-table,
    html .listing-grid .item,
    html .tab-navigation,
    html .list-icon-grid,
    html .stat-inner{
        border-color: rgba(0, 0, 0, 0.2);
    }

    
    html .white-stat-blocks{
        border-color: rgba(0, 0, 0, 0.2)!important;
    }

    html .widget-form fieldset, html fieldset{
        border-color: rgba(0, 0, 0, 0.2);
    }

    .lined-table th, .lined-table td{
        border-color: rgba(0, 0, 0, 0.2);
    }

   
    
    html .button-container{
        border-top: 1px solid rgba(0, 0, 0, 0.2);
    }

    .tabbed-list nav a{
        border-color: var(--darkmode-font-color);
    }



    .frost-icon-menu a.selected{
        background: linear-gradient(90deg,rgba(0,0,0,0.1),rgba(0,0,0,0))!important;
    }