/* GLOBAL */
/* ====== */

:root {
  --theme-green: #2bb743;
  --theme-grey: #333333;
}

body {
  font-family: "Karla", sans-serif;
}

.navbar {
  background-color: black;
  border-bottom: 1px solid var(--theme-green);
}

.navbar .navbar-brand {
  max-width: 200px;
}

/* CONTENT BLOCKS */
.shadow-block {
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 26px 0px;
}

.content-block {
  background-color: #f6f8f9;
}

.shadow-block,
.content-block {
  border: 1px solid #dde1e4;
}

/* MISC */
.bg-cov-cen {
  background-position: center;
  background-size: cover;
}

.pb-100 {
  padding-bottom: 100%;
}

/* BUTTONS */
.primary.green {
  text-align: center;
  padding: 10px 24px;
  /* font-size: 13px; */
  color: #fff;
  background-color: var(--theme-green);
  border: 1px solid var(--theme-green);
  border-radius: 3px;
  display: inline-block;
}

.secondary.black {
  color: var(--theme-grey);
  border: 1px solid var(--theme-grey);
  border-radius: 4px;
  padding: 0.2rem 1rem;
  display: inline-block;
}

.secondary.black:hover {
  background-color: var(--theme-grey);
  color: white;
}

/* MESSAGES */
#infoMessage > p {
  color: #d1321e;
  border: 1px solid #d1321e;
  text-align: center;
  border-radius: 6px;
  padding: 10px;
}

/* #infoMessage p {
    margin-bottom: 0px;
} */

/* ALERTS */
#alert_box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* padding: 100px;
	background-color: red; */
}

#full_page_loader {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
}

.msg-container .alert {
  width: 80%;
  margin-bottom: 5px;
  margin-top: 5px;
}

.msg-container .alert-success {
  border-color: #6a9273;
}

.msg-container .alert-danger {
  border-color: #9c696e;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* PAGE SPECIFIC */
/* ============= */

/* Resend Confirmation */
.resend-confirmation-page .navbar,
.resend-confirmation-page footer {
  display: none;
}

/* LOGIN */
body.login-page nav {
  display: none;
}

/* FORGOT PASSWORD */
body.forgot-password-page nav {
  display: none;
}

body.reset-password-page nav {
  display: none;
}

/* SIGNUP */
body.signup-page nav,
body.signup-page-success nav,
body.membership-page nav,
body.payment-success-page nav,
body.entry-success-page nav,
body.signing-success-page nav {
  display: none;
}

.signup {
  min-height: 100vh;
}

.signup.success {
  min-height: 50vh;
}

.input-form {
  width: 500px;
  max-width: 100%;
}

.input-form .txt {
  font-size: 13px;
}

.signup-page-success footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

.input-form .logo {
  width: 100%;
  border-radius: 5px;
  /* background-color: black; */
  /* padding: 10px 43px; */
}

.input-form .logo img {
  width: 100%;
}

.input-form .form-label {
  font-size: 16px;
  font-weight: 700;
}

.signup.success .fa-check {
  font-size: 30px;
  color: green;
}

@media (max-width: 768px) {
  .signup-page-success h1 {
    font-size: 30px;
  }

  .signup-page-success h2 {
    font-size: 18px;
  }
}

/* DRIVER DETAILS */
.driver-tab {
  padding-top: 40px;
}

.driver-tab .tab-title {
  /* margin-bottom: 16px; */
}

.profile-image {
  max-width: 200px;
  border-radius: 200px;
}

.content-block.car-list {
  padding-right: 0px !important;
}

.content-block.car-list .cars-table {
  overflow-x: scroll;
}

.content-block.car-list .cars-table td {
  padding-right: 3px;
  padding-left: 3px;
}

/* CARS PAGE */
#cars_tab tbody input,
#cars_tab tbody select {
  min-width: 80px;
}

.gallery-image {
  background-color: #e4e7e9;
  background-position: center;
  background-size: cover;
  border: 1px solid #b6bec4;
}

.gallery-image.none::before {
  font-family: "Font Awesome 5 Pro";
  content: "\f8fe";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #7d8991;
}

.gallery-image:hover {
  cursor: pointer;
  border-color: #899299;
}

.loader {
  display: flex;
  height: 50vh;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 99;
  background-color: #e8e8e8cc;
}

