:root {
  --delay-default: 250ms;
}

.arquivos {
  margin: 0;
  padding: 0;
  padding-inline: 10%;

  display: flex;
  flex-direction: column;
  gap: 10px;
}

h2.titulo-arquivo {
  margin-bottom: 15px;
}

h3.subtitulo-arquivo {
  margin-block: 15px;
  margin-inline: 10%;
}

.anexo {
  display: flex;
  height: 60px;

  border-radius: 5px;
  border: 1px solid #2D4133;
  background: #2D4133;
  color: white;

  overflow: hidden;

  a {
    all: unset;

    display: flex;
    align-items: center;
    text-align: justify;

    box-sizing: border-box;
    height: 100%;
    width: 100%;

    position: relative;
    left: 0;

    padding-inline: 70px;

    color: #4f7059;
    background: white;

    transition: var(--delay-default);
    cursor: pointer;

    &:hover {
      left: 10px;
      color: #4f7059;
      text-decoration: none;

      .extensao-arquivo {
        opacity: 1;
      }
    }

    p {
      margin: 0;
    }

    .extensao-arquivo {
      margin-left: auto;
      opacity: 1;
      transition: var(--delay-default);
    }

    .icone-link-externo {
      width: 10px;
      opacity: 0;
      transition: var(--delay-default);
      ;
    }

    &:hover,
    &:focus-visible,
    &:focus {
      .icone-link-externo {
        margin-left: 10px;
        opacity: 1;
      }
    }
  }
}


.arquivos .anexo:nth-child(even) a {
  background: #dfdfdf;
}

.arquivos .anexo a:not(:first-child) {
  width: 10%;
  min-width: max-content;

  p {
    border: 1px solid #4f7059;
    padding-inline: 5px 8px;
    border-radius: 5px;
  }

  &:hover {
    left: 0px;
    text-decoration: underline;

  }
}

p.observacao {
  margin: 30px 0 0 0;
  padding-inline: 10%;
  font-size: 14px;
  color: #4f7059;
}

@media(max-width: 882px) {
  .anexo {
    flex-direction: column;
    justify-content: start;
    align-items: center;
    height: auto;

    a {
      padding: 20px 0;
      text-align: center;

      p {
        width: 100%;
        text-align: center;
      }
    }
  }

  .arquivos .anexo a:not(:first-child) {
    width: 100%;
    min-width: max-content;

    p {
      border: none;
      padding-inline: 5px 8px;
      border-radius: none;
    }

    &:hover {
      left: 10px;
      text-decoration: none;
    }
  }

}