@font-face {
    font-family: "FranklinGothicDemiCond";
    src: url("/cms/layout/default/font/mux/FranklinGothic/Franklin Gothic Demi Cond.TTF") format("truetype");
}

@font-face {
    font-family: "FranklinGothicDemi";
    src: url("/cms/layout/default/font/mux/FranklinGothic/Franklin Gothic Demi.TTF") format("truetype");
}

@font-face {
    font-family: "FranklinGothicBook";
    src: url("/cms/layout/default/font/mux/FranklinGothic/Franklin Gothic Book.TTF") format("truetype");
}

@font-face {
    font-family: "FranklinGothicMediumCond";
    src: url("/cms/layout/default/font/mux/FranklinGothic/Franklin Gothic Medium Cond.TTF") format("truetype");
}

@font-face {
    font-family: "FranklinGothicHeavy";
    src: url("/cms/layout/default/font/mux/FranklinGothic/Franklin Gothic Heavy.TTF") format("truetype");
}

@font-face {
    font-family: "supermarket";
    src: url("/cms/layout/default/font/mux/Supermarket/supermarket.ttf") format("truetype");
}


@font-face {
    font-family: "ThaiSansNeue";
    src: url("/cms/layout/default/font/mux/ThaiSansNeue/ThaiSansNeue-Regular.otf") format("truetype");
}

@font-face {
    font-family: "ThaiSansNeueSemiBold";
    src: url("/cms/layout/default/font/mux/ThaiSansNeue/ThaiSansNeue-SemiBold.otf") format("truetype");
}

@font-face {
    font-family: "ThaiSansNeueBold";
    src: url("/cms/layout/default/font/mux/ThaiSansNeue/ThaiSansNeue-Bold.otf") format("truetype");
}

.sbsCustom {
    padding-top: 15px !important;
    margin-left: 25px !important;
    display: block !important;
}

.sbsCustom > li.active > a {
    background-color: #F0F0F0 !important;
    color: #515151 !important;
}

.sbsCustom > li > a {
    font-family: ThaiSansNeueBold !important;
    font-size: 24px !important;
    font-weight: bold !important;
    color: #8E8E8E !important;
    padding: 12px 25px !important;
    border-radius: 25px !important;
    background-color: #ffffff !important;
    margin-right: 5px !important;
}

.sbsCustom > li > a:focus, .sbsCustom > li > a:hover {
    background-color: #eee !important;
}

.sbsCustom li > .dropdown-menu {
    /*margin-top: 5px !important;*/
    border-radius: 10px !important;
    min-width: 300px !important;
    border: 2px solid #F2F2F2 !important;
    -webkit-box-shadow: unset !important;
    box-shadow: unset !important;
    position: absolute;
}

.sbsCustom li > .dropdown-menu > li > a {
    font-family: ThaiSansNeueSemiBold !important;
    font-size: 20px !important;
    padding: 10px 20px !important;
    color: #686F7A !important;
}

.sbsCustom .dropdown-menu > .active > a, 
.sbsCustom .dropdown-menu > .active > a:focus, 
.sbsCustom .dropdown-menu > .active > a:hover {
    color: #EC5252 !important;
    background-color: #F2F2F2 !important;
}

.bg_row0 {
    background-image: url("/cms/layout/default/images/mux/BG-Landing Page.jpg") !important;
    min-height: 620px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: #f1f3ff !important;

}

.blockTextBannerCms {
    margin-top: 135px;
    text-align: center;
}

.blockTextBannerCms > div:first-child{
    font-family: FranklinGothicHeavy;
    font-size: 54px;
    color: #17468C;
    font-weight: bold;
    letter-spacing: 3px;
}

.blockTextBannerCms > div:last-child{
    font-family: FranklinGothicDemi;
    font-size: 54px;
    color: #17468C;
    letter-spacing: 2px;
    white-space: nowrap;
}

.blockImgBannerCms {
    margin-top: 20px;
    text-align: center;

}

.blockImgBannerCms img {
    width: 125px;
    max-width: 100%;
    margin: 0px 15px;
}

.footerLanguage {
    text-align: right;
    padding-top: 40px;
}

.footerLanguage .select2-selection.select2-selection--single {
    font-family: ThaiSansNeueBold !important;
    font-size: 20px;
    font-weight: bold;
    border: 1px solid #ffffff;
    padding: 5px;
    border-radius: 0px;
    color: #ffffff;
    background-color: #17468C;
    height: 45px;
    text-align: left;
}

.footerLanguage .select2-container {
    max-width: 100%;
}

.footerLanguage .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 8px;
}

.footerLanguage .select2-container--default .select2-selection--single .select2-selection__rendered,
.footerLanguage .select2-container--default .select2-results__option[aria-selected=true] {
    color: #ffffff !important;
    margin-top: 2px;
}

.imgLanguage {
    width: 36px;
    margin-right: 10px;
}

.select2-results__option {
    font-family: ThaiSansNeueBold !important;
    font-size: 18px;
    font-weight: bold;

}

.footerLanguage .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #ffffff transparent transparent transparent;
}



html, body {
    font-family: Tahoma,"MS Sans Serif",Thonburi !important
        font-size: 15px;
    height: 100%;
}

