:root {
    --color-cinza: #3A3836;
    --color-azul-livro: #283583;
    --color-lilas-livro: #C1C8E7;
    --color-lilas2-livro: #D9DEF0;
    --color-cinzaclaro1: #EEEEEE;
    --color-cinzaclaro2: #E3E0DD;
    --color-cinzaclaro3: #C9C6C3;
}

.azul {
    color: var(--color-azul) !important;
}

.vermelho {
    color: var(--color-vermelho) !important;
}

.lilas {
    color: var(--color-lilas) !important;
}

.amarelo {
    color: var(--color-amarelo) !important;
}

.verde {
    color: var(--color-verde) !important;
}

.laranja {
    color: var(--color-laranja) !important;
}

.azulroyal {
    color: var(--primary) !important;
}

.offwhite {
    color: var(--color-offwhite) !important;
}

.cinza {
    color: var(--color-cinza) !important;
}

body {
    /*background-color: var(--color-offwhite);*/
    /*color: var(--color-azul-livro);*/
    /*font-family: 'Gantari', sans-serif;*/
    /*text-align: justify;*/
}

.container {
    /*background-color: var(--color-offwhite);*/
    color: var(--color-azul-livro);
    /*font-family: 'Gantari', sans-serif;*/
    /*text-align: justify;*/
}

.conteudo {
    background-color: var(--color-offwhite);
    color: var(--color-azul-livro);
    font-family: 'Gantari', sans-serif;
    /*text-align: justify;*/
    margin-left: 3%;
    margin-right: 3%;
    padding: 8px;
}

.conteudo h1,
.container.atividade h1 {
    font-family: 'Oswald', sans-serif;
    color: var(--color-azul-livro);
    margin-top: 20px;
    margin-bottom: 30px;
    text-align: left;
    font-size: 200%;
    text-transform: uppercase;
}

.conteudo h2,
.container.atividade h2 {
    font-family: 'Oswald', sans-serif;
    color: var(--color-azul-livro);
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: left;
    font-weight: bold;
    font-size: 150%;
}

.conteudo h3,
.container.atividade h3 {
    font-family: 'Bree Serif', sans-serif;
    color: var(--color-offwhite);
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: left;
}

.conteudo h4,
.container.atividade h4 {
    font-family: 'Gantari', sans-serif;
    color: var(--color-azul-livro);
    margin-top: 30px;
    margin-bottom: 20px;
    text-align: left;
    font-weight: bold;
    font-size: 110%;
}

.conteudo h5,
.container.atividade h5 {
    font-family: 'Bree Serif', sans-serif;
    color: var(--color-azul);
    margin-top: 20px;
    font-weight: bold;
    font-size: 180%;
}

.conteudo h6,
.container.atividade h6 {
    font-family: 'Gantari', sans-serif;
    color: var(--color-azul-livro);
    text-align: left;
}

.container.atividade>.row.tituloatividade h1 {
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    color: #283583;
    text-align: left;
    font-weight: bold;
    font-size: 150%;
    margin-top: 0 !important;
    margin-bottom: 0.3em !important;
}

