/* ----------Toggle---------- */
.frankly-switch {
    position: relative !important;
    display: inline-block !important;
    min-width: 40px !important;
    height: 20px !important;
    margin: 0 5px 0 0!important; /* woocommerce adds margin to labels, we use important to trumph that*/
  }

  @media (min-width: 768px) {
    .frankly-switch {
      min-width: 52px !important;
      height: 28px !important;
      margin: 0 20px 0 0!important;
  }
}

.frankly-switch input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

.frankly-switch-container {
  display: flex !important;
  align-items: center !important;
}

.frankly-slider {
    position: absolute !important; 
    cursor: pointer !important; 
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: var(--frankly-toggle-background) !important; /* Background color */
    -webkit-transition: .4s !important;
    transition: .4s !important;
    width: 36px !important;
}

@media (min-width: 768px) {
  .frankly-switch-container {
    margin-left: 13px !important;
  }
  .frankly-slider {
    width: 52px !important;
  }
}

/* This is the circle that indicates the state */
.frankly-slider:before {
    position: absolute !important;
    content: " " !important;
    height: 8px !important;
    width: 16px !important;
    left: 2px !important;
    bottom: 2px !important;
    background-color: var(--frankly-toggle-circle) !important; /* Circle color */
    -webkit-transition: .4s !important;
    transition: .4s !important;
    border-radius: 50% !important;
    text-align: center !important;
    padding:4px 0 !important;
    box-sizing: content-box !important;
}

@media (min-width: 768px) {
  .frankly-slider:before {
    height: 14px !important;
    width: 22px !important;
    left: 3px !important;
    bottom: 3px !important;
  }
}

.frankly-radio-btn:checked + .frankly-slider {
    background-color: var(--frankly-toggle-background-checked) !important;
}


.frankly-radio-btn:checked + .frankly-slider:before {
    -webkit-transform: translateX(16px) !important;
    -ms-transform: translateX(16px) !important;
    transform: translateX(16px) !important;
    content: url("../img/checkmark.svg") !important;
    
    
    background-color: var(--frankly-toggle-circle-checked) !important; /* Circle color when checked */
  }
  
.frankly-slider {
    border-radius: 34px !important;
}
@media (min-width: 768px) {
  .frankly-radio-btn:checked + .frankly-slider:before {
    content: url("../img/checkmarkBig.svg") !important;
    -webkit-transform: translateX(24px) !important;
    -ms-transform: translateX(24px) !important;
    transform: translateX(24px) !important;
    font-size: 13px !important; /* Checkmark size */
    
    line-height: 21px !important; /* Align the checkmark vertically */
  }
}


/* --------------------------------- */

/* -------- Header -------- */
.frankly-header {
  font-size: 2em !important;
  line-height: 30px !important;
  font-weight: 400 !important;
  margin: 0 !important;
  color: #5B5B5B !important;
}
.frankly-logo-header-wrap {
  display: flex !important;
  align-items: center !important;
  margin-top: 5px !important;
}
.frankly-header-info {
  font-size: 2em !important;
  font-weight: 700 !important;
  margin: 20px 0 10px 0 !important;
}
@media (min-width:768px) {
  .frankly-logo-header-wrap {
    margin-top:7px !important;
  }
}
/* [data-frankly-theme = "dark"] .frankly-header {
  color: var(--frankly-dark-text);
}

[data-frankly-theme = "light"] .frankly-header {
  color: var(--frankly-light-text);
} */
/* ------------------------- */

/* -------- Coverage by ---------- */
.frankly-coverage-by {
  font-size: 1.375em !important;
  font-weight: 700 !important;
  margin: 0 !important;
  padding: 2px 0 0 10px !important;
}

[data-frankly-theme = "dark"] .frankly-coverage-by {
  color: var(--frankly-dark-text) !important;
}

[data-frankly-theme = "light"] .frankly-coverage-by {
  color: var(--frankly-light-text) !important;
}
/* -------------------------------- */

