/* normal */
span.tabs-label{
  color: #000000 !important;
}
.item-notice a b {
  color: #000000 !important;
}
.normal .header1 {
  background: #9877c1 !important;
}
.normal .header2 {
  background: #ffffff !important;
}
.normal #kt_app_content {
  background: #ffffff !important;
}
.normal .footer {
  background: #9877c1 !important;
  color: #ffffff !important;
}
.normal .footer .btn {
  color: #ffffff !important;
}
.normal .footer a {
  color: #ffffff !important;
}
.normal .menu-toggle {
  border: 1px solid #9877c1 !important;
}
.normal .user-info span {
  color: #ffffff !important;
}
.normal .app-header-menu .menu-title svg path {
  stroke: var(--kt-gray-700) !important;
}
.normal .app-header-menu .menu-item:hover .menu-title svg path {
  stroke: var(--kt-primary) !important;
}
.normal .app-header-menu .active .menu-title svg path {
  stroke: var(--kt-primary) !important;
}
.normal .el-dropdown.custom-header .el-button svg circle {
  fill: #9877c1 !important;
}
.normal .section-search {
  background: #5c67a9 !important;
  color: #ffffff !important;
}
.normal .search .custom-link {
  color: #000000 !important;
}
.normal .section-search .custom-link {
  color: #ffffff !important;
}
.normal .section-1 {
  background: #ffffff !important;
  color: #000000 !important;
}
.normal .section-2 {
  background: #f6f9ff !important;
  color: #000000 !important;
}
.normal .title-section {
  color: #000000 !important;
}
.normal .title-section svg path {
  stroke: #000000 !important;
}
.normal .text-cate svg path {
  stroke: #407bff !important;
}

.normal .title-section label {
  color: #000000 !important;
}
.normal .custom-link {
  color: #a8a8a8 !important;
}
.normal .description {
  color: #929797 !important;
}
.normal .custom span a {
  color: #407bff !important;
}

