.workflowstoryboard-panel {
  height: 100vh;
}

.interaction-module .applet {
  overflow: visible;
}

/* ============================================================================================== */
/* THEMING                                                                                        */
/* ============================================================================================== */

:root {

  --color-primary: #f50003;
  --color-primary-rgb: 245, 0, 3;
  --color-primary-contrast: #ffffff;
  --color-primary-contrast-rgb: 255, 255, 255;
  --color-primary-tint: #b92025;
  --color-primary-shade: #a41e22;

  --color-light: #ffffff;
  --color-light-rgb: 255, 255, 255;
  --color-light-contrast: #000000;
  --color-light-contrast-rgb: 0, 0, 0;
  --color-light-tint: #f5f3f4;
  --color-light-shade: #d3d3d3;
  
  --color-medium: #a8a8aa;
  --color-medium-rgb: 168, 168, 170;
  --color-medium-contrast: #000000;
  --color-medium-contrast-rgb: 0, 0, 0;
  --color-medium-tint: #BBBBBB;
  --color-medium-shade: #707070;

  --color-dark: #000000;
  --color-dark-rgb: 0, 0, 0;
  --color-dark-contrast: #ffffff;
  --color-dark-contrast-rgb: 255, 255, 255;

  --color-success: #05CD9E;
  --color-success-rgb: 5, 205, 158;

  --color-warning: #ffb347;
  --color-warning-rgb: 255, 179, 71;

  --color-danger: #CD0505;
  --color-danger-rgb: 205, 5, 5;

  --font-family: 'Mulish', sans-serif;
  --font-size: 16px;
  --font-weight: 400;
  --line-height: 1.5;

  --spn: 4.9406564584124654e-324;
  --spacing: 4px;
  --spacing-2: calc(2 * var(--spacing) * var(--spn) / var(--spn));
  --spacing-3: calc(3 * var(--spacing) * var(--spn) / var(--spn));
  --spacing-4: calc(4 * var(--spacing) * var(--spn) / var(--spn));
  --spacing-5: calc(5 * var(--spacing) * var(--spn) / var(--spn));
  --spacing-6: calc(6 * var(--spacing) * var(--spn) / var(--spn));
  --spacing-7: calc(7 * var(--spacing) * var(--spn) / var(--spn));
  --spacing-8: calc(8 * var(--spacing) * var(--spn) / var(--spn));
  --spacing-9: calc(9 * var(--spacing) * var(--spn) / var(--spn));
  --spacing-10: calc(10 * var(--spacing) * var(--spn) / var(--spn));
  --spacing-12: calc(12 * var(--spacing) * var(--spn) / var(--spn));
  --spacing-16: calc(16 * var(--spacing) * var(--spn) / var(--spn));

  --header-size: calc(25 * var(--spacing) * var(--spn) / var(--spn));
  --footer-size: calc(28 * var(--spacing) * var(--spn) / var(--spn));
}

:root[browser=safari],
:root[browser=firefox] {
  --spn: 1;
}

@font-face {
  font-family: 'Mulish';
  src: url('../fonts/Mulish/Mulish-VariableFont_wght.ttf') format('truetype');
  font-style: normal; 
}

@font-face {
  font-family: 'Mulish';
  src: url('../fonts/Mulish/Mulish-Italic-VariableFont_wght.ttf') format('truetype');
  font-style: italic; 
}

/* ========================================================================== */
/* BASE & ADJUSTMENTS                                                         */
/* ========================================================================== */

html, body {
  font-family: var(--font-family);
  font-size: var(--font-size); 
  font-weight: var(--font-weight); 
  line-height: var(--line-height); 
}

body {
  background-color: var(--color-light);
}

::-moz-selection {
  background: var(--color-primary-shade);
  color: var(--color-primary-contrast)
}

::selection {
  background: var(--color-primary-shade);
  color: var(--color-primary-contrast)
}

.container {
  width: 100%;
  max-width: 1140px;
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}

h2 {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: var(--line-height);
}

h3 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: var(--line-height);
}

p {
  margin: 0;
}

/* ========================================================================== */
/* [#] ANIMATION AND TRANSITION                                               */
/* ========================================================================== */

.animated-pop-out {
  animation: animation-pop-out 300ms ease-in-out forwards;
}

@keyframes animation-pop-out {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}
.animated-pop-out-reverse {
  animation: animation-pop-out-reverse calc(300ms * 0.5) linear forwards;
}

@keyframes animation-pop-out-reverse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0);
  }
}


/* ========================================================================== */
/* HEADER                                                                     */
/* ========================================================================== */

.header {
  height: var(--header-size);
  border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.059);
  background: var(--color-light);
}

.header__container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}

.header__container::before,
.header__container::after {
  display: none;
}

.header__grouping {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
}

.header__grouping--start {
  margin-inline-start: calc(-1 * var(--spacing-4));
}

.header__grouping--end  {
  margin-inline-end: calc(-1 * var(---4spacing));
}

.header__button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: auto;
  padding: 0 var(--spacing-4);
  transition: all 300ms ease-in-out;
  cursor: pointer;
}

.header__button:hover {
  background: var(--color-light-tint);
}

.header__button > .icon {
  width: var(--spacing-6);
  height: var(--spacing-6);
}

.header__logo {
  padding: var(--spacing-5) var(--spacing-4);
}

.header__logo-image {
  height: calc(var(--header-size) - 2 * var(--spacing-5));
  width: auto;
  background: none;
}

.header__popover {
  position: relative;
  display: none;
  width: auto;
  min-width: calc(40 * var(--spacing) * var(--spn) / var(--spn));
  max-width: unset;
  border-radius: var(--spacing-2);
  border: 0;
  background: var(--color-light);
  box-shadow: 0 0 2px 2px rgba(var(--color-dark-rgb), 0.08);
  font-family: var(--font-family);
  font-size: var(--font-size);
  line-height: var(--line-height);
  z-index: 100;
}

.header__popover.is-active {
  display: block;
}

/* [##] Language Switcher --------------------------------------------------- */

.lang-switcher--desktop {
  display: flex;
}

.lang-switcher--mobile {
  display: none
}

@media screen and (max-width: 767.98px) {
  .lang-switcher--desktop {
    display: none;
  }
  
  .lang-switcher--mobile {
    display: flex
  }
}


.lang-switcher__link {
  color: inherit !important;
  transition: color 300ms ease-in-out;
}

.lang-switcher__link:hover {
  color: var(--color-primary) !important;
}

/* [##] Desktop ------------------------------------------------------------- */

.lang-switcher--desktop {
  padding: 0 var(--spacing-4)
}

.lang-switcher--desktop .icon {
  width: var(--spacing-6);
  height: var(--spacing-6);
}

.lang-switcher--desktop .lang-switcher__list {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  padding: 0;
}

.lang-switcher--desktop .lang-switcher__item {
  border-bottom: 2px solid transparent;
  border-radius: var(--spacing);
}

.lang-switcher--desktop .lang-switcher__item.is-active {
  color: var(--color-primary-shade) !important;
  border-color: var(--color-primary-shade);
}

.lang-switcher--desktop .lang-switcher__link {
  padding: var(--spacing);
}

/* [##] Mobile -------------------------------------------------------------- */

.lang-switcher--mobile .lang-switcher__flag {
  display: none;
}

/* [##] Navigation ---------------------------------------------------------- */

.navigation .header__label {
  display: block;
  max-width: calc(50 * var(--spacing) * var(--spn) / var(--spn));
  overflow: hidden;
  text-wrap: nowrap;
  text-overflow: ellipsis;
}

@media screen and (max-width: 767.98px) {
  .navigation > .icon {
    margin: 0;
  }
  .navigation .header__label {
    display: none;
  }
}

/* ========================================================================== */
/* MAIN                                                                       */
/* ========================================================================== */

.main--simple,
.main--simple-wide {
  min-height: calc(100vh - var(--header-size) - var(--footer-size));
  padding: var(--spacing-10) 0;
}

.main__header {
  margin-block-end: var(--spacing-16);
}

.main__content,
.main__footer,
.main__progress {
  width: 100%;
  margin: 0 auto;
}

.main--simple .main__content,
.main--simple .main__footer,
.main--simple .main__progress {
  max-width: 720px;
}

.main--simple-wide .main__content,
.main--simple-wide .main__footer,
.main--simple-wide .main__progress {
  max-width: 960px;
}

#view {
  padding-top: 0;
}

.view__title {
  font-size: 1.875rem;
  font-weight: bold;
  line-height: var(--line-height);
  margin: 0 0 var(--spacing-4);
}

.view__subtitle {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 var(--spacing-4)
}

.view__desc {
  margin: 0;
}

.empty-state {
  text-align: center;
}

.empty-state__image {
  display: block;
  width: calc(30 * var(--spacing) * var(--spn) / var(--spn));
  margin: var(--spacing-4) auto;
}

@media screen and (max-width: 767.98px) {
  .main--simple, .main--simple-wide {
    padding-block: var(--spacing-4);
  }

  .main__header {
    margin-block-end: var(--spacing-4);
  }
}

/* ========================================================================== */
/* FOOTER                                                                     */
/* ========================================================================== */

.footer {
  --background: var(--color-dark);
  --color: var(--color-dark-contrast);

  height: auto;
  min-height: var(--footer-size);
  padding-block: var(--spacing-8);
}

.footer {
  padding-block: var(--spacing-4);
  background: var(--background);
  color: var(--color);
}

.footer__copyright,
.footer__links {
  padding-block: var(--spacing-2);
}

