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

BOXES ESPECÍFICOS:

Atenção
Dica
Glossário
Material Complementar
Para refletir
Saiba Mais

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


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

Elementos comuns a todos os boxes

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

.boxes-especificos {
    margin: var(--ifht-sys-spacing-padding-xl) 0 var(--ifht-sys-spacing-padding-xxxl);
}

.boxes-especificos .card {
    --_box-border-color: transparent;
    --_box-border-radius: var(--ifht-sys-raio-borda-lg);
    --_box-border-width: var(--ifht-sys-espessura-borda-xs);
    --_box-padding: var(--ifht-sys-spacing-padding-md);
    --_box-shadow: var(--ifht-sys-sombra-menu-lateral);

    background-image: url(/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/bg-box-saiba-mais.svg);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 105%;
    border-color: var(--_box-border-color);
    border-radius: var(--_box-border-radius);
    border-style: solid;
    border-width: var(--_box-border-width);
    box-shadow: var(--_box-shadow);
    padding: var(--ifht-sys-spacing-padding-xxxl) 0 0;
    position: relative;
    overflow: visible;
}

.boxes-especificos .card .card-header {
    border-radius: var(--ifht-sys-raio-borda-md) !important;
    text-transform:uppercase;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: var(--ifht-sys-spacing-padding-xs) var(--ifht-sys-spacing-padding-md);
    align-items: center;
    gap: var(--ifht-sys-spacing-padding-xs);
    text-align: center;
    width: fit-content;
    position: absolute;
	left: 50%;
	transform: translate(-50%, -160%);
}

.boxes-especificos .card .card-body {
    padding:0;
}

.boxes-especificos .card .card-body > div {
    padding: 0 var(--ifht-sys-spacing-padding-lg);
    overflow: hidden;
}

.boxes-especificos .card .card-body > div:last-child {
    margin-bottom: var(--ifht-sys-spacing-padding-xl);
}

.boxes-especificos .card .card-header .label {
    font-family: var(--ifht-sys-txt-familia-titulo);
    font-size: var(--ifht-sys-h6);
    line-height: normal;
}

.boxes-especificos .card .card-header .fi {
    font-size: var(--ifht-sys-h4);
    margin-top: var(--ifht-sys-spacing-padding-xs);
}


.boxes-especificos .card ul {
    list-style: none;
    padding: 0;
    margin: 0 var(--ifht-sys-spacing-padding-lg);
}

.boxes-especificos .card .list .list-group .list-group-item {
    padding: var(--ifht-sys-spacing-padding-md) 0 var(--ifht-sys-spacing-padding-md);
    padding-left: var(--ifht-sys-spacing-padding-lg);
}

.boxes-especificos .card ol {
    margin: 0 var(--ifht-sys-spacing-padding-lg);
}

.boxes-especificos .card .card-body::after {
    content:'.';
    display: block;
    background-repeat: no-repeat;
    background-position: 0 8px;
    background-size: 105%;
    border-bottom-left-radius: var(--_box-border-radius);
}

.boxes-especificos .material-complementar .card {
    background-image: url(/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/bg-box-material-complementar.svg);
    border-color: var(--ifht-sys-cor-terciaria-1-normal);
}

.boxes-especificos .para-escutar .card {
    background-image: url(/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/bg-box-para-escutar.svg);
    border-color: var(--ifht-sys-cor-primaria-extradark-contrast);
}

.boxes-especificos .para-refletir .card {
    background-image: url(/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/bg-box-para-refletir.svg);
    border-color: var(--ifht-sys-cor-secundaria-extradark-contrast);
}

.boxes-especificos .saiba-mais .card {
    background-image: url(/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/bg-box-saiba-mais.svg);
    border-color: var(--ifht-sys-cor-primaria-dark);
}

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

Box de Atenção

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

.boxes-especificos[data-box='Atenção'] .card {
    --_box-atencao-color: var(--ifht-sys-cor-terciaria-2-dark);

    background-image: url(/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/bg-box-atencao.svg);
    border-color: var(--_box-atencao-color);
}

.boxes-especificos[data-box='Atenção'] .card .card-header {
	color: var(--ifht-sys-cor-neutra-branco);
    border-bottom: var(--ifht-sys-espessura-borda-md) solid var(--ifht-sys-cor-terciaria-3-normal) !important;
    background: var(--_box-atencao-color) !important;
}

.boxes-especificos[data-box='Atenção'] .card .card-body::after {
    color: #EB7B47;
    background-image: url(/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/rodape-box-atencao.svg);
}

.boxes-especificos[data-box='Atenção'] .card  ul .bi {color: var(--_box-atencao-color);}

