@font-face {
	font-family: "PhoneticTM";
	src: url("/fonts/phontm.ttf");
}
@font-face {
	font-family: 'FontAwesome';
	font-style: normal;
	font-weight: 900;
	font-display: auto;
	src: url("/fonts/fa-solid-900.eot");
	src: url("/fonts/fa-solid-900.woff2") format("woff2"), url("/fonts/fa-solid-900.woff") format("woff"), url("/fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("/fonts/fa-solid-900.ttf") format("truetype"), url("/fonts/fa-solid-900.svg#fontawesome") format("svg"); 
}
@font-face {
	font-family: 'FontAwesomeReg';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url("/fonts/fa-regular-400.eot");
	src: url("/fonts/fa-regular-400.woff2") format("woff2"), url("/fonts/fa-regular-400.woff") format("woff"), url("/fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("/fonts/fa-regular-400.ttf") format("truetype"), url("/fonts/fa-regular-400.svg#fontawesome") format("svg"); 
}

h1, h2, h3 {
	display0: flex;
	flex-direction: row;
	align-items: center;
}

i.icon, i.icon0 {
	font-family: FontAwesome;
	font-size: 24px;
	font-style: normal;
}
i.icon0 {
	font-family: FontAwesomeReg;
}
h1 a, h2 a, h3 a {
	opacity: .45;
}
h1 a:hover, h2 a:hover, h3 a:hover {
	opacity: .75;
}
h1 button, h2 button, h3 button {
	background-color: #ebebeb;
	font-weight: 600;
	height: 1.7em;
	padding: 0 8px;
	margin: 0 15px;
}
h1 i.icon, h2 i.icon, h3 i.icon {
	font-size: inherit;
	margin-left: 15px;
}
.remember {
	margin: 20px;
	padding: 10px;
	border-left: 3px solid #e6e6e6;
	background-color: #f9f9ce;
}
body { background-color: #eef7ff; height: 100vh; width: 100vw; max-height:100%; font-family: sans-serif; margin: 0; padding: 0; }
a { cursor: pointer; text-decoration: none; }
.FlexWrapper { height:100%; display: flex; justify-content: center; }
div#whole { 
	width: 85%;
	display: flex; position: fixed; top: 10px; bottom: 10px;
	border-radius: 9px; 
	overflow: hidden;
}
div#left_col { 
	width: 270px; min-width: 270px; height: 100%; 
	display: flex; flex-direction: column;
	padding-right: 20px; overflow: hidden; 
	position: relative; 
	background: #eef7ff;
	z-index: 9;
	transition0: 1.5s;
}
#cb-shownav:checked + #left_col {
	left: 270px;
	transition0: 1.5s;
}
#l-hidenav {
	position: absolute;
	right: 4px;
	top: 10px;
	border: solid 1px gray;
	opacity: 0;
	font-weight: bold;
	background: white;
}
#l-hidenav::before {
	content: ">";
}
#cb-shownav:checked + #left_col #l-hidenav {
	opacity: 1;
}
#cb-shownav:checked + #left_col #l-hidenav::before {
	content: "<";
}
@media (max-width: 1024px) {
	div#left_col {
		margin-left: -270px;
	}
	#l-hidenav {opacity:1}
}

#right_col {
	flex: 1 1 650px;
	display: flex; flex-direction: column;
	position: relative;
	z-index: 1;
}
#regimes {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	width: 100%;
	height: 45px;
	text-align: center;
	color: gray;
	font-size: .7rem;
	letter-spacing: 1px;
	font-weight: normal;
	font-family: sans-serif;
	background-color: #FFFFFF;
	border-radius: 5px 5px 0 0;
	margin-bottom: 1px;
	padding: 7px 0;
}
div#page_score { 
	width: 100%; display: flex; flex-direction: column; align-items: center; 
	justify-content: center; text-align: center; color: black; font-family: sans-serif; 
	background-color: #FFFFFF; border-radius: 9px; margin-bottom: 7px; padding-bottom: 10px;
}
#whole[lessonMode=on] #page_score {
	display: none;
}
#videoLocal, #videoRemote {
	width: 100%;
	position: relative;
	display: none;
	border: none;
	border-radius: 9px;
	background-color: silver;
	margin: 0;
	margin-bottom: 7px;
}
#whole[lessonMode=on] #videoRemote {
	display: block;
}
#videoCall {
	position: relative;
}
#hangUp {
	position: absolute;
	left: 80%; bottom: 17px;
	display: none;
	color: white;
	background-color: red;
	border-radius: 12px;
	width: 24px; height: 24px;
	opacity: .5;
	z-index: 2;
}
#hangUp i {
	font-size: 13px;
}
#videoRemote:hover ~ #hangUp, #hangUp:hover {
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
}
#hangUp:hover {
	opacity: 1;
}
div#totalScoreTXT { font-size: 2.7rem; font-weight: 100; }
div#utils {
		width: 100%; height: 40px; flex: 0 0 40px; text-align: center; color: gray;
		font-size: .8rem; font-weight: normal; font-family: sans-serif;
		border-radius: 9px 9px 0 0; margin-bottom: 7px; padding: 0; overflow: hidden;
}
#lesson_info {
	position: relative;
	width: 100%; height: 100%; overflow: auto;
	border-radius: 0 0 9px 9px; margin-top: 1px;
}
.lessonInfo {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%; 
	overflow-y: auto; overflow-x: hidden;
	font-size: 13px; font-weight: normal;
	display: flex; flex-direction: column;
	background-color: #FFFFFF; color: gray; font-weight: 200;
	border-radius: 0 0 9px 9px; margin-top: 0;
}
.lessonInfo[checked] {
	z-index: 99;
}
#lesson_info h1 {
	font-size: 14px; font-weight: normal; text-align: center;
}
#lesson_info h2 {
	font-size: 13px; font-weight: 400; text-align: center;
}
#lesson_info h3 {
	font-size: 13px; font-weight: normal;
}
.lessonInfo details {
	font-style: italic;
}
#lesson_info summary {
	width: 100%; padding: 7px;
	font-size: .9rem; font-weight: 600; font-style: normal;
	background-color: #fafafa;
}
#lesson_info ol, #lesson_info li, lessonInfo a {
	width: calc(100% - 3px);
	font-size: .8rem;
	line-height: 1.1rem;
	letter-spacing: .7px;
	color: gray;
	font-weight: normal;
	font-style: normal;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#lesson_info ol {
	font-size: .6rem; padding-left: 10px;
	width: calc(100% - 10px);
}
#lesson_info li {
	display: flex;
	flex-direction: row;
}
#cont_list a, #hw_list a {
	display: inline-block; vertical-align: middle; 
	overflow: hidden; text-overflow: ellipsis;
}
#lesson_info a[checked] {
	font-weight: 600;
}
#lesson_info li a {
	flex: 1;
	order: 2;
}
#lesson_info li span.pageIndex {
	order: 1;
	margin-right: 5px;
	width: 15px;
	text-align: right;
}
#lesson_info li span.pageScore {
	order: 3;
}
#lesson_info li span.pageType {
	order: 4;
}
#lesson_info input {
	font-family: cursive;
	border: none;
	line-height: 1.5em;
	border-bottom: hsla(0, 0%, 90%, 1) 1px solid;
	width: 100%;
	transition: background-color 2s;
}
#lesson_info input[checked] {
    transition: none;
    background-color: #c3efe0;
}
#lesson_vocab ul {
	padding-left: 25px;
}
#lesson_vocab li {
	display: list-item;
}
#lesson_vocab li:hover {
	background-color: #03a9f41a;
	position: relative;
}
button {
	color: gray; font-weight: bolder; background-color: white; border-radius: 5px; 
	padding: 7px 14px; margin: 7px 3px 0 3px;
	box-shadow: none; opacity: .75;
}
.reg_option {
	width: 45px; float: left; opacity: .4; padding-top: 1px
}
.reg_option a {
	text-decoration: none;
}
.reg_option:hover, .reg_option[checked] { opacity: .8; }

