@import url("custtom/custtom_data_table.css");
@import url("responsive/full.css");
@import url("responsive/1200.css") (max-width: 1200px);
@import url("responsive/1024.css") (max-width: 1024px);
@import url("responsive/992.css") (max-width: 992px);
@import url("responsive/834.css") (max-width: 834px);
@import url("responsive/768.css") (max-width: 768px);
@import url("responsive/576.css") (max-width: 576px);
@import url("responsive/476.css") (max-width: 476px);/*iPhone 6 Plus iPhone 6s Plus iPhone 7 Plus*/
@import url("responsive/428.css") (max-width: 428px);/*iPhone 12 Pro Max*/
@import url("responsive/414.css") (max-width: 414px);/*iPhone 8 Plus iPhone XS Max iPhone XR iPhone 11 Pro Max iPhone 11*/
@import url("responsive/390.css") (max-width: 390px);/*iPhone 12 iPhone 12 Pro*/
@import url("responsive/375.css") (max-width: 375px);/*iPhone 6 iPhone 6s iPhone 7 iPhone 8 iPhone X iPhone XS iPhone 11 Pro iPhone 12 mini*/
@import url("responsive/375.css") (max-width: 320px);/* < iPhone 6*/

/* font-size */
.fs-8 { font-size: 0.5rem; }
.fs-10 { font-size: 0.625rem; }
.fs-12 { font-size: 0.75rem; }
.fs-13 { font-size: 0.813rem; }
.fs-14 { font-size: 0.875rem; }
.fs-16 { font-size: 1rem; }
.fs-18 { font-size: 1.125rem; }
.fs-20 { font-size: 1.25rem; }
.fs-22 { font-size: 1.375rem; }
.fs-24 { font-size: 1.5rem; }
.fs-28 { font-size: 1.75rem; }
.fs-32 { font-size: 2rem; }
.fs-34 { font-size: 2.125rem; }
.fs-36 { font-size: 2.25rem; }
.fs-40 { font-size: 2.5rem; }
.fs-42 { font-size: 2.625rem; }
.fs-44 { font-size: 2.75rem; }
.fs-48 { font-size: 3rem; }
.fs-56 { font-size: 3.5rem; }
.fs-64 { font-size: 4rem; }

/* font weight */
.fw-200 { font-weight: 200; }
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.fw-900 { font-weight: 900; }

