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

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

	display: flex;
	flex-direction: column;
}

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

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

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

	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: #f8f8f8;

		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;
		}
	}

}