/********************************************************************
 *
 *  PROPRIETARY and CONFIDENTIAL
 *
 *  This file is licensed from, and is a trade secret of:
 *
 *                   MaivenPoint Pte. Ltd.
 *                   1 FUSIONOPOLIS PLACE,
 *                   #05-20/21/22/23
 *                   SINGAPORE 138522
 *                   Telephone: +65 6692 9028
 *                   WWW: www.maivenpoint.com
 *
 *  Refer to your Software-as-a-Service Agreement for restrictions on use,
 *  duplication, or disclosure.
 *
 *  RESTRICTED RIGHTS LEGEND
 *
 *  Copyright © 2021-2024 MaivenPoint® Pte. Ltd. All Rights Reserved.
 *
 *  Unpublished - All rights reserved under the copyright laws of Singapore.
 */
/********************************************************************
 *
 *  PROPRIETARY and CONFIDENTIAL
 *
 *  This file is licensed from, and is a trade secret of:
 *
 *                   MaivenPoint Pte. Ltd.
 *                   1 FUSIONOPOLIS PLACE,
 *                   #05-20/21/22/23
 *                   SINGAPORE 138522
 *                   Telephone: +65 6692 9028
 *                   WWW: www.maivenpoint.com
 *
 *  Refer to your Software-as-a-Service Agreement for restrictions on use,
 *  duplication, or disclosure.
 *
 *  RESTRICTED RIGHTS LEGEND
 *
 *  Copyright © 2021-2024 MaivenPoint® Pte. Ltd. All Rights Reserved.
 *
 *  Unpublished - All rights reserved under the copyright laws of Singapore.
 */
.tool-infolabel span.tool-infolabel-icon {
  line-height: var(--line-spacing);
}
.tool-infolabel span.tool-infolabel-icon::before {
  color: #7D848B !important;
}
.progress-bar {
  width: 100%;
  height: 10px;
  display: flex;
  overflow: hidden;
}
.progress-segment {
  flex: 1;
  background: #E6E7E8;
  transition: background 0.3s ease-in-out;
}
.progress-segment.completed {
  background: #0D76B8;
}
.progress-segment.current {
  background: #A7DAEB;
}
.step-labels {
  display: flex;
  justify-content: space-around;
  margin-top: 8px;
  margin-left: -33px;
}
.text-title {
  margin-top: 16px;
  margin-bottom: 24px;
}
.guest-home-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}
.guest-home-containerIterm {
  overflow: auto;
  height: calc(100dvh - 150px);
}
.guest-home-containerIterm-scroll {
  flex-grow: 1;
  position: relative;
  padding: 30px 30px 30px 30px;
}

/********************************************************************
 *
 *  PROPRIETARY and CONFIDENTIAL
 *
 *  This file is licensed from, and is a trade secret of:
 *
 *                   MaivenPoint Pte. Ltd.
 *                   1 FUSIONOPOLIS PLACE,
 *                   #05-20/21/22/23
 *                   SINGAPORE 138522
 *                   Telephone: +65 6692 9028
 *                   WWW: www.maivenpoint.com
 *
 *  Refer to your Software-as-a-Service Agreement for restrictions on use,
 *  duplication, or disclosure.
 *
 *  RESTRICTED RIGHTS LEGEND
 *
 *  Copyright © 2021-2024 MaivenPoint® Pte. Ltd. All Rights Reserved.
 *
 *  Unpublished - All rights reserved under the copyright laws of Singapore.
 */
.tool-infolabel span.tool-infolabel-icon {
  line-height: var(--line-spacing);
}
.tool-infolabel span.tool-infolabel-icon::before {
  color: #7D848B !important;
}
.progress-bar {
  width: 100%;
  height: 10px;
  display: flex;
  overflow: hidden;
}
.progress-segment {
  flex: 1;
  background: #E6E7E8;
  transition: background 0.3s ease-in-out;
}
.progress-segment.completed {
  background: #0D76B8;
}
.progress-segment.current {
  background: #A7DAEB;
}
.step-labels {
  display: flex;
  justify-content: space-around;
  margin-top: 8px;
  margin-left: -33px;
}
.text-title {
  margin-top: 16px;
  margin-bottom: 24px;
}
.guest-header-container {
  height: 68px;
  background-color: var(--white);
  background-image: url(../../resources/images/header-bg-4e34aa24.svg);
  background-repeat: no-repeat;
  background-position: right;
  display: flex;
  justify-content: space-between;
  padding: 0 24px;
  align-items: center;
}
.guest-header-container .button-icon-part {
  font-size: var(--font-xxxl);
}
.guest-header-container-color .button-text-part {
  color: #0d76b8;
}
.guest-header-container-color .button-button[data-classify=default],
.guest-header-container-color .button-icon[data-classify=default],
.guest-header-container-color .button-submit[data-classify=default] {
  border-color: #0d76b8;
}

/********************************************************************
 *
 *  PROPRIETARY and CONFIDENTIAL
 *
 *  This file is licensed from, and is a trade secret of:
 *
 *                   MaivenPoint Pte. Ltd.
 *                   1 FUSIONOPOLIS PLACE,
 *                   #05-20/21/22/23
 *                   SINGAPORE 138522
 *                   Telephone: +65 6692 9028
 *                   WWW: www.maivenpoint.com
 *
 *  Refer to your Software-as-a-Service Agreement for restrictions on use,
 *  duplication, or disclosure.
 *
 *  RESTRICTED RIGHTS LEGEND
 *
 *  Copyright © 2021-2024 MaivenPoint® Pte. Ltd. All Rights Reserved.
 *
 *  Unpublished - All rights reserved under the copyright laws of Singapore.
 */
