@import url("https://fonts.googleapis.com/css2?family=Comic+Neue:wght@300;400;700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");

* {
	transition-duration: 500ms;
	font-family: "Source Sans 3", sans-serif;
}

legend {
	font-family: "Montserrat", sans-serif;
}

:root {
	--primary: #008bcc;
	--primary-stroke: #3866a1;
	--primary-hover: #016ea1;
	--primary-opacity: #008bc099;
	--btn-primary-color: #183350;
	--blue-dark-opacity: #0d315566;
}

.w-100 {
	width: 100%;
}

.bold {
	font-weight: bold;
}

.titulo_caixa {
	font-size: 11px;
	color: white;
	background-color: #173250;
	text-align: center;
	text-transform: uppercase;
	padding: 2px;
	border: 1px solid black;
}

.cad_title {
	padding: 10px 20px 20px 30px;
	color: #11263b;
	left: -5px;
	top: 10px;
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	display: flex;
	align-items: center;
	text-transform: uppercase;
	margin: 0;
}

@media screen and (min-width: 600px) {
	.cad_title {
		font-size: 30px;
	}
}

@media screen and (min-width: 1200px) {
	.cad_title {
		font-size: 36px;
		line-height: 44px;
		padding-bottom: 25px;
	}
}

.cad_title.cad_title_small {
	font-size: 20px;
	line-height: 26px;
	padding: 10px 0px 20px 10px;
}

.cad_area,
.filter_area {
	background-color: #f4f7f8;
}

.bg-transparent {
	background-color: transparent !important;
}

.cad_area {
	border-top: none;
	padding-top: 0;
}

.filter_area {
	border-bottom: none;
}

.filter_area fieldset {
	padding: 20px;
	border-radius: 10px;
}

.filter_area label {
	display: block;
}

.filter_area select,
input[type="text"] {
	width: 100%;
	background-color: white;
}

input[type="date"] {
	background-color: white;
}

input:disabled, select:disabled {
	background-color: #dddddd;
	border: 1px solid #aaaaaa;
}

.cad_area fieldset {
	background-color: white;
	border: none;
	position: relative;
	padding: 60px 30px 30px 30px;
	border-radius: 10px;
}

.cad_area fieldset.pt-30 {
	padding-top: 30px;
}

.cad_area fieldset.pt-20 {
	padding-top: 20px;
}

.cad_area fieldset legend {
	padding: 10px 40px;
	background-color: #1c6e9d;
	color: white;
	position: absolute;
	left: -5px;
	top: 10px;
}

.cad_area fieldset legend::after {
	content: "";
	width: 10px;
	height: 39px;
	background-image: url("/images/flag.png");
	background-position: 100% center;
	background-size: 150% 100%;
	background-repeat: no-repeat;
	position: absolute;
	right: -10px;
	top: 0px;
}

.link-aguardandoPagamento,
.cad_area fieldset table tr:not(:first-child) td:nth-child(2) label {
	/* font-size: 12px;
	word-wrap: break-word;
	padding: 5px 5px 0 5px; */
	font-size: 12px;
	word-wrap: break-word;
	padding: 5px 5px 0 5px;
}

.link-aguardandoPagamento {
	padding-top: initial;
}

.card-blue {
	padding: 40px 20px;
	background-color: #dfeeff;
	border-radius: 10px;
}

.card-blue-title {
	margin: 0 0 20px 0;
	font-size: 24px;
	font-weight: Source Sans 3;
}

.card-blue-content > div > span:nth-child(1) {
	font-weight: bold;
	width: 11rem;
	display: inline-block;
	text-align: right;
	margin-right: 20px;
	line-height: 1.75rem;
	font-size: 1rem;
}

.card-blue-content > div > span:nth-child(2) {
	display: inline-block;
	line-height: 1.75rem;
	font-size: 1rem;
}

.card-blue-content > div > span:nth-child(2) a {
	font-size: 1rem;
}

.card-blue-content > div > span:nth-child(2) a {
	word-break: break-word;
}

@media screen and (max-width: 600px) {
	.card-blue-content > div > span:nth-child(1) {
		width: 100%;
		text-align: left;
	}

	.card-blue-content > div > span:nth-child(2) {
		white-space: wrap;
	}

	.card-blue *:last-child {
		margin-left: 0 !important;
	}
}

.title_flag {
	padding: 10px 40px;
	background-color: #1c6e9d;
	color: white;
	display: inline-block;
	position: relative;
	font-size: 1rem;
	font-weight: bold;
	margin: 0;
	margin-left: -40px;
	margin-bottom: 20px;
	font-family: "Montserrat";
}

