html {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
}

body {
	font-family: sans-serif;
	font-size: 1em;
	overflow: auto;
	width: 100%;
	height: 100%;
}

#left_half {
	position: absolute;
	top: 0;
	left: 0;
	width: 30%;
	height: 100%;
	margin-top: 0;
	display: block;
	background-color: hsl(220, 10%, 40%);
	color: #eee;
}

#right_half {
	position: absolute;
	top: 0;
	width: 70%;
	left: 30%;
	height: 100%;
	padding-top: 3em;
}

.ww-login-overlay {
	/* position: absolute;
	top: 0;
	left: 0; */
	width: 100%;
	/* height: 100%; */
	padding-top:1.2em;
	background-color: #fff;
	z-index: 10;
	/* On top */
	/* display: flex; */
	/* justify-content: center;
	align-items: center; */
}

iframe.ww {
	z-index:5;
}

.info #right_half,
.overview #right_half {
	position: absolute;
	top: 0;
	left: 30%;
	width: 70%;
	height: 100%;
	float: right;
	margin-left: 0;
	margin-top: 0;
	overflow-x: auto;
	overflow-y: hidden;
	background-color: #fff;
	font-family: sans-serif;
	padding-top: 3em;
}

#container.wide.overview #right_half {
	display: block;
	width: 100%;
	position: static;
	height: 100%;
	margin-left: 0;
	margin-top: 0;
	overflow-x: auto;
	overflow-y: hidden;
	background-color: #fff;
	font-family: sans-serif;
	/* padding:0em 0em; */
}

#container.wide.overview #left_half {
	display: none;
}

#container.wide.compose #right_half {
	display: none;
}

#container.wide.compose #left_half {
	width: 100%;
}

#container.present #left_half {
	display: none;
}

#container.present #right_half {
	position: relative;
	width: auto;
	height: 100%;
	margin: auto;
	background-color: #fff;
	overflow: hidden;
	display: block;
	top: unset;
	left: unset;
	padding-top: unset;
}

#container.compose #left_half {
	position: relative;
	float: left;
	width: 50%;
	height: 100%;
	padding: 0;
	margin-top: 0;
}

#container.compose #right_half {
	position: relative;
	width: 50%;
	height: 100%;
	float: right;
	margin-left: 0;
	margin-top: 0;
	overflow-x: auto;
	overflow-y: hidden;
	background-color: #fff;
	font-family: sans-serif;
	top: unset;
	left: unset;
}

.ace_highlight-marker {
	position: absolute;
	/* without this positions will be wrong */
	background: #ddf;
	/* color */
	z-index: 1000;
	/* in front of all other markers */
}

.ace_slide-marker {
	position: absolute;
	/* without this positions will be erong */
	background: #ffc;
	/* color */
	z-index: 1000;
	/* in front of all other markers */
}

.paragraphs {
	white-space: normal;
}

.steps {
	visibility: hidden;
}

.steps.shown {
	visibility: visible;
}

.lcref-content .steps {
	visibility: visible;
}

.collapsea[aria-expanded="true"] .expand_less {
	display: inline-flex !important;
}

.collapsea[aria-expanded="true"] .expand_more {
	display: none;
}

.collapsea[aria-expanded="false"] .expand_less {
	display: none;
}

.collapsea[aria-expanded="false"] .expand_more {
	display: inline-flex !important;
}

mjx-math {
	padding: 0.4em 0 !important;
}

#output>div.slide[contenteditable="true"] .slide_content :not([wbtag="ignore"]):not([wbtag="skip"]):not([wbtag="transparent"]):not(.paragraphs) {
	border: 1px solid grey;
	padding: 1px;
}

#output>div.slide[contenteditable="true"] .paragraphs {
	color: grey;
	font-family: monospace;
}

#loading_icon {
	position: absolute;
	top: 0;
	display: table;
	height: 100%;
	width: 100%;
	background-color: hsla(0, 0%, 100%, 0.8);
	z-index: 999;
}

