@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
:root {
  font-size: 16px;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
}

/* width */
::-webkit-scrollbar {
  width: 0.8em;
}

/* Track */
::-webkit-scrollbar-track {
  background: #1d1d1e;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #e6e6e6;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #5bacfa;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #262626;
}

::-moz-placeholder {
  color: #262626;
  opacity: 0.4;
}

::placeholder {
  color: #262626;
  opacity: 0.4;
}

#starterSite {
  border-radius: 2em;
  color: #ffffff;
  background-color: #1d1d1e;
  height: 50%;
  min-height: 40vh;
  width: 70%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
#starterSite section {
  display: flex;
  gap: 2em;
}
#starterSite h1 {
  font-weight: 800;
  font-size: 3rem;
}
#starterSite button {
  background-color: #e6e6e6;
  border: unset;
  padding: 0.5em 1.5em;
  border-radius: 2em;
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color 0.1s ease-in-out;
}
#starterSite button:hover {
  background-color: #5bacfa;
}
#starterSite footer {
  font-weight: 100;
}

#createCamp {
  border-radius: 2em;
  color: #ffffff;
  background-color: #1d1d1e;
  height: 90vh;
  margin: 1em 0;
  width: 70%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
#createCamp h1 {
  font-weight: 800;
  font-size: 3rem;
}
#createCamp #basicCampInfo-Container {
  display: flex;
  gap: 2em;
}
#createCamp #basicCampInfo-Container .basicCampInfo {
  display: flex;
  flex-direction: column;
  gap: 1em;
  flex-wrap: wrap;
}
#createCamp #basicCampInfo-Container .basicCampInfo section {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  font-size: 1.2rem;
  font-weight: 500;
}
#createCamp #basicCampInfo-Container .basicCampInfo section input {
  width: 15em;
  background-color: #e6e6e6;
  border: unset;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  font-weight: 700;
  font-size: 1rem;
}
#createCamp #campCeny {
  padding: 2em 4em;
  border-radius: 1em;
  background-color: #262626;
  display: flex;
  flex-direction: column;
  gap: 1em;
  max-height: 50%;
  width: 90%;
  flex-wrap: wrap;
  align-items: center;
  overflow: auto;
}
#createCamp #campCeny section:not(#lightOpis) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 10em;
  font-size: 1.3rem;
}
#createCamp #campCeny section:not(#lightOpis) input {
  width: 6em;
  background-color: #e6e6e6;
  border: unset;
  padding: 0.5em 1em;
  border-radius: 1em;
  font-weight: 700;
  font-size: 1.1rem;
}
#createCamp #campCeny #lightOpis {
  font-weight: 100;
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  padding: 0 0.4em 0 0;
  width: 13em;
}

.btnNext {
  position: fixed;
  bottom: 2em;
  right: 2em;
  background-color: #e6e6e6;
  border: unset;
  padding: 0.5em 1.5em;
  border-radius: 2em;
  font-weight: 700;
  font-size: 1.5rem;
  cursor: pointer;
  transition: background-color 0.1s ease-in-out;
}
.btnNext:hover {
  background-color: #5bacfa;
}

.debugger {
  position: fixed;
  top: -100%;
  z-index: 1000;
  border: 0.1em solid red;
  left: 5vh;
  background-color: #e6e6e6;
  padding: 1.5em 3em;
  border-radius: 1em;
  transition: all 0.7s ease-in-out;
}
.debugger img {
  position: absolute;
  top: 0.5em;
  left: 0.7em;
}

.inputError {
  border: 3px solid red !important;
}

#coach-Container {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
  height: 95vh;
  margin: 1em 0;
}
#coach-Container #coachList {
  width: 25%;
  display: flex;
  flex-direction: column;
  gap: 1em;
  background-color: #1d1d1e;
  color: #ffffff;
  border-radius: 2em;
  padding: 2em 4em;
}
#coach-Container #addCoach {
  background-color: #1d1d1e;
  border-radius: 2em;
  padding: 2em 4em;
  display: flex;
  flex-direction: column;
  gap: 2em;
  width: 70%;
  color: #ffffff;
  max-height: 95vh;
  overflow: auto;
}
#coach-Container #addCoach #coachInfo {
  display: flex;
  align-items: flex-end;
  gap: 2em;
}
#coach-Container #addCoach #coachInfo section {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  font-size: 1.2rem;
  font-weight: 500;
}
#coach-Container #addCoach #coachInfo section input {
  width: 13em;
  background-color: #e6e6e6;
  border: unset;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  font-weight: 700;
  font-size: 1rem;
}
#coach-Container #addCoach #coachInfo section input[type=number] {
  width: 8em;
}
#coach-Container #addCoach #coachInfo section input[name=coachWaluta] {
  width: 6em;
}
#coach-Container #addCoach h1 {
  font-weight: 800;
  font-size: 3rem;
  text-align: center;
}
#coach-Container #addCoach #coachSchedudle {
  display: flex;
  background-color: #262626;
  border-radius: 1em;
  padding: 2em 4em;
  gap: 1em;
  flex-direction: column;
  overflow: auto;
  min-height: 40vh;
}
#coach-Container #addCoach #coachSchedudle .coachSchedudle-item {
  display: flex;
  gap: 1em;
  align-items: center;
  overflow: visible;
  padding: 1em;
}
#coach-Container #addCoach #coachSchedudle .coachSchedudle-item::-webkit-scrollbar {
  height: 0.5em;
}
#coach-Container #addCoach #coachSchedudle .coachSchedudle-item p {
  font-weight: 600;
  width: 10em;
}
#coach-Container #addCoach #coachSchedudle .coachSchedudle-item input {
  background-color: #e6e6e6;
  border: unset;
  padding: 0.5em 1em;
  border-radius: 1em;
  font-weight: 700;
  font-size: 1.1rem;
}
#coach-Container #addCoach #coachSchedudle input[type=time] {
  min-width: 7em;
}
#coach-Container #addCoach #coachSchedudle .dodajPrzerwe {
  background-color: #e6e6e6;
  border: unset;
  padding: 0.5em 1em;
  border-radius: 2em;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  margin: 0 1em;
  transition: background-color 0.1s ease-in-out;
}
#coach-Container #addCoach #coachSchedudle .dodajPrzerwe:hover {
  background-color: #5bacfa;
}
#coach-Container #addCoach #btnAddCoach {
  border: unset;
  padding: 0.5em 1.5em;
  border-radius: 2em;
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color 0.1s ease-in-out;
  align-self: flex-end;
}
#coach-Container #addCoach #btnAddCoach:hover {
  background-color: #5bacfa;
}

.firstLineHelp {
  position: relative;
  overflow: visible;
}

.firstLineHelp::before {
  position: absolute;
  top: -1.5em;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  font-weight: 100;
  color: #ffffff;
}

.flProwadzacyGrup {
  position: relative;
  background-color: #fff;
  border-radius: 1em;
  padding: 0.5em 1em;
}

.flOdGrup,
.flDoGrup,
.flRodzajGrup {
  position: relative;
}

.flOd::before {
  content: "Od";
}

.flDzienPrac::before {
  content: "Dzień pracujący";
  text-align: center;
  top: -3em;
}

.flOdGrup::before {
  content: "Od";
  top: -1.3em;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
}

.flDo::before {
  content: "Do";
}

.flRodzajGrup::before {
  content: "Rodzaj";
  top: -1.3em;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
}

.flDoGrup::before {
  content: "Do";
  top: -1.3em;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
}

#flPrzerwa::before {
  content: "Godz. przerwy";
  white-space: nowrap;
}

#flDodajP::before {
  content: "Niest. Przerwa";
  white-space: nowrap;
}

.CoachVerticalLine {
  height: 100%;
  border-right: 0.1em solid #e6e6e6;
}

.usunPrzerwe {
  background-color: #e6e6e6;
  border: unset;
  padding: 0.5em 1em;
  border-radius: 2em;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background-color 0.1s ease-in-out;
}
.usunPrzerwe:hover {
  background-color: #5bacfa;
}

.coach-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em 2em;
  background-color: #262626;
  border-radius: 1em;
  gap: 1em;
  text-align: center;
}
.coach-item p {
  font-weight: 600;
}
.coach-item span {
  font-weight: 300;
  font-size: 0.8rem;
}