.container.atividade>.row.tituloatividade h2 {
    border-radius: 1rem;
    width: fit-content;
    color: #FFF;
    background-color: var(--primary);
    font-family: 'Gantari', sans-serif;
    cursor: default;
    text-decoration: none;
    display: inline-block;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.container.atividade>.row.tituloatividade>div[class*='col'] {
    display: block !important;
    align-self: center !important;
}

.container.atividade>.row.tituloatividade p {
    margin-top: 1em !important;
}

.conteudo>p {
    text-align: justify;
}

.conteudo td,
th {
    background-color: var(--color-cinzaclaro1);
    color: var(--color-azul-livro);
}

.conteudo th {
    background-color: var(--color-lilas-livro) !important;
}

.td-destaque {
    background-color: var(--color-lilas-livro) !important;
    font-weight: bold !important;
}

.conteudo table.bordered th,
.conteudo table.bordered td {
    border: 1px solid #dee2e6;
}

.conteudo table.bordered tr:first-child th {
    border-top: 0;
}

.conteudo table.bordered tr:last-child td {
    border-bottom: 0;
}

.conteudo table.bordered tr td:first-child,
.conteudo table.bordered tr th:first-child {
    border-left: 0;
}

.conteudo table.bordered tr td:last-child,
.conteudo table.bordered tr th:last-child {
    border-right: 0;
}

.card-destaque2 {
    background-color: var(--color-cinzaclaro2);
    color: var(--color-azul-livro);
    line-height: 1.8;
    margin-left: 15%;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-left: 13%;
    padding-right: 4%;
    border-radius: 0px;
    border-style: none;
}

.card-destaque {
    background-color: var(--color-cinzaclaro2);
    color: var(--color-azul-livro);
    line-height: 1.8;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-left: 6%;
    padding-right: 4%;
    border-radius: 0px;
    border-style: none;
}

.blockquote {
    border-left: .2rem solid var(--color-azul-livro);
    margin-top: 15px;
    margin-bottom: 30px !important;
    margin-left: -1rem;
    padding: 0px 0px 10px .8rem;
    font-size: 80%;
}

.card-vocesabia {
    background-color: var(--color-azul);
    color: #FFFFFF;
    line-height: 1.8;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-left: 6%;
    padding-right: 4%;
    border-radius: 0px;
    border-style: none;
}

.blockquote-vocesabia {
    border-left: 3px solid #FFFFFF;
    margin-top: 15px;
    margin-bottom: 30px !important;
    margin-left: -23px;
    padding: 0px 0px 0px 20px;
    font-size: 80%;
}

.btn-collapse {
    color: var(--color-azul-livro);
    border: 1px solid var(--color-azul-livro);
}

.card-transcricao {
    background-color: var(--color-cinzaclaro2);
    color: var(--color-azul-livro);
    line-height: 1.8;
    margin-bottom: 20px;
    padding-left: 4%;
    padding-right: 4%;
    border-radius: 0px;
    border-style: none;
}

.blockquote-transcricao {
    border-left: 3px solid var(--color-azul-livro);
    margin-top: 15px;
    margin-bottom: 30px !important;
    margin-left: -20px;
    padding: 0px 0px 0px 20px;
    font-size: 80%;
}


.card-atividade {
    background-color: #FFFFFF;
    color: var(--color-azul-livro);
    font-family: 'Gantari', sans-serif;
    /*text-align: justify;*/
    margin-top: 10px;
    padding: 20px;
}


.atividade {
    background-color: transparent !important;
    font-family: 'Gantari', sans-serif;
    /*text-align: justify;*/
}

.tituloatividade {
    /*background-color: var(--color-cinzaclaro1);*/
    padding: 10px;
}

.tituloatividade h1 {
    font-family: 'Oswald', sans-serif;
    color: var(--color-azul-livro);
    text-align: left;
    font-weight: bold;
    font-size: 170%;
    text-transform: uppercase;
}

.tituloatividade h2 {
    font-family: 'Oswald', sans-serif;
    color: var(--color-azul);
    text-align: left;
    font-weight: bold;
    font-size: 150%;
}

.btn-atividade {
    background: var(--color-azul) !important;
    border-color: var(--primary) !important;
    color: #FFFFFF;
    margin-top: 10px;
    margin-bottom: 20px;
}

.btn-atividade:hover {
    background: var(--primary) !important;
    color: #FFFFFF;
}

.btn-collapse:hover {
    background: var(--primary) !important;
    color: #FFFFFF;

}

.imagem {
    border-radius: 1rem;
    /*margin: 2%;/* /*Margem removida para alinhar os blockquotes*/
    margin: 2% 0;
    max-width: 90%;
    height: auto;
}

@media (max-width: 768px) {
    img.imagem.w-25 {
        width: 50% !important;
    }

    img.imagem.w-50 {
        width: 75% !important;
    }
}

@media (max-width: 576px) {
    img.imagem {
        width: 100% !important;
    }
}

.img-zoom {
    cursor: zoom-in;
}

div.container-img-zoomed {
    background: rgba(0, 0, 0, .5);
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    display: none;
    cursor: zoom-out;
    text-align: center
}

div.container-img-zoomed>img {
    max-width: 100%;
    max-height: 100%;
    bottom: 0;
    left: 0;
    margin: auto;
    overflow: auto;
    position: fixed;
    right: 0;
    top: 0;
    -o-object-fit: contain;
    object-fit: contain;
    background: #FFF;
    padding: 0.5rem;
}

.icon70 {
    max-width: 70px;
    height: auto;
}

.video {
    aspect-ratio: 16 / 9;
    width: 100%;
}

.grid-head {
    background-color: var(--color-lilas-livro) !important;
    color: var(--color-azul-livro);
    font-weight: bold;
    margin-left: 0;
    margin-right: 0;
    padding-left: 2% !important;
    padding-right: 2% !important;
}

.grid-content {
    background-color: var(--color-cinzaclaro1) !important;
    color: var(--color-azul-livro);
    margin-left: 0;
    margin-right: 0;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-cinzaclaro2);
}

