:root {
    --sub-menu-bg: linear-gradient(180deg,#fff,#fff,#e9ecef);
    --sub-menu-color: #888;
}

:focus {
    outline: 0;
}


html, body {
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    border: 0;
    color: black;
    font-size: 13px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    background-color: #d3d9d6;
    /* overflow-y: hidden; */
}

.night .collapseImage {
    filter: invert(100%);
}

#container {
    background-color: #fff;
    width: 960px;
    min-width: 960px;
    max-height: 100vh;
    margin: 0 auto;
    border-top: 0;
    border-right: 1px solid #b7b7b7;
    border-bottom: 0;
    border-left: 1px solid #b7b7b7;
    padding: 0;
}

.night #container {
    color: #bbb;
    background-color: #000;
}

.fullscreen.login #container {
    -ms-grid-rows: 66px 24px 1fr 45px;
    grid-template-rows: 66px 24px auto 45px;
    -ms-grid-columns: 90px 1fr;
    /*grid-template-columns: 90px repeat(auto-fit, minmax(900px, 1fr));*/
    grid-template-areas: "header header" "nav nav" "content content" "footer footer";
}

.fullscreen.arg_hide #container {
    -ms-grid-rows: 66px 24px 1fr 45px;
    grid-template-rows: 66px 24px auto 45px;
    -ms-grid-columns: 90px 1fr;
    /*grid-template-columns: 90px repeat(auto-fit, minmax(900px, 1fr));*/
    grid-template-areas: "header header" "nav nav" "content content" "footer footer";
}

.fullscreen.menu_stack #container {
    -ms-grid-rows: 66px minmax(24px, max-content) 1fr 45px;
    grid-template-rows: 66px minmax(24px, max-content) auto 45px;
    -ms-grid-columns: 90px 1fr;
    /*grid-template-columns: 90px repeat(auto-fit, minmax(900px, 1fr));*/
    grid-template-areas: "header header" "nav nav" "content content" "footer footer";
}

.nofooter.fullscreen.menu_stack #container {
    -ms-grid-rows: 66px minmax(24px, max-content) 1fr 0px;
    grid-template-rows: 66px minmax(24px, max-content) auto 0px;
    -ms-grid-columns: 90px 1fr;
    /*grid-template-columns: 90px repeat(auto-fit, minmax(900px, 1fr));*/
    grid-template-areas: "header header" "nav nav" "content content" "footer footer";
}

.fullscreen #container {
    width: 100%;
    min-width: 100%;
    min-height: 0px;
    border-right: 0px none #b7b7b7;
    border-left: 0px none #b7b7b7;
    height: calc(100% - 0px);
    position: relative;
    display: -ms-grid;
    display: grid;
    grid-gap: 0px;
    grid-template-areas: "header header" "sidebar nav" "sidebar content" "sidebar footer";
    -ms-grid-columns: 90px 1fr;
    grid-template-columns: 70px auto;
    -ms-grid-rows: 66px 24px 1fr 45px;
    grid-template-rows: 66px 24px auto 45px;
}

.nofooter #container {
    -ms-grid-rows: 66px 24px 1fr 0px;
    grid-template-rows: 66px 24px auto 0px;
}

.fulldesk #container {
    width: 100%;
    height: 100%;
    min-width: 700px;
    min-height: 0px;
    border-right: 0px none #b7b7b7;
    border-left: 0px none #b7b7b7;
    position: unset;
    position: relative;
    display: -ms-grid !important;
    display: grid !important;
    grid-gap: 0px;
    grid-template-areas: "content" !important;
    -ms-grid-columns: 1fr;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
    -ms-grid-rows: 1fr;
    grid-template-rows: repeat(auto-fit, minmax(100px, 1fr)) !important;
}

.AgentInviteMasthead {
    background:url(logo.png) 0px 0px;
    background-color:#036;
    background-repeat:no-repeat;height:66px;width:100%;overflow:hidden;
}

#masthead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: auto;
    margin: 0;
    padding: 0 1rem;
    background-color: #036;
    background-image: url(../logo.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    height: 66px;
}
.masthead-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    width: 100%;
}
.idle-timeout-notify {
    color: yellow;
}
.masthead-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.masthead-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 0 0 auto;
}

.notification-icon {
    cursor: pointer;
}

.user-menu-container {
    display: flex;
    align-items: center;
}

.fullscreen #masthead {
    width: 100%;
    grid-area: header;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    -ms-grid-row: 1;
}

.fulldesk #masthead {
    display: none;
}

.fulldesk #mastheadx {
    display: none;
}

.fulldesk #p11deviceNameHeader {
    display: none;
}

.masthead-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.masthead-title {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.masthead-titles-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

#masthead .title {
    color: #c8c8c8;
    font-size: 46px;
    font-family: Arial,Helvetica,sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
}

#masthead .title2 {
    color: #c8c8c8;
    font-size: 14px;
    font-family: Arial,Helvetica,sans-serif;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
    cursor: pointer;
    padding-top: 12px;
    padding-bottom: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
}

@media (max-width: 1500px) {
    #masthead .title {
        font-size: 40px;
    }
}

@media (max-width: 1300px) {
    #masthead .title {
        font-size: 34px;
        white-space: normal;
        line-height: 1.1;
    }

    #masthead .title2 {
        font-size: 13px;
        padding-top: 10px;
        padding-bottom: 20px;
        white-space: normal;
        line-height: 1.2;
    }
}

@media (max-width: 1100px) {
    .masthead-left {
        gap: 0.75rem;
    }

    .masthead-titles-container {
        max-width: 100%;
    }

    #masthead .title {
        font-size: 30px;
    }
}

.masthead-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    flex-direction: row; /* Ensure horizontal layout */
}

.notification-icon {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
}

.notification-icon:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

#notificationCount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    height: 40px;
    padding: 6px 8px;
    border-radius: 4px;
    position: static;
    flex: 0 0 auto;
    min-width: unset;
    margin: 0;
    top: auto;
    right: auto;
}

#notificationCount:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

#notificationBadge {
    font-size: 0.65rem !important;
    box-shadow: -0.1px 1px 2px #000000;
    -webkit-box-shadow: -0.1px 1px 2px #000000;
    -moz-box-shadow: -0.1px 1px 2px #000000;
}

.user-menu-container {
    display: flex;
    align-items: center;
    flex: 0 0 auto; /* Prevent flex item from growing or shrinking */
}



#page_leftbar {
    -ms-grid-column: 1;
    -ms-grid-row: 2;
    -ms-grid-row-span: 3;
    height: 100%;
    /* height: calc(100vh - 66px); */
    width: 70px;
    z-index: 1000;
    background: #113962;
    background: linear-gradient(to bottom, #104893 0%,#113962 100%);
    color: white;
    overflow-y: hidden;
    overflow-x: hidden;
    display: none;
}

.fullscreen #page_leftbar {
    grid-area: sidebar;
    display: block;
}

.menu_stack #page_leftbar {
    display: none;
}

.arg_hide #page_leftbar {
    display: none;
}

.fulldesk #page_leftbar {
    display: none;
}


#topbar {
    position: relative;
    grid-area: nav;
    -ms-grid-column: 2;
    -ms-grid-row: 2;
}

.fulldesk #topbar {
    display: none;
}

.menu_stack #topbar, .login #topbar, .arg_hide #topbar {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    -ms-grid-row: 2;
}

.logoncontrolspan, .logoncontrolspan2 {
    color: white;
}

.topbar_td {
    width: 100px;
    height: 24px;
    cursor: pointer;
    white-space: nowrap;
}

.nonenglish .topbar_td {
    height: 24px;
    cursor: pointer;
    padding-left:16px;
    padding-right:16px;
}

.topbar_td_end {
    text-align: right;
    height: 24px;
}

#uiMenuButton {
    cursor: pointer;
    /* color: white; */
    position: absolute;
    padding: 3px;
    right: 3px;
}

.textnewui {
    color: white;
    font-weight: bold;
    padding-top: 5px;
    cursor: pointer;
    position: absolute;
    right: 0;
    margin-right: 10px;
}

.LogoffLinkColor {
    color:white;
}

#logoutControlSpan2 {
    cursor: pointer;
    color: white;
    position: absolute;
    top: 5px;
    right: 24px;
}

#uiMenu {
    position: absolute;
    top: 17px;
    right: 0;
    background-color: #eee;
    z-index: 10;
    border-radius: 5px;
    box-shadow: 1px 0px 10px 5px #333;
    padding: 5px;
}

/* #UserDummyMenuSpan,  */
#MainSubMenuSpan, #MeshSubMenuSpan, #EventsSubMenuSpan, #UserSubMenuSpan, #UsersSubMenuSpan, #ServerSubMenuSpan, #MainMenuSpan, #MainSubMenu, #MeshSubMenu, #UserSubMenu, #ServerSubMenu, #UserDummyMenu, #PluginSubMenu {
    width: 100%;
    height: 24px;
    color: var(--bs-secondary-color);
    background: var(--bs-secondary-bg);
}

.menu_stack #UserDummyMenu {
    display: none;
}

.menu_stack #PluginSubMenu {
    display: none;
}

#MainMenuSpan {
    display: table;
}

.fullscreen #MainMenuSpan {
    display: none;
}

.fulldesk #MainMenuSpan {
    display: none;
}

.menu_stack #MainMenuSpan {
    display: block;
}

#column_l {
    position: relative;
    /* float: left; */
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0 15px;
    background-color: #fff;
    /* max-height: calc(100vh - 151px); */
    min-width: unset;
    overflow: hidden;
}

.boxsize {
    -ms-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

.night #column_l {
    background-color: #000;
}

.menu_stack.fullscreen.fulldesk #column_l {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    -ms-grid-column-span: 2;
    -ms-grid-row-span: 4;
}

.fullscreen #column_l {
    -ms-grid-column: 2;
    -ms-grid-row: 3;
    grid-area: content;
    width: unset;
    /* height: calc(100vh - 111px);
        width: calc(100% - 30px); */
    overflow: hidden;
}

.menu_stack.fullscreen #column_l, .login #column_l, .arg_hide #column_l {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    -ms-grid-row: 3;
}

.fulldesk #column_l {
    height: 100%;
    width: 100%;
    height: unset;
    margin-left: unset;
    overflow-y: hidden;
    padding: 0;
    max-height: none;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    background-color: rgb(0, 51, 102);
}

.fulldesk #column_l_bottomgap {
    display: none;
}

.room4submenu {
    /*min-height: calc(100vh - 159px);*/
    min-height: calc(100vh - 184px);
}

#centralTable {
    width: 100%;
}

#welcomeimage {
    text-align: center;
    width:50%;
}

@media (max-width: 800px) {
    .fullscreen #welcomeimage {
        display: none;
    }
    #devListToolbar, #kvmListToolbar {
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
        min-width: 0;
    }
    #devListToolbarSpan {
        flex-wrap: wrap;
        gap: 8px;
    }
    #devListToolbarSpan > .d-flex.ms-auto {
        flex-basis: 100%;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-start;
    }
}

#welcomeimage img {
    height: 310px;
    width: 359px;
}

#logincell {
    text-align: center;
    width:50%;
}

.night #logincell a {
    color: blue;
}

#loginpanel, #createpanel, #resetpanel, #tokenpanel, #resettokenpanel, #resetpasswordpanel, #resetpasswordpanel, #checkemailpanel, #waitpushpanel {
    display: inline-block;
    margin: 0;
    background-color: #979797;
    border-radius: 16px;
    width: 300px;
    padding: 16px;
    text-align: center;
    color: black;
}

#passwordPolicyCallout, #rpasswordPolicyCallout {
    left: -10px;
    width: 100px;
    position: absolute;
    background-color: #FFC;
    border-radius: 5px;
    padding: 5px;
    box-shadow: 0px 0px 15px #666;
    font-size: 10px;
}

#passWarning {
    padding-top: 6px;
}

#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #113962;
    padding: 5px 0;
    text-align: center;
    z-index: 1000;
}

.fulldesk #footer {
    display: none;
}

.menu_stack.fullscreen #footer, .login #footer, .arg_hide #footer {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    -ms-grid-row: 4;
}

/* Support for footer made with table */
#footer table {
    width: 100%;
    border-spacing: 10px;
    border-collapse: separate;
}

#footer td:first-child {
    text-align: left;
    color: white;
}

#footer td {
    padding: 0px;
    text-align: right;
    color: white;
}

.footer1 {
    text-align: left;
    float: left;
    padding: 10px;
    color: white;
}

.footer2 {
    padding: 10px;
    text-align: right;
    color: white;
}

#masthead img {
    float: left;
}

#masthead p {
    font-size: 11px;
    color: #fff;
    margin: 10px 10px 0;
}

#footer a {
    color: #fff;
    text-decoration: underline;
}

    #footer a:hover {
        color: #fff;
        text-decoration: none;
    }

#verifyEmailId2 {
    color: yellow;
    margin-left: 3px;
    cursor: pointer;
}

#dialog {
    z-index: 1000;
    background-color: #EEE;
    box-shadow: 0px 0px 15px #666;
    font-family: Arial,Helvetica,sans-serif;
    border-radius: 5px;
    position: fixed;
    top: 180px;
    left: calc((100% / 2) - 200px);
    width: 400px;
    color: black;
}

#dialogHeader {
    width: 100%;
    background-color: #003366;
    color: #FFF;
    border-radius: 5px 5px 0 0;
    margin-bottom: 6px;
    cursor: move;
}

#id_dialogclose {
    float: right;
    padding: 3px;
    margin-right: 3px;
    cursor: pointer;
    background-color: white;
}

#id_dialogtitle {
    padding: 5px;
}

#dialogBody {
    margin-right: 16px;
    margin-left: 8px;
}

.dialogText {
    width: 100%;
    max-height: 260px;
    overflow-x: hidden;
    overflow-y: auto;
    line-height: 160%;
}

.dialogTextLog {
    font-size: 10px;
}

#dialog1 {
    margin: auto;
    text-align: center;
    margin: 3px;
}

#id_dialogMessage {
    padding: 10px;
}

#dialog2, #dialog3, #dialog7 {
    margin: 3px;
}

#d3uploadMode, #d3localFile {
    float: right;
    width: 260px;
}

#d3serveraction, #d2serveraction {
    width: 100%;
    background-color: #d3d9d6;
    text-align: left;
    padding: 3px;
}

#d3serverfiles, #d2serverfiles {
    width: 100%;
    height: 150px;
    background-color: white;
    padding: 2px;
    border: 1px solid gray;
    overflow-y: scroll;
}


