/* Figma Styles of your File */
  :root {
    /* Colors */
    --trend-red: #cc0000;
    --black: #000000;
    --trend-red-hover: #af0909;
    --inactive-grey: #e6e7e8;
    --light: #f9f9f9;
    --onxy: #4d4d4f;
    --white: #ffffff;
    --hint-grey: #9d9fa2;
    --link-color: #0e73ac;
    --warning: #ffb42b;
    --active: #00d281;
    --caution: #ff3c23;
    --comfort-black: #222222;
    --dark-overlay: rgba(0, 0, 0, 0.25);
    --primary-blue: #56a0d3;
    --hover-blue: #33abd6;
    --link-hover: #065785;
    --warning-light: #fde8e9;
    --warning-light: #fdf0c3;
    --active-light: #e8f9f0;
    --table-outline: #dddddd;
    --new-trend: #d71920;
    --new-blue: #0516f9;
    --new-sec: #2bceff;
    --gradient: linear-gradient(
      -73.71deg,
      rgba(215, 25, 32, 1) 0%,
      rgba(122, 19, 21, 1) 74.48120713233948%,
      rgba(37, 37, 37, 1) 100%
    );
  
    /* Fonts */
    --title-h1-font-family: Interstate-Bold, sans-serif;
    --title-h1-font-size: 64px;
    --title-h1-line-height: normal;
    --title-h1-font-weight: 700;
    --title-h1-font-style: normal;
    --h2-font-family: Interstate-Bold, sans-serif;
    --h2-font-size: 32px;
    --h2-line-height: 112%;
    --h2-font-weight: 700;
    --h2-font-style: normal;
    --h3-font-family: Interstate-Bold, sans-serif;
    --h3-font-size: 30px;
    --h3-line-height: 124%;
    --h3-font-weight: 700;
    --h3-font-style: normal;
    --subtitle-font-family: Interstate-Bold, sans-serif;
    --subtitle-font-size: 22px;
    --subtitle-line-height: 112%;
    --subtitle-font-weight: 700;
    --subtitle-font-style: normal;
    --body-light-font-family: OpenSans-Regular, sans-serif;
    --body-light-font-size: 16px;
    --body-light-line-height: 161%;
    --body-light-font-weight: 400;
    --body-light-font-style: normal;
    --body-underline-font-family: OpenSans-SemiBold, sans-serif;
    --body-underline-font-size: 16px;
    --body-underline-line-height: normal;
    --body-underline-font-weight: 600;
    --body-underline-font-style: normal;
    --body-bold-font-family: OpenSans-Bold, sans-serif;
    --body-bold-font-size: 16px;
    --body-bold-line-height: 120%;
    --body-bold-font-weight: 700;
    --body-bold-font-style: normal;
    --pretext-font-family: Interstate-Bold, sans-serif;
    --pretext-font-size: 12px;
    --pretext-line-height: normal;
    --pretext-font-weight: 700;
    --pretext-font-style: normal;
    --pre-title-font-family: Interstate-Bold, sans-serif;
    --pre-title-font-size: 12px;
    --pre-title-line-height: normal;
    --pre-title-font-weight: 700;
    --pre-title-font-style: normal;
    --body-regular-font-family: OpenSans-SemiBold, sans-serif;
    --body-regular-font-size: 16px;
    --body-regular-line-height: 160%;
    --body-regular-font-weight: 600;
    --body-regular-font-style: normal;
    --title-font-family: Interstate-Regular, sans-serif;
    --title-font-size: 20px;
    --title-line-height: 120%;
    --title-font-weight: 400;
    --title-font-style: normal;
    --body-small-bold-font-family: OpenSans-SemiBold, sans-serif;
    --body-small-bold-font-size: 14px;
    --body-small-bold-line-height: 16px;
    --body-small-bold-font-weight: 600;
    --body-small-bold-font-style: normal;
    --body-small-font-family: OpenSans-Regular, sans-serif;
    --body-small-font-size: 14px;
    --body-small-line-height: 140%;
    --body-small-font-weight: 400;
    --body-small-font-style: normal;
    --mobiletitle-font-family: OpenSans-Bold, sans-serif;
    --mobiletitle-font-size: 56px;
    --mobiletitle-line-height: 110%;
    --mobiletitle-font-weight: 700;
    --mobiletitle-font-style: normal;
    --mobile-header2-font-family: Interstate-Black, sans-serif;
    --mobile-header2-font-size: 36px;
    --mobile-header2-line-height: 110%;
    --mobile-header2-font-weight: 900;
    --mobile-header2-font-style: normal;
    --mobileh3-font-family: Interstate-Black, sans-serif;
    --mobileh3-font-size: 24px;
    --mobileh3-line-height: 24px;
    --mobileh3-font-weight: 900;
    --mobileh3-font-style: normal;
    --mobilesubtitle-font-family: Interstate-Regular, sans-serif;
    --mobilesubtitle-font-size: 20px;
    --mobilesubtitle-line-height: 110%;
    --mobilesubtitle-font-weight: 400;
    --mobilesubtitle-font-style: normal;
    --mobilebody-thin-font-family: OpenSans-Regular, sans-serif;
    --mobilebody-thin-font-size: 14px;
    --mobilebody-thin-line-height: 140%;
    --mobilebody-thin-font-weight: 400;
    --mobilebody-thin-font-style: normal;
    --mobilebody-regular-font-family: Interstate-Regular, sans-serif;
    --mobilebody-regular-font-size: 14px;
    --mobilebody-regular-line-height: 140%;
    --mobilebody-regular-font-weight: 400;
    --mobilebody-regular-font-style: normal;
    --mobile-regular-bold-font-family: Interstate-Bold, sans-serif;
    --mobile-regular-bold-font-size: 14px;
    --mobile-regular-bold-line-height: 140%;
    --mobile-regular-bold-font-weight: 700;
    --mobile-regular-bold-font-style: normal;
    --mobilesmaller-text-font-family: Interstate-Regular, sans-serif;
    --mobilesmaller-text-font-size: 12px;
    --mobilesmaller-text-line-height: 104%;
    --mobilesmaller-text-font-weight: 400;
    --mobilesmaller-text-font-style: normal;
    --mobilesmaller-text-bold-font-family: Interstate-Bold, sans-serif;
    --mobilesmaller-text-bold-font-size: 12px;
    --mobilesmaller-text-bold-line-height: 14px;
    --mobilesmaller-text-bold-font-weight: 700;
    --mobilesmaller-text-bold-font-style: normal;
    --body3-14px-light-with-underline-font-family: OpenSans-Regular, sans-serif;
    --body3-14px-light-with-underline-font-size: 14px;
    --body3-14px-light-with-underline-line-height: 132%;
    --body3-14px-light-with-underline-font-weight: 400;
    --body3-14px-light-with-underline-font-style: normal;
  
    /* Effects */
    --bsp-dropshadow-box-shadow: 0px 4px 15px 0px rgba(196, 196, 196, 0.35);
    --red-box-shadow: 0px 10px 18px 0px rgba(204, 0, 0, 0.15);
    --underline-box-shadow: inset 0px -1px 0px 0px rgba(244, 244, 244, 1);
    --30-dropshadow-box-shadow: -1px 7px 15px 0px rgba(0, 0, 0, 0.06);
    --30-dropshadow-box-box-shadow: 0px 6px 49px 0px rgba(0, 0, 0, 0.22);
  }