#main_nav {
	width: 100%; display: flex; flex-direction: column;
	flex: 1 0 78px;
	color: gray; font-family: sans-serif; font-size: 1rem; font-weight: bold; 
	background-color: #FFFFFF; border-radius: 9px; 
	margin: 0 7px 7px 0; overflow: hidden;
}
#main_nav a {
	color: gray; text-decoration: none; opacity: .4;
}
#main_nav a:hover {
	opacity: .9;
}
#menu_logo {
	padding: 7px 0 3px 0; display: flex; justify-content: space-around;
}
	#menu_logo a.logo, a.toggleMenu {
		opacity: .9;
		font-size: 1.5rem;
		font-weight: lighter;
		color: #4287de;
		text-align: center;
	}
a.toggleMenu { font-weight: bold; cursor: pointer; font-family: FontAwesome; }
.menuOff { display: none; }
#main_nav[checked] .menuOff { display: inline; }
#main_nav[checked] .menuOn { display: none; }
#main_nav[checked], #whole:not([lessonMode]) #left_col #main_nav { flex: 1 0 100%; }
#whole:not([lessonMode]) #left_col #main_nav a.toggleMenu, #main_nav[fixed] a.toggleMenu {
	display: none;
}
#whole:not([lessonMode]) #left_col #main_nav, #left_col #main_nav[fixed] {
	background-color: transparent;
}
#whole:not([lessonMode]) #sections {
	display: none;
}
#whole:not([lessonMode]) #nav_buttons {
	display: none;
}
#whole:not([lessonMode]) #lessonPage {
	display: none;
}
#whole:not([lessonMode]) #content_divs {
	border-radius: 9px;
}
#menu_balance {
	color: gray; font-size: .7rem;
}
	#menu_balance a {
		color: #4287de;
	}

#main_nav nav {
	height: 100%; 
	display: flex; flex-direction: column;
	overflow: auto;
}
#main_nav nav a {
	display: flex; flex-direction: row; width: 100%; align-items: center; 
	opacity: .9; background-color: transparent; margin-bottom: 1px;
	padding: .2em 0; border-radius: 5px;
}
#main_nav nav a:hover { background-color: #e9ecf1; }
#main_nav nav a[checked] { color: #4287de; background-color: #e0ebf9; cursor: context-menu; }
#main_nav nav a img, #main_nav nav a i.icon, #main_nav nav a i.icon0 {
	margin: 0 12px; opacity: .6;
}
#main_nav nav h1 {
	font-size: .9rem; text-transform: uppercase; color: silver; margin: 0 7px 0 0;
}
#main_nav nav section {
	margin-bottom: 1px; margin-top: 15px;
}
#main_nav nav section:nth-last-of-type(1) {
	flex: 1;
}
#main_nav nav footer {
	margin-top: auto;
}

#sections {
	display: flex; justify-content: space-around; text-align: center;
	color: gray; 
	font-size: 1.1rem; font-weight: lighter; font-family: sans-serif; 
	background-color: #FFFFFF; 
	border-radius: 9px 9px 0 0; padding: 10px;
}
#sections a {
	font-size: 1.1rem; font-weight: lighter; font-family: sans-serif; 
}
#sections a[checked] { cursor: context-menu; color: green; }
.horzMeter {
	display: inline-flex; flex-direction: row; justify-content: space-between;
	width: 200px; height: 10px; border: none; justify-self: center; 
	background-color: #e3e7eb;
	border-radius: 5px; overflow: hidden; padding: 0;
}
.horzMeter > span {
	border: none; display: inline-block; 
	margin: 0; padding: 0;
}
.horzMeter > span:nth-child(1) {
	background-color: #88c24e;
}
.horzMeter > span:nth-child(2) {
	background-color: hsla(0,100%,70%,.8);
}
.vertMeter {
	display: inline-flex; flex-direction: column; justify-content: space-between;
	position: relative;
	vertical-align: top; background-color: #e3e7eb;
	width: 6px; height: 27px;
	border-radius: 3px; border: none;
	overflow: hidden;
	padding: 0; margin: 0;
}
.vertMeter > span {
	border-radius: 0 0 3px 3px; border: none;
}
.vertMeter > span:nth-child(1) {
	background-color: #88c24e;
}
.vertMeter > span:nth-child(2) {
	background-color: hsla(0,100%,70%,.8);
}