.cursor-pt { cursor: pointer; }
.cursor-df { cursor: default; }
.display-none { display: none;}
.text-cmu-blue{ color: #6869ad !important; }
.text-cmu-orange{ color: #fbab1e !important; }
.text-cmu-black{ color: #000000 !important; }
.text-cmu-purple{ color: #BF00FF !important; }
.text-cmu-purple-light{ color: #9871CC !important; }
.text-cmu-green-light{ color: #44D1C4 !important; }
.bg-cmu-blue{ background: #6869ad !important; }
.bg-cmu-orange{ background: #fbab1e !important; }
.bg-cmu-black{ background: #000000 !important; }
.bg-cmu-purple{ background: #BF00FF !important; }
.bg-cmu-purple-light{ background: #9871CC !important; }
.text-green-light{ color: #44D1C4 !important; }
.bg-green-light{ background: #44D1C4 !important; }
.text-blue-sky{ color: #008DC9 !important; }
.bg-blue-sky{ background: #008DC9 !important; }
.text-wh { color: #fff; }
.text-bl { color: #008DC9; }
.text-pp { color: #9871CC; }
.text-main { color: #6f42c1; }
.text-purple { color: #6f42c1; }
.text-or { color: #FEB713; }
.text-sea { color: #44D1C4; }
.text-sec7 { color: #757575; }
.text-sec9 { color: #999999; }
.text-sec52 { color: #525050; }
.text-scc11 { color: #11D13B; }
.text-shadow-4 { text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.14) !important; }
.bg-sea { background: #44D1C4; }
.bg-bl { background: #0284CF; }
.bg-purple, .bg-purple:hover { background: #6f42c1; }
.he-cl-r2 { border: 1px solid #E2E2E2 !important;  }
.hv-scale095:hover {     transform: scale(0.95) !important; transform: all 0.2s; }
.hv-scale098:hover {     transform: scale(0.98) !important; transform: all 0.2s; }
.hv-scale11:hover {     transform: scale(1.1) !important; transform: all 0.2s; }
.hv-black:hover { color: black !important; }
.hv-wh:hover { color: white !important; }
.hv-pp:hover { color: #9871CC !important; }
.hv-bl:hover { color: #008DC9 !important; }
.hv-or:hover { color: #FEB713 !important; }
.hv-bg-bl:hover { background: #008DC9 !important; }
.hv-purple, .hv-bg-purple { background: #6f42c1 !important; }
.hv-purple:hover, .hv-bg-purple:hover { background: #9871CC !important; }
.hv-bg-gray:hover { color: black !important; background: #D6D6D6 !important; }
.hv-text-shadow:hover { text-shadow: 0px 6px 12px rgba(0, 0, 0, 0.20) !important; }
.hover-underline-animation,
.hover-underline-animation-bl {
    display: inline-block;
    position: relative;
}
.hover-underline-animation::after,
.hover-underline-animation-bl::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #fff;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after,
.hover-underline-animation-bl:hover::after{
    transform: scaleX(1);
    transform-origin: bottom left;
}
.hover-underline-animation-bl::after {
    background-color: #000 !important;
}
.card-course-title2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.hr-small-yl{
    width: 52px;
    border-top: 5px solid #FEB713 !important;
    opacity: 1 !important;
}
hr.hr-E1{
    border-top: 1px solid #E1E1E1;
    opacity: 1;
}
/* --- st card --- */
.card-wh{
    background: #FFFFFF;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
    border-radius: 16px;
}
.card-course {
    background: #FFFFFF;
    border: 1px solid #E1E1E1;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
}
.course-title-body {
    cursor: pointer;
}
.course-title-body:hover {
    color: #8c68cd;
}
.card-wh{
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid #EBEBEB;
    border-radius: 16px;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.08);
}
.btn-next-bl-in-card, .btn-next-cmu-purple-in-card, .btn-next-cmu-purple-in-card:focus{
    cursor: pointer;  position: absolute;  z-index: 2; bottom: 13px;  right: 13px;  display: flex;  align-items: center;  justify-content: center;   color: #fff;  width: 30px;   height: 30px;
    border-radius: 50%;   background: #8c68cd;   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);   text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);   border: 1px solid #8c68cd;
}
.btn-next-bl-in-card:hover, .btn-next-cmu-purple-in-card:hover, .btn-next-cmu-blue-in-card:hover, .btn-next-cmu-orange-in-card:hover{    color: #fff;   border-color: #fff;  }
.btn-next-cmu-blue-in-card, .btn-next-cmu-blue-in-card:focus{
    cursor: pointer;  position: absolute;  z-index: 2; bottom: 13px;  right: 13px;  display: flex;  align-items: center;  justify-content: center;   color: #fff;  width: 30px;   height: 30px;
    border-radius: 50%;   background: #6869ad ;   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);   text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);   border: 1px solid #6869ad;
}
.btn-next-cmu-orange-in-card, .btn-next-cmu-orange-in-card:focus{
    cursor: pointer;  position: absolute;  z-index: 2; bottom: 13px;  right: 13px;  display: flex;  align-items: center;  justify-content: center;   color: #fff;  width: 30px;   height: 30px;
    border-radius: 50%;   background: #fbab1e;   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);   text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);   border: 1px solid #fbab1e;
}
.card-course img.card-img-top {
    height: auto;
    object-fit: cover;
    object-position: 0px 0%;
}
.card-events-calendar{
    width: 100%;
    background: #FFFFFF;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
    border-radius: 4px;
}
.card-events-calendar{
    border: 0px;
    width: 100%;
    background: #FFFFFF;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.25);
    border-radius: 4px;
}
.css-card-input{
    padding: 0.375rem 0.75rem 0.375rem 0.75rem;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
}
/* --- end card --- */

/* --- st btn --- */
.btn-profile img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #ffffff;
    object-fit: cover;
}
.btn-EB {
    padding: 8px 16px;
    color: #000!important;
    background: #F7F7F7;
    border: 1px solid #EBEBEB;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.14);
    border-radius: 8px;
}
.btn-border-blue{
    background-color: #fff !important;
    color: #008DC9 !important;
    border: 1px solid #008DC9 !important;
    border-radius: 8px !important;
}
.btn-border-blue:hover{
    background-color: #008DC9 !important;
    color: #fff !important;
}
.btn-border-black{
    padding: 8px 16px;
    background-color: #fff !important;
    color: #000 !important;
    border: 1px solid #000 !important;
    border-radius: 8px !important;
}
.btn-border-black:hover{
    background-color: #000 !important;
    color: #fff !important;
}
.btn-border-purple, .btn-main-color{
    background-color: #fff !important;
    color: #8c68cd !important;
    border: 1px solid #8c68cd !important;
    border-radius: 8px !important;
}
.btn-border-purple:hover, .btn-main-color:hover{
    background-color: #8c68cd !important;
    color: #fff !important;
}
.btn-bl{
    color: #fff!important;
    background: #0284CF !important;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.08) !important;
    border-radius: 9px !important;
}
.btn-bl:hover{
    color: #fff;
    background: #0284CF !important;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.1) !important;
}
.btn-purple{
    color: #fff!important;
    background: #8c68cd !important;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.08) !important;
    border-radius: 9px !important;
}
.btn-purple:hover{
    color: #fff;
    background: #8c68cd !important;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.1) !important;
}
.btn-bd-F7 {
    color: #000!important;
    background: #F7F7F7 !important;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.24);
    border-radius: 8px;
}
.btn-go-back-bl{
    color: #8c68cd;
    background: #EFFAFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 24px;
}
.btn-go-back-bl:hover{
    color: #fff;
    background: #8c68cd;
}
.btn-go-back-purple{
    color: #8c68cd;
    background: #EFFAFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 24px;
}
.btn-go-back-purple:hover{
    color: #fff;
    background: #8c68cd;
}
#css-btn-group .btn-group-lf,
#css-btn-group .btn-group-rt{
    width: auto;
    padding: 0.875rem;
    color: #8c68cd;
    border: 1px solid #8c68cd;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); 
}
#css-btn-group .btn-group-lf:hover,
#css-btn-group .btn-group-rt:hover{
    color: #fff;
    background-color: #8c68cd;
}
#css-btn-group .btn-group-lf.active,
#css-btn-group .btn-group-rt.active{
    color: #fff;
    background-color: #8c68cd;
}
/* --- end btn --- */

/* --- st splide --- */
.splide__pagination{
    bottom: -0.5em !important;
}
.splide__pagination__page.is-active{
    background: #cbcbcb !important;
}
/* --- end splide --- */

/* --- st pagination- --- */
.css-custom-pagination .page-link,
.css-pagination .page-link {
    color: #000000;
    display: flex;
    align-items: center;
    width: 32px;
    height: 32px;
    box-sizing: border-box;
    border-radius: 4px;
    margin: 0px 4px;
    border: 1px solid #000000;
    margin-right: 8px;
}
.css-custom-pagination .page-item.active .page-link,
.css-pagination .page-item.active .page-link{
    color: #fff;
    border-color: #8c68cd;
    background-color : #8c68cd;
    border-color: #8c68cd;
}
.css-custom-pagination .page-link:hover,
.css-pagination .page-link:hover{
    color: #8c68cd;
    border: 1px solid #8c68cd;
}
ul.pagination .fa-angle-left::before{
    content: "\f104" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
}
ul.pagination .fa-angle-right::before{
    content: "\f105" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
}
/* --- end pagination --- */

/* --- st dropdown-content --- */
.btn-drop-show {     width: 100%;    height: auto;    min-height: 48px;    padding-left: 16px;    padding-right: 16px;    cursor: pointer;
    background: #FFFFFF;    border: 1px solid #EBEBEB;    border-radius: 8px;    box-sizing: border-box;    border-radius: 8px;
    outline: none;    text-align: left;    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.24) !important;    /* transition: all 0.5s linear; */
}
.btn-drop-show:after {     bottom: 20%;    right: 13px;    font-family: "Font Awesome 6 Free";    content: "\f107";    font-weight: 900;    float: right;    transition: all 0.3s linear;}
.btn-drop-show.is-open:after {     transform: rotate(-180deg);}
.btn-drop-show:hover, .btn-drop-show.is-open {    color: #fff;     background: #8c68cd;    border-color: #8c68cd;}
.drop-content-under-btn {  max-height: 0;    font-size: 0.875rem;    overflow: hidden;    transition: max-height 0.2s ease-in-out;
    margin-top: -8px;    border-radius: 8px;    background: #fff;    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); }
.drop-content-under-btn .content {    padding: 24px;    border: 1px solid #EBEBEB;    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);    border-radius: 8px;    background: #fff; font-size: large; }
/* --- end dropdown-content --- */

/* --- st form --- */
label {
    font-size: 1.125rem;
    font-weight: 500;
}
.label-for-files{
  display: inline-block;
  background-color: indigo;
  color: white;
  padding: 0.5rem;
  font-family: sans-serif;
  border-radius: 0.3rem;
  cursor: pointer;
  margin-top: 1rem;
}
.css-form input{
    height: 48px;
    background: #FFFFFF;
    border: 1px solid #E1E1E1;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
}
.btn-search {
    width: 48px;
    background-color: #8c68cd;
    color: #fff;
    border-radius: 8px;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    left: -8px;
}
.btn-search:hover {
    background-color: #6f42c1;
    color: #fff;
}

.css-set1-input .btn-css-file{
    height: 36px;
    border: 1px solid #8c68cd;
    border-radius: 6px;
}
.css-set1-input select.form-select {
    color: #1094CC;
}
.css-set1-input select.form-select option:not(:first-of-type) {
    color: #000;
}
.css-set1-input select.form-select option:first-of-type {
    color: #999999;
}
.css-set1-input ::placeholder {
    color: #1094CC;
    opacity: 1;
    /* Firefox */
}
.css-set1-input :-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #1094CC;
}
.css-set1-input ::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #1094CC;
}
.form-select-css-icon-blue{
    cursor: pointer;
    position: relative;
    background-image: url('../images/icons/angle_down_blue.png') !important;
    background-size: auto;
}
.form-check-input-square{
    border: 1px solid #000000;
    border-radius: 4px !important;
}
.form-check-input.form-check-input-square:checked{
    padding: 1px;
    background-color: #fff;
    border: 1px solid #8c68cd;
    background-image: url('../images/icons/square_radio.png');
    background-size: auto;
}
/* --- end -form --- */

/* --- st row-border --- */
.css-3-row-border-rd{
    border: 1px solid #E2E2E2;
    border-radius: 12px;  
}
.css-3-row-border-rd .clct{
    border-left: 1px solid #E2E2E2;
    border-right: 1px solid #E2E2E2;
}
/* --- end row-border --- */

/* ======== st Top Header ======== */
#top-header {
    padding-left: 56px;
    padding-right: 56px;
    /* height: 40px; */
    color: #fff !important;
    background: #9871CC;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);
}

#span-contact {
    border-left:1px solid #fff;
    border-right:1px solid #fff;
    font-size: 14px;
}

/* -- st navbar -- */
.navbar.sticky-top{
    padding-left: 56px;
    padding-right: 40px;
    padding-top: 0px;
    padding-bottom: 0px;
}
.navbar.sticky-top .navbar-collapse .nav-item{
    padding-top: 16px;
    padding-bottom: 16px;
    margin-left: 8px;
    margin-right: 8px;
}
#navbar-main{
    background-color: #fff;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.14);
}
.navbar-brand img {
    max-height: 50px;
}
.dropdown-menu.show {
    margin-top: 0px;
    border-radius: 0px 0px 8px 8px;
    border: none !important;
    background: #FFFFFF;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.08), 0px 4px 14px rgba(0, 0, 0, 0.08);
}
#navbar-main .nav-link {
    color: #000;
    font-weight: 600;
}
#navbar-main .nav-link:hover {
    color: #FEB713;
}
#navbar-main .nav-link.dropdown-toggle.show{ 
    color: #8c68cd;
    transition: all 0.2s;
}
#navbar-main .dropdown-menu.show li {
   padding: 2px 8px 2px 8px;
}
#navbar-main .dropdown-menu.show .dropdown-item {
    font-weight: 400;
}
#navbar-main .dropdown-menu.show .dropdown-item:hover {
    font-weight: 500;
    background-color: #EFEFEF;
}
#navbar-main .dropdown-menu.show .dropdown-item:active {
    color: #8c68cd;
}
#navbar-main .navbar-collapse .dropdown-toggle::after {
    font-family: "Font Awesome 6 Free";
    content: "\f107";
    font-size: 0.75rem;
    margin-left: 5px !important;
    vertical-align: 0;
    transition: all 0.3s linear;
    border: 0;
    /*margin-left: 8px;*/
}
/* -- end navbar -- */
/* ======== end Top Header ======== */

/* ======== st Banner ======== */
#BannerSlider{
    position: relative;
}
#BannerSlider .carousel-inner{
    max-height: 720px !important;
}
#BannerSlider .carousel-inner .carousel-item{
    position: relative;
}
#BannerSlider .carousel-caption{
    position: absolute;
    z-index: 2;
    top: 20%;
}
#BannerSlider .carousel-control-prev{
    color: #fff !important;
    border-radius: 50% !important;
    border: 2px solid #FFFFFF !important;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25) !important;
    opacity: 1 !important;
    max-width: 34px;
    max-height: 35px;
    position: absolute;
    z-index: 2;
    top: auto !important;
    left: auto !important;
    bottom: 5%;
    right: 18%;
}
#BannerSlider .carousel-control-next{
    color: #fff !important;
    border-radius: 50% !important;
    background-color: #8c68cd !important;
    border: 2px solid #8c68cd !important;
    opacity: 1 !important;
    max-width: 34px;
    max-height: 35px;
    position: absolute;
    z-index: 2;
    top: auto !important;
    left: auto !important;
    bottom: 5%;
    right: 15%;
}
#BannerSlider .carousel-control-prev:hover{
    background-color: #8c68cd !important;
}
#BannerSlider .carousel-control-next:hover{
    border-color: #fff !important;
}
#BannerSlider .carousel-control-prev span,
#BannerSlider .carousel-control-next span{
    font-size: 1.25rem !important;
}

#sub-banner{
    background: #FFFFFF;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25);
}
#sub-banner .row .div-img-set{
    display: flex;
    align-items: center;
    justify-content: center;
}
#sub-banner .row .div-img-set img{
    height: fit-content;
}
/* ======== end Banner ======== */

/* ======== st Footer ======== */
#idFooter{
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.14), 0px -5px 15px rgba(0, 0, 0, 0.14);
}
#idFooter #container-icons-footer .box-icons-footer img{
    width: auto;
}
#idFooter-bottom {
    background: #9871CC;
}
/* ======== end Footer ======== */

/* ======== st custom ======== */
.custom-nav-pills .nav-item button{
    color: #000;
    background-color: #fff;
    border-radius: 24px;
    border: 2px solid #fff;
}
.custom-nav-pills .nav-item button:hover,
.custom-nav-pills .nav-item button.active:hover{
    color: #fff;
    border: 2px solid #8c68cd;
    background-color: #8c68cd;
}
.custom-nav-pills .nav-item button.active{
    color: #000;
    background-color: #fff;
    border: 2px solid #8c68cd;
    filter: drop-shadow(0px 4px 14px rgba(0, 0, 0, 0.08));
}
/* ======== end custom ======== */

/* ======== st Home ======== */
.fix-css-video-js {
    border-radius: 16px !important;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.08) !important;
}

.fix-css-video-js .plyr{
    margin: 0px !important;
    padding: 0px !important;
    height: 100% !important;
    width: 100% !important;
    border-radius: 16px !important;
}

/* --- st idCalendar --- */
#idCalendar .fc-header-toolbar{
    color: #fff !important;
    background: #8c68cd !important;
    margin-bottom: 0 !important;
}
#idCalendar .fc-col-header{
    color: #fff !important;
    background: #8c68cd !important;
}
#idCalendar .fc-col-header .fc-col-header-cell-cushion{
    color: #fff !important;
}
/* #idCalendar .fc-scrollgrid.fc-scrollgrid-liquid{
    border-top: 1px !important;
} */
#idCalendar .fc-scrollgrid.fc-scrollgrid-liquid tbody th.fc-col-header-cell{
    border: 0px !important;
}
#idCalendar .fc-prev-button,
#idCalendar .fc-next-button{
    background: none!important;
    border: none !important;
}
#idCalendar .fc-prev-button:hover,
#idCalendar .fc-next-button:hover{
    color: #FEB713 !important;
}

