/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

 ::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}
  
::-moz-scrollbar {
  width: 0px;
  height: 0px;
}
  
::-ms-scrollbar {
  width: 0px;
  height: 0px;
}
  
::-webkit-scrollbar-track {
  background-color: transparent;
}
  
::-webkit-scrollbar-thumb {
  background-color: #f1f1f1;
}

.custom-scrollbar {
  overflow-y: auto;
  scrollbar-width: thin;
  /* For Firefox */
  scrollbar-color: #908383 transparent;
  /* For Firefox */
}
  
.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}
  
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #C8C5C4;
}
  
.flash {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;

  max-width: 100%;
  width: max-content;
  z-index: 100;
  animation: appear-then-fade 8s both;
}

/* Animation for the popup effect */
@keyframes popup-animation {
  0% {
    transform: translateX(-50%) scale(0.95);
  }

  100% {
    transform: translateX(-50%) scale(1);
  }
}

@keyframes appear-then-fade {

  0%,
  100% {
    opacity: 0
  }

  5%,
  60% {
    opacity: 1
  }
}