:root {
  --transition-time: 1000ms;
}

.col label {
  opacity: 1;
}

.col label:hover {
  opacity: 1;
}

@supports (selector(:has(*))) {
  .col label {
    opacity: 0.5; /* Only apply reduced opacity if :has is supported */
  }

  .col label:has(input:checked) {
    opacity: 1;
  }
}

.disabled {
  opacity: 0.65;
}

.col label:has(input:checked) {
  opacity: 1;
}

.scene-container .view-controls {
  position: absolute;
  right: 0;
  bottom: 0;
}

.screenshot-container {
  aspect-ratio: 16/9;
  overflow: hidden;
}
.screenshot-container img {
  max-width: 100%;
  max-height: 100%;
}

.text-shadow-light {
  text-shadow: 0 0 20px white;
}

.max-length-4 {
  max-width: 12rem;
}

.shadow-top {
  box-shadow: 0 -5px 5px 0 rgba(0 0 0 / 20%);
}

.shadow-bottom {
  box-shadow: 0 5px 5px 0 rgba(0 0 0 / 20%);
}

.shadow-left {
  box-shadow: -5px 0 5px 0 rgba(0 0 0 / 20%);
}

.shadow-right {
  box-shadow: 5px 0 5px 0 rgba(0 0 0 / 20%);
}

.notification-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9998;
}

.custom-notification {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999; /* Ensure it's above the overlay */
  min-width: min(90vw, 400px);
}

.custom-notification p {
  text-wrap: balance;
}

.scene-container {
  aspect-ratio: 16/9;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: grab;
  max-height: 60vh;
}

.scene-container .scene-overlay {
  display: flex;
  position: absolute;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  background-color: #eaecefabf;
  backdrop-filter: blur(10px);
}

.scene-container .scene-overlay.display-none {
  display: none;
}

.bg-dark-blue {
  background-color: rgb(26, 51, 82);
  color: var(--bs-gray-100);
}

.bg-gray-0 {
  background-color: white;
  color: var(--bs-gray-900);
}

.bg-gray-100 {
  background-color: var(--bs-gray-100);
  color: var(--bs-gray-900);
}
.bg-gray-200 {
  background-color: white;
  color: var(--bs-gray-900);
}
.bg-gray-300 {
  background-color: var(--bs-gray-300);
  color: var(--bs-gray-900);
}
.bg-gray-400 {
  background-color: var(--bs-gray-400);
  color: var(--bs-gray-900);
}
.bg-gray-500 {
  background-color: var(--bs-gray-500);
  color: var(--bs-gray-900);
}
.bg-gray-600 {
  background-color: var(--bs-gray-600);
  color: white;
}
.bg-gray-700 {
  background-color: var(--bs-gray-700);
  color: var(--bs-gray-100);
}
.bg-gray-800 {
  background-color: var(--bs-gray-800);
  color: var(--bs-gray-100);
}
.bg-gray-900 {
  background-color: var(--bs-gray-400);
  color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .bg-gray-100,
[data-bs-theme="dark"] .bg-gray-0,
[data-bs-theme="dark"] .bg-gray-200,
[data-bs-theme="dark"] .bg-gray-300,
[data-bs-theme="dark"] .bg-gray-400,
[data-bs-theme="dark"] .bg-gray-500,
[data-bs-theme="dark"] .bg-gray-600,
[data-bs-theme="dark"] .bg-gray-700,
[data-bs-theme="dark"] .bg-gray-800 {
  background-color: var(--bs-gray-900);
  color: var(--bs-gray-100);
}

[data-bs-theme="dark"] .bg-dark-blue {
  background-color: rgb(13, 27, 43);
  color: var(--bs-gray-400);
}

.outline-border {
  outline: solid 1px #c1c2c5;
}

.unselectable {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#itemCanvasList .offcanvas {
  width: 100vw;
  box-shadow: 0 0 5px 0 black;
}

@media (max-width: 576px) {
  #itemCanvasList .offcanvas {
    width: 100vw;
    border: none;
  }
}

.no-wrap,
.dropdown-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-item,
.cursor-pointer {
  cursor: pointer;
}

#accessForm .fade-out {
  transition: opacity 0.25s;
  opacity: 0;
}

#accessForm .fade-in {
  transition: opacity 0.25s;
  opacity: 1;
}

.form-floating > div.form-control:not(:empty) ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.form-floating > div.form-control:empty:not(:focus) ~ label {
  opacity: 1;
  transform: scale(1);
  font-size: 80%;
  color: #6c757d;
  text-transform: capitalize;
}

.form-floating {
  padding-bottom: 2px;
  padding-top: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.form-floating .label {
  font-size: 80%;
  color: #6c757d;
  text-transform: capitalize;
}

.text-lightgray {
  color: lightgray;
}

.form-floating .select-label {
  opacity: 100% !important;
  transform: scale(1) !important;
}

#accessCode {
  align-items: center;
  justify-content: center;
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  gap: 0.2rem;
  font-size: 1.5rem;
}