/********************************************************************
 *
 *  PROPRIETARY and CONFIDENTIAL
 *
 *  This file is licensed from, and is a trade secret of:
 *
 *                   MaivenPoint Pte. Ltd.
 *                   1 FUSIONOPOLIS PLACE,
 *                   #05-20/21/22/23
 *                   SINGAPORE 138522
 *                   Telephone: +65 6692 9028
 *                   WWW: www.maivenpoint.com
 *
 *  Refer to your Software-as-a-Service Agreement for restrictions on use,
 *  duplication, or disclosure.
 *
 *  RESTRICTED RIGHTS LEGEND
 *
 *  Copyright © 2021-2024 MaivenPoint® Pte. Ltd. All Rights Reserved.
 *
 *  Unpublished - All rights reserved under the copyright laws of Singapore.
 */
.tool-infolabel span.tool-infolabel-icon {
  line-height: var(--line-spacing);
}
.tool-infolabel span.tool-infolabel-icon::before {
  color: #7D848B !important;
}
.progress-bar {
  width: 100%;
  height: 10px;
  display: flex;
  overflow: hidden;
}
.progress-segment {
  flex: 1;
  background: #E6E7E8;
  transition: background 0.3s ease-in-out;
}
.progress-segment.completed {
  background: #0D76B8;
}
.progress-segment.current {
  background: #A7DAEB;
}
.step-labels {
  display: flex;
  justify-content: space-around;
  margin-top: 8px;
  margin-left: -33px;
}
.text-title {
  margin-top: 16px;
  margin-bottom: 24px;
}
.guest-search-container {
  height: 120px;
  background-color: #E8EBF1;
  z-index: 100;
  display: flex;
  padding: 21px 41px 0 32px !important;
  align-items: center;
  flex-direction: column;
}
.guest-search-container .aui-searchbox {
  border-radius: 14px;
  border: none;
  flex: 1 !important;
}
.guest-search-container .aui-searchbox .aui-searchbox-input {
  border-radius: 14px;
}
.guest-search-search-top {
  display: flex;
  width: 100%;
  align-items: center;
  margin-bottom: 13px;
}
.guest-search-search-top-title {
  font-size: 20px;
  color: #454868;
  font-weight: bold;
  margin-right: 2%;
  white-space: nowrap;
  flex: 0.9;
}
.guest-search-search-top .courses-tab,
.guest-search-search-top .badges-tab {
  font-size: 14px;
  color: #27313C;
}
.guest-search-search-top .courses-tab {
  flex: 0.1;
  margin-right: 20px;
  cursor: pointer;
}
.guest-search-search-top .badges-tab {
  flex: 1;
  cursor: pointer;
}
.guest-search-search-bottom {
  display: flex;
  width: 100%;
}
.guest-search-search-bottom-right {
  display: flex;
  align-items: center;
  white-space: nowrap;
  text-align: center;
  margin: 0 -8px 0 24px;
  font-size: 16px;
}
@media (max-width: 1020px) {
  .common-ui-main-layout-content {
    overflow: auto;
  }
  .guest-search-search-top .courses-tab,
  .guest-search-search-top .badges-tab {
    flex: 1;
  }
}
.aui-mobile-view .guest-search-search-top {
  height: 25px;
}
.aui-mobile-view .guest-search-search-bottom-right {
  margin: 0 -30px 0 0;
}

/********************************************************************
 *
 *  PROPRIETARY and CONFIDENTIAL
 *
 *  This file is licensed from, and is a trade secret of:
 *
 *                   MaivenPoint Pte. Ltd.
 *                   1 FUSIONOPOLIS PLACE,
 *                   #05-20/21/22/23
 *                   SINGAPORE 138522
 *                   Telephone: +65 6692 9028
 *                   WWW: www.maivenpoint.com
 *
 *  Refer to your Software-as-a-Service Agreement for restrictions on use,
 *  duplication, or disclosure.
 *
 *  RESTRICTED RIGHTS LEGEND
 *
 *  Copyright © 2021-2024 MaivenPoint® Pte. Ltd. All Rights Reserved.
 *
 *  Unpublished - All rights reserved under the copyright laws of Singapore.
 */
