/* Datei: /home/strzkrk/Documents/dyd/static/css/styles/Scrollbar/scrollbar.css */
.scroll-hidden {
    overflow: hidden;
}

.scroll-hidden::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.scroll-hidden::-webkit-scrollbar-track,
.scroll-hidden::-webkit-scrollbar-thumb {
    background: transparent;
}

/* Firefox */
.scroll-hidden {
    scrollbar-width: none;
    scrollbar-color: transparent transparent;
}

/* IE / Edge Legacy */
.scroll-hidden {
    -ms-overflow-style: none;
}

















/* Datei: /home/strzkrk/Documents/dyd/static/css/styles/Frames/groupFrame.css */
/* Group frames */
.group-frame {
    border: 1px solid #aaa; 
    left: 10; 
    position: absolute; 
    width: 200px; 
    height: 200px; 
    min-width: 50px; 
    min-height: 50px; 
    background-color: #efefef; 
    z-index: 1;}
.device-frame {
    border: 1px solid #aaa; 
    left: 10; 
    position: absolute; 
    width: 90px; 
    height: 90px; 
    min-width: 20px; 
    min-height: 20px; 
    background-color: #e3e3e3; 
    z-index: 1;}

















/* Datei: /home/strzkrk/Documents/dyd/static/css/styles/Frames/move_resize.css */
.group-move {
    position: absolute;
    left: 0;
    top: 0;
    cursor: grab;
    width: 10px;
    z-index: 3;
    height: 10px;
    background-color: hsla(0, 100%, 71%, 0.5);
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
    cursor: grab;
}

.group-resize {
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: nwse-resize;
    width: 10px;
    height: 10px;
    z-index: 3;
    background-color: hsla(0, 100%, 71%, 0.5);
    clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
}

.device-move {
    position: absolute;
    left: 0;
    top: 0;
    cursor: grab;
    width: 10px;
    height: 10px;
    z-index: 3;
    background-color: hsla(0, 100%, 71%, 0.5);
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
}

.device-resize {
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: nwse-resize;
    width: 10px;
    height: 10px;
    z-index: 3;
    background-color: hsla(0, 100%, 71%, 0.5);
    clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
}

.element-move {
    /* E */
    position: absolute;
    left: 0;
    top: 0;
    cursor: grab;
    width: 10px;
    height: 10px;
    z-index: 3;
    background-color: hsla(0, 100%, 71%, 0.5);
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
    cursor: grab;
}

.element-resize {
    /* E */
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: nwse-resize;
    width: 10px;
    height: 10px;
    z-index: 3;
    background-color: hsla(0, 100%, 71%, 0.5);
    clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
}

#design_mode_active {
    position: relative;
    font-size: 2vh;
    color: var(--colordd);
    padding: 0;
    text-align: right;
    float: right;
}

#design_mode_grid_size {
    position: relative;
    text-align: center;
    font-size: 2vh;
    height: 2vh;
    width: 8vh;
    color: var(--colordd);
    background-color: transparent;
    padding: 0;
    border: 0;
    float: right;
}

.group-wrapper, .group-frame {
    position: absolute;
    z-index: 0 !important;
}

.device-wrapper, .device-frame {
    position: absolute;
    z-index: 2 !important;
}

.element-wrapper, .element-frame {
    position: absolute;
    z-index: 4 !important;
}

/* Griffe immer oben */
.element-move,
.element-resize,
.element-title {
    z-index: 5 !important;
    position: absolute
}
.group-move,
.group-resize,
.group-title {
    z-index: 1 !important;
    position: absolute
}
.device-move,
.device-resize,
.device-title {
    z-index: 3 !important;
    position: absolute
}







.group-title,
.device-title,
.element-title {
    cursor: default;
    user-select: none;
}

:root {
    --app-height: 100vh;
}











/* Datei: /home/strzkrk/Documents/dyd/static/css/styles/Frames/mainFrame.css */
/* Main frame */
html, body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Lato', sans-serif;
    letter-spacing: 0.5px;
    background-color: var(--color15);
    margin: 0;
    padding: 0;
    height: var(--app-height);
    min-height: calc(var(--app-height) + 1px);
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    display: flex;
    flex-direction: column;
}

#fullView {
    flex: 1 1 auto;
    height: var(--app-height);
    min-height: var(--app-height);
    width: 100%;
    transform-origin: 0 0;
    display: grid;
    grid-template-rows: 4vh 1fr 3vh;
}

header {
    background: var(--color05);
    color: var(--colorbb);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    padding: 0 0.5vh 0 0;
    z-index: 9000;
    border-bottom: 0.1vh solid var(--color55);
    font-size: 2.3vh;
    height: 4vh;
    width: 100%;
}
.navbar__items {
    display: flex;
    align-items: center;
    gap: 0.6vh;
    height: 100%;
    flex: 1;
    justify-content: flex-start;
    padding-left: 0.3vh;
}
.navbar__actions {
    display: flex;
    align-items: center;
    gap: 0.8vh;
    margin-left: auto;
    justify-content: flex-end;
    padding-right: 0.3vh;
}
.navbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4vh;
    height: 4vh;
    border-radius: 999px;
    border: 0.15vh solid transparent;
    background: transparent;
    color: var(--coloraa);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.navbar-icon-btn:hover {
    color: var(--colorcc);
    border-color: var(--color55);
    background-color: rgba(255, 255, 255, 0.08);
}
.navbar-icon-btn.is-active {
    color: var(--colorff);
    border-color: var(--colorff);
}
.navbar-icon-btn.is-disabled {
    opacity: 0.45;
    cursor: default;
}
.navbar-icon {
    width: 2.3vh;
    height: 2.3vh;
}
.is-touch header {
    height: 8vh;
    font-size: 4vh;
}
.is-touch .navbar-icon-btn {
    width: 8vh;
    height: 8vh;
}
.is-touch .navbar-icon {
    width: 4vh;
    height: 4vh;
}

