/* -----------------------------------Wlasny Styl dla całej strony---------------------------------- */
:root {
    --background_white: #ffffff;
    --text_white: #ffffff;
    --border_white: #ffffff;
    --text_dark_color: #000034;
    --super_light_yellow: #ffffb8;
    --light_yellow: #fcd00b;
    --dark_yellow: #fca80b;
    --super_dark_yellow: #cd9100;
    --button_color: #0562b0;
    --button_hover: #000034;
    --button_text_hover: #fcd00b;
    --tablinks_color: #0562b0;
    --tablinks_hover: #000034;
    --tablinks_text_hover: #fcd00b;
    --tablinks_active: #000034;
    --tablinks_text_active: #fcd00b;
    --tab_border: #000034;
    --scrollbar_color: #0562b0;
    --temp_color_a: #c0ebec;
    --temp_color_b: #eaecc0;
    --temp_color_c: #c0c0ec;
    --temp_color_d: #ecc0e5;
    --background_input: #fcd00b;
}

/* -----------------------------------Wlasny Styl dla całej strony---------------------------------- */
* {
    box-sizing: border-box; /*----------*/
    margin: 0; /*----------*/
    padding: 0;   /*----------*/
    outline: none;   /*----------*/
    border: none; /*----------*/
    -webkit-user-select: none; /* Zablokowanie zaznaczania tekstu na przeglądarkach WebKit */
    user-select: none;         /* Zablokowanie zaznaczania tekstu na innych przeglądarkach */
}

/* -----------------------------------Wlasny Styl dla całej strony---------------------------------- */
body {
    font-family: Arial, sans-serif; /* Czcionka całej strony */
    /*font-size: 16px; /* Ustawienie rozmiaru czcionki */
    background-image: url("../image/back_hexe.png"); /* Tło strony z obrazem */  
}

/* -----------------------------------Styl responsywny dla telefonu--------------------------------- */
@media (max-width: 767px) {
    .container {
        width: 350px; /* Szerokość kontenera na 40% szerokości ekranu */
    }
    h4 {
        font-size: 18px; /* Rozmiar czcionki */
    }
    h3 {
        font-size: 16px; /* Rozmiar czcionki */
    }
    #time_display {
        font-size: 16px;
    }
    .tablinks {
        height: 28px;
        font-size: 14px; /* Rozmiar czcionki */
    }
    .tablinks.active {
        font-size: 16px; /*----------*/
    }
    .tablinks:not(.active):hover {
        font-size: 16px; /*----------*/
    }
    .tabcontent {
        height: 360px; /*----------*/
    }
    #label_option,
    #label_usage,
    #label_value,
    #label_full_bill {
        font-size: 14px; /*----------*/
    }
    .double_button,
    .single_button {
        height: 32px; /* Wysokosc przycisku */
        font-size: 14px; /* Rozmiar czcionki */
    }
    #button_savebillshare,
    #button_saveexit,
    #button_clear,
    #button_calculate,
    #button_saverate,
    #button_login,
    #button_register {
        width: 30%; /* Szerokosc przycisków */
    }
    #bottom_label {
        font-size: 12px;
    }
    .grid_container label {
        font-size: 13px; /* Rozmiar czcionki */
    }
}

