html, body, .container.login {
	height: 100%;
	font-size: 13px;
}

body {
	font-family: 'Noto Sans', sans-serif;
	background: hsl(190, 100%, 96%) url(/img/pattern.svg) repeat;
	background-size: 24%;
}

h1 {
	color: #0C5460;
	font-weight: 400;
	font-size: 2em;
}

img {
	max-width: 100%;
}

.panel {
	padding: 3.5em 2em;
	box-shadow: 0 0 2em -1em rgba(0, 0, 0, .25);
	background: rgba(255, 255, 255, .8);
}

.container.login {
    display: flex;
    align-items: center;
}

.container.login input,
.container.login button,
.container.login .alert {
	font-weight: bold;
}

.container.login .illustration {
	max-width: 10em;
	margin-bottom: 2em;
}

.alert i.fas {
	opacity: .5;
	margin-right: .5em;
}

.add-hours {
	cursor: pointer;
}

.hidden {
	display: none;
}

p.footer {
	margin-top: 2em;
	font-size: .9em;
	color: #AAA;
}

p.footer strong {
	color: #0C5460;
}

p.footer a {
	color: #777;
}

.total {
	font-weight: 700;
	font-size: 2em;
}

#login-company-name {
	text-transform: capitalize;
}

.table td, .table th {
	padding: .5rem .75rem;
}

.table td:last-child {
	padding: .4em .75rem 0 .75rem;
}

.table .thead-light th, .table td, .table th {
	color: #0C5460;
}

.table .thead-light th {
	text-transform: uppercase;
	font-size: .9em;
	background-color: hsla(188, 78%, 41%, .25);
	color: hsla(189, 78%, 21%, .5);
}

.btn-group-sm > .btn, .btn-sm {
	font-size: .9em;
	padding: .15rem .5rem;
}

.progress {
	font-size: .9em;
}

.progress-bar {
	font-weight: bold;
}

.progress-total {
	position: absolute;
	right: 2em;
	font-weight: bold;
	color: #555;
	margin-top: .25em;
	background: #FFF;
	border-radius: .3em;
	padding: 0 .25em;
}