.tool-infolabel span.tool-infolabel-icon {
  line-height: var(--line-spacing);
}
.tool-infolabel span.tool-infolabel-icon::before {
  color: #7D848B !important;
}
.progress-bar {
  width: 100%;
  height: 10px;
  display: flex;
  overflow: hidden;
}
.progress-segment {
  flex: 1;
  background: #E6E7E8;
  transition: background 0.3s ease-in-out;
}
.progress-segment.completed {
  background: #0D76B8;
}
.progress-segment.current {
  background: #A7DAEB;
}
.step-labels {
  display: flex;
  justify-content: space-around;
  margin-top: 8px;
  margin-left: -33px;
}
.text-title {
  margin-top: 16px;
  margin-bottom: 24px;
}
.guest-common-banner-guest {
  width: 100%;
  background: linear-gradient(to right, #DAE7F5, #F6F8FA);
  padding: 16px 32px;
  display: flex;
}
.guest-common-banner-guest-banner-img {
  width: 202px;
  height: 113px;
  border-radius: 12px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.guest-common-banner-guest-right {
  margin-left: 24px;
  width: calc(100% - 202px);
}
.guest-common-banner-guest-right-top {
  display: flex;
  align-items: center;
  height: 32px;
}
.guest-common-banner-guest-right-top img {
  width: 24px;
  height: 24px;
}
.guest-common-banner-guest-right-top span {
  color: #5D6778;
}
.guest-common-banner-guest-prerequisite {
  margin-top: 12px;
  margin-bottom: -2px;
}
.guest-common-banner-guest-course-prerequisite {
  width: fit-content;
  height: 21px;
  border-radius: 2px;
  padding-top: 3px;
  padding-right: 4px;
  padding-bottom: 3px;
  padding-left: 4px;
  border-width: 1px;
  background-color: #2D8FC4;
  display: flex;
  align-items: center;
}
.guest-common-banner-guest-course-content-prerequisite {
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
  height: 21px;
  color: #FFFFFF;
}
.guest-common-banner-guest-title {
  color: #27313C;
  font-size: 24px;
  padding-top: 12px;
  font-weight: bold;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.guest-course-info-card-guest-course {
  margin-bottom: var(--margin-l);
  display: flex;
  justify-content: space-between;
}
.guest-course-info-card-guest-course-itemcontainer {
  display: flex;
  grid-column-gap: 40px;
  flex-direction: column;
  min-width: 304px;
}
.guest-course-info-card-guest-course-itemcontainer.certificate-item-view {
  display: grid;
  grid-template-columns: 2fr 1fr;
  row-gap: 5px;
}
@media (max-width: 1300px) {
  .guest-course-info-card-guest-course-itemcontainer.certificate-item-view {
    grid-template-columns: 1fr 1fr;
  }
}
.guest-course-info-card-guest-course .show-toggle-button {
  cursor: pointer;
  font-size: 14px;
  color: #0866CA;
}
.guest-course-info-card-guest-course.certificate-content-view {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px;
}
@media (max-width: 915px) {
  .guest-course-info-card-guest-course.certificate-content-view.flex-col {
    display: flex;
    flex-direction: column;
  }
}
.guest-course-info-card-guest-course.certificate-content-view .common-ui-form {
  margin-right: 0 !important;
}
.guest-course-info-card-guest-course-item {
  display: flex;
  color: var(--alt-5);
  margin-bottom: var(--margin-xs);
  align-items: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 24px;
}
@media (max-width: 1770px) {
  .guest-course-info-card-guest-course-item {
    max-width: 300px;
  }
}
.guest-course-info-card-guest-course-item.co-course-item {
  align-items: center;
  min-width: 270px;
}
.guest-course-info-card-guest-course-item.co-course-item .co-course-manager-btn {
  max-width: 162px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #0866CA;
  cursor: pointer;
  font-weight: 600;
}
.guest-course-info-card-guest-course-item .iconcontainer {
  min-width: 32px;
  line-height: 1;
  display: flex;
  align-items: center;
  width: 32px;
  height: 32px;
  justify-content: center;
  background: #F7F7F7;
  margin-right: 8px;
}
.guest-course-info-card-guest-course-item .iconcontainer span {
  margin-right: 0;
}
.guest-course-info-card-guest-course-item .aui-ellipsis {
  max-width: 265px;
  line-height: 32px;
  text-overflow: ellipsis;
  word-break: break-word;
}
.guest-course-info-card-guest-course-item-price {
  display: flex;
  color: var(--alt-5);
  margin-bottom: var(--margin-xs);
  align-items: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 24px;
  margin-top: 8px;
}
.guest-course-info-card-guest-course-item-price .iconcontainer {
  min-width: 32px;
  line-height: 1;
  display: flex;
  align-items: center;
  width: 32px;
  height: 32px;
  justify-content: center;
  background: #F7F7F7;
  margin-right: 8px;
}
.guest-course-info-card-guest-course-item-price .iconcontainer span {
  margin-right: 0;
}
.guest-course-info-card-guest-course-item-price .aui-ellipsis {
  line-height: 32px;
  text-overflow: ellipsis;
  word-break: break-word;
}
.guest-course-info-card-guest-course-info {
  font-size: var(--font-l);
  margin-bottom: var(--margin-m);
  color: #5D6778;
  vertical-align: bottom;
  overflow: hidden;
  max-width: 100%;
  display: -moz-box;
  display: -webkit-box;
  -moz-box-orient: vertical;
  -webkit-box-orient: vertical;
  word-break: break-word;
  white-space: pre-line;
}
.guest-course-info-card-guest-course-info-topics {
  font-weight: bold;
  vertical-align: middle;
}
.guest-course-info-card-guest-course-info-topic-name {
  vertical-align: middle;
}
.guest-course-info-card-guest-course-info-topic {
  font-size: var(--font-l);
  display: inline-block;
  border: 1px solid #C2C5C8;
  padding: 5px 10px;
  border-radius: 18px;
  margin: 0 8px 8px 0;
  color: #5D6778;
  width: fit-content;
  max-width: 300px;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-word;
  vertical-align: -webkit-baseline-middle;
  vertical-align: -moz-middle-with-baseline;
  overflow: hidden;
}
.guest-course-info-card-guest-course-info .font-blod {
  font-weight: bold;
}
.guest-course-info-card-guest-course-info .aui-richeditor-echo {
  margin-left: -8px;
}
.guest-course-info-card-guest-course .common-ui-form {
  display: inline-block;
  margin-right: 40px !important;
}
.guest-course-info-card-guest-course .common-ui-formcol-overview,
.guest-course-info-card-guest-course .common-ui-formcol-overview-label {
  font-size: var(--font-l);
}

/********************************************************************
 *
 *  PROPRIETARY and CONFIDENTIAL
 *
 *  This file is licensed from, and is a trade secret of:
 *
 *                   MaivenPoint Pte. Ltd.
 *                   1 FUSIONOPOLIS PLACE,
 *                   #05-20/21/22/23
 *                   SINGAPORE 138522
 *                   Telephone: +65 6692 9028
 *                   WWW: www.maivenpoint.com
 *
 *  Refer to your Software-as-a-Service Agreement for restrictions on use,
 *  duplication, or disclosure.
 *
 *  RESTRICTED RIGHTS LEGEND
 *
 *  Copyright © 2021-2024 MaivenPoint® Pte. Ltd. All Rights Reserved.
 *
 *  Unpublished - All rights reserved under the copyright laws of Singapore.
 */
.tool-infolabel span.tool-infolabel-icon {
  line-height: var(--line-spacing);
}
.tool-infolabel span.tool-infolabel-icon::before {
  color: #7D848B !important;
}
.progress-bar {
  width: 100%;
  height: 10px;
  display: flex;
  overflow: hidden;
}
.progress-segment {
  flex: 1;
  background: #E6E7E8;
  transition: background 0.3s ease-in-out;
}
.progress-segment.completed {
  background: #0D76B8;
}
.progress-segment.current {
  background: #A7DAEB;
}
.step-labels {
  display: flex;
  justify-content: space-around;
  margin-top: 8px;
  margin-left: -33px;
}
.text-title {
  margin-top: 16px;
  margin-bottom: 24px;
}
.guest-learning-material-detail-name {
  padding: var(--padding-m) var(--padding-xl);
  background: transparent linear-gradient(276deg, #F6F8FA 0%, #DAE7F5 100%) 0% 0% no-repeat padding-box;
  display: flex;
  align-items: center;
}
.guest-learning-material-detail-name img {
  height: 113px;
  border-radius: 12px;
}
.guest-learning-material-detail-name .top-img-container {
  border-radius: 12px;
}
.guest-learning-material-detail-name .course-img {
  position: relative;
  height: 113px;
  border-radius: 12px;
  background-repeat: no-repeat;
  background-size: contain;
}
.guest-learning-material-detail-name .need-mask {
  background-color: #fff;
  opacity: 0.64;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  border-radius: 12px;
}
.guest-learning-material-detail-name .need-mask img {
  width: 67px;
}
.guest-learning-material-detail-name-text {
  margin-left: var(--margin-l);
  font-size: 24px;
  font-weight: var(--font-bold);
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  max-width: 40%;
}
.guest-learning-material-detail-name-text .course-type-title {
  font-size: 14px;
  color: #5D6778;
  font-weight: normal;
  display: inline-block;
  height: 24px;
}
.guest-learning-material-detail-name-text .course-type-icon {
  width: 24px !important;
  height: 24px !important;
  border-radius: 0 !important;
  margin-right: 4px !important;
}
.guest-learning-material-detail-name-text .common-ui-icontext {
  vertical-align: middle;
}
.guest-learning-material-detail-name-right-content {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-self: normal;
  align-items: flex-end;
}
.guest-learning-material-detail-name-right-content .top-icon-container {
  display: flex;
  align-items: center;
}
.guest-learning-material-detail-name-right-content .top-icon-container .top-icon-item {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(70, 70, 70, 0.22);
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  cursor: pointer;
}
.guest-learning-material-detail-name-right-content .top-icon-container .top-icon-item .common-ui-icontext-icon {
  margin-right: 0;
}
.guest-learning-material-detail-name-right-content .top-icon-container .top-icon-color-default {
  background-color: #fff;
}
.guest-learning-material-detail-name-right-content .top-icon-container .top-icon-color-theme {
  background-color: var(--theme-color);
}
.guest-learning-material-detail-name-right-content .top-icon-container .top-icon-color-theme .common-ui-icontext-icon:before {
  color: #fff;
}
.guest-learning-material-detail-name-right-content .top-icon-container .collect-icon {
  margin-right: 8px;
}
.guest-learning-material-detail-name-right-content .top-icon-container .share-icon:active {
  background-color: #0D76B8;
}
.guest-learning-material-detail-name-right-content .top-icon-container .share-icon:active .common-ui-icontext-icon:before {
  color: #fff;
}
.guest-learning-material-detail-name-right-content .top-icon-container .collect-icon-click {
  background-color: #0D76B8;
}
.guest-learning-material-detail-name-right-content .top-button-container {
  margin-top: auto;
}
.guest-learning-material-detail-container {
  width: 80%;
  margin: var(--margin-l) auto;
}
.guest-learning-material-detail-container .enroll-class-card {
  margin-bottom: var(--margin-l);
}
.guest-learning-material-detail-classinfo .button-text-part {
  font-size: 16px;
}
.guest-learning-material-detail-classinfo-itemcontainer {
  display: flex;
  grid-column-gap: 40px;
  margin-bottom: var(--margin-s);
}
.guest-learning-material-detail-classinfo-item {
  display: flex;
  color: var(--alt-5);
}
.guest-learning-material-detail-classinfo-item .iconcontainer {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  margin-right: var(--margin-s);
  background-color: #F7F7F7;
  font-size: var(--font-l);
  border-radius: 2px;
  margin-top: -4px;
}
.guest-learning-material-detail-classinfo-item .iconcontainer .common-ui-icontext-icon {
  margin: 0;
}
.guest-learning-material-detail-classinfo-item .aui-ellipsis {
  line-height: 32px;
}
.guest-learning-material-detail-classinfo-inlineitem {
  display: inline-flex;
  color: var(--alt-5);
}
.guest-learning-material-detail-classinfo .aui-expander {
  box-shadow: none;
}
.guest-learning-material-detail-classinfo .aui-expander .aui-expander-title {
  border-radius: initial !important;
  border-top: none;
  border-bottom: none;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.guest-learning-material-detail-classinfo .aui-expander .aui-expander-title .aui-expander-action-end {
  margin-right: 0 !important;
}
.guest-learning-material-detail-classinfo-lp-icon {
  background: #0D76B8;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  margin-right: 8px;
}
.guest-learning-material-detail-classinfo-lp-icon::before {
  color: var(--white);
  padding: var(--padding-s);
}
.guest-learning-material-detail-classinfo-lp + .guest-learning-material-detail-classinfo-lp {
  margin-top: 8px;
}
.guest-learning-material-detail-classinfo-title {
  font-size: var(--font-xl);
  font-weight: bold;
}
.guest-learning-material-detail-classinfo .classinfo-firstlp .aui-expander .aui-expander-title {
  border-top: 1px solid #e6e7e8 !important;
}
.guest-learning-material-detail-classinfo .classinfo-firstlp.no-title-border .aui-expander .aui-expander-title {
  border-top: none !important;
}
.guest-learning-material-detail-classinfo-le {
  padding: var(--padding-l);
  background: #f7f7f7;
}
.guest-learning-material-detail-classinfo-le-container + .guest-learning-material-detail-classinfo-le-container {
  margin-top: var(--margin-l);
}
.guest-learning-material-detail-classinfo-le-title {
  font-size: 18px;
  font-weight: var(--font-bold);
  margin-bottom: var(--margin-s);
  display: flex;
}
.guest-learning-material-detail-classinfo-lo {
  background-color: var(--white);
  padding: var(--padding-m);
  box-shadow: 0px 2px 6px #00000014;
  border-radius: 12px;
}
.guest-learning-material-detail-classinfo-lo + .guest-learning-material-detail-classinfo-lo {
  margin-top: var(--margin-s);
}
.guest-learning-material-detail-classinfo-lo-top {
  padding-bottom: 12px;
  display: flex;
  justify-content: space-between;
  height: 42px;
}
.guest-learning-material-detail-classinfo-lo-top-text {
  font-weight: var(--font-semibold);
  align-self: start;
  font-size: 16px;
  overflow: hidden;
}
.guest-learning-material-detail-classinfo-lo-top-icon {
  font-size: 18px;
  align-self: end;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.guest-learning-material-detail-classinfo-lo-top-icon::before {
  color: inherit !important;
}
.guest-learning-material-detail-classinfo-lo-bottom {
  border-top: 1px solid var(--normal-border);
  padding-top: 12px;
}
.guest-learning-material-detail-item-container {
  width: 100%;
  height: 264px;
  background-color: white;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: var(--shadow-size-l) var(--shadow-color);
}
.guest-learning-material-detail-item-imagecontainer {
  height: 50%;
}
.guest-learning-material-detail-item-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
  align-items: stretch;
}
.guest-learning-material-detail-item-desc-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--padding-m);
  flex-wrap: wrap;
  height: 50%;
}
.guest-learning-material-detail-item-title {
  color: #27313C;
  font-size: 16px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 20px;
  max-height: 40px;
  word-break: break-word;
}
.guest-learning-material-detail-item-inline {
  display: flex;
  font-style: italic;
  color: #5D6778;
  align-items: center;
  gap: 4px;
}
.guest-learning-material-detail-item-inline .fia-clock::before {
  color: #5D6778;
}
.guest-learning-material-detail-all-header {
  font-weight: bold;
  font-size: 20px;
  padding-bottom: var(--padding-l);
}
.guest-learning-material-detail-all-container {
  padding: 32px var(--padding-l) 32px var(--padding-l);
}
.guest-learning-material-detail-no-item-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.guest-learning-material-detail-no-item {
  width: 50%;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJEAAAA8CAYAAABmWlgTAAAABHNCSVQICAgIfAhkiAAABQVJREFUeF7tXc1uUkEUHugv0NhautCNtInRLjQl+gB2ZVxoonHlqn0EfQIbn0CfQLpzY2IXrlzYxheg0cTETS+pEhcVi4GWFqGeQ7hXfga4zD1z71x6bkK4hZkzZ77z8Z2ZgZxGBF+MgEcEIh77c3dGQDCJmASeEWASeYaQDRhDor29vUwkElkLU0jOzs6eLC0tvQmTzzp8NYZE+/v7sVqt9gkmeVvHRDXZLADxr6ZSqd+a7IfCrDEkQrTy+fyV09PTXbid8xO98fFxAaqiOuTH6enpF6qde/UbGxurzc/P44fK+MsoEiFauVzuPgR0C26jfqA3MTEhpqam/Bhq2DFeLSwsPB22UxDtjSMRggDrow1IE891AwJjiHg8LvDZsOt7MplcBr/Khvkldcc49NBLUKKIZVlbAOIDnSDGYjEBaUPnEKq2H4EKvVPt7Hc/I0mEIBQKhdlisbgLRErpAMXgNLYFBHqoY866bBpLIpwwqNEteMLFZZwagEQiYVwaAwUuwYdmGUj0g3q+Ou0ZTaLm+mgdgH1NCQLspgTuyEy7YJ7PYC300jS/BvljPIlwAgcHB9L999vPyb7ze3zzl/T9ctnM9SqcN4UiHp2ghsJpJtEgLQj2fSZRsPi3jc5KpDEYrEQawSUwzUpEACKVCVYiKiQldliJNIJLYJqViABEKhOsRFRIshJpRFKPaVYiPbgqWWUlUoLNXSdeE7nDKahWrERBIS8Zl5VIYzBYiTSCS2CalYgARCoTrERUSPLuTCOSekyzEunBVckqK5ESbO468ZrIHU5BtWIlCgp53p35izwrkb94DzsaK9GwiGlsz2sijeCyEmkEl8A0KxEBiFQmWImokFQ4J8If5Ns/2u+8l7nFP9SnDVaolej914ui8jcqZCRKTNbFvevyYh1MIiaRg0D+z6T48jMu7l47bFOiD9/mxI1LZXH5QlWKFpOISeQZASaRZwjbDIQ6nalCwSRSRU7ej0lEi6cna7w78wRf/869zolUh2QlUkWOlchBgEnEJPKMAJPIM4S8sGYSjTCJSqVSGsrfzbZOsV6vzx0fH5OWnjOVRFDcakMS3mw0Gj1sfR1KNRdnZmaytFRQt0a+O4OA37HdAQKs2vdQBQzLCqftv6Gg0yLc42PgBTYHthmmgcEkGmYanW0twNhqeTELGDfIh8/wcEgHtSp3vAzU2dc1iZAElUplBT4Fi0iADlKk4TVttaeZRJQh/28LYogks8nVIB0SEbKBBdXksF5mmwL28qKLRDZZmiqCyoFq4SiInun0t8okCgJ1Z0wkGT4sSKvbMnI1SIRrEXhaA+atBk0YGVyggF4q3neZPDo6IrVHEWIIkIAK+hSm/LCRBbHZhoE2cW0WgfUBFtVc92Nk1TEghYpqtUoWeLR3cnJCZk91XnY/LMaO1WyxIGkIrwySKIMqFELn2WUzENhsTWdY6hfT2YoZvrEXBiOw20xnmUY663S0ubBONxfWuAvD3ZizbTd4YuyaBgQg/jsQfwtM2wtr5+jAScdux7XJ1WeL33ZI6NYutwsOAYhpEUbvtcXvIksvT12fE7mdKmzHMSU2LnAy3TxPwnvZYaOW/9vh1tcRa5cb4rBxm3Lu5CTy4lzza4+uQ8vWk29J+nVI22/sIFIypgI3eIBvPYOKZzOdNiAbHI701x5uQOM2o4WAUUo0WtCen9kwic5PrLXNlEmkDdrzY/gfGAx5WEXLO5wAAAAASUVORK5CYII=);
  background-repeat: no-repeat;
  height: 50%;
  background-position: center;
}
.guest-learning-material-detail-no-item-text {
  margin-top: var(--margin-m);
}
.guest-learning-material-detail-home-items {
  display: grid;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-columns: repeat(6, 1fr);
}
.guest-learning-material-detail-items {
  display: flex;
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-wrap: wrap;
}
.guest-learning-material-detail-items .base-self-enrollment-detail-item-container {
  width: 308px;
}
.guest-learning-material-detail .iconcontainer {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  margin-right: var(--margin-s);
  background-color: #F7F7F7;
  font-size: var(--font-l);
  border-radius: 2px;
}
.guest-learning-material-detail .iconcontainer .common-ui-icontext-icon {
  margin: 0;
}
.guest-learning-material-detail-icon-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  position: relative;
  min-width: 34px;
}
.guest-learning-material-detail .aui-expander {
  margin-bottom: 24px;
}
.common-ui-module-navs-content-main-scroll:has( > .guest-learning-material-detail) {
  padding: 0;
}
@media (min-width: 1440px) and (max-width: 1920px) {
  .guest-learning-material-detail-home-items {
    grid-template-columns: repeat(4, 1fr);
  }
  .aui-mobile-view .common-ui-icontext {
    padding: 0;
  }
}
@media (max-width: 1440px) {
  .guest-learning-material-detail-name-text .common-ui-formcol {
    max-width: 20vw;
    white-space: nowrap;
  }
  .guest-learning-material-detail-name-text .course-type-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    max-width: 20vw;
    vertical-align: bottom;
  }
  .guest-learning-material-detail .common-ui-form {
    margin-right: 0;
  }
  .guest-learning-material-detail .view-learning-content-button,
  .guest-learning-material-detail .withdraw-button {
    margin-left: var(--margin-s);
  }
  .guest-learning-material-detail-home-items {
    grid-template-columns: repeat(3, 1fr);
  }
  .aui-mobile-view .common-ui-icontext {
    padding: 0;
  }
}
.aui-mobile-view .guest-learning-material-detail-name {
  padding: var(--padding-m);
}
.aui-mobile-view .guest-learning-material-detail-name img {
  height: 80px;
  width: 80px;
  border-radius: 12px;
}
.aui-mobile-view .guest-learning-material-detail-name .course-img {
  height: 80px;
  width: 80px;
}
.aui-mobile-view .guest-learning-material-detail-container {
  width: 100%;
  margin: 0;
  padding: 16px;
}
.aui-mobile-view .guest-learning-material-detail-classinfo {
  padding: var(--padding-m) !important;
}
.aui-mobile-view .guest-learning-material-detail-classinfo .common-ui-icontext {
  padding: 0;
}
.aui-mobile-view .guest-learning-material-detail-classinfo .aui-button {
  width: 100%;
}
.aui-mobile-view .guest-learning-material-detail-classinfo .aui-button button {
  width: 100%;
}
.aui-mobile-view .guest-learning-material-detail-classinfo .aui-button button .button-text-part {
  font-size: 14px;
}
.aui-mobile-view .guest-learning-material-detail-classinfo .aui-button + .aui-button {
  margin-left: 0;
}
.aui-mobile-view .guest-learning-material-detail-classinfo .aui-expander .aui-expander-title .aui-expander-action-end {
  margin-right: 8px !important;
}
.aui-mobile-view .guest-learning-material-detail-classinfo-itemcontainer {
  flex-direction: column;
  grid-row-gap: 8px;
}
.aui-mobile-view .guest-learning-material-detail-classinfo-inlineitem {
  display: flex;
}
.aui-mobile-view .guest-learning-material-detail-classinfo .inlineitem-form {
  margin-top: var(--margin-s);
}
.aui-mobile-view .guest-learning-material-detail-classinfo-le {
  padding: var(--padding-m) !important;
}
.aui-mobile-view .guest-learning-material-detail-classinfo-lo-top {
  height: auto;
}
.aui-mobile-view .guest-learning-material-detail-home-items {
  display: flex;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-wrap: wrap;
}
.aui-mobile-view .guest-learning-material-detail-home-items .base-self-enrollment-detail-item-container {
  width: 308px;
}
.aui-mobile-view .guest-learning-material-detail-items {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
}
.aui-mobile-view .guest-learning-material-detail-all-header {
  padding-bottom: var(--padding-m);
}
.aui-mobile-view .guest-learning-material-detail-all-container {
  padding: var(--padding-m);
}
@media (max-width: 768px) {
  .max-wrap {
    width: 100% !important;
    height: 100% !important;
  }
  .guest-learning-material-detail-name {
    padding: var(--padding-m);
    padding-top: var(--padding-s) !important;
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: relative;
  }
  .guest-learning-material-detail-name .course-img {
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    z-index: 0;
  }
  .guest-learning-material-detail-name .course-img img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
  }
  .guest-learning-material-detail-name .course-img ::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    background-color: #ffffff;
    opacity: 0.7;
    z-index: 1;
  }
  .guest-learning-material-detail-name-text {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }
  .guest-learning-material-detail-name-text .common-ui-formcol {
    max-width: 20vw;
    white-space: nowrap;
    padding: 0 0 0 12px;
    margin-bottom: var(--margin-s);
  }
  .guest-learning-material-detail-name-text .course-type-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    vertical-align: bottom;
    max-width: 60vw;
  }
  .guest-learning-material-detail-name-text .aui-ellipsis {
    z-index: 10;
  }
  .guest-learning-material-detail-name-right-content {
    width: 100%;
  }
  .guest-learning-material-detail-name-right-content .top-button-container {
    width: 100%;
    margin-top: var(--margin-m);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
  .guest-learning-material-detail-name-right-content .top-button-container .aui-button {
    width: 50%;
  }
  .guest-learning-material-detail-name-right-content .top-button-container .aui-button:nth-child(1) {
    margin-left: 0;
  }
  .guest-learning-material-detail-name-right-content .top-button-container .aui-button .button-button {
    width: 100%;
  }
  .guest-learning-material-detail-name-right-content .top-icon-container {
    position: absolute;
    z-index: 99;
    right: var(--margin-m);
    top: var(--margin-m);
  }
}

