@charset "UTF-8";
/* CSS Document */

@import url('satoshi.css');
@import url('main_colori.css');


:root{
    --max-width: 1280px; 
    --space: 15px;
    --corner: 10px;
}


.m-0 { margin: 0px !important }
.mt-0 { margin-top: 0px !important }
.mt-5 { margin-top: 5px !important }
.mt-15 { margin-top: 15px !important }
.mt-30 { margin-top: 30px !important }
.mt-60 { margin-top: 60px !important }
.mt-80 { margin-top: 80px !important }
.mb-0 { margin-bottom: 0px !important }
.mb-15 { margin-bottom: 15px !important }
.mb-30 { margin-bottom: 30px !important }
.mb-60 { margin-bottom: 60px !important }
.ml-10 { margin-left: 10px !important }
.ml-15 { margin-left: 15px !important }
.mr-10 { margin-right: 10px !important }
.mr-15 { margin-right: 15px !important }
.p-0 { padding: 0px !important; }
.pt-0 { padding-top: 0px !important; }
.p-6 { padding: 6px !important; }
.pt-15 { padding-top: 15px !important }
.txt-center { text-align: center !important; }
.br-4 { border-radius: 4px !important;}

.si-900 { display: none; }

.w-100 { width: 100% !important; }
.txt-center { text-align: center; }

.flex { display: flex !important; }
.flex.center {
    align-items: center;
    justify-content: center;
}
.flexrow { display: flex !important; flex-direction: row !important; }
.rel { position: relative; }
.gap-16 { gap: 16px; }

.txt {
    font-size: 1em;
    color: white;
}
.center { text-align: center; }
.right { text-align: right; }
.hidden { display: none; }

html, body {
	width: 100%;
    height:100%;
	margin: 0px;
	padding: 0px;
	font-family: 'Satoshi-Variable';
	font-weight: 400;
    font-size: 100%;
    letter-spacing: 0.5px;
    /* color: var(--color_txt); */
    background-color: var(--color_bg);
}
*:focus { outline: none !important; } 
img { width: 100%; }
/* p { margin: 0px; } */
a { text-decoration: underline; color: var(--color_txta); }
a:hover { text-decoration: underline; } 

.hidden { display: none; }
.flex { display: flex; }
.block { display: block !important; }
.align-center { align-items: center; }
.link {
    color: var(--color_link);
    text-decoration: underline;
}
.no-wrap {
    white-space: nowrap;
}

#ajaxloader2 {
    position:absolute; 
	width:100%; 
	height:100%; 
	/* background-color:rgba(0,0,0,0.81);  */
	z-index:300; 
	background-image: url("../images/loader01.svg");
	background-size: 70px 70px;
	background-position: center center;
	background-repeat: no-repeat;
	display:none;
}

.btn_min {
    font-size: 1em;
    font-weight: 500;
    color: white;
    text-decoration: none;
}
.btn_min:hover {
    text-decoration: underline;
}
.btn {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 4px;
    border: none;
    font-size: 1em;
    font-weight: 700;
    margin: 15px 0;
    cursor: pointer;
    text-decoration: none;
}
.btn:hover {
    text-decoration: none;;
}
.btn.sx {
    margin: 0 20px 15px 0;
}
.btn.full {
    display: block;
    text-align: center;
}
.btn.full2 {
    display: block;
    font-size: 1em;
    text-align: center;
}
.btn.action {
    background-color: var(--color_action);
    color: var(--color_actiontxt);
}
.btn.action:hover {
    background-color: var(--color_action_hover);
}
.btn.white {
    background-color: rgba(255, 255, 255, 0.5);
    color: white;
}
.btn.white:hover {
    background-color: white;
    color: var(--color_titolo);
}
.btn.light {
    border: 1px solid var(--color_action);
    color: var(--color_action);
}
.btn.light:hover {
    background-color: var(--color_action);
    color: var(--color_blu1);
}
.btn.blu1 {
    background-color: var(--color_blu1);
    color: white;
}
.btn.blu1:hover {
    background-color: var(--color_bg);
}
.btn.red {
    background-color: var(--color_rosso);
    color: white;
}
.btn.green {
    background-color: var(--color_verdescuro);
    color: white;
}
.cat {
    color: #B6D9FB;
    /* background-image: url(../images/icon_cat.svg);
    background-repeat: no-repeat;
    background-position: left center; */
    /* padding: 0 0 0 25px; */
    text-transform: uppercase;
}
.cat.size1 {
    font-size: 0.875em;
    font-weight: 500;
}
.btn_little_container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    text-decoration: none;
}
.tag {
    display: inline-flex;
    padding: 0px 6px;
    border-radius: 2px;
    font-weight: 500;
}
.tag.rosso {
    background-color: var(--color_rossoscuro);
    color: white;
}
.tag.verde {
    background-color: var(--color_verdescuro);
    color: white;
}


#main_container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
#content_container {
    position: relative;
    flex-grow: 2;
}


/* ########################## HEADER ########################## */

#header {
    background: var(--color_header);
    border-bottom: 1px solid rgba(182, 217, 251, 0.3);
    transition: all 0.2s ease-in-out;
    z-index: 100;
}
header.fixedToTop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
header.fixedToTop + #content_container{
    margin-top: 150px;
}
#header_hamburger,
#header_hamburger_x {
    display: none;
}
#header_top {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 0 30px;
    box-sizing: border-box;
}
#header_logo {
    display: block;
    width: 372px;
    height: 96px;
    background-image: url(../images/cato2_logo_sito_04.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left top;
    margin: 10px 0 10px 0;
}
#header_top_right {
    display: flex;
    align-items: center;
}
#btn_header_cerca {
    background-color: var(--color_bg);
    width: 100%;
    max-width: 250px;
    border: none;
    border-radius: 4px;
    padding: 14px 14px 14px 35px;
    font-size: 14px;
    color: white;
    background-image: url(../images/icon_cerca.svg);
    background-repeat: no-repeat;
    background-position: left 8px center;
    margin: 0 15px 0 0;
    text-decoration: none;
}
.btn_header {
    display: flex;
    align-items: center;
    height: 40px;
    background: var(--color_header);
    border: 1px solid white;
    border-radius: 4px;
    white-space: nowrap;
    text-decoration: none;
}
.btn_header:hover {
    background-color: rgba(255, 255, 255, 0.16);
    text-decoration: none;
}
.btn_header.edit {
    position: relative;
    flex: 0 0 40px;
    background-image: url(../images/btn_edit.svg);
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0 15px 0 0;
}
.btn_header.edit:hover {
    background-image: url(../images/btn_edit_h.svg);
}
.btn_header.add {
    position: relative;
    flex: 0 0 40px;
    background-image: url(../images/btn_add.svg);
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0 15px 0 0;
}
.btn_header.add:hover {
    background-image: url(../images/btn_add_h.svg);
}
.btn_header.com {
    position: relative;
    flex: 0 0 40px;
    background-image: url(../images/icon_com.svg);
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0 15px 0 0;
}
.btn_header_toread {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: #D22E2E;
    font-size: 12px;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 100%;
}
.btn_header.profilo {
    position: relative;
    font-size: 1em;
    color: white;
    background-image: url(../images/icon_user.svg);
    background-repeat: no-repeat;
    background-position: left 10px center;
    padding: 0 10px 0 43px;
}
/*.btn_header.profilo:hover {
    border-radius: 4px 4px 0 0;
}*/
.btn_header.profilo:hover .profilo_dropdown_content {
    display: block;
}
.profilo_dropdown_content {
    display: none;
    position: absolute;
    top: 33px;
    right: -1px;
    margin: 8px 0 0 -8px;
    min-width: 100%;
    border-right: 1px solid white;
    
    z-index: 1;
    /* border-radius: 0 0 4px 4px; */
}
.header_menu_sublink.profilo {
    display: flex;
    justify-content: flex-end;
    cursor: pointer;
    background-color: var(--color_header_menu);
}
.header_menu_sublink.profilo:hover {
    background-color: var(--color_header_menu_hover) !important;
}
.header_menu_sublink.profilo.red:hover {
    background-color: var(--color_rossoscuro) !important;
}
.header_menu_sublink.profilo.verde:hover {
    background-color: var(--color_verdescuro) !important;
}

/* SCELTA STAGIONE */
.stagione_dropdown {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: var(--color_header);
    border-radius: 4px;
    text-align: center;
    line-height: 40px;
    margin: 0 0 0 15px;
}
.stagione_dropdown:hover {
    border-radius: 4px 4px 0 0;
}

.stagione_icon ion-icon {
    font-size: 20px;
    color: white;
    vertical-align: middle;
}

.stagione_dropdown_content {
    display: none;
    position: absolute;
    top: 41px;
    right: -1px;
    background-color: var(--color_header_menu);
    min-width: 120px;
    z-index: 1000;
    border-right: 1px solid white;
    text-align: right;
    line-height: 30px;
}

.stagione_dropdown_content a {
    color: white;
    padding: 4px 10px;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.stagione_dropdown_content a:hover {
    background-color: var(--color_header_menu_hover);
}

.stagione_dropdown:hover .stagione_dropdown_content {
    display: block;
}



/* ####################### BRICIOLE ################ */

.briciole_container {
    display: flex;
    align-items: center;
    color: var(--color_titolo);
    padding-inline-start: 0px;
    margin-block-start: 0px;
}
.briciole_item {
    display: flex;
    align-items: center;
    gap: 10px;
}
.briciole_item a {
    text-decoration: none;
}
.briciole_item ion-icon {
    padding: 0 0 0 10px;
    opacity: 0.3;
}
.briciole_item:first-child ion-icon {
    display: none;
}

/* ########################## MENU ########################## */

/* HEADER MENU CONTAINER */
#header_menu_container {
    max-width: var(--max-width);
    margin: 0 auto 20px;
    padding: 0 30px;
    box-sizing: border-box;
}

/* MENU PRINCIPALE */
.header_menu {
    position: relative;
    display: inline-block;
}

/* LINK MENU PRINCIPALE */
.header_menu_link {
    display: block;
    padding: 8px;
    color: white;
    font-weight: 500;
    font-size: 1.1em;
    margin: 0 25px 0 0;
    text-decoration: none;
    transition: background-color 0.3s;
}

.header_menu_link:hover,
.header_menu_link.active {
    background-color: rgba(255, 255, 255, 0.16);
    border-radius: 4px;
    text-decoration: none;
}

/* LINK CON DROPDOWN */
.header_menu_link.dropdown {
    background-image: url(../images/menu_freccia.svg);
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding: 8px 28px 8px 8px;
}

.header_menu_link.dropdown:hover {
    border-radius: 4px 4px 0 0;
}

/* CONTENUTO DROPDOWN */
.header_menu_dropdown_content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin: 0;
    min-width: 200px;
    white-space: nowrap;
    background-color: var(--color_header_menu);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000;
    border-radius: 0 4px 4px 4px;
}

/* MOSTRA DROPDOWN AL HOVER */
.header_menu:hover .header_menu_dropdown_content {
    display: block;
}

/* LINK SUBMENU */
.header_menu_sublink {
    display: block;
    padding: 12px 16px;
    color: white;
    font-weight: 400;
    border-top: 1px solid rgba(255, 255, 255, 0.20);
    text-decoration: none;
    transition: background-color 0.3s;
}

.header_menu_sublink:first-child {
    border-top: none;
}

.header_menu_sublink.active,
.header_menu_sublink:hover {
    background-color: var(--color_header_menu_hover);
    text-decoration: none;
}


/* ########################## HOME ########################## */

.content.home {
    margin: 40px auto 0;
    box-sizing: border-box;
    color: white;
}

