/*
 * ============================================================================
 * This work is protected by copyright laws and international treaties.
 * Copyright (c) 2020 - 2024, Dr. Andrew Marsh.
 * All Rights Reserved.
 * ============================================================================
 * cspell:ignore offcanvas dropend hilite
 */

:root,
[data-bs-theme=light] {
    --bs-body-bg: #f6f7f8;
    --bs-body-bg-lighter: #ffffff;
    --bs-body-bg-darker: #f1f2f4;
    --bs-border-color: #b8b8b8;
    --pd-semi-selected: #337ab722;
    --pd-selected: #337ab744;
    --pd-active-focus: #88888822;
    --pd-active-hover: #66aaff22;
    --pd-active-light: #afcee9;
    --pd-active-dark: #337ab7;
    --pd-active-text: #212529;
    --pd-active: #9cc2e3;
    --pd-active-rgb: 156, 194, 227;
    --bs-link-color: #337ab7;
    /* Required by Firefox to style <use>icon</use> across the Shadow DOM. */
    --svg-bg: #FFF;
    --svg-fg: #222;
}

[data-bs-theme=dark] {
    --bs-body-bg: #212426;
    --bs-body-bg-lighter: #21262c;
    --bs-body-bg-darker: #1c1f21;
    --bs-border-color: #555555;
    --pd-active-hover: #337ab744;
    --pd-active-light: #3c93de;
    --pd-active-text: #9aa6b1;
    --pd-active: #337ab7;
    --pd-active-rgb: 51, 122, 183;
    --bs-link-color: #66aaff;
}

/* --- HTML & BODY ----------------- */

html,
body {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    /* Old Browser Fallback. */
    min-height: 100%;
    min-width: 100%;
    height: 100%;
    width: 100%;
    /* Modern Browsers. */
    min-height: 100vh;
    min-width: 100vw;
    height: 100vh;
    width: 100vw;
}

html,
body {
    /* Start with dark background to avoid flash of  */
    /* bright light before UI rendered in dark mode. */
    background: #1e1e1e;
}

html {
    /* Scale UI down slightly from default 16px. */
    font-size: 9px;
}

@media (min-width: 576px) {
    html {
        font-size: 9px;
    }
}

@media (min-width: 768px) {
    html {
        font-size: 10px;
    }
}

@media (min-width: 992px) {
    html {
        font-size: 11px;
    }
}

@media (min-width: 1200px) {
    html {
        font-size: 12px;
    }
}

@media (min-width: 1600px) {
    html {
        font-size: 13px;
    }
}

@media (min-width: 2000px) {
    html {
        font-size: 14px;
    }
}

/* Used to fix an iOS zoom scale bug. */
html.full-height,
html.full-height body {
    height: calc(var(--window-inner-height, 100vh) - 1px) !important;
    min-height: calc(var(--window-inner-height, 100vh) - 1px) !important;
    max-height: calc(var(--window-inner-height, 100vh) - 1px) !important;
    box-sizing: border-box;
    overflow: hidden;
}

/* --- CANVAS & BLDG-EDITOR -------- */

canvas:focus,
canvas:focus-visible,
#bldg-editor:focus,
#bldg-editor:focus-visible {
    box-shadow: none !important;
    outline: none !important;
}

:focus-visible {
    box-shadow: 0 0 0.25rem 0.25rem var(--pd-active) !important;
    outline: none !important;
}

/* --- PD CONTAINERS --------------- */

.pd-fit-to-page {
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    max-width: 100vw;
    max-height: 100vh;
    touch-action: none;
    overflow: hidden;
    outline: none;
}

.pd-splash-screen {
    position: absolute;
    text-align: center;
    transform: translate(0%, -50%);
    font-weight: bold;
    width: 100%;
    top: 50%;
}

.pd-splash-screen svg {
    max-height: 20rem;
    max-width: 20rem;
    height: 50vmin;
    width: 50vmin;
}

/* --- UTILITY CLASSES ------------- */

.pd-no-cursor {
    cursor: none;
}

.pd-clickable {
    cursor: pointer;
}

