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

body {
    display: flex;
    flex-direction: column;
}

article {
    flex: 1;
}

footer {
    background-color: #121212;
    color: #ffffff;
    border-top: 2px solid #ba141a;
    text-align: center;
    padding: 1rem 0;
    font-size: 0.875rem;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}



.error-image {
    max-width: 100%; /* Obrazek nie będzie większy niż szerokość kontenera */
    height: auto; /* Zachowanie proporcji obrazka */
    margin: 0 auto; /* Wyśrodkowanie */
}

@media (max-width: 768px) {
    .error-image {
        max-width: 80%; /* Zmniejszenie szerokości obrazka na małych ekranach */
    }
}



body {
    background-color: #231f20; /* Ciemny szary */
    color: #ffffff;           /* Biały tekst */
}

/* Nagłówek z logo */
.brand-header {
    text-align: center; /* Wyśrodkowanie logo */
    padding: 10px;
    background-color: #231f20; /* Dopasowanie do tła */
}

/* Ogólne ustawienia przycisków */
.btn-primary {
    background-color: #444444 !important; /* Ciemnoszary dla nieaktywnych */
    border: none; /* Bez obramowania */
    color: #ffffff; /* Biały tekst */
    padding: 10px 15px; /* Ustawienie marginesów wewnętrznych */
    text-align: center;
    display: inline-block;
    font-size: 1rem; /* Wielkość tekstu */
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Łagodna zmiana koloru i cienia */
    border-radius: 0.25rem; /* Zaokrąglenie rogów */
}

/* Hover dla nieaktywnych */
.btn-primary:hover {
    background-color: #666666 !important; /* Jaśniejszy szary na hover */
    box-shadow: 0 0 0 0.2rem rgba(102, 102, 102, 0.25); /* Delikatny szary cień */
}

/* Focus (po kliknięciu lub tabulatorze) */
.btn-primary:focus {
    background-color: #444444 !important; /* Zachowanie koloru tła */
    outline: none; /* Usunięcie domyślnego outline */
    box-shadow: 0 0 0 0.25rem rgba(186, 20, 26, 0.5); /* Czerwony cień focus */
}

/* Aktywny przycisk (zaznaczony) */
.btn-primary.active,
.btn-primary:active {
    background-color: #ba141a !important; /* Czerwony dla aktywnych */
    color: #ffffff; /* Biały tekst */
    outline: none; /* Usunięcie domyślnego outline */
    box-shadow: 0 0 0 0.25rem rgba(186, 20, 26, 0.5); /* Czerwony cień aktywny */
}

/* Styl dla input checkbox (ukryty) */
.btn-check {
    display: none; /* Ukrycie elementu */
}

/* Połączenie checkboxa z przyciskiem */
.btn-check:checked + .btn-primary {
    background-color: #ba141a !important; /* Czerwony, gdy checkbox jest zaznaczony */
    color: #ffffff; /* Biały tekst */
    box-shadow: 0 0 0 0.25rem rgba(186, 20, 26, 0.5); /* Czerwony cień dla zaznaczenia */
}



svg {
    max-width: 40%; /* Logo dopasowuje się do kontenera */
    width: auto; /* Proporcjonalna szerokość */
    height: auto; /* Proporcjonalna wysokość */
}

.brand-logo {
    margin: 0 auto;
}

.logo-container > img {
    padding: 15px; /* Ustawienie ogólnego paddingu */
    padding-left: 0; /* Nadpisanie paddingu z lewej strony */
}

/* Pasek nawigacyjny */
.navbar {
    background-color: #121212 !important;
    color: #ffffff;
    padding: 10px 0; /* Zmniejszenie wysokości */
    border-bottom: 2px solid #ba141a; /* Czerwony akcent */
}

/* Menu rozwijane */
#navbar-menu .dropdown-menu {
    background-color: #2e2b2c !important; /* Lekko jaśniejsze tło niż główne */
    border: 1px solid #ba141a; /* Czerwony akcent */
    border-radius: 5px; /* Zaokrąglenie krawędzi */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5); /* Lekki cień dla kontrastu */
}

