/* Mieez Guacamole theme ? scoped dark UI built on native Guacamole 1.6 selectors. */
:root {
    --mz-bg: #0b1120;
    --mz-surface: #121b2d;
    --mz-surface-raised: #18243a;
    --mz-surface-hover: #20304b;
    --mz-border: #2d4162;
    --mz-border-soft: rgba(148, 163, 184, .22);
    --mz-text: #e7eef9;
    --mz-text-soft: #b7c4d8;
    --mz-text-muted: #8d9bb2;
    --mz-accent: #55a9ff;
    --mz-accent-strong: #2f8df0;
    --mz-accent-soft: rgba(85, 169, 255, .16);
    --mz-danger: #f1767e;
    --mz-danger-bg: #6e2732;
    --mz-shadow: 0 18px 45px rgba(0, 0, 0, .34);
    color-scheme: dark;
}

html,
body {
    min-height: 100% !important;
    margin: 0 !important;
    background: var(--mz-bg) !important;
    color: var(--mz-text) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}

body.home,
body.home #content,
body.settings,
body.settings #content {
    min-height: 100vh;
    background: var(--mz-bg) !important;
    color: var(--mz-text) !important;
}

/* Shared text and links: native Guacamole defaults are black on light surfaces. */
body.home a,
body.settings a,
body.home .connection a,
body.home .connection-group a,
body.settings .connection a,
body.settings .connection-group a,
body.settings .user a,
body.settings .user-group a {
    color: var(--mz-text) !important;
}

body.home a:hover,
body.settings a:hover,
body.home .connection a:hover,
body.settings .connection a:hover {
    color: #ffffff !important;
}

/* Login */
.login-ui {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    background:
        radial-gradient(900px circle at 12% 10%, rgba(47, 141, 240, .18), transparent 46%),
        radial-gradient(850px circle at 88% 82%, rgba(85, 169, 255, .12), transparent 44%),
        var(--mz-bg) !important;
    color: var(--mz-text) !important;
}

.login-dialog {
    width: min(420px, 100%) !important;
    padding: 34px 32px 30px !important;
    border: 1px solid var(--mz-border) !important;
    border-radius: 16px !important;
    background: rgba(18, 27, 45, .94) !important;
    box-shadow: var(--mz-shadow) !important;
    color: var(--mz-text) !important;
    backdrop-filter: blur(18px);
}

.login-dialog::before {
    content: "";
    display: block;
    height: 2px;
    margin: -34px -32px 28px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(90deg, transparent, var(--mz-accent), transparent);
}

.logo {
    width: 100% !important;
    height: 42px !important;
    margin-bottom: 24px !important;
    background-image: none !important;
}

.logo::after {
    content: "MIEEZ SECURE ACCESS";
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--mz-text) !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .24em;
}

.login-ui .app-name,
.login-ui .version-number,
.login-ui label,
.login-ui .login-help {
    color: var(--mz-text-soft) !important;
}

.login-ui .app-name {
    color: var(--mz-text) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: center;
}

.login-ui .version,
.login-ui a[href*="apache"] {
    display: none !important;
}

.login-ui .login-fields .labeled-field,
.login-ui .labeled-field {
    color: var(--mz-text-soft) !important;
}

.login-ui input[type="text"],
.login-ui input[type="password"] {
    width: 100% !important;
    min-height: 42px;
    box-sizing: border-box;
    margin-top: 7px !important;
    margin-bottom: 15px !important;
    padding: 10px 12px !important;
    border: 1px solid var(--mz-border) !important;
    border-radius: 9px !important;
    outline: none !important;
    background: #0d1728 !important;
    color: var(--mz-text) !important;
}

.login-ui input[type="text"]::placeholder,
.login-ui input[type="password"]::placeholder {
    color: var(--mz-text-muted) !important;
}

.login-ui input[type="text"]:focus,
.login-ui input[type="password"]:focus {
    border-color: var(--mz-accent) !important;
    box-shadow: 0 0 0 3px var(--mz-accent-soft) !important;
}

.login-ui .buttons {
    display: flex !important;
    gap: 10px;
    margin-top: 18px !important;
}

