.custom-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.custom-modal {
  background: #fff;
  padding: 0; /* Remove padding from the modal */
  border-radius: 8px;
  position: relative;
  outline: none;
  width: 95%;
  height: 95%;
  max-width: 1080px;
  max-height: 720px;
  overflow: auto;
  overflow-x: hidden;
}

.custom-modal .row {
  margin: 0; /* Override the negative margins */
}

.confirmation-section, .success-section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.order-summary {
  background-color: #f5f5f5; /* Light grey background */
  padding: 20px; /* Add padding to the order summary */
  height: 100%; /* Full height */
  overflow-y: auto; /* Enable vertical scroll if needed */
}

.confirmation-message {
  padding: 20px;
  text-align: center;
}

.close-button {
  position: absolute;
  z-index: 100;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  color: #333;
  font-size: 1rem;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.close-button:hover {
  background-color: #f2f2f2;
}

.close-button:focus {
  outline: none;
}

.link-back {
  color: grey;
  text-decoration: none;
}

.link-back:hover {
  text-decoration: underline;
}

.ticket-controls {
  display: flex;
  align-items: center;
}

.ticket-button {
  font-size: 0.8rem;
  width: 30px;
  line-height: 30px; /* Matching the line height with the button width */
  padding: 0; /* Removing padding to center the icon */
  text-align: center; /* Center align the text */
}

.ticket-button i.fas {
  vertical-align: middle; /* Center align the icon vertically */
}

.ticket-quantity {
  font-size: 1.2rem; /* Larger font size for text */
  font-weight: bold;
  min-width: 16px;
  text-align: center;
}

.fc .fc-button {
  font-size: 0.8em; /* Adjust as necessary */
}

.event-title {
  white-space: nowrap; /* Keep all text on a single line */
  overflow: hidden; /* Hide any overflow */
  text-overflow: ellipsis; /* Add ellipsis when the text overflows */
  width: 100%; /* Set width to the container's full width */
}

.loading-animation {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-left-color: #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-left: 10px; /* spacing it away from the button */
  vertical-align: middle; /* centering it vertically in relation to the button */
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.fc .fc-col-header-cell-cushion {
  cursor: default;
}

.product-card {
  display: flex;
  flex-basis: 29%;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 160px;
}

.product-card img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.cart-product-img {
  width: 190px;
}

.product-link {
  color: black;
}

.cart-icon > .cart-counter-container {
  position: absolute;
  top: 28px;
  right: -6px;
}

p {
  font-size: 1.3em;
}

.donate-form__step--disabled {
  position: relative;
}

.donate-form__step--disabled:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.8);
}

.social-icon {
  width: 30px;
  height: 30px;
}

.section-header {
  height: 220px;
}

#section-home {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 25%;
  height: 520px;
}

.bg-green {
  background-color: #81BB2B;
}

.bg-blue {
  background-color: #A4BBE1;
}

.overlap {
  margin-top: -120px;
}

.overlap-lg {
  margin-top: -180px;
}

.scale-on-hover { /* Safari and Chrome */ /* Firefox */ /* IE 9 */ /* Opera */
  transition: all 0.4s ease-in-out;
}