.page-wrap {
    min-height: 100%;
    /* equal to footer height */
    margin-bottom: -120px;
}

.bgPageIndex {
    background-color: #f1f3ff !important;
}

.page-wrap:after {
    content: "";
    display: block;
}

.site-footer, .page-wrap:after {
    /* .push must be the same height as footer */
    min-height: 120px;
}

a:hover {
    text-decoration: none;
}

.btn {
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

.table{
    font-size: 15px !important;
}

.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
    border-top: 1px solid #ededed;
}

.row.no-gutter {
    margin-left: 0;
    margin-right: 0;
}

.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
    padding-right: 7px;
    padding-left: 7px;
}

.pd10 {
    padding: 0px 10px;
}

/*Hover Menu*/
.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
    margin-top: 0;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}

.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

/*End Hover Menu*/

/*Navbar*/
#logo img {
    float: left;
    height: 64px;
}

#logo:hover {
    color: #6EAFAC;
}

#logo {
    padding: 5px;
}

#logo div {
    font-size: 23px;
    padding-left: 46px;
    padding-top: 17px;
}

.navbar {
    background-color: #FFF;
    border-radius: 0px !important;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 0px;
    border-bottom: 2px solid #553982;
    min-height: 85px;
    padding-left: 15px;
    padding-right: 15px;
    border: unset !important;
}

.borderBottomNavbar {
    border-bottom: 2px solid #24305E !important;
    border-radius: 0px;
}

.navbar-toggle .icon-bar {
    background-color: #553982 !important;
}

.navbar a {
    color: #553982;
}

.navbar a:hover {
    color: #553982;
}

.sub-nav a {
    font-size: 15px;
}

.nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
    color: #222;
}

.nav > li > a:focus, .nav > li > a:hover {
    color: #FFF;
    background-color: #999;
}

@media (max-width: 767px) {
    .navbar-nav .open .dropdown-menu .dropdown-header, .navbar-nav .open .dropdown-menu > li > a {
        padding: 5px 15px 5px 25px;
        color: #333;
    }

    #logo div {
        font-size: 16px;
    }
}

/*End Navbar*/

/*bg_row0*/
.bg_row0 {
    background-color: #663399;
}

.img_bg_row0 {
    text-align: center;
    padding: 30px;
}

.img_bg_row_detail {
    color: #FFF;
    font-size: 25px;
    padding-top: 10%;
}

.img_bg_row_detail h1 {
    /*font-family: "THSarabunNewBold" !important;*/
    font-size: 30px;
    letter-spacing: 5px;
    /*margin-bottom:0px;*/
}

.img_bg_row_detail input {
    color: #818182;
    font-size: 25px;
    padding-left: 10px;
    margin-right: -40px;
    width: 100%;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    margin-top: 10px;
}

.img_bg_row_detail button {
    margin: 0 !important;
    background: transparent;
    color: #6F3F9E;
    border: 0px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    padding-top: 2px;
    font-size: 15px;
}

/*End bg_row0*/

/*Title Main*/
.title_main {
    text-align: center;
    color: #222;
    border-bottom: 2px solid #663399;
    margin-bottom: 20px;
    /*font-family: "THSarabunNewBold";*/
}

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

.title_main_left {
    text-align: left;
    color: #222;
    border-bottom: 2px solid #663399;
    margin-bottom: 20px;
    /*font-family: "THSarabunNewBold";*/
}

.title{
    cursor: pointer;
}

/*End Title Main*/

/*box item*/
.box-item {
    background-color: #FFF;
    border: 1px solid #ecf0f1;

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    margin-bottom: 15px;

    -o-transition: .3s;
    -ms-transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    /* ...and now for the proper property */
    transition: .3s;
}

.box-item:hover {
    border-bottom: 1px solid #F36A0D;
}

.box-item img {
    /*border-bottom: 1px solid #ccc;*/
}

.box-item .box-item-title {
    /*font-size: 21px;*/
    padding: 10px;
    word-wrap: break-word;
    text-align: center;
    /*line-height: 1;*/
    /*font-family: "THSarabunNewBold";*/
    color: #663399;
}

.box-item .box-item-des {
    padding-left: 10px;
    padding-right: 10px;
    /*font-size: 16px;*/
    text-align: center;
    padding-bottom: 10px;
}

.box-item-certificate {
    position: absolute;
    right: 7px;
    width: 150px;
}

/*end box item*/

/*row1*/
#myCarousel {
    padding-top: 20px;
}

#myCarousel .carousel-control div {
    padding-top: 50%;
}

#myCarousel .carousel-control div i {
    color: #553982;
    font-size: 40px;
}

.carousel-control.left, .carousel-control.right {
    background: transparent;
}

.row1_search {
    padding: 25px 0;
    background-color: #E5EED3;
}

.row1_search input {
    font-size: 15px;
}

.row1_search button {
    font-size: 15px;
    padding: 5px 10px 0;
}

.row1_title {
    font-size: 21px;
    color: #1F3A93;
    letter-spacing: 2px;
    /*font-family: 'THSarabunNewBold';*/
}

.bg_row1 {
    padding-bottom: 40px;
}