.prm-width{
  max-width: 1224px;
}
/**header menus*/

.prm-header-submenu,
.prm-header-submenu * {
  box-sizing: border-box;
}
.prm-header-submenu {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 216px;
  position: relative;
}
.prm-header-submenu-sub1 {
  background: var(--black, #000000);
  border-style: solid;
  border-color: var(--trend-red, #cc0000);
  border-width: 0px 0px 1px 0px;
  padding: 10px 10px 6px 10px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.prm-header-submenu-sub1-title {
  color: #ffffff;
  text-align: left;
  font-family: var(--body3-14px-bold-font-family, "OpenSans-Bold", sans-serif);
  font-size: var(--body3-14px-bold-font-size, 14px);
  line-height: var(--body3-14px-bold-line-height, 21px);
  font-weight: var(--body3-14px-bold-font-weight, 700);
  position: relative;
}
.prm-header-submenu-sub2 {
  background: var(--black, #000000);
  padding: 8px 10px 8px 10px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;
}
.prm-header-submenu-sub2-title {
  color: #ffffff;
  text-align: left;
  font-family: var(
    --body2-16px-regular-font-family,
    "OpenSans-Regular",
    sans-serif
  );
  font-size: var(--body2-16px-regular-font-size, 16px);
  line-height: var(--body2-16px-regular-line-height, 156%);
  letter-spacing: var(--body2-16px-regular-letter-spacing, -0.01em);
  font-weight: var(--body2-16px-regular-font-weight, 400);
  position: relative;
}

.prm-header-submenu-sub2:hover {
  background: rgba(77, 77, 77, 1);/**background: rgba(0, 0, 0, 0.70);*/
}





/**side bar menu*/
.side-nav,
.side-nav * {
  box-sizing: border-box;
}
.side-nav {
  background: var(--light, #f9f9f9);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  justify-content: flex-start;
  width: 292px;
  height: 100%;
  position: relative;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
  min-height: 100rem;
}
.side-nav-title {
  padding: 0px 16px 0px 6px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 260px;
  position: relative;
}
.side-nav-title-value {
  color: var(--primary-color-black, #000000);
  text-align: left;
  font-family: var(
    --body3-14px-semibold-font-family,
    "OpenSans-SemiBold",
    sans-serif
  );
  font-size: var(--body3-14px-semibold-font-size, 14px);
  line-height: var(--body3-14px-semibold-line-height, 21px);
  font-weight: var(--body3-14px-semibold-font-weight, 600);
  position: relative;
  width: 100%; /* update by zhou on 20250815 */
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.side-nav-title-sub1 {
  display: flex;
  flex-direction: column;
  gap: 0px;
  align-items: flex-start;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 260px;
  position: relative;
}
.side-nav-title-sub1-section {
  padding: 16px 16px 16px 6px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
  width: 260px;
  position: relative;
}
.side-nav-title-sub1-section-group {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  position: relative;
}
.side-nav-title-sub1-section-group-img {
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  position: relative;
  object-fit: cover;
}
.side-nav-title-sub1-section-group-label {
  color: var(--primary-color-black, #000000);
  text-align: left;
  font-family: var(--body2-16px-bold-font-family, "OpenSans-Bold", sans-serif);
  font-size: var(--body2-16px-bold-font-size, 16px);
  line-height: var(--body2-16px-bold-line-height, 156%);
  letter-spacing: var(--body2-16px-bold-letter-spacing, -0.01em);
  font-weight: var(--body2-16px-bold-font-weight, 700);
  position: relative;
  width: 100%;   /* update by zhou on 20250815 */
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.line-split {
  margin-top: -1px;
  border-style: solid;
  border-color: #000000;
  border-width: 1px 0 0 0;
  flex-shrink: 0;
  width: 254.03px;
  height: 0px;
  position: relative;
}
/* .side-nav-title-sub2 {
  padding: 12px 16px 12px 16px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 260px;
  position: relative;
  height:auto;
}

.side-nav-title-sub2:hover {
  background: var(--Primary-Color-Grey-K10, #E6E7E8);
}
.side-nav-title-sub2.active {
  background: var(--Primary-Color-Grey-K10, #E6E7E8);
} */

.side-nav-title-sub2-label {
  color: var(--primary-color-black, #000000);
  text-align: left;
  font-family: var(
    --body2-16px-regular-font-family,
    "OpenSans-Regular",
    sans-serif
  );
  font-size: var(--body2-16px-regular-font-size, 16px);
  line-height: var(--body2-16px-regular-line-height, 24px);
  letter-spacing: var(--body2-16px-regular-letter-spacing, -0.01em);
  font-weight: var(--body2-16px-regular-font-weight, 400);
  position: relative;
  width: 100%; /* update by zhou on 20250815 */
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* .sidebar-item__wrapper.active {
  * background-color: #DE543B; *
}

.sidebar-item__wrapper.active:hover {
  * background-color: #DE543B; *
} */



/* .rectangle-red {
  background: var(--primary-color-red-trend-red, #d71920);
  flex-shrink: 0;
  width: 5px;
  height: 100%;
  position: relative;
}
.side-nav-selected-wrapper {
  background: #ffffff;
  * padding: 12px 16px 12px 16px; *
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 255px;
  position: relative;
  height: 100%;
} */



.side-nav-title-sub2 {
  padding: 12px 16px 12px 16px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: stretch; 
  justify-content: flex-start;
  flex-shrink: 0;
  width: 260px;
  position: relative;
  height: auto;
}

.side-nav-title-sub2:hover,
.side-nav-title-sub2.active {
  background: var(--Primary-Color-Grey-K10, #E6E7E8);
}

.rectangle-red {
  background: var(--primary-color-red-trend-red, #d71920);
  flex-shrink: 0;
  width: 5px;
  /* height: 100%;  in order to make the selected style work*/
  position: relative;
}

.side-nav-selected-wrapper {
  background: #ffffff;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 255px;
  position: relative;
  height: 100%; 
}




/* .nav-lead__menu {
  top: 3rem;
  right: 0;
  min-width: 288px;
  border: none;
  z-index: 999;
}

.nav-lead__menu>li {
  transition-property: var(--transition-colors);
  transition-duration: var(--duration-150);
  transition-timing-function: var(--ease-in-out);
}

.nav-lead__menu>li:hover {
  background-color: var(--clr-gray-450);
}

.nav-lead__menu a {
  width: 100%;
  padding: 0.75rem;
} */

/**added by zuqing on 20250228 for side bar sticky*/
.case-management__sticky {
  max-height: 950px;
  top: 72px;
  box-shadow: none;
}

.case-management__sidebar {
  background: var(--light, #f9f9f9);
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25);
  position: relative;
  z-index: 1;
}
/**added by zuqing on 20250228 for side bar sticky*/

/* add by zhou on 20250903(Align all page margins) begin */
.pp-page-container {
  /* padding: 24px 108px 33px 24px;   */  /* delete by zhou on 20250908(According to the case) */
}
/* add by zhou on 20250903(Align all page margins) end */