@media screen and (max-width: 768px) {
	.title_flag.no-padding {
		padding: 10px 20px;
		margin-left: -10px;
	}
}

.title_flag::after {
	content: "";
	width: 10px;
	height: 39px;
	background-image: url("/images/flag.png");
	background-position: 100% center;
	background-size: 150% 100%;
	background-repeat: no-repeat;
	position: absolute;
	right: -10px;
	top: 0px;
}

.cad_area_title {
	color: #11263b;
	font-family: "Source Sans 3", sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 24px;
	line-height: 44px;
	margin: 0 0 20px 0;
	text-transform: uppercase;
}

.filter_area fieldset {
	background-color: white;
	border: none;
}

fieldset.no-background {
	background-color: transparent;
	padding: 0;
}

.filter_area fieldset legend {
	padding: 30px 40px;
	font-size: 24px;
	color: #173250;
}

.filter_area .table-filter {
	transition: height 0.5s ease;
	display: block;
}

.table-filter > tbody,
.table-filter > tbody > tr,
.table-filter > tbody > tr > td {
	display: block;
}

.table-filter input[type="date"] {
	width: 100%;
}

.open-extra-filters {
	background: transparent;
	border: none;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}

.open-extra-filters:focus {
	outline: none;
}

.input-date-range input[type="date"] {
	width: calc(50% - 16px);
	display: inline-block;
}

.input-date-range span {
	display: inline-block;
	width: 26px;
	text-align: center;
}

#filtros {
	width: 100%;
}

.field_caption {
	font-size: 12px;
	color: #173250;
}

.common {
	font-size: 12px;
	color: #173250;
}

.aviso {
	font-size: 12px;
	font-weight: bold;
	color: red;
	text-align: center;
}

.aviso_light {
	font-size: 10px;
	color: #173250;
}

.titulo {
	font-size: 20px;
	color: #173250;
	font-weight: bold;
}

.subtitulo {
	font-size: 16px;
	color: #173250;
	font-weight: bold;
}

.menu_option {
	font-size: 12px;
	color: #000000;
	background-color: #d5ddff;
	border: 1px solid black;
	cursor: pointer;
	text-align: left;
	font-weight: bold;
	height: 28px;
	padding: 5px;
}

.group_label {
	font-size: 16px;
	color: #173250;
	font-weight: bold;
}

a {
	font-size: 12px;
	color: #0000bb;
	text-decoration: none;
}

a:hover {
	font-size: 12px;
	color: #2222ff;
	text-decoration: underline;
}

hr {
	box-sizing: border-box;
	border: 0 none transparent;
	height: 1px;
}

.table {
	border-collapse: collapse;
}

.table tbody {
	box-shadow: 0 0 1px 0 #000000;
}

.table_title {
	font-size: 1rem;
	color: #11263b;
	background-color: white;
	font-weight: 600;
	padding: 1rem 5px;
	text-align: center;
}

.table_title:not(td) {
	display: flex;
	justify-content: center;
	align-items: center;
}

.table_title_light {
	font-size: 11px;
	color: #173250;
	border-bottom: 1px solid #aaaaaa;
	background-color: #eeeeee;
	text-align: left;
	font-weight: none;
	padding: 5px;
}

.table_results {
	font-size: 9px;
	color: #173250;
	background-color: #dddddd;
	height: 14px;
}

.table_item0 {
	font-size: 11px;
	color: #000000;
	border: none;
	background-color: #ffffff;
	text-align: left;
	padding: 5px;
}

.table_item1 {
	font-size: 11px;
	color: #000000;
	border: none;
	background-color: #eeeeee;
	text-align: left;
	padding: 5px;
}

.table_item_chamado_aberto {
	font-size: 11px;
	color: #000000;
	border: none;
	background-color: #fdd;
	text-align: left;
	padding: 5px;
}

.table_item_chamado_concluido {
	font-size: 11px;
	color: #000000;
	border: none;
	background-color: #dfd;
	text-align: left;
	padding: 5px;
}

.table_item_chamado_cancelado {
	font-size: 11px;
	color: #000000;
	border: none;
	background-color: #ddd;
	text-align: left;
	padding: 5px;
}

.table_item_venda_pendente {
	font-size: 11px;
	color: #000000;
	border: none;
	background-color: #00a2e8;
	text-align: left;
	padding: 5px;
}

.table_item_venda_orcamento {
	font-size: 11px;
	color: #000000;
	border: none;
	background-color: #ffffff;
	text-align: left;
	padding: 5px;
}