/*End row1*/

/*row2*/
#pin_1 {
    padding-top: 20px;
}

#pin_2 {
    margin-top: 80px;
}

#pin_3 {
    margin-top: 25px;
}

#pin_4 {
    margin-top: 2em;
}

.pin1_title {
    color: #F36A0D;
}

.pin2_title {
    position: absolute;
    top: 53px;
    width: 200px;
    color: #22A7AA;
    left: 15%;
}

.pin3_title {
    color: #FFA90D;
}

.pin4_title {
    color: #9A5C77;
}

#findex_search {
    padding-top: 20px;
}

#findex_search input {
    font-size: 22px;
}

#findex_search button {
    font-size: 15px;
    padding: 3px 15px;
}

/*End row2*/

/*row facebook*/
.row_facebook {
    background-color: #eaebeb;
}

/*End row facebook*/

/*footer logo*/
.footer_logo {
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
}

.footer_logo img {
    width: 7%;
    padding-left: 2%;
}

@media (max-width: 767px) {
    .footer_logo img {
        width: 9%;
        padding-left: 2%;
    }
}

/*End footer logo*/

/*footer*/
.footer {
    font-family: ThaiSansNeue !important;
    padding: 10px 0;
    font-size: 18px;
    background-color: #17468C !important;
    color: #fff;
}

.icon-social-footer {
    padding-top: 15px;
    text-align: right;
}

.icon-social-footer a {
    padding: 10px;
    margin-right: 5px;
    color: #FFF;
    font-size: 15px;
    border-radius: 5px;
}

.icon-social-footer a:hover {
    background-color: #FFF;
    color: #553982;
    text-decoration: none;
}

.icon-clg {
    text-align: right;
}

.icon-clg a {
    color: #FFF;
}

/*end footer*/

/*Set Table Icon*/
.table-icon .btn-table-icon {
    padding: 3px 8px;
    font-size: 14px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

.table-icon .btn-table-icon i {
    padding-right: 2px;
}

/*End Set Table Icon*/

/*Set Form*/
.set-form label {
    color: #009688;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 0;
}

.set-form input, .set-form textarea, .set-form select {
    font-size: 15px;
    border: none;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;

    border-bottom: 1px solid #009688;
    margin-bottom: 10px;
    background: transparent;

    /*width: 70%;*/
}

.set-form textarea:focus, .set-form input:focus {
    outline: none;
    border-bottom: 2px solid #009688;
    background-color: #FFF;
}

.set-form .bfooter {
    text-align: center;
}

.set-form .bfooter button {
    padding: 5px 11px 3px;
    font-size: 15px;

    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

.set-form .bfooter i {
    padding-right: 7px;
}

/*End Set form*/

/*Courses View*/
.courses_search input {
    font-size: 15px;
}

.courses_search button {
    font-size: 15px;
    padding: 4px 10px 0;
}

.csearch button {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    border: 0px;
    background: transparent;
    color: #009688;
}

.csearch button:hover {
    color: #3c763d;
}

.ctitle {
    color: #009688;
    text-align: left;
    font-size: 22px;
}

.ctitle:after {
    border-bottom: 2px solid #009688;
}

.ctitle i {
    font-size: 15px;
}

.cbody {
    padding-left: 10px;
    margin-bottom: 15px;
}

.cfooter {
    text-align: center;
}

.cfooter button {
    font-size: 15px;
    padding: 3px 4px 0px;
}

.cfooter button i {
    font-size: 16px;
    padding-right: 5px;
}

/*End Courses View*/

/*Courses Detail*/
.bg_courses_detail {
    background-color: #ECF0F1;
}

.bg_box_detail {
    background-color: #FFF;
}

.title_courses_detail h3 {
    color: #8E64B9;
    /*text-shadow: 1px 1px 1px #8E64B9;*/
    /*font-family: "THSarabunNewBold";*/
    margin-top: 7px;
}

.title_courses_detail h3 i {
    font-size: 15px;
    padding-right: 5px;
}

.img_user {
    margin-right: 5px;
    margin-bottom: 5px;
    float: left;
    width: 48px;
    height: 48px;
}

.icon_comment {
    color: #93969b;
    text-align: center;
}

.section_comment textarea {
    font-size: 15px;
}

/*End Courses Detail*/

/*Profile*/
.profile_box_img {
    width: auto;
    padding: 10px;
    text-align: center;
}

.profile_title {
    /*font-family: "THSarabunNewBold";*/
    padding: 0;
    margin: 0;
    color: #71C4BE;
}

.profile_box_img img {
    height: 200px;
}

/*End Profile*/

/*Pagination*/

.set_pagina {
    text-align: right;
}

.set_pagina button {
    font-size: 16px;
    margin: 0 2px;
    padding: 6px 9px;
}

.set_pagina input {
    font-size: 16px;
    padding: 2px 8px;
    width: 80px;
}

/*End Pagination*/

.animeicon {
    animation: 3s ease 0s normal none infinite running swing;
    position: relative;
    transform-origin: center top 0;
}

@keyframes swing {
    0% {
        transform: rotate(5deg);
    }
    50% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(5deg);
    }
}


.red {
    color: #FF0000;
    font-weight: bold;
    font-size: 0.9em;
}

/*Courses Outline*/
#main_zone{
    /*position: relative;*/
}