main {
    width: 100%;
    min-height: 0;
    overflow: hidden;
}

footer {
    background: var(--color05);
    color: var(--coloraa);
    border-top: 0.1vh solid var(--color55);
    font-size: 2vh;
    text-align: center;
    box-sizing: border-box;
    z-index: 1000;
    letter-spacing: 0;
    padding: 0;
    position: sticky;
    bottom: 0;
}
.is-touch footer {
    height: 6vh;
    font-size: 3.5vh;
}
.content {
    height: 100%;
    width: 100%;
    overflow: hidden;
    transform-origin: 0 0; /* alles basiert auf links oben */
    position: relative; overflow: hidden;
    touch-action: none;
}

.animation{
    height: 100%;
    width: 100%;
    transform-origin: 0 0;
    overflow: hidden;
}
/* Viewport + Container */
#content { position: relative; overflow: hidden; }
.frame   { transform-origin: 0 0; will-change: transform; }

.frame {
    background-color: var(--color15);
    color: var(--colorbb);
    position: fixed;
    transform-origin: 0 0;
    left: 0;
    right: 0;
    height: 10000px;
    width: 10000px;
    overflow: hidden;
    resize: none;
    will-change: transform;
}

.frame-resizable {
    position: absolute; 
    right: 0; 
    bottom: 0; 
    width: 0; 
    height: 0; 
    border-top: 5px solid transparent; 
    border-left: 5px solid transparent; 
    border-right: 5px solid #d9d9d9; 
    border-bottom: 5px solid #d9d9d9; 
    cursor:nwse-resize; 
    z-index: 999;}


















/* Datei: /home/strzkrk/Documents/dyd/static/css/styles/Map/map.css */
/* Popup Map */
.leaflet-container {
    z-index: 2000;
}

.leaflet-layer,
.leaflet-control-zoom-in,
.leaflet-control-zoom-out,
.leaflet-control-attribution {
    filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(70%);
}

.leaflet-popup-content-wrapper {
    background-color: #222 !important;
    color: #ccc !important;
}

.leaflet-popup-tip {
    background-color: #222 !important;
}

.custom-marker {
    transition: fill 0s, stroke 0s;
}

.popupMap {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 900px;
    height: 600px;
    background-color: var(--color25);
    color: var(--colorb);
    border: 1px solid var(--color33);
    box-shadow: 0 0 0 10000px var(--color00a);
    box-sizing: border-box;
    z-index: 2100;
}

#map {
    position: fixed;
    box-sizing: border-box;
    background-color: #101010;
    top: 20%;
    left: 50%;
    transform: translate(-50%, 0%);
    height: 79%;
    width: 98%;
}

.map_settings-popup {
    display: block;
    box-sizing: border-box;
    top: 1%;
    left: 50%;
    transform: translate(-50%, 0%);
    height: 18%;
    width: 98%;
    position: fixed;
    background: rgb(45, 45, 45);
    border: 1px solid #444444;
}

.map_settings-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 0.5%;
    column-gap: 0.5%;
    padding-top: 0;
}

.map_settings-input {
    background-color: var(--color20);
    color: var(--colorcc);
    border: 1px solid var(--color44);
    height: 25px;
    line-height: 25px;
    font-size: 20px;
    width: 100%;
}

.map_settings-input1 {
    grid-column: 1 / -1;
    text-align: center;
}

.map_settings-input2 {
    grid-column: 1 / 3;
}

.map_settings-input3 {
    grid-column: 3 / 5;
}

.map_settings-input4 {
    grid-column: 5 / 7;
}

.map_settings-input5 {
    grid-column: 1 / 2;
}

.popupImg-dropdown {
    grid-column: 2 / 7;
    background-color: var(--color20);
    color: var(--colorcc);
    border: 1px solid var(--color44);
    height: 25px;
    line-height: 25px;
    font-size: 20px;
    width: 100%;
}

.map_settings-button {
    background-color: var(--color20);
    color: var(--colorbb);
    border: 1px solid var(--color44);
    border-radius: 5px;
    text-align: center;
    width: 100%;
    height: 25px;
    padding: 0;
    /* Reset padding */
    margin: 0;
    /* Reset margin */
    margin-left: 50%;
    font-size: 20px;
    transition: scale 0.2s ease, background-color 1s ease, border 0.2s ease;
}

.map_settings-button:hover {
    scale: 1.05;
    border: 1px solid var(--color77);
    transition: scale 0.2s ease, background-color 1s ease, border 0.2s ease;
}

.map_settings-button:active {
    background-color: var(--color66);
    transition: background-color 0.1s ease;
}

.map_settings-button:not:active {
    transition: background-color 1s ease;
}

#map_selector-popup {
    display: none;
    position: absolute;
    top: 20%;
    right: 0;
    color: rgb(133, 133, 133);
    background-color: rgb(53, 53, 53);
    border: 1px solid rgb(44, 44, 44);
    padding: 10px;
    z-index: 1000;
    /* High z-index to bring it to the front */
}

#map_point-list {
    list-style-type: none;
    padding: 0;
}

#map_point-list li {
    padding: 5px;
    border-bottom: 1px solid #555555;
    cursor: pointer;
}

#map_point-list li:last-child {
    border-bottom: none;
}















/* Datei: /home/strzkrk/Documents/dyd/static/css/styles/Torch/torch.css */
#spotlight {
    position: fixed;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background:
        radial-gradient(circle at center,
            rgba(255, 245, 200, 0.03) 0%,
            rgba(255, 245, 200, 0.01) 30%,
            transparent 80%);
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s;
    z-index: 1;
}
/* Lichtkegel */

















/* Datei: /home/strzkrk/Documents/dyd/static/css/styles/Navbar/topbar.css */
/* Navigation Bar */
.top_nav {
    align-content: center;
    padding: 0 0.6vh;
    cursor: pointer;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
}

