body {
	font-family: Arial, Helvetica, sans-serif;
}

.callout-pedi {
	min-width: 100%;
	min-height: 600px;
	font-size: 14px;
}

.btn-help {
	position: fixed;
	top: 5px;
	right: 5px;
	width: 40px;
	height: 40px;
	border-radius: 100%;
	background-color: black;
	opacity: 0.9;
	color: red;
	font-weight: 400%;
	display: none;
}

.callout {
	border-radius: 25px;
	position: fixed;
	bottom: 35px;
	right: 5px;
	left: 5px;
	margin: auto;
	width: 98%;
	height: 530px;
}

.callout-header {
	border-radius: 10px 10px 0 0;
	padding: 10px 15px;
	background: black;
	font-size: 24px;
	color: green;
	opacity: 0.95;
	font-weight: bold;
}

.callout-container {
	padding: 1px 5px 5px 10px;
	background-color: black;
	color: green;
	opacity: 0.85;
	line-height: 2;
}

.scrollable {
	overflow-y: scroll;
}

.closebtn {
	position: absolute;
	top: 5px;
	right: 15px;
	color: red;
	font-size: 30px;
	cursor: pointer;
}

.closebtn:hover {
	color: black;
}

input[title] {
	color: red;
}

.unichar {
	font-size: 24px;
	padding: auto;
	width: 50px;
	height: 50px;
	margin: 5px;
}

.unicode-groups {
	max-width: 300px;
	width: 100%;
	height: 32px;
	margin: 5px;
	font-size: 16px;
}

.code-point {
	margin: 2px;
	font-size: 14px;
	max-width: 64px;
}

.main-content {
	width: 100%;
}

.xhuge {
	position: fixed;
	font-size: 64px;
	left: 380px;
	top: -60px;
	z-index: 2;
}

p .matrix {
	font-family: Consolas, 'Courier New', Courier, monospace;
	font-size: 16px;
	font-weight: bold;
	display: inline;
	line-height: 2;
}

.label {
	font-weight: bolder;
	color: red;
	display: inline;
	font-size: 18px;
}

td {
	font-size: 14px;
}

.history {
	width: 98%;
	margin: 5px;
}

.history-fs {
	display: none;
}

.toggle-btn-history {
	margin: 5px;
	min-width: 32px;
	min-height: 32px;
}
.editor-fs {
	background-color: whitesmoke;
	display: none;
}
.textarea-editor {
	width: 95%;
	
}
.selected-unichar {
	font-size:x-large;
	z-index: 123;
}