/*
 * Base structure
 */

/*@import url('https://fonts.googleapis.com/css?family=Noto+Sans');*/

/* noto-sans-regular - latin-ext */
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 400;
    src: url('noto-sans-v7-latin-ext-regular.eot'); /* IE9 Compat Modes */
    src: local('Noto Sans'), local('NotoSans'), url('noto-sans-v7-latin-ext-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('noto-sans-v7-latin-ext-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('noto-sans-v7-latin-ext-regular.woff') format('woff'), /* Modern Browsers */
    url('noto-sans-v7-latin-ext-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('noto-sans-v7-latin-ext-regular.svg#NotoSans') format('svg'); /* Legacy iOS */
}

:root {
    /* Colori sezioni base */
    --color-admin: #004c99;
    --color-demografici: #94D12B;
    --color-finanza: #F43E55;
    --color-tributi: #29DCE0;
    --color-affarigenerali: #F99519;
    --color-scuola: #ff4de1;
    --color-territorio: #FFEC0A;
    --color-personale: #AB6FFF;
    --color-blue-info: #29DCE0;
    --color-disabled: #e0e0e0;
    --color-disabled-text: #495057;
    --color-scadenza: #ffc107;
    --color-scaduto: #dc3545;
    --color-black: #000000;
    --color-dark: #212529;
    --color-main-blue: #004082; /*colore della barra superiore di hypersic l'ho usato per colorare il bottone on top e testo accordion*/
    --color-main-blue-light: #e9f4f9;
    /* Palette colori light per intestazioni */
    --color-admin-light: #d5e5ff;
    --color-demografici-light: #EAFCCE;
    --color-finanza-light: #FFF2F3;
    --color-tributi-light: #F2FEFF;
    --color-affarigenerali-light: #FFF8F2;
    --color-scuola-light: #f7eef6;
    --color-territorio-light: #FFFAE5;
    --color-personale-light: #F7F2FF;
    --color-alert-warning: #ffc107;
    --color-alert-primary: #0d6efd;
    /* colori per accordion */
    --border-radius: 10px;
    --color-body-background: #f8fafc;
}

body {
    font-family: "Noto Sans", Geneva, Tahoma, sans-serif;
}

body.home {
    padding-top: 0px;
}

/* hyperSIC.Browser */

.hsbrowsermodule {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    float: left
}

.hsbrowsertext {
    vertical-align: middle;
}

.hsbrowserprocedura {
    color: #666666;
    font-style: italic;
    font-weight: bold;
    display: block;
}

.hsbrowserdescrizione {
    color: #AAAAAA;
    font-size: 0.7em;
    display: block;
}

/* End hyperSIC.Browser */

/* navbar */

.hs-navbar.navbar {
    min-height: 60px;
}

.hs-navbar.navbar .navbar-header img {
    height: 2em;
    border-radius: 4px;
}

.navbar-left {
    margin-left: 15px !important;
}

.navbar-right {
    margin-right: 15px !important;
}

.navbar-inline {
    display: inline-block;
}

/* User Menu */

.navbar-user-dropdown-menu {
	position: absolute !important;
	left: auto !important;
	border-radius: 2px;
	font-size: 0.9rem;
}

.navbar-user-dropdown-menu > li > a {
	padding: 0.25rem 1rem;
	width: 100%;
	display: block;
	color: #000000;
	text-decoration: none;
}

.navbar-user-dropdown-menu > li:hover{
	background-color: #eee;
}

/* Procedure Menu */

.navbar-toggler {
	width: 50px;
	height: 100%;
	border: 0px;
	--bs-navbar-toggler-focus-width: 0px;
}

.navbar-nav {
	font-size: 0.9rem;
	--bs-navbar-hover-color: #ffffff;
}

.navbar-nav > li > a:hover,
.navbar-nav > li > a.show {
	background-color: #eee;
	color: #000000 !important;
}

.navbar-nav > li > a.visited {
	color: #ffffff !important;
}

/* refaccoring  10.5 */

body.bg-landing {
    background-color: var(--color-body-background);
}

/* --- CONTENITORE DASHBOARD --- */
.dashboard-wrapper {
    flex: 1;
    padding: 15px 20px;
    overflow-y: auto;
    width: 100%;
}

/* --- BANNER BENVENUTO --- */
.welcome-banner {
    background: white;
    border-radius: var(--border-radius);
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    padding: 10px 25px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* --- RESPONSIVE BANNER BENVENUTO --- */
@media (max-width: 767.98px) {
    .welcome-banner {
        padding: 10px 15px;
        margin-bottom: 15px;
    }

    .banner-text h2 {
        font-size: 18px;
    }

    .banner-text p {
        font-size: 14px;
    }
}

.banner-logo { width: 200px; display: flex; align-items: center; gap: 12px; }
.banner-logo-cloud{ width: 126px; display: flex; align-items: center; gap: 8px; }
.banner-logo i { font-size: 40px; color: var(--color-blue-info); }
.banner-logo span { font-size: 20px; line-height: 1; color: #444; }

.banner-text { flex: 1; text-align: center; }
.banner-text h2 { margin: 0 0 4px 0; font-size: 24px; font-weight: 500; color: #222; } 
.banner-text p { margin: 0; font-size: 16px; color: var(--text-muted); }

/* --- STILI PER LA NUOVA CARD AGGIORNAMENTI (BANNER) --- */

    .updates-card {
        background-color: #fff;
        border: 1px solid #e0e0e0;
        border-left: 4px solid #d32f2f;
        border-radius: 8px;
        padding: 8px 25px;
        text-align: center;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100px;
        transition: transform 0.2s, box-shadow 0.2s; /* Effetto hover */
    }

        /*zona novità nel welcome banner*/
        .updates-card:hover {
            transform: scale(1.035);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

    .updates-title {
        font-size: 11px;
        font-weight: 700;
        color: #d32f2f;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .updates-count {
        font-size: 24px;
        font-weight: 900;
        color: #909090;
        line-height: 1;
        margin: 4px 0;
    }

    .updates-label {
        font-size: 12px;
        color: black;
    }


    /* --- FINE BANNER BENVENUTO --- */

    /* --- BARRA DI RICERCA CUSTOM --- */
    .search-wrapper {
        position: relative;
        max-width: 600px;
        margin: 0 auto;
    }

    .search-input {
        width: 100%;
        padding: 14px 20px 14px 45px;
        font-size: 16px;
        border-radius: 30px;
        border: 2px, solid, #428BCA;
        background-color: #f8fafc;
        outline: none;
        transition: all 0.25s ease;
        color: #1e293b;
    }

        /* Effetto quando si clicca dentro */
        .search-input:focus {
            border-color: var(--color-main-blue);
            background-color: #ffffff;
            box-shadow: 0 0 0 4px rgba(67, 43, 209, 0.15); /* Bagliore azzurrino/viola */
        }

    /* Icona della lente */
    .search-wrapper i {
        position: absolute;
        left: 18px;
        top: 50%;
        transform: translateY(-50%);
        color: #64748b;
        font-size: 18px;
        transition: color 0.25s ease;
        pointer-events: none; /* Impedisce che il clic sull'icona blocchi il focus sull'input */
    }

    /* Colora l'icona quando la barra è selezionata */
    .search-input:focus + i {
        color: var(--color-admin);
    }
    /* --- fine BARRA DI RICERCA CUSTOM --- */

    /* --- LAYOUT DUE COLONNE (SIDEBAR MAGAZINE A SINISTRA + GRIGLIA) --- */
    .dashboard-main-layout {
        align-items: flex-start;
    }

    /* --- GRIGLIA 4 COLONNE X 2 RIGHE --- */

    .column-section {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .section-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        padding-bottom: 10px;
        padding-top: 10px;
        padding-left: 14px;
        border-bottom: 2px solid #ddd;
        margin-bottom: 5px;
        border-top-left-radius: var(--border-radius);
        border-top-right-radius: var(--border-radius);
        color: rgb(40, 40, 40);
    }

    /* --- LAYOUT DUE COLONNE (SIDEBAR MAGAZINE A SINISTRA + GRIGLIA) --- */
    .dashboard-main-layout {
        align-items: flex-start;
    }

    @media (min-width: 1200px) {
        .magazine-sidebar-width {
            width: 280px;
        }
    }

    @media (min-width: 1600px) {
        .magazine-sidebar-width {
            width: 316px;
        }
    }


    /*sezione per card dentro sezione magazine*/

    /*titolo magazine*/
    div.magazine-title {
        text-transform: uppercase;
        padding: 10px 14px;
        border-bottom: 2px solid var(--color-main-blue-light) !important;
        background-color: var(--color-main-blue);
        border-top-left-radius: var(--border-radius);
        border-top-right-radius: var(--border-radius);
        color: var(--color-main-blue-light);
    }

        div.magazine-title h3 {
            font-size: 1.25rem;
            font-weight: 600;
            margin: 5px 0px !important;
        }

    /* --- STILI CARD GENERICI --- */
    .card-magazine {
        padding: 0px 0px 10px 0px;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        box-shadow: 0px 3px 5px 1px var(--color-disabled, rgba(0,0,0,0.1));
        border-radius: var(--border-radius);
    }

    /* --- STILI SPECIFICI NEWS/MAGAZINE --- */
    .news-item {
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
        height: auto;
        transition: all 0.1s;
    }

    .news-img {
        width: 100%;
        height: 130px;
        background-color: #2c4463;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 30px;
        position: relative;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

    .news-content {
        padding: 0px 12px 12px 12px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

        .news-content h3 {
            font-size: 17px;
            margin: 0 0 6px 0;
            font-weight: 700;
            color: #333;
        }

        .news-content p {
            font-size: 13px;
            margin: 0;
        }

    /*fine sezione dentro card magazine*/

    /* 1. Mappatura dinamica delle variabili per ogni tema */
    /* I nomi delle classi sono quelli generati dal nostro Code-Behind */
    .theme-admin {
        --theme-color: var(--color-admin);
        --theme-light: var(--color-admin-light);
    }

    .theme-demo {
        --theme-color: var(--color-demografici);
        --theme-light: var(--color-demografici-light);
    }

    .theme-finance {
        --theme-color: var(--color-finanza);
        --theme-light: var(--color-finanza-light);
    }

    .theme-general {
        --theme-color: var(--color-affarigenerali);
        --theme-light: var(--color-affarigenerali-light);
    }

    .theme-tributes {
        --theme-color: var(--color-tributi);
        --theme-light: var(--color-tributi-light);
    }

    .theme-personnel {
        --theme-color: var(--color-personale);
        --theme-light: var(--color-personale-light);
    }

    .theme-tech {
        --theme-color: var(--color-territorio);
        --theme-light: var(--color-territorio-light);
    }

    .theme-education {
        --theme-color: var(--color-scuola);
        --theme-light: var(--color-scuola-light);
    }

    .theme-default {
        --theme-color: #6c757d;
        --theme-light: #f8f9fa;
    }

    .theme-disabled {
        --theme-color: var(--color-disabled);
        --theme-light: #f8f9fa;
    }


    /* 2. Stili Strutturali Condivisi (Ereditano --theme-color e --theme-light in automatico) */

    .area-section-header {
        font-size: 16px;
        font-weight: 700;
        text-transform: uppercase;
        padding: 10px 14px;
        border-bottom: 2px solid var(--theme-color) !important; /* Colore dinamico */
        background-color: var(--theme-light); /* Colore dinamico light */
        border-top-left-radius: var(--border-radius);
        border-top-right-radius: var(--border-radius);
    }

        .area-section-header i {
            color: var(--theme-color); /* Icona titolo colorata */
        }

    .procedure-card {
        background: #ffffff;
        border: 1px solid #bbb; /*var(--theme-color)*/
        /*border-top: 3px solid var(--theme-color)*/
        border-radius: 8px;
        transition: all 0.2s ease-in-out;
    }

        .procedure-card:hover {
            transform: scale(1.035);
            --hover-shadow-color: color-mix(in srgb, var(--theme-color) 40%, transparent);
            box-shadow: 0px 3px 6px 0px var(--hover-shadow-color);
            background-color: var( --theme-light) !important;
        }

    .procedure-icon-badge {
        color: var(--theme-color);
        width: 36px;
        height: 36px;
        border-radius: 6px;
        flex-shrink: 0;
        font-size: 25px;
    }

    .procedure-card-text p {
        color: var(--text-muted);
        line-height: 1.2;
    }

    a.procedure-card.c-disabled {
        opacity: 0.85;
        cursor: default;
        pointer-events: none;
        background-color: var( --color-disabled) !important;
    }

        a.procedure-card.c-disabled .procedure-icon-badge {
            color: var(--color-disabled-text);
        }


    /* Pillole delle card */
    .pill {
        font-size: 0.7rem;
        display: inline-block;
        padding: 6px 16px;
        border-radius: 50px;
        font-weight: bold;
        white-space: nowrap;
    }

        .pill.pill-warning {
            background-color: var(--color-scadenza);
            color: rgb(0, 0, 0);
            border: 1px solid var(--color-scadenza);
        }

        .pill.pill-danger {
            background-color: var(--color-scaduto);
            color: #ffffff;
            border: 1px solid var(--color-scaduto);
        }

        .pill.pill-attivare {
            background-color: white;
            color: var(--color-dark);
            border: 1px solid var(--color-main-blue); /* border border-primary (usando il blu di hypersic) */
        }

        .pill.pill-black {
            color: var(--color-black);
        }

    .mb-4-half {
        margin-bottom: 2.25rem !important; /* Circa 36px */
    }

    /* modifica colori accordion */
    .accordion .accordion-item .accordion-header button.accordion-button {
        background-color: #d2e5ed;
        color: var(--color-main-blue);
    }

    /* --- Bbottone torna in cima --- */
    #btnBackToTop {
        position: fixed;
        bottom: 30px;
        right: 30px;
        display: none;
        z-index: 9999;
        width: 50px;
        height: 50px;
        justify-content: center;
        align-items: center;
        background-color: var(--color-main-blue);
        color: white;
        transition: transform 0.2s ease-in-out;
    }

        #btnBackToTop:hover {
            transform: scale(1.1);
        }

    /* --- SEZIONE 4 CARD AGGIUNTIVA --- */
    .header-cards-grid {
        margin-bottom: 30px;
    }

    .header-card-item {
        background-color: var(--card-bg);
        border-radius: var(--border-radius);
        border: 1px solid var(--color-main-blue);
        border: 1px solid var(--color-main-blue);
        border-bottom: 4px solid var(--color-main-blue);
        border-right: 4px solid var(--color-main-blue);
        border-radius: 8px;
        padding: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 3px;
        box-shadow: 0 2px 3px rgba(0,0,0,0.2);
        transition: transform 0.2s, box-shadow 0.2s;
        cursor: pointer;
    }

        .header-card-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 8px rgba(0,0,0,0.3);
            background-color: var(--color-main-blue-light);
        }

    .header-card-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        background-color: var(--color-main-blue-light);
        ;
        color: var(--color-main-blue);
    }

    .header-card-item h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 700;
        color: #333;
    }

    .header-card-item p {
        color: #333;
    }

    a.header-card-item h3 {
        margin-top: 1rem;
    }
    /* --- FILTRI DASHBOARD (PILLS MODERNIZZATE) --- */
    #dashboard-filters {
        gap: 10px; /* Spazio uniforme tra i bottoni */
    }

    #dashboard-filters .nav-link {
        background-color: var(--color-main-blue-light);
        color: var(--color-main-blue);
        border: 2px solid transparent;
        cursor: pointer;
        user-select: none;
        position: relative;
    }

    #dashboard-filters .nav-link:hover {
        background-color: #ffffff;
        border-color: var(--color-main-blue);
    }

    #dashboard-filters .nav-link.active {
        background-color: var(--color-main-blue) !important;
        color: #ffffff !important;
        border-color: var(--color-main-blue);
    }

    /* Stile base per il contenitore */
    div.alert-custom {
        border: 1px solid #d1d5db;
        border-left-width: 12px;
        border-left-style: solid;
        border-left-color: transparent;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        padding: 20px;
        margin-bottom: 15px;
    }

    /* Variante Gialla */
    div.alert-custom.alert-warning {
        border-left-color: var(--color-alert-warning);
    }

    /* Variante Azzurra */
    div.alert-custom.alert-primary {
        border-left-color: var(--color-alert-primary);
    }

    /*pagina login*/
    /*bottoni autenticazione colore main*/

    .btn-outline-main{
        border:1px solid var(--color-main-blue);
        color: var(--color-main-blue);
    }

    .btn-outline-main:hover {
        background-color:var(--color-main-blue);
        color:white;
    }

    /* Stile Alert di Errore */
    div.divAlertErrore {
        border-radius: 6px;
        border: 1px solid #c82333;
        background-color: #FFF2F3;
        color: #c82333;
        padding: 12px 16px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
    }

    div.divAlertErrore i {
        color: #bd2130;
        font-size: 1.25rem;
    }

    div.divAlertErrore span {
        font-size: 0.8rem;
        letter-spacing: 0.2px;
    }

    /* loginadmin sfocatura sfondo */
    .modal-backdrop.show {
        opacity: 1 !important;
        background-color: rgba(0, 0, 0, 0.4) !important;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }


/* ---------------------- end refactoring 10.5 ---------------------------*/
.dropdown-menu {
    margin-top: 0px !important;
    margin-left: 0px !important;
    border-radius: 2px;
}

    .dropdown-list-item,
    .dropend {
        --bs-dropdown-link-hover-bg: #eee;
        --bs-dropdown-link-active-bg: #eee;
    }

        .dropend .dropdown-item {
            padding-right: 10px;
        }

        .dropdown-list-item .dropdown-item {
            padding-right: 30px;
        }

    .dropdown-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #000000 !important;
        font-size: 0.9rem;
    }

        .dropdown-item::after {
            margin-left: 1rem !important;
            color: #c2c2c2;
            font-size: 1.1rem;
        }

    /* Fine Procedure Menu */

    .navbar-button:hover {
        color: #000000 !important;
    }

    .navbar-icon {
        margin-left: 1rem;
        margin-right: 1rem;
        width: 1.5rem;
        height: 1.5rem;
        fill: currentColor
    }

    .navbar-toggler-button {
        background-color: #004082 !important;
        border-color: #ffffff !important;
        color: #ffffff !important;
        border: 0 !important;
        margin-left: 3rem !important;
    }

    .navbar-toggler-icon {
        background-color: #004082 !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
        width: 1.5rem !important;
        height: 1.5rem !important;
    }

    .logo-left {
        margin-left: 2.5em !important;
    }

    .hs-navbar .navbar-brand {
        color: #FFFFFF;
        padding-top: 10px;
        padding-bottom: 10px;
        /* height: 0; */
        margin-right: 1em;
        margin-left: 1em;
    }

        .hs-navbar .navbar-brand img {
            height: 2em;
            border-radius: 4px;
        }

    .hs-navbar .hs-logo {
        height: 2.2em;
        margin-right: 0px !important;
    }

        .hs-navbar .hs-logo:hover {
            background-color: #004082 !important;
        }

        .hs-navbar .hs-logo img {
            position: relative;
            height: 2.2em;
            padding-top: 0px;
            left: 0px;
            top: 0px;
            border-radius: 0px;
        }

    .hs-navbar .navbar-toggle {
        margin-left: 1.5em;
    }

    .hs-navbar {
        background-color: #004082;
        color: #FFFFFF;
        box-shadow: 0px 0px 5px #000000;
        -webkit-box-shadow: 0px 0px 5px #000000;
        -moz-box-shadow: 0px 0px 5px #000000;
        border-color: transparent;
        font-size: small;
    }

        .hs-navbar a {
            color: #ffffff;
        }

        .hs-navbar .navbar-nav > li > a {
            padding-top: 20px;
            padding-bottom: 20px;
        }

        .hs-navbar .navbar-toggle {
            float: left;
            margin-left: 15px;
        }

            .hs-navbar .navbar-toggle:hover > span {
                background-color: #000000;
            }

        .hs-navbar .nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
            background-color: #eee;
            color: #333;
        }

        .hs-navbar .nav > li > a:focus, .nav > li > a:hover {
            background-color: #eee;
            color: #333;
        }

        .hs-navbar .nav > li > a:focus, .nav > li > a:hover {
            background-color: #eee;
            color: #333;
        }


    @media (max-width:767px) {
        .hs-navbar .navbar-right {
            float: right;
            padding-right: 15px;
        }

        .hs-navbar .nav.navbar-nav.navbar-right li {
            float: left;
        }

            .hs-navbar .nav.navbar-nav.navbar-right li > a {
                padding: 8px 5px;
            }

        .hs-navbar .navbar-toggle {
            float: left
        }

        .hs-navbar .navbar-header {
            /* float: left; */
            width: auto !important;
        }

        .hs-navbar .navbar-collapse {
            clear: both;
            float: none;
        }

        .dropdown-menu {
            background-color: #004082;
        }

            .dropdown-menu > li > a {
                color: #fff !important;
            }

                .dropdown-menu > li > a:hover {
                    color: #000 !important;
                }

        .dropdown > a {
            padding-left: 10px;
        }
    }

    .hs-navbar .glyphicon {
        font-size: 1.5rem
    }

    .hs-navbar .dropdown-submenu {
        position: relative;
    }

        .hs-navbar .dropdown-submenu > .dropdown-menu {
            top: 0;
            left: 100%;
            margin-top: -6px;
            margin-left: -1px;
            -webkit-border-radius: 0 6px 6px 6px;
            -moz-border-radius: 0 6px 6px 6px;
            border-radius: 0 6px 6px 6px;
        }

        .hs-navbar .dropdown-submenu:hover > .dropdown-menu {
            display: block;
        }

        .hs-navbar .dropdown-submenu > a:after {
            display: block;
            content: " ";
            float: right;
            width: 0;
            height: 0;
            border-color: transparent;
            border-style: solid;
            border-width: 5px 0 5px 5px;
            border-left-color: #cccccc;
            margin-top: 9px;
            margin-right: 3px;
        }

        .hs-navbar .dropdown-submenu:hover > a:after {
            border-left-color: #ffffff;
        }

        .hs-navbar .dropdown-submenu.float-start {
            float: none;
        }

            .hs-navbar .dropdown-submenu.float-start > .dropdown-menu {
                left: -100%;
                margin-left: 10px;
                -webkit-border-radius: 6px 0 6px 6px;
                -moz-border-radius: 6px 0 6px 6px;
                border-radius: 6px 0 6px 6px;
            }

    /* End navbar */

    #contenuto {
        width: 100%;
        height: 42em;
        height: calc(100vh - 70px);
        height: -o-calc(100vh - 70px); /* opera */
        height: -webkit-calc(100vh - 70px); /* google, safari */
        height: -moz-calc(100vh - 70px); /* firefox */
        margin: 0;
        padding: 0;
    }

    .footer {
        margin-bottom: 0;
        display: none;
    }

    /*Main content*/

    .main {
        padding: 20px;
    }

    @media (min-width: 768px) {
        .main {
            padding-right: 40px;
            padding-left: 40px;
        }

        .position-md-absolute {
            position: absolute;
        }

        .position-md-absolute-ml {
            left: 0px;
        }
    }

    .main .page-header {
        margin-top: 0;
    }

    /* Favorites */

    #LayASPX {
        height: auto !important;
    }

        #LayASPX hr {
            display: none;
        }

    #fav table {
        width: 100%;
    }

    #fav hr {
        display: none;
    }

    .Fav_Highlight {
        padding: 5px;
        margin-bottom: 10px;
        background-color: #fff;
        border: 1px solid #dddddd;
        border-radius: 4px;
        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
        box-shadow: 0 1px 1px rgba(0,0,0,.05);
        display: block;
        text-decoration: none;
    }

        .Fav_Highlight span {
            color: #666666;
            font-style: italic;
            font-weight: bold;
            font-size: 14px;
            display: block;
        }

        .Fav_Highlight br {
            display: none;
        }


        .Fav_Highlight img {
            display: inline-block;
            vertical-align: middle;
            margin: 5px;
            float: left
        }

    .Fav_Description {
        color: #AAAAAA !important;
        font-size: 10px !important;
        display: block;
        font-weight: normal !important;
        min-height: 1em;
    }

    .Fav_Comune {
        font-size: 16px !important;
    }

    .Fav_Welcome {
        font-weight: normal !important;
    }

    /* End Favorites */


    /*
 * CITTADINO DIGITALE
 */

    .navbar-cd1 {
        background-color: #004082;
        color: #FFFFFF;
        box-shadow: 0px 0px 5px #000000;
        -webkit-box-shadow: 0px 0px 5px #000000;
        -moz-box-shadow: 0px 0px 5px #000000;
        border-color: transparent;
    }

    footer {
        background-color: #FFFFFF;
        padding: 20px;
    }

    .btn-default-inverse {
        background-color: #004082;
        border-color: #FFFFFF;
        color: #FFFFFF;
    }

    .tableHeaderStyle {
        vertical-align: bottom;
        border-bottom: 2px solid #DDD;
    }

    .table-hover > tbody > tr.tableHeaderStyle:hover > td {
        background-color: #FFFFFF;
    }

    .table-hover > tbody > tr > td {
        background-color: #FFFFFF;
        border-top: 0px;
    }

        .table-hover > tbody > tr > td > a {
            text-decoration: none;
        }

    .tableHeaderStyle > td {
        border: 0px;
        font-weight: bold;
    }

    .tableFooterStyle {
        vertical-align: bottom;
    }

        .tableFooterStyle > td {
            border: 0px;
        }

    .tableItemStyle {
        vertical-align: bottom;
    }

        .tableItemStyle > td {
            border: 0px;
        }

    .input-controls {
        margin-bottom: 20px;
    }

    .labelImage {
        color: #428BCA;
    }

    .login-doc-form {
        margin-left: auto;
        margin-right: auto;
        max-width: 330px;
    }


    .login-doc-box-top {
        margin-top: 40px;
    }

    .login-doc-box-bottom {
        margin-top: 70px;
        margin-bottom: 20px;
    }

    .login-form {
        margin-left: auto;
        margin-right: auto;
        max-width: 330px;
    }

    .login-box-top {
        margin-top: 40px;
    }

    .login-box-bottom {
        margin-top: 100px;
        margin-bottom: 20px;
    }

    .comunicazioni-box-bottom {
        margin-top: 280px;
    }

    .comunicazionitour-box-bottom {
        margin-top: 260px;
    }

    .map-box {
        height: 550px;
        border: 5px solid #428BCA;
    }

    .btn-primary-reverse {
        border: 1px solid #428BCA;
    }

        .btn-primary-reverse:hover {
            color: #357EBD;
        }

    .error-box-bottom {
        margin-bottom: 380px;
    }

    .navbar-welcome1 {
        font-size: 14px;
    }

    .internal-box {
        min-height: 480px;
    }

    .internalmin-box {
        min-height: 480px;
    }

    .internal-page {
        padding-left: 15px;
        padding-right: 15px;
    }

    .link-menu {
        color: #FFFFFF;
    }

    .sidebar-menu {
        padding: 0px;
    }

    .disabled {
        color: #cccccc;
    }

    .current {
        color: #000000;
    }

    .confermaDatiPagamentoDescrizioni {
        font-weight: normal;
        margin-top: 0px;
        margin-bottom: 5px;
        padding-top: 7px;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
        min-height: 1px;
        display: inline-block;
    }

    .confermaDatiPagamentoValori {
        margin-top: 0px;
        margin-bottom: 5px;
        padding-top: 7px;
        padding-left: 15px;
        padding-right: 15px;
        position: relative;
        min-height: 1px;
        display: inline-block;
        font-weight: 700;
    }

    @media (min-width: 768px) {
        .form-horizontal .confermaDatiPagamentoDescrizioni {
            text-align: right;
        }
    }

    /* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */

    /*STILI PAGINE PROCEDURE*/
    .panel-group-custom {
        padding-top: 15px;
        border-color: transparent;
        box-shadow: none;
        margin: 5px;
        display: inline
    }

    .panel-child-custom {
        margin-top: 0px;
        margin-bottom: 15px;
        margin-left: 0px;
        margin-right: 0px;
        display: inline-flex;
        font-size: 14px;
        width: 19rem;
    }

        .panel-child-custom > a {
            text-decoration: none;
        }

    /**roberto penso che si possano togliere tutti i colori /
/*Blu*/
    .panel-group-custom-border0 {
        border-width: 3px;
        border-color: #432BD1;
        background-color: #EAE5FF;
    }

    .panel-child-custom-border0 {
        border-width: 2px;
        border-color: #AFA4FC;
    }
    /*Arancione*/
    .panel-group-custom-border3 {
        border-width: 3px;
        border-color: #F99519;
        background-color: #FFF8F2;
    }

    .panel-child-custom-border3 {
        border-width: 2px;
        border-color: #FFE4C6;
    }
    /*Azzurro*/
    .panel-group-custom-border4 {
        border-width: 3px;
        border-color: #29DCE0;
        background-color: #F2FEFF;
    }

    .panel-child-custom-border4 {
        border-width: 2px;
        border-color: #C6FEFF;
    }
    /*Viola*/
    .panel-group-custom-border5 {
        border-width: 3px;
        border-color: #AB6FFF;
        background-color: #F7F2FF;
    }

    .panel-child-custom-border5 {
        border-width: 2px;
        border-color: #DEC6FF;
    }
    /*Giallo*/
    .panel-group-custom-border6 {
        border-width: 3px;
        border-color: #FFEC0A;
        background-color: #FFFAE5;
    }

    .panel-child-custom-border6 {
        border-width: 2px;
        border-color: #FFF7B2;
    }

    /*Fucsia*/
    .panel-group-custom-border7 {
        border-width: 3px;
        border-color: #ff4de1;
        background-color: #f7eef6;
    }

    .panel-child-custom-border7 {
        border-width: 2px;
        border-color: #FF92ED;
    }

    /*Rosso*/
    .panel-group-custom-border2 {
        border-width: 3px;
        border-color: #F43E55;
        background-color: #FFF2F3;
    }

    .panel-child-custom-border2 {
        border-width: 2px;
        border-color: #FFC6CD;
    }

    /*Verde*/
    .panel-group-custom-border1 {
        border-width: 3px;
        border-color: #94D12B;
        background-color: #F5FFE5;
    }

    .panel-child-custom-border1 {
        border-width: 2px;
        border-color: #DCFCA4;
    }

    /*HelpDesk Verde*/
    .panel-group-helpdesk-border1 {
        border-width: 3px;
        border-color: #94D12B;
        background-color: #F5FFE5;
    }

    .panel-child-helpdesk-border1 {
        border-width: 2px;
        border-color: #DCFCA4;
    }

    /*HelpDesk Blu*/
    .panel-group-helpdesk-border0 {
        border-width: 3px;
        border-color: #432BD1;
        background-color: #EAE5FF;
    }

    .panel-child-helpdesk-border0 {
        border-width: 2px;
        border-color: #AFA4FC;
    }

    .proclist-img-item {
        max-height: 30px;
    }

    /*iframe sinistra pagina home*/
    .hypersic-home-iframe-container {
        width: 40%;
        float: left;
        padding-right: 15px;
        padding-left: 15px;
        order: 1;
    }

    /* Extra small devices (phones, less than 768px) */
    .hypersic-home-iframe-container {
        /* display: none; */
        float: left;
        padding-right: 15px;
        padding-left: 15px;
        order: 1;
    }

    #newscontent {
        display: none;
    }

    .hypersic-home-main-container {
        width: 100%;
        float: left;
        padding-right: 15px;
        padding-left: 15px;
        order: 0;
    }

    .hypersic-home-communication-container {
        display: none;
        padding-left: 0px;
        float: left;
        order: 2;
    }

    .home-footer-mobile {
        display: initial;
    }

    .home-footer-desktop {
        display: none;
    }

    /* Small devices (tablets, 768px and up) */
    @media (min-width: 768px) {
        #newscontent {
            display: block;
        }

        .hypersic-home-iframe-container {
            display: initial;
            width: 40%;
            order: 0;
        }

        .hypersic-home-main-container {
            width: 40%;
            order: 1;
        }

        .hypersic-home-communication-container {
            display: initial;
            width: 20%;
            order: 2;
        }

        .home-footer-mobile {
            display: none;
        }

        .home-footer-desktop {
            display: initial;
        }
    }

    /* smartphone orizzontale */
    @media (max-height: 500px) and (orientation: landscape) and (hover:none) {
        #newscontent {
            display: none;
        }

        .hypersic-home-iframe-container {
            width: 100%;
            float: left;
            padding-right: 15px;
            padding-left: 15px;
            order: 1;
        }

        .hypersic-home-communication-container {
            display: none;
        }

        .hypersic-home-main-container {
            width: 100%;
            float: left;
            padding-right: 15px;
            padding-left: 15px;
            order: 0;
        }

        .home-footer-mobile {
            display: initial;
        }

        .home-footer-desktop {
            display: none;
        }
    }

    .chatbot-btn {
        --colore-chiaro: #eee4fe;
    }

        /* Regola per l'hover */
        .chatbot-btn:hover {
            --colore-chiaro: #000000; /* Fa diventare nere le parti chiare dell'SVG */
        }