#d3upload, #d3localmode {
    margin: 3px 0 3px 0;
    display: flex;
    justify-content: space-between;
}

#dialog7 h4 {
    width: 100%;
    border-bottom: 1px solid gray;
}

#d7otherset, #d7otherset2, #d7rdpflags {
    border: 1px solid #666;
    max-height: 180px;
    overflow-y: scroll;
}

#idx_dlgButtonBar {
    padding: 10px;
    margin-bottom: 5px;
    margin-right: 10px;
    overflow: auto;
}

#idx_dlgCancelButton, #idx_dlgCancelButton2 {
    float: right;
    min-width: 80px;
    margin-left: 5px;
}

#idx_dlgOkButton, #idx_dlgOkButton2 {
    float: right;
    min-width: 80px;
    margin-left: 5px;
}

#idx_dlgDeleteButton {
    float: left;
    min-width: 80px;
    margin-left: 5px;
}

#ua_fileaccessquota {
    width: 80px;
    text-align: right;
}

#broadcastMessage {
    width: 370px;
    height: 100px;
    resize: none;
}

#idx_deskFullBtn2, #idx_termFullBtn2 {
    float: left;
    font-size: 16px;
    cursor: pointer;
    display: none;
    margin-right: 5px;
}

.fulldesk #idx_deskFullBtn2, .fulldesk #idx_termFullBtn2 {
    display: block;
}

.fulldesk #deskFullBtn {
    display: none;
}

#p0message {
    margin: 50px;
    text-align: center;
}

.DeviceCheckbox {
    margin-top: 2px !important;
}

.deviceBarCheckbox {
    width:22px;
    float:left;
    background-color:white;
}

.night .deviceBarCheckbox {
    background-color:black;
}

#devs {
    color:black;
}

.deviceBarIcon {
    float:left;
    height:18px;
    width:18px;
    background-color:white
}

.night .deviceBarIcon {
    background-color:black;
}

#devListToolbarViewIcons {
    float: right;
}

#devListToolbarViewIcons3 {
    float: right;
}

#devListToolbarSpan {
    width: 100%;
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    vertical-align: middle;
    border-spacing: 0;
}

#SearchInput, #KvmSearchInput {
    width: 120px;
}

#SearchInput.search, #KvmSearchInput.search {
    background-color: #FDFFBE;
}

.night #SearchInput.search, .night #KvmSearchInput.search {
    background-color: grey;
}

#devListToolbarView, #devListToolbarSort, #devListToolbarSize, #devListToolbarSettings {
    float: right;
}

#refreshmap {
    margin-left: 5px;
}

/* Example if <table> is relplaced with <div><p> then image can be defined in css
#NoMeshesPanel {
    background: url(../images/info.png) no-repeat 23px 20px;
    height: 48px;
    width: 47px;
    width: 100%;
    border: none;
    margin: auto;
    padding: 20px;
}
    #NoMeshesPanel p {
        display: inline-block;
        vertical-align: middle;
        margin-left: 60px;
    } */

#NoMeshesPanel a {
    cursor: pointer;
}

#NoMeshesPanel table {
    width: 100%;
    padding: 20px;
}

NoMeshesPanel img {
    height: 48px;
    width: 47px;
}

.deviceNotifyDot {
    position:absolute;
    right:10px;
    top:0px;
    height:16px;
}

.deviceNotifyDotSub {
    text-align:center;
    color:#FFF;
    height:16px;
    width:16px;
    background-color:#00F;
    padding:2px;
    border-radius:10px;
    box-shadow: 2px 2px 10px black;
    cursor:pointer;
    margin-left:3px;
    font-size: 14px;
    float:left;
}

    .deviceNotifyDotSub:hover {
        background-color:#44F;
    }

.deviceNotifySmallDot {
    position:absolute;
    right:10px;
    top:4px;
    height:10px;
}

.deviceNotifySmallDotSub {
    text-align:center;
    color:#FFF;
    height:14px;
    width:14px;
    padding:2px;
    background-color:#00F;
    border-radius:10px;
    box-shadow: 2px 2px 10px black;
    cursor:pointer;
    margin-left:2px;
    font-size: 6px;
    float:left;
}

    .deviceNotifySmallDotSub:hover {
        background-color:#44F;
    }

.NotifyIcon1 { width:48px; height:48px; background: url(../images/notify48.png) 0px 0px; }
.NotifyIcon2 { width:48px; height:48px; background: url(../images/notify48.png) -48px 0px; }
.NotifyIcon3 { width:48px; height:48px; background: url(../images/notify48.png) -96px 0px; }
.NotifyIcon4 { width:48px; height:48px; background: url(../images/notify48.png) -144px 0px; }
.NotifyIcon5 { width:48px; height:48px; background: url(../images/notify48.png) -192px 0px; }
.NotifyIcon6 { width:48px; height:48px; background: url(../images/notify48.png) -240px 0px; }
.NotifyIcon7 { width:48px; height:48px; background: url(../images/notify48.png) -288px 0px; }
.NotifyIcon8 { width:48px; height:48px; background: url(../images/notify48.png) -336px 0px; }
.NotifyIcon9 { width:48px; height:48px; background: url(../images/notify48.png) -384px 0px; }
.NotifyIconSmall1 { width:24px; height:24px; background: url(../images/notify24.png) 0px 0px; }
.NotifyIconSmall2 { width:24px; height:24px; background: url(../images/notify24.png) -24px 0px; }
.NotifyIconSmall3 { width:24px; height:24px; background: url(../images/notify24.png) -48px 0px; }
.NotifyIconSmall4 { width:24px; height:24px; background: url(../images/notify24.png) -72px 0px; }
.NotifyIconSmall5 { width:24px; height:24px; background: url(../images/notify24.png) -96px 0px; }
.NotifyIconSmall6 { width:24px; height:24px; background: url(../images/notify24.png) -120px 0px; }
.NotifyIconSmall7 { width:24px; height:24px; background: url(../images/notify24.png) -144px 0px; }
.NotifyIconSmall8 { width:24px; height:24px; background: url(../images/notify24.png) -168px 0px; }
.NotifyIconSmall9 { width:24px; height:24px; background: url(../images/notify24.png) -192px 0px; }
.NotifyIconTiny1 { width:16px; height:16px; background: url(../images/notify16.png) 0px 0px; }
.NotifyIconTiny2 { width:16px; height:16px; background: url(../images/notify16.png) -16px 0px; }
.NotifyIconTiny3 { width:16px; height:16px; background: url(../images/notify16.png) -32px 0px; }
.NotifyIconTiny4 { width:16px; height:16px; background: url(../images/notify16.png) -48px 0px; }
.NotifyIconTiny5 { width:16px; height:16px; background: url(../images/notify16.png) -64px 0px; }
.NotifyIconTiny6 { width:16px; height:16px; background: url(../images/notify16.png) -80px 0px; }
.NotifyIconTiny7 { width:16px; height:16px; background: url(../images/notify16.png) -96px 0px; }
.NotifyIconTiny8 { width:16px; height:16px; background: url(../images/notify16.png) -112px 0px; }
.NotifyIconTiny9 { width:16px; height:16px; background: url(../images/notify16.png) -128px 0px; }

.deviceBatteryLarge {
    position:absolute;
    left:10px;
    top:140px;
    width:28px;
    height:48px;
    border:none;
    box-shadow:none;
}

.deviceBatteryLarge1 { background: url(../images/batteries48.png) 0px 0px; }
.deviceBatteryLarge2 { background: url(../images/batteries48.png) -28px 0px; }
.deviceBatteryLarge3 { background: url(../images/batteries48.png) -56px 0px; }
.deviceBatteryLarge4 { background: url(../images/batteries48.png) -84px 0px; }
.deviceBatteryLarge5 { background: url(../images/batteries48.png) -112px 0px; }
.deviceBatteryLarge6 { background: url(../images/batteries48.png) -140px 0px; }
.deviceBatteryLarge7 { background: url(../images/batteries48.png) -168px 0px; }
.deviceBatteryLarge8 { background: url(../images/batteries48.png) -196px 0px; }
.deviceBatteryLarge9 { background: url(../images/batteries48.png) -224px 0px; }
.deviceBatteryLarge10 { background: url(../images/batteries48.png) -252px 0px; }
.deviceBatteryLarge11 { background: url(../images/batteries48.png) -280px 0px; }

.deviceBatterySmall {
    position:absolute;
    left:26px;
    top:32px;
    width:14px;
    height:24px;
    border:none;
    box-shadow:none;
}

.deviceBatterySmall1 { background: url(../images/batteries24.png) 0px 0px; background-image: image-set(url(../images/batteries24.png) 1x, url(../images/batteries48.png) 2x); }
.deviceBatterySmall2 { background: url(../images/batteries24.png) -14px 0px; background-image: image-set(url(../images/batteries24.png) 1x, url(../images/batteries48.png) 2x); }
.deviceBatterySmall3 { background: url(../images/batteries24.png) -28px 0px; background-image: image-set(url(../images/batteries24.png) 1x, url(../images/batteries48.png) 2x); }
.deviceBatterySmall4 { background: url(../images/batteries24.png) -42px 0px; background-image: image-set(url(../images/batteries24.png) 1x, url(../images/batteries48.png) 2x); }
.deviceBatterySmall5 { background: url(../images/batteries24.png) -56px 0px; background-image: image-set(url(../images/batteries24.png) 1x, url(../images/batteries48.png) 2x); }
.deviceBatterySmall6 { background: url(../images/batteries24.png) -70px 0px; background-image: image-set(url(../images/batteries24.png) 1x, url(../images/batteries48.png) 2x); }
.deviceBatterySmall7 { background: url(../images/batteries24.png) -84px 0px; background-image: image-set(url(../images/batteries24.png) 1x, url(../images/batteries48.png) 2x); }
.deviceBatterySmall8 { background: url(../images/batteries24.png) -98px 0px; background-image: image-set(url(../images/batteries24.png) 1x, url(../images/batteries48.png) 2x); }
.deviceBatterySmall9 { background: url(../images/batteries24.png) -112px 0px; background-image: image-set(url(../images/batteries24.png) 1x, url(../images/batteries48.png) 2x); }
.deviceBatterySmall10 { background: url(../images/batteries24.png) -126px 0px; background-image: image-set(url(../images/batteries24.png) 1x, url(../images/batteries48.png) 2x); }
.deviceBatterySmall11 { background: url(../images/batteries24.png) -140px 0px; background-image: image-set(url(../images/batteries24.png) 1x, url(../images/batteries48.png) 2x); }

.deviceNotifyLargeDot {
    position:absolute;
    right:10px;
    top:170px;
    height:40px;
}

.deviceNotifyLargeDotSub {
    text-align:center;
    width:40px;
    height:40px;
    color:#FFF;
    padding:2px;
    background-color:#00F;
    border-radius:20px;
    box-shadow: 2px 2px 10px black;
    cursor:pointer;
    margin-left:4px;
}

    .deviceNotifyLargeDotSub:hover {
        background-color:#44F;
    }

.userAuthStrategyLogo {
    text-align:center;
    position:absolute;
    right:20px;
    top:125px;
    width:64px;
    height:64px;
    color:#FFF;
    padding:2px;
    background-color:#FFF;
    border-radius:20px;
    box-shadow: 2px 2px 10px black;
    z-index:1;
}

#xdevices {
    max-height: calc(100vh - 242px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

#xdevices th {
    color: gray;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--bs-body-bg);
}

#xdevicesmap {
    height: calc(100vh - 239px);
    width: 100%;
    overflow: hidden;
    position: relative;
}

#xmapSearchResultsDlg {
    position: absolute;
    max-height: 280px;
    left: 5px;
    top: 5px;
    max-width: 250px;
    z-index: 1000;
    background-color: #EEE;
    box-shadow: 0px 0px 15px #666;
}

#xmapSearchResultsBck {
    width: 100%;
    background-color: #003366;
    color: #FFF;
    border-radius: 5px 5px 0 0;
}

#xmapSearchClose {
    float: right;
    padding: 5px;
    cursor: pointer;
}

.xmapItem {
    overflow-y: auto;
    width: 100%;
    max-height: 240px;
}

.xmapItemSel1 {
    cursor: pointer;
    padding: 5px;
    background-color: #F5F5F5;
}

.xmapItemSel1 {
    cursor: pointer;
    padding: 5px;
    background-color: #EBEBEB;
}

#xmap-info-window {
    text-shadow: 0px 0px 15px #FFF;
}

#p2 a, #p6 a, #p10 a {
    cursor: pointer;
}

#p2AccountImageFrame {
    float: right;
    text-align: center;
    margin-bottom: 10px;
    margin-right: 10px;
    margin-top: 7px;
}

#p2AccountImage, #p2AccountImage2, #MainUserImageEx {
    width: 200px;
    height: 200px;
    border-radius: 8px;
    cursor: pointer;
    margin: 8px;
    /* box-shadow: 0px 0px 7px #000; */
    background: var(--sub-menu-bg);
    border: 1px solid #cfcdcd;
}

.p2AccountActions {
    width: 15px;
    display: inline-block;
}

    .p2AccountActions span {
        color: green;
        font-size: 10px;
    }

#p2AccountActions .mL {
    margin-left: 40px;
}

#p2ServerActions .mL {
    margin-left: 40px;
}

.newMeshBtn {
    background: url(../images/icon-addnew.png) no-repeat 0px 0px;
    height: 12px;
    width: 12px;
    cursor: pointer;
    border: none;
    padding-left: 15px;
}

#p2noMeshFound, #serverStats, #serverWarnings, #serverCertWarnings {
    margin-left: 40px;
}

#p2ServerActionsBackup, #p2ServerActionsRestore, #p2ServerActionsVersion, #p2ServerActionsErrors {
    margin-left: 0px;
}

.pTable {
    width: 100%;
}

#p50groups {
    max-height: calc(100vh - 244px);
    overflow-y: auto;
}

#p3users {
    max-height: calc(100vh - 244px);
    overflow-y: auto;
}

.p3usersTable {
    width: 100%;
    border-spacing: 0;
    padding: 0;
}

    .p3usersTable th {
        color: var(--sub-menu-bg);
    }

#p3events, #p16events, #p31events, #p41events {
    height: calc(100vh - 245px);
    overflow-y: scroll;
}

.p3eventsTable {
    width: 100%;
    border-spacing: 0;
    padding: 0;
}

/* #p4name, #p4email, #p4pass1, #p4pass2 {
    width: 230px;
} */