.dict_srch {
	width: 115px; border-radius: 5px; padding: 7px;
}
.dict_srch:focus {
	width: 95%;
	transition: .3s linear;
}
.dict_srch:focus + button{
	display: none;
}
#content_divs {
	 overflow: hidden; 
	 display: flex; flex-direction: column; position: relative;
	 flex: 1 0 100px;
	 margin-top: 1px;
	 border-radius: 0 0 9px 9px;
}
#content {
	z-index: 9;
}
#loading {
	display: none;
	border: none;
	color: #4287de;
	font-size: 75px;
	font-family: FontAwesome;
	align-self: center;
	position: absolute;
	top: 45%;
}
@keyframes fa-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}
#whole[loadingLevel] #loading { 
	display: flex;
	animation: fa-spin 3s ease-in-out infinite;
}
#whole[loadingLevel="0"] #loading { display: none; }
.contentDiv {
	position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: auto;
	display: flex; flex-direction: column; font-size: 17px;
	background-color: #FFFFFF;
}
.contentDiv[checked] {
	z-index: 99;
}
.contentDiv[checked]::after {
	display: block;
	min-height: 70px;
	content: '';
}
#whole[loadingLevel] .contentDiv { display: none; }
#whole[loadingLevel="0"] .contentDiv { display: flex; }

	.contentDiv img {
		width: initial;
		align-self: center;
	}
.contentDiv h1 {
	color: #6aaf6a; font-size: 19px; font-weight: bold; margin-top: 25px; margin-left: 10px;
}
.contentDiv h2 {
	color: #6aaf6a; font-size: 16px; font-weight: bold; font-style:italic; margin-top: 25px; margin-left: 15px;
}
.contentDiv h3 {
	color: gray; font-size: 1rem; font-weight: bold; margin-top: 20px; margin-left: 12px;
}
.contentDiv li {
	margin: 14px 0; vertical-align: middle; align-items: center;
}
.contentDiv p, .contentDiv ul, .contentDiv ol {
	margin: 10px 35px;
	line-height: 2em;
}
.contentDiv li ol {
	list-style: lower-latin;
}
.contentDiv em {
	color: red;
}
.contentDiv blockquote {
	background-color: #fff9eb;
	padding: 13px;
	padding-bottom: 2em;
}
.contentDiv blockquote::before, .contentDiv blockquote::after {
	content: "\f10e ";
	font-family: FontAwesome;
	color: gray;
	margin-right: 5px;
}
.contentDiv blockquote::after {
	content: ' \f10d';
	margin-right: unset;
	margin-left: 5px;
}
.contentDiv blockquote footer {
	position: absolute;
	right: 13%;
	color: silver;
}
h1 em, h2 em, h3 em {
	margin-left: 3px;
	margin-right: 5px;
}
.contentDiv audio, .contentDiv video {
	display: block;
	width: calc(100% - 20px);
	margin: 10px;
	height: auto;
	min-height: 55px;
	object-fit: inherit;
	align-self: center;
}
div.example {
	background-color: #edf7e4;
	display: block;
	margin: 15px;
	padding: 15px 15px 15px 50px;
	align-items: center;
	position: relative;
	line-height: 2em;
}
div.example::before {
	content: "✓";
	/*content: "\f00c";
	font-family: FontAwesome;
	font-size: 24px;*/
	line-height: normal;
	font-size: 29px;
	font-style: normal;
	font-weight: 900;
	margin-right: 10px;
	color: #99d65c;
	display: block;
	position: absolute;
	left: 18px;
	top: calc(50% - 23px);
	border: none;
	background-color: transparent;
}
.example > div {
	line-height: 31px;
}
form.answer {
	display: inline-block; padding: 0; margin: 5px;
	vertical-align: middle;
	max-width: 90%;
	
}
.answer > span {
	vertical-align: middle;
	border: none;
	position: relative;
	display: inline-flex;
	width: 100%;
}
span.excField {
	height: 18px; max-height: 18px; overflow: hidden; 
	padding: 5px; border-radius: 5px; vertical-align: baseline;
	border: solid #E0E0E0 1px;
	border-bottom-width: 2px;
}
span.excField[disabled], span.excField[example] {
	height: 17px; max-height: 17px; overflow: hidden; 
	padding: 5px; border-radius: 5px; vertical-align: baseline;
	font-size: 15px;
	border-color: #ecf9dd;
	background-color: #ecf9dd;
	margin0: 5px;
}
span.excField[example] {
	background-color: #d9f5bc;
}
span.excField input, span.excField select {
	width: 100px; height: 1.1rem; padding:0; margin: 0;
	border: none; position: relative;
	font-size: 15px;
	border-bottom: solid #F0F0F0 1px;
	background-color: transparent;
	vertical-align: top;
}
	span.excField input:hover::after, span.excField select:hover::after {
		display: block;
		position: absolute;
		left: 25px;
		bottom: 100%;
		font-size: .7em;
		background-color: darkslategrey;
		color: white;
		line-height: 1.1em;
		width: 200px;
		font-weight: 200;
		padding: 6px;
		border-radius: 6px;
		content: attr("answer");
	}
