:root {
  --bg: #24262d;
  --text: #505050;
  --color1: rgb(255, 255, 255);
  --color2: rgb(157, 172, 164);
  --divider: rgba(255,255,255,0.16);
}

#styled-numeric-input input:invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    outline: none;
  }

.dropdown-no-hover:hover {
    background-color: white;
}
  
.dimension-slider .rc-slider-track {
    background-color: #f28730; /* Red slider track */
}

.dimension-slider .rc-slider-handle {
  border-color: #f28730; /* Red slider track */
}

.dimension-slider .rc-slider-dot-active {
  border-color: #f28730; /* Red slider track */
}

.dimension-slider .rc-slider-disabled {
  border-color: #fff; /* Red slider track */
}

.dimension-slider .rc-slider-disabled .rc-slider-track{
  background-color: #ccc; /* Red slider track */
}

.dimension-slider .rc-slider-disabled .rc-slider-handle, .rc-slider-disabled .rc-slider-dot {
  border-color: #ccc; /* Red slider track */
}

.ag-center-cols-container .landmark-rows{
  --ag-background-color: lightpink;
  --ag-odd-row-background-color: lightpink;
  --ag-row-hover-color: lightcoral;
}

.accommodation-name {
  background-color: darksalmon;
}

.context-menu {
  &, & * {
    user-select: none;
    cursor: default;
  }

  font-size: 0.875rem;

  color: var(--text);
  list-style: none;
  margin: 0;
  padding: 0.05em 0.25em;

  border: 1px solid transparent;
  border-right-color: rgba(255, 255, 255, 0.15);
  border-bottom-color: rgba(255, 255, 255, 0.15);
  border-left-color: rgba(0, 0, 0, 0.15);
  border-top-color: rgba(120, 116, 116, 0.15);
  border-radius: 2px;

  position: absolute;
  min-width: 22em;
  z-index: 1000;

  background: var(--color1);
  box-shadow: 2px 3px 10px -3px #69696a;

  > li {
    padding: 0.3em 1.5em 0.35em 2.8em;
    border-radius: 3px;
    position: relative;
    display: flex;

    &::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      border-radius: 3px;
      z-index: -1;
      background-color: rgba(97, 97, 97, 0.37);
      mix-blend-mode: color-dodge;
      transition: opacity 0.15s cubic-bezier(.55,.06,.68,.19);
      opacity: 0;
    }

    &.hilight {
      font-weight: 500;
      padding-bottom: 0.5em;
      color: white;
    }

    &:not(&.nope):hover {
      color: #3a3a3a;
      background-color: #e2e2e2;
    }

    &:hover > .fa,
    &.hilight > .fa {
        opacity: 1;
    }

    &:last-child {
      margin-bottom: 0.25em;
    }

    &:first-child {
        margin-top: 0.25em;
    }

    &.nope {
      color: rgba(white, 0.3);
    }

    &.active {
      animation: flash 0.5s ease 1;
    }

    &:nth-of-type(1) {
      margin-top: .5em;
    }

    &:not(&.nope) > .fa {
      opacity: 0.5;
      transition: all 0.2s ease;
      align-self: center;
      margin-top: 0.3em;
    }

    &.nope > .fa {
      opacity: 0.3;
      transition: all 0.2s ease;
      align-self: center;
      margin-top: 0.3em;
    }
    
    &.nope > .context-menu-item-text {
      color: rgb(208, 207, 207);
    }

    &.nope > small {
      color: rgb(208, 207, 207);
    }

    i {
      font-style: normal;
    }

    .context-menu-item-text {
      margin-right: auto;
      margin-bottom: 0;
    }
    
    
    
  }

  /*dividers*/
  .div {
    border-bottom: 1px solid var(--divider);
    padding: 0;
    margin-top: 0.5em;
    margin-bottom: 0.6em;
    background-color: rgb(165, 165, 165);
  }

  .fa {
    font-style: normal;
    position: absolute;
    transform: translateX(-2.4em);
    width: 1.2em;
    height: 1.2em;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }

  small {
    color: gray;
    font-style: normal;
  }

  span.size {
    position: absolute;
    font-size: 0.675em;
    left: 1.2em;
    top: 0.8em;
    text-shadow: aliceblue;
  }
}

@keyframes flash {
  0% {
      background: rgba(white, 0);
  }
  7% {
      background: rgba(white, 0.2);
  }
  14% {
      background: rgba(white, 0);
  }
  21% {
      background: rgba(white, 0.3);
  }
}