:root {
  --driver: #ebcc34;
  --white: #fff;
  --smr:#e56f06;
}

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
a{
	color:inherit;
	text-decoration:none;
	border-bottom:2px dotted white;
}

html,body{
	width: 100%;
    height: 100%;
}
body{
	font-family:Arial, 'Time New Roman';
	font-size:1rem;
}
body.keyboard{
    height: calc(100% + 500px);
}
body .header{
	position:sticky;
	top:0;
	left:0;
	background:#000;
	color:#fff;
	font-size:1.2rem;
	z-index: 1002;
}
body .header .ico{
	position:relative;
	display:none;
}
body .header .ico.negative:after{
	font-family: "Font Awesome 6 Free";
    font-weight: 900;
	content:"\21";
	color:orange;
	position:absolute;
	bottom:0;
	right:0;
	font-size:.5rem;
}
body .footer{
	position:fixed;
	bottom:0;
	left:0;
	background:#f1f1f1;
	color:#bfbfbf;
}

.turnView{
	-webkit-transform: rotateX(180deg) scaleX(-1);
    transform: rotateX(180deg) scaleX(-1);
}
.spacer{
	height:80px;
}

.primary{
	color:#006ea1;
}
.smrlike{
	color:var(--smr);
}
::placeholder{
	color:#ccc;
}
.uppercase{
	text-transform:uppercase;
}
input{
	border:1px solid #ccc;
}
input:focus{
	border:1px solid #666;
	outline:0;
}
input,select, option{
	width:100%;
	padding:10px 5px 10px 5px;
}
button[name="startscan"]{
	width:100px;
	padding:10px 5px 10px 5px;
	font-weight:normal;
	height:40px;
}
input.nve.scanshot{
	padding-left:25px;
	color:#ccc;
	font-size:1rem;
	width:calc(100% - 100px);
}
.nve-scanshot-container{
	position:relative;
}
.nve-scanshot-container:focus-within{
	border:3px solid #ff0000;
}
.nve-scanshot-container:focus-within button[name="startscan"]{
	background:#ff0000;
	color:#fff;
}
.nve-scanshot-container:after{
	font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f029";
    position: absolute;
    left: 5px;
    top: 11px;
    font-size: 1rem;
    color: #ccc;
}


/*forms*/
fieldset{
	border:0;
}
.field-input{
  position: relative;
  height: 44px;
  line-height: 44px;
  margin-bottom:15px;
  display:inline-block;
}
.field-input label {
  position: absolute;
  top: 0px;
  left: 1rem;
  color: #d3d3d3;
  transition: 0.2s all;
  cursor: text;
  pointer-events:none;
}
.field-input input {
  border: 0;
  outline: 0;
  padding: 0.5rem;
  border:1px solid #d3d3d3;
  border-bottom: 2px solid #d3d3d3;
  box-shadow: none;
  color: #111;
}
.field-input input:invalid {
  outline: 0;
}
.field-input input:focus,
.field-input input:valid {
  border-color: #006ea1;
  outline:0;
}
.field-input input:focus~label,
.field-input input:valid~label {
  font-size: 12px;
  top: -5px;
  color: #006ea1;
  background:#fff;
  line-height:1;
}

.field-input .autofill{
	position: absolute;
	line-height: 2;
	background: #fff;
	padding: 10px;
	font-size: smaller;
	width: 100%;
	min-width:200px;
	border:1px solid #d3d3d3;
	z-index:1001;
}
.field-input .autofill .list{
	display:block;
}
.field-input .autofill .list .li{
	display:block;
	cursor:pointer;
	padding:3px;
}
.field-input .autofill .list .li:hover{
	opacity:.8;
	background:#006ea1;
	color:#fff;
}

/*table*/
.table,
.area,
#mesage{
	table-layout: auto;
     display: table;
	 width:100%;
	 max-width:100%;
	 margin:0;
	 padding:0;
	 position:relative;
	 overflow:hidden;
}
.table .head{
	display:table-header-group;
}
.table .head .col,
.table .row .col.title,
.area .row .col.title{
	font-weight:bold;
	/*border-bottom:1px solid #ccc;
	background: #eeeeee;
	background: -moz-linear-gradient(top,  #eeeeee 0%, #dddddd 100%);
	background: -webkit-linear-gradient(top,  #eeeeee 0%,#dddddd 100%);
	background: linear-gradient(to bottom,  #eeeeee 0%,#dddddd 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0 );*/
	color:#ddd;
	border-bottom:1px solid #222;
	background:#333;
}
.table .row .col.title a{
	color:#fff;
	text-decoration:none;
}
.table .head .col{
	border:0 !important;
	border-bottom:3px solid #222 !important;
}
.table .body{
	display:table-row-group;
}
.table .row,
.area .row ,
#message .body{
     display: table-row;
	 width:100%;
}
.table .row .col,
.area .row .col ,
#message .col{
     display: table-cell;
	 vertical-align: top;
	 padding:5px;
	 overflow:hidden;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
}
.table.heigher{
	line-height:30px;
}
.table .row .col.title,
.area .row .col.title{
	text-align:center;
}
.table .row .col{
	border:1px solid #eee;
}
.table .row .col.bordered,
.area .row .col.bordered{
	border:1px solid #333;
}
.table .row .col.title{
	border:1px solid #222;
}
.area .row,
.area .row .col{
	display:block;
}
.area .row .col{
	float:left;
	box-sizing:border-box;
}
.area .row:after{
	content:'';
	display:block;
	clear:left;
}
.table .row .col.cm,
.area .row .col.cm{
	text-align:center;
	vertical-align:middle;
}
.table.tablelook .col,
.area.tablelook .col{
	border:1px solid #eee;
}

