@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
	margin: 0;
	padding: 0;
}

body {
	background-color: #fafafa;
	margin: 0;
	font-family: 'Montserrat', sans-serif;
}

h1{
	margin: 1% auto;
	font-size: 2.5em;
}

#title {
	margin: 5% 0 3% 0;
}

.nav {
	background-color: #4065AD;
	padding: 1em 2em;
	z-index: 1;
	width: 100%;
	justify-content: space-between;
}

.nav a {
	color: #e6e6e6 !important;
}

.navbar-toggler {
	color: #e6e6e6 !important;
	border-color: #e6e6e6!important;
}

.dropdown-menu {
	background-color: #4065AD !important;
}

.dropdown-item:hover{
	background-color: #557ecd;
}

#main {
	margin: 0 auto;
	border-radius: 1em;
	padding: 2em;
	background-color: #f2f2f2;
}

	#formCheck {
		margin: 1% auto;
		width: 90%;
	}
	
		#contStopWatch {
			margin: auto;
		}

		#bCheckIn {
			margin: 3%;
		}
		#bCheckOut {
			margin: 3%
		}
		#bBack {
			margin: 3% 3% 3% auto;
		}

#contentMessages {
	margin: 0 auto;
	padding: 0.5% 0;
	font-size: 1em;
}
	#loading {
		margin: 1rem auto;
		text-align: center;
		width: 50%;
	}

#registryContent {
	width: 80%;
	margin: 5% auto;
	font-size: 20px;
}

#footer {
	padding: 2em;
	color: #565656;
}

.foot {
	bottom: 0px;
	width: 100%;
	z-index: -1;
}

	@media (max-width: 576px) {
		#main {
			width: 100%;
		}

		#stopWatch {
			font-size: 3em;
			margin: 5% auto;
			display: flex;

		}

		#contentMessages {
			width: 60%;
		}

	}

	@media (max-width: 423px) {

		#stopWatch {
			font-size: 2em;
			margin: 5% auto;
			display: flex;
		}

		#loading {
			width: 80%;
		}
	}

	@media (min-width: 576px) {

		#stopWatch {
			font-size: 4.5em;
			margin: 5% auto;
			display: flex;

		}

		#contentMessages {
			width: 30%;
		}
	}

	@media (min-width: 768px) {
		#main {
			width: 70%;
		}
	}

	@media (min-width: 992px) {
		#main {
			width: 60%;
		}
	}

	@media (min-width: 1200px) {
		#main {
			width: 50%;
		}
	}

/*#table-section {
	overflow: auto;
	height: 28em;
}

#thead {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
}*/