/* FONTFACE */
@font-face {
    font-family: 'kanitBlack';
    src: url('../fonts/kanit/kanit-black-webfont.woff2') format('woff2'),
         url('../fonts/kanit/kanit-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'kanitBlackItalic';
    src: url('../fonts/kanit/kanit-blackitalic-webfont.woff2') format('woff2'),
         url('../fonts/kanit/kanit-blackitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'kanitBold';
    src: url('../fonts/kanit/kanit-bold-webfont.woff2') format('woff2'),
         url('../fonts/kanit/kanit-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'kanitBoldItalic';
    src: url('../fonts/kanit/kanit-bolditalic-webfont.woff2') format('woff2'),
         url('../fonts/kanit/kanit-bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'kanitExtraBold';
    src: url('../fonts/kanit/kanit-extrabold-webfont.woff2') format('woff2'),
         url('../fonts/kanit/kanit-extrabold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'kanitExtraBoldItalic';
    src: url('../fonts/kanit/kanit-extrabolditalic-webfont.woff2') format('woff2'),
         url('../fonts/kanit/kanit-extrabolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'kanitExtraLight';
    src: url('../fonts/kanit/kanit-extralight-webfont.woff2') format('woff2'),
         url('../fonts/kanit/kanit-extralight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'kanitExtraLightItalic';
    src: url('../fonts/kanit/kanit-extralightitalic-webfont.woff2') format('woff2'),
         url('../fonts/kanit/kanit-extralightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'kanitItalic';
    src: url('../fonts/kanit/kanit-italic-webfont.woff2') format('woff2'),
         url('../fonts/kanit/kanit-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'kanitLight';
    src: url('../fonts/kanit/kanit-light-webfont.woff2') format('woff2'),
         url('../fonts/kanit/kanit-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'kanitLightItalic';
    src: url('../fonts/kanit/kanit-lightitalic-webfont.woff2') format('woff2'),
         url('../fonts/kanit/kanit-lightitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'kanitMedium';
    src: url('../fonts/kanit/kanit-medium-webfont.woff2') format('woff2'),
         url('../fonts/kanit/kanit-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'kanitMediumItalic';
    src: url('../fonts/kanit/kanit-mediumitalic-webfont.woff2') format('woff2'),
         url('../fonts/kanit/kanit-mediumitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'kanitRegular';
    src: url('../fonts/kanit/kanit-regular-webfont.woff2') format('woff2'),
         url('../fonts/kanit/kanit-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'kanitSemiBold';
    src: url('../fonts/kanit/kanit-semibold-webfont.woff2') format('woff2'),
         url('../fonts/kanit/kanit-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'kanitSemiboldItalic';
    src: url('../fonts/kanit/kanit-semibolditalic-webfont.woff2') format('woff2'),
         url('../fonts/kanit/kanit-semibolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'kanitThin';
    src: url('../fonts/kanit/kanit-thin-webfont.woff2') format('woff2'),
         url('../fonts/kanit/kanit-thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'kanitThinItalic';
    src: url('../fonts/kanit/kanit-thinitalic-webfont.woff2') format('woff2'),
         url('../fonts/kanit/kanit-thinitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* FONTFACE */

/* VARIABLE */
:root {
    --font-size-custom: 0px;
}
/* VARIABLE */

/* A */
a {
  color: #16142A;
}

a:hover, a:focus {
  text-decoration: underline;
  color: #16142A;
}
/* A */

/*button*/
.btn {
  font-family: 'kanitRegular';
}
/*button*/


/* HEARDER */
.blockHeader {
  background-color: #ffffff;
  position: relative;
}

.blockHeaderIndex {
  background: rgb(212,226,244);
  background: linear-gradient(180deg, rgba(212,226,244,0.5) 50%, rgba(238,168,73,0.5) 100%);
  width: 100%;
  height: 550px;
  position: relative;
}

.blockHeaderIndex .navbarSbs {
  padding: 20px 0px;
}

.navbarSbs {
  font-family: 'kanitLight';
  padding: 5px 0px;
}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(238, 117, 35, 1)' stroke-width='4' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");

}

.inputPage {
  width: 50px;
}

.divPageSearch {
  float: right;
  margin-bottom: 20px;
}

.btnChangePageSearch {
  color: #FFFF;
}

.custom-toggler.navbar-toggler {
  border-color: transparent;
  margin-left: auto;
  margin-bottom: 15px;
}

.blockLanguage {
  padding: 4px 5px;
  height: 100%;
}

.navbarSbs .nav-item {
  background-color: transparent;
  padding: 4px 5px;
  height: 100%;
  border-radius: 3px;
  margin-right: 35px;
}

.navbarSbs .nav-item a {
  font-size: calc(15px + var(--font-size-custom));
}

.navbarSbs .nav-item.active a {
  color: #EE7523;
}

.aLanguage {
  padding: 2px 5px;
  font-size: calc(16px + var(--font-size-custom));
}

.aLanguage:hover, .aLanguage:focus {
  text-decoration: underline;
}

.activeLanguage {
  color: #EE7523;
}

.logoWeb {
  width: 200px;
}

.blockAssessment {
  margin-left: 70px;
  margin-top: 35px;
}

.textAssessmentTop {
  color: #EE7523;
  font-size: calc(40px + var(--font-size-custom));
  font-family: 'kanitMedium';
}

.textAssessmentMiddle {
  color: #1A3A64;
  font-size: calc(34px + var(--font-size-custom));
  font-family: 'kanitMedium';
  margin-top: -10px;
}

.textAssessmentBottom {
  color: #1A3A64;
  font-size: calc(34px + var(--font-size-custom));
  font-family: 'kanitMedium';
  margin-top: -4px;
}

.blockBtnAssessment {
  margin-top: 20px;
}

.btnAssessment {
  font-family: 'kanitExtraLight';
  background: rgb(255,201,86);
  background: linear-gradient(90deg, rgba(255,201,86,1) 0%, rgba(238,133,34,1) 100%);
  border-radius: 30px;
  border:none;
  padding: 4px 40px;
  font-size: calc(26px + var(--font-size-custom));
  color: #ffffff;
}

.blockHeaderIndex .bgPeople {
  background-image: url('../images/pic_banner.png');
  height: 500px;
  position: absolute;
  right: 80px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 400px;
  background-position: top;
  top: -10px;
}
/* HEARDER */

/* NAVIGATOR */
.blockNavigator {
  margin: 20px 0px;
  font-family: 'kanitLight';
  font-size: calc(16px + var(--font-size-custom));
}

.blockNavigator span::after {
  content: '/';
  font-size: calc(20px + var(--font-size-custom));
  color: #183965;
}

.blockNavigator > a {
  color: #183965;
}

.blockNavigator > a.active {
  color: #F07507;
  cursor: default;
}

.blockNavigator > a.active:hover, .blockNavigator > a.active:focus {
  text-decoration: none;
}
/* NAVIGATOR */

/* MAIN */
main {
  position: relative;
}
/* MAIN */

/* BODY */
body {
  font-family: 'kanitRegular';
  font-size: calc(14px + var(--font-size-custom));
  background-color: #ffffff;
  color: #16142A;
}
/* BODY */

/* BLOCK INDUSTRY */
.blockIndustry {
  padding: 30px 0px 20px;
  background-color: #ffffff;
  margin-bottom: 30px;
}

.blockSubjectIndustry  {
  color: #EE7523;
  border-left: 5px solid #1A3A64;
  padding-left: 10px;
  font-size: calc(26px + var(--font-size-custom));
  font-family: 'kanitMedium';
}

.blockIndustryData {
  margin-top: 40px;
}

.blockIndustryImg {
  height: 120px;
  margin-bottom: 10px;
  position: relative;
}

.blockIndustryImgData {
  width: 120px;
  text-align: center;
  margin: 0 auto;
  background-color: rgb(255 201 86 / .15);
  border-radius: 50%;
  height: 120px;
  position: relative;
  transition: all .3s cubic-bezier(0.175, 0.885, 0, 1);
}

.blockIndustryImgData > img {
  width: 50px !important;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  max-width: 100% !important;
  max-height: 100% !important;
}

.textDataIndustry {
  font-size: calc(16px + var(--font-size-custom));
  font-family: 'kanitRegular';
  color: #1A3A64;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
  margin-left: auto;
  margin-right: auto;
}

.blockIndustryData:hover a {
  text-decoration: none;
}

.blockIndustryData a:hover .textDataIndustry {
  color: #EE8522;
  text-decoration: none;
}

.blockIndustryData a:hover .blockIndustryImg {
  padding-top: 30px;
}

.blockIndustryData a:hover .blockIndustryImgData {
  width: 80px !important;
  height: 80px;
}

.carouselIndustry .owl-nav {
    position: absolute;
    top: 0px;
    z-index: 2;
    width: 100%;
    top: 50%;
    margin-top: 0px;
}

.carouselIndustry .owl-prev {
    position: absolute;
    left: -15px;
    top: 40%;
    cursor: pointer;
    background-color: rgb(255 201 74 / .15) !important;
    color: #EF7507 !important;
    padding: 25px 5px 25px 5px !important;
    margin: 0px !important;
}

.carouselIndustry .owl-next {
    position: absolute;
    right: -15px;
    top: 40%;
    cursor: pointer;
    background-color: rgb(255 201 74 / .15) !important;
    color: #EF7507 !important;
    padding: 25px 5px 25px 5px !important;
    margin: 0px !important;
}

.carouselIndustry .owl-prev i, .carouselIndustry .owl-next i{
  font-size: 26px;
}

.carouselIndustry .owl-nav [class*='owl-']:hover {
    background: transparent;
    color: #7373B5;
    text-decoration: none;
}

.carouselIndustry .owl-dots {
  position: absolute;
  left: 50%;
  transform: translate(-50%,0);
  margin-top: 15px;
}

.carouselIndustry .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #FABA3A;
}

.carouselIndustry .owl-dots .owl-dot span {
    width: 30px;
    height: 15px;
    margin: 0px;
    background: #D6D6D6;
    transition: opacity 200ms ease;
    border-radius: 0px;
}

.carouselIndustry .owl-next.disabled, .carouselIndustry .owl-prev.disabled {
    background-color: #777777 !important;
    color: #183965 !important;
}
/* BLOCK INDUSTRY */

/* BLOCK RECOMMENDED COURSE */
.blockRecommendedCourse {
  background-image: url('../images/middle_BG2.jpg');
  height: 530px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 30px 0px 50px;
  position: relative;
  background-attachment: fixed;
}

.blockSubjectRecommendedCourse {
  color: #ffffff;
  border-left: 5px solid #1A3A64;
  padding-left: 10px;
  font-size: calc(26px + var(--font-size-custom));
  font-family: 'kanitMedium';
  margin-bottom: 25px;
}

.cardImg {
  width: 100%;
  height: 235px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.cardImg > img {
  height: 215px;
}

.cardInfoHover {
  position: absolute;
  padding: 16px;
  width: 100%;
  opacity: 0;
  top: 0;
  transform: translateY(-100%);
  transition: all 0.30s ease 0s;
}

.cardSbs {
  transition: all .4s cubic-bezier(0.175, 0.885, 0, 1);
  background-color: #fff;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0px 1px 12px -2px rgb(0 0 0 / 80%);
}


.cardInfo {
  z-index: 2;
  background-color: #fff;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  padding: 0px 24px 10px 24px;
}


.cardTitle {
  color: #16142A;
  font-family: 'kanitLight';
  margin-top: 0px;
  margin-bottom: 5px;
  font-size: calc(20px + var(--font-size-custom));
  height: calc(52px + (calc(var(--font-size-custom) * 4)));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3em;
}

.cardInstitution {
  color: #939393;
  font-family: 'kanitLight';
  font-size: calc(16px + var(--font-size-custom));
}

.cardInstitution div:last-child {
  margin-top: -5px;
}

.cardBy {
  position: relative;
  margin-top: 15px;
}

.cardBy > img {
  width: 20px !important;
}

.cardTime {
  font-family: 'kanitLight';
  color: #f07507;
  font-size: calc(14px + var(--font-size-custom));
  position: absolute;
  left: 25px;
  bottom: 0px;
  margin-bottom: 0px;
}

.cardSbs:hover .cardImgHover {
    height: 100%;
    opacity: 0.3;
}

.cardSbs:hover .cardInfo {
    background-color: transparent;
    position: relative;
}

.cardSbs:hover .cardInfoHover {
    opacity: 1;
    z-index: 10;
    height: 100%;
    background-color: rgb(32 49 67 / .2);
    transform: translateY(0%);
}

.blockLinkNews {
  position: absolute;
  left: 50%;
  top: 215px;
  transform: translate(-50%,-50%);
}

.btnOrage {
  padding: 4px 30px;
  border-radius: 40px;
  background-color: #EE8522;
  color: #ffffff;
  font-family: 'kanitLight';
  font-size: calc(18px + var(--font-size-custom));
}

.btnOrage:hover, .btnOrage:focus {
  color: #ffffff;
  text-decoration: underline;
}

.btnOrageSearch {
  padding: 4px 20px;
  border-radius: 40px;
  background-color: #EE8522;
  color: #ffffff;
  font-family: 'kanitLight';
  font-size: calc(15px + var(--font-size-custom));
}

.btnOrageSearch:hover, .btnOrageSearch:focus {
  color: #ffffff;
  text-decoration: underline;
}

.carouselRecommendedCourse .owl-item {
  padding: 10px 15px;
}

.carouselRecommendedCourse .owl-nav {
    position: absolute;
    top: 0px;
    z-index: 2;
    width: 100%;
    top: 49%;
}

.carouselRecommendedCourse .owl-prev {
    position: absolute;
    left: -12px;
    top: 40%;
    cursor: pointer;
    background: rgb(255,201,86);
    background: -webkit-linear-gradient(left, rgba(255,201,86,1) 0%, rgba(238,133,34,1) 100%) !important;
    background: -o-linear-gradient(left, rgba(255,201,86,1) 0%, rgba(238,133,34,1) 100%) !important;
    background: linear-gradient(to right, rgba(255,201,86,1) 0%, rgba(238,133,34,1) 100%) !important;
    color: #ffffff !important;
    border-radius: 50px;
    padding: 7px 10px 4px 7px !important;
}

.carouselRecommendedCourse .owl-next {
    position: absolute;
    right: -12px;
    top: 40%;
    cursor: pointer;
    background: rgb(255,201,86);
    background: -webkit-linear-gradient(left, rgba(255,201,86,1) 0%, rgba(238,133,34,1) 100%) !important;
    background: -o-linear-gradient(left, rgba(255,201,86,1) 0%, rgba(238,133,34,1) 100%) !important;
    background: linear-gradient(to right, rgba(255,201,86,1) 0%, rgba(238,133,34,1) 100%) !important;
    color: #ffffff !important;
    border-radius: 50px;
    padding: 7px 7px 4px 10px !important;
}

.carouselRecommendedCourse .owl-prev i, .carouselRecommendedCourse .owl-next i{
  font-size: 32px;
}

.carouselRecommendedCourse .owl-nav [class*='owl-']:hover {
    background: transparent;
    color: #7373B5;
    text-decoration: none;
}

.carouselRecommendedCourse .owl-next.disabled, .carouselRecommendedCourse .owl-prev.disabled {
    opacity: 0;
}

.block-course-detail {
    height: calc(50px + (calc(var(--font-size-custom) * 4)));
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.divOneLine {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* BLOCK RECOMMENDED COURSE */

/* PAGE INDUSTRY */
.blockContentIndustry {
  padding: 40px 60px;
}

.cardIndustry {
  border-radius: 20px;
  border:none;
}

.cardHeaderIndustry {
  border-radius: 20px 20px 0px 0px !important;
  background: rgb(255,201,74);
  background: -webkit-linear-gradient(left, rgba(255,201,74,1) 0%, rgba(239,132,0,1) 100%);
  background: -o-linear-gradient(left, rgba(255,201,74,1) 0%, rgba(239,132,0,1) 100%);
  background: linear-gradient(to right, rgba(255,201,74,1) 0%, rgba(239,132,0,1) 100%);
  border: none;
  position: relative;
  padding: 10px 20px;
}

.cardHeaderIndustryLogo {
  float: left;
  position: relative;
  width: 100px;
  margin-right: 20px;
  margin-left: 5px;
  margin-top: 5px;
}

.cardHeaderIndustryLogoData {
  background-color: #ffffff;
  padding: 15px;
  border-radius: 50%;
  position: absolute;
  border: 10px solid #F28500;
  top: -39px;
}

.cardHeaderIndustryText {
  font-family: 'kanitMedium';
  color: #ffffff;
  font-size: calc(24px + var(--font-size-custom));
}

.cardIndustryContent {
  font-family: 'kanitLight';
  font-size: calc(16px + var(--font-size-custom));
  background-color: #E7E7E8;
  padding: 25px 15px 20px 45px;
  border-radius: 0px 0px 20px 20px;
}

.cardBottom {
  margin-top: 30px;
  background-color: rgb(246 201 127 / .65);
  border-radius: 20px;
  padding: 20px 15px 25px 30px;
}


.cardBottomHeader {
  font-family: 'kanitMedium';
  font-size: calc(24px + var(--font-size-custom));
  background: rgb(255,201,74);
  background: linear-gradient(90deg, rgba(255,201,74,1) 0%, rgba(239,132,0,1) 100%);
  width: fit-content;
  margin-left: -30px;
  border-radius: 0px 20px 20px 0px;
  color: #ffffff;
  padding: 3px 30px 3px 20px;
  box-shadow: 0px 5px 15px -6px rgb(206 170 92);
}

.cardBottomContentBlock {
  margin-top: 15px;
}

.cardBottomTextIcon {
  color: #16122C;
  font-size: calc(16px + var(--font-size-custom));
  margin-top: 10px;
  margin-left: 50px;
  position: relative;
}

.cardBottomTextIcon::before {
  content: '\f054';
  font-family: 'FontAwesome';
  position: absolute;
  left: -35px;
  background-color: #F28500;
  border-radius: 50%;
  /* padding: 1px 7px 1px 9px; */
  padding: 4px 7px 3px 8px;
  color: #ffffff;
  font-size: calc(10px + var(--font-size-custom));
}
/* PAGE INDUSTRY */

/* PAGE About Us */
  .blockContentAboutUs {
    padding: 40px 60px;
  }
  .cardHeaderAboutUsText {
    font-family: 'kanitMedium';
    color: #ffffff;
    font-size: calc(24px + var(--font-size-custom));
  }
  .cardAboutUs {
      border-radius: 20px;
      border: none;
  }
  .cardHeaderAboutUs {
      border-radius: 20px 20px 0px 0px !important;
      background: rgb(255,201,74);
      background: -webkit-linear-gradient(left, rgba(255,201,74,1) 0%, rgba(239,132,0,1) 100%);
      background: -o-linear-gradient(left, rgba(255,201,74,1) 0%, rgba(239,132,0,1) 100%);
      background: linear-gradient(to right, rgba(255,201,74,1) 0%, rgba(239,132,0,1) 100%);
      border: none;
      position: relative;
      padding: 10px 20px;
  }
  .cardAboutUsContent {
      font-family: 'kanitLight';
      font-size: calc(16px + var(--font-size-custom));
      background-color: #E7E7E8;
      padding: 25px 45px 20px 45px;
      border-radius: 0px 0px 20px 20px;
  }
/* PAGE About Us */

/* PAGE Contact */
  .blockContentContact {
    padding: 40px 60px;
  }
  .cardHeaderContactText {
    font-family: 'kanitMedium';
    color: #ffffff;
    font-size: calc(24px + var(--font-size-custom));
  }
  .cardContact {
      border-radius: 20px;
      border: none;
  }
  .cardHeaderContact {
      border-radius: 20px 20px 0px 0px !important;
      background: rgb(255,201,74);
      background: -webkit-linear-gradient(left, rgba(255,201,74,1) 0%, rgba(239,132,0,1) 100%);
      background: -o-linear-gradient(left, rgba(255,201,74,1) 0%, rgba(239,132,0,1) 100%);
      background: linear-gradient(to right, rgba(255,201,74,1) 0%, rgba(239,132,0,1) 100%);
      border: none;
      position: relative;
      padding: 10px 20px;
  }
  .cardContactContent {
      font-family: 'kanitLight';
      font-size: calc(16px + var(--font-size-custom));
      background-color: #E7E7E8;
      padding: 25px 45px 20px 45px;
      border-radius: 0px 0px 20px 20px;
  }
/* PAGE Contact */

/* PAGE SEARCH */
.blockFilter {
  background-color: #FFFFFF;
  border-radius: 15px;
  padding: 15px;
  box-shadow: 0px 0px 8px 0px rgb(0 0 0 / 18%);
  margin-bottom: 30px;
}

.filterHeader {
  font-family: 'kanitMediumItalic';
  font-size: calc(20px + var(--font-size-custom));
  color: #16132B;
  padding: 0px 5px 0px 15px;
}

.filterHeader a {
  cursor: pointer;
}

.filterHeader a i{
  font-size: calc(16px + var(--font-size-custom));
}

.blockFilterData {
  margin-top: 5px;
}

.filterCheckbox {
  display: block;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: calc(16px + var(--font-size-custom));
  padding: 5px 5px 5px 40px;
  border-radius: 5px;
  margin-bottom: 5px;
}

.filterCheckbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.afterFilterCheckbox {
  position: absolute;
  top: 12px;
  left: 16px;
  height: 11px;
  width: 11px;
  background-color: rgb(94 94 94 / .15);
  border-radius: 50%;
}

.textFilterCheckbox {
  color: #183965;
  word-break: break-all;
}

.filterCheckbox:hover, .filterCheckbox.active {
  background-color: rgb(240 117 7 / .1);
}

.filterCheckbox:hover input ~ .afterFilterCheckbox {
  background-color: #F07507;
}

.filterCheckbox:hover input ~ .textFilterCheckbox {
  color: #F07507;
}

.filterCheckbox input:checked ~ .afterFilterCheckbox {
  background-color: #F07507;
}

.filterCheckbox input:checked ~ .textFilterCheckbox {
  color: #F07507;
}

.afterfilterCheckbox:after {
  content: "";
  position: absolute;
  display: none;
}

.filterCheckbox input:checked ~ .afterFilterCheckbox:after {
  display: block;
}

.filterCheckbox .afterFilterCheckbox:after {
  top: 12px;
  left: 16px;
  width: 0px;
  height: 0px;
  border-radius: 50%;
  background: white;
}

.blockSearchInput .input-group {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 3px 4px 5px 0px rgb(0 0 0 / 19%);
  border-radius: 20px;
}

.blockSearchInput .input-group > .form-control {
  border-radius: 20px 0px 0px 20px;
  background-color: rgb(228 228 228 / .5);
  border:none;
  font-family: 'kanitLight';
  font-size: calc(16px + var(--font-size-custom));
  padding-left: 20px;
  height: 50px;
}

.blockSearchInput .input-group > .form-control::-webkit-input-placeholder {
  color: #C6C6C6;
}

.blockSearchInput .input-group > .form-control:-ms-input-placeholder {
  color: #C6C6C6;
}

.blockSearchInput .input-group > .form-control::placeholder {
  color: #C6C6C6;
}

.groupPerpendSbs {
  background: rgb(255,201,74);
  background: -webkit-linear-gradient(left, rgba(255,201,74,1) 0%, rgba(239,132,0,1) 100%);
  background: -o-linear-gradient(left, rgba(255,201,74,1) 0%, rgba(239,132,0,1) 100%);
  background: linear-gradient(to right, rgba(255,201,74,1) 0%, rgba(239,132,0,1) 100%);
  border-radius: 0px 20px 20px 0px;
  border: none;
}

.groupPerpendSbs > .input-group-text {
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.groupPerpendSbs > .input-group-text > button {
  background-color: transparent;
  color: #ffffff;
  border:none;
  font-size: calc(16px + var(--font-size-custom));
}

.groupPerpendSbs > .input-group-text > button > i {
  font-size: calc(16px + var(--font-size-custom));
}

.blockGrid {
  --color: #FFFFFF;
  --background: #F08500;
  --background-hover: #da7c0dcf;
  --icon-color: #fde7ca;
  padding: 6px 12px 6px 12px;
  margin: 0;
  display: flex;
  outline: none;
  position: relative;
  border: none;
  border-radius: 5px;
  background: var(--b, var(--background));
  cursor: pointer;
  -webkit-appearence: none;
  -webkit-tap-highlight-color: transparent;
  transform: scale(var(--scale, 1)) translateZ(0);
  transition: transform 0.15s, background 0.4s;
}

.blockGrid:active {
  --scale: 0.95;
}

.blockGrid:hover   {
--b: var(--background-hover);
}

.blockGrid.without-text {
  --background: #275efe;
  --background-hover: #1548db;
  --icon-color: #fff;
  padding: 6px;
}

.blockGrid .iconGrid {
  width: 24px;
  height: 24px;
  position: relative;
}

.blockGrid .iconGrid i {
  position: absolute;
  left: var(--left, 4px);
  top: var(--top, 4px);
  display: block;
  border-radius: 2px;
  width: var(--width, 7px);
  height: var(--height, 7px);
  background: var(--icon-color);
  animation: var(--name, var(--dots-name, none)) var(--duration, var(--dots-duration, 0.5s)) var(--easing, var(--dots-easing, linear)) forwards var(--delay, var(--dots-delay, 0s));
}

.blockGrid .iconGrid .dots i:nth-child(1) {
  --x-middle: -8px;
  --y-middle: 10px;
  --x-end: -2px;
  --y-end: 12px;
  --x-back: 10px;
  --y-back: 7px;
  --x-back-end: 9px;
  --y-back-end: 0;
}
.blockGrid .iconGrid .dots i:nth-child(2) {
  --left: 13px;
  --x-middle: -12px;
  --y-middle: 5px;
  --x-end: -11px;
  --y-end: 7px;
  --x-back: -3px;
  --y-back: 1px;
  --x-back-end: -9px;
  --y-back-end: 0;
}

.blockGrid .iconGrid .dots i:nth-child(3) {
  --top: 13px;
  --x-middle: 4px;
  --y-middle: -5px;
  --x-end: -2px;
  --y-end: -7px;
  --x-back: -5px;
  --y-back: 0px;
  --x-back-end: 9px;
  --y-back-end: 0;
}

.blockGrid .iconGrid .dots i:nth-child(4) {
  --left: 13px;
  --top: 13px;
  --x-middle: 0;
  --y-middle: -10px;
  --x-end: -11px;
  --y-end: -12px;
  --x-back: -14px;
  --y-back: -8px;
  --x-back-end: -9px;
  --y-back-end: 0;
}

.blockGrid .iconGrid .lines {
  --name: var(--lines-name, none);
  --duration: var(--lines-duration, 0.15s);
  --easing: var(--lines-easing, linear);
  --delay: var(--lines-delay, 0s);
}

.blockGrid .iconGrid .lines i {
  --left: 9px;
  --top: 3px;
  --height: 2px;
  --width: 11px;
  transform: translateY(20%) translateZ(0) scaleX(0);
}

.blockGrid .iconGrid .lines i:nth-child(2) {
  --top: 8px;
}

.blockGrid .iconGrid .lines i:nth-child(3) {
  --top: 13px;
}

.blockGrid .iconGrid .lines i:nth-child(4) {
  --top: 18px;
}

.blockGrid .text {
  margin-left: 4px;
  position: relative;
  line-height: 24px;
  font-weight: 600;
  font-size: 14px;
  min-width: 28px;
  color: var(--color);
  font-family: 'kanitRegular';
  font-size: calc(16px + var(--font-size-custom));
}

.blockGrid .text span {
  --y-default: 0;
  --o-default: 1;
  --y-active: -12px;
  --o-active: 0;
  display: block;
  opacity: var(--o-default);
  transform: translateY(var(--y-default)) translateZ(0);
  animation: var(--span-name, none) 0.4s ease forwards;
}

.blockGrid .text span:last-child {
  --y-default: 12px;
  --o-default: 0;
  --y-active: 0;
  --o-active: 1;
  position: absolute;
  left: 0;
  top: 0;
}

.blockGrid.animation {
  --span-name: text  ;
  --dots-name: ba  ck;
  --lines-name: scale-down;
}

.blockGrid.animation .lines i {
  transform-origin: 0 50%;
}

.blockGrid.animation .lines i:nth-child(3), .blockGrid.animation .lines i:nth-child(4) {
  transform-origin: 100% 50%;
}

.blockGrid.animation.active {
  --span-name: text-active;
  --dots-name: move;
  --lines-name: scale;
  --lines-duration: 0.15s;
  --lines-delay: 0.3s;
}

.blockGrid.animation.active .lines i {
  transform-origin: 100% 50%;
}

.blockGrid.animation.active .lines i:nth-child(3), .blockGrid.animation.active .lines i:nth-child(4) {
  transform-origin: 0 50%;
}

.blockSearchDataList {
  margin-top: 25px;
}

.blockSearchDataList .blockSearchData {
  background-color: #ffffff;
  margin-bottom: 20px;
  border-radius: 10px;
  height: 100%;
  display: inline-table;
  width: 100%;
}

.blockSearchDataList .blockSearchData .blockSearchDataLeft {
  width: 40%;
  border-radius: 10px 0px 0px 10px;
  float: left;
}

.blockSearchDataList .blockSearchData .blockSearchDataLeft img {
  border-radius: 10px 0px 0px 10px;
  width: 100%;
  height: 175px;
}

.blockSearchDataList .blockSearchData .blockSearchDataRight {
  width: 55%;
  height: 175px;
  border-radius: 0px 10px 10px 0px;
  float: left;
  position: relative;
}

.blockSearchDataList .blockSearchData .blockSearchDataRight .blockSearchDataContent {
  padding: 15px 30px;
}

.blockSearchDataList .blockSearchData .blockSearchDataRight .blockSearchDataContent .textBottom {
  position: absolute;
  bottom: 9px;
}

.blockSearchDataList .blockSearchData .blockSearchDataRight .blockSearchDataContent .btnRight {
  position: absolute;
  right: 20px;
  bottom: 17px;
}

.blockSearchDataList .blockSearchData .blockSearchDataRight .blockSearchDataContent .textBottom > img {
  width: 20px !important;
}

.blockSearchDataList .blockSearchData .blockSearchDataRight .blockSearchDataContent .textBottom > label {
  color: #F07507;
  font-family: 'kanitLight';
  font-size: calc(14px + var(--font-size-custom));
}

.blockSearchDataList .blockSearchData .blockSearchDataRight .blockSearchDataContent .byInstitution {
  color: #939393;
  font-family: 'kanitLight';
  font-size: calc(16px + var(--font-size-custom));
}

.blockSearchDataList .blockSearchData .blockSearchDataRight .blockSearchDataContent .byInstitution div:last-child {
  margin-top: -3px;
}

.blockSearchDataList .blockSearchData .blockSearchDataRight .blockSearchDataContent .bySubject {
  font-family: 'kanitLight';
  color: #16142A;
  font-size: calc(22px + var(--font-size-custom));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3em;
  height: calc(58px + (calc(var(--font-size-custom) * 4)));
}

.blockSearchDataGrid {
  margin-top: 25px;
  display: none;
}

.blockSearchDataGrid .blockSearchData {
  background-color: #ffffff;
  border-radius: 10px;
}

.blockSearchDataImg img {
  border-radius: 10px 10px 0px 0px;
  height: 195px;
  width: 100%;
}

.blockSearchData .blockSearchDataText .blockSearchDataContent {
  padding: 8px 10px;
}


.blockSearchData .blockSearchDataText .blockSearchDataContent .bySubject {
  font-family: 'kanitLight';
  font-size: calc(20px + var(--font-size-custom));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.2em;
  height: calc(52px + (calc(var(--font-size-custom) * 4)));
  margin-bottom: 5px;
}


.blockSearchData .blockSearchDataText .blockSearchDataContent .textBottom > img {
  width: 16px !important;
  margin-top: 2px;
}

.blockSearchData .blockSearchDataText .blockSearchDataContent .textBottom > label {
  color: #F07507;
  font-family: 'kanitLight';
  font-size: calc(12px + var(--font-size-custom));
  margin-bottom: 0px;
}

.blockSearchData .blockSearchDataText .blockSearchDataContent .byInstitution {
  color: #939393;
  font-family: 'kanitLight';
  font-size: calc(14px + var(--font-size-custom));
}

.blockSearchDataText .blockSearchDataContent .byInstitution div:last-child {
  margin-top: -3px;
}

#filter-control {
    position: sticky;
    position: -webkit-sticky;
    bottom: 0;
    margin: 20px auto;
    padding: 11px 8px 8px;
    text-align: center;
    width: 100%;
    transition: background-color .3s;
    z-index: 100;
}

#filter-control.sticky-bg {
    background-color: rgba(0, 0, 0, 0.6);
}

.btnFilter {
    background-color: #94C61F;
    color: #FFFFFF;
    border-color: #94C61F;
}

.btnFilter:hover, .btnFilter:focus {
    background-color: #FFFFFF;
    color: #94C61F !important;
    border-color: #94C61F;
}

.btnNoneFilter {
    background-color: #dc3545;
    color: #FFFFFF;
    border-color: #dc3545;
}

.btnNoneFilter:hover, .btnNoneFilter:focus {
    background-color: #FFFFFF;
    color: #dc3545 !important;
    border-color: #dc3545;
}

/* PAGE SEARCH */

/* PAGE EVALUATION */
.blockEvaluationHeader {
  background-color: #ffffff;
  padding: 20px 45px 25px;
  margin-top: 45px;
  position: relative;
}

.bgEvaluationHeader {
  background-image: url('../images/pic_banner2.png');
  height: 200px;
  position: absolute;
  right: 0px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 400px;
  background-position: top;
  top:-38px;
}

.blockEvaluationHeader .subjectMain {
  font-family: 'kanitMedium';
  font-size: calc(36px + var(--font-size-custom));
  color: #EF7507;
}

.blockEvaluationHeader .subjectBottom, .blockEvaluationHeader .subjectMiddle {
  font-family: 'kanitMedium';
  font-size: calc(26px + var(--font-size-custom));
  color: #183965;
  margin-top: -5px;
}

.blockEvaluationHeader .subjectMiddle {
  margin-top: -10px;
}

.blockEvaluationData {
  margin-top: 30px;
  background-color: #ffffff;
  padding: 10px 45px 20px;
  margin-bottom: 30px;
}

.evaluationText {
  color: #183965;
  font-family: 'kanitRegular';
  font-size: calc(18px + var(--font-size-custom));
}

.evaluationSubject {
  color: #183965;
  font-family: 'kanitRegular';
  font-size: calc(22px + var(--font-size-custom));
}

.borderEvaluationSubject {
  border-bottom: 1px solid #e3e3e3;
  padding-bottom: 5px;
}

.blockEvaluationValue {
  padding: 10px 30px 0px;
}

.blockEvaluationCapacity {
  padding: 10px 0px;
}

.checkboxInline {
  display: inline-flex;
}

.tgl {
	 display: none;
}

.tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn {
	 box-sizing: border-box;
}

.tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection,.tgl *:before::selection, .tgl + .tgl-btn::selection {
	 background: none;
}

 .tgl + .tgl-btn {
	 outline: 0;
	 display: block;
	 width: 4em;
	 height: 2em;
	 position: relative;
	 cursor: pointer;
	 user-select: none;
}
.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {
	 position: relative;
	 display: block;
	 content: "";
	 width: 50%;
	 height: 100%;
}

.tgl + .tgl-btn:after {
	 left: 0;
}

.tgl + .tgl-btn:before {
	 display: none;
}

.tgl:checked + .tgl-btn:after {
	 left: 50%;
}


.tgl-flat + .tgl-btn {
	 padding: 2px;
	 transition: all 0.2s ease;
	 background: #fff;
	 border: 4px solid #f2f2f2;
	 border-radius: 2em;
   float: left;
   -ms-flex: 0 0 60px;
   flex: 0 0 60px;
}

.tgl-flat + .tgl-btn:after {
	 transition: all 0.2s ease;
	 background: #f2f2f2;
	 content: "";
	 border-radius: 1em;
}

.tgl-flat:checked + .tgl-btn {
	 border: 4px solid #7fc6a6;
}

.tgl-flat:checked + .tgl-btn:after {
	 left: 50%;
	 background: #7fc6a6;
}

.tgl-text {
  float: left;
  margin-top: 2px;
  margin-left: 15px;
  color: #1A3A64;
  font-family: 'kanitLight';
  font-size: calc(16px + var(--font-size-custom));
  -ms-flex: 0 0 80%;
  flex: 0 0 80%;
  cursor: pointer;
  max-width: 80%;
}

.textCapacity {
  color: #183965;
  font-family: 'kanitRegular';
  font-size: calc(18px + var(--font-size-custom));
}

.textCapacity a {
  cursor: pointer;
}


.blockBtnStep {
  width: 100%;
  display:inline-block;
  margin-top: 15px;
}

.blockBtnStepPrev {
  float: right;
  margin-right: 30px;
}

.blockBtnStepNext {
  /* margin-left: auto; */
  float: right;

}


.btnAssessmentStep {
  font-family: 'kanitExtraLight';
  background: rgb(255,201,86);
  background: linear-gradient(90deg, rgba(255,201,86,1) 0%, rgba(238,133,34,1) 100%);
  border-radius: 30px;
  border:none;
  padding: 4px 40px;
  font-size: calc(18px + var(--font-size-custom));
  color: #ffffff;
}

.blockWizardScript {
  display: inline-block;
  width: 100%;
  text-align: center;
  counter-reset: css-counter 0;
  margin-bottom: 20px;
}

.blockWizardScript li {
  display: inline-block;
  padding-top: 65px;
  font-size: 16px;
  line-height: 16px;
  color: #163866;
  vertical-align: top;
  position: relative;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 20%;
  font-family: 'kanitRegular';
  counter-increment: css-counter 1;
}

.blockWizardScript li:before {
    content: counter(css-counter);
    position: absolute;
    top: 10px;
    left: calc(50% - 25px);
    z-index: 1;
    width: 45px;
    height: 45px;
    color: white;
    border: 2px solid white;
    border-radius: 35px;
    line-height: 42px;
    background: gray;
}

.statusWizard {
    height: 3px;
    background-color: #163866;
    position: relative;
    top: 50px;
    margin: 0 auto;
    width: 60%;
}

.currentWizard {
    height: 3px;
    border-radius: 1px;
    background: linear-gradient(90deg, rgba(255,201,58,1) 0%, rgba(240,131,0,1) 100%);
    width: 0%;
    transition: width 1000ms linear 0s;
}


@keyframes changeBackground {
    from {background: rgba(255,201,58,1)}
    to {background: linear-gradient(180deg, rgba(255,201,58,1) 0%, rgba(240,131,0,1) 100%)}
}

.blockWizardScript li.visited:not(.current) {
  /*cursor: pointer;*/
}

.blockWizardScript li.visited:before {
    content: '\2714';
    animation: changeBackground .5s linear;
    animation-fill-mode: forwards;
}

.blockWizardScript li.visited.current:before {
  box-shadow: 0 0 0 2px rgb(250 179 44);
}

.blockEvaluationStep {
  margin-bottom: 20px;
}

.blockSelectDropDown {
	/* margin-left: 30px; */
}

.selectDropDown {
  position: relative;
  background-color: #efeef0;
  cursor: pointer;
  outline: none;
  color: #7f8b9f;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  text-align: center;
  padding: 16px 0px;
  font-family: 'kanitLight';
  font-size: calc(18px + var(--font-size-custom));
  padding: 0px;
  max-width: 100%;
}

.selectDropDown label {
  margin-bottom: 0px;
  max-width: 80%;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 0px;
  text-align: left;
  padding: 10px 0px 10px 15px;
  border: 1px solid transparent;
}

.selectDropDown.active .dropdown:before {
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	right: 20px;
	top: -9px;
	border-width: 12px 12px 0px 12px;
	border-style: solid;
	border-color: #EF7507 rgba(0, 0, 0, 0);
}

.selectDropDown .dropdown:after {
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	right: 89.6%;
	top: -11%;
	border-width: 0px 12px 12px 12px;
	border-color: #5D7B80rgba(0, 0, 0, 0);
}

.selectDropDown .dropdown {
  position: absolute;
  top: 82%;
  left: 0px;
  right: 0px;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	-o-border-radius:5px;
  background-color:#efeef0;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  list-style: none;
  z-index:1;
  opacity: 0;
  pointer-events: none;
  display: none;
}

.selectDropDown .dropdown li:last-child{
	border-bottom:none;
}

.selectDropDown .dropdown li
{
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
.selectDropDown .dropdown li{
  display: block;
	text-decoration: none;
	color: #7f8b9f;
	padding: 3px 10px 3px;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	text-transform: capitalize;
  font-size: calc(18px + var(--font-size-custom));
}

.selectDropDown .dropdown li:hover{
	color:#ffffff;
}

.selectDropDown .dropdown li:hover, .selectDropDown .dropdown li.active {
    background: #ee750b ;
    color:#ffffff;
}

.selectDropDown .dropdown  li:nth-child(2),.selectDropDown .dropdown  li:nth-child(3),.selectDropDown .dropdown  li:nth-child(4)
{
	border-radius: none;
}

.selectDropDown.active .dropdown {
    opacity: 1;
    pointer-events: auto;
    display: block;
}

.selectDropDown.active .dropdown {
	opacity: 1;
	pointer-events: auto;
	text-align: left;
  background-color: #efeef0;
  padding: 10px 0px;
  display: block;
}

.selectDropDown span {
  vertical-align: middle;
  background: #EF7507;
  padding: 12px 20px 8px;
  margin-top: 0;
  position: absolute;
  right: 0;
  top: 0;
  border: 1px solid transparent;
}

.evaluationInput input {
  border-color: #efeef0;
  background-color: #efeef0;
  color: #7f8b9f;
  font-size: calc(18px + var(--font-size-custom));
  height: 47px;
}

.evaluationInput input:focus {
  color: #131e22;
  border-color: #efeef0;
  -webkit-box-shadow: 0 0 28px rgba(0,0,0,.1);
  box-shadow: 0 0 28px rgba(0,0,0,.1);
}

.blockEvaluationRecommendedCourse {
  background-color: transparent;
}

.btnRecommended {
  font-family: 'kanitExtraLight';
  background-color: #DBDBDB;
  border-radius: 30px;
  border:none;
  padding: 6px 25px;
  font-size: calc(18px + var(--font-size-custom));
  color: #183965;
  margin-top: 15px;
  margin-right: 10px;
}

.btnRecommended.active {
  background: rgb(255,201,86);
  background: linear-gradient(90deg, rgba(255,201,86,1) 0%, rgba(238,133,34,1) 100%);
  color: #ffffff;
}

.blockEvaluationReport {
  background-color: #f2f2f2;
  position: relative;
  padding: 25px 0 40px;
}

.textEvaluationReportSubject {
  font-family: 'kanitRegular';
  font-size: calc(18px + var(--font-size-custom));
  background: rgb(255,201,74);
  background: linear-gradient(90deg, rgba(255,201,74,1) 0%, rgba(239,132,0,1) 100%);
  width: fit-content;
  border-radius: 0px 20px 20px 0px;
  color: #ffffff;
  padding: 3px 40px 3px 40px;
  box-shadow: 0px 5px 15px -6px rgb(206 170 92);
  /* margin-top: 20px; */
}

.blockEvaluationSkillSet, .blockEvaluationCareer {
  padding: 25px 60px 0px;
}

.textSkillSet {
  font-family: 'kanitMedium';
  color: #183965;
  font-size: calc(20px + var(--font-size-custom));
  padding-left: 30px;
  position: relative;
}

.textSkillSet > i {
  position: absolute;
  left: 0px;
  font-size: 12px;
  top: 5px;
  background-color: #F28500;
  padding: 5px 6px 4px 7px;
  border-radius: 50%;
  color: #ffffff;
}

.textSkillSet a {
  cursor: pointer;
}

.blockSkillSetCapacity {
  margin-top: 10px;
  display: none;
}

.textDataSkillSetCapcity {
  font-family: 'kanitMedium';
  color: #183965;
  font-size: calc(16px + var(--font-size-custom));
  padding-left: 30px;
  position: relative;
  margin-top: 5px;
  text-decoration: underline;
}

.blockSkillSetCapacityItem {
  font-family: 'kanitLight';
  color: #183965;
  font-size: calc(14px + var(--font-size-custom));
  padding-left: 45px;
  position: relative;
  margin-top: 2px;
}

.blockSkillSetCapacityItem.success {
  color: green;
}

.blockSkillSetCapacityItem.disable {
  color: gray;
}


.blockCareerData {
  border-bottom: 1px solid #C1C1C1;
  padding: 10px 0px 8px;
}

.textCareer {
  font-family: 'kanitMedium';
  font-size: calc(20px + var(--font-size-custom));
}

.textCareer a {
  cursor: pointer;
}

.textCareer span {
  font-size: 15px;
  background-color: #8998A4;
  padding: 0px 3px 0px 8px;
  border-radius: 50%;
  color: #ffffff;
  margin-left: 5px;
  cursor: pointer;
  line-height: 0px;
  display: inline-block;
  width: 22px;
  height: 22px;
  line-height: 22px;
}

.blockCareerCapacity {
  padding-top: 10px;
  display: none;
}

.textDataCareerCapcity {
  font-family: 'kanitMedium';
  color: #183965;
  font-size: calc(16px + var(--font-size-custom));
  padding-left: 15px;
  position: relative;
  margin-top: 0px;
  text-decoration: underline;
}

.blockCareerCapacityItem {
  font-family: 'kanitLight';
  color: #183965;
  font-size: calc(14px + var(--font-size-custom));
  padding-left: 30px;
  position: relative;
  margin-top: 2px;
}

.blockCareerCapacityItem.success {
  color: green;
}

.blockCareerCapacityItem.disable {
  color: gray;
}

.progress-bar-success {
    background-color: #5cb85c;
}

.tc-progress-style {
    height: 40px;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    padding: 4px;
    background: #fff;
    box-shadow: 0 10px 20px rgba(68, 68, 68, 0.05);
}

.tc-progress-style .progress-bar {
    position: relative;
    text-align: left;
    border-radius: 0;
    box-shadow: none;
}

.tc-progress-style .pb-label {
    position: absolute;
    left: 5px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.3);
    top: 50%;
    transform: translateY(-50%);
}

.tc-progress-style .pb-percent {
    position: absolute;
    right: 6px;
    font-weight: 500;
    color: #fff;
    font-size: 12px;
    background: rgba(255, 255, 255, 0.3);
    top: 50%;
    transform: translateY(-50%);
    padding: 0 5px;
}

.blockExportPdf {
  position: absolute;
  right: 30px;
  z-index: 2;
  margin-top: 25px;
}
/* PAGE EVALUATION */


/* GENERAL */
.bgContent {
  background: rgb(212,226,244);
  background: linear-gradient(180deg, rgba(212,226,244,0.5) 50%, rgba(238,168,73,0.5) 100%);
  height: auto;
}

.textHighlight {
  color: #F36487;
}

.blockSubject {
  font-family: 'SourceSansProSemiBold';
  font-size: calc(28px + var(--font-size-custom));
  text-align: center;
  padding: 20px 0px 10px;
}

.animated {
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
}

.btnPinkAll {
  font-family: 'AthitiRegular';
  background-color: #F36487;
  border: 1px solid transparent;
  color: #ffffff !important;
  border-radius: 20px;
  padding: 3px 20px;
  font-size: calc(18px + var(--font-size-custom));
}

.btnPinkAll:hover, .btnPinkAll:focus {
  border: 1px solid #F36487;
  background-color: #ffffff;
  color: #F36487 !important;
}

.btnPinkDetail {
  font-family: 'AthitiRegular';
  background-color: #F36487;
  border: 1px solid transparent;
  color: #ffffff !important;
  border-radius: 20px;
  padding: 3px 15px;
  font-size: calc(14px + var(--font-size-custom));
}

.btnPinkDetail:hover, .btnPinkDetail:focus {
  border: 1px solid #F36487;
  background-color: #ffffff;
  color: #F36487 !important;
}

.btnAssessmentIndustry {
  font-family: 'kanitExtraLight';
  background: rgb(255,201,86);
  background: linear-gradient(90deg, rgba(255,201,86,1) 0%, rgba(238,133,34,1) 100%);
  border-radius: 30px;
  border:none;
  padding: 4px 40px;
  font-size: calc(20px + var(--font-size-custom));
  color: #ffffff;
}

.is-invalid ~ .invalid-feedback, .is-invalid ~ .invalid-tooltip, .was-validated :invalid ~ .invalid-feedback, .was-validated :invalid ~ .invalid-tooltip, .invalid-feedbackFix {
  font-size: calc(16px + var(--font-size-custom));
}

.invalid-feedbackFix {
    width: 100%;
    margin-top: .25rem;
    color: #dc3545;
}

.mt-10px, .my-10px {
  margin-top: 10px;
}

.mb-10px, .my-10px {
  margin-bottom: 10px;
}
/* GENERAL */

/* owl-carousel */
/* ng-owl-carousel .owl-carousel.owl-drag .owl-item {
  display: none;
}

ng-owl-carousel .owl-carousel.owl-drag .owl-item.active {
  display: block;
} */

ng-owl-carousel .owl-stage {
  padding: 20px 10px;
}

ng-owl-carousel .owl-carousel.owl-hidden {
  opacity: 1;
}
/* owl-carousel */

.dataGraph, #dataGraph, #dataGraph2, #graphBlockExport {
  display: none;
}


/* FOOTER */
footer{
  background-color: #203143;
  position: relative;
}

.footerTextColorIcon {
  color: #CFCFCF;
  font-family: 'kanitLight';
  font-size: calc(16px + var(--font-size-custom));
}

.footerTextColorIcon > i {
  color: #CFCFCF;
  font-size: calc(18px + var(--font-size-custom));
  margin-right: 6px;
}

.footerTextIcon {
  color: #CFCFCF;
  font-family: 'kanitLight';
  font-size: calc(16px + var(--font-size-custom));
}

.footerTextIcon > i {
  font-size: calc(18px + var(--font-size-custom));
  margin-right: 2px;
}

.footerText {
  font-family: 'kanitLight';
  color: #CFCFCF;
  font-size: calc(16px + var(--font-size-custom));
  padding-left: 25px;
}

.footerTextRight {
  padding-left: 30px;
}

.footerText > a {
  color: #CFCFCF;
}

.footerText > a:hover, .footerText > a:hover {
  color: #CFCFCF;
  text-decoration: underline;
}

.footerHeadSubject {
  font-family: 'kanitLight';
  color: #FFFFFF;
  font-size: calc(16px + var(--font-size-custom));
  padding-left: 25px;
}

.footerHeadSubjectRight {
  padding-left: 30px;
}

.footerBorderTop {
  border-top: 1px solid #8A9397;
}

.footerTextCopyright {
  font-family: 'kanitExtraLight';
  color: #8A9397;
  font-size: calc(18px + var(--font-size-custom));
  text-align: center;
}

.footerTextLink {
  font-family: 'SourceSansProSemiBold';
  color: #CFCFCF;
  font-size: calc(16px + var(--font-size-custom));
}

.footerTextLinkNotA {
  color: #CFCFCF;
  font-family: 'SourceSansProSemiBold';
  font-size: calc(16px + var(--font-size-custom));
}

.footerBetween {
  margin: 0px 5px;
  color: #8A9397;
  font-size: 20px;
  font-family: 'AthitiMedium';
}

.footerTextLinkNotA > i {
  margin-right: 5px;
}

.footerTextLink:hover, .footerTextLink:focus {
  color: #CFCFCF;
  text-decoration: underline;
}

.footerLinkOther {
  background-color: #8A9397;
  border-radius: 50%;
  padding: 7px 12px;
  border: 1px solid transparent;
  color: #24292F;
  width: 39px;
}

.footerLink i {
  color: #24292F;
}

.footerLink:hover i, .footerLink:focus i {
  color: #8A9397;
}

.footerLinkOther > a, .footerLinkOther > a {
  color: #24292F;
}

.footerLinkOther:hover, .footerLinkOther:focus {
  background-color: #24292F;
  border: 1px solid #8A9397;
}
/* FOOTER */

/*PAGINATION*/
.paginationCurrent {
    background-color: #FFFFFF;
    color: #737373;
    border: none;
    border-radius: 0%;
    text-align-last: right;
    text-align: center;
    width: 35px;
    font-size: 16px;
    /*font-family: KanitBold;*/
    font-weight: bold;
    font-family: kanitRegular !important;

}

.paginationALL {
    background-color: #ffffff;
    color: #737373;
    border: none;
    border-radius: 0%;
    text-align-last: center;
    text-align: center;
    width: 35px;
    font-size: 16px;
    /*font-family: KanitBold;*/
    font-weight: bold;
    font-family: kanitRegular !important;
}

.pagina {
    cursor: pointer;
    color: #F37D53 !important;
    font-size: 16px;
    /*font-family: KanitBold;*/
    font-weight: bold;
    font-family: kanitRegular !important;
}

.paginaSp {
    color: #F37D53 !important;
    font-size: 16px;
    font-weight: bold;
}

.paging, .paging > a > i {
    color: #F37D53 !important;
}

.pagina:hover > i, .pagina:focus > i {
    color: #003968 !important;
}
/*PAGINATION*/


/*PACK*/
ul {
  display: block;
  list-style-type: none;
  margin-top: 1em;
  margin-bottom: 1 em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}
.industry-text{
  font-size: 18px;
  font-weight: bold;
}
.sub-text{
  font-size: 16px;
  font-weight: bold;
}
.time_create-text{
  color: #ef8603;
}
/*PACK*/

/* ON TOP */
.go-to-top {
  display: none;
}

.go-to-top .icon-bg {
  background-color: #F9BA48;
  box-shadow: 0px 0px 9px 0px rgb(33 50 66);
  border-radius: 5px;
  height: 45px;
  position: absolute;
  -webkit-transition: all .3s ease-out 0s;
  -moz-transition: all .3s ease-out 0s;
  -o-transition: all .3s ease-out 0s;
  -ms-transition: all .3s ease-out 0s;
  transition: all .3s ease-out 0s;
  width: 45px;
  cursor: pointer;
  border-radius: 50%;
  padding: 20px;
}

.go-to-top {
  background-color: transparent;
  bottom: 40px;
  height: 45px;
  margin: 0;
  position: fixed;
  right: 5%;
  width: 45px;
  z-index: 10000;
}

.go-to-top .back-to-top-text {
  color: #fff;
  font-size: 24px;
  font-weight: 400;
  left: 50%;
  opacity: 1;
  -moz-opacity: 1;
  filter: alpha(opacity=100);
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0px);
  -moz-transform: translate3d(-50%, -50%, 0px);
  -ms-transform: translate3d(-50%, -50%, 0px);
  -o-transform: translate3d(-50%, -50%, 0px);
  transform: translate3d(-50%, -50%, 0px);
  -webkit-transition: all .3s ease-out 0s;
  -moz-transition: all .3s ease-out 0s;
  -o-transition: all .3s ease-out 0s;
  -ms-transition: all .3s ease-out 0s;
  transition: all .3s ease-out 0s;
  width: 100%;
  z-index: 2;
  cursor: pointer;
}

.go-to-top .back-to-top-icon {
  color: #fff;
  font-size: 16px;
  left: 23px;
  top: 23px;
  /* left: 50%; */
  /* opacity: 0; */
  /* -moz-opacity: 0; */
  /* filter: alpha(opacity=0); */
  position: absolute;
  /* top: 80%; */
  -webkit-transform: translate3d(-50%, -50%, 0px);
  -moz-transform: translate3d(-50%, -50%, 0px);
  -ms-transform: translate3d(-50%, -50%, 0px);
  -o-transform: translate3d(-50%, -50%, 0px);
  transform: translate3d(-50%, -50%, 0px);
  -webkit-transition: all .3s ease-out 0s;
  -moz-transition: all .3s ease-out 0s;
  -o-transition: all .3s ease-out 0s;
  -ms-transition: all .3s ease-out 0s;
  transition: all .3s ease-out 0s;
  z-index: 2;
  cursor: pointer;
}

.go-to-top:hover .back-to-top-text {
  opacity: 0;
  -moz-opacity: 0;
  filter: alpha(opacity=0);
  top: 40%;
}

.go-to-top:hover .back-to-top-icon {
  opacity: 1;
  -moz-opacity: 1;
  filter: alpha(opacity=100);
  top: 50%;
}
/* ON TOP */

/* OTHER  */
.login-wrap {
  height: unset;
}
/* OTHER  */

/* > XS */
@media (min-width: 767px) {
  .dropdown:hover .dropdown-toggle ~ .dropdown-menu {
    display: block;
  }

  .dropdown:hover .dropdown-toggle::after{
    font-family: "FontAwesome";
    content: "\f106";
  }

  .cardHeaderIndustryLogoData {
    min-height: 100px;
  }
}

/* XS */
@media (max-width: 767px) {
  .blockHeaderIndex {
    height: auto;
  }

  .blockHeaderIndex .bgPeople {
    height: auto;
    background: unset;
  }

  .blockAssessment {
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 30px;
  }

  .textAssessmentTop {
    font-size: calc(32px + var(--font-size-custom));
  }

  .textAssessmentMiddle {
    font-size: calc(28px + var(--font-size-custom));
  }

  .textAssessmentBottom {
    font-size: calc(24px + var(--font-size-custom));
  }

  .btnAssessment {
    font-size: calc(20px + var(--font-size-custom));
    padding: 4px 40px;
  }

  .blockContentIndustry {
    padding: 40px 0px;
  }

  .cardHeaderIndustryLogo {
    width: 50px;
    margin-right: 5px;
    margin-left: -10px;
  }

  .cardHeaderIndustryText, .cardBottomHeader {
    font-size: calc(15px + var(--font-size-custom));
  }

  .cardIndustryContent {
    font-size: calc(10px + var(--font-size-custom));
    padding: 5px 10px 10px 20px;
  }

  .cardBottomTextIcon {
    font-size: calc(10px + var(--font-size-custom));
  }

  .cardBottomTextIcon {
    margin-left: 15px;
  }

  .cardBottomTextIcon::before {
    left: -25px;
    padding: 1px 5px 0px 7px;
  }

  .btnAssessmentIndustry {
    font-size: calc(14px + var(--font-size-custom));
  }

  .blockGridData {
    display: none;
  }

  .blockSearchDataList {
    margin-top: 25px;
  }

  .blockSearchDataList .blockSearchData .blockSearchDataLeft {
    width: 100%;
    border-radius: 10px 10px 0px 0px;
    float: none;
  }

  .blockSearchDataList .blockSearchData .blockSearchDataRight {
    border-radius: 0px 10px 10px 0px;
    text-align: left;
    width: 100%;
    height: 150px;
  }

  .blockSearchDataList .blockSearchData .blockSearchDataRight .blockSearchDataContent {
    position: relative;
  }

  .blockSearchDataList .blockSearchData .blockSearchDataLeft img {
    border-radius: 10px 10px 0px 0px;
    width: 100%;
  }

  .blockSearchDataList .blockSearchData .blockSearchDataRight .blockSearchDataContent .bySubject {
    font-size: calc(18px + var(--font-size-custom));
    height: calc(47px + (calc(var(--font-size-custom) * 4)));
  }

  .blockSearchDataList .blockSearchData .blockSearchDataRight .blockSearchDataContent .textBottom {
    position: relative;
    bottom: 0px;
  }

  .blockSearchDataList .blockSearchData .blockSearchDataRight .blockSearchDataContent .btnRight {
    display: none;
  }

  .btnOrageSearch {
    font-size: calc(12px + var(--font-size-custom));
  }

  .blockSearchInput .input-group {
    width: 90%;
  }

  .blockEvaluationData {
    padding: 10px 10px 20px;
  }

  .statusWizard {
    width: 70%;
  }

  .blockWizardScript li {
    width: 23%;
  }

  .blockWizardScript li a {
    display: none;
  }

  .bgEvaluationHeader {
    display: none;
  }

  .blockEvaluationSkillSet, .blockEvaluationCareer {
    padding: 25px 10px 0px;
  }

  .blockExportPdf {
    margin-top: 15px;
  }

  .blockEvaluationReport {
    padding-top: 65px
  }
}


/* แนวตั้ง XS */
@media (max-width: 768px) and (orientation: portrait) {     
  ul {
    display: block;
    list-style-type: none;
    margin-top: 1em;
    margin-bottom: 1 em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 20px !important;
  }
}


/* แนวนอน XS */
@media (max-width: 768px) and (orientation: landscape) {
  ul {
    display: block;
    list-style-type: none;
    margin-top: 1em;
    margin-bottom: 1 em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 20px !important;
  }
}

/* แนวตั้ง SM */
@media (max-width: 1024px) and (min-width: 768px) and (orientation: portrait) {
  .blockAssessment {
    margin-left: 10px;
  }

  .textAssessmentTop {
    font-size: calc(36px + var(--font-size-custom));
  }

  .textAssessmentMiddle {
    font-size: calc(32px + var(--font-size-custom));
  }

  .textAssessmentBottom {
    font-size: calc(26px + var(--font-size-custom));
  }

  .blockHeaderIndex .bgPeople {
    right: 20px;
  }

  .btnRight {
    display: none;
  }
}

/* แนวนอน SM */
@media (max-width: 1024px) and (min-width: 768px) and (orientation: landscape) {
  .blockHeaderIndex .bgPeople {
    right: 20px;
  }

  .blockSearchDataList .blockSearchData .blockSearchDataRight .blockSearchDataContent .btnRight {
    right: 5px;
  }

}

/* แนวตั้ง IPAD PRO */
@media (max-width: 1366px) and (min-width: 1024px) and (orientation: portrait) {
  .bgContent {
    height: 100%;
  }

  .btnRight {
    display: block;
  }
}

/* แนวนอน XS พิเศษจอเล็ก  */
@media (max-width: 850px) and (min-width: 576px) and (orientation: landscape) {
  .blockSearchDataList .blockSearchData .blockSearchDataRight .blockSearchDataContent .bySubject {
    font-size: calc(18px + var(--font-size-custom));
    height: calc(50px + (calc(var(--font-size-custom) * 4)));
  }

  .blockSearchDataList .blockSearchData .blockSearchDataRight .blockSearchDataContent .byInstitution {
    font-size: calc(14px + var(--font-size-custom));
    width: 65%;
  }

  .blockSearchDataList .blockSearchData .blockSearchDataRight .blockSearchDataContent .textBottom {
    position: absolute;
    bottom: -3px;
  }

  .blockSearchDataList .blockSearchData .blockSearchDataRight .blockSearchDataContent .btnRight {
    right: 5px;
    bottom: 26px;
  }

  .btnOrageSearch {
    font-size: calc(12px + var(--font-size-custom));
  }

  .btnRight {
    display: none;
  }
}

/* แนวนอน XS พิเศษ  */
@media (max-width: 850px) and (min-width: 750px) and (orientation: landscape) {
  .blockHeaderIndex .bgPeople {
    right: 20px;
  }

  .blockAssessment {
    margin-left: 10px;
  }

  .textAssessmentTop {
    font-size: calc(32px + var(--font-size-custom));
  }

  .textAssessmentMiddle {
    font-size: calc(28px + var(--font-size-custom));
  }

  .textAssessmentBottom {
    font-size: calc(24px + var(--font-size-custom));
  }

  .btnRight {
    display: none;
  }
}

@media (max-width: 370px) {
  .cardHeaderIndustryText, .cardBottomHeader {
    font-size: calc(11px + var(--font-size-custom));
  }

  .cardIndustryContent {
    font-size: calc(10px + var(--font-size-custom));
  }

  .cardBottomTextIcon {
    font-size: calc(10px + var(--font-size-custom));
  }
}

@media (max-width: 425px) {
  ul {
    display: block;
    list-style-type: none;
    margin-top: 1em;
    margin-bottom: 1 em;
    margin-left: 0;
    margin-right: 0;
    padding-left: 10px !important;
  }
}

@keyframes text {
    0% {
        opacity: var(--o-active);
        transform: translateY(var(--y-active)) translateZ(0);
    }
    100% {
        opacity: var(--o-default);
        transform: translateY(var(--y-default)) translateZ(0);
    }
}

@keyframes text-active {
    0% {
        opacity: var(--o-default);
        transform: translateY(var(--y-default)) translateZ(0);
    }
    100% {
        opacity: var(--o-active);
        transform: translateY(var(--y-active)) translateZ(0);
    }
}

@keyframes move {
    50% {
        transform: translate(var(--x-middle, 0), var(--y-middle, 0)) scale(.4);
    }
    100% {
        transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(.4);
    }
}

@keyframes back {
    0%,
    15% {
        transform: translate(var(--x-end, 0), var(--y-end, 0)) scale(.4);
    }
    50% {
        transform: translate(var(--x-back, 0), var(--y-back, 0)) scale(.5);
    }
    100% {
        transform: translate(var(--x-back-end, 0), var(--y-back-end, 0)) scale(1);
    }
}

@keyframes scale {
    100% {
        transform: translateY(20%) translateZ(0) scaleX(1);
    }
}

@keyframes scale-down {
    0% {
        transform: translateY(20%) translateZ(0) scaleX(1);
    }
    100% {
        transform: translateY(20%) translateZ(0) scaleX(0);
    }
}