.bg-blob {
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -10;
  fill: rgb(242, 248, 251);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.donation-tabs__tab {
  display: inline;
  white-space: nowrap;
  padding: 22px;
  background-color: #EDEDED;
  cursor: pointer;
  word-break: keep-all;
  font-weight: bold;
}

.donation-tabs__tab--active {
  background-color: white;
  border-top: solid 6px #FFC200;
  border-left: solid 1px #EDEDED;
  border-right: solid 1px #EDEDED;
}

/* Pulse Shrink */
@keyframes hvr-pulse-shrink {
  to {
    transform: scale(0.9);
  }
}
.hvr-pulse-shrink {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-pulse-shrink:hover, .hvr-pulse-shrink:focus, .hvr-pulse-shrink:active {
  animation-name: hvr-pulse-shrink;
  animation-duration: 0.3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* Float */
.hvr-float {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  transition-duration: 0.3s;
  transition-property: transform;
  transition-timing-function: ease-out;
}

.hvr-float:hover, .hvr-float:focus, .hvr-float:active {
  transform: translateY(-8px);
}

/* Shadow */
.hvr-shadow {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  transition-duration: 0.3s;
  transition-property: box-shadow;
}

.hvr-shadow:hover, .hvr-shadow:focus, .hvr-shadow:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}

/* Grow Shadow */
.hvr-grow-shadow {
  display: inline-block;
  vertical-align: middle;
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  transition-duration: 0.3s;
  transition-property: box-shadow, transform;
}

.hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  transform: scale(1.1);
}

@keyframes shake {
  from, to {
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    transform: translate3d(10px, 0, 0);
  }
}
.shake {
  animation-name: shake;
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.img-support {
  height: 74px;
}

.image-container {
  position: relative;
  z-index: 100;
}

.top-left {
  position: absolute;
  top: 8px;
  left: 8px;
  max-width: 128px;
}

@media (min-width: 768px) {
  .image-container {
    height: 100vh;
    overflow: hidden;
  }
  .image-container .cover {
    min-height: 100%;
    min-width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.image-container .cover { /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  pointer-events: none;
}

.transition-group {
  position: relative;
}

.transition-group .route-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.transition-group.reverse .slide-enter {
  transform: translateX(-100%);
}

.transition-group.reverse .slide-enter-active {
  transform: translateX(0%);
  transition: transform 300ms;
}

.transition-group.reverse .slide-exit {
  transform: translateX(0%);
}

.transition-group.reverse .slide-exit-active {
  transform: translateX(100%);
  transition: transform 300ms;
}

.slide-enter {
  transform: translateX(100%);
}

.slide-enter-active {
  transform: translateX(0%);
  transition: transform 300ms;
}

.slide-exit {
  transform: translateX(0%);
}

.slide-exit-active {
  transform: translateX(-100%);
  transition: transform 300ms;
}

.invalid {
  color: red;
}

.border-red {
  border-color: red !important;
}

.color-swatch {
  width: 30px;
  height: 30px;
  display: inline-block;
  border-radius: 50%;
  margin: 2px;
}

.color-input {
  -webkit-appearance: none;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  background: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-input::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}

.booking-event-item {
  cursor: pointer;
  transition: all 0.3s ease-in-out; /* Smooth transition for hover effects */
}

.booking-event-item:not(.active):hover {
  transform: translateY(-5px); /* Slightly lift the item */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow for depth */
}

.booking-event-item.active {
  border: 2px solid #2F71FC; /* Adjust the color and border width as needed */
}

.time-slot-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 4px;
  margin-bottom: 6px;
  overflow: hidden;
}

.time-slot-input {
  flex-grow: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
}

.time-slot-wrapper:not(.selected) .time-slot-input:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.time-slot-wrapper.selected .time-slot-input {
  border: 2px solid #2F71FC;
  background-color: #f0f8ff;
}

.time-slot-wrapper.selected .time-slot-input:hover {
  transform: none;
}

.next-button {
  transition: all 0.3s ease-in-out;
  width: 0;
  white-space: nowrap;
  overflow: hidden;
  background-color: #007bff;
  color: white;
  border: none;
  padding: 8px 0;
  box-sizing: border-box;
}

.time-slot-wrapper.selected .next-button {
  width: auto;
  padding: 8px;
  margin-left: 10px;
}

.booking_container.disabled {
  opacity: 0.4;
  pointer-events: none;
  background-color: #ffffff;
}

.back-to-calendar {
  font-size: 1.5rem;
  margin-bottom: 10px;
  cursor: pointer;
}

.time-container {
  max-height: 80vh;
  overflow-y: auto;
  padding: 10px;
}

.booking-event-container {
  min-height: 600px;
}

.booking_container .rdp-day {
  font-size: 1.2rem;
  padding: 0.5rem;
  margin: 0.2rem;
  border-radius: 2rem;
}

.selected-day {
  background-color: #007bff !important;
  color: white !important;
}

/*!
 * baguetteBox.js
 * @author  feimosi
 * @version 1.13.0
 * @url https://github.com/feimosi/baguetteBox.js
 */#baguetteBox-overlay{display:none;opacity:0;position:fixed;overflow:hidden;top:0;left:0;width:100%;height:100%;z-index:1000000;background-color:#222;background-color:rgba(0,0,0,.8);-webkit-transition:opacity .5s ease;transition:opacity .5s ease}#baguetteBox-overlay.visible{opacity:1}#baguetteBox-overlay .full-image{display:inline-block;position:relative;width:100%;height:100%;text-align:center}#baguetteBox-overlay .full-image figure{display:inline;margin:0;height:100%}#baguetteBox-overlay .full-image img{display:inline-block;width:auto;height:auto;max-height:100%;max-width:100%;vertical-align:middle;-webkit-box-shadow:0 0 8px rgba(0,0,0,.6);-moz-box-shadow:0 0 8px rgba(0,0,0,.6);box-shadow:0 0 8px rgba(0,0,0,.6)}#baguetteBox-overlay .full-image figcaption{display:block;position:absolute;bottom:0;width:100%;text-align:center;line-height:1.8;white-space:normal;color:#ccc;background-color:#000;background-color:rgba(0,0,0,.6);font-family:sans-serif}#baguetteBox-overlay .full-image:before{content:"";display:inline-block;height:50%;width:1px;margin-right:-1px}#baguetteBox-slider{position:absolute;left:0;top:0;height:100%;width:100%;white-space:nowrap;-webkit-transition:left .4s ease,-webkit-transform .4s ease;transition:left .4s ease,-webkit-transform .4s ease;transition:left .4s ease,transform .4s ease;transition:left .4s ease,transform .4s ease,-webkit-transform .4s ease,-moz-transform .4s ease}#baguetteBox-slider.bounce-from-right{-webkit-animation:bounceFromRight .4s ease-out;animation:bounceFromRight .4s ease-out}#baguetteBox-slider.bounce-from-left{-webkit-animation:bounceFromLeft .4s ease-out;animation:bounceFromLeft .4s ease-out}@-webkit-keyframes bounceFromRight{0%,100%{margin-left:0}50%{margin-left:-30px}}@keyframes bounceFromRight{0%,100%{margin-left:0}50%{margin-left:-30px}}@-webkit-keyframes bounceFromLeft{0%,100%{margin-left:0}50%{margin-left:30px}}@keyframes bounceFromLeft{0%,100%{margin-left:0}50%{margin-left:30px}}.baguetteBox-button#next-button,.baguetteBox-button#previous-button{top:50%;top:calc(50% - 30px);width:44px;height:60px}.baguetteBox-button{position:absolute;cursor:pointer;outline:0;padding:0;margin:0;border:0;-moz-border-radius:15%;border-radius:15%;background-color:#323232;background-color:rgba(50,50,50,.5);color:#ddd;font:1.6em sans-serif;-webkit-transition:background-color .4s ease;transition:background-color .4s ease}.baguetteBox-button:focus,.baguetteBox-button:hover{background-color:rgba(50,50,50,.9)}.baguetteBox-button#next-button{right:2%}.baguetteBox-button#previous-button{left:2%}.baguetteBox-button#close-button{top:20px;right:2%;right:calc(2% + 6px);width:30px;height:30px}.baguetteBox-button svg{position:absolute;left:0;top:0}.baguetteBox-spinner{width:40px;height:40px;display:inline-block;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-20px}.baguetteBox-double-bounce1,.baguetteBox-double-bounce2{width:100%;height:100%;-moz-border-radius:50%;border-radius:50%;background-color:#fff;opacity:.6;position:absolute;top:0;left:0;-webkit-animation:bounce 2s infinite ease-in-out;animation:bounce 2s infinite ease-in-out}.baguetteBox-double-bounce2{-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes bounce{0%,100%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes bounce{0%,100%{-webkit-transform:scale(0);-moz-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}}