.overlay {
    position      : absolute;
    top           : 0;
    left          : 0;
    width         : 100vw;
    height        : 100%;
    overflow      : hidden;
    z-index       : 20;
    pointer-events: none;
}


/* Remove default button styles for custom-styled buttons */
.close,
button.menu-list-btn,
button.clickable,
button.zoom-button,
button.arrow,
button.prev-next,
button.rotate,
button.accessibility-mode-button,
button.unmute,
button.fullscreen,
button.help-note {
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
    box-shadow: none;
    outline: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
}

.disabled {
    pointer-events: none !important;
}

.overlay.no-pointer,
.overlay.no-pointer * {
    pointer-events: none !important;
}

.pointer-events {
    pointer-events: auto;
}

.overlay a {
    pointer-events: auto;
}

.overlay button {
    user-select: none;
    -webkit-user-select: none; /* for Safari */
}

.clickable {
    pointer-events: auto;
}

.header {
    position: absolute;
    top     : 0;
    left    : 0;
    right   : 0;
    height  : 5rem;
}

.bottom {
    position: absolute;
    bottom  : 0;
    left    : 0;
    right   : 0;
}

.flex-col {
    display        : flex;
    flex-direction : column;
    justify-content: space-between;
}

.flex-col.center {
    justify-content: center;
    align-items    : center;
}

.flex-row {
    display        : flex;
    flex-direction : row;
    justify-content: space-between;
}

.flex-row>.left,
.flex-row>.right {
    flex-grow  : 0;
    flex-shrink: 1;
}

.flex-row.center {
    justify-content: center;
    align-items    : center;
}

.flex-row.start {
    justify-content: flex-start;
    align-items    : center;
}

.flex-row>.left {
    display        : flex;
    flex-direction : row;
    align-items    : center;
    justify-content: flex-start;
}

.flex-row>.right {
    display        : flex;
    flex-direction : row;
    align-items    : center;
    justify-content: flex-end;
}

.header>.right {
    transform-origin: top right;
    pointer-events  : auto;
    z-index: 1;
}

.header-logo {
    margin: 0 2.5em;
}

.header .clickable {
    cursor             : pointer;
    height             : 4rem;
    padding            : 0.8rem 2rem;
    background-position: center;
    background-repeat  : no-repeat;
    background-size    : inherit;
}

.header>.left>.clickable:nth-child(2) {
    border-left: #fff3 solid 2px;
}

.header>.right>.clickable:nth-last-child(2) {
    border-right : #fff3 solid 2px;
    padding-right: 3rem;
}

/* .header>.right .burger-menu>.clickable {
    padding: 0.8rem 3rem;
} */

.header h1 {
    font-size          : 1.3rem;
    font-weight        : 400;
    text-align         : center;
    text-transform     : uppercase;
    color              : white;
    letter-spacing     : 0.4em;
    margin             : 0;
    padding            : 0.1em 1em;
    /* background-image: url('/site/templates/res/overlay/h1_line.png');
    background-size    : 100% 3px;
    background-position: bottom;
    background-repeat  : no-repeat; */
    background         : #2dd29180;
}

#menu {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 100vh;
    align-self: start;
    font-size : 1.1em;
}

#menu>.flex-row {
    align-items      : center;
    height           : 5rem;
    /* height        : 100%; */
}

#menu>.flex-row span {
    font-size     : 1.3em;
    font-weight   : 400;
    text-align    : center;
    text-transform: uppercase;
    color         : white;
    letter-spacing: 0.4em;
    margin-right  : 3em;
    padding-left  : 2em;
}

#menu>.flex-row.background {
    background: linear-gradient(to right, #00b15fcc, #007e39cc);
}

#menu .menu-icon {
    width : 1.3em;
    height: auto;
}

.menu-list {
    margin         : 0;
    padding        : 0;
    color          : white;
    list-style-type: none;
}

