@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css);
@font-face {
    font-family                : 'Poppins', sans-serif;
    src                        : url('https://fonts.googleapis.com/css?family=Poppins:100,300,400,500,700');
}

:root {
    --main-bg                  : black;
    --main-contrast            : white;
    --main-over                : #bc0909;
}
body {
    margin                     : 0 auto;
}
iframe {
    width                      : 100%;
    height                     : 120vh;    
}
.hidden {
    display                    : none !important;
}

.repro {
    font-family                : 'Poppins', sans-serif !important;
    position                   : relative;
    z-index                    : 99999;
}

.full {
    position                   : fixed;
    top                        : 0;
    bottom                     : 0;
    left                       : 0;
    right                      : 0;
    height                     : 100vh;
    background-color           : var(--main-bg);
    color                      : white;
    fill                       : white;
    z-index                    : 9999999;
}
.full .background {
    position                   : absolute;
    top                        : 0;
    bottom                     : 0;
    left                       : 0;
    right                      : 0;
    z-index                    : -1;
    display                    : block;
    background-size            : cover;
    background-position        : center center;
    opacity                    : 0.25;    
    -webkit-filter             : blur(20px);
    -moz-filter                : blur(20px);
    -o-filter                  : blur(20px);
    -ms-filter                 : blur(20px);
    filter                     : alpha(opacity=40);
    -webkit-transition         : all 0.5s ease;
    -moz-transition            : all 0.5s ease;
    -ms-transition             : all 0.5s ease;
    -o-transition              : all 0.5s ease;
    transition                 : all 0.5s ease;
    
}

.full .sidenav {
    height                     : 100%;
    width                      : 0;
    position                   : fixed;
    top                        : 0;
    left                       : 0;
    background-color           : #111;
    overflow                   : hidden;
    margin                     : 0;
    transition                 : 0.5s;
    color                      : #FFF;
}

.full .sidenav .side_title {
    width                       : 100%;
    border-bottom               : 2px solid #FF2224;
    height                      : 40px;
    line-height                 : 40px;
    text-align                  : center;
}
.full .sidenav .history {
    height                      : 910px;
    overflow-y                  : scroll;
    overflow-x                  : hidden;
    margin                      : 0;
    padding                     : 0;
}
.full .sidenav .history .item {
    cursor                     : pointer;
    padding                    : 5px;    
    display                    : -webkit-box;
    display                    : -webkit-flex;
    display                    : -ms-flexbox;
    display                    : flex;    
    align-items                : center;
}
.full .sidenav .history .item .song-img {
    position                   : relative;
    margin-right               : 10px;
    width                      : 70px;
    height                     : 70px;
    -webkit-border-radius      : 5px;
    border-radius              : 5px;
    overflow                   : hidden; 
}

.full .sidenav .history .item .song-img > img {
    width                      : 100%;
    height                     : 100%;
    object-fit                 : cover;
}

.full .sidenav .history .item .song-info {    
    display                    : -webkit-box;
    display                    : -webkit-flex;
    display                    : -ms-flexbox;
    display                    : flex;
    flex                       : 1;
    flex-direction             : column;
    align-items                : stretch;
    min-width                  : 0;
}

.full .sidenav .history .item .song-info .song-name {    
    min-width                  : 0;
    flex                       : 1;
    font-size                  : 0.9rem;
}

.full .sidenav .history .item .song-info .song-artist {    
    display                    : -webkit-box;
    display                    : -webkit-flex;
    display                    : -ms-flexbox;
    display                    : flex;
    flex                       : 1;
    font-size                  : 0.65rem;
}
.full .contract {
    position                   : absolute;
    top                        : 10px;
    right                      : 0;
}

.full .player .header{
    display                    : -webkit-box;
    display                    : -webkit-flex;
    display                    : -ms-flexbox;
    display                    : flex;
    flex-direction             : row;
}


.full .player .header .title {
    display                    : -webkit-box;
    display                    : -webkit-flex;
    display                    : -ms-flexbox;
    display                    : flex;
    flex-direction             : column;
    align-items                : center;
    justify-content            : center;
    width                      : 100%;
    padding-right              : 25px;
}

.full .player .header .title > img {
    width                      : 300px;
    
}
.full .player .card {
    display                    : -webkit-box;
    display                    : -webkit-flex;
    display                    : -ms-flexbox;
    display                    : flex;
    flex-direction             : column;
    align-items                : center;
    flex                       : 1;
    justify-content            : center;
}

