@font-face {font-family:"abel";src: url('../css/fonts/Abel/Abel-Regular.ttf');}
body {margin:0;}
.ui-datepicker-calendar { display: none;}
.ems-logo {display:flex;flex-direction:column;gap:0 !important;}
.ems-logo img {margin-bottom:2vh;}
.ems-logo div:nth-child(2) {font-size:1.5vw ;margin:0;}
.ems-logo div:nth-child(3) {font-size:1.1vw ;margin:0;}
.ems-logo div:nth-child(4) {font-size:1.1vw ;margin:0;}

.ems-right {position:relative;width:72vw;float:right;}
.ems-right .cs-vlist {margin-right:0;}

.ems-data {padding:0.5vh 0;font-size:0.7vw;}
.ems-data div {margin-bottom:0.1vh;}
.ems-data .cs-box-btn {width:0.8vw}
.ems-data .cs-box-btn:first-of-type {margin-right:0.1vw;}

.ems-upload {display:flex;gap:0.3vw;align-items:center;font-size:0.6vw;text-transform:uppercase;}
.ems-upload .cs-box-btn {padding:0;height:2.8vh;font-size:0.8vw;min-width:1.6vw;justify-content:center;}

.ems-menu {display:flex;gap:0;color:#fff;position:absolute;left:0;top:50%;transform:translateY(-50%);flex-direction:column;width:23vw;height:100%;background:#32373b;justify-content:center;}
.ems-menu a {display:inline-block;position:relative;border-left:2px solid rgba(255,255,255,0.1);padding:1vh 1.5vw;margin-left:2vw;color:#fff;font-size:1.6vw;}
.ems-menu a i {font-size:0.6vw;position:absolute;top:50%;left:-0.33vw;transform:translateY(-50%)}
.ems-menu a:hover {color:var(--c-yellow);opacity:1;padding:1vh 2vw;transition:all 0.2s ease;}
.ems-menu a:hover i {font-size:1.2vw;left:-0.63vw;}

.ems-menu-total {position:absolute;right:1vw;opacity:0.5;}
.ems-menu-total span {font-size:0.8vw}
.ems-menu-total i {width:0.7vw;}
.ems-menu a.ems-act {color:var(--c-yellow);opacity:1;padding:1vh 2vw;}
.ems-menu a.ems-act i {font-size:1.2vw;left:-0.63vw}

.ems-form-excel {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:20%;height:70%;}
.ems-form-excel-title {text-align:center;text-transform:uppercase;font-size:1.1vw;}
.ems-form-excel-tool {text-align:center;margin-top:1vh;}


.ems-web-nav {
	display:flex;
	padding-top:2vh;
	border-bottom:1px solid rgba();
}
.ems-web-nav div {padding:0.5vh 0.5vw;cursor:pointer;background:rgba(0,0,0,0.1);border-right:1px solid rgba(0,0,0,0.2);}
.ems-web-nav div:hover {background:var(--c-blue);color:#fff;}
.ems-web-nav div a {padding:0 0.3vw;}
.ems-web-nav div a:hover {color:#fff;}
.ems-web-nav div:last-of-type {border:0;}

.ems-subcategory {
	display:flex;
	flex-direction:column;
	height:100%;
}
.ems-subcategory div span:first-of-type {display:inline-block;width:1.2vw;}
.ems-subcategory .cs-box-btn {width:8vw;margin-top:1vh;margin-bottom:1vh;}

.ems-submenu {
	display:grid;
	grid-template-columns:1fr 1fr 1fr 1fr;
	column-gap: 0.1vw;
	row-gap: 0.15vh;
	justify-items:stretch;
	height:100%;
}
.ems-submenu a {
	background:var(--c3);
	cursor:pointer;
	position:relative;
	display:inline-block;
	overflow:hidden;
}
.ems-submenu a span {position:absolute;display:inline-block;}
.ems-submenu a span:nth-child(1) {left:1.5vw;top:2vh;color:#fff;font-size:1.5vw;}
.ems-submenu a span:nth-child(2) {left:1.5vw;width:16vw;top:6vh;color:#fff;opacity:0.5;font-size:1vw;}
.ems-submenu a span:nth-child(3) {left:1.5vw;width:16vw;top:12vh;color:#fff;opacity:0.5;font-size:1vw;}
.ems-submenu img {position:absolute;top:0;left:0;width:100%;height:100%;opacity:0.1;}
.ems-submenu img:hover {opacity:0.5;}

.ems-dashboard-nav {margin-top:1vh;display:flex;gap:0.5vw;}
.ems-dashboard-nav a {
	display:inline-block;
	padding:1vh 1.5vw;
	box-shadow:1px 1px 1vh rgba(122,182,242,0.1);
	color:#33495e;
	background:#fff;
	border-radius:0.2vw;
}
.ems-dashboard-nav a:hover {background:var(--c-blue);color:#fff;}
.ems-dashboard-nav a.active {background:var(--c-blue);color:#fff;}

.ems-dashboard {height:75vh;display:flex;gap:1vw;position:absolute;top:50%;transform:translateY(-50%);width:100%;color:#33495e;}

.ems-graph-h-block {
        display:flex;
        position:relative;
	border-bottom:1px dotted rgba(0,0,0,0.2);
}
.ems-graph-h-block-name {width:9.5vw;font-weight:bold;letter-spacing:0.1vw;}
.ems-graph-h-block-total {position:absolute;left:0;top:50%;width:8vw;text-align:center;transform:translateY(-50%);font-size:2vw;opacity:0.5;}
.ems-graph-h-block-data {flex:1;display:flex;flex-direction:column;gap:0.2vh;padding:0.5vh 0;}

.ems-graph-h-info {display:flex;flex-direction:column;gap:0.2vh;position:absolute;bottom:2vh;font-size:0.8vw;}
.ems-graph-h-info div { padding-left:0.3vw }

.ems-graph-h-grid {display:flex;width:46vw;height:45vh;position:absolute;top:10vh;left:50%;transform:translateX(-50%);}
.ems-graph-h-grid .line {border-right:1px dotted rgba(0,0,0,0.2);width:20%;position:relative;}
.ems-graph-h-grid .line:first-of-type {border-right:1px solid rgba(0,0,0,0.3);}
.ems-graph-h-grid .block span {position:absolute;bottom:-2.5vh;right:-0.8vw;color:rgba(0,0,0,0.5);}

.ems-graph-h-layer {height:2vh;}
.ems-graph-h-line {height:2vh;position:relative;width:100%;}
.ems-graph-h-line-fill {position:absolute;top:0;left:0;height:100%;}
.ems-graph-h-line-total {position:absolute;left:-1vw;top:50%;transform:translateY(-50%);}
.ems-graph-h-line-persen {position:absolute;right:-2vw;top:50%;transform:translateY(-50%);}

.ems-graph-1 {
	position:relative;
	height:70vh;
	display:flex;
	flex-direction:column;
	border-radius:0.5vw;
	overflow:hidden;
	background:#fff;
	box-shadow:1px 1px 1vh rgba(122,182,242,0.1);
	gap:4vh;
	width:40vw;
	padding:2vw;
}
.ems-graph-1-layer {
	display:flex;
	height:48vh;
	width:100%;
	position:relative;
	gap:0.5vw;
}
.ems-graph-1-info {display:flex;flex-direction:column;gap:1vh;}
.ems-graph-1-info div {display:flex;align-items:center;gap:0.5vw;align-items:center;}
.ems-graph-1-info span {display:inline-block;width:1.5vw;height:1.5vw;float:left;}
.ems-graph-1-info span:last-of-type {width:20vw;height:1vw;}
.ems-graph-1-line {position:absolute;margin-top:auto;height:42.2vh;width:94%;right:0;}
.ems-graph-1-line div.line {height:25%;position:relative;border-top:1px dotted rgba(0,0,0,0.1);}
.ems-graph-1-line div.text {position:absolute;}
.ems-graph-1-line div.block {border-right:1px solid rgba(0,0,0,0.1);height:100%;width:1.5vw;position:relative;}
.ems-graph-1-line div.block i {position:absolute;top:-0.45vw;right:0;}
.ems-graph-1-line div.block span {position:absolute;top:-0.6vw;right:2vw;color:rgba(0,0,0,0.5);}
.ems-graph-1-line div.line:last-of-type {border-right:0;height:0;}

.ems-graph-1-header {font-size:1.5vw;position:relative;}
.ems-graph-1-header span {position:absolute;color:rgba(0,0,0,0.2);font-size:1.2vw;right:0.5vw;top:0;}
.ems-graph-1-header i {margin-right:0.3vw;}
.ems-graph-1-total {position:absolute;top:-6vh;right:0;opacity:0.6;}
.ems-graph-1-total b {font-size:1.4vw;}
.ems-graph-1-v {
	position:relative;
	text-align:center;
	height:100%;
	margin:auto;
	display:flex;
	flex-direction:column;
	gap:1vh;
}
.ems-graph-1-title {padding:0;}
.ems-graph-1-title span {display:block;font-weight:bold;letter-spacing:0.1vw;}
.ems-graph-1-v-layer {
	position:relative;
	height:45vh;
	display:flex;
}
.ems-graph-1-v-name {
	position:absolute;
	bottom:1vh;
	color:#fff;
	font-size:1vw;
	left:1.5vw;
	width:15vw;
	z-index:4;
	transform:rotate(-90deg);
	transform-origin:left bottom;
	text-align:left;
}
.ems-graph-1-v-fill {
	position:absolute;
	bottom:0;
	left:50%;
	transform:translate(-50%);
	width:100%;
	height:100%;
	opacity:0.2;
}
.ems-graph-1-v-bar {
	margin-top:auto;
	position:relative;
	width:2vw;
	z-index:99;
	box-shadow: 10px 0 5px -2px rgba(0,0,0,0.2);
}
.ems-graph-1-v-bar span {position:absolute;width:100%;top:-2.5vh;left:50%;transform:translateX(-50%);font-size:1vw;}
.ems-graph-1-v-fill-total {
	position:absolute;
 	top:-4.5vh;
	left:50%;
	transform:translate(-50%);
	color:#000;
}
.ems-graph-1-v-fill-total span {color:rgba(0,0,0,0.5);display:block;}


.ems-table-link {text-align:center;cursor:pointer;}
.ems-table-link:hover {background:#fff;}
.ems-chart-table {
	position:relative;
	height:70vh;
	display:flex;
	flex-direction:column;
	border-radius:0.5vw;
	overflow:hidden;
	background:#fff;
	box-shadow:1px 1px 1vh rgba(122,182,242,0.1);
	width:46vw;
	padding:2vw;
}
.ems-chart-table-layer {width:100%;margin-left:auto;margin-right:auto;}
.ems-chart-table table {border-spacing:1;font-size:0.75vw;}
.ems-chart-table td {padding:0.5vh 0.3vw;border:0;background:#eef5fd;}
.ems-chart-table .thead {font-weight:bold;margin-top:3vh;}
.ems-chart-table .tbody {overflow:auto;height:60vh;}

.ems-chart-table-header {font-size:1.5vw;position:relative;}
.ems-chart-table-header span {position:absolute;color:rgba(0,0,0,0.2);font-size:1.2vw;right:0.5vw;top:0;}
.ems-chart-table-header i {margin-right:0.3vw;}

.ems-graph-table {border-spacing:0;width:100%;}
.ems-graph-table tr:first-of-type td {text-align:center;text-transform:uppercase;color:rgba(255,255,255,0.5);}
.ems-graph-table tr:last-of-type td {color:#fff;}
.ems-graph-table td {padding:0.2vh 0;border-bottom:0.1vw dotted rgba(255,255,255,0.1);}
.ems-graph-table td:nth-child(2) {width:7vw;}
.ems-graph-table td:nth-child(3) {width:7vw;}
.ems-graph-table td:nth-child(4) {width:2vw;}
.ems-graph-table td:nth-child(6) {width:2vw;}

.ems-detail {width:80%;position:absolute;left:50%;transform:translate(-50%);top:10vh;}
.ems-detail-title {font-size:1.4vw;text-align:center;margin-bottom:1vw;}
.ems-detail .cs-cell {border-bottom:0.1vw dotted rgba(255,255,255,0.1);border-right:0.1vw dotted rgba(255,255,255,0.1);}
.ems-detail .cs-cell:first-of-type {text-align:right;}
.ems-detail .cs-cell:last-of-type {color:#fff;border-right:0;}

.cs-container {
	height:100%;
	position:relative;
	display:flex;
	flex-direction:row;
	gap:1vw;
}
.cs-panel input {min-width:3vw;}
.cs-panel-info span {display:inline-block;width:3vw;margin-bottom:0.4vh;}

.cs-left {width:20vw;}
.cs-center {display:flex;justify-content:center;border:1px solid rgba(255,255,255,0.2);background:rgba(255,255,255,0.3);padding:1vw;overflow:auto;width:45vw;}
.cs-right {position:relative;}

.cs-lnav {display:grid;gap:0.5vw;}

.cs-nav {display:flex;gap:0.5vw;justify-content:center;width:100%;}
.cs-nav div {
	display:flex;
	justify-content:center;
	flex-direction:column;
	text-transform:uppercase;
	text-align:center;
	width:14vw;
	height:15vh;
	position:relative;
	border-radius:0.5vw;
	box-shadow:var(--BS);
	background:var(--BG-cell);
	gap:0.5vw;
	cursor:pointer;
}
.cs-nav div span:last-of-type {font-size:1.5vw;color:#fff;}
.cs-nav div a {position:absolute;bottom:1vh;font-size:0.6vw;}
.cs-nav div a:first-of-type {left:1vw;}
.cs-nav div a:last-of-type {right:1vw;}
.cs-nav div:hover {opacity:0.5;}

.cs-tpl {
	margin-left:auto;
	margin-right:auto;
	position:relative;
	font:9pt 'abel';
	text-shadow:none;
	color:#000;
	width:8.27in;
	height:11.69in;
	background-color:#fff;
	background-image:url(../asset/images/cop-surat.png);
	background-size:cover;
	background-repeat:no-repeat;
	display:inline-block;
}
.cs-tpl-content {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:7.4in;
	height:10in;
}
.cs-info {width:50vw;}
.cs-info a {font-size:3.2vw;cursor:pointer;position:absolute;left:-4vw;top:0;}
.cs-table {display:table;}
.cs-row {display:table-row;}
.cs-cell {display:table-cell;vertical-align:top;padding:3px 6px 0px 0px;border-bottom:1px solid rgba(0,0,0,0.3);}

.cs-tpl-cell {position:absolute;}
.cs-tpl-title {text-transform:uppercase;font-size:13pt;text-align:center;margin-top:1.3in;font-weight:bold;}
.cs-tpl-no {text-transform:uppercase;font:11pt 'mono';text-align:center;}
.cs-tpl-p0 {position:absolute;top:2.1in;left:0.5in;width:40%;display:flex;flex-direction:column;}
.cs-tpl-p0 div {display:flex;}
.cs-tpl-p0 div div:first-of-type {width:0.8in;}
.cs-tpl-data {margin-left:0.5in;margin-top:0.1in;width:88%;}
.cs-tpl-data .cs-table {border-top:1px solid #000;border-left:1px solid #000;}
.cs-tpl-data .cs-row-edit:hover {background:rgba(0,0,0,0.2);cursor:pointer;}
.cs-tpl-data .cs-cell {border-bottom:1px solid #000;border-right:1px solid #000;}
.cs-tpl-data .cs-row-space .cs-cell {border-bottom:0;}
.cs-tpl-data .cs-row-bottom .cs-cell {border-top:1px solid #000;}
.cs-tpl-date {position:absolute;top:2.1in;right:0.5in;}
.cs-tpl-p1 {margin-left:0.5in;width:88%;}
.cs-tpl-p2 {position:absolute;bottom:2.7in;left:0.5in;width:88%;}
.cs-tpl-hormat {position:absolute;bottom:2in;left:0.5in;width:88%;}
.cs-tpl-ttd {position:absolute;bottom:1.2in;left:0.5in;width:88%;}
.cs-tpl-note {position:absolute;font-size:9pt;left:0.5in;bottom:1.2in;}
.cs-tpl-qrcode {position:absolute;left:0.36in;bottom:0.2in;}
.cs-tpl-cop img {position:absolute;left:0.5in;bottom:1.4in;width:5vw;transform:rotate(-5deg);}

.cs-rightlist {
	overflow:auto;
	font-size:0.7vw;
	display:flex;
	flex-direction:column;
	gap:0.5vw;
}
.cs-rightlist a:hover { color:#fff; }

.cs-report {width:50vw;}
.cs-report .cs-cell {padding:0.5vh 0.5vw;font-size:1vw;color:#fff;border-bottom:0.1vh solid rgba(255,255,255,0.05);}
.cs-report .cs-row:first-of-type {background:rgba(0,0,0,0.1);}