@font-face {
  font-display: swap;
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 400;
  src: url('../webfonts/funnel-display-v3-latin-regular.woff2') format('woff2'),
       url('../webfonts/funnel-display-v3-latin-regular.woff') format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 500;
  src: url('../webfonts/funnel-display-v3-latin-500.woff2') format('woff2'),
       url('../webfonts/funnel-display-v3-latin-500.woff') format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 600;
  src: url('../webfonts/funnel-display-v3-latin-600.woff2') format('woff2'),
       url('../webfonts/funnel-display-v3-latin-600.woff') format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 700;
  src: url('../webfonts/funnel-display-v3-latin-700.woff2') format('woff2'),
       url('../webfonts/funnel-display-v3-latin-700.woff') format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 800;
  src: url('../webfonts/funnel-display-v3-latin-800.woff2') format('woff2'),
       url('../webfonts/funnel-display-v3-latin-800.woff') format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'Funnel Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../webfonts/funnel-sans-v3-latin-regular.woff2') format('woff2'),
       url('../webfonts/funnel-sans-v3-latin-regular.woff') format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'Funnel Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../webfonts/funnel-sans-v3-latin-500.woff2') format('woff2'),
       url('../webfonts/funnel-sans-v3-latin-500.woff') format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'Funnel Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../webfonts/funnel-sans-v3-latin-600.woff2') format('woff2'),
       url('../webfonts/funnel-sans-v3-latin-600.woff') format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'Funnel Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../webfonts/funnel-sans-v3-latin-700.woff2') format('woff2'),
       url('../webfonts/funnel-sans-v3-latin-700.woff') format('woff');
}

@font-face {
  font-display: swap;
  font-family: 'Funnel Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../webfonts/funnel-sans-v3-latin-800.woff2') format('woff2'),
       url('../webfonts/funnel-sans-v3-latin-800.woff') format('woff');
}

