/* NOTE THIS REQUIRED color.css */
.relative{position: relative;}
.absolute{position: absolute;}
.floodews-icon{ float:left; }
.browser-default{border:1px solid var(--gray-2);}
/* INPUT  */
input.browser-default,select.browser-default,textarea{outline:none;}
input.bg-black-1,select.bg-black-1,textarea.bg-black-1{ background:var(--BW02);color:var(--WH01); }
::-webkit-calendar-picker-indicator {
  filter: invert(1);
}
.waves-effect{
  z-index: 0;
}
.text-ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  cursor:pointer;
}
.bold{ font-weight: bold; }
.bolder{ font-weight: bolder; }
.italic{ font-weight: italic; }
/* MARGIN */
.m-20px{margin: 20px;}
.m-10px{margin: 10px;}
.m-5px{margin: 5px;}
.m-4px{margin: 4px;}
.m-3px{margin: 3px;}
.m-2px{margin: 2px;}
.m-1px{margin: 1px;}

.m-t-40px{margin-top:40px;}
.m-r-40px{margin-right:40px;}
.m-b-40px{margin-bottom:40px;}
.m-l-40px{margin-left:40px;}

.m-t-30px{margin-top:30px;}
.m-r-30px{margin-right:30px;}
.m-b-30px{margin-bottom:30px;}
.m-l-30px{margin-left:30px;}

.m-t-20px{margin-top:20px;}
.m-r-20px{margin-right:20px;}
.m-b-20px{margin-bottom:20px;}
.m-l-20px{margin-left:20px;}

.m-t-10px{margin-top:10px;}
.m-r-10px{margin-right:10px;}
.m-b-10px{margin-bottom:10px;}
.m-l-10px{margin-left:10px;}

.m-t-12px{margin-top:12px;}
.m-r-12px{margin-right:12px;}
.m-b-12px{margin-bottom:12px;}
.m-l-12px{margin-left:12px;}

.m-t-8px{margin-top:8px;}
.m-r-8px{margin-right:8px;}
.m-b-8px{margin-bottom:8px;}
.m-l-8px{margin-left:8px;}

.m-t-5px{margin-top: 5px;}
.m-b-5px{margin-bottom:5px;}
.m-r-5px{margin-right: 5px;}
.m-l-5px{margin-left: 5px;}


/* PADDING */
.p-20px{padding: 20px;}
.p-10px{padding: 10px;}
.p-9px{padding:9px;}
.p-8px{padding:8px;}
.p-7px{padding:7px;}
.p-6px{padding:6px;}
.p-5px{padding:5px;}
.p-4px{padding:4px;}
.p-3px{padding:3px;}
.p-2px{padding:2px;}
.p-1px{padding:1px;}

.p-t-40px{padding-top:40px;}
.p-r-40px{padding-right:40px;}
.p-b-40px{padding-bottom:40px;}
.p-l-40px{padding-left:40px;}

.p-t-30px{padding-top:30px;}
.p-r-30px{padding-right:30px;}
.p-b-30px{padding-bottom:30px;}
.p-l-30px{padding-left:30px;}

.p-t-20px{padding-top:20px;}
.p-r-20px{padding-right:20px;}
.p-b-20px{padding-bottom:20px;}
.p-l-20px{padding-left:20px;}

.p-t-10px{padding-top:10px;}
.p-r-10px{padding-right:10px;}
.p-b-10px{padding-bottom:10px;}
.p-l-10px{padding-left:10px;}

.p-t-8px{padding-top:8px;}
.p-r-8px{padding-right:8px;}
.p-b-8px{padding-bottom:8px;}
.p-l-8px{padding-left:8px;}

.p-t-5px{padding-top: 5px;}
.p-b-5px{padding-bottom:5px;}
.p-r-5px{padding-right: 5px;}
.p-l-5px{padding-left: 5px;}

