/* Top */
.wdk-my-journey-heading {
    color: var(--tertiary);
    margin-bottom: 24px;
}

.wdk-my-journey-details {
    margin: 0 16px 0 16px;
}

@media (max-width: 576px) {
    .wdk-my-journey-details {
        margin: 0;

        background-color: white;
        box-shadow: var(--box-shadow);
        border-radius: 8px;
        padding: 16px;
    }
}

.wdk-my-journey-details .wdk-my-journey-description {
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0px;
    padding-bottom: 0px !important;
    font-size: 14px;
}

.wdk-my-journey-percent {
    width: 130px;
    height: 130px;
}

/* Accordion */

.accordion-header button[data-bs-toggle="collapse"] {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    padding: 16px 48px 16px 16px !important;
    font-size: 16px;
    font-weight: 500;
    font-family: 'poppins', 'Inter', sans-serif;
}

.accordion-header button[data-bs-toggle="collapse"]:after {
    content: "\ecbe";
    font-size: 20px;
    position: absolute;
    right: 0;
    margin: 0 16px;
    font-family: 'icomoon' !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    transition: .4s;
    background-image: none;
}

@media (max-width: 576px) {
    .accordion-header button[data-bs-toggle="collapse"]:after {
        display: none;
    }
    .accordion-header button[data-bs-toggle="collapse"] {
        padding: 16px !important;
    }
}

.accordion-header button[data-bs-toggle="collapse"][aria-expanded="true"]:after {
    transform: rotate(180deg);
    transition: .4s;
}

/* Accordion Body */

.wdk-learning-action-description {
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0px;
    padding-bottom: 0px !important;
}

/* Tab */

.wdk-my-journey-tab {
    border: 0.5px solid var(--primary-light);
    border-radius: 8px;
}

.wdk-my-journey-tab .wdk-my-journey-tab-header {
    display: flex;
    width: calc(100%);
    padding-left: 24px;
    margin: 0;
    border-bottom: 0.5px solid var(--primary-light);
}

.wdk-my-journey-tab .wdk-my-journey-tab-header ul.nav {
    overflow: visible;
    background-color: transparent;
    border-radius: 0;
}

.wdk-my-journey-tab .wdk-my-journey-tab-header ul.nav li a.nav-link.learning-item {
    min-width: 130px !important;
    margin-bottom: -2px;
    border-bottom: none !important;
}

.wdk-my-journey-tab .wdk-my-journey-tab-header ul.nav li .nav-link.learning-item.active {
    border-bottom: 4px solid var(--tertiary) !important;
}

.wdk-my-journey-tab .tab-content {
    margin-top: 0;
    padding: 24px;
}

.wdk-my-journey-tab .tab-content summary {
    display: inline;
    position: relative;
}

.wdk-my-journey-tab .tab-content summary~ul {
    padding-left: 1rem;
}

.wdk-my-journey-tab .tab-content .tab-pane .blanked {
    padding: 0px 32px;
}

.wdk-my-journey-tab .tab-content .tab-pane .blanked img {
    width: 60px;
    margin-right: 20px;
}

.wdk-my-journey-image {
    width: 100%;
    border-radius: 8px;
}

@media (max-width: 576px) {
    .wdk-my-journey-tab {
        overflow: hidden;
    }
    .wdk-my-journey-tab .wdk-my-journey-tab-header ul.nav {
        background-color: var(--grey-01);
    }
    .wdk-my-journey-tab .wdk-my-journey-tab-header {
        border: none;
    }
    .wdk-my-journey-tab .wdk-my-journey-tab-header ul.nav li .nav-link.learning-item.active {
        border-bottom: none !important;
    }
}

/* COLOCAR EM OUTRO LUGAR */

.collapse-item {
    position: relative;
}

.collapse-item.journey-status {
    padding-left: 30px;
    margin-top: 0;
    margin-bottom: 0;
}

.collapse-item[open] .text-summary::after {
    transform: rotate(-180deg);
}

.text-summary {
    list-style: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.text-summary::after {
    content: "\e9a4";
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    font-size: 32px;
    cursor: pointer;
    width: 28px;
    height: 28px;
    top: -2px;
    right: -32px;
    font-family: 'icomoon' !important;
    transition: all .1s;
}

/*--------------------------------------------------------
Fixes
---------------------------------------------------------*/

.wdk-my-journey-details .progress .progress-right .progress-bar {
    left: -99% !important;
    height: 99%;
}

.wdk-my-journey-details .progress .progress-left .progress-bar {
    left: 100% !important;
    height: 99%;
}

.wdk-my-journey-details .progress .progress-bar {
    height: 101%;
}

.wdk-my-journey-details .progress.progress-rounded.progress-large .progress-bar {
    border-width: 19px;
}

.wdk-my-journey-details .progress.progress-rounded.progress-large > span {
    height: 105%;
}

/* New journey header style */
/* Review & refactor no longer used classes above */
.journey-details .cover.cover-rectangle {
    height: 200px;
    width: 400px;
    min-width: 400px;
}

/* Turn this property defaul in class .progress but check all progresses in the app */
.journey-details .progress {
    min-width: 150px;
}

.journey-details .cover-journey {
    margin: -7px 0 -7px -7px;
}

.journey-details .cover-journey .cover {
    border-radius: 8px 0 0 8px;
}

.journey-details .journey-description {
    text-wrap: wrap;
}

.journey-details .cover-journey .wdk-banner {
    position: relative;
    height: 200px;
    width: 400px;
    min-width: 400px;
    border-radius: 8px 0 0 8px;
    overflow: hidden;
}

.journey-details .cover-journey .wdk-banner img {
    position: relative;
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: cover;
}

@media (max-width: 740px) {
    .journey-details .cover-journey {
        position: relative;
        width: 100%;
        padding-top: 50%;
    }
    
    .journey-details .cover.cover-rectangle {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        min-width: initial;
    }
}