:root {
  --sl-black-russian: 2, 1, 34;
  --sl-midnight-blue: 1, 51, 103;
  --sl-blaze-orange: 247, 98, 1;
  --sl-mine-shaft: 51, 51, 51;
  --navbar-width: 146px;
}

body {
    background-color: rgba(0, 0, 0, 0.02) !important;
}

body a, p, b, span {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Inter", sans-serif;
  color: #1E4C62;
}

table {
  tbody {
    tr:last-of-type {
      td {
        border-bottom: none;
       }
     }
  }
}

td[onclick] {
  cursor: pointer;
  transition: 300ms ease;

  &:hover {
    color: #1E4C62;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 2px #f7fbff;
}

.progress {
    --bs-progress-bg: #1E4C6280;
}
.progress-bar {
  --bs-progress-bar-bg: #1E4C62;
  --bs-progress-bar-bg
}

svg {
  display: block;
  width: 1em;
  height: auto;
}

.loader {
  display: inline-flex;
  gap: 4px;

  span {
    width: 5px;
    height: 5px;
    border-radius: 50%;

    &:nth-child(1) {
      animation: loadingAnim 0.5s 0.1s infinite linear;
      background: #020122;
    }

    &:nth-child(2) {
      animation: loadingAnim 0.5s 0.2s infinite linear;
      background: #013367;
    }

    &:nth-child(3) {
      animation: loadingAnim 0.5s 0.3s infinite linear;
      background: #F76201;
    }
  }
}

.main-page {
  width: calc(100% - 146px);
  padding: 16px;
}

.page-link {
  --bs-pagination-color: rgba(var(--sl-midnight-blue), 0.5);
  --bs-pagination-active-bg: rgba(var(--sl-midnight-blue), 1);
  --bs-pagination-active-border-color: rgba(var(--sl-midnight-blue), 0.5);
}

.dropdown-item:active {
  --bs-dropdown-link-active-bg: rgba(var(--sl-midnight-blue), 1);
}

.see-more {
  text-transform: uppercase;
  font-size: 12px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: rgba(var(--sl-mine-shaft), 0.8);
  text-decoration: none;
  transition: 300ms ease;

  &:hover {
    color: rgba(var(--sl-mine-shaft), 1);
  }

  span {
    border-bottom: 1px dashed currentColor;
  }

  i {
    font-size: 2em;
    color: #1E4C62;
  }
}

.tab-pane {
  background-color: white;
  border-left: 1px solid var(--bs-border-color);
  border-right: 1px solid var(--bs-border-color);
  border-bottom: 1px solid var(--bs-border-color);
}

.tooltip {
  --bs-tooltip-bg: rgba(var(--sl-midnight-blue), 1);
  --bs-tooltip-opacity: 1;
}

@keyframes loadingAnim {
  50% {
  transform: translateY(-4px);
  }

  0%, 100% {
  transform: translateY(0px);
  }
}

/* ============ Dropzone Container ============ */
#excelDropzone {
    border: 2px dashed #c8c8c8;
    border-radius: 10px;
    padding: 32px 32px 48px 32px;
    background: #fafafa;
    text-align: center;
    transition: background .25s, border-color .25s;
    cursor: pointer;
    font-family: "Inter", sans-serif;
    color: #555;
}

    /* Hover / clickable state */
    #excelDropzone.dz-clickable:hover {
        border-color: #0d6efd;
        background: #f3f8ff;
    }

    /* Default message button */
    #excelDropzone .dz-button {
        background: none;
        border: none;
        font-size: 1rem;
        color: #666;
        font-weight: 500;
        cursor: pointer;
    }