.table_item_venda_expedicao {
	font-size: 11px;
	color: #000000;
	border: none;
	background-color: #ffffff;
	text-align: left;
	padding: 5px;
}

.table_item_venda_teste {
	font-size: 11px;
	color: #000000;
	border: none;
	background-color: #ffffff;
	text-align: left;
	padding: 5px;
}

.table_item_venda_emfaturamento {
	font-size: 11px;
	color: #000000;
	border: none;
	background-color: #99d9ea;
	text-align: left;
	padding: 5px;
}

.table_item_venda_cancelada {
	font-size: 11px;
	color: #000000;
	border: none;
	background-color: #e00000;
	text-align: left;
	padding: 5px;
}

.table_item_venda_concluida {
	font-size: 11px;
	color: #000000;
	border: none;
	background-color: #b5e61d;
	text-align: left;
	padding: 5px;
}

.table_item_venda_emseparacao {
	font-size: 11px;
	color: #000000;
	border: none;
	background-color: #ffc90e;
	text-align: left;
	padding: 5px;
}

.table_item_sel {
	font-size: 11px;
	color: #000000;
	border: none;
	background-color: #ffff99;
	text-align: left;
	padding: 5px;
}

/* Tela de consulta de contratos */
@media screen and (max-width: 768px) {
	.table-contratos > div > div:not(.not-flex) {
		display: grid;
		grid-template-columns: 50% 50%;
	}

	.table-contratos > div > div > div:not(.table_title) {
		padding: 16px;
		font-size: 14px;
	}
}

@media screen and (min-width: 768px) {
	.table-contratos > div {
		display: grid;
		grid-template-columns: calc(10% - 2px) calc(20% - 2px) calc(10% - 2px) calc(10% - 2px) calc(10% - 2px) calc(10% - 2px) calc(10% - 2px) calc(10% - 2px) 10%;
		gap: 2px;
	}

	.table-contratos > div > div:not(.table_title) {
		padding: 5px;
		font-size: 11px;
	}

	.table-contratos > div:hover > div:not(.table_title) {
		background-color: #ffff99;
		color: #2D3035;
		cursor: pointer;
	}
}
/* Fim da tela de consulta de contratos */

.table-compras > div {
	display: grid;
	grid-template-columns: 50% 50%;
}

.table-compras > div > div:not(.table_title) {
	padding: 16px;
	font-size: 14px;
}

@media screen and (min-width: 768px) {
	.table-compras > div {
		grid-template-columns: calc(5% - 2px) calc(8% - 2px) calc(10% - 2px) calc(10% - 2px) calc(27% - 2px) calc(10% - 2px) calc(15% - 2px) 15%;
		gap: 2px;
	}

	.table-compras > div > div:not(.table_title) {
		padding: 5px;
		font-size: 11px;
	}

	.table-compras > div:hover > div:not(.table_title) {
		background-color: #ffff99;
	}
}

/* Visual tabelas pag. consulta */
.table_header_title{
	font-size: 12px;
	color: #6A6A6A;
	border: none;
	font-weight: bold;
	background-color: #D9D9D9;
	padding: 10px 15px;
	border-radius: 3px;
}

.table_data_line{
	color: #6A6A6A;
	font-size: 12px;
	border: none;
}

.table_data_line a{
	text-decoration: none;
}

.table_data_line a:hover{
	color: #00a2e8; !important;
}

.table_data_line2{
	color: #6A6A6A;
	font-size: 12px;
	border: none;
	background-color: #EEEEEE;
	border-radius: 3px;
}

.table_line_volume{
	background-color: #D9D9D9;
	height: 25px;
	border-radius: 3px;
	padding: 0;
}

.table_line_bar{
	background-color: #EF9191;
	height: 100%;
	border-radius: 3px;
}

/* Consulta de oportunidades */

.table-oportunidades > div {
	display: grid;
	grid-template-columns: 33% 33% 33%;
}

.table-oportunidades > div:hover > div:not(.table_title) {
	background-color: #ffff99;
}

.table-oportunidades p.title-mobile {
	font-size: 12px;
	display: block;
	color: #11263B;
	font-weight: 300;
}

.tables-oportunidades {
	display: grid;
	grid-template-columns: 100%;
	gap: 30px;
}

@media screen and (min-width: 768px) {
	.table-oportunidades > div {
		grid-template-columns: calc(5% - 2px) calc(12% - 2px) calc(5% - 2px) calc(12% - 2px) calc(34% - 2px) calc(5% - 2px) calc(10% - 2px) calc(12% - 2px) 5%;
		gap: 2px;
	}

	.tables-oportunidades {
		display: grid;
		grid-template-columns: 50% 50%;
		gap: 30px;
		align-items: start;
	}
}