.login-ui input.login,
.login-ui input.continue-login {
    flex: 1;
    min-height: 42px;
    margin: 0 !important;
    border: 1px solid var(--mz-accent-strong) !important;
    border-radius: 9px !important;
    background: var(--mz-accent-strong) !important;
    color: #fff !important;
    font-weight: 700 !important;
    cursor: pointer;
}

.login-ui input.login:hover,
.login-ui input.continue-login:hover {
    background: var(--mz-accent) !important;
}

.login-ui .login-error {
    color: #ff9aa1 !important;
    text-align: center;
}

/* Shared controls used by home, settings, menus, and dialogs. */
body.home input,
body.home select,
body.home textarea,
body.settings input,
body.settings select,
body.settings textarea,
.menu input,
.menu select,
.menu textarea {
    border: 1px solid var(--mz-border) !important;
    border-radius: 7px;
    background: #0d1728 !important;
    color: var(--mz-text) !important;
}

body.home input::placeholder,
body.settings input::placeholder,
.menu input::placeholder {
    color: var(--mz-text-muted) !important;
}

body.home input:focus,
body.home select:focus,
body.home textarea:focus,
body.settings input:focus,
body.settings select:focus,
body.settings textarea:focus,
.menu input:focus,
.menu select:focus,
.menu textarea:focus {
    border-color: var(--mz-accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--mz-accent-soft) !important;
}

a.button,
button,
input[type="submit"] {
    border: 1px solid var(--mz-border) !important;
    border-radius: 7px !important;
    background: var(--mz-surface-raised) !important;
    color: var(--mz-text) !important;
    text-shadow: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18) !important;
    font-family: inherit !important;
    font-weight: 650;
}

a.button:hover,
button:hover,
input[type="submit"]:hover {
    border-color: var(--mz-accent) !important;
    background: var(--mz-surface-hover) !important;
    color: #fff !important;
}

a.button:active,
button:active,
input[type="submit"]:active {
    background: #263b5d !important;
}

button:disabled,
input[type="submit"]:disabled {
    color: var(--mz-text-muted) !important;
    opacity: .55;
}

button.danger,
a.button.danger {
    border-color: #9d3e4b !important;
    background: var(--mz-danger-bg) !important;
    color: #fff !important;
}

button.danger:hover,
a.button.danger:hover {
    background: var(--mz-danger) !important;
}

/* Home / connection list */
body.home #content {
    padding-bottom: 28px;
}

body.home .header {
    border-bottom: 1px solid var(--mz-border) !important;
    background: rgba(18, 27, 45, .94) !important;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .22) !important;
    color: var(--mz-text) !important;
}

body.home .header h2,
body.settings .header h2 {
    color: var(--mz-text) !important;
    font-weight: 700 !important;
}

body.home .header .filter input {
    border-left: 1px solid var(--mz-border) !important;
    background: transparent !important;
    color: var(--mz-text) !important;
}

.connection-list-ui,
div.recent-connections,
div.all-connections {
    color: var(--mz-text) !important;
}

div.recent-connections,
div.all-connections {
    margin: 22px auto !important;
    padding: 0 22px !important;
    max-width: 1280px;
}

.recent-connections .connection,
.all-connections .connection,
.all-connections .connection-group > .caption,
.group-list .connection {
    border: 1px solid var(--mz-border) !important;
    border-radius: 11px !important;
    background: var(--mz-surface) !important;
    color: var(--mz-text) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
}

.recent-connections .connection {
    padding: 14px !important;
}

.all-connections .connection:hover,
.group-list .connection:hover,
.recent-connections .connection:hover {
    border-color: var(--mz-accent) !important;
    background: var(--mz-surface-hover) !important;
    color: #fff !important;
}

.all-connections .connection-group > .caption {
    margin-bottom: 8px;
    padding: 12px 14px;
}

.home-connection,
.home-connection:visited,
.home-connection:hover {
    color: var(--mz-text) !important;
}

.home-connection .caption,
.home-connection .caption .name,
.recent-connections .connection .caption,
.recent-connections .connection .caption .name {
    color: var(--mz-text) !important;
}

.home-connection .icon.type {
    filter: brightness(0) invert(1) opacity(.82);
}

