/**
 * Ultimate Pro PACKAGED v1.0
 * Main CSS file.
 *
 * @author Tibi - FWDesign [https://webdesign-flash.ro/]
 * Copyright © 2006 All Rights Reserved.
 */


/* Import font used for the player text. */
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Inter:wght@300;400;500;600;700;800&family=Open+Sans:ital,wght@0,300;0,500;0,600;1,300;1,500;1,600&display=swap');

/** 
 * --------------------------------------------------------------------------------
 *  1. VECTOR FONT - used for the vector skin.
 * --------------------------------------------------------------------------------
 */

@font-face {
  font-family: 'fwdsapicon';
  src:  url('fonts/fwdsapicon.eot?kmypr9');
  src:  url('fonts/fwdsapicon.eot?kmypr9#iefix') format('embedded-opentype'),
    url('fonts/fwdsapicon.ttf?kmypr9') format('truetype'),
    url('fonts/fwdsapicon.woff?kmypr9') format('woff'),
    url('fonts/fwdsapicon.svg?kmypr9#fwdsapicon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.fwdsapicon-,
[class^="fwdsapicon-"]:before,
[class*=" fwdsapicon-"]:before {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'fwdsapicon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  display: block;;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fwdsapicon-play-fill:before {
  content: "\e911";
}
.fwdsapicon-pause:before {
  content: "\e914";
}
.fwdsapicon-warning:before {
  content: "\e923";
}
.fwdsapicon-10:before {
  content: "\e900";
}
.fwdsapicon-blogger:before {
  content: "\e901";
}
.fwdsapicon-buffer:before {
  content: "\e902";
}
.fwdsapicon-cast:before {
  content: "\e903";
}
.fwdsapicon-CC:before {
  content: "\e904";
}
.fwdsapicon-CC-off:before {
  content: "\e905";
}
.fwdsapicon-close:before {
  content: "\e906";
}
.fwdsapicon-digg:before {
  content: "\e907";
}
.fwdsapicon-facebook:before {
  content: "\e908";
}
.fwdsapicon-fullscreen:before {
  content: "\e909";
}
.fwdsapicon-iframe-1:before {
  content: "\e90a";
}
.fwdsapicon-image-1:before {
  content: "\e90b";
}
.fwdsapicon-link-1:before {
  content: "\e90c";
}
.fwdsapicon-linkedin:before {
  content: "\e90d";
}
.fwdsapicon-menu-icon:before {
  content: "\e90e";
}
.fwdsapicon-next:before {
  content: "\e90f";
}
.fwdsapicon-normalscreen:before {
  content: "\e910";
}
.fwdsapicon-pinterest:before {
  content: "\e912";
}
.fwdsapicon-play:before {
  content: "\e913";
}
.fwdsapicon-prev:before {
  content: "\e915";
}
.fwdsapicon-reddit:before {
  content: "\e916";
}
.fwdsapicon-settings:before {
  content: "\e917";
}
.fwdsapicon-share:before {
  content: "\e918";
}
.fwdsapicon-sound:before {
  content: "\e919";
}
.fwdsapicon-sound-off:before {
  content: "\e91a";
}
.fwdsapicon-tumblr:before {
  content: "\e91b";
}
.fwdsapicon-twitter:before {
  content: "\e91c";
}
.fwdsapicon-uncast:before {
  content: "\e91d";
}
.fwdsapicon-vimeo-1:before {
  content: "\e91e";
}
.fwdsapicon-watch-later:before {
  content: "\e91f";
}
.fwdsapicon-youtube-1:before {
  content: "\e920";
}
.fwdsapicon-zoomin:before {
  content: "\e921";
}
.fwdsapicon-zoomout:before {
  content: "\e922";
}


/** 
 * --------------------------------------------------------------------------------
 *  2. Player.
 * --------------------------------------------------------------------------------
 */

.fwdsap{
    filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.16));
}

/* Controller .*/
.fwdsap .play-pause-button{
    font-size: 40px !important;
    width: 70px !important;
    height: 70px !important;
}

.fwdsap .play-pause-button .fwdsapicon-play-fill{
    position: relative !important;
    top: -1px !important;
    left: 2px !important;
}