#idCalendar .fc-scrollgrid-sync-table .fc-daygrid-day.fc-day-today{
    background: transparent !important;
    position: relative;
}
#idCalendar .fc-scrollgrid-sync-table .fc-daygrid-day.fc-day-today .fc-daygrid-day-top a{
    padding-left: 10px;
    padding-right: 10px;
    background: #FEB713 !important;
    border-radius: 50% !important;
}
#idCalendar .fc-scrollgrid-sync-table .fc-daygrid-day .fc-daygrid-event-harness .fc-daygrid-event.fc-event-end,
#idCalendar .fc-scrollgrid-sync-table .fc-daygrid-day .fc-daygrid-event-harness .fc-daygrid-event.fc-event-start{
   margin-left: 0px !important;
   margin-right: 0px !important;
   border-radius: 0px !important;
}
#idCalendar .fc-scrollgrid-sync-table .fc-daygrid-day .fc-daygrid-event-harness 
.fc-daygrid-event.fc-event-start .fc-event-title-container .fc-event-title.fc-sticky{
    font-size: smaller !important;
}
.btn-prev-month,
.btn-next-month{
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background: #FFFFFF;
    border: 1px solid #CED1D1;
    border-radius: 50%;
}
.btn-prev-month:hover,
.btn-next-month:hover{
    color: #fff;
    background: #8c68cd;
    border: 1px solid #fff;
}
/* --- end idCalendar --- */
/* ======== end Home ======== */

