/*
// IOC 2022 DAW M06B2
// Desenvolupament Web en Entorn Client
// EAC 6 Exercici 4 · Estils CSS
// Arnau Bellavista Mogas
*/

/* Estils generals */
@media all{
	
	/* Estils per al mapa LeafletJS
	/* Mapa mode Fosc */
	.map-tiles {
		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(210deg)
				brightness(1.40);
	}
	
	/* Estils per la pàgina HMTL */
	body {
		margin: 0px;
		padding: 0px;
		font-family: 'Share Tech', sans-serif;
		font-size: 16px;
		line-height: 26px;
		color: #eeeeee;
		background-color: #444444;
	}
	a:link { color:#cccc00; text-decoration:none; }
	a:visited { color:#cccc00; text-decoration:none; }
	a:active { color:#cccccc; text-decoration:none; }
	a:hover { color:#cccccc; text-decoration:none; }
	
	header {
		margin: 0 auto;
		padding: 0;
		min-height: 25px;
		font-size: 20px;
		color: #cccccc;
	}
	header > div, header > h1{
		display: inline-block;
		margin: 10px;
		padding: 10px;
	}
	
	#infoBtn{
		position: absolute;
		top: 20px;
		right: 20px;
		width: 32px;
		height: 32px;
		margin: 0;
		padding: 0 4px;
		font-size: 25px;
		float: right;
		color: #333333;
		background-color: #cccc00;
		border-radius: 20px;
		box-shadow: 0px 2px 10px #000000;
		cursor: pointer;
	}
	
	/* The Modal (background) */
	#info{
		z-index: 10;
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%; 
		height: 100%;
		overflow: hidden;
		background-color: rgba(0,0,0,0.5);
	}
	
	.info_contingut {
		width: 75%;
		color: #bbbbbb;
		margin: 20% auto;
		padding: 20px;
		background-color: #111111;
		border-radius: 4px;
	}
	.tanca {
		color: #dddddd;
		float: right;
		font-size: 20px;
		font-weight: bold;
	}
	.tanca:hover, .tanca:focus {
		color: #cccc00;
		text-decoration: none;
		cursor: pointer;
	}
	
	
	article{
		z-index: 1;
		min-height: 400px;
		background-color: #222222;
		box-shadow: 0px 0px 50px 10px rgba(0,0,0,0.5);
		/* box-shadow: 0px 0px 50px 10px #000000; */
	}
	article > div{
		width: 100%;
	}
	
	.cont{
		
	}
	.cont > div {
		display: inline-block;
		margin: 0px;
		padding: 8px 20px;
	}
	.dreta{
		float: right;
	}
	
	
	.infoIP{
		display: inline-block;
	}
		.capaIP, .creu {
			display: inline-block;
			cursor: pointer;
			height: 26px;
			padding: 6px 12px;
			margin: 10px;
			font-size: 18px;
			font-weight: bold;
			transition: 0.2s;
		}
		.capaIP {
			color: #eeeeee;
			border-radius: 2px;
			background-color: #333333;
			box-shadow: 0px 2px 10px #000000;
		}
		.capaIP:hover{
			background-color: #444444;
		}
		.capaIP:active{
			color: #666666;
			background-color: #cccc00;
		}
		.activa{
			color: #333333;
			background-color: #cccc00;
			box-shadow: -4px 0px 8px 4px rgba(0,0,0,0.4);
		}
		
		.creu{
			margin-left:-12px;
			background-color: #cc0000;
			color: #ffffff;
			border-radius: 0 2px 2px 0;
			box-shadow: 6px 0px 8px 4px rgba(0,0,0,0.4);
		}
		.creu:hover{
			background-color: #993333;
		}
		.creu:active{
			background-color: #800000;
		}
		.amagada{
			display: none;
		}
	
	.popup{
		z-index: 10;
		position: absolute;
		top: 160px;
		right: 20px;
		padding: 10px 18px;
		margin: 0 auto;
		color: #333333;
		font-size: 18px;
		font-weight: bold;
		background-color: #cccccc;
		border-radius: 2px;
		box-shadow: 0px 2px 20px #000000;
		opacity: 0;
		animation: alerta 5s;
		animation-iteration-count: 1;
	}
	.popupMissatge{
		color:#eeeeee;
		background-color: #2eb82e;
	}
	.popupAlerta{
		background-color: #cccc00;
	}
	.popupError{
		color:#eeeeee;
		background-color: #cc0000;
	}
	.warning{
		font-weight: normal;
		font-size: 28px;
	}
	@keyframes alerta {
		0% { display: block; opacity: 1; }
		75% { display: block; opacity: 1; }
		99% { display: block; opacity: 0; }
		100% { display: none; opacity: 0; }
	}

	
	footer {
		margin: 0px;
		padding: 60px 40px;
		text-align: center;
		font-size: 14px;
		line-height: 20px;
		color: #888888;
		letter-spacing: 1px;
		text-shadow: -1px -1px 1px #111111, 
					1px 1px 1px #555555;
	}
	footer a:link { color: #cccccc; text-decoration:none; }
	footer a:visited { color: #cccccc; text-decoration:none; }
	footer a:active { color: #999999; text-decoration:none; }
	footer a:hover { color: #999999; text-decoration:none; }
	
	#mapaid{
		z-index: 1;
		height: 60vh;
	}
	
	#consultaIP, #consultaURL{
		text-align: right;
	}
	
	/* Capçaleres i separadors */
	h1{
		line-height: 40px;
	}
	h2{
		line-height: 30px;
	}
	h3{
		line-height: 20px;
	}
	hr{
		border: 1px solid #333333;
	}
	
	.ombra{
		text-shadow: 0 2px 4px #000000;
	}
	
	input{
		font-family: 'Share Tech', sans-serif;
		font: 14px/17px Arial, Helvetica, sans-serif;  /*14px/17px*/
		color: #dddddd;
		background: #666666;
		padding: 4px;
		margin: 0;
		border: 0px solid #cccc00;
		border-radius: 4px;
	}
	input::placeholder {
		color: #999999;
	}
	#cercaURL{ width:150px; }
	#cercaIP{ width:108px; }
	
	button{
		margin: 0 4px 4px 0;
		padding: 5px 10px;
		font-family: 'Share Tech', sans-serif;
		font-size: 12px;
		letter-spacing: 1px;
		color: #dddddd;
		text-decoration: none;
		background-color: #888888;
		border: solid 0px #cccccc;
		border-radius: 4px;
		transition: 0.2s;
	}
	button:hover {
		opacity: 0.5;
	}
	
}




@media all and (max-width: 780px){
	
	.popup{
		z-index: 10;
		position: fixed;
		top: auto;
		bottom: 20px;
		left: 20px;
		right: 20px;
		padding: 10px 18px;
		margin: 0 auto;
	}
	
}



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



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