.pd-not-clickable {
    pointer-events: none;
}

.pd-scrollable {
    overflow-y: auto;
}

.pd-hidden-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  overflow-y: auto;
  height: 100%;
}

.pd-hidden-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.pd-select-none { /* Prevent text selection on drag */
    -moz-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.pd-no-outline,
.pd-no-outline:active,
.pd-no-outline:focus {
    box-shadow: none !important;
    outline: none !important;
}

.pd-inactive {
    opacity: 0.4 !important;
}

.pd-overlap {
    display: -ms-grid;
    display: grid;
    justify-items: start;
    align-items: start;
}

.pd-overlap > * {
    grid-column-start: 1;
    grid-row-start: 1;
}

.pd-z-toolbar {
    z-index: 101;
}

.pd-z-canvas {
    z-index: 1;
}

/* --- Font Modifiers --- */

.pd-small {
    font-size: 0.86rem !important;
}

.pd-smaller {
    font-size: 0.75rem !important;
}

.pd-large {
    font-size: 1.1rem !important;
}

.pd-larger {
    font-size: 1.25rem !important;
}

.pd-huge {
    font-size: 1.5rem !important;
    vertical-align: middle;
}

.pd-truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.pd-title {
    font-weight: bold;
}

.pd-subtitle {
    font-size: 90%;
    font-style: italic;
    float: right !important;
    margin-top: 0.2rem;
    color: #888;
}

.pd-help-text,
.pd-text-muted {
    color: #999 !important;
    line-height: 1.15rem;
    text-align: justify;
    font-size: 0.75rem;
    font-style: italic;
}

.pd-help-text {
    display: block !important;
}

.pd-info-text {
    font-size: 0.86rem !important;
}

.pd-para-space-0 p,
.pd-para-space-0 li {
    margin-bottom: 0;
}

.pd-para-space-1 p,
.pd-para-space-1 li {
    margin-bottom: 0.25rem;
}

.pd-para-space-2 p,
.pd-para-space-2 li {
    margin-bottom: 0.5rem;
}

/* --- Icon Transforms --- */

.pd-rotate-90::before {
    transform: rotate(90deg);
}

.pd-rotate-65::before {
    transform: rotate(-65deg);
}

.pd-flip-x::before {
    transform: scale(-1, 1);
}

.pd-flip-y::before {
    transform: scale(1, -1);
}

/* --- PD ITEM HIGHLIGHT ----------- */

.pd-highlight {
    border-radius: 1px;
    outline: transparent solid 0.4rem;
    animation-name: highlight-pulse;
    animation-iteration-count: 1;
    animation-duration: 2000ms;
}

@keyframes highlight-pulse {
    0% {
      background-color: transparent;
      outline-color: transparent;
      outline-offset: 0.1rem;
    }
    75% {
      background-color: rgba(255,128,128,.15);
      outline-offset: 0.25rem;
      outline-color: red;
    }
    100% {
      background-color: transparent;
      outline-color: transparent;
      outline-offset: 0.1rem;
    }
}

/* --- PD BACKGROUND COLORS -------- */

.pd-bg-body {
    background-color: var(--bs-body-bg)
}

.pd-bg-body-lighter {
    background-color: var(--bs-body-bg-lighter);
}

.pd-bg-body-darker {
    background-color: var(--bs-body-bg-darker);
}

.pd-bg-highlight {
    background-color: rgba(255,128,128,.15);
}

.pd-bg-daylight {
    background-color: #b3d1ff;
}

.pd-bg-map {
    background-color: #aad3df;
}

/* --- Selection --- */

.pd-selected {
    background-color: var(--pd-selected) !important;
}

.pd-semi-selected {
    background: var(--pd-semi-selected) !important;
}

/* --- Modifiers ---*/

.pd-bg-darken {
    background-color: rgba(0, 0, 0, 0.05);
}

.pd-bg-lighten {
    background-color: rgba(255, 255, 255, 0.05);
}

.pd-hover-darken {
    background-color: transparent;
}

.pd-hover-darken:hover,
.pd-hover-darken:active {
    background-color: rgba(0, 0, 0, 0.05);
}

.pd-fade {
    -webkit-transition: fill-opacity 0.5s, stroke-opacity 0.5s, opacity 0.5s;
       -moz-transition: fill-opacity 0.5s, stroke-opacity 0.5s, opacity 0.5s;
         -o-transition: fill-opacity 0.5s, stroke-opacity 0.5s, opacity 0.5s;
            transition: fill-opacity 0.5s, stroke-opacity 0.5s, opacity 0.5s;
}

.pd-fade-enter-active,
.pd-fade-leave-active {
    transition: opacity .5s ease-in-out;
}

.pd-fade-enter,
.pd-fade-leave-active {
    opacity: 0;
}

/* --- PD BOX-SHADOWS -------------- */

.pd-shadow-up {
    box-shadow: 0 -0.5rem 1rem 0 rgba(0, 0, 0, .25) !important;
}

.pd-shadow-down {
    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, .25) !important;
}