span.excField input[readonly], span.excField select[disabled],
span.excField input:focus, span.excField select:focus,
span.excField > span {
	/*width: 135px;*/
	outline-style: none;
	border-bottom: solid #94d6c8 1px;
	text-align: center;
}
.answer button.checkAnswer {
	height: 1.1rem;
	border: none;
	visibility: visible;
	outline-style: none;
	padding: 0; margin: 0; 
}
.answer button img {
	height: 95%;
	padding: 0; margin: 0; 
}
.answer .vertMeter {
	vertical-align: middle;
	margin-left: 3px;
}
.answer button.giveAnswer {
	height0: 1.3rem;
	border: solid blue 1px;
	vertical-align: middle;
	visibility: visible;
	outline-style: none;
	padding: 0; margin: 0;
	margin-left: 3px;
}
.answer button.giveAnswer::before {
	content: "\f084";
	font-family: FontAwesome;
	font-size: 17px;
	color: #2196F3;
	margin: 0 1px;
}
button.giveAnswer:hover {
	opacity: .4;
}
.optionGrid {
	display: flex; flex-direction: row; width: calc(100% - 45px); 
	align-self: center; margin-left: 20px;
}
.flexColumn { 
	display: flex; flex-direction: column; 
	width: calc(50% - 20px);
}
.flexColumn:nth-of-type(2) {
	margin-left: 40px;
}
div.optionLeft {
	width: calc(100% - 12px); border: solid #e0e0e0 1px; border-radius: 5px;
	position: relative;
	color: #555; font-size: 1.2rem; transition-property: background-color, order;
	opacity0: .6; cursor: pointer; order: 1; transition-duration: .7s, 3s;
	margin: 5px 0; padding: .3rem;
}
div.optionLeft .vertMeter { float: right; height: 1.1em; }
div.optionLeft:hover { opacity: 1; border-color: gray; }
div.optionLeft[checked] { opacity: 1; border: solid blue 2px; margin-bottom: 3px; }
div.optionLeft[disabled] { border: none; background-color: #ecf9dd; opacity: 1; }
div.optionLeft[error] { background-color: #ee7a7b54; }

#misc_info {
	display: none;
	position: fixed;
	left: 200px; top: 200px; min-width: 700px; min-height: 500px; max-height: 500px;
	background-color: white; border: solid black 1px;
	overflow: auto;
}
#wmisc_info {
	height: 500px;
}
.lessonResults {
	font-size: 16px; line-height: 24px;
	color: gray;
	position: relative;
	padding: 10px 20px;
}
.lessonResults h1 {
	color: black;
	font-size: 28px; line-height: 40px; font-weight: 400;
}
.lessonResults h2 {
	color: black;
	font-size: 16px; line-height: 24px; font-weight: 600;
	margin: 10px 0;
}
.lessonResults #lesson_score {
	position: absolute; top: 70px; right: 15px;
	border: solid 1px silver; border-radius: 3px;
	padding: 0 15px 0 15px;
}
	.lessonResults #lesson_score td {
		border: none; margin: 0;
		vertical-align: middle; text-align: left;
		padding: 7px 0 7px 0;
	}
		.lessonResults #lesson_score td + td {
			text-align: right;
		}
	.lessonResults #lesson_score #score_value {
		background-color: #88c24e; color: white;
		font-size: 20px; font-weight: 600;
		padding: 7px 10px 7px 10px;
		border-radius: 5px;
	}
.lessonResults #lesson_score h2 {
	margin: 2px 0 2px 0;
}
.lessonResults small {
	color: silver; font-size: 12px; line-height: 13px;
	margin: 0;
}
.lessonResults #now_you_can li {
	list-style-image: url("/icons/checkmark_icon.png");
}
.lessonResults #now_you_can li.vocab {
	list-style-image: url("/icons/book_icon.svg");
}
.lessonResults #now_you_can li.gramm {
	list-style: none;
	background: url("/icons/tutor_icon.png") 0% / 20px no-repeat padding-box;
	margin-left: -25px; padding-left: 25px;
}
.wordlist {
	background-color: hsla(210, 17%, 86%, 0.25);
	padding: 10px 15px 10px 15px;
	border-radius: 9px;
}
.wordlist ol {
	columns: 150px auto;
}
.wordlist li {
	padding: 2px 25px 2px 5px;
}
.lessonResults #now_you_can {
	width: calc(100% - 300px);
}
.dragOption {
	display: inline-block;
	line-height: 17px;
	border: solid 1px silver;
	border-radius: 5px;
	box-shadow: #e8e8e8 3px 3px; cursor: pointer;
	padding: 7px;
	background: #fffaf0;
	opacity: .5;
}
.dragOption + .vertMeter {
	 margin-left: 4px;
	 top:7px;
}
.dragOption[draggable] {
	border: solid 1px silver;
	border-radius: 5px;
	box-shadow: #e8e8e8 3px 3px; cursor: pointer;
	padding: 7px 7px 7px 15px;
	background: url("/i/vdrag_icon.svg") 5px/5px no-repeat #fffaf0;
	opacity: 1;
}
.dragOption[draggable][checked] {
	background-color: lightgray;
}
.dragSource {
	/*border: solid 1px silver;
	border-radius: 9px;*/
	position: sticky;
	top: 0px; background-color: white;
	z-index: 2;
	width: 100%;
	border: none; border-bottom: solid 1px silver;
	padding: 0 0 10px 0; margin: 10px 20px 30px 20px;
	line-height: 2.5em;
}
.transcription {
	font-family: "PhoneticTM";
}
.teachersNotes, .youCanSay, .addInfo, .transcript, .also {
	border: none;
	border-top: dashed 1px blue;
	border-bottom: dashed 1px blue;
	border-radius: 25px;
	opacity: .6;
	margin: 10px 20px;
	line-height: 1.5em;
	font-size: .9em;
	position: relative;
	padding-left: 4ch;
}

.teachersNotes {
	color: blue;
	border-color: blue;
}
.transcript {
	color: blue;
	border-color: blue;
}

.youCanSay {
	color: green;
	border-color: green;
}

.addInfo {
	color: black;
	border-color: red;
}
.also {
	color: brown;
	border-color: brown;
}
	.youCanSay::before, .teachersNotes::before, .addInfo::before, .transcript::before, .also::before {
		border: none;
		font-weight: 600;
		display: block;
		margin-top: -9px;
		background-color: white;
		width: 130px;
		margin-left: 15px;
		text-align: center;
	}
.transcript button {
	height: 14px;
	width: 14px;
	background-color: #0066ff;
	color: white;
	opacity: .7;
	padding: 0;
	margin: 0 .5ch;
	border: none;
	border-radius: 7px;
	vertical-align: middle;
	font-size: 6px;
	font-family: FontAwesome;
}
.transcript button::before {
	content: "\f04b";
}
.addInfo > button:first-child, .transcript > button:first-child {
	position: absolute;
	border: none;
	border-radius: 25px;
	font-weight: 300;
	font-size: 23px;
	font-family: FontAwesome;
	color: unset;
	display: block;
	outline: none;
	background-color: white;
	text-align: center;
	cursor: pointer;
	position: absolute;
	top: -13px;
	right: 35px;
	margin: 0;
	padding: 0;
	opacity: .4;
}
.addInfo > button:first-child {
	color: red;
}
.addInfo[checked] > button:first-child, .transcript[checked] > button:first-child {
	opacity: 1;
}
	.addInfo > button:first-child::before, .transcript > button:first-child::before {
		content: "\f06e";
	}