/* -----------------------------------Styl responsywny dla tabletu----------------------------------- */
@media (min-width: 768px) and (max-width: 1199px) {
    .container {
        width: 450px; /* Szerokość kontenera na 40% szerokości ekranu */
    }
    h4 {
        font-size: 20px; /* Rozmiar czcionki */
    }
    h3 {
        font-size: 18px; /* Rozmiar czcionki */
    }
    #time_display {
        font-size: 18px;
    }
    .tablinks {
        height: 32px;
        font-size: 16px; /* Rozmiar czcionki */
    }
    .tablinks.active {
        font-size: 18px; /*----------*/
    }
    .tablinks:not(.active):hover {
        font-size: 18px; /*----------*/
    }
    .tabcontent {
        height: 380px; /*----------*/
    }
    #label_option,
    #label_usage,
    #label_value,
    #label_full_bill {
        font-size: 16px; /*----------*/
    }
    .double_button,
    .single_button {
        height: 36px; /* Wysokosc przycisku */
        font-size: 16px; /* Rozmiar czcionki */
    }
    #button_savebillshare,
    #button_saveexit,
    #button_clear,
    #button_calculate,
    #button_saverate,
    #button_login,
    #button_register {
        width: 32%; /* Szerokosc przycisków */
    }
    #bottom_label {
        font-size: 14px;
    }
    .grid_container label {
        font-size: 15px; /* Rozmiar czcionki */
    }
}

/* -----------------------------------Styl responsywny dla desktop------------------------------------ */
@media (min-width: 1200px) {
    .container {
        width: 550px; /* Szerokość kontenera na 40% szerokości ekranu */
    }
    h4 {
        font-size: 22px; /* Rozmiar czcionki */
    }
    h3 {
        font-size: 20px; /* Rozmiar czcionki */
    }
    #time_display {
        font-size: 20px;
    }
    .tablinks {
        height: 36px;
        font-size: 18px; /* Rozmiar czcionki */
    }
    .tablinks.active {
        font-size: 20px; /*----------*/
    }
    .tablinks:not(.active):hover {
        font-size: 20px; /*----------*/
    }
    .tabcontent {
        height: 400px; /*----------*/
    }
    #label_option,
    #label_usage,
    #label_value,
    #label_full_bill {
        font-size: 18px; /*----------*/
    }
    .double_button,
    .single_button {
        height: 40px; /* Wysokosc przycisku */
        font-size: 18px; /* Rozmiar czcionki */
    }
    #button_savebillshare,
    #button_saveexit,
    #button_clear,
    #button_calculate,
    #button_saverate,
    #button_login,
    #button_register {
        width: 34%; /* Szerokosc przycisków */
    }
    #bottom_label {
        font-size: 16px;
    }
    .grid_container label {
        font-size: 17px; /* Rozmiar czcionki */
    }
}

/* ---------------------------------Ustawienia wyglądu i Stylu paska przewijania--------------------- */
::-webkit-scrollbar {
    width: 20px; /* Szerokość paska przewijania */
}

/* ---------------------------------Ustawienia wyglądu i Stylu paska przewijania--------------------- */
::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar_color); /* Kolor paska przewijania */
    border-radius: 0 0 10px 0; /* Dopasowanie do zaokrąglenia zakładki */
    border: 2px solid var(--tablinks_hover);
}

/* ------------------------------Ustawienia specialne wyglądu dla pola 'INPUT' --------------------- */
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

/* -----------------------------------Szerokość i styl kontenera Głównego dla formularza------------ */
.container {
    /*width: 35%; /* Szerokość kontenera na 40% szerokości ekranu */
    /*min-width: 350px;   /* Minimalna szerokość kontenera to 400px */
    /*max-width: 450px; /*----------*/
    margin: 0 auto;     /* Wyśrodkowanie kontenera */
    margin-top: 50px; /* Odstęp od góry */
    margin-bottom: 50px; /* Odstęp od dolu */
    padding: 10px; /* Wewnętrzne marginesy */
    background: linear-gradient(to top right,
        var(--dark_yellow),
        var(--light_yellow)); /* Kolor tła kontenera - gradient */
    border-radius: 15px; /* Zaokrąglenie rogów kontenera */
    box-shadow: 10px 10px 30px 5px rgba(0, 0, 0, 0.5); /* Cień wokół kontenera */
}

/* -----------------------------------Styl kontenera 'HEAD' aplikacji ------------------------------ */
.head_container {
    background: linear-gradient(to bottom right,
    var(--dark_yellow), /*----------*/
    var(--light_yellow)); /* Kolor tła kontenera - gradient */
    border-radius: 10px; /* Zaokrąglenie rogów kontenera */
}

