* { margin: 0; padding: 0; border: 0;box-sizing: content-box; scroll-behavior: smooth !important; }
html { overflow: scroll; font-size:13px; height: 100%; width: 100%; max-width: 100%; }
body { height: 100%; width: 100%; font-family:Open Sans; font-size: 1rem; color:#666666; background-color: #FFFFFF; }

/* #switchuser { display: block; background-color: #CC0000; height: 30px;} */
.darkgrey { background-color:#454545; color:#FFFFFF; }
.lightgrey { background-color:#e1e1e1;}
img { border:0px; width:100%; height:auto;}
a{ color:#666666; text-decoration:none; cursor:pointer; }
a:hover{ color: #000000; }
p { margin: 0px 5px 5px 5px; font-size: 1rem;}
h1 { font-size: 3rem; margin: 0px 5px 5px 5px; }
h2 { font-size: 2rem; margin: 0px 5px 5px 5px; }
h3 { font-size: 1.5rem; margin: 0px 5px 5px 5px; }
form { width:90%; margin: 20px 20px 20px 20px;}
label { display:block; font-size: 1rem; float:left; width:190px; font-weight:bold; white-space:nowrap; color:#666666; }
label.lblradio, label.lblchkbox { display:inline; font-size: 1rem; float:none; width:auto; font-weight:normal; white-space:normal; color:#666666 }
input { border: 1px solid #CCCCCC;width:90%; max-width:200px; height:32px; margin:0px 0px 10px 0px; padding:3px;font-size: 1rem;}
legend { font-size: 0;}
select { border: 1px solid #CCCCCC;width:90%; max-width:200px; height:32px; margin:0px 0px 10px 0px; padding:3px;font-size: 1rem; }
input[type='checkbox'], input[type='radio'] { width:auto; height:auto; }
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}
input.date { width: 90px; }
input.date.time { width: 90px; }
input.time { width: 30px; text-align: center; }
textarea { border: 1px solid #CCCCCC;width:95%;max-width:800px;margin:0px 0px 10px 0px; height:150px; padding: 3px;font-size: 1rem; }
textarea.small { width:90%; height:100px; }
button, a.btn, label.btn { display:inline-block; width:auto; margin:5px 5px 25px 5px; padding:10px; cursor:pointer; background-color:#666666; color:#FFFFFF; border-radius: 5px; font-size:1rem; font-weight:normal; float: none;}
button:hover, a.btn:hover, label.btn:hover { background-color:#000000; }
.icon .fas {margin-right:5px;}
section { margin: 20px 0px 20px 0px; }
.dabl { color: #CCCCCC; }
.double { width: 90px; text-align: right; }
.stext { width: 60px; }
.ltext { max-width: 600px; }
.hscroll { max-width: 100%; overflow: scroll; max-height:800px;}
.quicklaunch { display: inline-block; width: 100px; padding:5px; vertical-align: top; border: 1px solid #CCCCCC; border-radius: 8px; font-size: 1rem; text-align:center; }
#msgbox { display:none; position: fixed; top:0px; left: 50%; width: 300px; padding:10px; margin-left:-160px; background-color: #FFFFFF; color:#CC0000; border: 3px solid #CC0000; font-size: 1rem; text-align:center; z-index:1000; }
#hnimg { width: 150px; margin: 10px; }
.editor { width: 90%; }
.editor label { margin-bottom: 10px; float: none;}

.red { color:#CC0000;}
.green { color: #00CC00;}
.blue { color: #0000CC;}
header { background-color: #000000; color:#FFFFFF; height: 40px; padding: 10px 0px 10px 0px; }
header a{  color:#FFFFFF;}

.home { position:absolute; top:0px; left:0px; width:90%;  padding:10px;  }
.home ul { list-style-type:none; }
.home li{ display:inline-block; margin:5px 20px 0px 0px; line-height:20px; font-size: 30px; }
.home li span{ display:none; }
.home li a{ color:#FFFFFF; font-size: 1.8rem; }

.show-menu{ position:absolute; top: 10px; right:10px; width:30px; font-size: 30px; text-decoration:none; display:block;z-index:200; cursor:pointer; color:#FFFFFF; }
#show-menu{ display:none; -webkit-appearance:none; }
#show-menu:checked ~ #menu1{ display:block }

#menu1 { display:none; position:relative; z-index:10;}
.mainmenu { position:absolute; top:0px; left:0px; width:100%;  }
.mainmenu ul { list-style-type:none; }
.mainmenu li{ display:block; margin:0px 20px 10px 0px; line-height:20px; }
.mainmenu ul ul{ display:block; background-color: #efefef; width:auto; }

.mainmenu li li{ display:block; margin:2px 5px 2px 5px; padding:0px; }
.mainmenu li li a{ display:block; padding:3px;  }
.mainmenu ul ul ul{ display:block; position:relative; top:auto; margin:0px 0px 0px 0px; }

.footer { display:none; position:relative; width:100%; z-index:9; padding:10px; }
.footer ul { list-style-type:none; }
.footer li{ display:inline-block; margin:0px 20px 0px 0px; line-height:20px; }
.footer ul ul{ display:none; position:absolute; top:30px; background-color: #efefef; width:auto; }
.footer ul li:hover ul{ display:block; }
.footer li li{ display:inline; margin:0px 0px 0px 0px; padding:0px; }
.footer li li a{ display:block; padding:3px;  }
.footer ul ul ul{ display:inline; position:relative; top:auto; margin:0px 20px 0px 20px; }
.CodeMirror { height: auto; border: 1px solid #ddd;}
.CodeMirror pre { padding-left: 7px; line-height: 1.25; }
#app { padding:10px; }
input.frm_filter { width: 60px; background-color: transparent; height:auto; padding:3px;}
select.frm_filter { width: 60px; background-color: transparent; height:auto; padding:3px;}

.cols { font-size:0; margin: 0px 20px 20px 20px; }
.cols section{ display:inline-block; width:auto; vertical-align: top; margin: 0px 0px 0px 0px; font-size: 1rem; }
.cols section p { margin:0px 10px 0px 0px; }
.cols section section { display:block; width:100%;  }

.col2 { font-size:0;  }
.col2 section{ display:inline-block; width:100%; vertical-align: top; margin: 0px 0px 30px 0px; font-size: 1rem; }
.col2 section p { margin:0px 10px 0px 0px; }
.col2 section section { display:block; width:100%; }


@media all and (min-width: 1200px){
	.col2 section{ width:50%; }
}


.col3 { font-size:0;  }
.col3 section{ display:inline-block; width:100%; vertical-align: top; margin: 0px 0px 30px 0px; font-size: 1rem; }
.col3 section p { margin:0px 10px 0px 0px; }
.col3 section section { display:block; width:100%; }



@media all and (min-width: 1200px){
	.col3 section{ width:50%; }
}


@media all and (min-width: 1800px){
	.col3 section{ width:33.33%; }
}



.col4 { font-size:0;  }
.col4 section{ display:inline-block; width:100%; vertical-align: top; margin: 0px 0px 30px 0px; font-size: 1rem; }
.col4 section p { margin:0px 10px 0px 0px; }
.col4 section section { display:block; width:100%; }

@media all and (min-width: 1000px){
	.col4 section{ width:50%; }
}

@media all and (min-width: 1500px){
	.col4 section{ width:33.33%; }
}

@media all and (min-width: 2000px){
	.col4 section{ width:25%; }
}


div.tbl { display: table; width:auto; border-collapse: separate; border-spacing:5px; margin: 0px 20px 20px 20px; }
div.tbl div { display:table-row; font-size:1rem; vertical-align: top; width:50px; }
div.tbl div div { display:table-cell; padding:3px 5px 3px 5px; margin:2px; white-space:nowrap; min-width: 20px; }
div.tbl div div:last-child { width:auto; }
div.tbl div div.level0 { padding-left:0px; }
div.tbl div div.level1 { padding-left:10px; }
div.tbl div div.level2 { padding-left:20px; }
div.tbl div div.level3 { padding-left:30px; }
div.tbl div div.level4 { padding-left:40px; }
div.tbl div div.level5 { padding-left:50px; }
div.tbl div div.level6 { padding-left:60px; }
div.tbl div div.level7 { padding-left:70px; }
div.tbl div div.level8 { padding-left:80px; }
div.tbl div div.level9 { padding-left:90px; }
div.tbl div.tblhead div{ text-align: center; font-weight:bold; }
div.tbl div.tblhead a { text-decoration: none; margin: 0px 3px 0px 3px; }
div.tbl div.tblbody div { background-color: #EEEEEE; }
div.tbl div.tblbody:hover div { background-color: #DDDDDD; }
div.tbl .icon { font-size: 1rem; }
div.tbl div.tblcalc div{ font-weight:bold; }
div.tbl div div.argt { text-align: right; }
div.tbl div div.actr { text-align: center; }
div.tbl div div.acmd { text-align: center; }

ul.tbl { display: table; width:auto; border-collapse: separate; border-spacing:5px; margin: 0px 20px 20px 20px; }
ul.tbl li { display:table-row; position: relative; font-size:1rem; vertical-align: top; width:50px; }
ul.tbl li div { display:table-cell; padding:3px 5px 3px 5px; margin:2px; white-space:nowrap; min-width: 20px; }
ul.tbl li div:last-child { width:auto; }

ul.tbl li.tblhead div{ text-align: center; font-weight:bold; }
ul.tbl li.tblhead a { text-decoration: none; margin: 0px 3px 0px 3px; }
ul.tbl li.tblbody div { background-color: #EEEEEE; }
ul.tbl li.tblbody:hover div { background-color: #DDDDDD; }
ul.tbl .icon { font-size: 1rem; }
ul.tbl img { position: absolute; left: -20px; top:0px; width: 20px; }




.tbluser div div:nth-child(7) { text-align:center; }
.tblcols div div:nth-child(3) { text-align:right; width:20px; }
.tblcols div div:nth-child(4) { text-align:center; width:20px; }
.tblcols div div:nth-child(5) { text-align:center; width:20px; }

.tblfields div div:nth-child(4) { text-align:right; width:20px; }
.tblfields div div:nth-child(5) { text-align:center; width:20px; }
.tblfields div div:nth-child(6) { text-align:center; width:20px; }

.tbllanguage div div:nth-child(2) { white-space: normal; max-width: 250px; }
.tbllanguage div div:nth-child(3) { white-space: normal; max-width: 250px; }
.tbllanguage div div:nth-child(4) { white-space: normal; max-width: 250px; }
.tbllanguage div div:nth-child(5) { white-space: normal; max-width: 250px; }
.tbllanguage div div:nth-child(6) { white-space: normal; max-width: 250px; }
.show-colfilter{ cursor:pointer; width:auto; }

#show-colfilter{display:none;-webkit-appearance:none;}
#show-colfilter:checked ~ .ccolfilter{ display:block;  }

.ccolfilter { display: none; position:absolute; top:20px; left:0px; background-color: #FFFFFF; border: 1px solid #CCCCCC; padding: 10px; z-index:2; }
.ccolfilter { margin: 0px 20px 20px 20px;}
.ccolfilter p{ display:inline-block; width:180px; margin: 0px 0px 10px 0px; } 

/* .fieldedit { font-size: 1.2rem; margin-right:3px; } */
.fieldsave { font-size: 1.2rem; margin-right:3px; display: none; }
.areaedit { position: absolute; width:100px; height:50px; display:none;  resize: both;}

.rights0 { color: #dc2621; }
.rights3 { color: #49c700; }

.status0 { color: #dc2621; }
.status1 { color: #49c700; }
.status2 { color: #ebed00; }
.status3 { color: #dedfd5; }
.status4 { color: #56a0ff; }

.bgstatus0 { background-color: #dc2621; }
.bgstatus1 { background-color: #49c700; }

.hide { display: none; }
.order .hide { display: inline; }
#hidefrm { display:none; }
#show-frm {display:none;-webkit-appearance:none;}
#show-frm:checked ~ #hidefrm{display:block;  }

.icon{ font-size:2rem; margin:0px 5px 0px 5px; }
.sicon{ font-size:1rem; margin:0px 5px 0px 5px; }
.frombrutto{ font-size:1rem; margin:0px 5px 0px 5px; }
.cbtn{ font-size:2rem; margin:0px 5px 0px 5px; }
.cbtn span{ display:none; }
label.cbtn { display:inline-block; width:auto; cursor:pointer; font-weight:normal; color:#2b6777; float: none;}
.listcmd div{ margin: 0px 20px 20px 20px; }

.grid { border: 1px solid #CCCCCC; display: inline-block; vertical-align: top; width: 10%; min-width: 300px; margin: 10px; padding:5px; }
.grid div{ display:block; width: 100%; margin: 10px 0px 0px 0px; }
.grid div div{ display:inline-block; width: 30%; margin: 10px 0px 0px 0px; font-weight:bold; hyphens: auto; -webkit-hyphens: auto; }
.grid div div:nth-child(2n){ display:inline-block; width: 69%; margin-left:1%; font-weight: normal; }
.grid .icon{ font-size:2rem; margin:0px 5px 0px 5px;}
.gridsearch  { margin: 0px 20px 20px 20px; }
.gridsearch div { display: inline-block; margin: 0px 10px 0px 0px;  }
.gridhead  { margin: 0px 20px 20px 20px; }
.gridhead div { display: inline-block; margin: 0px 10px 0px 0px; }

.tplgrid { border: 1px solid #CCCCCC; border-radius: 10px; display: inline-block; vertical-align: top; width: 10%; min-width: 100px; margin: 10px; padding:5px; }
.tplgrid div{ text-align: center; }
.tplgrid .icon { font-size: 1rem; }
  
#trans { display:none;position:fixed; left:0px;top:0px; width:100%; height:100%; border:0px; background-color:#000000; opacity:0.9; padding:5px; z-index:199; }
#trans div{ position:fixed; left:50%;top:50%; width:300px; height:150px; z-index:200; margin: -75px 0px 0px -150px; text-align: center; font-size:14px; color:#ffffff; }
#trans img{ max-width:64px;}
#trans div div{ position: relative;}

/* #dialog { display:none; position: fixed; top:0px; left: 0px; width: 100%; height: 100%; max-height: 100%;  z-index: 299; text-align:center; }
#dialog div{ display:block;position: relative; background-color: #FFFFFF; font-size: 1rem; text-align: left; width: 100%; max-width: 600px; max-height: 90%; overflow: scroll; margin: 20px auto 20px auto; } */
#dialog { display:none; position: fixed; top:0px; left: 0px; width: 100%; height: 100%; max-height: 100%;  z-index: 299; text-align:center; }
#dialog div{ display:block;position: relative; background-color: #FFFFFF; font-size: 1rem; text-align: left; overflow-y: scroll; width: 90%; max-width: 1200px; max-height: 90%; margin: 0px auto 0px auto; border: 3px solid #454545; }
#dialog div div{ border: 0; }

.dialoghead { background-color: #454545; color: #FFFFFF; margin: 0px; padding: 10px; text-align: right; }
.dialoghead a{ color: #FFFFFF; }
div#mediaimages { overflow: scroll; height: 600px; width: 100%; background-color: #CCCCCC; }
div#mediaimages .mediathumbs { display:inline-block; width: 250px; margin: 10px; vertical-align: top; }
.show-debug{ position:absolute; top: 10px; right:100px; height:48px; width:48px; text-decoration:none; display:block;z-index:200; cursor:pointer; }
#show-debug{ display:none; -webkit-appearance:none; }
#show-debug:checked ~ #cdebug { display:block }

#debug { position: absolute; top:75px; right: 0px; background-color: #FFFFFF; z-index: 100; max-width: 600px; }
#debug p{ margin:10px; }
#cdebug{ display:none; margin-top:30px;  max-height: 500px; overflow: auto; border: 1px solid #CCCCCC; }
#logmsg { padding:10px; color:#00CC00; }
#errmsg { padding:10px; color:#CC0000; }
.error { color:#CC0000; }

@media all and (min-width: 1000px){
	html { font-size:16px; }
	.show-menu { display: none; }
	#menu1 { display:block; }
	.mainmenu { position:relative; width:100%; z-index:10; }
	.mainmenu ul { list-style-type:none; padding: 10px; }
	.mainmenu li{ display:inline-block; margin:0px 20px 0px 0px; line-height:20px; }
	.mainmenu ul ul{ display:none; position:absolute; top:30px; background-color: #efefef; width:auto; padding: 0px; }
	.mainmenu ul li:hover ul{ display:block; }
	.mainmenu li li{ display:inline; margin:0px 0px 0px 0px; padding:0px; }
	.mainmenu li li a{ display:block; padding:3px;  }
	.mainmenu ul ul ul{ display:inline; position:relative; top:auto; margin:0px 20px 0px 20px; }
	p { margin: 0px 20px 20px 20px; font-size: 1rem;}
	h1 { font-size: 3rem; margin: 0px 20px 20px 20px; }
	h2 { font-size: 2rem; margin: 0px 20px 20px 20px; }
	h3 { font-size: 1.5rem; margin: 0px 20px 20px 20px; }
}