/* Start of CSS Variables - use it like ...  var(--buttonColor) ...*/
:root {
    --mmcBlue: hsl(204deg 100% 37%);
    --mmcBlueLight: hsl(204deg 100% 98%);
    --brandColor: #005595;
    --brandColor: hsl(205deg 100% 29%);
    --brandDark:  hsl(205deg 100% 19%);
    --brandLight:  hsl(205deg 100% 90%);
    --brandColor2: hsl(280deg 30% 50%);

    /* Monochrome variations for accessibility*/
    /* --core : #9490DA;
    --optional : #7671D0;
    --fsa : #544fc5;
    --surcharge : #373295;     */
    /* Rainbow theme variation that is not accessible */
    --core : #00e272;
    --optional : #fe6a35;
    --fsa : #2caffe;
    --surcharge : #544fc5;
    /* Darker variations for accessibility (3:1 or better) */
    --core : #00A854;
    --optional : #FE622A;
    --fsa : #019AF9;
    --surcharge : #544fc5;

}
/* End of variables - use it like ...  var(--buttonColor) ... */

/*WebFonts: need to be loaded before usage */
/*@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}
*/
@font-face {
  font-family: "ProximaNova-Regular";
  src: url('../fonts/ProximaNova/ProximaNova-Regular.otf') format('opentype');
}

@font-face {
  font-family: "ProximaNova-Bold";
  src: url('../fonts/ProximaNova/ProximaNova-Bold.otf') format('opentype');
}

/*End of WebFonts */


html {font-size: 16px; font-family: "ProximaNova-Bold", 'Times New Roman', Times, serif; }
    @media (max-width: 64rem) {html {font-size: 14px;}}
    @media (max-width: 40rem) {html {font-size: 12px;}}
