@charset "UTF-8";
/* CSS Document */
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Universal
# Landing Page
# Background Page
#Treatment Tables
#Decision Tool
# Language
# Menu
# Accordions
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Universal
--------------------------------------------------------------*/
body {
    margin: 0;
    padding: 0;
    line-height: 1.2;
    font-family: "myriad-pro", sans-serif;
    color: #2f3260;
}
.black {
    color: #000;
}
.inlinelist {
    padding-left: 15px;
}
.noopacity {
    opacity: 0;
    pointer-events: none;
}
.bluenav {
    padding: 20px;
    text-align: center;
    background-color: #2f3256;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
}
.bluenav span {
    display: inline-block;
    margin: 0 10px;
}
.flex {
    display: flex;
    gap: 20px;
}
.numberbullets {
  list-style: decimal;
}
.numberbullets li{
    margin-bottom: 15px;
}

.numberbullets li::marker {
  content: "(" counter(list-item) ")      ";
}
.pagetitlecon {
    background-image: url("../images/Graduated-Red_Orange.jpg");
    background-size: cover;
    padding: 15px 20px;
    margin-top: -2px;
}
.pagebodycon {
    padding: 15px 20px;
}
.pagetitlesub {
    margin-top: 15px;
}
.white {
    color: #fff;
}
.closebutton {
    position: absolute;
  top: 0;
  right: 10px;
  color: #fff;
  font-size: 30px;
    cursor: pointer;
}
.uppercase {
    text-transform: uppercase;
}
.bluebutton {
    background-color: #2f3256;
  margin: 20px     auto;
  border-radius: 50px;
  padding: 10px 20px;
  width: 60%;
  color: #fff;
}
.bluelink {
    color: #2f3256;
    text-decoration: underline;
}
.bluelink:hover {
    text-decoration: none;
}
.bluesquarebutton {
    background-color: #2f3256;
  margin: 20px     auto;
  padding: 10px 15px;
  width: 40%;
  color: #fff;
  font-size: 4.44444444vw;
  font-size: clamp(8.88888888px, 4.44444444vw, 25px);
  border-radius: 50px;
}
.extrapadding {
    width: 80%;
}
.popuptext {
    padding-top: 20px;
}
.popuptitle {
    background-image: url("../images/Graduated-Red_Orange.jpg");
    color: #fff;
    background-size: cover;
    padding: 5vw 7.5vw;
    padding:  clamp(10px, 5vw, 40px) clamp(15px, 7.5vw, 60px);
}
.page {
    opacity: 0;
    pointer-events: none;
    min-height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #e5f2f1;
}
.page.showpage {
    position: relative;
    box-sizing: border-box;
}
.showpage {
    opacity: 1 !important;
    pointer-events: all !important;
    /*transition: all 0.3s ease-in-out;*/
}
#container {
    min-height: 100vh;
    position: relative;
    width: 100%;
    overflow: visible;
}
.opensans {
    font-family: "open-sans", sans-serif;
}
.bold {
    font-weight: bold;
}
.lessbold {
    font-weight: 600;
}
.normal {
    font-weight: normal;
}
.morebold {
    font-weight: 600;
}
.light {
    font-weight: 100;
}
.padding {
  padding: 3.75vw 7.5vw;
  padding:  clamp(7.5px, 3.75vw, 20px) clamp(15px, 7.5vw, 60px);
}
.toppadding {
    padding-top: 15vh;
}
.footnotes {
    font-size: 3.22222222vw;
    font-size: clamp(12px, 3.22222222vw, 30.666667px);
    color: #000;
}
.sevenfont {
    font-size: 3.88888888vw;
    font-size: clamp(12px, 3.88888888vw, 31.11111104px);
}
.eightfont {   
    font-size: 4.44444444vw;
    font-size: clamp(12px, 4.44444444vw, 35.55555552px);
}
.ninefont {
    font-size: 5vw;
    font-size:  clamp(12px, 5vw, 40px);
}
.tenfont {
    font-size: 5.55555555vw;
    font-size:  clamp(12px, 5.55555555vw, 44.4444444px);
}
.elevenfont {
    font-size: 6.1111111vw;
    font-size:  clamp(12.22222221px, 6.1111111vw, 48.88888884px);
}
.thirteenfont {
    font-size: 7.22222222vw;
    font-size:  clamp(14.4444444px, 7.22222222vw, 57.7777777px);
}
.fivehundred {
    max-width: 500px;
}
.underline:hover {
    text-decoration: underline;
}
.on {
    text-decoration: underline;
}
.link {
    cursor: pointer;
}
.grow {
  transition: all 0.3s ease-in-out;
}