.teachersNotes::before {
	content: "Teacher's Notes";
}
.youCanSay::before {
	content: "You Can Say";
}
.transcript::before {
	content: "Transcript";
}
.addInfo::before {
	content: "Additional Information";
	width: 200px;
	color: red;
}
.also::before {
	content: "You can also discuss";
	width: 200px;
}
.teachersNotes p, .youCanSay p, .addInfo p, .transcript p, .also p,
.teachersNotes ul, .youCanSay ul, .addInfo ul, .transcript ul, .also ul,
.teachersNotes ol, .youCanSay ol, .addInfo ol, .transcript ol, .also ol {
	line-height: 1.5em;
	margin-left: 0;
}
.transcript h4 {
	margin-left: -3ch;
	margin-block-start: 0.7em;
	margin-block-end: 0.7em;
}
#whole[mode="student"] .teachersNotes,
#whole[mode="student"] .youCanSay,
#whole[mode="student"] .transcript,
#whole[mode="student"] .addInfo, 
#whole[mode="student"] .also, 
#whole[mode="student"] .teachersCtrl {
	display: none;
}
	#whole[mode="student"] .transcript[checked], #whole[mode="student"] .addInfo[checked] {
		display: block;
	}
#whole[mode="student"] .addInfo[checked] button, #whole[mode="student"] .transcript[checked] button {
	display: none;
	opacity: 1;
}


.imageGrid {
	position: relative;
	margin: 15px;
	display: flex;
	flex-flow: wrap;
	justify-content: space-around;
}
.imageGrid figure {
	display: inline-block;
	position: relative;
	margin: 5px;
	border-radius: 9px;
}
	.imageGrid figure figcaption {
		position: absolute;
		background-image: linear-gradient(0deg, #0e0e0ead, transparent);
		color: white;
		font-weight: 600;
		top: 60%;
		line-height: 5.2em;
		width: 100%;
		border-radius: 0 0 9px 9px;
		text-align: center;
		opacity: 0;
		transition: opacity linear .4s;
	}
	.imageGrid figure img {
		transform: scaleX(1);
		transition: transform linear .4s;
		border-radius: 9px;
	}
	.imageGrid figure[checked] img {
		transform: scaleX(-1);
		transition: transform linear .4s;
	}
	.imageGrid figure[checked] figcaption {
		opacity: 1;
		transition: opacity linear .4s;
	}
figure.img-map {
	position: relative;
}
.img-map figcaption {
	position: absolute;
	border-radius: 5px;
	width: fit-content;
}
.img-map .excField {
	background: white;
}
.img-map .excField input {
	width: 1ch;
}
.contentDiv u {
	text-decoration: underline;
	position: relative;
}
	.contentDiv u span.hint {
		display: none;
		position: absolute;
		left: 25px;
		bottom: 100%;
		font-size: .7em;
		background-color: darkslategrey;
		color: white;
		line-height: 1.1em;
		width: 200px;
		font-weight: 200;
		padding: 6px;
		border-radius: 6px;
	}
	#whole[mode="teacher"] .contentDiv u:hover span.hint {
		display: block;
	}
#nav_buttons {
	position: relative;
}
#nav_buttons button i.icon {
	font-size: 14px;
}
#lessonBtn[checked] {
	background-color: orange;
}
.serviceForm {
	font-size: .75em;
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%; height: 100%;
	margin: 0;
	justify-content: center;
	align-content: center;
}
	.serviceForm input {
		box-shadow: silver 1px 1px, -1px -1px;
	}
	.serviceForm img {
		border-radius: 9px;
	}
.frameWrapper {
	display: none;
	position: absolute;
	bottom: 60px;
	left: 50px;
	width: 80%;
	z-index: 100;
	/*box-shadow: rgba(0,0,0,.3) 1px 1px 30px 5000px;*/
	border-radius: 9px;
	overflow: hidden;
}
button.closeButton {
	position: absolute;
	border: none;
	border-radius: 3px;
	font-weight: 300;
	font-size: 19px;
	font-family: FontAwesome;
	color: unset;
	display: block;
	outline: none;
	background-color: transparent;
	text-align: center;
	cursor: pointer;
	position: absolute;
	top: 2px;
	right: 5px;
	margin: 0;
	padding: 0;
	opacity: .6;
}
button.closeButton::before {
	content: "\f057";
}
iframe {
	width: 100%;
	height: 100%;
	border-radius: 9px;
	z-index: 100;
}
#send_hw_frame {
	bottom: 60px;
	left: 50px;
	width: 80%;
	height: 170px;
	display: block;
}
#user_profile_frame {
	top: 35px;
	left: 90px;
	width: 250px;
	height: 300px;
	display: block;
}
#user_profile_frame img {
	border-radius: 24px;
}
.infoMsg {
	position: fixed;
	display0: flex;
	top: 50px; left: 50px;
	bottom: 50px; right: 50px;
	justify-content: center;
	align-content: center;
	background-color: white;
	overflow: auto;
	z-index: 9999;
}
.infoMsg p {
	line-height: 1.5em;
}
.infoMsg button {
	position: absolute;
	right: 25px;
	bottom: 25px;
}

.llExc ol {
	margin: 0 10px;
}
.llExc li:only-of-type {
	list-style: none;
}
.llExc ol>li span:not(.historyBaloon) {
	display: inline-flex;
	align-content: center;
	line-height: 1.5em;
	position: relative;
}
.llExc[excType="radio"] ol>li span:not(.historyBaloon),
.llExc[excType="mcheck"] ol>li span:not(.historyBaloon) {
	display: unset;
}
.llExc[excType="classify"] {
	display: flex;
	flex-wrap: wrap;
}