.full .player .card img{
    position                   : relative;
    overflow                   : hidden;
    width                      : 350px;
    height                     : 350px;
    margin-bottom              : 20px;
    border-radius              : 6px;
}
.now-listening .now-song  {
    display                    : -webkit-box;
    display                    : -webkit-flex;
    display                    : -ms-flexbox;
    display                    : flex;
    flex-direction             : column;
    align-items                : center;
    flex                       : 1;
    justify-content            : center;
    font-size                  : 1.30rem;
    margin-bottom              : 5px;
}

.now-listening .now-artist {
    display                    : -webkit-box;
    display                    : -webkit-flex;
    display                    : -ms-flexbox;
    display                    : flex;
    flex-direction             : column;
    align-items                : center;
    flex                       : 1;
    justify-content            : center;
    font-size                  : 1rem;
    margin-bottom              : 10px;
}

.mini {
    position                   : fixed;
    bottom                     : 0;
    width                      : 100%;
    background-color           : var(--main-bg);
    color                      : white;
    fill                       : white;
    height                     : 70px;    
    display                    : -webkit-box;
    display                    : -webkit-flex;
    display                    : -ms-flexbox;
    display                    : flex;
}
.mini > div {
    flex-grow                  : 1;
}

.mini > .cover {
    width                      : 33.3333%;
    display                    : -webkit-box;
    display                    : -webkit-flex;
    display                    : -ms-flexbox;
    display                    : flex;
    align-items                : center;
    padding-right              : 15px;
}
.mini > .cover > .cover-img {
    height                     : 70px;
    width                      : 70px;
}
.mini .cover .now-listening {
    margin-left                : 10px;
}
.mini .cover .now-listening .now-song {
    font-size                 : 1rem !important;
    text-align                : left;
    align-items               : stretch;
}

.mini .cover .now-listening .now-artist {
    font-size                 : 0.8rem !important;
    text-align                : left;
    align-items               : stretch;
}

.mini .controllers {
    display                    : -webkit-box;
    display                    : -webkit-flex;
    display                    : -ms-flexbox;
    display                    : flex;
    align-items                : center;
    justify-content            : center;
}

.mini .expander {
    width                      : 33.3333%;
    display                    : -webkit-box;
    display                    : -webkit-flex;
    display                    : -ms-flexbox;
    display                    : flex;
    align-items                : center;
    justify-content            : flex-end;
}


.volume-container {
    position                   : absolute;
    bottom                     : 50px;
    background-color           : var(--main-bg);
    width                      : 40px;
    height                     : 170px;
    border-radius              : 8px;
    border                     : 1px solid gray;
    margin-right               : 100px;

}

.card .controllers .volume-container {
    top                        : 360px !important;
    
}

.volume-container > input[type=range] {
    -webkit-appearance         : none ;
    width                      : 100%;
    height                     : 150px;
    cursor                     : pointer;
    background                 : var(--main-contrast);
    margin-right               : 2px;
    margin                     : 10px 0;
    
}
.volume-container > input[type=range]::-webkit-slider-thumb {
    -webkit-appearance         : none;
    width                      : 10px;
    height                     : 10px;
    border-radius              : 10px;    
    cursor                     : pointer;
    background                 : #fff;
    margin-right               : -5px;
    
    
}
.volume-container > input[type=range]::-webkit-slider-runnable-track {
    width                      : 6px;
}



.volume-container > input[type=range][orient=vertical]{
    writing-mode               : bt-lr; /* IE */
    -webkit-appearance         : slider-vertical; /* WebKit */
}

.button {
    cursor                      : pointer;
    background-color            : transparent;
    border                      : none;
    width                       : 4em;
    height                      : 4em;
    border-radius               : 50%;
    text-align                  : center;
    line-height                 : 2em;
    outline                     : none;  
    
}

.button > i {
    line-height                 : 2.2em;
    color                       : var(--main-contrast);
}

.btn-circle:hover {
    background-color            : var(--main-over);
    -webkit-transform           : scale(0.925);
    -moz-transform              : scale(0.925);
    -ms-transform               : scale(0.925);
    -o-transform                : scale(0.925);
    transform                   : scale(0.925);
    box-shadow                  : 0 0 0 1px var(--main-over);
    opacity                     : .5;
    -webkit-transition          : box-shadow 0.2s ease;
    -moz-transition             : box-shadow 0.2s ease;
    transition                  : box-shadow 0.2s ease;
    -webkit-backface-visibility : hidden;
    backface-visibility         : hidden; 
}

