/* Fonera WEB UI */
/* 07.09.15 */

/* =============================================================================
   Reset
   ========================================================================== */
   
* { margin: 0; padding: 0; }
html, body, object, iframe, h1, h2, h3, h4, select,h5, h6, p, blockquote, pre, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, input, table, caption, tbody, tfoot, thead, tr, th, td, textarea {
	margin: 0;
	padding: 0;
	border: 0;
	}
ul {list-style-type: none;}

/* =============================================================================
   HTML5 element display
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block;}
audio[controls], canvas, video { display: inline-block; *display: inline; *zoom: 1;}

video{width: 100%; height: 100%;}

a {color: inherit;}
/* =============================================================================
  Utility
   ========================================================================== */

html { font-size: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
::-moz-selection { background: #26d07c; color: #fff; text-shadow: none; }
::selection { background: #26d07c; color: #fff; text-shadow: none; }
b, strong { font-weight: bold; }
small { font-size: 85%; display:block;}
img { border: 0; -ms-interpolation-mode: bicubic; }
button, .button {cursor: pointer;border: none;	}
textarea { overflow: auto; vertical-align: top; }
table { border-collapse: collapse; border-spacing: 0; }
.alignLeft {text-align:left;}
.alignRight {text-align:right;}
.alignCenter {text-align:center;}
.displayNone {display:none;}
.block {display:block;}
.clr {clear:both; width:100%;}
.left {float:left;}
.right {float:right;}

.green {color: green;}
.red {color: red;}
.orange {color: orange;}

* {box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box;-webkit-box-sizing: border-box;}

/* =============================================================================
   Layout
   ========================================================================== */

.translate-cloak {
  display: none !important;
}

body {
	background:#fff;
	font-family:Helvetica, "Myriad Pro", Arial, Tahoma, Geneva, sans-serif;
	text-align:center;
	font-size:100%;
	color:#333;
	margin:0; padding:0;
	position:relative;
}
html, body {height:100%;-webkit-font-smoothing: antialiased; margin:0;}

.wrap {max-width:565px; height: auto !important; margin:0; text-align: left;}

.main {height: auto !important; margin-bottom: 70px; margin-left: 135px; margin-right: 75px; max-width: 1145px;}

p, form {font-family: "squaresanspro-regular"; font-size: 1.1em; margin-bottom: 20px; color:#666;}

h1 {font-family: "squaresanspro-medium"; font-size:2.5em; color:#4a4a4a; font-weight: 400; line-height: 40px; /*  background: url("../images/bgTitle.png") no-repeat left bottom; */}
h2 {font-family: "squaresanspro-medium"; font-size:1.3em; color:#4a4a4a; font-weight:400; letter-spacing:-1px; margin:7px 0;}
h3 {font-family: "squaresanspro-medium"; font-size:1.9em; color:#4a4a4a; font-weight:400; letter-spacing:-1px; background: url("../images/bgTitle.png") no-repeat -15px bottom; text-align: left; padding-bottom: 17px; margin-bottom: 30px; line-height: 30px;}
h4 {font-family: "squaresanspro-regular"; font-size:1.2em; color:#4a4a4a; font-weight: 400; background: #f2f2f2; display: block; width:100%; padding:10px 20px;}

/* =============================================================================
   Login Page
   ========================================================================== */

.login .wrap { margin-left: 0px; max-width:750px; margin-top: 100px;}
.login h1 {font-size: 4em; background: url("../images/bgTitle.png") no-repeat left bottom; line-height: 60px; padding-bottom: 30px;}
.login h1, body.login h2 {font-family: "squaresanspro-light";}
.login .logo {float: left; padding: 0; margin:10px 0 0 70px;}
.login .logo img {max-width: 100%;}
.login .error {width: 270px;}
.login a {font-size: 1.1em;}

.login form {font-size: 95%;}  

.loginTitle, .loginForm {display: inline-block;width: 45%; vertical-align: bottom;}
.loginTitle {padding-right: 30px; margin-right: 30px; border-right: 1px dotted #c2bdb7;}

/* =============================================================================
   Leftbar
   ========================================================================== */

.leftBar {background: #1b1b1b; width:65px; height: 100% !important; position: fixed; top: 0; left: 0; z-index: 99999;}
.logo {background: #fff; padding: 10px 0; text-align: right;}
.logo img {max-width: 80%;} 

.overlayMenu {width: 100%; height: 100%; left: 205px; display: none; position: fixed;} 

.menu a {font-size: .7em; margin-top:20px; color: #767676; font-weight: bold; text-decoration: none; display: block; padding: 40px 0 0 0;}
.menu a:hover, .menu a.active {color: #fff;}
a.ove, a.int, a.wif, a.loc, a.adm {background: url("../images/assets.png") no-repeat;}

a.ove {background-position: -277px -70px;}
a.int {background-position: -60px -70px;}
a.wif {background-position: -133px -70px;}
a.loc {background-position: -208px -70px;}
a.adm {background-position: 7px -70px;}

a:hover.ove, a.ove.active {background-position: -277px 1px;}
a:hover.int, a.int.active {background-position: -60px 1px;}
a:hover.wif, a.wif.active {background-position: -133px 1px;}
a:hover.loc, a.loc.active {background-position: -208px 1px;}
a:hover.adm, a.adm.active {background-position: 7px 1px;}

/* =============================================================================
   Header
   ========================================================================== */

.header {display:block; min-height:60px;}
.header .languageSelector, .header .adminMenu {float: right; margin-right:75px; margin-top:10px; max-width: 1280px;}
.adminMenuButton {cursor:pointer; background:#eee url("../images/bgAdminSelect.png") no-repeat right; border:1px solid #ccc; font-size: .9em; width: 155px; display: block; text-decoration: none;}
.adminMenuButton span {display: block; padding: 10px 35px;}
.dropdown {display: none; background:#fff; padding: 10px 15px; text-align:left; border:1px solid #ccc; font-size:.8em; width: 155px; line-height: 30px; }
.dropdown a {text-decoration: none; display:block;}

.MobMenu {display: none; width: 170px; text-align: left; float: left; margin-top: 10px;}
.MobMenu img.iconMenu, .activePage {display: inline-block; vertical-align: middle; font-size: .75em; color: #757575;}
.activePage {border-left: 1px solid #757575; padding: 10px 0 10px 37px;}
.MobMenu img.iconMenu {cursor: pointer;}

.overview, .wifi, .admin, .internet {background:url("../images/assets.png") no-repeat;}

.overview {background-position: -293px -72px;}
.wifi {background-position: -145px -75px; padding-left: 40px;}
.admin {background-position: -3px -74px;padding-left: 40px;}
.internet {background-position: -73px -75px;}
.network {background:url("../images/assetsNetwork.png") no-repeat;}

.tooltip {display: inline; position: relative;}
.tooltip:hover:after {
    background: #333;
    border-radius: .5em;
    bottom: 1.35em;
    left: -200px;
    color: #fff;
    content: attr(title);
    display: block;
    padding: 10px;
    position: absolute;
    text-shadow: 0 1px 0 #000;
    white-space: nowrap;
    z-index: 98;
    text-shadow:none;
}
.tooltip:hover:before {
    border: solid;
    border-color: #111 transparent;
    border-color: rgba(0,0,0,.8) transparent;
    border-width: .4em .4em 0 .4em;
    bottom: 1em;
    content: "";
    display: block;
    left: 2em;
    position: absolute;
    z-index: 99;
}

/* =============================================================================
   Main
   ========================================================================== */

.infoTable {margin-top: 30px;}
.row {overflow:auto; padding: 10px 0px; margin-top: 30px;}
.col1, .col2 {display: inline-block;vertical-align: top; height: auto;}
.col1 {width:20%; text-align: center;}
.col2 {width:75%; text-align: left;}

.radioCustom div {display: inline;} 

div.enabled {background: url("../images/bgEnable.png") no-repeat center center; margin-top: -3px; display: inline-block; font-size: .8em; color:#fff; font-weight: bold; float: right; width: 200px; height: 31px; cursor:pointer; line-height: 30px; padding:0 25px;}
div.disabled {background: url("../images/bgDisable.png") no-repeat center center; margin-top: -3px; display: inline-block; font-size: .8em; color:#fff; font-weight: bold; float: right; width: 200px; height: 31px; cursor:pointer; line-height: 30px; padding:0 25px; text-align: right;}

.info {background:#f2f2f2; padding: 20px 15px; margin:40px auto;}

#tabs ul {display: block; overflow: auto; margin-bottom: 20px; font-family: "squaresanspro-medium"; font-size:1.4em; color:#4a4a4a; font-weight:400; }
#tabs ul li {float: left; margin: 0; border: 0; border-bottom: 1px solid #bdb5ae;}            
/* #tabs ul li:first-child a {border-left: 0;} */
#tabs .ui-tabs-active {border:1px solid #bdb5ae; border-bottom: 0;}
#tabs ul li.ui-tabs-active a {border-bottom: 0;}
#tabs ul li.ui-tabs-active a {color:#ffbc2a;}
#tabs ul li a {display: block; text-align: center; width: auto; color: #7d7d7d; text-decoration: none; padding: 10px 45px; min-width: 105px;}

table {width:100%; border:0; color: #4a4a4a; font-size: .9em;}
table td { padding: 15px 20px;}
table tr {border-bottom:1px solid #d5d5d5;}
table td:first-child {background:#f2f2f2; width: 40%; border-right:1px solid #d5d5d5; color: #000;}

.accordion h3 {background:#ffb546 url("../images/accordionAssets.png") no-repeat 100% 0px; color: #fff; font-size: 1.3em; padding: 10px 20px; margin:0; border-bottom:1px solid #fff;}
.accordion h3.disabled {background:#ccc url("../images/accordionAssets.png") no-repeat 100% 0px;}

.accordion h3.disabled.ui-state-active {background:#ccc url("../images/accordionAssets.png") no-repeat 100% -70px;}
.accordion h3.ui-state-active {background:#ffb546 url("../images/accordionAssets.png") no-repeat 100% -70px;}

/* =============================================================================
   Modal
   ========================================================================== */
   
.overlay, .overlayWhite {position:fixed; top:s 0; left: 0; width: 100%; height: 100%; z-index:99996; opacity:.75; -moz-opacity: 0.75; filter: alpha(opacity=75);}
.overlay {background: #000;}
.overlayWhite {background: #fff; }
.overlayWhite img {position: absolute; top:40%; left: 40%;}

.modal {text-align:center; background:#fff; position: fixed; top: 25%; left: 30%; width: 40%; z-index:99997; padding-bottom: 30px;}
.closeIco {position:absolute; top:0px; right:10px; background:url("../images/closeIco.png") no-repeat center center; height:45px; width:45px; cursor:pointer; font-size: 2em; font-weight: bold; color: #fff;}

.modal h2 {background: #00aec3; text-align: center; color: #fff; padding: 10px; margin-bottom: 40px; font-weight: bold; margin-top: 0;}
.modal a {background: #00aec3; color: #fff; display: inline-block; padding: 10px 40px; text-decoration: none; margin: 20px auto;}
.modal p { margin: 0 12px;}

/* =============================================================================
   Forms
   ========================================================================== */

.success, .error {color: #fff; font-size: .85em; padding:10px 20px;}
.error {background:#ff6e3b;}
.success {background:#84cd5d;}

form {margin:40px 0; }
label {margin:6px 0px; max-width: 270px;display: block; font-size: .8em;}
label small {display: inline; float: right;}
fieldset {margin-top:20px;}
fieldset.col {display: inline-block; width:47%; vertical-align: bottom; margin-right: 10px;}

input[type="checkbox"] {margin:0 5px; }
input[type="radio"] {margin:0 5px 0 25px;}
/* input[type="radio"] {margin:0 5px 0 25px; -webkit-appearance: none; -moz-appearance: none; appearance: none; width:20px; height:20px; border:1px solid #ff9900;}
input [type="radio"]:checked {background: red;} */
select {
  border:1px solid #ccc;
  color: #757575;
  width:auto;
  min-width: 270px;
  max-width: 270px;
  letter-spacing: -1px;
  -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px;
  font-size:.9em;
  display:block;
  padding:8px 10px; 
  margin:10px 0;
  height:40px;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background:#fff url("../images/bgSelect.png") no-repeat right;
}

input:disabled, select:disabled  {background: #eee;}

input:focus, select:focus { -webkit-box-shadow: 0 0 3px 1px #95d5f9; -moz-box-shadow: 0 0 3px 1px #95d5f9; box-shadow: 0 0 3px 1px #95d5f9;}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"] {
  border:1px solid #ccc;
  color: #757575;
  width:auto;
  min-width: 270px;
  letter-spacing: -1px;
  -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px;
  font-size:.9em;
  display:block;
  padding:8px 10px; 
  margin:10px 0;
}


input[type="submit"], a.editButton {
  background: #f1c509; /* Old browsers */
  background: -moz-linear-gradient(left,  #f1c509 0%, #eba908 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f1c509), color-stop(100%,#eba908)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left,  #f1c509 0%,#eba908 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left,  #f1c509 0%,#eba908 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left,  #f1c509 0%,#eba908 100%); /* IE10+ */
  background: linear-gradient(to right,  #f1c509 0%,#eba908 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1c509', endColorstr='#eba908',GradientType=1 ); /* IE6-8 */
  border:0px;
  color:#fff;
  display:block;
  text-align:center;
  font-size: .9em;
  min-width: 270px;
  padding:13px 25px; 
  cursor:pointer;
  text-decoration:none;
  transition:background 0.5s;
  -moz-transition:background 0.5s; 
  -webkit-transition:background 0.5s;
  -o-transition:background 0.5s; 
  -webkit-appearance:none;
  margin:30px 0;
}

input[type="submit"]:disabled {background: #ccc; border: 1px solid #666;}

input[type="submit"]:hover {opacity: 0.8; filter: alpha(opacity=80);}

.hiddenOptions {}

.actionBox {background: #eee; border:1px solid #ccc; padding: 20px 15px; margin:40px auto; overflow: auto;}
.actionBox .left {width:50%; font-size: .9em;}
.actionBox .actionButton {margin: 0;}
.actionBox p {margin: 5px 0;}

.actionButton, a.editButton {display: inline-block; margin: 10px 0; width: 45%;}
.actionButton a {display:block; width: auto; min-width: 160px; background: #00aec3 url("../images/buttonsAssets.png") no-repeat; text-decoration: none; color: #fff; padding: 13px 10px 15px 85px;}

.actionButton a.reboot {background-position: 0 0;}
.actionButton a.restore {background-position: 0 -42px;}
.actionButton a.update {background-position: 0 -88px;}

/* Custom Select */

input[type=checkbox].css-checkbox { position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;}
input[type=checkbox].css-checkbox + input + label.css-label {padding-left:24px; height:19px; display:inline-block; line-height:19px; background-repeat:no-repeat; background-position: 0 0; vertical-align:middle; cursor:pointer;}
input[type=checkbox].css-checkbox:checked + input + label.css-label {background-position: 0 -19px;}
label.css-label { background-image:url(../images/bgCheckbox.png); -webkit-touch-callout: none;-webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

.radioCustom label {display: inline-block;  cursor: pointer;  position: relative; padding-left: 30px; margin-right: 15px; font-size: 1em;}

.radioCustom  input[type=radio] {display: none;}
.radioCustom  label:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  position: absolute;
  left: 0;
  bottom: 1px;
  background-color: #fff;
  box-shadow: inset 0px 2px 3px 0px #ffbc2a, 0px 1px 0px 0px #ffbc2a;
}

.radioCustom label:before { border-radius: 10px;}
.radioCustom  .checkbox label {margin-bottom: 10px;}
.checkbox label:before {border-radius: 3px;}
input[type=radio]:checked + label:before {
    content: "\2022";
    color: #ffbc2a;
    font-size: 50px;
    text-align: center;
    line-height: 16px;
}


/* =============================================================================
   Footer
   ========================================================================== */

.footer {display:block; width:100%; background:#d4d3d3; color:#999; margin:0px; height:auto; padding-bottom:20px; overflow:auto;}

.footer small {padding-top:20px; text-align:left; display:block;}

ul.footerLinks {margin:5px 0;}
ul.footerLinks li {display:inline-block; margin-right:20px;}
ul.footerLinks li a {color:#999; text-decoration:none;}
ul.footerLinks li a:hover {color:#333;}

a.stayTuned {display:block; float:left; background:#666 url("../images/emailIco.png") no-repeat right; color:#fff; text-decoration:none; font-size:.8em; padding:7px 35px 7px 7px; margin-top:2px;}
a:hover.stayTuned {background:#333 url("../images/emailIco.png") no-repeat right;}

.socialLinks {float:left; margin-left:40px;}
a.fb, a.tw, a.vm, a.gg {display:inline-block; width:31px; height:31px; margin:0 5px;}
a.fb {background-position: -123px -131px;}
a.tw {background-position: -48px -131px;}
a.vm {background-position: -11px -131px;}
a.gg {background-position: -86px -131px;}
a:hover.fb {background-position: -123px -161px;}
a:hover.tw {background-position: -48px -161px;}
a:hover.vm {background-position: -11px -161px;}
a:hover.gg {background-position: -86px -161px;}

.copy {display:block; float:right; font-size:.9em; margin-left:30px; line-height:30px;}


@font-face {
    font-family: 'squaresanspro-light';
    src: url('../fonts/pfsquaresanspro-light-webfont.eot');
    src: url('../fonts/pfsquaresanspro-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/pfsquaresanspro-light-webfont.woff') format('woff'),
         url('../fonts/pfsquaresanspro-light-webfont.ttf') format('truetype'),
         url('../fonts/pfsquaresanspro-light-webfont.svg#pf_square_sans_prolight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'squaresanspro-medium';
    src: url('../fonts/pfsquaresanspro-medium-webfont.eot');
    src: url('../fonts/pfsquaresanspro-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/pfsquaresanspro-medium-webfont.woff') format('woff'),
         url('../fonts/pfsquaresanspro-medium-webfont.ttf') format('truetype'),
         url('../fonts/pfsquaresanspro-medium-webfont.svg#pf_square_sans_promedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'squaresanspro-regular';
    src: url('../fonts/pfsquaresanspro-regular-webfont.eot');
    src: url('../fonts/pfsquaresanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/pfsquaresanspro-regular-webfont.woff') format('woff'),
         url('../fonts/pfsquaresanspro-regular-webfont.ttf') format('truetype'),
         url('../fonts/pfsquaresanspro-regular-webfont.svg#pf_square_sans_proregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'squaresanspro-thin';
    src: url('../fonts/pfsquaresanspro-thin-webfont.eot');
    src: url('../fonts/pfsquaresanspro-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/pfsquaresanspro-thin-webfont.woff') format('woff'),
         url('../fonts/pfsquaresanspro-thin-webfont.ttf') format('truetype'),
         url('../fonts/pfsquaresanspro-thin-webfont.svg#pf_square_sans_prothin') format('svg');
    font-weight: normal;
    font-style: normal;

}
/* =============================================================================
                                                          David G. Nogueira 2014
   ========================================================================== */