.member-subscription .row {
  margin-bottom: 10px;
}
.force-display {
  display: block !important;
}
.margin-top-40 {
  margin-top: 40px;
}
.margin-bottom-50 {
  margin-bottom: 50px;
}
.font-14 {
  font-size: 14px !important;
}
.calibre {
  font-family: Calibre, Sans-Serif !important;
}
.calibre {
  font-family: Calibre, Sans-Serif !important;
  font-weight: 400;
}
.text9B {
  color: #9b9b9b;
}
.button:active {
  background: #222;
}
.button__text {
  font-size: 120%;
  font-weight: 700;
  color: #fff;
  transition: all 0.2s;
}
.button--loading .button__text {
  visibility: hidden;
  opacity: 0;
}
.button--loading::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 4px solid transparent;
  border-top-color: #fff;
  border-radius: 50%;
  animation: button-loading-spinner 1s ease infinite;
}
@keyframes button-loading-spinner {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}
.block-heading {
  margin-bottom: 40px;
}
.no-margin {
  margin: 0;
}
@media (min-width: 992px) {
  .col-20-percent {
    -ms-flex: 0 0 18%;
    flex: 0 0 18%;
    max-width: 18%;
  }
  h3.card-title {
    min-height: 100px;
    margin-bottom: 0 !important;
  }
}
h3.card-title {
  margin-bottom: 8px;
}
h3.card-title.text-uppercase.text-center {
  font-size: 21px;
  font-weight: normal !important;
}
h3.first.card-title.text-uppercase.text-center {
  font-size: 24px;
  line-height: 38px;
}
h3.last.card-title.text-uppercase.text-center {
  font-size: 16px;
  line-height: 25px;
}
p.plan-details {
  font-size: 20px;
  font-weight: bold !important;
  color: initial;
}
.d-grid {
  text-align: center;
}
@media (max-width: 768px) {
  p.plan-details {
    max-width: 300px;
    margin-right: auto;
    margin-left: auto;
  }
}

@media (min-width: 992px) {
  .col-16-percent {
    flex: 0 0 16.66%;
    max-width: 16.66%;
  }
  /* Ensure h3.card-title does not push the layout */
  h3.card-title {
    min-height: auto;
    margin-bottom: 0 !important;
  }
}

/* Adjust the margin for .each-tier to ensure there's space between columns */
.each-tier {
  border: 5px solid #222;
  padding: 25px 10px;
  border-radius: 15px;
  margin: 5px; /* Adjust margin to ensure there's space between the columns */
}

/* Modify .d-grid for the button to fit within the new column width */
.d-grid a {
  background: #000;
  border: 5px solid #000;
  border-radius: 12px;
  line-height: normal;
  color: #fff;
  padding: 10px; /* Add padding to your buttons */
  display: block; /* Make sure it's block to fill the column */
  text-align: center; /* Center the text in the button */
}

@media (min-width: 576px) and (max-width: 767px) {
  .col-sm-5 {
    -ms-flex: 0 0 46%;
    flex: 0 0 46%;
    max-width: 46%;
  }
}
@media (min-width: 576px) {
  h3.card-title {
    min-height: 100px;
    margin-bottom: 0 !important;
  }
}
.each-tier {
  border: 5px solid #222;
  margin: 5px;
  padding: 25px 10px;
  border-radius: 15px;
}
.card-body .sub-title {
  margin: 5px auto;
  max-width: 90%;
  line-height: normal;
}
.d-grid {
  background: #000;
  border: 5px solid #000;
  border-radius: 12px;
  line-height: normal;
}
.d-grid a {
  color: #fff;
}
.d-grid a:hover {
  color: #fff;
  font-weight: 700;
}
.d-grid.chosen-plan {
  background: #77b255;
  border-color: #70a353;
}
.chosen-tier {
  border-color: #77b255;
}
.chosen-tier .d-grid.chosen-plan {
  background: #77b255;
  border-color: #70a353;
}
.wp-night-mode-on p.plan-details {
  color: #fff;
}
.wp-night-mode-on .d-grid {
  background: #5e5e5e;
  border-color: #626262;
}
.wp-night-mode-on .each-tier {
  border-color: gray;
}
.wp-night-mode-on .chosen-tier {
  border-color: #77b255;
}
.wp-night-mode-on .plan-details path {
  color: #fff;
  fill: #fff;
}
.form-control:disabled,
.form-control[readonly] {
  background-color: #e9ecef;
  opacity: 1;
  cursor: not-allowed;
}
.wp-night-mode-on .form-control:disabled,
.form-control[readonly] {
  background-color: #6f757a !important;
  opacity: 1;
}
.hidden {
  display: none !important;
}
#paymenterr .invalid-feedback {
  font-size: 100%;
  text-align: center !important;
}
.loading {
  /* Absolute position */
  left: 0;
  position: absolute;
  top: 0; /* Take full size */
  height: 100%;
  width: 100%; /* Center */
  align-items: center;
  display: flex;
  justify-content: center;
}
.fade {
  transition: opacity 0.15s linear;
}
button:disabled {
  background: #6f757a;
}
.invalid-feedback { max-width: 94%; margin-right: auto; margin-left: auto; }
.modal-footer button {
  display: none;
}
.signupdone {
  font-size: 18px;
  font-weight: bold;
}
.page-template-signup section#content_main {
  min-height: 700px;
}
@media (min-width: 992px) {
  .col-16-percent {
    flex: 0 0 16.66%;
    max-width: 16.66%;
  }
  /* Additional styles... */
}

/* Ensuring the flex container has a higher specificity */
.container .flex-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap; /* Wrap items if they can't all fit on one line */
}

.container .flex-container .plan-column {
  flex: 1; /* Grow to take the available space */
  max-width: calc(33.333% - 20px); /* Assuming there are 3 columns, adjust for padding */
  box-sizing: border-box; /* Include padding in width calculations */
  padding: 10px; /* Space between columns */
}

/* Making sure other styles do not override the flex properties */
.container .flex-container .plan-column * {
  max-width: 100%;
  box-sizing: border-box;
}