.home_slideshow_container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Altezza fissa desiderata */
.home_slideshow {
  height: 600px;           /* ← puoi variare a piacere */
  position: relative;
  overflow: hidden;
}

/* Mostra solo la prima slide in prerender */
.home_slideshow.is-prerender .slide_item {
  display: none;
}
.home_slideshow.is-prerender .slide_item:first-child {
  display: block;
}

/* Catena Slick: forza height:100% ovunque */
.home_slideshow .slick-list,
.home_slideshow .slick-track,
.home_slideshow .slick-slide {
  height: 100%;
}

/* Slick incapsula il contenuto della slide dentro un wrapper anonimo:
   forza anche quello a 100% (il > div cattura il wrapper diretto). */
.home_slideshow .slick-slide > div {
  height: 100%;
}

/* Le nostre slide e l'immagine di sfondo devono riempire tutto */
.home_slideshow .slide_item {
  height: 100%;
}
.home_slideshow .slide_img {
  height: 100%;
  background-size: cover !important;      /* riempi sempre */
  background-position: center center;
  background-repeat: no-repeat;
}



/* (Opzionale) versione responsive dell'altezza fissa */
@media (max-width: 1024px) {
  .home_slideshow { height: 600px; }
}
@media (max-width: 768px) {
  .home_slideshow { height: 600px; }
}
@media (max-width: 480px) {
  .home_slideshow { height: 550px; }
}



/* Ogni item */
.slide_item {
  width: 100%;
  height: 100%;
}

/* Sfondo immagine */
.slide_img {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 320px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Overlay bianco arrotondato (4px) */
.slide_overlay {
  position: absolute;
  left: 26px;
  bottom: 16px;
  max-width: min(92%, 520px);
  background: rgba(255, 255, 255, 0.95);
  border-radius: 4px;
  padding: 10px 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  line-height: 1.35;
}

/* Riga 1: didascalia */
.slide_dida {
  font-size: 0.95rem;
  font-weight: 600;
  color: #222;
  margin: 0 0 4px 0;
  letter-spacing: 0.2px;
}

/* Riga 2: copyright */
.slide_copy {
  font-size: 0.85rem;
  color: #555;
  margin: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .slide_overlay { left: 22px; bottom: 12px; padding: 9px 11px; }
  .slide_dida { font-size: 0.92rem; }
  .slide_copy { font-size: 0.82rem; }
}

@media (max-width: 640px) {
  .slide_overlay { left: 20px; bottom: 10px; max-width: 90%; }
  .slide_dida { font-size: 0.7rem; }
  .slide_copy { font-size: 0.6rem; }
}


/* ########################## NAV ########################## */

.content_container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
}
.nav_container {
    margin: 0 auto 0 auto;
    background-color: white;
    padding: 30px;
    box-sizing: border-box;
    border-radius: 0 0 4px 4px;
}
.content_sx {
    flex-grow: 1;
    margin: 30px 0 0 0;
}
.nav_section_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px 0 0 0;
}
.nav_section_container.action {
    padding: 30px 0 0 0;
}
.nav_section_actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.nav_section_actions .btn {
    margin: 0px;
}
.nav_section {
    display: block;
    font-size: 1.25em;
    font-weight: 400;
    color: var(--color_titolo);
    text-transform: uppercase;
}
.nav_section.white {
    color: white;
}
.nav_title {
    display: block;
    font-size: 2.5em;
    font-weight: 400;
    color: white;
    margin: 10px 0 30px 0;
}
.nav_title.little {
    font-size: 2em;
}
.nav_subtitle {
    font-size: 1em;
    color: white;
    margin: 6px 0 0 0;
}
.hero_container {
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center center;
}
.hero_elenco_titolo {
    display: inline-block;
    background-color: rgba(44, 58, 109, 0.70);
    padding: 20px;
    color: white;
    font-size: 2em;
    font-weight: 500;
}
.content_search_container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin: 0 0 20px 0;
}
#search {
    box-sizing: border-box;
}
.content_search_container #search {
    border: none;
    background-color: var(--color_blu1);
    border-radius: 4px;
    padding: 8px 8px 8px 28px;
    color: white;
    background-image: url(../images/icon_cerca.svg);
    background-repeat: no-repeat;
    background-position: center left 8px;
    background-size: 16px;
}
.nav_item_titolo {
    text-transform: uppercase;
    color: var(--color_action);
    font-size: 1.125em;
    font-weight: 600;
    margin: 0 0 20px 0;
}
.nav_item_container {
    width: 100%;
    display: flex;
    align-items: center;
    background-color: var(--color_blu1);
    font-size: 0.9em;
    color: white;
    border-radius: 4px;
}
.nav_item_content_sx,
.nav_item_content_dx {
    padding: 20px;
    box-sizing: border-box;
    width: 50%;
}
.nav_item_content_sx.img,
.nav_item_content_dx.img {
    padding: 0px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    min-height: 250px;
    align-self: stretch;
}
.nav_item_content_sx {
    border-radius: 4px 0 0 4px;
}
.nav_item_content_dx {
    border-radius: 0 4px 4px 0;
}
.nav_item_content_sopraTitolo {
    font-size: 0.9em;
    text-transform: uppercase;
    color: var(--color_action);
    margin: 0 0 15px 0;
}
.nav_item_content_sopraTitolo.eventi {
    padding: 0 0 0 20px;
    background-image: url(../images/icon_evento.svg);
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: center left;
}
.nav_item_content_titolo {
    font-size: 1.6em;
    color: white;
    margin: 0 0 10px 0;
}
.nav_item_content_sottoTitolo {
    font-size: 0.8em;
    font-family: 'Satoshi-VariableItalic';
    color: var(--color_action);
    margin: 0 0 20px 0;
}
.nav_item_content_sottoTitolo.dove {
    padding: 0 0 0 20px;
    background-image: url(../images/icon_dove.svg);
    background-repeat: no-repeat;
    background-size: 11px;
    background-position: center left;
}
.nav_item_content_sottoTitolo.quando {
    padding: 0 0 0 20px;
    background-image: url(../images/icon_dove.svg);
    background-repeat: no-repeat;
    background-size: 11px;
    background-position: center left;
}
.nav_item_content_txt {
    font-size: 1em;
    color: white;
}

/* ########################## NEWS ELENCO ########################## */

.elenco_txt.news {
    margin: 16px 0 0 0;
    min-height: 98px !important;
    justify-content: flex-start;
}
.item_cat {
    position: absolute;
    top: 5px;
    left: 5px;
    background-repeat: no-repeat;
    background-position: left 5px center;
    padding: 5px 8px 5px 25px;
    border-radius: 4px;
    font-size: 0.75em;
    font-weight: 600;
    color: white;
}
.item_cat.ambassador {
    background-color: rgba(229, 109, 109, 0.8);
    background-image: url(../images/tag_ambassador.svg);
}
.evidenza_container {
    background-color: var(--color_blu1);
    padding: 20px 0;
    margin: 20px 0;
}
.evidenza_title {
    font-size: 1.125em;
    font-weight: 600;
    color: var(--color_action);
    margin: 0 0 20px 0;
}
.evidenza_first_container {
    display: flex;
    align-items: center;
}
.evidenza_first_img {
    position: relative;
    flex: 0 0 50%;
    min-height: 250px;
    background-size: cover;
    background-position: center center;
    border-radius: 4px;
}
.evidenza_first_testi {
    margin: 0 0 0 20px;
}
.evidenza_first_tag {
    font-size: 0.9em;
    font-weight: 500;
    color: var(--color_action);
}
.evidenza_first_title {
    font-size: 1.4em;
    font-weight: 500;
    color: white;
    margin: 15px 0 20px 0;
}
.evidenza_first_testo {
    font-size: 1em;
    font-weight: 400;
    color: white;
}
.evidenza_first_author {
    font-size: 0.8em;
    font-weight: 400;
    font-style: italic;
    color: var(--color_action);
    margin: 10px 0 0 0;
}
.evidenza_bis_container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin: 40px 0 0 0;
}
.evidenza_bis_item {
    display: flex;
    flex-direction: column;
    width: calc(25% - 12px);
}
.evidenza_bis_img {
    background-size: cover;
    background-position: center center;
    height: 150px;
    border-radius: 4px;
}
.evidenza_bis_tag {
    font-size: 0.75em;
    font-weight: 500;
    color: var(--color_action);
    margin: 12px 0 0 0;
}
.evidenza_bis_title {
    font-size: 1.125em;
    font-weight: 500;
    color: white;
    margin: 8px 0;
}
.evidenza_bis_author {
    font-size: 0.75em;
    font-weight: 400;
    font-style: italic;
    color: var(--color_action);
}
.elenco_img {
    background-size: cover;
    background-position: center center;
    height: 150px;
    border-radius: 4px;
}
.elenco_txt {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0 0 20px 0;
    min-height: 225px;
}
.elenco_tag {
    font-size: 0.75em;
    font-weight: 500;
    color: var(--color_action);
    margin: 0 0 8px 0;
    text-transform: uppercase;
}
.elenco_title {
    font-size: 1em;
    font-weight: 500;
    color: white;
    margin: 0 0 8px 0;
}
.elenco_author {
    font-size: 0.75em;
    font-weight: 400;
    font-style: italic;
    color: var(--color_action);
}
.filters-container {
    margin: 40px 0;
}
.filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 0px;
}
.filters li {
    display: inline-block;
    margin: 0 0 5px 0;
}
.filters li a {
    font-size: 0.7em;
    font-weight: 600;
    border: 1px solid var(--color_action);
    color: var(--color_action);
    padding: 5px 15px;
    border-radius: 15px;
}
.filters li a:hover,
.filters li a.selected {
    background-color: var(--color_action);
    color: var(--color_blu1);
}




.news_item:not(:last-child) {
    border-bottom: 1px solid var(--color_action);
    margin: 0 0 15px 0;
}
.news_item.draft {
    background-color: hsla(0, 0%, 33%, 0.3);
    padding: 10px;
}
.news_data {
    font-size: 0.7em;
    color: var(--color_action);
}
.news_titolo a {
    font-size: 1.5em;
    font-weight: 600;
    color: var(--color_titolo);
    margin: 2px 0 0 0;
    text-decoration: none;
}
.news_tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 5px 0 0 0;
}
.news_tag,
a.news_tag {
    font-size: 0.6em;
    font-weight: 500;
    color: var(--color_action);
    border: 1px solid var(--color_action);
    padding: 2px 6px;
    border-radius: 4px;
    text-decoration: none;
}
a.news_tag:hover,
.news_tag.evidenza {
    background-color: var(--color_action);
    color: white;
}
.news_testo p {
    margin: 0;
}
.news_testo {
    font-size: 1em;
    color: var(--color_txt);
    margin: 10px 0 0 0;
    line-height: 1.5;
}
.news_link {
    font-size: 0.8em;
    font-weight: 500;
    color: var(--color_action);
    text-decoration: none;
    margin: 6px 0 15px 0;
    display: inline-block;
}


.articolo_elenconews_header {
    display: inline-block;
    font-size: 0.6em;
    background-color: var(--color_titolo);
    color: white;
    padding: 6px 40px 2px 8px;
}
.articolo_elenconews_container {
    border-top: 4px solid var(--color_titolo);
    border-bottom: 4px solid var(--color_titolo);
    padding: 25px 6px 10px 6px;
    margin: 0 0 40px 0;
    background-color: color-mix(in oklab, var(--color_bg) 10%, transparent 90%);
}


.news_home_link {
    font-size: 0.8em;
    font-weight: 500;
    color: var(--color_action);
    text-decoration: none;
    display: inline-block;
}

/* ########################## NEWS ########################## */

