:root {
    --invalid-colour: #f44336;
    --warning-colour: #ffcc00;
    --faster-green: #00ad50;
    --smarter-green: #13322b;
    --safer-green: #b7cdc2;
    --flexible-white: #f4f9ed;
    --neutrals-000: #ffffff;
    --neutrals-100: #dfe6db;
    --neutrals-200: #c2cdc2;
    --neutrals-300: #9eada3;
    --neutrals-600: #62786f;
    --neutrals-800: #25423b;
    --neutrals-900: #1a1918;
    --warning-light: #fff4e4;
    --warning-dark: #e86339;
    --error-dark: #ed3241;

    --title-font: "PP Neue Machina Plain Regular";
    --body-font: "Helvetica";
    --font-size-h1: 40px;
    --font-size-h2: 32px;
    --font-size-h3: 24px;
    --font-size-h4: 20px;
    --font-size-xl: 24px;
    --font-size-l: 18px;
    --font-size-m: 16px;
    --font-size-s: 14px;
    --font-size-xs: 12px;
    --font-size-caption: 10px;

    --line-height-factor: 1.5;
    --border-radius: 4px;
    --app-bar-height: var(--mud-appbar-height);

    --tab-panel-padding: 24px;
    --tab-bar-height: 48px;

    --left-panel-width: 320px;
    --right-panel-width: 130px;
    --panel-trigger-overlap: 4px;
}

@font-face {
    font-family: 'PP Neue Machina Plain Regular';
    font-style: normal;
    font-weight: normal;
    src: url('fonts/PPNeueMachina-PlainRegular.otf') format('opentype')
}

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    src: url('fonts/MaterialSymbolsOutlined.woff2') format('woff2');
}

.mud-dialog .mud-dialog-actions {
    justify-content: center;
}

.mud-dialog-title {
    text-transform: uppercase;
}

.mud-button {
    padding: 8px 16px;
    width: fit-content;

    &.mud-width-full {
        width: 100%;
    }
}

.mud-expand-panel-header.validation-errors {
    color: var(--error-dark);
}

.mud-tabs-tabbar {
    --mud-palette-surface: var(--smarter-green);

    .mud-tabs-tabbar-content .mud-tabs-tabbar-wrapper {
        margin-left: 24px;
        gap: 2px;
    }

    .mud-tab {
        font-size: var(--font-size-l);
        font-weight: bold;
        padding: 8px 20px;
        color: var(--flexible-white);
        background-color: var(--neutrals-600);
        border-radius: var(--border-radius) var(--border-radius) 0 0;
        text-transform: none;

        &.mud-tab-active {
            color: var(--faster-green);
            background-color: var(--flexible-white);
        }
    }
}

.mud-icon-root,
.mud-icon-button .mud-icon-root {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 20px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /*font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;*/
}

.mud-input>input.mud-input-root-outlined,div.mud-input-slot.mud-input-root-outlined {
    padding: 14.5px 14px
}

.mud-popover.connection-request-tooltip {
    background-color: transparent;
    
    &.mud-tooltip {
        text-align: left;
        align-items: start;
        justify-content: left;
    }
}

.mud-data-grid .mud-table-cell .column-header {
    font-weight: bold;
}

.mud-snackbar.mud-snackbar-surface {
    background: var(--neutrals-200);
}

body {
    margin: 0;
}

.bold {
    font-weight: bold !important;
}

.all-caps {
    text-transform: uppercase !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--title-font), Arial sans-serif;
}

.body-xl, .body-l, .body-m, .body-s, .body-xs, .body-caption {
    font-family: var(--body-font), Arial sans-serif;
}

h1 {    
    font-size: var(--font-size-h1);
    line-height: calc(var(--font-size-h1) * var(--line-height-factor));
}

h2 {
    font-size: var(--font-size-h2);
    line-height: calc(var(--font-size-h2) * var(--line-height-factor));
}

h3 {
    font-size: var(--font-size-h3);
    line-height: calc(var(--font-size-h3) * var(--line-height-factor));
}

h4 {
    font-size: var(--font-size-h4);
    line-height: calc(var(--font-size-h4) * var(--line-height-factor));
}

.body-xl {
    font-size: var(--font-size-xl);
    line-height: calc(var(--font-size-xl) * var(--line-height-factor));
}

