/* CANVAS 8: colore e font del tema. Il vecchio style.css di Canvas 6 era stato modificato a mano
   (darksalmon al posto del verde #1abc9c, Lato / Poppins / PT Serif): in Canvas 8 bastano le variabili */
:root {
    --cnvs-themecolor: darksalmon;
    --cnvs-themecolor-rgb: 233, 150, 122;
    --cnvs-body-font: 'Lato', sans-serif;
    --cnvs-primary-font: 'Poppins', sans-serif;
    --cnvs-secondary-font: 'PT Serif', serif;
}
/* spazio fra le colonne come in Bootstrap 4 (30px; Bootstrap 5 usa 24px). Le righe con le classi g-* / gx-* tengono il loro */
.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { --bs-gutter-x: 30px; }
.row:not([class*="g-"]) { --bs-gutter-x: 30px; }
/* bottoni con le misure di Canvas 6 (maiuscolo, grassetto, testo e padding più piccoli). Canvas 8 mette a tutti
   un bordo trasparente da 1px che prima non c'era, e porta il bordo di .button-border da 2px a 1px */
.button { --cnvs-btn-padding-x: 22px; --cnvs-btn-padding-y: 8px; --cnvs-btn-fontsize: 0.875rem; --cnvs-btn-lineheight: 24px; --cnvs-btn-border-width: 0px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.button.button-mini { --cnvs-btn-padding-x: 14px; --cnvs-btn-padding-y: 4px; --cnvs-btn-fontsize: 11px; --cnvs-btn-lineheight: 20px; }
.button.button-small { --cnvs-btn-padding-x: 17px; --cnvs-btn-padding-y: 7px; --cnvs-btn-fontsize: 12px; --cnvs-btn-lineheight: 20px; }
.button.button-large { --cnvs-btn-padding-x: 26px; --cnvs-btn-padding-y: 8px; --cnvs-btn-fontsize: 1rem; --cnvs-btn-lineheight: 30px; }
.button.button-xlarge { --cnvs-btn-padding-x: 32px; --cnvs-btn-padding-y: 9px; --cnvs-btn-fontsize: 18px; --cnvs-btn-lineheight: 34px; letter-spacing: 2px; }
.button.button-border { --cnvs-btn-border-width: 2px; }
.button.button-border.button-border-thin { --cnvs-btn-border-width: 1px; }
.button-rounded, .button.button-3d { border-radius: 3px; }
/* etichette dei form come in Canvas 6 (Canvas 8 le lascia al font del testo) */
label { font-size: 13px; font-weight: 700; font-family: var(--cnvs-primary-font); text-transform: uppercase; letter-spacing: 1px; }
/* full-header: Canvas 8 disegna le righe verticali accanto al logo e dopo il menu, sul fondo salmone si vedevano */
#header { --cnvs-header-border-color: transparent; }
/* switch-toggle: Canvas 8 prende misure e colori da variabili definite sul contenitore .switch,
   che nei template non c'è: senza le variabili l'etichetta non ha dimensioni e lo switch sparisce */
body { --cnvs-switch-width: 60px; --cnvs-switch-spacing: 1px; --cnvs-switch-bg: var(--cnvs-contrast-300); --cnvs-switch-active-bg: var(--cnvs-themecolor); }
/* select con .form-control: in Bootstrap 5 perde la freccia (appearance: none), si rimette quella di .form-select */
select.form-control:not([multiple]):not([size]) { padding-right: 2.25rem; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px; }
/* campi readonly grigi come in Bootstrap 4 (es. gli orari, che si scelgono dal selettore) */
.form-control[readonly] { background-color: var(--bs-secondary-bg); }
/* righe di tabella colorate (tr.bg_pr ecc.): Bootstrap 5 dipinge fondo e colore del testo sulle celle
   e copriva quelli della riga */
.table > :not(caption) > tr[class*="bg_"] > * { background-color: transparent; box-shadow: none; color: inherit; }
/* titolo delle pagine admin come in Canvas 6 */
#page-title h1 { text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }

/* TAG */
ul.sf-js-enabled { width: 100% }
p, pre { font-size: 18px; color: #222;font-family: 'Comfortaa', light; white-space: pre-line;}
td pre { font-size: 14px }

/* ID */
#actionBar a { color:#eee!important; font-family: 'Comfortaa', light !important; }
#actionBar a:hover { color:#fff!important }
#copyrights { padding: 10px 0; }
/* #header-wrap e in posizione assoluta e lo spazio lo tiene .header-wrap-clone, piu alto di 1px
   per il bordo del tema che qui non c'e (classe b_none): senza questo sfondo resterebbe
   scoperta una riga bianca di #header tra il menu e il contenuto sottostante */
#header{ background-color: darksalmon!important; }
#header-wrap{ background-color: darksalmon!important; }
/* In sticky il tema aggiunge "border-bottom: 1px solid #EEE" su #header-wrap (non su #header,
   quindi la classe b_none non lo tocca): a scorrimento si vedeva una riga bianca sotto il menu */
.sticky-header.full-header #header-wrap{ border-bottom: none; }
#primary-menu ul li > a { padding: 19px 8px }
#primary-menu-trigger { top: 5px }
#page-title { padding: 30px 0px; border-bottom: none; }
#page-title.page-title-center .breadcrumb { margin: 10px 0 0 !important; }

/* CLASS */
.breadcrumb a, .breadcrumb a:hover, .breadcrumb-item + .breadcrumb-item::before{ color: #fff; }
.breadcrumb-item-default + .breadcrumb-item-default::before{ color: rgb(0, 0, 0)!important }
.button { font-family: 'Comfortaa', light !important; }
.copyrights-menu { margin-bottom: 0px;}
.flip-card-inner { padding: 1rem!important; }
.form-control { font-family: 'Comfortaa', light !important; }
.full-header #logo { padding-right: 0px; border-right: 0px; }
.full-header .primary-menu .menu-container { padding-right: 0rem; margin-right: 0rem; border-right: 0px; }
.full-header .sub-menu-container { background: darksalmon }
.full-header .sub-menu-container .menu-item:hover > .menu-link { background-color: darksalmon; font-weight: bold; color: #fff}
.me-auto { margin-right: auto!important }
.menu-container .menu-item .menu-link { color: #eee !important; font-size: 16px; font-weight: 100; text-transform: none }
.menu-container .menu-item .sub-menu-container .menu-link { color: #eee !important; font-family: 'Comfortaa', light; font-size: 14px; text-transform: none }
.menu-container .menu-item a.menu-link:hover { color: #fff !important;  }
.modal-content, .modal-header{ border-radius: 0px }
.modal-content { border: none }
.modal-header { border-bottom: 1px solid darksalmon; background:#ce6441; }
.modal-header .modal-title { color: white; margin: auto; font-family: 'Comfortaa', light !important }
.modal-body { padding: 20px }
.modal-footer { border-top: 1px solid darksalmon; display: flow-root; text-align: center }
.navbar.navbar-dark a, .navbar.navbar-dark a:hover { color: #fff; }
.revo-slider-desc-text { font-size: 30px; font-family: 'Comfortaa', regular !important; width: 650px; text-align: center; line-height: 1.5; }
.revo-slider-emphasis-text { font-size: 80px; font-weight: 700; letter-spacing: -1px; font-family: 'Dancing Script', cursive !important; padding: 15px 20px; }
.side-header #header { z-index: 199; border-right: 3px solid rgba(255, 106, 57, 0.849); }
.side-header #header-wrap { background: darksalmon!important; }
.side-header .menu-item:hover > .menu-link, .menu-item.current > .menu-link { color: #222; }
.side-header #logo:not(.nobottomborder):after, .side-header #primary-menu:not(.nobottomborder):after {border-bottom: none;}
.side-header.open-header #header-trigger { top: 40px; left: 40px; z-index: 101 }
.side-header .transparent-header .menu-link { font-family: 'Comfortaa', light !important; font-size:14px; text-transform: none; }
.side-header .menu-item:not(:first-child) { margin: 0px; }
.standard-logo { padding: 10px 0px }
.style-msg .sb-msg, .style-msg2 .msgtitle, .style-msg2 .sb-msg { font-size: 13px; }
.sub-menu-container .menu-item > .menu-link { font-size: 14px; font-weight: 400;}
.table th, .table td { vertical-align: middle !important }
.table.b_none th, .table.b_none td { border: 0px !important }
.transparent-header .menu-link { color: #fff; font-size: 16px; font-family: 'Comfortaa', regular !important; font-weight: 400; text-transform: none; padding: 15px 15px!important }
.transparent-header .sub-menu-container, .mega-menu-content { width: 220px !important; background-color: darksalmon; border: 0px solid darksalmon; border-top: 2px solid darksalmon;}
.transparent-header .sub-menu-container .menu-item > .menu-link { color: #fff; }
.transparent-header .sub-menu-container .menu-item:hover > .menu-link { background-color: darksalmon; color: #222; }
.transparent-header.sticky-header .menu-link { color: darksalmon; }
.side-header .on-click .menu-item .sub-menu-trigger { color: #fff; }
.sticky-header #header-wrap { position: fixed; top: 0; left: 0; background-color: darksalmon!important; box-shadow: 0 0 10px rgba(0,0,0,0.1); }

@media screen and (max-width:992px){
    #header-trigger { display:none }
    #primary-menu-trigger path { stroke: white }
    .menu-item .sub-menu-trigger { color: white }
}