/*tab zone*/
.tabzone .tab-label{
	background:#eee;
	padding:15px;
	border-bottom:1px solid #ddd;
}
.tabzone .tab-label:before{
	font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f204";
	margin-right:15px;
	font-size:1rem;
	color:#666;
}
.tabzone .tab-label.active:before{
	font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f205";
	margin-right:15px;
	font-size:1rem;
	color:orange;
}
.tabzone .tab-content{
	padding:10px;
	display:none;
}
.tabzone .tab-content.active{
	display:block;
}
/*defaults*/
h1.title{
	background: #121212;
    color: #333;
}
.pad{
	padding:10px;
}
.mag{
	margin:5px;
}
.pad.force{
	padding:10px !important;
}
.pad-s{
	padding:5px;
}
.pad-15{
	padding:15px;
}
.pad-15f{
	padding:15px !important;
}
.pad-25{
	padding:15px;
}
.bg-white{
	background:#fff;
	color:#000;
}
.bg-driver{
	background:var(--driver);
	color:var(--white);
}
.bg-neutral,
ul.listbox li.active{
	background:#138496 !important;
	color:#fff;
}
.bg-positive{
	background:#28a745 !important;
	color:#fff;
}
.bg-negative{
	background:#dc3545 !important;
	color:#fff;
}
.bg-sub{
	background:#ccc;
	color:#fff;
}
.bg-light{
	background:#efefef;
	color:#222;
}
.bg-dark{
	background:#333;
	color:#fff;
}
.bg-dark-negative{
	background:#351f1f;
	color:#fff;
}
.white{
	color:#fff;
}
.dark{
	color:#333;
}
.neutral{
	color:#138496;
}
.positive{
	color:#28a745;
}
.negative{
	color:#dc3545;
}
.sub{
	color:#ccc;
}
.txt-driver{
	color:var(--driver);
}
.divide{
	border-bottom:1px solid #666;
}
.divide.dotted{
	border-bottom:1px dotted #666;
}
.divide.dashed{
	border-bottom:1px dashed #666;
}
.divider{
	height:0;
	border-top:3px solid #333;
	display:block;
}
.divider.dotted{
	border-top:3px dotted #333;
}
.divider.dashed{
	border-top:3px dashed #333;
}
.border{
	border:3px solid #dddddd;
}
.borderdk{
	border:3px solid #222 !important;
}
.vspace{
	margin-top:15px;
	margin-bottom:15px;
}
.hspace{
	margin-left:15px;
	margin-right:15px;
}
.sdivider{
	height:50px;
}
.space{
	margin:1px;
}
.ms{
	margin:5px;
}
.ms.force{
	margin:5px !important;
}
.hover:hover{
	background:#eee;
	opacity:.7;
}
.oddl{
	background:rgba(255,255,255,0.2);
}
.oddd{
	background:rgba(0,0,0,0.2);
}
.invisible{
	display:none;
}
.finvisible{
	display:none !important;
}
.pointer,
#togglebox .boxtitle{
	cursor:pointer;
	-webkit-touch-callout: none; 
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none; 
        -ms-user-select: none;
            user-select: none;
}
.w100{
	width:100% !important;
}
.w50{
	width:50%;
}
.w50p5{
	width:calc(50% - 10px);
}
.w33{
	width:calc(33.3333% - 10px);
}
.w67{
	width:calc(67.6666% - 10px);
}
.tleft{
	text-align:left !important;
}
.tright{
	text-align:right;
}
.tcenter{
	text-align:center;
}
.left{
	float:left;
}
.right{
	float:right;
}

