@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    --font-poppins: 'Poppins', sans-serif;
    --font-merriweather: 'Merriweather', serif;
}

/* Custom styling for date picker */
.DateRangePicker {
  box-sizing: border-box; 
  border-radius: 0.25rem;
  border: 1px solid #ccc;
  width: 100%;
}
.DateRangePicker_picker {
  border-radius: 0.25rem;
  z-index: 100;
}
.DateRangePickerInput {
  box-sizing: border-box;
  border-radius: 0.25rem;
  border: 0px;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.DateRangePickerInput__withBorder {
  box-sizing: border-box;
  border-color: #d9d9d9 #ccc #b3b3b3;
  border-radius: 0.25rem;
}
.DateInput {
  width: 100%;
  border-radius: 0.25rem;
}
.DateInput_input {
  font-size: medium;
  padding: 0px 10px;
  line-height: 34px;
  border-bottom: 0px;
  border-radius: 0.25rem;
  text-align: center;
}
.DateInput_input__focused {
  border-radius: 0.25rem;
  text-align: center;
  color: #fff;
  background-color: #343434;
}
.CalendarDay__selected_span {
  background: #6B6B6B;
  border: 1px double #484848;
  color: #fff;
}
.CalendarDay__selected_span:hover {
  background: #F0ECE8;
  border: 1px double #6B6B6B;
  color: #343434;
}
.CalendarDay__selected, .CalendarDay__selected:active, .CalendarDay__selected:hover{
  background: #343434;
  border: 1px double #343434;
  color: #fff;
}
.CalendarDay__hovered_span {
  background: #F0ECE8;
  border: 1px double #6B6B6B;
  color: #484848;
}
.DayPickerKeyboardShortcuts_show__bottomRight:hover::before{
  border-right: 33px solid #C4C4C4;
}
.DayPickerKeyboardShortcuts_show__bottomRight::before{
  border-right: 33px solid #343434;
}

/* Custom color for multi-select dropdown */
.Select-value {
  color: #343434 !important;
  background-color: #F8F5F5 !important;
  border: 1px solid #b3b3b3 !important; 
}
.Select-value-icon {
  border-right: 1px solid #b3b3b3 !important; 
}
.Select.is-focused:not(.is-open) > .Select-control {
  border-color: #6B6B6B !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 3px rgba(107, 107, 107, 0.1) !important;
}
.VirtualizedSelectFocusedOption {
  background-color: #d9d9d9;
}