.top_nav_btn {
    background: transparent;
    color: var(--coloraa);
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: inherit;
}

.top_nav_btn_home {
    background: transparent;
    color: var(--coloraa);
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: inherit;
}

.top_nav_dd {
    display: none;
    position: absolute;
    box-shadow: 1vh 1vh 2vh 0.5vh rgba(10, 10, 10, 1);
    cursor: pointer;
    top: 3.8vh;
    z-index: 9001;
}

.top_nav_dd a {
    float: none;
    color: var(--coloraa);
    padding: 1vh 2vh 0.5vh 2vh;
    text-decoration: none;
    display: block;
    text-align: left;
    font-size: inherit;
    text-indent: 0.5vh;
}

.top_nav:hover .top_nav_dd {
    display: block;
    background-color: var(--color15);
    color: var(--colorcc);
}

.top_nav:hover {
    color: var(--colorcc);
    background-color: var(--color15);
}

.top_nav:hover .top_nav_btn,
.top_nav:hover .top_nav_btn_home {
    color: var(--colorcc);
}

.top_nav_dd a:hover {
    color: var(--colorcc);
}

















/* Datei: /home/strzkrk/Documents/dyd/static/css/styles/Cam/cam,.css */
    /* Popup Cam */
    .Cam {
        display: none;
        position: relative;
        top: 5%;
        left: 5%;
        width: 80%;
        height: 70%;
        background-color: #dce8ddad;
        padding: 2px;
        border: 1px solid #ddd;
        box-shadow: 0 0 100px rgba(64, 72, 61, 0.3);
        z-index: 9999;
    }

    .cam_container {
        max-width: 800px;
        margin: 0 auto;
        background: #fff;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .controls {
        display: grid;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }

    .controls button,
    .controls select {
        padding: 10px 15px;
        font-size: 16px;
        cursor: pointer;
    }

    .popupCam2 {
        border: 2px solid lch(82.05% 0.01 296.81);
        padding: 10px;
        border-radius: 5px;
        height: 100%;
    }

    .popupCam2-content {
        text-align: center;
    }

















