body
{
	font-family: Arial;
	background-color:#fdfdf2;
	
}

html,body { height: 100%; margin: 0px; padding: 0px; }

h1{
    font-weight:300;
}

em {
    color:red;
    font-weight:300;
    font-style: italic;
}

#container
{
	min-width:80%;
	height:1000px;
	background-color:black;
	margin-left:auto;
	margin-right:auto;
}

#header
{
	margin-left:200px;
	height:150px;
	background-color:#fdfdf2;
	padding: 20px;
}

#sub_menu {
  display: flex;
  font-size: 22px;
  justify-content: flex-start;
  align-items: center;
  background-color: #fdfdf2;
  padding: 20px;
  margin-left: 200px;
}

#sub_menu ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

#sub_menu li {
  margin-right: 10px;
  border-right: 1px solid black;
  padding-right: 10px;
}

#sub_menu li:last-child {
  margin-right: 0;
  border-right: none;
}

#sub_menu li a {
    padding:10px;
    border-radius: 10px;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #333;
  transition: background-color 0.3s ease, color 0.3s ease; /* Dodajemy przejście animacji */
}

#sub_menu li a:hover {
  background-color: #d9d9d9; /* Kolor tła po najechaniu myszką */
}

#sub_menu li.active a{
  background-color: rgba(255, 203, 13, 0.2);; /* Kolor tła dla aktywnego elementu */
  font-style: italic;
}

#sub_menu li.active a {
  color: #f0bd05; /* Kolor tekstu dla aktywnego elementu */
}



#content {
  background-color:#fdfdf2;
  margin-left: 200px;
  padding: 20px;

}


#header_login
{
	width:100%;
	height:15%;
	font-family: Arial;
	background-color:#fdfdf2;;
	
}

#nav
{
    background-color: rgba(19, 98, 7);
	min-width:200px;
	height:100%;
	float:left;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	position: fixed;
}

.orange-row {
    color: #FFAE00;
}

.right-align {
  text-align: right;
}

