/******************
    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
*/

@font-face {
  font-family: TVSansScreen;
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src:
    url(https://ctfs.ceskatelevize.cz/static/assets//fonts/tv_sans_screen_regular.woff2) format('woff2'),
    url(https://ctfs.ceskatelevize.cz/static/assets//fonts/tv_sans_screen_regular.woff) format('woff'),
    url(https://ctfs.ceskatelevize.cz/static/assets//fonts/tv_sans_screen_regular.ttf) format('truetype');
}

@font-face {
  font-family: TVSansScreen;
  font-style: normal;
  font-weight: 500;
  font-display: fallback;
  src:
    url(https://ctfs.ceskatelevize.cz/static/assets//fonts/tv_sans_screen_medium.woff2) format('woff2'),
    url(https://ctfs.ceskatelevize.cz/static/assets//fonts/tv_sans_screen_medium.woff) format('woff'),
    url(https://ctfs.ceskatelevize.cz/static/assets//fonts/tv_sans_screen_medium.ttf) format('truetype');
}

@font-face {
  font-family: TVSansScreen;
  font-style: normal;
  font-weight: 700;
  font-display: fallback;
  src:
    url(https://ctfs.ceskatelevize.cz/static/assets//fonts/tv_sans_screen_bold.woff2) format('woff2'),
    url(https://ctfs.ceskatelevize.cz/static/assets//fonts/tv_sans_screen_bold.woff) format('woff'),
    url(https://ctfs.ceskatelevize.cz/static/assets//fonts/tv_sans_screen_bold.ttf) format('truetype');
}

/*

*/

* {
    font-family: SourceSansPro, sans-serif;
}

body {
    background-color: #F2F4F8;
    padding-top: 0 !important;
}

.form-layout {
    display: flex;
    flex-direction: row;
    height: 100vh;
    margin: 0;
}

.form-content {
    width: 70%;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem 2rem;
    box-sizing: border-box;
    overflow-y: scroll;
}

.form-image {
    width: 30%;
    height: 100vh;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .form-content {
        width: 100%;
    }

    .form-image {
        display: none;
    }
}

.form-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#dynamicReloadContainer {
    width: 100%;
}

h1,
.large-heading,
span.h3 {
    font-size: 2.25rem;
    font-family: TvSansScreen, sans-serif;
    font-weight: 700;
    line-height: 2.5rem;
    letter-spacing: -0.025rem;
    color: #041E42 !important;
}

span.h3 {
    font-size: 3rem;
    line-height: 3.25rem;
}

h2,
p.text-danger,
body.error-page .error-title,
p.completed-heading,
.survey-description {
    font-size: 1.8rem;
    font-family: TvSansScreen, sans-serif;
    font-weight: 700;
    line-height: 2.5rem;
    letter-spacing: -0.025rem;
    color: #041E42 !important;
}

p,
.form-heading,
.question-container .ls-question-message {
    font-size: 1.125rem;
    line-height: 1.5rem;
    letter-spacing: 0;
}

a {
    color: #041E42;
    text-decoration: underline;
    font-size: 1.125rem;
    line-height: 1.5rem;
    letter-spacing: 0;
}

a:hover {
    color: #041E42;
    text-decoration: none !important;
}

.text-info,
body.error-page .error-title p,
.text-info, body.error-page .error-title p {
    color: #043cdc !important;
}

/* Button */

.btn {
    border: none;
    font-size: 1rem;
    line-height: 1.5rem;
    width: auto;
    
    cursor: pointer;
    display: inline-flex;
    outline: none;
    position: relative;
    box-sizing: border-box;
    align-items: center;
    border-radius: 4px;
    justify-content: center;
    text-decoration: none;
    letter-spacing: 0;
}

.btn-primary {
    font-weight: 600;
    background: #ed1c24;
    box-shadow: 0 1px 2px 0 #920d1233;
    border: 1px solid transparent;
}

.btn-outline-secondary {
    background: transparent;
    border: 1px solid #DEE0E4;
    box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.30);
}

.btn-outline-secondary:hover {
    text-decoration: none !important;
    background: transparent !important;
    border: 1px solid #DEE0E4 !important;
    box-shadow: 0 12px 16px -6px rgba(0, 0, 0, 0.20) !important;
}

.btn-primary:hover {
    text-decoration: none !important;
    background: #69060A !important;
    box-shadow: 0 12px 16px -6px rgba(146, 13, 18, 0.32) !important;
    border-color: transparent !important;
}

.btn-primary:active {
    background: #69060A !important;
    box-shadow: 0 1px 2px 0px rgba(146, 13, 18, 0.30) !important;
    border-color: transparent !important;
}

.btn-lg, .btn-group-lg > .btn {
    min-height: 40px;
    padding: 8px 16px;
}

/* Checkbox */

.checkbox-item label {
    padding-left: 8px;
}

.checkbox-item label::before,
.privacy .checkbox-item label::before{
    content: "";
    background-color: #fff;
    display: block;
    left: 0;
    top: 3px;
    width: 18px;
    height: 18px;
    box-shadow: inset 0 1px 2px 0 #0000000f;
    border: 1px solid #c6c6c6;
    border-radius: 4px;
    position: absolute;
    transition: box-shadow .25s, border .25s;
}

.checkbox-item input[type=checkbox]:checked + label {
    color: #000;
}

.checkbox-item input[type=checkbox]:checked + label::before {
    border-color: #c6c6c6;
}

.checkbox-item input[type=checkbox]:hover + label::before {
    border-color: #888D94;
}

.checkbox-item input[type=checkbox]:checked + label::after {
    color: #041E42;
}

.checkbox-item input[type=checkbox]:checked + label::after, .checkbox-item input[type=radio]:checked + label::after {
    font-size: 18px;
}

.checkbox-item label::after {
    left: 0px;
    top: 2px;
}

/* Input */

.form-control,
.form-control.ls-important-field {
    color: #010614 !important;
    font-size: 16px;
    border-radius: 4px !important;
    border: 1px solid #C3C6CC !important;
    background: #FFF !important;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.25) inset !important;
}

.form-control:hover {
    border-color: #888D94 !important;   
}

.form-control::-moz-placeholder {
  color: #A5A8AE;
  opacity: 1;
}
.form-control::placeholder {
  color: #A5A8AE;
  opacity: 1;
}

.input-group-text.ls-important-field, label .input-group-text.ls-important-field,
.input-group-text, label .input-group-text{
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #010614;
}


/* Label */

.control-label, .answertextright {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #010614 !important;
    margin-bottom: 6px;
}


/* Radio */

.radio-item input[type=radio]:checked + label,
.ls-answers label, .answer-item label, .control-label{
    font-weight: 400;
    color: #010614;
}

.radio-item label::before {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    border: 1px solid #C3C6CC;
    background: #FFF;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.25) inset;
}

.radio-item input[type=radio]:checked + label::before {
    border-color: #C3C6CC;
}

.radio-item input[type=radio]:hover + label::before {
    border-color: #888D94;
}

.radio-item input[type=radio]:checked + label::after {
    width: 8px;
    height: 8px;
    left: 4px;
    top: 4px;
    background-color: #041E42;
}

.radio-item label.ls-label-xs-visibility::after {
    left: 7px !important;
    top: 7px !important;
}

/* Info Box */

.text-info,
.alert,
.alert-danger{
    border-radius: 4px;
    border: 1px solid #DEE0E4;
    font-size: 18px;
    line-height: 22px;
    color: #041E42 !important;
    background-color: #fff;
}

.text-info {
    padding: 16px;
    margin: 0 calc(var(--bs-gutter-x) * 0.5);
    width: 100%;
    max-width: calc(100% - var(--bs-gutter-x));
}

/* Uvodni stranka */

#surveys-list-container .mb-3 {
    margin-bottom: 2rem !important;
}

#surveys-list-jumbotron {
    text-align: left;
}

#surveys-list-jumbotron img {
    width: 180px;
    margin-bottom: 24px;
}

.survey-name, .survey-description, .survey-welcome {
    margin-bottom: 24px;
}

/* Footer */

#surveyListFooter {
    background-color: transparent;
    border-top: none !important;
}

#surveyListFooter .row,
#surveyListFooter .row > * {
    margin: 0 !important;
    padding-left: 0 !important;
}

#surveyListFooter .row {
    gap: 8px;
}

#surveyListFooter,
#surveyListFooter a {
    font-size: 14px;
    color: #6B6F77;
}

