:root {
    --primary-background: #3a3a3b;
    --primary-color: #fff;
    --primary-pallete-background: #428bca;
    --primary-pallete-color: #428bca;
    --secondary-background: #202124;
    --secondary-color: #efefef;
    --secondary-pallete-background: #428bca;
    --secondary-pallete-color: #3c8dbc;
    --secondary-pallete-border-color: #ffffff;
    --gradient-background: linear-gradient(to bottom,rgb(75 75 76) 0,rgb(48 48 51) 100%);
    --hover-background: #777777;
    --input-required-background: #7a6f0e;
    --input-disabled-background: #535353;
    --linear-gradiant-first-background: #5f5f5f;
    --linear-gradiant-second-background: #202124;
    --table-border: 1px solid rgba(255,255,255,.1);
    --box-shadow: 0 1px 3px rgb(255 255 255 / 24%), 0 1px 2px rgb(255 255 255 / 48%);
    --box-shadow-login: 0 1px 3px rgb(255 255 255 / 24%), 0 1px 2px rgb(255 255 255 / 48%);
    --filter: invert(1);
    --font-xs: 10px;
    --font-sm: 11px;
    --font-m: 12px;
    --font-l: 14px;
    --font-xl: 20px;
    --font-family: 'latoregular'
}

html{
    background: var(--primary-background);
}

html body{
    background: var(--primary-background);
    font-size: var(--font-sm);
    font-family: var(--font-family) !important;
}

footer.footer{
    color: var(--primary-color);
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
    font-family: var(--font-family) !important;
}

button, html, input, select, textarea{
    font-family: var(--font-family) !important;
}

html body .gridster{
    font-family: var(--font-family) !important;
}

html body .details-container{
    font-size: var(--font-sm);
}

html body .selectedPage{
    font-size: var(--font-l);
}

html .ag-fresh{
    color: var(--primary-color);
    font-family: var(--font-family) !important;
}

html body .login-box, 
html body .register-box, 
html body .setup-box{
    box-shadow: var(--box-shadow-login);    
    background: var(--primary-background);
}

html body .login-box-body, 
html body .register-box-body, 
html body .setup-box-body{
    background: var(--primary-background);
}

input:-internal-autofill-selected {
    background-color: transparent !important;
}

html body .dropdown-menu.label1{
    background-color: var(--secondary-background);
}

html body .tab-box{
    background: transparent;
}

html body #button-yes{
    background: transparent;
    color: var(--primary-color);
}

html body #button-no{
    background: transparent;
    color: var(--primary-color);
}

html body ::-webkit-scrollbar-track{
    background: var(--gradient-background);
}

html body .my-contextmenu{
    background: var(--secondary-background);
}

html body .my-contextmenu a{
    color: var(--primary-color);
}

html body .my-contextmenu a:hover{
    background: var(--primary-background);
    color: var(--primary-color);
}

/* html body .report-folders{
    background: var(--primary-background);
    box-shadow: var(--box-shadow);
    color: var(--primary-color);
} */

html body .lookup-context{
    background: var(--primary-background);
    color: var(--primary-color);
}

html body .lookup-context h3.notvisible{
    background: var(--secondary-background);
}

html body .lookup-context h3:hover{
    background: var(--secondary-background);
}

html body .custom-filter.gridBox input{
    background: transparent;
    border: 1px solid var(--primary-color);
}

html body .dropcontainer{
    background: var(--secondary-background);
}

html body .modal-coorg .filter-block{
    background: var(--primary-background);
}

html body .modal-coorg .modal-footer .btn{
    background: transparent;
}

html body .modal-confirm button {
    color: var(--primary-color);
}

html body .accordion-dropdown{
    color: var(--primary-color);
}

html body .modal-coorg .utility-block input{
    border: 1px solid var(--secondary-pallete-border-color);
}

html body .tree-node{
    background: var(--secondary-background);
    color: var(--primary-color);
}

html body .sett-label{
    color: var(--primary-color);
}

html body .content-wrapper{
    color: var(--primary-color);
    background: var(--primary-background);
}

html body .content-wrapper input{
    background-color: var(--primary-background);    
    border: 1px solid var(--primary-color);
}