.menu-list li {
    pointer-events   : auto;
    cursor           : pointer;
    padding          : 0;
    background-image : url('/site/templates/res/ui/Default_Menu_Option.png');
    background-size  : 100% 100%;
    background-repeat: no-repeat;
}

.menu-list li:hover {
    background-image: url('/site/templates/res/ui/Hover_Menu_Option.png');
}

.menu-list li button.menu-list-btn {
    padding          : 1em 0 1em 2em;
}

#menu .gone {
    display: none;
}

.bottom .flex-row {
    align-items: flex-end;
}

.bottom .left {
    padding-left    : 2em;
    transform-origin: bottom left;
    pointer-events  : auto;
}

.bottom .left button > *
{
    width: 100%;
}

.bottom .right {
    padding-right   : 2em;
    transform-origin: bottom right;
}

.bottom.center {
    padding-bottom  : 1em;
    transform-origin: bottom center;
}

.bottom .clickable {
    position       : relative;
    display        : flex;
    flex-direction : column;
    justify-content: flex-start;
    cursor         : pointer;
    width          : 6em;
    height         : 8em;
    margin         : 0.5em 0.4em;
    text-decoration: none;
}

.bottom .clickable>span {
    flex-shrink   : 1;
    flex-grow     : 0;
    line-height   : 1;
    font-size     : 0.8em;
    letter-spacing: 0.2em;
    font-weight   : normal;
    text-align    : center;
    text-transform: uppercase;
    color         : white;
}

.bottom .clickable .icon {
    height             : 6em;
    background-position: top center;
    background-size    : contain;
    background-repeat  : no-repeat;
}

#prev-room {
    background-image: url('/site/templates/res/ui/Default_Previous_Room.png');
}

#prev-room:hover {
    background-image: url('/site/templates/res/ui/Hover_Previous_Room.png');
}

#prev-room:active {
    background-image: url('/site/templates/res/ui/Active_Previous_Room.png');
}

#about-dekra {
    background-image: url('/site/templates/res/ui/Default_About_Dekra.png');
}

#about-dekra:hover {
    background-image: url('/site/templates/res/ui/Hover_About_Dekra.png');
}

#about-dekra:active {
    background-image: url('/site/templates/res/ui/Active_About_Dekra.png');
}

#contact {
    background-image: url('/site/templates/res/ui/Default_Contact_Sales_V2.png');
}

#contact:hover {
    background-image: url('/site/templates/res/ui/Hover_Contact_Sales_V2.png');
}

#contact:active {
    background-image: url('/site/templates/res/ui/Active_Contact_Sales_V2.png');
}

.bottom .clickable>img {
    flex-shrink: 0;
    flex-grow  : 0;
    width      : 5em;
    height     : auto;
}

.zoomarea {
    transform       : scale(0.7);
    transition      : transform 0.2s ease-in-out;
    transition-delay: 0.5s;
}

.zoomarea:hover {
    transform       : scale(1);
    transition-delay: 0s;
}

.prev-next {
    height             : 81px;
    background-position: center;
    background-repeat  : no-repeat;
    background-size    : 100% 100%;
    pointer-events     : auto;
}

.prev-next.prev {
    width           : 120px;
    background-image: url('/site/templates/res/ui/Default_Navigation_Controler_Left_01.png');
    border-top-left-radius: 999999px;
    border-bottom-left-radius: 999999px;
}

.prev-next.prev.disabled,
.prev-next.prev.disabled:active,
.prev-next.prev:hover {
    background-image: url('/site/templates/res/ui/Hover_Navigation_Controler_Left_01.png');
}

.prev-next.prev.selected,
.prev-next.prev:active {
    background-image: url('/site/templates/res/ui/Active_Navigation_Controler_Left_01.png');
}

.prev-next.next {
    width           : 119px;
    background-image: url('/site/templates/res/ui/Default_Navigation_Controler_Right_02.png');
    border-top-right-radius: 999999px;
    border-bottom-right-radius: 999999px;
}

.prev-next.next.disabled,
.prev-next.next.disabled:active,
.prev-next.next:hover {
    background-image: url('/site/templates/res/ui/Hover_Navigation_Controler_Right_02.png');
}

