:root{--text-color: #fff;--text-color-l1: #777777;--hover-overlay: rgba(99, 102, 241, .11);--background-l1: #212125;--radius: 12px;--gold-accent: #e2b539;--border-color: #3b3b42;--scrollbar-color: #3a3c3f;--scrollbar-background: #00000000}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;color:var(--text-color)}html,body{scroll-behavior:smooth;scrollbar-gutter:auto;height:100%;scrollbar-color:var(--scrollbar-color) var(--scrollbar-background);scrollbar-width:thin;font-family:Montserrat,sans-serif}html #root,body #root{min-height:100vh;overflow:hidden;display:flex;flex-direction:column;background:linear-gradient(120deg,#1d1d1d,#000)}button{background-color:transparent;border:0px solid transparent}a{text-decoration:none;transition:all .3s ease;color:inherit}.main-layout{flex:1;display:flex;flex-direction:column}.main-layout .header{height:100px;display:flex;justify-content:center;background-color:#c5c5c503;border-bottom:1px solid rgba(255,255,255,.062745098)}.main-layout .header .header-container{max-width:1200px;width:100%;padding:.5rem 2rem;display:flex;align-items:center;justify-content:space-between}.main-layout .header .header-container .logo{height:60px;border-radius:1rem;border:3px solid #666666}.main-layout .header .header-container .header-auth{color:var(--text-color-l1)}.main-layout .header .header-container .header-auth #userName{margin-left:2px;color:var(--text-color);font-weight:600}.body-center{flex:1;display:flex;align-items:center;justify-content:center}.flex-row{display:flex;flex-direction:row;flex-direction:row!important}.flex-column{display:flex;flex-direction:column}@media(max-width:600px){.flex-column{width:100%}}.d-none{display:none}.switch{position:relative;display:inline-block;width:50px;min-width:50px;height:24px;margin-bottom:0}.switch input{opacity:0;width:0;height:0}.switch input:checked+.slider{background-color:var(--accent)}.switch input:checked+.slider:before{transform:translate(26px)}.switch input:checked+.slider:before .fa-moon{display:none}.switch input:checked+.slider .fa-sun{visibility:hidden;transition:.1s}.switch input:not(:checked)+.slider .fa-moon{visibility:hidden;transition:.1s}.switch .slider{position:absolute;cursor:pointer;padding:0 3px;inset:0;background-color:#8d8d8d;transition:.2s;border-radius:24px;font-size:.9rem;display:flex;justify-content:space-between;align-items:center}.switch .slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;background-color:#fff;transition:.2s;border-radius:50%}.accent-color{color:var(--accent)}.hover:hover{cursor:pointer;transition:all .3s}@media(min-width:600px){.hover:hover{background-color:#00000048!important}}.red-hover:hover{cursor:pointer;transition:all .3s;background-color:#a55353ad!important}.logo-text{font-family:Cinzel Decorative,serif;color:var(--accent);text-shadow:0 0 12px rgba(200,190,140,.6);transition:all .3s ease;letter-spacing:2px}.logo-text:hover{color:#ffd77d;text-shadow:0 0 15px rgba(230,210,150,.8)}.btn{background-color:#4accdd;padding:.5rem 1.2rem;border-radius:.8rem;color:var(--text-color);width:fit-content;cursor:pointer}.btn:hover{background:#319dac}dialog.modal{transition:all .2s ease;border:2px solid var(--border-color);background:var(--background-l1);padding:2rem;height:fit-content;margin:auto;border-radius:10px;text-align:center;position:relative;display:flex;flex-direction:column;gap:1rem}dialog.modal::backdrop{background-color:#3838388c}dialog.modal:not([open]){display:none}dialog.modal .navbar-btn{padding-left:1rem}dialog.modal .close-modal{position:absolute;right:1rem;top:1rem;cursor:pointer;width:1.7rem;height:1.7rem;border-radius:50%;display:flex;align-items:center;justify-content:center}.main-page{flex:1;display:flex;gap:1rem;padding:1.5rem;width:100%;margin:0 auto}@media(max-width:600px){.main-page{flex-direction:column}}.main-page .box{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border-color);height:600px;width:350px;display:flex;flex-direction:column;position:relative}.main-page .box .box-header{padding:15px 10px;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between}.main-page .box .error{display:flex;position:absolute;left:50%;width:90%;text-align:center;justify-content:center;translate:-50%;top:70px;padding:10px;border-radius:10px;background-color:#ce1e1e}.main-page .box .click-overlay{flex:1;background-color:#000000a2;display:flex;justify-content:center;align-items:center;padding:10%;text-align:center;font-size:large}.main-page .box .player-update{position:absolute;bottom:110px;left:50%;width:90%;text-align:center;justify-content:center;translate:-50%;padding:7px;background-color:#0f0f0f;border-radius:20px;border:1px solid var(--border-color)}.main-page .box .box-list{display:flex;flex-direction:column;min-height:0;max-height:100%;height:100%;overflow:auto;scrollbar-width:thin}.main-page .box .box-list .box-list-item{background-color:#00000031;flex-shrink:0;padding:15px 10px;width:100%;text-overflow:ellipsis;overflow:hidden;cursor:pointer}.main-page .box .box-list .box-list-item:hover{background-color:#00000075}.main-page .box .box-list .box-list-item.active{background-color:#22272275}.main-page .box .box-list .box-list-item.room-item{display:flex;justify-content:space-between}.main-page .box .box-list .box-list-item.room-item span:first-child{margin-right:10px}.main-page .box .box-list .box-list-item.room-item span:last-child{margin-left:auto}.main-page .audio-tracker{width:100%;background-color:#000;display:flex;flex-direction:column;padding:10px}.main-page .audio-tracker .tracker-header{display:flex;justify-content:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.main-page .audio-tracker .tracker-header .tracker-header-text{display:inline-block}.main-page .audio-tracker .tracker-header .tracker-header-text.animate{animation:trackerScroll 10s linear infinite alternate}.main-page .audio-tracker .tracker-main{display:flex;gap:.5rem;align-items:center}.main-page .audio-tracker .tracker-main .track-position{display:flex;gap:5px}.main-page .audio-tracker .track-settings{display:flex;justify-content:space-between;padding:0 20px}.main-page .audio-tracker .track-settings .volume-slider{width:100px;padding:10px}@media(max-width:600px){dialog#musicLibrary{padding:10px}}dialog#musicLibrary .modal-header{padding:14px,10px}dialog#musicLibrary .music-library{width:400px;height:800px}@media(max-width:600px){dialog#musicLibrary .music-library{width:100%}}dialog#musicLibrary .music-library .audio-item{padding:10px;background-color:#0000001a;cursor:pointer;display:flex;gap:1rem;justify-content:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}dialog#musicLibrary .music-library .audio-item .audio-id{color:#5f5f5f;font-weight:800}dialog#musicLibrary .music-library .audio-item:hover{background-color:#0000003b}@keyframes trackerScroll{0%{transform:translate(calc(50% - 120px))}to{transform:translate(calc(-50% + 120px))}}.login-body{flex:1;display:flex;align-items:center;justify-content:center}.login-body .form-wrap{display:flex;flex-direction:column;align-items:center;gap:1rem}.login-body .form-wrap .logo img{width:100px;height:100px;border-radius:1rem;border:3px solid #666666}.login-body .form-wrap .message{border:1px solid #858585;background-color:#6666667a;padding:5px 10px;border-radius:8px}.login-body .form-wrap .message.success{border-color:#4ca54c;background-color:#4f854a7a}.login-body .form-wrap .message.error{border-color:#b12c2c;background-color:#a351517a}.login-body .form-wrap .inputs{display:flex;flex-direction:column;gap:.5rem;align-items:flex-end}.login-body .form-wrap .inputs input{width:100%;padding:.8rem .5rem;background-color:transparent;border-radius:var(--radius);border:1px solid var(--border-color);color:var(--text-color);font-size:.9rem}.login-body .form-wrap .inputs input:focus{outline-color:var(--primary);outline-offset:0;outline-style:solid}.login-body .form-wrap .inputs input:focus::placeholder{color:var(--neon-green-l1);font-weight:400}