#icon_menu{
    background-color: #553982;
    border-bottom-right-radius: 1em;
    border-top-right-radius: 1em;
    box-shadow: 2px 2px 1px #ccc;
    color: #fff;
    cursor: pointer;
    display: table;
    padding: 6px 9px 0 5px;
    position: absolute;
    z-index: 99999;
}


#icon_menu:hover i{
    -webkit-animation: toRightFromLeft 0.5s;
    -moz-animation: toRightFromLeft 0.5s;
    animation: toRightFromLeft 0.5s;
}

#icon_menu.mobile{
    background-color: #553982;
    border-bottom-right-radius: 1em;
    border-top-right-radius: 1em;
    box-shadow: none !important;
    color: #fff;
    cursor: pointer;
    display: table;
    padding: 6px 9px 0 5px;
    position: absolute;
    left: 0%;
    z-index: 999999 !important;
}

#icon_menu.mobile:hover i{
    -webkit-animation: toLeftFromRight 0.5s;
    -moz-animation: toLeftFromRight 0.5s;
    animation: toLeftFromRight 0.5s;
}

@-webkit-keyframes toRightFromLeft {
    49% {
        -webkit-transform: translate(100%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translate(-100%);
    }
    51% {
        opacity: 1;
    }
}
@-moz-keyframes toRightFromLeft {
    49% {
        -moz-transform: translate(100%);
    }
    50% {
        opacity: 0;
        -moz-transform: translate(-100%);
    }
    51% {
        opacity: 1;
    }
}
@keyframes toRightFromLeft {
    49% {
        transform: translate(100%);
    }
    50% {
        opacity: 0;
        transform: translate(-100%);
    }
    51% {
        opacity: 1;
    }
}

@-webkit-keyframes toLeftFromRight {
    49% {
        -webkit-transform: translate(-100%);
    }
    50% {
        opacity: 0;
        -webkit-transform: translate(100%);
    }
    51% {
        opacity: 1;
    }
}
@-moz-keyframes toLeftFromRight {
    49% {
        -moz-transform: translate(-100%);
    }
    50% {
        opacity: 0;
        -moz-transform: translate(100%);
    }
    51% {
        opacity: 1;
    }
}
@keyframes toLeftFromRight {
    49% {
        transform: translate(-100%);
    }
    50% {
        opacity: 0;
        transform: translate(100%);
    }
    51% {
        opacity: 1;
    }
}


.box_left, .box_right, .box_form{
    border: 1px solid #ccc;
    min-height: 600px;
}

.box_form, .box_content{
    display: none;
}

.box_list{
    border: 2px dashed #ccc;
    margin-bottom: 10px;
    min-height: 90px;
    position: relative;
}

.box_list:hover .box_list_icon, .box_list:hover .box_list_expand{
    visibility: visible;
    opacity: 1;
}

#box_right.on-touch .box_list_icon, #box_right.on-touch .box_list_expand {
    opacity: 1;
    visibility: visible;
}

.box_list_expand{
    background-color: #ecf2fe;
    border-bottom-right-radius: 6px;
    color: #aaaaaa;
    cursor: pointer;
    font-size: 16px;
    left: -2px;
    padding: 7px 10px 0;
    position: absolute;
    top: -2px;
    z-index: 1;
    opacity: 0;
    transition: visibility 0s ease 0s, opacity 0.5s linear 0s;
    visibility: hidden;
}

.box_list_icon{
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    background-color: #c0c6f2;
    color: #fff;
    font-size: 16px;
    height: 100%;
    padding: 6px;
    position: absolute;
    box-shadow: -2px 0 3px 1px rgba(140, 133, 152, 0.26);
    right: -2px;
    z-index: 1;
    opacity: 0;
    transition: visibility 0s ease 0s, opacity 0.5s linear 0s;
    visibility: hidden;
}

.box_list_icon .unit_icon{
    cursor: pointer;
    margin-bottom: 4px;
}

.box_list_icon .unit_icon:hover{
    color: #5e5e5e;
}

.box_right{
    position: relative;
}

.int_object{
    position: absolute;
    bottom: 0;
    /*background-color: #E8D7C5;*/
    width: 100%;
    /*padding: 10px;*/
}

.box_object{
    background-color: #c0c6f2;
    border: 1px solid #FFF;
    border-radius: 4px;
    color: #212121;
    cursor: pointer;
    float: left;
    margin-right: 10px;
    text-align: center;
    transform: translateZ(0px);
    width: 125px;
    transition: border 1s;
}

.box_object img{
    width: 40px;
}

.box_object:hover{
    border: 2px solid #d0d0b6;
}

.box_object:hover img{
    animation-direction: alternate;
    animation-duration: 0.3s;
    animation-iteration-count: infinite;
    animation-name: hvr-pulse-grow;
    animation-timing-function: linear;
}

@keyframes hvr-pulse-grow {
    100% {
        transform: scale(1.1);
    }
}

.img_object{
    padding-top: 5px;
}

