:root
{
	/* CORES */

	--cor-atria-1: 						#55CAEB;
	--cor-primaria: 					#49749f;
	--cor-primaria-active: 		#3a5e81;
	--cor-secundaria: 				#C7CED4;
	--cor-secundaria-active: 	#A9B6BE;
	--cor-sucesso: 						#02BE71;
	--cor-sucesso-active: 		#019E59;
	--cor-alerta:							#FEC200;
	--cor-alerta-active:			#E59F01;
	--cor-erro: 							#FD6B6B;
	--cor-erro-active: 				#FF3938;
	--cor-info: 							#00C3E1;
	--cor-info-active: 				#01B3D7;
	--cor-cinza-clr: 					#EFF3F6;
	--cor-cinza-clr-active: 	#CFDCE2;
	--cor-cinza-esc: 					#252b3a;
	--cor-cinza-esc-active: 	#0F1418;

	--cor-neutra-1: 					#f1EDf7;
	--cor-neutra-2: 					#e9e7f0;
	--cor-neutra-3: 					#E4E8EB;
	--cor-neutra-4: 					#DEDDE5;
	--cor-neutra-5: 					#CAC9D4;
	--cor-neutra-6: 					#B8B7C3;
	--cor-neutra-7: 					#A4A3AE;
	--cor-neutra-8: 					#8f8f9b;
	--cor-neutra-9: 					#555466;
	--cor-neutra-10: 					#252b3a;

	--body-bgc: 					#f9f9f9;

	--btn-bgc: 						var(--cor-neutra-5);
	--btn-hover-bgc: 			var(--cor-primaria);
	--btn-hover-color: 		#FFF;
	--btn-default-bg-gradient: linear-gradient(0deg, #C0C0C0 0%, #F2F2F2 100%);

	--table-bgc: 				#fff;
	--table-tr-hover-bg: #D6E6F3;
	--table-thead-bg: 	#E3E2E0;
	--table-tr-odd-bgc: 	#f5f5f5;

	/* VARS */

	--radius-xs: 				2px;
	--radius-sm: 				5px;
	--radius-md: 				10px;
	--radius-lg: 				20px;
	--radius-xl: 				30px;


	/* LAYOUT */

	--app-min-width: 		1200px;
	--app-min-height: 	600px;
	--header-height: 		50px;
	--footer-height: 		24px;
	/* --aside-bgc: 				var(--cor-neutra-4); */
	--aside-bgc: 				var(--body-bgc);
	--aside-nav-link-bgc: #FFF;
	--aside-searchform-height: 	50px;
	--aside-searchform-radius: 	var(--radius-sm);
	--aside-nav-max-height: 	calc(100vh - var(--aside-searchform-height) - var(--header-height) - var(--footer-height));
	--aside-nav-min-height: 	calc(var(--app-min-height) - var(--aside-searchform-height) - var(--header-height) - var(--footer-height));
}



header,
main,
aside,
section,
footer
{
	/* outline: 1px dashed #ddd; */
}

#index,
#login,
#body
{
	height: 100%;
	min-height: var(--app-min-height);
}

body
{
	background-color: var(--body-bgc);
	color: var(--cor-neutra-10);
	cursor: default;
}

.hide
{
	display: none;
}
.df { display: flex; }
.db { display: block; }
.full-width { width: 100%; }
.flex-wrap { flex-wrap: wrap; }

table
{
	border-collapse: collapse;
}
.table
{
	width: 100%;
	max-width: 100%;
	margin-bottom: 1rem;
	background-color: var(--table-bgc);
	font-size: 12rem;
}
.table-striped tbody tr:nth-of-type(odd)
{
	background-color: var(--table-tr-odd-bgc);
}
.table-bordered
{
	border: 1px solid var(--cor-neutra-5);
}
.table-responsive,
.table-wrap
{
	background-color: var(--table-bgc);
	display: block;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar;
}
.table th
{
	background-color: var(--table-thead-bg);
  color: var(--cor-neutra-9);
  font-size: 12rem;
	font-weight: 500;
	text-align: left;
	padding-left: 5px;
	padding-right: 5px;
}
.table td
{
	padding: 2px 5px 3px;
}
.table tr {
}
.table-hover tbody tr:hover
{
	/* background-color: rgba(0,0,0,.075); */
	background-color: var(--table-tr-hover-bg);
}
.table.nowrap
{
	white-space: nowrap;
}
.table-primary, .table-primary>td, .table-primary>th {
	background-color: #b8daff;
}
.table-success, .table-success>td, .table-success>th {
	background-color: #c3e6cb;
}

.table-danger, .table-danger>td, .table-danger>th {
	background-color: #f5c6cb;
}
.table-warning, .table-warning>td, .table-warning>th {
	background-color: #ffeeba;
}
.table-info, .table-info>td, .table-info>th {
	background-color: #bee5eb;
}

#root
{
	min-width: var(--app-min-width);
	width: 100%;
	height: 100%;
}

#app
{
	display: grid;
	grid-template-areas:
		'header'
		'main'
		'footer';
	min-height: 100%;
	grid-template-rows: var(--header-height) auto var(--footer-height);
}

.animate__delay-100ms
{
	animation-delay: 100ms;
}
.animate__delay-200ms
{
	animation-delay: 200ms;
}
.animate__delay-300ms
{
	animation-delay: 300ms;
}
.animate__delay-400ms
{
	animation-delay: 400ms;
}
.animate__delay-500ms
{
	animation-delay: 500ms;
}

fieldset
{
	--fieldset-bdc: rgba(0,0,0,.1);
	border-width: 1px;
	border-color: var(--fieldset-bdc);
	border-bottom: 0;
	box-shadow: 0 1px 0 0 var(--fieldset-bdc);
	display: block;
	padding: 0 5px 5px 5px;
	margin-right: 5px;
	margin-left: 5px;
}
fieldset.form-group
{
	margin-bottom: 0;
}
fieldset:first-child
{
	margin-left: 0;
}
fieldset legend
{
	padding: 0 5px;
	margin-left: -5px;
}

.container
{
	max-width: var(--app-min-width);
	margin: 0 auto;
}

:root
{
	--grid-cols: 12;
}
.row
{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin-left: -5px;
	margin-right: -5px;
}

.col1, .col2, .col3,
.col4, .col5, .col6,
.col7, .col8, .col9,
.col10, .col11, .col12
{
	flex-grow: 1;
	padding-left: 5px;
	padding-right: 5px;
}
.col1:last-child, .col2:last-child, .col3:last-child,
.col4:last-child, .col5:last-child, .col6:last-child,
.col7:last-child, .col8:last-child, .col9:last-child,
.col10:last-child, .col11:last-child, .col12:last-child
{
	/* padding-right: 0; */
}

.col1  { width: calc(calc(100% / var(--grid-cols)) * 1)  }
.col2  { width: calc(calc(100% / var(--grid-cols)) * 2)  }
.col3  { width: calc(calc(100% / var(--grid-cols)) * 3)  }
.col4  { width: calc(calc(100% / var(--grid-cols)) * 4)  }
.col5  { width: calc(calc(100% / var(--grid-cols)) * 5)  }
.col6  { width: calc(calc(100% / var(--grid-cols)) * 6)  }
.col7  { width: calc(calc(100% / var(--grid-cols)) * 7)  }
.col8  { width: calc(calc(100% / var(--grid-cols)) * 8)  }
.col9  { width: calc(calc(100% / var(--grid-cols)) * 9)  }
.col10 { width: calc(calc(100% / var(--grid-cols)) * 10) }
.col11 { width: calc(calc(100% / var(--grid-cols)) * 11) }
.col12 { width: calc(calc(100% / var(--grid-cols)) * 12) }

.pl0 { padding-left: 0; }
.pr0 { padding-right: 0; }
.pt0 { padding-top: 0; }
.pb0 { padding-top: 0; }

.form-group
{
	margin-bottom: 3px;
}
.form-group.inline label
{
	display: inline-block;
}
.form-group label,
fieldset legend
{
  color: var(--cor-neutra-9);
  display: block;
  font-size: 11rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}
.form-checkbox,
.form-radio
{
	/* padding: 1px; */
	vertical-align: middle;
	/* line-height: 15px; */

	/* display: flex !important; */
	align-items: center;
}
.form-radio input,
.form-radio span,
.form-checkbox input,
.form-checkbox span
{
	display: inline-block;
	vertical-align: middle;
}
.form-radio span,
.form-checkbox span
{
	/* margin-top: -2px; */
	margin-left: 3px;
}

.form-radio + .form-radio {
	margin-top: 5px;
}
.form-group.inline .form-radio + .form-radio {
	margin-top: 0;
	margin-left: 5px;
}

fieldset .form-group {
	margin-bottom: 0;
	margin-top: 0;
}

select{
	line-height: 1;
	padding: 0;
}
.form-control
{
  display: block;

  border: 1px solid rgba(0,0,0,.25);
	min-width: initial;
	/* line-height: normal; */
	/* line-height: 1; */
	width: 100%;
	font: inherit;
	font-size: 12rem;
	height: auto;
	border-radius: var(--radius-xs);
	padding: 0px 3px;
	min-height: 20px;

	box-shadow: 0 1px 3px 0 rgba(0,0,0,.15) inset;
}

.form-control-addon
{
	display: flex;
}
.form-control-addon .form-control
{
	margin: 0;
	border-right: 0;
}
.form-control-addon .btn
{
	margin: 0 !important;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.action-bar
{
	padding-top: 10px;
}

.btn
{
	display: inline-block;
	background-color: var(--btn-bgc);
	background: linear-gradient(0deg, rgba(237,237,237,1) 0%, rgba(249,249,249,1) 100%);
	color: var(--cor-neutra-10);
	border: 1px solid #b6b6b6;
	padding: 2px 15px;
	border-radius: var(--radius-xs);
	font-size: 10rem;
	text-transform: uppercase;
	font-weight: 500;
	position: relative;
	margin-bottom: 5px;

	min-height: 20px;
	box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.btn:not(:first-child)
{
	margin-left: 5px;
}
label + .btn:not(:first-child)
{
	margin-left: 0;
}
.btn:hover
{
	/* background: var(--btn-hover-bgc);
	border-color: var(--cor-primaria-active);
	color: var(--btn-hover-color); */
	background: var(--btn-default-bg-gradient);
	box-shadow: 0 1px 5px rgba(0,0,0,.1);
}
.btn-primary
{
	background: var(--cor-primaria);
	border-color: var(--cor-primaria-active);
	color: var(--btn-hover-color);
}
.btn-primary:hover {
	background: var(--cor-primaria-active);
	border-color: var(--cor-primaria-active);
	color: var(--btn-hover-color);
}
.btn sup
{
	position: absolute;
	top: 5px;
	right: 3px;
	margin-top: 0;
}
.btn-ico.lg
{
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px;
}
.btn-ico.lg i
{
	font-size: 24px;
	margin-bottom: 5px;
	height: 24px;
}

#header
{
	grid-area: header;
	display: grid;
	grid-template-columns: 2fr 4fr;
	box-shadow: 0 2px 1px 0 rgba(0,0,0,0.1);
	z-index: 10;
}
.header-left
{
	display: flex;
}
.header-brand
{
	display: flex;
}
.header-brand-logo,
.header-brand-slogan
{
	display: flex;
	align-items: center;
	padding: 10px 15px;
}
.header-brand-logo
{
	font-weight: bold;
}
.header-brand-slogan
{
	padding-left: 0;
}

#header-right
{
	display: flex;
	justify-content: flex-end;
}
.header-info
{
	font-size: 11rem;
	text-align: right;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-grow: 1;
}
.header-nav
{
	display: flex;
	justify-content: flex-end;
	height: 100%;
	margin-left: 20px;
}
.header-nav ul
{
	display: flex;
}
.header-nav ul li
{}
.header-nav-btn
{
	height: 100%;
	display: flex;
	align-items: center;
	padding: 10px;
	font-size: 24rem;
}
.header-nav-btn:hover
{
	background-color: var(--btn-hover-bgc);
	color: var(--btn-hover-color);
}

#main
{
	display: grid;
	grid-area: main;
	grid-template-columns: 200px 4fr;
}

#aside
{
	background-color: var(--aside-bgc);
	border-right: 2px solid rgba(0,0,0,.1);
}
.aside-searchform
{
	display: flex;
	padding: 10px;
	border-bottom: 1px solid rgba(0,0,0,.1);
	height: var(--aside-searchform-height);
}
.aside-searchform-input
{
	border: 1px solid rgba(0,0,0,.2);
	border-right: 0;
	min-width: initial;
	width: 100%;
	padding: 5px 10px;
	border-radius: var(--aside-searchform-radius) 0 0 var(--aside-searchform-radius);
	min-height: initial;
}
.aside-searchform-btn
{
	border: 1px solid rgba(0,0,0,.2);
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding: 5px 10px;
	font-size: 14rem;
	/* border-left: 0; */
	border-radius: 0 var(--aside-searchform-radius) var(--aside-searchform-radius) 0;
}
.aside-searchform-btn:hover
{
	background-color: var(--btn-hover-bgc);
	color: var(--btn-hover-color);
}

.aside-nav
{
	overflow: auto;
	font-size: 13rem;
	min-height: var(--aside-nav-min-height);
	max-height: var(--aside-nav-max-height);
}
.aside-nav-list
{}
.aside-nav-item
{
}
.aside-nav-item:last-child
{
}
.aside-nav-link
{
	background-color: transparent;
	background-color: var(--aside-bgc);
	border-top: 1px solid rgba(0,0,0,.1);
	cursor: pointer;
	display: flex;
	align-items: center;
	width: 100%;
	padding: 7px;
	padding-right: 30px;
	line-height: 1.2em;
	user-select: none;
	position: relative;
	z-index: 1;
}
.aside-nav-link label
{
	cursor: pointer;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 1;
}
.aside-nav-item:last-child .aside-nav-link
{
	border-bottom: 0;
}
.aside-nav-item > .aside-submenu-toggle + .aside-nav-link:after
{
	font-family: FontAwesome;
	content: '\f078';
	display: block;
	position: absolute;
	right: 10px;
	font-size: 10rem;
}
.aside-nav-link i
{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5px;
	margin-right: 10px;
	width: 32px;
	font-size: 20px;
	border-radius: var(--radius-xs);
	background-color: var(--cor-primaria);
	/* background-color: var(--cor-neutra-7); */
	color: var(--btn-hover-color);
}
.aside-nav-link span
{}
.aside-nav-link:hover
{
	/* background-color: var(--btn-hover-bgc); */
	background-color: var(--table-tr-hover-bg);
	/* color: var(--btn-hover-color); */
}
.aside-nav-link:hover i
{
	background-color: var(--btn-hover-bgc);
	color: var(--btn-hover-color);
}
.aside-submenu-toggle
{
	display: none;
}
.aside-nav-list.submenu 
{
	background-color: var(--aside-nav-link-bgc);
	font-size: 12rem;
	margin-left: 5px;
	display: none;
	animation: slideInDown;
	animation-duration: 250ms;
	position: relative;
	z-index: 0;
}
.aside-nav-list.submenu .aside-nav-item
{
	border-left: 1px solid var(--cor-neutra-2);
}
.aside-nav-list.submenu .aside-nav-link
{
	background-color: var(--aside-nav-link-bgc);
	padding-left: 15px;
	border-top-color: var(--cor-neutra-2);
}
.aside-submenu-toggle:checked ~ .submenu
{
	display: block;
}
.aside-submenu-toggle:checked + .aside-nav-link
{}
.aside-submenu-toggle:checked + .aside-nav-link:after
{
	transform: rotateX(180deg);
}
#footer
{
	grid-area: footer;
	border-top: 1px solid var(--cor-neutra-5);
	display: flex;
	padding: 5px;
	align-items: center;
}

#content
{
	padding: 15px;
}

#content iframe
{
	width: 100%;
	overflow: hidden;
	height: 100%;
	position: relative;
}

.panel
{
	padding: 10px;
	display: block;
	width: 100%;
	position: relative;
	border: 1px solid rgba(0,0,0,.1);
}
.panel-title
{
	color: var(--cor-primaria);
	display: block;
	border-bottom: 1px solid rgba(0,0,0,.1);
	padding-bottom: 2px;
	font-weight: 500;
}
.panel-title b,
.panel-title strong
{
	font-weight: 900;
}

.tabs
{
	--tabs-border-color: var(--cor-neutra-5);
	/* --tabs-active-bgc: var(--cor-neutra-2); */
	--tabs-active-bgc: var(--body-bgc);

	display: flex;
	position: relative;
	flex-wrap: wrap;
}
.tabs .tabs-control
{
	position: absolute;
	opacity: 0;
}
.tabs .tab
{
	width: auto;
	padding: 5px 10px;
	background-color: transparent;
	background-color: #e7e7e7;
	cursor: pointer;
	color: rgba(0,0,10,.8);
	font-weight: normal;
	height: auto;
	border: 1px solid var(--tabs-border-color);
	/* border-top-width: 2px; */
	border-bottom: 0;
	font-size: 12rem;
	margin-bottom: -1px;
	position: relative;
	z-index: 1;
	box-shadow: 0 -1px 0 0 var(--tabs-border-color) inset;
	user-select: none;

	margin-right: 5px;
	/* border-right-width: 0; */
}
.tabs .tab:last-of-type
{
	border-right-width: 1px;
}
.tabs .tab:hover
{
	/* background-color: var(--cor-primaria); */
	/* border-color: var(--btn-hover-bgc); */
	/* box-shadow: 0 -1px 0 0 var(--cor-primaria) inset; */
	/* color: #FFF; */
	background: var(--btn-default-bg-gradient);
}
.tabs .tab:active
{}
.tabs .tab-panel
{
	display: none;
	padding: 10px;
	border: 1px solid var(--tabs-border-color);
	position: relative;
	z-index: 0;
	background-color: var(--tabs-active-bgc);
	flex-grow: 1;
}

.tabs .tabs-control:checked + .tab
{
	background-color: var(--tabs-active-bgc);
	border-color: var(--tabs-border-color);
	/* border-top-color: var(--cor-primaria); */
	color: var(--btn-hover-bgc);
	box-shadow: 0 -1px 0 0 transparent inset;
}
.tabs .tabs-control:checked + .tab + .tab-panel
{
	display: block;
	width: 100%;
	order: 1000;
}

.mb10 { margin-bottom: 10px; }