.footer__links {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: baseline;
  gap: var(--spacing-2);
}

.footer__links a {
  color: var(--color-dark-contrast) !important;
  text-decoration: underline;
}

.footer__links a:is(:hover, :focus, :focus-visible) {
  color: var(--color-primary) !important;
}

@media screen and (max-width: 565.98px) {
  .footer__copyright {
    text-align: center;
  }

  .footer__links {
    flex-flow: column;
    align-items: center;
  }

  .footer__links-separator {
    display: none;
  }
}


/* ========================================================================== */
/* [#] WIDGETS                                                                */
/* ========================================================================== */

.widget {
  border-radius: var(--spacing-3);
  box-shadow:
    0px 0px 4px 1px rgba(var(--color-dark-rgb), 0.02),
    0px 4px 16px 4px rgba(var(--color-dark-rgb), 0.08);
}

.widget:not(:last-child) {
  margin-bottom: var(--spacing-8);
}

.widget--cosy {
  padding: var(--spacing-8) var(--spacing-16);
}

.widget__title {
  margin-bottom: var(--spacing-4);
}

.widget__section {
  border-radius: var(--spacing-3);
  border: 1px solid var(--color-medium-tint);
}

.widget__section:not(:last-child) {
  margin-bottom: var(--spacing-4);
}

.widget__section-title {
  padding: var(--spacing-6) var(--spacing-6) 0;
}

.widget__section-footer {
  padding: 0 var(--spacing-6) var(--spacing-6);
}
  
.icon-list {
  margin: 0;
  padding-block: var(--spacing-3);
  text-align: start;
}

.icon-list__item {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  padding: var(--spacing-3) var(--spacing-6);
}

.icon-list__item .icon {
  flex: 0 0 var(--spacing-8);
  width: var(--spacing-8);
  height: var(--spacing-8);
  margin-inline-end: var(--spacing-2);
  color: var(--color-primary-shade);
  font-size: var(--spacing-6);
  line-height: var(--spacing-8);
  text-align: center;
}

@media screen and (max-width: 991.98px) {
  .widget--cosy {
    padding: var(--spacing-4); 
  }

  .icon-list__item {
    padding: var(--spacing-2);
  }
}

/* ========================================================================== */
/* [#] BUTTONS                                                                */
/* ========================================================================== */

.button {
  --border-radius: 10px;
  --box-shadow: none;
  --background: var(--color-dark);
  --color: var(--color-dark-contrast);
  --background-focused: var(--color-dark-shade);
  --color-focused: var(--color-dark-contrast);
  --background-disabled: rgba(var(--color-dark-rgba), 0.302);
  --color-disabled: rgba(var(--color-dark-contrast-rgb), 0.302);
}

.button--clear,
.button--back2 {
  --background: transparent;
  --color: var(--color-light-contrast);
  --background-focused: var(--background);
  --color-focused: var(--color-primary);
  --background-disabled: var(--background);
  --color-disabled: rgba(var(--color-light-contrast-rgb), 0.302);
}

.button--primary {
  --background: var(--color-primary);
  --color: var(--color-primary-contrast);
  --background-focused: var(--color-dark);
  --color-focused: var(--color-dark-contrast);
  --background-disabled: rgba(var(--color-primary-rgb), 0.302);
  --color-disabled: rgba(var(--color-primary-contrast-rgb), 1);
}

.button:is(.disabled, [disabled]) {
  pointer-events: none !important;
}

/* [##] Overrides (Higher Specificity Required) ----------------------------- */

:is(a.button, .button):is(.button--back2, .button--clear, .button--primary) {
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  background: var(--background) !important;
  color: var(--color) !important;
  font-family: var(--font-family);
  transition: all 300ms ease-in-out;
  text-transform: capitalize;
  visibility: visible;
  opacity: 1;
}

:is(a.button, .button):is(.button--back2, .button--clear, .button--primary):is(:hover, :focus, :focus-visible) {
  background: var(--background-focused) !important;
  color: var(--color-focused) !important;
  opacity: 1;
}

:is(a.button, .button):is(.button--back2, .button--clear, .button--primary):is(:disabled, .disabled) {
  background: var(--background-disabled) !important;
  color: var(--color-disabled) !important;
}

a.button--back2,
.button.button--back2 {
  min-width: fit-content;
  margin: 0;
  padding: 0;
}

a.button--back2 .button__label,
.button.button--back2 .button__label {
  text-decoration: underline;
}

a.button--primary,
.button.button--primary {
  min-width: calc(40 * var(--spacing) * var(--spn) / var(--spn));
  margin: 0;
  padding: var(--spacing-4) var(--spacing-8);
  font-weight: 600;
}

a.button.button--primary::after,
.button.button--primary::after {
  content: '';
  display: none;
}

a.button--clear,
.button.button--clear {
  margin: 0;
  padding: 0;
  text-decoration: underline;
}

/* ========================================================================== */
/* [#] FORMS                                                                  */
/* ========================================================================== */

.input-container:not(:last-child) {
  margin-bottom: var(--spacing-12);
}

.input-field .input-label,
.input-field label,
.range-field label {
  --font-size: 1.25rem;
  --font-weight: 600;

  display: block;
  margin-bottom: var(--spacing-5);
  font-family: var(--font-family);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  text-wrap: auto;
  transform: none !important;
}

.mustfill-mark {
  margin-inline-start: var(--spacing);
  font-size: inherit;
  color: var(--color-danger);
}

/* [##] Field Notes --------------------------------------------------------- */

.input-field__note--icon {
  margin-inline-start: var(--spacing-2);
  color: var(--color-primary-shade);
}

.input-field__note--supporting {
  margin-top: var(--spacing-2);
  color: var(--color-medium-shade);
}


/* [##] Field Actions ------------------------------------------------------- */

.input-field .input-field__reset,
.input-field .input-field__password-toggle,
.input-field input:focus ~ .input-field__reset,
.input-field input:focus ~ .input-field__password-toggle {
  top: 50%;
  right: var(--spacing-4);
  translate: 0 -50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--spacing-6);
  height: var(--spacing-6);
  font-size: var(--spacing-6);;
}

.input-field .input-field__password-toggle .icon,
.input-field input:focus ~ .input-field__password-toggle .icon {
  width: 100%;
  height: 100%;
}


/* [##] Text fields and passwords ------------------------------------------- */


.input-field input[type=text],
.input-field input[type=password],
.input-field textarea {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  margin: 0 !important;
  padding: var(--spacing-4) var(--spacing-6) !important;
  border: 1px solid var(--color-medium);
  border-radius: var(--spacing-2);
  background: var(--color-light);
  font-size: 1.25rem;
  font-weight: inherit;
  line-height: inherit;
}

.input-field input[type="text"]:not([readonly]):focus,
.input-field input[type="password"]:not([readonly]):focus,
.input-field textarea:not([readonly]):focus {
  top: unset;
  border-color: var(--color-primary-shade) !important;
  box-shadow: none !important;
}

.input-field textarea {
  height: unset;
  padding: 8px 36px 8px 10px !important;
  border: 2px solid rgba(43, 50, 60, 0.12) !important;
  border-radius: 5px;
  resize: none;
}

.input-field input:not(.select-dropdown)[readonly] {
  background-color: var(--color-light-shade) !important;
  color: var(--color-medium) !important;
  border: 1px solid var(--color-medium) !important;
}

/* [##] Prefixed Inputs ----------------------------------------------------- */

.input-field--prefixed .input-element-wrapper {
  position: relative;
}

.input-field--prefixed .input-element-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--spacing-16);
  height: var(--spacing-16);
  border-radius: var(--spacing-2) 0 0 var(--spacing-2);
  background: var(--color-dark);
  color: var(--color-dark-contrast);
  z-index: 1;
}

.input-field--prefixed .input-element-wrapper input[type="text"] {
  padding-left: calc(var(--spacing-16) + var(--spacing-6)) !important;
}

.input-field--prefixed .input-field__note--supporting {
  padding-left: var(--spacing-16);
}

/* [###] Currency ----------------------------------------------------------- */

.input-field--currency .input-element-wrapper::before {
  content: "RM";
}

/* [###] Percentage --------------------------------------------------------- */

.input-field--percentage .input-element-wrapper::before {
  content: "%";
}

/* [##] Dropdown (Materialize) ---------------------------------------------- */

.input-field .select-wrapper .caret {
  color: var(--color-medium);
}

.input-field .select-wrapper:hover .caret {
  color: var(--color-light-contrast);
}

.input-field .dropdown-content {
  max-height: calc(100 * var(--spacing));
  border: 1px solid var(--color-medium);
  border-radius: var(--spacing-2);
  background: var(--color-light);
}

.input-field .dropdown-content li {
  min-height: 0;
  padding: var(--spacing-4) var(--spacing-6);
  transition: all 300ms ease-in-out;
}

.input-field .dropdown-content li > * {
  display: block;
  min-height: calc(var(--line-height) * 1.25rem);
  padding: 0;
  color: var(--color-light-contrast);
  font-family: var(--font-family);
  font-size: 1.25rem;
  font-weight: var(--font-weight);
  line-height: var(--line-height);
  transition: all 300ms ease-in-out;
}

.input-field .dropdown-content li:is(:hover, :focus, :focus-visible) {
  background: var(--color-light-tint);
}

.input-field .dropdown-content li:is(:hover, :focus, :focus-visible) > * {
  color: var(--color-primary)
}

@media screen and (max-width: 576px) {
  .input-field .dropdown-content {
    max-height: calc(50 * var(--spacing));
  }
}