.round{
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}
.round-top{
	border-radius:5px 5px 0 0;
	-moz-border-radius:5px 5px 0 0;
	-webkit-border-radius:5px 5px 0 0;
}
.circle{
	border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
}
.prelative{
	position:relative;
}
.pabsolute{
	position:absolute !important;
}
.pfixed{
	position:fixed !important;
}
.sticky{
	position:sticky;
	top:100px;
	left:0;
}
.noborder{
	border:0 !important;
}
.nomargin{
	margin:0 !important;
}
.nopadding{
	padding:0 !important;
}
.nobackground{
	background:transparent !important;
}
.boxshadow{
	box-shadow:0 0 3px #444;
}
.textshadow{
	text-shadow:0 0 3px #444;
}
.imgshadow{
	-webkit-filter: drop-shadow(0 0 3px #444);
	filter: drop-shadow(0 0 3px #444);
}
.boxshadowl{
	box-shadow:2px 2px 5px rgba(0,0,0,.0);
	border:5px solid #eee !important;
	transform:scale(1);
}
.boxshadowl:hover{
	box-shadow:2px 2px 5px rgba(0,0,0,.3);
	transform:scale(1.025);
	transition:box-shadow .5s,transform .5s;
}
.serifbox{
	font-family:'Times New Roman';
	color:#999;
}
.serifbox:hover{
	color:#666;
	transition:color .5s;
}
.text-box{
	width:100%;
	height:250px;
	padding:10px;
	margin:5px;
	overflow-y:scroll;
	border:1px solid #444;
}
.center-box{
	margin:0 auto;
	width:360px;
	border:1px solid #eee;
	box-shadow:0px 0px 3px #999;
	-webkit-box-shadow:0px 0px 3px #999;
	-moz-box-shadow:0px 0px 3px #999;
}
span.hero-text,
.monsterbig{
	font-size:72px;
}
.superbig{
	font-size:32px;
}
.biggest{
	font-size:24px;
}
.bigger{
	font-size:16px;
}
.supersmall{
	font-size:10px;
}
.small{
	font-size:12px;
}
.tiny{
	font-size:10px;
}
.italic{
	font-style:italic;
}
.bold{
	font-weight:bold;
}
.serif{
	font-family:'Times New Roman';
}
.nw{
	white-space: nowrap;
}
.strike{
	text-decoration:line-through;
}
.link{
	cursor:pointer;
	color:#2ba0c2;
	text-decoration:underline;
}
.clear{
	content:"";
	display:block;
	clear:both;
}
.grayscale{
	filter: grayscale(100%);
}
.tul{
	text-decoration: underline;
}
.tdul{
	text-decoration: underline;
	text-decoration-style: double;
}
hr.hrdul{
	height:3px;
	border:0;
	border-top:1px solid #333;
	border-bottom:1px solid #333;
	margin:5px 0 5px 0;
}

h3.title{
	background: #eee;
    padding: 10px;
    border-bottom: 3px solid #ccc;
}
.panel-elm{
	background: #f5f5f5;
    line-height: 1.5;
    margin: 10px 0;
    padding: 10px;
}

/*dynamic*/
.row .col.col-1{
	width:calc(100% / 12);
}
.row .col.col-2,
.row .col.col-2f{
	width:calc(100% / 6);
}
.row .col.col-3{
	width:25%;
}
.row .col.col-4{
	width:33.333%;
}
.row .col.col-5{
	width:calc(100% / 12 * 5);
}
.row .col.col-6{
	width:50%;
}
.row .col.col-7{
	width:calc(100% / 12 * 7);
}
.row .col.col-8{
	width:calc(100% / 12 * 8);
}
.row .col.col-9{
	width:calc(100% / 12 * 9);
}
.row .col.col-10{
	width:calc(100% / 12 * 10);
}
.row .col.col-11{
	width:calc(100% / 12 * 11);
}
.row .col.col-12{
	width:100%;
}

/*flex*/
.grid,
.scroll-content{
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	margin-bottom:50px;
}
.grid .elm,
.scroll-content .scroll-col{
	border:1px solid #ccc;
	margin:1px;
	height:120px;
	position:relative;
}
.grid .elm.dark .title{
	background:#333;
	color:#fff;
}
.grid .elm p,
.grid .elm div{
	padding:5px;
}
.grid .elm .title{
	background:rgba(0,0,0,.8);
	color:#fff;
	padding:5px;
	position:absolute;
	bottom:20%;
	left:0;
	right:0;
	text-align:center;
}
.grid .elm{
	width:260px;
}
/*buttons*/
.btn{
	padding:5px;
	cursor:pointer;
	border:3px solid transparent;
	background:#333;
	color:#fff;
}
.btn.inline{
	display:inline-block;
	margin:0 3px 3px 0;
}
.btn.fullsize{
	width:100%;
	text-align:center;
	display:inline-block;
}
.btn.fullsize.ms{
	width:calc(100% - 10px);
}
.btn.info{
	background:#006ea1;
	color:#fff;
}
.btn.negative{
	background:#dc3545;
	color:#fff;
}
.btn.positive{
	background:#28a745;
	color:#fff;
}

.btn.outer{
	background:#fff;
}

.btn:hover{
	transition:background .5s, color .5s;
	background:#fff;
	border:3px solid #333;
	color:#333;
}
.btn.outer{
	border:3px solid #333;
	color:#333;
}
.btn.outer:hover{
	transition:background .5s, color .5s;
	background:#333;
	color:#eee;
}

.btn.info:hover{
	transition:background .5s, color .5s;
	background:#fff;
	border:3px solid #006ea1;
	color:#006ea1;
}
.btn.info.outer{
	border:3px solid #006ea1;
	color:#006ea1;
}
.btn.info.outer:hover{
	transition:background .5s, color .5s;
	background:#006ea1;
	color:#fff;
}
.btn.negative:hover{
	transition:background .5s, color .5s;
	background:#fff;
	border:3px solid #dc3545;
	color:#dc3545;
}
.btn.negative.outer{
	border:3px solid #dc3545;
	color:#dc3545;
}
.btn.negative.outer:hover{
	transition:background .5s, color .5s;
	background:#dc3545;
	color:#fff;
}
.btn.positive:hover{
	transition:background .5s, color .5s;
	background:#fff;
	border:3px solid #28a745;
	color:#28a745;
}
.btn.positive.outer{
	border:3px solid #28a745;
	color:#28a745;
}
.btn.positive.outer:hover{
	transition:background .5s, color .5s;
	background:#28a745;
	color:#fff;
}
.btn:disabled{
	background:#ccc !important;
}

.hoverpot{
	filter: grayscale(100%);
}
.hoverpot:hover{
	filter: grayscale(0%);
}

/*messages*/
.message{
	margin:5px;
	padding:5px;
	border:5px solid #bbb;
	color:#bbb;
}
.message:before{
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content:"\f129";
	margin:15px;
}
.message.solid{
	color:#fff;
	background:#bbb;
	border:0;
}
.message.warn{
	color:#daad22;
	border-color:#daad22;
}
.message.warn:before{
	content:"\f071";
}
.message.warn.solid{
	color:#fff;
	background:#daad22;
}
.message.danger{
	color:#dc3545;
	border-color:#dc3545;
}
.message.danger:before{
	content:"\f06a";
}
.message.danger.solid{
	color:#fff;
	background:#dc3545;
}
.message.info{
	color:#2ba0c2;
	border-color:#2ba0c2;
}
.message.info:before{
	content:"\f129";
}
.message.info	.solid{
	color:#fff;
	background:#2ba0c2;
}
.message.silent{
	margin:5px;
	padding:5px;
	border:0;
	color:#555;
	margin-bottom:30px;
	border-left:3px solid #555;
	font-style:italic;
}
.infomessage{
	border:3px solid var(--smr);
	font-size:smaller;
	margin:1px;
	padding:5px;
}

/*scroll content*/
.scroll-content .scroll-col{
	border:0;
	margin:0;
	background:none;
	overflow-y:scroll;
}
/*scrollbox*/
.scrollbox{
	height:150px;
	overflow-y:scroll;
	overflow-x:hidden;
}
.scrollbox.s{
	height:200px;
}
.scrollbox.m{
	height:400px;
}
.scrollbox.xl{
	height:600px;
}

/*listbox*/
ul.no-list{
	margin:0;
	padding:0;
	list-style-type:none;
}
ul.listbox{
	margin:0;
	padding:0;
	list-style-type:none;
}
ul.listbox li{
	padding:15px;
	max-width:100%;
	background:#fff;
	margin:5px;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	overflow:hidden;
}
ul.listbox li.futured.disabled{
	opacity:.5;
}
ul.listbox.walkthrough li.passed,
ul.listbox.walkthrough li.active{
	opacity:1;
}

/*section*/
.workflow .section{
	display:none;
}
[section]{
	position:relative;
	overflow:hidden;
	width:auto;
	height:auto;
	padding:0 !important;
}
[section].unload{
	width:100px;
	height:100px;
	padding:70px !important;
}


/*toggle boxes*/
.box-content{
	display:none;
}

/*modal*/
#modal{
	background:rgba(0,0,0,0.8);
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:1000;
	display:none;
}
#modal .content{
	background:#fff;
	padding:15px;
	width:800px;
	height:600px;
	overflow-y:scroll;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-300px;
	margin-left:-400px;
}