.boxes-especificos[data-box='Atenção'] .card .h1,
.boxes-especificos[data-box='Atenção'] .card .h2,
.boxes-especificos[data-box='Atenção'] .card .h3,
.boxes-especificos[data-box='Atenção'] .card .h4,
.boxes-especificos[data-box='Atenção'] .card .h5,
.boxes-especificos[data-box='Atenção'] .card .h6 {
    color: var(--_box-atencao-color);
}

.boxes-especificos[data-box='Atenção'] .card .list .list-group .list-group-item::before,
.boxes-especificos[data-box='Atenção'] .card .list .list-group .list-group-item .list-group .list-group-item[list-style='sub-item2']::before {
    color: var(--_box-atencao-color);
}

.boxes-especificos[data-box='Atenção'] .card .list ol.list-group .list-group-item::before {
    background-color: var(--_box-atencao-color);
    color: var(--ifht-sys-cor-neutra-branco);
}

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

Box de Dica

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

.boxes-especificos[data-box='Dica'] .card {
    /* --_box-dica-color: var(--ifht-sys-cor-apoio-3-dark); */
    --_box-dica-color: var(--ifht-sys-cor-apoio-3-extradark);

    background-image: url(/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/bg-box-dica.svg);
    border-color: var(--ifht-sys-cor-apoio-3-dark);
}

.boxes-especificos[data-box='Dica'] .card .card-header {
	color: var(--ifht-sys-cor-neutra-branco);
    border-bottom: var(--ifht-sys-espessura-borda-md) solid var(--_box-dica-color) !important;
    background: var(--_box-dica-color) !important;
}

.boxes-especificos[data-box='Dica'] .card .card-body::after {
    color: #D7830F;
    background-image: url(/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/rodape-box-dica.svg);
}

.boxes-especificos[data-box='Dica'] .card  ul .bi {color: var( --_box-dica-color);}

.boxes-especificos[data-box='Dica'] .card .h1,
.boxes-especificos[data-box='Dica'] .card .h2,
.boxes-especificos[data-box='Dica'] .card .h3,
.boxes-especificos[data-box='Dica'] .card .h4,
.boxes-especificos[data-box='Dica'] .card .h5,
.boxes-especificos[data-box='Dica'] .card .h6 {
    color: var(--_box-dica-color);
}

.boxes-especificos[data-box='Dica'] .card .list .list-group .list-group-item::before,
.boxes-especificos[data-box='Dica'] .card .list .list-group .list-group-item .list-group .list-group-item[list-style='sub-item2']::before {
    color: var(--_box-dica-color);
}

.boxes-especificos[data-box='Dica'] .card .list ol.list-group .list-group-item::before {
    background-color: var(--_box-dica-color);
    color: var(--ifht-sys-cor-neutra-branco);
}

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

Box de Glossário

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

.boxes-especificos .glossario .card {
    border: var(--ifht-sys-espessura-borda-xs) solid var(--ifht-sys-cor-primaria-2-dark);
    border-top:6px solid var(--ifht-sys-cor-primaria-2-dark);
}

.boxes-especificos .glossario .card h4 {
    color: var(--ifht-sys-cor-primaria-2-dark);
    border-bottom:var(--ifht-sys-espessura-borda-xs) solid var(--ifht-sys-cor-primaria-2-dark);
  }

.boxes-especificos .glossario .card h4::before {
    content: url('https://ava.ifht.net.br/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/ic-glossario.svg');
}

.boxes-especificos .glossario .card a {color: var(--ifht-sys-cor-primaria-2-dark);}

.boxes-especificos .glossario .card ul .bi {color: var(--ifht-sys-cor-primaria-2-dark);}


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

Material Complementar

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

.boxes-especificos[data-box='Material Complementar'] .card {
    --_box-material-complementar-color: var(--ifht-sys-cor-terciaria-1-dark);

    background-image: url(/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/bg-box-material-complementar.svg);
    border-color: var(--ifht-sys-cor-terciaria-1-normal);
}

.boxes-especificos[data-box='Material Complementar'] .card .card-header {
	color: var(--ifht-sys-cor-neutra-branco);
    border-bottom: var(--ifht-sys-espessura-borda-md) solid var(--ifht-sys-cor-terciaria-3-normal) !important;
    background: var(--_box-material-complementar-color) !important;
}

.boxes-especificos[data-box='Material Complementar'] .card .card-body::after {
    color: #409693;
    background-image: url(/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/rodape-box-material-complementar.svg);
}

.boxes-especificos[data-box='Material Complementar'] .card  ul .bi {color: var(--_box-material-complementar-color);}