.body-l {
    font-size: var(--font-size-l);
    line-height: calc(var(--font-size-l) * var(--line-height-factor));
}

.body-m {
    font-size: var(--font-size-m);
    line-height: calc(var(--font-size-m) * var(--line-height-factor));
}

.body-s {
    font-size: var(--font-size-s);
    line-height: calc(var(--font-size-s) * var(--line-height-factor));
}

.body-xs {
    font-size: var(--font-size-xs);
    line-height: calc(var(--font-size-xs) * var(--line-height-factor));
}

.body-caption {
    font-size: var(--font-size-caption);
    line-height: calc(var(--font-size-caption) * var(--line-height-factor));
}

.all-caps {
    text-transform: uppercase !important;
}

.underline {
    text-decoration: underline !important;
}

.italic {
    font-style: italic;
}

.text-truncate {
    white-space: nowrap;        /* prevent wrapping to a second line */
    overflow: hidden;           /* hide the overflowed text */
    text-overflow: ellipsis;    /* show “…” when text is clipped */
}

.full-height {
    height: 100%;
}

.full-width {
    width: 100%;
}

.alert {
    padding-top: 5px;
    padding-bottom: 5px;
}

.neutrals-000 {
    color: var(--neutrals-000);
}

.neutrals-100 {
    color: var(--neutrals-100);
}

.neutrals-200 {
    color: var(--neutrals-200);
}

.neutrals-300 {
    color: var(--neutrals-300);
}

.neutrals-600 {
    color: var(--neutrals-600);
}

.neutrals-800 {
    color: var(--neutrals-800);
}

.neutrals-900 {
    color: var(--neutrals-900);
}

.flexible-white {
    color: var(--flexible-white);
}

.alert-danger {
    color: var(--error-dark);
}

.mud-table-row:has(.hidden-child-content-row) {
    display: none;
}

/*Show badges in tab panels next to the text instead of default top-right*/
.mud-tab-panel .mud-tab-badge {
    margin-top: 0.5em;
    margin-left: 12px;
    margin-right: 12px;
}

.no-click {
    cursor: default;
}

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

section.account.login {
    .grid {
        width: 328px;
        background-color: transparent;
    }

    .toggle-password-visibility .mud-input .mud-input-adornment.mud-input-adornment-end {
        cursor: pointer !important;
    }
    
    .caption {
        margin-top: 13px;
    }
    
    .checkbox {
        span.mud-button-root {
            padding: 0;
            margin-right: 4px;
        }
        
        .mud-typography {
            font-size: var(--font-size-caption);
            color: var(--neutrals-000);
        }
    }
    
    .forgot-password {
        display: flex;
    }

    /* EnableAuthenticator shares this section. Constrain the QR <img>
       so the ~600px base64 PNG doesn't blow past the 328px card. */
    img {
        width: 100%;
        max-width: 240px;
        height: auto;
        display: block;
        margin: 8px auto;
        background-color: var(--neutrals-000);
        padding: 8px;
        border-radius: var(--border-radius);
    }
}

section.account.register {
    width: 500px !important;
    
    .left {
        margin-right: 10px;
    }

    .right {
        margin-left: 10px;
    }

    .password-info {
        margin-top: 13px;
    }
}

section.account.reset-password {
    .grid {
        width: 328px;
        background-color: transparent;
    }

    .toggle-password-visibility .mud-input .mud-input-adornment.mud-input-adornment-end {
        cursor: pointer !important;
    }
}

section.app-logo {
    .logo-button {
        width: 125px;
    }
}

