/*--layout_plan_details_plan_features base style--*/
.layout-plan-details-plan-features div .in-plan-group.yes {
	display: base-block;
	width: 20px;
	height: 20px;
	background-image: url('/images/icons/check.svg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.layout-plan-details-plan-features .table-plan-markets thead tr th,
.layout-plan-details-plan-features .table-plan-markets tbody tr td {
	text-align: center;
}
/*--layout_plan_details_good_for base style--*/
.layout-plan-details-good-for div .in-plan-group.yes {
	display: base-block;
	width: 20px;
	height: 20px;
	background-image: url('/images/icons/check.svg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.layout-plan-details-good-for .table-plan-markets thead tr th,
.layout-plan-details-good-for .table-plan-markets tbody tr td {
	text-align: center;
}
/*--layout_plan_page_plans_compared base style--*/
.layout-plan-page-plans-compared .table-plan-pros thead tr th,
	.layout-plan-page-plans-compared .table-plan-pros tbody tr td {
		text-align: center;
	}

/*--layout_commercial_grid_provider_rates_at_term base style--*/
.layout-commercial-grid-provider-rates-at-term .hidden-plan, .layout-commercial-grid-provider-rates-at-term .filtered-plan {
	display: none;
}
.layout-commercial-grid-provider-rates-at-term .sample-plan-container {
	display: grid;
	grid-template-columns: .5fr .5fr 1.5fr;
	grid-template-areas: 'planProvider planTerm planPrice';
}
/*--price alert popup base style--*/
/* Start popup hidden until a trigger fires */
#priceAlertOverlay { display: none; }
#priceAlertOverlay.price-alert-visible { display: flex; }
/* Overlay */
.price-alert-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20000;
}
/* Popup */
.price-alert-modal{
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  max-width: 420px;
  width: 95%;
  padding: 80px 30px 50px;
  position: relative;
}
  .price-alert-modal h2{
    color: #0F2F8D;
    font-size: 30px;
  }
  .price-alert-modal .btn{
    background: #0F2F8D;
    color: #fff;
  }
  .price-alert-modal .btn:hover{
    border-color: #0F2F8D;
    background: transparent;
    color:#212529;
  }
  .price-alert-modal .btn:hover svg path{
    fill: #212529;
  }
  .price-alert-modal .price-alert-close{
    position:absolute;
    top:12px;
    right:12px;
    width:28px;
    height:28px;
    border-radius:50%;
    background:#72BFF7;
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    padding:0;
  }
    .price-alert-modal .top-title-price-alert{
      position: absolute;
      top:-12px;
      width: 300px;
      left: 50%;
      transform: translateX(-50%);
    }
    .price-alert-modal .price-alert-close .material-icons{
      color:#fff;
      font-size:18px;
    }
    .price-alert-modal .error-message{
      font-size: 12px;
      color: #d31f26;
      margin-top: 4px;
    }
    .price-alert-modal input::placeholder,
    .price-alert-modal select::placeholder {
      font-size: 16px;
    }
    .price-alert-modal .form-control,
    .price-alert-modal .form-select{
      padding: .5rem .75rem !important;
      line-height: 100%;
      border-radius: 5px !important;
      border:3px solid #dee2e6;
    }
    .price-alert-modal .form-select{
      line-height: 120%;
    }
    .utilityrates_2025 .price-alert-modal .form-select{
      line-height: 100%;
    }
    .utilityrates_2025_optimize .price-alert-modal .form-select{
      line-height: 120%;
    }
    .utilityrates_2025 .price-alert-modal .form-select,
    .lightning_erllc_2022 .price-alert-modal .form-select{
      padding: .75rem .75rem !important;
    }
    .utilityrates_2025_optimize .price-alert-modal .form-select{
      padding: .5rem .75rem !important;
    }
    .lightning_erllc_2022 .price-alert-modal h2{
      font-size: 25px;
    }
    /*remove arrow on number field Chrome, Edge, Safari*/
    .price-alert-modal input[type=number]::-webkit-inner-spin-button,
    .price-alert-modal input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
@media (max-width: 980px){
  .price-alert-modal{
    padding:65px 20px 30px;
  }
  .price-alert-modal .form-control, .price-alert-modal .form-select {
    padding: .3rem .75rem !important;
  }
  .price-alert-modal .form-select{
      line-height: 150%;
  }
  .price-alert-modal h2 {
    font-size: 25px;
  }
  .price-alert-modal .form-label {
      margin-bottom: 0rem;
  }
}
@media (max-width: 320px){
  .price-alert-modal{
    padding:50px 20px 30px;
  }
  .price-alert-modal #priceAlertForm .mb-3 {
    margin-bottom: 5px !important;
  }
  .price-alert-modal #priceAlertForm .mt-3 {
    margin-top: 5px !important;
  }
}
/*-- plan details base style--*/


.plandetails-modal .multi-badge .plan-term,
.plandetails-unfold-content .plan-term {
    grid-area: auto;
}
.plandetails-modal .multi-badge,
.plandetails-unfold-content .multi-badge{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    padding: 0;
}

@media (min-width: 768px) {
.plandetails-modal .multi-badge,
.plandetails-unfold-content  .multi-badge{
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
}
}
/* Plan Details - Energy Guide For Cost Range of Similar Plan (SafeRates)
-----------------------------------------------*/
.rate-bar-wrapper {
      max-width: 900px;
      margin: 100px auto 20px;
}
/* ----- BAR ----- */
    .rate-bar-wrapper .rate-bar-track {
      position: relative;
      height: 15px;
      border-radius: 999px;
      background: #d8ecf9;            /* light blue full bar */
      overflow: visible;
    }

    .rate-bar-wrapper .rate-bar-filled {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      background: #0F2F8D;
      border-radius: 999px 0 0 999px;
    }
/* ----- YOUR PLAN POINTER ----- */
    .rate-bar-wrapper .plan-pointer {
      position: absolute;
      top: -46px;
      transform: translateX(-50%);
      text-align: center;
      font-size: 14px;
      font-weight: 600;
      
      white-space: nowrap;
    }
    .rate-bar-wrapper .triangle{
        color:#0F2F8D;
    }
    .rate-bar-wrapper .plan-pointer .triangle {
      margin: 6px auto 0;
      width: 0;
      height: 0;
      border-left: 9px solid transparent;
      border-right: 9px solid transparent;
      border-top: 16px solid #0F2F8D;
    }

/* ----- PERCENTILE MARKERS ----- */
    .rate-bar-wrapper .rate-marker {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 34px;
      border-radius: 999px;
      z-index: 2;
    }

/* ----- LABELS UNDER BAR (exact same axis) ----- */
    .rate-bar-wrapper .rate-labels {
      position: relative;
      margin-top: 0.9rem;
      height: 40px;
      font-size: 16px;
    }
    .rate-bar-wrapper .rate-label {
      position: absolute;
      top: 0;
      transform: translateX(-50%);
      text-align: center;
    }
    .rate-bar-wrapper .rate-label-start {
      left: 0;
      transform: none;
      text-align: left;
    }
    .rate-bar-wrapper .rate-label-end {
      right: 0;
      left: auto;
      transform: none;
      text-align: right;
    }
    .rate-bar-wrapper .rate-label small {
      display: block;
      font-size: 13px;
      color:var(--gray);
      line-height: 1.2;
    }
    .rate-bar-wrapper .rate-legend {
      margin-top: 2rem;
      font-size: 15px;
    }
    .rate-bar-wrapper .percentile-color{
      width: 40px;
      height: 8px;
      border-radius: 999px;
      display: inline-block;
      margin-right: 10px;
      vertical-align: middle;
    }
    .rate-bar-wrapper .percentile-green { background: #2f7f3d; }
    .rate-bar-wrapper .percentile-yellow { background: #f3c132; }


@media (max-width: 1100px) {
	.rate-bar-wrapper .plan-pointer-content{
		margin-right: 140px;
	}
	.rate-bar-wrapper .your-cost-under-45 .plan-pointer-content{
		margin-right: auto;
		margin-left: 140px;
	}
}
@media (max-width: 768px) {
    .rate-bar-wrapper .plan-pointer { font-size: 13px; top: -52px; }
    .rate-bar-wrapper .rate-labels { font-size: 12px; }
}
@media (max-width: 320px) {
    .rate-bar-wrapper .rate-labels { font-size: 8px; }
}

/*--section_simple_filter_grid base style--*/
.section-simple-filter-grid .hidden-plan, .section-simple-filter-grid .filtered-plan {
	display: none;
}