body{
	background-color:#FFF;
	font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
	padding: 0px;
	margin: 0px;
	height: 100%;
}


#login {
	display: none;
	background: #78d5ff;
	border: solid 1px black;
	overflow: auto;
	position: absolute;
	left: 50%;
	border-radius: 8px;
}

#login td{
	padding: 0.7rem;
	font-size:1.8rem;
}

#login input,#login select{
	font-size:1.8rem;
}

#login input[type=submit] {
	padding:5px 25px; 
	background:#ccc; 
	cursor:pointer;
	-webkit-border-radius: 5px;
	border-radius: 5px; 
}

#main {
	display: none;
	width: 100%;
	height: 100%;
	background:#ccc;
}

#loader{
	display: none;
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 19999;
	background: url("../img/load.gif") 50% 50% no-repeat rgb(249,249,249);
	background-color: transparent;
	text-align: center;
	vertical-align: middle;
	text-shadow: 6px 3px 4px #CE5937;
	font-size:4vh;
}

.picBtn{
	cursor:pointer;
	margin: 5px;
}

.picBtn:hover{
	filter: drop-shadow(0 0 0.75rem crimson);
}

.picBtnDisable{
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
	filter: grayscale(100%);
	pointer-events: none;
}

#topDiv{
	width: 100%;
	background:#DDD; 
}

#centerDiv {
	display: block;
	background: linear-gradient( #07aeed, #fff );
	border-top: none;
	overflow-x: hidden; 
	overflow-y: scroll;
	padding-left: 3vw;
}

#centerDiv2 {
	display: none;
	background: linear-gradient( #07aeed, #fff );
	overflow-x: hidden; 
	overflow-y: scroll;
	height: 100%;

}

.cdt {
	font-family: Tahoma;
	font-size:70%;
}


.stopParty{
	cursor:pointer;
	color: navy;
	background: #FFC;
	border: 1px solid red;
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 15px;
}

.stopParty:hover{
	background: #FF7;
	filter: drop-shadow(0 0 0.25rem crimson);
}

.spanTimer{
	color: navy;
	background: #DDD;
	border: 1px solid gray;
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 15px;
	font-size:70%;
	padding-top:2px;
}

#codeInfo{
	border-collapse: collapse;
	cursor: pointer;
}

#codeInfo td{
	border: 1px solid #007;
}
/*
#picHelp{
	display: none;
	position: fixed;
	right: 25px;
	top: 55px;
	width: 200px;
	height: 200px;
	z-index: 19999;
	background-image: url("../img/background-scaner-box.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	opacity:0.5;
	border-radius: 20px;
}
*/


#ContractorList{
	width: 100%;
	border-collapse: collapse;
	font-size: 1.5rem;
}

#ContractorList td{
	border: 1px solid #000;
	padding: 5px;
}

#ContractorList thead td{
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
}

.t1:hover{
	background-color: lightblue;
	cursor: pointer;
}

.tdStat2{
	padding: 0px !important;
}

#stat2table{
	width: 100%;
	border-collapse: collapse;
	background-color: #fff;
}

#stat2table thead td{
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
	background-color: #ccc;
}

#stat2table td{
	border: 1px solid #555;
	padding: 5px;
}

#stat2table tbody tr:hover{
	background-color: #ccc;
}

#stat1 {
	display: none;
	width: 100%;
	height: 100%;
	background:#acc;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 99999;
}

.deleteQR{
	font-size: 0.8rem;
}

.deleteQR:hover{
	background: #FF7;
}








.maintable{
	width: 100%;
	border-collapse: collapse;
}

.maintable td{
	border: 1px solid #000;
	padding: 0.3vw;
}

.resultTable{
	width: 100%;
	border-collapse: collapse;
}

.resultTable thead{
	background: #CCC;
	font-weight: bold;
	text-align: center;
}

.resultTable td{
	border: 1px solid #000;
	position: relative;
}

@media only screen and (orientation: portrait) {
	.info{
		bottom: 0px;
		right: 0px;
		width: 100%;
		height: auto;
	}
	.size{
		text-align: center;
		vertical-align:top;
	}
}

@media only screen and (orientation: landscape) {
	.info{
		top: 0px;
		right: 0px;
		width: auto;
		height: 100%;
	}
	.size{
		text-align: left;
		vertical-align:middle;
	}
}

.info{
	position: absolute;
	text-align: right;
	/*padding: 0px 5px 0px;*/
	cursor: pointer;
	background: #C8C;
}

.info1{
	background: #f7ffbc;
	top: 0px;
	height: 50%;
	vertical-align:top;
}