#grup-Container {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
}
#grup-Container #addGrup {
  background-color: #1d1d1e;
  border-radius: 2em;
  padding: 2em 4em;
  display: flex;
  flex-direction: column;
  gap: 2em;
  width: 90%;
  color: #ffffff;
  max-height: 95vh;
  overflow: hidden;
}
#grup-Container #addGrup #pairInfo {
  display: flex;
  gap: 1em;
}
#grup-Container #addGrup #pairInfo section {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  font-size: 1.2rem;
  font-weight: 500;
}
#grup-Container #addGrup #pairInfo section input {
  width: 13em;
  background-color: #e6e6e6;
  border: unset;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  font-weight: 700;
  font-size: 1rem;
}
#grup-Container #addGrup h1 {
  font-weight: 800;
  font-size: 3rem;
  text-align: center;
}
#grup-Container #addGrup #grupSchedudle {
  display: flex;
  background-color: #262626;
  border-radius: 1em;
  padding: 2em 4em;
  gap: 1em;
  flex-direction: column;
  overflow: auto;
}
#grup-Container #addGrup #grupSchedudle .grupSchedudle-item {
  display: flex;
  gap: 1em;
  align-items: center;
  overflow: visible;
  padding: 1em;
}
#grup-Container #addGrup #grupSchedudle .grupSchedudle-item::-webkit-scrollbar {
  height: 0.5em;
}
#grup-Container #addGrup #grupSchedudle .grupSchedudle-item p {
  font-weight: 600;
  width: 10em;
}
#grup-Container #addGrup #grupSchedudle .grupSchedudle-item input {
  background-color: #e6e6e6;
  border: unset;
  padding: 0.5em 1em;
  border-radius: 1em;
  font-weight: 700;
  font-size: 1.1rem;
}
#grup-Container #addGrup #grupSchedudle .grupSchedudle-item .grupoweContainerDay {
  display: flex;
  flex-direction: column;
  gap: 3em;
}
#grup-Container #addGrup #grupSchedudle .grupSchedudle-item .grupoweContainerDay div {
  display: flex;
  gap: 1em;
  align-items: center;
}
#grup-Container #addGrup #grupSchedudle .grupSchedudle-item .grupoweContainerDay div input[type=number] {
  width: 5em;
}
#grup-Container #addGrup #grupSchedudle .grupSchedudle-item .grupoweContainerDay div .flRodzajGrup input {
  width: 12em;
  font-size: 1rem;
}
#grup-Container #addGrup #grupSchedudle input[type=time] {
  min-width: 7em;
  height: 2em;
}
#grup-Container #addGrup .btnAddGrup {
  border: unset;
  padding: 0.5em 1em;
  border-radius: 2em;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.1s ease-in-out;
  align-self: flex-end;
}
#grup-Container #addGrup .btnAddGrup:hover {
  background-color: #5bacfa;
}

#legendaGrupowe {
  font-weight: 600;
  border: 0.2em solid #fff;
  padding: 0.5em 1em;
  border-radius: 1em;
  width: -moz-fit-content;
  width: fit-content;
}

.resztaTren {
  white-space: wrap !important;
  text-align: center;
}

#flCzyPracuja {
  margin-left: 5em;
}

#flCzyPracuja::before {
  content: "Czy reszta trenerów pracuje";
  white-space: nowrap;
  top: -2em;
}

#flPrzerwaPrzed::before {
  content: "Przerwa przed";
  white-space: nowrap;
  top: -2em;
}

#flPrzerwaPo::before {
  content: "Przerwa po";
  white-space: nowrap;
  top: -2em;
}

input[type=checkbox] {
  width: 1.5em;
  height: 1.5em;
  margin-left: auto;
}

.app {
  background-color: #262626;
  display: flex;
  width: 99%;
  gap: 2em;
  height: 98dvh;
  position: relative;
}
.app #leftBar__menuBtn {
  background-color: #1d1d1e;
  z-index: 100;
  position: fixed;
  border-radius: 0 0.5em 0.5em 0;
  width: 2em;
  height: 4em;
  top: 50%;
  left: 0em;
  transform: translate(0, -50%);
  -o-object-fit: cover;
     object-fit: cover;
}
.app .app__leftBar {
  position: fixed;
  left: min(-30%, -25em);
  height: 100dvh;
  top: 0;
  background-color: #1d1d1e;
  transition: all 0.4s ease-in-out;
  gap: 0.5em;
  overflow: hidden;
  z-index: 10;
  display: flex;
  flex-direction: column;
  padding-top: 1em;
  border-radius: 0 1em 1em 0;
  width: max(20%, 25em);
}
.app .app__leftBar .leftBar__title {
  background-color: #262626;
  border-radius: 1em;
  margin-inline: 1em;
  padding: 1em;
  gap: 1em;
  display: flex;
  flex-direction: column;
}
.app .app__leftBar .leftBar__title h1 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  text-align: center;
}
.app .app__leftBar .leftBar__title section {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.app .app__leftBar .leftBar__title section p {
  font-size: 0.9rem;
  display: flex;
  gap: 3em;
  color: #d1d1d1;
}
.app .app__leftBar .leftBar__title section p span {
  font-weight: 700;
  color: #fff;
}
.app .app__leftBar .leftBar__title div:has(button) {
  align-self: flex-end;
  display: flex;
}
.app .app__leftBar .leftBar__title button {
  margin: 0 0.5em;
  background-color: #fff;
  border: unset;
  padding: 1em;
  border-radius: 1em;
  font-weight: 700;
  width: 2.5em;
  height: 2.5em;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.1s ease-in-out;
}
.app .app__leftBar .leftBar__title button:hover {
  background-color: #5bacfa;
}
.app .app__leftBar .leftBar__calendar {
  background-color: #262626;
  border-radius: 1em;
  margin-inline: 1em;
  padding: 1em;
}
.app .app__leftBar .leftBar__calendar p {
  color: #fff;
  font-weight: 700;
  text-align: center;
}
.app .app__leftBar .leftBar__actualLesson {
  background-color: #262626;
  border-radius: 1em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin-inline: 1em;
  padding: 1em;
}
.app .app__leftBar .leftBar__actualLesson p {
  color: #fff;
  font-weight: 700;
}
.app .app__leftBar .leftBar__actualLesson span {
  font-weight: 400;
  color: #fff;
}
.app .app__leftBar .leftBar__actualLesson .actualLesson__studentsContainer p {
  font-size: 1.1rem;
}
.app .app__leftBar .leftBar__actualLesson .actualLesson__studentsContainer span {
  font-size: 1rem;
}
.app .app__leftBar .leftBar__actualLesson .actualLesson__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.app .app__leftBar .leftBar__actualLesson .actualLesson__title #actualLesson__timerBlock {
  display: flex;
  align-items: center;
  gap: 0.4em;
  background-color: #2c5072;
  padding: 0.2em 0.4em;
  border-radius: 5em;
}
.app .app__leftBar .leftBar__actualLesson .actualLesson__title #actualLesson__timerBlock img {
  width: 1.2em;
  height: 1.2em;
}
.app .app__leftBar .leftBar__actualLesson .actualLesson__title #actualLesson__timerBlock span {
  font-size: 1rem;
}
.app .app__leftBar .leftBar__payments {
  background-color: #1d1d1e;
  border-radius: 1em;
  padding: 0.5em 1em;
}
.app .app__leftBar .leftBar__payments p {
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
}
.app .app__leftBar .leftBar__payments button {
  background-color: #5bacfa;
  border: unset;
  margin: 0.5rem 0;
  padding: 0.2em 0.4em;
  border-radius: 0.3em;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background-color 0.1s ease-in-out;
}
.app .app__leftBar .leftBar__payments button:hover {
  background-color: #2c5072;
}
.app .app__leftBar .leftBar__summary {
  background-color: #262626;
  border-radius: 1em;
  margin: 1em;
  padding: 1em;
  margin-top: auto;
  display: flex;
  gap: 0.5em;
  flex-wrap: wrap;
  justify-content: space-between;
}
.app .app__leftBar .leftBar__summary button {
  background-color: #5bacfa;
  border: unset;
  margin: 0.5rem 0;
  padding: 0.8em 1em;
  border-radius: 0.6em;
  font-weight: 600;
  font-size: 0.8rem;
  width: 48%;
  cursor: pointer;
  color: #000;
  transition: background-color 0.1s ease-in-out;
}
.app .app__leftBar .leftBar__summary button:hover {
  background-color: #2c5072;
}
.app .leftBar--open {
  left: 0;
}

