* { box-sizing: border-box; }

*::-webkit-scrollbar { width: 6px!important; height: 6px!important; }
*::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,.3); }
*::-webkit-scrollbar-track { background: rgba(255,255,255,.08); }

@keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes fadeScale {
	0% { transform: scale(0.9, 0.9); opacity: 0; }
	100% { transform: none; opacity: 1; }
}

@-webkit-keyframes fadeScale {
	0% { -webkit-transform: scale(0.9, 0.9); opacity: 0; }
	100% { -webkit-transform: none; opacity: 1; }
}

body {
	margin: 0;
	background-color: #303030;
	padding-top: 56px;
}

header {
	width: 100%;
	height: 56px;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #607d8b;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	padding: 0 16px;
	z-index: 999;
	transition: background-color 0.375s;
	text-transform: capitalize;
}

header i {
	color: rgba(0,0,0,0.54);
	padding: 16px 24px 16px 0;
}

header a {
	display: inline-block;
	vertical-align: top;
}

header span {
	font-family: "Roboto", sans-serif;
	font-size: 20px;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 56px;
	display: inline-block;
	vertical-align: top;
}

content {
	display: block;
	width: 100%;
	margin: 0 auto;
}

.date-bar {
	width: 100%;
	height: 48px;
	line-height: 48px;
	color: #FFF;
	font-size: 14px;
	font-family: "Roboto Mono";
	font-weight: 500;
	padding: 0 16px;
	background-color: var(--color-700);
	transition: background-color 0.375s;
	-webkit-transition: background-color 0.375s;
}

.date-bar .left { float: left; }
.date-bar .right { float: right; }

.date-bar i {
	height: 48px;
	width: 24px;
	font-size: 24px;
	color: rgba(0,0,0,0.54);
	display: inline-block;
	vertical-align: top;
	line-height: 48px;
}

.date-bar .left i { margin-right: 16px; }
.date-bar .right i { margin-left: 16px; }

@media (min-width: 768px) {
	body { padding-top: 64px; }
	header { height: 64px; padding: 0 24px; }
	header i { padding: 20px 32px 20px 0; }
	header span { line-height: 64px; }

	.date-bar { padding: 0 80px; }
	content { padding: 0 80px; }
}