body {
  font-family: Arial;
}

a:link, a:visited, a:hover, a:active, a:focus { color:inherit; }

#calculator {
}
#maincalculator {
  display:block;
}

#maincalculator.hide {
  display:none;
}

#lipidcalc {
  font-family: "Avenir", "Arial";
  font-size:300%;
  padding: 5px 5px 5px 5px;
}

#lipid {
  font-weight:bold;
  color: #FFBB57;

}
#calc {
   color: #FFBB57;
}


#instructions {
  padding: 5px 5px 5px 5px;
  font-size:100%;

}

#firstinstructions{
    font-weight:bold;
}

.conditionset{
  margin-top:40px;
  margin-bottom:20px;
  margin-left: 5px;
  margin-right:5px;

}

.conditionset.unfocus{
  color: #D3D3D3;
}

.settext {
  margin: 0px 9px 10px 9px;
  font-size:120%;
  font-weight:bold;
}

.conditioncontainer {
  margin: 5px 0px 0px 0px;
  border-radius: 10px;
  display:flex;
  flex-direction:column;
}

.conditionheadertherapycontainer{
  display: flex;
  flex-direction: column;
}

.conditionheadercontainer{
  padding: 5px 5px 5px 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#legend{
  position:sticky;
  top:0;
  background-color: white;
  padding: 0px 5px 0px 5px;
  margin: 10px 0px 0px 0px;
  border-bottom: 4px solid #A6A6A6;
  border-radius: 0px 0px 0px 0px;
  z-index:1;
}

#legendheadercontainer{ 
  padding: 5px 0px 10px 0px;
   align-items:flex-end;

}

#legendheadertherapycontainer {
  display:block;
}

#legendheadercontainer {
  padding-left:0px;
  padding-right:0px;
  align-items:space-between;
  justify-content:flex-end;
}

#legendheadertherapycontainer {
  align-items:flex-end;
}


#legendnamecontainer {
  font-weight:bold;
  width: 100%;

}

#lipidchoicecontainer {
  display:flex;
  flex-wrap:wrap;
}

.lipidchoice {
  margin: 5px 5px 0px 0px;
  padding: 5px 5px 5px 5px;
  font-weight:bold;
  border: 4px solid  #ededed;
  width:fit-content;
  height:fit-content;
  border-radius: 5px;
  background-color: white;
  cursor: pointer;
  user-select: none;
  color: black;
  display:inline;
}

.lipidchoice.select {
  cursor:auto;
  border: 4px solid  #ededed;
  background-color: #ededed;
  color:black;
}

#legendbutton {
  margin: 5px 5px 0px 0px;
  padding: 5px 5px 5px 5px;
  font-weight:bold;
  border: 4px solid #ededed;
  width:fit-content;
  height:fit-content;
  border-radius: 5px;
  background-color: white;
  cursor: pointer;
  user-select: none;
  font-size: 100%;
}

#showdosestherapycontainer {
   display:inline-flex;
  flex-wrap:wrap;
    justify-content: right;
    width: 100%;
}

#showdosesbutton {
  margin: 5px 0px 0px 5px;
  padding: 5px 5px 5px 5px;
  font-weight:bold;
  border: 4px solid  #dbdbdb;
  width:fit-content;
  height:fit-content;
  border-radius: 5px;
  background-color: white;
  cursor: pointer;
  user-select: none;
  color:black;
}

#showtherapybutton {
  margin: 5px 0px 0px 5px;
  padding: 5px 5px 5px 5px;
  font-weight:bold;
  border: 4px solid  #dbdbdb;
  height:fit-content;
  border-radius: 5px;
  background-color: white;
  cursor: pointer;
  user-select: none;
  color:black;
  white-space: nowrap;
}

#showtherapybutton.select {
  border: 4px solid    #dbdbdb;
  background-color:   #dbdbdb;
}


#legendmoreinfo {
   padding: 5px 5px 5px 5px;
   display:block;
}