/*set bxslide*/
.bx-wrapper{
    background-color: #ECF2FE;
    border: 1px solid #ccc;
    bottom: 0;
    padding: 10px;
    position: sticky;
    position: -webkit-sticky;
    margin: 20px 0 auto !important;
    width: 100% !important;
    border-right: 0;
    z-index: 11;
}

.bx-viewport{

}

.set_right_bottom{
    padding-bottom: 120px;
}

.left_zone{
    /*border-right: 3px solid #F2F0EC;*/
    background-color: #FEFDF9;
    width: 93%;
}

.left_zone{
    float: left;
    min-height: 655px;
    border-right: 3px solid #f2f0ec;
}

#left_show{
    background-color: #f2f0ec;
    color: #999;
    cursor: pointer;
    float: left;
    font-size: 10px;
    text-align: center;
    width: 15px;
    z-index: 2;
}

#che1, #che2{
    padding: 5px 0;
}

#che1{
    border-bottom: 2px solid #cecece;
}

.section, .sub_section, .unit{
    list-style: none;
    margin: 0;
    padding: 0;
    min-height: 5px;
}

.section li{
    background-color: #FEFDF9;
    color: #524e47;
    font-size: 15px;
    font-weight: bold;
    padding: 5px 0;
    border-bottom: 1px solid #eae9e7;
    transition: background-color 0.5s ease;
    padding-bottom: 0px !important;
}

.section li:hover{
    background-color: #FFF;
}

.icon-up-down{
    float: left;
    width: 10%;
    max-width: 30px;
    color: #222;
    text-align: center;
}

.section_title{
    float: left;
    width: 60%;
    max-width: 64%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    /*font-weight: bold;*/
    padding-top: 5px;
}

.section_title .section_edit{
    width: 85%;
    max-width: 250px;
    padding-left: 10px !important;
    margin-bottom: 5px;
    font-size: 15px;
    background: transparent;
    border: 0px;
    border-bottom: 1px dotted #ccc;
    padding-top: 5px;

    background: #fff;
    border-bottom: 1px solid #46b8da;
    border-radius: 5px;
}

.section_icon{
    color: #888 !important;
    cursor: pointer;
    font-size: 16px;
    max-width: 140px;
    position: absolute;
    right: 5px;
    top: 10px;
    opacity: 0;
    transition: visibility 0s ease 0s, opacity 0.5s linear 0s;
    visibility: hidden;
}

.lv1_add{
    background-color: #fff !important;
    border-top: 1px solid #ccc;
    color: #2e988d !important;
    cursor: pointer;
    /*font-weight: bold;*/
    padding: 10px;
}

.lv1_add:hover, .section_icon i:hover{
    color: #222 !important;
}

.lv1_add i{
    font-size: 9px !important;
    padding-right: 7px !important;
}

.set-relative{
    position: relative !important;
}

.set-relative:hover .section_icon{
    visibility: visible;
    opacity: 1;
}

.sub_section{
    /*border-top: 1px solid #d5d2ce;*/
}

.sub_section li{
    font-size: 15px;
    border-left: 5px solid #ecf2fe;
    background-color: #F8F7F1;
    padding-bottom: 0px !important;
}

.lv2_add{
    background-color: #fff !important;
    border-left: 3px solid #000;
    color: #2e988d !important;
    cursor: pointer;
    font-size: 15px !important;
    /*font-weight: bold;*/
    padding-bottom: 10px;
    padding-left: 30px !important;
    padding-top: 10px;
}

.lv2_add:hover, .section_icon i:hover{
    color: #222 !important;
}

.lv2_add i{
    font-size: 9px !important;
    padding-right: 7px !important;
}

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

.unit li{
    font-size: 15px;
    border-left: 0px;
    background-color: #FFF;
    border-bottom: 1px solid #f4faff;
}

.lv3_add{
    background-color: #fff !important;
    color: #2e988d !important;
    cursor: pointer;
    padding-bottom: 8px;
    padding-left: 60px !important;
    padding-top: 9px;
    /*font-weight: bold;*/
}

.lv3_add:hover, .section_icon i:hover{
    color: #222 !important;
}

.lv3_add i{
    font-size: 9px !important;
    padding-right: 7px !important;
}

.lv2 .set-relative{
    padding-left: 10px;
}

.lv3 .set-relative{
    padding-left: 35px;
}

.icon-up-down{
    cursor: pointer;
}

.box_slidebar{
    position: relative;
}

.msg_loading{
    display: none;
    background-color: #fff;
    border-color: #ccc;
    border-radius: 0 5px 0 0;
    border-style: solid solid none;
    border-width: 1px 1px 0;
    bottom: 0;
    padding: 15px;
    position: fixed;
    width: 247px;
    z-index: 99999;
}

.msg_loading img{
    width: 40px;
}

.loading-msg{
    font-weight: bold;
    padding-left: 10px;
}


/*#box_left, #box_right{
    opacity: 0.5;
}*/

#menu_mobile{
    background-color: #553982;
    color: #fff;
    cursor: pointer;
    display: table;
    font-size: 16px;
    padding: 7px 6px 3px 9px;
    position: absolute;
    right: 0;
    z-index: 10;
}

