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

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

.EZDrawer .EZDrawer__container {
  box-shadow: 0 0 10px 5px rgba(0, 3, 5, 0.4) !important;
}
div[data-slot="input-wrapper"],
div[data-slot="trigger"],
button[aria-haspopup="listbox"] {
  background-color: #ffffff !important;
  border-color: #abb1b7;
}
.select__control {
  border: 2px solid #abb1b7;
  border-radius: 10px;
  box-shadow: 0 0.125rem 0.25rem rgba(34, 41, 47, 0.075) !important;
}
.select__control svg {
  width: 16px;
}
.select__control svg path {
  fill: black;
}
.text-black {
  color: black;
}
label[data-slot="label"] {
  color: black !important;
}
body[dir="rtl"] a:not(a.btn-packages),
body[dir="rtl"] h4,
body[dir="rtl"] h3,
body[dir="rtl"] h2 {
  margin-left: 0px !important;
  margin-right: 5px !important;
}
body[dir="rtl"] button[data-slot="trigger"] svg {
  right: auto;
  left: 15px;
}
body[dir="rtl"] div[data-slot="input-field"],
body[dir="rtl"] div[data-slot="input"] {
  direction: ltr;
  text-align: start;
  justify-content: end;
}
body[dir="rtl"] div[data-slot="header-wrapper"]{
  direction: ltr;
}
input:-internal-autofill-selected {
  appearance: none !important;
  background-image: none !important;
  background-color: red !important;
  color: black !important;
}
input:focus {
  box-shadow: none !important;
}
input:not(input[data-filled-within="true"]):-webkit-autofill,
input:not(input[data-filled-within="true"]):-webkit-autofill:hover,
input:not(input[data-filled-within="true"]):-webkit-autofill:focus,
input:not(input[data-filled-within="true"]):-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: white !important;
}
input:not(input.form-control):-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

.autocomplete-off {
  position: fixed !important;
  opacity: 0 !important;
  top: -1000px !important;
  left: -1000px !important;
  height: 0 !important;
  width: 0 !important;
  border: 0 !important;
}

div[data-slot="thumb"] {
  background-image: url(../../../public/slider-middle-image.jpg);
  background-size: cover;
  width: 20px;
  height: 20px;
}
div[data-slot="thumb"] .slider-thumb {
  display: none;
}

.after\:bg-success::after {
  background-color: #2e8868 !important;
}
svg polyline {
  stroke: white !important;
}
.dir-ltr {
  direction: ltr !important;
}
.btn-toolbar {
  display: flex !important;
  background: transparent !important;
}
.draglayer {
  cursor: pointer !important;
}
body[dir="rtl"] tr[data-slot="grid-header-row"],
body[dir="rtl"] tbody[data-slot="grid-body"]
{
  direction: ltr !important;
}
body[dir="rtl"] button[data-slot="next-button"] svg{
  transform: rotate(0deg) !important;
}
body[dir="rtl"] button[data-slot="prev-button"] svg{
  transform: rotate(0deg) !important;
}
.react-datepicker__day--selected,
.react-datepicker__day--in-selecting-range,
.react-datepicker__day--in-range,
.react-datepicker__month-text--selected,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--in-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--in-range,
.react-datepicker__year-text--selected,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--in-range {
    border-radius: 0.3 rem;
    background-color: #42726F !important;
    color: #fff !important;
}

.react-datepicker__header {
    background: #42726F !important;
    color: #fff !important;
}

.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header {
    color: #fff !important;
}

.react-datepicker__day-name {
    color: #fff !important;
}

.react-datepicker__navigation--previous--disabled,
.react-datepicker__navigation--previous--disabled:hover {
    border-right-color: #fff !important;
}
body[dir="rtl"] .react-date-picker,
body[dir="rtl"] .react-datepicker__month-container,
body[dir="rtl"] .react-datepicker__time-container,
body[dir="rtl"] .react-datepicker__day-names, 
body[dir="rtl"] .react-datepicker__month,
body[dir="rtl"] .react-datepicker__time-list
{
  direction: ltr !important;
  text-align: end;
}



.react-datepicker__navigation--next {
    border-left-color: #fff !important;
}
.react-datepicker__time-container
    .react-datepicker__time
    .react-datepicker__time-box
    ul.react-datepicker__time-list
    li.react-datepicker__time-list-item--selected {
    background-color: #42726F !important;
}

.react-datepicker__time-container
    .react-datepicker__time
    .react-datepicker__time-box
    ul.react-datepicker__time-list
    li.react-datepicker__time-list-item--selected:hover {
    background-color: #2e8868 !important;
}

.react-datepicker-popper {
  z-index: 9999 !important;
}
.react-datepicker-wrapper{
  width: 100% !important;
}

 @layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  .height-revert-layer {
    height: revert-layer !important;
  }
  .blurry-text {
    color: transparent;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    user-select: none;
  }
}
.drop-zone-container-checkbox {
  flex-wrap: wrap;
}
.react-datepicker__year-dropdown, .react-datepicker__month-dropdown, .react-datepicker__month-year-dropdown {
    background-color: #42726f !important;
}