*{margin:0;padding:0;box-sizing:border-box;}
html{font-size: 62.5%;}
body{
	font-family: "open sans", "helvetica neue", helvetica, arial, sans-serif;
	color:#8d96a7;
	min-height:100%;position:absolute;width:100%}
ul{list-style:none;}
a{text-decoration:none;color:#2e3d62;outline:0}
a:hover{text-decoration:underline;}
h1{font-size:1.8rem;color:#2a354d;}
h1 > a{font-size:inherit;color:inherit;}
h2{font-weight:normal;font-size:1.8em;margin:10px 0 20px 0;color:#3a4764;}
h4{color:#3a4764;margin-bottom:12px;font-size:1rem;}
hr{border:0;border-top:1px solid #f2f5f6;margin:30px 0;}
button::-moz-focus-inner{border:0;padding:0;}

.bg-orange-soft.bg-orange-soft.bg-orange-soft{background:#ff9154;color:#fff;}

main{
	max-width:900px;
	margin:auto;
}

footer{
	background: #fcfcfd;
	border-top: 1px solid #f2f5f6;
	padding: 20px 0;
}
footer h5{
	color:#3a4664;
	text-transform: uppercase;
	border-bottom: 1px solid #f3f4f6;
	padding-bottom: 10px;
	margin-bottom: 10px;
}
footer li{
	padding: 4px 0;
	color: #54607a;
}

.wrapper{
	max-width: 900px;
	margin: auto;
	width: 100%;
}
@media(max-width:980px){
	.wrapper{
		padding:0px 40px;
		max-width: 100%;
	}
}
.btn-white{
	display: inline-block;
	background: white;
	border-radius: 3px;
	padding: 0 24px;
	box-shadow: 0 1px 1px 1px rgba(100,100,100,.2);
	border: 0;
	line-height: 32px;
}
.btn-green{
	display: inline-block;
	color: #fff;
	background: #33b67f;
	border-radius: 3px;
	padding: 0 24px;
	box-shadow: 0 1px 1px 1px rgba(100,100,100,.2);
	border: 0;
	line-height: 32px;
}
input[type="text"],
input[type="password"],
input[type="email"] {
	width: 100%;
	border-radius: 3px;
	padding: 7px 10px;
	border: 0;
	background: #ebf2fb;
	box-shadow: #ddd 0px 0px 0px 1px inset, #ddd 0px 1px 2px inset;
}
input:focus{
	z-index: 3;
	box-shadow: rgba(67, 90, 111, 0.14) 0px 0px 2px inset,
	 rgb(87, 154, 217) 0px 0px 0px 1px inset,
	 rgba(16, 112, 202, 0.14) 0px 0px 0px 3px;
}
input::placeholder{
	color: #bfb3b6;
}












body > .wrapper.middle input:active,body > .wrapper.middle input:focus
	,.wrapper.middle input:active,.wrapper.middle input:focus{
	border:1px solid #93B04D;
	background:#FFF;
	transition: all .3s ease-in-out;
	color:#777;
}
body > .wrapper.middle input:required,
body > .wrapper.middle input:required{box-shadow:none;}
body > .wrapper.middle input:invalid,
body > .wrapper.middle input:invalid{box-shadow:none;}
body .wrapper.middle .field{position:relative;}
body .wrapper.middle .field span{position: absolute;top: 0;right: 0;padding:1%;width: 34px;height: 34px;line-height: 34px;text-align: center;}
body .wrapper.middle .field span i{color:#CCC;font-size:1.5rem;}

body > .wrapper.middle button
	,.wrapper.middle button{background: #6A7D3B;border: 0;width: 100%;border-radius: 3px;padding: 12px 8px;margin: 12px 0 2px 0;
	color: white;
	text-transform: uppercase;
	font-weight: bold;
	border: 1px solid #6A7D3B;
	box-shadow: inset 0 0 3px #93B04D;
	text-shadow: 0 0 3px rgba(0,0,0,.3);
	outline: 0;
}
body > .wrapper.middle button:active{
	outline:0;
}
body > .wrapper.middle button:hover{
	background:#00ccbb;
	box-shadow:inset 0 0 6px #00b588;
}

body .sms{
	max-width:300px;
	margin: auto;
	margin-top:10px;
	height:0;
	padding:0;
	overflow:hidden;
	transition: all 0.4s ease 0s;
}
body .suc{
	color:#73C27D;
	box-shadow:inset 0 0 6px #73C27D  !important;
}
body .err{
	color:#E68E8A;
	box-shadow:inset 0 0 6px #E68E8A  !important;
}
.show{
	height:76px !important;
	padding:20px !important;
}

body > header .header-logo {
	display: flex;
    max-width: 100%;
    align-items: center;
    margin-bottom: -10px;
}

body > header .header-logo img {
	width: 36px;
    margin-right: 10px;
}

body > header .header-logo span {
	font-size: 1.4rem;
	font-weight:bold;
}

section h1{color:#404040;text-align:center;}
section > .wrapper{margin-left:20px;}
section > .graph{position:relative;}
section .graph-svg{overflow:hidden;}
section .graph-legend{position:absolute;top:0;left:0px;width:1px;background:white;}
section .graph-legend > svg{position:absolute;}
section .graph-bar{position:relative;width:100%;height:20px;background:#eee;}
section .graph-bar .bar{position:absolute;height:calc(100% - 14px);top:7px;background:#d9d9d9;border-radius:4px;}
section .graph-rule{position:relative;border-bottom:4px solid transparent;margin-bottom:10px;}
section .graph-rule > svg{width:100%;min-height:30px;}
section .graph-rule > .frame{position:absolute;top:0;height:100%;line-height:100%;background:rgba(28,168,221,.3);border:1px solid #1ca8dd;text-align:center;cursor:default;}
section .graph-rule > .frame > .label{display:inline-block;color:#666;cursor:inherit;}
@media(max-width:700px){
	section.nodes-two-column > .node{display:block;width:100%;}
}
.two-column{font-size:0;}
.two-column > section{display:inline-block;width:50%;vertical-align:top;}
.two-column > section:first-child{padding-right:5px;}
.two-column > section:last-child{padding-left:5px;}
.two-column > .column{display:inline-block;width:50%;vertical-align:top;}
.two-column > .column:first-child{padding-right:5px;}
.two-column > .column:last-child{padding-left:5px;}
@media(max-width:820px){
	.two-column > section{display:block;width:100%;padding-right:0;padding-left:0;}
	.two-column > .column{display:block;width:100%;padding-right:0;padding-left:0;}
	.two-column > .column:first-child{padding-right:0px;}
	.two-column > .column:last-child{padding-left:0px;}
}
/* END - MAIN */

/* INI - LOGIN */
body > main {padding-top: 20px;font-size: 1.6rem;}
body #content{width:100%;position: relative;}
body > * > .container {}

.container{width: 400px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.container header{margin-bottom: 30px;background: linear-gradient(to right, #036efd, #00a3ff);}
.container header h1{
	font-family: sans-serif;
	font-size: 2.5rem;
	padding: 6px;
	text-align: center;
	color: white;
	text-shadow: 0 1px 2px rgba(0,0,0,.2);
	cursor: default;
	font-weight: normal;
	margin: 0;
}
.container h2{font-size: 2.5rem;color: #272727;}
.container .form, .container.assis form{margin: 30px 0;}
.container .form > div , .container.assis form > div{margin:20px 0 30px;}
.container .form .label, .container.assis form .label{font-weight: bold;color: #6f6f6f;}
.container .form input, .container.assis form input{
	width: 100%;
    background: none;
    border-style: unset;
    border-bottom: 1px solid #e1e1e1;
    padding: 10px 0 7px;
    font-size: 1.4rem;
    color: #b6b6b7;
}
.container .form button, .container.assis form button{
	background: linear-gradient(to right, #00a3ff , #036efd);
	color: #FFF;
	font-size: 1rem;
	padding: 10px 20px;
	border: 0;
	width: 100%;
    border-radius: 50px;
	font-weight: bold;
}
.container.assis header{background: linear-gradient(to right, #ffb466, #ff8a66);}
.container.assis form button{background: linear-gradient(to right, #ff8a66 , #ffb466);}

body{background:#FFF;}
section.public{max-width: 680px;margin: 0 auto;margin-top: 100px;}
section.public > div:first-child{text-align: center;margin-bottom: 10px;}
section.public > div:last-child{padding:0 3%;}
section.public div{position:relative;}
section.public .label{margin: 10px 0 5px;color: #9E9E9E;}
section.public .check{position:absolute;right: 1%;top: 50%;transform: translate(-50%, -50%);color: #39cc89;}
@media(max-width:700px){
	section.public{margin-top: 50px;}
}

.load-enter-active, .load-leave-active{transition: all .8s;}
.load-enter, .load-leave-to{opacity: 0;transform:translateY(40px);}

.replace-enter-active, .replace-leave-active{transition: all .8s;}
.replace-enter, .replace-leave-to{opacity: 0;transform: translateY(40px);}
.replace-leave-to{height: 1px;}