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

.fruity .navbar {
    background-color: #951b3c;
}

.navbar-default .navbar-nav>li> a {
    color: #fff;
}

.fruity .navbar-default .navbar-nav > li > a:hover {
    color: #ddd;
}

/* title in navbar */

.fruity .navbar-brand h3 {
    color: #fff;
    margin-top: 5px;
}

.fruity .navbar-brand h5 {
    color: #fff;
}

/* sticky footer */

body {
     padding-bottom: 0; /* no bottom padding, footer should be bottom aligned */
     padding-top: 60px;/* now is redefine in JS to fit any title length */
     flex-direction: column; /* article, then footer */
     display: flex; /* flex, to extend the content to full size */
     min-height: 100vh; /* full height, to bottom-align footer */
}
body > article {
    flex: 1; /* the main article should use as much space as possible */
}

#surveyListFooter {
    padding-bottom: 0;
}

/* Questions */

.h2, .h3 {
    font-weight: 700;
}

.question-title-container {
    padding-top: 0;
    border-bottom: 1px solid #ccc;
}

li.radio-item, li.checkbox-item, li.radio-text-item, li.checkbox-text-item {
    margin-bottom: 0.25em;
}


/* CKeditor missing crap, from assets/packages/textelements/build.min/css/main.css*/


.image {
    display: table;
    clear: both;
    text-align: center;
    margin: 1em auto
}

.image>img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    min-width: 50px
}

.image>figcaption {
    display: table-caption;
    caption-side: bottom;
    word-break: break-word;
    color: #333;
    background-color: #f7f7f7;
    padding: .6em;
    font-size: .75em;
    outline-offset: -1px
}

:root {
    --ck-image-style-spacing: 1.5em
}

.image-style-align-center,
.image-style-align-left,
.image-style-align-right,
.image-style-side {
    max-width: 50%
}

.image-style-side {
    float: right;
    margin-left: var(--ck-image-style-spacing)
}

.image-style-align-left {
    float: left;
    margin-right: var(--ck-image-style-spacing)
}

.image-style-align-center {
    margin-left: auto;
    margin-right: auto
}

.image-style-align-right {
    float: right;
    margin-left: var(--ck-image-style-spacing)
}

.lsImageSize--size--10 {
    max-width: 10%;
    display: inline-block
}

.lsImageSize--size--25 {
    max-width: 25%;
    display: inline-block
}

.lsImageSize--size--50 {
    max-width: 50%;
    display: inline-block
}

.lsImageSize--size--75 {
    max-width: 75%;
    display: inline-block
}

.lsImageSize--size--100 {
    max-width: 100%;
    display: block
}

@media screen and (max-width: 768px) {
  /* Stile per il contenitore della domanda array */
  .array-flexible-row.question-container {
    margin-bottom: 180px !important; /* Aumenta il margine inferiore per fare spazio alla dropdown */
    overflow: visible !important; /* Assicura che la dropdown non venga ritagliata */
    position: relative !important; /* Crea un contesto di posizionamento per gli elementi interni */
  }

  /* Stile per la tabella contenente le dropdown */
  .array-flexible-row.question-container .table-array-dropdown {
    width: 100% !important; /* Assicura che la tabella occupi tutta la larghezza */
  }

  /* Stile per le singole righe della tabella (domande secondarie) */
  .array-flexible-row.question-container .table-array-dropdown tr.question-item {
    display: flex; /* Utilizza flexbox per allineare gli elementi */
    flex-direction: column; /* Imposta la direzione degli elementi in verticale su mobile */
    margin-bottom: 1.5em; /* Aggiunge spazio tra le righe */
    border-bottom: 1px solid #eee; /* Aggiunge un separatore visivo tra le righe */
  }

  /* Stile per l'etichetta (testo della sottodomanda) */
  .array-flexible-row.question-container .table-array-dropdown th.answertext {
    display: block; /* Forza l'etichetta a occupare una riga intera */
    width: 100%;
    margin-bottom: 0.5em;
    text-align: left; /* Allinea il testo a sinistra */
    padding-right: 0 !important; /* Rimuove il padding a destra */
  }

  .array-flexible-row.question-container .table-array-dropdown th.answertext label {
    display: block; /* Assicura che la label occupi tutta la larghezza del th */
  }

  /* Stile per la cella contenente la dropdown */
  .array-flexible-row.question-container .table-array-dropdown td {
    display: block; /* Forza la cella della dropdown a occupare una riga intera */
    width: 100%;
    padding-left: 0 !important; /* Rimuove il padding a sinistra */
  }

  /* Stile per l'elemento select (la dropdown vera e propria) */
  .array-flexible-row.question-container .table-array-dropdown select.form-control {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important; /* Assicura che lo z-index funzioni */
    z-index: 10 !important; /* Assicura che sia sopra altri elementi */
    margin-top: 0.2em; /* Riduce il margine superiore */
  }
}


.ls-answers.subquestion-list.questions-list.radio-array.table.table-bordered.table-hover.table-array-radio tbody tr:nth-child(even) th.answertext.control-label {
  /* Stili per le righe dispari */
  font-weight: bold; /* Esempio: testo in grassetto */
  background-color: #FFFACD; /* Giallo limone (una tonalità chiara) */
}

.ls-answers.subquestion-list.questions-list.radio-array.table.table-bordered.table-hover.table-array-radio tbody tr:nth-child(odd) th.answertext.control-label {
  /* Stili per le righe pari */
  font-weight: bold; /* Esempio: testo in grassetto */
  background-color: #FFFFE0; /* Giallo chiaro (una tonalità leggermente più scura) */
}