.rightBar {
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  gap: 0.5em;
  border-radius: 1em;
}
.rightBar .rightBar__heading {
  background-color: #fff;
  border-radius: 1em 1em 0 0;
  padding: 1em 2em 0 2em;
  gap: 1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rightBar .rightBar__heading p {
  font-size: 1.5rem;
  font-weight: 800;
  text-align: center;
}
.rightBar .rightBar__heading #currentMonth {
  text-transform: capitalize;
  padding-left: 1em;
}
.rightBar .rightBar__heading #currentWeek {
  font-weight: 700;
  font-size: 1.2rem;
  background-color: #e6e6e6;
  padding: 0.5em 1em;
  border-radius: 0.5em;
}
.rightBar .rightBar__heading #currentCoach {
  font-weight: 700;
  font-size: 1.2rem;
  background-color: #e6e6e6;
  padding: 0.5em 1em;
  border-radius: 0.5em;
}
.rightBar .rightBar__heading section {
  display: flex;
}
.rightBar .rightBar__heading section p {
  font-size: 0.8rem;
  display: flex;
  gap: 3em;
  color: #d1d1d1;
}
.rightBar .rightBar__heading section span {
  font-weight: 700;
  align-content: center;
}
.rightBar .rightBar__heading button {
  background-color: #e6e6e6;
  border: unset;
  padding: 0.1em 0.1em;
  border-radius: 0.5em;
  font-weight: 700;
  width: 3em;
  height: 3em;
  cursor: pointer;
  transition: background-color 0.1s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
}
.rightBar .rightBar__heading button:hover {
  background-color: #5bacfa;
}
.rightBar .rightBar__heading .heading__coachNav {
  display: flex;
  gap: 1em;
  align-items: center;
}
.rightBar .rightBar__heading .heading__coachNav #printSchedudle {
  padding: 0.5em;
}
.rightBar .rightBar__CalendarNavigation {
  background-color: #fff;
  border-radius: 0 0 1em 1em;
  display: flex;
  gap: 0.5em;
  justify-content: center;
}
.rightBar .rightBar__CalendarNavigation section {
  background-color: #e6e6e6;
  width: 10.5em;
  border-radius: 0.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3em;
  height: 5vh;
}
.rightBar .rightBar__CalendarNavigation section .CalendarNav__DayName {
  font-size: 1rem;
  font-weight: 700;
}
.rightBar .rightBar__CalendarNavigation section .CalendarNav__DayNum {
  font-size: 1rem;
  font-weight: 700;
}
.rightBar .rightBar__CalendarNavigation .currentDay {
  background-color: #5bacfa;
  color: #fff;
}
.rightBar .rightBar__CalendarNavigation .CalendarNav__Fix {
  visibility: hidden;
}
.rightBar .rightBar__calendar {
  background-color: hsl(35, 61%, 20%);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 586 586' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"), radial-gradient(circle at 20% 85%, hsl(33, 80%, 70%) 7%, transparent 70%), radial-gradient(circle at 88% 71%, hsl(34, 100%, 93%) 7%, transparent 59.0290632239%), radial-gradient(circle at 44% 13%, hsl(34, 58%, 58%) 6.7676951235%, transparent 52.8376697976%);
  background-blend-mode: overlay, normal, normal, normal;
  border-radius: 1em 1em 0 0;
  padding: 0.5em 1em;
  display: flex;
  gap: 0.5em;
  justify-content: center;
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100%;
  /* width */
  position: relative;
  /* Track */
  /* Handle */
  /* Handle on hover */
}
.rightBar .rightBar__calendar::-webkit-scrollbar {
  width: 1%;
}
.rightBar .rightBar__calendar::-webkit-scrollbar-track {
  background: #c2f0fc;
}
.rightBar .rightBar__calendar::-webkit-scrollbar-thumb {
  background: #c2f0fc;
}
.rightBar .rightBar__calendar::-webkit-scrollbar-thumb:hover {
  background: #c2f0fc;
}
.rightBar .rightBar__calendar section {
  width: 10.5em;
  display: flex;
  height: 40em;
  gap: 1em;
  flex-direction: column;
  position: relative;
}
.rightBar .rightBar__calendar section div {
  cursor: help;
  margin-top: 0.1em;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 0.5em;
  height: 7.4em;
  z-index: 2;
  position: absolute;
  width: 100%;
}
.rightBar .rightBar__calendar section div p {
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3em;
  font-size: 0.6rem;
}
.rightBar .rightBar__calendar section .calendar__grupowe {
  height: 30vh;
}
.rightBar .rightBar__calendar .Calendar__hours p {
  padding-top: 0.2em;
  height: 5%;
  font-weight: 700;
  font-size: 1rem;
  position: relative;
  flex-shrink: 0;
}
.rightBar .rightBar__calendar .Calendar__hours p::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 1%;
  background-color: #fff;
  opacity: 0.8;
  border-radius: 1em;
  z-index: 1;
}
.rightBar .rightBar__calendar .currentTimeLine {
  position: absolute;
  width: 100%;
  right: 0;
  height: 0.1em;
  background-color: unset;
  border-top: 0.2em solid #3482f6;
  border-radius: 1em;
  z-index: 5;
}
.rightBar .rightBar__calendar .currentTimeLine::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-58%);
  width: 1em;
  height: 1em;
  background-color: #3482f6;
  border-radius: 50%;
  z-index: 10;
}

#campCalendar {
  width: 100%;
  height: 100%;
  padding: 0.5em 1em;
}
#campCalendar header {
  text-align: center;
  font-size: 1.2em;
}
#campCalendar .calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 0.4em;
  -moz-column-gap: 0.2em;
       column-gap: 0.2em;
}
#campCalendar .day {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  cursor: pointer;
  color: #fff;
  font-size: 0.8em;
}
#campCalendar .current-day {
  position: relative;
  font-weight: bold;
  z-index: 5;
}
#campCalendar .current-day::before {
  z-index: -1;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.2em;
  height: 2em;
  background-color: #5bacfa !important;
  opacity: 0.5;
  border-radius: 50%;
}
#campCalendar .trip-start {
  font-weight: bold;
  position: relative;
  z-index: 5;
}
#campCalendar .trip-start::before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.2em;
  height: 2em;
  background-color: #2c5072;
  opacity: 0.5;
  border-radius: 50%;
}
#campCalendar .trip-end {
  font-weight: bold;
}
#campCalendar .trip-between {
  z-index: 5;
  position: relative;
}
#campCalendar .trip-between::before {
  z-index: -1;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.2em;
  height: 2em;
  background-color: #2c5072;
  opacity: 0.5;
  border-radius: 50%;
}

#currentLessonTimer {
  font-size: 0.9rem;
}

#difficultySlider {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 10px;
  background: #ddd;
  border-radius: 5px;
  outline: none;
  cursor: pointer;
}

#difficultySlider::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 20px;
  height: 20px;
  background: #007bff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

#difficultySlider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #007bff;
  border-radius: 50%;
  cursor: pointer;
}

