@charset "UTF-8";
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/inter/inter-cyrillic-ext-6b2d1fff.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/inter/inter-cyrillic-c12eae18.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/inter/inter-greek-ext-3df07814.woff2") format("woff2");
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/inter/inter-greek-73e6e861.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/inter/inter-vietnamese-b5b7a520.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/inter/inter-latin-ext-7e66ed07.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/assets/inter/inter-latin-fef0933c.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --font-primary: "Inter", sans-serif;
  --font-secondary: "Inter", sans-serif;
}

:root {
  --white: hsl(0, 0%, 100%);
  --black: hsl(0, 0%, 0%);
  --dark-background: hsl(247, 100%, 7%);
  --dark-surface: hsl(223, 78%, 11%);
  --transparent: transparent;
  --neutral-10: hsl(225, 40%, 98%);
  --neutral-15: hsl(225, 40%, 95%);
  --neutral-20: hsl(225, 40%, 85%);
  --neutral-30: hsl(225, 40%, 75%);
  --neutral-40: hsl(225, 40%, 65%);
  --neutral-50: hsl(225, 40%, 50%);
  --neutral-60: hsl(225, 40%, 40%);
  --neutral-70: hsl(225, 40%, 28%);
  --neutral-80: hsl(225, 40%, 18%);
  --neutral-90: hsl(225, 40%, 11%);
  --primary-10: hsl(223, 78%, 98%);
  --primary-20: hsl(223, 78%, 95%);
  --primary-30: hsl(223, 78%, 75%);
  --primary-40: hsl(223, 78%, 65%);
  --primary-50: hsl(223, 78%, 50%); /* Secondary Brand Color */
  --primary-60: hsl(223, 78%, 40%);
  --primary-70: hsl(223, 78%, 28%);
  --primary-80: hsl(223, 78%, 18%);
  --primary-90: hsl(223, 78%, 11%); /* Primary Color */
  --primary-trans: hsl(223, 78%, 50%, 0.07);
  --primary-trans-2: hsl(223, 78%, 50%, 0.15);
  --accent-10: hsl(16, 88%, 98%);
  --accent-20: hsl(16, 88%, 85%);
  --accent-30: hsl(16, 88%, 75%);
  --accent-40: hsl(16, 88%, 65%);
  --accent-50: hsl(16, 88%, 50%);
  --accent-60: hsl(16, 88%, 40%);
  --accent-70: hsl(16, 88%, 28%);
  --accent-80: hsl(16, 88%, 18%);
  --accent-90: hsl(16, 88%, 11%);
  --accent-2-10: hsl(167, 89%, 98%);
  --accent-2-20: hsl(167, 89%, 85%);
  --accent-2-30: hsl(167, 89%, 75%);
  --accent-2-40: hsl(167, 89%, 65%);
  --accent-2-50: hsl(167, 89%, 50%); /* accent 2 color */
  --accent-2-60: hsl(167, 89%, 40%);
  --accent-2-70: hsl(167, 89%, 28%);
  --accent-2-80: hsl(167, 89%, 18%);
  --accent-2-90: hsl(167, 89%, 11%);
  --pink-50: hsl(332, 96%, 49%);
  --pink-60: hsl(332, 97%, 39%);
  --info-10: hsl(200, 95%, 98%);
  --info-20: hsl(200, 95%, 85%);
  --info-30: hsl(200, 95%, 75%);
  --info-40: hsl(200, 95%, 65%);
  --info-50: hsl(200, 95%, 50%);
  --info-60: hsl(200, 95%, 40%);
  --info-70: hsl(200, 95%, 28%);
  --info-80: hsl(200, 95%, 18%);
  --info-90: hsl(200, 95%, 11%);
  --error-10: hsl(0, 97%, 98%);
  --error-20: hsl(0, 97%, 85%);
  --error-30: hsl(0, 97%, 75%);
  --error-40: hsl(0, 97%, 65%);
  --error-50: hsl(0, 97%, 50%);
  --error-60: hsl(0, 97%, 40%);
  --error-70: hsl(0, 97%, 28%);
  --error-80: hsl(0, 97%, 18%);
  --error-90: hsl(0, 97%, 11%);
  --warning-10: hsl(45, 97%, 98%);
  --warning-20: hsl(45, 97%, 85%);
  --warning-30: hsl(45, 97%, 75%);
  --warning-40: hsl(45, 97%, 65%);
  --warning-50: hsl(45, 97%, 50%);
  --warning-60: hsl(45, 97%, 40%);
  --warning-70: hsl(45, 97%, 28%);
  --warning-80: hsl(45, 97%, 18%);
  --warning-90: hsl(45, 97%, 11%);
  --success-10: hsl(152, 90%, 98%);
  --success-20: hsl(152, 90%, 85%);
  --success-30: hsl(152, 90%, 75%);
  --success-40: hsl(152, 90%, 65%);
  --success-50: hsl(152, 90%, 50%);
  --success-60: hsl(152, 90%, 40%);
  --success-70: hsl(152, 90%, 28%);
  --success-80: hsl(152, 90%, 18%);
  --success-90: hsl(152, 90%, 11%);
  --purple-10: hsl(285, 88%, 98%);
  --purple-20: hsl(285, 88%, 85%);
  --purple-30: hsl(285, 88%, 75%);
  --purple-40: hsl(285, 88%, 65%);
  --purple-50: hsl(285, 88%, 50%);
  --purple-60: hsl(285, 88%, 40%);
  --purple-70: hsl(285, 88%, 28%);
  --purple-80: hsl(285, 88%, 18%);
  --purple-90: hsl(285, 88%, 11%);
  /* Blue */
  --tag-blue-50: hsl(203, 100%, 73%);
  --tag-blue-90: hsl(217, 90%, 15%);
  /* Green */
  --tag-green-50: hsl(145, 78%, 66%);
  --tag-green-90: hsl(145, 65%, 10%);
  /* Purple */
  --tag-purple-50: hsl(265, 100%, 80%);
  --tag-purple-90: hsl(265, 80%, 15%);
  /* Yellow */
  --tag-yellow-50: hsl(55, 95%, 67%);
  --tag-yellow-90: hsl(55, 95%, 7%);
  /* Teal */
  --tag-teal-50: hsl(175, 87%, 66%);
  --tag-teal-90: hsl(175, 70%, 10%);
  /* Gray */
  --tag-gray-50: hsl(0, 1%, 77%);
  --tag-gray-90: hsl(0, 0%, 10%);
  /* Extended Set */
  /* Dark Blue */
  --tag-dark-blue-50: hsl(224, 100%, 82%);
  --tag-dark-blue-90: hsl(224, 80%, 10%);
  /* Pink */
  --tag-pink-50: hsl(340, 100%, 76%);
  --tag-pink-90: hsl(340, 90%, 10%);
  /* Coral */
  --tag-coral-50: hsl(10, 100%, 75%);
  --tag-coral-90: hsl(10, 85%, 10%);
  /* Light Green */
  --tag-light-green-50: hsl(150, 100%, 86%);
  --tag-light-green-90: hsl(150, 65%, 10%);
  /* Indigo */
  --tag-indigo-50: hsl(288, 100%, 82%);
  --tag-indigo-90: hsl(288, 70%, 10%);
  /* Brown */
  --tag-brown-50: hsl(30, 79%, 70%);
  --tag-brown-90: hsl(30, 60%, 10%);
  --gradient-account-1: linear-gradient(138deg, #ea4b3c 0%, #c03c8f 46%, #3948d6 100%);
  --gradient-account-2: linear-gradient(138deg, #cf3ad4 0%, #9a3ceb 52%, #6b3ce8 100%);
  --gradient-account-3: linear-gradient(142deg, #e5477e 0%, #a54a86 44%, #3f9d63 100%);
  --gradient-account-4: linear-gradient(138deg, #f0803a 0%, #e0544f 48%, #a83bb8 100%);
  --gradient-account-5: linear-gradient(140deg, #2fb0c8 0%, #3f6fd8 50%, #7a3ce8 100%);
  --gradient-account-6: linear-gradient(142deg, #3fae72 0%, #2f9fb8 46%, #3f5dd8 100%);
  --white-alpha-05: hsla(0, 0%, 100%, 0.05);
  --white-alpha-10: hsla(0, 0%, 100%, 0.1);
  --white-alpha-20: hsla(0, 0%, 100%, 0.2);
  --white-alpha-30: hsla(0, 0%, 100%, 0.3);
  --white-alpha-40: hsla(0, 0%, 100%, 0.4);
  --white-alpha-50: hsla(0, 0%, 100%, 0.5);
  --white-alpha-60: hsla(0, 0%, 100%, 0.6);
  --white-alpha-70: hsla(0, 0%, 100%, 0.7);
  --white-alpha-80: hsla(0, 0%, 100%, 0.8);
  --white-alpha-90: hsla(0, 0%, 100%, 0.9);
  --black-alpha-05: hsla(0, 0%, 0%, 0.05);
  --black-alpha-10: hsla(0, 0%, 0%, 0.1);
  --black-alpha-20: hsla(0, 0%, 0%, 0.2);
  --black-alpha-30: hsla(0, 0%, 0%, 0.3);
  --black-alpha-40: hsla(0, 0%, 0%, 0.4);
  --black-alpha-50: hsla(0, 0%, 0%, 0.5);
  --black-alpha-60: hsla(0, 0%, 0%, 0.6);
  --black-alpha-70: hsla(0, 0%, 0%, 0.7);
  --black-alpha-80: hsla(0, 0%, 0%, 0.8);
  --black-alpha-90: hsla(0, 0%, 0%, 0.9);
  --primary-alpha-05: hsla(230, 98%, 44%, 0.05);
  --primary-alpha-10: hsla(230, 98%, 44%, 0.1);
  --primary-alpha-20: hsla(230, 98%, 44%, 0.2);
  --primary-alpha-30: hsla(230, 98%, 44%, 0.3);
  --primary-alpha-40: hsla(230, 98%, 44%, 0.4);
  --primary-alpha-50: hsla(230, 98%, 44%, 0.5);
  --primary-alpha-60: hsla(230, 98%, 44%, 0.6);
  --primary-alpha-70: hsla(230, 98%, 44%, 0.7);
  --primary-alpha-80: hsla(230, 98%, 44%, 0.8);
  --primary-alpha-90: hsla(230, 98%, 44%, 0.9);
  --primary: hsla(230, 98%, 44%, 1);
  --orange-alpha-05: hsla(15, 98%, 44%, 0.05);
  --orange-alpha-10: hsla(15, 98%, 44%, 0.1);
  --orange-alpha-20: hsla(15, 98%, 44%, 0.2);
  --orange-alpha-30: hsla(15, 98%, 44%, 0.3);
  --orange-alpha-40: hsla(15, 98%, 44%, 0.4);
  --orange-alpha-50: hsla(15, 98%, 44%, 0.5);
  --orange-alpha-60: hsla(15, 98%, 44%, 0.6);
  --orange-alpha-70: hsla(15, 98%, 44%, 0.7);
  --orange-alpha-80: hsla(15, 98%, 44%, 0.8);
  --orange-alpha-90: hsla(15, 98%, 44%, 0.9);
  --orange: hsla(15, 98%, 44%, 1);
  --orange-light: hsla(16, 100%, 60%, 1);
  --info-alpha-05: hsla(195, 84%, 33%, 0.05);
  --info-alpha-10: hsla(195, 84%, 33%, 0.1);
  --info-alpha-20: hsla(195, 84%, 33%, 0.2);
  --info-alpha-30: hsla(195, 84%, 33%, 0.3);
  --info-alpha-40: hsla(195, 84%, 33%, 0.4);
  --info-alpha-50: hsla(195, 84%, 33%, 0.5);
  --info-alpha-60: hsla(195, 84%, 33%, 0.6);
  --info-alpha-70: hsla(195, 84%, 33%, 0.7);
  --info-alpha-80: hsla(195, 84%, 33%, 0.8);
  --info-alpha-90: hsla(195, 84%, 33%, 0.9);
  --info: hsla(195, 84%, 33%, 1);
  --info-light: hsla(195, 84%, 50%, 1);
  --teal-alpha-05: hsla(180, 100%, 25%, 0.05);
  --teal-alpha-10: hsla(180, 100%, 25%, 0.1);
  --teal-alpha-20: hsla(180, 100%, 25%, 0.2);
  --teal-alpha-30: hsla(180, 100%, 25%, 0.3);
  --teal-alpha-40: hsla(180, 100%, 25%, 0.4);
  --teal-alpha-50: hsla(180, 100%, 25%, 0.5);
  --teal-alpha-60: hsla(180, 100%, 25%, 0.6);
  --teal-alpha-70: hsla(180, 100%, 25%, 0.7);
  --teal-alpha-80: hsla(180, 100%, 25%, 0.8);
  --teal-alpha-90: hsla(180, 100%, 25%, 0.9);
  --teal: hsla(180, 100%, 25%, 1);
  --teal-light: hsla(183, 65%, 52%, 1);
  --pink-alpha-05: hsla(300, 86%, 38%, 0.05);
  --pink-alpha-10: hsla(300, 86%, 38%, 0.1);
  --pink-alpha-20: hsla(300, 86%, 38%, 0.2);
  --pink-alpha-30: hsla(300, 86%, 38%, 0.3);
  --pink-alpha-40: hsla(300, 86%, 38%, 0.4);
  --pink-alpha-50: hsla(300, 86%, 38%, 0.5);
  --pink-alpha-60: hsla(300, 86%, 38%, 0.6);
  --pink-alpha-70: hsla(300, 86%, 38%, 0.7);
  --pink-alpha-80: hsla(300, 86%, 38%, 0.8);
  --pink-alpha-90: hsla(300, 86%, 38%, 0.9);
  --pink: hsla(300, 86%, 38%, 1);
  --pink-light: hsla(300, 100%, 68%, 1);
  --warning-alpha-05: hsla(45, 97%, 50%, 0.05);
  --warning-alpha-10: hsla(45, 97%, 50%, 0.1);
  --warning-alpha-20: hsla(45, 97%, 50%, 0.2);
  --warning-alpha-30: hsla(45, 97%, 50%, 0.3);
  --warning-alpha-40: hsla(45, 97%, 50%, 0.4);
  --warning-alpha-50: hsla(45, 97%, 50%, 0.5);
  --warning-alpha-60: hsla(45, 97%, 50%, 0.6);
  --warning-alpha-70: hsla(45, 97%, 50%, 0.7);
  --warning-alpha-80: hsla(45, 97%, 50%, 0.8);
  --warning-alpha-90: hsla(45, 97%, 50%, 0.9);
  --warning: hsla(45, 97%, 50%, 1);
  --success-alpha-05: hsla(152, 90%, 50%, 0.05);
  --success-alpha-10: hsla(152, 90%, 50%, 0.1);
  --success-alpha-20: hsla(152, 90%, 50%, 0.2);
  --success-alpha-30: hsla(152, 90%, 50%, 0.3);
  --success-alpha-40: hsla(152, 90%, 50%, 0.4);
  --success-alpha-50: hsla(152, 90%, 50%, 0.5);
  --success-alpha-60: hsla(152, 90%, 50%, 0.6);
  --success-alpha-70: hsla(152, 90%, 50%, 0.7);
  --success-alpha-80: hsla(152, 90%, 50%, 0.8);
  --success-alpha-90: hsla(152, 90%, 50%, 0.9);
  --success: hsla(152, 90%, 50%, 1);
  --danger-alpha-05: hsla(0, 72%, 50%, 0.05);
  --danger-alpha-10: hsla(0, 72%, 50%, 0.1);
  --danger-alpha-20: hsla(0, 72%, 50%, 0.2);
  --danger-alpha-30: hsla(0, 72%, 50%, 0.3);
  --danger-alpha-40: hsla(0, 72%, 50%, 0.4);
  --danger-alpha-50: hsla(0, 72%, 50%, 0.5);
  --danger-alpha-60: hsla(0, 72%, 50%, 0.6);
  --danger-alpha-70: hsla(0, 72%, 50%, 0.7);
  --danger-alpha-80: hsla(0, 72%, 50%, 0.8);
  --danger-alpha-90: hsla(0, 72%, 50%, 0.9);
  --danger: hsla(0, 72%, 50%, 1);
  --purple-alpha-05: hsla(285, 88%, 65%, 0.05);
  --purple-alpha-10: hsla(285, 88%, 65%, 0.1);
  --purple-alpha-20: hsla(285, 88%, 65%, 0.2);
  --purple-alpha-30: hsla(285, 88%, 65%, 0.3);
  --purple-alpha-40: hsla(285, 88%, 65%, 0.4);
  --purple-alpha-50: hsla(285, 88%, 65%, 0.5);
  --purple-alpha-60: hsla(285, 88%, 65%, 0.6);
  --purple-alpha-70: hsla(285, 88%, 65%, 0.7);
  --purple-alpha-80: hsla(285, 88%, 65%, 0.8);
  --purple-alpha-90: hsla(285, 88%, 65%, 0.9);
  --purple: hsla(285, 88%, 65%, 1);
}

body.light.standard {
  --standard-dark-blue: hsl(227, 100%, 98%);
}

body.dark.standard {
  --standard-dark-blue: hsl(227, 85%, 9%);
  --teal-alpha-05: hsla(183, 65%, 52%, 0.05);
  --teal-alpha-10: hsla(183, 65%, 52%, 0.1);
  --teal-alpha-20: hsla(183, 65%, 52%, 0.2);
  --teal-alpha-30: hsla(183, 65%, 52%, 0.3);
  --teal-alpha-40: hsla(183, 65%, 52%, 0.4);
  --teal-alpha-50: hsla(183, 65%, 52%, 0.5);
  --teal-alpha-60: hsla(183, 65%, 52%, 0.6);
  --teal-alpha-70: hsla(183, 65%, 52%, 0.7);
  --teal-alpha-80: hsla(183, 65%, 52%, 0.8);
  --teal-alpha-90: hsla(183, 65%, 52%, 0.9);
  --teal: hsla(183, 65%, 52%, 1);
  --teal-light: hsla(183, 65%, 52%, 1);
}

body.light.v8,
body.dark.v8 {
  --white: hsl(0, 0%, 100%);
  --dark-background: hsl(243, 90%, 4%);
  --dark-surface: hsl(243, 33%, 13%);
  --neutral-10: hsl(225, 40%, 98%);
  --neutral-15: hsl(225, 40%, 95%);
  --neutral-20: hsl(225, 40%, 85%);
  --neutral-30: hsl(225, 40%, 75%);
  --neutral-40: hsl(225, 40%, 65%);
  --neutral-50: hsl(225, 40%, 50%);
  --neutral-60: hsl(225, 40%, 40%);
  --neutral-70: hsl(225, 40%, 28%);
  --neutral-80: hsl(225, 40%, 18%);
  --neutral-90: hsl(225, 40%, 11%);
  --primary-10: hsl(223, 78%, 98%);
  --primary-20: hsl(223, 78%, 95%);
  --primary-30: hsl(223, 78%, 75%);
  --primary-40: hsl(223, 78%, 65%);
  --primary-50: hsl(223, 78%, 50%); /* Secondary Brand Color */
  --primary-60: hsl(223, 78%, 40%);
  --primary-70: hsl(223, 78%, 28%);
  --primary-80: hsl(223, 78%, 18%);
  --primary-90: hsl(243, 90%, 4%); /* Primary Color */
  --primary-trans: hsl(223, 78%, 50%, 0.07);
  --primary-trans-2: hsl(223, 78%, 50%, 0.15);
  --accent-10: hsl(16, 88%, 98%);
  --accent-20: hsl(16, 88%, 85%);
  --accent-30: hsl(16, 88%, 75%);
  --accent-40: hsl(16, 88%, 65%);
  --accent-50: hsl(16, 88%, 50%);
  --accent-60: hsl(16, 88%, 40%);
  --accent-70: hsl(16, 88%, 28%);
  --accent-80: hsl(16, 88%, 18%);
  --accent-90: hsl(16, 88%, 11%);
  --accent-2-10: hsl(167, 89%, 98%);
  --accent-2-20: hsl(167, 89%, 85%);
  --accent-2-30: hsl(167, 89%, 75%);
  --accent-2-40: hsl(167, 89%, 65%);
  --accent-2-50: hsl(167, 89%, 50%); /* accent 2 color */
  --accent-2-60: hsl(167, 89%, 40%);
  --accent-2-70: hsl(167, 89%, 28%);
  --accent-2-80: hsl(167, 89%, 18%);
  --accent-2-90: hsl(167, 89%, 11%);
  --pink-50: hsl(332, 96%, 49%);
  --pink-60: hsl(332, 97%, 39%);
  --info-10: hsl(200, 95%, 98%);
  --info-20: hsl(200, 95%, 85%);
  --info-30: hsl(200, 95%, 75%);
  --info-40: hsl(200, 95%, 65%);
  --info-50: hsl(200, 95%, 50%);
  --info-60: hsl(200, 95%, 40%);
  --info-70: hsl(200, 95%, 28%);
  --info-80: hsl(200, 95%, 18%);
  --info-90: hsl(200, 95%, 11%);
  --error-10: hsl(0, 97%, 98%);
  --error-20: hsl(0, 97%, 85%);
  --error-30: hsl(0, 97%, 75%);
  --error-40: hsl(0, 97%, 65%);
  --error-50: hsl(0, 97%, 50%);
  --error-60: hsl(0, 97%, 40%);
  --error-70: hsl(0, 97%, 28%);
  --error-80: hsl(0, 97%, 18%);
  --error-90: hsl(0, 97%, 11%);
  --warning-10: hsl(45, 97%, 98%);
  --warning-20: hsl(45, 97%, 85%);
  --warning-30: hsl(45, 97%, 75%);
  --warning-40: hsl(45, 97%, 65%);
  --warning-50: hsl(45, 97%, 50%);
  --warning-60: hsl(45, 97%, 40%);
  --warning-70: hsl(45, 97%, 28%);
  --warning-80: hsl(45, 97%, 18%);
  --warning-90: hsl(45, 97%, 11%);
  --success-10: hsl(152, 90%, 98%);
  --success-20: hsl(152, 90%, 85%);
  --success-30: hsl(152, 90%, 75%);
  --success-40: hsl(152, 90%, 65%);
  --success-50: hsl(152, 90%, 50%);
  --success-60: hsl(152, 90%, 40%);
  --success-70: hsl(152, 90%, 28%);
  --success-80: hsl(152, 90%, 18%);
  --success-90: hsl(152, 90%, 11%);
  --purple-10: hsl(285, 88%, 98%);
  --purple-20: hsl(285, 88%, 85%);
  --purple-30: hsl(285, 88%, 75%);
  --purple-40: hsl(285, 88%, 65%);
  --purple-50: hsl(285, 88%, 50%);
  --purple-60: hsl(285, 88%, 40%);
  --purple-70: hsl(285, 88%, 28%);
  --purple-80: hsl(285, 88%, 18%);
  --purple-90: hsl(285, 88%, 11%);
}

body.light.neutral,
body.dark.neutral {
  --dark-background: hsl(240, 2%, 8%);
  --dark-surface: hsl(60, 2%, 10%);
  --info-light: hsl(195, 87%, 53%);
  --theme-neutral-primary: hsl(225, 96%, 42%);
  --theme-neutral-primary-shade: hsl(225, 96%, 28%);
  --theme-neutral-dark-primary: hsl(225, 63%, 55%);
  --theme-neutral-dark-primary-tint: hsl(225, 100%, 66%);
  --theme-neutral-dark-primary-shade: hsl(225, 96%, 28%);
  --neutral-10: hsl(0, 0%, 98%);
  --neutral-20: hsl(0, 0%, 85%);
  --neutral-30: hsl(0, 0%, 75%);
  --neutral-40: hsl(0, 0%, 65%);
  --neutral-50: hsl(0, 0%, 50%);
  --neutral-60: hsl(0, 0%, 40%);
  --neutral-70: hsl(0, 0%, 28%);
  --neutral-80: hsl(0, 0%, 18%);
  --neutral-90: hsl(0, 0%, 11%);
  --primary-10: hsl(237, 94%, 98%);
  --primary-20: hsl(237, 94%, 95%);
  --primary-30: hsl(237, 94%, 75%);
  --primary-40: hsl(237, 94%, 65%);
  --primary-50: hsl(237, 94%, 59%); /* Secondary Brand Color */
  --primary-60: hsl(237, 94%, 40%);
  --primary-70: hsl(237, 94%, 28%);
  --primary-80: hsl(237, 94%, 18%);
  --primary-90: hsl(237, 94%, 11%); /* Primary Color */
  --accent-10: hsl(237, 94%, 98%);
  --accent-20: hsl(237, 94%, 95%);
  --accent-30: hsl(237, 94%, 75%);
  --accent-40: hsl(237, 94%, 65%);
  --accent-50: hsl(237, 94%, 59%); /* Secondary Brand Color */
  --accent-60: hsl(237, 94%, 40%);
  --accent-70: hsl(237, 94%, 28%);
  --accent-80: hsl(237, 94%, 18%);
  --accent-90: hsl(237, 94%, 11%); /* Primary Color */
  --primary-trans: hsla(216, 3%, 70%, 0.15);
  --primary-trans-2: hsla(227, 9%, 80%, 0.15);
}

body.light.protanopia,
body.dark.protanopia {
  --dark-background: hsl(247, 80%, 7%);
  --dark-surface: hsl(220, 75%, 11%);
  --primary-50: hsl(220, 75%, 50%); /* Secondary Brand Color - Blue */
  --primary-90: hsl(220, 75%, 11%); /* Primary Color */
  --accent-10: hsl(285, 70%, 98%);
  --accent-20: hsl(285, 70%, 85%);
  --accent-30: hsl(285, 70%, 75%);
  --accent-40: hsl(285, 70%, 65%); /* accent color - Purple */
  --accent-50: hsl(285, 70%, 50%);
  --accent-60: hsl(285, 70%, 40%);
  --accent-70: hsl(285, 70%, 28%);
  --accent-80: hsl(285, 70%, 18%);
  --accent-90: hsl(285, 70%, 11%);
  --pink-50: hsl(330, 76%, 49%);
  --pink-60: hsl(330, 77%, 39%);
  --error-10: hsl(22, 90%, 98%);
  --error-20: hsl(22, 90%, 85%);
  --error-30: hsl(22, 90%, 75%);
  --error-40: hsl(22, 90%, 65%);
  --error-50: hsl(22, 90%, 50%); /* Vermillion - off the red-green axis (Okabe-Ito) */
  --error-60: hsl(22, 90%, 40%);
  --error-70: hsl(22, 90%, 28%);
  --error-80: hsl(22, 90%, 18%);
  --error-90: hsl(22, 90%, 11%);
  --warning-10: hsl(46, 95%, 98%);
  --warning-20: hsl(46, 95%, 85%);
  --warning-30: hsl(46, 95%, 75%);
  --warning-40: hsl(46, 95%, 65%);
  --warning-50: hsl(46, 95%, 50%); /* Gold - split from error by hue + lightness */
  --warning-60: hsl(46, 95%, 40%);
  --warning-70: hsl(46, 95%, 28%);
  --warning-80: hsl(46, 95%, 18%);
  --warning-90: hsl(46, 95%, 11%);
  --success-10: hsl(173, 72%, 98%);
  --success-20: hsl(173, 72%, 85%);
  --success-30: hsl(173, 72%, 75%);
  --success-40: hsl(173, 72%, 65%);
  --success-50: hsl(173, 72%, 50%); /* Teal - off the red-green axis */
  --success-60: hsl(173, 72%, 40%);
  --success-70: hsl(173, 72%, 28%);
  --success-80: hsl(173, 72%, 18%);
  --success-90: hsl(173, 72%, 11%);
  --purple-10: hsl(285, 70%, 98%);
  --purple-20: hsl(285, 70%, 85%);
  --purple-30: hsl(285, 70%, 75%);
  --purple-40: hsl(285, 70%, 65%);
  --purple-50: hsl(285, 70%, 50%);
  --purple-60: hsl(285, 70%, 40%);
  --purple-70: hsl(285, 70%, 28%);
  --purple-80: hsl(285, 70%, 18%);
  --purple-90: hsl(285, 70%, 11%);
  --primary-trans: hsl(220, 75%, 50%, 0.07);
  --primary-trans-2: hsl(220, 75%, 50%, 0.15);
  /* Blue - safe */
  --tag-blue-50: hsl(220, 90%, 75%);
  --tag-blue-90: hsl(220, 80%, 15%);
  /* Cyan - replaces green */
  --tag-green-50: hsl(180, 80%, 70%);
  --tag-green-90: hsl(180, 70%, 12%);
  /* Purple - safe */
  --tag-purple-50: hsl(285, 85%, 75%);
  --tag-purple-90: hsl(285, 75%, 15%);
  /* Yellow - safe */
  --tag-yellow-50: hsl(50, 90%, 65%);
  --tag-yellow-90: hsl(50, 85%, 10%);
  /* Teal/Cyan - safe */
  --tag-teal-50: hsl(190, 80%, 65%);
  --tag-teal-90: hsl(190, 70%, 12%);
  /* Gray */
  --tag-gray-50: hsl(0, 0%, 75%);
  --tag-gray-90: hsl(0, 0%, 15%);
  /* Extended Set */
  /* Dark Blue - safe */
  --tag-dark-blue-50: hsl(240, 85%, 75%);
  --tag-dark-blue-90: hsl(240, 75%, 12%);
  /* Orange - replaces pink */
  --tag-pink-50: hsl(25, 90%, 70%);
  --tag-pink-90: hsl(25, 80%, 12%);
  /* Gold - replaces coral */
  --tag-coral-50: hsl(45, 90%, 68%);
  --tag-coral-90: hsl(45, 80%, 12%);
  /* Bright Cyan - replaces light green */
  --tag-light-green-50: hsl(175, 85%, 72%);
  --tag-light-green-90: hsl(175, 70%, 12%);
  /* Violet - replaces indigo */
  --tag-indigo-50: hsl(270, 80%, 75%);
  --tag-indigo-90: hsl(270, 70%, 12%);
  /* Yellow-Orange - replaces brown */
  --tag-brown-50: hsl(40, 85%, 65%);
  --tag-brown-90: hsl(40, 75%, 12%);
}

body.light.deuteranopia,
body.dark.deuteranopia {
  --dark-background: hsl(247, 80%, 7%);
  --dark-surface: hsl(220, 75%, 11%);
  --accent-10: hsl(285, 70%, 98%);
  --accent-20: hsl(285, 70%, 85%);
  --accent-30: hsl(285, 70%, 75%);
  --accent-40: hsl(285, 70%, 65%); /* accent color - Purple */
  --accent-50: hsl(285, 70%, 50%);
  --accent-60: hsl(285, 70%, 40%);
  --accent-70: hsl(285, 70%, 28%);
  --accent-80: hsl(285, 70%, 18%);
  --accent-90: hsl(285, 70%, 11%);
  --pink-50: hsl(330, 76%, 49%);
  --pink-60: hsl(330, 77%, 39%);
  --error-10: hsl(16, 85%, 98%);
  --error-20: hsl(16, 85%, 85%);
  --error-30: hsl(16, 85%, 75%);
  --error-40: hsl(16, 85%, 65%);
  --error-50: hsl(16, 85%, 50%); /* Vermillion - off the red-green axis (Okabe-Ito) */
  --error-60: hsl(16, 85%, 40%);
  --error-70: hsl(16, 85%, 28%);
  --error-80: hsl(16, 85%, 18%);
  --error-90: hsl(16, 85%, 11%);
  --warning-10: hsl(45, 95%, 98%);
  --warning-20: hsl(45, 95%, 85%);
  --warning-30: hsl(45, 95%, 75%);
  --warning-40: hsl(45, 95%, 65%);
  --warning-50: hsl(45, 95%, 50%); /* Gold - split from error by hue + lightness */
  --warning-60: hsl(45, 95%, 40%);
  --warning-70: hsl(45, 95%, 28%);
  --warning-80: hsl(45, 95%, 18%);
  --warning-90: hsl(45, 95%, 11%);
  --success-10: hsl(172, 78%, 98%);
  --success-20: hsl(172, 78%, 85%);
  --success-30: hsl(172, 78%, 75%);
  --success-40: hsl(172, 78%, 65%);
  --success-50: hsl(172, 78%, 50%); /* Teal - off the red-green axis */
  --success-60: hsl(172, 78%, 40%);
  --success-70: hsl(172, 78%, 28%);
  --success-80: hsl(172, 78%, 18%);
  --success-90: hsl(172, 78%, 11%);
  --primary-50: hsl(220, 75%, 50%); /* Secondary Brand Color - Blue */
  --primary-90: hsl(220, 75%, 11%); /* Primary Color */
  --primary-trans: hsl(220, 75%, 50%, 0.07);
  --primary-trans-2: hsl(220, 75%, 50%, 0.15);
  /* Blue - safe */
  --tag-blue-50: hsl(220, 90%, 75%);
  --tag-blue-90: hsl(220, 80%, 15%);
  /* Cyan - replaces green */
  --tag-green-50: hsl(180, 80%, 70%);
  --tag-green-90: hsl(180, 70%, 12%);
  /* Purple - safe */
  --tag-purple-50: hsl(285, 85%, 75%);
  --tag-purple-90: hsl(285, 75%, 15%);
  /* Yellow - safe */
  --tag-yellow-50: hsl(50, 90%, 65%);
  --tag-yellow-90: hsl(50, 85%, 10%);
  /* Teal/Cyan - safe */
  --tag-teal-50: hsl(190, 80%, 65%);
  --tag-teal-90: hsl(190, 70%, 12%);
  /* Gray */
  --tag-gray-50: hsl(0, 0%, 75%);
  --tag-gray-90: hsl(0, 0%, 15%);
  /* Extended Set */
  /* Dark Blue - safe */
  --tag-dark-blue-50: hsl(240, 85%, 75%);
  --tag-dark-blue-90: hsl(240, 75%, 12%);
  /* Orange - replaces pink */
  --tag-pink-50: hsl(25, 90%, 70%);
  --tag-pink-90: hsl(25, 80%, 12%);
  /* Gold - replaces coral */
  --tag-coral-50: hsl(45, 90%, 68%);
  --tag-coral-90: hsl(45, 80%, 12%);
  /* Bright Cyan - replaces light green */
  --tag-light-green-50: hsl(175, 85%, 72%);
  --tag-light-green-90: hsl(175, 70%, 12%);
  /* Violet - replaces indigo */
  --tag-indigo-50: hsl(270, 80%, 75%);
  --tag-indigo-90: hsl(270, 70%, 12%);
  /* Yellow-Orange - replaces brown */
  --tag-brown-50: hsl(40, 85%, 65%);
  --tag-brown-90: hsl(40, 75%, 12%);
  --orange-alpha-05: hsla(33, 100%, 50%, 0.05);
  --orange-alpha-10: hsla(33, 100%, 50%, 0.1);
  --orange-alpha-20: hsla(33, 100%, 50%, 0.2);
  --orange-alpha-30: hsla(33, 100%, 50%, 0.3);
  --orange-alpha-40: hsla(33, 100%, 50%, 0.4);
  --orange-alpha-50: hsla(33, 100%, 50%, 0.5);
  --orange-alpha-60: hsla(33, 100%, 50%, 0.6);
  --orange-alpha-70: hsla(33, 100%, 50%, 0.7);
  --orange-alpha-80: hsla(33, 100%, 50%, 0.8);
  --orange-alpha-90: hsla(33, 100%, 50%, 0.9);
  --orange: hsla(33, 100%, 50%, 1);
  --orange-light: hsla(37, 100%, 57%, 1);
}

body.light.tritanopia,
body.dark.tritanopia {
  --dark-background: hsl(330, 15%, 7%);
  --accent-10: hsl(0, 75%, 98%);
  --accent-20: hsl(0, 75%, 85%);
  --accent-30: hsl(0, 75%, 75%);
  --accent-40: hsl(0, 75%, 65%); /* accent color - Red */
  --accent-50: hsl(0, 75%, 50%);
  --accent-60: hsl(0, 75%, 40%);
  --accent-70: hsl(0, 75%, 28%);
  --accent-80: hsl(0, 75%, 18%);
  --accent-90: hsl(0, 75%, 11%);
  --pink-50: hsl(330, 76%, 49%);
  --pink-60: hsl(330, 77%, 39%);
  --error-10: hsl(353, 78%, 98%);
  --error-20: hsl(353, 78%, 85%);
  --error-30: hsl(353, 78%, 75%);
  --error-40: hsl(353, 78%, 65%);
  --error-50: hsl(353, 78%, 50%); /* Red - the red-green axis is intact for tritanopia */
  --error-60: hsl(353, 78%, 40%);
  --error-70: hsl(353, 78%, 28%);
  --error-80: hsl(353, 78%, 18%);
  --error-90: hsl(353, 78%, 11%);
  --warning-10: hsl(31, 95%, 98%);
  --warning-20: hsl(31, 95%, 85%);
  --warning-30: hsl(31, 95%, 75%);
  --warning-40: hsl(31, 95%, 65%);
  --warning-50: hsl(31, 95%, 50%); /* Orange - not yellow, which drifts toward pink here */
  --warning-60: hsl(31, 95%, 40%);
  --warning-70: hsl(31, 95%, 28%);
  --warning-80: hsl(31, 95%, 18%);
  --warning-90: hsl(31, 95%, 11%);
  --success-10: hsl(133, 60%, 98%);
  --success-20: hsl(133, 60%, 85%);
  --success-30: hsl(133, 60%, 75%);
  --success-40: hsl(133, 60%, 65%);
  --success-50: hsl(133, 60%, 45%); /* Green - the red-green axis is intact for tritanopia */
  --success-60: hsl(133, 60%, 35%);
  --success-70: hsl(133, 60%, 25%);
  --success-80: hsl(133, 60%, 18%);
  --success-90: hsl(133, 60%, 11%);
  --primary-50: hsl(330, 70%, 50%); /* Secondary Brand Color - Magenta */
  --primary-90: hsl(330, 70%, 11%); /* Primary Color */
  --primary-trans: hsl(330, 70%, 50%, 0.07);
  --primary-trans-2: hsl(330, 70%, 50%, 0.15);
  /* Magenta - replaces blue */
  --tag-blue-50: hsl(320, 85%, 72%);
  --tag-blue-90: hsl(320, 75%, 15%);
  /* Green - safe */
  --tag-green-50: hsl(140, 75%, 55%);
  --tag-green-90: hsl(140, 70%, 12%);
  /* Red - replaces purple */
  --tag-purple-50: hsl(10, 85%, 68%);
  --tag-purple-90: hsl(10, 75%, 15%);
  /* Cyan - replaces yellow */
  --tag-yellow-50: hsl(190, 85%, 65%);
  --tag-yellow-90: hsl(190, 75%, 12%);
  /* Teal/Cyan - safe */
  --tag-teal-50: hsl(185, 80%, 65%);
  --tag-teal-90: hsl(185, 70%, 12%);
  /* Gray */
  --tag-gray-50: hsl(0, 0%, 75%);
  --tag-gray-90: hsl(0, 0%, 15%);
  /* Extended Set */
  /* Pink/Magenta - replaces dark blue */
  --tag-dark-blue-50: hsl(340, 80%, 70%);
  --tag-dark-blue-90: hsl(340, 70%, 12%);
  /* Coral/Red - safe */
  --tag-pink-50: hsl(5, 85%, 68%);
  --tag-pink-90: hsl(5, 75%, 12%);
  /* Light Red - replaces coral */
  --tag-coral-50: hsl(15, 80%, 65%);
  --tag-coral-90: hsl(15, 70%, 12%);
  /* Bright Green - replaces light green */
  --tag-light-green-50: hsl(150, 80%, 60%);
  --tag-light-green-90: hsl(150, 70%, 12%);
  /* Dark Magenta - replaces indigo */
  --tag-indigo-50: hsl(310, 75%, 70%);
  --tag-indigo-90: hsl(310, 65%, 12%);
  /* Aqua - replaces brown */
  --tag-brown-50: hsl(180, 80%, 65%);
  --tag-brown-90: hsl(180, 70%, 12%);
}

body.light.protanopia,
body.light.deuteranopia,
body.light.tritanopia,
body.light.achromatopsia {
  --light-surface: hsl(0, 0%, 98%);
}

body.dark.protanopia,
body.dark.deuteranopia,
body.dark.tritanopia,
body.dark.achromatopsia {
  --dark-surface: hsl(60, 2%, 10%);
}

body.light.achromatopsia,
body.dark.achromatopsia {
  --white: hsl(0, 0%, 100%);
  --dark-background: hsl(0, 0%, 7%);
  --neutral-10: hsl(0, 0%, 98%);
  --neutral-20: hsl(0, 0%, 90%);
  --neutral-30: hsl(0, 0%, 80%);
  --neutral-40: hsl(0, 0%, 70%);
  --neutral-50: hsl(0, 0%, 50%);
  --neutral-60: hsl(0, 0%, 35%);
  --neutral-70: hsl(0, 0%, 25%);
  --neutral-80: hsl(0, 0%, 15%);
  --neutral-90: hsl(0, 0%, 8%);
  --primary-10: hsl(0, 0%, 98%);
  --primary-20: hsl(0, 0%, 90%);
  --primary-30: hsl(0, 0%, 80%);
  --primary-40: hsl(0, 0%, 70%);
  --primary-50: hsl(0, 0%, 50%);
  --primary-60: hsl(0, 0%, 35%);
  --primary-70: hsl(0, 0%, 25%);
  --primary-80: hsl(0, 0%, 15%);
  --primary-90: hsl(0, 0%, 8%);
  --primary-trans: hsl(0, 0%, 50%, 0.07);
  --primary-trans-2: hsl(0, 0%, 50%, 0.15);
  --accent-10: hsl(0, 0%, 98%);
  --accent-20: hsl(0, 0%, 88%);
  --accent-30: hsl(0, 0%, 78%);
  --accent-40: hsl(0, 0%, 68%);
  --accent-50: hsl(0, 0%, 55%);
  --accent-60: hsl(0, 0%, 42%);
  --accent-70: hsl(0, 0%, 30%);
  --accent-80: hsl(0, 0%, 20%);
  --accent-90: hsl(0, 0%, 10%);
  --accent-2-10: hsl(0, 0%, 98%);
  --accent-2-20: hsl(0, 0%, 87%);
  --accent-2-30: hsl(0, 0%, 77%);
  --accent-2-40: hsl(0, 0%, 67%);
  --accent-2-50: hsl(0, 0%, 52%);
  --accent-2-60: hsl(0, 0%, 38%);
  --accent-2-70: hsl(0, 0%, 27%);
  --accent-2-80: hsl(0, 0%, 17%);
  --accent-2-90: hsl(0, 0%, 9%);
  --pink-50: hsl(0, 0%, 60%);
  --pink-60: hsl(0, 0%, 45%);
  --info-10: hsl(0, 0%, 98%);
  --info-20: hsl(0, 0%, 88%);
  --info-30: hsl(0, 0%, 73%);
  --info-40: hsl(0, 0%, 58%);
  --info-50: hsl(0, 0%, 35%); /* Medium-dark for distinction */
  --info-60: hsl(0, 0%, 28%);
  --info-70: hsl(0, 0%, 22%);
  --info-80: hsl(0, 0%, 15%);
  --info-90: hsl(0, 0%, 8%);
  --error-10: hsl(0, 0%, 98%);
  --error-20: hsl(0, 0%, 93%);
  --error-30: hsl(0, 0%, 90%);
  --error-40: hsl(0, 0%, 88%);
  --error-50: hsl(0, 0%, 85%); /* Very light - highest contrast */
  --error-60: hsl(0, 0%, 75%);
  --error-70: hsl(0, 0%, 60%);
  --error-80: hsl(0, 0%, 45%);
  --error-90: hsl(0, 0%, 30%);
  --warning-10: hsl(0, 0%, 98%);
  --warning-20: hsl(0, 0%, 90%);
  --warning-30: hsl(0, 0%, 82%);
  --warning-40: hsl(0, 0%, 76%);
  --warning-50: hsl(0, 0%, 70%); /* Light-medium for distinction */
  --warning-60: hsl(0, 0%, 58%);
  --warning-70: hsl(0, 0%, 45%);
  --warning-80: hsl(0, 0%, 32%);
  --warning-90: hsl(0, 0%, 20%);
  --success-10: hsl(0, 0%, 98%);
  --success-20: hsl(0, 0%, 88%);
  --success-30: hsl(0, 0%, 75%);
  --success-40: hsl(0, 0%, 62%);
  --success-50: hsl(0, 0%, 50%); /* Medium for distinction */
  --success-60: hsl(0, 0%, 40%);
  --success-70: hsl(0, 0%, 30%);
  --success-80: hsl(0, 0%, 20%);
  --success-90: hsl(0, 0%, 12%);
  --purple-10: hsl(0, 0%, 98%);
  --purple-20: hsl(0, 0%, 88%);
  --purple-30: hsl(0, 0%, 76%);
  --purple-40: hsl(0, 0%, 64%);
  --purple-50: hsl(0, 0%, 48%);
  --purple-60: hsl(0, 0%, 36%);
  --purple-70: hsl(0, 0%, 26%);
  --purple-80: hsl(0, 0%, 16%);
  --purple-90: hsl(0, 0%, 10%);
  /* Grayscale tags with distinct lightness values */
  /* Very Light */
  --tag-blue-50: hsl(0, 0%, 85%);
  --tag-blue-90: hsl(0, 0%, 15%);
  /* Light-Medium */
  --tag-green-50: hsl(0, 0%, 75%);
  --tag-green-90: hsl(0, 0%, 20%);
  /* Medium */
  --tag-purple-50: hsl(0, 0%, 60%);
  --tag-purple-90: hsl(0, 0%, 25%);
  /* Medium-Dark */
  --tag-yellow-50: hsl(0, 0%, 45%);
  --tag-yellow-90: hsl(0, 0%, 75%);
  /* Light */
  --tag-teal-50: hsl(0, 0%, 80%);
  --tag-teal-90: hsl(0, 0%, 18%);
  /* Gray */
  --tag-gray-50: hsl(0, 0%, 65%);
  --tag-gray-90: hsl(0, 0%, 22%);
  /* Extended Set - Additional lightness variations */
  /* Bright */
  --tag-dark-blue-50: hsl(0, 0%, 88%);
  --tag-dark-blue-90: hsl(0, 0%, 12%);
  /* Light-Medium 2 */
  --tag-pink-50: hsl(0, 0%, 72%);
  --tag-pink-90: hsl(0, 0%, 23%);
  /* Medium 2 */
  --tag-coral-50: hsl(0, 0%, 55%);
  --tag-coral-90: hsl(0, 0%, 28%);
  /* Medium-Light */
  --tag-light-green-50: hsl(0, 0%, 78%);
  --tag-light-green-90: hsl(0, 0%, 19%);
  /* Medium-Dark 2 */
  --tag-indigo-50: hsl(0, 0%, 42%);
  --tag-indigo-90: hsl(0, 0%, 78%);
  /* Dark */
  --tag-brown-50: hsl(0, 0%, 35%);
  --tag-brown-90: hsl(0, 0%, 82%);
}

/* 1. Define the colors for both modes */
body.light {
  /* Default (Light Mode) - Dark Grey thumb on transparent track */
  --sb-thumb: rgba(0, 0, 0, 0.2);
  --sb-track: transparent;
}

body.dark {
  /* Dark Mode - White thumb on transparent track */
  --sb-thumb: rgba(255, 255, 255, 0.2);
  --sb-track: transparent;
}

/* 2. The Standard Way (Firefox) using the variables */
html {
  scrollbar-color: var(--sb-thumb) var(--sb-track);
  scrollbar-width: thin;
}

/* 3. The Webkit Way (Chrome, Edge, Safari) using the variables */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--sb-track);
}

::-webkit-scrollbar-thumb {
  background-color: var(--sb-thumb);
  border-radius: 100vw;
  border: 2px solid transparent;
  background-clip: content-box;
}

/* Hover effects (optional) */
::-webkit-scrollbar-thumb:hover {
  /* Make it slightly more opaque on hover */
  background-color: color-mix(in srgb, var(--sb-thumb), black 20%);
}

:root,
body.light {
  background-color: var(--white);
  color: var(--black-alpha-80);
  --dropdown-surface: var(--white);
  --text: var(--black);
  --brand-primary-deep: var(--primary-90);
  --brand-primary: var(--primary-50);
  --brand-accent: var(--accent-50);
  --brand-accent-strong: var(--accent-60);
  --brand-accent-hover: var(--accent-70);
  --brand-accent-2: var(--accent-2-50);
  --on-accent: var(--white);
  --brand-pink: var(--pink-60);
  --border-dark-only-accent: transparent;
  --error-border-dark-only: transparent;
  --surface-bright: var(--white);
  --surface-panel: var(--white);
  --surface-flat: var(--neutral-10);
  --border-default: var(--neutral-20);
  --border-strong: var(--neutral-30);
  --text-muted-flat: var(--neutral-50);
  --surface-raised: var(--neutral-10);
  --surface: var(--neutral-10);
  --surface-raised-alt: var(--neutral-15);
  --surface-sunken: var(--neutral-15);
  --surface-inverse: var(--neutral-10);
  --surface-inset: var(--neutral-10);
  --border-on-surface: var(--neutral-20);
  --border-focus-brand: var(--neutral-20);
  --border-focus-accent: var(--neutral-20);
  --error-subtle-neutral: var(--neutral-20);
  --warning-subtle-neutral: var(--neutral-20);
  --success-subtle-neutral: var(--neutral-20);
  --success-subtle-neutral-deep: var(--neutral-20);
  --text-muted-soft: var(--neutral-60);
  --text-muted-mixed: var(--neutral-60);
  --text-muted-invert: var(--neutral-60);
  --text-muted-strong: var(--neutral-70);
  --text-muted: var(--neutral-70);
  --text-muted-hold: var(--neutral-70);
  --text-muted-on-surface: var(--neutral-70);
  --text-muted-on-fill: var(--neutral-70);
  --text-strong: var(--neutral-80);
  --text-strong-hold: var(--neutral-80);
  --text-strongest: var(--neutral-90);
  --brand-primary-hover: var(--primary-70);
  --brand-primary-translucent: var(--primary-trans);
  --brand-hover: var(--primary-50);
  --brand-active: var(--primary-50);
  --accent-brand-hover: var(--primary-50);
  --accent: var(--primary-50);
  --brand-on-fill: var(--primary-50);
  --brand-strong: var(--primary-70);
  --brand-strongest: var(--primary-80);
  --brand-on-fill-strong: var(--primary-90);
  --accent-subtle-on-surface: var(--accent-10);
  --accent-subtle: var(--accent-10);
  --accent-hover: var(--accent-50);
  --accent-active: var(--accent-50);
  --accent-on-fill: var(--accent-50);
  --accent-strong: var(--accent-70);
  --info-fg-pale: var(--info-10);
  --info-fg: var(--info-50);
  --info-subtle-on-surface: var(--info-20);
  --info-subtle-strong: var(--info-20);
  --info-border: var(--info-70);
  --info-subtle: var(--info-10);
  --info-on-fill: var(--info-70);
  --info-border-strong: var(--info-80);
  --info-fg-deep: var(--info-80);
  --warning-fg-pale: var(--warning-10);
  --warning-fg-soft: var(--warning-20);
  --warning-fg-light: var(--warning-30);
  --warning-fg: var(--warning-50);
  --warning-fg-deep: var(--warning-70);
  --warning-fg-dark-only: transparent;
  --warning-subtle-on-surface: var(--warning-10);
  --warning-subtle: var(--warning-10);
  --warning-subtle-strong-on-surface: var(--warning-20);
  --warning-subtle-strong: var(--warning-20);
  --warning-border-soft: var(--warning-50);
  --warning-border-mid: var(--warning-60);
  --warning-border: var(--warning-70);
  --warning-on-fill: var(--warning-70);
  --warning-border-strong: var(--warning-80);
  --warning-on-fill-strong: var(--warning-80);
  --error-fg: var(--error-50);
  --error-fg-strong: var(--error-60);
  --error-fg-deep: var(--error-70);
  --error-fg-deeper: var(--error-80);
  --error-fg-deepest: var(--error-90);
  --error-subtle: var(--error-10);
  --error-subtle-on-surface: var(--error-20);
  --error-subtle-strong: var(--error-20);
  --error-border-soft: var(--error-50);
  --error-border-invert: var(--error-50);
  --error-border-on-fill: var(--error-50);
  --error-border: var(--error-60);
  --error-text-on-fill: var(--error-60);
  --error-border-strong: var(--error-70);
  --error-border-active: var(--error-70);
  --error-on-fill: var(--error-70);
  --success-fg-dark-only: transparent;
  --success-fg-light: var(--success-40);
  --success-fg: var(--success-50);
  --success-fg-strong: var(--success-60);
  --success-fg-deep: var(--success-70);
  --success-subtle: var(--success-10);
  --success-subtle-on-surface: var(--success-20);
  --success-subtle-strong: var(--success-20);
  --success-border-soft: var(--success-60);
  --success-border-mid: var(--success-70);
  --success-border: var(--success-70);
  --success-on-fill: var(--success-70);
  --success-border-strong: var(--success-80);
  --success-on-fill-strong: var(--success-80);
  --purple-fg: var(--purple-50);
  --purple-subtle: var(--purple-10);
  --purple-subtle-on-surface: var(--purple-20);
  --purple-subtle-strong: var(--purple-20);
  --purple-text-on-fill: var(--purple-60);
  --purple-border: var(--purple-60);
  --purple-border-strong: var(--purple-70);
  --purple-border-active: var(--purple-70);
  --purple-on-fill: var(--purple-70);
  --tag-blue-bg: var(--tag-blue-50);
  --tag-blue-fg: var(--tag-blue-90);
  --tag-green-bg: var(--tag-green-50);
  --tag-green-fg: var(--tag-green-90);
  --tag-purple-bg: var(--tag-purple-50);
  --tag-purple-fg: var(--tag-purple-90);
  --tag-yellow-bg: var(--tag-yellow-50);
  --tag-yellow-fg: var(--tag-yellow-90);
  --tag-teal-bg: var(--tag-teal-50);
  --tag-teal-fg: var(--tag-teal-90);
  --tag-gray-bg: var(--tag-gray-50);
  --tag-gray-fg: var(--tag-gray-90);
  --tag-dark-blue-bg: var(--tag-dark-blue-50);
  --tag-dark-blue-fg: var(--tag-dark-blue-90);
  --tag-pink-bg: var(--tag-pink-50);
  --tag-pink-fg: var(--tag-pink-90);
  --tag-coral-bg: var(--tag-coral-50);
  --tag-coral-fg: var(--tag-coral-90);
  --tag-light-green-bg: var(--tag-light-green-50);
  --tag-light-green-fg: var(--tag-light-green-90);
  --tag-indigo-bg: var(--tag-indigo-50);
  --tag-indigo-fg: var(--tag-indigo-90);
  --tag-brown-bg: var(--tag-brown-50);
  --tag-brown-fg: var(--tag-brown-90);
  --lt-black-dk-white: var(--text);
  --lt-dk-primary-90: var(--brand-primary-deep);
  --lt-dk-primary-50: var(--brand-primary);
  --lt-dk-accent-50: var(--brand-accent);
  --lt-dk-accent-60: var(--brand-accent-strong);
  --lt-dk-accent-70: var(--brand-accent-hover);
  --lt-dk-accent-2-50: var(--brand-accent-2);
  --lt-dk-white: var(--on-accent);
  --lt-pink-60-dk-pink-50: var(--brand-pink);
  --lt-transparent-dk-accent-60: var(--border-dark-only-accent);
  --lt-transparent-dk-error-60: var(--error-border-dark-only);
  --lt-white-dk-primary-10: var(--surface-bright);
  --lt-white-dk-primary-90: var(--surface-panel);
  --lt-dk-neutral-10: var(--surface-flat);
  --lt-dk-neutral-20: var(--border-default);
  --lt-dk-neutral-30: var(--border-strong);
  --lt-dk-neutral-50: var(--text-muted-flat);
  --lt-neutral-10-dk-primary-80: var(--surface-raised);
  --lt-neutral-10-dk-primary-90: var(--surface);
  --lt-neutral-15-dk-primary-80: var(--surface-raised-alt);
  --lt-neutral-15-dk-primary-90: var(--surface-sunken);
  --lt-neutral-10-dk-neutral-90: var(--surface-inverse);
  --lt-neutral-10-dk-white: var(--surface-inset);
  --lt-neutral-20-dk-primary-90: var(--border-on-surface);
  --lt-neutral-20-dk-primary-50: var(--border-focus-brand);
  --lt-neutral-20-dk-accent-40: var(--border-focus-accent);
  --lt-neutral-20-dk-error-40: var(--error-subtle-neutral);
  --lt-neutral-20-dk-warning-40: var(--warning-subtle-neutral);
  --lt-neutral-20-dk-success-40: var(--success-subtle-neutral);
  --lt-neutral-20-dk-success-70: var(--success-subtle-neutral-deep);
  --lt-neutral-60-dk-neutral-20: var(--text-muted-soft);
  --lt-neutral-60-dk-neutral-30: var(--text-muted-mixed);
  --lt-neutral-60-dk-white: var(--text-muted-invert);
  --lt-neutral-70-dk-neutral-10: var(--text-muted-strong);
  --lt-neutral-70-dk-neutral-20: var(--text-muted);
  --lt-neutral-70-dk-neutral-50: var(--text-muted-hold);
  --lt-neutral-70-dk-primary-90: var(--text-muted-on-surface);
  --lt-neutral-70-dk-white: var(--text-muted-on-fill);
  --lt-neutral-80-dk-white: var(--text-strong);
  --lt-neutral-80-dk-neutral-70: var(--text-strong-hold);
  --lt-neutral-90-dk-white: var(--text-strongest);
  --lt-dk-primary-70: var(--brand-primary-hover);
  --lt-primary-trans-dk-primary-trans-2: var(--brand-primary-translucent);
  --lt-primary-50-dk-primary-40: var(--brand-hover);
  --lt-primary-50-dk-primary-70: var(--brand-active);
  --lt-primary-50-dk-accent-40: var(--accent-brand-hover);
  --lt-primary-50-dk-accent-50: var(--accent);
  --lt-primary-50-dk-white: var(--brand-on-fill);
  --lt-primary-70-dk-accent-60: var(--brand-strong);
  --lt-primary-80-dk-primary-50: var(--brand-strongest);
  --lt-primary-90-dk-white: var(--brand-on-fill-strong);
  --lt-accent-10-dk-primary-90: var(--accent-subtle-on-surface);
  --lt-accent-10-dk-accent-90: var(--accent-subtle);
  --lt-accent-50-dk-accent-40: var(--accent-hover);
  --lt-accent-50-dk-accent-60: var(--accent-active);
  --lt-accent-50-dk-white: var(--accent-on-fill);
  --lt-accent-70-dk-accent-60: var(--accent-strong);
  --lt-dk-info-10: var(--info-fg-pale);
  --lt-dk-info-50: var(--info-fg);
  --lt-info-20-dk-primary-90: var(--info-subtle-on-surface);
  --lt-info-20-dk-info-90: var(--info-subtle-strong);
  --lt-info-70-dk-info-40: var(--info-border);
  --lt-info-10-dk-info-80: var(--info-subtle);
  --lt-info-70-dk-white: var(--info-on-fill);
  --lt-info-80-dk-info-60: var(--info-border-strong);
  --lt-info-80-dk-info-70: var(--info-fg-deep);
  --lt-dk-warning-10: var(--warning-fg-pale);
  --lt-dk-warning-20: var(--warning-fg-soft);
  --lt-dk-warning-30: var(--warning-fg-light);
  --lt-dk-warning-50: var(--warning-fg);
  --lt-dk-warning-70: var(--warning-fg-deep);
  --lt-transparent-dk-warning-70: var(--warning-fg-dark-only);
  --lt-warning-10-dk-primary-90: var(--warning-subtle-on-surface);
  --lt-warning-10-dk-warning-90: var(--warning-subtle);
  --lt-warning-20-dk-primary-90: var(--warning-subtle-strong-on-surface);
  --lt-warning-20-dk-warning-90: var(--warning-subtle-strong);
  --lt-warning-50-dk-warning-40: var(--warning-border-soft);
  --lt-warning-60-dk-warning-40: var(--warning-border-mid);
  --lt-warning-70-dk-warning-40: var(--warning-border);
  --lt-warning-70-dk-white: var(--warning-on-fill);
  --lt-warning-80-dk-warning-60: var(--warning-border-strong);
  --lt-warning-80-dk-white: var(--warning-on-fill-strong);
  --lt-dk-error-50: var(--error-fg);
  --lt-dk-error-60: var(--error-fg-strong);
  --lt-dk-error-70: var(--error-fg-deep);
  --lt-dk-error-80: var(--error-fg-deeper);
  --lt-dk-error-90: var(--error-fg-deepest);
  --lt-error-10-dk-error-90: var(--error-subtle);
  --lt-error-20-dk-primary-90: var(--error-subtle-on-surface);
  --lt-error-20-dk-error-90: var(--error-subtle-strong);
  --lt-error-50-dk-error-40: var(--error-border-soft);
  --lt-error-50-dk-error-60: var(--error-border-invert);
  --lt-error-50-dk-white: var(--error-border-on-fill);
  --lt-error-60-dk-error-40: var(--error-border);
  --lt-error-60-dk-white: var(--error-text-on-fill);
  --lt-error-70-dk-error-40: var(--error-border-strong);
  --lt-error-70-dk-error-60: var(--error-border-active);
  --lt-error-70-dk-white: var(--error-on-fill);
  --lt-transparent-dk-success-70: var(--success-fg-dark-only);
  --lt-dk-success-40: var(--success-fg-light);
  --lt-dk-success-50: var(--success-fg);
  --lt-dk-success-60: var(--success-fg-strong);
  --lt-dk-success-70: var(--success-fg-deep);
  --lt-success-10-dk-success-90: var(--success-subtle);
  --lt-success-20-dk-primary-90: var(--success-subtle-on-surface);
  --lt-success-20-dk-success-90: var(--success-subtle-strong);
  --lt-success-60-dk-success-50: var(--success-border-soft);
  --lt-success-70-dk-success-50: var(--success-border-mid);
  --lt-success-70-dk-success-40: var(--success-border);
  --lt-success-70-dk-white: var(--success-on-fill);
  --lt-success-80-dk-success-60: var(--success-border-strong);
  --lt-success-80-dk-white: var(--success-on-fill-strong);
  --lt-dk-purple-50: var(--purple-fg);
  --lt-purple-10-dk-purple-90: var(--purple-subtle);
  --lt-purple-20-dk-primary-90: var(--purple-subtle-on-surface);
  --lt-purple-20-dk-purple-90: var(--purple-subtle-strong);
  --lt-purple-60-dk-white: var(--purple-text-on-fill);
  --lt-purple-60-dk-purple-40: var(--purple-border);
  --lt-purple-70-dk-purple-40: var(--purple-border-strong);
  --lt-purple-70-dk-purple-60: var(--purple-border-active);
  --lt-purple-70-dk-white: var(--purple-on-fill);
  --lt-tag-blue-50-dk-blue-90: var(--tag-blue-bg);
  --lt-tag-blue-90-dk-blue-50: var(--tag-blue-fg);
  --lt-tag-green-50-dk-green-90: var(--tag-green-bg);
  --lt-tag-green-90-dk-green-50: var(--tag-green-fg);
  --lt-tag-purple-50-dk-purple-90: var(--tag-purple-bg);
  --lt-tag-purple-90-dk-purple-50: var(--tag-purple-fg);
  --lt-tag-yellow-50-dk-yellow-90: var(--tag-yellow-bg);
  --lt-tag-yellow-90-dk-yellow-50: var(--tag-yellow-fg);
  --lt-tag-teal-50-dk-teal-90: var(--tag-teal-bg);
  --lt-tag-teal-90-dk-teal-50: var(--tag-teal-fg);
  --lt-tag-gray-50-dk-gray-90: var(--tag-gray-bg);
  --lt-tag-gray-90-dk-gray-50: var(--tag-gray-fg);
  --lt-tag-dark-blue-50-dk-dark-blue-90: var(--tag-dark-blue-bg);
  --lt-tag-dark-blue-90-dk-dark-blue-50: var(--tag-dark-blue-fg);
  --lt-tag-pink-50-dk-pink-90: var(--tag-pink-bg);
  --lt-tag-pink-90-dk-pink-50: var(--tag-pink-fg);
  --lt-tag-coral-50-dk-coral-90: var(--tag-coral-bg);
  --lt-tag-coral-90-dk-coral-50: var(--tag-coral-fg);
  --lt-tag-light-green-50-dk-light-green-90: var(--tag-light-green-bg);
  --lt-tag-light-green-90-dk-light-green-50: var(--tag-light-green-fg);
  --lt-tag-indigo-50-dk-indigo-90: var(--tag-indigo-bg);
  --lt-tag-indigo-90-dk-indigo-50: var(--tag-indigo-fg);
  --lt-tag-brown-50-dk-brown-90: var(--tag-brown-bg);
  --lt-tag-brown-90-dk-brown-50: var(--tag-brown-fg);
  --box-shadow: 0, 0, 0, 0.1;
}
@media only screen and (max-width: 550px) and (pointer: coarse) {
  :root,
  body.light {
    --security-gradient: radial-gradient(
      ellipse farthest-corner at 45px 45px,
      var(--lt-dk-accent-50) 0%,
      var(--lt-dk-primary-50) 15%,
      var(--lt-dk-primary-90) 45%,
      var(--lt-dk-primary-90) 65%,
      var(--lt-dk-primary-50) 85%,
      var(--lt-dk-primary-50) 100%
    );
  }
}
:root,
body.light {
  --security-gradient: radial-gradient(
    ellipse farthest-corner at 45px 45px,
    var(--lt-dk-accent-50) 0%,
    var(--lt-dk-primary-50) 15%,
    var(--lt-dk-primary-90) 45%,
    var(--lt-dk-primary-90) 65%,
    var(--lt-dk-primary-50) 85%,
    var(--lt-dk-accent-2-50) 100%
  );
}
@media (pointer: coarse) {
  :root,
  body.light {
    --background-gradient: radial-gradient(
      ellipse farthest-corner at 45px 45px,
      #ffffff 0%,
      #ffffff 100%
    );
  }
}
:root,
body.light {
  --background-gradient: radial-gradient(
    ellipse farthest-corner at 45px 45px,
    #ffffff 0%,
    #ffffff 100%
  );
  --gradient-primary-50-accent-50: linear-gradient(
    90deg,
    var(--primary-50) 0%,
    var(--accent-50) 100%
  );
  --gradient-diag-primary-50-accent-50: linear-gradient(
    350deg,
    var(--primary-50) 0%,
    var(--accent-50) 100%
  );
  --theme-primary-background: var(--lt-primary-50-dk-accent-50);
  --theme-primary-button: var(--lt-dk-primary-50);
  --theme-primary-button-hover: var(--lt-dk-primary-70);
  --theme-primary-button-text: var(--lt-dk-white);
  --theme-primary-button-text-hover: var(--lt-primary-50-dk-white);
  --theme-primary-border: var(--lt-dk-primary-50);
  --theme-primary-border-hover: var(--lt-dk-primary-70);
  --theme-primary-text: var(--lt-primary-50-dk-accent-50);
  --theme-primary-text-hover: var(--lt-primary-50-dk-accent-50);
  --theme-accent-background: var(--lt-dk-accent-50);
  --theme-accent-button: var(--lt-dk-accent-50);
  --theme-accent-button-hover: var(--lt-dk-accent-70);
  --theme-accent-button-text: var(--lt-dk-white);
  --theme-accent-button-text-hover: var(--lt-accent-50-dk-white);
  --theme-accent-border: var(--lt-dk-accent-50);
  --theme-accent-border-hover: var(--lt-dk-accent-70);
  --theme-accent-text: var(--lt-dk-accent-50);
  --theme-accent-text-hover: var(--lt-dk-accent-70);
  /* shadows */
  --shadow-s: inset 0 1px 2px #ffffff30, /* top highlight */ 0 1px 2px #00000030,
    /* dark shadow */ 0 2px 4px #00000015; /* soft shadow */
  --shadow-m: inset 0 1px 2px #ffffff50, /* top highlight */ 0 2px 4px #00000030,
    /* dark shadow */ 0 4px 8px #00000015; /* soft shadow */
  --shadow-l: inset 0 1px 2px #ffffff70, /* top highlight */ 0 4px 6px #00000030,
    /* dark shadow */ 0 6px 10px #00000015; /* soft shadow */
  --color-scheme: var(--orange);
  --color-scheme-05: var(--orange-alpha-05);
  --color-scheme-10: var(--orange-alpha-10);
  --color-scheme-20: var(--orange-alpha-20);
  --color-scheme-30: var(--orange-alpha-30);
  --color-scheme-40: var(--orange-alpha-40);
  --color-scheme-50: var(--orange-alpha-50);
  --color-scheme-60: var(--orange-alpha-60);
  --color-scheme-70: var(--orange-alpha-70);
  --color-scheme-80: var(--orange-alpha-80);
  --color-scheme-90: var(--orange-alpha-90);
}

body.dark {
  color-scheme: dark;
  background-color: var(--black);
  color: var(--white-alpha-90);
  --dropdown-surface: var(--dark-surface);
  --text: var(--white);
  --brand-primary-deep: var(--primary-90);
  --brand-primary: var(--primary-50);
  --brand-accent: var(--accent-50);
  --brand-accent-2: var(--accent-2-50);
  --on-accent: var(--white);
  --brand-pink: var(--pink-50);
  --border-dark-only-accent: var(--accent-60);
  --error-border-dark-only: var(--error-60);
  --surface-bright: var(--primary-10);
  --surface-panel: var(--dark-background);
  --surface-flat: var(--neutral-10);
  --border-default: var(--neutral-20);
  --border-strong: var(--neutral-30);
  --text-muted-flat: var(--neutral-50);
  --surface-raised: var(--primary-80);
  --surface: var(--dark-surface);
  --surface-raised-alt: var(--primary-80);
  --surface-sunken: var(--primary-90);
  --surface-inverse: var(--neutral-90);
  --surface-inset: var(--white);
  --border-on-surface: var(--dark-surface);
  --border-focus-brand: var(--primary-50);
  --border-focus-accent: var(--accent-40);
  --error-subtle-neutral: var(--error-40);
  --warning-subtle-neutral: var(--warning-40);
  --success-subtle-neutral: var(--success-40);
  --success-subtle-neutral-deep: var(--success-70);
  --text-muted-soft: var(--neutral-20);
  --text-muted-mixed: var(--neutral-30);
  --text-muted-invert: var(--white);
  --text-muted-strong: var(--neutral-10);
  --text-muted: var(--neutral-20);
  --text-muted-hold: var(--neutral-50);
  --text-muted-on-surface: var(--primary-90);
  --text-muted-on-fill: var(--white);
  --text-strong: var(--white);
  --text-strong-hold: var(--neutral-70);
  --text-strongest: var(--white);
  --brand-primary-hover: var(--primary-70);
  --brand-primary-translucent: var(--primary-trans-2);
  --brand-hover: var(--primary-40);
  --brand-active: var(--primary-70);
  --accent-brand-hover: var(--accent-40);
  --accent: var(--accent-50);
  --brand-on-fill: var(--white);
  --brand-strong: var(--accent-60);
  --brand-strongest: var(--primary-50);
  --brand-on-fill-strong: var(--white);
  --accent-subtle-on-surface: var(--primary-90);
  --accent-subtle: var(--accent-90);
  --accent-hover: var(--accent-40);
  --accent-active: var(--accent-60);
  --accent-on-fill: var(--white);
  --accent-strong: var(--accent-60);
  --info-fg-pale: var(--info-10);
  --info-fg: var(--info-50);
  --info-subtle-on-surface: var(--primary-90);
  --info-subtle-strong: var(--info-90);
  --info-border: var(--info-40);
  --info-subtle: var(--info-80);
  --info-on-fill: var(--white);
  --info-border-strong: var(--info-60);
  --info-fg-deep: var(--info-70);
  --warning-fg-pale: var(--warning-10);
  --warning-fg-soft: var(--warning-20);
  --warning-fg-light: var(--warning-30);
  --warning-fg: var(--warning-50);
  --warning-fg-deep: var(--warning-70);
  --warning-fg-dark-only: var(--warning-70);
  --warning-subtle-on-surface: var(--primary-90);
  --warning-subtle: var(--warning-90);
  --warning-subtle-strong-on-surface: var(--primary-90);
  --warning-subtle-strong: var(--warning-90);
  --warning-border-soft: var(--warning-40);
  --warning-border-mid: var(--warning-40);
  --warning-border: var(--warning-40);
  --warning-on-fill: var(--white);
  --warning-border-strong: var(--warning-60);
  --warning-on-fill-strong: var(--white);
  --error-fg: var(--error-50);
  --error-fg-strong: var(--error-60);
  --error-fg-deep: var(--error-70);
  --error-fg-deeper: var(--error-80);
  --error-subtle: var(--error-90);
  --error-subtle-on-surface: var(--primary-90);
  --error-subtle-strong: var(--error-90);
  --error-border-soft: var(--error-40);
  --error-border-invert: var(--error-60);
  --error-border-on-fill: var(--white);
  --error-border: var(--error-40);
  --error-text-on-fill: var(--white);
  --error-border-strong: var(--error-40);
  --error-border-active: var(--error-60);
  --error-on-fill: var(--white);
  --success-fg-dark-only: var(--success-70);
  --success-fg-light: var(--success-40);
  --success-fg: var(--success-50);
  --success-fg-strong: var(--success-60);
  --success-fg-deep: var(--success-70);
  --success-subtle: var(--success-90);
  --success-subtle-on-surface: var(--primary-90);
  --success-subtle-strong: var(--success-90);
  --success-border-soft: var(--success-50);
  --success-border-mid: var(--success-50);
  --success-border: var(--success-40);
  --success-on-fill: var(--white);
  --success-border-strong: var(--success-60);
  --success-on-fill-strong: var(--white);
  --purple-fg: var(--purple-50);
  --purple-subtle: var(--purple-90);
  --purple-subtle-on-surface: var(--primary-90);
  --purple-subtle-strong: var(--purple-90);
  --purple-text-on-fill: var(--white);
  --purple-border: var(--purple-40);
  --purple-border-strong: var(--purple-40);
  --purple-border-active: var(--purple-60);
  --purple-on-fill: var(--white);
  --tag-blue-bg: var(--tag-blue-90);
  --tag-blue-fg: var(--tag-blue-50);
  --tag-green-bg: var(--tag-green-90);
  --tag-green-fg: var(--tag-green-50);
  --tag-purple-bg: var(--tag-purple-90);
  --tag-purple-fg: var(--tag-purple-50);
  --tag-yellow-bg: var(--tag-yellow-90);
  --tag-yellow-fg: var(--tag-yellow-50);
  --tag-teal-bg: var(--tag-teal-90);
  --tag-teal-fg: var(--tag-teal-50);
  --tag-gray-bg: var(--tag-gray-90);
  --tag-gray-fg: var(--tag-gray-50);
  --tag-dark-blue-bg: var(--tag-dark-blue-90);
  --tag-dark-blue-fg: var(--tag-dark-blue-50);
  --tag-pink-bg: var(--tag-pink-90);
  --tag-pink-fg: var(--tag-pink-50);
  --tag-coral-bg: var(--tag-coral-90);
  --tag-coral-fg: var(--tag-coral-50);
  --tag-light-green-bg: var(--tag-light-green-90);
  --tag-light-green-fg: var(--tag-light-green-50);
  --tag-indigo-bg: var(--tag-indigo-90);
  --tag-indigo-fg: var(--tag-indigo-50);
  --tag-brown-bg: var(--tag-brown-90);
  --tag-brown-fg: var(--tag-brown-50);
  --lt-black-dk-white: var(--text);
  --lt-dk-primary-90: var(--brand-primary-deep);
  --lt-dk-primary-50: var(--brand-primary);
  --lt-dk-accent-50: var(--brand-accent);
  --lt-dk-accent-60: var(--brand-accent-strong);
  --lt-dk-accent-70: var(--brand-accent-hover);
  --lt-dk-accent-2-50: var(--brand-accent-2);
  --lt-dk-white: var(--on-accent);
  --lt-pink-60-dk-pink-50: var(--brand-pink);
  --lt-transparent-dk-accent-60: var(--border-dark-only-accent);
  --lt-transparent-dk-error-60: var(--error-border-dark-only);
  --lt-white-dk-primary-10: var(--surface-bright);
  --lt-white-dk-primary-90: var(--surface-panel);
  --lt-dk-neutral-10: var(--surface-flat);
  --lt-dk-neutral-20: var(--border-default);
  --lt-dk-neutral-30: var(--border-strong);
  --lt-dk-neutral-50: var(--text-muted-flat);
  --lt-neutral-10-dk-primary-80: var(--surface-raised);
  --lt-neutral-10-dk-primary-90: var(--surface);
  --lt-neutral-15-dk-primary-80: var(--surface-raised-alt);
  --lt-neutral-15-dk-primary-90: var(--surface-sunken);
  --lt-neutral-10-dk-neutral-90: var(--surface-inverse);
  --lt-neutral-10-dk-white: var(--surface-inset);
  --lt-neutral-20-dk-primary-90: var(--border-on-surface);
  --lt-neutral-20-dk-primary-50: var(--border-focus-brand);
  --lt-neutral-20-dk-accent-40: var(--border-focus-accent);
  --lt-neutral-20-dk-error-40: var(--error-subtle-neutral);
  --lt-neutral-20-dk-warning-40: var(--warning-subtle-neutral);
  --lt-neutral-20-dk-success-40: var(--success-subtle-neutral);
  --lt-neutral-20-dk-success-70: var(--success-subtle-neutral-deep);
  --lt-neutral-60-dk-neutral-20: var(--text-muted-soft);
  --lt-neutral-60-dk-neutral-30: var(--text-muted-mixed);
  --lt-neutral-60-dk-white: var(--text-muted-invert);
  --lt-neutral-70-dk-neutral-10: var(--text-muted-strong);
  --lt-neutral-70-dk-neutral-20: var(--text-muted);
  --lt-neutral-70-dk-neutral-50: var(--text-muted-hold);
  --lt-neutral-70-dk-primary-90: var(--text-muted-on-surface);
  --lt-neutral-70-dk-white: var(--text-muted-on-fill);
  --lt-neutral-80-dk-white: var(--text-strong);
  --lt-neutral-80-dk-neutral-70: var(--text-strong-hold);
  --lt-neutral-90-dk-white: var(--text-strongest);
  --lt-dk-primary-70: var(--brand-primary-hover);
  --lt-primary-trans-dk-primary-trans-2: var(--brand-primary-translucent);
  --lt-primary-50-dk-primary-40: var(--brand-hover);
  --lt-primary-50-dk-primary-70: var(--brand-active);
  --lt-primary-50-dk-accent-40: var(--accent-brand-hover);
  --lt-primary-50-dk-accent-50: var(--accent);
  --lt-primary-50-dk-white: var(--brand-on-fill);
  --lt-primary-70-dk-accent-60: var(--brand-strong);
  --lt-primary-80-dk-primary-50: var(--brand-strongest);
  --lt-primary-90-dk-white: var(--brand-on-fill-strong);
  --lt-accent-10-dk-primary-90: var(--accent-subtle-on-surface);
  --lt-accent-10-dk-accent-90: var(--accent-subtle);
  --lt-accent-50-dk-accent-40: var(--accent-hover);
  --lt-accent-50-dk-accent-60: var(--accent-active);
  --lt-accent-50-dk-white: var(--accent-on-fill);
  --lt-accent-70-dk-accent-60: var(--accent-strong);
  --lt-dk-info-10: var(--info-fg-pale);
  --lt-dk-info-50: var(--info-fg);
  --lt-info-20-dk-primary-90: var(--info-subtle-on-surface);
  --lt-info-20-dk-info-90: var(--info-subtle-strong);
  --lt-info-70-dk-info-40: var(--info-border);
  --lt-info-10-dk-info-80: var(--info-subtle);
  --lt-info-70-dk-white: var(--info-on-fill);
  --lt-info-80-dk-info-60: var(--info-border-strong);
  --lt-info-80-dk-info-70: var(--info-fg-deep);
  --lt-dk-warning-10: var(--warning-fg-pale);
  --lt-dk-warning-20: var(--warning-fg-soft);
  --lt-dk-warning-30: var(--warning-fg-light);
  --lt-dk-warning-50: var(--warning-fg);
  --lt-dk-warning-70: var(--warning-fg-deep);
  --lt-transparent-dk-warning-70: var(--warning-fg-dark-only);
  --lt-warning-10-dk-primary-90: var(--warning-subtle-on-surface);
  --lt-warning-10-dk-warning-90: var(--warning-subtle);
  --lt-warning-20-dk-primary-90: var(--warning-subtle-strong-on-surface);
  --lt-warning-20-dk-warning-90: var(--warning-subtle-strong);
  --lt-warning-50-dk-warning-40: var(--warning-border-soft);
  --lt-warning-60-dk-warning-40: var(--warning-border-mid);
  --lt-warning-70-dk-warning-40: var(--warning-border);
  --lt-warning-70-dk-white: var(--warning-on-fill);
  --lt-warning-80-dk-warning-60: var(--warning-border-strong);
  --lt-warning-80-dk-white: var(--warning-on-fill-strong);
  --lt-dk-error-50: var(--error-fg);
  --lt-dk-error-60: var(--error-fg-strong);
  --lt-dk-error-70: var(--error-fg-deep);
  --lt-dk-error-80: var(--error-fg-deeper);
  --lt-dk-error-90: var(--error-fg-deepest);
  --lt-error-10-dk-error-90: var(--error-subtle);
  --lt-error-20-dk-primary-90: var(--error-subtle-on-surface);
  --lt-error-20-dk-error-90: var(--error-subtle-strong);
  --lt-error-50-dk-error-40: var(--error-border-soft);
  --lt-error-50-dk-error-60: var(--error-border-invert);
  --lt-error-50-dk-white: var(--error-border-on-fill);
  --lt-error-60-dk-error-40: var(--error-border);
  --lt-error-60-dk-white: var(--error-text-on-fill);
  --lt-error-70-dk-error-40: var(--error-border-strong);
  --lt-error-70-dk-error-60: var(--error-border-active);
  --lt-error-70-dk-white: var(--error-on-fill);
  --lt-transparent-dk-success-70: var(--success-fg-dark-only);
  --lt-dk-success-40: var(--success-fg-light);
  --lt-dk-success-50: var(--success-fg);
  --lt-dk-success-60: var(--success-fg-strong);
  --lt-dk-success-70: var(--success-fg-deep);
  --lt-success-10-dk-success-90: var(--success-subtle);
  --lt-success-20-dk-primary-90: var(--success-subtle-on-surface);
  --lt-success-20-dk-success-90: var(--success-subtle-strong);
  --lt-success-60-dk-success-50: var(--success-border-soft);
  --lt-success-70-dk-success-50: var(--success-border-mid);
  --lt-success-70-dk-success-40: var(--success-border);
  --lt-success-70-dk-white: var(--success-on-fill);
  --lt-success-80-dk-success-60: var(--success-border-strong);
  --lt-success-80-dk-white: var(--success-on-fill-strong);
  --lt-dk-purple-50: var(--purple-fg);
  --lt-purple-10-dk-purple-90: var(--purple-subtle);
  --lt-purple-20-dk-primary-90: var(--purple-subtle-on-surface);
  --lt-purple-20-dk-purple-90: var(--purple-subtle-strong);
  --lt-purple-60-dk-white: var(--purple-text-on-fill);
  --lt-purple-60-dk-purple-40: var(--purple-border);
  --lt-purple-70-dk-purple-40: var(--purple-border-strong);
  --lt-purple-70-dk-purple-60: var(--purple-border-active);
  --lt-purple-70-dk-white: var(--purple-on-fill);
  --lt-tag-blue-50-dk-blue-90: var(--tag-blue-bg);
  --lt-tag-blue-90-dk-blue-50: var(--tag-blue-fg);
  --lt-tag-green-50-dk-green-90: var(--tag-green-bg);
  --lt-tag-green-90-dk-green-50: var(--tag-green-fg);
  --lt-tag-purple-50-dk-purple-90: var(--tag-purple-bg);
  --lt-tag-purple-90-dk-purple-50: var(--tag-purple-fg);
  --lt-tag-yellow-50-dk-yellow-90: var(--tag-yellow-bg);
  --lt-tag-yellow-90-dk-yellow-50: var(--tag-yellow-fg);
  --lt-tag-teal-50-dk-teal-90: var(--tag-teal-bg);
  --lt-tag-teal-90-dk-teal-50: var(--tag-teal-fg);
  --lt-tag-gray-50-dk-gray-90: var(--tag-gray-bg);
  --lt-tag-gray-90-dk-gray-50: var(--tag-gray-fg);
  --lt-tag-dark-blue-50-dk-dark-blue-90: var(--tag-dark-blue-bg);
  --lt-tag-dark-blue-90-dk-dark-blue-50: var(--tag-dark-blue-fg);
  --lt-tag-pink-50-dk-pink-90: var(--tag-pink-bg);
  --lt-tag-pink-90-dk-pink-50: var(--tag-pink-fg);
  --lt-tag-coral-50-dk-coral-90: var(--tag-coral-bg);
  --lt-tag-coral-90-dk-coral-50: var(--tag-coral-fg);
  --lt-tag-light-green-50-dk-light-green-90: var(--tag-light-green-bg);
  --lt-tag-light-green-90-dk-light-green-50: var(--tag-light-green-fg);
  --lt-tag-indigo-50-dk-indigo-90: var(--tag-indigo-bg);
  --lt-tag-indigo-90-dk-indigo-50: var(--tag-indigo-fg);
  --lt-tag-brown-50-dk-brown-90: var(--tag-brown-bg);
  --lt-tag-brown-90-dk-brown-50: var(--tag-brown-fg);
  --box-shadow: 0, 0, 0, 0.6;
  --security-gradient: radial-gradient(
    ellipse farthest-corner at 45px 45px,
    var(--lt-dk-accent-50) 0%,
    var(--lt-dk-primary-50) 15%,
    var(--lt-dk-primary-90) 45%,
    var(--lt-dk-primary-90) 65%,
    var(--lt-dk-primary-50) 85%,
    var(--lt-dk-accent-2-50) 100%
  );
  --background-gradient: radial-gradient(
    ellipse farthest-corner at 45px 45px,
    var(--lt-dk-primary-90) 0%,
    var(--lt-white-dk-primary-90) 45%,
    var(--lt-dk-primary-50) 85%,
    var(--lt-dk-accent-2-50) 100%
  );
  --gradient-primary-50-accent-50: linear-gradient(
    90deg,
    var(--primary-50) 0%,
    var(--accent-50) 100%
  );
  --gradient-diag-primary-50-accent-50: linear-gradient(
    350deg,
    var(--primary-50) 0%,
    var(--accent-50) 100%
  );
  --theme-primary-background: var(--lt-primary-50-dk-accent-50);
  --theme-primary-button: var(--lt-dk-primary-50);
  --theme-primary-button-hover: var(--lt-dk-primary-70);
  --theme-primary-button-text: var(--lt-dk-white);
  --theme-primary-button-text-hover: var(--lt-primary-50-dk-white);
  --theme-primary-border: var(--lt-dk-primary-50);
  --theme-primary-border-hover: var(--lt-dk-primary-70);
  --theme-primary-text: var(--lt-primary-50-dk-accent-50);
  --theme-primary-text-hover: var(--lt-primary-50-dk-accent-50);
  --theme-accent-background: var(--lt-dk-accent-50);
  --theme-accent-button: var(--lt-dk-accent-50);
  --theme-accent-button-hover: var(--lt-dk-accent-70);
  --theme-accent-button-text: var(--lt-dk-white);
  --theme-accent-button-text-hover: var(--lt-accent-50-dk-white);
  --theme-accent-border: var(--lt-dk-accent-50);
  --theme-accent-border-hover: var(--lt-dk-accent-70);
  --theme-accent-text: var(--lt-dk-accent-50);
  --theme-accent-text-hover: var(--lt-dk-accent-70);
  /* shadows */
  --shadow-s: inset 0 1px 2px #ffffff30, /* top highlight */ 0 1px 2px #00000030,
    /* dark shadow */ 0 2px 4px #00000015; /* soft shadow */
  --shadow-m: inset 0 1px 2px #ffffff50, /* top highlight */ 0 2px 4px #00000030,
    /* dark shadow */ 0 4px 8px #00000015; /* soft shadow */
  --shadow-l: inset 0 1px 2px #ffffff70, /* top highlight */ 0 4px 6px #00000030,
    /* dark shadow */ 0 6px 10px #00000015; /* soft shadow */
  --color-scheme: var(--orange);
  --color-scheme-05: var(--orange-alpha-05);
  --color-scheme-10: var(--orange-alpha-10);
  --color-scheme-20: var(--orange-alpha-20);
  --color-scheme-30: var(--orange-alpha-30);
  --color-scheme-40: var(--orange-alpha-40);
  --color-scheme-50: var(--orange-alpha-50);
  --color-scheme-60: var(--orange-alpha-60);
  --color-scheme-70: var(--orange-alpha-70);
  --color-scheme-80: var(--orange-alpha-80);
  --color-scheme-90: var(--orange-alpha-90);
  --color-scheme-light: var(--orange-light);
}

body.light.standard {
  --background-gradient: radial-gradient(
    ellipse farthest-corner at 45px 45px,
    var(--standard-dark-blue) 0%,
    var(--standard-dark-blue) 100%
  );
}

body.dark.standard {
  --background-gradient: radial-gradient(
    ellipse farthest-corner at 45px 45px,
    var(--standard-dark-blue) 0%,
    var(--standard-dark-blue) 100%
  );
}

body.light.standard,
body.dark.standard {
  --color-scheme: var(--teal);
  --color-scheme-05: var(--teal-alpha-05);
  --color-scheme-10: var(--teal-alpha-10);
  --color-scheme-20: var(--teal-alpha-20);
  --color-scheme-30: var(--teal-alpha-30);
  --color-scheme-40: var(--teal-alpha-40);
  --color-scheme-50: var(--teal-alpha-50);
  --color-scheme-60: var(--teal-alpha-60);
  --color-scheme-70: var(--teal-alpha-70);
  --color-scheme-80: var(--teal-alpha-80);
  --color-scheme-90: var(--teal-alpha-90);
  --color-scheme-light: var(--teal-light);
}

:root,
body.light {
  --status-error-fill: hsl(0, 70%, 94%);
  --status-error-text: hsl(0, 97%, 32%);
  --status-error-mark: hsl(0, 97%, 50%);
  --status-warning-fill: hsl(45, 70%, 94%);
  --status-warning-text: hsl(45, 97%, 32%);
  --status-warning-mark: hsl(45, 97%, 50%);
  --status-success-fill: hsl(152, 70%, 94%);
  --status-success-text: hsl(152, 90%, 30%);
  --status-success-mark: hsl(152, 90%, 45%);
  --status-info-fill: hsl(200, 70%, 94%);
  --status-info-text: hsl(200, 95%, 32%);
  --status-info-mark: hsl(200, 95%, 45%);
}

body.dark {
  --status-error-fill: hsl(0, 60%, 18%);
  --status-error-text: hsl(0, 97%, 66%);
  --status-error-mark: hsl(0, 97%, 50%);
  --status-warning-fill: hsl(45, 60%, 18%);
  --status-warning-text: hsl(45, 97%, 66%);
  --status-warning-mark: hsl(45, 97%, 50%);
  --status-success-fill: hsl(152, 60%, 18%);
  --status-success-text: hsl(152, 90%, 66%);
  --status-success-mark: hsl(152, 90%, 45%);
  --status-info-fill: hsl(200, 60%, 18%);
  --status-info-text: hsl(200, 95%, 66%);
  --status-info-mark: hsl(200, 95%, 45%);
}

body.light.protanopia {
  --status-error-fill: hsl(22, 70%, 94%);
  --status-error-text: hsl(22, 90%, 38%);
  --status-error-mark: hsl(22, 90%, 49%);
  --status-warning-fill: hsl(46, 70%, 94%);
  --status-warning-text: hsl(46, 95%, 28%);
  --status-warning-mark: hsl(46, 95%, 35%);
  --status-success-fill: hsl(173, 70%, 94%);
  --status-success-text: hsl(173, 72%, 28%);
  --status-success-mark: hsl(173, 72%, 36%);
  --status-info-fill: hsl(205, 70%, 94%);
  --status-info-text: hsl(205, 82%, 38%);
  --status-info-mark: hsl(205, 82%, 50%);
  --purple-cvd-fill: hsl(285, 70%, 94%);
  --purple-cvd-text: hsl(285, 70%, 38%);
  --purple-cvd-mark: hsl(285, 70%, 50%);
  --light-surface: hsl(210, 40%, 96%);
}

body.dark.protanopia {
  --status-error-fill: hsl(22, 60%, 18%);
  --status-error-text: hsl(22, 90%, 66%);
  --status-error-mark: hsl(22, 90%, 49%);
  --status-warning-fill: hsl(46, 60%, 18%);
  --status-warning-text: hsl(46, 95%, 66%);
  --status-warning-mark: hsl(46, 95%, 35%);
  --status-success-fill: hsl(173, 60%, 18%);
  --status-success-text: hsl(173, 72%, 66%);
  --status-success-mark: hsl(173, 72%, 36%);
  --status-info-fill: hsl(205, 60%, 18%);
  --status-info-text: hsl(205, 82%, 66%);
  --status-info-mark: hsl(205, 82%, 50%);
  --purple-cvd-fill: hsl(285, 60%, 18%);
  --purple-cvd-text: hsl(285, 70%, 66%);
  --purple-cvd-mark: hsl(285, 70%, 50%);
  --dark-background: hsl(215, 40%, 7%);
  --dark-surface: hsl(215, 40%, 11%);
}

body.light.deuteranopia {
  --status-error-fill: hsl(16, 70%, 94%);
  --status-error-text: hsl(16, 85%, 38%);
  --status-error-mark: hsl(16, 85%, 55%);
  --status-warning-fill: hsl(45, 70%, 94%);
  --status-warning-text: hsl(45, 95%, 28%);
  --status-warning-mark: hsl(45, 95%, 35%);
  --status-success-fill: hsl(172, 70%, 94%);
  --status-success-text: hsl(172, 78%, 27%);
  --status-success-mark: hsl(172, 78%, 34%);
  --status-info-fill: hsl(213, 70%, 94%);
  --status-info-text: hsl(213, 74%, 38%);
  --status-info-mark: hsl(213, 74%, 55%);
  --purple-cvd-fill: hsl(285, 68%, 94%);
  --purple-cvd-text: hsl(285, 68%, 38%);
  --purple-cvd-mark: hsl(285, 68%, 50%);
  --light-surface: hsl(300, 24%, 96%);
}

body.dark.deuteranopia {
  --status-error-fill: hsl(16, 60%, 18%);
  --status-error-text: hsl(16, 85%, 66%);
  --status-error-mark: hsl(16, 85%, 55%);
  --status-warning-fill: hsl(45, 60%, 18%);
  --status-warning-text: hsl(45, 95%, 66%);
  --status-warning-mark: hsl(45, 95%, 35%);
  --status-success-fill: hsl(172, 60%, 18%);
  --status-success-text: hsl(172, 78%, 66%);
  --status-success-mark: hsl(172, 78%, 34%);
  --status-info-fill: hsl(213, 60%, 18%);
  --status-info-text: hsl(213, 74%, 66%);
  --status-info-mark: hsl(213, 74%, 55%);
  --purple-cvd-fill: hsl(285, 60%, 18%);
  --purple-cvd-text: hsl(285, 68%, 66%);
  --purple-cvd-mark: hsl(285, 68%, 50%);
  --dark-background: hsl(295, 30%, 7%);
  --dark-surface: hsl(295, 30%, 11%);
}

body.light.tritanopia {
  --status-error-fill: hsl(353, 70%, 94%);
  --status-error-text: hsl(353, 78%, 38%);
  --status-error-mark: hsl(353, 78%, 55%);
  --status-warning-fill: hsl(31, 70%, 94%);
  --status-warning-text: hsl(31, 95%, 34%);
  --status-warning-mark: hsl(31, 95%, 43%);
  --status-success-fill: hsl(133, 60%, 94%);
  --status-success-text: hsl(133, 60%, 31%);
  --status-success-mark: hsl(133, 60%, 39%);
  --status-info-fill: hsl(184, 45%, 94%);
  --status-info-text: hsl(184, 45%, 34%);
  --status-info-mark: hsl(184, 45%, 43%);
  --purple-cvd-fill: hsl(285, 66%, 94%);
  --purple-cvd-text: hsl(285, 66%, 38%);
  --purple-cvd-mark: hsl(285, 66%, 50%);
  --light-surface: hsl(345, 40%, 96%);
}

body.dark.tritanopia {
  --status-error-fill: hsl(353, 60%, 18%);
  --status-error-text: hsl(353, 78%, 66%);
  --status-error-mark: hsl(353, 78%, 55%);
  --status-warning-fill: hsl(31, 60%, 18%);
  --status-warning-text: hsl(31, 95%, 66%);
  --status-warning-mark: hsl(31, 95%, 43%);
  --status-success-fill: hsl(133, 60%, 18%);
  --status-success-text: hsl(133, 60%, 66%);
  --status-success-mark: hsl(133, 60%, 39%);
  --status-info-fill: hsl(184, 45%, 18%);
  --status-info-text: hsl(184, 45%, 66%);
  --status-info-mark: hsl(184, 45%, 43%);
  --purple-cvd-fill: hsl(285, 60%, 18%);
  --purple-cvd-text: hsl(285, 66%, 66%);
  --purple-cvd-mark: hsl(285, 66%, 50%);
  --dark-background: hsl(340, 30%, 7%);
  --dark-surface: hsl(340, 30%, 11%);
}

body.light.achromatopsia {
  --status-error-fill: hsl(8, 12%, 94%);
  --status-error-text: hsl(8, 12%, 30%);
  --status-error-mark: hsl(8, 12%, 40%);
  --status-warning-fill: hsl(40, 14%, 94%);
  --status-warning-text: hsl(40, 14%, 30%);
  --status-warning-mark: hsl(40, 14%, 40%);
  --status-success-fill: hsl(210, 8%, 94%);
  --status-success-text: hsl(210, 8%, 30%);
  --status-success-mark: hsl(210, 8%, 42%);
  --status-info-fill: hsl(210, 8%, 94%);
  --status-info-text: hsl(210, 8%, 34%);
  --status-info-mark: hsl(210, 8%, 50%);
  --purple-cvd-fill: hsl(285, 10%, 94%);
  --purple-cvd-text: hsl(285, 10%, 30%);
  --purple-cvd-mark: hsl(285, 10%, 44%);
  --light-surface: hsl(220, 8%, 97%);
}

body.dark.achromatopsia {
  --status-error-fill: hsl(8, 12%, 18%);
  --status-error-text: hsl(8, 12%, 80%);
  --status-error-mark: hsl(8, 12%, 40%);
  --status-warning-fill: hsl(40, 14%, 18%);
  --status-warning-text: hsl(40, 14%, 78%);
  --status-warning-mark: hsl(40, 14%, 40%);
  --status-success-fill: hsl(210, 8%, 18%);
  --status-success-text: hsl(210, 8%, 78%);
  --status-success-mark: hsl(210, 8%, 42%);
  --status-info-fill: hsl(210, 8%, 18%);
  --status-info-text: hsl(210, 8%, 74%);
  --status-info-mark: hsl(210, 8%, 50%);
  --purple-cvd-fill: hsl(285, 10%, 18%);
  --purple-cvd-text: hsl(285, 10%, 78%);
  --purple-cvd-mark: hsl(285, 10%, 44%);
  --dark-background: hsl(220, 8%, 7%);
  --dark-surface: hsl(220, 8%, 11%);
}

body.light.protanopia,
body.dark.protanopia {
  --color-scheme: hsl(215, 65%, 55%);
  --color-scheme-05: hsla(215, 65%, 55%, 0.05);
  --color-scheme-10: hsla(215, 65%, 55%, 0.10);
  --color-scheme-20: hsla(215, 65%, 55%, 0.20);
  --color-scheme-30: hsla(215, 65%, 55%, 0.30);
  --color-scheme-40: hsla(215, 65%, 55%, 0.40);
  --color-scheme-50: hsla(215, 65%, 55%, 0.50);
  --color-scheme-60: hsla(215, 65%, 55%, 0.60);
  --color-scheme-70: hsla(215, 65%, 55%, 0.70);
  --color-scheme-80: hsla(215, 65%, 55%, 0.80);
  --color-scheme-90: hsla(215, 65%, 55%, 0.90);
  --color-scheme-light: hsl(215, 65%, 65%);
}

body.light.deuteranopia,
body.dark.deuteranopia {
  --color-scheme: hsl(310, 58%, 55%);
  --color-scheme-05: hsla(310, 58%, 55%, 0.05);
  --color-scheme-10: hsla(310, 58%, 55%, 0.10);
  --color-scheme-20: hsla(310, 58%, 55%, 0.20);
  --color-scheme-30: hsla(310, 58%, 55%, 0.30);
  --color-scheme-40: hsla(310, 58%, 55%, 0.40);
  --color-scheme-50: hsla(310, 58%, 55%, 0.50);
  --color-scheme-60: hsla(310, 58%, 55%, 0.60);
  --color-scheme-70: hsla(310, 58%, 55%, 0.70);
  --color-scheme-80: hsla(310, 58%, 55%, 0.80);
  --color-scheme-90: hsla(310, 58%, 55%, 0.90);
  --color-scheme-light: hsl(310, 58%, 65%);
}

body.light.tritanopia,
body.dark.tritanopia {
  --color-scheme: hsl(333, 70%, 55%);
  --color-scheme-05: hsla(333, 70%, 55%, 0.05);
  --color-scheme-10: hsla(333, 70%, 55%, 0.10);
  --color-scheme-20: hsla(333, 70%, 55%, 0.20);
  --color-scheme-30: hsla(333, 70%, 55%, 0.30);
  --color-scheme-40: hsla(333, 70%, 55%, 0.40);
  --color-scheme-50: hsla(333, 70%, 55%, 0.50);
  --color-scheme-60: hsla(333, 70%, 55%, 0.60);
  --color-scheme-70: hsla(333, 70%, 55%, 0.70);
  --color-scheme-80: hsla(333, 70%, 55%, 0.80);
  --color-scheme-90: hsla(333, 70%, 55%, 0.90);
  --color-scheme-light: hsl(333, 70%, 65%);
}

body.light.protanopia,
body.dark.protanopia {
  --chart-status-success: var(--status-success-mark);
  --chart-status-warning: var(--status-warning-mark);
  --chart-status-error: var(--status-error-mark);
  --chart-status-info: var(--status-info-mark);
  --chart-line: var(--color-scheme);
}

body.light.deuteranopia,
body.dark.deuteranopia {
  --chart-status-success: var(--status-success-mark);
  --chart-status-warning: var(--status-warning-mark);
  --chart-status-error: var(--status-error-mark);
  --chart-status-info: var(--status-info-mark);
  --chart-line: var(--color-scheme);
}

body.light.tritanopia,
body.dark.tritanopia {
  --chart-status-success: var(--status-success-mark);
  --chart-status-warning: var(--status-warning-mark);
  --chart-status-error: var(--status-error-mark);
  --chart-status-info: var(--status-info-mark);
  --chart-line: var(--color-scheme);
}

body.light.achromatopsia,
body.dark.achromatopsia {
  --chart-status-success: var(--status-success-mark);
  --chart-status-warning: var(--status-warning-mark);
  --chart-status-error: var(--status-error-mark);
  --chart-status-info: var(--status-info-mark);
  --chart-line: var(--color-scheme);
}

body.light.protanopia,
body.dark.protanopia {
  --chart-cat-1: #e69f00;
  --chart-cat-2: #56b4e9;
  --chart-cat-3: #009e73;
  --chart-cat-4: #f0e442;
  --chart-cat-5: #0072b2;
  --chart-cat-6: #d55e00;
  --chart-cat-7: #cc79a7;
  --chart-cat-8: #999999;
}

body.light.deuteranopia,
body.dark.deuteranopia {
  --chart-cat-1: #e69f00;
  --chart-cat-2: #56b4e9;
  --chart-cat-3: #009e73;
  --chart-cat-4: #f0e442;
  --chart-cat-5: #0072b2;
  --chart-cat-6: #d55e00;
  --chart-cat-7: #cc79a7;
  --chart-cat-8: #999999;
}

body.light.tritanopia,
body.dark.tritanopia {
  --chart-cat-1: #e69f00;
  --chart-cat-2: #56b4e9;
  --chart-cat-3: #009e73;
  --chart-cat-4: #f0e442;
  --chart-cat-5: #0072b2;
  --chart-cat-6: #d55e00;
  --chart-cat-7: #cc79a7;
  --chart-cat-8: #999999;
}

body.light.achromatopsia,
body.dark.achromatopsia {
  --chart-cat-1: #ebebeb;
  --chart-cat-2: #cccccc;
  --chart-cat-3: #adadad;
  --chart-cat-4: #8f8f8f;
  --chart-cat-5: #737373;
  --chart-cat-6: #575757;
  --chart-cat-7: #3d3d3d;
  --chart-cat-8: #262626;
}

body.light .theme-preview--v8 {
  --preview-bg: hsl(223, 55%, 97%);
  --preview-surface: hsl(0, 0%, 100%);
  --preview-surface-2: hsl(223, 44%, 98%);
  --preview-line: hsl(223, 30%, 88%);
  --preview-text: hsl(223, 45%, 16%);
  --preview-muted: hsl(223, 16%, 50%);
  --preview-accent: hsl(16, 95%, 52%);
  --preview-ok: hsl(152, 60%, 42%);
  --preview-warn: hsl(43, 88%, 47%);
  --preview-err: hsl(2, 78%, 55%);
}
body.light .theme-preview--standard {
  --preview-bg: hsl(227, 60%, 97%);
  --preview-surface: hsl(0, 0%, 100%);
  --preview-surface-2: hsl(227, 45%, 98%);
  --preview-line: hsl(227, 32%, 88%);
  --preview-text: hsl(224, 45%, 16%);
  --preview-muted: hsl(224, 18%, 48%);
  --preview-accent: hsl(183, 70%, 38%);
  --preview-ok: hsl(152, 60%, 42%);
  --preview-warn: hsl(43, 88%, 47%);
  --preview-err: hsl(2, 78%, 55%);
}
body.light .theme-preview--neutral {
  --preview-bg: hsl(222, 14%, 97%);
  --preview-surface: hsl(0, 0%, 100%);
  --preview-surface-2: hsl(222, 12%, 98%);
  --preview-line: hsl(222, 10%, 87%);
  --preview-text: hsl(222, 14%, 16%);
  --preview-muted: hsl(222, 8%, 48%);
  --preview-accent: hsl(200, 55%, 45%);
  --preview-ok: hsl(152, 42%, 42%);
  --preview-warn: hsl(43, 55%, 45%);
  --preview-err: hsl(2, 55%, 52%);
}
body.light .theme-preview--achromatopsia {
  --preview-bg: hsl(0, 0%, 97%);
  --preview-surface: hsl(0, 0%, 100%);
  --preview-surface-2: hsl(0, 0%, 98%);
  --preview-line: hsl(0, 0%, 85%);
  --preview-text: hsl(0, 0%, 12%);
  --preview-muted: hsl(0, 0%, 46%);
  --preview-accent: hsl(0, 0%, 28%);
  --preview-ok: hsl(0, 0%, 58%);
  --preview-warn: hsl(0, 0%, 40%);
  --preview-err: hsl(0, 0%, 20%);
}
body.light .theme-preview--protanopia {
  --preview-bg: hsl(215, 45%, 97%);
  --preview-surface: hsl(0, 0%, 100%);
  --preview-surface-2: hsl(215, 35%, 98%);
  --preview-line: hsl(215, 30%, 88%);
  --preview-text: hsl(215, 35%, 16%);
  --preview-muted: hsl(215, 20%, 48%);
  --preview-accent: hsl(215, 72%, 50%);
  --preview-ok: hsl(173, 66%, 36%);
  --preview-warn: hsl(46, 88%, 44%);
  --preview-err: hsl(22, 85%, 48%);
}
body.light .theme-preview--deuteranopia {
  --preview-bg: hsl(295, 35%, 97%);
  --preview-surface: hsl(0, 0%, 100%);
  --preview-surface-2: hsl(295, 26%, 98%);
  --preview-line: hsl(295, 22%, 88%);
  --preview-text: hsl(295, 25%, 16%);
  --preview-muted: hsl(295, 16%, 48%);
  --preview-accent: hsl(310, 60%, 48%);
  --preview-ok: hsl(172, 68%, 34%);
  --preview-warn: hsl(45, 88%, 44%);
  --preview-err: hsl(16, 80%, 48%);
}
body.light .theme-preview--tritanopia {
  --preview-bg: hsl(340, 35%, 97%);
  --preview-surface: hsl(0, 0%, 100%);
  --preview-surface-2: hsl(340, 26%, 98%);
  --preview-line: hsl(340, 22%, 88%);
  --preview-text: hsl(340, 25%, 16%);
  --preview-muted: hsl(340, 16%, 48%);
  --preview-accent: hsl(333, 70%, 48%);
  --preview-ok: hsl(133, 55%, 38%);
  --preview-warn: hsl(31, 88%, 44%);
  --preview-err: hsl(353, 74%, 50%);
}
body.light .theme-preview--high-contrast {
  --preview-bg: hsl(0, 0%, 100%);
  --preview-surface: hsl(0, 0%, 100%);
  --preview-surface-2: hsl(0, 0%, 100%);
  --preview-line: hsl(0, 0%, 0%);
  --preview-text: hsl(0, 0%, 0%);
  --preview-muted: hsl(0, 0%, 28%);
  --preview-accent: hsl(224, 90%, 42%);
  --preview-ok: hsl(150, 90%, 28%);
  --preview-warn: hsl(38, 100%, 40%);
  --preview-err: hsl(2, 85%, 44%);
}
body.light .theme-preview--v8 {
  --preview-bg: radial-gradient(circle at 22% 0%, hsla(16, 90%, 55%, 0.12), transparent 52%),
    radial-gradient(circle at 92% 8%, hsla(210, 90%, 55%, 0.12), transparent 44%), hsl(223, 55%, 97%);
}
body.light .theme-preview--standard {
  --preview-bg: radial-gradient(ellipse at 50% -20%, hsla(210, 80%, 55%, 0.14), transparent 60%), hsl(227, 60%, 97%);
}
body.light .theme-preview--neutral {
  --preview-bg: radial-gradient(ellipse at 50% -20%, hsla(222, 20%, 60%, 0.18), transparent 62%), hsl(222, 14%, 97%);
}

body.dark .theme-preview--v8 {
  --preview-bg: hsl(247, 100%, 7%);
  --preview-surface: hsl(223, 78%, 11%);
  --preview-surface-2: hsl(223, 55%, 15%);
  --preview-line: hsl(223, 45%, 25%);
  --preview-text: hsl(240, 40%, 96%);
  --preview-muted: hsl(230, 26%, 44%);
  --preview-accent: hsl(16, 100%, 58%);
  --preview-ok: hsl(152, 66%, 52%);
  --preview-warn: hsl(43, 92%, 58%);
  --preview-err: hsl(2, 82%, 64%);
}
body.dark .theme-preview--standard {
  --preview-bg: hsl(227, 85%, 9%);
  --preview-surface: hsl(227, 60%, 14%);
  --preview-surface-2: hsl(227, 50%, 18%);
  --preview-line: hsl(227, 40%, 27%);
  --preview-text: hsl(220, 45%, 95%);
  --preview-muted: hsl(222, 32%, 44%);
  --preview-accent: hsl(183, 72%, 50%);
  --preview-ok: hsl(152, 66%, 52%);
  --preview-warn: hsl(43, 92%, 58%);
  --preview-err: hsl(2, 82%, 64%);
}
body.dark .theme-preview--neutral {
  --preview-bg: hsl(222, 16%, 10%);
  --preview-surface: hsl(222, 13%, 14%);
  --preview-surface-2: hsl(222, 11%, 18%);
  --preview-line: hsl(222, 10%, 27%);
  --preview-text: hsl(220, 14%, 95%);
  --preview-muted: hsl(222, 9%, 44%);
  --preview-accent: hsl(200, 55%, 58%);
  --preview-ok: hsl(152, 44%, 55%);
  --preview-warn: hsl(43, 58%, 58%);
  --preview-err: hsl(2, 58%, 62%);
}
body.dark .theme-preview--achromatopsia {
  --preview-bg: hsl(220, 8%, 9%);
  --preview-surface: hsl(220, 7%, 14%);
  --preview-surface-2: hsl(220, 6%, 18%);
  --preview-line: hsl(220, 6%, 29%);
  --preview-text: hsl(0, 0%, 100%);
  --preview-muted: hsl(0, 0%, 42%);
  --preview-accent: hsl(0, 0%, 86%);
  --preview-ok: hsl(0, 0%, 92%);
  --preview-warn: hsl(0, 0%, 64%);
  --preview-err: hsl(0, 0%, 44%);
}
body.dark .theme-preview--protanopia {
  --preview-bg: hsl(215, 40%, 9%);
  --preview-surface: hsl(215, 35%, 13%);
  --preview-surface-2: hsl(215, 30%, 17%);
  --preview-line: hsl(215, 28%, 26%);
  --preview-text: hsl(210, 30%, 95%);
  --preview-muted: hsl(215, 22%, 44%);
  --preview-accent: hsl(215, 78%, 64%);
  --preview-ok: hsl(173, 66%, 46%);
  --preview-warn: hsl(46, 92%, 55%);
  --preview-err: hsl(22, 88%, 57%);
}
body.dark .theme-preview--deuteranopia {
  --preview-bg: hsl(295, 30%, 9%);
  --preview-surface: hsl(295, 26%, 13%);
  --preview-surface-2: hsl(295, 22%, 17%);
  --preview-line: hsl(295, 20%, 26%);
  --preview-text: hsl(300, 20%, 95%);
  --preview-muted: hsl(295, 16%, 45%);
  --preview-accent: hsl(310, 62%, 60%);
  --preview-ok: hsl(172, 68%, 44%);
  --preview-warn: hsl(45, 92%, 55%);
  --preview-err: hsl(16, 84%, 56%);
}
body.dark .theme-preview--tritanopia {
  --preview-bg: hsl(340, 30%, 9%);
  --preview-surface: hsl(340, 26%, 13%);
  --preview-surface-2: hsl(340, 22%, 17%);
  --preview-line: hsl(340, 20%, 26%);
  --preview-text: hsl(345, 20%, 95%);
  --preview-muted: hsl(340, 16%, 45%);
  --preview-accent: hsl(333, 72%, 58%);
  --preview-ok: hsl(133, 58%, 47%);
  --preview-warn: hsl(31, 92%, 55%);
  --preview-err: hsl(353, 78%, 60%);
}
body.dark .theme-preview--high-contrast {
  --preview-bg: hsl(0, 0%, 3%);
  --preview-surface: hsl(0, 0%, 8%);
  --preview-surface-2: hsl(0, 0%, 12%);
  --preview-line: hsl(0, 0%, 34%);
  --preview-text: hsl(0, 0%, 100%);
  --preview-muted: hsl(0, 0%, 46%);
  --preview-accent: hsl(224, 90%, 68%);
  --preview-ok: hsl(150, 80%, 55%);
  --preview-warn: hsl(38, 100%, 55%);
  --preview-err: hsl(2, 90%, 64%);
}
body.dark .theme-preview--v8 {
  --preview-bg: radial-gradient(circle at 22% 0%, hsla(16, 90%, 52%, 0.28), transparent 52%),
    radial-gradient(circle at 92% 8%, hsla(205, 95%, 46%, 0.26), transparent 44%), hsl(247, 100%, 7%);
}
body.dark .theme-preview--standard {
  --preview-bg: radial-gradient(ellipse at 50% -20%, hsla(210, 80%, 42%, 0.3), transparent 60%), hsl(227, 85%, 9%);
}
body.dark .theme-preview--neutral {
  --preview-bg: radial-gradient(ellipse at 50% -20%, hsla(222, 20%, 32%, 0.5), transparent 62%), hsl(222, 16%, 10%);
}

.theme-preview-shot {
  display: block;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--preview-line);
  background: var(--preview-bg);
}
.theme-preview-shot svg {
  display: block;
  width: 100%;
  height: auto;
}
.theme-preview-shot .pv-nav {
  fill: var(--preview-surface);
}
.theme-preview-shot .pv-line {
  fill: var(--preview-line);
}
.theme-preview-shot .pv-logo {
  fill: var(--preview-accent);
}
.theme-preview-shot .pv-muted {
  fill: var(--preview-muted);
}
.theme-preview-shot .pv-text {
  fill: var(--preview-text);
}
.theme-preview-shot .pv-card {
  fill: var(--preview-surface-2);
  stroke: var(--preview-line);
}
.theme-preview-shot .pv-ok {
  fill: var(--preview-ok);
}
.theme-preview-shot .pv-warn {
  fill: var(--preview-warn);
}
.theme-preview-shot .pv-err {
  fill: var(--preview-err);
}
.theme-preview-shot .pv-btn {
  fill: var(--preview-accent);
}
.theme-preview-shot .pv-btn-outline {
  fill: none;
  stroke: var(--preview-line);
}

.theme-preview-shot.is-hc .pv-card {
  stroke: var(--preview-text);
  stroke-width: 2;
}
.theme-preview-shot.is-hc .pv-ok,
.theme-preview-shot.is-hc .pv-warn,
.theme-preview-shot.is-hc .pv-err {
  stroke: var(--preview-text);
  stroke-width: 1;
}
.theme-preview-shot.is-hc .pv-btn-outline {
  stroke: var(--preview-text);
  stroke-width: 2;
}

.theme-preview-swatch {
  display: flex;
  gap: 4px;
}
.theme-preview-swatch .sw-bar {
  width: 11px;
  height: 24px;
  border-radius: 3px;
}
.theme-preview-swatch .sw-accent {
  background: var(--preview-accent);
}
.theme-preview-swatch .sw-ok {
  background: var(--preview-ok);
}
.theme-preview-swatch .sw-warn {
  background: var(--preview-warn);
}
.theme-preview-swatch .sw-err {
  background: var(--preview-err);
}
.theme-preview-swatch .sw-muted {
  background: var(--preview-muted);
}

.layout-preview-shot {
  display: block;
  width: 100%;
}
.layout-preview-shot svg {
  display: block;
  width: 100%;
  height: auto;
}
.layout-preview-shot .lp-frame {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  opacity: 0.5;
}
.layout-preview-shot .lp-box {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  opacity: 0.7;
}
.layout-preview-shot .lp-title {
  fill: currentColor;
  opacity: 0.85;
}
.layout-preview-shot .lp-bar {
  fill: currentColor;
  opacity: 0.4;
}

body.light .layout-preview-shot {
  color: var(--black-alpha-80);
}

body.dark .layout-preview-shot {
  color: var(--white-alpha-90);
}

body.light.standard .pulses-whats-new,
body.light.standard .pulses-card-shell,
body.dark.standard .pulses-whats-new,
body.dark.standard .pulses-card-shell {
  background: var(--background-gradient);
}

body.light.v8 {
  background-color: hsla(223, 50%, 91%, 0.4);
}
@media (max-width: 768px) {
  body.light.v8 .mpcp-app #mpcpMainNav .nav-header,
  body.light.v8 .mpcp-app #mpcpMainNav .primary-navigation-wrapper {
    background-repeat: no-repeat;
    background-position: center;
    background-color: hsl(0, 0%, 100%);
    background-image: radial-gradient(ellipse at 70% 0%, hsla(223, 50%, 91%, 0.4) 0%, rgba(220.575, 227.0775, 243.525, 0) 30%), radial-gradient(circle at 90% 0%, hsla(223, 78%, 50%, 0.1) 0%, rgba(28.05, 84.405, 226.95, 0) 30%), radial-gradient(ellipse at 0% 0%, hsla(16, 88%, 50%, 0.05) 0%, rgba(239.7, 75.14, 15.3, 0) 40%), radial-gradient(circle at 30% 100%, hsla(223, 50%, 91%, 0.4) 0%, rgba(220.575, 227.0775, 243.525, 0) 40%), radial-gradient(ellipse at 10% 100%, hsla(223, 78%, 50%, 0.1) 0%, rgba(28.05, 84.405, 226.95, 0) 40%), radial-gradient(ellipse at 100% 100%, hsla(16, 88%, 50%, 0.05) 0%, rgba(239.7, 75.14, 15.3, 0) 40%);
  }
}
body.light.v8::after,
body.light.v8 .modal .modal-content,
body.light.v8 .modal .modal-body,
body.light.v8 .pulses-whats-new,
body.light.v8 .pulses-card-shell,
body.light.v8 .offcanvas {
  background-repeat: no-repeat;
  background-position: center;
  background-color: hsl(0, 0%, 100%);
  background-image: radial-gradient(ellipse at 70% 0%, hsla(223, 50%, 91%, 0.4) 0%, rgba(220.575, 227.0775, 243.525, 0) 30%), radial-gradient(circle at 90% 0%, hsla(223, 78%, 50%, 0.1) 0%, rgba(28.05, 84.405, 226.95, 0) 30%), radial-gradient(ellipse at 0% 0%, hsla(16, 88%, 50%, 0.05) 0%, rgba(239.7, 75.14, 15.3, 0) 40%), radial-gradient(circle at 30% 100%, hsla(223, 50%, 91%, 0.4) 0%, rgba(220.575, 227.0775, 243.525, 0) 40%), radial-gradient(ellipse at 10% 100%, hsla(223, 78%, 50%, 0.1) 0%, rgba(28.05, 84.405, 226.95, 0) 40%), radial-gradient(ellipse at 100% 100%, hsla(16, 88%, 50%, 0.05) 0%, rgba(239.7, 75.14, 15.3, 0) 40%);
}

body.dark.v8 {
  color-scheme: dark;
  background-color: hsl(247, 100%, 7%);
  --box-shadow: 0, 0, 0, 0.6;
  --security-gradient: radial-gradient(
    ellipse farthest-corner at 45px 45px,
    var(--lt-dk-accent-50) 0%,
    var(--lt-dk-primary-50) 15%,
    var(--lt-dk-primary-90) 45%,
    var(--lt-dk-primary-90) 65%,
    var(--lt-dk-primary-50) 85%,
    var(--lt-dk-accent-2-50) 100%
  );
  --background-gradient: radial-gradient(
    ellipse farthest-corner at 45px 45px,
    var(--lt-dk-primary-90) 0%,
    var(--lt-white-dk-primary-90) 45%,
    var(--lt-dk-primary-50) 85%,
    var(--lt-dk-accent-2-50) 100%
  );
  --gradient-primary-50-accent-50: linear-gradient(
    90deg,
    var(--primary-50) 0%,
    var(--accent-50) 100%
  );
  --gradient-diag-primary-50-accent-50: linear-gradient(
    350deg,
    var(--primary-50) 0%,
    var(--accent-50) 100%
  );
  --theme-primary-background: var(--lt-primary-50-dk-accent-50);
  --theme-primary-button: var(--lt-dk-primary-50);
  --theme-primary-button-hover: var(--lt-dk-primary-70);
  --theme-primary-button-text: var(--lt-dk-white);
  --theme-primary-button-text-hover: var(--lt-primary-50-dk-white);
  --theme-primary-border: var(--lt-dk-primary-50);
  --theme-primary-border-hover: var(--lt-dk-primary-70);
  --theme-primary-text: var(--lt-primary-50-dk-accent-50);
  --theme-primary-text-hover: var(--lt-primary-50-dk-accent-50);
  --theme-accent-background: var(--lt-dk-accent-50);
  --theme-accent-button: var(--lt-dk-accent-50);
  --theme-accent-button-hover: var(--lt-dk-accent-70);
  --theme-accent-button-text: var(--lt-dk-white);
  --theme-accent-button-text-hover: var(--lt-accent-50-dk-white);
  --theme-accent-border: var(--lt-dk-accent-50);
  --theme-accent-border-hover: var(--lt-dk-accent-70);
  --theme-accent-text: var(--lt-dk-accent-50);
  --theme-accent-text-hover: var(--lt-dk-accent-70);
}
@media (max-width: 768px) {
  body.dark.v8 .mpcp-app #mpcpMainNav .nav-header,
  body.dark.v8 .mpcp-app #mpcpMainNav .primary-navigation-wrapper {
    background-color: hsl(247, 100%, 7%);
    background-image: radial-gradient(ellipse at 70% 0%, hsla(198, 100%, 4%, 0.7) 0%, rgba(0, 14.28, 20.4, 0) 30%), radial-gradient(circle at 90% 0%, hsl(247, 100%, 7%) 0%, rgba(4.165, 0, 35.7, 0) 30%), radial-gradient(ellipse at 0% 0%, hsla(16, 88%, 50%, 0.15) 0%, rgba(239.7, 75.14, 15.3, 0) 40%), radial-gradient(circle at 30% 100%, hsla(198, 100%, 4%, 0.7) 0%, rgba(0, 14.28, 20.4, 0) 40%), radial-gradient(ellipse at 10% 100%, hsl(247, 100%, 7%) 0%, rgba(4.165, 0, 35.7, 0) 40%), radial-gradient(ellipse at 100% 100%, hsla(16, 88%, 50%, 0.15) 0%, rgba(239.7, 75.14, 15.3, 0) 40%);
  }
}
body.dark.v8::after,
body.dark.v8 .modal .modal-content,
body.dark.v8 .modal .modal-body,
body.dark.v8 .pulses-whats-new,
body.dark.v8 .pulses-card-shell,
body.dark.v8 .offcanvas {
  background-color: hsl(247, 100%, 7%);
  background-image: radial-gradient(ellipse at 70% 0%, hsla(198, 100%, 4%, 0.7) 0%, rgba(0, 14.28, 20.4, 0) 30%), radial-gradient(circle at 90% 0%, hsl(247, 100%, 7%) 0%, rgba(4.165, 0, 35.7, 0) 30%), radial-gradient(ellipse at 0% 0%, hsla(16, 88%, 50%, 0.15) 0%, rgba(239.7, 75.14, 15.3, 0) 40%), radial-gradient(circle at 30% 100%, hsla(198, 100%, 4%, 0.7) 0%, rgba(0, 14.28, 20.4, 0) 40%), radial-gradient(ellipse at 10% 100%, hsl(247, 100%, 7%) 0%, rgba(4.165, 0, 35.7, 0) 40%), radial-gradient(ellipse at 100% 100%, hsla(16, 88%, 50%, 0.15) 0%, rgba(239.7, 75.14, 15.3, 0) 40%);
}

body.light.neutral {
  --security-gradient: radial-gradient(
    ellipse farthest-corner at 45px 45px,
    var(--dark-surface) 0%,
    var(--dark-background) 100%
  );
}
@media (pointer: coarse) {
  body.light.neutral {
    --background-gradient: radial-gradient(
      ellipse farthest-corner at 45px 45px,
      var(--lt-dk-neutral-10) 0%,
      var(--lt-dk-neutral-10) 65%,
      var(--lt-dk-neutral-20) 100%
    );
  }
}
body.light.neutral {
  --background-gradient: radial-gradient(
    ellipse farthest-corner at 45px 45px,
    var(--lt-dk-neutral-10) 0%,
    var(--lt-dk-neutral-10) 45%,
    var(--lt-dk-neutral-20) 85%,
    var(--lt-dk-neutral-20) 100%
  );
  --gradient-primary-50-accent-50: var(--theme-neutral-primary);
  --gradient-diag-primary-50-accent-50: var(--theme-neutral-primary);
  --theme-primary-background: var(--theme-neutral-primary);
  --theme-primary-button: var(--theme-neutral-primary);
  --theme-primary-button-hover: var(--theme-neutral-primary-shade);
  --theme-primary-button-text: var(--lt-dk-white);
  --theme-primary-button-text-hover: var(--theme-neutral-primary-shade);
  --theme-primary-border: var(--theme-neutral-primary);
  --theme-primary-border-hover: var(--theme-neutral-primary-shade);
  --theme-primary-text: var(--theme-neutral-primary);
  --theme-primary-text-hover: var(--theme-neutral-primary-shade);
  --theme-accent-background: var(--theme-neutral-primary);
  --theme-accent-button: var(--theme-neutral-primary);
  --theme-accent-button-hover: var(--theme-neutral-primary-shade);
  --theme-accent-button-text: var(--lt-dk-white);
  --theme-accent-button-text-hover: var(--lt-dk-white);
  --theme-accent-border: var(--theme-neutral-primary);
  --theme-accent-border-hover: var(--theme-neutral-primary-shade);
  --theme-accent-text: var(--theme-neutral-primary);
  --theme-accent-text-hover: var(--theme-neutral-primary-shade);
  --color-scheme: var(--info);
  --color-scheme-05: var(--info-alpha-05);
  --color-scheme-10: var(--info-alpha-10);
  --color-scheme-20: var(--info-alpha-20);
  --color-scheme-30: var(--info-alpha-30);
  --color-scheme-40: var(--info-alpha-40);
  --color-scheme-50: var(--info-alpha-50);
  --color-scheme-60: var(--info-alpha-60);
  --color-scheme-70: var(--info-alpha-70);
  --color-scheme-80: var(--info-alpha-80);
  --color-scheme-90: var(--info-alpha-90);
  --color-scheme-light: var(--info-light);
}

body.dark.neutral {
  --security-gradient: radial-gradient(
    ellipse farthest-corner at 45px 45px,
    var(--dark-surface) 0%,
    var(--dark-background) 100%
  );
  --background-gradient: radial-gradient(
    ellipse farthest-corner at 45px 45px,
    var(--dark-surface) 0%,
    var(--dark-surface) 45%,
    var(--dark-surface) 85%,
    var(--dark-surface) 100%
  );
  --gradient-primary-50-accent-50: var(--theme-neutral-dark-primary);
  --gradient-diag-primary-50-accent-50: var(--theme-neutral-dark-primary);
  --theme-primary-background: var(--theme-neutral-dark-primary);
  --theme-primary-button: var(--theme-neutral-dark-primary);
  --theme-primary-button-hover: var(--theme-neutral-dark-primary-shade);
  --theme-primary-button-text: var(--lt-dk-white);
  --theme-primary-button-text-hover: var(--theme-neutral-dark-primary-shade);
  --theme-primary-border: var(--theme-neutral-dark-primary);
  --theme-primary-border-hover: var(--theme-neutral-dark-primary-shade);
  --theme-primary-text: var(--theme-neutral-dark-primary-tint);
  --theme-primary-text-hover: var(--theme-neutral-dark-primary-shade);
  --theme-accent-background: var(--theme-neutral-dark-primary);
  --theme-accent-button: var(--theme-neutral-dark-primary);
  --theme-accent-button-hover: var(--theme-neutral-dark-primary-shade);
  --theme-accent-button-text: var(--lt-dk-white);
  --theme-accent-button-text-hover: var(--lt-dk-white);
  --theme-accent-border: var(--theme-neutral-dark-primary);
  --theme-accent-border-hover: var(--theme-neutral-dark-primary-shade);
  --theme-accent-text: var(--theme-neutral-dark-primary-tint);
  --theme-accent-text-hover: var(--theme-neutral-dark-primary-shade);
  --color-scheme: var(--info);
  --color-scheme-05: var(--info-alpha-05);
  --color-scheme-10: var(--info-alpha-10);
  --color-scheme-20: var(--info-alpha-20);
  --color-scheme-30: var(--info-alpha-30);
  --color-scheme-40: var(--info-alpha-40);
  --color-scheme-50: var(--info-alpha-50);
  --color-scheme-60: var(--info-alpha-60);
  --color-scheme-70: var(--info-alpha-70);
  --color-scheme-80: var(--info-alpha-80);
  --color-scheme-90: var(--info-alpha-90);
  --color-scheme-light: var(--info-light);
}

body.light.neutral .pulses-whats-new,
body.light.neutral .pulses-card-shell,
body.dark.neutral .pulses-whats-new,
body.dark.neutral .pulses-card-shell {
  background: var(--background-gradient);
}

@media (pointer: coarse) {
  body.light.protanopia,
  body.light.deuteranopia,
  body.light.tritanopia,
  body.light.achromatopsia {
    --background-gradient: radial-gradient(
      ellipse farthest-corner at 45px 45px,
      var(--light-surface) 0%,
      var(--light-surface) 65%,
      var(--light-surface) 100%
    );
  }
}
body.light.protanopia,
body.light.deuteranopia,
body.light.tritanopia,
body.light.achromatopsia {
  --background-gradient: radial-gradient(
    ellipse farthest-corner at 45px 45px,
    var(--light-surface) 0%,
    var(--light-surface) 45%,
    var(--light-surface) 85%,
    var(--light-surface) 100%
  );
}
body.light.protanopia .modal .modal-content,
body.light.protanopia .modal .modal-body,
body.light.protanopia .pulses-whats-new,
body.light.protanopia .pulses-card-shell,
body.light.protanopia .offcanvas,
body.light.deuteranopia .modal .modal-content,
body.light.deuteranopia .modal .modal-body,
body.light.deuteranopia .pulses-whats-new,
body.light.deuteranopia .pulses-card-shell,
body.light.deuteranopia .offcanvas,
body.light.tritanopia .modal .modal-content,
body.light.tritanopia .modal .modal-body,
body.light.tritanopia .pulses-whats-new,
body.light.tritanopia .pulses-card-shell,
body.light.tritanopia .offcanvas,
body.light.achromatopsia .modal .modal-content,
body.light.achromatopsia .modal .modal-body,
body.light.achromatopsia .pulses-whats-new,
body.light.achromatopsia .pulses-card-shell,
body.light.achromatopsia .offcanvas {
  background: var(--background-gradient);
}

body.dark.protanopia,
body.dark.deuteranopia,
body.dark.tritanopia,
body.dark.achromatopsia {
  --background-gradient: radial-gradient(
    ellipse farthest-corner at 45px 45px,
    var(--dark-surface) 0%,
    var(--dark-surface) 45%,
    var(--dark-surface) 85%,
    var(--dark-surface) 100%
  );
}
body.dark.protanopia .modal .modal-content,
body.dark.protanopia .modal .modal-body,
body.dark.protanopia .pulses-whats-new,
body.dark.protanopia .pulses-card-shell,
body.dark.protanopia .offcanvas,
body.dark.deuteranopia .modal .modal-content,
body.dark.deuteranopia .modal .modal-body,
body.dark.deuteranopia .pulses-whats-new,
body.dark.deuteranopia .pulses-card-shell,
body.dark.deuteranopia .offcanvas,
body.dark.tritanopia .modal .modal-content,
body.dark.tritanopia .modal .modal-body,
body.dark.tritanopia .pulses-whats-new,
body.dark.tritanopia .pulses-card-shell,
body.dark.tritanopia .offcanvas,
body.dark.achromatopsia .modal .modal-content,
body.dark.achromatopsia .modal .modal-body,
body.dark.achromatopsia .pulses-whats-new,
body.dark.achromatopsia .pulses-card-shell,
body.dark.achromatopsia .offcanvas {
  background: var(--background-gradient);
}

body.light.achromatopsia {
  --color-scheme: var(--black);
  --color-scheme-05: var(--black-alpha-05);
  --color-scheme-10: var(--black-alpha-10);
  --color-scheme-20: var(--black-alpha-20);
  --color-scheme-30: var(--black-alpha-30);
  --color-scheme-40: var(--black-alpha-40);
  --color-scheme-50: var(--black-alpha-50);
  --color-scheme-60: var(--black-alpha-60);
  --color-scheme-70: var(--black-alpha-70);
  --color-scheme-80: var(--black-alpha-80);
  --color-scheme-90: var(--black-alpha-90);
}

body.dark.achromatopsia {
  --color-scheme: var(--white);
  --color-scheme-05: var(--white-alpha-05);
  --color-scheme-10: var(--white-alpha-10);
  --color-scheme-20: var(--white-alpha-20);
  --color-scheme-30: var(--white-alpha-30);
  --color-scheme-40: var(--white-alpha-40);
  --color-scheme-50: var(--white-alpha-50);
  --color-scheme-60: var(--white-alpha-60);
  --color-scheme-70: var(--white-alpha-70);
  --color-scheme-80: var(--white-alpha-80);
  --color-scheme-90: var(--white-alpha-90);
  --color-scheme-light: var(--white);
}

body.light.high-contrast {
  --background-gradient: var(--white);
  --security-gradient: var(--white);
  --black-alpha-80: var(--black);
  --black-alpha-70: var(--black);
  --black-alpha-60: var(--black);
  --white-alpha-90: var(--white);
  --color-scheme: hsl(224, 90%, 42%);
  --color-scheme-05: hsla(224, 90%, 42%, 0.05);
  --color-scheme-10: hsla(224, 90%, 42%, 0.10);
  --color-scheme-20: hsla(224, 90%, 42%, 0.20);
  --color-scheme-30: hsla(224, 90%, 42%, 0.30);
  --color-scheme-40: hsla(224, 90%, 42%, 0.40);
  --color-scheme-50: hsla(224, 90%, 42%, 0.50);
  --color-scheme-60: hsla(224, 90%, 42%, 0.60);
  --color-scheme-70: hsla(224, 90%, 42%, 0.70);
  --color-scheme-80: hsla(224, 90%, 42%, 0.80);
  --color-scheme-90: hsla(224, 90%, 42%, 0.90);
  --color-scheme-light: hsl(224, 90%, 52%);
}

body.dark.high-contrast {
  --background-gradient: var(--black);
  --security-gradient: var(--black);
  --white-alpha-90: var(--white);
  --white-alpha-80: var(--white);
  --white-alpha-70: var(--white);
  --color-scheme: hsl(210, 100%, 72%);
  --color-scheme-05: hsla(210, 100%, 72%, 0.05);
  --color-scheme-10: hsla(210, 100%, 72%, 0.10);
  --color-scheme-20: hsla(210, 100%, 72%, 0.20);
  --color-scheme-30: hsla(210, 100%, 72%, 0.30);
  --color-scheme-40: hsla(210, 100%, 72%, 0.40);
  --color-scheme-50: hsla(210, 100%, 72%, 0.50);
  --color-scheme-60: hsla(210, 100%, 72%, 0.60);
  --color-scheme-70: hsla(210, 100%, 72%, 0.70);
  --color-scheme-80: hsla(210, 100%, 72%, 0.80);
  --color-scheme-90: hsla(210, 100%, 72%, 0.90);
  --color-scheme-light: hsl(210, 100%, 72%);
}

body.light.high-contrast .mpcp-app .badge,
body.light.high-contrast .mpcp-app .alert,
body.dark.high-contrast .mpcp-app .badge,
body.dark.high-contrast .mpcp-app .alert {
  border-width: 2px !important;
  border-style: solid !important;
  border-color: currentColor !important;
}
body.light.high-contrast .mpcp-app .badge,
body.dark.high-contrast .mpcp-app .badge {
  font-weight: 700;
}
body.light.high-contrast .mpcp-app .badge-success,
body.light.high-contrast .mpcp-app .alert-success,
body.dark.high-contrast .mpcp-app .badge-success,
body.dark.high-contrast .mpcp-app .alert-success {
  border-color: var(--success) !important;
}
body.light.high-contrast .mpcp-app .badge-danger,
body.light.high-contrast .mpcp-app .badge-error,
body.light.high-contrast .mpcp-app .alert-danger,
body.dark.high-contrast .mpcp-app .badge-danger,
body.dark.high-contrast .mpcp-app .badge-error,
body.dark.high-contrast .mpcp-app .alert-danger {
  border-color: var(--danger) !important;
}
body.light.high-contrast .mpcp-app .badge-warning,
body.light.high-contrast .mpcp-app .alert-warning,
body.dark.high-contrast .mpcp-app .badge-warning,
body.dark.high-contrast .mpcp-app .alert-warning {
  border-color: var(--warning) !important;
}
body.light.high-contrast .mpcp-app .badge-info,
body.light.high-contrast .mpcp-app .alert-info,
body.dark.high-contrast .mpcp-app .badge-info,
body.dark.high-contrast .mpcp-app .alert-info {
  border-color: var(--info) !important;
}
body.light.high-contrast .mpcp-app .badge-purple,
body.light.high-contrast .mpcp-app .alert-purple,
body.dark.high-contrast .mpcp-app .badge-purple,
body.dark.high-contrast .mpcp-app .alert-purple {
  border-color: var(--purple) !important;
}
body.light.high-contrast .mpcp-app .badge-primary,
body.dark.high-contrast .mpcp-app .badge-primary {
  border-color: var(--color-scheme) !important;
}
body.light.high-contrast .mpcp-app .card,
body.light.high-contrast .mpcp-app .form-control,
body.light.high-contrast .mpcp-app .form-select,
body.dark.high-contrast .mpcp-app .card,
body.dark.high-contrast .mpcp-app .form-control,
body.dark.high-contrast .mpcp-app .form-select {
  border: 2px solid currentColor !important;
}
body.light.high-contrast .mpcp-app :focus-visible,
body.dark.high-contrast .mpcp-app :focus-visible {
  outline: 3px solid var(--color-scheme) !important;
  outline-offset: 2px;
}

body.light.high-contrast .mpcp-app .badge,
body.light.high-contrast .mpcp-app .alert {
  background-color: var(--white) !important;
}

body.dark.high-contrast .mpcp-app .badge,
body.dark.high-contrast .mpcp-app .alert {
  background-color: var(--black) !important;
}

body.light.high-contrast .pulses-whats-new,
body.light.high-contrast .pulses-card-shell,
body.dark.high-contrast .pulses-whats-new,
body.dark.high-contrast .pulses-card-shell {
  background: var(--background-gradient);
}

:root {
  --toast-bg-success: #15803d;
  --toast-border-success: #59c782;
  --toast-bg-error: #dc2626;
  --toast-border-error: #ff7f7f;
  --toast-bg-warning: #ba7014;
  --toast-border-warning: #ffaa40;
  --toast-bg-info: #2563eb;
  --toast-border-info: #8db0ff;
  --toast-bg-default: #282828;
  --toast-border-default: #5d5d5d;
}

#toast-container .toast {
  background-color: var(--toast-bg-default);
  border-color: var(--toast-border-default);
}
#toast-container .toast.toast-success {
  background-color: var(--toast-bg-success);
  border-color: var(--toast-border-success);
}
#toast-container .toast.toast-error {
  background-color: var(--toast-bg-error);
  border-color: var(--toast-border-error);
}
#toast-container .toast.toast-warning {
  background-color: var(--toast-bg-warning);
  border-color: var(--toast-border-warning);
}
#toast-container .toast.toast-info {
  background-color: var(--toast-bg-info);
  border-color: var(--toast-border-info);
}