.box_content_right{
    /*box-shadow: 0 1px 1px 2px #ccc;*/
    margin-right: 10px;
    margin-top: 10px;
    min-height: 350px;
}

/*loading..*/
#fountainTextG{
    /*width:186px;*/
    /*margin:auto;*/
    left: 75px;
    position: absolute;
    top: 26px;
}

.fountainTextG{
    color:rgba(0,0,0,0.55);
    font-family:Arial;
    font-size:19px;
    text-decoration:none;
    font-weight:normal;
    font-style:normal;
    float:left;
    animation-name:bounce_fountainTextG;
    -o-animation-name:bounce_fountainTextG;
    -ms-animation-name:bounce_fountainTextG;
    -webkit-animation-name:bounce_fountainTextG;
    -moz-animation-name:bounce_fountainTextG;
    animation-duration:2.09s;
    -o-animation-duration:2.09s;
    -ms-animation-duration:2.09s;
    -webkit-animation-duration:2.09s;
    -moz-animation-duration:2.09s;
    animation-iteration-count:infinite;
    -o-animation-iteration-count:infinite;
    -ms-animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-iteration-count:infinite;
    animation-direction:normal;
    -o-animation-direction:normal;
    -ms-animation-direction:normal;
    -webkit-animation-direction:normal;
    -moz-animation-direction:normal;
    transform:scale(.5);
    -o-transform:scale(.5);
    -ms-transform:scale(.5);
    -webkit-transform:scale(.5);
    -moz-transform:scale(.5);
}#fountainTextG_1{
    animation-delay:0.75s;
    -o-animation-delay:0.75s;
    -ms-animation-delay:0.75s;
    -webkit-animation-delay:0.75s;
    -moz-animation-delay:0.75s;
}
#fountainTextG_2{
    animation-delay:0.9s;
    -o-animation-delay:0.9s;
    -ms-animation-delay:0.9s;
    -webkit-animation-delay:0.9s;
    -moz-animation-delay:0.9s;
}
#fountainTextG_3{
    animation-delay:1.05s;
    -o-animation-delay:1.05s;
    -ms-animation-delay:1.05s;
    -webkit-animation-delay:1.05s;
    -moz-animation-delay:1.05s;
}
#fountainTextG_4{
    animation-delay:1.2s;
    -o-animation-delay:1.2s;
    -ms-animation-delay:1.2s;
    -webkit-animation-delay:1.2s;
    -moz-animation-delay:1.2s;
}
#fountainTextG_5{
    animation-delay:1.35s;
    -o-animation-delay:1.35s;
    -ms-animation-delay:1.35s;
    -webkit-animation-delay:1.35s;
    -moz-animation-delay:1.35s;
}
#fountainTextG_6{
    animation-delay:1.5s;
    -o-animation-delay:1.5s;
    -ms-animation-delay:1.5s;
    -webkit-animation-delay:1.5s;
    -moz-animation-delay:1.5s;
}
#fountainTextG_7{
    animation-delay:1.64s;
    -o-animation-delay:1.64s;
    -ms-animation-delay:1.64s;
    -webkit-animation-delay:1.64s;
    -moz-animation-delay:1.64s;
}
#fountainTextG_8{
    animation-delay:1.79s;
    -o-animation-delay:1.79s;
    -ms-animation-delay:1.79s;
    -webkit-animation-delay:1.79s;
    -moz-animation-delay:1.79s;
}
#fountainTextG_9{
    animation-delay:1.94s;
    -o-animation-delay:1.94s;
    -ms-animation-delay:1.94s;
    -webkit-animation-delay:1.94s;
    -moz-animation-delay:1.94s;
}
#fountainTextG_10{
    animation-delay:2.09s;
    -o-animation-delay:2.09s;
    -ms-animation-delay:2.09s;
    -webkit-animation-delay:2.09s;
    -moz-animation-delay:2.09s;
}




@keyframes bounce_fountainTextG{
    0%{
        transform:scale(1);
        color:rgb(0,0,0);
    }

    100%{
        transform:scale(.5);
        color:rgb(255,255,255);
    }
}

@-o-keyframes bounce_fountainTextG{
    0%{
        -o-transform:scale(1);
        color:rgb(0,0,0);
    }

    100%{
        -o-transform:scale(.5);
        color:rgb(255,255,255);
    }
}

@-ms-keyframes bounce_fountainTextG{
    0%{
        -ms-transform:scale(1);
        color:rgb(0,0,0);
    }

    100%{
        -ms-transform:scale(.5);
        color:rgb(255,255,255);
    }
}

@-webkit-keyframes bounce_fountainTextG{
    0%{
        -webkit-transform:scale(1);
        color:rgb(0,0,0);
    }

    100%{
        -webkit-transform:scale(.5);
        color:rgb(255,255,255);
    }
}

@-moz-keyframes bounce_fountainTextG{
    0%{
        -moz-transform:scale(1);
        color:rgb(0,0,0);
    }

    100%{
        -moz-transform:scale(.5);
        color:rgb(255,255,255);
    }
}

#main-panal {
    position: relative !important;
    padding-top: 10px;
}

#partial-panal {
    /*display: none;*/
}