#editCampContainer {
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60vw;
  height: 80vh;
  border-radius: 2em;
  background-color: #262626;
  z-index: 100;
  display: flex;
  flex-direction: column;
  transition: all 0.7s ease-in-out;
  padding: 2em 4em;
  overflow-y: scroll;
  overflow-x: hidden;
  color: #fff;
  gap: 2em;
}
#editCampContainer input {
  background-color: #fff;
  border: unset;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  font-weight: 700;
  font-size: 1rem;
}
#editCampContainer #editCampGlowne {
  display: flex;
  flex-direction: column;
  width: 40%;
}
#editCampContainer #editCampGlowne input {
  margin: 0.3em 0 1em 0;
}
#editCampContainer #editCampGlowne input[type=date] {
  width: 40%;
}
#editCampContainer #editCampGlowne input[type=number] {
  width: 30%;
}
#editCampContainer h1 {
  font-size: 2rem;
  font-weight: 800;
  text-align: center;
}
#editCampContainer #editSaveChanges {
  background-color: #fff;
  border: unset;
  padding: 0.5em 1.5em;
  border-radius: 0.5em;
  font-weight: 700;
  margin: 0 auto;
  font-size: 1.2rem;
  width: 30%;
  cursor: pointer;
  transition: background-color 0.1s ease-in-out;
}
#editCampContainer #editSaveChanges:hover {
  background-color: #5bacfa;
}
#editCampContainer #editCloseBtn {
  position: absolute;
  top: 1em;
  right: 1em;
  background-color: #fff;
  border: unset;
  padding: 0.5em 1em;
  border-radius: 2em;
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color 0.1s ease-in-out;
}
#editCampContainer #editCloseBtn:hover {
  background-color: #5bacfa;
}
#editCampContainer #editCampCenyLekcji {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
}
#editCampContainer #editCampCenyLekcji input {
  width: 6em;
}
#editCampContainer #editCampCenyLekcji div {
  display: flex;
  gap: 0.3em;
  align-items: center;
}
#editCampContainer #editCampTrenerzy {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
#editCampContainer #editCampTrenerzy .editCampTrenerzyItem {
  background-color: #1d1d1e;
  padding: 1em;
  border-radius: 1em;
  display: flex;
  flex-direction: column;
  gap: 1em;
}
#editCampContainer #editCampTrenerzy .editCampTrenerzyItem .editCampTrenerzyItem__header {
  display: flex;
  gap: 2em;
}
#editCampContainer #editCampTrenerzy .editCampTrenerzyItem .editCampTrenerzyValuesGroup {
  display: flex;
}
#editCampContainer #editCampTrenerzy .editCampTrenerzyItem .editCampTrenerzyHours {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
#editCampContainer #editCampTrenerzy .editCampTrenerzyItem .editCampTrenerzyHours .editCampTrenerzyHours__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-color: #262626;
  padding: 1em;
  gap: 0.5em;
  border-radius: 1em;
}
#editCampContainer #editCampTrenerzy .editCampTrenerzyValues {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}
#editCampContainer #editCampTrenerzy .editCampTrenerzyValues input[type=number] {
  width: 7em;
}
#editCampContainer #editCampGrupowe {
  display: flex;
  flex-direction: column;
  gap: 2em;
}
#editCampContainer #editCampGrupowe .editCampGrupoweItem {
  overflow: scroll;
  display: flex;
  gap: 1em;
  align-items: center;
}
#editCampContainer #editCampGrupowe .editCampGrupoweValues {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}
#editCampContainer #editCampGrupowe .editCampGrupoweValues input[type=number] {
  width: 7em;
}
#editCampContainer #editCampStudenci {
  display: flex;
  flex-direction: column;
  gap: 2em;
}
#editCampContainer #editCampStudenci .editCampStudenciItem {
  overflow: scroll;
  display: flex;
  gap: 1em;
  align-items: center;
}
#editCampContainer #editCampStudenci .editCampStudenciItem .editCampStudenciCoachs {
  display: flex;
  gap: 0.5em;
}
#editCampContainer #editCampStudenci .editCampStudenciValues {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
}
#editCampContainer #editCampStudenci .editCampStudenciValues input[type=number] {
  width: 7em;
}

#campOplata {
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70vw;
  height: 40vh;
  border-radius: 2em;
  background-color: #262626;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.7s ease-in-out;
  padding: 2em 4em;
  color: #fff;
  gap: 2em;
}
#campOplata #campOplataCloseBtn {
  position: absolute;
  top: 1em;
  right: 1em;
  background-color: #fff;
  border: unset;
  padding: 0.5em 1em;
  border-radius: 2em;
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color 0.1s ease-in-out;
}
#campOplata #campOplataCloseBtn:hover {
  background-color: #5bacfa;
}
#campOplata h1 {
  font-size: 2rem;
  font-weight: 800;
  text-align: center;
}
#campOplata section {
  display: flex;
  gap: 2em;
  align-items: center;
}
#campOplata input,
#campOplata select {
  background-color: #fff;
  border: unset;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  font-weight: 700;
  font-size: 1rem;
}
#campOplata input[type=number] {
  width: 7em;
  position: relative;
}
#campOplata #campOplataZapisz {
  background-color: #fff;
  border: unset;
  padding: 0.5em 1.5em;
  border-radius: 0.5em;
  font-weight: 700;
  margin: 0 auto;
  font-size: 1.2rem;
  width: 30%;
  cursor: pointer;
  transition: background-color 0.1s ease-in-out;
}
#campOplata #campOplataZapisz:hover {
  background-color: #5bacfa;
}

#deleteCampContainer {
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60vw;
  height: 40vh;
  border-radius: 2em;
  background-color: #262626;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.7s ease-in-out;
  padding: 2em 4em;
  color: #fff;
  gap: 2em;
}
#deleteCampContainer #deleteCampCloseBtn {
  position: absolute;
  top: 1em;
  right: 1em;
  background-color: #fff;
  border: unset;
  padding: 0.5em 1em;
  border-radius: 2em;
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color 0.1s ease-in-out;
}
#deleteCampContainer #deleteCampCloseBtn:hover {
  background-color: #5bacfa;
}
#deleteCampContainer #deleteCampDeleteBtn {
  background-color: #cc3e3c;
  border: unset;
  padding: 0.5em 1.5em;
  border-radius: 0.5em;
  font-weight: 700;
  margin: 0 auto;
  font-size: 1.2rem;
  width: 30%;
  cursor: pointer;
  transition: background-color 0.1s ease-in-out;
}
#deleteCampContainer #deleteCampDeleteBtn:hover {
  background-color: #f9f9f9;
}

#campOplac {
  background-color: #5bacfa;
}

#campSummary {
  background-color: #56b056;
}

#editCamp {
  background-color: #eea640;
}

#campDelete {
  background-color: #cc3e3c;
}

