/* General Styles */

header.wp-block-template-part {
    border-bottom: 1px solid black;
}

header > div > div {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
}

#lesson-content .ld-tabs.ld-tab-count-1 {
    margin: 10px 0px !important;
}

.ld-content-actions .ld-content-action:nth-child(3) a.ld-button {
    display: flex !important;
    justify-content: flex-end !important;
}

#lesson-navigation>h3 {
 margin-left: 10px;
}

.ld-course-step-back {
    display:none !important;
}

#pertecene-curso>a {
    color:#2890e8;
}

.single-sfwd-lessons main > *:nth-child(1) {
    border-bottom: 1px solid black !important;
    margin-bottom: 0 !important;
}

.single-sfwd-lessons main > *:nth-child(3) {
    margin-top: 50px;
}

.single-sfwd-lessons main > *:nth-child(4) {
    display: none;
}

/* Custom Left Div */
.custom-left-div {
    border-right: 1px solid #c0bebe;
    background-color: rgb(249, 249, 249);
    border-radius: 3px;
    width: 350px;
    float: left;
    margin-right: 20px;
    margin-top: 0px;
    height: auto;
    position: relative;
    border-bottom: 1px solid #c0bebe;
}

.custom-left-div > div > h4 {
    color: black;
}

.course-outline > ul > li > h4 {
    color: black;
}

/* Course Outline - Add scroll behavior with a max height */
.course-outline {
    max-height: 500px; /* Set the maximum height for scrolling */
    overflow-y: auto; /* Enable vertical scrolling */
    padding-left: 0;
    margin-bottom: 0;
    border-bottom: none;
}

/* Customize scrollbar for course-outline */
.course-outline::-webkit-scrollbar {
    width: 8px; /* Width of scrollbar */
}

.course-outline::-webkit-scrollbar-thumb {
    background-color: #c0bebe; /* Scrollbar color */
    border-radius: 4px;
}

/* Section Headers */
li.course-section-header {
    margin-bottom: 0 !important;
    border-bottom: none !important;
    border-top: 1px solid #c0bebe !important;
    font-size: 14px;
}

li.course-section-header > h4 {
    margin: 10px 0;
    padding: 0;
    font-size: 10px;
    text-transform: uppercase;
    font-family: sans-serif;
    font-weight: 600;
    letter-spacing: 4px;
}

/* Lessons and Quizzes */
.course-outline li {
    font-size: 13px !important;
    padding: 10px 40px !important;
    margin-bottom: 0 !important;
}

.course-outline ul li:last-child {
    border-bottom: 1px solid #c0bebe;
}

/* Custom div header (Dropdown Header) */
.dropdown-header {
    position: sticky; /* Keeps the header fixed when scrolling */
    top: 0;
    background-color: #f9f9f9;
    z-index: 10;
    padding: 20px;
    border-bottom: 1px solid #c0bebe;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 46px;
}

.custom-left-div > h4 {
    padding-left: 20px;
    margin-top: 0;
}

/* Remove bottom margin from unordered lists */
ul {
    margin-bottom: 0;
    border-bottom: none;
    margin-top: 0px;

}

/* Adjust margins for post template part */
.wp-block-template-part > .wp-block-group {
    border-bottom: none !important;
} 

.course-outline>ul li:first-child {
    border-top: 0px !important;
}

/* Medium screens */
@media (max-width: 1360px) { 
    .single-sfwd-lessons .entry-content.alignfull.wp-block-post-content {
        margin-left: 300px !important;
    }
    .ld-content-actions .ld-content-action:nth-child(3) a.ld-button {
        display: flex !important;
        justify-content: flex-end !important;
    }
} 

/* Small screens */
@media (max-width: 970px) {

    #lesson-wrapper {
        flex-direction: column;
    }

    #lesson-navigation {
        width: 100% !important;
    }

    #lesson-navigation>h3 {
        text-align: center !important;
    }
    main#wp--skip-link--target {
        display: flex;
        flex-direction: column;
    }

    #lesson-content {
        width: 94% !important;
        padding: 20px;
    }

    div#lesson-content {
        border-top: 1px solid #c0bebe;
    }

    #lesson-navigation>h3 {
        margin-left: 0px;
       }

    .single-sfwd-lessons .entry-content.alignfull.wp-block-post-content {
        margin-left: 0 !important;
    } 

    .custom-left-div {
        width: 500px !important;
        margin: auto !important;
        height: auto;
        margin-top: 30px !important;
        border-right: none !important;
        border-bottom: 0px !important;
    }

    .dropdown-content {
        display: none;
    }

    .dropdown-header {
        padding: 20px;
        border: 1px solid #c0bebe;
        border-radius: 6px;
    }

    .ld-content-actions .ld-content-action:nth-child(3) a.ld-button {
        display: flex !important;
        justify-content: flex-end !important;
    }

    .learndash-wrapper .ld-content-actions {
        align-items: flex-start;
        justify-content: end !important;
    }
}

/* Extra small screens */
@media (max-width: 530px) {

    .ld-content-actions {
        flex-direction: row !important;
    }

    .ld-content-action {
        padding: 0px !important;
    }

    .dropdown-header {
        max-width: 350px;
        margin: auto;
    }

    .custom-left-div {
        max-width: 400px;
        margin-top: 30px !important;
    }

    .learndash-wrapper .ld-content-actions div:nth-child(2) {
        display:none;
    }

    .ld-content-actions .ld-content-action:nth-child(3) a.ld-button {
        display: flex !important;
        justify-content: flex-end !important;
    }
    
    #lesson-content {
        width: 92% !important;
        padding: 20px;
    }
}

/* Base styles for the circle */
.lesson-item {
    display: flex;
    align-items: center;
}

.lesson-circle {
    display: inline-block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0;
}

/* Gray circle for not completed lessons */
.lesson-item.not-completed .lesson-circle {
    background-color: #d3d3d3; /* Gray */
}

/* Yellow circle for completed lessons */
.lesson-item.completed .lesson-circle {
    background: linear-gradient(314deg, rgb(236 196 146) 0%, rgb(198 176 100) 100%);
}

/* Base styles for the circle */
.lesson-item {
    display: flex;
    align-items: center;
    padding: 10px;
}

/* Gray circle for not completed lessons */
.lesson-item.not-completed .lesson-circle {
    background-color: #d3d3d3; /* Gray */
}

/* Yellow circle for completed lessons */
.lesson-item.completed .lesson-circle {
    background: linear-gradient(314deg, rgb(236 196 146) 0%, rgb(198 176 100) 100%);
}

/* Add background for the current lesson */
.lesson-item.current-lesson {
    background-color: #efefef; /* Light gray background for the current lesson */
    padding: 10px;
}

/* Combine completed and current lesson */
.lesson-item.completed.current-lesson {
    background-color: #efefef; /* Same light gray background for current lesson */
}


.single-sfwd-lessons .learndash-wrapper .ld-button {
    align-items: center;
    background-color: #f9f9f9 !important;
    border: 0;
    border-radius: 20px;
    box-shadow: none;
    color: #2890e8 !important;
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: .75em;
    font-weight: 500;
    height: auto;
    justify-content: center;
    line-height: 1.25em;
    margin: 0;
    max-width: 385px;
    opacity: 1;
    padding: 0em !important;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    transition: opacity .3s ease;
    white-space: normal;
    width: 100%;
}

input.wpProQuiz_button {
    margin: auto !important;
}

.learndash-wrapper .ld-tabs {
    margin: 9px !important;
}