:root {
--blue: #4e73df;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #e74a3b;
--orange: #f8a308;
--yellow: #f6c23e;
--green: #1cc88a;
--teal: #20c9a6;
--cyan: #36b9cc;
--white: #fff;
--gray: #858796;
--gray-dark: #5a5c69;
--primary: #4e73df;
--secondary: #858796;
--success: #1cc88a;
--info: #36b9cc;
--warning: #f6c23e;
--danger: #e74a3b;
--dark_0: #212529;
--dark_1: #313131;
--dark_2: #343a40;
--gray_1: #f0eff0;
--light: #f8f9fc;
--light_1: #525f6c;
--light_2: #525f6c;
--home: #ddd;
--clts: #4e73df;
--frns: #AAD200;
--fcts:  #ff1010;
--cmds: #e86d08;
}
/*global*/
  body {
    color:#fff;
  }
  #accordionSidebar {
    background-color: var(--dark_2)!important;
  }
  #sidebarToggleTop {
    background-color:var(--light_1);
  }
  .bg-sidebar {
    background-color:var(--dark_2)!important;
    background-image: linear-gradient(180deg, var(--dark_1) 5%, var(--dark_1) 30%, var(--dark_1) 70%, var(--dark_2) 90%);
    background-size: cover;
    color: var(--light);
  }
  .bg-topbar {  
    background-color: var(--dark_2);
    background-image: linear-gradient(45deg, var(--dark_1) 10%, var(--dark_0) 20%, var(--dark_0) 70%, var(--dark_1_1) 100%);
    background-size: cover;
  }
  #content {
    background-color: var(--dark_1)!important;
    background-image: linear-gradient(180deg, var(--dark_2) 70%, var(--dark_1) 100%);
    background-size: cover;
  }
  .sticky-footer {
    background-color: var(--dark_2);
    color: var(--light);
    /*background-image: linear-gradient(45deg, var(--dark_1) 0%, var(--dark_0) 50%, var(--dark_0) 50%, var(--dark_0) 100%);*/
    background-size: cover;  
  }
  a {
    color: #aaa!important;
    }
  a:hover {
    color: var(--light)!important;
    text-decoration:none;
    background-color:transparent!important;
  }
/*menu*/
  .nav-link {
    color: #aaa!important;
  }