/* ------- Product Qty. ---------- */
.frankly-quantity-wrap {
  display: flex !important;
  justify-content: right !important;
  /* position: absolute !important;
  top: 0 !important;
  right: 0 !important; */
}
.frankly-product-quantity {
  display: flex !important;
  justify-content: space-between !important;
  width: 50px !important;
  height: 16px !important;
  /* border: solid 1px #6d6d6d1e !important;  */
  border-radius: 7px !important;
  background: white !important;
  background: #3E3E3E !important;
  box-shadow: 1px 1px 4px rgba(0,0,0,.2) !important;
  margin: 0 9px 10px 0 !important;
}
.frankly-product-quantity-expanded {
  margin: 0 22px 10px 0 !important;
}

@media (min-width: 768px) {
  .frankly-product-quantity {
    width: 86px !important;
    height: 24px !important;
    border-radius: 10px !important;
    margin: 0 0 10px 0 !important;
  }
  .frankly-product-quantity-expanded {
    margin: 0 22px 10px 0 !important;
  }
}

.frankly-product-quantity.frankly-disable-quantity {
  background: #828282 !important;
  box-shadow: none !important;

}

.frankly-product-quantity.frankly-disable-quantity button:hover {
  cursor: default  !important;
}

.frankly-product-quantity.frankly-disable-quantity input {
  color: white !important;
}


button.frankly-plus-btn.frankly-plus {
  border-left: solid 1px rgba(255, 255, 255, 0.24) !important;
}

button.frankly-minus-btn.frankly-minus {
  border-right: solid 1px rgba(255, 255, 255, 0.24) !important;
}

.frankly-product-quantity button {
  width: 100% !important;
  border: none !important;
  background: none !important;
  color: white !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1em !important;
  border-radius: 6px !important;
  text-align: center !important;
  font-weight: 600;
}

.frankly-product-quantity button:focus {
  outline: none !important;
}

.frankly-product-quantity button:hover {
  cursor: pointer !important;
}

.frankly-product-quantity input {
  text-align: center !important;
  border: none !important;
  width: 100% !important;
  background: none !important;
  margin: 0 auto !important;
  padding: 3px 0 0 0 !important;
  color: white !important;
  font-size: 1em !important;
}

.frankly-product-quantity.frankly-disable-quantity button {
  color: black !important;
}

/* ------------------------------- */

/* -------- Product Container -------- */
.frankly-products-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.frankly-scroll-wrapper {
  width: 94% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 3% !important;
  min-height: 20vh !important;
  max-height: 45vh !important;
  overflow-y: auto !important;
  box-sizing: content-box !important;
  
  /* Firefox */
  scrollbar-color: rgb(142, 142, 142) rgba(62, 62, 62, 0) !important;
  scrollbar-width: thin !important;
}
/* Chrome, Edge, Safari, Opera */
.frankly-scroll-wrapper::-webkit-scrollbar {
  width: 2px !important;
}
.frankly-scroll-wrapper::-webkit-scrollbar-track {
  background: rgba(62, 62, 62, 0) !important; 
}
.frankly-scroll-wrapper::-webkit-scrollbar-thumb {
  background: rgb(142, 142, 142) !important;
}


@media (min-width: 768px) {
  .frankly-products-container {
    width: 90% !important;
    margin-top: 20px !important;
  }
  .frankly-scroll-wrapper {
    width: 96% !important;
    padding: 0 2% !important;
  }
}

@media (min-width: 992px) {
  .frankly-products-container {
    width: 80% !important;
  }
}

.frankly-product-container{
  display: flex !important;
  border-radius: 6px !important;
  padding: 0 8px !important;
  margin: 8px 0 !important;
  justify-content: space-between !important;
  width: 100% !important;
  box-sizing: border-box !important;
  box-shadow: 2px 2px 6px rgba(0,0,0,.1) !important;
}


