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

.question-container, .panel-body, .content, .outerframe {
  overflow: visible !important;
}

.fa-question-circle {
  margin-left: 4px;
  color: #0b6b5f;
  cursor: help;
}
.fa-question-circle:hover {
  color: #09584e;
}
.ls-question,.question-container{
  background:#fff; border:1px solid #e6eaee; border-radius:.75rem;
  padding:1rem 1rem .5rem; margin-bottom:1rem; box-shadow:0 2px 6px rgba(5,30,20,.05);
}
input[type=text],select,textarea,.form-control{
  border-radius:.55rem; border-color:#ced4da; box-shadow:none;
}
input:focus,select:focus,textarea:focus,.form-control:focus{
  border-color:#0b6b5f; box-shadow:0 0 0 .2rem rgba(11,107,95,.15);
}

.table th,.ls-answers table th{
  position:sticky; top:0; z-index:2; background:#f9fbfc; border-bottom:2px solid #e6eaee;
}
.table-striped>tbody>tr:nth-of-type(odd){ background-color:#fcfdff; }
.table-hover>tbody>tr:hover{ background:#f2f6f9; }

body.survey-page .top-container{
  background:#0c4039 url("../files/BannerQuestionarioLoghi.png") center/cover no-repeat; color:#fff;
}
.top-container .navbar a,.top-container .breadcrumb a{ color:#fff; }
.top-container .navbar a:hover,.top-container .breadcrumb a:hover{ color:#e7f7f4; }

:root{
  --coeso-primary: #0b6b5f;        /* sea green */
  --coeso-primary-700: #09584e;
  --coeso-accent:  #f3a712;        /* ambra per focus/hover */
  --coeso-muted:   #5f6b6b;
}

/* Bottoni primari coerenti con sea_green */
body.ls-bootstrap.sea_green .btn-primary,
body.ls-bootstrap.sea_green .ls-move-btn,
body.ls-bootstrap.sea_green .action__submit {
  background-color: var(--coeso-primary);
  border-color: var(--coeso-primary-700);
}
body.ls-bootstrap.sea_green .btn-primary:hover,
body.ls-bootstrap.sea_green .ls-move-btn:hover,
body.ls-bootstrap.sea_green .action__submit:hover {
  background-color: var(--coeso-primary-700);
  border-color: var(--coeso-primary);
}

/* Focus input ben visibile su verde */
body.ls-bootstrap.sea_green input:focus,
body.ls-bootstrap.sea_green select:focus,
body.ls-bootstrap.sea_green textarea:focus,
body.ls-bootstrap.sea_green .form-control:focus{
  border-color: var(--coeso-primary);
  box-shadow: 0 0 0 .2rem rgba(11,107,95,.15);
}

/* Barra avanzamento “pill” */
body.ls-bootstrap.sea_green .progress{
  height:14px; border-radius:999px; background:#e9f1ef;
}
body.ls-bootstrap.sea_green .progress .progress-bar{
  background: linear-gradient(90deg, var(--coeso-primary), var(--coeso-primary-700));
  border-radius:999px; position:relative;
}
body.ls-bootstrap.sea_green .progress .progress-bar::after{
  content: attr(aria-valuenow) "%";
  position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  font-size:12px; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.25);
}

/* Card domanda leggere */
body.ls-bootstrap.sea_green .ls-question, 
body.ls-bootstrap.sea_green .question-container{
  background:#fff; border:1px solid #e4eeec; border-radius:.75rem;
  box-shadow:0 2px 6px rgba(5,30,20,.05);
}

/* Tabelle/array più leggibili */
body.ls-bootstrap.sea_green .table th,
body.ls-bootstrap.sea_green .ls-answers table th {
  position: sticky; top: 0; z-index: 2;
  background: #f2f8f7; border-bottom: 2px solid #dbe8e5;
}
body.ls-bootstrap.sea_green .table-hover > tbody > tr:hover { background:#eef6f4; }

/* Tooltip scuro, coerente con tema */
body.ls-bootstrap.sea_green .tooltip{ z-index:1065; }
body.ls-bootstrap.sea_green .tooltip .tooltip-inner{
  max-width:320px; padding:.5rem .75rem; background:#102a27; color:#f7fffd;
}
body.ls-bootstrap.sea_green .tooltip.top .tooltip-arrow{ border-top-color:#102a27; }
body.ls-bootstrap.sea_green .tooltip.bottom .tooltip-arrow{ border-bottom-color:#102a27; }

/* Icona di aiuto: spacing, hover, focus accessibile */
body.ls-bootstrap.sea_green .help-icon,
body.ls-bootstrap.sea_green .ls-answers i.fa-question-circle,
body.ls-bootstrap.sea_green .ls-answers i.fa-info-circle{
  margin-left:.4rem; vertical-align:-2px; cursor:help; opacity:.9;
  transition:transform .15s ease, opacity .15s ease;
}
body.ls-bootstrap.sea_green .help-icon:hover{ transform: translateY(-1px); opacity:1; }
body.ls-bootstrap.sea_green .help-icon:focus{ outline:2px solid var(--coeso-accent); outline-offset:2px; border-radius:50%; }

/* --- Palette coerente con lo sfondo --- */
:root{
  --pis-primary: #0B5C63;   /* teal scuro (icone sanitarie) */
  --pis-accent:  #2C7C7E;   /* teal medio */
  --pis-sand:    #E8C27A;   /* giallo Maremma */
  --pis-dark:    #142329;   /* testo scuro */
  --pis-light:   #F7F5ED;   /* sabbia chiarissima */
}

/* Banner/header */
.navbar, .navbar.navbar-default {
  background-color: var(--pis-primary) !important;
  border: none !important;
}
.navbar-default .navbar-brand,
.navbar-default .navbar-nav>li>a { color: #fff !important; }

/* Progress bar coerente */
.progress { background: rgba(255,255,255,0.35); height: .7rem; border-radius: 999px; }
.progress-bar { background: var(--pis-accent); }

/* Card di benvenuto con overlay leggibile */
.welcome-hero{
  position: relative;
  max-width: 980px;
  margin: 1rem auto 1.5rem;
  padding: 1.25rem 1.25rem 1rem;
  border-radius: 14px;
  color: var(--pis-dark);
  background: rgba(255,255,255,0.88); /* pannello chiaro sopra immagine */
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  backdrop-filter: blur(2px);
}

/* Titoli e testo */
.welcome-hero h1{ margin:0 0 .25rem; font-size: 1.9rem; font-weight: 800; color: var(--pis-primary); }
.welcome-hero h2{ margin:0 0 .6rem; font-size: 1.15rem; font-weight: 600; color: #2b4349; }
.welcome-hero p{ margin: .35rem 0; line-height: 1.55; }
.welcome-hero ul{ margin: .35rem 0 .6rem 1.1rem; }
.welcome-hero li{ margin: .2rem 0; }

/* Bottone avanti più visibile */
.btn-primary, .ls-move-btn, .ls-move-btn .btn-primary {
  background: var(--pis-primary) !important;
  border-color: var(--pis-primary) !important;
  font-weight: 700;
  border-radius: 10px;
}
.btn-primary:hover{ filter: brightness(.95); }

/* Micro-vignettatura per staccare il testo dall'immagine su schermi larghi */
body:after{
  content:"";
  position: fixed; inset: 0;
  pointer-events:none;
  background: radial-gradient(1200px 500px at 25% 35%, rgba(0,0,0,.10), transparent 60%);
}

/* Mobile: stringi padding e grandezza testo */
@media (max-width: 640px){
  .welcome-hero{ padding: .9rem; }
  .welcome-hero h1{ font-size: 1.5rem; }
}

/* Evidenziazione più chiara per i pulsanti selezionati */
.btn-primary.active,
.btn-primary:active,
.btn-primary:focus {
  background-color: #1b8066 !important; /* verde profondo */
  border-color: #15614f !important;
  color: #ffffff !important;
  box-shadow: 0 0 6px rgba(27, 128, 102, 0.6);
  font-weight: 600;
}

/* Contrasto maggiore per le opzioni non selezionate */
.btn-primary {
  background-color: #e2ecea !important;
  color: #0c3c2d !important;
  border-color: #a6bcb5 !important;
}

/* Aggiunge un effetto hover per rendere più evidente il click */
.btn-primary:hover {
  background-color: #2a9b7b !important;
  color: #fff !important;
}
/* Etichette più visibili */
.register-form .form-group label.control-label{
  color:#0b2e4f;              /* blu scuro leggibile */
  font-weight:700;
  font-size:1.5rem;          /* leggermente più grande */
  text-shadow:0 1px 2px rgba(0,0,0,.25);  /* contorno morbido su sfondo chiaro/scuro */
  background:rgba(255,255,255,.85);       /* cartellino chiaro dietro al testo */
  padding:4px 8px;
  border-radius:6px;
  display:inline-block;
}

/* Asterisco obbligatorio ben visibile */
.register-form .form-group label.control-label .asterisk{
  color:#c0392b !important;
  text-shadow:0 1px 1px rgba(255,255,255,.7);
}

/* Campi più “puliti” sullo sfondo illustrato */
.register-form .form-control{
  background:rgba(255,255,255,.95);
  border:1px solid #2d6b8f;
}
.register-form .form-control:focus{
  border-color:#0b7bb5;
  box-shadow:0 0 0 3px rgba(11,123,181,.15);
}
/* BOX EVIDENZIATO per il testo introduttivo sopra il form */
.jumbotron{
  background: rgba(255,255,255,.85);   /* pannello chiaro sopra lo sfondo */
  border-left: 6px solid #0b7bb5;      /* accento colore */
  border-radius: 12px;
  padding: 18px 24px;
  box-shadow: 0 8px 20px rgba(0,0,0,.10);
  max-width: 980px;                    /* più leggibile su schermi larghi */
  margin: 0 auto 18px;                 /* centratura e spazio dal form */
}

/* Testo dentro il box: più contrasto e peso */
.jumbotron p{
  color: #0b2e4f;          /* blu scuro ad alto contrasto */
  font-weight: 600;
  font-size: 2.3rem;
  line-height: 1.45;
  margin-bottom: 8px;
  text-shadow: 0 1px 0 rgba(255,255,255,.6); /* leggero contorno sullo sfondo */
}

/* Variante compatta su mobile */
@media (max-width: 768px){
  .jumbotron{ padding:14px 16px; border-left-width:5px; }
  .jumbotron p{ font-size:1rem; }
}

.jumbotron{
  backdrop-filter: blur(2px);          /* Safari/Chromium */
  -webkit-backdrop-filter: blur(2px);  /* Safari */
}