.grow:hover {
  transform: scale(1.1);
}
.center {
    text-align: center;
}
img {
    max-width: 100%;
    height: auto;
}
.auto {
    margin: auto;
}
.orangeplus {
    text-indent: -9999px;
  background-image: url(/images/Plus_Icon.png);
  width: 45px;
  height: 45px;
  margin: auto;
  border-radius: 45px;
  background-color: #2f3256;
  background-size: 35px;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid #e56c38;
    position: absolute;
  left: 0;
  right: 0;
  top: -22.5px;
}
.orangeplus.open {
      background-image: url(/images/Close_Icon.png);
}
.orangecontainer {
    background-color: #e56c38;
  color: #fff;
    position: fixed;
  width: 100%;
  box-sizing: border-box;
  bottom: 0;
    left: 0;
}
.orangecontainer.closed .orangetext {
    display: none;
}
.orangesister {
    margin-top: 20px;
}
#blackback {
    position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0,0,0,0.75);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    z-index: 8;
}
.popup {
    background-color: #fff;
  position: fixed;
  width: 100vw;
  max-height: 80vh;
  top: 10vh;
  left: 0;
  overflow: auto;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease-in-out;
    z-index: 9;
}
/*--------------------------------------------------------------
# Landing Page
--------------------------------------------------------------*/
#landingpage {
    z-index: 5;
    padding-top: 0 !important;
}
#header {
    color: #fff;
  background-image: url(/images/Orange-Skin-Image.jpg);
  background-size: cover;
  padding: 25vw 7.5vw 3.75vw;
  padding:  clamp(50px, 25vw, 200px) clamp(15px, 7.5vw, 60px) clamp(7.5px, 3.75vw, 30px);
}
#header1 {
    font-size: 13.82222222vw;
    font-size: clamp(27.64444444px, 13.82222222vw, 110.57777776px);
}
#header2 {
    font-size: 9.44444444vw;
    font-size: clamp(18.88888888px, 9.44444444vw, 75.55555552px);
    line-height: 1;
    width: 80%;
}
#header3 {
    font-size: 3.94444444vw;
    font-size: clamp(7.88888888px, 3.94444444vw, 31.55555552px);
    margin-top: 5vw;
    margin-top: clamp(10px, 5vw, 40px);
}
.homebutton {
    margin: auto;
    background-color: #2f3256;
  border-radius: 50px;
  padding: 18px 20px;
  box-shadow: -2px 2px 5px #999;
    margin-bottom: 10px;
  color: #fff;
    background-size: auto calc(100% - 10px);
  background-repeat: no-repeat;
  background-position: left 5px center;
  padding-left: calc(55px + 2vw);
}
.newbluebutton {
    margin: auto;
    background-color: #2f3256;
  border-radius: 50px;
  padding: 18px 20px;
  box-shadow: -2px 2px 5px #999;
    margin-bottom: 10px;
  color: #fff;
    text-align: center;
}
#logorow div{
    width: 75%;
    margin: auto;
    max-width: 500px;
}
/*--------------------------------------------------------------
# Background Page
--------------------------------------------------------------*/
.partialpop {
    max-height: 90vh;
    color: #000;
}
.partialpop a {
    color: #e56c38;
}
.partialpop a:hover {
    text-decoration: none;
}
.partialpop .closebutton {
    color: #e56c38;
  font-size: 20px;
  right: auto;
  left: 20px;
  font-weight: bold;
    top: 8px;
}
.textpopback {
    padding: 20px;
}
#backgroundinfo {
    background-color: #fbe9cf;
}
.backgroundinfo #mmtitle {
    display: none;
}
.backgroundinfo #mmbtitle {
    display: inline-block;
}
#backbodylinks {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55);
}
.backlinks {
    background-color: #fff;
    color: #000;
    border-top: 1px solid #fbe9cf;
    position: relative;
    cursor: pointer;
}
.backlinks span {
    color: #e56c38;
  font-size: 50px;
    font-size: clamp(50px,13.33333333vw,100px);
  position: absolute;
  right: 20px;
    right:clamp(20px, 5.33333333vw, 40px);
  top: 20px;
    top:clamp(20px, 5.33333333vw, 35px);
  line-height: 0;
}
.backlinkscon {
}
/*--------------------------------------------------------------
# Treatment Tables
--------------------------------------------------------------*/
#necrotizingfasciitistreatmenttable .righttable{
    padding-left: 10px;
    margin-left: 0;
}
.table {
    color: #000;
    display: table;
    margin: 20px 0;
}
.tablerow {
    display: table-row;
}
.lefttable {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    background-color: #f8d39f;
    padding: 10px;
    color: #2f3260;
    width: 23%;
}
.righttable {
    padding-left: 20px;
    margin-bottom: -15px;
}
.orangedtext {
    color: #e56c38;
}
.bluebar {
    background-color: #2f3256;
  color: #fff;
  padding: 5px 10px;
  margin-bottom: 7px;
}
.orangebar {   
    background-color: #e56c38;
  color: #fff;
  padding: 5px 10px;
  margin-top: 7px;
    margin-bottom: -10px;
}
/*--------------------------------------------------------------
# Decision Tool
--------------------------------------------------------------*/
#decisiontool .closebutton {
    color: #000;
}
#decisiontool {
    padding-bottom: calc(5vw + 20px);
  overflow: hidden;
}
#decisiontool .orangecontainer {
    position: absolute;
  bottom: 0px;
}
.radiogroup {
    background-color: #fbe9ce;
  padding: 15px;
  border-radius: 10px;
    margin-bottom: 20px;
    display: table;
    width: 100%;
  box-sizing: border-box;
  max-width: 600px;
}
.radiogroup div, .radiogroup label{
    display: table-row;
}
.radiogroup span {
    display: table-cell;
}
.radiogroup span:first-child {
    width: 10%;
}
.radiotitle {
    padding-bottom: 20px;
}
.marginbottom {
    margin-bottom:20px;
}

