/* Course cards: catalog, block and related list */
.block_vitrina-coursestyle-two_cols_nodolab {
    .block_vitrina-tabcontent .courses-list {
        gap: 32px 16px;
    }

    .block_vitrina-courseslist .coursebox {
        background-color: #fff;
        width: 100%;
        max-width: 330px;
        border: none;
        box-shadow: 0 0 10px #ddd;
        border-radius: 10px;
    }

    .block_vitrina-courseslist .coursebox .panel-body {
        padding: 0;
        text-align: left;
        flex-grow: 1;
    }

    .block_vitrina-courseslist .coursebox .panel-body a {
        color: #fff;
    }

    .block_vitrina-courseslist .coursebox .panel-body a:hover {
        filter: opacity(0.9);
    }

    .block_vitrina-courseslist .coursebox .panel-body h3.course-name {
        padding-inline: 20px;
        text-align: left;
    }

    .block_vitrina-courseslist .coursebox .panel-body .coursesummary {
        max-height: 200px;
        overflow: auto;
        padding: 0 20px 10px;
    }

    .block_vitrina-courseslist .coursebox .panel-body .courseimage {
        margin-bottom: 20px;
    }

    .block_vitrina-courseslist .coursebox .panel-body .coursefee {
        border: none;
        padding-inline: 20px;
    }

    .block_vitrina-courseslist .coursebox .feeinfo {
        padding: 5px 10px;
        border-radius: 5px;
        display: inline-block;
        margin: 5px;
        background-color: var(--secondary);
    }

    .block_vitrina-courseslist .coursebox.panel .course-progress {
        padding: 5px;
    }

    .block_vitrina-courseslist .coursebox .panel-body label {
        font-weight: bold;
        font-size: 12px;
    }

    .block_vitrina-courseslist .coursebox.panel .contactslist {
        padding: 5px;
        gap: 5px;
        border-bottom: 1px solid #eee;
        margin: 5px 0;
    }

    .block_vitrina-courseslist .coursebox .contactslist h5 {
        font-size: 80%;
    }

    .block_vitrina-courseslist .coursebox .contactslist .courseinstructors a {
        margin-right: 5px;
        margin-bottom: 5px;
    }

    .block_vitrina-courseslist .coursebox .contactslist .courseinstructors a:hover {
        opacity: 0.8;
    }

    .block_vitrina-courseslist .coursebox .contactslist .courseinstructors img {
        border-radius: 50%;
    }

    .block_vitrina-courseslist .coursebox .customfieldslist {
        padding: 5px 0;
    }

    .block_vitrina-courseslist .coursebox .customfieldslist .list-group {
        border-radius: 0;
    }

    .block_vitrina-courseslist .coursebox .customfieldslist .list-group-item {
        padding: 0.4rem 0.6rem;
        font-size: 90%;
        border-right: none;
        border-left: none;
    }

    .block_vitrina-courseslist .coursebox.type-premium:after {
        content: "";
        position: absolute;
        right: 10px;
        top: 0;
        background: transparent url('[[pix:block_vitrina|premium]]') no-repeat;
        width: 50px;
        height: 60px;
    }

    .block_vitrina-courseslist .coursebox.coursehidden {
        opacity: 0.5;
        filter: grayscale(1);
    }

    .block_vitrina-courseslist .coursebox .waiting-label {
        background-color: #595959;
        color: #fff;
        padding: 5px;
    }

    .block_vitrina-courseslist .coursebox .coursebtn {
        background-color: var(--primary, #000);
        color: #fff;
        border-radius: 5px;
        margin: -40px auto 20px;
        display: block;
        max-width: 95%;
        padding: 10px;
        font-size: 16px;
        border: none;
        text-align: center;
        position: relative;
    }

    .block_vitrina-courseslist .coursebox .panel-foot {
        text-align: center;
        padding-bottom: 20px;
    }

    .block_vitrina-courseslist .coursebox .panel-foot .btn {
        width: fit-content;
        color: var(--primary, #000);
        background-color: var(--light, #f1f1f1);
        padding: 8px 16px;
    }

    .block_vitrina-courseslist .coursebox .panel-foot .btn:hover {
        background-color: var(--secondary, #00000024);
        border-color: var(--secondary, #00000024);
    }

    .vitrina-ranking-stars {
        margin: auto;
    }

    .vitrina-ranking-stars-bar:after {
        left: 0;
    }

    .block_vitrina-courseslist .coursebox.state-waiting .panel-body::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 160px;
        background-color: rgba(20, 20, 20, 0.6);
    }

    .block_vitrina-courseslist .coursebox.state-waiting .waiting-label {
        background-color: transparent;
        text-transform: uppercase;
        font-size: 23px;
        font-weight: bold;
        border: none;
        left: 30px;
        right: 30px;
        width: calc(100% - 60px);
    }

    .vitrina-ranking-stars {
        --stars-width: 159px;
        --stars-height: 35px;
        width: var(--stars-width);
        height: var(--stars-height);
        margin-left: 20px;
        background-image: url('pix/stars_empty_nl.png');
        background-size: contain;
        background-repeat: no-repeat;
    }

    .vitrina-ranking-stars-bar::after {
        width: var(--stars-width);
        height: var(--stars-height);
        background-image: url('pix/stars_nl.png');
    }

    .vitrina-ranking-stars .icon {
        width: var(--stars-width);
        height: var(--stars-height);
        max-width: unset;
        max-height: unset;
    }
}

@media (max-width: 767.98px) {
    .block_vitrina-detailstyle-two_cols_nodolab {
        .relatedcourses > div .coursebox {
            width: calc(100% - 20px);
        }
    }
}

/* Catalog page chrome */
#page-blocks-vitrina-index.block_vitrina-coursestyle-two_cols_nodolab {
    #region-main > .card {
        border: none;
    }

    #region-main > .card > .card-body {
        padding: 0;
    }

    .courses-sort {
        margin: 20px 0;
    }

    .courses-sort li {
        margin: 0 10px;
    }

    .courses-sort li a {
        text-decoration: none;
    }

    .courses-sort li a:after {
        height: 30px;
        width: 30px;
        transform: rotate(45deg);
        position: absolute;
        bottom: -40px;
        left: calc(50% - 15px);
        background-color: #f9f9f9;
        border: 1px solid #e7e7e7;
        border-right: 0;
        border-bottom: 0;
    }

    .courses-sort.sort-by-default li a[data-sort="default"],
    .courses-sort.sort-by-recents li a[data-sort="recents"],
    .courses-sort.sort-by-greats li a[data-sort="greats"],
    .courses-sort.sort-by-premium li a[data-sort="premium"] {
        font-weight: bold;
        border-bottom: 2px solid;
    }

    .courses-sort.sort-by-default li a[data-sort="default"]:after,
    .courses-sort.sort-by-recents li a[data-sort="recents"]:after,
    .courses-sort.sort-by-greats li a[data-sort="greats"]:after,
    .courses-sort.sort-by-premium li a[data-sort="premium"]:after {
        content: "";
    }

    .filtercontrol > h5 {
        background-color: transparent;
        color: var(--primary);
        text-align: left;
        border: none;
        margin-top: 40px;
    }
}

/* Detail page chrome */
#page-blocks-vitrina-detail.block_vitrina-detailstyle-two_cols_nodolab {
    #box-main_content {
        font-size: 17px;
    }

    #page-header-config {
        display: none;
    }

    #region-main > .card {
        border: none;
    }

    .relatedcourses {
        margin-top: 30px;
        padding-top: 20px;
    }

    .relatedcourses > h3 {
        text-align: left;
    }

    .relatedcourses > div {
        margin-top: 40px;
    }

    #page-header h1.h2 {
        color: inherit;
        font-size: 1.640625rem;
        text-align: left;
    }

    #page-header.header-maxwidth {
        max-width: unset;
    }
}
#page-blocks-vitrina-detail.block_vitrina-detailstyle-two_cols_nodolab {
    @media (min-width: 1281px) {
        #box-main_content .btn {
            font-size: 22px;
            border-radius: 5px;
            padding-left: 40px;
            padding-right: 40px;

        }

        #box-main_content .icon:not(img) {
            font-size: 28px;
            width: 28px;
            height: 28px;

        }
    }
}
#page-blocks-vitrina-detail.block_vitrina-detailstyle-two_cols_nodolab {
    @media (min-width: 1400px) {
        #box-main_content .btn {
            font-size: 17px;
            border-radius: 5px;
            padding-left: 40px;
            padding-right: 40px;

        }

        #box-main_content .icon:not(img) {
            font-size: 28px;
            width: 28px;
            height: 28px;

        }
    }
}
#page-blocks-vitrina-detail.block_vitrina-detailstyle-two_cols_nodolab {
    @media (max-width: 1199.98px) {
        #box-main_content {
            font-size: 21px;

        }

        #page.container-fluid {
            padding-left: 0;
            padding-right: 0;

        }

        #page-content {
            margin-right: 0;
            margin-left: 0;

        }

        #region-main-box {
            padding-right: 0;

        }

        #region-main > .card > .card-body {
            padding-right: 0;

        }
    }
}
#page-blocks-vitrina-detail.block_vitrina-detailstyle-two_cols_nodolab {
    @media (max-width: 767.98px) {
        #region-main-box {
            padding: 0;

        }

        #box-main_content {
            font-size: 14px;

        }

        #region-main > .card > .card-body {
            padding: 0;

        }

        .relatedcourses > div {
            display: block;

        }

        .relatedcourses > div .onerelated {
            width: calc(100% - 40px);
            margin: 0 auto 40px;

        }

        .relatedcourses > div .onerelated::after {
            content: "";
            display: block;
            clear: both;

        }

        .relatedcourses > div {
            margin-left: 0;
            margin-right: 0;

        }
    }
}

