/* Resetowanie domyślnych styli dla przeglądarek */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Styl dla całej strony */
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
  text-align: center;
  padding: 20px;
}

/* Styl dla formularza aka pole */
form {
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  max-width: 500px; /* Ograniczenie szerokości formularza */
  margin: 0 auto; /* Wyśrodkowanie formularza na stronie */
}

/* Styl dla etykiet */
label {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
  color: #333; /* Kolor tekstu czarny */
}

/* Styl dla inputa */
input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 10px;
  margin: 5px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: border-color 0.3s ease, transform 0.3s ease;
  font-size: 16px; /* Ustawienie wielkości czcionki */
}

/* Dodaj podświetlenie pól po najechaniu myszą */
input[type="text"]:hover,
input[type="password"]:hover {
  border-color: #000000;
}

/* Dodaj animację wciśnięcia na pole */
input[type="text"]:focus,
input[type="password"]:focus {
  border-color: #000000;
  transform: scale(1.02);
}

/* Styl dla select */
select {
  width: 100%;
  padding: 10px;
  margin: 5px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: border-color 0.3s ease; /* Dodanie efektu przejścia */
}

/* Dodaj podświetlenie pola select po najechaniu myszą */
select:hover {
  border-color: #000000;
}

/* Styl dla przycisku "Zaloguj" */
button {
  background-color: #007BFF;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease, transform 0.1s ease; /* Dodanie efektów przejścia */
}

/* Styl dla przycisku "Zaloguj" po najechaniu myszą */
button:hover {
  background-color: #0056b3;
}

/* Efekt klikania przycisku */
button:active {
  transform: scale(0.95); /* Pomniejszenie przycisku podczas kliknięcia */
}

/* Dodatkowe style */
strong {
  color: #0056b3;
}

/* Styl dla h2 */
h2 {
  font-size: 24px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.version-label {
  background-color: #333; /* Kolor tła */
  color: #fff; /* Kolor tekstu */
  padding: 5px 10px; /* Wewnętrzny odstęp */
  border-radius: 5px; /* Zaokrąglenie rogów */
  font-size: 14px; /* Rozmiar tekstu */
  text-align: center; /* Wyrównanie tekstu do środka */
  margin-top: 10px; /* Odległość od sekcji z loginami */
  width: auto; /* Automatyczna szerokość */
  display: inline-block; /* Aby napis zajmował tylko tyle miejsca, ile potrzebuje */
  float: center; /* Przesunięcie w prawo */
}

.input-container {
  margin-bottom: 20px;
}

/* Styl dla etykiety */
.input-container label {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
  color: #333; /* Kolor tekstu czarny */
}

/* Styl dla inputa */
.input-container input[type="text"],
.input-container input[type="password"] {
  width: 100%;
  padding: 10px;
  margin: 5px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: border-color 0.3s ease, transform 0.3s ease;
  font-size: 16px; /* Dodane formatowanie tekstu */
}

/* Dodaj podświetlenie pól po najechaniu myszą */
.input-container input[type="text"]:hover,
.input-container input[type="password"]:hover {
  border-color: #000000;
}

/* Dodaj animację wciśnięcia na pole */
.input-container input[type="text"]:focus,
.input-container input[type="password"]:focus {
  border-color: #000000;
  transform: scale(1.02);
}

/* Styl dla przywitania zalogowanego użytkownika */
.welcome-text {
    background-color: #007BFF; /* Kolor tła niebieski */
    color: #fff; /* Kolor tekstu biały */
    padding: 10px; /* Wewnętrzny odstęp */
    border-radius: 5px; /* Zaokrąglenie rogów */
    font-size: 16px; /* Rozmiar tekstu */
    text-align: center; /* Wyrównanie tekstu do środka */
    margin-top: 10px; /* Odległość od innych elementów */
	width: auto; /* Automatyczna szerokość */
    display: inline-block; /* Aby napis zajmował tylko tyle miejsca, ile potrzebuje */
    float: center; /* Przesunięcie w prawo */
}

/* Media query dla responsywności */
@media screen and (max-width: 768px) {
  form {
    padding: 10px;
  }
}

/* Dodatkowe style dla tabeli */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #007BFF;
  color: #fff;
}

/* Styl dla nagłówka h1 */
h1 {
  font-size: 36px;
  margin-bottom: 20px;
  color: #333;
  text-align: center;
}

/* Styl dla menu na górze strony */
.menu {
  background-color: #000; /* Czarny kolor tła */
  color: #fff; /* Kolor tekstu biały */
  padding: 10px 0;
  text-align: center;
  position: center;
  top: 0;
  left: 0;
  width: 100%; /* Pełna szerokość strony */
  z-index: 999;
}

.menu a {
  color: #fff; /* Kolor tekstu biały */
  text-decoration: none;
  font-size: 18px;
  margin: 0 20px; /* Dodano odstęp między przyciskami */
  transition: color 0.3s ease; /* Dodano efekt zmiany koloru tekstu po najechaniu myszą */
}

.menu a:hover {
  color: #007BFF; /* Kolor tekstu niebieski po najechaniu myszą */
}

/* Styl dla animowanych przycisków */
.button {
  background-color: #007BFF; /* Kolor tła niebieski */
  color: #fff; /* Kolor tekstu biały */
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease, transform 0.1s ease;
}

.button:hover {
  background-color: #0056b3; /* Kolor tła niebieski po najechaniu myszą */
}

.button:active {
  transform: scale(0.95);
}

/* Styl przycisku "Cofnij" */
.back-button {
  background-color: #007BFF;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease, transform 0.1s ease;
  margin-bottom: 10px; /* Dodaj margines na dole */
  display: inline-block; /* Ustawić jako element inline */
}

/* Styl przycisku "Cofnij" po najechaniu myszą */
.back-button:hover {
  background-color: #0056b3;
}

/* Efekt klikania przycisku */
.back-button:active {
  transform: scale(0.90);
}

.normal-priorytet {
    background-color: #FFFFFF !important;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 10px;
    display: inline-block;
}

.sredni-priorytet {
    background-color: #FFFF00 !important;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 10px;
    display: inline-block;
}

.wysoki-priorytet {
    background-color: #FFA500 !important;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 10px;
    display: inline-block;
}

.bardzo-wysoki-priorytet {
    background-color: #FF0000 !important;
    color:  #FFFFFF;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 10px;
    display: inline-block;
}

.unknown-priorytet {
    background-color: #808080 !important;
    font-weight: bold;
    display: inline-block; /* Aby tło dopasowało się tylko do tekstu */
    padding: 5px 10px;
    border-radius: 10px;
}

.priority-cell {
    text-align: center;
}

.priority-center {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -40%
}

/* Styl dla przycisku "akcji" */
.take-button {
    background-color: #007BFF;
    color: #fff;
    padding: 8px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 15px;
    font-family: "Arial Black", sans-serif; /* Dodaj wybraną czcionkę */
    transition: background-color 0.3s ease, transform 0.1s ease;
}

/* Styl przycisku "akcji" po najechaniu myszą */
.take-button:hover {
    background-color: #0056b3;
}

/* Efekt klikania przycisku */
.take-button:active {
    transform: scale(0.90);
}