@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
* {
  scroll-behavior: smooth;
  font-family: poppins, sans-serif;
}
/* Przywrócenie domylnego formatowania html elementu ul */

:root {
  --scroll: #3d3d3d; /* Kolor początkowy zmiennej */
}

[data-theme="purple"] {
  --text: #a600cf;
  --shadow: #a78bfa;
}

[data-theme="green"] {
  --text: #22c55e;
  --shadow: #4ade80;
}

[data-theme="blue"] {
  --text: #27cbff;
  --shadow: #48cae4;
}

[data-theme="yellow"] {
  --text: #eab308;
  --shadow: #facc15;
}

::-webkit-scrollbar {
  width: 5px;
  height: 7px;
  background: #1c1c1c;
}

::-webkit-scrollbar-thumb {
  background: var(--text);
  border-radius: 10px;
  border: 1px solid transparent;
  background-clip: padding-box;
  transition: all 0.3s ease-in-out;
}

::-webkit-scrollbar-thumb:hover {
  background: #fff;
}

.theme-shadow:hover {
  box-shadow: 0px 13px 20px var(--text) !important;
}

.theme-shadow-hover:hover {
  box-shadow: 0px 10px 20px var(--shadow) !important;
}

.theme-shadow-button:hover {
  box-shadow: 0px 6px 20px var(--text) !important;
}

.theme-text {
  color: var(--text) !important;
}

.theme-text-focus:focus {
  color: var(--text) !important;
}

.theme-text-hover:hover {
  color: var(--shadow) !important;
}

.theme-bg {
  background-color: var(--text) !important;
}

.theme-bg-hover:hover {
  background-color: var(--shadow) !important;
}

.theme-border {
  border-color: var(--text);
}

.theme-border-focus:focus {
  border-color: var(--text) !important;
}

.theme-ring-focus:focus {
  --tw-ring-color: var(--text);
}

.box-shadow {
  box-shadow: 13px 14px 60px -13px var(--text);
}

.theme-bg-gradient {
  background: rgb(14, 14, 14);
  background: linear-gradient(
    167deg,
    #0e0e0e77 55%,
    var(--text) 78%,
    var(--shadow) 97%
  );
}

/* .textoutlined {
  font-style: italic;
  -webkit-text-stroke-color: var(--text);
  -webkit-text-stroke-width: 1px;
} */

.bg-zoom {
  background-size: auto 120%;
  transition: all 0.3s ease-in-out;
}

.bg-zoom:hover {
  background-size: auto 100%;
}
.neo-shadow {
  border-radius: 30px;
  background: #171717;
  box-shadow: 20px 20px 60px #171717, -20px -20px 60px #151515;
}

.input {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-bg-opacity: 1;
  background-color: #292929;
  border-radius: 0.75rem;
  color: #ffffff;
}

.input:focus {
  outline: 1px solid var(--text);
  /* border: 1px solid #a84bbb; */
}

.flip-card {
  background-color: transparent;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card-inner-rotate {
  transform: rotateX(180deg);
  z-index: 0;
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateX(180deg);
}

/* ----------------------------------------------
 * Generated by Animista on 2023-11-11 10:19:32
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

.sidenav-button-active {
  background-color: #1c1c1c97 !important;
  color: var(--text) !important;
}
@-webkit-keyframes scale-up-hor-left {
  0% {
    -webkit-transform: scaleX(0.4);
    transform: scaleX(0.4);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
}
@keyframes scale-up-hor-left {
  0% {
    -webkit-transform: scaleX(0.4);
    transform: scaleX(0.4);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
  100% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
}
@-webkit-keyframes scale-down-hor-left {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
  100% {
    -webkit-transform: scaleX(0.3);
    transform: scaleX(0.3);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
}
@keyframes scale-down-hor-left {
  0% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
  100% {
    -webkit-transform: scaleX(0.12);
    transform: scaleX(0.12);
    -webkit-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
  }
}

.scale-up-hor-left {
  -webkit-animation: scale-up-hor-left 0.3s cubic-bezier(0.39, 0.575, 0.565, 1)
    both;
  animation: scale-up-hor-left 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

.scale-down-hor-left {
  -webkit-animation: scale-down-hor-left 0.3s
    cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: scale-down-hor-left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-left {
  -webkit-animation: slide-left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.slide-left-long {
  -webkit-animation: slide-left 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-left 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes slide-left {
  0% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-left {
  -webkit-animation: slide-left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.slide-left-long {
  -webkit-animation: slide-left 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: slide-left 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.ql-size-huge {
  font-size: 2.5em;
}

.ql-size-large {
  font-size: 1.5em;
}

.ql-size-small {
  font-size: 0.75em;
}
.lds-dual-ring {
  display: inline-block;
  width: 80px;
  height: 80px;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.tooltip {
  position: relative;
  /* Dodatkowe style */
}

.tooltip .tooltip-text {
  visibility: hidden;
  min-width: 220px;
  background-color: #333;
  color: #fff;
  font-size: 12px;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  /* left: 50%; */
  margin-left: -100px;
  opacity: 0;
  transition: opacity 0.3s;
  /* Dodatkowe style */
}

.tooltip .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  /* Dodatkowe style */
}

