:root {
	--dark-color: #286090;
	--medium-color: ;
	--light-color: #93bbd9;
	--border-color: #628fb4;
	--container-color: #c2d9e6;
	--font-color: #0d304e;
	--inefc-color: rgb(60 112 232);
}

body {
	min-height:100%;
  	margin: 0;
  	font-family: Arial, Helvetica;
  	/*background: var(--dark-color);*/
}

cap {
    display: block;
	position: fixed; /* Menú de navegació fixe */
	top: 0; /* Posició al capdamunt de la pà gina */
	width: 100%; /* Amplada total */   
	padding-top: 14px;
	min-height: 52px;
	background: var(--dark-color);
	z-index: 3;
}

.container {
	padding: 0 6% 3em 6%;
	margin: 70px 14% 0px 14%;
	font-size: 13.5px;
	/*border: 2.5px solid var(--border-color);
	background-image: linear-gradient(white,var(--container-color) 50%, white);*/

}

.containerInici {
   display: flex;
   flex-direction: column; /* vertical */
   align-items: center;
   max-width: 400px;  /* limita l'amplada màxima */
   min-width: 300px;
   margin: 0 auto;    /* centra el formulari */
   padding: 1em;
   gap: 0.4em;        /* espai entre elements */
}

.contenidorFormulari {
	display: flex;
	flex-direction: column; /* vertical */
	align-items: center;
	width: 100%;
	margin: 0 auto;    /* centra el formulari */
	padding: 0 1em 0 1em;
	/*gap: 0.4em;     */
}

form {
	width: 100%;;
}

#block-ui {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	z-index: 9999;
	cursor: progress;
}

.contenidorCaptcha {
	display: flex;
	justify-content: center;  /* Centra el captcha horitzontalment */
	width: 100%;
	margin-top: .5em;
}

.contenidorAcceptacio {
	display: flex;
	justify-content: center;
	align-items: start;
	margin: 1em .3em;
	padding: 3px 3px;
}

h2 {
	padding-top: 1em;
	padding-bottom: 0.2em;	
	margin: auto;
	font-size: 1.8em;
	/*color: var(--dark-color);*/
}

.alerta {
	/*text-align: justify;
	font-size: 1.5em;	*/
	font-weight: bold;
	padding: 5px;
	/*justify-content: center;
	/*background-image: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.9)), url('./img/alert.svg');	
	background-repeat: no-repeat;
	background-position: center;
	background-size: 4em;*/
}

.alertaMsg {
	/*font-size: 1.2em;*/
	text-align: justify;
	opacity: 0.8;
	margin-top:1.2;
	margin-bottom: 0.4em;	
	border: 2px solid gray;	
	border-right: 2px solid gray;
	border-style: grove;
	padding: 0.2em;
}

.alertaImg {
	opacity: 0.6;
}

.msgAlerta {
	color: red;
	font-style: italic;	
}

.taulaResultats {
	font-size: 14.5px;
	font-weight: 500;
}

.recuadre {
	width: 100%;
	font-size: 16px;
	padding: 20px 40px;
	background: White;
}

* {
  box-sizing: border-box;
}

.linia {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  margin: 0 0;	
}

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  width: 100%;
  margin: 0 0;
  justify-content: center;
  column-gap: 1em !important;
}

.rowImg {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  margin: 0 0;
  justify-content: center;
}

.row_btn {
	margin: 0 -0.6em;	
}

.col-15 {
  -ms-flex: 15%; /* IE10 */
  flex: 15%;	
}

.col-25 {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
}

.col-30 {
  -ms-flex: 30%; /* IE10 */
  flex: 30%;	
}

.col-50 {
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
}

.col-70 {
  -ms-flex: 70%; /* IE10 */
  flex: 70%;
}
.col-75 {
  -ms-flex: 75%; /* IE10 */
  flex: 75%;
}

.col-100 {
  -ms-flex: 100%; /* IE10 */
  flex: 100%;
}

.col-15,
.col-25,
.col-30,
.col-50,
.col-70,
.col-75,
.col-100 {
  padding: 3px 0px;
}

input::placeholder {
	color: black;
}

.selectFormulari {
	width: 100%;
	height: 2.6em;
	padding-left: 0.6vw;
	border: 1px solid;
	color: var (--font-color);
	font-size: 1.1em;
	text-align: left;
	margin: 5px 0px;
}

.selectFormulari,
input[type=date] {
	padding-top: 1em;
}

