/* Global */
body * {
	font-family: Consolas;
}

body {
	background-color: var(--fundoPrincipal);
	color: var(--corPrincipal);
}

textarea {
	font-family: monospace;
	resize: none;
}

::-webkit-scrollbar {
	width: var(--scrollSize);
	height: var(--scrollSize);
}

::-webkit-scrollbar-track {
	background-color: transparent;
}

::-webkit-scrollbar-thumb {
	border-radius: 15px;
	border: var(--scrollSize) solid var(--scrollColor);
}

/* Estilo do Site*/
header {
	position: sticky;
	top: 0rem;
	z-index: 100;
	background: var(--fundoHead);
	border: 0px;
	border-color: var(--bordaMaster);
	border-style: inset;
	border-bottom-width: 5px;
	padding: 0px;
	border-radius: 50%;
	border-top-left-radius: 0%;
	border-top-right-radius: 0%;
	height: 2.7rem;
	min-height: 2.7rem;
	max-height: 2.7rem;
	margin-top: -2.3rem;
}

.tituloMk {
	animation: sombraTitulo 5s ease-in-out infinite alternate;
	letter-spacing: 0.7rem;
	font-size: 2rem;
	color: var(--corHead);
}

@keyframes sombraTitulo {
	to {
		text-shadow: 0px 0px 5px var(--corHeadEfeito);
	}
}

.tituloMk span.m,
.tituloMk span.k {
	animation: sombraTitulo2 1s linear infinite alternate;
	position: relative;
}

@keyframes sombraTitulo2 {
	to {
		text-shadow: 0px 0px 10px var(--corHeadEfeito);
	}
}

.tituloMk span.m::before,
.tituloMk span.k::before {
	content: "";
	position: absolute;
	left: -6px;
	top: 0;
	width: 2rem;
	height: 2rem;
	border-left: 1px solid orange;
	border-radius: 50%;
	animation: girarBrilho 2s infinite cubic-bezier(0, 0.7, 1, 0.24);
}

.tituloMk span.k::before {
	animation-direction: reverse;
}

@keyframes girarBrilho {
	0% {
		box-shadow: 0px 0px 0px 0px var(--bordaMaster);
	}

	50% {
		box-shadow: 0px 0px 0px 0px var(--bordaMaster);
	}

	80% {
		box-shadow: 0px 0px 5px 0px var(--bordaMaster);
	}

	100% {
		transform: rotate(360deg);
		border-left-color: var(--corHead);
		box-shadow: 0px 0px 15px 0px white;
	}
}

.tituloMk span.t {
	animation: cair 3s forwards cubic-bezier(0, 0.7, 1, 0.24) 5s;
}

@keyframes cair {
	0% {}

	100% {
		transform: translate(0%, 50%) rotate(45deg);
	}
}

div.Corpo {
	display: flex;
	flex-direction: row;
}

nav {
	z-index: 90;
	border: 0px solid transparent;
	width: 100px;
	/* border: 1px solid blue; */
}

main {
	flex: 0 1 100%;
	margin-top: 2.1rem;
	border: 3px double #0003;
	border-radius: 15px;
	padding: 0px 5px 5px 5px;
}

footer {
	position: fixed;
	bottom: 0;
	left: 0;
	color: var(--corPrincipal33);
	font-size: 0.7rem;
}

nav .Menu {
	transform: translateX(calc(-100% + 85px));
	position: fixed;
	top: 0;
	width: fit-content;
	transition: 1s cubic-bezier(0.2, 0, 0.5, 2);
	padding: 3rem 5px 2rem 10px;
	white-space: nowrap;
	overflow: hidden;
	background-color: var(--fundoMenu);
	color: var(--corMenu);
	border: 0px;
	border-right: 3px;
	border-bottom: 4px;
	border-style: inset;
	border-color: var(--bordaMaster);
	border-radius: 0px;
	border-bottom-right-radius: 15px;
	border-top-right-radius: 15px;
	display: flex;
	flex-direction: column;
	row-gap: 20px;
}

nav .Menu:hover {
	transition: 0.2s ease-in-out;
	transform: translateX(0%);
}

.Menu .MenuLink {
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	transition: 0.3s;
}

.Menu .MenuLink:hover {
	color: var(--corLinkHover);
	text-shadow: 0px 0px 10px var(--corLinkEfeito);
	transition: 0.3s;
	stroke: var(--corLinkHover);
	stroke: 1px;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	animation: percorre 4s linear forwards;
}

.Menu .MenuLink:hover svg {
	color: var(--corLinkHover);
	animation: fill 1s ease-in-out infinite alternate;
}

