.dash-debug-menu__outer.dash-debug-menu__outer--closed,
.dash-debug-menu.dash-debug-menu--closed {
    display: none;
}

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(255,255,255,.2);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

html, body {
    background-color: rgba(255,255,255,.2);
}

#app-holder {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.image-component {
    display: flex;
    width: 100vw;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
}

#image-feed-holder {
    position: relative;

}

#image-feed {
    width: 100%;
    aspect-ratio: 16/9;
    display: block;
}

#image-feed[data-dash-is-loading="true"] {
    z-index: 101;
    position: relative;
    filter: brightness(80%);
}

#camera-time {
    text-align: right;
}

#spot-stats {
    width: 100%;
    aspect-ratio: 16/9;
    position:absolute;
    z-index: 100;
}

.hover-spot {
    cursor: pointer;
    width: 100%;
    aspect-ratio: 1;
    color: white;
    background-color: black;
    padding: 4px;
    border-radius: 6px;
    border: 2px solid orange;

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit  */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko         */
    box-sizing: border-box; 
}

.hover-spot.VAC {
    border: 2px solid green;
}

.hover-spot.OCC {
    border: 2px solid red;
}

.hover-spot-holder {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 38px;
    aspect-ratio: 1;
    filter: drop-shadow(rgba(0, 0, 0, 0.25) 0px 4px 4px);
}

@keyframes slideup {
    from {transform: translate(-50%, 100%)}
    to {transform: translate(-50%, 0%)}
}

@keyframes slidedown {
    from {transform: translate(-50%, 0%)}
    to {transform: translate(-50%, 100%)}
}

#slideup-modal {
    position: absolute;
    width: calc(100% - 80px);
    height: calc(100% - 40px);
    bottom: 0px;
    left: 50%;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    z-index: 200;
    background-color: #222222;
    padding: 32px 32px 0px 32px;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.slide-default {
    transform: translate(-50%, 100%);
}

.slide-open {
    animation-name: slideup;
    animation-duration: 0.8s;
    transform: translate(-50%, 0%);
}

.slide-close {
    animation-name: slidedown;
    animation-duration: 0.8s;
    transform: translate(-50%, 100%);
}

.slideup-modal-scrollarea {
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 10px;
}

.tab-content {
    overflow-y: auto;
    overflow-x: hidden;
}

.modebar,
.modebar--hover,
.ease-bg,
.modebar-container,
.modebar-group,
.modebar-btn,
.js-plotly-plot .plotly .main-svg {
    background: transparent !important;
}

.close-button {
    width: 24px;
    float: right;
    cursor: pointer;
}

button {
    border: none;
    outline:none;
}

.mainButton {
    position: absolute;
    border-radius: 12px;
    background-color: #222222;
    width: 80px;
    aspect-ratio: 1;
    padding: 16px;
    z-index: 150;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

#close-popup {
    background: transparent;
    float: right;
}

#open-popup {
    top: 40px;
    right: 40px;
}

#next-camera {
    bottom: 40px;
    right: 40px;
}

#prev-camera {
    bottom: 40px;
    left: 40px;
}

/* Medium Screensize */
@media only screen and (max-width: 1200px) {
    #slideup-modal {
        width: calc(100% - 40px);
        height: calc(100% - 20px);
    }

    .mainButton {
        width: 60px;
        padding: 12px;
    }

    #open-popup {
        top: 32px;
        right: 32px;
    }
    
    #next-camera {
        bottom: 32px;
        right: 32px;
    }
    
    #prev-camera {
        bottom: 32px;
        left: 32px;
    }
}

/* Small Screeensize */
@media only screen and (max-width: 768px) {
    #slideup-modal {
        padding: 24px 24px 0px 24px;
        width: calc(100% - 20px);
        height: calc(100% - 10px);
    }

    .hover-spot-holder {
        width: 24px;
    }

    .hover-spot {
        padding: 3px;
        border-radius: 4px;
    }

    #open-popup {
        top: 24px;
        right: 24px;
    }
    
    #next-camera {
        bottom: 24px;
        right: 24px;
    }
    
    #prev-camera {
        bottom: 24px;
        left: 24px;
    }
}

/* Phone screenzie */
@media only screen and (max-width: 480px) {
    #slideup-modal {
        padding: 16px 16px 0px 16px;
        width: calc(100% - 10px);
        height: calc(100% - 5px);
    }

    .hover-spot-holder {
        width: 16px;
    }

    .hover-spot {
        padding: 1px;
    }
}