/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_tree .
 *= require_self
 */
turbo-frame {
  display: block;
}
.turbo-progress-bar {
  height: 5px;
  background: linear-gradient(to right, #0891b2, #0d9488);
  /* background-color: #f59e0b; */
}
.console {
  position: relative !important;
}
a.desc, a.asc {
  font-weight: bold;
  stroke-width: 3px;
}
.spinner {
  width: 32px;
  height: 32px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8px;
  margin-bottom: 8px;
  border: 4px #e2e8f0 solid;
  border-top: 4px #0891b2 solid;
  border-radius: 9999px;
  animation: spinner-rotate 1.0s infinite linear;
}
/* Search submit loading: cover label, show centered spinner only */
.button-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background-color: inherit;
  pointer-events: none;
}
.button-spinner::after {
  content: "";
  box-sizing: border-box;
  width: 1rem;
  height: 1rem;
  border: 2px solid #ffffff59;
  border-top-color: #fff;
  border-radius: 9999px;
  animation: spinner-rotate 1s linear infinite;
}
.carousel {
  scrollbar-color: #0891b2 transparent;
  animation: scrollbar-fadeOut 0.3s forwards;
}
.carousel:hover {
  animation: scrollbar-fadeIn 0.3s forwards;
}
.carousel::-webkit-scrollbar {
  height: 8px;
}
.carousel::-webkit-scrollbar-track {
  background: var(--var1);
  border-radius: 9999px;
}
.carousel::-webkit-scrollbar-thumb {
  background: linear-gradient(to right, #0891b2, #0d9488);
  border-radius: 9999px;
}
.app-scroll {
  /* scrollbar-color: #0891b2 transparent; */
}
.app-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.app-scroll::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 9999px;
}
.app-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #0891b2, #0d9488);
  border-radius: 9999px;
}

@keyframes spinner-rotate {
  100% { 
    transform: rotate(360deg); 
  }
}

@property --var1 {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}
@keyframes scrollbar-fadeIn {
  0% {
    --var1: transparent;
  }
  100% {
    --var1: #e2e8f0;
  }
}
@keyframes scrollbar-fadeOut {
  0% {
    --var1: #e2e8f0;
  }
  100% {
    --var1: transparent;
  }
}