/* #wrapper::selection {
    background: #ffffff00;
}

.selectReset::selection {
    background: #cccccc3f !important;
}*/

body,
html {
    margin: 0;
    padding: 0;
    font-size: 18px;
    font-family: "Arial", sans-serif;
}
#mapBody {
    margin: 0;
    padding: 0;
    width: 100%;
    height:100%;
    overflow: visible;
    overflow-y: visible;
    position: fixed;
    z-index: 46000;
    bottom: 0;
    left: 0;
    pointer-events: none;
    transform-origin: bottom;
    perspective-origin: bottom center;
    perspective: 600px;
}
#mapBody2 {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    overflow: visible;
    overflow-y: visible;
    bottom: 0;
    left: 0;
    pointer-events: none;
    transform-origin: bottom center;
    transform: rotateX(34deg) scale(1.5);
}
#thisBox {
    z-index: 1000002 !important;
}

body::-webkit-scrollbar {
    display: none;
}

html {
    scrollbar-width: none;
}

/**:focus {
    outline: none !important;
}
.selectReset:focus {
    outline: initial !important;
}*/
.tree, .cell {
    position: absolute;
    perspective-origin: center;
    overflow: visible !important;
    pointer-events: auto;
}
.tree > * {
    pointer-events: auto;
}

#fgbg {
    z-index: 35510;
    height: 622px;
    width: 100%;
    bottom: 0;
    position: absolute;
    background-image: url("/fleo.at-medien/repertoire/fg_bg_22222.png");
    background-repeat: repeat-x;
    background-position: center bottom;
    background-attachment: local;
}

#bgbg {
    z-index: 35510;
    height: 622px;
    width: 100%;
    bottom: 0;
    position: absolute;
    background-color: gray;
}

@keyframes blinkingBGBG{
    0%		{ background-color: #10c018;}
    25%		{ background-color: #1056c0;}
    50%		{ background-color: #efeb0a;}
    75%		{ background-color: #254878;}
    100%	{ background-color: #04a1d5;}
}
.flashBGBG { animation: blinkingBGBG 2s infinite; }
#flash {
    z-index: 35;
    height: 100%;
    width: 100%;
    bottom: 0;
    position: absolute;
}

#flash.f {
    background-image: url("/fleo.at-medien/layout/bg_bg_flash.png");
    background-repeat: no-repeat;
    background-position: center bottom;
}

#flash.ff {
    background-image: url("/fleo.at-medien/layout/bg_bg_flash_flash.png");
    background-repeat: no-repeat;
    background-position: center bottom;
}

#flash.fff {
    background-image: url("/fleo.at-medien/layout/bg_bg_flash_flash_flash.png");
    background-repeat: no-repeat;
    background-position: center bottom;
}

#flash.ffff {
    background-image: url("/fleo.at-medien/layout/bg_bg_flaflaflafla.png");
    background-repeat: no-repeat;
    background-position: center bottom;
}

#bgbgsterne {
    z-index: 30;
    bottom: 0;
    position: absolute;
    background-image: url("/fleo.at-medien/layout/holodeckbackground.png");
    background-repeat: repeat;
    background-position: center bottom;
    background-attachment: local; 
}

#bgbgbsterne {
    z-index: 31;
    height: 100%;
    width: 100%;
    bottom: 0;
    position: absolute;
    /* background-image: url("/fleo.at-medien/layout/b_sterne.webp");
    background-repeat: repeat-x;
    background-position: center bottom;
    background-attachment: local; */
}

#waldf {
    z-index: 32;
    height: 100%;
    width: 100%;
    bottom: 0;
    left: 0;
    position: absolute;
}

#haeuserf {
    z-index: 32;
    height: 100%;
    width: 100%;
    bottom: 0;
    left: 0;
    position: absolute;
}

#skysignal {
    z-index: 200000;
    height: 100%;
    width: 100%;
    bottom: 622px;
    left: 0;
    position: absolute;
    pointer-events: none;
}

#square {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 7000;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

svg {
    height: 100%;
    width: 100%;
}

polygon {
    fill: transparent;
    stroke: hsla(192, 100%, 50%, 0.0);
    stroke-width: 0.1;
    stroke-linejoin: round;
}
#navBac, #navBacStrong, #navFor, #navForStrong, #navLef, #navLefStrong, #navRig, #navRigStrong { pointer-events: none; display: none; }
#square, #square svg { pointer-events: none; }
polygon:hover {
    fill: hsla(192, 100%, 50%, 0.2);
}
polygon.lookL, polygon.lookR, polygon.stepL, polygon.stepR, polygon.wheelF, polygon.wheelB, polygon.straightF, polygon.straightB { pointer-events: auto; }


polygon.lookL {
    fill: hsla(0, 100%, 50%, 0.15);
}
polygon.lookR {
    fill: hsla(100, 100%, 50%, 0.15);
}
polygon.stepL {
    fill: hsla(0, 100%, 50%, 0.075);
}
polygon.stepR {
    fill: hsla(100, 100%, 50%, 0.075);
}
polygon.wheelF {
    fill: hsla(54, 100%, 50%, 0.15);
}
polygon.wheelB {
    fill: hsla(279, 100%, 50%, 0.15);
}
polygon.straightF {
    fill: hsla(56, 100%, 50%, 0.02);
}
polygon.straightB {
    fill: hsla(279, 100%, 50%, 0.03);
}



polygon.lookL:hover {
    fill: hsla(0, 100%, 50%, 0.3);
}
polygon.lookR:hover {
    fill: hsla(100, 100%, 50%, 0.3);
}
polygon.stepL:hover {
    fill: hsla(0, 100%, 50%, 0.18);
}
polygon.stepR:hover {
    fill: hsla(100, 100%, 50%, 0.182);
}
polygon.wheelF:hover {
    fill: hsla(54, 100%, 50%, 0.377);
}
polygon.wheelB:hover {
    fill: hsla(279, 100%, 50%, 0.3);
}
polygon.straightF:hover {
    fill: hsla(56, 100%, 50%, 0.2);
}
polygon.straightB:hover {
    fill: hsla(279, 100%, 50%, 0.18);
}


.filllookL { fill: hsla(0, 100%, 50%, 0.4) !important; }
.fillstepL { fill: hsla(0, 100%, 50%, 0.38) !important; }
.fillstepR { fill: hsla(100, 100%, 50%, 0.382) !important; }
.filllookR { fill: hsla(100, 100%, 50%, 0.4) !important; }
.fillwheelB { fill: hsla(279, 100%, 50%, 0.4) !important; }
.fillstraightB { fill: hsla(279, 100%, 50%, 0.28) !important; }
.fillstraightF { fill: hsla(56, 100%, 50%, 0.352) !important; }
.fillwheelF { fill: hsla(54, 100%, 50%, 0.477) !important; }




.h1 {
    font-family: 'Merriweather Sans', serif;
    font-size: 36px;
    line-height: 45px;
    font-weight: 800;
    margin-top: 0;
    background: #eeeeee;
}

a:link {
    text-decoration: none;
    color: #2a5db0;
}

a:visited {
    text-decoration: none;
    color: #560080;
}

a:hover {
    text-decoration: underline;
    color: #800000;
}

a:focus,
area:focus,
video:focus,
audio:focus {
    outline: none;
}

#abc {
    clear: both;
}

.start {
    position: absolute;
    bottom: 100px;
    z-index: 550;
}

.wall-sky {
    position: fixed;
    left: 0;
    top: 0;
}

.wall-sky img {
    width: 100vw;
}