.boxes-especificos[data-box='Material Complementar'] .card .h1,
.boxes-especificos[data-box='Material Complementar'] .card .h2,
.boxes-especificos[data-box='Material Complementar'] .card .h3,
.boxes-especificos[data-box='Material Complementar'] .card .h4,
.boxes-especificos[data-box='Material Complementar'] .card .h5,
.boxes-especificos[data-box='Material Complementar'] .card .h6 {
    color: var(--_box-material-complementar-color);
}

.boxes-especificos[data-box='Material Complementar'] .card .list .list-group .list-group-item::before,
.boxes-especificos[data-box='Material Complementar'] .card .list .list-group .list-group-item .list-group .list-group-item[list-style='sub-item2']::before {
    color: var(--_box-material-complementar-color);
}

.boxes-especificos[data-box='Material Complementar'] .card .list ol.list-group .list-group-item::before {
    background-color: var(--_box-material-complementar-color);
    color: var(--ifht-sys-cor-neutra-branco);
}

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

Para Assistir

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

.boxes-especificos[data-box='Para Assistir'] .card {
    --_box-para-assistir-color: var(--ifht-ref-cor-vermelho-60);

    background-image: url(/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/bg-box-para-assistir.svg);
    border-color: var(--ifht-ref-cor-vermelho-70);
}

.boxes-especificos[data-box='Para Assistir'] .card .card-header {
	color: var(--ifht-sys-cor-neutra-branco);
    border-bottom: var(--ifht-sys-espessura-borda-md) solid var(--ifht-sys-cor-terciaria-3-normal) !important;
    background: var(--_box-para-assistir-color) !important;
}

.boxes-especificos[data-box='Para Assistir'] .card .card-body::after {
    color: #F8D2D5;
    background-image: url(/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/rodape-box-para-assistir.svg);
}

.boxes-especificos[data-box='Para Assistir'] .card  ul .bi {color: var(--_box-para-assistir-color);}

.boxes-especificos[data-box='Para Assistir'] .card .h1,
.boxes-especificos[data-box='Para Assistir'] .card .h2,
.boxes-especificos[data-box='Para Assistir'] .card .h3,
.boxes-especificos[data-box='Para Assistir'] .card .h4,
.boxes-especificos[data-box='Para Assistir'] .card .h5,
.boxes-especificos[data-box='Para Assistir'] .card .h6 {
    color: var(--_box-para-assistir-color);
}

.boxes-especificos[data-box='Para Assistir'] .card .list .list-group .list-group-item::before,
.boxes-especificos[data-box='Para Assistir'] .card .list .list-group .list-group-item .list-group .list-group-item[list-style='sub-item2']::before {
    color: var(--_box-para-assistir-color);
}

.boxes-especificos[data-box='Para Assistir'] .card .list ol.list-group .list-group-item::before {
    background-color: var(--_box-para-assistir-color);
    color: var(--ifht-sys-cor-neutra-branco);
}


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

Para Refletir

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

.boxes-especificos[data-box='Para Refletir'] .card {
    --_box-para-refletir-color: var(--ifht-sys-cor-secundaria-normal);

    background-image: url(/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/bg-box-para-refletir.svg);
    border-color: var(--ifht-sys-cor-secundaria-extradark-contrast);
}

.boxes-especificos[data-box='Para Refletir'] .card .card-header {
	color: var(--ifht-sys-cor-neutra-branco);
    border-bottom: var(--ifht-sys-espessura-borda-md) solid var(--ifht-sys-cor-terciaria-3-normal) !important;
    background: var(--_box-para-refletir-color) !important;
}

.boxes-especificos[data-box='Para Refletir'] .card .card-body::after {
    color: #409693;
    background-image: url(/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/rodape-box-para-refletir.svg);
}

.boxes-especificos[data-box='Para Refletir'] .card  ul .bi {color: var(--_box-para-refletir-color);}

.boxes-especificos[data-box='Para Refletir'] .card .h1,
.boxes-especificos[data-box='Para Refletir'] .card .h2,
.boxes-especificos[data-box='Para Refletir'] .card .h3,
.boxes-especificos[data-box='Para Refletir'] .card .h4,
.boxes-especificos[data-box='Para Refletir'] .card .h5,
.boxes-especificos[data-box='Para Refletir'] .card .h6 {
    color: var(--_box-para-refletir-color);
}

.boxes-especificos[data-box='Para Refletir'] .card .list .list-group .list-group-item::before,
.boxes-especificos[data-box='Para Refletir'] .card .list .list-group .list-group-item .list-group .list-group-item[list-style='sub-item2']::before {
    color: var(--_box-para-refletir-color);
}

