.showcase-card-con .btn, .showcase-card-con .top-icon {
    transform: translate(-50%,-50%);
    background-color: #555;
    position: absolute;
    cursor: pointer
}

.course-header-position .course-icon-spacer, .fa.pull-right {
    margin-left: 10px
}

.sidebar {
    background-color: #000;
    color: #fff;
    font-size: 16px;
    text-align: left;
    border-radius: 0 10px 10px 0
}

.sidebar p {
    color: #fff;
    font-size: 10px;
    padding-top: 20px
}

.sidebar h5, h6 {
    font-weight: 500;
    padding: 8px 0 7px
}

.sidebar h5 {
    font-size: 27px !important;
    line-height: 27px;
    color: #f8570c
}

ul.list-sidebar {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 13px
}

ul.sub-menu {
    list-style: none;
    padding-bottom: 8px
}

.nav-label, .nav-label:focus, .nav-label:hover, .nav-label:visited {
    font-weight: 400;
    text-decoration: none;
    color: #389076;
    padding: 10px;
    margin-left: 22px;
}

.horizontal-line {
    background-image: url(../horizontal-line.html);
    background-repeat: repeat-x;
    margin-left: 0;
    padding-left: 0;
    padding-top: 10px;
    padding-bottom: 10px
}

ul.sub-menu li label {
    margin-bottom: 0;
    font-size: 17px;
    font-weight: 300;
    display: inline
}

ul.sub-menu li input {
    margin-left: 10px;
    margin-top: 0
}

.fa.pull-right {
    padding-top: 6px;
    font-weight: 400;
    color: #389076
}

.card-body {
    padding: 1.75rem !important
}

.CourseItem .card .card-header {
    padding: 1.8rem 1.25rem !important
}

.CourseItem {
    margin: 0 10px 10px
}

#course-left-nav-card a, #course-left-nav-card a:focus, #course-left-nav-card a:hover, #course-left-nav-card a:visited {
    text-decoration: none;
    color: #568376;
    font-size: 13px
}

.heading-title-wrapper .breadCrumb-container {
    padding-left: 10% !important;
    margin-bottom: 3rem !important
}

.fade-course-menu {
    display: block !important;
    left: 0 !important;
    transition: 1s
}

#videoModal .btn-close {
    position: absolute;
    right: -40px;
    top: 0;
    z-index: 999;
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    background-color: #000;
    opacity: 1;
    border-radius: 5px;
    line-height: 1
}

#videoModal .modal-dialog {
    transform: translateY(-50%);
    top: 50%;
    min-width: 800px
}

@media (max-width:1366px) {
    .course-name-section .content-crumb {
        padding-left: 4% !important
    }
}

@media (max-width:1199px) {

    .sidebar {
        left: -340px;
        position: relative;
        transition: 1s
    }

    #course-left-nav-button-text {
        display: inline-block;
        font-weight: 600;
        margin-left: 10px
    }

    #course-left-nav-card {
        position: absolute;
        z-index: 10;
        width: 339px
    }

    #course-left-nav-button-icon {
        margin: 0 0 2px;
        position: relative;
        padding: 10px;
        font-size: 20px !important;
        border-bottom-right-radius: 10px;
        border-top-right-radius: 10px;
        background-color: #000;
        color: #fff;
        box-shadow: 6px 5px 8px 0 #00000029
    }

    #course-container div, .course-icon {
        padding-left: 10px;
        padding-right: 10px
    }

    .showCase-rounded-img img {
        width: 100%;
        border-radius: 50%
    }

    .container-fluid {
        overflow-x: hidden;
        padding-left: 0
    }

    header#vega-header-wrapper .container {
        padding: 0 1.5rem
    }

    #vega-header-wrapper .container-fluid {
        padding: 0
    }

    .heading-title-wrapper .breadCrumb-container {
        padding-left: 5% !important
    }

    .row > * {
        padding-right: calc(var(--bs-gutter-x) * 0);
        padding-left: calc(var(--bs-gutter-x) * .5) !important
    }

    .card.showcase-card-con {
        margin: 10px
    }

    div#course-container {
        padding-left: 16px;
        padding-right: 16px
    }

    .showCase-profiles-page #course-container div {
        padding-left: 10px;
        padding-right: 10px;
        border: 0
    }
}

@media (min-width:1200PX) {
    .CourseItem {
        width: 350px
    }

    #course-left-nav-button-wrapper {
        display: none
    }

    div.div-aligner {
        padding-left: 0
    }

    h5.card-title {
        margin-right: 53px
    }
}