/* Nagłówki w menu rozwijanym */
#navbar-menu .dropdown-header {
    color: #d3d3d3; /* Jasno szary */
    font-size: 0.875rem; /* Mniejszy rozmiar */
    text-transform: uppercase;
    padding: 8px 15px; /* Wyrównanie odstępów */
}

/* Elementy w menu rozwijanym */
#navbar-menu .dropdown-item {
    color: #ffffff; /* Biały tekst */
    padding: 10px 15px; /* Lepsze odstępy */
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

#navbar-menu .dropdown-item:hover {
    background-color: #ba141a; /* Czerwony kolor po najechaniu */
    color: #ffffff; /* Biały tekst */
}

/* Wyłączone linki */
#navbar-menu .dropdown-item.disabled {
    color: #5a5a5a; /* Przygaszony szary */
    background-color: transparent; /* Bez tła */
    cursor: not-allowed; /* Zablokowany wskaźnik */
}

.nav-link {
    color: #ffffff !important;
}

/* Styl dla menu rozwijanego */
#main-dropdown {
    background-color: #2e2b2c !important; /* Subtelny kontrast z tłem */
    border: 1px solid #ba141a; /* Czerwony akcent */
    border-radius: 5px; /* Zaokrąglenie krawędzi */
    padding: 5px 0; /* Mniejsze odstępy wewnętrzne */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7); /* Wyraźniejszy cień */
    font-size: 1rem; /* Standardowy rozmiar czcionki */
}

/* Nagłówek w menu rozwijanym */
#main-dropdown .dropdown-header {
    color: #ffffff; /* Biały tekst */
    font-weight: bold; /* Pogrubienie */
    padding: 10px 15px; /* Wyrównanie odstępów */
    text-transform: uppercase; /* Wielkie litery */
    border-bottom: 1px solid #ba141a; /* Czerwony pasek oddzielający */
    background-color: #3a3a3a; /* Dodatkowe tło dla nagłówka */
}

/* Elementy menu rozwijanego */
#main-dropdown .dropdown-item {
    color: #ffffff; /* Biały tekst */
    padding: 10px 15px; /* Odstępy */
    transition: background-color 0.3s ease, color 0.3s ease; /* Płynne przejścia */
    background-color: #2e2b2c; /* Tło dla elementów */
}

/* Elementy po najechaniu */
#main-dropdown .dropdown-item:hover {
    background-color: #ba141a; /* Czerwony */
    color: #ffffff; /* Biały tekst */
}

/* Wyłączone linki */
#main-dropdown .dropdown-item.disabled {
    color: #7a7a7a; /* Jasno szary */
    background-color: transparent; /* Bez tła */
    cursor: not-allowed; /* Brak interakcji */
}

/* Dopasowanie szerokości menu */
#main-dropdown {
    min-width: 250px; /* Minimalna szerokość */
    max-width: 300px; /* Maksymalna szerokość */
    text-align: left; /* Tekst wyrównany do lewej */
}

/* Aktywne i zaznaczone linki */
#main-dropdown .dropdown-item.active,
#main-dropdown .dropdown-item:focus {
    background-color: #8e1014; /* Ciemny czerwony */
    color: #ffffff; /* Biały tekst */
    font-weight: bold; /* Pogrubienie */
}

/* Stylowanie czcionki */
#main-dropdown .dropdown-item {
    font-size: 1rem; /* Wyraźny rozmiar tekstu */
    font-family: 'Arial', sans-serif; /* Prosta i czytelna czcionka */
}


/* Linki */
a {
    color: #ba141a; /* Czerwony wyróżniający */
    text-decoration: none; /* Bez podkreślenia */
}

a:hover {
    color: #8e1014; /* Ciemniejszy odcień czerwonego */
    text-decoration: underline; /* Dodanie podkreślenia */
}

/* Pasek postępu */
.progress-bar {
    background-color: #ba141a; /* Czerwony akcent */
}

/* Ukrycie stopki */
/*#surveyListFooter {*/
/*    display: none;*/
/*}*/

/* Formularze */
input, select, textarea {
    background-color: #ffffff; /* Białe pole */
    color: #231f20;            /* Ciemny szary tekst */
    border: 1px solid #ba141a; /* Czerwony obrys */
    padding: 10px;
    border-radius: 5px;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #8e1014; /* Ciemniejszy czerwony */
    box-shadow: none; /* Usunięcie efektu podświetlenia */
}