.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  /* Dodatkowe style */
}

/* Kalendarz */
.fc-dayGrid-view {
  font-size: 14px;
  color: #333; /* Kolor tekstu dni */
}

/* Przyciski poprzedniego i następnego miesiąca */
.fc-prev-button,
.fc-next-button {
  background-color: #eee; /* Kolor tła przycisków */
  color: #333; /* Kolor ikony */
  border: none;
  font-size: 18px;
  margin: 0 5px;
}

/* Dni w tygodniu (poniedziałek, wtorek, ...) */
.fc-day-header {
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  color: #666; /* Kolor tekstu dni tygodnia */
}

/* Dni w kalendarzu */
.fc-day {
  border: 1px solid #3d3d3d !important; /* Grubość i kolor obramowania komórek */
  background-color: #0e0e0e; /* Kolor tła komórek */
  color: #8d8d8d;
  text-align: center !important;
}

.fc-day a {
  text-align: center !important;
}

/* Komórka z wybranym dniem */
.fc-day.fc-day-selected {
  background-color: #ccc; /* Kolor tła wybranego dnia */
}

/* Tekst w komórce z wybranym dniem */
.fc-day.fc-day-selected a {
  color: #fff; /* Kolor tekstu wybranego dnia */
}

/* Komórka z dzisiejszym dniem */
.fc-day.fc-today {
  background-color: #0e0e0e; /* Kolor tła dzisiejszego dnia */
}

/* Tekst w komórce z dzisiejszym dniem */
.fc-day.fc-today a {
  color: #f00; /* Kolor tekstu dzisiejszego dnia */
}

/* Przycisk dodawania wydarzenia */
.fc-addEvent-button {
  background-color: #4caf50; /* Kolor tła przycisku dodawania wydarzenia */
  color: #fff; /* Kolor tekstu przycisku */
  border: none;
  padding: 8px 12px;
  font-size: 14px;
  margin-top: 20px;
}

/* Styl dla wydarzeń w kalendarzu */
.fc-event {
  background-color: #2196f3; /* Kolor tła wydarzenia */
  color: #fff; /* Kolor tekstu wewnątrz wydarzenia */
  border: none;
  /* padding: 5px 10px; */
  font-size: 0px;
  cursor: pointer;
  border-radius: 3px;
  height: 1px;
}
.fc-col-header-cell-cushion {
  font-weight: 200;
  font-size: 0.9rem;
}

.fc-daygrid-day-top {
  align-items: center;
  justify-content: center;
}

.fc-theme-standard td {
  border: solid 1px #3d3d3d !important;
  border-radius: 10px !important;
}

.fc-theme-standard th {
  border: none !important;
}

/* Styl dla howerowania nad wydarzeniem */
.fc-event:hover {
  opacity: 0.8; /* Zmniejszenie przeźroczystości przy najechaniu na wydarzenie */
}

.fc-view-harness,
.fc-col-header,
.fc-daygrid-body,
.fc-scrollgrid-sync-table {
  /* height: 100px; */
  width: 100% !important;
  max-height: 400px !important;
}

.fc-toolbar-title {
  font-size: 1rem !important;
  color: #fff;
}

.fc-today-button,
.fc-prev-button,
.fc-next-button {
  font-size: 0.7rem !important;
  background-color: #1c1c1c !important;
  border-color: #3d3d3d !important;
  border-radius: 10px !important;
}

.fc-today-button:hover,
.fc-prev-button:hover,
.fc-next-button:hover {
  background-color: #3d3d3d !important;
  border-color: #3d3d3d !important;
}

.fc-scrollgrid {
  border: none !important;
}

option:checked {
  background-color: #3d3d3d !important;
}

option {
  background-color: #1c1c1c !important;
  padding: 0.5rem !important;
}

option:checked::after {
  color: #3d3d3d !important;
}

/* Style dla pola wyboru (checkbox) */
input[type="checkbox"] {
  /* Ukryj domyślny wygląd pola wyboru */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Ustaw niestandardowy rozmiar pola wyboru */
  width: 20px;
  height: 20px;
  /* Dodaj niestandardowy wygląd */
  border: 1px solid #3d3d3d; /* Kolor obramowania */
  border-radius: 4px; /* Zakrąglenie */
  position: relative;
  background-color: #1c1c1c; /* Kolor tła */
}

input[type="checkbox"]:focus {
  /* Zaznaczenie koloru obramowania po zaznaczeniu */
  border-color: var(--text);
  outline: none;
  --tw-ring-inset: inset;
  --tw-ring-offset-width: 0px;
}

/* Styl dla tła pola wyboru (checkbox) po zaznaczeniu */
input[type="checkbox"]:checked::before {
  content: "";
  display: block;
  position: absolute;
  /* Zaznaczenie koloru tła po zaznaczeniu */
  background-color: var(--text);
  /* Ustawienie rozmiaru tła */
  width: 14px;
  height: 14px;
  /* Pozycjonowanie tła */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 2px; /* Zakrąglenie tła */
}

input[type="checkbox"]::before:focus {
  /* Zaznaczenie koloru obramowania po zaznaczeniu */
  border-color: var(--text);
  outline: none;
  --tw-ring-inset: inset;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}