section.client {
    --top-panel-height: 64px;
    --left-panel-width: 420px;
    --mud-palette-text-primary: var(--flexible-white);
    --mud-palette-text-secondary: var(--flexible-white);
    --mud-palette-action-default: var(--flexible-white);
    --connection-header-height: 36px;
    --panel-trigger-hover-offset: -25px;
    --panel-trigger-hover-offset-dragging: -10000px;
    --overlap-hidden-factor: -4.15;
    --overlap-hover-factor: -1;

    .transform {
        transition: all 0.3s ease-out;
    }

    .panel-host {
        position: fixed;
        z-index: 1000;
        pointer-events: none;
        
        .panel,
        .panel-trigger {
            pointer-events: auto;
        }

        .trigger-area {
            &::before {
                content: "";
                position: absolute;
                pointer-events: auto;
                z-index: -1;
                top: var(--panel-trigger-hover-offset);
                left: var(--panel-trigger-hover-offset);
                right: var(--panel-trigger-hover-offset);
                bottom: var(--panel-trigger-hover-offset);
            }
    
            &.dragging::before {
                top: var(--panel-trigger-hover-offset-dragging);
                left: var(--panel-trigger-hover-offset-dragging);
                right: var(--panel-trigger-hover-offset-dragging);
                bottom: var(--panel-trigger-hover-offset-dragging);
            }            
        }

        &.open .panel-trigger {
            opacity: 1;
        }
    }

    .panel-host.top {
        top: calc(var(--top-panel-height) * -1);

        .trigger-area {
            top: calc(var(--panel-trigger-overlap) * var(--overlap-hidden-factor));

            &:hover {
                top: calc(var(--panel-trigger-overlap) * var(--overlap-hover-factor));
            }
        }

        &.open {
            top: 0;

            .trigger-area {
                top: calc(var(--panel-trigger-overlap) * var(--overlap-hover-factor));
            }
        }

        .panel {
            height: var(--top-panel-height);
            width: 100vw;
        }
    }

    .panel-host.left {
        left: calc(var(--left-panel-width) * -1);
        
        .trigger-area {
            left: calc(var(--panel-trigger-overlap) * var(--overlap-hidden-factor));

            &:hover {
                left: calc(var(--panel-trigger-overlap) * var(--overlap-hover-factor));
            }
        }

        &.open {
            left: 0;

            .trigger-area {
                left: calc(var(--panel-trigger-overlap) * var(--overlap-hover-factor));
            }
        }

        .panel {
            width: var(--left-panel-width);
            overflow-y: auto;
        }
    }

    .panel-host.right {
        right: calc(var(--right-panel-width) * -1);

        .trigger-area {
            right: calc(var(--panel-trigger-overlap) * var(--overlap-hidden-factor));

            &:hover {
                right: calc(var(--panel-trigger-overlap) * var(--overlap-hover-factor));
            }
        }

        &.open {
            right: 0;

            .trigger-area {
                right: calc(var(--panel-trigger-overlap) * var(--overlap-hover-factor));
            }
        }

        .panel {
            width: var(--right-panel-width);
        }
    }

    /* toggle buttons */
    .trigger-area {
        height: min-content;
        width: min-content;
        position: relative;
    }

    .panel-trigger {
        background-color: var(--neutrals-600);
        border: 1px solid var(--flexible-white);
        border-radius: var(--border-radius);

        button {
            color: var(--flexible-white);
            padding: 2px;
        }
    }

    .panel {
        height: 100vh;
        background-color: var(--smarter-green);
        border-radius: 0;
        padding: 12px;
    }

    main {
        flex: 1;
    }

    @media (min-width: 641px) {
        .page {
            flex-direction: row;
        }
    }

    .expansion-panels {
        --mud-palette-surface: transparent;

        .mud-expand-panel-header {
            padding-left: 16px;
            padding-right: 16px;
        }

        .mud-expand-panel-content {
            padding-left: 16px;
            padding-right: 16px;
        }

        .mud-expand-panel {
            border-radius: 20px;
        }

        .mud-panel-expanded {
            --mud-palette-surface: var(--neutrals-800);
        }
    }
    
    .key {
        background-color: var(--safer-green);
        border-radius: calc(var(--border-radius) * 2);
        border: 2px solid var(--neutrals-600);
        color: var(--smarter-green);
        padding: 6px;
    }

    /* Make the container take up the full viewport */
    .connections-container {
        display: grid;
        width: 100vw;
        height: 100vh;
        gap: 1px; /* Small gap between entries */
        background-color: black;
    }

    /* For 1 connection → fill */
    .connections-container:has(.connection-wrapper:only-child) {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }

    /* For 2 connections → Fullscreen or 50% */
    .connections-container:has(.connection-wrapper:nth-child(2)) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr;
    }

    /* For 3 or more connections → Responsive grid */
    .connections-container:has(.connection-wrapper:nth-child(3)) {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }

    .connections-container:has(.connection-wrapper:nth-child(5)) {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }

    .connections-container:has(.connection-wrapper:nth-child(7)) {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }

    .connections-container:has(.connection-wrapper:nth-child(10)) {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }

    .connections-container:has(.connection-wrapper:nth-child(13)) {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }

    .connections-container:has(.connection-wrapper:nth-child(17)) {
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }

    .connections-container:has(.connection-wrapper:nth-child(21)) {
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(5, 1fr);
    }

    /* Connection Wrapper */
    .connection-wrapper {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--flexible-white);
        background-color: var(--flexible-white);
        position: relative;
        overflow: hidden;
        border-radius: var(--border-radius);
    }

    /* Header styling */
    .connection-header {
        /* Sit above the auth/error overlays (z-index 20) so minimize/maximize/close stay clickable. */
        position: relative;
        z-index: 30;
        height: var(--connection-header-height);
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--neutrals-600);
        background-color: var(--flexible-white);
        padding: 8px;
        border-radius: var(--border-radius) var(--border-radius) 0 0;
        cursor: pointer;
        transition: background-color 0.3s;

        .close-button {
            background: none;
            border: none;
            color: var(--neutrals-600);
            cursor: pointer;
            padding: 0;
        }
        
        &.focused {
            color: var(--flexible-white);
            background-color: var(--neutrals-600);

            .close-button {
                color: var(--flexible-white);
            }
        }
    }

    /* Content area for external manipulation */
    .connection-content {
        width: 100%;
        height: 100%;
        background-color: white;
        position: relative;
        
        .progress-bar {
            --radius: 20px;
            position: absolute;
            left: calc(50% - var(--radius));
            top: calc(50% - var(--radius));
            width: calc(2 * var(--radius));
            height: calc(2 * var(--radius));
        }
    }

    .connection-content:focus {
        outline: none;
    }

    /* Overlay for state message */
    .state-overlay {
        position: absolute;
        bottom: 5px;
        right: 5px;
        background-color: rgba(0, 0, 0, 0.6);
        color: white;
        padding: 5px;
        font-size: var(--font-size-xs);
        border-radius: 3px;
        z-index: 10;
        pointer-events: none;
    }

    .state-overlay.session-expire-warning {
        background-color: var(--warning-dark)
    }

    .state-overlay.session-expire-critical {
        background-color: var(--error-dark);
    }

    .mud-overlay.auth-banner .mud-overlay-content {
        --mud-palette-text-primary: var(--neutrals-000);
        background-color: var(--neutrals-600);
        color: var(--mud-palette-text-primary);
        width: 100%;
    }
    
    .mud-overlay.error-banner .mud-overlay-content {
        --mud-palette-text-primary: var(--neutrals-000);
        background-color: color-mix(in srgb, var(--error-dark) 75%, black);
        color: var(--mud-palette-text-primary);
        width: 100%;
    }

    /* Monitor page: the remote stream renders at the primary session's
       native resolution and is letter-/pillar-boxed inside the container.
       Use the page palette colour behind the letterbox instead of stark
       white so it matches the Recording page aesthetic. */
    &.monitor .connection-content {
        background-color: var(--flexible-white);
    }
}