#accessCode > div {
  border: 1px solid lightgray;
  border-radius: 0.2rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.slide-container {
  position: relative;
  width: 100%;
}

.slide-item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  backface-visibility: hidden;
  /*transition: transform 3s ease-in-out;*/
  transition: opacity var(--transition-time) ease-in-out, transform var(--transition-time) cubic-bezier(0.6, -0.28, 0.4, 1.28);
}

.slide-item.active,
.slide-item-next,
.slide-item-prev {
  display: block;
}

.slide-item-next:not(.slide-item-start),
.active.slide-item-end {
  transform: translateX(150%);
}

.slide-item-prev:not(.slide-item-end),
.active.slide-item-start {
  transform: translateX(-150%);
}

/*
.slide-left {
  transform: translate3d(-100%, 0, 0);
  opacity: 0;
}

.slide-right {
  transform: translate3d(100%,0,0);
  opacity: 0;
}

.slide-left.transition-out {
  transform: translate3d(-100%,0,0);
}
.slide-right.transition-out {
  transform: translate3d(100%,0,0);
}

.slide-right.transition-out,
.slide-left.transition-out {
  opacity: 0;
  transition: opacity var(--transition-time) cubic-bezier(0.6, -0.28, 0.74, 0.05), transform var(--transition-time) cubic-bezier(0.6, -0.28, 0.74, 0.05);
}

.slide-right.transition-in,
.slide-left.transition-in {
  transform: translate3d(0%,0,0);
  opacity: 1;
  transition: opacity var(--transition-time) cubic-bezier(0.26, 0.95, 0.4, 1.28), transform var(--transition-time) cubic-bezier(0.26, 0.95, 0.4, 1.28);
}

.slide-left.show,
.slide-right.show {
  transform: translate3d(0%,0,0);
  opacity: 1;
}

.slide-right:not(.show, .transition-in, .transition-out),
.slide-left:not(.show, .transition-in, .transition-out) {
  height: 0;
  overflow: hidden;
}
*/

.incorrect {
  animation: shake 0.15s;
  animation-iteration-count: 2;
  box-shadow: inset 0 0 10px 0 red;
  border: 1px solid red;
}

.shake {
  animation: shake 0.15s;
  animation-iteration-count: 2;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(0);
  }
}

.overflow-hidden {
  overflow: hidden;
}

.justify-content-space-between {
  justify-content: space-between;
}