@media screen and (max-width:991px) {
    #course-container .text-center {
        padding: 30px
    }

    h5.card-title {
        margin-right: 68px
    }

    ul#rbg_ShortCourse {
        padding: 5px
    }

        ul#rbg_ShortCourse li label {
            font-size: 16px
        }
}

.ms-rtestate-field h4, h4.ms-rteElement-H4 {
    line-height: 1.6;
    color: #000
}

@media (max-width:767px) {
    .course-name-section .content-crumb {
        padding-left: 11% !important
    }

    .course-detail-alumni .card-body {
        margin-top: 50px
    }

    .card-title-tags {
        padding: 5px 5px 4px 2px !important;
        font-size: 14px;
        line-height: 28px
    }

    #videoModal .modal-dialog {
        transform: translateY(-50%);
        top: 50%;
        min-width: auto
    }
}

@media (max-width:400px) {
    .CourseItem {
        width: 100%;
        margin: 10px;
        padding: 15px
    }
}

.icon-BC, .icon-BCH, .icon-BM, .icon-BMH, .icon-CW, .icon-DED, .icon-DM, .icon-FD, .icon-GCD, .icon-GDD, .icon-HIDL, .icon-ID, .icon-IDH, .icon-VP {
    height: 20px;
    width: 20px;
    display: block;
    margin: 1px;
    position: absolute;
}

h6 {
    font-size: 14px !important;
    color: #fff;
    opacity: 60%
}

.icon-GCD {
    background: url('../svg/graphic_design_green.svg') no-repeat
}

.sub-menu-header.collapsed .icon-GCD {
    background: url('../svg/graphic_design_white.svg') no-repeat
}

.icon-DED {
    background: url('../svg/digital_design_green.svg') no-repeat
}

.sub-menu-header.collapsed .icon-DED {
    background: url(../svg/digital_design_white.svg) no-repeat
}

.icon-ID {
    background: url('../svg/interior_design_green.svg') no-repeat
}

.sub-menu-header.collapsed .icon-ID {
    background: url(../svg/interior_design_white.svg) no-repeat
}

.icon-CW {
    background: url('../svg/copywriting_green.svg') no-repeat
}

.sub-menu-header.collapsed .icon-CW {
    background: url(../svg/copywriting_white.svg) no-repeat
}

.icon-FD {
    background: url('../svg/fashion_design_green.svg') no-repeat
}

.sub-menu-header.collapsed .icon-FD {
    background: url('../svg/fashion_design_white.svg') no-repeat
}

.icon-GDD {
    background: url('../svg/game_design_green.svg') no-repeat
}

.sub-menu-header.collapsed .icon-GDD {
    background: url('../svg/game_design_white.svg') no-repeat
}

.icon-VP {
    background: url('../svg/video_and_photography_green.svg') no-repeat
}

.sub-menu-header.collapsed .icon-VP {
    background: url('../svg/video_and_photography_white.svg') no-repeat
}

.icon-BC, .icon-BCH {
    background: url('../svg/brand_communication_green.svg') no-repeat
}

.sub-menu-header.collapsed .icon-BC, .sub-menu-header.collapsed .icon-BCH {
    background: url('../svg/brand_communication_white.svg') no-repeat
}

.icon-DM {
    background: url('../svg/digital_marketing_green.svg') no-repeat
}

.sub-menu-header.collapsed .icon-DM {
    background: url('../svg/digital_marketing_white.svg') no-repeat
}

.icon-BM, .icon-BMH {
    background: url('../svg/brand_management_green.svg') no-repeat
}

.sub-menu-header.collapsed .icon-BM, .sub-menu-header.collapsed .icon-BMH {
    background: url('../svg/brand_management_white.svg') no-repeat
}

.sub-menu-header.collapsed .icon-HIDL {
    background: url('../svg/honours-in-design-leadership-white.svg') no-repeat
}

.showcase-card-con {
    position: relative;
    margin: 10px
}

    .showcase-card-con img {
        width: 100%;
        height: auto
    }

    .showcase-card-con .btn {
        top: 90%;
        left: 50%;
        -ms-transform: translate(-50%,-50%);
        color: #fff;
        font-size: 14px;
        padding: 8px;
        border: none;
        border-radius: 5px;
        width: 89%;
        font-weight: 600;
        text-transform: uppercase
    }

    .showcase-card-con .top-icon {
        top: 12%;
        left: 34%;
        -ms-transform: translate(-50%,-50%);
        color: #fff;
        font-size: 16px;
        padding: 12px 24px;
        border: none;
        border-radius: 30px;
        width: 56%
    }

