:root {
    --primary-color: #4b84ff;
    
    --black-color: #000;
    --white-color: #fff;
    --green-color: #1cad6e;
    --red-color: #fc4850;   
    --yellow-color:  #ffe633;   
}

input,
textarea,
button,
select,
a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}


body{
    background-color: #f5f6fa;
}

hr{
    border:1px solid #f7f7f7;
}

.red{
    color: var(--red-color) !important;
}

.green{
    color: var(--green-color) !important;
}

.blue{
    color: var(--primary-color) !important;
}

.topMenu{
    background-color: var(--white-color);
    color:#1c1c1c;
    border-bottom: 1px solid #eee;    
}

.topMenu .left{
    border-right: 1px solid #eee;
}

.topMenu .right .notifications{
    color:#888;
}

.mySidenav{
    background-color: var(--white-color);
    color:var(--black-color);
    border-right: 1px solid #eee;    
}

.mySidenav a{
    color:#d6d9e2;
}

.mySidenav .option i{
    color:#acafb8;    
}

.mySidenav .option:hover{
    color:var(--primary-color);  
    border-right: 3px solid var(--primary-color);
}

.mySidenav .option:hover i{
    color:var(--primary-color);  
}

.mySidenav .active{
    color:var(--primary-color);
    border-right: 3px solid var(--primary-color);
}

.mySidenav .active i{
    color:var(--primary-color) !important;
}

.forms{
    background-color: rgba(255,255,255,0.9);
    border:1px solid #eee;    
    color:#2b2b2b;
}

.forms a{
    color:var(--black-color);
}

.forms .title{
    color:var(--black-color);    
}

.forms .miniTitle{
    color:#888;    
}

.forms .formTitle{
    color:#888;    
}

.forms .createAcc a{
    color:var(--black-color);
}

.forms input[type=text],.forms input[type=password],.forms input[type=email],.forms input[type=number],.forms select,.forms textarea,.forms input[type=datetime-local],.forms input[type=date]{
    background-color: #eee;
    color:#2b2b2b;
}

.forms input[type=submit]{
    background: var(--primary-color);
    color: var(--white-color);        
}

.forms .logout{
    background-color: var(--red-color);
    color:var(--white-color);    
}

.forms input:disabled{
    background-color: #aaa !important;    
}

.forms .buttonPos .delete{
    background-color: #dd2635;
    color:var(--white-color);
}

.buttonPos .btnGreen{
    background-color: var(--green-color) !important;
}

.otc input[type="number"] {
    background: #eeeeee;
    border: 2px solid #eeeeee;
    color: #2b2b2b;    
}

.forms .box{
    border:2px solid #eee;
    color:#1c1c1c;
    /*background-color:#eeeeee;*/
}

.forms .loginWith .btn{  
    color:#888;
    border:1px solid #eee;        
}

.forms .loginWith .active{
    color:var(--black-color);
}

.forms .notice,.forms .taskNotice{
    color:#888;
}

.forms .termsAndConditions,.forms .termsAndConditions a{
    color:#888;
}

.forms .termsBox a{
    color:#888;
}

.forms .termsBox a:hover{
    color: var(--primary-color);
}

.forms select:disabled{
    background-color: #aaa;
}

.mainTable .bi-x-lg{
    color: var(--red-color);
}

.mainTable .bi-check-lg{
    color:var(--green-color);
}

.box{    
    background-color: #fff;
    color:#000;
    border:1px solid #eee;   
}

.mainTable{
    border: 1px solid #eee;
}

.mainTable .yellow{
    color:#feb236;
}

.mainTable .companyBtn{    
    background-color: #515adf;
    color: #fff !important;
}

.mainTable a{
    color:#000;
}

.mainTable tr{
    background-color: #fff;
    color: #000;
    border-bottom: 1px solid #eee;
}

.mainTable tr:nth-child(odd) {
    background-color: #f7f7f7;       
    color:#000;
}

.mainTable tr:hover{
    background-color: #eee;      
}

.mainTable th{
    border-right: 1px solid #f7f7f7;
}

.mainTable td{
    border-right: 1px solid #eee;
}

.mainTable .head{
    background-color: #F0F0F0 !important;
    color: #858796 !important;
}

.mainTable .bi-pencil-fill{
    color:#515adf;    
}

.modal {
    background: rgba(0,0,0,0.3);
}

.modal__edit{
    color:#cccccc;    
}

.modal__edit:hover{
    color:#aaa;
}

.modal__inner {
    background: var(--white-color);    
}

.modal__close:after,
.modal__close:before {
    background: #ccc;
}

.modal__close:hover:after,
.modal__close:hover:before {
  background: #aaa;
}

.myButton{
    background-color: var(--primary-color);
    color:#fff;    
}

.banner{
    background-color:#fff;
    border:1px solid #eee;
    color:#000;
}

.banner .icon{
    color: var(--primary-color);;
}

.banner .title{
    color: #888;
}

.banner .fa-city{
    color: #343A40;
}

.banner .fa-layer-group{
    color: #6B8E23;
}

.banner .fa-microchip{
    color: #6C757D;
}

.banner .fa-seedling{
    color: #1cad6e;
}

.banner .fa-bug{
    color: #fc4850;
}

.myCharts{
    background-color:var(--white-color);
}

.myCharts .title{
    background-color:var(--primary-color);
    color:var(--white-color);
}

.myCharts .subTitle{
    color:#888;
}

.line{
    color:var(--black-color);
}

.noticePage span{
    color:#888;
}

.search input[type=text]{
    background-color: #eee;
    border: 1px solid #eee;
    color: var(--black-color);
}

.search .bi-search{                       
    color: #999;
    border-right: 1px solid rgba(0,0,0,0.2);
}

.addButton{
    background-color:var(--primary-color);;
    color:var(--white-color);
}

.tableTitle{
    border-bottom: 1px solid #eee;    
}

#myProgress {    
    background-color: #ddd;
}

#myBar {
    background-color: var(--primary-color);;
    color: var(--white-color);;
}

.dateRange select,.dateRange input[type="text"]{
    background-color: var(--white-color);
    color: var(--black-color);
    border: 1px solid #eee;    
}

.dateRange #search{
    background-color: var(--white-color);
    color: var(--black-color);
    border: 1px solid #eee;    
    
}

.bi-calendar-week{
    background-color: var(--white-color);
    color: var(--black-color);   
    border:1px solid #eee;
}

.previewTable{
    border-bottom: 1px solid #eee;
}

.previewTable tr:hover{
    background-color:#f7f7f7;
}

.previewTable .head{
    background-color:#888; 
}

.previewTable .head th{
    color:#2b2b2b;    
}

.previewTable tr:nth-child(odd) {
    background-color: #f7f7f7;       
    color:var(--black-color);
}

.previewTable tr:hover{
    background-color: #eee;      
}

.previewTable .sums{
    background-color: #eee;
}

.taskStatus .endTask{
    background-color: var(--primary-color);
    color:var(--white-color);    
}

.taskStatus .completed{
    background-color: var(--green-color);
    color:var(--white-color);
}

.taskStatus .canceled{
    background-color: var(--red-color);
    color:var(--white-color);
}

.taskStatus .pending{
    background-color: var(--yellow-color);
}

.infoForm{
    background-color: #fff !important;
    border:1px solid #eee;
}

.infoForm .myBtn{
    background-color: #4b84ff;
    color:#fff;
}

.taskPage .infoForm .basicTable td{
    border-bottom: 1px solid #eee;
}