#loading_icon>div {
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	height: 5em;
	margin: 0 auto;
	text-align: center;
}

.navbar-nav li.advanced:hover {
	position: relative;
}

.navbar-nav li.advanced:hover>ul.dropdown-submenu {
	display: block;
}

.dropdown-submenu {
	position: absolute;
}

.dropdown-submenu {
	top: -500%;
	left: 100%;
	margin-top: -5px;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
	border-color: #aaa !important;
}

.nav-tabs .nav-link.active {
	font-weight: bold !important;
	color: inherit !important;
	background-color: inherit !important;
	border: none !important;
}

.nav-tabs .nav-link:focus {
border-color: #aaa !important;
}

.nav-tabs .nav-link {
	color: #bbb !important;
	background-color: inherit !important;
}

.nav-tabs {
	border-bottom: none;
	border-color: #ccc !important;
}

#right_half>.navbar {
	position: absolute !important;
	top: 0;
	left: 0;
	padding-left: 5px;
	padding-right: 5px;
	display: block;
}

.light {
	color: #888;
}

iframe.webwork {
	border: #ddd solid 2px;
	border-radius: 5px;
}

.output .material-icons.expand_more,
.output .material-icons-outlined.expand_less {
	vertical-align: sub !important;
	margin-left: -5px !important;
}

#info_half .material-icons {
	vertical-align: bottom !important;
}

.output .material-icons-outlined.expand_less {
	transform: rotate(90deg) !important;
}

.dim .menu_container,
.dim .load_icon,
.dim .paragraphs,
.dim textarea,
.dim table,
.dim table * {
	background-color: #222 !important;
	color: #bbb !important;
}

.dim .lcref,
.dim .lcref .paragraphs {
	background-color: #333;
	color: #bbb;
}

.progress-bar {
	background-color: #ddd !important;
}

#container.compose #left_half #normalize_icon {
	display: none;
}

#container.compose #left_half #maximize_icon {
	display: block;
}

#container.compose.wide #left_half #normalize_icon {
	display: block;
}

#container.compose.wide #left_half #maximize_icon {
	display: none;
}

.output {
	flex: auto;
	width: 100%;
	height: 100%;
	margin: auto;
	overflow: auto;
	font-family: Sans-Serif;
}

#print_content .output {
	font-family: Serif;
}

.present #right_half #output {
	padding: 10% 0;
	position: relative;
	background: #fff;
	text-align: justify;
	font-size: 1.2em;
	overflow-x: hidden;
	overflow-y: auto;
	display: table;
	display: -webkit-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

.info .output,
.overview .output,
.compose .output {
	padding-left: 1em;
	padding-right: 1em;
	padding-bottom: 5%;
}

.overview.wide .output {
	position: relative;
	font-family: Sans-Serif;
	background: #fff;
	text-align: justify;
	width: 100%;
	max-height: 100%;
	margin: auto;
	font-size: 1.2em;
	overflow: auto;
	display: block;
}

#container.wide #info_half {
	display: none;
}

#info_half {
	display: flex;
	flex-flow: column;
	height: 100%;
}

.compose #info_half {
	display: none;
}

#container #input_container {
	display: none;
}

#container.compose #input_container {
	display: flex;
	flex-direction: column;
	background-color: #666;
	border: 0;
	height: 100%;
}

.info #input_container,
.overview #input_container {
	display: none;
}

/* .compose #input_container {
display: flex;
flex-direction: column;
} */
#input {
	flex: 0 1 auto;
	height: 100%;
}

#right_half.dual #carousel,
#right_half.overview #carousel,
#right_half.compose #carousel,
.info #right_half #carousel {
	display: none;
}

.present #right_half #output.long,
#right_half.annotate #output {
	display: block;
}

.present #right_half #full_screen_icon {
	display: none;
}

.info #full_screen_icon,
.compose #full_screen_icon {
	display: inline-block;
}

.present #right_half #dual_icon {
	display: inline-block;
}