/* [##] Dropdown (Select2) -------------------------------------------------- */

.input-field .select2-container .selection {
  display: block;
}

.input-field .select2-selection--single {
  position: relative;
  display: block;
  height: auto !important;
  padding: var(--spacing-4) var(--spacing-6) !important;
  border: 1px solid var(--color-medium) !important;
  border-radius: var(--spacing-2) !important;
  background: var(--color-light) !important;
  font-size: 1.25rem;
  font-weight: inherit;
  line-height: inherit;
}

.input-field .select2-selection--single .select2-selection__rendered {
  display: block;
  min-height: calc(var(--line-height) * 1.25rem);
  padding: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.input-field .select2-selection__arrow {
  position: absolute;
  top: 50% !important;
  right: 10px !important;
  translate: 0 -50%;
}

.input-field .select2-selection__arrow b {
  display: none;
}

.input-field .select2-selection__arrow::before {
  content: '\25BC';
  color: var(--color-medium)
}

.input-field .select2-selection:hover .select2-selection__arrow::before {
  color: var(--color-light-contrast);
}

.input-field .select2-dropdown {
  position: absolute;
  border: 1px solid var(--color-medium) !important;
  border-radius: var(--spacing-2) !important;
  background: var(--color-light) !important;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  visibility: hidden;
  overflow: hidden;
  z-index: 3;
}

.input-field .select2-container--open .select2-dropdown {
  visibility: visible;
}

.input-field .select2-search--dropdown {
  display: block;
  padding: var(--spacing-2);
}

.input-field .select2-search__field {
  box-sizing: border-box !important;
  width: 100% !important;
  padding: var(--spacing-4) var(--spacing-6) !important;
  border: 1px solid var(--color-medium) !important;
  border-radius: var(--spacing-2) !important;
  background: var(--color-light) !important;
  font-size: 1.25rem !important;
  font-weight: inherit;
  line-height: inherit;
}

.input-field .select2-search__field:is(:focus, :focus-visible) {
  border-color: var(--color-primary-shade) !important;
}

.input-field .select2-results__options {
  max-height: calc(80 * var(--spacing));
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
}

.input-field .select2-results__option {
  min-height: calc(var(--line-height) * 1.25rem + var(--spacing-8)) !important;
  padding: var(--spacing-4) var(--spacing-6) !important;
  color: var(--color-light-contrast) !important;
  font-family: var(--font-family) !important;
  font-size: 1.25rem !important;
  font-weight: var(--font-weight) !important;
  line-height: var(--line-height) !important;
  transition: all 300ms ease-in-out !important;
  cursor: pointer;
}

/* 0-4-0 specificity required */
.input-field .select2-results__option:is(:hover, :focus, :focus-visible),
.input-field .select2-results__option[aria-selected="true"],
.input-field .select2-results__option[aria-selected="true"]:is(:hover, :focus, :focus-visible) {
  background: var(--color-light-tint) !important;
  color: var(--color-primary) !important;
}

.input-field .select2-results__option[role=group] {
  padding: 0;
}

.input-field .select2-container--disabled .select2-selection--single,
.input-field .select2-container--disabled .select2-selection--multiple {
  background-color: #eee !important;
  color: rgba(0,0,0,0.42) !important;
  cursor: no-drop !important;
}

@media screen and (max-width: 576px) {
  .input-field .select2-results__options {
    max-height: calc(30 * var(--spacing));
  }
}

/* [##] Selection Cards ----------------------------------------------------- */

.checkboxes-field--cards .checkboxlist-tab,
.radio-field--cards .radiolist-tab {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

.checkboxes-field--cards .checkboxlist-tr,
.radio-field--cards .radiolist-tr {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--spacing-12);
}

.checkboxes-field--cards .checkboxlist-tr:not(:last-child),
.radio-field--cards .radiolist-tr:not(:last-child) {
  margin-bottom: var(--spacing-12);
}

.checkboxes-field--cards .checkboxlist-td,
.radio-field--cards .radiolist-td {
  position: relative;
  width: calc(50% - var(--spacing-6));
  height: calc(45 * var(--spacing) * var(--spn) / var(--spn));
  overflow: hidden;
}

.checkboxes-field--cards .checkboxlist-td__topside,
.checkboxes-field--cards .checkboxlist-td__underside,
.radio-field--cards .radiolist-td__topside,
.radio-field--cards .radiolist-td__underside {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--spacing-2);
  cursor: pointer;
  transition:
    border-color 300ms ease-in-out,
    background-color 300ms ease-in-out,
    color 300ms ease-in-out,
    scale 600ms ease-in-out,
    z-index 600ms ease-in-out;
}

.checkboxes-field--cards .checkboxlist-td__topside,
.radio-field--cards .radiolist-td__topside {
  border: 1px solid var(--color-medium);
  background: var(--color-light);
}

.checkboxes-field--cards .checkboxlist-td__underside,
.radio-field--cards .radiolist-td__underside {
  border: 1px solid var(--color-light-tint);
  background: var(--color-light-tint);
  overflow: hidden;
}

.checkboxes-field--cards .checkboxlist-td__underside-content,
.radio-field--cards .radiolist-td__underside-content {
  width: 100%;
  height: 100%;
  padding: var(--spacing-3) var(--spacing-6);
  font-size: 0.875rem;
  overflow: auto;
}

@supports not selector(::-webkit-scrollbar) {
  .checkboxes-field--cards .checkboxlist-td__underside-content,
  .radio-field--cards .radiolist-td__underside-content {
    scrollbar-width: thin;
    scrollbar-color: var(--color-light-shade);
  }
}


@supports selector(::-webkit-scrollbar) {
  .checkboxes-field--cards .checkboxlist-td__underside-content::-webkit-scrollbar,
  .radio-field--cards .radiolist-td__underside-content::-webkit-scrollbar {
    width: var(--spacing-2);
    height: var(--spacing-2);
  }

  .checkboxes-field--cards .checkboxlist-td__underside-content::-webkit-scrollbar-corner,
  .radio-field--cards .radiolist-td__underside-content::-webkit-scrollbar-corner,
  .checkboxes-field--cards .checkboxlist-td__underside-content::-webkit-scrollbar-thumb,
  .radio-field--cards .radiolist-td__underside-content::-webkit-scrollbar-thumb {
    border-radius: 999px;
    border: 1px solid var(--color-light-tint);
    background: var(--color-light-shade);
  }

  .checkboxes-field--cards .checkboxlist-td__underside-content::-webkit-scrollbar,
  .radio-field--cards .radiolist-td__underside-content::-webkit-scrollbar {
    background: transparent;
  }
}


.checkboxes-field--cards .checkboxlist-td--double-sided .checkboxlist-td__topside,
.checkboxes-field--cards .checkboxlist-td--double-sided:is(:hover, :focus, :focus-visible) .checkboxlist-td__underside,
.radio-field--cards .radiolist-td--double-sided .radiolist-td__topside,
.radio-field--cards .radiolist-td--double-sided:is(:hover, :focus, :focus-visible) .radiolist-td__underside {
  scale: 1 1;
  z-index: 2;
}

.checkboxes-field--cards .checkboxlist-td--double-sided .checkboxlist-td__underside,
.checkboxes-field--cards .checkboxlist-td--double-sided:is(:hover, :focus, :focus-visible) .checkboxlist-td__topside,
.radio-field--cards .radiolist-td--double-sided .radiolist-td__underside,
.radio-field--cards .radiolist-td--double-sided:is(:hover, :focus, :focus-visible) .radiolist-td__topside {
  scale: -1 1;
  z-index: 1;
}

.checkboxes-field--cards .checkboxlist-td.is-selected .checkboxlist-td__topside,
.checkboxes-field--cards .checkboxlist-td.is-selected .checkboxlist-td__underside,
.radio-field--cards .radiolist-td.is-selected .radiolist-td__topside,
.radio-field--cards .radiolist-td.is-selected .radiolist-td__underside {
  border-color: var(--color-primary-shade);
  background: var(--color-light-tint);
  color: var(--color-primary-shade);
}

.checkboxes-field--cards .checkboxlist-td__underside > div > div,
.radio-field--cards .radiolist-td__underside > div > div {
  margin-bottom: var(--spacing-2);
  text-align: center;
  font-weight: 600;
}

.checkboxes-field--cards .checkboxlist-td__underside li,
.radio-field--cards .radiolist-td__underside li {
  position: relative;
  padding-inline-start: var(--spacing-5);
}

.checkboxes-field--cards .checkboxlist-td__underside li::before,
.radio-field--cards .radiolist-td__underside li::before {
  content: '\f2ec';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  color: var(--color-primary-shade);
  font: var(--fa-font-solid);
  font-size: 0.9em;
  line-height: inherit;
  rotate: 90deg;
}

.checkboxes-field--cards .checkboxlist-td input[type=checkbox],
.radio-field--cards .radiolist-td input[type=radio] {
  display: none;
}

.checkboxes-field--cards .checkboxlist-td input[type=checkbox] + label,
.radio-field--cards .radiolist-td input[type=radio] + label {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: var(--spacing-6);
  font-size: 1.25rem;
  text-align: center;
}

.checkboxes-field--cards .checkboxlist-td input[type="checkbox"] + label:hover,
.radio-field--cards .radiolist-td input[type="radio"] + label:hover {
  color: var(--color-primary-shade);
}

/* Icon */
.checkboxes-field--cards .checkboxlist-td input[type=checkbox] + label::before,
.radio-field--cards .radiolist-td input[type=radio] + label::before {
  content: "";
  position: relative;
  flex: none;
  display: block;
  width: var(--spacing-16);
  height: var(--spacing-16);
  margin-block: 0 var(--spacing-4);
}