.media-boxes-load-more {
    border: 1px solid var(--color_action);
    background-color: transparent !important;
    border-radius: 4px;
    color: var(--color_action) !important;
}
.content_container.articolo {
    border-radius: 4px;
}
.hero_container.news {
    height: 360px;
}
.news_container {
    margin: 0 auto 0 auto;
    background-color: white;
    padding: 30px;
    box-sizing: border-box;
    border-radius: 0 0 4px 4px;
}
.news_container.tophover {
    margin: -60px auto 0 auto;
    border-radius: 4px;
}
.articolo_header {
    display: flex;
    justify-content: space-between;
}
.articolo_tag {
    color: var(--color_blu1);
    font-size: 1em;
    font-weight: 500;
    text-transform: uppercase;
}
.articolo_tag.link:hover {
    text-decoration: underline;
}
.articolo_like {
    width: 20px;
    height: 20px;
    background-image: url(../images/icon_like.svg);
    background-size: cover;
    cursor: pointer;
}
.articolo_like:hover,
.articolo_like.active {
    background-image: url(../images/icon_like_active.svg);
}
.articolo_titolo {
    color: var(--color_titolo);
    font-size: 2em;
    font-weight: 600;
    margin: 20px 0 10px 0;
}
.articolo_author {
    color: var(--color_blu1);
    font-size: 0.9em;
    font-weight: 500;
    font-style: italic;
    margin: 0 0 20px 0;
}


/* ########################## BARRA DX ########################## */

.content_dx {
    flex: 0 0 320px;
    margin: 30px 0 0 20px;
}
.blocco {
    border-radius: 4px;
    padding: 15px;
}
.blocco.team {
    display: flex;
    flex-direction: column;
    flex-grow: 2;
    height: calc(100% - 60px);
    box-sizing: border-box;
}
.blocco.blu1 {
    background-color: var(--color_blu1);
}
.contentdx_section_titolo {
    font-size: 1em;
    font-weight: 500;
    color: var(--color_action);
    margin: 0 0 10px 0;
}


.itemdx_itemicon {
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: left;
    padding: 2px 0 0 25px;
    color: white;
    font-size: 0.8em;
    margin: 0 0 10px 0;
}
.itemdx_itemicon.indirizzo {
    background-image: url(../images/icon_mappa.svg);
}
.itemdx_itemicon.email {
    background-image: url(../images/icon_email.svg);
}
.itemdx_itemicon.tel {
    background-image: url(../images/icon_tel.svg);
}
.itemdx_orario_container {
    display: flex;
    justify-content: space-between;
    font-size: 0.8em;
    color: white;
    padding: 3px 0;
    border-bottom: 1px solid white;
    margin: 0 10px 0 0; /*per compensare il container*/
}
.itemdx_orario_container:last-child {
    border-bottom: none;
    margin: 0 10px 10px 0; /*per compensare il container*/
}

/* ########################## AMBASSADOR ELENCO ########################## */

.amb_elenco_img {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 180px;
    border-radius: 4px 4px 0 0;
}
.amb_elenco_txt {
    padding: 8px;
    background-color: var(--color_blu1);
    background-image: url(../images/icon_frecciadx.svg);
    background-repeat: no-repeat;
    background-position: center right 10px;
    border-radius: 0 0 4px 4px;
}
.amb_elenco_nome {
    color: white;
    font-size: 1.3em;
    font-weight: 400;
}
.amb_elenco_sottonome {
    font-size: 0.8em;
    color: #B6D9FB;
    margin: 5px 0 0 0;
}
.filters-container.ambassador {
    width: max-content;
}

/* ########################## AMBASSADOR ########################## */

.hero_container.ambassador {
    height: 430px;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
}
.hero_amb_txt {
    display: inline-block;
    background-color: rgba(44, 58, 109, 0.70);
    padding: 20px;
    color: white;
    max-width: 40%;
}
.hero_amb_txt_sopra {
    text-transform: uppercase;
    font-size: 1em;
    font-weight: 400;
}
.hero_amb_txt_titolo {
    font-size: 2.5em;
    font-weight: 400;
    margin: 10px 0 0 0;
}
.hero_amb_txt_sottotitolo {
    font-size: 0.9em;
    font-weight: 400;
    margin: 10px 0 0 0;
}

/* ########################## PISCINE ELENCO ########################## */

.elenco_txt_top {
    margin: 16px 0 0 0;
}

