/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

  .table-bordered > thead > tr > th {
    border: 1px solid #dadada;
  }
  .table-bordered > thead > tr > td {
    border: 1px solid #dadada;
  }
  
/* An empty css file for global usage */

/* Zmienna dla wysokości górnej belki */
:root {
    --top-bar-height: 90px;
    --question-container-max-width: 800px;
    /* Kolory PW */
    --color-pw-sloneczny: rgb(254, 213, 66);
    --color-pw-morelowy: rgb(234, 124, 90);
    --color-pw-sliwkowy: rgb(150, 95, 119);
    --color-pw-mietowy: rgb(105, 186, 156);
    --color-pw-szafirowy: rgb(120, 150, 207);
    --color-pw-wrzosowy: rgb(180, 160, 170);
    --color-pw-grafitowy: rgb(60, 60, 76);
    --color-pw-mokka: rgb(100, 90, 90);
    /* Kolory w motywie */
    --primary: var(--color-pw-szafirowy);
    --secondary: var(--color-pw-mietowy);
    --background: var(--color-pw-grafitowy);
    --warning: var(--color-pw-morelowy);
}

/* =========================
   GLOBALNY KOLOR GRANATOWY
   ========================= */

:root {
    --color-navy: #1f2a44; /* ciemny granat */
}

/* Globalnie istotne style START */

/*
    Potrzebne, żeby elementy ::before i ::after nie  były pozycjonowane 
    jako elementy flex
*/

.navbar .container::before, .navbar .container::after,
.question-title-container::before, .question-title-container::after {
    display: none;
}

/* Ogólne ostylowanie elementów kafeterii (radio lub checkbox) po najechaniu */

.radio-item label, .checkbox-item label {
    font-weight: normal;
}

.radio-item:hover label, .checkbox-item:hover label {
	/* font-weight: bold; */
	box-shadow: 0px 2px 0px 0px #0086fa;
}

/*  Żeby tabele nie wypadały poza ramy parenta */

table {
    table-layout: fixed;
}

/* Ostylowanie górnej belki START */

.navbar {
    max-height: var(--top-bar-height);
}

.navbar .container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
}

.navbar-header:only-child {
    margin-left: auto;
    margin-right:auto;
}

/*  Wymuszamy 0 paddingu, bo logo ma już pole ochronne */

.navbar-brand {
    padding: 0;
}

/*  Maks tak wysokie logo plus proporcjonalnie szerokość */
.navbar-brand img,
.logo {
    content: url('/upload/themes/survey/DAS_vanilla_wysoki_kontrast_25_ciemny_BEST/files/LogoPWBEST.png');
    max-height: var(--top-bar-height);
    width: 100%;
}

/* Ostylowanie górnej belki KONIEC */

/*  Ostylowanie "ekranu" powitalnego START */

h1.container {
    visibility: hidden;
}

#welcome-container {
    max-width: var(--question-container-max-width);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5rem;
}

.survey-welcome p {
    margin-bottom: 0;
    margin-block: 0;
    line-height: 1.7;
    text-align: justify;
}

.survey-welcome > p + p {
	margin-top: 1em !important;
}

/*  Ostylowanie ekranu powitalnego KONIEC */

/* Ostylowanie grup pytań i pytań START */

/*  Kontener grupy */
.group-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3rem;
}

.group-title,
.group-name {
    font-size: 1.8rem;
    line-height: 1.35;
    color: var(--color-navy);
}

.group-description,
.group-description p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--color-navy);
}

/*  Kontener pytania */
.question-container {
    width: 100%;
    max-width: var(--question-container-max-width);
    border: none;
    border-radius: 8px;

    background-color: #f5f6f7;
               

    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;

    overflow: visible;
}

/*  Kontener treści pytania */
.question-title-container {
    background-color: var(--color-navy);
    padding: 1rem 1rem;
    border-radius: 6px 6px 0 0;

    margin-top: 0rem;
    margin-left: -0rem;
    margin-right: -2rem;
}


/*  Tekst treści pytania */
.ls-label-question {
    font-size: 1.65rem;
    line-height: 1.4;
    color: white;
}

.answer-container {
    background-color: transparent;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}


/*  Kontener pomocy i walidacji */
/*  Nie ustawiamy paddingu, ponieważ wtedy jest widoczny nawet, gdy to jest puste
    Dlatego ustawimy go z poziomu elelemntów

.question-valid-container {
    
}


/*  Kontener pomocnicznych tekstów */
/*  NOTE: Gdzie jest używany  .ls-questionhelp ? */
.ls-question-help {
	margin: 0rem 1rem;
	position: relative;
	display: flex;
	flex-direction: column;
}
.ls-question-help,
.ls-questionhelp {
    background-color: transparent;
    font-size: 1.2rem;
    line-height: 1.6;
    color: var(--color-navy);
    
    padding: 0rem 1rem;

    border-radius: 0 0 6px 6px;
}

