/* Adjust some default bootstrap colors */
:root {
  --bs-body-bg: #f8fafc;
  --bs-body-color: #1e293b;
}

/* Change the width of the modals */
@media (max-width: 767px) {
  #modal-dialog.wide-modal {
    max-width: 95%;
    margin: 0.5rem auto;
  }
}

@media (min-width: 768px) {
  #modal-dialog.wide-modal {
    max-width: 80%;
    margin: 1.75rem auto;
  }
}

/* Selects an <i> inside a <tr> that is immediately followed by a <tr class="show"> */
/* For the chevrons on the bottle lists */
tr:has(+ tr.show) a i {
  display: inline-block;
  transform: rotate(90deg);
}

/* Cool spinning icon animation */
.icon-spin-on-click {
  display: inline-block;
  transform-origin: center;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  transition: transform 0.3s ease; /* smooth transition */
}

@-webkit-keyframes spin-360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes spin-360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.icon-spin-on-click.spinning {
  -webkit-animation: spin-360 0.3s ease forwards;
  animation: spin-360 0.3s ease forwards;
}