html
{
-moz-user-select : none;
-khtml-user-select : none;
-webkit-user-select : none;
-o-user-select : none;
user-select : none;
}
#simscreen
{
position: relative;
left:0px;
top:0px;
height: 600px;
width:800px;
border:solid 1px;
background-color:white;
}
#title{
position:relative;
left: 0px;
top: 0px;
height:43px;
font-size: 20px;
text-align:center;
background-color: black;
font-family: verdana;
color: White;
text-transform: uppercase;
}
#title h3
{
padding-top:2px;
margin:0px;
}
.simsubscreen
{
position:absolute;
left:50px;
top:50px;
height:530px;
width:745px;
}
.incanvas
{
margin:5px 0 0 5px;
padding:0;
}
#nextButton
{
position:absolute;
left:750px;
top:530px;
cursor:pointer;
}
.circlebg
{
border-radius:100%;
font-size:25px;
color:#fff;
text-align:center;
background:#000
}
.steptext
{
display:inline;
font-size:14px;
}
#copyright{
position: absolute;
left:60px;
top: 580px;
font-size:12px
}
#alertId
{
color:red;
font-family:verdana;
font-size:12px;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
font-family: verdana;
font-size:14px;
}
.tooltip .tooltiptext {
font-family: verdana;
font-size:14px;
visibility: hidden;
width: 500px;
background-color: black;
color: #fff;
border-radius: 6px;
padding: 2px 10px 10px 10px;
top: 21px;
/* Position the tooltip */
position: absolute;
z-index: 100;
line-height: 21px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
@-webkit-keyframes movehand
{
0%{
left: 669px;
top: 229px;
/* width: 0px; */
}
50%{
left: 579px;
/* width: 211px; */
top: 236px;
}
100%{
left: 582px;
/* width: 211px; */
top: 212px;
}
}
@keyframes movehand
{
0%{
left: 669px;
top: 229px;
/* width: 0px; */
}
50%{
left: 579px;
/* width: 211px; */
top: 236px;
}
100%{
left: 582px;
/* width: 211px; */
top: 212px;
}
}
@keyframes moveBg {
0%{
left: 240px;
top: 175px;
width: 0px;
transform: scale(0);
}
100%{
left: 437px;
width: 240px;
top: 79px;
transform: scale(1);
}
}
@-webkit-keyframes moveBg {
0%{
left: 240px;
top: 175px;
width: 0px;
transform: scale(0);
}
100%{
left: 437px;
width: 240px;
top: 79px;
transform: scale(1);
}
}
@keyframes cropgpr {
0%{
left: 240px;
top: 175px;
width: 0px;
transform: scale(0);
}
100%{
left: 485px;
width: 150px;
top: 94px;
transform: scale(1);
}
}
@-webkit-keyframes cropgpr {
0%{
left: 240px;
top: 175px;
width: 0px;
transform: scale(0);
}
100%{
left: 485px;
width: 150px;
top: 94px;
transform: scale(1);
}
}
@keyframes highlight_connection1 {
0%{
left: 345px;
top: 214px;
width: 0px;
transform: scale(0);
}
100%{
left: 548px;
width: 139px;
top: 221px;
transform: scale(1);
}
}
@-webkit-keyframes highlight_connection1 {
0%{
left: 345px;
top: 214px;
width: 0px;
transform: scale(0);
}
100%{
left: 548px;
width: 139px;
top: 221px;
transform: scale(1);
}
}
@-webkit-keyframes connection1
{
0%{
top:220px;
}
100%{
top:192px;
height: 93px;
left: 549px;
rotate: -5deg;
width: 23%;
}
}
@keyframes connection1 {
0%{
top:220px;
}
100%{
top:192px;
height: 93px;
left: 549px;
rotate: -5deg;
width: 23%;
}
}
@-webkit-keyframes lapconnector
{
0%{
left:269px;
top:77px;
height: 88px;
}
100%{
left:269px;
top:77px;
height: 111px;
}
}
@keyframes lapconnector {
0%{
left:269px;
top:77px;
height: 88px;
}
100%{
left:269px;
top:77px;
height: 111px;
}
}
@-webkit-keyframes movehandlap
{
0%{
left:362px;
top:121px;
}
50%{
left: 263px;
top: 136px;
rotate: 50deg;
}
100%{
left: 256px;
top: 162px;
rotate: 50deg;
}
}
@keyframes movehandlap
{
0%{
left:362px;
top:121px;
}
50%{
left: 263px;
top: 136px;
rotate: 50deg;
}
100%{
left: 256px;
top: 162px;
rotate: 50deg;
}
}
@-webkit-keyframes movehandodo
{
0%{
left: 657px;
top: 228px;
/* width: 0px; */
}
50%{
left: 541px;
/* width: 211px; */
top: 228px;
}
100%{
left: 567px;
top: 221px;
rotate: 66deg;
}
}
@keyframes movehandodo
{
0%{
left: 657px;
top: 228px;
/* width: 0px; */
}
50%{
left: 541px;
/* width: 211px; */
top: 228px;
}
100%{
left: 567px;
top: 221px;
rotate: 66deg;
}
}
@-webkit-keyframes odometerconnect
{
0%{
left: 501px;
top: 207px;
height: 53px;
max-width:6.5%;
width:100%;
}
100%{
left: 502px;
top: 193px;
height: 64px;
width: 100%;
max-width: 69px
}
}
@keyframes odometerconnect {
0%{
left: 501px;
top: 207px;
height: 53px;
max-width:6.5%;
width:100%;
}
100%{
left: 502px;
top: 193px;
height: 64px;
width: 100%;
max-width: 69px
}
}
@-webkit-keyframes movehandodo
{
0%{
left: 657px;
top: 228px;
/* width: 0px; */
}
50%{
left: 541px;
/* width: 211px; */
top: 228px;
}
100%{
left: 567px;
top: 221px;
rotate: 66deg;
}
}
@keyframes movehandodo
{
0%{
left: 657px;
top: 228px;
/* width: 0px; */
}
50%{
left: 541px;
/* width: 211px; */
top: 228px;
}
100%{
left: 567px;
top: 221px;
rotate: 66deg;
}
}
@-webkit-keyframes movehandbattery
{
0%{
left:640px;
top:236px;
}
50%{
left: 546px;
/* width: 211px; */
top: 243px;
rotate: 54deg;
}
100%{
left: 566px;
top: 220px;
}
}
@keyframes movehandbattery
{
0%{
left:640px;
top:236px;
}
50%{
left: 546px;
/* width: 211px; */
top: 243px;
rotate: 54deg;
}
100%{
left: 566px;
top: 220px;
}
}
@-webkit-keyframes batteryconnect
{
0%{
left:555px;
top:215px;
max-width:5%;
width:100%;
height: 66px;
}
100%{
left: 554px;
top: 191px;
height: 90px;
width: 100%;
max-width: 37px
}
}
@keyframes batteryconnect {
0%{
left:555px;
top:215px;
max-width:5%;
width:100%;
height: 66px;
}
100%{
left: 554px;
top: 191px;
height: 90px;
width: 100%;
max-width: 37px;
}
}
@keyframes Radarmen
{
0%{
left: 155px;
}
100%{
left: 175px;
}
}
@keyframes Radarmen1
{
0%{
left: 175px;
}
100%{
left: 200px;
}
}
@keyframes Radarmen2
{
0%{
left: 200px;
}
100%{
left: 225px;
}
}
@keyframes Radarmen3
{
0%{
left: 225px;
}
100%{
left: 250px;
}
}
@keyframes Radarmen4
{
0%{
left: 250px;
}
100%{
left: 275px;
}
}
@keyframes Radarmen5
{
0%{
left: 275px;
}
100%{
left: 300px;
}
}
@keyframes Radarmen6
{
0%{
left: 300px;
}
100%{
left: 325px;
}
}
@keyframes Radarmen7
{
0%{
left: 325px;
}
100%{
left: 350px;
}
}
@keyframes Radarmen8
{
0%{
left: 350px;
}
100%{
left: 375px;
}
}
@keyframes Radarmen9
{
0%{
left: 375px;
}
100%{
left: 400px;
}
}
@keyframes gpr1
{
0%{
left: 227px;
}
100%{
left: 273px;
}
}
@keyframes ring1a
{
0%{
rotate: 0deg;
left: 265px;
}
100%{
rotate: 90deg;
left: 304px;
} }
@keyframes ring2a
{
0%{
rotate: 0deg;
left: 348px;
}
100%{
rotate: 90deg;
left: 394px;
} }
@keyframes gpr2
{
0%{
left: 273px;
}
100%{
left: 300px;
} }
@keyframes ring1b
{
0%{
rotate: 0deg;
left: 304px;
}
100%{
rotate: 90deg;
left: 330px;
} }
@keyframes ring2b
{
0%{
rotate: 0deg;
left: 392px;
}
100%{
rotate: 90deg;
left: 420px;
} }
@keyframes gpr3
{
0%{
left: 300px;
}
100%{
left: 323px;
} }
@keyframes ring1c
{
0%{
rotate: 0deg;
left: 330px;
}
100%{
rotate: 90deg;
left: 353px;
} }
@keyframes ring2c
{
0%{
rotate: 0deg;
left: 420px;
}
100%{
rotate: 90deg;
left: 443px;
} }
@keyframes gpr4
{
0%{
left: 320px;
}
100%{
left: 347px;
} }
@keyframes ring1d
{
0%{
rotate: 0deg;
left: 353px;
}
100%{
rotate: 90deg;
left: 378px;
} }
@keyframes ring2d
{
0%{
rotate: 0deg;
left: 443px;
}
100%{
rotate: 90deg;
left: 467px;
} }
@keyframes gpr5
{
0%{
left: 347px;
}
100%{
left: 367px;
} }
@keyframes ring1e
{
0%{
rotate: 0deg;
left: 378px;
}
100%{
rotate: 90deg;
left: 396px;
} }
@keyframes ring2e
{
0%{
rotate: 0deg;
left: 467px;
}
100%{
rotate: 90deg;
left: 487px;
} }
@keyframes gpr6
{
0%{
left: 367px;
}
100%{
left: 400px;
} }
@keyframes ring1f
{
0%{
rotate: 0deg;
left: 396px;
}
100%{
rotate: 90deg;
left: 430px;
} }
@keyframes ring2f
{
0%{
rotate: 0deg;
left: 487px;
}
100%{
rotate: 90deg;
left: 520px;
} }
@keyframes gpr7
{
0%{
left: 400px;
}
100%{
left: 423px;
} }
@keyframes ring1g
{
0%{
rotate: 0deg;
left: 430px;
}
100%{
rotate: 90deg;
left: 452px;
} }
@keyframes ring2g
{
0%{
rotate: 0deg;
left: 520px;
}
100%{
rotate: 90deg;
left: 544px;
} }
@keyframes gpr8
{
0%{
left: 423px;
}
100%{
left: 450px;
} }
@keyframes ring1h
{
0%{
rotate: 0deg;
left: 452px;
}
100%{
rotate: 90deg;
left: 481px;
} }
@keyframes ring2h
{
0%{
rotate: 0deg;
left: 544px;
}
100%{
rotate: 90deg;
left: 572px;
} }
@keyframes gpr9
{
0%{
left: 450px;
}
100%{
left: 474px;
} }
@keyframes ring1i
{
0%{
rotate: 0deg;
left: 481px;
}
100%{
rotate: 90deg;
left: 505px;
} }
@keyframes ring2i
{
0%{
rotate: 0deg;
left: 572px;
}
100%{
rotate: 90deg;
left: 596px;
} }
@keyframes gpr10
{
0%{
left: 474px;
}
100%{
left: 501px;
} }
@keyframes ring1j
{
0%{
rotate: 0deg;
left: 505px;
}
100%{
rotate: 90deg;
left: 531px;
} }
@keyframes ring2j
{
0%{
rotate: 0deg;
left: 596px;
}
100%{
rotate: 90deg;
left: 621px;
} }
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
visibility: hidden;
opacity: 1;
}
}
@keyframes clip{
0% {
top:109px
}
100% {
top:20px
}
}
@keyframes moveHand {
0% {
left: 338px;
top: 420px;
}
100% {
left: 338px;
top: 120px;
}
}
@keyframes zoomin {
0% {
transform: scale(0.5);
opacity: 1;
}
100% {
transform: scale(1.2);
top: -220px;
width: 500px;
opacity: 0;
}
}
@keyframes zoominipad {
0% {
transform: scale(0.5);
}
100% {
transform: scale(1.1);
top: 73px;
left: 17px;
width: 665px;
height: 432px;
opacity: 1;
}
}
@keyframes graph11{
0% {
left: 94px;
}
100% {
left: 193px;
/* width: 18%; */
}
}
@keyframes curve1
{
0%{
left: 86px;
top: 168px;
height: 281px;
width: 26px;
}
100%{
left: 86px;
top: 171px;
height: 279px;
width: 26px;
}
}
@keyframes curve2
{
0%{
left: 94px;
top: 168px;
width: 100%;
max-width: 13%;
}
100%{
left: 191px;
top: 168px;
width: 100%;
max-width: 31%;
}
}
@keyframes curve3
{
0%{
left: 11px;
top: 76px;
width: 100%;
max-width: 2%;
}
100%{
left: 26px;
top: 76px;
max-width: 4%;
/* width: 100%;
max-width: 31%; */
}
}
input[type="text"] {
padding: 8px;
font-size: 16px;
border: 3px solid #0e0d0dd4;
border-radius: 4px;
}
button:enabled {
opacity: 1;
}
.progress-bar {
width: 100%;
height: 20px;
background-color: #f2f2f2;
margin-top: 20px;
display: none; /* Initially hidden */
}
.progress {
width: 0;
height: 100%;
background-color: #4CAF50;
}
@keyframes graph1{
0% {
left: 23px;
}
100% {
left: 35px;
width: 18%;
}
}
@keyframes zoomincreen {
0% {
transform: scale(1);
left: 14px;
top: 77px;
width: 90%;
height: 80%;
}
100% {
transform: scale(0.8);
max-width: 37%;
left: -17px;
top: 28px;
height: 188px;
}
}
@keyframes zoominblack {
0% {
transform: scale(1);
left: 67px;
top: 163px;
width: 77%;
height: 56.1%;
}
100% {
transform: scale(0.8);
max-width: 33%;
left: -1px;
top: 64px;
height: 130px
}
}
@keyframes zoominsetup {
0% {
transform: scale(1);
left: 14px;
top: 77px;
width: 90%;
height: 80%;
}
100% {
transform: scale(0.8);
max-width: 13px;
left: 9px;
top: 52px;
height: 14px;
}
}
@keyframes zoomininto {
0% {
transform: scale(1);
left: 67px;
top: 163px;
width: 77%;
height: 56.1%;
}
100% {
transform: scale(0.8);
max-width: 13px;
height: 14px;
top: 52px;
left: 21px;
}}
@keyframes zoominipad55 {
0% {
transform: scale(0.8);
width: 38%;
left: -18px;
top: 16px;
height: 191px;
}
100% {
transform: scale(1);
width: 94%;
left: 1px;
top: 51px;
height: 450px
}
}
@keyframes zoominipad51 {
0% {
transform: scale(0.8);
max-width: 38%;
left: -18px;
top: 16px;
height: 191px;
}
100% {
transform: scale(1);
max-width: 86%;
left: 31px;
top: 73px;
height: 404px;
}
}
@keyframes zoominipad44 {
0% {
transform: scale(1);
width: 52%;
left: 123px;
top: 39px;
height: 468px;
}
100% {
transform: scale(0.8);
width: 38%;
left: -18px;
top: 16px;
height: 191px;
}
}
@keyframes zoominipad41 {
0% {
transform: scale(1);
width: 52%;
left: 123px;
top: 39px;
height: 468px;
}
100% {
transform: scale(0.8);
left: -6px;
width: 35%;
top: 24px;
height: 174px;
}
}
@keyframes measurearrow {
0% {
top: 174px;
}
50% {
top: 180px;
}
100% {
top: 186px;
}
}
@keyframes greenbox {
0% {
left: 243px;
width: 2%;
}
/* 50% {
left: 263px;
width: 4%;
} */
100% {
/* left: 283px; */
width: 27%;
}
}
.custom-tooltip {
position: relative;
width:100%;
max-width: 20%;
/* Other styles for the container */
}
/* Styles for the tooltip text */
.custom-tooltip::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 10%;
transform: translateX(-50%);
background-color: #333;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
top:38px;
height:90%;
width: 267px;
}
.custom-tooltip:hover::after {
opacity: 1;
}