.info #dual_icon,
.compose #dual_icon {
	display: none;
}

.present .menu_button:not([function='render']) {
	display: block;
}

.present .menu_button[function='render'] {
	display: none;
}

.info .menu_button[function='render'],
.compose .menu_button[function='render'] {
	display: block;
}

#present_button {
	display: block;
}

.wide #present_button,
.present #present_button {
	display: none;
}

.wide #info_button,
.present #info_button {
	display: block;
}

.btn.dim {
	opacity: 0.5;
	padding-right: 10px;
}

.separator {
	position: relative;
	width: 100%;
	height: 1.5em;
	text-align: center;
	font-weight: normal;
	font-size: 1em;
	display: block;
}

.separator .slide_label {
	color: pink;
}

.slide.selected .separator .slide_label {
	font-weight: bold;
	color: red;
}

.info .separator,
.compose .separator {
	display: block;
}

.present .separator {
	display: none;
}

.separator .slide_label {
	background-color: white;
}

.dim .separator .slide_label {
	background-color: #222;
}

.present #output>div.slide {
	align-content: center;
	flex-direction: column;
}

.slide_number {
	position: fixed;
	bottom: 2%;
	right: 2%;
	color: #ccc;
	font-size: 75%;
	z-index: 990;
	display: none;
}

.present .slide_number {
	position: fixed;
	bottom: 2%;
	right: 2%;
	color: #ccc;
	font-size: 75%;
	z-index: 990;
	display: block;
}

.overview .contols {
	display: none;
}

.controls {
	display: none;
}

.present .controls_container:not(.hidden) {
	width: auto;
	font-size: 2em;
	color: SteelBlue;
	opacity: 0.25;
	z-index: 500;
	display: block;
}

.present .carousel-indicators:not(.hidden) {
	top: 0 !important;
	bottom: initial !important;
	margin-top: 10px !important;
	z-index: 1200 !important;
	opacity: 0.25;
	display: flex;
}

#output:not(.present) .controls {
	display: none;
}

.carousel.pointer-event {
	touch-action: pan-y pinch-zoom !important;
}

select#render_sel option[value="Render"] {
	background-image: url("icons/refresh-24px.svg");
}

#render_sel option {
	color: #ddd;
	background-color: #444;
}

textarea {
	color: #000;
	border: 1;
	font-family: Courier;
	font-size: 12pt;
}

iframe {
	border: 0;
	width: 1px;
	min-width: 100%;
}

iframe:not(.webwork) {
	background: transparent url("icons/Loading_icon.gif") center no-repeat;
}

.loading_icon {
	text-align: center;
	overflow-y: hidden;
	height: 3.5cm;
	width: 5cm;
	margin: 1cm auto
}

ol {
	list-style-type: decimal;
}

ol>li>ol {
	list-style-type: lower-alpha;
}

ol>li>ol>li>ol {
	list-style-type: lower-roman;
}

.collapse_icon {
	color: pink;
}

.icon.latex,
.icon.xml {
	display: none;
}

#toc a.course {
	font-size: 1.2em;
	font-weight: bold;
}

#toc a.chapter {
	font-size: 1.2em;
}

#toc a.section {
	font-size: 1em;
}

#toc a.subsection {
	font-size: 0.8em;
}

#toc a.subsubsection {
	font-size: 0.8em;
}

#toc a.highlighted {
	color: #9ff;
}

.list-group-item {
	background-color: inherit;
}

b.highlighted,
h5.highlighted,
h4.highlighted,
h3.highlighted,
h2.highlighted,
h1.highlighted,
button.highlighted {
	background-color: #fcf5cf;
	padding: 5px;
}

#info_keywords {
	width: 100%;
	overflow-x: auto;
	padding: 1em 0;
}

.newline:after {
	content: "\A";
	white-space: pre;
}

.btn_keyword {
	max-width: 100%;
	white-space: normal;
	text-align: left;
}

