/* Webfont: Gotham-Bold */@font-face {
    font-family: 'Gotham-Bold';
    src: url('https://radiohdvivo.com/baires80s/css-font/Gotham-Bold.eot'); /* IE9 Compat Modes */
    src: url('https://radiohdvivo.com/baires80s/css-font/Gotham-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('https://radiohdvivo.com/baires80s/css-font/Gotham-Bold.woff') format('woff'), /* Modern Browsers */
         url('https://radiohdvivo.com/baires80s/css-font/Gotham-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
         url('https://radiohdvivo.com/baires80s/css-font/Gotham-Bold.svg#Gotham-Bold') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}
/* Webfont: Gotham-Book */@font-face {
    font-family: 'Gotham-Book';
    src: url('https://radiohdvivo.com/baires80s/css-font/Gotham-Book.eot'); /* IE9 Compat Modes */
    src: url('https://radiohdvivo.com/baires80s/css-font/Gotham-Book.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('https://radiohdvivo.com/baires80s/css-font/Gotham-Book.woff') format('woff'), /* Modern Browsers */
         url('https://radiohdvivo.com/baires80s/css-font/Gotham-Book.ttf') format('truetype'), /* Safari, Android, iOS */
         url('https://radiohdvivo.com/baires80s/css-font/Gotham-Book.svg#Gotham-Book') format('svg'); /* Legacy iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}


/* for desktop */

body {
    margin: 0px;
    background: #333;
    width: 100%;
}

#songdata{
	display: flex;
    align-items: center;
    justify-content: center;
	margin-top: 50px;
    padding: 0px;
    margin: auto;
    width: 300px;
    flex-direction: column;
}

        /* Estilos básicos para el contenedor y el ícono */
        .playlist-icon-container {
            display: inline-block;
        }

        /* Estilo del contenedor que aparece y desaparece */
        #songdata-sidebar {
            display: none; /* Oculto por defecto */
            position: fixed; /* Fijado en la ventana del navegador */
            bottom: 110px; /* Ajusta la distancia desde la parte superior de la ventana */
            left: 50%; /* Coloca el contenedor en el medio horizontalmente */
            transform: translateX(-50%); /* Centra horizontalmente */
            background-color: #f0f0f0;
            padding: 10px;
            border: 1px solid #ccc;
            z-index: 10;
            height: 290px; /* Altura del contenedor */
            width: 710px; /* Ocupa todo el ancho de la ventana */
			box-sizing: border-box;
			border-radius: 5px 5px 0px 0px;
            -webkit-border-radius: 5px 5px 0px 0px;
            -moz-border-radius: 5px 5px 0px 0px;
        }

        /* Asegúrate de que el ícono SVG no se mueva */
        .playlist-icon-container svg {
            cursor: pointer;
        }

/* Estilo del botón de reproducción */
#amplitude-player {
    display: flex;
    align-items: center;
}

#play-stop-button {
	width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: transform 0.3s ease;
	background: none;
    border: none;
	margin: 0 calc(13px* 2);
}

/* Estilo general para los íconos */
.icon {
    width: 62px;
    height: 62px;
    position: absolute;
    transition: opacity 0.3s ease;
}

/* Estilo SVG para Play */

.icon #circle---white use {
    fill: #FFFFFF; /* Cambia el color de fondo del círculo */
}

.icon #play-icon {
    fill: #333; /* Cambia el color del icono de reproducción */
}

/* Define la animación de pulso */
        svg#play-icon {
            position: absolute;
            z-index: 10;
            width: 62px;
            height: 62px;
			left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
        }

        #play-audio:before {
            content: "";
            position: absolute;
            z-index: 0;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            display: block;
            width: 62px;
            height: 62px;
            background: #FFFFFF;
            border-radius: 50%;
            animation: pulse-border 1500ms ease-out infinite;
        }
		
		#play-audio:after {
            content: "";
            position: absolute;
            z-index: 1;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            display: block;
            width: 62px;
            height: 62px;
            background: transparent;
            border-radius: 50%;
            transition: all 200ms;
}

        @keyframes pulse-border {
            0% {
                transform: translateX(-50%) translateY(-50%) scale(1);
                opacity: 1;
            }
            100% {
                transform: translateX(-50%) translateY(-50%) scale(1.5);
                opacity: 0;
            }
        }

/* Estilo SVG para Stop */

.icon #circle---white use {
    fill: #FFFFFF; /* Cambia el color de fondo del círculo */
}

.icon #Rectangle {
    fill: #333; /* Cambia el color del icono de reproducción */
}

/* Estilo SVG para Loading */

.icon #circle---white use {
    fill: #FFFFFF; /* Cambia el color de fondo del círculo */
}

.icon #icon {
    fill: #333; /* Cambia el color del icono de reproducción */
}

/* Estilo del ícono de carga */
#loading-icon {
    display: none;
    animation: spin 7.5s linear infinite;
}

/* Animación de rotación */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Estado del botón Stop */
#play-stop-button.stop #play-icon {
    display: none;
}

#play-stop-button.stop #play-audio {
    display: none;
}

#play-stop-button.stop #stop-icon {
    display: block;
}