/* ======== start About ======== */
.circle-year-out{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    width: 229px;
    height: 229px;
    background: #EAEAEA;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
    border-radius: 50%;
}
.circle-year-out.circle-year-out-after-arrow::after{
    display: inline;
    content: "\f061" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 3rem;
    position: absolute;
    z-index: 3;
    right: -64px;
}
.circle-year-in {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    width: 207px;
    height: 207px;
    background: #FEB713;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
    border-radius: 50%;
}
.circle-year-in.circle-year-yl {
    background: #FEB713 !important;
}
.circle-year-in.circle-year-bl {
    background: #1094CC !important;
}
.circle-year-in.circle-year-sea {
    background: #44D1C4 !important;
}
.circle-year-in.circle-year-pp {
    background: #9871CC !important;
}
/* ======== end About ======== */

/* ======== st OurTeam ======== */
.section-1-our-team .btn-drop-show{
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.24) !important;
}

.section-1-our-team .btn-drop-show {
    width: 100%;
    height: auto;
    min-height: 48px;
    padding-left: 16px;
    padding-right: 16px;
    cursor: pointer;
    background: #FFFFFF;
    border: 1px solid #EBEBEB;
    border-radius: 8px;
    box-sizing: border-box;
    border-radius: 8px;
    outline: none;
    text-align: left;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.24) !important;
    /* transition: all 0.5s linear; */
}

