:root {
    --darkest-grey: #343E46;
    --darkest-grey-rgb: 52,62,70;
    --massage-green: #B8D149;
    --dark-grey: #586A77;
    --dark-grey-30: rgba(88, 106, 119, 0.3);
    --light-grey: #E6E5E5;
    --light-grey-50: rgba(230,229,229,0.5);
    --dark-grey-20: rgba(88,106,119,0.2);
    --mid-tone-grey: #798893;
    --mid-tone-grey-rgb: 121 136 147;
    --massage-green-20: rgba(184, 209, 73, 0.2);
}

.membership-calculator-wrapper {

}

.membership-calculator-wrapper .flex-wrap {
    display: flex;
}

.membership-calculator-wrapper .flex-wrap .grey-bg {
    background: var(--light-grey-50);
    flex: 1;
    border-radius: 25px 0px 0px 25px;
}

.membership-calculator-wrapper .flex-wrap .dark-grey-bg {
    background: var(--darkest-grey);
    flex: 0;
    border-radius: 0px 25px 25px 0px;
    min-width: 450px;
}

.membership-calculator-wrapper .flex-wrap .grey-bg,
.membership-calculator-wrapper .flex-wrap .dark-grey-bg {
    padding: 35px;
}

.membership-calculator-wrapper .flex-wrap .dark-grey-bg p,
.membership-calculator-wrapper .flex-wrap .dark-grey-bg h6 {
    color: #ffffff;
}

/* health benefits remaining */

.membership-calculator-wrapper .currency-input {
  display: flex;
  align-items: center;
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  background: #fff;
  margin-bottom: 20px;
}

.membership-calculator-wrapper .currency-input .currency-symbol {
  background: var(--massage-green);
  color: var(--darkest-grey);
  font-weight: bold;
  font-size: 20px;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 55px;
  width: 55px;
}

.membership-calculator-wrapper .currency-input input {
    border: none;
    outline: none;
    padding: 10px 15px;
    font-size: 18px;
    flex: 1;
    color: #333;
    min-height: 55px;
}

.membership-calculator-wrapper .currency-input input::placeholder {
  color: #aaa;
}

.membership-calculator-wrapper .currency-input input:focus {
  outline: none;
}

/* employer contribution */

.membership-calculator-wrapper .js-segmented-select {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

.membership-calculator-wrapper .segmented-control {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}

.membership-calculator-wrapper .segmented-control .segmented-control__btn:nth-of-type(1) {
    border-radius: 5px 0px 0px 5px;
}

.membership-calculator-wrapper .segmented-control .segmented-control__btn:nth-last-of-type(1) {
    border-radius: 0px 5px 5px 0px;
}

.membership-calculator-wrapper .segmented-control__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 0;
  border: none;
  background: #fff;
  color: #2C2C2C;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.membership-calculator-wrapper .segmented-control__btn.is-active {
  background: #B8D149;
  color: #234A5D;
  border-color: #B8D149;
}

.membership-calculator-wrapper .segmented-control__btn:focus-visible {
  outline: 3px solid rgba(184,209,73,0.4);
  outline-offset: 2px;
}

/*@media (max-width: 720px) {
  .membership-calculator-wrapper .segmented-control {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  }
}*/

.membership-calculator-wrapper .small-text {
    font-size: 15px;
    line-height: 18px;
}

.membership-calculator-wrapper div#calculatorMessage {
    margin-bottom: 20px;
}

.membership-calculator-wrapper div#calculatorMessage p strong {
    font-size: 22px;
    margin-bottom: 9px;
    display: inline-block;
}

/* dropdowns */

.membership-calculator-wrapper select#monthToStart,
.membership-calculator-wrapper select#planMonths {
    width: 100%;
    min-height: 55px;
    border: none;
    border-radius: 6px;
    padding: 15px;
    font-size: 18px;
}

.membership-calculator-wrapper .bottom-row {
    margin-bottom: 25px;
}

.membership-calculator-wrapper button#doCalculation {
    border: none !important;
    transition: all .5s ease;
}

.membership-calculator-wrapper .select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.membership-calculator-wrapper .select-wrapper .inputField {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding-right: 2rem;
  background-color: #fff;
}

.membership-calculator-wrapper .select-wrapper .inputField::-ms-expand { display: none; }

.membership-calculator-wrapper .select-wrapper::after {
  content: "\f0d7";
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 25px;
  color: #4B5C66;
  z-index: 2;
}

.membership-calculator-wrapper .select-wrapper .inputField:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(184,209,73,.3);
  border-color: #B8D149;
}

@media (min-width: 1367px) and (max-width: 1450px) {

}

@media (min-width: 1200px) and (max-width: 1366px) {

}

@media (min-width: 992px) and (max-width: 1199px) {
    .membership-calculator-wrapper .flex-wrap .dark-grey-bg {
        min-width: 355px;
    }

    .membership-calculator-wrapper .flex-wrap .grey-bg, .membership-calculator-wrapper .flex-wrap .dark-grey-bg {
        padding: 25px;
    }

    .membership-calculator-wrapper .margin-btm-mobile {
        margin-bottom: 15px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .membership-calculator-wrapper .flex-wrap {
        display: block;
    }

    .membership-calculator-wrapper .flex-wrap .grey-bg, 
    .membership-calculator-wrapper .flex-wrap .dark-grey-bg {
        padding: 20px;
    }

    .membership-calculator-wrapper .flex-wrap .grey-bg {
        border-radius: 25px 25px 0px 0px;
    }

    .membership-calculator-wrapper .flex-wrap .dark-grey-bg {
        border-radius: 0px 0px 25px 25px;
        min-width: 100%;
    }

    .membership-calculator-wrapper .segmented-control {
        grid-template-columns: repeat(5, 1fr);
        gap: 5px;
    }

    .membership-calculator-wrapper .segmented-control .segmented-control__btn:nth-of-type(1) {
        border-radius: 5px 0px 0px 0px;
    }

    .membership-calculator-wrapper .segmented-control .segmented-control__btn:nth-last-of-type(1) {
        border-radius: 0px 0px 5px 5px;
    }

    .membership-calculator-wrapper .margin-btm-mobile {
        margin-bottom: 15px;
    }
}

@media (max-width: 767px) {
    .membership-calculator-wrapper .flex-wrap {
        display: block;
    }

    .membership-calculator-wrapper .flex-wrap .grey-bg, 
    .membership-calculator-wrapper .flex-wrap .dark-grey-bg {
        padding: 20px;
    }

    .membership-calculator-wrapper .flex-wrap .grey-bg {
        border-radius: 25px 25px 0px 0px;
    }

    .membership-calculator-wrapper .flex-wrap .dark-grey-bg {
        border-radius: 0px 0px 25px 25px;
        min-width: 100%;
    }

    .membership-calculator-wrapper .segmented-control {
        grid-template-columns: repeat(5, 1fr);
        gap: 5px;
    }

    .membership-calculator-wrapper .segmented-control .segmented-control__btn:nth-of-type(1) {
        border-radius: 5px 0px 0px 0px;
    }

    .membership-calculator-wrapper .segmented-control .segmented-control__btn:nth-last-of-type(1) {
        border-radius: 0px 0px 5px 5px;
    }

    .membership-calculator-wrapper .margin-btm-mobile {
        margin-bottom: 15px;
    }
}