@charset "utf-8";
/* CSS Document */
*{ margin:0px; padding:0px;}
.fl { float:left;}
.fr{ float:right;}
body { font-family: "Varela Round", sans-serif; background:#ffffff;}
body.ticket { width:80mm; font-size:12px;}
.menu{width:80px; height:100%; background:rgba(68,68,68,1); float:left; position:fixed; z-index: 10; box-shadow:2px 0px 5px #585858; overflow:hidden; text-align:center; }
.menu .content { margin:auto; color:#c9c9c9; font-size:12px;}
.menu strong { border:solid thin #444444; border-radius:10px; display:block; float:left; width:70px;  text-align: center; margin:5px 4px 5px 4px; padding:5px 0 5px 0; color:#c9c9c9;}
.menu strong:hover { transition: 0.6s; border:solid thin #F2BA0B; color:#F2BA0B; }
.menu strong:selected { transition: 0.6s; border:solid thin #F2BA0B; color:#F2BA0B; }
.menu  { color:#c9c9c9; text-decoration:none;}
.menu img.menuicon { display:none;}
img.userpic { width:120px; border-radius:20px; margin: 10px 20px 10px 20px;}
.menu img.logo { width:70px; float:left;}
.menu .menuelements { margin-top:20px;}
.menu table { text-align:left; font-size:18px;}
.menuinmain strong { border:solid thin #444444; border-radius:10px; display:block; float:left; width:100px;  text-align: center; margin:5px 4px 5px 4px; padding:10px 0 10px 0;}
.menuinmain strong:hover { transition: 0.6s; border:solid thin #F2BA0B;}
.menuinmain a { color:#000000; text-decoration:none;}
.menuinmain i { color:#F2BA0B; font-size:56px;}
.menuinmain table { text-align:left; font-size:18px;}
.smallsq { float:left; width:200px; border:solid thin grey; margin:5px; border-radius:5px; color:#000000;}
.smallsq .imgcont { width:200px; height:160px; overflow: hidden; }
.smallsq img { width:200px;}
.smallsq .title { width:100%; float:left; text-align:center; }

.top {width:100%; height:60px; background:rgba(68,68,68,1); float:left; margin-top:0px; border-bottom:solid 2px #F2BA0B; }
.top .content { max-width:900px; min-width:290px; text-align:center; color:#ffffff;}
.top .content .userpic { width:40px; height:40px; border-radius:50px; background:#ffffff;}
.top .content i { color:#F2BA0B; font-size:36px;}
.top h1 { font-size:64px; margin-top:10px; color: #cbb07f;}
.top p{font-size:20px; border:solid thin;}
.main { width:100%; min-height:800px;float:left; }
.main .content { width:calc(100% - 90px);  min-width:290px; margin:5px; }
.under-main{ width:100%; min-height:180px; background:rgba(203,176,127,0.8); float:left;}
.under-main .content{max-width:900px; min-width:290px; margin:auto;}
.under-main .content table {width:100%; margin-top:15px; text-align:center; color:#5d4334;}
.under-main .content table img { transition:0.5s;}
.under-main .content table img:hover { margin-top:-20px; transition:0.4s;}
.footer { width:100%; min-height:50px; background:#444444;}
.footer .content { min-width:290px;  color:#ffffff; font-size:14px; }
.footer .content table.somekeywords { width:100%; max-width:900px; min-width: 290px; vertical-align: text-top;}
b.badge { display:block; margin:auto; margin-top:5px; background:#F2BA0B; width:80px; padding:2px 5px 2px 5px; color:#444444; border-radius:5px;}
div.correct { text-align:center; background:#a3ffb8; color:#00ad11; font-size:24px; margin-top:30px; padding:20px 20px 20px 20px; border:solid thin #00ad11; border-radius:5px; }
div.wrong { text-align:center; background:#ff9999; color:#9b0000; font-size:14px; padding:20px 20px 20px 20px; border:solid thin #9b0000; border-radius:5px;}
div.alert { text-align:center; background:#ffb28f; color:#ff5100; font-size:14px; margin-top:30px; padding:20px 0 20px 0; border:solid thin #9b0000; border-radius:5px;}
div.largediv  { width:100%; margin: 0px 0 20px 0; float:left;}
.help { line-height:2em;}
i.inform { font-size:30px; cursor:pointer; }
strong.denomination { float:left; font-size:24px;}
a img { border:none;}
/*------------img-------------------------------*/
img.thumb { width:40px; transition:.2s;}
img.thumb:hover { transform:scale(7); z-index: 10; transition:.1s;}
/*-------------colors---------------------------*/
.yel { color : #F2BA0B;}
.gre { color: #444444;}
.green { color : #31ad00; }
.red { color: #fc0303;}
.violet { color:#9900ad; }
.blue { color: #0062ff;}
.orange { color:orange;}
.bv {color: #0062ff;}
.turquois { color: #41bebe; }
/*-----------------myDiv-----------------------*/
div#myDiv { position:absolute; background:#ffffff; width:400px; max-height:300px; overflow:auto;}
div#myDiv strong { width:100%; display:block;font-size:12px; color:#000000; padding:3px 0 3px 0;}
div#myDiv strong:hover {background:#326fa1; color:#ffffff; cursor: pointer;}
.bout { width:180px; border-radius:5px; float: left; background:#444444; color:#ffffff; text-align:center; font-size: 20px; margin:10px; padding:10px 0 10px 0; }

.bout i { font-size:36px;}
.bout:hover {  background:#F2BA0B; color:#444444; text-align:center; margin:10px;}
.bout input[type="radio"] { display:none;}
.disabled { background:lightgrey;}
.disabled:hover { background:lightgrey; color:white;}
.clicked {background:#F2BA0B; box-shadow:#F2BA0B 0 0 5px;}
div#listclienthere { position:absolute; background:#F2BA0B; width:400px; max-height:300px; overflow:auto;}
div#listclienthere strong { width:100%-10px; display:block;font-size:12px; color:#444444; padding:3px 0 3px 10px;}
div#listclienthere strong:hover {background:#F2BA0B; color:#ffffff; cursor: pointer;}
div.sl100 { float:left; width:100%;}
div.fl { float:left; }/*width:50%;*/
div.fr { float:right; }/*width:50%;*/
div#alerthere { display:block; height:60px;}
/*---------------------table-------------------*/
table.tabform {margin:20px 0 0 20px; font-size:14px; }
table.ticket {width:100%; font-size:10px;}
/*table.tabform input[type="text"],table.tabform input[type="password"], table.tabform input[type="date"]{ width:300px; height:20px; border-radius:5px; border:solid thin grey; }*/

table.tabform input[type="text"],table.tabform input[type="number"],table.tabform input[type="password"], table.tabform input[type="date"]{ width:300px; height:30px; border-radius:4px; border:solid thin grey; }

/*table.tabform select { width:300px; height:20px; border-radius:5px; border:solid thin grey; }*/

table.tabform select { width:300px; height:30px; border-radius:4px; border:solid thin grey; }


table.tabform input[type="text"]:focus { border:solid thin #F2BA0B; box-shadow:0 0 5px #F2BA0B;}
table.simpletab { width:100%; background:#444444; color:#ffffff; border:solid thin; border-collapse:collapse; margin:20px 0 20px 0; font-size:14px;}
table.simpletab tr { height:40px;}
table.simpletab th {background:#F2BA0B; color:#444444; text-align:left; }
table.simpletab td { }
table.nif { float:right; min-width:200px; text-align:right;}
table.resum {  min-width:250px; text-align:right;}
table.resum td { padding:5px;}
table.fll { float:left; width:200px;}
.datatableaddstyle { font-size: 14px;}
/*-----------------input------------------------*/
input[type="submit"]{ min-width:120px; height:30px; border:none; background:#F2BA0B; color:#444444; border-radius:5px; font-size:18px; }
.form-t1 input[type="text"]{ width:100%; height:100%;}
.form-t1 input.smallinput { width:30px;}
.form-t1 input.mediuminput { width:100px;}
.form-t1 input.longinput { width:300px;}
.addbutton { width:20px;}
/*------------------id------------------------*/
#totalght { text-align: right; }
#totalgvat { text-align: right; }
#totalgremise { text-align: right; }
#totalgttc { text-align: right; }
#timbre { text-align: right; }
#clientinfo {  width:300px; background:#444444; color:#ffffff; border-radius:5px; padding:10px; margin:5px; }
/*---------------pop up--------------------*/
div.dialogbox { width:500px; height:80%; background:white; z-index: 10; margin-top:100px; margin-left:auto; margin-right:auto; margin-bottom:auto; transition: margin-top .2s; padding:10px; border-radius:10px; border:solid thin grey;}
div.dialogboxcontainer{left:0; top:0; background: rgba(0,0,0,0.4); width:100%; height:100%; position:fixed;}
div.dialogbox img.close { position:absolute;}
div.dialogbox img.alerticon { margin-left:calc(50% - 128px/2);}
iframe { border:none; width:100%; height:100%;}
/*------------------h--------------------------------------------------*/
h1.ct{ text-align:center;}
/*------------------h--------------------------------------------------*/
ol li { list-style-position: inside;}
/*-----------------------------forms----------------------------------*/
form { line-height:2em;}
/*-----------------------------canvas----------------------------------*/
.font10 { font-size:14px !important;}
/*-----------------------------canvas----------------------------------*/
.cws { width:50%; float:left;  }
.cws2 { width:100%; float:left;  }
/*---------------------------------------------------------------------*/
@media screen and (max-width:450px)
{
	.menu {width:100%; height:30px; background:rgba(39,132,189,0.8); float:left; position: fixed; z-index: 10;}
	.menu img {float:left;}
	.menu img.logo { display:none;}
	.menu img.userpic { display:none;}
	.menu img.menuicon { display:initial; float:left;}
	.menu img.menuicon:hover .menuelements { height:300px;}
	.menu strong { display:block; float:left; width:auto; text-align: center; margin-top:0px;}
	.main .content { margin-left:0px; background:red;}
}
@media print
{
	body
	{
		
	}
	table.simpletab
	{
		border:solid thin grey;
	}
	table.simpletab th 
	{
		background:#F2BA0B; 
		background-image:linear-gradient(lightgrey,white); 
		padding-left:5px;
		padding-right:5px;
		border:solid thin grey;
	}
	table.simpletab td
	{
		border:solid thin grey;
		padding:3px;
		font-size:10px;
	}
	table.simpletab
	{
		color-adjust: exact; 
		-webkit-print-color-adjust: exact; 
		print-color-adjust: exact;
		background:white;
		color: black;
	}
}
/*---------------stat style-------------------*/
div.smallstats{ float:left; float:left; width:240px; height:80px; box-shadow:0px 0px 5px grey; border-radius:5px; margin:5px; text-align: right; background: linear-gradient(white,lightgrey); font-size:1em;}
div.smallstats .material-icons { font-size:36px;}
div.smallstats h2 { font-size:1.2em; text-weight:bold;}
div.smallstats table { height:80px; width:95%;}
div.smallstats .orange { color:orange; }
div.smallstats .red { color:red; }
div.smallstats .green { color:green; }