/* -----------------------------------Styl kontenera 'TITLE' aplikacji ------------------------------ */
.title_container {
    display: flex; /*----------*/
    width: 100%; /* Szerokość kontenera na 100% szerokości kontenera 'HEAD'  */
}
/* ------------------------------Styl i wyglad Naglowka 'TITLE' w kontenerze 'HEAD' ---------------- */
#app_title {
    /*font-size: 18px; /* Rozmiar czcionki */
    font-weight: bold; /* Pogrubienie czcionki */
    padding: 10px 3px 3px 3px; /* Opcjonalne, aby dodać trochę przestrzeni wewnątrz */
    color: var(--text_dark_color); /* Kolor tekstu */
    justify-content: center; /* Wyśrodkowanie elementów w pionie */
}

/* --------------------Styl kontenera 'LOGO' oraz dwoch 'flag' tlumaczenia aplikacji --------------- */

.time_container {
    display: flex; /* Ustawienie jako kontener flex */
    width: 100%; /* Szerokość kontenera na 100% szerokości kontenera nadrzędnego */
    align-items: center; /* Wyrównanie elementów w pionie */
    justify-content: right; /* Wyrównanie zawartości kontenera do prawej */
}

#time_display {
    font-weight: bold;
    padding: 3px 35px 3px 3px; /* Opcjonalne, aby dodać trochę przestrzeni wewnątrz */
    color: var(--text_dark_color);
}

/* --------------------Styl kontenera 'LOGO' oraz dwoch 'flag' tlumaczenia aplikacji --------------- */
.head_content {
    display: flex; /*----------*/
    justify-content: space-between; /*----------*/
}
.logo_container {
    display: flex; /*----------*/
}
#mine_logo {
    width: 100%; /* Szerokość logo na 100% dostepnej szerokości kontenera */
    margin: 5px auto; /*----------*/
}

.flag_container {
    display: flex; /*----------*/
}

#ph_flag,
#en_flag {
    width: 30%; /* Szerokość kontenera na 100% szerokości kontenera 'HEAD'  */
    margin: 15px auto; /*----------*/
}

#ph_flag:not(.active):hover {
    cursor: pointer; /* Wskaźnik kursora na fladze Filipin */
    box-shadow: 2px 2px 12px 5px var(--super_dark_yellow); /* Cień wokół pol 'INPUT' */
    transform: scale(1.1); /* Powiększenie o 5% */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Płynne przejścia */
}

#en_flag:not(.active):hover {
    cursor: pointer; /* Wskaźnik kursora na fladze Filipin */
    box-shadow: 2px 2px 12px 5px var(--super_dark_yellow); /* Cień wokół pol 'INPUT' */
    transform: scale(1.1); /* Powiększenie o 5% */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Płynne przejścia */
}

/* -----------------------------------Ustawienia wyglądu i Styl dla zakładek------------------------- */
.tabs {
    display: flex; /* Ustawienie zakładek w rzędzie */
    justify-content: space-around; /* Rozłożenie zakładek równomiernie */
    background-color: transparent; /* Przezroczyste tło zakładek */
    border-radius: 10px 10px 0 0; /* Zaokrąglone górne rogi zakładek */
    padding: 0; /* Wewnętrzne marginesy */
}

/* -----------------------------------Ustawienia wyglądu i Styl dla przycisków zakładek-------------- */
.tablinks {
    flex: 1; /* Równy podział miejsca między zakładkami */
    border: none; /* Brak obramowania */
    color: var(--text_white); /* Kolor tekstu */
    background-color: var(--tablinks_color); /* Kolor tła zakładek – ciemny niebieski */
    transition: background-color 0.5s ease; /* Płynna zmiana koloru */
    border-radius: 10px 10px 0 0; /* Zaokrąglone górne rogi */
}

