body{margin:0;padding:0;font-family:verdana;font-size:20px;color:#FFB48C;background-image:url('/img/citynight01.webp');background-attachment:fixed;background-repeat:no-repeat;background-position:center bottom;background-size:cover}
/*
taronja fosc #FF752B clar:#FFB48C
blau fosc rgb(1,1,3) #070511					#010103
medium 16	large 18	x-large 24
*/


select{margin:0}
fieldset, legend, input[type='checkbox']{color:#FFB48C;border-radius:25px}
fieldset{font-size:20px;padding:0 5px;border:2px solid orange}
legend{font-size:24px;padding:10px 20px;background-color:#070511;border:2px solid orange}
input, textarea, select, .fs-camps, .legend-camps{font-family:Verdana;border-radius:5px}
input[type='checkbox']{border:2px solid #FFB48C;color:#FFB48C;border-radius:25px}
a:link, a:visited, a:hover, a:active{text-decoration:none}
h1{margin-left:auto;margin-right:auto}

#div-logo{margin:5px 0 10px;text-align:center}
.a-logo{font-size:80px;color:#333}
#div-domini{display:block;width:100%}
.a-domini{font-size:40px;color:#070511;text-decoration:none}

/* index */
.radio_container, .container, .lbl-form{padding-top:2px;padding-bottom:10px;font-size:20px}
.lbl-form{float:left;width:45%;text-align:right;padding-right:10px}
.div-linia{display:block;width:100%;margin-right:auto;margin-left:auto}
#lbl-mostrar{margin:20px 0 0 60px}
.div-mobil{background-image:linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0.2));border-radius:25px}
.fs-mobil{display:block;min-height:500px;border-radius:25px}
.div-mobil-cont{display:block;border-radius:25px}

.div-llista{width:99%;margin-right:auto;margin-left:auto;overflow-x:hidden;overflow-y:auto}

.div-gradient{background-image:linear-gradient(to bottom, rgba(1,1,3,0.9), rgba(1,1,3,0.2));border-radius:5px;padding: 5px 0}
.gradient-75{background-image:linear-gradient(to bottom, rgba(1,1,3,0.9) 75%, transparent)}
.gradient-40{background-image:linear-gradient(to bottom, rgba(1,1,3,0.9) 40%, transparent)}
.gradient-20{background-image:linear-gradient(to bottom, rgba(1,1,3,0.9) 20%, transparent)}

.fs-camps{margin-bottom:10px;padding-bottom:10px}
.fs-2{padding:5px}

.div-linia-5{display:block;width:100%;margin:5px 0 0}
.div-linia-10{display:block;width:100%;margin:10px 0 0}
.div-linia-left, .div-linia-left-codis{float:left;margin:0;padding:0}
.div-linia-right, .div-linia-right-codis{float:right;margin:0;padding:0}

/* mostra el valor d'un camp com si fora un input */
.div-linia-bn, .div-linia-bn2{background-color:lightyellow;color:black;border:1px solid orange;border-radius:5px}

.div-linia-op{display:block;width:100%}

.input-linia-mitja{margin:0;padding:0}

.a-codi:link{color:orange}
.a-codi:visited{color:cyan}

#Imatge{display:none}
#lbl-imatge, #lbl-imatge-abans, #lbl-imatge-després{text-align:center}
img{width:100%;height:auto;border-radius:5px}
.span-imatge{display:block;width:100%;margin-bottom:10px;padding:10px 0;text-align:center}		/* pantalla */
.botonot, .span-imatge{
	width:100%;
	font-size:25px;
	padding:10px 0;
	font-weight:bold;
	background-color:#FF752B;
	color:#070511;
	border-radius:5px;
	cursor:pointer;
	border:1px solid #FF752B;
	margin:0 0 20px 0;
}

.botonot_inactiu{
	width:100%;
	font-size:25px;
	padding:10px 0;
	font-weight:bold;
	background-color:#070511;
	color:#FF752B;
	border-radius:5px;
	cursor:pointer;
	border:1px solid #FF752B;
	margin:0 0 20px 0;
}

.botonet{
	margin:0;
	padding:4px;
	width:180px;
	text-align:left;
	font-size:x-large;
	background-color:#FF752B;
	border-radius:5px;
	cursor:pointer;
	border:1px solid #FF752B;
}

.boto1{
	/* margin:-3px 0 1px 0 5%; */
	padding:0;
	/* width:63px; */
	text-align:center;
	background-color:#FF752B;
	border-radius:5px;
	cursor:pointer;
	border:1px solid #FF752B;
}

.botonot:hover, .span-imatge:hover, .botonet:hover, .boto1:hover{background-color:#FFB48C}

#div-resultat-emoji{width:100%;text-align:center}
#span-resultat-text{background-color:rgba(1,1,3,0.9);padding:5px 10px;border-radius:5px}

#div-error{position:absolute;top:20%;left:0;width:100%;height:100%;margin:auto auto;text-align:center}

/* ******************** inici lector codi barres **************** */
#contenedor video{max-width:100%;width:100%}
#contenedor{max-width:100%;position:relative}
canvas{max-width:100%}
canvas.drawingBuffer{position:absolute;top:0;left:0}
/* ********************** fi lector codi barres ***************** */


/* ********************** inici checkbox ********************** */
/* The container */
.container, .radio_container{
	display:block;
	position:relative;
	padding-left:35px;
	margin-bottom:12px;
	cursor:pointer;
	font-size:20px;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}

/* Hide the browser's default checkbox */
.container input {
	position:absolute;
	opacity:0;
	cursor:pointer;
	height:0;
	width:0;
}

/* Create a custom checkbox */
.checkmark {
	position:absolute;
	top:0;
	left:0;
	height:25px;
	width:25px;
	background-color:white;
	border:1px solid orange;
	border-radius:5px
}

/* On mouse-over, add a background color */
.container:hover input ~ .checkmark, .radio_container:hover input ~ .radio_checkmark{
	background-color:#FFB48C;
}


/* When the checkbox is checked, add a background */
.container input:checked ~ .checkmark {
	background-color:white;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after, .radio_checkmark:after{
	content:"";
	position:absolute;
	display:none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after, .radio_container input:checked ~ .radio_checkmark:after{
	display:block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
	left:9px;
	top:5px;
	width:5px;
	height:10px;
	border:solid black;
	border-width:0 3px 3px 0;
	-webkit-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg);
}
/* ********************** fi checkbox ********************** */

/* ******************* inici radio button ****************** */
/* The container .radio_container */

/* Hide the browser's default radio button */
.radio_container input{
	position:absolute;
	opacity:0;
	cursor:pointer;
}

/* Create a custom radio button */
.radio_checkmark {
	position:absolute;
	top:0;
	left:0;
	height:25px;
	width:25px;
	background-color:white;
	border:1px solid orange;
	border-radius:50%;
}

/* When the radio button is checked, add a background */
.radio_container input:checked ~ .radio_checkmark {
	background-color:orange;
}

/* Style the indicator (dot/circle) */
.radio_container .radio_checkmark:after {
 	top:9px;
	left:9px;
	width:8px;
	height:8px;
	border-radius:50%;
	background:black;
}
/* ********************** fi radio button ****************** */

@media(max-width:360px){
	button, .botonot, .input-linia, .input-linia-b, .input-linia-mitja, .div-linia-bn, .div-linia-bn2, .span-imatge{border:none}

	input, textarea, .fs-camps, .legend-camps{font-size:20px;border:1px solid #FFB48C}
	select{font-size:24px;border:1px solid #FFB48C;width:342px}
	h1{font-size:20px}

	#div-index{margin:5px auto 0}
	.div-mobil{min-width:340px;padding-top:5px}
	.fs-mobil{min-height:450px}
	#div-radios{padding:20px 0 0 10px}
	.radio_container, .lbl-form, .container, .div-linia, .div-linia-10, input, .input-linia, .input-linia-b, .input-linia-mitja, button, .span-imatge, .botonot{
		font-size:20px
	}

	/* centrar verticalment text i radi*/
	.radio_checkmark{margin-top:2px}

	.div-linia{margin-top:10px}
	button{padding:5px 0;margin-bottom:10px}

	/* operario */
	.div-mobil-cont{min-height:296px}
	.div-linia-op{margin:40px 0}

	.div-linia-left, .div-linia-right, .input-linia-mitja{width:160px}
	.div-linia-left-codis, .input-linia-b{width:256px;font-size:31px}
	.div-linia-right-codis, .boto1{width:60px;font-size:29px}

	.div-llista{height:220px}
	.a-codi{font-size:20px;margin:10px 0}
	.leg-font{font-size:18px}

	/* operario_contenedor */
	.botonot{font-size:24px}

	.input-linia{width:338px}
	.span-imatge, .div-linia-bn, .div-linia-bn2{width:342px}

	.input-linia-mitja{width:161px}
	.input-codi{font-size:40px}

	.checkmark{margin-top:5px}

	#span-resultat-emoji{font-size:150px;padding:20px 0 40px}

	#div-error{top:20%;font-size:150px}
}

@media(min-width:361px) AND (max-width:412px){
	/* mòbil */
	button, .botonot, .input-linia, .input-linia-b, .input-linia-mitja, .div-linia-bn, .div-linia-bn2, .span-imatge{border:none}

	input, textarea, .fs-camps, .legend-camps{font-size:20px;border:1px solid #FFB48C}
	select{font-size:24px;border:1px solid #FFB48C;width:342px}

	h1{font-size:22px}			/*h1{font-size:26px} */
	h2{font-size:20px}

	#div-index{margin:5px auto 0}
	.div-mobil{min-width:380px;padding-top:5px}
	.fs-mobil{min-height:450px}
	#div-radios{padding:20px 0 0 10px}
	.radio_container, .lbl-form, .container, .div-linia, .div-linia-10, .input-linia, .input-linia-b, .div-linia-bn, .div-linia-bn2, .input-linia-mitja, button, .span-imatge, .botonot{
		font-size:24px
	}

	/* centrar verticalment text i radi */
	.radio_checkmark{margin-top:5px}

	.div-linia{margin:15px 0 0 0}
	button{padding:5px 0;margin-bottom:10px}

	/* operario */
	.div-mobil-cont{min-height:296px}
	.div-linia-op{margin:40px 0}

	.div-linia-left, .div-linia-right, .input-linia-mitja{width:158px}

	.div-linia-left-codis, .input-linia-b{width:290px;font-size:38px}
	.div-linia-right-codis, .boto1{width:80px;font-size:34px}

	.div-llista{height:300px}
	.a-codi{font-size:20px;margin:15px 0}
	.leg-font{font-size:22px}

	/* operario_contenedor */
	.botonot{font-size:28px}
	.input-linia{width:390px}
	.span-imatge, .div-linia-bn{width:394px}
	.div-linia-bn2{width:324px}

	.input-linia-mitja{width:161px}
	.input-codi{font-size:40px}

	.checkmark{margin-top:5px}
	#span-resultat-emoji{font-size:200px}
	#div-error{top:20%;font-size:150px}
}

@media(min-width:413px) AND (max-width:428px){
	/* mòbil */
	button, .botonot, .input-linia, .input-linia-b, .input-linia-mitja, .div-linia-bn, .div-linia-bn2, .span-imatge{border:none}

	input, textarea, .fs-camps, .legend-camps{font-size:20px;border:1px solid #FFB48C}
	select{font-size:24px;border:1px solid #FFB48C;width:342px}

	h1{font-size:22px}
	h2{font-size:20px}

	#div-index{margin:5px auto 0}
	.div-mobil{min-width:380px;padding-top:5px}
	.fs-mobil{min-height:450px}
	#div-radios{padding:20px 0 0 10px}
	.radio_container, .lbl-form, .container, .div-linia, .div-linia-10, .input-linia, .input-linia-b, .div-linia-bn, .div-linia-bn2, .input-linia-mitja, button, .span-imatge, .botonot{
		font-size:24px
	}

	/* centrar verticalment text i radi*/
	.radio_checkmark{margin-top:5px}

	.div-linia{margin-top:30px}
	button{padding:5px 0;margin-bottom:10px}

	/* operario */
	.div-mobil-cont{min-height:296px}
	.div-linia-op{margin:40px 0}

	.div-linia-left, .div-linia-right, .input-linia-mitja{width:158px}

	.div-linia-left-codis, .input-linia-b{width:290px;font-size:38px}
	.div-linia-right-codis, .boto1{width:80px;font-size:34px}

	.div-llista{height:300px}
	.a-codi{font-size:20px;margin:15px 0}
	.leg-font{font-size:22px}

	/* operario_contenedor */
	.botonot{font-size:28px}
	.input-linia{width:390px}
	.span-imatge, .div-linia-bn{width:394px}
	.div-linia-bn2{width:324px}

	.input-linia-mitja{width:161px}
	.input-codi{font-size:40px}

	.checkmark{margin-top:5px}
	#span-resultat-emoji{font-size:200px}
	#div-error{top:20%;font-size:150px}
}

@media(min-width:429px) AND (max-width:1349px){
	/*  */
	input, textarea, select, .fs-camps, .legend-camps{font-size:20px;border:1px solid #FFB48C}
	select{font-size:20px}
	h1{font-size:18px}
	h2{font-size:16px}

	#div-index{margin:5px auto 0}
	.div-mobil{width:350px;padding-top:5px}
	.fs-mobil{min-height:450px}
	#div-radios{padding:20px 0 0 10px}
	.radio_container, .lbl-form, .container{font-size:20px}

	/* centrar verticalment text i radi*/
	.radio_checkmark{margin-top:1px}

	.div-linia{margin-top:12px}
	button, .span-imatge{padding:5px 0;margin-bottom:10px}

	/* operario */
	.div-mobil-cont{min-height:296px}
	.div-linia-op{margin:40px 0}
	.div-llista{height:180px}

	.div-linia-left, .div-linia-right, .input-linia-mitja{width:158px}
	.div-linia-left-codis, .input-linia-b{width:266px;font-size:31px}
	.div-linia-right-codis, .boto1{width:55px;font-size:30px}

	.div-llista{height:200px}
	.a-codi{font-size:20px;margin:15px 0}
	.leg-font{font-size:18px}


	/* operario_contenedor */
	.botonot{font-size:24px}
	select{width:332px}
	.input-linia{width:326px}
	.span-imatge, .div-linia-bn{width:330px}
	.div-linia-bn2{width:314px}

	.input-linia-mitja{width:161px}
	.input-codi{font-size:39px}

	input['type=datetime-local']{width:401px}
	#span-resultat-emoji{font-size:200px}

	#div-error{top:20%;font-size:150px}
}

@media(min-width:1350px) and (max-width:1365px){
	input, textarea, select, .fs-camps, .legend-camps{font-size:20px;border:1px solid #FFB48C}
	select{font-size:22px}
	h1{font-size:18px}
	h2{font-size:16px}

	#div-index{margin:50px auto 0}
	.div-mobil{width:360px}
	.fs-mobil{min-height:450px}
	#div-radios{padding:20px 0 0 20px}
	.radio_container, .lbl-form, .container{font-size:20px}

	/* centrar verticalment text i radi*/
	.radio_checkmark{margin-top:1px}

	.div-linia{margin-top:12px}
	/* button, .span-imatge{padding:5px 0;margin-bottom:10px} */


	/* operario */
	.div-mobil-cont{min-height:296px}
	.div-linia-op{margin:40px 0}

	.div-linia-left, .div-linia-right{width:163px}
	.div-linia-left-codis, .input-linia-b{width:266px;font-size:31px}
	.div-linia-right-codis, .boto1{width:50px;font-size:30px}

	.div-llista{height:180px}
	.a-codi{font-size:16px;margin:20px 0}
	.leg-font{font-size:14px}

	/* operario_contenedor */
	select{width:332px}
	.input-linia{width:326px}

	.botonot{margin-top:10px}

	.span-imatge, .div-linia-bn{width:330px}
	.div-linia-bn2{width:314px}

	.input-linia-mitja{width:161px}
	.input-codi{font-size:39px}

	input['type=datetime-local']{width:401px} /* pantalla */
	#span-resultat-emoji{font-size:200px}

	#div-error{top:20%;font-size:250px}
}
@media(min-width:1366px) and (max-width:1535px){
	input, textarea, select, .fs-camps, .legend-camps{font-size:18px;border:1px solid #FFB48C}
	select{font-size:22px}
	h1{font-size:18px}
	h2{font-size:16px}

	#div-index{margin:10px auto 0}				/* pantalla 1366 */
	.div-mobil{width:360px}						/* pantalla 1366 */
	.fs-mobil{min-height:300px}					/* pantalla 1366 */
	#div-radios{padding:20px 0 0 20px}
	.radio_container, .lbl-form, .container{font-size:20px}

	/* centrar verticalment text i radi*/
	.radio_checkmark{margin-top:1px}

	.div-linia{margin-top:12px}
	button{padding:5px 0;margin-bottom:10px}

	/* operario */
	.div-mobil-cont{min-height:260px}			/* pantalla 1366 */
	.div-linia-op{margin:30px 0}				/* pantalla 1366 */

	.div-linia-left, .div-linia-right{width:163px}
	.div-linia-left-codis, .input-linia-b{width:266px;font-size:32px}
	.div-linia-right-codis, .boto1{width:60px;font-size:31px}

	.div-llista{height:200px}					/* pantalla 1366 */
	.a-codi{font-size:20px;margin:15px 0}
	.leg-font{font-size:18px}

	/* operario_contenedor */
	select{width:342px}							/* pantalla */
	.input-linia{width:336px}					/* pantalla */
	.span-imatge, .div-linia-bn{width:340px}	/* pantalla */
	.div-linia-bn2{width:324px}					/* pantalla */

	.input-linia-mitja{width:161px}				/* pantalla */
	.input-codi{font-size:39px}

	input['type=datetime-local']{width:401px} /* pantalla */
	#span-resultat-emoji{font-size:200px}

	#div-error{top:20%;font-size:250px}
}

@media(min-width:1536px){
	input, textarea, select, .fs-camps, .legend-camps{font-size:20px;border:1px solid #FFB48C}
	select{font-size:24px}
	h1{font-size:22px}
	h2{font-size:20px}

	#div-index{margin:50px auto 0}
	.div-mobil{width:360px}
	.fs-mobil{min-height:450px}
	#div-radios{padding:20px 0 0 20px}
	.radio_container, .lbl-form, .container{font-size:20px}

	/* centrar verticalment text i radi*/
	.radio_checkmark{margin-top:1px}

	.div-linia{margin-top:12px}
	button{padding:5px 0;margin-bottom:10px}

	/* operario */
	.div-mobil-cont{min-height:338px}
	.div-linia-op{margin:50px 0}
	.div-linia-left, .div-linia-right{width:163px}

	.div-linia-left-codis, .input-linia-b{width:266px;font-size:32px}
	.div-linia-right-codis, .boto1{width:60px;font-size:31px}

	.div-llista{height:400px}
	.a-codi{font-size:20px;margin:20px 0}
	.leg-font{font-size:18px}

	/* operario_contenedor */
	select{width:342px}							/* pantalla */
	.input-linia{width:336px}					/* pantalla */
	.span-imatge, .div-linia-bn{width:340px}	/* pantalla */
	.div-linia-bn2{width:324px}					/* pantalla */

	.input-linia-mitja{width:161px}				/* pantalla */
	.input-codi{font-size:39px}

	input['type=datetime-local']{width:401px} /* pantalla */
	#span-resultat-emoji{font-size:200px}

	#div-error{top:20%;font-size:250px}
}