#legendmoreinfo.hide {
  display:none;
}


#ascvd {
  border: 4px solid #FFBB57;
}

#ascvdheadercontainer.conditionselect {
  background-color: #FFBB57;
}

#diabetes {
   border: 4px solid #FDEB9A;

}

#diabetesheadercontainer.conditionselect{
  background-color: #FDEB9A;
}

#ckd {
  border: 4px solid #FDEB9A;

}

#ckdheadercontainer.conditionselect{
  background-color: #FDEB9A;
}

#gendld {
  border: 4px solid #DCEDCF;

}

#gendldheadercontainer.conditionselect{
  background-color: #DCEDCF;
}

#donestatinindicatedset{
  border: 4px solid #ededed;

}

#donestatinindicatedsetheadertherapycontainer.select{
  background-color: #ededed;
}

#elevatedtg {
  border: 4px solid #FDEB9A;
}

#elevatedtgheadercontainer.conditionselect{
  background-color: #FDEB9A;
}

#doneelevatedtgset{
  border: 4px solid #ededed;
}

#doneelevatedtgsetheadertherapycontainer.select{
  background-color: #ededed;
}

#highrisk {
  border: 4px solid #FFBB57;
}

#highriskheadercontainer.conditionselect{
  background-color: #FFBB57;
}

#intrisk{
   border: 4px solid #FDEB9A;

}


.conditionheadermeetnotmeettherapycontainer{
        flex-direction: column;
}

#intriskheadercontainer.conditionselect{
  background-color: #FDEB9A;
}

.meetheader {
    padding: 10px;
}

.conditionmeetnamecontainer{
  padding: 5px 5px 5px 5px;
  user-select: none;
}


.meetheadertherapycontainer {
    border-top: 4px solid #A6A6A6;
  display: flex;
  flex-direction: column;

}

.meetheadertherapycontainer.unfocus {
    border-top: 4px solid #dbdbdb;

}

.meetnotmeetname {
    cursor: pointer;
}

.meetnotmeetname.unfocus {
  cursor: auto;
}

.meetnotmeetname.unfocusclickable {
  cursor: pointer;
}

#intriskmeetnamecontainer.meetnotmeetselect {
    background: #FDEB9A;
}

.riskmodifiers {
    cursor: help;
    text-decoration: solid underline #dbdbdb 2px;

}

#intrisknotmeetnamecontainer.meetnotmeetselect {
    background: #FDEB9A;
}

.riskmodifiers.unfocus {
}

#lowrisk{
  border: 4px solid #DCEDCF;

}

#lowriskheadercontainer.conditionselect{
  background-color: #DCEDCF;
}

#lowriskmeetnamecontainer.meetnotmeetselect {
    background: #DCEDCF;
}

#lowrisknotmeetnamecontainer.meetnotmeetselect {
    background: #DCEDCF;
}

#vlowrisk{
  border: 4px solid #DCEDCF;

}

#vlowriskheadercontainer.conditionselect{
  background-color: #DCEDCF;
}

#legendheaderdetailscontainer {
  margin-bottom:20px;
  flex-grow:1;
}

.conditioncheckboxcontainer{
  float:left;
  padding: 0px 5px 0px 0px;
  margin: 0px 0px 0px 0px;
}

.conditionnamecontainer{
  flex-grow: 1;
  padding-right:10px;
  user-select: none;
}

.conditionname {
  font-weight: bold;
}

.ldl {
}

.ldl.hide {
  display: none;
}

.apob {
}

.apob.hide {
  display: none;
}

.nonhdl {
}

.nonhdl.hide {
  display: none;
}

.conditionname {
  cursor: pointer;
}

.conditionname.unfocus {
  cursor: auto;
}

.conditionname.unfocusclickable {
  cursor: pointer;
}