.wall {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.move, .cage, .cage2 {
    overflow: visible;
    height: auto;
    /* will-change: bottom, transform, margin-bottom;
    transition: bottom 0.1s linear 0s, transform 0.1s linear 0s, margin-bottom 0.1s linear 0s, z-index .0s linear 0s; */
}

.floor {
    transform-origin: bottom;
}

.floor>div {
    height: 300px;
    width: 100%;
}

.floor>img {
    height: 300px;
    width: 100%;
}

.move>.special {
    display: none;
}

.infoc {
    top: -75px;
    left: 55%;
    z-index: 7001;
}

.slideDown {
    top: 0px;
    left: 55%;
    z-index: 7001;
}

#heyImFelix {
    background: #a24e4e;
    display: inline-block;
    border: 1px solid #008000;
}

.clearLeft {
    clear: both;
}



.nineedge div {
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;
}
.chcentercenter, .chleft, .chright, .chtop, .chbottom {
    background:rgb(214, 214, 195);
}

.chcentercenter:hover {
    background: yellow;
}
.chleft:hover {
    background: lightgreen;
}
.chright:hover {
    background: green;
}
.chbottom:hover {
    background: lightblue;
}
.chtop:hover {
    background: blue;
}

#infoRadioVolUp:hover {
    background: green;
}

#infoRadioVolDown:hover {
    background: red;
}

#infoRadioVolOff:hover {
    background: red;
}

#clicksChat {
    position: fixed;
    height: calc(100vh - 100px);
    right: 0;
    width: 400px;
    z-index: 7001;
    padding: 5px;
    bottom: 100px;
    pointer-events: none;
    overflow: hidden;
}

#clicksChatCont {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

#clicksChatCont p {
    padding: 3px 5px;
    overflow: visible;
    width: 20px;
}

#clicksChatCont p>span {
    background: hsla(64, 100%, 50%, 0.247);
    padding: 3px 5px;
    font-weight: 200;
    display: block;
    text-shadow: -1px -1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000, 1px 1px 0px #000;
    color: #fff;
}
#clicksChatCont p>span>a {
    background: hsla(64, 100%, 50%, 0.247);
    padding: 3px 5px;
    font-weight: 200;
    display: block;
    text-shadow: -1px -1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000, 1px 1px 0px #000;
    color: blue;
    pointer-events: auto;
}

#nameNumberText {
    background: #fff;
    text-shadow: -1px -1px 0px #6f742e, 1px -1px 0px #ff0000, -1px 1px 0px #009e0d, 1px 1px 0px #8db47b;
}

#video {
    width: 320px;
    height: 240px;
}

#photo {
    width: 320px;
    height: 240px;
}

#canvas {
    display: none;
}

.camera {
    position: relative;
    width: 320px;
    float: left;
}

.output {
    width: 320px;
    float: left;
}

#startbutton,
#stopbutton {
    display: block;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    bottom: 0;
    left: 180px;
    width: 70px;
    background-color: rgba(0, 150, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.7);
    font-size: 24px;
    color: rgba(255, 255, 255, 1.0);
}

#cameraAB #contentarea {
    font-size: 16px;
    font-family: "Lucida Grande", "Arial", sans-serif;
}

#startCamera {
    font-size: 32px;
    font-weight: bold;
    line-height: 36px;
}

#cameraAB #fuss {
    clear: both;
    width: 100%;
    border-top: 8px solid black;
}

#cameraAB #fuss-content {
    padding-bottom: 200px;
    line-height: 50px !important;
}

#cameraAB #fuss-links {
    float: left;
    width: calc(50% - 26px);
    padding: 13px;
    text-align: left;
}

#cameraAB #fuss-rechts {
    float: left;
    width: calc(50% - 26px);
    padding: 13px;
    text-align: right;
}

img,
video {
    width: 100%;
    height: auto;
}

#bgbgsterne {
    position:absolute;
    left:0;
    bottom:0;
    width: 100%;
    height: 100%;
    z-index:-1;
}

.tree>img, .cell>img {
    width: 100%;
    height: auto;
}

#wrapper {
    overflow: hidden;
    transform-style: preserve-3d;
}

#heyImVisitor {
    background: #fffff0;
    display: inline-block;
    border: 0px solid yellow;
    transform-origin: top left;
    background: #fff;
    font-size: 9px;
    color: black;
    line-height: 6px;
    letter-spacing: 0.57px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
}

.videoScaleSend {
    transform: scale(0.22);
}

.heyImVisitorLettersStyle {
    display: inline-block;
    border: 0px solid yellow;
    font-size: 9px;
    color: black;
    line-height: 6px;
    letter-spacing: 0.57px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    position: absolute;
    transform-origin: bottom left;
    bottom: -544px;
    left: 8px;
    background: beige;
}

.heyImVisitorLettersStyleMirror {
    display: inline-block;
    border: 0px solid yellow;
    font-size: 9px;
    color: black;
    line-height: 6px;
    letter-spacing: 0.57px;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    bottom: -240px;
    transform-origin: bottom left;
    position: absolute;
}

/* .videoScaleMaenniken {
    transform: scale(0.44);
} */

#videoMagic {
    width: auto;
    height: auto;
    display:block;
}

#photoMagic {
    position: absolute;
    left: 0;
    bottom: 0;
    width: auto;
    height: auto;
    display:none;
}
#selectVideoArea {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

#canvasMagic, #canvasMagic2 {
    pointer-events:none;
    transform-origin: bottom left;
    display: none;
}

.cameraMagic {
    display:inline-block;
    position: relative;
    width:auto;
    height:auto;
    overflow: hidden;
    background: #000;
}

#fleoStillFrameFilterWrap {
    position: absolute;
    left: 0;
    bottom: 0;
    display: none;
    width: 100%;
    box-sizing: border-box;
    z-index: 45;
    pointer-events: none;
}

#fleoStillFrameFilterPanel {
    display: inline-block;
    width: auto;
    max-width: min(280px, calc(100% - 24px));
    box-sizing: border-box;
    padding: 12px 12px 18px 12px;
    background: linear-gradient(to top, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.72) 48%, rgba(255,255,255,0) 100%);
    pointer-events: auto;
}

#fleoStillFrameFilterLabel {
    display: block;
    margin-bottom: 6px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    font-size: 13px;
    line-height: 1.3;
    font-family: "Lucida Grande", "Arial", sans-serif;
}

#fleoStillFrameFilterChoice {
    display: block;
    width: 100%;
    max-width: 220px;
    box-sizing: border-box;
    padding: 4px 6px;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.3;
    font-family: "Lucida Grande", "Arial", sans-serif;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(120, 120, 120, 0.7);
}

#fleoStillFrameFilterHint {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100% - 24px);
    box-sizing: border-box;
    padding: 10px 14px 16px 14px;
    background: linear-gradient(to top, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.86) 52%, rgba(255,255,255,0) 100%);
    border-radius: 8px;
    color: #c40000;
    font-size: 13px;
    line-height: 1.35;
    font-weight: bold;
    font-family: "Lucida Grande", "Arial", sans-serif;
    text-align: center;
    display: none;
    pointer-events: none;
}

.outputMagic {
    display:inline-block;
    width: 320px;
}

#startbuttonMagic,
#stopbuttonMagic,
#vbuttonMagic,
#lbuttonMagic {
    display: block;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 150, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    font-family: "Lucida Grande", "Arial", sans-serif;
    color: rgba(255, 255, 255, 1.0);
}

#contentareaMagic {
    max-height: 320px;
    font-size: 16px;
    font-family: "Lucida Grande", "Arial", sans-serif;

}

[id^="maennikenText"] {
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    width: 100%;
    text-align: center;
    text-shadow: 1px 1px #fff, -1px 1px #fff, 1px -1px #fff, -1px -1px #fff;
}

