@import "./fonts.css";
.menuContainer {
  position: relative;
  box-shadow: 0px 0px 1px 4px var(--top-menu-shadow);
  box-sizing: border-box;
}

.checkboxComputer:checked ~ .dropDownMenuContainer {
  display: block;
}

.dropDownMenuContainer {
  display: none;
  position: absolute;
  top: 100%;
  left: 2rem;
  z-index: 10;
  background-color: var(--dropdown-menu-background);
  white-space: nowrap; /* Prevent line breaks */
}

.dropDownMenuItem{
  padding: 10px 1rem;
  max-width: 100%;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropDownMenuItem:hover{
  background-color: var(--selected-item-background);
  color: var(--selected-menu-font);
}

.checkboxComputer:checked + .dropDownMenuContainer {
  display: block;
}
.checkboxComputer{
  display: none;
}

.barsComputer{
  position: absolute;
  display: block;
  top: 50%;
  transform: translateY(-50%);
  left: 2rem;
  width: 35px;
  filter: invert(97%) sepia(24%) saturate(953%) hue-rotate(179deg) brightness(169%) contrast(101%);
}

.menuItemsContainer{
  display: flex;
  flex-direction: row;
  gap: 60px;
  position: relative;
  align-items: center;
  justify-self: right;
}

.menuLogo{
  width: 6rem;
  padding: 0.5rem 0;
  justify-self: right;
  margin-left: 8rem;
}

.icone{
  width: 1.4rem;
  margin: 0;
  padding: 0;
  margin-bottom: -7px;
  filter: invert(94%) sepia(53%) saturate(3603%) hue-rotate(180deg) brightness(110%) contrast(105%);
}

.iconeFooter{
  filter: invert(45%) sepia(80%) saturate(3072%) hue-rotate(212deg) brightness(105%) contrast(96%)!important;
}

.iconesContainer{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.menuContainer{
  background-color: var(--top-menu-background);
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  display: grid;
  gap: 1em;
  grid-template-columns: 1fr 6fr 1fr;
  z-index: 50;
  align-items: center;
}

.bars{
  display: none;
  filter: invert(97%) sepia(24%) saturate(953%) hue-rotate(179deg) brightness(169%) contrast(101%);
}

.bars:hover{
  cursor: pointer;
}

.checkbox{
  display: none;
}

.checkbox:checked ~ .menuItemsContainer{
  transform: scaleY(1);
  height: auto;
  transition: transform 0.9s ease-in-out, height 0s;
  background-color: var(--top-menu-background);
}

.iconesContainerFooter{
  display: none;
}

.loggedUser{
  display: none;
}

@media only screen and (max-width: 700px) {
  .loggedUser{
    display: block;
  }

  .iconesContainerFooter {
    width: 150px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
  }

  .menuContainer {
    display: block;
  }

  .menuItemsContainer {
    margin-top: 4px;
    display: flex;
    width: 100%;
    flex-direction: column;
    position: absolute;
    align-items: center;
    gap: 6px;
    transform: scaleY(0);
    transform-origin: top;
    height: 0;
    overflow: hidden;
    transition: transform 0.1s ease-in-out, height 0s 0.01s;
    max-height: calc(100vh - 6rem);
    background-color: var(--dropdown-menu-background) !important;
    box-shadow: 0px 0px 3px 0px var(--input-panel-shadow);
    box-sizing: border-box;
  }

  .menuItem {
    width: 100%;
    text-align: center;
    color: var(--dropdown-menu-font) !important;
  }

  .dropDownMenuItem{
    display: none;
  }

  .menuItem:hover{
    background-color: var(--selected-item-background);
    color: var(--selected-menu-font) !important;
  }

  .menuLogo {
    margin-left: 2rem;
  }

  .barsComputer {
    display: none;
  }

  .bars {
    position: absolute;
    display: block;
    margin: 0;
    top: 50%;
    transform: translateY(-50%);
    right: 2rem;
    width: 35px;
  }

  .iconesContainer {
    display: none;
  }
}