/* * robust-bs5.css * Robust theme — ported to Bootstrap 5 * * Based on app.css from the Robust 1.2 theme (PIXINVENT). * Changes: * - Removed lines 1353–1855 (perfect-scrollbar CSS and Unison CSS media queries) * - Added Bootstrap 5 compatibility patches at the end */ /* * Brand/tema → variabili Bootstrap 5. * Il tema Robust usa il primary #967ADC. BS5 espone --bs-link-color (usato dal reboot * per gli ) e --bs-primary-rgb (usato da .text-primary/.bg-primary). Mappandoli qui * i link nativi e le utility primary seguono il brand senza toccare ogni regola. * NB: style.css (per-tenant) carica DOPO e può sovrascrivere questi valori. */ :root { --bs-primary: #967ADC; --bs-primary-rgb: 150, 122, 220; --bs-link-color: #967ADC; --bs-link-color-rgb: 150, 122, 220; --bs-link-hover-color: #7d5fc9; --bs-link-hover-color-rgb: 125, 95, 201; } /* * Login: i divisori ".line-on-side" ("Accedi al servizio con…") erano troppo * attaccati ai bottoni. Più respiro sopra/sotto. */ .line-on-side { margin: 1.75rem 0 1.25rem !important; } @media (max-width: 1366px) { html { font-size: 14px; } } html { height: 100%; } html body { height: 100%; background-color: #F3F3F3; direction: ltr; } html body.fixed-navbar { padding-top: 4rem; } html body .content { padding: 0; transition: 300ms ease all; backface-visibility: hidden; } html body .content .content-wrapper { padding: 1.8rem; } html body .content .content-wrapper .content-header-right { margin-top: 6px; } /* * Fix Bootstrap 5: display:flex su .container-fluid rompe il layout Robust. * .app-content ha classe .container-fluid → diventa flex container → override con block. * Il margin-left NON dipende più da menu-expanded/collapsed (aggiunte via JS dopo il ready): * usiamo data-col="2-columns" che è sempre presente nell'HTML PHP. */ html body .content, html body .app-content { display: block !important; /* .container-fluid impone width:100%; sommato al margin-left:240px della sidebar genererebbe overflow (100% + 240px). width:auto fa sì che il blocco riempia lo spazio residuo dopo il margin, senza scroll orizzontale. */ width: auto !important; max-width: 100% !important; } /* Sidebar espansa (≥992px, layout a 2 colonne) — CSS-only, prima che giri app-menu.js */ @media (min-width: 992px) { body.vertical-layout.vertical-menu[data-col="2-columns"] .app-content, body.vertical-layout.vertical-menu[data-col="2-columns"] .content { margin-left: 240px !important; } } /* Sidebar a icone (768–991px) */ @media (min-width: 768px) and (max-width: 991px) { body.vertical-layout.vertical-menu[data-col="2-columns"] .app-content, body.vertical-layout.vertical-menu[data-col="2-columns"] .content { margin-left: 60px !important; } } /* * Override quando JS aggiunge le classi di stato (click sul toggle). * SOLO desktop (≥768px): su mobile il contenuto deve restare a tutta larghezza * (vedi blocco @media max-767 più sotto). Senza questo scope, la regola * menu-expanded (specificità 0,4,2) vinceva sul margin:0 mobile (0,3,2) e * il contenuto restava schiacciato in una striscia di ~135px (viewport-240px). */ @media (min-width: 768px) { /* SOLO layout a 2 colonne: così la login (1-column), anche se app-menu.js le aggiunge .menu-expanded, NON prende il margine fantasma di 240px. */ body.vertical-layout.vertical-menu.menu-expanded[data-col="2-columns"] .app-content, body.vertical-layout.vertical-menu.menu-expanded[data-col="2-columns"] .content { margin-left: 240px !important; } body.vertical-layout.vertical-menu.menu-collapsed[data-col="2-columns"] .app-content, body.vertical-layout.vertical-menu.menu-collapsed[data-col="2-columns"] .content { margin-left: 60px !important; } } /* Menu nascosto (overlay su mobile) */ body.vertical-layout.vertical-menu.menu-hide .app-content, body.vertical-layout.vertical-menu.menu-hide .content { margin-left: 0 !important; } /* * MOBILE (<768px) — robusto a prescindere dal fatto che app-menu.js abbia * o meno commutato il body in `vertical-overlay-menu`. Usa solo `.vertical-layout`. * - contenuto SEMPRE a tutta larghezza (niente margine sidebar) * - sidebar off-canvas: fuori schermo a sinistra, entra con `menu-open` */ @media (max-width: 767px) { body.vertical-layout .app-content, body.vertical-layout .content, body.vertical-layout .footer { margin-left: 0 !important; width: auto !important; } body.vertical-layout .main-menu { position: fixed !important; top: 0; left: -260px !important; width: 240px !important; height: 100%; z-index: 1050 !important; opacity: 1 !important; transform: none !important; transition: left .25s ease; } /* la sidebar entra con `sidebar-open` (classe nostra, deterministica via JS) oppure con `menu-open` (stato di app-menu.js, se funziona) */ body.vertical-layout.sidebar-open .main-menu, body.vertical-layout.menu-open .main-menu, body.vertical-layout.vertical-overlay-menu.menu-open .main-menu { left: 0 !important; transform: none !important; } /* backdrop quando il menu è aperto (clic per chiudere) */ body.vertical-layout.sidebar-open .sidebar-backdrop, body.vertical-layout.menu-open .sidebar-backdrop { display: block; } .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1040; } } /* * Fix overflow "doppio": le pagine caricate via AJAX (es. content_anag_iscr.php → * #content_iscr) emettono a loro volta un wrapper ".app-content content container-fluid". * Il selettore discendente del margin-left della sidebar le colpirebbe di nuovo, * aggiungendo un secondo margin-left:240px e generando un secondo scroll orizzontale. * Qui azzeriamo il margin sui wrapper ANNIDATI (dentro .content-body / un altro .content). * Specificità (0,4,2) > (0,4,1) delle regole sopra → vince senza toccare il wrapper top-level. */ body.vertical-layout.vertical-menu .content-body .app-content, body.vertical-layout.vertical-menu .content-body .content, body.vertical-layout.vertical-menu .app-content .app-content, body.vertical-layout.vertical-menu .content .content { margin-left: 0 !important; width: auto !important; max-width: 100% !important; } @media (max-width: 767px) { body.vertical-layout.vertical-menu .app-content, body.vertical-layout.vertical-menu .content { margin-left: 0 !important; } } html body[data-col="1-column"]:not(.vertical-content-menu) .content, html body[data-col="1-column"]:not(.vertical-content-menu) .footer { margin-left: 0px !important; } html body[data-col="1-column"].horizontal-layout .content, html body[data-col="1-column"].horizontal-layout .footer { margin: 0 auto !important; } html body[data-col="1-column"].vertical-content-menu .content-body { margin-left: 0px !important; } html body.boxed-layout { padding-left: 0; padding-right: 0; } html body.bg-full-screen-image { background: url(../../images/backgrounds/bg-2.jpg) no-repeat center center fixed; background-size: cover; } html body .pace .pace-progress { background: #3BAFDA; } /* * Blank page */ .blank-page .content-wrapper { padding: 0 !important; } .blank-page .content-wrapper .flexbox-container { display: flex; align-items: center; height: 100vh; } @media (max-width: 767px) { html body .content .content-wrapper { padding: 1rem; } html body footer { text-align: center; } } /* * Col 3 layout for detached and general type */ @media (min-width: 992px) { body .content-right { width: calc(100% - 300px); float: right; } body .content-left { width: calc(100% - 300px); float: left; } body .content-detached { width: 100%; } body .content-detached.content-right { float: right; margin-left: -300px; } body .content-detached.content-right .content-body { margin-left: 320px; } body .content-detached.content-left { float: left; margin-right: -300px; } body .content-detached.content-left .content-body { margin-right: 320px; } .sidebar-right.sidebar-sticky { float: right !important; margin-left: -300px; width: 300px !important; } [data-col="content-left-sidebar"] .sticky-wrapper { float: left; } .vertical-content-menu .content .sidebar-left { margin-left: 268px; } .vertical-content-menu .content .content-detached.content-right { float: right; width: calc(100% - 300px); margin-left: -300px; } .vertical-content-menu .content .content-detached.content-right .content-body { margin-left: 295px; } .vertical-content-menu .content .content-detached.content-left { float: left; width: 100%; margin-right: -300px; } .vertical-content-menu .content .content-detached.content-left .content-body { margin-right: 320px; } } footer.footer { padding: 0.4rem; } footer.navbar-shadow { box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.15); } footer.navbar-border { border-top: 1px solid rgba(0, 0, 0, 0.1); } footer.footer-transparent { border: none; } footer.footer-light { background: #FFFFFF; } footer.footer-dark { background: #1D2B36; color: #fff; } /*========================================================================================= File Name: navigations.scss Description: Common mixin for menus, contain dark and light version scss. ---------------------------------------------------------------------------------------- Item Name: Robust - Responsive Admin Theme Version: 1.2 Author: PIXINVENT Author URL: http://www.themeforest.net/user/pixinvent ==========================================================================================*/ .main-menu { z-index: 1000; position: absolute; display: table-cell; } .main-menu.menu-light { color: #55595c; background: #FFFFFF; } .main-menu.menu-light .main-menu-header { padding: 20px; } .main-menu.menu-light .main-menu-header .menu-search { background: #e6e6e6; padding: 0.5rem 1rem; color: #3d3f41; } .main-menu.menu-light .main-menu-header .menu-search:focus { border-color: #d9d9d9; } .main-menu.menu-light .navigation { background: #FFFFFF; } .main-menu.menu-light .navigation .navigation-header { color: #55595c; padding: 24px 20px 8px 20px; } .main-menu.menu-light .navigation li a { color: #55595c; } .main-menu.menu-light .navigation li a span.menu-sub-title { color: #a1a6a9; } .main-menu.menu-light .navigation li.hover > a, .main-menu.menu-light .navigation li.open > a { color: #FFFFFF; } .main-menu.menu-light .navigation > li { padding: 0; } .main-menu.menu-light .navigation > li > a { padding: 8px 20px; } .main-menu.menu-light .navigation > li > a .label { margin-top: 4px; margin-right: 5px; } .main-menu.menu-light .navigation > li > a i { position: relative; top: 3px; } .main-menu.menu-light .navigation > li.open > ul { background: whitesmoke; } .main-menu.menu-light .navigation > li.open > a { color: #3d3f41; background: whitesmoke; } .main-menu.menu-light .navigation > li.open .hover > a { background: #f0f0f0; } .main-menu.menu-light .navigation > li:not(.open) > ul { display: none; } .main-menu.menu-light .navigation > li.hover > a, .main-menu.menu-light .navigation > li:hover > a, .main-menu.menu-light .navigation > li.active > a { color: #3d3f41; background-color: whitesmoke; } .main-menu.menu-light .navigation > li.hover > a.mm-next, .main-menu.menu-light .navigation > li:hover > a.mm-next, .main-menu.menu-light .navigation > li.active > a.mm-next { background-color: inherit; } .main-menu.menu-light .navigation > li.active > a { background-color: whitesmoke; } .main-menu.menu-light .navigation > li .active { background: #f0f0f0; } .main-menu.menu-light .navigation > li .active > a { color: #FFFFFF; background: #f0f0f0; } .main-menu.menu-light .navigation > li .active .hover > a { background: whitesmoke; } .main-menu.menu-light .navigation > li ul { padding: 0; margin: 0; font-size: 1rem; } .main-menu.menu-light .navigation > li ul li { color: #55595c; background: transparent; } .main-menu.menu-light .navigation > li ul li > a { padding: 8px 20px 8px 50px; } .main-menu.menu-light .navigation > li ul .has-sub:not(.open) > ul { display: none; } .main-menu.menu-light .navigation > li ul .open { background: #ebebeb; } .main-menu.menu-light .navigation > li ul .open > a { color: #55595c; } .main-menu.menu-light .navigation > li ul .open > ul { display: block; background: #ebebeb; } .main-menu.menu-light .navigation > li ul .open > ul li > a { padding: 8px 20px 8px 60px; } .main-menu.menu-light .navigation > li ul .open > ul .open { background: #dedede; } .main-menu.menu-light .navigation > li ul .open > ul .open > ul { display: block; background: #dedede; } .main-menu.menu-light .navigation > li ul .open > ul .open > ul li > a { padding: 8px 20px 8px 70px; } .main-menu.menu-light .navigation > li ul .open .hover > a { background: #e6e6e6; } .main-menu.menu-light .navigation > li ul .hover > a, .main-menu.menu-light .navigation > li ul:hover > a { color: #5f6367; background-color: whitesmoke; } .main-menu.menu-light .navigation > li ul .active { background: rgba(0, 0, 0, 0.06); } .main-menu.menu-light .navigation > li ul .active > a { color: #3d3f41; background-color: #e6e6e6; } .main-menu.menu-light .navigation > li ul .active .hover > a { background-color: transparent; } .main-menu.menu-light .navigation > li > ul { background: #FFFFFF; } .main-menu.menu-light ul.menu-popout { background: #FFFFFF; } .main-menu.menu-light ul.menu-popout li a { color: #55595c; } .main-menu.menu-light ul.menu-popout li a span.menu-sub-title { color: #a1a6a9; } .main-menu.menu-light ul.menu-popout li.hover > a, .main-menu.menu-light ul.menu-popout li:hover > a, .main-menu.menu-light ul.menu-popout li.open > a { background: #f0f0f0; } .main-menu.menu-light ul.menu-popout .has-sub:not(.open) > ul { display: none; } .main-menu.menu-light ul.menu-popout .open { background: #ebebeb; } .main-menu.menu-light ul.menu-popout .open > a { color: #55595c; } .main-menu.menu-light ul.menu-popout .open > ul { display: block; background: #ebebeb; } .main-menu.menu-light ul.menu-popout .open > ul .open { background: #dedede; } .main-menu.menu-light ul.menu-popout .open > ul .open > ul { display: block; background: #dedede; } .main-menu.menu-light ul.menu-popout .open li.hover > a, .main-menu.menu-light ul.menu-popout .open li:hover > a { background: #e6e6e6; } .main-menu.menu-light ul.menu-popout .hover > a, .main-menu.menu-light ul.menu-popout:hover > a { color: #5f6367; background-color: whitesmoke; } .main-menu.menu-light ul.menu-popout .active { background: rgba(0, 0, 0, 0.06); } .main-menu.menu-light ul.menu-popout .active > a { color: #3d3f41; background-color: #e6e6e6; } .main-menu.menu-light ul.menu-popout .active .hover > a, .main-menu.menu-light ul.menu-popout .active :hover > a { background-color: transparent; } .main-menu.menu-light.mm-menu .mm-search input { background: #e6e6e6; color: #55595c; padding: 16px 16px; } .main-menu.menu-light.mm-menu .mm-divider { background: #f2f2f2; } .main-menu.menu-light.mm-menu .mm-navbar > { border-color: white; } .main-menu.menu-light.mm-menu .mm-navbar > *, .main-menu.menu-light.mm-menu .mm-navbar > a { color: #18191a; } .main-menu.menu-light.mm-menu .mm-navbar > .mm-btn:before, .main-menu.menu-light.mm-menu .mm-navbar > .mm-btn:after { border-color: #494c4f; } .main-menu.menu-light.mm-menu .mm-listview > li .mm-arrow:after, .main-menu.menu-light.mm-menu .mm-listview > li .mm-next:after { border-color: #303334; } .main-menu.menu-light.mm-menu .mm-listview.navigation-main > li:hover .mm-arrow:after, .main-menu.menu-light.mm-menu .mm-listview.navigation-main > li:hover .mm-next:after { border-color: #FFFFFF; } .main-menu.menu-light.mm-menu .mm-hasnavbar .mm-listview > li:hover { background-color: #f2f2f2; } .main-menu.menu-dark { color: #dcdcdc; background: #1D2B36; } .main-menu.menu-dark .main-menu-header { padding: 20px; } .main-menu.menu-dark .main-menu-header .menu-search { background: #0b1115; padding: 0.5rem 1rem; color: #c3c3c3; } .main-menu.menu-dark .main-menu-header .menu-search:focus { border-color: #020304; } .main-menu.menu-dark .navigation { background: #1D2B36; } .main-menu.menu-dark .navigation .navigation-header { color: #dcdcdc; padding: 24px 20px 8px 20px; } .main-menu.menu-dark .navigation li a { color: #dcdcdc; } .main-menu.menu-dark .navigation li a span.menu-sub-title { color: white; } .main-menu.menu-dark .navigation li.hover > a, .main-menu.menu-dark .navigation li.open > a { color: #FFFFFF; } .main-menu.menu-dark .navigation > li { padding: 0; } .main-menu.menu-dark .navigation > li > a { padding: 8px 20px; } .main-menu.menu-dark .navigation > li > a .label { margin-top: 4px; margin-right: 5px; } .main-menu.menu-dark .navigation > li > a i { position: relative; top: 3px; } .main-menu.menu-dark .navigation > li.open > ul { background: #162029; } .main-menu.menu-dark .navigation > li.open > a { color: #c3c3c3; background: #162029; } .main-menu.menu-dark .navigation > li.open .hover > a { background: #121b22; } .main-menu.menu-dark .navigation > li:not(.open) > ul { display: none; } .main-menu.menu-dark .navigation > li.hover > a, .main-menu.menu-dark .navigation > li:hover > a, .main-menu.menu-dark .navigation > li.active > a { color: #c3c3c3; background-color: #162029; } .main-menu.menu-dark .navigation > li.hover > a.mm-next, .main-menu.menu-dark .navigation > li:hover > a.mm-next, .main-menu.menu-dark .navigation > li.active > a.mm-next { background-color: inherit; } .main-menu.menu-dark .navigation > li.active > a { background-color: #162029; } .main-menu.menu-dark .navigation > li .active { background: #121b22; } .main-menu.menu-dark .navigation > li .active > a { color: #FFFFFF; background: #121b22; } .main-menu.menu-dark .navigation > li .active .hover > a { background: #162029; } .main-menu.menu-dark .navigation > li ul { padding: 0; margin: 0; font-size: 1rem; } .main-menu.menu-dark .navigation > li ul li { color: #dcdcdc; background: transparent; } .main-menu.menu-dark .navigation > li ul li > a { padding: 8px 20px 8px 50px; } .main-menu.menu-dark .navigation > li ul .has-sub:not(.open) > ul { display: none; } .main-menu.menu-dark .navigation > li ul .open { background: #0f161b; } .main-menu.menu-dark .navigation > li ul .open > a { color: #dcdcdc; } .main-menu.menu-dark .navigation > li ul .open > ul { display: block; background: #0f161b; } .main-menu.menu-dark .navigation > li ul .open > ul li > a { padding: 8px 20px 8px 60px; } .main-menu.menu-dark .navigation > li ul .open > ul .open { background: #06090b; } .main-menu.menu-dark .navigation > li ul .open > ul .open > ul { display: block; background: #06090b; } .main-menu.menu-dark .navigation > li ul .open > ul .open > ul li > a { padding: 8px 20px 8px 70px; } .main-menu.menu-dark .navigation > li ul .open .hover > a { background: #0b1115; } .main-menu.menu-dark .navigation > li ul .hover > a, .main-menu.menu-dark .navigation > li ul:hover > a { color: #e6e6e6; background-color: #162029; } .main-menu.menu-dark .navigation > li ul .active { background: rgba(0, 0, 0, 0.06); } .main-menu.menu-dark .navigation > li ul .active > a { color: #c3c3c3; background-color: #0b1115; } .main-menu.menu-dark .navigation > li ul .active .hover > a { background-color: transparent; } .main-menu.menu-dark .navigation > li > ul { background: #1D2B36; } .main-menu.menu-dark ul.menu-popout { background: #1D2B36; } .main-menu.menu-dark ul.menu-popout li a { color: #dcdcdc; } .main-menu.menu-dark ul.menu-popout li a span.menu-sub-title { color: white; } .main-menu.menu-dark ul.menu-popout li.hover > a, .main-menu.menu-dark ul.menu-popout li:hover > a, .main-menu.menu-dark ul.menu-popout li.open > a { background: #121b22; } .main-menu.menu-dark ul.menu-popout .has-sub:not(.open) > ul { display: none; } .main-menu.menu-dark ul.menu-popout .open { background: #0f161b; } .main-menu.menu-dark ul.menu-popout .open > a { color: #dcdcdc; } .main-menu.menu-dark ul.menu-popout .open > ul { display: block; background: #0f161b; } .main-menu.menu-dark ul.menu-popout .open > ul .open { background: #06090b; } .main-menu.menu-dark ul.menu-popout .open > ul .open > ul { display: block; background: #06090b; } .main-menu.menu-dark ul.menu-popout .open li.hover > a, .main-menu.menu-dark ul.menu-popout .open li:hover > a { background: #0b1115; } .main-menu.menu-dark ul.menu-popout .hover > a, .main-menu.menu-dark ul.menu-popout:hover > a { color: #e6e6e6; background-color: #162029; } .main-menu.menu-dark ul.menu-popout .active { background: rgba(0, 0, 0, 0.06); } .main-menu.menu-dark ul.menu-popout .active > a { color: #c3c3c3; background-color: #0b1115; } .main-menu.menu-dark ul.menu-popout .active .hover > a, .main-menu.menu-dark ul.menu-popout .active :hover > a { background-color: transparent; } .main-menu.menu-dark.mm-menu .mm-search input { background: #0b1115; color: #dcdcdc; padding: 16px 16px; } .main-menu.menu-dark.mm-menu .mm-divider { background: #141e25; } .main-menu.menu-dark.mm-menu .mm-navbar > { border-color: #263847; } .main-menu.menu-dark.mm-menu .mm-navbar > *, .main-menu.menu-dark.mm-menu .mm-navbar > a { color: #9c9c9c; } .main-menu.menu-dark.mm-menu .mm-navbar > .mm-btn:before, .main-menu.menu-dark.mm-menu .mm-navbar > .mm-btn:after { border-color: #cfcfcf; } .main-menu.menu-dark.mm-menu .mm-listview > li .mm-arrow:after, .main-menu.menu-dark.mm-menu .mm-listview > li .mm-next:after { border-color: #b6b6b6; } .main-menu.menu-dark.mm-menu .mm-listview.navigation-main > li:hover .mm-arrow:after, .main-menu.menu-dark.mm-menu .mm-listview.navigation-main > li:hover .mm-next:after { border-color: #FFFFFF; } .main-menu.menu-dark.mm-menu .mm-hasnavbar .mm-listview > li:hover { background-color: #141e25; } .main-menu.menu-fixed { position: fixed; height: 100%; /* fallback if needed */ top: 4rem; height: calc(100% - 4rem); } .main-menu.menu-fixed .main-menu-footer { position: fixed; } .main-menu.menu-shadow { box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); } .main-menu.menu-native-scroll .main-menu-content { overflow-y: scroll; } .main-menu.menu-bordered.menu-light .navigation > li { border-top: 1px solid rgba(0, 0, 0, 0.1); } .main-menu.menu-bordered.menu-dark .navigation > li { border-top: 1px solid rgba(255, 255, 255, 0.1); } .main-menu .main-menu-content { height: 100%; position: relative; } .main-menu ul { list-style: none; margin: 0; padding: 0; } .main-menu ul.navigation-main { overflow-x: hidden; } .main-menu a { outline: none; } .main-menu a:hover, .main-menu a:focus { text-decoration: none; } .navigation { font-size: 1rem; overflow-y: hidden; padding-bottom: 20px; } .navigation .navigation-header { font-family: inherit; padding: 12px 22px; font-size: 1rem; text-transform: uppercase; } .navigation li { position: relative; white-space: nowrap; } .navigation li a { display: block; /* white-space: nowrap; */ text-overflow: ellipsis; overflow: hidden; } .navigation li .is-hidden { /* transition: all 250ms ease-in; transform: scale(0); opacity: 0; */ } .navigation li .is-shown { /* transition: all 250ms ease-in; transform: scale(1); opacity: 1; */ } .navigation li.disabled a { cursor: not-allowed; } .menu-popout li.disabled a { cursor: not-allowed; } .dropdown-notification .notification-text { margin-bottom: 0.5rem; } .dropdown-notification .notification-tag { position: relative; top: -4px; } .main-menu-header .user-content { padding: 20px; } .main-menu-header .user-content .media { overflow: inherit; } .main-menu-header .user-content .media-body { vertical-align: bottom; opacity: 1; width: 150px; white-space: nowrap; transition: all .3s ease .15s; } .main-menu-footer { position: relative; overflow: hidden; bottom: 0; display: block; z-index: 1000; color: #b0c5d5; background-color: #0b1115; } .main-menu-footer.footer-open { max-height: 500px; transition: max-height 0.2s ease-in-out; } .main-menu-footer.footer-close { max-height: 15px; transition: max-height 0.2s ease-in-out; } .main-menu-footer a { color: #8facc3; } .main-menu-footer a:hover, .main-menu-footer a:focus { color: #FFFFFF; } .main-menu-footer .header { height: 19px; border-bottom: 1px solid #141e25; } .main-menu-footer .toggle { transform: rotate(0deg); transition: -webkit-transform 0.2s ease-in-out; } .main-menu-footer .content { padding: 0; } .main-menu-footer .content .actions > a { display: block; float: left; width: 33.33333%; padding: 1rem 0; color: #8facc3; text-align: center; border-top: 1px solid #141e25; border-left: 1px solid #141e25; } .main-menu-footer .content .actions > a > span { font-size: 1.35rem; } .main-menu-footer .content .actions > a:hover, .main-menu-footer .content .actions > a:focus { color: #FFFFFF; } body.vertical-layout.vertical-menu.menu-expanded .main-menu-footer .content { margin-left: 0; } .vertical-layout.menu-expanded .menu-icon-right ul.navigation li > a:after { left: 2px; right: initial !important; } .vertical-layout.menu-expanded .menu-icon-right ul.navigation li > a > i { float: right !important; margin: 0 0 0 12px; } .horizontal-layout .navbar-icon-right ul.nav > li > a:after { float: left; position: relative; top: 27px; left: -16px; } .horizontal-layout .navbar-icon-right ul.nav > li > a > i { float: right; margin: 0px 4px 0 8px; } .horizontal-layout .navbar-fixed { z-index: 999 !important; } @media (max-width: 767px) { .menu-hide .main-menu, .menu-open .main-menu { transition: transform .25s, top .35s, height .35s; } .main-menu { transform: translate3d(-240px, 0, 0); backface-visibility: hidden; perspective: 1000; } .menu-open .main-menu { transform: translate3d(0, 0, 0); } } @media (max-width: 991px) { .horizontal-layout.vertical-overlay-menu .main-menu-content { padding: 0; } .horizontal-layout.vertical-overlay-menu .main-menu-content .mega-dropdown-menu { margin: 0; width: 100%; } .horizontal-layout.vertical-overlay-menu .main-menu-content .mega-dropdown-menu > li { padding: 0; } .horizontal-layout.vertical-overlay-menu .navbar .navbar-container { margin-left: 0px; } } /* @import "menu-types/vertical-menu"; // 1. Vertical Menu @import "menu-types/vertical-overlay-menu"; // 2. Vertical Overlay Menu @import "menu-types/vertical-compact-menu"; // 3. Vertical Compact Menu @import "menu-types/vertical-mmenu"; // 4. Vertical MMenu @import "menu-types/vertical-content-menu"; // 5. Vertical Content Menu @import "menu-types/horizontal-menu"; // 6. Horizontal Menu @import "menu-types/horizontal-top-icon-menu"; // 7. Horizontal Top Icons Menu */ .display-inline { display: inline !important; } .display-block { display: block !important; } .display-inline-block { display: inline-block !important; } .display-hidden { display: none !important; } .display-table-cell { display: table-cell !important; } .position-fixed { position: fixed !important; } .position-relative { position: relative !important; } .position-absolute { position: absolute !important; } .position-static { position: static !important; } .position-top-0 { top: 0; } .position-right-0 { right: 0; } .position-bottom-0 { bottom: 0; } .position-left-0 { left: 0; } .zindex-1 { z-index: 1 !important; } .zindex-2 { z-index: 2 !important; } .zindex-3 { z-index: 3 !important; } .zindex-4 { z-index: 4 !important; } .zindex-0 { z-index: 0 !important; } .zindex-minus-1 { z-index: -1 !important; } .zindex-minus-2 { z-index: -2 !important; } .zindex-minus-3 { z-index: -3 !important; } .zindex-minus-4 { z-index: -4 !important; } .no-edge-top { top: 0 !important; } .no-edge-bottom { bottom: 0 !important; } .no-edge-left { left: 0 !important; } .no-edge-right { right: 0 !important; } .valign-top { vertical-align: top !important; } .valign-middle { vertical-align: middle !important; } .valign-bottom { vertical-align: bottom !important; } .valign-baseline { vertical-align: baseline !important; } .valign-text-top { vertical-align: top !important; } .valign-text-bottom { vertical-align: text-bottom !important; } .cursor-pointer { cursor: pointer; } .cursor-move { cursor: move; } .cursor-default { cursor: default; } .cursor-progress { cursor: progress; } .cursor-not-allowed { cursor: not-allowed; } .overflow-hidden { overflow: hidden; } .overflow-visible { overflow: visible; } .overflow-auto { overflow: auto; } .overflow-scroll { overflow: scroll; } .overflow-x-scroll { overflow: scroll; } .overflow-y-scroll { overflow: scroll; } .bullets-inside { list-style: inside; } .list-style-circle { list-style: circle; } .list-style-square { list-style: square; } .list-style-icons { padding-left: 10px; margin-left: 0; list-style: none; } .list-style-icons > li i { float: left; width: 1em; margin: 0 6px 0 0; } .border { border: 1px solid; } .border-top { border-top: 1px solid; } .border-bottom { border-bottom: 1px solid; } .border-left { border-left: 1px solid; } .border-right { border-right: 1px solid; } .border-2 { border-width: 2px !important; } .border-top-2 { border-top-width: 2px !important; } .border-bottom-2 { border-bottom-width: 2px !important; } .border-left-2 { border-left-width: 2px !important; } .border-right-2 { border-right-width: 2px !important; } .border-3 { border-width: 3px !important; } .border-top-3 { border-top-width: 3px !important; } .border-bottom-3 { border-bottom-width: 3px !important; } .border-left-3 { border-left-width: 3px !important; } .border-right-3 { border-right-width: 3px !important; } .no-border { border: 0 !important; } .no-border-top { border-top: 0 !important; } .no-border-bottom { border-bottom: 0 !important; } .no-border-left { border-left: 0 !important; } .no-border-right { border-right: 0 !important; } .no-border-top-radius { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } .no-border-bottom-radius { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } .no-border-top-left-radius { border-top-left-radius: 0 !important; } .no-border-top-right-radius { border-top-right-radius: 0 !important; } .no-border-bottom-left-radius { border-bottom-left-radius: 0 !important; } .no-border-bottom-right-radius { border-bottom-right-radius: 0 !important; } .box-shadow-0 { box-shadow: none !important; } .box-shadow-1 { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } .box-shadow-2 { box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .box-shadow-3 { box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); } .box-shadow-4 { box-shadow: 0 16px 28px 0 rgba(0, 0, 0, 0.22), 0 25px 55px 0 rgba(0, 0, 0, 0.21); } .box-shadow-5 { box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22); } .fit { max-width: 100% !important; } .half-width { width: 50% !important; } .full-width { width: 100% !important; } .full-height { height: 100% !important; } .width-50 { width: 50px !important; } .width-100 { width: 100px !important; } .width-150 { width: 150px !important; } .width-200 { width: 200px !important; } .width-250 { width: 250px !important; } .width-300 { width: 300px !important; } .width-350 { width: 350px !important; } .width-400 { width: 400px !important; } .width-450 { width: 450px !important; } .width-500 { width: 500px !important; } .width-550 { width: 550px !important; } .width-600 { width: 600px !important; } .width-650 { width: 650px !important; } .width-700 { width: 700px !important; } .width-750 { width: 750px !important; } .width-800 { width: 800px !important; } .width-5-per { width: 5% !important; } .width-10-per { width: 10% !important; } .width-15-per { width: 15% !important; } .width-20-per { width: 20% !important; } .width-25-per { width: 25% !important; } .width-30-per { width: 30% !important; } .width-35-per { width: 35% !important; } .width-40-per { width: 40% !important; } .width-45-per { width: 45% !important; } .width-50-per { width: 50% !important; } .width-55-per { width: 55% !important; } .width-60-per { width: 60% !important; } .width-65-per { width: 65% !important; } .width-70-per { width: 70% !important; } .width-75-per { width: 75% !important; } .width-80-per { width: 80% !important; } .width-90-per { width: 90% !important; } .width-95-per { width: 95% !important; } .height-50 { height: 50px !important; } .height-75 { height: 75px !important; } .height-100 { height: 100px !important; } .height-150 { height: 150px !important; } .height-200 { height: 200px !important; } .height-250 { height: 250px !important; } .height-300 { height: 300px !important; } .height-350 { height: 350px !important; } .height-400 { height: 400px !important; } .height-450 { height: 450px !important; } .height-500 { height: 500px !important; } .height-550 { height: 550px !important; } .height-600 { height: 600px !important; } .height-650 { height: 650px !important; } .height-700 { height: 700px !important; } .height-750 { height: 750px !important; } .height-800 { height: 800px !important; } .height-5-per { height: 5% !important; } .height-10-per { height: 10% !important; } .height-15-per { height: 15% !important; } .height-20-per { height: 20% !important; } .height-25-per { height: 25% !important; } .height-30-per { height: 30% !important; } .height-35-per { height: 35% !important; } .height-40-per { height: 40% !important; } .height-45-per { height: 45% !important; } .height-50-per { height: 50% !important; } .height-55-per { height: 55% !important; } .height-60-per { height: 60% !important; } .height-65-per { height: 65% !important; } .height-70-per { height: 70% !important; } .height-75-per { height: 75% !important; } .height-80-per { height: 80% !important; } .line-height-1 { line-height: 1 !important; } .line-height-2 { line-height: 2 !important; } .rotate-45 { transform: rotate(45deg); } .rotate-45-inverse { transform: rotate(-45deg); } .rotate-90 { transform: rotate(45deg); } .rotate-90-inverse { transform: rotate(-45deg); } .rotate-180 { transform: rotate(45deg); } .rotate-180-inverse { transform: rotate(-45deg); } .spinner { display: inline-block; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .spinner-reverse { display: inline-block; animation: spin-reverse 1s linear infinite; } @keyframes spin-reverse { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } } .bg-cover { background-size: cover !important; } .background-repeat { background-repeat: repeat !important; } .background-no-repeat { background-repeat: no-repeat !important; } .img-xl { width: 64px !important; height: 64px !important; } .img-lg { width: 44px !important; height: 44px !important; } .img-sm { width: 36px !important; height: 36px !important; } .img-xs { width: 32px !important; height: 32px !important; } .avatar { position: relative; display: inline-block; width: 30px; white-space: nowrap; border-radius: 1000px; vertical-align: bottom; } .avatar i { position: absolute; right: -7px; bottom: 2px; width: 10px; height: 10px; border: 2px solid #eceeef; border-radius: 100%; } .avatar img { width: 100%; max-width: 100%; height: auto; border: 0 none; border-radius: 1000px; } .avatar-online i { background-color: #37BC9B; } .avatar-off i { background-color: #373a3c; } .avatar-busy i { background-color: #DA4453; } .avatar-away i { background-color: #F6BB42; } .avatar-100 { width: 100px; } .avatar-100 i { height: 20px; width: 20px; } .avatar-50 { width: 50px; } .avatar-50 i { height: 10px; width: 10px; } .avatar-lg { width: 144px; } .avatar-lg i { right: 0; bottom: 0; height: 30px; width: 30px; } .avatar-md { width: 40px; } .avatar-md i { right: 0; bottom: 0; height: 12px; width: 12px; } .avatar-sm { width: 32px; } .avatar-sm i { height: 10px; width: 10px; } .avatar-xs { width: 24px; } .avatar-xs i { height: 9px; width: 9px; } .chart-container { position: relative; width: 100%; } @media (max-width: 768px) { .chart-container { overflow-x: scroll; overflow-y: visible; max-width: 100%; } } .chart { position: relative; display: block; width: 100%; } [class*="bs-callout"] p { letter-spacing: 0.6px; } [class*="bs-callout"] .media { border-radius: 0.25rem !important; } [class*="bs-callout"].callout-bordered { border: 1px solid #ddd; } [class*="bs-callout"].callout-border-left { border-left: 5px solid; } [class*="bs-callout"].callout-border-right { border-right: 5px solid; } [class*="bs-callout"] .callout-arrow-left { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; } [class*="bs-callout"] .callout-arrow-left:before { content: ""; display: inline-block; position: absolute; top: 50%; right: -11%; border-left: 8px solid; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left-color: inherit; margin-top: -8px; } [class*="bs-callout"] .callout-arrow-right { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } [class*="bs-callout"] .callout-arrow-right:before { content: ""; display: inline-block; position: absolute; top: 50%; left: -11%; border-left: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left-color: inherit; border-right: 8px solid; border-right-color: inherit; margin-top: -8px; } [class*="bs-callout"].callout-round { border-radius: 5rem !important; } [class*="bs-callout"].callout-round .media-left { border-top-left-radius: 5rem; border-bottom-left-radius: 5rem; } [class*="bs-callout"].callout-round .media-right { border-top-right-radius: 5rem; border-bottom-right-radius: 5rem; } [class*="bs-callout"].callout-square { border-radius: 0 !important; } [class*="bs-callout"].callout-square .media, [class*="bs-callout"].callout-square .callout-arrow-left, [class*="bs-callout"].callout-square .callout-arrow-right { border-radius: 0 !important; } /*========================================================================================= File Name: demo.scss Description: CSS used for demo purpose only. Remove this css from your project. ---------------------------------------------------------------------------------------- Item Name: Robust - Responsive Admin Theme Version: 1.2 Author: PIXINVENT Author URL: http://www.themeforest.net/user/pixinvent ==========================================================================================*/ .fonticon-container > .fonticon-wrap { float: left; width: 60px; height: 60px; line-height: 4.8rem; text-align: center; border: 2px solid #967ADC; border-radius: 0.1875rem; margin-right: 1rem; margin-bottom: 1.5rem; } .fonticon-container > .fonticon-wrap > i { font-size: 2.28rem; } .fonticon-container > .fonticon-wrap:hover { background: #967ADC; color: white; } .fonticon-container > .fonticon-wrap.youtube { width: 100px; } .fonticon-container > .fonticon-classname, .fonticon-container > .fonticon-unit { display: block; font-size: 1.5rem; line-height: 1.2; } .fonticon-container > .fonticon-unit { font-size: 1rem; font-style: italic; } .scroll-example { padding: 1rem; position: relative; border: 1px solid #dadada; overflow: auto; } .scroll-example .horz-scroll-content { width: 1200px; } .browser { background: #e0e0e0; border: 4px solid #e0e0e0; width: 100%; height: 12rem; padding-top: 20px; margin: 0 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .browser iframe { border: 0; background: #fff; height: 100%; width: 100%; } .loader-wrapper { height: 8em; } .maintenance-icon { font-size: 4rem; } .animationIcon { right: 30px; bottom: 10px; } /* ---- lines 1856–2114 from original app.css (after Unison media queries) ---- */ *[data-usn-if] { display: none; } .group-area { margin-bottom: 3rem; } .block { display: block; width: 100%; } select[multiple='multiple'] { overflow: hidden; } /* Input with icon */ .has-icon-left .form-control { padding-left: 2.5rem; } .form-control-position { position: absolute; top: 0; right: 0; z-index: 2; display: block; width: 2.5rem; height: 2.5rem; line-height: 2.5rem; text-align: center; } select.form-control:not([size]):not([multiple]), input.form-control { /*-------------------------- Sizing --------------------------*/ } select.form-control:not([size]):not([multiple]).input-xl, input.form-control.input-xl { height: 3.55rem; padding: 0.5rem 1rem; font-size: 1.5rem; line-height: 1.45; border-radius: 0.35rem; } select.form-control:not([size]):not([multiple]).form-group-xl .form-control, input.form-control.form-group-xl .form-control { height: 3.55rem; padding: 0.5rem 0.5rem; font-size: 1.5rem; line-height: 1.45; border-radius: 0.35rem; } select.form-control:not([size]):not([multiple]).form-group-xl .form-control-static, input.form-control.form-group-xl .form-control-static { height: 3.55rem; padding: 0.5rem 0.5rem; font-size: 1.5rem; line-height: 1.7; } select.form-control:not([size]):not([multiple]).input-lg, input.form-control.input-lg { height: 3.16667rem; padding: 0.5rem 1rem; font-size: 1.25rem; line-height: 1.45; border-radius: 0.27rem; } select.form-control:not([size]):not([multiple]).form-group-lg .form-control, input.form-control.form-group-lg .form-control { height: 3.16667rem; padding: 0.75rem 1.5rem; font-size: 1.25rem; line-height: 1.33333; border-radius: 0.27rem; } select.form-control:not([size]):not([multiple]).form-group-lg select.form-control, input.form-control.form-group-lg select.form-control { height: 3.16667rem; line-height: 3.16667rem; } select.form-control:not([size]):not([multiple]).form-group-lg textarea.form-control, select.form-control:not([size]):not([multiple]).form-group-lg select[multiple].form-control, input.form-control.form-group-lg textarea.form-control, input.form-control.form-group-lg select[multiple].form-control { height: auto; } select.form-control:not([size]):not([multiple]).form-group-lg .form-control-static, input.form-control.form-group-lg .form-control-static { height: 3.16667rem; min-height: 2.7rem; padding: 1.75rem 1.5rem; font-size: 1.25rem; line-height: 1.33333; } select.form-control:not([size]):not([multiple]).input-sm, input.form-control.input-sm { height: 1.8125rem; padding: 0.075rem 0.5rem; font-size: 0.975rem; line-height: 1.45; border-radius: 0.21rem; } select.form-control:not([size]):not([multiple]).form-group-sm .form-control, input.form-control.form-group-sm .form-control { /* font-size: $font-size-sm; line-height: $line-height-sm; */ height: 1.8125rem; padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.45; border-radius: 0.21rem; } select.form-control:not([size]):not([multiple]).form-group-sm .form-control-static, input.form-control.form-group-sm .form-control-static { font-size: 0.875rem; line-height: 1.5; } select.form-control:not([size]):not([multiple]).input-xs, input.form-control.input-xs { height: 1.525rem; padding: 0.1rem 0.525rem; font-size: 0.75rem; line-height: 1.45; border-radius: 0.12rem; } select.form-control:not([size]):not([multiple]).form-group-xs .form-control, input.form-control.form-group-xs .form-control { height: 1.525rem; padding: 0.2rem 0.275rem; font-size: 0.75rem; line-height: 1.45; border-radius: 0.12rem; } select.form-control:not([size]):not([multiple]).form-group-xs .form-control-static, input.form-control.form-group-xs .form-control-static { height: 1.525rem; padding: 0.2rem 0.275rem; font-size: 0.75rem; line-height: 1.5; } select.form-control:not([size]):not([multiple]).input-xl + .form-control-position, select.form-control:not([size]):not([multiple]).form-group-xl > .form-control-position, input.form-control.input-xl + .form-control-position, input.form-control.form-group-xl > .form-control-position { width: 3.55rem; height: 3.55rem; line-height: 3.55rem; } select.form-control:not([size]):not([multiple]).input-lg + .form-control-position, select.form-control:not([size]):not([multiple]).form-group-lg > .form-control-position, input.form-control.input-lg + .form-control-position, input.form-control.form-group-lg > .form-control-position { width: 3.16667rem; height: 3.16667rem; line-height: 3.16667rem; } select.form-control:not([size]):not([multiple]).input-sm + .form-control-position, select.form-control:not([size]):not([multiple]).form-group-sm > .form-control-position, input.form-control.input-sm + .form-control-position, input.form-control.form-group-sm > .form-control-position { width: 1.8125rem; height: 1.8125rem; line-height: 1.8125rem; } select.form-control:not([size]):not([multiple]).input-xs + .form-control-position, select.form-control:not([size]):not([multiple]).form-group-xs > .form-control-position, input.form-control.input-xs + .form-control-position, input.form-control.form-group-xs > .form-control-position { width: 1.525rem; height: 1.525rem; line-height: 1.525rem; } /*--------------------------------- Input Icon ---------------------------------*/ .position-relative .form-control { padding-right: 2.45rem; } .position-relative .form-control.input-xl { padding-right: 3.55rem; } .position-relative .form-control.input-lg { padding-right: 3.16667rem; } .position-relative .form-control.input-sm { padding-right: 1.8125rem; } .position-relative .form-control.input-xs { padding-right: 1.525rem; } /* Input Icon left */ .has-icon-left .form-control { padding-right: 0.75rem; padding-left: 2.45rem; } .has-icon-left .form-control.input-xl { padding-right: 0.5rem; padding-left: 3.55rem; } .has-icon-left .form-control.input-lg { padding-right: 1.5rem; padding-left: 3.16667rem; } .has-icon-left .form-control.input-sm { padding-right: 0.5rem; padding-left: 1.8125rem; } .has-icon-left .form-control.input-xs { padding-right: 0.275rem; padding-left: 1.525rem; } .has-icon-left .form-control-position { right: auto; left: inherit; } input[type="color"] { height: 2.45rem; } input[type="date"].form-control, input[type="time"].form-control, input[type="datetime-local"].form-control, input[type="month"].form-control { line-height: 1.45; } .font-size-large { font-size: 1.25rem; } .font-size-base { font-size: 1rem; } .font-size-small { font-size: 0.875rem; } .font-size-xsmall { font-size: 0.75rem; } .form-group-style { position: relative; border: 1px solid rgba(0, 0, 0, 0.07); padding-top: 7px; padding-left: 12px; padding-right: 12px; padding-bottom: 4px; overflow: hidden; } .form-group-style label { margin: 0; text-transform: uppercase; font-weight: 700; } .form-group-style .form-control { border: none; padding-left: 0; margin-top: -4px; background: none; } .form-group-style.focus { background-color: #f0f0f0; } .form-group-style.focus label { opacity: 0.5; } .form-group-style label.filled { opacity: 0.5; } .input-group-xs .form-control, .input-group-xs .input-group-addon, .input-group-xs .input-group-btn > button { padding: 0.175rem 0.5rem; font-size: 0.725rem; line-height: 1.677777; border-bottom-left-radius: 0.175rem; border-top-left-radius: 0.175rem; } .input-group-xs .input-group-btn > button { border-radius: 0.175rem; } /* .input-group-btn > button { &.dropdown-toggle::after{ margin-top: -1.75rem; } } */ .input-group-addon { padding-top: 0.2rem; padding-bottom: 0.2rem; } .floating-label-form-group-with-focus label, .floating-label-form-group-with-value label { color: #967ADC !important; text-transform: uppercase; font-weight: 400; } /* ============================================= Bootstrap 5 compatibility patches ============================================= */ /* Sidebar native scroll (replaces perfect-scrollbar) */ .main-menu-content { overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.2) transparent; } .main-menu-content::-webkit-scrollbar { width: 6px; } .main-menu-content::-webkit-scrollbar-thumb { background: rgba(0,0,0,.2); border-radius: 3px; } /* BS5: badge replaces BS4 tag */ .tag { display: inline-block; padding: .25em .4em; font-size: 75%; font-weight: 700; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25rem; } .tag-pill { padding-right: .6em; padding-left: .6em; border-radius: 10rem; } .tag-default { background-color: #6c757d; } .tag-primary { background-color: #3490dc; } .tag-success { background-color: #38c172; } .tag-danger { background-color: #e3342f; } .tag-warning { background-color: #ffed4a; color: #212529; } .tag-info { background-color: #6cb2eb; } .tag-up { position: relative; top: -1px; } .tag-small { font-size: 65%; } /* Fix navbar positioning for Bootstrap 5 */ .header-navbar.fixed-top, .header-navbar.navbar-fixed-top { position: fixed; top: 0; right: 0; left: 0; z-index: 1030; } /* BS5: float utilities — keep BS4 Alpha names working */ .float-xs-right { float: right !important; } .float-xs-left { float: left !important; } .float-md-right { float: right !important; } /* * BS5 navbar is flex-based: i float non spostano i blocchi nav a destra. * Manteniamo il markup legacy (float-xs-right) mappandolo a margin-left:auto * quando il contenitore e' una navbar in flex. */ #navbar-mobile > .navbar-nav.float-xs-right { margin-left: auto !important; } .navbar-container #navbar-mobile > .navbar-nav.float-xs-right, .header-navbar .navbar-nav.float-xs-right { margin-left: auto !important; } /* BS4 -> BS5 dropdown alignment compat */ .dropdown-menu-right { right: 0 !important; left: auto !important; } /* * BS4 Robust card header actions (heading-elements) compat. * Senza bootstrap-extended.css il blocco resta nel flow e finisce a sinistra. */ .card .card-header { position: relative; } .card-header .card-title { padding-right: 3.5rem; } .card-header .heading-elements, .card-header .heading-elements-toggle { position: absolute; top: 0.75rem; right: 1rem; z-index: 2; } .card-header .heading-elements { display: flex; align-items: center; gap: 0.5rem; } @media (min-width: 992px) { .card-header .heading-elements-toggle { display: none !important; } } @media (max-width: 991px) { /* MOBILE/tablet: NON nascondere i bottoni della toolbar dietro l'ellissi (prima sparivano). Li facciamo scorrere SOTTO al titolo, sempre visibili e a capo se non ci stanno. */ .card .card-header { flex-wrap: wrap; } .card-header .card-title { padding-right: 0; } .card-header .heading-elements, .card-header .heading-elements.visible { display: flex !important; position: static !important; top: auto; right: auto; left: auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; /* bottoni toolbar a DESTRA (richiesta utente) */ gap: 0.4rem; width: 100%; margin-top: 0.5rem; text-align: right; } .card-header .heading-elements .list-inline { display: flex !important; gap: .4rem; margin: 0; justify-content: flex-end; } .card-header .heading-elements-toggle { display: none !important; } } /* BS5: hidden-* utilities — keep BS4 Alpha names working */ @media (min-width: 768px) { .hidden-md-up { display: none !important; } } @media (max-width: 767px) { .hidden-sm-down { display: none !important; } } @media (max-width: 575px) { .hidden-xs { display: none !important; } } @media (max-width: 991px) { .hidden-md { display: none !important; } } /* BS5: text-xs-center */ .text-xs-center { text-align: center !important; } .d-xs-block { display: block !important; } /* * BS5: componente .media RIMOSSO in Bootstrap 5. * In BS4-Alpha .media era display:flex (testo a sx + media-right a dx che * condividono la riga). Senza queste regole testo e icona si impilano e i * .float-xs-right interni non si allineano più a destra. Riportiamo il flex. */ .media { display: flex; align-items: flex-start; } .media-body { flex: 1 1 auto; min-width: 0; } .media-middle { align-self: center; } .media-bottom { align-self: flex-end; } .media-right, .media-figure-right { padding-left: 1rem; margin-left: auto; } .media-left, .media-figure-left { padding-right: 1rem; } /* dentro un .media, .float-xs-right è ridondante (lo gestisce il flex): evita che il float rompa il layout dei flex item */ .media .float-xs-right, .media .float-md-right { float: none !important; } /* * NB: heading-elements ora sono forniti da bootstrap-extended-bs5.css (sorgente * autoritativa). Qui sopra resta solo il fix BS5 .card .card-header{position:relative} * + .card-header .card-title{padding-right} per evitare la sovrapposizione col titolo. */ /* * ===== BS4→BS5 grid compat: colonne annidate SENZA .row ===== * In BS4 le .col-* erano `float:left` → si affiancavano anche senza un .row * attorno. In BS5 le .col-* sono flex e si affiancano SOLO dentro un contenitore * flex (.row). Tantissime pagine hanno col annidate direttamente in altre col * senza .row (es. .col-md-8 > .col-md-12 > .col-md-6 + .col-md-6) → si impilano. * * Fix a tappeto: ogni elemento col che contiene DIRETTAMENTE altre col diventa * un flex container (come un .row). I .row reali e i pattern col>row>col NON * sono toccati (il figlio diretto in quei casi è .row, non una col). * * Supporto :has(): Chrome 105+, Safari 15.4+, Firefox 121+ (coerente con @layer). * ATTENZIONE: una col che contiene SIA testo/elementi sciolti SIA col diritte * dirette verrà resa flex → quel contenuto misto si disporrà in riga. Verificare * le pagine con questo pattern (raro); in caso, avvolgere le col in un
. */ [class*="col-"]:has(> [class*="col-"]) { display: flex; flex-wrap: wrap; --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; } /* * Replica di `.row > *` di Bootstrap (gutter + base width:100%) ma con specificità * ZERO via :where(), così le regole dei breakpoint (.col-md-6, .col-sm-6, .col-lg-*) * VINCONO e il responsive funziona correttamente: * - sotto il breakpoint: nessuna regola .col-XX attiva → vale width:100% → IMPILATE * - al/oltre il breakpoint: es. .col-md-6 (0,1,0) batte :where (0,0,0) → 50% AFFIANCATE * Inoltre il padding (gutter) stacca i campi adiacenti. `.p-0` continua a vincere * (è !important) per le col che devono restare senza spaziatura. */ :where([class*="col-"]:has(> [class*="col-"]) > *) { flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--bs-gutter-x) * 0.5); padding-left: calc(var(--bs-gutter-x) * 0.5); margin-top: var(--bs-gutter-y); } /* * col-xs-* → Bootstrap 5 compat via CSS Cascade Layer * * Problema: robust-bs5.css carica DOPO bootstrap.min.css. * Con uguale specificità vince la regola definita più tardi nel cascade → * col-xs-12 (qui) sovrascriveva sempre col-lg-6 (in Bootstrap), rompendo il grid. * * Soluzione: @layer bs4-compat * Le regole in un layer perdono SEMPRE contro le regole non-layered (Bootstrap 5), * indipendentemente dall'ordine di caricamento dei file. * - col-xl-4 col-lg-6 col-xs-12 su schermo xl → col-xl-4 (BS5 non-layered) vince ✓ * - col-xl-4 col-lg-6 col-xs-12 su schermo xs → col-xs-12 (layer, nessun concorrente) vince ✓ * - solo col-xs-6 → col-xs-6 (layer, nessun concorrente) → 50% a tutte le dimensioni ✓ * Supporto: Chrome 99+, Firefox 97+, Safari 15.4+ */ @layer bs4-compat { .col-xs-1 { flex: 0 0 auto; width: 8.33333333%; } .col-xs-2 { flex: 0 0 auto; width: 16.66666667%; } .col-xs-3 { flex: 0 0 auto; width: 25%; } .col-xs-4 { flex: 0 0 auto; width: 33.33333333%; } .col-xs-5 { flex: 0 0 auto; width: 41.66666667%; } .col-xs-6 { flex: 0 0 auto; width: 50%; } .col-xs-7 { flex: 0 0 auto; width: 58.33333333%; } .col-xs-8 { flex: 0 0 auto; width: 66.66666667%; } .col-xs-9 { flex: 0 0 auto; width: 75%; } .col-xs-10 { flex: 0 0 auto; width: 83.33333333%; } .col-xs-11 { flex: 0 0 auto; width: 91.66666667%; } .col-xs-12 { flex: 0 0 auto; width: 100%; } .offset-xs-1 { margin-left: 8.33333333%; } .offset-xs-2 { margin-left: 16.66666667%; } .offset-xs-3 { margin-left: 25%; } .offset-xs-4 { margin-left: 33.33333333%; } } /* btn-block → Bootstrap 5 removed this; restore display:block full-width behavior */ .btn-block { display: block; width: 100%; } .btn-block + .btn-block { margin-top: 0.5rem; } /* card-block → renamed to card-body in BS4 stable / BS5 */ .card-block { padding: var(--bs-card-spacer-y, 1rem) var(--bs-card-spacer-x, 1rem); } /* navbar-toggleable-sm → navbar-expand-sm: already works in BS5 */ /* Dropdown menus need explicit z-index in BS5 */ .navbar .dropdown-menu { z-index: 1031; } /* ===================================================================== HEADER NAVBAR — regole originali da bootstrap-extended.css ===================================================================== */ .header-navbar { padding: 0; min-height: 4rem; transition: 300ms ease all; } .header-navbar.navbar-border { border-bottom: 1px solid rgba(0,0,0,0.1); } .header-navbar.navbar-shadow { box-shadow: 0 2px 4px rgba(0,0,0,0.08); } .header-navbar.navbar-without-dd-arrow .nav-link.dropdown-toggle::after { display: none; } /* colori navbar */ .header-navbar.navbar-light { background: #FFFFFF; } .header-navbar.navbar-light .navbar-nav li { line-height: 1; } .header-navbar.navbar-light .navbar-nav .active.nav-link { background-color: rgba(0,0,0,0.03); } .header-navbar.navbar-light .navbar-nav .disabled.nav-link { color: #818a91; } .header-navbar.navbar-dark { background: #1D2B36; } .header-navbar.navbar-dark .navbar-nav li { line-height: 1; } .header-navbar.navbar-dark .navbar-nav .active.nav-link { background-color: rgba(255,255,255,0.05); } .header-navbar.navbar-dark .navbar-nav .disabled.nav-link { color: #eceeef; } .header-navbar.navbar-dark .hamburger-inner, .header-navbar.navbar-dark .hamburger-inner::before, .header-navbar.navbar-dark .hamburger-inner::after { background-color: #FFFFFF; } .header-navbar.navbar-semi-dark { background: #FFFFFF; } .header-navbar.navbar-semi-dark .navbar-header { background: #1D2B36; } .header-navbar.navbar-semi-dark .navbar-nav li { line-height: 1; } .header-navbar.navbar-semi-dark .navbar-nav .nav-link { color: #55595c; } .header-navbar.navbar-semi-dark .navbar-nav .active.nav-link { background-color: rgba(0,0,0,0.03); } /* * ====== NAVBAR LAYOUT BS5 (deterministico, niente float/BFC) ====== * Causa del bug "tutto al centro": bootstrap-extended (BS4) usava float per * navbar-header e nessun flex su navbar-container; in più navbar-container ha * classe "content" → il fix overflow `.content{display:block!important}` ne * azzerava il flex → i gruppi me-auto/ms-auto non avevano spazio da distribuire. * Qui forziamo una riga flex esplicita: [navbar-header][navbar-container flex:1]. */ /* * IMPORTANTE: questo layout flex vale SOLO da md in su (≥768px). Sotto i 768px * vale il layout MOBILE "stacked" del tema (navbar-header width:100% con logo * centrato + navbar-container a tutta larghezza sotto, con il toggler che rivela * lingua/account). Senza questo scope, il flex-nowrap + navbar-header 240px * schiacciava la navbar-container su mobile e lingua/account sparivano. */ @media (min-width: 768px) { .header-navbar .navbar-wrapper { display: flex !important; align-items: stretch; flex-wrap: nowrap; width: 100%; } /* navbar-container ha class "content": serve specificità alta + !important per battere `html body .content{display:block!important;width:auto!important}` */ .header-navbar .navbar-wrapper > .navbar-container, .header-navbar .navbar-container.content { display: flex !important; align-items: center; flex: 1 1 auto; width: auto !important; min-width: 0; margin-left: 0 !important; } /* navbar-header: zona logo/brand (larghezza fissa sinistra) */ .header-navbar .navbar-header { height: 4rem; width: 240px; float: none !important; flex: 0 0 auto; display: flex; align-items: center; position: relative; padding: 0 1rem; transition: 300ms ease all; } } .header-navbar .navbar-header .navbar-brand { padding: 15px 6px; } /* * MOBILE (<768px): la navbar-container ha classe `content`, e il fix overflow * `html body .content{display:block!important}` la forza a block: va bene, ma * assicuriamo che il toggler (rivela lingua/account) sia visibile e a destra, * e che la collapse aperta mostri lingua/account a tutta larghezza. */ @media (max-width: 767px) { /* niente scroll orizzontale di pagina: clip SOLO sull'header esterno. */ .header-navbar { overflow-x: hidden; max-width: 100%; } .header-navbar .navbar-wrapper, .header-navbar .navbar-container { max-width: 100%; } /* RIGA 1 (unica, nowrap): [☰ sidebar][logo][.....][⌄ toggler lingua/account]. La collapse (#navbar-mobile) va a capo DENTRO la navbar-container (che è wrap). */ .header-navbar .navbar-wrapper { display: flex !important; flex-wrap: nowrap !important; /* header e container SEMPRE sulla stessa riga */ align-items: center; width: 100%; } /* BS5 mette .navbar-nav in COLONNA sotto md (row solo con navbar-expand-md ≥768). Qui forziamo la riga, altrimenti hamburger e logo si impilano. */ .header-navbar .navbar-nav { flex-direction: row !important; align-items: center; margin: 0 !important; } /* alta specificità (body + > ) per battere `@media max-767 .navbar-header{width:100%!important}` di bootstrap-extended che spingeva il container (col toggler) a capo */ body .header-navbar .navbar-wrapper > .navbar-header { width: auto !important; min-width: 0; flex: 0 1 auto !important; float: none !important; display: flex; align-items: center; padding: 0 0.25rem !important; } /* IL LOGO non absolute-centered (cadeva sotto/sovrapponeva l'hamburger) */ .header-navbar .navbar-header .navbar-brand { position: static !important; transform: none !important; left: auto !important; max-width: 110px; padding: 0 0.25rem !important; } .header-navbar .navbar-header .navbar-brand img { max-height: 2.2rem; width: auto; } .header-navbar .navbar-container.content { display: flex !important; flex: 1 1 auto; flex-wrap: wrap; align-items: center; width: auto !important; min-width: 0; margin: 0 !important; padding: 0 0.25rem; } /* TOGGLER VISIBILE a destra: apre il menu lingua/account (collapse). Forziamo un'icona hamburger scura (su navbar chiara) perché lo SVG di default a volte non si vedeva. */ .header-navbar .navbar-toggler { display: inline-flex !important; align-items: center; margin-left: auto; flex: 0 0 auto; padding: 0.3rem 0.55rem; border: 1px solid rgba(0,0,0,.2); border-radius: 0.25rem; background: transparent; } .header-navbar .navbar-toggler .navbar-toggler-icon { width: 1.4em; height: 1.4em; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2829,43,54,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; } /* la collapse #navbar-mobile: NASCOSTA finché non si preme il toggler; da aperta va a capo a tutta larghezza (riga 2) con lingua/account + testo */ .header-navbar #navbar-mobile { flex-basis: 100%; order: 99; width: 100%; } .header-navbar #navbar-mobile.collapse:not(.show) { display: none !important; } .header-navbar #navbar-mobile.show, .header-navbar #navbar-mobile.collapsing { display: flex !important; flex-wrap: wrap; width: 100%; } /* il gruppo interno menu-toggle+fullscreen (d-none su mobile) resta nascosto */ .header-navbar #navbar-mobile .navbar-nav.me-auto { display: none !important; } /* lingua/account a destra, in riga; QUI il testo si vede (c'è spazio a tutta larghezza) */ .header-navbar #navbar-mobile .navbar-nav.ms-auto { margin-left: auto !important; flex-direction: row !important; align-items: center; flex-wrap: wrap; width: 100%; justify-content: flex-end; } .header-navbar #navbar-mobile .nav-link { padding: 0.6rem 0.5rem; } .header-navbar #navbar-mobile .dropdown-menu { position: static !important; transform: none !important; } } /* * #1 — Azzeramento margin-left della navbar-container. * vertical-menu.min.css (che carica DOPO) mette margin-left:240px/60px su * `.navbar .navbar-container` in base a menu-expanded/collapsed. Con il layout * flex la navbar-header occupa GIÀ 240px → il margine raddoppiava l'offset. * Match della stessa specificità + !important per vincere su vertical-menu. */ body.vertical-layout.vertical-menu .navbar .navbar-container, body.vertical-layout.vertical-menu.menu-expanded .navbar .navbar-container, body.vertical-layout.vertical-menu.menu-collapsed .navbar .navbar-container, body.vertical-layout.vertical-menu.menu-flipped .navbar .navbar-container { margin-left: 0 !important; margin-right: 0 !important; } /* * #3/#4 — Caret dropdown centrato verticalmente. * Il caret ::after del tema ha `top:-9px` (tarato sui nav-link alti della navbar) * → sia sui `.btn` sia sui nav-link della navbar finisce in cima. Lo centriamo * ovunque azzerando il posizionamento relativo e usando vertical-align:middle. * (La visibilità/posizione del MENU è ora gestita da BS5+Popper: vedi * bootstrap-extended-bs5.css dove è stata rimossa l'animazione BS4.) */ .btn.dropdown-toggle::after, .btn-group > .btn.dropdown-toggle::after, .header-navbar .navbar-nav .dropdown-toggle::after, .header-navbar .nav-link.dropdown-toggle::after, .dropdown-user-link.dropdown-toggle::after { position: static !important; top: auto !important; right: auto !important; vertical-align: middle !important; margin-left: 0.255em; } /* * #5 — .btn-secondary. In BS5 è grigio pieno (#6c757d); il tema Robust (BS4) la * vuole CHIARA (sfondo bianco, bordo grigio, testo scuro). Override via variabili BS5. */ .btn-secondary { --bs-btn-color: #373A3C; --bs-btn-bg: #FFFFFF; --bs-btn-border-color: #818A91; --bs-btn-hover-color: #373A3C; --bs-btn-hover-bg: #F2F2F2; --bs-btn-hover-border-color: #818A91; --bs-btn-active-color: #373A3C; --bs-btn-active-bg: #E6E6E6; --bs-btn-active-border-color: #818A91; --bs-btn-disabled-color: #373A3C; --bs-btn-disabled-bg: #FFFFFF; --bs-btn-disabled-border-color: #818A91; } /* * #stati bottoni: il tema (colors.css, stile BS4) imposta solo il colore BASE; * BS5 gestisce hover/active(pressione)/focus/disabled con le variabili --bs-btn-* * che il tema non definiva → negli stati i bottoni tornavano al BLU di default. * Qui mappiamo le variabili BS5 ai colori del tema così restano coerenti. */ .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: #967ADC; --bs-btn-border-color: #967ADC; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #7d5fc9; --bs-btn-hover-border-color: #7d5fc9; --bs-btn-active-color: #fff; --bs-btn-active-bg: #6d4fbf; --bs-btn-active-border-color: #6d4fbf; --bs-btn-focus-shadow-rgb: 150, 122, 220; } .btn-success { --bs-btn-color: #fff; --bs-btn-bg: #37BC9B; --bs-btn-border-color: #37BC9B; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #2fa588; --bs-btn-hover-border-color: #2fa588; --bs-btn-active-color: #fff; --bs-btn-active-bg: #2a9479; --bs-btn-active-border-color: #2a9479; --bs-btn-focus-shadow-rgb: 55, 188, 155; } .btn-info { --bs-btn-color: #fff; --bs-btn-bg: #3BAFDA; --bs-btn-border-color: #3BAFDA; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #2aa3d0; --bs-btn-hover-border-color: #2aa3d0; --bs-btn-active-color: #fff; --bs-btn-active-bg: #2898c2; --bs-btn-active-border-color: #2898c2; --bs-btn-focus-shadow-rgb: 59, 175, 218; } .btn-warning { --bs-btn-color: #212529; --bs-btn-bg: #F6BB42; --bs-btn-border-color: #F6BB42; --bs-btn-hover-color: #212529; --bs-btn-hover-bg: #f5b22a; --bs-btn-hover-border-color: #f5b22a; --bs-btn-active-color: #212529; --bs-btn-active-bg: #f0a91c; --bs-btn-active-border-color: #f0a91c; --bs-btn-focus-shadow-rgb: 246, 187, 66; } .btn-danger { --bs-btn-color: #fff; --bs-btn-bg: #DA4453; --bs-btn-border-color: #DA4453; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #d32d3e; --bs-btn-hover-border-color: #d32d3e; --bs-btn-active-color: #fff; --bs-btn-active-bg: #c62736; --bs-btn-active-border-color: #c62736; --bs-btn-focus-shadow-rgb: 218, 68, 83; } /* * DISABILITATO = grigiastro (come ci si aspetta), per TUTTI i bottoni tranne i * btn-link. Prima i disabilitati restavano colorati/blu (opacity BS5). */ .btn:disabled:not(.btn-link), .btn.disabled:not(.btn-link), fieldset:disabled .btn:not(.btn-link) { background-color: #e2e2e2 !important; border-color: #cfcfcf !important; color: #9a9a9a !important; opacity: 1 !important; box-shadow: none !important; } /* * Modal close button: il markup usa la classe BS4 `.close` (BS5 l'ha rinominata in * `.btn-close`, icona SVG di sfondo). Senza stile la `.close` appare come quadratino * grigio attaccato al logo. Ripristiniamo l'aspetto BS4 (× trasparente) e la spingiamo * a destra nell'header flex. (Il colore bianco arriva dallo style inline nel markup.) */ .modal-header { display: flex; align-items: center; justify-content: space-between; } button.close, .modal-header .close { box-sizing: content-box; padding: 0; background: transparent; border: 0; font-size: 1.6rem; font-weight: 700; line-height: 1; text-shadow: none; opacity: .85; cursor: pointer; } button.close:hover { opacity: 1; } .modal-header .close { margin: -0.5rem -0.25rem -0.5rem auto; } /* allinea a destra */ .header-navbar.navbar-brand-center .navbar-header { width: 130px; position: absolute; left: 50%; padding: 0; margin: 0; transform: translate(-50%, 0); } /* navbar-container: area destra con link, dropdown utente ecc. */ .header-navbar .navbar-container { padding: 0 1rem; height: 4rem; transition: 300ms ease all; background: inherit; } .header-navbar .navbar-container ul.nav li > a.nav-link { padding: 1.5rem 0.6rem; } .header-navbar .navbar-container ul.nav li > a.nav-link i.flag-icon { margin-right: 0.5rem; } .header-navbar .navbar-container ul.nav li a.dropdown-user-link { padding: 0.9rem 0.6rem; } .header-navbar .navbar-container ul.nav li a.dropdown-user-link .user-name { display: inline-block; margin-bottom: 0.4rem; margin-left: 0.2rem; } .header-navbar .navbar-container ul.nav li a.menu-toggle { padding: 1.1rem 0.8rem 1rem 1rem; } .header-navbar .navbar-container ul.nav li a.menu-toggle i { font-size: 1.7rem; } .header-navbar .navbar-container ul.nav li a.nav-link-label { padding: 1.4rem 0 1rem 0.8rem; } .header-navbar .navbar-container ul.nav li a.dropdown-user-link .avatar { margin-right: 0.5rem; } .header-navbar .navbar-container ul.nav li a.nav-link-search, .header-navbar .navbar-container ul.nav li a.nav-link-expand { padding: 1.4rem 1rem 1.3rem 1rem; } .header-navbar .navbar-container ul.nav li a.upgrade-to-pro { margin-top: 9px; } .header-navbar .navbar-container ul.nav li div.input-group { padding: 0.7rem 1rem; } .header-navbar .navbar-container ul.nav li i.ficon { font-size: 1.2rem; } .header-navbar .navbar-container ul.nav li .list-group { max-height: 20rem; } .header-navbar .navbar-container ul.nav li .scrollable-container { position: relative; } .header-navbar .navbar-container .dropdown-menu-media { width: 24rem; } .header-navbar .navbar-container .dropdown-menu-media .list-group .list-group-item { padding: 1rem; border: none; border-top: 1px solid #E6E6E6; border-bottom: 1px solid #E6E6E6; } .header-navbar .navbar-container .dropdown-menu-media .dropdown-menu-header { border-bottom: 1px solid #E6E6E6; } .header-navbar .navbar-container .dropdown-menu-media .dropdown-menu-footer a { padding: 0.3rem; border-top: 1px solid #E6E6E6; } .header-navbar.navbar-without-menu .navbar-container { margin-left: 0; } .header-navbar .nav-item + .nav-item { margin-left: 0; } /* BS5: il wrapper #navbar-mobile deve distribuire i due