* {
	margin: 0;
	box-sizing: border-box;
}

@font-face {
	font-family: vazir;
	src: url('vazir.ttf') format('truetype');
}

.dvStartPageContainer {
	height: 100vh;
	width: 100vw;
	display: grid;
	grid-template-columns: 1fr 9fr;
	grid-template-rows: 1fr 19fr;
	grid-template-areas:
		"calendar flights"
		"planes flights";
}	

.dvCalendar {
	height: 50px;
	box-sizing: border-box;
	grid-area: calendar;
	display: flex;
	align-items: center;
	justify-content: center;
	border:2px solid black;
	gap: 5px;
}
.dvCalendar #txCalendar {
	all: unset;
	width: 95px;
	font-size: 0.8rem;
	text-align: center;
}
.dvCalendar .date-picker-x {
	left: 20%;
}

.dvPlanes {
	box-sizing: border-box;
	grid-area: planes;
	border: 2px solid black;
}
.dvPlane {
	width:100%;
	height: 80px;
	border-bottom: 2px dashed black;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.dvFlights {
	grid-area: flights;
	border: 2px solid black;
	overflow: auto;
	display: flex;
	--greyLowOpac: #8b8b8b4a;
}
/* Loading Style */
.dvFlightsLoading {
	position: absolute;
	width: 100%;
	background-color: #c1c1c1d6;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: colorChange 5s cubic-bezier(0.78, 0.02, 0.85, 1.27) infinite;
}
.dvActive{
	display: flex;
}
@keyframes colorChange {
	0% {background-color: #c1c1c1d6;}
	25% {background-color: #777777d6;}
	50% {background-color: #c1c1c1d6;}
	75% {background-color: #777777d6;}
	100% {background-color: #c1c1c1d6;}
}

.timeLineHour {
	stroke: var(--greyLowOpac);
}
.timeLineHalfHour {
	stroke: var(--greyLowOpac);
	stroke-dasharray: 5;
}

.pathCurrntLine {
	stroke: #4d4d4dba;
	stroke-width: 2.5px;
}
.txtLocalHour {
	fill: black;
}

.textDepArvAirport {
	fill: black;
}