#p5toolbar {
    width: 100%;
}

#p5filehead {
    width: 100%;
    background: var(--bs-secondary-bg);
    padding: 4px 0px;
}

#p5filesubhead {
    background: var(--bs-secondary-bg);
    height: 28px;
}

#p5rightOfButtons {
    float: right;
    margin-top: 3px;
}

#p5filetable {
    width: 100%;
    height: calc(100vh - 295px);
    overflow: auto;
    -webkit-user-select: none;
    user-select: none;
    position: relative;
}

#p5PublicShare {
    display: none;
    width: 100%;
    overflow: auto;
    -webkit-user-select: none;
    user-select: none;
    background-color: lightsteelblue;
}

    #p5PublicShare div {
        padding: 4px;
    }

#bigok, #p11bigok, #p13bigok {
    width: 256px;
    overflow: hidden;
    position: absolute;
    left: 337px;
    top: 20px;
    text-align: center;
    font-size: 1600%;
    color: #AAAAAA;
    z-index: 99999;
}

#bigfail, #p11bigfail, #p13bigfail {
    width: 256px;
    overflow: hidden;
    position: absolute;
    left: 337px;
    top: 20px;
    text-align: center;
    font-size: 1600%;
    color: #AAAAAA;
    z-index: 99999;
}

.chartViewCanvas {
    width: 80px;
    display: inline-block;
}

.chartViewText {
    width: 200px;
    display: inline-block;
}

#serverCpuChart, #serverMemoryChart {
    width: 60px;
    height: 60px;
}

#serverMainStats {
    height: calc(100vh - 251px);
    max-height: calc(100vh - 251px);
    width: 100%;
}

#p10BackButton, #p11BackButton {
    float: left;
}

#p10html2 table {
    color: black;
    background: var(--sub-menu-bg);
    border-color: #AAA;
    border-width: 1px;
    border-style: solid;
    border-collapse: collapse;
    width: 100%;
}

#p10html2 thead {
    background-color: #AAA;
    font-weight: bold;
}

    #p10html2 thead tr {
        background-color: #AAA;
        font-weight: bold;
    }

    #p10html2 thead img {
        float: right;
        cursor: pointer;
        padding: 3px;
    }

#p10html2 .altBack {
    background-color: #DDD;
}

.mobileFileActionDropdown,
.mobileActionDropdown {
    display: none !important;
}

.pwState {
    display: table-cell;
    height: 16px;
}

.pwsYellow {
    background-color: yellow;
}

.pwsTransparent {
    background-color: #00000000;
}

.pwsBlack {
    background-color: var(--bs-body-color);
}

.pwsBlue {
    background-color: blue;
}

.pwsBlue2 {
    background-color: blue;
}

.pwsLightblue {
    background-color: lightblue;
}

.pwsBlueviolet {
    background-color: blueviolet;
}

.pwsDarkgreen {
    background-color: darkgreen;
}

.pwsLightseagreen {
    background-color: lightseagreen;
}

.pwsLightseagreen2 {
    background-color: lightseagreen;
}

.p10html3right {
    float: right;
    font-size: small;
}

.p10html3left {
    font-size: small;
}

.fulldesk #p11 {
    height: 100%;
}

#MainComputerImage {
    border-width: 0px;
    height: 200px;
    width: 200px;
}

#MainComputerState {
    font-size: 12px;
    font-weight: bold;
    width: 100%;
    text-align: center;
}

#d2netinfo .dialogText {
    padding-right: 10px;
}

#p12warning, #p12warning2, #p11warning, #p11warning2 {
    max-width: 100%;
    display: none;
    cursor: pointer;
    margin-bottom: 5px;
}

#MainMeshImage {
    border-width: 0px;
    height: 200px;
    width: 200px;
    float: right;
}

#DeskTools {
    position: absolute;
    width: 400px;
    height: 100%;
    background: var(--sub-menu-bg);
    top: 0;
    right: 0;
    border-left: 2px solid lightgray;
}

#DeskToolsRefreshButton {
    float: right;
    padding: 3px;
    cursor: pointer;
}

a {
    color: #036;
    text-decoration: underline;
    cursor: pointer;
}

.night a {
    color: #69B;
}

.i1 {
    background: url(../images/icons50.png) 0px 0px;
    background-image: image-set(url(../images/icons50.png) 1x, url(../images/icons100.png) 2x);
    height: 50px;
    width: 50px;
    cursor: pointer;
    border: none;
}

.i2 {
    background: url(../images/icons50.png) -50px 0px;
    background-image: image-set(url(../images/icons50.png) 1x, url(../images/icons100.png) 2x);
    height: 50px;
    width: 50px;
    cursor: pointer;
    border: none;
}

.i3 {
    background: url(../images/icons50.png) -100px 0px;
    background-image: image-set(url(../images/icons50.png) 1x, url(../images/icons100.png) 2x);
    height: 50px;
    width: 50px;
    cursor: pointer;
    border: none;
}

.i4 {
    background: url(../images/icons50.png) -150px 0px;
    background-image: image-set(url(../images/icons50.png) 1x, url(../images/icons100.png) 2x);
    height: 50px;
    width: 50px;
    cursor: pointer;
    border: none;
}

.i5 {
    background: url(../images/icons50.png) -200px 0px;
    background-image: image-set(url(../images/icons50.png) 1x, url(../images/icons100.png) 2x);
    height: 50px;
    width: 50px;
    cursor: pointer;
    border: none;
}

.i6 {
    background: url(../images/icons50.png) -250px 0px;
    background-image: image-set(url(../images/icons50.png) 1x, url(../images/icons100.png) 2x);
    height: 50px;
    width: 50px;
    cursor: pointer;
    border: none;
}

.i7 {
    background: url(../images/icons50.png) -300px 0px;
    background-image: image-set(url(../images/icons50.png) 1x, url(../images/icons100.png) 2x);
    height: 50px;
    width: 50px;
    cursor: pointer;
    border: none;
}

.i8 {
    background: url(../images/icons50.png) -350px 0px;
    background-image: image-set(url(../images/icons50.png) 1x, url(../images/icons100.png) 2x);
    height: 50px;
    width: 50px;
    cursor: pointer;
    border: none;
}

.j1 {
    background: url(../images/icons16.png) 0px 0px;
    background-image: image-set(url(../images/icons16.png) 1x, url(../images/icons32.png) 2x);
    height: 16px;
    width: 16px;
    cursor: pointer;
    border: none;
}

.j2 {
    background: url(../images/icons16.png) -16px 0px;
    background-image: image-set(url(../images/icons16.png) 1x, url(../images/icons32.png) 2x);
    height: 16px;
    width: 16px;
    cursor: pointer;
    border: none;
}

.j3 {
    background: url(../images/icons16.png) -32px 0px;
    background-image: image-set(url(../images/icons16.png) 1x, url(../images/icons32.png) 2x);
    height: 16px;
    width: 16px;
    cursor: pointer;
    border: none;
}

.j4 {
    background: url(../images/icons16.png) -48px 0px;
    background-image: image-set(url(../images/icons16.png) 1x, url(../images/icons32.png) 2x);
    height: 16px;
    width: 16px;
    cursor: pointer;
    border: none;
}

.j5 {
    background: url(../images/icons16.png) -64px 0px;
    background-image: image-set(url(../images/icons16.png) 1x, url(../images/icons32.png) 2x);
    height: 16px;
    width: 16px;
    cursor: pointer;
    border: none;
}

.j6 {
    background: url(../images/icons16.png) -80px 0px;
    background-image: image-set(url(../images/icons16.png) 1x, url(../images/icons32.png) 2x);
    height: 16px;
    width: 16px;
    cursor: pointer;
    border: none;
}

.j7 {
    background: url(../images/icons16.png) -96px 0px;
    background-image: image-set(url(../images/icons16.png) 1x, url(../images/icons32.png) 2x);
    height: 16px;
    width: 16px;
    cursor: pointer;
    border: none;
}

.j8 {
    background: url(../images/icons16.png) -112px 0px;
    background-image: image-set(url(../images/icons16.png) 1x, url(../images/icons32.png) 2x);
    height: 16px;
    width: 16px;
    cursor: pointer;
    border: none;
}

.relayIcon16 {
    background: url(../images/icon-relay.png);
    height: 16px;
    width: 16px;
    cursor: pointer;
    border: none;
}

.lbbutton {
    width: 74px;
    height: 74px;
    border-radius: 5px;
    background-color: white;
    margin-left: 8px;
    margin-top: 8px;
    position: relative;
    cursor: pointer;
    opacity: 0.5;
}

    .night .lbbutton {
        background-color: black;
    }

    .lbbutton:hover {
        opacity: 1;
    }

nav .lbbuttonsel {
    width: 100%;
    border-radius: 5px 0px 0px 5px;
    opacity: 0.9;
    background-color: #ffffff;
    color: #113962 !important;
}

nav .lbbuttonsel2 {
    width: 100%;
    border-radius: 5px 0px 0px 5px;
    opacity: 1;
    background-color: #ffffff;
    color: #113962 !important;
}

/*groups all buttons repeated code into one block*/
.lbtg {
    height: 62px;
    width: 62px;
    cursor: pointer;
    border: none;
    position: absolute;
    top: 6px;
    left: 6px;
}

.lb1 {
    background: url(../images/leftbar-64.png) -1px -2px;
    background-image: image-set(url(../images/leftbar-64.png) 1x, url(../images/leftbar-128.png) 2x);
}

.lb2 {
    background: url(../images/leftbar-64.png) -66px -2px;
    background-image: image-set(url(../images/leftbar-64.png) 1x, url(../images/leftbar-128.png) 2x);
}

.lb3 {
    background: url(../images/leftbar-64.png) -130px -2px;
    background-image: image-set(url(../images/leftbar-64.png) 1x, url(../images/leftbar-128.png) 2x);
}

.lb4 {
    background: url(../images/leftbar-64.png) -194px -2px;
    background-image: image-set(url(../images/leftbar-64.png) 1x, url(../images/leftbar-128.png) 2x);
}

.lb5 {
    background: url(../images/leftbar-64.png) -257px -2px;
    background-image: image-set(url(../images/leftbar-64.png) 1x, url(../images/leftbar-128.png) 2x);
}

.lb6 {
    background: url(../images/leftbar-64.png) -318px -2px;
    background-image: image-set(url(../images/leftbar-64.png) 1x, url(../images/leftbar-128.png) 2x);
}

.m0 {
    background: url(../images/images16.png) -32px 0px;
    height: 16px;
    width: 16px;
    border: none;
    float: left;
}

.m1 {
    background: url(../images/images16.png) -16px 0px;
    height: 16px;
    width: 16px;
    border: none;
    float: left;
}

.m2 {
    background: url(../images/images16.png) -96px 0px;
    height: 16px;
    width: 16px;
    border: none;
    float: left;
}

.m3 {
    background: url(../images/images16.png) -112px 0px;
    height: 16px;
    width: 16px;
    border: none;
    float: left;
}

.m4 {
    background: url(../images/images16.png) -128px 0px;
    height: 16px;
    width: 16px;
    border: none;
    float: left;
}

.m99 {
    background: url(../images/meshicon16.png);
    height: 16px;
    width: 16px;
    border: none;
    float: left;
}

.si1 {
    background: url(../images/icons16.png) 0px 0px;
    background-image: image-set(url(../images/icons16.png) 1x, url(../images/icons32.png) 2x);
    height: 16px;
    width: 16px;
    border: none;
    float: left;
}

.si2 {
    background: url(../images/icons16.png) -16px 0px;
    background-image: image-set(url(../images/icons16.png) 1x, url(../images/icons32.png) 2x);
    height: 16px;
    width: 16px;
    border: none;
    float: left;
}

.si3 {
    background: url(../images/icons16.png) -32px 0px;
    background-image: image-set(url(../images/icons16.png) 1x, url(../images/icons32.png) 2x);
    height: 16px;
    width: 16px;
    border: none;
    float: left;
}

.si4 {
    background: url(../images/icons16.png) -48px 0px;
    background-image: image-set(url(../images/icons16.png) 1x, url(../images/icons32.png) 2x);
    height: 16px;
    width: 16px;
    border: none;
    float: left;
}

.si5 {
    background: url(../images/icons16.png) -64px 0px;
    background-image: image-set(url(../images/icons16.png) 1x, url(../images/icons32.png) 2x);
    height: 16px;
    width: 16px;
    border: none;
    float: left;
}

.si6 {
    background: url(../images/icons16.png) -80px 0px;
    background-image: image-set(url(../images/icons16.png) 1x, url(../images/icons32.png) 2x);
    height: 16px;
    width: 16px;
    border: none;
    float: left;
}

.si7 {
    background: url(../images/icons16.png) -96px 0px;
    background-image: image-set(url(../images/icons16.png) 1x, url(../images/icons32.png) 2x);
    height: 16px;
    width: 16px;
    border: none;
    float: left;
}

.si8 {
    background: url(../images/icons16.png) -112px 0px;
    background-image: image-set(url(../images/icons16.png) 1x, url(../images/icons32.png) 2x);
    height: 16px;
    width: 16px;
    border: none;
    float: left;
}

.mi {
    background: url(../images/meshicon50.png) 0px 0px;
    background-image: image-set(url(../images/meshicon50.png) 1x, url(../images/meshicon100.png) 2x);
    height: 50px;
    width: 50px;
    cursor: pointer;
    border: none;
}

#floatframe {
    position: fixed;
    top: 200px;
    height: 300px;
    z-index: 200;
    display: none;
}

.style1 {
    text-align: center;
}

.style2 {
    text-align: center;
    background: var(--sub-menu-bg);
    font-weight: bold;
}

.style3 {
    text-align: center;
    color: white;
    background: var(--bs-secondary-bg);
    font-weight: bold;
}

.style3x {
    text-align: center;
    color: var(--bs-secondary-color);
    background: var(--bs-secondary-bg);
    font-weight: bold;
}

    .style3x:hover {
        background-color: #606060;
    }

    .style3x.fullselect {
        background-color: #003366;
    }

    .style3x.semiselect {
        background-color: #606060;
    }

.style3sel {
    text-align: center;
    color: white;
    background-color: #003366;
    font-weight: bold;
}


.style4 {
    color: white;
    text-decoration: none;
}

.style5 {
    text-align: center;
    background: var(--sub-menu-bg);
    font-weight: normal;
}

.style6 {
    text-align: left;
    background: var(--sub-menu-bg);
    padding: 3px;
}

.night .style6 {
    background-color: #333;
}

