#menu-componente {
  background: #0091ff;
  width: 64px;
  height: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
}
.menu-logo {
  height: 40px;
  width: 40px;
  position: fixed;
  top: 24px;
  left: 9px;
}
.menu-logo img {
  height: 45px;
  width: 45px;
}
.menu-user {
  cursor: pointer;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 24px;
  left: 12px;
}
.menu-user img {
  border-radius: 50%;
  height: 40px;
  width: 40px;
  border: solid 1px white;
}
.menu-itens {
  position: fixed;
  top: 85px;
  left: 12px;
}
.menu-item {
  cursor: pointer;
  height: 45px;
  width: 45px;
  border-radius: 50%;

  padding: 8px 0px 0px 9px;
  margin: 24px 0px 0px -3px;
}

.fundoPreto {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  z-index: 6;
  top: 0;
  left: 0;
  overflow: hidden;
}

.erro-text {
  font-size: 16px;
  font-family: Muli-Bold;
  font-weight: 700;
  margin-bottom: 10px;
  color: #f44336;
}

/*Componente de Perfil*/
.perfil {
  background-color: white;
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 16%);
  border-radius: 8px;
  position: fixed;
  bottom: 35px;
  left: 55px;
  width: 224px;
  height: 244px;
  padding: 30px 30px;
  z-index: 6;
}

.perfil-nome {
  text-align: center;
  font-family: Muli-Black;
  font-size: 14px;
}
.perfil-item {
  font-family: Muli-SemiBold;
  font-size: 14px;
  cursor: pointer;
}
/*Alterar imagem*/
.alterar-imagem {
  z-index: 7;
  position: fixed;
  width: 320px;
  height: 347px;
  right: calc(50% - 160px);
  background: white;
  border-radius: 8px;
  top: calc(-347px - 30px);
  padding: 35px;
  transition: 1s;
}

.alterarImagemActive {
  top: 30px !important;
}
.alterar-imagem div {
  text-align: center;
}
.alterar-imagem img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}
.alterar-imagem p {
  text-align: center;
  font-family: Muli-Black;
  font-size: 14px;
  margin-top: 22px;
  margin-bottom: 22px;
}
.alterar-imagem label {
  padding: 8px 32px;
  width: 100%;

  margin-bottom: 15px;

  background: #0077ff;

  border-radius: 4px;

  border: 1px solid #0077ff;

  font-family: Muli-Black;
  font-weight: 900;

  font-size: 0.875rem;

  color: white;
  cursor: pointer;
  text-decoration: none;
  text-align: center;

  transition: all 0.5s linear;
}

.alterar-imagem input {
  transition: box-shadow 0.5s ease;
}
.alterar-imagem button:hover,
.alterar-imagem label:hover {
  box-shadow: 0 0 15px 0 rgb(0 0 0 / 24%);
}
.alterar-imagem button {
  margin-left: 140px;

  font-family: Muli-Black;
  font-weight: 900;
  padding: 8px 32px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.48);
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.32);
  border-radius: 4px;
  background: #fff;

  transition: box-shadow 0.5s ease;
}
.arquivo:hover {
  box-shadow: 0 0 10px 0 rgb(0 0 0 / 24%);
}
/*Alterar imagem final*/

/*Alterar senha*/

.alterar-senha {
  z-index: 7;
  width: 35%;
  height: 60%;
  position: fixed;
  top: calc(-60% - 30px);
  right: calc(50% - (35% / 2));
  background: white;
  padding: 50px 31px 35px 31px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
  transition: 1s;
}

.alterarSenhaActive {
  top: 30px !important;
}
.alterar-senha h4 {
  font-family: Muli-Black;
  font-weight: 900;
  font-size: 18px;
  font-size: 1.125rem;
  color: rgba(0, 0, 0, 0.8);
}
.alterar-senha-subtitulo {
  font-family: Muli-Regular;
  font-weight: 400;
  font-size: 1.125rem;
}
.alterar-senha label,
.criar-usuario label {
  font-family: Muli-Regular;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.4);
  font-weight: 400;
}
.alterar-senha input {
  width: 100%;
}
.alterar-senha-botoes {
  width: 100%;
}
.alterar-senha-botoes button {
  position: absolute;
  bottom: 30px;
}
.alterar-senha-alterar {
  background: #0077ff;
  border: none;
  border-radius: 4px;
  position: relative;
  margin: 0;
  margin-bottom: 1px;
  border: 1px solid #0077ff;
  padding: 8px 32px;
  display: inline-block;
  letter-spacing: 0;
  overflow: hidden;
  font-family: Muli-Black;
  font-weight: 900;
  font-size: 14px;
  font-size: 0.875rem;
  box-shadow: 0 0 2px 0 rgb(0 0 0 / 16%);
  outline: none;
  color: white;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  transition: all 0.5s linear;
}
.alterar-senha-cancelar {
  font-family: Muli-Black;
  font-weight: 900;
  padding: 8px 32px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.48);
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.32);
  border-radius: 4px;
  background: #fff;
  margin-right: 16px;
}

/*Criar Usuario*/

.criar-usuario {
  z-index: 7;
  width: 45%;
  height: 72%;
  position: fixed;
  top: calc(-100% - 30px);
  right: calc(50% - (45% / 2));
  background: white;
  padding: 50px 31px 35px 31px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
  transition: 1s;
}
.criarUsuarioActive {
  top: 30px !important;
}
.criar-usuario div {
  width: 45%;
  display: inline-block;
  margin-bottom: 3px;
  margin-top: -3px;
}
.criar-usuario-esquerda {
  margin-right: 8.5%;
}
.criar-usuario-botoes {
  width: 100%;
}
.criar-usuario-botoes button {
  position: absolute;
  bottom: 35px;
}
/**************

MEDIA QUERIES

****************/
@media (max-width: 920px) {
  .alterar-senha {
    width: 100%;
    height: 100%;
    top: -100%;
    left: 0px;
  }
  .alterarSenhaActive {
    top: 0px !important;
  }
  .criar-usuario {
    width: 100%;
    height: 100%;
    top: -100%;
    left: 0px;
  }
  .criarUsuarioActive {
    top: 0px !important;
  }
}