section.client-layout {
    .page {
        position: relative;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }
}

section.connection-card {
    --border: 1px solid var(--safer-green);
    --border-radius: 8px;
    --height: 218px;

    .card {
        width: 275px;
        height: var(--height);
        position: relative;
        background-color: transparent;
        border: var(--border);
        border-radius: var(--border-radius);

        .mud-card-content {
            width: 100%;
            height: 100%;
            padding: 0;
            border-radius: var(--border-radius);

            .background,
            .foreground {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                border-radius: var(--border-radius);
            }
            
            .background {
                background-color: var(--flexible-white);
            }

            .foreground {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                
                &:not(.no-click) {
                    cursor: pointer;
                }
                
                .top-bar,
                .bottom-bar {
                    padding: 10px 10px 6px 10px;

                    .text {
                        mix-blend-mode: screen;
                        color: var(--flexible-white);
                    }
                }

                .top-bar {
                    background-color: color-mix(in srgb, var(--smarter-green), transparent 50%);
                    border-top-left-radius: var(--border-radius);
                    border-top-right-radius: var(--border-radius);
                }
                
                .bottom-bar .text {
                    mix-blend-mode: difference;
                }
            }

            .skeleton-host {
                background-color: transparent;
                padding: 8px;
            }

            .skeleton-host,
            img {
                height: 100%;
                width: 100%;
                max-height: var(--height);
            }
        }
    }
}