.style7 {
    font-size: large;
    width: 180px;
}

.style9 {
    max-width: 400px;
    overflow: hidden;
}

.style10 {
    background-color: #C9C9C9;
    color: #000;
}

.night .style10 {
    background-color: #333;
    color: #CCC;
}

.style10s {
    background-color: #b9b9b9;
}

.night .style10s {
    background-color: #444;
}

.style11 {
    font-size: large;
    background-color: #C9C9C9;
}

.style14 {
    height: 100%;
    text-align: left;
    background: var(--bs-secondary-bg);
}

.night .style14 {
    color: #CCC;
}

.auto-style1 {
    background: var(--bs-secondary-bg);
}

.night .auto-style1 {
    color: #CCC;
}

.icon2 {
    float: left;
    margin: 7px;
}

.warningbox {
    width: auto;
    border-radius: 8px;
    padding: 8px;
    background-color: lightsalmon;
}

.fileIcon1 {
    background: url(data:image/gif;base64,R0lGODlhEAAQAJEDAPb49Y2Sj9LT2f///yH5BAEAAAMALAAAAAAQABAAAAImnI+py+1vhJwyUYAzHTL4D3qdlJWaIFJqmKod607sDKIiDUP63hQAOw==);
    height: 16px;
    width: 16px;
    cursor: pointer;
    border: none;
    float: left;
    margin-top: 1px;
}

.fileIcon2 {
    background: url(data:image/gif;base64,R0lGODlhEAAQAJEDAM2xV/Xur+XPgP///yH5BAEAAAMALAAAAAAQABAAAAJD3ISZIGHWUGihznesYDYATFVM+D2hJ4lgN1olxALAtAlmPCJvuMmJd6PJckDYwicrHhTD5o7plJmg0Uc0asNMkphHAQA7);
    height: 16px;
    width: 16px;
    cursor: pointer;
    border: none;
    float: left;
    margin-top: 1px;
}

.fileIcon3 {
    background: url(data:image/gif;base64,R0lGODlhEAAQAJEDAPb19IGBgbq6uv///yH5BAEAAAMALAAAAAAQABAAAAIy3ISpxgcPH2ouQgFEw1YmxnUXKEaaEZZnVWZk66JwzKpvuwZzwOgwb/C1gIOA8Yg8DgoAOw==);
    height: 16px;
    width: 16px;
    cursor: pointer;
    border: none;
    float: left;
    margin-top: 1px;
}

.fileIcon4 {
    background: url(../images/meshicon16.png);
    height: 16px;
    width: 16px;
    cursor: pointer;
    border: none;
    float: left;
    margin-top: 1px;
}

.fileIcon5 {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABVklEQVQ4T42Ty22DUBBFzW9PB3EJpoKYDpwKIiQ+YpW4grSQHRIgESqIO3A6CB3YHYQlCz65F/Gslwe2gzTCwNwzd2aetdU/rqIo7KZp7DiOz2q6dk+fpulG1/XPYRhshBuGYSVrbgIkcQ0RY6NCFgEUappWIFiVwpJ3PD+rkBlAqrqerLoUIR6CINhnWXaUIX8AC2IyamEb4lfZSdu2zgVwRSzmNUIQOwyUrTzi95bvRkCSJGvLso54IWwvLYezeIL4heK+770oig4jIM9zrmk3qZjIfbPvRZAQ86PGQ4JefqbMyjRN1/O8etrEt0qAg7NhGA5zRgAGs8Wdk+X1DiclV4iJO/hGgOyklqvPHED44fu+RyicVHB2QpItWlPFI2CawUkMEJBD13Ulpv0mVZ9VFq2NAKUNte2r4osDAWHvyiq/8LxX/0ByhdlRntyseOJuCQXkFwkT7PS0vyFtAAAAAElFTkSuQmCC);
    height: 16px;
    width: 16px;
    cursor: pointer;
    border: none;
    float: left;
    margin-top: 1px;
}

.fileIcon6 {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABCUlEQVQ4T6WT3Q2CMBSFLTAAbiAb4AhuIBvYBEJ40wkcQV/5SXAEN9ANdAPZwL5DwNOENm2xxoQmPLT3nq/3nAaymLnITP3CCqjr2m/bdkUI8ZMkudsumgC4sOu6IwQ7fL4iPAN0MEEaYBTf0BRabmSALNWaBijL8oTi/lcusHSN4zgSPSbgbYzNIGDDMKxUqOd5S0op42cSUBRFiOaHJBPSuK675o1VVb0MyEYEawUAJP3CGgfLXPq+j9I0vWoTjAFyC+p6jhstVLxSkGVZowH4BqPWGJU/n3XB5gUh0q8h/vOMCDAQAU4mEFTLJHeII1VsBQhQnudbx3EYhE9T+NXCL++22uy/8QNYGm0RH2Rb4gAAAABJRU5ErkJggg==);
    height: 16px;
    width: 16px;
    cursor: pointer;
    border: none;
    float: left;
    margin-top: 1px;
}

.filelist {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
    cursor: default;
    -khtml-user-drag: element;
    clear: both;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .filelist:hover {
        background: #EEE;
        border-radius: 3px;
    }

    .night .filelist:hover {
        background: #444;
    }

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.selecttext {
    -webkit-touch-callout: text;
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.fsize {
    float: right;
    text-align: right;
    width: 180px;
}

.g1t {
    background-position: 0% 0%;
    width: 14px;
    height: 100%;
    /* fallback (Opera) */
    /* Mozilla: */
    /* Chrome, Safari:*/
    background-image: linear-gradient(to right, #fff 0%, #c9c9c9 100%);
    background-color: #c9c9c9;
    background-repeat: repeat;
    background-attachment: scroll;
}

.night .g1t {
    background-image: linear-gradient(to right, #000 0%, #333 100%);
}

.g1 {
    background-position: 0% 0%;
    width: 14px;
    height: 100%;
    float: left;
    /* fallback (Opera) */
    /* Mozilla: */
    /* Chrome, Safari:*/
    background-image: linear-gradient(to right, #fff 0%, #c9c9c9 100%);
    background-color: #c9c9c9;
    background-repeat: repeat;
    background-attachment: scroll;
}

.night .g1 {
    background-image: linear-gradient(to right, #000 0%, #333 100%);
}

#p3events .g1 {
    float: none;
}

#p16events .g1 {
    float: none;
}

#p31events .g1 {
    float: none;
}

#p3users .g1 {
    height: 24px;
    float: left;
}

.g1s {
    background-image: linear-gradient(to right, #fff 0%, #b9b9b9 100%);
}

.night .g1s {
    background-image: linear-gradient(to right, #000 0%, #444 100%);
}

.g2t {
    background-position: 0% 0%;
    width: 14px;
    height: 100%;
    /* fallback (Opera) */
    /* Mozilla: */
    /* Chrome, Safari:*/
    background-image: linear-gradient(to right, #c9c9c9 0%, #fff 100%);
    background-color: #c9c9c9;
    background-repeat: repeat;
    background-attachment: scroll;
}

.night .g2t {
    background-image: linear-gradient(to right, #333 0%, #000 100%);
}

.g2 {
    background-position: 0% 0%;
    width: 14px;
    height: 100%;
    float: right;
    /* fallback (Opera) */
    /* Mozilla: */
    /* Chrome, Safari:*/
    background-image: linear-gradient(to right, #c9c9c9 0%, #fff 100%);
    background-color: #c9c9c9;
    background-repeat: repeat;
    background-attachment: scroll;
}

.night .g2 {
    background-image: linear-gradient(to right, #333 0%, #000 100%);
}

#p3events .g2 {
    float: none;
}

#p16events .g2 {
    float: none;
}

#p31events .g2 {
    float: none;
}

#p3users .g2 {
    height: 24px;
    float: right;
}

.g2s {
    background-image: linear-gradient(to right, #b9b9b9 0%, #fff 100%);
}

.night .g2s {
    background-image: linear-gradient(to right, #444 0%, #000 100%);
}

#agins_linux_area,
#agins_linux_area_un,
#d2notifyMsg,
#d2devNotes,
#d2devEvent,
#d2runcmd,
#d2devMessage,
#d2smsText,
#d2emailSubject,
#d2emailText,
#broadcastMessage {
    background-color: #FFF9D3;
}

.night #agins_linux_area,
.night #agins_linux_area_un,
.night #d2notifyMsg,
.night #d2devNotes,
.night #d2devEvent,
.night #d2runcmd,
.night #d2devMessage,
.night #d2smsText,
.night #d2emailSubject,
.night #d2emailText,
.night #broadcastMessage {
    background-color: black;
}

.h1pre {
    width: 16px;
    height: 100%;
    float: left;
    font-size: large;
    background-color: #FFFFFF;
}

.h1 {
    background-position: 0% 0%;
    width: 14px;
    height: 24px;
    /* fallback (Opera) */
    /* Mozilla: */
    /* Chrome, Safari:*/
    background-image: linear-gradient(to right, #fff 0%, #d3d9d6 100%);
    background-color: #d3d9d6;
    background-repeat: repeat;
    background-attachment: scroll;
}

.night .h1 {
    background-image: linear-gradient(to right, #000 0%, #333 100%);
}

.h2end {
    height: 100%;
    width: 20px;
    float: right;
    background-color: #ffffff;
}

.h2 {
    background-position: 0% 0%;
    width: 14px;
    height: 24px;
    /* fallback (Opera) */
    /* Mozilla: */
    /* Chrome, Safari:*/
    background-image: linear-gradient(to right, #d3d9d6 0%, #fff 100%);
    background-color: #d3d9d6;
    background-repeat: repeat;
    background-attachment: scroll;
}

.night .h2 {
    background-image: linear-gradient(to right, #333 0%, #000 100%);
}

.e1t {
    font-size: large;
    margin-bottom: 3px;
    overflow: hidden;
    word-wrap: hyphenate;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.e1 {
    font-size: large;
    margin-top: 4px;
    margin-bottom: 3px;
    overflow: hidden;
    word-wrap: hyphenate;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.e2 {
    float: left;
    height: 100%;
    background-color: #c9c9c9;
}

.night .e2 {
    color: #CCC;
    background-color: #333;
}

.e2t {
    height: 100%;
    background-color: #c9c9c9;
}

.night .e2t {
    color: #CCC;
    background-color: #333;
}

.e2s {
    background-color: #b9b9b9;
}

.night .e2s {
    background-color: #444;
}

.bar {
    font-size: large;
    background-color: #C9C9C9;
    height: 24px;
    float: left;
    margin-bottom: 2px;
}

.night .bar {
    color: #CCC;
    background-color: #333;
}

.sbar {
    background-color: #b9b9b9;
}

.night .sbar {
    background-color: #444;
}

#p3users .bar {
    width: 100%;
    font-size: medium;
}

.baricon {
    float: left;
    height: 24px;
    width: 24px;
    background-color: white;
}

    .night .baricon {
        background-color: black;
    }

    .baricon div {
        width: 16px;
        margin-top: 4px;
        margin-left: 2px;
        height: 16px;
    }

.bar2 {
    font-size: large;
    height: 24px;
    float: left;
    margin-bottom: 2px;
}

.bar18 {
    font-size: large;
    background-color: #C9C9C9;
    height: 18px;
    float: left;
    margin-bottom: 2px;
    color: black;
}

.night .bar18 {
    background-color: #333;
    color: #CCC;
}

.bar182 {
    font-size: large;
    height: 18px;
    float: left;
    margin-bottom: 2px;
}

.devHeaderx {
    color: lightgray;
}

.DevSt {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #DDDDDD;
}

.night .DevSt {
    color: white;
}

.contextMenu {
    background: #F9F9F9;
    box-shadow: 0 0 12px rgba( 0, 0, 0, .3 );
    border: 1px solid #ccc;
    /*border-radius: 4px;*/
    display: none;
    position: absolute;
    list-style: none;
    margin: 0;
    padding: 5px;
    min-width: 100px;
    max-width: 150px;
    z-index: 500;
}

.cmtext {
    color: #444;
    display: inline-block;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-decoration: none;
    width: 85%;
    cursor: default;
    overflow: hidden;
    position: relative;
}

    .cmtext:hover {
        color: #f9f9f9;
        background: #444;
    }

.gray {
    /*filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale");*/ /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%) opacity(60%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    -moz-opacity: 0.60;
    opacity: .60;
    filter: alpha(opacity=60);
}

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.notifiyBox {
    position: fixed;
    z-index: 1000;
    top: 80px;
    right: 8.3rem;
    width: 300px;
    text-align: left;
    background-color: #F0ECCD;
    border: 4px solid #666;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 2px 2px 4px #888;
    -moz-box-shadow: 2px 2px 4px #888;
    box-shadow: 2px 2px 4px #888;
    max-height: 200px;
}

body:not(.fullscreen) .notifiyBox {
    position: absolute;
    right: calc(50vw - 512px + 10rem);
}

.night .notifiyBox {
    color: black;
}

    .notifiyBox:before {
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        right: 5px;
        top: -30px;
        border: 15px solid;
        border-color: transparent #666 #666 transparent;
    }

    .notifiyBox:after {
        content: ' ';
        position: absolute;
        width: 0;
        height: 0;
        right: 7px;
        top: -24px;
        border: 12px solid;
        border-color: transparent #F0ECCD #F0ECCD transparent;
    }

.notification {
    width: 100%;
    min-height: 30px;
}

    .notification:hover {
        background-color: #EFE8B6;
    }

#notificationBadge {
    box-shadow: -0.1px 1px 2px #000000;
    -webkit-box-shadow: -0.1px 1px 2px #000000;
    -moz-box-shadow: -0.1px 1px 2px #000000;
    top: 0.95rem;
    left: 1.6rem !important;
}
#notificationCount:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
.night #notificationCount {
    color: black;
}

.deskareaicon {
    cursor: pointer;
    border: none;
    float: right;
    font-size: 130%;
    margin-right: 4px;
}

.areaHead {
    padding-left: 4px;
    padding-top: 2px;
    padding-bottom: 2px;
    background: var(--sub-menu-bg);
}

#consoleTable .areaHead {
    border: 1px solid #C0C0C0;
}

.night .areaHead {
    color: #CCC;
    background: #333;
}

.areaProgress {
    background-color: gray;
}

    .areaProgress div {
        height: 2px;
        width: 0%;
        background-color: red;
    }

.areaFoot {
    padding-top: 2px;
    padding-bottom: 2px;
    background: var(--sub-menu-bg);
}

.night .areaFoot {
    color: #CCC;
    background: #333;
}

.toright2 {
    float: right;
    text-align: right;
    padding-right: 4px;
}

#deskarea0 {
    width: 100%;
    padding: 0px;
    margin-top: 0px;
}

.night #deskarea0 {
    color: black;
}

.fulldesk #deskarea0 {
    min-width: 100%;
    min-height: 0px;
    height: 100%;
    position: absolute;
    top: 0px;
    display: -ms-grid;
    display: grid;
    grid-gap: 0px;
    grid-template-areas: "deskarea1" "deskarea2" "deskarea3" "deskarea4";
    /* grid-template-columns: 90px auto; */
    grid-template-rows: max-content max-content auto max-content;
    -ms-grid-columns: 1fr;
    -ms-grid-rows: max-content max-content 1fr max-content;
}

#deskarea0 .mR {
    margin-right: 3px;
}

#deskarea1 {
    grid-area: deskarea1;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
    min-height: 20px;
}


#deskarea2 {
    grid-area: deskarea2;
    background-color: gray;
    -ms-grid-column: 1;
    -ms-grid-row: 2;
}

#progressbar {
    height: 2px;
    width: 0%;
    background-color: red;
}