.llExc[excType="essay"] {
	position: relative;
	margin: 20px;
	border: solid 2px lightgray;
	border-radius: 5px;
	padding: 50px 10px 10px 10px;
	display: flex;
	opacity: .75;
}
.llExc[excType="essay"] h2 {
	position: absolute;
	top: 0px;
}
.llExc[excType="essay"] textarea {
	width: 60%;
	resize: none;
}
.llExc[excType="essay"] ul.vocab {
	columns: 2;
	width: 30%;
}
.llExc[excType="essay"] li.vocWord {
	font-size: 13px;
	line-height: 16px;
	margin: 5px;
}
.llExc[excType="strike"] {
	margin: 10px 30px;
}
.llExc .llExc {
	margin-left: 10px;
}
.optionRadio, .optionCheckbox {
	list-style: none;
	display: flex;
}
.optionRadio[checked]:not([correct]),
.optionCheckbox[checked]:not([correct]),
.optionRadio[disabled]:not([correct]),
.optionCheckbox[disabled]:not([correct]) {
	color: silver;
}
.optionCheckbox::before {
	content: "\f0c8";
	font-weight: 300;
	font-size: 17px;
	font-family: FontAwesome;
	color: #e8e8e8;
	margin-right: 10px;
}
.optionCheckbox[checked]::before {
	/*content: "\f192";*/
	content: "\f14a";
	color: red;
	opacity: .4;
	transition: opacity 1s;
}
.optionCheckbox[checked][correct]::before{
	color: limegreen;
}
.optionRadio::before {
	content: " ";
	display: inline-block;
	width: 17px;
	height: 17px;
	margin-right: 10px;
	border: solid 2px #d9d9d9;
	border-radius: 50%;
}
.optionRadio[checked]::before {
	opacity: .4;
	transition: opacity 1s;
	border-color: red;
	background-color: #d9d9d9;
}
.optionRadio[checked][correct]::before {
	width: 4px;
	height: 4px;
	opacity: .85;
	border: solid 9px limegreen;
	background-color: white;
}
.historyBaloon {
	display: none;
	background-color: hsla(0, 0%, 0%, 0.75);
	position: absolute;
	bottom: 25px;
	/*right: -140px;*/
	font-size: 12px;
	color: white;
	width: max-content;
	max-width: 250px;
	border: none;
	border-radius: 5px;
	z-index: 199;
	opacity: 1;
	padding: 7px;
}
.historyBaloon li {
	text-align: start;
	margin: 5px 0;
}
.historyBaloon span {
	color: #F44336;
}
.historyBaloon span.answerCorrect {
	color: #8BC34A;
}
[mode="teacher"] *:hover>.historyBaloon, 
.vertMeter:hover>.historyBaloon,
.vertMeter:hover+.historyBaloon {
	display: block;
}
#notifs {
	width: 100%;
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 0;
	left: 0;
	align-content: center;
	justify-content: center;
	background-color: #3d94ff;
	border-radius: 9px;
	padding: 5px 0;
	color: white;
	z-index: 999;
}
#notifs div {
	display: flex;
	flex-direction: column;
	justify-items: center;
	align-items: center;
	font-weight: 700;
	color: yellow;
	padding: 7px 0;
}
#notifs .btnOk {
	padding: 2px 5px;
	background-color: #3d94ff;
}
.pageType {
	font-family: FontAwesome;
	font-size: 11px;
	font-style: normal;
	color: silver;
	width: 17px;
	text-align: center;
}
.pageScore {
	font-size: 10px;
	font-weight: 800;
	color: #2196F3;
}
.wordset {
	font-size: 16px;
	font-weight: 600;
	font-family: Open Sans, Arial, sans-serif;
	line-height: 29px;
	column-count: 3;
}
.wordset li {
	font-weight: normal;
	width: -moz-fit-content;
	width: fit-content;
	cursor: pointer;
}
.wordset li:first-of-type {
	margin-top: 0;
}
.wordset li:hover {
	background-color: #03a9f41a;
	color: #02a6f2;
	position: relative;
}
.wordset button {
	display0: none;
	border0: none;
	background-color: transparent;
	position: absolute;
	top: 0;
	right: -70px;
}
.vocWord {
	color: black;
	cursor: pointer;
}
li:hover .vocWord {
	color: #02a6f2;
}
.vocTransl {
	display: block;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.vocTransl::before {
	content: " - ";
}
#lesson_vocab {
	font-size: 14px;
}
.dictItem, .dictTransl, .dictDescr, .dictTrscrb {
	margin: 10px;
}
.dictItem span {
	font-size: 16px;
	font-weight: 600;
	color: black;
}
.dictTransl {
	font-size: 14px;
	font-weight: 400;
	color: silver;
}
.dictTransl span {
	display: none;
}
.dictTransl input[checked] ~ span  {
	display: block;
}
.dictTransl input[checked] ~ label  {
	display: none;
}
#dictShowTransl {
	display: none;
}
.dictDescr {
	font-size: 14px;
	font-weight: 400;
	color: black;
}
.dictExamples div {
	border-left: solid 3px coral;
	margin: 10px;
	padding-left: 5px;
}
.dictOthers {
	border-bottom: solid 1px #e6e6e6;
	border-top: solid 1px #e6e6e6;
	padding: 10px;
}
.dictOthers::before {
	content: "Other meanings";
	font-weight: 710;
	margin: 10px;
}
.dictMeaning {
	border: solid 2px #e6e6e6;
	border-radius: 5px;
	margin: 10px;
	white-space: normal;
	padding: 10px;
}
.dictMeaning a {
	white-space: normal;
	font-size: 14px;
}
#iconMsgr {
	position: relative;
}
#iconMsgr::after {
	content: attr(unreadCount);
	left: 11px;
	bottom: 1px;
	background-color: limegreen;
	color: white;
	font-size: 11px;
	display: inline-flex;
	line-height: 13px;
	border: none;
	position: absolute;
	border-radius: 5px;
	z-index: 10;
	width: 13px;
	justify-content: center;
}
#iconMsgr[unreadCount="0"]::after {
	display: none;
}
#msgrFrame {
	position: absolute;
	top: 35px; left: 15px;
	width: 450px; height: 450px;
	background-color: white;
	display: flex;
	flex-direction: row;
}
#msgrRight {
	border-left: solid 1px silver;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}