/*togglebox*/
#togglebox .boxtitle{
	font-size:120%;
	color:#fff;
	opacity:.3;
}
#togglebox.tabed .boxtitle{
	padding:15px;
	/*border-bottom:1px solid #ccc;
	background: #eeeeee;
	background: -moz-linear-gradient(top,  #eeeeee 0%, #dddddd 100%);
	background: -webkit-linear-gradient(top,  #eeeeee 0%,#dddddd 100%);
	background: linear-gradient(to bottom,  #eeeeee 0%,#dddddd 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#dddddd',GradientType=0 );*/
	background:#333;
}
#togglebox.tabed .boxcontent{
	padding:15px;
	/*border:1px solid #ccc;*/
	border:1px solid #333;
	background:#fff;
}

/*input-switch*/
label.input-switch input,
label.input-switch select,
label.input-switch textarea,
label.input-switch .edit,
label.input-switch .save{
	display:none;
}
label.input-switch:hover .edit{
	display:inline;
}

/*message*/
#message{
	background:#138496;
	color:#fff;
	margin-top:15px;
	margin-bottom:15px;
	border-bottom:5px solid #106775;
}
#message .icon:before{
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content:"\f05a";
	font-size:56px;
	float:left;
	padding:15px;
	border-right:1px solid #106775;
	color:#106775;
}
#message .content{
	margin-left:100px;
	padding:25px;
}
#message.error{
	background:#dc3545;
	border-bottom:5px solid #bf2b39;
}
#message.error .icon:before{
	border-right:1px solid #bf2b39;
	color:#bf2b39;
}