.grid-content-first-col {
    display: grid;
    grid-template-columns: 1fr 3fr;
}

@media (max-width: 1200px) {
    .show-drawer-left .grid-content-first-col {
        display: block !important;
    }

    .show-drawer-left .grid-content-first-col .grid-content-text {
        margin-left: 0 !important;
    }

    .show-drawer-left .grid-content-first-col .grid-content-text p {
        margin-left: 0 !important;
    }
}

.cor1-fundo {
    background-color: var(--color-cinzaclaro2) !important;
}

.cor2-fundo {
    background-color: var(--color-lilas-livro) !important;
}

.cor3-fundo {
    background-color: var(--color-lilas2-livro) !important;
}

.cor4-fundo {
    background-color: var(--color-cinzaclaro3) !important;
}

.cor5-fundo {
    background-color: var(--color-cinzaclaro1) !important;
}

.espacamento-line-height {
    line-height: 250%
}


.badge-azul {
    color: #FFF !important;
    background-color: var(--color-azul) !important;
    font-size: medium;
}

.badge-vermelho {
    color: #FFF !important;
    background-color: var(--color-vermelho) !important;
    font-size: medium;
}

.badge-lilas {
    color: #FFF !important;
    background-color: var(--color-lilas) !important;
    font-size: medium;
}

.badge-amarelo {
    color: #FFF !important;
    background-color: var(--color-amarelo) !important;
    font-size: medium;
}

.badge-verde {
    color: #FFF !important;
    background-color: var(--color-verde) !important;
    font-size: medium;
}

.badge-laranja {
    color: #FFF !important;
    background-color: var(--color-laranja) !important;
    font-size: medium;
}

.badge-azulroyal {
    color: #FFF !important;
    background-color: var(--primary) !important;
    font-size: medium;
}

.badge-offwhite {
    color: var(--color-cinza) !important;
    background-color: var(--color-offwhite) !important;
    font-size: medium;
}

.badge-cinza {
    color: #FFF !important;
    background-color: var(--color-cinza) !important;
    font-size: medium;
}

.badge-rosa {
    color: #FFF !important;
    background-color: #D81B60 !important;
    font-size: medium;
}

.badge-verdelima {
    color: #FFF !important;
    background-color: #8BC34A !important;
    font-size: medium;
}

.badge-azulturquesa {
    color: #000 !important;
    background-color: #00E5FF !important;
    font-size: medium;
}

.badge-vermelho2 {
    color: #FFF !important;
    background-color: #F44336 !important;
    font-size: medium;
}

div.code-container {
    background-color: #1f1f1f;
    color: white !important;
    padding: 1rem 1rem 0.25rem 1rem;
    border-radius: 0.325rem;
    display: grid;
    width: 100%;
}

div.code-container pre {
    margin: 0;
    padding-bottom: .75rem
}

div.code-container pre code {
    color: #d4d4d4 !important;
}

div.code-container pre code span.comment {
    color: #6a9955 !important;
}

/* Banner lateral com nome do curso */
div#bottom-course-banner {
    z-index: 1050;
    height: auto;
    position: fixed;
    bottom: 0;
    left: 0;
    top: auto;
    width: 285px;
    max-width: 285px;
    margin-left: -50rem;

    /* FF4+ */
    -moz-transition: all 0.3s ease-out;
    /* Opera 10.5+ */
    -o-transition: all 0.3s ease-out;
    /* Saf3.2+, Chrome */
    -webkit-transition: all 0.3s ease-out;
    /* IE10 */
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

div#bottom-course-banner .container-course-banner {
    background-color: #f8f9fa;
    margin-right: 0 1.1rem;
    padding: 10px 0;
}

div#bottom-course-banner .container-course-banner img {
    width: 180px;
}

#page.drawers.drag-container div#bottom-course-banner {
    margin-left: -50rem !important;
}

#page.drawers.show-drawer-left.drag-container div#bottom-course-banner {
    margin-left: 0 !important;
}

/* Fim do banner lateral com nome do curso */

@media (max-width: 576px) {
    #page.drawers {
        overflow: unset !important;
    }

    nav.navbar.fixed-top,
    div.secondary-navigation.moove {
        position: absolute !important;
    }
}

div.description-inner .description-inner-noshow {
    display: none !important;
}

div.activity-description .activity-description-noshow {
    display: none !important;
}