::-webkit-scrollbar {
    display: none
}


 @font-face {
     font-family: 'DroidSans.ttf';
     src: url('fonts/DroidSans.ttf') format('truetype');
     font-weight: 400;
     font-style: normal;
}

html {margin: 0; height: 100%;}

 body {
        background-image: url(img/mockup2.png);
         background-size:cover;
    background-repeat:no-repeat;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     -webkit-highlight: none;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     -webkit-text-size-adjust: none;
     -ms-text-size-adjust:none;
     -webkit-touch-callout: none;
     -webkit-user-select: none;
     background-color: #e0f7fa40;
     color: #01579b;
     
     height: 100%;
    overflow: hidden;
    
     margin: 0;
     padding: 0;
     user-select: none;
     width: 100%;
}
 .padded {
     padding-top: 1px;
}
 .bordered {
     border-top: 1px solid transparent;
}
 h1, h2, h3, h4, h5, h6 {
     color: #008cba;
}
 *:focus {
     outline: none 
}

 #mainApp {
    
    max-height: 100%;
   
 }

 .iframe_Wrapper {
    height: 82vh;
    width: 100%;
    overflow-y: scroll;
    overflow: hidden;
     scrollbar-width: none;
     -webkit-scrollbar: display: none;
     -webkit-scrollbar:  width: 0;
      -webkit-scrollbar: background: transparent;


}

#winFrame {
        margin: padding:10px;
   /* margin-top: 20px; */
    margin-left: 15px;
    margin-right: 21px;
  
}

#openRelat, #openResil, #openConfid, #capplweb {
    margin-right: -6vw;
    margin-left: -6vw;
}


[style*="--aspect-ratio"] > :first-child {
  width: 100%;
}
[style*="--aspect-ratio"] > img {  
  height: auto;
} 
@supports (--custom:property) {
  [style*="--aspect-ratio"] {
    position: relative;
  }
  [style*="--aspect-ratio"]::before {
    content: "";
    display: block;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
  }  
  [style*="--aspect-ratio"] > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }  
}


 .Cprogress {
	background-color: #d8d8d8;
	border-radius: 20px;
	position: relative;
	margin: 15px 0;
	height: 3.2vh;
	width: 100%;
}

