:root {
    /* Cores da identidade visual */
    --color-azul-marinho: #1E2C44;
    --color-azul: #6A89FF;
    --color-azul-20: rgba(106, 137, 255, 0.3);
    --color-verde: #D3EF62;
    --color-cinza: #E7E8ED;
    --color-cinza-40: rgba(231, 232, 237, 0.4);
    
    --qtde-trilhas-cursos: 0;
    --porcentagem: 0%;
    --bg-color-progressbar: var(--color-cinza-40);
    --bg-color-progress-bar: var(--color-cinza);
    --bdr-shadow-dafault: 0 0 0.5em #3E3E407E;
}

body, html {
    height: 100%;
    overflow: hidden;
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block; }

.alert { font-size: 15px; }

.width-fit-content { width: fit-content!important; }
.heigth-fit-content { height: fit-content!important; }

.app {
    width: 100%;
    min-height: 100%;
    background-color: var(--color-cinza-40);
    overflow-x: hidden;
}

.app .app-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    background: var(--bg-color-header);
    z-index: 1030;
}

.app .app-header .navbar {
    padding-left: 5.5rem!important;
    padding-right: 5.5rem!important;
}

.app .app-aside {
    position: fixed;
    top: 4.1rem;
    bottom: 0;
    left: 0;
    padding: 0;
    width: 4.5rem;
    max-width: 4.5rem;
    z-index: 1030;
    border-right: 1px solid rgba(20,20,31,.05);
    background-color: var(--color-cinza);
}

.app .app-aside.app-embeded { top: 0!important; }

.app .app-aside .aside-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.app .app-aside .aside-content .aside-menu {
    position: relative;
    flex: 1;
    overflow-y: auto;
}

.app .app-aside .aside-content .aside-menu .stacked-menu {
    position: relative;
    padding: 0.25rem 0;
    padding-top: 0.5rem;
    background-color: transparent;
    width: 100%;
    margin-bottom: 1rem;
}

