.rental-methods-container {
  font-size: 15px;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.rental-methods-container .full-width {
  width: 100%;
  display: flex;
  justify-content: center;
}

.rental-methods-container--style-2 {
  gap: var(--supercycle-spacing);
}


.rental-method-content p {
  padding: 0;
  margin-top: 0;
}

.rental-method-container {
  padding: var(--supercycle-spacing);
  position: relative;
  transition: background-color 0.3s;
  cursor: pointer;
  border: 1px solid var(--supercycle-border);
  border-radius: var(--supercycle-container-radius);
  background-color: var(--supercycle-background);
  color: var(--supercycle-text);
}



.rental-methods-container--style-1 .rental-method-container {
  border-radius: 0;
  border-top: 0px solid var(--supercycle-border);
}

.rental-methods-container--style-1 .rental-method-container:first-child {
  border-top-left-radius: var(--supercycle-container-radius);
  border-top-right-radius: var(--supercycle-container-radius);
  border-top: 1px solid var(--supercycle-border);
}

.rental-methods-container--style-1 .rental-method-container:last-child {
  border-bottom-left-radius: var(--supercycle-container-radius);
  border-bottom-right-radius: var(--supercycle-container-radius);
}

.rental-methods-container--style-3 .rental-method-container {
  border: none;
  border-bottom:  1px solid var(--supercycle-border);
  border-radius: 0;
  padding: var(--supercycle-spacing) 0;
}



.rental-method-container.active {
  cursor: default;
}

.rental-method-cheveron {
  position: absolute;
  width: 24px;
  height: 24px;
  right: 20px;
  top: 15px;
  /* transition: transform 0.3s; */
}

.rental-method-cheveron svg {
  width: 24px;
  height: 24px;
  height: auto;
}

.rental-method-content {
  display: none;
  margin-top: var(--supercycle-spacing-small);
}

.rental-method-container.active .rental-method-content {
  display: block;
}

.rental-method-container.active .rental-method-cheveron {
  transform: rotate(180deg);
  display: none;
}

.rental-method-cheveron.open {
  transform: rotate(180deg);
}

.rental-method-title {
  margin: 0;
  margin-bottom: 0px;
  font-size: 1.6em;
  color: var(--supercycle-text);
}

.rental-method-subtitle {
  margin: 0;
  margin-bottom: 0px;
  font-size: 1.1em;
}

.rental-method-options {
  display: flex;
  flex-direction: column;
  gap: var(--supercycle-spacing);
}

.rental-method-label {
  font-size: 1em;
  margin-bottom: var(--supercycle-spacing-small);
}

.rental-method-description {
  margin: 0;
  /* margin-bottom: 5px; */
  font-size: 0.8em;
}



.rental-periods-container {
  display: grid;
  grid-gap: var(--supercycle-spacing-small);
  grid-template-columns: repeat(2, 1fr);
}

.rental-period {
  border: 1px solid var(--supercycle-border);
  padding: var(--supercycle-spacing-small);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border-radius: var(--supercycle-input-radius);
  background-color: var(--supercycle-input-background);
  color: var(--supercycle-input-label);
}

select#rental-period-dropdown {
  width: 100%;
  border: 1px solid var(--supercycle-border);
  padding: var(--supercycle-spacing-small);
  border-radius: var(--supercycle-input-radius);
  color: var(--supercycle-input-label);
}


.rental-period.active {
  border: 1px solid var(--supercycle-input-label);
  background-color: var(--supercycle-input-label);
  color: var(--supercycle-input-background);
}

.rental-periods-container.calendar-rental-periods-container.calendar-rental-periods-container--dropdown {
  grid-template-columns: repeat(1, 1fr);
}

.rental-period:hover {

  cursor: pointer;
}

.rental-period-title {
  margin: 0;
  /* margin-bottom: 5px; */
  font-size: 1em;

}

.rental-period-price {
  font-size: 1em;

}

.rental-period-overview {
  font-size: 0.8em;
}

.rental-period p {
  margin: 0;
  line-height: 1;
}

#membership-join-button {
  margin-top: var(--supercycle-spacing);
}

.supercycle-product-notice-container {
  padding: var(--supercycle-spacing-small);
  margin-top: var(--supercycle-spacing-small);
  border-radius: 7px;
  border: 1px solid var(--supercycle-border);
  color: var(--supercycle-text);
  background: var(--supercycle-background);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;

  align-items: flex-start;
  gap: var(--supercycle-spacing-small);
  position: absolute;
  z-index: 100;
  left: var(--supercycle-spacing);
  right: var(--supercycle-spacing);
  display: flex;
}

.supercycle-product-notice-container:empty {
  display: none;
}

.supercycle-product-notice-container a {
  text-decoration: underline;
  color: var(--supercycle-text);
}

.supercycle-product-notice-container p {
  margin: 0;
  font-size: 0.9em;
}

.supercycle-product-notice-container .notification-icon {
  background: var(--supercycle-text);
  border-radius: 50%;
  height: 20px;
  width: 20px;
  display: inline-block;
  font-size: 10px;
  line-height: 20px;
  text-align: center;
  color: var(--supercycle-background);
}


