/*Custom CSS*/
:root{
    --primary-color:#17324d;
    --light-blu:#c7e3ff;
}
body{ color: var(--primary-color); font-weight: 400}
.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {    max-width: 2000px;}
.circle {display: inline-block; height: 20px;    width: 20px;    border-radius: 50%; margin-right: 5px}
.it-hero-wrapper{ background-color: var(--light-blu) ; padding-left: 18px;
        padding-right: 18px;  }
.it-hero-wrapper.bg-dark{ min-height: 0 !important}
.it-hero-wrapper .it-hero-text-wrapper{ padding-top: 140px !important;}
.it-brand-tagline{ line-height: 1.1em; margin-bottom: 10px !important; margin-top: 5px !important}
.it-brand-wrapper img{ height: 60px; margin-right: 20px}
.it-header-slim-wrapper, .it-header-center-wrapper{ background-color: var(--primary-color); }
.it-header-center-wrapper{height: auto; min-height: 80px}
.it-header-slim-wrapper .it-header-slim-wrapper-content{ background-color: #0166cc; height: auto}
.it-header-center-wrapper .it-header-center-content-wrapper .it-brand-wrapper .it-brand-text{ margin-top: 10px}
/*navigation*/
.is-sticky .it-brand-wrapper img{ height: 50px; display: none}
.is-sticky .navbar .navbar-collapsable .navbar-nav li a.nav-link.active{ border-color: #17324d}
.second-nav.sticky-top{ top: 55px;}
small{ font-size: 0.8rem}

.two-col-text{ column-count: 2;}
.contenitore{ padding: 40px 20px}
.contenitore p{ font-family: var(--bs-body-font-family)!important; margin-bottom: 1em !important}
.it-hero-wrapper hr{ background-color: #fff !important; }
.search form{ background: transparent; padding-top: 10px}

.bg-grey{ background-color: #f1f1f1}
.bg-login{  background-image: url('../images/sfondo-1.png');
      background-size: cover;
      background-position: center;      max-height: 100%;
    min-height: 100vh;
     }

.main-search{ background-color:var(--primary-color); padding: 1px 0 20px 0;  width: 100% }
.main-search .container{ background-color:var(--light-blu); box-shadow: 0 0 20px rgba(0,0,0,0.1); border-radius: 10px}
/*Tabelle*/
.table_container tbody, .table_container thead{ background: #fff}
.table_container table th{ line-height: 1.1em; padding: 8px}
.table_container table td{ font-size: 16px !important}
.table_container caption{ color: #fff; background-color: #17324d; font-weight: 800; font-size: 1.5em; text-align: center; border-top: 0px solid #000; padding: 10px 10px}
ul.legend li span{ font-size: 16px}

/*Hero*/
.it-hero-wrapper{ min-height: 0px !important;  flex-wrap: wrap}
.it-hero-wrapper.sticky{ position: sticky; top: 0; z-index: 2}
.it-hero-wrapper .it-hero-text-wrapper .hero-text p{ color: #000}
.it-hero-wrapper ul{ list-style: none; padding: 0}
/*.it-hero-wrapper li{}*/
.it-hero-wrapper .it-hero-text-wrapper h1, .it-hero-wrapper .it-hero-text-wrapper .h1{ font-size: 2em; line-height: 1.1em;}
.it-hero-wrapper.it-dark .it-hero-text-wrapper h1{ text-shadow: 5px 5px 10px rgba(23 50 76 / 90%)}
.it-hero-wrapper .it-hero-text-wrapper{ padding-right:26px}
.it-hero-wrapper.it-overlay.it-dark .img-responsive-wrapper:after{ background: rgba(23,50,77,.74)}
.cmp-hero .it-hero-wrapper .it-hero-text-wrapper{ padding-top: 40px !important; word-wrap: break-word}
.hero-text-paragraph{ max-width: 100%; position: relative; }
.hero-text-paragraph.text-truncate{ white-space: normal; max-height: calc(1em * 3); overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 5; text-overflow: ellipsis; display: block}
.hero-text{ width: 100%; overflow: hidden; max-width: 1000px; display: inline-block}

/*Grafici*/
.box-stat{ padding-top: 20px; border: 1px solid var(--bs-dark); margin-top: 1.2em; margin-bottom: 1.2em; background-color: #fff}
.box-stat h2 span{ display: inline-block; background: #fff; background-color: var(--bs-dark); color: #fff; border: 1px solid var(--bs-dark); padding: 0.2em 20px}
.box-stat h2{ margin-top: -1.6em; margin-bottom: 1.2em; line-height: 1.1em}
.highcharts-data-label, .highcharts-data-label-connector{ display: none}
.show-label .highcharts-data-label, .show-label .highcharts-data-label-connector{ display: block}
#mapcontainer .highcharts-credits{ display: none}

/*Tables*/
.table{ color: var(--primary-color); font-size: 16px}
.fa-solid.male{ color:dodgerblue}
.fa-solid.female{ color:hotpink}
.btn-light{ background-color: transparent; border-color: transparent; box-shadow: unset}
.btn-light:hover{ background: transparent; color: #0166cc }

/*Tabs NAV*/
.tab-nav{ font-size: 16px; width: 100%}
.tab-nav li .icona{margin-right: 2px}
.nav-tabs{ background: transparent !important}

/*FORM*/
.form-check label{ font-size: 16px !important}
.autocomplete__wrapper{ background: #fff}


/* Colonna azioni */
td.col-azioni {
    min-width: 150px;  /* link brevi */
    width: 150px;
    white-space: nowrap;
}
/* Colonna patologie: usa tutto lo spazio disponibile */
td.col-patologie {
    max-width: 800px;      /* larghezza minima decente */
    width: 800px;            /* occupa tutto lo spazio rimanente */
    word-break: break-word;
    white-space: normal;
    vertical-align: top;
}

.patologia-row {
    display: flex;
    align-items: flex-start; /* allinea la prima riga del testo con l'icona */
    gap: 0.5rem;             /* spazio tra icona, pallino e testo */
}

.patologia-row svg,
.patologia-row .circle {
    flex-shrink: 0;           /* blocca le dimensioni delle icone/pallini */
    margin-top: 2px;          /* piccolo offset per allineare con la prima riga del testo */
}

.wrap-text {
    white-space: normal;
    overflow-wrap: break-word;
    display: inline-block;    /* permette al testo di andare a capo mantenendo l’allineamento */
}




/*Stili per la stampa*/
@media print {
    h2{ text-align: center; font-family: sans-serif; color: #000}
    h2 span{ color: #000}
    .col-12{ float: left; width:50%}
    .highcharts-exporting-group{ display: none}
  @page {
    size:landscape;
    font-family: sans-serif;
    margin: 20px; 
  }
}

/*Btn collapse*/
.btn.collapsed .txt-show{ display: inline}
.btn.collapsed .txt-hide{ display: none}

.btn:not(.collapsed) .txt-hide{ display: inline}
.btn:not(.collapsed) .txt-show{ display: none}

/*Footer*/
.it-footer-main p a{ color: #fff}
@media only screen and (min-width: 1200px) {
    .it-hero-wrapper.it-dark .it-hero-text-wrapper h1{ font-size: 3em;}
}
@media only screen and (max-width: 600px) {
    .it-brand-wrapper img{ height: 50px}
    .it-header-wrapper .it-nav-wrapper .it-brand-wrapper{ padding-left: 0}
    .second-nav.sticky-top{ top: 75px}
    .nav-tabs .nav-link{ padding-top: 1em; padding-bottom: 1em}
    ul.legend li span{ font-size: 11px}
    .two-col-text{ column-count: 1;}
    
    /*Tabelle*/
    .table_container caption{ text-align: left; font-size: 1rem}
    .table_container{ font-size: 12px}
    .table_container table td{ font-size: 14px !important}
}