body { font-size: 18px; }

footer { 
	
	color: #fff; 
	font-size: 16px;
}

footer a { color: #ffc107; }

footer a:hover, footer a:focus { color: #fff3cd; }


.ico { 
	
	color: #fff; 
	padding: 12px; 
	background-color: #dc3545;
	width: 1.7em;
	height: 1.7em;
}

.h-color { color: #007bff; }

.profile-pic { margin-left: calc(50% - 100px); }

.h-bar { 
	
	width: 100%; 
	border-radius: 0.9em;
	height: 2em;
	background-color: #e0e0e0;
	margin: 12px 0;
}

.h-bar-width { 
	
	border-radius: 0.9em;
	height: 2em;
	background-color: #22B14C;
	color: #fff;
	text-align: center;
}

.h-bar-label {
	margin-bottom: -12px;
	margin-top: 24px;
}

.sld { font-size: 10px; }

.sld-list { 
	
	margin-top: -5em; 
	margin-left: 0.2em;
}

.sld-num {
	
	margin-right: 0.1em;
	padding: 0.1em;
	padding-left: 0.4em;
	background-color: #007bff;
	color: #fff;
	width: 1.2em;
	height: 1.2em;
}

.sld-num.sel {
	
	background-color: #000;
	color: #fff;
}

.videoWrapper {
  	
	position: relative;
  	padding-bottom: 56.25%; /* 16:9 */
  	height: 0;
}

.videoWrapper iframe {
  	
	position: absolute;
  	top: 0;
  	left: 0;
  	width: 100%;
  	height: 100%;
}

.code-cont {
	
	width: 100%;
	overflow: auto;
}

.repl-cont { overflow: auto; }

.repl-sm, .repl-lg {
	
	font: 16px monospace;
	list-style: none;
	background-color: #222;
	color: #fff;
	padding: 8px 6px;
}

.repl-sm { width: calc(100% - 48px); }

.repl-lg {width: 1180px; }

.highlighter { 
	
	background-color: pink; 
	padding: 0 4px; 
}

.small-font { font-size: 14px; }

.nav-panel { 

	overflow: auto; 
	max-height: calc(100vh - 30px);
}

.with-indentation { margin-left: 2em; }

.border-color-exception { border-color:transparent !important; }

.lnk { color: orchid; }


@media (max-width: 991.98px) {
	
	.navigation-panel { display: none; }
}