body {
                font-family: sans-serif;
                background: #121212;
                color: #e0e0e0;
                padding: 0px;
                padding-top: 0px;
                scrollbar-width: thin;
                /* auto | thin | none */
                scrollbar-color: #80808059 #0000001c;
                /* <thumb-color> <track-color> */
                overflow: hidden;
        }

        a {
                color: #bd56ca;
                text-decoration: none;
        }

        a:hover {
                color: #58bbfd;
                text-decoration: underline;

        }

        a:visited {
                color: #9e4583;
        }

        #app {
                display: flex;
                height: 90vh;

        }

        .imgPreview {
                position: fixed;
                inset: 0;
                background: rgba(0, 0, 0, 0.7);
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 9999;

        }

        .imgPreview img {
                position: relative;
                max-width: 90vw;
                max-height: 90vh;
                display: flex;
                align-items: center;
                justify-content: center;
                background: transparent;
        }

        .appgrid {
                display: grid;
                grid-column: 1;
                grid-row: 1;
        }

        #status {
                padding: 10px;
                margin-bottom: 10px;
                border-radius: 5px;
                font-weight: bold;
        }

        .online {
                background: #1b5e20;
                color: #c8e6c9;
        }

        .offline {
                background: #b71c1c;
                color: #ffcdd2;
        }

        #chat-container {
                grid-area: 1 / 4 / 6 / 5;
                height: 100%;
                width: 33%;
                display: flex;
                flex-direction: column;
        }

        #chat-box {
                height: 100%;
                background: #1a1a1a;

                overflow-y: auto;
                border: 1px solid #333;
                font-family: monospace;

                box-shadow: inset 0 0 10px #2f2f2f;
                background-image: linear-gradient(#242424, #131313);
                margin-left: 1;
        }

        .msg {
                margin-bottom: 5px;
                border-bottom: 1px solid #222;
                padding-bottom: 2px;
        }

        .system {
                color: #888;
                font-style: italic;
        }

        .chat-msg {
                margin-bottom: 10px;
                border-bottom: 1px;
                max-width: 100%;
                line-break: auto;
                background: #40417b;
                padding: 10px;
                border-radius: 10px;

        }

        .chatimg {
                max-width: 100%;
                max-height: 500px;
        }

        .user-label {
                color: #4fc3f7;
                font-weight: bold;
        }

        input {
                padding: 10px;
        }

        button {
                color: rgb(133, 133, 133);
                font-family: media;
                font-size: 30px;
                cursor: pointer;
                background: #3949ab;
                border: none;
                border-radius: 4px;
                font-weight: bold;
                z-index: 1;
        }

        button.topbar {
                font-size: 4vh;
                margin: 1vh;
                font-weight: normal;
        }

        button.active {
                color: white;
        }

        button:hover {
                background: #303f9f;
        }

        .controls {
                height: 8vh;

                display: flex;
                gap: 10px;
                flex-wrap: wrap;
                box-shadow: inset 0 0 10px #000000;
                border: 1px solid #333;
                background: linear-gradient(#1a1a1a, #242424);
        }

        /* Video Grid */
        #focused-video {
                height: 54vh;
                display: block;
        }

        #videogrid_small {
                gap: 10px;
                position: relative;
                display: flex;

                flex-wrap: wrap;
                justify-content: center;
        }

        #video-grid {
                animation: rotate 120s linear infinite;
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                width: 100%;
                grid-area: 1 / 1 / 6 / 4;
                overflow: scroll;
                border-top: #333 1px solid;
                border-bottom: #333 1px solid;
                border-left: #333 1px solid;
                background: linear-gradient(var(--angle), #440d31, #664784);
        }

        .video-card {
                grid-row: 2;
                position: relative;
                width: 300px;
                height: 200px;
                background: #171717;
                border: 2px solid #333;
                -webkit-box-shadow: -9px 7px 36px 7px rgba(0, 0, 0, 0.36);
                box-shadow: -9px 7px 36px 7px rgba(0, 0, 0, 0.36);
                border-radius: 8px;
                overflow: hidden;
                align-items: center;
                border: 3px solid transparent;
                transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        video {
                width: 100%;
                height: 100%;
                object-fit: cover;
                max-height: 200px;
                z-index: 2;
                position: absolute;
        }

        .label {
                position: absolute;
                bottom: 5px;
                left: 5px;
                background: rgba(0, 0, 0, 0.6);
                z-index: 3;
                padding: 2px 6px;
                border-radius: 4px;
                font-size: 0.8em;
        }

        .avatar {
                width: 200px;
                height: 200px;
                border-radius: 25%;
                border: 2px solid #333;
                margin-left: 15%;
                position: absolute
        }

        .speaking-highlight {
                border-color: #00ff00;
                /* Neon Green */
                box-shadow: 0 0 15px rgba(0, 255, 0, 0.6);
        }

        #mobile_alert {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                backdrop-filter: blur(5px);
                -webkit-backdrop-filter: blur(5px);
                background: #00000062;
                color: #ffffff;
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 9999;


        }

        .chat-tray {
                grid-area: 1 / 4 / 6 / 5;
                height: 100%;

        }

        .VolumeSlider {
                position: absolute;
                z-index: 10;
                display: none;
                left: 20%;
                top: 4%;

        }

        .mic-icon {
                filter: invert(100%) brightness(100%) contrast(100%) opacity(50%);
                position: absolute;
                top: 0;
                left: 0;
                width: 40px;
                height: 40px;
                padding: 3px;
        }

        .close-x {
                right: 0;
                top: 0;
                position: absolute;
                user-select: none;
                z-index: 2;
        }

        .VolumeSlider.is-visible {
                display: block;
        }

        .body::-webkit-scrollbar-track {
                background: #5f5f5f60;
                /* color of the track */
                border-radius: 10px;
        }

        .body::-webkit-scrollbar-thumb {
                background: #858585;
                /* color of the thumb */
                border-radius: 10px;
        }


        @keyframes rotate {
                to {
                        --angle: 360deg;
                }
        }

        @property --angle {
                syntax: "<angle>";
                initial-value: 0deg;
                inherits: false;
        }

        @font-face {
                font-family: 'media';
                /* Define a name for the font */
                src: url('./multimedia icons.woff') format('woff');
                /* Specify the path and format of the font */
        }

        /*********** Baseline, reset styles ***********/
        input[type="range"] {
                -webkit-appearance: none;
                appearance: none;
                background: transparent;
                cursor: pointer;
                width: 12rem;
        }

        /* Removes default focus */
        input[type="range"]:focus {
                outline: none;
        }

        /******** Chrome, Safari, Opera and Edge Chromium styles ********/
        /* slider track */
        input[type="range"]::-webkit-slider-runnable-track {
                background-color: #cecece70;
                border-radius: .5rem;
                height: 0.5rem;
        }

        /* slider thumb */
        input[type="range"]::-webkit-slider-thumb {
                -webkit-appearance: none;
                /* Override default look */
                appearance: none;
                margin-top: -4px;
                /* Centers thumb on the track */
                background-color: #e8e8e8;
                border-radius: 0.5rem;
                height: 1rem;
                width: 1rem;
                box-shadow: 0 0 10px #2f2f2f;
        }


        /*********** Firefox styles ***********/
        /* slider track */
        input[type="range"]::-moz-range-track {
                background-color: #cecece70;
                border-radius: .5rem;
                height: 0.5rem;
        }

        /* slider thumb */
        input[type="range"]::-moz-range-thumb {
                background-color: #e8e8e8;
                border: none;
                /*Removes extra border that FF applies*/
                border-radius: 0.5rem;
                height: 1rem;
                width: 1rem;
                box-shadow: 0 0 10px #2f2f2f;
        }