/* PAGE CONTENT STYLES BEGINS*/

#page_content{
	width:100%;
	height:100%;
	position:relative;
	top:0px;
	left:0px;
	
}
#vlab_assets{
	width:100%;
	height:100%;
}
.lab_screen{
	width:100%;
	height:100%;
}
#lab_screen1{
	background:url(../images/mainBg.png) no-repeat top left;	
}
#lab_screen2{
	background:url(../images/mainBg2.png) no-repeat top left;	
	display:none;
}
.lab_microscope{
	width:85px;
	height:146px;
	position:absolute;
	top: 132px;
	left: 32px;
	background:url(../images/microscope.png) no-repeat top left;	
}
.lab_microscope.active:hover{
	cursor:pointer;
	background-position:top right;
}
.lab_drop{
	width:35px;
	height:217px;
	position:absolute;
	top: 250px;
	left: 201px;
	background:url(../images/drop.png) no-repeat left top;	
	cursor:pointer;
}
.ui-draggable-disabled{
	cursor:default;
}
.lab_drop .drop_cover{
	width:37px;
	height:80px;
	position:relative;
	top:-2px;
	left:-1px;
	background:url(../images/drop_cover.png) no-repeat left top;		
	opacity:0;
	cursor:pointer;
}
.lab_drop .drop_cover:hover{
	opacity:1;
}
.lab_drop.active .drop_cover{
	display:none;
}
.lab_drop.active{
	-webkit-animation:dropFill 0.3s steps(2) forwards;
	-ms-animation:dropFill 0.3s steps(2) forwards;
	-moz-animation:dropFill 0.3s steps(2) forwards;
	animation:dropFill 0.3s steps(2) forwards;
}
.lab_drop.active.bottle1{
	left: 475px !important;
	top: 90px !important;
}
.lab_drop.active.bottle2{
	left: 535px !important;
	top: 90px !important;
}
.lab_drop.active.bottle3{
	left: 590px !important;
	top: 90px !important;
}
@-webkit-keyframes dropFill{to{background-position:-70px;}}
@-ms-keyframes dropFill{to{background-position:-70px;}}
@-moz-keyframes dropFill{to{background-position:-70px;}}
@keyframes dropFill{to{background-position:-70px;}}
.lab_drop.active.bottle1,
.lab_drop.active.bottle2,
.lab_drop.active.bottle3{
	-webkit-animation:dropEmpty 0.3s steps(2) forwards;
	-ms-animation:dropEmpty 0.3s steps(2) forwards;
	-moz-animation:dropEmpty 0.3s steps(2) forwards;
	animation:dropEmpty 0.3s steps(2) forwards;

}
@-webkit-keyframes dropEmpty{from{background-position:-70px;}to{background-position:-140px;}}
@-ms-keyframes dropEmpty{from{background-position:-70px;}to{background-position:-140px;}}
@-moz-keyframes dropEmpty{from{background-position:-70px;}to{background-position:-140px;}}
@keyframes dropEmpty{from{background-position:-70px;}to{background-position:-140px;}}

#lab_drop2{
	left: 320px;
}
.stock_button{
	width:117px;
	height:64px;
	position:absolute;
	background:url(../images/label.png) no-repeat left top;	
	top:456px;
	left:142px;
	cursor:pointer;
}
#stock_button2{
	background-position:top right;	
	left:276px;
}
.stock_button:hover{
	box-shadow:0px 0px 2px 2px #ff8000 inset,0px 0px 2px 1px #ff8000;
	border-radius:3px;
}
.button{
	position:absolute;
	height:25px;
	background:url(../images/buttons.png) no-repeat;
	top: 608px;
	left: 267px;
	cursor:pointer;
}
#information_button{
	background-position:bottom left;
	width:90px;
}
#information_button:hover{
	background-position:top left;
}
#reset_button{
	background-position:bottom right;
	width:60px;
	left:370px;
}
#reset_button:hover{
	background-position:top right;
}
.bottle{
	width:34px;
	height: 330px;
	position:absolute;
	top: 142px;
	left: 476px;
}
#bottle2{
	left: 535px;
}
#bottle3{
	left: 591px;
}
.fill_bottle{
	width:34px;
	height:230px;
	background:url(../images/bottle.png) no-repeat left top;	
	position:absolute;
	top: 100px;
	left:0;
	z-index:1;
}
.fill_bottle.halfFill{
	-webkit-animation:halfFill 0.5s 0.5s steps(3) forwards;
	-ms-animation:halfFill 0.5s 0.5s steps(3) forwards;
	-moz-animation:halfFill 0.5s 0.5s steps(3) forwards;
	animation:halfFill 0.5s 0.5s steps(3) forwards;
}
@-webkit-keyframes halfFill{to{background-position:-102px 0;}}
@-ms-keyframes halfFill{to{background-position:-102px 0;}}
@-moz-keyframes halfFill{to{background-position:-102px 0;}}
@keyframes halfFill{to{background-position:-102px 0;}}
.fill_bottle.fullFill{
	background-position:-102px 0;
	-webkit-animation:fullFill 0.5s 0.5s steps(2) forwards;
	-ms-animation:fullFill 0.5s 0.5s steps(2) forwards;
	-moz-animation:fullFill 0.5s 0.5s steps(2) forwards;
	animation:fullFill 0.5s 0.5s steps(2) forwards;
}
@-webkit-keyframes fullFill{to{background-position:-170px 0;}}
@-ms-keyframes fullFill{to{background-position:-170px 0;}}
@-moz-keyframes fullFill{to{background-position:-170px 0;}}
@keyframes fullFill{to{background-position:-170px 0;}}