#campSummaryContainer {
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  height: 80vh;
  border-radius: 2em;
  background-color: #262626;
  z-index: 100;
  display: flex;
  flex-direction: column;
  transition: all 0.7s ease-in-out;
  padding: 2em 4em;
  overflow-y: scroll;
  overflow-x: hidden;
  color: #fff;
  gap: 2em;
}
#campSummaryContainer #StudentSearchInput,
#campSummaryContainer #CoachSearchInput {
  background-color: #fff;
  border: unset;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  font-weight: 700;
  font-size: 1rem;
  width: 30%;
}
#campSummaryContainer #campSummaryTables {
  display: flex;
  flex-direction: column;
}
#campSummaryContainer #campSummaryCloseBtn {
  position: absolute;
  top: 1em;
  right: 1em;
  background-color: #fff;
  border: unset;
  padding: 0.5em 1em;
  border-radius: 2em;
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color 0.1s ease-in-out;
}
#campSummaryContainer #campSummaryCloseBtn:hover {
  background-color: #5bacfa;
}
#campSummaryContainer #campSummaryContainer__mainTable,
#campSummaryContainer #campSummaryContainer__coachTable {
  width: 100%;
}
#campSummaryContainer #campSummaryContainer__mainTable .asc,
#campSummaryContainer #campSummaryContainer__coachTable .asc {
  position: relative;
}
#campSummaryContainer #campSummaryContainer__mainTable .asc::before,
#campSummaryContainer #campSummaryContainer__coachTable .asc::before {
  content: "▲";
  position: absolute;
  top: 50%;
  right: 0.2em;
  transform: translateY(-50%);
}
#campSummaryContainer #campSummaryContainer__mainTable .desc,
#campSummaryContainer #campSummaryContainer__coachTable .desc {
  position: relative;
}
#campSummaryContainer #campSummaryContainer__mainTable .desc::before,
#campSummaryContainer #campSummaryContainer__coachTable .desc::before {
  content: "▼";
  position: absolute;
  top: 50%;
  right: 0.2em;
  transform: translateY(-50%);
}
#campSummaryContainer #campSummaryContainer__mainTable #tableHeading,
#campSummaryContainer #campSummaryContainer__coachTable #tableHeading {
  background-color: #2c5072;
}
#campSummaryContainer #campSummaryContainer__mainTable #tableHeading #tableHeading__uwagi,
#campSummaryContainer #campSummaryContainer__coachTable #tableHeading #tableHeading__uwagi {
  width: 20%;
}
#campSummaryContainer #campSummaryContainer__mainTable #tableHeading #tableHeading__dane,
#campSummaryContainer #campSummaryContainer__coachTable #tableHeading #tableHeading__dane {
  width: 15%;
}
#campSummaryContainer #campSummaryContainer__mainTable tr,
#campSummaryContainer #campSummaryContainer__coachTable tr {
  height: 2.5em;
}
#campSummaryContainer #campSummaryContainer__mainTable tr:last-child,
#campSummaryContainer #campSummaryContainer__coachTable tr:last-child {
  border-bottom: unset;
}
#campSummaryContainer #campSummaryContainer__mainTable tr th,
#campSummaryContainer #campSummaryContainer__mainTable tr td,
#campSummaryContainer #campSummaryContainer__coachTable tr th,
#campSummaryContainer #campSummaryContainer__coachTable tr td {
  padding: 0.5em 1em;
}
#campSummaryContainer #campSummaryContainer__mainTable tr th.desc, #campSummaryContainer #campSummaryContainer__mainTable tr th.asc,
#campSummaryContainer #campSummaryContainer__mainTable tr td.desc,
#campSummaryContainer #campSummaryContainer__mainTable tr td.asc,
#campSummaryContainer #campSummaryContainer__coachTable tr th.desc,
#campSummaryContainer #campSummaryContainer__coachTable tr th.asc,
#campSummaryContainer #campSummaryContainer__coachTable tr td.desc,
#campSummaryContainer #campSummaryContainer__coachTable tr td.asc {
  padding: 0.5em 1.5em 0.5em 1em;
}
#campSummaryContainer #campSummaryContainer__mainTable tr td,
#campSummaryContainer #campSummaryContainer__coachTable tr td {
  text-align: center;
  white-space: nowrap;
}
#campSummaryContainer #campSummaryContainer__mainTable tr input,
#campSummaryContainer #campSummaryContainer__coachTable tr input {
  background-color: unset;
  text-align: center;
  border: unset;
  padding: 0.5em 1em;
  font-weight: 700;
  font-size: 1rem;
  outline: none;
  color: #fff;
}
#campSummaryContainer #campSummaryContainer__mainTable tr input:focus,
#campSummaryContainer #campSummaryContainer__coachTable tr input:focus {
  box-shadow: 0 1px 0 #fff;
}
#campSummaryContainer #campSummaryContainer__mainTable tr input[type=checkbox],
#campSummaryContainer #campSummaryContainer__coachTable tr input[type=checkbox] {
  background-color: green;
  color: green;
  accent-color: green;
  pointer-events: none; /* Blokuje interakcje z checkboxem */
}
#campSummaryContainer #campSummaryContainer__mainTable tbody:nth-child(odd),
#campSummaryContainer #campSummaryContainer__coachTable tbody:nth-child(odd) {
  background-color: #1d1d1e;
}
#campSummaryContainer #campSummaryContainer__coachTable input[type=checkbox] {
  background-color: unset;
  color: unset;
  accent-color: unset;
  pointer-events: unset !important; /* Blokuje interakcje z checkboxem */
}
#campSummaryContainer .responsiveTable {
  overflow-x: auto;
  padding-bottom: 0.3em;
  margin-top: 1em;
  margin-bottom: 3em;
}
#campSummaryContainer .responsiveTable::-webkit-scrollbar {
  width: 0.3em; /* Adjust scrollbar width */
  height: 0.3em; /* Adjust scrollbar height for horizontal scroll */
}
#campSummaryContainer .responsiveTable::-webkit-scrollbar-track {
  background: #000; /* Track color */
}
#campSummaryContainer #coachTableAndDescContainer {
  flex-direction: column;
}
#campSummaryContainer #coachTableAndDescContainer #campSummaryContainer__daysTable {
  flex-wrap: wrap;
  max-height: 9em;
  align-content: flex-start;
}
#campSummaryContainer #coachTableAndDescContainer #campSummaryContainer__daysTable p {
  white-space: nowrap;
}
#campSummaryContainer #campSummaryContainer__coachTable {
  height: -moz-max-content;
  height: max-content;
  width: 60%;
}
#campSummaryContainer #coachTableAndDescContainer {
  display: flex;
  gap: 2em;
}
#campSummaryContainer #coachTableAndDescContainer #campSummaryContainer__daysContainer {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
#campSummaryContainer #coachTableAndDescContainer #campSummaryContainer__daysContainer #campSummaryContainer__daysTable {
  display: flex;
  flex-direction: column;
  row-gap: 1em;
  -moz-column-gap: 2em;
       column-gap: 2em;
}
#campSummaryContainer #coachTableAndDescContainer #campSummaryContainer__daysContainer #campSummaryContainer__daysTable p {
  display: flex;
  gap: 1em;
}
#campSummaryContainer #coachTableAndDescContainer #campSummaryContainer__daysContainer #campSummaryContainer__daysTable p span {
  font-weight: 700;
}

#campPrintDay {
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50vw;
  min-height: 30vh;
  border-radius: 2em;
  background-color: #262626;
  z-index: 100;
  display: flex;
  flex-direction: column;
  transition: all 0.7s ease-in-out;
  padding: 2em 4em;
  color: #fff;
  gap: 2em;
}
#campPrintDay #campPrintDay__chooseDay {
  display: flex;
  flex-direction: column;
  gap: 1em;
  align-items: center;
}
#campPrintDay #campPrintDay__chooseDay label {
  font-size: 1.2rem;
  font-weight: 700;
}
#campPrintDay #campPrintDay__chooseDay #chooseDay__container {
  display: flex;
  justify-content: center;
  gap: 1em;
  flex-wrap: wrap;
}
#campPrintDay #campPrintDay__chooseDay #chooseDay__container .chooseDay__option {
  background-color: #ffffff;
  color: #1d1d1e;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.1s ease-in-out;
  border: unset;
}
#campPrintDay #campPrintDay__chooseDay #chooseDay__container .chooseDay__option:hover {
  background-color: #2c5072;
}
#campPrintDay #campPrintDay__chooseDay #chooseDay__container .chooseDay__option:focus {
  transform: scale(1.1);
  background-color: #5bacfa;
}
#campPrintDay #campPrintDay__chooseDay #printDayBtn {
  background-color: #fff;
  border: unset;
  padding: 0.5em 1.5em;
  border-radius: 0.5em;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.1s ease-in-out;
}
#campPrintDay #campPrintDay__chooseDay #printDayBtn:hover {
  background-color: #5bacfa;
}
#campPrintDay #campPrintDayCloseBtn {
  position: absolute;
  top: 1em;
  right: 1em;
  background-color: #fff;
  border: unset;
  padding: 0.5em 1em;
  border-radius: 2em;
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color 0.1s ease-in-out;
}
#campPrintDay #campPrintDayCloseBtn:hover {
  background-color: #5bacfa;
}