.filters-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
}
.media-boxes-drop-down {
    border: none !important;
    flex-grow: 1;
    min-width: 200px;
}
.filter_dropdown_label {
    font-size: 0.875em;
    color: var(--color_action);
    font-weight: 600;
    padding: 0 0 6px 0;
}
.filter_dropdown_header {
    border: 1px solid var(--color_action) !important;
    background-color: transparent !important;
    border-radius: 4px !important;
    color: var(--color_action) !important;
    font-size: 1em !important;
}
.media-boxes-drop-down-menu > li > a:hover {
    background: var(--color_action) !important;
    color: var(--color_blu1) !important;
}
.media-boxes-search {
    border: none !important;
}
.filters_search {
    flex-grow: 1;
    min-width: 200px;
    background-color: transparent !important;
}
.media-boxes-search input[type=text] {
    width: 100% !important;
    background-color: transparent !important;
    border: 1px solid var(--color_action) !important;
    border-radius: 4px !important;
    color: var(--color_action) !important;
    padding: 0 0 0 10px !important;
}
.media-boxes-search input[type=text]::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--color_action);
    opacity: 1; /* Firefox */
}
.mediabox_ambassador {
    display: flex;
    background-color: var(--color_action);
    border-radius: 4px;
}
.mediabox_ambassador_sx {
    min-height: 265px;
    flex: 0 0 50%;
    background-size: cover;
    background-position: center center;
    border-radius: 4px 0 0 4px;
}
.mediabox_ambassador_sx.team {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-origin: content-box;
    padding: 10px;
    box-sizing: border-box;
    background-color: white;
}
.mediabox_ambassador_dx {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    padding: 15px;
    box-sizing: border-box;
}
.mediabox_ambassador_title {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--color_blu1);
    margin: 0 0 10px 0;
}
.mediabox_dove {
    background-repeat: no-repeat;
    background-position: left center;
    padding: 0 0 0 20px;
    font-size: 0.75em;
    font-weight: 500;
}
.mediabox_dove.ambassador {
    background-image: url(../images/tag_ambassador_dove.svg);
    color: var(--color_blu1);
}
.mediabox_btn.ambassador {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.mediabox_normal {
    display: block;
    min-height: 225px;
    background-color: var(--color_blu1);
    border-radius: 4px;
}
.mediabox_normal_img {
    display: block;
    background-size: cover;
    background-position: center center;
    border-radius: 4px 4px 0 0;
    height: 130px;
}
.mediabox_normal_img.team {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-origin: content-box;
    padding: 10px;
    box-sizing: border-box;
    background-color: white;
}
.mediabox_normal_img.eventi {
    height: 180px;
}
.elenco_txt.piscine {
    padding: 0 15px 15px;
    margin: 16px 0 0 0;
    min-height: 104px !important;
    justify-content: flex-start;
}
.mediabox_dove.normal {
    background-image: url(../images/tag_ambassador_dove2.svg);
    color: white;
}
.mediabox_quando {
    background-image: url(../images/tag_evento_quando.svg);
    background-repeat: no-repeat;
    background-position: left center;
    padding: 0 0 0 20px;
    font-size: 0.9em;
    font-weight: 500;
    color: var(--color_action);
    margin: 20px 0 10px 0;
}

.mediabox_normal_img_logo {
    width: 100%;
    height: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

/* ########################## PISCINA ########################## */

.piscina_img_principale  {
    display: block;
    width: 100%;
    height: 240px;
    background-size: cover;
    background-position: center center;
    border-radius: 4px;
    margin: 20px 0;
}
.piscina_img_principale.team {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-origin: content-box;
    padding: 10px;
    box-sizing: border-box;
    background-color: white;
}

.info_piscina_container {
    display: flex;
    flex-wrap: wrap;
    border-radius: 4px;
    background-color: var(--color_blu1);
    padding: 20px;
    gap: 50px;
    justify-content: flex-start;
    margin: 10px 0 0 0;
}
.info_piscina_sx,
.info_piscina_centro,
.info_piscina_dx {
    flex: 2 1 0;
}

/* ########################## ELKENCO EVENTI ########################## */

.elenco_txt.eventi {
    padding: 0 15px 15px;
    margin: 0px;
    min-height: 220px;
}

/* ########################## EVENTO ########################## */

.evento_img_principale  {
    display: block;
    width: 100%;
    height: 380px;
    background-size: cover;
    background-position: center center;
    border-radius: 4px 4px 0 0;
    margin: 0px;
}
.evento_testi {
    background-color: white;
    padding: 20px;
    color: var(--color_blu1);
    line-height: 1.8em;
}
.evento_sottotitolo {
    display: flex;
    flex-wrap: wrap;
}
.evento_dove {
    background-image: url(../images/tag_evento_dove.svg);
    background-repeat: no-repeat;
    background-position: left center;
    padding: 0 0 0 20px;
    font-size: 1em;
    font-weight: 500;
    color: var(--color_blu1);
    margin: 0 20px 30px 0;
}
.evento_dove.blu {
    background-image: url(../images/tag_ambassador_dove2.svg);
    color: var(--color_action);
}
.evento_quando {
    background-image: url(../images/tag_evento_quando2.svg);
    background-repeat: no-repeat;
    background-position: left center;
    padding: 0 0 0 20px;
    font-size: 1em;
    font-weight: 500;
    color: var(--color_blu1);
    margin: 0 0 30px 0;
}
.evento_quando.blu {
    background-image: url(../images/tag_evento_quando.svg);
    color: var(--color_action);
}
.content_dx.evento {
    flex: 0 0 320px;
}
.sezione_dx {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 15px 0;
}
.evento_dx_tipo {
    font-size: 0.9em;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--color_action);
    margin: 0 0 10px 0;
}
.evento_dx_title {
    font-size: 1.125em;
    font-weight: 500;
    color: white;
    margin: 0 0 20px 0;
}
.evento_dx_quando {
    background-image: url(../images/tag_evento_quando.svg);
    background-repeat: no-repeat;
    background-position: left center;
    padding: 0 0 0 20px;
    font-size: 0.9em;
    color: var(--color_action);
    margin: 20px 0 5px 0;
}
.evento_dx_dove {
    background-image: url(../images/tag_ambassador_dove2.svg);
    background-repeat: no-repeat;
    background-position: left center;
    padding: 0 0 0 20px;
    color: var(--color_action);
}

/* ########################## COMUNICAZIONI ########################## */

.com_data {
    text-align: right;
    font-size: 0.8em;
    font-weight: 500;
    color: var(--color_action);
    margin: 15px 0 0 0;
}
.com_container {
    display: flex;
    align-items: center;
    background-color: var(--color_blu1);
    padding: 15px;
    border-radius: 4px;
    margin: 15px 0 0 0;
}
.com_container.active {
    background-color: #D0EBF9;
}
.com_testi {
    flex-grow: 2;
}
.com_avatar {
    display: flex;
    flex: 0 0 64px;
    height: 64px;
    background-color: white;
    border-radius: 32px;
    background-size: contain;
    background-position: center center;
    background-origin: content-box;
    background-repeat: no-repeat;
    padding: 5px;
    box-sizing: border-box;
    margin: 0 15px 0 0;
}
.com_titolo {
    font-size: 1em;
    font-weight: 700;
    color: var(--color_action);
    margin: 0 0 6px 0;
}
.com_titolo_margin {
    margin: 0 0 10px 0;
}
.com_testo {
    font-size: 0.8em;
    /* opacity: 0.5; */
    color: white;
}
.com_link_pre {
    display: inline-block;
    font-size: 0.7em;
    opacity: 0.5;
    color: var(--color_action);
    margin: 0 10px 0 0;
}
.com_link {
    display: inline-block;
    border: 1px solid var(--color_action);
    color: var(--color_action);
    background-image: url(../images/tag_download.svg);
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: left 8px center;
    padding: 3px 10px 3px 26px;
    border-radius: 10px;
    margin: 10px 6px 0 0;
    font-size: 0.7em;
}
.com_link:hover {
    background-image: url(../images/tag_download_h.svg);
    background-color: var(--color_action);
    color: var(--color_blu1);
}
.com_star {
    width: 16px;
    height: 16px;
    background-image: url(images/icon_star.svg);
    background-size: cover;
    cursor: pointer;
}
.com_star:hover,
.com_star.active {
    background-image: url(images/icon_star_active.svg);
}
.com_container.action {
    background-color: var(--color_action);
    color: white;
}
.com_container.action:hover {
    background-color: var(--color_actionh);
}
.com_container.action .com_titolo,
.com_container.action .com_testo {
    color: white;
}
.coms_title {
    font-size: 1em;
    color: var(--color_action);
    font-weight: 600;
    /* font-style: italic; */
    margin: 20px 0 -20px 0;
}
.com_tag {
    display: inline-block;
    font-size: 0.6em;
    border-radius: 10px;
    padding: 2px 10px;
    margin: 0 6px 15px 0;
}
.com_tag.sq {
    border: 1px solid var(--color_action);
    color: var(--color_action);
}
.com_tag.sq:hover {
    background-color: var(--color_action);
    color: var(--color_blu1);
}

/* ########################## MODULI ########################## */

.slick-initialized {
    margin-left: -10px !important;
    margin-right: -10px !important;
}
.nav_item_slickMain {
    margin: 0 10px;
}

/* ########################## MODULO HEROEVENTS ########################## */

.heroEvents_container {
    background-color: var(--color_blu1);
    padding: 16px;
    border-radius: 4px;
    box-sizing: border-box;
    margin: 0 10px;
}
.heroEvents_content {
    display: flex;
}
.heroEvents_content_sx {
    width: 50%;
    /* background-image: url(../images/temp/image\ 18.jpg); */
    background-size: cover;
    background-position: center center;
    margin: 0 40px 0 0;
}
.heroEvents_title {
    font-size: 1.6em;
    font-weight: 500;
    color: white;
    margin: 10px 0;
}
.heroEvents_txt {
    color: white;
    margin: 5px 0 10px;
}
.heroEvents_author {
    font-weight: 400;
    font-style: italic;
    color: #B6D9FB;
}

/* ########################## MODULO ELENCO BASE ########################## */

.elencoBase_main {
    display: flex;
    gap: 30px 30px; /*row column*/
    max-width: var(--max-width);
    margin: 0 auto;
}
.elencoBase_container {
    /* flex: 0 0 25%; */
    flex-grow: 1;
    flex-basis: 0;
    margin: 10px;
}
.elencoBase_content {
    padding: 16px;
    background-color: var(--color_blu1);
}
.elencoBase_img {
    height: 130px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    border-radius: 4px;
}
.elencoBase_container .cat {
    margin: 12px 0 8px 0;
}
.elencoBase_title {
    display: block;
    font-size: 1.125em;
    font-weight: 500;
    color: white;
    margin: 0 0 8px 0;
}
.elencoBase_title:hover {
    text-decoration: underline;
}
.elencoBase_author {
    font-size: 0.9em;
    font-weight: 400;
    font-style: italic;
    color: #B6D9FB;
}


/* ########################## MODULO ELENCO BANNER ########################## */

.elencoBanner_main {
    display: flex;
    gap: 30px 30px; /*row column*/
    max-width: var(--max-width);
    margin: 0 auto;
}
.elencoBanner_container {
    /* flex: 0 0 25%; */
    flex-grow: 1;
    flex-basis: 0;
    margin: 10px;
}
.elencoBanner_img {
    height: 130px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    border-radius: 4px 4px 0 0;
}
.elencoBanner_title {
    font-size: 1em;
    font-weight: 500;
    color: white;
    margin: 0 0 5px 0;
    background-color: var(--color_blu1);
    padding: 8px 28px 8px 8px;
    border-radius: 0 0 4px 4px;
    background-image: url(../images/icon_frecciadx.svg);
    background-repeat: no-repeat;
    background-position: center right 8px;
}

/* ########################## ELENCO 4 ########################## */

.items_elenco4_container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.item_elenco4_container {
    display: inline-flex;
    padding: 10px;
    box-sizing: border-box;
    background-color: rgba(182, 216, 251, 0.6);
    border-radius: 4px;
}
.item_elenco4_container:hover {
    background-color: var(--color_action);
}
/* .item_elenco4_container:nth-child(odd) {
    margin: 0 10px 10px 0;
} */
.item_elenco4_img {
    flex: 0 0 60px;
    width: 60px;
    height: 45px;
    margin: 0 10px 0 0;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 10px;
}
.item_elenco4_testi {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.item_elenco4_titolo {
    font-weight: 700;
    font-size: 1em;
    color: var(--color_blu1);
}
.item_elenco4_data {
    font-weight: 400;
    font-size: 0.9em;
    font-style: italic;
    color: var(--color_blu1);
}
.avvisi_none {
    display: inline-flex;
    font-size: 0.9em;
    color: var(--color_txt2);
    padding: 0 0 0 25px;
    background-repeat: no-repeat;
    background-position: left center;
}

/* ########################## ELENCO DX 1 ########################## */

.items_elencodx1_container {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 0 20px 0;
}
.item_elencodx1_container {
    display: flex;
    align-items: center;
    padding: 0 10px 0 0;
    box-sizing: border-box;
    /* background-color: white; */
    border-radius: 10px;
    margin: 0 0 10px 0;
}
.item_elencodx1_container:hover {
    background-color: var(--color_lightblue4);
}
.item_elencodx1_img {
    flex: 0 0 65px;
    width: 65px;
    height: 65px;
    background-size: cover;
    background-position: center center;
    border-radius: 4px;
    margin: 0 10px 0 0;
}
.item_elencodx1_testi {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.item_elencodx1_titolo {
    font-weight: 700;
    font-size: 0.7em;
    color: var(--color_darkblue1);
    margin: 0 0 10px 0;
}
.item_elencodx1_data {
    font-weight: 700;
    font-size: 0.6em;
    color: var(--color_darkblue1);
    opacity: 0.5;
}
.item_elencodx1_indirizzo {
    font-weight: 700;
    font-size: 0.6em;
    color: var(--color_darkblue1);
    opacity: 0.5;
}
.item_elencodx1_databig {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 65px;
    width: 65px;
    height: 65px;
    background-color: #F1F1F1;
    border-radius: 10px;
    margin: 0 10px 0 0;
    color: #34B3E4;
    font-weight: 700;
}
.item_elencodx1_databig_d {
    font-size: 2em;
    line-height: 0.9em;
}
.item_elencodx1_databig_m {
    font-size: 0.9em;
    line-height: 0.9em;
}



/* ########################## MATRIX FIELDS ########################## */

.art_container {
    width: 100%;
    padding: 30px 0;
    color: var(--color_action);
}
.art_container.chiaro,
.bgWhite .art_container {
    background-color: var(--color_artbg_chiaro);
    color: var(--color_blu1);
}
.art_container.landing,
.bgWhite .art_container  {
    background-color: transparent !important;
    color: var(--color_blu1);
}
.content_container h2,
.art_container.chiaro h2,
.art_container.landing h2,
.bgWhite .art_container h2 {
    font-size: 1.1em;
    color: var(--color_blu1);
    text-transform: uppercase;
    margin: 0 0 10px 0;
}
.content_container h2 {
    color: var(--color_action);
}
.art_container.scuro h2 {
    font-size: 1.1em;
    color: var(--color_action);
    text-transform: uppercase;
    margin: 0 0 10px 0;
}
.art_content {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.art_content.landing {
    width: 100%;
    padding: 0px;
}
.art_content.bacheca {
    width: 100%;
    /* padding: 20px; */
}
.bgWhite .art_content {
    padding: 0px;
}

/* ########################## TESTO ########################## */

.art_testo {
    font-size: 1em !important;
    color: var(--color_action) !important;
}
.bgWhite .art_testo,
.art_container.chiaro .art_testo {
    color: var(--color_blu1) !important;
}

/* ########################## TITOLO ########################## */

.art_content.titolo {
    align-items: center;
}
.art_titolo {
    font-size: 1.5em;
    font-weight: 700;
    /* text-transform: uppercase; */
    padding: 0 0 10px 0;
}
.art_sottotitolo {
    font-size: 1em;
}

/* ########################## BANNER ########################## */

.art_content.banner {
    display: block;
}
.banner_container {
    position: relative;
    background-image: url(../images/banner_tipo2_bg.svg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 4px;
    background-blend-mode: multiply;
}
.bgWhite .slick-dots li button:before {
    color: var(--color_blu1) !important;
}

/*TIPO 1*/
.banner_main.tipo1 {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}
.banner_container.tipo1 {
    flex: 1 1 calc(50% - 0.5em);
    padding: 15px;
    box-sizing: border-box;
    color: white;
}
.banner_titolo.tipo1 {
    font-size: 1.5em;
    font-weight: 500;
    margin: 0 0 10px 0;
}
.banner_testo.tipo1 {
    font-size: 1em;
}
.banner_link.tipo1 {
    position: absolute;
    bottom: 15px;
    left: 15px;
    margin: 0px;
}
/*TIPO 2*/
.banner_container.tipo2 {
    padding: 30px;
    box-sizing: border-box;
}
.banner_titolo.tipo2 {
    font-size: 1.6em;
    font-weight: 600;
    margin: 0 0 6px 0;
    color: var(--color_blu1);
}
.banner_testo.tipo2 {
    font-size: 1em;
    color: var(--color_blu1);
}
.banner_link.tipo2 {
    position: absolute;
    bottom: 30px;
    left: 30px;
    margin: 0px;
    background-color: var(--color_blu1);
    color: white;
}
/*TIPO 3*/
.localBanner3_container {
    background-color: var(--color_action);
}
/*TIPO 5*/
.banner_container.tipo5 {
    position: relative;
}
.banner_container_int.tipo5 {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.banner_txt_container.tipo5 {
    padding: 6px 10px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    color: white;
    font-size: 0.9em;
    text-align: center;
}
.banner_txt_sopra.tipo5 {
    border-bottom: 1px solid white;
    padding: 0 0 5px 0;
    margin: 0 0 2px 0;
}
/*TIPO 6*/
.banner_container.tipo6 {
    background-image: none;
}
.banner_container_int.tipo6 {
    display: flex;
    flex-direction: column;
}
.banner_image.tipo6 {
    border-radius: 4px;
    background-position: center center;
    background-size: cover;
}
.banner_txt_sopra.tipo6 {
    font-size: 1em;
    font-weight: 700;
    color: var(--color_action);
    text-transform: uppercase;
    margin: 10px 0 0 0;
}
.banner_txt_sotto.tipo6 {
    font-size: 0.9em;
    color: var(--color_action);
    margin: 3px 0 0 0;
}
.bgWhite .banner_txt_sopra.tipo6,
.bgWhite .banner_txt_sotto.tipo6 {
    color: var(--color_blu1);
}
/*TIPO 7*/
.banner_titolo.tipo7 {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6em;
    font-weight: 500;
}








/* ########################## VARI ########################## */

.bk_white {
    background-color: white;
    padding: 20px;
    border-radius: 4px;
}

.item_container.chiaro {
    background-color: #E7F2FE;
    margin: 40px 0;
    padding: 0 0 40px 0;
}
.item_titolo {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--color_action);
    text-align: center;
    padding: 60px 0 30px 0;
    text-transform: uppercase;
}
.item_titolo.left {
    text-align: left;
}
.item_titolo.chiaro {
    color: var(--color_blu1);
    padding: 30px 0;
}
.item_titolo_BIG {
    font-size: 1.6em;
    font-weight: 700;
    color: white;
    text-align: center;
    margin: 30px 0;
}
.item_descrizione {
    font-size: 0.875em;
    font-weight: 400;
    color: white;
    text-align: center;
    margin: 20px 0;
}
.box {
    display: flex;
    background-color: var(--color_blu1);
    padding: 30px;
    border-radius: 4px;
}
.box_txt {
    font-size: 0.875em;
    color: white;
}
.box_image {
    flex: 0 0 50%;
    background-size: cover;
    background-position: center center;
    border-radius: 4px;
}
.box_image.dx {
    margin: 0 0 0 30px;
}
.media-box-image.round {
    border-radius: 4px;
}

.content_container.amb_testo .nav_item_titolo,
.content_container.amb_testo .item_content .item_content_center {
    color: var(--color_action);
}

.modulo_imgdx_sx,
.modulo_imgsx_dx {
    color: white !important;
}
.bgWhite .modulo_imgdx_sx,
.bgWhite .modulo_imgsx_dx {
    color: var(--color_blu1) !important;
}

/* ########################## BUTTONS ########################## */

.content_container.buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

/* ########################## LOCALBANNER ########################## */

.localBanner_container {
    position: relative;
    background-image: url(../images/banner_tipo2_bg.svg);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 4px;
    margin: 10px;
    background-blend-mode: multiply;
}
.localBanner_titolo.tipo1 {
    margin: 20px 20px 0 20px;
    color: white;
    font-size: 1.5em;
    font-weight: 500;
}
.localBanner_testo.tipo1 {
    margin: 8px 20px 20px 20px;
    color: white;
    font-size: 1em;
    font-weight: 500;
}
.localBanner_link {
    position: absolute;
    bottom: 20px;
    left: 20px;
}
.localBanner_titolo.tipo2 {
    margin: 20px;
    color: var(--color_blu1);
    font-size: 2em;
    font-weight: 700;
}
.localBanner_testo.tipo2 {
    margin: 0px 20px;
    color: var(--color_blu1);
    font-size: 1em;
    font-weight: 500;
}
.localBanner_link.tipo2 {
    background-color: var(--color_blu1);
    color: white;
}

/* ########################## LOCALBANNER 3 ########################## */

.localBanner3_main {
    border-radius: 4px;
    background-color: var(--color_action);
}
.localBanner3_container {
    display: flex;
    align-items: stretch;
    /* position: absolute; */
    height: 100%;
    width: 100%;
}
.localBanner_content_sx {
    width: calc(50% - 40px);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.localBanner3_titolo {
    font-size: 2.5em;
    font-weight: 700;
    color: var(--color_blu1);
}
.localBanner3_testo {
    font-size: 1.5em;
    font-weight: 300;
    color: var(--color_blu1);
}
.localBanner3_link {
    flex-grow: 2;
    display: flex;
    align-items: flex-end;
}
.localBanner_content_dx {
    width: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    border-radius: 0 4px 4px 0;
}

/* ########################## VIDEO ELENCO ########################## */

.media-box-content.scuro {
    background-color: var(--color_bg);
    padding: 20px;
}
.video_item_titolo {
    font-size: 1.1em;
    line-height: normal;
    font-weight: 500;
    color: white;
}
.video_item_descrizione {
    font-size: 0.875em;
    font-weight: 400;
    color: white;
    margin: 8px 0 20px;
}
.video_playbutton {
    width: 100px !important;
    margin: 0 auto;
}

/* ########################## EVENTI MULTIPLI ########################## */

.eventiMultipli_container {
    flex-grow: 1;
    flex-basis: 0;
    margin: 10px;
}
.eventiMultipli_img {
    height: 130px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    border-radius: 4px;
}
.eventiMultipli_content {
    padding: 16px;
    background-color: var(--color_blu1);
}
.eventiMultipli_container .cat {
    margin: 10px 0;
}
.eventiMultipli_title {
    font-size: 1.375em;
    font-weight: 500;
    color: white;
    margin: 4px 0 7px 0;
}
.eventiMultipli_content_txt {
    font-size: 1em;
    font-weight: 400;
    color: white;
    margin: 9px 0 0 0;
}
.eventiMultipli_content_txt.quando {
    padding: 0 0 0 20px;
    background-image: url(../images/icon_quando.svg);
    background-repeat: no-repeat;
    background-size: 11px;
    background-position: center left;
}
.eventiMultipli_content_txt.dove {
    padding: 0 0 0 20px;
    background-image: url(../images/icon_dove.svg);
    background-repeat: no-repeat;
    background-size: 11px;
    background-position: center left;
    fill: white !important;
}

/* ########################## HOME INTRO ########################## */

.modulo_imgdx_container,
.modulo_imgsx_container {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0px auto;
    width: 100%;
}
.modulo_imgdx_sx,
.modulo_imgsx_dx {
    color: white;
}
.modulo_imgdx_sx {
    text-align: right;
}
.modulo_imgsx_dx.scuro,
.modulo_imgdx_sx.scuro {
    color: var(--color_blu1);
}
.modulo_imgdx_sx h2,
.modulo_imgsx_dx h2 {
    font-size: 1.5em;
    font-weight: 700;
    margin: 0 0 20px 0;
}
.modulo_imgdx_dx,
.modulo_imgsx_sx {
    flex: 0 0 50%;
    background-size: cover;
    background-position: center center;
    min-height: 370px;
    height: 100%;
    border-radius: 4px;
}
.modulo_registrati {
    background-color: var(--color_blu1);
    color: white;
    padding: 20px 0 30px;
    text-align: center;
}








/* ########################## HOME ########################## */

.welcome_container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.welcome_top {
    position: relative;
    flex-grow: 1;
    display: flex;
    background-size: cover;
    background-position: center center;
    justify-content: center;
    align-items: center;
}
.welcome_bottom {
    padding: 30px;
    background-color: var(--color_blu1);
    font-size: 1.2em;
    text-align: center;
    color: white;
}
.welcome_logo_container {
    position: relative;
    width: 100%;
    max-width: 500px;
    /* height: 23.5%; */
    margin: 0 15px;
    /* max-height: 120px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.welcome_logo {
    display: block;
    width: 100%;
    height: 120px;
    flex-grow: 1;
    background-image: url(../images/toswim_logo_cw.svg);
    background-repeat: no-repeat;
    background-size: contain;
    box-sizing: border-box;
}
.welcome_sottologo {
    width: 100%;
    font-weight: 700;
    font-size: 1.4em;
    color: white;
    text-align: center;
}
@media (min-width: 479px) { /*tutto*/

    .welcome_top {
        justify-content: left;
    }
    .welcome_logo_btns { display: none; }
    .welcome_logo_btns_desk {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        width: 100%;
        justify-content: right;
        gap: 20px;
        padding: 60px;
        box-sizing: border-box;
    }
    .welcome_logo_container {
        justify-content: left;
        margin: 0 60px;
    }
    .welcome_sottologo {
        text-align: left;
        margin: 0 0 0 30px;
    }

}
@media (max-width: 479px) { /*solo mobile*/

    .welcome_logo_btns_desk { display: none; }
    .welcome_logo_btns {
        display: flex;
        width: 100%;
        justify-content: center;
        gap: 20px;
    }
}

.welcome_title {
    font-weight: 700;
    font-size: 1em;
    color: white;
    margin: 20px 0;
}
.welcome_btn {
    width: 100px;
    text-align: center;
    margin: 30px 0 0 0;
    font-size: 1em;
}
.welcome_btn:hover {
    background-color: var(--color_action_hover);
    color: var(--color_blu1);
}
.welcome_dipiu {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    color: var(--color_action);
    padding: 0 0 20px 0;
    margin: 20px 0;
    background-image: url(../images/icon_giu.svg);
    background-repeat: no-repeat;
    background-position: bottom center;
}

/* ########################## INTRO ########################## */

.welcome_intro_container2 {
    margin: 30px 0 0 0;
}
.welcome_intro_container {
    width: 100%;
    padding: 20px 20px 80px 20px;
    background-color: #010C2A;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: white;
    text-align: center;
    box-sizing: border-box;
    background-image: url(/site/templates/images/intro/logo_sfondo.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 70%;
}
.welcome_intro_txt1,
.welcome_intro_txt3,
.welcome_intro_txt4 {
    font-size: 26px;
    margin: 50px 0;
}
.welcome_intro_txt2 {
    font-size: 20px;
    margin: 0 0 30px 0;
    max-width: 300px;
}
.welcome_intro_img1 {
    max-width: 200px;
}
.welcome_intro_boxes {
    display: flex;
    flex-wrap: wrap;
    max-width: 700px;
    justify-content: center;
}
.welcome_intro_box_container {
    flex-basis: 25%;
    display: flex;
    margin: 20px;
}
.welcome_intro_box_img {
    width: 60px;
    height: 60px;
    color: var(--color_action);
    /* color: #5CF4FE; */
}
.welcome_intro_box_testi {
    display: flex;
    flex-direction: column;
    text-align: left;
    margin: 0 0 0 20px;
    justify-content: center;
}
.welcome_intro_box_txt1 {
    font-size: 20px;
    font-weight: 700;
}
.welcome_intro_box_txt2 {
    font-size: 15px;
    font-style: italic;
    opacity: 0.6;
}
.welcome_footer {
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
    background-color: #132773;
}
.welcom_footer_logo {
    max-width: 300px;
}


/* ########################## PROFILO ########################## */

.profilo_paragrafo {
    margin: 0 0 20px 0;
}
.profilo_paragrafo_titolo {
    display: inline-block;
    padding: 10px 20px;
    background-color: white;
    border-radius: 6px 6px 0 0;
    color: var(--color_titolo);
    font-size: 1em;
    font-weight: 700;
}
.profilo_paragrafo_testo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 20px;
    background-color: white;
    color: var(--color_text);
    font-size: 0.9em;
}

.profilo_btn {
    display: block;
    padding: 15px;
    font-size: 0.8em;
    font-weight: 700;
    text-align: center;
    border-radius: 10px;
    margin: 15px 15px 0 0;
    cursor: pointer;
}
.profilo_btn.barradx {
    margin: 15px 0 0 0;
}
.profilo_btn.action {
    background-color: var(--color_action);
    color: #F1F1F1;
}
.profilo_btn.action:hover {
    background-color: var(--color_actionh);
    color: var(--color_actionhtxt);
}
.profilo_btn.red {
    background-color: var(--color_rossochiaro);
    color: var(--color_rosso);
}
.profilo_btn.red:hover {
    background-color: var(--color_rosso);
    color: white;
}
.profilo_btn.inside {
    display: inline-table;
    white-space: nowrap;
}
.edit_form {
    display: flex;
    /* flex-direction: column; */
    flex-wrap: wrap;
    width: 100%;
}
.edit_input {
    width: 100%;
    border: none;
    padding: 10px 10px;
    /* box-shadow: 0 3px 6px rgb(0 0 0 / 14%); */
    margin: 0 0 10px 0;
    box-sizing: border-box;
    border-radius: 4px;
    background-color: transparent;
    border: 1px solid var(--color_action);
    color: var(--color_action);
}
.edit_input_container {
    width: 100%;
}
.edit_fieldset_container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 15px 0;
    padding: 15px 0 0 0;
    border-top: 1px solid var(--color_darkblue1);
    border-bottom: 1px solid var(--color_darkblue1);
}
.edit_input_container.sx {
    width: calc(50% - 5px);
    margin: 0 10px 10px 0;
}
.edit_input_container.dx {
    width: calc(50% - 5px);
}
.edit_input_container.actions {
    text-align: center;
}
.edit_input_container.all {
    margin: 0 0 15px 0;
}
.edit_input_label {
    font-size: 0.7em;
    font-weight: 400;
    color: var(--color_action);
    text-align: left;
    margin: 0 0 2px 0;
}
.edit_input_label.all {
    font-size: 1em;
    font-weight: 500;
    color: var(--color_blu1);
    text-align: left;
    margin: 0 0 10px 0;
}
.selectize-control.single .selectize-input {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 1px solid var(--color_action) !important;
    border-radius: 4px !important;
    color: var(--color_action) !important;
}
.option.active {
    background-color: var(--color_action) !important;
}
.profilo_alert_container {
    padding: 20px;
    background-color: var(--color_action);
    border-radius: 4px;
    margin: 5px 0 0 0;
    font-size: 1em;
    font-weight: 500;
    color: var(--color_bg);
    text-align: center;
}
.profilo_alert_item {
    display: flex;
}
.profilo_alert_item_txt {
    font-weight: 700;
}
.profilo_alert_link {
    display: block;
    font-size: 1em;
    font-weight: 700;
    color: white;
    margin: 15px 0 0 0;
}
.profilo_alert_link:hover {
    text-decoration: underline;
}
.profilo_gcal_link {
    display: block;
    margin: 0 0 10px 0;
    color: var(--color_lightblue4);
}
.profilo_gcal_link:hover {
    color: var(--color_bg3);
}

.profilo_testo_tit {
    font-weight: 700;
}
.profilo_domanda,
.profilo_ass,
.profilo_abb {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /*background-color: rgba(from var(--color_bg) r g b / 0.5);*/
    background-color: var(--color_verde);
    color: white;
    padding: 10px 15px;
    border-radius: 4px;
    font-weight: 700;
}
.profilo_domanda_riga {
    padding: 5px 0;
}
.divider:not(:last-child) {
    height: 1px; /* Altezza della riga bianca */
    background-color: white; /* Colore bianco */
    flex-grow: 1;
} 
.profilo_domanda_scelta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.profilo_domanda_scelta_tit {
    font-weight: 500;
    white-space: nowrap;
}
.profilo_domanda_scelta_punt {
    font-size: 0.8em;
    font-style: italic;
    margin: 0 0 0 15px;
}
.profilo_abb_capo,
.profilo_ass_capo {
    display: flex;
    gap: 10px;
}
.profilo_abb_tags {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.profilo_storico_st {
    margin: 0 0 15px 0;
}
.profilo_storico_st_title {
    font-size: 25px;
    font-weight: 700;
    margin: 0 0 10px 0;
}
.profilo_storico_st_ass,
.profilo_storico_st_abb {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin: 6px 0;
}
.profilo_storico_st_ass_title,
.profilo_storico_st_abb_title {
    margin: 0 15px 0 0;
}
.profilo_storico_ass,
.profilo_storico_abb {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background-color: #dfdfdf;
    padding: 10px 10px;
    border-radius: 4px;
    font-weight: 500;
}
.profilo_storico_abb_tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* ########################## CERCA ########################## */

.cerca_titolo {
    font-size: 1.2em;
    font-weight: 600;
    margin: 20px 0;
    color: var(--color_action);
}

/* ########################## APPUNTAMENTI ########################## */

.apps_title {
    font-size: 1.1em;
    font-weight: 700;
    color: var(--color_darkblue1);
    margin: 20px 0;
}
.apps_subtitle {
    font-size: 1em;
    color: var(--color_darkblue1);
    margin: 0 0 20px 0;
}
.apps_subtitle_giorno,
.appsview_daytime {
    font-size: 1em;
    font-weight: 700;
    color: var(--color_action);
    margin: 10px 0 15px 0;
}
.app_week_container {
    display: flex;
    width: 100%;
    justify-content: space-between;
}
#app_week_indietro {
    min-width: 20px;
    /* height: 60px; */
    background-image: url(../images/icon_indietro.svg);
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0 0 0 10px;
    cursor: pointer;
}
#app_week_avanti {
    min-width: 20px;
    /* height: 60px; */
    background-image: url(../images/icon_avanti.svg);
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0 10px 0 0;
    cursor: pointer;
}
.app_day_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    color: rgba(182, 216, 251, 0.5);
}
.app_day_day {
    font-size: 1em;
    text-transform: uppercase;
}
.app_day_num {
    font-size: 0.8em;
}
.app_day_container.active {
    cursor: pointer;
}
.app_day_container.active  {
    color: var(--color_action);
}
.app_day_container.oggi {
    color: white;
}
.app_day_container.active:hover,
.app_day_container.select {
    border-bottom: 1px solid var(--color_action);
}

.appsview_title {
    width: 100%;
    display: block;
    margin: 20px 0;
    text-align: left;
    font-size: 1em;
    color: white;
    margin: 20px 0 30px 0;
}
.appsview_title_spec {
    display: inline-block;
}
.appsview_daytime {
    width: 100%;

}
.appsview_container {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.appsview_content {
    display: flex;
    flex-direction: column;
    /* flex: 0 0 23.5%; */
    /* height: 80px; */
    padding: 20px 40px;
    border-radius: 4px;
    border: 1px solid var(--color_action);
    align-items: center;
    justify-content: center;
    color: var(--color_action);
}
.appsview_content.active {
    background-color: var(--color_bg1);
    cursor: pointer;
}
.appsview_content.active.occupato,
.appsview_content.active.occupato:hover {
    background-color: rgba(241, 241, 241, 0.4);
    color: var(--color_bg1);
    cursor: default;
}
.appsview_content.active:hover {
    background-color: var(--color_action);
    color: var(--color_bg);
}
.appsview_content.mio {
    background-color: var(--color_verde) !important;
    color: white !important;
    text-align: center;
    font-size: 0.95em;
}
.appsview_orario {
    white-space: nowrap;
    font-size: 0.8em;
    color: var(--color_bg3);
}
.appsview_txt {
    font-size: 0.8em;
}
.appConfirm_container {
    background-color: var(--color_blu1);
    padding: 20px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin: 20px auto;
    font-size: 0.9em;
}
#appConfirm_indietro {
    width: 100%;
    color: var(--color_action);
    background-image: url(../images/icon_indietro.svg);
    background-size: 10px;
    background-position: left center;
    background-repeat: no-repeat;
    padding: 0 0 0 25px;
    margin: 0 0 0 10px;
    cursor: pointer;
}
#appConfirm_indietro:hover {
    text-decoration: underline;
}
.appConfirm_dett_label {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--color_action);
    margin: 0 0 20px 0;
    text-transform: uppercase;
}
.appConfirm_dett_str {
    font-size: 1em;
    color: white;
}
.appConfirm_dett_str.tit {
    font-weight: 700;
    color: var(--color_action);
    margin: 0 0 5px 0;
}
.appConfirm_dett_day {
    font-size: 1em;
    color: white;
}
#appConfirm_confermato {
    font-size: 1.1em;
    color: var(--color_action);
    margin: 20px 0;
}

