/* =========================================================
   TRAINING COURSE FRONTEND LAYOUT
========================================================= */


/* =========================================================
   MAIN LAYOUT
========================================================= */

.hcg-training-layout {

    width: 100%;
    max-width: 100%;

    margin: 42px auto 60px;

    padding: 0 32px;

    display: flex;
    align-items: flex-start;

    gap: 52px;

    box-sizing: border-box;
}


/* =========================================================
   WIDTH CONTROL
========================================================= */

/* FLUID */

.hcg-width-fluid {

    max-width: 1480px;

    margin-left: auto;
    margin-right: auto;
}


/* BOXED */

.hcg-width-boxed {

    max-width: 1180px;

    margin-left: auto;
    margin-right: auto;
}


/* FULL */

.hcg-width-full {

    width: 100%;
    max-width: 100%;
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.hcg-course-main {

    flex: 1 1 0;

    min-width: 0;
    width: auto;

    max-width: calc(100% - 392px);

    box-sizing: border-box;
}


/* =========================================================
   SIDEBAR WRAPPER
========================================================= */

.hcg-course-sidebar-wrap {

    flex: 0 0 340px;

    width: 340px;
    min-width: 340px;
    max-width: 340px;

    box-sizing: border-box;
}


/* =========================================================
   LEFT SIDEBAR
========================================================= */

.hcg-sidebar-left
.hcg-course-sidebar-wrap {

    order: 1;
}

.hcg-sidebar-left
.hcg-course-main {

    order: 2;
}


/* =========================================================
   RIGHT SIDEBAR
========================================================= */

.hcg-sidebar-right
.hcg-course-main {

    order: 1;
}

.hcg-sidebar-right
.hcg-course-sidebar-wrap {

    order: 2;
}


/* =========================================================
   NO SIDEBAR
========================================================= */

.hcg-sidebar-none
.hcg-course-sidebar-wrap {

    display: none;
}

.hcg-sidebar-none
.hcg-course-main {

    width: 100%;
    max-width: 100%;
}


/* =========================================================
   RESPONSIVE IMAGES
========================================================= */

.hcg-course-main img {

    max-width: 100%;
    height: auto;
}


/* =========================================================
   TABLE RESPONSIVE
========================================================= */

.hcg-course-main table {

    width: 100%;
    display: block;
    overflow-x: auto;
}


/* =========================================================
   DESKTOP / SMALL LAPTOP
========================================================= */

@media (max-width: 1200px) {

    .hcg-training-layout {

        gap: 40px;
    }

    .hcg-course-sidebar-wrap {

        flex: 0 0 300px;

        width: 300px;
        min-width: 300px;
        max-width: 300px;
    }

    .hcg-course-main {

        max-width: calc(100% - 340px);
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .hcg-training-layout {

        flex-direction: column;

        gap: 34px;

        padding-left: 18px;
        padding-right: 18px;
    }

    .hcg-course-main {

        width: 100%;
        max-width: 100%;

        order: 1;
    }

    .hcg-course-sidebar-wrap {

        width: 100%;
        min-width: 100%;
        max-width: 100%;

        flex: 1 1 auto;

        order: 2;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .hcg-training-layout {

        margin-top: 26px;

        gap: 28px;

        padding-left: 16px;
        padding-right: 16px;
    }
}