@charset "utf-8";

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0;text-align:left;line-height:140%;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
input,select,textarea,button{outline: none; min-width:40px}
img{vertical-align: middle}
















/* Esconde sintaxe VUE
======================================================= */
[v-cloak] {
	display: none;
}



/* ELEMENTS
======================================================= */
body,
html {
	background-color: var(--background);
	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;
	color: #333;
	height: 100%
	}
body,
html,
table,
form,
input,
option,
textarea,
button,
select {
	font-family: 'Montserrat', sans-serif;
	font-size: 13px
	}
a {
	cursor: pointer; 
	text-decoration: none; 
	color: #333 
	}
a.cl {
	text-decoration: underline; 
	}
a.disabled {
	pointer-events: none;
	cursor: default;
}
b, strong {
	font-weight: bold 
	}
i {
	font-style: italic;
	}
u {
	font-style: underline;
	}
blink,
.blink {
	animation: blink-animation 1s steps(5, start) infinite;
	-webkit-animation: blink-animation 1s steps(5, start) infinite;
}
	@keyframes blink-animation {
		to {
			visibility: hidden;
		}
	}
	@-webkit-keyframes blink-animation {
		to {
			visibility: hidden;
		}
	}
code {
	font-family: Consolas, monospace 
	}
hr {
	height: 3px;
	border: 0;
	margin: 24px 0;
	background-color: rgba(0,0,0,.3)
	}
p {
	line-height: 135%;
	margin-bottom: 5px
	}
h1 {
	font-size: 157%;
	line-height: 33px;
	padding: 8px 0 6px 0;
	color: #333;
	margin: 0;
	}
h1 b {
	border-bottom: 6px solid var(--primary);
	padding: 6px;
	font-weight: 700;
}
h1 span {
	margin-left: 8px;
	padding-left: 8px;
	border-left: 2px solid rgba(0,0,0,.03);
}
h1 a {
	float: right;
	margin-left: 4px;
	font-weight: bold
	}
h1:before {
	font-size: 100% !important;
	color: rgba(0,0,0,.7);
	padding: 0 6px 0 6px;
}
h1 i:before {
	padding-right: 12px
}
/*h2 {
	font-size: 136%;
	line-height: 33px;
	border-bottom: 2px solid rgba(0,0,0,.1);
	padding-bottom: 3px;
	margin: 16px 0 21px 0;
	clear: both;
	}
h2 span {
	border-bottom: 2px solid var(--primary);
	padding-bottom: 8px;
}
h2 i {
	font-style: normal;
	color: #999;
	margin-left: 12px
}*/
/*
.app-box h2 {
	padding-top: 16px;
}
.app-box > h2:first-of-type {
	padding-top: 0;
	border: 4px solid red
}
.form h2:first-of-type {
	border: 4px solid red
}*/

h3 {
	font-size: 150%;
	font-weight: bold;
	padding: 0 0 6px 0;
	color: #222;
	margin: 0 0 12px 0;
}
h5 {
	margin: 10px 0 0 0;
	padding: .625em;
	font-weight: bold;
	text-transform: uppercase
}

input::placeholder {
	color: black;
	opacity: .5;
}
sup {
	font-size: 75%;
	vertical-align: super;
}



/* COMPONENTS FORM
======================================================= */
input,
.input,
textarea,
select,
button {
	/*max-width: 720px;*/
	border: 1px solid;
		border-top-color: currentcolor;
		border-right-color: currentcolor;
		border-bottom-color: currentcolor;
		border-left-color: currentcolor;
	border-color: rgba(51,55,57,0.12) rgba(51,55,57,0.12) rgba(51,55,57,0.24);
	padding: 8px;
	border-radius: 2px;
	-moz-box-sizing: border-box;
		 box-sizing: border-box;

	background-color: #F1F4F9;
	box-shadow: 0px 0px 6px rgba(0,0,0,.05) inset;
}
input:focus,
textarea:focus,
select:focus {
	border-color: rgba(51,55,57,0.32) rgba(51,55,57,0.32) rgba(51,55,57,0.44);
}
input:disabled,
textarea:disabled,
select:disabled {
	-moz-box-shadow: inset 0 0 17px rgba(0,0,0,.1);
	-webkit-box-shadow: inset 0 0 17px rgba(0,0,0,.1);
	box-shadow: inset 0 0 17px rgba(0,0,0,.1);
	border: 1px solid #FFF;
	color: #999
}
textarea {
	height: 75px
}
select {
	padding: 7px 28px 7px 7px;
	-webkit-appearance: none;
		-moz-appearance: none;
		  -o-appearance: none;
			 appearance: none;
	background-image: url('../../assets/img/a/arrow-down.svg');
	background-size: 10px;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: right 12px center;
	background-color: #F1F4F9;
	box-shadow: 0px 0px 6px rgba(0,0,0,.1) inset;
	}
select option.level-0 {
	background-color: #000;
	font-weight: bold;
	color: #FFF
	}
select option.level-1 {
	background-color: #555;
	font-weight: bold;
	color: #FFF;
	border-bottom: 1px dotted #CCC;
	padding-left: 8px
	}	
select option.level-2 {
	padding-left: 16px;
	font-weight: bold;
	background-color: #EFEFEF
	}
select option.level-3 {
	padding-left: 24px;
	background-color: #FFF
	}
@media only screen and (max-width: 720px) {
	input[type="text"],
	input[type="password"],
	input[type="number"],
	.input,
	textarea,
	select,
	button {
		width: 100%;
		max-width: 100%;
		float: none
	}
	textarea {
		min-width: inherit;
		max-width: 100%;
	}
}




/* TABLE
======================================================= */
table {
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	z-table-layout: fixed;
}
table caption {
	margin: .5em 0 .75em;
}
table caption input.filter {
	float: right
}
table thead tr {
	border-bottom: 2px solid #E2E2E2;
}
table tfoot {
	border-top: 3px solid #E0E0E0;
}
table tr {
	background: #FFF;
	padding: .35em;
	border-bottom:1px solid #E2E2E2;
}
table tbody tr:nth-child(odd) td {
	background-color: rgba(0,0,0,.05);
}
table tr:hover {
	border-bottom-color: #999;
}
table tr th,
table tr td {
	padding: .625em;
	atext-align: center;
	width: auto;
}
table tr th.auto,
table tr td.auto {
	letter-spacing: nowrap;
	width: 1px;
}
table th.tools,
table td.tools {
	text-align: right;
	white-space: nowrap;
}
table tr th.tools a,
table tr td.tools a {
}
table th.number,
table td.number {
	text-align: right
}
table tr.disabled {
	color: rgba(0,0,0,.3) !important
}
table thead th {
	font-weight: bold
}
table th {
	xletter-spacing: .1em;
	text-transform: uppercase;
}
@media screen and (max-width: 720px) {
	table.adapt thead,
	table[class^="adapt-"] thead,
	table[class*=" adapt-"] thead {
		display: none
		}
		
	table.adapt tr,
	table[class^="adapt-"] tr,
	table[class*=" adapt-"] tr {
		display: block;
		margin-bottom: .625em;
		padding-right: 54px;
		position: relative
		}
	table.adapt td, 
	table[class^="adapt-"] td,
	table[class*=" adapt-"] td {
		border-bottom: 1px solid #ddd;
		display: block;
		text-align: right;
		}
	table.adapt-tools tbody td:last-child {
		position: absolute;
		top: 0;
		right: 0;
		background: rgba(0,0,0,.03);
		width: 36px;
		bottom: 0;
		padding: 16px 6px;
		text-align: center;
		}
	table.adapt td::before, 
	table[class^="adapt-"] td::before, 
	table[class*=" adapt-"] td::before {
		content: attr(data-label);
		float: left;
		font-weight: bold;
		text-transform: uppercase;
		}
	table.adapt-tools td:nth-last-child(-n+2) {
		border-bottom: 0;
		}
}





/* UTILS
=================================================== */
.blured {
			filter: blur(1px);
	-webkit-filter: blur(1px);
	   -moz-filter: blur(1px);
		-ms-filter: blur(1px);
		 -o-filter: blur(1px);
	pointer-events: none;
	touch-action: none;
	overflow: hidden;
}
.hand {
	cursor: pointer
}
.lower {
	text-transform: lowercase
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	 -khtml-user-select: none; /* Konqueror HTML */
	   -moz-user-select: none; /* Firefox */
		-ms-user-select: none; /* Internet Explorer/Edge */
			user-select: none; /* Non-prefixed version, currently
								  supported by Chrome and Opera */
	-webkit-tap-highlight-color: transparent;
}
.nowrap {
	white-space: nowrap
}
.row-light {
	background-color: #FBF063
}
.scroller {
	/* FIREFOX */
	scrollbar-width: thin;
}
.scroller::-webkit-scrollbar {
	width: 6px;
}
.scroller::-webkit-scrollbar-track {
	background: #CCC;
}
.scroller::-webkit-scrollbar-thumb {
	background: #999; 
}
.upper {
	text-transform: uppercase
}
.pre {
	white-space: pre-line;
}
.hidden {
	display: none
}
.block {
	display: block;
	overflow: hidden
}