.home-connection .activeUserCount {
    border: 1px solid #35724f;
    border-radius: 999px;
    background: #173d2b;
    color: #9af0bd !important;
}

.recent-connections .connection .thumbnail > * {
    border-color: var(--mz-border) !important;
    background: #080e19 !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .35) !important;
}

.filter input {
    color: var(--mz-text) !important;
}

/* User menu and dropdowns */
.user-menu .menu-title,
.menu-dropdown .menu-title {
    color: var(--mz-text) !important;
}

.menu-dropdown,
.menu-dropdown:hover,
.menu-dropdown.open,
.menu-dropdown.open:hover {
    border-left-color: var(--mz-border) !important;
    background: var(--mz-surface) !important;
}

.menu-dropdown .menu-contents,
.user-menu .menu-dropdown .menu-contents {
    border: 1px solid var(--mz-border) !important;
    border-radius: 8px;
    background: var(--mz-surface-raised) !important;
    box-shadow: var(--mz-shadow) !important;
    color: var(--mz-text) !important;
}

.menu-dropdown .menu-contents li a,
.menu-dropdown .menu-contents li a:visited {
    color: var(--mz-text) !important;
}

.menu-dropdown .menu-contents li a:hover {
    background: var(--mz-accent-soft) !important;
    color: #fff !important;
}

.menu-dropdown .menu-contents li a.current,
.menu-dropdown .menu-contents li a.current:hover {
    background: rgba(85, 169, 255, .22) !important;
    color: #fff !important;
    opacity: 1 !important;
}

.menu-dropdown .menu-contents .profile {
    border-bottom-color: var(--mz-border) !important;
    color: var(--mz-text-soft) !important;
}

/* Settings */
body.settings #content {
    padding-bottom: 28px;
}

.settings-view,
.settings-view .header,
.settings-view h2.header {
    color: var(--mz-text) !important;
}

.settings-view .header {
    border-color: var(--mz-border) !important;
    background: rgba(18, 27, 45, .94) !important;
}

.page-tabs .page-list ul,
.section-tabs ul {
    border-bottom-color: var(--mz-border) !important;
    background: var(--mz-surface) !important;
}

.page-tabs .page-list li a[href],
.page-tabs .page-list li a[href]:visited,
.section-tabs li a {
    color: var(--mz-text-soft) !important;
}

.page-tabs .page-list li a[href]:hover,
.section-tabs li a:hover {
    background: var(--mz-accent-soft) !important;
    color: #fff !important;
}

.page-tabs .page-list li a[href].current,
.page-tabs .page-list li a[href].current:hover,
.section-tabs li a.current,
.section-tabs li a.current:hover {
    background: var(--mz-accent-strong) !important;
    color: #fff !important;
}

.settings.section,
.preferences .settings.section {
    margin: 18px 22px !important;
    padding: 20px !important;
    border: 1px solid var(--mz-border) !important;
    border-radius: 12px !important;
    background: var(--mz-surface) !important;
    color: var(--mz-text) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
}

.settings.section > p:first-of-type,
.settings.section .placeholder,
.settings.section .field-header,
.settings.section label,
.settings.section th {
    color: var(--mz-text-soft) !important;
}

.settings.section table.fields,
.settings table.session-list,
.settings table.properties,
.settings table.user-list,
.settings table.user-group-list {
    color: var(--mz-text) !important;
}

.settings.section table.fields th,
.settings.section table.fields td,
.settings table.properties th,
.settings table.properties td,
.settings table.session-list th,
.settings table.session-list td {
    border-color: var(--mz-border-soft) !important;
    color: var(--mz-text) !important;
}

.settings table.session-list tr.session:hover,
.settings table.user-list tr.user:hover,
.settings table.user-group-list tr.user-group:hover {
    background: var(--mz-accent-soft) !important;
}

.settings.section select,
.preferences select,
.settings.section input[type="number"] {
    min-height: 36px;
    padding: 7px 9px !important;
    background: #0d1728 !important;
    color: var(--mz-text) !important;
}

.settings.section .choice {
    border: 1px solid var(--mz-border) !important;
    border-radius: 9px;
    background: var(--mz-surface-raised) !important;
    color: var(--mz-text) !important;
}