.pd-shadow-left {
    box-shadow: -0.5rem 0 1rem 0 rgba(0, 0, 0, .25) !important;
}

.pd-shadow-right {
    box-shadow: 0.5rem 0 1rem 0 rgba(0, 0, 0, .25) !important;
}

/* --- PD INPUTS ------------------- */

.pd-input,
.pd-input label,
.pd-input input[type=range],
.pd-input .form-select {
    cursor: pointer;
}

.pd-input input,
.pd-input .form-select,
.pd-input .form-control {
    box-shadow: inset 0px 0px 0.4rem rgba(0, 0, 0, 0.2);
    background-color: rgba(var(--pd-active-rgb), 0.15);
    border-color: #6c757d;
}

[data-bs-theme=dark] .pd-input .form-select,
[data-bs-theme=dark] .pd-input .form-control,
[data-bs-theme=dark] .pd-input input:not(:checked) {
    box-shadow: inset 0px 0px 1.5rem rgba(0, 0, 0, 0.75);
}

/* --- PD ATTRIBUTES --------------- */

.pd-attrib {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

.list-group-item.pd-attrib {
    padding: 0.25rem 0.5rem;
    display: flex;
    gap: 0.25rem;
}

.list-group-item.pd-attrib .form-check-input {
    flex-shrink: 0!important;
}

/* --- PD ICONS -------------------- */

.btn.pd-icon,
.btn.pd-icon-lg,
.btn.pd-icon-sm {
    padding: 0.25rem 0 0.15rem 0 !important;
}

.bi.pd-icon-sm,
.pd-icon-sm .bi {
    font-size: 1rem;
}

.bi.pd-icon-lg::before,
.pd-icon-lg .bi::before {
    vertical-align: -.25em;
    font-size: medium;
}

.pd-icon svg {
    height: 1.75rem;
    width: 1.75rem;
}

.pd-icon-sm svg {
    height: 1.5rem;
    width: 1.5rem;
}

.pd-icon-lg svg {
    height: 2.5rem;
    width: 2.5rem;
}

.pd-icon-text {
    font-weight: bold;
    font-size: 0.7rem !important;;
    margin: 0;
}

.pd-icon-sm .pd-icon-text {
    font-size: 0.6rem;
}

/* --- Project TreeView --- */

.btn-toggle {
    align-items: center;
    display: inline-flex;
    padding: .25rem .5rem;
    font-weight: 600;
    border: none;
    width: 100%;
}

.btn-toggle .indicator {
    transition: transform .35s ease;
    transform-origin: 50% 50%;
}

.btn-toggle[aria-expanded="true"] .indicator {
    transform: rotate(90deg);
}

/* --- Repurpose Buttons  ---------- */

.btn-light {
    --bs-btn-color: var(--bs-body-color) !important;
    --bs-btn-hover-color: var(--bs-emphasis-color);
    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-disabled-color: var(--bs-link-color);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--pd-active-hover);
    --bs-btn-active-bg: var(--pd-active);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-border-color: transparent;
    --bs-gradient: none;
}

