/* FONTFACE */
@font-face {
    font-family: 'Sarabun';
    src: url("/static/sbs-themes/fonts/Sarabun/Sarabun-Regular.49d082d0164c.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Sarabun-SemiBold';
    src: url("/static/sbs-themes/fonts/Sarabun/Sarabun-SemiBold.b8efe5f4835e.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Sarabun-Light';
    src: url("/static/sbs-themes/fonts/Sarabun/Sarabun-Light.3c1a731bfa10.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Sarabun-Medium';
    src: url("/static/sbs-themes/fonts/Sarabun/Sarabun-Medium.d497a8b3c84a.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Sarabun-ExtraLight';
    src: url("/static/sbs-themes/fonts/Sarabun/Sarabun-ExtraLight.42d3e6663cb6.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'Sarabun-ExtraBold';
    src: url("/static/sbs-themes/fonts/Sarabun/Sarabun-ExtraBold.4ce3574489b4.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Sarabun-Thin';
    src: url("/static/sbs-themes/fonts/Sarabun/Sarabun-Thin.d00bfab5fba5.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Sarabun-Bold';
    src: url("/static/sbs-themes/fonts/Sarabun/Sarabun-Bold.60bddd6bb0c1.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'KanitLight';
    src: url("/static/sbs-themes/sbs/fonts/Kanit/kanit-light-webfont.311b06bdecf6.woff2") format('woff2'),
         url("/static/sbs-themes/sbs/fonts/Kanit/kanit-light-webfont.42e427406101.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'KanitMedium';
    src: url("/static/sbs-themes/sbs/fonts/Kanit/kanit-medium-webfont.fdac9f59399e.woff2") format('woff2'),
         url("/static/sbs-themes/sbs/fonts/Kanit/kanit-medium-webfont.38efc1863357.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'KanitRegular';
    src: url("/static/sbs-themes/sbs/fonts/Kanit/kanit-regular-webfont.35ce7fa16714.woff2") format('woff2'),
         url("/static/sbs-themes/sbs/fonts/Kanit/kanit-regular-webfont.488ed7255ce7.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}
/* FONTFACE */
/* General */
:root {
    --font-size-custom: 0px;
}

a:focus, a:hover {
    text-decoration: none;
}

.cursorPointer {
    cursor: pointer;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    font-family: "KanitRegular";
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    font-size: 16px;
}

#contentData {
    letter-spacing: .06rem;
    font-family: "KanitRegular";
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    min-height: calc(100vh - 328px);
}

img {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.form-control {
    height: auto;
}

.flexMiddle {
    display: flex;
    align-items: center;
}

.textColortPurple {
    color: #5A3885;
}

.bgPurple {
    background-color: #5A3886;
}

.bgWhite {
    background-color: #ffffff;
}

.ml-minus-3px {
    margin-left: -3px;
}

.ml-1px {
    margin-left: 1px;
}

.ml-2px {
    margin-left: 2px;
}

.mr-2px {
    margin-right: 2px;
}

.mr-3px {
    margin-right: 3px;
}

.mr-3_5px {
    margin-right: 3.5px;
}

.pb-1, .py-1 {
    padding-bottom: 0.5rem !important;
}

.pl-2, .px-2 {
    padding-left: 1rem !important;
}

.pb-2, .py-2 {
    padding-bottom: 1rem !important;
}

.pb-3, .py-3 {
    padding-bottom: 1.5rem !important;
}

.pb-4, .py-4 {
    padding-bottom: 2rem !important;
}

.pb-5, .py-5 {
    padding-bottom: 2.5rem !important;
}

.pb-6, .py-6 {
    padding-bottom: 3rem !important;
}

.pb-7, .py-7 {
    padding-bottom: 3.5rem !important;
}

.pb-8, .py-8 {
    padding-bottom: 4rem !important;
}

.pl-2, .px-2 {
    padding-left: 1rem !important;
}

.pl-3, .px-3 {
    padding-left: 1.5rem !important;
}

.pl-4, .px-4 {
    padding-left: 2rem !important;
}

.pl-5, .px-5 {
    padding-left: 2.5rem !important;
}

.pr-2, .px-2 {
    padding-right: 1rem !important;
}

.pr-3, .px-3 {
    padding-right: 1.5rem !important;
}

.pr-4, .px-4 {
    padding-right: 2rem !important;
}

.pr-5, .px-5 {
    padding-right: 2.5rem !important;
}

.pt-2, .py-2 {
    padding-top: 1rem !important;
}

.mt-1, .my-1 {
    margin-top: 0.5rem !important;
}

.mt-2, .my-2 {
    margin-top: 1rem !important;
}

.pl-0, .px-0 {
    padding-left: 0 !important;
}

.pl-0, .px-0 {
    padding-left: 0 !important;
}

.pr-0, .px-0 {
    padding-right: 0 !important;
}

.p-3 {
    padding: 1.5rem !important;
}

.mt-3, .my-3 {
    margin-top: 1.5rem !important;
}

.mt-4, .my-4 {
    margin-top: 2rem !important;
}

.mt-5, .my-5 {
    margin-top: 2rem !important;
}

.mt-6, .my-6 {
    margin-top: 2.5rem !important;
}

.mt-7, .my-7 {
    margin-top: 3rem !important;
}

.mr-2, .mx-2 {
    margin-right: 1rem !important;
}

.mr-3, .mx-3 {
    margin-right: 1.5rem !important;
}

.mb-2, .my-2 {
    margin-bottom: 1rem !important;
}

.mb-5, .my-5 {
    margin-bottom: 3.5rem !important;
}

.ml35px {
    margin-left: 35px !important;
}

.p-4 {
    padding: 2rem !important;
}

.m-0 {
    margin: 0 !important;
}

.ml-0 {
    margin-left: 0 !important;
}

.mt-0, .my-0 {
    margin-top: 0 !important;
}

.f-14 {
    font-size: 14px;
}

.f-16 {
    font-size: 16px;
}

.f-18 {
    font-size: 18px;
}

.f-20 {
    font-size: 20px;
}

.f-22 {
    font-size: 22px;
}

.f-24 {
    font-size: 24px;
}

.f-26 {
    font-size: 26px;
}

.f-28 {
    font-size: 28px;
}

.f-30 {
    font-size: 30px;
}

.text-white {
    color: #fff !important;
}

.rowFlex {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.align-self-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
}

.bg-white {
    background-color: #fff !important;
}

.mr-auto, .mx-auto {
    margin-right: auto !important;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.ds-none {
    display: none;
}

.ds-none-impt {
    display: none !important;
}

.text-balck {
    color: black !important;
}

.text-orange {
    color: #f57327 !important;
}

.position-relative {
    position: relative;
}

.text-nowrap {
    white-space: nowrap;
}

.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.row-eq-heightFix {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.h-100 {
    height: 100%;
}


.course-outline .block-tree .section .section-name .section-title {
    font-size: 18px !important;
}

.content-wrapper .course-tabs .nav-item .nav-link {
    font-size: 18px !important;
}

.wiki-wrapper section.wiki .breadcrumb {
    margin: -10px 0 0 40px;
}

.wiki-wrapper section.wiki .global-functions {
    margin-top: -15px;
}

.form-horizontal .control-label {
    text-align: left;
}

.wiki-wrapper section.wiki #hint_id_content {
    top: 0;
    right: 0%;
}


.wiki-wrapper, .profile-wrapper, .static_tab_wrapper, #course-container {
    margin-top: 20px !important;
}

.btn-outline-primary {
    line-height: 20px;
}

.btn-outline-primary {
    height: 34px;
}

.forum-nav-browse-filter .icon {
    top: 68% !important;
}

.field-label-text {
    font-size : 16px;
}

.wiki-wrapper section.wiki label {
    margin-bottom: 4px;
}

.wrapper-course-materia{
    margin-bottom: 20px;
}

.content-wrapper .course-tabs .nav-item.active .nav-link, .content-wrapper .course-tabs .nav-item:hover .nav-link, .wrapper-course-material .course-tabs .tab a, .wrapper-course-material .course-tabs .tab a:visited {
    font-size: 18px !important;
}

@media (min-width: 768px) {
    .navbarSbs .navbar-nav>li {
        float: left;
    }

    .navbarSbs .navbar-nav>li>a {
        padding-top: 15px;
        padding-bottom: 15px;
    }
}

@media (min-width: 768px) {
    .container, .window-wrap .wrapper-course-material, .window-wrap .content-wrapper.main-container#content {
        max-width: 1180px !important;
        min-width: 760px !important;
        width: 100% !important;
        margin-left: auto;
        margin-right: auto;
    }
}


@media (min-width: 768px) {
    .container, .window-wrap .wrapper-course-material, .window-wrap .content-wrapper.main-container#content {
        width: 750px !important;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 992px) {
    .container, .window-wrap .wrapper-course-material, .window-wrap .content-wrapper.main-container#content {
        width: 970px !important;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 1200px) {
    .container, .window-wrap .wrapper-course-material, .window-wrap .content-wrapper.main-container#content {
        width: 1170px !important;
        margin-left: auto;
        margin-right: auto;
    }
}

.dpn {
    display: none;
}

.forum-search>label {
    display: none !important;
}

.course-sidebar .section h3 {
    font-size: inherit;
}

.date-summary-container .date-summary .heading {
    font-size: inherit; 
}

.navbarSbs .navbar-right {
    margin-top: 0px;
}

.wiki-wrapper section.wiki .article-functions .timestamp .label {
    font-size: inherit;
}

#modal_clone.modal.video-modal {
    height: 340px;
}

/*OLD THEME */
.navbarSbs {
    background-color: transparent;
}

.navbarSbs .nav > li > a:not(.aHeaderLanguage, .aHeaderFontSize, .BorderBeforeLanguage, .BorderAfterLanguage, .loginBtn) {
    padding: 10px 25px !important;
}

.navbarSBS-nav>li>a {
    padding: 10px 25px !important;
    margin-left: 2px !important;
}

.sbs-nav {
    border-bottom: 1px solid transparent;
}

.textDataFooter, .navbarSBS-nav li a, .decrease-font, .increase-font, .normal-font, .change-theme-1, .change-theme-2, .change-theme-3, .DataFooterAddress, .DataFooterContact {
    font-size: 14px;

}

.icon-more {
    cursor: pointer;
}

.navbarSbs, .navbarSbs >.container {
    display: block !important;
    padding-right: 15px !important;
    padding-left: 15px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

.navbarSbs .nav > li > a.dropdown-toggle:not(.aHeaderLanguage, .aHeaderFontSize, .BorderBeforeLanguage, .BorderAfterLanguage, .loginBtn) {
    margin-top: 0px;
}

.primary-short-class, .secondary-short-class {
    border-radius: 5px 0px 0px 5px;
}

.primary-full-class, .secondary-full-class {
    padding: 9px 8px 6px 8px;
    border-radius: 0px 5px 5px 0px;
}

.input-search-filter>input {
    border-radius: 5px 0px 0px 5px !important;
}

.blockBannerIndex {
    height: 450px;
}

.navbar-toggleSbs {
    background: #2d318c !important;
    box-shadow: none !important;
}

.btn-group-vertical>.btn-group:after, .btn-group-vertical>.btn-group:before, .btn-toolbar:after, .btn-toolbar:before, .clearfix:after, .clearfix:before, .container-fluid:after, .container-fluid:before, .container:after, .container:before, .dl-horizontal dd:after, .dl-horizontal dd:before, .form-horizontal .form-group:after, .form-horizontal .form-group:before, .modal-footer:after, .modal-footer:before, .modal-header:after, .modal-header:before, .nav:after, .nav:before, .navbar-collapse:after, .navbar-collapse:before, .navbar-header:after, .navbar-header:before, .navbar:after, .navbar:before, .pager:after, .pager:before, .panel-body:after, .panel-body:before, .row:after, .row:before {
    display: table;
    content: " ";
}

@media (max-width: 767px) {
    .navbar-brandSBS {
        height: 140px;
    }

    .navbar-brandSBS>img {
        max-height: 100%;
    }

    .dropdown-toggle {
        text-align: center;
    }

    .img-course {
        width: auto !important;
        max-width: 100% !important;
    }

    .img-course img {
        max-width: 100%;
    }

    .block-course {
        height: auto !important;
    }

    .navbar-headerSBS {
        width: 100% !important;
    }

    .blockBannerIndex {
        height: 200px;
    }

    #bs-example-navbar-collapse-1 .navbarSBS-nav ul.dropdown-menu {
        position: static !important;
    }
}

@media (max-width: 1024px) and (min-width: 768px) and (orientation: landscape) {
    .blockFooter {
         height: 100%; 
    }
}

@media (min-width: 1500px) {
    .containerCustom {
        max-width: 1170px !important;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }

    .blockHeaderBanner {
        background: rgb(182,220,238);
        background: linear-gradient(90deg, rgba(182,220,238,1) 30%, rgba(208,233,248,1) 50%);
    }
}
/*OLD THEME */


/*NEW THEME */

body {
    font-family: 'KanitRegular' !important;
}

.blockHeader.borderHeaderBottom {
    border-bottom: 2px solid #553982;
}

.navbarSbs {
    min-height: 100px;
    margin-bottom: 0px;
}

.navbarSbs .navbar-brand {
    max-width: 100%;
    width: 340px;
    padding-top: 9px;
}

.navbar-brandSBS>img {
    float: left;
    width: 54px;
}

.textHeaderLogoTop {
    color: #BA55D3;
    font-family: 'KanitRegular';
    font-size: 35px;
    text-align: center;
    margin-top: 25px;
    line-height: 20px;
}

.textHeaderLogoBottom {
    color: #777777;
    font-family: 'KanitLight';
    font-size: 18px;
    text-align: center;
    margin-top: 8px;
    line-height: 20px;
}



.navbarSbs a {
    color: #553982;
}

.navbarSbs .navbar-right {
    margin-top: -10px;
    padding: 0;
}

.navbarSbs .nav > li > a:not(.aHeaderLanguage, .aHeaderFontSize, .BorderBeforeLanguage, .BorderAfterLanguage) {
    padding: 3px 0px 3px 15px !important;
    color: #451850 !important;
    font-family: 'KanitLight';
    font-size: 16px;
}

.navbarSbs .nav>li>a:focus, .nav>li>a:hover,
.window-wrap .navbarSBS-nav > li:not(.active):not(.dropdown) a:hover {
    text-decoration: underline;
    background-color: transparent;
    color: #451850 !important;
}

.navbarSBS-nav>li>a.BorderBeforeLanguage {
    font-size: 35px;
    font-family: 'KanitLight';
    font-weight: lighter;
    border-left: 1px solid #C4C4C4;
    height: 26px;
    margin-top: 0px !important;
    margin-left: 10px !important;
    padding: 0!important;;
}

.navbarSBS-nav li.active a, .navbarSBS-nav li.active:hover a, .navbarSBS-nav li.active:focus a {
    background-color: transparent !important;
}

.navbarSBS-nav ul.dropdown-menu>li.active, 
.navbarSBS-nav ul.dropdown-menu>li.active:hover, 
.navbarSBS-nav ul.dropdown-menu>li.active:focus {
    color: #ffffff !important;
    background-color: #451850 !important;
}

.navbarSBS-nav .dropdown-menu li.active a, 
.navbarSBS-nav .dropdown-menu li.active:hover a, 
.navbarSBS-nav .dropdown-menu li.active:focus a {
    color: #ffffff !important;
    background-color: #451850 !important;
}

.navbarSBS-nav>li>a:focus, .navbarSBS-nav>li>a:hover {
    background-color: transparent !important;
    text-decoration: underline !important;
}

.navbarSbs .navbar-nav>li>a.displayName{
    margin-top: -10px !important;
    padding-left: 0px !important;
}

.navbarSBS-nav .open>a, .navbarSBS-nav .open>a:focus, .navbarSBS-nav .open>a:hover,
.navbarSBS-nav > li.dropdown:hover a.dropdown-toggle, .navbarSBS-nav > li.dropdown:focus a.dropdown-toggle {
    background-color: transparent;
    text-decoration: none;
    border: none;
    color: #451850 !important;
}

.window-wrap .navbarSBS-nav > li.dropdown:hover a.dropdown-toggle {
    background-color: transparent;
    text-decoration: none;
    border: none;
    color: #451850 !important;
}

.window-wrap .navbarSBS-nav .dropdown-menu > li.active a {
    color: #ffffff !important;
    background-color: #451850 !important;
}

.bgSearchIndex {
    background-image: url("/static/sbs-themes/images/banner_mooc_learn.517efaea34a3.jpg");
    /*margin-left: -20px;*/
    /*margin-right: -20px;*/
    height: 400px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.blockSearchIndex {
    padding-right: 50px;
}

.textSubjectIndexSearch {
    color: #F5F5F5;
    font-family: 'KanitRegular';
    font-size: 36px;
    margin-top: 63px;
    text-align: center;
}

.textMiddleIndexSearch {
    color: #DDB0E9;
    font-family: 'KanitLight';
    font-size: 22px;
    margin-top: 4px;
    text-align: center;
}

.textMiddleIndexSearchBottom {
    color: #DDB0E9;
    font-family: 'KanitLight';
    font-size: 22px;
    margin-top: 15px;
    text-align: center;
    line-height: 1em;
}

.textBottomIndexSearch {
    color: #F5F5F5;
    font-family: 'KanitLight';
    font-size: 18px;
    margin-top: 50px;
    margin-bottom: 15px;
    margin-left: 0%;
    text-align: center;
}

.sbsFormBlock {
    margin-left: 22%;
}

.sbsFormData .input-group .form-control {
    background-color: rgb(255 255 255 / 60%);
    border: none;
    color: #ffffff;
    font-family: 'KanitLight';
    font-style: normal;
    height: 35px;
    padding: 5px 12px;
    font-size: 16px;
}


.sbsFormData .input-group .form-control::placeholder {
    color: #ffffff !important;
}

.sbsFormData .input-group .btn {
    background-color: rgb(225 225 234);
    padding: 5px 12px;
    font-size: 10px;
}

.sbsFormData .input-group .btn:hover, .sbsFormData .input-group .btn:focus {
    background-color: rgb(225 225 234 / 90%);
    border-left: none;
}

.sbsFormData .input-group .btn .icon {
    font-size: 22px;
    color: #BA55D3;
}

.textLastIndexSearch {
    color: #F5F5F5;
    font-family: 'KanitLight';
    font-size: 18px;
    /*margin-left: 23%;*/
    margin-top: 25px;
    text-align: center;
}

.hilightLastTextIndexSearch {
    color: #ddb0e9;
}

.hilightLastTextIndexSearch a {
    color: #ddb0e9 !important;
}

.sr, .sr-only {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute;
    margin: -1px;
    height: 1px;
    width: 1px;
    border: 0;
    padding: 0;
    overflow: hidden;
    word-wrap: normal;
}

.mt-40px {
    margin-top: 40px;
}

.textSubjectIndex {
    font-size: 24px;
    margin-top: 25px;
    color: #672479;
    margin-bottom: 25px;
    text-align: center;
    font-family: 'KanitMedium';
    position: relative;
}

.textSubjectIndex span:after {
    position: absolute;
    width: 40px;
    height: 1px;
    border-bottom: 4px solid #BA55D3;
    content: "";
    top: 37px;
    right: 49%;
}

.home .highlighted-courses .courses {
    padding: 0px;
}

.home .courses-container .courses .courses-listing {
    list-style: none;
    margin: 0;
    padding: 0;
    text-indent: 0;
}

.home .courses-container .courses .courses-listing li {
    padding: 0;
}

.home .highlighted-courses .courses .course a {
    position: relative;
    display: block;
}

.home .courses-container .courses .courses-listing .courses-listing-item {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 30px 0;
    /*max-height: 360px;*/
}

.home .courses-container .courses .course {
    border: 1px solid #bebebe;
    border-radius: 2px;
    box-sizing: border-box;
    transition: all 0.125s linear 0s;
    position: relative;
    border-bottom: 3px solid #663399;
    box-shadow: 0 1px 10px 0 rgb(0 0 0 / 13%), inset 0 0 0 1px rgb(255 255 255 / 75%);
    background: #fff;
    width: 100%;
}

.home .courses-container .courses .course .course-image .cover-image {
    height: 160px;
    overflow: hidden;
}

.home .courses-container .courses .course .course-image .cover-image img {
    width: 100%;
    height: auto;
}

.home .courses-container .courses .course .course-image .cover-image .learn-more {
    left: calc(50% - 100px);
    box-sizing: border-box;
    position: absolute;
    top: 55px;
    padding: 0 20px;
    width: 200px;
    height: 50px;
    border-radius: 3px;
    border-color: #663399;
    background: #663399;
    color: #fff;
    line-height: 50px;
    text-align: center;
    opacity: 0;
    text-transform: none;
    font-family: 'KanitMedium';
}

.home .courses-container .courses .course .course-image .cover-image::before {
    left: 0;
    position: absolute;
    top: 0;
    opacity: 0;
    background: #000;
    width: 100%;
    height: 160px;
    content: '';
}

.home .courses-container .courses .course .course-info {
    height: 200px;
    font-family: "KanitRegular";
}

.home .courses-container .courses .course:hover .cover-image::before {
    transition: opacity 0.25s ease-out 0.25s;
    opacity: 0.6;
}

.home .courses-container .courses .course:hover .cover-image .learn-more, .home .courses-container .courses .course:focus .cover-image .learn-more {
    transition: opacity 0.25s ease-out 0.25s;
    opacity: 1;
}

.home .courses-container .courses .course .course-info h2 {
    font-family: "KanitRegular";
}

.home .courses-container .courses .course .course-info .course-organization {
    line-height: 16.28px;
    padding: 10px 15px 2px 15px;
    color: #474747;
    font-family: "KanitLight";
    font-size: 16px;
    display: block;
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home .courses-container .courses .course .course-info .course-code {
    line-height: 23.68px;
    padding: 0 15px;
    color: #474747;
    font-family: "KanitLight";
    font-size: 16px;
    display: block;
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home .courses-container .courses .course .course-info .course-title {
    color: #663399;
    font-size: 18px;
    display: block;
    text-transform: none;
    line-height: 23.68px;
    margin: 5px 0 35px 0;
    padding: 0 15px;
    height: 72px;
}


.home .courses-container .courses .course .course-info .course-date {
    line-height: 20.72px;
    padding: 2px 15px;
    color: #474747;
    font-size: 14px;
    display: block;
    text-transform: none;
}

.home .highlighted-courses .courses .course:hover {
    background: #f5f5f5;
    border-color: #bebebe;
    box-shadow: 0 1px 4px 0 rgb(0 117 180 / 40%);
}

.blockCoursesLatest {
    background-image: url("/static/sbs-themes/images/banner_mooclearn_bottom.4cd9ac80659f.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /*margin-left: -20px;*/
    /*margin-right: -20px;*/
    /*margin-bottom: -10px;*/
    background-attachment: fixed;
}

.home .courses-more{
    clear: both;
    text-align: center;
    padding: 0px 0px 30px;
}

.home .courses-more a.courses-more-cta {
    background-color: #45194f;
    padding: 10px 15px;
    border-radius: 5px;
    color: #ffffff;
    border: 1px solid transparent;
}

.home .courses-more a.courses-more-cta:hover, 
.home .courses-more a.courses-more-cta:focus{
    background-color: #ffffff;
    color: #45194f;
    border: 1px solid #45194f;
}

.blockFooter {
    background-color: #451850;
    padding-top: 25px;
    padding-bottom: 25px;
    line-height: 1.75;
}

.footerTextTop {
    font-family: 'KanitRegular';
    font-size: 16px;
    color: #F5F5F5;
    /*line-height: 22.8571px;*/
    line-height: 1.75;

}

.footerText {
    font-family: 'KanitLight';
    color: #F5F5F5;
    font-size: 14px;
    line-height: 1.75;
}

.footerSubject {
    font-family: 'KanitLight';
    color: #DDB0E9;
    font-size: 14px;
    line-height: 1.75;
}

.footerLink {
    font-family: 'KanitLight';
    color: #F5F5F5 !important;
    line-height: 1.75;
}

.footerBorderTop {
    border-bottom: 1px solid #F5F5F5;
    margin-top: 15px;
}

.blockFooterLeft, .blockFooterRight {
    margin-top: 15px;
}

.aHeaderLanguage {
    font-family: 'KanitLight';
    background-color: #F5F5F5 !important;
    color: #451850 !important;
    float: right;
    padding: 3px 10px !important;
    font-size: 14px !important;
    line-height: 24px !important;
    cursor: pointer;
}

.aHeaderLanguage:first-child {
    border-left: 1px solid #C4C4C4;
}


.aHeaderLanguage.active {
    background-color: #BA55D3 !important;
    color: #ffffff !important;
}

.aHeaderFontSize {
    font-family: 'KanitLight';
    background-color: #F5F5F5 !important;
    float: right;
    padding: 3px 10px !important;
    color: #451850 !important;
}

.aHeaderFontSize.active,
.aHeaderFontSize.active:hover,
.aHeaderFontSize.active:focus {
    background-color: #BA55D3 !important;
    color: #ffffff !important;
}

.aHeaderFontSize:hover, .aHeaderFontSize:focus {
    text-decoration: underline !important;
    color: #451850 !important;
    background-color: transparent;
}

.fontSizeNormal {
    cursor: pointer;
    font-size: 16px !important;
    padding: 1px 10px !important;
    line-height: 28px !important;
}

.fontSizeMedium {
    cursor: pointer;
    font-size: 18px !important;
    border-left: 1px solid #C4C4C4 !important;
    padding: 0px 10px !important;
    line-height: 30px !important;
}

.fontSizeLarge {
    cursor: pointer;
    font-size: 20px !important;
    padding: 0px 10px !important;
    border-left: 1px solid #C4C4C4 !important;
    line-height: 30px !important;
}

.BorderAfterLanguage {
    font-size: 35px !important;
    padding: 15px !important;
    padding-left: 0px;
    font-family: 'KanitLight';
    font-weight: lighter;
    border-left: 1px solid #C4C4C4 !important;
    height: 19px !important;
    margin-top: 0px !important;
    margin-left: 12px !important;
    float: right;
    padding-right: 10px !important;
}

.BorderBeforeLanguage:hover, .BorderAfterLanguage:hover {
    text-decoration: none;
    background-color: transparent;
}

.wrapper-course-material .course-tabs .tab a, .wrapper-course-material .course-tabs .tab a:visited {
    font-family: 'KanitRegular' !important;
}

.content-wrapper .course-tabs .nav-item.active .nav-link, .content-wrapper .course-tabs .nav-item:hover .nav-link, .wrapper-course-material .course-tabs .tab a:hover, .wrapper-course-material .course-tabs .tab div.info-wrapper section.handouts ol li div.hitarea:hover+h4, div.info-wrapper section.handouts ol li .wrapper-course-material .course-tabs .tab div.hitarea:hover+h4, .wrapper-course-material .course-tabs .tab div.info-wrapper section.handouts ol li div.hitarea:focus+h4, div.info-wrapper section.handouts ol li .wrapper-course-material .course-tabs .tab div.hitarea:focus+h4, .wrapper-course-material .course-tabs .tab a:focus, .wrapper-course-material .course-tabs .tab a.active, .wrapper-course-material .course-tabs .tab a:visited:hover, .wrapper-course-material .course-tabs .tab div.info-wrapper section.handouts ol li div.hitarea:hover+h4:visited, div.info-wrapper section.handouts ol li .wrapper-course-material .course-tabs .tab div.hitarea:hover+h4:visited, .wrapper-course-material .course-tabs .tab div.info-wrapper section.handouts ol li div.hitarea:focus+h4:visited, div.info-wrapper section.handouts ol li .wrapper-course-material .course-tabs .tab div.hitarea:focus+h4:visited, .wrapper-course-material .course-tabs .tab a:visited:focus, .wrapper-course-material .course-tabs .tab a:visited.active {
    color: #563982 !important;
    border-bottom: 4px solid #563982 !important;
}

ul.sbs-nav li.nav-item a.nav-link:hover, ul.sbs-nav li.nav-item.active a.nav-link {
    border-bottom-color: #563982;
    color: #563982;
}

.title_main em, .title_main_left em {
    color: #663399;
}

.title_main_left {
    border-bottom: 2px solid #663399 !important;
    font-family: "KanitRegular" !important;
}

.title_main_left h2 {
    font-family: "KanitRegular" !important;
}

.title_main h3, .title_main h3 i, .title_main {
    color: #663399 !important;
}

.ef_box_des {
    background-color: #553982;
}

.panel-primary, .panel-primary-custom  {
    border-color: #553982;
}

.panel-primary>.panel-heading, .panel-primary-custom>.panel-heading {
    color: #ffffff;
    background-color: #553982;
    border-color: #553982;
}

.panel-primary>.panel-heading label {
    color: #ffffff !important;
}

.title-filter {
    color: #553982;
}

.result-course {
    color: #553982;
    border-bottom: 1px solid #553982;
}

.input-search-filter>input {
    border: 1px solid #553982;
}

.btn-search-filter {
    background: #553982;
}

.btn-filter {
    background-color: #5cb85c;
}

.btn-filter:hover {
    color: #fff;
    background-color: #449d44;
    border-color: #398439;
}

.btn-except-filter {
    color: #ffffff;
    background: #666666;
    border: 1px solid #4d4d4d;
}

.btn-except-filter:hover {
    background: #4d4d4d;
}

.checkbox-custom input:checked ~ .checkmark {
    background-color: #553982;
}

.blockResultSearch .btn-success.btn-pagination,
.blockResultMycourse .btn-success.btn-pagination{
    color: #fff;
    background-color: #5cb85c;
    border: 1px solid transparent;
    border-radius: 4px !important;
}

.blockResultSearch .btn-success.btn-pagination:hover,
.blockResultSearch .btn-success.btn-pagination:focus,
.blockResultMycourse .btn-success.btn-pagination:hover,
.blockResultMycourse .btn-success.btn-pagination:focus {
    color: #fff !important;
    background-color: #449d44 !important;
    border-color: #398439 !important;
}

.blockResultSearch .btn-warning.btn-pagination,
.blockResultMycourse .btn-warning.btn-pagination {
    color: #fff;
    background-color: #f0ad4e;
    border: 1px solid transparent;
    border-radius: 4px !important;
}

.blockResultSearch .btn-warning.btn-pagination:hover,
.blockResultSearch .btn-warning.btn-pagination:focus,
.blockResultMycourse .btn-warning.btn-pagination:hover,
.blockResultMycourse .btn-warning.btn-pagination:focus {
    color: #fff !important;
    background-color: #ec971f !important;
    border-color: #d58512 !important;
}

.current-page, .all-page {
    color: #222 !important;
}


.blockResultSearch .btn-success.btn-pagination:disabled,
.blockResultSearch .btn-warning.btn-pagination:disabled,
.blockResultMycourse .btn-success.btn-pagination:disabled,
.blockResultMycourse .btn-warning.btn-pagination:disabled {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-search-page {
    color: #fff;
    background-color: #5cb85c;
    border: 1px solid transparent;
    border-radius: 4px !important;
    background-image: none !important;
}

.btn-search-page:hover>.color-white {
    color: #fff !important;
}

.btn-search-page:hover, .btn-search-page:focus {
    color: #fff !important;
    background-color: #449d44 !important;
    border-color: #398439 !important;
}

.btn-clear {
    background-color: #d9534f;
}

.btn-clear:hover, .btn-clear:focus {
    color: #fff;
    background-color: #c9302c;
    border-color: #ac2925;
}

.input-search-mycourse {
    border-color: #e7e7e7;
}

.card-title {
    font-size: 18px;
    font-family: 'KanitMedium';
}

.card-title a {
    color: #563882 !important;
}

.card-title a:hover, .card-title a:focus {
    color: #563882 !important;
    text-decoration: underline !important;
}

.card-text {
    font-family: 'KanitRegular';
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cardBy {
    color: #563882 !important;
    font-family: 'KanitRegular';
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mycourse-title {
    color: #563882 !important;
}

.mycourse-title:hover, .mycourse-title:focus {
    color: #563882 !important;
    text-decoration: underline !important;
}

.mycourse_date_start, .graduate_date {
    color: #563882 !important;
}

.course_info p {
    font-family: 'KanitRegular' !important;
}

#search-loader {
    color: #563882 !important;
}

.input-group-btn.open .dropdown-menu>.active>a, 
.input-group-btn.open .dropdown-menu>.active>a:focus, 
.input-group-btn.open .dropdown-menu>.active>a:hover {
    background-color: #563882;
}

.navbarSBS-nav li:hover:not(.active) a {
    background-color: transparent !important;
}

.navbarSBS-nav li:focus:not(.active) a {
    text-decoration: unset !important;
    background-color: transparent !important;
    border-radius: 0 !important;
}

.navbarSBS-nav>li>a.BorderBeforeLanguage:focus, .navbarSBS-nav>li>a.BorderBeforeLanguage:hover,
.navbarSBS-nav>li:focus>a.BorderBeforeLanguage, .navbarSBS-nav>li:hover>a.BorderBeforeLanguage {
    box-shadow: unset;
    text-decoration: unset !important;
    border-radius: unset;
}

.navbar-headerSBS .navbar-brand:focus, .navbar-headerSBS .navbar-brand:hover {
    outline: none;
    text-decoration: none !important;
}

.account-settings-sections .section .account-deletion-details .btn-outline-primary {
    padding: 0 20px;
}

.course-info header.course-profile .intro-inner-wrapper .media .hero img {
    object-fit: unset;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 240px;
}

.course-info header.course-profile .intro-inner-wrapper {
    min-height: 280px;
}

.breadcrumbs .nav-item a,
.breadcrumbs span.nav-item{
    font-size: 18px;
}

.breadcrumbs .fa-angle-right {
    font-size: 16px;
}

.page-header {
    margin: 20px 0 20px;
}

.course-info header.course-profile .intro-inner-wrapper .intro .main-cta strong,
.course-info header.course-profile .intro-inner-wrapper .intro .main-cta a.register {
    font-size: 16px;
    font-family: 'KanitRegular';
    padding: 13px 0;
}

.breadcrumbs,
html, button, input, select, textarea, form#wiki_revision .CodeMirror,
body, h1, h2, h3, h4, h5, h6, p, label,
.pattern-library-shim .alert-copy, .pattern-library-shim .alert-copy-with-title, .proctored_exam_status .exam-timer .exam-button-turn-in-exam, .proctored_exam_status .exam-timer .exam-timer-clock #toggle_timer, .course-wrapper .course-content div.timed-exam .exam-action-button.btn-pl-primary, .course-wrapper .course-content div.proctored-exam .exam-action-button.btn-pl-primary, .course-wrapper .courseware-results-wrapper div.timed-exam .exam-action-button.btn-pl-primary, .course-wrapper .courseware-results-wrapper div.proctored-exam .exam-action-button.btn-pl-primary, div.info-wrapper section.updates>ol .show-older-updates, div.info-wrapper section.updates section .show-older-updates, div.info-wrapper section.updates div .show-older-updates, .btn-secondary, .view-teams .card .card-actions .action-view, .pagination .current-page, .pagination .page-number-input, .pagination .total-pages, .course-wrapper .course-content div.timed-exam button.gated-sequence, .course-wrapper .course-content div.proctored-exam button.gated-sequence, .course-wrapper .courseware-results-wrapper div.timed-exam button.gated-sequence, .course-wrapper .courseware-results-wrapper div.proctored-exam button.gated-sequence, .view-student-notes .note-group .note .wrapper-note-excerpts .note-excerpt .note-excerpt-p, .view-student-notes .note-group .note .wrapper-note-excerpts .note-excerpt .note-excerpt-ul, .view-student-notes .note-group .note .wrapper-note-excerpts .note-excerpt .note-excerpt-ol, .view-teams .create-team .form-field .input-text, .view-teams .create-team .form-field .input-select, .instructor-dashboard-content-2 .instructor-nav .nav-item, .view-student-notes #no-results-panel p, .listing-tools, .listing-tools .listing-sort-select, .course-wrapper .course-content .path, .course-wrapper .courseware-results-wrapper .path, .course-index .accordion, .annotator-notice, .view-student-notes .note-group .note .wrapper-note-excerpts .note-excerpt-more-link, .view-student-notes .note-group .note .wrapper-note-excerpts .note-comments .note-comment .note-comment-p, .view-student-notes .note-group .note .wrapper-note-excerpts .note-comments .note-comment .note-comment-ul, .view-student-notes .note-group .note .wrapper-note-excerpts .note-comments .note-comment .note-comment-ol, .view-student-notes .note-group .note .reference, .view-student-notes .placeholder-copy, .view-teams .page-header .page-description, .view-teams .breadcrumbs, .view-teams .card .card-description, .view-teams .card .wrapper-card-meta, .view-teams .team-profile .page-content-secondary, .view-teams .create-team .description, .view-teams .create-team .form-field .tip, .view-teams .join-team-message, .teams-content .teams-main .team-edit-fields .team-required-fields .u-field.u-field-description .u-field-footer .u-field-message, .idash-section .message-copy, .instructor-dashboard-wrapper-2 section.idash-section#membership .member-lists-management .auth-list-container .member-list-widget .label, .instructor-dashboard-wrapper-2 section.idash-section#membership .member-lists-management-ccx .auth-list-container .member-list-widget .label, .instructor-dashboard-wrapper-2 section.idash-section#membership .member-lists-management .auth-list-container .member-list-widget .form-label, .instructor-dashboard-wrapper-2 section.idash-section#membership .member-lists-management-ccx .auth-list-container .member-list-widget .form-label, .instructor-dashboard-wrapper-2 section.idash-section#membership .member-lists-management .auth-list-container .member-list-widget .member-list th, .instructor-dashboard-wrapper-2 section.idash-section#membership .member-lists-management-ccx .auth-list-container .member-list-widget .member-list th, .instructor-dashboard-wrapper-2 section.idash-section#membership .member-lists-management .auth-list-container .member-list-widget .member-list td, .instructor-dashboard-wrapper-2 section.idash-section#membership .member-lists-management-ccx .auth-list-container .member-list-widget .member-list td, .instructor-dashboard-wrapper-2 section.idash-section#cohort_management .cohort-management-settings .form-fields .tip, .instructor-dashboard-wrapper-2 section.idash-section#cohort_management .cohort-management-edit .form-fields .tip, .instructor-dashboard-wrapper-2 section.idash-section#cohort_management .cohort-management-group-add .form-fields .tip, .instructor-dashboard-wrapper-2 section.idash-section#cohort_management .file-upload-form .form-fields .tip, .instructor-dashboard-wrapper-2 section.idash-section#cohort_management .cohort-management-settings .form-cancel, .instructor-dashboard-wrapper-2 section.idash-section#cohort_management .cohort-management-edit .form-cancel, .instructor-dashboard-wrapper-2 section.idash-section#cohort_management .cohort-management-group-add .form-cancel, .instructor-dashboard-wrapper-2 section.idash-section#cohort_management .file-upload-form .form-cancel, .instructor-dashboard-wrapper-2 section.idash-section#cohort_management .cohort-management-group-setup, .instructor-dashboard-wrapper-2 section.idash-section#cohort_management .cohort-management-group-add .form-introduction, .instructor-dashboard-wrapper-2 section.idash-section#cohort_management .toggle-cohort-management-secondary, .instructor-dashboard-wrapper-2 section.idash-section#cohort_management .toggle-cohort-management-discussions, .instructor-dashboard-wrapper-2 section.idash-section#cohort_management .cohort-management-file-upload .form-introduction, .instructor-dashboard-wrapper-2 section.idash-section#cohort_management .cohort-management-supplemental, .instructor-dashboard-wrapper-2 section.idash-section#discussions_management .discussions-management-supplemental, .wrap-instructor-info .instructor-info-action, .edx-notes-visibility .edx-notes-visibility-error, .view-teams .card .card-type, .view-teams .card.has-pennant .pennant, .instructor-dashboard-wrapper-2 section.idash-section#membership .enroll-option .hint, .instructor-dashboard-wrapper-2 section.idash-section#certificates .white-listed-students table th, .instructor-dashboard-wrapper-2 section.idash-section#certificates .invalidation-history table th, .search-results .search-results-item .search-results-ellipsis, .view-teams .action {
    font-family: 'KanitRegular' !important;
}

.hd-4, .modal .inner-wrapper header h2, .leanModal_box .inner-wrapper header h2,
.course-bookmarks .search-results .search-count,
.course-bookmarks .bookmarks-results-list .list-item-date {
    font-size: 14px;
}

@media (max-width: 1200px) {
    .textBottomIndexSearch {
        text-align: center;
        margin-left: 0;
    }
}

@media (max-width: 991.98px) {
    .navbarSbs .navbar-brand {
        max-width: 100%;
        width: 250px;
        padding-top: 9px;
    }

    .navbar-brandSBS>img {
        width: 42px;
        margin: 0;
    }

    .textHeaderLogoTop {
        font-size: 24px;
        line-height: 20px;
        margin-top: 20px;
    }

    .textHeaderLogoBottom {
        font-size: 14px;
        line-height: 20px;
        margin-top: 0px;
    }

    .navbarSbs .nav > li > a:not(.aHeaderLanguage, .aHeaderFontSize, .BorderBeforeLanguage, .BorderAfterLanguage) {
        font-size: 14px !important;
        padding-left: 5px !important;
    }

    .navbarSbs .navbar-nav>li>a.displayName {
        margin-top: -3px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100px;
    }

    img.imgProfileMenu {
        width: 26px;
        height: 26px;
    }

    .navbar-right {
        margin-right: 0px;
        margin-top: -15px !important;
    }

    .navbarSbs {
        padding: 0px !important;
        min-height: 85px;
    }

    .navbarSbs >.container {
        padding: 0px 15px !important;
    }

    .textMiddleIndexSearch, .textMiddleIndexSearchBottom {
        font-size: 18px;
    }

    .textBottomIndexSearch {
        margin-left: 0;
        text-align: center;
        font-size: 16px;
    }

    .sbsFormBlock {
        margin-left: 0%;
    }
}


@media (max-width: 767px) {
    .navbarSbs {
        min-height: 100px;
        margin-bottom: 0px;
        padding: 0px !important;
    }
    .navbar-toggleSbs {
        background: #451850 !important;
        box-shadow: none !important;
        margin-top: 20px;
        margin-bottom: 0;
    }

    .navbarSbs .navbar-brand {
        height: auto;
        margin-bottom: 0px;
    }

    .navbar-brandSBS>img {
        width: 42px;
        margin: 0;
    }

    .textHeaderLogoTop {
        font-size: 24px;
        line-height: 20px;
        margin-top: 20px;
    }

    .textHeaderLogoBottom {
        font-size: 16px;
        line-height: 20px;
        margin-top: 5px;
    }

    .navbarSbs .nav > li > a {
        text-align: left;
    }

    .navbarSBS-nav>li>a.BorderBeforeLanguage {
        font-size: 0px;
        line-height: 0px;
        height: 15px;
        border: none;
        border-top: 1px solid #999;
        margin-top: 12px !important;
    }

    .navbarSBS-nav.navbar-nav .open .dropdown-menu>li>a {
        text-align: left;
    }

    .navbarSbs .navbar-nav>li>a.displayName {
        margin-top: -3px !important;
        white-space: normal;
        overflow: inherit;
        text-overflow: unset;
        width: unset;
        padding-bottom: 10px !important;
    }

    .navbar-collapseSBS {
        padding-top: 20px;
    }

    .bgSearchIndex {
        margin-left: 0px;
        margin-right: 0px;
        background-image: none;
        background-color: #3c3f73;
    }

    .blockSearchIndex {
        padding-right: 0;
    }

    .textMiddleIndexSearchBottom {
        font-size: 18px;
    }

    .textBottomIndexSearch {
        margin-left: 0;
        text-align: center;
    }

    .sbsFormBlock {
        margin-left: 0%;
    }
}



@media screen and (min-width: 980px) {
    .home .courses-container .courses .courses-listing .courses-listing-item {
        float: left;
        display: block;
        margin-right: 1.35765%;
        width: 23.23176%;
    }

    .home .courses-container .courses .courses-listing .courses-listing-item:nth-child(4n+1) {
        clear: left;
    }
}

@media screen and (min-width: 769px) and (max-width: 979px) {
    .home .courses-container .courses .courses-listing .courses-listing-item:nth-child(3n+1) {
        clear: left;
    }

    .home .courses-container .courses .courses-listing .courses-listing-item {
        float: left;
        display: block;
        margin-right: 1.35765%;
        width: 31.76157%;
    }
}


@media screen and (min-width: 541px) and (max-width: 768px){
    .home .courses-container .courses .courses-listing .courses-listing-item:nth-child(2n+1) {
        clear: left;
    }

    .home .courses-container .courses .courses-listing .courses-listing-item {
        float: left;
        display: block;
        margin-right: 1.57866%;
        width: 48.21067%;
    }
}
/*NEW THEME */