/*tagcloud*/
.tagcloud{
	padding:15px;
}
.tagcloud span{
	display:inline-block;
	white-space: nowrap;
	font-size:12px;
	margin:3px;
	border:1px solid #aaa;
	color:#aaa;
	padding:5px;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
}

/*modal*/
#modalwindow,
#errorwindow{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background:rgba(0,0,0,.7);
	z-index:1000;
}
#modalwindow .modalbox,
#errorwindow .errorbox{
	width:80%;
	max-height:80%;
	overflow-y:scroll;
	background:#fff;
	margin:5% auto;
	position:relative;
}
#modalwindow .modalbox h4{
	position:sticky;
	left:0;
	top:0;
	z-index:1001;
}
#modalwindow .modalcontent{
	min-height:160px;
}
#modalwindow.noheader h4{
	display:none;
}
#errorwindow .errorbox{
	width:360px;
	height:360px;
	overflow:hidden;
	margin:5% auto;
	position:relative;
	background:#333;
}
#errorwindow .errorbox .errorcontent{
	position:absolute;
	bottom:15px;
	left:0;
	right:0;
	text-align:center;
	color:#fff;
}
#errorwindow .errorbox .errorcontent .desc{
	padding:5px;
	overflow-y:scroll;
	max-height:80px;
}
#errorwindow .errorbox .logo{
	position:absolute;
	top:15px;
	left:15px;
}
#errorwindow .errorbox .label{
	position:absolute;
	top:15px;
	right:15px;
	color:#fff;
}

.tabshow,
.mobshow{
	display:none;
}

/*flagtags*/
.flagtags{
	position:fixed;
	font-size:14px;
	top:60px;
	right:0;
	z-index:999;
}
.flagtags .tag{
	background:#ccc;
	color:#333;
	margin-bottom:5px;
	padding:10px;
	width:150px;
	box-shadow:2px 2px 5px rgba(0,0,0,.3), inset -15px 0 30px rgba(0,0,0,.5);
	white-space: nowrap;
	overflow:hidden;
	border-radius:5px 0 0 5px;
}
.flags.left{
	left:0;
	right:auto;
}
.flagtags.left .tag{
	border-radius:0 5px 5px 0;
}
.flagtags .tag span{
	margin-left:30px;
	margin-right:30px;
}
.flagtags .tag.green{
	background-color:#28a745;
	color:#fff;
}
.flagtags .tag.red{
	background-color:#dc3545;
	color:#fff;
}
.flagtags .tag.blue{
	background-color:#138496;
	color:#fff;
}
.flagtags .tag.yellow{
	background-color:#ebcb3f;
	color:#fff;
}
.flagtags .tag.black{
	background-color:#121212;
	color:#fff;
}