.maennikenTextWorld {
    position: absolute;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0px;
    height: 130px;
    left: 0px;
    width: 170px;
    padding: 4px;
    text-align: center;
    text-shadow: 1px 1px #fff, -1px 1px #fff, 1px -1px #fff, -1px -1px #fff;
}









[id^="audioStationBuildText"] {
    position: absolute;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -4px;
    height: 135px;
    left: 2px;
    width: 193px;
    padding: 4px;
    font-size: 24px;
    text-align: center;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
    text-shadow: 1px 1px #fff, -1px 1px #fff, 1px -1px #fff, -1px -1px #fff;
}
[id^="audioStationText"] {
    pointer-events: auto;
    position: absolute;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 560px;
    height: 135px;
    left: 7px;
    width: 193px;
    padding: 4px;
    font-size: 24px;
    text-align: center;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
    text-shadow: 1px 1px #fff, -1px 1px #fff, 1px -1px #fff, -1px -1px #fff;
} 
#audioStationTextContainer {
    pointer-events: auto;
    position: absolute;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    height: 135px;
    left: 7px;
    width: 193px;
    padding: 4px;
    font-size: 24px;
    text-align: center;
    font-weight: bold;
    font-family: 'Courier New', Courier, monospace;
    text-shadow: 1px 1px #fff, -1px 1px #fff, 1px -1px #fff, -1px -1px #fff;
}
[id^="letterCoinMillAudioStationTextLettercoin-"] > div {
    position:absolute;
}
[id^="letterCoinMillAudioStationTextLettercoin-1-"] {
    pointer-events: none;
    cursor: pointer;
}
[id^="letterCoinMillAudioStationTextLettercoin-2-"] {
    pointer-events: none;
    cursor:pointer;
}
#treasure {
    max-height: 300px;
    column-count: 1;
}
#treasure > div > div { 
    position: absolute;
}
#nameNumberText {
    cursor: pointer;
    pointer-events: auto;
}

.turnAround {
    transform: scaleX(-1);
    transition: transform 1s linear 1s;
}

.audioStationBuildControls {
    cursor:pointer;background:white;color:black;text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;border:1px solid black;border-bottom-right-radius:15px;border-bottom-left-radius:15px;text-align:center;font-size:24px;
}


.nopointerno {
    pointer-events: none;
}

.article-noside,
#fuss-content,
.pointerDo {
    pointer-events: auto;
}

[nopointer] {
    pointer-events: none;
}

.hideElement,
.hideElementCall {
    display: none;
}

.jquery-background-video-wrapper {
    position: relative;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
}

.jquery-background-video {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/**
 * Fade in videos
 * Note the .js class - so non js users still
 * see the video
 */
.jquery-background-video {
    opacity: 0;
    transition: opacity 300ms linear;
}

.jquery-background-video.is-visible {
    opacity: 1;
}

/**
 * Pause/play button
 */
.jquery-background-video-pauseplay {
    position: absolute;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 20px;
    height: 20px;
    top: 15px;
    right: 15px;
    padding: 0 !important;
    cursor: pointer;
    outline: none !important;
}

.jquery-background-video-pauseplay span {
    display: none;
}

.jquery-background-video-pauseplay:after,
.jquery-background-video-pauseplay:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

.jquery-background-video-pauseplay.play:before {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid #FFF;
}

.jquery-background-video-pauseplay.pause:before,
.jquery-background-video-pauseplay.pause:after {
    border-top: 10px solid #FFF;
    border-bottom: 10px solid #FFF;
    border-left: 5px solid #FFF;
}

.jquery-background-video-pauseplay.pause:after {
    left: 10px;
}

/* Felix */

.element-with-video-bg {
    background-image: url("/fleo.at.png");
}

.lettercoinSelected {
    background: green;
}

.menuItem {
    position:relative;float:right;z-index:15000;background:rgb(214, 214, 195);border-bottom:1px solid #000;border-left:1px solid #000;color:#000;height:28px;width:auto;cursor:pointer;padding:5px 5px 0 5px;pointer-events:auto;line-height:25px;
}
.menuItem:hover { text-decoration: underline; }
#callAcceptButton2, .acceptButton { background:green; color: white; font-weight: bold; }
#callRejectButton2, .rejectButton, .hangupButton, #hangUpButton2 { background: red; color: white; font-weight: bold; }


.toast-title {
    font-weight: bold;
  }
  .toast-message {
    -ms-word-wrap: break-word;
    word-wrap: break-word;

  }
  .toast-message a,
  .toast-message label {
    color: #ffffff;
  }
  .toast-message a:hover {
    color: #cccccc;
    text-decoration: none;
  }
  .toast-close-button {
    position: relative;
    right: -0.3em;
    top: -0.3em;
    float: right;
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    -webkit-text-shadow: 0 1px 0 #ffffff;
    text-shadow: 0 1px 0 #ffffff;
    opacity: 0.8;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    filter: alpha(opacity=80);
  }
  .toast-close-button:hover,
  .toast-close-button:focus {
    color: #000000;
    text-decoration: none;
    cursor: pointer;
    opacity: 0.4;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
    filter: alpha(opacity=40);
  }
  /*Additional properties for button version
   iOS requires the button element instead of an anchor tag.
   If you want the anchor version, it requires `href="#"`.*/
  button.toast-close-button {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
  }
  .toast-top-center {
    top: 0;
    right: 0;
    width: 100%;
  }
  .toast-bottom-center {
    bottom: 0;
    right: 0;
    width: 100%;
  }
  .toast-top-full-width {
    top: 0;
    right: 0;
    width: 100%;
  }
  .toast-bottom-full-width {
    bottom: 0;
    right: 0;
    width: 100%;
  }
  .toast-top-left {
    top: 12px;
    left: 12px;
  }
  .toast-top-right {
    top: 12px;
    right: 12px;
  }
  .toast-bottom-right {
    right: 12px;
    bottom: 12px;
  }
  .toast-bottom-left {
    bottom: 12px;
    left: 12px;
  }
  #toast-container {
    position: fixed;
    z-index: 60000;
    /*overrides*/
  
  }
  #toast-container * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  #toast-container > div {
    position: relative;
    overflow: hidden;
    margin: 0 0 6px;
    padding: 15px 15px 15px 50px;
    width: 300px;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
    background-position: 15px center;
    background-repeat: no-repeat;
    -moz-box-shadow: 0 0 12px #999999;
    -webkit-box-shadow: 0 0 12px #999999;
    box-shadow: 0 0 12px #999999;
    color: #ffffff;
    opacity: 0.8;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    filter: alpha(opacity=80);
  }
  #toast-container > :hover {
    -moz-box-shadow: 0 0 12px #000000;
    -webkit-box-shadow: 0 0 12px #000000;
    box-shadow: 0 0 12px #000000;
    opacity: 1;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    filter: alpha(opacity=100);
    cursor: pointer;
  }
  #toast-container > .toast-info {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
  }
  #toast-container > .toast-error {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
  }
  #toast-container > .toast-success {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
  }
  #toast-container > .toast-warning {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
  }
  #toast-container > .toast-accepted {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
  }
  #toast-container.toast-top-center > div,
  #toast-container.toast-bottom-center > div {
    width: 300px;
    margin: auto;
  }
  #toast-container.toast-top-full-width > div,
  #toast-container.toast-bottom-full-width > div {
    width: 96%;
    margin: auto;
  }
  .toast {
    background-color: #030303;
  }
  .toast-success {
    background-color: #51a351;
  }
  .toast-error {
    background-color: #bd362f;
  }
  .toast-info {
    background-color: #2f96b4;
  }
  .toast-warning {
    background-color: #f89406;
  }
  .toast-accepted {
    background-color: #800080;
  }
  .toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    background-color: #000000;
    opacity: 0.4;
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
    filter: alpha(opacity=40);
  }
  /*Responsive Design*/
  @media all and (max-width: 240px) {
    #toast-container > div {
      padding: 8px 8px 8px 50px;
      width: 11em;
    }
    #toast-container .toast-close-button {
      right: -0.2em;
      top: -0.2em;
    }
  }
  @media all and (min-width: 241px) and (max-width: 480px) {
    #toast-container > div {
      padding: 8px 8px 8px 50px;
      width: 18em;
    }
    #toast-container .toast-close-button {
      right: -0.2em;
      top: -0.2em;
    }
  }
  @media all and (min-width: 481px) and (max-width: 768px) {
    #toast-container > div {
      padding: 15px 15px 15px 50px;
      width: 25em;
    }
  }