@media (min-width: 768px) {
  .frankly-product-container {
    box-shadow: 2px 2px 8px rgba(0,0,0,.2) !important;
    padding: 10px 50px !important;
    justify-content: center !important;
    margin: 20px 0 !important;
    border-radius: 12px !important;
  }
}

.frankly-product-left-col {
  display: flex !important;
  align-items: center !important;
  width: 50% !important;
}

.frankly-product-right-col {
  display: inline-flex !important;
  align-items: end !important;
  justify-content: start !important;
  width: 50% !important;
}

@media (min-width: 768px){
  .frankly-product-right-col {
    display: flex !important;
    align-items: end !important;
    justify-content: end !important;
  }
}

@media (min-width: 768px){
  .frankly-product-right-col {
    align-items: center !important;
  }
}

.frankly-product-right-col > span > h3 {
  font-size: 1.75em !important;
  font-weight: 700 !important;
  margin: 5px 0px 0 0 !important;
  padding: 0 !important;
}

.frankly-product-right-col > span > p {
  margin: 0 !important;
  padding: 0 !important;
}

[data-frankly-theme = "light"] .frankly-product-container {
  background: var(--frankly-product-background-light) !important;
}

[data-frankly-theme = "dark"] .frankly-product-container {
  background: var(--frankly-product-background-dark) !important;
}

.frankly-product-name {
  font-size: 1.625em !important;
  line-height: 1.1em !important;
  font-weight: 300 !important;
  margin: 0 !important;
  padding-top: 10px !important;
  overflow: hidden !important;
  position: relative !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: block !important;
}

@media (min-width: 768px) {
  .frankly-product-name {
    font-size: 1.2em !important;
    padding-top: 11px !important;
  }
}


[data-frankly-theme = "light"] .frankly-product-name {
  color: var(--frankly-light-text) !important;
}

[data-frankly-theme = "dark"] .frankly-product-name {
  color: var(--frankly-dark-text) !important;
}

.frankly-product-name > span {
  font-weight: 600 !important;
}

.frankly-price-text {
  font-size: 1.375em !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  width: fit-content !important;
  padding-top: 5px !important;
}

/* .frankly-qty-price {
  width: 150px !important;
  justify-content: space-between !important;
  display: flex !important;
  align-items: center !important;
  margin-left: 10px !important;
}

@media (min-width: 768px) {
  .frankly-qty-price {
    width: 230px !important;

  }
} */

.frankly-expanded-product {
  padding: 0 !important;
  margin: 5px 0 0 45px !important;
}
.frankly-tick-mark {
  margin-right: 5px !important;
}

.frankly-expanded-product-with-quantity {
  margin-top: -26px !important;
}

.frankly-expanded-product p {
  font-size: 1.1em !important;
  font-weight: 200 !important;
  padding: 0 !important;
  margin: 0 !important;
  /* vertical-align: bottom !important; */
}
@media (min-width:768px) {
  .frankly-expanded-product {
    margin: 0 0 0 85px !important;
  }
  .frankly-expanded-product p {
    font-size: 0.9em !important;
  }
  .frankly-expanded-product-with-quantity {
    margin-top: -26px !important;
  }
}

.frankly-no-binding {
  margin: 5px 0 7px 0 !important;
  display: block !important;
}

.frankly-mp-paragraph {
  display: flex !important;
  align-items: center !important;
}

.frankly-no-binding-text {
  font-size: 1.1em !important;
  font-weight: 400 !important;

}
.frankly-terms-text {
  font-size: 0.9em !important;
  line-height: 0.6em !important;
}

.frankly-no-binding a {
  font-weight: 400 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}

.frankly-mp-logo {
  width: 60px !important;
}
@media (min-width: 768px) {
  .frankly-mp-logo {
    width: 80px !important;
    height: 24px !important;
  }
  .frankly-terms-text {
    font-size: 0.8em !important;
    line-height: 1em !important;
  }
}




  /* ------------------------------- */