#msgrLeft {
	width: 185px;
}
#msgrLeft ul {
	padding: 0;
}
#msgrLeft li, #msgrLeft label {
	font-size: 13px;
	font-weight: normal;
	color: gray;
	list-style: none;
	margin: 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#msgrLeft label {
	border-bottom: solid 1px silver;
	padding: 10px; margin: 0;
}
#msgrLeft input {
	border-bottom0: solid 1px silver;
	width: calc(100% - 20px);
	flex: 1 0 70px;
}
#msgrLeft li {
	cursor: pointer;
	justify-content: flex-start;
	overflow0: hidden;
	text-overflow0: ellipsis;
	white-space: nowrap;
	border-radius: 9px;
	background-color: white;
	box-shadow: 3px 3px 3px white;
}
#msgrLeft li span {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	line-height: 2em;
	border-radius: 9px;
}
#msgrLeft li:hover span {
	overflow: visible;
	z-index: 2;
	padding-right: 9px;
	background-color: inherit;
}
#msgrLeft li[checked] {
	background-color: silver;
	color: white;
}
#msgrLeft li img {
	width: 24px;
	height: 24px;
	border-radius: 12px;
	margin-right: 10px;
	display: none;
}
#msgrLeft li img + i.icon {
	color: silver;
	margin-right: 10px;
}
#msgrLeft li.system img + i.icon {
	color: #03A9F4;
}
#msgrLeft li img[loaded] {
	display: inline;
}
#msgrLeft li img[loaded]:hover {
	width: 96px;
	height: 96px;
	position: absolute;
	transition: width .5s, height .5s;
	z-index: 3;
}
#msgrLeft li img[loaded] + i.icon {
	display: none;
}
.msgrDate {
	background-color: transparent;
	border: none;
	color: #999999;
	font-size: 13px;
	line-height: 2em;
}
.msgrMsg {
	position: relative;
	background-color: #f0f0f0;
	color: gray;
	border-radius: 9px;
	border: none;
	font-size: 13px;
	align-self: start;
	margin-left0: 10px;
	margin-right0: 50px;
	line-height: 1.5em;
	font-weight: 400;
	padding: 3px 7px;
	margin: 1px 50px 1px 10px;
}
.msgrMsg[my] {
	align-self: flex-end;
	margin-left: 50px;
	margin-right: 10px;
}
.msgrTime {
	position: absolute;
	bottom: 2px;
	right: 5px;
	font-size: 10px;
	opacity: .7;
}
.msgrTime:nth-of-type(1) {
	position: unset;
	visibility: hidden;
}
.msgrTime i  {
	font-family: FontAwesome;
	font-size: inherit;
	font-style: normal;
	margin-left: 2px;
}
.msgrMsg[state=sending] .msgrTime i::before {
	content: "\f017";
}
.msgrMsg[state=sent] .msgrTime i::before {
	content: "\f00c";
}
.msgrMsg[state=delivered] .msgrTime i::before {
	content: "\f560";
}
.msgrMsg[state=read] .msgrTime i::before {
	content: "\f560";
	color: #0a97c2;
}
/*
.msgrMsgFrom .msgrTime {
	right: unset;
	left: -33px;
}*/
#msgrHeader {
	justify-self: flex-start;
	width: 100%;
	min-height: 41px;
	border: none;
	border-bottom: solid 1px silver;
	flex: 0;
}
#msgrMessages {
	width: 100%;
	height0: 100px;
	flex: 1;
	border: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: auto;
}
#msgrInput {
	position: relative;
	justify-self: flex-end;
	width: 100%;
	height0: 70px;
	flex: 0 0 70px;
	border: none;
	border-top: solid 1px silver;
}
#msgrRight[type="system"] #msgrInput {
	display: none;
}
#msgrInput textarea {
	width: 100%;
	height: 100%;
	border: none;
	resize: none;
}
#msgrInput button {
	position: absolute;
	top: 19px;
	right: 15px;
	border: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	box-shadow: 2px 2px 2px silver;
	border-radius: 12px;
	outline: none;
}
#msgrInput button::before {
	font-family: FontAwesome;
	font-size: 24px;
	content: "\f0a9";
}
figure {
	display: inline-flex;
	flex-direction: column;
	position: relative;
}
figcaption {
	align-self: center;
	display: flex;
	justify-content: center;
	align-content: center;
	margin-top: 7px;
	width: 100%;
}
.imageset2, .imageset3, .imageset4, .imageset5 {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
}
.imageset2 > img {
	width: calc(50% - 35px);
	margin: 20px;
	margin-left: 10px;
}
.imageset2 > img:nth-child(2n+1) {
	margin-right: 10px;
	margin-left: 20px;
}
.imageset2 > figure {
	width: calc(50% - 35px);
	margin: 20px;
	margin-left: 10px;
}
.imageset2 > figure:nth-child(2n+1) {
	margin-right: 10px;
	margin-left: 20px;
}

.imageset3 > img {
	width: calc(33% - 24px);
	margin: 8px;
}
.imageset3 > img:nth-child(3n+1) {
	margin-left: 16px;
}
.imageset3 > img:nth-child(3n) {
	margin-right: 16px;
}
.imageset3 > figure {
	width: calc(33% - 24px);
	margin: 8px;
}
.imageset3 > figure:nth-child(3n+1) {
	margin-left: 16px;
}
.imageset3 > figure:nth-child(3n) {
	margin-right: 16px;
}

.imageset4 > img, .imageset4 > figure {
	width: calc(25% - 20px);
	margin: 5px;
}
.imageset4 > img:nth-child(4n+1),
.imageset4 > figure:nth-child(4n+1) {
	margin-left: 10px;
}
.imageset4 > img:nth-child(4n),
.imageset4 > figure:nth-child(4n) {
	margin-right: 10px;
}

.imageset5 > img, .imageset5 > figure {
	width: calc(20% - 16px);
	margin: 5px;
}
.imageset5 > img:nth-child(5n+1),
.imageset5 > figure:nth-child(5n+1) {
	margin-left: 10px;
}
.imageset5 > img:nth-child(5n),
.imageset5 > figure:nth-child(5n) {
	margin-right: 10px;
}

.contentDiv figure img {
	width: 100%;
	margin: 0;
}