.fwdsap .play-pause-button .fwdsapicon-pause{
    font-size: 40px !important;
    top: 0px !important;
}

.fwdsap .time{
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    text-transform: capitalize;
}

.fwdsap .volume-scrubber-tooltip-background,
.fwdsap .main-scrubber-tooltip-background{
    border-radius: 4px;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
}

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

.fwdsap .volume-scrubber-tooltip-pointer{
   box-shadow: 2px -2px 5px rgba(0, 0, 0, .1);
}

.fwdsap .volume-scrubber-tooltip-pointer.right{
   box-shadow: -2px 4px 5px rgba(0, 0, 0, .1);
}

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

.fwdsap .share-button{
    width: 24px !important;
    height: 24px !important;
    font-size: 24px !important;
    top:  -4px !important;
    left: 3px !important;
}

.fwdsap .sticky-button,
.fwdsap .playback-rate-button,
.fwdsap .volume-button{
    width: 24px !important;
    height: 24px !important;
    font-size: 24px !important;
    top:  -4px !important;
    left: 3px !important;
}

.fwdsap .sticky-button .fwdsapicon-next{
    transform: rotate(90deg);
}


/* Info. */
.fwdsap .artist{
    font-family: 'Inter' !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 15px !important;
    color: #333333;
}

.fwdsap .title{
    font-family: 'Inter' !important;
    font-style: normal !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 19px !important;
    color: #111111;
}

.fwdsap .spearator-line{
    color: #333333;
}


/* Volume scrubber. */
.fwdsap .volume-scrubber-holder{
    border-radius: 8px;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
}


/* Share window and buttons. */
.fwdsap-share .share-window{
    width: 164px;
    border-radius: 8px;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
}

.fwdsap-share .share-window .share-window-text{
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    color: #111111;
    border-bottom: 1px solid #E3E3E3 !important;
    padding: 13px 0 10px !important;
   
}

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

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

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

.fwdsap-share .share-button .button{
    position: relative !important;
    width: 32px;
    height: 32px;
    font-size: 23px;
    background-color:rgba(0,0,0,0);
    color:#1E1E1E;
    transition: all .25s ease-out;
}

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

.fwdsap-share .share-window .button.selected{
    background-color:rgba(0,0,0,.6);
    color:#FFF;
}

.fwdsap-share .fwdsapicon-facebook{
    position: absolute;
    top: 4px;
    left: 4px;
}

.fwdsap-share .share-button .selected.facebook{
    background-color: #1877F2;
}

.fwdsap-share .fwdsapicon-twitter{
    position: absolute;
    top: 4px;
    left: 5px;
}

.fwdsap-share .share-button .selected.twitter{
    background-color: #1DA1F3;
}

.fwdsap-share .fwdsapicon-linkedin{
    position: absolute;
    top: 4px;
    left: 5px;
}

.fwdsap-share .share-button .selected.linkedin{
  background-color: #0A66C2;
}

.fwdsap-share .fwdsapicon-tumblr{
    position: absolute;
    top: 4px;
    left: 4px;
}

.fwdsap-share .share-button .selected.tumblr{
    background-color: #FF8A00;
}

.fwdsap-share .fwdsapicon-pinterest{
    position: absolute;
    top: 4px;
    left: 4px;
}

.fwdsap-share .share-button .selected.pinterest{
    background-color: #FF8A00;
}

.fwdsap-share .fwdsapicon-reddit{
    position: absolute;
    top: 4px;
    left: 4px;
}

.fwdsap-share .share-button .selected.reddit{
    background-color: #F74300;
}

.fwdsap-share .fwdsapicon-buffer{
    position: absolute;
    top: 4px;
    left: 4px;
}

.fwdsap-share .share-button .selected.buffer{
    background-color: #2C4BFF;
}

.fwdsap-share .fwdsapicon-digg{
    position: absolute;
    top: 4px;
    left: 4px;
}

.fwdsap-share .share-button .selected.digg{
    background-color: #2066A3;
}

.fwdsap-share .fwdsapicon-blogger{
    position: absolute;
    top: 4px;
    left: 4px;
}

.fwdsap-share .share-button .selected.blogger{
    background-color: #F74300;
}