#content_login
{
	width:100%;
	height:85%;
    background-image: linear-gradient(#fdfdf2, darkgreen);
}

#footer
{
	width:100%;
	height:200px;
	background-color:yellow;
}

#container_mobil
{
	width:100%;
	height:100%;
	background-color:black;
	margin-left:auto;
	margin-right:auto;
}

#nav_mobil
{
	width:100%;
	height:100px;
	background-color:red;
}

#content_mobil_login
{
	width:100%;
	height:800px;
	background-color:green;
}

.r-form {
    padding: 30px;
    width: 60%;
    height: 500px;
    background-color:#fdfdf2;
}

/* logowanie */

.l-form {
    padding: 30px;
    width: 40%;
    height: 500px;
    background-color:#fdfdf2;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.form_div {
    position: relative;
    margin-bottom: 20px;
    
}

.form_input {
    height: 40px;
    width: 100%;
    font-size: 18px;
    display: block;
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 5px 0;
    background-color: transparent;
    outline: none;
}

.form_label {
    position: absolute;
    top: 10px;
    left: 0;
    font-size: 18px;
    color: #777;
    pointer-events: none;
    transition: all 0.3s;
}

.form_input:focus ~ .form_label,
.form_input:valid ~ .form_label {
    top: -20px;
    font-size: 14px;
    color: #4d90fe;
}

.form_input:focus {
    border-bottom: 1px solid #4d90fe; /* Dodajemy kolor podświetlenia dla pola tekstowego po kliknięciu */
}


.button-1 {
  background: darkgreen;
  border-radius: 999px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  font-family: Arial;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  opacity: 1;
  outline: 0 solid transparent;
  padding: 8px 18px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: fit-content;
  word-break: break-word;
  border: 0;

  transition: all 0.3s ease;

}

.button-1:hover {
    background-color: #0ba12c;
    transition: all 0.3s ease;
    transform: scale(1.1, 1.1);
}

.button-1_add {
  background: darkgreen;
  border-radius: 999px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  font-family: Arial;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  opacity: 1;
  outline: 0 solid transparent;
  padding: 8px 18px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: fit-content;
  word-break: break-word;
  border: 0;
  transition: all 0.3s ease;

}

.button-1:hover {
    background-color: #0ba12c;
    transition: all 0.3s ease;
    transform: scale(1.1, 1.1);
}

.r-form_mobil {
    padding: 30px;
    width: 80%;
    height: 800px;
    background: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.l-form_mobil {
    padding: 30px;
    width: 93.8%;
    height: 1200px;
    background: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}

.form_input_mobil {
    height: 90px;
    width: 100%;
    font-size: 60px;
    display: block;
    border: 1px solid #ccc;
    border-radius: 40px;
    box-sizing: border-box;
    position: center;
    padding: 8px 18px;
    
}

.form_input_mobil:focus {
    border: 3px solid black;
}

.form_label_mobil {
    font-size:60px;
}

.button-1_mobil {
  height: 100px;
  background: #5E5DF0;
  border-radius: 999px;
  box-shadow: #5E5DF0 0 10px 20px -10px;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  font-family: Arial;
  font-size: 70px;
  font-weight: 700;
  line-height: 24px;
  opacity: 1;
  outline: 0 solid transparent;
  padding: 8px 18px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 100%;
  word-break: break-word;
  border: 0;

}

.button-zaloguj {
  text-decoration: none;
  background-color: rgba(39, 176, 39, 0.5);
  color: darkgreen;
  border-radius: 10px;
  box-sizing: border-box;
  cursor: pointer;
  font-family: Arial;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  opacity: 1;
  outline: 0 solid transparent;
  padding: 8px 18px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width:150px;
  height:40px;
  transition: all 0.5s ease;
  margin-left: auto;
  border: none;
}



.button-zaloguj:hover {
  background-color: darkgreen;
  color:white;
  transition: all 0.5s ease;
  transform: scale(1.1, 1.1);
}

.button-naw{
    text-decoration: none;
    background-color: rgba(39, 176, 39, 0.5);
  color: darkgreen;
  border-radius: 10px;
    width:450px;
  height:100px;
  box-sizing: border-box;
  box-sizing: border-box;
font-size: 28px;
  font-weight: 300;
  line-height: 24px;
padding: 8px 18px;
display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s ease;
}

.button-naw:hover{
    background-color: darkgreen;
  color:white;
  transition: all 0.5s ease;
  transform: scale(1.1, 1.1);
}

.button-nawigacja {
  text-decoration: none;
  background-color: rgba(39, 176, 39, 0.5);
  color: darkgreen;
  border-radius: 10px;
  box-sizing: border-box;
  cursor: pointer;
  font-family: Arial;
  font-size: 28px;
  font-weight: 300;
  line-height: 24px;
  opacity: 1;
  outline: 0 solid transparent;
  padding: 8px 18px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width:450px;
  height:100px;
  transition: all 0.5s ease;
  
  border: none;
  margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}



.button-nawigacja:hover {
  background-color: darkgreen;
  color:white;
  transition: all 0.5s ease;
  transform: scale(1.1, 1.1);
}

.button-wyloguj {
  text-decoration: none;
  background-color: rgba(242, 41, 41, 0.5);
  color: #f02929;
  border-radius: 10px;
  box-sizing: border-box;
  cursor: pointer;
  font-family: Arial;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  opacity: 1;
  outline: 0 solid transparent;
  padding: 8px 18px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width:150px;
  height:40px;
  transition: all 0.5s ease;
  margin-left: auto;
}



.button-wyloguj:hover {
  background-color: #f02929;
  color:white;
  transition: all 0.5s ease;
  transform: scale(1.1, 1.1);
}

table {
    width:100%;
    padding: 5px;
}

table td{
    padding:10px;
    text-align:center;
}

.table_nav_mobil {
    width:100%;
    padding: 5px;
}

.td_nav_mobil {
    width:33%;
    padding:10px;
    text-align:center;
}

.btn_del {
    background: #fff;
    color: darkred;
    padding: 5px 30px;
    text-decoration: none;
}

.btn_del:hover {
    background:darkred;
    color: #fff;
}

.btn_nav {
    background: white;
    color: darkgreen;
    text-decoration: none;
    position: fixed;
    
   
}

.btn_nav:hover {
    background:darkgreen;
    color: white;
    position: fixed;
}

.btn_edit {
    background: #fff;
    color: darkgreen;
    padding: 5px 30px;
    text-decoration: none;
}

.btn_edit:hover {
    background:darkgreen;
    color: #fff;
}

.btn_nav_mobil {
    font-size: 30px;
    height: 100%;
    width:100%;
    background: #fff;
    color: darkgreen;
    padding: 15px 30px;
    text-decoration: none;
}

.btn_nav_mobil:hover {
    font-size: 30px;
    background:darkgreen;
    color: #fff;
}

#nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 99%;
  background-color: white;
  font-size: 20px;
  font-weight: 300;
}

#nav li {
    background-color: rgba(19, 98, 7);
  margin: 0;
  overflow: hidden;
}