.bottle .bottle_hover{
	width:41px;
	height:237px;
	background:url(../images/bottle_hover.png) no-repeat left top;	
	position:absolute;
	top: 97px;
	left:-4px;
	display:none;
}
.bottle.over .bottle_hover{
	display:block;
}
.bottle_label{
	width:55px;
	height:51px;
	background:url(../images/bottle_label.png) no-repeat left top;	
	position: absolute;
	top: 472px;
	left: 447px;
}
#bottle_label2{
	background-position:-62px top;	
	left: 509px;
}
#bottle_label3{
	background-position:top right;	
	left: 574px;
}
.bottle_label .label_hint{
	width:30px;
	height:20px;
	position:absolute;
	bottom:5px;
	left:calc(50% - 15px);
}
.bottle_label .label_hint span{
	display:none;
	width:10px;
	height:10px;
	border-radius:50%;
}
.bottle_label .label_hint span:first-child{
	background:#615ae0;
}
.bottle_label .label_hint span:last-child{
	background:#a41e21;
}
.bottle_label .label_hint.type1 span:first-child{
	display:block;
	margin-left: 8px;
}
.bottle_label .label_hint.type2 span:last-child{
	display:block;
	margin-left: 8px;
}
.bottle_label .label_hint.type3 span{
	display:inline-block;
}
.bottle_label .label_hint.type3 span:first-child{
	margin-right:4px;
}
.table_cover{
	width:192px;
	height:20px;
	position:absolute;
	z-index:1;
	top: 302px;
	left: 437px;
	background:url(../images/table_cover.png) no-repeat left top;	
}

.day_con{
    display: block;
    width: 131px;
    height: 87px;
	position:absolute;
	top: 417px;
	left: 492px;
	cursor:pointer;
}
.day {
    display: block;
    width: 131px;
    height: 87px;
    background-image: url(../images/day.png);
    background-repeat: no-repeat;
    background-position: -5px -5px;
	position:absolute;
	top:0;
	left:0;
	z-index:2;
}
.day.active:hover+.day_outline{
	width:140px;
	height:96px;
	position:absolute;
	background:url(../images/day_outline.png) no-repeat;
	top: -4px;
	left: -4px;
}
.day[data-day="2"] {
    width: 131px;
    height: 87px;
    background-position: -146px -5px;
}

.day[data-day="4"] {
    width: 131px;
    height: 87px;
    background-position: -5px -102px;
}

.day[data-day="6"] {
    width: 131px;
    height: 87px;
    background-position: -146px -102px;
}

.day[data-day="8"] {
    width: 131px;
    height: 87px;
    background-position: -5px -199px;
}

.day[data-day="10"] {
    width: 131px;
    height: 87px;
    background-position: -146px -199px;
}

.day[data-day="12"] {
    width: 131px;
    height: 87px;
    background-position: -287px -5px;
}

.day[data-day="14"] {
    width: 131px;
    height: 87px;
    background-position: -287px -102px;
}

.day[data-day="16"] {
    width: 131px;
    height: 87px;
    background-position: -287px -199px;
}