/* FONT */
.f-bold{font-weight: 700;}
.f-2px{font-size: 2px;}
.f-4px{font-size: 4px;}
.f-6px{font-size: 6px;}
.f-8px{font-size: 8px;}
.f-10px{font-size: 10px;}
.f-12px{font-size: 12px;}
.f-14px{font-size: 14px;}
.f-16px{font-size: 16px;}
.f-18px{font-size: 18px;}
.f-20px{font-size: 20px;}
.f-22px{font-size: 22px;}
.f-24px{font-size: 24px;}
.f-26px{font-size: 26px;}
.f-28px{font-size: 28px;}
.f-30px{font-size: 30px;}
.f-32px{font-size: 32px;}
.f-34px{font-size: 34px;}
.f-36px{font-size: 36px;}
.f-38px{font-size: 38px;}
.f-40px{font-size: 40px;}
.f-42px{font-size: 42px;}
.f-44px{font-size: 44px;}
.f-46px{font-size: 46px;}
.f-48px{font-size: 48px;}


.img-w50px{ width:50px; }
.img-w100px{ width:100px; }
.img-w150px{ width:150px; }
.img-w200px{ width:200px; }
.img-w250px{ width:250px; }
.img-w300px{ width:300px; }
.img-w350px{ width:350px; }
.img-w400px{ width:400px; }
.img-w450px{ width:450px; }
.img-w500px{ width:500px; }
.img-w550px{ width:550px; }
.img-w600px{ width:600px; }
.img-w650px{ width:650px; }
.img-w700px{ width:700px; }
.img-w750px{ width:750px; }
.img-w800px{ width:800px; }
.img-w850px{ width:850px; }
.img-w900px{ width:900px; }
.img-w950px{ width:950px; }
.img-w1000px{ width:1000px; }


.img-h50px{ height:50px; }
.img-h100px{ height:100px; }
.img-h150px{ height:150px; }
.img-h200px{ height:200px; }
.img-h250px{ height:250px; }
.img-h300px{ height:300px; }
.img-h350px{ height:350px; }
.img-h400px{ height:400px; }
.img-h450px{ height:450px; }
.img-h500px{ height:500px; }
.img-h550px{ height:550px; }
.img-h600px{ height:600px; }
.img-h650px{ height:650px; }
.img-h700px{ height:700px; }
.img-h750px{ height:750px; }
.img-h800px{ height:800px; }
.img-h850px{ height:850px; }
.img-h900px{ height:900px; }
.img-h950px{ height:950px; }
.img-h1000px{ height:1000px; }

.h-100{height:100%;}
.h-95{height:95%;}
.h-90{height:90%;}
.h-85{height:85%;}
.h-80{height:80%;}
.h-75{height:75%;}
.h-70{height:70%;}
.h-65{height:65%;}
.h-60{height:60%;}
.h-55{height:55%;}
.h-50{height:50%;}
.h-45{height:45%;}
.h-40{height:40%;}
.h-35{height:35%;}
.h-30{height:30%;}
.h-25{height:25%;}
.h-20{height:25%;}
.h-15{height:15%;}
.h-10{height:10%;}
.h-5{height:5%;}
.h-0{height:0%;}


.w-100{width:100%;}
.w-95{width:95%;}
.w-90{width:90%;}
.w-85{width:85%;}
.w-80{width:80%;}
.w-75{width:75%;}
.w-70{width:70%;}
.w-65{width:65%;}
.w-60{width:60%;}
.w-55{width:55%;}
.w-50{width:50%;}
.w-45{width:45%;}
.w-40{width:40%;}
.w-35{width:35%;}
.w-30{width:30%;}
.w-25{width:25%;}
.w-20{width:25%;}
.w-15{width:15%;}
.w-10{width:10%;}
.w-5{hwidth:5%;}
.w-0{hwidth:0%;}

.b-2px-black{ border:2px solid var(--BW02); }
.b-2px-white{ border:2px solid var(--WH01); }
.b-1px-black{ border:1px solid var(--BW02); }
.b-1px-white{ border:1px solid var(--WH01); }

.b-rad-5px{border-radius:5px; -webkit-background-clip: padding-box; -moz-background-clip:padding; background-clip:padding-box; }
.b-rad-10px{border-radius:10px; -webkit-background-clip: padding-box; -moz-background-clip:padding; background-clip:padding-box; }
.b-rad-15px{border-radius:15px; -webkit-background-clip: padding-box; -moz-background-clip:padding; background-clip:padding-box; }
.b-rad-20px{border-radius:20px; -webkit-background-clip: padding-box; -moz-background-clip:padding; background-clip:padding-box; }
.b-rad-25px{border-radius:25px; -webkit-background-clip: padding-box; -moz-background-clip:padding; background-clip:padding-box; }
.b-rad-30px{border-radius:30px; -webkit-background-clip: padding-box; -moz-background-clip:padding; background-clip:padding-box; }
.b-rad-35px{border-radius:35px; -webkit-background-clip: padding-box; -moz-background-clip:padding; background-clip:padding-box; }
.b-rad-40px{border-radius:40px; -webkit-background-clip: padding-box; -moz-background-clip:padding; background-clip:padding-box; }
.b-rad-45px{border-radius:45px; -webkit-background-clip: padding-box; -moz-background-clip:padding; background-clip:padding-box; }
.b-rad-50px{border-radius:50px; -webkit-background-clip: padding-box; -moz-background-clip:padding; background-clip:padding-box; }

