@charset "utf-8";
/* CSS Document */

:root {
  --orange-1: #cc3700;
  --orange-2: #D56740;
  --orange-3: #992900;
  --altorange-1:#E3250B;
  --altorange-2:#FF4026;
  --altorange-3:#D90B1C;
  --blue-1: #1f04ba;
  --blue-2: #2805F0;
  --blue-3: #1B03A0;
  --altblue-1: #054f77;
  --altblue-2: #317091;
  --altblue-3: #032E45;
  --lightblue-1: #4397C4;
  --lightblue-2: #84B4CE;
  --lightblue-3: #1FB4FF;
  --pink-1: #F83170;
  --pink-2: #F97CA4;
  --pink-3: #AB1142;
  --gray-1: #393E41;
  --gray-2: #4C5357;
  --gray-3: #262A2C;
  --gray-4: #B3B9BD;
  --gray-5: #eeeeee;
  --white: #ffffff;
}

html, body {
  font-family: 'Roboto', sans-serif;
  height: 100%;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}

p, span {
  font-weight:400;
}
strong, h3, h4, h5, h6 {
  font-weight:700;
}
h1,h2 {
  font-weight:900;
}
h6 {
  font-size:1.15rem;
}
.fa, .fab, .fal {
  font-size:1.2rem;
}
#topo {
  background-color: var(--lightblue-3);
}

footer {
	background-color:var(--gray-3);

  position: absolute;
  bottom: 0;
	color:#ffffff;
  z-index: 9999;
}
footer > p {
	font-size:1.5vh;
}
footer > a {
	color:#ffffff;
}

/*
* Bootstrap forms
*/
.form-control {
  border-left:solid 5px var(--lightblue-1);
  font-size:1.1rem;

}
.form-control:focus {
  box-shadow: none;
  border:solid 1px var(--orange-2);
  border-left:solid 5px var(--orange-2);
}
.form-group label {
  font-size:1.1rem;
  font-weight: 700;
  color: var(--gray-2);
}
/*
* Bootstrap buttons
*/
.btn-primary {
  background-color:var(--lightblue-3);
  border-color:var(--lightblue-3);
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
  background-color:var(--lightblue-2);
  border-color:var(--lightblue-2);
}
.btn-secondary {
  background-color:var(--orange-1);
  border-color:var(--orange-1);
}
.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus {
  background-color:var(--orange-2);
  border-color:var(--orange-2);
}
.btn-info {
  background-color:var(--altblue-1);
  border-color:var(--altblue-1);
}
.btn-info:hover, .btn-info:active, .btn-info:focus {
  background-color:var(--altblue-2);
  border-color:var(--altblue-2);
}

/*
* ALERT
*/

.alert-warning {
  color:var(--white);
  background-color: var(--altorange-3);
  border-color: var(--altorange-1);
  -webkit-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.15);
  -moz-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.15);
  box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.15);
}

.alert-warning hr {
  border-top-color: var(--altorange-2);
}

.alert-warning .alert-link {
  color: var(--white);
}


/*
* Top navbar
*/

.bg-navbar {
  background-color: var(--altblue-1) !important;
}
.navbar-logo {
  display: inline-block;
  padding: 0.75rem 0 0.75rem 1.5rem;
  font-size: 1.25rem;
  line-height: inherit;
  white-space: nowrap;
}
.navbar {
  padding: .75rem 1rem;
  border-width: 0;
  border-radius: 0;
}

/*
 * Sidebar
 */

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100; /* Behind the navbar */
  padding: 78px 0 0; /* Height of navbar */
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

.sidebar-sticky {
  position: relative;
  top: 0;
  /*height: calc(100vh - 78px);*/
  padding-top: .5rem;
  height:92vh;
  max-height: 100vh;
  /*overflow-x:hidden;
  overflow-y:visible; /* Scrollable contents if viewport is shorter than content. */
}
#teste {
    height:100%;
}
.sidebar {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  position: relative; 
}

/*@supports ((position: -webkit-sticky) or (position: sticky)) {
  .sidebar-sticky {
    position: -webkit-sticky;
    position: sticky;
  }
}*/

.sidebar .nav-link {
  font-weight: 700;
  text-transform: uppercase;
  color:var(--gray-3);
}
.nav-link i {
  color: var(--lightblue-1);
}
.sidebar .nav-link.active {
  color:var(--altblue-2);
}


.nav-sublink i {
  color: var(--gray-4);
}
.nav-sublink > a {
  color:var(--gray-3);
  padding-left:1.5vw;
}
@media screen and (orientation: portrait) {
  .nav-sublink > a {
    padding-left:4.5vh;
  }
}
.nav-sublink > a:hover {
  color:var(--lightblue-3);
  text-decoration:none;
}

.sidebar-heading {
  font-size: .75rem;
  text-transform: uppercase;
}

.sidebar-btn {
  margin:1rem 0 1rem 1rem;
}
/*
 * Content
 */

[role="main"] {
  padding-top: 78px; /* Space for fixed navbar */
  background-color: #eeeeee;
  background-image: url("../img/bg_conexoes_pc.jpg");
  background-attachment:fixed;
  background-position:center;
  background-size:cover;
  background-repeat: no-repeat;
}
@media screen and (orientation: landscape) {
  [role="main"] {
    background-image: url("../img/bg_conexoes.jpg");
  }
	.hide-on-large {
		display:none;
	}
.break-large {
  flex-basis: 100%;
  height: 0;
}  
}
@media screen and (orientation: portrait) {
	.hide-on-mobile {
		display:none;
	}
  .break-mob {
    flex-basis: 100%;
    height: 0;
  }  
}
/*
* Cards
*/
.card {
  -webkit-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.15);
  -moz-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.15);
  box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.15);
}
.card-geral {
  background-color:white;
  color: var(--gray-1);
  border: none;
  border-top: solid 5px;
  border-bottom: solid 1px #eeeeee;
}
.card-geral i {
  font-size:1.5rem;
  color: var(--lightblue-1);
}
.card-financeiro {
  border-top-color: var(--pink-1);
}
.card-outros {
  border-top-color: var(--lightblue-1);
}
.card-suporte {
  border-top-color: var(--altblue-2);
}
.card-secundaria {
  border-top-color: var(--gray-4);  
}
/*
* Icons
*/
.icon-geral, .font-geral {
  color:var(--gray-1);
}
.icon-secundaria, .font-secundaria {
  color:var(--gray-4);
}
.icon-financeiro, .font-financeiro {
  color:var(--pink-1);
}
.icon-outros, .font-outros {
  color:var(--lightblue-1);
}
.icon-suporte, .font-suporte {
  color:var(--altblue-2);
}

/*
* Outros
*/
.collapsed {
  cursor: pointer;
}

hr {
  margin-top: 2rem;
  margin-bottom: 2rem;
  border: 1px solid #eeeeee;
}

/*status*/

.atualizacao-status {
  list-style-type:none;
}
.atualizacao-status li {
  padding-bottom: 30px;
  margin-bottom:29px;
  position:relative;
}

.linha-vertical{
  position:absolute;
  height:100%;
  width:2px;
  border-left:2px dotted var(--altblue-2);
  left:7px;
  top:23px;
}
.status-ok {
  color:var(--altblue-2);
}
.status-erro {
  color:var(--altorange-3);
}
.status-concluido {
  color:var(--blue-2);
}
.status-aguardando {
  color:var(--gray-2);
}

/*
* MOBILE MENU
*/

.terms{
  background-color:var(--gray-5);
  caret-color: black;
  padding:2px;
  border:solid 1px var(--gray-4);
  overflow-y:scroll;
  height:40vh;
}