.navbar {
  height: rem(100%);
  display: flex;
  flex-direction: column;
  background-color: #1c4a73;
  width: 100%;
}

.navbarMain {
  flex: 1;
  overflow-x: hidden;

}


.header {
  padding: var(--mantine-spacing-xs);
  /* margin-bottom: var(--mantine-spacing-sm); */
  /* border-bottom: rem(1px) solid; */
  /* z-index: 1000; */
  background-image: linear-gradient(rgba(27, 26, 26, 0.5),
      rgba(29, 27, 27, 0.5)),
    url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-bB7j40qe-mSJ-howmBO7T6tAghPrtfLvDw&s');
  height: rem(100px);
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  align-items: end;
}

.footer {
  padding-top: var(--mantine-spacing-md);
  margin-top: var(--mantine-spacing-md);
  border-top: rem(1px) solid var(--mantine-color-dark-3);
}

.version {
  background-color: #57647091;
  color: var(--mantine-color-white);
  overflow: hidden;
}


.link {
  display: flex;
  align-items: center;
  text-decoration: none;
  font-size: var(--mantine-font-size-sm);
  color: rgb(161, 161, 161);
  padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
  margin: 0 var(--mantine-spacing-xs);
  border-radius: var(--mantine-radius-sm);
  font-weight: 500;
  cursor: pointer;

  @mixin hover {
    /* background-color: #00a164; */
    color: var(--mantine-color-white);

    .linkIcon {
      color: var(--mantine-color-white);
    }
  }

  &[data-active] {

    &,
    &:hover {
      box-shadow: var(--mantine-shadow-sm);
      background-color: #6089afb7;
      color: var(--mantine-color-white);

      .linkIcon {
        color: var(--mantine-color-white);
      }
    }
  }
}

.linkIcon {
  color: rgb(161, 161, 161);
  width: rem(20px);
  height: rem(22px);
}

.itemLabel {
  height: rem(22px) !important;
  overflow: hidden;
  margin-left: var(--mantine-spacing-sm);
}

.labelCompactMenu {
  display: none;
}