/* PGNT */

.div-pgnt {position: relative; display: block; box-sizing: border-box; }
.div-pgnt {background: rgba(0, 50, 110, 0.65); color: white; height: 2em; }

.div-pgnt > span { padding: 0 0.2em;  padding: 0.1em 0.5em; display: inline-block; }
.div-pgnt .pgnt-l {text-align: left;  float: left; }
.div-pgnt .pgnt-m {text-align: center; margin: 0 auto; display: block; }
.div-pgnt .pgnt-r {text-align: right; float: right;  }

.div-pgnt .pgnt-txt {font-size: 0.8em; line-height: 0.9; text-align: center;}
.div-pgnt .pgnt-opts {font-size: 0.8em; line-height: 0.9; text-align: right; }
.div-pgnt .pgnt-btn {width: 2em; display: inline-block; margin: 0.1em 0.1em; padding: 0.1em 0.1em; text-align: center; border: darkgrey 1px solid; border-radius: 0.5em; }
.div-pgnt .pgnt-dum {margin: 0.1em 0.1em; padding: 0.1em 0.1em; text-align: center; border: transparent 1px solid; border-radius: 0em; white-space: nowrap; }
.div-pgnt .off {background: rgba(0,0,0, 0.2); color: darkgrey; }
.div-pgnt a {color: white; }
.div-pgnt a:hover {color: magenta; background: rgba(0,0,0, 0.5); }

.pgnt-links .pgnt-btn {}
.pgnt-links .off {color: magenta; }

/* XGRD */

.div-grid {position: relative; display: inline-block; width: 100%; box-size: border-box; }
.div-grid > .xsgm {position: relative; display: block; }
.div-grid > .xsgm > .xrow {display: block; vertical-align: top; }
.div-grid > .xsgm > .xrow > .xcol {vertical-align: top; }
.div-grid > .xsgm > .xrow > .xcol > .xval {vertical-align: top; }






.xgrd { display: block; }
.xgrd > .xsgm {white-space: nowrap; display: block; }
.xgrd > .xsgm-head {}
.xgrd > .xsgm-head > .xrow {display: block; }

.xgrd > .xsgm-head > .xrow-sort {display: none; }

.xgrd > .xsgm-head > .xrow-head { vertical-align: middle; white-space: nowrap; }
.xgrd > .xsgm-head > .xrow-head > .xcol { display: inline-block; }
.xgrd > .xsgm-head > .xrow-head > .xcol > .xval:not(input[type=checkbox]) {
	height: 3em;  text-align: center; color: darkblue; margin: auto; vertical-align: middle;  
}


.xgrd > .xsgm-head > .xrow > .xcol > .xval {text-align: center; }

.xgrd > .xsgm-body > .xrow {}
.xgrd > .xsgm-body > .xrow > .xcol {vertical-align: top; }
.xgrd > .xsgm-body > .xrow > .xcol > .xval {vertical-align: top; }


.xgrd > .xsgm > .xrow > .xcol > .xval {border: rgba(200,200,200, 0.5) thin solid; }
.xgrd > .xsgm > .xrow > .xcol > input[type=text] {border-radius: 0; border: grey 1px solid; }

/* XSGM-BODY */
.xgrd > .xsgm-body > .xrow > .xcol > input[type=text],
.xgrd > .xsgm-body > .xrow > .xcol > textarea.auto{
	line-height: 1;
}

.xgrd > .xsgm > .xrow > .xcol-_opr {padding: 0; margin: 0; }
.xgrd > .xsgm > .xrow > .xcol > input[type=checkbox] {margin: 1px; font-size: 17px; }
.xgrd > .xsgm-body > .xrow .xrow-det {background: rgba(250,250,250, 0.25); }

.xgrd > .xsgm-body > .xrow > .xcol > .edit:not([readonly]) {background: rgba(240,100,10, 0.5); color: darkred; }
.xgrd > .xsgm-body > .xrow:hover > .xcol > .xval { background: rgba(100,250,0, 0.1); cursor: pointer; }

/* CRUD-ADD */
.xgrd > .xsgm-crud_add > .xrow > .xcol {vertical-align: top; }
.xgrd > .xsgm-crud_add > .xrow > .xcol > .xval {vertical-align: top; }

.xgrd > .xsgm-crud_add > .xrow > .xcol > input[type=text],
.xgrd > .xsgm-crud_add > .xrow > .xcol > textarea.auto { line-height: 1;}