.otherroom {
    display: none;
}

.ui-widget-content {
/*    background: #964d1c00 url("/fleo.at-medien/userImages/1664112909backgroun418012259898.png.webp") repeat left top; */
    background: hsla(0, 0%, 60%, 0.7);
    color: white;
}
.ui-dialog .ui-dialog-content, .ui-front {
    z-index: 50000;
}
.ui-dialog-content {
    width: 100% !important;
}
.ui-widget-overlay {
    display: none !important;
}

.ui-dialog .ui-dialog-content {
    padding: 0;
}

[class^="led-callerAudio-"] {
    width: 100%;
    height: calc(84px / 10); 
}

  .led-callerAudio-Own {
    width: 20px;
    height: 12px;
    border-radius: 2px;
  }
  .led-callerAudio-replayRecReplay, .volumen-wrapperRec > [class^="led-callerAudio-"], .volumeMeterReccallerAudio-Own > div > div, [class^="volumeMeterReccallerAudio-"] > div > div {
    width: 30px;
    height: 50px;
    border-radius: 2px;
    display: inline-block;
  }
/* -------- */

  [class^="ledGray-callerAudio-"] {
    width: 100%;
    height: calc(84px / 10); 
}

  .ledGray-callerAudio-Own {
    width: 20px;
    height: 12px;
    border-radius: 2px;
  }
  .ledGray-callerAudio-replayRecReplay, .volumen-wrapperRecGray > [class^="ledGray-callerAudio-"], .volumeMeterGrayReccallerAudio-Own > div > div, [class^="volumeMeterGrayReccallerAudio-"] > div > div {
    width: 30px;
    height: 50px;
    border-radius: 2px;
    display: inline-block;
  }
  .volumen-wrapper { width: 100%; }

  .maennikenLocator {
    position: absolute;
    border-radius: 3px;
    width: 3px;
    height: 3px;
    background: white;
    border: 2px solid green;
    z-index: 9999999;
  }

  .ui-icon-gripsmall-diagonal-se {
    transform-origin: bottom right;
    transform: scale(2);
    background: orange url("/fleo.at-js/jquery-ui/images/ui-icons_444444_256x240.png");
    background-position: -64px -224px;
    border: 0px solid #ffffff00;
    border-top-left-radius: 16px; 
  }
  #strokeWidth {
    width: 3em;
    height: 1.6em;
    top: 50%;
    margin-top: -.8em;
    text-align: center;
    line-height: 1.6em;
  }
  #strokeSlider {
    width: 80%;
  }
  div[nopointer2="1"] { pointer-events: none !important; }
  div[nopointer2="1"] > * { pointer-events: none !important; }

  #sensorsWall > div { width: 230px; padding:0 5px 0 5px; display: inline-block; }
  #sensorsWall > span { width: 50px; padding:0 5px 0 5px; display: inline-block; }

  /* .videoWallMan {
    margin: 192px 70px 0;
  } */
  .videoWallManSmall { 
    width: 60px;
  }
  .videoWallManSmall > .maennikenTextWall { 
    font-size: 10px;
    height: 50px;
  }

#walkVideoSizer::selection, #walkVideoChooser::selection, #menuBottom::selection, #menuBottom > div::selection, .nineedge > div::selection, .nineedge::selection, #mapForLocator::selection, #mapForLocator > div::selection, #mapForLocator > img::selection {
    background: #ffffff00;
}

.maennikenSpotter { width:10px;height:10px;border-radius:5px;position:absolute; }

.maennikenSpotterEurope { width:4px;height:4px;border-radius:4px;position:absolute; }

.locClick { width:16px;height:16px;pointer-events:auto;float:left; }
.locClickHover > div:hover { background:red; }

.locClickEurope { width:2px;height:2px;pointer-events:auto;float:left; }
.locClickEuropeHover > div:hover { background:red; }

.explanation {
    font-weight: 200;
    font-size: 0.2em;
    display: block;
    text-shadow: -1px -1px 0px #000, 1px -1px 0px #000, -1px 1px 0px #000, 1px 1px 0px #000;
    color: #fff;
    display: none;
} 

#hideExplanationDiv { border: 6px solid white; display:none; }

#hideExplanationDiv:hover { border: 6px solid green; }

.rainbow { background: linear-gradient(to right, orange , yellow, green, cyan, lightblue, violet); }

