.collapsible_inner, .collapsible_check {
	display: none;
}

label.collapsible { display: block; }
label.collapsible h2 { margin:0px; padding:0px; }
label.collapsible:hover {
	cursor: pointer;
	padding-left: 20px;
	background-color: #efefef;
}

.collapsible_outer {
	position: relative;
}

.collapsible_check:checked + .collapsible_outer .collapsible_inner {
	display: initial;
}

.targetbox {
	display: none;
}

.targetbox:target {
	display: initial;
}

.language {
	border: 1px solid #000000;
	border-radius: 15px;
	padding: 0px 8px;
	background-color: #efefef;
	white-space: nowrap;
	line-height: 30px;
	position: relative;
}

.language.excluded {
	background-color: #ffafaf;
}

.language.excluded:hover::after {
	content: 'You have excluded this language from comparison checks.';
	background-color: white;
	color: black;
	border: 2px solid black;
	position: absolute;
	display: block;
	top: -32px;
	left: 0px;
	font-size: 12px;
	cursor: help;
	z-index: 9001;
}

.lettergrid .scriptgroup {
	border: 1px dotted black;
}

table.lettergroup {
	width: calc(100% - 2px);
	position: relative;
	border-collapse: collapse;
}

table.lettergroup td {
	position: relative;
}

.lettergroup label .letterwrap {
	border: 1px solid #cfcfcf;
	background-color: #efefef;
	padding: 4px 2px;
	display: inline-block;
	text-align: center;
	width: calc(100% - 4px);
	/*height: 25px;*/
	line-height: 25px;
	vertical-align: middle;
   -ms-user-select:none;
   -moz-user-select:none;
   -webkit-user-select:none;
   -webkit-touch-callout: none;
   -khtml-user-select: none;
    user-select:none;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    font-size: 24px;
}

.observed {
	font-size: 20px;
}

.observed_letter a {
	text-decoration: none;
}

.lettergroup .empty_letter {
	min-height: 36px;
	line-height: 24px;
	display: block;
}

.lettergroup label .letterwrap .letter {
	display: inline-block;
}

.lettergroup label .letterwrap:hover {
	cursor: pointer;
	background-color: #cfcfff;
}

.lettergroup label input[type="checkbox"] {
	display: none;
}


.lettergroup label input[type="checkbox"].prechecked + .letterwrap {
	border-color: #ff0f0f;
	background-color: #cfcfff;
	text-decoration: line-through;
}

.lettergroup label input[type="checkbox"]:checked + .letterwrap {
	border-style: solid;
	border-color: #9f9f9f;
	background-color: #ffcfcf;
}

.lettergroup td:target label input[type="checkbox"] + .letterwrap {
	font-weight: bold;
	z-index: 200000;

	border-color: #2f2fff;
	box-shadow: 0px 0px 16px 3px rgba(47,47,255,0.8);
	-moz-box-shadow: 0px 0px 16px 3px rgba(47,47,255,0.8);
	-webkit-box-shadow: 0px 0px 16px 3px rgba(47,47,255,0.8);

}

.lettergroup label input[type="checkbox"].prechecked:checked + .letterwrap {
	background-color: #cfffcf;
	text-decoration: none;
}

.alphabet {
	word-wrap: break-word;
}

.alphabet .letter {
	border: 1px dotted black;
	padding: 4px;
	font-size: 24px;
	line-height: 44px;
	background-color: rgba(0,0,0,0.1);
	margin: 0px 4px;
}

.alphabet .letter.entered {
	border: 2px solid #00ff00;
	padding: 2px;
}

.alphabet .letter.invalid {
	border-color: #ff0000;
}

.alphabet .letter:first-child {
	margin-left: 0px;
}

.alphabet .letter:last-child {
	margin-right: 0px;
}

input[type="submit"] {
	font-size: 24px;
	padding: 8px;
	border: 1px solid black;
	cursor: pointer;
}

input[type="text"] {
	font-size: 18px;
	font-family: monospace;
	padding: 10px;
	border: 1px solid black;
}

.alphabet_comparison_table .scriptgroup {
	/*padding: 12px 0px;*/
}

.alphabet_comparison_table .scriptgroup h3 { margin: 16px 0px; }

.alphabet_comparison_table .scriptgroup .table h4 {	margin: 16px 0px; }
.alphabet_comparison_table .scriptgroup .table table { margin: 16px 0px; }

.alphabet_comparison_table .scriptgroup .lettergroup_container {
	border-collapse: collapse;
	width: 100%;
}

.alphabet_comparison_table .scriptgroup .table {
	/*overflow-x: auto;*/
}

.alphabet_comparison_table .scriptgroup .lettergroup_container td {
	position: relative;
}

