@font-face {
    font-family: 'Avenir Book';
    src: url('../fonts/Avenir-Book.eot');
    src: url('../fonts/Avenir-Book.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Avenir-Book.woff2') format('woff2'),
    url('../fonts/Avenir-Book.woff') format('woff'),
    url('../fonts/Avenir-Book.ttf')  format('truetype'),
    url('../fonts/Avenir-Book.svg#Avenir-Book') format('svg');
}
body{
    font-family: 'Avenir Book', Roboto, Arial, Helvetica, sans-serif;
    color: #6f6f6f;
    font-size: 0.9rem;
    margin-top: 18px;
    margin-bottom: 25px;
}
h1{
    font-family: 'Avenir Book', Roboto, Arial, Helvetica, sans-serif;
    color: #2f2f2f;
    font-size: 1.26rem;
    margin-top: 20px;
}
/* loading */
#loading{
    width: 100%;
    padding-top: 150px;
    position: fixed;
    background: white;
    height: 100vh;
    z-index: 10;
    text-align: center;
}
.lds-grid {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .lds-grid div {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #346261;
    animation: lds-grid 1.2s linear infinite;
  }
  .lds-grid div:nth-child(1) {
    top: 8px;
    left: 8px;
    animation-delay: 0s;
  }
  .lds-grid div:nth-child(2) {
    top: 8px;
    left: 32px;
    animation-delay: -0.4s;
  }
  .lds-grid div:nth-child(3) {
    top: 8px;
    left: 56px;
    animation-delay: -0.8s;
  }
  .lds-grid div:nth-child(4) {
    top: 32px;
    left: 8px;
    animation-delay: -0.4s;
  }
  .lds-grid div:nth-child(5) {
    top: 32px;
    left: 32px;
    animation-delay: -0.8s;
  }
  .lds-grid div:nth-child(6) {
    top: 32px;
    left: 56px;
    animation-delay: -1.2s;
  }
  .lds-grid div:nth-child(7) {
    top: 56px;
    left: 8px;
    animation-delay: -0.8s;
  }
  .lds-grid div:nth-child(8) {
    top: 56px;
    left: 32px;
    animation-delay: -1.2s;
  }
  .lds-grid div:nth-child(9) {
    top: 56px;
    left: 56px;
    animation-delay: -1.6s;
  }
  @keyframes lds-grid {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
  }
  
#calculator .strong{
    font-weight: 700;
    color: #346261;
}
#calculator .flex{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.card {
    background-color: #fdfdfd;
    border: none;
}
.card.step{
    background-color: #e9e9e9;
    margin-bottom: 15px;
    border-radius: 10px;
}
.card-body {
    padding: 0.25rem;
}
.card.step > .card-body{
    padding: 1.25rem;
}
#resultAfterOptimization.card{
    background-color: white;
}
#resultAfterOptimization.card h2{
    background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(253,193,104,1) 0%, rgb(251, 173, 128) 180% );
}
/* Footer */
footer{
    text-align:center;
}
#version{
    color: #346261;
    text-align: center;
}
#resultWrapper.card h2{
    background-color: #346261;
/*     font-size: 16px; */
}
#opti-step{
    display: none;
}
#opti-step h1{
    background-color: #d9d9d9;
    color: #797979;
    border-radius: 10px;
    width: 100%;
}

.card-title {
    background-color: #898989;
    border-radius: 3px;
}
h2.card-title {
    color: #ffffff;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 14px;
    font-family: 'circular', sans-serif;
}
h1.card-title{
    color: #fff;
    background-color: #346261;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 20px;
    line-height: 40px;
    display: flex;
    font-family: 'circular', sans-serif;
    border-radius: 10px 10px 0 0;
    display: inline-table;
}
h1.card-title span.badge{
    margin-right: 5px;
    color: #6c757d;
    background-color: #ffffff;
    line-height: 17px;
    border-radius: 6px;
    font-weight: 900;
    font-size: 21px;
    width: 28px;
}
.badge{
    font-family: 'circular', sans-serif;
}

