@media only screen and (max-width: 900px) {
  .nao-encontrado .icone-nao-encontrado {
    font-size: 4rem;
  }

  .nao-encontrado .texto-nao-encontrado {
    font-size: 2rem;
  }

  #body {
    position: relative;
    height: 100vh !important;
    max-height: 100vh !important;
    display: flex;
    flex-direction: column;
  }

  #body > header {
    width: 100% !important;
    height: 60px !important;
    margin: 0 !important;
    padding: 10px 50px !important;
    color: #ffffff !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between;

    background: var(--gradient-color-red) !important;
    background-color: var(--color-red) !important;
    border: 0 !important;
    border-bottom: 5px var(--color-light-blue) solid !important;
    border-radius: 0 !important;
    box-shadow: 0 0 15px #00000033 !important;
  }

  #content {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  #content > .inner-content {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    gap: 0;
    height: calc(100vh - 60px - 50px) !important;
  }

  #content > .inner-content > article {
    width: 100% !important;
    height: 100% !important;
    grid-area: conteudo;

    background: rgba(255, 255, 255, 0.45) !important;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37) !important;
    backdrop-filter: blur(13.5px) !important;
    -webkit-backdrop-filter: blur(13.5px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 0;
  }

  #body > header > .parte1 {
    display: none;
  }

  #body > header > .parte2 .input {
    width: 90% !important;
    padding-left: 7px;
    border-radius: calc(37.6px / 2) !important;
    background-color: var(--color-blue) !important;
    border: 1.5px solid var(--color-blue) !important;
  }

  #body > header > .parte2 > .logo img {
    height: 40px !important;
  }

  #body > header > .parte3 {
    justify-content: right !important;
  }

  .header-perfil {
    height: 30px !important;
    width: 30px !important;
  }

  .nome-cliente {
    display: none;
  }

  /* --------------------------------------------------- */

  /* A visualização do nav é alterado via js no arquivo index.php */
  #nav-mobile {
    height: fit-content;
    max-height: calc(100vh - 70px);
    width: 100% !important;
    padding: 10px 20px;
    position: absolute;
    top: 60px !important;
    left: 0 !important;
    z-index: 99;
    background: var(--color-red);
    color: #ffffff;
    border-radius: 0 !important;
  }

  #nav-mobile menu {
    width: 100%;
    /* height: 100%; */
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  #nav-mobile menu li {
    border-bottom: 1px solid var(--color-light-red);

    &:last-child {
      border-bottom: none;
    }
  }

  #nav-mobile menu li a,
  #botao-menu {
    display: grid;
    grid-template-columns: auto 1fr;
    width: 100% !important;
    padding: 15px 0 !important;
    cursor: pointer;
    color: white;
    transition: 0.2s ease-in-out;

    &:hover {
      background: #ffffff22;
      color: white;
    }
  }

  #botao-menu {
    width: 100% !important;
    height: fit-content !important;
    max-height: 100% !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 15px 10px !important;
    background-color: var(--color-red) !important;
    border-radius: 10px !important;
    border: none;
    color: white !important;
    box-shadow: var(--shadow) !important;
    text-align: left !important;

    &:hover {
      background-color: var(--color-red-hover) !important;
    }
  }

  #botao-menu .titulo-botao-menu-lateral {
    line-height: 140%;
  }

  #nav-mobile menu li a .icone-box,
  #botao-menu .icone-box {
    display: grid;
    justify-content: center;
    align-items: center;
    width: 37px !important;
  }

  #nav-mobile menu li span svg,
  #botao-menu span svg {
    height: 1.3rem !important;
  }

  /* --------------------------------------------------- */

  .path-bar {
    width: 100% !important;
    border-radius: 0 !important;
    background-color: var(--color-blue) !important;
  }

  #home .acesso-rapido .botao .icone {
    font-size: 2rem;
  }

  #home .info {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  #home .info .esteira #grafico {
    height: 40px;
    width: 100%;
    border-radius: 5px;
    background-color: lightgray;
    display: flex;
    overflow: hidden;
  }

  article#upload > form {
    display: flex;
    flex-direction: column;
  }

  article#upload > form .header {
    display: flex !important;
    text-align: center;
    align-items: center;
    justify-content: center;
    min-height: 70px;
  }

  article#upload > form > .formulario {
    flex-direction: column !important;
  }

  article#upload > form > .formulario > .form-left,
  article#upload > form > .formulario > .form-right {
    width: 100% !important;
  }

  article#upload > form > .footer {
    grid-area: none;
    display: grid;
    justify-content: center;
    min-height: 70px;
  }

  article.documentos.modo-lista .lista-header .info,
  article.documentos.modo-lista .documento .info {
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
  }

  article#explorar
    .documentos.modo-lista
    .lista-header
    .info
    label:is(.descricao, .classificacao, .tipo),
  article#explorar
    .documentos.modo-lista
    .documento
    .info
    div:is(.descricao, .classificacao, .tipo) {
    display: none;
  }

  div#mainModal {
    border-radius: 7px !important;
  }

  #modalFeedback {
    border-radius: 7px !important;
  }

  .ui.stackable.grid .row:first-child .dataTables_length {
    height: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: right;
  }
}