/* -----------------------------------Ustawienia wyglądu i Styl dla aktywnej zakładki---------------- */
.tablinks.active {
    background-color: var(--tablinks_active); /* Kolor aktywnej zakładki */
    color: var(--tablinks_text_active); /* Kolor tekstu aktywnej zakładki */
    font-weight: bold; /* Pogrubienie czcionki */
}

/* -----------------------------------Styl gdy kursor znajduje się nad zakładką---------------------- */
.tablinks:not(.active):hover {
  cursor: pointer; /* Wskaźnik kursora na zakładkach */
  /*background-color: var(--tablinks_hover); /* Zmiana koloru tła zakladki - hover */
  color: var(--tablinks_text_hover); /* Kolor tekstu po najechaniu - hover */
  box-shadow: 0 0 6px 4px rgba(0, 0, 0, 0.4); /* Dodaje delikatny cień */
  font-weight: bold; /* Pogrubienie czcionki */
  transition: color 0.5s ease, font-weight 0.5s ease, box-shadow 0.3s ease; /* Płynne przejścia */
}

/* -----------------------------------Ustawienia wyglądu i Styl dla zakładki------------------------- */
.tabcontent {
    border: 2px solid var(--tab_border); /* Obramowanie zawartości zakładki */
    border-radius: 0 0 10px 10px; /* Zaokrąglone dolne rogi */
    /*height: 379px; /*----------*/
    overflow-y: auto; /* Pasek przewijania w pionie */
}

/* -----------------------------------Zakładka Calculator-------------------------------------------- */
/* ----------------------------Kontener główny dla całej zakładki "Calculator"------------------------*/
#calculator {
    display: flex; /*----------*/
    flex-direction: column; /*----------*/
    justify-content: space-between; /* Równomiernie rozmieszczone sekcje od góry do dołu */
    height: 100%; /* Upewnij się, że kontener ma wysokość 100% */
    padding: 0; /* Opcjonalne, aby dodać trochę przestrzeni wewnątrz */
    background: linear-gradient(to bottom right,
        var(--dark_yellow), 
        var(--light_yellow)); /* Kolor tła kontenera - gradient */
}

/* -----------------------------------Styl dla pól tekstowych i liczbowych---------------------------- */
#calculator input[type="number"],
#calculator input[type="text"],
#calculator select {
    width: 100%; /*----------*/
    padding: 5px; /*----------*/
    box-sizing: border-box; /* Aby zachować poprawne wymiary */
    border-radius: 8px; /*----------*/
    background-color: var(--background_white);
    color: var(--text_dark_color);
    font-weight: bold; /* Pogrubienie czcionki */
    border: 2px solid var(--border_white);
}

/* --------------------------Styl dla aktywnych/wybranych pól tekstowych i liczbowych----------------- */
#calculator input[type="text"]:focus,
#calculator input[type="number"]:focus,
#calculator select:focus, 
.grid_container input:focus {
    background-color: var(--super_light_yellow);/*----------*/
    border: 2px solid var(--light_yellow);/*----------*/
    box-shadow: 0px 0px 10px 5px var(--super_dark_yellow); /* Cień wokół pol 'INPUT' */
    outline: none;
}

/* ---------------------------Stylizacja sekcji - rozkład elementów wewnątrz------------------------- */
.content_billshare, 
.content_usage, 
.content_value {
    display: flex; /*----------*/
    box-sizing: border-box; /* Aby zachować poprawne wymiary */
    flex-direction: column; /*----------*/
    justify-content: center; /* Wyśrodkowanie elementów w pionie */
    align-items: center; /* Wyśrodkowanie elementów w poziomie */
    padding: 0px 0px 15px 0px; /* Odstęp na dole, żeby pole 'Full Value of Bill' nie dotykało ramki zakładki */
}

/* ----------------- Każda sekcja może mieć swoją specyficzną wysokość lub udział przestrzeni------- */
#section_billshare,
#section_usage,
#section_value {
    flex: 1; /* Dzięki temu każda sekcja zajmie równą ilość miejsca w pionie */
}