*,body,html{
  margin: 0;
  font-family:微软雅黑, Microsoft YaHei, Neuropolitical, sans-serif !important;
  line-height: 1.42857143;
}
.modal{
  color:var(--WH01);
  background-color:var(--BW02);
}
.modal .modal-header {
  border-radius: 0 0 2px 2px;
  padding: 4px 6px;
  height: 56px;
  width: 100%; }
.modal.modal-fixed-footer .modal-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 0;
}
.modal .modal-footer{
  padding: 12px 24px;
  background-color:var(--BW02);
  height: 80px;
}
.modal.modal-fixed-footer .modal-content{
  margin-top: +56px;
  height: calc(100% - 136px);
}


.scroll::-webkit-scrollbar-track{
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  background-color: var(--BW02);
  border-radius: 1px;
}
.scroll::-webkit-scrollbar{
  width: 5px;
  height: 5px;
}
.scroll::-webkit-scrollbar-thumb{
  background-color: var(--bg-red-1);
  border: 1px solid #555555;
  border-radius: 5px;
}
/* PAGINATION */
#pagination{
  padding: 10px;
}

#pagination li{
  display:inline;
  text-decoration: none;
  padding:.5em 0;
}

#pagination li a{
  text-decoration: none;
  padding: 10px;
  line-height: 1.2;
  font-size: 10px;
  color:var(--WH01);
}
.pagi-active{
  background-color:var(--blue-1);
}
.pagi-active a{
  text-decoration: none;
  color:#fff;
}

/* TABLE */
table, th, td{
  color:var(--WH01);

  border-radius: 0;
}
th{
  background: var(--BW01);
}
td{
  background: var(--BW02);
  border-bottom: 1px solid var(--gray-1);
}
td a{
  background: var(--BW02);
  color:var(--BW02);
}

thead .sorting{
  background-image:url("https://cdn.datatables.net/1.11.3/images/sort_both.png");
  background-repeat: no-repeat;
  background-position: right;
  cursor:pointer;
}
thead .sorting.sorting-asc{
  border-top:3px solid var(--blue-1);
}
thead .sorting.sorting-desc{
  border-bottom:3px solid var(--blue-1);
}

/* Container Header */
.container-header{
  /* display:flex; */
  justify-content: space-between;
}


/* SEARCHING */
.container-search{
  display: block;
  min-height: 40px;
  width: 100%;
  box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
  border-radius: 2px;
  margin-bottom: 15px;
}
.search-icon{
  border-top-left-radius: 2px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 2px;
  border:none;
  display: block;
  float: left;
  height: 40px;
  width: 40px;
  text-align: center;
  font-size: 20px;
  background: rgba(0,0,0,0.5) !important;
  padding:10px;
}
.container-search-content{
  margin-left: 40px;
}
.container-search-content input,
input.search-css{
  box-sizing: border-box;
  line-height: 1.6;
  background: var(--BW02);
  color:var(--WH01);
  border:2px solid var(--WH01);
}

thead th{
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
}

.sidenav .collapsible-body, .sidenav.fixed .collapsible-body {
    border: 0;
    background-color: var(--BW01);
}
.cl-border-white{
  border-color: white;
}

textarea{ padding: 0.5rem 1rem; color:white;}

.swal2-popup {
  background: var(--BW02);
  color:var(--WH01);
}

.swal2-html-container table td {
    border-bottom: var(--WH01);
    color: var(--WH01);
}

.btn-flat{
  color:var(--WH01);
}

.pagination li a {
  color:#FFF;
}

.pagi-active{
  background: var(--blue-1) !important;
  color:#FFF !important;
}

.pagination li{
  border-radius: 2.223px;
  background: #474747;
  color:var(--WH01);
}