span.speaker1, span.speaker2, span.speaker3, span.speaker4, span.speaker5, span.speaker6,
div.speaker1::before, div.speaker2::before, div.speaker3::before, div.speaker4::before, 
div.speaker5::before, div.speaker6::before {
	display: inline-block;
	color: white;
	font-weight: 700;
	font-size: 16px;
	line-height: 35px;
	border: none;
	border-radius: 17px;
	padding: 0 10px;
	margin: 5px;
}
div.speaker1, div.speaker2, div.speaker3, div.speaker4, div.speaker5, div.speaker6 {
	position: relative;
	border: solid 2px;
	border-radius: 5px;
	line-height: 30px;
	padding: 7px;
	margin: 10px;
	border-color: dodgerblue;
}
div.speaker2 { border-color: coral; }
div.speaker3 { border-color: limegreen; }
div.speaker4 { border-color: brown; }
div.speaker5 { border-color: magenta; }
div.speaker6 { border-color: #ffd91a; }
div.speaker1, div.speaker3, div.speaker5 {
	margin-left: 75px;
	margin-right: 150px;
}
div.speaker2, div.speaker4, div.speaker6 {
	margin-left: 150px;
	margin-right: 75px;
}
div.speaker1::before, div.speaker2::before, div.speaker3::before,
div.speaker4::before, div.speaker5::before, div.speaker6::before {
	position: absolute;
	top: -5px;
}
div.speaker1::before, div.speaker3::before, div.speaker5::before {
	left: -75px;
}
div.speaker2::before, div.speaker4::before, div.speaker6::before {
	right: -75px;
}
span.speaker1, div.speaker1::before {
	background-color: dodgerblue;
	content: var(--ini1);
}
span.speaker2, div.speaker2::before {
	background-color: coral;
	content: var(--ini2);
}
span.speaker3, div.speaker3::before {
	background-color: limegreen;
	content: var(--ini3);
}
span.speaker4, div.speaker4::before {
	background-color: brown;
	content: var(--ini4);
}
span.speaker5, div.speaker5::before {
	background-color: magenta;
	content: var(--ini5);
}
span.speaker6, div.speaker6::before {
	background-color: #ffd91a;
	content: var(--ini6);
}
span.exc-hint {
	margin-left: 1ch;
	margin-right: 1ch;
}
#whole[mode="teacher"] span.exc-hint {
	position: relative;
	text-decoration-line: underline;
	text-decoration-style: dotted;
}
.choiceList {
	display: flex;
	justify-content: space-evenly;
}
.choiceTitle {
	border: solid 2px gray;
	border-radius: 9px;
	width: 200px;
	height: fit-content;
	min-height: 75px;
	padding: 15px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 21px;
	opacity: .6;
	box-shadow: 5px 5px 5px 1px lightgrey;
}
.choiceTitle[checked] {
	background-color: gray;
	color: white;
	box-shadow: none;
	margin: 2px 0 0 2px;
}
.choiceBody {
	display: none;
}
.choiceBody[checked] {
	display: block;
}
.itemClass {
	display: inline-flex;
	flex-direction: column;
	width: 250px;
	flex: 1;
	height: fit-content;
	min-height: 150px;
}
.itemClass .classCaption { margin-left: 20px; }
.itemClass div.itemList {
	flex: 1;
	padding: 0 10px;
	margin: 10px 0;
	border-left: solid 2px silver;
}
.itemList li {
	margin: 0;
}
.itemList li:only-of-type {
	list-style: unset;
}
.llExc[excType="strike"] llansw[t=example] {
	padding: 5px;
	background-color: #ecf9dd;
}
span.optionStrike {
	cursor: pointer;
	padding-bottom: 2px;
	border-bottom: solid 2px #a6d2d9;
	border-radius: 3px;
}
*:hover > span.optionStrike {
	border-bottom-color: #ffffff00;
}
#whole[mode="teacher"] *:hover > span.optionStrike[correct] {
	border-bottom-color: #00BCD47F;
}
span.optionStrike:hover, 
span.optionStrike[checked][correct], 
llansw[noanswer] span.optionStrike[checked] {
	text-decoration: line-through;
}
span.optionStrike[checked] {
	border-bottom-color: red;
}
span.optionStrike[checked][correct] {
	border-bottom-color: #ffffff00;
	background-color: #00BCD43F;
}
llansw[noanswer] span.optionStrike[checked] {
	border-bottom-color: transparent;
	background-color: transparent;
}
llansw[noanswer] span.optionStrike[checked]:not([correct]) {
	text-decoration: none;
}
span.accent {
	position: relative;
}
span.accent::before {
	content: "'";
	position: absolute;
	left: 35%;
	top: -3px;
}
.sources {
	font-size: 12px;
	line-height: 1.6;
	color: #a9adb0;
	padding: 20px 20px;
}
.sources::before {
	content: "Sources:";
	display: inline;
	padding-right: 25%;
	border-top: solid 1px #e4e6e7;
	padding-top: 10px;
}
.sources p {
	line-height: 1em;
}
.contentDiv .list-header {
	margin-bottom: -10px;
}
.compact li {
	margin: 0;
}
.optionCheckbox > img {
	width: 150px;
	margin-right: 10px;
}
article:not(.grammar) > h1,
article:not(.grammar) > h2,
article:not(.grammar) > h3 {
	color: gray;
	text-align: center;
}
table.fit {
	width: fit-content;
	border-collapse: collapse;
	border: solid 1px silver; 
}
table.fit td, table.fit tr, table.fit th, table.fit tbody {
	border: inherit;
	line-height: 1.7em;
}
.contentDiv table.noborder , table.noborder tbody, table.noborder tr, table.noborder td {
	border: none;
	vertical-align: top;
}
.contentDiv table.border1 , table.border1 tbody, table.border1 tr, table.border1 td {
	border: solid 1px grey;
	vertical-align: top;
}
.row-list {
	/*display: flex;
	flex-wrap: wrap;*/
}
.row-list li {
	margin: 5px 30px 5px 0;
	/*display: inline;*/
	float: left;
	position: relative;
}
/*.row-list li::before {
	content: '*';
	position: relative;
	left: -1ch;
}*/
.box-fit {
	width: fit-content;
	border: solid 1px coral;
	padding-right: 10px;
	margin: 25px 0 25px 20px;
}
table.table2 {
	width: 80%;
	margin-left: 10%;
	border: gray 1px solid;
	border-collapse: collapse;
}
.table2 thead th {
	background-color: silver;
	border: solid 1px gray;
	line-height: 2em;
}
.table2 tbody td {
	border: solid 1px gray;
	padding-top: 5px;
	padding-bottom: 5px;
}
.handwriting {
	font-style: italic;
}
#m-w { /* modalWrapper */
	position: absolute;
	z-index: 100;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.3);
}
#m-w .wi {
	position: absolute;
}