#toast-container > div {
  opacity: 1 !important;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: alpha(opacity=100) !important;
  box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.4);
}
#toast-container > div:hover {
  box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.5);
}
#toast-container .toast .toast-message {
  color: var(--white);
  font-weight: 600;
  font-size: 14px;
}

.offcanvas #mark-all-as-read {
  margin-left: 10px;
  margin-right: auto;
}
.offcanvas .btn {
  border-radius: 30px !important;
  font-size: 0.85em;
  font-weight: 700;
  border-width: 2px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-primary);
}
.offcanvas .btn i.btn-icon {
  font-size: 1.2em;
  margin-right: 8px;
}
.offcanvas .btn-sm {
  font-size: 0.875rem;
}
.offcanvas .btn-xs {
  font-size: 0.75rem;
}

.mpcp-app a {
  text-decoration: none;
}
body.light .mpcp-app a:not(.btn):not(.text-reveal-button):not(.page-link):not(.dropdown-item):not(.nav-link):not(.card-action):not(.theme-option-box):not(.help-link), :root .mpcp-app a:not(.btn):not(.text-reveal-button):not(.page-link):not(.dropdown-item):not(.nav-link):not(.card-action):not(.theme-option-box):not(.help-link) {
  color: var(--color-scheme);
}
body.dark .mpcp-app a:not(.btn):not(.text-reveal-button):not(.page-link):not(.dropdown-item):not(.nav-link):not(.card-action):not(.theme-option-box):not(.help-link) {
  color: var(--color-scheme-light);
}
.mpcp-app a:not(.btn):not(.text-reveal-button):not(.page-link):not(.dropdown-item):not(.nav-link):not(.card-action):not(.theme-option-box):not(.help-link) {
  font-weight: 700;
}
body.light .mpcp-app a:not(.btn):not(.text-reveal-button):not(.page-link):not(.dropdown-item):not(.nav-link):not(.card-action):not(.theme-option-box):not(.help-link):hover, :root .mpcp-app a:not(.btn):not(.text-reveal-button):not(.page-link):not(.dropdown-item):not(.nav-link):not(.card-action):not(.theme-option-box):not(.help-link):hover, body.light .mpcp-app a:not(.btn):not(.text-reveal-button):not(.page-link):not(.dropdown-item):not(.nav-link):not(.card-action):not(.theme-option-box):not(.help-link):focus, :root .mpcp-app a:not(.btn):not(.text-reveal-button):not(.page-link):not(.dropdown-item):not(.nav-link):not(.card-action):not(.theme-option-box):not(.help-link):focus {
  color: var(--color-scheme);
}
body.dark .mpcp-app a:not(.btn):not(.text-reveal-button):not(.page-link):not(.dropdown-item):not(.nav-link):not(.card-action):not(.theme-option-box):not(.help-link):hover, body.dark .mpcp-app a:not(.btn):not(.text-reveal-button):not(.page-link):not(.dropdown-item):not(.nav-link):not(.card-action):not(.theme-option-box):not(.help-link):focus {
  color: var(--color-scheme-light);
}
.mpcp-app a:not(.btn):not(.text-reveal-button):not(.page-link):not(.dropdown-item):not(.nav-link):not(.card-action):not(.theme-option-box):not(.help-link):hover, .mpcp-app a:not(.btn):not(.text-reveal-button):not(.page-link):not(.dropdown-item):not(.nav-link):not(.card-action):not(.theme-option-box):not(.help-link):focus {
  text-decoration: underline;
}
.mpcp-app a.hover-underline:hover, .mpcp-app a.hover-underline:focus {
  text-decoration: underline !important;
}
.mpcp-app .help-link {
  font-size: 0.85em;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.light .mpcp-app .help-link, :root .mpcp-app .help-link {
  color: var(--black-alpha-60);
}
body.dark .mpcp-app .help-link {
  color: var(--white-alpha-60);
}
body.light .mpcp-app .help-link:hover, :root .mpcp-app .help-link:hover, body.light .mpcp-app .help-link:focus, :root .mpcp-app .help-link:focus {
  color: var(--black);
}
body.dark .mpcp-app .help-link:hover, body.dark .mpcp-app .help-link:focus {
  color: var(--white);
}
.mpcp-app .help-link:hover, .mpcp-app .help-link:focus {
  text-decoration: underline;
}
.mpcp-app .help-link i {
  font-size: 0.75em;
}
.mpcp-app .card-header .help-link {
  font-size: 0.95rem;
}
.mpcp-app .modal-header .help-link {
  font-size: 0.95rem;
  margin-left: 0.75rem;
}
.mpcp-app .data-panel .data-title .help-link {
  font-size: 0.8rem;
}
.mpcp-app .data-panel .data-title .data-title-help::before {
  content: "·";
  margin: 0 0.4em 0 0.5em;
}
body.light .mpcp-app .data-panel .data-title .data-title-help::before, :root .mpcp-app .data-panel .data-title .data-title-help::before {
  color: var(--black-alpha-40);
}
body.dark .mpcp-app .data-panel .data-title .data-title-help::before {
  color: var(--white-alpha-40);
}
.mpcp-app .data-panel .data-title:has(.help-link) {
  margin-bottom: 0.45em;
}

.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: all;
}
body.light .btn.disabled, :root .btn.disabled,
body.light .btn:disabled,
:root .btn:disabled,
body.light fieldset:disabled .btn,
:root fieldset:disabled .btn {
  background-color: var(--black-alpha-80);
}
body.dark .btn.disabled,
body.dark .btn:disabled,
body.dark fieldset:disabled .btn {
  background-color: var(--white-alpha-70);
}
body.light .btn.disabled, :root .btn.disabled,
body.light .btn:disabled,
:root .btn:disabled,
body.light fieldset:disabled .btn,
:root fieldset:disabled .btn {
  border-color: var(--transparent);
}
body.dark .btn.disabled,
body.dark .btn:disabled,
body.dark fieldset:disabled .btn {
  border-color: var(--transparent);
}
body.light .btn.disabled, :root .btn.disabled,
body.light .btn:disabled,
:root .btn:disabled,
body.light fieldset:disabled .btn,
:root fieldset:disabled .btn {
  color: var(--white-alpha-80);
}
body.dark .btn.disabled,
body.dark .btn:disabled,
body.dark fieldset:disabled .btn {
  color: var(--black-alpha-90);
}
body.light .btn.disabled:hover, :root .btn.disabled:hover, body.light .btn.disabled:focus, :root .btn.disabled:focus,
body.light .btn:disabled:hover,
:root .btn:disabled:hover,
body.light .btn:disabled:focus,
:root .btn:disabled:focus,
body.light fieldset:disabled .btn:hover,
:root fieldset:disabled .btn:hover,
body.light fieldset:disabled .btn:focus,
:root fieldset:disabled .btn:focus {
  background-color: var(--black-alpha-80);
}
body.dark .btn.disabled:hover, body.dark .btn.disabled:focus,
body.dark .btn:disabled:hover,
body.dark .btn:disabled:focus,
body.dark fieldset:disabled .btn:hover,
body.dark fieldset:disabled .btn:focus {
  background-color: var(--white-alpha-70);
}
body.light .btn.disabled:hover, :root .btn.disabled:hover, body.light .btn.disabled:focus, :root .btn.disabled:focus,
body.light .btn:disabled:hover,
:root .btn:disabled:hover,
body.light .btn:disabled:focus,
:root .btn:disabled:focus,
body.light fieldset:disabled .btn:hover,
:root fieldset:disabled .btn:hover,
body.light fieldset:disabled .btn:focus,
:root fieldset:disabled .btn:focus {
  border-color: var(--transparent);
}
body.dark .btn.disabled:hover, body.dark .btn.disabled:focus,
body.dark .btn:disabled:hover,
body.dark .btn:disabled:focus,
body.dark fieldset:disabled .btn:hover,
body.dark fieldset:disabled .btn:focus {
  border-color: var(--transparent);
}
body.light .btn.disabled:hover, :root .btn.disabled:hover, body.light .btn.disabled:focus, :root .btn.disabled:focus,
body.light .btn:disabled:hover,
:root .btn:disabled:hover,
body.light .btn:disabled:focus,
:root .btn:disabled:focus,
body.light fieldset:disabled .btn:hover,
:root fieldset:disabled .btn:hover,
body.light fieldset:disabled .btn:focus,
:root fieldset:disabled .btn:focus {
  color: var(--white-alpha-80);
}
body.dark .btn.disabled:hover, body.dark .btn.disabled:focus,
body.dark .btn:disabled:hover,
body.dark .btn:disabled:focus,
body.dark fieldset:disabled .btn:hover,
body.dark fieldset:disabled .btn:focus {
  color: var(--black-alpha-90);
}

