@import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700);

*{
    padding: 0;
    margin: 0;
}

#main-nav{
  position: fixed;
  top: 11%;
  width: 420px;
  height: 90%;
  /*background-color: crimson;         Usado somente quando quero ver a posição da NAV */    
  overflow-y: auto;
}

/* Aqui é a estilização do cabeçalho do sistema */

.cabecalho {

  display: flex;
  position: fixed;
  top: 0;
  right: 0;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  padding: 0 1rem;
  width: 100%;

  -webkit-box-shadow: 0px 2px 10px -9px rgba(0, 0, 0, 0.81);
  -moz-box-shadow: 0px 2px 10px -9px rgba(0, 0, 0, 0.81);
  box-shadow: 0px 2px 10px -9px rgba(0, 0, 0, 0.81);  /* Faz o box do menu principal */
  z-index: 1;
 
}

/* Logo Tipo */
.div-topo{
  padding: 30px;

}


/* Estilização da imagem do usuário */

.profile {
  position: relative;
  display: flex;
  align-items: center;
  padding-top: 0.3rem;
  padding-left: 1rem;
}

.profile-img img {

  max-width: 100%;
 
}

.profile-img {
  display: block;
  width: 65px;   
  padding-right: 1rem;
}

.profile-img img {

  border-radius: 50%;
  max-width: 100%;
}

.status {
  text-transform: capitalize;
  display: flex;
  align-items: center;
}

.status::before {
  content: '';
  width: 10px;
  height: 10px;
  display: block;
  border-radius: 50%;
  background-color: green;
  margin-right: 5px;
}

/* --------- Aqui Termina a estilização referente ao usuário ---------- */

/* UL principal */

.sm-blue {

  position: absolute;
  left: 5px;
  width: 400px;
  background: transparent;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
   
}


.sm-blue a, .sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active{
  padding: 10px 20px;
  /* abre espaço para o botão de alternância (submenu) */
  padding-right: 58px;
  background: #3092c0;
  background-image: linear-gradient(to bottom, #3298c8, #2e8cb8);
  color: #fff;
  font-family: "PT Sans Narrow", "Arial Narrow", Arial, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: bold;
  line-height: 23px;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

.sm-blue a.current {
  background: #006892;
  background-image: linear-gradient(to bottom, #006188, #006f9c);
  color: #fff;
}

.sm-blue a.disabled {
  color: #a1d1e8;
}


.sm-blue a .sub-arrow {
  position: absolute;
  top: 50%;
  margin-top: -17px;
  left: auto;
  right: 4px;
  width: 34px;
  height: 34px;
  overflow: hidden;
  font: bold 16px/34px monospace !important;
  text-align: center;
  text-shadow: none;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}


.sm-blue a .sub-arrow::before {
  content: '+';
}
.sm-blue a.highlighted .sub-arrow::before {
  content: '-';
}

.sm-blue > li:first-child > a, .sm-blue > li:first-child > :not(ul) a {
  border-radius: 8px 8px 0 0;
}
.sm-blue > li:last-child > a, .sm-blue > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul, .sm-blue > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul {
  border-radius: 0 0 8px 8px;
}
.sm-blue > li:last-child > a.highlighted, .sm-blue > li:last-child > *:not(ul) a.highlighted, .sm-blue > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted {
  border-radius: 0;
}

.sm-blue ul {
  background: #fff;
}
.sm-blue ul ul {
  background: rgba(102, 102, 102, 0.1);
}
.sm-blue ul a, .sm-blue ul a:hover, .sm-blue ul a:focus, .sm-blue ul a:active {
  background: transparent;
  color: #2b82ac;
  font-size: 16px;
  text-shadow: none;
  border-left: 8px solid transparent;
}
.sm-blue ul a.current {
  background: #006892;
  background-image: linear-gradient(to bottom, #006188, #006f9c);
  color: #fff;
}

.sm-blue ul a.disabled {
  color: #b3b3b3;
}


.sm-blue ul ul a,
.sm-blue ul ul a:hover,
.sm-blue ul ul a:focus,
.sm-blue ul ul a:active {
  border-left: 16px solid transparent;
}

.sm-blue ul ul ul a,
.sm-blue ul ul ul a:hover,
.sm-blue ul ul ul a:focus,
.sm-blue ul ul ul a:active {
  border-left: 24px solid transparent;
}
.sm-blue ul ul ul ul a,
.sm-blue ul ul ul ul a:hover,
.sm-blue ul ul ul ul a:focus,
.sm-blue ul ul ul ul a:active {
  border-left: 32px solid transparent;
}
.sm-blue ul ul ul ul ul a,
.sm-blue ul ul ul ul ul a:hover,
.sm-blue ul ul ul ul ul a:focus,
.sm-blue ul ul ul ul ul a:active {
  border-left: 40px solid transparent;
}

.sm-blue ul li {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.sm-blue ul li:first-child {
  border-top: 0;
}


@media (max-width: 768px) {

    .sm-blue{
      width: 100%;
    }

    .div-topo{
      width: 70%;
    }

    #img_logo{
      width: 70%;
    }
    
    .name{
      font-size: 12px;
    }

}