html,
body {
    font-family: 'SF Pro', Lato, 'Apple SD Gothic Neo', 'Nanum Barun Gothic', 'Nanum Gothic',
        'Segoe UI', 'Malgun Gothic', Roboto, Oxygen-Sans, Ubuntu, Cantarell, -apple-system,
        system-ui, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    /* display: flex; */
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    /* overflow-y: hidden; */
    overflow: hidden;
    position: fixed;

    transition: background-color 0.5s ease-in;
    background-color: transparent;
    /* background-color: magenta; */

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
}

img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

.disableScroll {
    touch-action: none;
}

#app.grabbingCursor {
    cursor: grabbing;
}
#app {
    display: flex;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    /* background-color: blue; */
    position: relative;
    z-index: 9;
    cursor: grab;
}
#app > canvas {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    /* background-color: cyan; */
}
#projectorGroup {
    margin: 0;
    padding: 0;
    position: absolute;
}
.projector {
    margin: 0;
    padding: 0;
    position: absolute;
}
#loadingVideos {
    visibility: hidden;
    position: absolute;
    left: 0px;
    right: 0px;
    width: 200px;
    height: 100px;
    z-index: 10;
    pointer-events: none;
}
#loadingVideos > video {
    width: 100px !important;
    height: 100px !important;
}
.konvajs-content {
    /* background-color: orange; */
}

/* Experimental Lab */
#toggleButtons {
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 10;
}

.debugOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    z-index: 100;
}

.debugOverlay > .dialog {
    position: relative;
    padding: 25px;
    top: 25%;
    height: 50%;
    background-color: white;
    overflow: scroll;
}

#loadingScreen {
    pointer-events: none;
}

.transparentScreen {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#domHud {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#sceneCounter {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    font-size: 300pt;
    opacity: 0.3;
    touch-action: none;
    z-index: 9;
}

#domHud {
    z-index: 10;
}

#domHud > div {
    z-index: 10;
}

button {
    padding: 0;
    margin: 0;
    border: 0;
}

#toggleButtons button,
.debugOverlay button {
    padding: revert;
    margin: revert;
    border: revert;
}

.boundaryBorder {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 1px dashed brown;
}

.toast {
    position: fixed;
    background: #ffffff;
    border-radius: 10px;
    border-color: black;
}

.toastContent {
    display: flex;
    align-items: center;
    padding: 10px 22px;
    font-size: 14px;
}

.thumbnailImage {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
}

#mp4_group_stage > video {
    position: absolute;
    left: 0;
    top: 0;
    /* Never use this option. this option cause flickering when using with 100%. They may conflict */
    /* object-fit: cover; */
    /* I don't know the reason exactly, but it reduce iOS flickering */
    object-fit: unset;
}

#overlay_group_stage > img {
    width: 100%;
    height: 100%;
}

#jpeg_group_stage {
    z-index: 1;
}

#mp4_group_stage {
    z-index: 2;
}

#overlay_group_stage {
    z-index: 3;
}
@keyframes dummyLoaderRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#initial_loading {
    animation: loadingIndicatorFadeIn 1s;
    z-index: -1;
    display: none;
}

@keyframes loadingIndicatorFadeIn {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#preloaded_background {
    z-index: -1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.log_error {
    color: red;
}
.log_warn {
    color: yellow;
}
.log_log {
    color: green;
}
.log_debug {
    color: grey;
}