#play-stop-button.stop #loading-icon {
    display: none;
}

/* Estado del botón Play */
#play-stop-button #play-icon {
    display: block;
}

#play-stop-button #stop-icon {
    display: none;
}

#play-stop-button #loading-icon {
    display: none;
}

/* Estado de carga */
#play-stop-button.loading #play-icon,
#play-stop-button.loading #play-audio,
#play-stop-button.loading #stop-icon {
    display: none;
}

#play-stop-button.loading #loading-icon {
    display: block;
}

		
/* Estilo del contenedor de volumen */
        #volume-container {
            display: flex;
            align-items: center;
			width: 58%;
            float: left;
        }

        .volume-controls {
            display: flex;
            align-items: center;
        }
		
		.amplitude-mute.amplitude-not-muted .volume-icon {
            display: block;
}

         .amplitude-mute.amplitude-muted .mute-icon {
            display: block;
}

         .amplitude-mute.amplitude-muted .volume-icon {
            display: none;
}

         .amplitude-mute.amplitude-not-muted .mute-icon {
            display: none;
}

        /* Estilo del botón de mute */
        .amplitude-mute {
            width: 25px;
            height: 19px;
            cursor: pointer;
            margin-right: 10px;
        }
		
		
	    /* Estilo CSS para cambiar el color del SVG */
.volume-icon .st0,
.mute-icon .st0 {
    stroke: #FFFFFF; /* Cambia este color según lo desees */
}

        /* Estilo del slider de volumen */
        input[type=range].amplitude-volume-slider {
    -webkit-appearance: none;
    width: calc( 100% - 37px);
    float: left;
	background: transparent;
}

@-moz-document url-prefix() {
  input[type=range].amplitude-volume-slider {
    margin-top: 0px;
  }
}
@supports (-ms-ime-align: auto) {
  input[type=range].amplitude-volume-slider {
    margin-top: 3px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0) !important;
    z-index: 999;
    position: relative;
  }

  div.ms-range-fix {
    height: 0.8rem;
    background-color: #A9A9A9;
    width: 67%;
    float: right;
    margin-top: -6px;
    z-index: 9;
    position: relative;
  }
}
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, input[type=range].amplitude-volume-slider {
    margin-top: -24px;
    background-color: rgba(255, 255, 255, 0) !important;
  }
}
input[type=range].amplitude-volume-slider:focus {
  outline: none;
}

input[type=range].amplitude-volume-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  border-radius: 50px;
  cursor: pointer;
  animate: 0.2s;
  background: #ffffff;
}

input[type=range].amplitude-volume-slider::-webkit-slider-thumb {
  height: 14px;
  width: 14px;
  border-radius: 10px;
  background: #ffffff;
  border: 2px solid #c92222;
  cursor: pointer;
  margin-top: -4px;
  -webkit-appearance: none;
}

input[type=range].amplitude-volume-slider:focus::-webkit-slider-runnable-track {
  background: #CFD8DC;
}

input[type=range].amplitude-volume-slider::-moz-range-track {
  width: 100%;
  height: 5px;
  border-radius: 50px;
  cursor: pointer;
  animate: 0.2s;
  background: #ffffff;
}

input[type=range].amplitude-volume-slider::-moz-range-thumb {
  height: 10px;
  width: 10px;
  border-radius: 10px;
  background: #ffffff;
  border: 2px solid #c92222;
  cursor: pointer;
  margin-top: -4px;
}

input[type=range].amplitude-volume-slider::-ms-track {
  width: 100%;
  height: 1px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  /*leave room for the larger thumb to overflow with a transparent border */
  border-color: transparent;
  border-width: 15px 0;
  /*remove default tick marks*/
  color: transparent;
}

input[type=range].amplitude-volume-slider::-ms-fill-lower {
  background: #CFD8DC;
  border-radius: 10px;
}

input[type=range].amplitude-volume-slider::-ms-fill-upper {
  background: #CFD8DC;
  border-radius: 10px;
}

input[type=range].amplitude-volume-slider::-ms-thumb {
  height: 10px;
  width: 10px;
  border-radius: 10px;
  background: #c92222;
  cursor: pointer;
  margin-top: 2px;
}

input[type=range].amplitude-volume-slider:focus::-ms-fill-lower {
  background: #CFD8DC;
}

input[type=range].amplitude-volume-slider:focus::-ms-fill-upper {
  background: #CFD8DC;
}

input[type=range].amplitude-volume-slider::-ms-tooltip {
  display: none;
}		

/* Estilo del canciones */