/* Typography */
h1 { font-size: 2.2rem; margin-bottom: 0.3rem; color: #fff; font-family: 'Funnel Display';}
h2, h3.upper {font-size: 1.2rem; text-transform: uppercase;}
h2.introduction {text-transform: none; font-size: 1.8rem; font-weight: 700; color: #054968; font-family: 'Funnel Display';}
h3 {font-size: 1.1rem;}
h4 {font-size: 0.95rem;}
html, body { min-height: 100%; margin: 0;}
body { font-family: 'Funnel Sans'; font-size: 1rem; line-height: 1.3; background-color: #f4f6f8;}

header { position: sticky; top: 0; z-index: 1000;}
.gradient {background: linear-gradient(160deg,rgb(5, 73, 104) 0%, rgb(0, 125, 119) 100% );}
.bg-white-subtle {background-color: #ffffff1b;}
.border-subtle { border: 1px solid #cad3d879;}
.border-subtle-dark-bottom { border-bottom: 1px solid #b4c3cb;}
.border-subtle-dark-top { border-top: 1px solid #b4c3cb;}
.border-subtle-dark { border: 1px solid #b4c3cb;}
.border-subtle-striped { border: 1px dashed #b4c3cb;}
.text-subtle {color: #b4c3cb;}
.number {font-size: 2rem; font-weight: 600;}
.stats i, .projecticon i {background-color: #ffffff49; width: 3rem; height: 3rem; border-radius: 10px; line-height: 2.5; font-size: 1.2rem;}
.projecticon i {background-color: #deeaee; color: #007d77; border: 1px solid #007d7733; }
.bg-green-light {background: #deeaee;}
.domain {letter-spacing: 0.07rem;}
.newmap i {background-color: #deeaee; width: 3rem; height: 3rem; border-radius: 50%; line-height: 1.9;}
.bg-lightblue {background-color: #f0f5f7;}

/*Linkhover*/
a.stripedlink:hover > .row > .border-subtle-striped, a.stripedlink:focus > .row > .border-subtle-striped, .stripedlink:hover, .stripedlink:focus { border-color: #054968 !important; transition: 0.3s ease; color: #054968;}
.dropdown-item.item-delete.active, .dropdown-item.item-delete:active {background-color: #c0392b; color: #fff!important;}

/*Steps oben*/
.step-circle {background-color: #deeaee; width: 1.7rem; height: 1.7rem; display: inline-block; border-radius: 50%; text-align: center; line-height: 1.6;}
.active .step-circle {background-color: #054968; color: #fff; font-weight: 400;}
.step.active {border-bottom: 3px solid #054968; font-weight: 600; color: #054968;}
.finished .step-circle {background-color: #007d77; color: #fff;}
.step.finished {border-bottom: 3px solid #007d77; color: #007d77;}
.step {width: 25%;}

/*Color Select*/
.color-option { width: 2.2rem; height: 2.2rem; border-radius: .375rem; cursor: pointer; transition: .2s; }
.btn-check {width: 2.2rem; height: 2.2rem;}
.color-option:hover { transform: scale(1.05); }
.btn-check:checked + .color-option { border-color: var(--bs-primary); box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25); }
.color-option-custom { background-color: var(--bs-light); color: var(--bs-secondary-color);}
.custom-color-picker { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;}
.border-dashed {border: 1px dashed #b4c3cb; border-radius: .375rem;}

/*Mapselect*/
.selection-card { display:block; overflow:hidden; position: relative; border:2px solid var(--bs-border-color); border-radius:.75rem; cursor:pointer; transition:.2s; background:#fff;}
.selection-card img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover;}
.sm-selection img {aspect-ratio: 16/5;}
.selection-card:hover{ border-color:var(--bs-primary);}
.btn-check:checked + .selection-card{ border-color:var(--bs-primary); box-shadow:0 0 0 .2rem rgba(var(--bs-primary-rgb),.2);}
.selection-card-lg{ font-size:1.1rem; }
.selection-card h3 {font-family: 'Funnel Display';}
.selection-card::after { content: "\f00c"; font-family: "Font Awesome 7 Pro"; font-weight: 900; position: absolute; top: .75rem; right: .75rem; width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;  background: var(--bs-primary); color: #fff; opacity: 0; transform: scale(.8); transition: all .2s ease; z-index: 2;}
.btn-check:checked + .selection-card::after { opacity: 1; transform: scale(1);}

/*Mapsettings*/
.form-range::-webkit-slider-runnable-track {background: #deeaee; border: 1px solid #b4c3cb;}
.form-range::-moz-range-track { background: #deeaee;}
.form-range {--progress: 50%; }
.form-range::-webkit-slider-runnable-track { background: linear-gradient(to right,#054968 0%,#054968 var(--progress),#deeaee var(--progress),#deeaee 100%); border-radius: 10px; }
.form-range::-moz-range-track { background: #deeaee; border-radius: 10px;}
.form-range::-moz-range-progress { background: #054968; border-radius: 10px; }
.squareicon {width: 2rem!important; height: 2rem; line-height: 1.9rem!important;}
.squareicon-big {width: 3rem!important; height: 3rem; line-height: 3rem!important;}

/*Mapmarker*/
.accordion-button::after {display: none;}

/*MapURL*/
.form-switch .form-check-input {width: 3rem; height: 1.5rem;}

/*MapOwnMap*/
.fa-grip-dots-vertical { cursor: grab; }
.fa-grip-dots-vertical:active { cursor: grabbing; }
.sortable-chosen, .sortable-chosen * { cursor: grabbing !important; }
.sortable-ghost { 
    background-color: #f0f5f7 !important; /* bg-lightblue */
    border: 2px dashed #b4c3cb !important;
    opacity: 1 !important;
}
.sortable-ghost * {
    opacity: 0 !important; /* Hide content of the placeholder */
}

/*Breakpoints*/
@media (max-width: 1399.98px) {
}

@media (max-width: 1199.98px) {

}

@media (max-width: 991.98px) { 

}

@media (max-width: 767.98px) { 

}

@media (max-width: 575.98px) {

}

@media (max-width: 459.98px) { 

}

@media (max-width: 399.98px) { 

}
/* Custom Leaflet Map Styles */
.flush-popup .leaflet-popup-content-wrapper {
    padding: 0;
    overflow: hidden;
}
.flush-popup .leaflet-popup-content {
    margin: 0 !important;
}
.flush-popup .leaflet-popup-close-button {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    z-index: 10;
}
.leaflet-container {
    cursor: crosshair !important;
}
.leaflet-interactive {
    cursor: pointer !important;
}