@media (min-width: 1200px) {
    .col-xl {
        flex: 1 0 0%;
    }
    .row-cols-xl-auto > * {
        flex: 0 0 auto;
        width: auto;
    }
    .row-cols-xl-1 > * {
        flex: 0 0 auto;
        width: 100%;
    }
    .row-cols-xl-2 > * {
        flex: 0 0 auto;
        width: 50%;
    }
    .row-cols-xl-3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%;
    }
    .row-cols-xl-4 > * {
        flex: 0 0 auto;
        width: 25%;
    }
    .row-cols-xl-5 > * {
        flex: 0 0 auto;
        width: 20%;
    }
    .row-cols-xl-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%;
    }
    .col-xl-auto {
        flex: 0 0 auto;
        width: auto;
    }
    .col-xl-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }
    .col-xl-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }
    .col-xl-3 {
        flex: 0 0 auto;
        width: 25%;
    }
    .col-xl-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    .col-xl-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }
    .col-xl-6 {
        flex: 0 0 auto;
        width: 50%;
    }
    .col-xl-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }
    .col-xl-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
    .col-xl-9 {
        flex: 0 0 auto;
        width: 75%;
    }
    .col-xl-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }
    .col-xl-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }
    .col-xl-12 {
        flex: 0 0 auto;
        width: 100%;
    }
    .offset-xl-0 {
        margin-left: 0;
    }
    .offset-xl-1 {
        margin-left: 8.33333333%;
    }
    .offset-xl-2 {
        margin-left: 16.66666667%;
    }
    .offset-xl-3 {
        margin-left: 25%;
    }
    .offset-xl-4 {
        margin-left: 33.33333333%;
    }
    .offset-xl-5 {
        margin-left: 41.66666667%;
    }
    .offset-xl-6 {
        margin-left: 50%;
    }
    .offset-xl-7 {
        margin-left: 58.33333333%;
    }
    .offset-xl-8 {
        margin-left: 66.66666667%;
    }
    .offset-xl-9 {
        margin-left: 75%;
    }
    .offset-xl-10 {
        margin-left: 83.33333333%;
    }
    .offset-xl-11 {
        margin-left: 91.66666667%;
    }
    .g-xl-0,
    .gx-xl-0 {
        --bs-gutter-x: 0rem;
    }
    .g-xl-0,
    .gy-xl-0 {
        --bs-gutter-y: 0rem;
    }
    .g-xl-1,
    .gx-xl-1 {
        --bs-gutter-x: 0.25rem;
    }
    .g-xl-1,
    .gy-xl-1 {
        --bs-gutter-y: 0.25rem;
    }
    .g-xl-2,
    .gx-xl-2 {
        --bs-gutter-x: 0.5rem;
    }
    .g-xl-2,
    .gy-xl-2 {
        --bs-gutter-y: 0.5rem;
    }
    .g-xl-3,
    .gx-xl-3 {
        --bs-gutter-x: 0.75rem;
    }
    .g-xl-3,
    .gy-xl-3 {
        --bs-gutter-y: 0.75rem;
    }
    .g-xl-4,
    .gx-xl-4 {
        --bs-gutter-x: 1rem;
    }
    .g-xl-4,
    .gy-xl-4 {
        --bs-gutter-y: 1rem;
    }
    .g-xl-5,
    .gx-xl-5 {
        --bs-gutter-x: 1.25rem;
    }
    .g-xl-5,
    .gy-xl-5 {
        --bs-gutter-y: 1.25rem;
    }
    .g-xl-6,
    .gx-xl-6 {
        --bs-gutter-x: 1.5rem;
    }
    .g-xl-6,
    .gy-xl-6 {
        --bs-gutter-y: 1.5rem;
    }
    .g-xl-7,
    .gx-xl-7 {
        --bs-gutter-x: 1.75rem;
    }
    .g-xl-7,
    .gy-xl-7 {
        --bs-gutter-y: 1.75rem;
    }
    .g-xl-8,
    .gx-xl-8 {
        --bs-gutter-x: 2rem;
    }
    .g-xl-8,
    .gy-xl-8 {
        --bs-gutter-y: 2rem;
    }
    .g-xl-9,
    .gx-xl-9 {
        --bs-gutter-x: 2.25rem;
    }
    .g-xl-9,
    .gy-xl-9 {
        --bs-gutter-y: 2.25rem;
    }
    .g-xl-10,
    .gx-xl-10 {
        --bs-gutter-x: 2.5rem;
    }
    .g-xl-10,
    .gy-xl-10 {
        --bs-gutter-y: 0rem;
    }
}