/* --------- Modal --------- */
.frankly-modal {
  font-family: var(--frankly-font)!important;
  display: none; /* Hidden by default */
  position: fixed !important; /* Stay in place */
  z-index: 9999 !important; /* Sit on top */
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important; /* Full width */
  height: 100vh !important; /* Full height */
  /*background-color: rgb(0, 0, 0) !important;*/
  /*background-color: rgba(255, 255, 255, 0.8) !important; */
  font-size: 8px !important;
  background: rgba(222,222,222,0.28) !important;
  /* Blur filter */
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  /* Blur transition fade in */
  transition: backdrop-filter 2s ease-in-out !important;
  overflow: auto !important;
  box-sizing: content-box !important;
}

/* Font size on  lg */
@media (min-width: 768px) {
  .frankly-modal {
    font-size: 16px !important;
  }
}

.frankly-modal-auto-centering {
  display: flex !important;
  height: 80vh !important;
  padding: 7vh 0 13vh 0 !important;
  box-sizing: content-box !important;
}

/* Font size on  lg */
/* @media (min-width: 992px) {
  .frankly-modal {
    font-size: 14px !important;
  }
} */

/* Font size on  xl */
/* @media (min-width: 1200px) {
  .frankly-modal {
    font-size: var(--frankly-font-size) !important;
  }
} */

.frankly-modal-content {
  margin: 0 auto !important;
  align-self: safe center !important;
  width: 95% !important;
  border-radius: 15px !important;
  /*background: #D4D2D0 !important;*/
  /*background: var(--frankly-modal-background) !important;*/
  position: relative !important;
  max-width: 1348px !important;
  /* max-height: 90vh !important; */
}

@media (min-width: 768px) {
  .frankly-modal-content {
    width: 80% !important;
    box-shadow: 2px 2px 8px rgba(0,0,0,.2) !important;
    
  }
}

.frankly-bg-blur {
  background: rgba(222,222,222,0.28) !important;
  /* Blur filter */
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  /* Blur transition fade in */
  transition: backdrop-filter 2s ease-in-out !important;
}

.frankly-gradient-layer {
  /* background: linear-gradient(164deg, rgba(230, 236, 234, 0.30) 0%, rgba(231, 211, 213, 0.00) 100%) !important; */
  background: linear-gradient(164deg, rgba(230, 236, 234, 0.3) 0%, rgba(231, 211, 213, 0.0) 100%) !important;
  border-radius: 15px !important;
  /* max-height: 90vh !important; */
  overflow: hidden !important;
}

.frankly-white-layer {
  /* background: rgba(255, 255, 255, 0.1) !important; */
  background: rgba(200, 200, 200, 0.4) !important;
  border-radius: 15px !important;
  padding: 10px 10px 35px 10px !important;  
  /* max-height: calc(90vh - 45px) !important;
  overflow: hidden !important; */
}
.frankly-white-layer-less-padding {
  padding: 10px 10px 20px 10px !important;
}

@media (min-width: 768px) {
  .frankly-white-layer {
    padding: 10px 10px 20px 10px !important;
    /* max-height: calc(85vh - 50px) !important; */
  }
  .frankly-white-layer-less-padding {
    padding: 10px 10px 10px 10px !important;
  }
}



/* ----------------------------- */

/* -------- Frankly Products Description -------- */

.frankly-products-description {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin: 20px 0 10px 0 !important;
  background: #eeeeee !important;
  border-radius: 6px !important;
  box-shadow: 2px 2px 6px rgba(0,0,0,.1) !important;
  width: 100% !important;
}

@media (min-width: 768px) {
  .frankly-products-description {
    border-radius: 12px !important;
    margin: 0 0 10px 0 !important;
    box-shadow: 2px 2px 8px rgba(0,0,0,.2) !important;
  }
}

.frankly-products-description > h3 {
  font-size: 2.8em!important;
  text-align: center !important;
  font-weight: 400 !important;
  margin: 10px 0 5px 0 !important;

}