.showCase-course-view .showcase-card-con img {
    border-radius: 10px;
    box-shadow: 0 18px 40px #00000026
}

.showcase-card-con .top-icon .fa-chevron-right:before {
    content: "\f054";
    position: absolute;
    top: 32%
}

.showCase-rounded-img img {
    width: 100%;
    border-radius: 50%
}

.showcase-info-block img {
    width: 60%
}

.showcase-info-block h5 {
    margin-bottom: 0;
    font-size: 16px
}

.showcase-info-block p {
    margin-bottom: 0;
    font-size: 13px
}

.showCase-next-arrow a {
    color: #000;
    text-decoration: none
}

.course-header-position h4 {
    font-size: 27px
}

.dotted-line {
    opacity: 2;
    background: #ff000000;
    position: relative;
    top: 20px;
    border: none;
    height: 5px;
    margin-bottom: 50px;
    border-top: 3px dashed #000
}

.showCase-profiles-page .jumbotron h1 {
    color: #47b595 !important
}

.card.showcase-card-con, .course-icon-spacer p {
    margin: 0
}

    .card.showcase-card-con a.btn.btn-primary {
        text-align: left;
        background-color: #fff;
        color: #000;
        font-size: 14px
    }

span.showCase-arrow-icon {
    float: right;
    margin-right: 0 !important;
    height: 20px;
    position: relative;
    right: 10px;
    top: 10px;
    transform: translateY(-50%) !important
}

    span.showCase-arrow-icon .fa-chevron-right:before {
        content: "\f054" !important;
        font-size: 16px;
        position: absolute;
        padding: 14px;
        top: -8px;
        left: -8px;
        color: #000;
        border-top-right-radius: 7px;
        border-bottom-right-radius: 7px;
        width: 21px
    }

.card-img-overlay {
    top: 7px !important
}

.showcase-card-con .showCase-top-info {
    top: 11%;
    text-transform: uppercase;
    left: 35%;
    transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    background-color: #fff;
    color: #000;
    font-size: 10px;
    padding: 10px 6px;
    border: none;
    cursor: pointer;
    border-radius: 30px;
    text-decoration: none;
    box-shadow: 0 3px 6px #00000029;
    font-weight: 600
}

.sub-menu-header {
    background-color: #193f34;
    padding: 10px;
    border-radius: 10px
}

.showcase-nav-item {
    background-color: #0e231d;
    border-radius: 10px;
    margin-bottom: 10px
}

.sub-menu li {
    margin-top: 6px
}

.sub-menu-header.collapsed {
    background-color: transparent
}

.showcase-nav-item:has(> .sub-menu-header.collapsed) {
    background-color: transparent;
    margin: 0
}

.sub-menu-header.collapsed i.fa.fa-chevron-down.pull-right, .sub-menu-header.collapsed span.nav-label {
    color: #fff
}

.show-case-landing-studentname {
    text-align: left;
    color: #000 !important;
    background-color: #fff !important
}

.showCase-top-info img {
    width: fit-content !important
}

.btn.btn-primary.show-case-landing-studentname img {
    border-radius: 20px
}

.sidebar {
    padding: 18px !important
}

@media screen and (max-width:1366px) and (min-width:1199px) {
    .showcase-card-con .showCase-top-info {
        margin-left: 0 !important
    }

    .nav-label:focus, .nav-label:hover, .nav-label:visited, .sidebar .nav-label {
        padding: 2px
    }

    .sidebar {
        padding: 11px !important
    }

        .sidebar .sub-menu-header {
            background-color: #193f3400;
            padding: 7px;
            border-radius: 7px;
            margin-bottom: 7px
        }

    .showCase-row-col .showCase-rounded-img {
        margin-bottom: 10px
    }

    .showcase-card-con .btn {
        top: 87%;
        font-size: 13px;
        padding: 9px 10px
    }

    span.showCase-arrow-icon .fa-chevron-right:before {
        content: "\f054" !important;
        font-size: 16px;
        padding: 20px;
        top: -14px;
        left: -9px;
        color: #000
    }
}

@media screen and (max-width:1166px) and (min-width:760px) {
    .showcase-card-con .showCase-top-info {
        margin-left: 9px
    }

    #course-container .showCase-row-col {
        flex-direction: columnA
    }

    .showCase-row-col .showCase-rounded-img {
        margin-bottom: 10px
    }
}

@media screen and (max-width:760px) {
    .showcase-card-con .showCase-top-info {
        margin-left: 18px
    }

    .showCase-row-col {
        margin-bottom: 22px
    }
}