/*textquad*/
.textquad{
	width:15px;
	height:15px;
	display:inline-block;
	background-color:#eee;
}
.textquad.s{
	width:10px;
	height:10px;
}
.textquad.green{
	background-color:#28a745;
	color:#fff;
}
.textquad.red{
	background-color:#dc3545;
	color:#fff;
}
.textquad.blue{
	background-color:#138496;
	color:#fff;
}
.textquad.yellow{
	background-color:#ebcb3f;
	color:#fff;
}
.textquad.black{
	background-color:#121212;
	color:#fff;
}
/*textsquare*/
.textsquare{
	width:15px;
	height:10px;
	display:inline-block;
	background-color:#999;
	transition:all .2s;
	color:#444;
	padding:0 !important;
}
.textsquare span{
	display:none;
}
.textsquare.show{
	width:auto;
	line-height:25px;
	height:40px;
	min-width:30px;
	overflow:hidden;
	padding:5px !important;
	transition:all .2s;
}
.textsquare.show span{
	display:block;
	background:#fff;
	background: #fff;
	padding: 3px 10px 3px 10px;
	text-align: center;
}
.textsquare.green{
	background-color:#28a745;
}
.textsquare.red{
	background-color:#dc3545;
}
.textsquare.bblue{
	background-color:#74b1f2;
}
.textsquare.pink{
	background-color:#dc77f2;
}
.textsquare.yellow{
	background-color:#ffd061;
}
/*circlebadge*/
.cbadge{
	background:#ccc;
	color:#fff;
	display:inline-block;
	width:25px;
	height:25px;
	line-height:25px;
	text-align:center;
	border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	padding:0;
	margin:0;
	margin-right:15px;
}

/*lightbox*/
img.lightbox,
#dn-lightbox{
	cursor:pointer;
}
#dn-lightbox{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,.7);
	z-index:1002;
}
#dn-lightbox img{
	max-width:80%;
	max-height:80%;
	margin:5% auto;
	display:block;
}

#file-dragdropper{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100vh;
	font-size:2rem;
	text-align:center;
	background:rgba(43,160,194,.75);
	color:#fff;
	border:5px dashed #fff;
	display:none;
}
#file-dragdropper.active{
	display:block;
}
#file-dragdropper p{
	line-height:100vh;
}
#reader{
	position: absolute !important;
    top: 30px !important;
    left: 0 !important;
    width: 100%;
	z-index:2000;
}

/*timeline*/
 .timeline {
    list-style: none;
    padding: 10px 0;
    position: relative;
    font-weight: 300;
	opacity:0.5;
}
.timeline:hover{
	opacity:1;
	transition:opacity .5s;
}
.timeline:before {
    top: 0;
    bottom: 0;
    position: absolute;
    content:" ";
    width: 3px;
    background: #343434;
    left: 50%;
    margin-left: -1.5px;
}
.timeline > .li {
    margin-bottom: 20px;
    position: relative;
    width: 50%;
    float: left;
    clear: left;
}
.timeline > .li:before, .timeline > .li:after {
    content:" ";
    display: table;
}
.timeline > .li:after {
    clear: both;
}
.timeline > .li:before, .timeline > .li:after {
    content:" ";
    display: table;
}
.timeline > .li:after {
    clear: both;
}
.timeline > .li > .timeline-panel {
    width: calc(100% - 25px);
    width: -moz-calc(100% - 25px);
    width: -webkit-calc(100% - 25px);
    float: left;
    border: 1px solid #dcdcdc;
    background: #ffffff;
    position: relative;
}
.timeline > .li > .timeline-panel:before {
    position: absolute;
    top: 26px;
    right: -15px;
    display: inline-block;
    border-top: 15px solid transparent;
    border-left: 15px solid #dcdcdc;
    border-right: 0 solid #dcdcdc;
    border-bottom: 15px solid transparent;
    content:" ";
}
.timeline > .li > .timeline-panel:after {
    position: absolute;
    top: 27px;
    right: -14px;
    display: inline-block;
    border-top: 14px solid transparent;
    border-left: 14px solid #ffffff;
    border-right: 0 solid #ffffff;
    border-bottom: 14px solid transparent;
    content:" ";
}
.timeline > .li > .timeline-badge {
	color: #fff;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	position: absolute;
	top: 26px;
	right: -20px;
	z-index: 100;
	background: #2ba0c2;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
}
.timeline > .li > .timeline-badge:hover {
	background:#daad22;
}
.timeline > .li.timeline-inverted > .timeline-panel {
    float: right;
}
.timeline > .li.timeline-inverted > .timeline-panel:before {
    border-left-width: 0;
    border-right-width: 15px;
    left: -15px;
    right: auto;
}
.timeline > .li.timeline-inverted > .timeline-panel:after {
    border-left-width: 0;
    border-right-width: 14px;
    left: -14px;
    right: auto;
}
.timeline-badge > a {
    color: #fff;
}
.timeline-title {
    margin-top: 0;
    color: inherit;
}
.timeline-heading h4 {
    font-weight: 400;
    padding:10px;
	font-size:smaller;
    color: #4679bd;
	margin:0;
}
.timeline-body > p, .timeline-body > ul {
    padding: 10px;
    margin-bottom: 0;
}.timeline-body > p strong{
	font-weight:bold;
}
.timeline-footer {
    padding: 5px 15px;
    background-color:#f4f4f4;
}
.timeline-footer p { margin-bottom: 0; }
.timeline-footer > a {
    cursor: pointer;
    text-decoration: none;
}
.timeline > .li.timeline-inverted {
    float: right;
    clear: right;
}
.timeline > .li:nth-child(2) {
    margin-top: 60px;
}
.timeline > .li.timeline-inverted > .timeline-badge {
    left: -20px;
}