#newStudentByOrganizer {
  min-height: 100dvh;
}
#newStudentByOrganizer #student-Container {
  display: flex;
  justify-content: center;
  width: 95%;
  gap: 1em;
}
#newStudentByOrganizer #student-Container #studentList {
  width: 25%;
  display: flex;
  flex-direction: column;
  gap: 1em;
  background-color: #1d1d1e;
  color: #ffffff;
  border-radius: 2em;
  padding: 2em 4em;
}
#newStudentByOrganizer #student-Container #addStudent {
  background-color: #1d1d1e;
  border-radius: 2em;
  padding: 2em 4em;
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  color: #ffffff;
  overflow: hidden;
}
#newStudentByOrganizer #student-Container #addStudent #studentInfo {
  display: flex;
  gap: 1em;
}
#newStudentByOrganizer #student-Container #addStudent #studentInfo section {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  font-size: 1.2rem;
  font-weight: 500;
}
#newStudentByOrganizer #student-Container #addStudent #studentInfo section input {
  width: 18em;
  background-color: #e6e6e6;
  border: unset;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  font-weight: 700;
  font-size: 1rem;
}
#newStudentByOrganizer #student-Container #addStudent #studentInfo2 {
  display: flex;
  align-items: center;
}
#newStudentByOrganizer #student-Container #addStudent #studentInfo2 #studentStyles {
  display: flex;
  align-items: center;
  gap: 3em;
}
#newStudentByOrganizer #student-Container #addStudent #studentInfo2 #studentStyles label {
  display: flex;
  gap: 0.5em;
  align-items: center;
  font-size: 1.2rem;
  font-weight: 500;
}
#newStudentByOrganizer #student-Container #addStudent h1 {
  font-weight: 800;
  font-size: 3rem;
  text-align: center;
}
#newStudentByOrganizer #student-Container #studentSchedudle {
  display: flex;
  flex-direction: column;
  gap: 1em;
  font-size: 1.2rem;
  font-weight: 500;
}
#newStudentByOrganizer #student-Container #studentSchedudle section {
  display: flex;
  gap: 1em;
  align-items: center;
}
#newStudentByOrganizer #student-Container #studentSchedudle section select {
  -webkit-appearance: none;
  color: #1d1d1e;
  width: -moz-min-content;
  width: min-content;
  background-color: #e6e6e6;
  border: unset;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  font-weight: 700;
  font-size: 1rem;
}
#newStudentByOrganizer #student-Container #studentSchedudle section input:not([type=checkbox]) {
  display: none;
}
#newStudentByOrganizer #student-Container #studentSchedudle input {
  width: 13em;
  background-color: #e6e6e6;
  border: unset;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  font-weight: 700;
  font-size: 1rem;
}
#newStudentByOrganizer #student-Container #studentCoachs {
  display: flex;
  flex-direction: column;
  gap: 1em;
  font-size: 1.2rem;
  font-weight: 500;
}
#newStudentByOrganizer #student-Container #studentCoachs div {
  display: flex;
  gap: 1em;
  align-items: center;
}
#newStudentByOrganizer #student-Container #studentCoachs section {
  display: flex;
  gap: 1em;
  align-items: center;
}
#newStudentByOrganizer #student-Container #studentCoachs input {
  background-color: #e6e6e6;
  border: unset;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  font-weight: 700;
  font-size: 1rem;
}
#newStudentByOrganizer #student-Container #studentCoachs input[type=number] {
  width: 5em;
}
#newStudentByOrganizer #student-Container #btnAddStudents {
  border: unset;
  padding: 0.5em 1.5em;
  border-radius: 2em;
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color 0.1s ease-in-out;
}
#newStudentByOrganizer #student-Container #btnAddStudents:hover {
  background-color: #5bacfa;
}
#newStudentByOrganizer #student-Container #studentsList {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  background-color: #1d1d1e;
  padding: 2em;
  border-radius: 2em;
  color: #fff;
  overflow-y: auto;
}
#newStudentByOrganizer #student-Container #studentsList .studentsList-item {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 0.5em;
}
#newStudentByOrganizer #student-Container #studentsList .studentsList-item p {
  font-weight: 700;
}
#newStudentByOrganizer #student-Container #studentsList .studentsList-item div {
  display: flex;
  gap: 1em;
  align-items: center;
  justify-content: center;
}
#newStudentByOrganizer #student-Container #studentsList .studentsList-item div span {
  font-weight: 300;
  font-size: 0.8rem;
}
#newStudentByOrganizer #student-Container #flStudentsCoachs {
  font-size: 0.8rem;
  display: flex;
  gap: 2em !important;
}

#studentFormBody {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin: 1em 0;
}
#studentFormBody #studentHeaderContainer {
  display: flex;
  background-color: #1d1d1e;
  padding: 1em 2em;
  color: #ffffff;
  gap: 2em;
  border-radius: 1em;
  font-weight: 500;
  max-width: 95%;
}
#studentFormBody #student-Container {
  display: flex;
  justify-content: space-evenly;
  width: 95%;
  gap: 1em;
}
#studentFormBody #student-Container h1 {
  font-size: 2rem !important;
}
#studentFormBody #student-Container #addStudent {
  background-color: #1d1d1e;
  border-radius: 1em;
  padding: 2em 4em;
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  color: #ffffff;
  overflow: hidden;
}
#studentFormBody #student-Container #addStudent #studentInfo {
  display: flex;
  gap: 1em;
}
#studentFormBody #student-Container #addStudent #studentInfo section {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  font-size: 1.2rem;
  font-weight: 500;
}
#studentFormBody #student-Container #addStudent #studentInfo section input {
  width: 18em;
  background-color: #e6e6e6;
  border: unset;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  font-weight: 700;
  font-size: 1rem;
}
#studentFormBody #student-Container #addStudent h1 {
  font-weight: 800;
  font-size: 3rem;
  text-align: center;
}
#studentFormBody #student-Container #studentSchedudle {
  display: flex;
  flex-direction: column;
  gap: 1em;
  font-size: 1.2rem;
  font-weight: 500;
}
#studentFormBody #student-Container #studentSchedudle section {
  display: flex;
  gap: 1em;
  align-items: center;
}
#studentFormBody #student-Container #studentSchedudle section select {
  -webkit-appearance: none;
  color: #1d1d1e;
  width: -moz-min-content;
  width: min-content;
  background-color: #e6e6e6;
  border: unset;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  font-weight: 700;
  font-size: 1rem;
}
#studentFormBody #student-Container #studentSchedudle section input:not([type=checkbox]) {
  display: none;
}
#studentFormBody #student-Container #studentSchedudle input {
  width: 13em;
  background-color: #e6e6e6;
  border: unset;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  font-weight: 700;
  font-size: 1rem;
}
#studentFormBody #student-Container #studentCoachs {
  display: flex;
  flex-direction: column;
  gap: 1em;
  font-size: 1.2rem;
  font-weight: 500;
}
#studentFormBody #student-Container #studentCoachs div {
  display: flex;
  gap: 1em;
  align-items: center;
}
#studentFormBody #student-Container #studentCoachs section {
  display: flex;
  gap: 1em;
  align-items: center;
}
#studentFormBody #student-Container #studentCoachs input {
  background-color: #e6e6e6;
  border: unset;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  font-weight: 700;
  font-size: 1rem;
}
#studentFormBody #student-Container #studentCoachs input[type=number] {
  width: 5em;
}
#studentFormBody #studentFormFinish {
  color: #1d1d1e;
}

#popupStudentFormConfirmation {
  position: fixed;
  top: -70%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50vw;
  min-height: 30vh;
  border-radius: 2em;
  background-color: #262626;
  z-index: 100;
  display: flex;
  flex-direction: column;
  transition: all 0.7s ease-in-out;
  padding: 2em 4em;
  color: #fff;
  gap: 2em;
}
#popupStudentFormConfirmation #studentFromSuccess {
  display: flex;
  flex-direction: column;
  gap: 2em;
}
#popupStudentFormConfirmation #studentFromSuccess__textarea {
  background-color: #fff;
  border: unset;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.1s ease-in-out;
}
#popupStudentFormConfirmation #studentFromSuccess__title {
  font-size: 2rem;
  font-weight: 800;
  text-align: center;
}
#popupStudentFormConfirmation #studentFromSuccess__desc {
  font-size: 1.2rem;
  font-weight: 500;
  text-align: center;
}
#popupStudentFormConfirmation #studentFromSuccess__btnWrapper {
  display: flex;
  justify-content: center;
  gap: 2em;
}
#popupStudentFormConfirmation #studentFromSuccess__btnWrapper button {
  background-color: #fff;
  border: unset;
  padding: 0.5em 1.5em;
  border-radius: 0.5em;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  color: #1d1d1e;
  transition: background-color 0.1s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  flex-wrap: nowrap;
}
#popupStudentFormConfirmation #studentFromSuccess__btnWrapper button #studentFormCopyLinkBtn__info {
  display: none;
}
#popupStudentFormConfirmation #studentFromSuccess__btnWrapper button:hover {
  background-color: #5bacfa;
}

