.sf-player-container {
            width: 100%;
            height: 92px;
            display: flex;
            align-items: center;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin-bottom: 10px;
            box-sizing: border-box; /* Kluczowe: zapobiega puchnięciu kontenera */
        }

        .sf-main-body {
            display: flex;
            align-items: center;
            flex-grow: 1;
            height: 90px;
            background: #fff;
            border: 1px solid #e8e8e8;
            overflow: hidden; /* Odcina wszystko, co wystaje */
            position: relative;
            box-sizing: border-box;
        }

        .sf-controls-block {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 90px;
            height: 100%;
            flex-shrink: 0;
            background: #003e5e1c;
            border-right: 1px solid #e8e8e8;
            padding-top: 8px;
            
        }

        .btn-play-pause {
            border: 1px solid #105b81;
            width: 58px;
            height: 58px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #33BBFF;
            background-image: url('../image/bgplay_n.webp');
            background-size: cover;   
            background-position: center; 
            background-repeat: no-repeat;
            transition: 0.2s;
            -webkit-tap-highlight-color: transparent;
         }

        .css-play {
            width: 0; height: 0; 
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-left: 15px solid black;
            margin-left: 5px;
        }

        .css-pause {
            width: 14px; height: 17px; 
            border-left: 5px solid black;
            border-right: 5px solid black;
        }

        .time-display {
            color: #105b81;
            font-size: 10px;
            
            margin-top: 5px;
        }

        .waveform-wrapper {
            position: relative;
            flex-grow: 1;
            height: 60px;
            margin: 0 10px;
            display: flex;
            align-items: center;
            gap: 2px;
            overflow: hidden; /* Ważne: zapobiega rozpychaniu na boki */
            pointer-events: none;
        }

        .buffering-overlay {
            position: absolute;
            width: 100%;
            text-align: center;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            color: #105b81;
            font-weight: bold;
            font-size: 13px;
            display: none;
            z-index: 35;
            animation: blink 1s infinite;
            pointer-events: none;
        }

        @keyframes blink { 50% { opacity: 0.3; } }

        .wave-bar {
            flex: 1 1 2px; /* flex-grow, flex-shrink, flex-basis */
            min-width: 2px;
            background: #e0e0e0;
            border-radius: 2px;
            height: 20%;
        }

        .wave-bar.active { background: #33BBFF; }

        .seek-slider { 
            position: absolute; 
            top: 0; 
            left: 90px; 
            width: calc(100% - 90px); 
            height: 100%; 
            opacity: 0; 
            cursor: pointer; 
            z-index: 40; 
            margin: 0;
            pointer-events: auto;
        }
  
        .full_tops {
            border-bottom: 1px solid #ececec;
            display: flex;
            flex-wrap: wrap;
            margin: -10px -17px 17px;
            padding: 10px 10px 0;
            overflow: hidden;
}
         .downloadr {
            position: absolute;
            font-weight: bold;
            margin-left: 185px;
            margin-top: 38px;
            cursor: pointer;
            transition: all 0.3s ease 0s;
            color: #fff;
            font-weight: normal;
            display: inline-block;
            padding: 4px 12px;
            overflow: hidden;
            border-radius: 4px;
            border: 0;
            background: #35c535;
            font-family: 'Akrobat';
            font-size: 12px;
            line-height: 1; } 
         .borders {
            border-bottom:  1px solid #ddd; }



.ssa   {
flex: 1 auto;
    min-width: 140px;
    max-width: 140px;
    margin-right: 25px;
    overflow: hidden;
    border-radius: 3px;
    padding: 25px 0;
 
    }

.fa-youtube-play:hover{
   color:black !important;
}
.fa-youtube-play-o:hover{
   color:black !important;
}

 .downloadsid {
     position: absolute;
 font-weight: bold;
    margin-left: 206px;
    margin-top: 38px;

     cursor: pointer;
    transition: all 0.3s ease 0s;
    color: #fff;
    font-weight: normal;
    display: inline-block;
    padding: 4px 12px;
  
    overflow: hidden;
    border-radius: 4px;
    border: 0;
    background: #35c535;
    font-family: 'Akrobat';
    font-size: 12px;
   
    line-height: 1;
}       
    .downloadsid:hover {
     position: absolute;

 
color: #000;
}       
        
.borders {
border-bottom:  1px solid #ddd;
   
}

.head-status-item {
    position: relative;
    width: 70px;
    color: #818182;
   
    transition: all 0.3s ease 0s;
    color: #fff;
    font-weight: normal;
    display: inline-block;
    padding: 12px 1px;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    border: 0;
    background: #b5b4b1;
    font-family: 'Akrobat';
    /* font-size: 16px; */
    height: 37px;
    line-height: 1;
    padding-left: 10px;
    margin-right: 5px;
 }

.total-time { 
 font-size: 0px;  
}                   
                
curr-time { 
font-size: 1px;  
}   
                
.separator-slash { 
font-size: 0px;   
}  

#fdw-pricing-table .plan {
		font: 13px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;     
		background: #fff;      
		border: 1px solid #ddd;
		color: #333;
		padding: 20px;
		width: 290px;
		float: left;
		_display: inline; /* IE6 double margin fix */
		position: relative;
		margin: 0 5px;
		-moz-box-shadow: 0 2px 2px -1px rgba(0,0,0,.3);
		-webkit-box-shadow: 0 2px 2px -1px rgba(0,0,0,.3);
		box-shadow: 0 2px 2px -1px rgba(0,0,0,.3);		
	}

#fdw-pricing-table .headerss {
		text-align: center;
		font-size: 20px;
		font-weight: normal;
		text-transform: uppercase;
		padding: 20px;
		margin: -20px -20px 20px -20px;
		border-bottom: 8px solid;
		background-color: #eee;
		background-image: -moz-linear-gradient(#fff,#eee);
		background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));    
		background-image: -webkit-linear-gradient(#fff, #eee);
		background-image: -o-linear-gradient(#fff, #eee);
		background-image: -ms-linear-gradient(#fff, #eee);
		background-image: linear-gradient(#fff, #eee);
	}


	#fdw-pricing-table .plan1 .headerss{
		border-bottom-color: #B3E03F;
	}

	#fdw-pricing-table .plan2 .headerss{
		border-bottom-color: #7BD553;
	}

	#fdw-pricing-table .plan3 .headerss{
		border-bottom-color: #3AD5A0;
	}


	

	#fdw-pricing-table .plan4 .headerss{
		border-bottom-color: #45D0DA;
	}			
	


	
#fdw-pricing-table li {
		padding: 10px 0;
	}
	
 .center {
  margin-left: auto;
  margin-right: auto;
}

    .loader {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  border: 3px solid;
  border-color: #ddd #ddd transparent;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
.loader::after {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 3px solid;
  border-color: transparent #3394e6 #3394e6;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  animation: rotationBack 0.5s linear infinite;
  transform-origin: center center;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 
    
@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}