.btn {
  border-radius: 30px !important;
  font-size: 0.85em;
  font-weight: 700;
  border-width: 2px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-primary);
}
.btn i.btn-icon {
  font-size: 1.2em;
  margin-right: 8px;
}

.card-header .btn {
  font-size: 0.6em;
}
.card-header .btn.btn-kb {
  font-size: 17.65px;
}
.card-header .btn.btn-kb .fa-lg {
  font-size: 17.65px;
}
.card-header .btn.btn-icon-only {
  font-size: 13.6px;
}

body.light .btn-primary, :root .btn-primary,
body.light .btn-secondary,
:root .btn-secondary {
  background-color: var(--color-scheme-80);
}
body.dark .btn-primary,
body.dark .btn-secondary {
  background-color: var(--color-scheme-80);
}
.btn-primary,
.btn-secondary {
  border: 1px solid transparent;
}
body.light .btn-primary, :root .btn-primary,
body.light .btn-secondary,
:root .btn-secondary {
  border-color: var(--transparent);
}
body.dark .btn-primary,
body.dark .btn-secondary {
  border-color: var(--transparent);
}
body.light .btn-primary, :root .btn-primary,
body.light .btn-secondary,
:root .btn-secondary {
  color: var(--white);
}
body.dark .btn-primary,
body.dark .btn-secondary {
  color: var(--white);
}
body.light .btn-primary:hover, :root .btn-primary:hover, body.light .btn-primary:focus, :root .btn-primary:focus,
body.light .btn-secondary:hover,
:root .btn-secondary:hover,
body.light .btn-secondary:focus,
:root .btn-secondary:focus {
  background-color: var(--color-scheme);
}
body.dark .btn-primary:hover, body.dark .btn-primary:focus,
body.dark .btn-secondary:hover,
body.dark .btn-secondary:focus {
  background-color: var(--color-scheme-light);
}
body.light .btn-primary:hover, :root .btn-primary:hover, body.light .btn-primary:focus, :root .btn-primary:focus,
body.light .btn-secondary:hover,
:root .btn-secondary:hover,
body.light .btn-secondary:focus,
:root .btn-secondary:focus {
  border-color: var(--transparent);
}
body.dark .btn-primary:hover, body.dark .btn-primary:focus,
body.dark .btn-secondary:hover,
body.dark .btn-secondary:focus {
  border-color: var(--transparent);
}
body.light .btn-primary:hover, :root .btn-primary:hover, body.light .btn-primary:focus, :root .btn-primary:focus,
body.light .btn-secondary:hover,
:root .btn-secondary:hover,
body.light .btn-secondary:focus,
:root .btn-secondary:focus {
  color: var(--white);
}
body.dark .btn-primary:hover, body.dark .btn-primary:focus,
body.dark .btn-secondary:hover,
body.dark .btn-secondary:focus {
  color: var(--white);
}
body.light .btn-primary.reverse, :root .btn-primary.reverse,
body.light .btn-secondary.reverse,
:root .btn-secondary.reverse {
  background-color: var(--color-scheme-10);
}
body.dark .btn-primary.reverse,
body.dark .btn-secondary.reverse {
  background-color: var(--color-scheme-20);
}
body.light .btn-primary.reverse, :root .btn-primary.reverse,
body.light .btn-secondary.reverse,
:root .btn-secondary.reverse {
  border-color: var(--transparent);
}
body.dark .btn-primary.reverse,
body.dark .btn-secondary.reverse {
  border-color: var(--transparent);
}
body.light .btn-primary.reverse, :root .btn-primary.reverse,
body.light .btn-secondary.reverse,
:root .btn-secondary.reverse {
  color: var(--black-alpha-80);
}
body.dark .btn-primary.reverse,
body.dark .btn-secondary.reverse {
  color: var(--white-alpha-80);
}
body.light .btn-primary.reverse:hover, :root .btn-primary.reverse:hover, body.light .btn-primary.reverse:focus, :root .btn-primary.reverse:focus,
body.light .btn-secondary.reverse:hover,
:root .btn-secondary.reverse:hover,
body.light .btn-secondary.reverse:focus,
:root .btn-secondary.reverse:focus {
  background-color: var(--color-scheme-20);
}
body.dark .btn-primary.reverse:hover, body.dark .btn-primary.reverse:focus,
body.dark .btn-secondary.reverse:hover,
body.dark .btn-secondary.reverse:focus {
  background-color: var(--color-scheme-30);
}
body.light .btn-primary.reverse:hover, :root .btn-primary.reverse:hover, body.light .btn-primary.reverse:focus, :root .btn-primary.reverse:focus,
body.light .btn-secondary.reverse:hover,
:root .btn-secondary.reverse:hover,
body.light .btn-secondary.reverse:focus,
:root .btn-secondary.reverse:focus {
  border-color: var(--transparent);
}
body.dark .btn-primary.reverse:hover, body.dark .btn-primary.reverse:focus,
body.dark .btn-secondary.reverse:hover,
body.dark .btn-secondary.reverse:focus {
  border-color: var(--transparent);
}
body.light .btn-primary.reverse:hover, :root .btn-primary.reverse:hover, body.light .btn-primary.reverse:focus, :root .btn-primary.reverse:focus,
body.light .btn-secondary.reverse:hover,
:root .btn-secondary.reverse:hover,
body.light .btn-secondary.reverse:focus,
:root .btn-secondary.reverse:focus {
  color: var(--black);
}
body.dark .btn-primary.reverse:hover, body.dark .btn-primary.reverse:focus,
body.dark .btn-secondary.reverse:hover,
body.dark .btn-secondary.reverse:focus {
  color: var(--white);
}
body.light .btn-primary.outline, :root .btn-primary.outline,
body.light .btn-secondary.outline,
:root .btn-secondary.outline {
  background-color: var(--color-scheme-05);
}
body.dark .btn-primary.outline,
body.dark .btn-secondary.outline {
  background-color: var(--color-scheme-10);
}
.btn-primary.outline,
.btn-secondary.outline {
  border: 1px solid transparent;
}
body.light .btn-primary.outline, :root .btn-primary.outline,
body.light .btn-secondary.outline,
:root .btn-secondary.outline {
  border-color: var(--color-scheme-10);
}
body.dark .btn-primary.outline,
body.dark .btn-secondary.outline {
  border-color: var(--color-scheme-20);
}
body.light .btn-primary.outline, :root .btn-primary.outline,
body.light .btn-secondary.outline,
:root .btn-secondary.outline {
  color: var(--black-alpha-80);
}
body.dark .btn-primary.outline,
body.dark .btn-secondary.outline {
  color: var(--white-alpha-80);
}
body.light .btn-primary.outline:hover, :root .btn-primary.outline:hover, body.light .btn-primary.outline:focus, :root .btn-primary.outline:focus,
body.light .btn-secondary.outline:hover,
:root .btn-secondary.outline:hover,
body.light .btn-secondary.outline:focus,
:root .btn-secondary.outline:focus {
  background-color: var(--color-scheme-10);
}
body.dark .btn-primary.outline:hover, body.dark .btn-primary.outline:focus,
body.dark .btn-secondary.outline:hover,
body.dark .btn-secondary.outline:focus {
  background-color: var(--color-scheme-20);
}
body.light .btn-primary.outline:hover, :root .btn-primary.outline:hover, body.light .btn-primary.outline:focus, :root .btn-primary.outline:focus,
body.light .btn-secondary.outline:hover,
:root .btn-secondary.outline:hover,
body.light .btn-secondary.outline:focus,
:root .btn-secondary.outline:focus {
  color: var(--black);
}
body.dark .btn-primary.outline:hover, body.dark .btn-primary.outline:focus,
body.dark .btn-secondary.outline:hover,
body.dark .btn-secondary.outline:focus {
  color: var(--white);
}

