@import url("responsive/full.css?v=1.1");
@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-main { color: #007a6e !important; }
.text-main-color { color: #007a6e; }
.text-main-secondary { color: #757575; }
.text-main-secondary-disabled { color: #CCCCCC; }
.text-main-green{  color: #007468;  }
.text-main-blue{ color: #008DC9;  }
.text-main-orange{ color: #fbab1e; }
.text-main-black{ color: #444444; }

.text-cmu-blue{ color: #008DC9 !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-line-green{  background: #007468 !important;  }
.bg-line-blue{ background: #008DC9 !important;  }
.bg-line-orange{ background: #fbab1e !important; }
.bg-line-black{ background: #444444 !important; }

.btn-bg-green{  background: #007468 !important; color: #ffffff!important; cursor: pointer; }
.btn-bg-green:hover, .btn-bg-green:focus, .btn-bg-green:active{  background: #007a6e !important;  }
.btn-bg-blue{  background: #117a8b !important; color: #ffffff!important; cursor: pointer; }
.btn-bg-blue:hover, .btn-bg-green:focus, .btn-bg-green:active{  background: #17a2b8 !important;  }
.btn-bg-orange{  background: #d39e00 !important; color: #ffffff!important; cursor: pointer; }
.btn-bg-orange:hover, .btn-bg-green:focus, .btn-bg-green:active{  background: #ffc107 !important;  }
.btn-bg-red{  background: #bd2130 !important; color: #ffffff!important; cursor: pointer; }
.btn-bg-red:hover, .btn-bg-green:focus, .btn-bg-green:active{  background: #dc3545 !important;  }
.btn-bg-gray{  background: #545b62 !important; color: #ffffff!important; cursor: pointer; }
.btn-bg-gray:hover, .btn-bg-green:focus, .btn-bg-green:active{  background: #6c757d !important;  }

.bg-cmu-blue{ background: #008DC9 !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-main { color: #007468 !important; }
.text-secondary { color: #757575 !important; }
.text-wh { color: #ffffff !important; }
.text-bl { color: #008DC9; }
.text-pp { color: #9871CC; }
.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-main:hover { color: #007a6e !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; }
.text-main-shadow:hover { text-shadow: 0px 6px 12px rgba(0, 0, 0, 0.20) !important; }
.text-hover-main:hover { color: #ff920d !important; }
.text-hover-main-color:hover { color: #fd8e13 !important; }
.text-hover-main-black:hover{ color: #555555 !important; }
.hover-underline-animation, .hover-underline-animation-main, .hover-underline-animation-black { display: inline-block; position: relative; }
.hover-underline-animation::after, .hover-underline-animation-main::after, .hover-underline-animation-black::after {
    content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: 0;  left: 0;
    background-color: #ffffff; transform-origin: bottom right; transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after, .hover-underline-animation-main:hover::after, .hover-underline-animation-black:hover::after{ transform: scaleX(1); transform-origin: bottom left; }
.hover-underline-animation-main::after { background-color: #007a6e !important; }
.hover-underline-animation-black::after { background-color: #555555 !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 #8cc6aa !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: #007a6e; }
.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{
    background-color: #fff !important;
    color: #8c68cd !important;
    border: 1px solid #8c68cd !important;
    border-radius: 8px !important;
}
.btn-border-purple: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-main{ color: #007468; background: #EFFAFF; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); border-radius: 24px; }
.btn-go-back-main:hover{ color: #fff; background: #007a6e; }
.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: #007a6e;
    border: 1px solid #007a6e;
    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: #007a6e;
}
#css-btn-group .btn-group-lf.active,
#css-btn-group .btn-group-rt.active{
    color: #fff;
    background-color: #007a6e;
}
/* --- 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: #007a6e;
    background-color : #007a6e;
    border-color: #007a6e;
}
.css-custom-pagination .page-link:hover,
.css-pagination .page-link:hover{
    color: #007a6e;
    border: 1px solid #007a6e;
}
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: #007a6e;    border-color: #007a6e;}
.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: #007a6e;
    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 #007a6e;
    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 #007a6e;
    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: #007a6e !important;
    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 { font-size: 1rem; color: #000000;  font-weight: 600; }
#navbar-main .nav-link:hover {  color: #007a6e; }
#navbar-main .nav-link.dropdown-toggle.show{  color: #007a6e !important;  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: #fbab1e; }
#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; }
/* -- 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: #FFFFFF !important; border-radius: 50% !important; border: 2px solid #FFFFFF !important; box-shadow: 0 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: #FFFFFF !important; border-radius: 50% !important; background-color: #007a6e !important; border: 2px solid #007a6e !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: #007a6e !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: 0 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: 0 4px 4px rgba(0, 0, 0, 0.14), 0 -5px 15px rgba(0, 0, 0, 0.14); }
#idFooter #container-icons-footer .box-icons-footer img{ width: auto; }
#idFooter-bottom {  background: #007a6e; }
/* ======== end Footer ======== */

/* ======== st custom ======== */
.custom-nav-pills .nav-item button{
    color: #000000;
    background-color: #FFFFFF;
    border-radius: 24px;
    border: 2px solid #FFFFFF;
}
.custom-nav-pills .nav-item button:hover,
.custom-nav-pills .nav-item button.active:hover{
    color: #FFFFFF;
    border: 2px solid #007a6e;
    background-color: #007a6e;
}
.custom-nav-pills .nav-item button.active{
    color: #000000;
    background-color: #FFFFFF;
    border: 2px solid #007a6e;
    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: #007a6e !important;
    margin-bottom: 0 !important;
}
#idCalendar .fc-col-header{
    color: #fff !important;
    background: #007a6e !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: #007a6e;
    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: #007a6e;
    background: #fff;
    border-color: #007a6e;
}
.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: #007a6e;
    /* 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: #007a6e;
    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: #007a6e;
    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: #007a6e !important; }
.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; !important; }
.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: #007a6e; }
.text-wh:focus, .text-wh:hover{ color: #FFFFFF !important; }


.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; }

#idFooter-bottom{ background-color: #007a6e !important; }
.btn-border-main{  background-color: #ffffff !important;  color: #007a6e !important;  border: 1px solid #007a6e !important;  border-radius: 8px !important; }
.btn-border-main:hover, .btn .btn-border-main .nav-link:hover{  background-color: #007a6e !important;  color: #ffffff !important; }
#navbar-main .dropdown-menu.show .dropdown-item, .dropdown-item{  color: #007a6e !important; }
#navbar-main .dropdown-menu.show  .text-main-secondary-disabled{  color: #CCCCCC !important; }
.text-main-secondary-disabled:hover{ color: #DDDDDD !important; }

::placeholder { font-weight: 250; font-size: 16px; line-height: 140%; letter-spacing: 0.01em; color: #8cc6aa !important;   }
::-ms-input-placeholder { font-weight: 250; font-size: 16px; line-height: 140%; letter-spacing: 0.01em; color: #8cc6aa !important;   }

.btn-main, .btn-main-color{  color: #ffffff !important;  background: #007468 !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important; border-radius: 9px !important; }
.btn-main:hover, .btn-main-color:hover{ color: #ffffff;  background: #1e7e34 !important;  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important; }


.plyr{  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.25); }

.hr-footer { border-top: 1px solid rgba(255,255,255,0.8); }

label{ font-size: 1rem; }
.form-control{  font-size: 1.25rem; }

.swal2-html-container{ }
.swal2-confirm{ background: #007a6e !important; }

#divTitle{ font-size: 1.2rem; line-height: 25px; font-weight: 600; }
#divTitleSub{ font-size: 1rem; font-weight: 300; }
.divTitle{ display: block; } .divTitle2{ display: none; } .divTitleSub{ display: block; } .divTitleSub2{ display: none; }

.flex-login{  }
.btn-mobile{ }
.div-btn-forgot-password{ margin-right: 15px; }
.jBox-title{ font-size: 1.4rem; }
.jBox-content{ font-size: 1rem; }
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm{ background-color: #007a6e !important;  }

.footer-cookie { position: fixed; z-index: 99999; bottom: 0; right: 0; width: 100%; height: auto; opacity: 0.95; padding: 10px 15px; color: #007a6e; background: #8cc6aa 0 0 no-repeat padding-box; font-size: 0.75em; border-top: 1px solid #007a6e; }
.footer-cookie-condition{}
.btn-footer-cookie{ color: #fff; background-color: #007a6e; border-color: #8cc6aa; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); border-radius: 8px; }
.btn-footer-cookie:hover{  color: #fff; background-color: #1e7e34; border-color: #cccccc; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3); }

.bottom-line{ padding-bottom: 8px; border-bottom: 1px solid #EEEEEE; }

.select2-container {  border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius);
    padding: .375rem 2.25rem .375rem .75rem; font-weight: 400; line-height: 1.5; width: 100% !important; }
.select2-container--default .select2-selection--single { border: 0 solid transparent; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { margin-left: -12px; margin-top: 3px; }
.select2-container--default .select2-selection--single .select2-selection__clear { height: 0; margin-right: 0; }
.select2-container .select2-selection--single .select2-selection__rendered { }

.form-control-preview{ padding: 0.35rem 0.5rem; font-size: 1.1rem; font-weight: 300; background-color: #EEEEEE; border: 1px solid #DDDDDD; border-radius: 10px; width: 100%; }
.form-control-preview-reserve{ padding: 0.375rem 0.75rem; font-size: 1.25rem; font-weight: 400; background-color: #EEEEEE; border: 1px solid #DDDDDD; border-radius: 0.375rem; width: 100%; }

.row-border{ border: 1px solid #E2E2E2; border-radius: 12px; }
.row-border .col-border-row{ padding: 15px 15px 15px 18px; min-height: 125px; }
.row-border .col-border-left-right{ border-left: 1px solid #E2E2E2; border-right: 1px solid #E2E2E2; }
.row-border .col-border-top{ border-top: 0 solid transparent; }
.row-border .col-border-bottom{ border-bottom: 1px solid #E2E2E2; }
.hr-tht{ display: none; }

.btn-training-register, .btn-training-register:hover, .btn-training-register:focus {
    padding: 8px 16px; color: #000!important; background: #F7F7F7; border: 1px solid #EBEBEB;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.14); border-radius: 8px; cursor: default;
}

.fc .fc-bg-event{ color: white !important; }
.fc-event-title{ color: #333333 !important; }
.fc-event .fc-event-main{ padding-left: 5px !important; }
.modal-title { font-size: 1.2rem;  font-weight: 600; }

.btn-border-danger, .btn-border-danger-disabled{  background-color: #ffffff !important;  color: #FF0000 !important;  border: 1px solid #FF0000 !important;  border-radius: 8px !important; }
.btn-border-danger:hover{  background-color: #FF0000 !important;  color: #ffffff !important; }

.btn-border-warning, .btn-border-warning-disabled{  background-color: #ffffff !important;  color: #fbab1e !important;  border: 1px solid #fbab1e !important;  border-radius: 8px !important; }
.btn-border-warning:hover{  background-color: #fbab1e !important;  color: #ffffff !important; }

.btn-border-gray{  background-color: #ffffff !important;  color: #666666 !important;  border: 1px solid #666666 !important;  border-radius: 8px !important; }
.btn-border-gray:hover{  background-color: #EEEEEE !important;  color: #000000 !important; }

.btn-border-blue{  background-color: #ffffff !important;  color: #008DC9 !important;  border: 1px solid #008DC9 !important;  border-radius: 8px !important; }
.btn-border-blue:hover{  background-color: #008DC9 !important;  color: #ffffff !important; }

.bd-callout { padding: 1rem; margin-top: 0.25rem; margin-bottom: 1.25rem; border: 1px solid #e9ecef; border-left-width: 1px;
    border-left-color: rgb(233, 236, 239); border-left-width: .25rem; border-radius: .25rem; }
.bd-callout-info { border-left-color: #5bc0de; }
.bd-callout-success { border-left-color: #007a6e;  background: #d4f3c0; color: #333333; text-align: left; font-size: 0.9rem; }

.fb-danger{ font-weight: 600; color: #FF0000 !important; }
.fb-warning{ font-weight: 600; color: orange !important; }
.fb-success{ font-weight: 600; color: darkgreen !important; }
.fb-secondary{ font-weight: 600; color: #666666 !important; }

@media only screen and (max-width: 1400px) {
    .nav-link{ font-size: 0.8rem; }
    .card-icon{ font-size: 3.5em; } .card-title{ font-size: 1.2rem; }
}
@media only screen and (max-width: 1320px) {
    .nav-padding{     padding-left: 45px;  padding-right: 70px; }
    .card-icon{ font-size: 3.5em; } .card-title{ font-size: 1.1rem; }
    #divTitle{ font-size: 1.1rem; } #divTitleSub{ font-size: 0.95rem;  }
    #navbar-main .nav-link{ font-size: 0.95rem;  }
    .navbar.sticky-top .navbar-collapse .nav-item { margin-left: 0.2rem; margin-right: 0.2rem; }
}
@media only screen and (max-width: 1224px) {
    .row-border .col-border-row{ padding: 15px 15px 15px 18px; min-height: 95px; }
    .row-border .col-border-left-right{ border-left: 0 solid transparent; border-right: 0 solid transparent; }
    .row-border .col-border-top{ border-top: 1px solid #E2E2E2; }
    .row-border .col-border-bottom{ border-bottom: 0 solid transparent; }
}
@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; }
    #divTitle{ font-size: 1.15rem; } #divTitleSub{ font-size: 0.95rem;  }
    #navbar-main .nav-link{ font-size: 0.95rem;  }
}
@media only screen and (max-width: 1170px) {
    .nav-link{ font-size: 14px; }
    .nav-padding{   padding-left: 20px;  padding-right: 20px; }
}
@media only screen and (max-width: 1120px) {
    .nav-link{ font-size: 13px; }  .card-purple, .card-disabled{ padding: 4px; }
    #divTitle{ font-size: 1rem; } #divTitleSub{ font-size: 0.9rem;  }
    #navbar-main .nav-link{ font-size: 0.9rem;  }
    .navbar.sticky-top .navbar-collapse .nav-item { margin-left: 0.15rem; margin-right: 0.15rem; }
}
@media only screen and (max-width: 1050px) {
    #divTitle{ font-size: 0.9rem; } #divTitleSub{ font-size: 0.8rem;  }
    #top-header {   padding-left: 0;   padding-right: 5px; }
    .nav-padding{     padding-left: 10px;  padding-right: 10px; }
    .card-purple, .card-disabled{ padding: 0; }
    #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: 1.2rem; } #divTitleSub{ font-size: 1rem;  }
    #navbar-main .nav-link{ font-size: 1.2rem;  }
    .navbar.sticky-top .navbar-collapse .nav-item{ padding-top: 0.8rem; padding-bottom: 0.2rem; }
    /*#divTitle{ font-size: 22px; } #divTitleSub{ font-size: 16px; }
    .navbar.sticky-top .navbar-collapse .nav-item{ padding-bottom: 5px; }*/
    .nav-padding{     padding-left: 30px;  padding-right: 15px; }
    .contact-group{ font-size: .9rem; }  .contact-group{ width: 100px; } .nav-text{ font-size: 14px; }
    .hr-tht{ display: block; }
}
@media only screen and (max-width: 800px) {
    .divTitle{ display: none; } .divTitle2{ display: block; } .divTitleSub{ display: none; } .divTitleSub2{ display: block; }
    #divTitle{ font-size: 1.5rem; } #divTitleSub{ font-size: 1.2rem;  }
}
@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; }
    .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; }
    .contact-group{ font-size: .65rem; } .contact-group{ width: 85px; } .nav-text{ font-size: 10px; }
    .flex-login{ display: flex; flex-direction: column; }
    .div-btn-forgot-password{ margin-right: 0; }
    .btn-mobile{ width: 100%; margin-bottom: 0.5rem; }
}