.highlight {
	background-color: #ff0;
}

.hidden,
.comment,
.hidden_collapse {
	display: none !important;
}

#info_statements {
	overflow-wrap: break-word;
	width: 100%;
	height: auto;
}

#info_half {
	position: relative;
	padding-top: 2em;
	padding-bottom: 0em;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
}

#info_half .nav-tabs {
	position: fixed;
	top: 5px;
}

.tab-content {
	padding-top: 0;
	padding-left: 1em;
	padding-right: 0;
	flex: 1 1 auto !important;
	overflow-y: auto;
}

#info_half hr {
	border-color: #bbb;
}

#info_half strong {
	color: #ddd;
}

#container,
#container.overview {
	width: 100%;
	height: 100%;
	margin: auto auto;
	background-color: #fff;
	overflow-y: hidden;
	overflow-x: hidden;
	page-break-after: always;
}

#container.present {
	overflow-y: 'auto';
}

.slide_container.wide {
	width: 25cm;
}

tbody:before {
	content: "\200C";
	display: block;
	line-height: 0px;
}

.table tr td {
	border: solid 1px #ccc;
}

.table thead th {
	font-size: 1em;
	border: solid 2px #bbb;
}

.no_border {
	border: none;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	background: #fff;
}

.plain_button {
	border: none;
	padding: 0;
	background: hsla(0, 0%, 0%, 0);
	cursor: pointer;
	text-align: left;
}

.item_button {
	border: none;
	padding: 0;
	background: hsla(0, 0%, 0%, 0);
	cursor: pointer;
}

#title {
	position: fixed;
	bottom: 2%;
	left: 2%;
	color: #aaa;
	/* color:#428bc1; */
}

#info_button {
	display: none;
}

.break {
	display: none;
}

.break .after {
	page-break-after: always;
}

.break .before {
	page-break-before: always;
}

.slide_button {
	color: SteelBlue;
}

.slide_button.half {
	color: black;
}

.slide_mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 500;
}

#compose_icon {
	width: auto;
	max-height: 1.5rem;
	color: #888;
	border: none;
}

#edit_button.editing {
	background-color: red;
	color: white;
}

#edit_icon {
	width: auto;
	opacity: 0.5;
	border: none;
	margin-right: 0.5rem;
}

#maximize_icon,
#full_screen_icon {
	overflow: hidden;
}

#full_screen_icon {
	opacity: 0.5;
}

#close_icon {
	font-size: 2rem;
	line-height: 1.25rem;
}

#normalize_icon,
#dual_icon {
	background-color: transparent;
	border: none;
	display: none;
	margin: auto;
}

#dual_icon {
	opacity: 0.5;
}

.icon.hide {
	font-size: 2.5rem;
	line-height: 2rem;
	width: auto;
	margin: auto;
	text-align: center;
}

#edit_menu_container,
#info_menu_container {
	color: SteelBlue;
	z-index: 999;
	border: none;
	text-align: center;
	overflow-x: hidden;
	overflow-y: hidden;
	display: block;
}

#output_icon_container {
	overflow: hidden;
}

#edit_menu_container {
	right: 0;
	padding: 0;
	width: 50px;
	height: 100%;
}

#info_menu_container {
	position: absolute;
	top: 10px;
	right: 10px;
	width: auto;
}

#menu_container {
	height: 3em;
	width: 100%
}

.present>#menu_container {
	position: fixed;
}

#main_menu_button {
	font-size: 1.5em;
}

.present .slide_sel {
	display: none;
}

#cover_half {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50%;
	background-color: #000;
}

.framebox {
	padding: 10px;
	border: 10px solid SteelBlue;
	border-radius: 10px;
	width: 100%;
	overflow-x: auto
}

.slide_container {
	position: relative;
	height: auto;
	width: 17cm;
	margin: auto;
	overflow-x: auto;
	overflow-y: hidden;
}

.slide_content {
	position: relative;
	clear: left;
	width: 100%;
	height: auto;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 0;
}