body.light .btn-accent, :root .btn-accent {
  background-color: var(--primary-alpha-80);
}
body.dark .btn-accent {
  background-color: var(--primary-alpha-80);
}
.btn-accent {
  border: 1px solid transparent;
}
body.light .btn-accent, :root .btn-accent {
  border-color: var(--transparent);
}
body.dark .btn-accent {
  border-color: var(--transparent);
}
body.light .btn-accent, :root .btn-accent {
  color: var(--white);
}
body.dark .btn-accent {
  color: var(--white);
}
body.light .btn-accent:hover, :root .btn-accent:hover, body.light .btn-accent:focus, :root .btn-accent:focus {
  background-color: var(--primary);
}
body.dark .btn-accent:hover, body.dark .btn-accent:focus {
  background-color: var(--primary);
}
body.light .btn-accent:hover, :root .btn-accent:hover, body.light .btn-accent:focus, :root .btn-accent:focus {
  border-color: var(--transparent);
}
body.dark .btn-accent:hover, body.dark .btn-accent:focus {
  border-color: var(--transparent);
}
body.light .btn-accent:hover, :root .btn-accent:hover, body.light .btn-accent:focus, :root .btn-accent:focus {
  color: var(--white);
}
body.dark .btn-accent:hover, body.dark .btn-accent:focus {
  color: var(--white);
}
body.light .btn-accent.reverse, :root .btn-accent.reverse {
  background-color: var(--primary-alpha-10);
}
body.dark .btn-accent.reverse {
  background-color: var(--primary-alpha-20);
}
body.light .btn-accent.reverse, :root .btn-accent.reverse {
  border-color: var(--transparent);
}
body.dark .btn-accent.reverse {
  border-color: var(--transparent);
}
body.light .btn-accent.reverse, :root .btn-accent.reverse {
  color: var(--black-alpha-80);
}
body.dark .btn-accent.reverse {
  color: var(--white-alpha-80);
}
body.light .btn-accent.reverse:hover, :root .btn-accent.reverse:hover, body.light .btn-accent.reverse:focus, :root .btn-accent.reverse:focus {
  background-color: var(--primary-alpha-20);
}
body.dark .btn-accent.reverse:hover, body.dark .btn-accent.reverse:focus {
  background-color: var(--primary-alpha-30);
}
body.light .btn-accent.reverse:hover, :root .btn-accent.reverse:hover, body.light .btn-accent.reverse:focus, :root .btn-accent.reverse:focus {
  border-color: var(--transparent);
}
body.dark .btn-accent.reverse:hover, body.dark .btn-accent.reverse:focus {
  border-color: var(--transparent);
}
body.light .btn-accent.reverse:hover, :root .btn-accent.reverse:hover, body.light .btn-accent.reverse:focus, :root .btn-accent.reverse:focus {
  color: var(--black);
}
body.dark .btn-accent.reverse:hover, body.dark .btn-accent.reverse:focus {
  color: var(--white);
}
body.light .btn-accent.outline, :root .btn-accent.outline {
  background-color: var(--primary-alpha-05);
}
body.dark .btn-accent.outline {
  background-color: var(--primary-alpha-10);
}
.btn-accent.outline {
  border: 1px solid transparent;
}
body.light .btn-accent.outline, :root .btn-accent.outline {
  border-color: var(--primary-alpha-10);
}
body.dark .btn-accent.outline {
  border-color: var(--primary-alpha-20);
}
body.light .btn-accent.outline, :root .btn-accent.outline {
  color: var(--black-alpha-80);
}
body.dark .btn-accent.outline {
  color: var(--white-alpha-80);
}
body.light .btn-accent.outline:hover, :root .btn-accent.outline:hover, body.light .btn-accent.outline:focus, :root .btn-accent.outline:focus {
  background-color: var(--primary-alpha-10);
}
body.dark .btn-accent.outline:hover, body.dark .btn-accent.outline:focus {
  background-color: var(--primary-alpha-20);
}
body.light .btn-accent.outline:hover, :root .btn-accent.outline:hover, body.light .btn-accent.outline:focus, :root .btn-accent.outline:focus {
  color: var(--black);
}
body.dark .btn-accent.outline:hover, body.dark .btn-accent.outline:focus {
  color: var(--white);
}