/* Datei: /home/strzkrk/Documents/dyd/static/css/styles/Popups/attributes.css */
    /* Popup Attributes */
    .popupAttr {
		display: none;
		position: fixed;
		right: 0;
		width: 65vh;
		background-color: var(--color25);
		color: var(--colorb);
		border: 0.1vh solid var(--color33);
		box-shadow: 0 0 0 1000vh var(--color00a);
		box-sizing: border-box;
		z-index: 2000;
		letter-spacing: 0;
		overflow: auto;
		overflow-x: auto;
		top: 4vh;
		height: 93vh;
		overflow-x: hidden;
		scrollbar-width: none;
    }
    .popupAttr-grid-container {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-gap: 0.8vh;
		column-gap: 0.8vh;
		column-gap: 0.8vh;
		padding: 1vh;
		position: relative;
		overflow: hidden;
    }
    .popupAttr-grid-container-master {
        grid-column: 1 / -1;
        display: grid;
        right: 0.5vh;
        left: 0.5vh;
        bottom: 0.5vh;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-gap: 1vh;
        column-gap: 1vh;
        height: fit-content;
    }
    #subStyleContainer {
        display: grid;
        grid-column: 1/-1;
    }
    .popupAttr-grid-containerStyle {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-gap: 1vh;
        column-gap: 1vh;
    }
    .popupAttr-grid-containerChart {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-gap: 1vh;
        column-gap: 1vh;
    }
    .popupAttr-title {
        grid-column: 1 / -1;
        text-align: center;
        align-items: center;
        color: var(--colordd);
        height: 5vh;
        font-size: 4.5vh;
        padding: 0;
        /* Reset padding */
        margin: 0;
        /* Reset margin */
    }
    .popupAttr-label {
        grid-column: 1 / 3;
        text-align: right;
        color: var(--colorcc);
        height: 3vh;
        line-height: 3vh;
        font-size: 1.8vh;
        padding: 0;
        /* Reset padding */
        margin: 0;
        /* Reset margin */
    }
    .popupAttr-label2 {
        grid-column: 1/2;
        text-align: right;
        color: var(--colorcc);
        font-size: 1.8vh;
        line-height: 3vh;
        height: 3vh;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    .popupAttr-label3 {
        grid-column: 1 / 2;
        text-align: right;
        color: var(--colorcc);
        font-size: 1.8vh;
        line-height: 3vh;
        height: 3vh;
        width: 100%;
        padding: 0;
        /* Reset padding */
        margin: 0;
        /* Reset margin */
    }
    .popupAttr-input {
        grid-column: 5 / 6;
        background-color: var(--color20);
        color: var(--colorcc);
        border: 0.1vh solid var(--color44);
        height: 3vh;
        line-height: 3vh;
        font-size: 1.8vh;
        width: 100%;
        padding: 0;
        /* Reset padding */
        margin: 0;
        /* Reset margin */
    }
    .popupAttr-inputDT {
        background-color: var(--color20);
        color: var(--colorcc);
        border: 0vh solid var(--color44);
        height: 3vh;
        line-height: 3vh;
        font-size: 1.8vh;
        width: 49%;
        padding: 0;
        margin: 0;
    }
    .popupAttr-inputDT-wrapper {
        grid-column: 6 / 7;
		height: 3vh;
        min-width: 0;
    }
    .popupAttr-input2 {
        grid-column: 5 / 6;
        background-color: var(--color20);
        color: var(--colorcc);
        border: 0.1vh solid var(--color44);
        height: 3vh;
        line-height: 3vh;
        font-size: 1.8vh;
        width: 100%;
        padding: 0;
        /* Reset padding */
        margin: 0;
        /* Reset margin */
    }
    .popupAttr-input3 {
        grid-column: 5 / 6;
        background-color: var(--color20);
        color: var(--colorcc);
        border: 0.1vh solid var(--color44);
        resize: none;
        line-height: 3vh;
        font-size: 1.8vh;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    .popupAttr-input2_Color {
        grid-column: 2 / 3;
        background-color: var(--color20);
        color: var(--colorcc);
        border: 0.1vh solid var(--color44);
        height: 3vh;
        line-height: 3vh;
        font-size: 1.8vh;
        width: 100%;
        padding: 0;
        /* Reset padding */
        margin: 0;
        /* Reset margin */
    }
    .popupAttr-output,
    .popupAttr-output2,
    .popupAttr-output3 {
        grid-column: 3 / 5;
        background-color: var(--color25);
        color: var(--colorcc);
        border: none;
        max-height: 3vh;
        line-height: 3vh;
        font-size: 1.8vh;
        width: 100%;
        padding: 0;
        margin: 0;
        overflow: auto;
        scrollbar-width: none;
    }
    .popupAttr-output2 {
        grid-column: 3 / 5;
    }
    .popupAttr-output3 {
        grid-column: 3 / 5;
    }
    .popupAttr-button,
    .popupAttr-button-save,
    .popupAttr-button-copy,
    .popupAttr-button-paste {
        grid-column: 2 / 6;
        order: 999;
        background-color: var(--color20);
        color: var(--colorbb);
        border: 0.1vh solid var(--color44);
        border-radius: 0.5vh;
        text-align: center;
        width: 100%;
        height: 4vh;
        font-size: 2vh;
        transition: scale 0.2s ease, background-color 1s ease, border 0.2s ease;
        padding: 0;
        /* Reset padding */
        margin-top: 1vh;
        /* Reset margin */
    }
    .popupAttr-button:hover {
        scale: 1.05;
        border: 0.1vh solid var(--color77);
        transition: scale 0.2s ease, background-color 1s ease, border 0.2s ease;
    }
    .popupAttr-button:active {
        background-color: var(--color66);
        transition: background-color 0.1s ease;
    }
    .popupAttr-button:not:active {
        transition: background-color 1s ease;
    }
    .popupAttr-button-copy {
        grid-column: 2 / 4;
    }
    .popupAttr-button-paste {
        grid-column: 4 / 6;
    }
    .popupAttr-dropdown {
        grid-column: 6 / 7;
        background-color: var(--color20);
        color: var(--colorcc);
        border: 0.1vh solid var(--color44);
        height: 3vh;
        line-height: 3vh;
        font-size: 1.8vh;
        width: 50%;
        padding: 0;
        /* Reset padding */
        margin: 0;
        /* Reset margin */
        box-sizing: border-box;
    }
    .popupAttr-dropdown2 {
        grid-column: 2 / 3;
        background-color: var(--color20);
        color: var(--colorcc);
        border: 0.1vh solid var(--color44);
        font-size: 1.8vh;
        height: fit-content;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    .popupAttr-dropdown3 {
        grid-column: 3 / 5;
        background-color: var(--color20);
        color: var(--colorcc);
        border: 0.1vh solid var(--color44);
        font-size: 1.8vh;
        height: fit-content;
        width: 100%;
        padding: 0;
        margin: 0;
    }


/* Datei: /home/strzkrk/Documents/dyd/static/css/styles/Popups/standard.css */
    /* Popup NavBar */
    .popupNav {
        display: none;
        position: fixed;
        top: 4vh;
        right: 0;
        width: 65vh;
        height: 93vh;
        background-color: var(--color25);
        color: var(--colorbb);
        border: 1px solid var(--color33);
        box-sizing: border-box;
        z-index: 2000;
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .popup-input {
        height: 3vh;
        margin: 0;
        border-radius: 4px;
        border: 0.0px solid var(--color00);
        background-color: var(--color33);
        color: var(--colordd);
        accent-color: #cacaca;
        text-align: left;
        box-shadow: inset 0 0 1px 1px var(--color00), 0 0 0.5px 0.5px var(--color00);
    }
	
    .popup-input:focus-visible {
        border: 0px solid #555;
		outline: none;
    }

    .popupNav-grid-container {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        min-width: 0;
        justify-self: stretch;
        grid-gap: 4px;
        padding: 1vh;
    }

    .popupNav-title {
        grid-column: 1 / -1;
        text-align: center;
        align-items: center;
        color: var(--colordd);
        height: 50px;
        font-size: 40px;
    }

    .popupNav-label {
        grid-column: 2 / 4;
        text-align: right;
        color: var(--colorcc);
        height: 30px;
        line-height: 30px;
        font-size: 20px;
    }

    .popupNav-input {
        grid-column: 4 / 6;
        background-color: var(--color20);
        color: var(--colorcc);
        border: 1px solid var(--color44);
        height: 30px;
        line-height: 30px;
        font-size: 20px;
        width: 100%;
    }

    .popupNav-button {
        grid-column: 2 / 6;
        background-color: var(--color20);
        color: var(--colorbb);
        border: 1px solid var(--color44);
        border-radius: 5px;
        text-align: center;
        width: 100%;
        height: 40px;
        font-size: 20px;
        transition: scale 0.2s ease, background-color 1s ease, border 0.2s ease;
    }

    .popupNav-buttonL {
        grid-column: 2 / 4;
        background-color: var(--color20);
        color: var(--colorbb);
        border: 1px solid var(--color44);
        border-radius: 5px;
        text-align: center;
        width: 100%;
        height: 40px;
        font-size: 20px;
        transition: scale 0.2s ease, background-color 1s ease, border 0.2s ease;
    }

    .popupNav-buttonR {
        grid-column: 4 / 6;
        background-color: var(--color20);
        color: var(--colorbb);
        border: 1px solid var(--color44);
        border-radius: 5px;
        text-align: center;
        width: 100%;
        height: 40px;
        font-size: 20px;
        transition: scale 0.2s ease, background-color 1s ease, border 0.2s ease;
    }

    .popupNav-button:hover .popupNav-buttonR:hover .popupNav-buttonR:hover {
        scale: 1.05;
        border: 1px solid var(--color77);
        transition: scale 0.2s ease, background-color 1s ease, border 0.2s ease;
    }

    .popupNav-button:active .popupNav-buttonR:active .popupNav-buttonR:active {
        background-color: var(--color66);
        transition: background-color 0.1s ease;
    }

    .popupNav-button:not:active .popupNav-buttonR:not:active .popupNav-buttonR:not:active {
        transition: background-color 1s ease;
    }

    .popupNav-dropdown {
        grid-column: 4 / 6;
        background-color: var(--color20);
        color: var(--colorcc);
        border: 1px solid var(--color44);
        height: 30px;
        line-height: 30px;
        font-size: 20px;
        width: 100%;
    }

    .popupNav-checkbox-container {
        grid-column: 4/5;
    }

    .popupNav-checkbox {
        display: block;
        position: relative;
        cursor: pointer;
    }

    .popupNav-checkbox::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        align-items: center;
        width: 20px;
        height: 20px;
        border: 1px solid var(--color44);
        background-color: var(--color20);
        transition: background-color 0.3s ease;
    }

    .popupNav-checkbox:checked::before {
        background-color: var(--color66);
    }

    .popupNav-checkbox:checked::after {
        content: "";
        position: absolute;
        left: 6px;
        top: 2px;
        width: 6px;
        height: 12px;
        border: solid var(--colorcc);
        border-width: 0 4px 4px 0;
        transform: rotate(45deg);
    }

    /* Baseline */
    .popupNav,
    .popupAttr,
    .popupInfo,
    .popupMap {
        transition: all 0.2s ease-in;
        box-shadow: 0 0 0 10000px #00000033;
        opacity: 1;
    }

    /* Gedimmt NUR wenn schon mal gehovered UND nicht aktiv benutzt */
    .was-hovered .popupNav:not(:is(:hover, :focus-within, :has(:hover))),
    .was-hovered .popupAttr:not(:is(:hover, :focus-within, :has(:hover))),
    .was-hovered .popupInfo:not(:is(:hover, :focus-within, :has(:hover))),
    .was-hovered .popupMap:not(:is(:hover, :focus-within, :has(:hover))) {
        transition: all 1s ease-out;
        opacity: .25;
        box-shadow: none;
    }

    /* Erzwingt Opacity 0.25 während des Zoom-Drag */
    .isZMoving .popupNav,
    .isZMoving .popupAttr,
    .isZMoving .popupInfo,
    .isZMoving .popupMap {
        pointer-events: none;
        opacity: .25 !important;
        box-shadow: none !important;
        transition: all 1s ease-out;
    }

















/* Datei: /home/strzkrk/Documents/dyd/static/css/styles/Popups/image.css */
    /* Popup AddImages */
    .row3 .scrollable2 {
        max-height: 150px; /* Maximale Höhe für den Inhalt der 3. Zeile */
        overflow-y: auto; /* Bei Überschreitung: vertikaler Scrollbalken */}
    .popupImg-grid-container {
        display: grid;
        right: 5px;
        left: 5px;
        bottom: 5px;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-gap: 1%;
        column-gap: 1%;
        row-gap: 1%;
        padding-top: 1%;}
        .popupImg-title {
            grid-column: 1 / -1;
            text-align: center;
            align-items: center;
            color: var(--colordd);
            height: 40px;
            font-size: 30px;}
        .popupImg-label {
            grid-column: 1 / 3;
            text-align: right;
            color: var(--colorcc);
            height: 25px;
            line-height: 25px;
            font-size: 15px;}
        .popupImg-input {
            grid-column: 3 / 5;
            background-color: var(--color20);
            color: var(--colorcc);
            border: 1px solid var(--color44);
            height: 25px;
            line-height: 25px;
            font-size: 15px;
            width: 100%;}
        .popupImg-ouput {
            grid-column: 2 / 4;
            background-color: var(--color20);
            color: var(--colorcc);
            border: 1px solid var(--color44);
            height: auto;
            line-height: 25px;
            font-size: 15px;
            width: 100%;
            padding:  2px;
            box-sizing: border-box;}
        .popupImg-button {
            grid-column: 2 / 6;
            background-color: var(--color20);
            color: var(--colorbb);
            border: 1px solid var(--color44);
            border-radius: 5px;
            text-align: center;
            width: 100%;
            height: 40px;
            font-size: 20px;
            transition: scale 0.2s ease, background-color 1s ease, border 0.2s ease;}
            .popupImg-button:hover {
                scale: 1.05;
                border: 1px solid var(--color77);
                transition: scale 0.2s ease, background-color 1s ease, border 0.2s ease;}
            .popupImg-button:active {
                background-color: var(--color66);
                transition: background-color 0.1s ease;}
            .popupImg-button:not:active {
                transition: background-color 1s ease;}
        .popupImg-preview {
            grid-column: 4 / 6;
            max-width: 100%; 
            height: auto; }


















/* Datei: /home/strzkrk/Documents/dyd/static/css/styles/Popups/create.css */
    /* Popup Configurator */

    .config_div {
        background-color: var(--color25);
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        overflow-y: auto;
        scrollbar-width: thin;
        grid-gap: 2px;
    }

    .configView {
        grid-column: 1/7;
        row-gap: 50px;
        background-color: var(--color25);
        overflow-y: auto;
        scrollbar-width: thin;
    }

    .arrow-down::before {
        content: "\25Ba";
    }

    .arrow-up::before {
        content: "\25BC";
    }

    .arrow_div {
        padding: 5px;
        text-align: center;
        border-radius: 4px;
        border: 1px solid #000;
        cursor: pointer;
        background-color: var(--color15);
        box-shadow: inset 0 0 11px 2px var(--color00), 0 0 1px 1px var(--color00);
        transition: ease-in-out 0.3s all;
    }

    .arrow_div:hover {
        background-color: var(--color44);
        transition: ease-in-out 0.05s all;
    }

    .collapsible {
        margin-bottom: 10px;
        margin-top: 5px;
    }

    #collapsible_group {
        height: auto;
        overflow: hidden;
        transition: height 0.5s ease-in-out;
    }

    #collapsible_group.collapsed {
        max-height: 0;
    }

    #collapsible_device {
        height: auto;
        overflow: hidden;
        transition: height 0.5s ease-in-out;
    }

    #collapsible_device.collapsed {
        max-height: 0;
    }

    #collapsible_element {
        height: auto;
        overflow: hidden;
        transition: height 0.5s ease-in-out;
    }

    #collapsible_element.collapsed {
        max-height: 0;
    }

    #collapsible_value {
        height: auto;
        overflow: hidden;
        transition: height 0.5s ease-in-out;
    }

    #collapsible_value.collapsed {
        max-height: 0;
    }

    .span_small {
        font-size: small;
        cursor: pointer;
    }

