/********************************************************************
 *
 *  PROPRIETARY and CONFIDENTIAL
 *
 *  This file is licensed from, and is a trade secret of:
 *
 *                   MaivenPoint Pte. Ltd.
 *                   1 FUSIONOPOLIS PLACE,
 *                   #05-20/21/22/23
 *                   SINGAPORE 138522
 *                   Telephone: +65 6692 9028
 *                   WWW: www.maivenpoint.com
 *
 *  Refer to your Software-as-a-Service Agreement for restrictions on use,
 *  duplication, or disclosure.
 *
 *  RESTRICTED RIGHTS LEGEND
 *
 *  Copyright © 2021-2024 MaivenPoint® Pte. Ltd. All Rights Reserved.
 *
 *  Unpublished - All rights reserved under the copyright laws of Singapore.
 */
/********************************************************************
 *
 *  PROPRIETARY and CONFIDENTIAL
 *
 *  This file is licensed from, and is a trade secret of:
 *
 *                   MaivenPoint Pte. Ltd.
 *                   1 FUSIONOPOLIS PLACE,
 *                   #05-20/21/22/23
 *                   SINGAPORE 138522
 *                   Telephone: +65 6692 9028
 *                   WWW: www.maivenpoint.com
 *
 *  Refer to your Software-as-a-Service Agreement for restrictions on use,
 *  duplication, or disclosure.
 *
 *  RESTRICTED RIGHTS LEGEND
 *
 *  Copyright © 2021-2024 MaivenPoint® Pte. Ltd. All Rights Reserved.
 *
 *  Unpublished - All rights reserved under the copyright laws of Singapore.
 */