#label_option,
#label_usage,
#label_value,
#label_full_bill {
    display: flex;
    padding: 6px; /* Trochę miejsca wokół sekcji */
    color: var(--text_dark_color);
    font-weight: bold; /* Pogrubienie czcionki */
}

.button_container {
    display: flex; /* Wyśrodkowanie kontenera do zawartosci - Gridu wyzej w poziomie */
    width: 100%; /*----------*/
    padding: 0; /* Trochę miejsca wokół sekcji */
    /*border: 1px solid var(--tab_border); /* Opcjonalne, jeśli chcesz zaznaczyć granice sekcji */
}

.set_button {
    display: flex; /* Wyśrodkowanie kontenera do zawartosci - Gridu wyzej w poziomie */
    width: 100%; /*----------*/
    padding: 0; /* Trochę miejsca wokół sekcji */
    /*border: 1px solid var(--tab_border); /* Opcjonalne, jeśli chcesz zaznaczyć granice sekcji */
}
#button_savebillshare,
#button_saveexit,
#button_clear,
#button_calculate,
#button_saverate,
#button_login,
#button_register {
    /*width: 35%; /* Szerokosc przycisków */
    justify-content: center; /* Wyrownanie tekstu przycisków równomiernie do srodka w poziomie */
    margin: 15px auto; /* Wyrownanie tekstu przycisków równomiernie do srodka */
}

/* ------------Wygląd i Styl dla pary przyciskow w 'section_usage' zakladce 'Calculator'-------------- */
.double_button{
    display: flex; /*----------*/
    width: 100%; /*----------*/
    align-items: center; /* --------------Wyrównanie tekstu przyciskow w pionie 'Y' ------------------ */
    background-color: var(--button_color); /*----------*/
    color: var(--text_white); /*----------*/
    border: none; /*----------*/
    border-radius: 10px; /*----------*/
    -webkit-user-select: none; /* Zablokowanie zaznaczania tekstu na przeglądarkach WebKit */
    user-select: none;         /* Zablokowanie zaznaczania tekstu na innych przeglądarkach */
}

/* Wygląd i Styl przycisku 'Save' i 'Save & Exit' - wspólny styl dla zakladki 'Calculator' i 'Bill Data' */
.single_button {
    display: flex; /*----------*/
    width: 100%; /*----------*/
    align-items: center; /* --------------Wyrównanie tekstu przyciskow w pionie 'Y' ------------------ */
    background-color: var(--button_color); /*----------*/
    color: var(--text_white); /*----------*/
    border: none; /*----------*/
    border-radius: 10px; /*----------*/
    -webkit-user-select: none; /* Zablokowanie zaznaczania tekstu na przeglądarkach WebKit */
    user-select: none;         /* Zablokowanie zaznaczania tekstu na innych przeglądarkach */
}

/* --Wygląd i Styl wszystkich przyciskow dla zakladki 'Calculator' i 'Bill Data' - tylko desktop------ */
@media (hover: hover) and (pointer: fine) {
    .double_button:hover,
    .single_button:hover {
        transform: scale(1.05); /* Powiększenie o 5% */
        background-color: var(--button_hover); /* Zmiana koloru przy najechaniu */
        color: var(--button_text_hover); /* Kolor tekstu po najechaniu */
        font-weight: bold; /* Pogrubienie czcionki */
        box-shadow: 0 0 6px 4px rgba(0, 0, 0, 0.4); /* Dodaje delikatny cień */
        transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, font-weight 0.3s ease,
        box-shadow 0.3s ease; /* Płynne przejścia */
        cursor: pointer; /* Wskaźnik kursora na przyciskach */
    }
}