#deskarea3x {
    background: black;
    text-align: center;
    position: relative;
    overflow: hidden;
    width: 100%;
    max-height: calc(100vh - 270px); /*  + 24px height of submenu */
    height: calc(100vh - 270px);
}

.room4submenu #deskarea3x {
    max-height: calc(100vh - 296px);
    height: calc(100vh - 296px);
}

.fulldesk #deskarea3x {
    grid-area: deskarea3;
    max-height: 100%;
    height: 100%;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
}

#DeskFocus {
    overflow: hidden;
    color: transparent;
    border: 3px dotted rgba(255,0,0,.2);
    position: absolute;
    border-radius: 5px;
}

#DeskParent {
    margin: 0;
    overflow: hidden;
    height: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
}

#Desk {
    overflow: hidden;
    width: 100%;
    -ms-touch-action: none;
    touch-action: none;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
}

.deskToolsTopTab {
    position:absolute;
    background-color:lightgray;
    padding:2px;
    top:2px;
    left:0px;
    width:80px;
    bottom:2px;
    border-top-left-radius:4px;
    border-top-right-radius:4px;
    cursor:pointer;
}

#deskToolsAreaTop {
    position: absolute;
    /*
    padding: 3px;
    border-radius: 3px 3px 0px 0px;
    top: 5px;
    left: 4px;
    bottom: 26px;
    cursor: pointer;
    */
    top: 0px;
    left: 4px;
    right: 4px;
    height: 26px;
    background-color: gray;
}

    .night #deskToolsAreaTop {
        background-color: #222;
    }

#deskToolsArea {
    position: absolute;
    top: 26px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    background-color: lightgray;
    text-align: left;
}

.night #deskToolsArea {
    background-color: #222;
}

#deskToolsHeader {
    border-bottom: 1px solid darkgray;
    padding: 3px;
}

    #deskToolsHeader .colmn1 {
        width: 50px;
        padding-right: 5px;
        float: left;
    }

#deskToolsServiceHeader {
    border-bottom: 1px solid darkgray;
    padding: 3px;
}

    #deskToolsServiceHeader .colmn1 {
        width: 50px;
        padding-right: 5px;
        float: left;
    }

#DeskToolsProcesses {
    overflow-y: scroll;
    position: absolute;
    top: 24px;
    bottom: 0px;
    width: 100%;
    color:black;
}

#DeskToolsServices {
    overflow-y: scroll;
    position: absolute;
    top: 24px;
    bottom: 0px;
    width: 100%;
    color:black;
}

.deskToolsBar {
    padding: 3px;
}

    .deskToolsBar:hover {
        background-color: #EFE8B6;
    }

    .night .deskToolsBar {
        color: #ddd;
    }

    .night .deskToolsBar:hover {
        background-color: #444;
    }

#deskarea4 {
    grid-area: deskarea4;
    -ms-grid-column: 1;
    -ms-grid-row: 4;
}

.serverStateTableCell {
    width: 300px;
    height: 24px;
    background: var(--bs-secondary-bg);
    margin-bottom: 4px;
    vertical-align: middle;
    border-spacing: 0;
    color: var(--bs-secondary-color);
}

.userTableHeader {
    border-bottom: 1pt solid lightgray;
    padding-top: 4px;
    padding-bottom: 4px;
}

#p12BackButton {
    float: left;
}

#termTable {
    width: 100%;
    padding: 0px;
    margin-top: 0px;
}

.fulldesk #termTable {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

#termarea3x {
    background: black;
    text-align: center;
    height: 500px;
    position: relative;
}

#Term {
    background: black;
    margin: 0;
    padding: 0;
}

#p13toolbar {
    width: 100%;
}

    #p13toolbar .areaHead {
        border-bottom: 2px solid black;
    }

    #p13toolbar .areaHead2 {
        width: 100%;
        background: var(--bs-secondary-bg);
        padding: 4px 0px;
    }


    #p13toolbar .areaHead3 {
        background: var(--bs-secondary-bg);
        height: 28px;
    }


#p13filetable {
    width: 100%;
    height: calc(100vh - 323px);
    overflow: auto;
    -webkit-user-select: none;
    user-select: none;
}

.room4submenu #p13filetable {
    height: calc(100vh - 349px);
}

.fulldesk #p14title {
    margin-left: 16px;
    margin-right: 16px;
    color: #CCC;
}

#p14iframe {
    width: 100%;
    height: calc(100vh - 218px);
    border: 0;
    overflow: hidden;
}

.menu_stack #p14iframe {
    height: calc(100vh - 246px);
}

.fulldesk #p14iframe {
    height: calc(100vh - 65px);
}

#p13toolbarBottom, #p13toolbar {
    width: 100%;
}

#consoleTable {
    width: 100%;
    padding: 0px;
    padding: 0px;
    margin-top: 0px;
}

.night #consoleTable {
    color: black;
}

#p15agentConsole {
    background: black;
    margin: 0;
    padding: 0;
    color: lightgray;
    width: 100%;
    height: calc(100vh - 276px);
    max-height: calc(100vh - 276px);
    position: relative;
}

.menu_stack.fullscreen #p15agentConsole {
    height: calc(100vh - 305px);
    max-height: calc(100vh - 305px);
}

#p15agentConsoleText {
    margin: 0;
    padding: 0;
    top: 0;
    bottom: 0;
    overflow-y: scroll;
    overflow-x: auto;
    height: calc(100vh - 279px);
    max-height: calc(100vh - 279px);
    width: 930px;
}

.menu_stack.fullscreen #p15agentConsoleText {
    width: calc(100vw - 30px);
    height: calc(100vh - 305px);
    max-height: calc(100vh - 305px);
}

.fullscreen #p15agentConsoleText {
    width: calc(100vw - 120px);
}

/*
#p16events, #p31events {
    max-height: calc(100vh - 245px);
    overflow-y: auto;
}

.room4submenu #p16events, #p31events {
    max-height: calc(100vh - 269px);
}
*/

.night #p16events, #p31events {
    color: #222;
}

#p40 {
    height: calc(100vh - 191px);
}

.viewSelector {
    width: 32px;
    height: 32px;
    background-color: #DDD;
    border-radius: 3px;
    float: left;
    margin-left: 5px;
    cursor: pointer;
    opacity: 0.3;
}

.viewSelectorSel {
    background-color: #BBB;
    opacity: 0.8;
    color: black;
}

.viewSelector:hover {
    opacity: 0.5;
    background-color: #AAA;
    color: black;
}


.viewSelector1 {
    margin-left: 2px;
    margin-top: 2px;
    background: url(../images/views.png) -0px 0px;
    height: 28px;
    width: 28px;
}

.viewSelector2 {
    margin-left: 2px;
    margin-top: 2px;
    background: url(../images/views.png) -28px 0px;
    height: 28px;
    width: 28px;
}

.viewSelector3, .uiSelector7 {
    margin-left: 2px;
    margin-top: 2px;
    background: url(../images/views.png) -56px 0px;
    height: 28px;
    width: 28px;
}

.viewSelector4 {
    margin-left: 2px;
    margin-top: 2px;
    background: url(../images/views.png) -84px 0px;
    height: 28px;
    width: 28px;
}

.viewSelector5 {
    margin-left: 2px;
    margin-top: 2px;
    background: url(../images/views.png) -112px 0px;
    height: 28px;
    width: 28px;
}

.viewSelector6 {
    margin-left: 2px;
    margin-top: 2px;
    background: url(../images/views.png) -336px 0px;
    height: 28px;
    width: 28px;
}

.viewSelector7 {
    margin-left: 2px;
    margin-top: 2px;
    background: url(../images/views.png) -364px 0px;
    height: 28px;
    width: 28px;
}

.viewSelector8 {
    margin-left: 2px;
    margin-top: 2px;
    background: url(../images/views.png) -420px 0px;
    height: 28px;
    width: 28px;
}

.viewSelector9 {
    margin-left: 2px;
    margin-top: 2px;
    background: url(../images/views.png) -448px 0px;
    height: 28px;
    width: 28px;
}

.viewSelector10 {
    margin-left: 2px;
    margin-top: 2px;
    background: url(../images/views.png) -476px 0px;
    height: 28px;
    width: 28px;
}

.viewSelector11 {
    margin-left: 2px;
    margin-top: 2px;
    background: url(../images/views.png) -504px 0px;
    height: 28px;
    width: 28px;
}

    .fulldesk .viewSelector5 {
        background: url(../images/views.png) -252px 0px;
    }

.backButtonEx {
    margin-left: 2px;
    margin-top: 2px;
    background: url(../images/views.png) -140px 0px;
    height: 28px;
    width: 28px;
}

.uiSelector {
    width: 32px;
    height: 32px;
    background-color: #BBB;
    border-radius: 3px;
    float: left;
    margin: 3px;
    cursor: pointer;
    opacity: 0.3;
}

    .uiSelector:hover {
        opacity: 0.5;
        background-color: #AAA;
    }

.uiSelector_end {
    width: 32px;
    height: 32px;
    float: left;
    margin: 3px;
}

.uiSelectorSel {
    background-color: #BBB;
    opacity: 0.8;
}

.uiSelector1 {
    margin: 2px;
    background: url(../images/views.png) -168px 0px;
    height: 28px;
    width: 28px;
}

.uiSelector2 {
    margin: 2px;
    background: url(../images/views.png) -196px 0px;
    height: 28px;
    width: 28px;
}

.uiSelector3 {
    margin: 2px;
    background: url(../images/views.png) -224px 0px;
    height: 28px;
    width: 28px;
}

.uiSelector4 {
    margin: 2px;
    background: url(../images/views.png) -280px 0px;
    height: 28px;
    width: 28px;
}

.uiSelector5 {
    margin: 2px;
    background: url(../images/views.png) -308px 0px;
    height: 28px;
    width: 28px;
}

.uiSelector6 {
    margin: 2px;
    background: url(../images/views.png) -392px 0px;
    height: 28px;
    width: 28px;
}

.backButton {
    width: 32px;
    height: 32px;
    background-color: #DDD;
    border-radius: 3px;
    float: left;
    margin-right: 5px;
    cursor: pointer;
    opacity: 0.3;
}

    .backButton:hover {
        opacity: 0.5;
        background-color: #AAA;
    }

.hoverButton {
    opacity: 0.5;
    width: 10px;
    height: 10px;
}

    .hoverButton:hover {
        opacity: 1;
    }

.tagSpan {
    background-color: lightgray;
    padding: 3px;
    border-radius: 5px;
}

    .night .tagSpan {
        color: black;
    }

.suggestionBox {
    position:absolute;
    background-color: #6CC;
    border-radius:4px;
    padding:6px;
    box-shadow: 0px 0px 15px #666;
}

.suggestionBoxItem {
    background-color:#5BB;
    padding: 4px;
    cursor: pointer;
    margin-top: 2px;
    margin-bottom: 2px;
    border-radius: 4px;
}

    .suggestionBoxItem:hover {
        background-color:#4AA;
    }

.suggestionBoxSubItem {
    font-size: 11px;
    margin-left: 4px;
    color: #555;
}

.traceEvent {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 3px 3px 3px 0;
    padding: 3px;
    border-radius: 3px;
    background-color: #DDD;
    cursor: pointer;
}

    .traceEvent:hover {
        background-color:#BBB;
    }

.night .traceEvent {
    background-color: #222;
}

.p42tblRow {
    height: 36px;
    max-height: 40px;
}

#p42tbl {
    width: 100%;
    border-collapse: separate;
    border-spacing:0 5px;
}

#p42tbl th, #p7tbl td {
    text-align: left;
    padding: 4px;
}

#p42tbl .chName {
    width: 20%;
}

#p42tbl .chDescription {
    width: 38%;
}

#p42tbl .chSite {
    width: 7%;
}

#p42tbl .chVersion {
    width: 5%;
}

#p42tbl .chUpgradeAvail {
    width: 10%;
}

#p42tbl .chStatus {
    width: 10%;
}

#p42tbl .chAction {
    width: 10%;
}

.pActDisable, .pActDelete, .pActInstall, .pActUpgrade {
    cursor: pointer;
}

#addPlugin {
    background-image: url(../images/plus32.png);
    width: 32px;
    height: 32px;
    float: right;
    cursor: pointer;
    margin-right: 12px;
}

#pluginRestartNotice {
    /*
    width: 40em;
    font-weight: bold;
    border: 1px solid red;
    text-align: center;
    padding: 14px;
    margin: 50px auto;
        */
}

.pluginContent {
    width: 100%;
    height: 100%;
}

#p19headers {
    padding-right: 7px;
    padding-bottom: 10px;
    font-weight: bold;
    border-bottom: 1px dotted blue;
}

#p19headers > span:nth-child(n+2) {
    border-left: 1px solid black;
}

#p19headers > span {
    padding-left: 4px;
    padding-right: 4px;
    cursor: pointer;
    font-weight: lighter;
}
#p19headers > span.on {
    font-weight: bold;
}

.thermalSensor {
    float: left;
    padding: 5px;
    background-color: gold;
    margin-right: 6px;
    border-radius: 4px;
    margin-bottom: 5px;
}

.night .thermalSensor {
    color: #000;
}

/* .desktopButtons {
    padding-top: 2px;
}

    .night .desktopButtons {
        filter: invert(60%);
        -webkit-filter: invert(60%);
    } */