.prev-next.next.selected,
.prev-next.next:active {
    background-image: url('/site/templates/res/ui/Active_Navigation_Controler_Right_02.png');
}

.control p {
    text-transform: uppercase;
    color         : white;
    user-select   : none;
}

.zoom-button {
    height             : 81px;
    background-position: center;
    background-repeat  : no-repeat;
    background-size    : 100% 100%;
    pointer-events     : auto;
    cursor             : pointer;
    margin-bottom      : 1em !important;
}

.zoom-button#zoom-out {
    width           : 89px;
    background-image: url('/site/templates/res/ui/Default_Remote_Controler_Right_02.png');
    border-top-right-radius: 999999px;
    border-bottom-right-radius: 999999px;
}

.zoom-button#zoom-out:hover {
    background-image: url('/site/templates/res/ui/Hover_Remote_Controler_Right_02.png');
}

.zoom-button#zoom-out:active {
    background-image: url('/site/templates/res/ui/Active_Remote_Controler_Right_02.png');
}

.zoom-button#zoom-in {
    width           : 90px;
    background-image: url('/site/templates/res/ui/Default_Remote_Controler_Left_01.png');
    border-top-left-radius: 999999px;
    border-bottom-left-radius: 999999px;
}

.zoom-button#zoom-in:hover {
    background-image: url('/site/templates/res/ui/Hover_Remote_Controler_Left_01.png');
}

.zoom-button#zoom-in:active {
    background-image: url('/site/templates/res/ui/Active_Remote_Controler_Left_01.png');
}

#remote-zoom {
    padding-bottom: 2em;
}

#remote {
    padding              : 2em;
    width                : 12em;
    height               : 16em;
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows   : repeat(4, 1fr);
    gap                  : 0.5em;
    pointer-events       : auto;
}

#remote #center-cross {
    width              : 100%;
    height             : 100%;
    background-image   : url('/site/templates/res/ui/Remote_Controler_Cross.png');
    background-position: center;
    background-repeat  : no-repeat;
    background-size    : 100% 100%;
    grid-row           : 2 / 3;
    grid-column        : 2 / 3;
}

#remote #remote-lookaround {
    grid-row      : 4 / 5;
    grid-column   : 1 / 4;
    text-transform: uppercase;
    color         : white;
    user-select   : none;
    justify-self  : center;
    align-self    : center;
}

#remote .arrow {
    width              : 100%;
    height             : 100%;
    scale              : 1.2;
    transform-origin   : center;
    background-image   : url('/site/templates/res/ui/Default_Remote_Controler_Up.png');
    background-position: center;
    background-repeat  : no-repeat;
    background-size    : 83.33% 83.33%; /* 100/1.2 = 83.33% to counteract 120% scaling */
    cursor             : pointer;
}

#remote .arrow:hover {
    background-image: url('/site/templates/res/ui/Hover_Remote_Controler_Up.png');
}

#remote .arrow:active {
    background-image: url('/site/templates/res/ui/Active_Remote_Controler_Up.png');
}

#remote #arrow-up {
    grid-row   : 1 / 2;
    grid-column: 2 / 3;
}

#remote #arrow-right {
    grid-row   : 2 / 3;
    grid-column: 3 / 4;
    transform  : rotate(90deg);
}

#remote #arrow-down {
    grid-row   : 3 / 4;
    grid-column: 2 / 3;
    transform  : rotate(180deg);
}

#remote #arrow-left {
    grid-row   : 2 / 3;
    grid-column: 1 / 2;
    transform  : rotate(270deg);
}

/* --- Individual Icons --- */
/* Autorotate button */
.rotate {
    background-image: url('/site/templates/res/ui/General_Default_Header_Rotate_V1.png');
}

.rotate:hover {
    background-image: url('/site/templates/res/ui/General_Hover_Header_Rotate_V1.png');
}

.rotate:active {
    background-image: url('/site/templates/res/ui/General_Active_Header_Rotate_V1.png');
}

