#optionsPU {
    width: 500px;
    height: 540px;
}

.onlyDemo #optionsPU {
    height: 380px;
}

@media only screen and (max-width: 520px) {
    #optionsPU {
        width: 95%;
    }
}

@media only screen and (max-height: 591px) {
    .touch #optionsPU {
        margin-top: 50px;
    }
}

.options {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    background-color: var(--dark-color);
    border-width: 2px;
    border-color: var(--dark-color);
    text-align: center;
    -webkit-transition: border-color 0.1s;
    transition: border-color 0.1s;
    margin: 0 5px;
}

.options:hover {
    /* tooltips always on top */
    z-index: 1008;
}

.options:hover:not(.opt_inactive):not(.opt_forceDis) {
    border-color: var(--accent-color);
}

.options.opt_inactive,
.options.opt_forceDis {
    color: var(--lighter-color);
    background-color: var(--disabled-color);
    -webkit-transition: border-color 0s;
    transition: border-color 0s;
    border-color: var(--disabled-color);
    cursor: default !important;
}

.opt_text {
    position: absolute;
    bottom: 5px;
    width: 100%;
    left: 0;
}

#opt_row1 {
    position: absolute;
    top: 60px;
    height: 100px;
    width: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
}

#opt_row2 {
    position: absolute;
    top: 170px;
    height: 150px;
    width: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
}

#opt_row2 .options,
#opt_row3 .options,
#opt_row4 .options {
    margin: 0 10px;
}

#opt_row3 {
    position: absolute;
    top: 330px;
    height: 150px;
    width: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
}

#opt_row4 {
    position: absolute;
    top: 490px;
    height: 40px;
    width: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
}

.onlyDemo #opt_row4 {
    top: 330px;
}

@media only screen and (max-width: 360px) {
    #optionsPU {
        height: 390px;
    }
    .onlyDemo #optionsPU {
        height: 275px;
    }
    .opt_text {
        font-size: 12px;
    }
    #opt_row1 .options {
        width: 70px !important;
        height: 70px !important;
    }
    #opt_row2 .options,
    #opt_row3 .options {
        width: 110px !important;
        height: 110px !important;
        margin: 0 5px;
    }
    #opt_row4 .options {
        width: 110px !important;
        height: 30px !important;
        margin: 0 5px;
    }
    #opt_row1 .options .icon {
        width: 40px !important;
        height: 40px !important;
    }
    #opt_row2 .options .icon,
    #opt_row3 .options .icon {
        width: 80px !important;
        height: 80px !important;
    }
    #opt_row4 .options .icon {
        width: 26px !important;
        height: 26px !important;
    }
    #opt_row1 {
        top: 50px;
        height: 70px;
    }
    #opt_row2 {
        top: 125px;
        height: 110px;
    }
    #opt_row3 {
        top: 240px;
        height: 110px;
    }
    #opt_row4 {
        top: 355px;
        height: 30px;
    }
    .onlyDemo #opt_row4 {
        top: 240px;
    }
    #opt_row4 .opt_text {
        font-size: 15px !important;
    }
    #lightThemeLabel {
        width: 110px !important;
        height: 30px !important;
        font-size: 12px !important;
        margin: 0 5px !important;
    }
    .onlyDemo #lightThemeLabel {
        font-size: 16px !important;
    }
}


/* OPTIONS */

#options {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    padding: 5px;
    cursor: pointer;
}

#options .icon {
    display: block;
    position: absolute;
    width: 30px;
    height: 30px;
}


/* FULLSCREEN */

#fullscreenToggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    padding: 5px;
    cursor: pointer;
}

#fullscreenToggle .icon {
    position: relative;
    width: 30px;
    height: 30px;
}

#fullscreenToggle .icon.on {
    display: none;
}

#fullscreenToggle .icon.off {
    display: block;
}

#fullscreenToggle.enabled .icon.on {
    display: block;
}

#fullscreenToggle.enabled .icon.off {
    display: none;
}


/* GYROSCOPE */

#options_gyro {
    position: relative;
    width: 100px;
    height: 100px;
    padding: 5px;
    cursor: pointer;
}

