html, body {	font-size:100%; height:100%}

body, div, span, h1, h2, h3, h4, h5, h6, p, ul, ol, li, a, img, form, input, textarea, label {	margin:0; padding:0;}
/*div, span, p, img, ul, input, textarea, select*/
*, *:after, *:before { box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing: border-box}
* { font-family:'Trebuchet MS', Helvetica, Tahoma, sans-serif}


img {	display: inline-block}

body {
	vertical-align:middle; color:#111; margin:0; padding:0; text-align: center;
	font-size:0.85em; font-weight:100;
}
a { text-decoration:none; /*border-bottom:1px dotted #999;*/ cursor:pointer}
a:hover { color:#08468a; border-bottom-style:solid}


.msg-user {	margin:10px auto; padding:10px 20px; text-align:center; border:1px solid #09f; border-radius:4px; color:#fff; position: relative}
.msg-success {		border:1px solid #c3ff4a}
.msg-warn {		border:1px solid #ff0}
.msg-error {		border:2px solid #F57900}
.msg-user p, .msg-error p, .msg-success p {	text-align:center}
.msg-user li {	list-style-position: inside}
.bt-group {			text-align:center}
.zebra {	background:rgba(0,0,0,0.15)}
.flex_1 {	flex:1; align-items: center}

table { width:100%; border:1px solid rgba(255,255,255,0.35); border-collapse:collapse}
thead { background:rgba(0,0,0,0.2)}
th {    font-weight:normal; font-style:italic; }
/*th:last-child {    border-right:none}*/
th, td {    padding:0.25em 0.5em; border-right:1px dotted rgba(255,255,255,0.15); border-bottom:1px dotted rgba(255,255,255,0.15);}
td {	color:#fff}

p {		margin-bottom:7px; line-height:1.5em}

h2 {	margin-bottom:7px}

form {  display: flex; flex-direction: column; align-items: stretch}
label {	padding:3px; flex:1; text-align: right; margin-right:5px}
button[type="submit"].hidden {
	display: inherit; visibility: hidden; position: fixed; left:-1000px; z-index: -100}

/*input { font-size:1em}*/
input, textarea {  border-radius:3px; border:1px solid rgba(0,0,0,0.1); padding:0.5em 1em;
	background:rgba(255,255,255,0.5); box-shadow:0 0 2px rgba(0,0,0,0.1) inset; margin:0.25em}

input, textarea, select {  /*width:160px; */font-size:1em; min-width:0}
.required > label:after {  content:" *"}
.dark .required > label:after, .dark .asterisk {	color:#0ff}
.required_fields {	font-style: italic}

input[type="checkbox"] {  width:auto; position: relative; background: inherit; cursor:pointer}
input[type="radio"] {  background: inherit; cursor:pointer}

input[type="number"] {  text-align:right}

form [required]:valid/*, form input:valid, form select:valid, form textarea:valid*/ {    border:1px solid #c3ff4a!important;}
input.error, select.error, textarea.error {    border:1px solid #f06!important;}

/* hide for IE : not supporting option display none */
option {	color:#0b97c4}
option[disabled="disabled"]{   color:#ff0000}/* hide for IE : not supporting diplay : none */


/*.row input {	display:inline-block}*/

/*________________ button */
button, a.button, .button-group a, select {
	border-radius:4px; cursor:pointer; /*display:inline-block;*/
	border:1px solid rgba(0,0,0,0.2); padding:0.5em 1em; color:#333;
	background-image:-webkit-linear-gradient(bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,.1) 3%,rgba(0,0,0,0) 100%);
	background-color:#fff;
	box-shadow:0 0 4px 0 rgba(0, 0, 0, 0.5); text-align:center;
	/*display: inline-block;*/
	text-transform: capitalize;
	position:relative; margin:0.25em;
}
button, a.button, .button-group a {	font-weight:bold; }

input:hover, button:hover, textarea:hover, select:hover,
input:focus, button:focus, textarea:focus, select:focus,
input[type="button"]:hover, .button:hover,
input[type="checkbox"].fa:focus:before {   outline:none; border:1px solid #0ff!important}

.button-group button[type="submit"] {		margin-left: auto}
.button-group a {   flex:1}

form .form-footer {	border-top:1px solid #444; margin-top:10px; padding-top:10px }
form .form-footer > * {	margin:5px }

.smaller {		font-size:0.9em}
.smaller button, .smaller a.button, .smaller .button-group a, .smaller select {	padding:0.25em 0.5em}

input:disabled, textarea:disabled, select:disabled, button:disabled {	opacity:0.5; cursor: default}
input:disabled:hover, textarea:disabled:hover {	}
select:disabled:hover, button:disabled:hover {	border:1px solid rgba(0,0,0,0.2)!important;}


[data-fx-playing="1"] p {   display:none}

.xdebug-var-dump {  text-align: left;}
.xdebug-error {	z-index:99999}

#debug {    border:1px solid #ccc; padding:0; text-align:left; position:fixed; left:0; width:500px; bottom:40px;
	max-height:200px; overflow-y:auto}
pre {   text-align:left}
pre#debug { padding:5px}
#debug pre {    margin:0}

/*_____ modal */
.modal {
	position: absolute; left:0; right:0; top:0; bottom:0; background: #000066; opacity: 0.6; z-index: 9999;
	display: flex; flex-direction: column; align-items: center; justify-content:center;
}
.modal .dlg {
	position: absolute; z-index: 10; background: #fff; border-radius: 4px; text-align: center;
	display: flex; flex-direction: column; align-items: center; justify-content:center;
}
.modal .dlg > * {	flex:1}

.dlg .header {
	background: #ff9900; font-weight: bold;
}
.dlg .content {
	padding: 15px;
}
.dlg ul {
	text-align: left;
	padding-left: 20px;
}


.field-group {	width:100%; display: flex; flex-direction: column}
.field-group > label {	text-align: center}
.field-group .field-row {	flex:1}
.field-row, .end-bts {	display: flex; align-items:flex-start; flex-wrap: wrap; flex-direction: row}
.field-row {	margin:3px}
.field-row .helper {	width:100%; font-size:0.9em; font-style: italic}
.field-row label {	text-align:right; padding-right:1em; margin:0.25em; margin-top:0.5em; /*padding-top:0.5em; ; margin-top:0.75em*/}
.field-row input + label {	text-align:left; margin-left:7px}
.field-row input[type="checkbox"] {	}
.field-value {  	flex:2; display:flex; flex-direction:row; align-items: center; justify-content: flex-start; min-width:0;/*; flex-wrap: wrap*/}
.field-row-button .field-value, .field-row-image .field-value {		justify-content: center}
/*.field-value > * {  flex:1; text-align:left}*/
.field-value textarea,
.field-value input,
.field-value select{  width:auto; flex:1 1; text-align:left}
.field-value .suffix {  	font-size:0.9em; margin-left:7px/*; flex:1*/}
.field-value .field-error { color:#f06}
.field-right .field-value {	flex:inherit}
.field-radio {	display:flex; flex:1; align-items:flex-start}
.field-radio > label {	flex:1; display:flex; align-items: center; cursor:pointer; text-align: left}
.field-radio > label:hover {	color:#0ff}
.field-radio > label > * {	flex:1}
.field-radio > label > input {	flex:none; width:2em}

.field-right .field-value {	flex:none}

.field-items input[type="button"]
, .field-items input[type="image"]{ 	display:inline-block; vertical-align: top}

/*QS2023/10/16 - no display flex */
.field-input-combo {	/* display: flex; */ flex-direction: column; flex:1}

.field-input-combo .field-trigger {
	border-radius: 4px; cursor: pointer; border: 1px solid rgba(0,0,0,0.2); padding:0.25em 0.25em 0.25em 0.5em; color: #333;
	background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,.1) 3%,rgba(0,0,0,0) 100%);
	background-color: #fff; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.5);
	text-align: center; text-transform: capitalize; position: relative; margin: 0.25em;
}
.field-input-combo .field-trigger:hover, .field-input-combo .field-trigger:focus {    outline:none; border:1px solid #0ff}
.field-input-combo .field-trigger .field-item {	padding:0}

/*QS2023/10/16 - add panel for arrow */
/*.field-input-combo-items {	display:none; flex-direction: column; flex-wrap: nowrap}*/
.field-input-combo-panel {	display:none; flex-direction: column; flex-wrap: nowrap}
.field-input-combo[data-open] .field-input-combo-panel {	display:flex}
/*.field-input-combo[data-open] .field-input-combo-items {	display:flex}*/
.field-input-combo-items .field-item, .field-input-combo-arrow {	border-bottom:1px dotted rgba(0,0,0,0.5) ;}
.field-input-combo-items .field-item:hover, .field-input-combo-arrow:hover {	background-color:rgba(255,255,255,0.15) ;}
.field-input-combo-items .field-item[selected] {	color:#fff ;}

.field-item .field-label {	flex:1; text-align: left; margin-left:10px}
/*QS2023/10/16 - add arrow */
.field-input-combo .field-item, .field-input-combo-arrow {	cursor: pointer; padding: 0 0.5em; flex:1 0}

.field-item-icon {	width: 24px; height: 24px;
	box-shadow: 0 0 1px rgba(0,0,0,0.75); border: 1px solid rgba(255,255,255,0.25); border-radius: 2px;
	display: inline-block; margin: 2px; color: transparent; background-repeat: no-repeat; overflow: hidden; background-position: center bottom, center center;}


/*.field-items {	display:flex; flex-direction: row}*/

/*.field input, .field textarea, .end-bts button {	flex:1}*/
.form-errors {  list-style: none; width:100%; color:#f00; display:flex; justify-content:center}
.form-errors li {  margin-right:10px}

.fields-noborder input[type="text"],
.fields-noborder textarea {  border-color:transparent; background:none; box-shadow:none}

.even-bgd tr:nth-child(even) {
	background:rgba(0,0,0,0.07);
}
.even-bgd tr td {  border-bottom:none}

.end-bts {	margin-top:7px; padding:10px 20px 0 20px; /*align-items:stretch*/}

.hidden {	display: none;}


.list-rows, .list-v {	width:100%; display:flex; flex-direction:column; border:1px solid rgba(0,0,0,0.25)}
.list-v {	border:1px solid rgba(0,0,0,0.25)}
.list-v > * {	flex:1}

.col {	display:flex; flex-direction:column;}
.row {	display:flex; align-items:center; justify-content:center; flex-direction:row;/*flex-flow:row wrap; */}
.row_item { flex:1}

.row2 {	display:flex; flex-direction:row}

.menu-h, .menu-v  {	list-style: none; display:flex; /*align-items: stretch; */}
.menu-h li {	position: relative; display:flex; align-items: baseline;}
.menu-h li:hover, .menu-h li:active, .menu-h li:focus, .menu-h a:focus {	z-index: 2}
.menu-h a {	padding:0; margin:0 2px; }
/*.menu-h a:hover {	color:#f60}*/
.menu-h ul {	list-style: none; position: absolute; top:100%; left:0; z-index:10;
	display:none; flex-direction:column; border-radius:0 0 4px 4px}
.menu-h ul a {	white-space: nowrap; padding:4px 12px;}

.menu-v {	flex-direction:column}


.drop { position: absolute; left:0; top:0; border:1px solid #333; display:none; z-index:10}
.drop li {	position:relative;}
.drop.menu-v .drop { left:inherit}

/*.menu-h > * {	align-items:baseline}*/
.col-1 {
	flex:1;
}
.col-1-2 {
	vertical-align: top;
	flex:1;
	padding: 0 2%;
	position: relative;
}

.spacer {  flex:1}
.big_num {	    font-size: 2em}

.loading-spin {
	width:50px; height:50px; display:inline-block; position: relative;
}
.loading-spin.spinning {
	animation: 1s linear infinite normal spinnig;
}
.loading-spin .cb {	width:5px; height:5px; /*margin-left:-5px;*/ position: absolute; top:0; left:50%; border-radius:100%; background: #007094; transform-origin:0 25px}
.loading-spin .cb.c2 {	 transform: rotate(-40deg); opacity:0.9}
.loading-spin .cb.c3 {	 transform: rotate(-80deg); opacity:0.8}
.loading-spin .cb.c4 {	 transform: rotate(-120deg); opacity:0.7}
.loading-spin .cb.c5 {	 transform: rotate(-160deg); opacity:0.6}
.loading-spin .cb.c6 {	 transform: rotate(-200deg); opacity:0.5}
.loading-spin .cb.c7 {	 transform: rotate(-240deg); opacity:0.4}
.loading-spin .cb.c8 {	 transform: rotate(-280deg); opacity:0.3}
.loading-spin .cb.c9 {	 transform: rotate(-320deg); opacity:0.2}
@keyframes spinnig {
	from { transform:rotate(0deg)}
	to {	transform:rotate(360deg)}
}

/*____________________________________________ Shadows */
.light {
	-o-shadow:0px 0px 20px 0px rgba(255, 255, 255, 1);
	-moz-shadow:0px 0px 20px 0px rgba(255, 255, 255, 1);
	-webkit-shadow:0px 0px 20px 0px rgba(255, 255, 255, 1);
	-ms-shadow:0px 0px 20px 0px rgba(255, 255, 255, 1);
	-khtml-shadow:0px 0px 20px 0px rgba(255, 255, 255, 1);
	box-shadow:0px 0px 20px 0px rgba(255, 255, 255, 1);}
.drop {
	-o-shadow:0px 0px 30px 0px rgba(0, 0, 0, 0.7);
	-moz-shadow:0px 0px 30px 0px rgba(0, 0, 0, 0.7);
	-webkit-shadow:0px 0px 30px 0px rgba(0, 0, 0, 0.7);
	-ms-shadow:0px 0px 30px 0px rgba(0, 0, 0, 0.7);
	-khtml-shadow:0px 0px 30px 0px rgba(0, 0, 0, 0.7);
	box-shadow:0px 0px 30px 0px rgba(0, 0, 0, 0.7);}
.shw-1 {
	-o-shadow:0px 0px 20px 0px rgba(0, 0, 0, 1);
	-moz-shadow:0px 0px 20px 0px rgba(0, 0, 0, 1);
	-webkit-shadow:0px 0px 20px 0px rgba(0, 0, 0, 1);
	-ms-shadow:0px 0px 20px 0px rgba(0, 0, 0, 1);
	-khtml-shadow:0px 0px 20px 0px rgba(0, 0, 0, 1);
	box-shadow:0px 0px 20px 2px rgba(0, 0, 0, 1);}
.shw-2 {
	-o-shadow:0px 0px 10px 0px rgba(0, 0, 0, 1);
	-moz-shadow:0px 0px 10px 0px rgba(0, 0, 0, 1);
	-webkit-shadow:0px 0px 10px 0px rgba(0, 0, 0, 1);
	-ms-shadow:0px 0px 10px 0px rgba(0, 0, 0, 1);
	-khtml-shadow:0px 0px 10px 0px rgba(0, 0, 0, 1);
	box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 1);}
.shw-3 {
	/*box-shadow:0px 3px 9px 0px rgba(0, 0, 0, 0.75);*/
	box-shadow:0px 0px 6px 0px rgba(0, 0, 0, 0.75);
	-o-shadow:0px 0px 6px 0px rgba(0, 0, 0, 0.75);
	-moz-shadow:0px 0px 6px 0px rgba(0, 0, 0, 0.75);
	-webkit-shadow:0px 0px 6px 0px rgba(0, 0, 0, 0.75);
	-ms-shadow:0px 0px 6px 0px rgba(0, 0, 0, 0.75);
	-khtml-shadow:0px 0px 6px 0px rgba(0, 0, 0, 0.75);
}