.settings.section .choice:hover {
    border-color: var(--mz-accent) !important;
    background: var(--mz-surface-hover) !important;
}

/* Panels, dialogs, notices, and client-side menus */
.menu,
.menu.closed,
.menu.open {
    background: var(--mz-surface) !important;
    color: var(--mz-text) !important;
}

.menu .header,
.menu-content .header,
#guac-menu .header {
    border-color: var(--mz-border) !important;
    background: var(--mz-surface-raised) !important;
    color: var(--mz-text) !important;
}

.menu-body,
.menu-content,
#guac-menu .content {
    color: var(--mz-text) !important;
}

.notification,
.logged-out-modal .notification,
.fatal-page-error-modal .notification,
.automatic-login-rejected-modal .notification {
    border: 1px solid var(--mz-border) !important;
    border-radius: 10px !important;
    background: var(--mz-surface-raised) !important;
    color: var(--mz-text) !important;
    box-shadow: var(--mz-shadow) !important;
}

.notification .title-bar {
    border-bottom-color: var(--mz-border) !important;
    background: var(--mz-surface) !important;
    color: var(--mz-text) !important;
}

.notification.error,
.client-status-modal .notification.error {
    background: var(--mz-danger-bg) !important;
    color: #fff !important;
}

.client-status-modal .notification {
    background: rgba(18, 27, 45, .96) !important;
    color: var(--mz-text) !important;
}

#connection-warning {
    border-left-color: #e3a93b !important;
    background: #47391b !important;
    color: #fff !important;
}

/* Keep the actual remote desktop canvas dark and its controls readable. */
.settings.connectionHistoryPlayer,
.client {
    background: #050912 !important;
    color: #fff !important;
}

.client .header,
.client .header h2,
.client .user-menu .menu-title,
.client .menu .header h2 {
    color: #fff !important;
}

/* Remove native light borders that remain on form rows and separators. */
body.home hr,
body.settings hr,
body.settings .settings.section::before,
body.settings .settings.section table tr {
    border-color: var(--mz-border-soft) !important;
}


/* View-specific compatibility: the manage-* views are not descendants of
   body.settings in Guacamole, and sorted tables have stronger native rules. */
.manage-connection,
.manage-connection-group,
.manage-user,
.manage-user-group {
    color: var(--mz-text) !important;
    background: var(--mz-bg) !important;
}

.manage-connection .header,
.manage-connection-group .header,
.manage-user .header,
.manage-user-group .header {
    border-color: var(--mz-border) !important;
    background: rgba(18, 27, 45, .94) !important;
    color: var(--mz-text) !important;
}

.manage-connection .header h2,
.manage-connection-group .header h2,
.manage-user .header h2,
.manage-user-group .header h2,
.manage-connection .section h3,
.manage-connection-group .section h3,
.manage-user .section h3,
.manage-user-group .section h3 {
    color: var(--mz-text) !important;
}

.manage-connection .section,
.manage-connection-group .section,
.manage-user .section,
.manage-user-group .section {
    color: var(--mz-text) !important;
    background: var(--mz-bg) !important;
}

.manage-connection .section p,
.manage-connection-group .section p,
.manage-user .section p,
.manage-user-group .section p,
.manage-connection .field-header,
.manage-connection-group .field-header,
.manage-user .field-header,
.manage-user-group .field-header,
.manage-connection label,
.manage-connection-group label,
.manage-user label,
.manage-user-group label {
    color: var(--mz-text-soft) !important;
}

.manage-connection table.properties,
.manage-connection-group table.properties,
.manage-user table.properties,
.manage-user-group table.properties,
.manage-connection table.properties th,
.manage-connection table.properties td,
.manage-connection-group table.properties th,
.manage-connection-group table.properties td,
.manage-user table.properties th,
.manage-user table.properties td,
.manage-user-group table.properties th,
.manage-user-group table.properties td {
    border-color: var(--mz-border-soft) !important;
    color: var(--mz-text) !important;
}

