:root {
    --portal-width: 1100px;
    --color-blu: #23305d;
    --color-blu-liguria: #05509d;
    --color-azzurro: #0079ad;
    --color-verde: #2db879;
    --color-grey: #e9eaed;
	--color-link: #05509d;
	--color-link-hover: #23527c;
	--color-h3: #2bb673;
} 
/*
@font-face {
    font-family: Raleway;
    src: url(/media/templates/site/pua/fonts/raleway/Raleway-Regular.ttf);
}

body{font-family:Raleway, sans-serif; font-size:16px; font-weight:normal; }
h1{font-family:Raleway, sans-serif; font-weight:600; }
h2{font-family:Raleway, sans-serif; font-weight:600; }
h3{font-family:Raleway, sans-serif; font-weight:600; }
h4{font-family:Raleway, sans-serif; font-weight:normal; }
h5{font-family:Raleway, sans-serif; font-weight:600; }
h6{font-family:Raleway, sans-serif; font-weight:600; }
*/

/* ======================================================
   BACKGROUND
   ====================================================== */
.bg-grey {
    background: var(--color-grey);
}
.bg-blu {
    background: var(--color-blu);
}
.bg-blu-liguria {
    background: var(--color-blu-liguria);
}
.bg-azzurro {
    background: var(--color-azzurro);
}

/* ======================================================
   LINK
   ====================================================== */
a {
	color: var(--color-link);
	text-decoration: none !important;
	font-weight: bold;
}
a:hover {
	color: var(--color-link-hover);
	text-decoration: underline !important;
}

/* ======================================================
   LIST BUTTON
   ====================================================== */
.list-group-item {
	background-color: unset;
}
/* ======================================================
   H
   ====================================================== */
/*   
h3 {
	font-size: 2rem;
	color: var(--color-h3);
}
*/
h2, .h2 {
	font-size: 1.75rem;
}
h3, .h3 {
	font-size: 1.6rem;
}
/* ======================================================
   HR
   ====================================================== */
hr.text-azzurro {
	border: 1px solid var(--color-azzurro);
	opacity: 1;
}
/* ======================================================
   TEXT
   ====================================================== */
.text-blu {
    color: var(--color-blu);
}
.text-blu-liguria {
    color: var(--color-blu-liguria);
}
.text-azzurro {
    color: var(--color-azzurro);
}
.fw-ultra-bold {
    font-weight: 900 !important;
}

/* ======================================================
   BUTTON
   ====================================================== */
a.btn-blu, 
.btn-blu {
    color: #fff;
    background: var(--color-blu);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    font-weight: 600;
}
a.btn-blu:hover,
.btn-blu:hover {
    color: #fff;
    background: var(--color-blu);
    font-weight: 600;
    text-decoration: underline !important;
    box-shadow: none;
}
a.btn-azzurro,
.btn-azzurro {
    color: #fff;
    background-color: var(--color-azzurro);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border: 2px solid var(--color-azzurro);
    font-weight: 600;
}

a.btn-azzurro:hover,
.btn-azzurro:hover {
    color: #fff;
    background-color: var(--color-azzurro);
    font-weight: 600;
    border: 2px solid var(--color-azzurro);
    text-decoration: underline !important;
    box-shadow: none;
}


/* ======================================================
   HAMBURGER
   ====================================================== */
.container-header .navbar-toggler {
	color: var(--color-blu);
	cursor: pointer;
	border: 1px solid var(--color-blu);
}

/* ======================================================
   TOPBAR
   ====================================================== */
.container-topbar{

    background:#f8f9fa;

    border-bottom:1px solid #dee2e6;

    padding:.5rem 0;

}

.topbar-user{

    display:flex;
    align-items:center;

    font-size:.95rem;
    font-weight:500;

}

.topbar-user i{

    margin-right:.5rem;

    color:var(--bs-primary);

}

.topbar-search{

    display:flex;
    justify-content:flex-end;
    align-items:center;

}

.topbar-search .mod-finder,
.topbar-search form{

    width:100%;
    max-width:380px;

}

@media (max-width:991px){

    .topbar-user{

        justify-content:center;

        margin-bottom:.75rem;

    }

    .topbar-search{

        justify-content:center;

    }

}

/* ======================================================
   SERVIZI
   ====================================================== */

/* ==========================================================
   MOD_ARTICLES - SERVIZI
   Colore alternato per ogni .mod-articles-group
   ========================================================== */

