﻿.screen-area {
    overflow: auto;
    position: relative;
    overscroll-behavior: contain;
}

.display-grid {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
}

.desktop-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    overflow-y: visible;
}

.mobile-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: visible;
    overflow-y: visible;
}

.action-bar {
    display: flex;
    background-color: rgba(0, 0, 0, 0.25);
    align-items: center;
    white-space: nowrap;
}



@media only screen and (max-width : 667px) {
    .desktop-actions {
        display: none;
        visibility: collapse;
    }
}

@media only screen and (min-width : 668px) {
    .mobile-actions {
        display: none;
        visibility: collapse;
    }
}

.remote-screen {
    position: absolute;
    touch-action: pan-x pan-y;
    object-fit: fill;
    cursor: default;
    /*cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAFmSURBVDhPpVPLaoNAFB0rdOEu+6arZBU/w53+QnYFgy4ihX5FsbHQQvoZgkKh/kaycdf0D0qyKOr0HB3F2BclBw7ee+5jnDszYggp5QyMwC34rrhR2kylddDUl4Xn+NyC/uFw0LMsE3me17HpdCosyxKGYZRwH8EbTdM+6iDBYvClqiq5Wq3kaDSSlPukFoahZA6QqQUbwLlnYD6ffykckjmqyQN8KM2eC67cJpGTyUQGQSCXy2Vt92PMZQ1oskG03++Pftt1XVkUjDeg7XleF2cua4CIDbZxHHdBrqaKn8ELcAym1Pp/whpgcwZn3E6bcBxH6LpO8wqTfgN3sBfUbNumXkPVXLLBSWCDHc+5RZIkoix53OKp3QLsNbU0TanXUDWv3w6RAxsO0ff9Lj4cYn2MvCRtAvnbMTKXNaAJH8opF4mAw6ucMfDfqzx8THfg4o/HtAavjx5TH2hkgj8952bPHYT4BOBBr8fZm7cvAAAAAElFTkSuQmCC') 0 0, default !important;*/
}

    .remote-screen.fit {
        max-width: 100% !important;
        max-height: 100% !important;
        width: unset !important;
        height: unset !important;
    }

    .remote-screen.stretch {
        width: 100% !important;
        height: 100% !important;
    }

.message-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0, 0.4);
}

.virtual-keyboard {
    position: absolute;
    opacity: 0;
    left: -10000px;
    top: -10000px;
    z-index: -1;
}