/* DISABLE AND READONLY */
#calculator .form-control:disabled, #calculator .form-control[readonly] {
    background-color: #ededed;
    opacity: 1;
    border: 1px solid #d9d9d9;
    color: #575757!important;
}
/* box-shadow */
.shadows{
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}
/* button */
#calculator .popup-button {
    display: block;
    text-align: center;
    text-decoration: none;
    font-size: 1.2em;
    text-transform: uppercase;
    color: #fff;
    border-radius: 6px;
    margin: 12px 0px 5px 0px;
    /* padding: 2em 3em; */
    background-size: 300% 300%;
    color: white;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
    /* background-image: linear-gradient(to right, #895cf2 0%, #ffabf4 50%, #895cf2 100%); */
    transition: 0.5s;
    border: none;
}
#calculator .popup-button.orange{
    background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(253,193,104,1) 0%, rgb(251, 173, 128) 90% );
}
#calculator .popup-button.blue{
    background-image: radial-gradient( circle farthest-corner at 10% 20%,  #346261 0%, #368d8b 90% );
}
#calculator .popup-button:hover {
background-position: right center;
}
#calculator button#confirm{line-height: 18px;}
#calculator .btn-primary {
    color: #fff;
    background-color: #346261;
    border-color: #346261;
    line-height: 24px;
}
#calculator #confirm svg:first{
    margin-bottom: 15px;
}

#calculator fieldset {
    font-family: sans-serif;
    border: 1px solid #cfc8c8;
    /* background: #ededed; */
    border-radius: 5px;
    padding: 10px 5px;
    margin-top: 10px;
    margin-left: 2px;
    margin-right: 2px;
    font-family: 'Avenir Book', Roboto, Arial, Helvetica, sans-serif;
}

#calculator fieldset legend {
    background: #b5b5b526;
    line-height: 25px;
    padding: 5px 10px;
    font-weight: 600;
    font-size: 0.8rem;
    border-radius: 5px;
    box-shadow: 0 0 0 1px #cfc8c8;
    margin-bottom: 0;
}


#calculator input[type=text],#calculator input[type=number]{
    height: 25px;
    border-radius: 2px;
    color: #368d8b;
    font-size: 15px;
    font-weight: bold;
    padding: 6px;
    text-align: right;
}
#calculator input[type=text]:read-only:focus,#calculator input[type=number]:read-only:focus{
    border-color: #ced4da;
    box-shadow: none;
}
#calculator div.doctorandpatient div.form-group {
margin-bottom: 12px;
}
#calculator div.doctorandpatient input[type=text]{

    text-align: left;
}
#calculator div.bigLetter{
    text-align: center;
    vertical-align: center;
    font-size: 40px;
    margin-top: 20px;
}
#calculator span.input-group-text{
    height: 25px;
    padding: .375rem .3rem;
    color: #929292;
}

/* Custom SELECT */
#calculator select.custom-select{
    height: 25px;
    padding: 0 7px;
    color: #368d8b;
    font-size: 15px;
    font-weight: bold;
    border-radius: 2px;
}

#calculator select.custom-select.lonly{
    background-image: none;
}

#calculator select.custom-select.twice{
    padding-right: 29px;
}

#calculator select.custom-select.twice option{
    margin-right: 29px;
    text-align: right;
}

#calculator select.custom-select.lonly option{
    text-align: right;
}

#calculator select.custom-checkbox{
    height: 25px;
    padding: 0 7px;
    color: #368d8b;
    font-size: 15px;
    font-weight: bold;
    border-radius: 2px;
}
/* Custom Chckbox */
.material-switch{
    margin-top: -7px;
    margin-right: 4px;
}
.material-switch > input[type="checkbox"] {
    display: none;   
}

.material-switch > label {
    cursor: pointer;
    height: 0px;
    position: relative; 
    width: 40px;  
    background-color: #ffffff;
}

.material-switch > label::before {
    background: rgb(0, 0, 0);
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    content: '';
    height: 16px;
    margin-top: -8px;
    position:absolute;
    opacity: 0.3;
    transition: all 0.4s ease-in-out;
    width: 40px;
}
.material-switch > label::after {
    background: rgb(255, 255, 255);
    border-radius: 16px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    content: '';
    height: 24px;
    left: -4px;
    margin-top: -8px;
    position: absolute;
    top: -4px;
    transition: all 0.3s ease-in-out;
    width: 24px;
}
.material-switch > input[type="checkbox"]:checked + label::before {
    background: inherit;
    opacity: 0.5;
}
.material-switch > input[type="checkbox"]:checked + label::after {
    background: inherit;
    left: 20px;
}


