*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


:root {
  --font-main: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --bs-primary: #198754;
  --bs-primary-rgb: 25, 135, 84;
}

body {
  font-family: var(--font-main);
}

#busesWrap .btn {
  min-width: 64px;
}

.loader-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

#busesWrap {
  min-height: 92px;
  align-content: flex-start;
}

.bus-skel {
  min-width: 52px;
  height: 32px;
  border-radius: 6px;
  opacity: 0.6;
  pointer-events: none;
}

.btn-primary{
  --bs-btn-bg: #198754;
  --bs-btn-border-color: #198754;

  --bs-btn-hover-bg: #157347;
  --bs-btn-hover-border-color: #146c43;

  --bs-btn-active-bg: #146c43;
  --bs-btn-active-border-color: #13653f;

  --bs-btn-focus-shadow-rgb: 25, 135, 84;

  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #198754;
  --bs-btn-disabled-border-color: #198754;
  --bs-btn-disabled-opacity: 0.5;
    }

.btn-outline-primary {
  --bs-btn-color: #198754;
  --bs-btn-border-color: #198754;

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #157347;
  --bs-btn-hover-border-color: #146c43;

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #146c43;
  --bs-btn-active-border-color: #13653f;
  --bs-btn-focus-shadow-rgb: 25, 135, 84;

  --bs-btn-disabled-color: #198754;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #198754;
  --bs-btn-disabled-opacity: 0.5;
}

.bus-skel {
  position: relative;
  overflow: hidden;
}
.bus-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation: skelMove 1.1s infinite;
}

@keyframes skelMove {
  100% { transform: translateX(100%); }
}

.placeholder {
  background-color: #d9dde3 !important;
  opacity: 1 !important;
}

.placeholder-glow .placeholder {
  animation: placeholder-glow 1.2s ease-in-out infinite;
}

@keyframes placeholder-glow {
  0% { opacity: 1; }
  50% { opacity: 0.55; }
  100% { opacity: 1; }
}

#busesHint {
  min-height: 26px;
}

.arrivals-dir {
  min-height: 18px;
}

.arrivals-hint {
  min-height: 18px;
}

.arrivals-dir-ph {
  display: inline-block;
  height: 12px;
  width: 220px;
}

.arrivals-badge-ph {
  display: inline-block;
  height: 16px;
  width: 80px;
}

.arrivals-left-ph {
  display: inline-block;
  height: 14px;
  width: 30px;
}

.arrivals-right-ph {
  display: inline-block;
  height: 14px;
  width: 130px;
}

.arrivals-left-ph {
  display: inline-block;
  height: 14px;
  width: 60%;
  max-width: 60px;
}

.arrivals-right-ph {
  display: inline-block;
  height: 14px;
  width: 72px;
}

#arrivalsSkeleton .list-group-item {
  min-height: 40px;
}

#arrivalsFill .list-group-item {
  min-height: 48px;
}

.arrivals-fill-left {
  display: inline-block;
  height: 14px;
  width: 68%;
  max-width: 300px;
}

.arrivals-fill-right {
  display: inline-block;
  height: 14px;
  width: 80px;
}

.saabumised{
  min-height: 320px !important;
}

#busesWrap .bus-btn,
#busesWrap .bus-skeleton {
  min-width: 64px;
  height: 32px;
  border-radius: 6px;
}

#busesWrap .bus-skeleton {
  background-color: #d9dde3;
  border: none !important;
  box-shadow: none !important;
  pointer-events: none;
  animation: bus-skel-glow 1.2s ease-in-out infinite;
}

#busesWrap .bus-skeleton.btn {
  background-color: #d9dde3 !important;
  border: none !important;
}

@keyframes bus-skel-glow {
  0% { opacity: 1; }
  50% { opacity: 0.55; }
  100% { opacity: 1; }
}