progress[value]::-webkit-progress-value {
  background-image:
       -webkit-linear-gradient(-45deg, 
                               transparent 33%, rgba(0, 0, 0, .1) 33%, 
                               rgba(0,0, 0, .1) 66%, transparent 66%),
       -webkit-linear-gradient(top, 
                               rgba(255, 255, 255, .25), 
                               rgba(0, 0, 0, .25)),
       -webkit-linear-gradient(left, #44a2ff, #44ffa2);

    border-radius: 2px; 
    background-size: 35px 20px, 100% 100%, 100% 100%;
   
}


.progress-done {
	background: linear-gradient(to left, #F2709C, #FF9472);
	box-shadow: 0 3px 3px -5px #F2709C, 0 2px 5px #F2709C;
	border-radius: 20px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 0;
	opacity: 0;
	transition: 1s ease 0.3s;
}





 .grid-container0 {
     display: grid;
     grid-template-columns: repeat(7, calc(100% / 7));
     grid-gap: 0;
     padding: 0;
     margin: 1%;
}
 .grid-container0 > div {
     text-align: center;
     max-height: 34.37vh;
}


 .grid-index {
     display: grid;
     grid-template-columns: 10% auto;
     grid-gap: 0;
     padding: 0;
}
 .grid-index > div {
     text-align: left;
     font-size: 0.8rem; 
}



 .grid-container4 {
     display: grid;
     grid-template-columns: repeat(4, 25%);
     grid-gap: 0;
     padding: 0;
}
 .grid-container4 > div {
     text-align: center;   
}


 .grid-container5 {
     display: grid;
     grid-template-columns: repeat(5, 20%);
     grid-gap: 0;
     padding: 0;
}
 .grid-container5 > div {
     text-align: center;   
}


 .grid-container0a {
     display: grid;
     grid-template-columns: repeat(7, calc(100% / 7));
     grid-gap: 0;
     padding: 0;
}
 .grid-container0a > div {
     text-align: center;
     padding: 0 5% 0 5%;
}


 .grid-containerPCP {
    display: grid;
    grid-template-columns: repeat(7, calc(100% / 7));
    grid-gap: 0;
    padding: 0;
    margin-left: 1.5vw;
    margin-right: 1.5vw;
}
 .grid-containerPCP > div {
     text-align: center;
     padding: 0 5% 0 5%;
}



.PCP-left {
     grid-row:    4 / span 3;
     grid-column: 1 /span 2;
     max-height: 18vh;
     margin-left: 0.5vw;
     margin-right: 0.5vw;
     margin-top: 2vh;
    color: #6091bc6b;
}

.PCP-center {
     grid-row:    4 / span 3;
     grid-column: 3 /span 1;
  
}

.PCP-right {
     grid-row:    4 / span 3;
     grid-column: 4 /span 4;
  max-height: 18vh;
      margin-left: 0.5vw;
    margin-right: 0.5vw;
}

#startTour{
    cursor:pointer
}

 .roundedTableold {
     border-collapse: separate !important;
     border: 1px green solid !important;
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     border-radius: 10px;
}
 .grid-container2 {
     display: grid;
     grid-template-columns: repeat(3, calc(100% / 3));
     grid-gap: 1px;
     padding-right: 1vw;
  
    padding-left: 1vw;
}

 .grid-container3 {
     display: grid;
     grid-template-columns: repeat(3, calc(100% / 3));
     grid-gap: 1px;
     padding-right: 1vw;
    padding-top: 1vh;
    padding-left: 1vw;
}


.panelRow {
    grid-column: 1 / 8;
    margin-top: 2vh;
    margin-left: 0.5vw;
    margin-right: 0.5vw;
     margin-bottom: .5vh;
}

.menu-panel {
 grid-row:    9 / span 1;
     grid-column: 1 /span 7 

}

 .grid-container2 > div {
     text-align: center;
     padding: 0.1rem 0;
     font-size: 2vh;
     height: 4.87vh;
   
}


 .grid-container3 > div {
     text-align: center;
     padding: 0.1rem 0;
     font-size: 2vh;
     height: 8vh;
     margin-bottom: 1.5vh
}

 #analog-stopwatch {
     height: 38.15vh;
}
 #section1 {
 margin-top: -4.5vh;
}
 #section2c {
     position: relative;
     top: 0vh;
     
     order: 2;
}
 #section3 {
    position: absolute;
    /* bottom: 4.5vh;*/
    width: 100%;
    order: 3;
/*  padding-bottom: 0.5vh;*/
    padding-top: 1.5vh;
    max-width: 800px; 
    padding-right: 9vw;
  
}

 #bit-num-left {
     height: 38.15vh;
     grid-column: 1 /span 1 
}
 #bit-num-right {
     height: 38.15vh;
     grid-column: 7/span 1 
}
 canvas {
     width:100%;
     display: block;
     margin-top: -0.5vh;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 0;
}
#bit-60a {
    grid-column: 2 / span 5;
    /* grid-row: 1; */
    /* display: block; */
    /* max-height: 38.22vh; */
    /* min-width: 70vw; */
    min-width: 34.37vh;
    margin: 0 auto;

    top: 8%

}
 #start-stop {
     grid-column: 2 / span 5;
     grid-row: 1;
     display: block;
     background-color: transparent;
     margin: 0 auto;
     z-index: 10;
     backface-visibility: hidden;
     z-index: 15;
}


 #startface {
    position: absolute;
    opacity: 0.2;
    z-index: -99;
}
     

#svg {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}


.scaling-svg {
position: absolute;
    height: 100%;
    width: 100%;
    min-width: 50vw;
    max-height: 50vh;
    min-height: 50vh;
        left: 1vw;
    left: 0;
    top: 0;
}

.svg-content { 
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}

.scaling-svg-container {
 position: relative; 
 height: 0; 
 width: 100%; 
 padding: 0;
 padding-bottom: 100%; 
 /* override this inline for aspect ratio other than square */
}


#path {
  stroke-dasharray: 628.3185307179587;
  animation: dash 605s linear forwards;

}