.sample_preview {
    width: 353px;
    height: 229px;
    background-image: url(../images/sample_preview.png);
    background-repeat: no-repeat;
    display: block;
	position:absolute;
	top: 42px;
	left: 240px;
	display:none;
}
.sample_preview.true{
	background-position: -5px -5px;	
}
.sample_preview.type1[data-day="0"] {
    background-position: -368px -5px;
}

.sample_preview.type1[data-day="2"] {
    width: 353px;
    height: 229px;
    background-position: -731px -5px;
}

.sample_preview.type1[data-day="4"] {
    width: 353px;
    height: 229px;
    background-position: -1094px -5px;
}

.sample_preview.type1[data-day="6"] {
    width: 353px;
    height: 229px;
    background-position: -5px -244px;
}

.sample_preview.type1[data-day="8"] {
    width: 353px;
    height: 229px;
    background-position: -368px -244px;
}

.sample_preview.type1[data-day="10"] {
    width: 353px;
    height: 229px;
    background-position: -731px -244px;
}

.sample_preview.type1[data-day="12"] {
    width: 353px;
    height: 229px;
    background-position: -1094px -244px;
}

.sample_preview.type1[data-day="14"] {
    width: 353px;
    height: 229px;
    background-position: -5px -483px;
}

.sample_preview.type1[data-day="16"] {
    width: 353px;
    height: 229px;
    background-position: -368px -483px;
}

.sprite-t20001 {
    width: 353px;
    height: 229px;
    background-position: -731px -483px;
}

.sample_preview.type2[data-day="0"] {
    width: 353px;
    height: 229px;
    background-position: -1094px -483px;
}

.sample_preview.type2[data-day="2"] {
    width: 353px;
    height: 229px;
    background-position: -5px -722px;
}

.sample_preview.type2[data-day="4"] {
    width: 353px;
    height: 229px;
    background-position: -368px -722px;
}

.sample_preview.type2[data-day="6"] {
    width: 353px;
    height: 229px;
    background-position: -731px -722px;
}

.sample_preview.type2[data-day="8"] {
    width: 353px;
    height: 229px;
    background-position: -1094px -722px;
}

.sample_preview.type2[data-day="10"] {
    width: 353px;
    height: 229px;
    background-position: -5px -961px;
}

.sample_preview.type2[data-day="12"] {
    width: 353px;
    height: 229px;
    background-position: -368px -961px;
}

.sample_preview.type2[data-day="14"] {
    width: 353px;
    height: 229px;
    background-position: -731px -961px;
}

.sample_preview.type2[data-day="16"] {
    width: 353px;
    height: 229px;
    background-position: -1094px -961px;
}

.sprite-t30001 {
    width: 353px;
    height: 229px;
    background-position: -5px -1200px;
}

.sample_preview.type3[data-day="0"] {
    width: 353px;
    height: 229px;
    background-position: -368px -1200px;
}

.sample_preview.type3[data-day="2"] {
    width: 353px;
    height: 229px;
    background-position: -731px -1200px;
}

.sample_preview.type3[data-day="4"] {
    width: 353px;
    height: 229px;
    background-position: -1094px -1200px;
}

.sample_preview.type3[data-day="6"] {
    width: 353px;
    height: 229px;
    background-position: -1457px -5px;
}

.sample_preview.type3[data-day="8"] {
    width: 353px;
    height: 229px;
    background-position: -1457px -244px;
}

.sample_preview.type3[data-day="10"] {
    width: 353px;
    height: 229px;
    background-position: -1457px -483px;
}

.sample_preview.type3[data-day="12"] {
    width: 353px;
    height: 229px;
    background-position: -1457px -722px;
}

.sample_preview.type3[data-day="14"] {
    width: 353px;
    height: 229px;
    background-position: -1457px -961px;
}

.sample_preview.type3[data-day="16"] {
    width: 353px;
    height: 229px;
    background-position: -1457px -1200px;
}


.clean_slides {
    background-image: url(../images/clean_slides.png);
    background-repeat: no-repeat;
    display: block;
    width: 228px;
    height: 108px;
    background-position: -5px -5px;
	position:absolute;
	top: 296px;
	left: 246px;
	cursor:pointer;
}

.clean_slides:hover {
    background-position: -5px -123px;
}

.clean_slides.active,.clean_slides.active:hover {
    background-position: -243px -5px;
}
.clean_slides.active.locked,.clean_slides.active.locked:hover {
    background-position: -5px -5px;
}