/* Resets */
.checkboxes-field--cards .checkboxlist-td [type="checkbox"]:not(:checked) + label::before,
.checkboxes-field--cards .checkboxlist-td [type="checkbox"]:checked + label::before,
.radio-field--cards .radiolist-td [type="radio"]:not(:checked) + label::before,
.radio-field--cards .radiolist-td [type="radio"]:checked + label::before {
  border-radius: var(--spacing-2);
  border: 0;
  background: var(--color-primary-shade);
}

.checkboxes-field--cards .checkboxlist-td [type="checkbox"]:not(:checked) + label::after,
.checkboxes-field--cards .checkboxlist-td [type="checkbox"]:checked + label::after,
.radio-field--cards .radiolist-td [type="radio"]:not(:checked) + label::after,
.radio-field--cards .radiolist-td [type="radio"]:checked + label::after {
  display: none;
}

@media screen and (max-width: 767.98px) {
  .checkboxes-field--cards .checkboxlist-tr,
  .radio-field--cards .radiolist-tr {
    gap: var(--spacing-6);
  }
  
  .checkboxes-field--cards .checkboxlist-tr:not(:last-child),
  .radio-field--cards .radiolist-tr:not(:last-child) {
    margin-bottom: var(--spacing-6);
  }

  .checkboxes-field--cards .checkboxlist-td,
  .radio-field--cards .radiolist-td {
    width: 100%;
  }
}

/* [##] Selection List ------------------------------------------------------ */

.checkboxes-field--list .checkboxlist-tab {
  margin: 0;
  padding: 0;
  border: 0;
}

.checkboxes-field--list input[type=checkbox] {
  display: none;
}

.checkboxes-field--list input[type=checkbox] + label {
  padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-12);
  border-radius: var(--spacing-2);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  line-height: var(--line-height);
}

.checkboxes-field--list input[type=checkbox] + label p {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.checkboxes-field--list input[type=checkbox] + label:not(.has-subhoverable-active):is(:hover, :focus, :focus-visible) {
  color: var(--color-primary);
}

.checkboxes-field--list input[type=checkbox] + label.has-subhoverable-active:is(:hover, :focus, :focus-visible) {
  color: var(--color-light-contrast);
}

.checkboxes-field--list input[type=checkbox] + label a {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: var(--color-light-contrast) !important;
  text-decoration: underline;
}

.checkboxes-field--list input[type=checkbox] + label:not(.has-subhoverable-active):is(:hover, :focus, :focus-visible) a,
.checkboxes-field--list input[type=checkbox] + label.has-subhoverable-active a:is(:hover, :focus, :focus-visible) {
  color: var(--color-primary) !important;
}

.checkboxes-field--list input[type=checkbox] + label::before,
.checkboxes-field--list input[type=checkbox] + label::after {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--spacing-8);
  height: var(--spacing-8);
  margin: var(--spacing) var(--spacing) var(--spacing) 0;
  border-radius: var(--spacing) !important;
}

.checkboxes-field--list input[type=checkbox] + label::before {
  background: var(--color-light-tint) !important;
  border: 1px solid var(--color-medium) !important;
}

.checkboxes-field--list input[type=checkbox] + label::after {
  content: '\f00c';
  border: 0 !important;
  background: none !important;
  color: var(--color-light-contrast);
  font: var(--fa-font-light);
  font-size: var(--spacing-4);
  line-height: var(--spacing-8);
  text-align: center;
  scale: 0;
}

.checkboxes-field--list input[type=checkbox]:not(:checked) + label:is(:hover, :focus, :focus-visible)::before,
.checkboxes-field--list input[type=checkbox]:checked + label::before {
  background: var(--color-light-tint);
  border: 1px solid var(--color-medium);
}

.checkboxes-field--list input[type=checkbox]:not(:checked) + label:is(:hover, :focus, :focus-visible)::after,
.checkboxes-field--list input[type=checkbox]:checked + label::after {
  scale: 1;
}

/* [##] Consent ------------------------------------------------------------- */

.consent-field .input-label {
  display: none;
}

/* [##] OTP ----------------------------------------------------------------- */

.otp-field--multi-input .otp__inputs {
  display: flex;
  flex-flow: row wrap;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-4);
  cursor: pointer;
}

.otp-field--multi-input .otp__inputs .otp__input {
  flex: 0 0 var(--spacing-16);
  height: var(--spacing-16);
  width: var(--spacing-16);
  text-align: center;
  border: 0;
  border-bottom: 1px solid var(--color-medium);
  border-radius: 0;
}

.otp-field--multi-input .otp__true-input,
.otp-field--multi-input .otp__true-input ~ .input-field__reset {
  display: none !important;
}

@media screen and (max-width: 575.98px) {
  .otp-field--multi-input .otp__inputs {
    display: flex;
  }

  .otp-field--multi-input .otp__inputs .otp__input {
    flex: 0 0 var(--spacing-12);
    width: var(--spacing-12);
    padding: 0 !important
  }
}

@media screen and (max-width: 359.98px) {
  .otp-field--multi-input .otp__inputs .otp__input {
    flex: 1 1 0;
    width: 0;
  }
}


/* [##] Form Actions -------------------------------------------------------- */

.main__footer {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-end;
  margin-block: var(--spacing-16) 0;
}

.main__footer--stacked {
  flex-flow: column nowrap;
  gap: var(--spacing-4);
  align-items: center;
}

.main__footer a:not(.button) {
  color: var(--color-light-contrast) !important;
  text-decoration: underline;
}

.main__footer a:not(.button):hover {
  color: var(--color-primary) !important;
}


.main__header :is(a.button, .button).button--back2::before {
  display: inline-block;
  content: "\f053";
  margin-inline-end: var(--spacing-2);
  font: var(--fa-font-light);
}

.main__footer :is(a.button, .button).button--next::after {
  display: inline-block;
  content: "\f054";
  margin-inline-start: var(--spacing-2);
  font: var(--fa-font-light);
}

@media screen and (max-width: 575px) {
  .main__header :is(a.button, .button).button--back2,
  .main__footer :is(a.button, .button).button--next {
    display: inline-block;
    width: auto;
  }
}

/* ========================================================================== */
/* PROGRESS INDICATOR                                                         */
/* ========================================================================== */

.main__progress {
  flex: 0 0 100%;
  margin-top: var(--spacing-10);
  padding: var(--spacing-8);
  background: var(--color-light);
}

@media screen and (max-width: 575.98px) {
  .main__progress {
    position: sticky;
    bottom: 0;
    flex: 0 0 100%;
    z-index: 1;
  }
}

/* ========================================================================== */
/* POPOVERS                                                                   */
/* ========================================================================== */

.popover__content,
.popover__list {
  margin: 0;
  text-align: start;
}

.popover__list {
  padding-block: var(--spacing);
  list-style-type: none;
}

.popover__list > li {
  height: auto;
}

.popover__list > li > a {
  display: block;
  padding: var(--spacing-2) var(--spacing-4);
  color: var(--color-light-contrast) !important;
  transition: all 300ms ease-in-out;
}

.popover__list > li > a:hover {
  background: var(--color-light-tint);
  color: var(--color-primary-shade) !important;
}

/* ========================================================================== */
/* [#] MODALS                                                                 */
/* ========================================================================== */

.modal__screen {
  display: block;
  position: fixed;
  inset: 0 0 0 0;
  z-index: 99;
  width: 100vw;
  height: 100vh;
  background-color: rgba(var(--color-dark-rgb), 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 300 ease-in-out, visibility 300 ease-in-out;
}

.modal__screen.is-active {
  opacity: 1;
  visibility: visible;
}

.modal {
  position: fixed;
  inset: 0 0 0 0;
  z-index: 100;
  display: none;
  flex-flow: column nowrap;
  width: 50%;
  height: fit-content;
  max-width: 70%;
  max-height: 70%;
  margin: auto;
  padding: 0;
  border-radius: var(--spacing-3);
  overflow: hidden;
}

.modal.is-active {
  display: flex;
}

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: var(--spacing-16);
  padding: var(--spacing-4);
}

.modal__header h2 {
  margin: 0;
}

.modal__close {
  display: block;
  width: var(--spacing-8);
  height: var(--spacing-8);
  margin-inline-start: auto;
  border-radius: var(--spacing);
  text-align: center;
  line-height: var(--spacing-8) !important;
  transition: all 300ms ease-out;
}

.modal__close:hover,
.modal__close:focus {
  background-color: var(--color-primary-shade);
  color: var(--color-primary-contrast);
  text-decoration: none;
  cursor: pointer;
}

.modal__content {
  padding: 15px;
  overflow: auto;
}

@media only screen and (max-width: 991.98px) {
  .modal {
    width: 80%;
    max-width: unset;
  }
}

/* ========================================================================== */
/* [#] SUMMARY                                                                */
/* ========================================================================== */

table.summary {
  margin-block: var(--spacing-8);
}

table.summary > tbody > tr > td {
  padding: 0;
}

table.summary,
table.summary :is(table, th, tr, td) {
  background: none;
  border: 0;
  font-family: var(--font-family);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  line-height: var(--line-height);
}

table.summary .summary__section {
  position: relative;
  padding: var(--spacing-8);
  border: 1px solid var(--color-medium);
  border-radius: var(--spacing-3);
}

table.summary .summary__section:not(:last-child) {
  margin-bottom: var(--spacing-16);
}

