* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-transform: capitalize;
	font-family: "Roboto", sans-serif;
	max-width: 100%;
	align-self: center;
}


/* ==================== presets css ==================== */

js {
	width: auto;
	display: inline;
}

[inline] {
	display: inline;
}

hidden,
.hidden,
[hidden] {
	display: none !important;
}

[branco] {
	color: white;
}

[white] {
	background: white;
}

[azul] {
	color: blue;
}

[blue] {
	background: blue;
}

[lightblue] {
	background: lightblue;
}

[amarelo] {
	color: yellow;
}

[yellow] {
	background: yellow;
}

[vermelho] {
	color: red;
}

[red] {
	background: red;
}

[verde] {
	color: green;
}

[green] {
	background: green;
}

[laranja] {
	color: orange;
}

[laranjavermelho] {
	color: orangered;
}

[orange] {
	background: orange;
}

[cinza] {
	color: gray;
}

[gray] {
	background: gray;
}

[roxo] {
	color: purple;
}

[purple] {
	background: purple;
}

[border] {
	padding: 4px;
	border: 2px solid black;
}

[required]:after {
	content: " *";
	color: red;
}

.load.rgb {
	animation: animation-rgb-roda 5s infinite, roda 1.5s infinite;
}

[noselect],
.copyright {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.d-flex{
	display: flex;
}

button[disabled],
.btn-disabled,
[disabled],
fieldset[disabled] .disabled {
	cursor: not-allowed;
	filter: alpha(opacity=65);
	-webkit-box-shadow: none;
	box-shadow: none;
	opacity: 0.65;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* ============ */

@keyframes bar-loading-animation {
	0% {
		right: 0%;
	}

	50% {
		right: -75%;
	}

	100% {
		right: 0%;
	}
}

[RGB] {
	transition: all 2s ease-out;
	animation: animation-rgb 7s linear infinite;
}

box-bar {
	background: gray;
	width: 75%;
	display: block;
	border-radius: 25px;
	border: 1px solid silver;
}

box-bar bar {
	background: blue;
	width: 25%;
	display: block;
	position: relative;
	right: 0;
	animation: bar-loading-animation 7.5s infinite linear;
	-webkit-animation: bar-loading-animation 7.5s infinite linear;
	border-radius: 25px;
	text-align: center;
	color: white;
	font-weight: bold;
	transition: all 1s ease-out;
}

html {
	background: #201810;
	height: auto;
}

body {
	background-color: whitesmoke;
	background: whitesmoke;
	color: black;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

main {
	display: flex;
	width: 100%;
	min-width: 25%;
}

tela {
	display: flex;
	flex-direction: column;
	text-align: center;
	padding: 15px;
	gap: 15px;
	padding-top: 15px;
	justify-content: center;
	align-items: center;
	width: 75%;
	border-radius: 25px;
	z-index: 2;
	color: white;
	font-size: 18px;
	background-color: #313031;
	border-image: url("../assets/background_painel.png") 8/4px repeat;
	margin-top: 50px;
	margin-bottom: 50px;
}

subtela {
	display: flex;
	width: 100%;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
	align-items: center;
	overflow: hidden;
	border-bottom: 7px solid white;
	font-size: 18px;
	border-image: url("../assets/sub_background_painel.png") 16/8px repeat;
	border-image-outset: 4px;
	background-color: #242324;
	padding: 8px;
	margin-bottom: 15px;
	box-shadow: 0px 0px 3px 0px #201815;
}

div {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

form {
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	overflow: hidden;
	border-bottom: 7px solid white;
	font-size: 18px;
	width: 100%;
}

input {
	vertical-align: baseline;
	font-family: inherit;
	line-height: 1.2;
	background: #8e8e8e;
	box-shadow: inset 0px 4px 1px -2px #000, inset 0px -4px 1px -2px #c5c5c5,
		inset 2px 0px 1px 0px #5f5f5f, inset -2px 0px 1px 0px #5f5f5f,
		inset 0px -2px 2px 0px #5f5f5f, 0px 0px 4px 1px #2e2521;
	margin: 10px auto;
	min-width: 50%;
	width: 70%;
	padding: 10px;
	outline: none;
	font-size: 16px;
	transition: all 0.3s ease-out;
	border-radius: 4px;
	text-align: center;
}

input:focus {
	outline: none;
	background: #f0dab4;
	box-shadow: inset 0px 4px 2px -2px #000000, inset 0px -1px 1px 0px #74624b,
		inset 0px -4px 2px -2px #e0e0e0, inset 2px 0px 2px 0px #a6885c,
		inset -2px 0px 2px 0px #a6885c, 0px 0px 4px 1px #2e2521;
	border-bottom: 3px solid orange;
	font-size: 20px;
}

input:valid {
	color: green;
	border-bottom: 3px solid green;
}

p {
	margin: 10px;
}

ul{
	max-width: 100%;
	width: auto;
}

li {
	line-height: 1.25;
	margin-top: 8px;
	margin-bottom: 8px;
}

.painel {
	background-color: #313031;
	padding: 8px;
	margin-top: 12px;
	margin-bottom: 12px;
	border: 4px solid #2e2623;
	box-shadow: 0px 0px 3px 0px #201815;
}

.loading .roda {
	width: 50px;
	height: 50px;
	border: 6px solid #e5e5e5;
	border-top: 6px solid #51d4db;
	border-radius: 50%;
	animation: ani-roda 1.5s infinite;
}

.button,
.btn {
	background-color: #8e8e8e;
	padding: 10px 12px 10px 12px;
	font-size: 100%;
	text-align: center;
	font-weight: 600;
	display: inline-block;
	vertical-align: baseline;
	min-width: 128px;
	min-height: 52px;
	border: none;
	line-height: inherit;
	white-space: nowrap;
	position: relative;
	margin: 10px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	height: 52px;
	box-shadow: inset 8px 0px 4px -8px black, inset -8px 0px 4px -8px black,
		inset 0px 10px 2px -8px lightblue, inset 0px 10px 2px -8px purple,
		inset 0px -9px 2px -8px black, 0px 0px 4px 0px black;
}

.button-red {
	cursor: not-allowed;
	background-color: #fe5a5a;
}

.button-blue {
	background-color: blue;
	color: white;
}

.button-green {
	background-color: #5eb663;
}

.button-yellow {
	cursor: help;
	background-color: yellow;
}

.button-purple {
	background-color: purple;
	color: white;
}

.button:hover,
.btn:hover,
.button:focus,
.button.hover {
	color: black;
	text-decoration: none;
	outline: 0;
	box-shadow: inset 8px 0px 4px -8px black, inset -8px 0px 4px -8px black,
		inset 0px 9px 2px -8px white, inset 0px 8px 4px -8px black,
		inset 0px -8px 4px -8px black, inset 0px -9px 2px -8px #432400,
		0px 0px 4px 0px black, inset 0px 0px 4px 2px #f9b44b;
	background-color: #e39827;
	filter: drop-shadow(0 0 2px #f9b44b);
}

[disabled] {
	cursor: not-allowed;
}

.msg {
	text-align: center;
	background: white;
	padding: 7px;
	display: none;
	opacity: 70%;
	width: 75%;
	border-radius: 10px;
}

.msg-Error {
	border-bottom: 3px solid red;
	color: red;
}

.msg-Success {
	border-bottom: 3px solid green;
	color: green;
}

/* 
a {
  display: block;
  margin: 10px;
} */

footer {
	display: flex;
	margin-top: 10%;
	width: 100%;
	font-size: 15pt;
	text-align: center;
	padding: 50px;
	border-top: 5px solid white;
	max-width: 100%;
	justify-content: center;
}

label {
	color: orange;
	margin: 10px;
	cursor: help;
	transition: all 0.3s ease-out;
	display: block;
	text-decoration: underline;
	font-size: 18px;
}

select {
	min-width: 50%;
	padding: 5px;
	background-color: #242324;
	color: white;
}

@keyframes animation-rgb {
	0% {
		color: red;
	}

	16% {
		color: orange;
	}

	32% {
		color: yellow;
	}

	48% {
		color: green;
	}

	64% {
		color: lightblue;
	}

	80% {
		color: blue;
	}

	96% {
		color: purple;
	}

	100% {
		color: red;
	}
}

@keyframes ani-roda {
	to {
		transform: rotate(360deg);
	}
}

.mod-toolkit {
	text-transform: lowercase;
}



iframe {
	width: 100%;
	min-height: 420px;
	margin: 10px;
}

a.download {
	display: inline-flex;
	flex-flow: column;
	justify-content: center;
	font-size: 17px;
	vertical-align: baseline;
	padding: 10px 12px 10px 12px;
	min-width: 52px;
	height: 52px;
	text-align: center;
	margin-bottom: 0px;
	margin-right: 0px;
	margin-left: 8px;
}

a.download i {
	font-size: 32px;
	vertical-align: middle;
	font-weight: normal;
	margin-right: 4px;
}

.span6 .language-and-actions-container{
	width: auto;
}