/* Datei: /home/strzkrk/Documents/dyd/static/css/styles/Popups/info.css */
    /* Popup Info */
    .popupInfo {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: auto;
        background-color: #dce8ddad;
        padding: 2px;
        border: 1px solid #ddd;
        box-shadow: 0 0 100px rgba(64, 72, 61, 0.3);
        z-index: 3000;
    }

    .popupInfo-content {
        position: relative;
        background-color: #fefefe;
        padding: 2%;
        border: 1px solid #888;
    }

















/* Datei: /home/strzkrk/Documents/dyd/static/css/styles/Colors/color.css */
:root {
    --angle: 0deg;
    --color00: #000000;
    --color05: #050505;
    --color10: #101010;
    --color15: #151515;
    --color20: #202020;
    --color25: #252525;
    --color33: #333333;
    --color44: #444444;
    --color55: #555555;
    --color66: #666666;
    --color77: #777777;
    --coloraa: #aaaaaa;
    --colorbb: #bbbbbb;
    --colorcc: #cccccc;
    --colordd: #dddddd;
    --coloree: #eeeeee;
    --colorff: #ffffff;
    --color00a: rgba(0, 0, 0, 0.5);
    --color15a: rgba(15, 15, 15, 0.5);
    --color15a95: rgba(15, 15, 15, 0.95);
    --color30a: rgba(30, 30, 30, 0.5);
    --color45a: rgba(45, 45, 45, 0.5);
    --color60a: rgba(60, 60, 60, 0.5);
    --color180a: rgba(180, 180, 180, 0.5);
    --color195a: rgba(195, 195, 195, 0.5);
    --color210a: rgba(210, 210, 210, 0.5);
    --color225a: rgba(225, 225, 225, 0.5);
    --color240a: rgba(240, 240, 240, 0.5);
    --color255a: rgba(255, 255, 255, 0.5);}


















