@charset "UTF-8";
/*   color  */
/*   color - element */
/*   color - utility    */
/*   font-size  */
/*  transfer scss variable to css variable */
:root {
  --font-color:#444;
  --shadow-color:#dcdcdc;
  --header-color:#3180C2;
  --border-color:#eee;
  --button-color:#0275d8;
  --button-hover-color:#00b3db;
  --button-disabled-color:button-disabled-color;
  --input-focus-color:orange;
  --input-border-color:#999;
  --input-border-radius: 5px;
  --success-color:green;
  --error-color:red;
  --color-header:#3180C2;
  --color-border:#eee;
  --color-shadow:#dcdcdc;
  --color-success:green;
  --color-error:red;
  --font-size:14px;
  --font-size-sm:0.8rem;
  --font-size-lg:1.5rem;
  --label-width:150px;
  --label-margin-right:4px;
  --color-A:green;
  --color-B:orange;
  --color-C:orange;
  --color-D:#F62817;
  --color-E:#F62817;
  --color-F:#F62817;
  --dialog-z-index: $dialog-z-index;
  /*  overriding bs variables */
  /*  bs modal backdrop zindex is hard coded to 1055 */
  --bs-modal-zindex: 1055;
  /* overriding offcanvas variables */
  --zindex-offcanvas: 1056;
}

/* following are the new variables from Claude Code */
:root {
  /* === Color Tokens === */
  /* Primary Colors */
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  /* Neutral Colors */
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;
  --color-highlight-cyan: #7dd3fc;
  --color-highlight-yellow: #fde047;
  --color-highlight-green: #4ade80;
  --color-highlight-red: #f87171;
  --color-highlight-purple: #a78bfa;
  --color-dark-hover: #263347;
  /* Text Colors */
  --color-text-primary: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;
  /* === Spacing Tokens === */
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-8: 2rem; /* 32px */
  /* === Shadow Tokens (Elevation System) === */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  /* === Border Radius Tokens === */
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  --radius-full: 9999px;
  /* === Typography Tokens === */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* === Transition Tokens === */
  --transition-fast: 150ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  /* === Sidebar-Specific Tokens === */
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 80px;
  --sidebar-bg: var(--color-neutral-900);
  --sidebar-border: var(--color-neutral-800);
  /* === Grade Colors === */
  --grade-color-A: #22c55e;
  --grade-color-B: #86efac;
  --grade-color-C: #eab308;
  --grade-color-D: #f97316;
  --grade-color-F: #ef4444;
}

@font-face {
  font-family: "connections";
  src: url(assets/Connections.otf) format("opentype");
  font-weight: normal;
  font-style: normal;
}
.root-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  height: 100vh;
}

.center-container {
  padding-top: 61px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  flex-grow: 1;
}

/*  container */
.container {
  max-width: 700px;
  padding: 0;
  /* box-shadow: 0px 10px 6px -6px $shadow-color; */
  border-radius: 6px;
  background-color: white;
}
.container > .mg-form {
  border: 1px solid #dcdcdc;
  border-top: 0;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  padding: 1.5rem;
}
.container > .mg-form .mg-form-row {
  padding: 4px 8px;
}
.container > .mg-form .mg-form-row label {
  width: 150px;
}
.container > .mg-form .mg-form-button-row {
  padding: 20px 0 0 4px;
}

.container-header {
  background-color: #3180C2;
  color: white;
  width: 100%;
  padding: 5px;
  display: flex;
  justify-content: space-between;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-left: 1px solid #3180C2;
}

.modal-content .container {
  padding: 0;
  box-shadow: none;
}
.modal-content .mg-form {
  padding: 10px;
}

@media only screen and (max-width: 1024px) {
  .container {
    border-radius: 0px;
    box-shadow: none;
    border: 0;
  }
  .container-header {
    border-radius: 0px;
  }
  .container .mg-form {
    border: 0;
    border-radius: 0;
  }
}
/* end of container */
.shadow-box {
  max-width: 100%;
  padding: 1.5rem;
  border-radius: 0.375rem;
  margin-bottom: 3rem;
  border: 1px solid #eee;
  box-shadow: 0 0.5rem 1rem 0.1rem #dcdcdc;
}

@media only screen and (max-width: 760px) {
  .shadow-box {
    border-radius: 0;
  }
}
/*
 *    a container with 3 columns and the card 
 */
.card-3-column-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 5px;
}

.card-3-column {
  border: 1px solid #eee;
  flex: 0 0 30%;
  position: relative;
}

.card-3-column-header {
  display: flex;
  justify-content: space-between;
  padding: 0.3rem;
}

.card-3-column-content {
  height: 100px;
  border-top: 1px solid #eee;
  overflow: hidden;
  padding: 0.3rem;
}

.card-3-edit {
  position: absolute;
  display: none;
  top: 100px;
  left: 5px;
}

.card-3-column:hover > .card-3-edit {
  display: block;
}

@media only screen and (max-width: 760px) {
  .card-3-column-container .card-3-column {
    flex: 0 0 90%;
  }
}
/*
 *    image  container
 */
.image-container .cell-computer-screen {
  background-image: url(assets/ComputerScreen.jpg);
  background-size: cover;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 2/1.8;
}

.image-container .cell-computer-screen img {
  width: 80%;
  margin-top: 7%;
  margin-left: 8%;
}

@media only screen and (max-width: 415px) {
  .feature-container {
    width: 100%;
  }
  .feature-container .feature {
    flex-direction: column;
  }
  .feature-container .feature .image-container {
    width: 50%;
  }
  .feature-container .feature .text-container {
    width: 100%;
  }
}
/*   color  */
/*   color - element */
/*   color - utility    */
/*   font-size  */
/*  transfer scss variable to css variable */
:root {
  --font-color:#444;
  --shadow-color:#dcdcdc;
  --header-color:#3180C2;
  --border-color:#eee;
  --button-color:#0275d8;
  --button-hover-color:#00b3db;
  --button-disabled-color:button-disabled-color;
  --input-focus-color:orange;
  --input-border-color:#999;
  --input-border-radius: 5px;
  --success-color:green;
  --error-color:red;
  --color-header:#3180C2;
  --color-border:#eee;
  --color-shadow:#dcdcdc;
  --color-success:green;
  --color-error:red;
  --font-size:14px;
  --font-size-sm:0.8rem;
  --font-size-lg:1.5rem;
  --label-width:150px;
  --label-margin-right:4px;
  --color-A:green;
  --color-B:orange;
  --color-C:orange;
  --color-D:#F62817;
  --color-E:#F62817;
  --color-F:#F62817;
  --dialog-z-index: $dialog-z-index;
  /*  overriding bs variables */
  /*  bs modal backdrop zindex is hard coded to 1055 */
  --bs-modal-zindex: 1055;
  /* overriding offcanvas variables */
  --zindex-offcanvas: 1056;
}

/* following are the new variables from Claude Code */
:root {
  /* === Color Tokens === */
  /* Primary Colors */
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  /* Neutral Colors */
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;
  --color-highlight-cyan: #7dd3fc;
  --color-highlight-yellow: #fde047;
  --color-highlight-green: #4ade80;
  --color-highlight-red: #f87171;
  --color-highlight-purple: #a78bfa;
  --color-dark-hover: #263347;
  /* Text Colors */
  --color-text-primary: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;
  /* === Spacing Tokens === */
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-8: 2rem; /* 32px */
  /* === Shadow Tokens (Elevation System) === */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  /* === Border Radius Tokens === */
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  --radius-full: 9999px;
  /* === Typography Tokens === */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* === Transition Tokens === */
  --transition-fast: 150ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  /* === Sidebar-Specific Tokens === */
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 80px;
  --sidebar-bg: var(--color-neutral-900);
  --sidebar-border: var(--color-neutral-800);
  /* === Grade Colors === */
  --grade-color-A: #22c55e;
  --grade-color-B: #86efac;
  --grade-color-C: #eab308;
  --grade-color-D: #f97316;
  --grade-color-F: #ef4444;
}

.mg-form {
  margin: 0;
  padding: 0px;
  width: 100%;
}
.mg-form .mg-form-row {
  width: 100%;
  margin: 5px 0;
  display: flex;
  flex-wrap: nowrap;
}
.mg-form .mg-form-row > label {
  min-width: 150px;
  margin-right: 4px;
  font-size: 14px;
  color: #444;
  vertical-align: top;
}
.mg-form .mg-form-row > input:not([type=radio], [type=checkbox]), .mg-form .mg-form-row select, .mg-form .mg-form-row textarea, .mg-form .mg-form-row .padded-input > input {
  min-width: 150px;
  height: 2rem;
  border: 1px solid #999;
  border-radius: 0;
  width: 100%;
  padding: 4px 8px;
  border-radius: 5px;
}
.mg-form .mg-form-row > input:not([type=radio], [type=checkbox]):focus, .mg-form .mg-form-row select:focus, .mg-form .mg-form-row textarea:focus, .mg-form .mg-form-row .padded-input > input:focus {
  outline: none;
  border: 1px solid orange;
}
.mg-form .mg-form-row > input:not([type=radio], [type=checkbox])[readonly], .mg-form .mg-form-row select[readonly], .mg-form .mg-form-row textarea[readonly], .mg-form .mg-form-row .padded-input > input[readonly] {
  border: 0;
  resize: none;
}
.mg-form .mg-form-row > input:not([type=radio], [type=checkbox])[readonly]:focus, .mg-form .mg-form-row select[readonly]:focus, .mg-form .mg-form-row textarea[readonly]:focus, .mg-form .mg-form-row .padded-input > input[readonly]:focus {
  border: 0;
}
.mg-form .mg-form-row > input[type=checkbox] {
  height: 2rem;
  vertical-align: middle;
}
.mg-form .mg-form-row > input[type=radio] {
  height: 2rem;
  vertical-align: middle;
}
.mg-form .mg-form-row > textarea {
  height: 4em;
}
.mg-form .mg-form-row > select {
  padding: 2px 4px;
}
.mg-form .mg-form-row > button {
  font-size: 14px;
}
.mg-form .mg-form-row > .mg-radio-options {
  display: inline-block;
}
.mg-form .mg-form-row > .mg-radio-options .mg-radio-option input[type=radio] {
  vertical-align: middle;
  height: 2rem;
}
.mg-form .mg-form-row > .mg-radio-options .mg-radio-option label {
  margin-left: 4px;
}
.mg-form .mg-form-row app-html-editor3 {
  width: 100%;
}
.mg-form .mg-form-row .padded-input {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mg-form .mg-form-row.currency .padded-input {
  position: relative;
}
.mg-form .mg-form-row.currency .padded-input input {
  padding-left: 1em;
  text-align: right;
  padding-right: 4px;
  min-width: unset;
  width: 80px;
}
.mg-form .mg-form-row.currency .padded-input .input-prefix {
  position: absolute;
  top: 3px;
  left: 0.3em;
  color: #999;
}
.mg-form .mg-form-row.currency .padded-input .input-suffix {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  pointer-events: none;
}
.mg-form .mg-form-button-row {
  padding: 0;
  margin-top: 2rem;
}
.mg-form .mg-form-button-row button {
  margin-right: 4px;
}
.mg-form .mg-form-success-row {
  margin: 10px;
  color: green;
}
.mg-form .mg-form-error-row {
  margin: 10px;
  color: red;
}
.mg-form .mg-form-row.short-integer-input input[type=text] {
  min-width: unset;
  max-width: 60px;
}

.mg-form.mg-form-readOnly {
  pointer-events: none;
}
.mg-form.mg-form-readOnly .mg-form-row {
  padding: 0;
}
.mg-form.mg-form-readOnly .mg-form-row select, .mg-form.mg-form-readOnly .mg-form-row input, .mg-form.mg-form-readOnly .mg-form-row div[contenteditable], .mg-form.mg-form-readOnly .mg-form-row textarea {
  border: 0 !important;
  resize: none !important;
  padding: 0 !important;
}
.mg-form.mg-form-readOnly .mg-form-row input::placeholder {
  opacity: 0;
}
.mg-form.mg-form-readOnly .mg-form-row input::-ms-input-placeholder {
  opacity: 0;
}
.mg-form.mg-form-readOnly .mg-radio-option:not(.selected) {
  display: none;
}
.mg-form.mg-form-readOnly .mg-radio-option.selected input {
  display: none;
}
.mg-form.mg-form-readOnly label > span {
  display: none;
}
.mg-form.mg-form-readOnly select {
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
}
.mg-form.mg-form-readOnly select::-ms-expand {
  display: none;
}
.mg-form.mg-form-readOnly .mg-form-button-row, .mg-form.mg-form-readOnly .mg-form-success-row, .mg-form.mg-form-readOnly .mg-form-error-row {
  display: none;
}

.mg-label {
  min-width: 150px;
  margin-right: 4px;
  font-size: 14px;
  color: #444;
  vertical-align: top;
}

.mg-form .fields.columns-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}

.mg-form .fields.columns-2 .mg-form-row.col-span-2 {
  grid-column: 1/-1;
}

.mg-form .fields.columns-2 .mg-form-row {
  flex-direction: column;
  align-items: flex-start;
}

.mg-form .fields.columns-2 .mg-form-row > label {
  min-width: unset;
  width: 100%;
}

.mg-form .fields.columns-2 .mg-form-row > input:not([type=radio], [type=checkbox]),
.mg-form .fields.columns-2 .mg-form-row > select,
.mg-form .fields.columns-2 .mg-form-row > textarea {
  min-width: unset;
  width: 100%;
}

.mg-form .field-5ch input {
  width: 5ch !important;
  min-width: unset !important;
}

@media only screen and (max-width: 415px) {
  .mg-form .mg-form-row {
    flex-wrap: wrap;
  }
}
.mg-form app-roleplay-grader {
  --color-neutral-800: #ffffff;
  --color-neutral-900: #f5f5f5;
  --color-neutral-700: #999;
  --color-neutral-600: #999;
  --color-neutral-500: #444;
  --color-primary-100: #0275d8;
  --color-text-secondary: #444;
  --color-text-primary: #444;
  --color-text-muted: #444;
  --text-sm: 14px;
  --font-weight-medium:400;
}

::ng-deep app-roleplay-grader .tab-btn--active {
  color: black !important;
}

.mg-cards {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  padding: 5px;
}
.mg-cards .mg-card {
  width: 24%;
  border: 1px solid #eee;
  padding-top: 0;
}
.mg-cards .mg-card .mg-card-header {
  text-align: center;
  background-color: #eee;
  position: relative;
  padding: 0;
  line-height: 1.5em;
}
.mg-cards .mg-card .mg-card-header .mg-card-title {
  display: inline-block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  height: 100%;
  margin: 0;
}
.mg-cards .mg-card .mg-card-header .mg-card-header-icons {
  display: none;
  position: absolute;
  right: 0;
  margin-top: 0.4em;
}
.mg-cards .mg-card .mg-card-header .mg-card-header-icons i {
  float: right;
  margin-right: 5px;
  font-size: 12px;
  color: #0275d8;
  cursor: pointer;
}
.mg-cards .mg-card .mg-card-header:hover .mg-card-header-icons {
  display: inline-block;
}
.mg-cards .mg-card .card-content {
  padding: 5px 3px 10px 3px;
  display: flex;
  flex-direction: column;
}
.mg-cards .mg-card .card-content .card-row {
  display: flex;
}
.mg-cards .mg-card .card-content .card-row .row-label {
  width: 40%;
  padding: 1px;
  margin: 0;
  text-align: left;
}
.mg-cards .mg-card .card-content .card-row .row-data {
  width: 60%;
  padding: 1px;
  margin: 0;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
}

.mg-tag {
  display: inline-block;
  padding: 1px 5px;
  background-color: pink;
  border-radius: 10px;
  color: #555;
  cursor: default;
  font-size: 12px;
  vertical-align: middle;
}
.mg-tag svg {
  margin-left: 5px;
  vertical-align: top;
  font-weight: 400;
  width: 18px !important;
  height: 18px !important;
}

.mg-tag-container {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}

.mg-tag-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  background-color: white;
  min-height: 24px;
}
.mg-tag-row .icon-container {
  display: none;
  padding: 0;
  margin: 0;
  white-space: nowrap;
}
.mg-tag-row svg {
  width: 18px !important;
  height: 18px !important;
  margin: 0;
}

.mg-tag-row:hover {
  background-color: #eee;
}
.mg-tag-row:hover .icon-container {
  display: inline-block;
}

.mg-tag-4C6B1F {
  color: white;
  background-color: #4C6B1F;
}

.mg-tag-AE2E24 {
  color: white;
  background-color: #AE2E24;
}

.mg-tag-9E4C00 {
  color: white;
  background-color: #9E4C00;
}

.mg-tag-7F5F01 {
  color: white;
  background-color: #7F5F01;
}

.mg-tag-216E4E {
  color: white;
  background-color: #216E4E;
}

.mg-tag-206A83 {
  color: white;
  background-color: #206A83;
}

.mg-tag-1558BC {
  color: white;
  background-color: #1558BC;
}

.mg-tag-803FA5 {
  color: white;
  background-color: #803FA5;
}

.mg-tag-943D73 {
  color: white;
  background-color: #943D73;
}

.mg-tag-505258 {
  color: white;
  background-color: #505258;
}

.mg-tag-green {
  color: white;
  background-color: green;
}

.mg-tag-orange {
  color: white;
  background-color: orange;
}

.mg-tag-F62817 {
  color: white;
  background-color: #F62817;
}

.mg-tag-4C6B1F-outline {
  color: #4C6B1F;
  border: 1px solid #4C6B1F;
  background-color: white;
}

.mg-tag-AE2E24-outline {
  color: #AE2E24;
  border: 1px solid #AE2E24;
  background-color: white;
}

.mg-tag-9E4C00-outline {
  color: #9E4C00;
  border: 1px solid #9E4C00;
  background-color: white;
}

.mg-tag-7F5F01-outline {
  color: #7F5F01;
  border: 1px solid #7F5F01;
  background-color: white;
}

.mg-tag-216E4E-outline {
  color: #216E4E;
  border: 1px solid #216E4E;
  background-color: white;
}

.mg-tag-206A83-outline {
  color: #206A83;
  border: 1px solid #206A83;
  background-color: white;
}

.mg-tag-1558BC-outline {
  color: #1558BC;
  border: 1px solid #1558BC;
  background-color: white;
}

.mg-tag-803FA5-outline {
  color: #803FA5;
  border: 1px solid #803FA5;
  background-color: white;
}

.mg-tag-943D73-outline {
  color: #943D73;
  border: 1px solid #943D73;
  background-color: white;
}

.mg-tag-505258-outline {
  color: #505258;
  border: 1px solid #505258;
  background-color: white;
}

.mg-tag-green-outline {
  color: green;
  border: 1px solid green;
  background-color: white;
}

.mg-tag-orange-outline {
  color: orange;
  border: 1px solid orange;
  background-color: white;
}

.mg-tag-F62817-outline {
  color: #F62817;
  border: 1px solid #F62817;
  background-color: white;
}

.model-card-container {
  display: block;
  width: 100%;
}
.model-card-container .btn-filter {
  float: right;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 0;
  color: #888;
  border: 1px solid #888;
  position: relative;
}
.model-card-container .btn-filter .red-dot {
  display: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  left: 40px;
}
.model-card-container .btn-filter.hot .red-dot {
  display: block;
}

/*   color  */
/*   color - element */
/*   color - utility    */
/*   font-size  */
/*  transfer scss variable to css variable */
:root {
  --font-color:#444;
  --shadow-color:#dcdcdc;
  --header-color:#3180C2;
  --border-color:#eee;
  --button-color:#0275d8;
  --button-hover-color:#00b3db;
  --button-disabled-color:button-disabled-color;
  --input-focus-color:orange;
  --input-border-color:#999;
  --input-border-radius: 5px;
  --success-color:green;
  --error-color:red;
  --color-header:#3180C2;
  --color-border:#eee;
  --color-shadow:#dcdcdc;
  --color-success:green;
  --color-error:red;
  --font-size:14px;
  --font-size-sm:0.8rem;
  --font-size-lg:1.5rem;
  --label-width:150px;
  --label-margin-right:4px;
  --color-A:green;
  --color-B:orange;
  --color-C:orange;
  --color-D:#F62817;
  --color-E:#F62817;
  --color-F:#F62817;
  --dialog-z-index: $dialog-z-index;
  /*  overriding bs variables */
  /*  bs modal backdrop zindex is hard coded to 1055 */
  --bs-modal-zindex: 1055;
  /* overriding offcanvas variables */
  --zindex-offcanvas: 1056;
}

/* following are the new variables from Claude Code */
:root {
  /* === Color Tokens === */
  /* Primary Colors */
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  /* Neutral Colors */
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;
  --color-highlight-cyan: #7dd3fc;
  --color-highlight-yellow: #fde047;
  --color-highlight-green: #4ade80;
  --color-highlight-red: #f87171;
  --color-highlight-purple: #a78bfa;
  --color-dark-hover: #263347;
  /* Text Colors */
  --color-text-primary: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;
  /* === Spacing Tokens === */
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-8: 2rem; /* 32px */
  /* === Shadow Tokens (Elevation System) === */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  /* === Border Radius Tokens === */
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  --radius-full: 9999px;
  /* === Typography Tokens === */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* === Transition Tokens === */
  --transition-fast: 150ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  /* === Sidebar-Specific Tokens === */
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 80px;
  --sidebar-bg: var(--color-neutral-900);
  --sidebar-border: var(--color-neutral-800);
  /* === Grade Colors === */
  --grade-color-A: #22c55e;
  --grade-color-B: #86efac;
  --grade-color-C: #eab308;
  --grade-color-D: #f97316;
  --grade-color-F: #ef4444;
}

.model-table-container {
  font-size: 14px;
  color: #444;
  /** drag and drop */
  /** end of drag and drop */
}
.model-table-container .mg-table {
  width: 100%;
}
.model-table-container .mg-table tr:hover .buttons {
  opacity: 1;
}
.model-table-container .mg-table tr:nth-child(even) {
  background-color: ivory;
}
.model-table-container .mg-table th {
  font-weight: bold;
  font-size: 0.6em;
  padding: 3px;
  border-bottom: 1px dotted #eee;
}
.model-table-container .mg-table th.numeric {
  text-align: right;
  padding-right: 10px;
}
.model-table-container .mg-table th.check {
  text-align: center;
}
.model-table-container .mg-table td {
  padding: 3px;
  border-bottom: 1px dotted #eee;
}
.model-table-container .mg-table td.check {
  color: green;
  text-align: center;
}
.model-table-container .mg-table td.numeric {
  text-align: right;
  padding-right: 10px;
}
.model-table-container .mg-table td.buttons {
  white-space: nowrap;
  text-align: right;
  opacity: 0;
}
.model-table-container .mg-table td.buttons i {
  color: var(--button-color);
}
.model-table-container .mg-table td.buttons i:hover {
  color: var(--button-hover-color);
}
.model-table-container .mg-table button {
  margin-right: 5px;
}
.model-table-container .mg-table-button-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}
.model-table-container .mg-table-button-row:not:has(> *) {
  display: none;
}
.model-table-container .mg-table-error-row {
  margin-top: 10px;
  color: red;
  padding: 2px 4px;
}
.model-table-container .mg-table-success-row {
  margin-top: 10px;
  color: green;
  padding: 2px 4px;
}
.model-table-container .cdk-drag-preview {
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.model-table-container .cdk-drag-placeholder {
  opacity: 0;
  background-color: lightblue;
}
.model-table-container .cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.model-table-container #mg-table {
  border: 1px solid white;
}
.model-table-container #mg-table.cdk-drop-list-dragging .question-row:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.model-table-container #mg-table.cdk-drop-list-dragging {
  border: 1px solid blue;
}
.model-table-container .mg-table-row.cdk-drag-preview {
  width: 100%;
}
.model-table-container .mg-table-row.cdk-drag-preview td:last-child {
  text-align: right;
}

@media only screen and (max-width: 1024px) {
  .model-table-container .mg-table tr .buttons {
    opacity: 1 !important;
  }
  .model-table-container .mg-table tr .buttons .cdk-drag-handle {
    display: none;
  }
  .model-table-container .no-record-found {
    font-style: italic;
    font-size: 14px;
  }
}
/*   color  */
/*   color - element */
/*   color - utility    */
/*   font-size  */
/*  transfer scss variable to css variable */
:root {
  --font-color:#444;
  --shadow-color:#dcdcdc;
  --header-color:#3180C2;
  --border-color:#eee;
  --button-color:#0275d8;
  --button-hover-color:#00b3db;
  --button-disabled-color:button-disabled-color;
  --input-focus-color:orange;
  --input-border-color:#999;
  --input-border-radius: 5px;
  --success-color:green;
  --error-color:red;
  --color-header:#3180C2;
  --color-border:#eee;
  --color-shadow:#dcdcdc;
  --color-success:green;
  --color-error:red;
  --font-size:14px;
  --font-size-sm:0.8rem;
  --font-size-lg:1.5rem;
  --label-width:150px;
  --label-margin-right:4px;
  --color-A:green;
  --color-B:orange;
  --color-C:orange;
  --color-D:#F62817;
  --color-E:#F62817;
  --color-F:#F62817;
  --dialog-z-index: $dialog-z-index;
  /*  overriding bs variables */
  /*  bs modal backdrop zindex is hard coded to 1055 */
  --bs-modal-zindex: 1055;
  /* overriding offcanvas variables */
  --zindex-offcanvas: 1056;
}

/* following are the new variables from Claude Code */
:root {
  /* === Color Tokens === */
  /* Primary Colors */
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  /* Neutral Colors */
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;
  --color-highlight-cyan: #7dd3fc;
  --color-highlight-yellow: #fde047;
  --color-highlight-green: #4ade80;
  --color-highlight-red: #f87171;
  --color-highlight-purple: #a78bfa;
  --color-dark-hover: #263347;
  /* Text Colors */
  --color-text-primary: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;
  /* === Spacing Tokens === */
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-8: 2rem; /* 32px */
  /* === Shadow Tokens (Elevation System) === */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  /* === Border Radius Tokens === */
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  --radius-full: 9999px;
  /* === Typography Tokens === */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* === Transition Tokens === */
  --transition-fast: 150ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  /* === Sidebar-Specific Tokens === */
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 80px;
  --sidebar-bg: var(--color-neutral-900);
  --sidebar-border: var(--color-neutral-800);
  /* === Grade Colors === */
  --grade-color-A: #22c55e;
  --grade-color-B: #86efac;
  --grade-color-C: #eab308;
  --grade-color-D: #f97316;
  --grade-color-F: #ef4444;
}

.model-form-container .mg-form {
  padding: 10px;
}
.model-form-container .mg-form-flex .fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.model-form-container .mg-form-flex .fields .mg-form-row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-left: 0;
  margin-right: 0;
}
.model-form-container .mg-form-flex .fields .mg-form-row label {
  max-width: 100%;
  display: inline-block;
}
.model-form-container .mg-form-flex .fields .mg-form-row input:not([type=radio]):not([type=checkbox]) {
  max-width: 100%;
  width: 100%;
  margin-right: 10px;
  display: block;
}
.model-form-container .mg-form-flex .fields .mg-form-row input[type=checkbox] {
  vertical-align: middle;
  margin-top: 5px;
}
.model-form-container .mg-form-flex .fields .mg-form-row textarea {
  max-width: 100%;
  width: 100%;
  margin-right: 10px;
  display: block;
}
.model-form-container .mg-form-flex .fields .mg-form-row select {
  max-width: 100%;
  width: 100%;
  margin-right: 10px;
  display: block;
}
.model-form-container .shaded-input input:not([type=radio]):not([type=checkbox]) {
  background-color: rgba(208, 208, 208, 0.2);
  border: 1px solid #ccc;
  height: 2em;
  border-radius: 5px;
  padding: 5px 8px;
}
.model-form-container .shaded-input input:not([type=radio]):not([type=checkbox]):focus {
  border: 1px solid orange;
}
.model-form-container .shaded-input input[type=checkbox] {
  width: 1em;
  height: 1em;
}
.model-form-container .shaded-input input[type=radio] {
  width: 1em;
  height: 1em;
}
.model-form-container .shaded-input textarea {
  background-color: rgba(208, 208, 208, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  padding: 5px 8px;
}
.model-form-container .shaded-input textarea:focus {
  border: 1px solid orange;
}
.model-form-container .shaded-input select {
  background-color: rgba(208, 208, 208, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.15);
  height: 2em;
  border-radius: 5px;
  padding: 5px 8px;
  outline: none;
}
.model-form-container .shaded-input select:focus {
  border: 1px solid orange;
}
.model-form-container label .helpicon {
  color: gold;
  margin-bottom: 8px;
  margin-left: 4px;
}

.mg-form .mg-form-row app-model-children {
  width: 100%;
}
.mg-form .mg-form-row app-model-children .model-children-component-container .table-container {
  width: 100%;
  padding: 0 10px 10px 10px;
  overflow: auto;
}
.mg-form .mg-form-row app-children-editor-mm-answer {
  width: 100%;
}
.mg-form .mg-form-row app-children-editor-fb-answer {
  width: 100%;
}

/** model-selector-component-container */
.model-selector-component-container {
  padding: 5px;
  width: 100%;
}
.model-selector-component-container .search-input-wrapper {
  display: flex;
  margin-bottom: 5px;
}
.model-selector-component-container .search-input {
  margin-left: 5px;
  margin-top: 5px;
  width: 100%;
  outline: none;
  cursor: default;
}
.model-selector-component-container .search-input:focus {
  border: 1px solid gold;
}
.model-selector-component-container .btn-search {
  padding: 0;
  margin: 0 3px;
}
.model-selector-component-container .dropdown-item {
  padding-left: 5px;
  padding-right: 5px;
  min-width: 100px;
  height: 1.5em;
  font-size: 1em;
  vertical-align: middle;
  cursor: pointer;
}
.model-selector-component-container .dropdown-item:hover {
  background-color: #eee;
}

.mg-form .mg-form-row app-model-mapping-children {
  width: 100%;
}
.mg-form .mg-form-row app-model-mapping-children .model-mapping-children-component-container .model-table-container {
  width: 100%;
  padding: 0 10px 10px 10px;
}
.mg-form .mg-form-row app-model-mapping-children .model-mapping-children-component-container .label-container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/*   color  */
/*   color - element */
/*   color - utility    */
/*   font-size  */
/*  transfer scss variable to css variable */
:root {
  --font-color:#444;
  --shadow-color:#dcdcdc;
  --header-color:#3180C2;
  --border-color:#eee;
  --button-color:#0275d8;
  --button-hover-color:#00b3db;
  --button-disabled-color:button-disabled-color;
  --input-focus-color:orange;
  --input-border-color:#999;
  --input-border-radius: 5px;
  --success-color:green;
  --error-color:red;
  --color-header:#3180C2;
  --color-border:#eee;
  --color-shadow:#dcdcdc;
  --color-success:green;
  --color-error:red;
  --font-size:14px;
  --font-size-sm:0.8rem;
  --font-size-lg:1.5rem;
  --label-width:150px;
  --label-margin-right:4px;
  --color-A:green;
  --color-B:orange;
  --color-C:orange;
  --color-D:#F62817;
  --color-E:#F62817;
  --color-F:#F62817;
  --dialog-z-index: $dialog-z-index;
  /*  overriding bs variables */
  /*  bs modal backdrop zindex is hard coded to 1055 */
  --bs-modal-zindex: 1055;
  /* overriding offcanvas variables */
  --zindex-offcanvas: 1056;
}

/* following are the new variables from Claude Code */
:root {
  /* === Color Tokens === */
  /* Primary Colors */
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  /* Neutral Colors */
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;
  --color-highlight-cyan: #7dd3fc;
  --color-highlight-yellow: #fde047;
  --color-highlight-green: #4ade80;
  --color-highlight-red: #f87171;
  --color-highlight-purple: #a78bfa;
  --color-dark-hover: #263347;
  /* Text Colors */
  --color-text-primary: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;
  /* === Spacing Tokens === */
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-8: 2rem; /* 32px */
  /* === Shadow Tokens (Elevation System) === */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  /* === Border Radius Tokens === */
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  --radius-full: 9999px;
  /* === Typography Tokens === */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* === Transition Tokens === */
  --transition-fast: 150ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  /* === Sidebar-Specific Tokens === */
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 80px;
  --sidebar-bg: var(--color-neutral-900);
  --sidebar-border: var(--color-neutral-800);
  /* === Grade Colors === */
  --grade-color-A: #22c55e;
  --grade-color-B: #86efac;
  --grade-color-C: #eab308;
  --grade-color-D: #f97316;
  --grade-color-F: #ef4444;
}

.pager-component-container {
  display: flex;
  width: 100%;
  padding: 3px;
}

.pager {
  height: 24px;
  width: 100%;
  max-width: 30px;
  font-size: 12px;
  border: 1px solid #999;
  text-align: center;
  padding: 2px;
  margin: 3px;
  border-radius: 4px;
  cursor: pointer;
}

.pager:first-child {
  margin-left: auto;
}

.pager[innerHTML=First] {
  margin-right: 10px;
}

.pager[innerHTML=Last] {
  margin-left: 10px;
}

.pager.current {
  background-color: #eee;
}

body * {
  font-family: "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif;
}

.hidden {
  display: none !important;
}

.numeric {
  text-align: right;
}

.date {
  text-align: right;
}

.edit-icon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"> <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/> <path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/> </svg>');
}

.edit-icon {
  width: 1rem;
  height: 1rem;
  display: inline-block;
  filter: invert(34%) sepia(1%) saturate(2237%) hue-rotate(315deg) brightness(107%) contrast(73%);
}

/** width and max-width */
.mw-75 {
  max-width: 75%;
}

.mw-80 {
  max-width: 80%;
}

.mw-85 {
  max-width: 85%;
}

.mw-90 {
  max-width: 90%;
}

.mw-95 {
  max-width: 95%;
}

.mw-100 {
  max-width: 100%;
}

.w-25 {
  width: 25%;
}

.w-30 {
  width: 30%;
}

.w-33 {
  width: 33%;
}

.w-50 {
  width: 50%;
}

.w-60 {
  width: 60%;
}

.w-66 {
  width: 66%;
}

.w-70 {
  width: 70%;
}

.w-75 {
  width: 75%;
}

.w-80 {
  width: 80%;
}

.w-90 {
  width: 90%;
}

.w-100 {
  width: 100%;
}

.bg-fc {
  background-color: #006600 !important;
}

.bg-pc {
  background-color: orange !important;
}

.bg-di {
  background-color: #aaa !important;
}

.bg-ep {
  background-color: white !important;
}

.bg-fc:hover {
  background-color: #229954 !important;
}

.bg-pc:hover {
  background-color: #F1C40F !important;
}

.bg-di:hover {
  background-color: #ddd !important;
}

.fc {
  color: #006600 !important;
}

.pc {
  color: orange !important;
}

.di {
  color: #aaa !important;
}

.ep {
  color: white !important;
}

/** margin */
.m-auto {
  margin: auto;
}

.mh-auto {
  margin-left: auto;
  margin-right: auto;
}

.m-0 {
  margin: 0;
}

.m-1 {
  margin: 1em;
}

.m-2 {
  margin: 2em;
}

.m-3 {
  margin: 3em;
}

.m-4 {
  margin: 4em;
}

.ml-0, .ms-0 {
  margin-left: 0;
}

.ml-1, .ms-1 {
  margin-left: 1em;
}

.ml-2, .ms-2 {
  margin-left: 2em;
}

.ml-3, .ms-3 {
  margin-left: 3em;
}

.ml-4, .ms-4 {
  margin-left: 4em;
}

.mr-0, .me-0 {
  margin-right: 0;
}

.mr-1, .me-1 {
  margin-right: 1em;
}

.mr-2, .me-2 {
  margin-right: 2em;
}

.mr-3, .me-3 {
  margin-right: 3em;
}

.mr-4, .me-4 {
  margin-right: 4em;
}

.mt-0 {
  margin-top: 0;
}

.mt-1 {
  margin-top: 1em;
}

.mt-2 {
  margin-top: 2em;
}

.mt-3 {
  margin-top: 3em;
}

.mt-4 {
  margin-top: 4em;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-1 {
  margin-bottom: 1em;
}

.mb-2 {
  margin-bottom: 2em;
}

.mb-3 {
  margin-bottom: 3em;
}

.mb-4 {
  margin-bottom: 4em;
}

.p-auto {
  padding: auto;
}

.p-0 {
  padding: 0;
}

.p-1 {
  padding: 0.4em;
}

.p-2 {
  padding: 2em;
}

.p-3 {
  padding: 3em;
}

.p-4 {
  padding: 4em;
}

.pl-0, .ps-0 {
  padding-left: 0;
}

.pl-1, .ps-1 {
  padding-left: 1em;
}

.pl-2, .ps-2 {
  padding-left: 2em;
}

.pl-3, .ps-3 {
  padding-left: 3em;
}

.pl-4, .ps-4 {
  padding-left: 4em;
}

.pr-0, .pe-0 {
  padding-right: 0;
}

.pr-1, .pe-1 {
  padding-right: 1em;
}

.pr-2, .pe-2 {
  padding-right: 2em;
}

.pr-3, .pe-3 {
  padding-right: 3em;
}

.pr-4, .pe-4 {
  padding-right: 4em;
}

.pt-0 {
  padding-top: 0;
}

.pt-1 {
  padding-top: 1em;
}

.pt-2 {
  padding-top: 2em;
}

.pt-3 {
  padding-top: 3em;
}

.pt-4 {
  padding-top: 4em;
}

.pb-0 {
  padding-bottom: 0;
}

.pb-1 {
  padding-bottom: 1em;
}

.pb-2 {
  padding-bottom: 2em;
}

.pb-3 {
  padding-bottom: 3em;
}

.pb-4 {
  padding-bottom: 4em;
}

.text-bold {
  font-weight: bolder;
}

/** position */
.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-inherit {
  position: inherit;
}

.position-initial {
  position: initial;
}

/** z-index */
.z-index-unset {
  z-index: unset;
}

.z-index-1 {
  z-index: 1;
}

.z-index-2 {
  z-index: 2;
}

.z-index-3 {
  z-index: 3;
}

.z-index-4 {
  z-index: 4;
}

.z-index-10 {
  z-index: 10;
}

/** rise */
.rise-1 {
  z-index: 1;
  position: absolute;
}

.rise-2 {
  z-index: 2;
  position: absolute;
}

.rise-3 {
  z-index: 3;
  position: absolute;
}

.rise-4 {
  z-index: 4;
  position: absolute;
}

.rise-5 {
  z-index: 5;
  position: absolute;
}

.rise-10 {
  z-index: 10;
  position: absolute;
}

.round {
  border-radius: 10px;
}

.round-0 {
  border-radius: 0px;
}

.round-1 {
  border-radius: 1px;
}

.round-2 {
  border-radius: 2px;
}

.round-3 {
  border-radius: 3px;
}

.round-4 {
  border-radius: 4px;
}

.round-5 {
  border-radius: 58px;
}

.round-6 {
  border-radius: 6px;
}

.round-7 {
  border-radius: 7px;
}

.round-8 {
  border-radius: 8px;
}

.round-9 {
  border-radius: 9px;
}

.round-10 {
  border-radius: 10px;
}

.round-11 {
  border-radius: 11px;
}

.round-12 {
  border-radius: 12px;
}

.round-13 {
  border-radius: 13px;
}

.round-14 {
  border-radius: 14px;
}

.round-15 {
  border-radius: 15px;
}

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

.shadow {
  box-shadow: 0 3px 5px #eee;
}

.shadow-dialog {
  box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
}

.border-none {
  border: none;
}

.border-0 {
  border-width: 0;
}

.border-1 {
  border: 1px solid #eee;
}

/** font-color */
.color-success {
  color: green;
}

.color-error {
  color: red;
}

.color-button {
  color: #0275d8;
}

.color-fade {
  color: #777 !important;
}

.color-light-blue {
  color: rgb(6, 118, 230) !important;
}

.color-red {
  color: red !important;
}

.color-green {
  color: green !important;
}

.color-ivory {
  color: ivory !important;
}

.pill {
  padding: 0px 6px;
  border-radius: 10px;
  font-size: 0.8rem;
}

.pill-green {
  background-color: #22A06B;
  color: white;
}

.pill-orange {
  background-color: orange;
  color: white;
}

.pill-red {
  background-color: #F62817;
  color: white;
}

.pill-A {
  background-color: green;
  color: white;
}

.pill-B {
  background-color: orange;
  color: white;
}

.pill-C {
  background-color: orange;
  color: white;
}

.pill-D {
  background-color: #F62817;
  color: white;
}

.pill-E {
  background-color: #F62817;
  color: white;
}

.pill-F {
  background-color: #F62817;
  color: white;
}

.pill-NA {
  background-color: inherit;
  color: inherit;
}

.pill-year {
  background-color: inherit;
  color: lightcoral;
  border: 1px solid lightcoral;
  padding: 0 2px;
  font-size: 0.8rem;
  white-space: nowrap;
}

.pill-month {
  background-color: inherit;
  color: lightcoral;
  border: 1px solid lightcoral;
  padding: 0 2px;
  font-size: 0.8rem;
  white-space: nowrap;
}

.pill-day {
  background-color: inherit;
  color: lightseagreen;
  border: 1px solid lightseagreen;
  padding: 0 2px;
  border-radius: 5px;
  font-size: 0.8rem;
  white-space: nowrap;
}

.pill-hour {
  background-color: lightseagreen;
  color: #fff;
  border: 1px solid lightseagreen;
  padding: 0 2px;
  border-radius: 5px;
  font-size: 0.8rem;
  white-space: nowrap;
}

.pill-min {
  background-color: lightseagreen;
  color: #fff;
  border: 1px solid lightseagreen;
  padding: 0 2px;
  border-radius: 5px;
  font-size: 0.8rem;
  white-space: nowrap;
}

.pill-now {
  background-color: lightseagreen;
  color: #fff;
  border: 1px solid lightseagreen;
  padding: 0 2px;
  vertical-align: middle;
  border-radius: 5px;
  font-size: 0.8rem;
  white-space: nowrap;
}

.bg-color-A {
  background-color: green !important;
}

.bg-color-B {
  background-color: orange !important;
}

.bg-color-C {
  background-color: orange !important;
}

.bg-color-D {
  background-color: #F62817 !important;
}

.bg-color-E {
  background-color: #F62817 !important;
}

.bg-color-F {
  background-color: #F62817 !important;
}

.bg-color-NA {
  background-color: inherit;
}

.border-color-A {
  border-color: green !important;
}

.border-color-B {
  border-color: orange !important;
}

.border-color-C {
  border-color: orange !important;
}

.border-color-D {
  border-color: #F62817 !important;
}

.border-color-E {
  border-color: #F62817 !important;
}

.border-color-F {
  border-color: #F62817 !important;
}

.border-color-NA {
  border-color: inherit;
}

.bg-dcdcdc {
  background-color: #dcdcdc;
}

.bg-error {
  background-color: red;
}

.bg-success {
  background-color: green;
}

.bg-color10 {
  background-color: red;
}

.bg-color20 {
  background-color: rgb(139, 30, 30);
}

.bg-color40 {
  background-color: rgb(141, 156, 30);
}

.bg-color60 {
  background-color: rgb(15, 183, 195);
}

.bg-color100 {
  background-color: green;
}

.font-size-body {
  font-size: 14px;
}

.font-size-sm {
  font-size: 0.8rem;
}

.font-size-lg {
  font-size: 1.5rem;
}

.font-italic {
  font-style: italic;
}

.dialog {
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
}

.text-deco-none {
  text-decoration: none !important;
}

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

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.rotate-0 {
  transform: rotate(0deg);
}

.rotate-90 {
  transform: rotate(90deg);
}

.rotate-180 {
  transform: rotate(180deg);
}

.rotate-270 {
  transform: rotate(270deg);
}

/** animation */
.fade-in {
  animation: fadeInAnimation ease 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fade-out {
  animation: fadeOutAnimation ease 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fadeOutAnimation {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes blink {
  from, to {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
/** to maintain the selected text when clicked on other element */
.unselectable {
  -khtml-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.error-message {
  color: red;
}

.success-message {
  color: green;
}

.font-fa {
  font-family: "Font Awesome 6 Free";
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  width: 20px;
  text-align: center;
}

.hide-content {
  font-size: 1px;
  letter-spacing: -1px;
  color: transparent;
}

.hide-content::before {
  font-size: 14px;
  height: 100%;
  letter-spacing: normal;
  color: #555;
}

.cursor-pointer {
  cursor: pointer;
}

.hover-blue:hover {
  color: blue;
}

.currency-fancy {
  position: relative;
}
.currency-fancy .currency-fancy-symbol, .currency-fancy .currency-fancy-decimal {
  display: inline-block;
  font-size: 0.5em;
  position: relative;
  top: -0.15em;
}
.currency-fancy .currency-fancy-int {
  font-size: 1.5em;
  font-weight: 500;
  vertical-align: top;
  display: inline-block;
  position: relative;
}

.helpicon {
  border-radius: 1rem;
  margin-bottom: 0.8rem;
  margin-left: 1rem;
  width: 0.8rem;
  height: 0.8rem;
}

.helpicon:hover {
  box-shadow: 0 0 4px 4px #eee;
}

/**
    how to use .collapse

        <div  class="collapse-container">
            <button class="collapse-toggle" (click)="buttonClicked($event)">..</button>
            <div class="collapse-target">
                ...
            </div>
        </div>

        buttonClicked(evt)
        {
            (evt.target as HTMLButtonElement).closest('.collapse-container')?.classList.toggle('collapsed');
        }

*/
.collapse-container .collapse-target {
  max-height: initial;
  overflow: hidden;
}

.collapse-container.collapsed .collapse-target {
  max-height: 0;
}

.readOnly {
  pointer-events: none;
}

.not-readOnly {
  pointer-events: all;
}

.zoom-1 {
  zoom: 10%;
}

.zoom-2 {
  zoom: 20%;
}

.zoom-3 {
  zoom: 30%;
}

.zoom-4 {
  zoom: 40%;
}

.zoom-5 {
  zoom: 50%;
}

.zoom-6 {
  zoom: 60%;
}

.zoom-7 {
  zoom: 70%;
}

.zoom-8 {
  zoom: 80%;
}

.zoom-9 {
  zoom: 90%;
}

@media only screen and (max-width: 450px) {
  .mw-75 {
    max-width: unset;
  }
  .mw-80 {
    max-width: unset;
  }
  .mw-85 {
    max-width: unset;
  }
  .mw-90 {
    max-width: unset;
  }
  .mw-95 {
    max-width: unset;
  }
  .w-sm-100 {
    width: 100% !important;
  }
}
/*   color  */
/*   color - element */
/*   color - utility    */
/*   font-size  */
/*  transfer scss variable to css variable */
:root {
  --font-color:#444;
  --shadow-color:#dcdcdc;
  --header-color:#3180C2;
  --border-color:#eee;
  --button-color:#0275d8;
  --button-hover-color:#00b3db;
  --button-disabled-color:button-disabled-color;
  --input-focus-color:orange;
  --input-border-color:#999;
  --input-border-radius: 5px;
  --success-color:green;
  --error-color:red;
  --color-header:#3180C2;
  --color-border:#eee;
  --color-shadow:#dcdcdc;
  --color-success:green;
  --color-error:red;
  --font-size:14px;
  --font-size-sm:0.8rem;
  --font-size-lg:1.5rem;
  --label-width:150px;
  --label-margin-right:4px;
  --color-A:green;
  --color-B:orange;
  --color-C:orange;
  --color-D:#F62817;
  --color-E:#F62817;
  --color-F:#F62817;
  --dialog-z-index: $dialog-z-index;
  /*  overriding bs variables */
  /*  bs modal backdrop zindex is hard coded to 1055 */
  --bs-modal-zindex: 1055;
  /* overriding offcanvas variables */
  --zindex-offcanvas: 1056;
}

/* following are the new variables from Claude Code */
:root {
  /* === Color Tokens === */
  /* Primary Colors */
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  /* Neutral Colors */
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;
  --color-highlight-cyan: #7dd3fc;
  --color-highlight-yellow: #fde047;
  --color-highlight-green: #4ade80;
  --color-highlight-red: #f87171;
  --color-highlight-purple: #a78bfa;
  --color-dark-hover: #263347;
  /* Text Colors */
  --color-text-primary: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;
  /* === Spacing Tokens === */
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-8: 2rem; /* 32px */
  /* === Shadow Tokens (Elevation System) === */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  /* === Border Radius Tokens === */
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  --radius-full: 9999px;
  /* === Typography Tokens === */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* === Transition Tokens === */
  --transition-fast: 150ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  /* === Sidebar-Specific Tokens === */
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 80px;
  --sidebar-bg: var(--color-neutral-900);
  --sidebar-border: var(--color-neutral-800);
  /* === Grade Colors === */
  --grade-color-A: #22c55e;
  --grade-color-B: #86efac;
  --grade-color-C: #eab308;
  --grade-color-D: #f97316;
  --grade-color-F: #ef4444;
}

.mg-form .mg-form-row app-html-editor {
  width: 100%;
}
.mg-form .mg-form-row .html-editor {
  min-width: 150px;
  min-height: 4rem;
  width: 100%;
  border: 1px solid var(--input-border-color);
  border-radius: 5px;
  outline: none;
  padding: 4px 8px;
  font-weight: 400;
}
.mg-form .mg-form-row .html-editor:focus {
  border-color: orange;
}
.mg-form .mg-form-row app-html-editor2 {
  width: calc(100% - 150px - 4px);
}

.mg-form-flex .mg-form-row app-html-editor {
  width: calc(100% - 10px);
}
.mg-form-flex .mg-form-row app-html-editor2 {
  width: calc(100% - 10px);
}

.html-editor-component-container {
  position: relative;
}
.html-editor-component-container .html-editor-menu-icon {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1px solid gray;
  right: 0;
  display: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.html-editor-component-container .html-editor {
  border: 1px solid var(--input-border-color);
  border-radius: 5px;
  outline: none;
  padding: 4px 8px;
  font-weight: 400;
}
.html-editor-component-container .html-editor:focus {
  border-color: orange;
}
.html-editor-component-container:hover .html-editor-menu-icon {
  display: block;
}
.html-editor-component-container .math-container {
  display: inline-block;
}

@media only screen and (max-width: 415px) {
  .html-editor-component-container .html-editor:hover .html-editor-menu-icon {
    display: block;
  }
}
.html-editor2-component-container {
  position: relative;
  outline: none;
  width: 100%;
  /** menu */
  /** active item icon */
  /** image uploader container */
  /** link form container */
  /** .inline-image-container */
  /** gallery */
  /** image container  */
  /** link form container */
  /** color selector */
}
.html-editor2-component-container .editable {
  border: 1px solid var(--input-border-color);
  padding: 10px 8px;
  width: 100%;
  overflow: auto;
  border-radius: var(--input-border-radius);
}
.html-editor2-component-container .editable > div {
  color: #444;
}
.html-editor2-component-container .editable > div:hover {
  background-color: #eee;
}
.html-editor2-component-container .editable:focus {
  border-color: orange;
  outline: none;
}
.html-editor2-component-container .editable > div:first-child {
  width: 100%;
  min-height: 1.4em;
}
.html-editor2-component-container .editable .active-item {
  color: #333;
}
.html-editor2-component-container .editable .ec {
  min-height: 1.4em;
}
.html-editor2-component-container .editable .ec h1, .html-editor2-component-container .editable .ec h2, .html-editor2-component-container .editable .ec h3, .html-editor2-component-container .editable .ec ul {
  margin: 0;
  padding-bottom: 0.5rem;
}
.html-editor2-component-container .editable pre {
  overflow: visible;
  font-size: 14px;
}
.html-editor2-component-container .active-item-menu {
  position: absolute;
  display: block;
  z-index: 2;
  background-color: white;
}
.html-editor2-component-container .active-item-menu .hidden {
  max-height: 0;
  padding: 0;
  margin: 0;
  display: none;
}
.html-editor2-component-container .active-item-menu .menu-item-container {
  margin: 0;
  padding: 0;
  min-width: 200px;
}
.html-editor2-component-container .active-item-menu .menu-item-container .menu-item {
  background-color: inherit;
  padding: 2px 4px;
}
.html-editor2-component-container .active-item-menu .menu-item-container .menu-item:first-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.html-editor2-component-container .active-item-menu .menu-item-container .menu-item:last-child {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.html-editor2-component-container .active-item-menu .menu-item-container .menu-item:hover {
  background-color: #eee;
}
.html-editor2-component-container .active-item-menu .menu-item-container .menu-item.highlight {
  background-color: #eee;
}
.html-editor2-component-container .text-editor-menu-container {
  min-width: 100px;
  max-width: 500px;
  border-radius: 7px;
  box-shadow: 0px 4px 10px #dcdcdc;
  position: absolute;
  margin: 0;
  padding: 0;
  background-color: white;
  display: block;
}
.html-editor2-component-container .text-editor-menu-container.hidden {
  display: none;
}
.html-editor2-component-container .text-editor-menu-container .text-editor-menu {
  height: 30px;
  padding: 0;
  display: flex;
}
.html-editor2-component-container .text-editor-menu-container .text-editor-menu .menu-item {
  height: 100%;
  width: 30px;
  text-align: center;
  padding: 3px;
}
.html-editor2-component-container .text-editor-menu-container .text-editor-menu .menu-item:first-child {
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}
.html-editor2-component-container .text-editor-menu-container .text-editor-menu .menu-item:last-child {
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
}
.html-editor2-component-container .text-editor-menu-container .text-editor-menu .menu-item:hover {
  background-color: #eee;
}
.html-editor2-component-container .text-editor-menu-container .text-editor-menu .menu-item:hover i {
  color: #555;
}
.html-editor2-component-container .text-editor-menu-container .text-editor-menu .menu-item i {
  font-size: 14px;
  color: #888;
}
.html-editor2-component-container .text-editor-menu-container .text-editor-menu .divider span {
  width: 10px;
  height: 100%;
  vertical-align: middle;
  height: 60%;
  border-left: 1px solid #dcdcdc;
}
.html-editor2-component-container .text-editor-menu-container .text-editor-menu .left-spacer {
  margin-left: auto;
}
.html-editor2-component-container .text-editor-menu-container .text-editor-menu .left-spacer:hover {
  background-color: inherit;
}
.html-editor2-component-container .text-editor-menu-container .text-editor-menu div, .html-editor2-component-container .text-editor-menu-container .text-editor-menu span {
  -khtml-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.html-editor2-component-container .active-item-icon-container {
  position: absolute;
  width: 20px;
  height: 20px;
}
.html-editor2-component-container .active-item-icon-container .active-item-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--button-color);
}
.html-editor2-component-container .active-item-icon-container .active-item-icon .toggler {
  position: absolute;
  width: 14px;
  height: 14px;
  text-align: center;
  font-size: 10px;
  top: 1px;
  left: 3px;
  cursor: pointer;
  transform: rotate(180deg);
  color: white;
}
.html-editor2-component-container .active-item-icon-container .dropdown-content {
  width: 250px;
}
.html-editor2-component-container .image-uploader-container {
  position: absolute;
  z-index: 1;
  background-color: white;
}
.html-editor2-component-container .link-form-container {
  position: absolute;
  z-index: 1;
  background-color: white;
}
.html-editor2-component-container .inline-image-container {
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  border: 1px solid transparent;
}
.html-editor2-component-container .inline-image-container:hover {
  border: 1px solid blue;
  resize: both;
  overflow: auto;
}
.html-editor2-component-container .inline-image-container img {
  /*
  max-width:200px;
  max-height: 200px;
  */
}
.html-editor2-component-container .inline-image-container .inline-image-caption {
  text-align: center;
  margin-top: 5px;
  font-style: italic;
}
.html-editor2-component-container .gallery {
  display: block;
}
.html-editor2-component-container .gallery img {
  max-width: 200px;
  max-height: 200px;
}
.html-editor2-component-container .image-container {
  display: inline-block;
  width: 100px;
  height: auto;
  min-height: 1em;
  vertical-align: middle;
}
.html-editor2-component-container .image-container:hover {
  border: 1px solid gray;
  resize: both;
  overflow: auto;
}
.html-editor2-component-container .image-container img {
  max-width: 200px;
  max-height: 200px;
}
.html-editor2-component-container .math-editor-container {
  position: absolute;
  z-index: 1;
  background-color: white;
}
.html-editor2-component-container .math-container {
  display: inline-block;
}
.html-editor2-component-container .color-selector-component-container {
  margin: 0;
  padding: 0;
  padding-top: 2px;
  height: 30px;
  width: 30px;
}
.html-editor2-component-container .color-selector-component-container .toggler {
  width: 20px;
  height: 20px;
  margin-top: 0px !important;
  margin-bottom: 10px;
  padding: 0;
  color: #888;
  font-size: 14px;
  border: 0;
  background-color: inherit !important;
}
.html-editor2-component-container .color-selector-component-container .toggler:hover {
  color: #555;
}
.html-editor2-component-container .color-selector-component-container .toggler::before {
  margin: 0 !important;
  margin-bottom: 10px;
  padding: 0;
  height: 10px;
  vertical-align: middle;
}

.inline-image-container {
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  border: 0;
}
.inline-image-container img {
  max-width: 100%;
}

.math-container {
  display: inline-block;
}

/*   color  */
/*   color - element */
/*   color - utility    */
/*   font-size  */
/*  transfer scss variable to css variable */
:root {
  --font-color:#444;
  --shadow-color:#dcdcdc;
  --header-color:#3180C2;
  --border-color:#eee;
  --button-color:#0275d8;
  --button-hover-color:#00b3db;
  --button-disabled-color:button-disabled-color;
  --input-focus-color:orange;
  --input-border-color:#999;
  --input-border-radius: 5px;
  --success-color:green;
  --error-color:red;
  --color-header:#3180C2;
  --color-border:#eee;
  --color-shadow:#dcdcdc;
  --color-success:green;
  --color-error:red;
  --font-size:14px;
  --font-size-sm:0.8rem;
  --font-size-lg:1.5rem;
  --label-width:150px;
  --label-margin-right:4px;
  --color-A:green;
  --color-B:orange;
  --color-C:orange;
  --color-D:#F62817;
  --color-E:#F62817;
  --color-F:#F62817;
  --dialog-z-index: $dialog-z-index;
  /*  overriding bs variables */
  /*  bs modal backdrop zindex is hard coded to 1055 */
  --bs-modal-zindex: 1055;
  /* overriding offcanvas variables */
  --zindex-offcanvas: 1056;
}

/* following are the new variables from Claude Code */
:root {
  /* === Color Tokens === */
  /* Primary Colors */
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  /* Neutral Colors */
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;
  --color-highlight-cyan: #7dd3fc;
  --color-highlight-yellow: #fde047;
  --color-highlight-green: #4ade80;
  --color-highlight-red: #f87171;
  --color-highlight-purple: #a78bfa;
  --color-dark-hover: #263347;
  /* Text Colors */
  --color-text-primary: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;
  /* === Spacing Tokens === */
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-8: 2rem; /* 32px */
  /* === Shadow Tokens (Elevation System) === */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  /* === Border Radius Tokens === */
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  --radius-full: 9999px;
  /* === Typography Tokens === */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* === Transition Tokens === */
  --transition-fast: 150ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  /* === Sidebar-Specific Tokens === */
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 80px;
  --sidebar-bg: var(--color-neutral-900);
  --sidebar-border: var(--color-neutral-800);
  /* === Grade Colors === */
  --grade-color-A: #22c55e;
  --grade-color-B: #86efac;
  --grade-color-C: #eab308;
  --grade-color-D: #f97316;
  --grade-color-F: #ef4444;
}

.color-selector-component-container {
  margin-bottom: -8px;
}
.color-selector-component-container .toggler {
  border: 1px solid #eee;
  width: 24px;
  height: 26px;
  font-size: 20px;
  text-align: center;
}
.color-selector-component-container .dialog {
  position: absolute;
  background-color: white;
  border: 1px solid #dcdcdc;
  z-index: 1;
  text-align: center;
  box-shadow: 0 3px 10px #dcdcdc;
}
.color-selector-component-container .dialog .color-container {
  display: flex;
  min-width: 190px;
  flex-grow: 0;
  flex-shrink: 0;
  flex-wrap: wrap;
  gap: 5px;
  padding: 4px 8px;
  max-height: 200px;
  overflow-y: auto;
}
.color-selector-component-container .dialog .color-container .select-item {
  width: 20px;
  height: 20px;
  text-align: center;
  border: 1px solid #eee;
}
.color-selector-component-container .dialog .color-container .select-item:hover {
  border: 1px solid #999;
}

/*   color  */
/*   color - element */
/*   color - utility    */
/*   font-size  */
/*  transfer scss variable to css variable */
:root {
  --font-color:#444;
  --shadow-color:#dcdcdc;
  --header-color:#3180C2;
  --border-color:#eee;
  --button-color:#0275d8;
  --button-hover-color:#00b3db;
  --button-disabled-color:button-disabled-color;
  --input-focus-color:orange;
  --input-border-color:#999;
  --input-border-radius: 5px;
  --success-color:green;
  --error-color:red;
  --color-header:#3180C2;
  --color-border:#eee;
  --color-shadow:#dcdcdc;
  --color-success:green;
  --color-error:red;
  --font-size:14px;
  --font-size-sm:0.8rem;
  --font-size-lg:1.5rem;
  --label-width:150px;
  --label-margin-right:4px;
  --color-A:green;
  --color-B:orange;
  --color-C:orange;
  --color-D:#F62817;
  --color-E:#F62817;
  --color-F:#F62817;
  --dialog-z-index: $dialog-z-index;
  /*  overriding bs variables */
  /*  bs modal backdrop zindex is hard coded to 1055 */
  --bs-modal-zindex: 1055;
  /* overriding offcanvas variables */
  --zindex-offcanvas: 1056;
}

/* following are the new variables from Claude Code */
:root {
  /* === Color Tokens === */
  /* Primary Colors */
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  /* Neutral Colors */
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;
  --color-highlight-cyan: #7dd3fc;
  --color-highlight-yellow: #fde047;
  --color-highlight-green: #4ade80;
  --color-highlight-red: #f87171;
  --color-highlight-purple: #a78bfa;
  --color-dark-hover: #263347;
  /* Text Colors */
  --color-text-primary: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;
  /* === Spacing Tokens === */
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-8: 2rem; /* 32px */
  /* === Shadow Tokens (Elevation System) === */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  /* === Border Radius Tokens === */
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  --radius-full: 9999px;
  /* === Typography Tokens === */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* === Transition Tokens === */
  --transition-fast: 150ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  /* === Sidebar-Specific Tokens === */
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 80px;
  --sidebar-bg: var(--color-neutral-900);
  --sidebar-border: var(--color-neutral-800);
  /* === Grade Colors === */
  --grade-color-A: #22c55e;
  --grade-color-B: #86efac;
  --grade-color-C: #eab308;
  --grade-color-D: #f97316;
  --grade-color-F: #ef4444;
}

/* The dropdown container */
.dropdown-component-container {
  display: inline-block;
  position: relative;
}
.dropdown-component-container .dropdown-content {
  max-height: 0;
  min-width: 160px;
  max-width: 500px;
  opacity: 0.2;
  width: fit-content;
  overflow: hidden;
  position: fixed;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  transition: max-height 500ms, opacity 500ms;
}
.dropdown-component-container .dropdown-content.open {
  max-height: 300px;
  opacity: 1;
  animation: 1s delay-overflow;
  overflow: auto;
}
.dropdown-component-container .dropdown-content.close {
  max-height: 0;
  opacity: 0;
}
.dropdown-component-container .dropdown-content .dropdown-item {
  float: none;
  padding: 5px 10px;
  display: inline-block;
  text-align: left;
}
.dropdown-component-container .dropdown-content .dropdown-item:hover {
  background-color: #ddd;
}
.dropdown-component-container .dropdown-content .dropdown-item a {
  float: none;
  color: black;
  padding: 5px 10px;
  text-decoration: none;
  display: inline-block;
  text-align: left;
}
.dropdown-component-container .dropdown-content .dropdown-item:last-child {
  padding-bottom: 8px;
}
.dropdown-component-container .dropdown-content .dropdown-item.disabled {
  color: #ccc;
}
.dropdown-component-container.on-top .dropdown-content {
  top: 0;
}
.dropdown-component-container.over-top .dropdown-content {
  top: -20px;
}
.dropdown-component-container.hover:hover .dropdown-content {
  max-height: 300px;
  opacity: 1;
}

@keyframes delay-overflow {
  from {
    overflow: hidden;
  }
}
section.titled-section {
  margin-top: 10px;
  width: 100%;
  height: 100%;
}
section.titled-section > h3 {
  color: rgb(6, 118, 230);
  font-size: 1.2em;
  margin-left: 4px;
}
section.titled-section > div {
  background-color: #eee;
  border-radius: 10px;
  padding: 5px;
  height: 100%;
}
section.titled-section a {
  text-decoration: none;
  color: #333;
  margin-left: 4px;
  padding: 2px;
  display: block;
}

.icon-strip {
  display: inline-block;
  white-space: nowrap;
}
.icon-strip i {
  margin-right: 4px;
  color: var(--button-color);
  font-size: 14px;
  cursor: pointer;
}
.icon-strip i:last-child {
  margin-right: 0;
}
.icon-strip i:first-child {
  margin-left: 4px;
}

.modal-dialog.model-container.modal-fullscreen .modal-content {
  overflow-y: auto;
  overflow-x: hidden;
}

.chip-component-container {
  min-width: 100px;
  padding: 1px;
  margin: 1px;
  position: relative;
  background-color: white;
  min-height: 2rem;
}
.chip-component-container:hover .chip-container {
  max-height: 200px;
  border: 1px solid #eee;
  border-top: 0;
}
.chip-component-container .chip-container {
  border: 1px solid white;
  border-top: 0;
  max-height: 0;
  background-color: white;
  z-index: 1;
  position: absolute;
  overflow: hidden;
  transition: max-height 1s, border 1s;
  overflow-y: auto;
}
.chip-component-container .chip-item {
  display: inline-block;
  padding: 2px 5px 2px 15px;
  position: relative;
  border-radius: 5px;
  background-color: #eee;
  margin: 2px 2px;
}
.chip-component-container .chip-item i {
  color: #888;
  margin-left: 15px;
  font-size: 9px;
  font-weight: 200;
  vertical-align: middle;
  margin-bottom: 4px;
  cursor: pointer;
}
.chip-component-container .chip-item i::before {
  vertical-align: middle;
}
.chip-component-container .chip-item i:hover {
  background-color: beige;
}
.chip-component-container .chip-item i:hover i.fa-times {
  color: red;
}
.chip-component-container .chip-item i img {
  width: 1.5em;
  border-radius: 50%;
}
.chip-component-container .selected-chip-container {
  border-bottom: 1px solid #b97e7e;
  min-width: 100px;
  min-height: 2em;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}
.chip-component-container .new-chip {
  outline: none;
  /*vertical-align: bottom; */
  display: inline-block;
  min-width: 1px;
  width: auto;
  max-width: 100%;
  flex-grow: 3;
  min-height: 1.5rem;
  padding: 2px 5px 2px 2px;
  margin: 2px;
  margin-left: 0;
  border-radius: 5px;
}
.chip-component-container .new-chip.active {
  background-color: #eee;
}

/* .chip-container .chip-item{
    margin-right:50%;
} */
.price-card-component-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  max-width: 750px;
  margin: auto;
  margin-top: 30px;
}
.price-card-component-container .price-card {
  flex-basis: 200px;
  flex-grow: 0;
  border-radius: 5px;
  background-color: white;
  border-bottom: 0;
  margin: 2px;
  margin-bottom: 10px;
}
.price-card-component-container .price-card.active {
  box-shadow: -25px 0 30px -15px rgba(0, 0, 0, 0.15), 25px 0 30px -15px rgba(0, 0, 0, 0.15);
}
.price-card-component-container .price-card.active .price-card-header {
  background-color: #f14833;
}
.price-card-component-container .price-card.active .price-card-body div {
  border-left: 0;
  border-right: 0;
}
.price-card-component-container .price-card .price-card-header {
  height: 100px;
  text-align: center;
  padding: 10px 20px;
  border-radius: 5px 5px 0 0;
  background-color: #999;
  color: white;
}
.price-card-component-container .price-card .price-card-header h1 {
  font-weight: 200;
}
.price-card-component-container .price-card .price-card-header span {
  font-size: 14px;
}
.price-card-component-container .price-card .price-card-body {
  container-name: body;
}
.price-card-component-container .price-card .price-card-body div {
  padding: 10px;
  text-align: center;
  border-bottom: 1px dotted #dcdcdc;
  border-left: 1px dotted #dcdcdc;
  border-right: 1px dotted #dcdcdc;
  height: 4em;
  display: flex;
  align-items: center;
}
.price-card-component-container .price-card .price-card-body div:last-child {
  border-bottom: 0;
  max-height: unset;
}
.price-card-component-container .price-card .price-card-body div span {
  display: inline-block;
  margin: auto;
}
.price-card-component-container .price-card .price-card-action {
  text-align: center;
  padding: 10px 20px;
  border-radius: 0 0 5px 5px;
  background-color: #ddd;
}
.price-card-component-container .price-card .price-card-action button {
  height: 40px;
  padding: 10px 10px;
}
.price-card-component-container .price-card .price-card-action div {
  height: 42px;
  padding: 10px 10px;
  font-size: 14px;
}
.price-card-component-container .price-card .price-card-action span {
  margin-left: 5px;
  font-weight: 500;
}

@media only screen and (max-width: 760px) {
  .price-card-component-container {
    flex-direction: column;
    justify-content: center;
  }
  .price-card-component-container .price-card {
    max-width: 540px;
    margin: 30px auto;
    margin-top: 0;
  }
}
mjx-container[jax=SVG][display=true].MathJax {
  margin: 0;
  width: fit-content;
}

/*   color  */
/*   color - element */
/*   color - utility    */
/*   font-size  */
/*  transfer scss variable to css variable */
:root {
  --font-color:#444;
  --shadow-color:#dcdcdc;
  --header-color:#3180C2;
  --border-color:#eee;
  --button-color:#0275d8;
  --button-hover-color:#00b3db;
  --button-disabled-color:button-disabled-color;
  --input-focus-color:orange;
  --input-border-color:#999;
  --input-border-radius: 5px;
  --success-color:green;
  --error-color:red;
  --color-header:#3180C2;
  --color-border:#eee;
  --color-shadow:#dcdcdc;
  --color-success:green;
  --color-error:red;
  --font-size:14px;
  --font-size-sm:0.8rem;
  --font-size-lg:1.5rem;
  --label-width:150px;
  --label-margin-right:4px;
  --color-A:green;
  --color-B:orange;
  --color-C:orange;
  --color-D:#F62817;
  --color-E:#F62817;
  --color-F:#F62817;
  --dialog-z-index: $dialog-z-index;
  /*  overriding bs variables */
  /*  bs modal backdrop zindex is hard coded to 1055 */
  --bs-modal-zindex: 1055;
  /* overriding offcanvas variables */
  --zindex-offcanvas: 1056;
}

/* following are the new variables from Claude Code */
:root {
  /* === Color Tokens === */
  /* Primary Colors */
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  /* Neutral Colors */
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;
  --color-highlight-cyan: #7dd3fc;
  --color-highlight-yellow: #fde047;
  --color-highlight-green: #4ade80;
  --color-highlight-red: #f87171;
  --color-highlight-purple: #a78bfa;
  --color-dark-hover: #263347;
  /* Text Colors */
  --color-text-primary: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;
  /* === Spacing Tokens === */
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-8: 2rem; /* 32px */
  /* === Shadow Tokens (Elevation System) === */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  /* === Border Radius Tokens === */
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  --radius-full: 9999px;
  /* === Typography Tokens === */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* === Transition Tokens === */
  --transition-fast: 150ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  /* === Sidebar-Specific Tokens === */
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 80px;
  --sidebar-bg: var(--color-neutral-900);
  --sidebar-border: var(--color-neutral-800);
  /* === Grade Colors === */
  --grade-color-A: #22c55e;
  --grade-color-B: #86efac;
  --grade-color-C: #eab308;
  --grade-color-D: #f97316;
  --grade-color-F: #ef4444;
}

#dialog-latex-form {
  position: absolute;
  z-index: 99999;
  background-color: white;
  border: 1px solid #eee;
  width: 300px;
}

/*   color  */
/*   color - element */
/*   color - utility    */
/*   font-size  */
/*  transfer scss variable to css variable */
:root {
  --font-color:#444;
  --shadow-color:#dcdcdc;
  --header-color:#3180C2;
  --border-color:#eee;
  --button-color:#0275d8;
  --button-hover-color:#00b3db;
  --button-disabled-color:button-disabled-color;
  --input-focus-color:orange;
  --input-border-color:#999;
  --input-border-radius: 5px;
  --success-color:green;
  --error-color:red;
  --color-header:#3180C2;
  --color-border:#eee;
  --color-shadow:#dcdcdc;
  --color-success:green;
  --color-error:red;
  --font-size:14px;
  --font-size-sm:0.8rem;
  --font-size-lg:1.5rem;
  --label-width:150px;
  --label-margin-right:4px;
  --color-A:green;
  --color-B:orange;
  --color-C:orange;
  --color-D:#F62817;
  --color-E:#F62817;
  --color-F:#F62817;
  --dialog-z-index: $dialog-z-index;
  /*  overriding bs variables */
  /*  bs modal backdrop zindex is hard coded to 1055 */
  --bs-modal-zindex: 1055;
  /* overriding offcanvas variables */
  --zindex-offcanvas: 1056;
}

/* following are the new variables from Claude Code */
:root {
  /* === Color Tokens === */
  /* Primary Colors */
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  /* Neutral Colors */
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;
  --color-highlight-cyan: #7dd3fc;
  --color-highlight-yellow: #fde047;
  --color-highlight-green: #4ade80;
  --color-highlight-red: #f87171;
  --color-highlight-purple: #a78bfa;
  --color-dark-hover: #263347;
  /* Text Colors */
  --color-text-primary: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;
  /* === Spacing Tokens === */
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-8: 2rem; /* 32px */
  /* === Shadow Tokens (Elevation System) === */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  /* === Border Radius Tokens === */
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  --radius-full: 9999px;
  /* === Typography Tokens === */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* === Transition Tokens === */
  --transition-fast: 150ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  /* === Sidebar-Specific Tokens === */
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 80px;
  --sidebar-bg: var(--color-neutral-900);
  --sidebar-border: var(--color-neutral-800);
  /* === Grade Colors === */
  --grade-color-A: #22c55e;
  --grade-color-B: #86efac;
  --grade-color-C: #eab308;
  --grade-color-D: #f97316;
  --grade-color-F: #ef4444;
}

.model-mapping-children-component-container.singular_Practice .model-table-container.singular_Practice .button-row {
  display: none !important;
}
.model-mapping-children-component-container.singular_Practice .model-table-container.singular_Practice table thead {
  display: none;
}
.model-mapping-children-component-container.singular_Practice .model-table-container.singular_Practice table td {
  display: none;
}
.model-mapping-children-component-container.singular_Practice .model-table-container.singular_Practice table td.td-Name {
  display: table-cell;
  padding: 10px;
}
.model-mapping-children-component-container.singular_Practice .model-table-container.singular_Practice table td.buttons {
  display: table-cell;
}
.model-mapping-children-component-container.singular_Practice .model-table-container.singular_Practice table td.buttons i.fa-pencil, .model-mapping-children-component-container.singular_Practice .model-table-container.singular_Practice table td.buttons i.cdk-drag-handle {
  display: none;
}

/*   color  */
/*   color - element */
/*   color - utility    */
/*   font-size  */
/*  transfer scss variable to css variable */
:root {
  --font-color:#444;
  --shadow-color:#dcdcdc;
  --header-color:#3180C2;
  --border-color:#eee;
  --button-color:#0275d8;
  --button-hover-color:#00b3db;
  --button-disabled-color:button-disabled-color;
  --input-focus-color:orange;
  --input-border-color:#999;
  --input-border-radius: 5px;
  --success-color:green;
  --error-color:red;
  --color-header:#3180C2;
  --color-border:#eee;
  --color-shadow:#dcdcdc;
  --color-success:green;
  --color-error:red;
  --font-size:14px;
  --font-size-sm:0.8rem;
  --font-size-lg:1.5rem;
  --label-width:150px;
  --label-margin-right:4px;
  --color-A:green;
  --color-B:orange;
  --color-C:orange;
  --color-D:#F62817;
  --color-E:#F62817;
  --color-F:#F62817;
  --dialog-z-index: $dialog-z-index;
  /*  overriding bs variables */
  /*  bs modal backdrop zindex is hard coded to 1055 */
  --bs-modal-zindex: 1055;
  /* overriding offcanvas variables */
  --zindex-offcanvas: 1056;
}

/* following are the new variables from Claude Code */
:root {
  /* === Color Tokens === */
  /* Primary Colors */
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  /* Neutral Colors */
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;
  --color-highlight-cyan: #7dd3fc;
  --color-highlight-yellow: #fde047;
  --color-highlight-green: #4ade80;
  --color-highlight-red: #f87171;
  --color-highlight-purple: #a78bfa;
  --color-dark-hover: #263347;
  /* Text Colors */
  --color-text-primary: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;
  /* === Spacing Tokens === */
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-8: 2rem; /* 32px */
  /* === Shadow Tokens (Elevation System) === */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  /* === Border Radius Tokens === */
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  --radius-full: 9999px;
  /* === Typography Tokens === */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* === Transition Tokens === */
  --transition-fast: 150ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  /* === Sidebar-Specific Tokens === */
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 80px;
  --sidebar-bg: var(--color-neutral-900);
  --sidebar-border: var(--color-neutral-800);
  /* === Grade Colors === */
  --grade-color-A: #22c55e;
  --grade-color-B: #86efac;
  --grade-color-C: #eab308;
  --grade-color-D: #f97316;
  --grade-color-F: #ef4444;
}

.search-practice-container .searchAndAdd {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
}
.search-practice-container i.fa-pencil {
  cursor: pointer;
}
.search-practice-container .mg-table tr:nth-child(even) {
  background-color: ivory;
}
.search-practice-container .leitner-box-component-container thead {
  display: none;
}
.search-practice-container .search-practice-please-wait {
  margin: auto;
  width: fit-content;
  margin-top: 10px;
  margin-bottom: 10px;
}
.search-practice-container .search-practice-form .label {
  display: inline-block;
  width: 100px;
}
.search-practice-container .search-question-form .label {
  display: inline-block;
  width: 100px;
}
.search-practice-container .blue-button svg {
  color: rgb(6, 118, 230) !important;
}

@media only screen and (max-width: 768px) {
  .search-practice-container {
    padding-left: 5px;
    padding-bottom: 200px;
  }
  .search-practice-container .btn-filter {
    display: none;
  }
  .search-practice-container .mg-table tr:nth-child(even) {
    background-color: ivory;
  }
  .search-practice-container .searchAndAdd {
    flex-direction: column;
    gap: 4px;
  }
  .search-practice-container .question-table .mg-table {
    width: 100%;
  }
  .search-practice-container .question-table .mg-table td:first-child {
    padding: 10px;
  }
  .search-practice-container .search-practice-form .label {
    display: inline-block;
    width: 80px;
  }
  .search-practice-container .search-question-form .label {
    display: inline-block;
    width: 80px;
  }
}
/*   color  */
/*   color - element */
/*   color - utility    */
/*   font-size  */
/*  transfer scss variable to css variable */
:root {
  --font-color:#444;
  --shadow-color:#dcdcdc;
  --header-color:#3180C2;
  --border-color:#eee;
  --button-color:#0275d8;
  --button-hover-color:#00b3db;
  --button-disabled-color:button-disabled-color;
  --input-focus-color:orange;
  --input-border-color:#999;
  --input-border-radius: 5px;
  --success-color:green;
  --error-color:red;
  --color-header:#3180C2;
  --color-border:#eee;
  --color-shadow:#dcdcdc;
  --color-success:green;
  --color-error:red;
  --font-size:14px;
  --font-size-sm:0.8rem;
  --font-size-lg:1.5rem;
  --label-width:150px;
  --label-margin-right:4px;
  --color-A:green;
  --color-B:orange;
  --color-C:orange;
  --color-D:#F62817;
  --color-E:#F62817;
  --color-F:#F62817;
  --dialog-z-index: $dialog-z-index;
  /*  overriding bs variables */
  /*  bs modal backdrop zindex is hard coded to 1055 */
  --bs-modal-zindex: 1055;
  /* overriding offcanvas variables */
  --zindex-offcanvas: 1056;
}

/* following are the new variables from Claude Code */
:root {
  /* === Color Tokens === */
  /* Primary Colors */
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  /* Neutral Colors */
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;
  --color-highlight-cyan: #7dd3fc;
  --color-highlight-yellow: #fde047;
  --color-highlight-green: #4ade80;
  --color-highlight-red: #f87171;
  --color-highlight-purple: #a78bfa;
  --color-dark-hover: #263347;
  /* Text Colors */
  --color-text-primary: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;
  /* === Spacing Tokens === */
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-8: 2rem; /* 32px */
  /* === Shadow Tokens (Elevation System) === */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  /* === Border Radius Tokens === */
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  --radius-full: 9999px;
  /* === Typography Tokens === */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* === Transition Tokens === */
  --transition-fast: 150ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  /* === Sidebar-Specific Tokens === */
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 80px;
  --sidebar-bg: var(--color-neutral-900);
  --sidebar-border: var(--color-neutral-800);
  /* === Grade Colors === */
  --grade-color-A: #22c55e;
  --grade-color-B: #86efac;
  --grade-color-C: #eab308;
  --grade-color-D: #f97316;
  --grade-color-F: #ef4444;
}

/**  common */
.question-view-component-container {
  margin-top: 20px;
  width: 100%;
}
.question-view-component-container .bordered-container {
  border-left: 4px solid gray;
  margin-left: 4px;
  padding: 10px;
}
.question-view-component-container .bordered-container.color10 {
  border-color: red;
}
.question-view-component-container .bordered-container.color20 {
  border-color: rgb(139, 30, 30);
}
.question-view-component-container .bordered-container.color40 {
  border-color: rgb(141, 156, 30);
}
.question-view-component-container .bordered-container.color60 {
  border-color: rgb(15, 183, 195);
}
.question-view-component-container .bordered-container.border-color-A {
  border-color: var(--color-A);
}
.question-view-component-container .bordered-container.border-color-B {
  border-color: var(--color-B);
}
.question-view-component-container .bordered-container.border-color-C {
  border-color: var(--color-C);
}
.question-view-component-container .bordered-container.border-color-D {
  border-color: var(--color-D);
}
.question-view-component-container .bordered-container.border-color-E {
  border-color: var(--color-E);
}
.question-view-component-container .bordered-container.border-color-F {
  border-color: var(--color-F);
}
.question-view-component-container .bordered-container .question-number {
  width: 10px;
  font-size: 10px;
}
.question-view-component-container:hover {
  box-shadow: 0 0 15px 10px #f3d6d6;
}
.question-view-component-container .question {
  margin-bottom: 20px;
}
.question-view-component-container .menu-buttons-container {
  white-space: nowrap;
}
.question-view-component-container .menu-buttons-container span * {
  white-space: normal;
}
.question-view-component-container .audio {
  margin-right: 20px;
  color: rgb(46, 151, 186);
}
.question-view-component-container .answer {
  margin-left: 10px;
}
.question-view-component-container .result-container {
  padding-top: 20px;
}
.question-view-component-container .result-container .hint {
  margin-top: 10px;
}
.question-view-component-container .result-container .review-notes-container {
  margin-top: 10px;
}
.question-view-component-container .result-container .review-notes-container textarea {
  width: 100%;
  outline: none;
}
.question-view-component-container .result-container .review-notes-container textarea:focus {
  border-color: orange;
}
.question-view-component-container .btn-submit {
  margin-top: 20px;
}
.question-view-component-container .result-correct {
  color: green;
  font-size: 1.2em;
}
.question-view-component-container .result-incorrect {
  color: red;
  font-size: 1.2em;
}
.question-view-component-container .correct-answers {
  margin-top: 10px;
}
.question-view-component-container .btn-retry {
  margin-top: 20px;
}
.question-view-component-container .btn-next {
  margin-top: 20px;
}
.question-view-component-container .addition-info-container {
  margin-top: 10px;
}
.question-view-component-container .addition-info-container a {
  margin-right: 10px;
}
.question-view-component-container .question-container {
  display: flex;
  justify-content: space-between;
}
.question-view-component-container .question-container .question div.ec:first-child {
  font-size: 1.5rem;
  font-weight: 500;
}
.question-view-component-container .question-container .question div.ec:empty {
  height: 1rem;
}
.question-view-component-container .result-container-vc {
  padding-top: 0px;
}
.question-view-component-container .result-container-vc .hint {
  font-size: 1.3rem;
}
.question-view-component-container .score-container {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
.question-view-component-container .score-container span {
  display: inline-block;
  background-color: greenyellow;
  border-radius: 10px;
  padding: 0px 5px;
  margin-left: 4px;
}
.question-view-component-container.spelling .answer-container-fb .answer-container {
  border: 1px solid var(--input-border-color);
  min-width: 100px;
  padding-left: 5px;
  padding-right: 5px;
}
.question-view-component-container.spelling .result-container-fb .answer-container {
  background-color: unset;
  margin-top: 10px;
  font-weight: 600;
}
.question-view-component-container .inline-image-container {
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  border: 1px solid transparent;
  font-weight: 400;
}
.question-view-component-container .inline-image-container .inline-image-caption {
  text-align: center;
  margin-top: 5px;
  font-style: italic;
}

@media only screen and (max-width: 450px) {
  .question-view-component-container {
    padding: 0;
  }
}
/*   color  */
/*   color - element */
/*   color - utility    */
/*   font-size  */
/*  transfer scss variable to css variable */
:root {
  --font-color:#444;
  --shadow-color:#dcdcdc;
  --header-color:#3180C2;
  --border-color:#eee;
  --button-color:#0275d8;
  --button-hover-color:#00b3db;
  --button-disabled-color:button-disabled-color;
  --input-focus-color:orange;
  --input-border-color:#999;
  --input-border-radius: 5px;
  --success-color:green;
  --error-color:red;
  --color-header:#3180C2;
  --color-border:#eee;
  --color-shadow:#dcdcdc;
  --color-success:green;
  --color-error:red;
  --font-size:14px;
  --font-size-sm:0.8rem;
  --font-size-lg:1.5rem;
  --label-width:150px;
  --label-margin-right:4px;
  --color-A:green;
  --color-B:orange;
  --color-C:orange;
  --color-D:#F62817;
  --color-E:#F62817;
  --color-F:#F62817;
  --dialog-z-index: $dialog-z-index;
  /*  overriding bs variables */
  /*  bs modal backdrop zindex is hard coded to 1055 */
  --bs-modal-zindex: 1055;
  /* overriding offcanvas variables */
  --zindex-offcanvas: 1056;
}

/* following are the new variables from Claude Code */
:root {
  /* === Color Tokens === */
  /* Primary Colors */
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  /* Neutral Colors */
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;
  --color-highlight-cyan: #7dd3fc;
  --color-highlight-yellow: #fde047;
  --color-highlight-green: #4ade80;
  --color-highlight-red: #f87171;
  --color-highlight-purple: #a78bfa;
  --color-dark-hover: #263347;
  /* Text Colors */
  --color-text-primary: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;
  /* === Spacing Tokens === */
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-8: 2rem; /* 32px */
  /* === Shadow Tokens (Elevation System) === */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  /* === Border Radius Tokens === */
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  --radius-full: 9999px;
  /* === Typography Tokens === */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* === Transition Tokens === */
  --transition-fast: 150ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  /* === Sidebar-Specific Tokens === */
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 80px;
  --sidebar-bg: var(--color-neutral-900);
  --sidebar-border: var(--color-neutral-800);
  /* === Grade Colors === */
  --grade-color-A: #22c55e;
  --grade-color-B: #86efac;
  --grade-color-C: #eab308;
  --grade-color-D: #f97316;
  --grade-color-F: #ef4444;
}

.practice-view-component-container {
  padding-bottom: 20px;
  background-color: white;
  outline: 1px solid #dcdcdc;
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}
.practice-view-component-container .header {
  position: sticky;
  top: 60px;
  z-index: 10;
  text-align: center;
  padding: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: white;
}
.practice-view-component-container .header .name {
  margin-left: 5px;
  font-weight: 600;
}
.practice-view-component-container .header .buttons-container {
  margin-right: 5px;
}
.practice-view-component-container .header .dropdown-content {
  width: 200px;
}
.practice-view-component-container .instruction {
  margin: 5px;
  padding: 0 10px;
  font-style: italic;
  width: 100%;
}
.practice-view-component-container .bottom-button-row {
  display: flex;
  justify-content: space-between;
  margin: 20px 5px;
  margin-top: 50px;
}
.practice-view-component-container .no-record-found {
  margin-top: 20px;
}

@media only screen and (max-width: 450px) {
  .practice-view-component-container {
    width: calc(100% - 6px);
  }
}
/*   color  */
/*   color - element */
/*   color - utility    */
/*   font-size  */
/*  transfer scss variable to css variable */
:root {
  --font-color:#444;
  --shadow-color:#dcdcdc;
  --header-color:#3180C2;
  --border-color:#eee;
  --button-color:#0275d8;
  --button-hover-color:#00b3db;
  --button-disabled-color:button-disabled-color;
  --input-focus-color:orange;
  --input-border-color:#999;
  --input-border-radius: 5px;
  --success-color:green;
  --error-color:red;
  --color-header:#3180C2;
  --color-border:#eee;
  --color-shadow:#dcdcdc;
  --color-success:green;
  --color-error:red;
  --font-size:14px;
  --font-size-sm:0.8rem;
  --font-size-lg:1.5rem;
  --label-width:150px;
  --label-margin-right:4px;
  --color-A:green;
  --color-B:orange;
  --color-C:orange;
  --color-D:#F62817;
  --color-E:#F62817;
  --color-F:#F62817;
  --dialog-z-index: $dialog-z-index;
  /*  overriding bs variables */
  /*  bs modal backdrop zindex is hard coded to 1055 */
  --bs-modal-zindex: 1055;
  /* overriding offcanvas variables */
  --zindex-offcanvas: 1056;
}

/* following are the new variables from Claude Code */
:root {
  /* === Color Tokens === */
  /* Primary Colors */
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  /* Neutral Colors */
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;
  --color-highlight-cyan: #7dd3fc;
  --color-highlight-yellow: #fde047;
  --color-highlight-green: #4ade80;
  --color-highlight-red: #f87171;
  --color-highlight-purple: #a78bfa;
  --color-dark-hover: #263347;
  /* Text Colors */
  --color-text-primary: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;
  /* === Spacing Tokens === */
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-8: 2rem; /* 32px */
  /* === Shadow Tokens (Elevation System) === */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  /* === Border Radius Tokens === */
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  --radius-full: 9999px;
  /* === Typography Tokens === */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* === Transition Tokens === */
  --transition-fast: 150ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  /* === Sidebar-Specific Tokens === */
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 80px;
  --sidebar-bg: var(--color-neutral-900);
  --sidebar-border: var(--color-neutral-800);
  /* === Grade Colors === */
  --grade-color-A: #22c55e;
  --grade-color-B: #86efac;
  --grade-color-C: #eab308;
  --grade-color-D: #f97316;
  --grade-color-F: #ef4444;
}

.practise-component-container {
  max-width: 800px;
  padding-left: 10px;
  padding-top: 10px;
  margin: auto;
}

.export-practice {
  width: 100%;
  overflow: scroll;
  padding: 3px;
}

@media only screen and (max-width: 450px) {
  .practise-component-container {
    width: 100%;
    padding: 0;
    margin: 0;
  }
}
/*   color  */
/*   color - element */
/*   color - utility    */
/*   font-size  */
/*  transfer scss variable to css variable */
:root {
  --font-color:#444;
  --shadow-color:#dcdcdc;
  --header-color:#3180C2;
  --border-color:#eee;
  --button-color:#0275d8;
  --button-hover-color:#00b3db;
  --button-disabled-color:button-disabled-color;
  --input-focus-color:orange;
  --input-border-color:#999;
  --input-border-radius: 5px;
  --success-color:green;
  --error-color:red;
  --color-header:#3180C2;
  --color-border:#eee;
  --color-shadow:#dcdcdc;
  --color-success:green;
  --color-error:red;
  --font-size:14px;
  --font-size-sm:0.8rem;
  --font-size-lg:1.5rem;
  --label-width:150px;
  --label-margin-right:4px;
  --color-A:green;
  --color-B:orange;
  --color-C:orange;
  --color-D:#F62817;
  --color-E:#F62817;
  --color-F:#F62817;
  --dialog-z-index: $dialog-z-index;
  /*  overriding bs variables */
  /*  bs modal backdrop zindex is hard coded to 1055 */
  --bs-modal-zindex: 1055;
  /* overriding offcanvas variables */
  --zindex-offcanvas: 1056;
}

/* following are the new variables from Claude Code */
:root {
  /* === Color Tokens === */
  /* Primary Colors */
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  /* Neutral Colors */
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;
  --color-highlight-cyan: #7dd3fc;
  --color-highlight-yellow: #fde047;
  --color-highlight-green: #4ade80;
  --color-highlight-red: #f87171;
  --color-highlight-purple: #a78bfa;
  --color-dark-hover: #263347;
  /* Text Colors */
  --color-text-primary: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;
  /* === Spacing Tokens === */
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-8: 2rem; /* 32px */
  /* === Shadow Tokens (Elevation System) === */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  /* === Border Radius Tokens === */
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  --radius-full: 9999px;
  /* === Typography Tokens === */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* === Transition Tokens === */
  --transition-fast: 150ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  /* === Sidebar-Specific Tokens === */
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 80px;
  --sidebar-bg: var(--color-neutral-900);
  --sidebar-border: var(--color-neutral-800);
  /* === Grade Colors === */
  --grade-color-A: #22c55e;
  --grade-color-B: #86efac;
  --grade-color-C: #eab308;
  --grade-color-D: #f97316;
  --grade-color-F: #ef4444;
}

.question-table-component-container .btn-filter {
  display: block;
}
.question-table-component-container .mg-table {
  width: 100%;
}
.question-table-component-container .mg-table th {
  font-size: 10px;
  padding: 10px;
}
.question-table-component-container .mg-table i {
  color: var(--button-color);
}
.question-table-component-container .mg-table td:nth-child(2) {
  font-size: 18px;
  padding: 10px;
}
.question-table-component-container .mg-table th:nth-child(1), .question-table-component-container .mg-table th:nth-child(3), .question-table-component-container .mg-table th:nth-child(5) {
  display: none;
}
.question-table-component-container .mg-table td:nth-child(1), .question-table-component-container .mg-table td:nth-child(3), .question-table-component-container .mg-table td:nth-child(5) {
  display: none;
}
.question-table-component-container .mg-table td.buttons {
  white-space: nowrap;
}

@media only screen and (max-width: 450px) {
  .container {
    min-width: 100% !important;
  }
  .question-table-component-container {
    padding-bottom: 100px;
  }
  .question-table-component-container .btn-filter {
    display: none;
  }
  .question-table-component-container .mg-table {
    width: 100%;
  }
  .question-table-component-container .mg-table th {
    font-size: 10px;
    padding: 10px;
  }
  .question-table-component-container .mg-table i {
    color: var(--button-color);
  }
  .question-table-component-container .mg-table td:nth-child(2) {
    font-size: 18px;
    padding: 10px;
  }
  .question-table-component-container .mg-table th:nth-child(1), .question-table-component-container .mg-table th:nth-child(3) {
    display: none;
  }
  .question-table-component-container .mg-table td:nth-child(1), .question-table-component-container .mg-table td:nth-child(3) {
    display: none;
  }
  .question-table-component-container .mg-table td.buttons {
    white-space: nowrap;
  }
}
/*   color  */
/*   color - element */
/*   color - utility    */
/*   font-size  */
/*  transfer scss variable to css variable */
:root {
  --font-color:#444;
  --shadow-color:#dcdcdc;
  --header-color:#3180C2;
  --border-color:#eee;
  --button-color:#0275d8;
  --button-hover-color:#00b3db;
  --button-disabled-color:button-disabled-color;
  --input-focus-color:orange;
  --input-border-color:#999;
  --input-border-radius: 5px;
  --success-color:green;
  --error-color:red;
  --color-header:#3180C2;
  --color-border:#eee;
  --color-shadow:#dcdcdc;
  --color-success:green;
  --color-error:red;
  --font-size:14px;
  --font-size-sm:0.8rem;
  --font-size-lg:1.5rem;
  --label-width:150px;
  --label-margin-right:4px;
  --color-A:green;
  --color-B:orange;
  --color-C:orange;
  --color-D:#F62817;
  --color-E:#F62817;
  --color-F:#F62817;
  --dialog-z-index: $dialog-z-index;
  /*  overriding bs variables */
  /*  bs modal backdrop zindex is hard coded to 1055 */
  --bs-modal-zindex: 1055;
  /* overriding offcanvas variables */
  --zindex-offcanvas: 1056;
}

/* following are the new variables from Claude Code */
:root {
  /* === Color Tokens === */
  /* Primary Colors */
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  /* Neutral Colors */
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;
  --color-highlight-cyan: #7dd3fc;
  --color-highlight-yellow: #fde047;
  --color-highlight-green: #4ade80;
  --color-highlight-red: #f87171;
  --color-highlight-purple: #a78bfa;
  --color-dark-hover: #263347;
  /* Text Colors */
  --color-text-primary: #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;
  /* === Spacing Tokens === */
  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.25rem; /* 20px */
  --spacing-6: 1.5rem; /* 24px */
  --spacing-8: 2rem; /* 32px */
  /* === Shadow Tokens (Elevation System) === */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  /* === Border Radius Tokens === */
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  --radius-full: 9999px;
  /* === Typography Tokens === */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* === Transition Tokens === */
  --transition-fast: 150ms;
  --transition-base: 200ms;
  --transition-slow: 300ms;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  /* === Sidebar-Specific Tokens === */
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 80px;
  --sidebar-bg: var(--color-neutral-900);
  --sidebar-border: var(--color-neutral-800);
  /* === Grade Colors === */
  --grade-color-A: #22c55e;
  --grade-color-B: #86efac;
  --grade-color-C: #eab308;
  --grade-color-D: #f97316;
  --grade-color-F: #ef4444;
}

div[mg-trophy] textarea {
  width: 300px;
  height: 100px;
}

/** selector component **/
.selector-component-container {
  width: 100%;
}
.selector-component-container input[read-only] {
  border-width: 1px;
}
.selector-component-container input {
  width: 100%;
  border: 1px solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  padding: 4px 8px;
  outline: none;
}
.selector-component-container input:focus {
  border-color: var(--input-focus-color);
}
.selector-component-container .dialog {
  position: absolute;
  background-color: white;
  border: 1px solid #dcdcdc;
  z-index: 10;
  overflow-x: hidden;
  overflow-y: auto;
}
.selector-component-container .dropdown-item {
  padding-left: 5px;
  padding-right: 5px;
  min-width: 100px;
  height: 1.5em;
  font-size: 1em;
  vertical-align: middle;
}
.selector-component-container .dropdown-item:hover {
  background-color: #eee;
}

/** seven-day-selector-component-container */
.seven-day-selector-component-container {
  display: flex;
  flex-shrink: 0;
  flex-grow: 0;
  gap: 3%;
  justify-content: space-between;
}
.seven-day-selector-component-container.is-readonly {
  max-width: 100px;
}
.seven-day-selector-component-container.is-editor {
  justify-content: space-between;
}
.seven-day-selector-component-container .day span {
  display: block;
  text-align: center;
  font-weight: 600;
}
.seven-day-selector-component-container .day label {
  display: block;
  text-align: center;
  font-weight: 600;
}
.seven-day-selector-component-container .day input {
  display: block;
  margin: auto;
  margin-top: 4px;
}
.seven-day-selector-component-container .day-circle {
  aspect-ratio: 1/1;
  width: 80%;
  border-radius: 50%;
  background-color: #ddd;
}
.seven-day-selector-component-container .day-circle.selected {
  background-color: green;
}

/** selector-component-container */
.mg-form app-selector {
  width: 100%;
}
.mg-form app-selector .selector-component-container {
  width: 100%;
}
.mg-form app-selector .selector-component-container input[read-only] {
  border-width: 1px;
}
.mg-form app-selector .selector-component-container input {
  width: 100%;
  border: 1px solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  padding: 4px 8px;
  outline: none;
}
.mg-form app-selector .selector-component-container input:focus {
  border-color: var(--input-focus-color);
}
.mg-form app-selector .selector-component-container .dialog {
  position: absolute;
  background-color: white;
  border: 1px solid #dcdcdc;
  z-index: 10;
  overflow-x: hidden;
  overflow-y: auto;
}
.mg-form app-selector .selector-component-container .dropdown-item {
  padding-left: 5px;
  padding-right: 5px;
  min-width: 100px;
  height: 1.5em;
  font-size: 1em;
  vertical-align: middle;
}
.mg-form app-selector .selector-component-container .dropdown-item:hover {
  background-color: #eee;
}

.mg-form-flex app-selector {
  width: calc(100% - 10px);
}

/** audio field component **/
.mg-form .mg-form-row app-audio-field {
  width: 100%;
}
.mg-form .mg-form-row app-audio-field input {
  border: 1px solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  outline: none;
  padding: 4px 8px;
}
.mg-form .mg-form-row app-audio-field input:focus {
  border-color: var(--input-focus-color);
}

.mg-form-flex .mg-form-row app-audio-field {
  width: calc(100% - 10px);
}

/** tabs **/
.tab-component-container .tabs {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  gap: 5px;
  box-shadow: inset 0 -1px 0px #eee;
}
.tab-component-container .tabs .tab {
  padding: 7px 15px;
  background-color: #eee;
  cursor: pointer;
  min-width: 80px;
  text-align: center;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  line-height: 1.4rem;
}
.tab-component-container .tabs .tab:hover {
  background-color: #dcdcdc;
}
.tab-component-container .tabs .tab.selected {
  background-color: white;
  cursor: default;
  font-weight: 600;
  border: 1px solid #eee;
  border-top: 2px solid orange;
  border-bottom: 2px solid white;
}
.tab-component-container .tabs .left-spacer {
  width: 10px;
}
.tab-component-container .tabs .right-spacer {
  flex-grow: 1;
  margin-right: auto;
}

/**  pleasewait component */
.pleasewait-component-container {
  display: flex;
  align-items: center;
  width: 100%;
  margin: auto;
}
.pleasewait-component-container .spinner-border {
  margin-left: 1rem;
  width: 1rem;
  height: 1rem;
}
.pleasewait-component-container .spinner-text {
  margin-left: 1rem;
  font-size: 14px;
}

/** search-criteria-component */
.search-criteria-component-container input:not([type=radio], [type=checkbox]), .search-criteria-component-container select, .search-criteria-component-container textarea {
  min-width: 100px;
  height: 2rem;
  border: 1px solid #999;
  border-radius: 0;
  width: 100%;
  padding: 4px 8px;
  border-radius: 5px;
}
.search-criteria-component-container input:not([type=radio], [type=checkbox]):focus, .search-criteria-component-container select:focus, .search-criteria-component-container textarea:focus {
  outline: none;
  border: 1px solid orange;
}
.search-criteria-component-container input:not([type=radio], [type=checkbox])[readonly], .search-criteria-component-container select[readonly], .search-criteria-component-container textarea[readonly] {
  border: 0;
  resize: none;
}
.search-criteria-component-container input:not([type=radio], [type=checkbox])[readonly]:focus, .search-criteria-component-container select[readonly]:focus, .search-criteria-component-container textarea[readonly]:focus {
  border: 0;
}
.search-criteria-component-container input[type=checkbox] {
  height: 2rem;
  vertical-align: middle;
}
.search-criteria-component-container input[type=radio] {
  height: 2rem;
  vertical-align: middle;
}
.search-criteria-component-container textarea {
  height: 4em;
}
.search-criteria-component-container select {
  padding: 2px 4px;
}

/** five-star component **/
.five-stars-component-container {
  font-size: 14px;
  display: inline-block;
}
.five-stars-component-container .star {
  color: gray;
}
.five-stars-component-container .star:before {
  content: "★";
}
.five-stars-component-container .star.on {
  color: gold;
}
.five-stars-component-container .star.off {
  color: gray;
}
.five-stars-component-container .star.off:hover {
  color: gold;
}

.cart-icon-component-container {
  position: relative;
  background-color: #eee;
  padding: 10px;
  border-radius: 50%;
  width: 2em;
  height: 2em;
  color: #777;
}
.cart-icon-component-container span {
  position: absolute;
  display: inline-block;
  color: red;
  font-size: 10px;
  font-weight: 500;
  text-align: center;
  left: 20%;
  top: 0px;
  width: 2em;
}
.cart-icon-component-container svg {
  display: inline-block;
  position: absolute;
  left: 10%;
  top: 8px;
  font-size: 14px;
  line-height: 1em;
}

.price-fancy-component-container {
  position: relative;
  display: inline-block;
}
.price-fancy-component-container .symbol, .price-fancy-component-container .decimal {
  display: inline-block;
  font-size: 0.5em;
  position: relative;
  top: -0.15em;
}
.price-fancy-component-container .int {
  font-size: 1.5em;
  font-weight: 500;
  vertical-align: top;
  display: inline-block;
  position: relative;
}

/** cart component */
.cart-component-container {
  position: relative;
}
.cart-component-container .shopping-cart-detail {
  position: absolute;
  background-color: white;
  width: 400px;
  top: 20px;
  right: 0;
}
.cart-component-container .shopping-cart-detail .shopping-cart-item {
  display: flex;
  justify-content: space-between;
}
.cart-component-container .shopping-cart-detail .shopping-cart-item .shopping-cart-item-name {
  font-weight: 500;
}
.cart-component-container .shopping-cart-detail .shopping-cart-item .shopping-cart-item-qty {
  width: 30px;
  font-size: 10px;
  margin-right: 20px;
}
.cart-component-container .checkout-button-container {
  text-align: center;
  margin-top: 20px;
}
.cart-component-container .checkout-button-container button.checkout {
  background-color: gold;
  color: #666;
  padding: 4px 14px;
  border-radius: 15px;
  font-weight: 500;
}

/** checkout component **/
.checkout-component-container {
  max-width: 800px;
  margin: auto;
}
.checkout-component-container section {
  padding: 10px 5px;
}
.checkout-component-container section .title {
  font-weight: 500;
  font-size: 20px;
}
.checkout-component-container section p {
  padding-left: 10px;
}
.checkout-component-container .cart-content .summary-container {
  margin-left: auto;
  width: 250px;
  padding: 15px;
  border: 1px solid #dcdcdc;
  margin-top: 15px;
  border-radius: 5px;
}
.checkout-component-container .cart-content .summary-container .summary {
  font-size: 15px;
  width: 100%;
  margin: auto;
}
.checkout-component-container .cart-content .summary-container .summary td:first-child {
  width: 150px;
  text-align: left;
}
.checkout-component-container .cart-content .summary-container .summary td:last-child {
  width: 50px;
  text-align: right;
}
/** my-seller component **/
.my-seller-component-container .mg-form-row.model-children-Products {
  margin-left: -5px;
  margin-right: 0px;
}
.my-seller-component-container .model-children-component-container.singular_Seller .label-container {
  color: rgb(6, 118, 230);
  font-size: 1.2em;
  font-weight: 500;
  margin-left: 0px;
}

/** feedback-summary-component-container */
.feedback-summary-component-container .stars {
  padding-left: 6px;
  padding-right: 4px;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: inline-flex;
}
.feedback-summary-component-container .stars .star {
  vertical-align: top;
  display: inline-block;
  width: 14px;
  height: 13px;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(assets/icons/ic_star_rate_empty_14.png);
}
.feedback-summary-component-container .stars .full {
  background-image: url(assets/icons/ic_star_rate_14.png);
}
.feedback-summary-component-container .stars .half {
  background-image: url(assets/icons/ic_star_rate_half_14.png);
}

/** login-component */
.login-component-container.container {
  max-width: 700px;
}
.login-component-container.container label {
  min-width: 100px;
}
.login-component-container a.disabled {
  pointer-events: none;
  cursor: default;
}

@media only screen and (max-width: 1024px) {
  .login-component-container.container {
    max-width: 100%;
  }
  .login-component-container.container .container-header {
    width: 100%;
  }
}
/** app-textarea */
app-textarea {
  width: 100%;
}
app-textarea textarea {
  width: 100%;
}

/** progress-bar-component-container */
.progress-bar-component-container .progress-bar-text {
  display: flex;
  color: darkgreen;
  font-weight: 700;
}
.progress-bar-component-container .progress-bar-text .progress-bar-text-correct {
  margin-right: auto;
}
.progress-bar-component-container .progress-bar-text .progress-bar-text-percent {
  font-style: italic;
}
.progress-bar-component-container .progress-bar-bar {
  height: 5px;
  width: 150px;
  border: 1px solid #ddd;
}
.progress-bar-component-container .progress-bar-bar div {
  height: 5px;
  background-color: darkblue;
}

/** previous-next-component-container */
.previous-next-component-container {
  display: flex;
  margin-top: 1em;
}
.previous-next-component-container .current-step {
  width: 100px;
  text-align: center;
}

/** copy-save-component-container */
.copy-save-component-container {
  width: 100%;
  padding: 10px;
}
.copy-save-component-container .content {
  width: 100%;
  resize: vertical;
  min-height: 100px;
  max-height: 500px;
  outline: 1px solid orange;
}
.copy-save-component-container button:last-child {
  margin-right: 0;
}

/**  histgram-component  */
.histgram-component-container {
  display: flex;
}
.histgram-component-container .weekday-name {
  width: 14px;
  margin-right: 2px;
}
.histgram-component-container .weekday-name div {
  width: 14px;
  height: 14px;
  font-size: 12px;
  margin-bottom: 1px;
  text-align: center;
  padding-bottom: 1px;
  line-height: 12px;
}
.histgram-component-container .histgram-container {
  display: grid;
  width: 194px;
  height: 104px;
  grid-template: repeat(7, 1fr)/repeat(13, 1fr);
  gap: 1px;
  grid-auto-flow: column;
}
.histgram-component-container .histgram-item {
  height: 14px;
  width: 14px;
  font-size: 10px;
}

/**  practice-activity-component  */
/**  foreign-key-selector-component */
.foreign-key-selector-component-container .button-add {
  margin-left: 10px;
  color: #0275d8;
}
.foreign-key-selector-component-container .button-edit {
  margin-left: 10px;
  color: #0275d8;
}

/** audio-field-component-container */
.audio-field-component-container input {
  min-width: 50px;
  height: 2rem;
  border: 1px solid #999;
  border-radius: 0;
  width: 100%;
  padding: 4px 8px;
  border-radius: 5px;
  outline: none;
}
.audio-field-component-container input:focus {
  border: 1px solid orange;
}

/** microphone-component-container */
.microphone-component-container .counter {
  font-size: 0.9rem;
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid #888;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  line-height: 1.2rem;
}

/** offcanvas */
.offcanvas {
  overflow: auto;
}

/**  leitner-box-component-container */
.leitner-box-component-container .section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.leitner-box-component-container .section-title span {
  font-size: 0.8rem;
  color: #999;
  font-weight: 500;
}
.leitner-box-component-container table {
  width: 100%;
  font-size: 14px;
  color: #444;
}
.leitner-box-component-container table th {
  font-size: 11px;
  padding-right: 0.4rem;
}
.leitner-box-component-container table tbody tr {
  border-bottom: 1px dotted #eee;
}
.leitner-box-component-container table tbody tr:hover {
  background-color: ivory;
}
.leitner-box-component-container table tbody td {
  padding: 0.3rem 0.4rem 0.3rem 0;
}
.leitner-box-component-container table tbody td:nth-child(1) {
  min-width: 40%;
}

/** user-dashboard-vm-component-container */
.user-dashboard-vm-component-container div:has([mg-habitstatusforday]) .container {
  touch-action: pan-y !important;
}
.user-dashboard-vm-component-container .practice-table-component-container .mg-table-button-row {
  display: none;
}

/** image-uploader-component-container */
.image-uploader-component-container {
  width: 250px;
  padding: 20px;
  position: unset;
}
.image-uploader-component-container .file-input {
  display: none;
}
.image-uploader-component-container .file-upload {
  display: block;
}
.image-uploader-component-container .file-upload .drop-area {
  display: flex;
  align-items: center;
  background-color: #eee;
  border: 1px dashed gray;
  width: 200px;
  height: 200px;
  margin: auto;
  user-select: all !important;
  -khtml-user-select: all !important;
  -webkit-user-select: all !important;
  -moz-user-select: all !important;
  -ms-user-select: all !important;
}
.image-uploader-component-container .file-upload .drop-area:focus {
  border-color: orange;
}
.image-uploader-component-container .file-upload .message::selection {
  background-color: transparent;
}
.image-uploader-component-container .file-upload .error-message {
  color: var(--error-color);
}
.image-uploader-component-container .file-upload .success-message {
  color: var(--success-color);
}
.image-uploader-component-container .file-upload button {
  padding: var(--spacing-2) var(--spacing-5);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-base);
  background: var(--color-primary-500);
  color: white;
}
.image-uploader-component-container .file-upload button:hover {
  background: var(--color-primary-600);
}
.image-uploader-component-container .caption {
  outline: none;
}
.image-uploader-component-container .caption:focus {
  border: 1px solid orange;
}

/* .image-uploader-component-container * {
    -khtml-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
} */
/** link-form-compoent-container */
.link-form-component-container {
  width: 100%;
  padding: 20px;
  position: unset;
}
.link-form-component-container * {
  -khtml-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.link-form-component-container label {
  width: 100px !important;
}
.link-form-component-container input {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  -khtml-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/** practise-score-component-container */
.practise-score-component-container {
  padding: 30px;
}
.practise-score-component-container .title {
  font-weight: 600;
  font-size: 13px;
}
.practise-score-component-container .number {
  font-weight: 600;
  font-size: 20px;
  text-align: right;
}

/** json-editor-component-container  */
.json-editor-component-container {
  margin: 1px 10px;
}
.json-editor-component-container .property-row {
  margin-top: 2px;
  margin-left: 10px;
}
.json-editor-component-container .array-index-row td {
  padding-top: 2px;
  padding-left: 10px;
}
.json-editor-component-container .object-row td {
  padding-top: 2px;
  padding-left: 5px;
}

/**  .perma-link-component-container */
.perma-link-component-container .perma-link {
  display: inline-block;
  padding: 2px 4px;
  min-width: 100px;
  background-color: #eee;
}

/**  model-fk-selector-component */
.model-fk-selector-component-container .selected-item {
  min-width: 150px;
  height: 2rem;
  border: 1px solid #999;
  border-radius: 0;
  width: 100%;
  padding: 4px 8px;
  border-radius: 5px;
}
.model-fk-selector-component-container .selected-item:focus {
  outline: none;
  border: 1px solid orange;
}
.model-fk-selector-component-container .button-add {
  margin-left: 10px;
  color: #0275d8;
}
.model-fk-selector-component-container .button-edit {
  margin-left: 10px;
  color: #0275d8;
}
.model-fk-selector-component-container .dialog {
  position: absolute;
  background-color: white;
  border: 1px solid #dcdcdc;
  z-index: 10;
  overflow-x: hidden;
  overflow-y: auto;
}
.model-fk-selector-component-container .dialog .dialog-content {
  min-width: 200px;
  padding: 5px;
  padding-left: 0;
}
.model-fk-selector-component-container .dialog .dialog-content .list-item-container {
  max-height: 200px;
  overflow-y: auto;
}
.model-fk-selector-component-container .dialog .dialog-content .list-item-container .dropdown-item {
  padding: 2px 4px;
}
.model-fk-selector-component-container .dialog .dialog-content .list-item-container .dropdown-item .svg {
  color: var(--button-color);
  cursor: pointer;
}
.model-fk-selector-component-container .dialog .dialog-content .list-item-container .dropdown-item:hover {
  background-color: var(--button-color);
  color: white;
}
.model-fk-selector-component-container .dialog .dialog-content .list-item-container .dropdown-item:hover .svg {
  color: white;
}
.model-fk-selector-component-container .dialog .dialog-content .dialog-menu-container {
  padding: 2px;
  padding-bottom: 0;
  border-top: 1px solid #dcdcdc;
}

/** latex-form-component-container */
.latex-form-component-container {
  padding: 20px;
}
.latex-form-component-container .laTex {
  border: 1px solid #999;
  padding: 3px;
  width: 100%;
}
.latex-form-component-container .laTex:focus {
  outline: none;
  border: 1px solid orange;
}
.latex-form-component-container .mathjax-container {
  width: 100%;
}

/** end of latex-form-component-container */
/** canvas-container-component  */
/** .canvas-container-component { } */
.offcanvas {
  z-index: var(--zindex-offcanvas) !important;
}

.offcanvas-backdrop {
  z-index: var(--zindex-offcanvas) !important;
}

/** end of canvas-container-component  */
/*  button-row-component-container */
.button-row-component-container {
  display: inline-flex;
}
.button-row-component-container .button-row-item {
  display: inline-block;
  margin: 0;
  padding: 0;
  color: #999;
}
.button-row-component-container .button-row-item svg {
  border-radius: 0rem;
}
.button-row-component-container .button-row-item:hover svg {
  background-color: #eee;
  color: #444;
}
.button-row-component-container .button-row-item.selected svg {
  color: #222;
  background-color: #eee;
}

/*  end of button-row-component-container */
/*  tag-field-component-container */
.tag-field-component-container {
  display: inline-block;
}
.tag-field-component-container .tags-container .mg-tag {
  margin-right: 2px;
}

/* end of tag-field-component-container */
/* tag-mapping-field-component-container */
.tag-mapping-field-component-container {
  width: 100%;
}
.tag-mapping-field-component-container .tags-container .mg-tag {
  margin-right: 2px;
}

/* end of tag-mapping-field-component-container */
/*  tag-editor-component-container */
.tag-editor-component-container {
  padding: 20px 10px 20px 10px;
}
.tag-editor-component-container .selected-tag-container {
  border: 1px solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  padding: 4px;
  min-height: 38px;
  vertical-align: middle;
}
.tag-editor-component-container .except-tag-container {
  border: 1px solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  padding: 4px;
  min-height: 38px;
  vertical-align: middle;
}
.tag-editor-component-container .all-tag-container {
  border: 1px solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  padding: 4px;
  height: 200px;
  overflow-y: auto;
}
.tag-editor-component-container input {
  border-radius: var(--input-border-radius);
  border: 1px solid var(--input-border-color);
  outline: none;
  width: 100%;
  padding: 2px 4px;
}
.tag-editor-component-container input:focus {
  border: 1px solid var(--input-focus-color);
}
.tag-editor-component-container label {
  margin-top: 10px;
}
.tag-editor-component-container #loading {
  font-style: italic;
}

/* end of tag-editor-component-container */
/* button-row-component-container */
.button-row-component-container.narrow button {
  margin: 0;
}
.button-row-component-container.narrow .button-divider {
  display: none;
}
.button-row-component-container.normal button {
  margin-left: 0.2rem;
  margin-right: 0.2rem;
}
.button-row-component-container.normal .button-divider {
  display: none;
}
.button-row-component-container.wide button {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.button-row-component-container .button-divider {
  height: 0.8rem;
  border: 0;
  border-left: 1px solid #dcdcdc;
  margin: auto 0;
}
.button-row-component-container svg {
  color: #444;
}

/* end of button-row-component-container */
.question-history-view-component-container {
  padding: 2rem;
}
.question-history-view-component-container .dialog {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.question-history-view-component-container .histgram_score-container {
  display: flex;
  justify-content: space-between;
  width: 400px;
  padding: 0;
  margin: 0;
  margin-top: 20px;
}

/* end of question-history-view-component-container */
.answer-editor-mm-component-container .grid-container {
  display: grid;
  grid-auto-rows: minmax(1.4rem, auto);
  justify-items: start;
  grid-template-rows: auto;
  border-top: 1px dotted var(--input-border-color);
  border-right: 1px dotted var(--input-border-color);
}
.answer-editor-mm-component-container .grid-container > div {
  padding: 5px;
  width: 100%;
  height: 100%;
  min-height: 2.5em;
  border-bottom: 1px dotted var(--input-border-color);
  border-left: 1px dotted var(--input-border-color);
}
.answer-editor-mm-component-container .grid-container > div > i {
  color: #888;
  position: absolute;
  top: 5px;
  left: calc(100% - 10px);
  z-index: 2;
  font-size: 10px;
  display: none;
  transform: rotate(45deg);
}
.answer-editor-mm-component-container .grid-container > div:hover > i {
  display: block;
}
.answer-editor-mm-component-container .grid-container > div > i.fixed {
  transform: rotate(0deg);
}
.answer-editor-mm-component-container .grid-container > div:has(.fixed) {
  background-color: antiquewhite;
}
.answer-editor-mm-component-container .grid-container > div:has(.fixed) .chip-component-container {
  background-color: antiquewhite;
}
.answer-editor-mm-component-container .grid-container > div:has(.fixed) .chip-item {
  background-color: white;
}
.answer-editor-mm-component-container .grid-container .dialog {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.answer-editor-mm-component-container.edit {
  display: grid;
  grid-template-columns: auto 40px;
}
.answer-editor-mm-component-container.edit .btn-add-column {
  border-radius: 2px;
}
.answer-editor-mm-component-container.edit .btn-add-row {
  border-radius: 2px;
}
.answer-editor-mm-component-container.answer .grid-container {
  height: 100%;
}
.answer-editor-mm-component-container.answer .grid-container div {
  padding: 5px;
  width: 100%;
  height: 100%;
  min-height: 2.5em;
}
.answer-editor-mm-component-container.answer .grid-container div.fixed {
  background: #eee;
}
.answer-editor-mm-component-container.answer .grid-container .fixed-answer {
  display: block;
}
.answer-editor-mm-component-container.answer .grid-container .selected-cell {
  background-color: lightblue;
}
.answer-editor-mm-component-container.answer .grid-container .selected-cell:has(.correct), .answer-editor-mm-component-container.answer .grid-container .selected-cell:has(.wrong) {
  background-color: white;
}
.answer-editor-mm-component-container.answer .grid-container .selected-answer {
  display: block;
  background-color: #eee;
  padding: 4px 8px;
  margin-bottom: 2px;
  border-radius: 8px;
}
.answer-editor-mm-component-container.answer .grid-container .selected-answer i {
  position: relative;
  color: #444;
  margin-left: 5px;
}
.answer-editor-mm-component-container.answer .grid-container .selected-answer i:before {
  position: absolute;
  top: -1em;
}
.answer-editor-mm-component-container.answer .grid-container .correct {
  color: green;
  background-color: lightgreen !important;
}
.answer-editor-mm-component-container.answer .grid-container .correct i {
  display: none;
}
.answer-editor-mm-component-container.answer .grid-container .wrong {
  color: red;
  background-color: lightpink !important;
}
.answer-editor-mm-component-container.answer .grid-container .wrong i {
  display: none;
}
.answer-editor-mm-component-container.readonly .grid-container div {
  padding: 5px;
  width: 100%;
  height: 100%;
  min-height: 2.5em;
}
.answer-editor-mm-component-container.readonly .grid-container div:has(.fixed-answer) {
  background: #eee;
}
.answer-editor-mm-component-container.readonly .grid-container div .unfixed-answer {
  display: inline-block;
  background-color: #eee;
  padding: 4px 8px;
  margin-bottom: 2px;
  margin-right: 2px;
  border-radius: 8px;
}
.answer-editor-mm-component-container .available-answers {
  margin-top: 40px;
  padding-bottom: 5px;
  border-bottom: 1px solid #444;
  display: block;
}
.answer-editor-mm-component-container .available-answers:empty {
  display: none;
}
.answer-editor-mm-component-container .available-answers .available-answer {
  margin: 1px;
  background-color: #eee;
  padding: 4px 8px 5px 8px;
  border-radius: 8px;
  display: inline-block;
}
.answer-editor-mm-component-container .available-answers .available-answer i {
  font-size: 14px;
  color: #888;
  margin-left: 5px;
}
.answer-editor-mm-component-container .available-answers .available-answer:hover {
  background-color: lightblue;
}
.answer-editor-mm-component-container .available-answers .available-answer:hover i {
  color: var(--button-color);
}
.answer-editor-mm-component-container .available-answers .available-answer.submitted {
  margin: 1px;
  padding: 4px 8px 5px 8px;
  border-radius: 8px;
  display: inline-block;
  background-color: #eee;
}
.answer-editor-mm-component-container .available-answers .available-answer.submitted i {
  display: none;
}
.answer-editor-mm-component-container .available-answers .available-answer.submitted:hover {
  background-color: #eee;
}
.answer-editor-mm-component-container .available-answers .wrong {
  color: red;
  background-color: lightpink !important;
}
.answer-editor-mm-component-container .available-answers .wrong i {
  display: none;
}
.answer-editor-mm-component-container .selected-chip-container {
  border-bottom: none !important;
}
.answer-editor-mm-component-container .submit-button {
  margin-top: 10px;
}
.answer-editor-mm-component-container .baits-container {
  margin-top: 10px;
  display: block;
  align-items: center;
  border-bottom: 1px solid var(--input-border-color);
}
.answer-editor-mm-component-container .baits-container .dialog {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.answer-editor-fb-component-container .edit {
  margin-left: 20px;
}
.answer-editor-fb-component-container .edit .instruction {
  font-size: 0.7rem;
  font-style: italic;
  color: #444;
  margin: 10px 0;
  margin-bottom: 2px;
}
.answer-editor-fb-component-container .edit .answers-template {
  min-height: 2rem;
  width: 100%;
  outline: none;
  border: 1px solid var(--input-border-color);
  padding: 4px 8px;
  border-radius: var(--input-border-radius);
}
.answer-editor-fb-component-container .edit .answers-template:focus {
  border: 1px solid gold;
}
.answer-editor-fb-component-container .edit .answers-container {
  padding: 5px;
}
.answer-editor-fb-component-container .edit .answers-container .answer {
  padding: 2px;
  border-bottom: 1px dotted #dcdcdc;
  min-width: 50%;
}
.answer-editor-fb-component-container .edit .answers-container .answer:nth-child(odd) {
  background-color: ivory;
}
.answer-editor-fb-component-container .answer .answer-container {
  display: inline-block;
  padding: 1px 3px;
  border-bottom: 1px solid black;
  min-width: 40px;
  min-height: 1.5rem;
  outline: none;
}
.answer-editor-fb-component-container .answer .answer-container:focus {
  background-color: #eeeeee;
}
.answer-editor-fb-component-container .answer .answer-container.correct {
  background-color: lightgreen;
}
.answer-editor-fb-component-container .answer .answer-container.incorrect {
  background-color: pink;
}
.answer-editor-fb-component-container .answer .button-submit {
  margin-top: 20px;
}
.answer-editor-fb-component-container .readonly .answer-container {
  display: inline-block;
  padding: 2px;
  min-width: 30px;
  border-radius: 5px;
  background-color: #dcdcdc;
}

.answer-editor-mc-component-container.readonly ul {
  list-style: none;
}
.answer-editor-mc-component-container.readonly li.correct-answer::before {
  content: "✓"; /* Or other checkmark symbols */
  color: green; /* Customize checkmark color */
  margin-right: 0.5em; /* Adjust spacing */
}

.answer-editor-ms-component-container.readonly ul {
  list-style: none;
}
.answer-editor-ms-component-container.readonly li.correct-answer::before {
  content: "✓"; /* Or other checkmark symbols */
  color: green; /* Customize checkmark color */
  margin-right: 0.5em; /* Adjust spacing */
}

.answer-editor-xiangqi-component-container {
  margin: 20px 10px;
  font-size: var(--font-size);
  color: var(--font-color);
}
.answer-editor-xiangqi-component-container .flex-container {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 4px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex-grow: 1;
}
.answer-editor-xiangqi-component-container .flex-container .chess-board-container {
  background: url(assets/xiangqi/images/boards/board-ccbridge.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  max-width: 450px;
  min-width: 250px;
  aspect-ratio: 9/10;
  border: 1px solid black;
}
.answer-editor-xiangqi-component-container .flex-container .chess-board-container .xiangqi-board {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-flow: row;
}
.answer-editor-xiangqi-component-container .flex-container .chess-board-container .xiangqi-board div {
  width: calc((100% - 0px) * 0.11 * 1px);
  aspect-ratio: 1/1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.answer-editor-xiangqi-component-container .flex-container .chess-board-container .xiangqi-board div img {
  width: calc(100% - 3px);
}
.answer-editor-xiangqi-component-container .flex-container .chess-board-container .xiangqi-board div.legal-move {
  background-image: url("assets/xiangqi/images/misc/legal_move.png");
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.5;
}
.answer-editor-xiangqi-component-container .flex-container .chess-board-container .xiangqi-board div.legal-move:has(img) {
  background-image: url("assets/xiangqi/images/misc/legal_capture.png");
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 1;
}
.answer-editor-xiangqi-component-container .flex-container .chess-board-container .xiangqi-board div.legal-move:has(img) img {
  opacity: 0.5;
}
.answer-editor-xiangqi-component-container .flex-container .chess-board-container .xiangqi-board div.selected {
  background-color: coral;
  border-radius: 20%;
}
.answer-editor-xiangqi-component-container .flex-container .chess-board-container .xiangqi-board div.still-warm {
  opacity: 0.8;
  background-image: url("assets/xiangqi/images/misc/still_warm.png");
  background-position: center center;
  background-repeat: no-repeat;
}
.answer-editor-xiangqi-component-container .book-list-with-result {
  width: 300px;
  margin: 0 auto;
}
.answer-editor-xiangqi-component-container .book-list-with-result table {
  width: 100%;
}
.answer-editor-xiangqi-component-container .book-list-with-result table td {
  padding: 2px 4px;
}
.answer-editor-xiangqi-component-container .book-list-with-result table td:first-child {
  width: 200px;
}
.answer-editor-xiangqi-component-container .book-list-with-result table td:last-child {
  width: 80px;
}
.answer-editor-xiangqi-component-container .book-list-with-result table tr:hover td {
  background-color: #eee;
}
.answer-editor-xiangqi-component-container .history-table-container {
  min-width: 180px;
  padding-left: 10px;
  overflow-y: auto;
  border: 1px solid #eee;
}
.answer-editor-xiangqi-component-container .history-table-container .hisotry-table {
  width: 100%;
}
.answer-editor-xiangqi-component-container .history-table-container .hisotry-table td {
  width: 49%;
  text-align: left;
  padding: 2px;
  font-size: 0.8rem;
}
.answer-editor-xiangqi-component-container .history-table-container .hisotry-table td span {
  font-size: 10px;
  margin-right: 3px;
}
.answer-editor-xiangqi-component-container .result-container {
  margin-top: 20px;
}
.answer-editor-xiangqi-component-container .result-container .game-status {
  text-align: center;
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: 500;
}
.answer-editor-xiangqi-component-container .result-container .game-status.correct {
  color: green;
}
.answer-editor-xiangqi-component-container .result-container .game-status.incorrect {
  color: orangered;
}
.answer-editor-xiangqi-component-container .result-container .correct-answer-container {
  text-align: center;
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: 500;
}
.answer-editor-xiangqi-component-container .result-container .result-table-container {
  width: 270px;
  max-height: 300px;
  overflow-y: auto;
  margin: 0 auto;
  border: 1px dotted #eee;
}
.answer-editor-xiangqi-component-container .result-container .result-table-container .result-table {
  margin: 0 auto;
}
.answer-editor-xiangqi-component-container .result-container .result-table-container .result-table tr:nth-child(even) {
  background-color: #eee;
}
.answer-editor-xiangqi-component-container .result-container .result-table-container .result-table td:nth-child(odd) {
  width: 28px;
  font-size: 10px;
  padding-left: 2px;
}
.answer-editor-xiangqi-component-container .result-container .result-table-container .result-table td:nth-child(even) {
  width: 100px;
}
.answer-editor-xiangqi-component-container .recording-table-container {
  margin-top: 4px;
}
.answer-editor-xiangqi-component-container .recording-table-container table {
  width: 100%;
}
.answer-editor-xiangqi-component-container .recording-table-container tr:hover .buttons {
  opacity: 1;
}
.answer-editor-xiangqi-component-container .recording-table-container tr:nth-child(even) {
  background-color: ivory;
}
.answer-editor-xiangqi-component-container .recording-table-container th {
  font-weight: bold;
  font-size: 0.6em;
  padding: 3px;
  border-bottom: 1px dotted #eee;
}
.answer-editor-xiangqi-component-container .recording-table-container td {
  padding: 3px;
  border-bottom: 1px dotted #eee;
}
.answer-editor-xiangqi-component-container .recording-table-container td.buttons {
  white-space: nowrap;
  text-align: right;
  opacity: 0;
}
.answer-editor-xiangqi-component-container .recording-table-container td.buttons i {
  color: var(--button-color);
}
.answer-editor-xiangqi-component-container .recording-table-container td.buttons i:hover {
  color: var(--button-hover-color);
}
.answer-editor-xiangqi-component-container .book-table-container {
  width: 300px;
  max-height: 300px;
  overflow-y: auto;
}
.answer-editor-xiangqi-component-container .book-table-container .book-table {
  margin-top: 2px;
  margin-bottom: 20px;
  margin-left: 10px;
  border: 1px dotted #eee;
}
.answer-editor-xiangqi-component-container .book-table-container .book-table td {
  width: 100px;
  font-size: 14px;
  text-align: center;
}
.answer-editor-xiangqi-component-container .book-table-container .book-table tr:nth-child(even) {
  background-color: #eee;
}
.answer-editor-xiangqi-component-container .book-table-container .line-name {
  font-style: italic;
}
.answer-editor-xiangqi-component-container .book-table-container .line-name span:nth-child(2) {
  color: var(--button-color);
  margin-left: 10px;
}
.answer-editor-xiangqi-component-container .autoplay-name-row {
  text-align: center;
  margin-bottom: 10px;
}
.answer-editor-xiangqi-component-container .autoplay-button-row {
  text-align: center;
  margin-top: 10px;
}
.answer-editor-xiangqi-component-container .buttons-container {
  color: var(--button-color);
}
.answer-editor-xiangqi-component-container .buttons-container span {
  margin: 0 5px;
  cursor: pointer;
}
.answer-editor-xiangqi-component-container .buttons-container span.disabled {
  color: #dcdcdc;
  pointer-events: none;
}
.answer-editor-xiangqi-component-container .buttons-container span:first-child {
  margin-left: 0;
}
.answer-editor-xiangqi-component-container .buttons-container span.start-position-set {
  outline: 1px solid orangered;
  outline-offset: -3px;
  border-radius: 6px;
}
.answer-editor-xiangqi-component-container button {
  font-size: 12px;
  margin: 0px 1px;
  padding: 2px 4px;
  border-radius: 0;
}

@media only screen and (max-width: 450px) {
  .history-table-container {
    display: none;
  }
}
.answer-editor-writing-component-container .field-label {
  color: unset !important;
  font-weight: unset !important;
  font-size: unset !important;
}

.model-card-container.singular_Product .mg-card {
  width: 100%;
}
.model-card-container.singular_Product .mg-card .row-data {
  text-align: left !important;
}
.model-card-container.singular_Product .mg-card #field-Name {
  font-size: 26px;
}
.model-card-container.singular_Product .mg-card #field-Summary {
  margin: 10px 0;
  overflow: visible;
  white-space: normal;
  width: 100%;
}

.help-topics-component-container {
  padding-top: 20px;
}
.help-topics-component-container .help-topic {
  padding: 10px;
  font-size: var(--font-size);
}
.help-topics-component-container .help-topic a {
  text-decoration: none;
}
.help-topics-component-container .toc {
  padding: 10px;
}
.help-topics-component-container .toc a {
  text-decoration: none;
}

.tts-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  width: 100%;
}

.tts-textarea {
  width: 100%;
  padding: var(--spacing-3);
  background: var(--color-neutral-800);
  border: 1px solid var(--color-neutral-700);
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  font-size: var(--text-base);
  font-family: inherit;
  line-height: 1.6;
  resize: vertical;
  transition: border-color var(--transition-base) var(--transition-timing);
  box-sizing: border-box;
  height: unset !important;
}
.tts-textarea::placeholder {
  color: var(--color-text-muted);
}
.tts-textarea:focus {
  outline: none;
  border-color: var(--color-primary-500);
}

.tts-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.tts-button {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-5);
  background: var(--color-primary-500);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-base) var(--transition-timing);
}
.tts-button:hover:not(:disabled) {
  background: var(--color-primary-600);
}
.tts-button:active:not(:disabled) {
  background: var(--color-primary-700);
}
.tts-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.tts-voice-select {
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-neutral-800);
  border: 1px solid var(--color-neutral-700);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  font-family: inherit;
  cursor: pointer;
  width: unset !important;
  transition: border-color var(--transition-base) var(--transition-timing);
}
.tts-voice-select:focus {
  outline: none;
  border-color: var(--color-primary-500);
}
.tts-voice-select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.tts-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.tts-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.tts-error {
  color: #ef4444;
  font-size: var(--text-sm);
  padding: var(--spacing-2) var(--spacing-3);
  background: rgba(239, 68, 68, 0.1);
  border-radius: var(--radius-md);
}

.tts-user-section {
  border-top: 1px solid var(--color-neutral-700);
  padding-top: var(--spacing-4);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.tts-section-title {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  margin: 0;
}

.tts-recording-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.tts-mic-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-5);
  background: #22c55e;
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-base) var(--transition-timing);
}
.tts-mic-btn:hover {
  background: #16a34a;
}
.tts-mic-btn--recording {
  background: #ef4444;
  animation: pulse 1.5s ease-in-out infinite;
}
.tts-mic-btn--recording:hover {
  background: #dc2626;
}

.tts-timer {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.tts-spacer {
  flex: 1;
}

.save-btn {
  display: block;
  margin: var(--spacing-4) auto 0;
  padding: var(--spacing-2) var(--spacing-6, 1.5rem);
  background: var(--color-primary-500);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all var(--transition-base) var(--transition-timing);
}

.save-btn:hover {
  background: var(--color-primary-600);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.save-btn:active {
  transform: translateY(0);
}

.submit-btn {
  display: block;
  margin: var(--spacing-4) auto 0;
  padding: var(--spacing-2) var(--spacing-6, 1.5rem);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all var(--transition-base) var(--transition-timing);
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.submit-btn:active {
  transform: translateY(0);
}

.submit-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  transform: translateY(-1px);
}

.tts-grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-full, 9999px);
  color: white;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}

.tts-grade-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-2) var(--spacing-5);
  background: #8b5cf6;
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-base) var(--transition-timing);
}
.tts-grade-btn:hover {
  background: #7c3aed;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
.radar-container {
  background: var(--color-neutral-800);
  border-radius: var(--radius-xl);
  padding: var(--spacing-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4);
}

.radar-title {
  color: var(--color-text-primary);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  margin: 0;
  align-self: flex-start;
}

.radar-canvas-wrap {
  display: flex;
  justify-content: center;
}

.radar-canvas {
  display: block;
  border-radius: var(--radius-lg);
}

.radar-legend {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.legend-row {
  display: grid;
  grid-template-columns: 110px 1fr 44px 90px;
  align-items: center;
  gap: var(--spacing-3);
}

.legend-label {
  background: none !important;
  border: none;
  padding: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--transition-fast) var(--transition-timing), opacity var(--transition-fast) var(--transition-timing);
}
.legend-label:hover {
  text-decoration-color: currentColor;
  opacity: 0.85;
}

.legend-bar-track {
  height: 6px;
  background: var(--color-neutral-700);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.legend-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--transition-slow) var(--transition-timing);
}

.legend-rate {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  text-align: right;
}

.legend-stats {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-align: right;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  align-self: flex-start;
  flex-wrap: wrap;
}

.crumb-link {
  background: none;
  border: none;
  padding: 2px var(--spacing-1);
  border-radius: var(--radius-sm);
  color: var(--color-primary-500);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: color var(--transition-fast) var(--transition-timing), background var(--transition-fast) var(--transition-timing);
}
.crumb-link:hover {
  color: var(--color-primary-600);
  background: rgba(14, 165, 233, 0.08);
}

.crumb-sep {
  color: var(--color-neutral-600);
  font-size: var(--text-sm);
  user-select: none;
}

.crumb-current {
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  padding: 2px var(--spacing-1);
}

.radar-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  margin: calc(-1 * var(--spacing-2)) 0 0 0;
}

.hint-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
}

.branch-dot {
  background: #a78bfa;
}

.leaf-dot {
  background: #7dd3fc;
}

.drill-skills {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.drill-skill-row {
  display: grid;
  grid-template-columns: 130px 1fr 44px;
  grid-template-rows: auto auto;
  column-gap: var(--spacing-3);
  row-gap: var(--spacing-1);
  align-items: center;
}

.drill-skill-name {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  text-transform: capitalize;
}

.drill-bar-track {
  height: 8px;
  background: var(--color-neutral-700);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.drill-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.5s var(--transition-timing);
}

.drill-rate {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  text-align: right;
}

.drill-meta {
  grid-column: 1/-1;
  display: flex;
  gap: var(--spacing-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  align-items: center;
}

.drill-sep {
  color: var(--color-neutral-600);
}

.radar-error {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-md);
  color: #ef4444;
  font-size: var(--text-sm);
  align-self: stretch;
}
.radar-error p {
  margin: 0;
}

.eval-panel {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
  background: var(--color-neutral-900);
  border: 1px solid var(--color-neutral-700);
  border-radius: var(--radius-lg);
}

.eval-header {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-3);
}

.eval-score {
  font-size: 2.5rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.eval-level {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: #cbd5e1;
  text-transform: capitalize;
}

.eval-summary {
  margin: 0;
  font-size: var(--text-sm);
  color: #cbd5e1;
  line-height: 1.6;
}

.eval-section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.eval-section-title {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: #f1f5f9;
}

.eval-list {
  margin: 0;
  padding-left: var(--spacing-5);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}
.eval-list li {
  font-size: var(--text-sm);
  color: #cbd5e1;
}

.eval-weak-row {
  padding: var(--spacing-2) var(--spacing-3);
  background: rgba(239, 68, 68, 0.06);
  border-left: 3px solid rgba(239, 68, 68, 0.4);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.eval-weak-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
}

.eval-weak-skill {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: #f1f5f9;
  text-transform: capitalize;
}

.eval-severity {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.eval-diagnosis {
  margin: 0;
  font-size: var(--text-xs);
  color: #94a3b8;
  line-height: 1.5;
}

.eval-rec-row {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  font-size: var(--text-sm);
  color: #cbd5e1;
  line-height: 1.5;
}
.eval-rec-row .eval-rec-icon {
  flex-shrink: 0;
  margin-top: 1px;
}

.eval-next {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-2);
  padding: var(--spacing-3);
  background: rgba(14, 165, 233, 0.08);
  border: 1px solid rgba(14, 165, 233, 0.2);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-primary-400);
  line-height: 1.5;
}

.radar-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
  padding: var(--spacing-8);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.radar-empty span {
  font-size: 2rem;
}
.radar-empty p {
  margin: 0;
  text-align: center;
}

.skills-editor {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3, 0.75rem);
  font-family: inherit;
}
.skills-editor .editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.skills-editor .editor-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-neutral-800, #1e293b);
}
.skills-editor .header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-2, 0.5rem);
}
.skills-editor .btn-unassigned {
  padding: var(--spacing-1, 0.25rem) var(--spacing-3, 0.75rem);
  background: none;
  border: 1px solid var(--color-warning-400, #fbbf24);
  color: var(--color-warning-600, #d97706);
  border-radius: var(--radius-md, 0.375rem);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms ease;
}
.skills-editor .btn-unassigned:hover {
  background: rgba(251, 191, 36, 0.08);
}
.skills-editor .tree-container {
  border: 1px solid var(--color-neutral-200, #e2e8f0);
  border-radius: var(--radius-lg, 0.5rem);
  background: var(--color-neutral-50, #f8fafc);
  min-height: 80px;
  padding: var(--spacing-2, 0.5rem) 0;
  overflow: auto;
}
.skills-editor .node-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-2, 0.5rem);
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: var(--spacing-3, 0.75rem);
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--radius-sm, 0.25rem);
  position: relative;
  user-select: none;
  transition: background-color 150ms ease;
}
.skills-editor .node-row:hover {
  background: var(--color-neutral-100, #f1f5f9);
}
.skills-editor .node-row.is-selected {
  background: rgba(14, 165, 233, 0.08);
  border-color: transparent;
}
.skills-editor .node-row.is-selected .node-label {
  color: var(--color-primary-600, #0284c7);
}
.skills-editor .node-row.is-dragging {
  opacity: 0.4;
  cursor: grabbing;
}
.skills-editor .node-row.drop-before::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-primary-500, #0ea5e9);
  border-radius: 1px;
  z-index: 1;
  pointer-events: none;
}
.skills-editor .node-row.drop-after::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-primary-500, #0ea5e9);
  border-radius: 1px;
  z-index: 1;
  pointer-events: none;
}
.skills-editor .node-row.drop-child {
  border-color: var(--color-primary-500, #0ea5e9);
  background: rgba(14, 165, 233, 0.06);
}
.skills-editor .toggle-btn {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.6rem;
  color: var(--color-neutral-400, #94a3b8);
  padding: 0;
  border-radius: var(--radius-sm, 0.25rem);
  line-height: 1;
}
.skills-editor .toggle-btn:hover {
  background: var(--color-neutral-200, #e2e8f0);
  color: var(--color-neutral-700, #334155);
}
.skills-editor .toggle-btn:empty {
  pointer-events: none;
}
.skills-editor .node-content {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-2, 0.5rem);
  min-width: 0;
  flex: 1;
}
.skills-editor .node-label {
  font-size: 0.875rem;
  color: var(--color-neutral-800, #1e293b);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 150ms ease;
}
.skills-editor .node-keywords {
  font-size: 0.75rem;
  color: var(--color-neutral-400, #94a3b8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.skills-editor .unassigned-container {
  border: 1px solid var(--color-neutral-200, #e2e8f0);
  border-radius: var(--radius-lg, 0.5rem);
  background: var(--color-neutral-50, #f8fafc);
  min-height: 80px;
  padding: var(--spacing-2, 0.5rem) 0;
  overflow: auto;
}
.skills-editor .unassigned-row {
  display: flex;
  align-items: center;
  padding: 5px var(--spacing-3, 0.75rem);
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--radius-sm, 0.25rem);
  transition: background-color 150ms ease;
}
.skills-editor .unassigned-row:hover {
  background: var(--color-neutral-100, #f1f5f9);
}
.skills-editor .unassigned-row.is-selected {
  background: rgba(14, 165, 233, 0.08);
}
.skills-editor .unassigned-row.is-selected .node-label {
  color: var(--color-primary-600, #0284c7);
}
.skills-editor .add-row {
  padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
}
.skills-editor .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-5, 1.25rem);
  gap: var(--spacing-2, 0.5rem);
  color: var(--color-neutral-400, #94a3b8);
  font-size: 0.875rem;
}
.skills-editor .empty-state p {
  margin: 0;
}
.skills-editor .btn-save {
  padding: var(--spacing-1, 0.25rem) var(--spacing-3, 0.75rem);
  background: var(--color-primary-500, #0ea5e9);
  color: white;
  border: none;
  border-radius: var(--radius-md, 0.375rem);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.skills-editor .btn-save:disabled {
  background: #9ca3af;
  cursor: default;
}
.skills-editor .btn-save:not(:disabled):hover {
  background: var(--color-primary-600, #0284c7);
}
.skills-editor .btn-add {
  padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
  background: none;
  border: 1px dashed var(--color-neutral-300, #cbd5e1);
  border-radius: var(--radius-md, 0.375rem);
  color: var(--color-neutral-500, #64748b);
  font-size: 0.8125rem;
  cursor: pointer;
  transition: all 150ms ease;
}
.skills-editor .btn-add:hover {
  border-color: var(--color-primary-400, #38bdf8);
  color: var(--color-primary-600, #0284c7);
  background: rgba(14, 165, 233, 0.04);
}
.skills-editor .action-bar {
  position: fixed;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 2px;
  background: white;
  border: 1px solid var(--color-neutral-200, #e2e8f0);
  border-radius: var(--radius-lg, 0.5rem);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  padding: 4px;
}
.skills-editor .action-btn {
  padding: 5px 10px;
  background: none;
  border: none;
  border-radius: var(--radius-md, 0.375rem);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-neutral-700, #334155);
  cursor: pointer;
  white-space: nowrap;
  transition: all 150ms ease;
}
.skills-editor .action-btn:hover {
  background: var(--color-neutral-100, #f1f5f9);
}
.skills-editor .action-btn--danger {
  color: var(--color-danger-500, #ef4444);
}
.skills-editor .action-btn--danger:hover {
  background: rgba(239, 68, 68, 0.08);
}
.skills-editor .action-btn--radar {
  color: var(--color-primary-600, #0284c7);
}
.skills-editor .action-btn--radar:hover {
  background: rgba(14, 165, 233, 0.08);
}
.skills-editor .action-btn--primary {
  color: var(--color-primary-600, #0284c7);
}
.skills-editor .action-btn--primary:hover {
  background: rgba(14, 165, 233, 0.08);
}
.skills-editor .action-btn--close {
  color: var(--color-neutral-400, #94a3b8);
  font-size: 1rem;
  padding: 4px 8px;
}
.skills-editor .action-btn--close:hover {
  background: var(--color-neutral-100, #f1f5f9);
  color: var(--color-neutral-700, #334155);
}
.skills-editor .action-divider {
  width: 1px;
  height: 20px;
  background: var(--color-neutral-200, #e2e8f0);
  margin: 0 2px;
  flex-shrink: 0;
}
.skills-editor .modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.skills-editor .modal {
  background: white;
  border-radius: var(--radius-xl, 0.75rem);
  padding: var(--spacing-5, 1.25rem);
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4, 1rem);
}
@media (max-width: 480px) {
  .skills-editor .modal {
    max-width: calc(100vw - 2rem);
  }
}
.skills-editor .modal-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-neutral-800, #1e293b);
}
.skills-editor .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1, 0.25rem);
}
.skills-editor .form-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-neutral-700, #334155);
}
.skills-editor .form-hint {
  font-weight: 400;
  color: var(--color-neutral-400, #94a3b8);
}
.skills-editor .form-input,
.skills-editor .form-textarea {
  width: 100%;
  padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
  border: 1px solid var(--color-neutral-200, #e2e8f0);
  border-radius: var(--radius-md, 0.375rem);
  font-size: 0.875rem;
  color: var(--color-neutral-800, #1e293b);
  background: white;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.skills-editor .form-input:focus,
.skills-editor .form-textarea:focus {
  outline: none;
  border-color: var(--color-primary-500, #0ea5e9);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}
.skills-editor .form-textarea {
  resize: vertical;
  min-height: 80px;
}
.skills-editor .modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-2, 0.5rem);
  padding-top: var(--spacing-1, 0.25rem);
}
.skills-editor .btn-cancel {
  padding: var(--spacing-1, 0.25rem) var(--spacing-3, 0.75rem);
  background: none;
  border: 1px solid var(--color-neutral-200, #e2e8f0);
  color: var(--color-neutral-600, #475569);
  border-radius: var(--radius-md, 0.375rem);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 150ms ease;
}
.skills-editor .btn-cancel:hover {
  background: var(--color-neutral-100, #f1f5f9);
}
.skills-editor .btn-primary {
  padding: var(--spacing-1, 0.25rem) var(--spacing-3, 0.75rem);
  background: var(--color-primary-500, #0ea5e9);
  color: white;
  border: none;
  border-radius: var(--radius-md, 0.375rem);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.skills-editor .btn-primary:hover {
  background: var(--color-primary-600, #0284c7);
}

.writing-grader-component {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}
.writing-grader-component .field-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}
.writing-grader-component .field-textarea {
  width: 100%;
  padding: var(--spacing-3);
  border: 1px solid var(--color-neutral-700);
  border-radius: var(--radius-md);
  font-family: inherit;
  resize: vertical;
  transition: border-color var(--transition-base);
  box-sizing: border-box;
  line-height: 1.6;
  height: unset !important;
}
.writing-grader-component .field-textarea::placeholder {
  color: var(--color-text-muted);
}
.writing-grader-component .field-textarea:focus {
  outline: none;
  border-color: var(--color-primary-500);
}
.writing-grader-component .criteria-row {
  display: flex;
  gap: var(--spacing-3);
  align-items: flex-start;
}
.writing-grader-component .criteria-row .field-textarea {
  flex: 1;
}
.writing-grader-component .answer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.writing-grader-component .answer-header-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}
.writing-grader-component .grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: var(--spacing-1) var(--spacing-3);
  border-radius: var(--radius-full, 9999px);
  color: white;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}
.writing-grader-component .actions {
  display: flex;
  justify-content: flex-end;
}
.writing-grader-component .save-btn,
.writing-grader-component .submit-btn {
  padding: var(--spacing-2) var(--spacing-5);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-base);
  background: var(--color-primary-500);
  color: white;
}
.writing-grader-component .save-btn:hover:not(:disabled),
.writing-grader-component .submit-btn:hover:not(:disabled) {
  background: var(--color-primary-600);
}
.writing-grader-component .save-btn:disabled,
.writing-grader-component .submit-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.writing-grader-component .wizard-btn {
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--color-neutral-600);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  color: var(--color-text-secondary);
  white-space: nowrap;
  transition: border-color var(--transition-base), background-color var(--transition-base);
}
.writing-grader-component .wizard-btn:hover {
  border-color: var(--color-primary-500);
  background: var(--color-primary-500);
}
.writing-grader-component .ai-grader-btn {
  padding: var(--spacing-1) var(--spacing-3);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  background: #8b5cf6;
  color: white;
  transition: background var(--transition-base);
}
.writing-grader-component .ai-grader-btn:hover:not(:disabled) {
  background: #7c3aed;
}
.writing-grader-component .ai-grader-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.xiangqi-player-component-container {
  background-color: white;
  margin: 20px 10px;
  font-size: var(--font-size);
  color: var(--font-color);
  padding: var(--spacing-2);
  border-radius: var(--radius-sm);
}
.xiangqi-player-component-container .btn {
  padding: 8px 18px;
  border-radius: 6px;
  border: none;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
}
.xiangqi-player-component-container .btn:hover:not(:disabled) {
  opacity: 0.82;
  transform: translateY(-1px);
}
.xiangqi-player-component-container .btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}
.xiangqi-player-component-container .btn-sm {
  padding: 4px 5px;
  font-size: 0.75rem;
}
.xiangqi-player-component-container .btn-nav {
  background: var(--color-neutral-800);
  color: var(--color-text-muted);
}
.xiangqi-player-component-container .btn-next {
  background: var(--color-primary-500);
  color: #fff;
}
.xiangqi-player-component-container .btn-next:disabled {
  background: var(--color-neutral-800);
  color: var(--color-text-muted);
}
.xiangqi-player-component-container .btn-finish {
  background: var(--color-neutral-800);
  color: var(--color-neutral-500);
  margin-left: auto;
}
.xiangqi-player-component-container .btn-get-score {
  background: var(--color-primary-500);
  color: #fff;
}
.xiangqi-player-component-container .btn-retry {
  background: var(--grade-color-D);
  color: #fff;
}
.xiangqi-player-component-container .btn-history {
  background: var(--color-neutral-800);
  color: var(--color-text-muted);
}
.xiangqi-player-component-container .btn-exit {
  background: var(--color-neutral-800);
  color: var(--color-neutral-500);
}
.xiangqi-player-component-container .btn-get-retry-score {
  background: var(--grade-color-A);
  color: var(--color-neutral-900);
}
.xiangqi-player-component-container .btn-back {
  background: var(--color-neutral-800);
  color: var(--color-text-muted);
}
.xiangqi-player-component-container .progress-container .routine-name {
  text-align: center;
  margin: 5px;
}
.xiangqi-player-component-container .progress-container .routine-hint {
  text-align: center;
  margin: 5px;
}
.xiangqi-player-component-container .flex-container {
  width: 100%;
  margin: 0 auto;
  margin-bottom: 4px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex-grow: 1;
}
.xiangqi-player-component-container .flex-container .chess-board-container {
  background: url(assets/xiangqi/images/boards/board-ccbridge.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: 100%;
  max-width: 450px;
  min-width: 250px;
  aspect-ratio: 9/10;
  border: 1px solid black;
}
.xiangqi-player-component-container .flex-container .chess-board-container .xiangqi-board {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-flow: row;
}
.xiangqi-player-component-container .flex-container .chess-board-container .xiangqi-board div {
  width: calc((100% - 0px) * 0.11 * 1px);
  aspect-ratio: 1/1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.xiangqi-player-component-container .flex-container .chess-board-container .xiangqi-board div img {
  width: calc(100% - 3px);
}
.xiangqi-player-component-container .flex-container .chess-board-container .xiangqi-board div.legal-move {
  background-image: url("assets/xiangqi/images/misc/legal_move.png");
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.5;
}
.xiangqi-player-component-container .flex-container .chess-board-container .xiangqi-board div.legal-move:has(img) {
  background-image: url("assets/xiangqi/images/misc/legal_capture.png");
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 1;
}
.xiangqi-player-component-container .flex-container .chess-board-container .xiangqi-board div.legal-move:has(img) img {
  opacity: 0.5;
}
.xiangqi-player-component-container .flex-container .chess-board-container .xiangqi-board div.selected {
  background-color: coral;
  border-radius: 20%;
}
.xiangqi-player-component-container .flex-container .chess-board-container .xiangqi-board div.still-warm {
  opacity: 0.8;
  background-image: url("assets/xiangqi/images/misc/still_warm.png");
  background-position: center center;
  background-repeat: no-repeat;
}
.xiangqi-player-component-container .flex-container .history-table-container {
  width: 180px;
  vertical-align: top;
  padding: 5px 0 0 5px;
}
.xiangqi-player-component-container .flex-container .history-table-container .hisotry-table {
  width: 100%;
}
.xiangqi-player-component-container .flex-container .history-table-container .hisotry-table td {
  width: 49%;
  text-align: left;
  padding: 2px;
  font-size: 0.8rem;
}
.xiangqi-player-component-container .flex-container .history-table-container .hisotry-table td span {
  font-size: 10px;
  margin-right: 3px;
}
.xiangqi-player-component-container .book-list-with-result {
  width: 300px;
  margin: 0 auto;
}
.xiangqi-player-component-container .book-list-with-result table {
  width: 100%;
}
.xiangqi-player-component-container .book-list-with-result table td {
  padding: 2px 4px;
}
.xiangqi-player-component-container .book-list-with-result table td:first-child {
  width: 200px;
}
.xiangqi-player-component-container .book-list-with-result table td:last-child {
  width: 80px;
}
.xiangqi-player-component-container .book-list-with-result table tr:hover td {
  background-color: #eee;
}
.xiangqi-player-component-container .result-container {
  margin: 20px 0;
}
.xiangqi-player-component-container .result-container .game-status {
  text-align: center;
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: 500;
}
.xiangqi-player-component-container .result-container .game-status.correct {
  color: green;
}
.xiangqi-player-component-container .result-container .game-status.incorrect {
  color: orangered;
}
.xiangqi-player-component-container .result-container .correct-answer-container {
  text-align: center;
  margin-bottom: 20px;
  font-size: 15px;
  font-weight: 500;
}
.xiangqi-player-component-container .result-container .result-table-container {
  width: 250px;
  max-height: 300px;
  overflow-y: auto;
  margin: 0 auto;
  border: 1px dotted #eee;
}
.xiangqi-player-component-container .result-container .result-table-container .result-table {
  margin: 0 auto;
}
.xiangqi-player-component-container .result-container .result-table-container .result-table tr:nth-child(even) {
  background-color: #eee;
}
.xiangqi-player-component-container .result-container .result-table-container .result-table td:nth-child(odd) {
  width: 28px;
  font-size: 10px;
  padding-left: 2px;
}
.xiangqi-player-component-container .result-container .result-table-container .result-table td:nth-child(even) {
  width: 80px;
}
.xiangqi-player-component-container .recording-table-container {
  margin-top: 4px;
}
.xiangqi-player-component-container .recording-table-container table {
  width: 100%;
}
.xiangqi-player-component-container .recording-table-container tr:hover .buttons {
  opacity: 1;
}
.xiangqi-player-component-container .recording-table-container tr:nth-child(even) {
  background-color: ivory;
}
.xiangqi-player-component-container .recording-table-container th {
  font-weight: bold;
  font-size: 0.6em;
  padding: 3px;
  border-bottom: 1px dotted #eee;
}
.xiangqi-player-component-container .recording-table-container td {
  padding: 3px;
  border-bottom: 1px dotted #eee;
}
.xiangqi-player-component-container .recording-table-container td.buttons {
  white-space: nowrap;
  text-align: right;
  opacity: 0;
}
.xiangqi-player-component-container .recording-table-container td.buttons i {
  color: var(--button-color);
}
.xiangqi-player-component-container .recording-table-container td.buttons i:hover {
  color: var(--button-hover-color);
}
.xiangqi-player-component-container .book-table-container {
  width: 300px;
  max-height: 300px;
  overflow-y: auto;
}
.xiangqi-player-component-container .book-table-container .book-table {
  margin-top: 2px;
  margin-bottom: 20px;
  margin-left: 10px;
  border: 1px dotted #eee;
}
.xiangqi-player-component-container .book-table-container .book-table td {
  width: 100px;
  font-size: 14px;
  text-align: center;
}
.xiangqi-player-component-container .book-table-container .book-table tr:nth-child(even) {
  background-color: #eee;
}
.xiangqi-player-component-container .book-table-container .line-name {
  font-style: italic;
}
.xiangqi-player-component-container .book-table-container .line-name span:nth-child(2) {
  color: var(--button-color);
  margin-left: 10px;
}
.xiangqi-player-component-container .autoplay-name-row {
  text-align: center;
  margin-bottom: 10px;
}
.xiangqi-player-component-container .autoplay-button-row {
  text-align: center;
  margin-top: 10px;
}
.xiangqi-player-component-container .buttons-container {
  color: var(--button-color);
}
.xiangqi-player-component-container .buttons-container span {
  margin: 0 5px;
  cursor: pointer;
}
.xiangqi-player-component-container .buttons-container span.disabled {
  color: #dcdcdc;
  pointer-events: none;
}
.xiangqi-player-component-container .buttons-container span:first-child {
  margin-left: 0;
}
.xiangqi-player-component-container .buttons-container span.start-position-set {
  outline: 1px solid orangered;
  outline-offset: -3px;
  border-radius: 6px;
}

@media only screen and (max-width: 450px) {
  .history-table-container {
    display: none;
  }
}
.practice-activity-component-container {
  width: 100%;
  margin: 20px auto;
  padding: 10px 2px;
}

.pa-scroll-wrapper {
  overflow: auto;
  max-height: 70vh;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.practice-activity-component-container .date-container,
.practice-activity-component-container .date-bar-container,
.practice-activity-component-container .days-container {
  display: grid;
  grid-template-columns: 150px repeat(30, 20px);
  column-gap: 1px;
  min-width: max-content;
}

.practice-activity-component-container .date-container {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: white;
  margin-bottom: 5px;
  height: 35px;
}

.practice-activity-component-container .date-container > div {
  font-size: 8px;
  transform: rotate(-90deg);
  text-align: center;
}

.practice-activity-component-container .date-bar-container {
  margin-bottom: 1px;
}

.practice-activity-component-container .date-bar-container > div {
  height: 3px;
}

.practice-activity-component-container .date-bar-container > div.bg-green {
  background-color: green;
}

.practice-activity-component-container .days-container {
  margin-bottom: 1px;
}

.practice-activity-component-container .days-container > div {
  min-height: 20px;
  background-color: #dcdcdc;
}

.practice-activity-component-container .days-container > div.bg-green {
  background-color: green;
}

/* Sticky first column */
.practice-activity-component-container .pa-name-cell {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: white !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 2px;
}

.practice-activity-component-container .pa-name-cell:hover {
  background-color: #eee !important;
}

/* Corner cell: sticky both top and left */
.practice-activity-component-container .pa-corner-cell {
  z-index: 3;
}

/* Exclude corner/name cells from the date rotation */
.practice-activity-component-container .date-container > div.pa-name-cell {
  transform: none;
}

/*
 *    features  container
 */
.features-component-container {
  width: 100%;
  max-width: 800px;
  margin: auto;
  margin-bottom: 20px;
}
.features-component-container .feature-full {
  margin: 0;
  padding: 0;
  background-size: cover;
  width: 100%;
  min-height: 400px;
}
.features-component-container .feature-full:nth-child(odd) {
  background-position: 70% 10%;
}
.features-component-container .feature-full:nth-child(odd) .text-container {
  background-color: beige;
  top: 40px;
  left: 35%;
}
.features-component-container .feature-full:nth-child(odd) .text-container p {
  margin-left: 10px;
}
.features-component-container .feature-full:nth-child(even) .text-container {
  background-color: white;
  top: 40px;
  left: 5%;
}
.features-component-container .feature-full:nth-child(even) .text-container p {
  margin-left: 30px;
}
.features-component-container .feature-full .text-container {
  position: relative;
  width: 60%;
  padding: 20px;
  border-radius: 10px;
}
.features-component-container .feature-full .text-container h3 {
  text-align: center;
}
.features-component-container .feature-full .text-container p {
  width: 90%;
  padding: 0 10px 0 10px;
}
.features-component-container .feature {
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 30px 0 30px 0;
  align-items: center;
}
.features-component-container .feature:last-child {
  margin-bottom: 50px;
}
.features-component-container .feature:nth-child(odd) {
  background-color: beige;
}
.features-component-container .feature:nth-child(odd) .text-container p {
  margin-left: 10px;
}
.features-component-container .feature:nth-child(even) {
  background-color: white;
}
.features-component-container .feature:nth-child(even) .text-container p {
  margin-left: 30px;
}
.features-component-container .feature .image-container {
  padding: 5%;
  padding-top: 2%;
  width: 50%;
}
.features-component-container .feature .image-container .image {
  width: 80%;
  margin: auto;
}
.features-component-container .feature .text-container {
  display: inline-block;
  width: 50%;
  padding-top: 2%;
}
.features-component-container .feature .text-container h3 {
  text-align: center;
}
.features-component-container .feature .text-container p {
  width: 90%;
  padding: 0 10px 0 10px;
}

@media only screen and (max-width: 415px) {
  .features-component-container .feature-full {
    width: 100%;
    padding: 10px;
    min-height: 100px;
  }
  .features-component-container .feature-full .text-container {
    position: static;
    width: 80%;
    margin: auto;
    vertical-align: middle;
  }
  .features-component-container .feature .image-container {
    display: none;
  }
  .features-component-container .feature .text-container {
    width: 90%;
  }
}
/*
 *    action-band
 */
.action-band-wrapper {
  max-width: 100%;
  margin: auto;
  font-family: "connections";
}

.action-band {
  background-image: url(assets/bg-tablet-1440x508.jpeg);
  background-position: right top;
  background-repeat: no-repeat;
  box-sizing: border-box;
  height: 508px;
  padding: 65px 20px 0 20px;
  font-weight: 100;
  font-family: "connections";
}

.action-band h1 {
  padding: 0 0 20px 0;
  max-width: 100%;
  font-weight: normal;
}

.action-band h1 span {
  display: inline-block;
  white-space: nowrap;
  font-size: 48px;
  line-height: 1.15;
}

.action-band div {
  font-size: 18px;
  font-family: "connections";
  font-weight: 100;
  max-width: 100%;
  padding: 0 0 20px 0;
}

.action-band a {
  display: block;
  background: #dc1431;
  border-color: #dc1431;
  color: #fff;
  font-weight: 400;
  border-radius: 0;
  width: 200px;
  font-size: 22px;
  text-decoration: none;
  padding: 16px 40px;
  text-align: center;
  margin-top: 10px;
}

.action-band a span {
  font-size: 22px;
  font-weight: 400;
}

@media only screen and (max-width: 1440) {
  .action-band {
    background-image: url(assets/bg-tablet-1440x508.jpeg);
    height: 508px;
    padding: 65px 20px 0 20px;
  }
  .action-band h1 {
    max-width: 100%;
  }
  .action-band div {
    max-width: 100%;
  }
}
@media only screen and (max-width: 1300px) {
  .action-band {
    background-image: url(assets/bg-tablet-1024x508.jpeg);
    height: 508px;
    padding: 65px 20px 0 20px;
  }
  .action-band h1 {
    max-width: 45%;
  }
  .action-band div {
    max-width: 45%;
  }
}
@media only screen and (max-width: 760px) {
  .action-band {
    background-image: url(assets/bg-tablet-760x810.jpeg);
    padding: 65px 40px 0 40px;
    height: 808px;
    max-width: 760;
  }
  .action-band h1 {
    max-width: 100%;
  }
  .action-band div {
    max-width: 90%;
  }
}
@media only screen and (max-width: 415px) {
  .action-band {
    background-image: url(assets/bg-tablet-760x810.jpeg);
    text-align: center;
    height: 808px;
    max-width: 100%;
  }
  .action-band h1 {
    max-width: 100%;
  }
  .action-band h1 span {
    font-size: 30px;
  }
  .action-band div {
    max-width: 90%;
  }
  .action-band a {
    margin: auto;
  }
}
.landingpages-component-container .template-1 {
  font-weight: 400;
  font-family: "connections";
  background-color: white;
  color: #444;
  max-width: 800px;
  margin: 0 auto;
}
.landingpages-component-container .template-1 header {
  display: none;
}
.landingpages-component-container .template-1 main {
  padding: 20px !important;
}
.landingpages-component-container .template-1 main section#hero h1 {
  padding: 0 0 20px 0;
  max-width: 100%;
  font-weight: normal;
  font-size: 48px;
  line-height: 1.15;
}
.landingpages-component-container .template-1 main section#hero p.sub-heading {
  font-weight: 600;
  font-size: 20px;
}
.landingpages-component-container .template-1 main section#hero a {
  display: inline-block;
  width: 200px;
  height: 80px;
  background-color: rgb(212, 94, 94);
  border-radius: 10px;
  font-size: 22px;
  color: white;
  font-weight: 600;
  text-align: center;
  vertical-align: center;
  text-decoration: none;
  padding-top: 25px;
  margin: 10px 30%;
}
.landingpages-component-container .template-1 main section#introduction {
  margin-top: 50px;
  font-size: 18px;
  line-height: 2rem;
}
.landingpages-component-container .template-1 main section#benefits h2 {
  margin-bottom: 30px;
  margin-top: 50px;
  color: #888;
}
.landingpages-component-container .template-1 main section#benefits h3 {
  display: block;
  text-align: center;
}
.landingpages-component-container .template-1 main section#benefits .benefit {
  margin-bottom: 30px;
}
.landingpages-component-container .template-1 main section#benefits p {
  font-size: 18px;
  line-height: 2rem;
}
.landingpages-component-container .template-1 main section#testimonials h2 {
  margin-bottom: 30px;
  margin-top: 50px;
  color: #888;
}
.landingpages-component-container .template-1 main section#testimonials .testimonial {
  padding: 10px 40px;
}
.landingpages-component-container .template-1 main section#testimonials p.from {
  font-style: italic;
}
.landingpages-component-container .template-1 main section#cta h2 {
  font-size: 18px;
}
.landingpages-component-container .template-1 main section#cta a {
  display: inline-block;
  width: 200px;
  height: 80px;
  background-color: rgb(212, 94, 94);
  border-radius: 10px;
  font-size: 22px;
  color: white;
  font-weight: 600;
  text-align: center;
  vertical-align: center;
  text-decoration: none;
  padding-top: 25px;
  margin: 10px 30%;
}
.landingpages-component-container .template-1 footer {
  display: none;
}
.landingpages-component-container .template-2 {
  font-family: "connections";
  background-color: white;
  color: #444;
}
.landingpages-component-container .template-2 main {
  max-width: 1200px;
  margin: 0 auto;
}
.landingpages-component-container .template-2 section#hero {
  display: flex;
  background-image: url(assets/bg-tablet-1024x508.jpeg);
}
.landingpages-component-container .template-2 section#hero div {
  width: 60%;
  margin: 50px;
}
.landingpages-component-container .template-2 section#hero div h1 {
  padding: 0 0 20px 0;
  max-width: 100%;
  font-weight: normal;
  font-size: 40px;
  line-height: 1.15;
}
.landingpages-component-container .template-2 section#hero div .sub-heading {
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
}
.landingpages-component-container .template-2 section#hero div a {
  display: inline-block;
  line-height: 27px;
  background-color: rgb(47, 45, 46);
  color: white;
  text-decoration: none;
  border-radius: 2rem;
  text-align: center;
  padding: 10px 32px 10px 32px;
  font-size: 20px;
}
.landingpages-component-container .template-2 section#introduction {
  background: "https://user.lpcontent.net/images/BseGA4UKcwpy6Qa5TbGG76/zyrY5Q9nBju8B6md8RTWQ2";
}
.landingpages-component-container .template-2 section#introduction div {
  width: 80%;
  margin: 50px auto;
}
.landingpages-component-container .template-2 section#introduction div h2 {
  padding: 0 0 20px 0;
  max-width: 100%;
  font-weight: normal;
  font-size: 30px;
  line-height: 1;
  font-weight: 500;
}
.landingpages-component-container .template-2 section#introduction div p {
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
}
.landingpages-component-container .template-2 section#benefits {
  background-color: rgb(233, 242, 234);
  padding-top: 20px;
}
.landingpages-component-container .template-2 section#benefits > div {
  width: 80%;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
}
.landingpages-component-container .template-2 section#benefits > div h2 {
  color: #888;
  font-size: 18px;
}
.landingpages-component-container .template-2 section#benefits > div div.benefit {
  width: 80%;
  padding: 20px 20px;
  border-radius: 10px;
  margin-bottom: 15px;
  box-shadow: 0 0.5rem 1rem 0.1rem #dcdcdc;
  background-color: white;
}
.landingpages-component-container .template-2 section#benefits > div div.benefit h3 {
  padding: 0 0 10px 0;
  max-width: 100%;
  font-weight: normal;
  font-size: 30px;
  line-height: 1;
  font-weight: 500;
}
.landingpages-component-container .template-2 section#benefits > div div.benefit p {
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
}
.landingpages-component-container .template-2 section#benefits > div div.benefit:nth-child(odd) {
  margin-left: auto;
}
.landingpages-component-container .template-2 section#benefits > div div.benefit:nth-child(even) {
  margin-right: auto;
}
.landingpages-component-container .template-2 section#testimonials {
  background-color: rgb(249, 240, 231);
  padding-top: 20px;
}
.landingpages-component-container .template-2 section#testimonials > div {
  width: 80%;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
}
.landingpages-component-container .template-2 section#testimonials > div h2 {
  color: #888;
  font-size: 18px;
  margin-bottom: 10px;
}
.landingpages-component-container .template-2 section#testimonials > div div.testimonial {
  width: 80%;
  padding: 20px 20px;
  margin-bottom: 20px;
  box-shadow: 0 0.5rem 1rem 0.1rem #dcdcdc;
  background-color: ivory;
}
.landingpages-component-container .template-2 section#testimonials > div div.testimonial p {
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
}
.landingpages-component-container .template-2 section#testimonials > div div.testimonial p.from {
  font-style: italic;
  text-align: right;
  font-size: 14px;
}
.landingpages-component-container .template-2 section#cta {
  width: 80%;
  margin: 0 auto;
  padding: 30px 0;
}
.landingpages-component-container .template-2 section#cta h2 {
  padding: 0 0 20px 0;
  max-width: 100%;
  font-weight: normal;
  font-size: 25px;
  line-height: 1.1;
}
.landingpages-component-container .template-2 section#cta a {
  display: inline-block;
  line-height: 27px;
  background-color: rgb(47, 45, 46);
  color: white;
  text-decoration: none;
  border-radius: 2rem;
  text-align: center;
  padding: 10px 32px 10px 32px;
  font-size: 20px;
  margin-top: 20px;
}
.landingpages-component-container .template-2 header {
  display: none;
}
.landingpages-component-container .template-2 footer {
  display: none;
}
.landingpages-component-container .template-3, .landingpages-component-container .template-5, .landingpages-component-container .template-6 {
  font-family: "connections";
  background-color: white;
  color: #444;
}
.landingpages-component-container .template-3 main, .landingpages-component-container .template-5 main, .landingpages-component-container .template-6 main {
  max-width: 1200px;
  margin: 0 auto;
}
.landingpages-component-container .template-3 section#hero, .landingpages-component-container .template-5 section#hero, .landingpages-component-container .template-6 section#hero {
  display: flex;
}
.landingpages-component-container .template-3 section#hero div, .landingpages-component-container .template-5 section#hero div, .landingpages-component-container .template-6 section#hero div {
  width: 80%;
  margin: 50px;
}
.landingpages-component-container .template-3 section#hero div h1, .landingpages-component-container .template-5 section#hero div h1, .landingpages-component-container .template-6 section#hero div h1 {
  padding: 0 0 20px 0;
  max-width: 100%;
  font-weight: normal;
  font-size: 40px;
  line-height: 1.15;
}
.landingpages-component-container .template-3 section#hero div .sub-heading, .landingpages-component-container .template-5 section#hero div .sub-heading, .landingpages-component-container .template-6 section#hero div .sub-heading {
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
}
.landingpages-component-container .template-3 section#hero div a, .landingpages-component-container .template-5 section#hero div a, .landingpages-component-container .template-6 section#hero div a {
  display: inline-block;
  line-height: 27px;
  background-color: rgb(47, 45, 46);
  color: white;
  text-decoration: none;
  border-radius: 2rem;
  text-align: center;
  padding: 10px 32px 10px 32px;
  font-size: 20px;
}
.landingpages-component-container .template-3 section#introduction div, .landingpages-component-container .template-5 section#introduction div, .landingpages-component-container .template-6 section#introduction div {
  width: 80%;
  margin: 50px auto;
}
.landingpages-component-container .template-3 section#introduction div h2, .landingpages-component-container .template-5 section#introduction div h2, .landingpages-component-container .template-6 section#introduction div h2 {
  padding: 0 0 20px 0;
  max-width: 100%;
  font-weight: normal;
  font-size: 30px;
  line-height: 1.3;
  font-weight: 500;
}
.landingpages-component-container .template-3 section#introduction1, .landingpages-component-container .template-3 section#introduction2, .landingpages-component-container .template-5 section#introduction1, .landingpages-component-container .template-5 section#introduction2, .landingpages-component-container .template-6 section#introduction1, .landingpages-component-container .template-6 section#introduction2 {
  background: "https://user.lpcontent.net/images/BseGA4UKcwpy6Qa5TbGG76/zyrY5Q9nBju8B6md8RTWQ2";
}
.landingpages-component-container .template-3 section#introduction1 div, .landingpages-component-container .template-3 section#introduction2 div, .landingpages-component-container .template-5 section#introduction1 div, .landingpages-component-container .template-5 section#introduction2 div, .landingpages-component-container .template-6 section#introduction1 div, .landingpages-component-container .template-6 section#introduction2 div {
  width: 80%;
  margin: 50px auto;
}
.landingpages-component-container .template-3 section#introduction1 div h2, .landingpages-component-container .template-3 section#introduction2 div h2, .landingpages-component-container .template-5 section#introduction1 div h2, .landingpages-component-container .template-5 section#introduction2 div h2, .landingpages-component-container .template-6 section#introduction1 div h2, .landingpages-component-container .template-6 section#introduction2 div h2 {
  padding: 0 0 20px 0;
  max-width: 100%;
  font-weight: normal;
  font-size: 30px;
  line-height: 1;
  font-weight: 500;
}
.landingpages-component-container .template-3 section#introduction1 div p, .landingpages-component-container .template-3 section#introduction2 div p, .landingpages-component-container .template-5 section#introduction1 div p, .landingpages-component-container .template-5 section#introduction2 div p, .landingpages-component-container .template-6 section#introduction1 div p, .landingpages-component-container .template-6 section#introduction2 div p {
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
}
.landingpages-component-container .template-3 section.benefits, .landingpages-component-container .template-5 section.benefits, .landingpages-component-container .template-6 section.benefits {
  padding-top: 20px;
}
.landingpages-component-container .template-3 section.benefits > div, .landingpages-component-container .template-5 section.benefits > div, .landingpages-component-container .template-6 section.benefits > div {
  width: 80%;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
}
.landingpages-component-container .template-3 section.benefits > div h2, .landingpages-component-container .template-5 section.benefits > div h2, .landingpages-component-container .template-6 section.benefits > div h2 {
  color: #444;
  font-size: 20px;
  margin-bottom: 20px;
}
.landingpages-component-container .template-3 section.benefits > div div.benefit, .landingpages-component-container .template-5 section.benefits > div div.benefit, .landingpages-component-container .template-6 section.benefits > div div.benefit {
  width: 80%;
  padding: 20px 20px;
  border-radius: 10px;
  margin-bottom: 15px;
  box-shadow: 0 0.5rem 1rem 0.1rem #dcdcdc;
  background-color: white;
}
.landingpages-component-container .template-3 section.benefits > div div.benefit h3, .landingpages-component-container .template-5 section.benefits > div div.benefit h3, .landingpages-component-container .template-6 section.benefits > div div.benefit h3 {
  padding: 0 0 10px 0;
  max-width: 100%;
  font-weight: normal;
  font-size: 30px;
  line-height: 1;
  font-weight: 500;
}
.landingpages-component-container .template-3 section.benefits > div div.benefit p, .landingpages-component-container .template-5 section.benefits > div div.benefit p, .landingpages-component-container .template-6 section.benefits > div div.benefit p {
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
}
.landingpages-component-container .template-3 section.benefits > div div.benefit:nth-child(odd), .landingpages-component-container .template-5 section.benefits > div div.benefit:nth-child(odd), .landingpages-component-container .template-6 section.benefits > div div.benefit:nth-child(odd) {
  margin-left: auto;
}
.landingpages-component-container .template-3 section.benefits > div div.benefit:nth-child(even), .landingpages-component-container .template-5 section.benefits > div div.benefit:nth-child(even), .landingpages-component-container .template-6 section.benefits > div div.benefit:nth-child(even) {
  margin-right: auto;
}
.landingpages-component-container .template-3 section#testimonials, .landingpages-component-container .template-5 section#testimonials, .landingpages-component-container .template-6 section#testimonials {
  background-color: rgb(249, 240, 231);
  padding-top: 20px;
}
.landingpages-component-container .template-3 section#testimonials > div, .landingpages-component-container .template-5 section#testimonials > div, .landingpages-component-container .template-6 section#testimonials > div {
  width: 80%;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
}
.landingpages-component-container .template-3 section#testimonials > div h2, .landingpages-component-container .template-5 section#testimonials > div h2, .landingpages-component-container .template-6 section#testimonials > div h2 {
  color: #888;
  font-size: 18px;
  margin-bottom: 10px;
}
.landingpages-component-container .template-3 section#testimonials > div div.testimonial, .landingpages-component-container .template-5 section#testimonials > div div.testimonial, .landingpages-component-container .template-6 section#testimonials > div div.testimonial {
  width: 80%;
  padding: 20px 20px;
  margin-bottom: 20px;
  box-shadow: 0 0.5rem 1rem 0.1rem #dcdcdc;
  background-color: ivory;
}
.landingpages-component-container .template-3 section#testimonials > div div.testimonial p, .landingpages-component-container .template-5 section#testimonials > div div.testimonial p, .landingpages-component-container .template-6 section#testimonials > div div.testimonial p {
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
}
.landingpages-component-container .template-3 section#testimonials > div div.testimonial p.from, .landingpages-component-container .template-5 section#testimonials > div div.testimonial p.from, .landingpages-component-container .template-6 section#testimonials > div div.testimonial p.from {
  font-style: italic;
  text-align: right;
  font-size: 14px;
}
.landingpages-component-container .template-3 section#cta, .landingpages-component-container .template-5 section#cta, .landingpages-component-container .template-6 section#cta {
  width: 80%;
  margin: 0 auto;
  padding: 30px 0;
}
.landingpages-component-container .template-3 section#cta h2, .landingpages-component-container .template-5 section#cta h2, .landingpages-component-container .template-6 section#cta h2 {
  padding: 0 0 20px 0;
  max-width: 100%;
  font-weight: normal;
  font-size: 25px;
  line-height: 1.1;
}
.landingpages-component-container .template-3 section#cta a, .landingpages-component-container .template-5 section#cta a, .landingpages-component-container .template-6 section#cta a {
  display: inline-block;
  line-height: 27px;
  background-color: rgb(47, 45, 46);
  color: white;
  text-decoration: none;
  border-radius: 2rem;
  text-align: center;
  padding: 10px 32px 10px 32px;
  font-size: 20px;
  margin-top: 20px;
}
.landingpages-component-container .template-3 header, .landingpages-component-container .template-5 header, .landingpages-component-container .template-6 header {
  display: none;
}
.landingpages-component-container .template-3 footer, .landingpages-component-container .template-5 footer, .landingpages-component-container .template-6 footer {
  display: none;
}
.landingpages-component-container .template-5 main, .landingpages-component-container .template-6 main {
  max-width: 1200px;
  margin: 0 auto;
}
.landingpages-component-container .template-4 {
  font-family: "connections";
  background-color: rgb(249, 240, 231);
  color: #444;
}
.landingpages-component-container .template-4 main {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 30px;
}
.landingpages-component-container .template-4 section#benefits {
  padding-top: 20px;
}
.landingpages-component-container .template-4 section#benefits > div {
  width: 100%;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
}
.landingpages-component-container .template-4 section#benefits > div h3 {
  margin-bottom: 40px;
}
.landingpages-component-container .template-4 section#benefits > div div.benefit {
  width: 100%;
  padding: 20px 20px;
  border-radius: 10px;
  margin-bottom: 15px;
  box-shadow: 0 0.5rem 1rem 0.1rem #dcdcdc;
  background-color: white;
}
.landingpages-component-container .template-4 section#benefits > div div.benefit p {
  font-size: 18px;
  line-height: 30px;
  font-weight: 400;
}
.landingpages-component-container .template-4 header {
  display: none;
}
.landingpages-component-container .template-4 footer {
  display: none;
}

:root {
  --layout-gutter: 1.2rem;
  --layout-none-max-width: 576px;
  --layout-md-max-width: 720px;
  --layout-lg-max-width: 960px;
  --layout-xl-max-width: 1128px;
  --layout-sidebar-width: minmax(0,300px);
  --layout-sidebar-narrow-width: minmax(0,225px);
  --layout-main-width: minmax(0,auto);
  --layout-aside-width: minmax(0,300px);
  --layout-aside-narrow-width: minmax(0,225px);
}

.layout {
  margin-bottom-margin-bottom: var(--layout-gutter);
}

.layout-row {
  margin: var(--layout-gutter) 0;
}

/***********************************************************
    grid layout
    this grid layout uses grid to display content in columns.
    it allows up to 3 columns:  sidebar, main, and aside

    for one column layout:
        <div class="layout-grid mh-auto">
            <div class="artdeco-card p-3">
                ...
            </div>

            <div class="artdeco-card p-3">
                ...
            </div>  

            <div class="artdeco-card p-3">
                ...
            </div>
        </div>

    for two columns layout:   (also available for layout-grid--sidebar-main)
        <div class="layout-grid layout-grid--main-aside mh-auto">
            <div class="layout-grid__main">
                <div class="artdeco-card p-3 mb-3">
                    ...
                </div>

                <div class="artdeco-card p-3">
                    ...
                </div>  
            </div>

            <div class="layout-grid__aside">
                <div class="artdeco-card p-3">
                    ...
                </div>
            </div>
        </div>


    for three columns layout:

        <div class="layout-grid layout-grid--sidebar-main-aside mh-auto">
            <div class="layout-grid__sidebar">
                <div class="artdeco-card p-3">
                    ...
                </div>  
            </div>
            <div class="layout-grid__main">
                <div class="artdeco-card p-3 mb-3">
                    ...
                </div>

                <div class="artdeco-card p-3">
                    ...
                </div>  
            </div>

            <div class="layout-grid__aside">
                <div class="artdeco-card p-3">
                    ...
                </div>
            </div>
        </div>



***********************************************************/
.layout-grid {
  display: grid;
  grid-area: content;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  row-gap: var(--layout-gutter);
  column-gap: var(--layout-gutter);
}

@media screen and (min-width: 576px) {
  .layout-grid {
    overflow: unset;
  }
}
@media screen and (min-width: 768px) {
  .layout-grid {
    max-width: unset;
    width: var(--layout-md-max-width);
  }
}
@media screen and (min-width: 992px) {
  .layout-grid {
    width: var(--layout-lg-max-width);
  }
}
@media screen and (min-width: 1200px) {
  .layout-grid {
    width: var(--layout-xl-max-width);
  }
}
.layout-grid--sidebar-main-aside {
  grid-template-areas: "sidebar main aside";
  grid-template-columns: var(--layout-sidebar-width) var(--layout-main-width) var(--layout-aside-width);
}

.layout-grid--sidebar-main {
  grid-template-areas: "sidebar main";
  grid-template-columns: var(--layout-sidebar-width) var(--layout-main-width);
}

.layout-grid--main-aside {
  grid-template-areas: "main aside";
  grid-template-columns: var(--layout-main-width) var(--layout-aside-width);
}

.layout-grid__main {
  grid-area: main;
}

.layout-grid__sidebar {
  grid-area: sidebar;
}

.layout-grid__aside {
  grid-area: aside;
}

@media screen and (max-width: 1200px) {
  .layout-grid--sidebar-main-aside {
    grid-template-areas: "sidebar main aside";
    grid-template-columns: var(--scaffold-layout-sidebar-width) var(--scaffold-layout-main-width) var(--scaffold-layout-aside-width);
  }
  .layout-grid--sidebar-main {
    grid-template-areas: "sidebar main";
    grid-template-columns: var(--scaffold-layout-sidebar-width) var(--scaffold-layout-main-width);
  }
  .layout-grid--main-aside {
    grid-template-areas: "main aside";
    grid-template-columns: var(--scaffold-layout-main-width) var(--scaffold-layout-aside-width);
  }
}
@media screen and (max-width: 992px) {
  .layout-grid--sidebar-main-aside {
    grid-template-areas: "sidebar main aside";
    grid-template-columns: var(--scaffold-layout-sidebar-narrow-width) var(--scaffold-layout-main-width) var(--scaffold-layout-aside-width);
  }
  .layout-grid--sidebar-main {
    grid-template-areas: "sidebar main";
    grid-template-columns: var(--scaffold-layout-sidebar-width) var(--scaffold-layout-main-width);
  }
  .layout-grid--main-aside {
    grid-template-areas: "main aside";
    grid-template-columns: var(--scaffold-layout-main-width) var(--scaffold-layout-aside-width);
  }
}
@media screen and (max-width: 768px) {
  .layout-grid.layout-grid--sidebar-main-aside {
    grid-template-areas: "sidebar main" ". aside";
    grid-template-columns: var(--scaffold-layout-sidebar-narrow-width) var(--scaffold-layout-main-width);
  }
  .layout-grid.layout-grid--sidebar-main {
    grid-template-areas: "sidebar main";
    grid-template-columns: var(--scaffold-layout-sidebar-width) var(--scaffold-layout-main-width);
  }
  .layout-grid.layout-grid--main-aside {
    grid-template-areas: "main aside";
    grid-template-columns: var(--scaffold-layout-main-width) var(--scaffold-layout-aside-width);
  }
}
@media screen and (max-width: 576px) {
  .layout-grid.layout-grid--sidebar-main-aside {
    grid-template-areas: "main" "sidebar" "aside";
    grid-template-columns: var(--scaffold-layout-main-width);
  }
  .layout-grid.layout-grid--sidebar-main {
    grid-template-areas: "main" "sidebar";
    grid-template-columns: var(--scaffold-layout-main-width);
  }
  .layout-grid.layout-grid--main-aside {
    grid-template-areas: "main" "aside";
    grid-template-columns: var(--scaffold-layout-main-width);
  }
}
/***********************************************************
    end of grid layout
***********************************************************/
/*
    entity component
*/
.layout:has(> div[mg-Habit-table]) {
  margin: var(--layout-gutter) auto;
  width: var(--layout-lg-max-width);
}

.layout:has(> div[mg-HabitGroup]) {
  margin: var(--layout-gutter) auto;
  width: var(--layout-lg-max-width);
}

/*
    non-entity component
*/
.layout:has(div.my-seller-component-container) {
  /* layout-row */
  margin: var(--layout-gutter) 0;
}

.hue-web__artdeco-migration-scope--revert, :root {
  --artdeco-reset-base-margin-zero: 0;
  --artdeco-reset-base-padding-zero: 0;
  --artdeco-reset-base-border-zero: 0;
  --artdeco-reset-base-font-size-hundred-percent: 100%;
  --artdeco-reset-base-font-weight-bold: bold;
  --artdeco-reset-base-font-style-italic: italic;
  --artdeco-reset-base-outline-zero: 0;
  --artdeco-reset-base-outline-none: none;
  --artdeco-reset-base-line-height-one: 1;
  --artdeco-reset-base-display-block: block;
  --artdeco-reset-base-list-style-none: none;
  --artdeco-reset-base-quotes-none: none;
  --artdeco-reset-base-vertical-align-baseline: baseline;
  --artdeco-reset-base-vertical-align-middle: middle;
  --artdeco-reset-base-background-transparent: transparent;
  --artdeco-reset-base-opacity-zero: 0;
  --artdeco-reset-base-top-zero: 0;
  --artdeco-reset-base-position-absolute: absolute;
  --artdeco-reset-base-text-decoration-none: none;
  --artdeco-reset-base-text-decoration-line-through: line-through;
  --artdeco-reset-base-border-collapse-collapse: collapse;
  --artdeco-reset-base-get-color-black: var(--black,#000);
  --artdeco-reset-base-background-color-ff9: #ff9;
  --artdeco-reset-base-border-spacing-zero: 0;
  --artdeco-reset-base-cursor-help: help;
  --artdeco-reset-base-content-none: none;
  --artdeco-reset-base-left-minus-hundred-px: -100px;
  --artdeco-reset-base-border-thickness-1-px: 1px;
  --artdeco-reset-base-border-style-dotted: dotted ;
}

:root {
  --hue-web-svg-display-light: block;
  --hue-web-svg-display-dark: none;
  --black: #000;
  --black-a90: rgb(0 0 0/.9);
  --black-a75: rgb(0 0 0/.75);
  --black-a60: rgb(0 0 0/.6);
  --black-a45: rgb(0 0 0/.45);
  --black-a30: rgb(0 0 0/.3);
  --black-a15: rgba(0,0,0,0.15);
  --black-a12: rgba(0,0,0,0.12);
  --black-a08: rgba(0,0,0,0.08);
  --black-a04: rgba(0,0,0,0.04);
  --white: #fff;
  --white-a90: rgb(255 255 255/.9);
  --white-a85: hsla(0,0%,100%,0.85);
  --white-a75: rgb(255 255 255/.75);
  --white-a70: hsla(0,0%,100%,0.7);
  --white-a60: rgb(255 255 255/.6);
  --white-a55: hsla(0,0%,100%,0.55);
  --white-a40: hsla(0,0%,100%,0.4);
  --white-a25: hsla(0,0%,100%,0.25);
  --white-a18: hsla(0,0%,100%,0.18);
  --white-a12: hsla(0,0%,100%,0.12);
  --white-a06: hsla(0,0%,100%,0.06);
  --blue-10: #f6fbff;
  --blue-20: #e8f3ff;
  --blue-30: #d2e9ff;
  --blue-40: #aad6ff;
  --blue-50: #71b7fb;
  --blue-50-a20: rgba(112,181,249,0.2);
  --blue-50-a30: rgba(112,181,249,0.3);
  --blue-50-a40: rgba(112,181,249,0.4);
  --blue-60: #378fe9;
  --blue-70: #0a66c2;
  --blue-70-a30: rgba(10,102,194,0.3);
  --blue-70-a40: rgba(10,102,194,0.4);
  --blue-70-a50: rgba(10,102,194,0.5);
  --blue-80: #004182;
  --blue-90: #053059;
  --cool-gray-10: #f8fafd;
  --cool-gray-20: #edf3f8;
  --cool-gray-30: #dde7f1;
  --cool-gray-40: #c2d3e4;
  --cool-gray-50: #9eb5ca;
  --cool-gray-60: #788fa5;
  --cool-gray-70: #56687a;
  --cool-gray-80: #38434f;
  --cool-gray-85: #293138;
  --cool-gray-90: #293037;
  --warm-gray-10: #fbfaf8;
  --warm-gray-20: #f4f2ee;
  --warm-gray-30: #eae6df;
  --warm-gray-40: #d6cec2;
  --warm-gray-50: #bbb1a1;
  --warm-gray-60: #958b7b;
  --warm-gray-70: #6e6558;
  --warm-gray-80: #474139;
  --warm-gray-90: #322f29;
  --warm-red-10: #fff9f7;
  --warm-red-20: #ffefea;
  --warm-red-30: #ffdfd6;
  --warm-red-40: #fdc2b1;
  --warm-red-50: #f69b81;
  --warm-red-60: #e06847;
  --warm-red-70: #b24020;
  --warm-red-80: #762812;
  --warm-red-90: #512012;
  --teal-10: #eefdff;
  --teal-20: #ddf7fb;
  --teal-30: #c1edf4;
  --teal-40: #94dde8;
  --teal-50: #5ec0cf;
  --teal-50-a30: rgba(68,191,211,0.3);
  --teal-60: #3399a8;
  --teal-70: #1a707e;
  --teal-80: #114951;
  --teal-90: #0e343a;
  --purple-10: #fcfaff;
  --purple-20: #f7efff;
  --purple-30: #efe0ff;
  --purple-40: #e0c7fc;
  --purple-40-a15: rgba(222,197,253,0.15);
  --purple-50: #c8a1f6;
  --purple-60: #a871ea;
  --purple-70: #8443ce;
  --purple-70-a15: rgba(131,68,204,0.15);
  --purple-80: #592099;
  --purple-90: #40176f;
  --system-red-10: #fff9fa;
  --system-red-20: #ffeef1;
  --system-red-30: #ffdee3;
  --system-red-40: #ffc1ca;
  --system-red-50: #fd93a3;
  --system-red-60: #f3536b;
  --system-red-70: #cb112d;
  --system-red-80: #8a0015;
  --system-red-90: #640312;
  --system-green-10: #f0fdf9;
  --system-green-20: #d6faee;
  --system-green-30: #aff4dd;
  --system-green-40: #74e5c0;
  --system-green-50: #37c898;
  --system-green-60: #0f9f6f;
  --system-green-70: #01754f;
  --system-green-80: #004c33;
  --system-green-90: #013726;
  --pink-10: #fff8ff;
  --pink-20: #ffedfe;
  --pink-30: #fcddfb;
  --pink-40: #f6c0f3;
  --pink-50: #ea95e5;
  --pink-60: #d160cb;
  --pink-70: #a734a1;
  --pink-80: #711c6d;
  --pink-90: #51164e;
  --amber-10: #fdfaf5;
  --amber-20: #fdf0de;
  --amber-30: #fce3bc;
  --amber-30-a50: rgba(252,226,186,0.5);
  --amber-40: #f9c982;
  --amber-50: #e9a53f;
  --amber-60: #c37d16;
  --amber-70: #915907;
  --amber-80: #5c3b09;
  --amber-90: #402b0c;
  --copper-10: #fdf9f8;
  --copper-20: #fdefec;
  --copper-30: #fbe1d9;
  --copper-40: #f4c7bb;
  --copper-50: #e0a494;
  --copper-60: #be7b6a;
  --copper-70: #8f5849;
  --copper-80: #5d392f;
  --copper-90: #412922;
  --green-10: #f4fdf0;
  --green-20: #e1f9d5;
  --green-30: #caf1b6;
  --green-40: #a7e18b;
  --green-50: #81c360;
  --green-60: #5f9b41;
  --green-70: #44712e;
  --green-80: #2e4921;
  --green-90: #24331c;
  --sage-10: #f9fbf8;
  --sage-20: #edf4ea;
  --sage-30: #daebd1;
  --sage-40: #c0d8b4;
  --sage-50: #9fba91;
  --sage-60: #7b9370;
  --sage-70: #5a6b51;
  --sage-80: #3a4535;
  --sage-90: #2a3127;
  --lime-10: #f9fce4;
  --lime-20: #f0f6cb;
  --lime-30: #e2eca8;
  --lime-40: #cbd978;
  --lime-50: #acba5f;
  --lime-60: #85942f;
  --lime-70: #616c20;
  --lime-80: #3f4618;
  --lime-90: #2d3118;
  --camo-10: #fafbf5;
  --camo-20: #f1f3e5;
  --camo-30: #e5e9cd;
  --camo-40: #cfd5af;
  --camo-50: #b0b68c;
  --camo-60: #8a8f6c;
  --camo-70: #65684e;
  --camo-80: #414335;
  --camo-90: #2f3027;
  --smoke-10: #f5fbfc;
  --smoke-20: #e9f4f6;
  --smoke-30: #d9e9ec;
  --smoke-40: #bcd6da;
  --smoke-50: #98b8bd;
  --smoke-60: #719196;
  --smoke-70: #526a6e;
  --smoke-80: #364547;
  --smoke-90: #283132;
  --lavender-10: #fbfafc;
  --lavender-20: #f4f1f8;
  --lavender-30: #ebe3f3;
  --lavender-40: #d9cce7;
  --lavender-50: #bdabd2;
  --lavender-60: #9983b1;
  --lavender-70: #715e86;
  --lavender-80: #493d57;
  --lavender-90: #332c3c;
  --mauve-10: #fbfafb;
  --mauve-20: #f8eff8;
  --mauve-30: #f3e1f2;
  --mauve-40: #e5c8e4;
  --mauve-50: #cea5cc;
  --mauve-60: #ac7da9;
  --mauve-70: #80597e;
  --mauve-80: #523a51;
  --mauve-80-a50: rgba(82,58,81,0.5);
  --mauve-90: #3a2a39;
  --system-gray-10: #fafafa;
  --system-gray-20: #f2f2f2;
  --system-gray-30: #e6e6e6;
  --system-gray-40: #d1d1d1;
  --system-gray-50: #b2b2b2;
  --system-gray-60: #8c8c8c;
  --system-gray-70: #666;
  --system-gray-80: #424242;
  --system-gray-90: #2f2f2f;
  --system-orange-10: #fff9f5;
  --system-orange-20: #ffefe5;
  --system-orange-30: #ffe0cc;
  --system-orange-40: #ffc5a0;
  --system-orange-50: #fe9958;
  --system-orange-60: #e06a1a;
  --system-orange-70: #ad4601;
  --system-orange-80: #702f03;
  --system-orange-90: #4c240a;
  --transparent: transparent;
  --transparent-white: hsla(0,0%,100%,0);
  --transparent-black: transparent;
  --amber-60-a10: rgb(195 125 22/.1);
  --amber-60-a15: rgb(195 125 22/.15);
  --amber-60-a20: rgb(195 125 22/.2);
  --amber-60-a25: rgb(195 125 22/.25);
  --amber-60-a30: rgb(195 125 22/.3);
  --amber-60-a35: rgb(195 125 22/.35);
  --amber-100: #271d10;
  --black-a100: #000;
  --blue-60-a10: rgb(55 143 233/.1);
  --blue-60-a15: rgb(55 143 233/.15);
  --blue-60-a20: rgb(55 143 233/.2);
  --blue-60-a25: rgb(55 143 233/.25);
  --blue-60-a30: rgb(55 143 233/.3);
  --blue-60-a35: rgb(55 143 233/.35);
  --blue-60-a40: rgb(55 143 233/.4);
  --blue-60-a45: rgb(55 143 233/.45);
  --blue-100: #0a2037;
  --camo-60-a10: rgb(138 143 108/.1);
  --camo-60-a15: rgb(138 143 108/.15);
  --camo-60-a20: rgb(138 143 108/.2);
  --camo-60-a25: rgb(138 143 108/.25);
  --camo-60-a30: rgb(138 143 108/.3);
  --camo-60-a35: rgb(138 143 108/.35);
  --camo-100: #1f1f1c;
  --cool-gray-60-a10: rgb(120 143 165/.1);
  --cool-gray-60-a15: rgb(120 143 165/.15);
  --cool-gray-60-a20: rgb(120 143 165/.2);
  --cool-gray-60-a25: rgb(120 143 165/.25);
  --cool-gray-60-a30: rgb(120 143 165/.3);
  --cool-gray-60-a35: rgb(120 143 165/.35);
  --cool-gray-100: #1b1f23;
  --copper-60-a10: rgb(190 123 106/.1);
  --copper-60-a15: rgb(190 123 106/.15);
  --copper-60-a20: rgb(190 123 106/.2);
  --copper-60-a25: rgb(190 123 106/.25);
  --copper-60-a30: rgb(190 123 106/.3);
  --copper-60-a35: rgb(190 123 106/.35);
  --copper-100: #2a1c18;
  --green-60-a10: rgb(95 155 65/.1);
  --green-60-a15: rgb(95 155 65/.15);
  --green-60-a20: rgb(95 155 65/.2);
  --green-60-a25: rgb(95 155 65/.25);
  --green-60-a30: rgb(95 155 65/.3);
  --green-60-a35: rgb(95 155 65/.35);
  --green-100: #192115;
  --lavender-60-a10: rgb(153 131 177/.1);
  --lavender-60-a15: rgb(153 131 177/.15);
  --lavender-60-a20: rgb(153 131 177/.2);
  --lavender-60-a25: rgb(153 131 177/.25);
  --lavender-60-a30: rgb(153 131 177/.3);
  --lavender-60-a35: rgb(153 131 177/.35);
  --lavender-100: #221d26;
  --lime-60-a10: rgb(133 148 47/.1);
  --lime-60-a15: rgb(133 148 47/.15);
  --lime-60-a20: rgb(133 148 47/.2);
  --lime-60-a25: rgb(133 148 47/.25);
  --lime-60-a30: rgb(133 148 47/.3);
  --lime-60-a35: rgb(133 148 47/.35);
  --lime-100: #1e2110;
  --mauve-60-a10: rgb(172 125 169/.1);
  --mauve-60-a15: rgb(172 125 169/.15);
  --mauve-60-a20: rgb(172 125 169/.2);
  --mauve-60-a25: rgb(172 125 169/.25);
  --mauve-60-a30: rgb(172 125 169/.3);
  --mauve-60-a35: rgb(172 125 169/.35);
  --mauve-100: #251c24;
  --pink-60-a10: rgb(209 96 203/.1);
  --pink-60-a15: rgb(209 96 203/.15);
  --pink-60-a20: rgb(209 96 203/.2);
  --pink-60-a25: rgb(209 96 203/.25);
  --pink-60-a30: rgb(209 96 203/.3);
  --pink-60-a35: rgb(209 96 203/.35);
  --pink-100: #341232;
  --purple-60-a10: rgb(168 113 234/.1);
  --purple-60-a15: rgb(168 113 234/.15);
  --purple-60-a20: rgb(168 113 234/.2);
  --purple-60-a25: rgb(168 113 234/.25);
  --purple-60-a30: rgb(168 113 234/.3);
  --purple-60-a35: rgb(168 113 234/.35);
  --purple-100: #2a1245;
  --sage-60-a10: rgb(123 147 112/.1);
  --sage-60-a15: rgb(123 147 112/.15);
  --sage-60-a20: rgb(123 147 112/.2);
  --sage-60-a25: rgb(123 147 112/.25);
  --sage-60-a30: rgb(123 147 112/.3);
  --sage-60-a35: rgb(123 147 112/.35);
  --sage-100: #1d201b;
  --smoke-60-a10: rgb(113 145 150/.1);
  --smoke-60-a15: rgb(113 145 150/.15);
  --smoke-60-a20: rgb(113 145 150/.2);
  --smoke-60-a25: rgb(113 145 150/.25);
  --smoke-60-a30: rgb(113 145 150/.3);
  --smoke-60-a35: rgb(113 145 150/.35);
  --smoke-100: #1b2021;
  --system-gray-60-a10: rgb(140 140 140/.1);
  --system-gray-60-a15: rgb(140 140 140/.15);
  --system-gray-60-a20: rgb(140 140 140/.2);
  --system-gray-60-a25: rgb(140 140 140/.25);
  --system-gray-60-a30: rgb(140 140 140/.3);
  --system-gray-60-a35: rgb(140 140 140/.35);
  --system-gray-60-a40: rgb(140 140 140/.4);
  --system-gray-60-a45: rgb(140 140 140/.45);
  --system-gray-80-a85: rgb(66 66 66/.85);
  --system-gray-100: #1f1f1f;
  --system-green-60-a10: rgb(15 159 111/.1);
  --system-green-60-a15: rgb(15 159 111/.15);
  --system-green-60-a20: rgb(15 159 111/.2);
  --system-green-60-a25: rgb(15 159 111/.25);
  --system-green-60-a30: rgb(15 159 111/.3);
  --system-green-60-a35: rgb(15 159 111/.35);
  --system-green-100: #022419;
  --system-orange-60-a10: rgb(224 106 26/.1);
  --system-orange-60-a15: rgb(224 106 26/.15);
  --system-orange-60-a20: rgb(224 106 26/.2);
  --system-orange-60-a25: rgb(224 106 26/.25);
  --system-orange-60-a30: rgb(224 106 26/.3);
  --system-orange-60-a35: rgb(224 106 26/.35);
  --system-orange-100: #2f1a0d;
  --system-red-60-a10: rgb(243 83 107/.1);
  --system-red-60-a15: rgb(243 83 107/.15);
  --system-red-60-a20: rgb(243 83 107/.2);
  --system-red-60-a25: rgb(243 83 107/.25);
  --system-red-60-a30: rgb(243 83 107/.3);
  --system-red-60-a35: rgb(243 83 107/.35);
  --system-red-100: #410911;
  --teal-60-a10: rgb(51 153 168/.1);
  --teal-60-a15: rgb(51 153 168/.15);
  --teal-60-a20: rgb(51 153 168/.2);
  --teal-60-a25: rgb(51 153 168/.25);
  --teal-60-a30: rgb(51 153 168/.3);
  --teal-60-a35: rgb(51 153 168/.35);
  --teal-100: #0b2226;
  --warm-gray-60-a10: rgb(149 139 123/.1);
  --warm-gray-60-a15: rgb(149 139 123/.15);
  --warm-gray-60-a20: rgb(149 139 123/.2);
  --warm-gray-60-a25: rgb(149 139 123/.25);
  --warm-gray-60-a30: rgb(149 139 123/.3);
  --warm-gray-60-a35: rgb(149 139 123/.35);
  --warm-gray-100: #211f1c;
  --warm-red-60-a10: rgb(224 104 71/.1);
  --warm-red-60-a15: rgb(224 104 71/.15);
  --warm-red-60-a20: rgb(224 104 71/.2);
  --warm-red-60-a25: rgb(224 104 71/.25);
  --warm-red-60-a30: rgb(224 104 71/.3);
  --warm-red-60-a35: rgb(224 104 71/.35);
  --warm-red-100: #321811;
  --white-a30: rgb(255 255 255/.3);
  --white-a45: rgb(255 255 255/.45);
  --white-a100: #fff;
  --color-transparent: var(--transparent-white);
  --color-transparent-on-dark: var(--transparent-black);
  --color-brand: var(--blue-70);
  --color-brand-active: var(--blue-80);
  --color-brand-on-dark: var(--white-a90);
  --color-brand-on-dark-active: var(--white-a70);
  --color-brand-accent-1: var(--amber-70);
  --color-brand-accent-1-active: var(--amber-80);
  --color-brand-accent-1-on-dark: var(--amber-50);
  --color-brand-accent-1-on-dark-active: var(--amber-40);
  --color-background-brand-accent-1: var(--amber-30);
  --color-background-brand-accent-1-dark: var(--amber-80);
  --color-brand-accent-2: var(--copper-70);
  --color-brand-accent-2-active: var(--copper-80);
  --color-brand-accent-2-on-dark: var(--copper-50);
  --color-brand-accent-2-on-dark-active: var(--copper-40);
  --color-background-brand-accent-2: var(--copper-30);
  --color-background-brand-accent-2-dark: var(--copper-80);
  --color-brand-accent-3: var(--sage-70);
  --color-brand-accent-3-active: var(--sage-80);
  --color-brand-accent-3-on-dark: var(--sage-50);
  --color-brand-accent-3-on-dark-active: var(--sage-40);
  --color-background-brand-accent-3: var(--sage-30);
  --color-background-brand-accent-3-dark: var(--sage-80);
  --color-brand-accent-4: var(--cool-gray-70);
  --color-brand-accent-4-active: var(--cool-gray-80);
  --color-brand-accent-4-on-dark: var(--cool-gray-50);
  --color-brand-accent-4-on-dark-active: var(--cool-gray-40);
  --color-background-brand-accent-4: var(--cool-gray-30);
  --color-background-brand-accent-4-dark: var(--cool-gray-80);
  --color-brand-accent-5: var(--warm-gray-70);
  --color-brand-accent-5-active: var(--warm-gray-80);
  --color-brand-accent-5-on-dark: var(--warm-gray-50);
  --color-brand-accent-5-on-dark-active: var(--warm-gray-40);
  --color-background-brand-accent-5: var(--warm-gray-30);
  --color-background-brand-accent-5-dark: var(--warm-gray-80);
  --color-action-on-dark: var(--blue-50);
  --color-action-on-dark-active: var(--blue-40);
  --color-signal-positive: var(--system-green-70);
  --color-signal-positive-active: var(--system-green-80);
  --color-signal-positive-on-dark: var(--system-green-50);
  --color-signal-positive-on-dark-active: var(--system-green-40);
  --color-signal-caution: var(--system-orange-70);
  --color-signal-caution-active: var(--system-orange-80);
  --color-signal-caution-on-dark: var(--system-orange-50);
  --color-signal-caution-on-dark-active: var(--system-orange-40);
  --color-signal-negative: var(--system-red-70);
  --color-signal-negative-active: var(--system-red-80);
  --color-signal-negative-on-dark: var(--system-red-50);
  --color-signal-negative-on-dark-active: var(--system-red-40);
  --color-signal-neutral: var(--cool-gray-70);
  --color-signal-neutral-active: var(--cool-gray-80);
  --color-signal-neutral-on-dark: var(--cool-gray-50);
  --color-signal-neutral-on-dark-active: var(--cool-gray-40);
  --color-text-on-dark: var(--white);
  --color-text-on-dark-active: var(--white-a90);
  --color-text-stick: var(--black-a90);
  --color-text-stick-active: var(--black-a90);
  --color-text-on-dark-flip: var(--white);
  --color-text-on-dark-flip-active: var(--white-a70);
  --color-text-shift-on-dark-flip: var(--white);
  --color-text-shift-on-dark-flip-active: var(--white-a90);
  --color-text-low-emphasis: var(--black-a60);
  --color-text-low-emphasis-active: var(--black-a90);
  --color-text-low-emphasis-on-dark: var(--white-a75);
  --color-text-low-emphasis-on-dark-active: var(--white-a90);
  --color-text-low-emphasis-shift: var(--black-a60);
  --color-text-low-emphasis-shift-active: var(--black-a90);
  --color-text-low-emphasis-stick: var(--black-a60);
  --color-text-low-emphasis-stick-active: var(--black-a90);
  --color-text-disabled: var(--black-a30);
  --color-text-on-dark-disabled: var(--white-a40);
  --color-text-link-visited: var(--purple-70);
  --color-text-link-visited-active: var(--purple-80);
  --color-text-link-visited-on-dark: var(--purple-50);
  --color-text-link-visited-on-dark-active: var(--purple-40);
  --color-text-solid: var(--system-gray-100);
  --color-text-solid-active: var(--system-gray-100);
  --color-text-solid-on-dark: var(--system-gray-20);
  --color-text-solid-on-dark-active: var(--system-gray-40);
  --color-text-solid-low-emphasis: var(--system-gray-70);
  --color-text-solid-low-emphasis-active: var(--system-gray-90);
  --color-text-solid-low-emphasis-on-dark: var(--system-gray-40);
  --color-text-solid-low-emphasis-on-dark-active: var(--system-gray-50);
  --color-text-solid-disabled: var(--system-gray-50);
  --color-text-solid-on-dark-disabled: var(--system-gray-60);
  --color-icon-on-dark: var(--white);
  --color-icon-on-dark-active: var(--white-a90);
  --color-icon-stick: var(--black-a60);
  --color-icon-stick-active: var(--black-a90);
  --color-icon-on-dark-flip: var(--white);
  --color-icon-on-dark-flip-active: var(--white-a70);
  --color-icon-nav: var(--black-a60);
  --color-icon-nav-active: var(--black-a90);
  --color-icon-nav-on-dark: var(--white-a70);
  --color-icon-nav-on-dark-active: var(--white);
  --color-icon-nav-selected: var(--black-a90);
  --color-icon-nav-selected-active: var(--black-a90);
  --color-icon-nav-selected-on-dark: var(--white-a90);
  --color-icon-nav-selected-on-dark-active: var(--white-a90);
  --color-icon-on-dark-disabled: var(--white-a40);
  --color-border-on-dark: var(--white);
  --color-border-on-dark-active: var(--white-a90);
  --color-border-low-emphasis: var(--black-a30);
  --color-border-low-emphasis-active: var(--black-a60);
  --color-border-low-emphasis-on-dark: var(--white-a40);
  --color-border-low-emphasis-on-dark-active: var(--white-a25);
  --color-border-faint-on-dark: var(--white-a12);
  --color-border-gap-on-dark: var(--black-a60);
  --color-background-container: var(--white);
  --color-background-container-tint: var(--cool-gray-10);
  --color-background-container-dark: var(--cool-gray-90);
  --color-background-container-dark-tint: var(--cool-gray-85);
  --color-background-canvas: var(--warm-gray-20);
  --color-background-canvas-mobile: var(--warm-gray-30);
  --color-background-canvas-tint: var(--white);
  --color-background-canvas-dark: var(--black);
  --color-background-canvas-dark-tint: var(--cool-gray-90);
  --color-background-scrim: var(--black-a60);
  --color-background-scrim-dark: var(--black-a90);
  --color-background-new-on-dark: var(--blue-70-a30);
  --color-background-new-on-dark-active: var(--blue-70-a50);
  --color-background-new-on-dark-hover: var(--blue-70-a40);
  --color-background-storyline-gradient: var(--black-a30);
  --color-element: var(--black-a90);
  --color-element-active: var(--black-a90);
  --color-element-on-dark: var(--white);
  --color-element-on-dark-active: var(--white-a70);
  --color-element-low-emphasis: var(--black-a60);
  --color-element-low-emphasis-active: var(--black-a90);
  --color-element-low-emphasis-on-dark: var(--white-a70);
  --color-element-low-emphasis-on-dark-active: var(--white-a70);
  --color-element-low-emphasis-shift: var(--black-a60);
  --color-element-low-emphasis-shift-active: var(--black-a90);
  --color-element-low-emphasis-stick: var(--black-a60);
  --color-element-low-emphasis-stick-active: var(--black-a90);
  --color-element-shift-on-dark-flip: var(--white);
  --color-element-shift-on-dark-flip-active: var(--white-a70);
  --color-element-solid: var(--system-gray-90);
  --color-element-solid-active: var(--system-gray-90);
  --color-element-solid-on-dark: var(--white);
  --color-element-solid-on-dark-active: var(--system-gray-40);
  --color-element-solid-low-emphasis: var(--system-gray-70);
  --color-element-solid-low-emphasis-active: var(--system-gray-90);
  --color-element-solid-low-emphasis-on-dark: var(--system-gray-40);
  --color-element-solid-low-emphasis-on-dark-active: var(--system-gray-50);
  --color-element-solid-low-emphasis-shift: var(--system-gray-70);
  --color-element-solid-low-emphasis-shift-active: var(--system-gray-90);
  --color-element-solid-low-emphasis-stick: var(--system-gray-70);
  --color-element-solid-low-emphasis-stick-active: var(--system-gray-90);
  --color-element-solid-shift-on-dark-flip: var(--white);
  --color-element-solid-shift-on-dark-flip-active: var(--system-gray-40);
  --color-element-solid-disabled: var(--system-gray-40);
  --color-element-solid-on-dark-disabled: var(--system-gray-70);
  --color-background-faint: var(--system-gray-60-a20);
  --color-background-faint-active: var(--system-gray-60-a40);
  --color-background-faint-on-dark: var(--white-a12);
  --color-background-faint-on-dark-active: var(--white-a06);
  --color-checked-tint: var(--system-green-30);
  --color-checked-on-dark: var(--system-green-50);
  --color-checked-on-dark-active: var(--system-green-40);
  --color-checked-tint-on-dark: var(--system-green-80);
  --color-checked-offset: var(--system-green-60);
  --color-checked-offset-active: var(--system-green-70);
  --color-checked-offset-on-dark: var(--system-green-50);
  --color-checked-offset-on-dark-active: var(--system-green-60);
  --color-background-none: var(--color-transparent);
  --color-background-none-hover: var(--color-transparent);
  --color-background-none-active: var(--black-a08);
  --color-background-none-on-dark: var(--color-transparent);
  --color-background-none-on-dark-hover: var(--color-transparent);
  --color-background-none-on-dark-active: var(--white-a12);
  --color-background-none-action-active: var(--blue-50-a20);
  --color-background-none-action-on-dark-active: var(--blue-50-a20);
  --color-background-none-tint-hover: var(--black-a08);
  --color-background-none-tint-active: var(--black-a12);
  --color-background-none-tint-on-dark-hover: var(--white-a18);
  --color-background-none-tint-on-dark-active: var(--white-a12);
  --color-background-none-tint-action-hover: var(--blue-50-a20);
  --color-background-none-tint-action-active: var(--blue-50-a30);
  --color-background-none-tint-action-on-dark-hover: var(--blue-50-a30);
  --color-background-none-tint-action-on-dark-active: var(--blue-50-a20);
  --color-disabled: var(--black-a30);
  --color-on-dark-disabled: var(--white-a40);
  --color-background-on-dark-disabled: var(--white-a12);
  --color-border-focus: var(--teal-70);
  --color-background-focus: var(--teal-50-a30);
  --color-border-focus-on-dark: var(--teal-40);
  --color-background-focus-on-dark: var(--teal-50-a30);
  --color-shadow-on-dark: var(--black-a60);
  --voyager-color-action: var(--blue-70);
  --voyager-color-action-hover: var(--blue-80);
  --voyager-color-action-active: var(--blue-90);
  --voyager-color-action-on-dark: var(--white);
  --voyager-color-action-on-dark-hover: var(--white);
  --voyager-color-action-on-dark-active: var(--white-a70);
  --voyager-color-action-stick: var(--blue-70);
  --voyager-color-action-stick-hover: var(--blue-80);
  --voyager-color-action-stick-active: var(--blue-90);
  --voyager-color-action-selected: var(--cool-gray-20);
  --voyager-color-action-on-dark-selected: var(--cool-gray-80);
  --voyager-color-background-brand-accent-1-tint: var(--amber-20);
  --voyager-color-background-brand-accent-1-tint-on-dark: var(--amber-80);
  --voyager-color-background-brand-accent-2-tint: var(--copper-20);
  --voyager-color-background-brand-accent-2-tint-on-dark: var(--copper-80);
  --voyager-color-background-brand-accent-3-tint: var(--sage-20);
  --voyager-color-background-brand-accent-3-tint-on-dark: var(--sage-80);
  --voyager-color-background-brand-accent-4-tint: var(--cool-gray-20);
  --voyager-color-background-brand-accent-4-tint-on-dark: var(--cool-gray-80);
  --voyager-color-background-brand-accent-5-tint: var(--warm-gray-20);
  --voyager-color-background-brand-accent-5-tint-on-dark: var(--warm-gray-80);
  --memorialization-color-border: var(--lavender-80);
  --memorialization-color-label: var(--lavender-80);
  --memorialization-color-canvas: var(--lavender-10);
  --memorialization-color-border-on-dark: var(--lavender-40);
  --memorialization-color-background-label-on-dark: var(--lavender-40);
  --premium-color-brand: var(--amber-40);
  --premium-color-action: var(--amber-40);
  --premium-color-action-hover: var(--amber-50);
  --premium-color-action-active: var(--amber-60);
  --premium-color-text: var(--black-a90);
  --premium-color-text-active: var(--black-a90);
  --premium-color-icon: var(--black-a90);
  --premium-color-icon-active: var(--black-a90);
  --premium-color-plan-1: var(--green-70);
  --premium-color-plan-2: var(--cool-gray-70);
  --premium-color-plan-3: var(--mauve-70);
  --premium-color-plan-4: var(--mauve-80);
  --premium-color-plan-5: var(--copper-70);
  --premium-color-plan-6: var(--teal-70);
  --premium-color-inbug: var(--amber-60);
  --reactions-color-text-like: var(--blue-70);
  --reactions-color-text-like-on-dark: var(--blue-40);
  --reactions-color-text-celebrate: var(--green-70);
  --reactions-color-text-celebrate-on-dark: var(--green-40);
  --reactions-color-text-support: var(--lavender-70);
  --reactions-color-text-support-on-dark: var(--lavender-40);
  --reactions-color-text-love: var(--warm-red-70);
  --reactions-color-text-love-on-dark: var(--warm-red-40);
  --reactions-color-text-insightful: var(--amber-70);
  --reactions-color-text-insightful-on-dark: var(--amber-40);
  --reactions-color-text-curious: var(--mauve-70);
  --reactions-color-text-curious-on-dark: var(--mauve-40);
  --reactions-color-text-entertainment: var(--teal-70);
  --reactions-color-text-entertainment-on-dark: var(--teal-40);
  --reactions-color-content-like: var(--blue-70);
  --reactions-color-content-like-on-dark: var(--blue-40);
  --reactions-color-content-celebrate: var(--green-70);
  --reactions-color-content-celebrate-on-dark: var(--green-40);
  --reactions-color-content-support: var(--lavender-70);
  --reactions-color-content-support-on-dark: var(--lavender-40);
  --reactions-color-content-love: var(--warm-red-70);
  --reactions-color-content-love-on-dark: var(--warm-red-40);
  --reactions-color-content-insightful: var(--amber-70);
  --reactions-color-content-insightful-on-dark: var(--amber-40);
  --reactions-color-content-curious: var(--mauve-70);
  --reactions-color-content-curious-on-dark: var(--mauve-40);
  --voyager-color-background-comment: var(--system-gray-20);
  --voyager-color-background-comment-v2: var(--warm-gray-10);
  --voyager-color-background-comment-v3: var(--system-gray-20);
  --profile-video-color-border-ring-emphasized: linear-gradient(319.22deg,var(--purple-60) 15.03%,var(--blue-50) 84.54%);
  --profile-video-color-border-ring-deemphasized: var(--black-a30);
  --stories-color-element-content-consumption-indicator-track: var(--white-a70);
  --stories-color-element-content-consumption-indicator-fill: var(--white);
  --stories-color-element-accent-1-light: var(--system-red-40);
  --stories-color-element-accent-1-dark: var(--system-red-50);
  --stories-color-element-accent-1-darker: var(--system-red-70);
  --stories-color-element-accent-2-lighter: var(--warm-red-30);
  --stories-color-element-accent-2-light: var(--warm-red-40);
  --stories-color-element-accent-2-dark: var(--warm-red-50);
  --stories-color-element-accent-2-darker: var(--warm-red-70);
  --stories-color-element-accent-3-lighter: var(--system-green-30);
  --stories-color-element-accent-3-light: var(--system-green-40);
  --stories-color-element-accent-3-dark: var(--system-green-50);
  --stories-color-element-accent-3-darker: var(--system-green-70);
  --stories-color-element-accent-4-lighter: var(--blue-30);
  --stories-color-element-accent-4-light: var(--blue-40);
  --stories-color-element-accent-4-dark: var(--blue-50);
  --stories-color-element-accent-4-darker: var(--blue-70);
  --stories-color-element-accent-5-lighter: var(--purple-30);
  --stories-color-element-accent-5-light: var(--purple-40);
  --stories-color-element-accent-5-dark: var(--purple-50);
  --stories-color-element-accent-5-darker: var(--purple-70);
  --stories-color-element-accent-6-lighter: var(--cool-gray-30);
  --stories-color-element-accent-6-light: var(--cool-gray-40);
  --stories-color-element-accent-6-dark: var(--cool-gray-50);
  --stories-color-element-accent-6-darker: var(--cool-gray-70);
  --post-color-icon-1: var(--blue-60);
  --post-color-icon-2: var(--green-60);
  --post-color-icon-3: var(--amber-60);
  --post-color-icon-4: var(--warm-red-60);
  --post-color-icon-5: var(--purple-60);
  --post-color-icon-promoted-ct-1: var(--blue-70);
  --post-color-icon-promoted-ct-1-on-dark: var(--smoke-30);
  --post-color-text-promoted-ct-1: var(--blue-70);
  --post-color-background-container-icon-promoted-ct-1: var(--blue-70);
  --post-color-background-container-promoted-ct-1: var(--smoke-30);
  --post-color-icon-promoted-ct-2: var(--copper-70);
  --post-color-icon-promoted-ct-2-on-dark: var(--amber-30);
  --post-color-text-promoted-ct-2: var(--copper-70);
  --post-color-background-container-icon-promoted-ct-2: var(--copper-70);
  --post-color-background-container-promoted-ct-2: var(--amber-30);
  --post-color-icon-promoted-ct-3: var(--mauve-70);
  --post-color-icon-promoted-ct-3-on-dark: var(--copper-30);
  --post-color-text-promoted-ct-3: var(--mauve-70);
  --post-color-background-container-icon-promoted-ct-3: var(--mauve-70);
  --post-color-background-container-promoted-ct-3: var(--copper-30);
  --post-color-icon-promoted-ct-4: var(--teal-70);
  --post-color-icon-promoted-ct-4-on-dark: var(--sage-30);
  --post-color-text-promoted-ct-4: var(--teal-70);
  --post-color-background-container-icon-promoted-ct-4: var(--teal-70);
  --post-color-background-container-promoted-ct-4: var(--sage-30);
  --post-color-icon-promoted-ct-neutral: var(--system-gray-70);
  --post-color-icon-promoted-ct-neutral-on-dark: var(--warm-gray-20);
  --post-color-text-promoted-ct-neutral: var(--system-gray-70);
  --post-color-background-container-icon-promoted-ct-neutral: var(--system-gray-70);
  --post-color-background-container-promoted-ct-neutral: var(--warm-gray-20);
  --voyager-color-background-slider-track: var(--system-gray-60);
  --voyager-color-background-container-tint-2: var(--cool-gray-20);
  --voyager-color-background-input-search: var(--cool-gray-20);
  --voyager-color-background-input-search-active: var(--cool-gray-10);
  --voyager-color-background-input-search-on-dark: var(--cool-gray-80);
  --voyager-color-background-input-search-on-dark-active: var(--cool-gray-90);
  --voyager-color-background-coachmark: var(--white);
  --voyager-color-background-coachmark-inner-dot: var(--purple-70);
  --voyager-color-background-coachmark-outer-dot: var(--purple-70-a15);
  --voyager-color-background-coachmark-on-dark: var(--cool-gray-90);
  --voyager-color-background-coachmark-inner-dot-on-dark: var(--purple-40);
  --voyager-color-background-coachmark-outer-dot-on-dark: var(--purple-40-a15);
  --voyager-color-icon-accent-person: var(--color-brand-accent-4);
  --voyager-color-icon-accent-person-on-dark: var(--color-brand-accent-4-on-dark);
  --voyager-color-icon-accent-company: var(--color-brand-accent-5);
  --voyager-color-icon-accent-company-on-dark: var(--color-brand-accent-5-on-dark);
  --voyager-color-icon-accent-school: var(--color-brand-accent-3);
  --voyager-color-icon-accent-school-on-dark: var(--color-brand-accent-3-on-dark);
  --voyager-color-icon-accent-group: var(--color-brand-accent-1);
  --voyager-color-icon-accent-group-on-dark: var(--color-brand-accent-3-on-dark);
  --voyager-color-icon-accent-hashtag: var(--color-brand-accent-4);
  --voyager-color-icon-accent-hashtag-on-dark: var(--color-brand-accent-4-on-dark);
  --voyager-color-icon-accent-event: var(--color-brand-accent-2);
  --voyager-color-icon-accent-event-on-dark: var(--color-brand-accent-2-on-dark);
  --voyager-color-icon-accent-publication: var(--color-brand-accent-4);
  --voyager-color-icon-accent-publication-on-dark: var(--color-brand-accent-4-on-dark);
  --voyager-color-qr-code: var(--black);
  --voyager-color-qr-code-background: var(--white);
  --voyager-color-background-contribution-card: var(--amber-10);
  --voyager-color-background-contribution-reaction-checked: var(--amber-30);
  --voyager-color-text-contribution-reaction: var(--amber-70);
  --voyager-color-skeleton: var(--black-a08);
  --voyager-color-skeleton-content: var(--black-a08);
  --voyager-color-skeleton-content-on-dark: var(--white-a12);
  --voyager-color-skeleton-content-shimmer: linear-gradient(120deg,var(--color-transparent) 40%,var(--voyager-color-skeleton-content) 50%,var(--color-transparent) 60%);
  --voyager-color-skeleton-content-shimmer-on-dark: linear-gradient(120deg,var(--color-transparent-on-dark) 40%,var(--voyager-color-skeleton-content-on-dark) 50%,var(--color-transparent-on-dark) 60%);
  --voyager-color-background-scrim-tint: var(--white-a85);
  --voyager-color-background-attachment-hover: var(--white-a85);
  --voyager-color-background-attachment-pdf: var(--system-red-70);
  --voyager-color-background-attachment-pdf-on-dark: var(--system-red-40);
  --voyager-color-background-attachment-txt: var(--purple-70);
  --voyager-color-background-attachment-txt-on-dark: var(--purple-40);
  --voyager-color-background-attachment-psd: var(--blue-70);
  --voyager-color-background-attachment-psd-on-dark: var(--blue-40);
  --voyager-color-background-attachment-ai: var(--warm-red-70);
  --voyager-color-background-attachment-ai-on-dark: var(--warm-red-40);
  --voyager-color-background-attachment-ppt: var(--warm-red-70);
  --voyager-color-background-attachment-ppt-on-dark: var(--warm-red-40);
  --voyager-color-background-attachment-doc: var(--blue-80);
  --voyager-color-background-attachment-doc-on-dark: var(--blue-40);
  --voyager-color-background-attachment-xls: var(--system-green-70);
  --voyager-color-background-attachment-xls-on-dark: var(--system-green-40);
  --voyager-color-background-attachment-default: var(--cool-gray-70);
  --voyager-color-background-attachment-default-on-dark: var(--cool-gray-40);
  --voyager-color-element-loading: var(--black-a60);
  --voyager-color-element-loading-on-dark: var(--white-a70);
  --voyager-color-background-badge-notification: var(--system-red-70);
  --voyager-color-background-badge-new: var(--blue-70);
  --voyager-color-background-badge-selection: var(--system-green-70);
  --voyager-color-background-badge-presence: var(--system-green-70);
  --voyager-color-element-rating-input: var(--color-icon);
  --voyager-color-element-rating-input-on-dark: var(--color-icon-on-dark);
  --voyager-color-element-rating-display: var(--amber-60);
  --voyager-color-element-rating-display-on-dark: var(--amber-50);
  --identity-color-background-label: var(--amber-30);
  --identity-color-border-ring: linear-gradient(135deg,var(--warm-red-60) 25%,var(--amber-30) 75%);
  --identity-color-icon-create: var(--warm-red-60);
  --live-color-live-indicator: var(--system-red-70);
  --live-color-background-comment: var(--system-gray-20);
  --live-color-background-like: var(--white);
  --voyager-color-background-overlay: var(--black-a60);
  --voyager-color-background-overlay-hover: var(--black-a75);
  --voyager-color-background-overlay-active: var(--black-a90);
  --voyager-color-background-overlay-gradient-to-top: linear-gradient(0deg,var(--color-transparent) 0%,var(--voyager-color-background-overlay));
  --voyager-color-background-overlay-gradient-to-bottom: linear-gradient(180deg,var(--color-transparent) 0%,var(--voyager-color-background-overlay));
  --stories-color-background-overlay: linear-gradient(180deg,var(--black-a75),var(--black-a60) 25%,var(--black-a45) 50%,var(--black-a75));
  --messenger-color-background-input-message: var(--warm-gray-20);
  --messenger-color-background-input-message-active: var(--warm-gray-30);
  --growth-color-invitation-accent-groups: var(--smoke-60);
  --growth-color-invitation-accent-events: var(--teal-60);
  --growth-color-invitation-accent-newsletter: var(--green-60);
  --growth-color-invitation-accent-pages: var(--purple-60);
  --data-viz-color-accent-1: var(--blue-60);
  --data-viz-color-accent-2: var(--teal-80);
  --data-viz-color-accent-3: var(--warm-red-60);
  --data-viz-color-accent-4: var(--warm-gray-80);
  --data-viz-color-accent-5: var(--lime-60);
  --data-viz-color-accent-6: var(--blue-80);
  --data-viz-color-accent-7: var(--amber-60);
  --data-viz-color-accent-8: var(--pink-80);
  --intro-color-coachmark-element-outer: var(--amber-30-a50);
  --coach-color-background-member-bubble: var(--cool-gray-80);
  --coach-color-background-prompt: var(--warm-gray-30);
  --color-coach-prompt-contextual-background: var(--warm-gray-20);
  --color-coach-prompt-contextual-background-hover: var(--warm-gray-30);
  --color-gradient-brand: linear-gradient(var(--blue-80),var(--blue-70));
  --voyager-color-background-container-ai-insights: var(--warm-gray-90);
  --color-accent-1: var(--amber-70);
  --color-accent-1-active: var(--amber-80);
  --color-accent-1-hover: var(--amber-80);
  --color-accent-2: var(--warm-red-70);
  --color-accent-2-active: var(--warm-red-80);
  --color-accent-2-hover: var(--warm-red-80);
  --color-accent-3: var(--lime-70);
  --color-accent-3-active: var(--lime-80);
  --color-accent-3-hover: var(--lime-80);
  --color-accent-4: var(--cool-gray-70);
  --color-accent-4-active: var(--cool-gray-80);
  --color-accent-4-hover: var(--cool-gray-80);
  --color-accent-5: var(--teal-70);
  --color-accent-5-active: var(--teal-80);
  --color-accent-5-hover: var(--teal-80);
  --color-accent-6: var(--purple-70);
  --color-accent-6-active: var(--purple-80);
  --color-accent-6-hover: var(--purple-80);
  --color-accent-7: var(--pink-70);
  --color-accent-7-active: var(--pink-80);
  --color-accent-7-hover: var(--pink-80);
  --color-action: var(--blue-70);
  --color-action-active: var(--blue-80);
  --color-action-hover: var(--blue-80);
  --color-alert: var(--system-red-70);
  --color-background: var(--white-a100);
  --color-background-accent-soft-1: var(--amber-20);
  --color-background-accent-soft-2: var(--warm-red-20);
  --color-background-accent-soft-3: var(--sage-20);
  --color-background-accent-soft-4: var(--cool-gray-20);
  --color-background-accent-soft-5: var(--smoke-20);
  --color-background-accent-soft-6: var(--lavender-20);
  --color-background-accent-soft-7: var(--mauve-20);
  --color-background-accent-strong-1: var(--amber-30);
  --color-background-accent-strong-2: var(--warm-red-30);
  --color-background-accent-strong-3: var(--sage-30);
  --color-background-accent-strong-4: var(--cool-gray-30);
  --color-background-accent-strong-5: var(--smoke-30);
  --color-background-accent-strong-6: var(--lavender-30);
  --color-background-accent-strong-7: var(--mauve-30);
  --color-background-accent-transparent-1-active: var(--amber-60-a20);
  --color-background-accent-transparent-1-hover: var(--amber-60-a10);
  --color-background-accent-transparent-2-active: var(--warm-red-60-a20);
  --color-background-accent-transparent-2-hover: var(--warm-red-60-a10);
  --color-background-accent-transparent-3-active: var(--lime-60-a20);
  --color-background-accent-transparent-3-hover: var(--lime-60-a10);
  --color-background-accent-transparent-4-active: var(--cool-gray-60-a20);
  --color-background-accent-transparent-4-hover: var(--cool-gray-60-a10);
  --color-background-accent-transparent-5-active: var(--teal-60-a20);
  --color-background-accent-transparent-5-hover: var(--teal-60-a10);
  --color-background-accent-transparent-6-active: var(--purple-60-a20);
  --color-background-accent-transparent-6-hover: var(--purple-60-a10);
  --color-background-accent-transparent-7-active: var(--pink-60-a20);
  --color-background-accent-transparent-7-hover: var(--pink-60-a10);
  --color-background-action-transparent-active: var(--blue-60-a20);
  --color-background-action-transparent-hover: var(--blue-60-a10);
  --color-background-caution-soft: var(--system-orange-20);
  --color-background-caution-strong: var(--system-orange-30);
  --color-background-caution-transparent-active: var(--system-orange-60-a20);
  --color-background-caution-transparent-hover: var(--system-orange-60-a10);
  --color-background-checked-transparent-active: var(--system-green-60-a20);
  --color-background-checked-transparent-hover: var(--system-green-60-a10);
  --color-background-current-transparent-active: var(--system-gray-60-a20);
  --color-background-current-transparent-hover: var(--system-gray-60-a10);
  --color-background-disabled: var(--system-gray-60-a20);
  --color-background-faint-hover: var(--system-gray-60-a30);
  --color-background-knockout: var(--white-a100);
  --color-background-knockout-active: var(--white-a60);
  --color-background-knockout-hover: var(--white-a100);
  --color-background-negative-soft: var(--system-red-20);
  --color-background-negative-strong: var(--system-red-30);
  --color-background-negative-transparent-active: var(--system-red-60-a20);
  --color-background-negative-transparent-hover: var(--system-red-60-a10);
  --color-background-neutral-soft: var(--warm-gray-20);
  --color-background-neutral-strong: var(--warm-gray-30);
  --color-background-new: var(--blue-60-a20);
  --color-background-new-active: var(--blue-60-a40);
  --color-background-new-hover: var(--blue-60-a30);
  --color-background-offset: var(--warm-gray-20);
  --color-background-overlay: var(--black-a75);
  --color-background-overlay-active: var(--black-a90);
  --color-background-overlay-hover: var(--black-a90);
  --color-background-positive-soft: var(--system-green-20);
  --color-background-positive-strong: var(--system-green-30);
  --color-background-positive-transparent-active: var(--system-green-60-a20);
  --color-background-positive-transparent-hover: var(--system-green-60-a10);
  --color-background-solid-disabled: var(--system-gray-30);
  --color-background-transparent: var(--transparent);
  --color-background-transparent-active: var(--system-gray-60-a20);
  --color-background-transparent-hover: var(--system-gray-60-a10);
  --color-border: var(--black-a75);
  --color-border-active: var(--black-a90);
  --color-border-disabled: var(--black-a30);
  --color-border-faint: var(--system-gray-60-a20);
  --color-border-faint-active: var(--system-gray-60-a40);
  --color-border-faint-hover: var(--system-gray-60-a30);
  --color-border-gap: var(--white-a100);
  --color-border-grid: var(--system-gray-30);
  --color-border-hover: var(--black-a90);
  --color-border-knockout: var(--white-a100);
  --color-border-knockout-active: var(--white-a60);
  --color-border-knockout-hover: var(--white-a100);
  --color-border-subtle: var(--black-a30);
  --color-border-subtle-active: var(--black-a45);
  --color-border-subtle-hover: var(--black-a45);
  --color-border-transparent: var(--transparent);
  --color-caution: var(--system-orange-70);
  --color-caution-active: var(--system-orange-80);
  --color-caution-hover: var(--system-orange-80);
  --color-checked: var(--system-green-70);
  --color-checked-active: var(--system-green-80);
  --color-checked-hover: var(--system-green-80);
  --color-current: var(--black-a90);
  --color-current-active: var(--black-a90);
  --color-current-hover: var(--black-a90);
  --color-data-categorical-a: var(--teal-70);
  --color-data-categorical-b: var(--warm-red-60);
  --color-data-categorical-c: var(--blue-80);
  --color-data-categorical-d: var(--purple-60);
  --color-data-categorical-e: var(--lime-70);
  --color-data-categorical-f: var(--pink-70);
  --color-data-categorical-g: var(--amber-80);
  --color-data-categorical-h: var(--system-gray-60);
  --color-data-a-1: var(--teal-10);
  --color-data-a-2: var(--teal-20);
  --color-data-a-3: var(--teal-30);
  --color-data-a-4: var(--teal-40);
  --color-data-a-5: var(--teal-50);
  --color-data-a-6: var(--teal-60);
  --color-data-a-7: var(--teal-70);
  --color-data-a-8: var(--teal-80);
  --color-data-b-1: var(--warm-red-10);
  --color-data-b-2: var(--warm-red-20);
  --color-data-b-3: var(--warm-red-30);
  --color-data-b-4: var(--warm-red-40);
  --color-data-b-5: var(--warm-red-50);
  --color-data-b-6: var(--warm-red-60);
  --color-data-b-7: var(--warm-red-70);
  --color-data-b-8: var(--warm-red-80);
  --color-data-c-1: var(--blue-10);
  --color-data-c-2: var(--blue-20);
  --color-data-c-3: var(--blue-30);
  --color-data-c-4: var(--blue-40);
  --color-data-c-5: var(--blue-50);
  --color-data-c-6: var(--blue-60);
  --color-data-c-7: var(--blue-70);
  --color-data-c-8: var(--blue-80);
  --color-data-d-1: var(--purple-10);
  --color-data-d-2: var(--purple-20);
  --color-data-d-3: var(--purple-30);
  --color-data-d-4: var(--purple-40);
  --color-data-d-5: var(--purple-50);
  --color-data-d-6: var(--purple-60);
  --color-data-d-7: var(--purple-70);
  --color-data-d-8: var(--purple-80);
  --color-data-e-1: var(--lime-10);
  --color-data-e-2: var(--lime-20);
  --color-data-e-3: var(--lime-30);
  --color-data-e-4: var(--lime-40);
  --color-data-e-5: var(--lime-50);
  --color-data-e-6: var(--lime-60);
  --color-data-e-7: var(--lime-70);
  --color-data-e-8: var(--lime-80);
  --color-data-f-1: var(--pink-10);
  --color-data-f-2: var(--pink-20);
  --color-data-f-3: var(--pink-30);
  --color-data-f-4: var(--pink-40);
  --color-data-f-5: var(--pink-50);
  --color-data-f-6: var(--pink-60);
  --color-data-f-7: var(--pink-70);
  --color-data-f-8: var(--pink-80);
  --color-data-g-1: var(--amber-10);
  --color-data-g-2: var(--amber-20);
  --color-data-g-3: var(--amber-30);
  --color-data-g-4: var(--amber-40);
  --color-data-g-5: var(--amber-50);
  --color-data-g-6: var(--amber-60);
  --color-data-g-7: var(--amber-70);
  --color-data-g-8: var(--amber-80);
  --color-data-h-1: var(--system-gray-10);
  --color-data-h-2: var(--system-gray-20);
  --color-data-h-3: var(--system-gray-30);
  --color-data-h-4: var(--system-gray-40);
  --color-data-h-5: var(--system-gray-50);
  --color-data-h-6: var(--system-gray-60);
  --color-data-h-7: var(--system-gray-70);
  --color-data-h-8: var(--system-gray-80);
  --color-editorial-blockquote: var(--black-a30);
  --color-editorial-highlight: var(--amber-30);
  --color-fif-button-background: var(--mauve-80);
  --color-fif-button-background-active: var(--mauve-80);
  --color-fif-button-background-hover: var(--mauve-70);
  --color-fif-button-label: var(--amber-30);
  --color-fif-callout-background: var(--amber-30);
  --color-fif-callout-text-title: var(--mauve-80);
  --color-fif-coachmark-inner: var(--mauve-80);
  --color-fif-coachmark-outer: var(--amber-30);
  --color-fif-tag-background: var(--amber-30);
  --color-fif-tag-label: var(--mauve-80);
  --color-icon: var(--black-a75);
  --color-icon-active: var(--black-a90);
  --color-icon-disabled: var(--black-a30);
  --color-icon-hover: var(--black-a90);
  --color-icon-knockout: var(--white-a100);
  --color-icon-knockout-active: var(--white-a60);
  --color-icon-knockout-hover: var(--white-a100);
  --color-icon-rating: var(--amber-60);
  --color-indicator: var(--black-a90);
  --color-indicator-active: var(--black-a90);
  --color-indicator-disabled: var(--black-a30);
  --color-indicator-hover: var(--black-a90);
  --color-indicator-knockout: var(--white-a100);
  --color-indicator-knockout-active: var(--white-a60);
  --color-indicator-knockout-hover: var(--white-a100);
  --color-indicator-solid-disabled: var(--system-gray-50);
  --color-input-android-indicator: var(--system-gray-80);
  --color-input-android-track-checked: var(--system-green-60);
  --color-background-checked-range: var(--system-green-30);
  --color-label: var(--black-a75);
  --color-label-active: var(--black-a90);
  --color-label-disabled: var(--black-a30);
  --color-label-hover: var(--black-a90);
  --color-label-knockout: var(--white-a100);
  --color-label-knockout-active: var(--white-a60);
  --color-label-knockout-hover: var(--white-a100);
  --color-link: var(--blue-70);
  --color-link-active: var(--blue-80);
  --color-link-hover: var(--blue-80);
  --color-link-visited: var(--purple-70);
  --color-link-visited-active: var(--purple-80);
  --color-link-visited-hover: var(--purple-80);
  --color-loading: var(--blue-70);
  --color-logo-brand: var(--blue-70);
  --color-logo-brand-lockup: var(--black-a100);
  --color-logo-mono: var(--black-a100);
  --color-logo-mono-lockup: var(--warm-gray-70);
  --color-nav-icon: var(--black-a60);
  --color-nav-icon-active: var(--black-a90);
  --color-nav-icon-hover: var(--black-a90);
  --color-nav-label: var(--black-a60);
  --color-nav-label-active: var(--black-a90);
  --color-nav-label-hover: var(--black-a90);
  --color-negative: var(--system-red-70);
  --color-negative-active: var(--system-red-80);
  --color-negative-hover: var(--system-red-80);
  --color-new: var(--blue-70);
  --color-positive: var(--system-green-70);
  --color-positive-active: var(--system-green-80);
  --color-positive-hover: var(--system-green-80);
  --color-premium-accent-1: var(--green-70);
  --color-premium-accent-2: var(--cool-gray-70);
  --color-premium-accent-3: var(--lavender-70);
  --color-premium-accent-4: var(--mauve-80);
  --color-premium-accent-5: var(--copper-70);
  --color-premium-accent-6: var(--teal-70);
  --color-premium-brand: var(--amber-40);
  --color-premium-button-background: var(--amber-40);
  --color-premium-button-background-active: var(--amber-60);
  --color-premium-button-background-hover: var(--amber-50);
  --color-premium-button-label: var(--black-a90);
  --color-premium-button-label-active: var(--black-a90);
  --color-premium-button-label-hover: var(--black-a90);
  --color-premium-icon: var(--black-a90);
  --color-premium-icon-active: var(--black-a90);
  --color-premium-icon-hover: var(--black-a90);
  --color-premium-inbug: var(--amber-60);
  --color-presence-indicator-offline: var(--white-a100);
  --color-presence-indicator-online: var(--white-a100);
  --color-presence-offline: var(--system-gray-70);
  --color-presence-online: var(--system-green-70);
  --color-qr-code: var(--black-a100);
  --color-qr-code-background: var(--white-a100);
  --color-scrim: var(--black-a60);
  --color-scrim-conceal: var(--system-gray-80-a85);
  --color-search-input-background: var(--system-gray-20);
  --color-search-input-background-active: var(--system-gray-10);
  --color-shadow: var(--black-a30);
  --color-shadow-supplemental: var(--system-gray-60-a20);
  --color-table-background-offset: var(--cool-gray-10);
  --color-text: var(--black-a90);
  --color-text-active: var(--black-a90);
  --color-text-hover: var(--black-a90);
  --color-text-meta: var(--black-a60);
  --color-text-meta-active: var(--black-a90);
  --color-text-meta-hover: var(--black-a90);
  --color-text-meta-solid: var(--system-gray-70);
  --color-text-meta-solid-active: var(--system-gray-100);
  --color-text-meta-solid-hover: var(--system-gray-100);
  --color-text-solid-hover: var(--system-gray-100);
  --color-track: var(--black-a60);
  --color-track-disabled: var(--black-a30);
  --color-track-solid: var(--system-gray-70);
  --elevation-flat: none;
  --elevation-lined: 0px 0px 0px 1px var(--color-border-faint);
  --elevation-raised: var(--elevation-lined),0px 4px 4px var(--color-shadow);
  --voyager-elevation-text-theater: 0 0 2px var(--black-a60);
  --gradient-premium-coach-background: to right,var(--blue-20),var(--warm-red-20);
  --gradient-premium-coach-overlay: to bottom,transparent,var(--color-background);
  --gradient-premium-coach-overlay-marketing: to bottom,transparent,color-mix(in srgb,var(--color-background) 75%,transparent);
  --illustration-microspot-size-small: 4.8rem;
  --illustration-microspot-size-large: 6.4rem;
  --illustration-spot-size-small: 12.8rem;
  --illustration-spot-size-large: 25.6rem;
  --background-icons: url(/aero-v1/sc/h/cwn0a0e7hog2i33c88ucrvot5);
  --entity-background-company: url(/aero-v1/sc/h/3esmlcvt3d6hd63qnh3gm04zr);
  --entity-background-event: url(/aero-v1/sc/h/40ac0813fgj0sf8tv3gtu3faq);
  --entity-background-group: url(/aero-v1/sc/h/68ao3xk5x5pa9fwrs0al41kf0);
  --entity-background-hashtag: url(/aero-v1/sc/h/eb2snh0c2ji8vzcnh9lw1us0u);
  --entity-background-person: url(/aero-v1/sc/h/55k1z8997gh8dwtihm11aajyq);
  --entity-background-product: url(/aero-v1/sc/h/ctt9jbwul88s4jacnglj7d05a);
  --entity-background-publication: url(/aero-v1/sc/h/5kujyv5ot64u9pzg2sqvjoi58);
  --entity-background-school: url(/aero-v1/sc/h/9ufjgh226ft1cnbejutpwq15g);
  --entity-background-service: url(/aero-v1/sc/h/4iujhggnxexx9c0qvg1fvth9p);
  --entity-ghost-company-accent-1: url(/aero-v1/sc/h/9pwk6mczipq7hj2xkdza1xz89);
  --entity-ghost-company-accent-4: url(/aero-v1/sc/h/aajlclc14rr2scznz5qm2rj9u);
  --entity-ghost-event-accent-4: url(/aero-v1/sc/h/1zv2kdrh9aknn1aeeoiyu9xjd);
  --entity-ghost-group-accent-4: url(/aero-v1/sc/h/5v7kdqzhyyiogppftp4sj6sa0);
  --entity-ghost-hashtag-accent-4: url(/aero-v1/sc/h/3k1pakppc0nte3oi73ssc9g36);
  --entity-ghost-person-accent-4: url(/aero-v1/sc/h/1c5u578iilxfi4m4dvc4q810q);
  --entity-ghost-product-accent-4: url(/aero-v1/sc/h/21koisx415v3d520ivemgq4gl);
  --entity-ghost-publication-accent-4: url(/aero-v1/sc/h/6xjsdd2ltc6idxa5vatv48l9t);
  --entity-ghost-school-accent-4: url(/aero-v1/sc/h/8zzzkhxduv0r11cuxbs48pg03);
  --entity-ghost-service-accent-4: url(/aero-v1/sc/h/6puxblwmhnodu6fjircz4dn4h);
  --illustration-microspot-hashtag-small: url(/aero-v1/sc/h/7ejz9tq5ih0aqk5n7o5fh4s4i);
  --illustration-microspot-hashtag-large: url(/aero-v1/sc/h/dudleh13o5nn2uyi65kaanu3a);
  --illustration-microspot-lightbulb-small: url(/aero-v1/sc/h/e9rg3hopw217xdl7ttpfe4n0h);
  --illustration-microspot-lightbulb-large: url(/aero-v1/sc/h/9bg1fjgy8dxc8r2amgr84razu);
  --illustration-microspot-document-small: url(/aero-v1/sc/h/e8pln9y7iwbg43fvpt2txv4bo);
  --illustration-microspot-document-large: url(/aero-v1/sc/h/eoc15amc0655v05wpqt4e1uo2);
  --illustration-microspot-document-report-small: url(/aero-v1/sc/h/7ef0vb5sdpu2k272yzyslvglw);
  --illustration-microspot-document-report-large: url(/aero-v1/sc/h/y6arcqx4howzfovu9h8j5rqf);
  --illustration-microspot-document-comment-small: url(/aero-v1/sc/h/8dmlga3la3ygqx6l5lwdluv2r);
  --illustration-microspot-document-comment-large: url(/aero-v1/sc/h/9um2v5eapgrhksz97ye2hddxw);
  --illustration-microspot-document-folder-small: url(/aero-v1/sc/h/10f0z1iipiocksc0dcsjvmzu2);
  --illustration-microspot-document-folder-large: url(/aero-v1/sc/h/eg6thjg3ylpjc78l2c8aek9hz);
  --illustration-microspot-industry-small: url(/aero-v1/sc/h/2eqhs5s2227xlfo0ef57a65gz);
  --illustration-microspot-industry-large: url(/aero-v1/sc/h/dbog2z2tz78iudo1tal77aoue);
  --illustration-microspot-search-small: url(/aero-v1/sc/h/mt1w2flx0k71hccryykgc380);
  --illustration-microspot-search-large: url(/aero-v1/sc/h/ebfndg6cj8v96c34j90he7a8n);
  --illustration-microspot-messages-small: url(/aero-v1/sc/h/4xgz1lodolnobqbdwahc5lcok);
  --illustration-microspot-messages-large: url(/aero-v1/sc/h/9be6yapu60eewxr7yyjoz7gcg);
  --illustration-microspot-folder-small: url(/aero-v1/sc/h/cexonatmgw0023ih8eiepu5dc);
  --illustration-microspot-notebook-large: url(/aero-v1/sc/h/ejg1wyz810puid7jjzdayxkuz);
  --illustration-microspot-signal-success-small: url(/aero-v1/sc/h/eq5upsoyhik1xp7wxey4vxx99);
  --illustration-microspot-signal-success-large: url(/aero-v1/sc/h/6k4hbk2lzws8uhnc9yjchhzdq);
  --illustration-microspot-signal-caution-small: url(/aero-v1/sc/h/eyaewtc1hlhyhnoc15qlxj8oz);
  --illustration-microspot-signal-caution-large: url(/aero-v1/sc/h/dsgrrynbfmlyzxdj2olh71uzi);
  --illustration-microspot-signal-error-small: url(/aero-v1/sc/h/3ezp0azfj3frbhbvjm410zg3o);
  --illustration-microspot-signal-error-large: url(/aero-v1/sc/h/5p6xr5jd1gq5lprg8py94rcqc);
  --illustration-microspot-company-small: url(/aero-v1/sc/h/8j7g1qg4ygqnysr4hplvebpx7);
  --illustration-microspot-company-large: url(/aero-v1/sc/h/awchc0rh1msj8zy3w7mwdrlvg);
  --illustration-microspot-camera-small: url(/aero-v1/sc/h/3h0vrtch1zepjr4p54aja8i9x);
  --illustration-microspot-camera-large: url(/aero-v1/sc/h/e9nby9wq8ivibcq50g0xohkx6);
  --illustration-microspot-globe-small: url(/aero-v1/sc/h/7o1j81vgoptxe97tbdydvvgd4);
  --illustration-microspot-globe-large: url(/aero-v1/sc/h/3nasbr3sfph9nk8vf9z7hhyyl);
  --illustration-microspot-magnet-small: url(/aero-v1/sc/h/5jgwzc0w6rb4cenqdap5jau21);
  --illustration-microspot-magnet-large: url(/aero-v1/sc/h/48i3p8rhwfua3rkfsevkkn7e6);
  --illustration-microspot-rocket-small: url(/aero-v1/sc/h/8v6vj4ynjtrf4p8gqybbtdt1e);
  --illustration-microspot-rocket-large: url(/aero-v1/sc/h/7izadu8b2iscoyubl1fv0f2rr);
  --illustration-microspot-trophy-small: url(/aero-v1/sc/h/64fnhrjqilkkiipbdmtq6cysv);
  --illustration-microspot-trophy-large: url(/aero-v1/sc/h/qfqsvknd3eqkbctcr6ind2it);
  --illustration-microspot-location-marker-small: url(/aero-v1/sc/h/7lphf50k5fz0ryidvum0k4ej1);
  --illustration-microspot-location-marker-large: url(/aero-v1/sc/h/61b8abmtp6ykr7dx9urt5djit);
  --illustration-microspot-salary-small: url(/aero-v1/sc/h/6z0jkwl7jtxo832agimeu3rzu);
  --illustration-microspot-salary-large: url(/aero-v1/sc/h/aqy8l20l3w5ew9ir3tca68hss);
  --illustration-microspot-pencil-ruler-small: url(/aero-v1/sc/h/dqusxrvz5xy0ffkawdzpcng0e);
  --illustration-microspot-pencil-ruler-large: url(/aero-v1/sc/h/bagy21yuohuw9upte0iyjkwnf);
  --illustration-microspot-megaphone-small: url(/aero-v1/sc/h/c1o7l42lkcj5pkt5zsh0qfg3p);
  --illustration-microspot-megaphone-large: url(/aero-v1/sc/h/thodlizq3n5cnwncfr913800);
  --illustration-microspot-school-small: url(/aero-v1/sc/h/5c9e0v28ilvp9ocpnqbfm7ll2);
  --illustration-microspot-school-large: url(/aero-v1/sc/h/e28lwgugizrkiw19t33qcdw5n);
  --illustration-microspot-video-small: url(/aero-v1/sc/h/du2j1l9egswicx210ns4cls0n);
  --illustration-microspot-video-large: url(/aero-v1/sc/h/f33a4mwlx1kto0k1ocuxdi7x3);
  --illustration-microspot-video-course-small: url(/aero-v1/sc/h/yroopzlq3zyu06lwnn3mlnne);
  --illustration-microspot-video-course-large: url(/aero-v1/sc/h/be0qvs4zumessk8zui24p4ol6);
  --illustration-microspot-dashboard-small: url(/aero-v1/sc/h/2nozouqfl4dxqy8iv6mergx0v);
  --illustration-microspot-dashboard-large: url(/aero-v1/sc/h/iv9zspfl6eqxv15ovfn2t358);
  --illustration-microspot-briefcase-jobs-small: url(/aero-v1/sc/h/7kdt0x9c7x5fpi05dgp7bpj1h);
  --illustration-microspot-briefcase-jobs-large: url(/aero-v1/sc/h/453fxzefqctfzqpp1whfuqmes);
  --illustration-microspot-mail-small: url(/aero-v1/sc/h/9wstsyhok0eztdb17fnl7id27);
  --illustration-microspot-mail-large: url(/aero-v1/sc/h/2efz9zl9evxhi93a348c0miu6);
  --illustration-microspot-mail-open-small: url(/aero-v1/sc/h/by25qalc5r0mj0xgtyvct77mm);
  --illustration-microspot-mail-open-large: url(/aero-v1/sc/h/9skgt60lcdy5cpesypn3dk0jo);
  --illustration-microspot-article-small: url(/aero-v1/sc/h/ob1kf016vuxdwngitvgyd4qo);
  --illustration-microspot-article-large: url(/aero-v1/sc/h/6x5fknk8aw01lsn6othvh3x6);
  --illustration-microspot-article-stack-small: url(/aero-v1/sc/h/eh9l4y2y9egq255icdj73ap53);
  --illustration-microspot-article-stack-large: url(/aero-v1/sc/h/f11v1qjrri2wv7j3p61nisjwy);
  --illustration-microspot-award-small: url(/aero-v1/sc/h/bsk70m6veu0ebq46me6wu9irc);
  --illustration-microspot-award-large: url(/aero-v1/sc/h/fbb14fisovfwyywab84807dv);
  --illustration-microspot-calendar-small: url(/aero-v1/sc/h/ezxn6qry476i27vd1gmg4zu13);
  --illustration-microspot-calendar-large: url(/aero-v1/sc/h/8bllydfsob2rj0bb6tjapbtwc);
  --illustration-microspot-compass-small: url(/aero-v1/sc/h/8qiomz142bw4aog6vudglq8rq);
  --illustration-microspot-compass-large: url(/aero-v1/sc/h/6ket5ufv5f5yqa01ty9w8yopz);
  --illustration-microspot-glasses-small: url(/aero-v1/sc/h/25wf7qj61f3qw2at8ruktsoe5);
  --illustration-microspot-glasses-large: url(/aero-v1/sc/h/395sxe7s63tjcv9nrqtmh832c);
  --illustration-microspot-gift-small: url(/aero-v1/sc/h/6z1ib58raepv1en7l3gq8fdjq);
  --illustration-microspot-gift-large: url(/aero-v1/sc/h/35omcvhr015yq1izs08suq7n4);
  --illustration-microspot-id-badge-small: url(/aero-v1/sc/h/74yh6g7i047cvp9us08bq9zq9);
  --illustration-microspot-id-badge-large: url(/aero-v1/sc/h/dvseklwrqghkt6ztuw2ju21bt);
  --illustration-microspot-id-badge-verified-small: url(/aero-v1/sc/h/cyi0hybvoq7z0bho66wnhenyx);
  --illustration-microspot-id-badge-verified-large: url(/aero-v1/sc/h/qztdhfs2x6nhixoflniq7xyw);
  --illustration-microspot-image-small: url(/aero-v1/sc/h/2jgp12jkw69qzxpu3r0rvbw01);
  --illustration-microspot-image-large: url(/aero-v1/sc/h/cjvkdn7ksnohjev0ubt69ihl);
  --illustration-microspot-image-stack-small: url(/aero-v1/sc/h/bwnxgpwtmrrnt8q7edbfyyz73);
  --illustration-microspot-image-stack-large: url(/aero-v1/sc/h/7dlzkmhb2dckvymvqoyuvwwri);
  --illustration-microspot-dartboard-small: url(/aero-v1/sc/h/blxmpdkilc2ew7i6rzywpp6ix);
  --illustration-microspot-dartboard-large: url(/aero-v1/sc/h/49v9h35mq49shqan9ly966fk0);
  --illustration-microspot-shield-small: url(/aero-v1/sc/h/1cwlostwxtkvwljfkxaytmqjq);
  --illustration-microspot-shield-large: url(/aero-v1/sc/h/8dx5fjtegswqxm3yhouuqxlfv);
  --illustration-microspot-slides-stack-small: url(/aero-v1/sc/h/cnpfrl0ovcq08l5x684cwbegg);
  --illustration-microspot-slides-stack-large: url(/aero-v1/sc/h/46gpniex8043a3j9c0rvl4goa);
  --illustration-microspot-unlocked-small: url(/aero-v1/sc/h/boe5l15yh3n4z8ift2aqsn02u);
  --illustration-microspot-unlocked-large: url(/aero-v1/sc/h/8mw55rgt3lv9efjq25zldedi2);
  --illustration-microspot-notepad-small: url(/aero-v1/sc/h/ae7rcl1e4k3763p3girmgon60);
  --illustration-microspot-notepad-large: url(/aero-v1/sc/h/uxrni9bban47a616u5r9wles);
  --illustration-microspot-address-book-small: url(/aero-v1/sc/h/2gesja6oaiut9092hlcf9folq);
  --illustration-microspot-address-book-large: url(/aero-v1/sc/h/d8ozdadxr86jd8lzqryw0ed0a);
  --illustration-microspot-patent-small: url(/aero-v1/sc/h/9vztihtsda1yp0ymmky7vh76);
  --illustration-microspot-patent-large: url(/aero-v1/sc/h/e1ipnnv67bjaflo7cfnk3fex2);
  --illustration-microspot-flowers-small: url(/aero-v1/sc/h/cai1hcdk4996rg1eb4ibe9v63);
  --illustration-microspot-flowers-large: url(/aero-v1/sc/h/1f6av72ez8ppbk5t7bv0phg2s);
  --illustration-microspot-locked-small: url(/aero-v1/sc/h/i93f52dd53ubd4bxuojkwdal);
  --illustration-microspot-locked-large: url(/aero-v1/sc/h/2y9nqxqwwensts5chxdtbbryl);
  --illustration-microspot-phone-small: url(/aero-v1/sc/h/3iswmjqb4cgrcjrwun2yy1xve);
  --illustration-microspot-phone-large: url(/aero-v1/sc/h/3h2dwz26xcial9r4matf619qh);
  --illustration-microspot-toolbox-small: url(/aero-v1/sc/h/1jsj36kpizr74p7cg1nluxao9);
  --illustration-microspot-toolbox-large: url(/aero-v1/sc/h/dtsd51ai7tql6mtsazq4s1x8x);
  --illustration-microspot-certificate-small: url(/aero-v1/sc/h/cbkh7flqwu3c4op5s4evgbce6);
  --illustration-microspot-certificate-large: url(/aero-v1/sc/h/aeeyejibnqlccu5ax3s3dr1wk);
  --illustration-microspot-birthday-small: url(/aero-v1/sc/h/998lfczwj3ve57ye3ehucwavx);
  --illustration-microspot-birthday-large: url(/aero-v1/sc/h/af3v61b9m3c8naty2py4wm77r);
  --illustration-microspot-binders-small: url(/aero-v1/sc/h/194rztseb7jqvnc8cpnx4r6zo);
  --illustration-microspot-binders-large: url(/aero-v1/sc/h/bs0yhoi6n0p0pjorxeodj5d3w);
  --illustration-microspot-ui-feed-profile-small: url(/aero-v1/sc/h/e3wsczd1kagrx4moj5r5cbijl);
  --illustration-microspot-ui-feed-profile-large: url(/aero-v1/sc/h/6z802sdc4gk9gjfpicuymg00f);
  --illustration-microspot-ui-chart-small: url(/aero-v1/sc/h/1u3pos2bx4lyf62u2asd2zpej);
  --illustration-microspot-ui-chart-large: url(/aero-v1/sc/h/991lxm66zvskb4b0oqiv6xv5g);
  --illustration-microspot-ui-chart-trend-small: url(/aero-v1/sc/h/9yjwa7nw6j01bz797k6mf1sb3);
  --illustration-microspot-ui-chart-trend-large: url(/aero-v1/sc/h/2cl0y2m1d5ir3utzo8dma3o2p);
  --illustration-microspot-ui-dashboard-small: url(/aero-v1/sc/h/2nozouqfl4dxqy8iv6mergx0v);
  --illustration-microspot-ui-dashboard-large: url(/aero-v1/sc/h/iv9zspfl6eqxv15ovfn2t358);
  --illustration-microspot-bell-small: url(/aero-v1/sc/h/4r72pa8enjd0dwsi4brylzj2);
  --illustration-microspot-bell-large: url(/aero-v1/sc/h/c9r9ot9vo5rylto280glbfb0b);
  --illustration-microspot-handshake-heart-small: url(/aero-v1/sc/h/e521kw126sk25n4dtb57jcqd8);
  --illustration-microspot-verified-small: url(/aero-v1/sc/h/6dknaommpbmxekqiirfjlvp4e);
  --illustration-microspot-video-meeting-small: url(/aero-v1/sc/h/8rzyvtenjsxxofstgop1uokjb);
  --illustration-microspot-magic-wand-small: url(/aero-v1/sc/h/9rsya9k96i0nf79r3wx4ehb45);
  --illustration-microspot-magic-wand-large: url(/aero-v1/sc/h/7jergpqjhadp1m12r04cthvpt);
  --illustration-microspot-sparkle-small: url(/aero-v1/sc/h/eaugfgrkhuajjf5mdes476078);
  --illustration-microspot-sparkle-large: url(/aero-v1/sc/h/4t1bo59njsc1j7h03a29yj257);
  --illustration-spot-main-wfh-small: url(/aero-v1/sc/h/832it0s16hwg6jejkfm29fx3m);
  --illustration-spot-main-wfh-large: url(/aero-v1/sc/h/at79od4vx7zjbe5v8qzdj0m4f);
  --illustration-spot-main-wfh-video-small: url(/aero-v1/sc/h/7k5j65hp0zfnfg8f71vv9himy);
  --illustration-spot-main-wfh-video-large: url(/aero-v1/sc/h/3ylugssxayjc885putv1kl9fg);
  --illustration-spot-empty-leaving-small: url(/aero-v1/sc/h/3ggbqks4oh7irvgrgu4lvvudi);
  --illustration-spot-empty-leaving-large: url(/aero-v1/sc/h/94uwnfdql5f1il4c6bowonpd2);
  --illustration-spot-error-construction-small: url(/aero-v1/sc/h/bpw4x301sj2509tdlfz1oojut);
  --illustration-spot-error-construction-large: url(/aero-v1/sc/h/3hyml9do3cyvs6ehj31cmygd6);
  --illustration-spot-main-broadcast-small: url(/aero-v1/sc/h/73hg693mowoj4e23phyhy7zyc);
  --illustration-spot-main-broadcast-large: url(/aero-v1/sc/h/57r2jki3shbkyetajobq6bqcx);
  --illustration-spot-main-paramedic-small: url(/aero-v1/sc/h/da4sh8ju0ju0wi8n4rqa01o93);
  --illustration-spot-main-paramedic-large: url(/aero-v1/sc/h/3wxag1kx84go3ljsfr8kbd8n3);
  --illustration-spot-main-coworkers-small: url(/aero-v1/sc/h/axgduq35g9cjimgrc6383gx61);
  --illustration-spot-main-coworkers-large: url(/aero-v1/sc/h/acq3qqdo5efui5ruti3za15s1);
  --illustration-spot-main-coworkers-2-small: url(/aero-v1/sc/h/rn9obfqh70pb7776ajlqlb8);
  --illustration-spot-main-coworkers-2-large: url(/aero-v1/sc/h/9j2yx29beni5re5hcsu7hd58y);
  --illustration-spot-main-coworkers-3-small: url(/aero-v1/sc/h/1g0i2391xf7f5nchlw6k672v5);
  --illustration-spot-main-coworkers-3-large: url(/aero-v1/sc/h/19uchd64y05us1qm28anl8gma);
  --illustration-spot-main-coworkers-4-small: url(/aero-v1/sc/h/4jvhod4eq7jffh8i9km2gz9w0);
  --illustration-spot-main-coworkers-4-large: url(/aero-v1/sc/h/5idncmqew71ebp4jsarv3oiq9);
  --illustration-spot-main-coworkers-5-small: url(/aero-v1/sc/h/tx3x7xynlkzfxwrz7dd9znrr);
  --illustration-spot-main-coworkers-5-large: url(/aero-v1/sc/h/e6d8pqfft0d4qnql1eygjkhug);
  --illustration-spot-main-presentation-small: url(/aero-v1/sc/h/6vau5c5nq24iu4uh5g70yc8y1);
  --illustration-spot-main-presentation-large: url(/aero-v1/sc/h/b64enp7ybpnyltqz0i3k4sjk0);
  --illustration-spot-empty-no-mail-small: url(/aero-v1/sc/h/a7ifaypxl4xqge2siol4oz8jf);
  --illustration-spot-empty-no-mail-large: url(/aero-v1/sc/h/eeaz4pxo41dwponbz8xm17a6f);
  --illustration-spot-error-crossing-small: url(/aero-v1/sc/h/69gnpmrt6ip05vc2ltpfhx663);
  --illustration-spot-error-crossing-large: url(/aero-v1/sc/h/8i98g2soac4ux8gzeedm8uxod);
  --illustration-spot-main-collaboration-small: url(/aero-v1/sc/h/4bet5qswki7f8kp8jfmemsa7j);
  --illustration-spot-main-collaboration-large: url(/aero-v1/sc/h/54rbceijpjz41pl79m9tbrw0k);
  --illustration-spot-main-relax-small: url(/aero-v1/sc/h/8svsx2hvtzdlwqedt21iaa17e);
  --illustration-spot-main-relax-large: url(/aero-v1/sc/h/bc4ch6770wc6clh8rhqfyemjo);
  --illustration-spot-empty-room-small: url(/aero-v1/sc/h/8ho1mw83gfmgiq4yr8f8wkjmh);
  --illustration-spot-empty-room-large: url(/aero-v1/sc/h/60v3z2w447yzbb0noj907w634);
  --illustration-spot-error-fail-small: url(/aero-v1/sc/h/8kbilx26winmlrx3vpmj0pvkz);
  --illustration-spot-error-fail-large: url(/aero-v1/sc/h/1o8878ioi0n0oejl0qs2wm78v);
  --illustration-spot-main-commute-small: url(/aero-v1/sc/h/8neleqqf8suqptjnbfrmww1v3);
  --illustration-spot-main-commute-large: url(/aero-v1/sc/h/bgjzeyr8zfdaxq7lihevrd652);
  --illustration-spot-main-call-center-small: url(/aero-v1/sc/h/acppnaggoyz0zo0qojnplhssv);
  --illustration-spot-main-teacher-small: url(/aero-v1/sc/h/4oww9sbhp9wce8tw1w1uxfgcc);
  --illustration-spot-main-diplomas-small: url(/aero-v1/sc/h/eqc2xr5jaczq0egbo976eu9h);
  --illustration-spot-success-individual-small: url(/aero-v1/sc/h/2bzqs373a54t0txoddnaif5yb);
  --illustration-spot-success-individual-large: url(/aero-v1/sc/h/b1bzd30tu2eoxlexybcabfd5q);
  --illustration-spot-success-individual-2-small: url(/aero-v1/sc/h/88zo2hoeuh39huiif78nybdgz);
  --illustration-spot-success-individual-2-large: url(/aero-v1/sc/h/e4otsuam9qjp5zdzu6gow66wf);
  --illustration-spot-empty-waiting-small: url(/aero-v1/sc/h/awfqc67t42p28qr5oetysabdg);
  --illustration-spot-empty-waiting-large: url(/aero-v1/sc/h/bjy51nb1zfbdz51kyu3wo1lis);
  --illustration-spot-error-pit-crew-small: url(/aero-v1/sc/h/6x6j7pqndbcgmleqrmp546vow);
  --illustration-spot-error-pit-crew-large: url(/aero-v1/sc/h/8m9p3sk7tsj5u05ssjcyobaay);
  --illustration-spot-main-conversation-small: url(/aero-v1/sc/h/1o9e66lkp405mld4h1iwmmkkr);
  --illustration-spot-main-conversation-large: url(/aero-v1/sc/h/8wkc25ga18trec0wmc1f3x2sf);
  --illustration-spot-error-connection-small: url(/aero-v1/sc/h/eeonurm6djfuhvlyhkx4a2qz2);
  --illustration-spot-error-connection-large: url(/aero-v1/sc/h/3qwd8xp56jeql1bdr2h136i16);
  --illustration-spot-error-server-small: url(/aero-v1/sc/h/35g21lbobq614u53uejo9treo);
  --illustration-spot-error-server-large: url(/aero-v1/sc/h/3p7p6a7q99wymlzghijta8d3p);
  --illustration-spot-main-person-small: url(/aero-v1/sc/h/6cgv7suj4518uqu9zolh4dmom);
  --illustration-spot-main-person-large: url(/aero-v1/sc/h/5lhfihank7tk7v3ij0ideeex9);
  --illustration-spot-main-person-2-small: url(/aero-v1/sc/h/9750rb8sf2qxwlapv61wmppns);
  --illustration-spot-main-person-2-large: url(/aero-v1/sc/h/69rgy8n2tij96s455ydn2zqca);
  --illustration-spot-main-person-3-small: url(/aero-v1/sc/h/4thfp6qqvusb5gdvq3exzgkrz);
  --illustration-spot-main-person-3-large: url(/aero-v1/sc/h/ebahpd6dzt7e6vu515mpmskpt);
  --illustration-spot-success-team-small: url(/aero-v1/sc/h/dtt2wfjcwbg783erhf9s5qgwx);
  --illustration-spot-success-team-large: url(/aero-v1/sc/h/a2pyfi1l1b4ztjwd0zbbtrmfw);
  --illustration-spot-main-bike-shop-small: url(/aero-v1/sc/h/ev38oduv7dzg4bof7b3w3x1gj);
  --illustration-spot-main-manufacturing-mask-small: url(/aero-v1/sc/h/79qanfsaf7qkc7dmtt5iynk2o);
  --reaction-empathy-consumption-ring-small: url(/aero-v1/sc/h/7y5llkdpxktvffo2q2d1ni7s9);
  --reaction-empathy-consumption-ring-medium: url(/aero-v1/sc/h/ei7aklvzt7dr0igafj01rotus);
  --reaction-interest-consumption-ring-small: url(/aero-v1/sc/h/8dt8s1behx6ih6nda1uez7md1);
  --reaction-interest-consumption-ring-medium: url(/aero-v1/sc/h/25e49bdtvgm3b4m1hvchlc8vi);
  --reaction-like-consumption-ring-small: url(/aero-v1/sc/h/4c1dzspg0yqfip47a9y26tnx8);
  --reaction-like-consumption-ring-medium: url(/aero-v1/sc/h/3lqizj7iznogmix310hu6yk3m);
  --reaction-maybe-consumption-ring-small: url(/aero-v1/sc/h/4ve1ypy9tv5k21myzkcbu9p3y);
  --reaction-maybe-consumption-ring-medium: url(/aero-v1/sc/h/3395odw21t3476sfd95p4q4d6);
  --reaction-praise-consumption-ring-small: url(/aero-v1/sc/h/72p0gef8k748mc8rq861vx9bh);
  --reaction-praise-consumption-ring-medium: url(/aero-v1/sc/h/ueh8hipnjjxmsi5ap60s7887);
  --reaction-support-consumption-ring-small: url(/aero-v1/sc/h/95fexuy2ghirrrdv9hkn489no);
  --reaction-support-consumption-ring-medium: url(/aero-v1/sc/h/89wkqfdy9c24kwmjf62krf83d);
  --reaction-entertainment-consumption-ring-small: url(/aero-v1/sc/h/6xqfs7dldbqd4f5ckwtr8lugf);
  --reaction-entertainment-consumption-ring-medium: url(/aero-v1/sc/h/7s58xoin9dywn2ksjjvoio0o);
  --reaction-empathy-consumption-small: url(/aero-v1/sc/h/cpho5fghnpme8epox8rdcds22);
  --reaction-empathy-consumption-medium: url(/aero-v1/sc/h/f58e354mjsjpdd67eq51cuh49);
  --reaction-empathy-consumption-large: url(/aero-v1/sc/h/6f5qp9agugsqw1swegjxj86me);
  --reaction-interest-consumption-small: url(/aero-v1/sc/h/lhxmwiwoag9qepsh4nc28zus);
  --reaction-interest-consumption-medium: url(/aero-v1/sc/h/6gz02r6oxefigck4ye888wosd);
  --reaction-interest-consumption-large: url(/aero-v1/sc/h/9ry9ng73p660hsehml9i440b2);
  --reaction-like-consumption-small: url(/aero-v1/sc/h/8ekq8gho1ruaf8i7f86vd1ftt);
  --reaction-like-consumption-medium: url(/aero-v1/sc/h/2uxqgankkcxm505qn812vqyss);
  --reaction-like-consumption-large: url(/aero-v1/sc/h/8fz8rainn3wh49ad6ef9gotj1);
  --reaction-maybe-consumption-small: url(/aero-v1/sc/h/4mv33903v0o9ikpwfuy2ftcc6);
  --reaction-maybe-consumption-medium: url(/aero-v1/sc/h/4rw9bhaoyh1622ce65fshynuw);
  --reaction-maybe-consumption-large: url(/aero-v1/sc/h/2724p6g37kw0lylnp9ikstice);
  --reaction-praise-consumption-small: url(/aero-v1/sc/h/b1dl5jk88euc7e9ri50xy5qo8);
  --reaction-praise-consumption-medium: url(/aero-v1/sc/h/cm8d2ytayynyhw5ieaare0tl3);
  --reaction-praise-consumption-large: url(/aero-v1/sc/h/1mbfgcprj3z93pjntukfqbr8y);
  --reaction-support-consumption-small: url(/aero-v1/sc/h/3wqhxqtk2l554o70ur3kessf1);
  --reaction-support-consumption-medium: url(/aero-v1/sc/h/e1vzxs43e7ryd6jfvu7naocd2);
  --reaction-support-consumption-large: url(/aero-v1/sc/h/cv29x2jo14dbflduuli6de6bf);
  --reaction-entertainment-consumption-small: url(/aero-v1/sc/h/41j9d0423ck1snej32brbuuwg);
  --reaction-entertainment-consumption-medium: url(/aero-v1/sc/h/6namow3mrvcg3dyuevtpfwjm0);
  --reaction-entertainment-consumption-large: url(/aero-v1/sc/h/qye2jwjc8dw20nuv6diudrsi);
  --reaction-empathy-creation-medium: url(/aero-v1/sc/h/959e0f6ksc4uolqnht9kp911s);
  --reaction-empathy-creation-large: url(/aero-v1/sc/h/asmf650x603bcwgefb4heo6bm);
  --reaction-empathy-creation-extra-large: url(/aero-v1/sc/h/9oojx2j6mm04oubp0lwu09k9j);
  --reaction-interest-creation-medium: url(/aero-v1/sc/h/60nfg4p6apn8s53zmsoc2qxrb);
  --reaction-interest-creation-large: url(/aero-v1/sc/h/39axkb4qe8q95ieljrhqhkxvl);
  --reaction-interest-creation-extra-large: url(/aero-v1/sc/h/309j5ty10wehgnhnu8d5ekgvb);
  --reaction-like-creation-medium: url(/aero-v1/sc/h/5zhd32fqi5pxwzsz78iui643e);
  --reaction-like-creation-large: url(/aero-v1/sc/h/f4ly07ldn7194ciimghrumv3l);
  --reaction-like-creation-extra-large: url(/aero-v1/sc/h/14gu29noxwssk9frd8z3dl7uk);
  --reaction-maybe-creation-medium: url(/aero-v1/sc/h/9v68n3giwr4el6ep9ada2fqcw);
  --reaction-maybe-creation-large: url(/aero-v1/sc/h/1z80ze8ler6arc76a8rxsgqbh);
  --reaction-maybe-creation-extra-large: url(/aero-v1/sc/h/esguzme5vk2dzoobigz5eli7l);
  --reaction-praise-creation-medium: url(/aero-v1/sc/h/4vr7dcac5wuy4nwsxxx8tf9e7);
  --reaction-praise-creation-large: url(/aero-v1/sc/h/3c4dl0u9dy2zjlon6tf5jxlqo);
  --reaction-praise-creation-extra-large: url(/aero-v1/sc/h/33mzzxfnhw0z485ih2rf9y8jq);
  --reaction-support-creation-medium: url(/aero-v1/sc/h/dmu7wat3wrn1xm59wg46ucrb1);
  --reaction-support-creation-large: url(/aero-v1/sc/h/9whrgl1hq2kfxjqr9gqwoqrdi);
  --reaction-support-creation-extra-large: url(/aero-v1/sc/h/2trdv572mgv5pi5h9lfszlax7);
  --checkbox-checked-background-position: 0 -2.4rem;
  --checkbox-checked-disabled-background-position: 0 -36.6rem;
  --select-chevron-background-position: top -31.1rem right .7rem;
  --select-chevron-background-position-rtl: top -31.1rem left .7rem;
  --acttachment-icon-filter: brightness(1);
  --image-filter: invert(0%);
  --delay-xxfast: 52ms;
  --delay-xfast: 84ms;
  --delay-fast: 132ms;
  --delay-moderate: 216ms;
  --delay-slow: 336ms;
  --delay-xslow: 560ms;
  --delay-xxslow: 916ms;
  --delay-xxxslow: 1486ms;
  --duration-xxfast: 52ms;
  --duration-xfast: 84ms;
  --duration-fast: 132ms;
  --duration-moderate: 216ms;
  --duration-slow: 336ms;
  --duration-xslow: 560ms;
  --duration-xxslow: 916ms;
  --duration-xxxslow: 1486ms;
  --ease-standard: cubic-bezier(.34,0,.21,1);
  --ease-emphasized: cubic-bezier(.13,0,.08,1);
  --ease-decelerate: cubic-bezier(0,0,0.21,1);
  --ease-accelerate: cubic-bezier(0.55,0,1,1);
  --ease-outBack: cubic-bezier(0,0,0,2);
  --motion-transition-slide-in: var(--duration-fast) var(--ease-decelerate);
  --motion-transition-slide-out: var(--duration-fast) var(--ease-accelerate);
  --motion-transition-appear: var(--duration-xxfast) var(--ease-standard);
  --motion-transition-hide: var(--duration-xxfast) var(--ease-standard);
  --motion-transition-hover-in: var(--duration-xfast) var(--ease-standard);
  --motion-transition-hover-out: var(--duration-xfast) var(--ease-standard);
  --motion-transition-hover-in-raised: var(--duration-fast) var(--ease-standard);
  --motion-transition-hover-out-raised: var(--duration-fast) var(--ease-standard);
  --motion-transition-expanding: var(--duration-xxfast) var(--ease-standard);
  --motion-transition-hover-shrinking: var(--duration-xxfast) var(--ease-standard);
  --motion-transition-zoom-in: var(--duration-fast) var(--ease-decelerate);
  --motion-transition-hover-zoom-out: var(--duration-fast) var(--ease-accelerate);
  --corner-radius-small: 0.4rem;
  --corner-radius-medium: 0.8rem;
  --corner-radius-large: 1.6rem;
  --corner-radius-xlarge: 2.4rem;
  --corner-radius-full: 50%;
  --free: var(--corner-radius-medium);
  --attached-top: 0 0 var(--corner-radius-medium) var(--corner-radius-medium);
  --attached-right: var(--corner-radius-medium) 0 0 var(--corner-radius-medium);
  --attached-bottom: var(--corner-radius-medium) var(--corner-radius-medium) 0 0;
  --attached-left: 0 var(--corner-radius-medium) var(--corner-radius-medium) 0;
  --point-top-left: 0 var(--corner-radius-medium) var(--corner-radius-medium) var(--corner-radius-medium);
  --point-top-right: var(--corner-radius-medium) 0 var(--corner-radius-medium) var(--corner-radius-medium);
  --point-bottom-right: var(--corner-radius-medium) var(--corner-radius-medium) 0 var(--corner-radius-medium);
  --point-bottom-left: var(--corner-radius-medium) var(--corner-radius-medium) var(--corner-radius-medium) 0;
  --spacing-half-x: 0.4rem;
  --spacing-one-x: 0.8rem;
  --spacing-one-and-a-half-x: 1.2rem;
  --spacing-two-x: 1.6rem;
  --spacing-three-x: 2.4rem;
  --spacing-four-x: 3.2rem;
  --spacing-six-x: 4.8rem;
  --spacing-eight-x: 6.4rem;
  --spacing-twelve-x: 9.6rem;
  --spacing-sixteen-x: 12.8rem;
  --spacing-twenty-four-x: 19.2rem;
  --spacing-thirty-two-x: 25.6rem;
  --font-size-xsmall: 1.2rem;
  --font-size-small: 1.4rem;
  --font-size-medium: 1.6rem;
  --font-size-large: 2rem;
  --font-size-xlarge: 2.4rem;
  --font-size-display-small: 2.4rem;
  --font-size-display-medium: 3.2rem;
  --font-size-display-large: 4.8rem;
  --font-size-display-xlarge: 6.4rem;
  --font-weight-regular: 400;
  --font-weight-bold: 600;
  --line-height-default: 1.25;
  --line-height-open: 1.5;
  --paragraph-spacing: 1.2rem;
  --amber-90: var(--amber-100);
  --blue-90: var(--blue-100);
  --camo-90: var(--camo-100);
  --cool-gray-90: var(--cool-gray-100);
  --copper-90: var(--copper-100);
  --green-90: var(--green-100);
  --lavender-90: var(--lavender-100);
  --lime-90: var(--lime-100);
  --mauve-90: var(--mauve-100);
  --pink-90: var(--pink-100);
  --purple-90: var(--purple-100);
  --sage-90: var(--sage-100);
  --smoke-90: var(--smoke-100);
  --system-green-90: var(--system-green-100);
  --system-gray-90: var(--system-gray-100);
  --system-orange-90: var(--system-orange-100);
  --system-red-90: var(--system-red-100);
  --teal-90: var(--teal-100);
  --warm-gray-90: var(--warm-gray-100);
  --warm-red-90: var(--warm-red-100) ;
}

.artdeco-card, .artdeco-table, .artdeco-table--striped {
  border: none !important;
  box-shadow: var(--elevation-lined) !important;
}

@media (-ms-high-contrast: active), (forced-colors: active) {
  .artdeco-card, .artdeco-table, .artdeco-table--striped {
    border: 1px solid transparent !important;
  }
}
.artdeco-card--with-hover:hover, .artdeco-dropdown__content, .artdeco-hoverable-content__shell, .artdeco-modal, .smart-hovercard {
  border: none !important;
  box-shadow: var(--elevation-raised) !important;
}

@media (-ms-high-contrast: active), (forced-colors: active) {
  .artdeco-card--with-hover:hover, .artdeco-dropdown__content, .artdeco-hoverable-content__shell, .artdeco-modal, .smart-hovercard {
    border: 1px solid transparent !important;
  }
}
.artdeco-card {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 3px rgba(0, 0, 0, 0.2);
  transition: box-shadow 83ms;
  background-color: var(--white, #fff);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

@media screen and (-ms-high-contrast: active) {
  .artdeco-card {
    border: 1px solid activeborder;
  }
}
.artdeco-card--with-hover:hover {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: box-shadow 83ms;
  cursor: pointer;
}

@media screen and (-ms-high-contrast: active) {
  .artdeco-card--with-hover:hover {
    border: 1px solid activeborder;
  }
}
.artdeco-card--hidden {
  display: none;
}

.artdeco-card__dismiss {
  position: absolute;
  right: 0;
  top: 0;
}

.artdeco-card__title {
  color: rgba(0, 0, 0, 0.9);
  font-family: var(--artdeco-typography-sans);
  font-weight: var(--artdeco-reset-typography-font-weight-normal);
  font-style: var(--artdeco-reset-typography-font-style-normal);
  font-size: 2rem;
  line-height: 1.4;
}

.artdeco-card__figure {
  height: 0;
  overflow: hidden;
  padding-bottom: 100%;
  position: relative;
  width: 100%;
}

.artdeco-card__figure--4x1 {
  padding-bottom: 25%;
}

.artdeco-card__figure--3x1 {
  padding-bottom: 33.33333%;
}

.artdeco-card__figure--2x1 {
  padding-bottom: 50%;
}

.artdeco-card__figure--3x2 {
  padding-bottom: 66.66667%;
}

.artdeco-card__figure--4x3 {
  padding-bottom: 75%;
}

.artdeco-card__figure--1x1 {
  padding-bottom: 100%;
}

.artdeco-card__figure--16x9 {
  padding-bottom: 56.25%;
}

.artdeco-card__figure--full {
  bottom: 0;
  height: 100%;
  left: 0;
  padding-bottom: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.artdeco-card__image {
  display: block;
  height: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

.artdeco-card__figure--full .artdeco-card__image {
  height: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
}

.artdeco-card__actions {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  display: flex;
}

.artdeco-card__action {
  word-break: break-all;
}

.artdeco-card__action + .artdeco-card__action {
  border-left: 1px solid rgba(0, 0, 0, 0.15);
}

.artdeco-card {
  background-color: var(--color-background) !important;
  border-radius: var(--corner-radius-medium) !important;
}

@media screen and (min-width: 576px) {
  .scaffold-layout--reflow .artdeco-card {
    border-radius: var(--corner-radius-medium) !important;
  }
}
@media (-ms-high-contrast: active), (forced-colors: active) {
  .artdeco-card {
    border: 1px solid transparent !important;
  }
}
.artdeco-card__actions, .artdeco-card__header {
  border-color: var(--color-border-faint) !important;
}

.artdeco-card__title {
  color: var(--color-text) !important;
}

.artdeco-card__actions {
  border-color: var(--color-border-faint) !important;
  border-radius: var(--attached-top);
  overflow: hidden;
}

.artdeco-dropdown {
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  margin: 0;
  padding: 0;
  position: relative;
}

.artdeco-dropdown--disabled {
  cursor: not-allowed;
}

.artdeco-dropdown--disabled-mask {
  opacity: 0.25;
}

.artdeco-dropdown__a11y-text {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px !important;
  overflow: hidden;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

.artdeco-dropdown__trigger-icon {
  vertical-align: middle;
  margin: 0 -2px 0 4px;
}

.artdeco-dropdown__trigger > :first-child:not(.artdeco-button__icon) {
  vertical-align: middle;
}

.artdeco-dropdown__trigger--disabled {
  pointer-events: none;
}

@media (-ms-high-contrast: active), (forced-colors: active) {
  .artdeco-dropdown__trigger-icon {
    color: ButtonText;
  }
}
.artdeco-dropdown__content {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  background-color: var(--white, #fff);
  background-clip: padding-box;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 6px 9px rgba(0, 0, 0, 0.2);
  transition: box-shadow 83ms;
  transition: visibility 0s linear 167ms, opacity 167ms cubic-bezier(0.4, 0, 1, 1) 0s, z-index 0s linear 167ms;
  padding: 4px 0;
  opacity: 0;
  visibility: hidden;
  z-index: -1;
  display: inline-block;
  position: absolute;
  min-width: 168px;
  max-width: 26.4rem;
  max-height: 54.8rem;
  box-sizing: border-box;
  left: 0;
  top: calc(100% + 8px);
}

.artdeco-dropdown__content ul[role=tablist] {
  border-top: 0;
}

@media screen and (-ms-high-contrast: active) {
  .artdeco-dropdown__content {
    border: 1px solid activeborder;
  }
}
.artdeco-dropdown__content dl, .artdeco-dropdown__content ol, .artdeco-dropdown__content ul {
  list-style-type: none;
}

.artdeco-dropdown__content-inner {
  max-height: 54rem;
  overflow: auto;
}

.artdeco-dropdown__content--placement-top {
  top: auto;
  bottom: calc(100% + 8px);
}

.artdeco-dropdown__content--placement-bottom {
  top: calc(100% + 8px);
  bottom: auto;
}

.artdeco-dropdown__content--justification-left {
  left: 0;
  right: auto;
}

.artdeco-dropdown__content--justification-right {
  left: auto;
  right: 0;
}

.artdeco-dropdown__content--is-open {
  transition: visibility 0s linear 25ms, z-index 0s linear 25ms, opacity 334ms cubic-bezier(0, 0, 0.2, 1), 25ms;
  opacity: 1;
  visibility: visible;
  z-index: 999;
}

.artdeco-dropdown__content--has-arrow:after, .artdeco-dropdown__content--has-arrow:before {
  position: absolute;
  border: 0 solid transparent;
  content: "";
  height: 0;
  width: 0;
}

.artdeco-dropdown__content--arrow-left:after, .artdeco-dropdown__content--arrow-left:before {
  left: 24px;
}

.artdeco-dropdown__content--arrow-right:after, .artdeco-dropdown__content--arrow-right:before {
  left: calc(100% - 24px);
}

.artdeco-dropdown__content--placement-top.artdeco-dropdown__content--has-arrow:after {
  border-top: 8px solid var(--white, #fff);
  border-left-width: 8px;
  border-right-width: 8px;
  bottom: -8px;
  margin-left: -9px;
}

.artdeco-dropdown__content--placement-top.artdeco-dropdown__content--has-arrow:before {
  border-top: 9px solid rgba(0, 0, 0, 0.1);
  border-left-width: 9px;
  border-right-width: 9px;
  bottom: -9px;
  margin-left: -10px;
}

.artdeco-dropdown__content--placement-bottom.artdeco-dropdown__content--has-arrow:after {
  border-right-width: 8px;
  border-bottom: 8px solid var(--white, #fff);
  border-left-width: 8px;
  top: -8px;
  margin-left: -9px;
}

.artdeco-dropdown__content--placement-bottom.artdeco-dropdown__content--has-arrow:before {
  border-right-width: 9px;
  border-bottom: 9px solid rgba(0, 0, 0, 0.1);
  border-left-width: 9px;
  top: -9px;
  margin-left: -10px;
}

.artdeco-dropdown__header {
  font-family: var(--artdeco-typography-sans);
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: var(--artdeco-reset-typography-font-weight-bold);
  font-style: var(--artdeco-reset-typography-font-style-normal);
  color: rgba(0, 0, 0, 0.9);
  box-sizing: border-box;
  cursor: default;
  display: block;
  height: auto;
  padding: 8px 16px;
}

.artdeco-dropdown__header:nth-of-type(n+2) {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.artdeco-dropdown__item {
  font-family: var(--artdeco-typography-sans);
  font-size: 1rem;
  line-height: 1.1;
  font-weight: var(--artdeco-reset-typography-font-weight-bold);
  font-style: var(--artdeco-reset-typography-font-style-normal);
  color: rgba(0, 0, 0, 0.6);
  box-sizing: border-box;
  padding: 8px 16px;
}

@media (forced-colors: active), only screen and (-ms-high-contrast: active) {
  .artdeco-dropdown__item.artdeco-dropdown__item--is-link {
    color: linktext;
  }
}
.artdeco-dropdown__item:not(.artdeco-dropdown__item--disabled):focus, .artdeco-dropdown__item:not(.artdeco-dropdown__item--disabled):hover {
  color: rgba(0, 0, 0, 0.75);
  background-color: var(--cool-gray-20, #f3f6f8);
}

.artdeco-dropdown__item:not(.artdeco-dropdown__item--disabled):active {
  color: var(--blue-70, #006097);
  background-color: var(--cool-gray-30, #e1e9ee);
}

.artdeco-dropdown__item:not(.artdeco-dropdown__item--disabled):focus {
  outline-offset: -5px;
}

[theme=pro] .artdeco-dropdown__item:not(.artdeco-dropdown__item--disabled):active {
  color: var(--teal-70, #036475);
  background: rgba(152, 218, 222, 0.45);
}

.artdeco-dropdown__item--disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

@media (forced-colors: active), only screen and (-ms-high-contrast: active) {
  .artdeco-dropdown__item--disabled {
    color: GrayText;
    opacity: 1;
  }
}
.artdeco-dropdown__item--selected {
  color: var(--blue-70, #0073b1);
  border-left: 2px solid var(--blue-70, #0073b1);
}

.artdeco-dropdown__item--selected:focus, .artdeco-dropdown__item--selected:hover {
  color: var(--blue-70, #006097);
  border-color: var(--blue-70, #006097);
}

.artdeco-dropdown__item--selected:active {
  color: var(--blue-80, #004b7c);
  background: rgba(152, 216, 244, 0.45);
  border-color: var(--blue-80, #004b7c);
}

[dir=rtl] .artdeco-dropdown__item--selected {
  border-left: none;
  border-right: 2px solid var(--blue-70, #0073b1);
}

[theme=pro] .artdeco-dropdown__item--selected {
  color: var(--teal-70, #087889);
  border-color: var(--teal-70, #087889);
}

[theme=pro] .artdeco-dropdown__item--selected:focus, [theme=pro] .artdeco-dropdown__item--selected:hover {
  color: var(--teal-70, #036475);
  border-color: var(--teal-70, #036475);
}

[theme=pro] .artdeco-dropdown__item--selected:active {
  color: var(--teal-80, #00505d);
  background: rgba(152, 218, 222, 0.45);
  border-color: var(--teal-80, #00505d);
}

.artdeco-dropdown__content {
  --color-current: var(--color-checked);
  --color-current-hover: var(--color-checked-hover);
  --color-current-active: var(--color-checked-active);
  background-color: var(--color-background) !important;
  border-radius: var(--corner-radius-medium) !important;
}

.artdeco-dropdown__content:after, .artdeco-dropdown__content:before {
  border: none !important;
  content: none !important;
}

.artdeco-dropdown__content--placement-top.artdeco-dropdown__content--justification-left {
  border-radius: var(--point-bottom-left) !important;
}

.artdeco-dropdown__content--placement-top.artdeco-dropdown__content--justification-right, [dir=rtl] .artdeco-dropdown__content--placement-top.artdeco-dropdown__content--justification-left {
  border-radius: var(--point-bottom-right) !important;
}

[dir=rtl] .artdeco-dropdown__content--placement-top.artdeco-dropdown__content--justification-right {
  border-radius: var(--point-bottom-left) !important;
}

.artdeco-dropdown__content--placement-bottom.artdeco-dropdown__content--justification-left {
  border-radius: var(--point-top-left) !important;
}

.artdeco-dropdown__content--placement-bottom.artdeco-dropdown__content--justification-right, [dir=rtl] .artdeco-dropdown__content--placement-bottom.artdeco-dropdown__content--justification-left {
  border-radius: var(--point-top-right) !important;
}

[dir=rtl] .artdeco-dropdown__content--placement-bottom.artdeco-dropdown__content--justification-right {
  border-radius: var(--point-top-left) !important;
}

.artdeco-dropdown__header {
  color: var(--color-text);
}

.artdeco-dropdown__header:nth-of-type(n+2) {
  border-color: var(--color-border-faint);
}

.artdeco-dropdown__item {
  background-color: var(--color-background-transparent);
  color: var(--color-label);
}

@media (forced-colors: active), only screen and (-ms-high-contrast: active) {
  .artdeco-dropdown__item > svg, .artdeco-dropdown__item li-icon > svg {
    forced-color-adjust: auto;
  }
}
.artdeco-dropdown__item:not(.artdeco-dropdown__item--disabled):focus, .artdeco-dropdown__item:not(.artdeco-dropdown__item--disabled):hover {
  color: var(--color-label-hover);
  background-color: var(--color-background-transparent-hover);
}

@media (forced-colors: active), only screen and (-ms-high-contrast: active) {
  .artdeco-dropdown__item:not(.artdeco-dropdown__item--disabled):focus, .artdeco-dropdown__item:not(.artdeco-dropdown__item--disabled):hover {
    -ms-high-contrast-adjust: none;
    forced-color-adjust: none;
    background-color: highlight;
    color: highlightText;
  }
}
.artdeco-dropdown__item:not(.artdeco-dropdown__item--disabled):active {
  color: var(--color-label-active);
  background-color: var(--color-background-transparent-active);
}

.artdeco-dropdown__item--disabled {
  --color-background-disabled: ui-token(color-background-transparent);
  background-color: var(--color-background-disabled);
  color: var(--color-label-disabled);
  opacity: 1;
}

@media (forced-colors: active), only screen and (-ms-high-contrast: active) {
  .artdeco-dropdown__item--disabled {
    color: GrayText;
  }
}
.artdeco-dropdown__item--selected {
  border-color: var(--color-checked);
}

.artdeco-dropdown__item--selected:focus, .artdeco-dropdown__item--selected:hover {
  border-color: var(--color-checked-hover);
}

.artdeco-dropdown__item--selected:active {
  border-color: var(--color-checked-active);
}

:root {
  --artdeco-button-primary-inverse-static-background-color: var(--voyager-color-action-on-dark);
  --artdeco-button-primary-inverse-static-color: var(--voyager-color-action-stick);
  --artdeco-button-primary-inverse-hover-background-color: var(--voyager-color-action-on-dark);
  --artdeco-button-primary-inverse-hover-color: var(--voyager-color-action-stick-hover);
  --artdeco-button-primary-inverse-active-background-color: var(--voyager-color-action-on-dark-active);
  --artdeco-button-primary-inverse-active-color: var(--voyager-color-action-stick-active);
  --artdeco-button-primary-inverse-disabled-background-color: var(--color-background-on-dark-disabled);
  --artdeco-button-primary-inverse-disabled-color: var(--color-text-on-dark-disabled);
  --artdeco-button-secondary-inverse-static-background-color: var(--color-background-none-on-dark);
  --artdeco-button-secondary-inverse-static-border-color: var(--color-border-on-dark);
  --artdeco-button-secondary-inverse-static-color: var(--color-text-on-dark);
  --artdeco-button-secondary-inverse-hover-background-color: var(--color-background-none-on-dark-hover);
  --artdeco-button-secondary-inverse-hover-border-color: var(--color-border-on-dark);
  --artdeco-button-secondary-inverse-hover-color: var(--color-text-on-dark);
  --artdeco-button-secondary-inverse-active-background-color: var(--color-background-none-on-dark-active);
  --artdeco-button-secondary-inverse-active-border-color: var(--color-border-on-dark-active);
  --artdeco-button-secondary-inverse-active-color: var(--color-text-on-dark-active);
  --artdeco-button-secondary-inverse-disabled-background-color: var(--color-background-on-dark-disabled);
  --artdeco-button-secondary-inverse-disabled-border-color: var(--color-transparent);
  --artdeco-button-secondary-inverse-disabled-color: var(--color-text-on-dark-disabled);
  --artdeco-button-tertiary-inverse-static-background-color: var(--color-background-none-on-dark);
  --artdeco-button-tertiary-inverse-static-color: var(--color-text-on-dark);
  --artdeco-button-tertiary-inverse-hover-background-color: var(--color-background-none-tint-on-dark-hover);
  --artdeco-button-tertiary-inverse-hover-color: var(--color-text-on-dark);
  --artdeco-button-tertiary-inverse-active-background-color: var(--color-background-none-tint-on-dark-active);
  --artdeco-button-tertiary-inverse-active-color: var(--color-text-on-dark-active);
  --artdeco-button-tertiary-inverse-disabled-background-color: var(--color-background-none-on-dark);
  --artdeco-button-tertiary-inverse-disabled-color: var(--color-text-on-dark-disabled);
  --artdeco-button-primary-inverse-premium-disabled-background-color: var(--color-background-on-dark-disabled);
  --artdeco-button-primary-inverse-premium-disabled-color: var(--color-text-on-dark-disabled);
  --artdeco-button-primary-default-static-background-color: var(--color-action);
  --artdeco-button-primary-default-static-color: var(--color-label-knockout);
  --artdeco-button-primary-default-hover-background-color: var(--color-action-hover);
  --artdeco-button-primary-default-hover-color: var(--color-label-knockout-hover);
  --artdeco-button-primary-default-active-background-color: var(--color-action-active);
  --artdeco-button-primary-default-active-color: var(--color-label-knockout-active);
  --artdeco-button-primary-default-disabled-background-color: var(--color-background-disabled);
  --artdeco-button-primary-default-disabled-color: var(--color-label-disabled);
  --artdeco-button-secondary-default-static-background-color: var(--color-background-transparent);
  --artdeco-button-secondary-default-static-border-color: var(--color-action);
  --artdeco-button-secondary-default-static-color: var(--color-action);
  --artdeco-button-secondary-default-hover-background-color: var(--color-background-action-transparent-hover);
  --artdeco-button-secondary-default-hover-border-color: var(--color-action-hover);
  --artdeco-button-secondary-default-hover-color: var(--color-action-hover);
  --artdeco-button-secondary-default-active-background-color: var(--color-background-action-transparent-active);
  --artdeco-button-secondary-default-active-border-color: var(--color-action-active);
  --artdeco-button-secondary-default-active-color: var(--color-action-active);
  --artdeco-button-secondary-default-disabled-background-color: var(--color-background-disabled);
  --artdeco-button-secondary-default-disabled-border-color: var(--color-background-transparent);
  --artdeco-button-secondary-default-disabled-color: var(--color-label-disabled);
  --artdeco-button-secondary-muted-static-background-color: var(--color-background-transparent);
  --artdeco-button-secondary-muted-static-border-color: var(--color-border);
  --artdeco-button-secondary-muted-static-color: var(--color-label);
  --artdeco-button-secondary-muted-hover-background-color: var(--color-background-transparent-hover);
  --artdeco-button-secondary-muted-hover-border-color: var(--color-border-hover);
  --artdeco-button-secondary-muted-hover-color: var(--color-label-hover);
  --artdeco-button-secondary-muted-active-background-color: var(--color-background-transparent-active);
  --artdeco-button-secondary-muted-active-border-color: var(--color-border-active);
  --artdeco-button-secondary-muted-active-color: var(--color-label-active);
  --artdeco-button-secondary-muted-disabled-background-color: var(--color-background-disabled);
  --artdeco-button-secondary-muted-disabled-border-color: var(--color-background-transparent);
  --artdeco-button-secondary-muted-disabled-color: var(--color-label-disabled);
  --artdeco-button-tertiary-default-static-background-color: var(--color-background-transparent);
  --artdeco-button-tertiary-default-static-color: var(--color-action);
  --artdeco-button-tertiary-default-hover-background-color: var(--color-background-action-transparent-hover);
  --artdeco-button-tertiary-default-hover-color: var(--color-action-hover);
  --artdeco-button-tertiary-default-active-background-color: var(--color-background-action-transparent-active);
  --artdeco-button-tertiary-default-active-color: var(--color-action-active);
  --artdeco-button-tertiary-default-disabled-background-color: var(--color-background-disabled);
  --artdeco-button-tertiary-default-disabled-color: var(--color-label-disabled);
  --artdeco-button-tertiary-muted-static-background-color: var(--color-background-transparent);
  --artdeco-button-tertiary-muted-static-color: var(--color-label);
  --artdeco-button-tertiary-muted-hover-background-color: var(--color-background-transparent-hover);
  --artdeco-button-tertiary-muted-hover-color: var(--color-label-hover);
  --artdeco-button-tertiary-muted-active-background-color: var(--color-background-transparent-active);
  --artdeco-button-tertiary-muted-active-color: var(--color-label-active);
  --artdeco-button-tertiary-muted-disabled-background-color: var(--color-background-transparent);
  --artdeco-button-tertiary-muted-disabled-color: var(--color-label-disabled);
  --artdeco-button-primary-default-premium-static-background-color: var(--color-premium-button-background);
  --artdeco-button-primary-default-premium-static-color: var(--color-premium-button-label);
  --artdeco-button-primary-default-premium-hover-background-color: var(--color-premium-button-background-hover);
  --artdeco-button-primary-default-premium-hover-color: var(--color-premium-button-label-hover);
  --artdeco-button-primary-default-premium-active-background-color: var(--color-premium-button-background-active);
  --artdeco-button-primary-default-premium-active-color: var(--color-premium-button-label-active);
  --artdeco-button-primary-default-premium-disabled-background-color: var(--color-background-disabled);
  --artdeco-button-primary-default-premium-disabled-color: var(--color-label-disabled) ;
}

a.artdeco-button, a.artdeco-button:active, a.artdeco-button:focus, a.artdeco-button:hover, a.artdeco-button:visited, a.peek-carousel-controls__button, a.peek-carousel-controls__button:active, a.peek-carousel-controls__button:focus, a.peek-carousel-controls__button:hover, a.peek-carousel-controls__button:visited {
  text-decoration: none;
}

.artdeco-button, .artdeco-button--primary, .artdeco-button--primary:visited, .artdeco-button--primary:visited:hover, .artdeco-button:visited, .artdeco-button:visited:hover, .peek-carousel-controls__button, .peek-carousel-controls__button:visited, .peek-carousel-controls__button:visited:hover, a.artdeco-button--primary {
  background-color: var(--artdeco-button-primary-default-static-background-color);
  color: var(--artdeco-button-primary-default-static-color);
}

.artdeco-button--primary:focus, .artdeco-button--primary:hover, .artdeco-button:focus, .artdeco-button:hover, .peek-carousel-controls__button:focus, .peek-carousel-controls__button:hover {
  background-color: var(--artdeco-button-primary-default-hover-background-color);
  color: var(--artdeco-button-primary-default-hover-color);
}

.artdeco-button--primary:active, .artdeco-button:active, .peek-carousel-controls__button:active {
  background-color: var(--artdeco-button-primary-default-active-background-color);
  color: var(--artdeco-button-primary-default-active-color);
}

.artdeco-button--disabled.artdeco-button, .artdeco-button--disabled.artdeco-button--primary, .artdeco-button--disabled.peek-carousel-controls__button, .artdeco-button--primary:disabled, .artdeco-button:disabled, .peek-carousel-controls__button:disabled, .peek-carousel-controls__button[disabled] {
  background-color: var(--artdeco-button-primary-default-disabled-background-color);
  color: var(--artdeco-button-primary-default-disabled-color);
}

.artdeco-button--disabled.artdeco-button--primary .artdeco-button__icon--in-bug, .artdeco-button--disabled.artdeco-button .artdeco-button__icon--in-bug, .artdeco-button--disabled.peek-carousel-controls__button .artdeco-button__icon--in-bug, .artdeco-button--primary:disabled .artdeco-button__icon--in-bug, .artdeco-button:disabled .artdeco-button__icon--in-bug, .peek-carousel-controls__button:disabled .artdeco-button__icon--in-bug, .peek-carousel-controls__button[disabled] .artdeco-button__icon--in-bug {
  opacity: 0.45;
}

.artdeco-button--premium.artdeco-button, .artdeco-button--premium.artdeco-button--primary, .artdeco-button--premium.artdeco-button--primary:visited, .artdeco-button--premium.artdeco-button--primary:visited:hover, .artdeco-button--premium.artdeco-button:visited, .artdeco-button--premium.artdeco-button:visited:hover, .artdeco-button--premium.peek-carousel-controls__button, .artdeco-button--premium.peek-carousel-controls__button:visited, .artdeco-button--premium.peek-carousel-controls__button:visited:hover {
  background-color: var(--artdeco-button-primary-default-premium-static-background-color);
  color: var(--artdeco-button-primary-default-premium-static-color);
}

.artdeco-button--premium.artdeco-button--primary:focus, .artdeco-button--premium.artdeco-button--primary:hover, .artdeco-button--premium.artdeco-button:focus, .artdeco-button--premium.artdeco-button:hover, .artdeco-button--premium.peek-carousel-controls__button:focus, .artdeco-button--premium.peek-carousel-controls__button:hover {
  background-color: var(--artdeco-button-primary-default-premium-hover-background-color);
  color: var(--artdeco-button-primary-default-premium-hover-color);
}

.artdeco-button--premium.artdeco-button--primary:active, .artdeco-button--premium.artdeco-button:active, .artdeco-button--premium.peek-carousel-controls__button:active {
  background-color: var(--artdeco-button-primary-default-premium-active-background-color);
  color: var(--artdeco-button-primary-default-premium-active-color);
}

.artdeco-button--premium.artdeco-button--disabled.artdeco-button, .artdeco-button--premium.artdeco-button--disabled.artdeco-button--primary, .artdeco-button--premium.artdeco-button--disabled.peek-carousel-controls__button, .artdeco-button--premium.artdeco-button--primary:disabled, .artdeco-button--premium.artdeco-button:disabled, .artdeco-button--premium.peek-carousel-controls__button:disabled, .artdeco-button--premium.peek-carousel-controls__button[disabled] {
  background-color: var(--artdeco-button-primary-default-premium-disabled-background-color);
  color: var(--artdeco-button-primary-default-premium-disabled-color);
}

.artdeco-button--inverse.artdeco-button, .artdeco-button--inverse.artdeco-button--primary, .artdeco-button--inverse.artdeco-button--primary:visited, .artdeco-button--inverse.artdeco-button--primary:visited:hover, .artdeco-button--inverse.artdeco-button:visited, .artdeco-button--inverse.artdeco-button:visited:hover, .artdeco-button--inverse.peek-carousel-controls__button, .artdeco-button--inverse.peek-carousel-controls__button:visited, .artdeco-button--inverse.peek-carousel-controls__button:visited:hover {
  background-color: var(--artdeco-button-primary-inverse-static-background-color);
  color: var(--artdeco-button-primary-inverse-static-color);
}

.artdeco-button--inverse.artdeco-button--primary:focus, .artdeco-button--inverse.artdeco-button--primary:hover, .artdeco-button--inverse.artdeco-button:focus, .artdeco-button--inverse.artdeco-button:hover, .artdeco-button--inverse.peek-carousel-controls__button:focus, .artdeco-button--inverse.peek-carousel-controls__button:hover {
  background-color: var(--artdeco-button-primary-inverse-hover-background-color);
  color: var(--artdeco-button-primary-inverse-hover-color);
}

.artdeco-button--inverse.artdeco-button--primary:active, .artdeco-button--inverse.artdeco-button:active, .artdeco-button--inverse.peek-carousel-controls__button:active {
  background-color: var(--artdeco-button-primary-inverse-active-background-color);
  color: var(--artdeco-button-primary-inverse-active-color);
}

.artdeco-button--inverse.artdeco-button--disabled.artdeco-button, .artdeco-button--inverse.artdeco-button--disabled.artdeco-button--primary, .artdeco-button--inverse.artdeco-button--disabled.peek-carousel-controls__button, .artdeco-button--inverse.artdeco-button--primary:disabled, .artdeco-button--inverse.artdeco-button:disabled, .artdeco-button--inverse.peek-carousel-controls__button:disabled, .artdeco-button--inverse.peek-carousel-controls__button[disabled] {
  background-color: var(--artdeco-button-primary-inverse-disabled-background-color);
  color: var(--artdeco-button-primary-inverse-disabled-color);
}

.artdeco-button--inverse.artdeco-button--disabled.artdeco-button--primary .artdeco-button__icon--in-bug, .artdeco-button--inverse.artdeco-button--disabled.artdeco-button .artdeco-button__icon--in-bug, .artdeco-button--inverse.artdeco-button--disabled.peek-carousel-controls__button .artdeco-button__icon--in-bug, .artdeco-button--inverse.artdeco-button--primary:disabled .artdeco-button__icon--in-bug, .artdeco-button--inverse.artdeco-button:disabled .artdeco-button__icon--in-bug, .artdeco-button--inverse.peek-carousel-controls__button:disabled .artdeco-button__icon--in-bug, .artdeco-button--inverse.peek-carousel-controls__button[disabled] .artdeco-button__icon--in-bug {
  opacity: 0.45;
}

.artdeco-button--inverse.artdeco-button--premium.artdeco-button, .artdeco-button--inverse.artdeco-button--premium.artdeco-button--primary, .artdeco-button--inverse.artdeco-button--premium.artdeco-button--primary:visited, .artdeco-button--inverse.artdeco-button--premium.artdeco-button--primary:visited:hover, .artdeco-button--inverse.artdeco-button--premium.artdeco-button:visited, .artdeco-button--inverse.artdeco-button--premium.artdeco-button:visited:hover, .artdeco-button--inverse.artdeco-button--premium.peek-carousel-controls__button, .artdeco-button--inverse.artdeco-button--premium.peek-carousel-controls__button:visited, .artdeco-button--inverse.artdeco-button--premium.peek-carousel-controls__button:visited:hover {
  background-color: var(--artdeco-button-primary-default-premium-static-background-color);
  color: var(--artdeco-button-primary-default-premium-static-color);
}

.artdeco-button--inverse.artdeco-button--premium.artdeco-button--primary:focus, .artdeco-button--inverse.artdeco-button--premium.artdeco-button--primary:hover, .artdeco-button--inverse.artdeco-button--premium.artdeco-button:focus, .artdeco-button--inverse.artdeco-button--premium.artdeco-button:hover, .artdeco-button--inverse.artdeco-button--premium.peek-carousel-controls__button:focus, .artdeco-button--inverse.artdeco-button--premium.peek-carousel-controls__button:hover {
  background-color: var(--artdeco-button-primary-default-premium-hover-background-color);
  color: var(--artdeco-button-primary-default-premium-hover-color);
}

.artdeco-button--inverse.artdeco-button--premium.artdeco-button--primary:active, .artdeco-button--inverse.artdeco-button--premium.artdeco-button:active, .artdeco-button--inverse.artdeco-button--premium.peek-carousel-controls__button:active {
  background-color: var(--artdeco-button-primary-default-premium-active-background-color);
  color: var(--artdeco-button-primary-default-premium-active-color);
}

.artdeco-button--inverse.artdeco-button--premium.artdeco-button--disabled.artdeco-button, .artdeco-button--inverse.artdeco-button--premium.artdeco-button--disabled.artdeco-button--primary, .artdeco-button--inverse.artdeco-button--premium.artdeco-button--disabled.peek-carousel-controls__button, .artdeco-button--inverse.artdeco-button--premium.artdeco-button--primary:disabled, .artdeco-button--inverse.artdeco-button--premium.artdeco-button:disabled, .artdeco-button--inverse.artdeco-button--premium.peek-carousel-controls__button:disabled, .artdeco-button--inverse.artdeco-button--premium.peek-carousel-controls__button[disabled] {
  background-color: var(--artdeco-button-primary-inverse-premium-disabled-background-color);
  color: var(--artdeco-button-primary-inverse-premium-disabled-color);
}

.artdeco-button--secondary, .artdeco-button--secondary:visited, .artdeco-button--secondary:visited:hover, .artdeco-carousel__navigation .artdeco-button--circle, .artdeco-carousel__navigation .artdeco-button--circle:visited, .artdeco-carousel__navigation .artdeco-button--circle:visited:hover, .artdeco-carousel__navigation .peek-carousel-controls__button, .peek-carousel-controls__button, .peek-carousel-controls__button:visited, .peek-carousel-controls__button:visited:hover, a.artdeco-button--secondary {
  background-color: var(--artdeco-button-secondary-default-static-background-color);
  color: var(--artdeco-button-secondary-default-static-color);
  box-shadow: inset 0 0 0 1px var(--artdeco-button-secondary-default-static-border-color);
}

.artdeco-button--secondary:focus, .artdeco-button--secondary:hover, .artdeco-carousel__navigation .artdeco-button--circle:focus, .artdeco-carousel__navigation .artdeco-button--circle:hover, .peek-carousel-controls__button:focus, .peek-carousel-controls__button:hover {
  background-color: var(--artdeco-button-secondary-default-hover-background-color);
  color: var(--artdeco-button-secondary-default-hover-color);
  box-shadow: inset 0 0 0 2px var(--artdeco-button-secondary-default-hover-border-color);
}

.artdeco-button--secondary:active, .artdeco-carousel__navigation .artdeco-button--circle:active, .peek-carousel-controls__button:active {
  background-color: var(--artdeco-button-secondary-default-active-background-color);
  color: var(--artdeco-button-secondary-default-active-color);
  box-shadow: inset 0 0 0 2px var(--artdeco-button-secondary-default-active-border-color);
}

.artdeco-button--disabled.artdeco-button--secondary, .artdeco-button--disabled.peek-carousel-controls__button, .artdeco-button--secondary:disabled, .artdeco-carousel__navigation .artdeco-button--circle:disabled, .artdeco-carousel__navigation .artdeco-button--disabled.artdeco-button--circle, .peek-carousel-controls__button:disabled, .peek-carousel-controls__button[disabled] {
  background-color: var(--artdeco-button-secondary-default-disabled-background-color);
  color: var(--artdeco-button-secondary-default-disabled-color);
  box-shadow: inset 0 0 0 1px var(--artdeco-button-secondary-default-disabled-border-color);
}

.artdeco-button--inverse.artdeco-button--secondary, .artdeco-button--inverse.artdeco-button--secondary:visited, .artdeco-button--inverse.artdeco-button--secondary:visited:hover, .artdeco-button--inverse.peek-carousel-controls__button, .artdeco-button--inverse.peek-carousel-controls__button:visited, .artdeco-button--inverse.peek-carousel-controls__button:visited:hover, .artdeco-carousel__navigation .artdeco-button--inverse.artdeco-button--circle, .artdeco-carousel__navigation .artdeco-button--inverse.artdeco-button--circle:visited, .artdeco-carousel__navigation .artdeco-button--inverse.artdeco-button--circle:visited:hover {
  background-color: var(--artdeco-button-secondary-inverse-static-background-color);
  color: var(--artdeco-button-secondary-inverse-static-color);
  box-shadow: inset 0 0 0 1px var(--artdeco-button-secondary-inverse-static-border-color);
}

.artdeco-button--inverse.artdeco-button--secondary:focus, .artdeco-button--inverse.artdeco-button--secondary:hover, .artdeco-button--inverse.peek-carousel-controls__button:focus, .artdeco-button--inverse.peek-carousel-controls__button:hover, .artdeco-carousel__navigation .artdeco-button--inverse.artdeco-button--circle:focus, .artdeco-carousel__navigation .artdeco-button--inverse.artdeco-button--circle:hover {
  background-color: var(--artdeco-button-secondary-inverse-hover-background-color);
  color: var(--artdeco-button-secondary-inverse-hover-color);
  box-shadow: inset 0 0 0 2px var(--artdeco-button-secondary-inverse-hover-border-color);
}

.artdeco-button--inverse.artdeco-button--secondary:active, .artdeco-button--inverse.peek-carousel-controls__button:active, .artdeco-carousel__navigation .artdeco-button--inverse.artdeco-button--circle:active {
  background-color: var(--artdeco-button-secondary-inverse-active-background-color);
  color: var(--artdeco-button-secondary-inverse-active-color);
  box-shadow: inset 0 0 0 2px var(--artdeco-button-secondary-inverse-active-border-color);
}

.artdeco-button--inverse.artdeco-button--disabled.artdeco-button--secondary, .artdeco-button--inverse.artdeco-button--disabled.peek-carousel-controls__button, .artdeco-button--inverse.artdeco-button--secondary:disabled, .artdeco-button--inverse.peek-carousel-controls__button:disabled, .artdeco-button--inverse.peek-carousel-controls__button[disabled], .artdeco-carousel__navigation .artdeco-button--inverse.artdeco-button--circle:disabled, .artdeco-carousel__navigation .artdeco-button--inverse.artdeco-button--disabled.artdeco-button--circle {
  background-color: var(--artdeco-button-secondary-inverse-disabled-background-color);
  color: var(--artdeco-button-secondary-inverse-disabled-color);
  box-shadow: inset 0 0 0 1px var(--artdeco-button-secondary-inverse-disabled-border-color);
}

.artdeco-button--muted.artdeco-button--secondary, .artdeco-button--muted.artdeco-button--secondary:visited, .artdeco-button--muted.artdeco-button--secondary:visited:hover, .artdeco-carousel__navigation .artdeco-button--muted.artdeco-button--circle, .artdeco-carousel__navigation .artdeco-button--muted.artdeco-button--circle:visited, .artdeco-carousel__navigation .artdeco-button--muted.artdeco-button--circle:visited:hover, .artdeco-carousel__navigation .peek-carousel-controls__button, .peek-carousel-controls__button, .peek-carousel-controls__button:visited, .peek-carousel-controls__button:visited:hover {
  background-color: var(--artdeco-button-secondary-muted-static-background-color);
  color: var(--artdeco-button-secondary-muted-static-color);
  box-shadow: inset 0 0 0 1px var(--artdeco-button-secondary-muted-static-border-color);
}

.artdeco-button--muted.artdeco-button--secondary:focus, .artdeco-button--muted.artdeco-button--secondary:hover, .artdeco-carousel__navigation .artdeco-button--muted.artdeco-button--circle:focus, .artdeco-carousel__navigation .artdeco-button--muted.artdeco-button--circle:hover, .peek-carousel-controls__button:focus, .peek-carousel-controls__button:hover {
  background-color: var(--artdeco-button-secondary-muted-hover-background-color);
  color: var(--artdeco-button-secondary-muted-hover-color);
  box-shadow: inset 0 0 0 2px var(--artdeco-button-secondary-muted-hover-border-color);
}

.artdeco-button--muted.artdeco-button--secondary:active, .artdeco-carousel__navigation .artdeco-button--muted.artdeco-button--circle:active, .peek-carousel-controls__button:active {
  background-color: var(--artdeco-button-secondary-muted-active-background-color);
  color: var(--artdeco-button-secondary-muted-active-color);
  box-shadow: inset 0 0 0 2px var(--artdeco-button-secondary-muted-active-border-color);
}

.artdeco-button--disabled.peek-carousel-controls__button, .artdeco-button--muted.artdeco-button--disabled.artdeco-button--secondary, .artdeco-button--muted.artdeco-button--secondary:disabled, .artdeco-carousel__navigation .artdeco-button--muted.artdeco-button--circle:disabled, .artdeco-carousel__navigation .artdeco-button--muted.artdeco-button--disabled.artdeco-button--circle, .peek-carousel-controls__button:disabled, .peek-carousel-controls__button[disabled] {
  background-color: var(--artdeco-button-secondary-muted-disabled-background-color);
  color: var(--artdeco-button-secondary-muted-disabled-color);
  box-shadow: inset 0 0 0 1px var(--artdeco-button-secondary-muted-disabled-border-color);
}

.artdeco-button--disabled.peek-carousel-controls__button .artdeco-button__icon--in-bug, .artdeco-button--muted.artdeco-button--disabled.artdeco-button--secondary .artdeco-button__icon--in-bug, .artdeco-button--muted.artdeco-button--secondary:disabled .artdeco-button__icon--in-bug, .artdeco-carousel__navigation .artdeco-button--muted.artdeco-button--circle:disabled .artdeco-button__icon--in-bug, .artdeco-carousel__navigation .artdeco-button--muted.artdeco-button--disabled.artdeco-button--circle .artdeco-button__icon--in-bug, .peek-carousel-controls__button:disabled .artdeco-button__icon--in-bug, .peek-carousel-controls__button[disabled] .artdeco-button__icon--in-bug {
  opacity: 0.45;
}

.artdeco-button--tertiary, .artdeco-button--tertiary:visited, .artdeco-button--tertiary:visited:hover, a.artdeco-button--tertiary {
  background-color: var(--artdeco-button-tertiary-default-static-background-color);
  color: var(--artdeco-button-tertiary-default-static-color);
}

.artdeco-button--tertiary:focus, .artdeco-button--tertiary:hover {
  background-color: var(--artdeco-button-tertiary-default-hover-background-color);
  color: var(--artdeco-button-tertiary-default-hover-color);
}

.artdeco-button--tertiary:active {
  background-color: var(--artdeco-button-tertiary-default-active-background-color);
  color: var(--artdeco-button-tertiary-default-active-color);
}

.artdeco-button--disabled.artdeco-button--tertiary, .artdeco-button--tertiary.peek-carousel-controls__button[disabled], .artdeco-button--tertiary:disabled {
  background-color: var(--artdeco-button-tertiary-default-disabled-background-color);
  color: var(--artdeco-button-tertiary-default-disabled-color);
}

.artdeco-button--inverse.artdeco-button--tertiary, .artdeco-button--inverse.artdeco-button--tertiary:visited, .artdeco-button--inverse.artdeco-button--tertiary:visited:hover {
  background-color: var(--artdeco-button-tertiary-inverse-static-background-color);
  color: var(--artdeco-button-tertiary-inverse-static-color);
}

.artdeco-button--inverse.artdeco-button--tertiary:focus, .artdeco-button--inverse.artdeco-button--tertiary:hover {
  background-color: var(--artdeco-button-tertiary-inverse-hover-background-color);
  color: var(--artdeco-button-tertiary-inverse-hover-color);
}

.artdeco-button--inverse.artdeco-button--tertiary:active {
  background-color: var(--artdeco-button-tertiary-inverse-active-background-color);
  color: var(--artdeco-button-tertiary-inverse-active-color);
}

.artdeco-button--inverse.artdeco-button--disabled.artdeco-button--tertiary, .artdeco-button--inverse.artdeco-button--tertiary.peek-carousel-controls__button[disabled], .artdeco-button--inverse.artdeco-button--tertiary:disabled {
  background-color: var(--artdeco-button-tertiary-inverse-disabled-background-color);
  color: var(--artdeco-button-tertiary-inverse-disabled-color);
}

.artdeco-button--muted.artdeco-button--tertiary, .artdeco-button--muted.artdeco-button--tertiary:visited, .artdeco-button--muted.artdeco-button--tertiary:visited:hover, .artdeco-button--tertiary.peek-carousel-controls__button, .artdeco-button--tertiary.peek-carousel-controls__button:visited, .artdeco-button--tertiary.peek-carousel-controls__button:visited:hover {
  background-color: var(--artdeco-button-tertiary-muted-static-background-color);
  color: var(--artdeco-button-tertiary-muted-static-color);
}

.artdeco-button--muted.artdeco-button--tertiary:focus, .artdeco-button--muted.artdeco-button--tertiary:hover, .artdeco-button--tertiary.peek-carousel-controls__button:focus, .artdeco-button--tertiary.peek-carousel-controls__button:hover {
  background-color: var(--artdeco-button-tertiary-muted-hover-background-color);
  color: var(--artdeco-button-tertiary-muted-hover-color);
}

.artdeco-button--muted.artdeco-button--tertiary:active, .artdeco-button--tertiary.peek-carousel-controls__button:active {
  background-color: var(--artdeco-button-tertiary-muted-active-background-color);
  color: var(--artdeco-button-tertiary-muted-active-color);
}

.artdeco-button--disabled.artdeco-button--tertiary.peek-carousel-controls__button, .artdeco-button--muted.artdeco-button--disabled.artdeco-button--tertiary, .artdeco-button--muted.artdeco-button--tertiary:disabled, .artdeco-button--tertiary.peek-carousel-controls__button:disabled, .artdeco-button--tertiary.peek-carousel-controls__button[disabled] {
  background-color: var(--artdeco-button-tertiary-muted-disabled-background-color);
  color: var(--artdeco-button-tertiary-muted-disabled-color);
}

.artdeco-button, .artdeco-button--2, .peek-carousel-controls__button {
  font-size: 1.6rem;
  min-height: 3.2rem;
  padding: 0.6rem 1.2rem;
  line-height: 2rem;
}

.artdeco-button--circle.artdeco-button, .artdeco-button--circle.artdeco-button--2, .peek-carousel-controls__button {
  height: 4rem;
  width: 4rem;
  min-width: auto;
}

.artdeco-button--1, .peek-carousel-controls__button {
  font-size: 1rem;
  min-height: 1.6rem;
  padding: 0.2rem 0.8rem;
  line-height: 1rem;
}

.artdeco-button--circle.artdeco-button--1, .peek-carousel-controls__button {
  height: 1.6rem;
  width: 1.6rem;
  min-width: auto;
}

.artdeco-button--3 {
  font-size: 1.6rem;
  min-height: 4rem;
  padding: 1rem 1.6rem;
  line-height: 2rem;
}

.artdeco-button--3.peek-carousel-controls__button, .artdeco-button--circle.artdeco-button--3 {
  height: 4.8rem;
  width: 4.8rem;
  min-width: auto;
}

.artdeco-button--4 {
  font-size: 2rem;
  min-height: 4.8rem;
  padding: 1rem 2rem;
  line-height: 2.8rem;
}

.artdeco-button--4.peek-carousel-controls__button, .artdeco-button--circle.artdeco-button--4 {
  height: 5.6rem;
  width: 5.6rem;
  min-width: auto;
}

.artdeco-button, .peek-carousel-controls__button {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 167ms;
  align-items: center;
  border: none;
  border-radius: 2px;
  box-sizing: border-box;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  display: inline-flex;
  justify-content: center;
  min-width: 6.4rem;
  max-width: 480px;
  overflow: hidden;
  text-align: center;
  transition-property: background-color, box-shadow, color;
  vertical-align: middle;
}

.artdeco-button:disabled, .peek-carousel-controls__button:disabled {
  cursor: not-allowed;
}

.artdeco-button:disabled *, .peek-carousel-controls__button:disabled * {
  pointer-events: none;
}

.artdeco-button--disabled.peek-carousel-controls__button, .artdeco-button.artdeco-button--disabled, .peek-carousel-controls__button[disabled] {
  cursor: not-allowed;
}

.artdeco-button--disabled.peek-carousel-controls__button *, .artdeco-button.artdeco-button--disabled *, .peek-carousel-controls__button[disabled] * {
  pointer-events: none;
}

.artdeco-button--tertiary {
  padding-left: 8px;
  padding-right: 8px;
}

.artdeco-button--circle, .peek-carousel-controls__button {
  border-radius: 49.5%;
  padding: 0;
}

.artdeco-button--circle .artdeco-button__text, .peek-carousel-controls__button .artdeco-button__text {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.artdeco-button--fluid {
  display: flex;
  flex: 1;
  border-radius: 0;
  max-width: 100%;
  width: 100%;
}

.artdeco-button--full {
  display: flex;
  flex: 1;
}

.artdeco-button--full + .artdeco-button--full {
  margin-left: 8px;
}

.artdeco-button--icon-right {
  flex-direction: row-reverse;
}

.artdeco-button__icon, .peek-carousel-controls__button .peek-carousel-controls__button-icon {
  flex-shrink: 0;
  margin: 0 4px 0 -2px;
}

.artdeco-button--4 .artdeco-button__icon, .artdeco-button--4 .peek-carousel-controls__button .peek-carousel-controls__button-icon, .peek-carousel-controls__button .artdeco-button--4 .peek-carousel-controls__button-icon {
  margin-left: -4px;
}

.artdeco-button--tertiary .artdeco-button__icon, .artdeco-button--tertiary .peek-carousel-controls__button .peek-carousel-controls__button-icon, .peek-carousel-controls__button .artdeco-button--tertiary .peek-carousel-controls__button-icon {
  margin-left: -2px;
}

.artdeco-button--icon-right .artdeco-button__icon, .artdeco-button--icon-right .peek-carousel-controls__button .peek-carousel-controls__button-icon, .peek-carousel-controls__button .artdeco-button--icon-right .peek-carousel-controls__button-icon {
  margin: 0 -2px 0 4px;
}

.artdeco-button__icon .artdeco-button--4 .artdeco-button__icon.artdeco-button--icon-right, .artdeco-button__icon .artdeco-button--4 .peek-carousel-controls__button .artdeco-button--icon-right.peek-carousel-controls__button-icon, .peek-carousel-controls__button .artdeco-button__icon .artdeco-button--4 .artdeco-button--icon-right.peek-carousel-controls__button-icon, .peek-carousel-controls__button .peek-carousel-controls__button-icon .artdeco-button--4 .artdeco-button--icon-right.peek-carousel-controls__button-icon, .peek-carousel-controls__button .peek-carousel-controls__button-icon .artdeco-button--4 .artdeco-button__icon.artdeco-button--icon-right {
  margin-left: 6px;
}

.artdeco-button__icon .artdeco-button--4.artdeco-button--tertiary .artdeco-button__icon.artdeco-button--icon-right, .artdeco-button__icon .artdeco-button--4.artdeco-button--tertiary .peek-carousel-controls__button .artdeco-button--icon-right.peek-carousel-controls__button-icon, .peek-carousel-controls__button .artdeco-button__icon .artdeco-button--4.artdeco-button--tertiary .artdeco-button--icon-right.peek-carousel-controls__button-icon, .peek-carousel-controls__button .peek-carousel-controls__button-icon .artdeco-button--4.artdeco-button--tertiary .artdeco-button--icon-right.peek-carousel-controls__button-icon, .peek-carousel-controls__button .peek-carousel-controls__button-icon .artdeco-button--4.artdeco-button--tertiary .artdeco-button__icon.artdeco-button--icon-right {
  margin-left: 4px;
}

.artdeco-button__icon.artdeco-button__icon--in-bug, .peek-carousel-controls__button .artdeco-button__icon--in-bug.peek-carousel-controls__button-icon {
  margin: 0 4px 0 0;
}

.artdeco-button__icon .artdeco-button--4 .artdeco-button__icon.artdeco-button__icon--in-bug, .artdeco-button__icon .artdeco-button--4 .peek-carousel-controls__button .artdeco-button__icon--in-bug.peek-carousel-controls__button-icon, .peek-carousel-controls__button .artdeco-button__icon .artdeco-button--4 .artdeco-button__icon--in-bug.peek-carousel-controls__button-icon, .peek-carousel-controls__button .peek-carousel-controls__button-icon .artdeco-button--4 .artdeco-button__icon--in-bug.peek-carousel-controls__button-icon, .peek-carousel-controls__button .peek-carousel-controls__button-icon .artdeco-button--4 .artdeco-button__icon.artdeco-button__icon--in-bug {
  margin-right: 6px;
}

.artdeco-button--circle .artdeco-button__icon, .peek-carousel-controls__button .artdeco-button__icon, .peek-carousel-controls__button .peek-carousel-controls__button-icon {
  margin: 0;
}

@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
  .artdeco-button--primary, .artdeco-button--secondary, .artdeco-button--tertiary, .artdeco-carousel__navigation .artdeco-button--circle, .artdeco-carousel__navigation .peek-carousel-controls__button, .peek-carousel-controls__button {
    background-color: transparent;
  }
  .artdeco-button--primary:not(a), .artdeco-button--secondary:not(a), .artdeco-button--tertiary:not(a), .artdeco-carousel__navigation .artdeco-button--circle:not(a), .artdeco-carousel__navigation .peek-carousel-controls__button:not(a), .peek-carousel-controls__button:not(a) {
    color: ButtonText !important;
  }
  .artdeco-button--primary:active, .artdeco-button--primary:focus, .artdeco-button--primary:hover, .artdeco-button--secondary:active, .artdeco-button--secondary:focus, .artdeco-button--secondary:hover, .artdeco-button--tertiary:active, .artdeco-button--tertiary:focus, .artdeco-button--tertiary:hover, .artdeco-carousel__navigation .artdeco-button--circle:active, .artdeco-carousel__navigation .artdeco-button--circle:focus, .artdeco-carousel__navigation .artdeco-button--circle:hover, .peek-carousel-controls__button:active, .peek-carousel-controls__button:focus, .peek-carousel-controls__button:hover {
    border: 1px solid ButtonText !important;
    box-shadow: inset 0 0 0 1px ButtonText !important;
  }
  .artdeco-button--disabled.peek-carousel-controls__button, .artdeco-button--disabled.peek-carousel-controls__button:active, .artdeco-button--disabled.peek-carousel-controls__button:focus, .artdeco-button--disabled.peek-carousel-controls__button:hover, .artdeco-button--primary.artdeco-button--disabled, .artdeco-button--primary.artdeco-button--disabled:active, .artdeco-button--primary.artdeco-button--disabled:focus, .artdeco-button--primary.artdeco-button--disabled:hover, .artdeco-button--primary.peek-carousel-controls__button:active[disabled], .artdeco-button--primary.peek-carousel-controls__button:focus[disabled], .artdeco-button--primary.peek-carousel-controls__button:hover[disabled], .artdeco-button--primary.peek-carousel-controls__button[disabled], .artdeco-button--primary:disabled, .artdeco-button--primary:disabled:active, .artdeco-button--primary:disabled:focus, .artdeco-button--primary:disabled:hover, .artdeco-button--secondary.artdeco-button--disabled, .artdeco-button--secondary.artdeco-button--disabled:active, .artdeco-button--secondary.artdeco-button--disabled:focus, .artdeco-button--secondary.artdeco-button--disabled:hover, .artdeco-button--secondary:disabled, .artdeco-button--secondary:disabled:active, .artdeco-button--secondary:disabled:focus, .artdeco-button--secondary:disabled:hover, .artdeco-button--tertiary.artdeco-button--disabled, .artdeco-button--tertiary.artdeco-button--disabled:active, .artdeco-button--tertiary.artdeco-button--disabled:focus, .artdeco-button--tertiary.artdeco-button--disabled:hover, .artdeco-button--tertiary.peek-carousel-controls__button:active[disabled], .artdeco-button--tertiary.peek-carousel-controls__button:focus[disabled], .artdeco-button--tertiary.peek-carousel-controls__button:hover[disabled], .artdeco-button--tertiary.peek-carousel-controls__button[disabled], .artdeco-button--tertiary:disabled, .artdeco-button--tertiary:disabled:active, .artdeco-button--tertiary:disabled:focus, .artdeco-button--tertiary:disabled:hover, .artdeco-carousel__navigation .artdeco-button--circle:disabled, .artdeco-carousel__navigation .artdeco-button--circle:disabled:active, .artdeco-carousel__navigation .artdeco-button--circle:disabled:focus, .artdeco-carousel__navigation .artdeco-button--circle:disabled:hover, .artdeco-carousel__navigation .artdeco-button--disabled.artdeco-button--circle, .artdeco-carousel__navigation .artdeco-button--disabled.artdeco-button--circle:active, .artdeco-carousel__navigation .artdeco-button--disabled.artdeco-button--circle:focus, .artdeco-carousel__navigation .artdeco-button--disabled.artdeco-button--circle:hover, .peek-carousel-controls__button:active[disabled], .peek-carousel-controls__button:disabled, .peek-carousel-controls__button:disabled:active, .peek-carousel-controls__button:disabled:focus, .peek-carousel-controls__button:disabled:hover, .peek-carousel-controls__button:focus[disabled], .peek-carousel-controls__button:hover[disabled], .peek-carousel-controls__button[disabled] {
    color: GrayText !important;
    border: 1px solid GrayText !important;
    box-shadow: none;
    outline: none;
  }
  .artdeco-button--tertiary {
    border: 1px solid transparent;
  }
  .artdeco-button--primary, .artdeco-button--secondary, .artdeco-carousel__navigation .artdeco-button--circle, .artdeco-carousel__navigation .peek-carousel-controls__button, .peek-carousel-controls__button {
    border: 1px solid ButtonText !important;
  }
}
a.artdeco-button--primary.peek-carousel-controls__button:focus, a.artdeco-button.artdeco-button--primary:focus {
  outline: 4px solid var(--blue-60, #0091ca);
  outline-offset: 2px;
}

a.artdeco-button--primary.artdeco-button--inverse.peek-carousel-controls__button:focus, a.artdeco-button.artdeco-button--primary.artdeco-button--inverse:focus {
  outline: 4px solid var(--blue-30, #caedff);
}

.artdeco-button, .peek-carousel-controls__button {
  min-width: 0;
}

.artdeco-button:focus, .peek-carousel-controls__button:focus {
  outline-offset: 2px;
}

.artdeco-button, .artdeco-button--2, .peek-carousel-controls__button {
  border-radius: var(--corner-radius-large) !important;
  padding-left: 1.6rem !important;
  padding-right: 1.6rem !important;
}

.artdeco-button--1, .peek-carousel-controls__button {
  border-radius: var(--corner-radius-large) !important;
  padding-left: 1.2rem !important;
  padding-right: 1.2rem !important;
}

.artdeco-button--3 {
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}

.artdeco-button--3, .artdeco-button--4 {
  border-radius: var(--corner-radius-xlarge) !important;
}

.artdeco-button--4 {
  padding-left: 2.4rem !important;
  padding-right: 2.4rem !important;
}

.artdeco-button--tertiary {
  border-radius: var(--corner-radius-small) !important;
  padding-left: 0.8rem !important;
  padding-right: 0.8rem !important;
}

.artdeco-button--premium {
  box-shadow: none !important;
}

.artdeco-button--circle, .peek-carousel-controls__button {
  border-radius: var(--corner-radius-full) !important;
  padding: 0 !important;
}

.artdeco-button--fluid {
  border-radius: 0 !important;
}

.artdeco-button--full {
  max-width: 100% !important;
  flex-grow: 1 !important;
}

a.artdeco-button--primary.peek-carousel-controls__button, a.artdeco-button.artdeco-button--primary {
  outline-color: transparent !important;
}

a.artdeco-button--primary.peek-carousel-controls__button:focus, a.artdeco-button.artdeco-button--primary:focus {
  outline-color: var(--color-action) !important;
}

a.artdeco-button--primary.artdeco-button--inverse.peek-carousel-controls__button, a.artdeco-button.artdeco-button--primary.artdeco-button--inverse {
  outline-color: transparent !important;
}

a.artdeco-button--primary.artdeco-button--inverse.peek-carousel-controls__button:focus, a.artdeco-button.artdeco-button--primary.artdeco-button--inverse:focus {
  outline-color: var(--color-action-on-dark) !important;
}

a.artdeco-button--primary.peek-carousel-controls__button:visited, a.artdeco-button.artdeco-button--primary:visited {
  color: var(--artdeco-button-primary-default-static-color);
}

a.artdeco-button--primary.artdeco-button--inverse.peek-carousel-controls__button:visited, a.artdeco-button.artdeco-button--primary.artdeco-button--inverse:visited {
  color: var(--artdeco-button-primary-inverse-static-color);
}

a.artdeco-button--primary.peek-carousel-controls__button:visited, a.artdeco-button.artdeco-button--primary.artdeco-button--muted:visited {
  color: var(--white, #fff);
}

.artdeco-carousel__navigation a.artdeco-button.artdeco-button--circle:visited, a.artdeco-button.artdeco-button--secondary:visited, a.peek-carousel-controls__button:visited {
  color: var(--artdeco-button-secondary-default-static-color);
}

.artdeco-carousel__navigation a.artdeco-button.artdeco-button--inverse.artdeco-button--circle:visited, a.artdeco-button--inverse.peek-carousel-controls__button:visited, a.artdeco-button.artdeco-button--secondary.artdeco-button--inverse:visited {
  color: var(--artdeco-button-secondary-inverse-static-color);
}

.artdeco-carousel__navigation a.artdeco-button.artdeco-button--muted.artdeco-button--circle:visited, a.artdeco-button.artdeco-button--secondary.artdeco-button--muted:visited, a.peek-carousel-controls__button:visited {
  color: var(--artdeco-button-secondary-muted-static-color);
}

a.artdeco-button--tertiary.peek-carousel-controls__button:visited, a.artdeco-button.artdeco-button--tertiary:visited {
  color: var(--artdeco-button-tertiary-default-static-color);
}

a.artdeco-button--tertiary.artdeco-button--inverse.peek-carousel-controls__button:visited, a.artdeco-button.artdeco-button--tertiary.artdeco-button--inverse:visited {
  color: var(--artdeco-button-tertiary-inverse-static-color);
}

a.artdeco-button--tertiary.peek-carousel-controls__button:visited, a.artdeco-button.artdeco-button--tertiary.artdeco-button--muted:visited {
  color: var(--artdeco-button-tertiary-muted-static-color);
}

.artdeco-button--tertiary.peek-carousel-controls__button:disabled .artdeco-button__icon, .artdeco-button--tertiary.peek-carousel-controls__button:disabled .artdeco-button__icon:active, .artdeco-button--tertiary.peek-carousel-controls__button:disabled .artdeco-button__icon:hover, .artdeco-button--tertiary.peek-carousel-controls__button:disabled .peek-carousel-controls__button-icon, .artdeco-button--tertiary.peek-carousel-controls__button:disabled .peek-carousel-controls__button-icon:active, .artdeco-button--tertiary.peek-carousel-controls__button:disabled .peek-carousel-controls__button-icon:hover, .artdeco-button.artdeco-button--tertiary:disabled .artdeco-button__icon, .artdeco-button.artdeco-button--tertiary:disabled .artdeco-button__icon:active, .artdeco-button.artdeco-button--tertiary:disabled .artdeco-button__icon:hover, .artdeco-button.artdeco-button--tertiary:disabled .peek-carousel-controls__button .peek-carousel-controls__button-icon, .artdeco-button.artdeco-button--tertiary:disabled .peek-carousel-controls__button .peek-carousel-controls__button-icon:active, .artdeco-button.artdeco-button--tertiary:disabled .peek-carousel-controls__button .peek-carousel-controls__button-icon:hover, .peek-carousel-controls__button .artdeco-button.artdeco-button--tertiary:disabled .peek-carousel-controls__button-icon, .peek-carousel-controls__button .artdeco-button.artdeco-button--tertiary:disabled .peek-carousel-controls__button-icon:active, .peek-carousel-controls__button .artdeco-button.artdeco-button--tertiary:disabled .peek-carousel-controls__button-icon:hover {
  color: var(--color-icon-disabled);
}

@media (-ms-high-contrast: active), (forced-colors: active) {
  .artdeco-button__icon, .artdeco-button__icon:active, .artdeco-button__icon:hover, .peek-carousel-controls__button .peek-carousel-controls__button-icon, .peek-carousel-controls__button .peek-carousel-controls__button-icon:active, .peek-carousel-controls__button .peek-carousel-controls__button-icon:hover {
    color: ButtonText !important;
  }
}
.peek-carousel-controls__button :not(.artdeco-button--inverse):not(.artdeco-button--premium).artdeco-button--primary .peek-carousel-controls__button-icon, :not(.artdeco-button--inverse):not(.artdeco-button--premium).artdeco-button--primary .artdeco-button__icon, :not(.artdeco-button--inverse):not(.artdeco-button--premium).artdeco-button--primary .peek-carousel-controls__button .peek-carousel-controls__button-icon {
  color: var(--color-icon-knockout);
}

.peek-carousel-controls__button :not(.artdeco-button--inverse):not(.artdeco-button--premium).artdeco-button--primary:focus .peek-carousel-controls__button-icon, .peek-carousel-controls__button :not(.artdeco-button--inverse):not(.artdeco-button--premium).artdeco-button--primary:hover .peek-carousel-controls__button-icon, :not(.artdeco-button--inverse):not(.artdeco-button--premium).artdeco-button--primary:focus .artdeco-button__icon, :not(.artdeco-button--inverse):not(.artdeco-button--premium).artdeco-button--primary:focus .peek-carousel-controls__button .peek-carousel-controls__button-icon, :not(.artdeco-button--inverse):not(.artdeco-button--premium).artdeco-button--primary:hover .artdeco-button__icon, :not(.artdeco-button--inverse):not(.artdeco-button--premium).artdeco-button--primary:hover .peek-carousel-controls__button .peek-carousel-controls__button-icon {
  color: var(--color-icon-knockout-hover);
}

.peek-carousel-controls__button :not(.artdeco-button--inverse):not(.artdeco-button--premium).artdeco-button--primary:active .peek-carousel-controls__button-icon, :not(.artdeco-button--inverse):not(.artdeco-button--premium).artdeco-button--primary:active .artdeco-button__icon, :not(.artdeco-button--inverse):not(.artdeco-button--premium).artdeco-button--primary:active .peek-carousel-controls__button .peek-carousel-controls__button-icon {
  color: var(--color-icon-knockout-active);
}

.artdeco-carousel__navigation .artdeco-button--circle:not(.artdeco-button--inverse) .artdeco-button__icon, .artdeco-carousel__navigation .artdeco-button--circle:not(.artdeco-button--inverse) .peek-carousel-controls__button .peek-carousel-controls__button-icon, .peek-carousel-controls__button .artdeco-carousel__navigation .artdeco-button--circle:not(.artdeco-button--inverse) .peek-carousel-controls__button-icon, .peek-carousel-controls__button :not(.artdeco-button--inverse).artdeco-button--secondary .peek-carousel-controls__button-icon, .peek-carousel-controls__button:not(.artdeco-button--inverse) .artdeco-button__icon, .peek-carousel-controls__button:not(.artdeco-button--inverse) .peek-carousel-controls__button-icon, :not(.artdeco-button--inverse).artdeco-button--secondary .artdeco-button__icon, :not(.artdeco-button--inverse).artdeco-button--secondary .peek-carousel-controls__button .peek-carousel-controls__button-icon {
  color: var(--color-action);
}

.artdeco-carousel__navigation .artdeco-button--circle:not(.artdeco-button--inverse):focus .artdeco-button__icon, .artdeco-carousel__navigation .artdeco-button--circle:not(.artdeco-button--inverse):focus .peek-carousel-controls__button .peek-carousel-controls__button-icon, .artdeco-carousel__navigation .artdeco-button--circle:not(.artdeco-button--inverse):hover .artdeco-button__icon, .artdeco-carousel__navigation .artdeco-button--circle:not(.artdeco-button--inverse):hover .peek-carousel-controls__button .peek-carousel-controls__button-icon, .peek-carousel-controls__button .artdeco-carousel__navigation .artdeco-button--circle:not(.artdeco-button--inverse):focus .peek-carousel-controls__button-icon, .peek-carousel-controls__button .artdeco-carousel__navigation .artdeco-button--circle:not(.artdeco-button--inverse):hover .peek-carousel-controls__button-icon, .peek-carousel-controls__button :not(.artdeco-button--inverse).artdeco-button--secondary:focus .peek-carousel-controls__button-icon, .peek-carousel-controls__button :not(.artdeco-button--inverse).artdeco-button--secondary:hover .peek-carousel-controls__button-icon, .peek-carousel-controls__button:not(.artdeco-button--inverse):focus .artdeco-button__icon, .peek-carousel-controls__button:not(.artdeco-button--inverse):focus .peek-carousel-controls__button-icon, .peek-carousel-controls__button:not(.artdeco-button--inverse):hover .artdeco-button__icon, .peek-carousel-controls__button:not(.artdeco-button--inverse):hover .peek-carousel-controls__button-icon, :not(.artdeco-button--inverse).artdeco-button--secondary:focus .artdeco-button__icon, :not(.artdeco-button--inverse).artdeco-button--secondary:focus .peek-carousel-controls__button .peek-carousel-controls__button-icon, :not(.artdeco-button--inverse).artdeco-button--secondary:hover .artdeco-button__icon, :not(.artdeco-button--inverse).artdeco-button--secondary:hover .peek-carousel-controls__button .peek-carousel-controls__button-icon {
  color: var(--color-action-hover);
}

.artdeco-carousel__navigation .artdeco-button--circle:not(.artdeco-button--inverse):active .artdeco-button__icon, .artdeco-carousel__navigation .artdeco-button--circle:not(.artdeco-button--inverse):active .peek-carousel-controls__button .peek-carousel-controls__button-icon, .peek-carousel-controls__button .artdeco-carousel__navigation .artdeco-button--circle:not(.artdeco-button--inverse):active .peek-carousel-controls__button-icon, .peek-carousel-controls__button :not(.artdeco-button--inverse).artdeco-button--secondary:active .peek-carousel-controls__button-icon, .peek-carousel-controls__button:not(.artdeco-button--inverse):active .artdeco-button__icon, .peek-carousel-controls__button:not(.artdeco-button--inverse):active .peek-carousel-controls__button-icon, :not(.artdeco-button--inverse).artdeco-button--secondary:active .artdeco-button__icon, :not(.artdeco-button--inverse).artdeco-button--secondary:active .peek-carousel-controls__button .peek-carousel-controls__button-icon {
  color: var(--color-action-active);
}

.artdeco-button--premium .artdeco-button__icon, .artdeco-button--premium .peek-carousel-controls__button .peek-carousel-controls__button-icon, .peek-carousel-controls__button .artdeco-button--premium .peek-carousel-controls__button-icon {
  color: var(--color-premium-icon);
}

.artdeco-button--premium:focus .artdeco-button__icon, .artdeco-button--premium:focus .peek-carousel-controls__button .peek-carousel-controls__button-icon, .artdeco-button--premium:hover .artdeco-button__icon, .artdeco-button--premium:hover .peek-carousel-controls__button .peek-carousel-controls__button-icon, .peek-carousel-controls__button .artdeco-button--premium:focus .peek-carousel-controls__button-icon, .peek-carousel-controls__button .artdeco-button--premium:hover .peek-carousel-controls__button-icon {
  color: var(--color-premium-icon-hover);
}

.artdeco-button--premium:active .artdeco-button__icon, .artdeco-button--premium:active .peek-carousel-controls__button .peek-carousel-controls__button-icon, .peek-carousel-controls__button .artdeco-button--premium:active .peek-carousel-controls__button-icon {
  color: var(--color-premium-icon-active);
}

.peek-carousel-controls__button :not(.artdeco-button--primary):not(.artdeco-button--tertiary:disabled).artdeco-button--muted .peek-carousel-controls__button-icon, .peek-carousel-controls__button:not(.artdeco-button--primary):not(.artdeco-button--tertiary:disabled) .artdeco-button__icon, .peek-carousel-controls__button:not(.artdeco-button--primary):not(.artdeco-button--tertiary:disabled) .peek-carousel-controls__button-icon, :not(.artdeco-button--primary):not(.artdeco-button--tertiary:disabled).artdeco-button--muted .artdeco-button__icon, :not(.artdeco-button--primary):not(.artdeco-button--tertiary:disabled).artdeco-button--muted .peek-carousel-controls__button .peek-carousel-controls__button-icon {
  color: var(--color-icon);
}

.peek-carousel-controls__button :not(.artdeco-button--primary):not(.artdeco-button--tertiary:disabled).artdeco-button--muted:focus .peek-carousel-controls__button-icon, .peek-carousel-controls__button :not(.artdeco-button--primary):not(.artdeco-button--tertiary:disabled).artdeco-button--muted:hover .peek-carousel-controls__button-icon, .peek-carousel-controls__button:not(.artdeco-button--primary):not(.artdeco-button--tertiary:disabled):focus .artdeco-button__icon, .peek-carousel-controls__button:not(.artdeco-button--primary):not(.artdeco-button--tertiary:disabled):focus .peek-carousel-controls__button-icon, .peek-carousel-controls__button:not(.artdeco-button--primary):not(.artdeco-button--tertiary:disabled):hover .artdeco-button__icon, .peek-carousel-controls__button:not(.artdeco-button--primary):not(.artdeco-button--tertiary:disabled):hover .peek-carousel-controls__button-icon, :not(.artdeco-button--primary):not(.artdeco-button--tertiary:disabled).artdeco-button--muted:focus .artdeco-button__icon, :not(.artdeco-button--primary):not(.artdeco-button--tertiary:disabled).artdeco-button--muted:focus .peek-carousel-controls__button .peek-carousel-controls__button-icon, :not(.artdeco-button--primary):not(.artdeco-button--tertiary:disabled).artdeco-button--muted:hover .artdeco-button__icon, :not(.artdeco-button--primary):not(.artdeco-button--tertiary:disabled).artdeco-button--muted:hover .peek-carousel-controls__button .peek-carousel-controls__button-icon {
  color: var(--color-icon-hover);
}

.peek-carousel-controls__button :not(.artdeco-button--primary):not(.artdeco-button--tertiary:disabled).artdeco-button--muted:active .peek-carousel-controls__button-icon, .peek-carousel-controls__button:not(.artdeco-button--primary):not(.artdeco-button--tertiary:disabled):active .artdeco-button__icon, .peek-carousel-controls__button:not(.artdeco-button--primary):not(.artdeco-button--tertiary:disabled):active .peek-carousel-controls__button-icon, :not(.artdeco-button--primary):not(.artdeco-button--tertiary:disabled).artdeco-button--muted:active .artdeco-button__icon, :not(.artdeco-button--primary):not(.artdeco-button--tertiary:disabled).artdeco-button--muted:active .peek-carousel-controls__button .peek-carousel-controls__button-icon {
  color: var(--color-icon-active);
}

.artdeco-button--disabled:disabled .artdeco-button__icon, .artdeco-button--disabled:disabled .artdeco-button__icon:active, .artdeco-button--disabled:disabled .artdeco-button__icon:hover, .artdeco-button--disabled:disabled .peek-carousel-controls__button .peek-carousel-controls__button-icon, .artdeco-button--disabled:disabled .peek-carousel-controls__button .peek-carousel-controls__button-icon:active, .artdeco-button--disabled:disabled .peek-carousel-controls__button .peek-carousel-controls__button-icon:hover, .peek-carousel-controls__button .artdeco-button--disabled:disabled .peek-carousel-controls__button-icon, .peek-carousel-controls__button .artdeco-button--disabled:disabled .peek-carousel-controls__button-icon:active, .peek-carousel-controls__button .artdeco-button--disabled:disabled .peek-carousel-controls__button-icon:hover, .peek-carousel-controls__button:disabled[disabled] .artdeco-button__icon, .peek-carousel-controls__button:disabled[disabled] .artdeco-button__icon:active, .peek-carousel-controls__button:disabled[disabled] .artdeco-button__icon:hover, .peek-carousel-controls__button:disabled[disabled] .peek-carousel-controls__button-icon, .peek-carousel-controls__button:disabled[disabled] .peek-carousel-controls__button-icon:active, .peek-carousel-controls__button:disabled[disabled] .peek-carousel-controls__button-icon:hover {
  color: var(--color-icon-disabled) !important;
}

:root {
  --artdeco-reset-typography-get-color-black-90: rgba(0,0,0,0.9);
  --artdeco-reset-typography-font-family-sans: -apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Fira Sans,Ubuntu,Oxygen,Oxygen Sans,Cantarell,Droid Sans,Apple Color Emoji,Segoe UI Emoji,Segoe UI Emoji,Segoe UI Symbol,Lucida Grande,Helvetica,Arial,sans-serif;
  --artdeco-reset-typography-font-size-65-percent: 62.5%;
  --artdeco-reset-typography-font-weight-bold: 600;
  --artdeco-reset-typography-font-weight-light: 200;
  --artdeco-reset-typography-font-weight-normal: 400;
  --artdeco-reset-typography-font-family-inherit: inherit;
  --artdeco-reset-typography-font-style-italic: italic;
  --artdeco-reset-typography-font-style-normal: normal;
  --artdeco-reset-typography-font-style-normal-important: normal important !;
  --artdeco-reset-link-text-decoration-none: none;
  --artdeco-reset-link-font-weight-bold: 600;
  --artdeco-reset-link-background-color-transparent: transparent;
  --artdeco-reset-link-border-zero: 0;
  --artdeco-reset-link-color-blue7: var(--blue-70,#0073b1);
  --artdeco-reset-link-text-decoration-underline: underline;
  --artdeco-reset-link-color-blue8: var(--blue-70,#006097);
  --artdeco-reset-link-color-blue9: var(--blue-80,#004b7c);
  --artdeco-reset-link-color-purple7: var(--purple-70,#665ed0);
  --artdeco-reset-link-color-purple8: var(--purple-70,#544bc2);
  --artdeco-reset-link-color-purple9: var(--purple-80,#4034b0);
  --artdeco-typography-mono: SF Mono,Consolas,Roboto Mono,Noto Mono,Droid Mono,Fira Mono,Ubuntu Mono,Oxygen Mono,Lucida Console,Menlo,Monaco,monospace;
  --artdeco-typography-sans: -apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Fira Sans,Ubuntu,Oxygen,Oxygen Sans,Cantarell,Droid Sans,Apple Color Emoji,Segoe UI Emoji,Segoe UI Emoji,Segoe UI Symbol,Lucida Grande,Helvetica,Arial,sans-serif;
  --artdeco-typography-serif: Noto Serif,Droid Serif,Georgia,serif;
  --artdeco-typography-ar: Geeza Pro,Arial,Calibri,Noto Nashk Arabic,Noto Sans Arabic;
  --artdeco-typography-bn: Kohinoor Bangla,Nirmala UI,Noto Sans Bengali;
  --artdeco-typography-fa: Geeza Pro,Arial,Calibri,Noto Nashk Arabic,Noto Sans Arabic;
  --artdeco-typography-he: Segoe UI,Arial Hebrew,Lucida Grande,Arial,Noto Sans Hebrew;
  --artdeco-typography-hi: Kohinoor Devanagari,Mangal,Nirmala UI,Noto Sans Devanagari;
  --artdeco-typography-ja: Meiryo,Yu Gothic,Hiragino Sans,Hiragino Kaku Gothic Pro,Noto Sans Japanese;
  --artdeco-typography-ko: Malgun Gothic,Apple SD Gothic Neo,Noto Sans Korean;
  --artdeco-typography-mr: Kohinoor Devanagari,Mangal,Nirmala UI,Noto Sans Devanagari;
  --artdeco-typography-pa: MuktaMahee Regular,Raavi,Nirmala UI,Noto Sans Gurmukhi;
  --artdeco-typography-te: Kohinoor Telugu,Nirmala UI,Noto Sans Telugu;
  --artdeco-typography-th: Leelawadee,Thonburi;
  --artdeco-typography-zh: Microsoft Yahei,PingFang SC,PingFang TC,Hiragino Sans,Hiragino Kaku Gothic Pro,Noto Sans Simplified Chinese,Noto Sans Traditional Chinese;
  --artdeco-typography-zh-cn: PingFang SC,Microsoft Yahei,Hiragino Kaku Gothic Pro,Noto Sans Simplified Chinese;
  --artdeco-typography-zh-tw: PingFang TC,Microsoft JhengHei,Noto Sans Traditional Chinese ;
}

:root, body, html {
  margin: 0;
  padding: 0;
  background-color: var(--color-background-canvas) !important;
  box-sizing: border-box;
}

/********************************************
    artdeco-card
********************************************/
.artdeco-card__header {
  /* p3 */
  padding: 1.2rem;
}
.artdeco-card__header span {
  /* t-14 t-bold */
  font-size: 1.4rem;
  line-height: 1.42857;
  font-weight: var(--artdeco-reset-typography-font-weight-bold);
  color: var(--color-text);
}

.artdeco-card__header--blue {
  /* p3 */
  padding: 1.2rem;
}
.artdeco-card__header--blue span {
  /* t-14 t-bold */
  font-size: 1.4rem;
  line-height: 1.42857;
  font-weight: var(--artdeco-reset-typography-font-weight-bold);
  color: rgb(6, 118, 230);
}

.artdeco-card__header--gray {
  /* p3 */
  padding: 1.2rem;
}
.artdeco-card__header--gray span {
  /* t-14 t-bold */
  font-size: 1.4rem;
  line-height: 1.42857;
  font-weight: var(--artdeco-reset-typography-font-weight-bold);
  color: #888;
}

/********************************************
    font
********************************************/
.t-mono {
  font-family: var(--artdeco-typography-mono);
}

.t-sans {
  font-family: var(--artdeco-typography-sans);
}

.t-serif {
  font-family: var(--artdeco-typography-serif);
}

.t-black {
  color: rgba(0, 0, 0, 0.9);
}

.t-black--light {
  color: rgba(0, 0, 0, 0.6);
}

.t-white {
  color: #fff;
}

.t-white--light {
  color: hsla(0, 0%, 100%, 0.7);
}

.t-bold {
  font-weight: var(--artdeco-reset-typography-font-weight-bold);
}

.t-light {
  font-weight: var(--artdeco-reset-typography-font-weight-light);
}

.t-normal {
  font-weight: var(--artdeco-reset-typography-font-weight-normal);
}

.t-italic {
  font-style: var(--artdeco-reset-typography-font-style-italic);
}

.t-roman {
  font-style: var(--artdeco-reset-typography-font-style-normal);
}

.t-10 {
  font-size: 1rem;
  line-height: 1.2425;
}

.t-12 {
  font-size: 1.2rem;
  line-height: 1.33333;
}

.t-14 {
  font-size: 1.4rem;
  line-height: 1.42857;
}

.t-16 {
  font-size: 1.6rem;
  line-height: 1.5;
}

.t-16.t-16--open {
  line-height: 1.75;
}

.t-18 {
  font-size: 1.8rem;
  line-height: 1.33333;
}

.t-18.t-18--open {
  line-height: 1.55556;
}

.t-20 {
  font-size: 2rem;
  line-height: 1.4;
}

.t-20.t-20--open {
  line-height: 1.6;
}

.t-24 {
  font-size: 2.4rem;
}

.t-24 {
  line-height: 1.33333;
}

.t-32 {
  font-size: 3.2rem;
}

.t-32 {
  line-height: 1.25;
}

.t-40 {
  font-size: 4rem;
}

.t-40 {
  line-height: 1.2;
}

.t-48 {
  font-size: 4.8rem;
}

.t-48 {
  line-height: 1.16667;
}

.t-64 {
  font-size: 6.4rem;
}

.t-64 {
  line-height: 1.125;
}

.t-black {
  color: var(--color-text);
}

.t-black--light {
  color: var(--color-text-low-emphasis);
}

.t-white {
  color: var(--color-text-on-dark);
}

.t-white--light {
  color: var(--color-text-low-emphasis-on-dark);
}

/********************************************
    margin, padding, border
********************************************/
.m0 {
  margin: 0 !important;
}

.mh0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.mv0 {
  margin-bottom: 0 !important;
}

.mt0, .mv0 {
  margin-top: 0 !important;
}

.mb0 {
  margin-bottom: 0 !important;
}

.ml0 {
  margin-left: 0 !important;
}

.mr0 {
  margin-right: 0 !important;
}

.m1 {
  margin: 0.4rem !important;
}

.mh1 {
  margin-left: 0.4rem !important;
  margin-right: 0.4rem !important;
}

.mv1 {
  margin-bottom: 0.4rem !important;
}

.mt1, .mv1 {
  margin-top: 0.4rem !important;
}

.mb1 {
  margin-bottom: 0.4rem !important;
}

.ml1 {
  margin-left: 0.4rem !important;
}

.mr1 {
  margin-right: 0.4rem !important;
}

.m2 {
  margin: 0.8rem !important;
}

.mh2 {
  margin-left: 0.8rem !important;
  margin-right: 0.8rem !important;
}

.mv2 {
  margin-bottom: 0.8rem !important;
}

.mt2, .mv2 {
  margin-top: 0.8rem !important;
}

.mb2 {
  margin-bottom: 0.8rem !important;
}

.ml2 {
  margin-left: 0.8rem !important;
}

.mr2 {
  margin-right: 0.8rem !important;
}

.m3 {
  margin: 1.2rem !important;
}

.mh3 {
  margin-left: 1.2rem !important;
  margin-right: 1.2rem !important;
}

.mv3 {
  margin-bottom: 1.2rem !important;
}

.mt3, .mv3 {
  margin-top: 1.2rem !important;
}

.mb3 {
  margin-bottom: 1.2rem !important;
}

.ml3 {
  margin-left: 1.2rem !important;
}

.mr3 {
  margin-right: 1.2rem !important;
}

.m4 {
  margin: 1.6rem !important;
}

.mh4 {
  margin-left: 1.6rem !important;
  margin-right: 1.6rem !important;
}

.mv4 {
  margin-bottom: 1.6rem !important;
}

.mt4, .mv4 {
  margin-top: 1.6rem !important;
}

.mb4 {
  margin-bottom: 1.6rem !important;
}

.ml4 {
  margin-left: 1.6rem !important;
}

.mr4 {
  margin-right: 1.6rem !important;
}

.m5 {
  margin: 2.4rem !important;
}

.mh5 {
  margin-left: 2.4rem !important;
  margin-right: 2.4rem !important;
}

.mv5 {
  margin-bottom: 2.4rem !important;
}

.mt5, .mv5 {
  margin-top: 2.4rem !important;
}

.mb5 {
  margin-bottom: 2.4rem !important;
}

.ml5 {
  margin-left: 2.4rem !important;
}

.mr5 {
  margin-right: 2.4rem !important;
}

.m6 {
  margin: 3.2rem !important;
}

.mh6 {
  margin-left: 3.2rem !important;
  margin-right: 3.2rem !important;
}

.mv6 {
  margin-bottom: 3.2rem !important;
}

.mt6, .mv6 {
  margin-top: 3.2rem !important;
}

.mb6 {
  margin-bottom: 3.2rem !important;
}

.ml6 {
  margin-left: 3.2rem !important;
}

.mr6 {
  margin-right: 3.2rem !important;
}

.m7 {
  margin: 4.8rem !important;
}

.mh7 {
  margin-left: 4.8rem !important;
  margin-right: 4.8rem !important;
}

.mv7 {
  margin-bottom: 4.8rem !important;
}

.mt7, .mv7 {
  margin-top: 4.8rem !important;
}

.mb7 {
  margin-bottom: 4.8rem !important;
}

.ml7 {
  margin-left: 4.8rem !important;
}

.mr7 {
  margin-right: 4.8rem !important;
}

.m8 {
  margin: 6.4rem !important;
}

.mh8 {
  margin-left: 6.4rem !important;
  margin-right: 6.4rem !important;
}

.mv8 {
  margin-bottom: 6.4rem !important;
}

.mt8, .mv8 {
  margin-top: 6.4rem !important;
}

.mb8 {
  margin-bottom: 6.4rem !important;
}

.ml8 {
  margin-left: 6.4rem !important;
}

.mr8 {
  margin-right: 6.4rem !important;
}

.m9 {
  margin: 9.6rem !important;
}

.mh9 {
  margin-left: 9.6rem !important;
  margin-right: 9.6rem !important;
}

.mv9 {
  margin-bottom: 9.6rem !important;
}

.mt9, .mv9 {
  margin-top: 9.6rem !important;
}

.mb9 {
  margin-bottom: 9.6rem !important;
}

.ml9 {
  margin-left: 9.6rem !important;
}

.mr9 {
  margin-right: 9.6rem !important;
}

.mtA, .mvA {
  margin-top: auto !important;
}

.mhA, .mrA {
  margin-right: auto !important;
}

.mbA, .mvA {
  margin-bottom: auto !important;
}

.mhA, .mlA {
  margin-left: auto !important;
}

.p0 {
  padding: 0 !important;
}

.ph0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.pv0 {
  padding-bottom: 0 !important;
}

.pt0, .pv0 {
  padding-top: 0 !important;
}

.pb0 {
  padding-bottom: 0 !important;
}

.pl0 {
  padding-left: 0 !important;
}

.pr0 {
  padding-right: 0 !important;
}

.p1 {
  padding: 0.4rem !important;
}

.ph1 {
  padding-left: 0.4rem !important;
  padding-right: 0.4rem !important;
}

.pv1 {
  padding-bottom: 0.4rem !important;
}

.pt1, .pv1 {
  padding-top: 0.4rem !important;
}

.pb1 {
  padding-bottom: 0.4rem !important;
}

.pl1 {
  padding-left: 0.4rem !important;
}

.pr1 {
  padding-right: 0.4rem !important;
}

.p2 {
  padding: 0.8rem !important;
}

.ph2 {
  padding-left: 0.8rem !important;
  padding-right: 0.8rem !important;
}

.pv2 {
  padding-bottom: 0.8rem !important;
}

.pt2, .pv2 {
  padding-top: 0.8rem !important;
}

.pb2 {
  padding-bottom: 0.8rem !important;
}

.pl2 {
  padding-left: 0.8rem !important;
}

.pr2 {
  padding-right: 0.8rem !important;
}

.p3 {
  padding: 1.2rem !important;
}

.ph3 {
  padding-left: 1.2rem !important;
  padding-right: 1.2rem !important;
}

.pv3 {
  padding-bottom: 1.2rem !important;
}

.pt3, .pv3 {
  padding-top: 1.2rem !important;
}

.pb3 {
  padding-bottom: 1.2rem !important;
}

.pl3 {
  padding-left: 1.2rem !important;
}

.pr3 {
  padding-right: 1.2rem !important;
}

.p4 {
  padding: 1.6rem !important;
}

.ph4 {
  padding-left: 1.6rem !important;
  padding-right: 1.6rem !important;
}

.pv4 {
  padding-bottom: 1.6rem !important;
}

.pt4, .pv4 {
  padding-top: 1.6rem !important;
}

.pb4 {
  padding-bottom: 1.6rem !important;
}

.pl4 {
  padding-left: 1.6rem !important;
}

.pr4 {
  padding-right: 1.6rem !important;
}

.p5 {
  padding: 2.4rem !important;
}

.ph5 {
  padding-left: 2.4rem !important;
  padding-right: 2.4rem !important;
}

.pv5 {
  padding-bottom: 2.4rem !important;
}

.pt5, .pv5 {
  padding-top: 2.4rem !important;
}

.pb5 {
  padding-bottom: 2.4rem !important;
}

.pl5 {
  padding-left: 2.4rem !important;
}

.pr5 {
  padding-right: 2.4rem !important;
}

.p6 {
  padding: 3.2rem !important;
}

.ph6 {
  padding-left: 3.2rem !important;
  padding-right: 3.2rem !important;
}

.pv6 {
  padding-bottom: 3.2rem !important;
}

.pt6, .pv6 {
  padding-top: 3.2rem !important;
}

.pb6 {
  padding-bottom: 3.2rem !important;
}

.pl6 {
  padding-left: 3.2rem !important;
}

.pr6 {
  padding-right: 3.2rem !important;
}

.p7 {
  padding: 4.8rem !important;
}

.ph7 {
  padding-left: 4.8rem !important;
  padding-right: 4.8rem !important;
}

.pv7 {
  padding-bottom: 4.8rem !important;
}

.pt7, .pv7 {
  padding-top: 4.8rem !important;
}

.pb7 {
  padding-bottom: 4.8rem !important;
}

.pl7 {
  padding-left: 4.8rem !important;
}

.pr7 {
  padding-right: 4.8rem !important;
}

.p8 {
  padding: 6.4rem !important;
}

.ph8 {
  padding-left: 6.4rem !important;
  padding-right: 6.4rem !important;
}

.pv8 {
  padding-bottom: 6.4rem !important;
}

.pt8, .pv8 {
  padding-top: 6.4rem !important;
}

.pb8 {
  padding-bottom: 6.4rem !important;
}

.pl8 {
  padding-left: 6.4rem !important;
}

.pr8 {
  padding-right: 6.4rem !important;
}

.p9 {
  padding: 9.6rem !important;
}

.ph9 {
  padding-left: 9.6rem !important;
  padding-right: 9.6rem !important;
}

.pv9 {
  padding-bottom: 9.6rem !important;
}

.pt9, .pv9 {
  padding-top: 9.6rem !important;
}

.pb9 {
  padding-bottom: 9.6rem !important;
}

.pl9 {
  padding-left: 9.6rem !important;
}

.pr9 {
  padding-right: 9.6rem !important;
}

.b0 {
  border: 0 !important;
}

.bt0, .bv0 {
  border-top: 0 !important;
}

.bh0, .br0 {
  border-right: 0 !important;
}

.bb0, .bv0 {
  border-bottom: 0 !important;
}

.bh0, .bl0 {
  border-left: 0 !important;
}

.square {
  border-radius: 0 !important;
}

.round {
  border-radius: 50% !important;
}

/********************************************
    display, position
********************************************/
.display-block {
  display: block !important;
}

.display-flex {
  display: flex !important;
}

.display-inline-flex {
  display: inline-flex !important;
}

.display-inline {
  display: inline !important;
}

.display-inline-block {
  display: inline-block !important;
}

.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.position-fixed {
  position: fixed !important;
}

.center-both {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.position-right {
  right: 0 !important;
  left: auto !important;
}

.fl {
  float: left !important;
}

.fr {
  float: right !important;
}

.v-align-top {
  vertical-align: top !important;
}

.v-align-middle {
  vertical-align: middle !important;
}

.v-align-bottom {
  vertical-align: bottom !important;
}

.v-align-text-bottom {
  vertical-align: text-bottom !important;
}

.v-align-sub {
  vertical-align: sub !important;
}

/********************************************
    flex
********************************************/
.align-self-center {
  align-self: center !important;
}

.align-self-flex-start {
  align-self: flex-start !important;
}

.align-self-flex-end {
  align-self: flex-end !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-flex-start {
  align-items: flex-start !important;
}

.align-items-flex-end {
  align-items: flex-end !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

.flex-1 {
  flex: 1 !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-column-reverse {
  flex-direction: column-reverse !important;
}

.flex-row {
  flex-direction: row !important;
}

.flex-none {
  flex: none !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-wrap-nowrap {
  flex-wrap: nowrap !important;
}

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

.flex-shrink-zero {
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  flex-shrink: 1 !important;
}

.flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.justify-center {
  justify-content: center !important;
}

.justify-flex-start {
  justify-content: flex-start !important;
}

.justify-flex-end {
  justify-content: flex-end !important;
}

.justify-space-between {
  justify-content: space-between !important;
}

.justify-space-evenly {
  justify-content: space-evenly !important;
}

.justify-space-around {
  justify-content: space-around !important;
}

/********************************************
    width, height
********************************************/
.full-width {
  width: 100% !important;
}

.fit-content-width {
  width: -moz-fit-content !important;
  width: fit-content !important;
}

.max-full-width {
  max-width: 100% !important;
}

.full-height {
  height: 100% !important;
}

/********************************************
   overflow 
********************************************/
.overflow-auto {
  overflow: auto !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.overflow-x-auto {
  overflow-x: auto !important;
}

.overflow-x-hidden {
  overflow-x: hidden !important;
}

.overflow-scroll {
  overflow: scroll !important;
}

.overflow-visible {
  overflow: visible !important;
}

/********************************************

********************************************/
/********************************************

********************************************/
/********************************************

********************************************/
/********************************************

********************************************/
/********************************************
    svg
********************************************/
svg[data-supported-dps="12x12"] {
  width: 1.2rem;
  height: 1.2rem;
}

svg[data-supported-dps="14x14"] {
  width: 1.4rem;
  height: 1.4rem;
}

svg[data-supported-dps="16x16"] {
  width: 1.6rem;
  height: 1.6rem;
}

svg[data-supported-dps="21x21"] {
  width: 2.1rem;
  height: 2.1rem;
}

svg[data-supported-dps="26x26"] {
  width: 2.6rem;
  height: 2.6rem;
}

svg[data-supported-dps="24x24"] {
  width: 2.4rem;
  height: 2.4rem;
}

svg[data-supported-dps="32x32"] {
  width: 3.2rem;
  height: 3.2rem;
}

svg[data-supported-dps="34x34"] {
  width: 3.4rem;
  height: 3.4rem;
}

svg[data-supported-dps="40x40"] {
  width: 4rem;
  height: 4rem;
}

svg[data-supported-dps="48x48"] {
  width: 4.8rem;
  height: 4.8rem;
}

svg[data-supported-dps="64x64"] {
  width: 6.4rem;
  height: 6.4rem;
}

svg[data-supported-dps="72x72"] {
  width: 7.2rem;
  height: 7.2rem;
}

svg[data-supported-dps="128x128"] {
  width: 12.8rem;
  height: 12.8rem;
}

svg[data-supported-dps="256x256"] {
  width: 25.6rem;
  height: 25.6rem;
}

svg[data-supported-dps="159x40"] {
  width: 15.9rem;
  height: 4rem;
}

svg[data-supported-dps="135x34"] {
  width: 13.5rem;
  height: 3.4rem;
}

svg[data-supported-dps="102x26"] {
  width: 10.2rem;
  height: 2.6rem;
}

svg[data-supported-dps="190x48"] {
  width: 19rem;
  height: 4.8rem;
}

svg[data-supported-dps="84x21"] {
  width: 8.4rem;
  height: 2.1rem;
}

svg[data-supported-dps="56x14"] {
  width: 5.6rem;
  height: 1.4rem;
}

svg[data-supported-dps="78x8"] {
  width: 7.8rem;
  height: 0.8rem;
}

svg[data-supported-dps="98x10"] {
  width: 9.8rem;
  height: 1rem;
}

svg[data-supported-dps="117x12"] {
  width: 11.7rem;
  height: 1.2rem;
}

svg[data-supported-dps="156x16"] {
  width: 15.6rem;
  height: 1.6rem;
}

svg[data-supported-dps="195x20"] {
  width: 19.5rem;
  height: 2rem;
}

svg[data-supported-dps="234x24"] {
  width: 23.4rem;
  height: 2.4rem;
}

svg[data-supported-dps="312x32"] {
  width: 31.2rem;
  height: 3.2rem;
}

svg[data-supported-dps="64x8"] {
  width: 6.4rem;
  height: 0.8rem;
}

svg[data-supported-dps="80x10"] {
  width: 8rem;
  height: 1rem;
}

svg[data-supported-dps="96x12"] {
  width: 9.6rem;
  height: 1.2rem;
}

svg[data-supported-dps="128x16"] {
  width: 12.8rem;
  height: 1.6rem;
}

svg[data-supported-dps="160x20"] {
  width: 16rem;
  height: 2rem;
}

svg[data-supported-dps="192x24"] {
  width: 19.2rem;
  height: 2.4rem;
}

svg[data-supported-dps="256x32"] {
  width: 25.6rem;
  height: 3.2rem;
}

svg[data-supported-dps="288x96"] {
  width: 28.8rem;
  height: 9.6rem;
}

/********************************************
    misc
********************************************/
.clear-both {
  clear: both !important;
}

.clearfix:after, .clearfix:before {
  content: "" !important;
  display: table !important;
}

.clearfix:after {
  clear: both !important;
}

.white-space-nowrap {
  white-space: nowrap !important;
}

.white-space-pre-wrap {
  white-space: pre-wrap !important;
}

.white-space-pre-line {
  white-space: pre-line !important;
}

.white-space-pre {
  white-space: pre !important;
}

.visibility-hidden {
  visibility: hidden !important;
}

.text-align-center {
  text-align: center !important;
}

.text-align-right {
  text-align: right !important;
}

.text-align-left {
  text-align: left !important;
}

.text-align-start {
  text-align: start !important;
}

.truncate {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.visually-hidden {
  display: block !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

.visually-hidden.focusable:active, .visually-hidden.focusable:focus {
  clip: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  position: static !important;
  width: auto !important;
}

.hidden {
  display: none !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

.cursor-text {
  cursor: text !important;
}

.ghosted {
  opacity: 0.3 !important;
}

.break-words {
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
}

/*# sourceMappingURL=styles.css.map */