/*
Folha de Estilos para exemplos de aulas
Autor: Marcelo Sales
*/

/* ------------- ALL ------------- */
html, body { max-width: 100%; overflow-x: hidden; }
body { font-family: 'Noto Sans JP', sans-serif; color: #222; font-size: 1.1rem; }
p { margin: 0 0 .5rem 0; }

h1 { font-size: 3rem; font-weight: 700; line-height: 3.3rem; padding-bottom: 1rem; }
h2 { font-size: 2rem; font-weight: 700; line-height: 2.2rem; padding-bottom: 1rem; }
h3 { font-size: 1.5rem; font-weight: 700; line-height: 1.7rem; padding-bottom: .5rem; }
h4 { font-size: 1.2rem; font-weight: 700; line-height: 1.4rem; padding-bottom: .4rem; }
h5 { font-size: 1.1rem; font-weight: 400; line-height: 1.2rem; padding-bottom: .3rem; }
h6 { font-size: 1.1rem; font-weight: 300; line-height: 1.2rem; padding-bottom: .3rem; }
h2.exemplos { font-size: 2rem; color: #086BA9; }
h3.importante { background-color: #fff3c4; padding: 0.5rem; }
h4.separador,
h5.separador,
h6.separador { /*border-top: 1px solid #c0dcfc;*/ color: #086BA9; padding: .8rem .5rem; background-color: #fffceb; }

.small, small { font-size: .65em; }
.grupo { margin-bottom: 3rem; }
.destaque { color: #c9174f; }
.destaque-duplo { color: #fff3c4; background-color: #c9174f; padding: .2rem .8rem; border-radius: .8rem; }

code { font-family: monospace; font-size: 1rem; padding: .2rem .5rem; margin: 0 0.3rem; white-space: nowrap; color: #e8c95b; background-color: #333; border-radius: 6px; }

/*a { color: #086BA9; text-decoration: none; border-bottom: 1px dotted #086BA9;
    outline: 2px solid transparent;
    outline-offset: .5rem;
    transition: outline-offset .2s linear; }
a:hover { color: #FEEF8E; background-color: #086BA9; padding: 0 .1rem; }
a:focus { color: #FEEF8E; background-color: #086BA9; outline: .125rem solid #08c; outline-offset: .125rem; padding: 0 .1rem; }*/

.btn:focus-visible { box-shadow: none!important; outline: .125rem dashed #093d79!important; outline-offset: .225rem!important; }

.link-padrao a, .aulas a { color: #093d79; text-decoration: none; border-bottom: 1px dotted #086BA9;
    outline: 2px solid transparent;
    outline-offset: .5rem;
    transition: outline-offset .2s linear; }
.link-padrao a:hover, .aulas a:hover { color: #FEEF8E; background-color: #086BA9; padding: 0 .1rem; }
.link-padrao a:focus, .aulas a:focus { color: #FEEF8E; background-color: #086BA9; outline: .125rem solid #08c; outline-offset: .225rem; padding: 0 .1rem; }
.link-padrao .titulo { font-weight: 700; font-size: 1.25rem; list-style: none; }

i.icons { font-size: 1rem; vertical-align: -.2rem; text-rendering: optimizeLegibility; }

[hidden], .hide { display: none!important; }
.sr-only, .a11y, .visually-hidden, .sem-leitor-telas { position: absolute; clip: rect(1px,1px,1px,1px); -webkit-clip-path: inset(0 0 99.9% 99.9%); clip-path: inset(0 0 99.9% 99.9%); overflow: hidden; height: 1px; width: 1px; padding: 0; border: 0; }

/* HEADER */
header h1 { }
header p { }
header p > strong { }

header.accessboost { padding: .7rem 0; background-color: #333; color: #fff; }
header.accessboost a { color: #FEEF8E; text-decoration: none; border-bottom: 1px dotted #FEEF8E; }
header.accessboost a:hover { color: #333; background-color: #FEEF8E; }
header.accessboost a:focus { color: #333; background-color: #FEEF8E; outline: .125rem solid #FEEF8E; outline-offset: .125rem; }

/* Títulos customizados */
.titulo-nivel1 { font-size: 1.5rem; line-height: 1.6rem; font-weight: 600; padding-bottom: 0; }
.titulo-nivel2 { font-size: 2.5rem;  line-height: 2.6rem; font-weight: 500; padding-bottom: 0; }
.titulo-nivel3, .titulo-nivel4, .titulo-nivel5, .titulo-nivel6 { font-size: 1.2rem;  line-height: 1.3rem; font-weight: 400; padding-bottom: 0; }

/* AULAS */
.aulas { background-color: #fedb54; }
.aulas a { font-weight: 700; }
/*.aulas.importante { background-color: #fff3c4; }*/
.aulas-atalhos { background-color: #efefef; }
p.tit-aulas { font-size: 1.2rem; font-weight: 700; }
p.aulas-disclaimer { font-size: .9rem; margin-top: -.5rem; }
p.atencao, span.atencao { font-size: .9rem; color: crimson; }

/* MENSAGEM */
.info { background-color: #ffdce6; }

/* MAIN */
.exemplos-accessboost { padding-bottom: 7rem; }
.tit-aula-exemplos { margin-top: 4rem; padding: .6rem .5rem .8rem .5rem; background-color: #b0d6f6; }

/* Listas */
ol, ul { padding-left: 3rem!important; margin-bottom: 0!important; }
dt { font-size: 1.2rem; font-weight: 700; }
dd { font-size: 1.2rem; margin-bottom: 1rem; padding-left: 1rem; }
ol.lista-detalhe { margin: 1rem 0 1rem 1rem;; counter-reset: my-awesome-counter 0; }
ol.lista-detalhe li { list-style: none; counter-increment: my-awesome-counter; background-image: none; padding: 0; margin-bottom: 0.6rem; font-size: 1.1rem; line-height: 1.5rem; line-break: auto; }
ol.lista-detalhe li:before { content: counter(my-awesome-counter) ". "; color: #c9174f; font-weight: 700; font-size: 1.3rem; margin: 0 0 0 -1.5rem; }
ul.lista-detalhe li { font-size: 1.1rem; margin-bottom: 0.6rem; line-height: 1.6rem; }
li.stand-by { color: #999; }

/* Forms */
input.texto, textarea.texto {
    margin-left: .5rem; padding: .375rem .75rem;
    font-size: 1rem; font-weight: 400; line-height: 1.6; color: #333; background-color: #fff;
    border: 2px solid #333; border-radius: .5rem;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
input.texto:hover, textarea.texto:hover { outline: 0; box-shadow: 0 0 0 0.12rem #333; }
input.texto:focus, textarea.texto:focus { color: #333; background-color: #fff; border-color: #086BA9; outline: 0; box-shadow: 0 0 0 0.20rem #086BA9; }

.texto-linha { display: inline-block; vertical-align: middle; }
.ajuda-form { display: block; margin-left: .5rem; }

/* breadcrumb */
ul.breadcrumb li, ul.breadcrumb-fail li, ul.breadcrumb-separador li,
ol.breadcrumb li, ol.breadcrumb-fail li { display: inline-block; }
ul.breadcrumb li.separador { margin: 0 .2rem; }
/* Ocultando símbolos do HTML (conteúdo) e exibindo-os apenas via CSS (visual)*/
ul.breadcrumb li:after,
ol.breadcrumb li:after { content:' > '; padding-right: .2rem; }
ul.breadcrumb li:last-child::after,
ol.breadcrumb li:last-child::after { content:''; }

/* Accordion */
.accordion-item { margin-top: 0.6rem; }
.accordion-button:hover { border-color: #086BA9; box-shadow: 0 0 0 0.10rem #086BA9; }
.accordion-button:focus { border-color: #086BA9; box-shadow: 0 0 0 0.25rem #086BA9; }

.accordion-item h2 { padding-bottom: 0!important; }
.accordion-button { font-size: 1.5rem; font-weight: 700; }
.accordion-item:first-of-type .accordion-button { border-top-left-radius: calc(0.75rem - 1px); border-top-right-radius: calc(0.75rem - 1px); }
.accordion-item:last-of-type .accordion-button.collapsed { border-bottom-right-radius: calc(0.75rem - 1px); border-bottom-left-radius: calc(0.75rem - 1px); }

/* Abas */
.nav-tabs {
    --bs-nav-tabs-border-width: 1px;
    --bs-nav-tabs-border-color: #000;
    --bs-nav-tabs-border-radius: .5rem;
    --bs-nav-tabs-link-hover-border-color: #e9ecef #e9ecef #dee2e6;
    --bs-nav-tabs-link-active-color: #000;
    --bs-nav-tabs-link-active-bg: #fff;
    --bs-nav-tabs-link-active-border-color: #dee2e6 #dee2e6 #fff;
    border-bottom: 2px solid #086BA9;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: #000; background-color: #ececec; border-color: #086BA9 #086BA9 #fff; }
.nav-tabs .nav-link { margin-bottom: -2px; border: 2px solid transparent; border-top-left-radius: .5rem; border-top-right-radius: .5rem; border-color: #efefef #efefef #086BA9; }
.nav-link {
    display: block; padding: .5rem 1rem;
    font-size: 1.35rem; font-weight: 700;
    /*color: var(--bs-nav-link-color);*/
    text-decoration: none; background: 0 0; border: 0;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}
.nav-tabs .nav-link:hover { isolation: isolate; text-decoration: underline; border-color: #999 #999 #086BA9; }
.nav-tabs .nav-link.active:hover { text-decoration: none; border-color: #086BA9 #086BA9 #fff; }
.nav-tabs .nav-link:focus { isolation: isolate; border-color: #086BA9 #086BA9 #fff; background-color: #ececec; }
.nav-link:focus-visible { outline: 0; box-shadow: 0 0 0 0.25rem rgba(13,110,253,.5); }
.tab-pane h3 { padding-bottom: 0; }

.titulo-mobile { margin-top: 1rem; display: none; }

/* Tabelas */
.exemplo-tabela,
.exemplo-tabela tr,
.exemplo-tabela td,
.exemplo-tabela th { border: 1px solid #333; padding: .3rem; }
.exemplo-tabela th,
.exemplo-tabela td.tit { font-weight: 700; }

.exemplo-form { border: 2px solid #086BA9; border-radius: 1rem; width: 100%; background-color: #f3f3f3; font-size: 1rem; padding: 1rem; margin: 1rem 0 0 0; }
.exemplo-atalhos { border: 2px solid #333333; border-radius: 1rem; width: 100%; background-color: #f3f3f3; font-size: 1rem; padding: 1rem; margin-bottom: .5rem; }
.exemplo-atalhos h3 { font-size: 1.2rem; color: #086BA9; }
.exemplo-zoom { background-color: #efefef; }

p.video { margin-top: -1rem; }
p.video > .icons { color: #086BA9; font-size: 3rem; vertical-align: -1.2rem; padding-right: .5rem; text-rendering: optimizeLegibility; }

main blockquote { color: #086BA9; font-family: 'Courgette', cursive; font-size: 2rem; text-align: center; line-height: 2rem; margin-bottom: 0; padding: 1rem 0; }
main blockquote p { margin-bottom: 0; }
main blockquote p:before { content: "\0022"; font-family: 'Times New Roman', Times, serif; font-size: 10rem; margin: 2rem 0 0 -4.5rem; position: absolute; opacity: 0.3; }
main blockquote p:after { content: "\0022"; font-family: 'Times New Roman', Times, serif; font-size: 10rem; margin: 1.8rem 0 0 1.5rem; position: absolute; opacity: 0.3; }

main blockquote > cite { color: #333; font-family: 'Noto Sans JP', sans-serif; font-size: .8rem; border-top: 1px solid #333; margin-top: -.5rem; }

/* FOOTER */
footer.fixo { margin-top: 3rem; position: fixed; bottom: 0; width: 100%; }
footer p { color: #ffffff; margin-bottom: 0; }
footer a { color: #FEEF8E; text-decoration: none; border-bottom: 1px dotted #FEEF8E; }
footer a:hover { color: #333; background-color: #FEEF8E; }
footer a:focus { color: #333; background-color: #FEEF8E; outline: .125rem solid #FEEF8E; outline-offset: .125rem; }

.bg-rodape { background-color: #333; background-size: cover; padding: .5rem 0; margin-top: 1rem; }

/* ------------- EXEMPLOS DIVERSOS ------------- */

/* Font Size - ZOOM */
.pxFont h2 { font-size: 32px; }
.pxFont p { font-size: 16px; }	
.remFont h2 { font-size: 2rem; }
.remFont p { font-size: 1rem; }
.pxLineHeight h2 { line-height: 40px; }
.pxLineHeight p { line-height: 24px; }
.remLineHeight h2 { line-height: 1.25rem; }
.remLineHeight p { line-height: 1.5rem; }
.unitlessLineHeight h2 { line-height: 1.25; }
.unitlessLineHeight p { line-height: 1.5rem; }
.btn-teste-zoom-a { font-size: 16px; width: 300px; }
.btn-teste-zoom-b { font-size: 16px; width: 20rem; max-width: 100%; }
.btn-teste-zoom-c { font-size: 1rem; width: 20rem; max-width: 100%; }

.title-size-relative {
    font-size: 2em;
    line-height: calc(1.2em + .2vw);
    word-break: break-word;
}
.text-size-relative {
    font-size: 1.125em;
    line-height: calc(1.5em + .2vw);
    word-break: break-word;
}
@media screen and (min-width: 48em) {
    .title-size-relative { font-size: calc(.35842vw + 2em); }
    .text-size-relative { font-size: calc(.35842vw + .95296em); }
}

/* Unidades de Medidas - ZOOM */
.box-exemplo {
    background-color: rgb(255, 202, 117);
    border: 5px solid rgb(250, 67, 0);
    padding: 10px;
    margin: 1em 0;
}
.box-exemplo-px { width: 200px; }
.box-exemplo-vw { width: 20vw; }
.box-exemplo-em { width: 10em; }


/* ------------- MEDIA QUERIES ------------- */

@media (max-width: 575.98px) {
    .container { max-width: 90%; }
    .ocultar-mobile-ruim { display: none!important; }
    .ocultar-mobile-bom { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
    .exemplo-form-ruim { background-color: rgb(250, 215, 215)!important; }
    .exemplo-form-bom { background-color: rgb(204, 249, 195)!important; }

    input { width: 100%!important; }

    .titulo-mobile { margin-top: 1rem; display: block; }
}
@media (max-width: 767.98px) {
    .no-mobile { display: none!important; }
    .mobile-center { text-align: center!important; }

    h1 { font-size: 2rem; font-weight: 700; line-height: 2.2rem; padding-bottom: 1rem; }
    h2 { font-size: 1.6rem; font-weight: 700; line-height: 1.8rem; padding-bottom: 1rem; }
    h3 { font-size: 1.3rem; font-weight: 700; line-height: 1.5rem; padding-bottom: .5rem; }
    h2.exemplos { font-size: 1.6rem; color: #086BA9; }

    .dir-mobile { flex-direction: column!important; }

    .destaque-duplo { color: #c9174f; background-color: #fff; padding: 0; border-radius: 0; }

    ul.nav-tabs { padding-left: .5rem!important; }

    .nav-link { font-size: 1.1rem; font-weight: 700; }
    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: #000; text-decoration: none; background-color: #ececec; border-color: #086BA9 #086BA9 #086BA9; }
    .nav-tabs .nav-link { text-decoration: underline; margin-bottom: 2px; border: 2px solid transparent; border-top-left-radius: .5rem; border-top-right-radius: .5rem; border-bottom-left-radius: .5rem; border-bottom-right-radius: .5rem; }
    .nav-tabs .nav-link:hover { isolation: isolate; text-decoration: underline; border-color: #999 #999 #086BA9; }
    .nav-tabs .nav-link.active:hover { text-decoration: none; border-color: #086BA9 #086BA9 #086BA9; }
    .nav-tabs .nav-link:focus { isolation: isolate; border-color: #086BA9 #086BA9 #086BA9; background-color: #ececec; }
    .nav-link:focus-visible { outline: 0; box-shadow: 0 0 0 0.25rem rgba(13,110,253,.5); }

}
@media (max-width: 991.98px) {
    .container { max-width: 90%; }
}
@media (max-width: 1199.98px) { }
@media (max-width: 1399.98px) { }

/* ------------- PRINT ------------- */

@media print {
    *,
    *:before,
    *:after { background: transparent!important; color: #000!important; -webkit-box-shadow: none!important; box-shadow: none!important; text-shadow: none!important; }
    pre { white-space: pre-wrap!important; }
    pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
    
    thead { display: table-header-group; }
    tr, img { page-break-inside: avoid; }
    p, h2, h3 { orphans: 3; widows: 3; }
    h2, h3 { page-break-after: avoid; }

    main p, main ul li, main ol li, footer p { font-size: 0.8rem; }
    cite { font-size: .8rem; font-weight: 700; color:#441214; }
    h1 { font-size: 2rem; }
    h1 span { line-height: .5rem; }
    h1 small { font-size: 1.5rem; }
    h2 { font-size: 1.4rem; }
    h2.principio { font-size: 1.5rem; line-height: 1.5rem; margin-top: 3rem; margin-bottom: .5rem; }
    h3 { font-size: 1.2rem; }

    .print-red { color: red!important; }
    code { border: 1px solid #000; border-radius: 6px; }
    .exemplo-form { border: 1px solid #000; border-radius: 1rem; }

    .print { display: block!important; }
    .no-print { display: none!important; }

    p.tit-aulas { font-size: 1rem; font-weight: 600; }

    .dir-mobile { flex-direction: row!important; }
    .titulo-mobile { margin-top: .5rem; margin-bottom: -1rem; display: block; }
    .destaque-duplo { color: 0 0 0 0.25rem #0d6efd80!important; background-color: #fff; padding: 0; border-radius: 0; }

    ul.lista-detalhe li,
    ol.lista-detalhe li { font-size: .8rem; margin-bottom: 0.6rem; line-height: 1.6rem; }
    ol.lista-detalhe li:before { font-size: 1rem; }

    ul.nav-tabs { padding-left: .1rem!important; }
    .nav-link { font-size: .7rem; font-weight: 500; }
    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { color: #000; text-decoration: none; background-color: #ececec; border-color: #086BA9 #086BA9 #086BA9; }
    .nav-tabs .nav-link { text-decoration: none; margin-bottom: 2px; border: 2px solid transparent; border-top-left-radius: .5rem; border-top-right-radius: .5rem; border-bottom-left-radius: .5rem; border-bottom-right-radius: .5rem; }
    .nav-tabs .nav-link:hover { isolation: isolate; text-decoration: underline; border-color: #999 #999 #086BA9; }
    .nav-tabs .nav-link.active:hover { text-decoration: none; border-color: #086BA9 #086BA9 #086BA9; }
    .nav-tabs .nav-link:focus { isolation: isolate; border-color: #086BA9 #086BA9 #086BA9; background-color: #ececec; }
    .nav-link:focus-visible { outline: 0; box-shadow: 0 0 0 0.25rem rgba(13,110,253,.5); }
  }