.btn-none:active {
    color: var(--bs-body-color) !important;
    background-color: var(--pd-selected) !important;
    border-color: transparent !important;
}

/* --- PD SVG ---------------------- */

.svg-bg {
    color: var(--svg-fg);
    stroke: var(--svg-bg);
    fill: var(--svg-bg);
}

.btn.btn-outline-secondary.active .svg-bg {
    stroke: #4488cc;
    fill: #4488cc;
}

.svg-fill-light {
    fill: #BBB;
}

[data-bs-theme=dark] .svg-fill-light {
    fill: #555;
}

.svg-fill-lighter {
    fill: #DDD;
}

[data-bs-theme=dark] .svg-fill-lighter {
    fill: #333;
}

.svg-fill-timezone {
    fill: #66b8ff;
    stroke: none;
}

[data-bs-theme=dark] .svg-fill-timezone {
    fill: #ffff00;
}

/* --- BS NAVBAR ------------------- */

.navbar .nav-link {
    border-radius: var(--bs-border-radius);
    color: var(--bs-body-color);
}

.navbar .nav-link:hover,
.nav .nav-link:hover:not(.active) {
    background-color: var(--pd-active-hover);
    color: var(--bs-emphasis-color);
}

.navbar .nav-link.show,
.navbar .nav-link:active,
.navbar .nav-link.active {
    background-color: var(--pd-active);
}

.nav .nav-link.disabled,
.nav .nav-link:disabled,
.navbar .nav-link.disabled,
.navbar .nav-link:disabled {
    opacity: 0.4 !important;
}

.nav-pills {
    --bs-nav-pills-link-active-color: #f6f7f8;
    --bs-nav-pills-link-active-bg: var(--pd-active-dark);
    --bs-nav-link-hover-color: var(--bs-link-hover-color);
    --bs-nav-link-color: var(--pd-active-dark);
}

/* --- BS OFFCANVAS ---------------- */

.offcanvas-header {
    background-color: var(--bs-body-bg-lighter);
    padding: 0.25rem 1rem 0.25rem 0.5rem;
}

.offcanvas .nav-tabs {
    background-color: var(--bs-body-bg-lighter);
    padding: 0 0.5rem;
}

.offcanvas-end.pd-shadow-left {
    margin-top: 3rem;
    width: 25rem;
}

/* --- PD ACCORDIONS --------------- */

.pd-accordion .accordion-item {
    border: 1px solid rgba(0,0,0,0.2) !important;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
    padding: 0 0.5rem;
}

[data-bs-theme=dark] .pd-accordion .accordion-item {
    border: 1px solid rgba(250,250,250,0.2) !important;
}

.pd-accordion .accordion-item:last-child {
    margin-bottom: 0;
}

.pd-accordion .accordion-header {
    margin-right: -1rem;
}

.pd-accordion .accordion-body {
    padding: 0 0 0.5rem 0;
    background: none;
}

.pd-accordion .accordion-item {
    background-color: var(--bs-body-bg-lighter);
}

[data-bs-theme=dark] .pd-accordion .accordion-item {
    background-color: var(--bs-body-bg-darker);
}

.pd-accordion .accordion-button,
.pd-accordion .accordion-button:not(.collapsed),
.pd-accordion .accordion-button:focus {
    background-color: transparent !important;
    box-shadow: none;
}

/* .pd-accordion .accordion-button:focus-visible {
    box-shadow: 0 0 0.25rem 0.25rem rgba(108, 117, 125, .5);
    border-radius: 0.25rem !important;
    outline: 0;
}

[data-bs-theme=dark] .pd-accordion .accordion-button:focus-visible {
    box-shadow: 0 0 0.25rem 0.25rem rgba(108, 117, 125, .5);
} */

.pd-accordion .accordion-button {
    color: #4488cc !important;
    margin: 0 -0.5rem 0.125rem -0.5rem;
    font-size: 1.25rem;
    font-weight: 500;
    padding: 0.5rem;
}