.stock_img {
    width: 100px;
    height: 100px;
    margin: 5px;
}

.minus-control {
    text-align: right;
}

.card-minus {
    cursor: pointer;
}

.showMenu{
    display: block !important;
    position: absolute;
    z-index: 10;
    max-height: 80%;

    animation-name: slideRight;
    -webkit-animation-name: slideRight;

    animation-duration: 1s;
    -webkit-animation-duration: 1s;

    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;

    visibility: visible !important;
}

.ui-resizable,
.ui-sortable,
.ui-draggable,
.ui-droppable {
    -ms-touch-action: none;
    touch-action: none;
}

#box_left.on-touch .section_icon{
    opacity: 1;
    visibility: visible;
}


/*  serch OER*/
.block{
    margin-top: 10px;
    margin-bottom: 10px;
}

@media only screen and (min-width: 1105px) {
    .block-right{
        margin-left: -7px;
    }
}

@media only screen and (min-width: 768px) {
    .img-result{
        width: 100% !important;
        /*height: 150px !important;*/
    }
}

.img-result{
    cursor: pointer;
    border: 1px solid #dadada;
}



/*/*##* filter /*/
#filter_block{
    font-size: 16px;
}
.filter_list{
    list-style: none;
}
.btn-fileter{
    border-radius: 4px;
    margin: 2px;
    border: medium none;
    padding-top: 0px;
    padding-bottom: 0px;
    font-size: 16px;
}

.btn_show_filter{
    /*width: 100%;*/
}

.btn-submit-fileter{
    font-size: 15px;
}

.btn-fileter.active{
    background-color: #553982;
    color: #fff;
}


ul.btn_fileter_li{
    margin-left: 0px;
}


/*content_list*/
.content_list{
    margin-bottom: 14px;
}

.zoom{
    position: absolute;
    top: 7px;
    right: 15px;
    font-size: 12px;
    color: rgb(255, 255, 255);
    cursor: pointer;
    background-color: #fff;
    border-radius: 2px;
    padding: 2px;
}
/*content_list*/

.pic {
    border: 1px solid #CCC;  
    overflow: hidden;
}

.morph {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
    cursor: pointer;
}

.morph:hover {
    border-radius: 5%;
    border: 2px solid #553982;
    /*        -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);*/
}

/*  serch OER*/


/* Left Zone*/
#left_zone ol{
    padding: 0px;
    margin: 0px;
}

.angular-ui-tree-handle {
    /*        background: #f8faff;
            border: 1px solid #dae2ea;
            color: #7c9eb2;
            padding: 10px 10px;*/
}

.angular-ui-tree-handle:hover {
    /*        color: #438eb9;
            background: #f4f6f7;
            border-color: #dce2e8;*/
}

.angular-ui-tree-placeholder {
    background-color: #2E9D91 !important;
    border: 2px dashed #bed2db;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 50px !important;
}

.angular-ui-tree-empty {
    height: 0px !important;
    border: 0px !important;
    min-height: 0px !important;
}

/*    .group-title {
        background-color: #687074 !important;
        color: #FFF !important;
    }*/


/* --- Tree --- */
.tree-node {
    border: 1px solid #dae2ea;
    background: #f8faff;
    color: #7c9eb2;
}

.nodrop {
    background-color: #f2dede;
}

.tree-node-content {
    margin: 10px;
}
.tree-handle {
    /*        padding: 10px;
            background: #428bca;
            color: #FFF;
            margin-right: 10px;*/
}

.angular-ui-tree-handle:hover {
}

.angular-ui-tree-placeholder {
    background: #f0f9ff;
    border: 2px dashed #bed2db;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.lv1 .set-relative{
    background-color: #FEFDF9;
}

.set-relative{

    padding: 8px 2px;
    position: relative !important;
}

.b_bt{
    /*    border-bottom: 1px solid #ccc;
        border-top: 1px solid #ccc;*/
}

.ol_lv2{
    /*border-left: 3px solid #c7c3be;*/
    /*margin-left: 8px;*/
    padding-left: 0 !important;
}

.ol_lv2 .set-relative{
    padding-left: 10px;
}

.ol_lv3{
    padding: 0px !important;
    /*border-left: 1px solid #ccc;*/
    /*margin-left: 15px;*/
}

.unit  .set-relative{
    padding-left: 60px;
}

#left_loading{
    margin-top: 50%;
    opacity: 0.21;
    text-align: center;
}

#left_loading img{
    width: 47px
}

.app_loading{
    background-color: #fff;
    border-radius: 5px;
    margin: 10% 29%;
    opacity: 0.47;
    position: absolute;
    width: 300px;
    z-index: 2;

}

.app_loading img{
    width: 47px
}
/* End Left Zone*/

/* Config view */
.box_config_section{
    padding: 10px;
}

.config_title{
    border-bottom: 1px solid #9933ff;
    border-left: 5px solid #9933ff;
    font-size: 25px;
    font-weight: bold;
    padding-left: 13px;
    position: relative;
}

/*.close_app{
    cursor: pointer;
    float: right;
    font-size: 14px;
    margin-right: 3px;
    margin-top: 7px;
    transition: .3s;
}*/