/* Detail page document */
html:has(body.block_vitrina-detailstyle-two_cols_nodolab) {
    scroll-behavior: smooth;
}

/* Detail content (excludes related course cards) */
div.block_vitrina-detailstyle-two_cols_nodolab {
    .course-detail {
        padding-top: 20px;
        position: relative;
    }

    .course-detail.type-premium:after {
        content: "";
        position: absolute;
        right: 10px;
        top: 0;
        background: transparent url('[[pix:block_vitrina|premium]]') no-repeat;
        width: 80px;
        height: 100px;
    }

    .catalog-return {
        margin-bottom: 5px;
        padding-bottom: 5px;
    }

    .btn-primary {
        transition: all .2s ease-in-out;
    }

    .btn-primary:focus {
        box-shadow: none;
    }

    .btn-primary.focus {
        box-shadow: none;
    }

    .catalog-return a {
        padding-left: 20px;
        padding-right: 20px;
    }

    .information-structure {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 20px;
    }

    .course-specific-info > div {
        margin-bottom: 50px;
    }

    .course-specific-info > div h3 {
        margin-bottom: 30px;
    }

    .course-general-info {
        font-size: 16px;
        position: relative;
    }

    .course-general-info .box-custom-shadow {
        background: #e6e6e6 0% 0% no-repeat padding-box;
        border-radius: 5px;
        opacity: 1;
        filter: blur(8px);
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    .course-general-info .general-items-box {
        background-color: #fff;
        position: relative;
        padding: 20px;
        border-radius: 10px;
    }

    .course-general-info .general-items-box > div {
        padding: 0 20px 20px;
    }

    .course-general-info .media-content {
        margin-bottom: 20px;
        padding: 0;
        font-size: 0;
        position: relative;
    }

    .course-general-info .media-content video {
        width: 100%;
        aspect-ratio: 16/9;
        background: #12182b 0% 0% no-repeat padding-box;
        border-radius: 10px;
    }

    .course-general-info .media-content iframe {
        width: 100%;
        aspect-ratio: 16/9;
        background: #12182b 0% 0% no-repeat padding-box;
        border-radius: 10px;
    }

    .course-detail .enroll-container {
        padding: 20px;
        width: 100%;
        border-radius: unset;
        height: auto;
        background-color: transparent;
        color: inherit;
    }

    .course-detail .enrollstate-completed .enroll-container {
        background-color: transparent;
        color: inherit;
    }

    .course-detail .enrollstate-enrolled .enroll-container {
        background-color: transparent;
        color: inherit;
    }

    .course-detail .enrollstate-completed .enroll-container a.btn {
        color: #fff;
        border-color: var(--primary, #000);
    }

    .course-detail .enroll-container a.btn {
        background-color: var(--primary, #000);
        color: #fff;
        border-color: var(--primary, #000);
    }

    .course-detail .enroll-container a.btn:hover {
        background-color: #fff;
        color: var(--primary, #000);
        border-color: var(--primary, #000);
    }

    .course-general-info .enroll-content {
        margin: 0 -40px;
        font-size: 24px;
        font-weight: bold;
        text-align: center;
    }

    .course-detail .enroll-container .haspaymentgw [data-component="enrol_fee"] {
        margin-bottom: 0;
    }

    .course-detail .enroll-container .haspaymentgw .btn-primary[data-toggle="collapse"]:not(.collapsed) {
        background-color: transparent;
        color: var(--primary);
    }

    .course-detail .enroll-container .haspaymentgw .btn-primary[data-toggle="collapse"] i.fa {
        margin-left: 2px;
        margin-right: 0;
    }

    .enroll-container .haspaymentgw .btn-primary[data-toggle="collapse"]:not(.collapsed) i.fa::before {
        content: "\f106";
    }

    .course-detail .vitrina-ranking-stars {
        --stars-width: 159px;
        --stars-height: 35px;
        width: var(--stars-width);
        height: var(--stars-height);
        margin-left: 20px;
        background-image: url('pix/stars_empty_nl.png');
        background-size: contain;
        background-repeat: no-repeat;
    }

    .course-detail .vitrina-ranking-stars .vitrina-ranking-stars-bar::after {
        width: var(--stars-width);
        height: var(--stars-height);
        background-image: url('pix/stars_nl.png');
    }

    .course-detail .vitrina-ranking-stars .icon {
        width: var(--stars-width);
        height: var(--stars-height);
        max-width: unset;
        max-height: unset;
    }

    .ranking-detail > div:first-child label {
        font-size: 40px;
        display: inline-block;
        margin: 0 10px 0 0;
    }

    .ranking-detail > div:nth-child(2) {
        margin-top: 20px;
    }

    .ranking-detail .ranking-detail-item {
        margin-bottom: 5px;
    }

    .ranking-detail .ranking-detail-item label {
        white-space: nowrap;
        padding-right: 10px;
        margin: 0;
    }

    .ranking-detail .ranking-detail-item div:nth-child(3) {
        white-space: nowrap;
        width: 50px;
        text-align: right;
    }

    .ranking-detail .ranking-detail-item .rating-bar {
        height: 10px;
        border-radius: 5px;
        background-color: #cfcfcf;
        width: 100%;
    }

    .ranking-detail .ranking-detail-item .rating-bar div {
        height: 100%;
        border-radius: 20px;
        background-color: #e0aa00;
    }

    .msg-courselink-copy {
        background-color: #fff;
        opacity: 0.9;
        padding: 5px;
        border: 1px dashed;
        font-size: 70%;
    }

    .course-detail a.rating-link:hover {
        font-weight: 200;
        text-decoration: none;
    }

    .course-detail .rating-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 6px;
        margin: -12px 4px 20px;
        font-size: 15px;
        text-transform: lowercase;
    }

    .course-detail .rating-wrapper span {
        display: grid;
        place-content: center;
        margin-top: 2px;
    }

    .course-detail .rating-wrapper .vitrina-ranking-stars {
        --stars-width: 73px;
        --stars-height: 16px;
        margin: 0;
        margin-top: 4px;
    }

    .list-info {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .list-info li {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .list-info li > * {
        margin-right: 5px;
    }

    .list-info li i {
        color: #bc8338;
        font-size: 28px;
        width: 25px;
        height: 25px;
        margin-right: 15px;
    }

    .list-info li img {
        width: auto;
        height: auto;
        margin-right: 15px;
    }

    .list-info li[data-certified="No"] {
        display: none;
        justify-content: flex-start;
    }

    .share-container {
        border: none;
        justify-items: start;
    }

    .share-container .input-container {
        margin-bottom: 10px;
    }

    .share-container .input-container .input-group-text {
        background-color: #000;
        color: #fff;
        border-radius: 5px 0 0 5px;
        font-size: 20px;
    }

    .share-container .input-container input[name="courselink"] {
        width: calc(100% - 70px);
        font-size: 16px;
        background-color: #eee;
        border-radius: 0 2px 2px 0;
        padding: 5px;
        border: 2px solid #eee;
        font-style: italic;
    }

    .share-container .share-icons {
        justify-content: flex-start;
        padding: 0;
    }

    .share-container .share-icons a {
        text-decoration: none;
        background-color: transparent;
        border: 2px solid #141b2f;
        border-radius: 7px;
        font-size: 26px;
        height: 36px;
        width: 36px;
    }

    .share-container .share-icons a i {
        color: #141b2f;
    }

    .course-detail .course-rating-detail {
        display: block;
        margin-top: 30px;
        padding-top: 20px;
    }

    .course-detail .course-rating-detail .ratings-box {
        display: flex;
        flex-direction: column-reverse;
        gap: 20px;
    }

    .course-detail .course-rating-detail .ratings-box.has_rating.has_comments > div {
        width: 100%;
    }

    .course-detail .course-rating-detail .course-comments-box {
        background-color: var(--light);
        padding: 20px;
        margin-right: 20px;
        font-size: 15px;
        border-radius: 10px;
    }

    .course-detail .course-rating-detail .course-comments-box[data-count="1"] .box-show-more-comments {
        display: none;
    }

    .course-detail .course-rating-detail .course-comments-box[data-count="0"] .box-show-more-comments {
        display: none;
    }

    .course-detail .course-rating-detail .course-comments-box .box-show-more-comments {
        text-align: right;
    }

    .course-detail .course-rating-detail .course-comments-box .box-show-more-comments .btn:hover {
        text-decoration: underline;
    }

    .course-detail .course-rating-detail .course-comments-box div.comment {
        display: none;
        padding: 0;
    }

    .course-detail .course-rating-detail .course-comments-box  div.comment:first-child {
        display: block;
    }

    .course-detail .course-rating-detail .course-comments-box .comment-author {
        display: flex;
        align-items: center;
        margin-block: 18px;
    }

    .course-detail .course-rating-detail .course-comments-box .comment-author img.author-picture {
        width: 64px;
        height: 64px;
        max-width: 64px;
        border-radius: 64px;
        margin-right: 20px;
    }

    .course-detail .course-rating-detail .course-comments-box .comment-author .comment-data p {
        margin-block: 0;
    }

    .course-detail .course-rating-detail .course-comments-box .comment-author .comment-data p.author-name {
        font-size: 1.125rem;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .course-detail .course-rating-detail .course-comments-box .comment-author .comment-data p.timeformated {
        font-size: 0.82rem;
        font-weight: 400;
    }

    .course-detail .course-rating-detail .course-comments-box .comment-content p {
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 20px;
        padding-inline: 12px;
    }

    .course-detail .course-rating-detail .course-comments-box .all-comments-modal .modal-header {
        border-width: 0;
    }

    .course-detail .course-rating-detail .course-comments-box .all-comments-modal div.comment {
        display: block;
        border-bottom: 1px solid #dee2e6;
        padding-inline: 12px;
    }

    .course-detail .course-rating-detail .course-comments-box .all-comments-modal div.comment:last-child {
        border-bottom: 0;
    }

    .course-detail .course-rating-detail .ranking-detail {
        max-width: unset;
    }

    .experts-box p::after {
        content: "";
        display: block;
        clear: both;
    }

    .experts-box > p > img {
        float: left;
        margin: 0 20px 20px 0;
        width: 97px;
        height: 97px;
        border: 5px solid #fff;
        box-shadow: -5px 5px 10px #aaa;
        border-radius: 50%;
    }

    .experts-box > p > strong {
        display: block;
        padding-top: 30px;
        font-size: 17px;
        font-weight: 700;
        color: #151c2f;
    }

    .experts-box > p > em {
        font-style: unset;
        font-weight: 300;
        font-size: 17px;
    }
}
div.block_vitrina-detailstyle-two_cols_nodolab {
    @media (min-width: 768px) {
        .information-structure .course-specific-info {
            flex: 1;
            min-width: min-content;

        }

        .information-structure .course-general-info {
            flex: 1;
            min-width: min-content;

        }

        .information-structure .course-general-info {
            max-width: 480px;

        }

        .course-detail .course-rating-detail .ratings-box {
            flex-direction: row;

        }

        .course-detail .course-rating-detail .ratings-box.has_rating.has_comments > div {
            width: 50%;

        }
    }
}
div.block_vitrina-detailstyle-two_cols_nodolab {
    @media (min-width: 1200px) {
        .information-structure .course-general-info {
            max-width: 540px;

        }
    }
}
div.block_vitrina-detailstyle-two_cols_nodolab {
    @media (min-width: 1281px) {
        .container {
            max-width: 2100px;

        }
    }
}
div.block_vitrina-detailstyle-two_cols_nodolab {
    @media (max-width: 1199.98px) {
        .container {
            max-width: 1200px;

        }
    }
}
div.block_vitrina-detailstyle-two_cols_nodolab {
    @media (max-width: 767.98px) {
        h3 {
            font-size: 18px;

        }

        h5 {
            font-size: 18px;

        }

        h6 {
            font-size: 14px;

        }

        .information-structure {
            flex-direction: column-reverse;

        }

        .course-general-info {
            width: auto;
            min-width: unset;
            margin: 0 0 20px;
            box-shadow: none;
            font-size: 14px;
            padding: 0;

        }

        .course-general-info .media-content {
            border: none;

        }

        .course-general-info .general-items-box > div {
            padding: 0;

        }

        .course-general-info .experts-box > p > strong {
            font-size: 14px;

        }

        .course-general-info .experts-box > p > em {
            font-size: 14px;

        }

        .course-general-info .share-container .input-container .input-group-text {
            font-size: 14px;

        }

        .course-general-info .share-container .input-container input[name="courselink"] {
            font-size: 14px;

        }

        .course-general-info .share-container .share-icons a {
            font-size: 20px;
            height: 28px;
            width: 28px;

        }

        .course-specific-info {
            padding: 20px;

        }

        .course-detail .detail-foot {
            padding: 0;

        }

        .course-detail .detail-foot > div {
            flex-direction: column;

        }

        .course-detail .detail-foot > div > div {
            width: 100%;

        }

        .course-detail .detail-foot > div.has_rating.has_comments > div {
            width: 100%;

        }
    }
}