@keyframes dash {
  from {
    stroke-dashoffset: 6283.185307179587;
  }
  to {
    stroke-dashoffset: 0;
  }
}

 #resize {
     max-width: calc(var((--vw, 1vw) * 100));
     min-width: calc(var((--vw, 1vw) * 50));
   width: 100%;
     overflow: visible;
   
}
 #clockOverlay {
    display: inline-flex;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 800px;
    z-index: 10;
}
#delete {
    top: 31vh;
    grid-column: 2;
    grid-row: 1;
    margin: 0 auto;
    z-index: 10;
}
 #save {
     top: 31vh;
    grid-column:6;
    grid-row: 1;
    margin: 0 auto;
    z-index: 10
}
 .btn-num, .btn-panel, .btn-menu, input[type="button"] {
     padding: 2%;
     width: 99%;
     text-align: center;
     color: #FFF;
     text-decoration: none;
     display: block;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     height: 100%;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     z-index: 1 
}

button.disabled, button[disabled], .button.disabled, .button[disabled] {
    pointer-events: none;
    cursor: default;
    border: none;
    opacity: 0.60;
    border-radius: 1vh;
    font-weight: normal;
    text-shadow: none;
}

#A, #S, #KP, #MP, #PCO2, #CO2, #PH {
    padding: 1.25vh;
    color: #FFF;
    text-shadow: -1px -1px 0 #749076, 1px -1px 0 #00bcd426, -1px 1px 0 #000000a1, 1px 1px 0 #000000ad;
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 1;
}

 .num-space {
     height: 7.5vh;
     padding: 1vh 1vw 1vh 1vw;
     margin: 0 auto;
}

