@keyframes moveImage {
  0% {
    margin-right: 100%;
  }
  100% {
    margin-right: -98%;
  }
}
:root {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  html, body {
    background: #fff !important;
    color: #000 !important;
  }
  /* Reset other elements as needed */
}
#ted-bar {
  position: absolute;
  right: 5%;
  top: 20px;
  z-index: 150;
}

#navcol-2 {
  position: absolute;
  right: 5%;
  top: 64px;
  z-index: 150;
}

#my-hero1 {
  height: 400px;
}

.modal-4 {
  --bs-modal-bg: rgba(255, 255, 255, 0.0); /* semi-transparent white */
  --bs-modal-border-width: 0;
  --bs-modal-width: 100%;
}

.how1-div {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.5);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fade-in {
  animation: fadeIn 1s ease-in forwards;
}

.my-responsive-height {
  height: 25%;
}

.my-mod-btn-padding {
  margin-right: 4%;
}

#navcol-2 {
  margin-right: 61px;
  margin-top: -46px;
}

@media (max-width: 788px) {
  .my-responsive-height {
    height: 39%;
  }
  .my-mod-btn-padding {
    margin-right: 3%;
  }
}
@media (max-width: 500px) {
  .my-responsive-height {
    height: 58%;
  }
  .my-mod-btn-padding {
    margin-right: 0%;
  }
  #navcol-2 {
    margin-right: 0;
    margin-top: -1px;
  }
  .tooltip {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }
  /* also target BS5 popper root class for extra safety */
  .bs-tooltip-auto, .bs-tooltip-top, .bs-tooltip-right, .bs-tooltip-bottom, .bs-tooltip-left {
    display: none !important;
  }
  #my-hero1 {
    height: 495px;
  }
  #user-name, #user-status {
    margin-left: 30%;
  }
}
/* Style for the 'refill' button when it should be disabled */
.refill-inactive {
  opacity: 0.6; /* Make it look faded */
  cursor: not-allowed; /* Show a 'not allowed' cursor on hover */
}

/* Style for the 'refill' button when it is active */
.refill-active {
  opacity: 1;
  cursor: pointer;
}