@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap");
.text-caveat {
  font-family: Caveat, serif;
  letter-spacing: -0.05em;
  line-height: 0.65 !important;
}

:root,
[data-bs-theme=light] {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #a22529;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #32936f;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #a22529;
  --bs-secondary: #000000;
  --bs-success: #32936f;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #a22529;
  --bs-light: #f4f4f4;
  --bs-dark: #484642;
  --bs-white: white;
  --bs-black: black;
  --bs-primary-rgb: 162, 37, 41;
  --bs-secondary-rgb: 0, 0, 0;
  --bs-success-rgb: 50, 147, 111;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 162, 37, 41;
  --bs-light-rgb: 244, 244, 244;
  --bs-dark-rgb: 72, 70, 66;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-primary-text-emphasis: rgb(64.8, 14.8, 16.4);
  --bs-secondary-text-emphasis: black;
  --bs-success-text-emphasis: rgb(20, 58.8, 44.4);
  --bs-info-text-emphasis: rgb(5.2, 80.8, 96);
  --bs-warning-text-emphasis: rgb(102, 77.2, 2.8);
  --bs-danger-text-emphasis: rgb(64.8, 14.8, 16.4);
  --bs-light-text-emphasis: #495057;
  --bs-dark-text-emphasis: #495057;
  --bs-primary-bg-subtle: rgb(236.4, 211.4, 212.2);
  --bs-secondary-bg-subtle: #cccccc;
  --bs-success-bg-subtle: rgb(214, 233.4, 226.2);
  --bs-info-bg-subtle: rgb(206.6, 244.4, 252);
  --bs-warning-bg-subtle: rgb(255, 242.6, 205.4);
  --bs-danger-bg-subtle: rgb(236.4, 211.4, 212.2);
  --bs-light-bg-subtle: rgb(251.5, 252, 252.5);
  --bs-dark-bg-subtle: #ced4da;
  --bs-primary-border-subtle: rgb(217.8, 167.8, 169.4);
  --bs-secondary-border-subtle: #999999;
  --bs-success-border-subtle: rgb(173, 211.8, 197.4);
  --bs-info-border-subtle: rgb(158.2, 233.8, 249);
  --bs-warning-border-subtle: rgb(255, 230.2, 155.8);
  --bs-danger-border-subtle: rgb(217.8, 167.8, 169.4);
  --bs-light-border-subtle: #e9ecef;
  --bs-dark-border-subtle: #adb5bd;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.2;
  --bs-body-color: #000000;
  --bs-body-color-rgb: 0, 0, 0;
  --bs-body-bg: #fff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: #000000;
  --bs-emphasis-color-rgb: 0, 0, 0;
  --bs-secondary-color: rgba(0, 0, 0, 0.75);
  --bs-secondary-color-rgb: 0, 0, 0;
  --bs-secondary-bg: #fafaf2;
  --bs-secondary-bg-rgb: 250, 250, 242;
  --bs-tertiary-color: rgba(0, 0, 0, 0.5);
  --bs-tertiary-color-rgb: 0, 0, 0;
  --bs-tertiary-bg: #f8f9fa;
  --bs-tertiary-bg-rgb: 248, 249, 250;
  --bs-heading-color: inherit;
  --bs-link-color: #a22529;
  --bs-link-color-rgb: 162, 37, 41;
  --bs-link-decoration: underline;
  --bs-link-hover-color: rgb(129.6, 29.6, 32.8);
  --bs-link-hover-color-rgb: 130, 30, 33;
  --bs-code-color: #d63384;
  --bs-highlight-color: #000000;
  --bs-highlight-bg: rgb(255, 242.6, 205.4);
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-xxl: 2rem;
  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 50rem;
  --bs-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  --bs-focus-ring-width: 0.25rem;
  --bs-focus-ring-opacity: 0.25;
  --bs-focus-ring-color: rgba(162, 37, 41, 0.25);
  --bs-form-valid-color: #32936f;
  --bs-form-valid-border-color: #32936f;
  --bs-form-invalid-color: #a22529;
  --bs-form-invalid-border-color: #a22529;
}

