/*
// arnAu bellavista 2025
// RKOR Experience
// Estils CSS Formularis
*/


/* Estils generals */
@media all{
	
	.button{
		padding: 10px 18px;
		letter-spacing: 2px;
		color: var(--color-fons);
		background-color: var(--color-primer);
		border: 0;
		border-radius: 4px;
		cursor: pointer;
	}
	.button:hover{
		color: var(--color-text);
		background-color: var(--color-segon);
	}
	.button:active{
		background-color: var(--color-clar);
	}
	
	
	input[type="file"]{
		display: none;
	}
	.fitxersInput{
		display: inline-block;
		color: var(--color-text);
		padding: 4px var(--marge-mig);
		border: 1px solid var(--color-fons);
		border-radius: 4px;
		cursor: pointer;
		transition: var(--transicio);
	}
	.fitxersInput img{
		height: 18px;
		vertical-align: middle;
	}
	.fitxersInput:hover{
		filter: invert(40%) sepia(27%) saturate(1167%) hue-rotate(354deg) brightness(99%) contrast(93%);
	}
	.fitxersInput:active{
		background-color: var(--color-clar);
	}
	
	/* Input Range */
	.volum{
		appearance: none; 
		-webkit-appearance: none;
		width: 100%;
		height: 18px;
		padding: 0;
		margin: 0;
		cursor: pointer;
		outline: none;
		border: 2px solid var(--color-fosc);
		border-radius: 15px;
		background: var(--color-fons);
	}

	.volum::-webkit-slider-thumb{
		-webkit-appearance: none;
		appearance: none; 
		height: 18px;
		width: 18px;
		background-color: var(--color-text);
		border: 2px solid var(--color-fons);
		border-radius: 50%;
		transition: .2s ease-in-out;
	}

	.volum::-webkit-slider-thumb:hover{
		background-color: var(--color-primer);
	}
	.volum::-webkit-slider-thumb:active{
		background-color: var(--color-segon);
	}

	.volumNums{
		display: flex;
		justify-content: space-between;
		padding: 0 10px;
		color: var(--color-clar);
	}

	.volumNums span{
		display: flex;
		justify-content: center;
		width: 1px;
		height: 4px;
		background: var(--color-clar);
		line-height: 24px;
	}
	
	.volum:disabled{
		/* opacity: 0.5; */
		background-color: var(--color-fons2);
	}
	.volum:disabled::-webkit-slider-thumb{
		color: var(--color-fosc);
		background-color: var(--color-clar);
		border: 2px solid var(--color-fons2);
	}
	
	#volum label,
	#experiencia label{
		margin-left: 8px;
		line-height: 18px;
	}
	/* fi input Range */




}




@media all and (max-width: 816px){

}




@media all and (max-width: 576px){

}




@media all and (max-width: 440px){

}