/*** EDITOR ***/
#typedText {
	border: none;
	resize: none;
}

.trumbowyg-editor {
	font-family: sans-serif, Arial, Verdana, "Trebuchet MS", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 1rem;
	line-height: 1.8rem;
	color: #333;
	padding: 15px 0px !important;
}
.trumbowyg-box {
	border-radius: 0.25em;
	border: none !important;
}
.trumbowyg-button-pane {
	display: none !important;
}
.trumbowyg-box, .trumbowyg-editor-box {
	border-color: none !important;
}

.editor-dropdown {
	filter: drop-shadow(0px 1px 3px #ccc);
}

#editorResize {
	z-index: 90;
	height: 16px;
	margin-bottom: 4px;
	font-size: 16px;
	color: #212529;
}
#editorResize:hover {
	background-color: rgb(248, 249, 250);
}

.ver, .mod, .spellver, .spellmod, .cor {
	color: black;
	text-decoration: none;
	padding: 1px;
	margin: 2px;
}
.ver:hover, .mod:hover, .spellver:hover, .spellmod:hover {
	text-decoration: none;
}
.nayt-grammar {
	padding: 1px;
	margin: 2px;
}
.nayt-grammar, .mod, .mod:hover {
	font-weight: 500;
	border-width: 0 0 3px 0;
	border-style: solid;
	border-color: hsl(3, 50%, 87%);
	border-radius: 4px;
	background-color: hsl(3, 100%, 93%);
}
.ver, .ver:hover {
	font-weight: 500;
	border-width: 0 0 3px 0;
	border-style: solid;
	border-color: hsl(49, 50%, 85%);
	border-radius: 4px;
	background-color: hsl(49, 100%, 90%);
}
.mod.l2, .mod.l2:hover {
	font-weight: 500;
	border-color: hsl(230, 100%, 90%);
	background-color: hsl(230, 100%, 96%);
}
.ver.l2, .ver.l2:hover {
	font-weight: 500;
	border-color: hsl(183, 37%, 85%);
	background-color: hsl(183, 58%, 93%);
}
.cor, .cor:hover {
	color: hsl(120, 100%, 25%);
	background-color: #eeffee;
}
.nayt-spelling, .spellmod, .spellmod:hover {
	color: hsl(3, 80%, 46%);
	border-bottom: 1px solid hsl(3, 80%, 46%);
	border-radius: 4px;
	font-weight: 500
}
.spellver, .spellver:hover {
	color: hsl(49, 62%, 39%);
	border-bottom: 1px solid hsl(3, 80%, 46%);
	border-radius: 4px;
	font-weight: 500
}
.ver.updated {
	background-color: transparent;
	border: 2px dashed hsl(49, 70%, 70%);
	border-radius: 4px;
	font-weight: 500;
}
.mod.updated {
	background-color: transparent;
	border: 2px dashed hsl(3, 70%, 70%);
	border-radius: 4px;
	font-weight: 500;
}
.ver.l2.updated {
	border: 2px dashed hsl(183, 37%, 70%);
}
.mod.l2.updated {
	border: 2px dashed hsl(230, 100%, 70%);
}
.ver.updated, .mod.updated, .spellver.updated, .spellmod.updated {
	color: black;
	text-decoration: none;
	padding: 1px;
	margin: 2px;
}
.spellmod.updated {
	color: hsl(3, 40%, 46%);
	border: none;
}
.spellver.updated {
	color: hsl(49, 32%, 39%);
	border: none;
} 


#progressSpinner {
	-webkit-animation: spin 2.5s linear infinite;
    -moz-animation: spin 2.5s linear infinite;
    animation: spin 2.5s linear infinite;
	margin-right: 0.25rem;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

/* *** TIP ELEMENTS *** */
.hpTipLink {
	color: #0F73D6;
}
#summarycontainer .hpTipLink {
	vertical-align: super;
	font-size: 80%;
}

.hpTipBox {
	background-color: #efefef;
	color: black;
	font-size: 90%    ;
	border: 2px solid #999;
	padding: 3px;
    z-index: 400000;
    cursor: help;
}

.nadaclaircheck {
    padding-top: 8px;
}
.nadaclaircheck img {
    border: none;
    vertical-align: middle;
}
.nadaclaircheck a {
    color: blue;
    text-decoration: none;
}
.nadaclaircheck a:hover {
    color: red;
}
/*
.nadaclaircheck a.check {
    border: thin solid #ccc;
    padding: 5px;
    background-color: white;
}
*/

.exercise {
	max-width: 50%;
	float: right;
	border: 1px solid #ccc;
	border-radius: 5px;
	filter: drop-shadow(0px 2px 5px #ddd);
	background-color: white;
	padding: 12px;
	margin: 8px;
	font-size: 16px;
	font-weight: normal;
}
.exercise .header {
	font-size: 18px;
	color: #2E8885;
	margin: 0.25em;
}
.exercise .item {
	display: list-item;
	margin: 0.25em;
	list-style: none;
}
.exercise .hint {
	color: #2E8885;
	font-weight: 600;
}

.exercise .btn-light {
	border-color: #ced4da;
}

.symbol {
	background-color: #eee;
	font-family: monospace;
}