#nav li a {
  display: block;
  color: #fdfdf2;
  padding: 13px 13px;
  text-decoration: none;
  background-color: rgba(19, 98, 7);
  border-radius: 8px 8px 8px 8px;
  margin-left:10px;
  margin-right:10px;
  margin-bottom:5px;
  margin-top:5px;
}

#nav li a:hover {
  text-decoration: none;
  background-color: rgba(255, 255, 255, 0.3);
  color: #fdfdf2;
  border-radius: 8px 8px 8px 8px;
}

#nav li.active a {
  background-color: #fdfdf2;
  color: rgba(19, 98, 7)
}

#nav li a img {
  width: 22px;
  height: 22px;
  vertical-align: top; /* Lub vertical-align: middle */
  margin-right: 5px; /* Dodatkowy margines między ikoną a tekstem */
}

#wysrodkowany table.custom-table {
  border-collapse: collapse;
  width: 90%;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  margin-left: 40px;
  margin-right: 20px;
  background-color:#fdfdf2;
}

#wysrodkowany table.custom-table th,
#wysrodkowany table.custom-table td {
  padding: 8px;
  text-align: left;
  font-size: 20px; /* Możesz dostosować wielkość tekstu według potrzeb */
  white-space: nowrap; /* Zapobiega zawijaniu zawartości komórki */
  overflow: hidden; /* Ukrywa zawartość, która nie mieści się w komórce */
  text-overflow: ellipsis; /* Wyświetla "..." w przypadku przekroczenia szerokości komórki */
}

#wysrodkowany table.custom-table th {
  background-color: #f2f2f2;
  color:black;
}

/* Podświetlenie wiersza na hover */
#wysrodkowany table.custom-table tr:hover {
  color: #FFAE00;
}

/* Styl dla pierwszego wiersza (nagłówki) */
#wysrodkowany table.custom-table thead tr {
  background-color: #333;
  color: #fff;
}

#wysrodkowany table.custom-table thead th {
  font-weight: bold;
}

/* Styl dla parzystych wierszy */
#wysrodkowany table.custom-table tbody tr:nth-child(even) {
  background-color: #f7f7f7;
}

/* Styl dla nieparzystych wierszy */
#wysrodkowany table.custom-table tbody tr:nth-child(odd) {
  background-color: #fff;
}

.work-hours {
    display: flex;
    height: 20px;
}

.hour {
    width: calc(100% / 24);
    height: 100%;
    background-color: #ccc;
}

.start-hour, .end-hour, .in-between {
    background-color: darkgreen;
}

.start-hour-orange, .end-hour-orange, .in-between-orange {
    background-color: #ffc905;
}

.end-hour-err, .in-beetween-err {
    background-color:red;
}

.end-hour-more, .in-beetween-more {
    background-color:blue;
}

.current-hour {
    position: relative;
}

.current-hour::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-left: 2px solid red;
}

.holiday {
    background-color: #ffcccc;
}

#wysrodkowany .styled-table {
    border-collapse: collapse; /* Dodaj tę linię, aby złączyć obramowania komórek */
    width: 100%;
}