.conditiondetailscontainer {
  padding: 5px 5px 5px 5px;
  display: block;
  border-color: inherit;
  border-top: inherit;
  font-size: 80%;
}

.conditiondetailscontainer.hide {
  display: none;
}

.subconditionname {
  font-weight:bold;
}


.therapy.hide {
  display:none;
}


th {
   text-align: left;
   font-weight: normal;
}

.therapytable {
  margin-left: 5px;
  margin-right: 5px;
  display:table;
  font-size: 100%;
  border-spacing: 0px;
  color:inherit;
}

.notmeettherapy {
    display: block;
  color:inherit;

}

.notmeettherapyname {
  margin-left: 5px;
  margin-right: 5px;
  padding: 5px;
      border-top: 4px solid #dbdbdb;
}

.notmeettherapyname.unfocus{
      border-top: 4px solid #ededed;
}

.therapyrow {
    vertical-align:top;
    font-weight:bold;

}

.therapylegendrow {
    vertical-align:top;
    font-weight:normal;

}

.statin {
  border-top: 4px solid #dbdbdb;
  margin-right:5px;
  padding: 5px 5px 5px 5px;
  overflow-x: hidden;
  display:table-cell;
  cell-spacing:0px;
  margin-right:5px;
}

.statin.unfocus {
  border-top: 4px solid #ededed;
}

.statinlegend {
  width: 6em;
  margin-right:5px;
  padding: 5px 10px 5px 5px;
  overflow-x: hidden;
  display:table-cell;
  border-top: 4px solid #dbdbdb;
  justify:left;
}

.statinlegend.unfocus {
  border-top: 4px solid #ededed;
}

.thresholds {
  border-top: 4px solid #dbdbdb;
  margin-right:5px;
  padding: 5px 10px 5px 5px;
  overflow-x: hidden;
  display:table-cell;
  vertical-align:top;
}

.thresholds.unfocus {
  border-top: 4px solid #ededed;
}

.thresholdlegend {
  border-top: 4px solid #dbdbdb;
  margin-right:5px;
  padding: 5px 5px 5px 5px;
  overflow-x: hidden;
  display:table-cell;
 text-wrap: balance;
  justify:left;
  width: 8em;
}

.thresholdlegend.unfocus {
  border-top: 4px solid #ededed;
}

.intensification {
  border-top: 4px solid #dbdbdb;
  margin-right:5px;
  padding: 5px 5px 5px 5px;
  overflow-x: hidden;
  display:table-cell;
  vertical-align:top;
  border-right: white 5px;
}

.intensification.unfocus {
  border-top: 4px solid #ededed;
}

.intensificationlegend {
  border-top: 4px solid #dbdbdb;
  margin-right:5px;
  padding: 5px 5px 5px 5px;
  overflow-x: hidden;
  display:table-cell;
  border-right: white 5px;
  justify:left;
}

.intensificationlegend.unfocus {
  border-top: 4px solid #ededed;
}


.moreinfobutton {
  margin: 0px 5px 0px 5px;
  padding: 5px 5px 5px 5px;
  font-weight:bold;
  border: 4px solid #ededed;
  width:fit-content;
  height:fit-content;
  border-radius: 5px;
  background-color: white;
  cursor: pointer;
  user-select: none;
  right:5px;
  font-size:50%;

}

#startoverbutton {
  margin: 22px 5px 5px 5px;
  padding: 5px 5px 5px 5px;
  font-weight: bold;
  border: 4px solid  #dbdbdb;
  width: fit-content;
  height: fit-content;
  border-radius: 5px;
  background-color: white;
  cursor: pointer;
  user-select: none;
  float: right;
}

.calculatorcontainer {
  margin: 15px 20px 5px 20px;
  border: 4px solid #ededed;
  border-radius: 5px;
}

#frscalculator {
  margin:10px 0px 0px 0px;
  border-radius: 10px;
  font-size: 100%;
}

.calculatorheader {
  font-weight: bold;
  padding: 5px 5px 0px 5px;

}