table.summary .summary__section tr.lvbw {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  width: auto;
  padding: var(--spacing-4) var(--spacing-8) !important;
  background: var(--color-light) !important;
  color: var(--color-light-contrast);
}

table.summary .summary__section tr.lvbw td {
  padding: 0 !important;
  font-family: var(--font-family);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: var(--line-height);
  text-align: center;
  text-wrap: nowrap;
}

table.summary .summary__section tr.lvbw img {
  display: none;
}

table.summary .summary__section tr:not(.lvbw) {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

table.summary .summary__section tr:not(.lvbw) td {
  flex: 1 1 50%;
  padding: var(--spacing-2) var(--spacing-4);
}

table.summary .summary__section tr:not(.lvbw) td:nth-child(n) {
  text-align: end;
  color: rgba(var(--color-light-contrast-rgb), 0.651);
}

table.summary .summary__section tr:not(.lvbw) td:nth-child(2n) {
  text-align: start;
  color: var(--color-light-contrast);
}

.summary__edit {
  position: absolute;
  top: var(--spacing-4);
  right: calc(20 * var(--spacing));
  width: var(--spacing-9);
  height: var(--spacing-9);
  cursor: pointer;
}

@media screen and (max-width: 575.98px) {
  table.summary .summary__section tr.lvbw {
    padding: var(--spacing-4) var(--spacing-8) !important;
  }

  table.summary .summary__section tr:not(.lvbw) {
    flex-flow: column;
  }

  table.summary .summary__section tr:not(.lvbw):not(:last-child) {
    margin-bottom: var(--spacing-4);
  }

  table.summary .summary__section tr:not(.lvbw) td {
    padding: 0 !important;
  }

  table.summary .summary__section tr:not(.lvbw) td:nth-child(n) {
    text-align: center;
  }

  .summary__edit {
    right: var(--spacing-4);
  }
}

/* ========================================================================== */
/* [#] ICONS                                                                  */
/* ========================================================================== */

.icon {
  line-height: inherit;
}

.icon--start {
  margin-inline-end: var(--spacing-2);
}

.icon--end {
  margin-inline-start: var(--spacing-2);
}

.midf-icon {
  display: inline-block;
}

.midf-icon::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.midf-icon--circle-solid-check-green::before {
  background-image: url('../img/icon/midf-revamp-icon/circle-solid-check-green.svg')
}

.midf-icon--circle-dashed-check-green::before {
  background-image: url('../img/icon/midf-revamp-icon/circle-dashed-check-green.svg')
}

.midf-icon--circle-dashed-check-red::before {
  background-image: url('../img/icon/midf-revamp-icon/circle-dashed-check-red.svg')
}

.midf-icon--circle-pencil::before {
  background-image: url('../img/icon/midf-revamp-icon/circle-pencil.svg')
}

.midf-icon--circle-user::before {
  background-image: url('../img/icon/midf-revamp-icon/circle-user.svg')
}

.midf-icon--eye-closed::before {
  background-image: url('../img/icon/midf-revamp-icon/eye-closed.svg')
}

.midf-icon--eye-opened::before {
  background-image: url('../img/icon/midf-revamp-icon/eye-opened.svg')
}

.midf-icon--files-slash::before {
  background-image: url('../img/icon/midf-revamp-icon/files-slash.svg')
}

.midf-icon--flag-check::before {
  background-image: url('../img/icon/midf-revamp-icon/flag-check.svg')
}

.midf-icon--gauge-high::before {
  background-image: url('../img/icon/midf-revamp-icon/gauge-high.svg')
}

.midf-icon--globe::before {
  background-image: url('../img/icon/midf-revamp-icon/globe.svg')
}

.midf-icon--star-empty::before {
  background-image: url('../img/icon/midf-revamp-icon/star-empty.svg')
}

.midf-icon--star-filled::before {
  background-image: url('../img/icon/midf-revamp-icon/star-filled.svg')
}

.midf-icon--trash-bin::before {
  background-image: url('../img/icon/midf-revamp-icon/trash-bin.svg')
}

.midf-icon--user-check::before {
  background-image: url('../img/icon/midf-revamp-icon/user-check.svg')
}

/* ========================================================================== */
/* [#] STEP/FIELD SPECIFIC                                                    */
/* ========================================================================== */

/* [##] RGSD_WTH_SSM_2_0 ---------------------------------------------------- */

.radiolist-td input[id^=lens_CB_SNS_COMP_SSM_FLAG][value=Y] + label::before {
  background: url('../img/icon/midf-revamp-icon/circle-check.svg') center / contain no-repeat !important;
}

.radiolist-td input[id^=lens_CB_SNS_COMP_SSM_FLAG][value=N] + label::before {
  background: url('../img/icon/midf-revamp-icon/circle-x-mark.svg') center / contain no-repeat !important;
}

/* [##] FND_PRPE_2_0  ------------------------------------------------------- */

/* Sabah/Sarawak */
.radiolist-td input[id^=lens_CB_SNS_COMP_SBH_SRWK_FLAG][value=Y] + label::before {
  background: url('../img/icon/midf-revamp-icon/circle-check.svg') center / contain no-repeat !important;
}

/* Other professional bodies */
.radiolist-td input[id^=lens_CB_SNS_COMP_SBH_SRWK_FLAG][value=N] + label::before {
  background: url('../img/icon/midf-revamp-icon/circle-x-mark.svg') center / contain no-repeat !important;
}

/* [##] OWNR_EMP_N  --------------------------------------------------------- */

.radiolist-td input[id^=lens_CB_SNS_ROLE][value="1"] + label::before {
  background: url('../img/icon/midf-revamp-icon/glasses.svg') center / contain no-repeat !important;
}

.radiolist-td input[id^=lens_CB_SNS_ROLE][value="2"] + label::before {
  background: url('../img/icon/midf-revamp-icon/director-chair.svg') center / contain no-repeat !important;
}

.radiolist-td input[id^=lens_CB_SNS_ROLE][value="3"] + label::before {
  background: url('../img/icon/midf-revamp-icon/user-briefcase.svg') center / contain no-repeat !important;
}

/* [##] RGSD_WTH_PB_SS_2_0 -------------------------------------------------- */

.checkboxes-field--cards input[id^=lens_CB_SNS_FND_PRPSE][value=WC] + label::before {
  background: url('../img/icon/midf-revamp-icon/gear-rm.svg') center / contain no-repeat !important;
}

.checkboxes-field--cards input[id^=lens_CB_SNS_FND_PRPSE][value=PT] + label::before {
  background: url('../img/icon/midf-revamp-icon/factory.svg') center / contain no-repeat !important;
}

.checkboxes-field--cards input[id^=lens_CB_SNS_FND_PRPSE][value=MC] + label::before {
  background: url('../img/icon/midf-revamp-icon/machinery.svg') center / contain no-repeat !important;
}

.checkboxes-field--cards input[id^=lens_CB_SNS_FND_PRPSE][value=IT] + label::before {
  background: url('../img/icon/midf-revamp-icon/responsive-design.svg') center / contain no-repeat !important;
}

.checkboxes-field--cards input[id^=lens_CB_SNS_FND_PRPSE][value=RN] + label::before {
  background: url('../img/icon/midf-revamp-icon/house-renovated.svg') center / contain no-repeat !important;
}

/* [##] PRNL_BSNS_ACTY_2_0 -------------------------------------------------- */

.radiolist-td input[id^=lens_CB_SNS_COMP_PRC_ACT][value=MFG] + label::before {
  background: url('../img/icon/midf-revamp-icon/factory-zone.svg') center / contain no-repeat !important;
}

.radiolist-td input[id^=lens_CB_SNS_COMP_PRC_ACT][value=SRVC] + label::before {
  background: url('../img/icon/midf-revamp-icon/cart.svg') center / contain no-repeat !important;
}

/* [##] IDNN_TYPE_2_0 ------------------------------------------------------- */

.radiolist-td input[id^=lens_CB_SNS_IDNTFY_TYPE][value="IC"] + label::before,
.radiolist-td input[id^=lens_CB_SNS_EMP_IDNTFY_TYPE][value="IC"] + label::before {
  background: url('../img/icon/midf-revamp-icon/address-card.svg') center / contain no-repeat !important;
}

.radiolist-td input[id^=lens_CB_SNS_IDNTFY_TYPE][value="PSPRT"] + label::before,
.radiolist-td input[id^=lens_CB_SNS_EMP_IDNTFY_TYPE][value="PSPRT"] + label::before {
  background: url('../img/icon/midf-revamp-icon/passport.svg') center / contain no-repeat !important;
}

/* [##] ELGE_2_0 ------------------------------------------------------------ */

#ELGE_2_0-A-newapp_ns .applet ~ .applet {
  display: none;
}

/* [##] OVRL_SMMY_2_0 ------------------------------------------------------- */

.summary #COL-SNS_PREFERRED_SCHEME.lens-dright,
.summary #COL-SNS_REFERRAL_CODE.lens-dright,
.summary #COL-SNS_COMP_NO_F_EMP.lens-dright,
.summary #COL-SNS_COMP_YR_OP.lens-dright {
  color: var(--color-primary-shade);
  font-weight: bold;
}

/* [##] ACCE_SCR_2_0  ------------------------------------------------------- */

/* Sabah/Sarawak */
.radiolist-td input[id^=lens_CB_SNS_APPROV_FLAG][value=Y] + label::before {
  background: url('../img/icon/midf-revamp-icon/circle-check.svg') center / contain no-repeat !important;
}

