.dt-form input,.dt-form select,.dt-form textarea {font:0.9vw 'mono';}
.ids-layer {position:relative;width:100%;height:100%;overflow:hidden;z-index:-1;}
.img-preview {position:absolute;top:50%;transform:translateY(-50%);right:2vw;}

.ids-grid {display:grid;gap:0.5vw;}
.grid-2 {grid-template-columns:repeat(2,1fr);}
.grid-3 {grid-template-columns:repeat(3,1fr);}
.grid-4 {grid-template-columns:repeat(4,1fr);}
.grid-5 {grid-template-columns:repeat(5,1fr);}
.ids-grid .dt-box-btn {flex-direction:column;padding:1vw;min-height:5vw;}
.ids-grid .dt-box-btn i {font-size:2vw;}
.ids-grid .dt-box-btn span {width:100%;text-align:center;}


.ids-dashboard {height:100%;display:grid;padding:1vw 0;grid-template-columns:repeat(2,1fr);align-items:stretch;gap:1vw;grid-auto-rows:minmax(min-content, max-content)}
.ids-box-menu { overflow:auto;height:75vh;} 
.ids-box-menu 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;}
.ids-box-menu a i {font-size:2vw;}
.ids-box-menu a span:nth-child(2) {font-size:3vw;position:absolute;right:1vw;top:0;opacity:0.2;}
.ids-box-menu a span:nth-child(3) {font-size:0.9vw;text-transform:uppercase;margin-top:0.5vw;color:var(--CO-t2);}
.ids-box-menu a span:nth-child(4) {font-size:0.8vw;}
.ids-box-menu a:hover {background:var(--BG-GR-blue);color:var(--CO-white);}
.ids-box-menu a:hover span:nth-child(3) {color:var(--CO-white);}


.ids-t {text-transform:uppercase;color:rgba(255,255,255,0.7);margin-bottom:0.6vh;}
.ids-ts1 {}
.ids-ts2 {}
.ids-ti {}

.dt-y {color:var(--CO-yellow);}
.dt-b {color:var(--CO-blue);}
.dt-g {color:var(--CO-green);}
.dt-o {color:var(--CO-blue);}