/* Tło kontenerów */
.container-md, .row, .col-12 {
    background-color: #231f20; /* Dopasowanie tła */
}

/* Nagłówki w ankietach */
h1, h2, h3, h4, h5, h6 {
    color: #ffffff; /* Biały tekst */
    margin-bottom: 15px;
}

/* Akcenty w tabelach */
table th {
    background-color: #ba141a;
    color: #ffffff;
    text-align: center; /* Wyśrodkowanie tekstu w nagłówkach */
}

table td {
    background-color: #231f20;
    color: #ffffff;
    border: 1px solid #ba141a; /* Dodanie obramowania */
    text-align: left; /* Wyrównanie tekstu w komórkach */
}

/* Styl tekstu "BRILL" */
.text-center.h3 {
    color: #d3d3d3; /* Jasno szary */
    font-weight: bold; /* Pogrubienie */
    text-transform: uppercase; /* Wielkie litery */
    margin-bottom: 20px; /* Dodanie odstępu poniżej */
}

/* Ostrzeżenia */
.alert-warning {
    background-color: #ba141a; /* Czerwony */
    color: #ffffff;
    border: none;
    border-radius: 5px;
}

/* Checkboxy i przyciski wielokrotnego wyboru */
.btn-check + .btn-primary {
    background-color: #ba141a;
    border-color: #ba141a;
    color: #ffffff;
}

.btn-check + .btn-primary:hover {
    background-color: #8e1014;
    border-color: #8e1014;
}

/* Dostosowanie szerokości i odstępów między polami */
textarea, input {
    width: 100%;
    margin-bottom: 15px;
}

/* Dodanie odstępów do sekcji ankiety */
.survey-name, .survey-description, .survey-welcome {
    margin-bottom: 20px;
}

/* Odstępy między pytaniami */
.question-container {
    margin-bottom: 30px;
}

/* Tytuł ankiety */
.survey-name {
    color: #ffffff; /* Biały */
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Opis ankiety */
.survey-description {
    color: #d3d3d3; /* Jasno szary */
    font-size: 1.5rem;
    font-weight: normal;
    margin-bottom: 10px;
}

/* Wiadomość powitalna */
.survey-welcome {
    color: #ffffff; /* Biały */
    font-size: 1.25rem;
    margin-bottom: 10px;
}

/* Licznik pytań */
.number-of-questions {
    color: #d3d3d3; /* Jasno szary */
    font-size: 1rem;
    font-style: italic;
    margin-top: 10px;
}

.modal-dialog {
    max-width: 500px; /* Dopasowanie szerokości modala */
    margin: 1.75rem auto;
}

.modal-content {
    background-color: #fff; /* Ustawienie białego tła */
    border: 1px solid #dee2e6; /* Delikatna ramka */
    border-radius: 0.5rem; /* Zaokrąglenie rogów */
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); /* Cień dla lepszego wyglądu */
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1rem;
    border-bottom: 1px solid #dee2e6;
    background-color: #f8f9fa; /* Kolor tła nagłówka */
    color: #000; /* Kolor tekstu */
}

.modal-header .modal-title {
    font-size: 1.25rem;
    font-weight: 500;
    margin: 0;
}

.modal-header .btn-close {
    background-color: transparent;
    border: none;
}

.modal-body {
    padding: 1.5rem; /* Większe odstępy wewnętrzne */
    font-size: 1rem; /* Dopasowanie wielkości tekstu */
    line-height: 1.5; /* Lepsza czytelność tekstu */
    text-align: justify; /* Opcjonalne wyrównanie tekstu */
    color: #231f20;
}


.modal-footer {
    display: flex;
    justify-content: flex-end;
    padding: 0.75rem;
    border-top: 1px solid #dee2e6;
    background-color: #f8f9fa; /* Kolor tła stopki */
}

.modal-footer .btn {
    margin-left: 0.5rem;
}


.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
    border-color: #ba141a !important; /* Czerwony kolor obwódki */
    outline: none; /* Usunięcie fioletowego obramowania focus */
    box-shadow: 0 0 0 0.2rem rgba(186, 20, 26, 0.25); /* Delikatny czerwony cień */
}

