html {
  overflow: hidden;
}

body {
  --font-family: Roboto, "Helvetica Neue", sans-serif;
  --bs-font-sans-serif: var(--font-family);
  --sidebar-width: 300px;

  margin: 0;
  font-family: var(--font-family);
  background: rgb(249, 249, 251);
  overflow-x: hidden;
  overflow-y: auto;

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--bs-dark);
  }
}

* {
  font-family: var(--font-family) !important;
}

.alert.alert-success,
.alert.alert-danger {
  margin: auto;
  margin-bottom: 1rem;
}

div.side-menu-wrapper {
  .sidebar {
    position: fixed;
    top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 10;
    min-width: var(--sidebar-width) !important;
    padding: 0.6rem 0px;
    background-color: #f8f9fa;
    border-right: 2px solid #dee2e6;
    overflow-y: scroll;
    overflow-x: hidden;
    transform: translateX(-100%);
    visibility: hidden;

    &.sidebar-ready {
      transition:
        all 0.3s ease,
        visibility 0s linear 0.3s;
    }

    &.active {
      transform: translateX(0);
      visibility: visible;

      &.sidebar-ready {
        transition:
          all 0.3s ease,
          visibility 0s linear 0s;
      }
    }

    @media (min-width: 768px) {
      position: relative;
      width: var(--sidebar-width);
      max-width: var(--sidebar-width);
      min-width: 0;
      overflow-x: hidden;
      overflow-y: auto;
      transform: none;
      visibility: visible;

      &.sidebar-ready {
        transition: width 0.3s ease;
      }

      &:not(.active) {
        width: 0;
        min-width: 0 !important;
      }
    }
  }

  .menu-content {
    min-height: 0;
    overflow-y: auto;
  }
}
input.form-check-input {
  &:indeterminate,
  &:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
  }

  &:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
  }
}

.import-dropdown {
  display: inline-block;
}

div.hint-container {
  border-left: 3px solid var(--bs-light);
  padding-left: 5px;

  i {
    margin: 0px 5px;
  }
}

a {
  color: var(--bs-primary);
  text-decoration: unset;
}