[data-next="cellulitisclass"] .skinabx{
    display: none;
}
[data-next="skinabscessclass"] .cellabx {
    display: none;
}
.orangecontainer.inactive {
   pointer-events: none;
    background-color: #f1b49a;
}
.checkboxcon {
    color: #000;
    padding: 20px;
}
.conditions .spacecorrect {
    display: inline;
}
/*.conditions:after {
  content: " + ";
  position: absolute;
  margin-left: calc(-10px - 0.5vw);
  color: #fff;
  background-color: #fff;
  width: 20px;
}*/
.conditions .conditionsin {
    display: inline;
}
.conditions {
    position: relative;
}
.conditions span  {
  display: none;
}
#decisiontoolboth .checkboxcon {
    padding: 0;
}
.checkboxcon label {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 15px;
  cursor: pointer;
  position: relative;
}

/* Hide native checkbox */
.checkboxcon input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Custom square */
.checkboxcon .checkmark {
  width: 35px;
  height: 35px;
  border: 4px solid #2d2f63;
  background: transparent;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* Checked state background */
.checkboxcon input[type="checkbox"]:checked + .checkmark {
  background: #2d2f63;
}

/* White checkmark */
.checkboxcon input[type="checkbox"]:checked + .checkmark::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 1px;
  width: 7px;
  height: 16px;
  border: solid #fff;
  border-width: 0 5px 5px 0;
  transform: rotate(45deg);
}
.radiogroup {
  background-color: #fbe9ce;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 20px;
  display: table;
  width: 100%;
  box-sizing: border-box;
  max-width: 600px;
}

.radiogroup div,
.radiogroup label {
  display: table-row;
}

.radiogroup span {
  display: table-cell;
  vertical-align: top;
}

.radiogroup span:first-child {
  position: relative;
    height: 20px;
  width: 40px;
}

.radiotitle span{
  padding-bottom: 20px;
}

/* spacing between rows */
.radiogroup label span {
  padding-bottom: 12px;
}

/* make label clickable */
.radiogroup label {
  cursor: pointer;
}

/* hide native radio */
.radiogroup input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* outer circle */
.radiogroup label span:first-child::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid #000;
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
  margin: 0 auto;
}

/* inner dot */
.radiogroup label span:first-child::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2d2a72;
  top: 10px;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.15s ease;
  pointer-events: none;
}

/* checked state */
.radiogroup label input[type="radio"]:checked + nothing {
}

/* actual checked selector */
.radiogroup label span:first-child:has(input[type="radio"]:checked)::after {
  transform: translate(-50%, -50%) scale(1);
}