.spinner {
  height: 5vh;
  width: 5vh;
  border: 6px solid rgb(43 183 67);
  border-top-color: rgb(45 192 71 / 55%);
  border-radius: 100%;
  animation: rotation 0.6s infinite linear 0.25s;

  /* the opacity is used to lazyload the spinner, see animation delay */
  /* this avoid the spinner to be displayed when visible for a very short period of time */
  opacity: 0;
}

@keyframes rotation {
  from {
    opacity: 1;
    transform: rotate(0deg);
  }
  to {
    opacity: 1;
    transform: rotate(359deg);
  }
}

.car-image-update > img {
  max-width: 70px;
}

.action-btn.red {
  border: 1px solid #c01717;
  background-color: #dd2b2b;
  color: white;
}

/* ENTRIES */

.driver-season-payments .payment-season {
  border: 1px solid #c9cdcf;
  border-radius: 6px;
  padding: 9px;
  background-color: #e9ebec;
  margin-bottom: 10px;
}

.driver-season-payments .payment-season .title {
  font-size: 17px;
  padding-left: 10px;
  font-weight: 700;
}

.season-payment .payment-item-wrapper.disabled {
  pointer-events: none;
  opacity: 0.7;
}

.payment-item-wrapper.extra-round-disabled {
  pointer-events: none;
  position: relative;
}
.payment-item-wrapper.extra-round-disabled > input,
.payment-item-wrapper.extra-round-disabled > div {
  opacity: 0.5;
}

.payment-item-wrapper.extra-round-disabled::after {
  content: "No longer accepting entries";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;

  font-size: 1.1rem;
  text-shadow: 0 0 black;
}

.payment-item {
  border-bottom: 1px solid #bbc3cd;
  border-radius: 4px;
  padding: 7px;
  background-color: #dfe3e8;
}

.payment-item.selected-payment {
  border: 1px solid #0dc92d;
}

.payment-name {
  padding-left: 14px;
}

.payment-name .round {
  font-weight: bold;
}

.season-payment .payment-list .payment-button {
  margin-left: auto;
}

.season-payment .payment-list button.btn.btn-primary {
  background-color: #0dc92d;
  border-color: #169e1f;
}

.payment-item.paid::after {
  content: "\10f058  Paid";
  color: #01831a;
  font-family: "Font Awesome 5 Duotone";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e9ebece8;
  font-weight: 800;
}

.payment-item.paid.pending::after {
  content: "Payment Pending";
  color: #d66605;
}

.season-payment .payment-list .payment-complete {
  font-size: 1.4rem;
  text-align: center;
  padding: 10px;
  margin-top: 10px;
  color: #099c39;
}

/* Fix Entry rounds table on mobile */
.content-block.driver-entries {
  padding-right: 0px !important;
}

.content-block.driver-entries > .tab-content > .tab-pane {
  overflow-x: scroll;
}

.no-car-overlay {
  width: 100%;
  height: 100%;
  background-color: #f6f8f9e3;
  top: 0;
  left: 0;
  z-index: 10;
  text-align: center;
  font-size: 1.5em;
  font-weight: 700;
  padding-top: 10%;
}

.content-block.new-entry h5 {
  background-color: black;
  color: white;
  padding: 8px 18px;
}

.content-block.new-entry .payment-terms,
.content-block.new-entry .indem-text {
  font-size: 13px;
}

.content-block.new-entry .payment-terms .term-title {
  font-size: 18px;
}

.content-block.new-entry .signature-pad {
  border: 1px solid black;
}

.content-block.new-entry .entry-season-rounds.disabled {
  opacity: 0.6;
  pointer-events: none;
}

.entry-season-rounds td {
  padding: 6px !important;
}

.entry-season-rounds tbody.disabled td .entry-form-input {
  display: none;
}

.entry-season-rounds tbody:not(.disabled) .round-disabled {
  pointer-events: none;
  position: relative;
}
.entry-season-rounds tbody:not(.disabled) .round-disabled::after {
  content: "No longer accepting entries";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;

  font-size: 1.1rem;
  text-shadow: 0 0 black;
}

.entry-season-rounds tbody:not(.disabled) .round-disabled td {
  opacity: 0.2;
}

.price-class.un-focus {
  opacity: 0.2;
}