/* CONTAINER AND FOOTER
======================================================= */
#container {
	padding-top: 60px
}
#content {
	box-sizing: border-box;
	padding: 16px;
}
#footer {
	height: 100px;
	margin: 0 0 48px 0;
	background-image: url('../../assets/img/logo-shadow.png');
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 110px auto;
}














/* Variaveis - Verificar compatibilidade */
:root {
	--blue: #2E608A;
	--indigo: #6610f2;
	--purple: #9C3CB4;
	--deep: #452163;
	--pink: #e83e8c;
	--red: #B84E3D;
	--orange: #F93;
	--yellow: #C19D44;
	--green: #4AB858;
	--teal: #20c997;
	--cyan: var(--primary);
	--white: #fff;
	--black: #222;
	--gray: #868e96;
	--gray-dark: #343a40;
	--primary: #4D648D;
	--secondary: #868e96;
	--success: #28a745;
	--info: #17a2b8;
	--warning: #ffc107;
	--danger: #dc3545;
	--light: #f8f9fa;
	--dark: #343a40;
	--backgroundOld: #f0f3f5;
	--backgrounds: #E9E9E9;
	--background: #EBEEF0;
}


/** FONTS
================================================= */
.font-courgette { font-family: 'Courgette', cursive; }
.font-fredokaOne { font-family: 'Fredoka One', cursive; }
.font-gochiHand { font-family: 'Gochi Hand', cursive; }
.font-pangolin { font-family: 'Pangolin', cursive; }
.font-patrickHand { font-family: 'Patrick Hand', cursive; }
.font-patuaOne { font-family: 'Patua One', cursive; }
.font-permanentMarker { font-family: 'Permanent Marker', cursive; }
.font-satisfy { font-family: 'Satisfy', cursive; }
.font-titanOne { font-family: 'Titan One', cursive; }





/** ESTRUTURAS
================================================= */
















/* LISTAS
---------------------------------------------------------------------------- */
ul li {
	font-size: 12px
}
ul.enum {
	list-style-type: decimal-leading-zero;
	padding: 16px 0 0 36px;
}
ul.attr,
ul[class^="attr-"],
ul[class*=" attr-"] {
	overflow: auto;
	font-size: 12px;
	border-bottom: 1px dotted rgba(0,0,0,.2);
	margin-bottom: 16px;
	padding-bottom: 4px;
}
ul.attr li,
ul[class^="attr-"] li,
ul[class*=" attr-"] li {
	float: left;
	margin-right: 12px
}
ul.attr li::before,
ul[class^="attr-"] li::before,
ul[class*=" attr-"] li::before {
	color: rgba(0,0,0,.3);
	margin: 0px 6px 0 0
}
ul.attr-subtitle {
	border: 0;
	background-color: #F5F5F5;
	padding: 6px;
	margin-top: -16px;
}


ul.attr li .tag, 
ul.attr li [class^="tag-"],
ul.attr li [class*=" tag-"] {
	padding: 0 8px;
	border-radius: 43px;
	}

ul.user-list {
}
ul.user-list li img {
	width: 36px;
	vertical-align: middle;
	margin-right: 12px
}
ul.user-list li {
	margin-bottom: 8px
}













/* PESO DAS COLUNAS TODO - Usar no componente grid
----------------------------------------------------------------- */
.weight,
[class^="weight-"],
[class*=" weight-"] {
	margin-left: auto;
	padding: 4px;
	box-sizing: border-box;
}
/*.weight + .weight,
[class^="weight-"] + [class^="weight-"],
[class*=" weight-"] + [class*=" weight-"] {
	background-color: yellow
}*/
.weight-0 { width: auto }
.weight-1 { width: 5% }
.weight-2 { width: 10% }
.weight-3 { width: 15% }
.weight-4 { width: 20% }
.weight-5 { width: 25% }
.weight-6 { width: 30% }
.weight-7 { width: 35% }
.weight-8 { width: 40% }
.weight-9 { width: 45% }
.weight-10 { width: 50% }
.weight-11 { width: 55% }
.weight-12 { width: 60% }
.weight-13 { width: 65% }
.weight-14 { width: 70% }
.weight-15 { width: 75% }
.weight-16 { width: 80% }
.weight-17 { width: 85% }
.weight-18 { width: 90% }
.weight-19 { width: 95% }
.weight-20 { width: 100% }





/* GRID
------------------------------------ */
.row,
.col,
[class^="col-"],
[class*=" col-"] {
	box-sizing: border-box;
}
.row:before,
.row:after {
	content: " ";
	display: table;
}
.row:after {
	clear: both;
}
.col,
[class^="col-"], 
[class*=" col-"] {
	position: relative;
	float: left;
	display: block;
}
.col + .col,
[class^="col-"] + [class^="col-"],
[class*=" col-"] + [class*=" col-"] {
	margin-left: 1.6%;
}
.col-1 { width: 6.86666666667% }
.col-2 { width: 15.3333333333% }
.col-3 { width: 23.8% }
.col-4 { width: 32.2666666667% }
.col-5 { width: 40.7333333333% }
.col-6 { width: 49.2% }
.col-7 { width: 57.6666666667% }
.col-8 { width: 66.1333333333% }
.col-9 { width: 74.6% }
.col-10 { width: 83.0666666667% }
.col-11 { width: 91.5333333333% }
.col-12 { width: 100%; margin-left: 0 }
@media only screen and (max-width: 550px) {
	.col-1, 
	.col-2, 
	.col-3, 
	.col-4, 
	.col-5, 
	.col-6, 
	.col-7, 
	.col-8, 
	.col-9, 
	.col-10, 
	.col-11, 
	.col-12 {
		float: none;
		width: auto;
	}
	.col + .col,
	[class^="col-"] + [class^="col-"], 
	[class*=" col-"] + [class*=" col-"] {
		margin-left: 0;
	}
}






/* CAPTION
----------------------------------------------- */
.app-caption {
	clear: both;
	font-size: 10px
}
.app-caption ul li {
	float: left;
	margin-right: 16px
}
.app-caption ul li span:first-child {
	min-width: 10px;
	height: 10px;
	display: inline-block;
	border-radius: 3px;
	margin-right: 4px;
	font-weight: bold
}




/* BUTON MENU
----------------------------------------------- 
.button-menu {
	position: relative;
	float: right;
	text-transform: initial
}
.button-menu div {
	position: absolute;
	right: 0;
	background-color: #FFF;
	border-radius: 3px;
	border: 1px solid #C9D3DD;
	z-index: 0;
	box-shadow: 0 5px 10px rgba(0,0,0,.2);
	margin-top: 3px
}
.button-menu div ul {
	padding: 4px 0;
	overflow: hidden
}
.button-menu div ul li {
	margin: 0;
	white-space: nowrap;
}
.button-menu div ul li a {
	padding: 4px 24px 4px 16px;
	display: block;
	font-weight: normal
}
.button-menu > a {
	color: #444;
}
.button-menu div ul li a:hover {
	background-color: #F1F4F9
}
*/




/* TAGS
-------------------------------------------------- 
.tag,
[class^="tag-"], 
[class*=" tag-"] {
	background-color: rgba(0,0,0,.1);
	padding: 2px 8px;
	border-radius: 3px;
	color: white;
	font-size: 12px
}

.tag-blue { background-color: var(--blue) }
.tag-black { background-color: var(--black) }
.tag-orange { background-color: var(--orange) }
.tag-cyan { background-color: var(--cyan) }
.tag-green { background-color: var(--green) }
.tag-olive { background-color: var(--olive) }
.tag-lemon { background-color: var(--lemon) }
.tag-purple { background-color: var(--purple) }
.tag-deep { background-color: var(--deep) }
.tag-red { background-color: var(--red) }
.tag-yellow { background-color: var(--yellow) }
.tag-gray { background-color: var(--gray) }
.tag-check,
[class^="tag-check-"],
[class*=" tag-check-"] {
	color: #333;
	cursor: pointer
}
.tag-check input,
[class^="tag-check-"] input,
[class*=" tag-check-"] input {
	display: none
}
.tag-check-checked {
	background-color: #333;
	color: white
}
*/













/* COMPONENTES BÁSICOS
================================================== */