/* Datei: /home/strzkrk/Documents/dyd/static/css/styles/Elements/meter.css */
/*                    Meter  ------------*//* M */    /* E */
.meter-wrapper {                       /* M */    /* E */
    position: absolute; 
    width: 100px; 
    height: 31px; 
    box-sizing: border-box;}
.meter_element {                       /* M */    /* E */
    position: absolute; 
    top: 10px; 
    width: 100px; 
    height: 21px; 
    border-radius: 4px; 
    border: 0.2px solid #8e8e8e; 
    box-sizing: border-box;}
.meter_title {                         /* M */    /* E */
    position: absolute; 
    box-sizing: border-box;}


















/* Datei: /home/strzkrk/Documents/dyd/static/css/styles/Elements/chart.css */
.chart-wrapper {
    position: absolute;
    width: 100px;
    height: 50px;
    box-sizing: border-box;
}

.chart_element {
    position: absolute;
    top: 0px;
    width: 100px;
    height: 50px;
    border-radius: 2px;
    border: 0.2px solid #8e8e8e;
    box-sizing: border-box;
}

.chart_title {
    position: absolute;
    box-sizing: border-box;
}

.chart {
    height: 50px;
    display: block;
}

















/* Datei: /home/strzkrk/Documents/dyd/static/css/styles/Elements/output.css */
/*                    Output ------------*//* O */    /* E */
.output-wrapper {                      /* O */    /* E */
    position: absolute; 
    width: 100px; 
    height: 31px; 
    box-sizing: border-box;}
.output_element {                      /* O */    /* E */
    position: absolute; 
    top: 10px; 
    width: 100px; 
    height: 21px; 
    border-radius: 4px; 
    border: 0.2px solid #8e8e8e; 
    box-sizing: border-box;}
.output_title {                        /* O */    /* E */
    position: absolute; 
    box-sizing: border-box;}
.output {                              /* O */    /* E */
height: 21px; 
display: block;}


















/* Datei: /home/strzkrk/Documents/dyd/static/css/styles/Elements/input.css */
/*                    Inputs ------------*//* T */    /* E */
.input-wrapper {                       /* T */    /* E */
    position: absolute; 
    width: 100px; 
    height: 31px; 
    box-sizing: border-box;}
.input, .input_element {                       /* T */    /* E */
    position: absolute;
    width: 50px; 
    height: 20px; 
    border-radius: 0; 
    cursor: text; 
    border: 0.2px solid #8e8e8e; 
    box-sizing: border-box;}
.input_title {                         /* T */    /* E */
    position: absolute; 
    box-sizing: border-box;}
.input:hover {
    box-shadow: 0 0 1px 1px var(--color00);
    transition: ease-in-out 0.05s all;
}
.input_newView {                       /* T */    /* E */
    width: 85%; 
    margin: 1%;}
.input_text_conf {                     /* T */    /* E */
    width: 40%; 
    margin: 1%;}
.input_number_conf {                   /* T */    /* E */
    width: 15%; 
    margin: 1%;}