body.light .btn-purple, :root .btn-purple {
  background-color: var(--purple-60);
}
body.dark .btn-purple {
  background-color: var(--purple-alpha-80);
}
.btn-purple {
  border: 1px solid transparent;
}
body.light .btn-purple, :root .btn-purple {
  border-color: var(--transparent);
}
body.dark .btn-purple {
  border-color: var(--transparent);
}
body.light .btn-purple, :root .btn-purple {
  color: var(--white);
}
body.dark .btn-purple {
  color: var(--white);
}
body.light .btn-purple:hover, :root .btn-purple:hover, body.light .btn-purple:focus, :root .btn-purple:focus {
  background-color: var(--purple-70);
}
body.dark .btn-purple:hover, body.dark .btn-purple:focus {
  background-color: var(--purple);
}
body.light .btn-purple:hover, :root .btn-purple:hover, body.light .btn-purple:focus, :root .btn-purple:focus {
  border-color: var(--transparent);
}
body.dark .btn-purple:hover, body.dark .btn-purple:focus {
  border-color: var(--transparent);
}
body.light .btn-purple:hover, :root .btn-purple:hover, body.light .btn-purple:focus, :root .btn-purple:focus {
  color: var(--white);
}
body.dark .btn-purple:hover, body.dark .btn-purple:focus {
  color: var(--white);
}
body.light .btn-purple.reverse, :root .btn-purple.reverse {
  background-color: var(--purple-alpha-10);
}
body.dark .btn-purple.reverse {
  background-color: var(--purple-alpha-20);
}
body.light .btn-purple.reverse, :root .btn-purple.reverse {
  border-color: var(--transparent);
}
body.dark .btn-purple.reverse {
  border-color: var(--transparent);
}
body.light .btn-purple.reverse, :root .btn-purple.reverse {
  color: var(--black-alpha-80);
}
body.dark .btn-purple.reverse {
  color: var(--white-alpha-80);
}
body.light .btn-purple.reverse:hover, :root .btn-purple.reverse:hover, body.light .btn-purple.reverse:focus, :root .btn-purple.reverse:focus {
  background-color: var(--purple-alpha-20);
}
body.dark .btn-purple.reverse:hover, body.dark .btn-purple.reverse:focus {
  background-color: var(--purple-alpha-30);
}
body.light .btn-purple.reverse:hover, :root .btn-purple.reverse:hover, body.light .btn-purple.reverse:focus, :root .btn-purple.reverse:focus {
  border-color: var(--transparent);
}
body.dark .btn-purple.reverse:hover, body.dark .btn-purple.reverse:focus {
  border-color: var(--transparent);
}
body.light .btn-purple.reverse:hover, :root .btn-purple.reverse:hover, body.light .btn-purple.reverse:focus, :root .btn-purple.reverse:focus {
  color: var(--black);
}
body.dark .btn-purple.reverse:hover, body.dark .btn-purple.reverse:focus {
  color: var(--white);
}
body.light .btn-purple.outline, :root .btn-purple.outline {
  background-color: var(--purple-alpha-05);
}
body.dark .btn-purple.outline {
  background-color: var(--purple-alpha-10);
}
.btn-purple.outline {
  border: 1px solid transparent;
}
body.light .btn-purple.outline, :root .btn-purple.outline {
  border-color: var(--purple-alpha-10);
}
body.dark .btn-purple.outline {
  border-color: var(--purple-alpha-20);
}
body.light .btn-purple.outline, :root .btn-purple.outline {
  color: var(--black-alpha-80);
}
body.dark .btn-purple.outline {
  color: var(--white-alpha-80);
}
body.light .btn-purple.outline:hover, :root .btn-purple.outline:hover, body.light .btn-purple.outline:focus, :root .btn-purple.outline:focus {
  background-color: var(--purple-alpha-10);
}
body.dark .btn-purple.outline:hover, body.dark .btn-purple.outline:focus {
  background-color: var(--purple-alpha-20);
}
body.light .btn-purple.outline:hover, :root .btn-purple.outline:hover, body.light .btn-purple.outline:focus, :root .btn-purple.outline:focus {
  color: var(--black);
}
body.dark .btn-purple.outline:hover, body.dark .btn-purple.outline:focus {
  color: var(--white);
}