.dtab {
    overflow: hidden;
    border-bottom: 1px solid #ccc;
}

.dtab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 4px 6px;
    transition: 0.3s;
}

.dtab button:hover {
    background-color: #ddd;
}

.dtab button.active {
    background-color: #ccc;
}

.dtabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

#notesPanel table {
        color: black;
        background-color: #EEE;
        border-color: #AAA;
        border-width: 1px;
        border-style: solid;
        border-collapse: collapse;
        width: 100%;
}

#notesPanel thead {
    background-color: #AAA;
    font-weight: bold;
}

#notesPanel thead tr {
    background-color: #AAA;
    font-weight: bold;
}

.sidebar .nav-link {
    font-size: xx-large;

}

.nav-link {
    width: unset !important;
}

.nav {
    --bs-nav-link-padding-x: 19px !important;
}

.card:hover, #p2AccountImage:hover, #p2canvas:hover {
    background: #f3f5f7 !important;
}

.form-control, .form-control-sm, .form-select, .form-select-sm {
    border: 1px solid #adb5bd !important;
}

.card {
    background: #f8f9fa !important;
}

.night .card {
    background-color: black !important;
}

.night .modal-content .backgroundContainer {
    color: #000;
}

.btn-close {
    background-color: white !important;
    opacity: 1 !important;
}

.navbar-toggler {
    border: none;
}

/* Shared styles for all custom icons */
.custom-icon svg {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 1em !important;
    height: 1em !important;
    display: inline-block !important;
}

.custom-icon svg path {
    display: none !important;
}

body.is-mobile #page_leftbar { display: none !important; }

/* Device list: separator between items */
/* List view (xxdevice2) rows — add padding and a subtle divider line */
body.is-mobile #xdevices tr[name="xxdevice2"] > td:first-child {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}
/* Group-header divs that are direct children of xdevices */
body.is-mobile #xdevices > div { margin-top: 10px !important; }

/* p5toolbarBottom: same transparent fix as p13toolbarBottom */
#p5toolbarBottom .style6 { background: transparent !important; }

/* All nav title bars (no back button): same style as device sub-panels
   but with left padding instead of the blue back button.
   Covers: My Devices(1) | My Events(3) | My Users(4) | My Files(5) |
           My Server(6) | Stats(40) | Trace(41) | Plugins(42) |
           User Groups(50) | Recordings(52) | My Reports(60) */
body.is-mobile #p1title,
body.is-mobile #p3title,  body.is-mobile #p4title,
body.is-mobile #p5title,  body.is-mobile #p6title,
body.is-mobile #p40title, body.is-mobile #p41title,
body.is-mobile #p42title, body.is-mobile #p50title,
body.is-mobile #p52title, body.is-mobile #p60title {
    padding: 0 12px 0 15px !important;
    background: #fff;
    min-height: 50px;
    position: relative !important;
    z-index: 1 !important;
    box-shadow: 0 1px 0 0 rgba(0,0,0,0.15);
    align-items: center !important;
    display: flex !important;
}
body.night.is-mobile #p1title,
body.night.is-mobile #p3title,  body.night.is-mobile #p4title,
body.night.is-mobile #p5title,  body.night.is-mobile #p6title,
body.night.is-mobile #p40title, body.night.is-mobile #p41title,
body.night.is-mobile #p42title, body.night.is-mobile #p50title,
body.night.is-mobile #p52title, body.night.is-mobile #p60title {
    box-shadow: 0 1px 0 0 #444 !important;
}

/* My Server: server icon small, right-aligned */
body.is-mobile #MainMeshImage {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
}

/* "More" dropdowns: mobileActionDropdown (My Users/Files) +
   mobileFileActionDropdown (Device Files tab) — shared styling 
   Pill shape, item dividers, proper light/dark colours. */
.mobileActionDropdown .dropdown-menu,
.mobileFileActionDropdown .dropdown-menu {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.28) !important;
    padding: 0 !important;
    min-width: 200px !important;
}
.mobileActionDropdown .dropdown-item,
.mobileFileActionDropdown .dropdown-item {
    padding: 10px 16px !important;
    font-size: 15px !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}
.mobileActionDropdown .dropdown-item:last-child,
.mobileFileActionDropdown .dropdown-item:last-child { border-bottom: none !important; }
/* Dark mode */
.night .mobileActionDropdown .dropdown-menu,
.night .mobileFileActionDropdown .dropdown-menu {
    background: #1c1c1e !important;
    border-color: #3a3a3c !important;
}
.night .mobileActionDropdown .dropdown-item,
.night .mobileFileActionDropdown .dropdown-item {
    color: #e5e5e7 !important;
    border-bottom-color: rgba(255,255,255,0.1) !important;
    background: transparent !important;
}
.night .mobileActionDropdown .dropdown-item:hover,
.night .mobileActionDropdown .dropdown-item:focus,
.night .mobileFileActionDropdown .dropdown-item:hover,
.night .mobileFileActionDropdown .dropdown-item:focus {
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important;
}

/* Title bar text: consistent 1rem across ALL panel titles
   One rule covers both device sub-panels (p10–p19) and main-nav panels
   (p3–p6) so font size, colour and line-height are identical everywhere. */
body.is-mobile #p3title .fs-4,  body.is-mobile #p4title .fs-4,
body.is-mobile #p5title .fs-4,  body.is-mobile #p6title .fs-4,
body.is-mobile #p10title .fs-4, body.is-mobile #p11title .fs-4,
body.is-mobile #p12title .fs-4, body.is-mobile #p13title .fs-4,
body.is-mobile #p14title .fs-4, body.is-mobile #p15title .fs-4,
body.is-mobile #p16title .fs-4, body.is-mobile #p17title .fs-4,
body.is-mobile #p19title .fs-4 {
    font-size: 1rem !important;
    color: #212529 !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
}

/* All main-nav panels: flex-column so content fills height
   Covers My Events(3), My Users(4), My Files(5), My Server(6),
   Server Stats(40)/Trace(41)/Plugins(42),
   User Groups(50)/Recordings(52), My Reports(60) */
body.is-mobile #p1,
body.is-mobile #p3,  body.is-mobile #p4,
body.is-mobile #p5,  body.is-mobile #p6,
body.is-mobile #p20, body.is-mobile #p21,
body.is-mobile #p30, body.is-mobile #p31,
body.is-mobile #p40, body.is-mobile #p41,
body.is-mobile #p42, body.is-mobile #p50,
body.is-mobile #p51, body.is-mobile #p52,
body.is-mobile #p60 {
    display: flex;
    flex-direction: column;
    height: 100% !important;
    overflow: hidden !important;
}
body.is-mobile #p1title,  body.is-mobile #p3title,
body.is-mobile #p4title,  body.is-mobile #p5title,
body.is-mobile #p40title, body.is-mobile #p41title,
body.is-mobile #p42title, body.is-mobile #p50title,
body.is-mobile #p52title, body.is-mobile #p60title { flex-shrink: 0 !important; }
/* Events list fills remaining space */
body.is-mobile #p3events {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    height: auto !important;
    max-height: none !important;
}
/* Users list fills remaining space */
body.is-mobile #p3users {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    height: auto !important;
    max-height: none !important;
}
/* Files table fills remaining space */
body.is-mobile #p5filetable {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
}
/* My Server: p6info fills remaining space. Also handles xdevices for p1. */
body.is-mobile #p6info,
body.is-mobile #xdevices {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    height: auto !important;
    max-height: none !important;
}
/* Content areas that fill remaining flex height */
body.is-mobile #p50groups,
body.is-mobile #p52recordings,
body.is-mobile #p41events,
body.is-mobile #p20main,
body.is-mobile #p21main,
body.is-mobile #p30info,
body.is-mobile #p31events,
body.is-mobile #p51info {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    height: auto !important;
    max-height: none !important;
}
body.is-mobile #serverMainStats {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
}

/* User profile image: <picture> wraps a <img width="200" height="200">.
   Must target the inner img since the HTML attribute beats CSS on the picture. */
body.is-mobile #MainUserImage img,
body.is-mobile #MainUserImageEx {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50%;
    object-fit: cover;
}
/* Group/mesh image in p20 (group detail): same issue — target inner img */
body.is-mobile #p20main #MainMeshImage img,
body.is-mobile #p20main #MainMeshImage {
    width: 40px !important;
    height: 40px !important;
    border-radius: 6px;
    object-fit: contain;
}

/* Title text consistency: also cover the user/group detail panels */
body.is-mobile #p40title .fs-4, body.is-mobile #p41title .fs-4,
body.is-mobile #p42title .fs-4, body.is-mobile #p50title .fs-4,
body.is-mobile #p51title .fs-4, body.is-mobile #p52title .fs-4,
body.is-mobile #p60title .fs-4, body.is-mobile #p30title .fs-4,
body.is-mobile #p31title .fs-4 {
    font-size: 1rem !important;
    color: #212529 !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
}

body.is-mobile #MainSubMenuSpan,
body.is-mobile #MeshSubMenuSpan,
body.is-mobile #EventsSubMenuSpan,
body.is-mobile #UserSubMenuSpan,
body.is-mobile #UsersSubMenuSpan,
body.is-mobile #ServerSubMenuSpan {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    height: clamp(44px, 13vw, 54px) !important;
    z-index: 500 !important;
    overflow: hidden !important;
    background: #113962 !important;
    border-top: 1px solid #000 !important;
    display: flex;
    align-items: stretch;
}

body.is-mobile #MainSubMenu,
body.is-mobile #MeshSubMenu,
body.is-mobile #EventsSubMenu,
body.is-mobile #UserSubMenu,
body.is-mobile #UsersSubMenu,
body.is-mobile #ServerSubMenu {
    /* Become a flex item that fills the span, and a flex container for the tr row */
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: clamp(44px, 13vw, 54px) !important;
    background: transparent !important;
}

/* tbody is an auto-inserted anonymous box — make it layout-transparent */
body.is-mobile #MainSubMenu tbody,
body.is-mobile #MeshSubMenu tbody,
body.is-mobile #EventsSubMenu tbody,
body.is-mobile #UserSubMenu tbody,
body.is-mobile #UsersSubMenu tbody,
body.is-mobile #ServerSubMenu tbody { display: contents !important; }

/* tr becomes the flex item filling the table, and a flex container for the tds */
body.is-mobile #MainSubMenu tr,
body.is-mobile #MeshSubMenu tr,
body.is-mobile #EventsSubMenu tr,
body.is-mobile #UserSubMenu tr,
body.is-mobile #UsersSubMenu tr,
body.is-mobile #ServerSubMenu tr {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    align-items: stretch !important;
}

body.is-mobile .topbar_td {
    /* display:flex WITHOUT !important — makes the td a flex container so
       align-items/justify-content center text, while still letting
       QV()'s inline display:none override it for permission-hidden tabs. */
    display: flex;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    align-items: center !important;
    justify-content: center !important;
    /* Adaptive height and font: scales with viewport width.
       clamp(min, preferred, max) — preferred grows with screen size via vw units. */
    height: clamp(44px, 13vw, 54px) !important;
    padding: 0 clamp(4px, 1.5vw, 10px) !important;
    color: rgba(255,255,255,0.75) !important;
    font-size: clamp(12px, 3.5vw, 15px) !important;
    border-right: 1px solid rgba(255,255,255,0.15);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Trailing spacer td — hide it on mobile so it doesn't eat space from the right */
body.is-mobile .topbar_td_end {
    display: none !important;
}

body.is-mobile .topbar_td.style3x {
    color: rgba(255,255,255,0.7) !important;
    background: transparent !important;
}

body.is-mobile .topbar_td.style3x:hover,
body.is-mobile .topbar_td.style3x:active {
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
}

body.is-mobile .topbar_td.style3sel {
    color: #fff !important;
    background: rgba(255,255,255,0.18) !important;
    border-bottom: 3px solid #fff !important;
}

/* Classic Mobile tab shuffle: the active device sub-tab is hidden from the bottom bar.
   Hiding it frees up space so all other tabs remain visible without horizontal scroll.
   Using display:none !important to beat QV()'s inline style. */
/* mob-active-tab: replaced by scrollable submenu, no longer needed */
/* body.is-mobile .mob-active-tab { display: none !important; } */

/* Collapse #topbar to 0 height on mobile */
body.is-mobile #topbar {
    height: 0 !important;
    overflow: visible !important;
    min-height: 0 !important;
    padding: 0 !important;
}

/* Hide the main navigation row — accessible via the hamburger menu on mobile */
body.is-mobile #MainMenuSpan { display: none !important; }

/* Footer sits at bottom:0 z-index:1000 and covers the bottom tab bar */
body.is-mobile #footer { display: none !important; }

/* Container: full width, no side borders/margins. */
body.is-mobile #container {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-left: none !important;
    border-right: none !important;
    padding-left: 0 !important;
    grid-template-columns: 0 1fr !important;
    grid-template-rows: 66px 0 auto 0 !important;
}

/* Content area: pad bottom so the fixed 44px tab bar doesn't overlap content */
/* column_l: zero horizontal padding so structural bars (toolbars, title bars,
   canvas, terminal) stretch edge-to-edge like a native app. Bottom padding
   reserves space for the fixed 44px tab bar. */
body.is-mobile #column_l {
    /* Match padding-bottom to the tab bar height so nothing is hidden behind it */
    padding: 0 0 clamp(44px, 13vw, 54px) 0 !important;
}

/* Content areas: 10px breathing room so text/cards/tables don't press against
   screen edges. Structural bars, canvas, terminal stay full-width (not listed). */
body.is-mobile #p10info,
body.is-mobile #p2info,
body.is-mobile #p6info,
body.is-mobile #p20main,
body.is-mobile #p21main,
body.is-mobile #p30info,
body.is-mobile #p31events,
body.is-mobile #p51info,
body.is-mobile #xdevices,
body.is-mobile #xdevicesmap,
body.is-mobile #p3events,
body.is-mobile #p3users,
body.is-mobile #p50groups,
body.is-mobile #serverMainStats,
body.is-mobile #p5filetable,
body.is-mobile #p13filetable,
body.is-mobile #p16events,
body.is-mobile #p17info,
body.is-mobile #p15agentConsole,
body.is-mobile #p15agentConsoleText {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Details tab: section header icons are 64px — too large on a phone.
   The JS renders each section as <img src=details/xxx64.png width=64> in a
   <td style=width:64px> table cell. Shrink to 32px on mobile. */
body.is-mobile #p17info img[src*="details/"] {
    width: 32px !important;
    height: 32px !important;
}
body.is-mobile #p17info td[style*="width:64px"] {
    width: 36px !important;
}