#addStdToFavourite {
  background-color: unset;
  border: unset;
  outline: unset;
  cursor: pointer;
  padding: 0.5em;
  border-radius: 1em;
  transition: all 0.1s ease-in-out;
}
#addStdToFavourite img {
  width: 2.5em;
  height: 2.5em;
}

#coachCzasCenaLekcjiGrup {
  width: 5em !important;
}

.printHidden {
  display: none !important;
}

#campTableToPrint {
  display: none;
}

#qrGeneratorContainer {
  position: absolute;
  top: -70%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50vw;
  min-height: 30vh;
  border-radius: 2em;
  background-color: #262626;
  z-index: 100;
  display: flex;
  flex-direction: column;
  transition: all 0.7s ease-in-out;
  padding: 2em 4em;
  color: #fff;
  gap: 2em;
}
#qrGeneratorContainer #qrGeneratorCloseBtn {
  position: absolute;
  top: 1em;
  right: 1em;
  background-color: #fff;
  border: unset;
  padding: 0.5em 1em;
  border-radius: 2em;
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color 0.1s ease-in-out;
}
#qrGeneratorContainer #qrGeneratorCloseBtn:hover {
  background-color: #5bacfa;
}
#qrGeneratorContainer article {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
#qrGeneratorContainer article .qrWrapper {
  display: flex;
  flex-direction: column;
  gap: 1em;
  align-items: center;
}
#qrGeneratorContainer article .qrWrapper p {
  font-size: 1.2rem;
  font-weight: 700;
}
#qrGeneratorContainer article .qrWrapper button {
  background-color: #fff;
  border: unset;
  padding: 0.5em 1.5em;
  border-radius: 0.5em;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.1s ease-in-out;
}
#qrGeneratorContainer article .qrWrapper button:hover {
  background-color: #5bacfa;
}

#loadStudentContainer {
  min-height: 100dvh;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}
#loadStudentContainer #loadStudent__wrapper {
  background-color: #1d1d1e;
  padding: 2em 4em;
  border-radius: 1em;
  display: flex;
  flex-direction: column;
  gap: 1em;
  width: 95%;
}
#loadStudentContainer #loadStudent__wrapper #loadStudent__text {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
#loadStudentContainer #loadStudent__wrapper #loadStudent__text #loadStudentTitle {
  font-size: 1.5rem;
  font-weight: 800;
  text-align: center;
}
#loadStudentContainer #loadStudent__wrapper #loadStudentBtnContainer {
  display: flex;
  gap: 1em;
  justify-content: center;
  align-items: center;
}
#loadStudentContainer #loadStudent__wrapper #loadStudentBtnContainer button {
  background-color: #ffffff;
  border: unset;
  padding: 0.5em 1.5em;
  border-radius: 0.5em;
  font-weight: 700;
  font-size: 1rem;
  color: #1d1d1e;
  cursor: pointer;
  transition: background-color 0.1s ease-in-out;
}
#loadStudentContainer #loadStudent__wrapper #loadStudentBtnContainer button:hover {
  background-color: #5bacfa;
}

.calendarTooltip {
  background: #fafafa;
  font-size: 0.8rem;
  position: absolute;
  display: none;
  border: 1px solid #ccc;
  border-radius: 0.5em;
  padding: 10px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 5;
}

#showDetailedCalendarContainer {
  overflow: auto;
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90svw;
  height: 90svh;
  border-radius: 2em;
  background-color: #262626;
  z-index: 100;
  display: flex;
  transition: all 0.7s ease-in-out;
  color: #fff;
  /* Track */
  /* Handle */
  /* Handle on hover */
}
#showDetailedCalendarContainer::-webkit-scrollbar {
  width: 1%;
  height: 1%;
}
#showDetailedCalendarContainer::-webkit-scrollbar-track {
  background: #c2f0fc;
}
#showDetailedCalendarContainer::-webkit-scrollbar-thumb {
  background: #c2f0fc;
}
#showDetailedCalendarContainer::-webkit-scrollbar-thumb:hover {
  background: #c2f0fc;
}
#showDetailedCalendarContainer #detCalHours {
  position: sticky; /* Pasek boczny z godzinami zawsze widoczny */
  left: 0; /* Przypięcie do lewej krawędzi */
  height: -moz-max-content;
  height: max-content; /* Dopasowanie do wysokości */
  width: 50px; /* Szerokość kolumny godzin */
  background-color: #fafafa; /* Tło dla kontrastu */
  z-index: 2; /* Wyższy indeks dla widoczności */
  border-radius: 0.5em;
  margin-top: 6.29em;
  text-align: left;
}
#showDetailedCalendarContainer #detCalHours p {
  position: relative;
  margin: 0;
  padding: 0 0.5em;
  text-align: right;
  color: #000;
  font-size: 0.9em;
  height: 2.977em; /* Wysokość jednej godziny */
}
#showDetailedCalendarContainer #detCalHours p::before {
  content: "";
  position: absolute;
  top: 0; /* Pozioma linia na górze godziny */
  left: 0;
  width: calc(100vw - 150px); /* Rozciąga linię przez całą tabelę */
  height: 0.05em; /* Wysokość linii */
  background-color: #fff;
  opacity: 0.3;
  z-index: 1;
}
#showDetailedCalendarContainer #detCalWrapper {
  display: flex;
  height: 100%;
}
#showDetailedCalendarContainer #detCalWrapper .day-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  height: 50em;
}
#showDetailedCalendarContainer #detCalWrapper .day-title {
  position: sticky; /* Pasek z datą zawsze widoczny */
  top: 0; /* Przypięcie do górnej krawędzi */
  background-color: #fafafa; /* Tło dla kontrastu */
  z-index: 3; /* Wyższy indeks dla widoczności */
  padding: 0.5em;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #fff;
  color: #000;
}
#showDetailedCalendarContainer #detCalWrapper .coach-columns {
  height: 100%;
  display: flex;
  width: 100%;
}
#showDetailedCalendarContainer #detCalWrapper .coach-column {
  flex: 1;
  position: relative;
  border-right: 1px solid #ccc;
  padding: 5px;
  width: 7em;
}
#showDetailedCalendarContainer #detCalWrapper .coach-title {
  position: sticky; /* Pasek z nazwami coachów zawsze widoczny */
  top: 3.5em; /* Dopasowanie do wysokości nagłówka z datą */
  background-color: #262626; /* Tło dla kontrastu */
  z-index: 3; /* Wyższy indeks dla widoczności */
  padding: 0.5em 0;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
#showDetailedCalendarContainer #detCalWrapper .lesson-block,
#showDetailedCalendarContainer #detCalWrapper .group-block {
  position: absolute;
  width: 90%;
  margin: 0 auto;
  background: #d7d7d7;
  color: #000;
  padding: 5px;
  border-radius: 5px;
  text-align: center;
  font-size: 0.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}
#showDetailedCalendarContainer #showDetailedCalendarContainerCloseBtn {
  position: sticky;
  top: 0;
  right: 0;
  background-color: #fff;
  border: unset;
  padding: 0.2em;
  border-radius: 2em;
  font-weight: 700;
  font-size: 1.2rem;
  z-index: 6;
  border: 0.1em solid #000;
  cursor: pointer;
  width: 3em;
  height: 2em;
  transition: background-color 0.1s ease-in-out;
}
#showDetailedCalendarContainer #showDetailedCalendarContainerCloseBtn:hover {
  background-color: #5bacfa;
}
#showDetailedCalendarContainer #showDetailedCalendarContainerCloseBtn img {
  width: 100%;
}