@media (min-width: 768px) {
  .frankly-products-description > h3 {
    font-size: 2em!important;
  }
}

.frankly-price-wrap {
  text-align: center !important;
  margin-top: 5px !important;
}
.frankly-price-wrap h2{
  line-height: 1.1em !important;
}
@media (min-width: 768px) {
  .frankly-price-wrap h2 {
    display: inline-block;
  }
}

.frankly-products-description > h3 > .frankly-all-risk {
  font-weight: 600 !important;
  margin-top: 12px !important;
}

.frankly-first-price {
  font-weight: 600 !important;
  font-size: 1.5em !important; /*this size is relative to its parent which has a set size of 1.5em. Which means if this size is 2em it will be 50% bigger than other font-sizes that are 2em*/
}

.frankly-products-description h2 {
  font-weight: 400 !important; /* 600 doesnt seem to work well with this font*/
  font-size: 1.7em !important;
  margin:0 !important;
}

@media (min-width: 768px) {
  .frankly-products-description h2 {
    font-size: 1em !important;
  }
}

.frankly-products-description .frankly-monthly {
  font-size: 0.55em !important;
  font-weight: 400 !important;
}
.frankly-product-mobile {
  overflow: hidden !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.frankly-product-mobile-left-col {
  display: flex !important;
}

.frankly-product-mobile-right-col {
  display: flex !important;
  align-items: center !important;
}

.frankly-product-mobile-right-col h2 {
  font-size: 2em !important;
  font-weight: 700 !important;
  margin-right: 13px !important;
}

.frankly-currency-postfix {
  font-size: 0.6em !important;
  font-weight: 400 !important;
  line-height: 2em !important;
  margin-top: 6px !important;
}

@media (min-width:768px) {
  .frankly-product-mobile-right-col h2 {
    font-size: 1.2em !important;
  }
  .frankly-currency-postfix {
    font-size: 0.75em !important;
  }
}

.frankly-product-mobile .frankly-product-name{
  max-width: 40vw !important;
}

.frankly-product-mobile p {
  margin: 0 !important;
}

.frankly-product-mobile h3 {
  font-size: 1.75em !important;
  line-height: 1.1em !important;
  font-weight: 500 !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media (min-width: 768px) {
  .frankly-product-mobile h3 {
    font-size: 1.2em !important;
  }
}

.frankly-bullet {
  min-width: 9px !important;
}


/*  ----------------------------- */


/* -------- Tagline -------- */
.frankly-tagline {
  display: inline-flex !important;
  align-items: baseline !important;
}
/* ----------------------------- */

/* -------- Frankly Modal Close -------- */
.frankly-info {
  margin: auto !important;
}
@media (min-width: 768px) {
  .frankly-info {
    width: 90% !important;
    margin-top: 20px !important;
  }
}

@media (min-width: 992px) {
  .frankly-info {
    width: 80% !important;
  }
}

.frankly-info-button {
  /* Bottom right  */
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  margin: 5px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1px solid #0D0D0D !important;
  height: 20px !important;
  width: 20px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: #0D0D0D !important;
  text-align: center !important;
  font-family: var(--frankly-font) !important;
  cursor: pointer !important;
}

.frankly-modal-close {
  position: absolute !important;
  top: 5px !important;
  right: 5px !important;
  margin:0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}

.frankly-modal-close svg {
  height: 20px !important;
  width: 20px !important;
}

@media (min-width: 768px) {

  .frankly-info-button {
    height: 30px !important;
    width: 30px !important;
    font-size: 15px !important;
  }
  .frankly-modal-close {
    top: 5px !important;
    right: 5px !important;
  }
  .frankly-modal-close svg {
    height: 30px !important;
    width: 30px !important;
  }
  .frankly-white-layer {
    border-radius: 20px !important;
  }
  .frankly-gradient-layer {
    border-radius: 20px !important;
  }
  .frankly-modal-content {
    border-radius: 20px !important;
  }
}

/* @media (min-width: 1200px) {
  .frankly-modal-close svg {
    height: 45px !important;
    width: 45px !important;
  }
} */

.frankly-modal-close:hover {
  cursor: pointer !important;
}
/* -------------------------------------- */

/* -----------Frankly Info---------------*/

.frankly-info-header-box h3 {
  font-size: 1.8em !important;
  font-weight: 600 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
  display: block !important;
}

.frankly-info-header-box p {
  font-size: 1.5em !important;
  font-weight: 400 !important;
  margin: 5px 0 0 0 !important;
  padding: 0 !important;
  text-align: center !important;
  line-height: 130% !important;
  display: block !important;
}
@media (min-width:768px) {
  .frankly-info-header-box p {
    font-size: 1.2em !important;
    max-width: 450px !important;
    margin: 10px auto 0 auto !important;
  }
}

.frankly-info-wrap {
  background: var(--frankly-product-background-light) !important;
  border-radius: 6px !important;
  padding: 10px !important;
  margin: 8px 0 !important;
}

.frankly-info-card h3 {
  margin:0 !important;
  padding: 0 !important;
  font-size: 1.7em !important;
  font-weight: 500 !important;
}
.frankly-info-collapse-button {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
@media (min-width:768px) {
  .frankly-collapse-arrow {
    height:20px !important;
    width: 20px !important;
  }
  .frankly-info-card h3 {
    font-size: 1.2em !important;
    font-weight: 500 !important;
  }
  .frankly-info-wrap {
    padding: 15px 30px !important;
  }
}

.frankly-info-card-collapsed {
  display: none !important;
}
.frankly-info-card-collapsable{
  margin-top:5px !important;
}
.frankly-coverage-info-wrap {
  margin-top:10px !important;
}
.frankly-info-header-box {
  margin-top:20px !important;
}

.frankly-coverage-info {
  font-size: 1.5em !important;
  font-weight: 400 !important;
  line-height: 12px !important;
  margin: 10px 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  max-width: 480px !important;
}
.frankly-coverage-info p {
  margin: 0 !important;
  padding: 0 !important;
}
.frankly-coverage-info svg {
  margin-right:5px !important;
  margin-bottom: 2px !important;
}
@media (min-width:768px) {
  .frankly-coverage-info-wrap-hearts {
    display: flex !important;
    justify-content: space-between !important;
  }
  .frankly-coverage-info {
    font-size: 1em !important;
    line-height: 24px !important;
    margin: 2px 0 !important;
  }
}
.frankly-faq-link {
  color: #818181 !important;
  font-size: 1.3em !important;
  font-weight: 300 !important;
  text-decoration: none !important;
  padding-top: 5px !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
}
.frankly-faq-link:hover {
  color:black !important;
}
.frankly-faq-link:hover svg {
  fill: black !important;
}

.frankly-faq-link svg {
  height: 12px !important;
  width: 12px !important;
  margin: 0 0 3px 6px !important;
  fill: #818181 !important;
}

@media (min-width:768px) {
  .frankly-faq-link {
    font-size: 0.9em !important;
    padding-top:8px !important;
  }
  .frankly-faq-link svg {
    margin: 0 0 3px 10px !important;
    height: 14px !important;
    width: 14px !important;
  }
}

.frankly-info-back-button {
  display: block !important;
  margin: 10px auto 0 auto !important;
  height: 38px !important;
  width: 174px !important;
  border:none !important;
  background:black !important;
  color:white !important;
  font-size: 2.4em !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  font-family: inherit !important;
  text-align: center !important;
}
@media (min-width:768px) {
  .frankly-info-back-button {
    width: 242px !important;
    height: 52px !important;
    font-size: 1.7em !important;
    border-radius: 11px !important;
  }
}
/* -------------------------------------- */

.frankly-plus {
  margin-right: 4px !important;
  color: black !important;
  font-weight: 700 !important;
}