#surveyListFooter img.img-fluid {
    width: 180px;
}

/* Header */

#survey-nav.navbar {
    left: initial;
    right: 16px;
    top: 16px;
    background: transparent !important;
}

#survey-nav .container-fluid {
    width: 100% !important;
    padding-left: 9px !important;
}

#survey-nav .navbar-toggler {
    padding: 0 !important;
    vertical-align: middle;
    background: #fff;
    border-radius: 4px !important;
     height: 48px;
    width: 48px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.20), 0 12px 24px -8px rgba(0, 0, 0, 0.15);
}

/* Select */

select {
    border-radius: 4px;
    border: 1px solid #C3C6CC;
    background: #FFF !important;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.25) inset;
}


.form-change-lang #language-changer-select {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding-left: 8px;
    padding-right: 8px;
}

.form-change-lang #language-changer-select:focus {
    border-color: #888D94 !important;
    padding-top: calc(0.375rem + 1px);
    padding-bottom: calc(0.375rem + 1px);
    padding-left: 8px;
    padding-right: 8px;
}

.form-change-lang #lang-select {
    background-color: transparent !important;
    border: 1px solid #C3C6CC !important;
    border-radius: 4px;
}

.form-change-lang #language-changer-select {
    color: #010614;
    font-weight: 400;
}