.vh-100,
.dvh-100 {
  height: 100dvh !important;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

.justify-items-center {
  justify-items: center;
}

.grid.content-grid {
  --padding-inline: 2rem;
  --content-max-width: 700px;

  grid-template-columns:
    1fr
    [content-start]
    min(100%, 600px, max(50%, 350px))
    [content-end]
    1fr;
}

.content-grid .grid-content,
.content-grid * {
  grid-column: content;
}

.submitting .on-submit-hide,
.on-submit-show {
  display: none;
}

.submitting .on-submit-show,
.on-submit-hide {
  display: block;
}

@font-face {
  font-family: preciousSoul;
  src: url("/css/precious_soul.ttf");
}

/* @font-face {
    font-family: lato;
    src: url("/css/Lato.ttf");
  } */

@font-face {
  font-display: swap;
  font-family: "lato";
  font-style: normal;
  font-weight: 400;
  src: url("/css/fonts/lato.woff2") format("woff2"), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url("/css/fonts/Lato.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

@font-face {
  font-display: swap;
  font-family: "montserrat";
  font-style: normal;
  font-weight: 400;
  src: url("/css/fonts/montserrat.woff2") format("woff2"), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url("/css/fonts/Montserrat-VariableFont_wght.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* @font-face {
    font-family: montserrat;
    src: url("/css/Montserrat-VariableFont_wght.ttf");
  } */

@font-face {
  font-display: swap;
  font-family: "poppins";
  font-style: normal;
  font-weight: 400;
  src: url("/css/fonts/poppins.woff2") format("woff2"), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ url("/css/fonts/Poppinso.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

@font-face {
  font-family: poppins;
  src: url("/css/Poppins.ttf");
}

.font-primary {
  font-family: montserrat, sans-serif, Tahoma, Verdana;
}

.font-secondary {
  font-family: lato, Tahoma, Verdana, sans-serif;
}

.font-script {
  font-family: preciousSoul, Tahoma, Verdana, sans-serif;
}

.dark-only,
.light-only {
  display: block;
}

[data-bs-theme="light"] .dark-only,
[data-bs-theme="dark"] .light-only {
  display: none;
}

.max-width {
  max-width: 1600px;
}

.fs-7 {
  font-size: 0.8rem;
}

.pp-h3 {
  font-family: montserrat, sans-serif, Tahoma, Verdana;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 1.667rem;
  color: rgba(var(--bs-secondary-rgb));
}

.pp-body-callout {
  font-family: montserrat, sans-serif, Tahoma, Verdana;
  font-weight: 600;
  font-size: 1.167rem;
  color: rgba(var(--bs-dark-rgb));
}

.pp-body {
  font-family: lato, Tahoma, Verdana, sans-serif;
  font-weight: noraml;
  font-size: 1rem;
  color: rgba(var(--bs-dark-rgb));
}

.max-w-100 {
  max-width: 100%;
}

.display-none {
  display: none;
}

.blur-load {
  position: relative;
}

.blur-load.not-loaded img,
img.blur-load.not-loaded {
  opacity: 0;
}

.blur-load img,
img.blur-load {
  transition: opacity 1s ease;
}

.blur-load.not-loaded::before {
  content: "";
  position: absolute;
  inset: 0;
  animation: pulse 2s infinite;
  background-color: #000000;
  border-radius: min(50vh, 0.5rem);
  box-shadow: 0 0 20px 0px #000000;
  backdrop-filter: blur(3px);
}

.blur-load.loaded::before {
  content: none;
}

@keyframes pulse {
  0% {
    background-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.2);
  }
  50% {
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 20px 0px rgba(255, 255, 255, 0.2);
  }
  100% {
    background-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.2);
  }
}

.blur-load.loaded img,
img.blur-load.loaded {
  opacity: 1;
}

.blur-load.loaded {
  background-image: none !important;
}

@media (min-width: 250px) and (max-width: 576px) {
  .row-cols-xs-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xs-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xs-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-xs-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xs-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xs-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
}

@media (min-width: 576px) {
  .fs-sm-normal {
    font-size: unset !important;
  }
  .shadow-sm-top {
    box-shadow: 0 -5px 5px 0 rgba(0 0 0 / 20%);
  }

  .shadow-sm-bottom {
    box-shadow: 0 5px 5px 0 rgba(0 0 0 / 20%);
  }

  .shadow-sm-left {
    box-shadow: -5px 0 5px 0 rgba(0 0 0 / 20%);
  }

  .shadow-sm-right {
    box-shadow: 5px 0 5px 0 rgba(0 0 0 / 20%);
  }
}

@media (min-width: 768px) {
  .h-md-100 {
    height: 100% !important;
  }
  .shadow-md-top {
    box-shadow: 0 -5px 5px 0 rgba(0 0 0 / 20%);
  }

  .shadow-md-bottom {
    box-shadow: 0 5px 5px 0 rgba(0 0 0 / 20%);
  }

  .shadow-md-left {
    box-shadow: -5px 0 5px 0 rgba(0 0 0 / 20%);
  }

  .shadow-md-right {
    box-shadow: 5px 0 5px 0 rgba(0 0 0 / 20%);
  }
}

@media (min-width: 992px) {
  .h-lg-100 {
    height: 100% !important;
  }
  .shadow-lg-top {
    box-shadow: 0 -5px 5px 0 rgba(0 0 0 / 20%);
  }

  .shadow-lg-bottom {
    box-shadow: 0 5px 5px 0 rgba(0 0 0 / 20%);
  }

  .shadow-lg-left {
    box-shadow: -5px 0 5px 0 rgba(0 0 0 / 20%);
  }

  .shadow-lg-right {
    box-shadow: 5px 0 5px 0 rgba(0 0 0 / 20%);
  }
}

@media (min-width: 1200px) {
  .h-xl-100 {
    height: 100% !important;
  }
  .shadow-xl-top {
    box-shadow: 0 -5px 5px 0 rgba(0 0 0 / 20%);
  }

  .shadow-xl-bottom {
    box-shadow: 0 5px 5px 0 rgba(0 0 0 / 20%);
  }

  .shadow-xl-left {
    box-shadow: -5px 0 5px 0 rgba(0 0 0 / 20%);
  }

  .shadow-xl-right {
    box-shadow: 5px 0 5px 0 rgba(0 0 0 / 20%);
  }
  .no-xl-scroll {
    overflow: hidden;
  }
  .xl-scroll {
    overflow: auto;
    height: 100%;
  }
}

@media (min-width: 1400px) {
  .scene-container {
    overflow: unset;
    height: 100%;
    max-height: unset;
  }
  .h-xxl-100 {
    height: 100% !important;
  }
  .shadow-xxl-top {
    box-shadow: 0 -5px 5px 0 rgba(0 0 0 / 20%);
  }

  .shadow-xxl-bottom {
    box-shadow: 0 5px 5px 0 rgba(0 0 0 / 20%);
  }

  .shadow-xxl-left {
    box-shadow: -5px 0 5px 0 rgba(0 0 0 / 20%);
  }

  .shadow-xxl-right {
    box-shadow: 5px 0 5px 0 rgba(0 0 0 / 20%);
  }
  .no-xxl-scroll {
    overflow: hidden;
  }
  .xxl-scroll {
    overflow: auto;
    height: 100%;
  }
}