.menu_button.canvas {
	display: none;
}

.present .menu_button.canvas {
	display: block;
}

canvas {
	z-index: 999;
	border: 1px solid #eee;
	position: absolute;
	left: 0;
}

canvas.disabled {
	z-index: 0;
}

.canvas-controls {
	position: fixed !important;
	top: 50px;
	right: 10px;
	display: none;
	z-index: 1500;
	font-size: 1rem;
	width: 2.5em;
}

.canvas-controls.canvas-controls-left {
	left: 10px;
}

.annotate .canvas-controls,
.annotate .canvas-controls .navbar {
	display: block;
}

.annotate .slide_container {
	float: left;
	padding-left: 2em;
	z-index: 750;
}

@page {
	size: auto;
	/* auto is the initial value */
	/* this affects the margin in the printer settings */
	margin: 25mm 25mm 25mm 25mm;
}

.image {
	margin: 1em auto;
	padding: 1em;
	text-align: center;
}

.image[wbtag="figure"] {
	border: 1px solid #ddd;
	border-radius: 5px;
}

.caption {
	background-color: #fafafa;
	width: 100%;
	text-align: center;
	border-radius: 5px;
}

.center {
	padding: 1em;
}

.dual-left {
	padding: 10px;
}

.dual-right {
	padding: 10px;
}

.output img.loading {
	/* width:10cm;
	height:10cm; */
	/* background:transparent url("icons/Loading_icon.gif") center no-repeat !important; */
	display: none;
}

.dual-left {
	display: table-cell;
	width: 50%;
	vertical-align: middle;
	text-align: center;
	padding-right: 5px;
}

.dual-right {
	display: table-cell;
	width: 50%;
	vertical-align: middle;
	text-align: center;
	padding-left: 5px;
}

.slide_content .dual {
	display: table;
	width: 100%;
}

.latexSource {
	border: 1px solid;
	font-family: "Courier New";
	font-size: 0.8em;
	color: #f44;
	white-space: pre-wrap;
}

span.latex_href svg {
	fill: currentColor;
}

thead th {
	background-color: SteelBlue !important;
	color: #eee;
}

.output h5,
.output h1,
.output h2,
.output h3,
.output h4,
.output b,
.output strong {
	color: SteelBlue;
}

h5 {
	font-size: 1.2em;
	display: inline-block;
}

hr {
	border-color: #ddd
}

.dim hr {
	border-color: #555;
}

blockquote {
	border-left: 2.5px solid #ddd;
	padding-top: 0px;
	padding-left: 10px;
	padding-right: 0px;
}

.knowl>div>blockquote {
	border: none;
}

a:link,
a:visited,
a:active {
	color: SteelBlue;
	text-decoration: none;
}

#title {
	z-index: 100;
}

.icon {
	width: auto;
	text-align: center;
	clear: both;
	margin: auto;
	color: #aaa;
	overflow: hidden;
}

.plain_button:focus,
.plain_button:active {
	background-color: transparent !important;
	outline: none !important;
	box-shadow: none !important;
}

#main_menu_button,
#left_button,
#right_button {
	line-height: 1.5rem;
	background-color: transparent !important;
	color: hsl(211, 0%, 43%, 0.25) !important;
	border: none !important;
}

#main_menu_button:active,
#main_menu_button:focus,
#main_menu_button.active {
	background-color: transparent !important;
	color: SteelBlue !important;
	border: none !important;
}

#edit_menu_button {
	background-color: hsl(211, 0%, 43%, 0) !important;
	color: #bbb !important;
	border: none !important;
}

#main_edit_menu {
	background-color: hsla(0, 0%, 50%, 1);
}

.dropdown-menu.keywords,
.popover {
	min-width: 5em !important;
	box-shadow: 5px 5px 2px hsla(0, 0%, 0%, 0.5);
}

.dropdown-menu.keywords>a {
	padding: 5px;
}

.dropdown-toggle::after {
	display: none
}