body.error-page {
    background: #231f20 !important;
}

body.error-page .error-title p {
    color: #ffffff !important;
}

body.error-page .error-content {
    color: #dddddd !important;
}

label.control-label {
    color: #ffffff; /* Biały tekst */
}

button.input-group-text {
    height: 100%; /* Dopasowanie wysokości do pola tekstowego */
    margin: 0;
    margin-bottom:-2px;
    display: flex; /* Ustawienie wewnętrznego wyrównania */
    align-items: center; /* Wyrównanie treści w pionie */
    justify-content: center; /* Wyrównanie treści w poziomie */
    border: 2px solid #6f748d; /* Dopasowanie obramowania do pola */
    border-left: none; /* Usuń obramowanie z lewej strony, aby wyglądało jak część pola tekstowego */
    background-color: #b8131a; /* Opcjonalny kolor tła */
    color: #fff; /* Kolor ikon */
}

.input-group {
    flex-wrap: nowrap; /* Zapobiega łamaniu wierszy */
}

.input-group-text {
    padding: 8.9px 10px;
    border-width: 2px;
    line-height: 16px;
}

button.ls-move-btn {
    padding: 10px 20px; /* Ustawienie jednolitych marginesów wewnętrznych */
    font-size: 1rem; /* Dopasowanie rozmiaru tekstu */
    line-height: 1.5; /* Poprawa wyrównania tekstu */
    border-radius: 0.25rem; /* Zaokrąglenie rogów */
    border: none;
}

button.ls-move-btn.btn-outline-secondary {
    border-color: #ba141a; /* Dopasowanie obramowania */
    color: #ba141a; /* Dopasowanie koloru tekstu */
}

button.ls-move-btn.btn-outline-secondary:hover {
    background-color: #ba141a; /* Kolor tła na hover */
    color: #ffffff; /* Biały tekst */
}

button.ls-move-btn.btn-primary {
    background-color: #ba141a; /* Kolor tła dla "Dalej" */
    color: #ffffff; /* Biały tekst */
    border: none; /* Brak obramowania */
}

button.ls-move-btn.btn-primary:hover {
    background-color: #8e1014; /* Ciemniejszy czerwony na hover */
}

/* Domyślny styl dla logo */
.navbar-brand.logo-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
}

.logo {
    width: auto;
    transition: max-height 0.3s ease;
}

/* Styl dla menu */
#navbar-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Na mniejszych ekranach (tablet i poniżej) */
@media (max-width: 768px) {
    .navbar-brand.logo-container,
    #navbar-menu {
        justify-content: center;
    }

    .logo {
        max-height: 40px; /* Zmniejszenie logo */
    }

    #navbar-menu {
        margin-top: 10px; /* Dodanie odstępu między logo a menu */
    }
}

/* Dla bardzo małych ekranów (telefony) */
@media (max-width: 576px) {
    .navbar-brand.logo-container,
    #navbar-menu {
        flex: 1 1 100%;
        justify-content: center; /* Wyśrodkowanie logo i menu */
        text-align: center;
    }

    .logo {
        max-height: 30px; /* Jeszcze mniejsze logo */
    }

    #navbar-menu {
        margin-top: 10px;
    }
}






/* Kontener pytań */
.question-container {
    margin-bottom: 1.5rem; /* Odstęp między pytaniami */
}


/* Tytuł pytania */
.question-title-container {
    font-family: "Aptos", sans-serif;
    font-size: 24px; /* Rozmiar tekstu pytania */
    line-height: 1.5;
    color: #ffffff;
}

/* Numer pytania */
.question-number {
    font-size: 24px !important;
    color: #999999 !important; /* Szary kolor */
    margin-right: 0.5rem;
    font-weight: bold;
}

/* Kod pytania */
.question-code {
    color: #cccccc; /* Jasny szary kolor */
    margin-right: 0.5rem;
}

/* Tekst pytania */
.question-text {
    font-size: 24px; /* Rozmiar tekstu */
    color: #ffffff;
}