body { font-family: "ProximaNova-Regular", Helvetica, Arial, sans-serif; font-weight: normal; background: #eee; font-size: inherit; color: #444; line-height: 1.5 !important;}
body * {line-height: 1.5 !important;}
body.is-reveal-open {overflow: inherit;} /*for some reason overflow: fixed causes the window to shift to the right. Not sure if this happens in all browsers.*/

body.debuggingMode * {
  /* line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important; */
}

h1,h2,h3,h4,h5,h6{
  font-weight: normal;
  font-family: "ProximaNova-Bold";
  line-height:1;
  color: #0096d5; color: #004281;
  margin-top: 1rem;
}

p {margin: 0.75em 0em; line-height: 1.4;}
strong, b{}

:is(a, a:link, a:visited, a:hover, a:active) 
  {color: var(--brandColor); outline: none;font-weight: normal; font-family: "ProximaNova-Bold";  text-decoration: underline;}

:is(a:hover, a:active) {
  color: hsl(0deg 100% 38%); text-decoration: none;
}

:is(strong, b, table th, table tfoot td) {font-weight:normal; font-family:"ProximaNova-Bold";}
table :is(th, td) {padding-top: 0.625rem;}
table th {line-height: 1.1;}
table thead th {background-color: var(--mmcBlueLight);  border-top: 1px solid var(--brandColor);border-bottom: 1px solid var(--brandColor);}
table tbody th {text-align: left; }
table tfoot th {background-color: var(--mmcBlueLight); border-top: 1px solid var(--brandColor); border-bottom: 1px solid var(--brandColor);}
table tfoot td {background-color: var(--mmcBlueLight); border-top: 1px solid var(--brandColor); border-bottom: 1px solid var(--brandColor);}

li {margin-top: 0.5em; margin-bottom: 0.5em; line-height: 1.4;}

hr {margin: .5rem auto;}

.button {
  background: var(--brandColor); color: #fff !important;border: 0px solid #0F4971;
  /* padding: 0.75rem 1.5rem; */
  font-weight: 400;text-transform: none;text-decoration: none; border-radius: 5px;
}
.button:hover {
  background-color: #9e0c0f;
  background-color: var(--brandColor2);
}
.button .fa {font-weight:normal; font-size: 11px; margin-left:0.2rem}
a.button {text-decoration: none;}

.alignCenter { text-align: center; }
.alignRight { text-align: right; }

.dropdown-pane {
  /* box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 10px;  */
  box-shadow: rgba(0, 0, 0, 0.5) 5px 5px 10px, rgba(0, 0, 0, 0.15) 0px 0px 100px 100px;
}
@media(max-width: 40rem) {
  .dropdown-pane {left: 10px !important;}
}
.dropdown-pane p {margin: 0.2rem 0rem;}
.dropdown-pane ul {margin-left: 2rem;}
.dropdown-pane li {margin-top: 0.5em; margin-bottom: 0.5em; line-height: 1.2;}

/* label {line-height: 1.1;} */

/***********************************************************/
/***********************************************************/

body {
  max-width: 1200px;
  margin: auto;
}

header {background: #ffffff;}
header .logoBar {
  display: grid;
  grid-template-columns: min-content max-content;
  grid-template-rows: 1fr;
  gap: 1rem 1rem;
  align-items: center;
  justify-content: start;
}
@media(max-width: 64rem) {
  header .logoBar {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
    gap: 0rem;
    align-items: center;
    justify-content: center;
    justify-items: center;
  }
}
header .logo {
  max-width: 200px; padding: 1rem;
}
@media(max-width: 64rem) {
  header .logo {
    max-width: 100px; padding: 1rem 0rem 0rem 0rem;
  }  
}
header h1 {
  font-size: 2rem; color: var(--brandColor);
}
@media(max-width: 64rem) {
  header h1 {
    font-size: 1.3rem; 
  }  
}


header .globalNavBar {
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(10px, max-content));
  justify-content: end;
  align-items: center;
  justify-items: center;
  padding: 3px 0px 3px 0px;
  background: var(--brandColor, #000000); 
  color: #ffffff;
}
header .globalNavBar a {
  padding: 0.5rem 1rem 0.5rem 1rem;
  border-left: 1px solid #fff;
  text-decoration: none;
  color: #ffffff; 
  background: var(--brandColor, #000000); 
}
@media(max-width: 40rem) {
  header .globalNavBar a {
    padding: 0.5rem 0.85rem 0.5rem 0.85rem;
  }
}
header .globalNavBar a:first {
  border-left: 0px solid #fff;
}
header .globalNavBar a:hover {
  background: grey;
  background: var(--brandColor2);
}
header .globalNavBar a .fa{
  margin-right: 0.3rem;
}
header .globalNavBar .seperator {
  color: #ffffff;
  display: none;
}

.callout.secondary {
  background: #f6f6f6;
}
/****************/
/****************/

main { background: white;}
.mainIntro {margin: 1rem 1rem 0rem 1rem;}
main .navTab {
  padding: 1rem 1rem 0.0rem 2rem;
  border: 0px solid #fff;
  /* border-bottom: 1px solid var(--brandColor); */
}
@media(max-width: 64rem) {
  main .navTab {
    padding: 1rem 1rem 0.0rem 1rem;
    border: 0px solid #fff;
    clear: both;
  }
}
@media(max-width: 40rem) {
  main .navTab {
    padding: 1rem 0rem 0.0rem 0rem;
  }
}
main .navTab .tabs-title{
  margin: 0px 0.5rem 0px 0px;
  border-radius: 0.15rem 0.15rem 0.0rem 0.0rem;
  background: #ffffff; 
  /* border:1px solid var(--brandColor); */
  border-bottom: 0px solid #fff;
}
main .navTab .is-active .tabs-title:has(>a:focus, >a:hover, >a[aria-selected=true]) {
  /* color: var(--brandColor); 
  background-color: #fff;
  border-bottom: 0px solid #fff; */
  margin-bottom: -2px;
}
main .navTab :is(.tabs-title>a:focus, .tabs-title>a:hover, .tabs-title>a[aria-selected=true]) {
  color: var(--brandColor); 
  color: #fff !important; 
  background-color: #fff;
  background-color: #d6d6d6 ;
  background-color: var(--brandColor); 
  border-bottom: 0px solid #fff;
  color: #000;
  margin-top: 2px;
  margin-bottom: -2px;
}
main .navTab .tabs-title>a:hover {
  background: var(--brandColor2); 
}
main .navTab .tabs-title a{
  padding: 1rem 0.95rem;
  text-decoration: none;
  background-color: #e6e6e6;
  color: #000;
  border-radius: 5px 5px 0px 0px;
}
/*small screens turns tab into accordion*/
.navTab .accordion-title {
font-size: 1.1rem;
} 
/* .navTab .accordion-title:focus,  */
.navTab .accordion-title:hover  {
  background: var(--brandColor);
  background: var(--brandColor2);
  color: white;
}

main .tabs-content {
  padding: 0rem 1rem 1rem 1rem;
  border:0px solid #fff;
}
main .tabs-content .tabs-panel{
  border:1px solid #d6d6d6;
  border:1px solid var(--brandColor);
  border-top: 10px solid #d6d6d6;
  border-top: 10px solid var(--brandColor);
  background: #ffffff;
  padding-top: 1rem;
}

.tabs-intro {
  padding-bottom: 1rem; 
  margin-bottom: 1rem;
  margin-top: 0rem;
  border-bottom: 1px solid #666; 
}

.goToNavBar {margin-top: 1rem; }
@media (max-width:1024px) {
.goToNavBar { display: none;}
}

.leftCell {
  margin-top: 0.5rem; margin-bottom:0.0rem; 
  padding-top: 0.5rem; padding-bottom: 0.75rem;
  border-bottom: 1px solid #ddd; text-align: right;
}
@media(max-width: 40rem) {
  .leftCell {
    margin-bottom:0rem; padding-bottom: 0.5rem;
    border-bottom: 1px solid #fff; text-align: left; 
  }
}
.rightCell {
  margin-top: 0.5rem; margin-bottom:0.0rem; 
  padding-top: 0.5rem; padding-bottom: 0.75rem;
  border-bottom: 1px solid #ddd; 
}
.rightCell.touchedByUser {
  /* border:1px solid orange; */
}
/* .rightCell.touchedByUser input[type=number]{
  background: #FCC !important;
  border: 1px solid #eca820 !important;
}
.rightCell.touchedByUser input[type=text]{
  background: #FCC !important;
  border: 1px solid #eca820 !important;
}

.rightCell.touchedByUser .dropdownBtn {
  background: #FCC !important;
  border: 1px solid #eca820 !important;
} */


/* @media (max-width:40rem) {
  .navTab .cell label.text-right {
    text-align: left;
  } 
} */

.leftCell legend {text-align: right; display: inline-block;}
@media(max-width: 40rem) {
  .leftCell legend {text-align: left;}
}

.tooltipIcon {
  font-size: 1.25rem; color: var(--brandColor);
}


.reflector {
  display: block; 
  color: #444; 
  line-height:1.1;
}
#step2 .reflector b {font-weight: bold; color: #666;}
#step3 .reflector b {font-weight: bold; color: var(--optional);}
#step4 .reflector b {font-weight: bold; color: var(--fsa);}
#step5 .reflector b {font-weight: bold; color: var(--surcharge);}


[type=range] {
  width: 100%;
  cursor: pointer;
}
.rangeWrapper {
  display: grid;
  grid-template-columns: auto 85px;
  grid-gap: 1rem;
}
input[type=number]{
  margin-bottom: 0.5rem;
  border:1px solid var(--brandColor);
}
input[type=text]{
  margin-bottom: 0.5rem;
  border:1px solid var(--brandColor);
}

#empZip {width: 100px; margin-bottom: 5px;}
#empSalary {width: 100px;}
#std {width: 100px;}
#ltd {width: 100px; margin-top: 0.5rem;}
#add {width: 100px; margin-top: 0.5rem;}

.is-invalid-label {font-size: .875rem;}
.is-invalid-label a {color: #cc4b37; }

label:has(input[type=radio]):hover {
  background: #FE9 !important;
  background: #F00;
  border: 3px solid var(--brandColor);
  box-shadow: none !important;
  transition: 0.1s all;
}
label:has(:checked) {
  background: #FFC;
  background: #FCC;
  border: 3px solid var(--brandColor);
}

/*https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/*/

.input[type=radio] {
  margin-bottom: 0rem;
}
:is(.toggleBtn, .dropdownBtn) { /*applies to toggleBtn and button.yellow */
  display: inline-block; 
  /* margin-right:0.5rem; */
  padding: 0.5rem 1rem 0.4rem 1rem;
  border:1px solid #ccc;
  border:1px solid var(--brandColor);
  border-radius: 10px;
  cursor: pointer;
}

/*toggleBtn: toggles between two states*/
.toggleBtn:first-child {
  padding: 0.75rem 1.5rem 0.7rem 1.5rem;
  margin-bottom: 0.5rem;
  border-radius: 10px 0px 0px 10px; 
  /* border-right: 0px;  */
  border:1px solid #ccc;
  background-color: white; box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1);
}
.toggleBtn + .toggleBtn {
  padding: 0.75rem 1.5rem 0.7rem 1.5rem;
  border-radius: 0px 10px 10px 0px; 
  /* border-left: 0px;  */
  border:1px solid #ccc;
  background-color: white; box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1);
}
@media (max-width: 800px) {
  .toggleBtn:first-child , 
  .toggleBtn + .toggleBtn
   {
    border-radius: 10px 10px 10px 10px !important; 
    margin-right: 0.5rem; margin-bottom: 0.5rem;
   }
}

.toggleBtn input[type=radio] {
  display: inline-block;
  margin-right: 0.4rem;
  opacity: 0;
  position: absolute;
}
.toggleBtn:has(*:checked) {
  box-shadow: none;
  background: #FFC;
  border:1px solid var(--brandColor);
}
.toggleBtn:has(*:checked):first-child {

}
.toggleBtn + .toggleBtn:has(*:checked) {
  border-radius: 0px 10px 10px 0px; 
}


/*dropdownBtn: button that triggers the dropdown to appear*/

.dropdownBtn {
  background: #FFC !important;
  /* border: 1px solid var(--borderOrangeColor) !important; */
  color: black !important;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.85rem 1rem;
  text-align: left;
  border-radius: 10px;
  max-width: 500px;
}
.dropdownBtn:hover {
  background: #FE9 !important;
}
.dropdownBtn:after { 
  /* background: orange !important; */
  /* color: #eca820 !important; */
  font-family: "Font Awesome 5 Pro";
  content: "\f078";
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
  vertical-align: middle;
  font-weight: 900;
}
.dropdownBtn:hover:has(~ .dropdown-pane):after {
  color: #eca820 !important;
}

/**/

.dropdownBtnPane {
  padding: 0.75rem 0.75rem 0.75rem 0.75rem; 
  width: 400px;
  background: #ffffff;

}
@media(max-width: 40rem) {
  .dropdownBtnPane {
    padding: 0.5rem 0.5rem 0.5rem 0.5rem; 
    width: 300px;
    background: var(--mmcBlueLight);
    background: #f6f6f6;
    left: 10px !important;
  }
}

.dropdownBtnPane b {
  padding:0.33rem 0rem 0.5rem 0rem;
  display: block;
  color: red;
}
.dropdownBtnPane fieldset legend {
  padding:0.33rem 0rem 0.5rem 0rem;
  font-family: "ProximaNova-Bold";
}
.dropdownBtnPane label {
  padding: 0.6rem 1rem 0.4rem 1rem;
  margin-bottom: 0.1rem; 
  margin-bottom: 0.25rem;
  line-height: 1.2;
  line-height: 1.3;
  border-radius: 5px;
  /* min-width: 300px; */
  border: 1px solid #CCC;
  display: block;
  cursor: pointer;
  width: 98%; /*takes the whole width of the grid cell*/ 
  text-align: left;
}
@media(max-width: 40rem) {
  .dropdownBtnPane label {
  /* border: 1px solid var(--brandColor); */
  border: 1px solid #CCC;
  padding: 0.5rem 1rem;
  background: #fff;
  }
}
.dropdownBtnPane:hover label {
  border: 1px solid #CCC;
  transition: 0.5s all;
  box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1);
}
.dropdownBtnPane label.disabledPerc {
  border: 1px solid #CCC;
  background: #CCC !important;
  transition: 0.5s all;
  /* box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1); */
  border: 1px solid #999 !important;
  cursor: not-allowed;
  display: none;
}
.dropdownBtnPane label.disabledDenPlan {
  border: 1px solid #CCC;
  background: #CCC !important;
  transition: 0.5s all;
  /* box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1); */
  border: 1px solid #999 !important;
  cursor: not-allowed;
}
.dropdownBtnPane label.disabledDenPlan:hover {
  background: #CCC !important;
}
.dropdownBtnPane label.disabledFSAMonths {
  border: 1px solid #CCC;
  background: #CCC !important;
  transition: 0.5s all;
  /* box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1); */
  border: 1px solid #999 !important;
  cursor: not-allowed;
  display: none;
}
.dropdownBtnPane label.disabledFSAMonths:hover {
  background: #CCC !important;
}
.dropdownBtnPane label input[type=radio] {
  /*use opacity: 0 if we want to hide the radio button*/
  opacity: 0;  
  position: absolute;
  cursor: pointer;
}
.dropdownBtnPane label:has(:checked) {
  background: #FFC;
  border: 3px solid var(--brandColor);
}  
.dropdownBtnPane .close-button[data-close]{
  /* background: pink; */
  display: none;
} 
.dropdownBtnPane:has(input:focus-visible) .close-button[data-close]{
  display:inline-block;
} 

.dropdownBtnPane.small200px {width: 200px;}
.dropdownBtnPane.small300px {width: 300px;}
.dropdownBtnPane.small400px {width: 400px;}
.dropdownBtnPane.small500px {width: 500px;}
.dropdownBtnPane.small600px {width: 600px;}
@media(max-width: 40rem) {
  .dropdownBtnPane.small400px {max-width: 90%; width: 90%;   }
  .dropdownBtnPane.small500px {max-width: 90%; width: 90%;   }
  .dropdownBtnPane.small600px {max-width: 300px; width: 300px;  }
  .dropdownBtnPane.small600px {max-width: 90%; width: 90%;  }
}



.dropdownBtnPane .grid2 {
  /* background: pink; */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(49%, max-content));
  justify-content: center;
  justify-items: center;
  align-items: center;
}
.dropdownBtnPane .grid2 label{
  margin-right: 0px;
  line-height: 1.1;
  text-align: center !important;
}
.dropdownBtnPane .grid3 {
  /* background: pink; */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(32%, max-content));
  justify-content: center;
  justify-items: center;
  align-items: center;
}
.dropdownBtnPane .grid3 label{
  margin-right: 0px;
  line-height: 1.1;
  text-align: center !important;
}
.dropdownBtnPane .grid5 {
  /* background: pink; */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19%, max-content));
  justify-content: center;
  justify-items: center;
  align-items: center;
}
@media(max-width: 40rem) {
  .dropdownBtnPane .grid5 {
    grid-template-columns: repeat(auto-fill, minmax(24%, max-content));
  }
}
.dropdownBtnPane .grid5 label{
  margin-right: 0px;
  line-height: 1.1;
  text-align: center !important;
}
.dropdownBtnPane .grid10 {
  /* background: pink; */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.9%, max-content));
  justify-content: center;
  justify-items: center;
  align-items: center;
}
@media(max-width: 40rem) {
  .dropdownBtnPane .grid10 {
    grid-template-columns: repeat(auto-fill, minmax(19.9%, max-content));
  }
}
.dropdownBtnPane .grid10 label{
  margin-right: 0px;
  line-height: 1.1;
  text-align: center !important;
}
@media(max-width: 40rem) {
  .dropdownBtnPane .grid10 label{
    padding: 0.35rem 0.35rem;
  }
}