/* Banner
 * TODO Melhor seletores do banner
----------------------------------------- */
.app-banner,
[class^="app-banner-"],
[class*=" app-banner-"] {
	background-color: #CCD4DA;
	margin: 0 -16px;
	box-sizing: border-box;
	padding: 16px 0;
	position: relative;
	background-size: 50%;
}
.app-banner-close {
	padding: 18px 24px;
	margin: 0;
	display: block;
	color: rgba(0,0,0,.3);
	position: absolute;
	right: 0;
	top: 0;
	font-size: 150%
}
.app-banner-close:hover {
	background-color: rgba(0,0,0,.15);
	color: white
}
.app-banner-close:active {
	background-color: #900;
}
.app-banner q {
	display:block;
	background-color: rgba(255,255,255,.5);
	padding: 6px 10px;
	border-radius: 6px;
	margin: 9px 0 0 -10px;
}
.app-banner > div:first-of-type,
[class^="app-banner-"] > div:first-of-type, 
[class*=" app-banner-"] > div:first-of-type {
	min-height: 300px;
	padding: 48px 48px 48px 300px;
}
.app-banner > div,
[class^="app-banner-"] > div, 
[class*=" app-banner-"] > div {
	max-width: 900px;
	margin: 0 auto;
	position: relative;
	box-sizing: border-box;
}
.app-banner > div > img,
[class^="app-banner-"] > div > img, 
[class*=" app-banner-"] > div > img {
	position: absolute;
	width: 300px;
	left: 0;
	top: 0
}
.app-banner > div > h1,
[class^="app-banner-"] > div > h1, 
[class*=" app-banner-"] > div > h1 {
	font-weight: 900;
	font-size: 220%;
	text-transform: uppercase;
	margin: 0 0 10px -9px;
	padding: 0px 0 6px 8px;
	border-bottom: 1px solid rgba(0,0,0,.02);
}
.app-banner > div > p,
[class^="app-banner-"] > div > p, 
[class*=" app-banner-"] > div > p {
	color: rgba(0,0,0,.5);
	font-weight: 400;
	font-size: 108%;
}
.app-banner > div > h3,
[class^="app-banner-"] > div > h3, 
[class*=" app-banner-"] > div > h3 {
	color: rgba(0,0,0,.3);
	font-weight: 400;
	font-size: 17px;
	text-transform: uppercase;
	margin: 0 0 0 -8px;
	padding: 0 0 0 8px;
}
.app-banner > div > div,
[class^="app-banner-"] > div > div, 
[class*=" app-banner-"] > div > div {
	margin-top: 21px;
	overflow: auto
}
.app-banner-top {
	margin-top: -16px;
}
.app-banner input,
[class^="app-banner-"] input,
[class*=" app-banner-"] input,
.app-banner textarea,
[class^="app-banner-"] textarea,
[class*=" app-banner-"] textarea,
.app-banner select,
[class^="app-banner-"] select,
[class*=" app-banner-"] select {
	background-color: white;
	border: 0;
}
@media only screen and (max-width: 720px) {
	.app-banner > div,
	[class^="app-banner-"] > div, 
	[class*=" app-banner-"] > div {
		padding: 16px 36px 36px 36px !important;
		margin: 24px 16px 16px
	}
	/*.app-banner,
	[class^="app-banner-"], 
	[class*=" app-banner-"] {
		margin: 0 -16px
	}*/
	.app-banner > div > img,
	[class^="app-banner-"] > div > img, 
	[class*=" app-banner-"] > div > img {
		position: relative;
		width: 240px;
		margin: 0 auto;
		display: block;
		left: 0;
		top: 0
	}	
	.app-banner > div > h1,
	[class^="app-banner-"] > div > h1, 
	[class*=" app-banner-"] > div > h1,
	.app-banner > div > h3,
	[class^="app-banner-"] > div > h3, 
	[class*=" app-banner-"] > div > h3,
	.app-banner > div > p,
	[class^="app-banner-"] > div > p, 
	[class*=" app-banner-"] > div > p {
		text-align: center;
	}	
	.app-banner > div .b,
	[class^="app-banner-"] > div .b, 
	[class*=" app-banner-"] > div .b,
	.app-banner > div [class^="b-"],
	[class^="app-banner-"] > div [class^="b-"], 
	[class*=" app-banner-"] > div [class^="b-"],
	.app-banner > div [class*=" b-"],
	[class^="app-banner-"] > div [class*=" b-"], 
	[class*=" app-banner-"] > div [class*=" b-"] {
		width: 100%;
		margin-bottom: 4px;
	}
	.app-banner-top {
		margin-top: -24px;
	}
}









/* FONT
 ----------------------------------------------- */
.app-font {
	margin: 0 auto;
}