/* Wygląd i Styl wszystkich przyciskow dla zakladki 'Calculator' i 'Bill Data' - tylko urządzenia mobilne */
@media (hover: none) and (pointer: coarse) {
    .double_button.active,
    .single_button.active {
        transform: scale(1.03); /* Powiększenie o 3% */
        background-color: var(--button_hover); /* Zmiana koloru przy najechaniu */
        color: var(--button_text_hover); /* Kolor tekstu po najechaniu */
        font-weight: bold; /* Pogrubienie czcionki */
        box-shadow: 0 0 6px 4px rgba(0, 0, 0, 0.4); /* Dodaje delikatny cień */
        transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, font-weight 0.3s ease,
        box-shadow 0.3s ease; /* Płynne przejścia */
    }
}

.footer_container {
    display: flex; /* Ustawienie jako kontener flex */
    width: 100%; /* Szerokość kontenera na 100% szerokości kontenera nadrzędnego */
    align-items: center; /* Wyrównanie elementów w pionie */
    justify-content: left; /* Wyrównanie zawartości kontenera do prawej */
    border-radius: 10px 10px 10px 10px; /* Zaokrąglone dolne rogi */
    background: linear-gradient(to left ,
        var(--dark_yellow), 
        var(--light_yellow)); /* Kolor tła kontenera - gradient */
}

#bottom_label {
    padding: 5px 3px 5px 35px; /* Opcjonalne, aby dodać trochę przestrzeni wewnątrz */
    color: var(--text_dark_color);
}

/* -----------------------------------Wygląd i Styl dla Zakładki 'Bill Data'-------------------------- */
/* -----------------------------------Styl dla całej zakladki 'Bill Data'----------------------------- */
#billdata {
    background: linear-gradient(to bottom left ,
        var(--dark_yellow), 
        var(--light_yellow)); /* Kolor tła kontenera - gradient */
}

/* --------------------------------Wygląd i Styl dla naglowka h3 w zakladce 'Bill Data'--------------- */
.text_container {
    display: flex; /* Wyśrodkowanie kontenera do zawartosci - Gridu wyzej w poziomie */
    width: 100%; /*----------*/
    padding: 0; /* Trochę miejsca wokół sekcji */
}

/* --------------------------------Wygląd i Styl dla naglowka h3 w zakladce 'Bill Data'--------------- */
h3 {
    margin: 10px auto; /*----------*/
}

/* ------------------------------Wygląd i Styl dla pól 'grid' w zakladce 'Bill Data'------------------ */
.grid_container {
    display: grid; /*----------*/
    grid-template-columns: 1fr 0.3fr; /* Dwie kolumny: 1fr dla etykiety, 0.3fr dla pola tekstowego */
    row-gap: 6px; /* Odstęp między elementami */
    column-gap: 1px; /* Odstęp między elementami */
    align-items: center; /* Wyrównanie w pionie */
    margin: 0px 4px; /* Odstęp u gory ponad wierszami listy */
}

/* --------------------------------Wygląd i Styl dla pól tekstowych 'Label' w zakladce 'Bill Data'---- */
.grid_container label {
    margin-left: 0; /*----------*/
    font-weight: bold; /* Pogrubienie czcionki */
}
/* --------------------------------Wygląd i Styl dla pól liczbowych 'Input' w zakladce 'Bill Data'---- */
.grid_container input {
    width: 100%; /*----------*/
    box-sizing: border-box; /*----------*/
    padding: 6px; /*----------*/
    border-radius: 6px; /*----------*/
    outline: none;   /*----------*/
    background-color: var(--background_white); /* Zmiana koloru tla pola 'INPUT' */
    border: 2px solid var(--border_white); /* Opcjonalne, jeśli chcesz zaznaczyć granice pola 'INPUT' */
    font-weight: bold; /* Pogrubienie czcionki */
}

/* ------------Miękkie ostrzeżenie o złym formacie pola (bez kasowania wartości) - po opuszczeniu pola---- */
.grid_container input.field-warning {
    border: 2px solid #d32f2f;
    box-shadow: 0px 0px 8px 2px rgba(211, 47, 47, 0.45);
}