.info2{
	background: #ffb4b4;
	bottom: 0px;
	height: 50%;
	vertical-align:bottom;
}

#downloadInfo,#boxInfo{
	overflow-x: scroll; 
	overflow-y: hidden;
}


/* Custom, iPhone Retina       ###   ###   ###   ###   ###   ###   ###   ###   ###   ###   ###   ###   ###   ###   */
@media only screen and (min-width : 320px) and (orientation: portrait) {
	body,.m1 {font-size:8vw;}
	.balloonTab,.balloonTab button {height:15vw;}
	#downloadInfo,.balloonTab button,.messagebox{font-size: 6vw;}
	#resultTxt{font-size: 8vw;}
	.resultTable{font-size: 6vw;}
	.info{font-size: 5vw;}
	#login {width: 90vw;	margin-left: -45vw;		height: 50vh;	top: calc(50% - 25vh);}
}

@media only screen and (min-width : 320px) and (orientation: landscape) {
	body,.m1 {font-size:6vw;}
	.balloonTab,.balloonTab button {height:6vw;}
	#downloadInfo,.balloonTab button,.messagebox{font-size: 2vw;}
	#resultTxt{font-size: 5vw;}
	.resultTable{font-size: 3vw;}
	.info{font-size: 1vw;}
	#login {width: 70vw;	margin-left: -35vw;		height: 70vh;	top: calc(50% - 35vh);}
}

/* Extra Small Devices, Phones ###   ###   ###   ###   ###   ###   ###   ###   ###   ###   ###   ###   ###   ###   */
@media only screen and (min-width : 480px) and (orientation: portrait) {
	body,.m1 {font-size:8vw;}
	.balloonTab,.balloonTab button {height:11vw;}
	#downloadInfo,.balloonTab button,.messagebox{font-size: 4vw;}
	#resultTxt{font-size: 6vw;}
	.resultTable{font-size: 5vw;}
	.info{font-size: 3vw;}
	#login {width: 90vw;	margin-left: -45vw;		height: 50vh;	top: calc(50% - 25vh);}
}

@media only screen and (min-width : 480px) and (orientation: landscape) {
	body,.m1 {font-size:5vw;}
	.balloonTab,.balloonTab button {height:7vw;}
	#downloadInfo,.balloonTab button,.messagebox{font-size: 2.5vw;}
	#resultTxt{font-size: 3vw;}
	.resultTable{font-size: 3vw;}
	.info{font-size: 1.6vw;}
	#login {width: 70vw;	margin-left: -35vw;		height: 90vh;	top: calc(50% - 45vh);}
}

/* Small Devices, Tablets     ###   ###   ###   ###   ###   ###   ###   ###   ###   ###   ###   ###   ###   ###   */
@media only screen and (min-width : 768px) and (orientation: portrait) {
	body,.m1 {font-size:7vw;}
	.balloonTab,.balloonTab button {height:10vw;}
	#downloadInfo,.balloonTab button,.messagebox{font-size: 5vw;}
	#resultTxt{font-size: 3vw;}
	.resultTable{font-size: 4vw;}
	.info{font-size: 2vw;}
	#login {width: 90vw;	margin-left: -45vw;		height: 24vh;	top: calc(50% - 12vh);}
}

@media only screen and (min-width : 768px) and (orientation: landscape) {
	body,.m1 {font-size:4vw;}
	.balloonTab,.balloonTab button {height:6vw;}
	#downloadInfo,.balloonTab button,.messagebox{font-size: 3vw;}
	#resultTxt{font-size: 3vw;}
	.resultTable{font-size: 3vw;}
	.info{font-size: 1.6vw;}
	#login {width: 70vw;	margin-left: -35vw;		height: 80vh;	top: calc(50% - 40vh);}
}

/* Medium Devices, Desktops  ###   ###   ###   ###   ###   ###   ###   ###   ###   ###   ###   ###   ###   ###   */
@media only screen and (min-width : 992px) and (orientation: portrait) {
	body,.m1 {font-size:4vw;}
	.balloonTab,.balloonTab button {height:5vw;}
	#downloadInfo,.balloonTab button,.messagebox{font-size: 2.5vw;}
	#resultTxt{font-size: 3vw;}
	.resultTable{font-size: 3vw;}
	.info{font-size: 2vw;}
	#login {width: 90vw;	margin-left: -45vw;		height: 24vh;	top: calc(50% - 12vh);}
}