.form-change-lang #lang-select::after {
    color: #000000;
}

/* Progress Bar */

.progress {
    background-color: #FFF;
}

.progress-bar {
    background-color: #6DD400;
}

/* Modal */

.modal-content {
    border-radius: 8px;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.20), 0 12px 24px -8px rgba(0, 0, 0, 0.15);
}

/* Check Button */

.btn-check + .btn {
    border: 1px solid #DEE0E4;
    gap: 8px;
    color: #010614;
}

.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.btn-primary:active, .btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    color: #FFFFFF !important;
    background-color: #ED1C24 !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Captcha */

.reloadCaptcha {
    max-height: auto;
}

.captcha-container {
    width: 100%;
}

.captcha-item .row {
    gap: 8px;
}

/* --- Kód pro vaše úpravy --- */

/* 1) Snížení horní mezery u nápovědy k otázce */
.question-help-container {
    margin-top: -1rem; /* Můžete upravit hodnotu, např. -15px nebo 0, podle potřeby */
}

/* 2) Obarvení povinné hvězdičky na červeno */
.asterisk {
    color: #ed1c24 !important; 
}

/* 3) Zvětšení horní mezery u kontejneru s odpověďmi */
.answer-container {
    margin-top: 1.5rem; /* Můžete upravit hodnotu, např. 20px, pro větší či menší mezeru */
}

/*------------------------------------------------
/* ======================================================================= */
/* === Styly pro DESKTOP a TABLET (POUZE pro otázky s .NPS) === */
/* ======================================================================= */
@media (min-width: 768px) {

  /* Podmínka: Cílíme pouze na prvky uvnitř elementu, 
     jehož class OBSAHUJE "NPS" */

  /* 1. Odsazení a oprava zalamování pro záhlaví s čísly */
  [class*="NPS"] .ls-answers .ls-heading th {
    padding-bottom: 1em;
    white-space: nowrap;
  }

  /* 2. Zarovnání levého popisku doprava */
  [class*="NPS"] .ls-answers tr.answers-list th.answertext {
    text-align: right;
    padding-right: 15px;
    vertical-align: middle;
  }

  /* 3. Zarovnání pravého popisku doleva */
  [class*="NPS"] .ls-answers tr.answers-list th.answertextright {
    text-align: left;
    padding-left: 15px;
    vertical-align: middle;
  }
}

/* ======================================================================= */
/* === Styly pro MOBIL (POUZE pro otázky s .NPS)              === */
/* ======================================================================= */
@media (max-width: 767px) {

  /* Podmínka: Cílíme pouze na prvky uvnitř elementu, 
     jehož class OBSAHUJE "NPS" */

  [class*="NPS"] .ls-answers tr.answers-list th.answertext,
  [class*="NPS"] .ls-answers tr.answers-list th.answertextright {
    text-align: left; /* Zarovná oba popisky doleva */
  }
}

/* Zmenšení písma u textu otázky */
.question-container .ls-label-question {
    font-size: 22px; /* Zde si nastavte libovolnou menší velikost, např. 18px */
}

/* --- Úprava šířky posuvníku u otázky #question595 --- */

/* --- Úprava šířky posuvníku POUZE pro typ .one-label-slider --- */

/* 1. Skryjeme prázdný levý sloupec */
#question595.one-label-slider .col-md-4 {
    display: none;
}

/* 2. Sloupci s posuvníkem nastavíme plnou šířku */
#question595.one-label-slider .col-md-8 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

/* 3. Volitelné: Odstranění vnitřních okrajů */
#question595.one-label-slider .col-md-8.px-md-5 {
    padding-left: 0;
    padding-right: 0;
}