[data-bs-theme=dark] .pd-accordion .accordion-button,
[data-bs-theme=dark] .pd-accordion .accordion-button:focus:not(:focus-visible),
[data-bs-theme=dark] .pd-accordion .accordion-button:not(.collapsed) {
    color: #86b0db !important;
}

/* --- BS POPOVERS & MODALS -------- */

.popover {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.4) !important;
    --bs-popover-header-padding-x: 0.5rem;
    --bs-popover-header-padding-y: 0.5rem;
    --bs-popover-body-padding-x: 0.5rem;
    --bs-popover-body-padding-y: 0.5rem;
}

.modal {
    --bs-modal-header-padding: 0.5rem 1rem;
}

.bs-popover-bottom>.popover-arrow::after,
.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow::after {
    border-bottom-color: var(--bs-popover-header-bg);
}

/* --- BS DROPDOWNS ---------------- */

.dropdown-menu {
    --bs-dropdown-color: var(--pd-active-text);
    --bs-dropdown-link-active-bg: var(--pd-active-dark);
    --bs-dropdown-link-hover-bg: var(--pd-active-hover);
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.5) !important;
    z-index: 6000;
}

.pd-shared-menu .dropdown-menu {
    max-height: 100vh;
    overflow-y: auto;
}

.dropdown-menu .pd-panel {
    margin-top: 0.25rem;
    padding: 0 0.5rem;
}

.dropdown-menu .pd-panel:first-child {
    margin-top: 0;
}

.dropdown-header {
    padding: 0 0 0.25rem var(--bs-dropdown-header-padding-x);
    font-size: unset;
}

.dropdown-header:first-child {
    margin-top: 0 !important;
}

.dropdown-menu .pd-panel .dropdown-header {
    padding-left: 0 !important;
}