.tool-infolabel span.tool-infolabel-icon {
  line-height: var(--line-spacing);
}
.tool-infolabel span.tool-infolabel-icon::before {
  color: #7D848B !important;
}
.progress-bar {
  width: 100%;
  height: 10px;
  display: flex;
  overflow: hidden;
}
.progress-segment {
  flex: 1;
  background: #E6E7E8;
  transition: background 0.3s ease-in-out;
}
.progress-segment.completed {
  background: #0D76B8;
}
.progress-segment.current {
  background: #A7DAEB;
}
.step-labels {
  display: flex;
  justify-content: space-around;
  margin-top: 8px;
  margin-left: -33px;
}
.text-title {
  margin-top: 16px;
  margin-bottom: 24px;
}
.fd-render-section {
  margin-left: -16px;
  margin-right: -14px;
}

/********************************************************************
 *
 *  PROPRIETARY and CONFIDENTIAL
 *
 *  This file is licensed from, and is a trade secret of:
 *
 *                   MaivenPoint Pte. Ltd.
 *                   1 FUSIONOPOLIS PLACE,
 *                   #05-20/21/22/23
 *                   SINGAPORE 138522
 *                   Telephone: +65 6692 9028
 *                   WWW: www.maivenpoint.com
 *
 *  Refer to your Software-as-a-Service Agreement for restrictions on use,
 *  duplication, or disclosure.
 *
 *  RESTRICTED RIGHTS LEGEND
 *
 *  Copyright © 2021-2024 MaivenPoint® Pte. Ltd. All Rights Reserved.
 *
 *  Unpublished - All rights reserved under the copyright laws of Singapore.
 */