.selectFormulari:focus {
    box-shadow: 0 0 0 2.3pt #93bbd9;	
}

input[type=text],
input[type=password],
input[type=date] {
	width: 100%;
	height: 2.6em;
	padding-left: 1vw;
	border: 1px solid black;
	color: #173652;
	font-size: 1.1em;
	text-align: left;
	margin: 5px 0px;

	outline: none;

    background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));	
}

/*
input:-internal-autofill-selected {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    box-shadow: 0 0 0px 1000px white inset !important; /* Canvia el color interior quan fem autofill 
    -webkit-text-fill-color: #000 !important;
}

input:-internal-autofill-previewed {
	padding-top: 0.85em;
	/*height:4em;
	font-size: 1.1em !important;
	border: 1px solid #628fb4;
	  -webkit-text-fill-color: #628fb4;
	  -webkit-font-smoothing: antialiased;  
	
  }
  
  input:-internal-autofill-selected {
	font-size: 1.1em !important;
  }
  */

 /*Evitar Autocomplete styles a Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    box-shadow: 0 0 0px 1000px white inset !important; /* Canvia el color interior quan fem autofill */
    -webkit-text-fill-color: #000 !important;
}

.campDeshabilitat {
    background-color: rgb(232, 240, 254) !important;
}

input:-webkit-autofill.campDeshabilitat {
    -webkit-box-shadow: 0 0 0px 1000px rgb(232, 240, 254) inset !important;
    box-shadow: 0 0 0px 1000px rgb(232, 240, 254) inset !important;
    -webkit-text-fill-color: #000 !important;
}


input[type=text]:not(.normal):valid,
input[type=password]:valid {
	padding-top: 0.7em;
}

.selectFormulari,
input[type=date] {
	padding-top: 0.7em;
}

.labelInput {
	position: relative;
}


label.labelForm, .labelFormL, .labelFormS {
	display: inherit;	
	position: absolute;
	top: 1.2em;
	left: 0.6em;
	color: black;
	/*background-color: white;*/
	width: fit-content;
    pointer-events: none;
	transition: 0.5s;
	/*-webkit-transition: opacity 1 ease;
	-moz-transition: opacity 1 ease;
	-o-transition: opacity 1 ease;
	transition: opacity 1 ease;*/
	/*z-index: 1000000000;*/
}

.labelFormS {
	Opacity: 0;
	/*filter: alpha(opacity=00);
	-webkit-opacity: 0;*/
}

label.labelFormVisible {
	position: absolute;
	top: 0.8em;
	left: 1vw;
	font-size: 0.8em;
	color: #53819b;
	background-color: transparent;
}

label.labelFormInformat {
	position: absolute;	
	font-size: 0.7em;
	top: 0.7em;
	left: 1.3em;
	color: #53819b;	
}

.textUsuari {
	color: blue;
	font-style: italic;		
}

input:focus ~ .labelForm,
input:valid ~ .labelForm,
input:focus ~ .labelFormL,
input:valid ~ .labelFormL,
input:focus ~ .labelFormS,
input:valid ~ .labelFormS
{
	font-size: 0.7em;
	top: 0.7em;
	left: 1.3em;
	color: #53819b;
	/*opacity: 0;*/	
}



input[type=text]:focus:not([readonly]),
input[type=password]:focus:not([readonly]) {
    box-shadow: 0 0 0 2.3pt #93bbd9;
}
	
input:focus ~ .labelFormVisible,
input:valid ~ .labelFormVisible {
	font-size: 0.8em;
	opacity: 1;
}

.icon-container {
	margin-bottom: 20px;
	padding: 7px 0;
	font-size: 24px;
}

a {
	color: #2196F3;
}

.notes {
	color: red;
	line-height: 25px;
}

span.negreta 
{
	font-weight: bold;
}

hr {
	border: 1px solid lightgrey;
}

.help-block {
	display: flex;
	margin-top: 2px;
	margin-bottom: 10px;
	color: #737373;
	visibility: hidden;
}

.ocult {
	visibility: hidden;	
}

#modifica{
	-ms-flex: 100%; /* IE10 */
	width: 100%;
}

.btn {
	width: 100%;
	padding: 12px;
	margin-top: 10px;
	border: none;
	cursor: pointer;
	font-size: 16px;
	/*background-color: var(--dark-color);*/
}

.btn-1 {
	color: white;
	background-color: #207ac3;
}

.btn-1:hover {
	/*background-color: #3fc76f; verd*/
}