.micro {
    width: 188px;
    height: 333px;
    background-image: url(../images/micro.png);
    background-repeat: no-repeat;
    display: block;
    background-position: -5px -5px;
	position:absolute;
	top: 197px;
	left: 22px;
}

.micro.active{
    background-position: -203px -5px;
}



.take_sample {
	position:absolute;
	top: 212px;
	left: 488px;
	width: 184px;
    height: 188px;
    background-image: url(../images/take_sample.png);
    background-repeat: no-repeat;
    display: block;
	z-index:2;
	cursor:pointer;
}
.take_sample  div{
	width:114px;
	height:32px;
	position:absolute;
	bottom:-8px;
	left:45px;
	background:url(../images/take_sample_label.png) no-repeat;
}

.take_sample.active:hover {
    background-position: right top;
}

.sButton{
	background:url(../images/btsh.png) no-repeat;
	height:25px;
	position:absolute;
	top:608px;
	cursor:pointer;
}
#information1_button{
	background-position:left top;
	width:91px;
	left:202px;
}
#information1_button:hover{
	background-position:left bottom;
}
#start_button{
	width:90px;
	left:302px;
	background-position:-101px top;
}
#start_button:hover{
	background-position:-101px bottom;
}
#clear_button{
	background-position:right top;
	width:90px;
	left:405px;
}
#clear_button:hover{
	background-position:right bottom;
}

.slides {
    background-image: url(../images/slides.png);
    background-repeat: no-repeat;
    display: block;
	position:absolute;
	top: 433px;
    width: 62px;
    height: 61px;
    background-position: -5px -5px;
	cursor:pointer;
	display:none;
}
#slides1{
	left:247px;
	top: 436px;
}
#slides2{
	left:309px;
}
#slides3{
	left: 376px;
}
.slides[data-type="true"]:hover {
    background-position: -5px -76px;
	cursor:pointer;
}
.slides.locked[data-type="true"]:hover{
    background-position: -5px -5px;
	cursor:default;
}
.slides[data-type="type1"],.slides[data-type="type2"],.slides[data-type="type3"]{
    background-position: -77px -5px;
	cursor:pointer;
}
.slides[data-type="type1"]:hover,.slides[data-type="type2"]:hover,.slides[data-type="type3"]:hover{
    background-position: -77px -76px;
	cursor:pointer;
}
.slides.locked[data-type="type1"]:hover,.slides.locked[data-type="type2"]:hover,.slides.locked[data-type="type3"]:hover{
    background-position: -77px -5px;
	cursor:default;
}
.gridBtn{
	width:69px;
	height:46px;
	position:absolute;
	top: 248px;
	left: 118px;
	background:url(../images/gridBtn.png) no-repeat;
	background-position:left -4px;
	cursor:pointer;
}
.gridBtn:hover{
	background-position:left bottom;
}
.gridBtn.on{
	background-position:right -4px;
}
.gridBtn.on:hover{
	background-position:right bottom;
}

.sample_preview span{
	position: absolute;
	width: 144px;
	display: block;
	right: 0;
	text-align: center;
	font-weight: bold;
	top:60px;
	font-size:13px;
}
.sample_preview span.day_no{
	top:150px;
}
.sample_preview .grid_area{
	position:absolute;
	top:4px;
	left:9px;
	width:217px;
	height:219px;
	background:url(../images/grid.png) no-repeat;
	display:none;
}

.information_area{
	position: absolute;
	left: -180px;
	top: 0px;
	background-color: #fff;
	width: 800px;
	height: 625px;
	border: 1px solid #7f7f7f;
	z-index:10;
	display:none;
}
.information_title{
	width: 800px;
	height: 50px;
	color: #007193;
	font-family: "ProximaNovaSemibold";
	font-size: 24px;
	float: left;
	line-height: 50px;
	padding-left: 30px;
	margin-top: 10px;	
}
.information_data{
	position: relative;
	height: 450px;
	width: 90%;
	clear: both;
	margin: auto;
	padding-top: 20px;
	overflow: auto;
}
button#info_print {
  position: relative;
  margin: auto;
  display: block;
  margin-top: 30px;
}
.information_data p{
	position:relative;
}
.info_close_btn{
	border-left: 1px solid #999;
	box-sizing: initial;
	color: #999;
	cursor: pointer;
	float: right;
	height: 22px;
	line-height: 25px;
	margin: 10px;
	padding: 0;
	text-align: center;
	width: 25px;
	cursor:pointer;
}
/* PAGE CONTENT STYLES ENDS*/