.ids-database-menu {display:grid;grid-template-rows:repeat(5,1fr);grid-template-columns:repeat(5,1fr);align-items:center;margin-top:1vw;margin-left:2vw;margin-right:2vw;}
.ids-database-menu a {
	display:inline-block;
	text-align:center;
	position:relative;
	height:5vw;
	padding:1vw;
	text-align:left;
	text-transform:uppercase;
	color:rgba(255,255,255,0.3);
	font-size:0.7vw;
	border-right:0.1vw dotted rgba(255,255,255,0.3);
	border-bottom:0.1vw dotted rgba(255,255,255,0.3);
}
.ids-database-menu .icon {font-size:3vw;}
.ids-database-menu-code {font-size:1vw;position:absolute;left:1vw;top:0.7vw;}
.ids-database-menu-code span {font-size:2vw;opacity:0.6;}
.ids-database-menu-name {
	position:absolute;
	right:1vw;
	bottom:1vw;
	text-transform:uppercase;
	font-size:1vw;
	text-align:right;
}
.ids-database-menu-total {position:absolute;right:1vw;color:rgba(255,255,255,0.5);}
.ids-database-menu-total span {font-size:0.8vw;}
.ids-database-menu a:hover {color:#fff;background:rgba(0,0,0,0.3);}



.ids-btn {
	position:relative;
	display:flex;
	flex-direction:row;
	gap:0.3vw;
	cursor:pointer;
	text-transform:uppercase;
}
.ids-btn a {
	display:flex;
	flex-direction:column;
	text-align:center;
	align-items:center;
	justify-content:center;
	border:0.1vw dotted rgba(255,255,255,0.2);
	border-radius:0.4vw;
	font-size:0.7vw;
	width:5vw;
	height:7vh;
}
.ids-btn-input input {background:rgba(0,0,0,0.2);border-radius:0.3vw;}
.ids-btn a span {font-size:1.6vw;padding:0.5vh 0;}
.ids-btn a:hover {background:rgba(0,0,0,0.3);color:#fff;}



.ids-rfid-tap {position:absolute;font-size:1vw;display:inline-block;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;}
.ids-rfid-tap img {margin-bottom:1vw;}

/********** NEW CARD *******************/
.ids-newcard {overflow:hidden;display:flex;flex-direction:row;gap:1.5vw;justify-content:center;}
.ids-newcard-form {display:flex;flex-direction:column;gap:3vh;overflow:hidden;width:35vw;}
.ids-newcard-preview {text-shadow:none;}
.ids-newcard-nav {display:flex;flex-direction:column;gap:1.5vw;}
/***************************************/
.ids-tool-menu {width:100%;position:relative;}
.ids-tool-menu code {display:block;margin-top:0.5vh;font-size:0.6vw;text-transform:lowercase;color:var(--CO-yellow);}
.ids-tool-menu input {border:0.1vw dotted rgba(255,255,255,0.2);background:rgba(0,0,0,0.1);border-radius:0.3vw;padding:0 0.5vw;color:#fff;font-size:1.5vw;}
.ids-tool-menu .input-priod {width:7vw;margin-right:0.7vw;height:5vh;text-align:center;}
.ids-tool-menu .input-area {width:10vw;height:5vh;text-align:center;}
.ids-tool-menu .input-employee {width:80%;height:5vh;}
.ids-tool-menu .input-price {width:50%;height:5vh;text-align:right;}
.ids-tool-menu .color {opacity:0.2;}
.ids-tool-menu .color:hover {opacity:1;}
.ids-tool-menu .color-on {opacity:1;}
.ids-tool-menu .employee-btn {position:absolute;right:1vw;top:50%;transform:translateY(-50%);font-size:1.6vw;display:flex;gap:0.5vw}

.ids-tool {overflow:hidden;display:flex;flex-direction:column;gap:1vw;position:relative;}
.ids-tool-menu-title {text-transform:uppercase;color:#fff;margin-bottom:0.7vh;}


.ids-camera-layer {position:relative;left:50%;top:50%;transform:translate(-50%,-50%);width:1280px;height:720px;overflow:hidden;z-index:1;}
.ids-camera-layer video {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid red;z-index:-3;object-fit:fill;}
.ids-cam-select {
	width:calc(5.58cm * 2);
	height:calc(7.62cm * 2);
	border:5px outset red;
}
#photo {
	position:absolute;
	top:0;
	right:0;
	width:5.58cm;
	height:7.62cm;
	border:10px ridge rgb(139,69,19,0.5);
}

.dt-bb {color:#fff;background:var(--BG-GR-blue);}
.card-images {position:relative;overflow:hidden;color:#000;background:#fff;width:calc(56mm * 2);height:calc(87.7mm * 2);border:0;}
.card-images-behind {position:absolute;top:0;z-index:-1;border:1px solid red;overflow:hidden;color:#000;background:#fff;width:calc(56mm * 2);height:calc(87.7mm * 2);border:0;}
.card-tmp {display:inline-block;width:100%;height:100%;overflow:hidden;border:0;}

.card-display {display:flex;flex-direction:row;justify-content:center;align-items:center;gap:2vw;margin-top:2vw;width:100%;}
.card-display a {border-style:solid;border-width:0.5vw;border-radius:1vw;width:25vw;height:70vh;display:flex;justify-content:center;align-items:center;font-size:2vw;}
.card-display:hover {color:#fff;}
.card-design {position:relative;margin-left:2vw;margin-right:2vw;height:80vh;overflow:auto;}
.card-design-tools {
	position:absolute;
	top:0;
	background:rgba(0,0,0,0.2);
	width:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	height:5vh;
}
.card-design-tools a {border-right:0.1vw dotted rgba(255,255,255,0.2);text-align:center;width:3vw;cursor:pointer;}
.card-design-tools a:last-of-type {border:0;}
.card-design-tools i {font-size:1.5vw;}
.card-design-set {
	position:absolute;
	top:10vh;
	left:0;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:0.3vw;
	z-index:10;
}
.card-design-set a {display:flex;width:3vw;background:rgba(0,0,0,0.2);text-align:center;height:5vh;}
.card-design-set i {font-size:1.5vw;}
.card-design-set input {border:0;height:5vh;width:3vw;}

.card-design-tpl {position:relative;top:10vh;left:10vw;overflow:hidden;height:calc(87.7mm * 2);width:calc(56mm * 2);background:#666;}
.card-design-preview {position:absolute;z-index:99;top:10vh;right:10vw;height:calc(87.7mm * 2);width:calc(56mm * 2);background:#666;}
.card-design-info {display:none;font-size:3vw;text-align:center;position:absolute;top:20vh;width:50%;left:50%;transform:translate(-50%);}
.card-design-tpl:hover {opacity:1;}
.card-design-preview:hover {opacity:1;}
.dcell {border:0.1vw dotted rgba(0,0,0,0.4);color:#000;}
.dcell-on,.dcell:hover {border:0.1vw dotted rgba(0,0,0,0.4);background:#ffff99;}
#tpl-design-tmp {position:absolute;top:10vh;right:10vw;z-index:-1;overflow:hidden;height:calc(87.7mm * 2);width:calc(56mm * 2);background:#666;}

.dt-autocomplete-list {top:5vh;}
.dt-autocomplete-list .dt-cell {font-size:1vw;}