body {
    background-color: var(--branco-puro);
}
main .container-fluid {
    max-width: 650px;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
}
.contentIntern .card {
    border: none;
    border-radius: 0;
}
.contentIntern .card .card-body {
    padding-top: 10px;
    padding-bottom: 15px;
}
.contentIntern .boxContent {
    color: var(--cinza-escuro);
    font-size: 16px;
    font-weight: 300;
    margin-top: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    border-radius: 20px;
    border: 1px solid var(--cinza-clarinho);
    padding: 20px;
}
.contentIntern .card .title {
    font-size: 26px;
    color: var(--azul-escuro);
    font-weight: 700;
    margin-bottom: 15;
}
.contentIntern .card .description {
    color: var(--cinza-escuro);
    font-size: 18px;
    font-weight: 300;
    line-height: 22px;
}
.contentIntern #cronograma .boxDescription {
    max-width: 547.73px;
    width: 100%;
}
.contentIntern #cronograma .description,
.offcanvasAula .offcanvas-body .description {
    color: var(--cinza-secundario);
    font-size: 16px;
    font-weight: 300;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
    padding-right: 10px;

    margin-bottom: 0;
}
.contentIntern #cronograma .description.expanded,
.offcanvasAula .offcanvas-body .description.expanded {
    -webkit-line-clamp: unset;
    overflow: visible;
    padding-bottom: 25px;
}
.contentIntern .boxInfo .card-body {
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 26px;
}
.contentIntern .boxInfo .title {
    font-size: 24px;
    color: var(--azul-escuro);
    font-weight: 400;
}
.contentIntern .boxInfo .boxDescription .title {
    font-size: 16px;
    color: var(--cinza-escuro);
    font-weight: 400;
}
.contentIntern .boxInfo .boxStage .stage {
    font-size: 16px;
    color: var(--cinza-secundario);
    font-weight: 300;
}
.contentIntern .boxContentDoc {
    border-radius: 20px;
    border: 1px solid var(--cinza-clarinho);
    padding: 20px;
}
.contentIntern .boxContentDoc,
.contentIntern .boxLeft {
    display: flex;
    justify-content: space-between;
}
.contentIntern .boxLeft {
    gap: 10px;
    align-items: center;
    justify-content: center;
}
.contentIntern .boxLeft .boxTitle p {
    margin-bottom: 0;
    font-weight: 300;
    font-size: 16px;
    color: var(--cinza-escuro);
}
.contentIntern .boxInfo .boxImage,
.contentIntern .boxInfo .boxDownload {
    background-color: var(--azul-escuro);
    width: 20px;
    height: 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 2px;
}
.contentIntern .statusProgress .boxInfo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    margin-top: 20px;
}
.contentIntern .statusProgress .boxInfo .title {
    font-weight: 300;
    font-size: 18px;
    color: var(--cinza-escuro);
    margin-bottom: 0;
}
.contentIntern .statusProgress .boxInfo .porcent {
    font-weight: 300;
    font-size: 16px;
    color: var(--cinza-escuro);
    margin-bottom: 0;
}
.contentIntern .certificado {
    border-radius: 10px;
    min-height: 35px;
    margin-top: 20px;
}
.contentIntern .boxDescription .card-body {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 75px;
    padding-right: 75px;
}
.contentIntern .boxDescription .card-body .top {
    margin-bottom: 20px;
}
.contentIntern .boxDescription .card-body .top,
.contentIntern .boxDescription .card-body .bottom {
    display: flex;
    gap: 20px;
    justify-content: space-between;
}
.contentIntern .boxDescription .box {
    display: flex;
    gap: 5px;
    max-width: 200px;
    width: 100%;
}
/* .contentIntern .boxDescription .box .boxInfo {
  width: 195px;
} */
.contentIntern .boxDescription .box .boxInfo .title,
.contentIntern .boxDescription .box .boxInfo .description {
    margin-bottom: 0;
    color: var(--branco-puro);
    margin-top: -3px;
}
.contentIntern .boxDescription .box .boxInfo .title {
    font-size: 16px;
    font-weight: 400;
}
.contentIntern .boxDescription .box .boxInfo .description {
    font-size: 16px;
    font-weight: 300;
}
.contentIntern .btn-player {
    width: 28px;
    height: 28px;
    background-color: var(--azul-escuro);
    border-radius: 50px;

    display: flex;
    align-items: center;
    justify-content: center;
}
.contentIntern .btn-player.checked {
    background-color: var(--verde-claro);
}
.offcanvasAula {
    width: 650px;
    max-width: 100%;
    margin: 0 auto;
    /* min-height: 530px; */
    height: 700px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.offcanvasAula .btn-proximo {
    max-width: 100%;
    width: 100px;
    height: 29px;
    background-color: var(--branco-transparente-05);
    color: var(--branco-puro);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 400px;
}
.offcanvasAula .offcanvas-body {
    padding: 15px;
}
.offcanvasAula .offcanvas-body .title {
    font-size: 18px;
    font-weight: 300;
    color: var(--roxo-puro);
}
.offcanvasAula .offcanvas-header .offcanvas-title,
.offcanvasAula .offcanvas-body .description {
    color: var(--cinza-escuro);
    font-weight: 300;
    font-size: 16px;
    line-height: 21px;
}
.offcanvasAula .boxFooter {
    min-height: 68px;
    background-color: var(--roxo-secundario);
    padding: 15px;

    display: flex;
    align-items: center;
    gap: 15px;
}
.offcanvasAula .boxFooter .boxProximaAula {
    font-size: 16px;
    color: var(--branco-puro);
    font-weight: 300;
    width: 475px;
    max-width: 100%;
}
.offcanvasAula .boxFooter .boxProximaAula p {
    margin-bottom: 0;
    margin-top: -2px;
}
.offcanvasAula .boxFooter .boxProximaAula span {
    font-weight: 400;
}
.offcanvasAula .offcanvas-header {
    padding-top: 17.5px;
    padding-bottom: 17.5px;
    padding-left: 15px;
    padding-right: 15px;
}

.boxVideo {
    position: relative;
    width: 100%;
    max-width: 650px;
    height: 371px;
    /* height: 220px; */
    aspect-ratio: 16 / 9;
    margin: 0 auto;
}

.videoMask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("/images/mascara1.png") center center / cover no-repeat;
    cursor: pointer;
    z-index: 2;
}

.primeira-aula {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("/images/primeira-aula1.png") center center / cover no-repeat;
    cursor: pointer;
    z-index: 2;
}

.assista-novamente {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("/images/assista-novamente1.png") center center / cover
        no-repeat;
    cursor: pointer;
    z-index: 2;
}

.continue-onde-parou {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("/images/continue-onde-parou1.png") center center / cover
        no-repeat;
    cursor: pointer;
    z-index: 2;
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
}
@media (max-width: 992px) {
    .contentIntern .boxDescription .card-body .top,
    .contentIntern .boxDescription .card-body .bottom {
        flex-wrap: wrap;
    }
}
@media (max-width: 650px) {
    .offcanvasAula {
        height: 490px;
    }
}
@media (max-width: 768px) {
    .receitas .cardReceitas,
    .listCardSecondaryXL .cardCustom,
    .cursos .cardCursos,
    .listCardSecondaryXL .card {
        width: 100% !important;
        max-width: 100% !important;
    }
    /* .cursos .filterPrimary .filterButton,
    .filtroPopulares .filterPrimary .filterButton {
        width: 100% !important;
        max-width: 280px;
    } */
}