/**
 * Image VIsualizer Audio Player PACKAGED v:1.0
 * Global CSS.
 * @author Tibi - FWDesign [https://webdesign-flash.ro/]
 * Copyright © Since 2024 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: 'fwdivapicon';
    src:  url('fonts/fwdivapicon.eot?w9rz1w');
    src:  url('fonts/fwdivapicon.eot?w9rz1w#iefix') format('embedded-opentype'),
      url('fonts/fwdivapicon.ttf?w9rz1w') format('truetype'),
      url('fonts/fwdivapicon.woff?w9rz1w') format('woff'),
      url('fonts/fwdivapicon.svg?w9rz1w#fwdivapicon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
  
.fwdivapicon,
[class^="fwdivapicon-"]:before,
[class*=" fwdivapicon-"]:before {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'fwdivapicon' !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;
}
  
.fwdivapicon-blogger:before {
    content: "\e900";
}

.fwdivapicon-buffer:before {
    content: "\e901";
}

.fwdivapicon-check:before {
    content: "\e902";
 }

.fwdivapicon-digg:before {
    content: "\e903";
}

.fwdivapicon-error:before {
    content: "\e904";
}

.fwdivapicon-facebook:before {
    content: "\e905";
}

.fwdivapicon-help:before {
    content: "\e906";
}

.fwdivapicon-linkedin:before {
    content: "\e907";
}

.fwdivapicon-loop:before {
    content: "\e908";
}

.fwdivapicon-pause:before {
    content: "\e909";
}
.fwdivapicon-pinterest:before {
    content: "\e90a";
}

.fwdivapicon-play:before {
    content: "\e90b";
}
.fwdivapicon-playback-speed:before {
    content: "\e90c";
}

.fwdivapicon-reddit:before {
    content: "\e90d";
}

.fwdivapicon-right:before {
    content: "\e90e";
}

.fwdivapicon-share:before {
    content: "\e90f";
}

.fwdivapicon-shuffle:before {
    content: "\e910";
}
.fwdivapicon-tumblr:before {
    content: "\e911";   
 }

 .fwdivapicon-twitter:before {
    content: "\e912";
 }

.fwdivapicon-volume:before {
    content: "\e913";
}

  .fwdivapicon-volume-off:before {
    content: "\e914";
}

  .fwdivapicon-warning:before {
    content: "\e915";
}
  


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

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

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

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


/* ###############################################
 * Payer controls. 
 * #############################################*/
.fwdivap-controls{
  width: 100% !important;
}

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

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

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

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


/* Artist and title. */
.fwdivap-title-and-artist-holder{
    width: 100% !important;
    max-width: calc(100% - 20px) !important;
}

.fwdivap-title{
    font-family: 'Inter' !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 60px !important;
    line-height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: rgba(0, 0, 0, .4) !important;
}

.fwdivap-artist{
    font-family: 'Inter' !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 36px !important;
    line-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: rgba(0, 0, 0, .4) !important;
}


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

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

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


/* Right buttons. */
.fwdivap-share-button{
    width: 32px !important;
    height: 32px !important;
}

.fwdivap-share-button .fwdivapicon-share{
    font-size: 28px !important;
}

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


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

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


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

.fwdivap-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

.fwdivap .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.
 * #############################################*/
.fwdivap .main-scrubber-background,
.fwdivap .main-scrubber-progress{
    border-radius: 8px !important;
}

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

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

.fwdivap .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.
 * #############################################*/
.fwdivap .time{
    font-family: 'Inter', sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 11px !important;
    line-height: 0px !important;
}

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

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

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


/* ###############################################
 * GUI. 
 * #############################################*/
/* 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. */
  .fwdss-mesh-manager > div{
    position: absolute !important;
  }

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