.newtitle {
    font-family: var(--bs-font-sans-serif3);
    font-stretch: condensed;
    font-weight: 100;
}

.mb-30 {
    margin-bottom: 6rem !important;
}


.modal.left .modal-dialog,
.modal.right .modal-dialog {
    position: fixed;
    margin: auto;
    width: 320px;
    height: 100%;
    -webkit-transform: translate3d(0%, 0, 0);
        -ms-transform: translate3d(0%, 0, 0);
         -o-transform: translate3d(0%, 0, 0);
            transform: translate3d(0%, 0, 0);
}

.modal.left .modal-content,
.modal.right .modal-content {
    height: 100%;
    overflow-y: auto;
}

.modal.left .modal-body,
.modal.right .modal-body {
    padding: 15px 15px 80px;
}

/*Left*/
.modal.left.fade .modal-dialog{
    left: -320px;
    -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
       -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
         -o-transition: opacity 0.3s linear, left 0.3s ease-out;
            transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.left.fade.in .modal-dialog{
    left: 0;
}
    
/*Right*/
.modal.right.fade .modal-dialog {
    right: -320px;
    -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
       -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
         -o-transition: opacity 0.3s linear, right 0.3s ease-out;
            transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.in .modal-dialog {
    right: 0;
}

/* ----- MODAL STYLE ----- */
.modal-content {
    border-radius: 0;
    border: none;
}

.modal-header {
    border-bottom-color: #EEEEEE;
    background-color: #FAFAFA;
}

/* ----- v CAN BE DELETED v ----- */
body {
    background-color: #78909C;
}

.demo {
padding-top: 60px;
padding-bottom: 110px;
}

.btn-demo {
margin: 15px;
padding: 10px 15px;
border-radius: 0;
font-size: 16px;
background-color: #FFFFFF;
}

.btn-demo:focus {
outline: 0;
}

.demo-footer {
position: fixed;
bottom: 0;
width: 100%;
padding: 15px;
background-color: #212121;
text-align: center;
}

.demo-footer > a {
text-decoration: none;
font-weight: bold;
font-size: 16px;
color: #fff;
}


.spid-drawer-body {
    width: 420px;
    max-width: 100vw;
}

.spid-drawer-preview {
    position: relative;
    overflow: hidden;
}

.spid-preview-content {
    filter: blur(3px);
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
}

.spid-preview-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 32px 28px;
    text-align: center;
    background: linear-gradient(180deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.78) 40%, rgba(255,255,255,0.9) 100%);
    backdrop-filter: saturate(1.05);
}

.spid-preview-badge {
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 999px;
    color: #be123c;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 7px 12px;
    text-transform: uppercase;
}

.spid-preview-title {
    color: #111827;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
    max-width: 300px;
}

.spid-preview-copy {
    color: #4b5563;
    font-size: 1.1rem;
    line-height: 1.55;
    max-width: 310px;
}

.spid-intro-card {
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
    border: 1px solid #d9e8ff;
    border-radius: 1px;
    padding: 16px 18px;
}

.spid-intro-title {
    color: #003b7a;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.spid-intro-copy {
    color: #333b44;
    font-size: 1rem;
    line-height: 1.55;
}

.spid-provider-list {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.spid-provider-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 1px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    padding: 16px;
}

.spid-provider-main {
    display: block;
    margin-bottom: 14px;
}