/* ########################## FILTRI ########################## */

.content_filtri_container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--color_action);
}
.content_mostrafiltri {
    margin: 0 0 20px 0;
}
.content_mostrafiltri_txt1 {
    font-size: 0.9em;
    font-weight: 700;
    color: var(--color_action);
    margin: 10px 0;
}
.content_mostrafiltri_filtro {
    display: inline-block;
    font-size: 0.9em;
    font-weight: 500;
    color: var(--color_action);
    border: 1px solid var(--color_action);
    padding: 3px 15px;
    border-radius: 15px;
    margin: 6px 6px 0 0;
}
.filtri_container_title {
    font-size: 1em;
    font-weight: 500;
    color: var(--color_blu1);
    margin: 20px 0;
    padding: 0 0 10px 0;
    border-bottom: 1px solid var(--color_blu1);
}

/* ########################## ALLENAMENTI ELENCO ########################## */

.all_elenco_container {
    display: flex;
    align-items: center;
    background-color: var(--color_blu1);
    padding: 10px 0 10px 15px;
    border-radius: 4px;
    margin: 15px 0 0 0;
    box-shadow: 0 2px 6px rgb(0 0 0 / 16%);
}
.all_elenco_content_sx {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 100%;
    margin: 0 10px 0 0;
    padding: 5px 15px;
    border: 1px solid #465180;
    border-radius: 4px;
}
.all_elenco_data_giorno {
    font-size: 20px;
    font-weight: 700;
    color: var(--color_action);
    text-transform: uppercase;
    line-height: 0px;
    padding: 10px 0 5px 0;
}
.all_elenco_data_num {
    font-size: 40px;
    line-height: 0px;
    font-weight: 900;
    color: var(--color_action);
    padding: 24px 0 0 0;
}
.all_elenco_data_mese {
    font-size: 20px;
    font-weight: 700;
    color: var(--color_action);
    text-transform: uppercase;
    line-height: 0px;
    padding: 29px 0 10px 0;
}
.all_elenco_content_dx {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0px;
}
.all_elenco_data_ora {
    font-size: 20px;
    line-height: 0px;
    padding: 10px 0 15px 0;
    font-weight: 900;
    color: var(--color_action);
}
.all_elenco_content_tipo {
    display: flex;
    flex-flow: wrap;
}
.all_elenco_content_tipo_item {
    display: flex;
    margin: 0 15px 0 0;
}
.all_elenco_content_tipo_h {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
    color: var(--color_action);
    margin: 0 3px 0 0;
}
.all_elenco_content_tipo_txt {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 400;
    color: white;
}
.all_elenco_content_allegati {
    display: flex;
    flex-wrap: wrap;
}
.all_elenco_content_allegato {
    font-size: 13px;
    font-weight: 700;
    background-color: var(--color_darkblue2);
    color: white;
    padding: 4px 15px;
    border-radius: 15px;
    margin: 10px 10px 0 0;
}
.all_elenco_content_allegato:hover {
    background-color: var(--color_darkblue1);
}