.dropdown-submenu {
	position: relative;
}

.dropdown-item.color {
	padding: 0.25rem 0.25rem;
}

.dropdown-item.color>span {
	border-radius: 50%;
}

#preamble {
	display: none;
}

#slider_container {
	max-width: 100%;
	text-align: center;
	margin-top: 1.2em;
}

#menu_container {
	z-index: 1000;
}

.present #menu_container {
	background-color: #fff;
}

#main_menu {
	border: none;
}

.modal-dialog {
	max-width: 21cm;
}

.modal-header {
	background-color: SteelBlue;
}

.modal .close {
	color: #fff;
}

.modal-body {
	color: SteelBlue;
}

.modal-body .share_ext {
	width: 100%;
	height: 3.5em;
	word-break: break-all;
	overflow-x: auto;
	font-family: Courier;
}

.modal-title {
	color: #fff;
}

.modal-footer.latex .render,
.modal-footer.latex .load-index,
.modal-footer.latex .update-index {
	display: none;
}

.modal-footer.xml .load-index,
.modal-footer.xml .update-index {
	display: none;
}

.modal-footer .github {
	display: inline-block;
}

.modal input {
	color: #666 !important;
	border: solid 1px #eee;
	border-radius: 5px;
}

#text_modal .modal-dialog {
	max-width: 75%;
}

.share_text {
	width: 100%;
	word-break: break-all;
	overflow-y: auto;
	font-family: Courier;
}

.text_modal .modal-body {
	background-color: hsla(0, 0%, 100%, 0.75);
}

#source_text {
	width: 100%;
	height: 65%;
	font-family: Courier;
}

.keywords {
	width: 100%;
	text-align: left;
}

.keywords .title {
	font-size: 0.8em;
	margin-right: 0.5em;
}

#info {
	padding-top: 1em;
	padding-bottom: 1em;
	padding-right: 1em;
	height: 100%;
	overflow-y: auto;
}

#info_statements_num a,
#info_statements a:visited,
#info_statements a:link {
	color: #ddd;
}

a.info_statements_num,
a.share {
	color: #ddd;
}

#info_statements span {
	color: #eee;
}

h5.current_slide {
	color: #eee;
}

.slide_info>b {
	color: #eee;
}

#toc {
	background-color: transparent;
	color: #eee;
	height: 100%;
	overflow-y: auto;
	padding-right: 1em;
	padding-top: 1em;
}

#toc ul {
	padding-left: 1.2em;
}

#toc a {
	color: #eee;
}

#index {
	vertical-align: bottom;
	background-color: transparent;
	color: LightBlue;
	height: 100%;
	overflow-y: auto;
	padding-right: 1em;
	padding-top: 1em;
}

.slide_info.share {
	background-color: transparent;
	color: LightBlue;
	border: 1px solid;
	padding: 10px;
	border-radius: 5px
}

.slide_info .share_text {
	background-color: transparent;
	color: LightBlue;
	border: 1px solid;
	border-radius: 5px
}

.lecture_skip [data-lecture-skip="true"] * {
	color: #ccc !important;
}

#right_half.dimmed,
#right_half.dimmed #menu_container,
#right_half.dimmed #output,
#right_half.dimmed #output>.paragraphs,
#right_half.dimmed #output :not(.title)>.paragraphs,
#right_half.dimmed .lcref,
#right_half.dimmed textarea {
	background-color: #222 !important;
	color: #bbb;
}

#right_half.dimmed .separator .slide_label {
	background-color: #222;
}

.dimmed blockquote {
	border-left: 2.5px solid #555;
	padding-top: 0px;
	padding-left: 10px;
	padding-right: 0px;
}

/* #slide_progress td {
	height:7px;
	border-color: #fff;
	border-style: none solid;
}

.dim #slide_progress td {
	border-color: #222;
}

#slide_progress td.past {
	background-color: #ccc;
}

#slide_progress td.future {
	background-color: #eee;
} */