/* TITLES */
/* Severe Penicillin allergy */
.severepenicillinallergy #spatitle {
    display: inline;
}
/* Non-severe Penicillin allergy */
.nonseverepenicillinallergy #nspatitle {
    display: inline;
}
/* Severe Cephalosporin allergy */
.severecephalosporinallergy #scatitle {
    display: inline;
}
/* Non-severe Cephalosporin allergy */
.nonseverecephalosporinallergy #nscatitle {
    display: inline;
}
/* Pregnancy */
.pregnancy #ptitle {
    display: inline;
}
/* Breast Feeding */
.breastfeeding #btitle {
    display: inline;
}
/* Kidney impairment */
.kidneyimpairment #kititle {
    display: inline;
}
/* Known or suspected MRSA */
.knownorsuspected #kosmrsatitle {
    display: inline;
}
/* None of the above */
.noneoftheabove .conditions {
    display: none;
}

/* MEDICATION CATEGORIES */
.oralonly, .ivonly {
    display: none;
    position: relative;
}
.oralonly span, .ivonly span{
    display: none;
}
[data-treatment="oralabx"] .oralonly {
    display: block;
}
[data-treatment="ivabx"] .ivonly {
    display: block;
}
.oralonly span, .ivonly span {
    font-style: italic;
}
.oralonly div:after, .ivonly div:after {
    content: "OR";
    font-weight: bold;
    font-style: italic;
    display: block;
    margin: 20px 0;
    font-size: 4.44444444vw;
    font-size: clamp(8.88888888px, 4.44444444vw, 35.55555552px);
}
.oralonly:after, .ivonly:after {
    content: "";
  display: block;
  height: 40px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  width: 100%;
}
/* MEDICATION RECOMMENDATIONS ORAL*/
.severepenicillinallergy .cephalexin, .severepenicillinallergy .cefadroxil, .severepenicillinallergy .cloxacillin, .severepenicillinallergy .penicillin, .severepenicillinallergy .amoxicillin{
    display: none;
}
.nonseverepenicillinallergy .cloxacillin, .nonseverepenicillinallergy .penicillin, .nonseverepenicillinallergy .amoxicillin{
    display: none;
}
.severecephalosporinallergy .cephalexin, .severecephalosporinallergy .cefadroxil, .severecephalosporinallergy .cloxacillin, .severecephalosporinallergy .penicillin, .severecephalosporinallergy .amoxicillin{
    display: none;
}
.nonseverecephalosporinallergy .cephalexin, .nonseverecephalosporinallergy .cefadroxil, .nonseverecephalosporinallergy .penicillin, .nonseverecephalosporinallergy .amoxicillin{
    display: none;
}
.pregnancy .penicillin, .pregnancy .amoxicillin, .pregnancy .doxycycline, .pregnancy .moxifloxacin, .pregnancy .levofloxacin{
    display: none;
}
.breastfeeding .penicillin, .breastfeeding .amoxicillin, .breastfeeding .moxifloxacin, .breastfeeding .levofloxacin {
    display: none;
}
.knownorsuspected .cephalexin, .knownorsuspected .cefadroxil, .knownorsuspected .cloxacillin, .knownorsuspected .penicillin, .knownorsuspected .amoxicillin, .knownorsuspected .moxifloxacin, .knownorsuspected .levofloxacin {
    display: none;
}
.noneoftheabove .penicillin, .noneoftheabove .amoxicillin, .noneoftheabove .trimethoprimsulfamethoxazole, .noneoftheabove .clindamycin, .noneoftheabove .doxycycline, .noneoftheabove .moxifloxacin, .noneoftheabove .levofloxacin{
    display: none;
}
/* MEDICATION RECOMMENDATIONS IV */
.severepenicillinallergy .cefazolin, .severepenicillinallergy .ceftriaxone{
    display: none;
}
.severecephalosporinallergy .cefazolin, .severecephalosporinallergy .ceftriaxone{
    display: none;
}
.nonseverecephalosporinallergy .cefazolin, .nonseverecephalosporinallergy .ceftriaxone{
    display: none;
}
.knownorsuspected .cefazolin, .knownorsuspected .ceftriaxone {
    display: none;
}
.noneoftheabove .vancomycin, .noneoftheabove .clindamyciniv{
    display: none;
}
/* MEDICATION NOTES ORAL*/
.kidneyimpairment .kinote, .pregnancy .pnote, .breastfeeding .bnote {
    display: block;
}
/* MEDICATION NOTES IV*/
.nonseverepenicillinallergy .nspanote {
    display: block;
}
/*--------------------------------------------------------------
# Language
--------------------------------------------------------------*/
.englishonly .frenchcontent, .frenchonly .englishcontent{
    display: none;
}
/*--------------------------------------------------------------
# Menu
--------------------------------------------------------------*/
#mainmenu {
    position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #2f3256;
      color: #fff;
    z-index: 4;
}
#mmtitle {
    width: 45%;
  display: inline-block;
    vertical-align: middle;
}
#mmbtitle {
    display: none;
    width: 45%;
    vertical-align: middle;
}
#rightmenu {
    width: 55%;
  display: inline-block;
    vertical-align: middle;
}
#rightmenuinner {
    display: flex;
      gap: 15px;
      justify-content: right;
      align-items: center;
}
#mmsearch {
    width: 40px;
}
#mmhome {
    width: 50px;
    display: none;
}
#openrow {
    padding: 15px 20px;
}
#menurow .link {
    border-top: 1px solid #fff;
    padding: 10px 20px;
    text-align: right;
}
#menurow .link:hover {
    text-decoration: underline;
}
#menurow {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
    background-color: #50aba4;
}