.ui-slider .ui-slider-handle{
    width:100px; 
    height:100px; 
    background: #00000000 url(/fleo.at-medien/layout/audio/playsliderhandle.png) repeat; overflow: visible; 
    background-size: 100%;
    position:absolute;
    margin-top: -25px;
    margin-left: -50px;
    border-style: none; 
}
.ui-slider-range { background: #ff00003f; }
.ui-slider .ui-slider-handle:focus { outline: none; }
.ui-slider-horizontal.ui-widget.ui-widget-content { border: none; }
#fleoAtHat1436 { display: none; }
.ui-slider-horizontal .ui-slider-handle { top: 0; }
.ui-slider-horizontal.ui-corner-all, .ui-slider-range.ui-corner-all { border-radius: 0; }
[alt="audioStation"] {
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 0;
}

[class^='audioStationAudioPlay-'] { width: 100%; height: 100%; }
[id^='maennikenBag-'] > div { pointer-events: auto; }
.medalGray { background: gray !important; }
.medalGreen { border: 3px solid green !important; }

/* ====== Fleo Three – shared variables & base ====== */

:root {
  --fleo-bg-1: rgba(10,12,28,0.92);
  --fleo-bg-2: rgba(20,24,55,0.85);
  --fleo-bg-soft: rgba(255,255,255,0.07);
  --fleo-border: rgba(100,140,255,0.25);
  --fleo-border-strong: rgba(100,140,255,0.4);
  --fleo-text: rgba(200,210,255,0.9);
  --fleo-text-dim: rgba(200,210,255,0.7);
  --fleo-hover: rgba(80,120,255,0.25);
  --fleo-shadow: 0 4px 30px rgba(0,0,0,0.5);
  --fleo-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fleo-radius: 4px;
  --fleo-trans: 0.2s ease;
}

.fleoGlassPanel {
  background: linear-gradient(135deg, var(--fleo-bg-1), var(--fleo-bg-2));
  border: 1px solid var(--fleo-border);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: var(--fleo-shadow);
  color: var(--fleo-text);
  font-family: var(--fleo-font);
  box-sizing: border-box;
}

.fleoControl {
  background: var(--fleo-bg-soft);
  border: 1px solid var(--fleo-border);
  border-radius: var(--fleo-radius);
  color: var(--fleo-text);
  cursor: pointer;
  transition: all var(--fleo-trans);
  font-family: inherit;
  user-select: none;
  -webkit-user-select: none;
}

.fleoControl:hover {
  background: var(--fleo-hover);
  border-color: rgba(100,160,255,0.5);
  color: white;
}

.fleoHidden {
  display: none !important;
}

.fleoOpen {
  opacity: 1;
  pointer-events: auto;
}

.fleoClosed {
  opacity: 0;
  pointer-events: none;
}

/* ====== Top menu ====== */

.fleoThreeMenu {
  z-index: 60000 !important;
  width: auto !important;
  max-width: none !important;
  max-height: 100vh !important;
  right: 0 !important;
  top: 0 !important;
  left: 0 !important;
  background: linear-gradient(135deg, rgba(10,12,28,0.85), rgba(20,24,55,0.75)) !important;
  backdrop-filter: blur(16px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
  border-bottom: 1px solid rgba(100,140,255,0.25) !important;
  box-shadow: 0 4px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05) !important;
  padding: 4px 8px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 3px !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.fleoThreeMenu .menuItem {
  pointer-events: auto !important;
  background: rgba(255,255,255,0.07) !important;
  color: rgba(200,210,255,0.9) !important;
  border: 1px solid rgba(100,140,255,0.2) !important;
  border-radius: 4px !important;
  padding: 3px 10px !important;
  font-size: 13px !important;
  line-height: 20px !important;
  height: auto !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-shadow: 0 0 8px rgba(100,140,255,0.3) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0.3px !important;
  white-space: nowrap !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

.fleoThreeMenu .menuItem::selection,
.fleoThreeMenu .menuItem *::selection {
  background: transparent !important;
  color: inherit !important;
}

.fleoThreeMenu .menuItem:hover {
  background: rgba(80,120,255,0.25) !important;
  border-color: rgba(100,160,255,0.5) !important;
  color: white !important;
  box-shadow: 0 0 12px rgba(80,120,255,0.3), inset 0 0 8px rgba(80,120,255,0.1) !important;
  text-shadow: 0 0 12px rgba(140,180,255,0.6) !important;
}

.fleoThreeMenu #fleoThreeVolumeMeterWrap {
  height: 28px !important;
  width: 128px !important;
  min-width: 128px !important;
  max-width: 128px !important;
  overflow: hidden !important;
  position: relative !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.fleoThreeMenu select {
  background: rgba(20,24,55,0.9) !important;
  color: rgba(200,210,255,0.9) !important;
  border: 1px solid rgba(100,140,255,0.3) !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  padding: 3px 6px !important;
  cursor: pointer !important;
}

.fleoThreeMenu select option {
  background: #1a1e3a !important;
  color: rgba(200,210,255,0.9) !important;
}

.fleoThreeMenu #threeJsToggle {
  background: linear-gradient(135deg, rgba(200,60,40,0.7), rgba(220,80,30,0.5)) !important;
  border-color: rgba(255,120,80,0.4) !important;
  color: white !important;
  font-weight: bold !important;
  text-shadow: 0 0 10px rgba(255,100,60,0.5) !important;
}

.fleoThreeMenu #threeJsToggle:hover {
  background: linear-gradient(135deg, rgba(220,80,40,0.85), rgba(240,100,40,0.7)) !important;
  box-shadow: 0 0 16px rgba(255,100,60,0.4) !important;
}

.fleoThreeMenu #menuOnOff {
  background: linear-gradient(135deg, rgba(40,60,200,0.6), rgba(60,80,220,0.4)) !important;
  border-color: rgba(100,140,255,0.4) !important;
  color: white !important;
  font-weight: bold !important;
}

.fleoThreeMenu .hideElement {
  display: none !important;
}

/* grouped tabs & panels */

.fleoThreeMenu .fleoThreeMenuTab {
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 4px 4px 0 0;
  border: 1px solid rgba(100,140,255,0.25);
  border-bottom: none;
  background: rgba(255,255,255,0.06);
  color: rgba(200,210,255,0.7);
  font-size: 11px;
  letter-spacing: 0.4px;
  user-select: none;
  white-space: nowrap;
}

.fleoThreeMenu .fleoThreeMenuTab.active {
  background: rgba(80,120,255,0.30) !important;
  border-color: rgba(120,170,255,0.65) !important;
  color: #fff !important;
}

.fleoThreeMenu .fleoThreeMenuPanel {
  display: none;
  width: 100%;
  order: 100;
  padding-top: 4px;
  gap: 3px;
  flex-wrap: wrap;
  pointer-events: auto;
  max-height: none;
  height: auto;
  overflow-y: auto;
}

.fleoThreeMenu .fleoThreeMenuPanel.active {
  display: flex;
}

.fleoThreeMenu .fleoThreeWebcamPanel {
  display: none;
  width: 100%;
  order: 101;
  flex: 0 0 100%;
  padding-top: 3px;
  gap: 3px;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: stretch;
  pointer-events: auto;
  height: auto;
  max-height: none;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  padding-bottom: 28px;
  border-top: 1px dashed rgba(120,170,255,0.35);
}

.fleoThreeMenu .fleoThreeWebcamPanel.active {
  display: flex;
}

.fleoThreeMenu #fleoThreeMenuPanelCommunication {
  flex-direction: row;
  align-items: stretch;
  min-height: auto;
  max-height: none;
  height: auto;
  overflow-y: auto;
}

#fleoThreeCommChooserWrap {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  width: 100%;
  align-items: flex-start;
  box-sizing: border-box;
}

#fleoThreeCommCallHub {
  width: 100%;
  box-sizing: border-box;
  flex: 0 0 auto;
}

#fleoThreeVideoRow {
  display: flex;
  width: 100%;
  gap: 4px;
  align-items: flex-start;
  align-content: flex-start;
  flex-wrap: wrap;
  margin-top: 4px;
  box-sizing: border-box;
}

#fleoThreeARButtons {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#fleoThreeARButtons .menuItem {
  font-size: 0.85em !important;
  text-align: center !important;
  padding: 4px 8px !important;
  min-width: 68px !important;
  white-space: normal !important;
}

/* vertical volume meter */

.fleoThreeMenu #fleoThreeVolumeMeterWrap .volumeClickcallerAudio-Own {
  position: relative !important;
  z-index: 0 !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  width: 120px !important;
  min-width: 120px !important;
  max-width: 120px !important;
  height: 20px !important;
  display: block !important;
  margin: 0 auto !important;
  isolation: isolate !important;
  transform: rotate(90deg) !important;
  transform-origin: center center !important;
}

.fleoThreeMenu #fleoThreeVolumeMeterWrap .volumeMetercallerAudio-Own,
.fleoThreeMenu #fleoThreeVolumeMeterWrap .volumeMeterGraycallerAudio-Own {
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 120px !important;
  height: 20px !important;
  z-index: 1 !important;
}

.fleoThreeMenu #fleoThreeVolumeMeterWrap .volumecallerAudio-Own {
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  height: 5px !important;
  z-index: 2 !important;
}

.fleoThreeMenu #fleoThreeVolumeMeterWrap .volumen-wrapper {
  display: block !important;
  height: 20px !important;
}

/* ====== Info / HUD ====== */

#fleoThreeInfo {
  position: fixed;
  bottom: 10px;
  left: 10px;
  z-index: 49010;
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  pointer-events: auto;
  font-family: monospace;
  letter-spacing: 1px;
}

#fleoThreeInfo .fleoThreeInfoText {
  pointer-events: none;
}

#fleoThreeInfo .fleoThreeReliefWrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
  pointer-events: auto;
  user-select: none;
}

#fleoThreeInfo .fleoThreeReliefLabel {
  opacity: 0.85;
  letter-spacing: 0.8px;
}

#fleoThreeInfo .fleoThreeReliefValue {
  min-width: 3ch;
  text-align: right;
  opacity: 0.95;
}