/* Panel title bar: full-width, masthead-integrated
   #column_l has padding: 0 15px which makes everything 30px narrower than the
   screen. Negative margins break the title bars out to true full width.
   Back button: flush to left screen edge, masthead blue (#036), rounded on
   the right only — visually "attached" to the masthead above. */

body.is-mobile #p10title,
body.is-mobile #p11title,
body.is-mobile #p12title,
body.is-mobile #p13title,
body.is-mobile #p14title,
body.is-mobile #p15title,
body.is-mobile #p16title,
body.is-mobile #p17title,
body.is-mobile #p18title,
body.is-mobile #p19title,
body.is-mobile #p20title,
body.is-mobile #p21title,
body.is-mobile #p30title,
body.is-mobile #p31title,
body.is-mobile #p51title {
    padding: 0 12px 0 0 !important;
    background: #fff;
    min-height: 50px;
    position: relative !important;
    z-index: 1 !important;
    box-shadow: 0 1px 0 0 rgba(0,0,0,0.15);
    align-items: stretch !important;
    gap: 0;
}

/* p20title is nested inside p20main which has padding-left/right: 10px.
   Negative margins cancel that padding so the title bar spans full width. */
/* p20title and p6title live inside their scrollable parent (p20main / p6info)
   which has padding: 0 10px. Negative margins cancel that so they span full width. */
body.is-mobile #p20title,
body.is-mobile #p6title {
    margin-left: -10px !important;
    margin-right: -10px !important;
}

/* Server console (p15) without the back button: add left indent to match
   other title bars that DO have the back button providing the indent.
   The JS adds class 'no-back-btn' to p15title when view is 115. */
body.is-mobile #p15title.no-back-btn {
    padding-left: 15px !important;
}

/* Option bars (areaHead) below the title bar: slightly tinted so they're
   visually distinct from the pure-white title bar. Overrides --sub-menu-bg
   (the white gradient) for a consistent look on all device panels. */
body.is-mobile { --sub-menu-bg: #f0f2f5; }

/* Night mode: keep the white title bar (it reads well as a card against the
   dark column_l background). Only adjust the separator line colour. */
body.night.is-mobile #p10title, body.night.is-mobile #p11title,
body.night.is-mobile #p12title, body.night.is-mobile #p13title,
body.night.is-mobile #p14title, body.night.is-mobile #p15title,
body.night.is-mobile #p16title, body.night.is-mobile #p17title,
body.night.is-mobile #p18title, body.night.is-mobile #p19title,
body.night.is-mobile #p20title, body.night.is-mobile #p21title,
body.night.is-mobile #p30title, body.night.is-mobile #p31title,
body.night.is-mobile #p51title {
    box-shadow: 0 1px 0 0 #444 !important;
}

/* Back button: flush to screen left edge, masthead colour, pill-shaped right side */
/* Back buttons: NO display:flex !important — QV() hides them with
   element.style.display='none' (inline style). CSS !important would
   override that, keeping the button visible even when it should hide
   (e.g. server console reuses p15 but shouldn't show p15BackButton). */
body.is-mobile #p10BackButton,
body.is-mobile #p11BackButton,
body.is-mobile #p12BackButton,
body.is-mobile #p13BackButton,
body.is-mobile #p14BackButton,
body.is-mobile #p15BackButton,
body.is-mobile #p16BackButton,
body.is-mobile #p17BackButton,
body.is-mobile #p18BackButton,
body.is-mobile #p19BackButton,
body.is-mobile #p20BackButton,
body.is-mobile #p21BackButton,
body.is-mobile #p30BackButton,
body.is-mobile #p31BackButton,
body.is-mobile #p51BackButton {
    background: #036;
    border-radius: 0 0 12px 0;
    padding: 0 14px !important;
    margin: 0 12px 0 0;
    display: flex;     /* no !important — allows QV() to override with display:none */
    align-items: center;
    align-self: stretch;
    flex-shrink: 0;
}

body.is-mobile #p10BackButton .fa-square-caret-left,
body.is-mobile #p11BackButton .fa-square-caret-left,
body.is-mobile #p12BackButton .fa-square-caret-left,
body.is-mobile #p13BackButton .fa-square-caret-left,
body.is-mobile #p14BackButton .fa-square-caret-left,
body.is-mobile #p15BackButton .fa-square-caret-left,
body.is-mobile #p16BackButton .fa-square-caret-left,
body.is-mobile #p17BackButton .fa-square-caret-left,
body.is-mobile #p18BackButton .fa-square-caret-left,
body.is-mobile #p19BackButton .fa-square-caret-left,
body.is-mobile #p20BackButton .fa-square-caret-left,
body.is-mobile #p21BackButton .fa-square-caret-left,
body.is-mobile #p30BackButton .fa-square-caret-left,
body.is-mobile #p31BackButton .fa-square-caret-left,
body.is-mobile #p51BackButton .fa-square-caret-left {
    color: #fff !important;
    font-size: 1.2rem !important;
}

/* Title text: 1rem, dark, vertically centred, truncates with … when too long.
   flex:1 + min-width:0 allows the text to shrink in the flex row. */
body.is-mobile #p10title .fs-4,
body.is-mobile #p11title .fs-4,
body.is-mobile #p12title .fs-4,
body.is-mobile #p13title .fs-4,
body.is-mobile #p14title .fs-4,
body.is-mobile #p15title .fs-4,
body.is-mobile #p16title .fs-4,
body.is-mobile #p17title .fs-4,
body.is-mobile #p18title .fs-4,
body.is-mobile #p19title .fs-4,
body.is-mobile #p20title .fs-4,
body.is-mobile #p21title .fs-4,
body.is-mobile #p30title .fs-4,
body.is-mobile #p31title .fs-4,
body.is-mobile #p51title .fs-4 {
    font-size: 1rem !important;
    color: #212529 !important;
    line-height: 1.25;
    display: flex;
    align-items: center;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

/* Right-side icon containers in title bars: always a single horizontal row, never shrink. */
body.is-mobile #devListToolbarViewIcons,
body.is-mobile #devListToolbarViewIcons2,
body.is-mobile #devListToolbarViewIcons3 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* Hide group/mesh name: JS appends <span class="deviceGroupName"> - GroupName </span> */
body.is-mobile .deviceGroupName { display: none !important; }

/* adjustPanels() computes panel heights from 100vh without knowing about the
   44px fixed tab bar on mobile. Override each panel to add 44px to the offset
   so content stops above the tab bar. !important beats the JS inline style. */
body.is-mobile #xdevices,
body.is-mobile #xdevicesmap     { max-height: calc(100vh - 90px)  !important; }
/* adjustPanels() sizes panels using calc(100vh - N). These overrides keep the
   same N but use 100dvh so the browser URL bar is accounted for. */
body.is-mobile #xdevices,
body.is-mobile #xdevicesmap     { max-height: calc(100dvh - 241px) !important; }
body.is-mobile #p2info          { height:     calc(100dvh - 215px) !important;
                                  max-height: calc(100dvh - 215px) !important; }
body.is-mobile #p3events        { height:     calc(100dvh - 245px) !important; }
body.is-mobile #p3users,
body.is-mobile #p50groups       { max-height: calc(100dvh - 245px) !important; }
body.is-mobile #serverMainStats { height:     calc(100dvh - 245px) !important;
                                  max-height: calc(100dvh - 245px) !important; }
body.is-mobile #p5filetable     { height:     calc(100dvh - 294px) !important; }

/* All device panels: flex column that fills column_l's content height.
   IMPORTANT: display and flex-direction must NOT have !important here.
   QV() hides panels with element.style.display='none' (inline style).
   CSS !important beats inline styles, so display:flex !important would
   make panels impossible to hide and break tab navigation. Without
   !important, inline style.display='none' correctly overrides the CSS. */
body.is-mobile #p10,
body.is-mobile #p11,
body.is-mobile #p12,
body.is-mobile #p13,
body.is-mobile #p15,
body.is-mobile #p16,
body.is-mobile #p17 {
    display: flex;
    flex-direction: column;
    height: 100% !important;
    overflow: hidden !important;
}

/* Title bars: never collapse */
body.is-mobile #p10title, body.is-mobile #p11title, body.is-mobile #p12title,
body.is-mobile #p13title, body.is-mobile #p15title,
body.is-mobile #p16title, body.is-mobile #p17title { flex-shrink: 0 !important; }

/* p10 General: p10info fills remaining space and scrolls internally */
body.is-mobile #p10info {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    height: auto !important;
    max-height: none !important;
}

/* p11 Desktop: same flex-column pattern as Console.
   deskarea0 fills p11's remaining height as a flex column:
     deskarea1 (connect bar)  -> flex-shrink:0, natural height
     deskarea3x (canvas)      -> flex:1, fills all remaining space
     deskarea4 (controls bar) -> flex-shrink:0, always visible at bottom
   No !important on display/flex-direction so QV() can still hide deskarea0
   if ever needed, but !important is fine for the structural properties. */
body.is-mobile #deskarea0 {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}
body.is-mobile #deskarea1 { flex-shrink: 0 !important; }
body.is-mobile #deskarea4 { flex-shrink: 0 !important; }
body.is-mobile #deskarea3x,
body.is-mobile .room4submenu #deskarea3x {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
}

/* p12 Terminal: termTable (div) fills remaining space; inner <table> is
   absolutely positioned to span 100% so CSS table sizing distributes rows:
   areaHead row -> min-height; termarea3x row -> fills remainder; areaFoot -> min-height */
body.is-mobile #termTable {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}
body.is-mobile #termTable > table {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    width: 100% !important;
}
body.is-mobile #termarea3x {
    height: 100% !important;
    max-height: none !important;
    overflow: hidden !important;
}
body.is-mobile #termarea3xdiv { height: 100% !important; }

/* p15 Console: override CSS table display to flex-column so row heights
   distribute correctly. display:flex on <table>/<tbody> is well-supported
   and gives us proper flex semantics (no table-height-distribution quirks).
   Row order: areaHead(shrink) | areaProgress(shrink) | output(flex:1) | input(shrink) */
body.is-mobile #consoleTable {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
}
body.is-mobile #consoleTable > tbody {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
}
/* All rows: block, don't grow (single-td rows so display:block is fine) */
body.is-mobile #consoleTable > tbody > tr {
    display: block !important;
    flex-shrink: 0 !important;
    width: 100% !important;
}
/* td cells: when tr is display:block, td loses automatic table-cell width.
   Make all td elements full-width block elements. */
body.is-mobile #consoleTable > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
/* Output row (3rd): fills all remaining space */
body.is-mobile #consoleTable > tbody > tr:nth-child(3) {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    display: flex !important;
}
/* p15agentConsole td: fills the flex output row, scrolls its content */
body.is-mobile #p15agentConsole {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    display: block !important;
}
body.is-mobile #p15agentConsoleText {
    height: auto !important;
    max-height: none !important;
    /* Base CSS hardcodes width:930px - overrides to full viewport width */
    width: 100% !important;
    max-width: 100% !important;
    /* pre defaults to white-space:pre which never wraps, causing horizontal scroll.
       pre-wrap preserves spacing/newlines but wraps at the container edge. */
    white-space: pre-wrap !important;
    word-break: break-all !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* p16 Events: events list fills remaining space after title + filter bar */
body.is-mobile #p16events {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    height: auto !important;
    max-height: none !important;
}

/* p17 Details: details content fills remaining space */
body.is-mobile #p17info {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    height: auto !important;
    max-height: none !important;
}

/* Prevent window-level scroll on mobile. */
html.is-mobile,
body.is-mobile {
    overflow: hidden !important;
    overscroll-behavior: none;
}

/* Center the remote desktop canvas inside its container on mobile. */
body.is-mobile #DeskParent {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
body.is-mobile #Desk {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
}

/* Canvas area: 66px masthead + ~35px deskarea1 + ~35px deskarea4 + 44px tab-bar padding = 180px.
   This makes total document height exactly 100vh with no page scroll needed. */
body.is-mobile #deskarea3x {
    max-height: calc(100vh - 180px) !important;
    height: calc(100vh - 180px) !important;
}

body.is-mobile .room4submenu #deskarea3x {
    max-height: calc(100vh - 180px) !important;
    height: calc(100vh - 180px) !important;
}

body.is-mobile.fulldesk #deskarea3x {
    max-height: 100% !important;
    height: 100% !important;
}

/* Fullscreen mode: hide both toolbars so the canvas fills the entire viewport.
   All controls move into the floating button panel. */
body.is-mobile.fulldesk #p11title,
body.is-mobile.fulldesk #deskarea1,
body.is-mobile.fulldesk #deskarea4 { display: none !important; }

/* Floating button: hidden normally, only shown in fullscreen on mobile */
body.is-mobile.fulldesk #deskFsBtn { display: flex !important; }

