@import url(./vars.css);
*{
	margin: 0rem;
	padding: 0rem;
	box-sizing: border-box;
	font-family: sans-serif;
}

.flex{
	display: flex;
}
.grid{
	display: grid;
}
.fcol{
	flex-direction: column;
}
.wrapper{
	height: 100vh;
	width: 100vw;
}
.header{
	height: 3.5rem;
	width: 100%;
	padding: .5rem 1rem;
	.btn-login{
		height: 100%;
		padding: 0 1rem;
		transition: all .1s ease-in;
		user-select: none;
		text-decoration: none;
	}
	.btn-login:hover{
		background-color: rgb(0, 53, 100);
	}
}
.jc{
	justify-content: center;
}
.ai{
	align-items: center;
}
.brand{
	height: 2rem;
	user-select: none;
	width: fit-content;
	gap: .1rem;
	.cloud{
		height: 100%;
		width: fit-content;
		display: grid;
		place-items: center;
		span{
			font-size: 1.8rem;
		}
	}
}
.f1-3{
	font-size: 1.3rem;
}
.f2{
	font-size: 2rem;
}
.f3{
	font-size: 3rem;
}
.f-9{
	font-size: .9rem;
}
.bold600{
	font-weight: 600;
}
.color-txt1{
	color: var(--txt-color);
}
.color-txt2{
	color: var(--txt-color2);
}
.color-txt3{
	color: var(--txt-color3);
}
.color-txt4{
	color: var(--txt-color4);
}
.color-txt5{
	color: var(--txt-color5);
}
.color-txt6{
	color: var(--txt-color6);
}
.color-txt7{
	color: var(--txt-color7);
}
.color-txt8{
	color: var(--txt-color8);
}
.color-txt9{
	color: var(--txt-color9);
}
.color-txt10{
	color: var(--txt-color10);
}
.bg1{
	background-color: var(--bg-color);
}
.bg2{
	background-color: var(--bg-color-header);
}
.bg3{
	background-color: var(--estacion);
}
.bg4{
	background-color: var(--bg-color2);
}
.bg5{
	background-color: var(--bg-color3);
}
.font-mono{
	font-family: "Space mono";
}
.font-bri{
	font-family: "Bricolage Grotesque";
}
.content,.content2,.content3{
	width: 100%;
	height: calc(100% - 7.5rem);
}
.content4{
	width: 100%;
	height: calc(100% - 4rem);
	.form{
		width: 30rem;
		height: fit-content;
		padding: 1.5rem;
		border: 1px solid var(--bg-color-header);
		border-radius: .2rem;
		gap: 1rem;
		.form-content{
			width: 100%;
			justify-content: left;
			gap: 1rem;
			.forgot.goto{
				width: 100%;
				text-decoration: none;
			}
			input{
				border: none;
				outline: none;
				border: 1px solid var(--bg-color-header);
				height: 2.5rem;
				padding: 0 1rem;
			}
			.btn-submit{
				width: 100%;
				height: 2.5rem;
				outline: none;
				border: none;
			}
			.btn-submit:hover{
				cursor: pointer;
				background-color: rgb(0, 83, 124);
				
				transition: all .1s ease-in;
			}
		}
	}
}
.content{
	gap: 1rem;
	p{
		width: 45rem;
		text-align: center;
	}
	a{
		height: 3rem;
		width: 9rem;
		text-decoration: none;
		transition: all .1s ease-in;
		user-select: none;
	}
	a:hover{
		background-color: rgb(0, 83, 124);
	}
}
.content2{
	padding-top: 1rem;
	.estaciones{
		height: 100%;
		width: 80%;
		align-items: baseline;
		gap: 1rem;
		.estaciones-title{
			height: fit-content;
		}
		#container{
			flex-wrap: wrap;
			width: 100%;
			height: fit-content;
			gap: 1.5rem;

			/* grid-template-columns: repeat(3,20rem); */
			a{
				background-color: var(--estacion);
				height: 7rem;
				flex: 0 0 21rem;
				border-radius: .5rem;		
				padding: .5rem .8rem;
				text-decoration: none;
				user-select: none;
				transition: all .1s ease-in;
				.ubicacion,.usuarios{
					gap: .5rem;
				}
				.usuarios{
					align-self: flex-end;
					margin-top: 1rem;
				}
			}
			a:hover{
				scale: 1.025;
			}
		}
	}	
}
.content3{
	padding: 1rem;
	.datos-estacion{
		height: 100%;
		width: 45%;
		border: 1px solid var(--bg-color-header);
		padding: 2rem;
		justify-content: space-between;
		.estacion-name{
			text-align: center;
		}
		.elem-title{
			font-weight: 600;
		}
		.elem-dato{
			color: var(--txt-color5);
			gap: .5rem;
		}
	}
	.datos-grafico{
		height: 100%;
		width: 55%;
		border: 1px solid var(--bg-color-header);
		.botonera{
			width: 100%;
			height: 4rem;
			padding: .5rem;
			.button{
				flex: 0 0 20%;
				border: none;
				border: 1px solid var(--bg-color);
				padding: .5rem;
				gap: .2rem;
				transition: all .2s;
				.btn-title{
					text-shadow: 1px 1px 1px black;
				}
			}
			.button:hover{
				background-color: rgb(0, 83, 124);
				cursor: pointer;
			}
		}
		.detalles{
			width: 100%;
			height: calc(100% - 4rem);
			.datos-detalles{
				width: 100%;
				height: 8rem;
				.cuadro{
					height: 100%;
					width: 12rem;
					.cuadro-title2{
						height: 100%;
						width: 100%;
						color: black;
						gap: .5rem;
					}
					.cuadro-info{
						width: calc(100% - 2rem);
						height: 100%;
						color: black;
						gap: .2rem;
						.grande,.grande2{
							width: 100%;
							height: 5.5rem;
							.texto-grande{
								font-size: 6rem;
							}
							.texto-chico{
								font-size: 2.6rem;
							}
						}
						.grande2{
							height: 100%!important;
						}
						.chico{
							width: 100%;
							height: 2.3rem;
							.chico-content{
								
								.chico-content-text{
									gap: .5rem;
								}
							}
						}
						
					}
				}
				.cuadro2{
					height: 100%;
					width: 10%;
					color: black;
				}
			}
		}
	}
	.graph{
		width: 100%;
		height: calc(100% - 8rem);
		padding: 0 1rem;
	}
}
.cuadro-title{
	height: 100%;
	width: 2rem;
	writing-mode: vertical-rl;
	color: black;
	transform: rotate(180deg);
}
.cuadro-title2{
	height: 100%;
	width: 5rem;
	color: black;
	gap: .5rem;
}
#chipid{
	display: none;
}
.ta{
	text-align: center;
}
.jcsb{
	justify-content: space-between;
}
.jcse{
	justify-content: space-evenly;
}
.dnone{
	display: none!important;
}
.btn-logout{
	height: 100%;
	padding: 0 1rem;
	width: 6rem;
	user-select: none;
	text-decoration: none;
	transition: all .1s ease-in-out;
	border-radius: .1rem;
}
.btn-logout:hover{
	background-color: rgb(0, 53, 100);
}
.msg-box{
	color: red;
}
.footer{
	width: 100%;
	height: 4rem;
	border-top: 1px solid var(--bg-color-header);
	padding-left: 1rem;
	user-select: none;
}
::-webkit-scrollbar{
	display: none;
}