.alphabet_comparison_table .scriptgroup .lettergroup_container .letter {
	position: relative;
	padding: 6px;
	border: 1px dotted black;
	background-color: white;
	font-size: 22px;
	line-height: 32px;
	text-align: center;
	min-width: 20px;
}

.alphabet_comparison_table .scriptgroup .lettergroup_container .letter a {
	color: black;
	display: block;
	width: 100%;
	height: 100%;
	z-index: 500;
}

.alphabet_comparison_table .scriptgroup .lettergroup_container .letter:hover a .uppercase{ text-decoration: double overline; }

.alphabet_comparison_table .scriptgroup .lettergroup_container .letter.lang_ident {
	font-size: 16px;
	white-space: nowrap;
	width: initial;
}
.alphabet_comparison_table .scriptgroup .lettergroup_container .letter.base[data-pos="0"] { width: initial; }

.alphabet_comparison_table .scriptgroup .lettergroup_container .letter.base {
	background-color: #eaeaea;
	border-style: solid;
}

.alphabet_comparison_table .scriptgroup .lettergroup_container .letter.selected {
	background-color: #cfffcf;
	border-color: green;
	border-width: 2px;
	border-style: solid;
	padding: 5px;
}
.alphabet_comparison_table .scriptgroup .lettergroup_container.notfound .letter.selected,
.alphabet_comparison_table .scriptgroup .lettergroup_container .letter.absent { background-color: #ffcfcf; border-color: red; }
.alphabet_comparison_table .scriptgroup .lettergroup_container .letter.absent.compare { border-width: 2px; border-style: solid; padding: 5px;}

.alphabet_comparison_table .scriptgroup .lettergroup_container tr:hover td .letter { background-color: #cfcfff; }
.alphabet_comparison_table .scriptgroup .lettergroup_container.notfound tr:hover td .letter.selected,
.alphabet_comparison_table .scriptgroup .lettergroup_container tr:hover td .letter.absent { background-color: #ff9f9f; cusrsor: }
.alphabet_comparison_table .scriptgroup .lettergroup_container tr:hover td .letter.absent.unique { background-color: #ff7f7f; }
.alphabet_comparison_table .scriptgroup .lettergroup_container tr:hover td .letter.selected { background-color: #4fff4f; }

.alphabet_comparison_table .scriptgroup .lettergroup_container .letter.unique.absent { background-color: #ff9f9f; }
.alphabet_comparison_table .scriptgroup .lettergroup_container .letter.unique.absent:hover { background-color: #ff5f5f; }

.alphabet_comparison_table .scriptgroup .lettergroup_container tr td .letter:hover {
	border-width: 2px;
	border-style: solid;
	padding: 5px;
}

.alphabet_comparison_table .scriptgroup .lettergroup_container .letter.cornertip::before,
.alphabet_comparison_table .scriptgroup .lettergroup_container .letter.cornertip::after {
	font-size: 8px;
	line-height: 8px;
	position: absolute;
}

.alphabet_comparison_table .scriptgroup .lettergroup_container .letter.digraph::before { content: 'DG'; top: 1px; left: 1px; }
.alphabet_comparison_table .scriptgroup .lettergroup_container .letter.digraph:hover::before { top: 0px; left: 0px; }

.alphabet_comparison_table .scriptgroup .lettergroup_container .letter.unique::after { content: 'UQ'; top: 1px; right: 1px; }
.alphabet_comparison_table .scriptgroup .lettergroup_container .letter.unique:hover::after { top: 0px; right: 0px;}

.alphabet_comparison_table .scriptgroup .lettergroup_container .letter.noid::after { content: 'NO'; bottom: 1px; left: 1px; }
.alphabet_comparison_table .scriptgroup .lettergroup_container .letter.noid:hover::after { bottom: 0px; left: 0px; }

.alphabet_comparison_table .scriptgroup .lettergroup_container .letter.absent::after { content:  ''; display: none; }

.alphabet_comparison_table .scriptgroup .lettergroup_container .letter .uppercase {
	display: none;
	text-transform: uppercase;
	position: absolute;
	padding: 6px 0px;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	text-align: center;
	vertical-align: middle;
	margin: 0 auto;
	z-index: 400;
	/*font-size: 0.82em;*/

}

.alphabet_comparison_table .scriptgroup .lettergroup_container .letter:hover .uppercase { display: initial; }
.alphabet_comparison_table .scriptgroup .lettergroup_container .letter:hover .lowercase { opacity: 0; }

.alphabet_comparison_table .diffstable tr:hover td:first-child div {
	font-weight: bold;
	background-color: #cfcfff;
}

.alphabet_comparison_table .scriptgroup .lettergroup_container .letter.unique::after::after {
	content: 'test';
}

/*
	https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting
*/
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.hover_me {
	border-bottom: 1px dotted black;
	cursor: help;
}