:root {
    --main-color: #4495A2;
    --gradient-color: linear-gradient(90deg, #1FABA1 0%, #105651 100%);
    --background-color: #EDFCFB;
    --link-color: #515151;
    --border-color: #146F69;
}

/* FONTFACE */
@font-face {
    font-family: 'Mitr Bold';
    src: url("/static/sbs-themes/fonts/Mitr/Mitr-Bold.5eacb89fdab0.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
}

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

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

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


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

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


body {
    font-family: "Mitr" !important;
    -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: "Mitr" !important;
    -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);
}

#contentData > section,
#contentData,
.window-wrap .blockResultMycourse {
    background: var(--background-color);
}

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

.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, .title_main_left h2 {
    font-family: "Mitr" !important;
}

.mitr-bold {
    font-family: "Mitr Bold" !important;
  }

.mitr-extralight {
    font-family: 'Mitr ExtraLight' !important;
}


.mitr-light {
    font-family: 'Mitr Light' !important;
}

.mitr-medium {
    font-family: "Mitr Medium" !important;
}

.mitr-semibold {
    font-family: 'Mitr SemiBold' !important;
}

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

.ms-1 {
    margin-left: .25rem !important;
}

.ms-2 {
    margin-left: .5rem !important;
}

.ms-3 {
    margin-left: 1rem !important;
}

.ms-4 {
    margin-left: 1.5rem !important;
}

.ms-5 {
    margin-left: 3rem !important;
}

.me-0 {
    margin-right: 0 !important;
}

.me-1 {
    margin-right: .25rem !important;
}

.me-2 {
    margin-right: .5rem !important;
}

.me-3 {
    margin-right: 1rem !important;
}

.me-4 {
    margin-right: 1.5rem !important;
}

.me-5 {
    margin-right: 3rem !important;
}

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

.mt-1 {
    margin-top: .25rem !important;
}

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

.mt-3 {
    margin-top: 1rem !important;
}

.mt-4 {
    margin-top: 1.5rem !important;
}

.mt-5 {
    margin-top: 3rem !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-1 {
    margin-bottom: .25rem !important;
}

.mb-2 {
    margin-bottom: .5rem !important;
}

.mb-3 {
    margin-bottom: 1rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.mb-5 {
    margin-bottom: 3rem !important;
}

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

.my-1 {
    margin-top: .25rem !important;
    margin-bottom: .25rem !important;
}

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

.my-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}

.my-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.my-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
}

.mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.mx-1 {
    margin-left: .25rem !important;
    margin-right: .25rem !important;
}

.mx-2 {
    margin-left: .5rem !important;
    margin-right: .5rem !important;
}

.mx-3 {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
}

.mx-4 {
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important;
}

.mx-5 {
    margin-left: 3rem !important;
    margin-right: 3rem !important;
}

.gap-3 {
    gap: 1rem;
}

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

.flexTop {
    display: flex;
    align-items: start !important;
}

.flexBottom {
    display: flex;
    align-items: end !important;
}

.flexCenter {
    display: flex;
    justify-content: center !important;
}

.flexBetween {
    display: flex;
    justify-content: space-between !important;
}

.flexStart {
    display: flex;
    justify-content: flex-start !important;
    align-items: center;
}

.flexEnd {
    display: flex;
    justify-content: flex-end !important;
    align-items: center;
}


/* Globals */

/*  Button  */
.btn-adap-primary,
.btn-adap-primary:hover,
.btn-adap-primary:active,
.btn-adap-primary:focus {
    background: linear-gradient(90deg, #1FABA1 0%, #105651 100%);
    color: #FFF;
    border-image: linear-gradient(90deg, #1FABA1 0%, #105651 100%);
    border-radius: 25px;
    border: 1px solid ;
}

.btn-adap-primary-outline,
.btn-adap-primary-outline:hover,
.btn-adap-primary-outline:active,
.btn-adap-primary-outline:focus {
    border-image: linear-gradient(90deg, #1FABA1 0%, #105651 100%);
    border-radius: 25px;
    background: transparent;
    color: #4495A2;
    border: 1px solid ;
}

.btn-adap-primary:hover,
.btn-adap-primary-outline:hover {
    opacity: 0.8;
}
/*  Button  */


/*  Card  */
.courses .courses-listing .courses-listing-item .panel {
    border-radius: 10px;
    overflow: hidden;
}

.courses .courses-listing .courses-listing-item .panel .panel-heading img {
    width: 100%;
    height: 100%;
}

.courses .courses-listing .courses-listing-item .panel .panel-heading {
    border-radius: 10px 10px 0px 0px;
    padding: 0;
    border: none;
    height: 160px;
    overflow: hidden;
}

.courses .courses-listing .courses-listing-item .panel .panel-body .course-info  {
    min-height: 145px;
}

.courses .courses-listing .courses-listing-item .panel .panel-body .course-title {
    color: #515151;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 24px;
    font-size: 16px;
}

.courses .courses-listing .courses-listing-item .panel .panel-body .course-organization {
    color: #FFF;
    text-align: center;
    border-radius: 50px;
    background: linear-gradient(90deg, rgba(31, 171, 161, 0.80) 0%, rgba(38, 209, 198, 0.80) 100%);
    padding: 5px 14px;
    display: inline-block;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    margin-bottom: 0;
}

.courses .courses-listing .courses-listing-item .panel .panel-footer {
    padding: 0px 15px 10px;
    background: #ffffff;
    border-top: none;
}

.courses .courses-listing .courses-listing-item .panel .panel-footer .course-info > p > span {
    color: #4495A2;
    font-size: 12px;
}

.courses .courses-listing .courses-listing-item .panel .panel-footer .course-info > p {
    color: #515151;
    font-size: 12px;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
}
/*  Card  */


/* Pagination  */
.paginationSBS {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 5px;
}

.paginationSBS .btn-sbs.btn-pagination,
.paginationSBS .currentPage,
.paginationSBS .all-page {
    border: none;
    background-color: #FFF;
    width: 36px;
    height: 36px;
    border-radius: 18px;
    transition: all .2s ease-in;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: none;
}

.paginationSBS .btn-sbs.btn-pagination:hover,
.paginationSBS .btn-sbs.btn-pagination:hover svg path {
    background-color: #4495A2;
    color: #FFF;
    stroke: #FFF;
}

.paginationSBS .btn-sbs.btn-pagination:disabled,
.paginationSBS .btn-sbs.btn-pagination:disabled svg path {
    cursor: not-allowed;
    color: #515151;
    background-color: #fff;
    stroke: #515151;
}

.paginationSBS .btn-sbs.btn-pagination {
    color: #4495A2;
}

.paginationSBS .currentPage,
.paginationSBS .all-page {
    color: #4495A2 !important;
}

.paginationSBS .all-page {
    width: 60px;
}

.paginationSBS svg {
    margin-top: 2px;
}
/* Pagination  */


/* FormControl  */
.formAdap .form-control,
.formAdap .form-control:focus,
.formAdap .form-control:hover,
.formAdap .form-control:active {
    background: transparent;
    border: none !important;
    box-shadow: none !important;
    border-bottom: 1px solid #4495A2 !important;
    border-radius: 0;
}
/* FormControl  */


.bg-form {
    background: rgba(255, 255, 255, 0.65) !important;
}

/* Globals */

.blockHeaderAdap {
    border-bottom: 1px solid #146F69;
    background: linear-gradient(90deg, #1FABA1 0%, #26D1C6 35.5%, #FFF 100%);
    padding: 0;
    height: 40px;
    overflow: hidden;
}

.blockHeaderAdap .container {
    padding-top: 0;
    padding-bottom: 0;
}

.blockHeaderAdap a {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #515151 !important;
}

.blockHeaderAdap a.active {
    background: #EDFCFB;
}

.blockHeaderAdap .btn-language {
    height: 39px;
    width: 68px;
}

.blockHeaderAdap .btn-language.active {
    color: #06146E !important;
}

.blockHeaderAdap a.btn-language > svg {
    margin-top: -2px;
    margin-right: 2px;
}

.blockHeaderAdap .btn-font {
    width: 39px;
    height: 39px;
    border-left: none !important;
    padding: 0 !important;
}

.blockHeaderAdap .btn-font.active {
    color: #1FABA1 !important;
}

.blockHeaderAdap .icon-search {
    height: 30px;
    width: 30px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    margin-left: 20.5px;
    margin-right: 12px;
}

.blockHeaderAdap .icon-search {
    height: 30px;
    width: 30px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    margin-left: 20.5px;
    margin-right: 12px;
}

.blockHeader .navbar-sbs-adap {
    margin: 0;
    border: none;
    height: 100px;
    display: flex;
    align-items: center;
    background: #FFF;
}

.blockHeader .navbar-sbs-adap .navbar-brand {
    display: flex;
    align-items: center;
    height: unset;
    gap: 30px;
}


.blockHeader .navbar-sbs-adap .nav> li a {
    padding: 10px;
    color: #515151 !important;
}

.blockHeader .navbar-sbs-adap .nav> li.active > a,
.blockHeader .navbar-sbs-adap .nav> li > a:hover,
.blockHeader .navbar-sbs-adap .nav> li > a:focus,
.blockHeader .navbar-sbs-adap .nav> li > a:active {
    color: #4495A2 !important;
    text-decoration: none;
}

.blockHeader .navbar-sbs-adap .nav> li > a.btn-login {
    border-radius: 25px;
    background: linear-gradient(90deg, #1FABA1 0%, #105651 100%);
    width: 140px;
    height: 40px;
    color: #FFF !important;
}

.blockHeader .navbar-sbs-adap .nav> li > a.btn-login:hover,
.blockHeader .navbar-sbs-adap .nav> li > a.btn-login:focus,
.blockHeader .navbar-sbs-adap .nav> li > a.btn-login:active {
    color: #FFF !important;
    opacity: 0.8;
}

.blockHeader .navbar-sbs-adap .nav> li > a.btn-login .text-login {
    position: relative;
    top: -4px;
}

.blockHeader .navbar-sbs-adap .navbar-toggle {
    background-color: #EFEFEFEF;
}

.blockHeader .navbar-sbs-adap .navbar-toggle .icon-bar {
    background: #1FABA1;
}

.blockHeader .navbar-sbs-adap .navbar-collapse {
    padding-left: 0;
    padding-right: 0;
}

.blockHeader .navbar-sbs-adap .navbar-right {
    margin-top: unset;
    margin-bottom: auto !important;
    display: flex !important;
    align-items: center;
    float: none !important;
    margin-right: 0;
}

.blockHeader .navbar-sbs-adap .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.blockHeader .navbar-sbs-adap .container::after,
.blockHeader .navbar-sbs-adap .container::before {
    all: unset;
}

.blockHeader .navbar-sbs-adap .dropdown-menu li.active,
.blockHeader .navbar-sbs-adap .dropdown-menu>.active>a, 
.blockHeader .navbar-sbs-adap .dropdown-menu>.active>a:focus, 
.blockHeader .navbar-sbs-adap .dropdown-menu>.active>a:hover {
    background: var(--main-color) !important;
    color: #fff !important;
}


.blockHeader .navbar-sbs-adap .dropdown-menu > li > a {
    padding: 3px 20px;
}

/* theme adap rewrite main.html header */
.blockHeaderAdap .container > div,
.blockHeader .container > div {
    display: flex;
    width: unset;
    border: none;
    background: unset;
    box-shadow: none;
}

.window-wrap .blockHeader .container .navbar-nav {
    display: flex !important;
}

/* theme adap rewrite main.html header */


.blockFooterAdap {
    background: #000000;
}

.blockFooterAdap > div {
    height: 40px;
    padding: 5px 0px;
}

.blockFooterAdap span {
    color: #FFF;
    text-align: center;
}

.blockFooter {
    background-color: #222;
    color: #fff;
}

.blockFooter .blockContact h6,
.blockFooter .blockSiteMap h6 {
    font-size: 16px;
    margin-bottom: 2px;
    color: #fff !important;
}

.blockFooter .blockContact p,
.blockFooter .blockContact p a,
.blockFooter .blockSiteMap a,
.blockFooter .blockSiteMap li {
    font-size: 14px;
    color: #fff !important;
}

.blockFooter .blockSiteMap li {
    margin-top: 8px;
}

.blockFooter .blockUserOnline {
    color: #03FDF3;
    font-size: 16px;
    display: flex;
    gap: 4px;
}

.blockFooter .blockUserOnline .count {
    width: 84px;
    height: 24px;
    border-radius: 15.5px;
    background: rgba(3, 253, 243, 0.25);
    color: #03FDF3;
    /* font-family: "Kanit Medium"; */
    font-size: 18px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-left: 4px;
}


/* INDEX */
.flexWrap {
    flex-wrap: wrap;
}

#contentData > section.blockBanner {
    background-image: url("/static/sbs-themes/images/Banner-MOOC-NECTEC.5e6b11651955.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 400px;
    padding-top: 60px;
}

.blockBanner .textTitle {
    /* text-shadow: 0px 4px 6px #CAE0FF; */
    font-family: "Mitr SemiBold" !important;
    font-size: 42px !important;

    background: linear-gradient(90deg, #1FABA1 0%, #34DACF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    -webkit-text-stroke: 3px white;

    /*    text-shadow: rgb(255, 255, 255) 6px 0px 0px, rgb(255, 255, 255) 5.91686px 0.995377px 0px, rgb(255, 255, 255) 5.66974px 1.96317px 0px, rgb(255, 255, 255) 5.2655px 2.87655px 0px, rgb(255, 255, 255) 4.71532px 3.71022px 0px, rgb(255, 255, 255) 4.03447px 4.44106px 0px, rgb(255, 255, 255) 3.24181px 5.04883px 0px, rgb(255, 255, 255) 2.35931px 5.51667px 0px, rgb(255, 255, 255) 1.41143px 5.83163px 0px, rgb(255, 255, 255) 0.424423px 5.98497px 0px, rgb(255, 255, 255) -0.574341px 5.97245px 0px, rgb(255, 255, 255) -1.55719px 5.79441px 0px, rgb(255, 255, 255) -2.49688px 5.45578px 0px, rgb(255, 255, 255) -3.36738px 4.96596px 0px, rgb(255, 255, 255) -4.14455px 4.33852px 0px, rgb(255, 255, 255) -4.80686px 3.59083px 0px, rgb(255, 255, 255) -5.33596px 2.74364px 0px, rgb(255, 255, 255) -5.71718px 1.8204px 0px, rgb(255, 255, 255) -5.93995px 0.84672px 0px, rgb(255, 255, 255) -5.99811px -0.150428px 0px, rgb(255, 255, 255) -5.89004px -1.14341px 0px, rgb(255, 255, 255) -5.61874px -2.1047px 0px, rgb(255, 255, 255) -5.19172px -3.00766px 0px, rgb(255, 255, 255) -4.62082px -3.82727px 0px, rgb(255, 255, 255) -3.92186px -4.54081px 0px, rgb(255, 255, 255) -3.11421px -5.12852px 0px, rgb(255, 255, 255) -2.22026px -5.57409px 0px, rgb(255, 255, 255) -1.26477px -5.86518px 0px, rgb(255, 255, 255) -0.274238px -5.99373px 0px, rgb(255, 255, 255) 0.723898px -5.95617px 0px, rgb(255, 255, 255) 1.70197px -5.75355px 0px, rgb(255, 255, 255) 2.63288px -5.39147px 0px, rgb(255, 255, 255) 3.49082px -4.87998px 0px, rgb(255, 255, 255) 4.25202px -4.23324px 0px, rgb(255, 255, 255) 4.89538px -3.46919px 0px, rgb(255, 255, 255) 5.40307px -2.60899px 0px, rgb(255, 255, 255) 5.76102px -1.67649px 0px, rgb(255, 255, 255) 5.95932px -0.697531px 0px;*/
}

.blockBanner .textSubTitle {
    color: #1FABA1;
    font-family: "Mitr SemiBold" !important;
    font-size: 33px !important;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #FFF;
    font-size: 33px;
    }

.blockBanner .textDetail {
    color: #1FABA1;
    font-family: "Mitr Light" !important;
    font-size: 26px !important;
    text-align: center;
    font-weight: 400;
    width: 609px;
}


.blockHome {
    padding-top: 20px;
}

.blockHome .highlighted-courses {
    margin-top: 25px;
}

.blockHome .recommend-container .recommend-title  {
    color: #4495A2;
    font-family: "Mitr Medium" !important;
    font-size: 30px;
}

.blockHome .recommend-container .courses-more {
    color: #4495A2;
    text-align: center;
    font-family: Mitr;
    font-size: 18px;
}

.blockHome .recommend-container highlighted-courses {
    margin-top: 25px;
}

#contentData .divider {
    background: #4495A2;
    height: 1px;
}

.blockHome .recommend-container .highlighted-courses .courses-listing-first .course a img {
    width: 550px;
    height: 310px;
    border-radius: 10px;
}

.blockHome .recommend-container .highlighted-courses .courses-listing-first .course .course-info .course-title {
    color: #4495A2;
    font-size: 26px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 20px;
}

.blockHome .recommend-container .highlighted-courses .courses-listing-first .course .course-info .course-short-detail {
    color: #515151;
    font-size: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 108px;
    font-family: 'Mitr Light' !important;
}

.blockHome .recommend-container .highlighted-courses .courses-listing-first .course .course-info .course-organization {
    color: #FFF;
    text-align: center;
    border-radius: 50px;
    background: linear-gradient(90deg, rgba(31, 171, 161, 0.80) 0%, rgba(38, 209, 198, 0.80) 100%);
    padding: 5px 14px;
    display: inline-block;
    margin-top: 20px;
}

.blockHome .recommend-container .highlighted-courses .courses-listing-first .course .course-info > div {
    margin-top: 20px;
}

.blockHome .recommend-container .highlighted-courses .courses-listing-first .course .course-info > div > p {
    color: #515151;
}

.blockHome .recommend-container .highlighted-courses .courses-listing-first .course .course-info > div > p > span {
    color: #4495A2;
}


.blockHome .current-courses-container .current-course-title {
    color: #FFF;
    font-size: 30px;
}

.blockHome .current-courses-container .courses-more {
    color: #FFF;
    font-size: 18px;
}

.blockHome .current-courses-container  {
    background-image: url("/static/sbs-themes/images/BG-MOOC-NECTEC-CurrentOpen.ce395e3a34ae.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-top: 20px;
}

.blockHome .current-courses-container .highlighted-courses .courses-listing-item {
    width: calc(100% - 15px);
    margin-left: auto;
    margin-right: auto;
}

.title-main {
    font-size: 30px;
    color: #4495A2;
    margin-top: 20px;
    margin-bottom: 25px;
}

.blockResultMycourse .blockserach-container {
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.65);
    min-height: 88px;
    padding-left: 20px;
    padding-right: 20px;
}

.blockResultMycourse .blockserach-container .row {
    padding-bottom: 10px;
}


.blockResultMycourse .blockserach-container .row > div {
    margin-top: 25px;
}

.blockResultMycourse .blockserach-container .input-group .btn-search-sbs {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #4495A2;
    display: flex;
    justify-content: space-between;
    color: #4495A2;
    outline: none;
    box-shadow: none;
}

.blockResultMycourse .blockserach-container .input-group .input-group-btn.open .dropdown-menu>.active>a,
.blockResultMycourse .blockserach-container .input-group .input-group-btn.open .dropdown-menu>.active>a:focus,
.blockResultMycourse .blockserach-container .input-group .input-group-btn.open .dropdown-menu>.active>a:hover {
    background: #4495A2;
}

.blockResultMycourse .blockserach-container .form-control {
    background: transparent;
    border: none;
    box-shadow: none;
    border-bottom: 1px solid #4495A2;
    border-radius: 0;
}

.btn-adap-primary,
.btn-adap-primary:hover,
.btn-adap-primary:active,
.btn-adap-primary:focus {
    background: linear-gradient(90deg, #1FABA1 0%, #105651 100%);
    color: #FFF;
    border-image: linear-gradient(90deg, #1FABA1 0%, #105651 100%);
    border-radius: 25px;
    border: 1px solid ;
}

.btn-adap-primary-outline,
.btn-adap-primary-outline:hover,
.btn-adap-primary-outline:active,
.btn-adap-primary-outline:focus {
    border-image: linear-gradient(90deg, #1FABA1 0%, #105651 100%);
    border-radius: 25px;
    background: transparent;
    color: #4495A2;
    border: 1px solid ;
}

.btn-adap-primary:hover,
.btn-adap-primary-outline:hover {
    opacity: 0.8;
}


.blockResultMycourse .blockserach-container .btn-adap-primary-outline,
.blockResultMycourse .blockserach-container .btn-adap-primary {
    width: 100px;
    height: 40px;
}


#contentData .divider {
    background: #4495A2;
    height: 1px;
}

.blockResultMycourse .blockserach-container .button-search {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
    width: 100%;
}

 
.blockResultMycourse .divider {
    margin-top: 25px;
    margin-bottom: 25px;
}

.blockResultMycourse .blockresult-container .blockOverview .controlFilter {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.blockResultMycourse .blockresult-container .blockOverview .controlFilter .title-filter {
    color: #4495A2;
    position: unset;
}

.blockResultMycourse .blockresult-container .blockOverview .controlFilter .switch-filter .switch-filter-text {
    color: #CCC;
    font-size: 14px;
}

.blockResultMycourse .blockresult-container .blockOverview .controlFilter .switch-filter .switch-filter-text.active {
    color: #4495A2;
}

.blockResultMycourse .blockresult-container .blockOverview .controlFilter .switch-filter .switch {
    position: relative;
    display: inline-block;
    width: 40px;
    margin-bottom: 0;
}

.blockResultMycourse .blockresult-container .blockOverview .controlFilter .switch-filter .switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.blockResultMycourse .blockresult-container .blockOverview .controlFilter .switch-filter .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px;
}

.blockResultMycourse .blockresult-container .blockOverview .controlFilter .switch-filter .slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 5px;
    bottom: 5px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

.blockResultMycourse .blockresult-container .blockOverview .controlFilter .switch-filter input:checked + .slider {
    background: #29B5A8;
}

.blockResultMycourse .blockresult-container .blockOverview .controlFilter .switch-filter input:focus + .slider {
    box-shadow: 0 0 1px #29B5A8;
}

.blockResultMycourse .blockresult-container .blockOverview .controlFilter .switch-filter input:checked + .slider:before {
    -webkit-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
}

.blockResultMycourse .blockresult-container .blockOverview {
    margin-bottom: 25px;
}

.blockResultMycourse .blockresult-container .blockOverview .resultCourse {
    color: #000;
    font-size: 20px;
}

.blockResultMycourse .blockresult-container .blockOverview .resultCourse span {
    color: #4495A2;
}

.blockResultMycourse .blockresult-container .sbs-filter.filter-hide {
    display: none;
    transition: all 0.5s ease-out;
}

.blockResultMycourse .blockresult-container .sbs-filter .input-search-filter {
    margin-top: 0;
    border-radius: 0;
    border-bottom: 1px solid #4495A2;
}

.blockResultMycourse .blockresult-container .sbs-filter .input-search-filter .form-control {
    border: none;
    background: transparent;
    box-shadow: none;
}

.blockResultMycourse .blockresult-container .sbs-filter .input-search-filter .btn-search-filter {
    background: transparent;
}

.blockResultMycourse .blockresult-container .sbs-filter .input-search-filter .btn-search-filter > .glyphicon-search {
    color: #4495A2;
}

.blockResultMycourse .blockresult-container .sbs-filter .panel-primary-custom {
    border: none;
    border-radius: 10px;
}

.blockResultMycourse .blockresult-container .sbs-filter .panel-primary > .panel-heading, 
.blockResultMycourse .blockresult-container .sbs-filter .panel-primary-custom > .panel-heading {
    background: linear-gradient(90deg, rgba(31, 171, 161, 0.80) 0%, rgba(38, 209, 198, 0.80) 100%);
    color: #FFF;
    border-bottom: 0;
}

.blockResultMycourse .blockresult-container .sbs-filter .panel-primary-custom .panel-body .checkbox-custom input:checked ~ .checkmark {
    background:#4495A2;
    
}


.blockResultMycourse .blockresult-container .sbs-filter .sticky-bg .btn-adap-primary-outline {
    color: #FFF;
}

#search-loader {
    color: #4495A2 !important;
}

.window-wrap .content-wrapper.main-container#content {
    background: transparent !important;
}

.title_main em, 
.title_main_left em, 
.title_main h3, 
.title_main h3 i, 
.title_main {
    color: #4495A2 !important;
}

.navbarSbs .nav>li>a:focus, .nav>li>a:hover, .window-wrap .navbarSBS-nav > li:not(.active):not(.dropdown) a:hover {
    color: #4495A2 !important;
}

/* หน้า หลักสูตร, การสนทนา, wiki ต่างๆ */
.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,
ul.sbs-nav li.nav-item a.nav-link:hover, 
ul.sbs-nav li.nav-item.active a.nav-link {
    color: #4495A2 !important;
    border-bottom: 4px solid #4495A2 !important;
}

/* Login */
.verification-process .report-receipt-provider .provider-buttons-logos .complete-order button, .dashboard .main-container .my-courses .course .details .enter-course, .wrapper-messages-primary .message.message-upsell .action-view-consent, .wrapper-messages-primary .message.message-status .verification-cta .btn, .wrapper-messages-primary .message.message-status .credit-action .credit-btn, .btn-secondary, .dashboard .main-container .my-courses .course .details .enter-course.archived, .wrapper-messages-primary .message.message-upsell .action-view-consent.archived, .account-settings-sections .section .account-settings-section-body .u-field .field .u-field-link, .account-settings-sections .section .account-settings-section-body .u-field .u-field-order .u-field-order-link .u-field-link, .account-settings-sections .section .account-settings-section-body .u-field .u-field-order-lines .u-field-order-link .u-field-link, .account-settings-sections .section .account-deletion-details .btn-outline-primary, .account-settings-sections .section .account-deletion-details .delete-confirmation-wrapper .paragon__modal-footer .paragon__btn-outline-primary, .courseware-bookmarks-button .bookmarks-list-button, .pagination .current-page, .pagination .page-number-input, .pagination .total-pages, .verification-process .carousel #wrapper-review .review-task .copy, .verification-process.step-confirmation .list-info .info-item .copy, .view-survey .instructions, .view-survey .action-primary, .view-survey label, .login-register .instructions, .financial-assistance-wrapper .financial-assistance-form .instructions, .login-register .status .message-copy, .financial-assistance-wrapper .financial-assistance-form .status .message-copy, .login-register .status .message-copy p, .financial-assistance-wrapper .financial-assistance-form .status .message-copy p, .login-register .institution-list .institution, .financial-assistance-wrapper .financial-assistance-form .institution-list .institution, .verification-process.step-select-track .register-choice .copy, .verification-process.step-select-track .register-choice .wrapper-copy-inline, .verification-process.step-select-track .register-choice .copy-inline, .verification-process.step-requirements .list-reqs .req .copy-super, .verification-process.step-requirements .list-reqs .req-activate .copy-sub, .cart-errors, .confirm-enrollment .enrollment-details .enrollment-text, .shopping-cart .user-data .data-input h1 span, .shopping-cart .user-data .data-input .three-col .col-1, .shopping-cart .user-data .data-input .three-col .col-2 .numbers-row label, .shopping-cart .discount .code-input input[type="text"], .shopping-cart .col-two .col-1 span.radio-group label, .shopping-cart .col-two .col-2 p, .shopping-cart .billing-data .col-half .data-group label, .shopping-cart .billing-data .col-half .data-group input, .wrapper-authorize p, .financial-assistance-wrapper p, .financial-assistance-wrapper .user-info .title, .financial-assistance-wrapper .user-info .data, .wrapper-msg.wrapper-auto-cert .auto-cert-message .has-actions .msg-actions, #api-access-wrapper #api-access-status, #api-access-wrapper .api-form-container .api-form label, #api-access-wrapper .api-form-container .api-form input, #api-access-wrapper .api-form-container .api-form textarea, #api-access-wrapper .api-form-container .api-form input[type=submit], #api-access-wrapper .api-form-container .api-form textarea[type=submit], #api-access-wrapper .api-form-container .api-form .errorlist li, #api-access-wrapper .api-form-container .api-form #api-access-submit, #api-access-wrapper .api-form-container .api-form .preview-query, #api-access-wrapper .application-info p, .view-profile .wrapper-profile-section-container-two .u-field-value, .view-profile .badge-set-display .badge-display .badge-details .badge-name, .ui-loading, .ui-loading-base, .wrapper-account-settings .ui-loading-indicator, .wrapper-account-settings .ui-loading-error, .view-profile .ui-loading-indicator, .login .deco-divider .copy, .register .deco-divider .copy, .passwordreset .deco-divider .copy, #forgot-password-modal #password-reset .deco-divider .copy, .verification-process .carousel .view .instruction, .verification-process .deco-divider .copy, .verification-process .content-main .instruction, .verification-process.step-requirements .list-reqs .req-activate .copy-super, .register.is-not-verified.step-confirmation .view .instruction, .confirm-enrollment .enrollment-details .course-dates, .shopping-cart .discount .code-text a, .shopping-cart table.course-receipt tr td:first-child, .view-profile .badges-overlay .badges-modal, .confirm-enrollment a.link-button, .confirm-enrollment button[type="submit"], .shopping-cart a.blue, .shopping-cart .user-data .data-input .three-col .col-1 .price span, .shopping-cart .user-data .data-input .three-col .col-2 .numbers-row .counter input[type="text"], .shopping-cart .discount .code-text span b, .shopping-cart .col-two .col-2 button[type="submit"], .empty-cart a.blue, body.error .description, .listing-tools, .listing-tools .listing-sort-select, .verification-process .help-item .copy, .verification-process .carousel .requirements .requirement .copy, .verification-process .carousel .wrapper-task .wrapper-help .help .copy, .verification-process .carousel #wrapper-review .review-task-photos .wrapper-photos .help-tips .copy, .verification-process.step-select-track .register-choice-certificate .action-intro, .verification-process.step-select-track .help-register .copy, .u-field-message, .modal-settings-language .actions-supplemental .list-actions-item, .wrapper-messages-primary .message .message-copy, .wrapper-messages-primary .message .message-copy .copy, .wrapper-messages-primary .message.message-status .message-copy, .wrapper-messages-primary .message.message-status .certificate-explanation, .status-verification .status-data-message, .find-courses .discovery-input, .view-survey .action-cancel, .view-survey button, .view-survey input, .view-survey select, .view-survey textarea, .view-survey .bit p, .login-register .form-field .tip, .financial-assistance-wrapper .financial-assistance-form .form-field .tip, .login-register .form-field .label-optional, .financial-assistance-wrapper .financial-assistance-form .form-field .label-optional, .verification-process .wrapper-msg .msg-content .copy, .verification-process .nav-wizard .help-inline, .verification-process.step-select-track .register-choice-certificate .title-expand, .verification-process.step-review .nav-wizard .prompt-verify .copy, .verification-process.step-review .nav-wizard .prompt-verify .action-verify label, .verification-process.step-review .nav-wizard .step-match label, .verification-process .pay-and-verify .photo-tip, .verification-process .incourse-reverify .photo-tip, .verification-process .reverify .photo-tip, #expiry-msg, .shopping-cart .col-two .row-inside .billing-detail-label, .shopping-cart .col-two .row-inside .billing-detail-value, .shopping-cart .bordered-bar h2 span .blue-link, .shopping-cart .bordered-bar .home>header .title>.heading-group p span .blue-link, .home>header .title>.heading-group .shopping-cart .bordered-bar p span .blue-link, .shopping-cart .bordered-bar section.outside-app h1 span .blue-link, section.outside-app .shopping-cart .bordered-bar h1 span .blue-link, .shopping-cart table.course-receipt tr td:last-child span, .empty-cart p, .enrollment-modal-wrapper.is-shown .enrollment-modal .enrollment-change-field p, .enrollment-modal-wrapper.is-shown .enrollment-modal .enrollment-change-field label, .enrollment-modal-wrapper.is-shown .enrollment-modal .enrollment-change-field select, .enrollment-modal-wrapper.is-shown .enrollment-modal .enrollment-change-field input, .enrollment-modal-wrapper.is-shown .enrollment-modal .enrollment-change-errors, #api-access-wrapper p, #api-access-wrapper .api-form-container .api-form p .helptext, .view-profile .wrapper-profile-section-container-two .u-field.mode-placeholder .u-field-value, .view-profile .badge-set-display .badge-display .badge-details, .view-profile .badge-set-display .badge-display .badge-details .badge-date-stamp, .wrapper-msg .msg-content .copy, .wrapper-msg .msg-content .copy p, .message, .wrapper-notification .copy, .wrapper-alert .copy, .prompt .copy, .notification .copy, .alert:not(.pattern-library-shim) .action-dismiss .button-copy, .wrapper-message .message, .wrapper-message .message.information, .main-wrapper .alert, .msg__copy, .status-verification .status-note, .status-verification .status-note p, .login .instructions .note, .register .instructions .note, .passwordreset .instructions .note, #forgot-password-modal #password-reset .instructions .note, .course-info .container .wrap-instructor-info .instructor-info-action, .course-info section.outside-app .wrap-instructor-info .instructor-info-action, .course-info .view-profile .profile-self .wrapper-profile-field-account-privacy .u-field-account_privacy .wrap-instructor-info .instructor-info-action, .view-profile .profile-self .wrapper-profile-field-account-privacy .course-info .u-field-account_privacy .wrap-instructor-info .instructor-info-action, .course-info .view-profile .wrapper-profile-sections .wrap-instructor-info .instructor-info-action, .view-profile .course-info .wrapper-profile-sections .wrap-instructor-info .instructor-info-action, .course-info .view-profile .badge-set-display .wrap-instructor-info .instructor-info-action, .view-profile .course-info .badge-set-display .wrap-instructor-info .instructor-info-action, .view-survey .list-input .field .tip, .login-register .note, .financial-assistance-wrapper .financial-assistance-form .note, .login-register .form-field .field-link, .financial-assistance-wrapper .financial-assistance-form .form-field .field-link, .verification-process.step-requirements .list-reqs .req .copy-sub, .shopping-cart .discount .code-input .error-text, .shopping-cart .error-text, .enrollment-results, .search-results .search-results-item .search-results-ellipsis, .msg__copy p {
    font-family: "Mitr" !important;
}

.sbs-adap-login-container .login-register .action-primary, 
.sbs-adap-login-container .financial-assistance-wrapper .financial-assistance-form .action-primary {
    background: #26D2C6;
    border-radius: 8px;
    box-shadow: none;
    width: 100%;
    height: 52px;
}

.sbs-adap-login-container .login-register .action-primary:hover, 
.sbs-adap-login-container .financial-assistance-wrapper .financial-assistance-form .action-primary:hover {
    background: var(--main-color);
}

.sbs-adap-login-container .login-register .form-type .form-wrapper  .toggle-form {
    margin-top: 26px;
    font-size: 16px;
    text-align: center;
}

.sbs-adap-login-container .login-register .form-type .form-wrapper  .toggle-form span {
    color: #98A2B3;
    font-size: 15px;
}

.sbs-adap-login-container .login-register .form-type .form-wrapper > h2,
.login-register-content h2 {
    color: var(--main-color);
    margin-bottom: 25px;
}

.sbs-adap-login-container .login-register .form-type .form-wrapper .login-form .form-field.email-email > span {
    color: #1570EF;
    font-family: "Mitr Light";
    font-size: 13px;
}

.sbs-adap-login-container .login-register-content,
.sbs-adap-login-container .login-register {
    background: transparent;
}

.sbs-adap-login-container .login-register .form-field {
    margin-top: 25px;
}

.sbs-adap-login-container .login-register .form-field .field-link {
    position: absolute;
    top: -5px;
    right: 0;
    font-size: 16px;
}

.sbs-adap-login-container .login-register .form-field .label-text {
    font-size: 14px;
    color: #515151;
}

.sbs-adap-login-container .login-register .form-field input {
    margin-top: 10px;
}

.sbs-adap-login-container .login-register .form-field textarea, 
.sbs-adap-login-container .login-register .form-field input[type="text"], 
.sbs-adap-login-container .login-register .form-field input[type="url"], 
.sbs-adap-login-container .login-register .form-field input[type="email"], 
.sbs-adap-login-container .login-register .form-field input[type="password"], 
.sbs-adap-login-container .login-register .form-field input[type="tel"],
.login-register .form-field select, 
.financial-assistance-wrapper .financial-assistance-form .form-field select {
    border-radius: 8px;
    border: 1px solid #D0D5DD;
    background: #FFF;
    font-size: 14px;
}

.sbs-adap-login-container .login-register .form-field input[type="text"], 
.sbs-adap-login-container .login-register .form-field input[type="url"], 
.sbs-adap-login-container .login-register .form-field input[type="email"], 
.sbs-adap-login-container .login-register .form-field input[type="password"], 
.sbs-adap-login-container .login-register .form-field input[type="tel"],
.login-register .form-field select, 
.financial-assistance-wrapper .financial-assistance-form .form-field select {
    height: 48px;
}

.sbs-adap-login-container .login-register .form-field textarea:focus, 
.sbs-adap-login-container .login-register .form-field input[type="text"]:focus, 
.sbs-adap-login-container .login-register .form-field input[type="url"]:focus, 
.sbs-adap-login-container .login-register .form-field input[type="email"]:focus, 
.sbs-adap-login-container .login-register .form-field input[type="password"]:focus, 
.sbs-adap-login-container .login-register .form-field input[type="tel"]:focus {
    border-color: #D1E9FF;
    box-shadow: 0 0 6px 0 #D1E9FF, inset 0 0 4px 0 rgba(0, 0, 0, 0.15);
}

.sbs-adap-login-container .login-register .form-field.checkbox-remember {
    display: none;
}

.sbs-adap-login-container .login-register .form-field label.focus-out, 
.login-register .form-field input.focus-out {
        padding-top: 16px;
}

.sbs-adap-login-container .login-register .form-field.select-gender {
    width: 50%;
}

.sbs-adap-login-container .login-register .form-field.select-year_of_birth {
    margin-left: 0;
    width: 50%;
}

.sbs-adap-login-container .login-register .form-field .plaintext-field {
    font-family: "Mitr" !important;
    font-size: 15px;
}

.sbs-adap-login-container .login-register .form-field span.error,
.sbs-adap-login-container .login-register .form-field span.label-required,
.sbs-adap-login-container .login-register .form-field span.icon.fa {
    font-size: 14px;
}

.btn-certificate,
.btn-certificate:hover,
.btn-certificate:active,
.btn-certificate:focus {
    width: 80%;
    min-height: 30px;
    border-radius: 15px;
    background: rgba(247, 145, 80, 0.12);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    color: #F79150;
}

.blockHeader .navbar-sbs-adap .navbar-brand > img:nth-child(2) {
    max-width: 60px;
}

.blockHeaderAdap a:not(.btn):hover, 
.blockHeaderAdap a:not(.btn):focus, 
.blockHeaderAdap a:visited:not(.btn):hover, 
.blockHeaderAdap a:visited:not(.btn):focus {
    text-decoration: none !important;
}


/* DISCUSSION PAGE */


.discussion  .navbar-nav .dropdown-menu {
    position: absolute !important;
    float: left !important;
}

.discussion .blockHeader .navbar-sbs-adap .container {
    flex-wrap: unset !important;
}

.discussion .window-wrap .blockHeader .container .navbar-nav {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
}

.discussion .blockHeader .navbar-sbs-adap .nav > li > a.dropdown-toggle::after,
.discussion .blockHeader .navbar-sbs-adap .dropdown-toggle::after {
    content: none !important;
}

.discussion .blockHeader .navbar-sbs-adap .nav > li > a {
    font-size: 16px !important;
}

.discussion .blockHeader .navbar-sbs-adap .nav .dropdown-menu > li > a {
    font-size: 14px !important;
}

.discussion .blockHeaderAdap a.btn-language {
    font-size: 16px !important;
}

.discussion .discussion-article .discussion-response .edit-post-body {
    width: 100%;
}

@media (max-width: 1199px) {
    .blockHome .recommend-container .highlighted-courses .courses-listing-first .course a img {
        width: 100%;
        height: auto;
    }

    .blockHome .recommend-container .highlighted-courses .courses .courses-listing .courses-listing-item .panel .panel-heading {
        height: 300px;
    }

    .blockHome .recommend-container .highlighted-courses .courses .courses-listing .courses-listing-item .panel .panel-heading img {
        object-fit: cover;
    }

    .blockHome .current-courses-container .highlighted-courses .courses-listing-item {
        width: calc(100% - 12px);
        margin-left: auto;
        margin-right: auto;
    }

    .view-profile .profile-self .wrapper-profile-field-account-privacy .u-field-account_privacy {
        min-width: unset;
    }
}

@media (max-width: 1199px) and (min-width: 992px) {
    .blockHeader .navbar-sbs-adap .nav>li a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }

    .blockHeader .navbar-sbs-adap .nav>li a span {
        top: 0;
    }

    .blockHeader .navbar-sbs-adap .navbar-brand > img {
        max-width: 120px;
    }
}

@media (max-width: 992px) {

    .blockHeader .navbar-sbs-adap .navbar-toggle {
        position: absolute;
        margin-top: 30px;
        left: 30px;
        display: block;
    }

    .blockHeader .navbar-sbs-adap .navbar-collapse.collapse {
        display: none !important;
        height: 0 !important;
        padding-bottom: 20px;
    }

    .blockHeader .navbar-sbs-adap .navbar-collapse.collapse.in {
        display: block !important;
        height: auto !important;
    }

    .blockHeader .navbar-sbs-adap {
        height: auto;
    }

    .blockHeader .navbar-sbs-adap .container {
        flex-direction: column;
    }

    .blockHeader .navbar-sbs-adap .navbar-right {
        margin-top: unset !important;
        flex-direction: column;
        margin-left: 0;
    }

    #contentData > section.blockBanner {
        background-size: cover;
        height: auto;
        text-align: center;
    }

    .blockBanner .textDetail {
        width: auto;
    }

    .blockHome .current-courses-container {
        background-size: cover;
    }

    .btn-certificate,
    .btn-certificate:hover,
    .btn-certificate:active,
    .btn-certificate:focus  {
        width: 100%;   
    }

    .blockHeader .navbar-sbs-adap .navbar-nav>li {
        font-size: 16px;
    }

    img.imgProfileMenu {
        width: 44px !important;
        height: 44px !important;
    }

    /* discussion PAGE */
    .discussion .window-wrap .blockHeader .container .navbar-nav {
        flex-direction: column !important;
    }

    .discussion .blockHeader .navbar-sbs-adap .navbar-collapse.collapse.show {
        display: flex !important;
    }
}

@media (max-width: 767px) {
    .blockHome .current-courses-container .highlighted-courses .courses .courses-listing .courses-listing-item .panel .panel-heading {
        height: auto;
        max-height: 350px;
    }

    .blockHeader .navbar-sbs-adap .nav>li a {
        background: none;
        justify-content: center;
        font-size: 18px;
    }

    .blockHeader .navbar-sbs-adap .navbar-nav .open .dropdown-menu {
        font-size: 16px;
        background-color: #fff;
        border: 1px solid rgba(0, 0, 0, .15);
        border-radius: 4px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
        margin-bottom: 20px;
    }

    .blockHeader .navbar-sbs-adap .navbar-nav .dropdown-menu>li>a {
        padding: 10px 25px;
    }
}

@media (max-width: 500px) {
    .blockFooterAdap span {
        font-size: 10px;
    }

    .blockHome .current-courses-container .current-course-title {
        line-height: 50px;
    }
}

@media (max-width: 400px) {
    .blockHeader .navbar-sbs-adap .navbar-brand > img {
        max-width: 90px;
    }

    .blockHeader .navbar-sbs-adap .navbar-toggle {
        margin-top: 24px;
    }

    .blockHeaderAdap .icon-search {
        margin-left: 0;
        margin-right: 5px;
    }

    /* discussion PAGE */
    .discussion .blockHeader .navbar-sbs-adap .navbar-toggle {
        margin-top: 10px !important;
    }
}