.date-range-container {
  position: relative;
  width: 17.5rem;
}

.calendar-container {
  display: flex;
  gap: 1.25rem;
  justify-content: space-between;
  max-width: 90vw;
  overflow-x: auto;
}

.date-range-popup {
  position: absolute;
  background: white;
  border: 0.0625rem solid #ccc;
  padding: 0.625rem;
  box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.anchor-bottom {
  top: 110%;
  left: 0;
}

.anchor-top {
  bottom: 110%;
  left: 0;
}

.anchor-left {
  right: 110%;
  top: 0;
}

.anchor-right {
  left: 110%;
  top: 0;
}

.calendar-separator {
  min-height: 100%;
  width: 0.0625rem;
  background-color: #ddd;
}

.navigation-icon-left {
  all: unset;
  position: absolute;
  top: 1rem;
  left: 1rem;
}

.navigation-icon-right {
  all: unset;
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.navigation {
  border: none;
  width: 1.875rem;
  height: 1.875rem;
  cursor: pointer;
  background-color: transparent;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navigation:hover {
  background: #ddd;
}
