/* Variáveis de Temas */
:root {
	--tClaroTexto: #000;
	--tClaroTextoHigh: #333;
	--tClaroFundo: #ccc;
	--tClaroFundoForte: #f7f7f7;
	--tClaroFundoHigh: #ddd;
	--MkFaseCorFundo: #f7f7f7;
	--MkFaseCorEfeitoPassivo: #c1e300;
	--MkFaseCorFundoIco: #f7f7f7;
	--MkFaseCorFundoIcoBack: #29256266;
	--MkFaseCorFundoIcoAtivo: #c1e300CC;
	--MkFaseCorTexto: #292562;
	--MkFaseCorTextoBack: #292562;
	--MkFaseCorTextoAtivo: #00d1c3;
	--MkFaseCorTextoDisabled: #59595166;
	--MkFaseCorTextoIcoBack: #f7f7f7;
	--MkFaseCorTextoIcoAtivo: #292562;
	--MkFaseCorEfeitoTexto: #00d1c333;
	--timerRestante: #c1e300;
	--timerConsumido: #e0e0e0;
	--corSombra: #333333;


	--carregadorInterno1: black;
	--carregadorInterno2: green;
	--carregadorExterno1: green;
	--carregadorExterno2: black;
	--carregadorCentro: black;
	--zCarregador: 5011;

	/* WC Seletor*/
	--mkSelCorSetaSelecionado: black;
	--mkSelListBorder: #0009;
	--mkSelListBackground: #FFF;
	--mkSelListColor: #000;
	--bordaItemSelecionado: #0095;
	--fundoItemSelecionado: #0092;

	/* Seletor mkSel*/
	--mkSelArrowSize: 0px;
	--Main1: #292562;
	--Main2: #c1e300;
	--FundoSeletor: transparent;
	--FundoSeletorOpaco: #00d1c399;
	--FundoSeletorDesativado: #777;
	--BordaItens: #000;
	--FundoItensBgEC: #fff;
	--FundoItensBgEG: #0000 8%, var(--FundoItensBgEC) 0 17%, #0000 0 58%;
	--FundoItensBg: linear-gradient(135deg,
			#0000 20.5%,
			var(--FundoItensBgEC) 0 29.5%,
			#0000 0) 0 calc(var(--FundoItensSize) / 4),
		linear-gradient(45deg, var(--FundoItensBgEG)) calc(var(--FundoItensSize) / 2) 0,
		linear-gradient(135deg,
			var(--FundoItensBgEG),
			var(--FundoItensBgEC) 0 67%,
			#0000 0),
		linear-gradient(45deg,
			var(--FundoItensBgEG),
			var(--FundoItensBgEC) 0 67%,
			#0000 0 83%,
			var(--FundoItensBgEC) 0 92%,
			#0000 0),
		#f7f7f7;
	--FundoItensSize: 30px;
	--FundoItensHover: linear-gradient(0.25turn, #00d1c3, transparent);
	--FundoItensMarK: linear-gradient(0.25turn,
			#29256299,
			transparent);
	--FundoItensSel: linear-gradient(0.25turn, transparent, #c1e300);
	--FundoItensSelArrow: linear-gradient(0.25turn,
			transparent,
			#c1e300);
	--FlexinhaCor: var(--scrollColor);
	--CorItensHover: #000;
	--CorSeletor: var(--CorItensHover);
	--CorItens: var(--BordaItens);
	--ArrowSelecionado: "\2714";

	/* PADROES DA BIBLIOTECA */
	--tTexto: var(--tClaroTexto);
	--tTextoHigh: var(--tClaroTextoHigh);
	--tFundo: var(--tClaroFundo);
	--tFundoForte: var(--tClaroFundoForte);
	--tFundoHigh: var(--tClaroFundoHigh);
	--mkEscurecer: #0005;
	--mkEscurecerForte: #000b;
	--corIconeSim: #3c3;
	--corIconeNao: #777;
	--corIconeNaoHover: #fff;
	--sombraForte: #000;
	--ouro: #daa520;
	--timerEncerrando: #ff8888;
	--offline100: #ff4646ff;
	--offline50: #330000cc;
	--serverOffText: #fff;
	/* EFEITOS */
	--efeitoSobe: #00d1c3;
	--efeitoDodge: #fff9;
	--efeitoDifference: #fff9;
	--efeitoVidro: #cfc3;
	--efeitoPulsar: #ff000099;
	--pulsarInput: #ff660099;
	/* TONALIDADES */
	--tonalidadeVerde: #090;
	--tonalidadeVermelho: #900;
	--tonalidadeCinza: #999;
	--tonalidadeAzul: #009;
	--tonalidadeAzulCeu: #08F;
	--tonalidadeRosa: #F08;
	--tonalidadeRoxo: #80F;
	--tonalidadeLaranja: #F80;
	--tonalidadeBranco: #FFF;
	--tonalidadePreto: #000;
	/* DIMENCOES */
	--timerW: 30px;
	--cardGap: 5px;
	--min-grid-card: 1fr;
	--max-grid-card: auto;
	/* ELEVACOES */
	--mkConfirmadorIndex: 1600;
	--mkSelIndex: 2000;


}

/* BLOQUEIA SCROLL, Colocar no Body ou onde tiver scroll */
.mkSemScrollY {
	height: 100%;
	overflow: hidden;
}

/* Oculta o item atual ao adicionar a classe nele */
*.oculto {
	display: none !important;
}

li,
ul {
	list-style: none;
}

/* HIDE */
.mkSecreto {
	width: 0px !important;
	min-width: 0px !important;
	max-width: 0px !important;
	height: 0px !important;
	min-height: 0px !important;
	max-height: 0px !important;
	border: 0px !important;
	overflow: hidden !important;
	margin: 0px 0px 0px 0px !important;
	opacity: 0% !important;
	z-index: -1 !important;
	padding: 0px !important;
	box-shadow: none !important;
	outline: none !important;
}

/* =======================
	CSS PERSONALIZADO
=========================*/
/* Formato Botoes */
button.mkBtn {
	background: var(--tFundo);
	color: var(--tTexto);
	border-width: 1px;
	border-style: outset;
	border-color: var(--tTextoHigh);
	border-radius: 5px;
	padding: 0.2rem 0.6rem;
}

button.mkBtn:hover {
	border-style: inset;
	background: var(--tFundoHigh);
	color: var(--tTexto);
	text-shadow: -1px -1px var(--tFundo);
}

button.mkBtnInv {
	background: transparent;
	color: var(--tFundo);
	border-width: 1px;
	border-style: outset;
	border-color: var(--tFundo);
	border-radius: 5px;
	padding: 0.2rem 0.6rem;
	width: 35px;
	min-width: 35px;
	max-width: 35px;
	height: 35px;
	min-height: 35px;
	max-height: 35px;
	line-height: 0;
}

button.mkBtnInv:hover {
	border-style: inset;
	border-color: var(--tFundo);
	color: var(--tFundo);
	text-shadow: 1px 1px var(--tTexto);
}

/* LI e Barra Navegacao */
.mkAbas {
	display: flex;
	flex-wrap: wrap;
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
	background-color: transparent;
	padding: 6px;
	margin-bottom: -4px;
}

.mkAbas .mkAbaslink {
	user-select: none;
	text-decoration: none;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border: 1px solid transparent;
	padding: 5px 15px;
	transition: 0.2s ease-in-out;
}

.mkAbas .mkAbaslink.active {
	font-weight: bold;
	cursor: default;
	border: 1px solid var(--tFundoHigh);
	box-shadow: -1px -1px 0px 0px var(--tTextoHigh);
	border-bottom-color: transparent;
	background: var(--tFundoForte);
	color: var(--tTexto);
}

div[class*="mkAba"] {
	transition: opacity 0.5s linear;
	opacity: 1;
}

div[class*="mkAba"].oculto {
	display: flex !important;
	position: absolute;
	visibility: hidden;
	opacity: 0;
	width: 0;
	min-width: 0;
	max-width: 0;
	height: 0;
	min-height: 0;
	max-height: 0;
	margin: 0;
	padding: 0;
}

.mkCard {
	display: flex;
	flex-direction: column;
	padding: 0px 0px 0px 0px;
	overflow: auto;
}

/* =======================
	LOADING
=========================*/
.CarregadorMkBlock {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	min-height: 100%;
	min-width: 100%;
	font-size: 2rem;
	z-index: 5010;
	display: flex;
	justify-content: center;
	align-items: center;
}

.CarregadorMkBlock::before {
	content: "";
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: 5001;
	background-color: var(--mkEscurecerForte);
	min-height: 100%;
	min-width: 100%;
	width: 100%;
	height: 100%;
}

.CarregadorMkTopoDireito {
	position: absolute;
	right: 3px;
	top: 3px;
	width: 45px;
	min-width: 45px;
	max-width: 45px;
	height: 45px;
	min-height: 45px;
	max-height: 45px;
	z-index: 5012;
	background-color: transparent;
	border: 1px solid transparent;
	color: var(--tFundo);
	border-color: var(--tFundo);
	display: inline-block;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	padding: 0.375rem 0.75rem;
	border-radius: 0.25rem;
	transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out,
		border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.CarregadorMkTopoDireito svg {
	width: 100%;
	height: 100%;
}

button.CarregadorMkTopoDireito:hover {
	background-color: var(--tFundo);
	color: var(--tTexto);
}

.CarregadorMk {
	width: 80px;
	height: 80px;
	color: transparent;
	background: transparent;
	border: transparent dotted 10px;
	border-left-style: double;
	border-right-style: double;
	border-left-color: var(--carregadorExterno2);
	border-right-color: var(--carregadorExterno1);
	border-top-color: var(--carregadorExterno1);
	border-bottom-color: var(--carregadorExterno2);
	border-radius: 100%;
	position: absolute;
	z-index: var(--zCarregador);
	animation: _360Graus 2000ms linear infinite;
}

.CarregadorMk::before {
	border: solid 12px var(--carregadorInterno1);
	border-left-color: var(--carregadorInterno1);
	border-right-color: var(--carregadorInterno2);
	content: "";
	top: 2px;
	left: 10px;
	border-radius: 100%;
	position: absolute;
	animation: _360Graus 0.5s linear infinite;
}

.CarregadorMk:not(.semAfter)::after {
	border: transparent solid 3px;
	border-left-color: var(--carregadorInterno1);
	border-right-color: var(--carregadorInterno2);
	position: absolute;
	content: "";
	top: 25px;
	left: 25px;
	right: 25px;
	bottom: 25px;
	animation: _360Graus 220ms linear infinite reverse;
}

@keyframes _360Graus {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

.CarregadorMkSemScrollY {
	height: 100%;
	overflow: hidden;
}

/* =======================
	MK Effect: Input Pendente
=========================*/
.divInputInput:has(.pending) {
	position: relative;
	box-sizing: border-box;
	background-clip: padding-box;
	border: 5px solid transparent;
	border-radius: 10px;
	z-index: 2;
	margin: -5px 0px;
}

.divInputInput:has(.pending)::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	margin: -5px;
	border-radius: inherit;
	background: var(--ouro);
	animation: pulsarMk 1.5s ease-in-out alternate infinite;
}

.mkEfeitoPulsar {
	animation: pulsarMk 1.5s ease-in-out alternate infinite;
}

@keyframes pulsarMk {

	0%,
	100% {
		background: var(--pulsarInput);
	}

	50% {
		background: transparent;
	}
}

/* =======================
	MK Effect: Offline
=========================*/
.offlineBlock {
	position: fixed;
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	bottom: 50%;
	left: 0px;
	width: 100%;
	height: 100px;
	min-height: 100px;
	min-width: 100%;
	font-size: 2rem;
	z-index: 4010;
	color: var(--serverOffText);
	background: var(--offline100);
	animation: pulsarMk2 1.5s ease-in-out alternate infinite;
	box-shadow: 3px 3px 2px 2px #000;
}

.offlineBlock button {
	position: fixed;
	right: 2px;
	top: 2px;
	z-index: 4012;
	background-color: transparent;
	border: 1px solid transparent;
	color: var(--serverOffText);
	border-color: var(--serverOffText);
	display: inline-block;
	font-weight: 400;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	font-size: 2rem;
	padding: 0.375rem 0.75rem;
	border-radius: 0.25rem;
	transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out,
		border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

@keyframes pulsarMk2 {

	0%,
	100% {
		background: var(--offline100);
	}

	50% {
		background: var(--offline50);
	}
}

/* =======================
	MK Effect: Pulsar Background
=========================*/
.pulsarFundo {
	animation: pulsarFundo 1s ease-in-out alternate infinite;
}

@keyframes pulsarFundo {

	0%,
	100% {
		background: var(--efeitoPulsar);
	}

	50% {
		background: transparent;
	}
}

/* =======================
	MK Effect: Vidro
=========================*/
.iconeVidro {
	margin-left: -20px;
	display: flex;
	z-index: 2;
}

.iconeVidro li {
	position: relative;
	list-style: none;
	margin: 5px;
	margin-top: 5px;
}

.iconeVidro li a {
	position: relative;
	width: 3.4rem;
	height: 3.4rem;
	font-size: 2rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 10px;
	border: 1px inset #e0e0e099;
	text-decoration: none;
	box-shadow: 1px 1px 2px var(--sombraForte);
	backdrop-filter: blur(1.2px);
	transition: 1s;
	overflow: hidden;
}

.iconeVidro li a:hover {
	transform: translateY(10px);
}

.iconeVidro li a::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 100%;
	background: var(--efeitoVidro);
	transform: skewX(45deg) translateX(100px);
	transition: 0.5s;
}

.iconeVidro li a:hover::before {
	transform: skewX(45deg) translateX(-150px);
}

/* =======================
	MK Effect: DODGE
=========================*/

.mkEfeitoDodge {
	position: relative;
	overflow: hidden;
}

.mkEfeitoDodge:before {
	content: "";
	position: absolute;
	left: -100%;
	top: -66%;
	width: 25%;
	height: 250%;
	border-radius: 50%;
	transform: rotate(45deg);
	background: linear-gradient(to left,
			transparent,
			var(--efeitoDodge) 50%,
			transparent 100%);
	animation: mkEsquerdaParaDireita 10s infinite linear;
	mix-blend-mode: color-dodge;
}

@keyframes mkEsquerdaParaDireita {
	90% {
		left: -100%;
	}

	100% {
		left: 200%;
	}
}

/* =======================
	MK Effect: DIFFERENCE
=========================*/

.mkEfeitoDifference {
	position: relative;
	overflow: hidden;
}

.mkEfeitoDifference:before {
	content: "";
	position: absolute;
	left: -50%;
	top: -66%;
	width: 25%;
	height: 250%;
	border-radius: 50%;
	transform: rotate(45deg);
	background: linear-gradient(to left,
			transparent,
			transparent 50%,
			var(--efeitoDifference) 75%,
			transparent 100%);
	animation: mkEsquerdaParaDireita 5s infinite linear;
	mix-blend-mode: difference;
}

/* =======================
	MK Effect: TIMER
=========================*/
.timerOut {
	display: flex;
	width: var(--timerW);
	height: var(--timerW);
	font-size: 0.7rem;
	border: 0px;
	border-radius: 50%;
	background: conic-gradient(var(--timerRestante),
			calc(var(--m) - 0.01turn),
			var(--timerRestante),
			calc(var(--m)),
			var(--timerConsumido),
			calc(var(--m) + 0.01turn),
			var(--timerConsumido));
	margin: auto;
	align-items: center;
	justify-content: center;
	position: relative;
	box-shadow: 0px 0px 1px 1px var(--corSombra);
	text-shadow: 0px 0px 1px #fff;
	overflow: hidden;
}

.timerOut.red {
	--timerRestante: var(--timerEncerrando);
}

/* =======================
	MK Effect: ESCURECE
=========================*/
.mkEscurece {
	filter: brightness(40%);
}

/* =======================
	MK Effect: FLIP
=========================*/

.flipArea {
	width: 100%;
	height: 100%;
	perspective: 1000px;
}

.flipTarget {
	position: relative;
	height: 100%;
	width: 100%;
	transition: all 0.8s;
	transform-style: preserve-3d;
}

.flipFront,
.flipBack {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
}

.flipBack {
	transform: rotateY(180deg);
}

.flipArea.sTrue .flipTarget {
	animation: flipVai 2s forwards;
}

@keyframes flipVai {
	0% {
		transform: rotateY(0deg);
		scale: 1;
	}

	20% {
		scale: 0.6;
		translate: -20% 0px;
	}

	60% {
		translate: 0px 0px;
	}

	75% {
		transform: rotateY(-180deg);
		translate: 0px 0px;
	}

	100% {
		scale: 1;
		transform: rotateY(-180deg);
	}
}

.flipArea.sFalse .flipTarget {
	animation: flipVolta 1.5s forwards;
}

@keyframes flipVolta {
	0% {
		transform: rotateY(-180deg);
		scale: 1;
	}

	20% {
		scale: 0.6;
		translate: 20% 0px;
	}

	60% {
		translate: 0px 0px;
	}

	75% {
		translate: 0px 0px;
		transform: rotateY(0deg);
	}

	100% {
		scale: 1;
		transform: rotateY(0deg);
	}
}

/* =======================
	MK Effect: ESTRELA
=========================*/
.mkTerremoto {
	animation-name: estrela;
	animation-duration: 0.2s;
	animation-iteration-count: 2;
	animation-timing-function: linear;
}

@keyframes estrela {
	0% {
		transform: translate(-1px, 1px);
	}

	20% {
		transform: translate(0px, -1px);
	}

	40% {
		transform: translate(1px, 1px);
	}

	60% {
		transform: translate(-2px, 0px);
	}

	80% {
		transform: translate(2px, 0px);
	}

	100% {
		transform: translate(-1px, 1px);
	}
}

/* =======================
	AREA CONFIRMADOR
=========================*/
.mkConfirmadorBloco {
	position: fixed;
	display: flex;
	flex-wrap: wrap;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-height: 100%;
	min-width: 100%;
	font-size: 2rem;
	border: 0px;
	margin: 0px;
	padding: 0px;
	outline: 0px;
	z-index: var(--mkConfirmadorIndex);
	overflow-x: hidden;
	overflow-y: hidden;
	background: var(--mkEscurecer);
	align-items: center;
}

.mkConfirmadorFora {
	width: 100%;
	height: 100%;
	min-height: 100%;
	min-width: 100%;
}

.mkConfirmadorArea {
	position: fixed;
	width: auto;
	height: auto;
	border: 1px outset var(--tFundoHigh);
	box-shadow: 6px 6px 10px 1px var(--sombraForte);

	border-radius: 5px;
	background: var(--tFundoHigh);
	color: var(--tTextoHigh);
	margin: auto auto;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 2px;
	display: flex;
	flex-direction: column;
	text-align: center;
	animation: mkEfeitoSurgir 0.5s;
	font-size: 1.2rem;
}

.mkConfirmadorTitulo {
	display: flex;
	align-items: center;
	font-size: 1.4rem;
	background-color: var(--tClaroTextoHigh);
	color: var(--tFundoHigh);
	border-radius: 5px;
	width: 100%;
	user-select: none;
	padding: 5px;
	gap: 10px;
}

.mkConfirmadorTitulo svg {
	margin-left: 5px;
}

.mkConfirmadorTitulo span {
	flex: 0 1 100%;
}

.mkConfirmadorArea button {
	margin: 5px auto;
}

@keyframes mkEfeitoSurgir {
	from {
		transform: scale(0) translate(200%, 200%);
	}

	to {
		transform: scale(1) translate(0%, 0%);
	}
}

.mkConfirmadorTexto {
	padding: 10px;
	color: var(--tClaroTexto);
}

.mkConfirmadorBotoes {
	column-gap: 1rem;
}

/* =======================
	UI ESTILO BOTAO
=========================*/
.bBotao {
	color: var(--botaoCor);
	background: var(--botaoFundo);
	background: var(--botaoFundo2);
	box-shadow: 2px 2px 4px 0px var(--botaoCor);
	border-width: 1px;
	border-style: outset;
	border-color: var(--botaoFundo);
	border-radius: 15px;
	padding: 7px 30px;
	background-size: auto 200%;
	transition: 0.2s;
	letter-spacing: 1px;
	user-select: none;
	cursor: pointer;
}

.bBotao:hover {
	transition: 0.3s;
	border-style: inset;
	color: var(--botaoCorHover);
	background: var(--botaoFHover);
	background-size: auto 200%;
	animation: mkMoveFundoY 0.3s reverse forwards;
	animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
	box-shadow: 1px 1px 4px 1px var(--botaoCor);
	transform: translate(1px, 1px);
}

.bVerde {
	--bVerdeCor: var(--tonalidadeVerde);
	--botaoFundo: var(--bVerdeCor);
	--botaoFundo2: linear-gradient(0deg,
			var(--bVerdeCor) 0%,
			var(--bVerdeCor) 10%,
			#fff 70%,
			#fff 100%);
	--botaoFHover: linear-gradient(0deg,
			var(--bVerdeCor) 0%,
			var(--bVerdeCor) 10%,
			#fff 70%,
			#fff 100%);
	--botaoCorHover: var(--tonalidadeBranco);
	--botaoCor: var(--tonalidadePreto);
}

.bVermelho {
	--bVermelhoCor: var(--tonalidadeVermelho);
	--botaoFundo: var(--bVermelhoCor);
	--botaoFundo2: linear-gradient(0deg,
			var(--bVermelhoCor) 0%,
			var(--bVermelhoCor) 10%,
			#fff 70%,
			#fff 100%);
	--botaoFHover: linear-gradient(0deg,
			var(--bVermelhoCor) 0%,
			var(--bVermelhoCor) 10%,
			#fff 70%,
			#fff 100%);
	--botaoCorHover: var(--tonalidadeBranco);
	--botaoCor: var(--tonalidadePreto);
}

.bCinza {
	--bCinzaCor: var(--tonalidadeCinza);
	--botaoFundo: var(--bCinzaCor);
	--botaoFundo2: linear-gradient(0deg,
			var(--bCinzaCor) 0%,
			var(--bCinzaCor) 10%,
			#fff 70%,
			#fff 100%);
	--botaoFHover: linear-gradient(0deg,
			var(--bCinzaCor) 0%,
			var(--bCinzaCor) 10%,
			#fff 70%,
			#fff 100%);
	--botaoCorHover: #fff;
	--botaoCor: #000;
}

.bAzul {
	--bAzulCor: var(--tonalidadeAzul);
	--botaoFundo: var(--bAzulCor);
	--botaoFundo2: linear-gradient(0deg,
			var(--bAzulCor) 0%,
			var(--bAzulCor) 10%,
			#fff 70%,
			#fff 100%);
	--botaoFHover: linear-gradient(0deg,
			var(--bAzulCor) 0%,
			var(--bAzulCor) 10%,
			#fff 70%,
			#fff 100%);
	--botaoCorHover: var(--tonalidadeBranco);
	--botaoCor: var(--tonalidadePreto);
}

.bLaranja {
	--bLaranjaCor: var(--tonalidadeLaranja);
	--botaoFundo: var(--bLaranjaCor);
	--botaoFundo2: linear-gradient(0deg,
			var(--bLaranjaCor) 0%,
			var(--bLaranjaCor) 10%,
			#fff 70%,
			#fff 100%);
	--botaoFHover: linear-gradient(0deg,
			var(--bLaranjaCor) 0%,
			var(--bLaranjaCor) 10%,
			#fff 70%,
			#fff 100%);
	--botaoCorHover: var(--tonalidadeBranco);
	--botaoCor: var(--tonalidadePreto);
}

.bAzulCeu {
	--bAzulCeuCor: var(--tonalidadeAzulCeu);
	--botaoFundo: var(--bAzulCeuCor);
	--botaoFundo2: linear-gradient(0deg,
			var(--bAzulCeuCor) 0%,
			var(--bAzulCeuCor) 10%,
			#fff 70%,
			#fff 100%);
	--botaoFHover: linear-gradient(0deg,
			var(--bAzulCeuCor) 0%,
			var(--bAzulCeuCor) 10%,
			#fff 70%,
			#fff 100%);
	--botaoCorHover: var(--tonalidadeBranco);
	--botaoCor: var(--tonalidadePreto);
}

.bRosa {
	--bRosaCor: var(--tonalidadeRosa);
	--botaoFundo: var(--bRosaCor);
	--botaoFundo2: linear-gradient(0deg,
			var(--bRosaCor) 0%,
			var(--bRosaCor) 10%,
			#fff 70%,
			#fff 100%);
	--botaoFHover: linear-gradient(0deg,
			var(--bRosaCor) 0%,
			var(--bRosaCor) 10%,
			#fff 70%,
			#fff 100%);
	--botaoCorHover: var(--tonalidadeBranco);
	--botaoCor: var(--tonalidadePreto);
}

.bRoxo {
	--bRoxoCor: var(--tonalidadeRoxo);
	--botaoFundo: var(--bRoxoCor);
	--botaoFundo2: linear-gradient(0deg,
			var(--bRoxoCor) 0%,
			var(--bRoxoCor) 10%,
			#fff 70%,
			#fff 100%);
	--botaoFHover: linear-gradient(0deg,
			var(--bRoxoCor) 0%,
			var(--bRoxoCor) 10%,
			#fff 70%,
			#fff 100%);
	--botaoCorHover: var(--tonalidadeBranco);
	--botaoCor: var(--tonalidadePreto);
}


/* =======================
	AREA MODAL
=========================*/
.mkModalBloco {
	position: fixed;
	display: flex;
	flex-wrap: wrap;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-height: 100%;
	min-width: 100%;
	font-size: 2rem;
	outline: 0;
	z-index: 1060;
	overflow-x: hidden;
	overflow-y: auto;
	background: var(--modalEscurecer);
}

.mkModalConteudo {
	width: calc(100% - 5rem);
	height: calc(100vh - 5rem);
	border: 1px outset var(--tFundoHigh);
	box-shadow: -1px -1px 0px 0px var(--tFundo);
	border-radius: 5px;
	background: var(--tFundoHigh);
	margin: auto auto;
	overflow-x: hidden;
	overflow-y: auto;
	font-size: 1rem;
	padding: 1px 2px 0px 1px;
	display: flex;
	flex-direction: column;
}

.mkModalTitulo {
	border-radius: 10px;
	margin-right: 2px;
	border: 1px solid var(--tFundo);
	background: transparent;
}

/* =======================
	Barra de FASES
=========================*/
ul.mkUlFase {
	display: flex;
	flex-direction: row;
	width: 100%;
	margin: auto;
	user-select: none;
	list-style: none;
	padding: 15px 0px 0px 0px;
	font-size: 1rem;
	font-weight: normal;
	background: var(--MkFaseCorFundo);
	background: linear-gradient(0deg, transparent 0%, var(--MkFaseCorFundo) 50%);
	border-radius: 5px;
}

ul.mkUlFase li {
	background: transparent;
	flex: 1 0 0%;
	text-align: center;
}

ul.mkUlFase li div {
	width: 100%;
	padding: 2px;
}

/*ICONE*/
ul.mkUlFase li .mkFaseIco {
	margin: 0px 0px -11px 0px;
}

ul.mkUlFase li .mkFaseIco i {
	position: relative;
	top: -16px;
	border-radius: 50%;
	padding: 5px 8px;
	background: var(--MkFaseCorFundoIco);
	box-shadow: 1px 1px 1px var(--MkFaseCorTextoDisabled);
	outline: 1px solid var(--MkFaseCorFundoIcoAtivo);
	outline-offset: -2px;
	transition: 0.5s ease-in;
}

ul.mkUlFase li.mkFaseAtivo .mkFaseIco i {
	outline: 1px solid var(--MkFaseCorTextoAtivo);
}

ul.mkUlFase li:not(.mkFaseBack):not(.mkFaseAtivo) .mkFaseIco i {
	border: 1px outset var(--MkFaseCorFundoIcoBack);
}

/*COR*/
ul.mkUlFase li a {
	color: var(--MkFaseCorTexto);
}

ul.mkUlFase li a:hover * {
	color: var(--MkFaseCorTextoAtivo);
	cursor: pointer;
}

ul.mkUlFase li a:hover .mkFaseIco {
	animation: mkEfeitoFase 1000ms ease-in-out infinite alternate;
}

ul.mkUlFase li.disabled a {
	color: var(--MkFaseCorTextoDisabled);
}

ul.mkUlFase li.mkFaseBack a {
	color: var(--MkFaseCorTextoBack);
}

ul.mkUlFase li.mkFaseAtivo a {
	color: var(--MkFaseCorTextoAtivo);
}

ul.mkUlFase li.mkFaseBack .mkFaseIco i {
	color: var(--MkFaseCorTextoIcoBack);
	background: var(--MkFaseCorFundoIcoBack);
	text-shadow: 1px 1px var(--MkFaseCorTexto);
}

ul.mkUlFase li.mkFaseAtivo .mkFaseIco i {
	color: var(--MkFaseCorTextoIcoAtivo);
	background: var(--MkFaseCorFundoIcoAtivo);
	text-shadow: 1px 1px var(--MkFaseCorTextoIcoBack);
}

/*EFEITO*/
ul.mkUlFase li .mkFaseEfeito {
	padding: 2px 0px 0px 0px;
}

ul.mkUlFase li .mkFaseEfeito:nth-child(odd) {
	background: var(--MkFaseCorEfeitoPassivo);
}

ul.mkUlFase li.mkFaseBack .mkFaseEfeito {
	background: var(--MkFaseCorTexto);
}

ul.mkUlFase li.mkFaseAtivo .mkFaseEfeito {
	background: linear-gradient(90deg,
			var(--MkFaseCorTexto) 20%,
			var(--MkFaseCorEfeitoPassivo) 70%);
}

ul.mkUlFase li.mkFaseAtivo .mkFaseEfeito:nth-child(even) {
	background: linear-gradient(90deg,
			var(--MkFaseCorTexto) 20%,
			transparent 70%);
}

/* LABEL */
ul.mkUlFase li label {
	display: block;
	position: relative;
	transition: 0.5s;
}

ul.mkUlFase li label::before {
	content: "";
	position: absolute;
	background: var(--MkFaseCorEfeitoTexto);
	left: 10%;
	width: 80%;
	height: 1px;
	top: 100%;
	transition: transform 0.3s linear;
	transform: scaleX(0);
	transform-origin: right;
}

ul.mkUlFase li:hover label::before {
	transform: scaleX(1);
	transform-origin: left;
}

/* OUTROS */
ul.mkUlFase a {
	text-decoration: none;
}

ul.mkUlFase li.disabled a {
	pointer-events: none;
	cursor: default;
}

@keyframes mkEfeitoFase {
	100% {
		filter: drop-shadow(0px 0px 2px var(--MkFaseCorTextoAtivo));
	}
}

/* .:ESTRATEGIAS MK CSS:.
	MICRO FLEX POSICOES
1 2 3
4 5 6
7 8 9 */
.microPos1 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: flex-start;
}

.microPos2 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-content: flex-start;
}

.microPos3 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-content: flex-start;
}

.microPos4 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: center;
}

.microPos5 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	justify-items: center;
	align-items: center;
}

.microPos6 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-content: center;
}

.microPos7 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-content: flex-end;
}

.microPos8 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-content: flex-end;
}

.microPos9 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-content: flex-end;
}


/* .:ESTRATEGIAS MK CSS:. */
/* CARD RESPONSIVO MINMAX */
.gridCard {
	display: grid !important;
	gap: 5px;
	padding: 5px 0px 1px 5px;
	grid-template-columns: repeat(auto-fill, minmax(var(--min-grid-card), var(--max-grid-card)));
}

.gridCard.auto {
	grid-template-columns: auto;
}

.gridCard>.divCard {
	background-color: var(--tClaroFundoForte);
	border-radius: 10px;
	padding: 6px;
	box-shadow: 1px 5px 10px var(--tClaroTextoHigh);
	overflow: hidden;
}

.divCard {
	display: flex;
	flex-direction: column;
	gap: var(--cardGap);
	width: 100%;
	max-width: 100%;
}

.divTitulo {
	display: flex;
	height: min-content;
	padding-top: 4px;
	margin: -2px 0px 12px 0px;
	outline: 12px solid var(--corNeutra);
	background-color: var(--corNeutra);
	font-weight: 700;
	align-items: center;
	justify-content: center;
}

/* GRID ENCAIXADO */
.macroGrid {
	--minGridMacro: 300px;
	--maxGridMacro: 1fr;
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(var(--minGridMacro), var(--maxGridMacro)));
}

.colspan-2 {
	grid-column: span 2;
}

.colspan-3 {
	grid-column: span 3;
}

.rowspan-2 {
	grid-row: span 2;
}

.rowspan-3 {
	grid-row: span 3;
}


/* ABSOLUTE */
.absPos1 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	position: absolute;
	top: 0;
	left: 0;
	justify-content: flex-start;
	align-content: flex-start;
}

.absPos2 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	position: absolute;
	top: 0;
	left: 50%;
	justify-content: center;
	align-content: flex-start;
}

.absPos3 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	position: absolute;
	top: 0;
	right: 0;
	justify-content: flex-end;
	align-content: flex-start;
}

.absPos4 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	position: absolute;
	bottom: 50%;
	left: 0;
	justify-content: flex-start;
	align-content: center;
}

.absPos5 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	position: absolute;
	bottom: 50%;
	left: 50%;
	justify-content: center;
	align-content: center;
}

.absPos6 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	position: absolute;
	bottom: 50%;
	right: 0;
	justify-content: flex-end;
	align-content: center;
}

.absPos7 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	position: absolute;
	bottom: 0;
	left: 0;
	justify-content: flex-start;
	align-content: flex-end;
}

.absPos8 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	position: absolute;
	bottom: 0;
	left: 50%;
	justify-content: center;
	align-content: flex-end;
}

.absPos9 {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	position: absolute;
	bottom: 0;
	right: 0;
	justify-content: flex-end;
	align-content: flex-end;
}

/* ESTRATEGIAS DE DIMENCIONAMENTO */
.semGap {
	display: flex;
	grid-column-gap: 0px;
	gap: 0px;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	margin: 0px 0px 0px 0px;
}

.espacoEntre {
	align-content: space-between;
	justify-content: space-between;
}

.comGap {
	display: flex;
	grid-column-gap: 10px;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	margin: 0px 0px 0px 0px;
}

/* usa em campok- */
.mkEfeitoSobe {
	position: relative;
}

.mkEfeitoSobe::before {
	content: "\2191";
	font-size: 1rem;
	position: absolute;
	right: 0;
	top: -1px;
	height: 100%;
	animation: mkSortY 3s infinite reverse cubic-bezier(0.4, -0.4, 0, 1);
}

/*
.mkEfeitoSobe::after {
	content: "";
	display: flex;
	position: absolute;
	top: 0px;
	right: 0px;
	width: 100%;
	height: 100%;
	background: linear-gradient(0turn,
			transparent,
			transparent,
			transparent,
			transparent,
			transparent,
			transparent,
			var(--efeitoSobe),
			transparent,
			transparent,
			transparent,
			transparent,
			transparent,
			transparent);
	border-radius: 2px;
	background-size: auto 400%;
	animation: mkMoveFundoY 3s infinite reverse;
	animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
	mix-blend-mode: color-dodge;
}
*/
.mkEfeitoDesce {
	position: relative;
}

.mkEfeitoDesce::before {
	content: "\2193";
	font-size: 1rem;
	position: absolute;
	top: -1px;
	height: 100%;
	right: 0;
	animation: mkSortY 3s infinite cubic-bezier(1, 0, 0.4, 1.4);
}

@keyframes mkSortY {
	0% {
		opacity: 0;
		transform: translateY(0%);
	}

	20% {
		opacity: 1;
		transform: translateY(0%);
	}

	80% {
		opacity: 1;
		transform: translateY(50%);
	}

	100% {
		opacity: 0;
		transform: translateY(50%);
	}
}

/*
.mkEfeitoDesce::after {
	content: "";
	display: flex;
	position: absolute;
	top: 0px;
	right: 0px;
	width: 100%;
	height: 100%;
	background: linear-gradient(0turn,
			transparent,
			transparent,
			transparent,
			transparent,
			transparent,
			transparent,
			#00d1c3,
			transparent,
			transparent,
			transparent,
			transparent,
			transparent,
			transparent);
	border-radius: 2px;
	background-size: auto 400%;
	animation: mkMoveFundoY 3s infinite;
	animation-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
	mix-blend-mode: color-dodge;
}
*/
@keyframes mkMoveFundoY {
	0% {
		background-position-y: 100%;
	}

	100% {
		background-position-y: 0%;
	}
}

/* EFEITO CLIP */
.mkEfeitoClip {
	clip-path: url(#mkClip);
}

/* LISTAGEM */
.divListagem {
	overflow: auto;
	border-radius: 10px;
	margin: 3px;
}

.tableListagem {
	width: 100%;
	border-collapse: collapse;
}

.tableListagem thead {
	position: sticky;
	top: -1px;
	user-select: none;
}

.tableListagem th {
	text-align: center;
}

.divListagemMaisItens {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 40px;
	cursor: pointer;
	user-select: none;
}

.tableResultado {
	display: flex;
}

.tableInicioFim {
	display: flex;
}


/* =======================
	HEAD MENU
=========================*/
.mkhmHeadIco {
	position: absolute;
	display: none;
	align-items: center;
	top: 0;
	height: 100%;
	right: 10px;
	border: 1px outset #fff6;
	color: var(--corLink);
	background-color: var(--bordaMaster);

	border-radius: 5px;
	padding: 1px;
	cursor: pointer;
}

.mkhmHeadIco svg {
	transform: scale(0.8);
}

thead th:hover .mkhmHeadIco,
thead td:hover .mkhmHeadIco {
	display: flex;
}

.mkHeadMenu {
	display: flex;
	position: fixed;
	z-index: 4999;
	bottom: 5px;
	left: 5px;
}

.mkHeadMenu .hmin {
	display: flex;
	flex-direction: column;
	background-color: white;
	border: 1px outset #0005;
	border-radius: 5px;
	box-shadow: -1px 2px 5px #0004;
	padding: 0px;
}

.mkHeadMenu .hmin .htit {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin: auto;
	text-align: center;
	background-color: #ccc;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}

.mkHeadMenu .hmin .htit div:nth-child(1) {
	padding: 1px;
}

.mkHeadMenu .htit .fechar {
	border: 1px outset #0003;
	border-radius: 4px;
}

.mkHeadMenu .botao {
	cursor: pointer;
}

.mkHeadMenu .nosel {
	user-select: none;
}

.mkHeadMenu ul {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
}

.mkHeadMenu li {
	padding: 2px;
	line-height: normal;
}

.mkHeadMenu li svg {
	margin-bottom: 1px;
}

.mkHeadMenu .fimsecao {
	border-bottom: 2px inset #0003;
}

.mkHeadMenu input {
	background-color: transparent;
	padding: 2px;
}

.mkHeadMenu li:has(input) {
	padding: 7px;
}

.mkHeadMenu li .possibilidades {
	max-height: 200px;
	height: 200px;
	max-height: 200px;
	overflow: auto;
}

.mkHeadMenu li.limpar,
.mkHeadMenu .possibilidades li {
	display: flex;
	position: relative;
}

.mkHeadMenu .possibilidades li.sel::before {
	content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><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-.708'/></svg>");
	display: flex;
	position: absolute;
	pointer-events: none;
}

.mkHeadMenu .claico svg path:first-child {
	fill: #007;
}

.mkHeadMenu li.limpar svg {
	color: transparent;
	stroke: #000A;
	fill: #F002;
	transform: scale(0.8);
}


/* =======================
	Paginação Padrao
=========================*/
.pagBotoes {
	display: flex;
	flex-direction: row;
	user-select: none;
	justify-content: center;
}

.pagBotao {
	cursor: pointer;
}

.pagBotao.disabled {
	filter: grayscale(1);
	pointer-events: none;
}

.pagBotoes .pagBotao {
	padding: 0.2rem 0.8rem;
	border: 1px solid var(--bordaMaster);
	background-color: var(--fundoLink);
	color: var(--corLink);
}

.pagBotoes .ativo {
	background-color: var(--fundoHead);
	color: var(--corHead);
}

.pagBotoes .pagBotao:hover {
	background-color: var(--fundoHead);
	color: var(--corHead);
}

.pagBotao.pag0 {
	border-bottom-left-radius: 20px;
	border-top-left-radius: 0px;
}

.pagBotao.pag8 {
	border-bottom-right-radius: 20px;
	border-top-right-radius: 0px;
}

/* Listagem: Paginacao */
.pagination {
	display: flex;
	flex-direction: row;
	user-select: none;
}

.paginate_button {
	cursor: pointer;
}

.paginate_button.disabled {
	filter: grayscale(1);
}

.page-link {
	padding: 0.5rem 0.8rem;
	line-height: normal;
}

/*Layout*/
.i {
	display: flex;
	flex-direction: row;
	/* max aqui impede que a linha gere overflow */
	max-width: 100%;
	width: 100%;
}

.j {
	flex: 1 0 0%;
}

.iSemGap {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	margin: 0px 0px 0px 0px;
}

.iComGap {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	margin: 0px 0px 0px 0px;
	gap: 10px;
}

@media (max-width: 770px) {
	.i {
		flex-direction: column;
	}

	.iSemGap {
		flex-direction: column;
	}

	.iComGap {
		flex-direction: column;
	}
}

@media (min-width: 768px) {
	.col7 {
		flex: 1 0 7% !important;
	}

	.col10 {
		flex: 1 0 10% !important;
	}

	.col15 {
		flex: 1 0 15% !important;
	}

	.col20 {
		flex: 1 0 20% !important;
	}

	.col25 {
		flex: 1 1 25% !important;
	}

	.col30 {
		flex: 1 0 30% !important;
	}

	.col33 {
		flex: 1 0 33.33% !important;
	}

	.col37 {
		flex: 1 0 37.5% !important;
	}

	.col40 {
		flex: 1 0 40% !important;
	}

	.col50 {
		flex: 1 0 50% !important;
	}

	.col60 {
		flex: 1 0 60% !important;
	}

	.col66 {
		flex: 1 0 66.66% !important;
	}

	.col70 {
		flex: 1 0 70% !important;
	}

	.col75 {
		flex: 1 0 75% !important;
	}

	.col80 {
		flex: 1 0 80% !important;
	}

	.col90 {
		flex: 1 0 90% !important;
	}

	.col100 {
		flex: 1 0 100% !important;
	}

}

*.fsb {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: space-between !important;
	align-content: space-between !important;
}

*.fse {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: space-evenly !important;
	align-content: space-evenly !important;
}

*.fse.gap {
	padding: 10px;
	gap: 10px;
}

*.tb,
*.ftb {
	display: flex !important;
	flex-direction: column !important;
}

*.lr,
*.flr {
	display: flex !important;
	flex-direction: row !important;
}

.mkCem {
	width: 100%;
	height: 100%;
}

/*Desativar via CSS*/
.disabled {
	pointer-events: none;
}

.bordaDupla {
	border: 3px double var(--bordaMaster);
	border-radius: 5px;
}

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

.pad5 {
	padding: 5px;
}

.relative {
	position: relative;
}

.absolute {
	position: absolute;
}

.pointer {
	cursor: pointer;
}

/* NAO FUNCIONA EM CONJUNTO AOS microPos */
.corte {
	width: 100% !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis;
}

/* MKBot */
.mkBot {
	position: relative;
	padding: 0;
}

.mkBot .mkBotSobre {
	position: absolute;
	background-color: transparent;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

.mkBot * {
	user-select: none;
	border-radius: inherit;
}

/* MK REGRAR */
.input-validation-error {
	border: 1px solid red;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	display: flex;
}

.valid {
	border: 2px solid #090;
}

.mkRegrar {
	display: flex;
}

.mkRegrar.field-validation-error {
	display: flex;
	color: black;
	background-color: #fcc;
	border: 1px solid red;
	margin-top: -2px;
	border-radius: 5px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	padding: 1px;
	overflow: hidden;
	font-size: 0.7rem;
}

/* Recomendador */
.mkRecList {
	display: flex;
	flex-direction: column;
	position: fixed;
	padding: 5px;
	border-radius: 5px;
	background: var(--FundoItensBgEC);
	max-height: 300px;
	overflow: auto;
	z-index: calc(var(--mkSelIndex));
}

.mkRecList .recItem {
	padding: 5px;
	border-bottom: 1px solid var(--BordaItens);
}

.mkRecList.emFoco {
	display: none;
}

/* Blink em no geral e no seletor */
.regraBlink {
	outline: 2px dotted #F009 !important;
}

.mkSelBloco:has(.regraBlink) {
	outline: 2px dotted #F009 !important;
}

/* Corretores */
svg {
	vertical-align: middle;
}

/*Corretor*/
.mkHeadMenu li svg {
	margin-bottom: 1px;
}

.overFlowHidden {
	overflow: hidden;
}

.overFlowXHidden {
	overflow-x: hidden;
}

.overFlowYHidden {
	overflow-y: hidden;
}

.grid {
	display: grid;
}

.flex {
	display: flex;
}

fieldset {
	display: flex;
}

.mkReflexo {
	-webkit-box-reflect: below -10px linear-gradient(0deg, #FFF9, #FFF5, #FFF1, transparent, transparent);
}

/* ::part(flag) {
	height: 15.40px;
	width: 22px;
	aspect-ratio: 10 / 7;
} */

/* DIALOG */
dialog {
	/* Inicial Size Mobile S8+ */
	opacity: 0;
	min-width: 100px;
	width: 360px;
	padding: 0px;
	border: 2px double transparent;
	border-radius: 6px;
	overflow-y: auto;
	overflow-x: hidden;
	opacity: 0;
	height: fit-content;
}

dialog::backdrop {
	background-color: #0008;
}

dialog:focus-visible {
	outline: 0px;
}

dialog[open] {
	opacity: 0;
	transition: all 0.3s;
}

dialog[open].visivel {
	opacity: 1;
}

dialog[open] .fixedTopRight {
	opacity: 0;
}

dialog[open].visivel .fixedTopRight {
	opacity: 1;
}

.fixedTopRight {
	position: fixed;
	right: 0px;
	top: 0px;
	font-size: 1.5rem;
	border: 0px solid transparent;
}

/* SELETOR */
mk-sel:not(:defined) {
	opacity: 0;
	display: inline-block;
	width: 211px;
	height: 28px;
}

/* mk-sel.input-validation-error::part(arrowAbreFecha) {
	fill: red;
} */

/* mk-sel.valid::part(arrowAbreFecha) {
	fill: #090;
} */

ul.mkSelOutDisplay {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	margin: 2px 0px;
	padding: 0px;
	font-size: 0.8rem;
}

ul.mkSelOutDisplay li {
	border: 1px solid #0005;
	border: 1px solid var(--bordaMaster);
	border-radius: 3px;
	padding: 0px 2px;
	margin: 0px;
	line-height: normal;
}

/* BOTAOVALUE */
mk-bot:not(:defined) {
	opacity: 0;
	display: inline-block;
	width: 211px;
	height: 28px;
}

mk-bot.changed {
	outline: 2px solid #4499;
}