#menurow.menu-open {
  max-height: 90vh; /* adjust as needed */
}
/* Base */
#mmhamburger {
  width: 25px;
  height: 24px;
  position: relative;
  cursor: pointer;
}
#hamcon {
    background-color: #fff;
  padding: 10px;
}

/* All 3 lines */
#mmhamburger::before,
#mmhamburger::after,
#mmhamburger span {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background: #2f3256; 
  transition: all 0.3s ease;
}

/* Top */
#mmhamburger::before {
  top: 0;
}

/* Middle */
#mmhamburger span {
  top: 10px;
}

/* Bottom */
#mmhamburger::after {
  top: 20px;
}

/* ACTIVE STATE (turn into X) */
#mmhamburger.active::before {
  top: 10px;
  transform: rotate(45deg);
}

#mmhamburger.active span {
  opacity: 0;
}

#mmhamburger.active::after {
  top: 10px;
  transform: rotate(-45deg);
}
/*--------------------------------------------------------------
# Accordions
--------------------------------------------------------------*/
.notesaccoridion .faq-question {
    background-color: #fae9ce;
    padding: 7px 10px;
}
.notesaccoridion .faq-item {
    border-top: 0;
}
.notesaccoridion .faq-answer {
    padding-left: 10px;
}
.notesaccoridion .faq-title {
    color: #000;
  font-weight: normal;
    padding-top: 0;
}
.notesaccoridion .faq-icon {
    margin-top: -2px;
}
.faq-accordion.notesaccoridion {
    margin: 5px 0 15px -10px;
}
.faq-accordion {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.faq-item {
  border-top: 1.5px solid #f86511;
}

.faq-question {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 10px 0 15px;
  display: flex;
  gap: 20px;
  text-align: left;
  cursor: pointer;
    align-items: center;
}

.faq-number {
  flex: 0 0 74px;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: #f86511;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
    font-size: 4.44444444vw;
    font-size: clamp(8.88888888px, 4.44444444vw, 35.55555552px);
  font-weight: 700;
  line-height: 1;
}

.faq-title {
  flex: 1 1 auto;
  
    font-size: 3.88888888vw;
    font-size: clamp(12px, 3.88888888vw, 31.11111104px);
  font-weight: 700;
  line-height: 1.18;
  padding-top: 4px;
    
    color: #2f3260;
}

.faq-icon {
  flex: 0 0 auto;
  
    font-size: 4.44444444vw;
    font-size: clamp(8.88888888px, 4.44444444vw, 35.55555552px);
  line-height: 1;
  margin-top: 4px;
  transition: transform 0.25s ease;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
    position: relative;
    top: -15px;
}

.faq-answer-inner {
  font-size: 3.88888888vw;
    font-size: clamp(12px, 3.88888888vw, 31.11111104px);
  padding-top: 7px;
    font-weight: 100;
    color: #000;
}

.faq-icon::before {
  content: "+";
  display: inline-block;
  transition: transform 0.2s ease;
}

.faq-item.active .faq-icon::before {
  content: "−"; /* proper minus sign */
}

.faq-item.active .faq-icon::before {
  transform: scale(1.2);
}
.evidence {
    background-color: #fbe9cf;
  padding: 10px 20px;
}
@media (max-width: 499px) {
  .faq-question {
  }

  .faq-number {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
  }

  .faq-title {
  }

  .faq-icon {
  }

  .faq-answer-inner {
  }
}