#options_gyro .icon {
    position: relative;
    width: 70px;
    height: 70px;
}

#options_gyro .icon.on {
    display: none;
}

#options_gyro .icon.off {
    display: block;
}

#options_gyro.enabled .icon.on {
    display: block;
}

#options_gyro.enabled .icon.off {
    display: none;
}

body:not(.gyroscope) #options_gyro:hover #options_gyro_tooltip {
    display: inline-block;
}


/* FLOOR PLAN */

#options_floorPlan {
    position: relative;
    width: 100px;
    height: 100px;
    padding: 5px;
    z-index: 1007;
    cursor: pointer;
}

#options_floorPlan .icon {
    position: relative;
    width: 70px;
    height: 70px;
}

#options_floorPlan .icon.on {
    display: none;
}

#options_floorPlan .icon.off {
    display: block;
}

#options_floorPlan.enabled .icon.on {
    display: block;
}

#options_floorPlan.enabled .icon.off {
    display: none;
}


/* AUTOROTATE */

#options_autorotate {
    position: relative;
    width: 100px;
    height: 100px;
    padding: 5px;
    cursor: pointer;
}

#options_autorotate .icon {
    position: relative;
    width: 70px;
    height: 70px;
}

#options_autorotate .icon.on {
    display: none;
}

#options_autorotate .icon.off {
    display: block;
}

#options_autorotate.enabled .icon.on {
    display: block;
}

#options_autorotate.enabled .icon.off {
    display: none;
}


/* VR */

#options_vr {
    position: relative;
    width: 150px;
    height: 150px;
    padding: 5px;
    cursor: pointer;
}

#options_vr .icon {
    display: block;
    position: relative;
    width: 120px;
    height: 120px;
}

body:not(.gyroscope) #options_vr:hover #options_vr_tooltip {
    display: inline-block;
}


/* INFO */

#options_info {
    position: relative;
    width: 150px;
    height: 150px;
    padding: 5px;
    cursor: pointer;
}

#options_info .icon {
    display: block;
    position: relative;
    width: 120px;
    height: 120px;
}


/* HELP */

#options_help {
    position: relative;
    width: 150px;
    height: 150px;
    padding: 5px;
    cursor: pointer;
}

#options_help .icon {
    display: block;
    position: relative;
    width: 120px;
    height: 120px;
}

.onlyDemo #options_help {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 150px;
    height: 40px;
    cursor: pointer;
}

.onlyDemo #options_help .icon {
    display: block;
    width: 32px;
    height: 32px;
}

.onlyDemo #options_help .opt_text {
    display: block;
    right: 10px;
    font-size: 25px;
    letter-spacing: 2px;
}


/* SNOW */

#options_snow {
    position: absolute;
    top: 0;
    left: 40px;
    width: 40px;
    height: 40px;
    padding: 5px;
    font-size: 30px;
    z-index: 1005;
    cursor: pointer;
}

#options_snow .icon {
    position: absolute;
    width: 30px;
    height: 30px;
}

#options_snow .icon.on {
    display: none;
}

#options_snow .icon.off {
    display: block;
}

#options_snow.enabled .icon.on {
    display: block;
}

#options_snow.enabled .icon.off {
    display: none;
}

.vr #options_snow,
body:not(.snow) #options_snow {
    display: none;
}


/* TOUR */

#options_tour {
    position: relative;
    width: 150px;
    height: 150px;
    padding: 5px;
    cursor: pointer;
}

#options_tour .icon {
    display: block;
    position: relative;
    width: 120px;
    height: 120px;
}


/* LOGOUT */

#options_logout {
    position: relative;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 150px;
    height: 40px;
    cursor: pointer;
}

#options_logout .icon {
    display: block;
    width: 36px;
    height: 36px;
}

#options_logout .opt_text {
    position: absolute;
    display: block;
    left: auto;
    width: auto;
    right: 10px;
    margin-bottom: 2px;
    font-size: 20px;
}


/* LIGHT THEME */

#lightThemeLabel {
    position: relative;
    margin: 0 10px;
    width: 150px;
    height: 40px;
    font-size: 16px;
    top: 0;
}