[data-bs-theme=dark] {
  color-scheme: dark;
  --bs-body-color: #dee2e6;
  --bs-body-color-rgb: 222, 226, 230;
  --bs-body-bg: #212529;
  --bs-body-bg-rgb: 33, 37, 41;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(222, 226, 230, 0.75);
  --bs-secondary-color-rgb: 222, 226, 230;
  --bs-secondary-bg: #343a40;
  --bs-secondary-bg-rgb: 52, 58, 64;
  --bs-tertiary-color: rgba(222, 226, 230, 0.5);
  --bs-tertiary-color-rgb: 222, 226, 230;
  --bs-tertiary-bg: rgb(42.5, 47.5, 52.5);
  --bs-tertiary-bg-rgb: 43, 48, 53;
  --bs-primary-text-emphasis: rgb(199.2, 124.2, 126.6);
  --bs-secondary-text-emphasis: #666666;
  --bs-success-text-emphasis: rgb(132, 190.2, 168.6);
  --bs-info-text-emphasis: rgb(109.8, 223.2, 246);
  --bs-warning-text-emphasis: rgb(255, 217.8, 106.2);
  --bs-danger-text-emphasis: rgb(199.2, 124.2, 126.6);
  --bs-light-text-emphasis: #f8f9fa;
  --bs-dark-text-emphasis: #dee2e6;
  --bs-primary-bg-subtle: rgb(32.4, 7.4, 8.2);
  --bs-secondary-bg-subtle: black;
  --bs-success-bg-subtle: rgb(10, 29.4, 22.2);
  --bs-info-bg-subtle: rgb(2.6, 40.4, 48);
  --bs-warning-bg-subtle: rgb(51, 38.6, 1.4);
  --bs-danger-bg-subtle: rgb(32.4, 7.4, 8.2);
  --bs-light-bg-subtle: #343a40;
  --bs-dark-bg-subtle: #1a1d20;
  --bs-primary-border-subtle: rgb(97.2, 22.2, 24.6);
  --bs-secondary-border-subtle: black;
  --bs-success-border-subtle: rgb(30, 88.2, 66.6);
  --bs-info-border-subtle: rgb(7.8, 121.2, 144);
  --bs-warning-border-subtle: rgb(153, 115.8, 4.2);
  --bs-danger-border-subtle: rgb(97.2, 22.2, 24.6);
  --bs-light-border-subtle: #495057;
  --bs-dark-border-subtle: #343a40;
  --bs-heading-color: inherit;
  --bs-link-color: rgb(199.2, 124.2, 126.6);
  --bs-link-hover-color: rgb(210.36, 150.36, 152.28);
  --bs-link-color-rgb: 199, 124, 127;
  --bs-link-hover-color-rgb: 210, 150, 152;
  --bs-code-color: rgb(230.4, 132.6, 181.2);
  --bs-highlight-color: #dee2e6;
  --bs-highlight-bg: rgb(102, 77.2, 2.8);
  --bs-border-color: #495057;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-form-valid-color: rgb(132, 190.2, 168.6);
  --bs-form-valid-border-color: rgb(132, 190.2, 168.6);
  --bs-form-invalid-color: rgb(199.2, 124.2, 126.6);
  --bs-form-invalid-border-color: rgb(199.2, 124.2, 126.6);
}

.countdown-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  --base-size: min(3.5vw, 1rem);
}

.countdown-item {
  color: #a22529;
  font-size: calc(2.5 * var(--base-size));
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  line-height: 1;
  margin: calc(0.625 * var(--base-size));
  position: relative;
  width: calc(5 * var(--base-size));
  height: calc(5 * var(--base-size));
  margin-top: calc(1 * var(--base-size));
}

.countdown-item::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin-top: calc(-0.075 * var(--base-size));
  width: calc(0.4 * var(--base-size));
  height: calc(0.4 * var(--base-size));
  background: #a22529;
  border-radius: 50%;
}

.countdown-item span {
  color: #a22529;
  font-size: calc(0.6 * var(--base-size));
  font-weight: bold;
  position: absolute;
  top: calc(-1 * var(--base-size));
  line-height: 1;
}