/* Accessibility button */
body.accessibility-mode-enabled .accessibility-mode-button {
    background-image: url('/site/templates/res/ui/General_Default_Header_Accessibility_Enabled.png');
}

body:not(.accessibility-mode-enabled) .accessibility-mode-button {
    background-image: url('/site/templates/res/ui/General_Default_Header_Accessibility_Disabled.png');
}

body .accessibility-mode-button:hover {
    background-image: url('/site/templates/res/ui/General_Hover_Header_Accessibility_Hover.png');
}



/* Mute button */
body.mute .unmute {
    background-image: url('/site/templates/res/ui/General_Default_Header_Sound_Muted_V1.png');
}

body.mute .unmute:hover {
    background-image: url('/site/templates/res/ui/General_Hover_Header_Sound_Muted_V1.png');
}

body.mute .unmute:active {
    background-image: url('/site/templates/res/ui/General_Active_Header_Sound_Muted_V1.png');
}

.unmute {
    background-image: url('/site/templates/res/ui/General_Default_Header_Sound_Unmuted_V1.png');
}

.unmute:hover {
    background-image: url('/site/templates/res/ui/General_Hover_Header_Sound_Unmuted_V1.png');
}

.unmute:active {
    background-image: url('/site/templates/res/ui/General_Active_Header_Sound_Unmuted_V1.png');
}

/* Fullscreen button */
.fullscreen {
    background-image: url('/site/templates/res/ui/Default_Menu_Screen.png');
}

.fullscreen:hover {
    background-image: url('/site/templates/res/ui/Hover_Menu_Screen.png');
}

.fullscreen:active {
    background-image: url('/site/templates/res/ui/Active_Menu_Screen.png');
}

.rotate-blocker {
    display         : none;
    position        : absolute;
    z-index         : 99;
    top             : 0;
    left            : 0;
    width           : 100vw;
    height          : 100vh;
    background-color: #abb3b0;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
}

.rotate-blocker img {
    width        : 10em;
    margin-bottom: 2em;
}

/* @media screen and (max-device-width: 480px) and (orientation: portrait) {
    .rotate-blocker {
        display: flex;
    }
} */

@media screen and (min-height: 481px) and (min-width: 821px) {
    .mobile {
        display: none;
    }
}

@media screen and (max-height: 480px),
screen and (max-width: 820px) {
    .desktop {
        display: none !important;
    }

    .zoomarea {
        transform: none;
    }

    .prev-next {
        height: 3rem;
    }

    .prev-next.next,
    .prev-next.prev {
        width: 4.5rem
    }

    .bottom .right {
        padding-right: 1em;
    }

    .header {
        height: 3em;
    }

    .header-logo {
        height: 2em;
    }

    .header .left {
        max-width: 20px;
    }

    .bottom {
        font-size: 0.7em;
    }

    /* .bottom .clickable {
        width : 4rem;
        height: 5.5rem;
    }

    .bottom .clickable>img {
        height: auto;
    }

    .bottom .clickable:hover>span {
        bottom: 5.5rem;
        left  : -0.5rem;
        width : 5rem;
    } */
}

button.clickable:focus-visible,
button.zoom-button:focus-visible,
button.arrow:focus-visible,
button.prev-next:focus-visible,
button.rotate:focus-visible,
button.accessibility-mode-button:focus-visible,
button.unmute:focus-visible,
button.fullscreen:focus-visible,
button.help-note:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: var(--accessibility-outline-offset);
    box-shadow: var(--accessibility-outline-box-shadow);
    z-index: var(--accessibility-outline-z-index);
}

.menu-list-btn {
    all: unset;
    display: block;
    width: 100%;
    height: 100%;
    padding: 1em 0 1em 2em;
    cursor: pointer;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
}

.menu-list-btn:focus-visible {
    outline: var(--accessibility-outline);
    outline-offset: calc(-1 * var(--accessibility-outline-offset));
    background-color: #2222;
}