@font-face {font-family:"mono";src: url('../css/fonts/mono.ttf');}
@font-face {font-family:"mono-r";src: url('../css/fonts/mono-r.ttf');}
@font-face {font-family:"mono-b";src: url('../css/fonts/mono-b.ttf');}
@font-face {font-family:"flex";src: url('../css/fonts/RobotoFlex-Regular.ttf');}
@font-face {font-family:"digital";src: url('../css/fonts/digital.ttf');}

:root {
	--BG:#353A40;
	--BG-page:url("../asset/images/bg2.png");
	--BG-SHADOW:rgba(0,0,0,0.3);
	--C-1:rgba(129,147,168,0.2);
	--C-2:rgba(129,147,168,0.9);
	--C-3:rgba(255,255,255,0.8);
	--C-4:rgba(129,147,168,1);
	--B-1:0.1vw solid rgba(255,255,255,0.1);
	--B-2:0.2vw solid rgba(255,255,255,0.1);
	--BG-1:rgba(0,0,0,0.1);
	--BG-2:rgba(0,0,0,0.2);
	--BG-3:#26292E;
	--BG-blue:#39c5f3;
	--BG-body:linear-gradient(0deg,#151617 0, #27282C 100%);
	--BG-box:linear-gradient(120deg,#1F2226 0,rgba(0,0,0,0.01));
	--BG-cell:linear-gradient(0deg,#1A1C20 0, #353A40 100%);
	--BG-cell1:linear-gradient(145deg, #212429, #282b30);
	--BR-1:rgba(255,255,255,0.03);
	--BR-2:#3D414D;
	--BR-3:#424750;
	--CO-white:#ffffff;
	--CO-red:#cd3d2e;
	--CO-green:#95c000;
	--CO-orange:#FF8C00;
	--CO-blue:#39c5f3;
	--CO-yellow:#fbbd00;
	--CO-t1:rgba(255,255,255,0.3);
	--CO-t2:rgba(255,255,255,0.5);
	--TS-blue:1px 0 10px rgba(2,112,215,0.5);
	--BG-GR-blue:linear-gradient(145deg, #2D9DC2,#227691);
	--BG-GR-green:linear-gradient(145deg, #95c000,#779900);
	--CO-black1:#26292E;
	--CO-black2:#2C3036;
	--BS:2px 2px 2px rgba(0,0,0,0.2),-3px -3px 6px rgba(255,255,255,0.02);
}
::-webkit-scrollbar {width:0.3vw;}
::-webkit-scrollbar-button {display:none;}
::-webkit-scrollbar-thumb {background-color:var(--CO-t1);border-radius:0.2vw;}

body {
	font:0.8vw "mono-r";
	margin:0;
	width:100vw;
	height:100vh;
	color:var(--C-2);
	overflow:hidden;
}

a {text-decoration:none;color:var(--C-2);}
a:hover { color:#fff;}
input[type=text],input[type=password],input[type=number],input[type=date],input[type=autocomplete],textarea {
	border:0;
	outline:none;
	padding:0 0.5vw;
	height:3vh;
	font:0.7vw 'mono-r';
	display:flex;
	color:var(--CO-white);
	align-items:center;
	background:var(--BG-2);
	border-left:0.1vw solid var(--C-2);
}
input:focus,textarea:focus,select:focus {border-color:var(--CO-blue);}
input::placeholder {text-transform:lowercase;color:var(--C-1);font-size:0.7vw;}

textarea {padding:0.5vw;}
select option {padding:0;}
input[type=number] {width:5vw;text-align:right;}
input[type="date"],input[type="month"],input[type="datetime-local"] {position: relative;}

input[type="month"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
	color: transparent;
	background: none;
	z-index: 1;
}
input[type="date"]:before,
input[type="month"]:before,
input[type="datetime-local"]:before {
	color: transparent;
	background: none;
	display: block;
	font-family: 'FontAwesome';
	content: '\f073';
	/* This is the calendar icon in FontAwesome */
	width: 1vw;
	height: 1vw;
	position: absolute;
	top: 0.2vw;
	right: 0;
}
html {height:100%;}

.cs-page {
	position:relative;
	width:100%;
	height:100%;
	z-index:0;
	background:var(--BG-page);
}
/***** PAGE ***********/
.cs-page-header {position:relative;height:8vh;}
.cs-page-content {position:relative;height:86vh;margin:0 2vw 0 6vw;}
.cs-page-footer {position:relative;height:6vh;}
.cs-page-content-left {float:left;position:relative;}
.cs-page-content-right {float:right;width:70vw;position:relative;}
/**********************/

/***** CONTENTS *******/
.cs-xycenter {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.cs-xcenter {position:absolute;top:50%;transform:translateY(-50%)}
.cs-ycenter {position:absolute;left:50%;transform:translateX(-50%)}

.cs-title {color:var(--C-4);left:2vw;text-transform:uppercase;letter-spacing:0.2vw;font-size:1.2vw;}
.cs-title i {margin-right:0.5vw;color:var(--CO-orange);}
.cs-subtitle {color:var(--C-3);left:4.5vw;font-size:0.7vw;}
.cs-subtitle span {display:block;font-size:0.7vw;color:var(--C-2)}
.cs-logo {left:2vw;height:3.5vh;}
.cs-copyright {right:2vw;font-size:0.6vw;letter-spacing:0.1vw;}
.cs-calendar {display:inline-block;right:20vw;width:7.5vw;height:2.2vw;}
.cs-calendar span:nth-child(1) {font:3vw 'digital';float:left;color:var(--C-2);line-height:2.2vw;}
.cs-calendar span:nth-child(2) {font-size:0.6vw;float:right;letter-spacing:0.1vw;text-transform:uppercase;}
.cs-calendar span:nth-child(3) {font:1.6vw 'digital';float:right;}
.cs-user {right:6vw;display:inline-block;width:13vw;font-size:0.7vw;height:2.2vw;letter-spacing:0.05vw;z-index:1;}
.cs-user i {margin-right:0.3vw;}
.cs-user a {display:block;margin-top:0.5vh;}
.cs-signout {right:2vw;font-size:1.5vw;z-index:2;}


/***** STYLE ***************************/
.cs-blue {color:var(--CO-blue)}
.cs-orange {color:var(--CO-orange)}
.cs-yellow {color:var(--CO-yellow)}
.cs-red {color:var(--CO-red)}
/***************************************/


.cs-page-logo { position:absolute;top:50%;left:50%;z-index:0;transform:translate(-50%,-50%);}
.cs-page-logo img {width:15vw;opacity:0.02;}
.cs-page-title {
	position:absolute;letter-spacing:0.15vw;left:50%;top:50%;transform:translate(-50%,-50%);z-index:0;font:1.4vw 'mono-b';color:var(--CO-white);
}
.cs-page-title b {font-weight:normal;color:var(--CO-green);}
.cs-page-title i {font-weight:normal;font-style:normal;color:var(--CO-blue);}
.cs-page-subtitle { 
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	left:4.5vw;
	z-index:0;
	text-transform:uppercase;
	font:0.7vw 'mono';
	letter-spacing:0.1vw;
}
.cs-page-content-title {
	font-size:1.5vw;text-transform:capitalize;position:absolute;top:50%;left:2vw;transform:translateY(-50%);z-index:2;display:inline-flex;flex-direction:row;align-items:center;color:var(--CO-white);
}
.cs-page-content-title i {margin-right:1vw;opacity:0.7;font-size:1.8vw;}

/*********** BUTTON *****************/
.cs-round-btn {
	padding:0 0.6vw;
	min-height:2.6vh;
	min-width:2.6vh;
	display:flex;
	gap:0.3vw;
	align-items:center;
	justify-content:center;
	border-radius:1vw;
	text-transform:capitalize;
	border:0.1vw solid var(--BR-2);
}
.cs-round-btn:hover {color:var(--CO-blue);text-shadow:var(--TS-blue);border:0.1vw solid var(--CO-blue);}

.cs-btn {
	float:left;
	position:relative;
	display:flex;
	gap:0.35vw;
	align-items:center;
	text-transform:uppercase;
	min-height:3.8vh;
	padding:0 1vw;
	cursor:pointer;
	transition:padding 0.3s ease;
	letter-spacing:0.05vw;
	background:rgba(0,0,0,0.4);
	font-size:0.6vw;
}
.cs-btn i {font-size:0.8vw;}
.cs-box-btn span {margin-bottom:0.1vw;}
.cs-box-btn:hover {color:var(--CO-white);}
/*******************************************/

/*** SELECT ***/
.cs-select {display:flex;flex-direction:column;position:relative;height:4vh;}
.cs-option {
	padding:0 3vw 0 1vw;
	min-height:3.8vh;
	display:flex;
	align-items:center;
	position:absolute;
	top:0;
	width: 100%;
	pointer-events:none;
	order:2;
	z-index:1;
	transition:background .2s ease-in-out;
	box-sizing:border-box;
	overflow:hidden;
	white-space:nowrap;
	background:var(--BG-1);
	margin-bottom:0.1vw;
	border-top:0;
	border-radius:1vw;
	text-transform:uppercase;
	font-size:0.7vw;
}
.cs-option:hover {background:var(--CO-black2);color:var(--CO-white);}
.cs-select:focus .dt-option {position:relative;pointer-events:all;}
.cs-select input {opacity:0;position:absolute;left:-99999px;}
.cs-select input:checked + label {
	order: 1;
	z-index:2;
	background:linear-gradient(145deg, #31363c, #292d32);
	position:relative;
	border-radius:1vw;
	border-width:0.1vw;
	border-style:solid;
	border-color:transparent;
	box-shadow:2px 2px 2px #24272c,-3px -3px 6px rgba(255,255,255,0.02);
}
.cs-select input:checked + label:after {
	content:'';
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid white;
	position:absolute;
	right:10px;
	top:calc(50% - 2.5px);
	pointer-events:none;
	z-index:3;
}

/*** TABLE ***/
.cs-table {display:flex;flex-direction:column;}
.cs-row {display:flex;gap:1vh;}
.cs-cell {display:flex;flex-wrap:wrap;position:relative;align-items:center;}
.cs-cell:last-of-type {flex:1;}

.cs-panel {position:absolute;top:1.5vh;width:100%;left:0;height:8vh;display:flex;flex-direction:row;align-items:center;justify-content:right;gap:0.2vw;}
.cs-panel-cell {min-width:0.6vw;}
.cs-panel-cell input,select {background:rgba(0,0,0,0.5);height:3.8vh;font-size:1vw;}
.cs-panel-cell input::placeholder {font-size:1vw;}
.cs-panel-cell select option {background:rgba(0,0,0,0.8);}
.cs-panel .cs-new {position:absolute;left:0;top:50%;transform:translateY(-50%);}
/**** VLIST ****/
.cs-vlist {overflow:hidden;padding-bottom:0.1vh;top:10vh;position:relative;background:rgba(255,255,255,0.05);}
.cs-vlist-overflow {overflow:auto;margin-top:0.1vh;}
.cs-vlist-title {padding:1vh 1vw;text-transform:capitalize;color:rgba(255,255,255,0.8);}
.cs-vlist-head .cs-row {height:4vh;background:rgba(0,0,0,0.4);}
.cs-vlist-head .cs-cell {text-transform:capitalize;color:var(--C-2);font-size:0.6vw;text-transform:uppercase;padding:0 0.5vw;}
.cs-vlist-head .cs-cell:first-of-type {border-right:1px solid transparent;}
.cs-vlist-rows .cs-row {border-bottom:0.01vh solid var(--C-1);color:var(--C-2);}
.cs-vlist-rows .cs-row:last-of-type {border-bottom:0}
.cs-vlist-rows .cs-cell {font-size:0.6vw;color:var(--C-3);min-height:3vh;padding:0 0.5vw;}
.cs-vlist-rows .cs-cell div {width:100%;}
.cs-vlist-rows .cs-cell:first-of-type {justify-content:center;background:rgba(0,0,0,0.2);border-right:1px solid var(--C-1);}
.cs-vlist-rows .cs-cell:first-of-type i {font-size:0.8vw;}
.cs-vlist-rows .cs-row:hover {background:rgba(0,0,0,0.4);color:#fff;}
.cs-vlist-rows .cs-row:hover .cs-cell {color:#fff;}
.cs-vlist-nav-limit {
	position:absolute;
	top:14vh;
	left:-2.8vw;
	gap:1vw;
	display:flex;
	flex-direction:column;
	padding:0;
	text-transform:uppercase;
	font-size:0.7vw;
	width:3vw;
	height:auto;
}
.cs-vlist-nav-limit div {display:flex;flex-direction:column;gap:1vw;height:100%;}
.cs-vlist-nav-limit a {border-right:0.1vw solid var(--BR-2);padding:0.5vh 0;width:1.9vw;height:1.8vh;text-align:center;}
.cs-vlist-nav-limit a:hover {color:var(--CO-blue);border-right:0.1vw solid var(--CO-blue);}
.cs-bar-line {position:absolute;top:50%;transform:translateY(-50%);left:1.9vw;border-right:0.1vw solid var(--BR-2);height:100%;z-index:-1;}
a.active {color:var(--CO-orange);border-right:0.1vw solid var(--CO-orange);font-size:0.8vw;margin-top:auto;margin-bottom:auto;opacity:1;}

.cs-bar-page {display:flex;flex-direction:column;align-items:center;gap:0.5vw;}
.cs-bar-info {display:flex;gap:0.3vw;align-items:center;}
.cs-bar-info span {color:var(--CO-t2);}
.cs-bar {display:flex;flex-direction:column;align-items:center;gap:0.3vw;}

.cs-perpage {margin-left:auto;display:flex;gap:0.5vw;font-size:0.7vw;}
.cs-perpage .active {border:0;}
.cs-perpage a:hover {color:var(--CO-orange)}

.cs-curpage {position:absolute;top:2vh;left:-4.5vw;font:4vw 'digital';color:var(--C-1);}


.cs-flex {display:flex;align-items:center;gap:0.3vw;}

.cs-info .cs-row {height:3.5vh;border-bottom:0.1vh solid transparent;}
.cs-info .cs-cell:nth-child(1) {width:8vw;text-transform:uppercase;background:var(--BG-2);padding:0 0.5vw;}
.cs-info .cs-cell:nth-child(2) {color:var(--C-3);}
.cs-info .cs-btn {justify-content:center;}
/**** FONT ****/
.cs-blue {color:var(--CO-blue)}
.cs-orange {color:var(--CO-orange)}
.cs-yellow {color:var(--CO-yellow)}
.cs-green {color:var(--CO-green)}

.cs-fs1 {font-size:1vw;}
.cs-fs2 {font-size:1.5vw;}
.cs-fs3 {font-size:2vw;}


.cs-f1n {font-size:1vw;}

.cs-gray {color:var(--CO-t1)}
.cs-gray:hover {color:var(--CO-blue);}
.cs-blue {color:var(--CO-blue);}

.cs-b-blue {background:var(--BG-GR-blue);color:#fff;}
.cs-b-blue a {color:#fff}
.cs-yellow {color:var(--CO-yellow)}
.cs-b-yellow {background:var(--gyellow);color:var(--CO-white);}
.cs-green {color:var(--CO-green)}
.cs-b-green {background:var(--BG-GR-green);color:var(--CO-white);}
.cs-b-black {background:var(--CO-black1)}
.cs-white {color:var(--CO-white)}
.cs-red {color:var(--CO-red)}
.cs-b-red {background:var(--CO-red);color:#fff;}
.cs-act-blue {background:var(--active);color:var(--CO-white);}

.cs-menu-link {font-size:1vw;display:inline-block;cursor:pointer;position:absolute;right:-1vw;top:50%;color:var(--CO-blue);transform:translateY(-50%);z-index:999;}

.cs-left-menu {position:absolute;display:inline-block;top:0;left:-50%;z-index:1;width:50%;height:100%;transition:all 0.3s ease;}
.cs-left-menu:hover {left:0;background:var(--BG-page);}
.cs-left-menu:hover ~ .cs-layer {filter:blur(0.3vw);}

.cs-menu {position:relative;height:100%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.3vw;}
.cs-menu a {display:flex;align-items:center;width:14vw;padding:0.6vw;text-transform:uppercase;z-index:1;font-size:0.8vw;}
.cs-menu a i {margin-right:0.7vw;display:inline-block;width:1.5vw;text-align:center;font-size:1.2vw;}
.cs-menu a:hover {color:var(--CO-blue);}
.cs-menu-link:hover {color:var(--CO-blue);}
.cs-menu-active {color:var(--CO-blue);}

.cs-submenu-left {height:100%;float:left;display:flex;flex-direction:column;gap:1vh;justify-content:center;}
.cs-submenu-left .cs-btn a:first-of-type {border-right:1px solid rgba(255,255,255,0.2);width:1.2vw;font-size:0.8vw;}

.cs-color {position:absolute;top:4vw;right:2vw;display:grid;grid-template-rows:repeat(7,1fr);grid-template-columns:repeat(14,1fr);width:30vw;height:15vh;}
.cs-color span {border-radius:0.1vw;border:0.1vw solid transparent;}



.cs-dashboard {overflow:auto;position:fixed;top:50%;left:50%;width:96vw;height:80vh;transform:translate(-50%,-50%);}
.cs-box-menu {display:grid;grid-template-columns:repeat(8,1fr);grid-auto-rows:max-content;gap:0.1vw;} 
.cs-box-menu a {
	background:var(--BG-2);
	height:15.6vh;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	transition:all .2s ease;
}
.cs-box-menu a i {font-size:1.6vw;color:var(--CO-blue);}
.cs-box-menu a span:nth-child(2) {font-size:0.6vw;letter-spacing:0.1vw;text-transform:uppercase;margin-top:0.5vw;color:#fff;}
.cs-box-menu a:hover {background:var(--BG-blue);color:#fff;}
.cs-box-menu a:hover i {color:#fff;}



/*********** SEARCH *****************/
.cs-autocomplete-list {position:relative;}
.cs-autocomplete-overflow {position:absolute;z-index:1000;min-width:100%;overflow:auto;left:0;top:0;background:var(--BG-3);}
.cs-autocomplete-overflow .cs-cell {height:1.8vw;white-space:nowrap;cursor:pointer;padding:0 0 0 0.8vw;vertical-align:middle;background:var(--BG-2);margin-bottom:0.1vh;transition:background .2s ease-in-out;}
.cs-autocomplete-overflow .cs-cell:hover {background:var(--CO-black2);color:var(--CO-white);}

.cs-form-header {position:relative;display:flex;align-items:center;height:8vh;padding:0 3vw;font-size:1.2vw;text-transform:uppercase;}
.cs-form-header span {margin-right:0.5vw;}
.cs-form-header i {font-size:1.2vw;width:1.5vw;}

.cs-form {
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	overflow:none;
	position:absolute;
	top:50%;
	left:50%;
	gap:0.1vw;
	transform:translate(-50%,-50%);
}
.cs-form-cell-title {text-transform:uppercase;font-size:0.6vw;letter-spacing:0.1vw;padding:0.2vw 0.5vw;border-left:0.1vw solid var(--C-2);}
.cs-form-cell {
	position:relative;
	background:var(--BG-1);
	flex:1;
	padding:1vw;
}
.cs-form-cell .cs-select label {font-size:1vw;}
.cs-form-cell code {font-size:0.6vw;color:var(--CO-yellow);margin-left:0.2vw;}
.cs-form-block {flex-basis:100%}
.cs-form-status {color:var(--CO-yellow);position:absolute;left:50%;transform:translateX(-50%);}

.cs-form-file {position:absolute;display:flex;align-items:center;justify-content:center;border:0.1vw dotted var(--CO-t1);text-align:center;border-radius:0.4vw;height:4.5vw;width:16vw;}
.cs-form-file img {width:10vw;}
.cs-form-file i {line-height:4.5vw;font-size:1vw;}
.cs-form-file i:hover {color:var(--CO-white);}

.cs-form-menu {margin-top:3vh;flex-basis:100%;text-align:center;}
.cs-form-menu a {}

.cs-form-input-l {
	overflow:auto;
	max-height:25vh;
	background:rgba(0,0,0,0.3);
	padding:0.5vw;
	display:flex;
	flex-direction:column;
	min-height:3vh;
	gap:0.1vw;
	border-left:0.1vw solid var(--C-2);
	font-size:0.7vw;
}
.cs-form-input-c {text-transform:uppercase;cursor:pointer;display:flex;align-items:center;min-height:3vh;padding:0 0.4vw;gap:0.1vw;}
.cs-form-input-c input {margin:0 0.5vw 0 0;}
.cs-form-input-c:hover {color:var(--CO-white);background:var(--BG);}

.cs-checkbox {
	position: relative;
	display: block;
	float: left;
	width: 18px;
	height: 18px;
	border-radius: 4px;
	background-color: #606062;
	background-image: linear-gradient(#474749, #606062);
	box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -1px 1px rgba(0,0,0,0.15);
	transition: all 0.15s ease;
}
.cs-checkbox svg {
	position: absolute;
	top: 3px;
	left: 3px;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke: #fff;
	stroke-width: 2;
	stroke-dasharray: 17;
	stroke-dashoffset: 17;
	transform: translate3d(0, 0, 0);
}
.cs-radio {
	position: relative;
	display: block;
	float: left;
	width: 18px;
	height: 18px;
	border-radius: 10px;
	background-color: #606062;
	background-image: linear-gradient(#474749, #606062);
	box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -1px 1px rgba(0,0,0,0.15);
	transition: all 0.15s ease;
}
.cs-radio:after {
	content: "";
	position: absolute;
	display: block;
	top: 6px;
	left: 6px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #fff;
	opacity: 0;
	transform: scale(0);
}
label {display:flex;gap:0.5vw;min-height:3vh;align-items:center;cursor:pointer;overflow:hidden;border-bottom:0.1vh solid var(--BR-1);}
label:last-of-type {border:0;}
input[type="checkbox"],input[type="radio"] {position: absolute;opacity: 0;}
input[type="radio"]:checked + .cs-radio {background-color: #606062;background-image:linear-gradient(145deg, #3dd3ff, #33b1db);}
input[type="radio"]:checked + .cs-radio:after {opacity: 1;transform: scale(1);transition: all 0.15s ease;}
input[type="checkbox"]:checked + .cs-checkbox {background-color:#606062;background-image:linear-gradient(145deg, #3dd3ff, #33b1db);}
input[type="checkbox"]:checked + .cs-checkbox svg {stroke-dashoffset: 0;transition: all 0.15s ease;}
label:hover {color:var(--CO-white);}


/**************************************************/
.cs-login {
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:1vw;
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:18vw;
	background:rgba(0,0,0,0.2);
	border-radius:0.2vw;
	padding:1vw;
}
.cs-login-top-title {color:var(--C-2);letter-spacing:0.5vw;font-size:1.5vw;}
.cs-login-title {text-transform:uppercase;text-align:center;font-size:0.7vw;color:var(--C-2);}
.cs-login div {display:flex;align-items:center;justify-content:center;gap:0.5vw;margin-bottom:0.3vw;}
.cs-login .cs-btn {float:none;justify-content:center;}
.cs-login-img img {width:3vw;}

.cs-popup {
	position:absolute;
	top:-100%;
	height:100%;
	width:100%;
	opacity:0;
	z-index:-1;
	overflow:hidden;
	transition:all .5s cubic-bezier(.5, .2, .2, 1.1);
	background:var(--BG-page);
}
.cs-popup-active {top:0;opacity:1;z-index:9999}
.cs-close {position:absolute;right:2.5vw;top:2.5vh;font-size:1.8vw;cursor:pointer;color:var(--CO-t2);}