#btn_consulta {
	transition: background-color 0.3s ease;
  }
  
#btn_consulta.valid,
#btn_continuar.valid {
background-color: #2adc68;
color: black;
}

#btn_consulta.invalid {
background-color:  #ff4040;
color: white;
}


.btn-2 {
	color: black;
	background-color: #d3e2ee;	
	
}

.btn-2:hover {
	color: black;
	background-color: var(--light-color);
}

.btn-3 {
	color: white;
	background-color: #1a5381;
}

.btn-3:hover {
	color: white;
	background-color: var(--font-color); /* #ff4040; (vermell)*/	
}

.btn-4 {
	color: white;
	background-color: #1a5381;
}

.btn-4:hover {
	background-color: #2adc68;
	color: black;
}


.btn-1:active,
.btn-2:active {
	color: black;
	background-color: white;
	outline: 3px solid black;
}

#botoInici {
	position: relative;
	margin: 10px 0px;
}


#usuariInici,
#contrasenyaInici {
	margin-bottom: -10px;
}

.error {
	border: 2px solid lightcoral;
}

#hdn {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;	
  /*overflow-wrap: break-word; */
}

/* Botó estils */

.desplegable {
  position: relative;
  top: 0.95em; 
}

.desplegable-contingut {
  display: none;
  position: absolute;
  z-index: 1;
  left: 6px;
  top:-8px;
}

.desplegable-fletxa {
	width: 75%;
	margin-top: 1em;
	margin-left: 0.5em;
	border: 1px solid;
	cursor: pointer;
	background: white;
	border-color: black;
}

.desplegable-contingut input {
	color: black;
	padding: 10px;
	text-decoration: none;
	background: white;
	border: 1px solid;
	border-color: #ccc;

}

.desplegable-contingut input:hover {	
background: var(--light-color);
}

.desplegable:hover .desplegable-contingut {
  display: block;
}

.desplegable-fletxa:before{
    content: "\03F4";
    color: var(--font-color);
}

.navMenu {
	padding: 0px 8px;
}

.navMenu .icon {
  display: none;
}

.navMenu a {
  text-decoration: none;
  font-size: 21px;
  color: #d5e0ea;
}

img.ico {

	/*https://codepen.io/sosuke/pen/Pjoqqp*/
	filter: invert(90%) sepia(17%) saturate(142%) hue-rotate(168deg) brightness(98%) contrast(90%);
}

.navMenuItem {
	padding: 16px 5px 6px 10px;
}

.itemFinal {
	padding-right: 10px;
}

.navMenuItem:hover {
	border-bottom: 3.5px solid white;
}

.navMenuItem:active {
	background-color: #204d74;
}



#navMenuText {
	margin-left: 6px; 
}

.animat a {
	display: block;
	font-size: 1.5em;
    color: black;
    text-align: center;
	vertical-align: top;
}

a {
	color: var(--inefc-color);
}

/* Page content */
.finestra {
  margin-left: 140px; /* Same as the width of the sidemenu */
}

.has-error .span-error,
.has-error .labelInput {
  color: #a94442;
}

.has-error {
  outline: 3px solid lightcoral !important;
  border: none !important;
}

.error-contrasenyes {
	display: flex;
	justify-content: center;
	color: #ff4040;
	font-weight: bold;
	margin: 1em 0;
}

.error-acceptacio {
	outline: 3px solid lightcoral !important;

}

/*
.has-error .inputForm {

  background-color: pink;
}*/

.has-warning .span-error,
.has-warning .label-form,
.has-warning .labelInput {
	color: #8a6d3b;
}

.dreta {
	float: right;
}

.esquerra {
	float:left;
}

/* Menu Navegació */



/* When the screen is less than 600 pixels wide, hide all links. Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 1200px) {

.container {
  margin: 70px 14%;
}

}

@media screen and (max-width: 992px) {

.container {
  margin: 70px 12%;
}

.labelFormL {
	opacity: 0;
}

.labelFormS {
	opacity: 1;
}

}

@media screen and (max-width: 768px) {

#navMenuText {display:none}

.container {
  margin: 70px 10%;
}

}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other (also change the direction - make the "cart" column go on top) */
@media screen and (max-width: 500px) {

.row {
	display: flex;
    flex-direction: column;
	gap: 0.6em;
}

.container {
  margin: 70px 8%;
}


.labelFormL {
	opacity: 1;
}

.labelFormS {
	opacity: 0;
}

}