#calculator .custom-control-input:checked~.custom-control-label::before{
    background-color: #346261;
    border: #006295;
    
}
#calculator label{
    margin-bottom: 0;
    margin-top: 2px;
}
#AK .input {
    width: 19px;
    height: 19px;
}

/* Preview */

#previewSVG{
    max-width: 540px;
}
#preview{
    text-align: center;
}
#preview #previewOpti{
    margin-top: -20px;
    margin-bottom: -20px;
}
#previewOpti #gFilter1,#previewOpti #filter1{
    filter: grayscale(1) opacity(0.3) contrast(1.5);
}
#previewOpti #gFilter5,#previewOpti #filter5{
    filter: opacity(0.5);
}
/* #previewOpti #gFilter2,#previewOpti #gFilter3,#previewOpti #gFilter4,#previewOpti #gFilter5,#previewOpti #gFilter6{
    filter: contrast(0.8) brightness(0.7);
}
#previewOpti #filter2,#previewOpti #filter3,#previewOpti #filter4,#previewOpti #filter5,#previewOpti #filter6{
    filter: contrast(0.8) brightness(0.7);
} */
#IOLSEL{
    background: none!important;
    background-color: #e9ecef!important;
}
/*
div#preview{
    overflow: hidden;
    position: relative;
}
div#preview img.layer{
    position: absolute;
}*/

/* TOOLTIP */
.customtool{
    float:right;
    padding: 0;
    margin-top: 0px;
    font-size: 15px;
    color: #fff;
}
.customtool2{
    padding: 0;
    font-size: 14px;
    color: #9c9c9c;
}
.customtool3{
    padding: 0;
    font-size: 20px;
    color: #9c9c9c;
    margin-right: 10px;
    float: left;
}
.customtool-view{
    position: absolute;
    top: 6px;
    right: 9px;
    color: white;
    font-size: 16px;
}
.customtool:hover,.customtool-view:hover{
    color: #4b4b4b;
}
.customtool2:hover, .customtool-view:hover {
    color: #1a6e93;
}
.customtool3:hover, .customtool-view:hover {
    color: #1a6e93;
}
textarea#NOTE {
    resize: none;
}

#disclaimertxt{
    width: 100%;
    border-radius: 2px;
    font-size: 18px;
    max-height: 350px;
    background-color: white;
    overflow: auto;
}
a#printDisclaimer{
    color: white;
}
#disclaimertxt li{
    list-style: none;
}

/* ALERTS */
.alert{
    padding: .20rem 0.5rem;
    margin-bottom: 0.2rem;
}
.alert-info {
    color: #ffffff;
    background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(253,193,104,1) 0%, rgb(251, 173, 128) 120% );
    border-color:white;
    font-size: 0.8rem;
    text-align: right;
    /* padding-left: 50%; */
    /* margin-left: 23%; */
    /* width: 38%; */
    float: right;
}
.alert-warning {
    color: #b31d1d;
    background-color: #fff7f7;
    border-color: #ffafaf;
}
.alert-success {
    color: #1e1e1e;
    background-color: #e7e7e7;
    border-color: #d7d7d7;
}

/* MODAL */
.open .modal-backdrop {background-color:#fff;}

/* RANGE */
/*********** Baseline, reset styles ***********/
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
  }
  
  /* Removes default focus */
  input[type="range"]:focus {
    outline: none;
  }
  
  /******** Chrome, Safari, Opera and Edge Chromium styles ********/
  /* slider track */
  input[type="range"]::-webkit-slider-runnable-track {
    background-color: #e9ecef;
    border-radius: 1rem;
    height: 0.6rem;
  }
  
  /* slider thumb */
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    margin-top: -5px; /* Centers thumb on the track */
    background-color: #346261;
    border-radius: 1rem;
    height: 22px;
    width: 22px;
  }
  

  
  /*********** Firefox styles ***********/
  /* slider track */
  input[type="range"]::-moz-range-track {
    background-color: #e9ecef;
    border-radius: 1rem;
    height: 0.6rem;
  }
  
  /* slider thumb */
  input[type="range"]::-moz-range-thumb {
    background-color: #346261;
    border: none; /*Removes extra border that FF applies*/
    border-radius: 1rem;
    height: 22px;
    width: 22px;

  }
  