/*tabs*/
.tab-area ul.tab-navigation{
	list-style-type:none;
	margin:0;
	padding:0;
	font-size:smaller;
	margin:15px 0 0 0;
}
.tab-area ul.tab-navigation li{
	display:inline-block;
	cursor:pointer;
	background:#eee;
	padding:10px;
}
.tab-area ul.tab-navigation li.active{
	color:#fff;
	background:#444;
}
.tab-area .tab-content{
	display:none;
	border:1px solid #ccc;
	margin-bottom:100px;
	padding:10px;
}
.tab-area .tab-content.active{
	display:block;
}

/*overlay*/
.overlay{
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.8);
	display:none;
	z-index:1002;
}
.overlay .overlay-content{
	padding:15px;
	color:#fff;
	max-width:300px;
	margin:20% auto;
	text-align:center;
}
.overlay .overlay-content .txt{
	margin-top:15px;
}

/*signature*/
#signature{
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	width:100%;
	height:100%;
	background:#34e8eb;
	z-index:1002;
}
#signature .content{
	position:relative;
	width:100%;
	height:100vh;
}
#signature canvas{
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	background:#ccc;
}
#signature.signature_driver canvas{
	background:#ebcc34;
}

#signature .content .btn.op-del,
#signature .content .btn.op-skip{
	position:fixed;
	left:0;
	bottom:5px;
}
#signature .content .btn.op-go,
#signature .content .btn.op-turn{
	position:fixed;
	right:0;
	bottom:5px;
}


/*ui notifications*/
.dash-message{
	position:fixed;
	z-index:1002;
	bottom:0;
	left:0;
	right:0;
	background: #138496;
	width:100%;
	color:#fff;
	padding:10px;
}
.dash-message.error{
	background:#dc3545;
}
.dash-message.success{
	background:#28a745;
}