/* ########################## PISCINA ########################## */

.piscina_att_elenco_container {
    display: flex;
    flex-wrap: wrap;
}
.piscina_att_elenco_content {
    display: inline-flex;
    flex-direction: column;
    flex: 0 0 100px;
    margin: 0 10px 10px 0;
    max-width: 100px;
    max-height: 100px;
    align-items: center;
    justify-content: center;
    background-color: rgba(182, 216, 251, 0.6);
    border-radius: 4px;
}
/* .piscina_att_elenco_content:nth-child(7) { 
     margin: 0 0 10px 0;
} */
a.piscina_att_elenco_content:hover {
    background-color: var(--color_bg1);
}
a.piscina_att_elenco_content:hover .piscina_att_elenco_titolo {
    color: white;
}
.piscina_att_elenco_img {
    width: 60px;
}
.piscina_att_elenco_titolo {
    text-transform: uppercase;
    font-size: 0.7em;
    font-weight: 600;
    color: var(--color_blu1);
    text-align: center;
    padding: 0 20px;
    margin: -10px 0 10px 0;
}
.piscina_att_container {
    /* position: absolute;
    top: 0;
    left: 0; */
    width: 100%;
    height: 100%;
    /* background-color: var(--color_lightblue4);
    margin: 0 0 0 -15px;
    padding: 15px; */
}
.piscina_att_chiudi {
    position: absolute;
    top: 30px;
    right: 15px;
    width: 30px; height: 30px;
    background-image: url(images/btn_close.svg);
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
}
.piscina_att_titolo {
    font-size: 1.2em;
    font-weight: 700;
    margin: 20px 0;
    color: var(--color_txt2);
}
.piscina_att_content {
    background-color: white;
    border-radius: 10px;
    padding: 10px;
    margin: 20px 0 0 0;
}
.piscina_att_content_titolo {
    font-size: 1em;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color_action);
    margin: 15px 0;
}
.piscina_att_content_desc {
    font-size: 0.9em;
    font-weight: 400;
    color: var(--color_txt);
    opacity: 0.5;
    margin: 15px 0;
}







