*{margin:0;padding:0;box-sizing:border-box;}
html{font-size:90%;}
body{
	background: #8a9fa7;
	font-family: "open sans", "helvetica neue", helvetica, arial, sans-serif;
	color:#8d96a7;
	min-height:100%;position:absolute;width:100%}
body.index{background: white;color:#323239;}
body.index h1{color:#323239;}
body.index > header,body.index > main,body.index > footer{padding-left:35px;padding-right:35px;}
ul{list-style:none;}
a{text-decoration:none;color:#2e3d62;outline:0}
a:hover{text-decoration:underline;}
h1{font-size:1.8rem !important;color:#2a354d;}
h1 > a{font-size:inherit;color:inherit;}
h2{font-weight:normal;font-size:1.8em;margin:10px 0 20px 0;color:#47405e;}
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;}
.legaltext{padding:30px; background-color: white;}
.legaltext-header.legaltext-header header{margin-top:2em;}
.legaltext-header.legaltext-header header h2,.legaltext-header.legaltext-header header p{padding:0 30px;background-color: #2a354d; color:white;}
.legaltext-header.legaltext-header header h2{padding-top:15px; margin:0;}
.legaltext-header.legaltext-header header p{padding-bottom:15px;}
.legaltext h3{color:#3a4764;padding-bottom:.3em;border-bottom:1px solid #8d96a7;width:35%;min-width: 300px;max-width: 750px;}
.legaltext h3,.legaltext p{margin-bottom:1.5em;}
.legaltext p{margin-left:2em;}
.legaltext-header header h2{margin-bottom:0;}
.return {padding: 10px 10px 10px 60px;margin-left: -30px;background-color: #2a354d;color: white;border-radius: 0 3px 3px 0;display: inline-block;margin-top: 10px;}
.center{text-align: center;}
.login-img-container{text-align:right;}
.login-right{display:inline-block;transform: scaleX(-1);height: 220px;
margin-top: 60px;
margin-right: 50px;}
.reverse{flex-flow: row-reverse;}
h1{text-align:center;color:white;}
.login-box.login-box.login-box{
	max-width:500px;
	background-color:white;
	border-radius:5px;
}

.login-tabs{
	border-bottom:1px solid #385c6961;
	padding:0 30px;
}

.login-tabs span{
	margin-right:30px;
	padding:30px 0;
	margin-bottom: -1px;
	cursor:pointer;
}

.login-tabs .active span{
	border-bottom: 1px solid #e67039;
    color: #e67039;
}

.login-body{
	padding:30px;
}

.login-body > div:not(.u-login-btn){
	margin-bottom: 25px;
}

.login-wrapper.login-wrapper.login-wrapper{
	width:100%;
	padding:0;
	margin:0;
}

.u-login-btn > button{
	background:#385c69;
	color:white;
	box-shadow:none;
}

.bar{
	border-bottom:1px solid #385c6961;
	margin-left:-30px;
	width: calc(100% + 60px);
}

main.gradient{
	margin:0;
	width: 100%;
}

header:not(.no-gradient),
main.gradient{
	background: #d1efff;
	padding:20px 0 0 0;
	flex-grow:1;
}
header nav{line-height:32px;text-align:right;}
header nav > *{display:inline-block;margin-left:20px;}
header h1{
	display: flex;
	margin: 0;
	margin-top: 2px;
	flex-direction: row;
	align-items: center;
}
header h1 > img{margin-right: 10px;}
header h2{margin-top:80px;}
header .browser-flat{height:200px;margin-top:60px;}

main{
	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{
	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"] {
	width: 100%;
	border-radius: 3px;
	padding: 7px 10px;
	border: 1px solid #ddd;
	background: #ebf2fb;
	background: #ebf2fb78;
}

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

.routing-graph{position:relative;padding:30px;height:800px;}
.routing-graph .server{position:absolute;width:80px;height:80px;background:#dee7ee;border:2px solid #89969f;border-radius:4px;margin-top:40px;}
.routing-graph .page{position:absolute;width:116px;height:140px;background:#b8c5d0;border:4px solid #b8c5d0;border-top:14px solid #b8c5d0;border-radius:4px;margin-top:40px;}
.routing-graph .server > label,
.routing-graph .page > label{position:absolute;width:100%;text-align:center;color:#454d58;transform:translateY(-30px);font-weight:bold;}
.routing-graph .page > label{transform:translateY(-44px);}
.routing-graph .page > .buttons{position:relative;display:block;transform:translate(2px,-9px);width:12px;}
.routing-graph .page > .buttons::before{position:absolute;display:block;content:"";background:#f6f8f9;border:2px solid #f6f8f9;border-radius:50%;left:0;}
.routing-graph .page > .buttons::after{position:absolute;display:block;content:"";background:#f6f8f9;border:2px solid #f6f8f9;border-radius:50%;right:0;}
.routing-graph .page > .inner{background:#f6f8f9;height:100%;border-radius:3px;}

.routing-graph .server .arrow-down{position:absolute;top:100%;left:calc(50% - 1px);height:50px;border:1px solid #89969f;}
.routing-graph .server .arrow-down::before{position:absolute;display:block;content:"";background:white;border:2px solid #89969f;width:2px;height:2px;border-radius:50%;transform:translate(-3px,-3px);}
.routing-graph .server .arrow-down::after{position:absolute;display:block;content:"";bottom:0;left:50%;border:solid transparent;height: 0;width: 0;border-top-color: #89969f;border-width: 3px;transform:translate(-3px,6px);}
.routing-graph .server .arrow-right{position:absolute;left:100%;top:calc(50% - 1px);width:50px;border:1px solid #89969f;}
.routing-graph .server .arrow-right::before{position:absolute;display:block;content:"";background:white;border:2px solid #89969f;width:2px;height:2px;border-radius:50%;transform:translate(-3px,-3px);}
.routing-graph .server .arrow-right::after{position:absolute;display:block;content:"";right:0;top:50%;border:solid transparent;height: 0;width: 0;border-left-color: #89969f;border-width: 3px;transform:translate(6px,-3px);}

.routing-graph .html{position:absolute;display:inline-block;padding:20px;}

.routing-graph .description-right{position:absolute;left:calc(100% + 20px);}
.routing-graph .description-right.long-150{width:150px;}
.routing-graph .description-right.long-200{width:200px;}
.routing-graph .description-right.long-300{width:300px;}
.routing-graph .description-right p{font-size: .8rem;line-height:1.2rem;}

.routing-graph .vertical-connector{position:absolute;border:1px solid #89969f;}

.routing-graph .line-left.long-10,
.routing-graph .line-right.long-10{width:10px;}
.routing-graph .line-left.long-100,
.routing-graph .line-right.long-100{width:100px;}
.routing-graph .line-left.long-200,
.routing-graph .line-right.long-200{width:200px;}
.routing-graph .line-left.long-300,
.routing-graph .line-right.long-300{width:300px;}

.routing-graph .line-top.long-100,
.routing-graph .line-bottom.long-100{height:100px;}
.routing-graph .line-top.long-200,
.routing-graph .line-bottom.long-200{height:200px;}

.routing-graph .line-right + .description-right{bottom:calc(50% + 14px);}

.routing-graph .line-left{position:absolute;right:100%;top:calc(50% - 1px);width:50px;border:1px solid #89969f;}
.routing-graph .line-left::before{position:absolute;display:block;content:"";right:0;background:white;border:2px solid #89969f;width:2px;height:2px;border-radius:50%;transform:translate(3px,-3px);}
.routing-graph .line-right{position:absolute;left:100%;top:calc(50% - 1px);width:50px;border:1px solid #89969f;}
.routing-graph .line-right::before{position:absolute;display:block;content:"";background:white;border:2px solid #89969f;width:2px;height:2px;border-radius:50%;transform:translate(-3px,-3px);}
.routing-graph .page .line-left{right:calc(100% + 3px);}
.routing-graph .page .line-right{left:calc(100% + 3px);}
.routing-graph .line-bottom{position:absolute;top:calc(100% + 2px);left:calc(50% - 1px);height:50px;border:1px solid #89969f;}
.routing-graph .line-bottom::before{position:absolute;display:block;content:"";background:white;border:2px solid #89969f;width:2px;height:2px;border-radius:50%;transform:translate(-3px,-3px);}

.routing-graph .line-right.arrow::after{position:absolute;display:block;content:"";right:0;top:50%;border:solid transparent;height: 0;width: 0;border-left-color: #89969f;border-width: 3px;transform:translate(6px,-3px);}
.routing-graph .line-left.arrow::after{position:absolute;display:block;content:"";left:0;top:50%;border:solid transparent;height: 0;width: 0;border-right-color: #89969f;border-width: 3px;transform:translate(-6px,-3px);}
.routing-graph .line-bottom.arrow::after{position:absolute;display:block;content:"";bottom:0;left:50%;border:solid transparent;height: 0;width: 0;border-top-color: #89969f;border-width: 3px;transform:translate(-3px,6px);}

.routing-graph .group{position:absolute;top:0;}

.inner .section{display:flex;height:50%;padding:12px;}
.inner .section-graph-bars{}
.inner .section-graph-bars > .bar{display:inline-block;height:100%;flex-grow:1;background:#b8c5d0;bottom:0;align-self:flex-end;border-radius:1px;}
.inner .section-graph-bars > .bar + .bar{margin-left:2px;}
.inner .section-graph-lines{}
.inner .section-graph-lines > .bar{position:relative;display:inline-block;height:100%;flex-grow:1;background:#b8c5d0;bottom:0;align-self:flex-end;border-radius:1px;}
.inner .section-graph-lines > .bar::before{position:absolute;display:block;content:"";background:white;border:2px solid #89969f;width:0;height:0;border-radius:50%;left:50%;transform:translate(-2px,-2px);}
.inner .bar:nth-child(1){height:20%;}
.inner .bar:nth-child(2){height:46%;}
.inner .bar:nth-child(3){height:60%;}
.inner .bar:nth-child(4){height:18%;}
.inner .bar:nth-child(5){height:100%;}
.inner .bar:nth-child(6){height:94%;}
.inner .bar:nth-child(7){height:60%;}
.inner .bar:nth-child(8){height:94%;}
.inner .bar:nth-child(9){height:20%;}
.inner .bar:nth-child(11){height:90%;}
.inner .bar:nth-child(13){height:70%;}
.inner .bar:nth-child(14){height:40%;}
.inner .section-paragraph-v1{flex-direction:column;}
.inner .section-paragraph-v1 > .line{display:inline-block;width:100%;flex-grow:1;background:#b8c5d0;margin:3px auto;}
.inner .section-paragraph-v1 > .line:nth-child(1){width:60%;background:#89969f;}
.inner .section-paragraph-v1 > .line:nth-child(3){width:80%;}
.inner .section-paragraph-v1 > .line:nth-child(4){width:60%;}
.inner .section-overview{}
.inner .section-overview > .square{display:inline-block;top:40%;width:25%;flex-grow:1;background:#b8c5d0;bottom:0;align-self:center;border-radius:2px;color:#89969f;text-align:center;font-size:0.9rem;font-weight:bold;padding:2px 0;}
.inner .section-overview > .square + .square{margin-left:2px;}
.inner .section-calendar{flex-direction:column;}
.inner .section-calendar > .line{display:inline-block;width:30%;flex-grow:1;background:#89969f;margin:0 0 3px 1px;}
.inner .section-calendar > .calendar{display:flex;flex-direction:row;flex-wrap:wrap;flex-grow:4;}
.inner .section-calendar > .calendar > .square{display:inline-block;width:calc(100% * 1/7);background:#b8c5d0;margin-bottom:2px;border:1px solid #ffffff;}
.inner .section-graph-pie{}
.inner .section-graph-pie > .pie{width:32px;height:32px;background:#89969f;border-radius:50%;overflow:hidden;}
.inner .section-graph-pie > .pie::before{display:block;content:"";width:16px;height:16px;background:#b8c5d0;}
.inner .section-graph-pie > div:not(.pie){display:flex;flex-direction:column;width:calc(100% - 32px);}
.inner .section-graph-pie .line{display:inline-block;flex-grow:1;background:#b8c5d0;margin:0 0 8px 8px;}
.inner .section-graph-pie .line:nth-child(1){background:#89969f;}

.routing-graph .routingbird{margin-top:210px;}
.routing-graph .group.trackers{margin-left:414px;margin-top:140px;}
.routing-graph .server.orig{margin-left:16px;}
.routing-graph .dist-arrow{position:absolute;height:422px;margin-top:74px;border-left:2px solid #89969f;}
.routing-graph .tracker-landingtrack{margin-top:0px;margin-left:100px;}
.routing-graph .tracker-volum{margin-top:210px;margin-left:100px;}
.routing-graph .gugel-analytics{margin-top:420px;margin-left:100px;}

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.index{background: url('/static/images/referalmole.png') no-repeat bottom center, linear-gradient(to bottom,#d1efff,#fff);background-size: auto, auto;min-height: 1000px;background-size: 100% auto, cover;}
body > main.login {padding-top: 20px;background: linear-gradient(to top, #8a9fa7 0%,#385c69 100%);}
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);}

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;text-align: left;}
section.public .check{position:absolute;right: 1%;top: 50%;transform: translate(-50%, -50%);color: #39cc89;}
@media(max-width:700px){
	section.public{margin-top: 50px;}
}