#js-mc-app {
		display: grid;
		grid-template-areas: 'search-nav main side';
		grid-template-columns: 2fr 6fr 2fr;
		grid-gap: 2em;
	}

	@media only screen and (max-width: 1599px) {
		#js-mc-app {
			grid-template-areas: 'search-nav main' 'side side';
			grid-template-columns: 1fr 2fr;
			grid-column-gap: 1em;
		}
	}

	@media only screen and (max-width: 999px) {
		#js-mc-app {
			grid-template-areas: 'search-nav' 'main' 'side';
			grid-template-columns: 1fr;
			grid-row-gap: 1em;
		}
	}

	.mc-logo {
		margin: 10px auto 20px;
		padding: 10px 0 20px 15px;
		border-bottom: 1px solid #030b0c1c;
	}

	.mc-logo img {
		max-width: 200px;
	}

	.mc-search {
		position: relative;
		margin-bottom: 20px;
	}

	.mc-search-results:empty {
		display: none;
	}

	.mc-search-results {
		position: absolute;
		background: #fff;
		box-shadow: 3px 3px 13px 0 #3333331a;
		border: 1px solid #dedede;
		padding: 10px;
		z-index: 1;
	}

	.mc-search-results .search-result {
		cursor: pointer;
		border-radius: 3px;
		padding: 8px 15px;
	}

	.mc-search-results .search-result:hover {
		background-color: #F7F9F9;
	}

	.search-nav {
		grid-area: search-nav;
	}

	.search-tree ul {
		padding-left: 0;
		list-style: none;
	}

	.search-tree ul ul li {
		padding-left: 20px;
	}

	.search-tree span.group::before {
		fill: #15839A;
		background: url('https://lh3.googleusercontent.com/4jh6CdSUJ01QRwP4AuGJ1-melrta2Q3MfpIIBl64JxFQLu862R1bdC5g9EwmXRdkBVBEz7YexqRdJxLCLa5H7-nPQQ=s10') no-repeat left center;
		margin-left: -20px;
		margin-top: 5px;
		content: '';
		display: block;
		position: absolute;
		width: 10px;
		height: 10px;
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: -webkit-transform .2s ease-out;
		transition: -webkit-transform .2s ease-out;
		transition: transform .2s ease-out;
		transition: transform .2s ease-out, -webkit-transform .2s ease-out;
	}

	.search-tree span.group.opened::before {
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}

	.search-tree li {
		color: #3E3E3E;
		font-size: 15px;
		font-family: 'Roboto', sans-serif;
	}

	.search-tree li span {
		display: block;
		width: 100%;
		cursor: pointer;
		margin: 3px 0;
	}

	.search-tree li div {
		padding: 5px 10px 5px 30px;
	}

	.search-tree span:hover {
		color: #333;
		background-color: #f7f9f96b;
		text-decoration: underline;
	}

	.search-tree span.active {
		background: #f7f7f7;
		border-radius: 3px;
		font-weight: bold;
	}

	.search-tree span.active:hover {
		text-decoration: none;
		color: #3E3E3E;
	}

	.search-tree span:active {
		background: #F7F9F9;
	}

	#current-article {
		border-radius: 10px;
		grid-area: main;
		align-self: start;
	}

	#current-article article {
		background-color: #f7f9f9;
	}

	#current-article article > h1 {
		font: normal 20px 'Montserrat';
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		margin: 0;
		padding: 10px 15px;
		background-color: #2980b9;
		color: white;
	}

	#current-article section {
		font-size: 15px;
		color: #1B1B1B;
		padding: 15px;
		overflow: auto;
	}

	#current-article section ul:first-child {
		padding-left: 20px;
	}

	#current-article section img {
		border-radius: 5px;
		background-color: #a7a7a7;
	}

	#current-article section h1 {
		color: #3E3E3E;
		font-weight: bold;
		font-size: 1.5em;
	}

	#current-article section h1:first-child {
		margin-top: 0;
	}

	#current-article section h2 {
		font-weight: bold;
		font-size: 1.4em;
	}

	#current-article section h3 {
		font-weight: bold;
		font-size: 1.3em;
	}

	#current-article section li {
		margin-bottom: 10px;
	}

	#current-article section ol > li {
		margin-bottom: 20px;
	}

	#current-article section li > img {
		margin-top: 10px;
	}

	#loader {
		padding: 10px;
		background-color: white;
	}

	.mc-image {
		margin-bottom: 15px;
	}

	.mc-image img {
		border: 5px solid #F7F9F9;
		margin: 10px 0;
	}

	.highlighted {
		padding: 3px 5px;
		background: linear-gradient(#2980b9, #00AEEF);
		border-radius: 3px;
		font-weight: bold;
		font-style: normal;
		color: white;
		margin-left: 1px;
		margin-right: 1px;
	}

	.selected-article {
		width: 15px;
		margin-left: 8px;
	}

	.form-flex {
		margin-bottom: 10px;
	}

	.form-flex button {
		margin-top: 10px;
		border: none;
		background-color: #2980b9;
		color: #fff;
		height: 26px;
		border-radius: 3px;
	}

	.no-articles {
		color: grey;
	}

	.css-hand {
		cursor: pointer;
	}

	.css-link {
		text-decoration: underline;
	}

	.page-mattercontrol a {
		transition: all 0.2s ease-in-out;
	}

	.mattercontrol {
		grid-area: side;
		align-self: start;
		padding: 20px;
		background-color: #F7F9F9;
		text-align: center;
	}

	.mattercontrol img {
		width: 100%;
		max-width: 230px;
		margin-bottom: 15px;
	}

	.mattercontrol .title {
		display: block;
		font-weight: bold;
		font-family: 'Montserrat', sans-serif;
	}

	.mattercontrol h2.title {
		margin-top: 0;
		font-size: inherit;
	}

	.mattercontrol .subtitle {
		display: block;
		font-family: 'Roboto', sans-serif;
		margin-bottom: 10px;
		color: #797979;
	}

	.mattercontrol a span {
		display: block;
		background: #00AEEF;
		color: #fff;
		font-family: 'Montserrat', sans-serif;
		font-weight: bold;
		font-size: 15px;
		border-radius: 3px;
		padding: 7px 15px;
		border: 2px solid #00AEEF;
		transition: all 0.2s ease-in-out;
	}

	.mattercontrol a:hover {
		text-decoration: none;
	}

	.mattercontrol a:hover span {
		background: transparent;
		color: #00AEEF;
		border-color: #00AEEF;
	}

	pre {
		background-color: #f9f2f4;
		color: #c7254e;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	.doFadeIn {
		-webkit-animation: fadeIn .7s;
		animation: fadeIn .7s;
	}