.dropdown-item {
    -moz-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

.dropdown-item:focus:not(:focus-visible) {
    --bs-dropdown-link-hover-bg: var(--pd-active-focus);
    --bs-dropdown-bg: var(--pd-active-focus);
}

.dropdown-item .pd-shortcut {
    float: inline-end;
    margin: 0.25rem 0 0 0;
    color: #999 !important;
    font-size: 0.65rem;
    font-style: italic;
}

.dropdown-item.active .pd-shortcut,
.dropdown-item:active .pd-shortcut {
    color: #DDD !important;
}

.dropdown-menu .dropend .dropdown-menu.multilevel {
    margin-top: -0.55rem;
}

.dropdown-menu .dropend .dropdown-toggle.multilevel::after {
    margin-top: 0.4rem;
    border-top: .4rem solid transparent;
    border-bottom: .4rem solid transparent;
    border-left: .4rem solid;
    border-right: 0;
    float: right;
}

/* --- NAVBAR MENUS --- */

.pd-nav-menu {
    padding: 0.5rem 0;
    min-width: 20rem;
}

.pd-nav-menu-sm {
    padding: 0.5rem 0;
    min-width: 18rem;
}

.pd-nav-menu-sm .dropdown-item {
    margin-right: 2.5rem;
}

@media (min-width: 1200px) {

    .pd-nav-menu {
        min-width: 22rem;
    }

}

.pd-nav-menu.pd-thin-scroll,
.pd-nav-menu-sm.pd-thin-scroll {
    height: unset !important;
    max-height: calc(100vh - 4.75rem) !important;
    overflow-x: visible;
    overflow-y: auto;
}

/* --- BS BUTTONS ------------------ */

.btn-outline-secondary {
    --bs-btn-hover-bg: var(--pd-active-hover);
    --bs-btn-hover-color: var(--pd-active-text);
    --bs-btn-active-bg: var(--pd-active-dark);
    --bs-btn-color: var(--pd-active-text);
}

.btn-outline-secondary:focus:not(:focus-visible) {
    --bs-btn-bg: var(--pd-active-focus);
}

.btn .pd-shortcut {
    font-size: 0.7rem !important;
    padding-right: 0.25rem !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    opacity: 0.6;
}

/* --- CUSTOM SCROLLBAR --- */

/* Works on Firefox */
.pd-thin-scroll {
    height: 100% !important;
    scrollbar-width: thin;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Works on Chrome, Edge, and Safari */
.pd-thin-scroll::-webkit-scrollbar {
    width: 0.6rem;
}

.pd-thin-scroll::-webkit-scrollbar-track {
    background: #eee;
  }

.pd-thin-scroll::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 0.25rem;
}

[data-bs-theme=dark] .pd-thin-scroll::-webkit-scrollbar-track {
    background: #444;
}

[data-bs-theme=dark] .pd-thin-scroll::-webkit-scrollbar-thumb {
    background: #666;
}

/* --- SORTABLE LISTS --- */

.sortable-ghost {
    background-color: rgba(128, 0, 0, 0.25) !important;
    outline: 2px solid #CC4444 !important;
    outline-offset: -2px;
}

.sortable-drag {
    background-color: rgba(128, 0, 0, 0.1) !important;
}

/* --- BS AUGMENTATION ------------- */

.w-16 {
    width: 16.6666% !important;
}

.w-20 {
    width: 20% !important;
}

.h-20 {
    height: 20% !important;
}

.w-33 {
    width: 33.33333% !important;
}

.h-33 {
    height: 33.33333% !important;
}

.w-80 {
    width: 80% !important;
}

.w-22rem {
    width: 22rem !important;
    min-width: 22rem;
}

.w-26rem {
    width: 26rem !important;
    min-width: 26rem;
}

.w-max-16rem {
    max-width: 16rem;
}

.w-max-18rem {
    max-width: 18rem;
}

.w-max-22rem {
    max-width: 22rem;
}

.w-min-6rem {
    min-width: 6rem;
}

.w-min-16rem {
    min-width: 16rem;
}

.w-min-18rem {
    min-width: 18rem;
}

.w-min-22rem {
    min-width: 22rem;
}

.progress-bar {
    border-radius: var(--bs-progress-border-radius);
}

.tab-content .pd-collapse-toggle {
    margin-bottom: -0.5rem;
    margin-top: -0.75rem;
}

footer {
    background-color: var(--bs-body-bg);
}

.form-check-input {
    cursor: pointer;
}

.form-check-input:checked {
    background-color: var(--pd-active-dark);
    border-color: var(--pd-active-dark);
}

.form-check-input:hover:not(:checked) {
    background-color: var(--pd-active-hover);
}

.form-switch.h5 .form-check-input,
.form-switch.h6 .form-check-input {
    margin-top: 0.175em;
}

a[target=_blank]::after {
    content: "";
    width: 0.65rem;
    height: 0.65rem;
    margin-left: 0.2rem;
    margin-bottom: -0.1rem;
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216mm%22%20height%3D%2216mm%22%20version%3D%221.1%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m10%201h5v5m-8%203%208-8m-7%202-6-4e-7v11h11v-6%22%20fill%3D%22none%22%20stroke%3D%22%23222222%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
}

[data-bs-theme=dark] a[target=_blank]::after {
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2216mm%22%20height%3D%2216mm%22%20version%3D%221.1%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m10%201h5v5m-8%203%208-8m-7%202-6-4e-7v11h11v-6%22%20fill%3D%22none%22%20stroke%3D%22%23CCCCCC%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E");
}

/* --- Large Gallery Grids --- */

@media (min-width: 1200px) {
    .row-cols-xl-8 > * {
        flex: 0 0 auto;
        width: 12.5%;
    }
}

@media (min-width: 1400px) {
    .row-cols-xxl-8 > * {
        flex: 0 0 auto;
        width: 12.5%;
    }
    .row-cols-xxl-10 > * {
        flex: 0 0 auto;
        width: 10.0%;
    }
}

/* --- RANGE SLIDERS --------------- */

/* https://www.cssportal.com/style-input-range/ */

.pd-range input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    padding: 0.15rem;
    width: 100%;
}

/* .pd-range input[type=range]:focus-visible {
    box-shadow: 0 0 0 0.25rem #cccccc;
    outline: none
} */

/* [data-bs-theme=dark] .pd-range input[type=range]:focus-visible {
    box-shadow: 0 0 0 0.25rem #555555;
} */