html body .content-wrapper select{
    background-color: var(--primary-background);    
    border: 1px solid var(--primary-color);
}

html body .content-header{
    color: var(--primary-color);
}

html body .content-header>h1>small{
    color: var(--primary-color);
}

html body .content-header>.breadcrumb>li>a{
    color: var(--primary-color);
}

html body .breadcrumb>.active{
    color: var(--primary-color);
}

html body .table>thead>tr>th{
    color: var(--primary-color);
    background-color: var(--primary-background);
}

html body .nvd3 text{
    fill: var(--primary-color);
}

html body .table-striped>tbody>tr:nth-of-type(odd){
    color: var(--primary-color);
    background-color: var(--primary-background);
}

html body .dropdown-menu{
    background-color: var(--secondary-background);
}

html body .header-container{
    background: var(--primary-background);
}

html body .header-container .breadcrumb li a{
    color: var(--primary-color);
}

html body .dropdown-menu>li>a{
    color: var(--primary-color);
}

html body .dropdown-menu>li>a:hover{
    background: var(--hover-background);
    color: var(--secondary-color);
}

html body .dropdown .openTab+.label1:hover>li:first-child>a{
    color: var(--secondary-pallete-color);
}

html body .dropdown .openTab+.label1 li a{
    color: var(--secondary-pallete-color);
}

html body .dropdown .openTab+.label1 .dropdown-menu{
    background-color: var(--secondary-background);
}

html body #loaderDivPage{
    background-color: var(--secondary-background);
}

html body #loaderDivPage.load-main .spinner{
    background-color: var(--secondary-background);
}

html body .setting-container{
    background-color: var(--secondary-background);
    color: var(--primary-color);
}

html body .item-content table{
    color: var(--primary-color);
}

html body .item-content table th{
    background-color: var(--secondary-background);
    color: var(--primary-color);
    border-bottom: var(--table-border);
}

html body .grid-list-container ul li button{
    background: var(--secondary-background);
}

html body .box{
    box-shadow: var(--box-shadow);
    background-color: var(--secondary-background);
}

html body .box-header{
    background: var(--secondary-pallete-background);
}

html body .box-header h3{
    font-size: var(--font-m);
}

html body .box-scroll .box-content{
    background: var(--secondary-background);
}

html body .box-scroll .box-content, 
html body .box-float-left .box-content,
html body .box-float-right .box-content,
html body .box-scroll .box-content .gridster-content, 
html body .box-scroll .box-content .gridster-content [ng-if="component.type == 'table'"], 
html body .box-scroll .box-content .gridster-content [ng-if="component.type == 'table'"]>.ag-fresh, 
html body .box-scroll [update-widget-fn]>div, 
html body .box-scroll>div
{
    color: var(--primary-color);
}

html body div.box-float-left,
html body div.box-float-right {
    background-color: var(--secondary-background);
}

html body .ag-blue div.ag-header, 
html body .ag-bootstrap div.ag-header, 
html body .ag-dark div.ag-header, 
html body .ag-fresh div.ag-header, 
html body .ag-material div.ag-header{
    font-size: var(--font-xs);
}

html body .ag-blue div.ag-body, 
html body .ag-bootstrap div.ag-body, 
html body .ag-dark div.ag-body, 
html body .ag-fresh div.ag-body, 
html body .ag-material div.ag-body{
    background-color: var(--secondary-background);
    font-size: var(--font-xs);
}

html body .ag-fresh .ag-cell-select, 
html body .ag-fresh .ag-cell-select.ag-row-even, 
html body .ag-fresh .ag-cell-select.ag-row-odd, 
html body .ag-fresh .ag-row-select.ag-row-selected, 
html body .ag-scrolls .ag-cell-select.ag-row-even, 
html body .ag-scrolls .ag-cell-select.ag-row-odd {
    background-color: var(--hover-background) !important;
}

html body .ag-fresh .ag-overlay-loading-wrapper{
    background-color: var(--secondary-background);
}

html body .ag-fresh .ag-row-selected>.ag-cell:first-child{
    background-color: var(--secondary-background);
}