.manage-connection .form-field input,
.manage-connection .form-field select,
.manage-connection .form-field textarea,
.manage-connection-group .form-field input,
.manage-connection-group .form-field select,
.manage-connection-group .form-field textarea,
.manage-user .form-field input,
.manage-user .form-field select,
.manage-user .form-field textarea,
.manage-user-group .form-field input,
.manage-user-group .form-field select,
.manage-user-group .form-field textarea {
    box-sizing: border-box;
    border: 1px solid var(--mz-border) !important;
    border-radius: 7px !important;
    background: #0d1728 !important;
    color: var(--mz-text) !important;
}

.manage-connection .form-field input:focus,
.manage-connection .form-field select:focus,
.manage-connection .form-field textarea:focus,
.manage-connection-group .form-field input:focus,
.manage-connection-group .form-field select:focus,
.manage-connection-group .form-field textarea:focus,
.manage-user .form-field input:focus,
.manage-user .form-field select:focus,
.manage-user .form-field textarea:focus,
.manage-user-group .form-field input:focus,
.manage-user-group .form-field select:focus,
.manage-user-group .form-field textarea:focus {
    border-color: var(--mz-accent) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px var(--mz-accent-soft) !important;
}

.settings table.sorted,
.settings.users table.user-list,
.settings.sessions table.session-list,
.settings table.sorted th,
.settings table.sorted td,
.settings.users table.user-list th,
.settings.users table.user-list td,
.settings.sessions table.session-list th,
.settings.sessions table.session-list td {
    border-color: var(--mz-border-soft) !important;
    color: var(--mz-text) !important;
}

.settings table.sorted th {
    background: var(--mz-surface-raised) !important;
    color: var(--mz-text) !important;
    font-weight: 700 !important;
}

.settings table.sorted td,
.settings.users table.user-list td,
.settings.sessions table.session-list td {
    background: var(--mz-surface) !important;
    color: var(--mz-text) !important;
}

.settings table.sorted td a,
.settings table.sorted th a,
.settings.users table.user-list td a,
.settings.users table.user-list th a,
.settings.sessions table.session-list td a {
    color: var(--mz-text) !important;
}

.settings table.sorted tr:hover td,
.settings.users table.user-list tr:hover td,
.settings.sessions table.session-list tr:hover td {
    background: var(--mz-surface-hover) !important;
}

.settings .filter input,
.settings.connections .filter input,
.settings.users .filter input,
.settings.sessions .filter input {
    border: 1px solid var(--mz-border) !important;
    border-radius: 7px !important;
    background: #0d1728 !important;
    color: var(--mz-text) !important;
}

.settings .icon,
.settings .icon::before,
.settings .icon::after,
.manage-connection .icon,
.manage-connection-group .icon,
.manage-user .icon,
.manage-user-group .icon {
    filter: invert(1) brightness(1.35) !important;
}


/* Native Guacamole menu icons include black-only SVG variants. Use the
   packaged white user icon and CSS masks for the dropdown icons. */
.user-menu .menu-dropdown .menu-title {
    background-image: url("/guacamole/images/user-icons/guac-user-white.svg") !important;
}

.user-menu .menu-dropdown .menu-contents li a {
    position: relative;
    background-image: none !important;
    padding-left: 2.5em !important;
}

.user-menu .menu-dropdown .menu-contents li a::before {
    content: "";
    position: absolute;
    left: .75em;
    top: 50%;
    width: 1em;
    height: 1em;
    transform: translateY(-50%);
    background: var(--mz-text);
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
}

.user-menu .menu-dropdown .menu-contents li a[href="#/"]::before {
    -webkit-mask-image: url("/guacamole/images/action-icons/guac-home-dark.svg");
    mask-image: url("/guacamole/images/action-icons/guac-home-dark.svg");
}

.user-menu .menu-dropdown .menu-contents li a[href*="#/settings/"]::before {
    -webkit-mask-image: url("/guacamole/images/action-icons/guac-config-dark.svg");
    mask-image: url("/guacamole/images/action-icons/guac-config-dark.svg");
}

.user-menu .menu-dropdown .menu-contents li a.logout::before {
    -webkit-mask-image: url("/guacamole/images/action-icons/guac-logout-dark.svg");
    mask-image: url("/guacamole/images/action-icons/guac-logout-dark.svg");
}