.close_app{
    padding: 7px 10px 2px;
    position: absolute;
    right: 0;
    top: 0;
    transition: all 0.3s ease 0s;
    cursor: pointer;
    font-size: 14px;
    border-radius: 3px;
}

.close_app:hover{
    cursor: pointer;
    background-color: #009FE6;
    color: #FFF;
}



.config_content{
    margin-top: 15px;
}

.config_form{
    font-size: 24px;
}

.config_form input[type=text], .config_form textarea, .config_form button{
    font-size: 15px;
}

.config_form input[type=checkbox]{
    margin-top: 10px;
}
/*End Config View*/

.box_right_js{
    box-shadow: 0px 1px 1px 1px #ccc;
    margin-right: 10px !important;
}

.font_button{
    font-size: 15px;
}


.pagina_js{
    text-align: right;
}

.pagina_js button{
    padding-bottom: 3px;
    transition: all 0.3s ease 0s;
}

.pagina_js button:hover{
    /*background-color: #553982;*/
    color: #FFF;
}

.pagina_js input[type="number"]{
    border: 1px solid #ccc !important;
    padding-bottom: 0;
    width: 80px;
}

.hide_height{
    height: 90px !important;
    overflow: hidden;
}

.icon_move{
    cursor: move !important;
}

.bs-wizard {background-color: #555;}
/*Form Wizard*/
.bs-wizard {border-bottom: solid 2px #553982 !important; padding: 0;}
.bs-wizard > .bs-wizard-step {padding: 0; position: relative;}
.bs-wizard > .bs-wizard-step + .bs-wizard-step {}
.bs-wizard > .bs-wizard-step .bs-wizard-stepnum {color: #f8f8f8; font-size: 16px; margin-bottom: 5px;}
.bs-wizard > .bs-wizard-step .bs-wizard-info {color: #FFF; font-size: 15px; padding-bottom: 8px;}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot {position: absolute; width: 30px; height: 30px; display: block; background: #fbe8aa; top: 23px; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%;} 
.bs-wizard > .bs-wizard-step > .bs-wizard-dot:after {content: ' '; width: 14px; height: 14px; background: #fbbd19; border-radius: 50px; position: absolute; top: 8px; left: 8px; } 
.bs-wizard > .bs-wizard-step > .progress {position: relative; border-radius: 0px; height: 8px; box-shadow: none; margin: 20px 0; margin-bottom: 10px;}
.bs-wizard > .bs-wizard-step > .progress > .progress-bar {width:0px; box-shadow: none; background: #5da48e;}
.bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {width:100%;}
.bs-wizard > .bs-wizard-step.active > .progress > .progress-bar {width:50%;}
.bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar {width:0%;}
.bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar {width: 100%;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot {background-color: #f5f5f5;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot:after {opacity: 0;}
.bs-wizard > .bs-wizard-step:first-child  > .progress {left: 50%; width: 50%;}
.bs-wizard > .bs-wizard-step:last-child  > .progress {width: 50%;}
.bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot{ pointer-events: none; }
/*END Form Wizard*/


.b_next{
    color: #fff !important;
    float: right !important;
    font-size: 14px !important;
    margin-top: 7px !important;
    text-align: center;
    margin-right: 10px;
}

.b_next i{
    font-size: 16px !important;
    padding-left: 5px !important;
    padding-right: 0 !important;
    color: #FFF !important;
}

.b_prv{
    color: #fff !important;
    float: right !important;
    font-size: 14px !important;
    margin-top: 7px !important;
    text-align: center;
    margin-right: 10px;
}

.b_prv i{
    font-size: 16px !important;
    padding-right: 5px !important;
    color: #FFF !important;
}

.des_basic{
    font-size: 30px;
    font-weight: bold;
}

.h2, h2{
    font-size: 24px !important;
}

.set_box_search{
    padding-left: 8px;
    height: 32px;
}

/*SET Pagination*/
.set_b_pagination{
    padding: 2px 7px;;
    margin-bottom: 3px;
}

.set_text_pagination{
    width: 80px;
}
/*End SET Pagination*/

.title_filter{
    border-bottom: 1px solid #663399;
    border-left: 5px solid #663399;
    font-size: 16px;
    margin-bottom: 10px;
    margin-top: 13px;
    padding-left: 6px;
}

.btn-my {
    border: 0.8px solid #ccc;
    border-radius: 5px;
    font-size: 13px;
    margin: 3px 2px;
    padding: 2px 10px;
}

.paginate #num_page, .paginate #all_page{
    width: 100px;
    height: 32px;
}

.paginate .btn{
    margin-top: -2px !important;
}

.height_pt{
    height: 32px;
}

@media (max-width: 767px) {
    .bg_row0 {
        background-image: unset !important;
    }

    .blockTextBannerCms > div:first-child {
        font-size: 46px;
    }

    .blockTextBannerCms > div:last-child {
        font-size: 42px;
        white-space: unset; 
    }

    .sbsCustom {
        padding-top: 0px !important;
        margin-left: 0px !important;
        display: block !important;

    }

    .sbsCustom > li {
        float: none;
    }

    .navbar-collapse.in {
        margin-top: 25px;
    }
}