:root{
    --web-color: #343A40 ;
    --dark-color: #868e96 ;
    --hover-color: rgba(134, 142, 150, 0.3); 
    --border-color: #CECECE;
}

body{
    overflow-x: hidden;
    overflow-y: scroll;
}
.box-shadow-30{box-shadow: 0 6px 12px 0 rgb(0 0 0 / 30%);}

.dropdown-item.active, .dropdown-item:active{
    background-color: #343A40;
}


.nav-tabs {
    border-bottom: 1px solid transparent;
}

.nav-tabs .nav-item .nav-link{
    color: var(--web-color);
}

.nav-tabs .nav-item .nav-link.active{
    background-color: var(--web-color);
    color: white;
    border-color: var(--web-color);
}

.tab-content{
    border: 1px solid var(--border-color);
    padding: 20px 20px;
    border-radius: 10px;
}


.website-alert{
    position: fixed;
    right: 20px;
    bottom: 20px;
}

.navbar{
    z-index: 1400;
    border-bottom: 1px solid white;
    position: fixed;
    top: 0px;
    width: 100%;
}

.sidebar{
    width: 18vw;
    height: 100%;
    background-color: var(--web-color);
    position: fixed;
    top: 0px;
    left: 0px;
    padding: 57px 0px;
}

.sidebar .sidebar-list i{width: 25px;}
.sidebar .sidebar-list{background-color: var(--web-color);cursor: pointer;}
.sidebar .sidebar-list .sidebar-list-item{
    background-color: var(--web-color);
    border-bottom: 1px solid rgb(131, 131, 131);
}
.sidebar .sidebar-list .sidebar-list-item:hover{background-color: rgb(36, 35, 35);}
.sidebar .sidebar-list.active .sidebar-list-item{background-color: rgb(36, 35, 35);}
.sidebar .sidebar-list .sidebar-list-item .fa-chevron-down{width: auto;}
.sidebar .sidebar-list.active .sidebar-list-item .fa-chevron-down{transform: rotate(180deg);}

.sidebar .sidebar-list .sub-menu{
    border-bottom: 1px solid rgb(131, 131, 131);
    background-color:  rgb(36, 35, 35);
    padding-left: 25px;
}
.sidebar .sidebar-list .sub-menu.hidden{display: none;}









.sidebar p,
.sidebar a{
    color: white;
    display: block;
    padding: 10px 10px;
}


.sidebar a:hover{
    text-decoration: none;
}

.sidebar .list-group-item{
    background-color: var(--web-color);
    color: white;
    border-radius: 0px;
}

.sidebar .list-group-item.collapsed{
    background-color: var(--web-color);
    color: white;
}

.sidebar .collapse.show .list-group-item{
     background-color: var(--web-color) !important;
     color: white !important;
}

.sidebar .collapse a{
    padding-left: 40px;
}

.page-wrapper{
    z-index: 1400 !important;
    margin-top: 70px;
    margin-left: 19vw;
    width: 80vw;
    margin-bottom: 100px;
}

.dt-button.buttons-print,
.dt-button.buttons-print:hover,
.dt-button.buttons-print:active,
.dt-button.buttons-print::after,
.dt-button.buttons-print::before{
    background-image: none !important;
    background-color: var(--web-color) !important;
    color: white !important;
    border: 1px solid var(--web-color) !important;
}

.dt-button.buttons-csv.buttons-html5,
.dt-button.buttons-csv.buttons-html5:hover,
.dt-button.buttons-csv.buttons-html5:active,
.dt-button.buttons-csv.buttons-html5::after,
.dt-button.buttons-csv.buttons-html5::before{
    background-image: none !important;
    background-color: var(--web-color) !important;
    color: white !important;
    border: 1px solid var(--web-color) !important;
}

.dt-button.buttons-copy.buttons-html5,
.dt-button.buttons-copy.buttons-html5:hover,
.dt-button.buttons-copy.buttons-html5:active,
.dt-button.buttons-copy.buttons-html5::after,
.dt-button.buttons-copy.buttons-html5::before{
    background-image: none !important;
    background-color: var(--web-color) !important;
    color: white !important;
    border: 1px solid var(--web-color) !important;
}




@media print {
  .sidebar{
      display: none;
  }
  nav{
      display: none;
  }
  .controls button{
      display: none;
  }

  table{
      width:100%
  }

  table {
  table-layout: fixed ;
  width: 100% ;
    }
    td {
    width: 20% ;
    }

  .page-wrapper{
    margin-left: 0vw;
    width: 100vw;
}

  body .printable {
    display:block;
  }
}

.bootstrap-select .dropdown-menu li a span.text{width: 100%;}
.bootstrap-select .dropdown-menu li:not(.disabled) > a small {
    background-color: black;
    color: white !important;
    padding: 3px 6px;
    border-radius: 5px;
    margin-left: 5px;
    font-size: 14px;
    float: right;
    display:block;
}
.bootstrap-select .dropdown-menu li:not(.disabled) > a.active small {
    background-color: white;
    color: black !important;
}

.form-check-inline input[type="radio"]{display: none;}
.form-check-inline input[type="radio"] + label{
    display: block;
    border: 1px solid #28a745;
    color: #28a745;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    min-width: 80px;
    text-align: center;
    user-select: none;
}
.form-check-inline input[type="radio"]:checked + label{
    background-color: #28a745;
    color: white;
}