.base-form-regis-container .fd-render-section > .aui-expander.aui-expander-mini > .aui-expander-mini-title {
  margin: 0 8px;
}
.base-form-regis-container .aui-widget.aui-expander.aui-box.aui-box-partial.aui-expander-expand {
  margin: 8px;
}

/********************************************************************
 *
 *  PROPRIETARY and CONFIDENTIAL
 *
 *  This file is licensed from, and is a trade secret of:
 *
 *                   MaivenPoint Pte. Ltd.
 *                   1 FUSIONOPOLIS PLACE,
 *                   #05-20/21/22/23
 *                   SINGAPORE 138522
 *                   Telephone: +65 6692 9028
 *                   WWW: www.maivenpoint.com
 *
 *  Refer to your Software-as-a-Service Agreement for restrictions on use,
 *  duplication, or disclosure.
 *
 *  RESTRICTED RIGHTS LEGEND
 *
 *  Copyright © 2021-2024 MaivenPoint® Pte. Ltd. All Rights Reserved.
 *
 *  Unpublished - All rights reserved under the copyright laws of Singapore.
 */
/********************************************************************
 *
 *  PROPRIETARY and CONFIDENTIAL
 *
 *  This file is licensed from, and is a trade secret of:
 *
 *                   MaivenPoint Pte. Ltd.
 *                   1 FUSIONOPOLIS PLACE,
 *                   #05-20/21/22/23
 *                   SINGAPORE 138522
 *                   Telephone: +65 6692 9028
 *                   WWW: www.maivenpoint.com
 *
 *  Refer to your Software-as-a-Service Agreement for restrictions on use,
 *  duplication, or disclosure.
 *
 *  RESTRICTED RIGHTS LEGEND
 *
 *  Copyright © 2021-2024 MaivenPoint® Pte. Ltd. All Rights Reserved.
 *
 *  Unpublished - All rights reserved under the copyright laws of Singapore.
 */
.base-errorpage {
  height: 100%;
  min-height: 100%;
  overflow-y: auto;
  display: flex;
}
.base-errorpage > div {
  height: 510px;
  width: 740px;
  padding: 0 60px;
  margin: auto;
  background-color: var(--white);
  border-radius: var(--radius-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.base-errorpage > div > .h2 {
  margin-top: var(--margin-xl);
}
.base-errorpage > div > .h2 + div {
  margin-top: var(--margin-s);
  margin-bottom: var(--margin-xl);
}
.base-errorpage-error-image {
  width: 207px;
  height: 150px;
}
.base-errorpage-error-content {
  margin-top: 40px;
  max-width: 600px;
}
.base-errorpage-error-message {
  margin-top: var(--margin-m);
  margin-bottom: var(--margin-l);
}
#guest-container main {
  height: calc(100% - 68px);
}