.countdown-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(5 * var(--base-size));
  height: calc(5 * var(--base-size));
}

.draw-timer {
  background-image: url(../images/pattern-red.jpg);
  background-size: 7.85rem auto;
  background-position: center;
  border: 2px solid var(--bs-body-bg);
}
.draw-timer__title {
  text-align: center;
  font-size: 1rem;
  margin-bottom: 1rem;
}
.draw-timer__grid {
  display: flex;
  justify-content: space-evenly;
  gap: 0.8rem;
}
.draw-timer__item {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
}
.draw-timer__label {
  font-size: 0.24em;
}

.draw-modal .modal-content::before, .draw-modal .modal-content::after {
  content: "";
  width: 9rem;
  height: 20rem;
  position: absolute;
  z-index: -1;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  margin: 0 -5rem;
  background-image: url(../images/assets/modal/asset-side.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}
.draw-modal .modal-content::after {
  transform: translateY(-50%) scaleX(-1);
  left: unset;
  right: 0;
}

.winner-choice-modal .modal-content {
  overflow: hidden;
}
.winner-choice-modal .modal-body {
  aspect-ratio: 82/40;
}
.winner-choice-modal__content {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.winner-choice-modal__title {
  font-size: 1.125rem;
  line-height: 1;
  font-weight: bold;
  margin-bottom: 1em;
  text-align: center;
}
@media (min-width: 576px) {
  .winner-choice-modal__title {
    font-size: 1.5rem;
  }
}
@media (min-width: 992px) {
  .winner-choice-modal__title {
    font-size: 2.5rem;
  }
}
.winner-choice-modal__list {
  overflow: hidden;
  position: relative;
  margin-top: auto;
  background-image: url("data:image/svg+xml,%3Csvg width='800' height='210' viewBox='0 0 800 210' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2028_832)'%3E%3Cpath d='M401 0C598.052 0 758.632 5.77612 765.753 13H766V98C766 98.5523 765.552 99 765 99H39C37.3431 99 36 97.6569 36 96V13H36.2471C43.368 5.77612 203.948 0 401 0Z' fill='url(%23paint0_linear_2028_832)'/%3E%3Cellipse cx='401' cy='99.5' rx='365' ry='13.5' fill='%236B1518'/%3E%3Cg filter='url(%23filter0_f_2028_832)'%3E%3Cellipse cx='401' cy='149.5' rx='365' ry='13.5' fill='%237B7B7B'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_f_2028_832' x='1' y='101' width='800' height='97' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='17.5' result='effect1_foregroundBlur_2028_832'/%3E%3C/filter%3E%3ClinearGradient id='paint0_linear_2028_832' x1='421' y1='89.5' x2='419.5' y2='5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23A22529'/%3E%3Cstop offset='1' stop-color='%2368181A'/%3E%3C/linearGradient%3E%3CclipPath id='clip0_2028_832'%3E%3Crect width='800' height='210' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 100/27;
  font-size: 0.875rem;
}
.winner-choice-modal__list::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 31%;
  aspect-ratio: 220/82;
  border: 5px solid var(--bs-primary);
}
@media (max-width: 575.98px) {
  .winner-choice-modal__list {
    margin-left: -2rem;
    margin-right: -2rem;
    font-size: 3vw;
  }
}
@media (min-width: 992px) {
  .winner-choice-modal__list {
    font-size: 1.25rem;
  }
}
.winner-choice-modal__list-slider {
  position: relative;
  overflow: hidden;
  margin: 0 4.5%;
  height: 42%;
  display: flex;
  align-items: center;
}
.winner-choice-modal__list-wrapper {
  position: absolute;
  width: 100%;
  min-width: 0;
  display: flex;
  white-space: nowrap;
  align-items: center;
  animation: slide 20s linear infinite;
}
.winner-choice-modal__list-wrapper > * {
  color: #fff;
  font-weight: bold;
  text-align: center;
  flex: 0 0 28%;
}

@keyframes slide {
  from {
    left: 0%;
  }
  to {
    left: -448%;
  }
}
@keyframes slide {
  from {
    left: 0%;
  }
  to {
    left: -448%;
  }
}