:root{--col-1:#111;--col-2:#fc0;--col-3:#0080ff;--col-4:#eaeaea;--col-danger:#ef4444;--col-success:#00c853;--col-warning:#fc0;--col-red:#ff4d4d}body{background-color:var(--col-1);color:var(--col-2)}*,input,textarea,button,select{font-family:sans}a{color:var(--col-4);font-size:12px}.baseForm input{color:var(--col-2);border:1px solid var(--col-3);background-color:#0000;border-radius:5px;margin:5px;padding:10px}.baseForm input:focus{border:1px solid var(--col-3)}.baseForm button{color:#211b46;background-color:var(--col-3);border:1px solid var(--col-3);border-radius:5px;margin:5px;padding:10px}.baseForm button:disabled{background-color:var(--col-1-b)}.baseForm button:active{background-color:var(--col-4)}.baseForm button:focus{border:1px solid var(--col-3)}.mainBase{height:calc(100vh - 20px);overflow:hidden}.mainRoom{max-width:300px;margin:100px auto auto}.formDetail{flex-direction:column;display:flex}.formDetail a{text-align:center}.formDetail .inputFull{flex-direction:column;display:flex}.formDetail .inputFull .errorMessage{color:var(--col-red);text-align:center;font-size:12px}.roundBordered{border:1px solid var(--col-3);border-radius:8px;padding:20px}.formDetail h3{margin:0;padding-left:5px;padding-right:5px}.formDetail p{color:var(--col-4);padding-left:5px;padding-right:5px;font-size:14px;line-height:1.5}.mainRoom h1{text-align:center}.detail_main_room{flex-grow:2;width:100%;display:flex;overflow:hidden}.user_list{border:1px solid var(--col-3);flex-shrink:0;width:200px;overflow:hidden auto}.user_detail{border-bottom:1px solid var(--col-2);background-color:#000;width:100%;position:relative}.user_detail video{object-fit:cover;width:100%;max-width:200px;height:100%;display:block;position:relative}.user_detail .user_header{z-index:999;width:auto;color:var(--col-4);background-color:#0009;padding:5px;position:absolute}.user_view{border:1px solid var(--col-3);flex-grow:2;display:flex}.user_view video{object-fit:contain;width:100%;height:100%}.top_control{flex-wrap:wrap;width:100%;display:flex;position:absolute;bottom:0}.top_control button{box-sizing:border-box;background-color:rgb(from var(--col-1) r g b / .5);color:var(--col-4);border:none;flex-direction:column;flex:calc(16.666% - 16px);align-items:center;padding:20px;display:flex}.top_control button:hover{background-color:rgb(from var(--col-4) r g b / .3)}.top_control button:active{background-color:rgb(from var(--col-4) r g b / .5)}.control_icon{width:36px;height:36px}.device_selector{color:var(--col-4);background-color:#0006;border-radius:20px;align-items:center;padding:5px 15px;display:flex}.device_selector span{margin-right:8px;font-size:1.2em}.device_selector select{color:var(--col-4);cursor:pointer;text-overflow:ellipsis;background:0 0;border:none;outline:none;max-width:150px;font-family:inherit;font-size:.9em}.device_selector select option{background-color:var(--col-1);color:var(--col-4)}.btn_control{background-color:var(--col-3);color:#211b46;cursor:pointer;border:none;border-radius:50%;width:50px;height:50px;font-weight:700;transition:all .2s ease-in-out}.btn_control:hover{background-color:var(--col-4);transform:scale(1.05)}.btn_control.off{background-color:var(--col-red);color:#fff}.chat_panel{border:1px solid var(--col-3);background-color:var(--col-1);flex-direction:column;flex-shrink:0;width:300px;display:flex}.chat_header{border-bottom:1px solid var(--col-3);text-align:center;background-color:#00000080;padding:5px;font-weight:700}.chat_messages{flex-direction:column;flex-grow:1;gap:10px;padding:10px;display:flex;overflow-y:auto}.chat_bubble{background-color:var(--col-1);border:1px solid var(--col-3);border-radius:8px;padding:8px 12px;font-size:.9em}.chat_bubble .chat_sender{color:var(--col-3);margin-bottom:4px;font-size:.8em;font-weight:700}.chat_input_area{border-top:1px solid var(--col-3);background-color:#00000080;padding:10px;display:flex}.chat_input_area input{background-color:var(--col-1);color:var(--col-4);border:1px solid var(--col-3);border-radius:4px;flex-grow:1;padding:8px}.chat_input_area button{background-color:var(--col-3);color:#211b46;cursor:pointer;border:none;border-radius:4px;margin-left:5px;padding:8px 12px;font-weight:700}.grid_view_container{box-sizing:border-box;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));align-content:start;gap:15px;width:100%;height:100%;padding:15px;display:grid;overflow-y:auto}.grid_view_container .user_detail{border:2px solid var(--col-2);aspect-ratio:16/9;border-radius:8px}.grid_view_container .user_detail video{max-width:none}.menuHeader{justify-content:space-between;align-items:center;margin-bottom:5px;padding-bottom:5px;display:flex}.menuHeader h2{color:var(--col-3);margin:0}.menuHeader .submenu{align-items:center;gap:15px;display:flex}.menuTabber{display:flex}.menuTabber .menuTabberDet{text-align:center;border:1px solid var(--col-3);border-bottom:none;flex:1;min-width:0;padding:10px}.menuTabber .menuTabberDet:not(:first-child){border-left:none}.menuTabber .menuTabberDet.active{background-color:var(--col-3)!important}.menuTabber .menuTabberDet a{width:100%;color:var(--col-2);font-size:18px;font-weight:700;text-decoration:none;display:block}.menuTabber .menuTabberDet a:hover{color:var(--col-3)}.menuTabber .menuTabberDet a:active{color:var(--col-1-b)}.flexColumnCenter{flex-direction:column;align-items:center;display:flex}.flexRowCenter{flex-direction:row;align-items:center;display:flex}.roomHeader{width:100%}.roomHeader .subHeader{align-items:center;gap:5px;width:100%;display:flex}.roomHeader .subHeader h3{margin:5px 0}.roomHeader button{background-color:#0000;border:none}.roomHeader button:hover{background-color:rgb(from var(--col-4) r g b / .3)}.roomHeader button:active{background-color:rgb(from var(--col-4) r g b / .5)}.filter-red{filter:brightness(0)saturate()invert(35%)sepia(68%)saturate(3384%)hue-rotate(341deg)brightness()contrast(87%)}.filter-yellow-run,.filter-yellow img{filter:brightness(0)saturate()invert(82%)sepia(54%)saturate(2399%)hue-rotate(357deg)brightness(101%)contrast(108%)}.filter-blue{filter:brightness(0)saturate()invert(36%)sepia(92%)saturate(3000%)hue-rotate(196deg)brightness()contrast(109%)}@media (width<=850px){.hide-sm{display:none}}@media (width<=768px){.detail_main_room .hide_while_panel_open{display:none}.detail_main_room .chat_panel{width:calc(100% - 2px)}}@media (width<=350px){.top_control button{flex:calc(50% - 16px)}}