.supercycle-product-notice-container.critical .notification-icon {
  background-color: #F74646;
}

.supercycle-product-notice-container.success .notification-icon {
  background: var(--supercycle-text);
}

.supercycle-credit-overview-title {
  margin: 0;
  margin-bottom: 1em;
}

.supercycle-progress-bar {
  position: relative;
  display: block !important;
  width: 100%;
  overflow: hidden;
  height: 8px;
  background-color: #e9e9e9;
  border-radius: 5px;
}

.supercycle-progress-bar .progress-bar-inner {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  width: 90%;
  background-color: rgba(var(--color-button), var(--alpha-button-background));
}

.supercycle-progress-bar .progress-bar-inner.progress-total {
  opacity: 0.7;
  transition: width 0.5s;
}

.progress-bar-text {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
}

.progress-bar-text p {
  margin: 0;
}


.calendar-datepicker-container {
  display: flex;
  flex-direction: row;
  margin-bottom: var(--supercycle-spacing);
  border: 1px solid var(--supercycle-border);
  ;
  border-radius: var(--supercycle-input-radius);
  color: var(--supercycle-input-label);
  background-color: var(--supercycle-input-background);
  transition: all 0.3s;
  cursor: pointer;
}




.calendar-datepicker-wrapper {
  margin: var(--supercycle-spacing) 0;
  display: none;
  opacity: 0.3;
}


.calendar-datepicker-wrapper.active {
  opacity: 1;
  display: block;
  position: absolute;
  z-index: 200;
  background: var(--supercycle-background);
  margin: -110px 0 0 0;
  border-radius: var(--supercycle-container-radius);
  border: 1px solid var(--supercycle-border);
  padding: var(--supercycle-spacing);
  margin-bottom: var(--supercycle-spacing);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  bottom: 0;
  left: -4px;
  right: -4px;
}

.rental-methods-container--style-3 .calendar-datepicker-wrapper.active {
  left: 0;
  right: 0;
}

@media screen and (min-width: 990px) {
  .calendar-datepicker-wrapper.active {
    right: 4px;
    left: 4px;
  }
  .rental-methods-container--style-3 .calendar-datepicker-wrapper.active {
    left: 0;
    right: 0;
  }
}

.calendar-datepicker-wrapper .calendar {
  padding: 0;
}

.calendar-datepicker-header h4 {
  font-size: 1.8em;
  margin: 0;
}

.calendar-datepicker-header p {
  font-size: 1em;
  margin: 0;

}




.datepicker-inputs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}



.datepicker-inputs input#datepicker-start {
  border: none;
}


.calendar-datepicker-buttons {
  justify-content: flex-end;
  display: flex;
  width: 100%;
  gap: var(--supercycle-spacing-small);
}


.calendar-datepicker-container.loading {
  /* Pls fill this out for me marc 😇 */
  opacity: 0.3;
}

.calendar-datepicker-container.disabled {
  /* Pls fill this out for me marc 😇 */
  opacity: 0.3;
}

.calendar-datepicker {
  flex: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--supercycle-border);
}

.calendar-datepicker:last-child {
  border-right: none;
}

.calendar-datepicker .calendar-datepicker-label {
  line-height: 1;
  font-size: 0.8em;
  padding: 0;
  margin: 0;
  margin-bottom: var(--supercycle-spacing-small);
}

.calendar-datepicker .calendar-datepicker-input {
  margin: 0;
  line-height: 1;
  border: none;
  cursor: pointer;
  font-size: 1em;
  background-color: transparent;
}

.calendar-datepicker .calendar-datepicker-input:focus {
  outline: none;
  box-shadow: none;
}


.calendar-infomation {
  text-align: center;
  margin: var(--supercycle-spacing-small) 0;
  font-size: 0.8em;
  display: none;
}

.calendar-summary-container {
  margin-top: var(--supercycle-spacing);
  display: grid;
  gap: var(--supercycle-spacing) var(--supercycle-spacing-small);
  grid-template-columns: 1fr auto;
}

.calendar-summary-container .calendar-summary-label {
  margin: 0;
  grid-column: 1;
  line-height: 1;

}

.calendar-summary-container .calendar-summary-label.emphasis {
  font-weight: 500;

}

.calendar-summary-container .calendar-summary-value.emphasis {
  font-weight: 500;
}

.calendar-summary-container .calendar-summary-value {
  margin: 0;
  grid-column: 2;
  line-height: 1;
  text-align: right;
}

.calendar-summary-container .calendar-summary-divider {
  margin: 0;
  grid-column: 1 / span 2;
  border-top: 1px solid var(--supercycle-border);
}

/* hacky calendar styles */

.container.range-plugin .calendar>.days-grid>.day.end,
.container.range-plugin .calendar>.days-grid>.day.start {
  background-color: var(--supercycle-input-background) !important;
  color: var(--supercycle-input-label) !important;
}

.calendar>.days-grid>.day:hover {
  border: 1px solid var(--supercycle-input-background) !important;
  color: var(--supercycle-input-background) !important;
}

.container.range-plugin .calendar>.days-grid>.day.in-range {
  background-color: var(--supercycle-input-background) !important;
}