﻿html, body {
    margin: 0;
    padding: 0;
}
#alkoholTestOnline {
    position: relative;
    background: bisque;
    width: 750px;
    height: 563px;
    /*overflow: hidden;*/

    background: rgba(255,204,0,1);
    background: -moz-linear-gradient(left, rgba(255,204,0,1) 0%, rgba(255,243,0,1) 76%, rgba(255,255,0,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,204,0,1)), color-stop(76%, rgba(255,243,0,1)), color-stop(100%, rgba(255,255,0,1)));
    background: -webkit-linear-gradient(left, rgba(255,204,0,1) 0%, rgba(255,243,0,1) 76%, rgba(255,255,0,1) 100%);
    background: -o-linear-gradient(left, rgba(255,204,0,1) 0%, rgba(255,243,0,1) 76%, rgba(255,255,0,1) 100%);
    background: -ms-linear-gradient(left, rgba(255,204,0,1) 0%, rgba(255,243,0,1) 76%, rgba(255,255,0,1) 100%);
    background: linear-gradient(to right, rgba(255,204,0,1) 0%, rgba(255,243,0,1) 76%, rgba(255,255,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcc00', endColorstr='#ffff00', GradientType=1 );

    border-radius: 15px;
    border: 2px solid;
    box-sizing: border-box;
}
#alkoholTestOnline .Graf {
    position: absolute;
    width: 801px;
    height: 600px;
    background: rgba(153,153,153,1);
    background: -moz-linear-gradient(left, rgba(153,153,153,1) 0%, rgba(229,229,229,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(153,153,153,1)), color-stop(100%, rgba(229,229,229,1)));
    background: -webkit-linear-gradient(left, rgba(153,153,153,1) 0%, rgba(229,229,229,1) 100%);
    background: -o-linear-gradient(left, rgba(153,153,153,1) 0%, rgba(229,229,229,1) 100%);
    background: -ms-linear-gradient(left, rgba(153,153,153,1) 0%, rgba(229,229,229,1) 100%);
    background: linear-gradient(to right, rgba(153,153,153,1) 0%, rgba(229,229,229,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#e5e5e5', GradientType=1 );
    border-radius: 15px;
}
#alkoholTestOnline * {
  -ms-touch-action: manipulation pinch-zoom;
  touch-action: manipulation pinch-zoom;

  -webkit-user-select: none !important;
  user-select: none !important;
}
#interactiveStage {
    position: absolute;
    left: 0px;
    top: 0px;
}
#alkoholTestOnline select {
    background: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    outline: none;
    border: none;
    margin: 0;
    padding: 0;
    font: 20px castle_tbold;
    color: #000000;
    border: 2px solid black;
    border-radius: 7px;
    background: white;
}
#alkoholTestOnline select::-ms-expand { /* for IE 11 */
    display: none;
}
#alkoholTestOnline .pruhDole {
    position: absolute;
    top: 610px;
    left: 0px;
    width: 801px;
    height: 210px;
    background: #DF330B;
    border-bottom-left-radius: 13px;
    border-bottom-right-radius: 13px;
}
#alkoholTestOnline .pruhDole .sediva {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 801px;
    height: 21px;
    background: #B2B2B2;
}
#alkoholTestOnline .pruhDole .zluta {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 801px;
    height: 21px;
    background: #ffcc00;
}
#alkoholTestOnline .auto {
    position: absolute;
    left: 400px;
    top: 300px;
    width: 0px;
    height: 0px;
    background: url(images/auto.png) center center no-repeat;
    background-size: contain;
}
#alkoholTestOnline .choice {
    position: absolute;
    width: 115px;
}
#alkoholTestOnline .choice.female {
    left: 88px;
    top: 220px;
}
#alkoholTestOnline .choice.male {
    left: 618px;
    top: 220px;
}
#alkoholTestOnline .sex {
    font: 26px castle_tbold;
    color: #DF330B;
}
#alkoholTestOnline .Button {
    position: relative;
    top: -7px;
    width: 42px;
}
#alkoholTestOnline .Button > img {
    width: 100%;
}