@media only screen and (min-width : 992px) and (orientation: landscape) {
	body,.m1 {font-size:2vw;}
	.balloonTab,.balloonTab button {height:5vw;}
	#downloadInfo,.balloonTab button,.messagebox{font-size: 2.5vw;}
	#resultTxt{font-size: 2vw;}
	.resultTable{font-size: 3vw;}
	.info{font-size: 1.7vw;}
	#login {width: 70vw;	margin-left: -35vw;		height: 40vh;	top: calc(50% - 20vh);}
}

/* Large Devices, Wide Screens ###   ###   ###   ###   ###   ###   ###   ###   ###   ###   ###   ###   ###   ###   */
@media only screen and (min-width : 1200px) and (orientation: portrait) {
	body,.m1 {font-size:2vw;}
	.balloonTab,.balloonTab button {height:2vw;}
	#downloadInfo,.balloonTab button,.messagebox{font-size: 1vw;}
	#resultTxt{font-size: 1.5vw;}
	.resultTable{font-size: 1.5vw;}
	.info{font-size: 2vw;}
	#login {width: 90vw;	margin-left: -45vw;		height: 30vh;	top: calc(50% - 15vh);}
}

@media only screen and (min-width : 1200px) and (orientation: landscape) {
	body,.m1 {font-size:2vw;}
	.balloonTab,.balloonTab button {height:4vw;}
	#downloadInfo,.balloonTab button,.messagebox{font-size: 2vw;}
	#resultTxt{font-size: 2vw;}
	.resultTable{font-size: 3vw;}
	.info{font-size: 1.6vw;}
	#login {width: 40vw;	margin-left: -20vw;		height: 50vh;	top: calc(50% - 25vh);}
}

#resultTable .resultTableCN{
	font-size: 70%;
}

#boxTable tbody td:nth-child(1),#boxTable tbody td:nth-child(2),#boxTable tbody td:nth-child(5){
	font-size: 80%;
}

#boxTable tbody td:nth-child(3),#boxTable tbody td:nth-child(4){
	font-size: 50%;
}

#resultTable .razdTD{
	background: #CCC;
	height: 1rem;
	cursor: pointer;
}

#resultTable .razdTD:hover{
	background: #999;
}

.trParty{
	display:none;
	background: #DDD;
}

.trGray{
	background: #DDD;
}

.blink {
	-webkit-animation: blink-animation 0.2s infinite;  /* Safari 4+ */
	-moz-animation: blink-animation 0.2s infinite;  /* Fx 5+ */
	-o-animation: blink-animation 0.2s infinite;  /* Opera 12+ */
	animation: blink-animation 0.2s infinite;  /* IE 10+, Fx 29+ */
}

@-webkit-keyframes blink-animation {
	0%, 49% {
		background-color: white;
		color: black;
	}
	50%, 100% {
		background-color: black;
		color: white;
	}
}

.messagebox{
	position: fixed;
	left: 3px;
	/*bottom: 3px;*/
	width: calc(100% - 0.6vw);
	height: 10vh;
	background: cornsilk;
	border: 1px solid black;
	border-radius: 5px;
	z-index: 99;
	opacity: 0.75;
	text-align: center;
}

#balloonSelect{
	padding: 0px;
	margin: 0px;
	background: cornsilk;
}

.mymenu{
	width: 100%;
	height: 100%;
}

#mymenu_9{
	display: none;
}

.balloonTab {
	overflow: hidden;
	border: 1px solid #ccc;
	border-top: none;
}
.balloonTab button {
	background-color: inherit;
	color:#009;
	float: left;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 1px 5px;
	margin: 2px 1px 0px 1px; /* сверху | справа | снизу | слева */
	transition: 0.3s;
	font-family: Impact, Charcoal, sans-serif;
	border-top-right-radius: 1rem;
	border-top-left-radius: 1rem;
	background-color: #eee;
	border: 1px solid #999;
	border-bottom: none;
}
.balloonTab button:hover {
	background-color: #ddd;
}
.balloonTab button.active {
	background-color: #ff7373;
}
.balloonTabContent {
	display: none;
	border-top: none;
	overflow-x: hidden; 
	overflow-y: scroll;
}

#listLog{
	font-size: 61%;
}

.listLogBarCode{
	font-size: 80%;
	background: cornsilk;
	font-family:Impact, fantasy;
}

#pic{
	display: none;
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background: cornsilk;
	z-index: 99;
	text-align: center;
	text-shadow: 1px 1px 5px #FFF;
	font-size:2rem;
	font-weight: bold;
	
	background-repeat: no-repeat; 
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	background-size: contain;
	background-position: center;
}

#f007{
	font-size:12px;
	position: fixed;
	left: 0px;
	bottom: 0px;
	z-index: 100;
}