@font-face {
  src: url(Fonts/Feather.ttf);
  font-family: "Feather";
}

@font-face {
  src: url(Fonts/FontAwesome6_Brands.ttf);
  font-family: "FontAwesome6_Brands";
}

@font-face {
  src: url(Fonts/FontAwesome6_Regular.ttf);
  font-family: "FontAwesome6_Regular";
}

@font-face {
  src: url(Fonts/FontAwesome6_Solid.ttf);
  font-family: "FontAwesome6_Solid";
}

@font-face {
  src: url(Fonts/MaterialIcons.ttf);
  font-family: "MaterialIcons";
}

@font-face {
  src: url(Fonts/MaterialCommunityIcons.ttf);
  font-family: "MaterialCommunityIcons";
}

@font-face {  
  src: url(Fonts/AntDesign.ttf);
  font-family: "AntDesign";
}

@font-face {
  src: url(Fonts/Barlow-Light.ttf);
  font-family: "Barlow-Light";
}

@font-face {
  src: url(Fonts/Barlow-Regular.ttf);
  font-family: "Barlow-Regular";
}

@font-face {
  src: url(Fonts/Barlow-SemiBold.ttf);
  font-family: "Barlow-SemiBold";
}

@font-face {
  src: url(Fonts/Barlow-Thin.ttf);
  font-family: "Barlow-Thin";
}

:root {
  --backgroundDark: #121212;
  --backgroundDarkSecondary: #1F1F1F;
  --backgroundLight: #fff;
  --backgroundLightSecondary: #F5F5F5;
  --textDark: #fff;
  --textLight: #151515;
  --borderDark: #ffffff61;
  --borderLight: #15151561;
  --primary: #0098FA;
  --secondary: #0098fac7;
  --error: #d13232;
}

#app-root {
  display: flex;
  flex: 1 1 100%;
  height: 100vh;
}

textarea:focus, input:focus{
  outline: none;
}

.react-datepicker-wrapper input {
  background: transparent;
  border: none !important;
  font-size: 16px;
}

.react-datepicker {
  border-width: 2px !important;
}

.react-datepicker-wrapper input {
  width: 100%;
}

.react-datepicker__triangle {
  display: none;
}

.react-datepicker__time-list-item {
  padding: 10px 0 0 0 !important;
  height: 25px !important;
}

.react-datepicker__input-container {
  padding: 7px 0px 3px 3px;
}

.react-datepicker__header.react-datepicker__header--time {
  display: none;
}

.react-datepicker__day--keyboard-selected, .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected {
  background-color: transparent !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,
.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: var(--primary) !important;
}

[data-testid="agenda"] > :nth-child(3) {
  padding-left: 16px !important;
  padding-right: 16px !important;  
}

[data-testid="agenda"] > :nth-child(3) > div {
  display: 'flex' !important;
  flex: 1 1 0% !important;
}

div:nth-child(1):has(+ [data-testid="navigator"]) {
  margin-bottom: 74.5px;
}

[data-testid="navigator"] {
  bottom: 0;
  width: 100%;
  position: fixed;
}

@media screen and (prefers-color-scheme: dark) {
  .react-datepicker-wrapper input {
    color: #fff;
  }

  .react-datepicker__day:hover, .react-datepicker__month-text:hover, .react-datepicker__quarter-text:hover, .react-datepicker__year-text:hover,
  .react-datepicker__header {
    background-color: var(--backgroundDarkSecondary) !important;
    color: var(--textDark) !important;
  }

  .react-datepicker,
  .react-datepicker__time-box,
  .react-datepicker__month-container {
    background-color: var(--textLight) !important;
  }

  .react-datepicker__time-box,
  .react-datepicker__month div,
  .react-datepicker__header div {
    color: #fff;
  }

  .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 {
    background-color: var(--secondary) !important;
  }

  /* PICKER SELECIONADO */
  .r-left-7b7h2f {
    background-color: var(--primary) !important;
  }

  .react-datepicker__time-list-item--selected:hover {
    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:hover {
    background-color: var(--backgroundDarkSecondary) !important;
    color: var(--textDark) !important;
  }

}

@media screen and (prefers-color-scheme: light) {
  .react-datepicker-wrapper input {
    color: var(--textLight);
  }

  .react-datepicker__day:hover, .react-datepicker__month-text:hover, .react-datepicker__quarter-text:hover, .react-datepicker__year-text:hover {
    background-color: var(--backgroundLightSecondary) !important;
    color: var(--textLight) !important;
  }

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

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

  .react-datepicker,
  .react-datepicker__time-box,
  .react-datepicker__month-container {
    background-color: #fff !important;
  }

  .react-datepicker__time-box,
  .react-datepicker__month div,
  .react-datepicker__header div {
    color: var(--textLight);
  }

  .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 {
    background-color: var(--secondary) !important;
  }

  /* PICKER SELECIONADO */
  .r-left-7b7h2f {
    background-color: var(--primary) !important;
  }

  .react-datepicker__time-list-item--selected:hover {
    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:hover {
    background-color: var(--backgroundLightSecondary) !important;
    color: var(--textLight) !important;
  }
}