.blue {
    z-index: 98;
    text-shadow: -1px -1px 0 #00bcd499, 1px -1px 0 #00bcd426, -1px 1px 0 #000000a1, 1px 1px 0 #000000ad;
    background: #B2EBF2;
    border: 1px solid #5da5dc;
    background-image: -webkit-linear-gradient(top, #7fb2db, #8bdafd);
    background-image: -moz-linear-gradient(top, #0097A7, #B2EBF2);
    background-image: -ms-linear-gradient(top, #0097A7, #B2EBF2);
    background-image: -o-linear-gradient(top, #0097A7, #B2EBF2);
    background-image: linear-gradient(top, #0097A7, #B2EBF2);
    -webkit-border-radius: 1.5vh;
    -moz-border-radius: 1.5vh;
    border-radius: 1.5vh;
    -webkit-box-shadow: 0 1px 0 rgb(255 255 255 / 50%) inset, 0 -1px 0 rgb(255 255 255 / 10%) inset, 0 2px 0 #4397d8, 0 2px 1px rgb(0 0 0 / 50%);
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 2px 0 #338A94, 0 2px 1px rgba(0, 0, 0, .5);
    box-shadow: 0 1px 0 rgb(255 255 255 / 50%) inset, 0 -1px 0 rgb(255 255 255 / 10%) inset, 0 2px 0 #4698da, 0 2px 1px rgb(0 0 0 / 50%);
}
.blue-pressed {
    z-index: 99;
    background: #0b7bce;
    border: 1px solid #67aade;
    background-image: -webkit-linear-gradient(top, #b2ebf2, #429ae0);
    background-image: -moz-linear-gradient(top, #b2ebf2, #0097A7);
    background-image: -ms-linear-gradient(top, #b2ebf2, #0097A7);
    background-image: -o-linear-gradient(top, #b2ebf2, #0097A7);
    background-image: linear-gradient(top, #b2ebf2, #0097A7);
    -webkit-border-radius: 1.5vh;
    -moz-border-radius: 1.5vh;
    border-radius: 1.5vh;
    -webkit-box-shadow: 0 1px 0 rgb(255 255 255 / 50%) inset, 0 -1px 0 rgb(255 255 255 / 10%) inset, 0 2px 0 #3b93d8, 0 2px 1px rgb(0 0 0 / 50%);
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 2px 0 #338A94, 0 2px 1px rgba(0, 0, 0, .5);
    box-shadow: 0 1px 0 rgb(255 255 255 / 50%) inset, 0 -1px 0 rgb(255 255 255 / 10%) inset, 0 2px 0 #1e80cc, 0 2px 1px rgb(0 0 0 / 50%);
}
 .btn-num:before {
     text-align: center;
     border-radius: 10px;
     -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
     -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
     box-shadow: 0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
     position: absolute;
     content: "";
     left: -3px;
     right: -3px;
     top: -5px;
     bottom: -8px;
     z-index: -1;
     color: #808080 
}
 .btn-num:active {
     top: 5px;
     z-index: 1 
}
 .btn-num:active:before {
     top: -10px;
     bottom: -3px;
     content: "";
     z-index: 1 
}

 .btn-panel before {
     text-align: center;
     border-radius: 10px;
     -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
     -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
     box-shadow: 0 1px 2px rgba(0, 0, 0, .5) inset, 0 1px 0 #FFF;
     position: absolute;
     content: "";
     left: -3px;
     right: -3px;
     top: -5px;
     bottom: -8px;
     z-index: -1;
     color: #808080;
}
 .btn-panel:active {
     top: 5px;
     z-index: 1 
}
 .btn-panel:active:before {
     top: -10px;
     bottom: -3px;
     content: "";
     z-index: 1 
}
 .blue:disabled, #A:disabled, #S:disabled, #KP:disabled, #MP:disabled, #PCO2:disabled, #CO2:disabled, #PH:disabled, input[type="button"]:disabled, .btn-num:disabled {
     border: none;
     opacity: 0.60;
     background: #86c3e5;
     border-radius: 1vh;
}

 input[type="button"] {
     border-radius: 2vh;
}
/* Round del and save buttons */
 .a-btn-symbol {
     font-family: 'WebSymbolsRegular', cursive;
     border-radius: 50%;
     -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
     -o-transition: all 0.3s ease-in-out;
     transition: all 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0) 
}
 .cbtn, .cbtn:active, .cbtn:visited, .cbtn:hover {
     background: #B2EBF2;
     display: inline-block;
     border: none;
     width: 5vh;
     color: #fff;
     padding: 0.8vh;
     box-shadow: inset 0 1px 0 0 #90ADD2, 0 2px 0 0 #223955, 0 4px 3px 0 #6B6B6B;
     -moz-box-shadow: inset 0 1px 0 0 #90ADD2, 0 2px 0 0 #223955, 0 4px 3px 0 #6B6B6B;
     -webkit-box-shadow: inset 0 1px 0 0 #90ADD2, 0 2px 0 0 #223955, 0 4px 3px 0 #6B6B6B;
     position: relative 
}
.cbtn-2i {
    background: #90c2e0c4 !important;
    border-radius: 50%;
    padding: 0.8vh;
}
 .cbtn:disabled, .cbtn-2i:disabled {
     background: #c3c3c3;
     z-index: 1 
}
 .cbtn-2i:active {
     background: #B2EBF2 !important;
     box-shadow: 0 0 #368A55;
     top: 0.4vh;
     -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
     -ms-transform: rotate(360deg);
     -o-transform: rotate(360deg);
     transform: rotate(360deg) 
}

.btn-highlight {
    color: #008cba;
    text-shadow: none;
    background: border-box;
}

 .ideal {
    color: #D33682;
    padding-top: 10%;
    padding-bottom: 10%;
   /* height: 4vh;  */
    text-align: center;
}


.PCPon {
    z-index: 98;
    text-shadow: -1px -1px 0 #00bcd499, 1px -1px 0 #00bcd426, -1px 1px 0 #000000a1, 1px 1px 0 #000000ad;
    background: #0097a782;
    /* border: 1px solid #0097a782; */
    background-image: -webkit-linear-gradient(top, #7fb5dd, #b2ebf28f);
    background-image: -moz-linear-gradient(top, #0097A7, #B2EBF2);
    background-image: -ms-linear-gradient(top, #0097A7, #B2EBF2);
    background-image: -o-linear-gradient(top, #0097A7, #B2EBF2);
    background-image: linear-gradient(top, #0097A7, #B2EBF2);
    -webkit-border-radius: 1.5vh;
    -moz-border-radius: 1.5vh;
    border-radius: 1.5vh;
    -webkit-box-shadow: 0 1px 0 rgb(255 255 255 / 50%) inset, 0 -1px 0 rgb(255 255 255 / 10%) inset, 0 2px 0 #338a94, 0 2px 1px rgb(0 0 0 / 50%);
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 2px 0 #338A94, 0 2px 1px rgba(0, 0, 0, .5);
    box-shadow: 0 1px 0 rgb(255 255 255 / 50%) inset, 0 -1px 0 rgb(255 255 255 / 10%) inset, 0 2px 0 #338a94, 0 2px 1px rgb(0 0 0 / 50%);
    border: 1px solid #3c95d8;
    display: -webkit-box;
    display: -ms-flexbox;
    -ms-flex-align: center;
    -ms-flex-pack: center;
}


 .firstR {
 /*    border-top-style: outset; */
  
}
 .box-active {
 background-color: #b2ebf24f;
}
 .box {
     height: 4vh 
}
 .box2 {
  /*   height: 5vh; */
     
}
 .boxPCP.finishedR {
     border-color: transparent;
     -moz-border-radius: 4px;
     border-radius: 4px;
}

.boxPCP1 {
    height: 4vh;
   
}


 .box5 {
     height: 4vh;
 
}
 input[type="text"]:disabled {
     background: transparent;
     border: none;
     color: #808080;
   /*  font-size: 1rem; */
     box-shadow: inset 0 0 0 0;
     margin: 0;
     text-align: center;
     width: 100%;
    height: auto;
}
 input.box-PCP {
     text-align: center;
}
 input[name='number'] {
     text-align: center;
     width: 100%;
     font-size: 80%;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     border-radius: 10px;
     height: 2.5em;
     border-color: #80C6DD 
}
 input#number {
     background: transparent;
     border: transparent;
     color: #5d5b5b;
     font-family: "Roboto Light";
}
 input#number1 {
     background: transparent;
     border: transparent;
     color: #5d5b5b;
     font-family: "Roboto Light";
}
#firstTime {
     margin-top: 2vh;
    /* position: absolute; */
    z-index: 99;
    /* left: 60%; */
    /* max-width: 180px; */
    /* margin-left: 180px; */
    /* display: inline-flex; */
    /* flex-wrap: nowrap; */
    /* width: 100%; */
    /* max-width: 200px; */
    /*display: flex; */
    /*justify-content: flex-end; */
    /*padding-right: 2%; */
   /* margin-top: -28%; */
        grid-row:    1 / span 3;
   
     grid-column: 4 /span 4 
}





#endTour {
    /* position: fixed; */
    z-index: 99;
    padding: 2%;
    /*max-width: 250px; */
    /*width: 40%; */
    /* left: 60%; */
    /* max-width: 200px; */
    /* margin-left: 100px; */
}

.blue-pressed2 {
    background: #fff;
    background-image: -webkit-linear-gradient(top, #B58900, #EEE8D5);
    background-image: -moz-linear-gradient(top, #B58900, #EEE8D5);
    background-image: -ms-linear-gradient(top, #B58900, #EEE8D5);
    background-image: -o-linear-gradient(top, #B58900, #EEE8D5);
    background-image: linear-gradient(top, #B58900, #EEE8D5);
    border-radius: 8px;
}

#error_mess,#error_mess1,#end_mess,#end_mess1,#left_message,#hello_mess, {
        font-size: 90%;
        margin-top: 2vh;
 }

#end_mess1 {
    position: absolute;
    top: 46%;
    right: 28%;
    z-index: 100;

}

#fyi {
    display: none;
    font-size: 80%;
     text-align: center;
    padding: 5%
}

button.tiny, .button.tiny {
    padding: 0.25rem 1rem 0.25rem 1rem;
    font-size: 0.6875rem;
    margin: 0.25rem;
}

.callout-card {
    background: white;
    border: 1px solid #333;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    margin: 0.5rem 0;
    overflow: hidden;
}
.callout-card .card-label {
    border-color: transparent #333 transparent transparent;
    border-color: rgba(255, 255, 255, 0) #333 rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
}
.callout-card.primary {
    border-color: #446cb3;
}
.callout-card.primary .card-label {
    border-color: transparent #446cb3 transparent transparent;
    border-color: rgba(255, 255, 255, 0) #446cb3 rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
}
.callout-card.secondary {
    border-color: #adb2bd;
}
.callout-card.secondary .card-label {
    border-color: transparent #adb2bd transparent transparent;
    border-color: rgba(255, 255, 255, 0) #adb2bd rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
}
.callout-card.info {
    border-color: #b2ebf2ba;
    color: #607D8B;
}
.callout-card.info .card-label {
    border-color: transparent #89c4f4 transparent transparent;
    border-color: rgba(255, 255, 255, 0) #89c4f4 rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
}
.callout-card.alert {
    border-color: #f22613;
}
.callout-card.alert .card-label {
    border-color: transparent #f22613 transparent transparent;
    border-color: rgba(255, 255, 255, 0) #f22613 rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
}
.callout-card.success {
    border-color: #87d37c;
}
.callout-card.success .card-label {
    border-color: transparent #87d37c transparent transparent;
    border-color: rgba(255, 255, 255, 0) #87d37c rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
}
.callout-card.warning {
    border-color: #f89406;
}
.callout-card.warning .card-label {
    border-color: transparent #f89406 transparent transparent;
    border-color: rgba(255, 255, 255, 0) #f89406 rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
}
.callout-card .card-label {
    border-style: solid;
    border-width: 0 70px 40px 0;
    float: right;
    height: 0px;
    width: 0px;
    transform: rotate(360deg);
}
.callout-card .callout-card-content {
    font-size: 80%
}
.callout-card.radius {
    border-radius: 1rem;
   
    padding: 0.5rem;
}
.callout-card .label-text {
    color: #fff;
    font-size: 1vh;
    font-weight: bold;
    position: relative;
    right: -40px;
    top: 2px;
    white-space: nowrap;
    transform: rotate(30deg);
}

.alert-box .close {
    background: none
}

.alert-box.alert {
    background-color: #fff;
    border-top: 1px solid #f22613;
    border-bottom: 1px solid #f22613;
    color: #333
}

.alert-box.info {
    background-color: #fff;
    border-top: 1px solid #89c4f4;
    border-bottom: 1px solid #89c4f4;
    color: #333
}

.alert-box.success {
    background-color: #fff;
    border-top: 1px solid #87d37c;
    border-bottom: 1px solid #87d37c;
    color: #333
}

.introjs-overlay {
    position: absolute;
    box-sizing: content-box;
    z-index: 999999;
    opacity: 0
}

.introjs-fixParent {
    z-index: auto !important;
    opacity: 1.0 !important
}

.introjs-showElement {
    z-index: 9999999 !important
}

.introjs-relativePosition {
    position: relative
}

.introjs-helperLayer {
    z-index: 9999998;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid #fff;
    border-radius: 10px;
    box-shadow: 0 8px 50px -10px rgba(0, 0, 0, .1);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out
}

.introjs-helperNumberLayer {
    position: absolute;
    top: -29px;
    left: -29px;
    z-index: 9999999999 !important;
    padding: 3px;
    font-family: "Roboto Light",Arial, verdana, tahoma;
    font-size: 13px;
    font-weight: bold;
    color: #DA4433;
    background: #FFF;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    border: 3px solid #DA4433;
    border-right: none;
    border-bottom: none;
    border-radius: 10px 0 0 0
}

.introjs-arrow {
    border: 0 solid white;
    content: '';
    position: absolute
}

.introjs-arrow.top {
    top: 0
}

.introjs-arrow.right {
    right: 0;
    top: 0
}

.introjs-arrow.bottom {
    bottom: 0
}

.introjs-arrow.left {
    left: 0;
    top: 0
}

.introjs-tooltip {
    position: fixed;
    padding: 4px 10px 4px 10px;
    min-width: 30vw;
    max-width: 60vw;
    border-radius: 10px;
    box-shadow: 0 -6px 50px -4px rgba(0, 0, 0, .4);
    -webkit-transition: opacity 0.1s ease-out;
    -moz-transition: opacity 0.1s ease-out;
    -ms-transition: opacity 0.1s ease-out;
    -o-transition: opacity 0.1s ease-out;
    transition: opacity 0.1s ease-out;
    bottom: 22vh !important;
    left: 0 !Important;
    top: initial !important;
    right: 0 !Important;
  
    margin-left: auto;
    margin-right: auto
}

.introjs-tooltiptext {
    margin-left: -10px;
    margin-right: -10px;
    color: #2c3e50;
    padding: 5px 10px
}

.introjs-button {
    position: relative;
    overflow: visible;
    display: inline-block;
    padding: 0.5em 0.8em;
    box-shadow: 0 2px 0 -0 #B58900;
    margin: 0;
    font: 11px/normal sans-serif;
    color: #B58900 !important;
    zoom: 1;
    *display: inline;
    margin-top: 10px
}


.introjs-button:focus,
.introjs-button:active {
    background: #23587A;
    text-decoration: none;
    box-shadow: 0 2px 0 0 #173B53
}

.introjs-button::-moz-focus-inner {
    padding: 0;
    border: 0
}

.introjs-nextbutton,
.introjs-skipbutton,
.introjs-prevbutton {
    margin-left: 5%;
    margin-right: 5%;
    font-size: 0.8em;
    font-weight: bolder;
    background-image: -webkit-linear-gradient(top, #EEE8D5, #EEE8D5);
    background-image: -moz-linear-gradient(top, #EEE8D5, #EEE8D5);
    background-image: -ms-linear-gradient(top, #EEE8D5, #EEE8D5);
    background-image: -o-linear-gradient(top, #EEE8D5, #EEE8D5);
    background-image: linear-gradient(top, #EEE8D5, #EEE8D5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 2px 0 #338A94, 0 2px 1px rgba(0, 0, 0, .5);
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 2px 0 #338A94, 0 2px 1px rgba(0, 0, 0, .5);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 -1px 0 rgba(255, 255, 255, .1) inset, 0 2px 0 #338A94, 0 2px 1px rgba(0, 0, 0, .5)
}

.introjs-disabled,
.introjs-disabled:focus {
    color: #C2C2C2 !important;
    border-color: #d4d4d4;
    cursor: default;
    box-shadow: 0 2px 0 -0 #CACED1;
    background-color: #E6E6E6;
    background-image: none;
    text-decoration: none
}

.introjsFloatingElement {
    position: absolute;
    height: 0;
    width: 0;
    left: 50%;
    top: 50%
}

#step0 {
    z-index: -9999;
    position: relative;
    height: 36vh;
    left: -5%;
    width: 56%;
    margin: 0 auto
}

#step1 {
    z-index: -9999;
    position: absolute;
    left: 6%;
    height: 6%;
    width: 48%;
    margin-top: 2vh;
}

.bit-1-tour {
    z-index: -9999;
    position: absolute;
    width: 99%;
    top: 2vh;
    text-align: center
}

.bit-1 {
    width: 100%;
     padding-top: 10%;
    text-align: center

}

.bit-1-error {
    width: 100%;
    text-align: center

}

.bit-1q {
    text-align: left;
    background-color: #e0f7fa40;
    color: #383e42;
    padding: 2vw;
}


.bit-2 {
    width: 50%;
    text-align: center
}


.cappltour {
    font-size: 0.8em
}

.introjs-tooltipbuttons {
    text-align: center;
    margin-left: 4%;
    margin-right: 4%;
    padding-bottom: 2%
}

#CPHow {
    background-color: #a0d3e8;
    border-color: #61b6d9;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    color: #333;
    padding: 0.1em
}



.main {
    margin: 0 auto;
    max-width: 800px;
    height: 95vh;
    margin-right: 5vh
        background-color: transparent;
    padding-top: 1vh;
}


#helpText {
    display: none;
    height: 92vh;
    width:91vw;
    padding-left: 4vw;
    padding-right: 2vw;
    z-index: 9999;
    overflow-y: scroll;
    scrollbar-width: none;
}


.helpTextNoCol {
    position: absolute;
    top: 1em;
    margin: auto;
    right: 2%;
    z-index: 9999
}


.parent {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-evenly;
 align-items: baseline;

}
.child {
  width: 30%;
}

/* the new clock */

.e-c-base {
    fill: #00bcfd99;
    stroke: #ffffff;
    stroke-width: 25px;
}
.e-c-progress {
    fill: none;
    stroke: darkcyan;
    stroke-width: 14px;
    transition: stroke-dashoffset 0.7s;
}
.e-c-pointer {
    fill: #FFF;
    stroke: #F7958E;
    stroke-width: 2px;
}
#e-pointer {
    transition: transform 0.7s;
}


.e-c-base1 {
    fill: none;
    /* stroke: black;  -- the new clock */
   
    stroke-width: 10px
}
.e-c-progress1 {
    fill: none;
    stroke: black;
    stroke-width:17px;
    transition: stroke-dashoffset 0.7s;
}

.e-c-pointer1 {
    fill:  #FFF;
    stroke: #F7958E;
    stroke-width: 2px;
}


#e-pointer1 {
    transition: transform 0.7s;
}


.clock {
position: relative;

background-position:50% 50%;  /* Sets reference point to scale from */
background-size:contain;        /* Sets background image to cover entire element  PR contain ... check this*/
background-repeat: no-repeat;
background-image:url(clockface4.png);
}


.hands {
 position:absolute;
 top:0;
 left:0;

}


.hand {
    position: absolute;
    left: 49.5%;
    transform-origin: center center;
    right: auto;
    height: 34.37vh;
}


.hand1 {
    position: absolute;
    left: 48.2%;
  /* transform-origin: left; */
    right: auto;
    height: 34.37vh;
    
}

.clockcenter {
    position: absolute;
top: 48.5%;
left: 48.5%;
    /* transform-origin: left; */
    /* right: auto; */
    margin: 0 auto;
    z-index: 10;
}

/* end of new clock test   */



/* Help text pages css */

.flex-text {
  display: flex;
  flex-wrap: nowrap;
 width:91%;
}

.flex-text > div {
  background-color: #f1f1f1;
  width: 91%;
  margin: 0.2%;
  text-align: center;
  line-height: 300%;
  font-size: 80%;
}

.flex-date {
  display: flex;
  flex-wrap: nowrap;
 width:20%;
}

.flex-date > div {
  background-color: #fff;
    width: 50vw;
    margin: 1vw;
  text-align: center;
  line-height: 300%;
  font-size: 80%;
}



.idealText {
color:#D33682
}


.cpZzone {
    background-color: lavender;
}


.CPlight {  
    text-decoration: overline;
    background: #0097a782;
}

.swiper-container { 
    height: 14.5vh;
 
    }
   
    .swiper-slide {
    text-align: center;
    z-index: 0.99;
    height: 4vh;
    text-align: center; 
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
     justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
     align-items: center;
    }

#CPPend {
     margin-top: 0.5vh;
    padding-left: 36%;
    padding-right: 33%;

}


/* Calender and log */

.calendar .day {
       text-align: center;
}


.sCol1, .sCol2 {
/* if needed */
}

.grid-log {
  display: grid;
  grid-template-columns: auto auto;
  background-color: #2196F3;
}

.grid-log > div {
  background-color: rgb(249 249 249);
  text-align: center;
  padding: 2vh;
  
}



.donut-legend > span {
  display: inline-block;
  margin-right: 25px;
  margin-bottom: 10px;
  font-size: 0.8rem;
}
.donut-legend > span:last-child {
  margin-right: 0;
}
.donut-legend > span > i {
  display: inline-block;
  width: 5vw;
  height: 3vh;
  margin-right: 7px;
  margin-top: -3px;
  vertical-align: middle;
  border-radius: 1px;
}
#donut-example {
  max-height: 280px;
  margin-top: 20px;
  margin-bottom: 20px;
}



/* the following are for media queries */

/* doesn't matter if width greater than the interface width unless we put side panels for eg Laptop, computers TV ----- */



















@media all and (min-width: 800px) {
    body {
      /*  background: #494949; */
        height: 100%
    }


#openSupport {
    margin-right: -6vw;
    margin-left: -6vw;
}


.clock {
    position: relative;
    top: 5%;
    background-position: 50% 50%;
    background-size: 110%;
    background-repeat: no-repeat;
    background-image: url(clockface4.png)
}


 #startface {
    position: absolute;
    width: 110%;
    left: -5%;
    padding-top: 0%;
    opacity: 0.25;
    z-index: -99;
}

#start-stop {
    width: 98%;
    padding-top: 5%
}

.clockcenter {
left: 49;
right: 49%;
    /* transform-origin: left; */
    /* right: auto; */
}

#bit-60a {
    grid-column: 2 / span 5;
    min-width: 62%;
    margin: 0 auto;
}

#step0 {
    max-width: 520px;
    width: calc((800px - 14.28%));
    left: calc((400px - 51%));
}

#step1 {
    width: 440px;
    left: calc((51% - 400px));
}

.introjs-tooltip {
   max-width: 750px;
}

.hand {
width: 2%;
left: 49.2%;
}

.hand1 {
width: 5%;
left: 47.7%;
}

.PCP-left {  
       max-height: 18vh
}

.PCP-right {
       max-height: 18vh
}


#end_mess1 {
    position: absolute;
    top: 60%;
    left: 50%;
    z-index: 100;
}


.swiper-container {
    
    height: 16vh;
    /* top: 1.5vh; */
    }

 /*#helpText {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        -moz-column-gap: 30px;
        -webkit-column-gap: 30px;
        color: #FDF6E3;
        background: #494949;
        max-width: 96%;
        margin: auto;
        column-fill: auto;
        padding-bottom: 2vh;
        padding-left: 5%;
        padding-right: 5%
    }

    .helpTextNoCol {
        position: absolute;
        top: 1em;
        max-width: 1000px;
    }
 */   
    input[type="text"]:disabled {
     /*   color: #acf3c6; */
     /*   font-size: 90%; */
    }
}