/*default*/
  .bg-gradient-primary {
    background-color: #4e73df;
    background-image: linear-gradient(180deg, #4e73df 10%, #224abe 100%);
    background-size: cover;
  }

  .bg-gradient-secondary {
    background-color: #858796;
    background-image: linear-gradient(180deg, #858796 10%, #60616f 100%);
    background-size: cover;
  }

  .bg-gradient-success {
    background-color: #1cc88a;
    background-image: linear-gradient(180deg, #1cc88a 10%, #13855c 100%);
    background-size: cover;
  }

  .bg-gradient-info {
    background-color: #36b9cc;
    background-image: linear-gradient(180deg, #36b9cc 10%, #258391 100%);
    background-size: cover;
  }

  .bg-gradient-warning {
    background-color: #f6c23e;
    background-image: linear-gradient(180deg, #f6c23e 10%, #dda20a 100%);
    background-size: cover;
  }

  .bg-gradient-danger {
    background-color: #e74a3b;
    background-image: linear-gradient(180deg, #e74a3b 10%, #be2617 100%);
    background-size: cover;
  }

  .bg-gradient-light {
    background-color: #f8f9fc;
    background-image: linear-gradient(180deg, #f8f9fc 10%, #c2cbe5 100%);
    background-size: cover;
  }

  .bg-gradient-dark {
    background-color: #5a5c69;
    background-image: linear-gradient(180deg, #5a5c69 10%, #373840 100%);
    background-size: cover;
  }

  .bg-gray-100 {
    background-color: #f8f9fc !important;
  }

  .bg-gray-200 {
    background-color: #eaecf4 !important;
  }

  .bg-gray-300 {
    background-color: #dddfeb !important;
  }

  .bg-gray-400 {
    background-color: #d1d3e2 !important;
  }

  .bg-gray-500 {
    background-color: #b7b9cc !important;
  }

  .bg-gray-600 {
    background-color: #858796 !important;
  }

  .bg-gray-700 {
    background-color: #6e707e !important;
  }

  .bg-gray-800 {
    background-color: #5a5c69 !important;
  }

  .bg-gray-900 {
    background-color: #3a3b45 !important;
  }
/*default*/
/*
.txt-sidebar,.nav-link,.sidebar-brand {
  color: #fff;
}
.border-left {
  border-left: 0.25rem solid transparent!important;
}
.border-left-theme {
  border-left: 0.25rem solid var(--white) !important;
}
.breadcrumb-item + .active {
  color: #fff!important;
}*/
/*card*/
  .card {
    background-color: var(--dark);
    /*background-image: linear-gradient(180deg, var(--dark_2) 70%, var(--success) 100%);*/
    /*background-size: cover;*/
  }
  .card-header {
    background-color: var(--secondary);
    background-image: linear-gradient(45deg, var(--dark_0) 0%, var(--dark_2) 45%, var(--dark_2) 75%, var(--dark_0) 100%);
    background-size: cover;
    color: var(--light)!important;
  }
  .card-body {
    background-color: var(--dark_1)!important;
    background-image: linear-gradient(0deg, var(--dark_2) 90%, var(--dark_1) 100%);
    background-size: cover;
  }
/*table*/
  table.dataTable th {
    font-weight: normal!important;
    color: var(--light);
  }
  table.dataTable tbody td {
      vertical-align:middle;
      color: var(--light);
    }
  .odd {
    background-color: var(--dark_0);
  }
  .even {
    background-color: var(--dark_2);
  }
  .odd:hover {
    background-color: var(--dark_1);
  }
  .even:hover {
    background-color: var(--dark_1);
  }
/*colors*/
  /*cmds*/
      .menu-active-cmds {
        color: var(--cmds)!important;
        border-right: 0.25rem solid var(--cmds) !important;
      }
      .menu-cmds:hover {  
        border-right: 0.25rem solid var(--cmds) !important;
      }
      .menu-cmds:hover>a {  
        color: var(--cmds)!important;
      }
      .bg-cmds-1 {
        background-color: var(--dark_1)!important;
        background-image: linear-gradient(45deg, var(--dark_2) 90%, var(--cmds) 100%)!important;
        background-size: cover; 
      }
      .bg-cmds-2 {
        color: var(--white)!important;
        background-color: var(--dark_1)!important;
        background-image: linear-gradient(45deg, var(--cmds) 0%, var(--dark_2) 5%,var(--dark_2) 95%, var(--cmds) 100%)!important;
        background-size: cover; 
      }
      .bg-cmds-2 button {
        color: var(--white)!important;
      }
      .border-cmds {
        border-color: var(--cmds);
      }
      .txt-cmds {
        color: var(--cmds)!important;
      }
  /*fcts*/
      .menu-active-fcts {
        color: var(--fcts)!important;
        border-right: 0.25rem solid var(--fcts) !important;
      }
      .menu-fcts:hover {  
        color: var(--fcts)!important;
        border-right: 0.25rem solid var(--fcts) !important;
      }
      .menu-fcts:hover>a {  
        color: var(--fcts)!important;
      }      
      .link-fcts:hover > a {
       color:var(--fcts)!important; 
      }
      .bg-fcts-1 {
        background-color: var(--dark);
        background-image: linear-gradient(45deg, var(--dark_2) 90%, var(--fcts) 100%)!important;
        background-size: cover; 
      }
      .bg-fcts-2 {
        color: var(--white)!important;
        background-color: var(--dark);
        background-image: linear-gradient(45deg, var(--fcts) 0%, var(--dark_2) 5%, var(--dark_2) 95%, var(--fcts) 100%)!important;
        background-size: cover; 
      }
      .bg-fcts-2 button {
        color: var(--white)!important;
      }
      .border-fcts {
        border-color: var(--fcts);
      }
      .txt-fcts {
        color: var(--fcts)!important;
      }
  /*clts*/
      .menu-active-clts {
        color: var(--clts)!important;
        border-right: 0.25rem solid var(--clts) !important;
      }
      .menu-clts:hover {  
        border-right: 0.25rem solid var(--clts) !important;
      }
      .menu-clts:hover>a {  
        color: var(--clts)!important;
      }
      .bg-clts-1 {
        background-color: #fff;
        background-image: linear-gradient(45deg, var(--dark_2) 90%, var(--clts) 100%)!important;
        background-size: cover; 
      }
      .bg-clts-2 {
        color:var(--white)!important;
        background-image: linear-gradient(45deg, var(--clts) 0%, var(--dark_2) 5%, var(--dark_2) 95%, var(--clts) 100%)!important;
        background-size: cover; 
      }
      .bg-clts-2 button {
        color:var(--white)!important;
      }
      .border-clts {
        border-color: var(--clts);
      }
      .txt-clts {
        color: var(--clts)!important;
      }
  /*frns*/
      .menu-active-frns {
        color: var(--frns)!important;
        border-right: 0.25rem solid var(--frns) !important;
      }
      .menu-frns:hover {  
        color: var(--frns)!important;
        border-right: 0.25rem solid var(--frns) !important;
      }
      .menu-frns:hover>a {  
        color: var(--frns)!important;
      }
      .bg-frns-1 {
        color:var(--white)!important;
        background-color: var(--dark);
        background-image: linear-gradient(45deg, var(--dark_2) 90%, var(--frns) 100%)!important;
        background-size: cover; 
      }
      .bg-frns-2 {
        color:var(--white)!important;
        background-color: var(--dark);
        background-image: linear-gradient(45deg, var(--frns) 0%, var(--dark_2) 5%, var(--dark_2) 95%, var(--frns) 100%)!important;
        background-size: cover; 
      }
      .bg-frns-2 button {
        color:var(--white)!important;
      }
      .border-frns {
        border-color: var(--frns);
      }
      .txt-frns {
        color: var(--frns)!important;
      }
  /*arts*/
      .menu-active-cats {
        color: var(--cats)!important;
        border-right: 0.25rem solid var(--cats) !important;
      }
      .menu-cats:hover {  
        border-right: 0.25rem solid var(--cats) !important;
      }
      .menu-cats:hover>a {  
        color: var(--cats)!important;
      }
      .bg-arts-1 {
        background-color: var(--dark);
        background-image: linear-gradient(45deg, var(--dark_2) 90%, var(--arts) 100%)!important;
        background-size: cover; 
      }
      .bg-arts-2 {
        background-color: var(--dark);
        background-image: linear-gradient(45deg, var(--arts) 0%, var(--dark_2) 2%, var(--dark_2) 98%, var(--arts) 100%)!important;
        background-size: cover; 
      }
      .border-arts {
        border-color: var(--arts);
      }
      .txt-arts {
        color: var(--arts)!important;
      }
      .border-left-arts {
        border-left: 0.15rem solid var(--arts) !important;
      }
      .border-right-arts:hover {
        border-right: 0.15em solid var(--arts) !important;
      }
      .articles img {
        width: 100%;
        border-radius: 7px;
        border: 1px solid var(--dark_2);
        box-shadow: 0.05em 0.05em var(--light_2);
      }
      .articles .icon {
        /*tag*/
        font-size: 1.1em;
        margin-top: 1.1em;
        transform: rotate(90deg);
        color: var(--light_2);
        /*bottle*/
        /*font-size: 2.1em;
        margin-top: 0.5em;
        transform: rotate(-45deg);*/
      }
      .change_art {
        cursor:pointer;
      }
      .change_art:hover {
        color:var(--light);
      }
      .articles:hover > .arts_delDropdown {
        visibility:visible!important;
      }
      .articles span {
        line-height: 2em!important;
      }
      .articles select {
        /*padding: 0px;*/
        padding-top: 0px!important;
        padding-bottom: 0px!important;
        height: 2em!important;
        font-size: 0.97em!important;
        text-align:center;
        width:100%;
      }
      .arts_copyDropdown, .arts_delDropdown {
        background-color: var(--dark_2);
      }
  /*stats*/
      .bg-stats-2 {
        background-color: var(--dark);
        background-image: linear-gradient(45deg, var(--stats) 0%, var(--dark_2) 2%, var(--dark_2) 98%, var(--stats) 100%)!important;
        background-size: cover; 
      }
      .menu-active-stats {
        color: var(--stats)!important;
        border-right: 0.25rem solid var(--stats) !important;
      }
      .menu-stats:hover {  
        color: var(--stats)!important;
        border-right: 0.25rem solid var(--stats) !important;
      }
      .menu-stats:hover>a {  
        color: var(--stats)!important;
      }
      .chartsBtn {
        color: var(--light_2)!important;
      }
      .chartsBtn + .choosed {
        color: var(--white)!important;
      }
  /*home*/
      .menu-active-home {
        color: var(--home)!important;
        border-right: 0.25rem solid var(--home) !important;
      }
      .menu-home:hover {  
        color: var(--dark_1)!important;
        border-right: 0.25rem solid var(--home) !important;
      }
      .menu-home:hover>a {  
        color: var(--home)!important;
      }
  /*docs*/
      .menu-active-docs {
        color: var(--home)!important;
        border-right: 0.25rem solid var(--home) !important;
      }
      .menu-docs:hover {  
        color: var(--home)!important;
        border-right: 0.25rem solid var(--home) !important;
      }
      .menu-docs:hover>a {  
        color: var(--home)!important;
      }
  /*params*/
      .menu-active-params {
        color: var(--home)!important;
        border-right: 0.25rem solid var(--home) !important;
      }
      .menu-params:hover {  
        color: var(--home)!important;
        border-right: 0.25rem solid var(--home) !important;
      }
      .menu-params:hover>a {  
        color: var(--home)!important;
      }

/*forms*/
  .form-control {
    background-color:transparent;
    color: #fff!important;
  }
  .form-control:focus {
    background-color:var(--dark_1)!important;
    color: #fff!important;
  }

  .ui-menu-item-wrapper:hover {
    background-color: var(--dark_1)!important;
    color: #fff!important;
    border:1px solid #fff!important;
  }
 /*switch*/
    .switch {
      position: relative;
      display: inline-block;
      width: 43px;
      height: 21px;
    }
    .switch input { 
      opacity: 0;
      width: 0;
      height: 0;
    }
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: -3px;
      bottom: 0;
      background-color: #212529;
      box-shadow: 0 0 3px #fff;
      -webkit-transition: .4s;
      transition: .4s;
    }
    .slider:before {
      position: absolute;
      content: "";
      height: 13px;
      width: 13px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s;
    }
    input:checked + .slider {
      background-color: var(--success);
      margin-right:-3px;
    }
    input:focus + .slider {
      box-shadow: 0 0 3px var(--light_1);
    }
    input:checked + .slider:before {
      -webkit-transform: translateX(26px);
      -ms-transform: translateX(26px);
      transform: translateX(26px);
    }
    /* Rounded sliders */
    .slider.round {
      border-radius: 34px;
    }
    /*rond non checked*/
    .slider.round:before {
      border-radius: 50%;
      background-color: #fff;
    }
    /*rond checked*/
    input:checked + .slider.round:before {
      border-radius: 50%;
      background-color: #212529;
    }
  /*switch*/
/*modal*/
  .modal-content {
    background-image: linear-gradient(180deg, var(--dark_1) 5%, var(--dark_0) 100%);
  }

/*dropdown*/
  .dropdown-toggle {
    color: var(--light_0)!important;
  }
  .dropdown-item {
    cursor:pointer;
    color: var(--light_0)!important;
  }
  .dropdown-item:hover {
    /*background-color: var(--light_0)!important;*/
    color: var(--dark_0)!important;
  }
  .dropdown-menu {
    background-color: var(--dark_0);
    background-image: linear-gradient(180deg, var(--dark_0) 10%, var(--dark_1) 100%);
    background-size: cover;
  }