html body .ag-fresh .ag-row-selected.ag-row-even, 
html body .ag-fresh .ag-row-selected.ag-row-odd{
    background: var(--secondary-background);
}

html body .ag-fresh .ag-row-even,
html body .ag-fresh .ag-row-odd{
    background-color: var(--secondary-background);
}

html body .ag-fresh .ag-overlay-no-rows-center{
    background-color: var(--secondary-background);
}

html body .ag-fresh .ag-header{
    background: linear-gradient(var(--linear-gradiant-first-background), var(--linear-gradiant-second-background));
    color: var(--primary-color);
    /* border-bottom: 1px solid var(--primary-color); */
}

html body .gridster-content table{
    color: var(--primary-color);
}

html body .gridster-content table tbody td,
html body .gridster-content table th{
    border-right: var(--table-border);
}

html body table.item-key-value tr:first-child{
    border-top: var(--table-border);
    border-bottom: var(--table-border);
}

html body table.item-key-value tr{
    border-bottom: var(--table-border);
}

html body .item-key-value .xcd-input-block input{
    background-color: var(--secondary-background);
}

html body .xcd-input-block select:required{
    background-color: var(--input-required-background);
}

html body .xcd-input-block-01 select:required{
    background-color: var(--input-required-background);
}

html body textarea#memo-Description{
    background-color: var(--input-required-background);
}

html body input#memo-Cost:required, 
html body input#memo-Discount:required, 
html body input#memo-GrossAmount:required,
html body input#memo-ExchangeRate:required,
html body input#memo-Freight:required {
    background-color: var(--input-required-background);
}

html body .xcd-input-block input:disabled {
    background-color: var(--input-disabled-background);
}

html body input#memo-DocNo,
html body input#memo-Currency,
html body input#memo-CustName,
html body input#memo-Ship2Name,
html body input#memo-TotalTax,
html body input#memo-Total,
html body input#memo-DiscAmount,
html body input#memo-CostAmt
{
    background-color: var(--input-disabled-background);
}

html body .lookup-button{
    background: var(--input-disabled-background);    
    border-left: var(--table-border);
}
html body .ag-select{
    background-color: var(--secondary-background);
    border: 1px solid var(--secondary-pallete-border-color);
    color: var(--primary-color);
 }
html body .xcd-input-block input{
    background: var(--secondary-background);
    font-size: var(--font-xs);
}

html body .xcd-input-block select{
    background: var(--secondary-background);
    font-size: var(--font-xs);
}

html body .xcd-input-block input:required{
    background-color: var(--input-required-background);
}

html body .xcd-input-block input:read-only{
    background-color: var(--input-disabled-background);
}

html body .xcd-input-block select:disabled{
    background-color: var(--input-disabled-background);
}

html body .xcd-input-block label{
    color: var(--primary-color) !important;
}

html body .xcd-input-block input::-webkit-calendar-picker-indicator {
    filter: var(--filter);
}

html body select#memo-OutsideSalespersonId{
    background: var(--secondary-background);
}

html body .filter-box{
    background: var(--secondary-background);
}

html body .center .pagination-section{
    background: var(--secondary-background);
}

html body .pagination>li>a, 
html body .pagination>li>span{
    background-color: var(--secondary-background);
    color: var(--primary-color);    
    border-color: var(--primary-color);
}

html body .pagination>li.active>a, 
html body .pagination>li.active>span{
    background-color: var(--primary-pallete-background);   
    border-color: var(--primary-pallete-background);
}

html body .pagination>.disabled>a, 
html body .pagination>.disabled>a:focus, 
html body .pagination>.disabled>a:hover, 
html body .pagination>.disabled>span, 
html body .pagination>.disabled>span:focus, 
html body .pagination>.disabled>span:hover{
    background: var(--secondary-background);
    color: var(--primary-color);
    border-color: var(--secondary-pallete-border-color);
}

html body .pagination-select{
    background-color: var(--secondary-background);
    border: 1px solid var(--secondary-pallete-border-color);
    color: var(--primary-color);
    outline: 0;
}

html body .modal-coorg{
    background: var(--secondary-background);
    color: var(--primary-color);
}

html body .advance-lookup .filter-block{
    background: var(--secondary-background);
}