.calculatorinputscontainer {
  display: table;
  padding: 0px 5px 5px 5px;
}

.calculatorelementcontainer{
  display: table-row;
  padding: 5px 0px 0px 0px;
}

.calculatorlabel {
  display: table-cell;
  padding: 5px 10px 0px 0px;
}

.calculatorinputcontainer {
  display: table-cell;
}

.calculatorresultcontainer {
  padding: 5px 5px 5px 5px;
  background-color: #ededed
}

.calculatorresultlabel {
  font-weight: bold;
  display:inline;

}

.calculatorresultvalue {
  display:inline;
}


.nextcontainer {
border-bottom: 4px solid #A6A6A6;
border-bottom: 4px solid #ededed;
  margin: 10px 0px 0px 0px;
  padding: 5px 0px 5px 0px;
  display:flex;
  flex-direction:row;
  justify-content: space-between;
}

.nextcontainer.hide {
display:none;
}

#statinindicatedsetnextcontainer {
  padding: 5px 0px 5px 0px;
  display:flex;
  flex-direction:row;
  justify-content: flex-end;
  padding: 5px 0px 5px 0px;
}

#statinindicatedsetnextcontainer.hide {
display:none;
}

.nextbutton{
  font-size:120%;
  padding: 5px 5px 5px 5px;
  font-weight: bold;
  border: 4px solid #ededed;
  width: fit-content;
  height: fit-content;
  border-radius: 5px;
  background-color: white;
  cursor: pointer;
  user-select: none;
  display:block;
  margin-left:auto;
}

.gobackbutton {
  font-size:120%;
  margin-left: 5px;
  padding: 5px 5px 5px 5px;
  font-weight: bold;
  border: 4px solid #ededed;
  width: fit-content;
  height: fit-content;
  border-radius: 5px;
  background-color: white;
  cursor: pointer;
  user-select: none;
  display:block;
  margin-right:auto;
}

.startoverbutton {
  font-size:120%;
  padding: 5px 5px 5px 5px;
  font-weight: bold;
  width: fit-content;
  height: fit-content;
  border-radius: 5px;
  background-color: white;
  cursor: pointer;
  user-select: none;
  display:block;
  border: 4px solid  #dbdbdb;
}

.recommendationcontainer {
  max-height: calc(100vh - env(safe-area-inset-bottom));
  background-color:white;
  display:block;
  border-top: 4px solid #A6A6A6;
  z-index:2;
  position:sticky;
  bottom:0;
  overflow:hidden;
}

.recommendationcontainer.recommendationfullscreen {
    display:block;
      overflow:visible;
        bottom:auto;
}

.recommendationcontainer.hide {
  display:none;
}

.buttonscontainer {
  display:flex;
  flex-direction: row;
  justify-content: flex-start;
  padding: 5px 5px 5px 5px;
}

.recommendation {
  display: block;
  padding: 5px 5px 20px 5px;
  border-top: solid 12px #ededed;
}

.recommendation.hide {
  display: none;
}

#norecommendation {
  padding: 4em 5px 0px 5px;
}

#ascvdtgrecommendation {
  border-top: solid 12px #FFBB57;
}

#ascvdrecommendation {
  border-top: solid 12px #FFBB57;
}

#diabetestgrecommendation {
  border-top: solid 12px #FDEB9A;
}

#diabetesrecommendation {
  border-top: solid 12px #FDEB9A;
}

#ckdrecommendation {
  border-top: solid 12px #FDEB9A;
}

#gendldrecommendation {
  border-top: solid 12px #DCEDCF;
}

#highriskrecommendation {
  border-top: solid 12px #FFBB57;
}

#intriskmeetrecommendation {
  border-top: solid 12px #FDEB9A;
}

#intrisknotmeetrecommendation {
  border-top: solid 12px #FDEB9A;
}