section.connection-request-tooltip {
    .card {
        color: var(--flexible-white);
        background-color: var(--neutrals-600);
    }
    
    .grid {
        width: 284px;
    }
}

section.connection-requests {
    .mud-paper.mud-card.row-details-card {
        background-color: color-mix(in srgb, var(--neutrals-200) 30%, white);
    }
    
    .connection-request-state {
        &.Accepted {
            background-color: #99deb9;
        }
        
        &.Declined {
            background-color: var(--warning-dark);
        }

        &.Expired {
            background-color: #99c5fe;
        }

        &.Requested {
            background-color: #f6c1b0;
        }
    }
}

section.connections-tree-view {
    .tree {
        --actions-opacity: 0;
        min-width: 250px;
        width: 100%;
        
        .mud-treeview-item[hide-expansion-icon] {
            .mud-treeview-item-arrow {
                display: none;
            }
        }

        .mud-treeview-item-selected {
            --actions-opacity: 1;
            border-radius: var(--border-radius);
            background-color: #f6f6f633 !important;
        }

        .mud-treeview-item-content {
            padding: 4px;
            
            button.mud-menu-icon-button-activator {
                padding: 0;
            }
            
            &:hover {
                --actions-opacity: 1;
            }
            
            .actions {
                opacity: var(--actions-opacity);
            }
            .always-visible-actions {
                opacity: 1;
            }
        }
    }
}

section.explicit-message {
    display: flex;
    justify-content: center;
    
    .container {
        background: var(--smarter-green);
        width: fit-content;
        border-radius: calc(var(--border-radius) * 2);
        
        .message {
            color: var(--flexible-white);
        }
        
        .home-link {
            
        }
    }
}

section.file-list {
    .mud-table-dense * .mud-table-row .mud-table-cell {
        padding: 6px 12px 6px 8px;
        
        &:first-child {
            padding-left: 0;
        }
        
        &:last-child {
            padding-right: 0;
        }
    }
    
    .no-files {
        border-radius: var(--border-radius);
        background-color: var(--smarter-green);
    }
    
    .mud-breadcrumb-separator {
        padding: 0 6px;
    }
    
    section.file-upload {
        width: 100%;
    }
}

section.home {
    .panel.left {
        --mud-palette-text-primary: var(--flexible-white);
        --mud-palette-text-secondary: var(--flexible-white);
        --mud-palette-action-default: var(--flexible-white);
        padding: var(--tab-bar-height) 24px 0 24px;
    }

    .panel.right {
        --mud-palette-action-default: var(--smarter-green);
        --mud-palette-divider: var(--smarter-green);
        
        padding-top: var(--tab-bar-height);
        
        .active-sessions {
            background-color: var(--neutrals-200);
            height: 100%;

            button.mud-menu-icon-button-activator {
                padding: 0;
            }
        }
    }
    
    .drop-container {
        display: flex;
        flex-wrap: wrap;
        flex-grow: 1;
    }
    
    .drop-zone {
        display: flex;
        flex-wrap: wrap;
        gap: 32px;
    }
    
    .drop-zone-item {
        width: min-content;
    }
}

section.home-layout {    
    .mud-main-content {
        padding-top: 0;
    }
    
    /* layout container */
    .layout {
        display: flex;
        height: 100vh;
        position: relative;  /* panels are absolute-positioned */
        overflow: hidden;
    }
    
    /* animation */
    .transform {
        transition: all 0.3s ease-out;
    }

    /* toggle buttons */
    .trigger-area {
        height: min-content;
        width: min-content;
        position: absolute;
        z-index: 10;
    }

    .panel-trigger {
        position: relative;
        top: 15vh;

        background-color: var(--neutrals-600);
        border: 1px solid var(--flexible-white);
        border-radius: var(--border-radius);

        button {
            color: var(--flexible-white);
            padding: 2px;
        }
    }

    /* panels */
    .panel-host {
        .panel {
            position: absolute;
            top: 0;
            bottom: 0;
            background: var(--smarter-green);
            border-radius: 0;
            overflow: auto;

            &.left {
                left: 0;
                width: var(--left-panel-width);

                &.closed {                    
                    transform: translateX(-100%);
                }
            }

            &.right {
                right: 0;
                width: var(--right-panel-width);

                &.closed {
                    transform: translateX(100%);
                }
            }
        }
        
        &.left {
            &.open {
                .trigger-area {
                    left: calc(var(--left-panel-width) * 1);
                }
            }

            &.closed {
                .trigger-area {
                    left: 0;
                }
            }

            .panel-trigger {
                margin-left: calc(var(--panel-trigger-overlap) * -1);
            }
        }

        &.right {
            &.open {
                .trigger-area {
                    right: calc(var(--right-panel-width) * 1);
                }
            }

            &.closed {
                .trigger-area {
                    right: 0;
                }
            }

            .panel-trigger {
                margin-right: calc(var(--panel-trigger-overlap) * -1);
            }
        }
    }

    /* main content */
    .main {
        flex: 1;
        background-color: var(--flexible-white);
        /* reserve space for both panels when open */
        margin: 0 var(--right-panel-width) 0 var(--left-panel-width);
        
        &.scrollable-content {
            overflow: auto;
            height: calc(100vh - var(--app-bar-height));
        }
        
        &.ml-closed {
            margin-left: 0;
        }
        
        &.mr-closed {
            margin-right:0;
        }
    }
}