.user-menu .menu-title,
.user-menu .menu-title a,
.user-menu .menu-title a:visited,
.user-menu .menu-title a:hover {
    color: var(--mz-text) !important;
    text-decoration: none !important;
}


/* Connection list target: compact, full-width rows rather than centered cards. */
body.home .connection-list-ui,
body.home .connection-list,
body.home div.all-connections {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

body.home div.all-connections {
    margin: 0 !important;
    padding: 0 28px 28px !important;
    text-align: left !important;
}

body.home .all-connections .connection-group,
body.home .all-connections .connection-group > .caption,
body.home .all-connections .connection {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

body.home .all-connections .connection {
    display: block !important;
    min-height: 44px;
    margin: 5px 0 !important;
    padding: 0 !important;
    border: 1px solid var(--mz-border) !important;
    border-radius: 9px !important;
    background: var(--mz-surface) !important;
}

body.home .all-connections .connection:hover {
    border-color: var(--mz-accent) !important;
    background: var(--mz-surface-hover) !important;
}

body.home .all-connections .connection > a.home-connection,
body.home .all-connections a.home-connection {
    display: flex !important;
    align-items: center !important;
    min-height: 44px;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 14px !important;
    color: var(--mz-text) !important;
}

body.home .all-connections .home-connection .icon.type {
    flex: 0 0 auto;
    width: 1.25em;
    height: 1.25em;
    margin-right: 12px;
}

body.home .all-connections .home-connection .caption,
body.home .all-connections .home-connection .caption .name {
    flex: 1 1 auto;
    color: var(--mz-text) !important;
    font-size: .86rem;
    font-weight: 650;
    text-align: left;
}

body.home .all-connections .home-connection .activeUserCount {
    flex: 0 0 auto;
    margin-left: 14px;
    padding: 3px 9px;
    border: 1px solid rgba(85, 169, 255, .6) !important;
    border-radius: 999px;
    background: rgba(47, 141, 240, .18) !important;
    color: #76bcff !important;
    font-size: .7rem;
    font-style: normal;
    white-space: nowrap;
}

body.home .all-connections .connection-group > .caption {
    margin: 12px 0 6px !important;
    padding: 10px 14px !important;
    color: var(--mz-text) !important;
}


/* Exact home connection template selectors: the anchor contains .name and
   .activeUserCount directly (there is no .caption wrapper). */
body.home .all-connections a.home-connection .name {
    flex: 1 1 auto !important;
    min-width: 0;
    color: var(--mz-text) !important;
    font-size: .86rem !important;
    font-weight: 650 !important;
    text-align: left !important;
}

body.home .all-connections a.home-connection .activeUserCount {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    float: none !important;
    color: #76bcff !important;
}

body.home .all-connections a.home-connection,
body.home .all-connections a.home-connection:visited,
body.home .all-connections a.home-connection:hover {
    color: var(--mz-text) !important;
}


/* Override Guacamole's native pale-yellow list-item hover state. */
body.home .all-connections .connection:hover,
body.home .all-connections .connection:hover .caption,
body.home .all-connections .connection:hover a.home-connection,
body.home .all-connections .connection .caption:hover,
body.home .all-connections .list-item:not(.selected) .caption:hover {
    background: var(--mz-surface-hover) !important;
    color: var(--mz-text) !important;
}

body.home .all-connections .connection:hover .name,
body.home .all-connections .connection:hover .activeUserCount {
    color: #fff !important;
}


/* Dark styling for the settings connection manager. */
body.settings .settings.connections .connection-list,
body.settings .settings.connections .connection-list .group-list,
body.settings .settings.connections .connection-list .group-list-page {
    color: var(--mz-text) !important;
}

body.settings .settings.connections .connection-list .list-item > .connection,
body.settings .settings.connections .connection-list .list-item > .connection-group,
body.settings .settings.connections .connection-list .list-item > .sharing-profile {
    margin: 5px 0 !important;
    border: 1px solid var(--mz-border) !important;
    border-radius: 9px !important;
    background: var(--mz-surface) !important;
    color: var(--mz-text) !important;
}

body.settings .settings.connections .connection-list .list-item > .caption {
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
}

body.settings .settings.connections .connection-list .list-item > .caption:hover,
body.settings .settings.connections .connection-list .connection > .caption:hover,
body.settings .settings.connections .connection-list .connection-group > .caption:hover,
body.settings .settings.connections .connection-list .sharing-profile > .caption:hover,
body.settings .settings.connections .connection-list .list-item:not(.selected) .caption:hover {
    background: var(--mz-surface-hover) !important;
    color: var(--mz-text) !important;
}

body.settings .settings.connections .connection-list a.settings-connection,
body.settings .settings.connections .connection-list a.settings-connection-group,
body.settings .settings.connections .connection-list a.new-connection,
body.settings .settings.connections .connection-list a.new-connection-group,
body.settings .settings.connections .connection-list a.new-sharing-profile {
    display: flex !important;
    align-items: center !important;
    min-height: 42px;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 12px !important;
    color: var(--mz-text) !important;
    text-decoration: none !important;
}

body.settings .settings.connections .connection-list a.settings-connection:hover,
body.settings .settings.connections .connection-list a.settings-connection-group:hover,
body.settings .settings.connections .connection-list a.new-connection:hover,
body.settings .settings.connections .connection-list a.new-connection-group:hover,
body.settings .settings.connections .connection-list a.new-sharing-profile:hover {
    background: var(--mz-surface-hover) !important;
    color: #fff !important;
}

body.settings .settings.connections .connection-list a.settings-connection .name,
body.settings .settings.connections .connection-list a.settings-connection-group .name,
body.settings .settings.connections .connection-list a.new-connection .name,
body.settings .settings.connections .connection-list a.new-connection-group .name,
body.settings .settings.connections .connection-list a.new-sharing-profile .name {
    flex: 1 1 auto !important;
    min-width: 0;
    margin-left: 8px !important;
    padding: 0 !important;
    color: var(--mz-text) !important;
    font-size: .86rem !important;
    font-weight: 600 !important;
}

body.settings .settings.connections .connection-list a.settings-connection:hover .name,
body.settings .settings.connections .connection-list a.settings-connection-group:hover .name {
    color: #fff !important;
}

body.settings .settings.connections .connection-list a.settings-connection .activeUserCount {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    float: none !important;
    padding: 3px 9px !important;
    border: 1px solid rgba(85, 169, 255, .6) !important;
    border-radius: 999px !important;
    background: rgba(47, 141, 240, .18) !important;
    color: #76bcff !important;
    font-size: .7rem !important;
    font-style: normal !important;
    white-space: nowrap;
}

body.settings .settings.connections .connection-list .connection .icon.type,
body.settings .settings.connections .connection-list .connection-group .icon.type,
body.settings .settings.connections .connection-list .sharing-profile .icon.type,
body.settings .settings.connections .connection-list .icon.expand {
    filter: brightness(0) invert(1) opacity(.82);
}


/* Dark styling for the in-session connection switcher. */
#guac-menu .connection-select-menu .menu-dropdown .menu-contents {
    width: 400px !important;
    max-width: 100vw !important;
    border: 1px solid var(--mz-border) !important;
    border-radius: 0 0 9px 9px !important;
    background: var(--mz-surface-raised) !important;
    color: var(--mz-text) !important;
}

#guac-menu .connection-select-menu .menu-dropdown .menu-contents .all-connections {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 10px !important;
    color: var(--mz-text) !important;
}