/* Sticky modifier key chips inside the More panel */
.desk-mod-key {
    border-radius: 6px;
    background: var(--bs-secondary-bg, #e9ecef);
    color: var(--bs-body-color, #212529);
    border: 1px solid var(--bs-border-color, #ced4da);
    font-size: 11px;
    font-weight: bold;
    padding: 5px 8px;
    min-width: 46px;
    cursor: pointer;
    line-height: 1;
    text-align: center;
}
.desk-mod-key.armed {
    background: rgba(234,179,8,0.85);
    border-color: #ca8a04;
    color: #000;
}

/* Top desktop toolbar: compact single row, horizontal scroll for overflow */
/* deskarea1 (connect/disconnect bar): compact single row */
body.is-mobile #deskarea1 {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Hide secondary/non-mobile-friendly items from the top desktop toolbar.
   .deskareaicon (rotate L/R, view mode toggle) are kept — useful on mobile.
   #idx_deskFullBtn2 (exit fullscreen ✖) shown only when actually in fullscreen,
   vertically centred (float:right conflicts with flex parent). */
body.is-mobile #autoconnectbutton1,
body.is-mobile #connectbutton1rspan,
body.is-mobile #connectbutton1hspan,
body.is-mobile #desktopCustomUiButtons,
body.is-mobile #desktopCustomUpperRight,
body.is-mobile #deskFocusBtn { display: none !important; }

body.is-mobile #idx_deskFullBtn2 { display: none !important; }
body.is-mobile.fulldesk #idx_deskFullBtn2 {
    display: flex !important;
    align-items: center !important;
    float: none !important;
    align-self: center !important;
}

/* Bottom desktop toolbar: compact single row */
body.is-mobile #deskarea4 {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Keyboard shortcut selector: constrain width on mobile so it doesn't
   crowd the other buttons in the scrollable deskarea4 bar. */
/* Keyboard shortcut selector: compact Bootstrap look on mobile */
body.is-mobile #deskkeys {
    max-width: 110px !important;
    font-size: 11px !important;
    /* ensure Bootstrap form-select styling is applied */
    appearance: auto;
}

/* Type and keyboard toggle moved into More panel - free toolbar space */
body.is-mobile #DeskType     { display: none !important; }
body.is-mobile #DeskSoftKbdBtn { display: none !important; }

/* Move Actions + Settings into the More panel on mobile */
body.is-mobile #deskActionsBtn,
body.is-mobile #deskActionsSettings { display: none !important; }

/* Replace the desktop icon spray with the More button on mobile */
body.is-mobile #deskarea4Icons { display: none !important; }
body.is-mobile #deskMobileActions { display: flex !important; flex-shrink: 0 !important; }
body.is-mobile #deskMobileActions .btn { white-space: nowrap !important; }
/* Clipboard dialog button moved into the More panel on mobile */
body.is-mobile #DeskClip { display: none !important; }



/* fulldesk = remote-desktop fullscreen mode (body class added by deskToggleFull()).
   NOT 'fullscreen' - that class is always on body in the Modern UI (it is the
   normal grid layout mode) and would apply these rules to every mobile page view,
   making column_l overflow-y:auto and creating a double scrollbar on all views. */
body.is-mobile.fulldesk #container {
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

body.is-mobile.fulldesk #column_l {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

/* Mobile landscape: reclaim vertical space 
   'is-landscape' is toggled by JS on resize so deskAdjust() is also called,
   ensuring the canvas recalculates dimensions immediately on rotation. */

/* Hide panel title bars in landscape — saves ~50px; back nav still works
   via the browser gesture or rotating back to portrait. */
body.is-mobile.is-landscape #p11title,
body.is-mobile.is-landscape #p12title,
body.is-mobile.is-landscape #p13title { display: none !important; }

/* Compact the connect/disconnect toolbar to save a few more pixels */
body.is-mobile.is-landscape #deskarea1 {
    min-height: 0 !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

/* Canvas scale-fill in landscape fullscreen.
   deskAdjust() and onScreenSizeChange set portrait-sized pixel values via
   inline styles. !important in CSS always beats inline styles, so the canvas
   is permanently 100%x100% of DeskParent whenever both classes are present —
   regardless of how many times deskAdjust() fires. */
body.is-mobile.is-landscape.fulldesk #Desk {
    width:  100% !important;
    height: 100% !important;
}
body.is-mobile.is-landscape.fulldesk #DeskParent {
    overflow: hidden !important;
}

/* Native 1:1 zoom: DeskParent becomes content-sized (native resolution) inside
   deskarea3x. JS in dtouchmove manually sets deskarea3x.scrollLeft/Top to pan.
   overflow:hidden on deskarea3x is kept (base CSS) — JS can still scroll it. */
body.is-mobile.native-zoom #DeskParent {
    position: relative !important;
    display:  block !important;
    width:    var(--native-desk-w, 100%) !important;
    height:   var(--native-desk-h, 100%) !important;
}
body.is-mobile.native-zoom #Desk {
    width:  100% !important;
    height: 100% !important;
}

/* Mobile terminal */

/* deskAdjust() sets termarea3x height via inline style based on desktop layout.
   On mobile the offsets are different: 66px masthead + ~50px p12title +
   ~44px areaHead + ~44px areaFoot + 44px bottom-tab-bar = 248px.
   !important beats the inline style set by JS. */
body.is-mobile #termarea3x {
    height: calc(100vh - 252px) !important;
}
body.is-mobile #termarea3xdiv {
    height: calc(100vh - 252px) !important;
}

/* Terminal toolbar and footer: scroll horizontally instead of wrapping rows */
body.is-mobile #termTable .areaHead,
body.is-mobile #termTable .areaFoot {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    align-items: center !important;
}

/* Files panel toolbar: same no-wrap treatment as Terminal (both rows) */
body.is-mobile #p13toolbar .areaHead,
body.is-mobile #p13toolbar .areaHead2 {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    align-items: center !important;
}

/* Files "More" dropdown: scrollable list so all items are reachable */
body.is-mobile .mobileFileActionDropdown .dropdown-menu {
    max-height: 50vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* On mobile, hide the Actions button from Terminal/Files toolbars — it wraps
   on small screens and is accessible via device actions elsewhere. */
body.is-mobile #termActionsBtn,
body.is-mobile #filesActionsBtn { display: none !important; }

/* Tab key button: hidden everywhere except mobile */
body.is-mobile #tabbutton { display: inline-flex !important; }

/*  Mobile files panel */

/* p13filetable: flex:1 fills all remaining space in the p13 flex column,
   replacing the fragile fixed-height calc. adjustPanels() inline style is
   cancelled by height:auto !important. */
body.is-mobile #p13filetable {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
}

/* p13toolbarBottom: the status bar below the file list (shows "3 files: 0 bytes").
   style6 uses a white gradient background that appears as a visible bar in dark mode
   on both desktop and mobile. Transparent inherits the panel background,
   matching both light and dark themes. */
#p13toolbarBottom .style6 {
    background: transparent !important;
}

/* These apply on any narrow viewport (desktop narrow window, tablet, phone). */
@media (max-width: 768px) {
    #container,
    .fullscreen #container,
    #column_l,
    .fullscreen #column_l {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
        /* overflow: hidden (not overflow-x: hidden) — setting only one axis
           forces the other to 'auto' per CSS spec, creating an unwanted scrollbar */
        overflow: hidden;
    }

    /* masthead needs overflow:visible so its dropdown menu can extend below it */
    #masthead {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
        overflow: visible;
    }

    .fullscreen #container {
        grid-template-columns: 70px minmax(0, 1fr);
    }

    #masthead .title {
        font-size: 22px;
        padding-top: 4px;
    }

    #masthead .title2 {
        font-size: 12px;
        padding-top: 2px;
        padding-bottom: 10px;
    }

    .masthead-left {
        gap: 0.5rem;
        max-width: calc(100% - 120px);
    }

    .masthead-titles-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    #masthead {
        background-size: 18rem 2.5rem !important;
        background-position: center left;
        background-repeat: no-repeat !important;
        padding-right: 20px !important;
    }

    #p10info {
        overflow-x: hidden !important;
    }

    #p10info > table {
        table-layout: fixed;
    }

    #p10info > table > tbody > tr > td:first-child {
        width: calc(100% - 140px) !important;
    }

    #p10info > table > tbody > tr > td:nth-child(2),
    #p10info > table > tbody > tr > td:nth-child(3) {
        width: 0 !important;
    }

    #p10info > table > tbody > tr > td:nth-child(4) {
        width: 140px !important;
    }

    #p10info #MainComputerImage {
        width: 120px;
        height: 120px;
    }

    #p13toolbar,
    #p13toolbar tbody,
    #p13toolbar tr,
    #p13toolbar .areaHead,
    #p13toolbar .areaHead2 {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    #p13toolbar .areaHead,
    #p13toolbar .areaHead2,
    #p13toolbar .areaHead > .d-flex,
    #p13toolbar .areaHead2 > .d-flex,
    #p4toolbarActions,
    #p4toolbarActions > .d-flex,
    #p5filehead,
    #p5filehead > .d-flex {
        display: flex !important;
        flex-wrap: wrap !important;
        min-width: 0;
        row-gap: 4px;
    }

    #p13toolbar .areaHead {
        column-gap: 4px;
    }

    #p13toolbar .areaHead > .d-flex.ms-auto {
        margin-left: 0 !important;
    }

    #p13toolbar .areaHead input,
    #p13toolbar .areaHead button,
    #p13toolbar .areaHead2 input,
    #p13toolbar .areaHead2 button,
    #p4toolbarActions input,
    #p4toolbarActions button,
    #p5filehead input,
    #p5filehead button {
        margin-bottom: 4px;
    }

    #p5toolbar,
    #p5toolbar tbody,
    #p5toolbar tr,
    #p5filehead,
    #p5filesubhead {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    #UserSearchInput {
        max-width: 150px;
    }

    .desktopFileAction,
    .desktopAction {
        display: none !important;
    }

    .mobileFileActionDropdown,
    .mobileActionDropdown {
        display: inline-flex !important;
    }

    #MainMeshImage /*, #p2AccountImageFrame */ {
        /* text-align: center !important; */
        float: none !important;
        width: 100px !important;
        height: 100px !important;
    }

    #p2AccountImageFrame {
        float: none !important;
        text-align: left;
    }

    #userDropdown {
        display: flex !important;
    }

    #userDropdownName {
        display: none !important;
    }

    .userDropdownMobileOnly {
        display: flex !important;
    }

    #userDropdownMenuDivider.userDropdownMobileOnly {
        display: block;
    }

    .userDropdownSubmenu {
        position: static !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        margin: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
        box-shadow: none !important;
        background-color: transparent !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    .userDropdownUISettings {
        position: relative;
    }

    .userDropdownMenuItem:hover {
        border-radius: unset !important;
    }

    .notifiyBox {
        right: 3.5rem;
    }

    .notifiyBox:after {
        margin-right: 40px;
    }

    .notifiyBox:before {
        content: none;
    }

    body {
        min-width: 0 !important;
    }
}
/* css fixes for select2 */
/* .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
    display: inline;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    display: inline-flex;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-search {
    display: inline !important;
} */
/* User Dropdown Menu Styles */
#userDropdown {
    display: flex;
    align-items: center;
    z-index: 1000;
    background: #00000026;
    border-radius: 4px;
}
#userDropdownButton {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 4px;
    height: 40px;
}

#userDropdownButton:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

#userDropdownImage {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-right: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    object-fit: cover;
}

#userDropdownName {
    margin-right: 6px;
    white-space: nowrap;
}

#userDropdownArrow {
    font-size: 12px;
}

#userDropdown {
    position: relative;
}

#userDropdownMenu {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	background-color: #f3f3f3;
	box-shadow: 0 0 12px #0000004d;
	border-radius: 10px;
	z-index: 10000;
	min-width: 200px;
	margin-top: 4px;
	transform: translateX(0);
	font-family: sans-serif;
	font-size: small;
}



#userDropdownMenuContainer {
	padding: 6px 0;
}

.userDropdownMenuItem {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	cursor: pointer;
	color: var(--bs-body-color);
	white-space: nowrap;
	transition: background-color 0.15s ease;
	font-size: small;
}

.userDropdownMenuItem:hover {
	background-color: #8181814a;
	border-radius: 4px;
}

.userDropdownMenuIcon {
	width: 18px;
	height: 18px;
	object-fit: contain;
	flex-shrink: 0;
}

.userDropdownMenuItem span {
	flex-grow: 1;
	text-align: left;
	font-size: small;
	line-height: 1.2;
}

#userDropdownMenuDivider {
	border-top: var(--bs-border-width) solid #000000;
    opacity: .25;
	margin: 4px 0;
}

.night #userDropdownMenuDivider {
    border-top: var(--bs-border-width) solid;
}

.userDropdownUISettings {
    position: relative;
}

.userDropdownSubmenu {
	position: absolute;
	right: 96%;
	top: 0;
	background-color: #f3f3f3;
	box-shadow: 0 0 12px #0000004d;
	border-radius: 10px;
	margin-right: 4px;
	min-width: 200px;
	z-index: 10001;
	padding: 6px 0;
	font-size: small;
	display: none;
}

.userDropdownSubmenu .userDropdownMenuItem {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
}

.userDropdownSubmenu .userDropdownMenuItem:hover {
	background-color: #8181814a;
	border-radius: 4px;
}

.userDropdownSubmenu .userDropdownMenuIcon {
	width: 18px;
	height: 18px;
	object-fit: contain;
	flex-shrink: 0;
}

.userDropdownMobileOnly {
	display: none;
}

.userDropdownUISettings img:last-child {
	margin-left: auto;
	width: 14px;
	height: 14px;
	opacity: 0.7;
}
.night #userDropdownMenu, .night .userDropdownSubmenu {
	background-color: #292c2c;
}

.userDropdownUISettings .fa-chevron-right {
    transition: transform 0.3s ease;
    transform: rotate(0deg);
}

.userDropdownUISettings .fa-chevron-right.rotated {
    transform: rotate(90deg);
}

/* Icon customization modal preview */
.icon-preview-container {
    align-items: center;
}

.icon-preview-item {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

@media (min-width: 769px) {
    .userDropdownSubmenu {
        position: absolute;
        display: none;
        opacity: 0;
        transform: translateX(12px);
        transition: opacity 0.2s ease, transform 0.3s ease;
    }

    .userDropdownSubmenu.show {
        display: block;
        opacity: 1;
        transform: translateX(0);
    }
}

/* Mobile scrollable submenu — desktop: wrapper divs are invisible pass-throughs */
.mobile-submenu-scroll,
.mobile-submenu-scroll-inner {
    display: contents;
}

.mobile-submenu-arrow {
    display: none;
}

/* Mobile: when MainSubMenuSpan is shown, make it a flex row for scrollable tabs.
   No !important here so JS inline style="display:none" still hides it correctly. */
body.is-mobile #MainSubMenuSpan {
    align-items: center;
    overflow: visible;
    height: 24px;
    position: relative;
    z-index: 1;
}
body.is-mobile #MainSubMenuSpan:not([style*="display:none"]):not([style*="display: none"]) {
    display: flex;
}

body.is-mobile .mobile-submenu-scroll {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body.is-mobile .mobile-submenu-scroll-inner {
    display: block;
    overflow-x: auto;
    scroll-behavior: smooth;
    flex: 1;
    min-width: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body.is-mobile .mobile-submenu-scroll-inner::-webkit-scrollbar {
    display: none;
}

body.is-mobile #MainSubMenu {
    display: inline-table !important;
    width: auto !important;
    height: 24px;
    table-layout: auto !important;
}

body.is-mobile #MainSubMenu .topbar_td {
    width: auto !important;
    min-width: unset !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    white-space: nowrap !important;
}

body.is-mobile .mobile-submenu-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 100%;
    background: transparent;
    color: white;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    border: none;
    padding: 0;
    flex-shrink: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}

body.is-mobile .mobile-submenu-arrow:hover,
body.is-mobile .mobile-submenu-arrow:active {
    background: #505050;
}

body.is-mobile .mobile-submenu-arrow i {
    display: flex;
    align-items: center;
    justify-content: center;
}