.section-1-our-team .btn-drop-show:after {
    bottom: 20%;
    right: 13px;
    font-family: "Font Awesome 6 Free";
    content: "\f107";
    font-weight: 900;
    float: right;
    transition: all 0.3s linear;
}

.section-1-our-team .btn-drop-show.is-open:after {
    transform: rotate(-180deg);
}

.section-1-our-team .btn-drop-show:hover{
    color: #8c68cd;
    background: #fff;
    border-color: #8c68cd;
}
.section-1-our-team .btn-drop-show.is-open {
    color: #000;
    background: #fff;
    border-color: #ebebeb;
}
.section-1-our-team .drop-content,
.section-1-our-team .drop-content .content{
    color: #000;
    background: #fff;
    border: none;
    box-shadow: none;
}
.crad-ourteam{
    max-width: 290px;
    border: none;
    border-radius: 16px;
}
/* ======== end OurTeam ======== */

/* ======== st policy strategic plan ======== */
.card-header-btn-bl, .card-header-btn-purple  {
    position: relative;
}
.card-header-btn-bl .cd-header, .card-header-btn-purple .cd-header {
    position: relative;
    z-index: 2;
    padding: 13px 16px;
    width: 100%;
    color: #fff;
    background: #8c68cd;
    /* border: 1px solid #EBEBEB; */
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.24);
    border-radius: 8px;
}
.card-header-btn-bl .cd-content, .card-header-btn-purple .cd-content {
    position: relative;
    z-index: 1;
    margin-top: -16px;
    padding-top: 8px;
    /* padding-left: 24px; */
    /* padding-right: 24px; */
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border: 1px solid #E2E2E2;
    border-radius: 0px 0px 16px 16px;
}
/* ======== end policy strategic plan ======== */