/* ########################## LOGIN/REGISTER ########################## */

@media (min-width: 1024px) {
    .login_container {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: left;
    }
    .login_sx {
        flex: 0 0 50%;
        height: 100%;
        background-size: cover;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}
@media (max-width: 1024px) {
    .login_container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .login_sx {
        width: 100%;
        height: 50%;
        background-image: none !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 0 30px 0;
    }
    .login_dx {
        height: 60%;
    }
    .login_sottologo {
        font-size: 0.9em !important;
        font-weight: 600 !important;
        margin: 10px 0 0 0;
    }
}
.login_img {
    display: block;
    width: 100%;
    height: 100%;
    /* background-image: url(../images/toswim_logo_cw.svg); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    box-sizing: border-box;
}
.login_sottologo {
    width: 100%;
    font-weight: 700;
    font-size: 1.4em;
    color: white;
    text-align: center;
}
.login_dx {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    background-color: var(--color_bg);
}
.login_dx_content {
    max-width: 500px;
    min-width: 80%;
    margin: 20px;
    background-color: var(--color_header);
    color: white;
    border-radius: 4px;
}
.login_dx_content_pad {
    padding: 20px;
}
.login_dx_content h1 {
    font-weight: 700;
    font-size: 1.3em;
    margin: 0 0 10px 0;
}
.login_dx_content p {
    font-size: 0.8em;
}
.login_socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 30px 0;
}
@media (max-width: 539px) {
    .login_socials {
        gap: 20px 0;
    }
}
.login_dx_content_oppure {
    width: 100%;
    text-align: center;
    font-style: italic;
    font-size: 0.8em;
    color: var(--color_action);
}
.toswim-text{
    color: var(--color_txt2);
    font-size: 0.9rem;
    font-weight: bold;
}
.login_form {
    display: inline-flex;
    flex-direction: column;
}
.login_form.login {
    width: 100%;
    margin: 20px 0 0 0;
}
.login_form label {
    font-size: 0.8em;
    color: white;
    margin: 0 0 6px 0;
}
.login_form_title_container {
    margin: 0 0 20px 0;
}
.login_form_title {
    width: 100%;
    text-align: left;
    font-size: 1.2em;
    font-weight: 700;
    color: var(--color_txt2);
}
.login_form_subtitle {
    width: 100%;
    text-align: left;
    font-size: 0.9em;
    font-weight: 500;
    color: var(--color_txt2);
}

/* .fb-login-button, .g_id_signin{
    box-shadow: 0 3px 6px rgb(0 0 0 / 14%);
    margin: 0 0 10px 0;
} */

.register_container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.register_content {
    background-color: var(--color_blu1);
    border-radius: 4px;
    width: calc(100% - 40px);
    max-width: 800px;
    margin: 30px 0 0 0;
}
.register_content_pad {
    padding: 20px;
}
.reg_step {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.reg_step.col {
    flex-direction: column;
}
.reg_step.hidden {
    display: none !important;
}
.reg_step_titolo {
    width: 100%;
    font-weight: 700;
    font-size: 1.3em;
    margin: 0 0 10px 0;
    color: white;
}
.reg_step_sottotitolo {
    width: 100%;
    font-weight: 500;
    font-size: 0.8em;
    margin: 0 0 10px 0;
    color: white;
}
.reg_step_inputs {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 30px 0 0 0;
}
#form_register {
    width: 100%;
    display: flex;
}
.login_input_container {
    display: flex;
    flex-direction: column;
    flex: 0 0 calc(50% - 8px);
}
.login_input_container.full {
    flex: 0 0 100%;
}

.login_input_label {
    font-size: 0.7em;
    font-weight: 400;
    color: var(--color_action);
    text-align: left;
    margin: 0 0 6px 0;
}
select:invalid { color: grey; }
#form_login input,
.login_input {
    width: 100%;
    padding: 10px 10px;
    margin: 0 0 10px 0;
    box-sizing: border-box;
    border-radius: 4px;
    border: 1px solid var(--color_header);
    background-color: var(--color_form_inputbg) !important;
    /* font-size: 0.9em; */
    color: #000000 !important;
    appearance:none;
    -webkit-appearance:none;
}
.login_input::placeholder{
    color: var(--color_form_inputbg);           /* colore desiderato */
    opacity: 1;               /* assicura che il colore non sia attenuato in Firefox */
}
/* ----- Opzionale, per maggior copertura browser più vecchi ----- */
.login_input:-ms-input-placeholder{      /* Internet Explorer 10-11 */
    color: #000000;
}
.login_input::-ms-input-placeholder{     /* Microsoft Edge legacy */
    color: #000000;
}
#form_login input:-webkit-autofill,
#form_login input:-webkit-autofill:hover, 
#form_login input:-webkit-autofill:focus,
#form_register input:-webkit-autofill,
#form_register input:-webkit-autofill:hover, 
#form_register input:-webkit-autofill:focus {
    -webkit-text-fill-color: #000000;
    -webkit-box-shadow: 0 0 0px 40rem var(--color_form_inputbg) inset;
}
.login_input_linksotto {
    align-self: flex-end;
    font-size: 0.7em;
    color: var(--color_action);
    margin: 10px 0;
}
.login_input_linksotto:hover {
    text-decoration: underline;
}
#form_login .btn {
    margin: 10px auto 0;
    padding: 10px 40px;
}
.login_sotto {
    font-size: 0.9em;
    color: white;
}
.login_sotto a {
    display: inline-block;
    padding: 10px 24px;
    border-radius: 4px;
    border: none;
    font-size: 1em;
    font-weight: 700;
    margin: 15px 0;
    cursor: pointer;
    background-color: var(--color_action);
    padding: 8px 15px;
    margin: 0 0 0 10px;
}
.login_sotto a:hover {
    background-color: white;
    color: var(--color_action);
}
.login_indietro {
    font-size: 0.8em;
    color: var(--color_action);
}
#figli_data fieldset {
    border: none;
    /*border-bottom: 1px solid var(--color_bg2);*/
    padding: 0px;
    margin: 0 0 10px 0;
}
.figli_data.mod {
    width: 100%;
}
.figlio_data.mod {
    position: relative;
    width: 100%;
}
.btn_figlio_add.mod {
    margin: 0 0 20px 0;
}
#btn_figlio_add,
.btn_figlio_rem {
    display: flex;
    align-items: center;
    font-size: 0.85em;
    cursor: pointer;
    color: white;
}
.btn_figlio_rem {
    justify-content: end;
}
#btn_figlio_add img,
.btn_figlio_rem img {
    height: 30px;
    width: 30px;
    margin: 0 3px 0 0;
}
#btn_figlio_add:hover {
    text-decoration: underline;
}
#ProcessForgotPassword {
    padding: 20px;
    max-width: 500px;
    margin: 0 auto;
}
#ProcessForgotPassword li {
    list-style: none;
}
#step2 .flex.center {
    justify-content: left;
}
#step2 .flex.center .btn {
    margin: 20px 0 0 0;
}


.login-button-container {
    position: relative;
    height: 40px;
    width: 300px;
    box-shadow: 0 3px 6px rgb(0 0 0 / 14%);
    margin: 0 0 10px 0;
    border-radius: 2px;
}

.login-button-overlay {
    pointer-events: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100% !important;
    height: 100% !important;
    background: white;
    z-index: 200;
    display: flex;
    flex-direction: row;
}

.login-button-logo-container img {
    height: 20px !important;
    width: 20px !important;
    margin-right: 15px;
}

.flenter {
    display: flex;
    align-items: center;
    justify-content: center;
}

.Inputfields, .Inputfields .Inputfield, .Inputfields label, .Inputfields input, .Inputfields select, .Inputfields textarea, .Inputfields table {
    font-size: 1em !important;
}
.Inputfields #username,
.Inputfields #Inputfield_verify,
.Inputfields #pass,
.Inputfields #_pass {
    margin: 15px 0 0 0;
    border: 1px solid var(--color_action);
    background-color: transparent;
    padding: 5px 10px;
    border-radius: 2px;
    box-sizing: border-box;
    color: var(--color_action);
}
#submit_forgot,
#submit_reset {
    margin: 0 17px;
    padding: 6px 16px;
    background-color: var(--color_action);
    color: var(--color_blu1);
    font-weight: 600;
    text-transform: uppercase;
    border: none;
    border-radius: 4px;
}

/* ########################## ALERT ########################## */

.alert_container {
	width: 100%;
}
.alert_container.login {
    max-width: 500px;
    margin: 0px;
}
.alert_container.login .alert {
    border-radius: 4px 4px 0 0;
}
.alert_container.home {
    max-width: 400px;
    position: absolute;
    top: 20px;
    left: calc(50% - 200px);
}
.alert {
	display: flex;
    align-items: center;
    justify-content: center;
	font-size: 15px;
	font-weight: 500;
	padding: 15px;
	/* margin: 0 0 20px 0; */
}
.alert.verde {
	background-color: var(--color_verde);
	color: white;
}
.alert.rosso {
	background-color: var(--color_rosso);
	color: white;
}

/* ########################### FOOTER ########################## */

.footer_container {
    display: flex;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto 0 auto;
    font-size: 14px;
    font-weight: 300;
    color: var(--color_gen_testo);
    padding: 30px;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
}
.footer_sx {
    flex-grow: 2;
}
#footer_link {
    display: flex;
    margin: 0 20px 0 0;
}
#footer_link a {
    color: var(--color_gen_link);
}
#footer_link a:hover { color: var(--color_action); }
.footer_dx,
.footer_dx a {
    display: flex;
    align-items: center;
}
.footer_langs_container {
    display: flex;
    margin: 0 10px 0 0;
    gap: 10px;
}
.footer_lang {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--color_action);
    border-radius: 4px;
    color: var(--color_action);
}
.footer_lang:hover,
.footer_lang.active {
    background-color: var(--color_action);
    color: var(--color_bg);
}

/* ########################### CHEKBOX 1 ########################## */