.services-group--blu {
    --services-color: var(--color-blu);
    --services-color-dark: var(--color-blu);
}
.services-group--blu-liguria {
    --services-color: var(--color-blu-liguria);
    --services-color-dark: var(--color-blu-liguria);
}
.services-group--azzurro {
    --services-color: var(--color-azzurro);
    --services-color-dark: var(--color-azzurro);
}


/* ==========================================================
   FEATURED / INTESTAZIONE DEL GRUPPO
   ========================================================== */

.services-featured {
    margin-bottom: 1.5rem;
}

.services-featured-title {
    margin-bottom: .5rem;
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.2;
}

.services-featured-title a {
    color: var(--services-color);
    text-decoration: none;
}

.services-featured-title a:hover,
.services-featured-title a:focus {
    color: var(--services-color-dark);
    text-decoration: underline;
}

.services-featured-intro {
    max-width: 1100px;
    line-height: 1.5;
}

.services-featured-intro p:last-child {
    margin-bottom: 0;
}

.services-featured-btn {
    display: inline-block;
    padding: .35rem 1.4rem;

    color: #212529;
    background: #fff;

    border: 1px solid #495057;
    border-radius: 2rem;

    font-size: .875rem;
    font-weight: 500;
    line-height: 1.2;

    text-decoration: none;
    text-transform: uppercase;
}

.services-featured-btn:hover,
.services-featured-btn:focus {
    color: #fff;
    background: var(--services-color);
    border-color: var(--services-color);
}


/* ==========================================================
   GRIGLIA
   ========================================================== */

.services-grid {
    align-items: stretch;
}

.services-item-wrap {
    display: flex;
}


/* ==========================================================
   CARD
   ========================================================== */

.services-card {
    width: 100%;
    overflow: hidden;

    border: 1px solid #d9dee3;
    border-radius: 0;

    background: #fff;

    transition:
        transform .15s ease-in-out,
        box-shadow .15s ease-in-out;
}
/*
.services-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .08);
}
*/

/* Header card */

.services-card-header {
    padding: .7rem 1rem;

    color: #fff;
    background: var(--services-color);

    border: 0;
}

.services-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.services-card-title a {
    color: #fff;
    text-decoration: none;
}

.services-card-title a:hover,
.services-card-title a:focus {
    color: #fff;
    text-decoration: underline;
}


/* Corpo card */

.services-card .card-body {
    min-height: 165px;
    padding: 1rem;
}

.services-card-intro {
    color: #5d6570;
    line-height: 1.45;
}

.services-card-intro p:last-child {
    margin-bottom: 0;
}


/* Footer */

.services-card-footer {
    min-height: 48px;
}
/*
.services-readmore {
    color: var(--services-color);
    font-weight: 600;
    text-decoration: none;
}

.services-readmore:hover,
.services-readmore:focus {
    color: var(--services-color-dark);
    text-decoration: underline;
}
*/

/* Icona */

.services-ribbon-box{
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--services-color);
    flex:0 0 52px;
    border-radius:30px;
    transition:.2s;
}

.services-card:hover .services-ribbon-box{
    background:var(--services-color-dark);
}

.services-ribbon{
    width:32px;
    height:32px;
    object-fit:contain;
    display:block;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 991.98px) {
    .services-card .card-body {
        min-height: 0;
    }
}

@media (max-width: 575.98px) {
    .services-featured-title {
        font-size: 1.45rem;
    }

    .services-card-title {
        font-size: .95rem;
    }

    .services-ribbon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }
}

/* ======================================================
   PAGE TITLE + BREADCRUMB
   ====================================================== */

.page-header-bar {
    background: #075a9c;
    color: #fff;
}

.page-header-bar .container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding-inline: 15px;
}

.page-header-bar__inner {
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.page-header-bar__title {
    margin: 0;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
}

.page-header-bar__breadcrumb {
    margin-left: auto;
}

.page-header-bar__breadcrumb .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    list-style: none;
}

.page-header-bar__breadcrumb .breadcrumb-item,
.page-header-bar__breadcrumb .breadcrumb-item a {
    color: #fff;
    text-decoration: none;
}

.page-header-bar__breadcrumb .breadcrumb-item a:hover {
    text-decoration: underline;
}

.page-header-bar__breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    float: none;
    padding: 0 10px;
    color: #fff;
    opacity: 1;
}