#guac-menu .connection-select-menu .menu-dropdown .menu-contents .group-list,
#guac-menu .connection-select-menu .menu-dropdown .menu-contents .group-list-page {
    width: 100% !important;
    color: var(--mz-text) !important;
}

#guac-menu .connection-select-menu .menu-dropdown .menu-contents .list-item > .caption {
    margin: 3px 0 !important;
    padding: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: var(--mz-text) !important;
}

#guac-menu .connection-select-menu .menu-dropdown .menu-contents .connection-select-menu-connection,
#guac-menu .connection-select-menu .menu-dropdown .menu-contents .connection-select-menu-connection-group {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 34px;
    margin: 0 !important;
    border: 1px solid var(--mz-border) !important;
    border-radius: 9px !important;
    background: var(--mz-surface) !important;
    color: var(--mz-text) !important;
}

#guac-menu .connection-select-menu .menu-dropdown .menu-contents .connection-select-menu-connection > input,
#guac-menu .connection-select-menu .menu-dropdown .menu-contents .connection-select-menu-connection-group > input {
    flex: 0 0 auto;
    margin: 0 8px !important;
    accent-color: var(--mz-accent-strong);
}

#guac-menu .connection-select-menu .menu-dropdown .menu-contents .connection-select-menu-connection > a,
#guac-menu .connection-select-menu .menu-dropdown .menu-contents .connection-select-menu-connection-group > a {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 34px;
    padding: 0 8px 0 0 !important;
    color: var(--mz-text) !important;
    text-decoration: none !important;
}

