/*
// Granollers Primàries
// Edullers
// Versió de mostra
// sacaix.com
*/

/* Estils generals */
@media all{
	
	html,body{
		height: 100%;
	}
	
	body{
		display: flex;
		margin: 0;
		padding: 0;
		font-family: Arial;
		font-size: 14px;
	}
	a { color: #de5755; text-decoration: none; }
	a:link { color: #de5755; text-decoration: none; }
	a:visited { color: #de5755; text-decoration: none; }
	a:active { color: #de9799; text-decoration: none; }
	a:hover { color: #de9799; text-decoration: none; }
	
	/* Estils per al mapa Leaflet */
	.mapaFosc{
		filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.6);
	}
	/* Canviar el color del marcador
	img.leaflet-marker-icon{
		filter: hue-rotate(145deg) brightness(1.10);
	} */
	.leaflet-control-attribution{
		display: none;
	}
	/* fi Estils mapa Leaflet*/
	
	header{
		z-index: 1;
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 36px;
		padding: 8px 0;
		text-align: center;
		background-color: #de5755;
		background: linear-gradient(-40deg, rgba(222,87,85,1) 0%, rgba(48,50,76,1) 100%);
	}
	header img{
		max-width: 90%;
		height: 32px;
	}
	a:hover{
		opacity: 0.7;
	}
	
	h1{
		line-height: 18px;
	}
	
	main{
		display: flex;
		flex-direction: column;
		width: 320px;
		height: calc(100vh - 10px);
		margin: 0;
		padding: 5px 20px;
		color: #fefefe;
		background-color: #de5755;
		background: linear-gradient(-40deg, rgba(222,87,85,1) 0%, rgba(48,50,76,1) 100%);
	}
	aside{
		z-index: 0;
		width: 100%;
		height: 100vh;
		background-color: #de5755;
	}
	
	.logoPRIG,
	.logoPRIG2{
		text-align: center;
		margin-top: auto;
	}
	.logoPRIG img{
		max-width: 200px;
	}
	.logoPRIG a:hover,
	.logoPRIG2 a:hover{
		opacity: 0.7;
	}
	.logoPRIG2{
		display: none;
	}
	
	a{
		transition: 0.2s;
	}
	
	p{
		line-height: 18px;
		margin: 8px 0 14px 0;
		padding: 0;
	}
	
	hr{
		width: 100%;
		border: 1px solid #de5755;
		margin: 0;
		padding: 0;
	}
	
	.taulaPlaces{
		border-collapse: collapse;
		margin: 10px 0;
	}
	.taulaPlaces th{
		margin: 0;
		padding: 3px 6px 3px 0;
		text-align: left;
		vertical-align: top;
	}
	.taulaPlaces td{
		margin: 0;
		padding: 3px 6px 3px 0;
		vertical-align: top;
	}
	.dreta{
		text-align: right !important;
	}
	.colorGris{
		color: #7c7c7c;
	}
	.colorCorall{
		color: #de5755;
	}
	
	.opcions{
		display: none;
	}
	
	/* Select */
	.selects{		
		margin: 0 0 10px 0;
		padding: 4px;
		color: #fefefe;
		background-color: #de5755;
		border: 1px solid #3e3a3a;
		border-radius: 4px;
	}
	.selects:hover{
		color: #fefefe;
		background-color: #de5755;
	}
	
	/* Checkbox */
	.checkbox00{
		display: block;
		position: relative;
		margin-bottom: 2px;
		padding-left: 24px;
		cursor: pointer;
		font-size: 14px;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	.checkbox00 input{
		position: absolute;
		opacity: 0;
		cursor: pointer;
		height: 0;
		width: 0;
	}
	.checkmark{
		position: absolute;
		top: 0;
		left: 0;
		height: 20px;
		width: 20px;
		background-color: #cccccc;
		border-radius: 2px;
	}
	.checkbox00:hover input ~ .cm00{
		background-color: #e8b2b1;
	}
	.checkbox00:hover input ~ .cm01{
		background-color: #a3c6de;
	}
	.checkbox00:hover input ~ .cm02{
		background-color: #9bcdc5;
	}
	.checkbox00:hover input ~ .cm03{
		background-color: #d7b2d3;
	}
	.checkbox00 input:checked ~ .cm00{
		background-color: #de5755;
	}
	.checkbox00 input:checked ~ .cm01{
		background-color: #1789d7;
	}
	.checkbox00 input:checked ~ .cm02{
		background-color: #36ad99;
	}
	.checkbox00 input:checked ~ .cm03{
		background-color: #c271ba;
	}
	.checkmark:after{
		content: "";
		position: absolute;
		display: none;
	}
	.checkbox00 input:checked ~ .checkmark:after{
		display: block;
	}
	.checkbox00 .checkmark:after{
		left: 6px;
		top: 2px;
		width: 5px;
		height: 10px;
		border: solid white;
		border-width: 0 3px 3px 0;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	/* fi Checkbox */
	
	/* Buttons */
	.buttons{
		margin: 0;
		padding: 8px 16px;
		font-size: 14px;
		font-weight: bold;
		letter-spacing: 2px;
		color: #fefefe;
		background-color: #de5755;
		border: 0;
		border-radius: 4px;
		cursor: pointer;
		transition: 0.2s;
	}
	.buttonOp{
		height: 46px;
		border-radius: 4px;
	}
	.buttons img{
		max-height: 16px;
		transform: translateY(2px);
	}
	.buttonsInfo{
		width: 24px;
		height: 24px;
		font-size: 16px;
		padding: 1px 6px 0 7px;
		transform: translateY(-3px);
		border-radius: 50%;
	}
	.buttons:hover{
		color: #fefefe;
		background-color: #30324c
	}
	.buttons:active{
		color: #30324c;
		background-color: #fefefe;
	}
	/* fi Buttons */
	
	.pcNo{
		display: none;
	}
	
	.formOpcions{
		display: flex;
		flex-direction: column;
		margin: 0;
		padding: 0;
	}
	.formOpcions div{
		margin: 10px 20px 0 0;
		padding: 0;
	}
	.formOpcions label{
		margin: 8px 8px 8px 0;
	}
	
	/* Capes MODALS */
	.info{
		cursor: pointer;
	}
	#modalInfo{
		z-index: 2;
		display: none;
		position: absolute;
		top: 120px;
		left: 10%;
		right: 10%;
		max-width: 600px;
		padding: 20px;
		color: #fefefe;
		background-color: #30324c;
		border-radius: 4px;
	}
	#modalFonsInfo,
	#modalFonsForm{
		z-index: 1;
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%; 
		height: 100%;
		overflow: auto;
		background-color: rgba(0,0,0,0.6);
	}
	.creu{
		color: #de5755;
		float: right;
		font-size: 32px;
		font-weight: bold;
		transition: var(--transicio);
	}
	.mostra{
		color: #de5755;
		float: right;
		font-size: 32px;
		font-weight: bold;
		transition: var(--transicio);
	}
	.creu:hover, .creu:focus{
		color: #fefefe;
		text-decoration: none;
		cursor: pointer;
	}
	.logoInfo{
		display: block;
		max-width: 300px;
		margin-left: auto;
		margin-right: auto;
	}
	/* fi Capes MODALS */
}







@media all and (max-height: 800px){
	.opcions{
		display: block;
	}
	
	.taulaPlaces{
		display: none;
	}
	
	.pcNo{
		display: block;
	}
	
	.tabletNo{
		display: none;
	}
}



@media all and (max-height: 600px){
	.logoPRIG{
		display: none;
	}
	.logoPRIG2{
		display: block;
	}
}




@media all and (max-width: 650px){
	
	body{
		flex-flow: column;
	}
	
	header{
		display: block;
	}
	
	aside{
		width: 100%;
		height: auto;
		flex: 2;
	}
	
	main{
		width: calc(100% - 40px);
		height: 275px;
	}
	
	.formOpcions{
		flex-direction: row;
	}
	
	.opcions{
		display: none;
		position: absolute;
		right: 20px;
		bottom: 225px;
	}
	
	.buttonOp{
		border-radius: 0 0 4px 4px;
	}
	
	.taulaPlaces{
		display: none;
	}
	
	.pcNo{
		display: block;
	}
	
	.tabletNo{
		display: none;
	}
	
	.opcions{
		display: block;
	}
	.logoPRIG,
	.logoPRIG2{
		display: none;
	}
	
}