@tailwind base;
@tailwind components;
@tailwind utilities;
@import url("fonts.css");

:root {
  --cinza-300: rgb(209 213 219);
  --cinza-400: rgb(156 163 175);
  --clean-gray: #262626;
  --dark-bg: #030303;
  --input-bg: #212121;
}


input {
  color-scheme: dark;
}

[x-cloak] { display: none !important; }

.note-editor h1 {
  font-size: 2.5rem;
}

.note-editor h2 {
  font-size: 2rem;
}

.note-editor h3 {
  font-size: 1.75rem;
}

.note-editor h4 {
  font-size: 1.5rem;
}

.note-editor h5 {
  font-size: 1.25rem;
}

.note-editor h6 {
  font-size: 1rem;
}

.note-modal .note-modal-footer {
  padding: 10px 30px;
  height: 60px;
}

.note-editor ul {
  list-style-type: disc;
  padding-inline-start: 40px;
}

.note-editor ol {
  list-style-type: decimal;
  padding-inline-start: 40px;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
   opacity: 1;
}
.custom-scrollbar::-webkit-scrollbar-track {
  border: 5px solid white;
  width: 50px;
}

.custom-scrollbar::-webkit-scrollbar-track-piece {
  background: #e2e8f0;
}
.custom-scrollbar::-webkit-scrollbar {
  height: .7rem;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #94a3b8;
  border-radius: 50px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: #748398;
}

body {
  overflow-x: hidden;
  font-family: "Lato";
  color: #FFF;
}

input, select {
  color: #2b2b2b;
}

.toast-close {
  mix-blend-mode: difference;
}

.swiper-pagination {
  position: relative !important; /* Sobreescrevendo o padrão */
  bottom: 0 !important;
  margin-top: 10px;
}

.swiper-button-next,
.swiper-button-prev {
  width: 45px !important;  /* Sobreescrevendo o padrão */
  height: 45px !important; /* Sobreescrevendo o padrão */
  padding: 10px;
  border-radius: 50%;
  background-color: #2b2b2b !important; /* Sobreescrevendo o padrão */
  transition: background-color 0.3s;
}

.swiper-button-next:hover,
.swiper-button-next:active,
.swiper-button-prev:hover,
.swiper-button-prev:active {
  opacity: .8;
}

.swiper-button-next:after, 
.swiper-button-prev:after {
  color: #F71E2E;
  font-size: 20px !important; /* Sobreescrevendo o padrão */
}

.swiper-button-disabled {
  opacity: 0 !important;
  transition: opacity 0.3s;
}

/* Estilo para quando o campo está autofill */
input:-webkit-autofill {
  background-color: #212121 !important;
  border: none;
}

input:-webkit-autofill:focus {
  background-color: #212121 !important;
  border: none;
}

/* Para Firefox */
input:-moz-autofill {
  background-color: #212121 !important;
  border: none;
}

/* Para todos os navegadores que suportam */
input:autofill {
  background-color: #212121 !important;
  border: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
  -webkit-box-shadow: 0 0 0 30px #212121 inset !important;
}

/*Change text in autofill textbox*/
input:-webkit-autofill{
  -webkit-text-fill-color: #fff !important;
}