body{
  position: absolute;
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: row;}

div{
  position: relative;}

label{
  text-transform: capitalize; }
label.full{
  width: 100%;
  text-align: left;}

.logo{
  background: url('../images/logo.svg') no-repeat center;}

.nexa{
  font-family:'Nexa', sans-serif;}

.nocursor{
  cursor: default !important;}

input, textarea, select, fieldset{
  color: #676A6C;}
input[disabled],input.disabled,select[disabled],select.disabled{
  background-color: #F5F5F5;}
input[type=radio]{
  margin-right: 0.5rem;}
table{
  width: 100%;}
button{
  margin-right: 2rem}
input.search {border-radius: 0;}
.bold{font-weight: bold; color: #676A6C;}

/* -- UTILS ------------------------------------------------------- */
.u-full{
  width: 100%;
  height: 100%;
  pointer-events: none;}
.u-center{
  display: flex;
  align-items: center;
  justify-content: center;}
.u-first{
  margin-left: 0}
.u-inner:before{
  content: "";
  display: table;
  clear: both;}
.u-inner:after{
  content: "";
  display: table;
  clear: both;}
.u-initial{
  position: initial;}
.u-text{
  display: flex;
  justify-content: center;
  align-items: center; }
.inline{display: inline-block;}
.algn-right{text-align: right;}
.algn-center{text-align: center;}

/* -- LAYOUT ------------------------------------------------------ */
body.show .navigation{
  transform:translate(0,0);}
.navigation{
  transform:translate(-300px,0);
  height: 100%;
  display: block;
  position: absolute;
  z-index: 20;
  transition: .3s;
  flex: 0 0 275px;
  background-color: #EDEDED;
  border-right: solid 2px #E2E2E2;
  width: 275px;}
.navigation .header{
  width: 100%;
  height: 150px;
  background:linear-gradient(90deg,#FF6C22,#FF4920);}
.navigation .header .logo{
  position: absolute;
  background-size: 100%;
  top:-20px;}
.navigation .header .mail{
  text-align: center;
  padding-top: 100px;
  color: white}
.navigation .nav {
  display: block;
  height: 40px;
  padding:5px;
  padding-left:30px;
  cursor: pointer;
  color: #AFAFAF;
  text-align: left;}
.navigation .nav .icon {
  vertical-align: middle;
  font-size: 30px;
}
.navigation .nav span {
  vertical-align: middle;
  font-size: 1.8rem;
  margin-left:8px;
  line-height: 40px;
  font-weight: bold;
  color: inherit;}
.navigation .nav:hover {
  background-color: #E2E2E2;}
.navigation .nav:hover span{
  color: #6C6F71;}
.navigation .nav:hover .icon{
  color: #6C6F71;}

body.view .navigation,
.hardware .navigation,
.dealer .navigation {
  background-color: #434343;}

body[class='admin'] .Dashboard,
body[class='admin'] .Home,
body.admin.account .My.Profile,
body.admin.accounts .Accounts,
body.admin.docs .Documents,
body.admin.products .Products,
body.admin.serialnumbers .Serial,
body.admin.elearning .E-learning{
  background-color: #E2E2E2;
  color: #6C6F71;}

.admin.accounts:not(.users):not(.clients):not(.drones):not(.flights) .subnav .nav.Company,
.admin.accounts.users .subnav .nav.Users,
.admin.accounts.clients .subnav .nav.Clients,
.admin.accounts.drones .subnav .nav.Drones,
.admin.accounts.flights .subnav .nav.Flight.statistics{
  color: #676A6C;
  border-bottom: solid #FF6D22 2px;
  cursor: default;
  pointer-events: none;}

body[class='admin view'] .Dashboard,
body[class='admin view'] .Home,
body.view.admin.account .My.Profile,
body.view.admin.accounts .Accounts,
body.view.admin.docs .Documents,
body.view.admin.products .Products,
body.view.admin.serialnumbers .Serial,
body.view.admin.elearning .E-learning,
body[class='hardware view'] .Dashboard,
body.hardware.account .Account,
body.hardware.drones .My.products,
body.hardware.elearning .E-learning,
body.hardware.support .Support,
body[class='dealer view'] .Dashboard,
body.dealer.account .Account,
body.dealer.clients .My,
body.dealer.docs .Sales,
body.dealer.support .Support,
body.dealer.servicecenter .Service.center,
body.view .navigation .nav:hover,
body.view .navigation .nav:hover span,
body.view .navigation .nav:hover svg,
.dealer .navigation .nav:hover,
.hardware .navigation .nav:hover,
.dealer .navigation .nav:hover span,
.hardware .navigation .nav:hover span,
.dealer .navigation .nav:hover svg,
.hardware .navigation .nav:hover svg{
  color: white !important;
  background-color: #383838;}

body.account:not(.company):not(.users):not(.drones) .subnav .nav.My,
body.account.users .subnav .nav.User,
body.account.drones .subnav .nav.Drones,
body.account.company .subnav .nav.Company,
body.clients:not(.users):not(.drones):not(.dealers):not(.flights) .subnav .nav.Company,
body.clients.users .subnav .nav.Users,
body.clients.drones .subnav .nav.Drones,
body.clients.flights .subnav .nav.Flight.statistics{
  color: #676A6C;
  border-bottom: solid #FF6D22 2px;
  cursor: default;
  pointer-events: none;}

.content{
  flex-grow:1;
  max-width: 100%;}
.content .header{
  height: 60px;
  background-color: white;
  border-bottom: solid 1px #E2E2E2;
  text-align: right;
  line-height: 60px;}
.content .header .logout{
  cursor: pointer;
  font-size: 16px;
  font-weight:bold;
  margin-right:20px;}
.content .header .logout span{
  margin-left:4px;}
.content .headTitle{
  height: 90px;
  background-color: white;
  border-bottom: solid 2px #E2E2E2;
  line-height: 90px;
  font-family:'Nexa', sans-serif;
  font-weight: bold;
  font-size: 30px;
  padding-left:20px;}
.content .header .button-primary.view-type{
  position: absolute;
  left: 7rem;
  top: 1rem;
}
.content .header .menu{
  cursor: pointer;
  transition:.3s;
  transform:translateX(0px);
  display: block;
  z-index: 20;
  position: absolute;
  left: 1rem;
  top: 1rem;
  width: 50px;
  height: 38px;
  background: url(/images/menu.svg);
  background-position: center;
  background-size: contain;}
body.show .content .header .menu{
  transform:translateX(275px);}
body .overlay {
  transition:opacity .3s;
  z-index: -1;
  position: absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  opacity: 0;
  background-color:#000;}
body.show .overlay {
  opacity: .6;
  z-index: 20;}
.elements{
  padding:2%;}
.elements:before{
  content: "";
  display: table;
  clear: both;}
.elements:after{
    content: "";
    display: table;
    clear: both;}

/* -- AUTH -------------------------------------------------------- */
body.auth-body{display: block;}
#alert-message-fail-login{
  color: #FF6D22;
  margin-bottom: 20px;
}
.auth{
  position: absolute;
  height: 100%;
  text-align: center;}
.auth>div{
  height: 100%;}
.auth h2{
  font-size: 3.5rem;}
.auth h6{
  margin-bottom: 15px;
  font-size: 1.8rem;
  margin-top: -21px;}
.auth a{
  font-size: 1.2rem}

.auth .hero{
  display: none;
  background:linear-gradient(90deg,#FF6C22,#FF4920);}
.auth .hero .logo{
  background: none;}
.auth .hero .inline{
  color: #fff;
  font-size: 14px;
  line-height: 17px;
  width: 56%;
  text-align: left;
  display: block;
  margin: 10px auto 0; }
.auth .hero a {
  color: #fff;
  font-size: 14px;
  line-height: 17px;
  text-align: left;
  margin-top: 0;
  margin-bottom: 0;
  text-decoration: underline;
  pointer-events: all;}
.auth .hero .arrow{
  position: absolute;
  top: 0;
  left: 51%;
  background: url('../images/arrow.svg') no-repeat center;
  background-size: 5%;}
.auth a {
  text-align: right;
  margin-top:-10px;
  margin-bottom:10px;}
.auth.lost a {
  text-align: left;
  margin-top: 5px}
.auth .forms {
  padding: 0 4rem; }
.auth-body .banner {
  background-color: #fff;
  font-size: 12px;
  text-align: left;
  padding: 3rem;
  display: block;
  align-items: center;
  z-index: 1; }
.auth-body .banner .inline {margin-bottom: 0;}
.auth-body .banner .inline a {color: #FF6D22;}
.auth-body .banner .button-primary {
  display: block;
  width: 100px;
  margin: 15px auto 0;
  padding: 8px 14px;
  white-space: nowrap;
  color: #FFF;
  text-align: center;
  background-color: #FF6D22;
  border-color: #FF6D22;
  border-radius: 6px; }
.error-body {display: block;}
.error-banner {
  position: relative;
  height: 120px;
  background:linear-gradient(90deg,#FF6C22,#FF4920); }
.error-copntent {
  width: 100%; }
.error-banner .logo {
  background: url(../images/logo.svg) no-repeat center; }
.error404 {
  text-align: center;
  max-width: 400px;
  margin: 0 auto;
  padding-top: 40px;
}
.error404 button:last-child {
  margin-right: 0;
}
@media (min-height: 700px) {
  .auth-body .banner {
    position: absolute; }
}
@media (min-width: 1000px) {
  .navigation {
    transform:translate(0,0);
    height: auto;
    position: static;
    z-index: 0;}
  .content .header .button-primary.view-type { left: 1rem; }
  .content .header .menu{
    display: none;}
  .auth .hero{
    display: block;}
  .auth .forms {
    margin: auto;}
  .auth-body .banner{
    display: flex;
    padding: 1rem 3rem;}
  .auth-body .banner .button-primary{
    display: inline-block;
    width: initial;
    margin: 0 0 0 20px; }
}