.question-valid-container,
.ls-question-message {
    background-color: transparent;
    color: var(--color-navy);
    border-radius: 0 0 6px 6px;

    font-size: 1.2rem;
    line-height: 1.6;
}

.question-valid-container,
.question-valid-container p,
.question-valid-container span,
.ls-question-message {
    background-color: transparent;
    color: var(--color-navy);

    border-radius: 6px;

    font-size: 1.2rem;
    line-height: 1.6;
}


/* Ikona znaku zapytania / info */
.question-valid-container .text-info,
.question-valid-container .text-info i,
.question-valid-container .text-info span {
    color: var(--color-navy) !important;
}

/* Tekst komunikatu – bez bolda */
.question-valid-container,
.question-valid-container p,
.question-valid-container span,
.ls-question-message {
    font-weight: normal;
}

/*  Kontener odpowiedzi */

/* 
    Żeby wyrównały sie w lewo w nadrzędnym flexie
    oraz pola rozciągały maksymalnie w prawo
*/
.answer-container.container-fluid {
    margin-left: 0;
    margin-right: 0;
}


/* Ostylowanie grup pytań i pytań KONIEC */

/* Ostylowanie konkretnych typów pytań START */

/* Jednokrotnego wyboru (radio) START */

.ls-answers.answers-list.radio-list ul {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	flex-wrap: nowrap;
}

/* Wielokrotnego wyboru (checkbox) KONIEC */

/* Wielokrotnego wyboru (checkbox) START */

/* W ramach jednej odpowiedzi (checkbox + tekst): flex */
.multiple-opt li {
	display: flex;
	flex-direction: row;
	gap: 0.5em;
	align-content: start;
	align-items: start;
	flex-wrap: nowrap;
}

/* Wielokrotnego wyboru (checkbox) KONIEC */

/* Wielokrotnego wyboru (checkbox) z komentarzem START */

/* W ramach jednej odpowiedzi (checkbox + tekst): flex */

.multiple-opt-comments .checkbox-item {
    display: flex;
	flex-direction: row;
	gap: 0.5em;
	align-content: start;
	align-items: baseline;
	flex-wrap: nowrap;
}

.multiple-opt-comments .checkbox-item label {
    text-align: left;
}

.group-description {
    
    background-color: transparent;
}

.logo-container>img {
    max-height: 100px;
    max-width: 384px;
}

body .top-container {
    margin-bottom: 0px;
    margin-top: 0px;
}

.top-container {
    margin-bottom: 0px;
    margin-top: 0px;
}

/*
tbody .ls-label-xs-visibility {
    margin-left: 0px;
    overflow-x: visible;
    overflow-y: visible;
}
*/

/* Specjalna klasa dla pytania maski TEKST - granatowy tekst na białym tle */

.white-text-19 .question-valid-container {
	display: none;
}

.white-text-19 .question-text,
.white-text-19 .question-title-container,
.white-text-19 .question-title-container p {
    font-size: 19px;
    background-color: transparent; /*#ffff*/
    color: #2c3e50;
}

/* Zmiana koloru podswietlenia tekstu pomocniczego, paska */
.ls-questionhelp {
    color: var(--color-navy)
}

/*Progress bar*/
.progress-bar {
    background-color: var(--color-navy);
}

.progress {
    height: 1.6rem;
}

.progress-bar {
    font-size: 1rem;
    line-height: 1.6rem; /* wyśrodkowanie tekstu % */
}


.ls-button-submit {
    background-color: #000; /* Zmieniono kolor na czarny */
}

/* Wielokrotnego wyboru (checkbox) z komentarzem KONIEC */

/* =========================
   PRZYCISKI DALEJ / WYŚLIJ
   ========================= */

.ls-button-submit,
.ls-button,
button[type="submit"] {
    background-color: var(--color-navy);
    border-color: var(--color-navy);
}

.ls-button-submit:hover,
.ls-button:hover {
    filter: brightness(0.9);
}

/* =========================
   STRONA STARTOWA (WELCOME)
   ========================= */

.survey-welcome,
.survey-welcome p,
#welcome-container {
    color: var(--color-navy);
    font-size: 1.5rem;
    line-height: 1.7;
}

.answer-container label,
.radio-item label,
.checkbox-item label {
    font-size: 1.2rem;
    line-height: 1.5;
}

/* =========================
   LISTY ROZWIJANE – CZYTELNIEJSZE ODPOWIEDZI
   ========================= */

select,
select option {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 1.2rem;
    line-height: 1.4;
}