.modal-container{font-family:Helvetica;opacity:80%;z-index:100;position:fixed;top:0;left:0;width:100%;height:100vh;display:flex;justify-content:center;align-items:center;background-color:#474f58b3;font-size:15px;font-weight:700;color:#62626e}.modal-content-1{font-family:Helvetica;top:70px;position:fixed;z-index:102;width:16%;height:90%;margin-left:82%;display:flex;flex-direction:column;border:1px solid #3f4f6a;border-radius:10px;box-shadow:0 2px 2px #00000080;background-color:#202225}.modal-content-2{font-family:Helvetica;top:50px;position:fixed;z-index:102;width:50%;height:90%;margin-left:23%;display:flex;flex-direction:column;border:1px solid #3f4f6a;border-radius:10px;box-shadow:0 2px 2px #00000080;background-color:#202225}.modal-content-3{font-family:Helvetica;top:50px;position:fixed;z-index:102;width:15%;height:50%;margin-left:3%;display:flex;flex-direction:column;border:1px solid #3f4f6a;border-radius:10px;box-shadow:0 2px 2px #00000080;background-color:#202225}.modal-header{color:#fff;padding:18px 10px 0 20px;height:38px;font-size:15px;position:relative}.cross-btn{color:#fff;padding:0;margin:0;background:transparent;border:0;position:absolute;right:10px;font-weight:700;cursor:pointer}.modal-body{color:#fff;flex-grow:1;border-top:solid 1px #3f4f6a;padding:14px 29px 14px 19px}.modal-footer{color:#fff;border-top:solid 1px #3f4f6a;padding:10px 20px;display:flex;height:5%}.close-btn{font-weight:600;box-shadow:#00000059 0 2px 2px;background-color:#4d90ff;color:#f7f8fa;height:35px;width:117px;font-size:14px;border-radius:3px;border-width:1px;border-style:solid;border-color:#2b7bff;cursor:pointer}.hljs{color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-keyword,.hljs-formula{color:#c678dd}.hljs-section,.hljs-name,.hljs-selector-tag,.hljs-deletion,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-string,.hljs-regexp,.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string{color:#98c379}.hljs-attr,.hljs-variable,.hljs-template-variable,.hljs-type,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-number{color:#d19a66}.hljs-symbol,.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-title{color:#61aeee}.hljs-built_in,.hljs-title.class_,.hljs-class .hljs-title{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}.modal-overlay{position:fixed;top:2em;left:0;width:100vw;height:100vh;background-color:#00000080;display:flex;justify-content:center;align-items:center}.modal-content{background:white;padding:20px;border-radius:8px;width:600px;height:37em;max-height:80vh;overflow-y:auto}.SearchInput{height:auto;border:1px solid black;border-radius:10px}.UploadInput{height:auto}.video-library{display:flex;flex-wrap:wrap}.video-library div{margin:10px}._noAutocomplete_mo06h_1{color:#999;margin:8px}._container_mo06h_6{position:relative;height:200px}._clear_mo06h_11{position:absolute;width:30px;height:100%;top:0;right:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#a9a9a9}._absolute_mo06h_24{position:absolute;bottom:-20px;color:red}._autocomplete_mo06h_30{margin-top:7px;position:absolute;border:1px solid #999;max-height:609px;overflow-y:auto;background-color:#f8f8f8;width:100%;border-radius:10px;z-index:1;list-style:none;padding:0}._autocomplete_mo06h_30 li{margin-top:5px;margin-left:10px}._autocomplete_mo06h_30>._active_mo06h_53,._autocomplete_mo06h_30 li:hover{background-color:#fff;cursor:pointer}.slider-container{--progress-bar-height: 7px}.slider-container{position:absolute;bottom:34px;width:100%}.audio-player{width:293px}.slider-container:before{content:"";background-color:#fff6;width:100%;height:15px;display:block;position:absolute;border-radius:10px;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.progress-bar-cover{background-color:#686cb9;width:0%;height:var(--progress-bar-height);display:block;position:absolute;border-radius:10px;top:50%;transform:translateY(-50%);z-index:1;user-select:none;pointer-events:none}.range{-webkit-appearance:none;background-color:#f0090965;height:25px;width:100%;cursor:pointer;opacity:0;margin:0 auto}.slider-container{--thumb-width: 10px;--thumb-height: 10px}.range::-webkit-slider-thumb{width:var(--thumb-width);height:var(--thumb-height);background:#350f2d;border:1px solid #000000;border-radius:50%;cursor:pointer;-webkit-appearance:none}.thumb{width:var(--thumb-width);height:var(--thumb-height);box-shadow:0 0 5px #000000c0;z-index:3;background:rgb(255,255,255);position:absolute;border-radius:50%;top:50%;transform:translateY(-50%);pointer-events:none;user-select:none}.btn-container{display:flex;margin-left:14px;width:50px;height:50px;flex-grow:1}.btn-play{width:0;height:0;border-style:solid;border-width:10px 0 10px 15px;border-color:transparent transparent transparent #ffffff;cursor:pointer}.btn-stop{height:20px;width:4px;border-left:10px solid rgb(255,255,255);border-right:10px solid rgb(255,255,255);cursor:pointer}.control-panel{padding:15px 0;display:flex;justify-content:space-between}.timer{font-size:10px;font-weight:200;color:#c4c4c4}.btn--icon{border-radius:100%;padding:8px;width:40px;height:40px}.track-card{display:flex;overflow:hidden}.track-card__username{color:#7d7e7f;font-size:rem(13px);overflow:hidden;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.track-card__title{font-size:rem(15px);font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.track-card__actions{display:flex;height:40px;color:#5d5e5f;fill:#4d4e4f;font-size:rem(13px);line-height:40px}.track-card__actions .cell{display:flex;align-items:center;transform:translate(0)}.track-card__actions .cell>a{display:flex}.track-card__actions .cell>a:visited{fill:#4d4e4f}.track-card__actions .cell>span{margin-left:6px}.track-card__actions .cell .icon--headset{margin-top:1px}.track-card__actions .btn--icon:active{background:rgba(0,0,0,.2)}.track-card__actions .btn--icon:hover{fill:#78797a}//===================================== // Compact Layout //------------------------------------- .track-card--compact{flex-direction:column;margin-bottom:30px;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid #18191a;padding-top:20px;.track-card__image{position:relative;height:auto;background:#171819;&:before{content:"";float:left;padding-top:100%}img {position: absolute;}}.track-card__main{position:relative;background:#1d1e1f;&:before{content:"";float:left;padding-top:61.8%}}.track-card__timeline{border-bottom:1px solid rgba(0,0,0,.1);height:9px;background:#171819}.track-card__username{margin:6px 15px 0;font-size:rem(13px);line-height:(20px / 13px)}.track-card__title{margin:0 15px;color:#bdbebf;font-size:rem(14px);line-height:(20px / 14px);.has-line-clamp &{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;word-wrap:break-word}}.track-card__actions{position:absolute;left:0;bottom:10px;width:100%;.cell:last-of-type{margin-left:auto;margin-right:15px}}}//===================================== // Full Layout //------------------------------------- .track-card--full{margin-bottom:20px;height:220px;background:#1d1e1f;.track-card__image{align-self:flex-start;width:220px}.track-card__main{flex:1;border-left:4px solid rgba(0,0,0,.1);padding:14px 20px 0 16px;overflow:hidden}.track-card__username{line-height:(18px / 13px)}.track-card__title{margin-bottom:22px;color:#bdbebf;line-height:(19px / 15px)}.track-card__actions{.cell{width:120px;&:first-of-type{width:140px}}}}.video-player{position:relative;margin:0 auto}.controls{position:absolute;bottom:3px;left:0;width:100%;height:40px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}.controls button,.controls input[type=range],.controls span{color:#fff;font-size:16px;margin-right:10px;border:none;background-color:transparent;cursor:pointer;outline:none}.controls button:hover,.controls input[type=range]:hover{color:#686cb9}.controls button.active{color:#0cf}.controls input[type=range]{-webkit-appearance:none;width:100%;height:10px;border-radius:5px;background-color:#fff}.controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;background-color:#0cf;cursor:pointer}.controls input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background-color:#0cf;cursor:pointer}.controls span{font-weight:700}.controls .active-icon{color:#0cf}.controls .inactive-icon{color:#fff;opacity:.5}.App{background-color:#eee;width:100vw;height:100vh}.search-bar-container{padding-top:38vh;width:40%;margin:auto;display:flex;flex-direction:column;align-items:center;min-width:200px}.input-wrapper{margin-top:15em;position:absolute;z-index:15;width:100%;height:2.5rem;border:none;border-radius:10px;padding:0 15px;box-shadow:0 0 8px #ddd;background-color:#fff;display:flex;align-items:center}input{background-color:transparent;border:none;height:100%;font-size:1.25rem;width:100%}input:focus{outline:none}#search-icon{color:#4169e1}.results-list{position:absolute;z-index:15;margin-top:19em;width:100%;background-color:#fff;display:flex;flex-direction:column;box-shadow:0 0 8px #ddd;border-radius:10px;max-height:300px;overflow-y:auto}.search-result{padding:10px 20px}.search-result:hover{background-color:#efefef}._noAutocomplete_gznw1_1{color:#999;margin:8px}._container_gznw1_6{position:relative;height:100%}._clear_gznw1_11{position:absolute;width:30px;height:100%;top:0;right:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#a9a9a9}._absolute_gznw1_24{position:absolute;bottom:-20px;color:red}._autocomplete_gznw1_30{margin-top:7px;position:absolute;border:1px solid #999;max-height:609px;overflow-y:auto;background-color:#f8f8f8;width:100%;border-radius:10px;z-index:1;list-style:none;padding:0}._autocomplete_gznw1_30 li{margin-top:5px;margin-left:10px}._autocomplete_gznw1_30>._active_gznw1_53,._autocomplete_gznw1_30 li:hover{background-color:#fff;cursor:pointer}.Dropdown-btn{margin:2rem 3rem;padding:.3rem;background-color:#612bdf;width:8rem;height:3rem;border:none;border-radius:10%;cursor:pointer;box-shadow:5px 5px #fff}.Dropdown-btn:hover{background-color:#df2ba3}.dropdown{position:relative}.dropdown-menu{position:absolute;top:19%;left:7%;background:rgb(221,74,74);box-shadow:0 0 8px #a093931a}.dropdown-menu ul{list-style:none;padding:.2rem;margin:0}.dropdown-menu ul li{padding:8px 12px;cursor:pointer}.dropdown-menu ul li:hover{background:#f8f8f8}.side-menu-container{padding:20px;color:#b3b3b3;margin-top:5em}.user-library-header{font-weight:300;text-transform:uppercase;font-family:Proxima Thin,Georgia,sans-serif;font-size:13px;margin:0;padding:0 0 5px;letter-spacing:1px}.side-menu-item{list-style-type:none;line-height:28px;font-size:14px;width:140px;cursor:pointer;text-overflow:ellipsis;white-space:nowrap}.side-menu-item:hover{color:#fff}.radio{margin-bottom:20px}.side-menu-container .active{margin-left:-3px}.side-menu-container .active:before{content:"";border-left:3px solid #1db954;position:relative;left:-18px}.user-playlist-container{padding:20px 20px 280px;color:#b3b3b3;margin:0}.user-playlist-header{font-weight:300;text-transform:uppercase;font-family:Proxima Thin,Georgia,sans-serif;font-size:13px;margin:0;padding:0 0 5px;letter-spacing:1px}.user-playlist-item{list-style-type:none;line-height:28px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:140px;cursor:pointer}.user-playlist-item:hover{color:#fff}.user-playlist-container .active{margin-left:-3px}.user-playlist-container .active:before{content:"";border-left:3px solid #1db954;position:relative;left:-18px}.volume-container{position:absolute;top:48px;right:10px}.volume{-webkit-appearance:none;width:120px;height:5px;background:#4CAF50;border-radius:4px;outline:none;opacity:1}input[type=range]::-moz-range-track{width:120px;height:5px;background:#4CAF50;border-radius:4px;outline:none;opacity:1}.volume-container .fa-volume-up{position:relative;top:3px;margin-right:5px}.volume:hover{opacity:.8;background:#4CAF50}.volume::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;background:#fff;cursor:pointer;border-radius:50%}._audioPlayer_vvlp6_8{--primary: #f40082;--secondary: #ffd200;align-items:center;display:flex;width:700px}._forwardBackward_vvlp6_17{background:none;border:none;display:flex;align-items:center;font-family:monospace;font-size:16px;cursor:pointer}._forwardBackward_vvlp6_17:hover{color:var(--primary)}._playPause_vvlp6_31{background:var(--primary);border:none;border-radius:50%;width:75px;height:75px;font-size:32px;color:var(--secondary);display:flex;justify-content:center;align-items:center}._play_vvlp6_31{position:relative;left:5px}._currentTime_vvlp6_49,._duration_vvlp6_50{font-family:monospace;font-size:16px}._currentTime_vvlp6_49{margin-left:25px}._progressBar_vvlp6_59{--bar-bg: #ffe3d4;--seek-before-width: 0;--seek-before-color: #ffc2a1;--knobby: #3452a5;--selectedKnobby: #26c9c3;appearance:none;background:var(--bar-bg);border-radius:10px;position:relative;width:100%;height:11px;outline:none}._progressBar_vvlp6_59::-webkit-slider-runnable-track{background:var(--bar-bg);border-radius:10px;position:relative;width:100%;height:11px;outline:none}._progressBar_vvlp6_59::-moz-range-track{background:var(--bar-bg);border-radius:10px;position:relative;width:100%;height:11px;outline:none}._progressBar_vvlp6_59::-moz-focus-outer{border:0}._progressBar_vvlp6_59:before{content:"";height:11px;width:var(--seek-before-width);background-color:var(--seek-before-color);border-top-left-radius:10px;border-bottom-left-radius:10px;position:absolute;top:0;left:0;z-index:2;cursor:pointer}._progressBar_vvlp6_59::-moz-range-progress{background-color:var(--seek-before-color);border-top-left-radius:10px;border-bottom-left-radius:10px;height:11px}._progressBar_vvlp6_59::-webkit-slider-thumb{-webkit-appearance:none;height:15px;width:15px;border-radius:50%;border:none;background-color:var(--knobby);cursor:pointer;position:relative;margin:-2px 0 0;z-index:3;box-sizing:border-box}._progressBar_vvlp6_59:active::-webkit-slider-thumb{transform:scale(1.2);background:var(--selectedKnobby)}._progressBar_vvlp6_59::-moz-range-thumb{height:15px;width:15px;border-radius:50%;border:transparent;background-color:var(--knobby);cursor:pointer;position:relative;z-index:3;box-sizing:border-box}._progressBar_vvlp6_59:active::-moz-range-thumb{transform:scale(1.2);background:var(--selectedKnobby)}.footer{position:fixed;border-top:1px solid #494949;width:100%;bottom:0;left:0;background:rgb(40,40,40);height:90px;z-index:2}html{--textColor1: rgb(245, 245, 245);--textColor1Hover: #ffffff;--textColor2: rgb(175, 175, 175);--textColor2Hover: #ffffff;--textColor3: rgb(225, 225, 225);--textColor3Hover: #ffffff;--navTextColor: rgba(255, 255, 255, .5);--navTextColorActive: rgba(255, 255, 255, 1);--backgroundImgSize: cover;--backgroundImgRepeat: no-repeat;--navigationbarBackground: #0d1013f0;--videoContainerBackgroundColor: rgba(0, 0, 0, .04);--popupListsBackground: linear-gradient( rgba(0, 0, 0, .4) 0%, var(--navigationbarBackground) 15% );--subFeedHeaderBorder: #84828245;--refreshButtonBorder: thin solid transparent;--refreshButtonHoverBackground: #0000008e;--refreshButtonHoverColor: #ffffff;--refreshButtonColor: #dcdcdd;--refreshButtonBackground: #00000026;--refreshButtonHoverBorder: 1px solid #00000026;--refreshButtonShadow: 2px 2px 5px 0px rgba(12, 12, 12, .75);--videoBoxShadow: rgba(0, 0, 0, .12) 4px 4px 8px;--newHighlightColor: #ffffff;--footerBackground: rgba(0, 0, 0, .6);--twitterBackground: #1010108c;--scrollbarColors: rgb(51, 51, 51) transparent;--backgroundColor: hsl(0, 0%, 5%);--sidebarsBackgroundColor: rgba(9, 12, 15, .678);--backgroundImgPositionY: center}html[data-theme=dark]{--main1: #101216;--main2: #181a1df6;--main3: rgb(53, 54, 58);--main4: rgb(53, 54, 58);--text1: rgba(255, 255, 255 .7);--backgroundImg: none;--backgroundColor: #101216;--scrollbarColors: #3c4554 transparent;--navigationbarBackground: var(--main2);--navTextColor: var(--text1);--twitterBackground: var(--main2);--videoBoxShadow: rgba(63, 63, 63, .1) 4px 4px 8px}html[data-theme=light]{--backgroundImg: none;--backgroundColor: #f1f1f1;--backgroundImgSize: unset;--backgroundImgRepeat: unset;--textColor1: rgb(10, 10, 10);--textColor1Hover: rgb(24, 24, 24);--textColor2: rgb(32, 32, 32);--textColor2Hover: #464646;--sidebarsBackgroundColor: hsla(0, 0%, 100%, .88);--videoContainerBackgroundColor: rgba(0, 0, 0, 0);--navTextColor: rgb(10, 10, 10);--navigationbarBackground: #ffffffe1;--newHighlightColor: rgb(20, 100, 200);--popupListsBackground: linear-gradient(rgba(255, 255, 255, .65) 0%, #efefef 15%);--refreshButtonBackground: rgb(230, 230, 230);--refreshButtonBorder: thin solid #eeeeee;--refreshButtonColor: #2a2a2a;--refreshButtonHoverBackground: rgb(255, 255, 255);--refreshButtonHoverColor: #1d1d1d;--refreshButtonHoverBorder: 1px solid rgb(255, 255, 255);--scrollbarColors: rgb(41, 41, 41) transparent;--subFeedHeaderBorder: #29292988;--footerBackground: #00000021;--twitterBackground: hsla(0, 0%, 100%, .88)}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}/*!
  Theme: GitHub Dark
  Description: Dark theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Outdated base version: https://github.com/primer/github-syntax-dark
  Current colors taken from GitHub's CSS
*/.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-variable,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id{color:#79c0ff}.hljs-regexp,.hljs-string,.hljs-meta .hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-comment,.hljs-code,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-tag,.hljs-selector-pseudo{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}