.spid-provider-logo-shell {
    align-items: center;
    background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
    border: 1px solid #dbe3ef;
    border-radius: 1px;
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    min-height: 72px;
    padding: 10px 12px;
}

.spid-provider-logo {
    text-align: center;
    text-wrap: balance;
}

.spid-provider-meta {
    min-width: 0;
}

.spid-provider-subtitle {
    color: #6b7280;
    font-size: 0.85rem;
    text-align: center;
}

.spid-provider-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.spid-provider-actions .btn {
    border-radius: 2px;
}

@media (max-width: 575.98px) {
    .spid-drawer-body {
        width: 100% !important;
    }

    .spid-provider-list {
        grid-template-columns: 1fr;
    }

    .spid-provider-card {
        border-radius: 1px;
        padding: 5px;
    }
}


				.sidepanel.sidepanel-hint-active .sidepanel-toggle-container {
					overflow: visible;
				}

				.sidepanel.sidepanel-hint-active .sidepanel-toggle-container .sidepanel-toggle-button::after {
					content: "";
					position: absolute;
					top: 50%;
					right: calc(100% + 10px);
					width: 52px;
					height: 22px;
					transform: translateY(-50%);
					background: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2252%22%20height%3D%2222%22%20viewBox%3D%220%200%2052%2022%22%3E%3Cpath%20d%3D%22M2%2011h34%22%20stroke%3D%22%23dc2626%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M28%204l12%207-12%207%22%20fill%3D%22none%22%20stroke%3D%22%23dc2626%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2245%22%20cy%3D%2211%22%20r%3D%225%22%20fill%3D%22%23dc2626%22%20fill-opacity%3D%220.18%22%2F%3E%3C%2Fsvg%3E") no-repeat 50% 50%;
					background-size: contain;
					pointer-events: none;
					animation: sidepanelHintArrow 1s ease-in-out 0s 10;
				}

				.sidepanel.sidepanel-hint-active .sidepanel-toggle-container .sidepanel-toggle-button {
					box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.45), 0 1px 2px rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
					animation: sidepanelHintPulse 1s ease-in-out 0s 10;
				}

				@keyframes sidepanelHintArrow {
					0%, 100% {
						opacity: 0.45;
						transform: translateY(-50%) translateX(0);
					}
					50% {
						opacity: 1;
						transform: translateY(-50%) translateX(20px);
					}
				}

				@keyframes sidepanelHintPulse {
					0%, 100% {
						box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.15), 0 1px 2px rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
					}
					50% {
						box-shadow: 0 0 0 10px rgba(220, 38, 38, 0), 0 1px 2px rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
					}
				}

@media (min-width: 768px) {
    #mySidepanelLeft {
        --mc-sidepanel-tabs-width: 50px;
        --mc-sidepanel-full-width: 400px;
    }

    /* Desktop: tabs sempre visibili, contenuto visibile solo quando il pannello e' aperto. */
    #mySidepanelLeft.sidepanel.sidepanel-left {
        left: 0;
        transform: none !important;
        width: var(--mc-sidepanel-tabs-width);
    }

    #mySidepanelLeft.sidepanel.sidepanel-left.opened {
        width: var(--mc-sidepanel-full-width);
    }

    #mySidepanelLeft.sidepanel.sidepanel-left:not(.opened) {
        width: var(--mc-sidepanel-tabs-width);
    }

    #mySidepanelLeft .sidepanel-content-wrapper {
        display: none;
    }

    #mySidepanelLeft.sidepanel.sidepanel-left.opened .sidepanel-content-wrapper {
        display: block;
    }

    #mySidepanelLeft.sidepanel.sidepanel-left.opened,
    #mySidepanelLeft.sidepanel.sidepanel-left.closed {
        animation: none !important;
    }

    #map {
        padding-left: var(--mc-sidepanel-tabs-width);
        box-sizing: border-box;
    }

    /* */

    #map .leaflet-left {
        left: 50px;
    }
       
}

/*
.leaflet-left {
  left: 50px;
}
  */