.input_grp_name {                      /* T */    /* E */
    width: 98%; 
    margin: 1%;}


















/* Datei: /home/strzkrk/Documents/dyd/static/css/styles/Elements/cb_s.css */


















/* Datei: /home/strzkrk/Documents/dyd/static/css/styles/Elements/button,.css */
.button-wrapper {
    position: absolute;
    width: 100px;
    height: 31px;
    box-sizing: border-box;
}

.button_element {
    position: absolute;
    background-color: grey;
    top: 0px;
    color: white;
    border: transparent;
    cursor: pointer;
    box-sizing: border-box;
}

.button-title {
    position: absolute;
    box-sizing: border-box;
}

.button {
    box-sizing: border-box;
    border-radius: 10px;
    border: none;
    color: black;
    background-color: white;
    box-shadow: inset 0px 0px 10px #000;
    cursor: pointer;
}

.button2 {
    border-radius: 4px;
    border: 1px solid #000;
    height: 21px;
    color: var(--colordd);
    box-shadow: inset 0 0 11px 2px var(--color00), 0 0 1px 1px var(--color00);
    background-color: var(--color55);
    transition: ease-in-out var(--bg-transition, 0.3s) all;
    --bg-transition: 0.5s;
}

.button2:hover {
    background-color: var(--color240a);
    --bg-transition: 0.05s;
}

.button2:focus {
    --bg-transition: 0.7s;
}

.button2:active {
    background-color: #3e8e41;
    transition: all 0s;
}

.button-Delete {
    grid-column: 2/6;
    border-radius: 4px;
    border: 1px solid #000;
    height: 21px;
    margin: 1px;
    color: var(--colordd);
    box-shadow: inset 0 0 11px 2px var(--color00), 0 0 1px 1px var(--color00);
    background-color: var(--color55);
    transition: ease-in-out var(--bg-transition, 0.3s) all;
    --bg-transition: 0.5s;
}

.button-Delete:hover {
    background-color: #a35f5f;
    --bg-transition: 0.05s;
}

.button-Delete:focus {
    --bg-transition: 0.7s;
}

.button-Delete:active {
    background-color: #b61a1a;
    transition: all 0s;
}

.button_conf {
    width: 47%;
}

#saveButton {
    height: 30px;
    width: 98%;
    margin-top: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 4px;
    cursor: pointer;
}

#saveButton2 {
    height: 30px;
    width: 98%;
    margin-top: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 4px;
    cursor: pointer;
}

















/* Datei: /home/strzkrk/Documents/dyd/static/css/styles/Elements/indicator.css */
/*                    Indicators --------*//* I */    /* E */
.indicator-wrapper {                   /* I */    /* E */
    position: absolute; 
    width: 200px; 
    height: 20px; 
    box-sizing: border-box;}
.indicator_element {                   /* I */    /* E */
    position: absolute;  
    background-color: grey; 
    top: 0px; 
    width: 200px; 
    height: 20px;
    border-radius: 50%; 
    color: white; 
    border: transparent; 
    cursor: default; 
    box-sizing: border-box;}
.indicator_title {                     /* I */    /* E */
position: absolute; 
box-sizing: border-box;}


















/* Datei: /home/strzkrk/Documents/dyd/static/css/styles/Elements/image.css */
.img-wrapper {
    position: absolute;
    width: 25px;
    height: 25px;
    box-sizing: border-box;
    align-items: center;
    display: flex;
}
.img_title {
    position: absolute;
    box-sizing: border-box;
}
.img_element {
    object-fit: scale-down;
}
.img_element:not([src]),
.img_element[src=""] {
  visibility: hidden;
}



/* Datei: /home/strzkrk/Documents/dyd/static/css/styles/Elements/range.css */
/*                    Range  ------------*//* R */    /* E */
.range-wrapper {                       /* R */    /* E */
    position: absolute; 
    width: 21px; 
    height: 31px; 
    box-sizing: border-box;}
.range_title {                         /* R */    /* E */
    position: absolute; 
    box-sizing: border-box;}
.range_element {
    cursor: pointer !important;
    top: 10px; 
    left: 0; 
    height: 25px; 
    width: 25px; 
}
/* 1) Basis‑Styles: Größe, Entfernen des Standard‑Looks */
input[type="range"] {
    background: transparent !important; 
    margin: 0 !important;
  }
  
  input[type="range"]::-moz-range-track {
    height: 4px;
    border-radius: 10px;
    background: #000000;
    box-shadow: 
     inset 0px 0px 0.5px 0.5px rgba(239, 239, 239,0.8),
     1px 1px 0.5px 0.5px rgba(255, 255, 255,0.8);
  }  
  input[type="range"]::-moz-range-thumb {
    height: 15px;
    width: 15px;
    border: solid 0.1px black;
    border-radius: 50%;
    background: #000000;
    box-shadow:
     inset -1px -1px 3px 3px rgba(0,0,0,1),
     inset 1px 1px 3px 4px rgb(255, 255, 255),
     4px 4px 4px 1px rgba(0,0,0,0.5);
  }

















