:root {
     --darkColor: #15202b;
     --darkColor2: #192734;
     --darkColor3: #253341;
     --darkColor4: #314457;
     --textColor: #fff;
}

@media only screen{
     /* DARK MODE */
     body.dark {
          background-color: var(--darkColor);
          color: var(--textColor);
     }
     body.dark header {
          background-color: var(--darkColor);
          color: var(--textColor);
     }

     body.dark #idLogo1, body.dark #idLogo2{display:none!important;}

     body.dark #dsCli{
          background-image: none!important;
     }

     body.dark #dsCli span{
          display: block!important;
          color: var(--textcolor)!important;
     }

     @media only screen and (max-width: 992px) {
          body.dark #dsCli span {
               color: var(--textcolor)!important;
     	}
     }

     body.dark .card {
          background-color: var(--darkColor4);
     }

     body.dark .card-header {
          background-color: var(--darkColor3);
          color: var(--textColor);
          background-clip: border-box;  
     }
     body.dark .card-img-top {
          filter: brightness(40%);
     }

     body.dark .list-group-item {
          background-color: var(--darkColor);
          color: var(--textColor);
     }

     body.dark .modal-content {
          background-color: var(--darkColor);
          color: var(--textColor);
     }

     body.dark .close {
          color: var(--textColor);
     }

     body.dark .btn-outline-secondary {
          color: var(--textColor)!important;
     }

     body.dark .btn-outline-dark {
          color: var(--textColor)!important;
          background-color: var(--gray)!important;
     }     

     body.dark .dropdown-menu {
          color: var(--textColor)!important;
          background-color: var(--gray)!important;
     }               
     body.dark .dropdown-item {
          color: var(--textColor)!important;
          background-color: var(--gray)!important;
     }
 
     body.dark .alert-warning {
          color: #e1c678;
          background-color: #a6945e;
     }     

     body.dark .form-control {
          background-color: #acacac!important;
     }
     

     .switch 	{    
          position : absolute ;    
          right: .5em;
          top: .5em;

          display : inline-block;   
          width : 18px; /*  30px = horizontal - 17px = VERTICAL */  
          height : 50px; /* 17px = horizontal - 50px = VERTICAL */  
          background-color: var(--gray);   
          border-radius: 10px;
          z-index: 10000; 
          cursor: pointer;
     }

     .switch::after {  
          content: '';  
          position: absolute;  
          width: 16px;  
          height: 16px;  
          border-radius: 50%;  
          background-color: var(--darkColor4);  
          top: 1px;  
          left: 1px; 
          transition: all 0.3s
          }

     .checkbox:checked + .switch::after {
          /*left : 15px; horizontal */
          top : 33px;  /*vertical */
     }
     .checkbox:checked + .switch {  
          background-color: var(--light);
     }
     .checkbox {    
          display : none;
     }
}