/* .dropdownBtnPane ~ .dropdownBtn {
  margin-left: 0.5rem;
  display: inline-block;
} */


/*results at the bottom of the page*/

.resultsPanel {padding: 0rem;}
.resultsPanel .tabs-content .tabs-panel{
  padding: 0rem;
}

.resultsPanel .resultsTable_intro {
  padding: 0rem 1rem;
}
@media(max-width:40rem) {
  .resultsPanel .resultsTable_intro {
    padding: 0rem 0rem;
  }
}
.resultsPanel #dynamicResultsChart {

}
@media(max-width:40rem) { 
  .resultsPanel #dynamicResultsChart {
    /* display: none; */
  }
}
.resultsPanel .resultsTable_footnote {
  padding: 0rem 1rem 1rem 1rem;
}
@media(max-width: 40rem) {
  .resultsPanel .resultsTable_footnote {
    padding: 0rem 0rem 1rem 0rem;
  }
}

.resultsPanel .resultsTable_footnote h7{
  margin: 1.5rem 0rem -0.75rem 0rem;
  font-family: "ProximaNova-Bold";
  display: block;
}

/*******************************/

.planChooser {
  margin-right: 1rem;
  margin-bottom: -1.5rem;
  margin-top: 1rem;
}

.planChooser-button:before {
  font-family: "Font Awesome 5 Pro";
  content: "\f1e5";
  /* content: "\f0b0";   */
  display: inline-block;
  padding-left: 5px;
  padding-right: 5px;
  vertical-align: middle;
  font-weight: 900;
}