/* ============================================================
   LAYOUT AREE "MASONRY" A 2 COLONNE MACRO
   - Desktop (>=992px): 2 colonne macro affiancate, 2 moduli per sotto-riga
   - Tablet (768-991px): 1 colonna macro, 2 moduli per sotto-riga
   - Smartphone (<768px): tutto incolonnato (1 modulo per riga)
   Le colonne macro sono bilanciate lato server (bin-packing in proclistx.ascx.cs)
   e rifinite lato client (equalizeMacroColumns in custom.js).
   ============================================================ */

/* Le due colonne macro partono dall'alto: cosi' i contenuti di altezza
   diversa non trascinano il vuoto della colonna piu' corta. */
.areas-masonry {
    align-items: flex-start;
}

.areas-masonry .area-macro-column {
    display: flex;
    flex-direction: column;
}

/* Ogni area e' un blocco autoconsistente: non deve essere "stirato"
   all'altezza del vicino, cosi' si eliminano gli spazi vuoti. */
.areas-masonry .area-column-container {
    align-self: flex-start;
    width: 100%;
}

/* I moduli interni all'area vanno per righe da 2 (griglia Bootstrap row-cols-md-2).
   Le card devono riempire la cella cosi' le due card affiancate sono pari. */
.areas-masonry .area-modules .procedure-card {
    height: 100%;
}

/* Tablet: una sola colonna macro, ma i moduli restano a 2 per riga.
   Forzo entrambe le colonne macro a larghezza piena e le impilo. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .areas-masonry .area-macro-column {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Smartphone: tutto incolonnato, 1 modulo per riga.
   row-cols-1 e' gia' il default Bootstrap sotto md, qui garantisco il full width. */
@media (max-width: 767.98px) {
    .areas-masonry .area-macro-column {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .areas-masonry .area-modules > .col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}