/* SPINNER LOADER 
------------------------------------------------ */
#app-loader {
	position: fixed;
	z-index: 10000;
	height: 2em;
	width: 2em;
	overflow: show;
	margin: auto;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: none
}
#app-loader:before {
	content: '';
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
}
#app-loader:not(:required) {
	color: transparent;
	text-shadow: 1px 1px 1px red;
	background-color: transparent;
	border: 0;
}
#app-loader:not(:required):after {
	content: '';
	display: block;
	border: 1px solid rgba(0,0,0,.1);
	border-top: 1px solid white;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	animation: spinner 1s linear infinite;
}
@-webkit-keyframes spinner {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@-moz-keyframes spinner {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@-o-keyframes spinner {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes spinner {
	0% {
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-ms-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}



/* Message
----------------------------------------- */
.app-message {
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
		-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
			 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
	background: white;
	padding: 24px;
	box-sizing: border-box;
	position: relative;
	margin: 0 auto;
	border-radius: 6px;
}
.app-message {
	-webkit-transform: translateY(5%);
	-moz-transform: translateY(5%);
	-ms-transform: translateY(5%);
	transform: translateY(5%);
	opacity: 0;
}
.app-message.appear {
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
	transition-duration: .3s;
}
.app-message > div {
	text-align: right;
	padding-top: 24px;
}
.app-message > div a {
	margin-left: 6px;
}
.app-message > p > i {
	font-style: normal;
	color: #999
}
.app-message > input {
	width: 100%;
	margin-top: 8px
}
.app-message > h3 {
	font-size: 130%
}
.app-message > p {
	max-height: 50vh;
	overflow-x: hidden;
	overflow-y: auto
}



/* Modal
----------------------------------------- */
.app-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, .5);
	z-index: 10000
}

@media only screen and (max-width: 720px) {
	.app-modal {
		padding: 24px
	}
}

/* Navega磯
----------------------------------------- */
.app-nav,
[class^="app-nav-"],
[class*=" app-nav-"] {
	position: relative;
	min-height: 36px;
	margin: -16px -16px 16px;
	padding: 12px;
	background-color: #F7F7F7;
	border-bottom: 1px solid #EFEFEF;
	clear: both;
	-webkit-box-shadow: inset 0px -1px 4px rgba(0,0,0,.03);
	   -moz-box-shadow: inset 0px -1px 4px rgba(0,0,0,.03);
			box-shadow: inset 0px -1px 4px rgba(0,0,0,.03);
}
.app-nav-footer {
	margin: 16px -16px -16px !important;
}
.app-nav a,
[class^="app-nav-"] a,
[class*=" app-nav-"] a {
	float: right;
	margin-left: 8px
}
@media only screen and (max-width: 720px) {
	.app-nav > a,
	[class^="app-nav-"] > a,
	[class*=" app-nav-"] > a,
	.app-nav > .button-dropdown > a,
	[class^="app-nav-"] > .button-dropdown > a,
	[class*=" app-nav-"] > .button-dropdown > a {
		float: inherit;
		margin: 4px 0 0 0 !important;
		width: 100% !important;
	}
}




/* PAGINATION
-------------------------------------------------------*/
.app-pagination {
	width:100%;
	overflow:hidden;
	position:relative;
	margin-top: 21px;
}
.app-pagination ul {
	clear:left;
	float:left;
	list-style:none;
	margin:0;
	padding:0;
	position:relative;
	left:50%;
	text-align:center;
}
.app-pagination ul li {
	float: left;
	padding: 6px;
	cursor: pointer;
	min-width: 24px;
	background-color: #EFEFEF;
	margin-right: 2px;
	display:block;
	text-align: center;
	list-style:none;
	position:relative;
	right:50%;
}
.app-pagination ul li:hover {
	background-color: #CCC;
}
.app-pagination ul li.selected {
	font-weight: bold;
	background-color: #444;
	color: white
}




/* Subtitulo
----------------------------------------- */
.app-subtitle {
	clear: both;
	padding: 24px 0 16px 0;
}
.app-subtitle h2 {
	font-size: 134%;
	border-bottom: 3px solid rgba(0,0,0,.1);
	padding: 0 0 7px 0;
	margin: 0;
}
.app-subtitle h2 span {
	padding: 2px;
	margin: 0;
}
.app-subtitle h2 i {
	font-style: normal;
	color: #999;
	margin-left: 8px
}
.app-subtitle:first-of-type {
	padding-top: 10px !important
}


/* Tabela
----------------------------------------- */
.app-table {
	width: 100%;
	box-sizing: border-box;
	overflow-x: auto;
	overflow-y: hidden
}



/* Barra progresso
----------------------------------------- */
.app-progress {
	background-color: rgba(0,0,0,.16);
	border-radius: 8px;
	overflow: hidden;
	position: relative;
	color: #888888;
}
.app-progress > div {
	background-color: red;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	overflow: hidden;
	color: white;
	text-shadow: 1px 1px 1px rgba(0,0,0,.3);
}



/* TOAST
--------------------------------------------------------- */
.app-toast {
	box-sizing: border-box;
	min-width: 250px;
	width: 250px; 
	margin-left: -125px;
	background-color: #333;
	color: #fff;
	text-align: center;
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 6px;
	padding: 16px;
	box-shadow: 3px 3px 3px rgba(,0,0,.1);
	position: fixed;
	z-index: 200000;
	left: 50%;
	top: 30px;
	-webkit-animation: toast_fadein 0.5s, toast_fadeout 0.5s 2.5s;
			animation: toast_fadein 0.5s, toast_fadeout 0.5s 2.5s;
	user-select: none
}
/* Animations to fade the snackbar in and out */
@-webkit-keyframes toast_fadein {
	from {top: 0; opacity: 0;}
	to {top: 50px; opacity: 1;}
}
@keyframes toast_fadein {
	from {top: 0; opacity: 0;}
	to {top: 50px; opacity: 1;}
}
@-webkit-keyframes toast_fadeout {
	from {top: 50px; opacity: 1;}
	to {top: 0; opacity: 0;}
}
@keyframes toast_fadeout {
	from {top: 50px; opacity: 1;}
	to {top: 0; opacity: 0;}
}


/* TOOLTIP
--------------------------------------------------------- */
.app-tooltip {
	max-width: 300px;
	height: auto;
	position: absolute;
	color: white;
	-webkit-transform: translateY(5%);
	-moz-transform: translateY(5%);
	-ms-transform: translateY(5%);
	transform: translateY(5%);
	opacity: 0;
}
.app-tooltip span {
	background-color: #222;
	border-radius: 6px;
	padding: 10px;
	display: block;
}
.app-tooltip tooltip {
	font-weight: normal;
	font-size: 11px;
	line-height: 1.5em;
	visibility: hidden;
	max-width: 300px;
	background-color: #222;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 10px;
	position: absolute;
	z-index: 10;
	bottom: 125%;
	left: 50%;
	margin-left: -60px;
	opacity: 0;
	transition: .3s;
	transform: translate3d(0px, 20px, 0px);
}
.app-tooltip span::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #222 transparent transparent transparent;
}
.tooltip:hover span {
	visibility: visible;
	opacity: 1;
	transform: translate3d(0px, 0px, 0px);
}

.app-tooltip.appear {
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
	transition-duration: .3s;
}






/* VIEWERS // TODO - Criar componente VIEWER
---------------------------------------------- */
dl.viewer {
}
dl.viewer dt {
	color: gray;
	float: left;
	margin: 4px 4px 0 4px;
}
dl.viewer dd {
	font-weight: bold;
	width: 100%;
	padding: 4px;
	border-bottom: 1px solid rgba(0,0,0,.1);
	box-sizing: border-box
}
dl.viewer dd dd {
	background-color: red;
}
.wiewer .col > label,
[class^="col-"] > label, 
[class*=" col-"] > label {
	color: rgba(0,0,0,.3);
	display: block;
	padding: 4px 0 6px 0
}
.wiewer .col,
[class^="col-"], 
[class*=" col-"] {
	margin-bottom: 24px;
	bordesr: 1px solid red
}





/* GRID // TODO - Grid componenets GRID
---------------------------------------------- */
.grid,
[class^="grid-"],
[class*=" grid-"] {
	/* Prevent vertical gaps */
	-webkit-column-count: 3;
	   -moz-column-count: 3;
			column-count: 3;
	-webkit-column-gap:   12px;
	   -moz-column-gap:   12px;
			column-gap:   12px;
}
.grid-2 { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
.grid-3 { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }
.grid-4 { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; }
.grid-5 { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; }
.grid-6 { -webkit-column-count: 6; -moz-column-count: 6; column-count: 6; }
.grid-7 { -webkit-column-count: 7; -moz-column-count: 7; column-count: 7; }
.grid-8 { -webkit-column-count: 8; -moz-column-count: 8; column-count: 9; }
.grid-9 { -webkit-column-count: 9; -moz-column-count: 9; column-count: 9; }
.grid-10 { -webkit-column-count: 10; -moz-column-count: 10; column-count: 10; }
.grid > div,
[class^="grid-"] > div,
[class*=" grid-"] > div,
.grid > div > img,
[class^="grid-"] > div > img,
[class*=" grid-"] > div > img,
.grid > img,
[class^="grid-"] > img,
[class*=" grid-"] > img {
	display: block;
	width: 100% !important;
	height: auto !important;
}
.grid > div,
[class^="grid-"] > div,
[class*=" grid-"] > div,
.grid > img,
[class^="grid-"] > img,
[class*=" grid-"] > img {
	margin: 0 0 12px 0;	
}
@media (max-width: 800px) {
	.grid,
	[class^="grid-"],
	[class*=" grid-"] {
		-moz-column-count:	2;
		-webkit-column-count: 2;
		column-count:		 2;
	}
}
@media (max-width: 400px) {
	.grid,
	[class^="grid-"],
	[class*=" grid-"] {
		-moz-column-count:	1;
		-webkit-column-count: 1;
		column-count:		 1;
	}
}






dl.app-suggest {
	margin: 8px 0;
}
dl.app-suggest dt {
	color: green;
	float: left;
	margin-right: 16px;
}
dl.app-suggest dd {
	font-weight: bold;
	float: left;
	margin-right: 16px;
}









































/* IC FONTS 
------------------------------------ */
@font-face {
  font-family: 'app';
  src: url('../../assets/font/app.eot?77311214');
  src: url('../../assets/font/app.eot?77311214#iefix') format('embedded-opentype'),
       url('../../assets/font/app.woff2?77311214') format('woff2'),
       url('../../assets/font/app.woff?77311214') format('woff'),
       url('../../assets/font/app.ttf?77311214') format('truetype'),
       url('../../assets/font/app.svg?77311214#app') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'app';
    src: url('../font/app.svg?77311214#app') format('svg');
  }
}
*/
[class^="i-"]:before,
[class*=" i-"]:before {
	font-family: "app";
	font-style: normal;
	font-weight: normal;
	speak: none;

	display: inline-block;
	text-decoration: inherit;
	width: 1em;
	margin-right: .2em;
	text-align: center;
	/* opacity: .8; */

	/* For safety - reset parent styles, that can break glyph codes*/
	font-variant: normal;
	text-transform: none;

	/* fix buttons height, for twitter bootstrap */
	line-height: 1em;

	/* Animation center compensation - margins should be symmetric */
	/* remove if not needed */
	margin-left: .2em;

	/* you can be more comfortable with increased icons size */
	/* */ font-size: 120%;

	/* Font smoothing. That was taken from TWBS */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	/* Uncomment for 3D effect */
	/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.i-glass:before { content: '\e800'; }
.i-music:before { content: '\e801'; }
.i-search:before { content: '\e802'; }
.i-mail:before { content: '\e803'; }
.i-heart:before { content: '\e804'; }
.i-heart-empty:before { content: '\e805'; }
.i-star:before { content: '\e806'; }
.i-star-empty:before { content: '\e807'; }
.i-star-half:before { content: '\e808'; }
.i-user:before { content: '\e809'; }
.i-users:before { content: '\e80a'; }
.i-video:before { content: '\e80b'; }
.i-videocam:before { content: '\e80c'; }
.i-picture:before { content: '\e80d'; }
.i-camera:before { content: '\e80e'; }
.i-camera-alt:before { content: '\e80f'; }
.i-th-large:before { content: '\e810'; }
.i-th:before { content: '\e811'; }
.i-th-list:before { content: '\e812'; }
.i-ok:before { content: '\e813'; }
.i-ok-circled:before { content: '\e814'; }
.i-ok-circled2:before { content: '\e815'; }
.i-cancel:before { content: '\e816'; }
.i-cancel-circled:before { content: '\e817'; }
.i-cancel-circled2:before { content: '\e818'; }
.i-plus:before { content: '\e819'; }
.i-plus-circled:before { content: '\e81a'; }
.i-minus:before { content: '\e81b'; }
.i-minus-circled:before { content: '\e81c'; }
.i-help-circled:before { content: '\e81d'; }
.i-info-circled:before { content: '\e81e'; }
.i-home:before { content: '\e81f'; }
.i-link:before { content: '\e820'; }
.i-attach:before { content: '\e821'; }
.i-lock:before { content: '\e822'; }
.i-lock-open:before { content: '\e823'; }
.i-pin:before { content: '\e824'; }
.i-eye:before { content: '\e825'; }
.i-eye-off:before { content: '\e826'; }
.i-tag:before { content: '\e827'; }
.i-tags:before { content: '\e828'; }
.i-bookmark:before { content: '\e829'; }
.i-flag:before { content: '\e82a'; }
.i-thumbs-up:before { content: '\e82b'; }
.i-thumbs-down:before { content: '\e82c'; }
.i-download:before { content: '\e82d'; }
.i-upload:before { content: '\e82e'; }
.i-forward:before { content: '\e82f'; }
.i-export:before { content: '\e830'; }
.i-pencil:before { content: '\e831'; }
.i-edit:before { content: '\e832'; }
.i-print:before { content: '\e833'; }
.i-retweet:before { content: '\e834'; }
.i-comment:before { content: '\e835'; }
.i-chat:before { content: '\e836'; }
.i-bell:before { content: '\e837'; }
.i-attention:before { content: '\e838'; }
.i-attention-circled:before { content: '\e839'; }
.i-location:before { content: '\e83a'; }
.i-trash-empty:before { content: '\e83b'; }
.i-doc:before { content: '\e83c'; }
.i-folder:before { content: '\e83d'; }
.i-folder-open:before { content: '\e83e'; }
.i-phone:before { content: '\e83f'; }
.i-cog:before { content: '\e840'; }
.i-cog-alt:before { content: '\e841'; }
.i-wrench:before { content: '\e842'; }
.i-basket:before { content: '\e843'; }
.i-calendar:before { content: '\e844'; }
.i-login:before { content: '\e845'; }
.i-logout:before { content: '\e846'; }
.i-volume-off:before { content: '\e847'; }
.i-volume-down:before { content: '\e848'; }
.i-volume-up:before { content: '\e849'; }
.i-headphones:before { content: '\e84a'; }
.i-clock:before { content: '\e84b'; }
.i-block:before { content: '\e84c'; }
.i-resize-full:before { content: '\e84d'; }
.i-resize-small:before { content: '\e84e'; }
.i-resize-vertical:before { content: '\e84f'; }
.i-resize-horizontal:before { content: '\e850'; }
.i-zoom-in:before { content: '\e851'; }
.i-zoom-out:before { content: '\e852'; }
.i-down-circled2:before { content: '\e853'; }
.i-up-circled2:before { content: '\e854'; }
.i-down-dir:before { content: '\e855'; }
.i-up-dir:before { content: '\e856'; }
.i-left-dir:before { content: '\e857'; }
.i-right-dir:before { content: '\e858'; }
.i-down-open:before { content: '\e859'; }
.i-left-open:before { content: '\e85a'; }
.i-right-open:before { content: '\e85b'; }
.i-up-open:before { content: '\e85c'; }
.i-down-big:before { content: '\e85d'; }
.i-left-big:before { content: '\e85e'; }
.i-right-big:before { content: '\e85f'; }
.i-up-big:before { content: '\e860'; }
.i-right-hand:before { content: '\e861'; }
.i-left-hand:before { content: '\e862'; }
.i-up-hand:before { content: '\e863'; }
.i-down-hand:before { content: '\e864'; }
.i-cw:before { content: '\e865'; }
.i-ccw:before { content: '\e866'; }
.i-arrows-cw:before { content: '\e867'; }
.i-shuffle:before { content: '\e868'; }
.i-play:before { content: '\e869'; }
.i-play-circled2:before { content: '\e86a'; }
.i-stop:before { content: '\e86b'; }
.i-pause:before { content: '\e86c'; }
.i-to-end:before { content: '\e86d'; }
.i-to-end-alt:before { content: '\e86e'; }
.i-to-start:before { content: '\e86f'; }
.i-to-start-alt:before { content: '\e870'; }
.i-fast-fw:before { content: '\e871'; }
.i-fast-bw:before { content: '\e872'; }
.i-eject:before { content: '\e873'; }
.i-target:before { content: '\e874'; }
.i-signal:before { content: '\e875'; }
.i-award:before { content: '\e876'; }
.i-inbox:before { content: '\e877'; }
.i-globe:before { content: '\e878'; }
.i-cloud:before { content: '\e879'; }
.i-flash:before { content: '\e87a'; }
.i-umbrella:before { content: '\e87b'; }
.i-flight:before { content: '\e87c'; }
.i-leaf:before { content: '\e87d'; }
.i-font:before { content: '\e87e'; }
.i-bold:before { content: '\e87f'; }
.i-italic:before { content: '\e880'; }
.i-text-height:before { content: '\e881'; }
.i-text-width:before { content: '\e882'; }
.i-align-left:before { content: '\e883'; }
.i-align-center:before { content: '\e884'; }
.i-align-right:before { content: '\e885'; }
.i-align-justify:before { content: '\e886'; }
.i-list:before { content: '\e887'; }
.i-indent-left:before { content: '\e888'; }
.i-indent-right:before { content: '\e889'; }
.i-scissors:before { content: '\e88a'; }
.i-briefcase:before { content: '\e88b'; }
.i-off:before { content: '\e88c'; }
.i-road:before { content: '\e88d'; }
.i-list-alt:before { content: '\e88e'; }
.i-qrcode:before { content: '\e88f'; }
.i-barcode:before { content: '\e890'; }
.i-book:before { content: '\e891'; }
.i-adjust:before { content: '\e892'; }
.i-tint:before { content: '\e893'; }
.i-check:before { content: '\e894'; }
.i-asterisk:before { content: '\e895'; }
.i-gift:before { content: '\e896'; }
.i-fire:before { content: '\e897'; }
.i-magnet:before { content: '\e898'; }
.i-chart-bar:before { content: '\e899'; }
.i-credit-card:before { content: '\e89a'; }
.i-floppy:before { content: '\e89b'; }
.i-megaphone:before { content: '\e89c'; }
.i-key:before { content: '\e89d'; }
.i-truck:before { content: '\e89e'; }
.i-hammer:before { content: '\e89f'; }
.i-lemon:before { content: '\e8a0'; }
.i-move:before { content: '\f047'; }
.i-link-ext:before { content: '\f08e'; }
.i-check-empty:before { content: '\f096'; }
.i-bookmark-empty:before { content: '\f097'; }
.i-phone-squared:before { content: '\f098'; }
.i-twitter:before { content: '\f099'; }
.i-facebook:before { content: '\f09a'; }
.i-rss:before { content: '\f09e'; }
.i-hdd:before { content: '\f0a0'; }
.i-certificate:before { content: '\f0a3'; }
.i-left-circled:before { content: '\f0a8'; }
.i-right-circled:before { content: '\f0a9'; }
.i-up-circled:before { content: '\f0aa'; }
.i-down-circled:before { content: '\f0ab'; }
.i-tasks:before { content: '\f0ae'; }
.i-filter:before { content: '\f0b0'; }
.i-resize-full-alt:before { content: '\f0b2'; }
.i-beaker:before { content: '\f0c3'; }
.i-docs:before { content: '\f0c5'; }
.i-blank:before { content: '\f0c8'; }
.i-menu:before { content: '\f0c9'; }
.i-list-bullet:before { content: '\f0ca'; }
.i-list-numbered:before { content: '\f0cb'; }
.i-strike:before { content: '\f0cc'; }
.i-underline:before { content: '\f0cd'; }
.i-table:before { content: '\f0ce'; }
.i-magic:before { content: '\f0d0'; }
.i-pinterest-circled:before { content: '\f0d2'; }
.i-pinterest-squared:before { content: '\f0d3'; }
.i-gplus-squared:before { content: '\f0d4'; }
.i-money:before { content: '\f0d6'; }
.i-columns:before { content: '\f0db'; }
.i-sort:before { content: '\f0dc'; }
.i-sort-down:before { content: '\f0dd'; }
.i-sort-up:before { content: '\f0de'; }
.i-mail-alt:before { content: '\f0e0'; }
.i-linkedin:before { content: '\f0e1'; }
.i-gauge:before { content: '\f0e4'; }
.i-comment-empty:before { content: '\f0e5'; }
.i-chat-empty:before { content: '\f0e6'; }
.i-sitemap:before { content: '\f0e8'; }
.i-paste:before { content: '\f0ea'; }
.i-lightbulb:before { content: '\f0eb'; }
.i-exchange:before { content: '\f0ec'; }
.i-download-cloud:before { content: '\f0ed'; }
.i-upload-cloud:before { content: '\f0ee'; }
.i-user-md:before { content: '\f0f0'; }
.i-stethoscope:before { content: '\f0f1'; }
.i-suitcase:before { content: '\f0f2'; }
.i-bell-alt:before { content: '\f0f3'; }
.i-coffee:before { content: '\f0f4'; }
.i-food:before { content: '\f0f5'; }
.i-doc-text:before { content: '\f0f6'; }
.i-building:before { content: '\f0f7'; }
.i-hospital:before { content: '\f0f8'; }
.i-ambulance:before { content: '\f0f9'; }
.i-medkit:before { content: '\f0fa'; }
.i-fighter-jet:before { content: '\f0fb'; }
.i-beer:before { content: '\f0fc'; }
.i-h-sigh:before { content: '\f0fd'; }
.i-plus-squared:before { content: '\f0fe'; }
.i-angle-double-left:before { content: '\f100'; }
.i-angle-double-right:before { content: '\f101'; }
.i-angle-double-up:before { content: '\f102'; }
.i-angle-double-down:before { content: '\f103'; }
.i-angle-left:before { content: '\f104'; }
.i-angle-right:before { content: '\f105'; }
.i-angle-up:before { content: '\f106'; }
.i-angle-down:before { content: '\f107'; }
.i-desktop:before { content: '\f108'; }
.i-laptop:before { content: '\f109'; }
.i-tablet:before { content: '\f10a'; }
.i-mobile:before { content: '\f10b'; }
.i-circle-empty:before { content: '\f10c'; }
.i-quote-left:before { content: '\f10d'; }
.i-quote-right:before { content: '\f10e'; }
.i-spinner:before { content: '\f110'; }
.i-circle:before { content: '\f111'; }
.i-reply:before { content: '\f112'; }
.i-github:before { content: '\f113'; }
.i-folder-empty:before { content: '\f114'; }
.i-folder-open-empty:before { content: '\f115'; }
.i-smile:before { content: '\f118'; }
.i-frown:before { content: '\f119'; }
.i-meh:before { content: '\f11a'; }
.i-gamepad:before { content: '\f11b'; }
.i-keyboard:before { content: '\f11c'; }
.i-flag-empty:before { content: '\f11d'; }
.i-flag-checkered:before { content: '\f11e'; }
.i-terminal:before { content: '\f120'; }
.i-code:before { content: '\f121'; }
.i-reply-all:before { content: '\f122'; }
.i-star-half-alt:before { content: '\f123'; }
.i-direction:before { content: '\f124'; }
.i-crop:before { content: '\f125'; }
.i-fork:before { content: '\f126'; }
.i-unlink:before { content: '\f127'; }
.i-help:before { content: '\f128'; }
.i-info:before { content: '\f129'; }
.i-attention-alt:before { content: '\f12a'; }
.i-superscript:before { content: '\f12b'; }
.i-subscript:before { content: '\f12c'; }
.i-eraser:before { content: '\f12d'; }
.i-puzzle:before { content: '\f12e'; }
.i-mic:before { content: '\f130'; }
.i-mute:before { content: '\f131'; }
.i-shield:before { content: '\f132'; }
.i-calendar-empty:before { content: '\f133'; }
.i-extinguisher:before { content: '\f134'; }
.i-rocket:before { content: '\f135'; }
.i-angle-circled-left:before { content: '\f137'; }
.i-angle-circled-right:before { content: '\f138'; }
.i-angle-circled-up:before { content: '\f139'; }
.i-angle-circled-down:before { content: '\f13a'; }
.i-html5:before { content: '\f13b'; }
.i-css3:before { content: '\f13c'; }
.i-anchor:before { content: '\f13d'; }
.i-lock-open-alt:before { content: '\f13e'; }
.i-bullseye:before { content: '\f140'; }
.i-ellipsis:before { content: '\f141'; }
.i-ellipsis-vert:before { content: '\f142'; }
.i-rss-squared:before { content: '\f143'; }
.i-play-circled:before { content: '\f144'; }
.i-ticket:before { content: '\f145'; }
.i-minus-squared:before { content: '\f146'; }
.i-minus-squared-alt:before { content: '\f147'; }
.i-level-up:before { content: '\f148'; }
.i-level-down:before { content: '\f149'; }
.i-ok-squared:before { content: '\f14a'; }
.i-pencil-squared:before { content: '\f14b'; }
.i-link-ext-alt:before { content: '\f14c'; }
.i-export-alt:before { content: '\f14d'; }
.i-compass:before { content: '\f14e'; }
.i-expand:before { content: '\f150'; }
.i-collapse:before { content: '\f151'; }
.i-expand-right:before { content: '\f152'; }
.i-euro:before { content: '\f153'; }
.i-pound:before { content: '\f154'; }
.i-dollar:before { content: '\f155'; }
.i-rupee:before { content: '\f156'; }
.i-yen:before { content: '\f157'; }
.i-rouble:before { content: '\f158'; }
.i-won:before { content: '\f159'; }
.i-bitcoin:before { content: '\f15a'; }
.i-doc-inv:before { content: '\f15b'; }
.i-doc-text-inv:before { content: '\f15c'; }
.i-sort-name-up:before { content: '\f15d'; }
.i-sort-name-down:before { content: '\f15e'; }
.i-sort-alt-up:before { content: '\f160'; }
.i-sort-alt-down:before { content: '\f161'; }
.i-sort-number-up:before { content: '\f162'; }
.i-sort-number-down:before { content: '\f163'; }
.i-thumbs-up-alt:before { content: '\f164'; }
.i-thumbs-down-alt:before { content: '\f165'; }
.i-youtube-squared:before { content: '\f166'; }
.i-youtube:before { content: '\f167'; }
.i-youtube-play:before { content: '\f16a'; }
.i-dropbox:before { content: '\f16b'; }
.i-stackoverflow:before { content: '\f16c'; }
.i-instagram:before { content: '\f16d'; }
.i-flickr:before { content: '\f16e'; }
.i-adn:before { content: '\f170'; }
.i-tumblr:before { content: '\f173'; }
.i-tumblr-squared:before { content: '\f174'; }
.i-down:before { content: '\f175'; }
.i-up:before { content: '\f176'; }
.i-left:before { content: '\f177'; }
.i-right:before { content: '\f178'; }
.i-apple:before { content: '\f179'; }
.i-windows:before { content: '\f17a'; }
.i-android:before { content: '\f17b'; }
.i-linux:before { content: '\f17c'; }
.i-skype:before { content: '\f17e'; }
.i-foursquare:before { content: '\f180'; }
.i-trello:before { content: '\f181'; }
.i-female:before { content: '\f182'; }
.i-male:before { content: '\f183'; }
.i-gittip:before { content: '\f184'; }
.i-sun:before { content: '\f185'; }
.i-moon:before { content: '\f186'; }
.i-box:before { content: '\f187'; }
.i-bug:before { content: '\f188'; }
.i-stackexchange:before { content: '\f18d'; }
.i-right-circled2:before { content: '\f18e'; }
.i-left-circled2:before { content: '\f190'; }
.i-collapse-left:before { content: '\f191'; }
.i-dot-circled:before { content: '\f192'; }
.i-wheelchair:before { content: '\f193'; }
.i-vimeo-squared:before { content: '\f194'; }
.i-try:before { content: '\f195'; }
.i-plus-squared-alt:before { content: '\f196'; }
.i-space-shuttle:before { content: '\f197'; }
.i-slack:before { content: '\f198'; }
.i-mail-squared:before { content: '\f199'; }
.i-wordpress:before { content: '\f19a'; }
.i-bank:before { content: '\f19c'; }
.i-graduation-cap:before { content: '\f19d'; }
.i-yahoo:before { content: '\f19e'; }
.i-google:before { content: '\f1a0'; }
.i-stumbleupon:before { content: '\f1a4'; }
.i-language:before { content: '\f1ab'; }
.i-fax:before { content: '\f1ac'; }
.i-building-filled:before { content: '\f1ad'; }
.i-child:before { content: '\f1ae'; }
.i-paw:before { content: '\f1b0'; }
.i-spoon:before { content: '\f1b1'; }
.i-cube:before { content: '\f1b2'; }
.i-cubes:before { content: '\f1b3'; }
.i-steam:before { content: '\f1b6'; }
.i-recycle:before { content: '\f1b8'; }
.i-cab:before { content: '\f1b9'; }
.i-taxi:before { content: '\f1ba'; }
.i-tree:before { content: '\f1bb'; }
.i-spotify:before { content: '\f1bc'; }
.i-soundcloud:before { content: '\f1be'; }
.i-database:before { content: '\f1c0'; }
.i-file-pdf:before { content: '\f1c1'; }
.i-file-word:before { content: '\f1c2'; }
.i-file-excel:before { content: '\f1c3'; }
.i-file-powerpoint:before { content: '\f1c4'; }
.i-file-image:before { content: '\f1c5'; }
.i-file-archive:before { content: '\f1c6'; }
.i-file-audio:before { content: '\f1c7'; }
.i-file-video:before { content: '\f1c8'; }
.i-file-code:before { content: '\f1c9'; }
.i-codeopen:before { content: '\f1cb'; }
.i-jsfiddle:before { content: '\f1cc'; }
.i-lifebuoy:before { content: '\f1cd'; }
.i-circle-notch:before { content: '\f1ce'; }
.i-empire:before { content: '\f1d1'; }
.i-git-squared:before { content: '\f1d2'; }
.i-paper-plane:before { content: '\f1d8'; }
.i-paper-plane-empty:before { content: '\f1d9'; }
.i-history:before { content: '\f1da'; }
.i-circle-thin:before { content: '\f1db'; }
.i-header:before { content: '\f1dc'; }
.i-paragraph:before { content: '\f1dd'; }
.i-sliders:before { content: '\f1de'; }
.i-share:before { content: '\f1e0'; }
.i-share-squared:before { content: '\f1e1'; }
.i-bomb:before { content: '\f1e2'; }
.i-soccer-ball:before { content: '\f1e3'; }
.i-tty:before { content: '\f1e4'; }
.i-binoculars:before { content: '\f1e5'; }
.i-plug:before { content: '\f1e6'; }
.i-slideshare:before { content: '\f1e7'; }
.i-newspaper:before { content: '\f1ea'; }
.i-wifi:before { content: '\f1eb'; }
.i-calc:before { content: '\f1ec'; }
.i-paypal:before { content: '\f1ed'; }
.i-gwallet:before { content: '\f1ee'; }
.i-cc-visa:before { content: '\f1f0'; }
.i-cc-mastercard:before { content: '\f1f1'; }
.i-cc-discover:before { content: '\f1f2'; }
.i-cc-amex:before { content: '\f1f3'; }
.i-cc-paypal:before { content: '\f1f4'; }
.i-bell-off:before { content: '\f1f6'; }
.i-bell-off-empty:before { content: '\f1f7'; }
.i-trash:before { content: '\f1f8'; }
.i-copyright:before { content: '\f1f9'; }
.i-at:before { content: '\f1fa'; }
.i-eyedropper:before { content: '\f1fb'; }
.i-brush:before { content: '\f1fc'; }
.i-birthday:before { content: '\f1fd'; }
.i-chart-area:before { content: '\f1fe'; }
.i-chart-pie:before { content: '\f200'; }
.i-chart-line:before { content: '\f201'; }
.i-lastfm:before { content: '\f202'; }
.i-toggle-off:before { content: '\f204'; }
.i-toggle-on:before { content: '\f205'; }
.i-bicycle:before { content: '\f206'; }
.i-bus:before { content: '\f207'; }
.i-cc:before { content: '\f20a'; }
.i-shekel:before { content: '\f20b'; }
.i-connectdevelop:before { content: '\f20e'; }
.i-forumbee:before { content: '\f211'; }
.i-skyatlas:before { content: '\f216'; }
.i-cart-plus:before { content: '\f217'; }
.i-cart-arrow-down:before { content: '\f218'; }
.i-diamond:before { content: '\f219'; }
.i-ship:before { content: '\f21a'; }
.i-user-secret:before { content: '\f21b'; }
.i-motorcycle:before { content: '\f21c'; }
.i-street-view:before { content: '\f21d'; }
.i-heartbeat:before { content: '\f21e'; }
.i-venus:before { content: '\f221'; }
.i-mars:before { content: '\f222'; }
.i-mercury:before { content: '\f223'; }
.i-transgender:before { content: '\f224'; }
.i-transgender-alt:before { content: '\f225'; }
.i-venus-double:before { content: '\f226'; }
.i-mars-double:before { content: '\f227'; }
.i-venus-mars:before { content: '\f228'; }
.i-mars-stroke:before { content: '\f229'; }
.i-mars-stroke-v:before { content: '\f22a'; }
.i-mars-stroke-h:before { content: '\f22b'; }
.i-neuter:before { content: '\f22c'; }
.i-genderless:before { content: '\f22d'; }
.i-facebook-official:before { content: '\f230'; }
.i-pinterest:before { content: '\f231'; }
.i-whatsapp:before { content: '\f232'; }
.i-server:before { content: '\f233'; }
.i-user-plus:before { content: '\f234'; }
.i-user-times:before { content: '\f235'; }
.i-bed:before { content: '\f236'; }
.i-viacoin:before { content: '\f237'; }
.i-train:before { content: '\f238'; }
.i-subway:before { content: '\f239'; }
.i-medium:before { content: '\f23a'; }
.i-expeditedssl:before { content: '\f23e'; }
.i-battery-4:before { content: '\f240'; }
.i-battery-3:before { content: '\f241'; }
.i-battery-2:before { content: '\f242'; }
.i-battery-1:before { content: '\f243'; }
.i-battery-0:before { content: '\f244'; }
.i-mouse-pointer:before { content: '\f245'; }
.i-i-cursor:before { content: '\f246'; }
.i-object-group:before { content: '\f247'; }
.i-object-ungroup:before { content: '\f248'; }
.i-sticky-note:before { content: '\f249'; }
.i-sticky-note-o:before { content: '\f24a'; }
.i-clone:before { content: '\f24d'; }
.i-balance-scale:before { content: '\f24e'; }
.i-hourglass-o:before { content: '\f250'; }
.i-hourglass-1:before { content: '\f251'; }
.i-hourglass-2:before { content: '\f252'; }
.i-hourglass-3:before { content: '\f253'; }
.i-hourglass:before { content: '\f254'; }
.i-hand-grab-o:before { content: '\f255'; }
.i-hand-paper-o:before { content: '\f256'; }
.i-hand-scissors-o:before { content: '\f257'; }
.i-hand-lizard-o:before { content: '\f258'; }
.i-hand-spock-o:before { content: '\f259'; }
.i-hand-pointer-o:before { content: '\f25a'; }
.i-hand-peace-o:before { content: '\f25b'; }
.i-trademark:before { content: '\f25c'; }
.i-registered:before { content: '\f25d'; }
.i-creative-commons:before { content: '\f25e'; }
.i-gg:before { content: '\f260'; }
.i-gg-circle:before { content: '\f261'; }
.i-tripadvisor:before { content: '\f262'; }
.i-odnoklassniki:before { content: '\f263'; }
.i-get-pocket:before { content: '\f265'; }
.i-wikipedia-w:before { content: '\f266'; }
.i-safari:before { content: '\f267'; }
.i-chrome:before { content: '\f268'; }
.i-firefox:before { content: '\f269'; }
.i-opera:before { content: '\f26a'; }
.i-internet-explorer:before { content: '\f26b'; }
.i-television:before { content: '\f26c'; }
.i-contao:before { content: '\f26d'; }
.i-amazon:before { content: '\f270'; }
.i-calendar-plus-o:before { content: '\f271'; }
.i-calendar-minus-o:before { content: '\f272'; }
.i-calendar-times-o:before { content: '\f273'; }
.i-calendar-check-o:before { content: '\f274'; }
.i-industry:before { content: '\f275'; }
.i-map-pin:before { content: '\f276'; }
.i-map-signs:before { content: '\f277'; }
.i-map-o:before { content: '\f278'; }
.i-map:before { content: '\f279'; }
.i-commenting:before { content: '\f27a'; }
.i-commenting-o:before { content: '\f27b'; }
.i-vimeo:before { content: '\f27d'; }
.i-black-tie:before { content: '\f27e'; }
.i-edge:before { content: '\f282'; }
.i-credit-card-alt:before { content: '\f283'; }
.i-usb:before { content: '\f287'; }
.i-product-hunt:before { content: '\f288'; }
.i-mixcloud:before { content: '\f289'; }
.i-scribd:before { content: '\f28a'; }
.i-shopping-bag:before { content: '\f290'; }
.i-shopping-basket:before { content: '\f291'; }
.i-hashtag:before { content: '\f292'; }
.i-bluetooth-b:before { content: '\f294'; }
.i-percent:before { content: '\f295'; }
.i-envira:before { content: '\f299'; }
.i-universal-access:before { content: '\f29a'; }
.i-wheelchair-alt:before { content: '\f29b'; }
.i-question-circle-o:before { content: '\f29c'; }
.i-blind:before { content: '\f29d'; }
.i-audio-description:before { content: '\f29e'; }
.i-volume-control-phone:before { content: '\f2a0'; }
.i-braille:before { content: '\f2a1'; }
.i-assistive-listening-systems:before { content: '\f2a2'; }
.i-american-sign-language-interpreting:before { content: '\f2a3'; }
.i-asl-interpreting:before { content: '\f2a4'; }
.i-sign-language:before { content: '\f2a7'; }
.i-low-vision:before { content: '\f2a8'; }
.i-snapchat-ghost:before { content: '\f2ac'; }
.i-themeisle:before { content: '\f2b2'; }
.i-google-plus-circle:before { content: '\f2b3'; }
.i-font-awesome:before { content: '\f2b4'; }
.i-handshake-o:before { content: '\f2b5'; }
.i-envelope-open:before { content: '\f2b6'; }
.i-envelope-open-o:before { content: '\f2b7'; }
.i-linode:before { content: '\f2b8'; }
.i-address-book:before { content: '\f2b9'; }
.i-address-book-o:before { content: '\f2ba'; }
.i-address-card:before { content: '\f2bb'; }
.i-address-card-o:before { content: '\f2bc'; }
.i-user-circle:before { content: '\f2bd'; }
.i-user-circle-o:before { content: '\f2be'; }
.i-user-o:before { content: '\f2c0'; }
.i-id-badge:before { content: '\f2c1'; }
.i-id-card:before { content: '\f2c2'; }
.i-id-card-o:before { content: '\f2c3'; }
.i-quora:before { content: '\f2c4'; }
.i-telegram:before { content: '\f2c6'; }
.i-thermometer:before { content: '\f2c7'; }
.i-thermometer-3:before { content: '\f2c8'; }
.i-thermometer-2:before { content: '\f2c9'; }
.i-thermometer-quarter:before { content: '\f2ca'; }
.i-thermometer-0:before { content: '\f2cb'; }
.i-shower:before { content: '\f2cc'; }
.i-bath:before { content: '\f2cd'; }
.i-podcast:before { content: '\f2ce'; }
.i-window-maximize:before { content: '\f2d0'; }
.i-window-minimize:before { content: '\f2d1'; }
.i-window-restore:before { content: '\f2d2'; }
.i-window-close:before { content: '\f2d3'; }
.i-window-close-o:before { content: '\f2d4'; }
.i-microchip:before { content: '\f2db'; }
.i-snowflake-o:before { content: '\f2dc'; }
.i-twitter-squared:before { content: '\f304'; }
.i-facebook-squared:before { content: '\f308'; }
.i-linkedin-squared:before { content: '\f30c'; }
















html,
body {
	overflow: hidden;
}

.login {
	background-size: cover;
	background-repeat: no-repeat;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: auto;
}

.login > div {
	max-width: 460px;
	margin: 0 auto;
	background-color: white;
	border-radius: 8px;
	padding: 48px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
	box-sizing: border-box
}

.login .logo {
	width: 48px;
	margin: 8px auto 24px;
	display: block;
}

.login .forgoting {
	margin-top: 16px;
	display: block;
	color: #999;
	text-align: center
}

.login h3 {
	text-align: center;
	text-transform: uppercase;
	font-weight: 300
}
.login h3 span {
	text-align: center;
	font-weight: 400;
	display: block;
	font-size: 12px;
	color: #CCC
}

.login select,
.login input {
	padding: 16px;
	width: 100%;
	margin-bottom: 12px;
	border: 0
}

.login .app-button,
.login [class^="app-button-"],
.login [class*=" app-button-"] {
	padding: 16px;
	width: 100%;
	text-align: center
}


@media only screen and (max-width: 520px) {
	.login > div {
		padding: 24px;
		margin: 0 !important;
		min-width: 100% !important;
		border-radius: 0
	}
}












/*header {
	display: none
}
#container {
	padding-top: 64px
}
#content {
	max-width: 420px;
	margin: 0 auto;
	background-color: white;
	border-radius: 8px;
	padding: 24px 48px 48px 48px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
#content .b,
#content [class^="b-"],
#content [class*=" b-"] {
	padding: 16px;
	width: 100%;
	text-align: center
}
#content .logo {
	width: 48px;
	margin: 0 auto;
	display: block;
	margin-bottom: 24px
}
#content .forgoting {
	margin-top: 16px;
	display: block;
	color: #999;
	text-align: center
}
#content h3 {
	text-align: center;
	text-transform: uppercase;
	font-weight: 300
}
#content select,
#content input {
	padding: 16px;
	width: 100%;
	margin-bottom: 12px;
	border: 0
}
section {
	min-height: 100%;
	background-size: cover;
	background-position: center;
}
@media only screen and (max-width: 720px) {
	#container {
		padding: 24px;
	}
	#content {
		padding: 24px;
	}
}*/














/* Banner
 * TODO Melhor seletores do banner
----------------------------------------- */
.app-banner,
[class^="app-banner-"],
[class*=" app-banner-"] {
	background-color: #CCD4DA;
	margin: 0 -16px;
	box-sizing: border-box;
	padding: 16px 0;
	position: relative;
	background-size: 50%;
}
.app-banner-close {
	padding: 18px 24px;
	margin: 0;
	display: block;
	color: rgba(0,0,0,.3);
	position: absolute;
	right: 0;
	top: 0;
	font-size: 150%
}
.app-banner-close:hover {
	background-color: rgba(0,0,0,.15);
	color: white
}
.app-banner-close:active {
	background-color: #900;
}
.app-banner q {
	display:block;
	background-color: rgba(255,255,255,.5);
	padding: 6px 10px;
	border-radius: 6px;
	margin: 9px 0 0 -10px;
}
.app-banner > div:first-of-type,
[class^="app-banner-"] > div:first-of-type, 
[class*=" app-banner-"] > div:first-of-type {
	min-height: 300px;
	padding: 48px 48px 48px 300px;
}
.app-banner > div,
[class^="app-banner-"] > div, 
[class*=" app-banner-"] > div {
	max-width: 900px;
	margin: 0 auto;
	position: relative;
	box-sizing: border-box;
}
.app-banner > div > img,
[class^="app-banner-"] > div > img, 
[class*=" app-banner-"] > div > img {
	position: absolute;
	width: 300px;
	left: 0;
	top: 0
}
.app-banner > div > h1,
[class^="app-banner-"] > div > h1, 
[class*=" app-banner-"] > div > h1 {
	font-weight: 900;
	font-size: 220%;
	text-transform: uppercase;
	margin: 0 0 10px -9px;
	padding: 0px 0 6px 8px;
	border-bottom: 1px solid rgba(0,0,0,.02);
}
.app-banner > div > p,
[class^="app-banner-"] > div > p, 
[class*=" app-banner-"] > div > p {
	color: rgba(0,0,0,.5);
	font-weight: 400;
	font-size: 108%;
}
.app-banner > div > h3,
[class^="app-banner-"] > div > h3, 
[class*=" app-banner-"] > div > h3 {
	color: rgba(0,0,0,.3);
	font-weight: 400;
	font-size: 17px;
	text-transform: uppercase;
	margin: 0 0 0 -8px;
	padding: 0 0 0 8px;
}
.app-banner > div > div,
[class^="app-banner-"] > div > div, 
[class*=" app-banner-"] > div > div {
	margin-top: 21px;
	overflow: auto
}
.app-banner-top {
	margin-top: -16px;
}
.app-banner input,
[class^="app-banner-"] input,
[class*=" app-banner-"] input,
.app-banner textarea,
[class^="app-banner-"] textarea,
[class*=" app-banner-"] textarea,
.app-banner select,
[class^="app-banner-"] select,
[class*=" app-banner-"] select {
	background-color: white;
	border: 0;
}
@media only screen and (max-width: 720px) {
	.app-banner > div,
	[class^="app-banner-"] > div, 
	[class*=" app-banner-"] > div {
		padding: 16px 36px 36px 36px !important;
		margin: 24px 16px 16px
	}
	/*.app-banner,
	[class^="app-banner-"], 
	[class*=" app-banner-"] {
		margin: 0 -16px
	}*/
	.app-banner > div > img,
	[class^="app-banner-"] > div > img, 
	[class*=" app-banner-"] > div > img {
		position: relative;
		width: 240px;
		margin: 0 auto;
		display: block;
		left: 0;
		top: 0
	}	
	.app-banner > div > h1,
	[class^="app-banner-"] > div > h1, 
	[class*=" app-banner-"] > div > h1,
	.app-banner > div > h3,
	[class^="app-banner-"] > div > h3, 
	[class*=" app-banner-"] > div > h3,
	.app-banner > div > p,
	[class^="app-banner-"] > div > p, 
	[class*=" app-banner-"] > div > p {
		text-align: center;
	}	
	.app-banner > div .b,
	[class^="app-banner-"] > div .b, 
	[class*=" app-banner-"] > div .b,
	.app-banner > div [class^="b-"],
	[class^="app-banner-"] > div [class^="b-"], 
	[class*=" app-banner-"] > div [class^="b-"],
	.app-banner > div [class*=" b-"],
	[class^="app-banner-"] > div [class*=" b-"], 
	[class*=" app-banner-"] > div [class*=" b-"] {
		width: 100%;
		margin-bottom: 4px;
	}
	.app-banner-top {
		margin-top: -24px;
	}
}



























/* BUTONS
--------------------------------------------------- */
.app-button,
[class^="app-button-"],
[class*=" app-button-"] {
	border: none;
	overflow: hiden;
	background-color: #4D648D;
	color: white;
	font-size: 12px;
	display: inline-block;
	padding: 10px 18px;
	text-transform: uppercase;
	position: relative;
	border-radius: 3px;
	box-sizing: border-box;
	transition: all 300ms ease;
	cursor: pointer;
	white-space: nowrap
}
.app-button::before,
[class^="app-button-"]:before, 
[class*=" app-button-"]:before {
	content:'';
	position: absolute;
	top: 0px;
	left: 0px;
	width: 0px;
	bottom: 0px;
	background: rgba(255,255,255,0.1);
	transition: all .5s ease-out;
	transform-origin: 50%
}
.app-button:hover::before,
[class^="app-button-"]:hover:before, 
[class*=" app-button-"]:hover:before {
	width: 100%;
}
.app-button:active::before,
[class^="app-button-"]:active:before, 
[class*=" app-button-"]:active:before {
	background: rgba(0,0,0,0.1);
}
.app-button i:before,
[class^="app-button-"] i:before, 
[class*=" app-button-"] i:before {
	margin: 0 6px 0 0
}
.app-button.small,
[class^="app-button-"] .small, 
[class*=" app-button-"] .small {
	font-size: 74%;
	padding: 5px 14px;
}
.app-button-blue { background-color: #2E608A }
.app-button-black { background-color: #222 }
.app-button-orange { background-color: #F93 }
.app-button-cyan { background-color: #4D648D }
.app-button-green { background-color: #4AB858 }
.app-button-olive { background-color: var(--olive) }
.app-button-lemon { background-color: var(--lemon) }
.app-button-purple { background-color: #9C3CB4 }
.app-button-deep { background-color: #452163 }
.app-button-red { background-color: #B84E3D }
.app-button-yellow { background-color: #C19D44 }
.app-button-gray { background-color: #868E96 }
.app-button-disabled { 
	background-color: #E2E2E2;
	color: #999;
	pointer-events: none;
	cursor: default;
}
@media only screen and (max-width: 720px) {
	.app-button,
	[class^="app-button-"],
	[class*=" app-button-"] {
		padding: 12px 16px;
	}
}






















.app-tip,
[class^="app-tip-"],
[class*=" app-tip-"] {
	border: 0;
	padding: 16px 42px 16px 24px;
	position: relative;
	color: #444;
	background-color: #EFEFEF;
	border-radius: 3px;
	margin-bottom: 1rem;
}


.app-tip > span.title,
[class^="app-tip-"] > span.title,
[class*=" app-tip-"] > span.title {
	font-weight: bold;
	display: block;
	margin-bottom: 9px;
	font-size: 16px;
}

.app-tip > a,
[class^="app-tip-"] > a,
[class*=" app-tip-"] > a {
	position: absolute;
	top: 16px;
	right: 16px;
	color: rgba(0,0,0,.3);
}
.app-tip > a:hover,
[class^="app-tip-"] > a:hover,
[class*=" app-tip-"] > a:hover {
	color: rgba(0,0,0,.75);
}


.app-tip-error {
	color: #b51f2e;
	background-color: #f7d1d5;
}
.app-tip-success {
	color: #1c9806;
	background-color: #bcfcb1;
}
.app-tip-alert,
.app-tip-warning {
	color: #c47709;
	background-color: #fce6c6;
}
.app-tip-help,
.app-tip-info {
	color: #128294;
	background-color: #beeff7
}


.appTipFadeOut {
	-webkit-animation-duration: 10s;animation-duration: .5s;
	-webkit-animation-fill-mode: both;animation-fill-mode: both;
	-webkit-animation-name: fadeOut;
			animation-name: fadeOut;
}


@keyframes fadeOut {
	0% {opacity: 1; display: block }
	100% {opacity: 0; display: none }
} 




.app-tip more,
[class^="app-tip-"] more,
[class*=" app-tip-"] more {
	display: snone
}