#dropdown-planChooser {
  
}
.planChooser_list {
  margin: 0.5rem 0rem 0.5rem 0rem;
  padding: 0.5rem 0.05rem 0.5rem 0.05rem;
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
}
@media(min-width: 700px) {
.planChooser_grid {width: 700px !important;}
}
.planChooser_grid .planChooser_list{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(1fr));  
  grid-template-columns: 1fr 1fr;  
  grid-auto-flow: row;
}
@media(max-width: 700px) {
  .planChooser_grid {widthXXX: inherit !important;}
  .planChooser_grid .planChooser_list{
    display: grid;
    grid-template-columns: 1fr;  
    grid-template-rows: 1fr 1fr min-content;  
    grid-auto-flow: column;
  }
}
/* .planChooser_ft {background: #eee;}
.planChooser_pt {background: #efe;} */

.planChooser_list label {display: block;}
.planChooser_list label:hover {opacity: 0.7;}

.planChooser_list label:has(input[type=checkbox]):hover {
  background: #FFC !important;
  border: 1px solid #eca820 !important;
}
.planChooser_list label:has(input[type=checkbox]:checked) {
  background: #FFC !important;
  border: 1px solid #eca820 !important;
}

.planChooser_list label [type=checkbox] {
  margin-top: 0.4rem;
  margin-bottom: 0rem;
}
.planChooser_list label  {
  /* display: none; */
  margin-bottom: 0.3rem;
}
.planChooser_list label:has(input[type=checkbox]) {
  display: inline-block; 
  /* display: block;  */
  margin-right:0.5rem;
  padding: 0.25rem 1rem;
  border:1px solid #ddd;
  border-radius: 5px;
  cursor: pointer;
}