/*overlay bottom menu*/
.sync-queue-box{
	color:#333;
	background: #eee;
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 20px;
	top:50px;
    z-index: 1001;
}
.sync-queue-box .content-box{
	height:70vh;
	overflow-y:scroll;
}
.overlay-bottom-box{
	background: #eee;
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 1001;
	border:1px solid #ddd;
}
.overlay-bottom-box.fullsize{
	top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
.overlay-bottom-box.fullsize .overlay-content{
	height:calc(100% - 50px);
}
.overlay-bottom-box h3 {
    padding: 10px;
    background: #333;
}
.overlay-bottom-box .overlay-content {
    height:70vh;
	overflow-y:scroll;
	border:1px solid #ddd;
}
.overlay-bottom-box .col.bg-white{
	border:1px solid #aaa;
}

/*indicator message*/
.indicator-message{
	position:fixed;
    left: 0;
    right: 0;
    bottom: 0;
	top:0;
    z-index: 1001;
	width:100%;
	height:100%;
}
.indicator-container{
	position:relative;
	width:100%;
	height:100%;
}
.indicator-box{
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	text-align:center;
	line-height:2;
	font-size:1.2rem;
}
.indicator-box .icon{
	font-size:5rem;
}
.indicator-box button{
	text-align:center;
	min-width:50%;
	font-size:1rem;
	background:rgba(0,0,0,0.2);
	border:0;
	color:#fff;
	padding:15px;
}
.indicator-toast{
	position:fixed;
    left: 5px;
    right: 5px;
    bottom: 50px;
    z-index: 1001;
}

/*contrastmode*/
body.contrast{
	background:#222;
	color:#fff;
}
body.contrast .overlay-bottom-box{
	background:#485244;
	color:#fff;
}
body.contrast .overlay-bottom-box .col.bg-white{
	border:1px solid #1a3810;
}

body.contrast .footer{
	background: #121212;
    color: #222;
}




body.contrast input.nve.scanshot{
	background:#485244;
	color:#fff;
	border-color:#1a3810;
}
body.contrast input.nve.scanshot::placeholder{
	color:#fff;
}
body.contrast .nve-scanshot-container:after{
    color: #fff;
}
body.contrast h3.title{
	background: #121212;
    padding: 10px;
    border-bottom: 3px solid #000;
}
body.contrast .panel-elm{
	background: #1e1e1e;
    margin: 10px 0;
}

/*loadbar*/
.fading,
.ch-preloader {
  -webkit-animation: load1 2s infinite ease-in-out;
  animation: load1 2s infinite ease-in-out;
}
@-webkit-keyframes load1 {
  0%{
	opacity:.3;
  }
  50%{
	opacity:1;
  }
  100% {
    opacity:.3;
  }
}
@keyframes load1 {
   0%{
	opacity:.3;
  }
  50%{
	opacity:1;
  }
  100% {
    opacity:.3;
  }
}

.spin{
	display:inline-block !important;
	-webkit-animation-name: spin;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 5s;

    animation-name: spin;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 5s;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.turn-once{
	-webkit-animation-name: spin;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: .5s;

    animation-name: spin;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-duration: .5s;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

/*preloader*/
.preloader .overlay-content .typing_loader{
    width: 6px;
    height: 6px;
    border-radius: 50%;
    -webkit-animation: typing 1s linear infinite alternate;
       -moz-animation: Typing 1s linear infinite alternate;
            animation: typing 1s linear infinite alternate;
    margin: 0 auto;
    position: relative;
    left: -12px;
}
@-webkit-keyframes typing{
    0%{
        background-color: rgba(255,255,255, 1);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                    24px 0px 0px 0px rgba(255,255,255,0.2);
      }
    25%{ 
        background-color: rgba(255,255,255, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,2), 
                    24px 0px 0px 0px rgba(255,255,255,0.2);
    }
    75%{ background-color: rgba(255,255,255, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                    24px 0px 0px 0px rgba(255,255,255,1);
      }
}

@-moz-keyframes typing{
   0%{
        background-color: rgba(255,255,255, 1);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                    24px 0px 0px 0px rgba(255,255,255,0.2);
      }
    25%{ 
        background-color: rgba(255,255,255, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,2), 
                    24px 0px 0px 0px rgba(255,255,255,0.2);
    }
    75%{ background-color: rgba(255,255,255, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                    24px 0px 0px 0px rgba(255,255,255,1);
      }
}

@keyframes typing{
   0%{
        background-color: rgba(255,255,255, 1);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                    24px 0px 0px 0px rgba(255,255,255,0.2);
      }
    25%{ 
        background-color: rgba(255,255,255, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,2), 
                    24px 0px 0px 0px rgba(255,255,255,0.2);
    }
    75%{ background-color: rgba(255,255,255, 0.4);
        box-shadow: 12px 0px 0px 0px rgba(255,255,255,0.2), 
                    24px 0px 0px 0px rgba(255,255,255,1);
      }
}

/*mobile*/
@media only screen and (max-width: 1024px) {
  .grid .elm{
	  width:calc(33% - 2px) !important;
  }
  .tabhide{
	  display:none !important;
  }
  .tabshow{
	  display:block;
  }
  .row .col-2 {
    width:100% !important;
	display:block !important;
	margin:0;
  }
}
@media only screen and (max-width: 768px) {
	/*.grid,
	.grid .elm,
  .row .col {
    width:100% !important;
	display:block !important;
	margin:0;
  }*/
  .grid .elm{
	  margin-bottom:5px;
  }
  .grid .elm .content,
  .grid .elm{
	  width:50% !important;
	  margin:0;
	  border:0;
  }
  #left-sub-navigation,
  #left-navigation{
	  position:fixed !important;
	  margin:0 !important;
	  padding:0 !important;
	  width:100% !important;
	  display:none;
	  z-index:1001;
  }
  
  /*timeline*/
  ul.timeline:before {
        left: 40px;
    }
    ul.timeline > .li {
        margin-bottom: 0px;
        position: relative;
        width:100%;
        float: left;
        clear: left;
    }
    ul.timeline > .li > .timeline-panel {
        width: calc(100% - 65px);
        width: -moz-calc(100% - 65px);
        width: -webkit-calc(100% - 65px);
    }
    ul.timeline > .li > .timeline-badge {
        left: 28px;
        margin-left: 0;
        top: 16px;
    }
    ul.timeline > .li > .timeline-panel {
        float: right;
    }
    ul.timeline > .li > .timeline-panel:before {
        border-left-width: 0;
        border-right-width: 15px;
        left: -15px;
        right: auto;
    }
    ul.timeline > .li > .timeline-panel:after {
        border-left-width: 0;
        border-right-width: 14px;
        left: -14px;
        right: auto;
    }
    .timeline > .li.timeline-inverted {
        float: left;
        clear: left;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .timeline > .li.timeline-inverted > .timeline-badge {
        left: 28px;
    }
	
	/*tabs*/
	.tab-area ul.tab-navigation li{
		display:block;
	}
}
/*mobile*/
@media only screen and (max-width: 360px) {
  .mobhide{
	  display:none !important;
  }
  .mobshow{
	  display:block;
  }
  .mobfull.hspace{
	  margin:0;
	  margin-bottom:5px;
  }
  .mobfull{
	  display:block;
	  width:100%;
  }
}