/* ======== st Course Detail ======== */
/* --- detail page --- */
.section-course-detail .btn-drop-show {
    width: 100%;
    height: auto;
    min-height: 48px;
    padding-left: 16px;
    padding-right: 16px;
    cursor: pointer;
    background: #FFFFFF;
    border: 1px solid #EBEBEB;
    border-radius: 8px;
    box-sizing: border-box;
    border-radius: 8px;
    outline: none;
    text-align: left;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.24) !important;
    /* transition: all 0.5s linear; */
}

.section-course-detail .btn-drop-show:after {
    bottom: 20%;
    right: 13px;
    font-family: "Font Awesome 6 Free";
    content: "\f107";
    font-weight: 900;
    float: right;
    transition: all 0.3s linear;
}

.section-course-detail .btn-drop-show.is-open:after {
    transform: rotate(-180deg);
}

.section-course-detail .btn-drop-show:hover,
.section-course-detail .btn-drop-show.is-open {
    color: #000;
    background: #EBEBEB;
    border-color: #EBEBEB;
}
.section-course-detail .drop-content,
.section-course-detail .drop-content .content {
    background: none;
    border: none;
    box-shadow: none;
}
/* --- detail page --- */
/* ======== end Course Detail ======== */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* ======== st Profile ======== */
.no-img-pf{
    display: flex;
    align-items: center;
    justify-content: center;
    width: -webkit-fill-available;
    height: 265px;
    max-width: 265px;
    color: #DFDFDF;
    background: #F9F9F9;
    border: 1px solid #EBEBEB;
    border-radius: 16px;
}
.img-pf{
    width: -webkit-fill-available;
    height: 265px;
    max-width: 265px;
    color: #DFDFDF;
    background: #F9F9F9;
    border: 1px solid #EBEBEB;
    border-radius: 16px;
}
.img-pf img{
    max-width: 265px;
    max-height: 265px;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    object-fit: cover;
}


ul.custom-nav-pills-main-pf .nav-item button{
    width: 100%;
    padding: 16px 48px;
    color: #000;
    background-color: #fff;
    border-radius: 12px;
}
ul.custom-nav-pills-main-pf .nav-item button:hover,
ul.custom-nav-pills-main-pf .nav-item button.active:hover{
    color: #fff;
    background: #8c68cd;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
    border-radius: 12px !important;
}
ul.custom-nav-pills-main-pf .nav-item button.active{
    color: #fff;
    background: #8c68cd;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
    border-radius: 12px;
}
ul.custom-nav-pills-main-pf{
    background: #FFFFFF;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
    border-radius: 12px;
}
/* ======== end Profile ======== */

.image-popup {  cursor: -webkit-zoom-in;  cursor: -moz-zoom-in;   cursor: zoom-in; }
.img { width: 100%;  background-size: cover; background-repeat: no-repeat; background-position: center center; }
.gallery {  display: block;  height: 200px; position: relative; }
.no-gutters {  margin-right: 0;  margin-left: 0; }
.gallery .icon {  width: 50px;  height: 50px;  margin: 0 auto;    margin-bottom: 0px;  z-index: 0;  opacity: 0;  position: relative;  background: #83b582;
  -moz-transition: all 0.3s ease;  -o-transition: all 0.3s ease;  -webkit-transition: all 0.3s ease;  -ms-transition: all 0.3s ease;  transition: all 0.3s ease; }