/* Other professional bodies */
.radiolist-td input[id^=lens_CB_SNS_APPROV_FLAG][value=N] + label::before {
  background: url('../img/icon/midf-revamp-icon/circle-x-mark.svg') center / contain no-repeat !important;
}

/* ========================================================================== */
/* [#] PRE-REVAMP                                                             */
/* ========================================================================== */

/* Informative Illustration  --------------------------------------------------------------------- */
.informative__illustration-edit {
  display: none;
}

.informative__illustration {
  margin-top: 20px;
  margin-bottom: 20px;
  height: 150px;
  width: 150px;
  margin-left: auto !important;
  margin-right: auto !important;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Overlay ------------------------------------------------------------------------------------ */
.swal-overlay--show-modal {
  overflow-y: auto;
}

/* Panels --------------------------------------------------------------------------------------- */

.view__side {
  background: white;
  box-shadow: 5px 1px 10px rgb(0 0 0 / 16%);
  border-top-right-radius: 20px;
  position: fixed;
  overflow: hidden;
  text-align: center;
  height: 100%;
  width: inherit;
  top: 70px;
}

.view__side:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  border-right: 1px solid #ffffff;
  border-top: 306px solid transparent;
  border-left: 560px solid #d1d1d1;
}

.view__side:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  border-right: 1px solid #ffffff;
  width: 0;
  height: 0;
  border-top: 185px solid transparent;
  border-right: 450px solid #c84b50;
  opacity: 0.9;
}

#view > .row {
  margin-bottom: 0;
}

.partitioning {
  height: 90%;
  height: calc(100% - 100px);
  padding: 40px 0;
}

.partitioning.partitioning--sidebar {
  color: #f4f4f4;
  border-top-right-radius: 20px;
  margin-top: 1px;
  position: relative;
  padding: 0;
  overflow: hidden;
  height: 100%;
}

#view .view__top {
  overflow: hidden;
  margin: 0 0 15px;
  white-space: nowrap;
  display: flex;
  justify-content: center;
}

#view .view__top > * {
  display: inline-block;
  vertical-align: middle;
}

.view__top-sep {
  width: 1px;
  height: 23px;
  margin: 0 15px 0 8px;
  background-color: #d4e0e0;
}

#footer {
  margin: 0;
  font-size: 0.7rem;
  opacity: 0.5;
  cursor: default;
}

.view__footer {
  margin: 15px 0;
}

/* ============================================================================================== */
/* Vendors resets                                                                                 */
/* ============================================================================================== */
/* Materialize CSS ------------------------------------------------------------------------------ */

.input-field,
.range-field {
  position: relative;
}

@media (min-width: 992px) {
  .input-container .col-md-6:last-child label {
    padding: 10px 10px 10px 10px;
  }
}

/* ============================================================================================== */
/* Forms                                                                                          */
/* ============================================================================================== */
#view .view__main {
  border-width: 3px 0;
}


.main__footer .button {
  max-width: 100%;
  overflow: hidden;
  /* padding-left: 60px;
  padding-right: 60px; */
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Side-by-side layout -------------------------------------------------------------------------- */
.input-field,
.range-field {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0px !important;
}

.input-field .field-marker,
.range-field .field-marker {
  width: 100%;
  padding-left: 155px;
}

.input-field .field-marker.active,
.range-field .field-marker.active {
  margin: 0 0 8px;
}

.field-marker.field-marker--error {
  display: flex;
  flex: none;
  width: max-content;
}

.input-field label,
.range-field label {
  width: 100%;
}

/* Other general structure ---------------------------------------------------------------------- */

.field-marker {
  color: #a5a7a7;
}

/* Range sliders -------------------------------------------------------------------------------- */
.range-field .slider-value {
  display: block;
  margin: 8px 0;
  padding: 0;
  background-color: transparent;
  opacity: 0.5;
}

.range-field input[type="range"]::-webkit-slider-thumb {
  background-color: #c3383d;
}

.range-field input[type="range"] + .thumb {
  margin-left: 143px !important;
  background-color: #c3383d;
}

/* Datepicker ----------------------------------------------------------------------------------- */
.ui-widget {
  font-family: arial;
}

.ui-datepicker td a:hover {
  background-color: #f0f3f3 !important;
  color: #c3383d !important;
}

.ui-datepicker td a.ui-state-active {
  background: #004283 !important;
  border-radius: 5px;
}

.ui-state-default.ui-state-active:hover {
  color: white !important;
}

.ui-datepicker-close.ui-state-default.ui-priority-primary.ui-corner-all {
  font-weight: 600;
}

/* ============================================================================================== */
/* Modules                                                                                        */
/* ============================================================================================== */
/* Breadcrumbs ---------------------------------------------------------------------------------- */
.progression {
  position: relative;
  top: 0;
  left: 0;
  width: auto;
  margin-bottom: 30px;
}

.progress-crumb-group {
  display: inline-block;
  background-color: transparent;
}

.progress-crumb-list {
  float: none;
  width: 100%;
  height: auto;
  margin: 0 0 15px 0 !important;
  /* background-color: #C3383D; */
  background: none;
  border-radius: 8px;
}

.progress-crumb-list:last-child {
  margin-right: 0;
  margin-bottom: 0 !important;
}

.progress-crumb-list * {
  display: unset;
}

.progress-crumb-selected:first-child:before {
  display: none;
}

.progression__message {
  display: inline-block;
  vertical-align: middle;
  margin-right: 15px;
  font-size: 0.9em;
  font-size: 0.9rem;
}

.panel-body > form > table {
  border: 0;
}

.lens-newedit td {
  border: 0;
}

.progress-crumb-summary {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  margin-bottom: 20px;
}

.progress-crumb-summary__count,
.progress-crumb-summary__label,
.progress-crumb-count,
.progress-crumb-label {
  border: 1px solid #e5e6e7;
  box-shadow: 0 2px 5px rgb(0 0 0 / 10%);
}

.progress-crumb-summary__count {
  display: inline-block;
  padding: 5px 15px;
  background-color: #c84b50;
  border-color: transparent;
  border-radius: 15px;
  font-size: 0.8rem;
  color: #ffffff;
  line-height: 20px;
}

.progress-crumb-summary__separator {
  display: inline-block;
  width: 15px;
  height: 2px;
  background-color: #e5e6e7;
}

.progress-crumb-summary__label {
  padding: 5px 15px;
  border-radius: 15px;
  font-size: 0.8rem;
  line-height: 20px;
}

.progress-crumb-summary__toggle {
  display: flex;
  flex: none;
  margin-left: auto;
  font-size: 0.8rem;
  color: #c84b50;
  cursor: pointer;
}

.progress-crumb-summary__toggle:hover {
  color: inherit;
}

.progress-crumb-summary__toggle .midf-icon {
  margin-right: 5px;
  font-size: 1.6em;
  transition: 0.5s;
}

.progress-crumb-summary.is-active .progress-crumb-summary__toggle .midf-icon {
  transform: rotate(180deg);
}

.progress-crumb-summary + * {
  display: none;
  /* margin-top: -30px; */
}

.progress-crumb-count {
  display: inline-block;
  position: absolute;
  width: 30px;
  height: 30px;
  margin-right: 8px;
  border-radius: 50%;
  font-size: 0.8rem;
  color: #8e8e8e;
  text-align: center;
  line-height: 30px;
}

.progress-crumb-count:after {
  content: "";
  position: absolute;
  top: -16px;
  left: 50%;
  width: 2px;
  height: 15px;
  background-color: #e5e6e7;
  transform: translateX(-50%);
}

.progress-crumb-list:first-child .progress-crumb-count:after {
  opacity: 0;
}

.progress-crumb-label {
  display: block;
  width: calc(100% - 45px);
  margin-left: 45px;
  padding: 5px 15px;
  border-radius: 15px;
  font-size: 0.9rem;
  line-height: 20px;
}

/* Progression markers -------------------------------------------------------------------------- */
.progress-crumb-selected .progress-crumb-count,
.progress-crumb-selected .progress-crumb-label {
  background-color: #c84b50;
  border-color: transparent;
  color: #ffffff;
}

.progress-crumb-list {
  opacity: 0.5;
}

.progress-crumb-selected,
.progress-crumb-selected ~ .progress-crumb-list {
  opacity: 1;
}

.progress-crumb-list .icon {
  font-size: 0.8rem !important;
  line-height: 30px !important;
}

.progress-crumb-list .icon + * {
  display: none;
}

.progress-crumb-selected .icon,
.progress-crumb-selected ~ .progress-crumb-list .icon {
  display: none;
}

.progress-crumb-selected .icon + *,
.progress-crumb-selected ~ .progress-crumb-list .icon + * {
  display: unset;
}

@media screen and (max-width: 767px) {
  .progress-crumb-summary__toggle span:last-child {
    display: none;
  }

  .progress-crumb-summary__count {
    flex: 0 0 30%;
    padding: 0 5px;
  }

  .progress-crumb-summary__separator {
    flex: 0 0 5%;
  }

  .progress-crumb-summary__label {
    flex: 0 0 55%;
    padding: 3px 5px;
  }

  .progress-crumb-summary + * {
    margin-top: 0px;
  }
}

@media screen and (max-width: 375px) {
  .progress-crumb-summary {
    flex-wrap: wrap;
  }

  .progress-crumb-summary__count {
    flex: 0 0 50%;
    text-align: center;
  }

  .progress-crumb-summary__label {
    flex: 0 0 90%;
    margin-top: 10px;
    text-align: center;
  }

  .progress-crumb-summary__separator {
    display: none;
  }

  .progress-crumb-summary__toggle {
    margin-top: 10px;
  }
}

/* Popover --------------------------------------------------------------------------------------- */

#popover {
  border-radius: var(--spacing-3);
  background: var(--color-light);
  color: var(--color-light-contrast);
  padding: 0;
}