#fleoThreeInfo .fleoThreeReliefSlider {
  -webkit-appearance: none;
  appearance: none;
  width: 140px;
  height: 2px;
  border: none;
  outline: none;
  background: currentColor;
  border-radius: 1px;
  opacity: 0.85;
}

#fleoThreeInfo .fleoThreeReliefSlider::-webkit-slider-runnable-track {
  height: 2px;
  background: currentColor;
  border: none;
}

#fleoThreeInfo .fleoThreeReliefSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 2px;
  height: 16px;
  margin-top: -7px;
  border: none;
  border-radius: 0;
  background: currentColor;
  cursor: ew-resize;
}

#fleoThreeInfo .fleoThreeReliefSlider::-moz-range-track {
  height: 2px;
  background: currentColor;
  border: none;
}

#fleoThreeInfo .fleoThreeReliefSlider::-moz-range-thumb {
  width: 2px;
  height: 16px;
  border: none;
  border-radius: 0;
  background: currentColor;
  cursor: ew-resize;
}

#fleoThreeInfo .fleoThreeReliefSlider::-moz-range-progress {
  background: currentColor;
  height: 2px;
}

/* CSS2D overlay */

.fleoThreeCSS2D {
  pointer-events: none;
  transform-origin: center bottom;
}

.fleoThreeCSS2D img {
  max-width: 100%;
  height: auto;
}

/* landing banner */

#fleoThreeLandingBanner {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 49020;
  padding: 12px 32px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(40,80,200,0.85), rgba(60,20,140,0.8));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(140,180,255,0.4);
  box-shadow: 0 0 30px rgba(80,120,255,0.4), inset 0 1px 0 rgba(255,255,255,0.1);
  color: white;
  font-size: 18px;
  font-family: var(--fleo-font);
  letter-spacing: 1px;
  text-align: center;
  pointer-events: auto;
  animation: fleoThreeLandingPulse 2s ease-in-out infinite;
  transition: opacity 0.4s ease;
}

#fleoThreeLandingBanner .key {
  display: inline-block;
  padding: 2px 10px;
  margin: 0 4px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 4px;
  font-weight: bold;
}

@keyframes fleoThreeLandingPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(80,120,255,0.3); }
  50%      { box-shadow: 0 0 40px rgba(80,120,255,0.6), 0 0 80px rgba(120,160,255,0.2); }
}

/* ====== AV panel (bottom-left) ====== */

#fleoThreeAVPanel {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 49030;
  background: linear-gradient(135deg, rgba(10,12,28,0.92), rgba(20,24,55,0.85));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(100,140,255,0.25);
  border-radius: 0 8px 0 0;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--fleo-font);
  font-size: 13px;
  color: rgba(200,210,255,0.9);
  min-width: 200px;
  max-width: 320px;
  box-shadow: 0 -2px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
}

#fleoThreeAVPanel .av-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

#fleoThreeAVPanel .av-btn {
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(100,140,255,0.3);
  background: rgba(255,255,255,0.08);
  color: rgba(200,210,255,0.9);
  font-size: 12px;
  white-space: nowrap;
  transition: all 0.2s ease;
  font-family: inherit;
}

#fleoThreeAVPanel .av-btn:hover {
  background: rgba(80,120,255,0.25);
  border-color: rgba(100,160,255,0.5);
  color: white;
}

#fleoThreeAVPanel .av-btn.active {
  background: rgba(40,160,80,0.5);
  border-color: rgba(80,200,120,0.5);
  color: white;
}

#fleoThreeAVPanel select {
  padding: 3px 6px;
  border-radius: 4px;
  border: 1px solid rgba(100,140,255,0.3);
  background: rgba(20,24,55,0.9);
  color: rgba(200,210,255,0.9);
  font-size: 12px;
  font-family: inherit;
  max-width: 180px;
  cursor: pointer;
}

#fleoThreeAVPanel .av-label {
  font-size: 11px;
  color: rgba(150,160,200,0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ====== Nav minimap overlay ====== */

#fleoThreeNavMap {
  position: fixed;
  pointer-events: none;
  z-index: 49050;
  opacity: 0;
  transition: opacity 0.15s ease;
}

#fleoThreeNavMap.active {
  opacity: 1;
}

#fleoThreeNavMap canvas {
  border: 1px solid rgba(100,140,255,0.35);
  border-radius: 6px;
  box-shadow: 0 0 24px rgba(30,60,140,0.4), inset 0 0 12px rgba(0,0,0,0.3);
}

#fleoThreeNavMap .navmap-crosshair {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  pointer-events: none;
  border: 2px solid rgba(255,200,80,0.9);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255,200,80,0.5);
  transition: left 0.05s ease, top 0.05s ease;
}

/* ====== clicksChat overrides ====== */

#clicksChat.fleoThree3D {
  pointer-events: none;
  transform-origin: bottom right;
}

#clicksChat.fleoThree3D #clicksChatCont {
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
}

#clicksChat.fleoThree3D.fleoChatMarkable #clicksChatCont,
#clicksChat.fleoThree3D.fleoChatMarkable #clicksChatCont * {
  user-select: text;
  -webkit-user-select: text;
}

#clicksChat.fleoThree3D.fleoChatMarkable #clicksChatCont::selection,
#clicksChat.fleoThree3D.fleoChatMarkable #clicksChatCont *::selection {
  background: rgba(255, 234, 0, 0.35);
}

#clicksChat.fleoThree3D .fleoThreeChatReply {
  pointer-events: auto;
}

/* ====== Chat tube knob (right) ====== */

#fleoChatHandle {
  position: fixed;
  right: -24px;
  top: 50%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: hsla(64,100%,50%,0.25);
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: top 0.06s linear;
  touch-action: none;
  clip-path: inset(0 50% 0 0);
}

#fleoChatHandle:hover {
  background: hsla(64,100%,50%,0.40);
}

#fleoChatHandle .handle-dots {
  display: flex;
  flex-direction: column;
  gap: 3px;
  pointer-events: none;
  margin-left: -12px;
}

#fleoChatHandle .handle-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.8);
}

#fleoChatHandle.open {
  right: 106px;
  clip-path: inset(0 50% 0 0);
  border: 1px solid #000;
  transition: right 0.3s ease, top 0.06s linear;
}

#fleoChatTube {
  position: fixed;
  right: 0;
  top: 50%;
  width: 130px;
  height: 52px;
  margin-top: -26px;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#fleoChatTube.open {
  opacity: 1;
  pointer-events: auto;
}

#fleoChatTubeInner {
  position: absolute;
  right: 0;
  top: 0;
  width: 130px;
  height: 52px;
  display: flex;
  flex-direction: row;
}

#fleoChatTubeCylWrap {
  flex: 1;
  min-width: 0;
  height: 100%;
  perspective: 160px;
  overflow: hidden;
  border: 1px solid #000;
  border-right: none;
  border-radius: 6px 0 0 6px;
  background: hsla(64,100%,50%,0.12);
}

.fleoChatTubeArrows {
  display: flex;
  flex-direction: column;
  width: 18px;
  flex-shrink: 0;
  border: 1px solid #000;
  border-left: none;
  border-radius: 0 4px 4px 0;
  overflow: hidden;
}

.fleoChatTubeArrow {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsla(64,100%,50%,0.18);
  cursor: pointer;
  user-select: none;
  color: rgba(255,255,255,0.7);
  font-size: 10px;
  line-height: 1;
}

.fleoChatTubeArrow:hover {
  background: hsla(64,100%,50%,0.38);
  color: #fff;
}

.fleoChatTubeArrow + .fleoChatTubeArrow {
  border-top: 1px solid #000;
}