section.main-layout {
    .scrollable-content {
        padding: 0;
        overflow-y: auto;
        height: calc(100vh - var(--app-bar-height));
    }
    
    .page {
        position: relative;
        display: flex;
        flex-direction: column;
    }

    main {
        flex: 1;
    }
}

section.nav-menu {
    .mud-drawer {
        padding-top: 50px;
        padding-bottom: 40px;
    }
    
    .mud-nav-item {
        --mud-palette-primary: var(--flexible-white);
        
        .mud-nav-link-text {
            margin-left: unset;
        }
    }

    .mud-nav-item:hover {
        --mud-palette-primary: var(--faster-green);
    }
    
    .version {
        margin-top: 90px;
        margin-bottom: 35px;
    }
}

/* Define the animation */
@keyframes playPauseFade {
    0% {
        opacity: 1;
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

section.recording {
    #player {
        width: 90%;
        margin-left: auto;
        margin-right: auto;

        #display {
            position: relative;
            height: calc(100vh - var(--app-bar-height) - 80px);
        }

        .recording-display {
            margin-left: auto;
            margin-right: auto;
        }

        .notification-container {
            position: absolute;
            z-index: 1;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
        }

        .seek-notification {
            color: white;
            background: rgba(0, 0, 0, 0.75);
            display: none; /* Initially hidden */
            width: 100%;
            height: 100%;

            p {
                display: table-cell;
                text-align: center;
                vertical-align: middle;
                font-family: sans-serif;
            }
        }
        
        .play-notification {
            --icon-size: 6rem;
            color: white;
            display: inline-block;
            position: relative;
            left: calc(50% - (var(--icon-size) / 2));
            top: calc(50% - (var(--icon-size) / 2));
            background: rgba(0, 0, 0, 0.75);
            border-radius: 20%;
            opacity: 0;
            
            .mud-icon-root {
                font-size: var(--icon-size);
            }
        }
        
        .fade {
            animation: playPauseFade 1s ease forwards;
        }

        .seeking .seek-notification {
            display: table;
        }

        .controls {
            #play-pause p {
                display: flex;
            }

            #position-slider {
                margin-left: 12px;
                margin-right: 12px;
            }

            #position,
            #duration {
                font-family: monospace;
            }
        }

        .hide-play-icon {
            .play-icon {
                display: none;
            }
        }

        .hide-pause-icon {
            .pause-icon {
                display: none;
            }
        }
    }
}

section.session-card {
    --border: 1px solid var(--smarter-green);
    --border-radius: 8px;
    --height: 80px;

    .card {
        position: relative;
        width: 100%;
        height: var(--height);
        background-color: transparent;
        border: var(--border);
        border-radius: var(--border-radius);

        .mud-card-content {
            width: 100%;
            height: 100%;
            padding: 0;
            border-radius: var(--border-radius);
            
            .background,
            .foreground {
                position: absolute;
                width: 100%;
                height: 100%;
                border-radius: var(--border-radius);
            }
            
            .foreground {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                cursor: pointer;
                
                .close-button {
                    width: fit-content;
                    margin-left: auto;
                    mix-blend-mode: difference;
                    color: var(--flexible-white);
                }
                
                .bottom-bar {
                    background-color: color-mix(in srgb, var(--smarter-green), transparent 50%);
                    border-bottom-left-radius: var(--border-radius);
                    border-bottom-right-radius: var(--border-radius);
                    padding-left: 4px;
                    
                    .text {
                        mix-blend-mode: screen;
                        color: var(--flexible-white);
                    }
                }
            }

            .skeleton-host {
                background-color: transparent;
                padding: 8px;
            }

            .skeleton-host,
            img {
                height: 100%;
                width: 100%;
                max-height: var(--height);
            }
        }
    }
}

