/**
* All of the CSS for your public-facing functionality should be
* included in this file.
*/
:root{
 --do:#a820ae;
 --dod:#8569eb;
 --reb:#ff1500;
 --re:#fc9669;
 --red:#02a9ff;
 --mib:#0048ff;
 --mi:#9ddbff;
 --fa:#1d04d1;
 --fad:#b695dc;
 --solb:#0ad754;
 --sol:#ffea00;
 --sold:#9100a9;
 --lab:#ffff00;
 --la:#ffa622;
 --lad:#ffc9c7;

}

.testo-do{
 color:var(--do);
}
.testo-dod{
 color:var(--dod);
}
.testo-reb{
 color:var(--reb);
}
.testo-re{
 color:var(--re);
}
.testo-red{
 color:var(--red);
}
.testo-mib{
 color:var(--mib);
}
.testo-mi{
 color:var(--mi);
}
.testo-fa{
 color:var(--fa);
}
.testo-fad{
 color:var(--fad);
}
.testo-solb{
 color:var(--solb);
}
.testo-sol{
 color:var(--sol);
}
.testo-sold{
 color:var(--sold);
}
.testo-lab{
 color:var(--lab);
}
.testo-la{
 color:var(--la);
}
.testo-lad{
 color:var(--lad);
}
.testo-sib{
 color:var(--sib);
}
.testo-si{
 color:var(--si);
}

.sfondo-do{
 background-color:var(--do);
}

.sfondo-dod{
 background-color:var(--dod);
}
.sfondo-reb{
 background-color:var(--reb);
}
.sfondo-re{
 background-color:var(--re);
}
.sfondo-red{
 background-color:var(--red);
}
.sfondo-mib{
 background-color:var(--mib);
}
.sfondo-mi{
 background-color:var(--mi);
}
.sfondo-fa{
 background-color:var(--fa);
}
.sfondo-fad{
 background-color:var(--fad);
}
.sfondo-solb{
 background-color:var(--solb);
}
.sfondo-sol{
 background-color:var(--sol);
}
.sfondo-sold{
 background-color:var(--sold);
}
.sfondo-lab{
 background-color:var(--lab);
}
.sfondo-la{
 background-color:var(--la);
}
.sfondo-lad{
 background-color:var(--lad);
}
.sfondo-sib{
 background: rgb(104,76,1);
background: linear-gradient(117deg, rgba(104,76,1,1) 0%, rgba(253,221,132,1) 35%, rgba(255,255,255,1) 38%, rgba(255,255,255,1) 41%, rgba(253,221,132,1) 53%, rgba(139,105,9,1) 100%);
}
.sfondo-si{
 background: rgb(111,111,111);
background: linear-gradient(117deg, rgba(111,111,111,1) 0%, rgba(231,231,231,1) 35%, rgba(255,255,255,1) 38%, rgba(255,255,255,1) 41%, rgba(231,231,231,1) 53%, rgba(111,111,111,1) 100%);
}
.toastr-no, .toastr-yes{
	margin-top:5px;
}
.toastr-no{
	margin-left:15px;
}


.bio-box {
 display:inline-flex;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 margin:5%;
 border-radius:1vw

}
#container {
 display: inline-block;
 position: relative;
 width: 120px;
 height: 120px;
}

#dummy {
 margin-top: 120px;
 
}

#element {
 position: absolute;

 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 background-color: silver;/* show me! */
}


/*generated with Input range slider CSS style generator (version 20211225)
https://toughengineer.github.io/demo/slider-styler*/
input[type=range].styled-slider {
  height: 5px;
  -webkit-appearance: none;
}

/*progress support*/
input[type=range].styled-slider.slider-progress {
  --range: calc(var(--max) - var(--min));
  --ratio: calc((var(--value) - var(--min)) / var(--range));
  --sx: calc(0.5 * 15px + var(--ratio) * (100% - 15px));
}

input[type=range].styled-slider:focus {
  outline: none;
}

/*webkit*/
input[type=range].styled-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 7em;
  background: #AD1F5F;
  border: none;
  box-shadow: none;
  margin-top: calc(5px * 0.5 - 15px * 0.5);
}

input[type=range].styled-slider::-webkit-slider-runnable-track {
  height: 5px;
  border: none;
  border-radius: 3px;
  background: #efefef;
  box-shadow: none;
}
input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track {
  background: linear-gradient(#AD1F5F,#AD1F5F) 0/var(--sx) 100% no-repeat, #efefef;
}

/*mozilla*/
input[type=range].styled-slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 7em;
  background: #AD1F5F;
  border: none;
  box-shadow: none;
}

input[type=range].styled-slider::-moz-range-track {
  height: 5px;
  border: none;
  border-radius: 3px;
  background: #efefef;
  box-shadow: none;
}

input[type=range].styled-slider.slider-progress::-moz-range-track {
  background: linear-gradient(#AD1F5F,#AD1F5F) 0/var(--sx) 100% no-repeat, #efefef;
}

/*ms*/
input[type=range].styled-slider::-ms-fill-upper {
  background: transparent;
  border-color: transparent;
}

input[type=range].styled-slider::-ms-fill-lower {
  background: transparent;
  border-color: transparent;
}

input[type=range].styled-slider::-ms-thumb {
  width: 15px;
  height: 15px;
  border-radius: 7em;
  background: #AD1F5F;
  border: none;
  box-shadow: none;
  margin-top: 0;
  box-sizing: border-box;
}

input[type=range].styled-slider::-ms-track {
  height: 5px;
  border-radius: 3px;
  background: #efefef;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
}

input[type=range].styled-slider.slider-progress::-ms-fill-lower {
  height: 5px;
  border-radius: 3px 0 0 3px;
  margin: -undefined 0 -undefined -undefined;
  background: #AD1F5F;
  border: none;
  border-right-width: 0;
}

.filter label {
 cursor: pointer;
 display: block;
 background: transparent;
 height: 100%;
 width: 100%;
}

v1{
 position: absolute;
 bottom:10%;
 right:10%;
}

.bio-box2 {
 height: 120px;
 width: 120px;
 margin:0;
 display:inline-flex;

}

.test-colonne{
 max-width:800px;
 margin-left:auto;
 margin-right:auto;
}

.filter2{
display: inline-flex;
margin: 10px;
height:120px;
width:240px;
border-radius: 30px;
overflow:hidden;
}

.filter2 label {
 cursor: pointer;
 display: block;
 background: transparent;
 text-align: center;
 padding:0;
 height:120px;
}
.v2{
 position: relative;
 bottom:30px;
 text-align:center;
 }

progress{
 width:100%;
 height:30px;
}


.icone_player{
 background-color:transparent!important;
 color:#ad1f5f!important;
 font-size:30px;
 border:none!important;	
}

.button_player{
 background-color:transparent;
 border:none;
}

.button_player:hover>.icone_player{
 cursor:pointer;
 color:#cccccc!important;
}
@media only screen and (max-width: 740px) {

	
 .bio-box {
 display:inline-flex;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 margin:5%;
 border-radius:1vw
}
#container {
 display: inline-block;
 position: relative;
 width: 75px;
 height: 75px;
}

#dummy {
 margin-top: 75px;
}
.bio-box2 {

 height: 75px;
 width: 75px;
 margin:0;
 display:inline-flex;
}	
 
.filter2{
display: inline-flex;
margin: 5px;
height:75px;
width:150px;
border-radius: 15px;
overflow:hidden;
}

.filter2 label {
 cursor: pointer;
 display: block;
 background: transparent;
 text-align: center;
 padding:0;
 height:750px;
}		
}