:root{--background: #f1f1f1;--accent: #ef8d00;--sidebar-width: 300px;--default-font: "Poppins", sans-serif;--admin-panel-aspect-ratio: 2;--small-side-radius: 5%;--large-side-radius: calc( var(--small-side-radius) * var(--admin-panel-aspect-ratio) );--slide-notes-height: 0px;--slide-preview-height: calc(50vw / 1.7777);--button-panel-unit: 50px}*{box-sizing:border-box;-ms-overflow-style:none;scrollbar-width:none;font-family:Poppins,sans-serif}*::-webkit-scrollbar{display:none}body{position:absolute;inset:0;margin:0;background-color:var(--background);padding:0}button{transition:all .2s ease-in-out;cursor:pointer;box-shadow:0 0 #aaa;border:none;border-radius:8px;background-color:#a9a9a9;aspect-ratio:4;color:var(--background)}button:hover{transform:translateY(-2px)}.scroll-shadows{--bgRGB: 241, 241, 241;--bg: rgb(var(--bgRGB));--bgTrans: rgba(var(--bgRGB), 0);--shadow: rgba(41, 50, 56, .5);background:linear-gradient(var(--bg) 30%,var(--bgTrans)) center top,linear-gradient(var(--bgTrans),var(--bg) 70%) center bottom,radial-gradient(farthest-side at 50% 0,var(--shadow),rgba(0,0,0,0)) center top,radial-gradient(farthest-side at 50% 100%,var(--shadow),rgba(0,0,0,0)) center bottom;background-size:100% 40px,100% 40px,100% 14px,100% 14px;background-repeat:no-repeat;background-attachment:local,local,scroll,scroll;max-height:calc(100vh - var(--toggle-switch-height) - 300px);overflow:auto}.spinner{display:inline-block;vertical-align:text-bottom;animation:spin .8s linear infinite;margin-right:8px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;width:16px;height:16px}@keyframes spin{to{transform:rotate(360deg)}}.loader-modal{position:fixed;inset:0;z-index:100;background-color:var(--background)}.loader{display:inline-block;position:fixed;top:calc(50vh - 24px);left:calc(50vw - 24px);animation:rotation 1s linear infinite;box-sizing:border-box;border:5px solid #fff;border-bottom-color:#ff3d00;border-radius:50%;width:48px;height:48px}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#app-container{display:grid;grid-template-columns:min-content 1fr;grid-template-areas:"sidebar main-app";height:100vh;overflow:hidden}#debug-info-div{display:flex;position:fixed;top:0;right:0;flex-direction:column;justify-content:flex-start;align-items:flex-start;background-color:red;padding:10px;color:#fff;font-weight:700}#debug-info-div>p{margin:0}#sidebar{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;transition:max-width .3s ease;padding-top:1em;padding-right:10px;padding-left:10px;width:var(--sidebar-width);max-width:0px;height:100%}#sidebar.open{max-width:var(--sidebar-width);--slide-preview-height: calc(((100vw - var(--sidebar-width)) / 2) / 1.77777)}#sidebar-header-wrapper{display:flex;justify-content:center;align-items:center;min-width:var(--sidebar-width)}#sidebar-header{margin:0 20px;border-bottom:1px solid lightgray;font-size:1.5em;font-family:Poppins,sans-serif}#sidebar-settings-wrapper{width:100%;min-width:var(--sidebar-width)}#sidebar-settings{margin:0 20px;max-height:50vh}#sidebar-settings-list{display:flex;flex-direction:column;padding-inline:0;width:100%}.sidebar-setting{display:flex;justify-content:flex-start;align-items:center;width:100%;list-style:none}.sidebar-setting>span{margin-left:10px;font-size:1em;font-family:Poppins,sans-serif}#sidebar-go-to-slide-wrapper{display:grid;grid-template-areas:"label label" "input button";gap:10px;margin-top:50px;width:100%;max-width:100%}#sidebar-go-to-slide-label{grid-area:label;text-wrap:nowrap}#sidebar-go-to-slide-input{grid-area:input;width:100%}#sidebar-go-to-slide-button{grid-area:button;width:50px;height:100%}#admin-settings-wrapper{box-sizing:border-box;margin:auto 10px 10px;width:100%;height:auto;max-height:50vh}#sidebar:not(.open){padding-right:0;padding-left:0}#sidebar:not(.open) *{visibility:hidden}#admin-panel-wrapper{display:grid;grid-template-rows:repeat(3,var(--button-panel-unit)) calc(var(--button-panel-unit) / 2);grid-template-columns:min-content 1fr;grid-template-areas:"title title" "label input" "button button" "error error";row-gap:10px;justify-content:center;align-items:center;transition:all .3s ease-in-out;box-sizing:border-box;box-shadow:-3px 0 12px #aaa;border:2px solid var(--accent);border-radius:10px;padding:10px;width:100%;max-width:100%;max-height:50vh;overflow-x:hidden;overflow-y:scroll}#admin-settings-wrapper.authenticated #admin-panel-wrapper{grid-template-rows:var(--button-panel-unit) min-content var( --button-panel-unit );grid-template-columns:repeat(4,25%);grid-template-areas:"title title title title" "report report report report" "monitor-button monitor-button button button";aspect-ratio:unset}#admin-settings-wrapper.authenticated #admin-panel-wrapper:has(.vmix-state-wrapper){grid-template-rows:var(--button-panel-unit) repeat(5,min-content);grid-template-areas:"title title title title" "report report report report" "monitor-button monitor-button button button" "vmix-buttons vmix-buttons vmix-buttons vmix-buttons" "vmix-states vmix-states vmix-states vmix-states" "disclaimer disclaimer disclaimer disclaimer"}#admin-panel-wrapper>h3{grid-area:title;width:100%;text-align:left}#admin-panel-wrapper>label{grid-area:label}#admin-panel-wrapper>input,#header-bar-name-input{grid-area:input;border:1px solid darkgray;border-radius:8px}#admin-panel-wrapper>button{grid-area:button;transition:all .2s ease-in-out;cursor:pointer;box-sizing:border-box;margin:3px;box-shadow:0 0 #aaa;border:none;border-radius:8px;aspect-ratio:8;width:calc(100% - 6px);height:var(--button-panel-unit);color:var(--background);font-family:Poppins,sans-serif}#admin-login-button{background-color:#006400}#admin-logout-button{background-color:#8b0000}#admin-panel-wrapper>#admin-monitor-button{grid-area:monitor-button;background-color:#a9a9a9}#admin-monitor-button>svg{margin-left:10px;height:calc(var(--button-panel-unit) / 3);stroke:var(--background);fill:var(--background)}#admin-panel-wrapper>button:hover,#header-bar-name-submit-button:hover{transform:translateY(-2px)}#admin-panel-wrapper>*{font-family:var(--default-font)}#admin-password-field{margin-left:10px;width:calc(100% - 10px)}#admin-login-status-message{grid-area:error;color:red;font-size:.8em}#admin-settings-wrapper:not(.authenticated) #admin-content-wrapper{display:none}#room-report-summary{display:block;grid-area:report;font-size:.8em}#admin-settings-wrapper.authenticated button[id*=vmix]{background-color:#00008b;font-size:.5em}#admin-settings-wrapper.authenticated button[id*=vmix]{margin-right:5px;width:var(--button-panel-unit);height:var(--button-panel-unit)}#vmix-button-wrapper{display:flex;row-gap:5px;grid-area:vmix-buttons!important;flex-wrap:wrap;justify-content:flex-start;align-items:center;padding-left:calc(var(--button-panel-unit) / 2)}#admin-settings-wrapper.authenticated button[id*=vmix].vmix-transition{background-color:#006400;font-size:.5em}#admin-settings-wrapper:not(:has(.vmix-state-wrapper)) .vmix-control-button{display:none}.vmix-state-wrapper{display:flex;grid-area:vmix-states;flex-direction:column;justify-content:flex-start;align-items:stretch}.vmix-state-item{display:grid;grid-template-rows:3em min-content;grid-template-columns:repeat(2,50%);grid-template-areas:"label label" "preview program" "state state";grid-area:vmix-states;margin-top:10px;box-shadow:inset;border:1px solid black;border-radius:6px;padding:5px}.vmix-state-label-wrapper{display:flex;grid-area:label;flex-direction:column;justify-content:center;align-items:flex-start;margin-left:5px;width:100%;font-size:.9em;text-overflow:ellipsis;text-wrap:nowrap}.vmix-state-priority-label{margin:3px 0;font-style:italic;font-size:90%}.vmix-preview-div,.vmix-program-div{display:flex;justify-content:center;align-items:center;transition:color .2s ease;margin:5px;border:1px dashed black;border-radius:4px;height:5em;color:#000;font-weight:700;font-size:.7em}.vmix-preview-div.transitioning,.vmix-program-div.transitioning{color:#0000}.vmix-preview-div{grid-area:preview}.vmix-program-div{grid-area:program}.vmix-state-record-stream-wrapper{display:grid;grid-template-columns:repeat(2,50%);grid-area:state;width:100%;font-size:90%}.vmix-state-record{vertical-align:middle}.vmix-state-record:before,.vmix-state-stream:before{position:relative;top:0;margin-right:5px;font-weight:700;font-size:100%}.vmix-state-record:before{content:"•";color:red}.vmix-state-stream:before{content:"~";color:#006400}.vmix-state-disclaimer{grid-area:disclaimer;margin-top:5px;font-style:italic;font-size:.75em}#slide-control-wrapper{display:grid;grid-template-rows:min-content min-content 1fr;grid-template-columns:repeat(2,1fr);grid-template-areas:"header header" "notes notes" "prev next";grid-area:main-app;box-shadow:-3px 0 12px #aaa;width:100%;height:100%}#slide-control-wrapper:has(#preview-image){grid-template-rows:min-content min-content min-content auto;grid-template-columns:repeat(2,1fr);grid-template-areas:"header header" "preview program" "notes notes" "prev next"}#header-bar{display:grid;grid-template-rows:minmax(75px,min-content);grid-template-columns:75px min-content 1fr;grid-area:header;justify-content:center;align-items:center;background-color:#ba7733;padding-left:2vw;color:#fff;font-weight:500;font-size:2.5vw;line-height:4.5vw;font-family:Segoe UI,Roboto,sans-serif}#logo-wrapper{display:flex;justify-content:center;align-items:center;transition:all .3s ease-in-out;cursor:pointer;box-shadow:0 2px 4px #0003;border-radius:20%;background-image:url(./Lumiicon.svg);background-size:contain;background-repeat:no-repeat;background-origin:content-box;background-color:#ffffffe6;padding:8px;aspect-ratio:1}#logo-wrapper,#header-bar-name-input-wrapper{height:60%}#logo-wrapper:hover{transform:translateY(-3px);box-shadow:0 3px 6px #00000040}#logo-img{margin:auto;height:100%}#header-bar-name-input-wrapper{display:flex;margin-left:20px}#header-bar-name-input-wrapper *{font-family:Poppins,sans-serif}#header-bar-name-input{padding-left:15px;height:100%}#header-bar-name-submit-button{transition:all .2s ease-in-out;cursor:pointer;margin-left:10px;box-shadow:0 0 #aaa;border:none;border-radius:8px;background-color:#a9a9a9;aspect-ratio:4;width:100px;color:var(--background);font-family:Poppins,sans-serif}#connection-message{margin:0 20px 0 auto;padding-left:15px;font-size:clamp(50%,1rem + 2vw,24px);line-height:initial}#preview-image-wrapper{display:flex;grid-area:preview;justify-content:center;align-items:center;width:100%}#preview-image[src*=data]{border:5px dashed green;width:100%;height:auto}#slide-notes-wrapper{grid-area:notes;transition:all .2s ease;background-color:#aaa;height:var(--slide-notes-height);max-height:0px}#slide-control-wrapper:has(#slide-notes-wrapper.open){--slide-notes-height: 100px}#slide-notes-wrapper.open{padding:10px 10px 10px 20px;max-height:var(--slide-notes-height)}#next-slide,#prev-slide{display:flex;justify-content:center;align-items:center;max-height:50vw}#next-slide:active,#prev-slide:active,#next-slide.active,#prev-slide.active{filter:brightness(90%)}#next-slide span,#prev-slide span{cursor:pointer;color:#fff;font-weight:900;font-size:calc(100vh - 75px - var(--slide-notes-height) - var(--slide-preview-height));font-family:Segoe UI,Roboto,sans-serif;line-height:75%;-webkit-user-select:none;user-select:none}#prev-slide{grid-area:prev;background-color:#ba3333}#next-slide{grid-area:next;background-color:#3c8846}@media screen and (min-width: 1200px){#header-bar:has(.modal){grid-template-columns:min-content 1fr}#header-bar-name-input-wrapper.modal{display:flex;position:fixed;top:0;left:0;justify-content:center;align-items:center;z-index:99;margin:auto;width:100vw;height:100vh}.modal:before{position:fixed;top:0;left:0;z-index:-2;background-color:#00000080;width:100vw;height:100vh;content:""}.modal:after{position:fixed;top:39vh;left:35vw;z-index:-1;border:1px solid black;border-radius:10px;background-color:#fff;padding:1vh 10vw 6vh 5vw;content:"Please enter your name.";color:#000;font-size:.5em}*.modal>#header-bar-name-input,*.modal>#header-bar-name-submit-button{height:30px}}@media screen and (max-width: 1200px){#sidebar{display:none}}@media screen and (max-width: 700px){#header-bar{grid-template-rows:repeat(2,50px);grid-template-columns:repeat(2,min-content);margin:0;width:100%}#connection-message{grid-column:span 2;align-self:center;justify-self:center;margin:0;font-size:1.9em;text-wrap:nowrap}#slide-control-wrapper{grid-template-rows:min-content 5fr 1fr;grid-template-columns:1fr;grid-template-areas:"header" "next" "prev";height:100vh}#next-slide,#prev-slide{max-height:unset}}