#resultsTable_monthlyEE {
  
}
#resultsTable_monthlyEE tbody tr:is(.subrow) th{
  
}
#resultsTable_monthlyEE tbody tr:not(.subrow) th{
  padding-left: 0.5rem;
}
/* .resultsTable thead:not(::first) tr th {
  display: grid; 
  grid-template-columns: min-content max-content;
} */
/* .swatch {width: 20px; height: 20px; border-radius: 50%; margin: 0rem 0.5rem -0.5rem 0rem; display: inline-block;}
.swatch.core {background: #2caffe;}
.swatch.optional {background: #544fc5;}
.swatch.fsa {background: #00e272;}
.swatch.surcharges {background: #fe6a35;} */


.subrow {
  background: var(--mmcBlueLight) !important;
  /* color: var(--brandColor); */
  /* font-family: "ProximaNova-Bold"; */
  border-top: 1px solid #666;
  border-bottom: 1px solid #666 !important;
}

#resultsTable_monthlyEE .subrow {cursor: pointer;}

/* thead tr:not(:has(.swatch)) th:first {border-left: 1rem solid var(--brandColor); } */

.resultsTable .headerFooterRow tr :is(th, td)   {background: #ddd; }

/* tr td.isFullTime:nth-child(1) {color: red;}
tr td.isFullTime:nth-last-of-type(1) {color: red;}
tr td.isFullTime:nth-last-child {color: red;} */
/* #resultsTable_monthlyEE .headerFooterRow:first-child:has(th + th + th + th) th + th {width: inherit;}
#resultsTable_monthlyEE .headerFooterRow:first-child:has(th + th + th)      th + th {width: 50%;} */

.swatchColumn {max-width: 40px; width: 40px;}
.titleColumn { border-right: 1px solid #999;}
/* .table-scroll  {cursor: ew-resize; } */
.resultsTable .headerFooterRow  .swatchColumn {background: #ddd; }

.resultsTable .core             .swatchColumn {border:1px solid var(--core); background: var(--core); border-bottom:1px solid rgba(255,255,255,0.5);}
.resultsTable .optional         .swatchColumn {border:1px solid var(--optional); background: var(--optional); border-bottom:1px solid rgba(255,255,255,0.5);}
.resultsTable .fsa              .swatchColumn {border:1px solid var(--fsa); background: var(--fsa); border-bottom:1px solid rgba(255,255,255,0.5);}
.resultsTable .surcharge        .swatchColumn {border:1px solid var(--surcharge); background: var(--surcharge); border-bottom:1px solid rgba(255,255,255,0.5);}

.resultsTable .core .subrow      .swatchColumn {border-top: 1px solid var(--brandColor); border-bottom: 1px solid var(--brandColor); background: var(--core);}
.resultsTable .optional .subrow  .swatchColumn {border-top: 1px solid var(--brandColor); border-bottom: 1px solid var(--brandColor); background: var(--optional);}
.resultsTable .fsa .subrow       .swatchColumn {border-top: 1px solid var(--brandColor); border-bottom: 1px solid var(--brandColor); background: var(--fsa);}
.resultsTable .surcharge .subrow .swatchColumn {border-top: 1px solid var(--brandColor); border-bottom: 1px solid var(--brandColor); background: var(--surcharge);}

.resultsTable .core.isOpen      .swatchColumn {border-bottom: 1px solid rgba(255,255,255,0.5);}
.resultsTable .optional.isOpen  .swatchColumn {border-bottom: 1px solid rgba(255,255,255,0.5);}
.resultsTable .fsa.isOpen       .swatchColumn {border-bottom: 1px solid rgba(255,255,255,0.5);}
.resultsTable .surcharge.isOpen .swatchColumn {border-bottom: 1px solid rgba(255,255,255,0.5);}

.resultsTable thead.core:hover      :is(th,td) {color: var(--core);     border-top:3px solid var(--core) !important; border-bottom:3px solid var(--core); background: white;}
.resultsTable thead.optional:hover  :is(th,td) {color: var(--optional); border-top:3px solid var(--optional) !important; border-bottom:3px solid var(--optional); background: white;}
.resultsTable thead.fsa:hover       :is(th,td) {color: var(--fsa);      border-top:3px solid var(--fsa) !important; border-bottom:3px solid var(--fsa); background: white;}
.resultsTable thead.surcharge:hover :is(th,td) {color: var(--surcharge);border-top:3px solid var(--surcharge) !important; border-bottom:3px solid var(--surcharge); background: white; }



/* .resultsTable thead .subrow th {border-right: 1px solid var(--brandColor);} */
/* .resultsTable :is(thead, tfoot) :is(th,td) {border-right: 1px solid var(--brandColor);} */

.swatch_plusIcon, .swatch_minusIcon {
  font-size: 1.25rem;
  color: #fff;
  opacity: 0.7;
  opacity: 1;
}
tr:hover :is(.swatch_plusIcon, .swatch_minusIcon) {
  opacity: 1;
}
                .swatch_plusIcon {display: none;}
                .swatch_minusIcon {display: block;}
.coreHide .core .swatch_plusIcon {display: block;}
.coreHide .core .swatch_minusIcon {display: none;}
.optionalHide .optional .swatch_plusIcon {display: block;}
.optionalHide .optional .swatch_minusIcon {display: none;}
.fsaHide .fsa .swatch_plusIcon {display: block;}
.fsaHide .fsa .swatch_minusIcon {display: none;}
.surchargeHide .surcharge .swatch_plusIcon {display: block;}
.surchargeHide .surcharge .swatch_minusIcon {display: none;}



                /* tr.surchargeResultRow {opacity: 1; height: auto; transition: 1s all;}
.surchargeHide  tr.surchargeResultRow {opacity: 0; height:1px !important;  transition: 1s all;} */
/* .surchargeHide  tr.surchargeResultRow {opacity: 0; height:1px;  transition: 1s all;} */

tr.surchargeResultRow td{
  height:inherit; transition: 1s all;
}

.surchargeHide  tr.surchargeResultRow td{
  height:1px; transition: 1s all;
}

@keyframes fadeIn {
  0% {    opacity: 0;  }
  100% {    opacity: 1;  }
}
@keyframes fadeOut {
  0% {    opacity: 1;  }
  100% {    opacity: 0;  }
}


.accordion-title{
  font-size: 1rem;
  background: var(--mmcBlueLight);
  text-decoration: none !important;
  border: 1px solid var(--brandColor);
  padding-right: 2rem;
}
.navTab .is-active > .accordion-title {
  background: var(--brandColor);
  color: #fff;
}
:last-child:not(.is-active)>.accordion-title {
  border-bottom: 1px solid var(--brandColor);
}
.accordion-title:focus, .accordion-title:hover {
  background-color: var(--brandColor); 
  color: white;
}
.accordion-title::before {
  font-size: 2rem;
  margin-top: -1.5rem;
}
.accordion-content {
  border: 1px solid var(--brandColor);
  border-top: 0px solid white;
}
:last-child>.accordion-content:last-child {
  border-bottom: 1px solid var(--brandColor);
}

.highlighter2{
  background-color: #ffee00;
  background-color: hsl(50deg, 100%, 87%, 1);
  padding: 2px 4px;
  font-size: 0.9375rem;
}

.highlighter{
  animation: pulse 1s ease 2; 
}

@keyframes pulse {
  0%, 100% {
    background-color: #fff;
  }
  50% {
    background-color: #ffcc00;
  }
}

.highlighter3{
  animation: pulse3 1s ease 2; 
}
@keyframes pulse3 {
  0%, 100% {
    background-color: #fff;
  }
  50% {
    background-color: #ffee99;
  }
}

.disclaimer_panel {
  border:1px solid var(--brandColor);
  background: var(--mmcBlueLight);
  padding: 1rem;
}
.disclaimer_answers {
  margin: 1rem auto 0rem 1rem;
  margin: 1rem 0rem 1rem 0rem;
  padding: 0rem 1rem;
  padding: 0rem 0rem;
}
.disclaimer_answers label {
  margin:0rem 1rem;
  padding: 0.25rem 1rem;
  /* width: 250px; */
  display: inline-block;
  cursor: pointer;
  border: 1px solid #666;
  background: #fdfaf9;;
  /* opacity: 0.8; */
}
.disclaimer_answers label:has(:checked) {
  background: #FFC;
  border: 3px solid var(--brandColor); 
}
.disclaimer_answers input {
  margin-bottom: 0rem;
  margin-top: 0px;
  vertical-align: middle;
}
.disclaimer_button {
  margin: 0.5rem auto 0rem auto;
}

/* in modal-globalNavBar-faq first question*/
.sideBySideComparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media(max-width: 64rem) {
  .sideBySideComparison {
    display: block;
    /* grid-template-columns: 1fr 2fr; */
  }
}

#resetModal {}

.table_groupPicker {border: 1px solid var(--brandColor);}
.flashTheTable .table_groupPicker .far{opacity: 1; transition: 0.5s all;}

.table_groupPicker input {
  opacity: 0;  
  position: absolute;
}


.table_groupPicker thead tr{background-color: #fff; }
.table_groupPicker thead th{text-align: center; background-color: #fff;}

.table_groupPicker tbody tr{background-color: #fff; line-height: 1rem;}
.table_groupPicker tbody th{text-align: left; background-color: #fff; color: #666; border-top: 1px solid #ddd; font-family: 'ProximaNova-Regular';}
.table_groupPicker tbody td{text-align: center; background-color: #fff; border-top: 1px solid #ddd;}
.table_groupPicker tbody tr:hover > *{background-color: var(--mmcBlueLight); cursor: pointer;}
.table_groupPicker tbody tr.selectedRow td{background-color: var(--mmcBlueLight); color: var(--brandColor); border-top: 1px solid var(--brandColor); border-bottom: 1px solid var(--brandColor);}
.table_groupPicker tbody tr.selectedRow th{background-color: var(--mmcBlueLight); color: var(--brandColor);  border-top: 1px solid var(--brandColor); border: 1px solid var(--brandColor); font-family: 'ProximaNova-Bold';}
.table_groupPicker tbody tr.groupARow td{border-bottom: 3px solid #ddd;}
.table_groupPicker tbody tr.groupARow th{border-bottom: 3px solid #ddd;}

.table_groupPicker tbody tr label{
  padding-left: 0rem; margin-left: 0px;
  border-radius: 3px; cursor: pointer; line-height: 1rem;
}
.table_groupPicker tbody tr label:has(:checked){
  background: inherit;
  border:0px solid white;
}
.table_groupPicker tbody tr.selectedRow label{ color: var(--brandColor);}
.table_groupPicker tbody tr label span {display: block; margin-left: 1.35rem; font-size:1.1rem;}

.table_groupPicker tbody tr .far{color: var(--brandColor);  opacity: 0.4; display: none; font-size: 1.2rem; float:left; margin: 0px; transition: 1s all; margin-top: -2px;}
@media(max-width: 40rem) {.table_groupPicker tbody tr .far{margin-top:0rem;}}
.table_groupPicker tbody tr .selectedIcon{display: none; }
.table_groupPicker tbody tr .unselectedIcon{display: inline; }
.table_groupPicker tbody tr:hover .selectedIcon{color: var(--brandColor); opacity:1; display: inline; transition: 1s all;}
.table_groupPicker tbody tr:hover .unselectedIcon{color: var(--brandColor);  display: none;}
.table_groupPicker tbody tr.selectedRow .selectedIcon{color: #fff; color: var(--brandColor);  display: inline; opacity: 1;}
.table_groupPicker tbody tr.selectedRow .unselectedIcon{color: #fff; color: var(--brandColor); display: none;}

/****************/
/****************/

footer {
  background: #fff;
}
.footerRow {background-color: #fff;text-align:left;padding: 1em 1em; border-top: 1px solid #CCC;color: #444;}
@media(max-width: 64rem) {.footerRow {padding: 2em 0em; }}
.footerRowWrapper  {margin: auto;}
.footerRow img {max-width: 120px;}
@media(max-width: 64rem) {.footerRow img {max-width: 100px;}}
@media(max-width: 40rem) {.footerRow img {max-width: 80px;}}

.isFullTime {}
.isPartTime {}
/* .isMedOptOut:not(:has(~ .isMedOptOut) {border-left: 10px solid #999;} */
/* .isMedOptOut + .isPartTime {border-left: 1px solid #999;} */
.isFullTime  + .isPartTime {border-left: 1px solid #999;}
.isMedOptOut {}
.isMedNonOptOut {}

/* #resultsTable_monthlyEE thead tr th.swatch {border-right: 1px solid #999;}
#resultsTable_monthlyEE tfoot tr th.swatch {border-right: 1px solid #999;} */
.resultsTable thead tr th.swatch + th {border-right: 1px solid #999;}
.resultsTable tfoot tr th.swatch + th {border-right: 1px solid #999;}
.resultsTable thead:has(.subrow) tr th {border-right: 1px solid #999;}
.resultsTable thead tr:subrow th {border-right: 1px solid #999;}

.resultsTable tbody th {border-right: 1px solid #999;}
.isFullTime:first-child {border-left: 1px solid #999;}
.isFullTime:last-child {border-right: 1px solid #999;}
.isMedOptOut {border-left: 1px solid #999; background: #eee;}
.isMedOptOut + .isMedNonOptOut {
  border-left: 1px solid #999;
}
.borderRight {border-right: 1px solid #999;}


/*************************/
/*************************/


.debuggingMode {}
.debugOnly {display: none; background: #FFC;}
.debuggingMode .debugOnly {display: block;}
.debuggingMode span.debugOnly {display: inline;}

.debugTools {
  position:fixed;
  top: 0px; left: 0%;
  width: 1px; margin:auto;
  z-index: 999999;
}
.debugTools > .button {
  opacity: 0.015;transition: all 0.1s; background-color: white !important;
}
.debugTools:hover .button {
  opacity: 1; transition: all 0.3s; background-color: #FFCC00 !important;
}

#debugTools-reveal {background: #ffc; margin: auto; width: 98%; top: 1rem !important; border:1px solid orange;}
#debugTools-reveal #debugTools-tabs{background: #ffc;}

#debugTools-reveal .samples {font-size: 85%;  }
#debugTools-reveal .samples tr{vertical-align: top;  }
#debugTools-reveal .samples tr td                   {border-bottom: 1px solid #FFF; }
#debugTools-reveal .samples tr td:first-child       {border-left: 10px solid #CCC; }
#debugTools-reveal .samples tbody tr:nth-child(1) td{background: #ddd; font-family: 'ProximaNova-Bold';}
#debugTools-reveal .samples tbody:hover   {border:2px solid #f90;}
#debugTools-reveal .samples tbody:hover td{background: #fe9; cursor: pointer;}
#debugTools-reveal .samples tbody:hover td:first-child {border-left: 10px solid #f90; }
#debugTools-reveal .samples tbody:hover td:last-child {border-right: 10px solid #f90; }
#debugTools-reveal .samples tbody:hover tr:nth-child(1) td{border-top: 2px solid #f90;background:#f90 !important;}
#debugTools-reveal .samples tbody:hover tr:nth-child(2) td{background: #ed8; }
#debugTools-reveal .samples tbody:hover tr:nth-child(3) td{border-bottom: 10px solid #f90; }
#debugTools-reveal .samples:hover tbody tr:nth-child(1) td{background: #ddd; }
/* #debugTools-reveal .samples:hover tbody  {opacity: 0.8;} */

#debugTools-reveal  label {
  background: #FFC !important;
  border: 1px solid #eca820 !important;
  /* float:left;  */
  margin:0.2rem;
  padding: 0.1rem 0.5rem;
}

#debugTools-quickPickTabPanel {}
#debugTools-quickPickTabPanel .input-group button{margin-left: 0.1rem;}

#debugTools-cvLookupTabPanel {}
#debugTools-cvLookupTabPanel thead th{padding: 0.2rem 0.5rem; background: #444; color: #fff;}
#debugTools-cvLookupTabPanel #cvLookup-inputs th{vertical-align: top;}
#debugTools-cvLookupTabPanel #cvLookup-inputs input{font-weight: normal; font-family:"pnRegular";font-size: 0.8rem; margin-bottom: 0.1rem;}
#debugTools-cvLookupTabPanel #cvLookup-inputs .cvLookup-inputs-row th{text-align: left;}
#debugTools-cvLookupTabPanel #cvLookup-inputs .cvLookup-inputs-row th .fa{font-size:1.1rem;}
#debugTools-cvLookupTabPanel #cvLookup-inputs .cvLookup-inputs-row a{color: #fff; font-size: small;}

#cvLookup-tabs + .tabs-content .tabs-panel {padding: 0rem;}
#debugTools-cvLookupTabPanel thead th .subheader{color: #fff;}
#debugTools-cvLookupTabPanel tbody td .subheader{font-size: 0.8rem;}
#debugTools-cvLookupTabPanel .tabs-title {margin-bottom: -3px; }
#debugTools-cvLookupTabPanel .tabs-title a{padding-top:0.7rem; padding-bottom:0.7rem;}
#debugTools-cvLookupTabPanel .tabs-title.is-active {margin-top: 0px;margin-bottom: 0px; }
#debugTools-cvLookupTabPanel .tabs-title.is-active a{padding-top:0.8rem; padding-bottom:0.8rem;}
#debugTools-cvLookupTabPanel .tabs-title.alert a{color:#e61e28;;}

.dropdownBtnPane.wide {width: 550px;}
#debugTools-cvLookupTabPanel #cvLookup-code-comment {max-width: 660px; height: calc(100% - 100px); font-size: 14px;}
#debugTools-cvLookupTabPanel #cvLookup-code-comment-wrapper {display: flex; flex-direction:column; flex-wrap: wrap; max-height: calc(100% - 0px);}

.sampleResult {color: black; padding: 0rem 1rem; margin: 0rem 1rem; cursor:pointer;}
@media(max-width: 40rem) {
  .sampleResult {position: absolute; top: 0rem; left: 0rem; margin: 0.5rem;  }
}
.sampleResult:hover {cborder:1px solid white;}
.sampleMatch {  background: lightgreen;}
.sampleMisMatch {  background: pink;}
.sampleStatusFresh { opacity: 1.0;}
.sampleStatusStale { opacity: 0.5;}


/*************************/
/* Accessibility styling 
/*************************/

:root {
  --borderOrangeColor: #eca820 ;
  --borderOrangeColor: hsl(40deg 95% 63%) ;
  --borderBlackColor: #000000 ;
  --borderWhiteColor: #ffffff ;
  --outlineOrangeColor: hsl(40deg 95% 63%) ;
  --outlineBrandColor: --var(--brandColor) ;
  --backgroundColor: #FE9;
  --outlineStyle: outset;
  --outlineStyle: solid;
  --outlineSize: 5px;
  /* --outlineSize: 3px; */
}
:root {
  --borderColor: var(--borderOrangeColor);
  /* --borderColor: var(--borderBlackColor); */
  --outlineDarkColor: var(--brandColor);
  --outlineLightColor: var(--outlineOrangeColor);
}

/* *:focus-visible { outline: var(--outlineSize) var(--outlineStyle) var(--outlineDarkColor); } */
/* a:link:focus-visible {outline: var(--outlineSize) var(--outlineStyle) var(--outlineDarkColor);}    */
a.textLink:focus-visible {outline:3px var(--outlineStyle) var(--outlineDarkColor); padding: 3px ; }
header .globalNavBar:has(a:focus-visible) a:not(:focus-visible) { }
header .globalNavBar a:focus-visible {outline: var(--outlineSize) var(--outlineStyle) var(--outlineDarkColor); border: 3px solid white; }
main .navTab :is(.tabs-title>a:focus-visible) {  outline: var(--outlineSize) var(--outlineStyle) var(--outlineDarkColor); border: 3px solid white;
  border-bottom: 0px;}

.table_groupPicker th:has(input[type=checkbox]:focus-visible) {
  outline: var(--outlineSize) var(--outlineStyle) var(--outlineDarkColor) ; 
}

.tooltipIcon:focus-visible {outline: var(--outlineSize) var(--outlineStyle) var(--outlineDarkColor); border:0px solid var(--outlineDarkColor); padding: 2px 2px 2px 2px;}

[type=text]:focus-visible, /*empZip*/
[type=number]:focus-visible /*empSalary*/
{
  outline: var(--outlineSize) var(--outlineStyle) var(--outlineDarkColor);
}

[type=radio]:focus-visible /*disclaimer*/
{
  outline: none !important;
}

[type=range]:focus,  /*parking*/ 
[type=range]:focus-within,  /*parking*/ 
[type=range]:focus-visible /*parking*/ 
{
  outline: var(--outlineSize) var(--outlineStyle) var(--outlineDarkColor) ;
}

body button.button:focus-visible {  outline: var(--outlineSize) var(--outlineStyle) var(--outlineDarkColor);  }
body button.close-button:focus-visible {  outline: var(--outlineSize) var(--outlineStyle) var(--outlineDarkColor);  }
body .button:focus-visible, /*FilterPlans*/ 
body .button:focus-within
{
  /* background: var(--backgroundColor); */
  /* border:var(--outlineSize) var(--outlineStyle) var(--outlineDarkColor); */
outline: var(--outlineSize) var(--outlineStyle) var(--outlineDarkColor) ;
border:3px solid white;
}
.dropdownBtn:focus-visible, /*empPTPerc*/ 
.dropdownBtn:focus-within 
{
  background: var(--backgroundColor);
  /* border:var(--outlineSize) var(--outlineStyle) var(--outlineDarkColor); */
  outline: var(--outlineSize) var(--outlineStyle) var(--outlineDarkColor); 
}

.toggleBtn:has(input[type=radio]:focus-visible), /*empType*/
.dropdownBtnPane label:has(input[type=radio]:focus-visible),   /*dropdown-empPTPerc*/          
.gobbledyGook
{
  background: var(--backgroundColor);
  border:var(--outlineSize) var(--outlineStyle) var(--outlineDarkColor);
}

.resultsTable tr.subrow:focus-visible {outline: var(--outlineSize) var(--outlineStyle) var(--outlineDarkColor);}
.resultsTable tr.subrow:focus :is(th, td:not(.swatchColumn)){  background: white; }

.disclaimer_answers label:has(:focus-visible) {
  background: #FFC;
  border: 3px solid var(--outlineDarkColor); 
  outline: var(--outlineSize) var(--outlineStyle) var(--outlineDarkColor);
}