#alkoholTestOnline .female .Button {
    float: right;
}
#alkoholTestOnline .male .Button {
    float: left;
}
#alkoholTestOnline .weight {
    clear: both;
    font: 20px castle_tbold;
    color: #000000;
    padding-bottom: 5px;
}
#alkoholTestOnline .kg {
    float: right;
    font: 20px castle_tbold;
    color: #000000;
    padding: 3px 40px 0 0;
}
#alkoholTestOnline .clock {
    position: absolute;
    left: 202px;
    top: 131px;
    opacity: 0;
    filter: alpha(opacity=0);
    width: 398px;
    height: 401px;
    background: url(images/hodiny.png) center center no-repeat;
    background-size: contain;
}
#alkoholTestOnline .questionMark {
    position: absolute;
    left: 384px;
    top: 184px;
    width: 32px;
    height: 70px;
    background: url(images/otaznik.png) center center no-repeat;
    background-size: contain;
}
#alkoholTestOnline .info {
    position: absolute;
    left: 40px;
    top: 433px;
    width: 180px;
    font: 28px castle_tbold;
    color: #ffcc00;
}
#alkoholTestOnline .beginEnd {
    position: relative;
    left: 0px;
    top: 549px;
    font: 20px castle_tbold;
    color: #000000;
    width: 800px;
}
#alkoholTestOnline .beginEnd select {
    width: 42px;
    padding-left: 3px;
    margin-right: 10px;
}
#alkoholTestOnline .begin {
    text-align: right;
    width: 225px;
    display: inline-block;
    padding-right: 10px;
}
#alkoholTestOnline .end {
    text-align: right;
    width: 162px;
    display: inline-block;
    padding-right: 10px;
}
#alkoholTestOnline .next {
    position: absolute;
    left: 689px;
    top: 547px;
    width: 76px;
    height: 30px;
    background: url(images/next.png) center center no-repeat;
    background-size: contain;
}
#alkoholTestOnline .next:hover {
    background-image: url(images/nextHover.png);
}
#alkoholTestOnline .next .text {
    padding: 7px 5px 0 5px;
    text-align: center;
    font: 16px castle_tbold;
}
#alkoholTestOnline .title {
    font: bold 14px verdana;
    color: #000000;
    position: absolute;
    left: 152px;
    top: 21px;
    width: 493px;
    height: 88px;
    text-align: center;
}
#alkoholTestOnline .message {
    position: absolute;
    left: 620px;
    top: 443px;
    width: 146px;
    height: 78px;
    padding: 15px 8px 0px 11px;
    background: url(images/upozorneni.png) center center no-repeat;
    background-size: contain;
    opacity: 0;
    filter: alpha(opacity=0);
    font: 14px castle_tbold;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