.app .app-aside .aside-content .aside-menu .stacked-menu ul.menu {
    display: block;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.app .app-aside .aside-content .aside-menu .stacked-menu .menu .menu-item,
.app .aside-menu-mobile .offcanvas .offcanvas-body .menu .menu-item {
    text-align: center;
    max-height: 50px;
    padding: 5px 0px 5px 0px;
    list-style: none;
}

.app .app-aside .aside-content .aside-menu .stacked-menu .menu .menu-item .menu-link {
    height: 100%;
    width: 100%;
    padding-top: 0.325rem;
    padding-bottom: 0.325rem;
    padding-right: 0;
    padding-left: 0;
    font-size: 1.3rem;
    line-height: 1.25rem;
}

/* #aside-menu-profile, */
.aside-header .dropend .menu-link,
.aside-footer .dropend .menu-link,
.app .app-aside .aside-content .aside-menu .stacked-menu .menu .menu-item .menu-link,
.app .aside-menu-mobile .offcanvas .offcanvas-body .menu .menu-item .menu-link,
#idiomas-aula .dropdown #btn-idioma-aula,
#idiomas-aula .dropdown .dropdown-menu .menu-link { color: var(--color-azul-marinho)!important; }

.aside-header .dropend .menu-link:hover,
.aside-footer .dropend:hover,
.app .app-aside .aside-content .aside-menu .stacked-menu .menu .menu-item:hover,
#idiomas-aula .dropdown #btn-idioma-aula:hover,
.app .aside-menu-mobile .offcanvas .offcanvas-body .menu .menu-item:hover { background-color: var(--color-azul-20)!important; }

.aside-header .dropdown-menu .menu-link.active,
.aside-header .dropdown-menu .menu-link.active,
.aside-footer .dropdown-menu .menu-link:active,
.aside-footer .dropdown-menu .menu-link.active,
#language-menu-mobile .menu-item.active,
.menu-conteudos .dropdown-menu .menu-link:active,
.app .aside-menu-mobile .offcanvas .offcanvas-body .menu .menu-item:active,
#idiomas-aula .dropdown #btn-idioma-aula:active,
#idiomas-aula .dropdown .btn-outline-secondary.dropdown-toggle.show,
#idiomas-aula .dropdown .dropdown-menu .menu-link:active { background-color: var(--color-azul-20)!important; }

#idiomas-aula .dropdown .menu-item .show { background-color: var(--color-azul-20)!important; }

.app .app-aside .aside-content .aside-header,
.app .app-aside .aside-content .aside-footer {
    display: block;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.app .app-main {
    position: absolute;
    height: 100%!important;
    width: 100%!important;
    padding-top: 4.1rem;
    padding-left: 4.5rem;
    overflow-x: hidden;
    overflow-y: auto;
}

.app .app-main.app-embeded { padding-top: unset!important; }

.app .app-main .app-main-content,
.app .app-main-funcionalidades .app-main-content {
    display: flex;
    flex-direction: column;
    height: 100%!important;
    width: 100%!important;
}

.app .app-main .app-main-content .app-main-breadcrumb {
    padding: 0.5rem;
    padding-left: 1rem;
    font: 18px "Helvetica Neue", Helvetica, Montserrat, sans-serif;
}

.app .app-main .app-main-content .informacoes-trilha,
.app .app-main .app-main-content .informacoes-curso,
.app .app-main .app-main-content .btns-acao-trilha-curso,
.app .app-main .app-main-content .content,
.app .app-main .app-footer,
.app .app-main-funcionalidades .app-main-content .content,
.app .app-main-funcionalidades .app-footer {
    width: 100%;
    padding-left: 5rem!important;
    padding-right: 5rem!important;
}

.app .app-main .app-main-content .content #player-youtube,
.app .app-main .app-main-content .content #player-vimeo { min-height: 70vh!important; }

.informacoes-trilha .progress,
.informacoes-curso .progress {
    height: 0.6rem!important;
    width: 80%!important;
    background-color: var(--bg-color-progress-bar);
}

.app .app-main .app-footer p,
.app .app-main .app-footer .navbar .navbar-nav .nav-link { font-size: 14px!important; }


.app-main-breadcrumb {
    --bs-breadcrumb-divider: '>';
    font-size: 16px!important;
}

#btn-recuperar-senha:hover { background-color: #DAE0E5!important; }

.app .app-main .app-main-content .content .lista-notificacoes .div-notificacao:hover,
.app .app-main .app-main-content .content .lista-anotacoes .div-anotacao:hover {
    cursor: pointer;
    box-shadow: 0 0 0.7em #3E3E40;
    transform: scale(1.01);
}

.notificacao-success:hover {
    cursor: pointer;
    box-shadow:  0 .5rem 1rem var(--bs-success);
     transition: transform ease 0.3s, box-shadow ease 0.3s;    /* transform: scale(1.01); */
    transform: translateY(-2px);
}

.notificacao-danger:hover {
    cursor: pointer;
    box-shadow: 0 .5rem 1rem var(--bs-danger);
    transition: transform ease 0.3s, box-shadow ease 0.3s;    /* transform: scale(1.01); */
    transform: translateY(-2px);
}


.status-todos-colors {
    background: cadetblue!important;
    color: white!important;
}

.status-em-andamento-colors {
    background-color: darkorange!important;
    color: var(--bs-black)!important;
    /* color: white!important; */
}

.status-confirmada-colors {
    background-color: lightcoral!important;
    color: white!important;
}

.status-ocorrendo-colors {
    background-color: darkorange!important;
    color: white!important;
}

@media screen and (min-width: 992px) {
    #btn-menu-mobile { display: none; }
    .app-aside { display: block; }
}

@media screen and (max-width: 991px) {
    #btn-menu-mobile { display: inline-block; }
    .app-aside { display: none; }
    .app .app-main { padding-left: 0rem!important; }

    .app .app-header .navbar,
    .app .app-main .app-main-content .content,
    .app .app-main .app-main-content .btns-acao-trilha-curso,
    .app .app-main .app-main-content .app-footer,
    .app .app-main-funcionalidades .app-main-content .content,
    .app .app-main-funcionalidades .app-main-content .app-footer {
        padding-left: 2rem!important;
        padding-right: 2rem!important;
    }

    .app .app-main .app-main-content .app-footer .navbar .container-fluid { justify-content: center; }
}

/** FUNCIONALIDADE **/
.app .app-main-funcionalidades {
    position: absolute;
    height: 100%!important;
    width: 100%!important;
    padding-top: 4.1rem;
    overflow-x: hidden;
    overflow-y: auto;
    font-size: 16px;
}

.text-bg-pink {
    color: var(--bs-white);
    background: var(--bs-pink);
}