/* Datei: /home/strzkrk/Documents/dyd/static/css/styles/Elements/checkbox.css */
@keyframes spin2 {
  to {
    background: conic-gradient(from 360deg at 50% 50%, #ff2a2a, #5a0000);
  }
}

.checkbox-wrapper {
    position: absolute;
    width: 25px;
    height: 25px;
    box-sizing: border-box;
}

.checkbox-title {
    box-sizing: border-box;
    font-size: 10px;
    position: absolute;
    text-align: center;
    top: -10px;
    width: 100%;
}

input[type="checkbox"][data-variant="sp"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.checkbox_element {
    position: absolute;
    height: 15px;
    width: 15px;
    background-color: #ffffff;
    border: 1px solid #000000;
    cursor: pointer;
    box-sizing: border-box;
    margin: 0;
}

input[type="checkbox"][data-variant="ui"] {
    cursor: pointer !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 17px;
    height: 17px;
    border: 0.5px solid var(--color00);
    border-radius: 50%;
    background-color: var(--coloraa);
    transition: background-color ease-in-out 0.2s, box-shadow ease-in-out 0.2s;
    box-shadow: inset -1px -1px 4px 3px #000;
    justify-self: end;
    align-self: center;
}

input[type="checkbox"][data-variant="ui"]:hover {
    background-color: rgb(197, 187, 47);
    box-shadow: inset -0.5px -0.5px 3px 2px #000;
}

input[type="checkbox"][data-variant="ui"]:checked {
    background-color: lightgreen;
    box-shadow: inset -0.5px -0.5px 3px 2px #000;
}


















/* Datei: /home/strzkrk/Documents/dyd/static/css/styles/Elements/dropdown.css */
/*                    Dropdown ----------*/
.dropdown-ui {
    height: 21px;
    margin: 1px;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid #000;
    background-color: var(--color25);
    color: var(--colordd);
    box-shadow: inset 0 0 11px 2px var(--color00), 0 0 1px 1px var(--color00);
    transition: ease-in-out 0.5s all;
}

.dropdown-ui:hover {
    box-shadow: 0 0 1px 1px var(--color00);
    transition: ease-in-out 0.05s all;
}

.dropdown_element {
    width: 25px;
    height: 10px;
    cursor: pointer;
}

.dropdown-wrapper {
    position: absolute;
    width: 25px;
    height: 25px;
    box-sizing: border-box;
    display: flex;
}

.dropdown_title {
    position: absolute;
    box-sizing: border-box;
}

.dropdownPopup {
    width: 98%;
    margin: 1%;
}

.dropdownConf {
    font-size: smaller;
}

.dropdownLoad {
    width: 98%;
    font-size: smaller;
}

.dropdownConf_grp {
    width: 100%;
}

/* =============================
       Frei gestaltbar via CSS Vars
       ============================= */
:root {
    --_dd-font: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
    --_dd-fs: 14px;
    --_dd-bg: #ffffff;
    --_dd-fg: #111111;
    --_dd-muted: #6b7280;
    /* Label/Hint */
    --_dd-border: #d1d5db;
    --_dd-radius: 12px;
    --_dd-shadow: 0 6px 28px rgba(0, 0, 0, .12);
    --_dd-item-hover: #f3f4f6;
    --_dd-item-active: #e5e7eb;
    --_dd-item-selected: #eef2ff;
    --_dd-accent: #4f46e5;
    --_dd-z: 40;
    --_dd-maxh: 240px;
    --_dd-pad-x: 12px;
    --_dd-pad-y: 10px;
    --_dd-gap: 8px;
}

.dropdown {
    position: relative;
    font-family: var(--_dd-font);
    display: inline-block;
}
.cselect{position:relative;display:inline-block;min-width:160px;font-family:var(--_dd-font,system-ui);z-index:var(--_dd-z,40);} /* Container */
.csel-title{height:21px;margin:1px;padding:0 28px 0 8px;border-radius:4px;border:1px solid #000;background:var(--color25);color:var(--colordd);box-shadow:inset 0 0 11px 2px var(--color00),0 0 1px 1px var(--color00);line-height:21px;cursor:pointer;user-select:none;} /* Titel */
.csel-title:after{content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;transform:translateY(-50%);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:center;} /* Pfeil */
.csel-list{position:absolute;top:100%;left:0;width:100%;max-height:var(--_dd-maxh,240px);overflow:auto;margin:0;padding:4px 0;list-style:none;background:var(--_dd-bg,#fff);border:1px solid var(--_dd-border,#d1d5db);border-radius:8px;box-shadow:var(--_dd-shadow,0 6px 28px rgba(0,0,0,.12));visibility:hidden;opacity:0;transform:translateY(4px);transition:opacity .1s ease,transform .1s ease;z-index:inherit;} /* Liste */
.cselect:hover .csel-list{visibility:visible;opacity:1;transform:translateY(0);} /* Hover öffnet */
.csel-item{padding:6px 8px;cursor:pointer;white-space:nowrap;} /* Item */
.csel-item:hover{background:var(--_dd-item-hover,#f3f4f6);} /* Hover Item */
.csel-item[aria-selected="true"]{background:var(--_dd-item-selected,#eef2ff);} /* Selektiert */
.cselect.small .csel-title{font-size:smaller;} /* Variant .dropdownConf */


















/* Datei: /home/strzkrk/Documents/dyd/static/css/styles/Layers/aknoledged.css */
.akn {
  background-color: rgba(255, 234, 96, 0.15) !important;
}


















/* Datei: /home/strzkrk/Documents/dyd/static/css/styles/Layers/failed.css */
.failed {
  box-shadow: 0 0 5px 1px rgba(255, 17, 0, 0.5) !important;
  display: grid !important;
}

.overlay__close {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0.15px solid rgba(133, 2, 2, 0.5);
  border-radius: 50%;
  background: rgba(164, 0, 0, 0.628);
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
}

















/* Datei: /home/strzkrk/Documents/dyd/static/css/styles/Layers/waiting.css */
.waiting {
  box-shadow: 0 0 5px 1px rgba(239, 255, 10, 0.5) !important;
  display: grid !important;
}

.loader {
  width: 80%;
  height: 80%;
  border: 2px solid #ccc;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  /* klassisch & kompatibel */
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Standard = Fallback für alle */
.loader {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* In Blink/WebKit gezielt auf die rotate-Interpolation wechseln */
@supports (-webkit-hyphens:none) {

  /* pragmatischer Chrome/Safari-Hint */
  .loader {
    animation: rotate 1s linear infinite;
  }
}

















/* Datei: /home/strzkrk/Documents/dyd/static/css/styles/Layers/active.css */
.active {
  background-color: rgba(10, 255, 50, 0.15) !important;
  transition: all 5s ease;
  opacity: 1 !important;
}