body.light .btn-danger, :root .btn-danger {
  background-color: var(--danger-alpha-80);
}
body.dark .btn-danger {
  background-color: var(--danger-alpha-80);
}
.btn-danger {
  border: 1px solid transparent;
}
body.light .btn-danger, :root .btn-danger {
  border-color: var(--transparent);
}
body.dark .btn-danger {
  border-color: var(--transparent);
}
body.light .btn-danger, :root .btn-danger {
  color: var(--white);
}
body.dark .btn-danger {
  color: var(--white);
}
body.light .btn-danger:hover, :root .btn-danger:hover, body.light .btn-danger:focus, :root .btn-danger:focus {
  background-color: var(--danger);
}
body.dark .btn-danger:hover, body.dark .btn-danger:focus {
  background-color: var(--danger);
}
body.light .btn-danger:hover, :root .btn-danger:hover, body.light .btn-danger:focus, :root .btn-danger:focus {
  border-color: var(--transparent);
}
body.dark .btn-danger:hover, body.dark .btn-danger:focus {
  border-color: var(--transparent);
}
body.light .btn-danger:hover, :root .btn-danger:hover, body.light .btn-danger:focus, :root .btn-danger:focus {
  color: var(--white);
}
body.dark .btn-danger:hover, body.dark .btn-danger:focus {
  color: var(--white);
}
body.light .btn-danger.reverse, :root .btn-danger.reverse {
  background-color: var(--danger-alpha-10);
}
body.dark .btn-danger.reverse {
  background-color: var(--danger-alpha-20);
}
body.light .btn-danger.reverse, :root .btn-danger.reverse {
  border-color: var(--transparent);
}
body.dark .btn-danger.reverse {
  border-color: var(--transparent);
}
body.light .btn-danger.reverse, :root .btn-danger.reverse {
  color: var(--black-alpha-80);
}
body.dark .btn-danger.reverse {
  color: var(--white-alpha-80);
}
body.light .btn-danger.reverse:hover, :root .btn-danger.reverse:hover, body.light .btn-danger.reverse:focus, :root .btn-danger.reverse:focus {
  background-color: var(--danger-alpha-20);
}
body.dark .btn-danger.reverse:hover, body.dark .btn-danger.reverse:focus {
  background-color: var(--danger-alpha-30);
}
body.light .btn-danger.reverse:hover, :root .btn-danger.reverse:hover, body.light .btn-danger.reverse:focus, :root .btn-danger.reverse:focus {
  border-color: var(--transparent);
}
body.dark .btn-danger.reverse:hover, body.dark .btn-danger.reverse:focus {
  border-color: var(--transparent);
}
body.light .btn-danger.reverse:hover, :root .btn-danger.reverse:hover, body.light .btn-danger.reverse:focus, :root .btn-danger.reverse:focus {
  color: var(--black);
}
body.dark .btn-danger.reverse:hover, body.dark .btn-danger.reverse:focus {
  color: var(--white);
}
body.light .btn-danger.outline, :root .btn-danger.outline {
  background-color: var(--danger-alpha-05);
}
body.dark .btn-danger.outline {
  background-color: var(--danger-alpha-10);
}
.btn-danger.outline {
  border: 1px solid transparent;
}
body.light .btn-danger.outline, :root .btn-danger.outline {
  border-color: var(--danger-alpha-10);
}
body.dark .btn-danger.outline {
  border-color: var(--danger-alpha-20);
}
body.light .btn-danger.outline, :root .btn-danger.outline {
  color: var(--black-alpha-80);
}
body.dark .btn-danger.outline {
  color: var(--white-alpha-80);
}
body.light .btn-danger.outline:hover, :root .btn-danger.outline:hover, body.light .btn-danger.outline:focus, :root .btn-danger.outline:focus {
  background-color: var(--danger-alpha-10);
}
body.dark .btn-danger.outline:hover, body.dark .btn-danger.outline:focus {
  background-color: var(--danger-alpha-20);
}
body.light .btn-danger.outline:hover, :root .btn-danger.outline:hover, body.light .btn-danger.outline:focus, :root .btn-danger.outline:focus {
  color: var(--black);
}
body.dark .btn-danger.outline:hover, body.dark .btn-danger.outline:focus {
  color: var(--white);
}

body.light .btn-default, :root .btn-default {
  background-color: var(--black-alpha-10);
}
body.dark .btn-default {
  background-color: var(--white-alpha-20);
}
.btn-default {
  border: 1px solid transparent;
}
body.light .btn-default, :root .btn-default {
  color: var(--black);
}
body.dark .btn-default {
  color: var(--white);
}
body.light .btn-default.only-hover, :root .btn-default.only-hover {
  background-color: var(--transparent);
}
body.dark .btn-default.only-hover {
  background-color: var(--transparent);
}
body.light .btn-default.only-hover, :root .btn-default.only-hover {
  border-color: var(--transparent);
}
body.dark .btn-default.only-hover {
  border-color: var(--transparent);
}
body.light .btn-default:hover, :root .btn-default:hover, body.light .btn-default:focus, :root .btn-default:focus {
  background-color: var(--black-alpha-20);
}
body.dark .btn-default:hover, body.dark .btn-default:focus {
  background-color: var(--white-alpha-30);
}
body.light .btn-default:hover, :root .btn-default:hover, body.light .btn-default:focus, :root .btn-default:focus {
  color: var(--black);
}
body.dark .btn-default:hover, body.dark .btn-default:focus {
  color: var(--white);
}

