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

@font-face {
  font-family: 'Lato';
  src: url('../fonts/lato/Lato-Regular.eot');
  src: local('Lato Regular'), local('Lato-Regular'),
      url('../fonts/lato/Lato-Regular.eot?#iefix') format('embedded-opentype'),
      url('../fonts/lato/Lato-Regular.woff2') format('woff2'),
      url('../fonts/lato/Lato-Regular.woff') format('woff'),
      url('../fonts/lato/Lato-Regular.ttf') format('truetype'),
      url('../fonts/lato/Lato-Regular.svg#Lato-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/lato/Lato-Bold.eot');
  src: local('Lato Bold'), local('Lato-Bold'),
      url('../fonts/lato/Lato-Bold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/lato/Lato-Bold.woff2') format('woff2'),
      url('../fonts/lato/Lato-Bold.woff') format('woff'),
      url('../fonts/lato/Lato-Bold.ttf') format('truetype'),
      url('../fonts/lato/Lato-Bold.svg#Lato-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/lato/Lato-Light.eot');
  src: local('Lato-Light'),
      url('../fonts/lato/Lato-Light.eot?#iefix') format('embedded-opentype'),
      url('../fonts/lato/Lato-Light.woff2') format('woff2'),
      url('../fonts/lato/Lato-Light.woff') format('woff'),
      url('../fonts/lato/Lato-Light.ttf') format('truetype'),
      url('../fonts/lato/Lato-Light.svg#Lato-Light') format('svg');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  --cinza-300: rgb(209 213 219);
  --cinza-400: rgb(156 163 175);
  --border-default: #e5e7eb;
  --site-bg: #fff;
  --input-bg: #f3f4f6;
  --modal-bg: #fff;
  --text-color: #000;
  --clean-gray: #6C6C6C;
}

.dynamic-stroke {
  stroke: var(--text-color);
}
/* input {
  color-scheme: dark;
} */

dialog {
  border-radius: 8px;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

[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: var(--text-color);
}

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: #fff !important; /* Sobreescrevendo o padrão */
  opacity: .7;
  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;
}