#popover .popover__header {
  margin: var(--spacing-8) 0 var(--spacing-2);
  padding: 0 var(--spacing-8);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: var(--line-height);
  color: var(--color-light-contrast);
}

#popover .popover__close {
  display: none;
}

#popover .popover__content {
  padding: 0 var(--spacing-8);
  color: rgba(var(--color-light-contrast-rgb), 0.8);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  line-height: var(--line-height);
}

#popover .popover__actions {
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-8);
  margin-top: var(--spacing-8);
  padding: 0 var(--spacing-4) var(--spacing-4);
}

#popover .popover__button {
  margin: 0 !important;
}

@media screen and (max-width: 767px) {
  #popover__wrapper {
    align-items: center;
  }

  #popover .popover__actions {
    gap: var(--spacing-4);
  }

}

/* Application Summary ---------------------------------------------------------------------------- */
label[for="lens_FC_SNS_OTH_REL"] .mustfill-mark {
  display: none;
}

input[placeholder="Other Relationship"][style="background-color: rgb(255, 255, 255);"] {
  background-color: rgb(255, 255, 255) !important;
}

#wise-container > .wise-container-fluid {
  height: max-content;
}

.section-group {
  background-color: #e0e0e0 !important;
}

[style="color:white"] {
  color: inherit !important;
}

form[name="phplens_choose"] {
  color: #333;
}

.section-group td:before,
.lens-nav-bottom td:before {
  display: none;
}

.section-group.section-group-newapp_nsLOAN_OPL_APPT_DTLS_r1 {
  margin-top: 20px;
  margin-bottom: 10px;
  padding: 10px;
}

.section-group {
  font-weight: bold;
}

.divEditIcon {
  border: 0px solid #808080;
  border-radius: 5px;
  padding: 5px 20px;
  background-color: #00a0af;
  color: #ffffff;
  font-weight: 100;
  cursor: pointer;
}

::placeholder {
  opacity: 50%;
}

.selectRegisterPage {
  line-height: 3.4 !important;
  border-radius: 5px;
  border: 1px solid #e2e4e5;
}

.applicantSummaryHeader {
  vertical-align: super;
  opacity: 0%;
}

.wise-video-overlay-message {
  color: #f1f1f1;
  font-size: 17px !important;
  text-align: center;
}

/* E_KYC --------------------------------------------------------------------------------- */
/*Customer Verification*/
.wise-title-1 {
  font-family: arial !important;
  width: 100% !important;
}

.wise-preview-message {
  font-size: 17px !important;
}

.wise-text-center {
  margin-top: 15px;
}

/*Button*/
#wise-container .wise-button {
  font-family: arial !important;
  margin: 5px 8px 5px 0 !important;
  padding: 15px !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  font-size: 17px !important;
}

.wise-button-red-1 {
  color: #fff;
  background: #c3383d !important;
  font-family: arial;
}

.wise-button-red-1:hover {
  background: #2e2e2e !important;
}

.wise-button-grey-1 {
  background: #e2e4e5 !important;
  color: #2a2e2e !important;
  font-family: arial;
}

.wise-button-grey-1:hover {
  background-color: #2e2e2e !important;
  color: #ffffff !important;
}

.wise-button-grey-1:after {
  content: "\0203a" !important;
  padding-left: 5px;
}

#wise-container .wise-button {
  display: inline-block;
}

#view [id^="divCamera"],
#view [id^="divPreview"] {
  width: 100%;
  max-width: 100%;
  flex: none;
  margin: 0;
}

#view [id^="divPreview"] canvas {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.app-panel-component > #wise-container.wise-body {
  padding-bottom: 75px;
}

@media screen and (max-width: 768px) {
  #view .wise-camera-pos-fixed {
    position: relative !important;
    height: auto;
  }

  #view .wise-camera-masking-pos-fixed,
  #view .wise-overlay-button-pos-fixed,
  #view .wise-video-overlay-message-pos-fixed {
    position: absolute !important;
  }

  #view .wise-overlay-button-pos-fixed {
    top: 100% !important;
    top: calc(100% + 15px) !important;
  }
}

@media screen and (max-width: 360px) {
  #wise-container .wise-button {
    font-size: 14px !important;
  }
}

@media screen and (max-width: 770px) {
  .app-panel-component > #wise-container.wise-body {
    min-height: 50%;
  }
}

/* ============================================================================================== */
/* Mobile responsiveness                                                                          */
/* ============================================================================================== */


@media (max-width: 991.5px) {
  .view__side:after {
    border-top: 28vh solid transparent;
  }

  .view__side:before {
    border-top: 55vh solid transparent;
  }

  #header {
    padding: 0 50 px;
  }

  .navigation__item--user {
    text-overflow: ellipsis;
    width: 250px;
    overflow: hidden;
    white-space: nowrap;
  }

  .sidebar__illustration {
    background-position: 20% 100%;
  }
}

/* Smartphone-sized ----------------------------------------------------------------------------- */
.sidebar__copy--mobile {
  display: none;
  margin: -8px 0 23px;
  padding: 15px;
  background-color: #dee5e5;
  border-radius: 5px;
}

.sidebar__copy--mobile .view__title {
  margin-bottom: 8px;
  font-size: 1.5em;
  font-size: 1.5rem;
}

@media (max-width: 991.5px) {
  .partitioning {
    height: auto;
  }

  .partitioning.partitioning--sidebar {
    padding: 15px 30px;
  }

  .partitioning.partitioning--content {
    padding: 15px 15px 30px;
  }

  h2,
  h3 {
    font-size: 1.8em;
    font-size: 1.4rem;
  }

  .sidebar__copy {
    display: none;
  }

  .sidebar__copy--mobile {
    display: block;
  }

  .sidebar__illustration {
    width: 60%;
    left: 40%;
    background-size: 180px;
    background-position: 51% 34%;
  }

  .partitioning.partitioning--content {
    position: absolute;
  }

  .sidebar__illustration {
    opacity: 0.4;
    background-size: contain;
    left: 0;
    width: 100%;
  }

  .view__side {
    left: 0;
    box-shadow: none;
  }

  .sidebar__copy--mobile {
    display: none;
  }

  .view__side:before {
    z-index: 1;
    border-top: 60vh solid transparent;
    border-left: 126vw solid #d1d1d1;
  }

  .view__side:after {
    z-index: 2;
    border-top: 40vh solid transparent;
    border-right: 145vw solid #c84b50;
    opacity: 1;
  }

  .sidebar__copy {
    display: none;
  }

  .view__footer {
    color: #ffffff;
    text-shadow: 0 0 5px #000a;
  }

  .hamburger {
    /*background: url(../img/icon/midf-icon/menu.svg) no-repeat center;*/
    width: 30px;
    height: 30px;
    display: block;
  }

  a.hamburger {
    position: absolute;
    right: 20px;
  }

  .navigation__dropdown.overlaying {
    right: 20px;
  }
}

@media (max-width: 767px) {

  #view .main__footer .button {
    min-width: unset !important;
    text-align: center;
    white-space: normal;
    padding-right: 30px;
    padding-left: 30px;
  }
}

/* Extremely small devices ---------------------------------------------------------------------- */
@media (max-width: 575px) {

  a.button.button--back,
  .button.button--back {
    width: auto;
  }

  a.button.button--primary:after,
  .button.button--primary:after,
  a.button.button--back:before,
  .button.button--back:before {
    display: inline-block;
  }

  .input-field label,
  .range-field label {
    width: 100%;
    margin-bottom: 5px;
    padding-bottom: 0;
  }

  .input-field label + *,
  .range-field label + * {
    width: 100% !important;
  }

  .range-field input[type="range"] + .thumb {
    margin-top: 60px;
    margin-left: -7px !important;
  }

  .input-field .field-marker,
  .range-field .field-marker {
    padding-left: 0;
  }

  .input-field .field-marker.active,
  .range-field .field-marker.active {
    margin-top: 5px;
  }

  .select2-container {
    width: 100% !important;
  }
}

/* Height issue --------------------------------------------------------------------------------- */
@media (max-height: 420px) {
  .sidebar__illustration {
    background: #c3383d !important;
    filter: none;
  }

  .sidebar__copy {
    position: relative;
    bottom: 0;
    color: #ffffff;
  }
}

/* ============================================================================================== */
/* MIDF Adjustment                                                                                */
/* ============================================================================================== */
/* Datepicker Popup input location fix */
#ui-datepicker-div {
  transform: translate(-63%, -15%) !important;
  top: 50% !important;
  left: 50% !important;
}

select#lens_FC_CUST_REF_SOURCE {
  border-color: transparent;
  box-shadow: 0 0 8px #1111;
  display: inherit;
}

div#TNC {
  position: absolute;
}

/* 
.input-field input[type="text"]:not([readonly]):focus,
.input-field input[type="password"]:not([readonly]):focus {
  border: 2px solid #2b323c1f;
} */


.adv-mustfil.field-marker.field-marker--error.active {
  width: 100%;
  height: 5% !important;
}

.lens-note .adv-mustfil.field-marker.field-marker--error.active {
  padding-left: 0;
}

.balert2.balert-error {
  width: 100% !important;
  margin: 0 0 15px;
  color: #ea2124 !important;
}

.balert2.balert-error * {
  text-align: left !important;
}