@media print {
  body {
    background-color: #fff;
  }
  #campTableToPrint {
    width: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 1em;
  }
  #campTableToPrint h1 {
    text-align: center;
  }
  #scheduleTable {
    border-collapse: collapse;
    width: 100%;
  }
  #scheduleTable td,
  #scheduleTable th {
    padding: 10px 20px;
    text-align: center;
  }
  #scheduleTable tbody tr {
    border-top: 1px solid black;
  }
  .campPrintTableShort {
    width: 2em;
  }
}
@media (max-width: 1200px) {
  #coach-Container {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1em;
    padding: 1em;
  }
  #coach-Container #addCoach {
    width: 100%;
  }
  #coach-Container #coachList {
    width: 100%;
    margin-bottom: 5em;
  }
  .btnNext {
    right: 1em;
    bottom: 1em;
  }
  #student-Container {
    flex-direction: column;
    width: 100%;
    margin: 1em;
  }
  #student-Container #addStudent {
    width: 100%;
  }
  #student-Container #studentsList {
    width: 100%;
  }
  #student-Container #studentsList section .studentsList-item {
    background-color: #262626;
    padding: 1em;
    border-radius: 1em;
  }
}
@media (max-width: 1000px) {
  .app .calendar-grid p {
    font-size: 0.85rem;
  }
}
@media (max-width: 890px) {
  #studentFormBody #popupStudentFormConfirmation {
    width: 90%;
  }
  #studentFormBody #student-Container {
    margin: 0.5em;
    margin-bottom: 10vh;
  }
  #studentFormBody #student-Container #addStudent {
    padding: 2em 1em;
    gap: 1em;
  }
  #studentFormBody #student-Container #addStudent #studentSchedudle {
    flex-wrap: nowrap;
  }
  #studentFormBody #student-Container #addStudent #studentSchedudle #schedulePrzyjazd {
    flex-wrap: wrap;
  }
  #studentFormBody #student-Container #addStudent #studentSchedudle #schedulePrzyjazd label {
    align-self: flex-start;
  }
  #studentFormBody #student-Container #addStudent #studentSchedudle #scheduleOdjazd {
    flex-wrap: wrap;
  }
  #studentFormBody #student-Container #addStudent #studentSchedudle #scheduleOdjazd label {
    align-self: flex-start;
  }
  #studentFormBody #student-Container #addStudent #studentSchedudle .mobileFix {
    display: flex;
    gap: 1em;
  }
  #studentFormBody #student-Container #addStudent #studentSchedudle .studentPickDateBar {
    display: none;
  }
}
@media (max-width: 800px) {
  :root {
    font-size: 14px;
  }
  #starterSite {
    padding: 2em;
    margin: 1em;
    width: 100%;
  }
  #starterSite section {
    flex-direction: column;
    align-items: center;
  }
  #starterSite h1 {
    text-align: center;
    line-height: 1;
  }
  #starterSite footer p {
    text-align: center;
  }
  #createCamp {
    margin: 1em;
    margin-bottom: 5em;
    padding: 2em;
    width: 100%;
  }
  #createCamp h1 {
    text-align: center;
    line-height: 1;
  }
  #createCamp #basicCampInfo-Container {
    flex-direction: column;
    gap: 1em;
    align-items: center;
  }
  #createCamp #basicCampInfo-Container .basicCampInfo {
    align-items: center;
  }
  #createCamp #basicCampInfo-Container .basicCampInfo section {
    align-items: center;
  }
  #createCamp #campCeny {
    flex-wrap: nowrap;
    padding: 1em 0.5em;
  }
  .btnNext {
    right: 1em;
    bottom: 1em;
  }
  #coach-Container #addCoach {
    max-height: unset;
    padding: 2em;
  }
  #coach-Container #addCoach #coachInfo {
    flex-wrap: wrap;
  }
  #coach-Container #addCoach #coachSchedudle {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2em;
    padding: 1em;
    justify-content: center;
  }
  #coach-Container #addCoach #coachSchedudle .coachSchedudle-item {
    background-color: #1d1d1e;
    border-radius: 1em;
    text-align: center;
    row-gap: 2em;
    -moz-column-gap: 5em;
         column-gap: 5em;
    flex-direction: column;
    width: 25%;
  }
  #coach-Container #coachList {
    padding: 2em;
  }
  #grup-Container #addGrup #grupSchedudle {
    padding: 2em;
  }
  #grup-Container #addGrup #grupSchedudle .grupSchedudle-item {
    flex-direction: column;
    align-items: center;
    background-color: #1d1d1e;
    border-radius: 1em;
    width: 100%;
  }
  #grup-Container #addGrup #grupSchedudle .grupSchedudle-item #flCzyPracuja {
    margin-left: unset;
  }
  #grup-Container #addGrup #grupSchedudle .grupSchedudle-item .groupUsunBtn {
    background-color: #1d1d1e;
    border: unset;
    padding: 0.5em 1em;
    border-radius: 0.5em;
  }
  #grup-Container #addGrup #grupSchedudle .grupSchedudle-item p,
  #grup-Container #addGrup #grupSchedudle .grupSchedudle-item button {
    align-self: center !important;
    width: unset;
  }
  #grup-Container #addGrup #grupSchedudle .grupSchedudle-item .grupoweContainerDay {
    width: 80%;
  }
  #grup-Container #addGrup #grupSchedudle .grupSchedudle-item .grupoweContainerDay > div {
    padding: 2em;
    gap: 2em;
    flex-direction: column;
    border-radius: 1em;
    background-color: #262626;
  }
  #student-Container #addStudent {
    padding: 2em;
  }
  #student-Container #addStudent #studentInfo {
    flex-direction: column;
    gap: 1em;
  }
  #student-Container #addStudent #studentInfo section {
    flex-direction: column;
    gap: 0.5em;
  }
  #student-Container #addStudent #studentInfo #addStdToFavourite {
    align-self: flex-start;
    position: relative;
  }
  #student-Container #addStudent #studentInfo #addStdToFavourite::before {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    content: "Dodaj do ulubionych";
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
  }
  #student-Container #studentsList {
    padding: 1em;
  }
  .rightBar .rightBar__calendar section div p {
    gap: 0;
    flex-direction: column;
    line-height: 1.2;
    word-break: break-all;
  }
  .rightBar__heading {
    justify-content: center !important;
    gap: 2em !important;
  }
  .rightBar__heading #currentMonth {
    display: none;
  }
  .rightBar__heading .heading__coachNav {
    gap: 0.2em !important;
  }
  .rightBar__heading .heading__coachNav #printSchedule {
    margin-left: 0.3em;
  }
  .rightBar__heading section {
    gap: 0.2em !important;
  }
  .rightBar .rightBar__CalendarNavigation section {
    height: 5vh;
  }
  .debugger {
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
  }
}
@media (max-width: 600px) {
  #coach-Container h1 {
    line-height: 1;
  }
  #coach-Container #addCoach #coachSchedudle {
    min-height: 50vh;
    max-height: 20em;
  }
  #coach-Container #addCoach #coachSchedudle .coachSchedudle-item {
    width: max(35%, 190px);
  }
  #grup-Container #addGrup {
    padding: 2em;
  }
  #grup-Container #addGrup h1 {
    line-height: 1;
  }
  #grup-Container #addGrup #grupSchedudle .grupSchedudle-item .grupoweContainerDay {
    width: 100%;
    align-items: center;
  }
  #grup-Container #addGrup #grupSchedudle .grupSchedudle-item .grupoweContainerDay > div {
    width: 100%;
    padding: 3em 0.5em;
  }
  #student-Container {
    margin: 1em 0.5em;
    margin-bottom: 5em;
    width: 100%;
  }
  #student-Container #studentSchedudle section {
    flex-direction: column;
    gap: 0.5em;
    align-self: flex-start;
  }
  #student-Container #addStudent #studentInfo section input {
    width: 15em;
  }
  .app .calendar-grid p {
    font-size: 0.9rem;
  }
  .rightBar .rightBar__calendar,
  .rightBar__CalendarNavigation {
    gap: 0.2em !important;
  }
  #campSummaryContainer {
    padding: 2em;
  }
}
@media (max-width: 550px) {
  #studentFormBody #studentHeaderContainer {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.3em !important;
  }
}
@media (max-width: 500px) {
  .rightBar__heading {
    flex-direction: column;
    gap: 0.2em !important;
    padding: 1em 2em 0 2em !important;
  }
  #studentFormBody #student-Container #addStudent #studentInfo {
    align-items: center;
    text-align: center;
  }
  #studentFormBody #student-Container #addStudent #studentSchedudle {
    gap: 1em;
  }
  #studentFormBody #student-Container #addStudent #studentSchedudle section {
    align-self: unset;
  }
  #studentFormBody #student-Container #addStudent #studentSchedudle section label {
    align-self: center !important;
  }
  #studentFormBody #student-Container #addStudent #studentCoachs {
    align-items: center;
  }
}/*# sourceMappingURL=style.css.map */