body {
  font-family: Arial;
}

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


#calculator {
  display:block;
  max-width:800px;
  margin: auto;

}

#maincalculator {
  display:block;
}

#maincalculator.hide {
  display:none;
}

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

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

}
#calc {
  color: #FFBB57;
}

#instructions {
  padding:10px 10px 10px 10px;
  box-sizing: border-box;
}

#firstinstructions {
  font-weight:bold;
}

.conditionset{
  margin-top:50px;
  margin-bottom:50px;
  margin-left: 10px;
  margin-right:10px;
}

.conditionset.unfocus{
  color: #D3D3D3;
}

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

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

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

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

}

#legendheadertherapycontainer {
}

.conditionheadertherapycontainer{
    display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#legendheaderdetailscontainer {
  display: flex;
  flex-direction: row;
}

.conditionheadercontainer{
  padding: 10px 10px 10px 10px;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
        box-sizing: border-box;
    width:100%;

}

.meetnotmeetheadercontainer {
    box-sizing: border-box
}

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

}

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


#legendnamecontainer {
  font-weight:bold;
}

.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;
}

.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%;
  float:left;
}

#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;
  width:fit-content;
  height:fit-content;
  border-radius: 5px;
  background-color: white;
  cursor: pointer;
  user-select: none;
  color:black;

}

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


#legenddetailscontainer {
  display:flex;
  flex-direction:column;
}

#legendmoreinfo {
   padding: 10px 30px 10px 10px;
  display:block;
}

#legendmoreinfo.hide {
  display:none;
}

#statinlegend
{
  margin-bottom:-4px;
}

#legendthresholdscontainer
{
  margin-bottom:-4px;
}

#legendintensificationcontainer
{
  margin-bottom:-4px;
}

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

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

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

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

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

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

#gendld {
  border: 4px solid #DCEDCF;
}

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

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

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

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

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


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

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


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

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

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

.conditionheadermeetnotmeettherapycontainer{
        flex-direction: column;
}

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

.meetheader {
    padding: 10px;
}

.conditionmeetnamecontainer{
  padding: 10px 10px 10px 10px;
  user-select: none;
    width: 100%;
    flex-grow: 1;
}


.meetheadertherapycontainer {
    display: flex;
    flex-direction: row;
    border-top: 4px solid #dbdbdb;

}

.meetheadertherapycontainer.unfocus {
    display: flex;
    flex-direction: row;
    border-top: 4px solid #ededed;

}

.meetnotmeetname {
    cursor: pointer;
}

.meetnotmeetname.unfocus {
  cursor: auto;
}

.meetnotmeetname.unfocusclickable {
  cursor: pointer;
}

#intriskmeet.meetnotmeetselect {
    background: #FDEB9A;
}

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

}

.riskmodifiers.unfocus {
}

.therapytable {
  padding-left: 10px;
  padding-right: 10px;
  display:table;
  font-size: 100%;
  border-spacing: 0px;
  color:inherit;
  min-width: 20em;
}

.therapy.hide {
  display:none;
}


.notmeettherapy {
    display: block;
  color:inherit;
  overflow-x: hidden;
  min-width: 20em;

}

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

}

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

#intrisknotmeet.meetnotmeetselect {
    background: #FDEB9A;
}

#lowrisk{
  border: 4px solid #DCEDCF;
}

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

#lowriskmeet.meetnotmeetselect {
    background: #DCEDCF;
}

#lowrisknotmeet.meetnotmeetselect {
    background: #DCEDCF;
}

#vlowrisk{
  border: 4px solid #DCEDCF;
}

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

.conditioncheckboxcontainer{
  float:left;
  padding: 0px 10px 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: 10px 10px 10px 10px;
  display: block;
  border-color: inherit;
  border-top: inherit;
}


.conditiondetailscontainer.hide {
  display: none;
}

.subconditionname {
  font-weight:bold;
}

.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;
  margin-right:5px;
}

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

.statinlegend {
  margin-right:5px;
  padding: 5px 10px 5px 5px;
  overflow-x: hidden;
  display:table-cell;
}

.statinlegend.unfocus {
}

.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 {
  margin-right:5px;
  padding: 5px 5px 5px 5px;
  overflow-x: hidden;
  display:table-cell;
  overflow-wrap: break-word;
}

.thresholdlegend.unfocus {
}

.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 {
  margin-right:5px;
  padding: 5px 5px 5px 5px;
  overflow-x: hidden;
  display:table-cell;
  border-right: white 5px;
}

.intensificationlegend.unfocus {
}

#therapylegend {
  font-weight: bold;
}

.moreinfobutton {
  margin: 5px 5px 5px 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;
}

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

.nextcontainer.hide {
display:none;
}

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

#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;
}

#startoverbutton {
  margin: 20px 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;

}

#gobackbutton {
  margin: 20px 5px 5px 15px;
  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:none;
}


.setbody{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

#primarypreventionconditions {
  display:flex;
  flex-direction: column;
    flex-grow: 1;
    width: 100%;
}

.calculatorcontainer {
  margin: 15px 30px 10px 30px;
  border: 4px solid #ededed;
  width:fit-content;
  border-radius: 5px;
}

#frscalculator {
  margin:10px 15px 0px 0px;
  border-radius: 10px;

}

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

#frscalculatorheader {
  font-size:120%;
}

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

#frscalculatorinputscontainer {
  display: flex;
  flex-direction: column;
}

.calculatorelementcontainer{
  display: flex;
  flex-direction: column;
  padding: 5px 0px 0px 0px;
}

#frscalculatorelementcontainer {
  display: flex;
  flex-direction: column;
}

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

#frscalculatorlabel {
  display:block;
}

.calculatorinputcontainer {
  display: table-cell;
}

#frscalculatorlabel {
  display:block;
}

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

#frscalculatorresultcontainer {
  font-size:120%;
}

.calculatorresultlabel {
  font-weight: bold;
}

.calculatorresultvalue {
  min-height:1em;
}

.recommendationcontainer {
  position:sticky;
  overflow-y: auto;
  max-height: calc(100vh);
  bottom: 0;
  background-color:white;
  display:block;
  border-top: 4px solid #A6A6A6;
  min-height: 2em;
}

.recommendationcontainer.hide {
  display:none;
}

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


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

.recommendation.hide {
  display: none;
}


#norecommendation {
  padding: 1em 10px 0px 10px;
}

#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 10px 20px 10px;
  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;
      box-sizing: border-box;
  display:block;
  padding: 10px 10px 10px 10px;
  margin: 10px 0px 0px 0px;
  background-color:#ededed;
}

#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;
}


#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: 10px 10px 10px 10px;
  border-bottom: 4px solid #A6A6A6;
    border-top: 4px solid #A6A6A6;
  border-radius: 0px 0px 0px 0px;
    max-height: 90vh;
    overflow: auto;
    
}

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


}
#dosesstatintable th {
  
  margin-right:5px;
  padding: 5px 10px 5px 5px;
  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 {
    margin-right:5px;
  padding: 5px 10px 5px 5px;
  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;

}