#fleoChatTubeCylinder {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.25s ease;
}

.fleoChatTubeFace {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  font: bold 11px var(--fleo-font);
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  background: hsla(64,100%,50%,0.18);
  cursor: pointer;
  user-select: none;
}

.fleoChatTubeFace.active {
  color: #fff;
  text-shadow: 0 0 4px rgba(255,255,200,0.5);
  background: hsla(64,100%,50%,0.32);
}

/* ====== Left-side sound panel & settings tube ====== */

#superGreatAudioPanel,
#fleoSuperGreatAudioPanel {
  position: fixed;
  height: calc(100vh - 115px);
  left: 0;
  width: 440px;
  z-index: 49050;
  padding: 5px;
  bottom: 115px;
  pointer-events: none;
  overflow: hidden;
  transform-origin: bottom left;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

#superGreatAudioPanel.fleoSoundHidden,
#fleoSuperGreatAudioPanel.fleoSoundHidden {
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}

#superGreatAudioPanelContent {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 100%;
  overflow-y: auto;
  padding-right: 4px;
}

#superGreatAudioPanelContent p {
  padding: 0;
  margin: 0 0 2px 0;
  overflow: visible;
  width: 100%;
  height: 20px;
  position: relative;
}

#superGreatAudioPanelContent p > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 20px;
  background: hsla(208, 36%, 46%, 0.34);
  padding: 0 8px;
  font-weight: 200;
  color: #fff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000,
               -1px 1px 0 #000, 1px 1px 0 #000;
  font-size: 12px;
  letter-spacing: 0.3px;
  box-sizing: border-box;
  border-left: 1px solid rgba(170, 210, 240, 0.5);
}

#superGreatAudioPanelContent .superGreatAudioPanelTitle {
  background: hsla(208, 42%, 40%, 0.50) !important;
  font-weight: 600 !important;
  letter-spacing: 0.9px !important;
  text-transform: uppercase;
}

#superGreatAudioPanelContent .superGreatAudioPanelStripe {
  position: relative;
  overflow: hidden;
  pointer-events: auto;
}

#superGreatAudioPanelContent .superGreatAudioPanelStripe::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--stripeFill, 0%);
  background: hsla(203, 70%, 64%, 0.40);
  pointer-events: none;
}

#superGreatAudioPanelContent .superGreatAudioPanelStripeLabel,
#superGreatAudioPanelContent .superGreatAudioPanelStripeValue {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

#superGreatAudioPanelContent .superGreatAudioPanelRange {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 20px;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  pointer-events: auto;
}

#superGreatAudioPanelContent .superGreatAudioPanelSignalRow {
  margin: 0 0 2px 0 !important;
}

#superGreatAudioPanelContent .superGreatAudioPanelSignalRow .superGreatAudioPanelStripe {
  width: calc(100% - 29px);
  pointer-events: auto;
}

#superGreatAudioPanelContent .superGreatAudioPanelSignalRow .superGreatAudioPanelRange {
  width: calc(100% - 29px);
  pointer-events: auto;
}

#superGreatAudioPanelContent .superGreatAudioPanelSignalMute {
  position: absolute;
  right: 0;
  top: 0;
  width: 23px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background: hsla(208, 35%, 36%, 0.55);
  color: #fff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000,
               -1px 1px 0 #000, 1px 1px 0 #000;
  border-left: 1px solid rgba(170, 210, 240, 0.5);
  cursor: pointer;
  user-select: none;
  font-size: 11px;
  z-index: 2;
}

#superGreatAudioPanelContent .superGreatAudioPanelSignalMute.active {
  background: hsla(0, 72%, 56%, 0.65);
}

#superGreatAudioPanelContent .superGreatAudioPanelGroupHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin: 2px 0;
  height: 20px;
  position: relative;
}

#superGreatAudioPanelContent .superGreatAudioPanelGroupHead .label {
  flex: 1;
  height: 20px;
  line-height: 20px;
  padding: 0 8px;
  background: hsla(208, 35%, 36%, 0.55);
  color: #fff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000,
               -1px 1px 0 #000, 1px 1px 0 #000;
  font-size: 12px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-left: 1px solid rgba(170, 210, 240, 0.5);
  cursor: pointer;
  user-select: none;
}

#superGreatAudioPanelContent .superGreatAudioPanelGroupHead .label .superGreatAudioPanelHeadMeta {
  float: right;
  opacity: 0.82;
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0.25px;
}

#superGreatAudioPanelContent .superGreatAudioPanelGroupHead .btn {
  width: 22px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background: hsla(208, 35%, 36%, 0.55);
  color: #fff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000,
               -1px 1px 0 #000, 1px 1px 0 #000;
  border-left: 1px solid rgba(170, 210, 240, 0.5);
  cursor: pointer;
  user-select: none;
  font-size: 11px;
}

#superGreatAudioPanelContent .superGreatAudioPanelGroupHead .btn.active {
  background: hsla(203, 70%, 64%, 0.58);
}

#superGreatAudioPanelContent .superGreatAudioPanelGroupVolumeStripe {
  height: 20px;
  position: relative;
  overflow: hidden;
  pointer-events: auto;
  background: hsla(208, 36%, 46%, 0.34);
  padding: 0 8px;
  font-weight: 200;
  color: #fff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000,
               -1px 1px 0 #000, 1px 1px 0 #000;
  font-size: 12px;
  letter-spacing: 0.3px;
  box-sizing: border-box;
  border-left: 1px solid rgba(170, 210, 240, 0.5);
  display: flex;
  align-items: center;
  cursor: ew-resize;
}

#superGreatAudioPanelContent .superGreatAudioPanelGroupBody.collapsed {
  display: none;
}

/* sound settings tube */

#fleoSoundSettingsHandle {
  position: fixed;
  left: -24px;
  bottom: 50px;
  z-index: 49041;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: hsla(208, 36%, 46%, 0.40);
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: inset(0 0 0 50%);
  transition: left 0.3s ease;
  touch-action: none;
}

#fleoSoundSettingsHandle:hover {
  background: hsla(208, 45%, 58%, 0.52);
}

#fleoSoundSettingsHandle .handle-dots {
  display: flex;
  flex-direction: column;
  gap: 3px;
  pointer-events: none;
  margin-left: 12px;
}

#fleoSoundSettingsHandle .handle-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
}

#fleoSoundSettingsHandle.open {
  left: 106px;
  clip-path: inset(0 0 0 50%);
  border: 1px solid #000;
  transition: left 0.3s ease;
}

#fleoSoundSettingsTube {
  position: fixed;
  left: 0;
  bottom: 50px;
  z-index: 49040;
  width: 130px;
  height: 52px;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#fleoSoundSettingsTube.open {
  opacity: 1;
  pointer-events: auto;
}

#fleoSoundSettingsTubeInner {
  position: absolute;
  left: 0;
  top: 0;
  width: 130px;
  height: 52px;
  display: flex;
  flex-direction: row-reverse;
}

#fleoSoundSettingsTubeCylWrap {
  flex: 1;
  min-width: 0;
  height: 100%;
  perspective: 160px;
  overflow: hidden;
  border: 1px solid #000;
  border-left: none;
  border-radius: 0 6px 6px 0;
  background: hsla(208, 36%, 46%, 0.18);
}

.fleoSoundSettingsTubeArrows {
  display: flex;
  flex-direction: column;
  width: 18px;
  flex-shrink: 0;
  border: 1px solid #000;
  border-right: none;
  border-radius: 4px 0 0 4px;
  overflow: hidden;
}