.form-success {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.form-success h1 {
  font-size: 4rem;
}

.form-success h2 {
  font-size: 1.4rem;
}

.content-block.driver-entries .nav-tabs li > a {
  background-color: #e6e7e8;
  padding: 11px;
  border: 1px solid #c9cdcf;
  border-bottom: 0;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  text-align: center;
  color: black;
  display: block;
}

.content-block.driver-entries .nav-tabs li > a.active,
.content-block.driver-entries .nav-tabs li > a:hover {
  background-color: #3d3d3d;
  border-color: black;
  color: white;
}

label.required:after {
  content: " *";
  color: red;
}

#signup_form input.error {
  border-color: red;
}

#signup_form .error {
  color: red;
}

/* ENTRY SUCCESS */
.entry-success-page footer {
  position: fixed;
  width: 100%;
  bottom: 0;
}

/* DIVER MEMBERSHIP PURCHASE */
.purchase-membership .membership-status {
  font-size: 1.3rem;
}

.purchase-membership .membership-status.active {
  color: #0d8722;
}

.purchase-membership .membership-status.processing {
  color: #a45316;
}

.purchase-entry .fee-type-name {
  font-size: 1.3rem;
  font-weight: 800;
}

/* PAYMENTS LOG PAGE */
#payments_tab .content-block {
  overflow-x: scroll;
}

/* SIGNING ON FORM */

.form-container.form-submitting {
  opacity: 0.3;
  pointer-events: none;
}

.signing-form-logo {
  max-width: 100%;
  width: 300px;
}

.signing-modal-body {
  background-color: #f9f9f9;
}

.impersonation-container {
  position: fixed;
  padding: 9px 28px;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  background-color: #ecadad;
  border: 1px solid #d36464;
  font-size: 19px;
  border-radius: 7px;
}

.impersonation-container i {
  color: #d52929;
}

/* --------------------
    2024 style updates
-----------------------*/

body {
  letter-spacing: -0.5px;
}

nav.publicHeader {
  background-color: #313131;
  border-bottom: 2px solid var(--theme-green);
  padding: clamp(15px, 2vw, 20px);

  .navbar-toggler {
    svg {
      fill: white;
      width: 40px;
      height: 40px;
    }

    .menuIcon {
      display: none;
    }

    &.collapsed {
      .menuIcon {
        display: block;
      }

      .closeIcon {
        display: none;
      }
    }
  }

  #navbarNavDropdown {
    ul.navbar-nav {
      gap: 15px;
      padding: 30px 0 0 0;

      & > li.nav-item {
        & > a.nav-link {
          color: white;
          font-size: 1.1rem;
          font-weight: 600;
          width: fit-content;
          padding: 5px 10px;

          &:hover {
            color: rgb(89, 198, 86);
          }

          &.active {
            background-color: rgb(89, 198, 86);
            border-radius: 5px;
            cursor: context-menu;

            &:hover {
              color: white;
            }
          }
        }

        .logOutBtn {
          display: flex;
          justify-content: center;
          align-items: center;
          width: fit-content;
          gap: 10px;
        }
      }
    }
  }

  @media (min-width: 996px) {
    & {
      #navbarNavDropdown {
        ul.navbar-nav {
          gap: 30px;
          padding: 0 0 0 30px;
        }
      }
    }
  }
}

div.tab-title {
  h2 {
    font-weight: 600;
    letter-spacing: -1px;
    font-size: clamp(2rem, 3vw, 3rem);
    margin: 0 0 15px 0;
    text-wrap: balance;
  }
}

footer.footerPublic {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start;
  min-height: 300px;
  background-image: url(/public/images/theme/ta_portal_footer.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center right;
  padding: clamp(15px, 3vw, 50px);

  & > img {
    height: clamp(80px, 13vw, 100px);
    max-width: 100%;
  }

  div.footerPhoneAndEmail a,
  .footerAddress {
    color: white;
  }

  div.footerPhoneAndEmail {
    line-height: 180%;

    a {
      text-decoration: none;
      transition-duration: 0.1s;

      &:hover {
        color: rgb(89, 198, 86);
      }
    }

    a:first-of-type {
      font-size: clamp(1.8rem, 4.5vw, 2.2rem);
      font-weight: 600;
    }

    a:last-of-type {
      font-size: clamp(1.4rem, 3.5vw, 1.6rem);
    }
  }

  div.footerAddress {
    font-size: 1.1rem;
    text-wrap: balance;
  }
}