/* RESULTS */
#resultWrapper{
    display: none;
}
#card-result .card-body{
    padding: 0.25rem 0;
    background-color: #9a9c9d0f;
}

table#result th,table#result td{
    text-align: center;

}
table#result th{
    color: #575757;
    border-top: none;

}
table#result td{
    color: #368d8b;
    font-weight: bold;
}
table#result tbody{
    background-color: white;
}
table#result .custom-control-inline{
    display: inline;
}
table#result .custom-control-inline label{
    margin-top: -2px;
}
table#result tr.active{
    background-color: #d9e5e5;
}
table#result span.lowerRA{
    background-color: #346261;
}
table#result span.flipped{
    background-color: #353535;
}
table#result span.standardIOL{
    color: #666;
    background-color: #ddd;
}
table#result .badge{
    margin-right: 5px;
    color: white;
    background-color: #ffffff;
    line-height: 17px;
    border-radius: 5px;
    font-weight: 400;
    font-size: 11px;
    font-family: 'Avenir Book', Roboto, Arial, Helvetica, sans-serif;
    padding: 3px 8px 1px 8px;

}

#chartLight{
    width: 100%;
    background-color: #ffffff!important;
}
#chartLight .drag, #chartLight .g, #chartLight .rect{
    background-color: #ffffff!important;
    fill: #ffffff!important;
}

#chartLight g.imagelayer{
    background-image: url('../images/white.jpg');
    background-repeat: repeat;
}
#RESOILLabel.lonly{
    display: none;
}
#RESOILLabel{
    display: inline-block;
    margin-right: 5px;
}

@media (min-width: 576px) {
    .w-sm-25 {
        width: 25% !important;
    }
    .w-sm-50 {
        width: 50% !important;
    }
    .w-sm-75 {
        width: 75% !important;
    }
    .w-sm-100 {
        width: 100% !important;
    }
    .w-sm-auto {
        width: auto !important;
    }
    .h-sm-25 {
        height: 25% !important;
    }
    .h-sm-50 {
        height: 50% !important;
    }
    .h-sm-75 {
        height: 75% !important;
    }
    .h-sm-100 {
        height: 100% !important;
    }
    .h-sm-auto {
        height: auto !important;
    }
}

@media (min-width: 768px) {
    .w-md-25 {
        width: 25% !important;
    }
    .w-md-50 {
        width: 50% !important;
    }
    .w-md-75 {
        width: 75% !important;
    }
    .w-md-100 {
        width: 100% !important;
    }
    .w-md-auto {
        width: auto !important;
    }
    .h-md-25 {
        height: 25% !important;
    }
    .h-md-50 {
        height: 50% !important;
    }
    .h-md-75 {
        height: 75% !important;
    }
    .h-md-100 {
        height: 100% !important;
    }
    .h-md-auto {
        height: auto !important;
    }
}

@media (min-width: 992px) {
    .w-lg-25 {
        width: 25% !important;
    }
    .w-lg-50 {
        width: 50% !important;
    }
    .w-lg-75 {
        width: 75% !important;
    }
    .w-lg-100 {
        width: 100% !important;
    }
    .w-lg-auto {
        width: auto !important;
    }
    .h-lg-25 {
        height: 25% !important;
    }
    .h-lg-50 {
        height: 50% !important;
    }
    .h-lg-75 {
        height: 75% !important;
    }
    .h-lg-100 {
        height: 100% !important;
    }
    .h-lg-auto {
        height: auto !important;
    }
}

@media (min-width: 1200px) {
    .w-xl-25 {
        width: 25% !important;
    }

    .w-xl-50 {
        width: 50% !important;
    }

    .w-xl-75 {
        width: 75% !important;
    }

    .w-xl-100 {
        width: 100% !important;
    }

    .w-xl-auto {
        width: auto !important;
    }

    .h-xl-25 {
        height: 25% !important;
    }

    .h-xl-50 {
        height: 50% !important;
    }

    .h-xl-75 {
        height: 75% !important;
    }

    .h-xl-100 {
        height: 100% !important;
    }

    .h-xl-auto {
        height: auto !important;
    }
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* Put your IE-only styles here. Works for IS 10 & IE 11*/
    #preview{
        height: 600px;
    }
    #calculator input[type=text]
    {
        line-height: 13px;
    }
}