/* Main layout */

body {
	width: 95% !important;
}

div.main .center {
	width: 95%;
}

.hidden {
	display: none !important;
	visibility: hidden;
}

#gallery-content {
	margin: 16px 0;
	border: 4px solid #dadada;
	background-color: white;
}

/* Message boxes */
.msgbox {
	border: 2px solid;
	border-radius: 8px;
	padding: 12px;
}

.msgbox-error {
	color: #c62828;
	border-color: #e57373;
	background-color: #ffcdd2;
}

/* Option selectors */

#gallery-groups, #gallery-options {
	margin: 16px 0;
}

#gallery-groups ul,
#gallery-options ul {
	display: inline-block;
	list-style: none;
}

#gallery-groups ul > li,
#gallery-options ul > li {
	display: inline-block;
	margin: 0 8px;
}

#gallery-options > span {
	margin-right: 8px;
}

#gallery-options > select {
	margin-right: 16px;
}

/* Formula categories */
#gallery-categories {
	margin: 20px;
}

#gallery-categories ul {
	display: block;
	padding: 0;
	list-style: none;
	text-align: center;
}

#gallery-categories ul > li {
	cursor: pointer;
	display: inline-block;
	list-style: none;
	margin: 8px;
}

#gallery-categories ul > li:nth-child(1),
#gallery-categories ul > li:nth-child(2) {
	font-size: 1.2em;
	font-variant: small-caps;
}

#gallery-categories ul > li:nth-child(2),
#gallery-categories ul > li:nth-child(3) {
	padding-left: 16px;
	border-left: 1px solid black;
}

#gallery-categories li.selected > span {
	font-weight: bold;
	border-bottom: 2px solid #f26a54;
}

/* Formula table */
#gallery-table {
}

#gallery-table table {
	margin: 0 auto;
	width: 100%;
}

#gallery-table table, #gallery-table table tr, #gallery-table table td {
	border-collapse: collapse;
}

#gallery-table table td {
	padding: 12px 8px;
	max-width: 200px;
	width: 200px;
}

#gallery-table table thead {
	border-bottom: 1px solid #dadada;
}

#gallery-table table thead td {
	text-align: center;
	font-weight: bold;
}

#gallery-table table tbody tr td > img,
#gallery-table table tbody tr td > div,
#gallery-table table tbody tr td > canvas {
	display: block;
	margin: 0 auto;
}

#gallery-table table tbody tr td {
	text-align: center;
}

#gallery-table table tbody tr:hover {
	background-color: #fafafa;
}


/*table tbody tr:hover > td > div,
table tbody tr:hover > td > img,
table tbody tr:hover > td > canvas {
	border: 1px solid #cc0000;
	}*/

	/* Custom section */
	#gallery-custom {
		display: flex;
		flex-direction: column;
		align-items: center;
		align-content: center;
	}

	#gallery-custom-wrapper {
		flex-grow: 1;
		display: flex;
		flex-direction: row;
		flex-flow: wrap;
		align-items: flex-start;
		align-content: center;
		justify-content: center;
	}

	#gallery-custom-wrapper > div {
		border-radius: 8px;
		border: 1px solid #e0e0e0;
		padding: 4px;
		margin: 8px;
	}

	#gallery-custom-wrapper > div > div:first-child {
		border-bottom: 1px solid #e0e0e0;
	}

	#gallery-custom-wrapper > div > div:last-child {
		min-height: 25px;
	}

	.formula-container {
		min-width: 100px;
	}

	.formula-container > div:first-child {
		padding: 4px 8px;
		font-weight: bold;
		text-align: center;
	}

	.formula-container > div:last-child {
		padding: 8px;
	}

	.formula-container > div:last-child > img {
		display: block;
		margin: 0 auto;
	}

	.formula-container-code {
		max-width: 250px;
	}

	/* Miscellaneous */
	[tooltip] {
		cursor: help;
		border-bottom: 1px dashed #999;
	}

	[tooltip]:before {
		position: absolute;
		content: attr(tooltip);
		opacity: 0;
	}

	[tooltip]:hover:before {
		opacity: 1;
		background-color: #696;
	}

	.mathjax-preview {
		color: #ccc !important;
	}

	.mathml-latex {
		max-width: 200px;
	}

	.pre_wiris {
		padding: 0 !important; /* Avoid Prism.js from overwriting it */
		word-wrap: break-word !important;
		background-color: white !important;
		overflow: visible !important;
		white-space: pre-wrap !important;
	}

	.code_wiris {
		font-size: 0.8em;
		word-break: break-word !important;
		white-space: pre-wrap !important;
	}