@media (max-width: 767.98px) {
    .page-header-bar__inner {
        min-height: auto;
        padding-block: 20px;
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .page-header-bar__breadcrumb {
        margin-left: 0;
    }

    .page-header-bar__breadcrumb .breadcrumb {
        justify-content: flex-start;
    }
}

/* ======================================================
   MESSAGGIO INFORMATIVO IN HOME 
   ====================================================== */
	.msg-info {
		background-color: #025299;
		padding: 1.5rem;
	}
	.msg-info {
		color: #664d03;
		background-color: #fff3cd;
		border-color: #ffecb5;
		padding: 1.5rem;
	}	
	.msg-info > div {
		display: table;
		margin: 0 auto;
	}
	.msg-info h3 {
		text-align: center;
		margin-bottom: 2rem;
		color: #fff;
	}
/*	
	.msg-info p {
		color: #fff;
		font-size: 1.5rem;
		font-weight: 500;
		display: table-cell;
	}
*/	
	.msg-info p:first-child {
		padding-right: 3rem;
	}
	.msg-info a {
		color: #fff;
		font-size: 2.1rem;
		font-weight: 600;
		margin-right: 1rem;
		text-align: left;
	}
	.msg-info a:first-child {
		/*margin-right: 4rem;*/
	}
	.msg-info a i::before {
		background-color: #2bb673;
		color: #fff;
		padding: .5rem 0.6rem;
		border-radius: 50%;
		margin-right: .2rem;
		font-size: 1.7rem;
		line-height: 2rem;
	}
	.msg-info a i.fa-phone::before {
		padding: .5rem 0.7rem;
	}

/* ======================================================
   FOOTER
   ====================================================== */
.footer a:not(.btn), .footer .btn-link {
	text-decoration: none;
	color: var(--color-link);
}
.footer a:not(.btn):hover, .footer a:not(.btn):focus, .footer .btn-link:hover, .footer .btn-link:focus {
	text-decoration: underline;
	color: var(--color-link);
}

/* ======================================================
   BACK TO TOP
   ====================================================== */
.back-to-top-link {
	inset-inline-end: 1rem;
	z-index: 10000;
	color: var(--color-blu-ligura);
	pointer-events: all;
	background-color: var(--white,#fff);
	border: 1px solid var(--color-blu-liguria);
	opacity: 0;
	border-radius: .25rem;
	padding: .5em;
	transition: opacity .2s ease-in;
	position: fixed;
	bottom: 1rem;
}   
.back-to-top-link:hover, .back-to-top-link:focus {
	color: var(--white,#fff);
	background-color: var(--color-blu-liguria);
	border-color: var(--white,#fff);
}
/* ======================================================
   BARRA SUPERIORE CON RICERCA
   ====================================================== */

.container-topbar {
    max-width: none;
    min-height: 44px;
    padding: 0 max(20px, calc((100% - var(--portal-width)) / 2));
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: #e6e7ea;
}

.container-topbar .mod-finder {
    width: 207px;
    margin: 0;
}

.container-topbar .mod-finder__search {
    margin: 0;
}

.container-topbar input[type="search"],
.container-topbar input[type="text"] {
    width: 100%;
    height: 34px;
    min-height: 34px;
    padding: 6px 11px;
    border: 1px solid #c7c7c7;
    border-radius: 4px;
    background: #fff;
    font-size: 14px;
}

/* Nasconde il pulsante se il modulo lo genera */
.container-topbar .mod-finder__search .btn {
    display: none;
}

/* ======================================================
   HEADER
   ====================================================== */

.container-header {
    background: #fff;
    background-image: none;
    box-shadow: 0 2px 5px rgb(0 0 0 / 8%);
}

/*
 * In Cassiopeia il primo .grid-child contiene
 * logo e navigazione.
 */
 /*
.container-header > .grid-child {
    width: min(calc(100% - 40px), var(--portal-width));
    max-width: var(--portal-width);
    min-height: 71px;
    margin-inline: auto;
    padding: 0;

    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}
*/
.container-header > .container > .grid-child {
    width: 100%;
    max-width: var(--portal-width);
    min-height: 71px;
    margin-inline: auto;
    padding: 0;

    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
/* ======================================================
   LOGO
   ====================================================== */

.container-header .navbar-brand {
	/* 2026.08.14 
    flex: 0 0 266px;
    width: 266px;
    min-width: 266px;
    min-height: 71px;
    margin: 0;
    padding: 0 30px 0 10px;
	*/
    display: flex;
    align-items: center;
}

.container-header .navbar-brand a {
    display: flex;
    align-items: center;
}

.container-header .navbar-brand img {
    display: block;
    width: auto;
    max-width: 170px;
/*    max-height: 52px; */
}

/* ======================================================
   NAVIGAZIONE
   ====================================================== */

.container-header .container-nav {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    min-width: 0;
    min-height: 71px;
    margin: 0;
    padding: 0;

    display: flex;
    align-items: stretch;
}

.container-header .container-nav nav,
.container-header .container-nav .navbar {
    width: 100%;
    min-height: 71px;
    padding: 0;
}

.container-header .mod-menu {
    min-height: 71px;
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
}

.container-header .mod-menu > li {
    display: flex;
    align-items: stretch;
    margin: 0;
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
    min-height: 71px;
    padding: 0 13px;

    display: flex;
    align-items: center;

    color: #000;
    background: transparent;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;

    font-size: 14px;
    font-weight: 600;
}

/* Voce attiva */

.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.current > a,
.container-header .mod-menu > li.active > span,
.container-header .mod-menu > li.current > span {
    color: #fff;
    background: var(--color-blu);
}

/* Hover, ma senza sovrascrivere la voce attiva */

.container-header .mod-menu > li:not(.active):not(.current) > a:hover,
.container-header .mod-menu > li:not(.active):not(.current) > a:focus {
    color: var(--color-blu);
    background: #f4f4f4;
}

/* ======================================================
   BANNER / TESTO INTRODUTTIVO
   ====================================================== */

.container-banner {
    width: min(calc(100% - 40px), var(--portal-width));
    max-width: var(--portal-width);
    margin-inline: auto;
}

.container-banner .mod-custom,
.container-banner .portal-intro {
    width: 100%;
}

.portal-intro h1 {
    margin: 0 0 10px;
    color: var(--color-blu);
    font-size: 32px;
    line-height: 1.15;
    font-weight: 400;
}

.portal-intro p {
    margin: 0;
    color: var(--color-blu);
    font-size: 16px;
    line-height: 1.5;
}


/* ======================================================
   OPERATORI E CITTADINI
   ====================================================== */
.portal-title {
    color: #0057A4;
    margin-bottom: 10px;
    font-weight: 300;
}

.portal-subtitle {
    color: #0057A4;
    font-size: 28px;
    margin-bottom: 0;
    font-weight: 300;
}

/* Riga dei riquadri */

.portal-row {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0;
}

.portal-row > [class*='col-'] {
    display: flex;
    margin-bottom: 30px;
}

/* Box */

.portal-box {
    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 500px;

    padding: 35px;

    color: #fff;
}

.portal-green {
    background: #11A857;
}

.portal-blue {
    background: #005CA9;
}

/* Testi */

.portal-box h2 {
    margin: 0 0 25px 0;

    font-size: 58px;
    font-weight: 300;
}

.portal-box p {
    margin-bottom: 22px;

    font-size: 18px;
    line-height: 1.6;
    font-weight: 300;
}

/* Footer */

.portal-footer {
    margin-top: auto;
    text-align: center;
    padding-top: 30px;
}

/* Bottone */

.portal-btn {
    color: #fff;
    background: transparent;

    border: 1px solid #fff;
    border-radius: 20px;

    padding: 6px 28px;

    font-size: 15px;
    font-weight: bold;
}

.portal-btn:hover,
.portal-btn:focus {
    color: #005CA9;
    background: #fff;
    border-color: #fff;
}

.Footer-siteName img {
	max-width: 170px;
}

/* Responsive */

@media (max-width: 767px) {

    .portal-row {
        display: block;
    }

    .portal-row > [class*='col-'] {
        display: block;
    }

    .portal-box {
        min-height: auto;
        margin-bottom: 25px;
        padding: 25px;
    }

    .portal-box h2 {
        font-size: 42px;
    }

    .portal-box p {
        font-size: 16px;
        line-height: 1.5;
    }

    .portal-footer {
        padding-top: 20px;
    }
}




/* ======================================================
   RESPONSIVE
   ====================================================== */

@media (max-width: 1050px) {
    .container-header > .grid-child {
        flex-wrap: wrap;
    }
/* 2026.08.14 
    .container-header .navbar-brand {
        flex-basis: 100%;
        width: 100%;
        min-width: 0;
        justify-content: center;
        padding: 10px;
    }
    .container-header .container-nav {
        flex-basis: 100%;
        width: 100%;
        overflow-x: auto;
    }
*/
    .container-header .mod-menu {
        min-width: max-content;
    }
}

@media (max-width: 700px) {
    .container-topbar {
        padding-inline: 12px;
    }

    .container-topbar .mod-finder {
        width: 100%;
    }

    .container-header > .grid-child,
    .container-banner {
        width: calc(100% - 24px);
    }

    .portal-intro h1 {
        font-size: 27px;
    }
}