.xgrd > .xsgm-body > .xrow > .xcol > .edit:not([readonly]) {background: rgba(240,100,10, 0.5); color: darkred; }

/* VALIDATION */
.xgrd > .xsgm > .xrow > .xcol > input.valid,
.xgrd > .xsgm > .xrow > .xcol > textarea.valid,
.xgrd > .xsgm > .xrow > .xcol > select.valid {
	border-width: 1px; border-color: lime; color: green; 
}

.xgrd > .xsgm > .xrow > .xcol > input.invalid,
.xgrd > .xsgm > .xrow > .xcol > textarea.invalid,
.xgrd > .xsgm > .xrow > .xcol > select.invalid {
	border-width: 1px; border-color: red; color: red; 
}



/* CRUD-HEAD */
.xgrd > .xsgm-crud_mode {}
.xgrd > .xsgm-crud_mode .xrow {}
.xgrd > .xsgm-crud_mode .xrow a.xcol {display: inline-block; margin: 1px 0; padding: 1px 5px; text-align: center; }
.xgrd > .xsgm-crud_mode .xrow a.xcol:nth-child(n+2) { border-left: red 1px solid;  }
.xgrd > .xsgm-crud_mode .xrow a.xcol:hover {background: rgba(255,255,255, 0.25); color: blue; }

.xgrd > .xsgm-crud_mode .xrow .btn-view {}
.xgrd > .xsgm-crud_mode .xrow .btn-edit {}
.xgrd > .xsgm-crud_mode .xrow .btn-init {}

/* CRUD-FOOT */
.xgrd > .xsgm-crud_oprt {
	display: block;
	padding: 10px 20px; 
	text-align: right;
}

.xgrd[crud="init"] > .xsgm-crud_oprt > .crud_btns-add_line {
	display: inline-block;
	float: left; 
}
.xgrd:not([crud="init"]) > .xsgm-crud_oprt > .crud_btns-add_line {
	display: none;
}

.xgrd > .xsgm-crud_oprt > .crud_btns:not(.conf-hide) {
	display: inline-block;
	
	text-align: center; 
	border-radius: 15px;
}
.xgrd > .xsgm-crud_oprt > .crud_btns-pre { background: rgba(100,255,190, 0.35); color: black; margin: 5px 100px 5px 10px; padding: 10px 20px; }
.xgrd > .xsgm-crud_oprt > .crud_btns-fix { background: rgba(255,  0,100, 0.25); color: black; margin: 5px 10px 5px 10px; padding: 10px 20px; }

.xgrd > .xsgm-crud_oprt > .crud_btns .xrow {
	text-align: left; 
	padding: 4px 2px;
}
.xgrd > .xsgm-crud_oprt > .crud_btns .btn-crud {
	width: 80px;
	margin: 2px 2px;
	padding: 5px 5px; 
	border: black 2px solid;
	border-radius: 4px;
	text-align: center; 
	font-weight: bold; 
}

.xgrd > .xsgm-crud_oprt > .crud_btns-pre .btn-conf { background: rgba(255,255,255, 0.7); color: red;   border-color: red; }
.xgrd > .xsgm-crud_oprt > .crud_btns-pre .btn-back { background: rgba(230,230,230, 0.6); color: black; border-color: black; }

.xgrd > .xsgm-crud_oprt > .crud_btns-fix .btn-save { background: rgba(230, 40, 40, 0.9); color: white; border-color: white; }
.xgrd > .xsgm-crud_oprt > .crud_btns-fix .btn-back { background: rgba(230,230,230, 0.8); color: black; border-color: black; }

.xgrd > .xsgm-crud_oprt > .crud_btns-pre .btn-crud:hover { border-color: blue; cursor: pointer; text-decoration: underline; }
.xgrd > .xsgm-crud_oprt > .crud_btns-fix .btn-crud:hover { border-color: blue; cursor: pointer; text-decoration: underline; }

.xgrd > .xsgm-crud_oprt > .crud_btns-add_line > .xrow-add {vertical-align: top; }
.xgrd > .xsgm-crud_oprt > .crud_btns-add_line > .xrow-add .xcol {vertical-align: top; }
.xgrd > .xsgm-crud_oprt > .crud_btns-add_line > .xrow-add .btn-add_line {width: 30px; margin: 0 3px; padding: 1px; border-radius: 3px; }

.conf-hide {display: none; }
.conf-show {display: inline-block; }