.boxes-especificos[data-box='Para Refletir'] .card .list ol.list-group .list-group-item::before {
    background-color: var(--_box-para-refletir-color);
    color: var(--ifht-sys-cor-neutra-branco);
}


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

Para Escutar

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

.boxes-especificos[data-box='Para Escutar'] .card {
    --_box-para-escutar-color: var(--ifht-sys-cor-primaria-dark);
    --_box-para-escutar-border-color: var(--ifht-sys-cor-primaria-light);

    background-image: url(/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/bg-box-para-escutar.svg);
    border-color: var(--_box-para-escutar-border-color);
}

.boxes-especificos[data-box='Para Escutar'] .card .card-header {
	color: var(--ifht-sys-cor-neutra-branco);
    border-bottom: var(--ifht-sys-espessura-borda-md) solid var(--ifht-sys-cor-terciaria-3-normal) !important;
    background: var(--_box-para-escutar-color) !important;
}

.boxes-especificos[data-box='Para Escutar'] .card .card-body::after {
    color: #409693;
    background-image: url(/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/rodape-box-para-escutar.svg);
}

.boxes-especificos[data-box='Para Escutar'] .card  ul .bi {color: var(--_box-para-escutar-color);}

.boxes-especificos[data-box='Para Escutar'] .card .h1,
.boxes-especificos[data-box='Para Escutar'] .card .h2,
.boxes-especificos[data-box='Para Escutar'] .card .h3,
.boxes-especificos[data-box='Para Escutar'] .card .h4,
.boxes-especificos[data-box='Para Escutar'] .card .h5,
.boxes-especificos[data-box='Para Escutar'] .card .h6 {
    color: var(--_box-para-escutar-color);
}

.boxes-especificos[data-box='Para Escutar'] .card .list .list-group .list-group-item::before,
.boxes-especificos[data-box='Para Escutar'] .card .list .list-group .list-group-item .list-group .list-group-item[list-style='sub-item2']::before {
    color: var(--_box-para-escutar-color);
}

.boxes-especificos[data-box='Para Escutar'] .card .list ol.list-group .list-group-item::before {
    background-color: var(--_box-para-escutar-color);
    color: var(--ifht-sys-cor-neutra-branco);
}


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

Saiba Mais

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

.boxes-especificos[data-box='Saiba Mais'] .card {
    --_box-saiba-mais-color: var(--ifht-sys-cor-primaria-extralight-contrast);

    background-image: url(/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/bg-box-saiba-mais.svg);
    border-color: var(--ifht-sys-cor-primaria-normal);
}

.boxes-especificos[data-box='Saiba Mais'] .card .card-header {
	color: var(--ifht-sys-cor-neutra-branco);
    border-bottom: var(--ifht-sys-espessura-borda-md) solid var(--ifht-sys-cor-terciaria-3-normal) !important;
    background: var(--_box-saiba-mais-color) !important;
}

.boxes-especificos[data-box='Saiba Mais'] .card .card-body::after {
    color: #409693;
    background-image: url(/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/rodape-box-saiba-mais.svg);
}

.boxes-especificos[data-box='Saiba Mais'] .card  ul .bi {color: var(--_box-saiba-mais-color);}

.boxes-especificos[data-box='Saiba Mais'] .card .h1,
.boxes-especificos[data-box='Saiba Mais'] .card .h2,
.boxes-especificos[data-box='Saiba Mais'] .card .h3,
.boxes-especificos[data-box='Saiba Mais'] .card .h4,
.boxes-especificos[data-box='Saiba Mais'] .card .h5,
.boxes-especificos[data-box='Saiba Mais'] .card .h6 {
    color: var(--_box-saiba-mais-color);
}

.boxes-especificos[data-box='Saiba Mais'] .card .list .list-group .list-group-item::before,
.boxes-especificos[data-box='Saiba Mais'] .card .list .list-group .list-group-item .list-group .list-group-item[list-style='sub-item2']::before {
    color: var(--_box-saiba-mais-color);
}

.boxes-especificos[data-box='Saiba Mais'] .card .list ol.list-group .list-group-item::before {
    background-color: var(--_box-saiba-mais-color);
    color: var(--ifht-sys-cor-neutra-branco);
}


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

Saiba Mais Toggle

-------------------------------- */
/* .boxes-especificos.saiba-mais-toggle > .row {
    padding: var(--ifht-sys-spacing-md);
    background-color: var(--ifht-sys-cor-primaria-extralight);
    background-image: url(../../../media/templates/tabs-footer.svg);
    background-repeat: no-repeat;
    background-position: 0px 30px;
    border-radius: var( --ifht-sys-raio-borda-md);
} */