.btn-circle-permanent {
    background-color            : var(--main-over);
    -webkit-transform           : scale(0.925);
    -moz-transform              : scale(0.925);
    -ms-transform               : scale(0.925);
    -o-transform                : scale(0.925);
    transform                   : scale(0.925);
    box-shadow                  : 0 0 0 1px var(--main-over);
    -webkit-transition          : box-shadow 0.2s ease;
    -moz-transition             : box-shadow 0.2s ease;
    transition                  : box-shadow 0.2s ease;
    -webkit-backface-visibility : hidden;
    backface-visibility         : hidden; 
}

i {
    color                       : white;
    font-size                   : 25px;
}
.dialog-container {
    display                    : -webkit-box;
    display                    : -webkit-flex;
    display                    : -ms-flexbox;
    display                    : flex;
    flex-direction             : column;
    align-items                : center;
}
.dialog-container > .cover-img {
    width                      : 70%;
}

.dialog-container > .now-song {
    font-size                  : 1em;
    font-weight                : bold;
    margin                     : 10px 0 
}
.dialog-container > .now-artist {
    font-size                  : 0.8em;
    font-weight                : bold;
    margin                     : 0 0 20px 0;
}
.socials > .button {
    width                      : 2.5em;
    height                     : 2.5em;
}
.socials > .button > i {
    line-height                : 1.5em;
}
.btn-facebook, .btn-facebook:hover {
    background-color           : #4267B2;
    border                     : 1px solid #4267B2;
}

.btn-twitter, .btn-twitter:hover {
    background-color           : #1DA1F2;
    border                     : 1px solid #1DA1F2;
}

.btn-whatsapp, .btn-whatsapp:hover {
    background-color           : #25D366;
    border                     : 1px solid #25D366;
}

@media (max-width: 600px){
    .mini {
        height                   : 120px !important;
    }
    .mini > .cover, .mini > .controllers, .mini > .expander{
        display                  : none;
    } 
    .mini > .micro {
        display                    : -webkit-box;
        display                    : -webkit-flex;
        display                    : -ms-flexbox;
        display                    : flex;
        height                     : inherit;
    }

    .mini > .micro > .background {
        background-size            : cover;
        background-position        : center center;
        opacity                    : 0.25;    
        -webkit-filter             : blur(20px);
        -moz-filter                : blur(20px);
        -o-filter                  : blur(20px);
        -ms-filter                 : blur(20px);
        filter                     : alpha(opacity=40);
        -webkit-transition         : all 0.5s ease;
        -moz-transition            : all 0.5s ease;
        -ms-transition             : all 0.5s ease;
        -o-transition              : all 0.5s ease;
        transition                 : all 0.5s ease;
        width                      : 100%;
    }

    .mini > .micro > .expander {
        position                   : absolute;
        right                      : 0;
        z-index                    : 99999;
    }

    .mini > .micro > .expander > button > i {
        font-size                  : 1.3em;
        text-shadow                : 2px 2px 4px #000000;
    }

    .mini > .micro > .cover-img {
        height                    : 120px;
        width                     : 120px;
        -webkit-mask-image: linear-gradient(to right, transparent 5%, black 80%);
        mask-image: linear-gradient(to right, transparent 5%, black 80%);
    }
    .mini > .micro > .column-info{
        position                  : absolute;
        display                    : -webkit-box;
        display                    : -webkit-flex;
        display                    : -ms-flexbox;
        display                    : flex;
        flex-direction             : column;
        width                      : 80%;
        margin-top                 : 10px;
    }
    .mini > .micro > .column-info > .now-listening > .now-song {
        font-size                  : 1em;
    }

    .mini > .micro > .column-info > .now-listening > .now-artist {
        font-size                  : 0.8em;
    }
    .mini > .micro > .column-info > .controllers > button {
        width                      : 3.5em;
        height                     : 3.5em;
    }

    .mini > .micro > .column-info > .controllers > button > i {
        font-size                  : 1.2em; 
    }
    .full > .player > .header > .title {
        width                      : 90%;
        margin-right               : 20px;
    }
    .full > .player > .header > .title > img {
        width                      : 240px;
    }
    .ui-dialog {
        top                        : 120px !important;
        left                       : 10px !important;
        width                      : 90vw !important;
    }
}

@media (min-width : 600px){
    .micro {
        display                 : none;
    }
}