body.light .btn-basic, :root .btn-basic {
  background-color: var(--black-alpha-80);
}
body.dark .btn-basic {
  background-color: var(--white-alpha-80);
}
.btn-basic {
  border: 1px solid transparent;
}
body.light .btn-basic, :root .btn-basic {
  color: var(--white);
}
body.dark .btn-basic {
  color: var(--black);
}
body.light .btn-basic:hover, :root .btn-basic:hover, body.light .btn-basic:focus, :root .btn-basic:focus {
  background-color: var(--black);
}
body.dark .btn-basic:hover, body.dark .btn-basic:focus {
  background-color: var(--white);
}
body.light .btn-basic:hover, :root .btn-basic:hover, body.light .btn-basic:focus, :root .btn-basic:focus {
  color: var(--white);
}
body.dark .btn-basic:hover, body.dark .btn-basic:focus {
  color: var(--black);
}
body.light .btn-basic.reverse, :root .btn-basic.reverse {
  background-color: var(--black-alpha-10);
}
body.dark .btn-basic.reverse {
  background-color: var(--white-alpha-20);
}
body.light .btn-basic.reverse, :root .btn-basic.reverse {
  color: var(--black);
}
body.dark .btn-basic.reverse {
  color: var(--white);
}
body.light .btn-basic.reverse.only-hover, :root .btn-basic.reverse.only-hover {
  background-color: var(--transparent);
}
body.dark .btn-basic.reverse.only-hover {
  background-color: var(--transparent);
}
body.light .btn-basic.reverse.only-hover, :root .btn-basic.reverse.only-hover {
  border-color: var(--transparent);
}
body.dark .btn-basic.reverse.only-hover {
  border-color: var(--transparent);
}
body.light .btn-basic.reverse:hover, :root .btn-basic.reverse:hover, body.light .btn-basic.reverse:focus, :root .btn-basic.reverse:focus {
  background-color: var(--black-alpha-20);
}
body.dark .btn-basic.reverse:hover, body.dark .btn-basic.reverse:focus {
  background-color: var(--white-alpha-30);
}
body.light .btn-basic.reverse:hover, :root .btn-basic.reverse:hover, body.light .btn-basic.reverse:focus, :root .btn-basic.reverse:focus {
  color: var(--black);
}
body.dark .btn-basic.reverse:hover, body.dark .btn-basic.reverse:focus {
  color: var(--white);
}
body.light .btn-basic.reverse i.btn-icon, :root .btn-basic.reverse i.btn-icon {
  color: var(--black);
}
body.dark .btn-basic.reverse i.btn-icon {
  color: var(--white);
}
body.light .btn-basic.outline, :root .btn-basic.outline {
  background-color: var(--black-alpha-05);
}
body.dark .btn-basic.outline {
  background-color: var(--white-alpha-05);
}
.btn-basic.outline {
  border: 1px solid transparent;
}
body.light .btn-basic.outline, :root .btn-basic.outline {
  border-color: var(--black-alpha-10);
}
body.dark .btn-basic.outline {
  border-color: var(--white-alpha-10);
}
body.light .btn-basic.outline, :root .btn-basic.outline {
  color: var(--black);
}
body.dark .btn-basic.outline {
  color: var(--white);
}
body.light .btn-basic.outline:hover, :root .btn-basic.outline:hover, body.light .btn-basic.outline:focus, :root .btn-basic.outline:focus {
  background-color: var(--black-alpha-10);
}
body.dark .btn-basic.outline:hover, body.dark .btn-basic.outline:focus {
  background-color: var(--white-alpha-10);
}
body.light .btn-basic.outline:hover, :root .btn-basic.outline:hover, body.light .btn-basic.outline:focus, :root .btn-basic.outline:focus {
  color: var(--black);
}
body.dark .btn-basic.outline:hover, body.dark .btn-basic.outline:focus {
  color: var(--white);
}
body.light .btn-basic.outline i.btn-icon, :root .btn-basic.outline i.btn-icon {
  color: var(--black);
}
body.dark .btn-basic.outline i.btn-icon {
  color: var(--white);
}
.btn-basic.no-dropdown-icon::after {
  display: none;
}
body.light .btn-basic i.btn-icon, :root .btn-basic i.btn-icon {
  color: var(--white);
}
body.dark .btn-basic i.btn-icon {
  color: var(--black);
}
.btn-basic.btn-md {
  font-size: 1.1rem;
  width: 35px;
  height: 35px;
}
.btn-basic:not(:has(span)) {
  padding-left: 12px;
  padding-right: 12px;
}
.btn-basic.btn-icon-only {
  width: 35px;
  height: 35px;
}
.btn-basic.btn-kb {
  width: 25px;
  height: 25px;
}
body.light .btn-basic.btn-kb, :root .btn-basic.btn-kb {
  color: var(--black-alpha-80);
}
body.dark .btn-basic.btn-kb {
  color: var(--white-alpha-80);
}
body.light .btn-basic.btn-kb:hover, :root .btn-basic.btn-kb:hover, body.light .btn-basic.btn-kb:focus, :root .btn-basic.btn-kb:focus {
  color: var(--black);
}
body.dark .btn-basic.btn-kb:hover, body.dark .btn-basic.btn-kb:focus {
  color: var(--white);
}

body.light .text-reveal-button, :root .text-reveal-button {
  background-color: var(--black-alpha-05);
}
body.dark .text-reveal-button {
  background-color: var(--white-alpha-10);
}
body.light .text-reveal-button, :root .text-reveal-button {
  color: var(--black);
}
body.dark .text-reveal-button {
  color: var(--white);
}
.text-reveal-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 40px;
  padding: 0.5rem;
  margin: 0 0.3rem;
  cursor: pointer;
  transition: all 0.35s ease;
  font-weight: 700;
}
.text-reveal-button.add-site {
  color: var(--lt-success-70-dk-success-40);
}
.text-reveal-button.add-site:hover, .text-reveal-button.add-site:focus {
  color: var(--lt-success-80-dk-success-60);
}
.text-reveal-button i {
  font-size: 1.1em;
  min-width: 20px;
  text-align: center;
  margin-right: 5px;
}
.text-reveal-button i.fa-2-5x {
  font-size: 1.5em;
  margin-right: 10px;
}
body.light .text-reveal-button .reveal-text, :root .text-reveal-button .reveal-text {
  color: var(--black);
}
body.dark .text-reveal-button .reveal-text {
  color: var(--white);
}
.text-reveal-button .reveal-text {
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  display: inline-block;
  font-size: 0.85em;
}
.text-reveal-button:not(.disabled):hover, .text-reveal-button:not(.disabled):focus {
  background: var(--gradient-primary-50-accent-50);
  border-color: var(--gradient-primary-50-accent-50);
}
.text-reveal-button:not(.disabled):hover i, .text-reveal-button:not(.disabled):focus i {
  color: var(--lt-dk-white);
}
.text-reveal-button:not(.disabled):hover .reveal-text, .text-reveal-button:not(.disabled):focus .reveal-text {
  color: var(--lt-dk-white);
}
.text-reveal-button:not(.disabled).view-active {
  background-color: var(--lt-neutral-60-dk-neutral-30);
  border-color: var(--lt-neutral-60-dk-neutral-30);
  color: var(--lt-white-dk-primary-90);
}
.text-reveal-button:not(.disabled).view-active .reveal-text,
.text-reveal-button:not(.disabled).view-active i {
  color: var(--lt-white-dk-primary-90);
}
.text-reveal-button.view-active {
  cursor: initial;
  background-color: var(--lt-neutral-10-dk-white);
}
.text-reveal-button.view-active .reveal-text,
.text-reveal-button.view-active i {
  color: var(--theme-primary-text);
}
.text-reveal-button.view-active:hover, .text-reveal-button.view-active:focus {
  background: var(--lt-neutral-60-dk-neutral-30);
  border-color: var(--lt-neutral-60-dk-neutral-30);
  color: var(--lt-white-dk-primary-90);
}
.text-reveal-button.view-active:hover .reveal-text,
.text-reveal-button.view-active:hover i, .text-reveal-button.view-active:focus .reveal-text,
.text-reveal-button.view-active:focus i {
  color: var(--lt-white-dk-primary-90);
}
.text-reveal-button.filter-options i {
  font-size: 1.1em;
  font-weight: 400;
}
.text-reveal-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.is-clickable {
  cursor: pointer;
}

.click-to-copy,
.click-to-copy-data {
  cursor: pointer;
}
.click-to-copy::after,
.click-to-copy-data::after {
  font: var(--fa-font-regular);
  content: "\f0c5";
  padding: 5px;
  margin-left: 5px;
  border-radius: 30px;
  font-size: 0.9em;
  width: 30px;
  height: 30px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
body.light .click-to-copy::after, :root .click-to-copy::after,
body.light .click-to-copy-data::after,
:root .click-to-copy-data::after {
  background-color: var(--black-alpha-10);
}
body.dark .click-to-copy::after,
body.dark .click-to-copy-data::after {
  background-color: var(--white-alpha-20);
}
body.light .click-to-copy::after, :root .click-to-copy::after,
body.light .click-to-copy-data::after,
:root .click-to-copy-data::after {
  color: var(--black);
}
body.dark .click-to-copy::after,
body.dark .click-to-copy-data::after {
  color: var(--white);
}
body.light .click-to-copy:hover::after, :root .click-to-copy:hover::after, body.light .click-to-copy:focus::after, :root .click-to-copy:focus::after,
body.light .click-to-copy-data:hover::after,
:root .click-to-copy-data:hover::after,
body.light .click-to-copy-data:focus::after,
:root .click-to-copy-data:focus::after {
  background-color: var(--black-alpha-20);
}
body.dark .click-to-copy:hover::after, body.dark .click-to-copy:focus::after,
body.dark .click-to-copy-data:hover::after,
body.dark .click-to-copy-data:focus::after {
  background-color: var(--white-alpha-30);
}
body.light .click-to-copy:hover::after, :root .click-to-copy:hover::after, body.light .click-to-copy:focus::after, :root .click-to-copy:focus::after,
body.light .click-to-copy-data:hover::after,
:root .click-to-copy-data:hover::after,
body.light .click-to-copy-data:focus::after,
:root .click-to-copy-data:focus::after {
  color: var(--black);
}
body.dark .click-to-copy:hover::after, body.dark .click-to-copy:focus::after,
body.dark .click-to-copy-data:hover::after,
body.dark .click-to-copy-data:focus::after {
  color: var(--white);
}

.mpcp-app #primary-navigation .back-to-site-menu,
.mpcp-app #primary-navigation .back-to-collaborator-menu,
.mpcp-app #primary-navigation .back-to-tag-menu,
.mpcp-app #primary-navigation .back-to-tools-menu,
.mpcp-app #primary-navigation .back-to-settings-menu,
.mpcp-app #primary-navigation .back-to-billing-menu,
.mpcp-app #primary-navigation .back-to-design-menu,
.mpcp-app #primary-navigation .back-to-main-menu {
  margin-bottom: 10px;
}
body.light .mpcp-app #primary-navigation .back-to-site-menu .nav-link, :root .mpcp-app #primary-navigation .back-to-site-menu .nav-link,
body.light .mpcp-app #primary-navigation .back-to-collaborator-menu .nav-link,
:root .mpcp-app #primary-navigation .back-to-collaborator-menu .nav-link,
body.light .mpcp-app #primary-navigation .back-to-tag-menu .nav-link,
:root .mpcp-app #primary-navigation .back-to-tag-menu .nav-link,
body.light .mpcp-app #primary-navigation .back-to-tools-menu .nav-link,
:root .mpcp-app #primary-navigation .back-to-tools-menu .nav-link,
body.light .mpcp-app #primary-navigation .back-to-settings-menu .nav-link,
:root .mpcp-app #primary-navigation .back-to-settings-menu .nav-link,
body.light .mpcp-app #primary-navigation .back-to-billing-menu .nav-link,
:root .mpcp-app #primary-navigation .back-to-billing-menu .nav-link,
body.light .mpcp-app #primary-navigation .back-to-design-menu .nav-link,
:root .mpcp-app #primary-navigation .back-to-design-menu .nav-link,
body.light .mpcp-app #primary-navigation .back-to-main-menu .nav-link,
:root .mpcp-app #primary-navigation .back-to-main-menu .nav-link {
  background-color: var(--black-alpha-05);
}
body.dark .mpcp-app #primary-navigation .back-to-site-menu .nav-link,
body.dark .mpcp-app #primary-navigation .back-to-collaborator-menu .nav-link,
body.dark .mpcp-app #primary-navigation .back-to-tag-menu .nav-link,
body.dark .mpcp-app #primary-navigation .back-to-tools-menu .nav-link,
body.dark .mpcp-app #primary-navigation .back-to-settings-menu .nav-link,
body.dark .mpcp-app #primary-navigation .back-to-billing-menu .nav-link,
body.dark .mpcp-app #primary-navigation .back-to-design-menu .nav-link,
body.dark .mpcp-app #primary-navigation .back-to-main-menu .nav-link {
  background-color: var(--white-alpha-05);
}
.mpcp-app #primary-navigation .back-to-site-menu .nav-link,
.mpcp-app #primary-navigation .back-to-collaborator-menu .nav-link,
.mpcp-app #primary-navigation .back-to-tag-menu .nav-link,
.mpcp-app #primary-navigation .back-to-tools-menu .nav-link,
.mpcp-app #primary-navigation .back-to-settings-menu .nav-link,
.mpcp-app #primary-navigation .back-to-billing-menu .nav-link,
.mpcp-app #primary-navigation .back-to-design-menu .nav-link,
.mpcp-app #primary-navigation .back-to-main-menu .nav-link {
  border: 1px solid transparent;
}
body.light .mpcp-app #primary-navigation .back-to-site-menu .nav-link, :root .mpcp-app #primary-navigation .back-to-site-menu .nav-link,
body.light .mpcp-app #primary-navigation .back-to-collaborator-menu .nav-link,
:root .mpcp-app #primary-navigation .back-to-collaborator-menu .nav-link,
body.light .mpcp-app #primary-navigation .back-to-tag-menu .nav-link,
:root .mpcp-app #primary-navigation .back-to-tag-menu .nav-link,
body.light .mpcp-app #primary-navigation .back-to-tools-menu .nav-link,
:root .mpcp-app #primary-navigation .back-to-tools-menu .nav-link,
body.light .mpcp-app #primary-navigation .back-to-settings-menu .nav-link,
:root .mpcp-app #primary-navigation .back-to-settings-menu .nav-link,
body.light .mpcp-app #primary-navigation .back-to-billing-menu .nav-link,
:root .mpcp-app #primary-navigation .back-to-billing-menu .nav-link,
body.light .mpcp-app #primary-navigation .back-to-design-menu .nav-link,
:root .mpcp-app #primary-navigation .back-to-design-menu .nav-link,
body.light .mpcp-app #primary-navigation .back-to-main-menu .nav-link,
:root .mpcp-app #primary-navigation .back-to-main-menu .nav-link {
  border-color: var(--black-alpha-10);
}
body.dark .mpcp-app #primary-navigation .back-to-site-menu .nav-link,
body.dark .mpcp-app #primary-navigation .back-to-collaborator-menu .nav-link,
body.dark .mpcp-app #primary-navigation .back-to-tag-menu .nav-link,
body.dark .mpcp-app #primary-navigation .back-to-tools-menu .nav-link,
body.dark .mpcp-app #primary-navigation .back-to-settings-menu .nav-link,
body.dark .mpcp-app #primary-navigation .back-to-billing-menu .nav-link,
body.dark .mpcp-app #primary-navigation .back-to-design-menu .nav-link,
body.dark .mpcp-app #primary-navigation .back-to-main-menu .nav-link {
  border-color: var(--white-alpha-10);
}
body.light .mpcp-app #primary-navigation .back-to-site-menu .nav-link, :root .mpcp-app #primary-navigation .back-to-site-menu .nav-link,
body.light .mpcp-app #primary-navigation .back-to-collaborator-menu .nav-link,
:root .mpcp-app #primary-navigation .back-to-collaborator-menu .nav-link,
body.light .mpcp-app #primary-navigation .back-to-tag-menu .nav-link,
:root .mpcp-app #primary-navigation .back-to-tag-menu .nav-link,
body.light .mpcp-app #primary-navigation .back-to-tools-menu .nav-link,
:root .mpcp-app #primary-navigation .back-to-tools-menu .nav-link,
body.light .mpcp-app #primary-navigation .back-to-settings-menu .nav-link,
:root .mpcp-app #primary-navigation .back-to-settings-menu .nav-link,
body.light .mpcp-app #primary-navigation .back-to-billing-menu .nav-link,
:root .mpcp-app #primary-navigation .back-to-billing-menu .nav-link,
body.light .mpcp-app #primary-navigation .back-to-design-menu .nav-link,
:root .mpcp-app #primary-navigation .back-to-design-menu .nav-link,
body.light .mpcp-app #primary-navigation .back-to-main-menu .nav-link,
:root .mpcp-app #primary-navigation .back-to-main-menu .nav-link {
  color: var(--black);
}
body.dark .mpcp-app #primary-navigation .back-to-site-menu .nav-link,
body.dark .mpcp-app #primary-navigation .back-to-collaborator-menu .nav-link,
body.dark .mpcp-app #primary-navigation .back-to-tag-menu .nav-link,
body.dark .mpcp-app #primary-navigation .back-to-tools-menu .nav-link,
body.dark .mpcp-app #primary-navigation .back-to-settings-menu .nav-link,
body.dark .mpcp-app #primary-navigation .back-to-billing-menu .nav-link,
body.dark .mpcp-app #primary-navigation .back-to-design-menu .nav-link,
body.dark .mpcp-app #primary-navigation .back-to-main-menu .nav-link {
  color: var(--white);
}
body.light .mpcp-app #primary-navigation .back-to-site-menu .nav-link:hover, :root .mpcp-app #primary-navigation .back-to-site-menu .nav-link:hover, body.light .mpcp-app #primary-navigation .back-to-site-menu .nav-link:focus, :root .mpcp-app #primary-navigation .back-to-site-menu .nav-link:focus,
body.light .mpcp-app #primary-navigation .back-to-collaborator-menu .nav-link:hover,
:root .mpcp-app #primary-navigation .back-to-collaborator-menu .nav-link:hover,
body.light .mpcp-app #primary-navigation .back-to-collaborator-menu .nav-link:focus,
:root .mpcp-app #primary-navigation .back-to-collaborator-menu .nav-link:focus,
body.light .mpcp-app #primary-navigation .back-to-tag-menu .nav-link:hover,
:root .mpcp-app #primary-navigation .back-to-tag-menu .nav-link:hover,
body.light .mpcp-app #primary-navigation .back-to-tag-menu .nav-link:focus,
:root .mpcp-app #primary-navigation .back-to-tag-menu .nav-link:focus,
body.light .mpcp-app #primary-navigation .back-to-tools-menu .nav-link:hover,
:root .mpcp-app #primary-navigation .back-to-tools-menu .nav-link:hover,
body.light .mpcp-app #primary-navigation .back-to-tools-menu .nav-link:focus,
:root .mpcp-app #primary-navigation .back-to-tools-menu .nav-link:focus,
body.light .mpcp-app #primary-navigation .back-to-settings-menu .nav-link:hover,
:root .mpcp-app #primary-navigation .back-to-settings-menu .nav-link:hover,
body.light .mpcp-app #primary-navigation .back-to-settings-menu .nav-link:focus,
:root .mpcp-app #primary-navigation .back-to-settings-menu .nav-link:focus,
body.light .mpcp-app #primary-navigation .back-to-billing-menu .nav-link:hover,
:root .mpcp-app #primary-navigation .back-to-billing-menu .nav-link:hover,
body.light .mpcp-app #primary-navigation .back-to-billing-menu .nav-link:focus,
:root .mpcp-app #primary-navigation .back-to-billing-menu .nav-link:focus,
body.light .mpcp-app #primary-navigation .back-to-design-menu .nav-link:hover,
:root .mpcp-app #primary-navigation .back-to-design-menu .nav-link:hover,
body.light .mpcp-app #primary-navigation .back-to-design-menu .nav-link:focus,
:root .mpcp-app #primary-navigation .back-to-design-menu .nav-link:focus,
body.light .mpcp-app #primary-navigation .back-to-main-menu .nav-link:hover,
:root .mpcp-app #primary-navigation .back-to-main-menu .nav-link:hover,
body.light .mpcp-app #primary-navigation .back-to-main-menu .nav-link:focus,
:root .mpcp-app #primary-navigation .back-to-main-menu .nav-link:focus {
  background-color: var(--black-alpha-10);
}
body.dark .mpcp-app #primary-navigation .back-to-site-menu .nav-link:hover, body.dark .mpcp-app #primary-navigation .back-to-site-menu .nav-link:focus,
body.dark .mpcp-app #primary-navigation .back-to-collaborator-menu .nav-link:hover,
body.dark .mpcp-app #primary-navigation .back-to-collaborator-menu .nav-link:focus,
body.dark .mpcp-app #primary-navigation .back-to-tag-menu .nav-link:hover,
body.dark .mpcp-app #primary-navigation .back-to-tag-menu .nav-link:focus,
body.dark .mpcp-app #primary-navigation .back-to-tools-menu .nav-link:hover,
body.dark .mpcp-app #primary-navigation .back-to-tools-menu .nav-link:focus,
body.dark .mpcp-app #primary-navigation .back-to-settings-menu .nav-link:hover,
body.dark .mpcp-app #primary-navigation .back-to-settings-menu .nav-link:focus,
body.dark .mpcp-app #primary-navigation .back-to-billing-menu .nav-link:hover,
body.dark .mpcp-app #primary-navigation .back-to-billing-menu .nav-link:focus,
body.dark .mpcp-app #primary-navigation .back-to-design-menu .nav-link:hover,
body.dark .mpcp-app #primary-navigation .back-to-design-menu .nav-link:focus,
body.dark .mpcp-app #primary-navigation .back-to-main-menu .nav-link:hover,
body.dark .mpcp-app #primary-navigation .back-to-main-menu .nav-link:focus {
  background-color: var(--white-alpha-10);
}
body.light .mpcp-app #primary-navigation .back-to-site-menu .nav-link:hover, :root .mpcp-app #primary-navigation .back-to-site-menu .nav-link:hover, body.light .mpcp-app #primary-navigation .back-to-site-menu .nav-link:focus, :root .mpcp-app #primary-navigation .back-to-site-menu .nav-link:focus,
body.light .mpcp-app #primary-navigation .back-to-collaborator-menu .nav-link:hover,
:root .mpcp-app #primary-navigation .back-to-collaborator-menu .nav-link:hover,
body.light .mpcp-app #primary-navigation .back-to-collaborator-menu .nav-link:focus,
:root .mpcp-app #primary-navigation .back-to-collaborator-menu .nav-link:focus,
body.light .mpcp-app #primary-navigation .back-to-tag-menu .nav-link:hover,
:root .mpcp-app #primary-navigation .back-to-tag-menu .nav-link:hover,
body.light .mpcp-app #primary-navigation .back-to-tag-menu .nav-link:focus,
:root .mpcp-app #primary-navigation .back-to-tag-menu .nav-link:focus,
body.light .mpcp-app #primary-navigation .back-to-tools-menu .nav-link:hover,
:root .mpcp-app #primary-navigation .back-to-tools-menu .nav-link:hover,
body.light .mpcp-app #primary-navigation .back-to-tools-menu .nav-link:focus,
:root .mpcp-app #primary-navigation .back-to-tools-menu .nav-link:focus,
body.light .mpcp-app #primary-navigation .back-to-settings-menu .nav-link:hover,
:root .mpcp-app #primary-navigation .back-to-settings-menu .nav-link:hover,
body.light .mpcp-app #primary-navigation .back-to-settings-menu .nav-link:focus,
:root .mpcp-app #primary-navigation .back-to-settings-menu .nav-link:focus,
body.light .mpcp-app #primary-navigation .back-to-billing-menu .nav-link:hover,
:root .mpcp-app #primary-navigation .back-to-billing-menu .nav-link:hover,
body.light .mpcp-app #primary-navigation .back-to-billing-menu .nav-link:focus,
:root .mpcp-app #primary-navigation .back-to-billing-menu .nav-link:focus,
body.light .mpcp-app #primary-navigation .back-to-design-menu .nav-link:hover,
:root .mpcp-app #primary-navigation .back-to-design-menu .nav-link:hover,
body.light .mpcp-app #primary-navigation .back-to-design-menu .nav-link:focus,
:root .mpcp-app #primary-navigation .back-to-design-menu .nav-link:focus,
body.light .mpcp-app #primary-navigation .back-to-main-menu .nav-link:hover,
:root .mpcp-app #primary-navigation .back-to-main-menu .nav-link:hover,
body.light .mpcp-app #primary-navigation .back-to-main-menu .nav-link:focus,
:root .mpcp-app #primary-navigation .back-to-main-menu .nav-link:focus {
  color: var(--black);
}
body.dark .mpcp-app #primary-navigation .back-to-site-menu .nav-link:hover, body.dark .mpcp-app #primary-navigation .back-to-site-menu .nav-link:focus,
body.dark .mpcp-app #primary-navigation .back-to-collaborator-menu .nav-link:hover,
body.dark .mpcp-app #primary-navigation .back-to-collaborator-menu .nav-link:focus,
body.dark .mpcp-app #primary-navigation .back-to-tag-menu .nav-link:hover,
body.dark .mpcp-app #primary-navigation .back-to-tag-menu .nav-link:focus,
body.dark .mpcp-app #primary-navigation .back-to-tools-menu .nav-link:hover,
body.dark .mpcp-app #primary-navigation .back-to-tools-menu .nav-link:focus,
body.dark .mpcp-app #primary-navigation .back-to-settings-menu .nav-link:hover,
body.dark .mpcp-app #primary-navigation .back-to-settings-menu .nav-link:focus,
body.dark .mpcp-app #primary-navigation .back-to-billing-menu .nav-link:hover,
body.dark .mpcp-app #primary-navigation .back-to-billing-menu .nav-link:focus,
body.dark .mpcp-app #primary-navigation .back-to-design-menu .nav-link:hover,
body.dark .mpcp-app #primary-navigation .back-to-design-menu .nav-link:focus,
body.dark .mpcp-app #primary-navigation .back-to-main-menu .nav-link:hover,
body.dark .mpcp-app #primary-navigation .back-to-main-menu .nav-link:focus {
  color: var(--white);
}
body.light .mpcp-app #primary-navigation .back-to-site-menu .nav-link i.btn-icon, :root .mpcp-app #primary-navigation .back-to-site-menu .nav-link i.btn-icon,
body.light .mpcp-app #primary-navigation .back-to-collaborator-menu .nav-link i.btn-icon,
:root .mpcp-app #primary-navigation .back-to-collaborator-menu .nav-link i.btn-icon,
body.light .mpcp-app #primary-navigation .back-to-tag-menu .nav-link i.btn-icon,
:root .mpcp-app #primary-navigation .back-to-tag-menu .nav-link i.btn-icon,
body.light .mpcp-app #primary-navigation .back-to-tools-menu .nav-link i.btn-icon,
:root .mpcp-app #primary-navigation .back-to-tools-menu .nav-link i.btn-icon,
body.light .mpcp-app #primary-navigation .back-to-settings-menu .nav-link i.btn-icon,
:root .mpcp-app #primary-navigation .back-to-settings-menu .nav-link i.btn-icon,
body.light .mpcp-app #primary-navigation .back-to-billing-menu .nav-link i.btn-icon,
:root .mpcp-app #primary-navigation .back-to-billing-menu .nav-link i.btn-icon,
body.light .mpcp-app #primary-navigation .back-to-design-menu .nav-link i.btn-icon,
:root .mpcp-app #primary-navigation .back-to-design-menu .nav-link i.btn-icon,
body.light .mpcp-app #primary-navigation .back-to-main-menu .nav-link i.btn-icon,
:root .mpcp-app #primary-navigation .back-to-main-menu .nav-link i.btn-icon {
  color: var(--black);
}
body.dark .mpcp-app #primary-navigation .back-to-site-menu .nav-link i.btn-icon,
body.dark .mpcp-app #primary-navigation .back-to-collaborator-menu .nav-link i.btn-icon,
body.dark .mpcp-app #primary-navigation .back-to-tag-menu .nav-link i.btn-icon,
body.dark .mpcp-app #primary-navigation .back-to-tools-menu .nav-link i.btn-icon,
body.dark .mpcp-app #primary-navigation .back-to-settings-menu .nav-link i.btn-icon,
body.dark .mpcp-app #primary-navigation .back-to-billing-menu .nav-link i.btn-icon,
body.dark .mpcp-app #primary-navigation .back-to-design-menu .nav-link i.btn-icon,
body.dark .mpcp-app #primary-navigation .back-to-main-menu .nav-link i.btn-icon {
  color: var(--white);
}

*,
body {
  font-family: "Inter", sans-serif;
  font-size: 17px;
  line-height: 1.4;
}

.border-success {
  border-color: #22cb1c !important;
}