/* Gwiazdka dla pytań obowiązkowych */
.asterisk {
    color: #ba141a; /* Czerwony kolor */
    font-size: 16px; /* Rozmiar mniejszy niż tekst */
    vertical-align: super; /* Indeks górny */
}

.ri-more-fill {
    color: #ba141a !important;
}

/* ===== BRILL: nowoczesna skala 1–10 (flat, fancy, strong) ===== */
.scale10{
    --brand-red:#BA141A;
    --fg:#ffffff;
    --seg:#383637;
    --sep:rgba(255,255,255,.08);
}

.scale10 label.btn {
    background: var(--seg) !important;
    color: var(--fg) !important;
    box-shadow: none !important;  /* usuń wszelkie cienie */
    transition: background .15s ease; /* tylko łagodne tło */
}
.scale10 label.btn.filled {
    background: var(--brand-red) !important;
    color: #fff !important;
}

/* Hover na niepodświetlonych */
.scale10 label.btn:not(.filled):hover {
    background-color: #505050 !important;
    color: #fff !important;
    cursor: pointer;
    transform: none !important;
}

/* Hover na podświetlonych */
.scale10 label.btn.filled:hover {
    background-color: #930f12 !important;
    cursor: pointer;
    transform: none !important;
}

.scale10 .answer-container{ padding:0 !important; }
.scale10 .container-fluid{ padding-left:0 !important; padding-right:0 !important; }
.scale10 .ls-answers.answers-list{ margin:0 !important; }

.scale10 .ls-answers > .row{
    display:flex; flex-wrap:nowrap; gap:0;
    background:transparent !important;
    border:2px solid var(--brand-red) !important;
    border-radius:14px !important;
    overflow:hidden !important;
    box-shadow:none !important;
    margin-top:.6rem !important;
}
.scale10 .bootstrap-buttons-div{
    padding:0 !important;
    flex:1 1 10% !important;
    max-width:10% !important;
}

/* CAŁKOWICIE USUNIĘTE LINIE separatorów */
.scale10 .bootstrap-buttons-div .btn {
    box-shadow: none !important;
}

/* Usuń wszelkie linie separatorów */
.scale10 .bootstrap-buttons-div + .bootstrap-buttons-div .btn {
    box-shadow: none !important;
}

.scale10 .btn.btn-primary{
    margin:0 !important; height:52px !important; line-height:52px !important;
    border:0 !important; border-radius:0 !important;
    font-weight:600; letter-spacing:.2px;
    display:flex; align-items:center; justify-content:center;
    transition: background .15s ease; /* Tylko płynne tło, bez przesuwania */
    box-shadow:none !important;
}

/* Zaokrąglone rogi na końcach paska */
.scale10 .bootstrap-buttons-div:first-of-type .btn{
    border-top-left-radius:12px !important;
    border-bottom-left-radius:12px !important;
}
.scale10 .bootstrap-buttons-div:last-of-type .btn{
    border-top-right-radius:12px !important;
    border-bottom-right-radius:12px !important;
}

/* Podświetlony / zaznaczony segment */
.scale10 .btn.selected{
    box-shadow:none !important; /* Nie robimy cienia */
}

.scale10 .btn:focus-visible{
    outline:2px solid rgba(255,255,255,.28);
    outline-offset:-2px;
}

.scale10 .btn-check + .btn-primary{
    background:var(--seg) !important;
}

.scale10 .btn-check:checked + .btn-primary{
    background:var(--brand-red) !important;
}

@media (max-width:576px){
    .scale10 .ls-answers > .row{ flex-wrap:wrap !important; }
    .scale10 .bootstrap-buttons-div{ flex:0 0 20% !important; max-width:20% !important; }
    .scale10 .bootstrap-buttons-div:nth-child(6) .btn{ box-shadow:none !important; }

    .scale10 .bootstrap-buttons-div:nth-child(1) .btn{ border-top-left-radius:12px !important; }
    .scale10 .bootstrap-buttons-div:nth-child(5) .btn{ border-top-right-radius:12px !important; }
    .scale10 .bootstrap-buttons-div:nth-child(6) .btn{ border-bottom-left-radius:12px !important; }
    .scale10 .bootstrap-buttons-div:last-of-type .btn{ border-bottom-right-radius:12px !important; }
}