.chekbox_container {
    display: block;
    position: relative;
    padding: 0 10px 0 26px;
    margin-top: 15px;
    cursor: pointer;
    text-transform: none;
    text-align: left;
    letter-spacing: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.chekbox_container input { /* Hide the browser's default checkbox */
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.chekbox_container.register {
    padding: 0 0 0 35px;
    margin: 15px 0;
}
.chekbox_checkmark { /* Create a custom checkbox */
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border-radius: 10px;
    background-color: white;
    border: 1px solid var(--color_action);
}
.chekbox_checkmark.register {
    border-radius: 2px;
    margin: 0 10px 0 0;
}
.chekbox_container:hover input ~ .chekbox_checkmark { /* On mouse-over, add a grey background color */
    background-color: var(--color_action);
}
.chekbox_container input:checked ~ .chekbox_checkmark { /* When the checkbox is checked, add a color background */
    background-color: var(--color_action);
}
.chekbox_checkmark:after { /* Create the checkmark/indicator (hidden when not checked) */
    content: "";
    position: absolute;
    display: none;
}
.chekbox_container input:checked ~ .chekbox_checkmark:after { /* Show the checkmark when checked */
    display: block;
}
.chekbox_container .chekbox_checkmark:after { /* Style the checkmark/indicator */
    left: 7px;
    top: 3px;
    width: 4px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* ########################### CHEKBOX 2 ########################## */

.chekbox_buttons {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.chekbox_button {
    display: inline-block;
    padding: 6px 12px;
    margin: 10px 10px 0 0;
    cursor: pointer;
    border-radius: 15px;
    font-weight: 400;
    font-size: 12px;
    border: 1px solid var(--color_action);
    color: var(--color_action);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.chekbox_button_container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.chekbox_button_container:hover input ~ .chekbox_button { 
    background-color: var(--color_action);
    color: var(--color_bg);
}
.chekbox_button_container input:checked ~ .chekbox_button { 
    background-color: var(--color_action);
    color: var(--color_bg);
}
.chekbox_button_container.all .chekbox_button {
    margin: 0 10px 0 0;
    border: 1px solid var(--color_blu1);
    color: var(--color_blu1);
}
.chekbox_button_container.all .chekbox_button:hover,
.chekbox_button_container.all input:checked ~ .chekbox_button  {
    border: 1px solid var(--color_blu1);
    background-color: var(--color_blu1);
    color: var(--color_action);
}

/* ########################### LOADS ########################## */

.load_container {
    width: 100%;
    padding: 20px;
    background-color: white;
}
.load_titolo {
    width: 100%;
    background-color: var(--color_blu1);
    color: white;
    font-size: 1em;
    padding: 10px;
    margin: 0 0 20px 0;
}
.load_sottotitolo {
    width: 100%;
    background-color: var(--color_bg1);
    color: var(--color_bg3);
    font-size: 0.8em;
    padding: 10px;
    margin: -10px 0 20px 0;
}
.load_sottotitolo.red {
    background-color: var(--color_rosso);
    color: white;
}

/* ########################### SELECTIZE ########################## */

.selectize-input {
    padding: 7px !important;
    height: 37px !important;
    /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.14) !important; */
    box-sizing: border-box !important;
    border-radius: 4px !important;
    background-color: transparent !important;
    border: 1px solid var(--color_action) !important;
}
.selectize-control.multi .selectize-input [data-value] {
    text-shadow: none !important;
    border-radius: 10px !important;
    background-color: var(--color_action) !important;
    color: var(--color_blu1) !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    box-shadow: none !important;
}
.selectize-control.multi .selectize-input>div {
    cursor: pointer;
    margin: 0 3px 3px 0 !important;
    padding: 2px 10px !important;
    background: var(--color_action) !important;
    color: #fff;
    border: none !important;
}


/* ########################### PAGINAZIONE ########################## */

.MarkupPagerNav {
	width: 100%;
    display: flex;
    justify-content: center;
}
.MarkupPagerNav li {
	display: inline;
	list-style: none;
	margin: 0;
}
.MarkupPagerNav li a,
.MarkupPagerNav li .loadTabledata,
.MarkupPagerNav li.MarkupPagerNavSeparator {
	display: block;
	float: left;
	padding: 5px 15px;
	color: #fff;
	background: var(--color_action);
	margin: 0 0 0 3px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
    cursor: pointer;
    border-radius: 10px;
}
.MarkupPagerNav li.MarkupPagerNavOn .loadTabledata,
.MarkupPagerNav li .loadTabledata:hover,
.MarkupPagerNav li a:hover {
	color: #fff;
	background: var(--color_actionh);
	text-decoration: none;
}



/* ########################### TOOLTIP ########################## */

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
  }
  
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
  
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
  }
  
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }


/* ########################### VALIDATOR ########################## */
/*input.error {
	background-color: #907FC0;
	color: white;
}*/
label.error {
	display: block;
	margin: -8px 0 10px 0;
	padding: 5px 10px;
	background-color: darkred;
	border-radius: 10px;
	font-size: 12px;
	color: white;
}

/* ########################### FOTO GALLERY CON FLEX ########################## */
.flexgallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0px;
} 
.flexgallery > li {
    flex: auto;
    height: 250px;
    cursor: pointer;
    position: relative;
}
.flexgallery li img {
    object-fit: cover;
    object-position: center center;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    border-radius: 5px;
}
.flexgallery::after {
    content: "";
    flex-grow: 999;
}
.flexgallery li img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    border-radius: 5px;
}
.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(57, 57, 57, 0.502);
    top: 0;
    left: 0;
    transform: scale(0);
    transition: all 0.2s 0.1s ease-in-out;
    color: #fff;
    border-radius: 5px;
    /* center overlay content */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* hover */
  .image-gallery li:hover .overlay {
    transform: scale(1);
  }

/* ########################### SPECIFICHE X PLUGIN ########################## */

/*Mediaboxes*/
.media-boxes-no-more-entries { display: none; }

/*COOKIEBOT*/
/* Branding on the banner */
a#CybotCookiebotDialogPoweredbyCybot,
div#CybotCookiebotDialogPoweredByText {
  display: none;
}
/* Branding on the widget */
#CookiebotWidget .CookiebotWidget-body .CookiebotWidget-main-logo,
.CookiebotWidget-main-logo {
    display: none !important;
}
/*Widget*/
#CookiebotWidget {
    border-radius: 20px !important; 
    min-width: 38px !important; 
    min-height: 38px !important;
    left: 10px !important;
    bottom: 16px !important;
}
#CookiebotWidget:not(.CookiebotWidget-open) button.CookiebotWidget-logo svg {
    width: 38px !important;
    height: 38px !important;
}




/* ########################### SPECIFICHE X MODIFCA FRONTEND ########################## */

.mfp-iframe-holder .mfp-content {
    width: 100%;
    max-width: 100% !important;
}
/* .mfp-iframe-scaler {
  padding-top: 60% !important;
} */
.mfp-iframe-scaler {
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-top: 50% !important;
}




/* ########################## ABBATTIMENTI ########################## */

.abbattimenti_container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: var(--color_bg);
    color: white;
    border-radius: 4px;
    padding: 10px;
    box-sizing: border-box;
}
.abbattimenti_tot_num {
    font-size: 50px;
}

.abb_chart_wrap { margin: 8px 0 16px; padding: 8px 8px; border-radius: 12px; background: transparent; }

.abb_axis{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:24px;
align-items:stretch;
justify-items:stretch;
padding:8px 4px 12px;
border-bottom:1px solid color-mix(in oklab,var(--color_bg) 70%,white 30%);
}

.abb_groupD{
display:flex; flex-direction:column; position:relative;
min-width:0; width:100%;
padding-left:16px;
border-left:1px solid color-mix(in oklab,var(--color_bg) 70%,white 30%);
}
.abb_groupD:first-child{ border-left:none; padding-left:0; }

.abb_group_content{
display:grid;
grid-auto-flow:column;
grid-auto-columns:minmax(56px,80px);
gap:14px;
justify-content:space-between;
}
.abb_item { display:flex; flex-direction:column; align-items:center; }
.abb_cols_area { position:relative; display:flex; align-items:flex-end; justify-content:center; height:220px; width:26px; }

.abb_stack { position:relative; width:20px; height:100%; border-radius:10px;
background: color-mix(in oklab, var(--color_bg) 25%, white 75%);
box-shadow:
    0 0 0 1px color-mix(in oklab, var(--color_bg) 85%, black 15%),
    0 0 0 2px color-mix(in oklab, var(--color_bg) 30%, white 70%);
overflow:hidden;
}
.abb_fill { position:absolute; left:0; right:0; bottom:0; background:var(--color_header); }

.abb_item.no-disp .abb_stack { opacity:.5; }
.abb_item.no-disp .abb_stack::after {
content: '0 disp.'; position:absolute; top:6px; left:50%; transform:translateX(-50%);
font-size:.7rem; padding:2px 4px; border-radius:6px;
background: color-mix(in oklab, var(--color_bg) 30%, white 70%);
box-shadow: 0 0 0 1px color-mix(in oklab, var(--color_bg) 85%, black 15%);
color:black;
}

.abb_badge {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: .78rem;
line-height: 1.2;
padding: 6px 0 3px 0;
background: none;
border: none;
color: var(--color_header);
font-weight: 600;
pointer-events: none;
white-space: nowrap;
}

.abb_badge.disp { top: -1px; }
.abb_badge.abb  { bottom: calc(var(--h, 0px) - 1px); }

.abb_item.close-max .abb_badge.disp {
top: -14px;
font-size: .72rem;
opacity: 0.9;
}

.abb_group_midtitle { text-align:center; font-weight:700; margin:8px 0 6px; }

.abb_group_labels{
display:grid;
grid-auto-flow:column;
grid-auto-columns:minmax(56px,80px);
gap:14px;
justify-content:space-between;
}
.abb_capolabel { font-size:.7rem; text-align:center; line-height:1.1; word-break:break-word; }

.abb_legend { display:flex; gap:14px; align-items:center; margin-top:8px; font-size:.9rem; opacity:.95; flex-wrap:wrap; }
.abb_leg_item { display:inline-flex; gap:8px; align-items:center; }
.abb_sw { width:14px; height:14px; border-radius:4px; }
.abb_sw.disp { background:color-mix(in oklab, var(--color_bg) 25%, white 75%);
box-shadow: 0 0 0 1px color-mix(in oklab, var(--color_bg) 85%, black 15%),
            0 0 0 2px color-mix(in oklab, var(--color_bg) 30%, white 70%); }
.abb_sw.abb { background:var(--color_header); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color_header) 25%, black 75%); }

@media (max-width:1024px){
.abb_axis{ grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }
.abb_cols_area{ height:200px; }
}
@media (max-width:720px){
.abb_axis{ grid-template-columns:1fr; }
.abb_group_content,.abb_group_labels{ grid-auto-columns:minmax(52px,70px); gap:12px; justify-content:space-between; }
.abb_cols_area{ height:180px; }
}
@media (max-width:420px){
.abb_group_content,.abb_group_labels{ grid-auto-columns:minmax(48px,64px); gap:10px; justify-content:space-between; }
.abb_cols_area{ height:160px; }
}

/* ===== LISTA ABBATTIMENTI PER GIORNO ===== */
.abb_list { margin-top:16px; }
.abb_day_group { margin: 16px 0 20px; }
.abb_day_title {
font-size: .95rem; font-weight: 700; opacity:.9; margin: 0 0 8px;
padding: 6px 8px; border-radius: 8px;
background: color-mix(in oklab, var(--color_bg) 40%, white 60%);
border: 1px solid color-mix(in oklab, var(--color_bg) 75%, black 25%);
position: sticky; top: 0.25rem; z-index: 1;
}
.abbattimento_item { padding: 8px 6px; border-bottom: 1px dashed color-mix(in oklab, var(--color_bg) 75%, black 25%); }
.abbattimento_item:last-child { border-bottom: none; }
.abbattimento_text { font-size: .95rem; line-height: 1.35; }

@media (max-width:720px){
.abb_day_title { position: static; margin-bottom:6px; padding:6px 8px; }
.abbattimento_item { padding: 8px 4px; }
.abbattimento_text { font-size: .95rem; }
}













/* ########################## COOKIE BANNER ########################## */

.privacywire.privacywire-banner,
.privacywire.privacywire-options {
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-color: hsla(0, 0%, 0%, 0.9);
    color: white;
}
.privacywire-body {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.privacywire-buttons button {
    background-color: white;
    color: var(--color_titolo);
    font-weight: 600;
    text-transform: uppercase;
    border: none;
    border-radius: 4px;
    padding: 10px 15px;
    cursor: pointer;
    margin: 0 5px 5px 0;
}