section.session-disclaimer {
    label.mud-checkbox {
        --mud-typography-body1-size: var(--font-size-s);
        --mud-typography-body1-lineheight: calc(var(--font-size-s) * var(--line-height-factor));
    }
}

section.session-user-feedback {
    .content {
        max-height: 500px;
        width: 400px;
    }
}

section.settings {
    &.connections {
        .mud-expand-panel-header {
            font-size: var(--font-size-m);
            font-weight: bold;
            line-height: calc(var(--font-size-m) * var(--line-height-factor));
        }

        .mud-expansion-panels .mud-collapse-wrapper {
            padding: 10px 30px 40px 30px;
        }
    }
}

section.unauthenticated-layout {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    background-color: var(--smarter-green);
    background-image: url('progress_bar.png'), url('progress_bar.png'), url('progress_bar.png');
    background-repeat: no-repeat;
    background-position: left 19%, right 36%, 53% 90%;
    background-size: 415px 40px;
    height: 100vh;

    .page {
        border-radius: var(--border-radius);
        /*position: relative;*/
        background: linear-gradient(89.48deg, #13322B -14.45%, #28B360 522.75%);
        align-content: center;
        align-self: center;
        align-items: center;
        padding: 42px 0;

        .application-title {
            color: var(--neutrals-100);
        }

        .content {
            margin-top: 10px;
            padding: 10px 52px;
        }
    }

    body main {
        background-color: transparent;
    }

    .action-button {
        margin-top: 38px;
    }

    .account-question {
        margin-top: 30px;
    }

    .label-spacing {
        margin-top: 33px;
    }

    .input-spacing {
        margin-top: 8px;
    }

    .label {
        color: var(--neutrals-000);
    }
}

section.user {
    .mud-expansion-panel > .mud-collapse-container > .mud-collapse-wrapper {
        padding: 10px 30px 40px 30px;
    }
    
    .permission-level-select {
        width: 350px;
    }
    
    .tree .limit-click {
        pointer-events: none;
        
        .mud-treeview-item-arrow,
        .mud-input-control {
            pointer-events: auto;
        }
    }
}

section.user-menu {
    .container {
        --mud-palette-text-primary: var(--flexible-white);
    }
    
    .activator {
        background-color: var(--neutrals-800);
        min-width: 225px;
        padding: 8px;
        
        &.open {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            
            .name {
                color: var(--faster-green);
            }
        }
        
        .avatar {
            --mud-palette-text-primary: var(--neutrals-300);
        }
        
        .state-icon {
            color: var(--flexible-white);
        }
    }
}

.user-menu.menu-items {
    --mud-palette-text-primary: var(--flexible-white);
    --mud-palette-action-default: var(--faster-green);

    background-color: var(--neutrals-800);
    padding: 8px;
    border-radius: 0 0 var(--border-radius) var(--border-radius);

    .mud-list-item-clickable {
        color: var(--flexible-white);
        border-radius: var(--border-radius);
    }
    
    .divider {
        --mud-palette-divider: var(--faster-green);
    }

    .logout-button.mud-button-text.mud-button-text-primary:hover {
        background-color: var(--mud-palette-action-default-hover);
    }
    
    .logout-button {
        justify-content: start;
        width: 100%;
        padding: 2px 4px;
        --mud-palette-primary: var(--flexible-white);
        
        /*&.hover {*/
        /*    --mud-palette-primary-hover: var(--mud-palette-action-default-hover);*/
        /*    background-color: var(--mud-palette-action-default-hover) !important;*/
        /*}*/
        
        .mud-button-label {
            margin-top: 4px;
            margin-bottom: 4px;
        }
        
        .mud-button-icon-start {
            margin-left: unset;
            margin-right: 12px;
            
            .mud-icon-root {
                color: var(--mud-palette-action-default) !important;
            }
        }
    }
}

.no-shadow {
    box-shadow: none;
}