/*
handler: ndmais-expediente
deps: bootstrap-5,bootstrap-icons
version: 1.0.7
*/

#expediente{
    margin-bottom: 30px;
}

#expediente h2 {
	font-weight: 700;
	color: var(--blue);
	margin-block: 30px;
}

#expediente .card {
	background-color: var(--blue-extra-light);
	border: unset;
}

#expediente .card-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--blue);
	line-height: 26px;
}

#expediente .card img {
	aspect-ratio: 2 / 1;
	object-fit: cover;
	min-height: 120px;
	height: 100%;
}

#expediente .diretoria {
	margin-top: 60px;
}

#expediente {
	margin-top: 40px;
}

#expediente .title {
	margin-bottom: 40px;
}

#expediente .title h1 {
	font-size: 24px;
	font-weight: 700;
	color: var(--blue);
	margin-top: 30px;
}

#expediente .title p {
	font-size: 14px;
	font-weight: 500;
	color: var(--gray);
	line-height: 20px;
	margin-top: 5px;
}

#expediente .accordeon li {
	margin-bottom: 15px;
}

#expediente .accordeon h3 {
	font-size: 20px;
	font-weight: 700;
	color: var(--blue);
}

#expediente .accordeon .ask {
	padding: 20px 75px 20px 25px;
	cursor: pointer;
	border-radius: 8px;
	background-color: var(--blue-extra-light);
}

#expediente .accordeon .ask:after {
	content: '\F282';
	font: 16px 'bootstrap-icons';
	color: var(--bs-white);
	display: block;
	position: absolute;
	right: 25px;
	top: 12px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--gray);
	text-align: center;
	line-height: 42px;
}

#expediente .accordeon .ask.active:after {
	content: '\F286';
	background-color: var(--gray-dark);
	line-height: 38px;
}

#expediente .accordeon .panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
}

#expediente .accordeon .perfil {
    position: relative;
	background-color: var(--bs-white);
	margin-bottom: 10px;
	border-radius: 8px;
	margin-top: 25px;
}

#expediente .accordeon .perfil img {
	margin-right: 10px;
	width: 80px;
	height: 80px;
	object-fit: cover;
}

#expediente .accordeon .perfil h4 {
	font-size: 22px;
	font-weight: 700;
	color: var(--blue);
	line-height: 26px;
}

#expediente .accordeon .perfil h4 a {
	text-decoration: none;
	color: var(--blue);
}

#expediente .accordeon .perfil .cargo {
	font-size: 15px;
	color: var(--gray-dark);
	line-height: 18px;
}

#expediente .diretoria {
    padding-inline: 0px;
}

@media only screen and (min-width : 576px) {
	#expediente .title h1 {
		margin-top: 0;
	}

	#expediente .accordeon .perfil {
		padding-left: 25px;
	}
}

@media (min-width: 992px) {

    #expediente{
        margin-bottom: 40px;
    }

    #expediente .accordeon .panel {
        display: flex;
        flex-wrap: wrap;
    }

    #expediente .accordeon .panel .perfil {
        width: 33.33333%;
    }

}