.no-gutters > .col, .no-gutters > [class*="col-"] {  padding-right: 0;  padding-left: 0; }
.alert-primary {   --bs-alert-color: #084298;   --bs-alert-bg: #cce5ff;  --bs-alert-border-color: #b8daff;  }
.form-control-readonly {  background-color: whitesmoke !important; }
.modal-content { border: 1px solid gray; background-color: #8c68cd; }
.modal-header{ color: white; text-align: center; }
.modal-body, .modal-footer { background-color: white; }
.td-small { font-size: small; }
.fs-small { font-size: 8px; }
.fs-xs { font-size: 10px; }
.fs-normal { font-weight: normal; }
.font-normal { font-weight: 200; }
.cursorDefault{ cursor: default; }
.cursorDeny{ cursor: not-allowed; }
.cursorPointer{ cursor: pointer; }
.cursorHelp{ cursor: help; }

.badge {  display: inline-block;    padding: 0.25em 0.4em;    font-size: 75%;    font-weight: 700;    line-height: 1;    text-align: center;    white-space: nowrap;    vertical-align: baseline;    border-radius: 0.25rem; }
a.badge:hover, a.badge:focus {    text-decoration: none; }
.badge:empty {    display: none; }
.btn .badge {    position: relative;    top: -1px; }
.badge-pill {    padding-right: 0.6em;    padding-left: 0.6em;    border-radius: 10rem; }
.badge-primary {    color: #fff;    background-color: #007bff; }
a.badge-primary:hover, a.badge-primary:focus {    color: #fff;    background-color: #0062cc; }
.badge-secondary {    color: #fff;    background-color: #6c757d; }
a.badge-secondary:hover, a.badge-secondary:focus {    color: #fff;    background-color: #545b62; }
.badge-success {    color: #fff;    background-color: #28a745; }
a.badge-success:hover, a.badge-success:focus {    color: #fff;    background-color: #1e7e34; }
.badge-info {    color: #fff;    background-color: #17a2b8; }
a.badge-info:hover, a.badge-info:focus {    color: #fff;    background-color: #117a8b; }
.badge-warning {    color: #212529;    background-color: #ffc107; }
a.badge-warning:hover, a.badge-warning:focus {    color: #212529;    background-color: #d39e00; }
.badge-danger {    color: #fff;    background-color: #dc3545; }
a.badge-danger:hover, a.badge-danger:focus {    color: #fff;    background-color: #bd2130; }
.badge-light {    color: #212529;    background-color: #f8f9fa; }
a.badge-light:hover, a.badge-light:focus {    color: #212529;    background-color: #dae0e5; }
.badge-dark {    color: #fff;    background-color: #343a40; }
a.badge-dark:hover, a.badge-dark:focus {    color: #fff;    background-color: #1d2124; }
.maxWidthImg{ max-width: 84px; max-height: 84px; }
.boxAlert{ border: 1px solid lightgrey; width: 100%; text-align: center; vertical-align: middle; padding: 80px 20px; border-radius: 10px; }
#contact-header-phone {  border-right: 1px solid #fff; }
.nav-padding{     padding-left: 95px;  padding-right: 70px; }
.navbar.sticky-top { padding-left: 0px; padding-right: 0px;  }
a, a:hover, a:focus, a:active { text-decoration: none !important; color: #6f42c1; }

.div-box-footer{ padding: 1.5rem !important; } #divFooter{ padding-top: 3rem !important; }
.fs-footer-header{ font-size: 18px; } .fs-footer-topic{ font-size: 16px; } .fs-footer-item{ font-size: 14px; }

.nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: white;  background-color: #6f42c1; }
.nav-pills .nav-link {  border-radius: 8px 0px 0px 8px; color: grey; }
.div-tab-content{  border-radius: 0px 8px 8px 0px; padding: 10px 20px; border: 1px solid #e6e7e5; background-color: #f6f7f5; }

label, .contact-group{ font-weight: normal; font-size: 1rem; } .contact-group{ width: 115px; }
.nav-text{ font-size: 18px; }
.input-readonly{ background-color: #fafafa; }
.input-disabled{ background-color: lightgray; color: black; }
.btn-group-edit-delete{ border-radius: 0 8px 8px 0; border: 1px solid lightgrey;   }
.btn-group-edit, .btn-group-delete{ border: 0 solid transparent;  }
.btn-group-edit{ padding-right: 5px; } .btn-group-delete{ padding-left: 5px; }
.btn-group-edit:hover{ background-color: #dae0e5; border-radius: 0; }
.btn-group-delete:hover{ background-color: #dae0e5; border-radius: 0 8px 8px 0; }
.btn-calendar{ border-radius: 0 8px 8px 0;   }

.btn-div-add{ border-radius: 8px; border: 1px dashed dimgrey; font-size: 16px; text-align: center; font-weight: bolder; }
.btn-div-add-purple{ border-radius: 8px; border: 1px dashed #6f42c1; font-size: 16px; text-align: center; font-weight: bolder; }
.btn-md{ font-size: .8rem; padding: 5px 7px; }
.weight-bold{ font-weight: 400; }
.weight-normal{ font-weight: 200; }
.weight-light{ font-weight: lighter; }
.hr-line{ border-top: 1px dashed dimgrey; opacity: .8;  }
.hr-dashed{ border-top: 1px dashed; opacity: .35;  }
.text-right{ text-align: right; }
.blur{ -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); opacity: 0.5;  background: #ccc; pointer-events: none; }

.card-purple{ padding: 16px; color: white; background: #8c68cd; border: 1px solid #EBEBEB; border-radius: 8px; box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.08); cursor: pointer; }
.card-purple:hover{ background: #9871CC; }
.card-warning{ padding: 16px; color: white; background: #ffa90b; border: 1px solid #EBEBEB; border-radius: 8px; box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.08); cursor: pointer; }
.card-warning:hover{ background: #ffba10; }
.card-disabled{ padding: 16px; color: darkgrey; background: lightgrey; border: 1px solid #EBEBEB; border-radius: 8px; box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.08); cursor: not-allowed;  }
.card-icon{ font-size: 4em; } .card-title{ font-size: 1.5rem; }

.contact-chat, .contact-fb, .contact-line{
  cursor: pointer;  position: fixed;   z-index: 999;   right: 16px;   bottom: 10px;   width: 48px;  height: 48px;
  font-size: 1.5rem;   color: #6869ad;   background-color: #f1f1f1;   border-radius: 50%;
  filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.15)) drop-shadow(0px 4px 14px rgba(0, 0, 0, 0.08));   transition: all 0.25s;
}
.contact-fb, .contact-line{   background-color: transparent !important; }
.contact-chat:hover, .contact-fb:hover, .contact-line:hover{   filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.5)) drop-shadow(0px 4px 14px rgba(0, 0, 0, 0.08));   transition: all 0.25s ; }
.contact-fb img, .contact-line img{   width: 40px;   height: 40px; }
.contact-open {   color: #fff;   background-color: #6869ad; }

.ui-datepicker, ul.uib-datepicker-popup.dropdown-menu.ng-scope { z-index: 99999 !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center {  text-align: center !important; }

@media only screen and (max-width: 1400px) {
    #divTitle{ font-size: 1.2rem; } #divTitleSub{ font-size: 0.7rem; }
    .nav-link{ font-size: 0.8rem; }
    .card-icon{ font-size: 3.5em; } .card-title{ font-size: 1.2rem; }
}
@media only screen and (max-width: 1260px) {
    .nav-padding{     padding-left: 45px;  padding-right: 70px; }
    .card-icon{ font-size: 3.5em; } .card-title{ font-size: 1.1rem; }
}
@media only screen and (max-width: 1200px) {
    #top-header {   padding-left: 5px;   padding-right: 25px; }
    .nav-padding{     padding-left: 45px;  padding-right: 45px; }
    .card-icon{ font-size: 3em; } .card-title{ font-size: 1rem; } .card-purple, .card-disabled{ padding: 12px; }
}
@media only screen and (max-width: 1150px) {
    #divTitle{ font-size: 15px; } #divTitleSub{ font-size: 11px; }
    .nav-link{ font-size: 14px; }
    .nav-padding{   padding-left: 20px;  padding-right: 20px; }
}
@media only screen and (max-width: 1110px) {
    #divTitle{ font-size: 14px; } #divTitleSub{ font-size: 10px; }
    .nav-link{ font-size: 13px; }  .card-purple, .card-disabled{ padding: 4px; }
}
@media only screen and (max-width: 1050px) {
    #top-header {   padding-left: 0px;   padding-right: 5px; }
    .nav-padding{     padding-left: 10px;  padding-right: 10px; }
    .nav-link{ font-size: 12px; } #divTitle{ font-size: 14px; } #divTitleSub{ font-size: 9px; }
    .card-purple, .card-disabled{ padding: 0px; }
    #navbar-main{ padding-top: 5px !important; padding-bottom: 5px !important; }/**/
}
@media only screen and (max-width: 991px) {
    #navbar-main{ padding-top: 12px !important; padding-bottom: 12px !important; }
    #divTitle{ font-size: 22px; } #divTitleSub{ font-size: 16px; }
    .nav-padding{     padding-left: 30px;  padding-right: 15px; }
    .navbar.sticky-top .navbar-collapse .nav-item{ padding-bottom: 5px; }
    label, .contact-group{ font-size: .9rem; }  .contact-group{ width: 100px; } .nav-text{ font-size: 14px; }
}
@media only screen and (max-width: 670px) {
    .nav-padding{     padding-left: 15px;  padding-right: 15px; }
    .div-box-footer{ padding: .5rem .25rem !important; }
    .div-footer{ padding-left: 25px; } #footer-ct{ padding-left: 20px; } #divFooter{ padding-top: 1rem !important; }
    .fs-footer-header{ font-size: 16px; } .fs-footer-topic{ font-size: 14px; } .fs-footer-item{ font-size: 12px; }
    .navbar.sticky-top .navbar-collapse .nav-item{ padding-bottom: 5px; }
    label, .contact-group{ font-size: .8rem; }  .contact-group{ width: 90px; } .nav-text{ font-size: 12px; }
    #sub-banner .container{ padding-left: 10px; padding-right: 10px; }
}
@media (min-width: 576px) {
    .container, .container-sm {  max-width: 90%;  }
}
@media only screen and (max-width: 540px) {
    .nav-padding{     padding-left: 5px;  padding-right: 5px; }
    .div-footer{ padding-left: 25px; } #footer-ct{ padding-left: 20px; }
    #divTitle{ font-size: 18px; } #divTitleSub{ font-size: 14px; } #divFooter{ padding-top: 1rem !important; }
    .fs-footer-header{ font-size: 16px; } .fs-footer-topic{ font-size: 14px; } .fs-footer-item{ font-size: 12px; }
    .navbar.sticky-top .navbar-collapse .nav-item{ padding-bottom: 5px; }
    label, .contact-group{ font-size: .65rem; } .contact-group{ width: 85px; } .nav-text{ font-size: 10px; }
}