pre {
	text-align: left;
	margin: 1em 0;
	padding: 0.5em;
	overflow: scroll;
}

div.code {
	@apply overflow-auto whitespace-pre border-gray-45 p-2 text-sm;
}

section .codeview {
	border-color: transparent !important;
	@apply pl-0 pr-0 font-mono text-sm;
}

.moduletitle {
	@apply pb-2 pt-2 text-sm font-semibold;
}

.module {
	@apply grid grid-cols-1 gap-0 pt-2 md:grid-cols-3 md:pb-2;
}

.module section {
	border-top: 1px solid #f0f1f2;
	border-bottom: 1px solid #f0f1f2;
	@apply pb-0 md:p-3;
}

.module section:first-child {
	@apply pl-0;
}

.itemviewtitle,
.title {
	@apply mb-0 mt-5 text-lg  font-[500] text-gray-100;
}

section .codeview pre {
	@apply m-0 p-0;

	background: transparent;
}

.viewless::after {
	transform: rotate(180deg);
}

.viewmore {
	@apply flex w-full justify-end text-sm font-normal;
}

.modulewrapper {
	@apply p-0 pb-2;
}

@media (min-width: 40em) {
	section .modulewrapper {
		border-right: 1px solid #f0f1f2;
	}

	section .modulewrapper:last-child,
	section .modulewrapper:nth-child(3n) {
		border-right: none;
	}
}

.codeline {
	display: table-row;
}

.codelinenumbers {
	display: table-cell;
	text-align: right;
	padding-right: 1em;
	user-select: none;
	opacity: 0.5;
}

.modulewraper nav ul {
	@apply mx-0 mt-3 justify-start px-0 md:mt-1;
}

.pagmodule {
	@apply h-[556px] overflow-auto;
}