.basketball-detail-container {
  padding-top: 60px;
  padding-bottom: 60px;
}
.camp-detail-title {
  color: #f47521;
  font-family: "oswald";
  font-weight: 400;
}

.camp-container {
  padding-top: 40px;
  padding-bottom: 40px;
}

.location-container {
  padding-top: 40px;
  padding-bottom: 40px;
}

.location-container iframe {
  width: 100%;
}

.image-wrapper {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 0px;
}

.camp-detail-container {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  padding: 20px;
  border-radius: 10px;
}

.sidebar-container {
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
}

.payment-table tr:not(:last-child) td:nth-child(1),
.payment-table tr:not(:last-child) td:nth-child(4) {
  border-bottom: 1px solid transparent;
}

.payment-form .payment-header {
  background-color: var(--document-bg);
}

.payment-form .payment-header {
  background-color: var(--document-bg);
}

.sign-documents .document-name,
.travel-benefits .document-name,
.payment-form .payment-header,
.payment-form .document-name {
  height: 60px;
  color: var(--gunmetal);
  font-size: var(--size-20);
}

.payment-form .document-name {
  height: 40px !important;
}

.payment-form .total-cost .document-name {
  height: 70px !important;
}

#edit-payment-text table tbody,
td,
tfoot,
th,
thead,
tr {
  border: none !important;
}

.payment-price {
  display: flex !important;
  justify-content: end !important;
}

.payment-value {
  display: flex !important;
  justify-content: end !important;
}

/* #edit-actions {
  display: flex;
  justify-content: space-between;
} */

#edit-actions .webform-button--submit {
  float: right !important;
}

.payment-outer-wrapper {
  color: #161616;
}

.payment-note::before {
  content: "*";
  color: red;
}

/* Container to position tabs */

.webform-progress ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 20px auto !important;
  display: flex !important;
  width: 100% !important;
  justify-content: center !important;
}

.webform-progress .progress-step {
  text-align: center !important;
  padding: 7px 30px !important;
  cursor: pointer !important;
  position: relative !important;
  background-color: #e9ecef !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
}

.webform-progress .progress-step:nth-child(odd) {
  margin-right: 2px !important; /* Add margin to odd steps */
}

.webform-progress .progress-step:nth-child(even) {
  margin-left: 2px !important; /* Add margin to odd steps */
}

.webform-progress .progress-marker::before {
  width: 45px !important;
  height: 45px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.25rem;
}

.progress-step .progress-marker::before {
  background-color: transparent !important;
  border: 1px solid grey;
  color: gray !important;
}

.progress-step.is-active .progress-marker::before {
  background-color: #ff6600 !important;
  color: white !important;
  border: 1px solid #ff6600;
}

.webform-progress-tracker .progress-marker::after {
  display: none;
}

.webform-progress .progress-step.is-active {
  color: #000 !important;
}

.webform-progress .progress-title {
  font-size: 1.25rem !important;
}

.webform-progress-tracker .progress-step.is-active .progress-title {
  font-weight: unset !important;
}

.webform-progress-tracker .progress-title[role="link"] {
  color: #777 !important;
  text-decoration: none !important;
}

.webform-submission-basketball-comp-form #edit-actions--2 {
  text-align: center !important;
}

/* Custom styling for the phone field */
.phone-field {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.form-required::after {
  content: "";
  vertical-align: super;
  display: inline-block;
  background-image: url(/core/misc/icons/ee0000/required.svg);
  background-repeat: no-repeat;
  background-size: 6px 6px;
  width: 6px;
  height: 6px;
  margin: 0 0.3em;
}

.form-item--error-message {
  color: red !important;
}

.webform-submission-basketball-comp-form label,
.webform-submission-basketball-camp-waiting-list-form label {
  margin-bottom: 0.1rem !important;
}

.form-item-first-name,
.form-item-last-name,
.form-item-date-of-birth,
.form-item-age-category,
.form-item-e-mail,
.form-item-phone-number,
.form-item-t-shirt-size,
.form-item-gender {
  margin-bottom: 0.5rem !important;
}

.form-select-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23343a40' d='M3 8l9 9 9-9z'/%3E%3C/svg%3E") !important;
  background-size: 18px !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
}

.common-form-button {
  background-color: #f47521;
  color: #ffffff;
  padding: 10px 25px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  border: 1px solid #f47521;
}

.common-form-button:hover {
  background-color: transparent !important;
  color: #f47521 !important;
  border: 1px solid #f47521 !important;
}

#edit-first-name--2,
#edit-last-name--2,
#edit-date-of-birth--2,
#edit-age-category--2,
#edit-e-mail,
#edit-phone-number--2,
#edit-t-shirt-size,
#edit-gender--2 {
  height: 45px !important;
  background-color: #fff !important;
}

.custom-date {
  background: url(../images/calendar.svg) no-repeat right 8px center / 20px !important;
}