/**
 * FWD Pop Audio Player PACKAGED v:1.0
 * Global CSS.
 * @author Tibi - FWDesign [https://fwdapps.net/]
 * Copyright © Since 2006 All Rights Reserved.
 */



/* ###############################################
 * Import main font. 
 * #############################################*/
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');


/* ###############################################
 * Font icon. 
 * #############################################*/
@font-face {
    font-family: 'fwdpopicon';
    src:  url('fonts/fwdpopicon.eot?w9rz1w');
    src:  url('fonts/fwdpopicon.eot?w9rz1w#iefix') format('embedded-opentype'),
      url('fonts/fwdpopicon.ttf?w9rz1w') format('truetype'),
      url('fonts/fwdpopicon.woff?w9rz1w') format('woff'),
      url('fonts/fwdpopicon.svg?w9rz1w#fwdpopicon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
  
.fwdpopicon,
[class^="fwdpopicon-"]:before,
[class*=" fwdpopicon-"]:before {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'fwdpopicon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
  
.fwdpopicon-playlist-close:before {
    content: "\e919";
}
  
.fwdpopicon-like-empty:before {
    content: "\e900";
}
  
.fwdpopicon-like-full:before {
    content: "\e901";
}
  
.fwdpopicon-linkedin:before {
    content: "\e902";
}
  
.fwdpopicon-loop:before {
    content: "\e903";
}
  
.fwdpopicon-next:before {
    content: "\e904";
}
  
.fwdpopicon-open:before {
    content: "\e905";
}
  
.fwdpopicon-pause:before {
    content: "\e906";
}
  
.fwdpopicon-pinterest:before {
    content: "\e907";
}
  
.fwdpopicon-play:before {
    content: "\e908";
}
  
.fwdpopicon-playback-speed:before {
    content: "\e909";
}
  
.fwdpopicon-playlist:before {
    content: "\e90a";
}
  
.fwdpopicon-prev:before {
    content: "\e90b";
}
  
.fwdpopicon-reddit:before {
    content: "\e90c";
}
  
.fwdpopicon-share:before {
    content: "\e90d";
}
  
.fwdpopicon-shuffle:before {
    content: "\e90e";
}
  
.fwdpopicon-tumblr:before {
    content: "\e90f";
}
  
.fwdpopicon-twitter:before {
    content: "\e910";
}
  
.fwdpopicon-volume:before {
    content: "\e911";
}
  
.fwdpopicon-volume-off:before {
    content: "\e912";
}
  
.fwdpopicon-blogger:before {
    content: "\e913";
}
  
.fwdpopicon-buffer:before {
    content: "\e914";
}
  
.fwdpopicon-close:before {
    content: "\e915";
}
  
.fwdpopicon-digg:before {
    content: "\e916";
}
  
.fwdpopicon-error:before {
    content: "\e917";
}
  
.fwdpopicon-facebook:before {
    content: "\e918";
}


/* ###############################################
 * General. 
 * #############################################*/
.fwdds-error-window{
    background: #FFF !important;
}

.fwdpop-error-window-text{
    font: 400 16px Roboto, Arial !important;
    padding: 7px 21px 9px 23px !important;
    color: #000 !important;
}

.fwdpopicon-error{
    position: relative !important;
    top: 5px !important;
    left: -5px !important;
    margin: 0 1px 0 0 !important;
    color: #F00 !important;
}

.fwdpopicon-error:before{
  font-size: 26px !important;
}


/* ###############################################
 * Payer controls. 
 * #############################################*/
.fwdpop-controls{
  width: 100% !important;
  height: 80px;
}

.fwdpop-right-line-separator{
    width: 17px !important;
    height: 28px !important;
}

.fwdpop-right-line-separator-in{
    width: 1px !important;
    height: 9px !important;
    top: calc(50% - 4px) !important;
    left: calc(50% - 1px) !important;
}

.fwdpop-controls.compact .fwdpop-right-line-separator{
    height: 32px !important;
}

.fwdpop-controls.compact .fwdpop-right-line-separator-in{
    height: 12px !important;
    top: calc(50% - 5px) !important;
}


/* Artwork. */
.fwdpop-artwork{
    width: 56px !important;
    height: 56px !important;
    border-radius: 100% !important;
}


/* Artist and title. */
.fwdpop-title{
    display: inline-block !important;
    font-family: 'Inter' !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    line-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.fwdpop-artist{
    display: inline-block !important;
    font-family: 'Inter' !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.fwdpop .artist-tooltip-background,
.fwdpop .title-tooltip-background{
    border-radius: 8px !important;
}

.fwdpop .title-tooltip-background .title-tooltip-pointer{
   
}

.fwdpop .title-tooltip-text{
    display: inline-block !important;
    font-family: 'Inter' !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    line-height: 16px !important;
    margin: 0 !important;
    padding: 15px 15px !important;
}

.fwdpop .artist-tooltip-text{
    display: inline-block !important;
    font-family: 'Inter' !important;
    font-style: normal !important; 
    font-weight: 400 !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    line-height: 10px !important;
    margin: 0 !important;
    padding: 15px 15px !important;
}


/* Like button. */
.fwdpop-like-button{
    width: 28px !important;
    height: 28px !important;
}

.fwdpop-like-button .fwdpopicon-like-empty,
.fwdpop-like-button .fwdpopicon-like-full{
    font-size: 22px !important;
}

.fwdpop-like-button .fwdpop-first-button span,
.fwdpop-like-button .fwdpop-second-button span{
    position: relative !important; 
    top: calc(50% - 11px) !important;
    left: calc(50% - 11px) !important;
}

.fwdpop-like{
    font-family: 'Inter' !important;
    font-style: normal !important;
    font-weight: 900 !important;
    font-size: 9px !important;
    line-height: 10px !important;
    border-radius: 10px !important;
    padding: 2px 5px !important;
}


/* Playback rate speed button. */
.fwdpop-playback-speed-button{
    width: 24px !important;
    height: 28px !important;
}

/* Center buttons. */
.fwdpop-play-pause-button{
    width: 32px !important;
    height: 32px !important;
}

.fwdpop-play-pause-button .fwdpopicon-play,
.fwdpop-play-pause-button .fwdpopicon-pause{
    font-size: 32px !important;
}

.fwdpop-play-pause-button .fwdpop-first-button span,
.fwdpop-play-pause-button .fwdpop-second-button span{
    position: relative !important;
    top: calc(50% - 16px) !important;
    left: calc(50% - 16px) !important;
}

.fwdpop-controls.compact .fwdpop-play-pause-button{
    width: 45px !important;
    height: 45px !important;
}

.fwdpop-controls.compact .fwdpop-play-pause-button .fwdpopicon-play,
.fwdpop-controls.compact .fwdpop-play-pause-button .fwdpopicon-pause{
    font-size: 45px !important;
}

.fwdpop-controls.compact .fwdpop-play-pause-button .fwdpop-first-button span,
.fwdpop-controls.compact .fwdpop-play-pause-button .fwdpop-second-button span{
    position: relative !important;
    top: calc(50% - 22px) !important;
    left: calc(50% - 23px) !important;
}

.fwdpop-prev-button,
.fwdpop-next-button,
.fwdpop-shuffle-button,
.fwdpop-loop-button{
    width: 19px !important;
    height: 28px !important;
}

.fwdpop-controls.compact .fwdpop-prev-button,
.fwdpop-controls.compact .fwdpop-next-button,
.fwdpop-controls.compact .fwdpop-shuffle-button,
.fwdpop-controls.compact .fwdpop-loop-button{
    width: 32px !important;
    height: 30px !important;
    font-size: 22px !important;
}

.fwdpop-controls.compact .fwdpop-prev-button span,
.fwdpop-controls.compact .fwdpop-next-button span,
.fwdpop-controls.compact .fwdpop-shuffle-button span,
.fwdpop-controls.compact .fwdpop-loop-button span{
    top: calc(50% - 11px) !important;
    left: calc(50% - 10px)!important;
}


/* Right buttons. */
.fwdpop-share-button,
.fwdpop-close-button,
.fwdpop-play-pause-close-button,
.fwdpop-volume-button,
.fwdpop-playback-speed-button,
.fwdpop-playlist-button{
    width: 24px !important;
    height: 28px !important;
}

.fwdpop-play-pause-close-button .fwdpopicon-pause,
.fwdpop-play-pause-close-button .fwdpopicon-play{
    font-size: 18px;
    top: 4px !important;
}

.fwdpop-play-pause-close-button-visualizer{
    width: 10px !important;
    height: 10px !important;
}

.fwdpop-first-button span,
.fwdpop-second-button span{
    position: relative !important; 
    top: calc(50% - 8px) !important;
    left: calc(50% - 8px) !important;
}

.fwdpop-controls.compact .fwdpop-share-button,
.fwdpop-controls.compact .fwdpop-close-button,
.fwdpop-controls.compact .fwdpop-volume-button,
.fwdpop-controls.compact .fwdpop-playback-speed-button,
.fwdpop-controls.compact .fwdpop-playlist-button,
.fwdpop-controls.compact .fwdpop-play-pause-close-button{
    width: 30px !important;
    height: 32px !important;
    font-size: 22px !important;
}

.fwdpop-controls.compact .fwdpop-play-pause-close-button .fwdpopicon-pause,
.fwdpop-controls.compact .fwdpop-play-pause-close-button .fwdpopicon-play{
    font-size: 26px !important;
}

.fwdpop-controls.compact .fwdpop-share-button span,
.fwdpop-controls.compact .fwdpop-volume-button span,
.fwdpop-controls.compact .fwdpop-playback-speed-button span,
.fwdpop-controls.compact .fwdpop-playlist-button span{
    top: calc(50% - 11px) !important;
    left: calc(50% - 10px)!important;
}

.fwdpop-controls.compact .fwdpop-close-button .fwdpopicon-close{
    top: calc(50% - 10px) !important;
    left: calc(50% - 10px)!important;
}

.fwdpop-controls.compact .fwdpop-close-button .fwdpopicon-open{
    top: calc(50% - 11px) !important;
    left: calc(50% - 10px)!important;
}

.fwdpop-controls.compact .fwdpop-play-pause-close-button span{
    top: calc(50% - 12px) !important;
    left: calc(50% - 13px)!important;
}


/* ###############################################
 * Playlist. 
 * #############################################*/
.fwdpop-playlist-visualizer{
    width: 10px !important; 
    height: 10px !important; 
    margin-right: 4px !important;
    top: -1px !important;
}

.fwdpop-scrollbar-track,
.fwdpop-scrollbar-handler-in{
    border-radius: 8px !important;
}


/* ###############################################
 * Share. 
 * #############################################*/
.fwdpop-share .share-window{
    width: 164px !important;
    border-radius: 8px !important;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1) !important;
}

.fwdpop-share .share-window .share-window-text{
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    line-height: 25px !important;
    text-align: center !important;
    padding: 13px 0 10px !important;
}

.fwdpop-share .share-button{
    margin: 0 16px 10px 0 !important;
}

.fwdpop-share .share-window-pointer{
    box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.1) !important;
}

.fwdpop-share .share-button:nth-child(3n) {
    margin-right: 0 !important;
}

.fwdpop-share .share-button .button{
    position: relative !important;
    cursor: pointer !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 18px !important;
}

.fwdpop-share .share-window-buttons-holder{
    padding: 15px 18px 2px !important
}

.fwdpop-share .fwdpopicon-facebook{
    position: absolute !important;
    top: 4px !important;
    left: 4px !important;
}

.fwdpop-share .share-button .selected.facebook{
}

.fwdpop-share .fwdpopicon-twitter{
    position: absolute !important;
    top: 4px !important;
    left: 5px !important;
}

.fwdpop-share .share-button .selected.twitter{
}

.fwdpop-share .fwdpopicon-linkedin{
    position: absolute !important;
    top: 4px !important;
    left: 5px !important;
}

.fwdpop-share .share-button .selected.linkedin{
}

.fwdpop-share .fwdpopicon-tumblr{
    position: absolute !important;
    top: 4px !important;
    left: 4px !important;
}

.fwdpop-share .share-button .selected.tumblr{
}

.fwdpop-share .fwdpopicon-pinterest{
    position: absolute !important;
    top: 4px !important;
    left: 4px !important;
}

.fwdpop-share .share-button .selected.pinterest{
}

.fwdpop-share .fwdpopicon-reddit{
    position: absolute !important;
    top: 4px !important;
    left: 4px !important;
}

.fwdpop-share .share-button .selected.reddit{
}

.fwdpop-share .fwdpopicon-buffer{
    position: absolute !important;
    top: 4px !important;
    left: 4px !important;
}

.fwdpop-share .share-button .selected.buffer{
}

.fwdpop-share .fwdpopicon-digg{
    position: absolute !important;
    top: 4px !important;
    left: 4px !important;
}

.fwdpop-share .share-button .selected.digg{
}

.fwdpop-share .fwdpopicon-blogger{
    position: absolute !important;
    top: 4px !important;
    left: 4px !important;
}

.fwdpop-share .share-button .selected.blogger{
}


/* ###############################################
 * Volume and playback speed scrubbers. 
 * #############################################*/
.fwdpop .volume-scrubber-background,
.fwdpop .volume-scrubber-progress{
    border-radius: 8px !important;
}

.fwdpop .volume-scrubber-holder{
    border-radius: 16px !important;
    /* box-shadow: 0px 1px 4px rgba(255, 255, 255, 0.1); */
}

.fwdpop .volume-scrubber-tooltip-background{
    border-radius: 4px !important;
    box-shadow: 0px 1px 4px rgba(255, 255, 255, 0.1) !important;
}

.fwdpop .volume-scrubber-tooltip-pointer{
    box-shadow: 2px -2px 5px rgba(255, 255, 255, .1) !important;
}

.fwdpop .volume-scrubber-tooltip-pointer.right{
    box-shadow: -2px 4px 5px rgba(255, 255, 255, .1) !important;
}

.fwdpop .volume-scrubber-tooltip-text{
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 11px !important;
    padding: 6px 10px !important;
}


/* ###############################################
 * Main scrubber.
 * #############################################*/
.fwdpop .main-scrubber-background,
.fwdpop .main-scrubber-progress{
    border-radius: 8px !important;
}

.fwdpop .main-scrubber-tooltip-background{
    border-radius: 8px !important;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1) !important;
}

.fwdpop .main-scrubber-tooltip-pointer{
    box-shadow: 1px 1px 4px rgba(0, 0, 0, .1) !important;
}

.fwdpop .main-scrubber-tooltip-text{
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 11px !important;
    padding: 6px 10px !important;
}


/* ###############################################
 * Current and total time.
 * #############################################*/
.fwdpop .time{
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 11px !important;
    line-height: 0px !important;
}

.fwdpop .time.current-time{
    padding: 6px 10px 6px 0 !important;
}

.fwdpop .time.current-time.radio{
    padding: 6px !important;
}

.fwdpop .time.total-time{
    padding: 6px 0 6px 10px !important;
}


/* ###############################################
 * GUI. 
 * #############################################*/
.dg.main.a{
    z-index: 999;
    margin:0; 
}

.dg.main.a.closed{
    overflow: visible !important;
}

.dg.main.a.opened{
    overflow: auto;
}

.dg .c{
    width: 50% !important;
}

.dg.a{
    margin: 0 !important;
}

.dg .property-name{
    width: 50% !important;
}

.dg.main.a .slider{
    width: 71%;
    margin-left:0;
}

.dg.main.a .has-slider input[type=text]{
    width: 24% !important;
    padding: 2px !important;
}

.dg.main.a .cr.color input[type=text]{
    padding: 2px 0;
}

.dg .close-button{
  width: 100% !important;
}

.dg > ul{
  height: auto !important;
}

/* Stats. */
.fwdds-imafe-manager > div{
    position: absolute !important;
}


/* Stats. */
.fwdds-imafe-manager > div{
    position: absolute !important;
}

.fwdpop-data-playlist{
 	display: none !important; 
}

.fwdpop-full-width {
	width: 100% !important;
	display: block !important;
}

.fwdpop-full-width #fwdpopDiv0{
	margin: auto !important;
}