#guac-menu .connection-select-menu .menu-dropdown .menu-contents .connection-select-menu-connection .icon.type,
#guac-menu .connection-select-menu .menu-dropdown .menu-contents .connection-select-menu-connection-group .icon.type {
    flex: 0 0 auto;
    filter: brightness(0) invert(1) opacity(.82);
}

#guac-menu .connection-select-menu .menu-dropdown .menu-contents .connection-select-menu-connection .name,
#guac-menu .connection-select-menu .menu-dropdown .menu-contents .connection-select-menu-connection-group .name {
    min-width: 0;
    margin-left: 8px !important;
    padding: 0 !important;
    color: var(--mz-text) !important;
    font-size: .84rem !important;
    font-weight: 600 !important;
}

#guac-menu .connection-select-menu .menu-dropdown .menu-contents .list-item > .caption:hover,
#guac-menu .connection-select-menu .menu-dropdown .menu-contents .list-item:not(.selected) .caption:hover,
#guac-menu .connection-select-menu .menu-dropdown .menu-contents .connection-select-menu-connection:hover,
#guac-menu .connection-select-menu .menu-dropdown .menu-contents .connection-select-menu-connection-group:hover,
#guac-menu .connection-select-menu .menu-dropdown .menu-contents .connection-select-menu-connection > a:hover,
#guac-menu .connection-select-menu .menu-dropdown .menu-contents .connection-select-menu-connection-group > a:hover {
    background: var(--mz-surface-hover) !important;
    color: #fff !important;
}

#guac-menu .connection-select-menu .menu-dropdown .menu-contents .connection-select-menu-connection:hover .name,
#guac-menu .connection-select-menu .menu-dropdown .menu-contents .connection-select-menu-connection-group:hover .name {
    color: #fff !important;
}


/* Lighten pager controls in the in-session connection switcher. */
#guac-menu .connection-select-menu .menu-dropdown .menu-contents .pager {
    margin: 10px 0 2px !important;
    color: var(--mz-text) !important;
}

#guac-menu .connection-select-menu .menu-dropdown .menu-contents .pager .first-page,
#guac-menu .connection-select-menu .menu-dropdown .menu-contents .pager .prev-page,
#guac-menu .connection-select-menu .menu-dropdown .menu-contents .pager .next-page,
#guac-menu .connection-select-menu .menu-dropdown .menu-contents .pager .last-page {
    filter: brightness(0) invert(1) opacity(.88) !important;
}

#guac-menu .connection-select-menu .menu-dropdown .menu-contents .pager .first-page.disabled,
#guac-menu .connection-select-menu .menu-dropdown .menu-contents .pager .prev-page.disabled,
#guac-menu .connection-select-menu .menu-dropdown .menu-contents .pager .next-page.disabled,
#guac-menu .connection-select-menu .menu-dropdown .menu-contents .pager .last-page.disabled {
    filter: brightness(0) invert(1) opacity(.25) !important;
}

#guac-menu .connection-select-menu .menu-dropdown .menu-contents .pager .set-page,
#guac-menu .connection-select-menu .menu-dropdown .menu-contents .pager .more-pages {
    color: var(--mz-text) !important;
}

#guac-menu .connection-select-menu .menu-dropdown .menu-contents .pager .set-page:hover {
    background: var(--mz-surface-hover) !important;
    color: #fff !important;
}

#guac-menu .connection-select-menu .menu-dropdown .menu-contents .pager .set-page.current {
    border-color: var(--mz-border) !important;
    background: var(--mz-accent-soft) !important;
    color: #fff !important;
}