.boxes-especificos.saiba-mais-toggle {
  width: 100%;
  background-image: linear-gradient(90deg, #D5EBE9 0%, #E1EAF2 100%);
  border-radius: var(--ifht-sys-raio-borda-md);
  border-top-left-radius: calc(var(--ifht-sys-raio-borda-xl) *2);
  border-top-right-radius: calc(var(--ifht-sys-raio-borda-xl) *2);
}

.boxes-especificos.saiba-mais-toggle .saiba-mais__header {
  padding: var(--ifht-sys-spacing-md);
  text-align: center;
  width: 100%;
  background-position-x: 10%;
  background-size: 50%;
}

.boxes-especificos.saiba-mais-toggle .saiba-mais__header {
  background-image: url("../../../media/templates/bg-saiba-mais-m1.svg");
}

.boxes-especificos.saiba-mais-toggle .saiba-mais__content {
    padding: var(--ifht-sys-spacing-lg);
}


/* Ajuste dos Boxes dentro de accordions */

.accordion .atencao .card,
.accordion .dica .card,
.accordion .glossario .card,
.accordion .material-complementar .card,
.accordion .para-refletir .card,
.accordion .saiba-mais .card {
    overflow:visible;
}

.accordion .atencao .card:first-of-type,
.accordion .dica .card:first-of-type,
.accordion .glossario .card:first-of-type,
.accordion .material-complementar .card:first-of-type,
.accordion .para-refletir .card:first-of-type,
.accordion .saiba-mais .card:first-of-type {
    border-bottom: var(--ifht-sys-espessura-borda-xs) solid;
    border-bottom-right-radius: .25rem;
    border-bottom-left-radius: .25rem;
}

.accordion .atencao .card:first-of-type {border-bottom-color: var(--ifht-sys-cor-terciaria-2-normal); }
.accordion .dica .card:first-of-type {border-bottom-color:var(--ifht-sys-cor-terciaria-1-normal); }
.accordion .glossario .card:first-of-type {border-bottom-color: var(--ifht-sys-cor-primaria-2); }
.accordion .material-complementar .card:first-of-type {border-bottom-color: var(--ifht-sys-cor-secundaria-normal); }
.accordion .para-refletir .card:first-of-type {border-bottom-color: var(--ifht-sys-cor-terciaria-3-normal); }
.accordion .saiba-mais .card:first-of-type {border-bottom-color: var(--ifht-sys-cor-terciaria-4-normal); }

/* Ajuste dos boxes dentro dos Títulos Ordenados */

.titulos-ordenados > li .atencao .card h4::before,
.titulos-ordenados > li .dica .card h4::before,
.titulos-ordenados > li .glossario .card h4::before,
.titulos-ordenados > li .material-complementar .card h4::before,
.titulos-ordenados > li .para-refletir .card h4::before,
.titulos-ordenados > li .saiba-mais .card h4::before {
    display: block;
    width: 70px;
    position: absolute;
    top: -25px;
    left: -30px;
    margin-left:0;
    background: transparent;
}


.titulos-ordenados > li .atencao .card h4::before {
    content: url('https://ava.ifht.net.br/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/ic-atencao.svg');
}

.titulos-ordenados > li .dica .card h4::before {
    content: url('https://ava.ifht.net.br/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/ic-dica.svg');
}

.titulos-ordenados > li .glossario .card h4::before {
    content: url('https://ava.ifht.net.br/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/ic-glossario.svg');
}

.titulos-ordenados > li .material-complementar .card h4::before {
    content: url('https://ava.ifht.net.br/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/ic-materialComplementar.svg');
}

.titulos-ordenados > li .para-refletir .card h4::before {
    content: url('https://ava.ifht.net.br/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/ic-paraRefletir.svg');
}

.titulos-ordenados > li .saiba-mais .card h4::before {
    content: url('https://ava.ifht.net.br/pluginfile.php/606/mod_folder/content/0/img/recursos-visuais/ic-saibamais.svg');
}


@media (min-width:768px) {
    .boxes-especificos .card .card-header {
        transform: translate(-50%, -160%);
    }
}

@media (min-width:992px) {
    .boxes-especificos .card .card-header {
        transform: translate(-50%, -130%);
    }

    .boxes-especificos .card .card-body > div {
        padding: 0 var(--ifht-sys-spacing-padding-xl);
    }

    .boxes-especificos .card .card-header .label {
        font-size: var(--ifht-sys-h6);
    }

    .boxes-especificos .card .card-header .fi {
        font-size: var(--ifht-sys-h3);
    } 
    
    .boxes-especificos .card .card-body::after {
        background-position: 0 0;
    }
}