/* Landscape
@media screen and (orientation:landscape) { */
    html{
        overflow: hidden;
      }

   /* Landscape styles here */
   body {
        margin : 0px;
        -moz-user-select: none;
        -khtPanel1-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;

        /* disable callout, image save panel on long press */
        -webkit-touch-callout: none;

        /* "turn off" link highlight, good for custom pressed states */
        -webkit-tPanel2-hightlight-color: transparent;
        overflow: hidden;
        font-family: Helvetica;
        font-size: 1.05vw;
        background-color: rgb(255,255,255);
        height: 100vh;
        width: 100vw;
    }



    html, html a {
        -webkit-font-smoothing: antialiased;
        text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    }

    h1{
        font-size: 1.5vw;
        margin: 0px;
        line-height: 5vh;
        padding-left: 6vh;
        color: #ffffff;
        font-weight: bold;
        font-family: Helvetica;
        display: inline;
    }
    h2{
        line-height: 4vh;
        font-size: 1.20vw;
        margin: 0px;
        margin-bottom: 1vh;
        padding: 0px;
        vertical-align: middle;
        font-weight: bold;
        font-family: Helvetica;
        color: #444;
        background: #F4F6F7 ;
        text-align: center;
        border-bottom: 1px solid #f9a21a;
    }
    h3{ line-height: 4vh;
        font-size: 1.20vw;
        margin: 0px;
        padding-left: 1vw;
        padding-right: 1vw;
        vertical-align: middle;
        font-weight: bold;
        font-family: Helvetica;
        color: #444;
        background: #F4F6F7 ;
        display: inline-block;
    }
    h3 input[type=checkbox]{
        margin: 0.25vw;
        vertical-align: middle;
        width: 1.5vw;
        height: 1.5vw;
        margin-right: 0.5vw;
        float: right;
        background: #F4F6F7 ;
    }
    input[type=checkbox]{
        vertical-align: middle;
        width: 1.5vw;
        height: 1.5vw;
        border: 1px solid #f9a21a;
        borde-radius: 0.25vw;
    }

    h4{
        line-height: 4vh;
        font-size: 1.20vw;
        margin: 0px;
        padding: 0px;
        vertical-align: middle;
        font-weight: bold;
        font-family: Helvetica;
        color: #f9a21a;
        background: #F4F6F7 ;
        text-align: center;
    }

    h5{
        font-size: 1.05vw;
        margin: 0px;
        margin-left: 5px;
        margin-top: 10px;
        color: #333;
        border-bottom: 1px solid lightslategrey;
    }
    h6{
        font-size: 1.05vw;
        margin: 0px;
        margin-top: 10px;
        padding: 0.3em;
        border-bottom: 1px lightslategrey;
    }



    /* width */
    ::-webkit-scrollbar {
      width: 10px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
      box-shadow: inset 0 0 10px #fde5bf;
      border-radius: 2vw;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
      background: #fdd8a0;
      border-radius: 5px;
      border: 1px solid lightgrey;
      border-radius: 2vw;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
      background: #f9a21a;
    }


    #sixafixIcon{
        height: 5vh;
        position: absolute;
        display: inline;
    }

    .controlTables{
        font-family: Helvetica;
        font-style: normal;
        font-size: 1.15vw;
        color: #383946;
        width: 100%;
        margin: 0px;
        border-bottom: 1px solid lightgray;
        padding: 0.10vw;
        margin-bottom: 4vh;
    }
    .controlTables td{
        padding: 0.20vw;
        height: 4vh;
        text-align: center;
    }
    .controlTables td input[type="number"]{
      border: 1px solid lightgrey;
      border-radius: 2px;
      outline: none;
      width: 3.5vw;
      height: 3vh;
      font-size: 1.05vw;
      padding-left: 0.25vw;
      color: #566573;
      border-radius: 0.25vw;
      font-weight: bold;
    }
    .controlTables td input[type="checkbox"]{
      width: 1.5vw;
      height: 1.55vw;
      margin: 0px;
      padding: 0px;
      vertical-align: text-bottom;
      display: inline-block;
        background-color: #f9a21a;
        color: #fff;
    }
    .controlTables td input[type="checkbox"]:checked{
        background-color: #f9a21a;
        color: #fff;
        color: #fff;
    }

    .controlTables td input[type="radio"]{
      width: 1.25vw;
      height: 1.25vw;
      margin: 0px;
      padding: 0px;
    }
    .controlTables label{
      font-size: 1vw;
    }
    .controlTables select{
      border: 1px solid lightgrey;
      border-radius: 2px;
      outline: none;
      height: 3vh;
      font-size: 1.05vw;
      padding-left: 0.25vw;
      color: #566573;
      border-radius: 0.25vw;
      font-weight: bold;
    }
    .controlTables select:disabled{
        background: lightgrey;
    }
    .largeSelect{
       width: 7vw;
    }
    .shortSelect{
        width: 4vw;
    }


    option{
        outline: 0px;
    }

    button{
      outline: none;
      font-size: 1.15vw;
      outline:0;
      border-radius: 1vh;
      color: #fff;
      border: none;
      background-color: #f9a21a;
    }
    button:disabled{
        color: #fff ;
        background-color: #fde5bf;
    }
    button:hover{
        border: 1px solid #fff;
    }

    /*.no-close .ui-dialog-titlebar-close {  display: none;} */

    #surgeonbar{
        position: fixed;
        left: 0vw;
        top: 0vh;
        height: 4.5vh;
        line-height: 4.5vh;
        width: 100vw;
        font-size: 2.5vh;
        border-bottom: 0.5vh solid #71C05C;
        background: #f9a21a;
        padding: 0px;
        margin: 0px;
    }

    #surgeonNameTab{
        position: fixed;
        left: 79vw;
        top: 0vh;
        width: 21vw;
        height: 5vh;
        margin: 0px;
        padding: 0px;
        border: 0px;
    }
    .topbarTable{
        margin: 0px;
        padding: 0px;
        border: 0px;
        vertical-align: middle;
        line-height: 4vh;
        width: 100%;
        font-family: Helvetica;
    }
    #surgeonNameButton{
        width: 15vw;  height: 3.75vh;
        border-radius: 1vw;
        border: none;
        color: #444;
        font-weight: bold;
        background-color: #ffffff;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
    }
    #homeButton{
        width: 5vw; height: 2.2vw;
    }

    #casesDiv{
        position: absolute;
        left: 0vw;
        top: 5vh;
        width: 100vw;
        height: 92vh;
        margin: 0px;
        background-color: #ffffff;
    }

    #searchBar{
        margin: 1vh;
        width: 72vw;
    }
    #searchfield{
        height: 4vh;
        width: 17.5vw;
        border-radius: 0.25vw;
        outline: none;
        border: none;
        font-size: 1.2vw;
        padding: 5px;
    }
    #casedelete{
        float: right;
        margin-left: 0.5vw;
    }
    #caseshare{
        float: right;
        margin-left: 0.5vw;
    }
    #caseadd{
        float: right;
        margin-left: 0.5vw;
    }

    #patientslist{
        position: absolute;
        left: 0vw;
        top: 0vh;
        width: 73vw;
        overflow-y: auto;
        overflow-x: hidden;
        height: 89vh;
        border-radius: 1vh;
        background-color: #eeeeee;
        font-family: Helvetica;
        margin-left: 1vw;
        margin-right: 1vw;
        margin-top: 2vh;
        margin:bottom: 2vh;
    }
    #patientslisttable{
        margin-left: 1vh;
        width: 72vw;
        position: absolute;
        border: none;
        font-size: 1.25vw;
        border-collapse: collapse;
        margin-top: 2vh;
        border-radius: 0.25vw;
        color: #444;
    }
    #patientslisttable tbody{
        padding-top: 2vh;
    }
    #patientslisttable tr{
        height: 4vh;
        width: 72vw;
        border-radius: 0.25vw;
        margin-bottom: 1vh;
        margin-top: 1vh;
        margin-left: 1vh;
        margin-right: 1vh;
        outline: 0.5vh #eeeeee solid;
    }
    #patientslisttable th{
        color: #333;
        padding-bottom: 1vh;
        padding-top: 1vh;
        text-align: left;
        height: 4vh;
        outline-bottom: 1vh #eeeeee solid;
    }
    #patientslisttable td{
        padding: 0.5vw;
        white-space: nowrap;
        max-width: 25vw !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #patientslisttable th {
        align-content: center;
    }
    #patientslisttable thead tr{
        background: #fff;
    }
    #patientslisttable thead td{
    }
    #patientslisttable thead td:hover{
        text-decoration: underline;
    }
    #patientslisttable tbody tr:hover{
        background: #fef4e5;
        color: #444;
    }
    .selected {
        background: #fde5bf;
        color: #444;
        font-weight: bold;
    }
    .selected:hover{
        font-weight: bold;
    }
    .unselected {
        background: #fff;
    }
    .statusShowButton{
      width: 2vw; height: 2vw;
      border-radius: 0.5vw;
      border: none;
    }
    .statusShowButtonSmall{
      width: 1.5vw; height: 1.5vw;
      border-radius: 0.1vw;
      border: none;
    }

    .unselectedCaseList{
        height: 4vh;
        border-radius: 0.5vw;
        border: none;
        background-color: grey;
    }
    .selectedCaseList{
        height: 4vh;
        border-radius: 0.5vw;
        border: none;
        background-color: #f9a21a;
    }

    .activeOpen{
        outline:none; color:rgba(0,0,0,0);
        background-image: url(/icons/opencase.png);
        background-size: 100%;
    }
    .inactiveOpen{
        outline:none; color:rgba(0,0,0,0);
        background-image: url(/icons/opencase-inactive.png);
        background-size: 100%;
    }

    .activeEdit{
        outline:none; color:rgba(0,0,0,0);
        background-image: url(/icons/editcase.png);
        background-size: 100%;
    }
    .inactiveEdit{
        outline:none; color:rgba(0,0,0,0);
        background-image: url(/icons/editcase-inactive.png);
        background-size: 100%;
    }

    .activeTrue{
      color: #fff;
      border: none;
      background-color: #f9a21a;
    }
    .inactiveTrue{
        color: #f9a21a;
      border: #f9a21a;
      background-color: #fff;
    }

    #casePreview{
        position: absolute;
        left: 75vw;
        top: 0vh;
        width: 25vw;
        height: 92vh;
        margin: 0px;
        padding: 0px;
        background: #fff;
    }
    #openCase{
        position: absolute;
        left: 7.5vw;
        top: 0vh;
        width: 10vw;
        height: 2.2vw;
        margin: 0px;
        padding: 0px;
    }


    #caseOpenedDiv{
        position: absolute;
        left: 0vw;
        top: 0vh;
        width: 100vw;
        height: 92vh;
        margin: 0px;
        padding: 0px;
    }

    #patientbar{
        position: absolute;
        left: 1vw;
        top: 0vh;
        height: 7vh;
        line-height: 6.5vh;
        width: 98vw;
        font-size: 2.5vh;
        margin: 0px;
    }
    #topMiddleBarTable{
        /*border: 1px solid lightgray;*/
        position: absolute;
        top: 0px;
        left: 0px;
        padding: 0px;
        margin: 0px;
        display: inline;
        width: 98vw;
        font-family: Helvetica;
        border-collapse: collapse;
        border-radius: 1vh;
    }
    #topMiddleBarTable tr{
        border-radius: 1vh;
    }
    #topMiddleBarTable td{
        padding-left: 0.25vw;
        border-radius: 1vh;
    }
    #caseStates{
        height: 4vh;
        margin: 0.5vh;
        vertical-align: top;
    }
    #caseStatesBar td{
        width: 16.33vw;
    }
    #caseStatesBar{
        height: 2vh;
        font-size: 1vh;
        font-weight: bold;
        color: #e7bd3d;
        background-color: #C4FFB3;
        border:none;
    }
    #caseStatesBar td{
    }

    #caseStates label{
      font-size: 2.5vh;
      display: inline-block;
      border-radius: 0.25vw;
      font-weight: bold;
      color: #444;
      height: 3vh;
      width: 20vw;
      line-height: 4vh;
    }
    #caseStates button{
        display: inline-block;
    }



    #patientname{
        position: absolute;
        left: 0vw;
        top: 7vh;
        width: 18vw !important;
        height: 5vh;
        line-height: 2.5vh;
        margin-left: 1vw;
        padding: 0px;
        z-index: 2;
        display: block;
        background-color: #f47820;
        border-top-left-radius: 1vh;
        border-top-right-radius: 1vh;
        vertical-align: middle;
      white-space: wrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #patientname span{
        vertical-align: middle;
         font-size: 2vh;
        height: 4vh;
        width: 18vw;
        border-top-left-radius: 1vh;
        border-top-right-radius: 1vh;
      color: #fff;
      padding-bottom: 0.5vh;
      padding-top: 0.5vh;
      padding-left: 1vw;
      padding-right: 1vw;
    }

    #controls{
      position: absolute;
      left: 0vw;
      top: 10vh;
      width: 18vw;
      height: 79.5vh;
      margin-left: 1vw;
      margin-top: 1vw;
      margin-bottom: 1vw;
      margin-right: 0vw;
      padding: 0px;
      padding-right: 0px;
      background-color: #eeeeee;
      overflow-y: auto;
      overflow-x: hidden;
      border-bottom-left-radius: 1vh;
      border-bottom-right-radius: 1vh;
    }
    #controls label{
        font-family: Helvetica;
        font-size: 1.10vw;
        color: #444;
        font-weight: bold;
    }
    #controls input[type=number]{
        width: 4vw;
        height: 3.25vh;
    }
    #controls input[type=text]{
        width: 4vw;
        height: 3vh;
    }

    .errroRow{
        height: auto;
    }
    .errroRow td{
        height: auto;
    }
    .errorMsg{
        position: relative;
        top: 0;
        left: 0;
        font-size: 0.8vw;
        color: #E74C3C;
        font-weight: bold;
        vertical-align: top;
    }

    #strutPositions input[type=number]{
        width: 3.5vw;
    }
    #strutPositions button{
        padding: 0px;
        width: 2.75vw; font-size:0.95vw;
        height: 3vh;
    }
    #strutPositions button:disabled{
        color: grey;
    }
    .strupositionsHighlight{
        background-color: #71C05C;
        color: #fff;
    }
    .strupositionsHighlight:disabled{
        background-color: #C4FFB3;
        color: #f9a21a;
    }
    .strupositionsNotHighlight{
        background: #fde5bf;
        color: #444;
    }

    #strutPositions .small{
        font-size: 0.75vw;
    }

    #toolTipStrutPosition{
        position: absolute;
        left: 20vw;
        top: 10vh;
        height: 50vh;
        width: content;
        display: none;
    }
    #toolTipStrutPosition img{
        height: 50vh;
    }
    #toolTipStrutLength{
        position: absolute;
        left: 20vw;
        bottom: 2.5vh;
        height: 50vh;
        width: content;
        display: none;
    }
    #toolTipStrutLength img{
        height: 50vh;
    }

    #strutLengths button{
        width: 4.5vw; font-size:0.95vw;
        height: 3vh;
        background: #71C05C;
    }
    #strutLengths button:disabled{
        background-color: #C4FFB3;
        color: grey;
    }
    #strutLengths input{
        width:4vw;
    }
    #strutLengths span{
        margin: 0vw;
        padding: 0vw;
        font-size:0.65vw;
        color: #E74C3C;
    }
    #errormsgrow{
      position: relative;
      top: -35vh;
    }

    .strutLabel{
        border: 1px;
        color: #444;
    }

    #boneAnnotation button{
        padding: 0.75vh;
    }
    #boneAnnotation button:disabled{
        color: grey;
    }
    #axisReferences label{
        font-size: 1vw;
    }

    #correctionParamTable label{
        font-size: 1.1vw;
    }

    #correctionscheduleAnnotation button{
        background: #fff;
        border: 1px;
    }

    #hexapodContainer{
        position: absolute;
        left: 0vw;
        top: 0vh;
        width: 20vw;
        height: 87vh;
        margin: 0px;
        padding: 0px;
        overflow-y: auto;
        font-size: 0.5vw;
    }

    #APimageDiv{
      position: absolute;
      left: 20vw;
      top: 7vh;
      width: 39.95vw;
      height: 85vh;
      margin: 0px;
      padding: 0px;
      background: #444 ;
      border-radius: 1vh;
    }
    #MLimageDiv{
      position: absolute;
      left: 60.05vw;
      top: 7vh;
      width: 39.95vw;
      height: 85vh;
      margin: 0px;
      padding: 0px;
      background: #444 ;
      border-radius: 1vh;
    }
    .rotationAngle{
      border: 1px solid lightgrey;
      border-radius: 2px;
      outline: none;
      width: 3.5vw;
      height: 3vh;
      font-size: 1.05vw;
      padding-left: 0.25vw;
      color: #566573;
      border-radius: 0.25vw;
      font-weight: bold;
    }
    .previewXrayCanvas{
        position: absolute;
        left: 0vw;
        width: 24vw;
        height: 44vh;
        cursor: crosshair;
        margin-right: 1vw;
        margin-top: 1vh;
        margin:bottom: 1vh;
        border-radius: 1vh;
        background-color: #eeeeee;
    }
    #previewAPCanvas{
        top: 1vh;
    }
    #previewMLCanvas{
        top: 46vh;
    }
    .XrayCanvas{
        position: absolute;
        left: 0vw;
        top: 0vh;
        width: 40vw;
        height: 87vh;
        background-color: rgb(255,255,255, 0);
        cursor: crosshair;
    }


    #footer{
        position: fixed;
        left: 0vw;
        top: 97.5vh;
        height: 2.5vh;
        line-height: 2.75vh;
        width: 100vw;
        background: #eeeeee;
        color: #444;
        padding: 0px;
        margin: 0px;
        border-top: 1px solid lightgrey;
    }
    #footer label{
        font-size: 0.75vw;
        font-weight: normal;
    }
    #footer table{
        width: 100%;
        margin: 0px;
        padding: 0px;
    }
    #footer table th{
      margin: 0px;
      padding: 0.4vh;
    }
    #footer table td{
      padding: 0.4vh;
    }



    #dialogCorrectionSchedule{
        width: 75vw;
        padding: 0px;
        text-align: center;

    }
    #dialogCorrectionSchedule input{
        border: 1px solid lightgrey;
        height: 2.5vh;
    }
    #scheduleHeadings{
        top: 0vh;
        height: 7.5vh;
    }

    #dialogCorrectionScheduleDiv{
        padding: 0px;
        top: 10vh;
        margin-bottom: 5vh;
        border-bottom: 1px solid;
        border-top: 1px solid;
        min-height: 0vh;
        max-height: 70vh;
        overflow-y: auto;
    }
    #divAdjustedSchedule{
        margin-top: 5vh;
        border-top: 1px solid;
    }
    #dialogCorrectionScheduleDivHead{
        border-bottom: 1px solid;
    }
    #dialogCorrectionScheduleDivChart{
        top: 15vh;
        height: content;
        max-height: 55vh;
        overflow-y: auto;
    }
    #dialogCorrectionScheduleDivChart a{
        color: darkblue;
    }
    .startingDateHexapodPicker{
        border: none;
        outline: none;
        background: none;
    }

    .dialogCorrectionScheduleTableParams{
        width: 100%;
        margin: 0px;
        font-size: 1vw;
    }
    .dialogCorrectionScheduleTable{
        border-collapse: collapse;
        width: 100%;
        margin: 0px;
        font-size: 1vw;
    }
    .dialogCorrectionScheduleTable td{
        border-collapse: collapse;
        border: 1px solid lightgrey;
        width: 12.5%;
        vertical-align: middle;
        padding: 0.75vh;
    }
    .dialogCorrectionScheduleTable th{
        width: 12.5%;
        font-weight: normal;
    }
    .dialogCorrectionScheduleTable .tobeviewed tr:hover{
        background-color: rgba(76,175,80, 0.25);
        font-weight: bold;
    }
    #sceduleheaders{
        border-right: 10px solid;
        border-left: 1px solid;
    }
    #sceduleheaders th{
        padding-top: 0.5vh;
        padding-bottom: 0.5vh;
    }
    .smallNotice{
        font-weight: normal;
        font-size: 0.8vw;
        font-style: italic;
    }

    #referLimits{
        float: left;
        height: 4.5vh;
        padding: 0.5vh;
        margin: 0.5vh;
        background-color: #fff;
        color: rgb(100,100,100);
        font-style: bold;
        border: 0px solid rgb(200,200,200);
    }
    #referLimitsDiv{
        position: absolute;
        left: 0vw;
        top: 0.5vh;
        width: content;
        display: none;
    }
    #referLimitsDiv table{
        width: 15.5vw;
        background-color: #fff;
        font-weight: bold;
        color: rgb(100,100,100);
        font-size: 1vw;
        border-collapse: collapse;
        border: 1px solid rgb(200,200,200);
    }
    #referLimitsDiv table td{
        padding-top: 0.5vh;
        padding-bottom: 0.5vh;
    }

    #dialogChangeInitialLengths table td{
        font-size: 1vw;
        height: 4vh;
    }
    #dialogChangeInitialLengths button{
        width: content;
        min-width: 4.5vw;
        font-size:1vw;
        height: 3vh;
        background: #f9a21a;
        color: #fff ;
    }
    #dialogChangeInitialLengths button:disabled{
        color: #fff ;
        background-color: #fde5bf;
    }
    #dialogChangeInitialLengths .adjustScheduleInput{
        border: 1px solid lightgrey;
        border-radius: 2px;
        outline: none;
        width: 5vw;
        height: 3.5vh;
        padding-left: 0.25vw;
        color: #566573;
        border-radius: 0.25vw;
        font-weight: bold;
    }

    #printSchedule{
        height: 4.5vh;
        color: #fff;
        padding: 0.5vh;
        padding-left: 1vw;
        padding-right: 1vw;
        margin: 0.5vh;
        float: right;
    }
    .tobeprinted{
        page-break-before: always;
         -webkit-print-color-adjust: exact;
    }

    @media all {
    .page-break { display: none; }
    }

    @media print {
    .page-break { display: block; page-break-before: always; page-break-after: always;}
    }


    #correctionParameters label{
        font-family: Helvetica;
        font-size: 1vw;
        color: #444;
        font-weight: bold;
    }
    #correctionParameters input{
        width: 4vw;
    }
    #correctionParameters td{
        width: 25vw;
    }
    .angle3Dlarge{
        width: 4vw;
        height: 3vh;
    }

    #toBePrintedCaseInfo{
        display: none;
        border-collapse:collapse;
        font-size: 1.5vw;
    }
    #toBePrintedCaseInfo td{
        padding: 1vh;
        max-width: 50vw;
    }
    #toBePrintedCaseSchedule{
        display: none;
        border-collapse:collapse;
    }
    #toBePrintedCaseSchedule td{
        padding: 2vh;
    }
    #screenShotsForReport{
        display: none;
    }

    .actionButtonsSmallRound{
        height: 3vh;
         width: 3vh;
         border-radius: 1.5vh;
         float: right;
         margin: 0.25vh;
         font-size: 2vh;
         padding: 0vh;
         vertical-align: middle;
         text-align: center;
    }
    .actionButtonsCorrection{
      height: 4vh;
      padding-left: 1vw;
      padding-right: 1vw;
      border-radius: 2vh;
      margin: 1vh;
    }
    .actionButtons{
       height: 4vh;
       padding-left: 1vw;
       padding-right: 1vw;
       border-radius: 2vh;
    }
    .actionButtonsWithFlash {
        height: 2.2vw;
      -webkit-animation-name: example1; /* Safari 4.0 - 8.0 */
      -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
      -webkitanimation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
      animation-name: example1;
      animation-duration: 1s;
      animation-iteration-count: infinite;
    }
    .labelWithFlash{
        height: 2.2vw;
      -webkit-animation-name: example1; /* Safari 4.0 - 8.0 */
      -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
      -webkitanimation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
      animation-name: example1;
      animation-duration: 1s;
      animation-iteration-count: infinite;
    }
    .labelWithoutFlash{
        height: 4vh;
        font-size: 2vh ;
        color: #71C05C ;
    }


    .triangle-left {
        height: 3vh;
        width: 3vh;
        border-top: 1.5vh solid transparent;
        border-right: 3vh solid #f9a21a;
        border-bottom: 1.5vh solid transparent;
        background: none;
        vertical-align: top;
    }
    .triangle-right {
        height: 3vh;
        width: 3vh;
        border-top: 1.5vh solid transparent;
        border-left: 3vh solid #f9a21a;
        border-bottom: 1.5vh solid transparent;
        background: none;
        vertical-align: top;
    }
    .triangle-left:hover{
        height: 3vh;
        width: 3vh;
        border-top: 1.5vh solid transparent;
        border-right: 3vh solid #71C05C;
        border-bottom: 1.5vh solid transparent;
        background: none;
    }
    .triangle-left:disabled{
        height: 3vh;
        width: 3vh;
        border-top: 1.5vh solid transparent;
        border-right: 3vh solid #fde5bf;
        border-bottom: 1.5vh solid transparent;
        background: none;
    }

    .triangle-right:hover{
        height: 3vh;
        width: 3vh;
        border-top: 1.5vh solid transparent;
        border-left: 3vh solid #71C05C;
        border-bottom: 1.5vh solid transparent;
        background: none;
    }
    .triangle-right:disabled{
          height: 3vh;
        width: 3vh;
        border-top: 1.5vh solid transparent;
        border-left: 3vh solid #fde5bf;
        border-bottom: 1.5vh solid transparent;
        background: none;
    }
    #scheduleOpen{
        border-radius: 1vh;
        width: auto;
        height: 3.5vh;
        vertical-align: top;
    }
    #scheduleOpen:hover{
        background: #71C05C;
    }
    #calculateFrame{
        border-radius: 1vh;
        width: auto;
        height: 3.5vh;
        vertical-align: top;
    }
    #calculateFrame:hover{
        background: #71C05C;
    }
    /* Safari 4.0 - 8.0 */
    @-webkit-keyframes example1 {
      0% {border-color: #fff;
      color: #f9a21a;}

      50% {border-color: #f9a21a;
      color: #fff;}

      100% {border-color: #fff;
      color: #f9a21a;}
    }
    /* Standard syntax */
    @keyframes example1 {
      0% {border-color: #fff;
      color: #f9a21a;}

      50% {border-color: #f9a21a;
      color: #fff;}

      100% {border-color: #fff;
      color: #f9a21a;}
    }


    .actionImageWithFlash {
        height: 1.6vw;
        width: 1.6vw;
        background-color: #F8F9F9;
        border-color: #85929E;
        border-size: 1px;
        border-radius: 0.8vw;
        color: #85929E;
        align-content: center;
        vertical-align: middle;
        padding: 0px;
        margin:0px;
    }
    .actionImageWithFlashdisabled{
         background-color: #F8F9F9;
          color: #85929E;
        border-color: #85929E;
    }
    /* Safari 4.0 - 8.0 */
    @-webkit-keyframes example2 {
      0% {background-color: none;
      border: 0px;
      outline: none;
      color: #ccc;}

      50% {background-color: none;
      border: 0px;
      outline: none;
      color: #f9a21a;}

      100% {background-color: none;
      border: 0px;
      outline: none;
      color: #ccc;}
    }
    /* Standard syntax */
    @keyframes example2 {
      0% {background-color: none;
      border: 0px;
      outline: none;
      color: #ccc;}

      50% {background-color: none;
      border: 0px;
      outline: none;
      color: #f9a21a;}

      100% {background-color: none;
      border: 0px;
      outline: none;
      color: #ccc;}
    }


    div.callout {
        float: left;
      z-index: 2;
        background-color: #444;
      border: 1px solid #333;
        position: absolute;
        padding: 0vw;
        border-radius: 0.90vw;
      margin: 1vw;
        box-shadow: 0px 0px 1.5vw #999;
        text-shadow: 0 0 1px #000;
      text-align: center;
      font-family: Helvetica;

      -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
      -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
      -webkitanimation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
      animation-name: example;
      animation-duration: 1s;
      animation-iteration-count: infinite;
    }
    div .leftAlign{
        text-align: left;
    }
    /* Safari 4.0 - 8.0 */
    @-webkit-keyframes example {
      0% {background-color: #444;
      border: 3px solid #ccc;
      color: #ccc;}

      50% {background-color: #444;
      border: 3px solid #f9a21a;
      color: #ccc;}

      100% {background-color: #444;
      border: 3px solid #ccc;
      color: #ccc;}
    }
    /* Standard syntax */
    @keyframes example {
      0% {background-color: #444;
      border: 3px solid #ccc;
      color: #ccc;}

      50% {background-color: #444;
      border: 3px solid #f9a21a;
      color: #ccc;}

      100% {background-color: #444;
      border: 3px solid #ccc;
      color: #ccc;}
    }
    .callout p{
      font-size: 1vw;
      padding-left: .75vw;
      padding-right: .75vw;
      line-height: 2.25vh;
    }
    .callout button{
      display: none;
      float: right;
      width: 1.25vw;
      height: 1.25vw;
      border: 0px;
      border-radius: 0.625vw;
      padding: 0px;
      margin: 0.1vw;
      vertical-align: middle;
      text-align: center;
      font-weight: normal;
      line-height: 1vw;
      background-size: 100%;
      background-image: url(../icons/close.png);
    }
    .callout::before {
        content: "";
        width: 0px;
        height: 0px;
        border: 0.75vw solid transparent;
        position: absolute;
    }
    .callout.top::before {
        left: 45%;
        bottom: -1.5vw;
        border-top: 0.75vw solid #444;
    }
    .callout.top-left::before {
        left: 25%;
        bottom: -1.5vw;
        border-top: 0.75vw solid #444;
    }
    .callout.top-right::before {
        right: 75%;
        bottom: -1.5vw;
        border-top: 0.75vw solid #444;
    }
    .callout.left::before {
        right: -1.5vw;
        top: 40%;
        border-left: 0.75vw solid #444;
    }
    .callout.left-up::before {
        right: -1.5vw;
        top: 20%;
        border-left: 0.75vw solid #444;
    }
    .callout.left-down::before {
        right: -1.5vw;
        top: 60%;
        border-left: 0.75vw solid #444;
    }
    .callout.right::before {
        left: -1.5vw;
        top: 40%;
        border-right: 0.75vw solid #444;
    }
    .callout.right-up::before {
        left: -1.5vw;
        top: 20%;
        border-right: 0.75vw solid #444;
    }
    .callout.right-down::before {
        left: -1.5vw;
        top: 60%;
        border-right: 0.75vw solid #444;
    }
    .callout.bottom::before {
        left: 45%;
        top: -1.5vw;
        border-bottom: 0.75vw solid #444;
    }
    .callout.bottom-left::before {
      left: 25%;
        top: -1.5vw;
        border-bottom: 0.75vw solid #444;
    }
    .callout.bottom-right::before {
      left: 75%;
        top: -1.5vw;
        border-bottom: 0.75vw solid #444;
    }

    #xrayannotationStage{
        top: 5vh;
        left: 49vw;
        width: 20vw;
    }
    #xrayannotationStage2{
        top: 57.5vh;
        left: 0vw;
        width: 17.5vw;
    }
    #xrayannotationStage3{
        top: 72.5vh;
        left: 0vw;
        width: 17.5vw;
    }
    #xrayannotationStage4{
        top: 25vh;
        left: 29vw;
        width: 17.5vw;
    }
    #xrayannotationStage5{
        top: 25vh;
        left: 69vw;
        width: 17.5vw;
    }
    #xrayannotationStage6{
        top: 5vh;
        left: 49vw;
        width: 20vw;
    }
    #hexapodannotationStage1{
        top: 50vh;
        left: 0vw;
        width: 17.5vw;
    }
    #hexapodannotationStage2{
        top: 5vh;
        left: 39vw;
        width: 40vw;
    }
    #segmentannotationStage{
        top: 5vh;
        left: 49vw;
        width: 20vw;
    }
    #axisannotationStage{
        top: 5vh;
        left: 49vw;
        width: 20vw;
    }
    #SARannotationStage{
        top: 5vh;
        left: 49vw;
        width: 20vw;
    }
    #correctionStep{
        top: 5vh;
        left: 49vw;
        width: 20vw;
    }



    .dialogInstruction{
        position: absolute;
        margin:0px;
        background-color: #BDC3C7;
        color: #ccc;
        border: 1px solid #ccc;text-align: center;
        border-radius: 0.5vh;
        padding:0.5vh;
        font-family: Helvetica;
        font-weight: strong;
        font-size: 1.5vh;
        display: none;
        -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }


    div.errorCallout {
        position: relative;
        background-color: rgba(25, 25, 25, 1);
      border: 1px solid #333;
        width: auto;
        padding: 0.05vw;
        border-radius: 0.25vw;
      margin: 0vw;
      padding: 0.2vh;
        box-shadow: 0px 0px 0.75vw #999;
        text-shadow: 0 0 1px #000;
      text-align: center;
      font-family: Helvetica;
      font-size: 0.8vw;

      -webkit-animation-name: error; /* Safari 4.0 - 8.0 */
      -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
      -webkitanimation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
      animation-name: error;
      animation-duration: 1s;
      animation-iteration-count: infinite;
    }
    /* Safari 4.0 - 8.0 */
    @-webkit-keyframes error {
      0% {background-color: rgba(25, 25, 25, .750);
      border: 1px solid #ccc;
      color: #ccc;}

      50% {background-color: rgba(25, 25, 25, .750);
      border: 1px solid #f9a21a;
      color: #ccc;}

      100% {background-color: rgba(25, 25, 25, .750);
      border: 1px solid #ccc;
      color: #ccc;}
    }
    /* Standard syntax */
    @keyframes error {
      0% {background-color: rgba(25, 25, 25, .750);
      border: 1px solid #ccc;
      color: #ccc;}

      50% {background-color: rgba(25, 25, 25, .750);
      border: 1px solid #f9a21a;
      color: #ccc;}

      100% {background-color: rgba(25, 25, 25, .750);
      border: 1px solid #ccc;
      color: #ccc;}
    }
    .errorCallout p{
      font-size: 0.8vw;
      margin: 0vw;
      padding: 0vw;
    }
    .errorCallout::before {
        content: "";
        width: 0px;
        height: 0px;
        border: 0.30vw solid transparent;
        position: absolute;
    }
    .errorCallout.top::before {
        left: 45%;
        bottom: -0.75vw;
        border-top: 0.3vw solid #444;
    }
    .errorCallout.top-left::before {
        left: 25%;
        bottom: -0.75vw;
        border-top: 0.3vw solid #444;
    }
    .errorCallout.top-right::before {
        right: 75%;
        bottom: -0.75vw;
        border-top: 0.3vw solid #444;
    }
    .errorCallout.left::before {
        right: -0.75vw;
        top: 40%;
        border-left: 0.3vw solid #444;
    }
    .errorCallout.left-up::before {
        right: -0.75vw;
        top: 20%;
        border-left: 0.3vw solid #444;
    }
    .errorCallout.left-down::before {
        right: -0.75vw;
        top: 60%;
        border-left: 0.3vw solid #444;
    }
    .errorCallout.right::before {
        left: -0.5vw;
        top: 40%;
        border-right: 0.3vw solid #444;
    }
    .errorCallout.right-up::before {
        left: -0.75vw;
        top: 20%;
        border-right: 0.3vw solid #444;
    }
    .errorCallout.right-down::before {
        left: -0.75vw;
        top: 60%;
        border-right: 0.3vw solid #444;
    }
    .errorCallout.bottom::before {
        left: 45%;
        top: -0.75vw;
        border-bottom: 0.3vw solid #444;
    }
    .errorCallout.bottom-left::before {
      left: 25%;
        top: -0.75vw;
        border-bottom: 0.3vw solid #444;
    }
    .errorCallout.bottom-right::before {
      left: 75%;
        top: -0.75vw;
        border-bottom: 0.3vw solid #444;
    }
    .errorCallout.fixed{
        width: 12.5vw;
        display: inline-block;
        padding: 0.1vh;
    }
    .errorCallout.bigger{
        font-size: 1.25vw;
    }