/* card */
.normal .card {
  color: #000000 !important;
  border: 1px solid #e7e7e7 !important;
}
/* .normal .card svg path {
  stroke: #407bff !important;
} */
.normal .text-cate {
  color: #407bff !important;
}
.normal .card .progress-update {
  color: #000000 !important;
}
.normal .card .rateAvg {
  color: #9877c1 !important;
}
.normal .card .rateCnt {
  color: #969696 !important;
}
.normal .department {
  background: #5c67a9 !important;
  border-radius: 8px !important;
  color: #fff !important;
  padding: 24px !important;
  min-height: 110px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.normal .category {
  background: #f9fafb !important;
  border-radius: 8px !important;
  color: #000 !important;
  padding: 10px 16px !important;
  min-height: 80px !important;
  border: 1px solid #d0d5dd !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
}
.normal .swiper-button-prev.custom {
  color: #000000 !important;
}
.normal .swiper-button-next.custom {
  color: #000000 !important;
}
.normal .nav-line-tabs .nav-item .nav-link {
  color: #000000 !important;
}
.normal .btn-learn {
  color: var(--blue, #9877c1) !important;
  border-radius: 8px !important;
  border: 1px solid var(--blue, #9877c1) !important;
  background: #eff4ff !important;
}
.normal .btn-register {
  color: #fff !important;
  border-radius: 10px !important;
  background: var(--2, #9877c1) !important;
}
/* normal */

/* normal1 */
.normal1 .header1 {
  background: #414141 !important;
}
.normal1 .header2 {
  background: #ffffff !important;
}
.normal1 .footer {
  background: #414141 !important;
  color: #ffffff !important;
}
.normal1 .footer .btn {
  color: #ffffff !important;
}
.normal1 .footer a {
  color: #ffffff !important;
}
.normal1 .menu-toggle {
  border: 1px solid #414141 !important;
}
.normal1 .user-info span {
  color: #ffffff !important;
}
.normal1 .app-header-menu .menu-title svg path {
  stroke: var(--kt-gray-700) !important;
}
.normal1 .app-header-menu .menu-item:hover .menu-title svg path {
  stroke: var(--kt-primary) !important;
}
.normal1 .app-header-menu .active .menu-title svg path {
  stroke: var(--kt-primary) !important;
}
.normal1 .el-dropdown.custom-header .el-button svg circle {
  fill: #414141 !important;
}
.normal1 .section-search {
  background: #6a6a6a !important;
  color: #fff !important;
}
.normal1 .search .custom-link {
  color: #000000 !important;
}
.normal1 .section-search .custom-link {
  color: #ffffff !important;
}
.normal1 .section-1 {
  background: #ffffff !important;
  color: #000000 !important;
}
.normal1 .section-2 {
  background: #f6f9ff !important;
  color: #000000 !important;
}
.normal1 .title-section {
  color: #000000 !important;
}
.normal1 .title-section svg path {
  stroke: #000000 !important;
}
.normal1 .title-section label {
  color: #000000 !important;
}
.normal1 .custom-link {
  color: #a8a8a8 !important;
}
/* card */
.normal1 .card {
  color: #000000 !important;
  border: 1px solid #e7e7e7 !important;
}
.normal1 .card svg path {
  stroke: #407bff !important;
}
.normal1 .card .text-cate {
  color: #407bff !important;
}
.normal1 .card .progress-update {
  color: #000000 !important;
}
.normal1 .card .rateAvg {
  color: #9877c1 !important;
}
.normal1 .card .rateCnt {
  color: #969696 !important;
}
.normal1 .department {
  background: #5c67a9 !important;
  border-radius: 8px !important;
  color: #fff !important;
  padding: 24px !important;
  min-height: 110px !important;
  border: 1px solid #000000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.normal1 .category {
  background: #f9fafb !important;
  border-radius: 8px !important;
  color: #000 !important;
  padding: 10px 16px !important;
  min-height: 80px !important;
  border: 1px solid #d0d5dd !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
}
.normal1 .swiper-button-prev.custom {
  color: #000000 !important;
}
.normal1 .swiper-button-next.custom {
  color: #000000 !important;
}
.normal1 .btn-learn {
  color: var(--blue, #9877c1) !important;
  border-radius: 8px !important;
  border: 1px solid var(--blue, #9877c1) !important;
  background: #eff4ff !important;
}
.normal1 .btn-register {
  color: #fff !important;
  border-radius: 10px !important;
  background: var(--2, #9877c1) !important;
}
/* normal1 */

/* normal2 */
.normal2 .header1 {
  background: #265b99 !important;
}
.normal2 .header2 {
  background: #ffffff !important;
}
.normal2 .footer {
  background: #265b99 !important;
  color: #ffffff !important;
}
.normal2 .footer .btn {
  color: #ffffff !important;
}
.normal2 .footer a {
  color: #ffffff !important;
}
.normal2 .menu-toggle {
  border: 1px solid #265b99 !important;
}
.normal2 .user-info span {
  color: #ffffff !important;
}
.normal2 .app-header-menu .menu-title svg path {
  stroke: var(--kt-gray-700) !important;
}
.normal2 .app-header-menu .menu-item:hover .menu-title svg path {
  stroke: var(--kt-primary) !important;
}
.normal2 .app-header-menu .active .menu-title svg path {
  stroke: var(--kt-primary) !important;
}
.normal2 .el-dropdown.custom-header .el-button svg circle {
  fill: #265b99 !important;
}
.normal2 .section-search {
  background: #3680d6 !important;
  color: #fff !important;
}
.normal2 .search .custom-link {
  color: #000000 !important;
}
.normal2 .section-search .custom-link {
  color: #ffffff !important;
}
.normal2 .section-1 {
  background: #ffffff !important;
  color: #000000 !important;
}
.normal2 .section-2 {
  background: #f6f9ff !important;
  color: #000000 !important;
}
.normal2 .title-section {
  color: #000000 !important;
}
.normal2 .title-section svg path {
  stroke: #000000 !important;
}
.normal2 .title-section label {
  color: #000000 !important;
}
.normal2 .custom-link {
  color: #a8a8a8 !important;
}
/* card */
.normal2 .card {
  color: #000000 !important;
  border: 1px solid #e7e7e7 !important;
}
.normal2 .card svg path {
  stroke: #407bff !important;
}
.normal2 .card .text-cate {
  color: #407bff !important;
}
.normal2 .card .progress-update {
  color: #000000 !important;
}
.normal2 .card .rateAvg {
  color: #9877c1 !important;
}
.normal2 .card .rateCnt {
  color: #969696 !important;
}
.normal2 .department {
  background: #5c67a9 !important;
  border-radius: 8px !important;
  color: #fff !important;
  padding: 24px !important;
  min-height: 110px !important;
  border: 1px solid #000000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.normal2 .category {
  background: #f9fafb !important;
  border-radius: 8px !important;
  color: #000 !important;
  padding: 10px 16px !important;
  min-height: 80px !important;
  border: 1px solid #d0d5dd !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
}
.normal2 .swiper-button-prev.custom {
  color: #000000 !important;
}
.normal2 .swiper-button-next.custom {
  color: #000000 !important;
}
.normal2 .btn-learn {
  color: var(--blue, #9877c1) !important;
  border-radius: 8px !important;
  border: 1px solid var(--blue, #9877c1) !important;
  background: #eff4ff !important;
}
.normal2 .btn-register {
  color: #fff !important;
  border-radius: 10px !important;
  background: var(--2, #9877c1) !important;
}
/* normal2 */

/* normal3 */
.normal3 .header1 {
  background: #1c2871 !important;
}
.normal3 .header2 {
  background: #ffffff !important;
}
.normal3 .footer {
  background: #1c2871 !important;
  color: #ffffff !important;
}
.normal3 .footer .btn {
  color: #ffffff !important;
}
.normal3 .footer a {
  color: #ffffff !important;
}
.normal3 .menu-toggle {
  border: 1px solid #1c2871 !important;
}
.normal3 .user-info span {
  color: #ffffff !important;
}
.normal3 .app-header-menu .menu-title svg path {
  stroke: var(--kt-gray-700) !important;
}
.normal3 .app-header-menu .menu-item:hover .menu-title svg path {
  stroke: var(--kt-primary) !important;
}
.normal3 .app-header-menu .active .menu-title svg path {
  stroke: var(--kt-primary) !important;
}
.normal3 .el-dropdown.custom-header .el-button svg circle {
  fill: #1c2871 !important;
}
.normal3 .section-search {
  background: #283aa7 !important;
  color: #fff !important;
}
.normal3 .search .custom-link {
  color: #000000 !important;
}
.normal3 .section-search .custom-link {
  color: #ffffff !important;
}
.normal3 .section-1 {
  background: #ffffff !important;
  color: #000000 !important;
}
.normal3 .section-2 {
  background: #f6f9ff !important;
  color: #000000 !important;
}
.normal3 .title-section {
  color: #000000 !important;
}
.normal3 .title-section svg path {
  stroke: #000000 !important;
}
.normal3 .title-section label {
  color: #000000 !important;
}
.normal3 .custom-link {
  color: #a8a8a8 !important;
}
/* card */
.normal3 .card {
  color: #000000 !important;
  border: 1px solid #e7e7e7 !important;
}
.normal3 .card svg path {
  stroke: #407bff !important;
}
.normal3 .card .text-cate {
  color: #407bff !important;
}
.normal3 .card .progress-update {
  color: #000000 !important;
}
.normal3 .card .rateAvg {
  color: #9877c1 !important;
}
.normal3 .card .rateCnt {
  color: #969696 !important;
}
.normal3 .department {
  background: #5c67a9 !important;
  border-radius: 8px !important;
  color: #fff !important;
  padding: 24px !important;
  min-height: 110px !important;
  border: 1px solid #000000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.normal3 .category {
  background: #f9fafb !important;
  border-radius: 8px !important;
  color: #000 !important;
  padding: 10px 16px !important;
  min-height: 80px !important;
  border: 1px solid #d0d5dd !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
}
.normal3 .swiper-button-prev.custom {
  color: #000000 !important;
}
.normal3 .swiper-button-next.custom {
  color: #000000 !important;
}
.normal3 .btn-learn {
  color: var(--blue, #9877c1) !important;
  border-radius: 8px !important;
  border: 1px solid var(--blue, #9877c1) !important;
  background: #eff4ff !important;
}
.normal3 .btn-register {
  color: #fff !important;
  border-radius: 10px !important;
  background: var(--2, #9877c1) !important;
}
/* normal3 */

/* white */
.white .header1 {
  background: #000000 !important;
}
.white .header2 {
  background: #000000 !important;
}
.white #kt_app_content {
  background: #000000 !important;
}
.white .footer {
  background: #000000 !important;
  color: #ffffff !important;
}
.white .footer .btn {
  color: #ffffff !important;
}
.white .footer a {
  color: #fff !important;
}
.white .menu-toggle {
  border: 1px solid #ffffff !important;
}
.white .user-info span {
  color: #ffffff !important;
}

.white .app-header-menu .menu .menu-item .menu-link .menu-title {
  color: #fff !important;
}
.white .app-header-menu .menu .menu-item .menu-link.active .menu-title {
  color: #000000 !important;
}
.white .app-header-menu .menu .menu-item:hover .menu-link .menu-title {
  color: #000000 !important;
}
.white .app-header-menu .menu-title svg path {
  stroke: #fff !important;
}
.white .app-header-menu .menu-item:hover .menu-title svg path {
  stroke: #000000 !important;
}
.white .app-header-menu .active .menu-title svg path {
  stroke: #000000 !important;
}
.white .el-dropdown.custom-header .el-button svg circle {
  fill: #9877c1 !important;
}
/* section */
.white .section-search {
  background: #000000 !important;
  color: #fff !important;
}
.white .section-1 {
  background: #000000 !important;
  color: #ffffff !important;
}
.white .section-2 {
  background: #000000 !important;
  color: #ffffff !important;
}
.white .title-section svg path {
  stroke: #ffffff !important;
}
.white .title-section .input svg path {
  stroke: #000000 !important;
}

.white .title-section label {
  color: #ffffff !important;
}
.white p {
  color: #ffffff !important;
}
.white .custom-modal p {
  color: #000000 !important;
}
.white .custom-link {
  color: #ffffff !important;
}
/* card */
.white .card {
  color: #ffffff !important;
  background: #000000 !important;
  border: 1px solid #ffffff !important;
}
.white .card.card-modal {
  color: #000000 !important;
  background: #ffffff !important;
  border: 1px solid #d3d3d3 !important;
}
.white .card svg path {
  stroke: #ffffff !important;
}
.white .card.card-modal svg path {
  stroke: #000000 !important;
}
.white .card .text-cate {
  color: #ffffff !important;
}
.white .card .progress-update {
  color: #ffffff !important;
}
.white .card .rateAvg {
  color: #ffffff !important;
}
.white .card .rateCnt {
  color: #ffffff !important;
}
.white .btn-learn {
  color: #ffffff !important;
  border-radius: 8px !important;
  border: 1px solid #ffffff !important;
  background: transparent !important;
}
.white .btn-register {
  color: #ffffff !important;
  background: transparent !important;
  border: 1px solid #ffffff !important;
  border-radius: 10px !important;
}
.white .department {
  background: transparent !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  padding: 24px !important;
  min-height: 110px !important;
  border: 1px solid #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.white .category {
  background: transparent !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  padding: 10px 16px !important;
  min-height: 80px !important;
  border: 1px solid #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0px 1px 2px 0px #ffffff !important;
}
.white .swiper-button-prev.custom {
  color: #ffffff !important;
}
.white .swiper-button-next.custom {
  color: #ffffff !important;
}
.white .nav-line-tabs .nav-item .nav-link {
  color: #ffffff !important;
}
.white .accordion .accordion-item {
  color: #ffffff !important;
  background: #000000 !important;
}
.white .accordion .accordion-item .accordion-button {
  color: #ffffff !important;
  background: #000000 !important;
}
.white .accordion .accordion-item .accordion-header button {
  color: #ffffff !important;
  background: #000000 !important;
}
.white .accordion .accordion-item .accordion-button::after {
  background-image: var(--bs-accordion-btn-active-icon) !important;
}
.white .btn-default:disabled {
  background: transparent !important;
  border: 1px solid #ffffff !important;
  color: #ffffff !important;
  border-radius: 10px;
}
.white .btn-default:disabled svg path {
  fill: #ffffff !important;
}
.white .custom-icon svg path {
  stroke: #ffffff !important;
}
.white .modal-des {
  color: #000000 !important;
}
/* yellow */
.yellow .header1 {
  background: #000000 !important;
}
.yellow .header2 {
  background: #000000 !important;
}
.yellow #kt_app_content {
  background: #000000 !important;
}
.yellow .footer {
  background: #000000 !important;
  color: #f6f100 !important;
}
.yellow .footer .btn {
  color: #f6f100 !important;
}
.yellow .footer a {
  color: #f6f100 !important;
}
.yellow .menu-toggle {
  border: 1px solid #f6f100 !important;
}
.yellow .user-info span {
  color: #f6f100 !important;
}

.yellow .app-header-menu .menu .menu-item .menu-link .menu-title {
  color: #f6f100 !important;
}
.yellow .app-header-menu .menu .menu-item .menu-link.active .menu-title {
  color: #000000 !important;
}
.yellow .app-header-menu .menu .menu-item:hover .menu-link .menu-title {
  color: #000000 !important;
}
.yellow .app-header-menu .menu-title svg path {
  stroke: #f6f100 !important;
}
.yellow .app-header-menu .menu-item:hover .menu-title svg path {
  stroke: #000000 !important;
}

.yellow .app-header-menu .active .menu-title svg path {
  stroke: #000000 !important;
}
.yellow .el-dropdown.custom-header .el-button svg circle {
  fill: #9877c1 !important;
}
.yellow .section-search {
  background: #000000 !important;
  color: #f6f100 !important;
}
/* section */
.yellow .section-search {
  background: #000000 !important;
  color: #f6f100 !important;
}
.yellow .section-1 {
  background: #000000 !important;
  color: #f6f100 !important;
}
.yellow .section-2 {
  background: #000000 !important;
  color: #f6f100 !important;
}
.yellow .title-section svg path {
  stroke: #f6f100 !important;
}
.yellow .title-section .input svg path {
  stroke: #000000 !important;
}
.yellow .title-section .custom svg path {
  stroke: #000000 !important;
}
.yellow .title-section label {
  color: #f6f100 !important;
}
.yellow p {
  color: #f6f100 !important;
}
.yellow .custom-modal p {
  color: #000000 !important;
}
.yellow .custom-link {
  color: #f6f100 !important;
}
/* card */
.yellow .card {
  color: #f6f100 !important;
  background: #000000 !important;
  border: 1px solid #f6f100 !important;
}
.yellow .card.card-modal {
  color: #000000 !important;
  background: #ffffff !important;
  border: 1px solid #d3d3d3 !important;
}
.yellow .card svg path {
  stroke: #f6f100 !important;
}
.yellow .card.card-modal svg path {
  stroke: #000000 !important;
}
.yellow .card .text-cate {
  color: #f6f100 !important;
}
.yellow .card .progress-update {
  color: #f6f100 !important;
}
.yellow .card .rateAvg {
  color: #f6f100 !important;
}
.yellow .card .rateCnt {
  color: #f6f100 !important;
}

.yellow .btn-learn {
  color: #f6f100 !important;
  border-radius: 8px !important;
  border: 1px solid #f6f100 !important;
  background: transparent !important;
}
.yellow .btn-register {
  color: #f6f100 !important;
  background: transparent !important;
  border: 1px solid #f6f100 !important;
  border-radius: 10px !important;
}
.yellow .department {
  background: transparent !important;
  border-radius: 8px !important;
  color: #f6f100 !important;
  padding: 24px !important;
  min-height: 110px !important;
  border: 1px solid #f6f100 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.yellow .category {
  background: transparent !important;
  border-radius: 8px !important;
  color: #f6f100 !important;
  padding: 10px 16px !important;
  min-height: 80px !important;
  border: 1px solid #f6f100 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0px 1px 2px 0px #f6f100 !important;
}
.yellow .swiper-button-prev.custom {
  color: #f6f100 !important;
}
.yellow .swiper-button-next.custom {
  color: #f6f100 !important;
}
.yellow .nav-line-tabs .nav-item .nav-link {
  color: #f6f100 !important;
}

.yellow .accordion .accordion-item {
  color: #f6f100 !important;
  background: #000000 !important;
}
.yellow .accordion .accordion-item .accordion-button {
  color: #f6f100 !important;
  background: #000000 !important;
}
.yellow .accordion .accordion-item .accordion-header button {
  color: #f6f100 !important;
  background: #000000 !important;
}
.yellow .accordion .accordion-item .accordion-button::after {
  background-image: var(--bs-accordion-btn-active-icon) !important;
}
.yellow .btn-default:disabled {
  background: transparent !important;
  border: 1px solid #f6f100 !important;
  color: #f6f100 !important;
  border-radius: 10px;
}
.yellow .btn-default:disabled svg path {
  fill: #f6f100 !important;
}

.yellow .custom-icon svg path {
  stroke: #f6f100 !important;
}

.yellow .modal-des {
  color: #000000 !important;
}
.yellow span.tabs-label{
  color: #f6f100 !important;
}
.yellow .item-notice a b {
  color: #f6f100 !important;
}
.bg-select {
  background: #bedff9 !important;
  border: 1px solid #e2e2e2 !important;
}
.bg-default {
  background: #ffffff !important;
  border: 1px solid #e2e2e2 !important;
}
.bg-select.correct {
  background: #C9FFED !important;
  border: 1px solid #24D198 !important;
}
.bg-default.correct {
  background: #C9FFED !important;
  border: 1px solid #24D198 !important;
}
.bg-select.disabled {
  background: #F6CFCD !important;
  border: 1px solid #E85E53 !important;
}
.bg-select.disabled i {
color: #E85E53 !important;
} 
.bg-select.correct i {
  color: #24D198 !important;
  } 
  .bg-select.disabled.correct{
    background: #C9FFED !important;
    border: 1px solid #24D198 !important;
  }
.white .bg-select {
  background: #bedff9 !important;
  border: 1px solid #ffffff !important;
  color: #000000;
}
.white .bg-default {
  background: #000000 !important;
  border: 1px solid #ffffff !important;
  color: #ffffff;
}
.white .bg-select.correct {
  background: #abe584 !important;
  border: 1px solid #e2e2e2 !important;
  color: #000000;
}
.white .bg-default.correct {
  background: #abe584 !important;
  border: 1px solid #e2e2e2 !important;
  color: #000000;
}

.yellow .bg-select {
  background: #bedff9 !important;
  border: 1px solid #ffffff !important;
  color: #000000;
}
.yellow .bg-default {
  background: #000000 !important;
  border: 1px solid #f6f100 !important;
  color: #f6f100;
}
.yellow .bg-select.correct {
  background: #abe584 !important;
  border: 1px solid #e2e2e2 !important;
  color: #000000;
}
.yellow .bg-default.correct {
  background: #abe584 !important;
  border: 1px solid #e2e2e2 !important;
  color: #000000;
}
.yellow .form-control:disabled,
.form-control[readonly] {
  color: #000000 !important;
}
.white .form-control:disabled,
.form-control[readonly] {
  color: #000000 !important;
}
.disabled {
  pointer-events: none;
}
.yellow .el-dialog {
  background: #000 !important;
  border: 1px solid #f6f100 !important;
  border-radius: 10px;
}
.white .el-dialog {
  background: #000;
  border: 1px solid #fff;
  border-radius: 10px;
}
.yellow .el-dialog__header {
  background: #000000 !important;
  color: #f6f100 !important;
}
.white .el-dialog__header {
  background: #000000 !important;
  color: #000000 !important;
}
.yellow .card .card-header .card-toolbar {
  color: #000000 !important;
}
.white .card .card-header .card-toolbar {
  color: #000000 !important;
}
.yellow .el-dialog__header .el-dialog__title {
  color: #f6f100 !important;
}
.white .el-dialog__header .el-dialog__title {
  color: #ffffff !important;
}
.yellow .el-dialog__body {
  background: #000000 !important;
}
.white .el-dialog__body {
  background: #000000 !important;
}
.yellow .form-label {
  color: #f6f100 !important;
}
.white .form-label {
  color: #ffffff !important;
}
.white span.tabs-label{
  color: #ffffff !important;
}
.white .item-notice a b {
  color: #ffffff !important;
}
.yellow .card-header svg path {
  stroke: #000000 !important;
}
.white .card-header svg path {
  stroke: #000000 !important;
}

.yellow .el-dialog .card {
  color: #f6f100 !important;
  background: #000000 !important;
  border: 1px solid #000000 !important;
}
.white .el-dialog .card {
  color: #ffffff !important;
  background: #000000 !important;
  border: 1px solid #000000 !important;
}

.yellow .el-dialog .custom-modal,
.yellow .el-dialog .custom-modal p,
.yellow .el-dialog h4,
.yellow .el-dialog .form-check-label,
.yellow .el-dialog h1,
.yellow .el-dialog b,
.yellow .el-dialog span {
  color: #f6f100 !important;
}

.white .el-dialog .custom-modal,
.white .el-dialog .custom-modal p,
.white .el-dialog h4,
.white .el-dialog .form-check-label,
.white .el-dialog h1,
.white .el-dialog b,
.white .el-dialog span {
  color: #ffffff !important;
}
.yellow .el-dialog .el-select span {
  color: #000000 !important;
}
.white .el-dialog .el-select span {
  color: #000000 !important;
}
.yellow .btn-custom svg path {
  stroke: #f6f100 !important;
  fill: #f6f100 !important;
}
.white .btn-custom svg path {
  stroke: #ffffff !important;
  fill: #ffffff !important;
}
.yellow .el-progress .el-progress__text {
  color: #f6f100 !important;
}
.white .el-progress .el-progress__text {
  color: #ffffff !important;
}

.yellow .el-dialog .bg-select .form-check-label {
  color: #000000 !important;
}
.white .el-dialog .bg-select .form-check-label {
  color: #000000 !important;
}

#carouselExampleSlidesOnly.carousel .carousel-inner {
  position: relative;
  width: 100%;
  max-height: 500px !important;
  overflow: hidden;
}
#carouselExampleSlidesOnly.carousel .carousel-inner .carousel-item {
  max-height: 500px !important;
}
#carouselExampleSlidesOnly.carousel .carousel-inner .carousel-item img {
  /* height: 100% !important; */
  max-height: 500px;
  object-fit: cover !important;
}

.yellow .el-dialog .content-info,
.yellow .el-dialog .content-info p,
.yellow .el-dialog .content-signature,
.yellow .el-dialog .content-signature p {
  color: #000 !important;
}

.white .el-dialog .content-info,
.white .el-dialog .content-info p,
.white .el-dialog .content-signature,
.white .el-dialog .content-signature p {
  color: #000 !important;
}

/* .app.carousel-custom .carousel-indicators li.active {
  width: 70px !important;
  height: 0.1px !important;
  border-radius: 20px;
  background-color: #9877c1 !important;
  background-clip: unset;
} */

.app.carousel-custom .carousel-indicators li {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50%;
  background-color: #d9d9d9 !important;
}
.app.carousel-custom .carousel-indicators {
  margin-bottom: 3rem !important;
}

.carousel .app.carousel-indicators {
  margin-bottom: 0.5rem !important;
  display: flex;
  align-items: center;
}
.carousel .app.carousel-indicators button.active {
  /* width: 70px !important;
  height: 0.1px !important;
  border-radius: 20px; */
  background-color: #9877c1 !important;
  /* background-clip: unset; */
}

.carousel .app.carousel-indicators button {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50%;
  background-color: #d9d9d9 !important;
}
.btn-advanced {
  width: 100%;
}
@media (min-width: 992px) {
  .btn-advanced {
    width: 110px !important;
  }
}
.header2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 1408px) {
  .header2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
}
.content-search {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}
@media (max-width: 1408px) {
  .content-search {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
  }
}
@media (max-width: 992px) {
  .content-search {
    display: block;
    width: 100%;
  }
}

.loader {
  display: flex;
  width: 100%;
  align-items: center;
  flex-direction: column;
}

.loader-wheel {
  animation: spin 1s infinite linear;
  border: 2px solid rgba(30, 30, 30, 0.5);
  border-left: 4px solid #ddd;
  border-radius: 50%;
  height: 50px;
  margin-bottom: 10px;
  width: 50px;
}

.loader-text {
  color: #7e7c7c;
  font-family: arial, sans-serif;
}

.loader-text:after {
  content: 'กำลังโหลด';
  animation: load 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes load {
  0% {
    content: 'กำลังโหลด';
  }
  33% {
    content: 'กำลังโหลด.';
  }
  67% {
    content: 'กำลังโหลด..';
  }
  100% {
    content: 'กำลังโหลด...';
  }
}
.item-notice span {
  color: #000000 !important;
}
.white .item-notice span{
  color: #ffffff !important;
}
.yellow .item-notice span{
  color: #f6f100 !important;
}
.el-tag.el-tag--info {
  font-size: small !important;
}
.el-rate.is-disabled .el-rate__item {
  cursor: auto;
  color: #D9D9D9 !important;
}
.el-progress-circle svg path.el-progress-circle__track {
  stroke: #D9D9D9 !important;
}

/* menu */
.app-header-menu .menu .menu-item .menu-link.active .menu-title {
  color: #9877c1 !important;
}
.app-header-menu .menu .menu-item .menu-link.active .menu-title svg path {
  stroke: #9877c1 !important;
}
.app-header-menu .menu .menu-item:hover .menu-link .menu-title {
  color: #9877c1 !important;
}
.app-header-menu .menu .menu-item:hover .menu-link .menu-title svg path{
  stroke: #9877c1 !important;
}
.text-app-primary{
  color: #9877c1 !important;
}
.el-button:focus, .el-button:hover {
  color: #9877c1 !important;
}
.search-input .el-input__wrapper{
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px!important;
}
/* .accordion-button {
  color: #9877c1 !important;
} */
.accordion-button:not(.collapsed)::after {
  background-image: var(#9877c1) !important;
}
.normal .accordion.faq .accordion-item .accordion-header button ,
.normal1 .accordion.faq .accordion-item .accordion-header button,
.normal2 .accordion.faq .accordion-item .accordion-header button,
.normal3 .accordion.faq .accordion-item .accordion-header button,
.normal4 .accordion.faq .accordion-item .accordion-header button,
.normal5 .accordion.faq .accordion-item .accordion-header button {
  color: #9877c1 !important;
  background: #eceffb  !important;
}
.el-select-dropdown__item.is-hovering {
  background-color: transparent !important;
}
li.el-select-dropdown__item.is-hovering:hover {
  background: #e5e8f9 !important;
  border-radius: 8px !important;
}