.pd-range input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 12px;
    cursor: pointer;
    box-shadow: 0px 0px 0px #000000;
    background: #4488cc;
    border-radius: 3px;
    border: 1px solid #4488cc;
}

.pd-range input[type=range]::-webkit-slider-thumb {
    box-shadow: 1px 1px 2px #888888;
    border: 1px solid #444444;
    height: 24px;
    width: 24px;
    border-radius: 0.5rem;
    background: #FFFFFF;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -7px;
}

/* .pd-range input[type=range]:focus-visible::-webkit-slider-runnable-track {
    background: #4488cc;
} */

.pd-range input[type=range]::-moz-range-track {
    width: 100%;
    height: 12px;
    cursor: pointer;
    box-shadow: 0px 0px 0px #000000;
    background: #4488cc;
    border-radius: 3px;
    border: 1px solid #4488cc;
}

.pd-range input[type=range]::-moz-range-thumb {
    box-shadow: 1px 1px 2px #888888;
    border: 1px solid #444444;
    height: 24px;
    width: 24px;
    border-radius: 0.5rem;
    background: #FFFFFF;
    cursor: pointer;
}

.pd-range input[type=range]::-ms-track {
    width: 100%;
    height: 12px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

.pd-range input[type=range]::-ms-fill-lower {
    background: #4488cc;
    border: 1px solid #4488cc;
    border-radius: 6px;
    box-shadow: 0px 0px 0px #000000;
}

.pd-range input[type=range]::-ms-fill-upper {
    background: #4488cc;
    border: 1px solid #4488cc;
    border-radius: 6px;
    box-shadow: 0px 0px 0px #000000;
}

.pd-range input[type=range]::-ms-thumb {
    margin-top: 1px;
    box-shadow: 1px 1px 2px #888888;
    border: 1px solid #444444;
    height: 24px;
    width: 24px;
    border-radius: 0.5rem;
    background: #FFFFFF;
    cursor: pointer;
}

/* .pd-range input[type=range]:focus-visible::-ms-fill-lower {
    background: #4488cc;
}

.pd-range input[type=range]:focus-visible::-ms-fill-upper {
    background: #0D6EFD;
} */

/* --- BREADCRUMBS ----------------- */

.btn.btn-breadcrumb {
    padding: 0.25rem 0.5rem 0.25rem 1.5rem;
    transition: none;
}

.btn.btn-breadcrumb::after {
    content: " ";
    display: block;
    border-top: 1rem solid transparent;
    border-bottom: 1rem solid transparent;
    border-left: 1rem solid #8b969f;
    position: absolute;
    margin-top: -1rem;
    z-index: 3;
    top: 50%;
    left: 100%;
    height: 0;
    width: 0;
}

.btn.btn-breadcrumb::before {
    content: " ";
    display: block;
    border-top: 1rem solid transparent;
    border-bottom: 1rem solid transparent;
    border-left: 1rem solid #eee;
    position: absolute;
    margin-top: -1rem;
    margin-left: 1px;
    z-index: 3;
    top: 50%;
    left: 100%;
    height: 0;
    width: 0;
}

/* --- LIGHT MODE BREADCRUMBS --- */

.btn.btn-breadcrumb,
.btn.btn-breadcrumb:focus {
    box-shadow: none;
}

.btn.btn-breadcrumb:focus::after,
.btn.btn-breadcrumb:hover::after {
    border-left: 1rem solid #6c757d;
}

.btn.btn-breadcrumb:focus::before,
.btn.btn-breadcrumb:hover::before {
    border-left: 1rem solid #eee;
}

.btn.btn-breadcrumb:active::after {
    border-left: 1rem solid #4488cc;
}

.btn.btn-breadcrumb:active::before {
    border-left: 1rem solid #eee;
}

/* --- DARK MODE BREADCRUMBS --- */

[data-bs-theme=dark] .btn.btn-breadcrumb,
[data-bs-theme=dark] .btn.btn-breadcrumb:focus {
    box-shadow: none;
}

[data-bs-theme=dark] .btn.btn-breadcrumb::after {
    border-left: 1rem solid #626262;
}

[data-bs-theme=dark] .btn.btn-breadcrumb::before {
    border-left: 1rem solid #222;
}

[data-bs-theme=dark] .btn.btn-breadcrumb:focus::after,
[data-bs-theme=dark] .btn.btn-breadcrumb:hover::after {
    border-left: 1rem solid #4e4e4e;
}

[data-bs-theme=dark] .btn.btn-breadcrumb:focus::before,
[data-bs-theme=dark] .btn.btn-breadcrumb:hover::before {
    border-left: 1rem solid #222;
}

[data-bs-theme=dark] .btn.btn-breadcrumb:active::after {
    border-left: 1rem solid #375a7f;
}

[data-bs-theme=dark] .btn.btn-breadcrumb:active::before {
    border-left: 1rem solid #222;
}





/* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/* --- Basic SVG Styling --- */

.svg-fill-none {
    fill: none !important;
}

.svg-fill-black {
    fill: #000 !important;
}

.svg-fill-dark {
    fill: #666 !important;
}

.svg-fill-light {
    fill: #AAA !important;
}

.svg-fill-white {
    fill: #FFF !important;
}

.svg-fill-daylight {
    fill: #b3d1ff !important;
}

.svg-fill-red {
    fill: #F00 !important;
}

/* --- */

.svg-stroke-none {
    stroke: none !important;
}

.svg-stroke-black {
    stroke: #000 !important;
}

.svg-stroke-dark {
    stroke: #666 !important;
}

.svg-stroke-light {
    stroke: #AAA !important;
    stroke-opacity: 0.5;
}

.svg-stroke-white {
    stroke: #FFF !important;
    stroke-opacity: 0.5;
}

/* --- */

.svg-text {
    fill: currentColor;
    stroke: none;
}

.svg-text-black {
    font-weight: bold;
    stroke: none;
    fill: #000;
}

.svg-text-dark {
    font-weight: bold;
    stroke: none;
    fill: #666;
}

/* --- */

.svg-line-black {
    stroke: #000;
    fill: none;
}

.svg-line-dark {
    stroke: #666;
    fill: none;
}

.svg-line-light {
    stroke: #888;
    stroke-opacity: 0.5;
    fill: none;
}

.svg-line-sun {
    stroke: #F90;
    fill: none;
}

.svg-line-red {
    stroke: #F00;
    fill: none;
}

/* --- */

.svg-marker-red {
    stroke: none;
    fill: #F00;
}

.svg-hilite-axis {
    stroke-width: 0.75px;
    stroke-dasharray: 4, 3;
    stroke: #F00;
    fill: none;
}

/* --- */

[data-bs-theme=dark] .svg-use-theme .svg-fill-black,
[data-bs-theme=dark] .svg-use-theme .svg-stroke-black,
[data-bs-theme=dark] .svg-use-theme .svg-text-black,
[data-bs-theme=dark] .svg-use-theme .svg-line-black {
    stroke: #FFF;
}

[data-bs-theme=dark] .svg-use-theme .svg-fill-dark,
[data-bs-theme=dark] .svg-use-theme .svg-stroke-dark
[data-bs-theme=dark] .svg-use-theme .svg-text-dark,
[data-bs-theme=dark] .svg-use-theme .svg-line-dark {
    stroke: #AAA;
}

[data-bs-theme=dark] .svg-use-theme .svg-fill-light,
[data-bs-theme=dark] .svg-use-theme .svg-stroke-light,
[data-bs-theme=dark] .svg-use-theme .svg-text-light,
[data-bs-theme=dark] .svg-use-theme .svg-line-light {
    stroke: #666;
}

[data-bs-theme=dark] .svg-use-theme .svg-fill-white,
[data-bs-theme=dark] .svg-use-theme .svg-stroke-white,
[data-bs-theme=dark] .svg-use-theme .svg-text-white,
[data-bs-theme=dark] .svg-use-theme .svg-line-white {
    stroke: #333;
}