#lowriskmeetrecommendation {
  border-top: solid 12px #DCEDCF;
}

#lowrisknotmeetrecommendation {
  border-top: solid 12px #DCEDCF;
}

#vlowriskrecommendation {
  border-top: solid 12px #DCEDCF;
}

.recommendationheader {
  font-weight:bold;
  margin-bottom:1em;
  font-size: 120%
}

.recommendationinitialtherapy {
  margin-bottom:1em;
  font-weight:bold;

}

.recommendationhighlight {
  font-weight:bold;
}

#multipleindicationsrecommendation {
  padding: 0px 5px 10px 5px;
  display:block;
}

#multipleindicationsrecommendation.hide {
  display:none;
}

.therapyname {
    text-decoration: solid underline #dbdbdb 2px;
    cursor: help;
}

.therapyname.unfocus {
    text-decoration-color: #dbdbdb;
}

#licenseinfo {
  text-align:center;
  padding: 10px 10px 10px 10px;
  margin: 10px 0px 0px 0px;
  background-color:#ededed;
  display:block;
}

#licenseinfo.hide {
  display:none;
}

ul {
  margin: 0px;
  padding: 0px 5px 0px 2em;
    list-style: outside;
}

th {
   text-align: left;
   font-weight: normal;
}

#dosescontainercontainercontainer {
  height: 100%;
    top: 0px;
    left: 0px;
    right: 0px;
   display: flex;
  justify-content: center;
  align-items: center;
position: fixed;
      flex-flow: column nowrap;
z-index: 1;
    overflow:visible;
      font-size: 80%;

}


#dosescontainercontainer {
   display: flex;
  align-items: flex-end;
position: fixed;
      flex-flow: column nowrap;
    max-height: 100%;

}


#closepopupbutton
    {
        background-color: white;
     border-left: 4px solid #A6A6A6;
     border-right: 4px solid #A6A6A6;
    border-top: 4px solid #A6A6A6;
  padding: 4px 4px 4px 4px;
  margin: 0px 10px 0px 0px;
            cursor: pointer;
  border-radius: 5px 5px 0px 0px;

    }


#dosescontainer {
  background-color: white;
  padding: 2px 2px 2px 2px;
  border-bottom: 4px solid #A6A6A6;
    border-top: 4px solid #A6A6A6;
  border-radius: 0px 0px 0px 0px;
    overflow: auto;
    
}

#dosesstatintable {
            table-layout: auto;
    border-collapse: collapse;
        opacity: 1;


}
#dosesstatintable th {
  
  padding: 2px 2px 2px 2px;
  overflow-x: hidden;
  display:table-cell;
            font-weight: bold;


}
        .dosesstatinheader {
          text-align:left;
       }

        .dosestherapyname {
          text-align:left;
       }


        .dosesotherheader {
          text-align:center;
            font-weight: bold;
       }

        .dosesothernameheader {
          text-align:left;
            font-weight: bold;
       }



.dosesstatinintensities {
    text-align:center;
}

#dosesstatintable td {
  padding: 2px 2px 2px 2px;
  overflow-x: hidden;
  display:table-cell;
}
#dosesstatintable tr {
  text-align: center;
    border-bottom: 4px solid #dbdbdb;
}
.dosesstatinname  {
  text-align: left;
}

.dosesstatindetails {
  font-weight: normal;
}

.dosesstatinhighintensity{
    background-color: #ececec;
}

.dosesstatinmoderateintensity{
    background-color: #f8f8f8;
}

.dosesstatinlowintensitydose{
    
}

.newtherapyclass td {
    border-top: 4px solid #A6A6A6;

}

#dosescontainercontainercontainer.hide {
    display:none;
}

#popupbackground {
       width: 100%;
     height: 100%;
     position: fixed;
     top: 0px;
     left: 0px;
  background-color: white;
  opacity: 0.9;
z-index: 1;
}

#popupbackground.hide {
        display:none;

}