#wysrodkowany .styled-table thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: center;
}

#wysrodkowany .styled-table th {
    color:#fdfdf2;
    padding: 12px 15px;
    background-color: #101090; /* Dodaj tło do nagłówków kolumn */
    border-bottom: 2px solid #101090; /* Dodaj obramowanie na dole nagłówków kolumn */
}

#wysrodkowany .styled-table th:first-child {
    border-radius: 10px 0px 0px 0px; /* Dla pierwszego nagłówka kolumny */
}

#wysrodkowany .styled-table th:last-child {
    border-radius: 0px 10px 0px 0px; /* Dla ostatniego nagłówka kolumny */
}

#wysrodkowany .styled-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #ddd; /* Dodaj cienkie obramowanie na dole komórek */
}

#wysrodkowany .styled-table tbody tr:nth-child(odd) {
    background-color: #f3f3f3; /* Kolor tła dla nieparzystych wierszy */
}

#wysrodkowany .styled-table tbody tr:nth-child(even) {
    background-color: #d3d3d3; /* Kolor tła dla parzystych wierszy */
}

#wysrodkowany .styled-table tbody tr:hover {
    background-color: #2f4393; /* Zmiana koloru tła dla wierszy przy hoverze */
    color: #fdfdf2;
}

#error_container {
    display: none;
}

#error_container.show {
    display: block;
    color:red;
}

/* Styl dla input color */
input[type="color"] {
    appearance: none;
    width: 24px;
    height: 24px;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    vertical-align: middle;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #ccc;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

input[type="color"]::-webkit-color-swatch:hover {
    border: none;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #333;
}

.search {
  display: inline-block;
  position: relative;
}

.search input[type="text"] {
  width: 200px;
  padding: 10px;
  border: none;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.search button[type="submit"] {
background-color: rgba(16, 16, 144, 0.4);
  border: none;
  color:#101090;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 0;
  right: 0;
  transition: all 0.5s ease;
}

.search button[type="submit"]:hover {
  transform: scale(1.1);
  color: rgb(255, 255, 255);
  background-color: #101090;
  transition: all 0.5s ease;
  transform: scale(1.1, 1.1);
}

/* Styl dla input select */
select {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
    font-size: 14px;
}

/* Styl dla przycisku submit */
input[type="submit"] {
    padding: 8px 16px;
    background-color: rgba(16, 16, 144, 0.4);
    color: #101090;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.5s ease;
}

/* Zmiana kursora na wskaźnik na elemencie select */
input[type="submit"]:hover {
    background-color: #101090;
    color:white;
    transform: scale(1.1, 1.1);
    transition: all 0.5s ease;
}

/* Zmiana kursora na ręczny (domyślny) na opcjach w elemencie select */
select option {
    cursor: default;
    padding: 5px;
}

/* Styl dla wybranej opcji w elemencie select */
select option:checked {
    background-color: transparent;
    color: inherit;
}

    .date-container {
        display: flex;
        align-items: center;
    }

    .date-label {
        margin-right: 10px;
    }

    .date-input {
        border: 1px solid #ccc;
        padding: 5px;
        border-radius: 4px;
    }

  .text-input {
        border: 1px solid #ccc;
        padding: 5px;
        border-radius: 4px;
        width: 200px;
    }
    
.number-input {
        border: 1px solid #ccc;
        padding: 5px;
        border-radius: 4px;
        width: 100px;
    }

.form-container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 20px;
        width:80%;
    }

    .form-column {
        flex: 1;
        max-width: calc(50% - 10px); /* Rozmiar kolumny */
    }

    .form-column label,
    .form-column select,
    .form-column input,
    .form-column textarea {
        width: 100%;
    }

    .form-column .date-input {
        width: 100%;
    }

    .form-column .number-input {
        width: 100%;
    }

    .form-column .text-input {
        width: 100%;
    }

    .form-column select,
    .form-column input,
    .form-column textarea {
        margin-bottom: 10px;
    }

    .form-column button {
        margin-top: 10px;
    }