.fleoSoundSettingsTubeArrow {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsla(208, 36%, 46%, 0.26);
  cursor: pointer;
  user-select: none;
  color: rgba(255,255,255,0.8);
  font-size: 10px;
  line-height: 1;
}

.fleoSoundSettingsTubeArrow:hover {
  background: hsla(208, 45%, 58%, 0.52);
  color: #fff;
}

.fleoSoundSettingsTubeArrow + .fleoSoundSettingsTubeArrow {
  border-top: 1px solid #000;
}

#fleoSoundSettingsTubeCylinder {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.25s ease;
}

.fleoSoundSettingsTubeFace {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  font: 600 10px var(--fleo-font);
  letter-spacing: 0.45px;
  color: rgba(255,255,255,0.62);
  text-transform: uppercase;
  background: hsla(208, 36%, 46%, 0.28);
  cursor: pointer;
  user-select: none;
  text-align: center;
  padding: 0 3px;
  box-sizing: border-box;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000,
               -1px 1px 0 #000, 1px 1px 0 #000;
}

.fleoSoundSettingsTubeFace.active {
  color: #fff;
  background: hsla(208, 45%, 58%, 0.52);
}

/* ====== Virtual joystick ====== */

#fleoThreeJoystick {
  position: fixed;
  z-index: 49065;
  border-radius: 50%;
  background: rgba(15,25,50,0.55);
  border: 3px solid rgba(130,170,255,0.55);
  box-shadow: 0 6px 24px rgba(0,0,0,0.45),
              inset 0 0 24px rgba(255,255,255,0.08);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  display: none;
}

#fleoThreeJoystick .jt-base {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%,
                               rgba(255,255,255,0.12),
                               transparent 60%);
}

#fleoThreeJoystick .jt-thumb {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(145deg, #e8f0ff, #a8c4ff);
  border: 2px solid rgba(60,90,160,0.9);
  box-shadow: 0 3px 10px rgba(0,0,0,0.35),
              inset 0 -2px 6px rgba(255,255,255,0.6);
  pointer-events: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#fleoThreeJoystick.active {
  background: rgba(25,40,75,0.65);
  border-color: rgba(160,200,255,0.75);
}

#fleoThreeJoystick .jt-label {
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: rgba(180,200,255,0.6);
  letter-spacing: 0.5px;
  pointer-events: none;
  white-space: nowrap;
}

/* ====== Filters ====== */

.filter-sepia      { filter: sepia(100%); }
.filter-grayscale  { filter: grayscale(100%); }
.filter-bw         { filter: grayscale(100%) contrast(200%); }
.filter-saturate   { filter: saturate(200%); }
.filter-contrast   { filter: contrast(150%); }
.filter-invert     { filter: invert(100%); }
.filter-ocean      { filter: sepia(30%) saturate(150%) hue-rotate(-30deg) brightness(90%); }
.filter-toilet     { filter: sepia(80%) saturate(200%) hue-rotate(10deg) brightness(80%); }
.filter-hospital   { filter: grayscale(70%) saturate(300%) brightness(120%); }
.filter-grandma    { filter: sepia(100%) brightness(110%) contrast(90%); }
.filter-taxi       { filter: sepia(40%) saturate(180%) hue-rotate(-20deg) brightness(95%); }
.filter-sunshine   { filter: saturate(250%) brightness(110%) contrast(110%); }
.filter-sunset     { filter: sepia(60%) saturate(200%) hue-rotate(15deg) brightness(90%); }

/* ====== Video / still frame block ====== */

#videoMagicControl.fleoThreeAdopted {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;
  z-index: auto !important;
  transform: none !important;
  transform-origin: unset !important;
  display: flex !important;
  flex-direction: column;
  align-self: flex-start;
  float: none !important;
  clear: both !important;
  width: auto;
  max-width: 100%;
  flex-shrink: 0;
  overflow: visible;
  background: #000;
  border: 1px solid rgba(100,140,255,0.25);
  border-radius: 4px;
  font-size: 9px;
  line-height: 6px;
}

#videoMagicControl.fleoThreeAdopted > div {
  float: none !important;
  clear: both !important;
}

#videoMagicControl.fleoThreeAdopted #heyImVisitor,
#videoMagicControl.fleoThreeAdopted #heyImVisitorVideo,
#videoMagicControl.fleoThreeAdopted #heyImVisitorVideoImg {
  display: none !important;
}

#videoMagicControl.fleoThreeAdopted #heyImVisitor {
  float: none !important;
}

#videoMagicControl.fleoThreeAdopted #fleoStillFrameFilterWrap {
  display: block;
  float: none !important;
  clear: both !important;
  width: 100%;
  box-sizing: border-box;
}

#videoMagicControl.fleoThreeAdopted #fleoFrozenFrameDisplay {
  width: 100%;
  margin-top: 10px;
  position: relative;
  overflow: hidden;
}

#videoMagicControl.fleoThreeAdopted #fleoFrozenFrame {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}

#fleoStillFrameFilterHint {
  background: linear-gradient(to right, white, rgba(255,255,255,0.7));
  color: red;
  font-weight: bold;
  padding: 6px;
  text-align: center;
  display: none;
}

#videoMagicControl.fleoThreeAdopted #cameraMagic {
  position: relative !important;
  display: block !important;
  float: none !important;
  overflow: hidden !important;
}

#videoMagicControl.fleoThreeAdopted #videoMagic {
  width: auto;
  height: auto;
  max-width: 100%;
  pointer-events: none;
  display: block;
}

#videoMagicControl.fleoThreeAdopted #photoMagic {
  display: block;
  max-width: 100%;
  height: auto;
}

#videoMagicControl.fleoThreeAdopted #selectVideoArea {
  position: absolute;
  top: 0;
  left: 0;
  bottom: auto;
  pointer-events: auto;
  z-index: 30;
  background: rgba(255,255,255,0.31);
}

#videoMagicControl.fleoThreeAdopted .fleoSuperFullscreenVideoBtn {
  display: none !important;
}

#videoMagicControl.fleoThreeAdopted #startbutton,
#videoMagicControl.fleoThreeAdopted #stopbutton {
  display: none !important;
}

#videoMagicControl.fleoThreeAdopted #canvasMagic,
#videoMagicControl.fleoThreeAdopted #canvasMagic2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#videoMagicControl.fleoThreeAdopted #vbuttonMagic,
#videoMagicControl.fleoThreeAdopted #lbuttonMagic {
  display: none !important;
}

/* general hide helper */

.fleoChatHidden {
  display: none !important;
}

/* ====== Responsive tweaks ====== */

@media (max-width: 768px) {
  #videoMagicControl.fleoThreeAdopted {
    max-width: 100vw !important;
    transform: scale(1) !important;
    transform-origin: center center !important;
  }

  #videoMagicControl.fleoThreeAdopted #cameraMagic {
    max-width: 100vw !important;
    width: 100vw !important;
  }

  .fleoThreeMenu #fleoThreeMenuPanelCommunication {
    max-height: 80vh !important;
    overflow-y: auto !important;
  }
}

/* Audio panel: z-index 1000035, pointer-events: none (content stays interactive) */
#fleoSuperGreatAudioPanel,
#superGreatAudioPanel {
  z-index: 1000039;
  pointer-events: none;
}

/* clicksChat: same layer as audio panel */
#clicksChat {
  z-index: 1000039;
  pointer-events: none;
}

/* Handles (sound + chat): z-index 1000034, interactive */
#fleoSoundSettingsHandle,
#fleoChatHandle {
  z-index: 1000034;
  pointer-events: auto;
}

/* Tubes (sound + chat): z-index 1000033, interactive */
#fleoSoundSettingsTube,
#fleoChatTube {
  z-index: 1000033;
  pointer-events: auto;
}