:root {
  --granite: #56585A;
  --stone: #aaa9a9;
  --maroon: #9F2065;
  --mustard: #D99B28;
  --mustard-RGB: 217, 155, 40;
  --light-stone: #f7f7f7;
  --primary: var(--maroon);
  --secondary: var(--mustard);
  --white: white;
  --mainTextColor: var(--granite);
  --elementBackgroundColor: var(--white);
  --inputHeight: 3rem;
  --inputBackgroundColor: var(--light-stone);

  /* Buttons */
  --primaryButtonColor: var(--white);
  --primaryButtonBackgroundColor: var(--secondary);
  --secondaryButtonColor: var(--mainTextColor);
  --secondaryButtonBackgroundColor: var(--light-stone);
  --buttonHeight: 2.5rem;
  --buttonFontSize: medium;
  --buttonBorderRadius: 0.3rem;
}

body {
  color: var(--mainTextColor);
}

button {
  border-radius: .3rem;
  &:hover {
    background-image: linear-gradient(rgb(0 0 0/10%) 0 0);
    transition: 0.7s;
  }
}

/* Navbar menu */
#menu-bar, #menu-bar-under {
  width: 100% !important;
}

#menu-bar {
  background: var(--white); 
  position: absolute !important;
  z-index: 1000;
}

#menu-bar-under {
  background: var(--granite); 
  position: fixed !important;
  z-index: 500;

  img {
    filter: invert();
  }
}

#__next {
  background-color: var(--primary);
}

#menuSearchButton, #applyButton {
  background: var(--secondary);
  padding: .5rem 1rem;
  color: var(--white);
  border-radius: var(--buttonBorderRadius);

  span {
    border-radius: .3rem;
    display: block;
    margin: 0;
    font-size: .75rem;
  }

  &:hover {
    background-image: linear-gradient(rgb(0 0 0/10%) 0 0);
    transition: 0.7s;
  }

  svg {
   display: none; 
  }
}

/* Inputs */

input {
  height: var(--inputHeight);
}

div.tt-combox {
  background-color: var(--inputBackgroundColor);
}

.tt-combox input {
  background-color: inherit;
}

/* Dropdown options */
ul[id*=headlessui-combobox-options] {
  z-index: 40;
  
  div {
    display: flex;
    align-items: center;
    color: var(--black);

    &:active {
      background-color: var(--secondary);
      color: var(--white);
    }

    &:hover {
      cursor: pointer;
      background-color: rgba(var(--mustard-RGB), 0.5); 
      color: var(--white);
    }
  }
}

.bg-dd-selected {
  color: var(--white) !important;
  background-color: var(--secondary) !important;
}

.tt-combobox-active {
  background-color: white;
  border-radius: 5px;
  border: solid 1px var(--secondary);  
}
 
.tt-combobox-sleep {
  border: solid 1px #E4E4E4;
  border-radius: 5px; 
}