/* Consulta Vendas */

.text-danger {
	color: #FF0000;
}

.table-vendas {
	box-shadow: 0px 5px 5px 0px #0000004D;
	margin-bottom: 10px;
}

.table-vendas:hover {
	background-color: #ffff99;
}

.table-vendas p.title-mobile {
	font-size: 12px;
	display: block;
	color: #11263B;
	font-weight: 300;
}

.tables-vendas {
	display: grid;
	grid-template-columns: 100%;
	gap: 30px;
}

@media screen and (min-width: 768px) {
	.table-vendas {
		box-shadow: none;
		margin-bottom: 0;
	}

	.tables-vendas {
		display: grid;
		grid-template-columns: 50% 50%;
		gap: 30px;
		align-items: start;
	}
}

/* Fim da tela de vendas */

.btn_primary {
	background-color: var(--btn-primary-color);
	border-radius: 6px;
	padding: 6px 25px;
	margin: 6px 0;
	font-size: 16px;
	outline: none;
	font-style: normal;
	font-weight: 400;
	cursor: pointer;
	line-height: normal;
	border: none;
	text-align: center;
	color: white;
}

.btn_primary_sm {
	padding: 3px 12px;
	word-break: keep-all;
	font-size: 12px;
}

.btn_primary:disabled {
	background-color: var(--blue-dark-opacity);
}

.btnRelatorioGarantia {
	width: 105px;
}

.selected td {
	background-color: #ffa;
}

.clickChange {
	color: blue;
	cursor: pointer;
}

.eventos-nf {
	float: right;
	margin-left: 10px;
}

.msg-nf {
	font-size: 12px;
	padding: 10px;
}

.hidden {
	display: none;
}

.nf-ok {
	background-color: #00993333;
}

.nf-error {
	background-color: #ffdddd;
}

.alerta-bloqueio {
	padding: 5px;
	background-color: #ffde96;
}

.linha_destaque_hover:hover td {
	background-color: #ffd;
}

.uncheck-icon {
	width: 14px;
	line-height: 14px;
	font-size: 13px;
	height: 14px;
	color: red;
	border: red solid 2px;
	text-align: center;
	border-radius: 50%;
	content: "✖";
}

.check-icon {
	width: 14px;
	line-height: 14px;
	font-size: 13px;
	height: 14px;
	color: white;
	background: green;
	border: green solid 2px;
	text-align: center;
	border-radius: 50%;
	content: "✔";
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="password"],
textarea,
select,
input[type="button"][name="button"],
.ms-choice {
	padding: 7px;
	color: #173250 !important;
	border: 1px solid #173250 !important;
	border-radius: 6px;
	resize: none;
}

input[type="text"],
input[type="number"],
input[type="date"],
.input-size,
input[type="password"] {
	height: 36px;
}

.text-overflow-dynamic-container {
	position: relative;
	max-width: 100%;
	padding: 0 !important;
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
	vertical-align: text-bottom !important;
	width: 100%;
}

.text-overflow-dynamic-ellipsis {
	position: absolute;
	white-space: nowrap;
	overflow-y: visible;
	overflow-x: hidden;
	text-overflow: ellipsis;
	-ms-text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	margin: 0 0 0 0 !important;
	max-width: 100%;
	min-width: 0;
	width: 100%;
	top: 0;
	left: 0;
}

.text-overflow-dynamic-container:after,
.text-overflow-dynamic-ellipsis:after {
	content: "-";
	display: inline;
	visibility: hidden;
	width: 0;
}

.btnConfirmacao {
	cursor: pointer;
	padding: 10px 20px;
	text-transform: uppercase;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	border-radius: 100px;
	font-weight: bold;
	border: none;
	font-size: 14px;
	background-color: #bddc92 !important;
	color: #517e11 !important;
	position: fixed;
	right: 1.5rem;
	bottom: 2rem;
	z-index: 1;
	background-image: url("images/download.svg");
	background-repeat: no-repeat;
	background-position: right 18px center;
	padding-right: 38px !important;
}

@media (min-width: 768px) {
	.btnConfirmacao {
		right: 4rem;
		bottom: 3rem;
	}
}

.btnConfirmacao:hover {
	background-color: #d2e8b3 !important;
}