.songdivimg {
  display: none;
  float: left;
  border: 0px solid #211915;
  width: 80px;
  height: 80px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.songdivimg .songimg{
    width: 80px;
	height: 80px;
	border-radius: 6px;
}

.container {
  float: left;
  margin-top: 0px;
  margin-bottom: 0px;
  width: 230px;
  margin-left: 0px;
  margin-right: 0px;
}

.currentsong {
	display: flex;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    box-sizing: border-box;
    padding: 0 10px 0 0;
    height: 100px;
	width: 100%;
	justify-content: center;
}

.songtitle{
    display: none;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 0px;
    margin-bottom: 0px;
}
	.songartist{
    font-family: Gotham-Bold,Helvetica,'Trebuchet MS',sans-serif;
    font-size: 18px;
	text-transform: uppercase;
	color: #fff;
	display: block;
    overflow: hidden;
    position: relative;
    letter-spacing: 1px;
    white-space: nowrap;
    text-overflow: ellipsis;
	margin-bottom: 2.5px; /* Espacio entre los elementos */
}
	.songsong{
    font-family: Gotham-Book,Helvetica,'Trebuchet MS',sans-serif;
    font-size: 18px;
	text-transform: uppercase;
	color: #fff;
	display: block;
    overflow: hidden;
    position: relative;
    letter-spacing: 1px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.logoRadio{
    display: flex;
    align-items: center;
    float: right;
    margin-top: 0px;
    padding: 0px 0px 0px 0px;
	margin-top: 50px;
    margin-bottom: 20px;
    height: 300px;
    width: 300px;
    border-radius: 5px;
    background: #FFFFFF;
}
.logodivimg{
  display: flex;
    height: 300px !important;
    width: 300px !important;
    align-content: center;
    align-items: center;
}
.logoimg{
  width: 300px !important;
}

/* Estilo Playlist */

.songtitle-sidebar{
	display: none;
     font-family: Montserrat, sans-serif;
    font-size: 15px;
    text-transform: uppercase;
    color: #000;
    font-weight: 300;
    float: left;
    margin-top: 0px;
    margin-left: 10px;
    margin-bottom: 0px;
    width: 300px;
    height: 0px;
}

.songartist-sidebar{
    font-family: Montserrat, sans-serif;
    font-size: 16px;
	text-transform: uppercase;
	color: #ae1857;
	display: block;
    font-weight: 600;
    float: left;
    margin-top: 0px;
    margin-left: 0px;
    width: 330px;
}

.lastsongs{
	font-family: Montserrat, sans-serif;
    font-size: 11px;
	margin: 0px;
	width: 100%;
	clear: both;
	padding-left: 0px;
	text-align: left;
	padding-top:0px;
}

.history-title {
	float: left;
    font-family: Montserrat, sans-serif;
    font-size: 20px;
    text-transform: uppercase;
    color: #000;
    font-weight: 600;
    border-bottom: 3px solid #000000;
    margin-left: 10px;
    margin-bottom: 5px;
    padding-bottom: 5px;
    width: 95%;
}

.history-title-text {
    display: inline-block; /* Para que el padding solo afecte al texto */
    padding-left: 5px; /* Espacio adicional a la izquierda del texto */
}

.history{
	display: flex;
	flex-direction: row;
	float: left;
}

.history .historydivimg{
	display: flex;
    margin: 0px;
    clear: both;
    margin-bottom: 0.300em;
    padding-bottom: 0.300rem;
    height: 100px;
	width: 100px;
    flex-direction: column;
}

.history .historyrow{
	margin: 7px;
	clear: both;
	margin-bottom: 0.500em;
    padding-bottom: 0.500rem;
	height: 210px;
}

.history .historyRowLast{
	border-bottom: 0px !important;
	margin-right: 7px !important;
}

.history .historydivimg .historyimg{
	border: hsla(0,0%,0%,1.00);
	width: 100px;
	height: 100px;
	margin-left: 0px;
	margin-right: 0px;
	padding-bottom: 0px;
}
	
.history .historysong{
	font-family: Montserrat, sans-serif;
    font-size: 12px;
	text-transform: uppercase;
	color: #003050;
    font-weight: bold;
    float: left;
    margin-top: 0px;
    margin-left: 0px;
    width: 100%;
	text-align: left;
  }

.history .historysong{
	font-size: 12px;
	width: 100px;
}
.historysongartist{
	font-family: Montserrat, sans-serif;
    font-size: 0.8rem;
	text-transform: uppercase;
	color: #000;
    font-weight: 700;
    float: left;
    margin-top: 0px;
    margin-left: 0px;
	margin-bottom: 5px;
    width: 100%;
	text-align: left;
}
.historysongsong{
	font-family: Montserrat, sans-serif;
    font-size: 0.600rem;
	text-transform: uppercase;
	color: #000;
    font-weight: 500;
    float: left;
    margin-top: 0px;
    margin-left: 0px;
	margin-bottom: 5px;
    width: 100%;
	text-align: left;
}
.timesong { 
    font-size: 0.500rem;
    font-style: italic;
    font-weight: 400;
	text-transform: lowercase;
	color: black;
	opacity: 0.7;
}

/* Developer */

.developer {
	display: flex;
    padding-top: 0px;
    width: 300px;
	margin-top: 15px;
    justify-content: center;
}

.enlace-titulo {
            text-decoration: none; /* Quita el subrayado del enlace */
            color: #fff; /* Color del enlace, puedes cambiarlo */
			font-family: Montserrat, sans-serif;
            font-size: 10px;
            font-weight: 500;
        }

        .enlace-titulo:hover {
            color: #f6f6f6; /* Color del enlace cuando el cursor pasa sobre él */
        }

/* for mobile */

}