#alkoholTestOnline .Bar {
    position: absolute;
    left: 313px;
    top: 431px;
    width: 457px;
    height: 141px;
}
#alkoholTestOnline .Bar .BarInput {
    position: absolute;
    left: 0;
    top: 0;
    font: 28px castle_tbold;
    color: #ffcc00;
}
#alkoholTestOnline .Bar .BarInfo {
    position: absolute;
    left: 0;
    top: 45px;
    font: 14px castle_tbold;
    color: #000000;
}
#alkoholTestOnline .Bar .BarMenu {
    position: absolute;
    left: 271px;
    top: 110px;
    font: 16px castle_tbold;
    color: #000000;
    background: url(images/tlacitko2.png) center center no-repeat;
    background-size: contain;
    width: 88px;
    height: 31px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    line-height: 31px;
    text-align: center;
}
#alkoholTestOnline .Bar .BarCompute {
    position: absolute;
    left: 368px;
    top: 110px;
    font: 14px castle_tbold;
    color: #000000;
    background: url(images/tlacitko2.png) center center no-repeat;
    background-size: contain;
    width: 88px;
    height: 31px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    line-height: 31px;
    text-align: center;
}
#alkoholTestOnline .Bar .BarMenu:hover,
#alkoholTestOnline .Bar .BarCompute:hover{
    cursor: pointer;
    background-image:url(images/tlacitko2Hover.png);
}
#alkoholTestOnline .BarBackground {
    position:absolute;
    left: -1px;
    top: -1px;
    width: 803px;
    height: 602px;
    background: url(images/bar.png) left top no-repeat;
    background-size: contain;
    border-radius: 15px;
    box-sizing: border-box;
}
#alkoholTestOnline .Drink {
    position: absolute;
    -ms-scroll-chaining: none;
    -ms-touch-action: none;
    touch-action: none;
    /* Prevent native touch events on Windows */
	-ms-touch-action: none;

	/* Prevent the callout on tap-hold and text selection */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	/* Prevent text resize on orientation change, useful for web-apps */
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;
    /*border: 1px solid red;*/
}
#alkoholTestOnline .Drink.Dropped {
    position: relative;
    left: 0;
    top: 0;
    width: 10px;
    display: inline;
}
#alkoholTestOnline .Drink.Dropped img {
    opacity: 0.7;
}
#alkoholTestOnline .Drink.Dropped img:hover {
    opacity: 1;
}
#alkoholTestOnline .Drink .BarDrinkBubble {
    position: absolute;
    left: -182px;
    top: -35px;
    background: url(images/drinkBubble.png) left top no-repeat;
    background-size: contain;
    width: 182px;
    height: 35px;
    box-sizing: border-box;
    padding: 10px 40px 0px 6px;
    font: 13px castle_tbold;
    color: #000000;
    text-align: center;
}
#alkoholTestOnline .Bill {
    position: absolute;
    left: 17px;
    top: 44px;
    width: 223px;
    height: 520px;
    -webkit-box-shadow: 7px 7px 5px 0px rgba(0, 0, 0, 1);
    -moz-box-shadow: 7px 7px 5px 0px rgba(0, 0, 0, 1);
    box-shadow: 7px 7px 5px 0px rgba(0, 0, 0, 1);
    border: 1px solid black;
    background: #F9EBC1;
}
#alkoholTestOnline .Bill .BillContentMask {
    position: absolute;
    left: 18px;
    top: 34px;
    width: 191px;
    height: 451px;
    overflow: hidden;
    /* Prevent native touch events on Windows */
	-ms-touch-action: none;

	/* Prevent the callout on tap-hold and text selection */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	/* Prevent text resize on orientation change, useful for web-apps */
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;
}
#alkoholTestOnline .Bill .BillContent {
    position: absolute;
}
#alkoholTestOnline .Bill .BillGroup {
    position: relative;
    width: 184px;
    height: 101px;
    background: #E8D28F;
    border: 2px dotted #B09A58;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin: 0 0 15px 0px;
    color: #000000;
}
#alkoholTestOnline .Bill .BillGroup:last-child {
    margin: 0;
}
#alkoholTestOnline .Bill .TimeText {
    position: absolute;
    left: 104px;
    top: 4px;
    text-align: right;
    width: 73px;
    font: 16px castle_tbold;
}
#alkoholTestOnline .Bill .BillGroupContentMask {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /* Prevent native touch events on Windows */
	-ms-touch-action: none;

	/* Prevent the callout on tap-hold and text selection */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	/* Prevent text resize on orientation change, useful for web-apps */
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;
}
#alkoholTestOnline .Bill .BillGroupContentMask::-webkit-scrollbar { 
    display: none; 
}
#alkoholTestOnline .Bill .BillGroupContent {
    position: absolute;
    bottom: 0px;
    width: 50px;
}
#alkoholTestOnline .BillUp {
    position:absolute;
    left: 97px;
    top: 4px;
    width: 33px;
    height: 28px;
    background:url(images/sipkaNahoru.png) center center no-repeat;
    background-size: contain;
}
#alkoholTestOnline .BillUp:hover{
    background-image: url(images/sipkaNahoruHover.png);
}
#alkoholTestOnline .BillDown {
    position:absolute;
    left: 97px;
    bottom: 4px;
    width: 33px;
    height: 28px;
    background:url(images/sipkaDolu.png) center center no-repeat;
    background-size: contain;
}
#alkoholTestOnline .BillDown:hover{
    background-image: url(images/sipkaDoluHover.png);
}
#alkoholTestOnline .GrafVykricnik {
    position: absolute;
    left: 82px;
    top: 435px;
    background: url(images/grafVykricnik.png) left top no-repeat;
    background-size: contain;
    width: 23px;
    height: 72px;
}
#alkoholTestOnline .GrafDriveMessage {
    position: absolute;
    left: 132px;
    top: 427px;
    font: 24px castle_tbold;
    color: #ffcc00;
    width: 568px;
}
#alkoholTestOnline .GrafAlcoholMessage {
    position: absolute;
    left: 132px;
    top: 484px;
    font: 14px castle_tbold;
    color: #ffffff;
    width: 509px;
}
#alkoholTestOnline .GrafWarning {
    position: absolute;
    left: 82px;
    top: 534px;
    font: 14px castle_tbold;
    color: #000000;
    width: 560px;
}
#alkoholTestOnline .GrafButtonInfo {
    position: absolute;
    left: 743px;
    top: 428px;
    background: url(images/infoButton.png) center center no-repeat;
    background-size: contain;
    width: 30px;
    height: 31px;
    font: 24px castle_tbold;
    color: #000000;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    line-height: 31px;
    text-align: center;
}
#alkoholTestOnline .GrafButtonInfo:hover {
    background-image: url(images/infoButtonHover.png);
}
#alkoholTestOnline .GrafButtonMenu {
    position: absolute;
    left: 672px;
    top: 484px;
    font: 16px castle_tbold;
    color: #000000;
    background: url(images/tlacitko2.png) center center no-repeat;
    background-size: contain;
    width: 88px;
    height: 31px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    line-height: 31px;
    text-align: center;
}
#alkoholTestOnline .GrafButtonMenu:hover{
    cursor: pointer;
    background-image:url(images/tlacitko2Hover.png);
}
#alkoholTestOnline .GrafButtonBar {
    position: absolute;
    left: 672px;
    top: 526px;
    font: 16px castle_tbold;
    color: #000000;
    background: url(images/tlacitko2.png) center center no-repeat;
    background-size: contain;
    width: 88px;
    height: 31px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    line-height: 31px;
    text-align: center;
}
#alkoholTestOnline .GrafButtonBar:hover{
    cursor: pointer;
    background-image:url(images/tlacitko2Hover.png);
}
#alkoholTestOnline .GrafDrawStage,
#alkoholTestOnline .GrafDrawVertex {
    position:absolute;
    left: 0;
    top: 0;
    /*border: 3px dotted skyblue;*/
    box-sizing: border-box;
    /* Prevent native touch events on Windows */
	-ms-touch-action: none;

	/* Prevent the callout on tap-hold and text selection */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	/* Prevent text resize on orientation change, useful for web-apps */
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
	-o-text-size-adjust: none;
	text-size-adjust: none;
}
#alkoholTestOnline .GrafVertex {
    position: absolute;
    background: url(images/grafVrchol.png) center center no-repeat;
    background-size: contain;
}
#alkoholTestOnline .GrafVertex.hover {
    background-image: url(images/grafVrcholHover.png);
}
#alkoholTestOnline .GrafDrawInfo {
    position: absolute;
    width: 146px;
    height: 53px;
    padding: 15px 8px 0px 11px;
    background: url(images/infoPromile.png) center center no-repeat;
    background-size: contain;
    font: 16px castle_tbold;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    text-align: center;
}