.btnGeral {
	cursor: pointer;
	padding: 8px 16px;
	text-transform: uppercase;
	border-radius: 10px;
	font-weight: bold;
	border: none;
	font-size: 12px;
	background-color: #5aadd6 !important;
	color: white;
	display: block;
	width: fit-content;
}

.btnGeral:disabled {
	cursor: not-allowed;
	background-color: #98cde8 !important;
	border: none !important;
}

.btnGeral.small {
	padding: 8px 16px;
	font-size: 12px;
}

.btnGeral:hover:not(:disabled) {
	background-color: #408aaf !important;
	color: white;
	text-decoration: none;
	font-size: 12px;
}

.btnGeral.small:hover {
	font-size: 12px;
}

.text-tranform-initial {
	text-transform: initial;
}

.highlight {
	background-color: yellow;
}

/** ÍCONES TODO: Adicionar ícones do cabeçalho **/
@font-face {
	font-family: "icomoon";
	src: url("fonts/icomoon.eot?8vrpub");
	src: url("fonts/icomoon.eot?8vrpub#iefix") format("embedded-opentype"),
		url("fonts/icomoon.ttf?8vrpub") format("truetype"),
		url("fonts/icomoon.woff?8vrpub") format("woff"),
		url("fonts/icomoon.svg?8vrpub#icomoon") format("svg");
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: "icomoon" !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-basicos:before {
	content: "\e900";
}
.icon-basicos-financeiro:before {
	content: "\e901";
}
.icon-chamados:before {
	content: "\e902";
}
.icon-chamados-tcnicos:before {
	content: "\e902";
}
.icon-clientes:before {
	content: "\e903";
}
.icon-comercial:before {
	content: "\e904";
}
.icon-compras:before {
	content: "\e905";
}
.icon-estoque:before {
	content: "\e906";
}
.icon-faq:before {
	content: "\e907";
}
.icon-financeiro:before {
	content: "\e908";
}
.icon-fornecedores:before {
	content: "\e909";
}
.icon-locacoes:before {
	content: "\e90a";
}
.icon-principal:before {
	content: "\e90b";
}
.icon-produto:before {
	content: "\e90c";
}
.icon-rmas:before {
	content: "\e90d";
}
.icon-seguranca:before {
	content: "\e90e";
}
.icon-simulador-painel-do-cliente:before {
	content: "\e90f";
}
.icon-transferencias:before {
	content: "\e910";
}
.icon-whatsapp:before {
	content: "\e911";
}
.icon-warning:before {
	content: "\e912";
}
.icon-phone:before {
	content: "\e913";
}
.icon-globe:before {
	content: "\e914";
}
.icon-eye:before {
	content: "\e9ce";
}
.icon-eye-blocked:before {
	content: "\e9d1";
}

/** ÍCONES **/

.change-list-icon {
	font-size: 16px;
	cursor: pointer;
	margin-left: auto;
}

main {
	width: 95%;
	margin: 6rem auto 8rem auto;
}

@media (min-width: 768px) {
	main {
		width: 90%;
	}
}

.icon-theme{
	filter: brightness(0) invert(0);
}

/** Tela de Login **/
main.centralizado {
	width: 100%;
	min-height: 100vh;
	display: flex;
	align-items: center;
	flex-direction: column;
	transition: none;
}

main.centralizado * {
	transition: none;
}

main > section {
	display: flex;
	align-items: center;
	flex-direction: column;
}

main.login-main {
	background-image: url("/images/microrar-login-office.jpg");
	background-size: cover;
	background-position: right bottom;
	margin: 0;
}

.btn-primary {
	width: 100%;
	border-radius: 4pt;
	background-color: var(--primary);
	color: white;
	border: none;
	outline: none;
	font-size: 14px;
	box-shadow: 0 2px 2px 0 #00000027;
	padding: 12px 14px;
	transition: all none;
	transition: background-color 300ms ease !important;
	cursor: pointer;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	background-color: var(--primary-hover);
}

.warning-alert {
	color: white;
	font-size: 12px;
	display: flex;
	align-items: center;
}

.warning-alert > i {
	font-size: 16px;
	margin-right: 8px;
}

.login-form {
	max-width: 250px;
	width: 100%;
	margin: 16px;
	padding: 24pt;
	border-radius: 10pt;
	background-color: var(--blue-dark-opacity);
}

.login-form .input-group {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-bottom: 8px;
}

.login-form .input-group label {
	font-size: 13px;
	color: white;
	margin-bottom: 4pt;
}

.login-form .input-group input {
	border-radius: 4px;
	padding: 10pt 5pt !important;
	border: white 1px solid !important;
	outline: none;
	width: unset !important;
	height: unset !important;
}

.login-form .input-group input:focus {
	border: var(--primary-stroke) 1px solid !important;
	box-shadow: 0 0 4px 0 white;
}

.login-form .btn-primary {
	width: 100%;
	margin-top: 12px;
	font-weight: bold;
}

.banner {
	width: 100vw;
	background-color: var(--primary);
	box-shadow: 0 0 0 6px var(--primary-opacity);
	margin: 32px 0 48px 0;
	display: flex;
	align-items: center;
	transition: none;
}

.banner > section {
	display: flex;
	width: 100%;
	align-items: center;
	color: white;
	justify-content: space-between;
	padding: 12px 5vw;
	flex-wrap: wrap;
	font-size: 24px;
}

.banner a {
	font-size: 32px;
	text-decoration: none;
	color: white;
}

.banner .main-link {
	font-size: 18px;
	letter-spacing: 12px;
	margin: 12px;
}

.banner .icon-list {
	display: flex;
	flex-wrap: nowrap;
	margin: 12px;
}

@media screen and (max-width: 600px) {
	.banner .main-link {
		font-size: 3vw;
		letter-spacing: 2vw;
	}

	.banner > section {
		justify-content: center;
	}
}
/** Tela de Login **/

body.main-body {
	background-color: #F4F7F8;
}

body {
	margin: 0;
}

.header {
	background: linear-gradient(0deg, #1c6e9d 44.24%, #071a38 100%);
	color: #ffffff;
	padding-top: 1em;
	height: 148px;
	margin-bottom: 5em;
}

.header-items {
	display: grid;
	grid-template-columns: auto 2fr auto;
	align-items: center;
	column-gap: 1em;
	margin: 0 4em 0.5rem 0;
	padding: 0 1rem;
}

.header-image > img {
	width: 100px;
}

.header-title {
	font-size: 20px;
	font-weight: bold;
	text-align: left;
	padding-left: 3em;
	font-family: "Montserrat", sans-serif;
}

@media screen and (max-width: 800px) {
	.header-items {
		display: flex;
		justify-content: space-between;
		margin: 0 8px 0.5rem 8px;
	}

	.header-title {
		display: none;
	}
}

.header-user {
	display: flex;
}
.user-info {
	padding-right: 8px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: end;
}

.user-image > img {
	width: 60px;
}

.user-info > div {
	padding: 4px;
}

.user-info > div > .item {
	display: block;
	font-size: 14px;
}

.user-info > div > .item:not(:first-child) {
	font-weight: bold;
}

.nav {
	border-radius: 6px;
	top: -50%;
	padding: 0 25px;
	background-color: #ffffff;
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
	width: calc(90% - 50px);
	margin: 0 auto;
}

.nav.edit {
	z-index: 2;
	position: sticky;
}

.slick-slider {
	height: fit-content;
	padding: 0 16px;
}

.carousel-item {
	text-align: center;
}

.config-btn {
	background-color: transparent;
	border: none;
	cursor: pointer;
	position: absolute;
	right: -1.5rem;
	top: -0.8rem;
}

.item-menu {
	position: relative;
}

.config {
	position: absolute;
	top: 0;
	right: 1rem;
	z-index: 1;
	width: 2rem;
}

.black-background {
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	position: fixed;
	top: 0;
	z-index: 2;
}

.nav-button {
	background-color: transparent;
	border: none;
	cursor: pointer;
	padding: 16px 8px;
	color: #11263b;
	text-align: center;
	width: 100%;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.item-title {
	margin-top: 4px;
	font-weight: bold;
	font-family: "Montserrat", sans-serif;
	transition-duration: unset !important;
	font-size: 14px;
}

.icon-block {
	display: block;
	margin: 8px 0;
	color: #11263b;
	font-size: 36px;
}
.active,
.nav-button:hover:not(.edit) {
	background-color: #1c6e9d;
	color: #ffffff;
}
.active > .icon-block,
.nav-button:hover:not(.edit) > .icon-block {
	color: #ffffff;
}

.slick-prev,
.slick-next {
	margin: 0 8px;
	width: auto;
	height: auto;
}

.dropdown-container {
	display: none;
	flex-direction: column;
	background-color: #fff;
	width: 16%;
	position: absolute;
	text-align: center;
	z-index: 2;
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
}

.dropdown {
	margin: 0 4em;
	display: flex;
	justify-content: start;
}

.dropdown-container > a {
	all: unset;
	color: #173250;
	padding: 1rem 1rem 1rem 2.5rem;
	word-wrap: break-word;
	font-size: 14px;
	font-family: "Montserrat", sans-serif;
	font-weight: 550;
	text-align: left;
	background-image: url("images/menu/arrow_left.svg");
	background-repeat: no-repeat;
	background-position: left 1.7rem center;
}

.dropdown-container > a:hover {
	padding: 1rem 0.8rem 1rem 2.5rem;
	background-color: rgba(14, 101, 182, 0.2);
	cursor: pointer;
	font-weight: bold;
	background-image: url("images/menu/arrow_bottom.svg");
	background-position: left 1.5rem center;
}

.bg-white {
	background-color: #ffffff !important;
}

.open-filters {
	cursor: pointer;
}

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

.gutter-sm {
	--bs-gutter-x: 0.5rem;
}

.checkbox-group {
	display: flex;
	align-items: center;
}

.w-100 {
	width: 100%;
}

.spaced-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 4px 0;
}

.linha_numeroserie td {
	background-color: #b4ecb6 !important;
}

.slick-slide {
	height: auto !important;
}

.cursor-pointer {
	cursor: pointer;
}

.no-resize {
	resize: none;
}

.rounded-borders, .collapse-card {
	border-radius: 6px;
}

.border-negative {
	border: 2px solid #ffdddd;
}

.bg-negative {
	background-color: #ffdddd;
	color: #173250 !important;
}

.border-success {
	border: 2px solid #DDFFDD;
}

.bg-success {
	background-color: #DDFFDD;
	color: #173250 !important;
}

.border-purple {
	border: 2px solid #DDDDFF;
}

.bg-purple {
	background-color: #DDDDFF;
	color: #173250 !important;
}

.border-secondary {
	border: 2px solid #DDDDDD;
}

.bg-secondary {
	background-color: #DDDDDD;
}

div.bg-secondary {
	color: #173250 !important;
}

.w-auto {
	width: auto !important;
}

@media screen and (max-width: 768px) {
	.table_title-inline {
		font-size: 14px;
		color: #11263b;
		font-weight: 600;
		margin: 0;
	}
}

.table-item-clientes {
	cursor: pointer;
}

@media screen and (min-width: 768px) {
	.table-item-clientes:hover > div{
		background-color: #ffff99;
	}
}

@media screen and (max-width: 768px) {
	.outlookKAC .kacBox {
		max-width: -webkit-fill-available;
	}
}

.fw-bold {
	font-weight: bold;
}

.remove-button-inside-card {
	width: auto;
	padding: 0 1rem;
}

.remove-button-inside-card > a {
	display: block;
	width: 6px;
	padding: 0;
	margin: 0;
}

@media screen and (max-width: 1200px) {
	.remove-button-inside-card {
		display: flex;
		justify-content: end;
		padding: 0.2rem 0.7rem;
		width: 100%;
		text-align: right;
	}
}

.change-theme-button {
	width: 24px;
	height: 24px;
	border: none;
	background-color: transparent;
	border-radius: 50px;
	cursor: pointer;
	padding: 0;
}

.change-theme-button img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* DARK MODE */
body.dark-mode {
	color: #ffffff;
}

body.dark-mode.main-body, 
body.dark-mode #fancybox-content, 
body.dark-mode #fancybox-outer {
	background-color: #22252A;
	border-color: #22252A;
}

body.dark-mode header{
	background: linear-gradient(0deg, #14171B 100%, #1B1E22 100%);
	color: #ffffff;
}

body.dark-mode fieldset form{
	background-color: #2D3035;
	color: #A4A4A4;
	box-shadow: none;
}

body.dark-mode fieldset div {
	color: #A4A4A4;
}

body.dark-mode div a p i b span{
	color: #A4A4A4 !important;
}

body.dark-mode fieldset {
	background-color: #2D3035 !important;
	color: #A4A4A4;
}
body.dark-mode .principal-title{
	color: #A4A4A4 !important;
}
body.dark-mode .principal{
	box-shadow: none;
}

body.dark-mode .nav{
	background-color: #2D3035;
}
body.dark-mode .dropdown-container{
	background-color: #2D3035;
	color: #A4A4A4;
}
body.dark-mode .dropdown-container a{
	background-color: #2D3035;
	color: #A4A4A4;
	background-blend-mode: screen;
}

body.dark-mode .dropdown-container > a:hover {
	background-color: #1C6E9D;
}

body.dark-mode .icon-block {
	display: block;
	margin: 8px 0;
	color: #A4A4A4;
	font-size: 36px;
}

body.dark-mode .icon-theme{
	filter: brightness(0) invert(1);
}

body.dark-mode .item-title {
	color: #A4A4A4;
}
body.dark-mode .cad_area{
	background-color: #22252A;
}

body.dark-mode select, body.dark-mode .ms-drop {
	background-color: #1B1E22;
	color: #A4A4A4 !important;
	border: 1px solid #1B1E22;
}

body.dark-mode .ms-search {
	background-color: #000;
}

body.dark-mode select option {
	background-color: #2D3035;
	color: #A4A4A4;
}

body.dark-mode .open-filters {
	filter: invert();
}

body.dark-mode .kacBox .kacItemBox {
	background-color: #2D3035;
}

body.dark-mode tr > td.bg-white {
	background-color: #2D3035 !important;
}

body.dark-mode .kacBox .kacIn {
	background-color: #2D3035;
	color: #A4A4A4;
}

body.dark-mode .kacBox .kacIn:hover {
	background-color: #17181a;
	color: #A4A4A4;
}

body.dark-mode legend {
	color: #A4A4A4;
}
body.dark-mode .cad_title {
	color: #A4A4A4;
}
body.dark-mode .filter_area {
	background-color: #2D3035;
}

/* Estilos para a tabela no modo escuro */
body.dark-mode table {
	width: 100%;
	background-color: #2D3035;
	color: #ffffff;
}

body.dark-mode table thead, 
body.dark-mode table .table_item_venda_expedicao,
body.dark-mode table .table_item_venda_orcamento {
	background-color: #3A3F44;
	color: #ffffff;
}

body.dark-mode table thead th {
	color: #ffffff;
	padding: 10px;
	border: 1px solid #444444;
}

body.dark-mode table tbody tr {
	border-bottom: 1px solid #444444;
}

/* body.dark-mode table tbody tr:hover {
	background-color: #444A50;
} */

body.dark-mode table tbody td {
	padding: 10px;
	cursor: pointer;
}

body.dark-mode .table_title_light, body.dark-mode .table_title{
	background-color: #2D3035;
	color: #ffffff;
}

body.dark-mode .table_item0{
	background-color: #2D3035;
	color: #ffffff;
}

body.dark-mode .table_item1{
	background-color: #444A50;
	color: #ffffff;
}

body.dark-mode .common{
	color: #A4A4A4;
}

/* Visual tabelas pag. consulta */
body.dark-mode .table_header_title{
	font-size: 12px;
	color: #A4A4A4;
	border: none;
	font-weight: bold;
	background-color: #43484F;
	padding: 10px 15px;
	border-radius: 3px;
}

body.dark-mode .table_data_line{
	color: #A4A4A4;
	font-size: 12px;
	border: none;
}

body.dark-mode .table_data_line2{
	color: #A4A4A4;
	font-size: 12px;
	border: none;
	background-color: #444A50;
	border-radius: 3px;
}

body.dark-mode .table_line_volume{
	background-color: #43484F;
	height: 20px;
	border-radius: 3px;
	padding: 0;
	border: none;
}
/* */

body.dark-mode .field_caption input,
body.dark-mode input[type="number"],
body.dark-mode input[type="text"],
body.dark-mode input[type="date"],
body.dark-mode input:not([type]),
body.dark-mode textarea,
body.dark-mode .ms-choice {
	color: #A4A4A4 !important;
	background-color: #1B1E22 !important;
	border: 1px solid #1B1E22 !important;
	color-scheme: dark;
}

body.dark-mode .field_caption{
	color: #A4A4A4 !important;
	/* background-color: #2D3035 !important; */
	border-color: 1px solid #1B1E22 !important;
}

body.dark-mode .field_caption textarea{
	color: #A4A4A4 !important;
	background-color: #1B1E22 !important;
	border: 1px solid #1B1E22 !important;
}

body.dark-mode .table_title_light{
	color: #A4A4A4 !important;
	background-color: #1B1E22 !important;
	border: 1px solid #1B1E22 !important;
}

body.dark-mode a {
	color: #5aadd6 !important;
}

body.dark-mode .btnGeral {
	color: white !important;
}

body.dark-mode .slick-prev, body.dark-mode .slick-next {
	filter: contrast(0.1);
}

body.dark-mode .cad_area_title {
	color: #A4A4A4;
}

body.dark-mode .aviso_light {
	color: #A4A4A4;
}

body.dark-mode .highlight {
	background-color: #9c9c00;
}
@media screen and (min-width: 1140px) {
	.remove-button-inside-card {
		position: absolute;
		width: fit-content;
		right: 2rem;
	}
}