.body-admin-area {
  min-width: fit-content;
}
.body-admin-area.pressable-checkout {
  background-color: var(--black-alpha-05);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.body-admin-area.pressable-checkout .round-this {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-m);
}
.body-admin-area.pressable-checkout .admin-nav {
  margin-bottom: 0;
  background-color: var(--lt-dk-white);
  width: 100%;
}
.body-admin-area.pressable-checkout .admin-nav .logo {
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("/assets/partners/pressable-logo-v8@2x-f06005d5.png");
}
.body-admin-area.pressable-checkout .admin-nav .admin-nav-inner-top .btn-navbar,
.body-admin-area.pressable-checkout .admin-nav .admin-nav-inner-top .nav-collapse {
  display: none;
}
.body-admin-area.pressable-checkout .checkout-header {
  padding-top: 0;
  padding: 10px 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.body-admin-area.pressable-checkout .checkout-header .logo.brand {
  width: 200px;
  min-height: 40px;
  margin: 8px 0 0 0;
  padding: 0;
}
.body-admin-area.pressable-checkout .checkout-header .secure-checkout {
  margin-left: 20px;
  display: block;
  margin-top: 5px;
  font-weight: 600;
  color: #030121;
}
.body-admin-area.pressable-checkout .partner-header {
  margin: 10px;
}
.body-admin-area.pressable-checkout .partner-header.partner-logo {
  max-width: 300px;
  max-height: 60px;
}
.body-admin-area.pressable-checkout .partner-header.plus {
  font-size: 2em;
  font-weight: bold;
  margin-right: 20px;
}
.body-admin-area.pressable-checkout .navbar .container {
  height: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
}
.body-admin-area.pressable-checkout .navbar .container > a {
  margin: 0 10px;
}

#checkout {
  height: 100%;
  padding-top: 2em;
  padding-bottom: 15em;
}
#checkout .alert {
  padding-left: 1.5em;
}
#checkout .alert-heading {
  font-family: var(--font-secondary);
  font-weight: 700;
}
#checkout .alert-primary {
  background-color: var(--lt-neutral-10-dk-primary-90);
  border: none;
  border-left: 5px solid var(--lt-primary-80-dk-primary-50);
  color: var(--primary-text) !important;
}
#checkout .alert-primary p,
#checkout .alert-primary ul,
#checkout .alert-primary ol {
  color: var(--lt-neutral-70-dk-neutral-20) !important;
}
#checkout .alert-primary h2,
#checkout .alert-primary h3,
#checkout .alert-primary h4,
#checkout .alert-primary h5,
#checkout .alert-primary h6,
#checkout .alert-primary strong,
#checkout .alert-primary i,
#checkout .alert-primary .fw-bold {
  color: var(--lt-primary-80-dk-primary-50) !important;
}
#checkout .alert-primary a:not(.btn):link, #checkout .alert-primary a:not(.btn):active, #checkout .alert-primary a:not(.btn):visited {
  color: var(--lt-primary-90-dk-white) !important;
  font-weight: 600 !important;
}
#checkout .alert-primary a:not(.btn):hover, #checkout .alert-primary a:not(.btn):focus {
  color: var(--primary-hover) !important;
  text-decoration: underline;
}
#checkout .alert-secondary,
#checkout .alert-info {
  background-color: var(--lt-neutral-10-dk-primary-90);
  border: none;
  border-left: 5px solid var(--lt-dk-info-50);
  color: var(--lt-neutral-70-dk-neutral-20) !important;
}
#checkout .alert-secondary p,
#checkout .alert-secondary ul,
#checkout .alert-secondary ol,
#checkout .alert-info p,
#checkout .alert-info ul,
#checkout .alert-info ol {
  color: var(--lt-neutral-70-dk-neutral-20) !important;
}
#checkout .alert-secondary h2,
#checkout .alert-secondary h3,
#checkout .alert-secondary h4,
#checkout .alert-secondary h5,
#checkout .alert-secondary h6,
#checkout .alert-secondary strong,
#checkout .alert-secondary .fw-bold,
#checkout .alert-info h2,
#checkout .alert-info h3,
#checkout .alert-info h4,
#checkout .alert-info h5,
#checkout .alert-info h6,
#checkout .alert-info strong,
#checkout .alert-info .fw-bold {
  color: var(--lt-info-70-dk-info-40) !important;
}
#checkout .alert-secondary i,
#checkout .alert-info i {
  color: var(--lt-dk-info-50);
}
#checkout .alert-secondary a:not(.btn):link, #checkout .alert-secondary a:not(.btn):active, #checkout .alert-secondary a:not(.btn):visited,
#checkout .alert-info a:not(.btn):link,
#checkout .alert-info a:not(.btn):active,
#checkout .alert-info a:not(.btn):visited {
  color: var(--lt-info-70-dk-info-40) !important;
  font-weight: 600 !important;
}
#checkout .alert-secondary a:not(.btn):hover, #checkout .alert-secondary a:not(.btn):focus,
#checkout .alert-info a:not(.btn):hover,
#checkout .alert-info a:not(.btn):focus {
  color: var(--lt-info-80-dk-info-70) !important;
  text-decoration: underline;
}
#checkout .alert-warning {
  background-color: var(--lt-neutral-10-dk-primary-90);
  border: none;
  border-left: 5px solid var(--lt-dk-warning-50);
  color: var(--lt-neutral-70-dk-neutral-20) !important;
}
#checkout .alert-warning p,
#checkout .alert-warning ul,
#checkout .alert-warning ol {
  color: var(--lt-neutral-70-dk-neutral-20) !important;
}
#checkout .alert-warning h2,
#checkout .alert-warning h3,
#checkout .alert-warning h4,
#checkout .alert-warning h5,
#checkout .alert-warning h6,
#checkout .alert-warning strong,
#checkout .alert-warning .fw-bold {
  color: var(--lt-warning-70-dk-warning-40) !important;
}
#checkout .alert-warning i {
  color: var(--lt-dk-warning-50);
}
#checkout .alert-warning a:not(.btn):link, #checkout .alert-warning a:not(.btn):active, #checkout .alert-warning a:not(.btn):visited {
  color: var(--lt-warning-70-dk-warning-40) !important;
  font-weight: 600 !important;
}
#checkout .alert-warning a:not(.btn):hover, #checkout .alert-warning a:not(.btn):focus {
  color: var(--lt-warning-80-dk-white) !important;
  text-decoration: underline;
}
#checkout .alert-success {
  background-color: var(--lt-neutral-10-dk-primary-90);
  border: none;
  border-left: 5px solid var(--lt-dk-success-50);
  color: var(--lt-neutral-70-dk-neutral-20) !important;
}
#checkout .alert-success p,
#checkout .alert-success ul,
#checkout .alert-success ol {
  color: var(--lt-neutral-70-dk-neutral-20) !important;
}
#checkout .alert-success h2,
#checkout .alert-success h3,
#checkout .alert-success h4,
#checkout .alert-success h5,
#checkout .alert-success h6,
#checkout .alert-success strong,
#checkout .alert-success .fw-bold {
  color: var(--lt-success-70-dk-success-40) !important;
}
#checkout .alert-success i {
  color: var(--lt-dk-success-50);
}
#checkout .alert-success a:not(.btn):link, #checkout .alert-success a:not(.btn):active, #checkout .alert-success a:not(.btn):visited {
  color: var(--lt-success-70-dk-success-40) !important;
  font-weight: 600 !important;
}
#checkout .alert-success a:not(.btn):hover, #checkout .alert-success a:not(.btn):focus {
  color: var(--lt-success-80-dk-white) !important;
  text-decoration: underline;
}
#checkout .alert-danger {
  background-color: var(--lt-neutral-10-dk-primary-90);
  border: none;
  border-left: 5px solid var(--lt-error-60-dk-error-40);
  color: var(--lt-neutral-70-dk-neutral-20) !important;
}
#checkout .alert-danger p,
#checkout .alert-danger ul,
#checkout .alert-danger ol {
  color: var(--lt-neutral-70-dk-neutral-20) !important;
}
#checkout .alert-danger h2,
#checkout .alert-danger h3,
#checkout .alert-danger h4,
#checkout .alert-danger h5,
#checkout .alert-danger h6,
#checkout .alert-danger strong,
#checkout .alert-danger i,
#checkout .alert-danger .fw-bold {
  color: var(--lt-error-60-dk-error-40) !important;
}
#checkout .alert-danger a:not(.btn):link, #checkout .alert-danger a:not(.btn):active, #checkout .alert-danger a:not(.btn):visited {
  color: var(--lt-error-60-dk-error-40) !important;
  font-weight: 600 !important;
}
#checkout .alert-danger a:not(.btn):hover, #checkout .alert-danger a:not(.btn):focus {
  color: var(--lt-error-70-dk-white) !important;
  text-decoration: underline;
}
#checkout .alert-purple {
  background-color: var(--lt-neutral-10-dk-primary-90);
  border: none;
  border-left: 5px solid var(--lt-purple-60-dk-purple-40);
  color: var(--lt-neutral-70-dk-neutral-20) !important;
}
#checkout .alert-purple p,
#checkout .alert-purple ul,
#checkout .alert-purple ol {
  color: var(--lt-neutral-70-dk-neutral-20) !important;
}
#checkout .alert-purple h2,
#checkout .alert-purple h3,
#checkout .alert-purple h4,
#checkout .alert-purple h5,
#checkout .alert-purple h6,
#checkout .alert-purple strong,
#checkout .alert-purple i,
#checkout .alert-purple .fw-bold {
  color: var(--lt-purple-60-dk-purple-40) !important;
}
#checkout .alert-purple a:not(.btn):link, #checkout .alert-purple a:not(.btn):active, #checkout .alert-purple a:not(.btn):visited {
  color: var(--lt-purple-60-dk-purple-40) !important;
  font-weight: 600 !important;
}
#checkout .alert-purple a:not(.btn):hover, #checkout .alert-purple a:not(.btn):focus {
  color: var(--lt-purple-70-dk-white) !important;
  text-decoration: underline;
}
#checkout .alert-default {
  background-color: var(--lt-neutral-10-dk-primary-90);
  border: none;
  border-left: 5px solid var(--lt-dk-neutral-50);
  color: var(--lt-neutral-70-dk-neutral-20) !important;
}
#checkout .alert-default p,
#checkout .alert-default ul,
#checkout .alert-default ol {
  color: var(--lt-neutral-70-dk-neutral-20) !important;
}
#checkout .alert-default h2,
#checkout .alert-default h3,
#checkout .alert-default h4,
#checkout .alert-default h5,
#checkout .alert-default h6,
#checkout .alert-default strong,
#checkout .alert-default i,
#checkout .alert-default .fw-bold {
  color: var(--lt-neutral-70-dk-neutral-20) !important;
}
#checkout .alert-default a:not(.btn):link, #checkout .alert-default a:not(.btn):active, #checkout .alert-default a:not(.btn):visited {
  color: var(--lt-neutral-60-dk-white) !important;
  font-weight: 600 !important;
}
#checkout .alert-default a:not(.btn):hover, #checkout .alert-default a:not(.btn):focus {
  color: var(--lt-neutral-80-dk-white) !important;
  text-decoration: underline;
}
#checkout .alert-empty {
  background-color: var(--lt-white-dk-primary-90);
  border: 3px solid var(--lt-neutral-10-dk-primary-90);
  border-left: 5px solid var(--lt-neutral-10-dk-primary-90);
  color: var(--lt-neutral-70-dk-neutral-20) !important;
  border-radius: 10px;
}
#checkout .alert-empty p,
#checkout .alert-empty ul,
#checkout .alert-empty ol,
#checkout .alert-empty h2,
#checkout .alert-empty h3,
#checkout .alert-empty h4,
#checkout .alert-empty h5,
#checkout .alert-empty h6,
#checkout .alert-empty strong,
#checkout .alert-empty i,
#checkout .alert-empty .fw-bold {
  color: var(--lt-neutral-70-dk-neutral-20) !important;
}
#checkout .alert-empty a:not(.btn):link, #checkout .alert-empty a:not(.btn):active, #checkout .alert-empty a:not(.btn):visited {
  color: var(--lt-neutral-60-dk-white) !important;
  font-weight: 600 !important;
}
#checkout .alert-empty a:not(.btn):hover, #checkout .alert-empty a:not(.btn):focus {
  color: var(--lt-neutral-80-dk-white) !important;
  text-decoration: underline;
}
#checkout *,
#checkout :after,
#checkout :before {
  box-sizing: border-box;
}
#checkout h1,
#checkout h2,
#checkout h3,
#checkout h4,
#checkout h5,
#checkout h6,
#checkout p,
#checkout a,
#checkout label,
#checkout input,
#checkout span {
  font-family: "Inter", sans-serif;
  font-size: 1rem;
}
#checkout h1.small,
#checkout h2.small,
#checkout h3.small,
#checkout h4.small,
#checkout h5.small,
#checkout h6.small,
#checkout p.small,
#checkout a.small,
#checkout label.small,
#checkout input.small,
#checkout span.small {
  font-size: 0.875rem;
}
#checkout input {
  box-shadow: none;
  border-color: var(--lt-neutral-20-dk-primary-90) !important;
}
#checkout .input-group-text {
  background-color: var(--lt-neutral-10-dk-primary-90);
  color: var(--lt-neutral-80-dk-white);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
}
#checkout h1 {
  font-size: 2rem;
}
#checkout .promotional-statement span {
  font-size: 0.85em;
  font-style: italic;
  margin-bottom: 25px;
  display: block;
}
#checkout .v4-price {
  display: inline-block;
  font-weight: 900;
  color: var(--lt-dk-white);
  font-family: "Inter", sans-serif;
  font-size: 2.5em;
  margin-top: 0.2em;
}
#checkout .v4-price .v4-price-container {
  font-size: inherit !important;
}
#checkout .v4-price span {
  font-size: 0.4em;
  position: relative;
  top: -20px;
  left: -5px;
  font-weight: 900;
}
#checkout .v4-savings-toggle-wrap {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5em;
}
#checkout .v4-savings-toggle-wrap .v4-savings-statement {
  margin: 0;
  font-size: 0.85em;
}
#checkout .v4-savings-toggle-wrap .v4-savings-statement span {
  font-size: 1em;
}
#checkout .v4-savings-toggle-wrap .pricing-toggle {
  padding: 0;
}
#checkout .v4-savings-toggle-wrap .pricing-toggle .toggle {
  transform: scale(0.5);
  position: relative;
  right: -16px;
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  width: 80px;
  height: 35px;
  border-radius: 100px;
  background-color: #111;
  overflow: hidden;
  box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, 0.05);
}
#checkout .v4-savings-toggle-wrap .pricing-toggle .b {
  display: block;
}
#checkout .v4-savings-toggle-wrap .pricing-toggle .check {
  position: absolute;
  display: block;
  cursor: pointer;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 6;
}
#checkout .v4-savings-toggle-wrap .pricing-toggle .check:checked ~ .switch {
  right: 2px;
  left: 57.5%;
  transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-property: left, right;
  transition-delay: 0.08s, 0s;
}
#checkout .v4-savings-toggle-wrap .pricing-toggle .switch {
  position: absolute;
  left: 2px;
  top: 2px;
  bottom: 2px;
  right: 57.5%;
  background-color: var(--lt-dk-white);
  border-radius: 36px;
  z-index: 1;
  transition: 0.25s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition-property: left, right;
  transition-delay: 0s, 0.08s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
#checkout ::-webkit-input-placeholder {
  color: var(--lt-neutral-70-dk-neutral-10);
  font-weight: 200;
  font-size: 1em;
}
#checkout ::-moz-placeholder {
  color: var(--lt-neutral-70-dk-neutral-10);
  font-weight: 200;
  font-size: 1em;
}
#checkout {
  /** V4 Forms **/
}
#checkout h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
  font-size: 1.75rem;
}
#checkout input {
  overflow: visible;
}
#checkout button,
#checkout [type=submit] {
  -webkit-appearance: button;
}
#checkout input[type=checkbox] {
  box-sizing: border-box;
  padding: 0;
}
#checkout button,
#checkout input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
}
#checkout input {
  line-height: normal;
}
#checkout input[type=checkbox] {
  box-sizing: border-box;
  padding: 0;
}
#checkout a {
  text-decoration: none;
}
#checkout input {
  font-family: sans-serif;
}
#checkout select::-ms-expand {
  display: none;
}
#checkout select {
  -webkit-appearance: none;
}
#checkout .couponError {
  display: none;
}
#checkout {
  /**
  * Media Queries
  **/
}
#checkout .checkout-modal {
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  align-items: center;
  z-index: 1000;
  display: none;
  background-color: rgba(0, 0, 0, 0.6);
}
#checkout .checkout-modal h3 {
  font-weight: 800;
  font-size: 2rem;
}
#checkout .checkout-modal.is-active {
  display: flex;
}
#checkout .checkout-modal .modal-background {
  background-color: rgba(10, 10, 10, 0.86);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}
#checkout .checkout-modal .modal-left-image {
  width: 100%;
  max-width: 50%;
  height: auto;
}
#checkout .checkout-modal .modal-close {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background-color: rgba(10, 10, 10, 0.2);
  border: none;
  border-radius: 290486px;
  cursor: pointer;
  pointer-events: auto;
  display: inline-block;
  flex-grow: 0;
  flex-shrink: 0;
  font-size: 0;
  max-height: 20px;
  max-width: 20px;
  min-height: 20px;
  min-width: 20px;
  outline: none;
  vertical-align: top;
  background: none;
  height: 40px;
  position: fixed;
  right: 20px;
  top: 20px;
  width: 40px;
}
#checkout .checkout-modal .modal-close::before, #checkout .checkout-modal .modal-close::after {
  background-color: white;
  content: "";
  display: block;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transform-origin: center center;
}
#checkout .checkout-modal .modal-close::before {
  height: 2px;
  width: 50%;
}
#checkout .checkout-modal .modal-close::after {
  height: 50%;
  width: 2px;
}
#checkout .checkout-modal .modal-close:hover, #checkout .checkout-modal .modal-close:focus {
  background-color: rgba(10, 10, 10, 0.3);
}
#checkout .checkout-modal .modal-close:active {
  background-color: rgba(10, 10, 10, 0.4);
}

.partner-footer {
  background-color: #030121;
  padding: 0.5em 2em;
  text-align: center;
  color: var(--lt-dk-white);
  font-size: 0.9em;
}
.partner-footer p {
  margin: 14px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--lt-neutral-80-dk-white);
}

p {
  margin-bottom: 24px;
  line-height: 1.9;
}

label {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--lt-neutral-80-dk-white);
}

.left-plan-details {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  order: 1;
}
@media (min-width: 992px) {
  .left-plan-details {
    min-width: 380px;
    max-width: 380px;
    order: 2;
  }
}

.right-forms {
  width: 100%;
  position: relative;
  order: 2;
}
@media (min-width: 992px) {
  .right-forms {
    order: 1;
  }
}

/* TITLE */
.title-container {
  min-height: 460px;
  height: 100%;
  color: var(--lt-dk-white);
  background-color: #030121;
  text-align: left;
  padding: 2em;
  box-sizing: border-box;
  position: relative;
}
.title-container .pricing {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.title-container .pricing * {
  font-size: 0.9em;
}
.title-container .pricing > div {
  width: 100%;
  margin-bottom: 10px;
}
.title-container .pricing > div:nth-child(odd) {
  max-width: 75%;
}
.title-container .pricing > div:nth-child(even) {
  max-width: 25%;
  text-align: right;
}
.title-container .pricing .monthly-breakdown-title {
  width: 0 !important;
  max-width: 0 !important;
}
.title-container .pricing .monthly-breakdown-value {
  width: 100% !important;
  max-width: 100% !important;
  text-align: right;
}
.title-container .pricing #discount-line-items:empty {
  display: none;
}
.title-container .pricing .highlight {
  font-weight: bold;
  font-size: 1.1em;
}
.title-container .pricing .highlight.todays-total,
.title-container .pricing .highlight.todays-price,
.title-container .pricing .subtotal-label,
.title-container .pricing .subtotal-price,
.title-container .pricing .price-difference,
.title-container .pricing .price-difference-amount,
.title-container .pricing .tax-label,
.title-container .pricing .tax-amount,
.title-container .pricing .referral-applied,
.title-container .pricing .referral-applied-code {
  border-bottom: 1px dotted var(--lt-dk-neutral-30);
  padding-bottom: 8px;
}
.title-container .pricing .recurring-period,
.title-container .pricing .recurring-price {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
  opacity: 0.8;
}
.title-container .pricing .recurring-price {
  margin-bottom: 12px;
}
.title-container .pricing .monthly-breakdown {
  width: 100%;
  font-size: 0.85em;
  text-align: right;
  opacity: 0.9;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
  margin-top: -6px;
}

.title-container h2 {
  font-size: 18px;
  font-weight: 800;
  color: var(--lt-dk-white);
  padding: 0;
  margin-bottom: 0px;
}

.title-container h3 {
  font-size: 25px;
  font-weight: 600;
  color: #82000a;
  padding: 0;
}

.title-container p {
  font-size: 13px;
  line-height: 20px;
}

.title-container ul {
  list-style: none;
  margin: 1em 0 0 0;
  padding: 0;
}
.title-container ul.plan-specs {
  padding: 0;
  list-style: none;
}
.title-container ul.plan-specs li {
  font-weight: 600;
  margin-bottom: 5px;
  padding: 2px;
  font-size: 15px;
}
.title-container ul.plan-specs li i {
  color: var(--success);
  margin-right: 5px;
}

/* FORMS */
#qbox-container {
  background-color: var(--lt-dk-white);
  background-repeat: repeat;
  position: relative;
  z-index: 3;
  min-height: 100%;
  padding: 3em 4em;
}

#steps-container {
  width: 100%;
  display: block;
  vertical-align: middle;
}
#steps-container h2 {
  margin-bottom: 1.3em;
  font-size: 1.6em;
}

.step {
  display: none;
}

.step h4 {
  margin: 0 0 26px 0;
  padding: 0;
  position: relative;
  font-weight: 500;
  font-size: 23px;
  font-size: 1.4375rem;
  line-height: 1.6;
}

button.submit-btn,
input.submit-btn {
  font-size: 17px;
  font-weight: bold;
  position: relative;
  width: 260px;
  background: var(--lt-dk-primary-50);
  margin: 1em auto 0 auto;
  overflow: hidden;
  z-index: 1;
  cursor: pointer;
  transition: color 0.3s;
  text-align: center;
  color: var(--lt-dk-white);
  border: 0;
  border-radius: 40px;
  padding: 0.7em;
}

.progress {
  border-radius: 0px !important;
  position: absolute;
  width: 100%;
  z-index: 5;
}
.progress .progress-bar {
  background-color: var(--lt-dk-accent-50);
}

.form-check-input:checked,
.form-check-input:focus {
  background-color: var(--lt-dk-error-50) !important;
  outline: none !important;
  border: none !important;
}

input:focus {
  outline: none;
}

#input-container {
  display: inline-block;
  box-shadow: none !important;
  margin-top: 36px !important;
}

label.form-check-label.radio-lb {
  margin-right: 15px;
}

#q-box__buttons {
  text-align: center;
}

input[type=text],
input[type=email],
input[type=password] {
  padding: 7px 14px;
}

input[type=text]:focus,
input[type=email]:focus {
  border: 1px solid var(--lt-dk-error-50);
  border-radius: 5px;
  outline: 0px !important;
  -webkit-appearance: none;
  box-shadow: none !important;
  -webkit-transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}

.form-check-input:checked[type=radio],
.form-check-input:checked[type=radio]:hover,
.form-check-input:checked[type=radio]:focus,
.form-check-input:checked[type=radio]:active {
  border: none !important;
  -webkit-outline: 0px !important;
  box-shadow: none !important;
}

.form-check-input:focus,
input[type=radio]:hover {
  box-shadow: none;
  cursor: pointer !important;
}

#terms .alert {
  font-size: 0.85em;
}
#terms a {
  font-size: 1em;
  color: var(--lt-dk-primary-50);
}
#terms a:hover {
  text-decoration: underline;
}

/* PRELOADER */
#preloader-wrapper {
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
}

#preloader {
  display: block;
  position: relative;
  z-index: 1001;
}

#preloader-wrapper .preloader-section {
  width: 51%;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 1000;
}

#preloader-wrapper .preloader-section.section-left {
  left: 0;
}

#preloader-wrapper .preloader-section.section-right {
  right: 0;
}

.loaded #preloader-wrapper .preloader-section.section-left {
  transform: translateX(-100%);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #preloader-wrapper .preloader-section.section-right {
  transform: translateX(100%);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #preloader {
  opacity: 0;
  transition: all 0.3s ease-out;
}

.loaded #preloader-wrapper {
  visibility: hidden;
  transform: translateY(-100%);
  transition: all 0.3s 1s ease-out;
}

.g2-badges {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}
.g2-badges .g2-badge {
  width: 100%;
  max-width: 60px;
  height: auto;
  display: block;
}

.bg-blue {
  background-color: var(--lt-dk-primary-50);
}

.bg-green {
  background-color: var(--lt-dk-success-50);
}

/* MEDIA QUERIES */
@media (min-width: 990px) and (max-width: 1199px) {
  .title-container {
    padding: 80px 28px 28px 28px;
  }
}
@media (max-width: 991px) {
  .title-container {
    padding: 30px;
    min-height: inherit;
  }
}
@media (max-width: 767px) {
  #qbox-container {
    padding: 30px;
  }
  #steps-container {
    width: 100%;
    min-height: 400px;
  }
  .title-container {
    padding-top: 50px;
  }
}
@media (max-width: 560px) {
  #qbox-container {
    padding: 40px;
  }
  .title-container {
    padding-top: 45px;
  }
}
#checkout .required label:after {
  content: "*";
  color: var(--lt-dk-error-50);
  font-size: 14px;
  position: relative;
  top: -3px;
}
#checkout #terms {
  background-color: var(--lt-neutral-10-dk-primary-90);
}
#checkout #terms p,
#checkout #terms ul,
#checkout #terms li {
  color: var(--lt-neutral-70-dk-neutral-10);
  font-size: 0.95em;
  line-height: 1.5;
}
#checkout #terms ul li {
  margin-top: 10px;
}
#checkout #firstName iframe,
#checkout #lastName iframe,
#checkout #number iframe,
#checkout #month iframe,
#checkout #year iframe,
#checkout #cvv iframe,
#checkout #address iframe,
#checkout #address2 iframe,
#checkout #city iframe,
#checkout #country iframe,
#checkout #state iframe,
#checkout #zip iframe,
#checkout .g-recaptcha iframe {
  width: 100% !important;
}
#checkout .checkout-message-bottom {
  text-align: left;
  color: white;
  margin-top: 3em;
  background-color: var(--white-alpha-10);
  border: 1px solid var(--white-alpha-20);
  padding: 8px;
  border-radius: 6px;
}
#checkout .checkout-message-bottom img {
  width: 100%;
  max-width: 80px;
}
@media (min-width: 576px) {
  #checkout .checkout-message-bottom img {
    margin-right: 2em;
  }
}
#checkout .checkout-message-bottom h3 {
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: 10px;
  color: white;
}
#checkout .checkout-message-bottom p {
  margin-bottom: 0;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--white-alpha-80);
}
#checkout.final-step .checkout-message-bottom {
  display: block;
}
#checkout .panel-title {
  margin-bottom: 1em;
}
#checkout .v5-price-before-discount span {
  text-decoration: line-through;
  font-size: 1.2em;
}
#checkout .activate-coupon,
#checkout .activate-referral {
  font-size: 0.9em;
  text-decoration: underline;
  color: var(--lt-dk-white);
  display: inline-block;
  cursor: pointer;
}
#checkout .referral-details {
  font-size: 0.8em;
  margin-top: 10px;
}

.email-format,
#companyName {
  height: 38px;
}

.coupon-remove,
.referral-remove {
  display: inline-flex;
  cursor: pointer;
  border-radius: 20px;
  width: 14px;
  height: 14px;
  justify-content: center;
  align-items: center;
}
.coupon-remove:hover,
.referral-remove:hover {
  background-color: var(--lt-dk-error-50);
}

#checkout .checkout-modal .modal-cols h3 {
  font-size: 2.5em;
  line-height: 1.1;
  font-weight: bold;
  color: var(--lt-dk-accent-50);
}
#checkout .checkout-modal .modal-cols div:nth-child(2) {
  min-width: 400px;
}

.checkout-modal-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("/assets/lt-easy-to-use-dashboard-2x-09752650.png");
}
@media (max-width: 991px) {
  .checkout-modal-image {
    height: 200px;
  }
}

.coupon-grid.input-group {
  gap: 8px;
}
.coupon-grid.input-group > .form-control {
  border-top-right-radius: var(--bs-border-radius) !important;
  border-bottom-right-radius: var(--bs-border-radius) !important;
}

div#password-requirements {
  padding: 12px 16px;
  background-color: #eeeeee;
  border-radius: 4px;
}
div#password-requirements .password-requirement {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  color: #6c757d;
}
div#password-requirements .password-requirement.is-met {
  color: #198754;
}
div#password-requirements .password-requirement .password-requirement__icon {
  width: 16px;
  text-align: center;
}

/*# sourceMappingURL=/assets/checkout-de8c15bc.css.map */