@keyframes percorre {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes fill {
	0% {
		fill: var(--corLink);
	}

	50% {
		fill: var(--fundoMenu);
	}

	100% {
		fill: var(--corLinkEfeito);
	}
}

/* Icones SVG*/
.MenuLink span:nth-child(1) {
	padding-right: 5rem;
	-webkit-box-reflect: below -18px linear-gradient(0deg, #FFF5, #FFF5, #FFF5, #FFF5, transparent, transparent, transparent);
}

.MenuLink span:nth-child(2) {
	padding: 0px 2rem 0.5rem 2rem;
	transform: scale(2);
	overflow: hidden;
}

.h1 {
	z-index: 5;
	position: sticky;
	top: 45px;
	font-size: 1.5rem;
	text-decoration: underline wavy;
	text-decoration-color: var(--fundoTitulo);
	font-weight: bold;
	letter-spacing: 0.2rem;
	font-style: italic;
	color: var(--corTitulo);
	text-shadow: 2px 2px 5px var(--fundoMenu);
	background: var(--fundoTitulo);
	border-radius: 15px;
	padding-bottom: 0.5rem;
	backdrop-filter: blur(1.5px);
	margin-bottom: 8px;
}

h2 {
	z-index: 4;
	position: sticky;
	top: 80px;
	font-size: 1rem;
	font-weight: bold;
	font-style: italic;
	color: var(--corTitulo);
	text-shadow: 2px 2px 5px var(--fundoMenu);
	background: var(--fundoSubTitulo);
	border-radius: 15px;
	padding-left: 0.5rem;
	backdrop-filter: blur(1.5px);
	margin-bottom: 8px;
}

h4 {
	background: linear-gradient(45deg, PURPLE, GREEN, PURPLE);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Outros */
input {
	width: 100%;
	background-color: white;
	color: var(--corPrincipal);
	border: 1px outset var(--bordaInput);
	border-radius: 4px;
	outline: 0px;
}

/* Personalizando tabela */
.divListagem {
	box-shadow: 0px 0px 5px 1px var(--corPrincipal33);
	border: 1px solid var(--bordaMaster);
}

.tableListagem thead {
	background: var(--fundoHead);
	color: var(--corHead);
	border: 1px solid var(--bordaMaster);
}

.tableListagem th {
	border: 1px solid var(--fundoMenu);
	vertical-align: middle;
	height: 25px;
}

.listBody td {
	text-align: center;
	vertical-align: middle;
	overflow: auto;
	max-height: 20px;
	min-height: 20px;
	height: 20px;
	border: 1px solid var(--bordaMaster);
	padding: 3px 6px;
}

.listBody tr:has(td.campok-mStatus.False) td {
	background-color: #ff000015;
}

.listBody td.True {
	background-image: url("data:image/svg+xml,<svg width='16' height='16' fill='rgba(0,150,0)' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z'/><path d='M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z'/></svg>");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: auto 1.2em;
}

.listBody td.False {
	background-image: url("data:image/svg+xml,<svg width='16' height='16' fill='rgba(150,0,0)' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/></svg>");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: auto 1.8em;
}

.paginate_button {
	border: 1px solid var(--bordaMaster);
}

.paginate_button.pagBack {
	border-bottom-left-radius: 20px;
	border-top-left-radius: 0px;
}

.paginate_button.pagNext {
	border-bottom-right-radius: 20px;
	border-top-right-radius: 0px;
}

.paginate_button.active,
.paginate_button:hover {
	background-color: var(--fundoHead);
}

/* TABELA COM UL. DESCRITIVA*/
ul.tabela {
	border: 1px solid var(--bordaMaster);
}

ul.tabela li {
	display: flex;
	flex-direction: row;
}

ul.tabela li div.quebra {
	padding: 5px;
	border-bottom: 1px solid var(--tTextoHigh);
}

ul.tabela li div.quebra:nth-child(1) {
	flex: 0 0 60%;
}

ul.tabela li div.quebra:nth-child(2) {
	flex: 0 0 40%;
}

ul.tabela li:nth-child(1) div.quebra {
	font-weight: bold;
	border: 1px solid var(--bordaMaster);
	background-color: darkgreen;
	color: yellowgreen;
}

.operacaoContainer {
	border: 3px double var(--bordaMaster);
	border-radius: 10px;
	width: 100%;
	padding: 3px;
}

.operacaoContainer div {
	padding: 5px;
}

.operacaoTitulo {
	width: 100%;
	border-radius: inherit;
	color: var(--corHead);
	background-color: var(--fundoHead);
	text-align: center;
}

.operacaoAcao {
	width: 70%;
	border-radius: 8px;
}

.regua {
	width: 30px;
	padding: 0px 5px;
	overflow: hidden;
	text-align: right;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	border-right: 3px dotted var(--tTexto);
	border-left: 1px solid var(--tFundoHigh);
	color: var(--corHeadEfeito);
	background-color: var(--fundoMenu);
}

.codigo {
	padding-left: 10px;
	text-align: left;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	width: 100%;
	overflow: hidden;
}

textarea {
	color: var(--corMenu);
	background-color: var(--corSecundaria);
	outline: 0px;
	border: 0px;
}

.codigoContainer {
	margin: auto;
	border: 1px solid transparent;
	border-radius: 5px;
	border-top-color: var(--tFundoHigh);
	width: fit-content;
	position: relative;
}

.titulo {
	position: absolute;
	top: -23px;
	right: 20px;
	color: var(--corHeadEfeito);
	background-color: var(--corSecundaria);
	padding: 3px 15px;
	border: 1px solid transparent;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-top-color: var(--tFundoHigh);
	border-left-color: var(--tFundoHigh);
}

pre {
	font-family: "Courier New", monospace;
	font-size: 0.8rem;
	background-color: var(--fundoSecundaria);
	color: var(--corSecundaria);
	border-radius: 5px;
}


.divInputInput {
	padding: 2px 10px;
}

/* Personalizando mk-sel*/
mk-sel {
	background-color: var(--bordaInput);
	height: 28px;
}

mk-sel::part(rolaCima),
mk-sel::part(rolaBaixo) {
	background-color: var(--fundoMenu);
	color: var(--corMenu);
}

mk-sel::part(lista) {
	max-height: 200px;
}

.tam150 {
	width: 150px;
	height: 150px;
}