.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{vertical-align: middle;}

:root {
    --verde: #0DA485;
    --scuro: #0DA485;
    --chiaro: #d6fd44;
}

hr{border-top: 1px solid #cfcfcf;}

.att:before {
	background: url(https://junker.blob.core.windows.net/cruscotto/img/attrezzature.png) center center no-repeat;
}

/* ACCESSIBILITA' */

/* Focus visibile da tastiera (WCAG 2.4.7). :focus-visible non si attiva con il click del mouse.
   Anello nero con alone bianco: resta visibile sia su sfondi chiari che scuri.
   !important perche' diverse regole (anche in pagina e nei css da blob) azzerano l'outline. */
:focus-visible {
    outline: 2px solid #000 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px #fff;
}

/* elementi che ricevono il focus solo via script (es. <main> dallo skip link): niente anello */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible {
    outline: none !important;
    box-shadow: none;
}

/* Link "Salta al contenuto principale" (WCAG 2.4.1): fuori schermo finche' non riceve il focus */
.skip-link {
    position: absolute;
    left: 10px;
    top: -100px;
    z-index: 10000;
    padding: 10px 20px;
    background: #fff;
    color: #000;
    border: 2px solid #000;
    border-radius: 8px;
    font-weight: 600;
}
.skip-link:focus {
    top: 10px;
    color: #000;
}

.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover{
    background-color: var(--verde);
    border-color: var(--verde);
}

table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after{
    top: 3px;
}

.modal-body{padding: 20px;}

.marg_0, h1.marg_0 {
    margin: 0;
    margin-bottom: 0;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
}

label{white-space: nowrap;}

.main-row {
	display: grid;
	grid-template-columns: auto 1fr;
	min-height: 100%;
	position: relative;
	gap: 10px;
}

/* solo figlio diretto: il menu laterale. Le pagine possono avere altri <nav> nel contenuto (es. .nuovi_tab di SuiteCompostAdm) */
.main-row > nav {
	height: 100vh;
	position: sticky;
	top: 20px;
	width: 70px;
	z-index: 999;
}

/* menu laterale nascosto (una sola voce): niente colonna vuota a sinistra */
.main-row.no_menu{grid-template-columns: 1fr;}
.main-row.no_menu > nav{display: none;}

.btn-info{background-color: var(--verde); border: 1px solid #338f73; border-radius: 8px;}

.navigation {
	display: flex;
	gap: 3px;
	flex-direction: column;
	height: auto;
	min-height: auto !important;
	width: 50px;
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
	transition: width .3s cubic-bezier(.77,0,.18,1);
	z-index: 998;
	border-radius: 0;
	margin-left: 10px;
	background-color: #FFF;
}

/* :focus-within = il menu si apre anche navigando con Tab, non solo col mouse */
.navigation:hover, .navigation:focus-within{width: 300px;}

.navigation a{color: #000; border-radius: 10px;}
/* anello interno: .navigation ha overflow hidden e taglierebbe l'anello esterno */
.navigation a:focus-visible{outline-offset: -3px !important; box-shadow: none;}
.navigation a:before{-webkit-filter: invert(100%); filter: invert(100%);}
.navigation a:hover{background-color: #f3f3f3;}

.main-row main {
	background-color: #f3f3f3;
	box-shadow: 0 0 15px #00000012;
	border: 1px solid #e1e1e1;
	border-radius: 10px;
	overflow: hidden;
	margin-right: 10px;
	margin-bottom: 20px;

}

.main-content {
	padding: 20px;
	width: 100%;
	position: relative;
	background-color: #f3f3f3;
}


.header-row{
	height: 80px;
	align-items: center;
	padding: 20px;
}

.logo_header{padding-top: 0;}

.customer-container{gap: 10px;}
.customer-container select, .customer-container span{max-width: 200px;}

.form-control{border: 1px solid #cbcbcb;}
.form-horizontal .btn-primary{margin: 0;}

.btn{font-size: 14px; font-weight: 500; padding: 10px 20px; border-radius: 8px;}
.btn-primary{background-color: var(--verde); color: var(--bianco); border-radius: 8px;}
.btn-primary, .btn-default{border-radius: 8px; margin: 0;}
.btn-danger{background-color: #d93229;}

.glyphicon{top: 0;}

.storico_cnt button, .storico_cnt a{display: flex;gap: 5px; align-items: center;}

.section_title a{border-radius: 8px; overflow: hidden;}


#login_cnt .btn-primary{
    background-color: #000;
    margin-bottom: 20px;
}


/* STATISTICHE */

#territorio_left{width: 100%;}

.month{font-weight: 700;}

h1.heading{justify-content: flex-start; gap: 15px;}
.heading small{margin-left: auto;}

.dati_demografici{width: 66%;}


/* CALENDARIO */

.header_calendario{display: flex; justify-content: space-between; margin: 0 !important;}
.header_calendario:before{display: none; content: none;}
.sel_comune_cal{width: 300px; padding: 0;}
.switch_cal_mese{width: 100%; padding: 10px 0; margin-top: 5px; border-radius: 8px; background-color: var(--bianco);}
.switch_cal_tools{padding: 0; width: 100%; display: flex; justify-content: flex-end;}
.calendario_switch{align-items: center;}
.storico_cnt{padding: 0;}

.legenda_rifiuto{align-items: flex-start; gap: 7px; padding: 10px 5px;}
.legenda_rifiuto img{width: 30px; background-color: #00000045; border-radius: 50%; padding: 3px;}

.mensile, .mesi_cnt {
    padding-left: 10px;
    padding-right: 10px;
    background-color: var(--bianco);
    border-radius: 8px;
}

.giorno_singolo span.giorno_numero.oggi_sel {
    background: var(--secondario);
    border-radius: 50%;
    color: #000000;
    padding: 14px;
}

.legenda{padding: 10px 0 0 0;}

.giorno_singolo, .giorno_cnt{ border: none; box-shadow: 0 0 0 0.25px #adadad;}
.mese{border: 1px solid #b7b7b7;}



/* MESSAGGI */

.messaggi_tab{
    display: flex;
    margin: 20px 0;
    width: 100%;
    align-items: center;
    justify-content: stretch;
}

.tab{
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    border: none;
    padding: 10px;
    border-bottom: 1px solid #cbcbcb;
    font-family: "DM Sans", sans-serif;
    color: #000;
}
.tab.selez{background: transparent; color: var(--verde); border-bottom: 2px solid var(--verde);}
.tab.first {
              border-radius: 0;
              border-right: none;
          }

.tab.last {
    border-radius: 0;
    border-left: none;
}

.msg_table>tbody>tr>td{
    padding: 20px 8px;
    vertical-align: middle;
}

.msg_table>tbody>tr:nth-child(odd){
    background: #f9f9f9;
}

.link_tabella a{padding: 0;}


.alert-info {
    color: #000;
    background-color: var(--secondario);
    border-color: #e3e3e3;
}

.lang_row{margin-top: 10px;}

.lang_row .btn-primary, .lang_row .btn-default {
    margin-right: 5px;
    padding: 8px 12px;
    border-radius: 5px 5px 0 0;
}

.tabs_switch_lang .btn-default{
    border-radius: 3px 3px 0 0;
    border-bottom: none;
    background-color: #e9e9e9;
}

.orangeb, .orangeb:hover {
    background: var(--secondario);
    color: #000;
    border: 1px solid #000;
}

.go_back_cnt{
    margin-bottom: 10px;
}

.go-back-link{
    color: var(--verde);
    font-weight: 600;
    font-size: 15px;
}

.info_pubblicazione{
    display: flex; align-items: center; gap: 10px;
}

.img_copertina_mess{
    background-color: #FFF;
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
    display: inline-block;
}

.img_copertina_mess_in{
    display: flex;
    flex-direction: column;
    gap: 10px;

}

.tab_switch_lang_in{background-color: #FFF; padding: 20px; border-radius: 0 8px 8px 8px;     border: 1px solid #ccc;
border-top: none;}



.tabs_switch_lang .orangeb, .tabs_switch_lang .orangeb:hover {
    border: 1px solid #ccc;
    border-bottom: none;
    background: var(--secondario);
    border-radius: 5px 5px 0 0;
}

/* PUNTI DI INTERESSE */

.selects_poi button {
    margin: 0 !important;
}

.selects_poi .bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark {
   position: relative;
   margin: 0;
   margin-left: auto;
}

.selects_poi .dropdown-menu>li>a {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    gap: 5px;
}


.form_coord{display: flex; align-items: center; justify-content: space-between;}




/* SEGNALAZIONI AMBIENTALI */

.tab-content {
    background: #FFF;
    padding: 20px;
    border-radius: 0 8px 8px 8px;
    border: 1px solid #e3e3e3;
    border-top: none;
}

#reports_table_wrapper, #reports_table_extra_area_wrapper{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    align-items: center;
}

.tab_config_sentinella #reports_table_wrapper{display: block; margin-top: 20px;}

.dt-top-buttons{grid-column: span 2;}
.dt-top-paging, .dt-processing, .dt-table{
    grid-column: span 4
}

.dt-bottom-info{grid-column: span 2;}
.dt-bottom-paging{grid-column: span 2;}

.dt-table{overflow-x: auto;}

#reports_table_wrapper .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
    padding: 3px
}

#reports_table_wrapper .table>tbody>tr>td a{font-size: 12px;}


.label_container .label{font-size: 14px;}

#reportMessages blockquote{background-color: #fff; border-left: 5px solid var(--verde);}
#reportMessages .label{font-size: 14px;}

.report-details .form-group{padding-bottom: 15px; border-bottom: 1px solid #d3d3d3;}
.report-details img, .img-preview{
    border-radius: 8px;
    border: 1px solid #cfcfcf;
}

.tabella_squadre{margin-bottom: 40px; overflow-x: auto;}
.tabella_utenti{margin-top: 40px; overflow-x: auto;}

.head_sq_ut{display: flex; gap: 10px; align-items: center; margin-bottom: 10px;}

.tabella_squadre .table, .tabella_utenti .table{width: 100% !important;}


/* BACHECA */

#tbl_annunci_wrapper .col-sm-12 {
    overflow-x: auto;
}

#tbl_annunci_wrapper .row{display: flex; align-items: center; margin: 10px 0;}

.head_bach{display: flex; align-items: center; gap: 10px;}

.btn-primary.active, .btn-primary.active:active, .btn-primary.active:focus, .btn-primary.active:hover{
    background-color: var(--secondario) !important;
    box-shadow: none !important;
    color: #000 !important;
}

.head_bach .btn-primary{background-color: #a3a3a3;}

.link_txt{display: none; right: auto; left: 0;}

.link_cnt .img_preview{
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    overflow: hidden;
}



/* RITIRO INGOMBRANTI */


.bottoni_ritiro{display: flex; align-items: center; gap: 5px; justify-content: flex-start; flex-direction: row-reverse;}
.swiper-button-next, .swiper-button-prev{
    color: var(--verde);
}

.swiper-slide.today .day_info:after{background: var(--verde);}
.swiper-slide{background-color: #FFF;}
.swiper-slide-active {
    background-color: #EDFFF7;
}

.summary_cnt{background: #FFF; border-radius: 8px;}

.punti_attenzione .glyphicon {margin-right: 5px;}

.punti_attenzione{background: #ff373712;}

.marker_info_cnt{
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: #FFF;
}

.marker_info_cnt div{
    display: flex;
    align-items: center;
    gap: 5px;
}

.marker_info_rifiuto_cnt{
    flex-direction: column;
    align-items: flex-end;
}
.marker_info_app_cnt{flex-direction: column; border-radius: 8px; padding: 5px; gap: 0;}

.rifiuto_lbl{white-space: normal;}

.marker_info_orario_cnt a{margin: 0;}

.flex_ritiro{display: flex; gap: 10px; padding: 0 15px;}

.flex_ritiro .col-sm-4, .flex_ritiro .col-sm-8{padding-left: 0; padding-right: 0;}

.flex_ritiro .col-sm-4{min-width: 350px;}

.map_cnt{border-radius: 8px;}

.summary_count{
    display: block;
        font-size: 16px;
        font-weight: 700;
        line-height: 1;
        color: var(--verde);
        margin-top: 3px;
}


.flex_modal_ritiro{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.flex_modal_ritiro .form-control-static{
    padding-top: 0;
}

#qrcode{width: 180px;}
#qrcode canvas, #qrcode img{width: 100% !important; height: auto !important;}
.qr_txt{width: 180px;}


.btn_segnala_contattato, .btn_segnala_contattato:hover, .btn_segnala_contattato:focus{
    background: var(--verde);
    color: #FFF;
    white-space: nowrap;
    padding: 5px 10px;
}


.btn-xs{
    font-size: 11px;
    padding: 4px;
    border-radius: 5px;
}

.modal_count{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: var(--scuro);
}

.sposta_orario select.form-control{height: 42px;}

/* RITIRI SPECIALI */


.moduli_ritiro{max-height: calc(100vh - 180px); gap: 10px;}
.head_attivita{gap: 5px;}
.head_attivita h3{font-size: 16px; line-height: 1;}
.richieste_cnt h4{font-size: 18px;}
.numero_richieste{align-items: center;}
.numero_richieste h2{font-size: 18px;}
.numero_richieste span{background-color: var(--verde);}
.bottone_verde{background: var(--verde);}
.lista_richieste_cnt{background: rgb(99 99 99 / 50%);}
.info_richiesta h4{font-size: 16px;}
.info_richiesta h3{font-size: 18px;}
.modulo_calendario{background-color: #FFF;}
.header_calendario{flex-direction: column;}
.colonna_giorno .mese{color: var(--secondario); border: none;}
.colonna_giorno_oggi .giorno_n{background: var(--secondario);}
.curr_day{font-size: 18px; line-height: 1;}
.ritiro_cnt{
    background: #f9f9f9;
    box-shadow: 1px 1px 6px #0000001c;
}
.all_ritiri_cnt{padding: 10px;}
.codice_orario h2{font-size: 21px;}
.ritiro_dett{padding: 0 10px; flex: 3;}
.ritiro_dett_in{justify-content: space-between;}
.ritiro_dett_in h3{font-size: 18px;}
.ritiro_cnt{margin: 5px 0;}
.filtri_mappa{background: #FFF;border-radius: 0 8px 0 8px; border: 1px solid #d1d1d1;}
.strumenti_giorno_ritiri{margin-top: 10px;}




/* VERBALE ACCERTAMENTO */

.head_btn_verbale{
    display: flex;
    align-items: center;
    gap: 10px;
}

.verb_cnt{padding: 20px; background-color: #FFF; border-radius: 0 8px 8px 8px; border: 1px solid #d1d1d1; border-top: none;}
.nav-tabs>li>a{margin-right: 0;}

.operatori_btns{margin-top: 5px; display: flex; flex-wrap: wrap;gap: 5px;}



/* JUNKER ACTIONS */

.input_field select, .input_field input, .input_field textarea{border: 1px solid #b7b7b7; color: #333;}
.input_field label{color: #333;}
.range-value span{padding: 4px 8px; width: auto;}
.main_menu_cnt span{border-radius: 8px 8px 0 0;}
.main_menu_cnt .main_menu_sel{box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1);}

.tabella_anagar_x{overflow-x: auto;}

.anagr_section_title{text-transform: capitalize;}

.campo_foto_img img{object-fit: cover; border-radius: 8px;}
.action_button img{filter: invert(1);}

.action_button.action_button_padding{padding: 5px 10px;}


.sub_menu_cnt a{padding: 10px 15px;}
.sub_menu_cnt .sub_menu_sel:after{left: 0; right: 0;}

#tbl_azioni_lista_wrapper{overflow: hidden;}
#tbl_azioni_lista_wrapper .col-sm-12{overflow-x: auto;}

.pagina_azioni_header a{font-size: 14px;}

.tab_azioni_azioni{overflow: hidden;}
.overflow-x{overflow-x: auto;}

.pagina_azioni_header a{padding: 7px 12px;}

#tbl_campagne_wrapper .col-sm-12{overflow-x: auto;}

.scheda_campagna h1{color: #000;}

.strumenti_campagna button{padding: 10px 20px;}

.switch_cestinati a{font-weight: 500;}



.table_documenti{overflow-x: auto;}

/* RICHIESTA SERVIZI AGGIUNTIVI */

.richieste_tab_cnt{background-color: #FFF; padding: 20px; border-radius: 0 8px 8px 8px;  border: 1px solid #d1d1d1; border-top: none;}

.header_btns_richieste{display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;}

.form_servizi_agg{max-width: 970px;}

.head_rich{display: flex; gap: 10px; justify-content: flex-end;}

.head_rich_data{display: block; text-align: right;}

.form_utente label{white-space: normal;}
.flex_column_rich .form-control-static{display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 5px;}




/* KIT COMUNICAZIONE */

.kit_com_table .preview_img{width: 200px;}
.kit_com_table .preview_img img{border-radius: 8px;}
    .kit_com_table td{width: auto !important;}
    .kit_com_table .link{text-align: right; min-width: auto;}
    .kit_com_table .link a{display: inline-block; max-width: 200px; padding: 5px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-color: #fff; border-radius: 8px; border: 1px solid #d1d1d1;}

    .text_kit_com{min-width: 250px;}




/* HOMEPAGE */


.tabella_homepage table,
.tabella_homepage thead,
.tabella_homepage tbody,
.tabella_homepage tfoot,
.tabella_homepage tr,
.tabella_homepage th,
.tabella_homepage td {
    display: block;
    width: auto;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
    border: none;
    border-top: none !important;
    border-collapse: inherit;
    border-spacing: 0 !important;
    border-color: inherit;
    text-align: left;
    font-weight: inherit;
    -webkit-border-horizontal-spacing: 0;
    -webkit-border-vertical-spacing: 0;
}
.tabella_homepage th,
.tabella_homepage td {
    display: inline;
}

.tabella_homepage{margin-bottom: 40px;}

.tabella_homepage tbody{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 40px;
}

.tabella_homepage tr{
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border-radius: 8px;
    box-shadow: 1px 1px 10px #0000001f;
    border: 1px solid #bdbdbd;
}

.tabella_homepage tr .section_title, .tabella_homepage tr .section_title a{width: 100% !important;}
.tabella_homepage tr .section_title a img{width: 100% !important; height: 100%; object-fit: cover; object-position: top;}
.tabella_homepage tr .section_title a{border-radius: 8px 8px 0 0;}

.tabella_homepage tr td:nth-child(2){
    padding: 10px 25px !important;
    width: 100% !important;
}

.tabella_homepage tr .link{display: none;}

.tabella_homepage tr .section_title a{height: 280px; border-bottom: 5px solid var(--secondario);}

.tabella_homepage h4{color: var(--verde);}

.main-content:has(.tabella_homepage){
    padding: 20px 40px;
}


.manuali_cruscotto table{
    background-color: #fff;
    border-radius: 8px;
}

.manuali_cruscotto .link{text-align: right; min-width: auto;}
.manuali_cruscotto .link a{display: inline-block;padding: 5px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-color: #fff; border-radius: 8px; border: 1px solid #d1d1d1;}
.manuali_cruscotto td{padding: 10px 20px !important; border-top: none !important;}
.manuali_cruscotto tbody{
    box-shadow: 1px 1px 10px #0000001f;
}
.manuali_cruscotto tr{border-bottom: 1px solid #cfcfcf;}


/* RESPONSIVE */

@media (min-width: 1400px) {

    .main-row > nav{width: 320px;}
    .navigation{width: 300px;}

}

@media (max-width: 1024px) {

    .main-row{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .main-row > nav {
	height: 30px;
	position: relative;
	top: 20px;
	width: 100%;
	max-width: 100vw;
	z-index: 999;
    }


    .navigation {
	display: flex;
	gap: 5px;
	flex-direction: row;
	height: auto;
	min-height: auto !important;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	overflow: hidden;
	transition: width .3s cubic-bezier(.77,0,.18,1);
	z-index: 998;
	border-radius: 0;
	margin-left: 0;
	padding: 0 20px 0 10px;
	background-color: #FFF;
	overflow-x: auto;
	scrollbar-width: none;
    -ms-overflow-style: none;
    }
    .navigation::-webkit-scrollbar {
        display: none;
      }

    .navigation:hover, .navigation:focus-within{width: auto;}

    .navigation a{color: #000; background-color: #f3f3f3; border-radius: 10px; white-space: nowrap; width: auto; gap: 5px; height: auto; padding: 5px 10px;}
    .navigation a:before{-webkit-filter: invert(100%); filter: invert(100%); min-width: auto; width: 25px;}
    .navigation a:hover{background-color: #f3f3f3;}

    .main-row > nav:before{content: ""; width: 40px; height: 100%; position: absolute; right: 0; top: 0; pointer-events: none; background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80%); z-index: 999;}

    .main-row main{margin: 20px auto; width: 98%;}

    .dt-top-buttons{grid-column: span 4;}
    .dt-top-length{grid-column: span 3;}
    .dt-top-filter{grid-column: span 1;}

    .stato_pub_resp{width: 100%; margin-bottom: 20px;}

    .bottoni_ritiro{width: 100%; justify-content: flex-end; margin-top: 10px;}

#tbl_azioni_lista_wrapper .col-sm-6, #tbl_azioni_lista_wrapper .col-sm-5, #tbl_azioni_lista_wrapper .col-sm-7{width: 100%;}
div.dataTables_wrapper div.dataTables_filter{text-align: left;}

.pagina_azioni{grid-template-columns: minmax(300px, 750px) minmax(280px, 640px);}

.header_btns_richieste{flex-direction: column; gap: 15px; align-items: flex-start;}

.tabella_homepage tbody{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.cell_overflow{max-width: 400px;}

}