/* =====================================================================================================
   ETAP 1 - Style dla stron logowania / rejestracji ('login.html', 'register.html')
   Reuzywa tych samych zmiennych kolorow i tych samych proporcji co reszta aplikacji,
   zeby wszystko pasowalo do siebie wizualnie (przyciski, etykiety, pola - te same wysokosci/fonty)
   ===================================================================================================== */

.auth_card {
    display: flex;
    flex-direction: column;
    padding: 15px;
    background: linear-gradient(to bottom right,
        var(--dark_yellow),
        var(--light_yellow));
}

.auth_form {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.auth_field {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 10px;
}

.auth_field label {
    padding: 4px 6px;
    color: var(--text_dark_color);
    font-weight: bold;
}

.auth_field input[type="text"],
.auth_field input[type="password"] {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    border-radius: 8px;
    background-color: var(--background_white);
    color: var(--text_dark_color);
    font-weight: bold;
    border: 2px solid var(--border_white);
}

.auth_field input[type="text"]:focus,
.auth_field input[type="password"]:focus {
    background-color: var(--super_light_yellow);
    border: 2px solid var(--light_yellow);
    box-shadow: 0px 0px 10px 5px var(--super_dark_yellow);
    outline: none;
}

.auth_switch {
    display: flex;
    justify-content: center;
    padding: 8px 0 4px 0;
    color: var(--text_dark_color);
}

.auth_switch a {
    color: var(--button_color);
    font-weight: bold;
    text-decoration: underline;
}

.auth_flash {
    display: flex;
    flex-direction: column;
    background-color: var(--background_white);
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 10px;
    border: 2px solid var(--super_dark_yellow);
}

.auth_flash p {
    color: var(--text_dark_color);
    font-weight: bold;
    text-align: center;
}

/* -----------------------------------Pasek zalogowanego uzytkownika w naglowku (index.html)----------- */
.user_bar {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 3px 10px;
    color: var(--text_dark_color);
    font-weight: bold;
}

.user_bar a {
    color: var(--text_dark_color);
}

.user_bar a:hover {
    color: var(--button_hover);
    cursor: pointer;
}

/* ----------------------------------------------------------------------------------------------------
   'chip_frame' - czarna ramka z zaokraglonymi rogami, tego samego ksztaltu co przyciski (.single_button),
   stosowana do krotkich elementow tekstowych (nazwa usera, 'Log out', naglowki 'Log In'/'Create Account'),
   zeby caly interfejs wygladal spojnie (kazdy element - przycisk, pole, etykieta - ma podobna 'oprawe')
   ---------------------------------------------------------------------------------------------------- */
.chip_frame {
    display: inline-block;
    border: 2px solid var(--tab_border);
    border-radius: 8px;
    padding: 4px 14px;
    background-color: var(--background_white);
    text-decoration: none;
}

.user_bar a.chip_frame:hover {
    background-color: var(--super_light_yellow);
}

.auth_card h3.chip_frame {
    margin: 0 auto 10px auto;
    background-color: var(--background_white);
}

@media (max-width: 767px) {
    .auth_card h3 { font-size: 16px; }
    .auth_field label { font-size: 14px; }
    .auth_field input { height: 32px; font-size: 14px; }
    .user_bar { font-size: 12px; }
    .chip_frame { padding: 3px 10px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .auth_card h3 { font-size: 18px; }
    .auth_field label { font-size: 15px; }
    .auth_field input { height: 36px; font-size: 16px; }
    .user_bar { font-size: 14px; }
    .chip_frame { padding: 4px 14px; }
}

@media (min-width: 1200px) {
    .auth_card h3 { font-size: 20px; }
    .auth_field label { font-size: 17px; }
    .auth_field input { height: 40px; font-size: 18px; }
    .user_bar { font-size: 16px; }
    .chip_frame { padding: 5px 16px; }
}