*{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;}

.red.red.red{color: #e26a6a;}
.green.green.green{color: #7ede8d;}
.bg-orange-soft.bg-orange-soft.bg-orange-soft{background: #ff9154;color: #ffffff;}
.nowrap{white-space:nowrap;}

body{font-size: 1.4rem;}
body > main {padding-top: 40px;}
body > main > header{padding-bottom: 20px;}
body > main > header .logo{display: flex;flex-direction: row;align-items: center;font-size: 2rem;font-weight: 700;color: #555;text-decoration: none;}
body > main > header .logo img{height: 42px;margin-right: 20px;}
body > main > header .logo span.bg-green{color: #33b67f}
body > main > footer{padding-top: 60px;}

body > main > #content > header{padding-bottom: 20px;}
body > main > #content > header .logo{display: flex;flex-direction: row;align-items: center;font-size: 2rem;font-weight: 700;color: #555;text-decoration: none;}
body > main > #content > header .logo img{height: 42px;margin-right: 20px;}
body > main > #content > header .logo span.bg-green{color: #33b67f}
body > main > #content > footer{padding-top: 60px;margin-bottom: 40px;}
body > main > #content > footer .page-wrapper > div{max-width: 570px;margin: auto;text-align: center;color: #444444;}
body > main > #content > footer .page-wrapper > div .footer-title{font-weight: bold;margin-bottom: 30px;}
body > main > #content > footer .page-wrapper > div a{color: #5e6577;font-weight: bold;}
body > main > #content > footer .page-wrapper > div a:hover{color: green;font-weight: bold;text-decoration: none;}

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

.page-wrapper{display: flex;max-width: 1024px;margin: auto;flex-direction: row;align-items: center;}
@media(max-width:1104px){
	.page-wrapper{max-width: 100%;margin-left: 40px;margin-right: 40px;}
}
@media(max-width:850px){
	.page-wrapper{flex-direction: column;}
}
.page-centerbox{max-width: 420px;margin: auto;}
.page-centerbox-header{text-align: center;}
.page-centerbox-header h2{margin-bottom: 0;}
.page-centerbox.widget-boxes > li.widget-box + li.widget-box {border-top: 0;}

.widget-boxes > li.widget-box > p > strong{color: inherit;}



.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;
}
.btn-green-soft{
	user-select: none;
	transition: background 20ms ease-in 0s;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	height: 36px;
	border-radius: 3px;
	color: #2a986a;
	font-size: 14px;
	line-height: 1;
	padding-left: 12px;
	padding-right: 12px;
	font-weight: 500;
	background: #d4efe375;
	box-shadow: #0f0f0f1a 0px 1px 2px, 0px 0px 0px 1px #8dd2b2 inset;
	width: 100%;
	border: 0;
	font-weight: bold;
}
input[type="text"],
input[type="password"],
input[type="email"] {
	width: 100%;
	border-radius: 3px;
	padding: 10px 13px;
	border: 0;
	font-size: 1.5rem;
	background: #ebf2fb47;
	box-shadow: 0px 0px 0px 30px #ebf2fb47 inset, 0px 0px 0px 1px #ddd inset, 0px 1px 2px 0px #ddd 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;
	outline: 0;
}
input::placeholder{
	color: #bfb3b6;
}
input:-webkit-autofill { 
	-webkit-background-clip: text;
}










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;
}

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;}
/* END - MAIN */


.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: 200px;}
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;}