.advent-msg.advent-msg-err {
  margin: 0 0 var(--spacing-8);
  color: var(--color-primary-tint);
}

.app-panel-form,
.lens-note {
  padding-left: 150px;
}

.app-panel-form,
.input-field .field-marker,
.range-field .field-marker {
  padding-left: 0px;
}

.view__desc {
  opacity: 1;
}

label.input-label--inline {
  display: inline;
}

.input-container.row[class*="section-group-newapp_nsLOAN_MIDF_SMMY"] {
  background-color: #fff;
  padding: 5px 5px 5px 20px;
}

#ui-datepicker-div .ui-widget-header:not(.stepTemplate-appletinfo .ui-widget-header) {
  background: #2b323c !important;
}

span.ui-icon.ui-icon-circle-triangle-w,
span.ui-icon.ui-icon-circle-triangle-e {
  filter: brightness(0) invert(1);
}

.ui-datepicker .ui-datepicker-header select {
  color: #000;
}

#empty1 {
  height: 15px;
}

.lvbw td,
.lvbw.section-group {
  padding: 12px !important;
  /* margin-bottom: 15px; */
}

.field-ro-value {
  font-weight: 600;
}

@media (max-width: 767px) {
  #header {
    padding: 0 35px !important;
    height: 70px !important;
  }

  .partitioning.partitioning--sidebar {
    background-color: #fff;
    border-bottom: 3px solid #2b323c;
  }

  .progress-crumb-summary {
    margin-bottom: 20px;
  }

  .view__side {
    display: flex;
  }

  .header__logo-link {
    width: 100px !important;
    height: 60px;
    position: relative;
    top: 0px;
    left: 0px;
  }
}

@media screen and (max-width: 574px) {

  .app-panel-form,
  .lens-note {
    padding-left: 0px;
  }
}

/* Lens notes ----------------------------------------------------------------------------------- */
#view .lens-note {
  z-index: 2;
  width: 100% !important;
}

#view .lens-note--hover {
  display: none;
  position: absolute;
  margin-top: 8px;
  padding: 15px;
  background-color: #2b323c;
  border-radius: 8px;
  font-size: 0.9rem;
  color: #ffffff;
}

#view .lens-note--click {
  display: inline-block;
  width: fit-content !important;
  padding: 0 0 15px 0;
  cursor: pointer;
  /* margin: 15px 0; */
}

#view .view__desc .lens-note--click a {
  padding-left: 30px;
  line-height: 22.5px;
}

#view .view__desc .lens-note--click .midf-icon {
  position: absolute;
  pointer-events: none;
}


#view .lens-note a {
  font-size: 1em;
  color: #c3383d !important;
  cursor: pointer;
  font-family: arial !important;
}

#view .lens-note .midf-icon {
  vertical-align: bottom;
  color: #c3383d;
}

#view .lens-note:before {
  display: none;
  content: " ";
  left: 0;
  width: 17px;
  height: 17px;
  position: absolute;
  background: url(../img/icon/midf-icon/alert-circle-red.svg) no-repeat center;
  /*border: 1px solid #c84b50;*/
  border-radius: 50%;
  transform: scaleY(-1) scale(1.2);
}

#view .lens-note__button {
  position: absolute;
  top: 10px;
  right: 15px;
  width: 30px;
  height: 30px !important;
  cursor: help;
}

#view .lens-note__icon {
  position: absolute;
  top: 5px;
  left: 10px;
  width: 20px;
  height: 20px;
  background: url(../img/icon/midf-icon/alert-circle-red.svg) no-repeat center;
  /*border: 1px solid #c84b50;*/
  border-radius: 50%;
  transform: scaleY(-1) scale(1.2);
  pointer-events: none;
}

@media screen and (max-width: 767px) {
  #view .lens-note {
    margin-left: 0px;
  }

  #view .lens-note__button {
    top: 3px;
  }
}

/* ============================================================================================== */
/* Loan Purpose --------------------------------------------------------------------------------- */
/*Amount fields custom styling*/
.input-field.checkboxes-field {
  justify-content: start;
}

.input-field > label[for="lens_CB_SNS_LOAN_PURPOSE_0"] {
  width: fit-content;
  font-weight: 600;
  display: none;
}

.amount-field {
  /* flex: 50%;*/
  position: relative;
  margin-right: 45px;
  margin-top: 15px;
}

.amount-field i {
  position: absolute;
  display: block;
  transform: translate(0, -50%);
  top: 25%;
  width: 45px;
  text-align: center;
  font-style: normal;
}

.amount-field input[id^="finAmt"] {
  padding-left: 40px !important;
  padding-right: 5px !important;
  height: auto;
}

div#error-element {
  /*    flex-basis: 100%;*/
  height: fit-content;
  width: fit-content;
  color: #f00;
  margin-top: 5px;
}

.greyed-out {
  opacity: 0.6;
}

/* Hide SNS ID Field */
#lens_FN_SNS_ID,
#lens_FN_SNS_ID + .input-field__reset {
  display: none;
}

/* ============================================================================================== */
/* Live Helper Chat                                                                               */
/* ============================================================================================== */
#lhc_header > ul.lhc-cf > li > a {
  display: none;
}

#lhc_header > ul.lhc-cf > li > ul.lhc-cf {
  position: relative;
  left: 0;
  top: 0;
  visibility: visible;
}

#lhc_header > ul.lhc-cf > li > ul.lhc-cf #lhc_close {
  background-color: #ff0000;
  margin-top: 2px;
}

@media screen and (max-width: 992px) {

  #lhc_status_container .status-icon,
  #lhc_container .status-icon {
    width: 44px !important;
    height: 44px !important;
    border: 3px solid #ffffff;
  }
}

/* ============================================================================================== */
/* Sweet-Alert                                                                                    */
/* ============================================================================================== */

.swal-modal {
  border-radius: var(--spacing-3);
}

.swal-icon {
  border-style: none;
}

.swal-icon--warning__body,
.swal-icon--warning__dot {
  display: none;
}

.swal-icon {
  content: "";
  display: block;
  height: 90px;
  min-width: 150px !important;
  margin: var(--spacing-8) auto var(--spacing-8);
  border-radius: 0;
}

.swal-icon.swal-icon--warning {
  background: url(../img/icon/midf-icon/alert-circle-red.svg) no-repeat center;
}

.swal-icon--duplicate-registration-number {
  background: url(../img/icon/midf-revamp-icon/user-check.svg) no-repeat center;
}

.swal-modal .swal-title {
  margin: 0 0 var(--spacing-2);
  padding: 0 var(--spacing-8);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: var(--line-height);
  color: var(--color-light-contrast);
}

.swal-modal .swal-content {
  margin: 0;
  padding: 0 var(--spacing-8);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  line-height: var(--line-height);
}

.swal-modal .swal-content__p {
  margin: 0;
}

.swal-footer {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-4);
  margin: var(--spacing-8) 0 0;
  padding: 0 var(--spacing-4) var(--spacing-4)
}

.swal-button-container {
  margin: 0px;
}

/* [##] Buttons (Copied from advent buttons) -------------------------------- */

.swal-modal .swal-button {
  --border-radius: 10px;
  --box-shadow: none;
  --background: var(--color-dark);
  --color: var(--color-dark-contrast);
  --background-focused: var(--color-dark-shade);
  --color-focused: var(--color-dark-contrast);
  --background-disabled: rgba(var(--color-dark-rgba), 0.302);
  --color-disabled: rgba(var(--color-dark-contrast-rgb), 0.302);

  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  background: var(--background) !important;
  color: var(--color) !important;
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  transition: all 300ms ease-in-out;
  text-transform: capitalize;
  visibility: visible;
  opacity: 1;
}

.swal-modal .swal-button:is(:hover, :focus, :focus-visible) {
  background: var(--background-focused) !important;
  color: var(--color-focused) !important;
  opacity: 1;
}

.swal-modal .swal-button--cancel {
  --background: transparent;
  --color: var(--color-light-contrast);
  --background-focused: var(--background);
  --color-focused: var(--color-primary);
  --background-disabled: var(--background);
  --color-disabled: rgba(var(--color-light-contrast-rgb), 0.302);

  margin: 0;
  padding: 0;
  text-decoration: underline;
}

.swal-modal .swal-button--confirm {
  --background: var(--color-primary);
  --color: var(--color-primary-contrast);
  --background-focused: var(--color-dark);
  --color-focused: var(--color-dark-contrast);
  --background-disabled: rgba(var(--color-primary-rgb), 0.302);
  --color-disabled: rgba(var(--color-primary-contrast-rgb), 1);

  min-width: calc(40 * var(--spacing) * var(--spn) / var(--spn));
  margin: 0;
  padding: var(--spacing-4) var(--spacing-8);
  font-weight: 600;
}

/* [##] Responsiveness ------------------------------------------------------ */

@media (max-width: 767px) {
  .swal-modal .swal-footer {
    flex-flow: column-reverse nowrap;
  }

  .swal-modal .swal-button-container {
    width: 100%;
  }

  .swal-modal .swal-button {
    min-width: none;
    width: 100%;
  }
}

/* ============================================================================================== */
/* advent-msg-err adjustment                                                                      */
/* ============================================================================================== */

.advent-msg.advent-msg-err h3 {
  display: none;
}

/* ============================================================================================== */
/* eKYC Onfido on mobile devices                                                                  */
/* ============================================================================================== */
@media (max-width: 479px) {
  .onfido-sdk-ui-Modal-inner {
    position: relative !important;
    height: 50vh !important;
  }
}