@font-face {font-family:"robotoix";src: url('../css/fonts/RobotoCondensed-Regular.ttf');}
@font-face {font-family:"roboto";src: url('../css/fonts/Abel/Abel-Regular.ttf');}
@font-face {font-family:"flex";src: url('../css/fonts/Comfortaa-Regular.ttf');}

:root {
	--text:#3f5266;
	--c11:#006fd3;
	--c1:linear-gradient(90deg,#1a4c70 0, #2399ae 100%);
	--c2:#697683;
	--c3:rgba(0,0,0,0.8);
	--c4:rgba(105,118,131,0.3);
	--c5:rgba(0, 0, 0,0.05);
	--c6:rgba(0, 0, 0,0.2);
	--c-hover:#ffffcc;
	--c-white:#ffffff;
	--c-green:#95c000;
	--c-blue:#006fd3;
	--c-yellow:#FFCC00;
	--c-orange:#f7941e;
	--c-red:#cd3d2e;

	--CO1:rgba(0, 92, 170);
	--BG-body:linear-gradient(0deg,#151617 0, #27282C 100%);
	--BG-page:#005caa;
	--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);
	--BG-yellow:linear-gradient(to bottom,#FFA534 0%,rgba(255,82,33,0.7) 100%);
	--BR-1:rgba(255,255,255,0.03);
	--BR-2:#3D414D;
	--BR-3:#424750;
	--c-white:#ffffff;
	--CO-orange:#ea700d;
	--CO-TEXT:rgba(0,0,0,0.8);
	--CO-t1:rgba(0,0,0,0.5);
	--CO-t2:#2b3267;
	--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.9vw "roboto";margin:0;width:100vw;height:100vh;color:var(--text);background:#eef5fd;}
a {text-decoration:none;}
select,input[type=number],input[type=text],input[type=date],input[type=password],textarea {
	border:0;
	outline:0;
	padding:0 0.5vw;
	height:3.4vh;
	display:flex;
	align-items:center;
	border-radius:5px;
	border-width:1px;
	border-style:solid;
	border-color:transparent;
	font-size:1vw;
	border-color:var(--c4);
}
select:invalid,select option[value=""] {color:rgba(0,0,0,0.5);}
input:focus,textarea:focus,select:focus {outline:none;border:1px solid var(--c-blue);}
input::placeholder {text-transform:lowercase;color:var(--c4);font-size:0.8vw;}
textarea {padding:0.5vw;min-height:10vh;}
select option {padding:0;}
input[type=month] {font-size:0.8vw;}
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;
	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;
	overflow:hidden;
}
.cs-bg {position:absolute;z-index:-1;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0.05;}
.cs-layer {display:flex;gap:0;flex-direction:column;}
/*** HEADER ****/
.cs-page-header {position:relative;height:7vh;display:flex;flex-direction:row;align-items:center;background:var(--c1);box-shadow:0 1px 5px rgba(0,0,0,0.6);z-index:99;}
.cs-page-header-title {display:flex;flex-direction:row;gap:1vw;align-items:center;font:1.4vw 'flex';margin-left:2vw;color:#fff;}
.cs-page-header-title div i {font-size:2vw;color:rgba(255,255,255,0.3);}
.cs-page-header-title b {color:var(--c-blue);font-weight:normal;}
.cs-page-header-info {margin-left:auto;color:#fff;margin-right:5vw;display:flex;flex-direction:row;gap:1vw;align-items:center;font-size:0.8vw;text-transform:capitalize;border-radius:0.3vw;height:5vh;padding:0 1vw;}
.cs-page-header-info .cs-cal {display:flex;flex-direction:row;gap:0.5vw;align-items:center;}
.cs-page-header-info .cs-cal div:first-of-type {font:2.2vw 'abel';}
.cs-page-header-info .cs-cal div:last-of-type span {display:block;}
.cs-page-header-info .cs-user b {font-weight:normal;text-transform:capitalize;}
.cs-page-header-info .cs-user i {margin-right:0.3vw;}

.cs-logout {position:absolute;right:0;height:100%;width:4vw;background:rgba(0,0,0,0.2);}
.cs-logout a {font-size:2vw;padding:0.8vw;}


.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-user-tool {display:flex;gap:1vw;margin-top:0.3vh;}
.cs-user-tool a {display:inline-block;text-transform:uppercase;font-size:0.7vw;color:var(--c-yellow);}
.cs-user-tool a:hover {color:#fff;}
/*** CONTENT ***/
.cs-page-content {position:relative;height:87vh;margin:0 2vw;}
/*** FOOTER ***/
.cs-page-footer {position:relative;height:6.2vh;color:#fff;background:var(--c1);}
.cs-page-copy {position:absolute;right:2vw;bottom:1vw;font-size:0.7vw;letter-spacing:0.03vw;}
.cs-page-logo-text {position:absolute;z-index:99;left:2vw;top:50%;transform:translateY(-50%);font-size:0.8vw;text-transform:uppercase;}
.cs-page-logo-text img {width:1.6vw;}

.cs-page-logo { position:absolute;top:50%;left:50%;z-index:0;transform:translate(-50%,-50%);}
.cs-page-logo img {width:15vw;opacity:0.08;}
.cs-page-title {
	position:absolute;letter-spacing:0.15vw;left:50%;top:50%;transform:translate(-50%,-50%);z-index:0;font-size:1.4vw;color:var(--c-white);
}
.cs-page-subtitle { 
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	left:4.5vw;
	z-index:0;
	text-transform:uppercase;
	letter-spacing:0.1vw;
	font-size:0.7vw;
}
.cs-page-content-title {
	position:absolute;top:50%;left:2vw;transform:translateY(-50%);z-index:2;color:var(--c-white);
	font-size:1.6vw;letter-spacing:0.15vw;text-transform:uppercase;
}


.cs-title {position:relative;z-index:1;display:inline-flex;flex-direction:row;align-items:center;color:var(--c-white);}
.cs-title span {font-size:1.5vw;text-transform:uppercase;margin-right:1vw;}
.cs-title i {font-size:2.5vw;}
.cs-title span b {font-weight:normal;color:var(--c-blue);}

.cs-open {cursor:pointer;}

.cs-dashboard {float:right;}

/*********** BOXES ******************/
.cs-grid {display:grid;gap:0.5vw;}
.cs-grid-3 {grid-template-columns:repeat(3,1fr);}
.cs-grid-4 {grid-template-columns:repeat(4,1fr);}
.cs-grid-5 {grid-template-columns:repeat(5,1fr);}

.cs-box { overflow:auto;} 
.cs-box a {display:flex;padding:1.5vw;flex-direction:column;position:relative;border-radius:1vw;box-shadow:var(--BS);background:var(--BG-cell);gap:0.5vw;transition:all .5s ease;}
.cs-box a i {font-size:2vw;}
.cs-box a span:nth-child(2) {font-size:3vw;position:absolute;right:1vw;top:0;opacity:0.2;}
.cs-box a span:nth-child(3) {font-size:0.9vw;text-transform:uppercase;margin-top:0.5vw;color:var(--CO-t2);}
.cs-box a span:nth-child(4) {font-size:0.8vw;}
.cs-box a:hover {background:var(--BG-GR-blue);color:var(--c-white);}
.cs-box a:hover span:nth-child(3) {color:var(--c-white);}


/*********** BUTTON *****************/
.cs-btn {font-size:1.6vw;cursor:pointer;}
.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(--c-blue);text-shadow:var(--TS-blue);border:0.1vw solid var(--CO-blue);}

.cs-box-btn {
	position:relative;
	display:flex;
	gap:0.35vw;
	align-items:center;
	text-transform:capitalize;
	height:3.5vh;
	padding:0 1vw;
	cursor:pointer;
	transition:padding 0.3s ease;
	border-radius:0.15vw;
	font-size:0.8vw;
	color:#fff;
}
.cs-box-btn:after {
	content:'';
	position:absolute;
	right:-0.1vw;
	bottom:-0.1vw;
	width:0;
	height:0;
	transition:.25s ease all;
	border-radius:0.2vw;
}
.cs-box-btn:before {
	content:'';
	position:absolute;
	left:-0.1vw;
	top:-0.1vw;
	width:0;
	height:0;
	transition:.25s ease all;
	border-radius:0.2vw;
}
.cs-btn-gray {background:#ccc;color:#fff;}
.cs-btn-red {background:var(--c-red);color:#fff;}
.cs-btn-blue {background:var(--c-blue);color:#fff;}
.cs-btn-lightblue {background:#06b4fe;color:#fff;}
.cs-btn-yellow {background:var(--c-yellow);color:#000;}
.cs-btn-green {background:#67b930;color:#fff;}

.cs-box-btn:hover {opacity:0.8;}

/*******************************************/

/*** SELECT ***/
.cs-select {display:flex;flex-direction:column;position:relative;height:3.5vh;}
.cs-option {
	padding:0 3vw 0 1vw;
	min-height:3.5vh;
	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:0.2vw;
	text-transform:uppercase;
	font-size:0.75vw;
	color:rgba(255,255,255,0.7);
}
.cs-option:hover {background:var(--CO-black2);color:var(--c-white);}
.cs-select:focus .cs-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, #fff);
	position:relative;
	border-radius:0.2vw;
	border-width:0.1vw;
	border-style:solid;
	border-color:transparent;
}
.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:table;width:100%;}
.cs-row {display:table-row}
.cs-cell {display:table-cell}

/**** VLIST ****/
.cs-vlist-layer {display:flex;position:relative;background:#fff;flex-direction:column;}
.cs-vlist {position:relative;overflow:hidden;width:100%;border-radius:0.2vw;background:#fff;}
.cs-vlist-overflow {overflow:auto;}
.cs-vlist-rows .cs-cell,.cs-vlist-head .cs-cell {
	font-size:0.9vw;
	vertical-align:middle;
	height:3vh;
	text-shadow:none;
	padding:0 0.2vw;
	border-right:0.1vh solid var(--c4);
	border-bottom:0.1vh solid var(--c4);
	position:relative;
}
.cs-vlist-rows .cs-cell:first-of-type {text-align:center;}
.cs-vlist-rows .cs-cell:first-of-type .cs-box-btn {padding:0;height:2.8vh;font-size:0.8vw;min-width:1.6vw;justify-content:center;}
.cs-vlist-rows .cs-row:hover {background:var(--c-hover);color:#000;}
.cs-vlist-rows .cs-cell img {border-radius:0.2vw;}
.cs-vlist-head .cs-cell {text-transform:uppercase;color:#fff;background:var(--c2);}
.cs-vlist-head .cs-cell {font-size:0.7vw;letter-spacing:0.1vw;height:3vh;}
.cs-vlist-head .cs-cell:last-of-type {border-right:0;}
.cs-vlist-rows .cs-cell:last-of-type {border-right:0;}
.cs-vlist-nav-limit {
	display:flex;
	gap:1vw;
	padding:0;
	text-transform:uppercase;
	font-size:0.7vw;
	position:relative;
	background:var(--c2);
	height:5vh;
}
.cs-vlist-nav-limitx:before {
	--f: .3vw; /* control the folded part */
	--r: .8vw; /* control the cutout */
	content:'page';
	position: absolute;
	left: 0.8vw;
	top: calc(-1*var(--f));
	padding: .2vw;
	border: solid #0000;
	border-width: 0 0 var(--r) calc(2*var(--f));
	height:4vh;
	width:2vw;
	text-transform:lowercase;
	color:rgba(255,255,255,0.5);
	text-align:center;
	font:0.7vw 'suse';
	background: 
	radial-gradient(50% 100% at bottom,#0005 98%,#0000 101%) 
	0 0/calc(2*var(--f)) var(--f) no-repeat border-box;
	background-color: #BF4D28;
	border-radius: var(--f) var(--f) 0 0;
	clip-path: polygon(0 0,100% 0,100% calc(100% - var(--r)),calc(50% + var(--f)) 100%,calc(2*var(--f)) calc(100% - var(--r)),calc(2*var(--f)) var(--f),0 var(--f));
}
.cs-vlist-nav-limit div {display:flex;gap:0.3vw;align-items:center;margin:auto;}
.cs-vlist-nav-limit a {width:1.5vw;background:#fff;height:1.5vw;display:flex;align-items:center;justify-content:center;color:#000;border-radius:0.2vw;text-align:center;position:relative;}
.cs-vlist-nav-limit a:hover {color:#fff;background:var(--c-green);}
a.active {color:#fff;background:var(--c-green);}

.cs-bar-page {display:flex;flex-direction:column;align-items:center;gap:0.5vw;border:1px solid yellow;}
.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 {display:flex;gap:0.5vw;font-size:0.7vw;}
.cs-perpage .active {border:0;}
.cs-perpage a:hover {color:var(--c-blue);}

.cs-curpage {display:none;top:1vh;left:0;font-size:2vw;font-weight:bold;display:inline-block;width:2.9vw;text-align:center;opacity:0.2;}

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

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

.cs-gray {color:var(--CO-t1)}
.cs-gray:hover {color:var(--c-blue);text-shadow:var(--TS-blue);}
.cs-blue {color:#006fd3;}
.cs-b-blue {background:var(--BG-GR-blue);color:var(--CO-t2);}
.cs-orange {color:var(--CO-orange);}
.cs-yellow {color:var(--c-yellow)}
.cs-b-yellow {background:#f9b04b;color:#fff;}
.cs-green {color:var(--c-green)}
.cs-b-green {background:var(--c-green);color:var(--c-white);}
.cs-b-black {background:var(--CO-black1)}
.cs-white {color:var(--c-white)}
.cs-red {color:var(--CO-red)}
.cs-act-blue {background:var(--active);color:var(--c-white);}

.cs-menu-nav {color:var(--c-yellow);font-size:1.6vw;margin-left:1vw;}
.cs-menu-link {font-size:1vw;display:inline-block;cursor:pointer;position:absolute;right:1vw;top:50%;color:var(--c-yellow);transform:translateY(-50%);z-index:999;}
.cs-left-menu {position:absolute;display:inline-block;top:0;left:-50%;z-index:1;width:51%;height:100%;transition:all 0.3s ease;}
.xcs-left-menu:hover {left:0;background:var(--c1);}

.cs-active-menu {left:0;background:var(--c1);}
.cs-active-menu ~ .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:30vw;letter-spacing:0.1vw;padding:0.6vw;text-transform:uppercase;z-index:1;font-size:1.2vw;color:#fff;}
.cs-menu a i {margin-right:0.7vw;display:inline-block;width:1.5vw;text-align:center;font-size:1.2vw;color:rgba(255,255,255,0.3);}
.cs-menu a:hover {color:var(--c-yellow);}
.cs-menu-active {color:var(--c-yellow);}

.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;}

/*********** SEARCH *****************/
.cs-panel {z-index:1;height:7vh;display:flex;align-items:center;gap:0.2vw;justify-content:right;}
.cs-panel-cell {position:relative;}
.cs-panel-cell:first-of-type {height:100%;font-weight:bold;position:absolute;left:0;display:flex;align-items:center;justify-content:center;font-size:1.3vw;}
.cs-panel select,.cs-panel input {font-size:0.9vw;min-width:12vw;height:3.5vh;border-color:var(--c4);border-width:1px;border-radius:5px;}
.cs-panel code {font-size:0.6vw;display:none;}
.cs-panel input::placeholder {text-transform:lowercase;font-size:0.9vw;}
.cs-panel-cell .cs-select {min-width:10vw;}

.cs-panel-info {position:absolute;right:1vw;height:5vh;width:20vw;font-size:0.6vw;}

.cs-autocomplete {background:#ffffcc !important;}
.cs-autocomplete-list {position:absolute;z-index:1000;min-width:100%;overflow:auto;left:0;top:2.5vh;border:1px solid rgba(0,0,0,0.15);border-radius:0 0 5px 5px;background:#e7effc;}
.cs-autocomplete-icon {position:absolute;right:0.2vw;top:50%;transform:translateY(-50%);font-size:0.8vw;color:#000;}
.cs-autocomplete-list .cs-table {width:100%;}
.cs-autocomplete-list .cs-cell {height:1.8vw;white-space:nowrap;cursor:pointer;padding:0 0.8vw;vertical-align:middle;border:0;border-top:1px solid rgba(0,0,0,0.1);transition:background .3s ease-in-out;}
.cs-autocomplete-list .cs-cell:hover {background:var(--CO-black2);color:var(--c-white);}


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

.cs-form {
	display:flex;
	align-content:center;
	justify-content:top;
	align-items:stretch;
	flex-wrap:wrap;
	flex-direction:column;
	height:79%;
	width:94%;
	overflow:auto;
	position:absolute;
	top:50%;
	left:50%;
	gap:2vh;
	transform:translate(-50%,-50%);
	border-radius:0.2vw;
}
.cs-form-cell {position:relative;padding:2vh 2vw;border-radius:0.2vw;display:flex;align-content:center;flex-direction:column;background:rgba(0,0,0,0.1);border:1px solid rgba(255,255,255,0.1);}
.cs-form-cell-title {text-transform:uppercase;letter-spacing:0.05vw;font-size:1vw;color:var(--c-white);width:12vw;display:flex;}
.cs-form-cell-title i {position:absolute;color:var(--c-yellow);left:1vw;top:50%;font-size:0.8vw;transform:translateY(-50%)}
.cs-form-cell .cs-select label {font-size:1vw;}
.cs-form-cell code {font-size:0.6vw;color:var(--c-orange);}
.cs-form-cell .remark {font-size:0.6vw;color:var(--c-yellow);display:block;}
.cs-form-block {flex-basis:100%;height:0;}
.cs-form-status {color:var(--c-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(--c-white);}

.cs-form-menu {position:absolute;left:50%;transform:translateX(-50%);text-align:center;bottom:3vh;}
.cs-form-menu div {margin:0.5vw;}

.cs-form-input-l {
	overflow:auto;
	background:var(--c-white);
	border-radius:0.2vw;
	display:flex;
	flex-direction:column;
	min-height:3.5vh;
	min-width:11.3vw;
	padding:1vh 1vw;
	gap:0.1vw;
}
.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(--c-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:1px solid var(--c6);color:var(--c2);}
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:#000;}


/**************************************************/

.cs-form-login {
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:1vw;
	position:absolute;
	top:45%;
	left:50%;
	transform:translate(-50%,-50%);
	width:25vw;
	border-radius:0.3vw;
	padding:2vw;
}
.cs-form-login div {display:flex;align-items:center;justify-content:center;gap:1vw;margin-bottom:0.3vw;color:var(--CO-t2);}
.cs-form-login div img {height:7vh;border-radius:0.2vw;}
.cs-form-login-title {text-transform:uppercase;width:22vw;text-align:center;}
.cs-form-login .cs-box-btn {float:none;justify-content:center;}
.cs-login-img {width:20vw;}

.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(--c1);
}
.cs-popup-active {top:0;opacity:1;z-index:9999}
.cs-close {position:absolute;right:2.5vw;top:2.5vh;font-size:2vw;cursor:pointer;color:var(--c-yellow);}
.cs-close:hover {opacity:0.5;}