._4bd5201c86a2042b-defaultColor {
color: var(--text-default);
}
._4bd5201c86a2042b-lineClamp1 {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._4bd5201c86a2042b-lineClamp2Plus {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
._4bd5201c86a2042b-selectable {
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
}
._4bd5201c86a2042b-tabularNumbers {
font-variant-numeric: tabular-nums;
}
.cf48127484dbde85-heading-sm\/normal {
font-family: var(--font-display);
font-size: 14px;
font-weight: 400;
line-height: 1.2857142857142858;
}
.cf48127484dbde85-heading-sm\/normal.cf48127484dbde85-fontScaling {
font-size: 0.875rem;
}
.cf48127484dbde85-heading-sm\/medium {
font-family: var(--font-display);
font-size: 14px;
font-weight: 500;
line-height: 1.2857142857142858;
}
.cf48127484dbde85-heading-sm\/medium.cf48127484dbde85-fontScaling {
font-size: 0.875rem;
}
.cf48127484dbde85-heading-sm\/semibold {
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
line-height: 1.2857142857142858;
}
.cf48127484dbde85-heading-sm\/semibold.cf48127484dbde85-fontScaling {
font-size: 0.875rem;
}
.cf48127484dbde85-heading-sm\/bold {
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
line-height: 1.2857142857142858;
}
.cf48127484dbde85-heading-sm\/bold.cf48127484dbde85-fontScaling {
font-size: 0.875rem;
}
.cf48127484dbde85-heading-sm\/extrabold {
font-family: var(--font-display);
font-size: 14px;
font-weight: 800;
line-height: 1.2857142857142858;
}
.cf48127484dbde85-heading-sm\/extrabold.cf48127484dbde85-fontScaling {
font-size: 0.875rem;
}
.cf48127484dbde85-heading-md\/normal {
font-family: var(--font-display);
font-size: 16px;
font-weight: 400;
line-height: 1.25;
}
.cf48127484dbde85-heading-md\/normal.cf48127484dbde85-fontScaling {
font-size: 1rem;
}
.cf48127484dbde85-heading-md\/medium {
font-family: var(--font-display);
font-size: 16px;
font-weight: 500;
line-height: 1.25;
}
.cf48127484dbde85-heading-md\/medium.cf48127484dbde85-fontScaling {
font-size: 1rem;
}
.cf48127484dbde85-heading-md\/semibold {
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
line-height: 1.25;
}
.cf48127484dbde85-heading-md\/semibold.cf48127484dbde85-fontScaling {
font-size: 1rem;
}
.cf48127484dbde85-heading-md\/bold {
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
line-height: 1.25;
}
.cf48127484dbde85-heading-md\/bold.cf48127484dbde85-fontScaling {
font-size: 1rem;
}
.cf48127484dbde85-heading-md\/extrabold {
font-family: var(--font-display);
font-size: 16px;
font-weight: 800;
line-height: 1.25;
}
.cf48127484dbde85-heading-md\/extrabold.cf48127484dbde85-fontScaling {
font-size: 1rem;
}
.cf48127484dbde85-heading-lg\/normal {
font-family: var(--font-display);
font-size: 20px;
font-weight: 400;
line-height: 1.2;
}
.cf48127484dbde85-heading-lg\/normal.cf48127484dbde85-fontScaling {
font-size: 1.25rem;
}
.cf48127484dbde85-heading-lg\/medium {
font-family: var(--font-display);
font-size: 20px;
font-weight: 500;
line-height: 1.2;
}
.cf48127484dbde85-heading-lg\/medium.cf48127484dbde85-fontScaling {
font-size: 1.25rem;
}
.cf48127484dbde85-heading-lg\/semibold {
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
line-height: 1.2;
}
.cf48127484dbde85-heading-lg\/semibold.cf48127484dbde85-fontScaling {
font-size: 1.25rem;
}
.cf48127484dbde85-heading-lg\/bold {
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
line-height: 1.2;
}
.cf48127484dbde85-heading-lg\/bold.cf48127484dbde85-fontScaling {
font-size: 1.25rem;
}
.cf48127484dbde85-heading-lg\/extrabold {
font-family: var(--font-display);
font-size: 20px;
font-weight: 800;
line-height: 1.2;
}
.cf48127484dbde85-heading-lg\/extrabold.cf48127484dbde85-fontScaling {
font-size: 1.25rem;
}
.cf48127484dbde85-heading-xl\/normal {
font-family: var(--font-display);
font-size: 24px;
font-weight: 400;
line-height: 1.25;
}
.cf48127484dbde85-heading-xl\/normal.cf48127484dbde85-fontScaling {
font-size: 1.5rem;
}
.cf48127484dbde85-heading-xl\/medium {
font-family: var(--font-display);
font-size: 24px;
font-weight: 500;
line-height: 1.25;
}
.cf48127484dbde85-heading-xl\/medium.cf48127484dbde85-fontScaling {
font-size: 1.5rem;
}
.cf48127484dbde85-heading-xl\/semibold {
font-family: var(--font-display);
font-size: 24px;
font-weight: 600;
line-height: 1.25;
}
.cf48127484dbde85-heading-xl\/semibold.cf48127484dbde85-fontScaling {
font-size: 1.5rem;
}
.cf48127484dbde85-heading-xl\/bold {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
line-height: 1.25;
}
.cf48127484dbde85-heading-xl\/bold.cf48127484dbde85-fontScaling {
font-size: 1.5rem;
}
.cf48127484dbde85-heading-xl\/extrabold {
font-family: var(--font-display);
font-size: 24px;
font-weight: 800;
line-height: 1.25;
}
.cf48127484dbde85-heading-xl\/extrabold.cf48127484dbde85-fontScaling {
font-size: 1.5rem;
}
.cf48127484dbde85-heading-xxl\/normal {
font-family: var(--font-display);
font-size: 32px;
font-weight: 400;
line-height: 1.25;
}
.cf48127484dbde85-heading-xxl\/normal.cf48127484dbde85-fontScaling {
font-size: 2rem;
}
.cf48127484dbde85-heading-xxl\/medium {
font-family: var(--font-display);
font-size: 32px;
font-weight: 500;
line-height: 1.25;
}
.cf48127484dbde85-heading-xxl\/medium.cf48127484dbde85-fontScaling {
font-size: 2rem;
}
.cf48127484dbde85-heading-xxl\/semibold {
font-family: var(--font-display);
font-size: 32px;
font-weight: 600;
line-height: 1.25;
}
.cf48127484dbde85-heading-xxl\/semibold.cf48127484dbde85-fontScaling {
font-size: 2rem;
}
.cf48127484dbde85-heading-xxl\/bold {
font-family: var(--font-display);
font-size: 32px;
font-weight: 700;
line-height: 1.25;
}
.cf48127484dbde85-heading-xxl\/bold.cf48127484dbde85-fontScaling {
font-size: 2rem;
}
.cf48127484dbde85-heading-xxl\/extrabold {
font-family: var(--font-display);
font-size: 32px;
font-weight: 800;
line-height: 1.25;
}
.cf48127484dbde85-heading-xxl\/extrabold.cf48127484dbde85-fontScaling {
font-size: 2rem;
}
.cf48127484dbde85-eyebrow {
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.3333333333333333;
text-transform: uppercase;
}
.cf48127484dbde85-eyebrow.cf48127484dbde85-fontScaling {
font-size: 0.75rem;
}
.cf48127484dbde85-heading-deprecated-12\/normal {
font-family: var(--font-display);
font-size: 12px;
font-weight: 400;
line-height: 1.3333333333333333;
}
.cf48127484dbde85-heading-deprecated-12\/normal.cf48127484dbde85-fontScaling {
font-size: 0.75rem;
}
.cf48127484dbde85-heading-deprecated-12\/medium {
font-family: var(--font-display);
font-size: 12px;
font-weight: 500;
line-height: 1.3333333333333333;
}
.cf48127484dbde85-heading-deprecated-12\/medium.cf48127484dbde85-fontScaling {
font-size: 0.75rem;
}
.cf48127484dbde85-heading-deprecated-12\/semibold {
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
line-height: 1.3333333333333333;
}
.cf48127484dbde85-heading-deprecated-12\/semibold.cf48127484dbde85-fontScaling {
font-size: 0.75rem;
}
.cf48127484dbde85-heading-deprecated-12\/bold {
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
line-height: 1.3333333333333333;
}
.cf48127484dbde85-heading-deprecated-12\/bold.cf48127484dbde85-fontScaling {
font-size: 0.75rem;
}
.cf48127484dbde85-heading-deprecated-12\/extrabold {
font-family: var(--font-display);
font-size: 12px;
font-weight: 800;
line-height: 1.3333333333333333;
}
.cf48127484dbde85-heading-deprecated-12\/extrabold.cf48127484dbde85-fontScaling {
font-size: 0.75rem;
}
.cf48127484dbde85-redesign\/heading-18\/bold {
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
line-height: 1.3333333333333333;
}
.cf48127484dbde85-redesign\/heading-18\/bold.cf48127484dbde85-fontScaling {
font-size: 1.125rem;
}
.cf48127484dbde85-text-xxs\/normal {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 400;
line-height: 1.2;
}
.cf48127484dbde85-text-xxs\/normal.cf48127484dbde85-fontScaling {
font-size: 0.625rem;
}
.cf48127484dbde85-text-xxs\/medium {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 500;
line-height: 1.2;
}
.cf48127484dbde85-text-xxs\/medium.cf48127484dbde85-fontScaling {
font-size: 0.625rem;
}
.cf48127484dbde85-text-xxs\/semibold {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 600;
line-height: 1.2;
}
.cf48127484dbde85-text-xxs\/semibold.cf48127484dbde85-fontScaling {
font-size: 0.625rem;
}
.cf48127484dbde85-text-xxs\/bold {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 700;
line-height: 1.2;
}
.cf48127484dbde85-text-xxs\/bold.cf48127484dbde85-fontScaling {
font-size: 0.625rem;
}
.cf48127484dbde85-text-xs\/normal {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 400;
line-height: 1.3333333333333333;
}
.cf48127484dbde85-text-xs\/normal.cf48127484dbde85-fontScaling {
font-size: 0.75rem;
}
.cf48127484dbde85-text-xs\/medium {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 500;
line-height: 1.3333333333333333;
}
.cf48127484dbde85-text-xs\/medium.cf48127484dbde85-fontScaling {
font-size: 0.75rem;
}
.cf48127484dbde85-text-xs\/semibold {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 600;
line-height: 1.3333333333333333;
}
.cf48127484dbde85-text-xs\/semibold.cf48127484dbde85-fontScaling {
font-size: 0.75rem;
}
.cf48127484dbde85-text-xs\/bold {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 700;
line-height: 1.3333333333333333;
}
.cf48127484dbde85-text-xs\/bold.cf48127484dbde85-fontScaling {
font-size: 0.75rem;
}
.cf48127484dbde85-text-sm\/normal {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 400;
line-height: 1.2857142857142858;
}
.cf48127484dbde85-text-sm\/normal.cf48127484dbde85-fontScaling {
font-size: 0.875rem;
}
.cf48127484dbde85-text-sm\/medium {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 500;
line-height: 1.2857142857142858;
}
.cf48127484dbde85-text-sm\/medium.cf48127484dbde85-fontScaling {
font-size: 0.875rem;
}
.cf48127484dbde85-text-sm\/semibold {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 600;
line-height: 1.2857142857142858;
}
.cf48127484dbde85-text-sm\/semibold.cf48127484dbde85-fontScaling {
font-size: 0.875rem;
}
.cf48127484dbde85-text-sm\/bold {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 700;
line-height: 1.2857142857142858;
}
.cf48127484dbde85-text-sm\/bold.cf48127484dbde85-fontScaling {
font-size: 0.875rem;
}
.cf48127484dbde85-text-md\/normal {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 400;
line-height: 1.25;
}
.cf48127484dbde85-text-md\/normal.cf48127484dbde85-fontScaling {
font-size: 1rem;
}
.cf48127484dbde85-text-md\/medium {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 500;
line-height: 1.25;
}
.cf48127484dbde85-text-md\/medium.cf48127484dbde85-fontScaling {
font-size: 1rem;
}
.cf48127484dbde85-text-md\/semibold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 600;
line-height: 1.25;
}
.cf48127484dbde85-text-md\/semibold.cf48127484dbde85-fontScaling {
font-size: 1rem;
}
.cf48127484dbde85-text-md\/bold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 700;
line-height: 1.25;
}
.cf48127484dbde85-text-md\/bold.cf48127484dbde85-fontScaling {
font-size: 1rem;
}
.cf48127484dbde85-text-lg\/normal {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 400;
line-height: 1.2;
}
.cf48127484dbde85-text-lg\/normal.cf48127484dbde85-fontScaling {
font-size: 1.25rem;
}
.cf48127484dbde85-text-lg\/medium {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 500;
line-height: 1.2;
}
.cf48127484dbde85-text-lg\/medium.cf48127484dbde85-fontScaling {
font-size: 1.25rem;
}
.cf48127484dbde85-text-lg\/semibold {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 600;
line-height: 1.2;
}
.cf48127484dbde85-text-lg\/semibold.cf48127484dbde85-fontScaling {
font-size: 1.25rem;
}
.cf48127484dbde85-text-lg\/bold {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 700;
line-height: 1.2;
}
.cf48127484dbde85-text-lg\/bold.cf48127484dbde85-fontScaling {
font-size: 1.25rem;
}
.cf48127484dbde85-redesign\/message-preview\/normal {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 400;
line-height: 1.3333333333333333;
}
.cf48127484dbde85-redesign\/message-preview\/normal.cf48127484dbde85-fontScaling {
font-size: 0.9375rem;
}
.cf48127484dbde85-redesign\/message-preview\/medium {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 500;
line-height: 1.3333333333333333;
}
.cf48127484dbde85-redesign\/message-preview\/medium.cf48127484dbde85-fontScaling {
font-size: 0.9375rem;
}
.cf48127484dbde85-redesign\/message-preview\/semibold {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 600;
line-height: 1.3333333333333333;
}
.cf48127484dbde85-redesign\/message-preview\/semibold.cf48127484dbde85-fontScaling {
font-size: 0.9375rem;
}
.cf48127484dbde85-redesign\/message-preview\/bold {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 700;
line-height: 1.3333333333333333;
}
.cf48127484dbde85-redesign\/message-preview\/bold.cf48127484dbde85-fontScaling {
font-size: 0.9375rem;
}
.cf48127484dbde85-redesign\/channel-title\/normal {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 400;
line-height: 1.375;
}
.cf48127484dbde85-redesign\/channel-title\/normal.cf48127484dbde85-fontScaling {
font-size: 1rem;
}
.cf48127484dbde85-redesign\/channel-title\/medium {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 500;
line-height: 1.375;
}
.cf48127484dbde85-redesign\/channel-title\/medium.cf48127484dbde85-fontScaling {
font-size: 1rem;
}
.cf48127484dbde85-redesign\/channel-title\/semibold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 600;
line-height: 1.375;
}
.cf48127484dbde85-redesign\/channel-title\/semibold.cf48127484dbde85-fontScaling {
font-size: 1rem;
}
.cf48127484dbde85-redesign\/channel-title\/bold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 700;
line-height: 1.375;
}
.cf48127484dbde85-redesign\/channel-title\/bold.cf48127484dbde85-fontScaling {
font-size: 1rem;
}
.cf48127484dbde85-display-sm {
font-family: var(--font-headline);
font-size: 20px;
font-weight: 800;
line-height: 1;
}
.cf48127484dbde85-display-sm.cf48127484dbde85-fontScaling {
font-size: 1.25rem;
}
.cf48127484dbde85-display-md {
font-family: var(--font-headline);
font-size: 34px;
font-weight: 800;
line-height: 1.0588235294117647;
}
.cf48127484dbde85-display-md.cf48127484dbde85-fontScaling {
font-size: 2.125rem;
}
.cf48127484dbde85-display-lg {
font-family: var(--font-headline);
font-size: 44px;
font-weight: 800;
line-height: 0.9545454545454546;
}
.cf48127484dbde85-display-lg.cf48127484dbde85-fontScaling {
font-size: 2.75rem;
}
.cf48127484dbde85-code {
font-family: var(--font-code);
font-size: 12px;
font-weight: 700;
line-height: 1.3333333333333333;
}
.cf48127484dbde85-code.cf48127484dbde85-fontScaling {
font-size: 0.75rem;
}
._5345c24c6249bc5b-defaultColor {
color: var(--text-strong);
}
:root {
--expand-structural-duration: 100ms;
--expand-fade-duration: 200ms;
--expand-easing-function: ease-out;
--collapse-structural-duration: 150ms;
--collapse-fade-duration: 150ms;
--collapse-easing-function: ease-in;
}
._358591fa30baeebc-container {
border-radius: var(--radius-sm);
box-sizing: border-box;
display: grid;
font-weight: 500;
grid-template-rows: 1fr;
padding: 8px;
transition-duration: var(--expand-structural-duration);
transition-property: grid-template-rows, padding-bottom, padding-top, border-width;
transition-timing-function: var(--expand-easing-function);
width: 100%;
}
._358591fa30baeebc-container._358591fa30baeebc-hidden {
border-width: 0;
grid-template-rows: 0fr;
padding-bottom: 0;
padding-top: 0;
transition-delay: var(--collapse-fade-duration);
transition-duration: var(--collapse-structural-duration);
transition-property: grid-template-rows, padding-bottom, padding-top, border-width;
transition-timing-function: var(--collapse-easing-function);
}
._358591fa30baeebc-innerContainer {
display: flex;
min-height: 0;
opacity: 1;
overflow: hidden;
transition-delay: var(--expand-structural-duration);
transition-duration: var(--expand-fade-duration);
transition-property: opacity;
transition-timing-function: var(--expand-easing-function);
}
._358591fa30baeebc-container._358591fa30baeebc-hidden ._358591fa30baeebc-innerContainer {
opacity: 0;
transition-delay: 0s;
transition-duration: var(--collapse-fade-duration);
transition-property: opacity;
transition-timing-function: var(--collapse-easing-function);
}
._358591fa30baeebc-icon {
flex-shrink: 0;
height: 20px;
width: 20px;
}
._358591fa30baeebc-iconDiv {
display: flex;
}
._358591fa30baeebc-text {
align-self: center;
flex: 1;
margin-left: var(--space-8);
}
._358591fa30baeebc-text p {
margin: 0;
}
._358591fa30baeebc-text p ~ p {
margin-top: 8px;
}
._358591fa30baeebc-positive {
background: var(--background-feedback-positive);
border: 1px solid var(--icon-feedback-positive);
color: var(--text-feedback-positive);
}
._358591fa30baeebc-positive ._358591fa30baeebc-icon {
color: var(--icon-feedback-positive);
}
._358591fa30baeebc-warning {
background: var(--background-feedback-warning);
border: 1px solid var(--icon-feedback-warning);
color: var(--text-feedback-warning);
}
._358591fa30baeebc-warning ._358591fa30baeebc-icon {
color: var(--icon-feedback-warning);
}
._358591fa30baeebc-info {
background: var(--background-feedback-info);
border: 1px solid var(--icon-feedback-info);
color: var(--text-feedback-info);
}
._358591fa30baeebc-info ._358591fa30baeebc-icon {
color: var(--icon-feedback-info);
}
._358591fa30baeebc-error {
background: var(--background-feedback-critical);
border: 1px solid var(--icon-feedback-critical);
color: var(--text-feedback-critical);
}
._358591fa30baeebc-error ._358591fa30baeebc-icon {
color: var(--icon-feedback-critical);
}
._358591fa30baeebc-actionContainer {
margin-bottom: auto;
margin-left: 16px;
margin-top: auto;
}
.b18fe29d6fe8dd82-hiddenVisually,
.b18fe29d6fe8dd82-showOnFocus:not(:focus-within) {
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
white-space: nowrap;
width: 1px;
}
.c2b88c2cc18f856f-badge {
align-self: center;
border-radius: var(--radius-round);
box-sizing: border-box;
display: inline-block;
padding: 0 var(--space-8);
text-align: center;
text-transform: uppercase;
}
.c2b88c2cc18f856f-default {
background-color: var(--badge-background-brand);
color: var(--badge-text-brand);
}
.c2b88c2cc18f856f-expressive {
background-color: var(--badge-expressive-background-default);
color: var(--badge-expressive-text-default);
}
._3854ff480f2d481a-chip {
align-self: center;
border-radius: var(--radius-round);
box-sizing: border-box;
display: inline-block;
padding: 0 var(--space-8);
text-align: center;
text-transform: uppercase;
}
._3854ff480f2d481a-blurple-light {
background-color: var(--chip-blurple-light-background);
color: var(--chip-blurple-light-text);
}
._3854ff480f2d481a-blurple-medium {
background-color: var(--chip-blurple-medium-background);
color: var(--chip-blurple-medium-text);
}
._3854ff480f2d481a-blurple-dark {
background-color: var(--chip-blurple-dark-background);
color: var(--chip-blurple-dark-text);
}
._3854ff480f2d481a-purple-light {
background-color: var(--chip-purple-light-background);
color: var(--chip-purple-light-text);
}
._3854ff480f2d481a-purple-medium {
background-color: var(--chip-purple-medium-background);
color: var(--chip-purple-medium-text);
}
._3854ff480f2d481a-purple-dark {
background-color: var(--chip-purple-dark-background);
color: var(--chip-purple-dark-text);
}
._3854ff480f2d481a-green-light {
background-color: var(--chip-green-light-background);
color: var(--chip-green-light-text);
}
._3854ff480f2d481a-green-medium {
background-color: var(--chip-green-medium-background);
color: var(--chip-green-medium-text);
}
._3854ff480f2d481a-green-dark {
background-color: var(--chip-green-dark-background);
color: var(--chip-green-dark-text);
}
._3854ff480f2d481a-orange-light {
background-color: var(--chip-orange-light-background);
color: var(--chip-orange-light-text);
}
._3854ff480f2d481a-orange-medium {
background-color: var(--chip-orange-medium-background);
color: var(--chip-orange-medium-text);
}
._3854ff480f2d481a-orange-dark {
background-color: var(--chip-orange-dark-background);
color: var(--chip-orange-dark-text);
}
._3854ff480f2d481a-yellow-light {
background-color: var(--chip-yellow-light-background);
color: var(--chip-yellow-light-text);
}
._3854ff480f2d481a-yellow-medium {
background-color: var(--chip-yellow-medium-background);
color: var(--chip-yellow-medium-text);
}
._3854ff480f2d481a-yellow-dark {
background-color: var(--chip-yellow-dark-background);
color: var(--chip-yellow-dark-text);
}
._3854ff480f2d481a-pink-light {
background-color: var(--chip-pink-light-background);
color: var(--chip-pink-light-text);
}
._3854ff480f2d481a-pink-medium {
background-color: var(--chip-pink-medium-background);
color: var(--chip-pink-medium-text);
}
._3854ff480f2d481a-pink-dark {
background-color: var(--chip-pink-dark-background);
color: var(--chip-pink-dark-text);
}
._3854ff480f2d481a-red-light {
background-color: var(--chip-red-light-background);
color: var(--chip-red-light-text);
}
._3854ff480f2d481a-red-medium {
background-color: var(--chip-red-medium-background);
color: var(--chip-red-medium-text);
}
._3854ff480f2d481a-red-dark {
background-color: var(--chip-red-dark-background);
color: var(--chip-red-dark-text);
}
._3854ff480f2d481a-gray-light {
background-color: var(--chip-gray-light-background);
color: var(--chip-gray-light-text);
}
._3854ff480f2d481a-gray-medium {
background-color: var(--chip-gray-medium-background);
color: var(--chip-gray-medium-text);
}
._3854ff480f2d481a-gray-dark {
background-color: var(--chip-gray-dark-background);
color: var(--chip-gray-dark-text);
}
._5a6abdc52a572b78-progress {
overflow: hidden;
position: relative;
transform: translateZ(0);
}
._5a6abdc52a572b78-progress,
._5a6abdc52a572b78-progressBar {
width: 100%;
}
._5a6abdc52a572b78-animating {
transition: transform 0.2s ease-out;
}
._5a6abdc52a572b78-xxsmall {
border-radius: 2px;
height: 2px;
}
._5a6abdc52a572b78-xsmall {
height: 4px;
}
._5a6abdc52a572b78-small,
._5a6abdc52a572b78-xsmall {
border-radius: 3px;
}
._5a6abdc52a572b78-small {
height: 6px;
}
._5a6abdc52a572b78-large {
border-radius: 4px;
height: 8px;
}
._5a6abdc52a572b78-indeterminate {
position: absolute;
top: 0;
width: auto;
}
._5a6abdc52a572b78-indeterminateBar1 {
animation: _5a6abdc52a572b78-indeterminate1 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
animation-play-state: paused;
}
._5a6abdc52a572b78-indeterminateBar1._5a6abdc52a572b78-animating {
animation-play-state: running;
}
._5a6abdc52a572b78-indeterminateBar2 {
animation: _5a6abdc52a572b78-indeterminate2 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
animation-delay: 1.15s;
animation-play-state: paused;
}
._5a6abdc52a572b78-indeterminateBar2._5a6abdc52a572b78-animating {
animation-play-state: running;
}
@keyframes _5a6abdc52a572b78-indeterminate1 {
0% {
left: -35%;
right: 100%;
}
60% {
left: 100%;
right: -90%;
}
to {
left: 100%;
right: -90%;
}
}
@keyframes _5a6abdc52a572b78-indeterminate2 {
0% {
left: -200%;
right: 100%;
}
60% {
left: 107%;
right: -8%;
}
to {
left: 107%;
right: -8%;
}
}
._28edcc5e79963875-progressCircle {
align-items: center;
color: var(--blue-345);
display: flex;
height: 100%;
justify-content: center;
position: relative;
width: 100%;
}
._28edcc5e79963875-circle {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
._28edcc5e79963875-circleBackgroundAlt {
fill: var(--opacity-black-20);
}
._28edcc5e79963875-circleBackground {
fill: var(--background-accent);
}
._28edcc5e79963875-circleProgress {
fill: none;
}
._28edcc5e79963875-circleOverlay {
align-items: center;
display: flex;
justify-content: center;
position: relative;
}
._67225fd1ca61e9a7-progress {
overflow: hidden;
position: relative;
transform: translateZ(0);
width: 100%;
}
._67225fd1ca61e9a7-progressBar {
position: absolute;
width: 100%;
}
.full-motion ._67225fd1ca61e9a7-animating {
transition: transform 0.2s ease-out;
}
._67225fd1ca61e9a7-xsmall {
height: 4px;
}
._67225fd1ca61e9a7-small,
._67225fd1ca61e9a7-xsmall {
border-radius: 3px;
}
._67225fd1ca61e9a7-small {
height: 6px;
}
._67225fd1ca61e9a7-large {
border-radius: 4px;
height: 8px;
}
.dbd2630aec71879b-stack {
display: flex;
}
.dbd2630aec71879b-stack[data-full-width="true"] {
width: 100%;
}
.dbd2630aec71879b-stack[data-direction="vertical"] {
flex-direction: column;
}
.dbd2630aec71879b-stack[data-direction="vertical-reverse"] {
flex-direction: column-reverse;
}
.dbd2630aec71879b-stack[data-direction="horizontal"] {
flex-direction: row;
}
.dbd2630aec71879b-stack[data-direction="horizontal-reverse"] {
flex-direction: row-reverse;
}
.dbd2630aec71879b-stack[data-align="start"] {
align-items: flex-start;
}
.dbd2630aec71879b-stack[data-align="end"] {
align-items: flex-end;
}
.dbd2630aec71879b-stack[data-align="center"] {
align-items: center;
}
.dbd2630aec71879b-stack[data-align="stretch"] {
align-items: stretch;
}
.dbd2630aec71879b-stack[data-align="baseline"] {
align-items: baseline;
}
.dbd2630aec71879b-stack[data-wrap="true"] {
flex-wrap: wrap;
}
.dbd2630aec71879b-stack[data-justify="start"] {
justify-content: flex-start;
}
.dbd2630aec71879b-stack[data-justify="end"] {
justify-content: flex-end;
}
.dbd2630aec71879b-stack[data-justify="center"] {
justify-content: center;
}
.dbd2630aec71879b-stack[data-justify="space-around"] {
justify-content: space-around;
}
.dbd2630aec71879b-stack[data-justify="space-between"] {
justify-content: space-between;
}
.d125d22cdfd32cfe-scrollerBase {
box-sizing: border-box;
flex: 1 1 auto;
min-height: 0;
position: relative;
}
.d125d22cdfd32cfe-auto,
.d125d22cdfd32cfe-none,
.d125d22cdfd32cfe-thin {
}
.d125d22cdfd32cfe-thin::-webkit-scrollbar {
height: 8px;
width: 8px;
}
.d125d22cdfd32cfe-thin::-webkit-scrollbar-track {
background-color: var(--scrollbar-thin-track);
border: 2px solid var(--scrollbar-thin-track);
border-color: var(--scrollbar-thin-track);
}
.d125d22cdfd32cfe-thin::-webkit-scrollbar-thumb {
background-clip: padding-box;
background-color: var(--scrollbar-thin-thumb);
border: 2px solid transparent;
border-radius: 4px;
min-height: 40px;
}
.d125d22cdfd32cfe-thin::-webkit-scrollbar-corner {
background-color: transparent;
}
.d125d22cdfd32cfe-auto::-webkit-scrollbar {
height: 16px;
width: 16px;
}
.d125d22cdfd32cfe-auto::-webkit-scrollbar-track {
background-color: var(--scrollbar-auto-track);
}
.d125d22cdfd32cfe-auto::-webkit-scrollbar-thumb,
.d125d22cdfd32cfe-auto::-webkit-scrollbar-track {
background-clip: padding-box;
border: 4px solid transparent;
border-radius: 8px;
}
.d125d22cdfd32cfe-auto::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-auto-thumb);
min-height: 40px;
}
.d125d22cdfd32cfe-auto::-webkit-scrollbar-corner {
background-color: transparent;
}
.custom-theme-background .d125d22cdfd32cfe-customTheme.d125d22cdfd32cfe-auto::-webkit-scrollbar-track {
background-color: var(--background-mod-muted);
}
.d125d22cdfd32cfe-none::-webkit-scrollbar {
height: 0;
width: 0;
}
.d125d22cdfd32cfe-fade::-webkit-scrollbar-thumb,
.d125d22cdfd32cfe-fade::-webkit-scrollbar-track {
visibility: hidden;
}
.d125d22cdfd32cfe-fade:hover::-webkit-scrollbar-thumb,
.d125d22cdfd32cfe-fade:hover::-webkit-scrollbar-track {
visibility: visible;
}
.d125d22cdfd32cfe-scrolling.d125d22cdfd32cfe-fade:focus-within::-webkit-scrollbar-thumb,
.d125d22cdfd32cfe-scrolling.d125d22cdfd32cfe-fade:focus-within::-webkit-scrollbar-track {
visibility: visible;
}
.no-webkit-scrollbar .d125d22cdfd32cfe-thin {
scrollbar-color: var(--scrollbar-thin-thumb) var(--scrollbar-thin-track);
scrollbar-width: thin;
}
.no-webkit-scrollbar .d125d22cdfd32cfe-thin.d125d22cdfd32cfe-fade.d125d22cdfd32cfe-scrolling,
.no-webkit-scrollbar .d125d22cdfd32cfe-thin.d125d22cdfd32cfe-fade:hover {
scrollbar-color: var(--scrollbar-thin-thumb) var(--scrollbar-thin-track);
}
.no-webkit-scrollbar .d125d22cdfd32cfe-auto {
scrollbar-color: var(--scrollbar-auto-scrollbar-color-thumb) var(--scrollbar-auto-scrollbar-color-track);
scrollbar-width: auto;
}
.no-webkit-scrollbar .d125d22cdfd32cfe-auto.d125d22cdfd32cfe-fade.d125d22cdfd32cfe-scrolling,
.no-webkit-scrollbar .d125d22cdfd32cfe-auto.d125d22cdfd32cfe-fade:hover {
scrollbar-color: var(--scrollbar-auto-scrollbar-color-thumb) var(--scrollbar-auto-scrollbar-color-track);
}
.no-webkit-scrollbar .d125d22cdfd32cfe-none {
scrollbar-width: none;
}
.no-webkit-scrollbar .d125d22cdfd32cfe-fade {
scrollbar-color: transparent transparent;
}
.d125d22cdfd32cfe-content {
position: relative;
}
.d125d22cdfd32cfe-disableScrollAnchor {
overflow-anchor: none;
}
.d125d22cdfd32cfe-managedReactiveScroller {
overflow-x: hidden;
overflow-y: scroll;
}
.d125d22cdfd32cfe-pointerCover {
inset: 0;
position: absolute;
z-index: 9999;
}
.enable-forced-colors ::-webkit-scrollbar-track {
border-radius: 0;
border-width: 1px;
}
.enable-forced-colors ::-webkit-scrollbar-thumb {
background-color: CanvasText;
border-width: 1px;
}
.enable-forced-colors ::-webkit-scrollbar-thumb:horizontal:active,
.enable-forced-colors ::-webkit-scrollbar-thumb:horizontal:hover,
.enable-forced-colors ::-webkit-scrollbar-thumb:vertical:active,
.enable-forced-colors ::-webkit-scrollbar-thumb:vertical:hover {
background-color: Highlight;
}
.enable-forced-colors .d125d22cdfd32cfe-auto::-webkit-scrollbar {
height: 8px;
width: 8px;
}
.enable-forced-colors .d125d22cdfd32cfe-auto::-webkit-scrollbar-track {
border-radius: 0;
border-width: 1px;
}
@keyframes _46696d17714f10ab-spinner-wandering-cubes {
25% {
transform: translateX(22px) rotate(-90deg) scale(0.5);
}
50% {
transform: translateX(22px) translateY(22px) rotate(-180deg);
}
75% {
transform: translateX(0) translateY(22px) rotate(-270deg) scale(0.5);
}
to {
transform: rotate(-1turn);
}
}
@keyframes _46696d17714f10ab-spinner-chasing-dots-rotate {
to {
transform: rotate(1turn);
}
}
@keyframes _46696d17714f10ab-spinner-chasing-dots-bounce {
0%,
to {
transform: scale(0);
}
50% {
transform: scale(1);
}
}
@keyframes _46696d17714f10ab-spinner-pulsing-ellipsis {
0% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.3;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes _46696d17714f10ab-spinner-low-motion {
0% {
opacity: 1;
}
50% {
opacity: 0.6;
}
to {
opacity: 1;
}
}
@keyframes _46696d17714f10ab-spinner-spinning-circle-rotate {
to {
transform: rotate(1turn);
}
}
@keyframes _46696d17714f10ab-spinner-spinning-circle-dash {
0% {
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 130, 200;
}
to {
stroke-dasharray: 130, 200;
stroke-dashoffset: -124;
}
}
._46696d17714f10ab-spinner {
display: flex;
}
._46696d17714f10ab-inner,
._46696d17714f10ab-spinner {
align-items: center;
justify-content: center;
}
._46696d17714f10ab-inner {
contain: paint;
display: inline-flex;
height: 32px;
position: relative;
width: 32px;
}
._46696d17714f10ab-wanderingCubes ._46696d17714f10ab-item {
animation: _46696d17714f10ab-spinner-wandering-cubes 1.8s ease-in-out infinite;
background-color: var(--brand-400);
height: 10px;
left: 0;
position: absolute;
top: 0;
width: 10px;
}
._46696d17714f10ab-wanderingCubes ._46696d17714f10ab-item:last-child {
animation-delay: -0.9s;
}
._46696d17714f10ab-chasingDots {
animation: _46696d17714f10ab-spinner-chasing-dots-rotate 2s linear infinite;
}
._46696d17714f10ab-chasingDots ._46696d17714f10ab-item {
animation: _46696d17714f10ab-spinner-chasing-dots-bounce 2s ease-in-out infinite;
background-color: var(--brand-500);
border-radius: 100%;
display: inline-block;
height: 60%;
position: absolute;
top: 0;
width: 60%;
}
._46696d17714f10ab-chasingDots ._46696d17714f10ab-item:last-child {
animation-delay: -1s;
bottom: 0;
top: auto;
}
._46696d17714f10ab-pulsingEllipsis {
display: flex;
height: auto;
justify-content: center;
position: relative;
width: 28px;
}
._46696d17714f10ab-pulsingEllipsis ._46696d17714f10ab-item {
animation: _46696d17714f10ab-spinner-pulsing-ellipsis 1.4s ease-in-out infinite;
background-color: var(--primary-100);
border-radius: 3px;
display: inline-block;
height: 6px;
margin-right: 2px;
opacity: 0.3;
width: 6px;
}
._46696d17714f10ab-pulsingEllipsis ._46696d17714f10ab-item:nth-of-type(2) {
animation-delay: 0.2s;
}
._46696d17714f10ab-pulsingEllipsis ._46696d17714f10ab-item:nth-of-type(3) {
animation-delay: 0.4s;
}
._46696d17714f10ab-lowMotion ._46696d17714f10ab-item {
animation: _46696d17714f10ab-spinner-low-motion 1.4s ease-in-out infinite;
background-color: var(--interactive-text-default);
border-radius: 3px;
display: inline-block;
height: 6px;
margin-right: 2px;
opacity: 0.3;
width: 6px;
}
._46696d17714f10ab-lowMotion ._46696d17714f10ab-item:nth-of-type(2) {
animation-delay: 0.2s;
}
._46696d17714f10ab-lowMotion ._46696d17714f10ab-item:nth-of-type(3) {
animation-delay: 0.4s;
}
.stop-animation ._46696d17714f10ab-pulsingEllipsis ._46696d17714f10ab-item {
animation: none;
}
._46696d17714f10ab-stopAnimation ._46696d17714f10ab-chasingDots,
._46696d17714f10ab-stopAnimation ._46696d17714f10ab-circular,
._46696d17714f10ab-stopAnimation ._46696d17714f10ab-item,
._46696d17714f10ab-stopAnimation ._46696d17714f10ab-path {
animation: none;
}
._46696d17714f10ab-spinningCircle {
width: 100%;
}
._46696d17714f10ab-spinningCircleInner {
transform: rotate(280deg);
}
._46696d17714f10ab-circular {
animation: _46696d17714f10ab-spinner-spinning-circle-rotate 2s linear infinite;
height: 100%;
width: 100%;
}
._46696d17714f10ab-path {
animation: _46696d17714f10ab-spinner-spinning-circle-dash 2s ease-in-out infinite;
stroke-dasharray: 1, 200;
stroke-dashoffset: 0;
fill: none;
stroke-width: 6;
stroke-miterlimit: 10;
stroke-linecap: round;
stroke: var(--brand-500);
}
._46696d17714f10ab-path2 {
animation-delay: 0.15s;
opacity: 0.6;
}
._46696d17714f10ab-path2,
._46696d17714f10ab-path3 {
stroke: var(--text-brand);
}
._46696d17714f10ab-path3 {
animation-delay: 0.23s;
}
.theme-light ._46696d17714f10ab-path3 {
opacity: 0.3;
}
._61c9355cca12ab4b-combo {
box-sizing: border-box;
display: flex;
font-size: 12px;
font-weight: var(--font-weight-semibold);
height: 23px;
line-height: 12px;
position: relative;
text-transform: uppercase;
}
._61c9355cca12ab4b-systemFont {
font-family: "system-ui", sans-serif;
}
._61c9355cca12ab4b-key {
background-color: var(--background-mod-muted);
border: 1px solid var(--border-strong);
border-radius: 4px;
box-sizing: border-box;
cursor: default;
display: block;
height: 23px;
min-height: 14px;
min-width: 14px;
padding: 3px 6px 4px;
position: relative;
text-align: center;
}
._61c9355cca12ab4b-key:not(:last-child) {
-webkit-margin-end: 3px;
margin-inline-end: 3px;
}
._61c9355cca12ab4b-key ._61c9355cca12ab4b-bindArrow {
height: 10px;
width: 10px;
}
._61c9355cca12ab4b-key ._61c9355cca12ab4b-bindArrow._61c9355cca12ab4b-up {
transform: rotate(180deg);
}
._61c9355cca12ab4b-key ._61c9355cca12ab4b-bindArrow._61c9355cca12ab4b-left {
transform: rotate(90deg);
}
._61c9355cca12ab4b-key ._61c9355cca12ab4b-bindArrow._61c9355cca12ab4b-right {
transform: rotate(-90deg);
}
._61c9355cca12ab4b-key:active {
height: 21px;
padding-bottom: 2px;
transform: translateY(2px);
}
._61c9355cca12ab4b-combo {
color: var(--text-strong);
}
._61c9355cca12ab4b-key {
border: 1px solid var(--border-subtle);
box-shadow: inset 0 -4px 0 var(--background-mod-muted);
color: var(--interactive-text-active);
}
._61c9355cca12ab4b-key g {
fill: var(--interactive-text-active);
}
._61c9355cca12ab4b-key:active {
border: 1px solid var(--border-strong);
box-shadow: inset 0 -2px 0 var(--background-mod-subtle);
color: var(--interactive-text-default);
}
._61c9355cca12ab4b-key:active g {
fill: var(--interactive-text-default);
}
._61c9355cca12ab4b-dim span {
background-color: var(--background-mod-subtle);
color: var(--text-subtle);
}
._61c9355cca12ab4b-dim span ._61c9355cca12ab4b-bindArrow g {
fill: var(--text-subtle);
}
._61c9355cca12ab4b-dim span:active {
color: var(--text-subtle);
}
._61c9355cca12ab4b-dim span:active ._61c9355cca12ab4b-bindArrow g {
fill: var(--text-subtle);
}
._61c9355cca12ab4b-keybindShortcutSearchPopout {
flex-grow: 0;
flex-shrink: 0;
margin: 0;
}
._61c9355cca12ab4b-keyboardShortcuts {
margin: 0;
}
.a22cb0c66246f5d3-button {
align-items: center;
background: initial;
border: 1px solid transparent;
border-radius: var(--radius-sm);
box-sizing: border-box;
color: inherit;
cursor: pointer;
display: flex;
flex-grow: 0;
flex-shrink: 0;
font-size: medium;
font-weight: 400;
justify-content: center;
margin: 0;
max-height: -webkit-min-content;
max-height: -moz-min-content;
max-height: min-content;
max-width: 100%;
padding: 0;
position: relative;
text-align: start;
transition:
background-color 50ms ease-in,
color 50ms ease-in,
border-color 50ms ease-in,
opacity 50ms ease-in;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
}
.a22cb0c66246f5d3-button:hover {
transition:
background-color 0.15s ease-out,
color 0.15s ease-out,
border-color 0.15s ease-out,
opacity 0.15s ease-out;
}
.a22cb0c66246f5d3-button:disabled {
opacity: 0.5;
pointer-events: none;
}
.highlight-mana-buttons .a22cb0c66246f5d3-button {
box-shadow: 0 0 4px 4px var(--opacity-white-60);
}
.highlight-mana-buttons [data-button-hoisted-classname-wrapper] .a22cb0c66246f5d3-button {
box-shadow: 0 0 4px 4px var(--opacity-green-60);
}
[data-button-hoisted-classname-wrapper] {
display: flex;
width: auto;
}
.a22cb0c66246f5d3-buttonChildrenWrapper {
border-radius: var(--radius-sm);
box-sizing: border-box;
justify-content: center;
position: relative;
width: 100%;
}
.a22cb0c66246f5d3-buttonChildren,
.a22cb0c66246f5d3-buttonChildrenWrapper {
align-items: center;
display: flex;
overflow: hidden;
}
.a22cb0c66246f5d3-buttonChildren {
gap: var(--space-4);
text-overflow: ellipsis;
transition:
opacity 0.2s ease-out,
transform 0.2s ease-out;
white-space: nowrap;
}
.a22cb0c66246f5d3-icon {
flex-shrink: 0;
}
.a22cb0c66246f5d3-buttonChildren {
opacity: 1;
}
.a22cb0c66246f5d3-buttonChildren.a22cb0c66246f5d3-loading {
opacity: 0;
}
.a22cb0c66246f5d3-spinnerWrapper {
animation-duration: 0.2s;
animation-fill-mode: forwards;
animation-timing-function: ease;
height: 100%;
position: absolute;
top: 0;
width: 100%;
}
.a22cb0c66246f5d3-spinnerWrapper.a22cb0c66246f5d3-fadeIn {
animation-name: a22cb0c66246f5d3-spinner-opacity-in;
}
.a22cb0c66246f5d3-spinnerWrapper.a22cb0c66246f5d3-fadeOut {
animation-name: a22cb0c66246f5d3-spinner-opacity-out;
}
.full-motion .a22cb0c66246f5d3-spinnerWrapper.a22cb0c66246f5d3-fadeIn {
animation-name: a22cb0c66246f5d3-spinner-transform-in, a22cb0c66246f5d3-spinner-opacity-in;
}
.full-motion .a22cb0c66246f5d3-spinnerWrapper.a22cb0c66246f5d3-fadeOut {
animation-name: a22cb0c66246f5d3-spinner-transform-out, a22cb0c66246f5d3-spinner-opacity-out;
}
.full-motion .a22cb0c66246f5d3-buttonChildren {
transform: translateY(0);
}
.full-motion .a22cb0c66246f5d3-buttonChildren.a22cb0c66246f5d3-loading {
transform: translateY(-100%);
}
@keyframes a22cb0c66246f5d3-spinner-opacity-in {
0% {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes a22cb0c66246f5d3-spinner-opacity-out {
0% {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes a22cb0c66246f5d3-spinner-transform-in {
0% {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
@keyframes a22cb0c66246f5d3-spinner-transform-out {
0% {
transform: translateY(0);
}
to {
transform: translateY(100%);
}
}
.a22cb0c66246f5d3-xs {
border-radius: var(--radius-xs);
}
.a22cb0c66246f5d3-xs .a22cb0c66246f5d3-buttonChildrenWrapper {
min-height: 22px;
min-width: 22px;
}
.a22cb0c66246f5d3-xs.a22cb0c66246f5d3-hasText {
min-width: var(--__button-min-width, 60px);
}
.a22cb0c66246f5d3-xs.a22cb0c66246f5d3-hasText .a22cb0c66246f5d3-buttonChildrenWrapper {
padding: calc(var(--space-4) - 1px) calc(var(--space-8) - 1px);
}
.a22cb0c66246f5d3-sm .a22cb0c66246f5d3-buttonChildrenWrapper {
min-height: 30px;
min-width: 30px;
}
.a22cb0c66246f5d3-sm.a22cb0c66246f5d3-hasText {
min-width: var(--__button-min-width, 60px);
}
.a22cb0c66246f5d3-sm.a22cb0c66246f5d3-hasText .a22cb0c66246f5d3-buttonChildrenWrapper {
padding: calc(var(--space-4) - 1px) calc(var(--space-12) - 1px);
}
.a22cb0c66246f5d3-md .a22cb0c66246f5d3-buttonChildrenWrapper {
min-height: 38px;
min-width: 38px;
}
.a22cb0c66246f5d3-md.a22cb0c66246f5d3-hasText {
min-width: var(--__button-min-width, 100px);
}
.a22cb0c66246f5d3-md.a22cb0c66246f5d3-hasText .a22cb0c66246f5d3-buttonChildrenWrapper {
padding: calc(var(--space-8) - 1px) calc(var(--space-16) - 1px);
}
.a22cb0c66246f5d3-spinnerItem {
background-color: currentColor !important;
}
.a22cb0c66246f5d3-spinner {
height: 100%;
}
.a22cb0c66246f5d3-spinner-sm,
.a22cb0c66246f5d3-spinner-xs {
min-height: 16px;
min-width: 16px;
transform: scale(0.75);
}
.a22cb0c66246f5d3-spinner-md {
transform: scale(0.9);
}
.a22cb0c66246f5d3-spinner-lg,
.a22cb0c66246f5d3-spinner-md {
min-height: 20px;
min-width: 20px;
}
.a22cb0c66246f5d3-primary {
background-color: var(--control-primary-background-default);
border-color: var(--control-primary-border-default);
color: var(--control-primary-text-default);
}
.a22cb0c66246f5d3-primary:hover {
background-color: var(--control-primary-background-hover);
border-color: var(--control-primary-border-hover);
color: var(--control-primary-text-hover);
}
.a22cb0c66246f5d3-primary:active {
background-color: var(--control-primary-background-active);
border-color: var(--control-primary-border-active);
color: var(--control-primary-text-active);
}
.a22cb0c66246f5d3-secondary {
background-color: var(--control-secondary-background-default);
border-color: var(--control-secondary-border-default);
color: var(--control-secondary-text-default);
}
.a22cb0c66246f5d3-secondary:hover {
background-color: var(--control-secondary-background-hover);
border-color: var(--control-secondary-border-hover);
color: var(--control-secondary-text-hover);
}
.a22cb0c66246f5d3-secondary:active {
background-color: var(--control-secondary-background-active);
border-color: var(--control-secondary-border-active);
color: var(--control-secondary-text-active);
}
.a22cb0c66246f5d3-icon-only {
background-color: transparent;
border-color: transparent;
color: var(--control-icon-only-icon-default);
}
.a22cb0c66246f5d3-icon-only:hover {
background-color: var(--control-icon-only-background-hover);
border-color: var(--control-icon-only-border-hover);
color: var(--control-icon-only-icon-hover);
}
.a22cb0c66246f5d3-icon-only:active {
background-color: var(--control-icon-only-background-active);
border-color: var(--control-icon-only-border-active);
color: var(--control-icon-only-icon-active);
}
.a22cb0c66246f5d3-color-mix {
background-color: transparent;
border: transparent;
color: var(--icon-strong);
}
.a22cb0c66246f5d3-color-mix:hover {
color: var(--control-icon-only-icon-hover);
}
.a22cb0c66246f5d3-color-mix:active {
color: var(--control-icon-only-icon-active);
}
.a22cb0c66246f5d3-color-mix:before {
border: 1px solid transparent;
border-radius: var(--radius-sm);
box-sizing: border-box;
content: "";
height: 100%;
left: 0;
mix-blend-mode: plus-lighter;
position: absolute;
top: 0;
transition:
background-color 50ms ease-in,
border-color 50ms ease-in,
opacity 50ms ease-in;
width: 100%;
}
.a22cb0c66246f5d3-color-mix:hover:before {
background-color: var(--control-icon-only-background-hover);
border-color: var(--border-subtle);
transition:
background-color 0.15s ease-out,
border-color 0.15s ease-out,
opacity 0.15s ease-out;
}
.a22cb0c66246f5d3-color-mix:active:before {
background-color: var(--control-icon-only-background-active);
border-color: var(--border-subtle);
}
.a22cb0c66246f5d3-input-accessory {
border-radius: var(--radius-xs);
color: var(--icon-strong);
}
.theme-light .a22cb0c66246f5d3-color-mix:before {
mix-blend-mode: difference;
}
.a22cb0c66246f5d3-critical-primary {
background-color: var(--control-critical-primary-background-default);
border-color: var(--control-critical-primary-border-default);
color: var(--control-critical-primary-text-default);
}
.a22cb0c66246f5d3-critical-primary:hover {
background-color: var(--control-critical-primary-background-hover);
border-color: var(--control-critical-primary-border-hover);
color: var(--control-critical-primary-text-hover);
}
.a22cb0c66246f5d3-critical-primary:active {
background-color: var(--control-critical-primary-background-active);
border-color: var(--control-critical-primary-border-active);
color: var(--control-critical-primary-text-active);
}
.a22cb0c66246f5d3-critical-secondary {
background-color: var(--control-critical-secondary-background-default);
border-color: var(--control-critical-secondary-border-default);
color: var(--control-critical-secondary-text-default);
}
.a22cb0c66246f5d3-critical-secondary:hover {
background-color: var(--control-critical-secondary-background-hover);
border-color: var(--control-critical-secondary-border-hover);
color: var(--control-critical-secondary-text-hover);
}
.a22cb0c66246f5d3-critical-secondary:active {
background-color: var(--control-critical-secondary-background-active);
border-color: var(--control-critical-secondary-border-active);
color: var(--control-critical-secondary-text-active);
}
.a22cb0c66246f5d3-active {
background-color: var(--control-connected-background-default);
border-color: var(--control-connected-border-default);
color: var(--control-connected-text-default);
}
.a22cb0c66246f5d3-active:hover {
background-color: var(--control-connected-background-hover);
border-color: var(--control-connected-border-hover);
color: var(--control-connected-text-hover);
}
.a22cb0c66246f5d3-active:active {
background-color: var(--control-connected-background-active);
border-color: var(--control-connected-border-active);
color: var(--control-connected-text-active);
}
.a22cb0c66246f5d3-overlay-primary {
background-color: var(--control-overlay-primary-background-default);
border-color: var(--control-overlay-primary-border-default);
color: var(--control-overlay-primary-text-default);
}
.a22cb0c66246f5d3-overlay-primary:hover {
background-color: var(--control-overlay-primary-background-hover);
border-color: var(--control-overlay-primary-border-hover);
color: var(--control-overlay-primary-text-hover);
}
.a22cb0c66246f5d3-overlay-primary:active {
background-color: var(--control-overlay-primary-background-active);
border-color: var(--control-overlay-primary-border-active);
color: var(--control-overlay-primary-text-active);
}
.a22cb0c66246f5d3-overlay-secondary {
background-color: var(--control-overlay-secondary-background-default);
border-color: var(--control-overlay-secondary-border-default);
color: var(--control-overlay-secondary-text-default);
}
.a22cb0c66246f5d3-overlay-secondary:hover {
background-color: var(--control-overlay-secondary-background-hover);
border-color: var(--control-overlay-secondary-border-hover);
color: var(--control-overlay-secondary-text-hover);
}
.a22cb0c66246f5d3-overlay-secondary:active {
background-color: var(--control-overlay-secondary-background-active);
border-color: var(--control-overlay-secondary-border-active);
color: var(--control-overlay-secondary-text-active);
}
.a22cb0c66246f5d3-expressive > * {
pointer-events: none;
z-index: 1;
}
.a22cb0c66246f5d3-expressiveRive {
height: calc(100% + var(--__glow-amount) * 2 + 2px);
left: calc(var(--__glow-amount) * -1 - 1px);
position: absolute;
top: calc(var(--__glow-amount) * -1 - 1px);
width: calc(100% + var(--__glow-amount) * 2 + 2px);
}
.a22cb0c66246f5d3-expressive .a22cb0c66246f5d3-expressiveBackground {
filter: blur(10px) saturate(var(--saturation-factor, 1));
}
.reduce-motion .a22cb0c66246f5d3-expressive .a22cb0c66246f5d3-expressiveBackground {
filter: blur(7px) saturate(var(--saturation-factor, 1));
}
.a22cb0c66246f5d3-expressive {
color: var(--control-expressive-text-default);
}
.a22cb0c66246f5d3-expressive .a22cb0c66246f5d3-expressiveFill {
--__glow-amount: 0px;
background-color: var(--control-expressive-background-default);
border-radius: 8px;
transition:
background-color 0.15s ease,
width 0.15s ease,
height 0.15s ease,
top 0.15s ease,
left 0.15s ease;
}
.a22cb0c66246f5d3-expressive:hover {
color: var(--control-expressive-text-hover);
}
.a22cb0c66246f5d3-expressive:hover .a22cb0c66246f5d3-expressiveFill {
background-color: var(--control-expressive-background-hover);
}
.a22cb0c66246f5d3-expressive:active {
color: var(--control-expressive-text-active);
}
.a22cb0c66246f5d3-expressive:active .a22cb0c66246f5d3-expressiveFill {
--__glow-amount: -1px;
background-color: var(--control-expressive-background-active);
}
.a22cb0c66246f5d3-expressive .a22cb0c66246f5d3-expressiveHoverContainer {
filter: blur(8px);
mix-blend-mode: plus-lighter;
pointer-events: all;
}
.a22cb0c66246f5d3-expressiveWrapper {
--__glow-amount: 8px;
display: flex;
max-width: 100%;
position: relative;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
}
.a22cb0c66246f5d3-fullWidth.a22cb0c66246f5d3-hasText {
flex: 1;
width: 100%;
}
.a22cb0c66246f5d3-rounded {
border-radius: var(--radius-round);
}
.enable-forced-colors .a22cb0c66246f5d3-button {
background-color: ButtonFace;
border-color: ButtonText;
color: ButtonText;
forced-color-adjust: none;
}
.enable-forced-colors .a22cb0c66246f5d3-button:disabled {
background-color: Canvas;
border-color: GrayText;
color: GrayText;
opacity: 1;
}
.enable-forced-colors .a22cb0c66246f5d3-button .a22cb0c66246f5d3-expressiveFill {
display: none;
}
._7a01bdafdcb0e727-textButton {
background: initial;
box-sizing: border-box;
color: inherit;
display: inline-flex;
flex-grow: 0;
flex-shrink: 0;
font-size: medium;
font-weight: 400;
gap: var(--space-4);
margin: 0;
max-width: 100%;
padding: 0;
text-align: start;
text-decoration: none;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
}
._7a01bdafdcb0e727-textButton:disabled {
opacity: 0.5;
}
._7a01bdafdcb0e727-textButton:hover ._7a01bdafdcb0e727-text,
:where(.decorate-links) ._7a01bdafdcb0e727-text {
text-decoration: underline;
}
._7a01bdafdcb0e727-primary {
color: var(--text-brand);
}
._7a01bdafdcb0e727-secondary {
color: var(--text-strong);
}
._7a01bdafdcb0e727-always-white {
color: var(--white);
}
._7a01bdafdcb0e727-critical {
color: var(--text-feedback-critical);
}
.highlight-mana-buttons ._7a01bdafdcb0e727-button {
box-shadow: 0 0 2px 2px var(--opacity-white-60);
}
._039e0be5de4b076f-button {
align-items: center;
background-color: transparent;
border-radius: var(--radius-sm);
cursor: pointer;
display: flex;
justify-content: center;
transition:
background-color 0.3s ease,
color 0.3s ease;
}
._039e0be5de4b076f-secondary {
background-color: var(--control-secondary-background-default);
border: 1px solid var(--control-secondary-border-default);
color: var(--icon-subtle);
}
._039e0be5de4b076f-secondary._039e0be5de4b076f-pressed {
background-color: var(--control-secondary-background-active);
border-color: var(--control-secondary-border-active);
color: var(--icon-strong);
}
._039e0be5de4b076f-secondary:hover {
background-color: var(--control-secondary-background-hover);
border-color: var(--control-secondary-border-hover);
}
._039e0be5de4b076f-secondary:active {
background-color: var(--control-secondary-background-active);
border-color: var(--control-secondary-border-active);
}
._039e0be5de4b076f-tertiary {
background-color: transparent;
border: 1px solid transparent;
color: var(--icon-subtle);
}
._039e0be5de4b076f-tertiary._039e0be5de4b076f-pressed {
background-color: var(--control-icon-only-background-active);
border-color: var(--control-icon-only-border-active);
color: var(--icon-strong);
}
._039e0be5de4b076f-tertiary:hover {
background-color: var(--control-icon-only-background-hover);
border-color: var(--control-icon-only-border-hover);
}
._039e0be5de4b076f-tertiary:active {
background-color: var(--control-icon-only-background-active);
border-color: var(--control-icon-only-border-active);
}
._039e0be5de4b076f-overlay-secondary {
background-color: var(--control-secondary-background-default);
border: 1px solid var(--control-secondary-border-default);
color: var(--icon-strong);
}
._039e0be5de4b076f-overlay-secondary._039e0be5de4b076f-pressed {
background-color: var(--control-secondary-background-active);
border-color: var(--control-secondary-border-active);
}
._039e0be5de4b076f-overlay-secondary:hover {
background-color: var(--control-secondary-background-hover);
border-color: var(--control-secondary-border-hover);
}
._039e0be5de4b076f-overlay-secondary:active {
background-color: var(--control-secondary-background-active);
border-color: var(--control-secondary-border-active);
}
._039e0be5de4b076f-overlay-tertiary {
background-color: transparent;
border: 1px solid transparent;
color: var(--icon-strong);
}
._039e0be5de4b076f-overlay-tertiary._039e0be5de4b076f-pressed {
background-color: var(--control-icon-only-background-active);
border-color: var(--control-icon-only-border-active);
}
._039e0be5de4b076f-overlay-tertiary:hover {
background-color: var(--control-icon-only-background-hover);
border-color: var(--control-icon-only-border-hover);
}
._039e0be5de4b076f-overlay-tertiary:active {
background-color: var(--control-icon-only-background-active);
border-color: var(--control-icon-only-border-active);
}
._8a031a135bfcb9ba-outerContainer {
align-items: center;
container: modal-container/inline-size;
height: 100vh;
justify-content: center;
padding: calc(var(--custom-app-top-bar-height) + var(--space-24)) var(--space-24);
pointer-events: none;
position: relative;
width: calc(100vw - var(--devtools-sidebar-width, 0px));
}
._8a031a135bfcb9ba-container,
._8a031a135bfcb9ba-outerContainer {
box-sizing: border-box;
display: flex;
}
._8a031a135bfcb9ba-container {
--custom-border-radius: var(--radius-md);
background: var(--background-surface-high);
border: 1px solid var(--border-subtle);
border-radius: var(--custom-border-radius);
box-shadow: var(--shadow-high);
color: var(--text-default);
flex-direction: column;
max-height: 100%;
pointer-events: auto;
width: 100%;
}
._8a031a135bfcb9ba-padding-size-sm {
--custom-modal-padding: var(--space-24);
--custom-modal-padding-sm: var(--space-8);
--custom-modal-padding-md: var(--space-16);
--custom-modal-padding-top: var(--custom-modal-padding-sm);
}
._8a031a135bfcb9ba-padding-size-lg,
._8a031a135bfcb9ba-padding-size-sm {
padding-bottom: var(--custom-modal-padding-md);
padding-top: var(--custom-modal-padding-top);
}
._8a031a135bfcb9ba-padding-size-lg {
--custom-modal-padding: var(--space-32);
--custom-modal-padding-sm: var(--space-16);
--custom-modal-padding-md: var(--space-16);
--custom-modal-padding-top: calc(var(--space-24) - var(--custom-modal-padding-md));
}
._8a031a135bfcb9ba-size-sm {
max-width: 400px;
}
._8a031a135bfcb9ba-size-md,
._8a031a135bfcb9ba-size-sm {
max-height: min(720px, 100%);
}
._8a031a135bfcb9ba-size-md {
max-width: 480px;
}
._8a031a135bfcb9ba-size-lg {
max-width: 680px;
}
._8a031a135bfcb9ba-size-xl {
max-width: 960px;
}
._8a031a135bfcb9ba-size-xxl {
max-width: 1280px;
}
@container (min-width: 1080px) {
._8a031a135bfcb9ba-size-xxl {
width: calc(80vw - var(--devtools-sidebar-width, 0));
}
}
@media (max-height: 550px), (max-width: 485px) {
._8a031a135bfcb9ba-fullScreenOnMobile {
padding: 0;
}
._8a031a135bfcb9ba-fullScreenOnMobile ._8a031a135bfcb9ba-container {
--custom-border-radius: 0;
--custom-modal-padding-top: calc(var(--custom-app-top-bar-height) + var(--custom-modal-padding-sm));
border: none;
height: 100%;
overflow-y: auto;
}
}
._8a031a135bfcb9ba-section {
box-sizing: border-box;
flex-grow: 0;
flex-shrink: 0;
padding: var(--custom-modal-padding-md) var(--custom-modal-padding) var(--custom-modal-padding-sm);
transition-duration: var(--expand-structural-duration);
transition-property: padding;
transition-timing-function: var(--expand-easing-function);
}
._8a031a135bfcb9ba-sectionHidden {
overflow: hidden;
padding: 0 var(--custom-modal-padding) 0;
transition-delay: var(--collapse-fade-duration);
transition-duration: var(--collapse-structural-duration);
transition-timing-function: var(--collapse-easing-function);
}
._8a031a135bfcb9ba-header {
position: relative;
}
._8a031a135bfcb9ba-headerCentered {
text-align: center;
}
._8a031a135bfcb9ba-headerLayout {
align-items: stretch;
display: flex;
}
._8a031a135bfcb9ba-headerStepIndicator {
margin-bottom: var(--space-12);
}
._8a031a135bfcb9ba-headerGradient:before {
border-radius: var(--custom-border-radius) var(--custom-border-radius) 0 0;
left: -1.5px;
right: -1.5px;
top: calc((var(--custom-modal-padding-top) + 1.5px) * -1);
}
._8a031a135bfcb9ba-headerGraphic {
align-items: center;
box-sizing: border-box;
display: flex;
justify-content: center;
padding-bottom: calc(var(--space-24) - var(--space-8));
padding-top: calc(var(--space-24) - var(--space-4));
width: 100%;
}
._8a031a135bfcb9ba-headerGraphicContainer {
box-sizing: border-box;
max-width: 288px;
width: 100%;
}
._8a031a135bfcb9ba-headerGraphicAnimated {
margin: 0 calc(var(--space-12) * -1);
padding-bottom: calc(var(--space-12) - var(--space-8));
padding-top: 0;
width: calc(100% + var(--space-24));
}
._8a031a135bfcb9ba-headerGraphicAnimated ._8a031a135bfcb9ba-headerGraphicContainer {
max-width: 352px;
}
@media (max-height: 550px) {
._8a031a135bfcb9ba-headerGraphicContainer > * {
max-height: 15vh;
}
}
._8a031a135bfcb9ba-headerLeading,
._8a031a135bfcb9ba-headerLeadingSpacer {
margin-left: calc((var(--custom-modal-padding) - var(--space-8)) * -1);
margin-top: calc(var(--custom-modal-padding-md) * -1);
padding-right: var(--space-12);
}
._8a031a135bfcb9ba-headerTrailing,
._8a031a135bfcb9ba-headerTrailingSpacer {
margin-right: calc((var(--custom-modal-padding) - var(--space-8)) * -1);
margin-top: calc(var(--custom-modal-padding-md) * -1);
padding-left: var(--space-12);
}
._8a031a135bfcb9ba-headerLeading,
._8a031a135bfcb9ba-headerLeadingSpacer,
._8a031a135bfcb9ba-headerTrailing,
._8a031a135bfcb9ba-headerTrailingSpacer {
align-items: flex-start;
box-sizing: border-box;
display: flex;
flex-grow: 0;
flex-shrink: 0;
gap: var(--space-8);
min-width: var(--space-4);
}
._8a031a135bfcb9ba-headerLeadingAbsolute {
left: var(--custom-modal-padding);
}
._8a031a135bfcb9ba-headerLeadingAbsolute,
._8a031a135bfcb9ba-headerTrailingAbsolute {
position: absolute;
top: var(--custom-modal-padding-md);
}
._8a031a135bfcb9ba-headerTrailingAbsolute {
right: var(--custom-modal-padding);
}
._8a031a135bfcb9ba-headerMain {
box-sizing: border-box;
flex-grow: 1;
flex-shrink: 1;
min-width: 0;
}
._8a031a135bfcb9ba-headerSubtitleWrapper {
align-items: center;
display: flex;
flex-direction: row;
gap: var(--space-4);
}
._8a031a135bfcb9ba-headerSubtitleIcon {
flex-grow: 0;
flex-shrink: 0;
}
._8a031a135bfcb9ba-headerCentered ._8a031a135bfcb9ba-headerSubtitleWrapper {
justify-content: center;
}
._8a031a135bfcb9ba-headerSubtitle,
._8a031a135bfcb9ba-headerTitle {
overflow-wrap: break-word;
word-break: break-word;
}
._8a031a135bfcb9ba-headerBadge {
padding-bottom: calc(var(--space-16) - var(--space-8));
}
._8a031a135bfcb9ba-body {
box-sizing: border-box;
min-height: 1px;
padding-left: 0;
padding-right: 0;
}
._8a031a135bfcb9ba-body,
._8a031a135bfcb9ba-bodyList {
flex-grow: 0;
flex-shrink: 1;
}
._8a031a135bfcb9ba-bodyList {
--custom-list-scrollbar-top-padding: 12px;
height: 100vh;
padding-left: var(--custom-modal-padding);
padding-right: var(--custom-modal-padding);
padding-top: var(--custom-list-scrollbar-top-padding);
}
._8a031a135bfcb9ba-bodyList::-webkit-scrollbar-thumb,
._8a031a135bfcb9ba-bodyList::-webkit-scrollbar-track {
margin-top: var(--custom-list-scrollbar-top-padding);
}
._8a031a135bfcb9ba-bodySpacerTop {
flex-grow: 0;
padding-top: var(--custom-modal-padding-md);
}
._8a031a135bfcb9ba-bodySpacerTopBorder {
border-bottom: 1px solid var(--border-subtle);
}
._8a031a135bfcb9ba-bodySpacerBottom {
flex-grow: 0;
padding-bottom: var(--custom-modal-padding-sm);
}
._8a031a135bfcb9ba-bodySpacerBottomBorder {
border-top: 1px solid var(--border-subtle);
}
._8a031a135bfcb9ba-bodyControls {
padding: 0 var(--custom-modal-padding);
position: relative;
}
._8a031a135bfcb9ba-bodyControls:after {
background: linear-gradient(to bottom, var(--background-surface-high) 0, transparent 100%);
content: "";
display: block;
height: 40px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
right: var(--space-16);
top: 100%;
transition:
opacity 0.2s ease-out 0s,
visibility 0s ease-out 0.2s;
visibility: hidden;
z-index: 1;
}
._8a031a135bfcb9ba-bodyControlsWithFade:after {
opacity: 1;
transition:
opacity 0.2s ease-out 0s,
visibility 0s ease-out 0s;
visibility: visible;
}
._8a031a135bfcb9ba-bodyInner {
box-sizing: border-box;
overflow-wrap: break-word;
overflow-y: hidden;
padding-left: var(--custom-modal-padding);
padding-right: var(--custom-modal-padding);
word-break: break-word;
}
.has-webkit-scrollbar ._8a031a135bfcb9ba-bodyInner {
padding-right: calc(var(--custom-modal-padding) - var(--space-16));
}
._8a031a135bfcb9ba-bodyControls + ._8a031a135bfcb9ba-body ._8a031a135bfcb9ba-bodyInner,
._8a031a135bfcb9ba-bodyInnerShouldScroll {
padding-top: var(--space-12);
}
._8a031a135bfcb9ba-bodyInnerShouldScroll {
padding-bottom: var(--space-12);
}
._8a031a135bfcb9ba-footer {
overflow-wrap: break-word;
padding-bottom: 0;
word-break: break-word;
}
._8a031a135bfcb9ba-actionBar {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--custom-modal-padding) var(--space-8);
}
._8a031a135bfcb9ba-actionBarLeading {
flex-grow: 1;
flex-shrink: 1;
overflow-wrap: break-word;
word-break: break-word;
}
._8a031a135bfcb9ba-actionBarTrailing {
display: flex;
flex-grow: 0;
flex-shrink: 0;
flex-wrap: wrap;
gap: var(--space-8);
margin-left: auto;
max-width: 100%;
}
._8a031a135bfcb9ba-actionButtonWrapper {
display: flex;
}
._8a031a135bfcb9ba-actionBarTrailingFullWidth {
width: 100%;
}
._8a031a135bfcb9ba-actionBarTrailingFullWidth ._8a031a135bfcb9ba-actionButtonWrapper {
flex: 1;
}
._8a031a135bfcb9ba-actionBarCheckbox {
-webkit-padding-end: var(--space-8);
padding-inline-end: var(--space-8);
}
._8a031a135bfcb9ba-actionBarLayoutChatInput {
align-items: flex-start;
}
._8a031a135bfcb9ba-actionBarLayoutChatInput ._8a031a135bfcb9ba-actionBarLeading {
flex-basis: 60%;
}
@keyframes _714a9a7abaf0392a-dotGrow {
0% {
opacity: 1;
transform: scale(1);
}
25% {
opacity: 1;
transform: scale(3);
}
26% {
opacity: 0;
}
to {
opacity: 0;
}
}
@keyframes _714a9a7abaf0392a-dotShrink {
0% {
opacity: 0;
transform: scale(2);
}
25% {
opacity: 0;
transform: scale(2);
}
26% {
opacity: 1;
transform: scale(2);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes _714a9a7abaf0392a-checkDraw {
0% {
opacity: 0;
transform: scale(0.7);
}
25% {
opacity: 0;
transform: scale(0.7);
}
26% {
opacity: 1;
transform: scale(0.7);
}
75% {
transform: scale(1.1);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes _714a9a7abaf0392a-checkUndraw {
0% {
opacity: 1;
transform: scale(1);
}
25% {
opacity: 1;
transform: scale(0.7);
}
26% {
opacity: 0;
transform: scale(0.7);
}
to {
opacity: 0;
}
}
._714a9a7abaf0392a-checkboxOption {
align-items: start;
border-radius: var(--radius-sm);
display: flex;
gap: var(--space-12);
max-width: 100%;
}
._714a9a7abaf0392a-spacing {
flex: 1 1 auto;
}
._714a9a7abaf0392a-checkboxIndicator {
align-items: center;
background-color: var(--checkbox-background-default);
border: 1px solid;
border-color: var(--checkbox-border-default);
border-radius: var(--radius-xs);
box-sizing: border-box;
display: flex;
flex: 0 0 auto;
height: 20px;
justify-content: center;
position: relative;
width: 20px;
}
._714a9a7abaf0392a-checkStroke {
opacity: 0;
}
._714a9a7abaf0392a-checkStroke,
._714a9a7abaf0392a-checkmark {
color: var(--checkbox-icon-active);
display: block;
height: 100%;
inset: 0;
position: absolute;
transform-box: fill-box;
transform-origin: 50% 50%;
width: 100%;
}
._714a9a7abaf0392a-dot {
opacity: 0;
transform-origin: 10px 10px;
}
._714a9a7abaf0392a-checkboxOption[data-selected] ._714a9a7abaf0392a-checkboxIndicator {
background-color: var(--checkbox-background-selected-default);
border-color: var(--checkbox-border-selected-default);
}
._714a9a7abaf0392a-checkboxOption[data-selected] ._714a9a7abaf0392a-checkStroke,
._714a9a7abaf0392a-checkboxOption[data-selected] ._714a9a7abaf0392a-checkmark {
color: var(--checkbox-icon-active);
opacity: 1;
}
._714a9a7abaf0392a-animateIn ._714a9a7abaf0392a-dot {
animation: _714a9a7abaf0392a-dotGrow 0.3s cubic-bezier(0.65, 0, 0.83, 0.83) forwards;
}
._714a9a7abaf0392a-animateIn ._714a9a7abaf0392a-checkStroke {
animation: _714a9a7abaf0392a-checkDraw 0.3s cubic-bezier(0.65, 0, 0.83, 0.83) both;
}
._714a9a7abaf0392a-animateOut ._714a9a7abaf0392a-dot {
animation: _714a9a7abaf0392a-dotShrink 0.12s cubic-bezier(0.65, 0, 0.83, 0.84) backwards;
}
._714a9a7abaf0392a-animateOut ._714a9a7abaf0392a-checkStroke {
animation: _714a9a7abaf0392a-checkUndraw 0.12s cubic-bezier(0.65, 0, 0.83, 0.84) backwards;
}
._714a9a7abaf0392a-checkboxOption:not([data-selected]):hover:not([data-disabled]) {
cursor: pointer;
}
._714a9a7abaf0392a-checkboxOption:not([data-selected]):hover:not([data-disabled]) ._714a9a7abaf0392a-checkboxIndicator {
background-color: var(--checkbox-background-hover);
border-color: var(--checkbox-border-hover);
}
._714a9a7abaf0392a-checkboxOption[data-selected]:hover:not([data-disabled]) {
cursor: pointer;
}
._714a9a7abaf0392a-checkboxOption[data-selected]:hover:not([data-disabled]) ._714a9a7abaf0392a-checkboxIndicator {
background-color: var(--checkbox-background-selected-hover);
border-color: var(--checkbox-border-selected-hover);
}
._714a9a7abaf0392a-checkboxOption[data-disabled] {
cursor: not-allowed;
opacity: 0.5;
}
._714a9a7abaf0392a-leadingIcon {
color: var(--icon-strong);
flex-shrink: 0;
height: 20px;
width: 20px;
}
._714a9a7abaf0392a-label {
align-items: flex-start;
display: flex;
gap: var(--space-4);
width: 100%;
}
.enable-forced-colors ._714a9a7abaf0392a-checkboxIndicator {
background-color: ButtonFace !important;
border-color: ButtonText !important;
}
.enable-forced-colors ._714a9a7abaf0392a-checkboxOption[data-selected] ._714a9a7abaf0392a-checkboxIndicator {
background-color: Highlight !important;
border-color: HighlightText !important;
}
.enable-forced-colors ._714a9a7abaf0392a-checkboxOption[data-selected] ._714a9a7abaf0392a-checkboxIndicator svg * {
fill: HighlightText;
}
.enable-forced-colors ._714a9a7abaf0392a-checkboxOption[data-disabled] {
opacity: 1;
}
.enable-forced-colors ._714a9a7abaf0392a-checkboxOption[data-disabled] ._714a9a7abaf0392a-checkboxIndicator {
background-color: transparent !important;
border-color: GrayText !important;
}
.enable-forced-colors ._714a9a7abaf0392a-checkboxOption[data-disabled] ._714a9a7abaf0392a-checkboxIndicator svg * {
fill: GrayText;
}
.enable-forced-colors ._714a9a7abaf0392a-checkboxOption[data-disabled][data-selected] ._714a9a7abaf0392a-checkboxIndicator svg * {
fill: GrayText;
}
.enable-forced-colors ._714a9a7abaf0392a-checkboxOption[data-disabled] ._714a9a7abaf0392a-label,
.enable-forced-colors ._714a9a7abaf0392a-checkboxOption[data-disabled] ._714a9a7abaf0392a-label > div {
color: GrayText;
}
._09aca73e6d4b214b-checkboxWrapper {
display: flex;
flex: 1 1 auto;
font-size: 16px;
max-width: 100%;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
._09aca73e6d4b214b-checkboxWrapper._09aca73e6d4b214b-row {
background-color: var(--background-base-lower);
border-radius: 3px;
padding: 10px;
}
._09aca73e6d4b214b-checkboxWrapper._09aca73e6d4b214b-row._09aca73e6d4b214b-checked {
background-color: var(--background-base-lowest);
color: var(--interactive-text-active);
}
._09aca73e6d4b214b-checkboxWrapper._09aca73e6d4b214b-row:hover:not(._09aca73e6d4b214b-checked) {
background-color: var(--interactive-background-hover);
color: var(--interactive-text-hover);
}
._09aca73e6d4b214b-checkboxWrapper._09aca73e6d4b214b-row:active:not(._09aca73e6d4b214b-checked) {
background-color: var(--interactive-background-active);
color: var(--interactive-text-active);
}
._09aca73e6d4b214b-checkboxWrapper._09aca73e6d4b214b-row ._09aca73e6d4b214b-inputDefault {
left: 10px;
top: 10px;
}
._09aca73e6d4b214b-checkboxWrapperDisabled {
opacity: 0.6;
}
._09aca73e6d4b214b-checkboxWrapperDisabled._09aca73e6d4b214b-row {
opacity: 0.3;
}
._09aca73e6d4b214b-checkboxWrapperDisabled ._09aca73e6d4b214b-checkbox {
opacity: 1;
}
._09aca73e6d4b214b-alignTop {
align-items: top;
}
._09aca73e6d4b214b-alignCenter {
align-items: center;
}
._09aca73e6d4b214b-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
left: 0;
margin: 0;
opacity: 0;
padding: 0;
position: absolute;
top: 0;
}
._09aca73e6d4b214b-inputDefault,
._09aca73e6d4b214b-inputDisabled {
height: 100%;
width: 100%;
z-index: 1;
}
._09aca73e6d4b214b-inputDefault,
._09aca73e6d4b214b-inputDisabled {
}
._09aca73e6d4b214b-inputDefault {
cursor: pointer;
}
._09aca73e6d4b214b-inputDisabled {
cursor: not-allowed;
}
._09aca73e6d4b214b-inputReadonly {
cursor: default;
height: 0;
width: 0;
z-index: -1;
}
._09aca73e6d4b214b-box {
border-radius: 6px;
}
._09aca73e6d4b214b-smallBox {
border-radius: 4px;
}
._09aca73e6d4b214b-round {
border-radius: 50%;
}
._09aca73e6d4b214b-checkbox {
align-items: center;
background-color: var(--checkbox-background-default);
border-color: var(--checkbox-border-default);
border-radius: 6px;
border-style: solid;
border-width: 1px;
box-sizing: border-box;
display: flex;
flex: 0 0 auto;
justify-content: center;
}
._09aca73e6d4b214b-checkbox._09aca73e6d4b214b-checkboxDisabled {
opacity: 0.6;
}
._09aca73e6d4b214b-checkbox._09aca73e6d4b214b-checked {
background-color: var(--checkbox-background-selected-default);
border-color: var(--checkbox-border-default);
}
._09aca73e6d4b214b-label {
color: var(--text-default);
flex: 1 1 auto;
min-width: 0;
}
._09aca73e6d4b214b-labelClickable {
cursor: pointer;
}
._09aca73e6d4b214b-labelDisabled {
cursor: not-allowed;
}
._09aca73e6d4b214b-labelForward {
padding-left: 8px;
}
._09aca73e6d4b214b-labelReversed {
padding-right: 8px;
}
.enable-forced-colors ._09aca73e6d4b214b-checkbox {
background-color: ButtonFace !important;
border-color: ButtonText !important;
}
.enable-forced-colors ._09aca73e6d4b214b-checkbox._09aca73e6d4b214b-checked {
background-color: Highlight !important;
border-color: HighlightText !important;
}
.enable-forced-colors ._09aca73e6d4b214b-checkbox._09aca73e6d4b214b-checked svg * {
fill: HighlightText;
}
.enable-forced-colors ._09aca73e6d4b214b-checkboxWrapperDisabled {
opacity: 1;
}
.enable-forced-colors ._09aca73e6d4b214b-checkboxWrapperDisabled._09aca73e6d4b214b-row {
opacity: 1;
}
.enable-forced-colors ._09aca73e6d4b214b-checkboxWrapperDisabled ._09aca73e6d4b214b-checkbox {
background-color: transparent !important;
border-color: GrayText !important;
}
.enable-forced-colors ._09aca73e6d4b214b-checkboxWrapperDisabled ._09aca73e6d4b214b-checkbox._09aca73e6d4b214b-checked svg * {
fill: GrayText;
}
.enable-forced-colors ._09aca73e6d4b214b-labelDisabled,
.enable-forced-colors ._09aca73e6d4b214b-labelDisabled > div {
color: GrayText;
}
.highlight-void-toggleables [data-toggleable-component="checkbox"] {
box-shadow:
0 0 6px 2px var(--green-360),
0 0 8px 4px var(--opacity-green-60);
}
:where(.a623833d8a73e9ad-container) {
--custom-gradient-color-start: var(--blurple-50);
--custom-gradient-color-end: var(--blurple-50);
--custom-gradient-offset-bottom: 0%;
position: relative;
}
:where(.a623833d8a73e9ad-container):before {
background: linear-gradient(270deg in oklab, var(--custom-gradient-color-end) 0, var(--custom-gradient-color-start) 100%);
border-radius: inherit;
bottom: var(--custom-gradient-offset-bottom);
content: "";
display: block;
left: 0;
-webkit-mask-image: radial-gradient(100% 100% at 50% 100%, var(--transparent) 60%, #000 100%);
mask-image: radial-gradient(100% 100% at 50% 100%, var(--transparent) 60%, #000 100%);
position: absolute;
right: 0;
top: 0;
}
:where(.a623833d8a73e9ad-container > *) {
position: relative;
}
.a623833d8a73e9ad-purple {
--custom-gradient-color-start: var(--expressive-gradient-purple-start);
--custom-gradient-color-end: var(--expressive-gradient-purple-end);
}
.a623833d8a73e9ad-blue {
--custom-gradient-color-start: var(--expressive-gradient-blue-start);
--custom-gradient-color-end: var(--expressive-gradient-blue-end);
}
.a623833d8a73e9ad-green {
--custom-gradient-color-start: var(--expressive-gradient-green-start);
--custom-gradient-color-end: var(--expressive-gradient-green-end);
}
.a623833d8a73e9ad-pink {
--custom-gradient-color-start: var(--expressive-gradient-pink-start);
--custom-gradient-color-end: var(--expressive-gradient-pink-end);
}
.a623833d8a73e9ad-nitro-pink {
--custom-gradient-color-start: var(--expressive-gradient-nitro-pink-start);
--custom-gradient-color-end: var(--expressive-gradient-nitro-pink-end);
}
.a623833d8a73e9ad-nitro-green {
--custom-gradient-color-start: var(--expressive-gradient-nitro-green-start);
--custom-gradient-color-end: var(--expressive-gradient-nitro-green-end);
}
._8ef774be6ff7f0c4-container {
align-items: center;
box-sizing: border-box;
display: flex;
justify-content: center;
overflow: hidden;
pointer-events: none;
position: relative;
width: 100%;
}
._8ef774be6ff7f0c4-aspect-ratio-21\/9 {
aspect-ratio: 21/9;
}
._8ef774be6ff7f0c4-aspect-ratio-16\/9 {
aspect-ratio: 16/9;
}
._8ef774be6ff7f0c4-aspect-ratio-6\/4 {
aspect-ratio: 6/4;
}
._8ef774be6ff7f0c4-aspect-ratio-2\/1 {
aspect-ratio: 2/1;
}
._8ef774be6ff7f0c4-aspect-ratio-1\/1 {
aspect-ratio: 1/1;
}
._8ef774be6ff7f0c4-image,
._8ef774be6ff7f0c4-video {
max-height: 100%;
max-width: 100%;
}
._8ef774be6ff7f0c4-lottie,
._8ef774be6ff7f0c4-rive {
height: 100%;
width: 100%;
}
._40128e129e4f87de-scrim {
background-color: var(--background-scrim);
bottom: 0;
left: 0;
pointer-events: auto;
position: fixed;
right: var(--devtools-sidebar-width, 0);
top: 0;
transform: translateZ(0);
}
._40128e129e4f87de-lightbox {
background-color: var(--background-scrim-lightbox);
}
._40128e129e4f87de-pointerEventsNone {
pointer-events: none;
}
._529b04291e99cf36-layer {
position: fixed;
z-index: 9999;
}
._59d0d7075b521375-layerContainer {
background: none !important;
right: var(--devtools-sidebar-width, 0);
z-index: 1002;
}
._59d0d7075b521375-clickTrapContainer,
._59d0d7075b521375-layerContainer {
bottom: 0;
left: 0;
pointer-events: none;
position: absolute;
top: 0;
}
._59d0d7075b521375-clickTrapContainer {
overflow: hidden;
right: 0;
}
._59d0d7075b521375-clickTrapContainer._59d0d7075b521375-trapClicks,
._59d0d7075b521375-layer {
pointer-events: auto;
}
._59d0d7075b521375-layer {
position: absolute;
}
._59d0d7075b521375-emptyError:empty:before {
background-color: red;
border: 10px dashed var(--green-230);
color: var(--white);
content: "RENDERING NULL FOR A POPOUT/MODAL/LAYER WILL BREAK THE APP";
display: block;
font-size: 32px;
font-weight: var(--font-weight-bold);
max-width: 500px;
padding: 8px;
word-break: break-word;
}
._59d0d7075b521375-layerHidden {
visibility: hidden;
}
._59d0d7075b521375-disabledPointerEvents {
pointer-events: none;
}
._54e4b4c7492325c1-focusTarget {
height: 0;
pointer-events: none;
width: 0;
}
._5a8382cf5c9d77df-container {
--custom-description-max-width: 70ch;
flex-grow: 1;
interpolate-size: allow-keywords;
display: grid;
grid-template-areas: "labels" "control" "helper-text";
}
._5a8382cf5c9d77df-container ._5a8382cf5c9d77df-labelContainer {
display: flex;
flex-direction: column;
gap: var(--space-4);
grid-area: labels;
min-width: 0;
}
._5a8382cf5c9d77df-container[data-layout="vertical"] ._5a8382cf5c9d77df-labelContainer {
margin-bottom: var(--space-8);
}
._5a8382cf5c9d77df-container[data-layout="horizontal-responsive"],
._5a8382cf5c9d77df-container[data-layout="horizontal"] {
-moz-column-gap: var(--space-24);
column-gap: var(--space-24);
display: grid;
grid-template-areas: "labels control" "empty helper-text";
grid-template-columns: auto var(--custom-field-horizontal-control-width, auto);
grid-template-rows: auto auto;
}
._5a8382cf5c9d77df-container[data-layout="horizontal-responsive"] ._5a8382cf5c9d77df-control,
._5a8382cf5c9d77df-container[data-layout="horizontal"] ._5a8382cf5c9d77df-control {
align-items: end;
}
._5a8382cf5c9d77df-container[data-layout="horizontal-responsive"] ._5a8382cf5c9d77df-helperTextContainer,
._5a8382cf5c9d77df-container[data-layout="horizontal"] ._5a8382cf5c9d77df-helperTextContainer {
align-self: flex-end;
contain: inline-size;
gap: 0;
padding-top: var(--space-4);
width: 100%;
}
._5a8382cf5c9d77df-container[data-layout="horizontal-responsive"] ._5a8382cf5c9d77df-description,
._5a8382cf5c9d77df-container[data-layout="horizontal"] ._5a8382cf5c9d77df-description {
max-width: var(--custom-description-max-width);
}
._5a8382cf5c9d77df-container[data-disabled="true"] {
opacity: 0.5;
}
._5a8382cf5c9d77df-control {
display: flex;
flex-direction: column;
gap: var(--space-4);
grid-area: control;
min-width: 0;
}
._5a8382cf5c9d77df-icon {
margin-bottom: -1px;
padding-right: var(--space-4);
}
._5a8382cf5c9d77df-description {
grid-area: description;
}
._5a8382cf5c9d77df-label[data-interactive="true"] {
cursor: pointer;
}
._5a8382cf5c9d77df-container[data-disabled="true"] ._5a8382cf5c9d77df-label[data-interactive="true"] {
cursor: not-allowed;
}
._5a8382cf5c9d77df-required {
display: inline-block;
margin-left: var(--space-4);
}
@keyframes _5a8382cf5c9d77df-slideDown {
0% {
height: 0;
opacity: 0;
transform: translateY(-4px);
}
to {
height: auto;
opacity: 1;
transform: translateY(0);
}
}
._5a8382cf5c9d77df-helperTextContainer {
align-items: start;
display: grid;
gap: var(--space-12);
grid-area: helper-text;
grid-template-columns: 1fr auto;
min-width: 0;
}
._5a8382cf5c9d77df-statusMessageContainer {
align-items: start;
display: grid;
gap: var(--space-4);
grid-template-columns: auto 1fr;
}
.full-motion ._5a8382cf5c9d77df-statusMessageContainer {
animation: _5a8382cf5c9d77df-slideDown 0.3s ease-in-out;
}
._5a8382cf5c9d77df-badgeContainer {
margin-left: var(--space-4);
}
@container (max-width: 480px) {
._5a8382cf5c9d77df-container[data-layout="horizontal-responsive"] {
grid-template-areas: "labels" "control" "helper-text";
grid-template-columns: 1fr;
grid-template-rows: auto;
}
._5a8382cf5c9d77df-container[data-layout="horizontal-responsive"] ._5a8382cf5c9d77df-labelContainer {
margin-bottom: var(--space-8);
}
._5a8382cf5c9d77df-container[data-layout="horizontal-responsive"] ._5a8382cf5c9d77df-control {
align-items: unset;
}
._5a8382cf5c9d77df-container[data-layout="horizontal-responsive"] ._5a8382cf5c9d77df-helperTextContainer {
align-self: unset;
contain: unset;
gap: var(--space-12);
padding-top: 0;
width: unset;
}
._5a8382cf5c9d77df-container[data-layout="horizontal-responsive"] ._5a8382cf5c9d77df-description {
max-width: none;
}
}
._0a16d68e8ea54ba6-group {
display: flex;
flex-direction: column;
gap: var(--space-16);
padding: var(--space-8) 0 var(--space-4);
}
._0a16d68e8ea54ba6-backwardsCompatibleCheckbox {
align-items: start;
display: flex;
padding: var(--space-8);
}
@keyframes _64e6155a0667273d-dotIn {
0% {
transform: scale(0);
}
40% {
transform: scale(1.2);
}
75% {
transform: scale(1);
}
to {
transform: scale(1);
}
}
@keyframes _64e6155a0667273d-fillIn {
0% {
opacity: 0;
transform: scale(0);
}
1% {
opacity: 1;
}
35% {
transform: scale(0.33);
}
40% {
transform: scale(1.15);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes _64e6155a0667273d-dotOut {
0% {
opacity: 1;
transform: scale(1);
}
40% {
transform: scale(1);
}
99% {
opacity: 1;
}
to {
opacity: 0;
transform: scale(0);
}
}
@keyframes _64e6155a0667273d-fillOut {
0% {
opacity: 1;
transform: scale(1);
}
99% {
opacity: 1;
}
to {
opacity: 0;
transform: scale(0);
}
}
._64e6155a0667273d-radioIndicator {
display: "block";
image-rendering: crisp-edges;
overflow: "visible";
}
._64e6155a0667273d-innerDotRadio,
._64e6155a0667273d-outerRadioBase,
._64e6155a0667273d-outerRadioFill,
._64e6155a0667273d-radioIndicator {
transform-box: fill-box;
transform-origin: center;
will-change: transform, opacity;
fill: none;
overflow: visible;
}
._64e6155a0667273d-radioGroupOption {
align-items: top;
border-radius: var(--radius-sm);
box-sizing: border-box;
display: flex;
gap: var(--space-12);
}
._64e6155a0667273d-radioIndicator,
._64e6155a0667273d-standaloneRadioIndicator {
background: transparent;
border-radius: var(--radius-lg);
box-sizing: border-box;
display: block;
}
._64e6155a0667273d-outerRadioBase {
fill: var(--radio-background-default);
stroke: var(--radio-border-default);
stroke-width: 2;
}
._64e6155a0667273d-outerRadioFill {
fill: none;
}
._64e6155a0667273d-radioGroupOption[data-selected] ._64e6155a0667273d-outerRadioBase,
._64e6155a0667273d-standaloneRadioIndicator[data-selected="true"] ._64e6155a0667273d-outerRadioBase {
fill: var(--radio-background-selected-default);
stroke: var(--radio-border-selected-default);
}
._64e6155a0667273d-radioGroupOption[data-selected] ._64e6155a0667273d-outerRadioFill,
._64e6155a0667273d-standaloneRadioIndicator[data-selected="true"] ._64e6155a0667273d-outerRadioFill {
fill: var(--radio-background-selected-default);
stroke: var(--radio-border-selected-default);
stroke-width: 2;
}
._64e6155a0667273d-radioGroupOption[data-selected] ._64e6155a0667273d-innerDotRadio,
._64e6155a0667273d-standaloneRadioIndicator[data-selected="true"] ._64e6155a0667273d-innerDotRadio {
fill: var(--radio-thumb-background-active);
opacity: 1;
}
._64e6155a0667273d-animateIn ._64e6155a0667273d-outerRadioFill {
animation: _64e6155a0667273d-fillIn 225ms cubic-bezier(0.33, 0, 0.67, 1) forwards;
}
._64e6155a0667273d-animateIn ._64e6155a0667273d-innerDotRadio {
animation: _64e6155a0667273d-dotIn 333ms cubic-bezier(0.26, 0.21, 0.67, 1) forwards;
}
._64e6155a0667273d-animateOut ._64e6155a0667273d-outerRadioFill {
animation: _64e6155a0667273d-fillOut 0.16s cubic-bezier(0.33, 0, 0.67, 1) both;
}
._64e6155a0667273d-animateOut ._64e6155a0667273d-innerDotRadio {
fill: var(--radio-thumb-background-active);
animation: _64e6155a0667273d-dotOut 0.25s cubic-bezier(0.33, 0, 0.25, 1) both;
}
._64e6155a0667273d-radioGroupOption:not([data-selected]):not([data-disabled]):hover {
cursor: pointer;
}
._64e6155a0667273d-radioGroupOption:not([data-selected]):not([data-disabled]):hover ._64e6155a0667273d-outerRadioBase {
fill: var(--radio-background-hover);
stroke: var(--radio-border-hover);
}
._64e6155a0667273d-radioGroupOption[data-selected]:not([data-disabled]):hover {
cursor: pointer;
}
._64e6155a0667273d-radioGroupOption[data-selected]:not([data-disabled]):hover ._64e6155a0667273d-outerRadioBase,
._64e6155a0667273d-radioGroupOption[data-selected]:not([data-disabled]):hover ._64e6155a0667273d-outerRadioFill {
fill: var(--radio-background-selected-hover);
stroke: var(--radio-border-selected-hover);
}
._64e6155a0667273d-radioGroupOption[data-disabled],
._64e6155a0667273d-standaloneRadioIndicator[data-disabled="true"] {
cursor: not-allowed;
opacity: 0.5;
}
._64e6155a0667273d-group {
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: var(--space-16);
padding: var(--space-8) 0 var(--space-4);
}
._64e6155a0667273d-radioItemIcon {
color: var(--icon-strong);
flex-shrink: 0;
height: 20px;
width: 20px;
}
._64e6155a0667273d-label {
align-items: flex-start;
display: flex;
gap: var(--space-4);
width: 100%;
}
.high-contrast-mode ._64e6155a0667273d-container {
border: 1px solid var(--border-normal);
border-radius: var(--radius-sm);
}
.high-contrast-mode ._64e6155a0667273d-radioGroupOption {
border-bottom: 1px solid var(--border-subtle);
border-radius: 0;
box-sizing: border-box;
margin-bottom: 0;
}
.enable-forced-colors ._64e6155a0667273d-outerRadioBorderStroke {
stroke: ButtonText;
opacity: 1;
}
.enable-forced-colors ._64e6155a0667273d-outerRadioBase {
fill: Canvas;
}
.enable-forced-colors ._64e6155a0667273d-innerDotRadio {
fill: HighlightText;
}
.enable-forced-colors ._64e6155a0667273d-radioGroupOption[data-disabled] {
opacity: 1;
}
.enable-forced-colors ._64e6155a0667273d-radioGroupOption[data-disabled],
.enable-forced-colors ._64e6155a0667273d-radioGroupOption[data-disabled]:hover {
color: GrayText;
}
.enable-forced-colors ._64e6155a0667273d-radioGroupOption[data-selected] ._64e6155a0667273d-outerRadioBase {
fill: Highlight;
}
.enable-forced-colors ._64e6155a0667273d-radioGroupOption[data-selected] ._64e6155a0667273d-outerRadioBorderStroke {
stroke: HighlightText;
opacity: 1;
}
.enable-forced-colors ._64e6155a0667273d-radioGroupOption[data-disabled] ._64e6155a0667273d-outerRadioBase {
fill: Canvas;
}
.enable-forced-colors ._64e6155a0667273d-radioGroupOption[data-disabled] ._64e6155a0667273d-outerRadioBorderStroke {
stroke: GrayText;
opacity: 1;
}
.enable-forced-colors ._64e6155a0667273d-radioGroupOption[data-disabled] ._64e6155a0667273d-innerDotRadio,
.enable-forced-colors ._64e6155a0667273d-standaloneRadioIndicator[data-disabled="true"] ._64e6155a0667273d-innerDotRadio {
fill: GrayText;
}
.enable-forced-colors ._64e6155a0667273d-standaloneRadioIndicator[data-disabled="true"] {
opacity: 1;
}
.enable-forced-colors ._64e6155a0667273d-standaloneRadioIndicator[data-disabled="true"] ._64e6155a0667273d-outerRadioBase {
fill: Canvas;
}
.enable-forced-colors ._64e6155a0667273d-standaloneRadioIndicator[data-disabled="true"] ._64e6155a0667273d-outerRadioBorderStroke {
stroke: GrayText;
opacity: 1;
}
._88a69141dd70013a-radioBar {
-webkit-border-start: 3px solid var(--radio-bar-accent-color);
border-inline-start: 3px solid var(--radio-bar-accent-color);
border-radius: 4px;
display: grid;
grid-gap: 8px;
align-items: center;
padding: var(--space-12) var(--space-16) !important;
}
._88a69141dd70013a-radioBar._88a69141dd70013a-radioPositionLeft {
grid-template-columns: auto 1fr;
}
._88a69141dd70013a-radioBar._88a69141dd70013a-radioPositionRight {
grid-template-columns: 1fr auto;
}
._88a69141dd70013a-item[aria-checked="true"] {
color: var(--interactive-text-active);
}
._88a69141dd70013a-itemFilled[aria-checked="true"] {
background-color: var(--background-mod-subtle);
}
._88a69141dd70013a-radioIconForeground {
color: var(--interactive-text-active);
}
._88a69141dd70013a-item {
border-radius: 3px;
color: var(--text-strong);
cursor: pointer;
display: block;
flex-direction: row;
margin-bottom: var(--space-4);
}
._88a69141dd70013a-item:hover:not([aria-checked="true"]):not(._88a69141dd70013a-disabled) {
color: var(--interactive-text-hover);
}
._88a69141dd70013a-item:active:not([aria-checked="true"]):not(._88a69141dd70013a-disabled) {
color: var(--interactive-text-active);
}
._88a69141dd70013a-collapsibleItem {
border-radius: 3px;
color: var(--interactive-text-default);
cursor: pointer;
display: block;
flex: 1;
flex-direction: row;
}
._88a69141dd70013a-collapsibleItem:hover:not([aria-checked="true"]):not(._88a69141dd70013a-disabled) {
color: var(--interactive-text-hover);
}
._88a69141dd70013a-collapsibleItem:active:not([aria-checked="true"]):not(._88a69141dd70013a-disabled) {
color: var(--interactive-text-active);
}
._88a69141dd70013a-itemFilled {
background: none;
}
._88a69141dd70013a-itemFilled:hover:not([aria-checked="true"]):not(._88a69141dd70013a-disabled) {
background-color: var(--background-mod-subtle);
color: var(--text-strong);
}
._88a69141dd70013a-itemFilled:active:not([aria-checked="true"]):not(._88a69141dd70013a-disabled) {
background-color: var(--background-mod-normal);
color: var(--text-strong);
}
._88a69141dd70013a-tooltipWrapper {
display: flex;
flex-direction: column;
margin-bottom: 8px;
}
._88a69141dd70013a-tooltipWrapper:last-child {
margin: 0;
}
.high-contrast-mode ._88a69141dd70013a-container {
border: 1px solid var(--border-normal);
border-radius: var(--radius-sm);
}
._88a69141dd70013a-disabled {
cursor: not-allowed;
opacity: 0.3;
}
._88a69141dd70013a-info {
-webkit-margin-end: 8px;
display: grid;
margin-inline-end: 8px;
width: 100%;
grid-gap: 4px;
align-items: center;
}
._88a69141dd70013a-icon {
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
._88a69141dd70013a-item,
._88a69141dd70013a-itemFilled[aria-checked="true"],
._88a69141dd70013a-item[aria-checked="true"],
._88a69141dd70013a-radioBar {
border-radius: var(--radius-sm);
}
._88a69141dd70013a-radioIndicator {
background: transparent;
border-radius: 50%;
box-sizing: border-box;
height: 24px;
width: 24px;
}
._88a69141dd70013a-radioIndicatorGroup {
display: flex;
flex-direction: row;
gap: var(--space-8);
}
._88a69141dd70013a-refreshIcon {
fill: #fff;
}
._88a69141dd70013a-refreshIconStroke {
stroke: var(--checkbox-border-default);
}
._88a69141dd70013a-refreshIconFill {
fill: transparent;
}
._88a69141dd70013a-radioIndicatorChecked ._88a69141dd70013a-refreshIconStroke {
stroke: var(--checkbox-border-default);
}
._88a69141dd70013a-radioIndicatorChecked ._88a69141dd70013a-refreshIconFill {
fill: var(--background-brand);
}
.full-motion ._88a69141dd70013a-item {
transition:
background-color 0.1s ease,
color 0.1s ease;
}
.high-contrast-mode ._88a69141dd70013a-item {
border-bottom: 1px solid var(--border-subtle);
border-radius: 0;
box-sizing: border-box;
margin-bottom: 0;
}
.high-contrast-mode ._88a69141dd70013a-item:last-child {
border-bottom: none;
}
.high-contrast-mode ._88a69141dd70013a-item:last-child ._88a69141dd70013a-radioBar {
border-end-start-radius: var(--radius-sm);
}
.high-contrast-mode ._88a69141dd70013a-item:first-child ._88a69141dd70013a-radioBar {
border-start-start-radius: var(--radius-xs);
}
.high-contrast-mode ._88a69141dd70013a-radioBar {
border-radius: 0;
}
.enable-forced-colors ._88a69141dd70013a-radioBar {
background-color: ButtonFace;
border: 1px solid ButtonText;
color: ButtonText;
forced-color-adjust: none;
}
.enable-forced-colors ._88a69141dd70013a-radioIconForeground {
color: HighlightText;
}
.enable-forced-colors ._88a69141dd70013a-refreshIcon {
fill: HighlightText;
}
.enable-forced-colors ._88a69141dd70013a-refreshIconStroke {
stroke: ButtonText;
}
.enable-forced-colors ._88a69141dd70013a-refreshIconFill {
fill: transparent;
}
.enable-forced-colors ._88a69141dd70013a-item[aria-checked="true"] ._88a69141dd70013a-radioBar {
background-color: Highlight;
border-color: Highlight;
color: HighlightText;
}
.enable-forced-colors ._88a69141dd70013a-radioIndicatorChecked ._88a69141dd70013a-refreshIconStroke {
stroke: HighlightText;
}
.enable-forced-colors ._88a69141dd70013a-radioIndicatorChecked ._88a69141dd70013a-refreshIconFill {
fill: Highlight;
}
.enable-forced-colors ._88a69141dd70013a-item._88a69141dd70013a-disabled {
opacity: 1;
}
.enable-forced-colors ._88a69141dd70013a-item._88a69141dd70013a-disabled,
.enable-forced-colors ._88a69141dd70013a-item._88a69141dd70013a-disabled:hover {
color: GrayText;
}
.enable-forced-colors ._88a69141dd70013a-item._88a69141dd70013a-disabled ._88a69141dd70013a-radioBar {
background-color: Canvas;
border-color: GrayText;
color: GrayText;
}
.enable-forced-colors ._88a69141dd70013a-radioIndicatorDisabled ._88a69141dd70013a-radioIconForeground {
color: GrayText;
}
.enable-forced-colors ._88a69141dd70013a-radioIndicatorDisabled ._88a69141dd70013a-refreshIcon {
fill: GrayText;
}
.enable-forced-colors ._88a69141dd70013a-radioIndicatorDisabled ._88a69141dd70013a-refreshIconStroke {
stroke: GrayText;
}
.enable-forced-colors ._88a69141dd70013a-radioIndicatorDisabled ._88a69141dd70013a-refreshIconFill {
fill: Canvas;
}
.highlight-void-toggleables [data-toggleable-component="radiogroup"] {
box-shadow:
0 0 6px 2px var(--yellow-360),
0 0 8px 4px var(--opacity-yellow-60);
}
.f0960a86b97d289c-avatar,
.f0960a86b97d289c-image {
height: 16px;
object-fit: contain;
width: 16px;
}
.f0960a86b97d289c-avatar {
background-color: #000;
object-fit: cover;
overflow: hidden;
}
.f0960a86b97d289c-avatar,
.f0960a86b97d289c-roleDot {
border-radius: var(--radius-round);
}
.f0960a86b97d289c-roleDot {
border: 1px solid var(--text-strong);
box-sizing: border-box;
display: block;
height: 16px;
width: 16px;
}
.cfee8f19fcd7f4a6-tagGroup {
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
}
.cfee8f19fcd7f4a6-tagList {
display: contents;
}
.cfee8f19fcd7f4a6-tag {
align-items: center;
background-color: var(--background-mod-subtle);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
box-sizing: border-box;
cursor: default;
display: inline-flex;
gap: var(--space-8);
min-height: 40px;
outline: none;
padding: var(--space-4) var(--space-12);
transition:
background-color 50ms ease-in,
color 50ms ease-in,
border-color 50ms ease-in,
opacity 50ms ease-in;
white-space: nowrap;
}
.cfee8f19fcd7f4a6-tag:has([slot="remove"]) {
padding-right: var(--space-8);
}
.cfee8f19fcd7f4a6-tag[data-selection-mode="multiple"],
.cfee8f19fcd7f4a6-tag[data-selection-mode="single"] {
cursor: pointer;
}
.cfee8f19fcd7f4a6-tag[data-selection-mode="multiple"][data-hovered],
.cfee8f19fcd7f4a6-tag[data-selection-mode="single"][data-hovered] {
background: var(--background-mod-normal);
border-color: var(--border-normal);
}
.cfee8f19fcd7f4a6-tag[data-selection-mode="multiple"][data-hovered][data-selected],
.cfee8f19fcd7f4a6-tag[data-selection-mode="single"][data-hovered][data-selected] {
background: var(--opacity-blurple-16);
border-color: var(--input-border-active);
}
.cfee8f19fcd7f4a6-tag[data-focus-visible] {
outline: 1px solid var(--border-focus);
outline-offset: 1px;
}
.cfee8f19fcd7f4a6-tag[data-selected] {
background: var(--opacity-blurple-12);
border-color: var(--input-border-active);
}
.cfee8f19fcd7f4a6-tag[data-disabled] {
cursor: not-allowed;
opacity: 0.5;
}
.cfee8f19fcd7f4a6-tag [slot="remove"] {
align-items: center;
aspect-ratio: 1/1;
background: none;
border: 1px solid transparent;
border-radius: var(--radius-xs);
display: flex;
height: calc(100% - var(--space-8));
justify-content: center;
outline: none;
padding: 0;
transition:
background-color 50ms ease-in,
color 50ms ease-in,
border-color 50ms ease-in,
opacity 50ms ease-in;
}
.cfee8f19fcd7f4a6-tag [slot="remove"][data-hovered] {
background-color: var(--control-icon-only-background-hover);
border-color: var(--control-icon-only-border-hover);
transition:
background-color 0.15s ease-out,
color 0.15s ease-out,
border-color 0.15s ease-out,
opacity 0.15s ease-out;
}
.cfee8f19fcd7f4a6-tag [slot="remove"][data-focus-visible] {
outline: 2px solid var(--border-focus);
outline-offset: -1px;
}
.cfee8f19fcd7f4a6-tagGroup[data-layout="inline"] {
display: contents;
}
.cfee8f19fcd7f4a6-tagGroup[data-layout="inline"] .cfee8f19fcd7f4a6-tag {
border-radius: var(--radius-xs);
gap: var(--space-4);
min-height: 30px;
padding: var(--space-4) var(--space-8);
}
.cfee8f19fcd7f4a6-tagGroup[data-layout="inline"] .cfee8f19fcd7f4a6-tag:has([slot="remove"]) {
padding-right: var(--space-4);
}
.cfee8f19fcd7f4a6-tagGroup[data-layout="inline"] [slot="remove"] {
height: 100%;
}
.a2827844fe91d55f-container {
cursor: pointer;
}
.a2827844fe91d55f-container[data-disabled] {
cursor: not-allowed;
}
.a2827844fe91d55f-switchIndicator {
border: 1px solid transparent;
border-radius: var(--radius-lg);
box-sizing: border-box;
height: 24px;
position: relative;
width: 48px;
}
.a2827844fe91d55f-switchIndicator .a2827844fe91d55f-thumb {
align-items: center;
display: flex;
height: 24px;
justify-content: center;
margin-left: -1px;
margin-top: -1px;
position: absolute;
width: 24px;
}
._3f21e80f8677ec40-container {
border: 1px solid transparent;
border-radius: 16px;
box-sizing: border-box;
cursor: pointer;
height: 28px;
position: relative;
width: 44px;
}
.high-contrast-mode ._3f21e80f8677ec40-container {
border-color: var(--border-strong);
}
._3f21e80f8677ec40-container._3f21e80f8677ec40-disabled {
cursor: not-allowed;
}
._3f21e80f8677ec40-container._3f21e80f8677ec40-checked {
border-color: var(--control-primary-border-default);
}
._3f21e80f8677ec40-input {
border-radius: 14px;
cursor: pointer;
height: 100%;
left: 0;
margin: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
}
._3f21e80f8677ec40-input[disabled] {
pointer-events: none;
}
._3f21e80f8677ec40-slider {
display: block;
height: 20px;
left: 0;
margin: 3px;
position: absolute;
width: 28px;
}
.enable-forced-colors ._3f21e80f8677ec40-container {
background-color: ButtonFace !important;
border: 2px solid ButtonText;
height: 28px;
width: 44px;
}
.enable-forced-colors ._3f21e80f8677ec40-container._3f21e80f8677ec40-checked {
background-color: Highlight !important;
border-color: Highlight;
}
.enable-forced-colors ._3f21e80f8677ec40-container._3f21e80f8677ec40-disabled {
background-color: Canvas !important;
border-color: GrayText;
opacity: 1 !important;
}
.enable-forced-colors ._3f21e80f8677ec40-container._3f21e80f8677ec40-disabled._3f21e80f8677ec40-checked {
background-color: GrayText !important;
border-color: GrayText;
}
.highlight-void-toggleables [data-toggleable-component="switch"] {
box-shadow:
0 0 6px 2px var(--blue-360),
0 0 8px 4px var(--opacity-blue-60);
}
._7fb92eabdaf538f9-fieldset {
display: flex;
flex-direction: column;
gap: var(--space-16);
}
._7fb92eabdaf538f9-description,
._7fb92eabdaf538f9-legend {
margin-bottom: var(--space-12);
}
._7fb92eabdaf538f9-legend + ._7fb92eabdaf538f9-description {
margin-bottom: 0;
margin-top: -8px;
}
._72c3859781ebce8f-container {
display: flex;
flex-direction: column;
flex-grow: 1;
}
._72c3859781ebce8f-container[data-full-width="true"] {
flex: 1 1 auto;
width: 100%;
}
._72c3859781ebce8f-container[data-full-width="true"] ._72c3859781ebce8f-input,
._72c3859781ebce8f-container[data-full-width="true"] ._72c3859781ebce8f-wrapper {
width: 100%;
}
._72c3859781ebce8f-wrapper {
position: relative;
--custom-input-background-color: var(--input-background-default);
--custom-input-border-color: var(--input-border-default);
--custom-input-text-color: var(--input-text-default);
--custom-input-hover-border-color: var(--input-border-hover);
--custom-input-focus-border-color: var(--input-border-active);
align-items: center;
background-color: var(--custom-input-background-color);
border: 1px solid var(--custom-input-border-color);
border-radius: var(--radius-sm);
box-sizing: border-box;
color: var(--custom-input-text-color);
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
transition: border-color 0.1s ease;
}
._72c3859781ebce8f-wrapper[data-read-only="true"] {
--custom-input-border-color: var(--input-border-readonly);
}
._72c3859781ebce8f-wrapper:not([data-read-only="true"]):not([data-disabled="true"]):not(:focus-within):hover {
--custom-input-border-color: var(--custom-input-hover-border-color);
}
._72c3859781ebce8f-wrapper:not([data-read-only="true"]):has(input:focus, textarea:focus) {
--custom-input-border-color: var(--custom-input-focus-border-color);
}
.mana-text-inputs ._72c3859781ebce8f-wrapper:not([data-read-only="true"]):has(input:focus, textarea:focus) {
outline: 2px solid var(--custom-input-focus-border-color);
outline-offset: -2px;
}
._72c3859781ebce8f-wrapper[data-error="true"] {
--custom-input-border-color: var(--input-border-error-default);
--custom-input-text-color: var(--input-text-error-default);
--custom-input-background-color: var(--input-background-error-default);
--custom-input-hover-border-color: var(--input-border-error-default);
--custom-input-focus-border-color: var(--input-border-error-default);
}
.mana-text-inputs ._72c3859781ebce8f-wrapper[data-error="true"]:not([data-read-only="true"], [data-disabled="true"], :focus-within):hover {
outline: 2px solid var(--input-border-error-default);
outline-offset: -2px;
}
._72c3859781ebce8f-wrapper[data-disabled="true"] {
cursor: not-allowed;
opacity: 0.5;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.enable-forced-colors ._72c3859781ebce8f-wrapper {
border: 1px solid ButtonText;
}
.enable-forced-colors ._72c3859781ebce8f-wrapper:not([data-read-only="true"]):focus-within {
border-color: Highlight;
}
.enable-forced-colors ._72c3859781ebce8f-wrapper[data-disabled="true"] {
background-color: Canvas;
border-color: GrayText;
opacity: 1;
}
.a35aceac18e90e69-wrapper svg {
display: block;
}
._1de9cda3548b962f-divider {
border-top: thin solid var(--border-subtle);
height: 1px;
width: 100%;
}
.aa8da23faa27393c-header,
.aa8da23faa27393c-item {
flex-shrink: 0;
overflow: hidden;
}
.aa8da23faa27393c-header,
.aa8da23faa27393c-headerText,
.aa8da23faa27393c-item {
text-overflow: ellipsis;
white-space: nowrap;
}
.aa8da23faa27393c-headerText {
overflow-x: hidden;
}
.aa8da23faa27393c-header {
color: var(--channels-default);
}
.aa8da23faa27393c-item {
cursor: pointer;
font-size: 16px;
font-weight: var(--font-weight-medium);
line-height: 20px;
position: relative;
}
.aa8da23faa27393c-brand.aa8da23faa27393c-item,
.aa8da23faa27393c-themed.aa8da23faa27393c-item {
color: var(--text-subtle);
}
.aa8da23faa27393c-brand.aa8da23faa27393c-item:active,
.aa8da23faa27393c-brand.aa8da23faa27393c-item:hover,
.aa8da23faa27393c-themed.aa8da23faa27393c-item:active,
.aa8da23faa27393c-themed.aa8da23faa27393c-item:hover {
color: var(--text-strong);
}
.aa8da23faa27393c-separator {
background-color: var(--border-subtle);
}
.aa8da23faa27393c-selected.aa8da23faa27393c-item,
.aa8da23faa27393c-selected.aa8da23faa27393c-item:hover {
color: var(--text-strong);
cursor: default;
}
.aa8da23faa27393c-selected {
cursor: default;
}
.aa8da23faa27393c-disabled.aa8da23faa27393c-item,
.aa8da23faa27393c-disabled.aa8da23faa27393c-item:hover {
color: var(--text-muted);
cursor: default;
}
.density-compact .aa8da23faa27393c-side .aa8da23faa27393c-item {
line-height: 16px;
}
.density-cozy .aa8da23faa27393c-side .aa8da23faa27393c-item {
line-height: 24px;
}
.aa8da23faa27393c-side {
display: flex;
flex: 1;
flex-direction: column;
}
.aa8da23faa27393c-side .aa8da23faa27393c-header,
.aa8da23faa27393c-side .aa8da23faa27393c-item {
padding: 6px 10px;
}
.aa8da23faa27393c-side .aa8da23faa27393c-header:first-child {
padding-top: 0;
}
.aa8da23faa27393c-side .aa8da23faa27393c-item {
border-radius: 4px;
margin-bottom: 2px;
padding-bottom: 6px;
padding-top: 6px;
}
.aa8da23faa27393c-side .aa8da23faa27393c-separator {
height: 1px;
margin: 8px 10px;
}
.aa8da23faa27393c-top {
border-bottom-color: var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
display: flex;
flex-direction: row;
}
.aa8da23faa27393c-top .aa8da23faa27393c-item {
--selected-tab-item-color: var(--interactive-text-active);
border-bottom: none !important;
font-size: 14px;
font-weight: 600;
line-height: 14px;
margin-bottom: -1px;
padding-bottom: 16px;
position: relative;
--tab-item-color: var(--text-strong);
}
.aa8da23faa27393c-top .aa8da23faa27393c-item.aa8da23faa27393c-selected:after,
.aa8da23faa27393c-top .aa8da23faa27393c-item:hover:after {
background: var(--selected-tab-item-color);
border-top-left-radius: 2px;
border-top-right-radius: 2px;
content: "";
height: 2px;
left: 0;
margin-top: -2px;
position: absolute;
top: 100%;
width: 100%;
z-index: 1;
}
.aa8da23faa27393c-top .aa8da23faa27393c-item.aa8da23faa27393c-selected {
color: var(--selected-tab-item-color);
}
.aa8da23faa27393c-top .aa8da23faa27393c-item.aa8da23faa27393c-brand {
--selected-tab-item-color: var(--text-brand);
}
.aa8da23faa27393c-top .aa8da23faa27393c-item.aa8da23faa27393c-brand:hover {
color: var(--text-strong);
}
.aa8da23faa27393c-top .aa8da23faa27393c-item + .aa8da23faa27393c-item {
margin-left: var(--space-xl);
}
.aa8da23faa27393c-top .aa8da23faa27393c-disabled.aa8da23faa27393c-item {
cursor: not-allowed;
}
.aa8da23faa27393c-top .aa8da23faa27393c-themed.aa8da23faa27393c-item:hover {
border-bottom-color: var(--interactive-text-hover);
}
.aa8da23faa27393c-top .aa8da23faa27393c-selected.aa8da23faa27393c-themed.aa8da23faa27393c-item,
.aa8da23faa27393c-top .aa8da23faa27393c-themed.aa8da23faa27393c-item:active {
border-bottom-color: var(--interactive-text-active);
}
.aa8da23faa27393c-top .aa8da23faa27393c-brand.aa8da23faa27393c-item:hover {
border-bottom-color: var(--brand-500);
}
.aa8da23faa27393c-top .aa8da23faa27393c-brand.aa8da23faa27393c-item:active,
.aa8da23faa27393c-top .aa8da23faa27393c-brand.aa8da23faa27393c-selected.aa8da23faa27393c-item {
border-bottom-color: var(--control-brand-foreground);
}
.aa8da23faa27393c-top .aa8da23faa27393c-disabled.aa8da23faa27393c-brand.aa8da23faa27393c-item:hover,
.aa8da23faa27393c-top .aa8da23faa27393c-disabled.aa8da23faa27393c-themed.aa8da23faa27393c-item:hover {
border-bottom-color: transparent;
}
.aa8da23faa27393c-topPill {
display: flex;
flex-direction: row;
}
.aa8da23faa27393c-topPill .aa8da23faa27393c-item {
border-radius: var(--radius-sm);
cursor: pointer;
margin: 0 8px;
min-height: 32px;
padding: 4px 12px;
}
.aa8da23faa27393c-topPill .aa8da23faa27393c-separator {
width: 1px;
}
.aa8da23faa27393c-topPill .aa8da23faa27393c-item.aa8da23faa27393c-disabled {
cursor: not-allowed;
}
.aa8da23faa27393c-side .aa8da23faa27393c-themed.aa8da23faa27393c-item:hover:not(.aa8da23faa27393c-disabled),
.aa8da23faa27393c-topPill .aa8da23faa27393c-themed.aa8da23faa27393c-item:hover:not(.aa8da23faa27393c-disabled) {
background-color: var(--background-mod-subtle);
}
.aa8da23faa27393c-side .aa8da23faa27393c-themed.aa8da23faa27393c-item:active:not(.aa8da23faa27393c-disabled),
.aa8da23faa27393c-side .aa8da23faa27393c-themed.aa8da23faa27393c-selected.aa8da23faa27393c-item,
.aa8da23faa27393c-side .aa8da23faa27393c-themed.aa8da23faa27393c-selected:hover:not(.aa8da23faa27393c-disabled),
.aa8da23faa27393c-topPill .aa8da23faa27393c-themed.aa8da23faa27393c-item:active:not(.aa8da23faa27393c-disabled),
.aa8da23faa27393c-topPill .aa8da23faa27393c-themed.aa8da23faa27393c-selected.aa8da23faa27393c-item,
.aa8da23faa27393c-topPill .aa8da23faa27393c-themed.aa8da23faa27393c-selected:hover:not(.aa8da23faa27393c-disabled) {
background-color: var(--background-mod-strong);
}
.aa8da23faa27393c-side .aa8da23faa27393c-destructive.aa8da23faa27393c-item:not(.aa8da23faa27393c-disabled),
.aa8da23faa27393c-topPill .aa8da23faa27393c-destructive.aa8da23faa27393c-item:not(.aa8da23faa27393c-disabled) {
color: var(--text-feedback-critical);
}
.aa8da23faa27393c-side .aa8da23faa27393c-destructive.aa8da23faa27393c-item:hover:not(.aa8da23faa27393c-disabled),
.aa8da23faa27393c-topPill .aa8da23faa27393c-destructive.aa8da23faa27393c-item:hover:not(.aa8da23faa27393c-disabled) {
background-color: var(--background-feedback-critical);
color: var(--text-feedback-critical);
}
.aa8da23faa27393c-side .aa8da23faa27393c-destructive.aa8da23faa27393c-item:active:not(.aa8da23faa27393c-disabled),
.aa8da23faa27393c-side .aa8da23faa27393c-destructive.aa8da23faa27393c-selected.aa8da23faa27393c-item:not(.aa8da23faa27393c-disabled),
.aa8da23faa27393c-topPill .aa8da23faa27393c-destructive.aa8da23faa27393c-item:active:not(.aa8da23faa27393c-disabled),
.aa8da23faa27393c-topPill .aa8da23faa27393c-destructive.aa8da23faa27393c-selected.aa8da23faa27393c-item:not(.aa8da23faa27393c-disabled) {
background-color: var(--background-feedback-critical);
color: var(--white);
}
.full-motion .aa8da23faa27393c-item {
transition: background-color 0.3s ease;
}
.enable-forced-colors .aa8da23faa27393c-item {
background-color: ButtonFace !important;
border: 1px solid ButtonFace;
color: ButtonText !important;
forced-color-adjust: none;
}
.enable-forced-colors .aa8da23faa27393c-item:hover {
background-color: ButtonFace !important;
border-color: ButtonText;
color: ButtonText !important;
}
.enable-forced-colors .aa8da23faa27393c-item[aria-selected="true"],
.enable-forced-colors .aa8da23faa27393c-item[aria-selected="true"]:hover,
.enable-forced-colors .aa8da23faa27393c-selected.aa8da23faa27393c-item,
.enable-forced-colors .aa8da23faa27393c-selected.aa8da23faa27393c-item:hover {
background-color: HighlightText !important;
border-color: Highlight;
color: Highlight !important;
}
.enable-forced-colors .aa8da23faa27393c-disabled.aa8da23faa27393c-item,
.enable-forced-colors .aa8da23faa27393c-disabled.aa8da23faa27393c-item:hover {
background-color: Canvas !important;
border-color: Canvas !important;
color: GrayText !important;
}
.enable-forced-colors .aa8da23faa27393c-top .aa8da23faa27393c-item {
border-radius: 4px 4px 0 0;
padding-left: 4px;
padding-right: 4px;
}
.refresh-fast-follow-distinct-borders .aa8da23faa27393c-top {
border-color: var(--app-frame-border);
}
._2fba11c76b37269d-container {
background-color: var(--background-mod-muted);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
width: 100%;
}
._2fba11c76b37269d-footer,
._2fba11c76b37269d-toolbar {
align-items: center;
display: flex;
justify-content: space-between;
padding: 16px;
}
._2fba11c76b37269d-table {
border-collapse: collapse;
color: var(--text-default);
overflow: scroll;
table-layout: fixed;
width: 100%;
}
._2fba11c76b37269d-header {
border-bottom: 1px solid var(--border-subtle);
}
._2fba11c76b37269d-body {
padding: 8px;
}
._2fba11c76b37269d-row {
border-bottom: 1px solid var(--border-subtle);
outline: none;
transition: background-color 0.1s ease;
white-space: nowrap;
}
._2fba11c76b37269d-row[data-focus-visible] {
box-shadow: 0 0 0 4px var(--blue-345);
}
._2fba11c76b37269d-row[data-pressed] {
background-color: var(--interactive-background-active);
}
._2fba11c76b37269d-row[data-hovered] {
background-color: var(--interactive-background-hover);
}
._2fba11c76b37269d-row[aria-selected="true"] {
background-color: var(--interactive-background-selected);
}
._2fba11c76b37269d-row:last-child {
border-bottom: none;
}
._2fba11c76b37269d-column {
outline: none;
padding: 16px;
}
._2fba11c76b37269d-column[data-focus-visible] {
box-shadow: 0 0 0 4px var(--blue-345);
}
._2fba11c76b37269d-columnText {
text-align: start;
}
._2fba11c76b37269d-cell {
outline: none;
padding: 16px;
}
._2fba11c76b37269d-cell[data-focus-visible] {
box-shadow: 0 0 0 4px var(--blue-345);
}
.edefb8e22d63c542-anchor {
color: var(--text-link);
-webkit-text-decoration: var(--link-decoration);
text-decoration: var(--link-decoration);
}
.edefb8e22d63c542-anchorUnderlineOnHover:hover {
text-decoration: underline;
}
.enable-forced-colors .edefb8e22d63c542-anchor,
.enable-forced-colors .edefb8e22d63c542-anchorUnderlineOnHover {
background-color: Canvas;
color: LinkText !important;
text-decoration: underline;
}
.enable-forced-colors .edefb8e22d63c542-anchor svg,
.enable-forced-colors .edefb8e22d63c542-anchorUnderlineOnHover svg {
color: currentColor;
}
.enable-forced-colors .edefb8e22d63c542-anchor:not([href]),
.enable-forced-colors .edefb8e22d63c542-anchorUnderlineOnHover:not([href]) {
background-color: ButtonFace;
color: ButtonText !important;
}
html.decorate-links ._41f68f5eee7f9abd-lowSaturationUnderline {
text-decoration: underline !important;
}
[data-accessibility*="desaturate"] {
filter: saturate(var(--saturation-factor, 1));
}
._41f68f5eee7f9abd-desaturate {
filter: saturate(var(--saturation-factor, 1));
}
.theme-dark {
--brightness: calc(1.5 - var(--saturation-factor, 1) * 0.5);
--contrast: var(--saturation-factor, 1);
}
.theme-light {
--brightness: calc(0.5 + var(--saturation-factor, 1) * 0.5);
--contrast: var(--saturation-factor, 1);
}
.desaturate-user-colors ._41f68f5eee7f9abd-desaturateUserColors {
filter: saturate(var(--saturation-factor, 1)) contrast(var(--contrast, 1)) brightness(var(--brightness, 1));
}
._201d5e8a3c09670a-button {
align-items: center;
background: none;
border: 1px solid var(--opacity-white-8);
border-radius: 8px;
box-sizing: border-box;
display: flex;
font-size: 14px;
font-weight: var(--font-weight-medium);
justify-content: center;
line-height: 16px;
padding: 2px 16px;
position: relative;
transition-duration: 0.2s;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
._201d5e8a3c09670a-button:disabled,
._201d5e8a3c09670a-button[aria-disabled="true"] {
cursor: not-allowed;
opacity: 0.5;
}
._201d5e8a3c09670a-button ._201d5e8a3c09670a-contents {
--button--underline-color: transparent;
background-image: linear-gradient(
to top,
transparent,
transparent var(--custom-button-link-underline-offset),
var(--button--underline-color) var(--custom-button-link-underline-offset),
var(--button--underline-color) var(--custom-button-link-underline-stop),
transparent var(--custom-button-link-underline-stop)
);
}
.highlight-void-buttons ._201d5e8a3c09670a-button {
box-shadow: 0 0 4px 4px var(--yellow-new-30);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorBrand {
background-color: var(--control-primary-background-default);
border: 1px solid var(--control-primary-border-default);
color: var(--control-primary-text-default);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorBrand:hover {
background-color: var(--control-primary-background-hover);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorBrand:active {
background-color: var(--control-primary-background-active);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorBrand ._201d5e8a3c09670a-spinnerItem {
background-color: var(--control-primary-text-default);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorBrand:disabled,
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorBrand[aria-disabled="true"] {
background-color: var(--control-primary-background-default);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorBrandInverted {
background-color: var(--control-overlay-primary-background-default);
color: var(--control-primary-text-default);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorBrandInverted:hover {
background-color: var(--control-overlay-primary-background-hover);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorBrandInverted:active {
background-color: var(--control-overlay-primary-background-active);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorBrandInverted ._201d5e8a3c09670a-spinnerItem {
background-color: var(--control-primary-text-default);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorBrandInverted:disabled,
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorBrandInverted[aria-disabled="true"] {
background-color: var(--control-overlay-primary-background-default);
}
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorBrand {
border-color: var(--control-secondary-border-default);
color: var(--control-secondary-text-default);
}
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorBrand:hover {
background-color: var(--button-outline-brand-background-hover);
border-color: var(--control-secondary-border-hover);
color: var(--control-secondary-text-hover);
}
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorBrand:active {
background-color: var(--control-secondary-background-active);
border-color: var(--button-outline-brand-border-active);
color: var(--control-secondary-text-active);
}
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorBrand:disabled,
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorBrand[aria-disabled="true"] {
background-color: transparent;
}
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorBrand ._201d5e8a3c09670a-spinnerItem {
background-color: var(--brand-500);
}
._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorBrand {
color: var(--brand-500);
}
._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorBrand:hover ._201d5e8a3c09670a-contents {
--button--underline-color: var(--brand-500);
}
._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorBrand:disabled ._201d5e8a3c09670a-contents,
._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorBrand[aria-disabled="true"] ._201d5e8a3c09670a-contents {
background-image: none;
}
._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorBrand ._201d5e8a3c09670a-spinnerItem {
background-color: var(--brand-500);
}
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorPrimary {
border-color: var(--control-secondary-border-default);
color: var(--button-outline-primary-text);
}
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorPrimary:hover {
background-color: var(--control-secondary-background-hover);
border-color: var(--control-secondary-border-hover);
color: var(--control-secondary-text-hover);
}
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorPrimary:active {
background-color: var(--control-secondary-background-active);
border-color: var(--control-secondary-border-active);
color: var(--control-secondary-text-active);
}
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorPrimary:disabled,
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorPrimary[aria-disabled="true"] {
background-color: transparent;
color: var(--button-outline-primary-text);
}
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorPrimary ._201d5e8a3c09670a-spinnerItem {
background-color: var(--white);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorLink {
background-color: var(--text-link);
color: var(--white);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorLink:hover {
background-color: var(--blue-500);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorLink:active {
background-color: var(--blue-530);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorLink ._201d5e8a3c09670a-spinnerItem {
background-color: var(--white);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorLink:disabled,
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorLink[aria-disabled="true"] {
background-color: var(--text-link);
}
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorLink {
border-color: var(--text-link);
color: var(--text-link);
}
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorLink:active {
background-color: hsl(var(--text-link-hsl) / 0.1);
}
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorLink:disabled,
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorLink[aria-disabled="true"] {
background-color: transparent;
}
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorLink ._201d5e8a3c09670a-spinnerItem {
background-color: var(--text-link);
}
._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorLink {
color: var(--text-link);
}
._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorLink:hover ._201d5e8a3c09670a-contents {
--button--underline-color: var(--text-link);
}
._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorLink:disabled ._201d5e8a3c09670a-contents,
._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorLink[aria-disabled="true"] ._201d5e8a3c09670a-contents {
background-image: none;
}
._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorLink ._201d5e8a3c09670a-spinnerItem {
background-color: var(--text-link);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorWhite {
background-color: var(--control-overlay-primary-background-default);
border-color: var(--opacity-8);
color: var(--control-primary-text-default);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorWhite:hover {
background-color: var(--control-overlay-primary-background-hover);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorWhite:active {
background-color: var(--control-overlay-primary-background-active);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorWhite ._201d5e8a3c09670a-spinnerItem {
background-color: var(--control-primary-text-default);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorWhite:disabled,
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorWhite[aria-disabled="true"] {
background-color: var(--control-overlay-primary-background-default);
}
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorWhite {
border-color: var(--white);
color: var(--white);
}
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorWhite:active {
background-color: hsl(var(--white-hsl) / 0.1);
}
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorWhite:disabled,
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorWhite[aria-disabled="true"] {
background-color: transparent;
}
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorWhite ._201d5e8a3c09670a-spinnerItem {
background-color: var(--white);
}
._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorWhite {
color: var(--white);
}
._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorWhite:hover ._201d5e8a3c09670a-contents {
--button--underline-color: var(--white);
}
._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorWhite:disabled ._201d5e8a3c09670a-contents,
._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorWhite[aria-disabled="true"] ._201d5e8a3c09670a-contents {
background-image: none;
}
._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorWhite ._201d5e8a3c09670a-spinnerItem {
background-color: var(--white);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorRed {
background-color: var(--control-critical-primary-background-default);
border: 1px solid var(--control-critical-primary-border-default);
color: var(--white);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorRed:hover {
background-color: var(--control-critical-primary-background-hover);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorRed:active {
background-color: var(--control-critical-primary-background-active);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorRed ._201d5e8a3c09670a-spinnerItem {
background-color: var(--white);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorRed:disabled,
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorRed[aria-disabled="true"] {
background-color: var(--control-critical-primary-background-default);
}
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorRed {
background-color: var(--control-critical-secondary-background-default);
border-color: var(--control-critical-secondary-border-default);
color: var(--control-critical-primary-text-default);
}
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorRed:hover {
background-color: var(--control-critical-secondary-background-hover);
border-color: var(--control-critical-secondary-border-hover);
color: var(--control-critical-primary-text-hover);
}
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorRed:active {
background-color: var(--control-critical-secondary-background-active);
border-color: var(--control-critical-secondary-border-active);
color: var(--control-critical-primary-text-active);
}
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorRed:disabled,
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorRed[aria-disabled="true"] {
background-color: transparent;
}
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorRed ._201d5e8a3c09670a-spinnerItem {
background-color: var(--red-400);
}
._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorRed {
color: var(--text-feedback-critical);
}
._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorRed:hover ._201d5e8a3c09670a-contents {
--button--underline-color: var(--text-feedback-critical);
}
._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorRed:disabled ._201d5e8a3c09670a-contents,
._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorRed[aria-disabled="true"] ._201d5e8a3c09670a-contents {
background-image: none;
}
._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorRed ._201d5e8a3c09670a-spinnerItem {
background-color: var(--text-feedback-critical);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorGreen {
background-color: var(--control-connected-background-default);
border: 1px solid var(--control-connected-border-default);
color: var(--white);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorGreen:hover {
background-color: var(--control-connected-background-hover);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorGreen:active {
background-color: var(--control-connected-background-active);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorGreen ._201d5e8a3c09670a-spinnerItem {
background-color: var(--white);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorGreen:disabled,
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorGreen[aria-disabled="true"] {
background-color: var(--control-connected-background-default);
}
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorGreen {
border-color: var(--control-connected-border-default);
color: var(--control-primary-text-default);
}
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorGreen:hover {
background-color: var(--control-connected-background-hover);
border-color: var(--control-connected-border-hover);
color: var(--control-primary-text-hover);
}
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorGreen:active {
background-color: var(--control-connected-background-active);
border-color: var(--control-connected-border-active);
color: var(--control-primary-text-active);
}
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorGreen:disabled,
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorGreen[aria-disabled="true"] {
background-color: transparent;
}
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorGreen ._201d5e8a3c09670a-spinnerItem {
background-color: var(--green-230);
}
._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorGreen {
color: var(--green-360);
}
._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorGreen:hover ._201d5e8a3c09670a-contents {
--button--underline-color: var(--green-360);
}
._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorGreen:disabled ._201d5e8a3c09670a-contents,
._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorGreen[aria-disabled="true"] ._201d5e8a3c09670a-contents {
background-image: none;
}
._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorGreen ._201d5e8a3c09670a-spinnerItem {
background-color: var(--green-360);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorPrimary {
background-color: var(--control-secondary-background-default);
border-color: var(--border-muted);
color: var(--control-secondary-text-default);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorPrimary:hover {
background-color: var(--control-secondary-background-hover);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorPrimary:active {
background-color: var(--control-secondary-background-active);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorPrimary ._201d5e8a3c09670a-spinnerItem {
background-color: var(--control-secondary-text-default);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorPrimary:disabled,
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorPrimary[aria-disabled="true"],
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorTransparent {
background-color: var(--control-secondary-background-default);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorTransparent {
border-color: var(--border-muted);
color: var(--control-secondary-text-default);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorTransparent:hover {
background-color: var(--control-secondary-background-hover);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorTransparent:active {
background-color: var(--control-secondary-background-active);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorTransparent ._201d5e8a3c09670a-spinnerItem {
background-color: var(--control-secondary-text-default);
}
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorTransparent:disabled,
._201d5e8a3c09670a-lookFilled._201d5e8a3c09670a-colorTransparent[aria-disabled="true"] {
background-color: var(--control-secondary-background-default);
}
.theme-dark ._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorPrimary:hover ._201d5e8a3c09670a-contents {
--button--underline-color: var(--white);
}
.theme-dark ._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorPrimary ._201d5e8a3c09670a-spinnerItem {
background-color: var(--white);
}
.theme-dark ._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorTransparent {
border-color: var(--primary-200);
}
.theme-dark ._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorTransparent:active {
background-color: hsl(var(--primary-200-hsl) / 0.1);
}
.theme-dark ._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorTransparent ._201d5e8a3c09670a-spinnerItem {
background-color: var(--primary-200);
}
.theme-dark ._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorTransparent:hover ._201d5e8a3c09670a-contents {
--button--underline-color: var(--primary-200);
}
.theme-dark ._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorTransparent ._201d5e8a3c09670a-spinnerItem {
background-color: var(--primary-200);
}
.theme-light ._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorPrimary:hover ._201d5e8a3c09670a-contents {
--button--underline-color: var(--primary-400);
}
.theme-light ._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorPrimary ._201d5e8a3c09670a-spinnerItem {
background-color: var(--primary-400);
}
.theme-light ._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorTransparent {
border-color: var(--primary-400);
}
.theme-light ._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorTransparent:active {
background-color: hsl(var(--primary-400-hsl) / 0.1);
}
.theme-light ._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorTransparent ._201d5e8a3c09670a-spinnerItem {
background-color: var(--primary-400);
}
.theme-light ._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorTransparent:hover ._201d5e8a3c09670a-contents {
--button--underline-color: var(--primary-400);
}
.theme-light ._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorTransparent ._201d5e8a3c09670a-spinnerItem {
background-color: var(--primary-400);
}
._201d5e8a3c09670a-lookFilled {
transition:
background-color var(--custom-button-transition-duration) ease,
color var(--custom-button-transition-duration) ease;
}
._201d5e8a3c09670a-lookOutlined {
border-style: solid;
border-width: 1px;
transition:
color var(--custom-button-transition-duration) ease,
background-color var(--custom-button-transition-duration) ease,
border-color var(--custom-button-transition-duration) ease;
}
._201d5e8a3c09670a-lookBlank {
background: transparent;
border: 0;
color: currentColor;
margin: 0;
padding: 0;
}
._201d5e8a3c09670a-sizeTiny {
height: var(--custom-button-button-tn-height);
min-height: var(--custom-button-button-tn-height);
min-width: var(--custom-button-button-tn-width);
width: var(--custom-button-button-tn-width);
}
._201d5e8a3c09670a-sizeSmall {
height: 32px;
line-height: 18px;
min-height: 32px;
min-width: 60px;
padding: calc(var(--space-4) - 1px) calc(var(--space-12) - 1px);
width: 60px;
}
._201d5e8a3c09670a-sizeMedium {
font-size: 16px;
height: 40px;
line-height: 18px;
min-height: 40px;
min-width: 100px;
padding: calc(var(--space-8) - 1px) calc(var(--space-16) - 1px);
width: 100px;
}
._201d5e8a3c09670a-sizeLarge {
height: var(--custom-button-button-lg-height);
min-height: var(--custom-button-button-lg-height);
min-width: var(--custom-button-button-lg-width);
width: var(--custom-button-button-lg-width);
}
._201d5e8a3c09670a-sizeMin {
display: inline;
height: auto;
padding: 0 4px;
width: auto;
}
._201d5e8a3c09670a-sizeMax {
font-size: 16px;
height: 100%;
min-height: 100%;
min-width: 100%;
width: 100%;
}
._201d5e8a3c09670a-sizeIcon {
height: auto;
padding: 4px;
}
._201d5e8a3c09670a-grow,
._201d5e8a3c09670a-sizeIcon {
width: auto;
}
._201d5e8a3c09670a-fullWidth {
width: 100%;
}
._201d5e8a3c09670a-submitting {
pointer-events: none;
}
._201d5e8a3c09670a-lookFilled ._201d5e8a3c09670a-contents,
._201d5e8a3c09670a-lookLink ._201d5e8a3c09670a-contents,
._201d5e8a3c09670a-lookOutlined ._201d5e8a3c09670a-contents {
margin: 0 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._201d5e8a3c09670a-lookLink {
}
@media (-ms-high-contrast: active), (-ms-high-contrast: none) {
._201d5e8a3c09670a-lookFilled ._201d5e8a3c09670a-contents,
._201d5e8a3c09670a-lookLink ._201d5e8a3c09670a-contents,
._201d5e8a3c09670a-lookOutlined ._201d5e8a3c09670a-contents {
margin: 0;
}
}
._201d5e8a3c09670a-submitting ._201d5e8a3c09670a-contents {
visibility: hidden;
}
._201d5e8a3c09670a-spinner {
align-items: center;
display: flex;
height: 100%;
inset-inline-start: 0;
justify-content: center;
margin: 0;
position: absolute;
top: 0;
width: 100%;
}
._201d5e8a3c09670a-disabledButtonWrapper {
display: inline-block;
padding: 0;
position: relative;
}
._201d5e8a3c09670a-disabledButtonWrapper ._201d5e8a3c09670a-button._201d5e8a3c09670a-grow {
width: 100%;
}
._201d5e8a3c09670a-disabledButtonOverlay {
cursor: not-allowed;
inset: 0;
position: absolute;
z-index: 9;
}
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button,
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button {
background-color: ButtonFace;
transition: none;
}
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button ._201d5e8a3c09670a-contents,
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button ._201d5e8a3c09670a-contents {
color: ButtonText;
forced-color-adjust: none;
}
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button ._201d5e8a3c09670a-contents svg,
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button ._201d5e8a3c09670a-contents svg {
color: currentColor;
}
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button:hover,
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button:hover {
background-color: ButtonFace;
}
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button:hover ._201d5e8a3c09670a-contents,
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button:hover ._201d5e8a3c09670a-contents {
color: ButtonText;
text-decoration: underline;
}
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button:disabled,
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button[aria-disabled="true"],
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button:disabled,
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button[aria-disabled="true"] {
background-color: Canvas;
border-color: GrayText !important;
opacity: 1;
}
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button:disabled ._201d5e8a3c09670a-contents,
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button[aria-disabled="true"] ._201d5e8a3c09670a-contents,
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button:disabled ._201d5e8a3c09670a-contents,
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button[aria-disabled="true"] ._201d5e8a3c09670a-contents {
color: GrayText;
}
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookLink ._201d5e8a3c09670a-contents,
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookLink ._201d5e8a3c09670a-contents {
text-decoration: underline;
}
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookLink:not(:disabled),
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookLink:not([aria-disabled="true"]),
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookLink:not(:disabled),
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookLink:not([aria-disabled="true"]) {
background-color: Canvas;
}
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookLink:not(:disabled) ._201d5e8a3c09670a-contents,
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookLink:not([aria-disabled="true"]) ._201d5e8a3c09670a-contents,
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookLink:not(:disabled) ._201d5e8a3c09670a-contents,
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookLink:not([aria-disabled="true"]) ._201d5e8a3c09670a-contents {
color: LinkText;
}
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookLink:not(:disabled):hover,
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookLink:not([aria-disabled="true"]):hover,
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookLink:not(:disabled):hover,
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookLink:not([aria-disabled="true"]):hover {
background-color: Canvas;
}
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookLink:not(:disabled):hover ._201d5e8a3c09670a-contents,
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookLink:not([aria-disabled="true"]):hover ._201d5e8a3c09670a-contents,
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookLink:not(:disabled):hover ._201d5e8a3c09670a-contents,
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookLink:not([aria-disabled="true"]):hover ._201d5e8a3c09670a-contents {
color: LinkText;
}
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookFilled,
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookOutlined,
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookFilled,
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookOutlined {
border-style: solid;
border-width: 1px;
}
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookFilled:not(:disabled),
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookFilled:not([aria-disabled="true"]),
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookOutlined:not(:disabled),
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookOutlined:not([aria-disabled="true"]),
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookFilled:not(:disabled),
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookFilled:not([aria-disabled="true"]),
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookOutlined:not(:disabled),
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookOutlined:not([aria-disabled="true"]) {
border-color: CanvasText !important;
}
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookFilled:not(:disabled):hover,
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookFilled:not([aria-disabled="true"]):hover,
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookOutlined:not(:disabled):hover,
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookOutlined:not([aria-disabled="true"]):hover,
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookFilled:not(:disabled):hover,
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookFilled:not([aria-disabled="true"]):hover,
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookOutlined:not(:disabled):hover,
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookOutlined:not([aria-disabled="true"]):hover {
border-color: ButtonText !important;
}
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button:active,
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button[aria-expanded="true"],
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button[aria-selected="true"],
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button:active,
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button[aria-expanded="true"],
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button[aria-selected="true"] {
background-color: HighlightText;
}
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button:active ._201d5e8a3c09670a-contents,
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button[aria-expanded="true"] ._201d5e8a3c09670a-contents,
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button[aria-selected="true"] ._201d5e8a3c09670a-contents,
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button:active ._201d5e8a3c09670a-contents,
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button[aria-expanded="true"] ._201d5e8a3c09670a-contents,
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button[aria-selected="true"] ._201d5e8a3c09670a-contents {
color: Highlight;
text-decoration: underline;
}
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button:active:hover,
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button[aria-expanded="true"]:hover,
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button[aria-selected="true"]:hover,
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button:active:hover,
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button[aria-expanded="true"]:hover,
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button[aria-selected="true"]:hover {
background-color: HighlightText;
}
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button:active:hover ._201d5e8a3c09670a-contents,
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button[aria-expanded="true"]:hover ._201d5e8a3c09670a-contents,
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button[aria-selected="true"]:hover ._201d5e8a3c09670a-contents,
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button:active:hover ._201d5e8a3c09670a-contents,
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button[aria-expanded="true"]:hover ._201d5e8a3c09670a-contents,
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button[aria-selected="true"]:hover ._201d5e8a3c09670a-contents {
color: Highlight;
}
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookFilled:active,
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookFilled[aria-expanded="true"],
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookFilled[aria-selected="true"],
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookOutlined:active,
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookOutlined[aria-expanded="true"],
.enable-forced-colors.theme-dark ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookOutlined[aria-selected="true"],
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookFilled:active,
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookFilled[aria-expanded="true"],
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookFilled[aria-selected="true"],
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookOutlined:active,
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookOutlined[aria-expanded="true"],
.enable-forced-colors.theme-light ._201d5e8a3c09670a-button._201d5e8a3c09670a-lookOutlined[aria-selected="true"] {
border-color: Highlight !important;
}
._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorPrimary {
color: var(--text-default);
}
.images-light ._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorPrimary:disabled ._201d5e8a3c09670a-contents,
.images-light ._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorPrimary[aria-disabled="true"] ._201d5e8a3c09670a-contents {
background-image: none;
}
.images-dark ._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorPrimary:disabled ._201d5e8a3c09670a-contents,
.images-dark ._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorPrimary[aria-disabled="true"] ._201d5e8a3c09670a-contents {
background-image: none;
}
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorTransparent {
color: var(--text-default);
}
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorTransparent:disabled,
._201d5e8a3c09670a-lookOutlined._201d5e8a3c09670a-colorTransparent[aria-disabled="true"] {
background-color: transparent;
}
._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorTransparent {
color: var(--text-default);
}
._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-sizeMin ._201d5e8a3c09670a-contents {
display: inline;
}
&.theme-dark ._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorLink,
&.theme-dark ._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorPrimary {
color: var(--brand-360);
}
&.theme-dark ._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorLink:hover ._201d5e8a3c09670a-contents,
&.theme-dark ._201d5e8a3c09670a-lookLink._201d5e8a3c09670a-colorPrimary:hover ._201d5e8a3c09670a-contents {
--button--underline-color: var(--brand-360);
}
._201d5e8a3c09670a-lookBlank,
._201d5e8a3c09670a-lookLink {
border: none;
}
._0ed4fc708cdbac0d-inputWrapper {
display: flex;
flex-direction: column;
}
._0ed4fc708cdbac0d-input {
background-color: var(--input-background-default);
border: 1px solid var(--input-border-default);
border-radius: 8px;
box-sizing: border-box;
color: var(--text-default);
font-size: 16px;
height: 44px;
padding: 12px 10px;
transition: border-color 0.2s ease-in-out;
width: 100%;
}
._0ed4fc708cdbac0d-input::-moz-placeholder {
color: var(--input-placeholder-text-default);
-moz-user-select: none;
user-select: none;
}
._0ed4fc708cdbac0d-input::placeholder {
color: var(--input-placeholder-text-default);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
._0ed4fc708cdbac0d-input:hover {
border-color: var(--input-border-hover);
}
._0ed4fc708cdbac0d-input._0ed4fc708cdbac0d-focused,
._0ed4fc708cdbac0d-input:focus {
border-color: var(--text-link);
}
._0ed4fc708cdbac0d-input._0ed4fc708cdbac0d-error {
border-color: var(--text-feedback-critical);
border-width: 2px;
color: var(--text-feedback-critical);
}
._0ed4fc708cdbac0d-input._0ed4fc708cdbac0d-success {
border-color: var(--green-360);
}
._0ed4fc708cdbac0d-input._0ed4fc708cdbac0d-disabled {
border-color: var(--input-border-default);
cursor: not-allowed;
opacity: 1;
}
._0ed4fc708cdbac0d-input._0ed4fc708cdbac0d-editable {
background-color: transparent;
border-color: transparent;
}
._0ed4fc708cdbac0d-input:hover,
._0ed4fc708cdbac0d-input[readonly] {
border: 1px solid var(--input-border-default);
}
._0ed4fc708cdbac0d-input:not([readOnly])._0ed4fc708cdbac0d-focused,
._0ed4fc708cdbac0d-input:not([readOnly])._0ed4fc708cdbac0d-focused:hover,
._0ed4fc708cdbac0d-input:not([readOnly]):focus,
._0ed4fc708cdbac0d-input:not([readOnly]):focus:hover {
border-color: var(--text-link);
}
._0ed4fc708cdbac0d-disabled {
cursor: not-allowed;
opacity: 0.5;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
._0ed4fc708cdbac0d-focused {
border-color: var(--brand-500);
opacity: 1;
}
._0ed4fc708cdbac0d-inputPrefix {
font-size: 16px;
height: 40px;
padding-top: 10px;
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-padding-start: 20px;
color: var(--text-muted);
line-height: normal;
padding-inline-start: 20px;
}
.theme-dark ._0ed4fc708cdbac0d-inputPrefix {
opacity: 0.5;
}
.enable-forced-colors ._0ed4fc708cdbac0d-input {
border: 1px solid ButtonText;
}
.enable-forced-colors ._0ed4fc708cdbac0d-input:focus {
border-color: Highlight;
}
.enable-forced-colors ._0ed4fc708cdbac0d-input._0ed4fc708cdbac0d-disabled {
background-color: Canvas;
border-color: GrayText;
opacity: 1;
}
._0ed4fc708cdbac0d-inputError {
align-items: center;
display: flex;
gap: 8px;
}
._5a09253b3ed8bee2-heading-sm\/normal {
font-family: var(--font-display);
font-size: 14px;
font-weight: 400;
line-height: 1.2857142857142858;
}
._5a09253b3ed8bee2-heading-sm\/normal._5a09253b3ed8bee2-fontScaling {
font-size: 0.875rem;
}
._5a09253b3ed8bee2-heading-sm\/medium {
font-family: var(--font-display);
font-size: 14px;
font-weight: 500;
line-height: 1.2857142857142858;
}
._5a09253b3ed8bee2-heading-sm\/medium._5a09253b3ed8bee2-fontScaling {
font-size: 0.875rem;
}
._5a09253b3ed8bee2-heading-sm\/semibold {
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
line-height: 1.2857142857142858;
}
._5a09253b3ed8bee2-heading-sm\/semibold._5a09253b3ed8bee2-fontScaling {
font-size: 0.875rem;
}
._5a09253b3ed8bee2-heading-sm\/bold {
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
line-height: 1.2857142857142858;
}
._5a09253b3ed8bee2-heading-sm\/bold._5a09253b3ed8bee2-fontScaling {
font-size: 0.875rem;
}
._5a09253b3ed8bee2-heading-sm\/extrabold {
font-family: var(--font-display);
font-size: 14px;
font-weight: 800;
line-height: 1.2857142857142858;
}
._5a09253b3ed8bee2-heading-sm\/extrabold._5a09253b3ed8bee2-fontScaling {
font-size: 0.875rem;
}
._5a09253b3ed8bee2-heading-md\/normal {
font-family: var(--font-display);
font-size: 16px;
font-weight: 400;
line-height: 1.25;
}
._5a09253b3ed8bee2-heading-md\/normal._5a09253b3ed8bee2-fontScaling {
font-size: 1rem;
}
._5a09253b3ed8bee2-heading-md\/medium {
font-family: var(--font-display);
font-size: 16px;
font-weight: 500;
line-height: 1.25;
}
._5a09253b3ed8bee2-heading-md\/medium._5a09253b3ed8bee2-fontScaling {
font-size: 1rem;
}
._5a09253b3ed8bee2-heading-md\/semibold {
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
line-height: 1.25;
}
._5a09253b3ed8bee2-heading-md\/semibold._5a09253b3ed8bee2-fontScaling {
font-size: 1rem;
}
._5a09253b3ed8bee2-heading-md\/bold {
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
line-height: 1.25;
}
._5a09253b3ed8bee2-heading-md\/bold._5a09253b3ed8bee2-fontScaling {
font-size: 1rem;
}
._5a09253b3ed8bee2-heading-md\/extrabold {
font-family: var(--font-display);
font-size: 16px;
font-weight: 800;
line-height: 1.25;
}
._5a09253b3ed8bee2-heading-md\/extrabold._5a09253b3ed8bee2-fontScaling {
font-size: 1rem;
}
._5a09253b3ed8bee2-heading-lg\/normal {
font-family: var(--font-display);
font-size: 20px;
font-weight: 400;
line-height: 1.2;
}
._5a09253b3ed8bee2-heading-lg\/normal._5a09253b3ed8bee2-fontScaling {
font-size: 1.25rem;
}
._5a09253b3ed8bee2-heading-lg\/medium {
font-family: var(--font-display);
font-size: 20px;
font-weight: 500;
line-height: 1.2;
}
._5a09253b3ed8bee2-heading-lg\/medium._5a09253b3ed8bee2-fontScaling {
font-size: 1.25rem;
}
._5a09253b3ed8bee2-heading-lg\/semibold {
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
line-height: 1.2;
}
._5a09253b3ed8bee2-heading-lg\/semibold._5a09253b3ed8bee2-fontScaling {
font-size: 1.25rem;
}
._5a09253b3ed8bee2-heading-lg\/bold {
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
line-height: 1.2;
}
._5a09253b3ed8bee2-heading-lg\/bold._5a09253b3ed8bee2-fontScaling {
font-size: 1.25rem;
}
._5a09253b3ed8bee2-heading-lg\/extrabold {
font-family: var(--font-display);
font-size: 20px;
font-weight: 800;
line-height: 1.2;
}
._5a09253b3ed8bee2-heading-lg\/extrabold._5a09253b3ed8bee2-fontScaling {
font-size: 1.25rem;
}
._5a09253b3ed8bee2-heading-xl\/normal {
font-family: var(--font-display);
font-size: 24px;
font-weight: 400;
line-height: 1.25;
}
._5a09253b3ed8bee2-heading-xl\/normal._5a09253b3ed8bee2-fontScaling {
font-size: 1.5rem;
}
._5a09253b3ed8bee2-heading-xl\/medium {
font-family: var(--font-display);
font-size: 24px;
font-weight: 500;
line-height: 1.25;
}
._5a09253b3ed8bee2-heading-xl\/medium._5a09253b3ed8bee2-fontScaling {
font-size: 1.5rem;
}
._5a09253b3ed8bee2-heading-xl\/semibold {
font-family: var(--font-display);
font-size: 24px;
font-weight: 600;
line-height: 1.25;
}
._5a09253b3ed8bee2-heading-xl\/semibold._5a09253b3ed8bee2-fontScaling {
font-size: 1.5rem;
}
._5a09253b3ed8bee2-heading-xl\/bold {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
line-height: 1.25;
}
._5a09253b3ed8bee2-heading-xl\/bold._5a09253b3ed8bee2-fontScaling {
font-size: 1.5rem;
}
._5a09253b3ed8bee2-heading-xl\/extrabold {
font-family: var(--font-display);
font-size: 24px;
font-weight: 800;
line-height: 1.25;
}
._5a09253b3ed8bee2-heading-xl\/extrabold._5a09253b3ed8bee2-fontScaling {
font-size: 1.5rem;
}
._5a09253b3ed8bee2-heading-xxl\/normal {
font-family: var(--font-display);
font-size: 32px;
font-weight: 400;
line-height: 1.25;
}
._5a09253b3ed8bee2-heading-xxl\/normal._5a09253b3ed8bee2-fontScaling {
font-size: 2rem;
}
._5a09253b3ed8bee2-heading-xxl\/medium {
font-family: var(--font-display);
font-size: 32px;
font-weight: 500;
line-height: 1.25;
}
._5a09253b3ed8bee2-heading-xxl\/medium._5a09253b3ed8bee2-fontScaling {
font-size: 2rem;
}
._5a09253b3ed8bee2-heading-xxl\/semibold {
font-family: var(--font-display);
font-size: 32px;
font-weight: 600;
line-height: 1.25;
}
._5a09253b3ed8bee2-heading-xxl\/semibold._5a09253b3ed8bee2-fontScaling {
font-size: 2rem;
}
._5a09253b3ed8bee2-heading-xxl\/bold {
font-family: var(--font-display);
font-size: 32px;
font-weight: 700;
line-height: 1.25;
}
._5a09253b3ed8bee2-heading-xxl\/bold._5a09253b3ed8bee2-fontScaling {
font-size: 2rem;
}
._5a09253b3ed8bee2-heading-xxl\/extrabold {
font-family: var(--font-display);
font-size: 32px;
font-weight: 800;
line-height: 1.25;
}
._5a09253b3ed8bee2-heading-xxl\/extrabold._5a09253b3ed8bee2-fontScaling {
font-size: 2rem;
}
._5a09253b3ed8bee2-eyebrow {
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.3333333333333333;
text-transform: uppercase;
}
._5a09253b3ed8bee2-eyebrow._5a09253b3ed8bee2-fontScaling {
font-size: 0.75rem;
}
._5a09253b3ed8bee2-heading-deprecated-12\/normal {
font-family: var(--font-display);
font-size: 12px;
font-weight: 400;
line-height: 1.3333333333333333;
}
._5a09253b3ed8bee2-heading-deprecated-12\/normal._5a09253b3ed8bee2-fontScaling {
font-size: 0.75rem;
}
._5a09253b3ed8bee2-heading-deprecated-12\/medium {
font-family: var(--font-display);
font-size: 12px;
font-weight: 500;
line-height: 1.3333333333333333;
}
._5a09253b3ed8bee2-heading-deprecated-12\/medium._5a09253b3ed8bee2-fontScaling {
font-size: 0.75rem;
}
._5a09253b3ed8bee2-heading-deprecated-12\/semibold {
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
line-height: 1.3333333333333333;
}
._5a09253b3ed8bee2-heading-deprecated-12\/semibold._5a09253b3ed8bee2-fontScaling {
font-size: 0.75rem;
}
._5a09253b3ed8bee2-heading-deprecated-12\/bold {
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
line-height: 1.3333333333333333;
}
._5a09253b3ed8bee2-heading-deprecated-12\/bold._5a09253b3ed8bee2-fontScaling {
font-size: 0.75rem;
}
._5a09253b3ed8bee2-heading-deprecated-12\/extrabold {
font-family: var(--font-display);
font-size: 12px;
font-weight: 800;
line-height: 1.3333333333333333;
}
._5a09253b3ed8bee2-heading-deprecated-12\/extrabold._5a09253b3ed8bee2-fontScaling {
font-size: 0.75rem;
}
._5a09253b3ed8bee2-redesign\/heading-18\/bold {
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
line-height: 1.3333333333333333;
}
._5a09253b3ed8bee2-redesign\/heading-18\/bold._5a09253b3ed8bee2-fontScaling {
font-size: 1.125rem;
}
._5a09253b3ed8bee2-text-xxs\/normal {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 400;
line-height: 1.2;
}
._5a09253b3ed8bee2-text-xxs\/normal._5a09253b3ed8bee2-fontScaling {
font-size: 0.625rem;
}
._5a09253b3ed8bee2-text-xxs\/medium {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 500;
line-height: 1.2;
}
._5a09253b3ed8bee2-text-xxs\/medium._5a09253b3ed8bee2-fontScaling {
font-size: 0.625rem;
}
._5a09253b3ed8bee2-text-xxs\/semibold {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 600;
line-height: 1.2;
}
._5a09253b3ed8bee2-text-xxs\/semibold._5a09253b3ed8bee2-fontScaling {
font-size: 0.625rem;
}
._5a09253b3ed8bee2-text-xxs\/bold {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 700;
line-height: 1.2;
}
._5a09253b3ed8bee2-text-xxs\/bold._5a09253b3ed8bee2-fontScaling {
font-size: 0.625rem;
}
._5a09253b3ed8bee2-text-xs\/normal {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 400;
line-height: 1.3333333333333333;
}
._5a09253b3ed8bee2-text-xs\/normal._5a09253b3ed8bee2-fontScaling {
font-size: 0.75rem;
}
._5a09253b3ed8bee2-text-xs\/medium {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 500;
line-height: 1.3333333333333333;
}
._5a09253b3ed8bee2-text-xs\/medium._5a09253b3ed8bee2-fontScaling {
font-size: 0.75rem;
}
._5a09253b3ed8bee2-text-xs\/semibold {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 600;
line-height: 1.3333333333333333;
}
._5a09253b3ed8bee2-text-xs\/semibold._5a09253b3ed8bee2-fontScaling {
font-size: 0.75rem;
}
._5a09253b3ed8bee2-text-xs\/bold {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 700;
line-height: 1.3333333333333333;
}
._5a09253b3ed8bee2-text-xs\/bold._5a09253b3ed8bee2-fontScaling {
font-size: 0.75rem;
}
._5a09253b3ed8bee2-text-sm\/normal {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 400;
line-height: 1.2857142857142858;
}
._5a09253b3ed8bee2-text-sm\/normal._5a09253b3ed8bee2-fontScaling {
font-size: 0.875rem;
}
._5a09253b3ed8bee2-text-sm\/medium {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 500;
line-height: 1.2857142857142858;
}
._5a09253b3ed8bee2-text-sm\/medium._5a09253b3ed8bee2-fontScaling {
font-size: 0.875rem;
}
._5a09253b3ed8bee2-text-sm\/semibold {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 600;
line-height: 1.2857142857142858;
}
._5a09253b3ed8bee2-text-sm\/semibold._5a09253b3ed8bee2-fontScaling {
font-size: 0.875rem;
}
._5a09253b3ed8bee2-text-sm\/bold {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 700;
line-height: 1.2857142857142858;
}
._5a09253b3ed8bee2-text-sm\/bold._5a09253b3ed8bee2-fontScaling {
font-size: 0.875rem;
}
._5a09253b3ed8bee2-text-md\/normal {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 400;
line-height: 1.25;
}
._5a09253b3ed8bee2-text-md\/normal._5a09253b3ed8bee2-fontScaling {
font-size: 1rem;
}
._5a09253b3ed8bee2-text-md\/medium {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 500;
line-height: 1.25;
}
._5a09253b3ed8bee2-text-md\/medium._5a09253b3ed8bee2-fontScaling {
font-size: 1rem;
}
._5a09253b3ed8bee2-text-md\/semibold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 600;
line-height: 1.25;
}
._5a09253b3ed8bee2-text-md\/semibold._5a09253b3ed8bee2-fontScaling {
font-size: 1rem;
}
._5a09253b3ed8bee2-text-md\/bold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 700;
line-height: 1.25;
}
._5a09253b3ed8bee2-text-md\/bold._5a09253b3ed8bee2-fontScaling {
font-size: 1rem;
}
._5a09253b3ed8bee2-text-lg\/normal {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 400;
line-height: 1.2;
}
._5a09253b3ed8bee2-text-lg\/normal._5a09253b3ed8bee2-fontScaling {
font-size: 1.25rem;
}
._5a09253b3ed8bee2-text-lg\/medium {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 500;
line-height: 1.2;
}
._5a09253b3ed8bee2-text-lg\/medium._5a09253b3ed8bee2-fontScaling {
font-size: 1.25rem;
}
._5a09253b3ed8bee2-text-lg\/semibold {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 600;
line-height: 1.2;
}
._5a09253b3ed8bee2-text-lg\/semibold._5a09253b3ed8bee2-fontScaling {
font-size: 1.25rem;
}
._5a09253b3ed8bee2-text-lg\/bold {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 700;
line-height: 1.2;
}
._5a09253b3ed8bee2-text-lg\/bold._5a09253b3ed8bee2-fontScaling {
font-size: 1.25rem;
}
._5a09253b3ed8bee2-redesign\/message-preview\/normal {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 400;
line-height: 1.3333333333333333;
}
._5a09253b3ed8bee2-redesign\/message-preview\/normal._5a09253b3ed8bee2-fontScaling {
font-size: 0.9375rem;
}
._5a09253b3ed8bee2-redesign\/message-preview\/medium {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 500;
line-height: 1.3333333333333333;
}
._5a09253b3ed8bee2-redesign\/message-preview\/medium._5a09253b3ed8bee2-fontScaling {
font-size: 0.9375rem;
}
._5a09253b3ed8bee2-redesign\/message-preview\/semibold {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 600;
line-height: 1.3333333333333333;
}
._5a09253b3ed8bee2-redesign\/message-preview\/semibold._5a09253b3ed8bee2-fontScaling {
font-size: 0.9375rem;
}
._5a09253b3ed8bee2-redesign\/message-preview\/bold {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 700;
line-height: 1.3333333333333333;
}
._5a09253b3ed8bee2-redesign\/message-preview\/bold._5a09253b3ed8bee2-fontScaling {
font-size: 0.9375rem;
}
._5a09253b3ed8bee2-redesign\/channel-title\/normal {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 400;
line-height: 1.375;
}
._5a09253b3ed8bee2-redesign\/channel-title\/normal._5a09253b3ed8bee2-fontScaling {
font-size: 1rem;
}
._5a09253b3ed8bee2-redesign\/channel-title\/medium {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 500;
line-height: 1.375;
}
._5a09253b3ed8bee2-redesign\/channel-title\/medium._5a09253b3ed8bee2-fontScaling {
font-size: 1rem;
}
._5a09253b3ed8bee2-redesign\/channel-title\/semibold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 600;
line-height: 1.375;
}
._5a09253b3ed8bee2-redesign\/channel-title\/semibold._5a09253b3ed8bee2-fontScaling {
font-size: 1rem;
}
._5a09253b3ed8bee2-redesign\/channel-title\/bold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 700;
line-height: 1.375;
}
._5a09253b3ed8bee2-redesign\/channel-title\/bold._5a09253b3ed8bee2-fontScaling {
font-size: 1rem;
}
._5a09253b3ed8bee2-display-sm {
font-family: var(--font-headline);
font-size: 20px;
font-weight: 800;
line-height: 1;
}
._5a09253b3ed8bee2-display-sm._5a09253b3ed8bee2-fontScaling {
font-size: 1.25rem;
}
._5a09253b3ed8bee2-display-md {
font-family: var(--font-headline);
font-size: 34px;
font-weight: 800;
line-height: 1.0588235294117647;
}
._5a09253b3ed8bee2-display-md._5a09253b3ed8bee2-fontScaling {
font-size: 2.125rem;
}
._5a09253b3ed8bee2-display-lg {
font-family: var(--font-headline);
font-size: 44px;
font-weight: 800;
line-height: 0.9545454545454546;
}
._5a09253b3ed8bee2-display-lg._5a09253b3ed8bee2-fontScaling {
font-size: 2.75rem;
}
._5a09253b3ed8bee2-code {
font-family: var(--font-code);
font-size: 12px;
font-weight: 700;
line-height: 1.3333333333333333;
}
._5a09253b3ed8bee2-code._5a09253b3ed8bee2-fontScaling {
font-size: 0.75rem;
}
._5a09253b3ed8bee2-wrapper {
display: flex;
flex-direction: column;
}
._5a09253b3ed8bee2-textArea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: none;
color: inherit;
font-size: inherit;
height: auto;
padding: var(--space-12) 10px;
resize: none;
width: 100%;
}
._5a09253b3ed8bee2-textArea:disabled {
cursor: not-allowed;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
._5a09253b3ed8bee2-textArea::-moz-placeholder {
color: var(--input-placeholder-text-default);
-moz-user-select: none;
user-select: none;
}
._5a09253b3ed8bee2-textArea::placeholder {
color: var(--input-placeholder-text-default);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
._5a09253b3ed8bee2-resizeable {
resize: auto;
}
._5a09253b3ed8bee2-inputMaxLength {
position: relative;
}
._5a09253b3ed8bee2-flex {
display: flex;
flex: 1 1 auto;
}
._5a09253b3ed8bee2-characterCount,
._5a09253b3ed8bee2-maxLength {
bottom: 12px;
color: var(--text-muted);
font-family: var(--font-code);
font-size: 12px;
inset-inline-end: 14px;
pointer-events: none;
position: absolute;
}
._5a09253b3ed8bee2-errorOverflow {
color: var(--text-feedback-critical);
}
._5a09253b3ed8bee2-errorMessage {
margin-top: 1px;
}
._506b39a96c2f8884-scrollbar::-webkit-scrollbar-corner {
background: none;
border: none;
}
._506b39a96c2f8884-scrollbarDefault {
}
._506b39a96c2f8884-scrollbarDefault::-webkit-scrollbar {
height: var(--custom-scrollbar-scrollbar-width);
width: var(--custom-scrollbar-scrollbar-width);
}
._506b39a96c2f8884-scrollbarDefault::-webkit-scrollbar-thumb,
._506b39a96c2f8884-scrollbarDefault::-webkit-scrollbar-track {
background-clip: padding-box;
border-color: transparent;
border-radius: var(--custom-scrollbar-border-radius);
border-style: solid;
border-width: var(--custom-scrollbar-scrollbar-margin);
}
._506b39a96c2f8884-scrollbarDefault::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-auto-thumb);
}
._506b39a96c2f8884-scrollbarDefault::-webkit-scrollbar-track {
background-color: var(--scrollbar-auto-track);
border-width: initial;
}
._506b39a96c2f8884-scrollbarGhost {
}
._506b39a96c2f8884-scrollbarGhost::-webkit-scrollbar {
height: var(--custom-scrollbar-scrollbar-width);
width: var(--custom-scrollbar-scrollbar-width);
}
._506b39a96c2f8884-scrollbarGhost::-webkit-scrollbar-thumb,
._506b39a96c2f8884-scrollbarGhost::-webkit-scrollbar-track {
background-clip: padding-box;
border-radius: var(--custom-scrollbar-border-radius);
border-style: solid;
border-width: var(--custom-scrollbar-scrollbar-margin);
}
._506b39a96c2f8884-scrollbarGhost::-webkit-scrollbar-thumb {
background-color: var(--opacity-black-40);
border-color: transparent;
}
._506b39a96c2f8884-scrollbarGhost::-webkit-scrollbar-track {
background-color: var(--opacity-black-8);
border-color: transparent;
border-width: initial;
}
._506b39a96c2f8884-scrollbarGhostHairline {
}
._506b39a96c2f8884-scrollbarGhostHairline::-webkit-scrollbar {
height: 4px;
width: 4px;
}
._506b39a96c2f8884-scrollbarGhostHairline::-webkit-scrollbar-thumb {
background-color: hsl(var(--primary-800-hsl) / 0.6);
border-radius: 2px;
cursor: move;
}
._506b39a96c2f8884-scrollbarGhostHairline::-webkit-scrollbar-track {
background-color: transparent;
border: none;
}
.enable-forced-colors ._506b39a96c2f8884-scrollbar::-webkit-scrollbar-track {
background-color: Canvas;
border-radius: 0;
border-width: 1px;
}
.enable-forced-colors ._506b39a96c2f8884-scrollbar::-webkit-scrollbar-thumb {
background-color: CanvasText;
border-width: 1px;
}
@keyframes spin3d {
0% {
transform: rotateY(0deg) rotateX(0deg);
}
25% {
transform: rotateY(90deg) rotateX(15deg);
}
50% {
transform: rotateY(180deg) rotateX(0deg);
}
75% {
transform: rotateY(270deg) rotateX(-15deg);
}
to {
transform: rotateY(1turn) rotateX(0deg);
}
}
@keyframes rainbowSlide {
0% {
background-position: 0 50%;
}
to {
background-position: 200% 50%;
}
}
.dynamicGraphicDemoContainer {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
perspective: 1000px;
width: 100%;
}
.dynamicGraphicDemoText {
background: linear-gradient(90deg, red, #ff7f00, #ff0, #0f0, #00f, indigo, #9400d3, red);
-webkit-background-clip: text;
background-size: 200% 100%;
font-size: 32px;
font-weight: 700;
text-shadow:
2px 2px 4px rgba(0, 0, 0, 0.3),
4px 4px 8px rgba(0, 0, 0, 0.2);
-webkit-text-fill-color: transparent;
animation:
spin3d 5s linear infinite,
rainbowSlide 1.5s linear infinite;
background-clip: text;
}
._3d4a037904e40932-group,
._3d4a037904e40932-item {
box-sizing: border-box;
display: flex;
}
._3d4a037904e40932-item {
align-items: center;
background: transparent;
border-style: solid;
border-width: 1px 1px 1px 0;
cursor: pointer;
justify-content: center;
overflow: hidden;
padding: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
._3d4a037904e40932-item:first-child {
border-left-width: 1px;
border-radius: 3px 0 0 3px;
}
._3d4a037904e40932-item:last-child {
border-radius: 0 3px 3px 0;
}
._3d4a037904e40932-item:disabled {
cursor: not-allowed;
opacity: 0.3;
}
.theme-light ._3d4a037904e40932-item {
border-color: var(--primary-200);
}
.theme-dark ._3d4a037904e40932-item {
border-color: var(--primary-800);
}
._89a343a153c6f2ec-textArea {
height: auto;
resize: none;
}
._89a343a153c6f2ec-resizeable {
resize: auto;
}
._89a343a153c6f2ec-inputMaxLength {
position: relative;
}
._89a343a153c6f2ec-flex {
display: flex;
flex: 1 1 auto;
}
._89a343a153c6f2ec-characterCount,
._89a343a153c6f2ec-maxLength {
bottom: 12px;
color: var(--text-muted);
font-family: var(--font-code);
font-size: 12px;
inset-inline-end: 14px;
pointer-events: none;
position: absolute;
}
._89a343a153c6f2ec-errorOverflow {
color: var(--text-feedback-critical);
}
._89a343a153c6f2ec-errorMessage {
margin-top: 1px;
}
.ff7bda1c2c64b8b6-allChips {
gap: var(--space-32);
padding: var(--space-24);
}
.ff7bda1c2c64b8b6-allChips,
.ff7bda1c2c64b8b6-section {
display: flex;
flex-direction: column;
}
.ff7bda1c2c64b8b6-section {
gap: var(--space-16);
}
.ff7bda1c2c64b8b6-sectionTitle {
color: var(--text-strong);
font-weight: var(--font-weight-semibold);
margin: 0;
}
.ff7bda1c2c64b8b6-chipGrid {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--space-12);
}
._730694f5672c9601-card {
border-style: solid;
border-width: 1px;
position: relative;
--__card-accent-color: transparent;
border-color: var(--__card-accent-color);
border-radius: var(--radius-sm);
}
._730694f5672c9601-card:not(._730694f5672c9601-outline) {
background-color: var(--__card-accent-color);
}
._730694f5672c9601-card a:hover {
text-decoration: underline;
}
._730694f5672c9601-cardBrand a,
._730694f5672c9601-cardDanger a,
._730694f5672c9601-cardSuccess a,
._730694f5672c9601-cardWarning a {
font-weight: var(--font-weight-bold);
}
._730694f5672c9601-cardDanger {
--__card-accent-color: var(--background-feedback-critical);
color: var(--text-feedback-critical);
}
._730694f5672c9601-cardWarning {
--__card-accent-color: var(--background-feedback-warning);
color: var(--text-feedback-warning);
}
._730694f5672c9601-cardSuccess {
--__card-accent-color: var(--background-feedback-positive);
color: var(--text-feedback-positive);
}
._730694f5672c9601-cardBrand {
--__card-accent-color: var(--brand-500);
}
._730694f5672c9601-cardBrand,
._730694f5672c9601-cardPrimary,
._730694f5672c9601-cardPrimaryEditable,
._730694f5672c9601-cardPrimaryOutline,
._730694f5672c9601-cardPrimaryOutlineEditable {
}
._730694f5672c9601-card a {
color: var(--text-link);
}
._730694f5672c9601-cardBrand a,
._730694f5672c9601-cardDanger a,
._730694f5672c9601-cardSuccess a,
._730694f5672c9601-cardWarning a {
color: var(--white);
}
._730694f5672c9601-cardPrimary,
._730694f5672c9601-cardPrimary._730694f5672c9601-editable {
--__card-accent-color: var(--card-background-default);
background-color: var(--card-background-default);
border: 1px solid var(--border-subtle);
}
._7c0bae9243151ddd-flex,
._7c0bae9243151ddd-horizontal {
display: flex;
}
._7c0bae9243151ddd-horizontal {
flex-direction: row;
}
._7c0bae9243151ddd-horizontalReverse {
display: flex;
flex-direction: row-reverse;
}
._7c0bae9243151ddd-horizontal > ._7c0bae9243151ddd-flex,
._7c0bae9243151ddd-horizontal > ._7c0bae9243151ddd-flexChild {
margin-inline: 10px;
}
._7c0bae9243151ddd-horizontal > ._7c0bae9243151ddd-flex:first-child,
._7c0bae9243151ddd-horizontal > ._7c0bae9243151ddd-flexChild:first-child {
-webkit-margin-start: 0;
margin-inline-start: 0;
}
._7c0bae9243151ddd-horizontal > ._7c0bae9243151ddd-flex:last-child,
._7c0bae9243151ddd-horizontal > ._7c0bae9243151ddd-flexChild:last-child {
-webkit-margin-end: 0;
margin-inline-end: 0;
}
._7c0bae9243151ddd-horizontalReverse > ._7c0bae9243151ddd-flex,
._7c0bae9243151ddd-horizontalReverse > ._7c0bae9243151ddd-flexChild {
margin-inline: 10px;
}
._7c0bae9243151ddd-horizontalReverse > ._7c0bae9243151ddd-flex:first-child,
._7c0bae9243151ddd-horizontalReverse > ._7c0bae9243151ddd-flexChild:first-child {
-webkit-margin-end: 0;
margin-inline-end: 0;
}
._7c0bae9243151ddd-horizontalReverse > ._7c0bae9243151ddd-flex:last-child,
._7c0bae9243151ddd-horizontalReverse > ._7c0bae9243151ddd-flexChild:last-child {
-webkit-margin-start: 0;
margin-inline-start: 0;
}
._7c0bae9243151ddd-horizontal > ._7c0bae9243151ddd-flexMarginReset {
margin: 0;
}
.abf7060e6f2beabe-flex {
display: flex;
}
.abf7060e6f2beabe-alignStart {
align-items: flex-start;
}
.abf7060e6f2beabe-alignEnd {
align-items: flex-end;
}
.abf7060e6f2beabe-alignCenter {
align-items: center;
}
.abf7060e6f2beabe-alignStretch {
align-items: stretch;
}
.abf7060e6f2beabe-alignBaseline {
align-items: baseline;
}
.abf7060e6f2beabe-justifyStart {
justify-content: flex-start;
}
.abf7060e6f2beabe-justifyEnd {
justify-content: flex-end;
}
.abf7060e6f2beabe-justifyCenter {
justify-content: center;
}
.abf7060e6f2beabe-justifyAround {
justify-content: space-around;
}
.abf7060e6f2beabe-justifyBetween {
justify-content: space-between;
}
.abf7060e6f2beabe-noWrap {
flex-wrap: nowrap;
}
.abf7060e6f2beabe-wrap {
flex-wrap: wrap;
}
.abf7060e6f2beabe-wrapReverse {
flex-wrap: wrap-reverse;
}
.abf7060e6f2beabe-directionRow {
flex-direction: row;
}
.abf7060e6f2beabe-directionRowReverse {
flex-direction: row-reverse;
}
.abf7060e6f2beabe-directionColumn {
flex-direction: column;
}
.abf7060e6f2beabe-spacer {
flex: 1;
overflow: hidden;
}
.abf7060e6f2beabe-vertical {
display: flex;
flex-direction: column;
}
.abf7060e6f2beabe-horizontal {
display: flex;
flex-direction: row;
}
.abf7060e6f2beabe-horizontalReverse {
display: flex;
flex-direction: row-reverse;
}
.abf7060e6f2beabe-horizontal > .abf7060e6f2beabe-spacer,
.abf7060e6f2beabe-horizontalReverse > .abf7060e6f2beabe-spacer,
.abf7060e6f2beabe-vertical > .abf7060e6f2beabe-spacer {
min-height: 1px;
}
.abf7060e6f2beabe-flexCenter {
align-items: center;
display: flex;
justify-content: center;
}
.ddd1814f7cd3e6fd-formText a:hover {
text-decoration: underline;
}
.ddd1814f7cd3e6fd-formText strong {
font-weight: var(--font-weight-semibold);
}
.ddd1814f7cd3e6fd-default,
.ddd1814f7cd3e6fd-labelDescriptor,
.ddd1814f7cd3e6fd-labelSelected,
.ddd1814f7cd3e6fd-placeholder {
}
.ddd1814f7cd3e6fd-labelSelected {
font-weight: var(--font-weight-normal);
}
@media (-webkit-max-device-pixel-ratio: 1) {
.theme-light .ddd1814f7cd3e6fd-labelSelected {
font-weight: var(--font-weight-medium);
}
}
.ddd1814f7cd3e6fd-labelBold {
font-weight: var(--font-weight-semibold);
}
.ddd1814f7cd3e6fd-description {
font-size: 14px;
font-weight: var(--font-weight-normal);
line-height: 20px;
}
@media (-webkit-max-device-pixel-ratio: 1) {
.theme-light .ddd1814f7cd3e6fd-description {
font-weight: var(--font-weight-medium);
}
}
.ddd1814f7cd3e6fd-modeDefault {
cursor: default;
}
.ddd1814f7cd3e6fd-modeSelectable {
cursor: text;
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
}
.ddd1814f7cd3e6fd-modeDisabled {
cursor: not-allowed;
opacity: 0.3;
}
.ddd1814f7cd3e6fd-description,
.ddd1814f7cd3e6fd-labelDescriptor {
color: var(--text-default);
}
.ddd1814f7cd3e6fd-placeholder {
color: var(--text-muted);
}
.ddd1814f7cd3e6fd-error {
color: var(--text-feedback-critical);
}
.ddd1814f7cd3e6fd-error,
.ddd1814f7cd3e6fd-success {
}
.ddd1814f7cd3e6fd-success {
color: var(--text-feedback-positive);
}
.enable-forced-colors .ddd1814f7cd3e6fd-modeDisabled {
color: GrayText;
opacity: 1;
}
.b717a15017b82443-heading-sm\/normal {
font-family: var(--font-display);
font-size: 14px;
font-weight: 400;
line-height: 1.2857142857142858;
}
.b717a15017b82443-heading-sm\/normal.b717a15017b82443-fontScaling {
font-size: 0.875rem;
}
.b717a15017b82443-heading-sm\/medium {
font-family: var(--font-display);
font-size: 14px;
font-weight: 500;
line-height: 1.2857142857142858;
}
.b717a15017b82443-heading-sm\/medium.b717a15017b82443-fontScaling {
font-size: 0.875rem;
}
.b717a15017b82443-heading-sm\/semibold {
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
line-height: 1.2857142857142858;
}
.b717a15017b82443-heading-sm\/semibold.b717a15017b82443-fontScaling {
font-size: 0.875rem;
}
.b717a15017b82443-heading-sm\/bold {
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
line-height: 1.2857142857142858;
}
.b717a15017b82443-heading-sm\/bold.b717a15017b82443-fontScaling {
font-size: 0.875rem;
}
.b717a15017b82443-heading-sm\/extrabold {
font-family: var(--font-display);
font-size: 14px;
font-weight: 800;
line-height: 1.2857142857142858;
}
.b717a15017b82443-heading-sm\/extrabold.b717a15017b82443-fontScaling {
font-size: 0.875rem;
}
.b717a15017b82443-heading-md\/normal {
font-family: var(--font-display);
font-size: 16px;
font-weight: 400;
line-height: 1.25;
}
.b717a15017b82443-heading-md\/normal.b717a15017b82443-fontScaling {
font-size: 1rem;
}
.b717a15017b82443-heading-md\/medium {
font-family: var(--font-display);
font-size: 16px;
font-weight: 500;
line-height: 1.25;
}
.b717a15017b82443-heading-md\/medium.b717a15017b82443-fontScaling {
font-size: 1rem;
}
.b717a15017b82443-heading-md\/semibold {
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
line-height: 1.25;
}
.b717a15017b82443-heading-md\/semibold.b717a15017b82443-fontScaling {
font-size: 1rem;
}
.b717a15017b82443-heading-md\/bold {
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
line-height: 1.25;
}
.b717a15017b82443-heading-md\/bold.b717a15017b82443-fontScaling {
font-size: 1rem;
}
.b717a15017b82443-heading-md\/extrabold {
font-family: var(--font-display);
font-size: 16px;
font-weight: 800;
line-height: 1.25;
}
.b717a15017b82443-heading-md\/extrabold.b717a15017b82443-fontScaling {
font-size: 1rem;
}
.b717a15017b82443-heading-lg\/normal {
font-family: var(--font-display);
font-size: 20px;
font-weight: 400;
line-height: 1.2;
}
.b717a15017b82443-heading-lg\/normal.b717a15017b82443-fontScaling {
font-size: 1.25rem;
}
.b717a15017b82443-heading-lg\/medium {
font-family: var(--font-display);
font-size: 20px;
font-weight: 500;
line-height: 1.2;
}
.b717a15017b82443-heading-lg\/medium.b717a15017b82443-fontScaling {
font-size: 1.25rem;
}
.b717a15017b82443-heading-lg\/semibold {
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
line-height: 1.2;
}
.b717a15017b82443-heading-lg\/semibold.b717a15017b82443-fontScaling {
font-size: 1.25rem;
}
.b717a15017b82443-heading-lg\/bold {
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
line-height: 1.2;
}
.b717a15017b82443-heading-lg\/bold.b717a15017b82443-fontScaling {
font-size: 1.25rem;
}
.b717a15017b82443-heading-lg\/extrabold {
font-family: var(--font-display);
font-size: 20px;
font-weight: 800;
line-height: 1.2;
}
.b717a15017b82443-heading-lg\/extrabold.b717a15017b82443-fontScaling {
font-size: 1.25rem;
}
.b717a15017b82443-heading-xl\/normal {
font-family: var(--font-display);
font-size: 24px;
font-weight: 400;
line-height: 1.25;
}
.b717a15017b82443-heading-xl\/normal.b717a15017b82443-fontScaling {
font-size: 1.5rem;
}
.b717a15017b82443-heading-xl\/medium {
font-family: var(--font-display);
font-size: 24px;
font-weight: 500;
line-height: 1.25;
}
.b717a15017b82443-heading-xl\/medium.b717a15017b82443-fontScaling {
font-size: 1.5rem;
}
.b717a15017b82443-heading-xl\/semibold {
font-family: var(--font-display);
font-size: 24px;
font-weight: 600;
line-height: 1.25;
}
.b717a15017b82443-heading-xl\/semibold.b717a15017b82443-fontScaling {
font-size: 1.5rem;
}
.b717a15017b82443-heading-xl\/bold {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
line-height: 1.25;
}
.b717a15017b82443-heading-xl\/bold.b717a15017b82443-fontScaling {
font-size: 1.5rem;
}
.b717a15017b82443-heading-xl\/extrabold {
font-family: var(--font-display);
font-size: 24px;
font-weight: 800;
line-height: 1.25;
}
.b717a15017b82443-heading-xl\/extrabold.b717a15017b82443-fontScaling {
font-size: 1.5rem;
}
.b717a15017b82443-heading-xxl\/normal {
font-family: var(--font-display);
font-size: 32px;
font-weight: 400;
line-height: 1.25;
}
.b717a15017b82443-heading-xxl\/normal.b717a15017b82443-fontScaling {
font-size: 2rem;
}
.b717a15017b82443-heading-xxl\/medium {
font-family: var(--font-display);
font-size: 32px;
font-weight: 500;
line-height: 1.25;
}
.b717a15017b82443-heading-xxl\/medium.b717a15017b82443-fontScaling {
font-size: 2rem;
}
.b717a15017b82443-heading-xxl\/semibold {
font-family: var(--font-display);
font-size: 32px;
font-weight: 600;
line-height: 1.25;
}
.b717a15017b82443-heading-xxl\/semibold.b717a15017b82443-fontScaling {
font-size: 2rem;
}
.b717a15017b82443-heading-xxl\/bold {
font-family: var(--font-display);
font-size: 32px;
font-weight: 700;
line-height: 1.25;
}
.b717a15017b82443-heading-xxl\/bold.b717a15017b82443-fontScaling {
font-size: 2rem;
}
.b717a15017b82443-heading-xxl\/extrabold {
font-family: var(--font-display);
font-size: 32px;
font-weight: 800;
line-height: 1.25;
}
.b717a15017b82443-heading-xxl\/extrabold.b717a15017b82443-fontScaling {
font-size: 2rem;
}
.b717a15017b82443-eyebrow {
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.3333333333333333;
text-transform: uppercase;
}
.b717a15017b82443-eyebrow.b717a15017b82443-fontScaling {
font-size: 0.75rem;
}
.b717a15017b82443-heading-deprecated-12\/normal {
font-family: var(--font-display);
font-size: 12px;
font-weight: 400;
line-height: 1.3333333333333333;
}
.b717a15017b82443-heading-deprecated-12\/normal.b717a15017b82443-fontScaling {
font-size: 0.75rem;
}
.b717a15017b82443-heading-deprecated-12\/medium {
font-family: var(--font-display);
font-size: 12px;
font-weight: 500;
line-height: 1.3333333333333333;
}
.b717a15017b82443-heading-deprecated-12\/medium.b717a15017b82443-fontScaling {
font-size: 0.75rem;
}
.b717a15017b82443-heading-deprecated-12\/semibold {
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
line-height: 1.3333333333333333;
}
.b717a15017b82443-heading-deprecated-12\/semibold.b717a15017b82443-fontScaling {
font-size: 0.75rem;
}
.b717a15017b82443-heading-deprecated-12\/bold {
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
line-height: 1.3333333333333333;
}
.b717a15017b82443-heading-deprecated-12\/bold.b717a15017b82443-fontScaling {
font-size: 0.75rem;
}
.b717a15017b82443-heading-deprecated-12\/extrabold {
font-family: var(--font-display);
font-size: 12px;
font-weight: 800;
line-height: 1.3333333333333333;
}
.b717a15017b82443-heading-deprecated-12\/extrabold.b717a15017b82443-fontScaling {
font-size: 0.75rem;
}
.b717a15017b82443-redesign\/heading-18\/bold {
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
line-height: 1.3333333333333333;
}
.b717a15017b82443-redesign\/heading-18\/bold.b717a15017b82443-fontScaling {
font-size: 1.125rem;
}
.b717a15017b82443-text-xxs\/normal {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 400;
line-height: 1.2;
}
.b717a15017b82443-text-xxs\/normal.b717a15017b82443-fontScaling {
font-size: 0.625rem;
}
.b717a15017b82443-text-xxs\/medium {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 500;
line-height: 1.2;
}
.b717a15017b82443-text-xxs\/medium.b717a15017b82443-fontScaling {
font-size: 0.625rem;
}
.b717a15017b82443-text-xxs\/semibold {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 600;
line-height: 1.2;
}
.b717a15017b82443-text-xxs\/semibold.b717a15017b82443-fontScaling {
font-size: 0.625rem;
}
.b717a15017b82443-text-xxs\/bold {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 700;
line-height: 1.2;
}
.b717a15017b82443-text-xxs\/bold.b717a15017b82443-fontScaling {
font-size: 0.625rem;
}
.b717a15017b82443-text-xs\/normal {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 400;
line-height: 1.3333333333333333;
}
.b717a15017b82443-text-xs\/normal.b717a15017b82443-fontScaling {
font-size: 0.75rem;
}
.b717a15017b82443-text-xs\/medium {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 500;
line-height: 1.3333333333333333;
}
.b717a15017b82443-text-xs\/medium.b717a15017b82443-fontScaling {
font-size: 0.75rem;
}
.b717a15017b82443-text-xs\/semibold {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 600;
line-height: 1.3333333333333333;
}
.b717a15017b82443-text-xs\/semibold.b717a15017b82443-fontScaling {
font-size: 0.75rem;
}
.b717a15017b82443-text-xs\/bold {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 700;
line-height: 1.3333333333333333;
}
.b717a15017b82443-text-xs\/bold.b717a15017b82443-fontScaling {
font-size: 0.75rem;
}
.b717a15017b82443-text-sm\/normal {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 400;
line-height: 1.2857142857142858;
}
.b717a15017b82443-text-sm\/normal.b717a15017b82443-fontScaling {
font-size: 0.875rem;
}
.b717a15017b82443-text-sm\/medium {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 500;
line-height: 1.2857142857142858;
}
.b717a15017b82443-text-sm\/medium.b717a15017b82443-fontScaling {
font-size: 0.875rem;
}
.b717a15017b82443-text-sm\/semibold {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 600;
line-height: 1.2857142857142858;
}
.b717a15017b82443-text-sm\/semibold.b717a15017b82443-fontScaling {
font-size: 0.875rem;
}
.b717a15017b82443-text-sm\/bold {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 700;
line-height: 1.2857142857142858;
}
.b717a15017b82443-text-sm\/bold.b717a15017b82443-fontScaling {
font-size: 0.875rem;
}
.b717a15017b82443-text-md\/normal {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 400;
line-height: 1.25;
}
.b717a15017b82443-text-md\/normal.b717a15017b82443-fontScaling {
font-size: 1rem;
}
.b717a15017b82443-text-md\/medium {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 500;
line-height: 1.25;
}
.b717a15017b82443-text-md\/medium.b717a15017b82443-fontScaling {
font-size: 1rem;
}
.b717a15017b82443-text-md\/semibold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 600;
line-height: 1.25;
}
.b717a15017b82443-text-md\/semibold.b717a15017b82443-fontScaling {
font-size: 1rem;
}
.b717a15017b82443-text-md\/bold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 700;
line-height: 1.25;
}
.b717a15017b82443-text-md\/bold.b717a15017b82443-fontScaling {
font-size: 1rem;
}
.b717a15017b82443-text-lg\/normal {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 400;
line-height: 1.2;
}
.b717a15017b82443-text-lg\/normal.b717a15017b82443-fontScaling {
font-size: 1.25rem;
}
.b717a15017b82443-text-lg\/medium {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 500;
line-height: 1.2;
}
.b717a15017b82443-text-lg\/medium.b717a15017b82443-fontScaling {
font-size: 1.25rem;
}
.b717a15017b82443-text-lg\/semibold {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 600;
line-height: 1.2;
}
.b717a15017b82443-text-lg\/semibold.b717a15017b82443-fontScaling {
font-size: 1.25rem;
}
.b717a15017b82443-text-lg\/bold {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 700;
line-height: 1.2;
}
.b717a15017b82443-text-lg\/bold.b717a15017b82443-fontScaling {
font-size: 1.25rem;
}
.b717a15017b82443-redesign\/message-preview\/normal {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 400;
line-height: 1.3333333333333333;
}
.b717a15017b82443-redesign\/message-preview\/normal.b717a15017b82443-fontScaling {
font-size: 0.9375rem;
}
.b717a15017b82443-redesign\/message-preview\/medium {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 500;
line-height: 1.3333333333333333;
}
.b717a15017b82443-redesign\/message-preview\/medium.b717a15017b82443-fontScaling {
font-size: 0.9375rem;
}
.b717a15017b82443-redesign\/message-preview\/semibold {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 600;
line-height: 1.3333333333333333;
}
.b717a15017b82443-redesign\/message-preview\/semibold.b717a15017b82443-fontScaling {
font-size: 0.9375rem;
}
.b717a15017b82443-redesign\/message-preview\/bold {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 700;
line-height: 1.3333333333333333;
}
.b717a15017b82443-redesign\/message-preview\/bold.b717a15017b82443-fontScaling {
font-size: 0.9375rem;
}
.b717a15017b82443-redesign\/channel-title\/normal {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 400;
line-height: 1.375;
}
.b717a15017b82443-redesign\/channel-title\/normal.b717a15017b82443-fontScaling {
font-size: 1rem;
}
.b717a15017b82443-redesign\/channel-title\/medium {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 500;
line-height: 1.375;
}
.b717a15017b82443-redesign\/channel-title\/medium.b717a15017b82443-fontScaling {
font-size: 1rem;
}
.b717a15017b82443-redesign\/channel-title\/semibold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 600;
line-height: 1.375;
}
.b717a15017b82443-redesign\/channel-title\/semibold.b717a15017b82443-fontScaling {
font-size: 1rem;
}
.b717a15017b82443-redesign\/channel-title\/bold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 700;
line-height: 1.375;
}
.b717a15017b82443-redesign\/channel-title\/bold.b717a15017b82443-fontScaling {
font-size: 1rem;
}
.b717a15017b82443-display-sm {
font-family: var(--font-headline);
font-size: 20px;
font-weight: 800;
line-height: 1;
}
.b717a15017b82443-display-sm.b717a15017b82443-fontScaling {
font-size: 1.25rem;
}
.b717a15017b82443-display-md {
font-family: var(--font-headline);
font-size: 34px;
font-weight: 800;
line-height: 1.0588235294117647;
}
.b717a15017b82443-display-md.b717a15017b82443-fontScaling {
font-size: 2.125rem;
}
.b717a15017b82443-display-lg {
font-family: var(--font-headline);
font-size: 44px;
font-weight: 800;
line-height: 0.9545454545454546;
}
.b717a15017b82443-display-lg.b717a15017b82443-fontScaling {
font-size: 2.75rem;
}
.b717a15017b82443-code {
font-family: var(--font-code);
font-size: 12px;
font-weight: 700;
line-height: 1.3333333333333333;
}
.b717a15017b82443-code.b717a15017b82443-fontScaling {
font-size: 0.75rem;
}
.b717a15017b82443-title {
cursor: default;
flex: 1;
font-family: var(--font-display);
}
.b717a15017b82443-h1 {
font-size: 20px;
line-height: 24px;
}
.b717a15017b82443-h1,
.b717a15017b82443-h2 {
font-weight: var(--font-weight-semibold);
}
.b717a15017b82443-h2 {
font-size: 16px;
line-height: 20px;
}
.b717a15017b82443-h3 {
font-weight: var(--font-weight-medium);
line-height: 24px;
}
.b717a15017b82443-h3,
.b717a15017b82443-h4 {
font-size: 16px;
}
.b717a15017b82443-h4 {
font-weight: var(--font-weight-semibold);
letter-spacing: 0.3px;
}
.b717a15017b82443-h4,
.b717a15017b82443-h5,
.b717a15017b82443-legend {
line-height: 20px;
}
.b717a15017b82443-h5,
.b717a15017b82443-legend {
color: var(--text-strong);
font-size: 16px;
font-weight: 500;
margin-bottom: 8px;
text-transform: unset;
}
.b717a15017b82443-defaultMarginh4 {
margin-bottom: 0;
margin-top: 0;
}
.b717a15017b82443-defaultMarginh1,
.b717a15017b82443-defaultMarginh2 {
margin-bottom: 20px;
}
.b717a15017b82443-defaultMarginh3,
.b717a15017b82443-defaultMarginh5,
.b717a15017b82443-defaultMarginlabel,
.b717a15017b82443-defaultMarginlegend {
margin-bottom: 8px;
}
.b717a15017b82443-disabled {
cursor: not-allowed;
opacity: 0.5;
}
.b717a15017b82443-required {
color: var(--text-feedback-critical);
-webkit-padding-start: 4px;
padding-inline-start: 4px;
}
.b717a15017b82443-errorMessage {
font-size: 12px;
font-style: italic;
font-weight: var(--font-weight-medium);
}
.b717a15017b82443-errorSeparator {
padding-inline: 4px;
}
.b717a15017b82443-defaultColor {
color: var(--text-strong);
}
.b717a15017b82443-label,
.b717a15017b82443-legend {
color: var(--text-default);
}
.b717a15017b82443-label {
display: block;
}
.b717a15017b82443-faded {
opacity: 0.8;
}
.b717a15017b82443-error {
color: var(--text-feedback-critical);
}
.enable-forced-colors .b717a15017b82443-disabled {
color: GrayText;
opacity: 1;
}
.f43ba5b23c68a68f-formNotice {
cursor: default;
padding: 20px;
}
.f43ba5b23c68a68f-formNoticeTitle {
margin-bottom: 4px;
}
.f43ba5b23c68a68f-formNoticeBody p {
letter-spacing: -0.39px;
margin: 0 0 12px;
}
.f43ba5b23c68a68f-formNoticeBody p:last-child {
margin-bottom: 0;
}
.f43ba5b23c68a68f-formNoticeBody u {
font-style: italic;
text-decoration: none;
}
.f43ba5b23c68a68f-icon {
-webkit-user-drag: none;
}
.f43ba5b23c68a68f-whiteText,
.f43ba5b23c68a68f-whiteText a {
color: unset;
}
._7b91786bd8121d60-layerRoot {
min-height: 600px;
position: relative;
width: 100%;
}
._7b91786bd8121d60-container {
align-items: flex-start;
display: flex;
justify-content: center;
min-height: 400px;
padding: 32px;
}
._6e2b9359c6f84cfd-notice {
background: var(--custom-notice-background);
border-radius: 8px 0 0;
border-top: 1px solid var(--app-frame-border);
color: var(--custom-notice-text);
flex-grow: 0;
flex-shrink: 0;
font-size: 14px;
font-weight: var(--font-weight-medium);
line-height: 36px;
padding-inline: 4px 28px;
position: relative;
text-align: center;
z-index: 101;
-webkit-border-start: 1px solid var(--app-frame-border);
border-inline-start: 1px solid var(--app-frame-border);
box-shadow: none;
}
._6e2b9359c6f84cfd-notice strong {
font-weight: var(--font-weight-semibold);
}
._6e2b9359c6f84cfd-notice._6e2b9359c6f84cfd-isMobile {
line-height: 30px;
padding: 10px 20px;
}
._6e2b9359c6f84cfd-notice ._6e2b9359c6f84cfd-button {
border-color: var(--custom-notice-text) !important;
color: var(--custom-notice-text) !important;
}
._6e2b9359c6f84cfd-notice ._6e2b9359c6f84cfd-button:hover {
background-color: var(--background-mod-subtle);
color: var(--custom-notice-button-hover);
}
._6e2b9359c6f84cfd-notice ._6e2b9359c6f84cfd-closeIcon path {
fill: var(--custom-notice-text);
}
@supports not ((grid-template-columns: subgrid) and (white-space-collapse: collapse)) {
._6e2b9359c6f84cfd-notice {
border-start-start-radius: 0;
}
}
@supports (grid-template-columns: subgrid) and (white-space-collapse: collapse) {
._6e2b9359c6f84cfd-notice {
grid-area: notice;
}
}
._6e2b9359c6f84cfd-colorDefault {
--custom-notice-background: var(--status-positive-background);
--custom-notice-text: var(--status-positive-text);
--custom-notice-button-hover: var(--status-positive-background);
}
._6e2b9359c6f84cfd-colorNeutral {
--custom-notice-background: var(--background-accent);
--custom-notice-text: var(--white);
--custom-notice-button-hover: #222;
}
._6e2b9359c6f84cfd-colorPremium {
--custom-notice-text: var(--white);
}
._6e2b9359c6f84cfd-colorPremiumTier0 {
--custom-notice-background: linear-gradient(to left, var(--premium-tier-0-purple), var(--premium-tier-0-blue));
--custom-notice-button-hover: var(--brand-500);
}
._6e2b9359c6f84cfd-colorPremiumTier1 {
--custom-notice-background: linear-gradient(270deg, var(--premium-tier-1-blue-for-gradients) 0%, var(--premium-tier-1-dark-blue-for-gradients) 100%);
--custom-notice-button-hover: var(--brand-500);
}
._6e2b9359c6f84cfd-colorPremiumTier2 {
--custom-notice-background: linear-gradient(90deg, var(--premium-tier-2-purple-for-gradients) 0%, var(--premium-tier-2-purple-for-gradients-2) 50.24%, var(--premium-tier-2-pink-for-gradients) 100%);
--custom-notice-button-hover: var(--premium-tier-2-pink);
}
._6e2b9359c6f84cfd-colorInfo {
--custom-notice-background: var(--notice-background-info);
--custom-notice-text: var(--notice-text-info);
--custom-notice-button-hover: var(--notice-text-info);
}
._6e2b9359c6f84cfd-colorSuccess {
--custom-notice-background: var(--status-positive-background);
--custom-notice-text: var(--status-positive-text);
--custom-notice-button-hover: var(--text-feedback-positive);
}
._6e2b9359c6f84cfd-colorWarning {
--custom-notice-background: var(--notice-background-warning);
--custom-notice-text: var(--notice-text-warning);
--custom-notice-button-hover: var(--notice-text-warning);
}
._6e2b9359c6f84cfd-colorWarning ._6e2b9359c6f84cfd-button {
border-color: var(--status-warning-text) !important;
color: var(--status-warning-text);
}
._6e2b9359c6f84cfd-colorDanger {
--custom-notice-background: var(--notice-background-critical);
--custom-notice-text: var(--notice-text-critical);
--custom-notice-button-hover: var(--notice-text-critical);
}
._6e2b9359c6f84cfd-colorDefault,
._6e2b9359c6f84cfd-colorSuccess {
--custom-notice-background: var(--notice-background-positive);
--custom-notice-text: var(--notice-text-positive);
--custom-notice-button-hover: var(--notice-text-positive);
}
._6e2b9359c6f84cfd-colorStreamerMode {
--custom-notice-background: var(--twitch);
--custom-notice-text: var(--white);
--custom-notice-button-hover: var(--twitch);
}
._6e2b9359c6f84cfd-colorSpotify {
--custom-notice-background: var(--spotify);
--custom-notice-text: var(--white);
--custom-notice-button-hover: var(--spotify);
align-items: center;
display: flex;
justify-content: center;
}
._6e2b9359c6f84cfd-colorSpotify ._6e2b9359c6f84cfd-platformIcon {
height: 24px;
margin-top: 0;
width: 24px;
}
._6e2b9359c6f84cfd-colorSpotify ._6e2b9359c6f84cfd-button {
top: 0;
-webkit-margin-start: 20px;
margin-inline-start: 20px;
}
._6e2b9359c6f84cfd-colorPlayStation {
--custom-notice-background: var(--playstation);
--custom-notice-text: var(--white);
--custom-notice-button-hover: var(--playstation);
align-items: center;
display: flex;
justify-content: center;
}
._6e2b9359c6f84cfd-colorPlayStation ._6e2b9359c6f84cfd-platformIcon {
height: 24px;
margin-top: 0;
width: 24px;
}
._6e2b9359c6f84cfd-colorPlayStation ._6e2b9359c6f84cfd-button {
top: 0;
-webkit-margin-start: 20px;
margin-inline-start: 20px;
}
._6e2b9359c6f84cfd-colorBrand {
--custom-notice-background: var(--brand-500);
--custom-notice-text: var(--white);
--custom-notice-button-hover: var(--brand-500);
}
._6e2b9359c6f84cfd-colorCustom {
--custom-notice-button-hover: #222;
}
._6e2b9359c6f84cfd-closeButton {
align-items: center;
cursor: pointer;
display: flex;
height: 36px;
inset-inline-end: 0;
position: absolute;
top: 0;
width: 36px;
-webkit-app-region: no-drag;
}
._6e2b9359c6f84cfd-closeIcon path {
fill: var(--white);
}
._6e2b9359c6f84cfd-button {
border: 1px solid;
border-radius: 3px;
box-sizing: border-box;
color: var(--white);
display: inline-block;
font-size: 14px;
font-weight: var(--font-weight-medium);
height: 24px;
padding: 0 10px;
position: relative;
top: 6px;
vertical-align: top;
-webkit-margin-start: 10px;
line-height: 22px;
margin-inline-start: 10px;
transition:
background-color 0.2s ease,
color 0.2s ease,
border-color 0.2s ease;
-webkit-app-region: no-drag;
background-color: transparent;
border-color: var(--white);
}
._6e2b9359c6f84cfd-button._6e2b9359c6f84cfd-buttonMinor {
border: none;
text-decoration: underline;
}
._6e2b9359c6f84cfd-button:hover {
background-color: var(--white);
border-color: var(--white);
}
.enable-forced-colors ._6e2b9359c6f84cfd-notice {
border-bottom: 2px solid CanvasText;
}
.enable-forced-colors ._6e2b9359c6f84cfd-closeButton {
background-color: ButtonFace;
color: ButtonText;
opacity: 1;
}
.enable-forced-colors ._6e2b9359c6f84cfd-closeButton:focus,
.enable-forced-colors ._6e2b9359c6f84cfd-closeButton:hover {
outline: 1px solid ButtonText;
}
.c36707910f687430-tooltip {
box-sizing: border-box;
font-size: 14px;
font-weight: var(--font-weight-medium);
line-height: 16px;
max-width: 190px;
position: relative;
word-wrap: break-word;
border: 1px solid var(--border-subtle);
border-radius: 8px;
will-change: opacity, transform;
z-index: 1002;
}
.c36707910f687430-tooltipDisablePointerEvents,
.c36707910f687430-tooltipPointer {
pointer-events: none;
}
.c36707910f687430-tooltipPointer {
border: 5px solid transparent;
border-top: 5px solid var(--tooltip-pointer-bg);
height: 0;
width: 0;
}
.c36707910f687430-tooltipContent {
overflow: hidden;
padding: 8px 12px;
}
.c36707910f687430-tooltipContentAllowOverflow {
overflow: visible;
}
.c36707910f687430-tooltipTop {
transform-origin: 50% 100%;
}
.c36707910f687430-tooltipTop .c36707910f687430-tooltipPointer {
inset-inline-start: 50%;
position: absolute;
top: 100%;
-webkit-margin-start: -5px;
margin-inline-start: -5px;
}
.c36707910f687430-tooltipBottom,
.c36707910f687430-tooltipCenter {
transform-origin: 50% 0;
}
.c36707910f687430-tooltipBottom .c36707910f687430-tooltipPointer,
.c36707910f687430-tooltipCenter .c36707910f687430-tooltipPointer {
bottom: 100%;
inset-inline-start: 50%;
position: absolute;
-webkit-margin-start: -5px;
border-top-width: 5px;
margin-inline-start: -5px;
transform: rotate(180deg);
}
.c36707910f687430-tooltipLeft {
transform-origin: 100% 50%;
}
.c36707910f687430-tooltipLeft .c36707910f687430-tooltipPointer {
border-right-width: 5px;
inset-inline-start: 100%;
margin-top: -5px;
position: absolute;
top: 50%;
transform: rotate(-90deg);
}
.c36707910f687430-tooltipRight {
transform-origin: 0 50%;
}
.c36707910f687430-tooltipRight .c36707910f687430-tooltipPointer {
border-left-width: 5px;
inset-inline-end: 100%;
margin-top: -5px;
position: absolute;
top: 50%;
transform: rotate(90deg);
}
.enable-forced-colors .c36707910f687430-tooltip {
border: 1px solid CanvasText;
}
.enable-forced-colors .c36707910f687430-tooltipPointer {
background-color: CanvasText;
border: none;
border-radius: 100%;
height: 10px;
width: 10px;
}
.c36707910f687430-tooltip {
box-shadow: var(--shadow-high);
color: var(--text-default);
}
.c36707910f687430-tooltipPrimary {
--tooltip-pointer-bg: var(--background-surface-high);
background-color: var(--background-surface-high);
}
.c36707910f687430-tooltipPrimary .c36707910f687430-tooltipPointer {
border-top-color: var(--background-surface-high);
}
.c36707910f687430-tooltipGrey {
background-color: var(--primary-700);
color: var(--white);
--tooltip-pointer-bg: var(--primary-700);
}
.c36707910f687430-tooltipGrey .c36707910f687430-tooltipPointer {
border-top-color: var(--primary-700);
}
.c36707910f687430-tooltipBrand {
background-color: var(--brand-500);
color: var(--white);
--tooltip-pointer-bg: var(--brand-500);
}
.c36707910f687430-tooltipBrand .c36707910f687430-tooltipPointer {
border-top-color: var(--brand-500);
}
.c36707910f687430-tooltipRed {
background-color: var(--status-danger);
color: var(--white);
--tooltip-pointer-bg: var(--status-danger);
}
.c36707910f687430-tooltipRed .c36707910f687430-tooltipPointer {
border-top-color: var(--status-danger);
}
.c36707910f687430-tooltipGreen {
background-color: var(--green-360);
color: var(--white);
--tooltip-pointer-bg: var(--green-360);
}
.c36707910f687430-tooltipGreen .c36707910f687430-tooltipPointer {
border-top-color: var(--green-360);
}
.c36707910f687430-tooltipPointerBg {
display: none;
}
.c36707910f687430-tooltipPointer:not(.c36707910f687430-tooltipPointerBg) {
z-index: 1;
}
.c36707910f687430-tooltipTop .c36707910f687430-tooltipPointer:not(.c36707910f687430-tooltipPointerBg) {
margin-top: -1.5px;
}
.c36707910f687430-tooltipLeft .c36707910f687430-tooltipPointer:not(.c36707910f687430-tooltipPointerBg) {
-webkit-margin-start: -1.5px;
margin-inline-start: -1.5px;
}
.c36707910f687430-tooltipRight .c36707910f687430-tooltipPointer:not(.c36707910f687430-tooltipPointerBg) {
-webkit-margin-end: -1.5px;
margin-inline-end: -1.5px;
}
.c36707910f687430-tooltipBottom .c36707910f687430-tooltipPointer:not(.c36707910f687430-tooltipPointerBg),
.c36707910f687430-tooltipCenter .c36707910f687430-tooltipPointer:not(.c36707910f687430-tooltipPointerBg) {
margin-bottom: -1.5px;
}
.c36707910f687430-tooltipPointer.c36707910f687430-tooltipPointerBg {
display: block;
--border-width: 5px;
}
.c36707910f687430-tooltipPointer.c36707910f687430-tooltipPointerBg:after,
.c36707910f687430-tooltipPointer.c36707910f687430-tooltipPointerBg:before {
content: "";
position: absolute;
-webkit-border-start: var(--border-width) solid transparent;
border-inline-start: var(--border-width) solid transparent;
-webkit-border-end: var(--border-width) solid transparent;
border-inline-end: var(--border-width) solid transparent;
inset-inline-start: 50%;
top: 100%;
-webkit-margin-start: calc(var(--border-width) * -1);
margin-inline-start: calc(var(--border-width) * -1);
}
.c36707910f687430-tooltipPointer.c36707910f687430-tooltipPointerBg:before {
border-top: var(--border-width) solid var(--tooltip-pointer-bg);
margin-top: -5px;
}
.c36707910f687430-tooltipPointer.c36707910f687430-tooltipPointerBg:after {
border-top: var(--border-width) solid var(--border-subtle);
margin-top: -5px;
z-index: 1;
}
.custom-theme-background .c36707910f687430-tooltipPointer {
display: none;
}
.custom-theme-background .c36707910f687430-tooltip {
border: 1px solid var(--border-strong);
}
.refresh-fast-follow-distinct-borders .c36707910f687430-tooltip {
border-color: var(--app-frame-border);
}
.a562c840daab72a7-slider {
height: 40px;
position: relative;
width: 100%;
}
.a562c840daab72a7-mini {
height: 20px;
}
.a562c840daab72a7-mini .a562c840daab72a7-bar {
height: 6px;
top: 17px;
}
.a562c840daab72a7-mini .a562c840daab72a7-grabber {
height: 12px;
width: 12px;
-webkit-margin-start: -7px;
border-radius: 50%;
margin-inline-start: -7px;
margin-top: 3px;
}
.a562c840daab72a7-disabled {
opacity: 0.6;
}
.a562c840daab72a7-disabled .a562c840daab72a7-grabber {
cursor: not-allowed;
}
.a562c840daab72a7-bar {
background-color: var(--interactive-muted);
border-radius: 4px;
display: block;
height: 8px;
overflow: hidden;
position: relative;
top: 16px;
}
.a562c840daab72a7-barFill {
background: var(--control-brand-foreground-new);
height: 100%;
}
.a562c840daab72a7-track {
position: absolute;
top: 0;
inset-inline: 5px;
bottom: 0;
}
.a562c840daab72a7-grabber {
height: 24px;
width: 10px;
-webkit-margin-start: -5px;
background-color: var(--white);
border: 1px solid var(--border-strong);
border-radius: 3px;
box-shadow: var(--shadow-border), var(--shadow-ledge), var(--shadow-low);
cursor: ew-resize;
margin-inline-start: -5px;
margin-top: -13px;
top: 50%;
}
.a562c840daab72a7-grabber,
.a562c840daab72a7-mark {
inset-inline-start: 0;
position: absolute;
}
.a562c840daab72a7-mark {
align-items: center;
display: flex;
flex-direction: column;
width: 24px;
-webkit-margin-start: -12px;
margin-inline-start: -12px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.a562c840daab72a7-markAbove {
top: -6px;
}
.a562c840daab72a7-markBelow {
bottom: -12px;
}
.a562c840daab72a7-markValue {
-webkit-padding-start: 1px;
font-size: 10px;
font-weight: var(--font-weight-bold);
margin-bottom: 4px;
min-height: 10px;
padding-inline-start: 1px;
}
.a562c840daab72a7-markDash {
background-color: var(--interactive-muted);
height: 24px;
width: 2px;
}
.a562c840daab72a7-markDashSimple {
margin-top: 10px;
}
.a562c840daab72a7-markValue {
color: var(--text-muted);
}
.a562c840daab72a7-defaultValue .a562c840daab72a7-markValue {
color: var(--text-feedback-positive);
}
.a562c840daab72a7-mini,
.a562c840daab72a7-slider {
height: calc(24px + var(--bar-offset));
--grabber-size: 16px;
--bar-size: 4px;
--bar-offset: 0px;
}
.a562c840daab72a7-mini.a562c840daab72a7-hasMarks,
.a562c840daab72a7-slider.a562c840daab72a7-hasMarks {
--bar-offset: 24px;
}
.a562c840daab72a7-mini .a562c840daab72a7-mark,
.a562c840daab72a7-slider .a562c840daab72a7-mark {
display: flex;
flex-direction: column;
height: 48px;
justify-content: space-between;
top: 0;
}
.a562c840daab72a7-mini .a562c840daab72a7-markValue,
.a562c840daab72a7-slider .a562c840daab72a7-markValue {
color: var(--text-subtle);
font-size: 12px;
font-weight: 500;
line-height: 16px;
}
.a562c840daab72a7-mini .a562c840daab72a7-defaultValue .a562c840daab72a7-markValue,
.a562c840daab72a7-slider .a562c840daab72a7-defaultValue .a562c840daab72a7-markValue {
color: var(--text-feedback-positive);
}
.a562c840daab72a7-mini .a562c840daab72a7-markDash,
.a562c840daab72a7-slider .a562c840daab72a7-markDash {
border-radius: 12px;
}
.a562c840daab72a7-mini .a562c840daab72a7-grabber,
.a562c840daab72a7-slider .a562c840daab72a7-grabber {
border-radius: 50%;
height: var(--grabber-size);
width: var(--grabber-size);
-webkit-margin-start: calc(var(--grabber-size) / -2);
border: 1px solid var(--border-normal);
box-shadow: var(--shadow-low);
box-sizing: border-box;
margin-inline-start: calc(var(--grabber-size) / -2);
margin-top: calc(var(--grabber-size) / -2 + var(--bar-offset) / 2);
}
.high-contrast-mode .a562c840daab72a7-mini .a562c840daab72a7-grabber,
.high-contrast-mode .a562c840daab72a7-slider .a562c840daab72a7-grabber {
border-color: var(--border-strong);
}
.a562c840daab72a7-mini .a562c840daab72a7-hasMarks .a562c840daab72a7-grabber,
.a562c840daab72a7-slider .a562c840daab72a7-hasMarks .a562c840daab72a7-grabber {
margin-top: calc(var(--grabber-size) / -2 + 12px);
}
.a562c840daab72a7-mini .a562c840daab72a7-bar,
.a562c840daab72a7-slider .a562c840daab72a7-bar {
background-color: var(--interactive-muted);
height: var(--bar-size);
top: calc((24px - var(--bar-size)) / 2 + var(--bar-offset));
}
.a562c840daab72a7-mini .a562c840daab72a7-hasMarks .a562c840daab72a7-bar,
.a562c840daab72a7-slider .a562c840daab72a7-hasMarks .a562c840daab72a7-bar {
top: 34px;
}
.a562c840daab72a7-mini .a562c840daab72a7-barFill,
.a562c840daab72a7-slider .a562c840daab72a7-barFill {
background-color: var(--background-brand);
border: 1px solid hsla(0, 0%, 100%, 0.1);
}
.enable-forced-colors .a562c840daab72a7-barFill {
background: Highlight;
}
.enable-forced-colors .a562c840daab72a7-grabber {
background-color: Highlight;
border-color: Highlight;
}
.enable-forced-colors .a562c840daab72a7-bar {
background: Canvas;
border: 1px solid ButtonText;
}
.enable-forced-colors .a562c840daab72a7-markDash {
background: CanvasText;
}
.enable-forced-colors .a562c840daab72a7-disabled {
opacity: 1;
}
.enable-forced-colors .a562c840daab72a7-disabled .a562c840daab72a7-barFill {
background: GrayText;
}
.enable-forced-colors .a562c840daab72a7-disabled .a562c840daab72a7-grabber {
background-color: GrayText;
border-color: GrayText;
}
.enable-forced-colors .a562c840daab72a7-disabled .a562c840daab72a7-bar {
background: Canvas;
border-color: GrayText;
}
._58f1c3000c2c5b3e-loadingPopout {
background-color: var(--background-base-lower);
display: flex;
justify-content: center;
padding: 8px;
}
.full-motion .faf9c0f0be1b8685-translate.faf9c0f0be1b8685-animatorTop {
transform: translate3d(0, -10px, 0);
}
.full-motion .faf9c0f0be1b8685-translate.faf9c0f0be1b8685-animatorBottom {
transform: translate3d(0, 10px, 0);
}
.full-motion .faf9c0f0be1b8685-translate.faf9c0f0be1b8685-animatorLeft {
transform: translate3d(-10px, 0, 0);
}
.full-motion .faf9c0f0be1b8685-translate.faf9c0f0be1b8685-animatorRight {
transform: translate3d(10px, 0, 0);
}
.full-motion .faf9c0f0be1b8685-translate.faf9c0f0be1b8685-animatorCenter {
transform: translate3d(0, -10px, 0);
}
.full-motion .faf9c0f0be1b8685-translate.faf9c0f0be1b8685-didRender {
transform: translateZ(0);
transition: transform 0.2s ease-out;
}
.full-motion .faf9c0f0be1b8685-translate[data-popout-animating="false"] {
position: relative;
transform: none;
transition: none;
z-index: 0;
}
.full-motion .faf9c0f0be1b8685-scale {
opacity: 0;
transform: scale(0.01);
}
.full-motion .faf9c0f0be1b8685-scale.faf9c0f0be1b8685-animatorTop {
transform-origin: bottom center;
}
.full-motion .faf9c0f0be1b8685-scale.faf9c0f0be1b8685-animatorBottom {
transform-origin: top center;
}
.full-motion .faf9c0f0be1b8685-scale.faf9c0f0be1b8685-animatorLeft {
transform-origin: top right;
}
.full-motion .faf9c0f0be1b8685-scale.faf9c0f0be1b8685-animatorRight {
transform-origin: top left;
}
.full-motion .faf9c0f0be1b8685-scale.faf9c0f0be1b8685-animatorRight {
transform-origin: top center;
}
.full-motion .faf9c0f0be1b8685-scale.faf9c0f0be1b8685-didRender {
opacity: 1;
transform: scale(1);
transition:
transform 0.12s ease-out,
opacity 0.12s ease-out;
}
.full-motion .faf9c0f0be1b8685-scale[data-popout-animating="false"] {
position: relative;
transform: none;
transition: none;
z-index: 0;
}
.faf9c0f0be1b8685-fade {
opacity: 0;
}
.faf9c0f0be1b8685-fade.faf9c0f0be1b8685-didRender {
opacity: 1;
position: relative;
transition: opacity 0.08s ease-out;
z-index: 0;
}
._824715b905b4679e-loader {
align-items: center;
background-color: var(--background-base-lowest);
border-radius: 8px;
display: flex;
height: 80px;
justify-content: center;
}
.deaec9bf9217e8a2-emptyStateText {
color: var(--text-muted);
font-style: italic;
}
.deaec9bf9217e8a2-emptyState {
align-items: center;
display: flex;
justify-content: center;
min-height: 40px;
}
._2e223b71e11aa968-listBox {
box-sizing: border-box;
padding: var(--space-4);
}
._2e223b71e11aa968-listBox:not(._2e223b71e11aa968-scrollable) ::-webkit-scrollbar {
height: 0;
width: 0;
}
._2e223b71e11aa968-listBoxInner,
._2e223b71e11aa968-listBoxItem {
box-sizing: border-box;
}
._2e223b71e11aa968-listBoxItem {
align-items: stretch;
background-color: transparent;
border-radius: var(--radius-xs);
color: var(--text-strong);
cursor: pointer;
display: flex;
justify-content: flex-start;
transition: background-color 50ms ease-in;
}
._2e223b71e11aa968-listBoxItem:hover {
transition: background-color 0.15s ease-out;
}
._2e223b71e11aa968-listBoxItem:focus:not([aria-disabled]),
.mouse-mode ._2e223b71e11aa968-listBoxItem:hover:not([aria-disabled]) {
background-color: var(--background-mod-normal);
}
._2e223b71e11aa968-listBoxItem[aria-disabled="true"] {
background-color: transparent;
opacity: 0.5;
}
._2e223b71e11aa968-listBox:not(:focus-within) ._2e223b71e11aa968-listBoxItem[data-focus-visible="true"],
.keyboard-mode ._2e223b71e11aa968-listBoxItem:focus {
background-color: var(--background-mod-normal);
outline: 2px solid var(--border-focus);
outline-offset: -2px;
}
._2e223b71e11aa968-listBoxItemContent {
align-items: center;
box-sizing: border-box;
color: var(--text-strong);
display: flex;
flex-grow: 1;
justify-content: flex-start;
min-height: var(--select-option-height);
padding: calc(var(--space-xxs) - 1px) var(--space-4) calc(var(--space-xxs) - 1px) var(--space-8);
}
._2e223b71e11aa968-listBoxItemContent._2e223b71e11aa968-inInput {
min-height: calc(var(--select-option-height) - 2px);
}
._2e223b71e11aa968-listBoxItemLabel {
flex-grow: 1;
flex-shrink: 1;
}
._2e223b71e11aa968-selectedIcon {
padding: var(--space-xxs) var(--space-4) var(--space-xxs) 0;
}
._2e223b71e11aa968-loadingSpinnerWrapper,
._2e223b71e11aa968-selectedIcon {
align-items: center;
display: flex;
justify-content: center;
}
._2e223b71e11aa968-loadingSpinnerWrapper {
height: var(--select-option-height);
}
._2e223b71e11aa968-loadingSpinner {
width: 32px;
}
._2e223b71e11aa968-loadingSpinnerInner {
border-radius: 50%;
height: 8px;
width: 8px;
}
._4e35b986167c457d-tooltip {
align-items: center;
background-color: var(--background-surface-high);
border-radius: var(--radius-sm);
box-shadow:
inset 0 0 0 1px var(--border-subtle),
var(--shadow-high);
box-sizing: border-box;
color: var(--text-default);
display: flex;
gap: var(--space-8);
max-width: 200px;
padding: var(--space-8) var(--space-12);
position: relative;
width: auto;
will-change: opacity, transform;
}
._4e35b986167c457d-richTooltip {
max-width: none;
padding: 0;
width: auto;
}
._4e35b986167c457d-tooltipContent {
overflow: hidden;
}
._4e35b986167c457d-tooltipContentAllowOverflow {
overflow: visible;
}
._4e35b986167c457d-tooltip[data-position="top"] {
transform-origin: 50% 100%;
}
._4e35b986167c457d-tooltip[data-position="bottom"] {
transform-origin: 50% 0;
}
._4e35b986167c457d-tooltip[data-position="left"] {
transform-origin: 100% 50%;
}
._4e35b986167c457d-tooltip[data-position="right"] {
transform-origin: 0 50%;
}
._4e35b986167c457d-caretIcon ._4e35b986167c457d-caretFill {
fill: var(--background-surface-high);
}
._4e35b986167c457d-caretIcon ._4e35b986167c457d-caretStroke {
stroke: var(--border-subtle);
stroke-opacity: 1;
}
._4e35b986167c457d-tooltipWithShortcut {
align-items: center;
display: flex;
flex-direction: column;
gap: var(--space-4);
justify-content: center;
text-align: center;
}
._5bc6a0adc149eda0-caret {
--custom-caret-half-width: 8px;
--custom-caret-half-height: 7px;
--custom-caret-edge-offset-horizontal: 16px;
--custom-caret-edge-offset-vertical: 10px;
--custom-caret-horizontal-distance: 11px;
--custom-caret-border-overlap: 5px;
pointer-events: none;
position: absolute;
transform-origin: center;
}
._5bc6a0adc149eda0-caret--bottom {
top: calc(100% - var(--custom-caret-border-overlap));
transform: rotate(0deg);
}
._5bc6a0adc149eda0-caret--top {
bottom: calc(100% - var(--custom-caret-border-overlap));
transform: rotate(180deg);
}
._5bc6a0adc149eda0-caret--left {
inset-inline-start: calc(var(--custom-caret-horizontal-distance) * -1);
transform: rotate(90deg);
}
._5bc6a0adc149eda0-caret--right {
inset-inline-end: calc(var(--custom-caret-horizontal-distance) * -1);
transform: rotate(-90deg);
}
:is(._5bc6a0adc149eda0-caret--top, ._5bc6a0adc149eda0-caret--bottom)._5bc6a0adc149eda0-caret--center {
inset-inline-start: 50%;
-webkit-margin-start: calc(var(--custom-caret-half-width) * -1);
margin-inline-start: calc(var(--custom-caret-half-width) * -1);
}
:is(._5bc6a0adc149eda0-caret--top, ._5bc6a0adc149eda0-caret--bottom)._5bc6a0adc149eda0-caret--start {
inset-inline-start: var(--custom-caret-edge-offset-horizontal);
-webkit-margin-start: calc(var(--custom-caret-half-width) * -1);
margin-inline-start: calc(var(--custom-caret-half-width) * -1);
}
:is(._5bc6a0adc149eda0-caret--top, ._5bc6a0adc149eda0-caret--bottom)._5bc6a0adc149eda0-caret--end {
inset-inline-end: var(--custom-caret-edge-offset-horizontal);
-webkit-margin-end: calc(var(--custom-caret-half-width) * -1);
margin-inline-end: calc(var(--custom-caret-half-width) * -1);
}
:is(._5bc6a0adc149eda0-caret--left, ._5bc6a0adc149eda0-caret--right)._5bc6a0adc149eda0-caret--center {
margin-top: calc(var(--custom-caret-half-height) * -1);
top: 50%;
}
:is(._5bc6a0adc149eda0-caret--left, ._5bc6a0adc149eda0-caret--right)._5bc6a0adc149eda0-caret--start {
margin-top: calc(var(--custom-caret-half-height) * -1);
top: var(--custom-caret-edge-offset-vertical);
}
:is(._5bc6a0adc149eda0-caret--left, ._5bc6a0adc149eda0-caret--right)._5bc6a0adc149eda0-caret--end {
bottom: var(--custom-caret-edge-offset-vertical);
margin-bottom: calc(var(--custom-caret-half-height) * -1);
}
._5bc6a0adc149eda0-caret--custom {
--custom-caret-offset-x: 0;
--custom-caret-offset-y: 0;
}
._5bc6a0adc149eda0-caret--bottom._5bc6a0adc149eda0-caret--custom,
._5bc6a0adc149eda0-caret--top._5bc6a0adc149eda0-caret--custom {
inset-inline-start: 50%;
-webkit-margin-start: calc(var(--custom-caret-offset-x) - var(--custom-caret-half-width));
margin-inline-start: calc(var(--custom-caret-offset-x) - var(--custom-caret-half-width));
}
._5bc6a0adc149eda0-caret--left._5bc6a0adc149eda0-caret--custom,
._5bc6a0adc149eda0-caret--right._5bc6a0adc149eda0-caret--custom {
margin-top: calc(var(--custom-caret-offset-y) - var(--custom-caret-half-height));
top: 50%;
}
.a899850c63fdcb58-richTooltipContent {
align-items: center;
box-sizing: border-box;
display: flex;
gap: var(--space-8);
max-width: 272px;
padding: var(--space-8) var(--space-12);
}
.a899850c63fdcb58-assetContainer {
align-items: center;
display: flex;
flex-shrink: 0;
justify-content: center;
}
.a899850c63fdcb58-assetContainer > * {
height: auto;
max-width: 100%;
}
.a899850c63fdcb58-textContent {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
}
.a899850c63fdcb58-noAsset .a899850c63fdcb58-textContent {
text-align: center;
}
._0f0849b61557225e-heading-sm\/normal {
font-family: var(--font-display);
font-size: 14px;
font-weight: 400;
line-height: 1.2857142857142858;
}
._0f0849b61557225e-heading-sm\/normal._0f0849b61557225e-fontScaling {
font-size: 0.875rem;
}
._0f0849b61557225e-heading-sm\/medium {
font-family: var(--font-display);
font-size: 14px;
font-weight: 500;
line-height: 1.2857142857142858;
}
._0f0849b61557225e-heading-sm\/medium._0f0849b61557225e-fontScaling {
font-size: 0.875rem;
}
._0f0849b61557225e-heading-sm\/semibold {
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
line-height: 1.2857142857142858;
}
._0f0849b61557225e-heading-sm\/semibold._0f0849b61557225e-fontScaling {
font-size: 0.875rem;
}
._0f0849b61557225e-heading-sm\/bold {
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
line-height: 1.2857142857142858;
}
._0f0849b61557225e-heading-sm\/bold._0f0849b61557225e-fontScaling {
font-size: 0.875rem;
}
._0f0849b61557225e-heading-sm\/extrabold {
font-family: var(--font-display);
font-size: 14px;
font-weight: 800;
line-height: 1.2857142857142858;
}
._0f0849b61557225e-heading-sm\/extrabold._0f0849b61557225e-fontScaling {
font-size: 0.875rem;
}
._0f0849b61557225e-heading-md\/normal {
font-family: var(--font-display);
font-size: 16px;
font-weight: 400;
line-height: 1.25;
}
._0f0849b61557225e-heading-md\/normal._0f0849b61557225e-fontScaling {
font-size: 1rem;
}
._0f0849b61557225e-heading-md\/medium {
font-family: var(--font-display);
font-size: 16px;
font-weight: 500;
line-height: 1.25;
}
._0f0849b61557225e-heading-md\/medium._0f0849b61557225e-fontScaling {
font-size: 1rem;
}
._0f0849b61557225e-heading-md\/semibold {
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
line-height: 1.25;
}
._0f0849b61557225e-heading-md\/semibold._0f0849b61557225e-fontScaling {
font-size: 1rem;
}
._0f0849b61557225e-heading-md\/bold {
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
line-height: 1.25;
}
._0f0849b61557225e-heading-md\/bold._0f0849b61557225e-fontScaling {
font-size: 1rem;
}
._0f0849b61557225e-heading-md\/extrabold {
font-family: var(--font-display);
font-size: 16px;
font-weight: 800;
line-height: 1.25;
}
._0f0849b61557225e-heading-md\/extrabold._0f0849b61557225e-fontScaling {
font-size: 1rem;
}
._0f0849b61557225e-heading-lg\/normal {
font-family: var(--font-display);
font-size: 20px;
font-weight: 400;
line-height: 1.2;
}
._0f0849b61557225e-heading-lg\/normal._0f0849b61557225e-fontScaling {
font-size: 1.25rem;
}
._0f0849b61557225e-heading-lg\/medium {
font-family: var(--font-display);
font-size: 20px;
font-weight: 500;
line-height: 1.2;
}
._0f0849b61557225e-heading-lg\/medium._0f0849b61557225e-fontScaling {
font-size: 1.25rem;
}
._0f0849b61557225e-heading-lg\/semibold {
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
line-height: 1.2;
}
._0f0849b61557225e-heading-lg\/semibold._0f0849b61557225e-fontScaling {
font-size: 1.25rem;
}
._0f0849b61557225e-heading-lg\/bold {
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
line-height: 1.2;
}
._0f0849b61557225e-heading-lg\/bold._0f0849b61557225e-fontScaling {
font-size: 1.25rem;
}
._0f0849b61557225e-heading-lg\/extrabold {
font-family: var(--font-display);
font-size: 20px;
font-weight: 800;
line-height: 1.2;
}
._0f0849b61557225e-heading-lg\/extrabold._0f0849b61557225e-fontScaling {
font-size: 1.25rem;
}
._0f0849b61557225e-heading-xl\/normal {
font-family: var(--font-display);
font-size: 24px;
font-weight: 400;
line-height: 1.25;
}
._0f0849b61557225e-heading-xl\/normal._0f0849b61557225e-fontScaling {
font-size: 1.5rem;
}
._0f0849b61557225e-heading-xl\/medium {
font-family: var(--font-display);
font-size: 24px;
font-weight: 500;
line-height: 1.25;
}
._0f0849b61557225e-heading-xl\/medium._0f0849b61557225e-fontScaling {
font-size: 1.5rem;
}
._0f0849b61557225e-heading-xl\/semibold {
font-family: var(--font-display);
font-size: 24px;
font-weight: 600;
line-height: 1.25;
}
._0f0849b61557225e-heading-xl\/semibold._0f0849b61557225e-fontScaling {
font-size: 1.5rem;
}
._0f0849b61557225e-heading-xl\/bold {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
line-height: 1.25;
}
._0f0849b61557225e-heading-xl\/bold._0f0849b61557225e-fontScaling {
font-size: 1.5rem;
}
._0f0849b61557225e-heading-xl\/extrabold {
font-family: var(--font-display);
font-size: 24px;
font-weight: 800;
line-height: 1.25;
}
._0f0849b61557225e-heading-xl\/extrabold._0f0849b61557225e-fontScaling {
font-size: 1.5rem;
}
._0f0849b61557225e-heading-xxl\/normal {
font-family: var(--font-display);
font-size: 32px;
font-weight: 400;
line-height: 1.25;
}
._0f0849b61557225e-heading-xxl\/normal._0f0849b61557225e-fontScaling {
font-size: 2rem;
}
._0f0849b61557225e-heading-xxl\/medium {
font-family: var(--font-display);
font-size: 32px;
font-weight: 500;
line-height: 1.25;
}
._0f0849b61557225e-heading-xxl\/medium._0f0849b61557225e-fontScaling {
font-size: 2rem;
}
._0f0849b61557225e-heading-xxl\/semibold {
font-family: var(--font-display);
font-size: 32px;
font-weight: 600;
line-height: 1.25;
}
._0f0849b61557225e-heading-xxl\/semibold._0f0849b61557225e-fontScaling {
font-size: 2rem;
}
._0f0849b61557225e-heading-xxl\/bold {
font-family: var(--font-display);
font-size: 32px;
font-weight: 700;
line-height: 1.25;
}
._0f0849b61557225e-heading-xxl\/bold._0f0849b61557225e-fontScaling {
font-size: 2rem;
}
._0f0849b61557225e-heading-xxl\/extrabold {
font-family: var(--font-display);
font-size: 32px;
font-weight: 800;
line-height: 1.25;
}
._0f0849b61557225e-heading-xxl\/extrabold._0f0849b61557225e-fontScaling {
font-size: 2rem;
}
._0f0849b61557225e-eyebrow {
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.3333333333333333;
text-transform: uppercase;
}
._0f0849b61557225e-eyebrow._0f0849b61557225e-fontScaling {
font-size: 0.75rem;
}
._0f0849b61557225e-heading-deprecated-12\/normal {
font-family: var(--font-display);
font-size: 12px;
font-weight: 400;
line-height: 1.3333333333333333;
}
._0f0849b61557225e-heading-deprecated-12\/normal._0f0849b61557225e-fontScaling {
font-size: 0.75rem;
}
._0f0849b61557225e-heading-deprecated-12\/medium {
font-family: var(--font-display);
font-size: 12px;
font-weight: 500;
line-height: 1.3333333333333333;
}
._0f0849b61557225e-heading-deprecated-12\/medium._0f0849b61557225e-fontScaling {
font-size: 0.75rem;
}
._0f0849b61557225e-heading-deprecated-12\/semibold {
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
line-height: 1.3333333333333333;
}
._0f0849b61557225e-heading-deprecated-12\/semibold._0f0849b61557225e-fontScaling {
font-size: 0.75rem;
}
._0f0849b61557225e-heading-deprecated-12\/bold {
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
line-height: 1.3333333333333333;
}
._0f0849b61557225e-heading-deprecated-12\/bold._0f0849b61557225e-fontScaling {
font-size: 0.75rem;
}
._0f0849b61557225e-heading-deprecated-12\/extrabold {
font-family: var(--font-display);
font-size: 12px;
font-weight: 800;
line-height: 1.3333333333333333;
}
._0f0849b61557225e-heading-deprecated-12\/extrabold._0f0849b61557225e-fontScaling {
font-size: 0.75rem;
}
._0f0849b61557225e-redesign\/heading-18\/bold {
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
line-height: 1.3333333333333333;
}
._0f0849b61557225e-redesign\/heading-18\/bold._0f0849b61557225e-fontScaling {
font-size: 1.125rem;
}
._0f0849b61557225e-text-xxs\/normal {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 400;
line-height: 1.2;
}
._0f0849b61557225e-text-xxs\/normal._0f0849b61557225e-fontScaling {
font-size: 0.625rem;
}
._0f0849b61557225e-text-xxs\/medium {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 500;
line-height: 1.2;
}
._0f0849b61557225e-text-xxs\/medium._0f0849b61557225e-fontScaling {
font-size: 0.625rem;
}
._0f0849b61557225e-text-xxs\/semibold {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 600;
line-height: 1.2;
}
._0f0849b61557225e-text-xxs\/semibold._0f0849b61557225e-fontScaling {
font-size: 0.625rem;
}
._0f0849b61557225e-text-xxs\/bold {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 700;
line-height: 1.2;
}
._0f0849b61557225e-text-xxs\/bold._0f0849b61557225e-fontScaling {
font-size: 0.625rem;
}
._0f0849b61557225e-text-xs\/normal {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 400;
line-height: 1.3333333333333333;
}
._0f0849b61557225e-text-xs\/normal._0f0849b61557225e-fontScaling {
font-size: 0.75rem;
}
._0f0849b61557225e-text-xs\/medium {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 500;
line-height: 1.3333333333333333;
}
._0f0849b61557225e-text-xs\/medium._0f0849b61557225e-fontScaling {
font-size: 0.75rem;
}
._0f0849b61557225e-text-xs\/semibold {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 600;
line-height: 1.3333333333333333;
}
._0f0849b61557225e-text-xs\/semibold._0f0849b61557225e-fontScaling {
font-size: 0.75rem;
}
._0f0849b61557225e-text-xs\/bold {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 700;
line-height: 1.3333333333333333;
}
._0f0849b61557225e-text-xs\/bold._0f0849b61557225e-fontScaling {
font-size: 0.75rem;
}
._0f0849b61557225e-text-sm\/normal {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 400;
line-height: 1.2857142857142858;
}
._0f0849b61557225e-text-sm\/normal._0f0849b61557225e-fontScaling {
font-size: 0.875rem;
}
._0f0849b61557225e-text-sm\/medium {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 500;
line-height: 1.2857142857142858;
}
._0f0849b61557225e-text-sm\/medium._0f0849b61557225e-fontScaling {
font-size: 0.875rem;
}
._0f0849b61557225e-text-sm\/semibold {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 600;
line-height: 1.2857142857142858;
}
._0f0849b61557225e-text-sm\/semibold._0f0849b61557225e-fontScaling {
font-size: 0.875rem;
}
._0f0849b61557225e-text-sm\/bold {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 700;
line-height: 1.2857142857142858;
}
._0f0849b61557225e-text-sm\/bold._0f0849b61557225e-fontScaling {
font-size: 0.875rem;
}
._0f0849b61557225e-text-md\/normal {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 400;
line-height: 1.25;
}
._0f0849b61557225e-text-md\/normal._0f0849b61557225e-fontScaling {
font-size: 1rem;
}
._0f0849b61557225e-text-md\/medium {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 500;
line-height: 1.25;
}
._0f0849b61557225e-text-md\/medium._0f0849b61557225e-fontScaling {
font-size: 1rem;
}
._0f0849b61557225e-text-md\/semibold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 600;
line-height: 1.25;
}
._0f0849b61557225e-text-md\/semibold._0f0849b61557225e-fontScaling {
font-size: 1rem;
}
._0f0849b61557225e-text-md\/bold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 700;
line-height: 1.25;
}
._0f0849b61557225e-text-md\/bold._0f0849b61557225e-fontScaling {
font-size: 1rem;
}
._0f0849b61557225e-text-lg\/normal {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 400;
line-height: 1.2;
}
._0f0849b61557225e-text-lg\/normal._0f0849b61557225e-fontScaling {
font-size: 1.25rem;
}
._0f0849b61557225e-text-lg\/medium {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 500;
line-height: 1.2;
}
._0f0849b61557225e-text-lg\/medium._0f0849b61557225e-fontScaling {
font-size: 1.25rem;
}
._0f0849b61557225e-text-lg\/semibold {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 600;
line-height: 1.2;
}
._0f0849b61557225e-text-lg\/semibold._0f0849b61557225e-fontScaling {
font-size: 1.25rem;
}
._0f0849b61557225e-text-lg\/bold {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 700;
line-height: 1.2;
}
._0f0849b61557225e-text-lg\/bold._0f0849b61557225e-fontScaling {
font-size: 1.25rem;
}
._0f0849b61557225e-redesign\/message-preview\/normal {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 400;
line-height: 1.3333333333333333;
}
._0f0849b61557225e-redesign\/message-preview\/normal._0f0849b61557225e-fontScaling {
font-size: 0.9375rem;
}
._0f0849b61557225e-redesign\/message-preview\/medium {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 500;
line-height: 1.3333333333333333;
}
._0f0849b61557225e-redesign\/message-preview\/medium._0f0849b61557225e-fontScaling {
font-size: 0.9375rem;
}
._0f0849b61557225e-redesign\/message-preview\/semibold {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 600;
line-height: 1.3333333333333333;
}
._0f0849b61557225e-redesign\/message-preview\/semibold._0f0849b61557225e-fontScaling {
font-size: 0.9375rem;
}
._0f0849b61557225e-redesign\/message-preview\/bold {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 700;
line-height: 1.3333333333333333;
}
._0f0849b61557225e-redesign\/message-preview\/bold._0f0849b61557225e-fontScaling {
font-size: 0.9375rem;
}
._0f0849b61557225e-redesign\/channel-title\/normal {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 400;
line-height: 1.375;
}
._0f0849b61557225e-redesign\/channel-title\/normal._0f0849b61557225e-fontScaling {
font-size: 1rem;
}
._0f0849b61557225e-redesign\/channel-title\/medium {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 500;
line-height: 1.375;
}
._0f0849b61557225e-redesign\/channel-title\/medium._0f0849b61557225e-fontScaling {
font-size: 1rem;
}
._0f0849b61557225e-redesign\/channel-title\/semibold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 600;
line-height: 1.375;
}
._0f0849b61557225e-redesign\/channel-title\/semibold._0f0849b61557225e-fontScaling {
font-size: 1rem;
}
._0f0849b61557225e-redesign\/channel-title\/bold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 700;
line-height: 1.375;
}
._0f0849b61557225e-redesign\/channel-title\/bold._0f0849b61557225e-fontScaling {
font-size: 1rem;
}
._0f0849b61557225e-display-sm {
font-family: var(--font-headline);
font-size: 20px;
font-weight: 800;
line-height: 1;
}
._0f0849b61557225e-display-sm._0f0849b61557225e-fontScaling {
font-size: 1.25rem;
}
._0f0849b61557225e-display-md {
font-family: var(--font-headline);
font-size: 34px;
font-weight: 800;
line-height: 1.0588235294117647;
}
._0f0849b61557225e-display-md._0f0849b61557225e-fontScaling {
font-size: 2.125rem;
}
._0f0849b61557225e-display-lg {
font-family: var(--font-headline);
font-size: 44px;
font-weight: 800;
line-height: 0.9545454545454546;
}
._0f0849b61557225e-display-lg._0f0849b61557225e-fontScaling {
font-size: 2.75rem;
}
._0f0849b61557225e-code {
font-family: var(--font-code);
font-size: 12px;
font-weight: 700;
line-height: 1.3333333333333333;
}
._0f0849b61557225e-code._0f0849b61557225e-fontScaling {
font-size: 0.75rem;
}
._0f0849b61557225e-button {
align-items: center;
background: initial;
border: 1px solid transparent;
border-radius: var(--radius-sm);
box-sizing: border-box;
color: inherit;
cursor: pointer;
display: flex;
flex-grow: 0;
flex-shrink: 0;
font-size: medium;
font-weight: 400;
justify-content: center;
margin: 0;
max-height: -webkit-min-content;
max-height: -moz-min-content;
max-height: min-content;
max-width: 100%;
padding: 0;
position: relative;
text-align: start;
transition:
background-color 50ms ease-in,
color 50ms ease-in,
border-color 50ms ease-in,
opacity 50ms ease-in;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
}
._0f0849b61557225e-button:hover {
transition:
background-color 0.15s ease-out,
color 0.15s ease-out,
border-color 0.15s ease-out,
opacity 0.15s ease-out;
}
._0f0849b61557225e-button:disabled {
opacity: 0.5;
pointer-events: none;
}
.highlight-mana-buttons ._0f0849b61557225e-button {
box-shadow: 0 0 4px 4px var(--opacity-white-60);
}
.highlight-mana-buttons [data-button-hoisted-classname-wrapper] ._0f0849b61557225e-button {
box-shadow: 0 0 4px 4px var(--opacity-green-60);
}
[data-button-hoisted-classname-wrapper] {
display: flex;
width: auto;
}
._0f0849b61557225e-buttonChildrenWrapper {
border-radius: var(--radius-sm);
box-sizing: border-box;
justify-content: center;
position: relative;
width: 100%;
}
._0f0849b61557225e-buttonChildren,
._0f0849b61557225e-buttonChildrenWrapper {
align-items: center;
display: flex;
overflow: hidden;
}
._0f0849b61557225e-buttonChildren {
gap: var(--space-4);
text-overflow: ellipsis;
transition:
opacity 0.2s ease-out,
transform 0.2s ease-out;
white-space: nowrap;
}
._0f0849b61557225e-icon {
flex-shrink: 0;
}
._0f0849b61557225e-buttonChildren {
opacity: 1;
}
._0f0849b61557225e-buttonChildren._0f0849b61557225e-loading {
opacity: 0;
}
._0f0849b61557225e-spinnerWrapper {
animation-duration: 0.2s;
animation-fill-mode: forwards;
animation-timing-function: ease;
height: 100%;
position: absolute;
top: 0;
width: 100%;
}
._0f0849b61557225e-spinnerWrapper._0f0849b61557225e-fadeIn {
animation-name: _0f0849b61557225e-spinner-opacity-in;
}
._0f0849b61557225e-spinnerWrapper._0f0849b61557225e-fadeOut {
animation-name: _0f0849b61557225e-spinner-opacity-out;
}
.full-motion ._0f0849b61557225e-spinnerWrapper._0f0849b61557225e-fadeIn {
animation-name: _0f0849b61557225e-spinner-transform-in, _0f0849b61557225e-spinner-opacity-in;
}
.full-motion ._0f0849b61557225e-spinnerWrapper._0f0849b61557225e-fadeOut {
animation-name: _0f0849b61557225e-spinner-transform-out, _0f0849b61557225e-spinner-opacity-out;
}
.full-motion ._0f0849b61557225e-buttonChildren {
transform: translateY(0);
}
.full-motion ._0f0849b61557225e-buttonChildren._0f0849b61557225e-loading {
transform: translateY(-100%);
}
@keyframes _0f0849b61557225e-spinner-opacity-in {
0% {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes _0f0849b61557225e-spinner-opacity-out {
0% {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes _0f0849b61557225e-spinner-transform-in {
0% {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
@keyframes _0f0849b61557225e-spinner-transform-out {
0% {
transform: translateY(0);
}
to {
transform: translateY(100%);
}
}
._0f0849b61557225e-xs {
border-radius: var(--radius-xs);
}
._0f0849b61557225e-xs ._0f0849b61557225e-buttonChildrenWrapper {
min-height: 22px;
min-width: 22px;
}
._0f0849b61557225e-xs._0f0849b61557225e-hasText {
min-width: var(--__button-min-width, 60px);
}
._0f0849b61557225e-xs._0f0849b61557225e-hasText ._0f0849b61557225e-buttonChildrenWrapper {
padding: calc(var(--space-4) - 1px) calc(var(--space-8) - 1px);
}
._0f0849b61557225e-sm ._0f0849b61557225e-buttonChildrenWrapper {
min-height: 30px;
min-width: 30px;
}
._0f0849b61557225e-sm._0f0849b61557225e-hasText {
min-width: var(--__button-min-width, 60px);
}
._0f0849b61557225e-sm._0f0849b61557225e-hasText ._0f0849b61557225e-buttonChildrenWrapper {
padding: calc(var(--space-4) - 1px) calc(var(--space-12) - 1px);
}
._0f0849b61557225e-md ._0f0849b61557225e-buttonChildrenWrapper {
min-height: 38px;
min-width: 38px;
}
._0f0849b61557225e-md._0f0849b61557225e-hasText {
min-width: var(--__button-min-width, 100px);
}
._0f0849b61557225e-md._0f0849b61557225e-hasText ._0f0849b61557225e-buttonChildrenWrapper {
padding: calc(var(--space-8) - 1px) calc(var(--space-16) - 1px);
}
._0f0849b61557225e-spinnerItem {
background-color: currentColor !important;
}
._0f0849b61557225e-spinner {
height: 100%;
}
._0f0849b61557225e-spinner-sm,
._0f0849b61557225e-spinner-xs {
min-height: 16px;
min-width: 16px;
transform: scale(0.75);
}
._0f0849b61557225e-spinner-md {
transform: scale(0.9);
}
._0f0849b61557225e-spinner-lg,
._0f0849b61557225e-spinner-md {
min-height: 20px;
min-width: 20px;
}
._0f0849b61557225e-primary {
background-color: var(--control-primary-background-default);
border-color: var(--control-primary-border-default);
color: var(--control-primary-text-default);
}
._0f0849b61557225e-primary:hover {
background-color: var(--control-primary-background-hover);
border-color: var(--control-primary-border-hover);
color: var(--control-primary-text-hover);
}
._0f0849b61557225e-primary:active {
background-color: var(--control-primary-background-active);
border-color: var(--control-primary-border-active);
color: var(--control-primary-text-active);
}
._0f0849b61557225e-secondary {
background-color: var(--control-secondary-background-default);
border-color: var(--control-secondary-border-default);
color: var(--control-secondary-text-default);
}
._0f0849b61557225e-secondary:hover {
background-color: var(--control-secondary-background-hover);
border-color: var(--control-secondary-border-hover);
color: var(--control-secondary-text-hover);
}
._0f0849b61557225e-secondary:active {
background-color: var(--control-secondary-background-active);
border-color: var(--control-secondary-border-active);
color: var(--control-secondary-text-active);
}
._0f0849b61557225e-icon-only {
background-color: transparent;
border-color: transparent;
color: var(--control-icon-only-icon-default);
}
._0f0849b61557225e-icon-only:hover {
background-color: var(--control-icon-only-background-hover);
border-color: var(--control-icon-only-border-hover);
color: var(--control-icon-only-icon-hover);
}
._0f0849b61557225e-icon-only:active {
background-color: var(--control-icon-only-background-active);
border-color: var(--control-icon-only-border-active);
color: var(--control-icon-only-icon-active);
}
._0f0849b61557225e-color-mix {
background-color: transparent;
border: transparent;
color: var(--icon-strong);
}
._0f0849b61557225e-color-mix:hover {
color: var(--control-icon-only-icon-hover);
}
._0f0849b61557225e-color-mix:active {
color: var(--control-icon-only-icon-active);
}
._0f0849b61557225e-color-mix:before {
border: 1px solid transparent;
border-radius: var(--radius-sm);
box-sizing: border-box;
content: "";
height: 100%;
left: 0;
mix-blend-mode: plus-lighter;
position: absolute;
top: 0;
transition:
background-color 50ms ease-in,
border-color 50ms ease-in,
opacity 50ms ease-in;
width: 100%;
}
._0f0849b61557225e-color-mix:hover:before {
background-color: var(--control-icon-only-background-hover);
border-color: var(--border-subtle);
transition:
background-color 0.15s ease-out,
border-color 0.15s ease-out,
opacity 0.15s ease-out;
}
._0f0849b61557225e-color-mix:active:before {
background-color: var(--control-icon-only-background-active);
border-color: var(--border-subtle);
}
._0f0849b61557225e-input-accessory {
border-radius: var(--radius-xs);
color: var(--icon-strong);
}
.theme-light ._0f0849b61557225e-color-mix:before {
mix-blend-mode: difference;
}
._0f0849b61557225e-critical-primary {
background-color: var(--control-critical-primary-background-default);
border-color: var(--control-critical-primary-border-default);
color: var(--control-critical-primary-text-default);
}
._0f0849b61557225e-critical-primary:hover {
background-color: var(--control-critical-primary-background-hover);
border-color: var(--control-critical-primary-border-hover);
color: var(--control-critical-primary-text-hover);
}
._0f0849b61557225e-critical-primary:active {
background-color: var(--control-critical-primary-background-active);
border-color: var(--control-critical-primary-border-active);
color: var(--control-critical-primary-text-active);
}
._0f0849b61557225e-critical-secondary {
background-color: var(--control-critical-secondary-background-default);
border-color: var(--control-critical-secondary-border-default);
color: var(--control-critical-secondary-text-default);
}
._0f0849b61557225e-critical-secondary:hover {
background-color: var(--control-critical-secondary-background-hover);
border-color: var(--control-critical-secondary-border-hover);
color: var(--control-critical-secondary-text-hover);
}
._0f0849b61557225e-critical-secondary:active {
background-color: var(--control-critical-secondary-background-active);
border-color: var(--control-critical-secondary-border-active);
color: var(--control-critical-secondary-text-active);
}
._0f0849b61557225e-active {
background-color: var(--control-connected-background-default);
border-color: var(--control-connected-border-default);
color: var(--control-connected-text-default);
}
._0f0849b61557225e-active:hover {
background-color: var(--control-connected-background-hover);
border-color: var(--control-connected-border-hover);
color: var(--control-connected-text-hover);
}
._0f0849b61557225e-active:active {
background-color: var(--control-connected-background-active);
border-color: var(--control-connected-border-active);
color: var(--control-connected-text-active);
}
._0f0849b61557225e-overlay-primary {
background-color: var(--control-overlay-primary-background-default);
border-color: var(--control-overlay-primary-border-default);
color: var(--control-overlay-primary-text-default);
}
._0f0849b61557225e-overlay-primary:hover {
background-color: var(--control-overlay-primary-background-hover);
border-color: var(--control-overlay-primary-border-hover);
color: var(--control-overlay-primary-text-hover);
}
._0f0849b61557225e-overlay-primary:active {
background-color: var(--control-overlay-primary-background-active);
border-color: var(--control-overlay-primary-border-active);
color: var(--control-overlay-primary-text-active);
}
._0f0849b61557225e-overlay-secondary {
background-color: var(--control-overlay-secondary-background-default);
border-color: var(--control-overlay-secondary-border-default);
color: var(--control-overlay-secondary-text-default);
}
._0f0849b61557225e-overlay-secondary:hover {
background-color: var(--control-overlay-secondary-background-hover);
border-color: var(--control-overlay-secondary-border-hover);
color: var(--control-overlay-secondary-text-hover);
}
._0f0849b61557225e-overlay-secondary:active {
background-color: var(--control-overlay-secondary-background-active);
border-color: var(--control-overlay-secondary-border-active);
color: var(--control-overlay-secondary-text-active);
}
._0f0849b61557225e-expressive > * {
pointer-events: none;
z-index: 1;
}
._0f0849b61557225e-expressiveRive {
height: calc(100% + var(--__glow-amount) * 2 + 2px);
left: calc(var(--__glow-amount) * -1 - 1px);
position: absolute;
top: calc(var(--__glow-amount) * -1 - 1px);
width: calc(100% + var(--__glow-amount) * 2 + 2px);
}
._0f0849b61557225e-expressive ._0f0849b61557225e-expressiveBackground {
filter: blur(10px) saturate(var(--saturation-factor, 1));
}
.reduce-motion ._0f0849b61557225e-expressive ._0f0849b61557225e-expressiveBackground {
filter: blur(7px) saturate(var(--saturation-factor, 1));
}
._0f0849b61557225e-expressive {
color: var(--control-expressive-text-default);
}
._0f0849b61557225e-expressive ._0f0849b61557225e-expressiveFill {
--__glow-amount: 0px;
background-color: var(--control-expressive-background-default);
border-radius: 8px;
transition:
background-color 0.15s ease,
width 0.15s ease,
height 0.15s ease,
top 0.15s ease,
left 0.15s ease;
}
._0f0849b61557225e-expressive:hover {
color: var(--control-expressive-text-hover);
}
._0f0849b61557225e-expressive:hover ._0f0849b61557225e-expressiveFill {
background-color: var(--control-expressive-background-hover);
}
._0f0849b61557225e-expressive:active {
color: var(--control-expressive-text-active);
}
._0f0849b61557225e-expressive:active ._0f0849b61557225e-expressiveFill {
--__glow-amount: -1px;
background-color: var(--control-expressive-background-active);
}
._0f0849b61557225e-expressive ._0f0849b61557225e-expressiveHoverContainer {
filter: blur(8px);
mix-blend-mode: plus-lighter;
pointer-events: all;
}
._0f0849b61557225e-expressiveWrapper {
--__glow-amount: 8px;
display: flex;
max-width: 100%;
position: relative;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
}
._0f0849b61557225e-fullWidth._0f0849b61557225e-hasText {
flex: 1;
width: 100%;
}
._0f0849b61557225e-rounded {
border-radius: var(--radius-round);
}
.enable-forced-colors ._0f0849b61557225e-button {
background-color: ButtonFace;
border-color: ButtonText;
color: ButtonText;
forced-color-adjust: none;
}
.enable-forced-colors ._0f0849b61557225e-button:disabled {
background-color: Canvas;
border-color: GrayText;
color: GrayText;
opacity: 1;
}
.enable-forced-colors ._0f0849b61557225e-button ._0f0849b61557225e-expressiveFill {
display: none;
}
._0f0849b61557225e-container {
--custom-input-padding: 10px;
--custom-text-input-icon-spacing: var(--space-4);
min-height: var(--custom-text-input-height);
}
._0f0849b61557225e-container ._0f0849b61557225e-icon {
height: calc(var(--custom-text-input-height) - var(--custom-text-input-icon-spacing) * 2 - 2px);
}
._0f0849b61557225e-icon {
align-items: center;
aspect-ratio: 1/1;
border: 1px solid transparent;
border-radius: var(--radius-xs);
box-sizing: border-box;
display: flex;
justify-content: center;
}
._0f0849b61557225e-image {
height: 100%;
padding: 0 var(--space-4);
}
._0f0849b61557225e-iconButton {
color: var(--icon-strong);
}
._0f0849b61557225e-clearButton {
color: var(--icon-subtle);
cursor: pointer;
}
._0f0849b61557225e-clearButton:hover {
color: var(--icon-strong);
}
._0f0849b61557225e-leadingText {
-webkit-padding-start: var(--space-4);
padding-inline-start: var(--space-4);
}
._0f0849b61557225e-sm {
--custom-text-input-height: var(--control-item-height-sm);
}
._0f0849b61557225e-md {
--custom-text-input-height: var(--control-input-height-md);
}
._0f0849b61557225e-hasLeading {
-webkit-padding-start: var(--custom-text-input-icon-spacing);
padding-inline-start: var(--custom-text-input-icon-spacing);
}
._0f0849b61557225e-hasLeading ._0f0849b61557225e-input {
-webkit-padding-start: 0;
padding-inline-start: 0;
}
._0f0849b61557225e-hasTrailing {
-webkit-padding-end: var(--custom-text-input-icon-spacing);
padding-inline-end: var(--custom-text-input-icon-spacing);
}
._0f0849b61557225e-hasTrailing ._0f0849b61557225e-input {
-webkit-padding-end: 0;
padding-inline-end: 0;
}
._0f0849b61557225e-input {
background-color: transparent;
border: none;
box-sizing: border-box;
color: inherit;
flex: 1;
font-size: inherit;
height: 100%;
min-width: 30%;
padding-inline: var(--custom-input-padding);
}
._0f0849b61557225e-input:disabled {
cursor: not-allowed;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
._0f0849b61557225e-input::-moz-placeholder {
color: var(--input-placeholder-text-default);
-moz-user-select: none;
user-select: none;
}
._0f0849b61557225e-input::placeholder {
color: var(--input-placeholder-text-default);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
._0f0849b61557225e-hasTags {
padding: var(--space-4);
}
._0f0849b61557225e-hasTags ._0f0849b61557225e-input {
-webkit-padding-start: var(--space-8);
height: calc(var(--custom-text-input-height) - 8px);
padding-inline-start: var(--space-8);
}
.mana-text-inputs ._0f0849b61557225e-input {
--custom-input-padding: var(--space-12);
}
.ec77f26815e2ac33-option {
align-items: center;
cursor: pointer;
display: grid;
flex-shrink: 1;
gap: var(--space-4);
grid-template-columns: auto 1fr auto;
grid-template-rows: 1fr;
}
.ec77f26815e2ac33-leading {
box-sizing: border-box;
height: 32px;
padding: var(--space-4);
width: 32px;
-webkit-margin-start: calc(var(--space-8) * -1);
margin-inline-start: calc(var(--space-8) * -1);
}
.ec77f26815e2ac33-leading,
.ec77f26815e2ac33-trailing {
align-items: center;
display: flex;
justify-content: center;
}
.ec77f26815e2ac33-avatarAccessory,
.ec77f26815e2ac33-imageAccessory {
height: 24px;
object-fit: contain;
width: 24px;
}
.ec77f26815e2ac33-avatarAccessory {
background-color: #000;
border-radius: var(--radius-round);
object-fit: cover;
overflow: hidden;
}
.ec77f26815e2ac33-iconAccessory {
align-items: center;
box-sizing: border-box;
color: var(--icon-subtle);
display: flex;
height: 32px;
justify-content: center;
padding: var(--space-4);
width: 32px;
}
._5fa2fb5c4d963128-selectFieldContainer {
align-self: flex-start;
max-width: 100%;
}
._5fa2fb5c4d963128-selectFieldContainer._5fa2fb5c4d963128-fullWidth {
align-self: unset;
}
._5fa2fb5c4d963128-selectField {
align-items: stretch;
display: grid;
gap: 0;
grid-template-columns: 1fr auto auto;
grid-template-rows: 1fr;
width: 100%;
}
._5fa2fb5c4d963128-selectField:not(._5fa2fb5c4d963128-isInert)._5fa2fb5c4d963128-isFocused,
._5fa2fb5c4d963128-selectField:not(._5fa2fb5c4d963128-isInert):focus-within {
outline: 2px solid var(--custom-input-focus-border-color);
outline-offset: -2px;
}
._5fa2fb5c4d963128-selectField[data-read-only="true"],
._5fa2fb5c4d963128-selectField[data-read-only="true"] * {
cursor: default !important;
}
._5fa2fb5c4d963128-selectField[data-disabled="true"],
._5fa2fb5c4d963128-selectField[data-disabled="true"] * {
cursor: not-allowed !important;
}
._5fa2fb5c4d963128-selectButton,
._5fa2fb5c4d963128-selectFieldContent {
overflow: hidden;
}
._5fa2fb5c4d963128-selectButton {
background-color: transparent;
box-sizing: border-box;
text-align: start;
-webkit-padding-start: var(--space-4);
align-items: center;
display: flex;
gap: 4px;
max-width: 100%;
min-height: calc(var(--select-option-height) - 2px);
padding-inline-start: var(--space-4);
width: 100%;
}
._5fa2fb5c4d963128-selectButton._5fa2fb5c4d963128-wrapTags {
flex-wrap: wrap;
}
._5fa2fb5c4d963128-selectButton._5fa2fb5c4d963128-multiSelect {
padding: 4px;
}
._5fa2fb5c4d963128-multipleValues,
._5fa2fb5c4d963128-placeholder {
align-items: center;
box-sizing: border-box;
display: inline-flex;
justify-content: flex-start;
max-width: 100%;
padding-block: var(--space-xxs) var(--space-xxs);
padding-inline: var(--space-8) var(--space-4);
}
._5fa2fb5c4d963128-placeholder {
color: var(--input-placeholder-text-default);
}
._5fa2fb5c4d963128-multipleValues {
color: var(--text-strong);
}
._5fa2fb5c4d963128-singleSelectOption {
-webkit-padding-start: var(--space-4);
flex-grow: 1;
padding-inline-start: var(--space-4);
}
._5fa2fb5c4d963128-comboBoxInputScroller:not(._5fa2fb5c4d963128-wrapTags) {
overflow: auto hidden;
scrollbar-width: none;
}
._5fa2fb5c4d963128-comboBoxInputScroller:not(._5fa2fb5c4d963128-wrapTags)::-webkit-scrollbar {
display: none;
}
._5fa2fb5c4d963128-comboBoxInputContainer {
align-items: center;
display: flex;
gap: var(--space-4);
justify-content: flex-start;
}
._5fa2fb5c4d963128-hasTags ._5fa2fb5c4d963128-comboBoxInputContainer {
padding: var(--space-4);
}
._5fa2fb5c4d963128-wrapTags ._5fa2fb5c4d963128-comboBoxInputContainer {
flex-wrap: wrap;
}
._5fa2fb5c4d963128-comboBoxInput {
max-height: 1lh;
min-height: calc(var(--select-option-height) - 2px);
min-width: min(12ch, 80%);
padding-inline: var(--space-12) var(--space-8);
}
._5fa2fb5c4d963128-comboBoxInputScroller._5fa2fb5c4d963128-hasTags ._5fa2fb5c4d963128-comboBoxInput {
margin: calc(var(--space-4) * -1) 0;
-webkit-padding-start: var(--space-8);
padding-inline-start: var(--space-8);
}
._5fa2fb5c4d963128-chevronButton {
background-color: transparent;
line-height: 0;
}
._5fa2fb5c4d963128-chevronButton,
._5fa2fb5c4d963128-loadingSpinner {
align-items: center;
color: var(--icon-strong);
display: flex;
height: 100%;
justify-content: center;
padding-block: 0;
padding-inline: 0 var(--space-4);
width: 36px;
}
._5fa2fb5c4d963128-isInert ._5fa2fb5c4d963128-chevronButton,
._5fa2fb5c4d963128-isInert ._5fa2fb5c4d963128-loadingSpinner {
cursor: not-allowed;
}
._5fa2fb5c4d963128-chevronIcon {
display: block;
height: 20px;
transform: rotateX(0deg);
width: 20px;
}
._5fa2fb5c4d963128-chevronIcon._5fa2fb5c4d963128-isOpen {
transform: rotateX(180deg);
}
.full-motion ._5fa2fb5c4d963128-chevronIcon {
transition: transform 0.2s ease-out;
}
._5fa2fb5c4d963128-clearButton {
background-color: transparent;
color: var(--icon-subtle);
line-height: 0;
padding: 0 var(--space-4);
transition: color 0.2s ease-out;
}
._5fa2fb5c4d963128-clearButton:focus,
._5fa2fb5c4d963128-clearButton:hover {
color: var(--icon-strong);
}
._5fa2fb5c4d963128-isInert ._5fa2fb5c4d963128-clearButton {
cursor: not-allowed;
}
._5fa2fb5c4d963128-clearButton:last-child {
padding-block: 0;
padding-inline: 0 var(--space-4);
width: 36px;
}
._5fa2fb5c4d963128-hiddenVisually {
clip: rect(0 0 0 0);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
white-space: nowrap;
width: 1px;
}
._5fa2fb5c4d963128-selectDropdown {
background-color: var(--background-surface-higher);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
box-shadow: 0 2px 8px 0 var(--opacity-black-16);
box-sizing: border-box;
z-index: 10;
}
.a16aea1526925c2c-select {
align-items: center;
box-sizing: border-box;
cursor: pointer;
display: grid;
gap: 8px;
grid-template-columns: 1fr auto;
padding-block: 8px;
padding-inline: 12px 8px;
}
.a16aea1526925c2c-select,
.a16aea1526925c2c-wrapper {
color: var(--text-default);
font-weight: var(--font-weight-medium);
}
.a16aea1526925c2c-searchable {
padding-bottom: 8px;
padding-top: 8px;
}
.a16aea1526925c2c-searchInput {
background: inherit;
border: none;
color: inherit;
cursor: pointer;
font-size: 16px;
padding: 0;
width: 100%;
}
.a16aea1526925c2c-searchInput::-moz-placeholder {
color: var(--input-placeholder-text-default);
}
.a16aea1526925c2c-searchInput::placeholder {
color: var(--input-placeholder-text-default);
}
.a16aea1526925c2c-searchInput.a16aea1526925c2c-multi {
height: 32px;
width: auto;
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
.a16aea1526925c2c-editing {
font-weight: var(--font-weight-normal);
}
.a16aea1526925c2c-label {
bottom: 0;
height: 16px;
inset-inline-start: 12px;
margin: auto;
position: absolute;
top: 0;
}
.a16aea1526925c2c-optionDisabled {
opacity: 0.5;
}
.a16aea1526925c2c-searchInput.a16aea1526925c2c-multi.a16aea1526925c2c-hidden {
opacity: 0;
width: 0;
}
.a16aea1526925c2c-iconsCenter {
align-items: center;
display: flex;
height: 100%;
}
.a16aea1526925c2c-placeholder,
.a16aea1526925c2c-value {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.a16aea1526925c2c-placeholder {
color: var(--text-subtle);
}
.a16aea1526925c2c-measurement {
border: 1px solid transparent;
pointer-events: none;
position: absolute;
visibility: hidden;
}
.a16aea1526925c2c-measurement,
.a16aea1526925c2c-popout {
box-sizing: border-box;
}
.a16aea1526925c2c-popout {
background: var(--background-base-lower);
background-color: var(--background-surface-higher);
border: 1px solid var(--background-base-lowest);
border-color: var(--border-subtle);
border-radius: 0 0 4px 4px;
margin: 0;
}
.a16aea1526925c2c-popout:not(.a16aea1526925c2c-popoutPositionTop) {
margin-top: 8px;
}
.a16aea1526925c2c-popout.a16aea1526925c2c-popoutPositionTop {
border-radius: 4px 4px 0 0;
margin-bottom: 8px;
}
.a16aea1526925c2c-lookFilled.a16aea1526925c2c-popout {
border-radius: 0 0 3px 3px;
}
.a16aea1526925c2c-lookFilled.a16aea1526925c2c-popout.a16aea1526925c2c-popoutPositionTop {
border-radius: 3px 3px 0 0;
}
.a16aea1526925c2c-lookFilled.a16aea1526925c2c-option,
.a16aea1526925c2c-lookFilled.a16aea1526925c2c-select:hover.a16aea1526925c2c-option {
border-color: var(--brand-500);
border-bottom-color: var(--background-base-lowest);
}
.a16aea1526925c2c-option {
align-items: center;
box-sizing: border-box;
color: var(--text-subtle);
cursor: pointer;
display: grid;
font-size: 16px;
font-weight: 400;
grid-template-columns: 1fr auto;
line-height: 20px;
padding: 12px;
}
.a16aea1526925c2c-option[aria-selected="true"] {
color: var(--text-default);
font-weight: var(--font-weight-medium);
}
.a16aea1526925c2c-option:hover,
.a16aea1526925c2c-option[aria-selected="true"]:hover {
background-color: var(--background-mod-subtle);
}
.a16aea1526925c2c-option:hover {
color: var(--text-default);
}
.a16aea1526925c2c-option.a16aea1526925c2c-focused,
.a16aea1526925c2c-option:focus-visible,
.a16aea1526925c2c-option:hover {
background-color: var(--interactive-background-hover);
color: var(--interactive-text-hover);
}
.a16aea1526925c2c-option[aria-selected="true"]:not(.a16aea1526925c2c-option.a16aea1526925c2c-multi) {
background-color: var(--interactive-background-selected);
color: var(--interactive-text-active);
}
.a16aea1526925c2c-selectedIcon {
color: var(--brand-500);
}
.a16aea1526925c2c-icons {
gap: 4px;
}
.a16aea1526925c2c-icons,
.a16aea1526925c2c-value {
align-items: center;
display: flex;
}
.a16aea1526925c2c-value {
gap: 8px;
}
.a16aea1526925c2c-clear {
display: block;
}
.a16aea1526925c2c-clear,
.a16aea1526925c2c-dropdownIcon {
cursor: pointer;
pointer-events: all;
}
.a16aea1526925c2c-noResults {
align-items: center;
background: var(--background-base-lower);
padding: 12px;
width: 100%;
}
.a16aea1526925c2c-loading,
.a16aea1526925c2c-noResults {
display: flex;
justify-content: center;
}
.a16aea1526925c2c-loading {
height: 40px;
}
.a16aea1526925c2c-loadingSpinner {
background-color: var(--interactive-text-active);
}
.a16aea1526925c2c-wrapper {
display: grid;
grid-template-columns: 1fr auto;
}
.a16aea1526925c2c-wrapper .a16aea1526925c2c-select {
grid-column: 1 / span 2;
grid-row: 1;
-webkit-padding-end: calc(24px + var(--icons-width));
padding-inline-end: calc(24px + var(--icons-width));
}
.a16aea1526925c2c-wrapper .a16aea1526925c2c-select.a16aea1526925c2c-multi {
padding-top: 0;
-webkit-padding-start: 6px;
padding-bottom: 6px;
padding-inline-start: 6px;
}
.a16aea1526925c2c-wrapper .a16aea1526925c2c-icons {
grid-column: 2;
grid-row: 1;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
pointer-events: none;
}
.a16aea1526925c2c-wrapper .a16aea1526925c2c-value {
display: flex;
}
.a16aea1526925c2c-wrapper .a16aea1526925c2c-value.a16aea1526925c2c-multi {
display: block;
white-space: normal;
}
.a16aea1526925c2c-wrapper .a16aea1526925c2c-searchInput {
flex: 1 0 0;
}
.a16aea1526925c2c-searchableSelect .a16aea1526925c2c-option {
align-content: center;
display: grid;
grid-template-areas: "prefix content suffix selectedIcon";
grid-template-columns: auto 1fr auto auto;
}
.a16aea1526925c2c-searchableSelect .a16aea1526925c2c-prefix {
grid-area: prefix;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
.a16aea1526925c2c-searchableSelect .a16aea1526925c2c-suffix {
grid-area: suffix;
-webkit-margin-start: 8px;
margin-inline-start: 8px;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
.a16aea1526925c2c-searchableSelect .a16aea1526925c2c-content {
display: flex;
grid-area: content;
min-width: 0;
}
.a16aea1526925c2c-searchableSelect .a16aea1526925c2c-selectedIcon {
grid-area: selectedIcon;
}
.a16aea1526925c2c-optionPillWrapper {
min-width: auto;
padding: 0;
width: auto;
}
.a16aea1526925c2c-optionPillContainer {
display: inline;
}
.a16aea1526925c2c-optionPillItem {
align-items: center;
display: inline-flex;
-webkit-margin-end: 6px;
margin-inline-end: 6px;
}
.a16aea1526925c2c-optionPillItem button {
background-color: var(--background-surface-higher);
}
.a16aea1526925c2c-optionPillItem button .a16aea1526925c2c-optionPill {
border: 1px solid var(--border-muted);
border-radius: var(--radius-xs);
}
.a16aea1526925c2c-optionPill {
align-items: center;
background: var(--background-base-low);
border-radius: 2px;
color: var(--interactive-text-active);
display: inline-flex;
font-size: 14px;
line-height: 20px;
padding: var(--space-4) var(--space-8);
}
.a16aea1526925c2c-optionPill .a16aea1526925c2c-deleteOptionIcon {
height: 16px;
width: 16px;
}
.a16aea1526925c2c-optionPillBtn {
height: auto;
min-height: auto;
min-width: 0;
padding: 0;
}
.a16aea1526925c2c-deleteOptionIcon {
color: var(--interactive-text-default);
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
.a16aea1526925c2c-optionPillItem,
.a16aea1526925c2c-searchInput.a16aea1526925c2c-multi {
margin-top: var(--space-4);
}
.no-webkit-scrollbar .a16aea1526925c2c-noScrollbar {
scrollbar-width: none;
}
.a16aea1526925c2c-noScrollbar::-webkit-scrollbar {
height: 0;
width: 0;
}
.a16aea1526925c2c-multiSelectCheckbox {
align-items: center;
border-radius: 6px;
box-sizing: border-box;
display: flex;
grid-area: selectedIcon;
height: 20px;
width: 20px;
}
.a16aea1526925c2c-multiSelectCheckbox.a16aea1526925c2c-unchecked {
border: 1px solid var(--border-strong);
}
.a16aea1526925c2c-multiSelectCheckbox.a16aea1526925c2c-checked {
background: var(--brand-500);
border: 1px solid var(--brand-500);
}
.a16aea1526925c2c-multiSelectCheck {
color: var(--white);
}
.a16aea1526925c2c-optionPill {
align-content: center;
display: grid;
grid-template-areas: "prefix content suffix clearIcon";
grid-template-columns: auto 1fr auto auto;
}
.a16aea1526925c2c-optionPill .a16aea1526925c2c-prefix {
grid-area: prefix;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
.a16aea1526925c2c-optionPill .a16aea1526925c2c-suffix {
grid-area: suffix;
-webkit-margin-start: 8px;
margin-inline-start: 8px;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
.a16aea1526925c2c-optionPill .a16aea1526925c2c-content {
grid-area: content;
}
.a16aea1526925c2c-optionPill .a16aea1526925c2c-deleteOptionIcon {
grid-area: clearIcon;
}
.enable-forced-colors .a16aea1526925c2c-select {
background-color: Canvas;
border-color: ButtonText;
}
.enable-forced-colors .a16aea1526925c2c-disabled,
.enable-forced-colors .a16aea1526925c2c-disabled * {
border-color: GrayText;
color: GrayText;
opacity: 1;
}
.enable-forced-colors .a16aea1526925c2c-placeholder {
color: GrayText;
}
.enable-forced-colors .a16aea1526925c2c-option {
background-color: Canvas;
border: 1px solid Canvas;
color: CanvasText;
forced-color-adjust: none;
}
.enable-forced-colors .a16aea1526925c2c-option.a16aea1526925c2c-focused,
.enable-forced-colors .a16aea1526925c2c-option:focus,
.enable-forced-colors .a16aea1526925c2c-option:hover {
background-color: ButtonFace;
border-color: ButtonText;
color: ButtonText;
}
.enable-forced-colors .a16aea1526925c2c-option[aria-selected="true"] {
background-color: HighlightText !important;
color: Highlight !important;
}
.enable-forced-colors .a16aea1526925c2c-option[aria-selected="true"].a16aea1526925c2c-focused,
.enable-forced-colors .a16aea1526925c2c-option[aria-selected="true"]:focus,
.enable-forced-colors .a16aea1526925c2c-option[aria-selected="true"]:hover {
border-color: Highlight !important;
}
.enable-forced-colors .a16aea1526925c2c-selectedIcon {
color: Highlight;
}
.a16aea1526925c2c-select,
.a16aea1526925c2c-wrapper {
min-height: var(--control-input-height-md);
}
.a16aea1526925c2c-iconsContainer {
height: calc(var(--control-input-height-sm) - 2px);
}
.a16aea1526925c2c-container[data-size="sm"] .a16aea1526925c2c-select,
.a16aea1526925c2c-container[data-size="sm"] .a16aea1526925c2c-wrapper {
min-height: var(--control-input-height-sm);
}
.a16aea1526925c2c-container[data-size="sm"] .a16aea1526925c2c-iconsContainer {
height: calc(var(--control-input-height-sm) - 2px);
}
.a16aea1526925c2c-container[data-variant="text-only"] .a16aea1526925c2c-select {
background: none;
border: none;
}
.a16aea1526925c2c-searchable {
min-height: auto;
}
.a16aea1526925c2c-lookFilled.a16aea1526925c2c-popout,
.a16aea1526925c2c-lookFilled.a16aea1526925c2c-popout.a16aea1526925c2c-popoutPositionTop,
.a16aea1526925c2c-popout,
.a16aea1526925c2c-popout.a16aea1526925c2c-popoutPositionTop {
background-color: var(--background-surface-higher);
border: 1px solid var(--border-subtle);
border-radius: 8px;
}
.a16aea1526925c2c-newOptionLabel {
align-items: center;
display: grid;
gap: 4px;
grid-template-columns: auto 1fr auto;
}
.a16aea1526925c2c-newOptionLeading {
height: 24px;
object-fit: contain;
width: 24px;
}
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow,
.react-datepicker__navigation-icon:before,
.react-datepicker__year-read-view--down-arrow {
border-color: #ccc;
border-style: solid;
border-width: 3px 3px 0 0;
content: "";
display: block;
height: 9px;
position: absolute;
top: 6px;
width: 9px;
}
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle,
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle {
margin-left: -4px;
position: absolute;
width: 0;
}
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle:after,
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle:before,
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle:after,
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle:before {
border: 8px solid transparent;
box-sizing: content-box;
content: "";
height: 0;
left: -8px;
position: absolute;
width: 1px;
z-index: -1;
}
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle:before,
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle:before {
border-bottom-color: #aeaeae;
}
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
margin-top: -8px;
top: 0;
}
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle:after,
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle:before {
border-bottom-color: #f0f0f0;
border-top: none;
}
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle:after {
top: 0;
}
.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle:before {
border-bottom-color: #aeaeae;
top: -1px;
}
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle {
bottom: 0;
margin-bottom: -8px;
}
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle:after,
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle:before {
border-bottom: none;
border-top-color: #fff;
}
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle:after {
bottom: 0;
}
.react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle:before {
border-top-color: #aeaeae;
bottom: -1px;
}
.react-datepicker-wrapper {
border: 0;
display: inline-block;
padding: 0;
}
.react-datepicker {
background-color: #fff;
border: 1px solid #aeaeae;
border-radius: 0.3rem;
color: #000;
display: inline-block;
font-family:
Helvetica Neue,
helvetica,
arial,
sans-serif;
font-size: 0.8rem;
position: relative;
}
.react-datepicker--time-only .react-datepicker__triangle {
left: 35px;
}
.react-datepicker--time-only .react-datepicker__time-container {
border-left: 0;
}
.react-datepicker--time-only .react-datepicker__time,
.react-datepicker--time-only .react-datepicker__time-box {
border-bottom-left-radius: 0.3rem;
border-bottom-right-radius: 0.3rem;
}
.react-datepicker__triangle {
left: 50px;
position: absolute;
}
.react-datepicker-popper {
z-index: 1;
}
.react-datepicker-popper[data-placement^="bottom"] {
padding-top: 10px;
}
.react-datepicker-popper[data-placement="bottom-end"] .react-datepicker__triangle,
.react-datepicker-popper[data-placement="top-end"] .react-datepicker__triangle {
left: auto;
right: 50px;
}
.react-datepicker-popper[data-placement^="top"] {
padding-bottom: 10px;
}
.react-datepicker-popper[data-placement^="right"] {
padding-left: 8px;
}
.react-datepicker-popper[data-placement^="right"] .react-datepicker__triangle {
left: auto;
right: 42px;
}
.react-datepicker-popper[data-placement^="left"] {
padding-right: 8px;
}
.react-datepicker-popper[data-placement^="left"] .react-datepicker__triangle {
left: 42px;
right: auto;
}
.react-datepicker__header {
background-color: #f0f0f0;
border-bottom: 1px solid #aeaeae;
border-top-left-radius: 0.3rem;
padding: 8px 0;
position: relative;
text-align: center;
}
.react-datepicker__header--time {
padding-bottom: 8px;
padding-left: 5px;
padding-right: 5px;
}
.react-datepicker__header--time:not(.react-datepicker__header--time--only) {
border-top-left-radius: 0;
}
.react-datepicker__header:not(.react-datepicker__header--has-time-select) {
border-top-right-radius: 0.3rem;
}
.react-datepicker__month-dropdown-container--scroll,
.react-datepicker__month-dropdown-container--select,
.react-datepicker__month-year-dropdown-container--scroll,
.react-datepicker__month-year-dropdown-container--select,
.react-datepicker__year-dropdown-container--scroll,
.react-datepicker__year-dropdown-container--select {
display: inline-block;
margin: 0 2px;
}
.react-datepicker-time__header,
.react-datepicker-year-header,
.react-datepicker__current-month {
color: #000;
font-size: 0.944rem;
font-weight: 700;
margin-top: 0;
}
.react-datepicker-time__header {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.react-datepicker__navigation {
align-items: center;
background: none;
border: none;
cursor: pointer;
display: flex;
height: 32px;
justify-content: center;
overflow: hidden;
padding: 0;
position: absolute;
text-align: center;
text-indent: -999em;
top: 2px;
width: 32px;
z-index: 1;
}
.react-datepicker__navigation--previous {
left: 2px;
}
.react-datepicker__navigation--next {
right: 2px;
}
.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
right: 85px;
}
.react-datepicker__navigation--years {
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
top: 0;
}
.react-datepicker__navigation--years-previous {
top: 4px;
}
.react-datepicker__navigation--years-upcoming {
top: -4px;
}
.react-datepicker__navigation:hover :before {
border-color: #a6a6a6;
}
.react-datepicker__navigation-icon {
font-size: 20px;
position: relative;
top: -1px;
}
.react-datepicker__navigation-icon--next {
left: -2px;
}
.react-datepicker__navigation-icon--next:before {
left: -7px;
transform: rotate(45deg);
}
.react-datepicker__navigation-icon--previous {
right: -2px;
}
.react-datepicker__navigation-icon--previous:before {
right: -7px;
transform: rotate(225deg);
}
.react-datepicker__month-container {
float: left;
}
.react-datepicker__year {
margin: 0.4rem;
text-align: center;
}
.react-datepicker__year-wrapper {
display: flex;
flex-wrap: wrap;
max-width: 180px;
}
.react-datepicker__year .react-datepicker__year-text {
display: inline-block;
margin: 2px;
width: 4rem;
}
.react-datepicker__month {
margin: 0.4rem;
text-align: center;
}
.react-datepicker__month .react-datepicker__month-text,
.react-datepicker__month .react-datepicker__quarter-text {
display: inline-block;
margin: 2px;
width: 4rem;
}
.react-datepicker__input-time-container {
clear: both;
float: left;
margin: 5px 0 10px 15px;
text-align: left;
width: 100%;
}
.react-datepicker__input-time-container .react-datepicker-time__caption,
.react-datepicker__input-time-container .react-datepicker-time__input-container {
display: inline-block;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
display: inline-block;
margin-left: 10px;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
width: auto;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-inner-spin-button,
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type="time"] {
-moz-appearance: textfield;
}
.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
display: inline-block;
margin-left: 5px;
}
.react-datepicker__time-container {
border-left: 1px solid #aeaeae;
float: right;
width: 85px;
}
.react-datepicker__time-container--with-today-button {
border: 1px solid #aeaeae;
border-radius: 0.3rem;
display: inline;
position: absolute;
right: -72px;
top: 0;
}
.react-datepicker__time-container .react-datepicker__time {
background: #fff;
border-bottom-right-radius: 0.3rem;
position: relative;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
border-bottom-right-radius: 0.3rem;
margin: 0 auto;
overflow-x: hidden;
text-align: center;
width: 85px;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
box-sizing: content-box;
height: calc(195px + 0.85rem);
list-style: none;
margin: 0;
overflow-y: scroll;
padding-left: 0;
padding-right: 0;
width: 100%;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
height: 30px;
padding: 5px 10px;
white-space: nowrap;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
background-color: #f0f0f0;
cursor: pointer;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
background-color: #216ba5;
color: #fff;
font-weight: 700;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
background-color: #216ba5;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
color: #ccc;
}
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
background-color: transparent;
cursor: default;
}
.react-datepicker__week-number {
color: #ccc;
display: inline-block;
line-height: 1.7rem;
margin: 0.166rem;
text-align: center;
width: 1.7rem;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable {
cursor: pointer;
}
.react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
background-color: #f0f0f0;
border-radius: 0.3rem;
}
.react-datepicker__day-names,
.react-datepicker__week {
white-space: nowrap;
}
.react-datepicker__day-names {
margin-bottom: -8px;
}
.react-datepicker__day,
.react-datepicker__day-name,
.react-datepicker__time-name {
color: #000;
display: inline-block;
line-height: 1.7rem;
margin: 0.166rem;
text-align: center;
width: 1.7rem;
}
.react-datepicker__month--in-range,
.react-datepicker__month--in-selecting-range,
.react-datepicker__month--selected,
.react-datepicker__quarter--in-range,
.react-datepicker__quarter--in-selecting-range,
.react-datepicker__quarter--selected {
background-color: #216ba5;
border-radius: 0.3rem;
color: #fff;
}
.react-datepicker__month--in-range:hover,
.react-datepicker__month--in-selecting-range:hover,
.react-datepicker__month--selected:hover,
.react-datepicker__quarter--in-range:hover,
.react-datepicker__quarter--in-selecting-range:hover,
.react-datepicker__quarter--selected:hover {
background-color: #1d5d90;
}
.react-datepicker__month--disabled,
.react-datepicker__quarter--disabled {
color: #ccc;
pointer-events: none;
}
.react-datepicker__month--disabled:hover,
.react-datepicker__quarter--disabled:hover {
background-color: transparent;
cursor: default;
}
.react-datepicker__day,
.react-datepicker__month-text,
.react-datepicker__quarter-text,
.react-datepicker__year-text {
cursor: pointer;
}
.react-datepicker__day:hover,
.react-datepicker__month-text:hover,
.react-datepicker__quarter-text:hover,
.react-datepicker__year-text:hover {
background-color: #f0f0f0;
border-radius: 0.3rem;
}
.react-datepicker__day--today,
.react-datepicker__month-text--today,
.react-datepicker__quarter-text--today,
.react-datepicker__year-text--today {
font-weight: 700;
}
.react-datepicker__day--highlighted,
.react-datepicker__month-text--highlighted,
.react-datepicker__quarter-text--highlighted,
.react-datepicker__year-text--highlighted {
background-color: #3dcc4a;
border-radius: 0.3rem;
color: #fff;
}
.react-datepicker__day--highlighted:hover,
.react-datepicker__month-text--highlighted:hover,
.react-datepicker__quarter-text--highlighted:hover,
.react-datepicker__year-text--highlighted:hover {
background-color: #32be3f;
}
.react-datepicker__day--highlighted-custom-1,
.react-datepicker__month-text--highlighted-custom-1,
.react-datepicker__quarter-text--highlighted-custom-1,
.react-datepicker__year-text--highlighted-custom-1 {
color: #f0f;
}
.react-datepicker__day--highlighted-custom-2,
.react-datepicker__month-text--highlighted-custom-2,
.react-datepicker__quarter-text--highlighted-custom-2,
.react-datepicker__year-text--highlighted-custom-2 {
color: green;
}
.react-datepicker__day--in-range,
.react-datepicker__day--in-selecting-range,
.react-datepicker__day--selected,
.react-datepicker__month-text--in-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__month-text--selected,
.react-datepicker__quarter-text--in-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__quarter-text--selected,
.react-datepicker__year-text--in-range,
.react-datepicker__year-text--in-selecting-range,
.react-datepicker__year-text--selected {
background-color: #216ba5;
border-radius: 0.3rem;
color: #fff;
}
.react-datepicker__day--in-range:hover,
.react-datepicker__day--in-selecting-range:hover,
.react-datepicker__day--selected:hover,
.react-datepicker__month-text--in-range:hover,
.react-datepicker__month-text--in-selecting-range:hover,
.react-datepicker__month-text--selected:hover,
.react-datepicker__quarter-text--in-range:hover,
.react-datepicker__quarter-text--in-selecting-range:hover,
.react-datepicker__quarter-text--selected:hover,
.react-datepicker__year-text--in-range:hover,
.react-datepicker__year-text--in-selecting-range:hover,
.react-datepicker__year-text--selected:hover {
background-color: #1d5d90;
}
.react-datepicker__day--keyboard-selected,
.react-datepicker__month-text--keyboard-selected,
.react-datepicker__quarter-text--keyboard-selected,
.react-datepicker__year-text--keyboard-selected {
background-color: #2a87d0;
border-radius: 0.3rem;
color: #fff;
}
.react-datepicker__day--keyboard-selected:hover,
.react-datepicker__month-text--keyboard-selected:hover,
.react-datepicker__quarter-text--keyboard-selected:hover,
.react-datepicker__year-text--keyboard-selected:hover {
background-color: #1d5d90;
}
.react-datepicker__day--in-selecting-range,
.react-datepicker__month-text--in-selecting-range,
.react-datepicker__quarter-text--in-selecting-range,
.react-datepicker__year-text--in-selecting-range {
background-color: rgba(33, 107, 165, 0.5);
}
.react-datepicker__month--selecting-range .react-datepicker__day--in-range,
.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range,
.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range,
.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range {
background-color: #f0f0f0;
color: #000;
}
.react-datepicker__day--disabled,
.react-datepicker__month-text--disabled,
.react-datepicker__quarter-text--disabled,
.react-datepicker__year-text--disabled {
color: #ccc;
cursor: default;
}
.react-datepicker__day--disabled:hover,
.react-datepicker__month-text--disabled:hover,
.react-datepicker__quarter-text--disabled:hover,
.react-datepicker__year-text--disabled:hover {
background-color: transparent;
}
.react-datepicker__month-text.react-datepicker__month--in-range:hover,
.react-datepicker__month-text.react-datepicker__month--selected:hover,
.react-datepicker__month-text.react-datepicker__quarter--in-range:hover,
.react-datepicker__month-text.react-datepicker__quarter--selected:hover,
.react-datepicker__quarter-text.react-datepicker__month--in-range:hover,
.react-datepicker__quarter-text.react-datepicker__month--selected:hover,
.react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover,
.react-datepicker__quarter-text.react-datepicker__quarter--selected:hover {
background-color: #216ba5;
}
.react-datepicker__month-text:hover,
.react-datepicker__quarter-text:hover {
background-color: #f0f0f0;
}
.react-datepicker__input-container {
display: inline-block;
position: relative;
width: 100%;
}
.react-datepicker__month-read-view,
.react-datepicker__month-year-read-view,
.react-datepicker__year-read-view {
border: 1px solid transparent;
border-radius: 0.3rem;
position: relative;
}
.react-datepicker__month-read-view:hover,
.react-datepicker__month-year-read-view:hover,
.react-datepicker__year-read-view:hover {
cursor: pointer;
}
.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow {
border-top-color: #b3b3b3;
}
.react-datepicker__month-read-view--down-arrow,
.react-datepicker__month-year-read-view--down-arrow,
.react-datepicker__year-read-view--down-arrow {
right: -16px;
top: 0;
transform: rotate(135deg);
}
.react-datepicker__month-dropdown,
.react-datepicker__month-year-dropdown,
.react-datepicker__year-dropdown {
background-color: #f0f0f0;
border: 1px solid #aeaeae;
border-radius: 0.3rem;
left: 25%;
position: absolute;
text-align: center;
top: 30px;
width: 50%;
z-index: 1;
}
.react-datepicker__month-dropdown:hover,
.react-datepicker__month-year-dropdown:hover,
.react-datepicker__year-dropdown:hover {
cursor: pointer;
}
.react-datepicker__month-dropdown--scrollable,
.react-datepicker__month-year-dropdown--scrollable,
.react-datepicker__year-dropdown--scrollable {
height: 150px;
overflow-y: scroll;
}
.react-datepicker__month-option,
.react-datepicker__month-year-option,
.react-datepicker__year-option {
display: block;
line-height: 20px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.react-datepicker__month-option:first-of-type,
.react-datepicker__month-year-option:first-of-type,
.react-datepicker__year-option:first-of-type {
border-top-left-radius: 0.3rem;
border-top-right-radius: 0.3rem;
}
.react-datepicker__month-option:last-of-type,
.react-datepicker__month-year-option:last-of-type,
.react-datepicker__year-option:last-of-type {
border-bottom-left-radius: 0.3rem;
border-bottom-right-radius: 0.3rem;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.react-datepicker__month-option:hover,
.react-datepicker__month-year-option:hover,
.react-datepicker__year-option:hover {
background-color: #ccc;
}
.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming,
.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming {
border-bottom-color: #b3b3b3;
}
.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous,
.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous {
border-top-color: #b3b3b3;
}
.react-datepicker__month-option--selected,
.react-datepicker__month-year-option--selected,
.react-datepicker__year-option--selected {
left: 15px;
position: absolute;
}
.react-datepicker__close-icon {
background-color: transparent;
border: 0;
cursor: pointer;
display: table-cell;
height: 100%;
outline: 0;
padding: 0 6px 0 0;
position: absolute;
right: 0;
top: 0;
vertical-align: middle;
}
.react-datepicker__close-icon:after {
background-color: #216ba5;
border-radius: 50%;
color: #fff;
content: "\00d7";
cursor: pointer;
display: table-cell;
font-size: 12px;
height: 16px;
line-height: 1;
padding: 2px;
text-align: center;
vertical-align: middle;
width: 16px;
}
.react-datepicker__today-button {
background: #f0f0f0;
border-top: 1px solid #aeaeae;
clear: left;
cursor: pointer;
font-weight: 700;
padding: 5px 0;
text-align: center;
}
.react-datepicker__portal {
align-items: center;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
height: 100vh;
justify-content: center;
left: 0;
position: fixed;
top: 0;
width: 100vw;
z-index: 2147483647;
}
.react-datepicker__portal .react-datepicker__day,
.react-datepicker__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__time-name {
line-height: 3rem;
width: 3rem;
}
@media (max-height: 550px), (max-width: 400px) {
.react-datepicker__portal .react-datepicker__day,
.react-datepicker__portal .react-datepicker__day-name,
.react-datepicker__portal .react-datepicker__time-name {
line-height: 2rem;
width: 2rem;
}
}
.react-datepicker__portal .react-datepicker-time__header,
.react-datepicker__portal .react-datepicker__current-month {
font-size: 1.44rem;
}
.d27f17593b8064c5-calendarPicker .react-datepicker {
background-color: var(--background-secondary-alt);
border: none;
font-family: var(--font-primary);
padding: 20px;
}
.d27f17593b8064c5-calendarPicker .react-datepicker__header {
background-color: var(--background-secondary-alt);
border-bottom: 0;
padding-top: 0;
}
.d27f17593b8064c5-calendarPicker .react-datepicker__current-month {
border-bottom: 1px solid;
color: var(--text-strong);
font-size: 13px;
font-weight: var(--font-weight-semibold);
line-height: 20px;
margin: 0 0 10px;
padding: 0 0 20px;
text-transform: uppercase;
}
.d27f17593b8064c5-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--next,
.d27f17593b8064c5-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--previous {
background-position: 50%;
background-repeat: no-repeat;
background-size: 6px 12px;
border: 1px solid;
border-radius: 2px;
height: 18px;
inset-inline-start: 20px;
top: 20px;
transform: rotate(180deg);
width: 18px;
}
.d27f17593b8064c5-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--next.react-datepicker__navigation--next,
.d27f17593b8064c5-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--previous.react-datepicker__navigation--next {
inset-inline-end: 20px;
inset-inline-start: auto;
transform: rotate(0deg);
}
.d27f17593b8064c5-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--next:focus-visible,
.d27f17593b8064c5-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--previous:focus-visible {
box-shadow: 0 0 0 4px var(--blue-345);
}
.d27f17593b8064c5-calendarPicker .react-datepicker__navigation-icon:before {
border-width: 0;
}
.d27f17593b8064c5-calendarPicker .react-datepicker__month {
margin: 0;
}
.d27f17593b8064c5-calendarPicker .react-datepicker__week:first-of-type > .react-datepicker__day:first-of-type {
border-radius: 3px 0 0;
}
.d27f17593b8064c5-calendarPicker .react-datepicker__week:first-of-type > .react-datepicker__day:last-of-type {
border-radius: 0 3px 0 0;
}
.d27f17593b8064c5-calendarPicker .react-datepicker__week:last-of-type > .react-datepicker__day {
border-bottom: 1px solid var(--primary-200);
}
.d27f17593b8064c5-calendarPicker .react-datepicker__week:last-of-type > .react-datepicker__day:first-of-type {
border-radius: 0 0 0 3px;
}
.d27f17593b8064c5-calendarPicker .react-datepicker__week:last-of-type > .react-datepicker__day:last-of-type {
border-radius: 0 0 3px;
}
.d27f17593b8064c5-calendarPicker .react-datepicker__week > .react-datepicker__day:last-of-type {
-webkit-border-end: 1px solid;
border-inline-end: 1px solid;
}
.d27f17593b8064c5-calendarPicker .react-datepicker__day-names {
margin-bottom: 10px;
}
.d27f17593b8064c5-calendarPicker .react-datepicker__day-name {
font-size: 13px;
font-weight: var(--font-weight-medium);
line-height: 1em;
margin: 0;
text-transform: uppercase;
width: 40px;
}
.d27f17593b8064c5-calendarPicker .react-datepicker__day {
border-top: 1px solid var(--border-subtle);
box-sizing: border-box;
height: 40px;
line-height: 40px;
margin: 0;
position: relative;
width: 40px;
-webkit-border-start: 1px solid var(--border-subtle);
border-inline-start: 1px solid var(--border-subtle);
color: var(--text-strong);
}
.d27f17593b8064c5-calendarPicker .react-datepicker__day.react-datepicker__day--keyboard-selected,
.d27f17593b8064c5-calendarPicker .react-datepicker__day.react-datepicker__day--selected:hover,
.d27f17593b8064c5-calendarPicker .react-datepicker__day:hover {
background-color: var(--brand-500);
border-radius: 0;
color: var(--white);
}
.d27f17593b8064c5-calendarPicker .react-datepicker__day.react-datepicker__day--selected {
background: none;
border-radius: 0;
}
.d27f17593b8064c5-calendarPicker .react-datepicker__day.react-datepicker__day--selected:after {
background-color: var(--brand-500);
bottom: 0;
content: "";
height: 3px;
inset-inline-start: 0;
position: absolute;
width: 100%;
}
.d27f17593b8064c5-calendarPicker .react-datepicker__day:focus-visible {
border-top-color: var(--blue-345);
border: 1px solid var(--blue-345);
border-inline-start-color: var(--blue-345);
}
.d27f17593b8064c5-calendarPicker .react-datepicker__day--disabled,
.d27f17593b8064c5-calendarPicker .react-datepicker__day--outside-month {
font-weight: var(--font-weight-medium);
}
.d27f17593b8064c5-calendarPicker .d27f17593b8064c5-react-datepicker__day--disabled,
.d27f17593b8064c5-calendarPicker .d27f17593b8064c5-react-datepicker__day--outside-month {
background-color: var(--background-base-lower);
}
.theme-light .d27f17593b8064c5-calendarPicker .react-datepicker__header {
border-color: hsl(var(--primary-200-hsl) / 0.2);
}
.theme-light .d27f17593b8064c5-calendarPicker .react-datepicker__current-month {
border-bottom-color: hsl(var(--primary-200-hsl) / 0.2);
}
.theme-light .d27f17593b8064c5-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--next,
.theme-light .d27f17593b8064c5-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--previous {
border-color: var(--primary-200);
}
.theme-light .d27f17593b8064c5-calendarPicker .react-datepicker__week:last-of-type .react-datepicker__day {
border-bottom-color: var(--primary-200);
}
.theme-light .d27f17593b8064c5-calendarPicker .react-datepicker__week .react-datepicker__day:last-of-type {
border-inline-end-color: var(--primary-200);
}
.theme-light .d27f17593b8064c5-calendarPicker .react-datepicker__day-name {
color: hsl(var(--primary-500-hsl) / 0.6);
}
.theme-light .d27f17593b8064c5-calendarPicker .react-datepicker__day.react-datepicker__day--disabled,
.theme-light .d27f17593b8064c5-calendarPicker .react-datepicker__day.react-datepicker__day--disabled:hover {
background-color: var(--opacity-black-4);
color: var(--opacity-black-20);
}
.theme-light .d27f17593b8064c5-calendarPicker .react-datepicker__day--disabled,
.theme-light .d27f17593b8064c5-calendarPicker .react-datepicker__day--outside-month {
color: hsl(var(--primary-500-hsl) / 0.3);
}
.theme-dark .d27f17593b8064c5-calendarPicker .react-datepicker__header {
border-color: hsl(var(--primary-800-hsl) / 0.2);
}
.theme-dark .d27f17593b8064c5-calendarPicker .react-datepicker__current-month {
border-bottom-color: hsl(var(--primary-800-hsl) / 0.3);
}
.theme-dark .d27f17593b8064c5-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--next,
.theme-dark .d27f17593b8064c5-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--previous {
border-color: var(--primary-800);
}
.theme-dark .d27f17593b8064c5-calendarPicker .react-datepicker__week:last-of-type .react-datepicker__day {
border-bottom-color: var(--primary-800);
}
.theme-dark .d27f17593b8064c5-calendarPicker .react-datepicker__week .react-datepicker__day:last-of-type {
border-inline-end-color: var(--primary-800);
}
.theme-dark .d27f17593b8064c5-calendarPicker .react-datepicker__day-name {
color: hsl(var(--primary-100-hsl) / 0.6);
}
.theme-dark .d27f17593b8064c5-calendarPicker .react-datepicker__day.react-datepicker__day--disabled,
.theme-dark .d27f17593b8064c5-calendarPicker .react-datepicker__day.react-datepicker__day--disabled:hover {
background-color: var(--primary-630);
color: hsl(var(--primary-100-hsl) / 0.3);
}
.theme-dark .d27f17593b8064c5-calendarPicker .react-datepicker__day--disabled,
.theme-dark .d27f17593b8064c5-calendarPicker .react-datepicker__day--outside-month {
color: hsl(var(--primary-100-hsl) / 0.3);
}
.enable-forced-colors .d27f17593b8064c5-calendarPicker .react-datepicker {
border: 2px solid CanvasText;
}
.enable-forced-colors .d27f17593b8064c5-calendarPicker .react-datepicker__day.react-datepicker__day--keyboard-selected,
.enable-forced-colors .d27f17593b8064c5-calendarPicker .react-datepicker__day.react-datepicker__day--selected:hover,
.enable-forced-colors .d27f17593b8064c5-calendarPicker .react-datepicker__day:hover {
background-color: HighlightText;
color: Highlight;
}
.enable-forced-colors .d27f17593b8064c5-calendarPicker .react-datepicker__day.react-datepicker__day--selected:after {
background-color: Highlight;
}
.enable-forced-colors .d27f17593b8064c5-calendarPicker .react-datepicker__day:focus-visible {
background-color: HighlightText;
border-color: Highlight;
color: Highlight;
}
.enable-forced-colors .d27f17593b8064c5-calendarPicker .react-datepicker__day.react-datepicker__day--disabled,
.enable-forced-colors .d27f17593b8064c5-calendarPicker .react-datepicker__day.react-datepicker__day--disabled:hover {
color: GrayText;
}
.images-light .d27f17593b8064c5-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--next,
.images-light .d27f17593b8064c5-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--previous {
background-image: url(/assets/f7d0845b63d81c46.svg);
}
.images-dark .d27f17593b8064c5-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--next,
.images-dark .d27f17593b8064c5-calendarPicker .react-datepicker__navigation.react-datepicker__navigation--previous {
background-image: url(/assets/a46a54146b77fab4.svg);
}
._9bb02e82f9a1c59d-calendarContainer {
box-shadow: var(--legacy-elevation-border), var(--legacy-elevation-high);
}
._9bb02e82f9a1c59d-container {
cursor: pointer;
display: grid;
gap: var(--space-8);
grid-template-columns: 1fr auto;
min-height: var(--control-input-height-md);
padding: var(--space-8) var(--space-12);
}
._2ffbd6a09a7d961b-calendar {
box-sizing: border-box;
color: var(--text-default);
max-width: 248px;
padding: var(--space-16);
width: 100%;
}
._2ffbd6a09a7d961b-calendarHeader {
align-items: center;
display: flex;
gap: var(--space-8);
justify-content: space-between;
margin-bottom: var(--space-12);
}
._2ffbd6a09a7d961b-selectField {
height: 24px;
}
._2ffbd6a09a7d961b-select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: none;
}
._2ffbd6a09a7d961b-monthSelect:hover:not(:disabled),
._2ffbd6a09a7d961b-yearSelect:hover:not(:disabled) {
border-color: var(--input-border-hover);
}
._2ffbd6a09a7d961b-monthSelect:focus,
._2ffbd6a09a7d961b-yearSelect:focus {
border-color: var(--input-border-focus);
box-shadow: 0 0 0 1px var(--input-border-focus);
outline: none;
}
._2ffbd6a09a7d961b-monthSelect:disabled,
._2ffbd6a09a7d961b-yearSelect:disabled {
cursor: not-allowed;
opacity: 0.5;
}
._2ffbd6a09a7d961b-calendarGrid {
border-collapse: collapse;
width: 100%;
}
._2ffbd6a09a7d961b-cell,
._2ffbd6a09a7d961b-headerCell {
aspect-ratio: 1/1;
height: 32px;
}
._2ffbd6a09a7d961b-cell {
align-items: center;
background: transparent;
border-radius: var(--radius-sm);
cursor: pointer;
display: flex;
justify-content: center;
text-align: center;
transition: all 0.15s ease;
}
._2ffbd6a09a7d961b-cell[data-selected] {
background-color: var(--control-primary-background-default);
color: var(--control-primary-text-default);
outline: 1px solid var(--control-primary-border-default);
outline-offset: -1px;
}
._2ffbd6a09a7d961b-cell[data-disabled] {
color: var(--text-disabled);
cursor: not-allowed;
opacity: 0.4;
}
._2ffbd6a09a7d961b-cell[data-focus-visible] {
box-shadow: inset 0 0 0 2px var(--border-focus);
outline: none;
}
._2ffbd6a09a7d961b-cell[data-outside-month] {
color: var(--text-subtle);
opacity: 0.4;
}
._2ffbd6a09a7d961b-cell:hover:not([data-disabled]):not([data-selected]) {
background-color: var(--background-mod-subtle);
}
.enable-forced-colors ._2ffbd6a09a7d961b-calendar {
background-color: Canvas;
border-color: ButtonBorder;
}
.enable-forced-colors ._2ffbd6a09a7d961b-cell {
color: CanvasText;
}
.enable-forced-colors ._2ffbd6a09a7d961b-cell[data-selected] {
background-color: Highlight;
color: HighlightText;
}
.enable-forced-colors ._2ffbd6a09a7d961b-cell[data-disabled] {
color: GrayText;
}
.enable-forced-colors ._2ffbd6a09a7d961b-cell[data-focus-visible] {
box-shadow: inset 0 0 0 2px Highlight;
outline: none;
}
.enable-forced-colors ._2ffbd6a09a7d961b-cell[data-outside-month] {
color: GrayText;
opacity: 0.4;
}
.enable-forced-colors ._2ffbd6a09a7d961b-cell:hover:not(._2ffbd6a09a7d961b-cellDisabled):not(._2ffbd6a09a7d961b-selected) {
background-color: ButtonFace;
}
.a14f879d2918a602-inputField {
align-items: center;
display: flex;
height: var(--control-input-height-md);
justify-content: space-between;
max-width: 180px;
padding-left: var(--space-8);
padding-right: var(--space-4);
}
.a14f879d2918a602-datePicker {
height: 100%;
width: 100%;
}
.a14f879d2918a602-placeholder {
color: var(--text-subtle);
}
.a14f879d2918a602-inputGroup {
align-items: center;
box-sizing: border-box;
display: flex;
height: 100%;
justify-content: space-between;
padding-bottom: var(--space-4);
padding-top: var(--space-4);
width: 100%;
}
.a14f879d2918a602-segment {
border-radius: var(--radius-xs);
padding: 0 2px;
}
.a14f879d2918a602-segment:focus {
background-color: var(--opacity-blurple-8);
color: var(--text-strong);
outline: 1px solid var(--border-focus);
}
.a14f879d2918a602-calendarButton {
align-items: center;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
aspect-ratio: 1/1;
background: transparent;
border-radius: var(--radius-xs);
color: var(--control-icon-only-icon-default);
display: flex;
height: 100%;
justify-content: center;
margin: 0;
padding: 0;
transition: all 0.15s ease;
}
.a14f879d2918a602-calendarButton[data-hovered] {
background-color: var(--control-icon-only-background-hover);
border-color: var(--control-icon-only-border-hover);
color: var(--control-icon-only-icon-hover);
}
.a14f879d2918a602-calendarButton[data-pressed] {
background-color: var(--control-icon-only-background-active);
border-color: var(--control-icon-only-border-active);
color: var(--control-icon-only-icon-active);
}
.a14f879d2918a602-calendarButton[data-focus-visible] {
outline: 2px solid var(--border-focus);
outline-offset: -1px;
}
.a14f879d2918a602-dialog,
.a14f879d2918a602-popover {
z-index: 10;
}
.a14f879d2918a602-dialog {
background-color: var(--background-surface-higher);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
box-shadow: 0 2px 8px 0 var(--opacity-black-16);
box-sizing: border-box;
max-height: 100%;
overflow: auto !important;
}
.enable-forced-colors .a14f879d2918a602-inputGroup {
background-color: Field;
border-color: ButtonBorder;
}
.enable-forced-colors .a14f879d2918a602-inputGroup.a14f879d2918a602-error {
border-color: Mark;
}
.enable-forced-colors .a14f879d2918a602-segment {
color: FieldText;
}
.enable-forced-colors .a14f879d2918a602-segment:focus {
background-color: Highlight;
color: HighlightText;
}
.enable-forced-colors .a14f879d2918a602-calendarButton {
color: ButtonText;
}
.enable-forced-colors .a14f879d2918a602-calendarButton:hover {
background-color: ButtonFace;
}
._84ae7f6caff1d958-placeholder {
align-items: center;
background-color: var(--background-mod-subtle);
border: 1px dashed var(--border-subtle);
border-radius: var(--radius-md);
display: flex;
justify-content: center;
padding: var(--space-8) var(--space-12);
}
.e4491282b6a5364a-outerContainer {
align-items: center;
container: outer-container/inline-size;
display: flex;
height: 100vh;
justify-content: center;
width: calc(100vw - var(--devtools-sidebar-width, 0px));
}
.e4491282b6a5364a-modal {
--custom-viewport-padding: calc(var(--space-40) + var(--custom-app-top-bar-height));
background: var(--background-base-lower);
box-sizing: border-box;
container: modal-container/inline-size;
height: calc(100% - (var(--custom-viewport-padding)) * 2);
max-width: 1400px;
overflow: hidden;
width: calc(100% - (var(--custom-viewport-padding)) * 2);
}
@media (max-width: 1600px) {
.e4491282b6a5364a-modal {
--custom-viewport-padding: var(--space-40);
}
}
@container outer-container (max-width: 1600px) {
.e4491282b6a5364a-modal {
--custom-viewport-padding: var(--space-40);
}
}
@container outer-container (max-width: 1080px) {
.e4491282b6a5364a-modal {
border: none;
border-radius: 0;
height: 100%;
overflow-y: auto;
padding-top: var(--custom-app-top-bar-height);
width: 100%;
}
.e4491282b6a5364a-modalContent {
border-top: 1px solid var(--border-muted);
}
}
.e4491282b6a5364a-modalContent {
box-sizing: border-box;
height: 100%;
width: 100%;
}
.e4491282b6a5364a-modalContentInner {
box-sizing: inherit;
height: inherit;
width: inherit;
}
.d6f39bdbd19328a0-popover {
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: var(--space-16);
max-width: var(--custom-popover-width);
padding: var(--space-16);
position: relative;
text-align: center;
width: var(--custom-popover-width);
--custom-popover-caret-gradient-color-start: transparent;
--custom-popover-caret-gradient-color-end: transparent;
}
.d6f39bdbd19328a0-popover,
.d6f39bdbd19328a0-popoverGradientWrapper {
background: var(--background-surface-high);
border-radius: var(--radius-md);
box-shadow:
inset 0 0 0 1px var(--border-subtle),
var(--shadow-high);
}
.d6f39bdbd19328a0-popoverGradientWrapper {
--custom-popover-caret-gradient-color-start: var(--custom-gradient-color-start);
--custom-popover-caret-gradient-color-end: var(--custom-gradient-color-end);
}
.d6f39bdbd19328a0-popoverContentWithGradient {
background: transparent;
border-radius: var(--radius-md);
box-shadow: none;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: var(--space-16);
max-width: var(--custom-popover-width);
padding: var(--space-16);
position: relative;
text-align: center;
width: var(--custom-popover-width);
}
.d6f39bdbd19328a0-popover--video,
.d6f39bdbd19328a0-popoverContentWithGradient.d6f39bdbd19328a0-popover--video {
padding: var(--space-4);
}
.d6f39bdbd19328a0-popover--video .d6f39bdbd19328a0-footer,
.d6f39bdbd19328a0-popover--video .d6f39bdbd19328a0-header {
padding: 0 var(--space-16);
}
.d6f39bdbd19328a0-popover--video .d6f39bdbd19328a0-actionBar {
padding: 0 var(--space-16) var(--space-16);
}
.d6f39bdbd19328a0-closeButton {
inset-inline-end: var(--space-4);
position: absolute;
top: var(--space-4);
z-index: 2;
}
.d6f39bdbd19328a0-header {
align-items: center;
display: flex;
flex-direction: column;
gap: var(--space-4);
margin: var(--space-20) 0;
position: relative;
z-index: 1;
}
.d6f39bdbd19328a0-headerWithBadge {
}
.d6f39bdbd19328a0-title {
margin: 0;
text-align: center;
}
.d6f39bdbd19328a0-headerBody {
color: var(--text-subtle);
display: flex;
flex-direction: column;
gap: 2px;
margin: 0;
}
.d6f39bdbd19328a0-badgeContainer {
margin-bottom: var(--space-12);
}
.d6f39bdbd19328a0-content {
align-items: center;
display: flex;
flex-direction: column;
position: relative;
z-index: 1;
}
.d6f39bdbd19328a0-graphic {
margin: var(--space-16) auto var(--space-20);
width: 100%;
}
.d6f39bdbd19328a0-graphic--md,
.d6f39bdbd19328a0-graphic--sm {
max-width: 144px;
}
.d6f39bdbd19328a0-graphic--lg {
max-width: 160px;
}
.d6f39bdbd19328a0-graphic--video {
max-width: 232px;
}
.d6f39bdbd19328a0-footer {
align-items: center;
display: flex;
flex-direction: column;
gap: var(--space-4);
text-align: center;
}
.d6f39bdbd19328a0-footerText {
color: var(--text-muted);
margin: 0;
}
.d6f39bdbd19328a0-footerLink {
color: var(--text-link);
margin: 0;
}
.d6f39bdbd19328a0-actionBar {
align-items: stretch;
display: flex;
flex-direction: column;
gap: var(--space-8);
justify-content: center;
}
.d6f39bdbd19328a0-actionBar .d6f39bdbd19328a0-actions {
flex: 1;
min-width: unset;
}
.d6f39bdbd19328a0-actions {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.d6f39bdbd19328a0-actionsFullWidth {
flex-direction: column;
width: 100%;
}
.d6f39bdbd19328a0-actionsFullWidth > * {
min-width: 0;
width: 100%;
}
.d6f39bdbd19328a0-multistepIndicator {
-webkit-margin-start: var(--space-4);
color: var(--text-muted);
margin-inline-start: var(--space-4);
margin-top: var(--space-4);
opacity: 0.7;
}
.d6f39bdbd19328a0-multistepActionLayout {
align-items: center;
display: flex;
justify-content: space-between;
width: 100%;
}
.d6f39bdbd19328a0-caretIcon .d6f39bdbd19328a0-caretFill {
fill: var(--background-surface-high);
}
.d6f39bdbd19328a0-caretIcon .d6f39bdbd19328a0-caretGradient {
fill: var(--custom-popover-caret-gradient-color, transparent);
}
.d6f39bdbd19328a0-caretIcon .d6f39bdbd19328a0-caretStroke {
stroke: var(--border-subtle);
stroke-opacity: 1;
}
._6ec79fd07a9fe2e0-caret {
--custom-caret-half-width: 11px;
--custom-caret-half-height: 7px;
--custom-caret-horizontal-distance: 18px;
--custom-caret-border-overlap: 1px;
color: transparent;
pointer-events: none;
position: absolute;
transform-origin: center;
}
._6ec79fd07a9fe2e0-caret--bottom {
top: calc(100% - var(--custom-caret-border-overlap));
transform: rotate(0deg);
}
._6ec79fd07a9fe2e0-caret--top {
bottom: calc(100% - var(--custom-caret-border-overlap));
transform: rotate(180deg);
}
._6ec79fd07a9fe2e0-caret--left {
--custom-popover-caret-gradient-color: color-mix(in oklab, var(--custom-popover-caret-gradient-color-start) 25%, transparent);
inset-inline-start: calc(var(--custom-caret-horizontal-distance) * -1);
transform: rotate(90deg);
}
._6ec79fd07a9fe2e0-caret--right {
inset-inline-end: calc(var(--custom-caret-horizontal-distance) * -1);
transform: rotate(-90deg);
}
._6ec79fd07a9fe2e0-caret--bottom._6ec79fd07a9fe2e0-caret--center,
._6ec79fd07a9fe2e0-caret--top._6ec79fd07a9fe2e0-caret--center {
inset-inline-start: calc(50% + var(--custom-caret-edge-offset-horizontal-nudge, 0));
}
._6ec79fd07a9fe2e0-caret--bottom._6ec79fd07a9fe2e0-caret--center,
._6ec79fd07a9fe2e0-caret--bottom._6ec79fd07a9fe2e0-caret--start,
._6ec79fd07a9fe2e0-caret--top._6ec79fd07a9fe2e0-caret--center,
._6ec79fd07a9fe2e0-caret--top._6ec79fd07a9fe2e0-caret--start {
-webkit-margin-start: calc(var(--custom-caret-half-width) * -1);
margin-inline-start: calc(var(--custom-caret-half-width) * -1);
}
._6ec79fd07a9fe2e0-caret--bottom._6ec79fd07a9fe2e0-caret--start,
._6ec79fd07a9fe2e0-caret--top._6ec79fd07a9fe2e0-caret--start {
inset-inline-start: calc(var(--custom-caret-edge-offset-horizontal) + var(--custom-caret-edge-offset-horizontal-nudge, 0));
}
._6ec79fd07a9fe2e0-caret--bottom._6ec79fd07a9fe2e0-caret--end,
._6ec79fd07a9fe2e0-caret--top._6ec79fd07a9fe2e0-caret--end {
inset-inline-end: calc(var(--custom-caret-edge-offset-horizontal) - var(--custom-caret-edge-offset-horizontal-nudge, 0));
-webkit-margin-end: calc(var(--custom-caret-half-width) * -1);
margin-inline-end: calc(var(--custom-caret-half-width) * -1);
}
._6ec79fd07a9fe2e0-caret--left._6ec79fd07a9fe2e0-caret--center,
._6ec79fd07a9fe2e0-caret--right._6ec79fd07a9fe2e0-caret--center {
margin-top: calc(var(--custom-caret-half-height) * -1);
top: 50%;
}
._6ec79fd07a9fe2e0-caret--left._6ec79fd07a9fe2e0-caret--center {
inset-inline-start: calc(var(--custom-caret-horizontal-distance) * -1);
}
._6ec79fd07a9fe2e0-caret--left._6ec79fd07a9fe2e0-caret--start,
._6ec79fd07a9fe2e0-caret--right._6ec79fd07a9fe2e0-caret--start {
margin-top: calc(var(--custom-caret-half-height) * -1);
top: var(--custom-caret-edge-offset-vertical);
}
._6ec79fd07a9fe2e0-caret--left._6ec79fd07a9fe2e0-caret--end,
._6ec79fd07a9fe2e0-caret--right._6ec79fd07a9fe2e0-caret--end {
bottom: var(--custom-caret-edge-offset-vertical);
margin-bottom: calc(var(--custom-caret-half-height) * -1);
}
._6ec79fd07a9fe2e0-caret--custom {
--custom-caret-offset-x: 0;
--custom-caret-offset-y: 0;
}
._6ec79fd07a9fe2e0-caret--bottom._6ec79fd07a9fe2e0-caret--custom,
._6ec79fd07a9fe2e0-caret--top._6ec79fd07a9fe2e0-caret--custom {
inset-inline-start: 50%;
-webkit-margin-start: calc(var(--custom-caret-offset-x) - var(--custom-caret-half-width));
margin-inline-start: calc(var(--custom-caret-offset-x) - var(--custom-caret-half-width));
}
._6ec79fd07a9fe2e0-caret--left._6ec79fd07a9fe2e0-caret--custom,
._6ec79fd07a9fe2e0-caret--right._6ec79fd07a9fe2e0-caret--custom {
margin-top: calc(var(--custom-caret-offset-y) - var(--custom-caret-half-height));
top: 50%;
}
._6ec79fd07a9fe2e0-caret--top._6ec79fd07a9fe2e0-caret--start {
--custom-popover-caret-gradient-color: color-mix(in oklab, var(--custom-popover-caret-gradient-color-end) 7%, var(--custom-popover-caret-gradient-color-start));
}
._6ec79fd07a9fe2e0-caret--top._6ec79fd07a9fe2e0-caret--center {
--custom-popover-caret-gradient-color: color-mix(in oklab, var(--custom-popover-caret-gradient-color-end) 50%, var(--custom-popover-caret-gradient-color-start));
}
._6ec79fd07a9fe2e0-caret--top._6ec79fd07a9fe2e0-caret--end {
--custom-popover-caret-gradient-color: color-mix(in oklab, var(--custom-popover-caret-gradient-color-end) 98%, var(--custom-popover-caret-gradient-color-start));
}
._6ec79fd07a9fe2e0-caret--right._6ec79fd07a9fe2e0-caret--start {
--custom-popover-caret-gradient-color: color-mix(in oklab, var(--custom-popover-caret-gradient-color-end) 98%, transparent);
}
._6ec79fd07a9fe2e0-caret--right._6ec79fd07a9fe2e0-caret--center {
--custom-popover-caret-gradient-color: color-mix(in oklab, var(--custom-popover-caret-gradient-color-end) 25%, transparent);
}
._6ec79fd07a9fe2e0-caret--left._6ec79fd07a9fe2e0-caret--start {
--custom-popover-caret-gradient-color: color-mix(in oklab, var(--custom-popover-caret-gradient-color-start) 98%, transparent);
}
._6ec79fd07a9fe2e0-caret--left._6ec79fd07a9fe2e0-caret--center {
--custom-popover-caret-gradient-color: color-mix(in oklab, var(--custom-popover-caret-gradient-color-start) 25%, transparent);
}
._9c640ae416a3e411-media {
border-radius: var(--radius-md);
}
._9c640ae416a3e411-assetContainer {
border-radius: var(--radius-sm);
display: inline-block;
overflow: hidden;
position: relative;
width: 100%;
}
._9c640ae416a3e411-playButton {
inset-inline-start: 50%;
opacity: 0;
pointer-events: none;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
transition: opacity 0.2s ease-in-out;
z-index: 2;
}
._9c640ae416a3e411-assetContainer:focus-within ._9c640ae416a3e411-playButton,
._9c640ae416a3e411-assetContainer:hover ._9c640ae416a3e411-playButton {
opacity: 1;
pointer-events: auto;
}
._9c640ae416a3e411-closeButton {
inset-inline-end: calc(var(--space-8) - 1px);
position: absolute;
top: calc(var(--space-8) - 1px);
z-index: 2;
}
.f72374ed43c7e959-variants {
display: grid;
gap: var(--space-8);
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.f72374ed43c7e959-card {
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
padding: var(--space-12);
}
._95d7b09e86ef577e-layer {
background-color: var(--background-surface-high);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
box-shadow: var(--shadow-high);
padding: var(--space-16);
}
.b4f99ff7fb9ad184-container {
background: var(--background-surface-higher);
box-sizing: border-box;
flex-direction: column;
padding: 16px;
width: 254px;
}
.b4f99ff7fb9ad184-assetContainer,
.b4f99ff7fb9ad184-container {
align-items: center;
display: flex;
justify-content: center;
}
.b4f99ff7fb9ad184-assetContainer {
flex-shrink: 0;
height: 86px;
margin-bottom: 12px;
}
.b4f99ff7fb9ad184-orbAsset {
height: 86px;
}
.b4f99ff7fb9ad184-sectionDivider {
background-color: var(--border-subtle);
border: 0;
height: 1px;
margin: 0 -12px;
width: 100%;
}
.b4f99ff7fb9ad184-linkContainer {
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin-top: 16px;
}
.b4f99ff7fb9ad184-linkPreText {
color: var(--text-default);
}
.b4f99ff7fb9ad184-learnMoreLink {
color: var(--border-focus);
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 16px;
}
._1ab14d14e9559e7e-baseCardOutline {
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
box-shadow: 0 12px 64px 0 rgba(0, 0, 0, 0.32);
}
._98f64ec6d51f9c4a-balanceCounterMargin {
-webkit-margin-start: 2px;
margin-inline-start: 2px;
}
._98f64ec6d51f9c4a-balanceCounterText {
color: var(--text-strong);
display: flex;
flex-direction: row;
justify-content: flex-end;
text-align: end;
}
.full-motion ._98f64ec6d51f9c4a-balanceCounterText {
transition:
all 0.4s ease-out,
opacity 0.4s ease-in;
}
._5eb9b3cc7c2b1ce8-lottieIconColors :not(defs *)[fill][fill-opacity] {
fill: var(--__lottieIconColor, var(--interactive-text-default));
}
._5eb9b3cc7c2b1ce8-lottieIconColors :not(defs *)[stroke][stroke-opacity] {
stroke: var(--__lottieIconColor, var(--interactive-text-default));
}
._5eb9b3cc7c2b1ce8-lottieIcon svg {
transform: none !important;
}
.enable-forced-colors ._5eb9b3cc7c2b1ce8-lottieIcon :not(defs *)[fill][fill-opacity] {
fill: currentColor;
}
.enable-forced-colors ._5eb9b3cc7c2b1ce8-lottieIcon :not(defs *)[stroke][stroke-opacity] {
stroke: currentColor;
}
.a3e8dbaff932c162-clickable {
box-sizing: border-box;
cursor: pointer;
height: 32px;
pointer-events: all;
}
.a3e8dbaff932c162-disabled {
cursor: none;
pointer-events: none;
}
.a3e8dbaff932c162-container {
align-items: center;
border: 1px solid var(--border-muted);
border-radius: var(--radius-sm);
box-sizing: border-box;
cursor: pointer;
display: inline-flex;
flex-shrink: 0;
height: 32px;
justify-content: flex-end;
opacity: 1 !important;
padding: 8px 12px;
pointer-events: all;
position: relative;
}
.a3e8dbaff932c162-container.a3e8dbaff932c162-disabled {
cursor: none;
pointer-events: none;
}
.a3e8dbaff932c162-orbsLottieContainer {
height: 60px;
overflow: visible;
position: relative;
width: 20px;
}
.a3e8dbaff932c162-orbsLottie {
inset-inline-end: -20px;
position: absolute;
}
@keyframes a3e8dbaff932c162-spin {
0% {
transform: rotate(0deg);
}
to {
transform: rotate(1turn);
}
}
.full-motion .a3e8dbaff932c162-orbIconloading {
animation-duration: 1s;
animation-iteration-count: infinite;
animation-name: a3e8dbaff932c162-spin;
animation-timing-function: linear;
}
.a3e8dbaff932c162-containerLoading {
gap: 0;
}
.a3e8dbaff932c162-counterLoading {
visibility: hidden;
}
.a3e8dbaff932c162-container.a3e8dbaff932c162-default {
background-color: var(--background-mod-subtle);
}
.a3e8dbaff932c162-container.a3e8dbaff932c162-highlighted,
.a3e8dbaff932c162-container.a3e8dbaff932c162-selected {
background-color: var(--background-mod-normal);
}
.a3e8dbaff932c162-inModalOverlay.a3e8dbaff932c162-container.a3e8dbaff932c162-default,
.a3e8dbaff932c162-inModalOverlay.a3e8dbaff932c162-container.a3e8dbaff932c162-highlighted,
.a3e8dbaff932c162-inModalOverlay.a3e8dbaff932c162-container.a3e8dbaff932c162-selected {
background-color: var(--modal-background);
}
.a3e8dbaff932c162-notificationBadge {
inset-inline-end: -4.5px;
position: absolute;
}
._44ee9ab6d1ca72b4-container {
position: relative;
}
._44ee9ab6d1ca72b4-cardContainer {
margin-top: 8px;
position: absolute;
z-index: 1000;
}
._44ee9ab6d1ca72b4-alignLeft {
inset-inline-start: 0;
}
._44ee9ab6d1ca72b4-alignRight {
inset-inline-end: 0;
}
._44ee9ab6d1ca72b4-coachmarkContainer {
align-items: flex-end;
display: flex;
flex-direction: column;
gap: 20px;
}
._44ee9ab6d1ca72b4-hidden {
visibility: hidden;
}
._44ee9ab6d1ca72b4-visible {
visibility: visible;
}
._5ed150ae1491f8f7-hidden {
height: 0;
visibility: hidden;
}
._5ed150ae1491f8f7-verticalContainer {
align-items: flex-start;
}
._5ed150ae1491f8f7-verticalContainer,
._5ed150ae1491f8f7-verticalContainerCentered {
display: flex;
flex-direction: column;
row-gap: 8px;
}
._5ed150ae1491f8f7-verticalContainerCentered {
align-items: center;
}
._5ed150ae1491f8f7-balanceWidgetMenu {
width: -webkit-max-content !important;
width: -moz-max-content !important;
width: max-content !important;
}
._5ed150ae1491f8f7-balanceWidgetMenuContainer {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
width: auto;
}
._5ed150ae1491f8f7-scroller {
height: 100%;
}
._5ed150ae1491f8f7-loader {
align-items: center;
display: flex;
justify-content: center;
}
._5ed150ae1491f8f7-balanceWidgetPillContainer {
align-items: center;
display: flex;
gap: 8px;
}
._5ed150ae1491f8f7-tabularNums {
font-variant-numeric: tabular-nums;
}
._5ed150ae1491f8f7-headerWithSpacing {
margin-bottom: 8px;
margin-top: 4px;
}
._5ed150ae1491f8f7-labelValueRow {
align-items: center;
display: flex;
flex-direction: row;
gap: 8px;
}
.e5f3a99c23b47bde-shaker {
align-items: center;
display: flex;
flex-direction: column;
flex-grow: 1;
height: 100%;
justify-content: center;
max-height: inherit;
}
.e5f3a99c23b47bde-root > :last-child {
border-end-end-radius: var(--radius-sm);
border-end-start-radius: var(--radius-sm);
}
.e5f3a99c23b47bde-root.e5f3a99c23b47bde-withHeader > :first-child {
background-color: transparent;
}
@media (max-width: 485px) {
.e5f3a99c23b47bde-shaker {
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
max-height: none;
}
.e5f3a99c23b47bde-root,
.e5f3a99c23b47bde-shaker {
justify-content: center;
}
.e5f3a99c23b47bde-root {
border-radius: 0;
width: 100vw;
}
}
.e5f3a99c23b47bde-halloweenModalHeight {
max-height: 800px;
}
.e5f3a99c23b47bde-premiumBrandRefreshBackground {
background-color: var(--background-base-low) !important;
}
._9a648e2aa7aa390d-paymentModalLockIcon {
color: var(--primary-500);
padding: 0 var(--space-16);
}
.theme-dark ._9a648e2aa7aa390d-paymentModalLockIcon {
color: var(--primary-300);
}
._9a648e2aa7aa390d-lockIcon {
-webkit-margin-end: 2px;
margin-inline-end: 2px;
}
._9a648e2aa7aa390d-lockIconText {
white-space: nowrap;
}
._962c62588648b4ac-primaryIcon {
height: 16px;
width: 16px;
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
._962c62588648b4ac-button {
display: flex;
}
.c6f1a49abaa9f1d6-body {
background-color: var(--modal-background);
border-radius: var(--radius-md);
height: 100%;
padding: 0 var(--space-16);
}
.c6f1a49abaa9f1d6-sliderBody {
box-sizing: border-box;
flex-direction: row;
flex-grow: 0;
padding-bottom: var(--space-8);
width: 100%;
}
@media (max-width: 485px) {
.c6f1a49abaa9f1d6-sliderBody {
flex-direction: column;
flex-grow: 1;
}
}
.c6f1a49abaa9f1d6-body.c6f1a49abaa9f1d6-reviewStep {
padding: 0 var(--modal-horizontal-padding);
}
@media (max-width: 485px) {
.c6f1a49abaa9f1d6-body.c6f1a49abaa9f1d6-reviewStep {
width: 100%;
}
}
.c6f1a49abaa9f1d6-body.c6f1a49abaa9f1d6-addPaymentStepForPremium {
max-width: 440px;
padding-inline: var(--space-16);
}
@media screen and (max-height: 550px), screen and (max-width: 485px) {
.c6f1a49abaa9f1d6-body.c6f1a49abaa9f1d6-addPaymentStepForPremium {
max-width: 100%;
}
}
.c6f1a49abaa9f1d6-sliderBodyLarge {
width: 804px;
}
._9f2f44248e9e5c33-icon {
align-self: center;
background-color: var(--background-surface-high);
border-radius: 50%;
}
._9f2f44248e9e5c33-icon._9f2f44248e9e5c33-small {
height: 40px;
width: 40px;
}
._9f2f44248e9e5c33-icon._9f2f44248e9e5c33-medium {
height: 66px;
width: 66px;
}
._9f2f44248e9e5c33-icon._9f2f44248e9e5c33-large {
height: 128px;
width: 128px;
}
._41e0f7d14da2c4a4-animationWrapper {
height: 100%;
position: absolute;
width: 100%;
}
._41e0f7d14da2c4a4-lottieAnimation {
bottom: 0;
height: 196px;
inset-inline-end: 0;
position: absolute;
width: 196px;
}
.emoji {
height: var(--custom-emoji-size-emoji);
object-fit: contain;
vertical-align: bottom;
width: var(--custom-emoji-size-emoji);
}
.emoji.jumboable {
height: var(--custom-emoji-size-jumbo-emoji);
min-height: var(--custom-emoji-size-jumbo-emoji);
width: var(--custom-emoji-size-jumbo-emoji);
}
._9e80cbf4aab93113-container {
display: flex;
}
._9e80cbf4aab93113-emojiContainer {
-webkit-margin-end: 16px;
margin-inline-end: 16px;
}
._9e80cbf4aab93113-name {
margin-bottom: 2px;
}
._9e80cbf4aab93113-infoContainer {
flex: 1;
}
._9e80cbf4aab93113-emojiIcon {
height: 20px;
width: 20px;
}
._4328fa68abd40855-container {
display: flex;
flex-direction: column;
}
._4328fa68abd40855-header {
color: var(--text-default);
margin-top: 16px;
text-align: center;
}
._4328fa68abd40855-header strong {
color: var(--text-strong);
}
._4328fa68abd40855-divider {
background-color: var(--border-subtle);
border: none;
height: 1px;
margin: 28px 0;
width: 100%;
}
._4328fa68abd40855-benefitsContainer {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 16px;
}
._4328fa68abd40855-benefit {
background-color: var(--background-mod-subtle);
border-radius: 8px;
padding: 16px;
}
._2dea30567973ed8a-headerContainer {
background-color: var(--background-base-low);
height: 112px;
position: relative;
width: calc(100% + 2px);
-webkit-margin-start: -1px;
margin-inline-start: -1px;
margin-top: -2px;
}
._2dea30567973ed8a-closeContainer {
align-items: center;
background-color: var(--opacity-black-84);
border-radius: 50%;
cursor: pointer;
display: flex;
height: 24px;
inset-inline-end: 16px;
justify-content: center;
position: absolute;
top: 16px;
width: 24px;
}
._2dea30567973ed8a-closeIcon {
color: var(--interactive-text-default);
height: 16px;
width: 16px;
}
._2dea30567973ed8a-headerImage,
._2dea30567973ed8a-headerImageContainer {
height: 100%;
width: 100%;
}
._2dea30567973ed8a-headerImage {
border-start-end-radius: 12px;
border-start-start-radius: 12px;
object-fit: cover;
}
._2dea30567973ed8a-confirmationContainer {
margin-top: 32px;
}
._2dea30567973ed8a-purchaseConfirmation {
align-items: center;
display: flex;
flex-direction: column;
text-align: center;
}
._2dea30567973ed8a-confirmationTitle {
margin-top: 16px;
}
._2dea30567973ed8a-confirmationSubtitle {
margin-top: 8px;
}
._5d39a818aef02169-buttonHighlighted {
background: linear-gradient(95.07deg, var(--premium-tier-2-purple-for-gradients) 0, var(--premium-tier-2-purple-for-gradients-2) 49.96%, var(--premium-tier-2-pink-for-gradients) 95.93%);
}
._5d39a818aef02169-button {
align-items: center;
display: flex;
}
._5d39a818aef02169-buttonIcon {
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
@use postcss-pxtorem;
.c19a557985eb7793-wrapper {
position: relative;
word-wrap: break-word;
flex: 0 0 auto;
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
-webkit-padding-end: var(--custom-message-margin-horizontal);
min-height: 1.375rem;
padding-inline-end: var(--custom-message-margin-horizontal);
}
.c19a557985eb7793-compact.c19a557985eb7793-wrapper {
padding-bottom: var(--custom-message-padding-vertical-container-compact);
padding-top: var(--custom-message-padding-vertical-container-compact);
-webkit-padding-start: var(--custom-message-margin-compact-indent);
padding-inline-start: var(--custom-message-margin-compact-indent);
}
.c19a557985eb7793-cozy.c19a557985eb7793-wrapper {
padding-bottom: var(--custom-message-spacing-vertical-container-cozy);
padding-top: var(--custom-message-spacing-vertical-container-cozy);
-webkit-padding-start: var(--custom-message-margin-left-content-cozy);
padding-inline-start: var(--custom-message-margin-left-content-cozy);
}
.c19a557985eb7793-compact.c19a557985eb7793-wrapper.c19a557985eb7793-contentOnly,
.c19a557985eb7793-cozy.c19a557985eb7793-wrapper.c19a557985eb7793-contentOnly,
.c19a557985eb7793-preview.c19a557985eb7793-compact.c19a557985eb7793-wrapper,
.c19a557985eb7793-preview.c19a557985eb7793-cozy.c19a557985eb7793-wrapper {
-webkit-padding-start: 16px;
padding-inline-start: 16px;
}
.c19a557985eb7793-repliedMessage {
--reply-spacing: 4px;
align-items: center;
color: var(--text-default);
display: flex;
font-size: 0.875rem;
line-height: var(--custom-message-reply-message-preview-line-height);
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
white-space: pre;
}
.c19a557985eb7793-executedCommand,
.c19a557985eb7793-threadMessageAccessory {
align-items: center;
display: flex;
font-size: 0.875rem;
height: 18px;
line-height: 1.125rem;
min-width: 0;
}
.c19a557985eb7793-repliedMessage.c19a557985eb7793-latin12CompactTimeStamp {
--timestamp-width: 2.25rem;
}
.c19a557985eb7793-repliedMessage.c19a557985eb7793-latin24CompactTimeStamp {
--timestamp-width: 3.1rem;
}
.c19a557985eb7793-repliedMessage.c19a557985eb7793-asianCompactTimeStamp {
--timestamp-width: 4.25rem;
}
.c19a557985eb7793-compact .c19a557985eb7793-repliedMessage {
--text-indent: calc((var(--custom-message-margin-compact-indent) - 1rem) * -1);
-webkit-margin-start: calc(var(--timestamp-width) + var(--custom-message-meta-space) + var(--text-indent));
margin-inline-start: calc(var(--timestamp-width) + var(--custom-message-meta-space) + var(--text-indent));
-webkit-padding-start: var(--custom-message-reply-indent);
padding-inline-start: var(--custom-message-reply-indent);
}
.c19a557985eb7793-compact .c19a557985eb7793-repliedMessage .c19a557985eb7793-contextCommandMessage {
--text-indent: 0;
}
.c19a557985eb7793-cozy .c19a557985eb7793-repliedMessage {
margin-bottom: var(--reply-spacing);
}
.c19a557985eb7793-cozy .c19a557985eb7793-messageSpine:before,
.c19a557985eb7793-cozy .c19a557985eb7793-repliedMessageClickableSpine {
--gutter: var(--custom-message-margin-horizontal);
}
.a11y-font-scaled-down .c19a557985eb7793-cozy .c19a557985eb7793-messageSpine:before,
.a11y-font-scaled-down .c19a557985eb7793-cozy .c19a557985eb7793-repliedMessageClickableSpine {
--chat-avatar-size: 2.5rem;
--wrapper-padding-left: 4.5rem;
--avatar-position-left: 1rem;
--gutter: calc(var(--wrapper-padding-left) - var(--avatar-position-left) - var(--chat-avatar-size));
}
.c19a557985eb7793-compact .c19a557985eb7793-messageSpine:before,
.c19a557985eb7793-compact .c19a557985eb7793-repliedMessageClickableSpine {
--chat-avatar-size: var(--timestamp-width);
--gutter: var(--custom-message-meta-space);
}
.c19a557985eb7793-messageSpine:before,
.c19a557985eb7793-repliedMessageClickableSpine {
--spine-width: 2px;
border-block-width: var(--spine-width) 0;
border-color: var(--spine-default);
border-inline-width: var(--spine-width) 0;
border-start-start-radius: 6px;
border-style: solid;
box-sizing: border-box;
content: "";
display: block;
position: absolute;
top: 50%;
inset-inline: calc((var(--chat-avatar-size) / 2 + var(--gutter)) * -1) 100%;
bottom: 0;
margin-inline: calc(var(--spine-width) * -1 / 2) var(--reply-spacing);
margin-bottom: calc(var(--custom-message-spacing-vertical-container-cozy) - 4px);
margin-top: calc(var(--spine-width) * -1 / 2);
}
.c19a557985eb7793-compact .c19a557985eb7793-messageSpine:before,
.c19a557985eb7793-compact .c19a557985eb7793-repliedMessageClickableSpine {
inset-inline-end: calc(100% - var(--custom-message-reply-indent));
}
.c19a557985eb7793-repliedMessageClickableSpine {
cursor: pointer;
transition: border 50ms;
}
.c19a557985eb7793-repliedMessageClickableSpine:hover {
border-color: var(--interactive-text-default);
}
.c19a557985eb7793-repliedMessageClickableSpine:before {
bottom: -5px;
content: "";
cursor: pointer;
position: absolute;
top: -10px;
inset-inline: -5px;
}
.c19a557985eb7793-repliedMessageClickableSpine.c19a557985eb7793-repliedMessageContentHovered {
border-color: var(--interactive-text-default);
}
.c19a557985eb7793-executedCommandAvatar,
.c19a557985eb7793-replyAvatar,
.c19a557985eb7793-replyBadge,
.c19a557985eb7793-replyChatIconContainer,
.c19a557985eb7793-threadMessageAccessoryAvatar {
border-radius: 50%;
flex: 0 0 auto;
height: 16px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
width: 16px;
-webkit-margin-end: var(--custom-message-meta-space);
margin-inline-end: var(--custom-message-meta-space);
}
.c19a557985eb7793-threadMessageAccessoryAvatar {
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
.c19a557985eb7793-replyBadge {
align-items: center;
background: var(--background-base-lowest);
color: var(--text-default);
display: flex;
justify-content: center;
}
.c19a557985eb7793-replyIcon {
height: 7.2px;
width: 10.8px;
}
.c19a557985eb7793-clanTagChiplet {
margin-inline: 4px 0;
}
.c19a557985eb7793-compact .c19a557985eb7793-clanTagChiplet {
background: transparent;
display: inline;
padding: 0;
vertical-align: baseline;
}
.c19a557985eb7793-compact .c19a557985eb7793-clanTagChiplet > span {
background: var(--background-mod-strong);
border-radius: 4px;
padding: 1px 4px 0;
}
.c19a557985eb7793-compact .c19a557985eb7793-clanTagChiplet:hover {
background: transparent;
}
.c19a557985eb7793-compact .c19a557985eb7793-clanTagChiplet:hover > span {
background: var(--background-mod-muted);
}
.c19a557985eb7793-ticketIcon,
.c19a557985eb7793-userJoinSystemMessageIcon {
height: 12px;
width: 12px;
-webkit-margin-end: var(--custom-message-meta-space);
margin-inline-end: var(--custom-message-meta-space);
}
.c19a557985eb7793-commandIcon {
height: 9px;
width: 5px;
}
.c19a557985eb7793-executedCommand .c19a557985eb7793-applicationName,
.c19a557985eb7793-executedCommand .c19a557985eb7793-clanTagChiplet,
.c19a557985eb7793-executedCommand .c19a557985eb7793-commandName,
.c19a557985eb7793-executedCommand .c19a557985eb7793-username,
.c19a557985eb7793-repliedMessage .c19a557985eb7793-clanTagChiplet,
.c19a557985eb7793-repliedMessage .c19a557985eb7793-roleDot,
.c19a557985eb7793-repliedMessage .c19a557985eb7793-username,
.c19a557985eb7793-threadMessageAccessory .c19a557985eb7793-clanTagChiplet,
.c19a557985eb7793-threadMessageAccessory .c19a557985eb7793-username {
flex-shrink: 0;
font-size: inherit;
line-height: inherit;
-webkit-margin-end: var(--custom-message-meta-space);
margin-inline-end: var(--custom-message-meta-space);
opacity: 0.64;
}
.c19a557985eb7793-executedCommand .c19a557985eb7793-clanTagChiplet,
.c19a557985eb7793-repliedMessage .c19a557985eb7793-clanTagChiplet,
.c19a557985eb7793-threadMessageAccessory .c19a557985eb7793-clanTagChiplet {
-webkit-margin-start: 0;
margin-inline-start: 0;
}
.c19a557985eb7793-executedCommand .c19a557985eb7793-applicationName,
.c19a557985eb7793-executedCommand .c19a557985eb7793-commandName,
.c19a557985eb7793-executedCommand .c19a557985eb7793-username {
-webkit-margin-end: 0;
margin-inline-end: 0;
}
.c19a557985eb7793-executedCommand .c19a557985eb7793-botTag,
.c19a557985eb7793-repliedMessage .c19a557985eb7793-botTag,
.c19a557985eb7793-threadMessageAccessory .c19a557985eb7793-botTag {
top: 0;
}
.c19a557985eb7793-executedCommand .c19a557985eb7793-commandName {
color: var(--text-link);
font-weight: var(--font-weight-medium);
}
.c19a557985eb7793-executedCommand .c19a557985eb7793-appsIcon {
-webkit-margin-end: 3px;
margin-inline-end: 3px;
}
.c19a557985eb7793-executedCommand .c19a557985eb7793-appLauncherOnboardingCommandName {
background-color: var(--mention-background);
border-radius: 3px;
color: var(--text-link);
font-weight: var(--font-weight-medium);
padding: 0 2px;
}
.c19a557985eb7793-executedCommand .c19a557985eb7793-appLauncherOnboardingCommandName:hover {
background-color: var(--brand-500);
color: var(--white);
}
.c19a557985eb7793-executedCommand .c19a557985eb7793-applicationName {
color: var(--text-strong);
font-weight: var(--font-weight-medium);
}
.c19a557985eb7793-executedCommand .c19a557985eb7793-repliedMessage .c19a557985eb7793-username,
.c19a557985eb7793-executedCommand .c19a557985eb7793-targetUsername {
flex-shrink: 3;
text-overflow: ellipsis;
}
.c19a557985eb7793-executedCommand .c19a557985eb7793-repliedMessage {
margin-bottom: 0;
min-width: 40px;
-webkit-padding-start: 0;
padding-inline-start: 0;
}
.c19a557985eb7793-executedCommand .c19a557985eb7793-repliedMessage .c19a557985eb7793-username {
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
.c19a557985eb7793-executedCommandSeparator {
flex-shrink: 0;
-webkit-margin-end: 2px;
margin-inline-end: 2px;
}
.c19a557985eb7793-repliedTextPreview,
.c19a557985eb7793-threadMessageAccessoryPreview {
flex: 0 1 auto;
overflow: hidden;
}
.c19a557985eb7793-repliedTextPreview .c19a557985eb7793-repliedTextContent {
display: -webkit-inline-box !important;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
width: 100%;
word-break: break-all;
}
.c19a557985eb7793-repliedTextPreview .c19a557985eb7793-repliedTextContent a {
word-break: break-all;
}
.c19a557985eb7793-repliedTextPreview {
display: flex;
max-height: 2em;
}
.c19a557985eb7793-repliedTextPreview .emoji {
height: 1.25em;
width: 1.25em;
}
.c19a557985eb7793-threadMessageAccessoryPreview {
align-items: center;
display: flex;
}
.c19a557985eb7793-repliedTextPreview.c19a557985eb7793-clickable {
cursor: pointer;
}
.c19a557985eb7793-repliedTextPreview.c19a557985eb7793-clickable:hover,
.c19a557985eb7793-repliedTextPreview.c19a557985eb7793-repliedMessageClickableSpineHovered {
color: var(--text-strong);
}
.c19a557985eb7793-repliedMessage .c19a557985eb7793-repliedTextPreview .c19a557985eb7793-repliedTextContent,
.c19a557985eb7793-threadMessageAccessory .c19a557985eb7793-threadMessageAccessoryPreview .c19a557985eb7793-threadMessageAccessoryContent {
color: inherit;
font-size: inherit;
line-height: inherit;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.c19a557985eb7793-threadMessageAccessory .c19a557985eb7793-threadMessageAccessoryPreview .c19a557985eb7793-threadMessageAccessoryContent {
text-overflow: ellipsis;
white-space: nowrap;
}
.c19a557985eb7793-repliedMessage .c19a557985eb7793-repliedTextPreview .c19a557985eb7793-repliedTextContent code,
.c19a557985eb7793-threadMessageAccessory .c19a557985eb7793-threadMessageAccessoryPreview .c19a557985eb7793-threadMessageAccessoryContent code {
white-space: pre;
}
.c19a557985eb7793-repliedTextContent {
inline-size: -webkit-max-content;
inline-size: -moz-max-content;
inline-size: max-content;
}
.c19a557985eb7793-repliedTextPlaceholder,
.c19a557985eb7793-threadMessageAccessoryPlaceholder {
font-style: italic;
-webkit-padding-end: 2px;
padding-inline-end: 2px;
}
.c19a557985eb7793-repliedTextContentTrailingIcon,
.c19a557985eb7793-threadMessageAccessoryContentTrailingIcon {
flex: 0 0 auto;
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
.c19a557985eb7793-repliedTextContentLeadingIcon,
.c19a557985eb7793-threadMessageAccessoryContentLeadingIcon {
flex: 0 0 auto;
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
.c19a557985eb7793-compact .c19a557985eb7793-contents {
-webkit-margin-start: calc(var(--custom-message-margin-compact-indent) * -1);
margin-inline-start: calc(var(--custom-message-margin-compact-indent) * -1);
-webkit-padding-start: var(--custom-message-margin-compact-indent);
padding-inline-start: var(--custom-message-margin-compact-indent);
text-indent: calc((var(--custom-message-margin-compact-indent) - 1rem) * -1);
}
.c19a557985eb7793-cozy .c19a557985eb7793-contents {
position: static;
-webkit-margin-start: 0;
margin-inline-start: 0;
-webkit-padding-start: 0;
padding-inline-start: 0;
text-indent: 0;
}
.c19a557985eb7793-zalgo.c19a557985eb7793-compact .c19a557985eb7793-messageContent {
overflow: hidden;
}
.c19a557985eb7793-gradient.c19a557985eb7793-compact .c19a557985eb7793-header,
.c19a557985eb7793-gradient.c19a557985eb7793-cozy .c19a557985eb7793-header,
.c19a557985eb7793-withDisplayNameStyles .c19a557985eb7793-repliedMessage .c19a557985eb7793-username,
.c19a557985eb7793-withDisplayNameStyles.c19a557985eb7793-withDisplayNameStyles.c19a557985eb7793-withDisplayNameStyles .c19a557985eb7793-header,
.c19a557985eb7793-zalgo.c19a557985eb7793-gradient.c19a557985eb7793-compact .c19a557985eb7793-header,
.c19a557985eb7793-zalgo.c19a557985eb7793-gradient.c19a557985eb7793-cozy .c19a557985eb7793-header {
overflow: visible;
position: relative;
}
.c19a557985eb7793-compact .c19a557985eb7793-header {
display: inline;
}
.c19a557985eb7793-cozy .c19a557985eb7793-header {
color: var(--text-muted);
display: block;
line-height: 1.375rem;
min-height: 1.375rem;
position: relative;
white-space: break-spaces;
word-wrap: pre-wrap;
}
.c19a557985eb7793-zalgo.c19a557985eb7793-cozy .c19a557985eb7793-header {
overflow: hidden;
}
.a11y-font-scaled-down .c19a557985eb7793-cozy.c19a557985eb7793-wrapper,
.a11y-font-scaled-down .c19a557985eb7793-cozy.c19a557985eb7793-wrapper .c19a557985eb7793-header {
-webkit-padding-start: 4.5rem;
padding-inline-start: 4.5rem;
}
.a11y-font-scaled-down .c19a557985eb7793-cozy .c19a557985eb7793-header {
-webkit-margin-start: -4.5rem;
margin-inline-start: -4.5rem;
}
.c19a557985eb7793-buttonContainer {
inset-inline-end: 0;
position: absolute;
top: 0;
}
.c19a557985eb7793-systemMessageAccessories {
-webkit-margin-start: 2.5rem;
margin-inline-start: 2.5rem;
}
.c19a557985eb7793-avatar {
border-radius: 50%;
cursor: pointer;
flex: 0 0 auto;
height: var(--chat-avatar-size);
inset-inline-start: var(--custom-message-margin-horizontal);
margin-top: calc(4px - var(--custom-message-spacing-vertical-container-cozy));
overflow: hidden;
pointer-events: none;
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
width: var(--chat-avatar-size);
z-index: 1;
}
.c19a557985eb7793-compact .c19a557985eb7793-avatar {
height: 1em;
inset-inline-start: 0;
margin-top: 0;
margin-inline: 0.1em 0.25em;
position: relative;
top: 0.18em;
width: 1em;
}
.c19a557985eb7793-preview .c19a557985eb7793-avatar {
inset-inline-start: 8px;
}
.c19a557985eb7793-avatar:before {
background-color: var(--background-mod-subtle);
content: "";
display: block;
height: 100%;
width: 100%;
}
.c19a557985eb7793-avatarDecoration {
height: var(--custom-message-avatar-decoration-size);
inset-inline-start: calc(var(--custom-message-margin-horizontal) - (var(--custom-message-avatar-decoration-size) - var(--custom-message-avatar-size)) / 2);
margin-top: calc(4px - var(--custom-message-spacing-vertical-container-cozy) - (var(--custom-message-avatar-decoration-size) - var(--custom-message-avatar-size)) / 2);
pointer-events: none;
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
width: var(--custom-message-avatar-decoration-size);
z-index: 1;
}
.a11y-font-scaled-down .c19a557985eb7793-avatar:not(.c19a557985eb7793-compact) {
height: 2.5rem;
inset-inline-start: 1rem;
margin-top: calc(0.25rem - var(--custom-message-spacing-vertical-container-cozy));
width: 2.5rem;
}
.a11y-font-scaled-down .c19a557985eb7793-avatarDecoration:not(.c19a557985eb7793-compact) {
height: calc(2.5rem * var(--decoration-to-avatar-ratio));
inset-inline-start: 0.8rem;
width: calc(2.5rem * var(--decoration-to-avatar-ratio));
}
.c19a557985eb7793-avatar.c19a557985eb7793-clickable {
pointer-events: auto;
}
.full-motion .c19a557985eb7793-avatar.c19a557985eb7793-clickable:hover {
filter: drop-shadow(var(--elevation-medium));
}
.c19a557985eb7793-avatar.c19a557985eb7793-clickable:active,
.c19a557985eb7793-avatar.c19a557985eb7793-clickable:active + .c19a557985eb7793-avatarDecoration {
transform: translateY(1px);
}
.c19a557985eb7793-roleIcon {
-webkit-margin-start: 0.25rem;
height: calc(1rem + 4px);
margin-inline-start: 0.25rem;
position: relative;
top: 1px;
vertical-align: top;
width: calc(1rem + 4px);
}
.c19a557985eb7793-timestamp {
cursor: default;
display: inline-block;
font-weight: var(--font-weight-medium);
height: 1.25rem;
pointer-events: none;
}
.c19a557985eb7793-timestampInline {
-webkit-margin-start: 0.25rem;
margin-inline-start: 0.25rem;
}
.c19a557985eb7793-timestamp.c19a557985eb7793-latin12CompactTimeStamp {
width: 2.25rem;
}
.c19a557985eb7793-timestamp.c19a557985eb7793-latin24CompactTimeStamp {
width: 3.1rem;
}
.c19a557985eb7793-timestamp.c19a557985eb7793-asianCompactTimeStamp {
width: 4.25rem;
}
.mouse-mode .c19a557985eb7793-timestamp {
pointer-events: auto;
}
.c19a557985eb7793-cozy .c19a557985eb7793-timestamp {
color: var(--chat-text-muted);
font-size: 0.75rem;
line-height: 1.375rem;
vertical-align: baseline;
}
.background-opacity-high .c19a557985eb7793-cozy .c19a557985eb7793-timestamp,
.background-opacity-low .c19a557985eb7793-cozy .c19a557985eb7793-timestamp,
.background-opacity-medium .c19a557985eb7793-cozy .c19a557985eb7793-timestamp {
display: none;
}
.c19a557985eb7793-compact .c19a557985eb7793-timestamp,
.c19a557985eb7793-cozy .c19a557985eb7793-timestamp.c19a557985eb7793-alt {
font-size: 0.6875rem;
line-height: 1.375rem;
text-align: end;
-webkit-margin-end: var(--custom-message-meta-space);
color: var(--text-muted);
margin-inline-end: var(--custom-message-meta-space);
text-indent: 0;
}
.c19a557985eb7793-cozy .c19a557985eb7793-timestamp.c19a557985eb7793-alt {
height: 1.375rem;
inset-inline-start: 0;
line-height: 1.375rem;
position: absolute;
text-align: end;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
width: 56px;
z-index: 1;
}
.a11y-font-scaled-down .c19a557985eb7793-cozy .c19a557985eb7793-timestamp.c19a557985eb7793-alt {
width: 3.5rem;
}
.a11y-font-scaled-up .c19a557985eb7793-cozy .c19a557985eb7793-timestamp.c19a557985eb7793-alt {
font-size: 12px;
}
.background-opacity-high .c19a557985eb7793-compact .c19a557985eb7793-timestamp,
.background-opacity-low .c19a557985eb7793-compact .c19a557985eb7793-timestamp,
.background-opacity-medium .c19a557985eb7793-compact .c19a557985eb7793-timestamp {
text-shadow: none;
}
.background-opacity-high .c19a557985eb7793-compact .c19a557985eb7793-timestamp,
.background-opacity-low .c19a557985eb7793-compact .c19a557985eb7793-timestamp,
.background-opacity-medium .c19a557985eb7793-compact .c19a557985eb7793-timestamp {
color: var(--primary-100);
}
.c19a557985eb7793-timestampTooltip {
max-width: none !important;
white-space: nowrap;
}
.c19a557985eb7793-timestampVisibleOnHover {
opacity: 0;
}
.c19a557985eb7793-nitroAuthorBadgeTootip {
max-width: 30vw !important;
white-space: nowrap;
}
.mouse-mode .c19a557985eb7793-wrapper:hover .c19a557985eb7793-timestampVisibleOnHover {
opacity: 1;
}
.keyboard-mode .c19a557985eb7793-wrapper:focus .c19a557985eb7793-timestampVisibleOnHover {
opacity: 1;
}
.c19a557985eb7793-username {
color: var(--text-strong);
display: inline;
flex-shrink: 0;
font-size: 1rem;
font-weight: var(--font-weight-medium);
line-height: 1.375rem;
overflow: hidden;
position: relative;
vertical-align: baseline;
}
.c19a557985eb7793-usernameColorOnName {
}
.c19a557985eb7793-compact .c19a557985eb7793-headerText,
.c19a557985eb7793-cozy .c19a557985eb7793-headerText,
.c19a557985eb7793-roleDot {
-webkit-margin-end: 0.25rem;
margin-inline-end: 0.25rem;
}
.c19a557985eb7793-compact .c19a557985eb7793-headerText.c19a557985eb7793-hasRoleIcon,
.c19a557985eb7793-cozy .c19a557985eb7793-headerText.c19a557985eb7793-hasRoleIcon {
-webkit-margin-end: 0;
margin-inline-end: 0;
}
.c19a557985eb7793-compact .c19a557985eb7793-headerText.c19a557985eb7793-hasRoleIcon.c19a557985eb7793-hasBadges,
.c19a557985eb7793-cozy .c19a557985eb7793-headerText.c19a557985eb7793-hasRoleIcon.c19a557985eb7793-hasBadges {
-webkit-margin-end: 0.25rem;
margin-inline-end: 0.25rem;
}
.c19a557985eb7793-applicationName.c19a557985eb7793-clickable:hover,
.c19a557985eb7793-commandName.c19a557985eb7793-clickable:hover,
.c19a557985eb7793-username.c19a557985eb7793-clickable:hover {
cursor: pointer;
text-decoration: underline;
}
@media (-webkit-max-device-pixel-ratio: 1) {
.theme-light .c19a557985eb7793-username {
font-weight: var(--font-weight-semibold);
}
}
.background-opacity-high .c19a557985eb7793-username,
.background-opacity-low .c19a557985eb7793-username,
.background-opacity-medium .c19a557985eb7793-username {
text-shadow:
0 0 1px var(--primary-700),
1px 1px 0 var(--primary-700);
}
.background-opacity-low .c19a557985eb7793-username,
.background-opacity-medium .c19a557985eb7793-username {
font-weight: var(--font-weight-semibold);
}
.c19a557985eb7793-botTag {
position: relative;
top: 0.1rem;
}
.c19a557985eb7793-botTagCompact {
-webkit-margin-end: 0.25rem;
margin-inline-end: 0.25rem;
}
.c19a557985eb7793-botTagCozy {
-webkit-margin-start: 0.25rem;
margin-inline-start: 0.25rem;
}
.c19a557985eb7793-nitroBadgeSvg {
position: relative;
-webkit-margin-start: 0.2rem;
height: 14px;
margin-inline-start: 0.2rem;
width: 24px;
}
.c19a557985eb7793-nitroBadgeSvgRepliedMessage {
display: flex;
justify-content: center;
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
.c19a557985eb7793-nitroAuthorBadgeContainer {
display: inline-block;
}
.c19a557985eb7793-replyLink {
color: var(--text-default);
}
.c19a557985eb7793-replyLink.c19a557985eb7793-clickable {
cursor: pointer;
}
.c19a557985eb7793-replyLink.c19a557985eb7793-clickable:hover {
text-decoration: underline;
}
.c19a557985eb7793-separator {
display: inline-block;
font-style: normal;
opacity: 0;
position: absolute;
z-index: -1;
}
.c19a557985eb7793-messageEditorCompact {
margin-inline: var(--custom-message-margin-compact-indent) var(--custom-message-margin-horizontal);
}
.c19a557985eb7793-messageContent {
text-indent: 0;
}
.c19a557985eb7793-cozy .c19a557985eb7793-messageContent {
position: relative;
}
.c19a557985eb7793-cozy.c19a557985eb7793-hasThread:after {
-webkit-border-start: 2px solid var(--spine-default);
border-bottom: 2px solid var(--spine-default);
border-end-start-radius: 8px;
border-inline-start: 2px solid var(--spine-default);
bottom: 29px;
content: "";
inset-inline-start: calc(var(--custom-message-margin-horizontal) + var(--chat-avatar-size) / 2 - 1px);
position: absolute;
width: calc(var(--custom-message-margin-left-content-cozy) - var(--custom-message-margin-horizontal) - var(--chat-avatar-size) / 2 - var(--space-4));
}
.font-size-24 .c19a557985eb7793-cozy.c19a557985eb7793-hasThread:after {
top: 2rem;
}
.font-size-20 .c19a557985eb7793-cozy.c19a557985eb7793-hasThread:after {
top: 2.375rem;
}
.font-size-18 .c19a557985eb7793-cozy.c19a557985eb7793-hasThread:after {
top: 2.75rem;
}
.font-size-12 .c19a557985eb7793-cozy.c19a557985eb7793-hasThread:after,
.font-size-14 .c19a557985eb7793-cozy.c19a557985eb7793-hasThread:after,
.font-size-15 .c19a557985eb7793-cozy.c19a557985eb7793-hasThread:after,
.font-size-16 .c19a557985eb7793-cozy.c19a557985eb7793-hasThread:after {
top: 3rem;
}
.font-size-12 .c19a557985eb7793-cozy.c19a557985eb7793-hasThread.c19a557985eb7793-isSystemMessage:after,
.font-size-14 .c19a557985eb7793-cozy.c19a557985eb7793-hasThread.c19a557985eb7793-isSystemMessage:after,
.font-size-15 .c19a557985eb7793-cozy.c19a557985eb7793-hasThread.c19a557985eb7793-isSystemMessage:after,
.font-size-16 .c19a557985eb7793-cozy.c19a557985eb7793-hasThread.c19a557985eb7793-isSystemMessage:after,
.font-size-18 .c19a557985eb7793-cozy.c19a557985eb7793-hasThread.c19a557985eb7793-isSystemMessage:after,
.font-size-20 .c19a557985eb7793-cozy.c19a557985eb7793-hasThread.c19a557985eb7793-isSystemMessage:after,
.font-size-24 .c19a557985eb7793-cozy.c19a557985eb7793-hasThread.c19a557985eb7793-isSystemMessage:after {
top: 1.75rem;
}
.font-size-24 .c19a557985eb7793-cozy.c19a557985eb7793-hasThread.c19a557985eb7793-hasReply:after {
top: 3.25rem;
}
.font-size-20 .c19a557985eb7793-cozy.c19a557985eb7793-hasThread.c19a557985eb7793-hasReply:after {
top: 3.75rem;
}
.font-size-18 .c19a557985eb7793-cozy.c19a557985eb7793-hasThread.c19a557985eb7793-hasReply:after {
top: 4rem;
}
.font-size-15 .c19a557985eb7793-cozy.c19a557985eb7793-hasThread.c19a557985eb7793-hasReply:after,
.font-size-16 .c19a557985eb7793-cozy.c19a557985eb7793-hasThread.c19a557985eb7793-hasReply:after {
top: 4.375rem;
}
.font-size-14 .c19a557985eb7793-cozy.c19a557985eb7793-hasThread.c19a557985eb7793-hasReply:after {
top: 4.5rem;
}
.font-size-12 .c19a557985eb7793-cozy.c19a557985eb7793-hasThread.c19a557985eb7793-hasReply:after {
top: 4.75rem;
}
.c19a557985eb7793-compact .c19a557985eb7793-contents {
position: relative;
}
.c19a557985eb7793-compact.c19a557985eb7793-hasThread .c19a557985eb7793-contents:before {
background-color: var(--background-accent);
bottom: 0;
content: "";
inset-inline-start: 2.5rem;
position: absolute;
top: 1.5rem;
width: 2px;
}
.c19a557985eb7793-compact.c19a557985eb7793-hasThread.c19a557985eb7793-isSystemMessage .c19a557985eb7793-contents:before {
inset-inline-start: 3rem;
top: 1.75rem;
}
.c19a557985eb7793-compact.c19a557985eb7793-hasThread .c19a557985eb7793-contents:before {
background-color: var(--background-mod-subtle);
}
.c19a557985eb7793-zalgo .c19a557985eb7793-messageContent {
overflow: hidden;
}
.c19a557985eb7793-messageContent:empty {
display: none;
}
.c19a557985eb7793-compact .c19a557985eb7793-messageContent {
display: inline;
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
word-wrap: break-word;
}
.c19a557985eb7793-compact .c19a557985eb7793-messageContent .emoji {
position: relative;
}
.c19a557985eb7793-compact .c19a557985eb7793-messageContent .jumboable {
height: var(--custom-emoji-size-emoji);
min-height: var(--custom-emoji-size-emoji);
width: var(--custom-emoji-size-emoji);
}
.c19a557985eb7793-compact .c19a557985eb7793-messageContent.c19a557985eb7793-markupRtl {
display: block;
text-indent: 0;
}
.c19a557985eb7793-cozy .c19a557985eb7793-messageContent {
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
-webkit-margin-start: calc(var(--custom-message-margin-left-content-cozy) * -1);
margin-inline-start: calc(var(--custom-message-margin-left-content-cozy) * -1);
-webkit-padding-start: var(--custom-message-margin-left-content-cozy);
padding-inline-start: var(--custom-message-margin-left-content-cozy);
}
.c19a557985eb7793-isSending {
opacity: 0.5;
}
.c19a557985eb7793-isFailed,
.c19a557985eb7793-isFailed .hljs,
.c19a557985eb7793-isFailed a,
.c19a557985eb7793-isFailed code.inline,
.theme-dark .c19a557985eb7793-isFailed,
.theme-light .c19a557985eb7793-isFailed {
color: var(--status-danger);
}
.theme-dark .c19a557985eb7793-isUnsupported {
color: var(--text-muted);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.c19a557985eb7793-cozy .c19a557985eb7793-markupRtl {
text-align: left;
text-indent: 0;
unicode-bidi: plaintext;
}
.c19a557985eb7793-cozy .c19a557985eb7793-markupBidi {
text-align: start;
unicode-bidi: plaintext;
}
.c19a557985eb7793-edited {
font-size: 0.625rem;
font-weight: var(--font-weight-normal);
line-height: 1;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.c19a557985eb7793-communicationDisabled {
-webkit-margin-end: 8px;
color: var(--status-danger);
margin-inline-end: 8px;
vertical-align: -1px;
}
.c19a557985eb7793-compactCommunicationDisabled {
color: var(--status-danger);
margin: 0 4px;
vertical-align: -1px;
}
.c19a557985eb7793-communicationDisabledOpacity {
opacity: 0.5;
}
.mention {
border-radius: 3px;
padding: 0 2px;
}
.background-opacity-low .c19a557985eb7793-edited {
color: var(--opacity-white-60);
}
.background-opacity-medium .c19a557985eb7793-edited {
color: var(--opacity-white-48);
}
.background-opacity-high .c19a557985eb7793-edited {
color: var(--opacity-white-40);
}
.c19a557985eb7793-badgesContainer {
display: inline-flex;
row-gap: 0.25rem;
-webkit-margin-end: 0.25rem;
align-items: baseline;
margin-inline-end: 0.25rem;
text-indent: 0;
}
.c19a557985eb7793-compact .c19a557985eb7793-badgesContainer {
-webkit-margin-start: -0.25rem;
margin-inline-start: -0.25rem;
}
.c19a557985eb7793-cozy .c19a557985eb7793-badgesContainer {
-webkit-margin-start: 0.25rem;
margin-inline-start: 0.25rem;
}
.c19a557985eb7793-cozy .c19a557985eb7793-pollBadgeDefault,
.c19a557985eb7793-pollBadgeReplied {
margin-block: 0;
margin-inline: 0.25rem 0;
}
.enable-forced-colors .c19a557985eb7793-headerText .c19a557985eb7793-username {
color: ButtonText;
forced-color-adjust: none;
}
._5db79d2513e3728a-nowrap {
white-space: nowrap;
}
.b7556324b2bdb82b-icon {
height: 1em;
margin-bottom: 0.2rem;
vertical-align: middle;
width: 1em;
-webkit-margin-end: var(--space-4);
margin-inline-end: var(--space-4);
}
.b7556324b2bdb82b-name {
overflow: hidden;
text-overflow: ellipsis;
}
.b7556324b2bdb82b-channelWithIcon .b7556324b2bdb82b-iconMentionText {
gap: 0 !important;
}
._3e3b0b1c0f688f9e-flowerStarContainer {
align-items: center;
display: flex;
justify-content: center;
position: relative;
}
._3e3b0b1c0f688f9e-flowerStar {
height: 100%;
width: 100%;
}
._3e3b0b1c0f688f9e-childContainer {
align-items: center;
display: flex;
inset-inline-start: 50%;
justify-content: center;
pointer-events: none;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
._3e3b0b1c0f688f9e-redesignIconChildContainer {
height: 10px;
width: 10px;
}
._09691b0a8e9f4365-background {
height: 16px;
width: 16px;
}
._09691b0a8e9f4365-hubContainer {
align-items: center;
display: flex;
justify-content: center;
position: relative;
}
._09691b0a8e9f4365-verified {
color: var(--green-360);
}
._09691b0a8e9f4365-staff,
._09691b0a8e9f4365-verified {
}
._09691b0a8e9f4365-staff {
color: var(--icon-muted);
}
._09691b0a8e9f4365-partnered {
color: var(--brand-500);
}
._09691b0a8e9f4365-hub {
}
._09691b0a8e9f4365-hub > ._09691b0a8e9f4365-icon > circle {
fill: var(--background-accent);
}
._09691b0a8e9f4365-verifiedHub {
}
._09691b0a8e9f4365-verifiedHub > ._09691b0a8e9f4365-icon > circle {
fill: var(--green-360);
}
._09691b0a8e9f4365-icon {
color: var(--white);
height: 100%;
width: 100%;
}
.f34534e8a5d3ca64-icon {
background-clip: padding-box;
background-color: none;
background-position: 50%;
background-size: 100% 100%;
position: relative;
}
.f34534e8a5d3ca64-icon .f34534e8a5d3ca64-guildIconBadge {
bottom: -2px;
height: 14px;
inset-inline-end: -2px;
position: absolute;
width: 14px;
}
.f34534e8a5d3ca64-iconInactive {
border-radius: 50%;
}
.f34534e8a5d3ca64-iconActiveMini {
border-radius: 6px;
}
.f34534e8a5d3ca64-iconActiveSmaller {
border-radius: 7px;
}
.f34534e8a5d3ca64-iconActiveSmall {
border-radius: 9px;
}
.f34534e8a5d3ca64-iconActiveMedium {
border-radius: 12px;
}
.f34534e8a5d3ca64-iconActiveLarge {
border-radius: 15px;
}
.f34534e8a5d3ca64-iconActiveLarger {
border-radius: 16px;
}
.f34534e8a5d3ca64-iconActiveXLarge {
border-radius: 30px;
}
.f34534e8a5d3ca64-iconSizeSmol {
height: 16px;
width: 16px;
}
.f34534e8a5d3ca64-iconSizeMini {
height: 20px;
width: 20px;
}
.f34534e8a5d3ca64-iconSizeSmaller {
height: 24px;
width: 24px;
}
.f34534e8a5d3ca64-iconSizeSmall {
height: 30px;
width: 30px;
}
.f34534e8a5d3ca64-iconSizeMedium {
height: 40px;
width: 40px;
}
.f34534e8a5d3ca64-iconSizeLarge {
height: 50px;
width: 50px;
}
.f34534e8a5d3ca64-iconSizeLarger {
height: 64px;
width: 64px;
}
.f34534e8a5d3ca64-iconSizeXLarge {
height: 100px;
width: 100px;
}
.f34534e8a5d3ca64-acronym {
overflow: hidden;
white-space: nowrap;
width: 100%;
}
.f34534e8a5d3ca64-noIcon {
background-color: var(--background-base-lower);
color: var(--text-default);
text-align: center;
}
.f34534e8a5d3ca64-noIcon.f34534e8a5d3ca64-iconSizeSmol {
line-height: 16px;
}
.f34534e8a5d3ca64-noIcon.f34534e8a5d3ca64-iconSizeMini {
line-height: 20px;
}
.f34534e8a5d3ca64-noIcon.f34534e8a5d3ca64-iconSizeSmaller {
line-height: 24px;
}
.f34534e8a5d3ca64-noIcon.f34534e8a5d3ca64-iconSizeSmall {
line-height: 30px;
}
.f34534e8a5d3ca64-noIcon.f34534e8a5d3ca64-iconSizeMedium {
line-height: 40px;
}
.f34534e8a5d3ca64-noIcon.f34534e8a5d3ca64-iconSizeLarge {
line-height: 50px;
}
.f34534e8a5d3ca64-noIcon.f34534e8a5d3ca64-iconSizeLarger {
line-height: 64px;
}
.f34534e8a5d3ca64-noIcon.f34534e8a5d3ca64-iconSizeXLarge {
line-height: 100px;
}
.f34534e8a5d3ca64-noAcronym {
background-color: var(--background-mod-subtle);
}
.d2d51d468e9e530f-icon {
display: inline-block;
vertical-align: middle;
-webkit-margin-end: 3px;
margin-inline-end: 3px;
margin-bottom: 0.2rem;
}
.d2d51d468e9e530f-textIcon {
font-size: 0.5rem !important;
height: 1.05rem;
line-height: 1.05rem !important;
width: 1.05rem;
}
.d2d51d468e9e530f-imageIcon {
height: 1em;
width: 1em;
}
.d2d51d468e9e530f-name {
overflow: hidden;
text-overflow: ellipsis;
}
.f61d60ed65f9a128-wrapper {
background: var(--mention-background);
border-radius: 3px;
color: var(--mention-foreground);
font-weight: var(--font-weight-medium);
padding: 0 2px;
unicode-bidi: plaintext;
}
.theme-dark.low-contrast .f61d60ed65f9a128-wrapper {
background: var(--brand-05a);
color: var(--brand-300);
}
.interactive {
cursor: pointer;
transition:
background-color 50ms ease-out,
color 50ms ease-out;
}
.interactive:hover {
background-color: var(--brand-500);
color: var(--white);
}
.c76ab6fa48bd7877-icon {
height: 0.5em;
margin-inline: 4px 2px;
margin-bottom: 1px;
width: 0.5em;
}
._3173ffb22f3c8879-icon {
height: 0.95rem;
position: relative;
width: 0.95rem;
-webkit-padding-start: 4px;
padding-inline-start: 4px;
top: 2px;
}
.b0dfc2ed9c57037d-overflow {
overflow: hidden;
position: relative;
text-overflow: ellipsis;
white-space: nowrap;
}
._2338f50c3988e5ec-svg {
contain: paint;
}
._1bd8ad34c5c2d43f-staticGlow,
._1bd8ad34c5c2d43f-videoContainer {
transform: translate(calc(-50% + 4px), calc(-50% + 4px));
width: 1500px;
z-index: 0;
}
._1bd8ad34c5c2d43f-staticGlow,
._1bd8ad34c5c2d43f-video,
._1bd8ad34c5c2d43f-videoContainer {
inset-inline-start: 50%;
position: absolute;
top: 50%;
}
._1bd8ad34c5c2d43f-video {
transform: translate(-50%, -50%);
width: 100%;
}
._1bd8ad34c5c2d43f-video._1bd8ad34c5c2d43f-hidden {
visibility: hidden;
}
._1bd8ad34c5c2d43f-video._1bd8ad34c5c2d43f-visible {
visibility: visible;
}
._1bd8ad34c5c2d43f-entryAnimationContainer {
animation:
_1bd8ad34c5c2d43f-wowMomentScaleIn 0.4s ease,
_1bd8ad34c5c2d43f-wowMomentScaleSettle 0.4s ease 0.4s;
will-change: transform;
}
@keyframes _1bd8ad34c5c2d43f-wowMomentScaleIn {
0% {
transform: scale(0.5);
}
to {
transform: scale(1.05);
}
}
@keyframes _1bd8ad34c5c2d43f-wowMomentScaleSettle {
0% {
transform: scale(1.05);
}
to {
transform: scale(1);
}
}
._1bd8ad34c5c2d43f-exitAnimationContainer {
animation: _1bd8ad34c5c2d43f-wowMomentExit 175ms ease forwards;
pointer-events: none;
transform: scale(1);
will-change: transform;
}
@keyframes _1bd8ad34c5c2d43f-wowMomentExit {
0% {
opacity: 1;
transform: scale(1);
visibility: visible;
}
to {
opacity: 0;
transform: scale(0.5);
visibility: hidden;
}
}
._1bd8ad34c5c2d43f-staticWumpusWithTrinkets,
._1bd8ad34c5c2d43f-wowAnimation {
height: 1028px;
inset-inline-start: 50%;
pointer-events: none;
position: absolute;
top: 50%;
transform: translate(-50%, calc(-50% - 24px));
width: 1512px;
z-index: 1;
}
.e008772861506b7e-premiumSubscribeButton {
align-items: center;
display: flex;
}
.e008772861506b7e-premiumIcon {
-webkit-margin-end: 4px;
height: 20px;
margin-inline-end: 4px;
}
.e008772861506b7e-buttonText {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.e008772861506b7e-giftButton {
align-items: center;
display: flex;
}
.e008772861506b7e-giftIcon {
height: 16px;
min-height: 16px;
min-width: 16px;
width: 16px;
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
.e008772861506b7e-tier1Gradient {
background: var(--custom-premium-colors-premium-gradient-tier-1);
color: var(--white);
}
.e008772861506b7e-tier2Gradient {
background: var(--custom-premium-colors-premium-gradient-tier-2-tri-color);
color: var(--white);
}
.e008772861506b7e-tier1Gradient,
.e008772861506b7e-tier2Gradient {
background-clip: padding-box;
border-radius: var(--radius-sm);
}
.e008772861506b7e-brandShine {
color: hsl(var(--brand-500-hsl) / 0.1) !important;
}
.af017ab847f75d02-imageWrapper {
border-radius: 3px;
display: block;
overflow: hidden;
position: relative;
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
}
.af017ab847f75d02-clickableWrapper,
.af017ab847f75d02-loadingOverlay {
height: 100%;
width: 100%;
}
.af017ab847f75d02-imageWrapperBackground {
background: var(--opacity-black-4);
}
.af017ab847f75d02-imagePlaceholder {
background: var(--background-gradient-chat, var(--background-base-low));
display: block;
position: absolute;
top: 0;
}
.af017ab847f75d02-imageErrorWrapper {
align-items: center;
display: flex;
justify-content: center;
}
.af017ab847f75d02-imageError {
flex-basis: content;
max-height: 100%;
max-width: 200px;
width: 100%;
}
.af017ab847f75d02-imageLoadingOverlay {
background-color: var(--opacity-black-48);
border-radius: 100%;
box-sizing: border-box;
display: flex;
height: 24px;
inset-inline-end: 0;
margin: 4px;
overflow: hidden;
padding: 3px;
position: absolute;
top: 0;
width: 24px;
}
.af017ab847f75d02-cornerLoadingSpinner {
height: 100%;
opacity: 0.75;
width: 100%;
}
.theme-dark .af017ab847f75d02-cornerLoadingSpinner circle,
.theme-light .af017ab847f75d02-cornerLoadingSpinner circle {
stroke: var(--white);
}
.af017ab847f75d02-imageAccessory {
inset-inline-start: 6px;
position: absolute;
top: 6px;
z-index: 3;
}
.af017ab847f75d02-imageZoom {
cursor: nesw-resize;
cursor: zoom-in;
}
.af017ab847f75d02-clickable {
cursor: pointer;
}
.af017ab847f75d02-originalLink {
inset: 0;
position: absolute;
z-index: 1;
}
.af017ab847f75d02-imageClickable {
border-radius: inherit;
}
.background-opacity-low .af017ab847f75d02-imageWrapper,
.background-opacity-medium .af017ab847f75d02-imageWrapper {
opacity: 0.6;
}
.overlay-unlocked .af017ab847f75d02-imageWrapper {
opacity: 1;
}
.enable-forced-colors .af017ab847f75d02-originalLink {
border: 2px solid ButtonText;
}
.f608190f11a53dac-gifTag {
background-image: url(/assets/9811b405dc8e999f.svg);
height: 22px;
width: 29px;
}
.root,
[data-popout-root],
:root {
--__spoiler-background-color--hidden: var(--spoiler-hidden-background);
--__spoiler-background-color--hidden--hover: var(--spoiler-hidden-background-hover);
--__spoiler-background-color--revealed: var(--background-mod-subtle);
--__spoiler-text-color--hidden: transparent;
--__spoiler-warning-text-color: var(--primary-200);
--__spoiler-warning-text-color--hover: var(--white);
--__spoiler-warning-background-color: var(--opacity-black-60);
--__spoiler-warning-background-color--hover: var(--opacity-black-88);
--__spoiler-container-box-shadow-color: var(--opacity-black-8);
--__obscured-background-blur-radius: 40px;
--__obscured-background-brightness: 0.55;
}
.enable-forced-colors.enable-forced-colors.enable-forced-colors {
--__spoiler-background-color--hidden: ButtonFace;
--__spoiler-background-color--hidden--hover: ButtonFace;
--__spoiler-background-color--revealed: transparent;
--__spoiler-text-color--hidden: ButtonFace;
--__spoiler-border-color--hidden: CanvasText;
--__spoiler-border-color--hidden--hover: ButtonText;
--__spoiler-border-color--revealed: CanvasText;
--__spoiler-warning-text-color: CanvasText;
--__spoiler-warning-text-color--hover: CanvasText;
--__spoiler-warning-background-color: Canvas;
--__spoiler-warning-background-color--hover: Canvas;
--__spoiler-container-box-shadow-color: transparent;
}
._299eb87491f4b6d1-spoilerContent {
--__current--spoiler-content-opacity: 1;
--__current--spoiler-background-color: var(--__spoiler-background-color--revealed);
--__current--spoiler-border-color: var(--__spoiler-border-color--revealed);
--__current--spoiler-pointer-events: all;
}
._299eb87491f4b6d1-spoilerContent._299eb87491f4b6d1-hidden {
--__current--spoiler-content-opacity: 0;
--__current--spoiler-text-color: var(--__spoiler-text-color--hidden);
--__current--spoiler-background-color: var(--__spoiler-background-color--hidden);
--__current--spoiler-border-color: var(--__spoiler-border-color--hidden);
--__current--spoiler-pointer-events: none;
--__current--spoiler-warning-text-color: var(--__spoiler-warning-text-color);
--__current--spoiler-warning-background-color: var(--__spoiler-warning-background-color);
}
._299eb87491f4b6d1-spoilerContent._299eb87491f4b6d1-hidden:hover {
--__current--spoiler-background-color: var(--__spoiler-background-color--hidden--hover);
--__current--spoiler-border-color: var(--__spoiler-border-color--hidden--hover);
--__current--spoiler-warning-text-color: var(--__spoiler-warning-text-color--hover);
--__current--spoiler-warning-background-color: var(--__spoiler-warning-background-color--hover);
}
._299eb87491f4b6d1-spoilerContent._299eb87491f4b6d1-hidden._299eb87491f4b6d1-opaque {
--__obscured-background-brightness: 0;
--__obscured-background-blur-radius: 500px;
}
._299eb87491f4b6d1-spoilerContent._299eb87491f4b6d1-hidden._299eb87491f4b6d1-opaque:hover {
--__current--spoiler-background-color: var(--__spoiler-background-color--hidden);
--__current--spoiler-border-color: var(--__spoiler-border-color--hidden);
--__current--spoiler-warning-text-color: var(--__spoiler-warning-text-color);
--__current--spoiler-warning-background-color: var(--__spoiler-warning-background-color);
}
._299eb87491f4b6d1-spoilerContainer {
background-color: var(--__current--spoiler-background-color);
filter: blur(0);
position: relative;
}
._299eb87491f4b6d1-spoilerContainer._299eb87491f4b6d1-embedContainer {
border-radius: var(--radius-xs);
}
._299eb87491f4b6d1-spoilerContainer._299eb87491f4b6d1-attachmentContainer {
border-radius: var(--radius-sm);
}
._299eb87491f4b6d1-spoilerContainer._299eb87491f4b6d1-hiddenSpoiler {
cursor: pointer;
}
._299eb87491f4b6d1-spoilerContainer._299eb87491f4b6d1-hidden {
overflow: hidden;
}
._299eb87491f4b6d1-spoilerContainer._299eb87491f4b6d1-hidden article {
background-color: var(--__current--spoiler-background-color);
border-color: var(--__current--spoiler-background-color);
}
._299eb87491f4b6d1-spoilerContainer._299eb87491f4b6d1-hidden:not(:focus) {
box-shadow: 0.5px 0.5px 1px 1px var(--__spoiler-container-box-shadow-color);
}
.enable-forced-colors ._299eb87491f4b6d1-spoilerContainer {
border: 1px solid var(--__current--spoiler-border-color);
}
.enable-forced-colors ._299eb87491f4b6d1-spoilerContainer article {
border-color: var(--__current--spoiler-border-color);
}
._299eb87491f4b6d1-spoilerInnerContainer {
height: 100%;
width: 100%;
}
._299eb87491f4b6d1-obscureWarning {
align-items: center;
color: var(--__current--spoiler-warning-text-color);
display: flex;
flex-direction: column;
inset-inline-start: 50%;
padding: 8px 12px;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
z-index: 1;
}
._299eb87491f4b6d1-constrainedObscureContent {
align-items: center;
display: flex;
justify-content: center;
min-height: 212px;
min-width: 146px;
}
._299eb87491f4b6d1-explicitContentWarning {
text-align: center;
width: 100%;
}
._299eb87491f4b6d1-explicitContentWarningText {
margin-top: var(--space-4);
}
._299eb87491f4b6d1-spoilerWarning {
background-color: var(--__current--spoiler-warning-background-color);
border-radius: 20px;
cursor: pointer;
font-size: 15px;
font-weight: var(--font-weight-semibold);
letter-spacing: 0.5px;
text-transform: uppercase;
}
._299eb87491f4b6d1-spoilerWarning._299eb87491f4b6d1-embed {
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
._299eb87491f4b6d1-spoilerMarkdownContent {
background-color: var(--__current--spoiler-background-color);
border-radius: var(--radius-xs);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
transition: background-color 0.2s ease;
}
._299eb87491f4b6d1-spoilerMarkdownContent._299eb87491f4b6d1-hidden {
cursor: pointer;
}
._299eb87491f4b6d1-spoilerMarkdownContent._299eb87491f4b6d1-hidden ._299eb87491f4b6d1-obscuredBlockContent,
._299eb87491f4b6d1-spoilerMarkdownContent._299eb87491f4b6d1-hidden ._299eb87491f4b6d1-obscuredTextContent {
cursor: pointer;
pointer-events: none;
}
.enable-forced-colors ._299eb87491f4b6d1-obscuredTextContent {
border: 1px solid var(--__current--spoiler-border-color);
border-radius: var(--radius-xs);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
padding: 0 2px;
}
._299eb87491f4b6d1-obscuredTextContentInner {
color: var(--__current--spoiler-text-color);
}
._299eb87491f4b6d1-obscuredTextContentInner code,
._299eb87491f4b6d1-obscuredTextContentInner span {
opacity: var(--__current--spoiler-content-opacity);
transition: opacity 0.1s ease;
}
.enable-forced-colors ._299eb87491f4b6d1-spoilerMarkdownContent a {
background-color: var(--__current--spoiler-background-color);
}
._299eb87491f4b6d1-spoilerMarkdownContent blockquote {
color: var(--__current--spoiler-text-color);
pointer-events: all;
position: relative;
}
._299eb87491f4b6d1-spoilerMarkdownContent blockquote:before {
background-color: var(--__current--spoiler-background-color);
border-radius: var(--radius-xs);
content: "";
height: 100%;
inset-inline-start: 0;
position: absolute;
width: 100%;
}
.enable-forced-colors ._299eb87491f4b6d1-spoilerMarkdownContent blockquote:before {
border: 1px solid var(--__current--spoiler-border-color);
}
._299eb87491f4b6d1-spoilerMarkdownContent pre {
pointer-events: all;
position: relative;
}
._299eb87491f4b6d1-spoilerMarkdownContent pre:before {
background-color: var(--__current--spoiler-background-color);
border-radius: var(--radius-xs);
color: var(--__current--spoiler-text-color);
content: "";
height: 100%;
position: absolute;
width: 100%;
}
.enable-forced-colors ._299eb87491f4b6d1-spoilerMarkdownContent pre:before {
border: 1px solid var(--__current--spoiler-border-color);
}
._299eb87491f4b6d1-spoilerMarkdownContent pre code {
opacity: var(--__current--spoiler-content-opacity);
}
._299eb87491f4b6d1-spoilerMarkdownContent ol li::marker,
._299eb87491f4b6d1-spoilerMarkdownContent ul li::marker {
color: var(--text-default);
}
._299eb87491f4b6d1-spoilerMarkdownContent h1 > span,
._299eb87491f4b6d1-spoilerMarkdownContent h2 > span,
._299eb87491f4b6d1-spoilerMarkdownContent h3 > span,
._299eb87491f4b6d1-spoilerMarkdownContent h4 > span,
._299eb87491f4b6d1-spoilerMarkdownContent h5 > span,
._299eb87491f4b6d1-spoilerMarkdownContent ol li > span,
._299eb87491f4b6d1-spoilerMarkdownContent small > span,
._299eb87491f4b6d1-spoilerMarkdownContent ul li > span {
background: var(--__current--spoiler-background-color);
border-radius: var(--radius-xs);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
color: var(--__current--spoiler-text-color) !important;
opacity: 1 !important;
pointer-events: all;
}
.enable-forced-colors ._299eb87491f4b6d1-spoilerMarkdownContent h1 > span,
.enable-forced-colors ._299eb87491f4b6d1-spoilerMarkdownContent h2 > span,
.enable-forced-colors ._299eb87491f4b6d1-spoilerMarkdownContent h3 > span,
.enable-forced-colors ._299eb87491f4b6d1-spoilerMarkdownContent h4 > span,
.enable-forced-colors ._299eb87491f4b6d1-spoilerMarkdownContent h5 > span,
.enable-forced-colors ._299eb87491f4b6d1-spoilerMarkdownContent ol li > span,
.enable-forced-colors ._299eb87491f4b6d1-spoilerMarkdownContent small > span,
.enable-forced-colors ._299eb87491f4b6d1-spoilerMarkdownContent ul li > span {
border: 1px solid var(--__current--spoiler-border-color);
}
._299eb87491f4b6d1-spoilerMarkdownContent h1 > span > *,
._299eb87491f4b6d1-spoilerMarkdownContent h2 > span > *,
._299eb87491f4b6d1-spoilerMarkdownContent h3 > span > *,
._299eb87491f4b6d1-spoilerMarkdownContent h4 > span > *,
._299eb87491f4b6d1-spoilerMarkdownContent h5 > span > *,
._299eb87491f4b6d1-spoilerMarkdownContent ol li > span > *,
._299eb87491f4b6d1-spoilerMarkdownContent small > span > *,
._299eb87491f4b6d1-spoilerMarkdownContent ul li > span > * {
pointer-events: var(--__current--spoiler-pointer-events);
}
._299eb87491f4b6d1-obscureButtonContainer {
bottom: var(--space-4);
inset-inline-end: var(--space-4);
position: absolute;
transition: bottom 0.2s ease-in-out;
z-index: 1;
}
._299eb87491f4b6d1-obscureHoverButton {
background-color: rgba(0, 0, 0, 0.6);
border-radius: var(--radius-sm);
color: var(--white);
cursor: pointer;
display: flex;
padding: var(--space-4);
transition: background-color 0.2s ease-in-out;
}
._299eb87491f4b6d1-obscureHoverButton:hover {
background-color: rgba(0, 0, 0, 0.8);
transition: background-color 0.2s ease-in-out;
}
._299eb87491f4b6d1-obscureHoverButton:focus {
background-color: #000;
transition: background-color 0.2s ease-in-out;
}
._299eb87491f4b6d1-obscureHoverButton:active {
background-color: var(--background-secondary-alt);
transition: background-color 0.2s ease-in-out;
}
.ed6d695805ee52bf-singleItemWrapper {
width: 100%;
}
.ed6d695805ee52bf-carousel,
.ed6d695805ee52bf-singleItemWrapper {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.ed6d695805ee52bf-carousel {
display: flex;
position: relative;
}
.ed6d695805ee52bf-item {
flex: 1 0 100%;
}
.ed6d695805ee52bf-singleItem {
margin: 0 auto;
}
.ed6d695805ee52bf-viewport {
overflow: hidden;
}
@keyframes _5cd4440e78ca4a65-fadeIn {
0% {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes _5cd4440e78ca4a65-fadeOut {
0% {
opacity: 1;
}
to {
opacity: 0;
}
}
._5cd4440e78ca4a65-base {
animation: _5cd4440e78ca4a65-fadeIn 0.15s ease-out 50ms forwards;
opacity: 0;
}
._5cd4440e78ca4a65-base._5cd4440e78ca4a65-hidden:not(._5cd4440e78ca4a65-focusSensitive:focus-within) {
animation: _5cd4440e78ca4a65-fadeOut 0.15s ease-out forwards;
pointer-events: none;
}
.e035781d3e5b07da-horizontal {
grid-column: 1 / span 5;
grid-row: 2;
margin: 24px;
}
.e035781d3e5b07da-vertical {
grid-column: 3;
grid-row: 1 / span 3;
margin: 24px;
}
.e035781d3e5b07da-mediaArea {
grid-column: 1 / span 5;
grid-row: 1 / span 3;
place-self: center;
}
.full-motion ._5fbe9ab318b84d16-transition {
transition: transform 0.2s ease;
}
._5fbe9ab318b84d16-directionDown {
transform: rotate3d(0, 0, -1, 0deg);
}
._5fbe9ab318b84d16-directionRight {
transform: rotate3d(0, 0, -1, 90deg);
}
._5fbe9ab318b84d16-directionLeft {
transform: rotate3d(0, 0, -1, -90deg);
}
._5fbe9ab318b84d16-directionUp {
transform: rotate3d(0, 0, -1, 180deg);
}
.f1ceaca61b18918e-controlIcon {
color: var(--interactive-text-default);
display: flex;
height: 24px;
width: 24px;
}
.f1ceaca61b18918e-controlIcon.f1ceaca61b18918e-active,
.f1ceaca61b18918e-controlIcon:hover {
color: var(--interactive-text-active);
}
.f1ceaca61b18918e-controlIcon.f1ceaca61b18918e-themeable {
color: var(--interactive-text-default);
}
.f1ceaca61b18918e-controlIcon.f1ceaca61b18918e-themeable.f1ceaca61b18918e-active,
.f1ceaca61b18918e-controlIcon.f1ceaca61b18918e-themeable:hover {
color: var(--interactive-text-active);
}
.f1ceaca61b18918e-centerIcon {
color: var(--interactive-text-default);
display: flex;
height: 20px;
width: 20px;
}
.f1ceaca61b18918e-centerIcon.f1ceaca61b18918e-active,
.f1ceaca61b18918e-centerIcon:hover {
color: var(--interactive-text-active);
}
.f1ceaca61b18918e-centerIcon.f1ceaca61b18918e-themeable {
color: var(--interactive-text-default);
}
.f1ceaca61b18918e-centerIcon.f1ceaca61b18918e-themeable.f1ceaca61b18918e-active,
.f1ceaca61b18918e-centerIcon.f1ceaca61b18918e-themeable:hover {
color: var(--interactive-text-active);
}
.f1ceaca61b18918e-colorable {
transition:
background-color 50ms ease-in,
color 50ms ease-in,
border-color 50ms ease-in,
opacity 50ms ease-in;
}
.f1ceaca61b18918e-colorable:hover {
transition:
background-color 0.15s ease-out,
color 0.15s ease-out,
border-color 0.15s ease-out,
opacity 0.15s ease-out;
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-red,
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-red .f1ceaca61b18918e-centerIcon {
color: var(--red-400);
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-red.f1ceaca61b18918e-active,
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-red:hover {
background: hsla(0, 0%, 100%, 0.1);
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-disconnect {
background: var(--control-critical-primary-background-default);
transition: background 0.15s ease-in-out;
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-disconnect,
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-disconnect .f1ceaca61b18918e-centerIcon {
color: var(--control-critical-primary-text-default);
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-disconnect:hover {
background: var(--control-critical-primary-background-hover);
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-disconnect:active {
background: var(--control-critical-primary-background-active);
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-redGlow {
background: var(--opacity-red-12);
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-redGlow,
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-redGlow .f1ceaca61b18918e-centerIcon {
color: var(--red-400);
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-redGlow:active {
background: var(--opacity-red-24);
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-redGlow.f1ceaca61b18918e-popoutOpen,
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-redGlow:hover {
background: var(--opacity-red-16);
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-primaryLight {
background: var(--primary-130);
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-primaryLight,
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-primaryLight .f1ceaca61b18918e-centerIcon {
color: var(--primary-860);
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-primaryLight.f1ceaca61b18918e-active,
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-primaryLight:hover {
background: var(--primary-230);
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-white {
background: var(--white);
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-white,
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-white .f1ceaca61b18918e-centerIcon {
color: var(--primary-860);
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-white.f1ceaca61b18918e-active,
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-white:hover {
background: var(--primary-130);
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-green {
background: var(--green-360);
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-green,
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-green .f1ceaca61b18918e-centerIcon {
color: var(--white);
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-green.f1ceaca61b18918e-active,
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-green:hover,
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-join {
background: var(--green-360);
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-join,
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-join .f1ceaca61b18918e-centerIcon {
color: var(--white);
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-join.f1ceaca61b18918e-active,
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-join:hover {
background: var(--green-360);
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-greenGlow {
background: var(--opacity-green-12);
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-greenGlow,
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-greenGlow .f1ceaca61b18918e-centerIcon {
color: var(--green-300);
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-greenGlow:active {
background: var(--opacity-green-36);
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-greenGlow.f1ceaca61b18918e-popoutOpen,
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-greenGlow:hover {
background: var(--opacity-green-24);
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-premiumGradient {
background: linear-gradient(to right, var(--premium-tier-2-purple-for-gradients), var(--premium-tier-2-purple-for-gradients-2), var(--premium-tier-2-pink-for-gradients));
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-premiumGradient,
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-premiumGradient .f1ceaca61b18918e-centerIcon {
color: var(--white);
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-yellow {
background: var(--yellow-400);
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-yellow,
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-yellow .f1ceaca61b18918e-centerIcon {
color: var(--white);
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-yellow.f1ceaca61b18918e-active,
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-yellow:hover {
background: var(--yellow-530);
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-primaryDark,
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-primaryDark .f1ceaca61b18918e-centerIcon {
color: var(--white);
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-primaryDark.f1ceaca61b18918e-active:not(.f1ceaca61b18918e-disabled),
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-primaryDark:hover:not(.f1ceaca61b18918e-disabled) {
background: hsla(0, 0%, 100%, 0.1);
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-activeLight {
background: var(--white);
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-activeLight,
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-activeLight .f1ceaca61b18918e-centerIcon {
color: var(--primary-860);
}
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-activeLight.f1ceaca61b18918e-active:not(.f1ceaca61b18918e-disabled),
.f1ceaca61b18918e-colorable.f1ceaca61b18918e-activeLight:hover:not(.f1ceaca61b18918e-disabled) {
background: var(--primary-230);
}
.f1ceaca61b18918e-buttonInnerWithText {
align-items: center;
display: flex;
gap: 4px;
}
.f1ceaca61b18918e-centerButton {
border-radius: 8px;
padding: 10px;
position: static;
transition:
background 0.15s ease-in-out,
color 0.15s ease-in-out;
}
.f1ceaca61b18918e-centerButton .f1ceaca61b18918e-centerIcon {
transition: color 0.15s ease-in-out;
}
.f1ceaca61b18918e-attachedButton {
border-radius: 8px 0 0 8px;
}
.f1ceaca61b18918e-fullRegionButton,
.f1ceaca61b18918e-fullRegionDropdownButton {
border: 1px solid var(--border-muted);
border-radius: 12px;
}
.f1ceaca61b18918e-fullRegionDropdownButton {
align-items: center;
display: flex;
justify-content: center;
padding: 4px;
}
.f1ceaca61b18918e-fullRegionDropdownButton.f1ceaca61b18918e-green,
.f1ceaca61b18918e-fullRegionDropdownButton.f1ceaca61b18918e-join {
background-color: var(--green-360);
}
.f1ceaca61b18918e-fullRegionDropdownButton.f1ceaca61b18918e-disconnect {
background-color: var(--control-critical-primary-background-default);
}
.f1ceaca61b18918e-fullRegionIcon {
padding: 4px 12px;
}
.f1ceaca61b18918e-buttonPremiumGlow {
filter: drop-shadow(0 0 12px #a944b0) drop-shadow(0 0 12px #a944b0);
}
@media (max-width: 456px) {
.f1ceaca61b18918e-centerButton {
padding: 8px;
}
.f1ceaca61b18918e-contextMenuContainer {
display: none;
}
}
@media (min-width: 457px) {
.f1ceaca61b18918e-unmasked {
display: none;
}
}
.f1ceaca61b18918e-lineHeightReset {
line-height: 0;
}
.f1ceaca61b18918e-contextMenuContainer {
position: relative;
}
.f1ceaca61b18918e-attachedCaretButtonContainer {
align-items: center;
direction: row;
display: flex;
}
.f1ceaca61b18918e-attachedCaretButtonContainer.f1ceaca61b18918e-popoutOpen .f1ceaca61b18918e-primaryDark,
.f1ceaca61b18918e-attachedCaretButtonContainer:hover .f1ceaca61b18918e-primaryDark {
background-color: var(--background-mod-muted);
}
.f1ceaca61b18918e-attachedCaretButtonContainer.f1ceaca61b18918e-disabled {
background-color: transparent !important;
color: var(--interactive-muted) !important;
cursor: not-allowed !important;
pointer-events: none;
}
.f1ceaca61b18918e-attachedCaretButtonContainer.f1ceaca61b18918e-disabled:hover {
background-color: transparent !important;
}
.f1ceaca61b18918e-contextMenuNub {
align-items: center;
border-radius: 8px;
cursor: pointer;
display: flex;
height: 20px;
justify-content: center;
padding: 10px 2px;
transition:
background 0.15s ease-in-out,
color 0.15s ease-in-out;
width: 20px;
}
.f1ceaca61b18918e-contextMenuNub.f1ceaca61b18918e-disabled {
cursor: not-allowed;
}
.f1ceaca61b18918e-contextMenuNub.f1ceaca61b18918e-attachedCaret {
border-radius: 0 8px 8px 0;
padding: 10px 0;
-webkit-margin-start: 1px;
margin-inline-start: 1px;
}
.f1ceaca61b18918e-contextMenuCaret {
cursor: pointer;
height: 16px;
transition: none;
width: 16px;
}
.f1ceaca61b18918e-contextMenuCaret.f1ceaca61b18918e-disabled {
color: var(--interactive-text-default) !important;
cursor: not-allowed;
}
.f1ceaca61b18918e-contextMenuCaret.f1ceaca61b18918e-open {
transform: rotateX(180deg);
}
.enable-forced-colors .f1ceaca61b18918e-contextMenuNub,
.enable-forced-colors .f1ceaca61b18918e-contextMenuNub:hover {
background-color: ButtonFace;
border: 1px solid Canvas;
color: ButtonText;
}
.enable-forced-colors .f1ceaca61b18918e-contextMenuNub.f1ceaca61b18918e-active {
background-color: HighlightText;
border-color: Highlight;
color: Highlight;
}
.f1ceaca61b18918e-buttonMask {
height: inherit;
width: inherit;
}
.f1ceaca61b18918e-glow {
height: 190%;
inset-inline-start: 50%;
opacity: 1;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 190%;
}
.f1ceaca61b18918e-glow,
.f1ceaca61b18918e-glowVideo {
pointer-events: none;
}
.f1ceaca61b18918e-glowVideo {
height: 100%;
object-fit: fill;
width: 100%;
}
.b26b790fd1005393-mediaBarInteraction,
.b26b790fd1005393-mediaBarInteractionDragging {
align-items: center;
align-self: stretch;
cursor: pointer;
display: flex;
flex: 1 1 auto;
margin: 0 7px;
position: relative;
}
.b26b790fd1005393-mediaBarInteraction:hover .b26b790fd1005393-mediaBarWrapper,
.b26b790fd1005393-mediaBarInteractionDragging:hover .b26b790fd1005393-mediaBarWrapper {
box-shadow: 0 1px 1px var(--opacity-black-28);
}
.b26b790fd1005393-mediaBarInteraction:hover .b26b790fd1005393-bubble,
.b26b790fd1005393-mediaBarInteractionDragging:hover .b26b790fd1005393-bubble {
opacity: 1;
}
.b26b790fd1005393-mediaBarInteraction:hover .b26b790fd1005393-mediaBarGrabber {
background-color: var(--brand-560);
transform: scale(1);
}
.b26b790fd1005393-mediaBarInteraction:hover .b26b790fd1005393-mediaBarPreview {
opacity: 0.3;
}
.b26b790fd1005393-mediaBarInteraction:hover .b26b790fd1005393-bubble,
.b26b790fd1005393-mediaBarInteractionDragging .b26b790fd1005393-bubble {
opacity: 1;
}
.b26b790fd1005393-mediaBarInteractionDragging .b26b790fd1005393-mediaBarGrabber {
background-color: var(--brand-560);
transform: scale(1);
}
.b26b790fd1005393-mediaBarInteractionVolume {
align-self: center;
background-color: var(--opacity-black-68);
border-radius: 8px;
flex: none;
margin-block: 0;
margin-inline: 0 4px;
padding: 4px 8px;
width: 72px;
}
.b26b790fd1005393-vertical {
align-items: center;
display: flex;
height: 54px;
transform: rotate(-90deg);
transform-origin: top;
width: 140px;
}
.b26b790fd1005393-horizontal {
align-self: stretch;
display: flex;
width: 100%;
}
.b26b790fd1005393-fakeEdges {
position: relative;
}
.b26b790fd1005393-fakeEdges:after,
.b26b790fd1005393-fakeEdges:before {
content: "";
height: 100%;
position: absolute;
top: 0;
width: 3px;
z-index: 1;
}
.b26b790fd1005393-fakeEdges:before {
border-radius: 3px 0 0 3px;
inset-inline-start: -3px;
}
.b26b790fd1005393-fakeEdges:after {
border-radius: 0 3px 3px 0;
inset-inline-end: -3px;
}
.b26b790fd1005393-buffer {
height: 100%;
inset-inline-start: 0;
opacity: 0.3;
position: absolute;
top: 0;
}
.b26b790fd1005393-buffer,
.b26b790fd1005393-buffer:after,
.b26b790fd1005393-buffer:before {
background-color: var(--white);
}
.b26b790fd1005393-mediaBarWrapper {
flex: 1 1 auto;
height: 6px;
position: relative;
}
.b26b790fd1005393-mediaBarWrapper,
.b26b790fd1005393-mediaBarWrapper:after,
.b26b790fd1005393-mediaBarWrapper:before {
background-color: hsl(var(--primary-300-hsl) / 0.3);
}
.b26b790fd1005393-mediaBarWrapperVolume {
display: flex;
flex: none;
justify-content: center;
width: 72px;
}
.b26b790fd1005393-mediaBarPreview,
.b26b790fd1005393-mediaBarProgress {
height: 100%;
inset-inline-start: 0;
position: absolute;
top: 0;
}
.b26b790fd1005393-mediaBarPreview,
.b26b790fd1005393-mediaBarProgress {
}
.b26b790fd1005393-mediaBarPreview {
opacity: 0;
z-index: 0;
}
.b26b790fd1005393-mediaBarPreview,
.b26b790fd1005393-mediaBarPreview:after,
.b26b790fd1005393-mediaBarPreview:before {
background-color: var(--white);
}
.b26b790fd1005393-mediaBarProgress {
z-index: 3;
}
.b26b790fd1005393-mediaBarGrabber,
.b26b790fd1005393-mediaBarProgress,
.b26b790fd1005393-mediaBarProgress:after,
.b26b790fd1005393-mediaBarProgress:before {
background-color: var(--brand-500);
}
.b26b790fd1005393-mediaBarGrabber {
border-radius: 5px;
height: 10px;
inset-inline-end: 0;
margin-top: -5px;
position: absolute;
top: 50%;
width: 10px;
z-index: 2;
-webkit-margin-end: -5px;
cursor: grab;
margin-inline-end: -5px;
transform: scale(0);
transform-origin: 50% 50%;
}
.full-motion .b26b790fd1005393-mediaBarGrabber {
transition:
transform 0.25s ease-in-out,
background-color 0.25s linear;
}
.b26b790fd1005393-bubble {
background-color: var(--black);
border-radius: 3px;
color: var(--primary-100);
font-size: 12px;
font-weight: var(--font-weight-semibold);
height: 18px;
line-height: 18px;
opacity: 0;
padding: 0 8px;
text-align: center;
top: -28px;
transform: translateX(-50%);
transition: opacity 0.2s ease-out;
width: auto;
}
.b26b790fd1005393-bubble,
.b26b790fd1005393-bubble:before {
pointer-events: none;
position: absolute;
}
.b26b790fd1005393-bubble:before {
content: " ";
height: 0;
inset-inline-start: 50%;
top: 100%;
width: 0;
-webkit-margin-start: -5px;
border: 5px solid transparent;
border-top: 5px solid var(--black);
margin-inline-start: -5px;
}
.enable-forced-colors .b26b790fd1005393-mediaBarGrabber,
.enable-forced-colors .b26b790fd1005393-mediaBarProgress {
background-color: ButtonText !important;
}
.enable-forced-colors .b26b790fd1005393-mediaBarInteractionVolume {
background-color: ButtonFace;
}
._6eb54599f66932b1-cover {
align-items: center;
display: flex;
inset: 0;
justify-content: center;
pointer-events: none;
position: absolute;
}
._6eb54599f66932b1-cover._6eb54599f66932b1-active {
cursor: pointer;
pointer-events: auto;
}
._6eb54599f66932b1-cover._6eb54599f66932b1-active:hover ._6eb54599f66932b1-iconWrapper {
opacity: 0.8;
}
._6eb54599f66932b1-cover._6eb54599f66932b1-active:active ._6eb54599f66932b1-iconWrapper {
transform: translateY(1px);
}
._6eb54599f66932b1-iconWrapper {
background-color: var(--black);
border-radius: 24px;
color: var(--white);
opacity: 0.6;
padding: 12px;
transition:
opacity 0.25s,
color 0.25s;
}
._6eb54599f66932b1-icon {
display: block;
height: 24px;
margin-inline: 1px -1px;
width: 24px;
}
.enable-forced-colors ._6eb54599f66932b1-iconWrapper {
background-color: ButtonFace;
color: ButtonText;
opacity: 1;
}
._926d764ff4a9f4d6-wrapper {
background-color: var(--opacity-black-60);
border-radius: 24px;
box-sizing: border-box;
color: var(--white);
display: flex;
flex: 0 0 auto;
height: 48px;
padding: 12px;
pointer-events: none;
}
._926d764ff4a9f4d6-wrapper a:link,
._926d764ff4a9f4d6-wrapper a:visited {
color: var(--white) !important;
cursor: pointer;
display: block;
pointer-events: auto;
}
._926d764ff4a9f4d6-iconWrapper {
align-items: center;
cursor: pointer;
display: flex;
flex: 0 0 auto;
opacity: 0.6;
pointer-events: auto;
transition:
opacity 0.25s,
color 0.25s;
}
._926d764ff4a9f4d6-disableInteractions ._926d764ff4a9f4d6-iconWrapper,
._926d764ff4a9f4d6-disableInteractions a:link,
._926d764ff4a9f4d6-disableInteractions a:visited {
pointer-events: none;
}
._926d764ff4a9f4d6-iconWrapperActive {
}
._926d764ff4a9f4d6-iconWrapperActive:hover {
opacity: 1;
}
._926d764ff4a9f4d6-iconWrapperActive:active {
transform: translateY(1px);
}
._926d764ff4a9f4d6-text {
font-size: 16px;
-webkit-padding-start: 4px;
padding-inline-start: 4px;
}
._926d764ff4a9f4d6-icon {
display: block;
height: 24px;
width: 24px;
}
._926d764ff4a9f4d6-iconPlay {
margin-inline: 1px -1px;
}
._926d764ff4a9f4d6-iconExternal,
._926d764ff4a9f4d6-iconExternalMargins,
._926d764ff4a9f4d6-iconPlay {
}
._926d764ff4a9f4d6-iconExternalMargins {
margin-inline: 2px 4px;
}
.enable-forced-colors ._926d764ff4a9f4d6-iconWrapper {
background-color: ButtonFace;
color: ButtonText;
opacity: 1;
}
._1219faca43c9a84e-statsOverlay {
background-color: var(--opacity-black-72);
border-radius: 8px;
color: var(--text-default);
display: flex;
flex-direction: column;
font-size: 14px;
inset-inline-start: 8px;
line-height: 18px;
padding: 8px;
pointer-events: auto;
position: absolute;
top: 8px;
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
z-index: 100;
}
._1219faca43c9a84e-header {
align-items: center;
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
._1219faca43c9a84e-title {
font-size: 16px;
font-weight: var(--font-weight-bold);
}
._1219faca43c9a84e-headerButtons {
align-items: center;
display: flex;
gap: 4px;
}
._1219faca43c9a84e-closeButton,
._1219faca43c9a84e-copyButton {
align-items: center;
border-radius: 4px;
color: var(--interactive-text-default);
cursor: pointer;
display: flex;
height: 24px;
justify-content: center;
width: 24px;
}
.full-motion ._1219faca43c9a84e-closeButton,
.full-motion ._1219faca43c9a84e-copyButton {
transition: all 0.1s ease;
}
._1219faca43c9a84e-closeButton:hover,
._1219faca43c9a84e-copyButton:hover {
background-color: var(--custom-opacity-white-10);
color: var(--interactive-text-hover);
}
.full-motion ._1219faca43c9a84e-closeButton:active,
.full-motion ._1219faca43c9a84e-copyButton:active {
background-color: var(--custom-opacity-white-15);
transform: translateY(1px);
}
._1219faca43c9a84e-closeButton:active,
._1219faca43c9a84e-copyButton:active {
background-color: var(--custom-opacity-white-15);
}
._1219faca43c9a84e-content {
display: flex;
flex-direction: column;
}
._1219faca43c9a84e-statRow {
display: flex;
justify-content: space-between;
margin-bottom: 4px;
}
._1219faca43c9a84e-statRow span {
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
._1219faca43c9a84e-statLabel {
font-size: 14px;
line-height: 18px;
}
._1219faca43c9a84e-statValue {
font-weight: var(--font-weight-bold);
text-align: end;
word-break: break-all;
}
._1219faca43c9a84e-errorSection {
background-color: var(--custom-opacity-red-8);
-webkit-border-start: 3px solid var(--status-danger);
border-inline-start: 3px solid var(--status-danger);
border-radius: 3px;
margin-top: 4px;
padding: 6px 8px;
}
._1219faca43c9a84e-errorSection ._1219faca43c9a84e-statLabel,
._1219faca43c9a84e-errorSection ._1219faca43c9a84e-statValue {
color: var(--status-danger);
}
._2d263e93fa75ef4c-container {
align-items: center;
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
}
._2d263e93fa75ef4c-volumeButton {
cursor: pointer;
line-height: 0;
}
._2d263e93fa75ef4c-volumeButtonSlider {
bottom: calc(100% + 16px);
display: none;
inset-inline: -78px 0;
position: absolute;
-webkit-app-region: no-drag;
pointer-events: none;
}
._2d263e93fa75ef4c-volumeButtonSlider > div {
overflow: hidden;
pointer-events: auto;
}
._2d263e93fa75ef4c-volumeButtonSlider._2d263e93fa75ef4c-sliderVisible {
display: initial;
}
.cf09d85aafe7e124-wrapper {
background-color: var(--background-base-lower);
border-radius: 3px;
color: var(--white);
overflow: hidden;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.cf09d85aafe7e124-wrapperAudio,
.cf09d85aafe7e124-wrapperControlsHidden,
.cf09d85aafe7e124-wrapperPaused,
.cf09d85aafe7e124-wrapperPlaying {
}
.cf09d85aafe7e124-wrapperAudio {
background-color: var(--background-surface-high);
}
.cf09d85aafe7e124-wrapperMediaMosaic {
height: 100%;
max-height: inherit;
width: 100%;
}
.cf09d85aafe7e124-wrapperControlsHidden {
cursor: default;
}
.cf09d85aafe7e124-wrapperAudio {
background-color: var(--background-base-lower);
border-color: var(--border-subtle);
border-style: solid;
border-width: 1px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
max-width: 100%;
overflow: visible;
padding: 10px;
}
.cf09d85aafe7e124-wrapperAudio.cf09d85aafe7e124-newMosaicStyle {
border-radius: 8px;
padding: 16px;
width: 432px;
}
.cf09d85aafe7e124-videoControls {
background-color: var(--opacity-black-60);
inset-inline: 0;
bottom: -10px;
height: 32px;
padding-bottom: 10px;
position: absolute;
}
.cf09d85aafe7e124-audioControls,
.cf09d85aafe7e124-videoControls {
align-items: center;
display: flex;
width: 100%;
}
.cf09d85aafe7e124-audioControls {
background-color: var(--opacity-black-40);
border-radius: var(--radius-sm);
margin-top: 4px;
}
.cf09d85aafe7e124-controlIcon {
color: var(--interactive-text-default);
cursor: pointer;
display: block;
flex: 0 0 auto;
height: 24px;
padding: 4px;
width: 24px;
}
.cf09d85aafe7e124-controlIcon:hover {
color: var(--interactive-text-active);
}
.cf09d85aafe7e124-controlIcon:active {
transform: translateY(1px);
}
.cf09d85aafe7e124-volumeSliderWrapper {
margin-bottom: 4px;
-webkit-margin-start: -4px;
margin-inline-start: -4px;
}
.cf09d85aafe7e124-durationTimeWrapper {
flex: 0 0 auto;
height: 12px;
margin: 4px;
}
.cf09d85aafe7e124-durationTimeDisplay,
.cf09d85aafe7e124-durationTimeSeparator {
display: inline-block;
font-family: var(--font-code);
font-size: 12px;
font-weight: var(--font-weight-medium);
line-height: 12px;
vertical-align: text-top;
}
.cf09d85aafe7e124-durationTimeSeparator {
margin: 0 2px;
}
.cf09d85aafe7e124-video {
border-radius: 3px;
display: block;
height: 100%;
object-fit: contain;
position: relative;
width: 100%;
}
.cf09d85aafe7e124-video:-webkit-full-screen {
z-index: 99999;
}
.cf09d85aafe7e124-video::-webkit-media-controls-enclosure {
display: none !important;
}
.cf09d85aafe7e124-audio {
display: block;
height: 0;
position: absolute;
width: 0;
}
.cf09d85aafe7e124-audioMetadata {
display: flex;
}
.cf09d85aafe7e124-audioMetadata:before {
background-image: url(/assets/a6db1d05d35f13d0.svg);
background-repeat: no-repeat;
background-size: 100% auto;
content: "";
height: 40px;
width: 24px;
}
.cf09d85aafe7e124-audioMetadata .cf09d85aafe7e124-metadataContent {
padding: 0 8px;
}
.cf09d85aafe7e124-audioMetadata .cf09d85aafe7e124-metadataDownload {
height: 24px;
opacity: 1;
}
.cf09d85aafe7e124-audioMetadata .cf09d85aafe7e124-metadataIcon {
color: var(--interactive-text-default);
}
.cf09d85aafe7e124-audioMetadata .cf09d85aafe7e124-metadataIcon:hover {
color: var(--interactive-text-hover);
}
.cf09d85aafe7e124-audioMetadata .cf09d85aafe7e124-metadataSize {
color: var(--text-muted);
}
.cf09d85aafe7e124-metadata {
align-items: flex-start;
background-image: linear-gradient(0deg, transparent, rgba(0, 0, 0, 0.9));
box-sizing: border-box;
display: flex;
height: 80px;
position: absolute;
top: -10px;
inset-inline: 0;
padding: 22px 12px 12px;
z-index: 1;
}
.cf09d85aafe7e124-metadataContent {
flex: 1 1 auto;
overflow: hidden;
white-space: nowrap;
}
.cf09d85aafe7e124-metadataName {
font-size: 16px;
line-height: 20px;
}
.cf09d85aafe7e124-metadataName,
.cf09d85aafe7e124-metadataSize {
font-weight: var(--font-weight-medium);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cf09d85aafe7e124-metadataSize {
font-size: 12px;
line-height: 16px;
opacity: 0.7;
}
.cf09d85aafe7e124-metadataDownload {
flex: 0 0 auto;
opacity: 0.6;
}
.cf09d85aafe7e124-metadataDownload:hover {
opacity: 1;
}
.cf09d85aafe7e124-metadataIcon {
color: var(--white);
height: 25px;
width: 24px;
}
.cf09d85aafe7e124-playCenter {
align-items: center;
display: flex;
justify-content: center;
top: 0;
inset-inline: 0;
bottom: 0;
z-index: 1;
}
.cf09d85aafe7e124-playCenter,
.cf09d85aafe7e124-playPausePop {
pointer-events: none;
position: absolute;
}
.cf09d85aafe7e124-playPausePop {
inset-inline-start: 50%;
top: 50%;
-webkit-margin-start: -23px;
background-color: var(--opacity-black-60);
border-radius: 50%;
color: var(--white);
height: 24px;
margin-inline-start: -23px;
margin-top: -23px;
padding: 12px;
width: 24px;
}
.cf09d85aafe7e124-playPausePop .cf09d85aafe7e124-playPausePopIcon {
display: block;
height: 24px;
width: 24px;
}
.cf09d85aafe7e124-videoButton {
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
@keyframes cf09d85aafe7e124-overlayContentHidden {
0% {
opacity: 1;
}
to {
opacity: 0;
}
}
.cf09d85aafe7e124-overlayContentHidden {
animation: cf09d85aafe7e124-overlayContentHidden 0.2s ease-in-out forwards;
}
.background-opacity-high .cf09d85aafe7e124-audioControls,
.background-opacity-low .cf09d85aafe7e124-audioControls,
.background-opacity-medium .cf09d85aafe7e124-audioControls {
background-color: var(--opacity-black-28);
}
.background-opacity-high .cf09d85aafe7e124-audioMetadata:before,
.background-opacity-low .cf09d85aafe7e124-audioMetadata:before,
.background-opacity-medium .cf09d85aafe7e124-audioMetadata:before {
opacity: 0.6;
}
.enable-forced-colors .cf09d85aafe7e124-wrapper {
outline: 2px solid CanvasText;
}
.enable-forced-colors .cf09d85aafe7e124-videoButton {
background-color: ButtonFace;
border-radius: 4px;
color: ButtonText;
}
.enable-forced-colors .cf09d85aafe7e124-metadataDownload {
opacity: 1;
}
.enable-forced-colors .cf09d85aafe7e124-videoControls {
background-color: ButtonFace;
}
.a22bfd0da01d94fe-dimensionlessImage {
height: 100%;
object-fit: scale-down;
width: 100%;
}
.a22bfd0da01d94fe-wrapper {
cursor: zoom-in;
}
.a22bfd0da01d94fe-zoomed {
cursor: zoom-out;
}
.a22bfd0da01d94fe-media {
border-radius: 0;
}
.d75751de2a8ac456-galleryContainer {
align-self: flex-start;
display: flex;
grid-column: 2 / span 3;
grid-row: 3;
justify-content: center;
justify-self: center;
translate: 0 -4px;
width: 100%;
}
.d75751de2a8ac456-gallery {
display: flex;
flex-shrink: 1;
gap: 2px;
max-width: -webkit-fit-content;
max-width: -moz-fit-content;
max-width: fit-content;
}
.d75751de2a8ac456-galleryItemOverlay {
background-color: var(--black);
height: 40px;
opacity: 0.5;
position: absolute;
transition: opacity 0.2s ease-in-out;
width: 40px;
z-index: 1;
}
.d75751de2a8ac456-galleryItemOverlay:hover {
opacity: 0.15;
}
.d75751de2a8ac456-galleryItemOverlay.d75751de2a8ac456-selected {
opacity: 0;
}
.d75751de2a8ac456-galleryItem {
background-color: var(--background-base-low);
border-radius: 2px;
cursor: pointer;
height: 40px;
margin: 4px 0;
position: relative;
width: 40px;
}
.d75751de2a8ac456-galleryItem.d75751de2a8ac456-first {
border-radius: 8px 2px 2px 8px;
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
.d75751de2a8ac456-galleryItem.d75751de2a8ac456-last {
border-radius: 2px 8px 8px 2px;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
.d75751de2a8ac456-galleryItem * {
border-radius: inherit;
}
.d75751de2a8ac456-galleryItem.d75751de2a8ac456-inactive:after {
background-color: var(--black);
border-radius: inherit;
content: "";
height: 100%;
inset-inline-start: 0;
opacity: 0.5;
position: absolute;
top: 0;
transition: opacity 0.2s ease-in-out;
width: 100%;
}
.d75751de2a8ac456-galleryItem.d75751de2a8ac456-inactive:after:hover {
opacity: 0.15;
}
.d75751de2a8ac456-obscured {
background-color: var(--spoiler-hidden-background);
border-color: var(--spoiler-hidden-background);
}
.aec7abc73c126bc0-button {
background-color: var(--background-surface-highest);
border-radius: 8px;
cursor: pointer;
display: grid;
height: 40px;
place-items: center;
width: 40px;
}
.aec7abc73c126bc0-buttonInner {
border: 1px solid var(--border-muted);
border-radius: inherit;
color: var(--interactive-text-default);
display: grid;
height: 38px;
place-items: center;
transition:
color 0.2s ease-in-out,
background-color 0.2s ease-in-out;
width: 38px;
}
.aec7abc73c126bc0-buttonInner:hover {
background-color: var(--background-mod-muted);
color: var(--interactive-text-hover);
}
.aec7abc73c126bc0-buttonInner:active {
background-color: var(--background-mod-subtle);
color: var(--interactive-text-active);
}
.b2eddf192f54b058-mediaContainer {
flex-grow: 1;
grid-column: 1 / span 5;
grid-row: 1 / span 3;
position: relative;
}
.b2eddf192f54b058-mediaContainer,
.b2eddf192f54b058-mediaWrapper {
align-items: center;
display: flex;
justify-content: center;
}
.b2eddf192f54b058-mediaWrapper {
height: 100%;
margin: auto;
object-fit: contain;
width: 100%;
}
.b2eddf192f54b058-nav {
grid-row: 1 / span 3;
place-self: center;
position: relative;
z-index: 1;
}
.b2eddf192f54b058-navPrev {
grid-column: 1;
}
.b2eddf192f54b058-navNext {
grid-column: 5;
}
.b2eddf192f54b058-obscureWrapper {
display: flex;
height: 100%;
justify-content: center;
overflow: hidden;
}
.b2eddf192f54b058-obscureWrapper.b2eddf192f54b058-obscure {
filter: blur(var(--__obscured-background-blur-radius)) brightness(var(--__obscured-background-brightness));
pointer-events: none;
}
.b2eddf192f54b058-fadeInWrapper {
margin: auto;
}
._0ccaee68b77c7469-fileWrapper {
max-width: 100%;
position: relative;
width: 432px;
}
._0ccaee68b77c7469-file {
align-items: center;
background-color: var(--background-surface-high);
border: 1px solid transparent;
border-color: var(--border-subtle);
border-radius: 8px;
box-shadow: var(--shadow-low);
box-sizing: border-box;
display: flex;
flex-direction: row;
letter-spacing: 0;
padding: 16px;
width: 100%;
}
._0ccaee68b77c7469-fileInner {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._0ccaee68b77c7469-icon {
height: 40px;
width: 30px;
-webkit-margin-end: 8px;
flex-shrink: 0;
margin-inline-end: 8px;
}
._0ccaee68b77c7469-filenameWrapper {
align-items: flex-end;
display: flex;
}
._0ccaee68b77c7469-filename {
font-size: 16px;
font-weight: var(--font-weight-normal);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (-webkit-max-device-pixel-ratio: 1) {
.theme-light ._0ccaee68b77c7469-filename {
font-weight: var(--font-weight-medium);
}
}
._0ccaee68b77c7469-metadata {
font-size: 12px;
font-weight: var(--font-weight-normal);
line-height: 16px;
-webkit-margin-end: 8px;
color: var(--text-muted);
margin-inline-end: 8px;
}
._0ccaee68b77c7469-rate {
flex-shrink: 0;
-webkit-margin-start: 8px;
margin-inline-start: 8px;
min-width: 60px;
text-align: end;
}
._0ccaee68b77c7469-progressContainer {
align-items: center;
display: flex;
height: 16px;
}
._0ccaee68b77c7469-progress {
background-color: hsl(var(--primary-400-hsl) / 0.3);
}
._0ccaee68b77c7469-cancelButton,
._0ccaee68b77c7469-size {
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
._0ccaee68b77c7469-cancelButton {
color: var(--interactive-text-default);
cursor: pointer;
}
._0ccaee68b77c7469-cancelButton:hover {
color: var(--interactive-text-hover);
}
._0ccaee68b77c7469-filenameLinkWrapper {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._0ccaee68b77c7469-fileNameLink:hover {
text-decoration: underline;
}
._0ccaee68b77c7469-filename {
color: var(--interactive-text-active);
}
._0ccaee68b77c7469-filenameLinkWrapper {
color: var(--text-link);
}
._0ccaee68b77c7469-size {
color: var(--text-muted);
}
.custom-theme-background ._0ccaee68b77c7469-file {
background-color: var(--background-mod-subtle);
border-color: var(--border-subtle);
}
@use postcss-pxtorem;
._4d95d73152192cf9-spinner {
height: 100%;
width: 100%;
}
._4d95d73152192cf9-container {
display: grid;
max-width: 50vw;
width: 100%;
}
._4d95d73152192cf9-textContainer {
background-color: var(--background-base-lower);
border: 1px solid var(--border-subtle);
border-color: var(--border-subtle);
border-radius: 4px 4px 0 0;
box-sizing: border-box;
height: 100%;
min-height: 118px;
overflow: hidden;
}
._4d95d73152192cf9-textContainer pre {
border-radius: 4px 4px 0 0;
box-sizing: border-box;
}
._4d95d73152192cf9-newMosaicStyle ._4d95d73152192cf9-textContainer {
border-radius: 8px 8px 0 0;
}
._4d95d73152192cf9-codeView {
background-color: transparent;
font-size: 0.875rem;
line-height: 1rem;
min-height: 100px;
}
._4d95d73152192cf9-codeView::-webkit-scrollbar-track {
margin: 0 0.5em;
}
._4d95d73152192cf9-newMosaicStyle ._4d95d73152192cf9-codeView {
margin: 8px 8px 0;
padding: 8px;
}
._4d95d73152192cf9-expanded {
overflow: auto;
}
._4d95d73152192cf9-footer {
align-items: center;
background-color: var(--background-surface-high);
border: 1px solid var(--border-subtle);
border-radius: 0 0 4px 4px;
border-top: 0;
border-color: var(--border-subtle);
box-sizing: border-box;
display: flex;
flex-shrink: 0;
font-size: 0.875rem;
height: 40px;
justify-content: flex-end;
min-width: 0;
padding: 0 10px;
}
._4d95d73152192cf9-newMosaicStyle ._4d95d73152192cf9-footer {
border-radius: 0 0 8px 8px;
padding: 0 16px;
}
._4d95d73152192cf9-toggleExpandSection {
align-items: center;
cursor: pointer;
display: flex;
flex-shrink: 0;
-webkit-padding-end: 10px;
padding-inline-end: 10px;
}
._4d95d73152192cf9-toggleExpandSection:hover {
color: var(--interactive-text-hover);
}
._4d95d73152192cf9-openFullPreviewSection {
cursor: pointer;
padding-top: 4px;
}
._4d95d73152192cf9-openFullPreviewSection:hover {
color: var(--interactive-text-hover);
}
._4d95d73152192cf9-footerGap {
flex: 200 0 auto;
}
._4d95d73152192cf9-downloadSection {
color: var(--interactive-text-default);
}
._4d95d73152192cf9-downloadSection:hover {
color: var(--interactive-text-hover);
text-decoration: none;
}
._4d95d73152192cf9-attachmentName {
display: inline-block;
flex: 0 1 auto;
overflow: hidden;
text-align: end;
text-overflow: ellipsis;
white-space: nowrap;
}
._4d95d73152192cf9-formattedSize {
-webkit-padding-start: 2px;
color: var(--interactive-muted);
flex: 1 0 auto;
padding-inline-start: 2px;
text-align: end;
}
._4d95d73152192cf9-downloadButton {
-webkit-padding-start: 4px;
padding-inline-start: 4px;
}
._4d95d73152192cf9-languageSelector {
background-color: var(--background-surface-high);
border-radius: 4px;
box-shadow: var(--shadow-border), var(--shadow-high);
margin-top: 4px;
max-width: 176px;
overflow: hidden;
padding: 8px 8px 4px;
}
._4d95d73152192cf9-codeIcon {
min-width: 24px;
-webkit-padding-start: 4px;
padding-bottom: 4px;
padding-inline-start: 4px;
}
._4d95d73152192cf9-codeIcon:hover {
color: var(--interactive-text-hover);
}
._4d95d73152192cf9-modalContent {
display: grid;
height: 100%;
min-height: 0;
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
width: 100%;
}
._4d95d73152192cf9-modalContent ._4d95d73152192cf9-codeView {
background-color: var(--background-surface-high);
}
._4d95d73152192cf9-modalFooter {
align-items: center;
border-top: 1px solid var(--border-subtle);
border-color: var(--border-subtle);
box-sizing: border-box;
display: flex;
flex-shrink: 0;
font-size: 0.875rem;
height: 40px;
justify-content: flex-end;
min-width: 0;
padding: var(--custom-modal-padding-md) var(--custom-modal-padding-md) 0;
}
._4d95d73152192cf9-modalTextContainer {
background-color: var(--background-base-lower);
overflow: scroll;
}
._581051df43c5ebb6-wrapper {
align-items: center;
contain: layout size;
display: flex;
height: 100%;
justify-content: flex-start;
overflow: hidden;
position: relative;
width: 8px;
}
._581051df43c5ebb6-item {
border-radius: 0 4px 4px 0;
display: block;
position: absolute;
width: 8px;
-webkit-margin-start: -4px;
background-color: var(--text-strong);
margin-inline-start: -4px;
}
.enable-forced-colors ._581051df43c5ebb6-item {
background-color: Highlight;
}
.b1fb0bac21675b87-wrapper {
align-items: center;
justify-content: flex-end;
}
.b1fb0bac21675b87-partyMembers,
.b1fb0bac21675b87-wrapper {
display: flex;
}
.b1fb0bac21675b87-partyMember,
.b1fb0bac21675b87-partyMembers,
.b1fb0bac21675b87-wrapper {
height: var(--custom-summary-avatars-avatar-diameter);
}
.b1fb0bac21675b87-partyMember {
display: inline-block;
width: var(--custom-summary-avatars-avatar-diameter);
-webkit-margin-start: -2px;
margin-inline-start: -2px;
-webkit-mask: url(/assets/eae6388e2d5a721a.svg);
mask: url(/assets/eae6388e2d5a721a.svg);
-webkit-mask-size: 100%;
mask-size: 100%;
mask-type: luminance;
}
.b1fb0bac21675b87-partyMember:first-child {
-webkit-margin-start: 0;
margin-inline-start: 0;
}
.b1fb0bac21675b87-partyMember:last-child {
-webkit-mask: none;
mask: none;
}
.b1fb0bac21675b87-partyMemberOverflow {
font-size: 14px;
height: var(--custom-summary-avatars-avatar-diameter);
line-height: 16px;
min-width: var(--custom-summary-avatars-avatar-diameter);
padding: 0 4px;
-webkit-margin-start: -2px;
align-items: center;
background-color: var(--background-base-lower);
border-radius: 12px;
color: var(--text-default);
display: flex;
font-weight: var(--font-weight-semibold);
justify-content: center;
margin-inline-start: -2px;
}
.theme-dark .b1fb0bac21675b87-partyMemberBackground {
background-color: var(--primary-500);
}
.theme-dark .b1fb0bac21675b87-partyMemberUnknown {
background-color: var(--primary-500);
}
.theme-light .b1fb0bac21675b87-partyMemberBackground {
background-color: var(--primary-160);
}
.theme-light .b1fb0bac21675b87-partyMemberUnknown {
background-color: var(--primary-160);
}
.b1fb0bac21675b87-partyMemberUnknownIcon {
color: var(--text-muted);
}
._0a12b61b88654e0a-container {
align-items: center;
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
min-height: 300px;
padding: 32px;
text-align: center;
}
._0a12b61b88654e0a-iconContainer {
margin-bottom: 16px;
position: relative;
}
._0a12b61b88654e0a-icon {
background-color: var(--background-base-low);
border-radius: 80px;
color: var(--interactive-text-default);
display: inline-block;
padding: 22px;
}
._0a12b61b88654e0a-iconOffset {
-webkit-margin-start: 8px;
margin-inline-start: 8px;
margin-top: 4px;
}
._0a12b61b88654e0a-stars {
inset-inline-start: -10px;
position: absolute;
}
._0a12b61b88654e0a-header {
margin-bottom: 8px;
}
._0a12b61b88654e0a-header,
._0a12b61b88654e0a-text {
text-transform: none;
}
.e97453749c8b22b3-container {
margin-top: 4px;
-webkit-margin-start: 8px;
border-radius: 8px;
cursor: pointer;
margin-inline-start: 8px;
padding-inline: 12px 8px;
padding-bottom: 4px;
position: relative;
}
.e97453749c8b22b3-container:hover {
background: var(--background-gradient-low, var(--background-base-lowest));
}
.e97453749c8b22b3-rowHeader {
flex-direction: row;
justify-content: space-between;
padding-bottom: 8px;
padding-top: 12px;
}
.e97453749c8b22b3-rowHeader,
.e97453749c8b22b3-rowHeaderLeft {
align-items: center;
display: flex;
}
.e97453749c8b22b3-dot,
.e97453749c8b22b3-timestamp {
-webkit-padding-end: 8px;
padding-inline-end: 8px;
}
.e97453749c8b22b3-dot {
color: var(--border-subtle);
justify-content: center;
}
.e97453749c8b22b3-icon {
color: var(--text-default);
display: flex;
}
.e97453749c8b22b3-count {
min-width: -webkit-fit-content;
min-width: -moz-fit-content;
min-width: fit-content;
padding-inline: 5px 8px;
}
.e97453749c8b22b3-title {
padding-bottom: 4px;
}
.e97453749c8b22b3-subtitle {
padding-bottom: 12px;
text-transform: none;
}
.e97453749c8b22b3-unreadPill {
inset-inline-start: -8px;
position: absolute;
top: 24px;
}
.e97453749c8b22b3-feedbackContainer {
display: flex;
flex-direction: column;
gap: 6px;
height: 100%;
inset-inline-end: 8px;
justify-content: center;
position: absolute;
top: 0;
}
.e97453749c8b22b3-thumbIcon {
background: var(--background-secondary-alt);
border-radius: 16px;
color: var(--interactive-text-default);
cursor: pointer;
padding: 8px;
}
.e97453749c8b22b3-thumbIcon:active,
.e97453749c8b22b3-thumbIcon:hover {
color: var(--interactive-text-active);
}
._0efdfb6af797c2b2-backupContainer {
display: flex;
justify-content: center;
}
._0efdfb6af797c2b2-canvas {
cursor: pointer;
flex: 1;
height: 32px;
margin-bottom: -4px;
margin-top: -4px;
min-width: 0;
}
.a8e786485f0c32f8-container {
align-items: center;
background-color: var(--background-mod-subtle);
border-radius: 24px;
box-sizing: border-box;
display: flex;
flex-direction: row;
gap: var(--space-12);
max-width: 100%;
min-width: 0;
padding: 12px;
position: relative;
transition: background-color 0.2s ease-in-out;
}
.a8e786485f0c32f8-playIcon {
color: var(--white);
}
.a8e786485f0c32f8-playing .a8e786485f0c32f8-playIcon {
color: var(--brand-500);
}
.a8e786485f0c32f8-playButtonContainer {
flex-shrink: 0;
height: 32px;
width: 32px;
-webkit-margin-start: -4px;
align-items: center;
border-radius: 50%;
cursor: pointer;
display: flex;
justify-content: center;
margin-inline-start: -4px;
margin-bottom: -4px;
margin-top: -4px;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.a8e786485f0c32f8-playButtonContainer:active {
transform: scale(0.875);
}
.a8e786485f0c32f8-playButtonContainer:active .a8e786485f0c32f8-playIcon {
color: var(--brand-360);
}
.a8e786485f0c32f8-playing .a8e786485f0c32f8-playButtonContainer {
background: var(--white);
}
.a8e786485f0c32f8-playing .a8e786485f0c32f8-playButtonContainer:active {
background-color: var(--brand-360);
}
.a8e786485f0c32f8-playing .a8e786485f0c32f8-playButtonContainer:active .a8e786485f0c32f8-playIcon {
color: var(--brand-500);
}
.theme-light .a8e786485f0c32f8-container:not(.a8e786485f0c32f8-playing) .a8e786485f0c32f8-playButtonContainer {
background: linear-gradient(151.11deg, var(--brand-400) 0, var(--brand-500) 100%);
}
.theme-light .a8e786485f0c32f8-container:not(.a8e786485f0c32f8-playing) .a8e786485f0c32f8-playButtonContainer:hover {
background: linear-gradient(135deg, var(--brand-360) 0, var(--brand-400) 100%);
}
.theme-light .a8e786485f0c32f8-container:not(.a8e786485f0c32f8-playing) .a8e786485f0c32f8-playButtonContainer:active {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), a949CF7, rgba(0, 0, 0, 0.2)), linear-gradient(135deg, var(--brand-400) 0, var(--brand-500) 100%);
}
.theme-dark .a8e786485f0c32f8-container:not(.a8e786485f0c32f8-playing) .a8e786485f0c32f8-playButtonContainer {
background: linear-gradient(151.11deg, var(--brand-460) 16.55%, var(--brand-560) 104.36%);
}
.theme-dark .a8e786485f0c32f8-container:not(.a8e786485f0c32f8-playing) .a8e786485f0c32f8-playButtonContainer:hover {
background: linear-gradient(151.11deg, var(--brand-400) 17.78%, var(--brand-460) 82.22%);
}
.theme-dark .a8e786485f0c32f8-container:not(.a8e786485f0c32f8-playing) .a8e786485f0c32f8-playButtonContainer:active {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(151.11deg, var(--brand-460) 16.55%, var(--brand-560) 104.36%);
}
.a8e786485f0c32f8-playing {
border-color: var(--opacity-blurple-60);
}
.a8e786485f0c32f8-oldPlayIconSpacing {
margin-inline: 1px -1px;
}
.a8e786485f0c32f8-audioElement {
display: none;
}
.a8e786485f0c32f8-playbackRate {
background-color: var(--background-mod-subtle);
border-radius: 4px;
color: var(--interactive-text-default);
text-align: center;
transition:
background-color 0.2s ease-in,
color 0.2s ease-in;
width: 32px;
}
.a8e786485f0c32f8-playbackRateContainer {
cursor: pointer;
padding: 4px 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
z-index: 1;
}
.a8e786485f0c32f8-playbackRateContainer:hover .a8e786485f0c32f8-playbackRate {
background-color: var(--interactive-background-hover);
color: var(--interactive-text-active);
transition: none;
}
.a8e786485f0c32f8-playing .a8e786485f0c32f8-playbackRateContainer .a8e786485f0c32f8-playbackRate {
background-color: var(--interactive-background-active);
color: var(--brand-200);
}
.a8e786485f0c32f8-playing .a8e786485f0c32f8-playbackRateContainer:hover .a8e786485f0c32f8-playbackRate {
background-color: var(--interactive-background-hover);
color: var(--white);
}
.a8e786485f0c32f8-volumeButton {
flex-shrink: 0;
}
.a8e786485f0c32f8-volumeButtonIcon {
color: var(--interactive-text-default);
transition: color 0.2s ease-in-out;
}
.a8e786485f0c32f8-volumeButtonIcon:hover {
color: var(--interactive-text-hover);
transition: none;
}
.a8e786485f0c32f8-volumeButtonIcon:active {
color: var(--interactive-text-active);
transition: none;
}
.a8e786485f0c32f8-playing .a8e786485f0c32f8-volumeButtonIcon {
color: var(--brand-200);
}
.a8e786485f0c32f8-playing .a8e786485f0c32f8-volumeButtonIcon:hover {
color: var(--white);
}
.a8e786485f0c32f8-playing .a8e786485f0c32f8-volumeButtonIcon:active {
color: var(--brand-200);
}
.a8e786485f0c32f8-volumeSlider {
margin-bottom: 4px;
-webkit-margin-start: -8px;
margin-inline-start: -8px;
z-index: 2;
}
.a8e786485f0c32f8-duration {
color: var(--interactive-text-default);
flex-shrink: 0;
transition: color 0.2s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
z-index: 1;
}
.a8e786485f0c32f8-playing .a8e786485f0c32f8-duration {
color: var(--white);
}
.a8e786485f0c32f8-waveform {
z-index: 1;
}
.a8e786485f0c32f8-rippleContainer {
border: 1px solid var(--border-subtle);
border-radius: 24px;
bottom: 0;
position: absolute;
top: 0;
inset-inline: 0;
overflow: hidden;
transition: border-color 0.2s ease-in-out;
}
.a8e786485f0c32f8-ripple {
aspect-ratio: 1/1;
background-color: var(--brand-530);
border-radius: 50%;
inset-inline-start: 24px;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
.a8e786485f0c32f8-ripple.a8e786485f0c32f8-reducedMotion {
opacity: 0;
transition: opacity 0.2s ease-in-out;
width: 200%;
}
.a8e786485f0c32f8-playing .a8e786485f0c32f8-ripple.a8e786485f0c32f8-reducedMotion {
opacity: 1;
}
.a8e786485f0c32f8-ripple:not(.a8e786485f0c32f8-reducedMotion) {
transition: width 0.2s ease-in-out;
width: 0;
}
.a8e786485f0c32f8-playing .a8e786485f0c32f8-ripple:not(.a8e786485f0c32f8-reducedMotion) {
width: 200%;
}
._0f481cbbd7530492-barBase {
align-items: center;
border: 1px solid var(--border-subtle);
cursor: pointer;
display: flex;
inset-inline: var(--space-8) var(--space-16);
min-height: 24px;
position: absolute;
text-transform: capitalize;
transition: opacity 0.15s;
z-index: 2;
}
._0f481cbbd7530492-barBase,
._0f481cbbd7530492-barBase:hover {
opacity: 1;
}
._0f481cbbd7530492-barButtonBase {
align-items: center;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: none;
display: flex;
font-size: 14px;
font-weight: var(--font-weight-medium);
justify-content: flex-start;
line-height: 18px;
padding: 0 12px;
text-align: start;
-webkit-padding-start: var(--space-4);
color: inherit;
padding-inline-start: var(--space-4);
}
._0f481cbbd7530492-barButtonIcon {
display: block;
height: 16px;
position: relative;
top: -1px;
width: 16px;
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
._0f481cbbd7530492-bottomBar {
background-color: var(--background-surface-highest);
border: 1px solid var(--border-normal);
border-radius: var(--radius-lg);
bottom: calc(var(--custom-channel-textarea-text-area-height) + 28px);
box-shadow: var(--shadow-medium);
box-sizing: border-box;
inset-inline: 0;
margin-block: 0 var(--space-8);
margin-inline: auto;
min-height: 44px;
min-width: 284px;
padding-block: var(--space-8) var(--space-8);
padding-inline: var(--space-16) var(--space-8);
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
}
._0f481cbbd7530492-bottomBar:before {
content: "";
inset-inline: -16px;
bottom: -9px;
box-sizing: var(--shadow-high);
height: 8px;
-webkit-mask-image: linear-gradient(to left, transparent, var(--background-surface-highest) 10%, var(--background-surface-highest) 90%, transparent);
mask-image: linear-gradient(to left, transparent, var(--background-surface-highest) 10%, var(--background-surface-highest) 90%, transparent);
position: absolute;
}
._0f481cbbd7530492-jumpToPresentBar {
bottom: 28px;
color: var(--text-default);
padding-bottom: var(--space-8);
}
._0f481cbbd7530492-jumpToPresentBar:active {
margin-bottom: calc(var(--space-8) - 1px);
}
._0f481cbbd7530492-jumpToPresentBar ._0f481cbbd7530492-spinner {
-webkit-padding-end: 12px;
padding-inline-end: 12px;
}
._0f481cbbd7530492-jumpToPresentBar ._0f481cbbd7530492-spinnerItem {
background-color: var(--white);
}
._0f481cbbd7530492-messagesErrorBar {
background-color: var(--notice-background-critical);
border-color: var(--border-feedback-critical);
color: var(--notice-text-critical);
padding: var(--space-4) var(--space-8);
}
._0f481cbbd7530492-messagesErrorBar:active {
margin-bottom: -1px;
}
._0f481cbbd7530492-messagesErrorBar ._0f481cbbd7530492-spinner {
-webkit-padding-end: 12px;
padding-inline-end: 12px;
}
._0f481cbbd7530492-messagesErrorBar ._0f481cbbd7530492-spinnerItem {
background-color: var(--notice-text-critical);
}
._0f481cbbd7530492-newMessagesBar {
background-color: var(--brand-500);
border-radius: 0 0 8px 8px;
box-shadow: var(--elevation-low);
color: var(--white);
height: 32px;
padding-inline: var(--space-16);
top: 0;
z-index: 3;
}
._0f481cbbd7530492-newMessagesBar:active {
box-shadow: 0 0 0 hsl(var(--black-hsl) / 0);
padding-top: 1px;
}
._0f481cbbd7530492-newMessagesPillContainer {
align-items: center;
display: flex;
position: absolute;
top: 16px;
inset-inline: 0;
justify-content: center;
pointer-events: none;
z-index: 2;
}
._0f481cbbd7530492-containerMarginTop {
top: 48px;
}
._0f481cbbd7530492-newMessagesPill {
align-items: center;
background-color: var(--background-surface-high);
border-radius: 18px 0 0 18px;
cursor: pointer;
display: flex;
padding-block: 9px;
padding-inline: 16px 12px;
pointer-events: auto;
}
._0f481cbbd7530492-newMessagesPill:hover {
background-color: var(--background-base-lowest);
}
.theme-light ._0f481cbbd7530492-newMessagesPill {
background-color: var(--background-base-lower);
}
.theme-light ._0f481cbbd7530492-newMessagesPill:hover {
background-color: var(--background-base-lowest);
}
._0f481cbbd7530492-newMessagesClear {
align-items: center;
border-radius: 0 18px 18px 0;
display: flex;
padding-block: 10px;
padding-inline: 8px 10px;
-webkit-border-start: solid 1px var(--border-subtle);
background-color: var(--background-surface-high);
border-inline-start: solid 1px var(--border-subtle);
cursor: pointer;
pointer-events: auto;
}
._0f481cbbd7530492-newMessagesClear:hover {
background-color: var(--background-base-lowest);
}
.theme-light ._0f481cbbd7530492-newMessagesClear {
background-color: var(--background-base-lower);
}
.theme-light ._0f481cbbd7530492-newMessagesClear:hover {
background-color: var(--background-base-lowest);
}
._0f481cbbd7530492-newMessagesClearIcon {
color: var(--text-default);
height: 16px;
width: 16px;
}
._0f481cbbd7530492-jumpToPresentButtonContainer {
align-items: center;
bottom: 16px;
display: flex;
inset-inline: 0 16px;
justify-content: flex-end;
pointer-events: none;
position: absolute;
z-index: 2;
}
._0f481cbbd7530492-jumpToPresentButton {
align-items: center;
background-color: var(--background-surface-high);
border-radius: 18px;
cursor: pointer;
display: flex;
padding: 6px;
pointer-events: auto;
}
._0f481cbbd7530492-jumpToPresentButton:hover {
background-color: var(--background-base-lowest);
}
.theme-light ._0f481cbbd7530492-jumpToPresentButton {
background-color: var(--background-base-lower);
}
.theme-light ._0f481cbbd7530492-jumpToPresentButton:hover {
background-color: var(--background-base-lowest);
}
._0f481cbbd7530492-jumpToPresentButtonIcon {
color: var(--text-default);
height: 24px;
width: 24px;
}
._0f481cbbd7530492-jumpToPresentSpinner {
background-color: var(--background-surface-high);
border-radius: 18px;
height: 24px;
padding: 6px;
width: 24px;
}
._0f481cbbd7530492-jumpToPresentSpinnerItem {
color: var(--text-default);
}
._0f481cbbd7530492-barButtonMain {
display: block;
flex: 1 1 auto;
position: relative;
}
._0f481cbbd7530492-barButtonMain,
._0f481cbbd7530492-span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._0f481cbbd7530492-barButtonAlt {
background-color: var(--control-secondary-background-default);
border-radius: var(--radius-sm);
flex: 0 0 auto;
font-weight: var(--font-weight-semibold);
padding: var(--space-4) var(--space-8);
position: relative;
}
._0f481cbbd7530492-barButtonAlt:hover {
background-color: var(--control-secondary-background-hover);
}
._0f481cbbd7530492-loadingMore {
align-items: center;
display: flex;
flex: 0 0 auto;
justify-content: center;
}
._0f481cbbd7530492-loadingMore ._0f481cbbd7530492-spinner {
display: inline-block;
margin: 0;
}
._0f481cbbd7530492-hasMore,
._0f481cbbd7530492-loadingMore {
height: 32px;
margin-block: 16px;
margin-inline: 16px 6px;
}
._0f481cbbd7530492-hasMore {
border-radius: 3px;
box-shadow: inset 0 0 0 1px var(--border-subtle);
color: var(--brand-500);
cursor: pointer;
font-size: 12px;
font-weight: var(--font-weight-medium);
line-height: 32px;
text-align: center;
text-transform: uppercase;
}
._0f481cbbd7530492-hasMore:hover {
background-color: var(--interactive-background-hover);
}
._0f481cbbd7530492-messageGroupBlocked {
background-color: var(--opacity-black-4);
color: var(--text-muted);
flex: 0 0 auto;
justify-content: center;
margin: 6px 0;
overflow: hidden;
}
._0f481cbbd7530492-messageGroupBlocked:last-child {
margin-bottom: 12px;
}
._0f481cbbd7530492-messageGroupBlockedBtn {
color: var(--interactive-text-default);
cursor: pointer;
font-size: 12px;
font-weight: var(--font-weight-medium);
margin: 0;
padding: 9px 0;
text-align: center;
text-transform: uppercase;
}
._0f481cbbd7530492-messageGroupBlockedBtn:hover {
background-color: var(--opacity-black-4);
}
._0f481cbbd7530492-revealed ._0f481cbbd7530492-messageGroupBlockedBtn {
color: var(--interactive-text-active);
}
._0f481cbbd7530492-tooltip {
align-items: center;
display: flex;
flex-direction: column;
text-align: center;
}
._0f481cbbd7530492-tooltipEmojiName {
width: 100%;
}
._0f481cbbd7530492-imageContent {
display: flex;
flex: auto;
flex-flow: column nowrap;
}
._0f481cbbd7530492-imageContainer {
display: flex;
flex: auto;
flex-flow: row nowrap;
height: 100%;
width: 100%;
}
._0f481cbbd7530492-altText {
color: var(--text-muted);
display: inline-block;
font-size: 12px;
font-weight: var(--font-weight-medium);
line-height: 16px;
margin: 0.25rem 0 0.75rem;
}
._0f481cbbd7530492-mediaMosaicAltTextContainer {
position: relative;
}
._0f481cbbd7530492-mediaMosaicVideoAltTextContainer {
inset-inline-start: 4.5px;
position: absolute;
top: 4px;
}
._0f481cbbd7530492-mediaMosaicAltText {
background-color: rgba(0, 0, 0, 0.6);
border-radius: 4px;
bottom: 4px;
color: var(--white);
font-size: 14px;
font-weight: var(--font-weight-semibold);
inset-inline-start: 4.5px;
line-height: 18px;
padding: 7px 8px;
position: absolute;
transition: background-color 0.2s ease-in-out;
z-index: 1;
}
._0f481cbbd7530492-mediaMosaicAltText._0f481cbbd7530492-reducedSize {
font-size: 12px;
padding: 0 4px;
}
._0f481cbbd7530492-mediaMosaicVideoAltText {
bottom: inherit;
inset-inline-start: inherit;
position: inherit;
}
._0f481cbbd7530492-mediaMosaicAltText:hover {
background-color: rgba(0, 0, 0, 0.8);
transition: background-color 0.2s ease-in-out;
}
._0f481cbbd7530492-mediaMosaicAltText:focus {
background-color: #000;
transition: background-color 0.2s ease-in-out;
}
._0f481cbbd7530492-mediaMosaicAltText:active {
background-color: var(--background-secondary-alt);
transition: background-color 0.2s ease-in-out;
}
._0f481cbbd7530492-mediaMosaicAltTextPopout {
background-color: var(--background-surface-high);
border-radius: 8px;
box-shadow: var(--shadow-border), var(--shadow-high);
color: var(--text-default);
display: flex;
flex-direction: column;
max-width: 360px;
padding: 13.5px 12px;
}
._0f481cbbd7530492-mediaMosaicAltTextPopoutTitle {
font-size: 12px;
font-weight: var(--font-weight-bold);
line-height: 16px;
margin-bottom: 9.5px;
text-transform: uppercase;
}
._0f481cbbd7530492-mediaMosaicAltTextPopoutDescription {
font-size: 16px;
font-weight: var(--font-weight-normal);
line-height: 20px;
word-break: break-word;
}
._0f481cbbd7530492-clickCTA {
color: var(--primary-300);
}
._0f481cbbd7530492-popoutContainer {
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
background-color: color-mix(in oklab, var(--background-surface-highest), transparent 10%);
border-radius: 8px;
box-shadow: var(--shadow-border), var(--shadow-low);
overflow: hidden;
width: var(--custom-message-helpers-popout-container-width);
}
@keyframes _0f481cbbd7530492-popout-loading {
0% {
transform: translate3d(calc(var(--custom-message-helpers-popout-content-width) * -1), 0, 0);
}
50% {
transform: translateZ(0);
}
to {
transform: translate3d(calc(var(--custom-message-helpers-popout-content-width) * -1), 0, 0);
}
}
._0f481cbbd7530492-popoutLoadingBackground {
height: 78px;
margin: var(--custom-message-helpers-popout-padding-width);
-webkit-mask: url(data:image/svg+xml;utf8,%3Csvg%20width%3D%22256%22%20height%3D%2278%22%20viewBox%3D%2232%2024%20256%2078%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M36%2024C33.7909%2024%2032%2025.7909%2032%2028V78C32%2080.2091%2033.7909%2082%2036%2082H86C88.2091%2082%2090%2080.2091%2090%2078V28C90%2025.7909%2088.2091%2024%2086%2024H36ZM110%2024C107.791%2024%20106%2025.7909%20106%2028V38C106%2040.2091%20107.791%2042%20110%2042H179C181.209%2042%20183%2040.2091%20183%2038V28C183%2025.7909%20181.209%2024%20179%2024H110ZM106%2058C106%2055.7909%20107.791%2054%20110%2054H284C286.209%2054%20288%2055.7909%20288%2058V68C288%2070.2091%20286.209%2072%20284%2072H110C107.791%2072%20106%2070.2091%20106%2068V58ZM110%2084C107.791%2084%20106%2085.7909%20106%2088V98C106%20100.209%20107.791%20102%20110%20102H223C225.209%20102%20227%20100.209%20227%2098V88C227%2085.7909%20225.209%2084%20223%2084H110Z%22%20fill%3D%22%23000000%22%20%2F%3E%3C%2Fsvg%3E);
mask: url(data:image/svg+xml;utf8,%3Csvg%20width%3D%22256%22%20height%3D%2278%22%20viewBox%3D%2232%2024%20256%2078%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M36%2024C33.7909%2024%2032%2025.7909%2032%2028V78C32%2080.2091%2033.7909%2082%2036%2082H86C88.2091%2082%2090%2080.2091%2090%2078V28C90%2025.7909%2088.2091%2024%2086%2024H36ZM110%2024C107.791%2024%20106%2025.7909%20106%2028V38C106%2040.2091%20107.791%2042%20110%2042H179C181.209%2042%20183%2040.2091%20183%2038V28C183%2025.7909%20181.209%2024%20179%2024H110ZM106%2058C106%2055.7909%20107.791%2054%20110%2054H284C286.209%2054%20288%2055.7909%20288%2058V68C288%2070.2091%20286.209%2072%20284%2072H110C107.791%2072%20106%2070.2091%20106%2068V58ZM110%2084C107.791%2084%20106%2085.7909%20106%2088V98C106%20100.209%20107.791%20102%20110%20102H223C225.209%20102%20227%20100.209%20227%2098V88C227%2085.7909%20225.209%2084%20223%2084H110Z%22%20fill%3D%22%23000000%22%20%2F%3E%3C%2Fsvg%3E);
-webkit-mask-size: 100%;
mask-size: 100%;
mask-type: luminance;
overflow: hidden;
position: relative;
width: var(--custom-message-helpers-popout-content-width);
}
._0f481cbbd7530492-popoutLoadingForeground {
animation: _0f481cbbd7530492-popout-loading 4s ease-in-out infinite;
background-image: linear-gradient(to right, var(--primary-600), var(--primary-500), var(--primary-600));
bottom: 0;
inset-inline-start: 0;
position: absolute;
top: 0;
width: calc(var(--custom-message-helpers-popout-content-width) * 2);
}
.theme-light ._0f481cbbd7530492-popoutLoadingForeground {
background-image: linear-gradient(to right, var(--primary-100), var(--primary-200), var(--primary-100));
}
.theme-light ._0f481cbbd7530492-topicsPillMiddle:hover {
background-color: var(--background-base-lower);
}
&.background-opacity-high ._0f481cbbd7530492-messageGroupBlocked,
&.background-opacity-low ._0f481cbbd7530492-messageGroupBlocked,
&.background-opacity-medium ._0f481cbbd7530492-messageGroupBlocked {
background-color: hsl(var(--primary-600-hsl) / 0.3);
border-color: hsl(var(--primary-630-hsl) / 0.2);
}
&.background-opacity-high ._0f481cbbd7530492-messageGroupBlocked ._0f481cbbd7530492-messageGroupBlockedBtn,
&.background-opacity-low ._0f481cbbd7530492-messageGroupBlocked ._0f481cbbd7530492-messageGroupBlockedBtn,
&.background-opacity-medium ._0f481cbbd7530492-messageGroupBlocked ._0f481cbbd7530492-messageGroupBlockedBtn {
background-color: transparent;
color: var(--primary-100);
}
&.background-opacity-high ._0f481cbbd7530492-messageGroupBlocked ._0f481cbbd7530492-messageGroupBlockedBtn:hover,
&.background-opacity-low ._0f481cbbd7530492-messageGroupBlocked ._0f481cbbd7530492-messageGroupBlockedBtn:hover,
&.background-opacity-medium ._0f481cbbd7530492-messageGroupBlocked ._0f481cbbd7530492-messageGroupBlockedBtn:hover {
background: hsl(var(--primary-600-hsl) / 0.4);
}
.background-opacity-low ._0f481cbbd7530492-divider:not(._0f481cbbd7530492-dividerRed) {
opacity: 0.8;
}
.background-opacity-low ._0f481cbbd7530492-divider:not(._0f481cbbd7530492-dividerRed) ._0f481cbbd7530492-dividerContent {
color: var(--white);
opacity: 0.8;
}
.background-opacity-low ._0f481cbbd7530492-divider:not(._0f481cbbd7530492-dividerRed) ._0f481cbbd7530492-dividerContent:before {
border-color: currentColor;
}
.background-opacity-medium ._0f481cbbd7530492-divider {
opacity: 0.8;
}
.background-opacity-medium ._0f481cbbd7530492-divider:not(._0f481cbbd7530492-dividerRed) ._0f481cbbd7530492-dividerContent {
color: var(--primary-200);
}
.background-opacity-medium ._0f481cbbd7530492-divider:not(._0f481cbbd7530492-dividerRed) ._0f481cbbd7530492-dividerContent:before {
background-color: currentColor;
opacity: 0.8;
}
.background-opacity-high ._0f481cbbd7530492-divider {
opacity: 0.5;
}
.background-opacity-high ._0f481cbbd7530492-divider:not(._0f481cbbd7530492-dividerRed) ._0f481cbbd7530492-dividerContent {
color: var(--primary-200);
}
.background-opacity-high ._0f481cbbd7530492-divider:not(._0f481cbbd7530492-dividerRed) ._0f481cbbd7530492-dividerContent:before {
background-color: currentColor;
opacity: 0.8;
}
._0f481cbbd7530492-disableInteractions._0f481cbbd7530492-hasMore {
visibility: hidden;
}
._0f481cbbd7530492-newTopicsBarContainer {
height: 32px;
background-color: var(--brand-500);
border-radius: 0 0 8px 8px;
box-shadow: var(--elevation-low);
color: var(--white);
justify-content: space-between;
top: 0;
}
._0f481cbbd7530492-newTopicsBarContainer:active {
box-shadow: 0 0 0 hsl(var(--black-hsl) / 0);
}
@media (max-width: 914px) {
._0f481cbbd7530492-newTopicsBarCompact {
display: none;
}
._0f481cbbd7530492-newTopicsBarText ._0f481cbbd7530492-topicsPillDropdownCaret {
-webkit-padding-start: 0;
padding-inline-start: 0;
}
}
._0f481cbbd7530492-newTopicsBarTopicSection {
-webkit-margin-start: 8px;
align-items: center;
display: flex;
margin-inline-start: 8px;
max-width: 33%;
z-index: 2;
}
._0f481cbbd7530492-newTopicsBarTextClickable {
overflow: hidden;
white-space: nowrap;
}
._0f481cbbd7530492-newTopicsBarTextClickable:hover ._0f481cbbd7530492-newTopicsBarCaret {
opacity: 1;
}
._0f481cbbd7530492-newTopicsBarCaret {
-webkit-padding-start: 8px;
padding-inline-start: 8px;
-webkit-margin-end: 4px;
margin-inline-end: 4px;
opacity: 0.7;
}
._0f481cbbd7530492-newTopicsBarText {
color: var(--white);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._0f481cbbd7530492-newTopicsBarIcon {
margin-inline: 4px;
min-height: 16px;
min-width: 16px;
}
._0f481cbbd7530492-newTopicsBarInitial {
overflow: hidden;
text-overflow: ellipsis;
text-transform: none;
white-space: nowrap;
}
._0f481cbbd7530492-newTopicsBarInitial,
._0f481cbbd7530492-newTopicsBarTextSelected,
._0f481cbbd7530492-newTopicsBarTextUnselected {
align-items: center;
display: flex;
}
._0f481cbbd7530492-newTopicsBarTextSelected {
background-color: rgba(0, 0, 0, 0.1);
border-radius: 16px;
height: 20px;
}
._0f481cbbd7530492-newTopicsBarTextSelected ._0f481cbbd7530492-topicsPillDropdownCaret {
color: var(--interactive-text-active);
}
._0f481cbbd7530492-flexEnd {
justify-content: flex-end;
}
._0f481cbbd7530492-flexStart {
justify-content: flex-start;
}
._0f481cbbd7530492-topicsPillContainer {
background: var(--background-gradient-lower, var(--background-surface-high));
border-radius: 0 0 8px 8px;
border-top: 0;
box-shadow: var(--shadow-low);
height: 32px;
min-height: 32px;
opacity: 1;
top: 0;
}
._0f481cbbd7530492-topicsPill {
align-items: center;
display: flex;
width: 100%;
z-index: 2;
}
._0f481cbbd7530492-topicsPillText {
cursor: pointer;
display: flex;
flex: 1;
overflow: hidden;
padding-block: 8px;
padding-inline: 10px 8px;
text-align: center;
}
._0f481cbbd7530492-topicsPillText,
._0f481cbbd7530492-topicsPillText:hover ._0f481cbbd7530492-topicsPillDropdownCaret {
color: var(--interactive-text-active);
}
._0f481cbbd7530492-topicsPillTextUnselected {
align-items: center;
display: flex;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-webkit-padding-start: 4px;
padding-inline-start: 4px;
}
._0f481cbbd7530492-topicsPillTextSelected {
background: var(--background-gradient-low, rgba(0, 0, 0, 0.1));
border-radius: 16px;
display: flex;
height: 26px;
}
._0f481cbbd7530492-topicsPillTextSelected ._0f481cbbd7530492-topicsPillDropdownCaret {
color: var(--interactive-text-active);
}
._0f481cbbd7530492-topicsPillSummaryIcon {
min-height: 16px;
min-width: 16px;
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
._0f481cbbd7530492-topicsPillTextTitle {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._0f481cbbd7530492-topicsPillDropdownCaret {
color: var(--interactive-text-default);
-webkit-padding-start: 8px;
padding-inline-start: 8px;
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
._0f481cbbd7530492-topicsPillCarets {
display: flex;
height: 24px;
justify-content: space-between;
top: 4px;
-webkit-padding-end: 16px;
padding-inline-end: 16px;
}
._0f481cbbd7530492-topicsPillCaret {
align-items: center;
background: var(--control-secondary-background-default);
color: var(--interactive-text-default);
cursor: pointer;
display: flex;
justify-content: center;
width: 32px;
}
._0f481cbbd7530492-topicsPillCaret:hover {
background: var(--control-secondary-background-hover);
color: var(--interactive-text-active);
}
._0f481cbbd7530492-topicsPillCaret:active {
background: var(--control-secondary-background-active);
}
._0f481cbbd7530492-topicsCaretRight {
border-radius: 0 20px 20px 0;
}
._0f481cbbd7530492-topicsCaretLeft {
border-radius: 20px 0 0 20px;
-webkit-border-end: 1px solid var(--border-subtle);
border-inline-end: 1px solid var(--border-subtle);
}
._0f481cbbd7530492-topicsPillCaretDisabled {
opacity: 0.5;
pointer-events: none;
}
._0f481cbbd7530492-topicsDropdownBase {
border: 1px solid var(--border-subtle);
border-radius: 8px;
cursor: default;
opacity: 1;
position: absolute;
width: 412px;
}
._0f481cbbd7530492-topicsDropdown {
top: 40px;
}
._0f481cbbd7530492-topicsDropdownHeading {
background: var(--background-gradient-low, var(--background-base-lowest));
border-start-end-radius: 8px;
border-start-start-radius: 8px;
display: flex;
justify-content: space-between;
padding-block: 14px;
padding-inline: 20px 14px;
}
._0f481cbbd7530492-topicsDropdownHeadingText {
align-items: center;
display: flex;
padding-top: 6px;
pointer-events: none;
-webkit-padding-end: 16px;
padding-inline-end: 16px;
}
._0f481cbbd7530492-topicsPillHeadingIcon {
color: var(--interactive-text-default);
-webkit-padding-end: 8px;
padding-inline-end: 8px;
}
._0f481cbbd7530492-summariesBetaTag {
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
._0f481cbbd7530492-topicsDropdownClose {
cursor: pointer;
opacity: 0.5;
transition: opacity 0.2s;
-webkit-app-region: no-drag;
color: var(--text-default);
}
._0f481cbbd7530492-topicsDropdownClose:hover {
opacity: 1;
}
._0f481cbbd7530492-topicsScroller {
background: var(--background-gradient-lower, var(--background-base-lower));
border-end-end-radius: 8px;
border-end-start-radius: 8px;
display: flex;
flex-direction: column;
max-height: 412px;
padding-bottom: 4px;
padding-top: 4px;
}
._0f481cbbd7530492-topicsDotSpacer,
._0f481cbbd7530492-topicsTimeAgo {
-webkit-padding-end: 8px;
padding-inline-end: 8px;
}
._0f481cbbd7530492-topicsDotSpacer {
color: var(--border-subtle);
justify-content: center;
}
._0f481cbbd7530492-topicsMessageCount {
min-width: -webkit-fit-content;
min-width: -moz-fit-content;
min-width: fit-content;
padding-inline: 5px 8px;
}
._0f481cbbd7530492-topicsChatBubbleIcon {
color: var(--text-default);
display: flex;
-webkit-padding-start: 8px;
padding-inline-start: 8px;
}
._0f481cbbd7530492-topicsTopicTitle {
padding-bottom: 4px;
}
._0f481cbbd7530492-topicsSubtitle {
padding-bottom: 12px;
}
.d5cd2da5733d0b6e-emojiSection {
padding: var(--custom-message-helpers-popout-padding-width);
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
}
.d5cd2da5733d0b6e-customEmojiLabel {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.theme-dark .d5cd2da5733d0b6e-betaTag {
background-color: #fff;
color: var(--premium-tier-2-pink-for-gradients-2);
}
.theme-light .d5cd2da5733d0b6e-betaTag {
background: linear-gradient(to right, var(--premium-tier-2-pink-for-gradients), var(--premium-tier-2-pink-for-gradients-2), var(--premium-tier-2-purple-for-gradients));
color: var(--white);
}
.d5cd2da5733d0b6e-primaryEmoji {
margin-top: 4px;
min-height: var(--custom-emoji-size-jumbo-emoji);
min-width: var(--custom-emoji-size-jumbo-emoji);
}
.d5cd2da5733d0b6e-ctaButton {
margin: 16px auto 0;
}
.d5cd2da5733d0b6e-guildSection {
background-color: var(--background-base-lower);
padding: var(--custom-message-helpers-popout-padding-width);
}
.d5cd2da5733d0b6e-guildTitle {
color: var(--text-default);
margin-bottom: 8px;
}
.d5cd2da5733d0b6e-guildIcon {
cursor: pointer;
}
.d5cd2da5733d0b6e-guildIcon,
.d5cd2da5733d0b6e-guildIconNotClickable {
height: 100%;
width: 100%;
}
.d5cd2da5733d0b6e-guildBadge {
-webkit-margin-end: 4px;
margin-inline-end: 4px;
min-width: 16px;
}
.d5cd2da5733d0b6e-guildName {
cursor: pointer;
}
.d5cd2da5733d0b6e-showMoreEmojis {
color: var(--interactive-text-default);
cursor: pointer;
font-weight: var(--font-weight-semibold);
margin-top: 8px;
transition: color 0.125s;
}
.d5cd2da5733d0b6e-showMoreEmojis:hover {
color: var(--interactive-text-active);
}
.d5cd2da5733d0b6e-showMoreEmojisArrow {
height: 16px;
inset-inline-start: 4px;
position: relative;
width: 16px;
}
.full-motion .d5cd2da5733d0b6e-showMoreEmojisArrow {
transition: transform 0.1s;
}
.d5cd2da5733d0b6e-showMoreEmojisArrow.d5cd2da5733d0b6e-showMoreEmojisArrowCollapsed {
transform: rotate(-90deg);
}
.d5cd2da5733d0b6e-otherEmojisContainer {
align-items: center;
display: flex;
flex-wrap: wrap;
margin-top: 4px;
}
.d5cd2da5733d0b6e-otherEmoji {
flex-basis: calc(16.66667% - 4px);
height: 32px;
margin: 4px 2px;
min-width: 32px;
width: 32px;
}
.d5cd2da5733d0b6e-truncatingText {
min-width: 0;
}
.d5cd2da5733d0b6e-dotSeparator {
background-color: var(--interactive-muted);
border-radius: 50%;
flex-shrink: 0;
height: 4px;
margin: 0 8px;
width: 4px;
}
.theme-light .d5cd2da5733d0b6e-popoutContent,
.theme-light .d5cd2da5733d0b6e-popoutLoader {
background-color: var(--background-surface-high);
box-shadow: var(--shadow-border), var(--shadow-high);
}
.d5cd2da5733d0b6e-joinGuildLink {
color: var(--text-link);
cursor: pointer;
}
.d5cd2da5733d0b6e-joinGuildLink:focus,
.d5cd2da5733d0b6e-joinGuildLink:hover {
text-decoration: underline;
}
.d5cd2da5733d0b6e-reactionEmojiDetailsUnfurlGuildDetails {
margin: 16px 0 8px;
}
.d5cd2da5733d0b6e-reactionEmojiDetailsClickable {
border-radius: var(--radius-xs);
color: var(--interactive-text-hover);
cursor: pointer;
display: flex;
flex-direction: row;
font-weight: var(--font-weight-semibold);
justify-content: center;
margin-top: 8px;
padding: 6px 0;
transition: color 0.125s;
}
.d5cd2da5733d0b6e-reactionEmojiDetailsClickable:hover {
color: var(--interactive-text-active);
}
.theme-dark .d5cd2da5733d0b6e-reactionEmojiDetailsClickable {
background-color: hsl(var(--primary-300-hsl) / 0.1);
}
.theme-light .d5cd2da5733d0b6e-reactionEmojiDetailsClickable {
background-color: hsl(var(--primary-700-hsl) / 0.1);
}
.d5cd2da5733d0b6e-emojiDetailsLoader {
box-shadow: none;
}
.d5cd2da5733d0b6e-reactionEmojiDetailsArrow {
margin-top: 2px;
}
.full-motion .d5cd2da5733d0b6e-reactionEmojiDetailsArrow {
transition: transform 0.1s;
}
.d5cd2da5733d0b6e-reactionEmojiDetailsArrow.d5cd2da5733d0b6e-reactionEmojiDetailsArrowCollapsed {
transform: rotate(-90deg);
}
.d5cd2da5733d0b6e-reactionEmojiDetailsDivider {
border-bottom: 1px solid var(--border-subtle);
margin: 16px 0;
}
.d5cd2da5733d0b6e-inventoryCtaButton {
margin: 8px auto 0;
}
.d5cd2da5733d0b6e-ctaDescription {
align-items: center;
display: flex;
flex-direction: row;
margin-top: 8px;
}
.d5cd2da5733d0b6e-nitroWheel {
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
.d5cd2da5733d0b6e-betaTag {
inset-inline-end: -8px;
position: absolute;
top: -4px;
}
._6818511f8d707fb5-effect {
bottom: 0;
pointer-events: none;
position: absolute;
width: var(--custom-voice-channel-effect-voice-channel-effect-animation-size);
z-index: 1001;
}
._58042e3634d7f2d1-effects {
border-radius: var(--radius-sm);
bottom: 0;
inset-inline: 0;
overflow: hidden;
pointer-events: none;
position: absolute;
top: 0;
}
._9be63f0b86033228-soundButtonWrapper {
background: var(--background-base-lower);
list-style: none;
}
._9be63f0b86033228-soundButton,
._9be63f0b86033228-soundButtonWrapper {
border-radius: var(--radius-sm);
position: relative;
}
._9be63f0b86033228-soundButton {
align-items: center;
background: var(--background-mod-subtle);
border: 1px solid transparent;
box-sizing: border-box;
display: flex;
flex-direction: row;
font-weight: var(--font-weight-semibold);
height: 40px;
justify-content: center;
overflow: hidden;
text-align: center;
width: 148px;
}
._9be63f0b86033228-soundButton._9be63f0b86033228-focused,
._9be63f0b86033228-soundButton:active:not(:focus-within),
._9be63f0b86033228-soundButton:hover {
border-color: var(--border-subtle);
}
.high-contrast-mode ._9be63f0b86033228-soundButton {
border-color: var(--border-muted);
}
._9be63f0b86033228-animated:active:not(:focus-within) {
box-shadow: none;
outline-width: 1px;
}
.full-motion ._9be63f0b86033228-animated:active:not(:focus-within) {
transform: translateY(2px);
}
._9be63f0b86033228-addButton {
align-items: center;
display: flex;
margin: 3px;
}
._9be63f0b86033228-plusSign {
color: var(--text-muted);
height: 18px;
width: 18px;
}
._9be63f0b86033228-addButton > * {
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
._9be63f0b86033228-hoverActiveBackground._9be63f0b86033228-focused,
._9be63f0b86033228-hoverActiveBackground:focus-within {
background: var(--background-mod-normal);
}
._9be63f0b86033228-hoverActiveBackground:hover {
background: var(--background-mod-strong);
}
._9be63f0b86033228-soundButton._9be63f0b86033228-focused ._9be63f0b86033228-buttonOverlay,
._9be63f0b86033228-soundButton:focus-within ._9be63f0b86033228-buttonOverlay,
._9be63f0b86033228-soundButton:hover ._9be63f0b86033228-buttonOverlay {
opacity: 1;
visibility: visible;
}
._9be63f0b86033228-soundButton._9be63f0b86033228-focused ._9be63f0b86033228-addButtonOverlay,
._9be63f0b86033228-soundButton:focus-within ._9be63f0b86033228-addButtonOverlay,
._9be63f0b86033228-soundButton:hover ._9be63f0b86033228-addButtonOverlay {
opacity: 1;
visibility: visible;
}
._9be63f0b86033228-soundInfo {
align-items: center;
display: flex;
flex: 1;
flex-direction: row;
gap: 8px;
justify-content: center;
overflow: hidden;
padding: 8px;
}
._9be63f0b86033228-soundName {
color: var(--text-strong);
display: -webkit-box;
flex-grow: 0;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
}
._9be63f0b86033228-soundName._9be63f0b86033228-hasEmoji {
text-align: start;
}
._9be63f0b86033228-emoji {
flex-shrink: 0;
height: 20px;
width: 20px;
}
._9be63f0b86033228-soundButtonInteractive {
cursor: pointer;
}
._9be63f0b86033228-soundButtonInteractive._9be63f0b86033228-playing {
border-color: var(--status-positive-background);
}
._9be63f0b86033228-buttonDisabledSecondaryActionsEnabled {
cursor: default;
}
._9be63f0b86033228-buttonDisabled {
pointer-events: none;
}
._9be63f0b86033228-premiumDisabled {
opacity: 0.5;
}
._9be63f0b86033228-absoluteFill {
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
}
._9be63f0b86033228-addButtonOverlay,
._9be63f0b86033228-buttonOverlay {
opacity: 0;
transition: opacity 0.2s ease;
visibility: hidden;
}
._9be63f0b86033228-buttonOverlayBackground {
background: var(--background-surface-highest);
opacity: 0.8;
}
._9be63f0b86033228-buttonOverlayActions {
align-items: center;
display: flex;
justify-content: space-between;
padding: 0 8px;
}
._9be63f0b86033228-secondaryButton {
color: var(--interactive-text-default);
display: flex;
}
._9be63f0b86033228-secondaryButton:focus,
._9be63f0b86033228-secondaryButton:hover {
color: var(--interactive-text-hover);
cursor: pointer;
}
._9be63f0b86033228-secondaryIcon {
height: 16px;
width: 16px;
}
._9be63f0b86033228-favoriteIconFavorite {
color: var(--text-feedback-warning);
}
._9be63f0b86033228-primaryIcon {
color: var(--interactive-text-active);
flex: 1;
height: 20px;
width: 20px;
}
._9be63f0b86033228-lockIcon,
._9be63f0b86033228-primaryIcon {
pointer-events: none;
}
._9be63f0b86033228-primaryIconTopLevel {
position: absolute;
z-index: 9999;
}
._9be63f0b86033228-unavailableTooltip {
align-items: center;
display: flex;
height: 40px;
position: absolute;
top: 0;
inset-inline: 0;
inset-inline-end: 0;
justify-content: space-between;
padding: 0 8px;
}
._9be63f0b86033228-unavailableTooltip:hover ._9be63f0b86033228-unavailableTooltipActions {
opacity: 1;
visibility: visible;
}
._9be63f0b86033228-unavailableTooltipActions {
align-items: center;
display: flex;
justify-content: space-between;
opacity: 0;
pointer-events: auto;
transition: opacity 0.2s ease;
visibility: hidden;
width: 100%;
}
._14ad3407b4b8a3bc-icon {
height: 16px;
width: 16px;
}
._14ad3407b4b8a3bc-sliderContainer {
background-color: var(--background-surface-high);
border-radius: var(--radius-sm);
display: flex;
flex-direction: column;
min-width: 188px;
padding: var(--space-12);
}
._14ad3407b4b8a3bc-slider {
margin-bottom: calc(var(--space-8) * -1);
}
._14ad3407b4b8a3bc-betaBadge {
inset-inline-start: var(--space-8);
position: absolute;
top: -8px;
}
._14ad3407b4b8a3bc-infoContainer {
border-radius: var(--radius-sm);
max-width: 300px;
}
._14ad3407b4b8a3bc-infoTooltip {
overflow: hidden;
}
._14ad3407b4b8a3bc-infoNitroContainer {
background-color: var(--background-surface-high);
position: relative;
}
._14ad3407b4b8a3bc-infoNitroBackground {
background: var(--custom-premium-colors-premium-gradient-tier-2-tri-color);
inset: 0;
opacity: 0.64;
position: absolute;
z-index: 1;
}
._14ad3407b4b8a3bc-infoNitroTextContainer {
align-items: center;
display: flex;
flex-direction: row;
padding: var(--space-8);
position: relative;
z-index: 2;
}
._14ad3407b4b8a3bc-infoNitroIcon {
-webkit-margin-end: var(--space-4);
margin-inline-end: var(--space-4);
}
._14ad3407b4b8a3bc-infoNitroText {
flex: 1;
-webkit-margin-end: var(--space-16);
margin-inline-end: var(--space-16);
}
._14ad3407b4b8a3bc-infoNitroBadge {
-webkit-margin-start: 0 auto;
margin-inline-start: 0 auto;
}
._14ad3407b4b8a3bc-infoSoundContainer {
background-color: var(--background-surface-high);
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-12);
}
._14ad3407b4b8a3bc-infoSoundInnerContainer {
align-items: center;
display: flex;
flex-direction: row;
}
._14ad3407b4b8a3bc-infoSoundIcon {
-webkit-margin-end: var(--space-4);
margin-inline-end: var(--space-4);
}
._14ad3407b4b8a3bc-infoExpandedSoundContainer {
align-items: center;
background-color: var(--background-base-lower);
display: flex;
flex-direction: row;
gap: var(--space-16);
padding: var(--space-16);
}
._14ad3407b4b8a3bc-infoExpandedGuildContainer {
align-items: start;
background-color: var(--background-secondary-alt);
display: flex;
flex-direction: column;
gap: var(--space-8);
padding: var(--space-16);
}
._14ad3407b4b8a3bc-infoExpandedGuildInfo {
width: 100%;
}
._14ad3407b4b8a3bc-infoExpandedGuildTitle {
align-self: flex-start;
}
._14ad3407b4b8a3bc-infoExpandedGuildInfoContainer {
align-items: center;
align-self: stretch;
display: flex;
flex-direction: row;
gap: var(--space-8);
}
._5cc6a0e60bee148d-jumboContainer {
margin: 2px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
._5cc6a0e60bee148d-jumboButton,
._5cc6a0e60bee148d-jumboContainer {
display: inline-flex;
}
._5cc6a0e60bee148d-inlineButton {
background: var(--card-background-default);
border: 1px solid var(--border-strong);
box-shadow:
inset 0 -4px 0 0 rgba(0, 0, 0, 0.12),
0 2px 0 0 rgba(0, 0, 0, 0.2);
display: inline-block;
}
.full-motion ._5cc6a0e60bee148d-inlineButton {
transition:
box-shadow 0.1s ease-in-out,
transform 0.2s ease;
}
._5cc6a0e60bee148d-inlineButton:active,
._5cc6a0e60bee148d-inlineButton:hover {
border: 1px solid hsla(0, 0%, 100%, 0.5);
}
._5cc6a0e60bee148d-inlineButton:active {
background: var(--card-primary-pressed-bg);
box-shadow: none;
}
.full-motion ._5cc6a0e60bee148d-inlineButton:active {
transform: translateY(2px);
}
._5cc6a0e60bee148d-inlineButton._5cc6a0e60bee148d-playing {
border: 1px solid var(--control-connected-border-default);
}
._5cc6a0e60bee148d-inlineContainer {
align-items: center;
border-radius: var(--radius-sm);
box-sizing: border-box;
cursor: pointer;
line-height: 1.5em;
margin: 2px 0;
padding: 0 var(--space-4);
position: relative;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
._5cc6a0e60bee148d-inlineTextArea {
margin: 2px var(--space-4);
}
._5cc6a0e60bee148d-soundmojiEmoji {
line-height: 1.5em;
margin-bottom: 1.5px;
width: 1em !important;
}
._5cc6a0e60bee148d-unknownSound {
height: 1em;
position: relative;
top: 2px;
width: 1em;
}
._5cc6a0e60bee148d-tooltip {
border-radius: var(--radius-sm);
}
._5cc6a0e60bee148d-tooltipContainer {
padding: 0;
}
._75abce0dd8453367-emojiContainer {
display: inline-block;
}
._75abce0dd8453367-emojiContainerClickable {
cursor: pointer;
}
._75abce0dd8453367-emojiJumbo {
vertical-align: middle;
}
.hljs-ansi-control-sequence {
display: none;
}
.hljs-ansi-style-bold {
font-weight: var(--font-weight-bold);
}
.hljs-ansi-style-underline {
text-decoration: underline;
}
.hljs-ansi-foreground-black {
color: var(--interactive-muted);
}
.hljs-ansi-foreground-black .hljs-ansi-background-black,
.hljs-ansi-foreground-black .hljs-ansi-background-blue,
.hljs-ansi-foreground-black .hljs-ansi-background-cyan,
.hljs-ansi-foreground-black .hljs-ansi-background-green,
.hljs-ansi-foreground-black .hljs-ansi-background-magenta,
.hljs-ansi-foreground-black .hljs-ansi-background-red,
.hljs-ansi-foreground-black .hljs-ansi-background-white,
.hljs-ansi-foreground-black .hljs-ansi-background-yellow {
color: #073642;
}
.hljs-ansi-foreground-red {
color: #dc322f;
}
.hljs-ansi-foreground-green {
color: #859900;
}
.hljs-ansi-foreground-yellow {
color: #b58900;
}
.hljs-ansi-foreground-blue {
color: #268bd2;
}
.hljs-ansi-foreground-magenta {
color: #d33682;
}
.hljs-ansi-foreground-cyan {
color: #2aa198;
}
.hljs-ansi-foreground-white {
color: var(--interactive-text-active);
}
.hljs-ansi-foreground-white .hljs-ansi-background-black,
.hljs-ansi-foreground-white .hljs-ansi-background-blue,
.hljs-ansi-foreground-white .hljs-ansi-background-cyan,
.hljs-ansi-foreground-white .hljs-ansi-background-green,
.hljs-ansi-foreground-white .hljs-ansi-background-magenta,
.hljs-ansi-foreground-white .hljs-ansi-background-red,
.hljs-ansi-foreground-white .hljs-ansi-background-white,
.hljs-ansi-foreground-white .hljs-ansi-background-yellow {
color: #eee8d5;
}
.hljs-ansi-background-black {
background-color: #002b36;
}
.hljs-ansi-background-red {
background-color: #cb4b16;
}
.hljs-ansi-background-green {
background-color: #586e75;
}
.hljs-ansi-background-yellow {
background-color: #657b83;
}
.hljs-ansi-background-blue {
background-color: #839496;
}
.hljs-ansi-background-magenta {
background-color: #6c71c4;
}
.hljs-ansi-background-cyan {
background-color: #93a1a1;
}
.hljs-ansi-background-white {
background-color: #fdf6e3;
}
@use postcss-pxtorem;
._752971923a1e6683-markup {
font-size: 1rem;
line-height: var(--chat-markup-line-height);
white-space: break-spaces;
word-wrap: break-word;
color: var(--text-default);
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
}
._752971923a1e6683-markup a {
color: var(--text-link);
cursor: pointer;
-webkit-text-decoration: var(--link-decoration);
text-decoration: var(--link-decoration);
word-break: break-word;
}
._752971923a1e6683-markup a:hover {
text-decoration: underline;
}
._752971923a1e6683-markup strong {
font-weight: var(--font-weight-bold);
}
._752971923a1e6683-markup em {
font-style: italic;
}
._752971923a1e6683-markup pre {
background-clip: border-box;
border-radius: 4px;
font-family: var(--font-code);
font-size: 0.75rem;
line-height: 1rem;
margin-top: 6px;
padding: 0;
white-space: pre-wrap;
}
._752971923a1e6683-markup blockquote,
._752971923a1e6683-markup pre {
box-sizing: border-box;
max-width: 90%;
}
._752971923a1e6683-markup blockquote {
color: var(--text-subtle);
text-indent: 0;
}
._752971923a1e6683-markup blockquote pre {
max-width: 100%;
}
._752971923a1e6683-markup small:not(._752971923a1e6683-inlineFormat) {
color: var(--text-subtle);
display: block;
font-size: 0.875rem;
line-height: 1.20313rem;
}
._752971923a1e6683-markup small._752971923a1e6683-inlineFormat:after {
content: " ";
}
._752971923a1e6683-markup code {
background: var(--background-code);
border: 1px solid var(--border-normal);
font-size: 0.875rem;
line-height: 1.125rem;
text-indent: 0;
white-space: pre-wrap;
}
._752971923a1e6683-markup .no-webkit-scrollbar code {
scrollbar-color: var(--background-base-lowest) var(--background-base-lower);
scrollbar-width: thin;
}
._752971923a1e6683-markup code.inline {
border-radius: 4px;
font-family: var(--font-code);
font-size: 85%;
height: auto;
margin: -0.2em 0;
padding: 0 0.2em;
text-indent: 0;
white-space: pre-wrap;
width: auto;
}
._752971923a1e6683-markup ._752971923a1e6683-codeContainer {
max-width: 50vw;
position: relative;
}
._752971923a1e6683-markup ._752971923a1e6683-codeActions {
display: none;
inset-inline-end: 4px;
position: absolute;
top: 8px;
}
._752971923a1e6683-markup ._752971923a1e6683-codeActions > div {
cursor: pointer;
}
._752971923a1e6683-markup ._752971923a1e6683-codeContainer:hover ._752971923a1e6683-codeActions {
display: block;
}
._752971923a1e6683-markup ._752971923a1e6683-inlineFormat li,
._752971923a1e6683-markup._752971923a1e6683-inlineFormat li {
display: inline;
margin: 0;
-webkit-padding-end: 8px;
padding-inline-end: 8px;
}
._752971923a1e6683-markup ._752971923a1e6683-inlineFormat li:before,
._752971923a1e6683-markup._752971923a1e6683-inlineFormat li:before {
content: "•";
-webkit-padding-end: 4px;
padding-inline-end: 4px;
}
._752971923a1e6683-markup ._752971923a1e6683-inlineFormat li li:before,
._752971923a1e6683-markup._752971923a1e6683-inlineFormat li li:before {
content: "○";
font-size: 0.625rem;
line-height: 1rem;
padding: 0 4px 4px;
}
._752971923a1e6683-markup li {
margin-bottom: 4px;
white-space: break-spaces;
}
._752971923a1e6683-markup ol,
._752971923a1e6683-markup ul {
list-style-position: outside;
margin-block: 4px 0;
margin-inline: 16px 0;
}
._752971923a1e6683-markup ol._752971923a1e6683-inlineFormat,
._752971923a1e6683-markup ul._752971923a1e6683-inlineFormat {
display: inline;
margin: 0;
padding-block: 0;
padding-inline: 0 8px;
}
._752971923a1e6683-markup ul {
list-style-type: disc;
}
._752971923a1e6683-markup ol {
list-style-type: decimal;
-webkit-margin-start: calc(0.4em + var(--totalCharacters) * 0.6em);
margin-inline-start: calc(0.4em + var(--totalCharacters) * 0.6em);
}
._752971923a1e6683-markup ol ul,
._752971923a1e6683-markup ul ul {
list-style-type: circle;
margin-bottom: 0;
}
._752971923a1e6683-markup ol ol,
._752971923a1e6683-markup ul ol {
margin-bottom: 0;
}
._752971923a1e6683-markup h1,
._752971923a1e6683-markup h2,
._752971923a1e6683-markup h3,
._752971923a1e6683-markup h4,
._752971923a1e6683-markup h5,
._752971923a1e6683-markup h6 {
color: var(--text-strong);
font-family: var(--font-display);
font-weight: var(--font-weight-bold);
line-height: 1.375em;
margin: 16px 0 4px;
}
._752971923a1e6683-markup h1._752971923a1e6683-inlineFormat,
._752971923a1e6683-markup h2._752971923a1e6683-inlineFormat,
._752971923a1e6683-markup h3._752971923a1e6683-inlineFormat,
._752971923a1e6683-markup h4._752971923a1e6683-inlineFormat,
._752971923a1e6683-markup h5._752971923a1e6683-inlineFormat,
._752971923a1e6683-markup h6._752971923a1e6683-inlineFormat {
font-size: inherit;
font-weight: var(--font-weight-semibold);
margin: 0 !important;
white-space: normal;
-webkit-padding-end: 16px;
color: inherit;
display: inline;
line-height: 1.25em;
padding-inline-end: 16px;
}
._752971923a1e6683-markup h1 {
font-size: 1.5rem;
margin: 16px 0 8px;
}
._752971923a1e6683-markup h2 {
font-size: 1.25rem;
margin: 16px 0 8px;
}
._752971923a1e6683-markup h3 {
font-size: 1rem;
margin: 16px 0 8px;
}
._752971923a1e6683-markup h1:first-child,
._752971923a1e6683-markup h2:first-child {
margin-top: 8px;
}
._752971923a1e6683-markup h3:first-child,
._752971923a1e6683-markup h4:first-child,
._752971923a1e6683-markup h5:first-child,
._752971923a1e6683-markup h6:first-child {
margin-top: 4px;
}
.custom-theme-background ._752971923a1e6683-markup code {
background: color-mix(in oklab, var(--background-code) 95%, var(--white));
}
@media (-webkit-max-device-pixel-ratio: 1) {
.theme-light ._752971923a1e6683-markup {
font-weight: var(--font-weight-medium);
}
}
._752971923a1e6683-blockquoteContainer {
display: flex;
margin-bottom: var(--space-4);
margin-top: var(--space-4);
}
._752971923a1e6683-blockquoteContainer ._752971923a1e6683-blockquoteDivider {
border-radius: 4px;
min-width: 4px;
width: 4px;
}
._752971923a1e6683-blockquoteContainer blockquote {
box-sizing: border-box;
padding-block: 0;
padding-inline: 12px 8px;
text-indent: 0;
}
._752971923a1e6683-blockquoteDivider {
background-color: var(--spine-default);
}
._752971923a1e6683-slateBlockquoteContainer {
margin-bottom: 0;
margin-top: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
._752971923a1e6683-slateBlockquoteContainer ._752971923a1e6683-blockquoteDivider,
._752971923a1e6683-slateBlockquoteContainer blockquote {
border-radius: 0;
margin: 0;
}
._752971923a1e6683-slateBlockquoteContainer blockquote {
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
}
.background-opacity-low ._752971923a1e6683-markup,
.background-opacity-medium ._752971923a1e6683-markup {
font-weight: var(--font-weight-normal);
}
.background-opacity-low ._752971923a1e6683-markup {
color: var(--white);
text-shadow:
0 0 1px var(--primary-700),
1px 1px 0 var(--primary-700);
}
.background-opacity-low ._752971923a1e6683-markup a {
color: var(--text-link);
text-shadow:
0 0 1px hsl(var(--primary-700-hsl) / 0.7),
1px 1px 0 hsl(var(--primary-700-hsl) / 0.7);
}
.background-opacity-medium ._752971923a1e6683-markup {
color: var(--primary-100);
text-shadow:
0 0 1px var(--primary-600),
1px 1px 0 var(--primary-600);
}
.background-opacity-medium ._752971923a1e6683-markup a {
color: var(--text-link);
text-shadow:
0 0 1px hsl(var(--primary-700-hsl) / 0.8),
1px 1px 0 hsl(var(--primary-700-hsl) / 0.8);
}
.background-opacity-high ._752971923a1e6683-markup {
color: var(--primary-100);
text-shadow:
0 0 1px var(--primary-600),
1px 1px 0 var(--primary-600);
}
.background-opacity-low pre,
.background-opacity-medium pre {
border-color: hsl(var(--primary-500-hsl) / 0.2);
}
.background-opacity-high pre,
.background-opacity-low pre,
.background-opacity-medium pre {
background: hsl(var(--primary-630-hsl) / 0.3);
border-color: hsl(var(--primary-700-hsl) / 0.1);
}
.background-opacity-high code,
.background-opacity-low code,
.background-opacity-medium code {
background-color: transparent;
}
.background-opacity-high code.inline,
.background-opacity-low code.inline,
.background-opacity-medium code.inline {
background-color: hsl(var(--primary-630-hsl) / 0.3);
}
.background-opacity-high .mention,
.background-opacity-low .mention,
.background-opacity-medium .mention {
text-shadow:
0 1px 1px var(--brand-600),
0 1px 0 var(--brand-600);
}
.overlay-unlocked code,
.overlay-unlocked code.inline {
background: var(--background-base-lower);
border-color: var(--background-base-lowest);
}
._752971923a1e6683-roleMention {
filter: saturate(var(--saturation-factor, 1));
font-weight: var(--font-weight-medium);
}
._752971923a1e6683-rolePopout {
background-color: var(--background-surface-higher);
border: 1px solid var(--border-subtle);
border-radius: 8px;
box-shadow: var(--shadow-high);
display: flex;
max-height: calc(100vh - 20px);
width: 240px;
}
._752971923a1e6683-roleHeader {
height: 40px;
padding-block: 12px 0;
padding-inline: 16px 8px;
}
._752971923a1e6683-roleScroller {
margin-bottom: 8px;
margin-top: 4px;
}
._752971923a1e6683-timestamp {
background-color: var(--background-mod-normal);
border-radius: 3px;
padding: 0 2px;
}
._752971923a1e6683-timestampTooltip {
max-width: unset;
}
.enable-forced-colors ._752971923a1e6683-blockquoteDivider {
background-color: CanvasText;
}
.enable-forced-colors code.inline {
position: relative;
}
.enable-forced-colors code.inline:after,
.enable-forced-colors code.inline:before {
border: 1px solid CanvasText;
content: "";
display: inline-block;
height: 1em;
margin-bottom: -3px;
width: 2px;
}
.enable-forced-colors code.inline:before {
border-right-width: 0;
}
.enable-forced-colors code.inline:after {
border-left-width: 0;
}
.enable-forced-colors ._752971923a1e6683-roleMention,
.enable-forced-colors .mention {
background-color: ButtonFace;
color: ButtonText;
text-decoration: underline;
}
.a9c2d134ce151c13-icon {
-webkit-margin-end: 0.1rem;
margin-inline-end: 0.1rem;
}
._7b4844115ea313e4-svgContentRight {
fill: var(--background-base-low);
}
._7b4844115ea313e4-svgContentLeft {
fill: var(--background-base-lowest);
}
._7b4844115ea313e4-svgContentLines,
._7b4844115ea313e4-svgDots {
fill: var(--background-mod-strong);
}
._7b4844115ea313e4-svgTag {
fill: var(--text-subtle);
}
._124c842e1d810007-wrapper {
background-color: var(--background-surface-high);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 16px;
max-width: 432px;
min-width: 160px;
padding: 16px;
text-indent: 0;
}
._124c842e1d810007-titleRegion {
align-items: center;
display: flex;
justify-content: flex-start;
text-transform: uppercase;
}
._124c842e1d810007-infoIcon,
._124c842e1d810007-title {
display: block;
flex: 0 0 auto;
}
._124c842e1d810007-infoIcon {
height: 16px;
width: 16px;
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
._124c842e1d810007-copyLink {
align-items: center;
display: flex;
font-weight: var(--font-weight-semibold);
justify-content: flex-start;
position: relative;
-webkit-padding-end: 8px;
padding-inline-end: 8px;
-webkit-margin-start: 16px;
cursor: pointer;
margin-inline-start: 16px;
}
._124c842e1d810007-copyLink:before {
content: "";
display: block;
height: 12px;
inset-inline-start: -8px;
position: absolute;
top: 2px;
width: 1px;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
pointer-events: none;
}
._124c842e1d810007-copyLink._124c842e1d810007-copied {
cursor: default;
}
._124c842e1d810007-copyLinkIcon {
display: block;
height: 16px;
width: 16px;
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
._124c842e1d810007-content {
align-items: center;
display: flex;
flex: 0 0 auto;
flex-flow: row wrap;
gap: 16px;
}
._124c842e1d810007-infoLink._124c842e1d810007-infoLink {
color: var(--text-default);
cursor: pointer;
}
._124c842e1d810007-buildInfo {
flex: 1000 0 auto;
height: 40px;
overflow: hidden;
}
._124c842e1d810007-button {
flex: 1 0 auto;
}
._124c842e1d810007-buttonSize {
height: 40px;
width: 80px;
}
._124c842e1d810007-subHead {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._124c842e1d810007-icon {
display: block;
flex: 0 0 auto;
}
._124c842e1d810007-buildDetails {
font-size: 16px;
font-weight: var(--font-weight-medium);
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._124c842e1d810007-barLoader {
border-radius: 8px;
flex: 0 0 auto;
height: 16px;
width: 84%;
}
._124c842e1d810007-barTitle {
margin-bottom: 4px;
margin-top: 2px;
width: 45%;
}
._124c842e1d810007-buttonLoader {
border-radius: 4px;
height: 40px;
width: 80px;
}
.theme-light ._124c842e1d810007-disabledButtonOverride {
background-color: var(--primary-300) !important;
}
._124c842e1d810007-copyLink:before {
background-color: var(--background-base-low);
}
._124c842e1d810007-buildDetails,
._124c842e1d810007-copyLink:hover,
._124c842e1d810007-infoLink:hover {
color: var(--text-strong);
}
._124c842e1d810007-copyLink._124c842e1d810007-copied,
._124c842e1d810007-copyLink._124c842e1d810007-copied:hover {
color: var(--text-feedback-positive);
}
._124c842e1d810007-barLoader,
._124c842e1d810007-buttonLoader {
background-color: var(--background-base-low);
}
._5c1cfd8731d41933-root {
background-color: var(--background-surface-high);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: var(--space-8);
margin-top: var(--space-8);
max-width: 360px;
min-width: 160px;
padding: var(--space-12);
width: auto;
}
._5c1cfd8731d41933-root div[role="button"] {
-webkit-margin-start: 0;
margin-inline-start: 0;
}
._5c1cfd8731d41933-header {
align-items: center;
display: grid;
}
._5c1cfd8731d41933-experimentOverride {
flex: 1;
}
._5c1cfd8731d41933-copyLinkButton {
color: var(--icon-subtle);
cursor: pointer;
}
._5c1cfd8731d41933-copyLinkButton:hover {
color: var(--icon-strong);
}
._15328df48e61432b-gameArtHero {
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
height: 106px;
-webkit-mask-image: linear-gradient(183deg, #000, #000 50px, transparent 325px);
mask-image: linear-gradient(183deg, #000, #000 50px, transparent 325px);
position: absolute;
top: 0;
inset-inline: 0;
pointer-events: none;
width: 100%;
}
._15328df48e61432b-iconContainer {
z-index: 10;
-webkit-margin-start: 16px;
background: var(--background-surface-high);
border-radius: 14px;
height: 80px;
margin-inline-start: 16px;
margin-top: 64px;
padding: 6px;
width: 80px;
}
._15328df48e61432b-headingContainer {
padding: 8px 16px 0;
}
._15328df48e61432b-bodyContainer {
gap: 12px;
padding: 12px 16px 16px;
}
._15328df48e61432b-bodyContainer,
._15328df48e61432b-summaryContainer {
display: flex;
flex-direction: column;
}
._15328df48e61432b-summaryContainer {
gap: 8px;
}
._15328df48e61432b-clickable {
cursor: pointer;
}
._15328df48e61432b-gameIcon {
background: var(--background-surface-high);
border-radius: 8px;
}
._15328df48e61432b-gameIconFallback {
border-radius: 8px;
padding: 24px;
}
._15328df48e61432b-container {
align-items: flex-start;
background: var(--background-surface-high);
border: 1px solid var(--border-subtle);
border-radius: 16px;
flex-direction: column;
overflow: hidden;
position: relative;
}
._15328df48e61432b-container,
._15328df48e61432b-error {
display: flex;
}
._15328df48e61432b-actionButtonsContainer {
display: flex;
flex-direction: row;
gap: 8px;
inset-inline-end: 16px;
position: absolute;
top: 16px;
z-index: 10;
}
._15328df48e61432b-actionButton {
align-items: center;
background: rgba(0, 0, 0, 0.5);
border: 1px solid var(--border-subtle);
border-radius: 60px;
box-sizing: border-box;
cursor: pointer;
display: flex;
height: 32px;
justify-content: center;
padding: 6px;
width: 32px;
}
.be1af12b89c27a56-container {
border-radius: 16px;
box-shadow: var(--elevation-high);
display: flex;
flex-direction: column;
overflow: hidden;
width: 300px;
}
.be1af12b89c27a56-spinnerContainer {
background: var(--background-surface-highest);
padding: 16px;
}
._1bb4614d109642f4-icon {
display: inline-block;
vertical-align: middle;
-webkit-margin-end: 3px;
filter: saturate(var(--saturation-factor, 1));
margin-inline-end: 3px;
margin-bottom: 0.2rem;
-webkit-user-drag: none;
background-size: 100%;
}
._1bb4614d109642f4-imageIcon {
height: 1em;
width: 1em;
}
._1bb4614d109642f4-name {
overflow: hidden;
text-overflow: ellipsis;
}
.e599633bf6c09eb3-icon {
margin-bottom: 0.2rem;
vertical-align: middle;
-webkit-margin-end: var(--space-4);
margin-inline-end: var(--space-4);
}
.hljs {
border-radius: 4px;
display: block;
overflow-x: auto;
padding: 0.5em;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
background: var(--background-base-lower);
color: var(--text-default);
}
.theme-dark .hljs-doctag,
.theme-dark .hljs-keyword,
.theme-dark .hljs-meta .hljs-keyword,
.theme-dark .hljs-template-tag,
.theme-dark .hljs-template-variable,
.theme-dark .hljs-type,
.theme-dark .hljs-variable.language_ {
color: #ff7b72;
}
.theme-dark .hljs-title,
.theme-dark .hljs-title.class_,
.theme-dark .hljs-title.class_.inherited__,
.theme-dark .hljs-title.function_ {
color: #d2a8ff;
}
.theme-dark .hljs-attr,
.theme-dark .hljs-attribute,
.theme-dark .hljs-literal,
.theme-dark .hljs-meta,
.theme-dark .hljs-number,
.theme-dark .hljs-operator,
.theme-dark .hljs-selector-attr,
.theme-dark .hljs-selector-class,
.theme-dark .hljs-selector-id,
.theme-dark .hljs-variable {
color: #79c0ff;
}
.theme-dark .hljs-meta .hljs-string,
.theme-dark .hljs-regexp,
.theme-dark .hljs-string {
color: #a5d6ff;
}
.theme-dark .hljs-built_in,
.theme-dark .hljs-symbol {
color: #ffa657;
}
.theme-dark .hljs-code,
.theme-dark .hljs-comment,
.theme-dark .hljs-formula {
color: #8b949e;
}
.theme-dark .hljs-name,
.theme-dark .hljs-quote,
.theme-dark .hljs-selector-pseudo,
.theme-dark .hljs-selector-tag {
color: #7ee787;
}
.theme-dark .hljs-subst {
color: #c9d1d9;
}
.theme-dark .hljs-section {
color: #1f6feb;
font-weight: 700;
}
.theme-dark .hljs-bullet {
color: #f2cc60;
}
.theme-dark .hljs-emphasis {
color: #c9d1d9;
font-style: italic;
}
.theme-dark .hljs-strong {
color: #c9d1d9;
font-weight: 700;
}
.theme-dark .hljs-addition {
background-color: #033a16;
color: #aff5b4;
}
.theme-dark .hljs-deletion {
background-color: #67060c;
color: #ffdcd7;
}
.theme-light .hljs-doctag,
.theme-light .hljs-keyword,
.theme-light .hljs-meta .hljs-keyword,
.theme-light .hljs-template-tag,
.theme-light .hljs-template-variable,
.theme-light .hljs-type,
.theme-light .hljs-variable.language_ {
color: #d73a49;
}
.theme-light .hljs-title,
.theme-light .hljs-title.class_,
.theme-light .hljs-title.class_.inherited__,
.theme-light .hljs-title.function_ {
color: #6f42c1;
}
.theme-light .hljs-attr,
.theme-light .hljs-attribute,
.theme-light .hljs-literal,
.theme-light .hljs-meta,
.theme-light .hljs-number,
.theme-light .hljs-operator,
.theme-light .hljs-selector-attr,
.theme-light .hljs-selector-class,
.theme-light .hljs-selector-id,
.theme-light .hljs-variable {
color: #005cc5;
}
.theme-light .hljs-meta .hljs-string,
.theme-light .hljs-regexp,
.theme-light .hljs-string {
color: #032f62;
}
.theme-light .hljs-built_in,
.theme-light .hljs-symbol {
color: #e36209;
}
.theme-light .hljs-code,
.theme-light .hljs-comment,
.theme-light .hljs-formula {
color: #6a737d;
}
.theme-light .hljs-name,
.theme-light .hljs-quote,
.theme-light .hljs-selector-pseudo,
.theme-light .hljs-selector-tag {
color: #22863a;
}
.theme-light .hljs-subst {
color: #24292e;
}
.theme-light .hljs-section {
color: #005cc5;
font-weight: 700;
}
.theme-light .hljs-bullet {
color: #735c0f;
}
.theme-light .hljs-emphasis {
color: #24292e;
font-style: italic;
}
.theme-light .hljs-strong {
color: #24292e;
font-weight: 700;
}
.theme-light .hljs-addition {
background-color: #f0fff4;
color: #22863a;
}
.theme-light .hljs-deletion {
background-color: #ffeef0;
color: #b31d28;
}
.cc310a58582d8b5a-hljs {
border-radius: 4px;
display: block;
overflow-x: auto;
padding: 0.5em;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
color: var(--text-default);
}
.cc310a58582d8b5a-hljs-doctag,
.cc310a58582d8b5a-hljs-keyword,
.cc310a58582d8b5a-hljs-meta .cc310a58582d8b5a-hljs-keyword,
.cc310a58582d8b5a-hljs-template-tag,
.cc310a58582d8b5a-hljs-template-variable,
.cc310a58582d8b5a-hljs-type,
.cc310a58582d8b5a-hljs-variable.cc310a58582d8b5a-language_ {
color: var(--text-code-keyword);
}
.cc310a58582d8b5a-hljs-title,
.cc310a58582d8b5a-hljs-title.cc310a58582d8b5a-class_,
.cc310a58582d8b5a-hljs-title.cc310a58582d8b5a-class_.cc310a58582d8b5a-inherited__,
.cc310a58582d8b5a-hljs-title.cc310a58582d8b5a-function_ {
color: var(--text-code-title);
}
.cc310a58582d8b5a-hljs-attr,
.cc310a58582d8b5a-hljs-attribute,
.cc310a58582d8b5a-hljs-literal,
.cc310a58582d8b5a-hljs-meta,
.cc310a58582d8b5a-hljs-number,
.cc310a58582d8b5a-hljs-operator,
.cc310a58582d8b5a-hljs-selector-attr,
.cc310a58582d8b5a-hljs-selector-class,
.cc310a58582d8b5a-hljs-selector-id,
.cc310a58582d8b5a-hljs-variable {
color: var(--text-code-variable);
}
.cc310a58582d8b5a-hljs-meta .cc310a58582d8b5a-hljs-string,
.cc310a58582d8b5a-hljs-regexp,
.cc310a58582d8b5a-hljs-string {
color: var(--text-code-string);
}
.cc310a58582d8b5a-hljs-built_in,
.cc310a58582d8b5a-hljs-symbol {
color: var(--text-code-builtin);
}
.cc310a58582d8b5a-hljs-code,
.cc310a58582d8b5a-hljs-comment,
.cc310a58582d8b5a-hljs-formula {
color: var(--text-code-comment);
}
.cc310a58582d8b5a-hljs-name,
.cc310a58582d8b5a-hljs-quote,
.cc310a58582d8b5a-hljs-selector-pseudo,
.cc310a58582d8b5a-hljs-selector-tag {
color: var(--text-code-tag);
}
.cc310a58582d8b5a-hljs-subst {
color: var(--text-code);
}
.cc310a58582d8b5a-hljs-section {
color: var(--text-code-section);
font-weight: 700;
}
.cc310a58582d8b5a-hljs-bullet {
color: var(--text-code-bullet);
}
.cc310a58582d8b5a-hljs-emphasis {
color: var(--text-code);
font-style: italic;
}
.cc310a58582d8b5a-hljs-strong {
color: var(--text-code);
font-weight: 700;
}
.cc310a58582d8b5a-hljs-addition {
background-color: var(--background-code-addition);
color: var(--text-code-addition);
}
.cc310a58582d8b5a-hljs-deletion {
background-color: var(--background-code-deletion);
color: var(--text-code-deletion);
}
.c9d15c8a962de3c8-container {
align-items: center;
display: flex;
gap: 4px;
}
.c9d15c8a962de3c8-container.c9d15c8a962de3c8-textXs {
--custom-activity-status-icon-size: 12px;
--custom-activity-status-emoji-size: 14px;
}
.c9d15c8a962de3c8-container.c9d15c8a962de3c8-textSm {
--custom-activity-status-icon-size: 14px;
--custom-activity-status-emoji-size: 16px;
}
.c9d15c8a962de3c8-container:empty {
display: none;
}
.c9d15c8a962de3c8-activityContainer {
align-items: center;
display: flex;
flex-shrink: 0;
gap: 4px;
max-width: 100%;
overflow: hidden;
}
.c9d15c8a962de3c8-activityContainer.c9d15c8a962de3c8-iconOnly {
gap: 1px;
}
.c9d15c8a962de3c8-activitiesTooltip,
.c9d15c8a962de3c8-tooltipText {
word-break: break-word;
}
.c9d15c8a962de3c8-activitiesTooltip {
align-items: flex-start;
display: flex;
gap: 4px;
padding: 8px;
}
.c9d15c8a962de3c8-activitiesTooltip .c9d15c8a962de3c8-icon {
height: 14px;
position: relative;
top: 2px;
width: 14px;
}
.c9d15c8a962de3c8-activitiesTooltip.c9d15c8a962de3c8-hasMultipleActivities {
align-items: start;
display: grid;
grid-template-columns: 14px 1fr;
}
.c9d15c8a962de3c8-icon {
flex-shrink: 0;
height: var(--custom-activity-status-icon-size);
width: var(--custom-activity-status-icon-size);
}
.c9d15c8a962de3c8-truncated {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.c9d15c8a962de3c8-textWithIconContainer {
max-width: 100%;
min-width: var(--custom-activity-status-icon-size);
}
.c9d15c8a962de3c8-activityCounter {
flex-shrink: 0;
}
.c9d15c8a962de3c8-emoji {
flex: 0 0 auto;
-webkit-margin-end: 0;
height: var(--custom-activity-status-emoji-size);
margin-inline-end: 0;
width: var(--custom-activity-status-emoji-size);
}
.c9d15c8a962de3c8-dot {
flex-shrink: 0;
}
.c9d15c8a962de3c8-dot:first-child,
.c9d15c8a962de3c8-dot:last-child {
display: none;
}
.c9d15c8a962de3c8-questsIcon {
flex-shrink: 0;
}
.c9d15c8a962de3c8-hangStatusIcon {
height: 14px;
width: 14px;
}
.c9d15c8a962de3c8-customStatusLabel {
white-space: nowrap;
}
._82f0793afa59e5dc-botTag {
align-items: center;
display: inline-flex;
flex-shrink: 0;
font-size: 0.625rem;
text-indent: 0;
text-transform: uppercase;
vertical-align: top;
}
._82f0793afa59e5dc-px._82f0793afa59e5dc-botTag {
border-radius: 4px;
height: 16px;
padding: 0 4px;
}
._82f0793afa59e5dc-rem._82f0793afa59e5dc-botTag {
border-radius: 4px;
height: 0.9375rem;
margin-top: 0.2em;
padding: 0 0.275rem;
}
._82f0793afa59e5dc-rem._82f0793afa59e5dc-botTag._82f0793afa59e5dc-botTagOP {
margin-top: 0.25em;
}
._82f0793afa59e5dc-botTagRegular {
background: var(--background-brand);
color: var(--white);
}
._82f0793afa59e5dc-botTagInvert {
background: var(--white);
color: var(--brand-500);
}
._82f0793afa59e5dc-botTagAI {
background: var(--text-feedback-positive);
color: var(--white);
}
._82f0793afa59e5dc-botTagNotStaffWarning {
background: var(--notice-background-warning);
color: var(--notice-text-warning);
}
._82f0793afa59e5dc-botTagVerified {
display: inline-block;
}
._82f0793afa59e5dc-px ._82f0793afa59e5dc-botTagVerified {
height: 16px;
width: 16px;
-webkit-margin-start: -2px;
margin-inline-start: -2px;
}
._82f0793afa59e5dc-rem ._82f0793afa59e5dc-botTagVerified {
height: 1rem;
width: 1rem;
-webkit-margin-start: -0.2rem;
margin-inline-start: -0.2rem;
margin-top: -0.02rem;
}
._82f0793afa59e5dc-botText {
font-weight: var(--font-weight-semibold);
position: relative;
vertical-align: top;
}
._82f0793afa59e5dc-px ._82f0793afa59e5dc-botText {
font-size: 12px;
line-height: 16px;
}
._82f0793afa59e5dc-rem ._82f0793afa59e5dc-botText {
font-size: 0.8rem;
line-height: 0.9375rem;
}
._82f0793afa59e5dc-botTagOP {
background-color: var(--brand-260);
border-radius: 8px;
color: var(--brand-560);
}
@keyframes _27cc6d8d37ac374f-placeholderPulse {
0% {
opacity: 0.5;
}
50% {
opacity: 1;
}
to {
opacity: 0.5;
}
}
._27cc6d8d37ac374f-multiplePlaceholder,
._27cc6d8d37ac374f-placeholder {
box-sizing: border-box;
cursor: pointer;
overflow: hidden;
}
._27cc6d8d37ac374f-multiplePlaceholderAnimated,
._27cc6d8d37ac374f-placeholderAnimated {
animation: _27cc6d8d37ac374f-placeholderPulse 3s ease-in-out infinite;
}
._27cc6d8d37ac374f-placeholder {
align-items: center;
display: flex;
height: 44px;
}
._27cc6d8d37ac374f-mulitplePlaceholderUsername,
._27cc6d8d37ac374f-placeholderUsername {
border-radius: 8px;
height: 14px;
}
._27cc6d8d37ac374f-mulitplePlaceholderUsername {
margin-top: 12px;
}
._27cc6d8d37ac374f-avatarSmall {
height: 32px;
width: 32px;
}
._27cc6d8d37ac374f-avatarLarge {
height: 40px;
width: 40px;
}
._27cc6d8d37ac374f-placeholderAvatar {
border-radius: 50%;
}
._27cc6d8d37ac374f-mulitplePlaceholderUsername,
._27cc6d8d37ac374f-placeholderAvatar,
._27cc6d8d37ac374f-placeholderUsername {
background-color: var(--background-base-low);
}
._27cc6d8d37ac374f-avatarMasked {
-webkit-mask-image: url(/assets/1f9b76e0279b91a4.svg);
mask-image: url(/assets/1f9b76e0279b91a4.svg);
-webkit-mask-position: 0 0;
mask-position: 0 0;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-margin-end: -6px;
margin-inline-end: -6px;
}
._4bbc6dc06e75ad52-container {
border-radius: inherit;
height: 100%;
inset-inline-start: 0;
overflow: hidden;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
}
._4bbc6dc06e75ad52-fitInAccount {
height: calc(100% + 2px);
inset-inline-start: 0;
top: -1px;
width: calc(100% + 1px);
}
._4bbc6dc06e75ad52-fadeIn {
animation: _4bbc6dc06e75ad52-fadeIn 0.12s ease-in forwards;
opacity: 0;
}
@keyframes _4bbc6dc06e75ad52-fadeIn {
0% {
opacity: 0;
}
to {
opacity: 1;
}
}
._4bbc6dc06e75ad52-img {
height: 100%;
inset-inline-end: 0;
object-position: right;
pointer-events: none;
position: absolute;
transition:
opacity 0.3s ease,
transform 0.3s ease;
width: auto;
}
._4bbc6dc06e75ad52-img,
._4bbc6dc06e75ad52-img._4bbc6dc06e75ad52-hover {
opacity: 0.6;
}
._4bbc6dc06e75ad52-img._4bbc6dc06e75ad52-selected {
opacity: 0.9;
}
._4bbc6dc06e75ad52-img._4bbc6dc06e75ad52-channel._4bbc6dc06e75ad52-hover {
opacity: 0.4;
}
._4bbc6dc06e75ad52-img._4bbc6dc06e75ad52-channel._4bbc6dc06e75ad52-selected {
opacity: 0.9;
}
._4bbc6dc06e75ad52-img._4bbc6dc06e75ad52-account,
._4bbc6dc06e75ad52-img._4bbc6dc06e75ad52-account._4bbc6dc06e75ad52-hover {
opacity: 0.4;
}
._4bbc6dc06e75ad52-img._4bbc6dc06e75ad52-preview {
opacity: 0.8;
}
._4bbc6dc06e75ad52-img._4bbc6dc06e75ad52-mini_preview,
._4bbc6dc06e75ad52-img._4bbc6dc06e75ad52-mini_preview._4bbc6dc06e75ad52-hover,
._4bbc6dc06e75ad52-img._4bbc6dc06e75ad52-preview._4bbc6dc06e75ad52-hover {
opacity: 1;
}
._4bbc6dc06e75ad52-videoContainer {
height: 100%;
overflow: hidden;
width: 100%;
}
._91a9d7f7e5248a56-container {
border-radius: var(--radius-sm);
box-sizing: border-box;
color: var(--channels-default);
display: block;
padding: 1px 0;
transition: none;
}
._91a9d7f7e5248a56-container ._91a9d7f7e5248a56-muted {
color: var(--interactive-muted);
}
._91a9d7f7e5248a56-childContainer {
border-radius: inherit;
padding-block: 0;
padding-inline: var(--space-xs) 8px;
}
._91a9d7f7e5248a56-childContainer._91a9d7f7e5248a56-nameplated {
position: relative;
-webkit-padding-end: 32px;
padding-inline-end: 32px;
}
._91a9d7f7e5248a56-muted ._91a9d7f7e5248a56-avatar {
opacity: 0.3;
}
._91a9d7f7e5248a56-clickable._91a9d7f7e5248a56-container:hover,
._91a9d7f7e5248a56-clickable._91a9d7f7e5248a56-container:hover ._91a9d7f7e5248a56-muted {
color: var(--interactive-text-hover);
}
._91a9d7f7e5248a56-clickable._91a9d7f7e5248a56-container:hover ._91a9d7f7e5248a56-avatar {
opacity: 1;
}
._91a9d7f7e5248a56-clickable._91a9d7f7e5248a56-container:active,
._91a9d7f7e5248a56-highlighted._91a9d7f7e5248a56-container,
._91a9d7f7e5248a56-selected._91a9d7f7e5248a56-container {
color: var(--interactive-text-active);
}
._91a9d7f7e5248a56-layout {
align-items: center;
border-radius: inherit;
display: flex;
flex: 0 1 auto;
height: 42px;
max-width: 100%;
min-width: 0;
position: relative;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
z-index: 1;
}
._91a9d7f7e5248a56-wrappedLayout {
height: auto;
padding: 5px 8px;
}
._91a9d7f7e5248a56-clickable:hover ._91a9d7f7e5248a56-childContainer {
background-color: var(--interactive-background-hover);
cursor: pointer;
}
._91a9d7f7e5248a56-clickable:active ._91a9d7f7e5248a56-childContainer {
background-color: var(--interactive-background-active);
}
._91a9d7f7e5248a56-selected ._91a9d7f7e5248a56-childContainer {
background-color: var(--interactive-background-selected);
}
._91a9d7f7e5248a56-avatar {
align-items: center;
display: flex;
flex: 0 0 auto;
height: 32px;
justify-content: center;
width: 32px;
-webkit-margin-end: 12px;
margin-inline-end: 12px;
}
._91a9d7f7e5248a56-content {
flex: 1 1 auto;
min-width: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
._91a9d7f7e5248a56-name {
display: flex;
flex: 0 1 auto;
font-size: 16px;
font-weight: var(--font-weight-medium);
line-height: 20px;
min-width: 0;
}
._91a9d7f7e5248a56-wrappedName {
overflow: none;
white-space: normal;
}
._91a9d7f7e5248a56-nameAndDecorators {
align-items: center;
display: flex;
justify-content: flex-start;
}
._91a9d7f7e5248a56-subText {
margin-top: -2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._91a9d7f7e5248a56-subText:empty {
display: none;
}
._91a9d7f7e5248a56-children {
flex: 0 0 auto;
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
.e5de7811b2777bfa-twoColorGradient {
background: linear-gradient(to right, var(--custom-gradient-color-1), var(--custom-gradient-color-2), var(--custom-gradient-color-1));
}
.e5de7811b2777bfa-threeColorGradient {
background: linear-gradient(to right, var(--custom-gradient-color-1), var(--custom-gradient-color-2), var(--custom-gradient-color-3), var(--custom-gradient-color-1));
}
.e5de7811b2777bfa-usernameGradient {
-webkit-background-clip: text;
background-clip: text;
background-size: 100px auto;
-webkit-text-fill-color: transparent;
}
.e5de7811b2777bfa-usernameGlow {
filter: blur(4px);
opacity: 0;
z-index: -1;
}
.e5de7811b2777bfa-usernameGlow,
.e5de7811b2777bfa-usernameGlowActive {
transition: opacity 0.1s ease-in-out;
}
.e5de7811b2777bfa-usernameGlowActive {
opacity: 0.7;
}
.e5de7811b2777bfa-emoji {
-webkit-text-fill-color: initial;
}
.e5de7811b2777bfa-convenienceGlowGradient {
position: relative;
z-index: 0;
}
.theme-light .e5de7811b2777bfa-usernameGradient {
filter: brightness(0.85);
}
.e5de7811b2777bfa-convenienceGlowGradient:after {
background: inherit;
-webkit-background-clip: text;
background-clip: text;
content: attr(data-text) / "";
inset: 0;
position: absolute;
-webkit-text-fill-color: transparent;
filter: blur(4px);
opacity: 0;
text-indent: 0;
transition: opacity 0.1s ease-in-out;
z-index: -1;
}
.e5de7811b2777bfa-convenienceGlowGradientActive:after {
opacity: 0.7;
transition: opacity 0.1s ease-in-out;
}
.full-motion.app-focused:not(.hardware-acceleration-disabled) .e5de7811b2777bfa-animateGradient {
animation: e5de7811b2777bfa-gradientUsernameAnimation 1.5s linear infinite;
}
.full-motion.app-focused:not(.hardware-acceleration-disabled) .e5de7811b2777bfa-gradientDotAnimation:hover {
animation: e5de7811b2777bfa-gradientDotAnimation 2.5s linear infinite;
}
@keyframes e5de7811b2777bfa-gradientUsernameAnimation {
0% {
background-position: 0;
}
to {
background-position: 100px;
}
}
@keyframes e5de7811b2777bfa-gradientDotAnimation {
0% {
background-position: 0;
}
to {
background-position: 12px;
}
}
@keyframes e5de7811b2777bfa-gradientGlowFadeInAnimation {
0% {
opacity: 0;
}
to {
opacity: 0.7;
}
}
._89a318b9387eda06-dnsFont {
font-synthesis: none;
}
._89a318b9387eda06-cherryBomb {
font-family:
Cherry Bomb One,
gg sans,
Arial,
sans-serif;
letter-spacing: 0.04em;
}
._89a318b9387eda06-cherryBomb._89a318b9387eda06-safari {
transform: translateY(-1px);
}
._89a318b9387eda06-chicle {
font-family:
Chicle,
gg sans,
Arial,
sans-serif;
}
._89a318b9387eda06-museoModerno {
font-family:
Museo Moderno,
gg sans,
Arial,
sans-serif;
letter-spacing: 0.01em;
}
._89a318b9387eda06-neoCastel {
font-family:
Neo Castel,
gg sans,
Arial,
sans-serif;
letter-spacing: 0.02em;
}
._89a318b9387eda06-neoCastel._89a318b9387eda06-safari {
transform: translateY(-1px);
}
._89a318b9387eda06-pixelify {
font-family:
Pixelify Sans,
gg sans,
Arial,
sans-serif;
letter-spacing: 0.02em;
}
._89a318b9387eda06-sinistre {
font-family:
Sinistre,
gg sans,
Arial,
sans-serif;
letter-spacing: 0.01em;
}
._89a318b9387eda06-zillaSlab {
font-family:
Zilla Slab,
gg sans,
Arial,
sans-serif;
letter-spacing: 0.03em;
}
.dfb989b3f435152a-container {
display: inline-flex;
max-width: 100%;
min-width: 0;
opacity: var(--custom-display-name-styles-font-opacity, 1);
perspective: 1px;
position: relative;
text-indent: 0;
z-index: 0;
}
.dfb989b3f435152a-container.dfb989b3f435152a-inProfile {
display: flex;
}
.dfb989b3f435152a-innerContainer {
flex: 1 1 0%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: var(--custom-display-name-styles-wrap);
}
.dfb989b3f435152a-underlineOnHover:not(.dfb989b3f435152a-pop):hover {
text-decoration: underline;
-webkit-text-decoration-color: var(--custom-display-name-styles-main-color);
text-decoration-color: var(--custom-display-name-styles-main-color);
}
.dfb989b3f435152a-glowContainer {
color: transparent;
height: 100%;
inset: 0;
overflow: hidden;
position: absolute;
text-overflow: ellipsis;
width: 100%;
}
.dfb989b3f435152a-emoji {
position: relative;
z-index: 1;
}
.dfb989b3f435152a-showEffect.dfb989b3f435152a-container {
opacity: 1;
}
.dfb989b3f435152a-showEffect.dfb989b3f435152a-container .dfb989b3f435152a-solid {
color: var(--custom-display-name-styles-main-color);
}
.dfb989b3f435152a-showEffect.dfb989b3f435152a-container .dfb989b3f435152a-gradient {
background: linear-gradient(to bottom right, var(--custom-display-name-styles-gradient-start-color) 10%, var(--custom-display-name-styles-gradient-end-color) 90%);
background-clip: text;
-webkit-background-clip: text;
background-size: 100% auto;
-webkit-text-fill-color: transparent;
position: relative;
z-index: 0;
}
.dfb989b3f435152a-showEffect.dfb989b3f435152a-container .dfb989b3f435152a-neon {
paint-order: stroke fill;
-webkit-text-stroke-width: calc(1px + 0.04em);
-webkit-text-stroke-color: hsl(from var(--custom-display-name-styles-main-color) h calc(s * 1.2) calc(min(60, l + 10 * clamp(0, (60 - l), 1))));
color: var(--white);
position: relative;
z-index: 0;
-webkit-padding-start: calc(1px + 0.04em);
padding-inline-start: calc(1px + 0.04em);
-webkit-margin-start: calc(-1px - 0.04em);
margin-inline-start: calc(-1px - 0.04em);
margin-bottom: calc(-1px - 0.04em);
padding-bottom: calc(1px + 0.04em);
}
.dfb989b3f435152a-showEffect.dfb989b3f435152a-container .dfb989b3f435152a-neonGlow {
background: linear-gradient(
to bottom left,
var(--custom-display-name-styles-light-2-color) 0,
var(--custom-display-name-styles-light-2-color) 6%,
var(--custom-display-name-styles-main-color) 20%,
var(--custom-display-name-styles-light-1-color) 50%,
var(--custom-display-name-styles-light-2-color) 56%,
var(--custom-display-name-styles-main-color) 70%,
var(--custom-display-name-styles-light-1-color) 100%
);
background-clip: text;
-webkit-background-clip: text;
background-position: 100% 0;
background-size: 200% 200%;
-webkit-text-fill-color: transparent;
color: var(--custom-display-name-styles-main-color);
filter: blur(calc(1px + 0.12em));
opacity: 0.8;
-webkit-text-stroke-width: calc(1px + 0.04em);
-webkit-text-stroke-color: transparent;
perspective: 1px;
z-index: -1;
}
.dfb989b3f435152a-showEffect.dfb989b3f435152a-container .dfb989b3f435152a-toon {
--custom-toon-stroke-width: calc(1.6px + 0.04em);
--custom-toon-margin: calc(var(--custom-toon-stroke-width) * -1);
paint-order: stroke fill;
position: relative;
-webkit-text-stroke-width: var(--custom-toon-stroke-width);
-webkit-text-stroke-color: var(--custom-display-name-styles-toon-stroke-color);
color: var(--custom-display-name-styles-toon-stroke-color);
-webkit-padding-start: var(--custom-toon-stroke-width);
padding-bottom: var(--custom-toon-stroke-width);
padding-inline-start: var(--custom-toon-stroke-width);
-webkit-padding-end: var(--custom-toon-stroke-width);
padding-inline-end: var(--custom-toon-stroke-width);
-webkit-margin-start: var(--custom-toon-margin);
margin-inline-start: var(--custom-toon-margin);
margin-bottom: var(--custom-toon-margin);
-webkit-margin-end: var(--custom-toon-margin);
margin-inline-end: var(--custom-toon-margin);
transition: color 266ms cubic-bezier(0.43, 0.21, 0.27, 0.78);
}
.dfb989b3f435152a-showEffect.dfb989b3f435152a-container .dfb989b3f435152a-toon:before {
background: linear-gradient(
180deg,
var(--white) 0,
var(--custom-display-name-styles-light-2-color) 8%,
var(--custom-display-name-styles-light-1-color) 15%,
var(--custom-display-name-styles-main-color) 25%,
var(--custom-display-name-styles-light-2-color) 45%,
var(--custom-display-name-styles-main-color) 55%,
var(--white) 75%,
var(--custom-display-name-styles-light-2-color) 83%,
var(--custom-display-name-styles-light-1-color) 90%,
var(--custom-display-name-styles-main-color) 100%
);
background-clip: text;
-webkit-background-clip: text;
background-size: 100% 400%;
content: attr(data-username-with-effects);
inset: 0;
padding-inline: var(--custom-toon-stroke-width);
padding-bottom: var(--custom-toon-margin);
position: absolute;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 0;
-webkit-text-stroke-color: transparent;
overflow: hidden;
text-overflow: ellipsis;
transition: opacity 266ms cubic-bezier(0.43, 0.21, 0.27, 0.78);
white-space: var(--custom-display-name-styles-wrap);
}
.dfb989b3f435152a-showEffect.dfb989b3f435152a-container .dfb989b3f435152a-pop {
--custom-pop-stroke-width: calc(1.2px + 0.04em);
--custom-pop-bottom-translate_3d: 0.08em;
color: var(--white);
paint-order: stroke fill;
position: relative;
-webkit-text-stroke-color: var(--custom-display-name-styles-dark-2-color);
margin-bottom: calc(var(--custom-pop-stroke-width) * -1 - var(--custom-pop-bottom-translate_3d));
padding-bottom: calc(var(--custom-pop-stroke-width) + var(--custom-pop-bottom-translate_3d));
padding-inline-start: var(--custom-pop-stroke-width);
}
.dfb989b3f435152a-showEffect.dfb989b3f435152a-container .dfb989b3f435152a-pop,
.dfb989b3f435152a-showEffect.dfb989b3f435152a-container .dfb989b3f435152a-pop:before {
-webkit-text-stroke-width: var(--custom-pop-stroke-width);
-webkit-padding-start: var(--custom-pop-stroke-width);
-webkit-margin-start: calc(var(--custom-pop-stroke-width) * -1);
margin-inline-start: calc(var(--custom-pop-stroke-width) * -1);
}
.dfb989b3f435152a-showEffect.dfb989b3f435152a-container .dfb989b3f435152a-pop:before {
bottom: calc(var(--custom-pop-bottom-translate_3d) * -1 - var(--custom-pop-stroke-width));
color: var(--custom-display-name-styles-main-color);
content: attr(data-username-with-effects);
padding-inline-start: var(--custom-pop-stroke-width);
position: absolute;
top: 0;
width: calc(100% - var(--custom-pop-stroke-width));
z-index: -1;
-webkit-text-stroke-color: transparent;
background: linear-gradient(
to bottom left,
var(--custom-display-name-styles-light-1-color) 0,
var(--custom-display-name-styles-light-1-color) 6%,
var(--custom-display-name-styles-main-color) 20%,
var(--custom-display-name-styles-main-color) 50%,
var(--custom-display-name-styles-light-1-color) 56%,
var(--custom-display-name-styles-main-color) 70%,
var(--custom-display-name-styles-main-color) 100%
);
background-clip: text;
-webkit-background-clip: text;
background-position: 100% 0;
background-size: 200% 200%;
transform: translate3d(0, var(--custom-pop-bottom-translate_3d), 0);
-webkit-text-fill-color: transparent;
overflow: hidden;
text-decoration: none;
text-overflow: ellipsis;
white-space: var(--custom-display-name-styles-wrap);
}
.dfb989b3f435152a-showEffect.dfb989b3f435152a-container .dfb989b3f435152a-pop.dfb989b3f435152a-underlineOnHover:hover:before {
text-decoration: underline;
-webkit-text-decoration-color: var(--custom-display-name-styles-main-color);
text-decoration-color: var(--custom-display-name-styles-main-color);
text-underline-offset: calc(var(--custom-pop-bottom-translate_3d));
}
.dfb989b3f435152a-animated.dfb989b3f435152a-loop.dfb989b3f435152a-loop > *,
.dfb989b3f435152a-animated.dfb989b3f435152a-loop.dfb989b3f435152a-loop > :before {
animation-iteration-count: infinite;
}
.dfb989b3f435152a-animated .dfb989b3f435152a-neon {
animation: dfb989b3f435152a-neon-flicker-animation 4s cubic-bezier(0.24, 0.31, 0.36, 0.93);
animation-direction: normal;
animation-fill-mode: forwards;
}
.dfb989b3f435152a-animated .dfb989b3f435152a-neonGlow {
animation: dfb989b3f435152a-neon-glow-flicker-animation 1666ms linear;
animation-direction: normal;
animation-fill-mode: forwards;
}
.dfb989b3f435152a-animated .dfb989b3f435152a-toon:before {
animation: dfb989b3f435152a-toon-animation 4s cubic-bezier(0.44, 0.29, 0.48, 1);
animation-direction: normal;
animation-fill-mode: forwards;
}
.dfb989b3f435152a-animated .dfb989b3f435152a-pop {
animation: dfb989b3f435152a-pop-animation-main 4s cubic-bezier(0.44, 0.29, 0.48, 1);
animation-direction: normal;
animation-fill-mode: forwards;
}
.dfb989b3f435152a-animated .dfb989b3f435152a-pop:before {
animation: dfb989b3f435152a-pop-animation-shadow 4s cubic-bezier(0.44, 0.29, 0.48, 1);
animation-direction: normal;
animation-fill-mode: forwards;
}
.dfb989b3f435152a-container:not(.dfb989b3f435152a-animated),
.dfb989b3f435152a-container:not(.dfb989b3f435152a-animated):before {
animation-play-state: paused !important;
transition: none !important;
}
@keyframes dfb989b3f435152a-pop-animation-main {
0% {
transform: translateZ(0);
}
18% {
perspective: 1px;
transform: translate3d(0, -0.05em, 0);
}
35% {
perspective: 1px;
transform: translate3d(0, 0.08em, 0);
}
50%,
to {
perspective: 1px;
transform: translateZ(0);
}
}
@keyframes dfb989b3f435152a-pop-animation-shadow {
0% {
background-position: 100% 0;
perspective: 1px;
transform: translate3d(0, 0.08em, 0);
}
18% {
perspective: 1px;
transform: translate3d(0, 0.13em, 0);
}
35% {
perspective: 1px;
transform: translateZ(0);
}
50%,
to {
background-position: 0 100%;
perspective: 1px;
transform: translate3d(0, 0.08em, 0);
}
}
@keyframes dfb989b3f435152a-toon-animation {
0%,
5% {
background-position: 50% 0;
}
55%,
to {
background-position: 50% 100%;
}
}
@keyframes dfb989b3f435152a-neon-flicker-animation {
0%,
15%,
18%,
20%,
23%,
25%,
50% {
color: var(--white);
}
16%,
22%,
28% {
color: hsl(from var(--custom-display-name-styles-main-color) h calc(min(1, s) * ((s * 1.1) + 10)) 85);
}
51%,
to {
color: var(--white);
}
}
@keyframes dfb989b3f435152a-neon-glow-flicker-animation {
0% {
background-position: 100% 0;
}
to {
background-position: 0 100%;
}
}
.d28ae02ba7d77116-guildIconImage {
height: 100%;
object-fit: cover;
width: 100%;
}
.d28ae02ba7d77116-guildIconImage.d28ae02ba7d77116-acronym {
background-color: var(--background-base-lowest);
}
.d28ae02ba7d77116-acronym {
align-items: center;
color: var(--text-strong);
display: flex;
font-size: 14px;
font-weight: 500;
justify-content: center;
overflow: hidden;
white-space: nowrap;
width: 100%;
}
.dca174a2baed7ac1-container {
align-items: flex-start;
background: var(--background-surface-highest);
border: 1px solid var(--border-subtle);
border-radius: 16px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.dca174a2baed7ac1-banner {
height: 120px;
width: 100%;
}
.dca174a2baed7ac1-avatarContainer {
display: flex;
justify-content: flex-start;
margin-top: -34px;
padding: 0 16px;
}
.dca174a2baed7ac1-overlay {
background-color: var(--opacity-black-40);
height: 100%;
inset-inline-end: 0;
top: 0;
width: 100%;
z-index: 0;
}
.dca174a2baed7ac1-overlay,
.dca174a2baed7ac1-overlayIcon {
opacity: 0;
position: absolute;
transition: opacity 0.2s ease;
}
.dca174a2baed7ac1-clickable {
cursor: pointer;
}
.dca174a2baed7ac1-clickable:hover .dca174a2baed7ac1-overlay,
.dca174a2baed7ac1-clickable:hover .dca174a2baed7ac1-overlayIcon {
opacity: 1;
}
.dca174a2baed7ac1-avatarWrapper {
align-items: center;
background: var(--background-surface-highest);
display: flex;
height: 70px;
justify-content: center;
width: 70px;
}
.dca174a2baed7ac1-avatarWrapper .dca174a2baed7ac1-acronymText {
font-size: 22px;
}
.dca174a2baed7ac1-emptyBody {
height: 8px;
}
.dca174a2baed7ac1-body {
flex-direction: column;
gap: 16px;
overflow-wrap: anywhere;
padding: 0 16px;
text-align: flex-start;
}
.dca174a2baed7ac1-body,
.dca174a2baed7ac1-error {
display: flex;
margin-bottom: 16px;
}
.dca174a2baed7ac1-error {
color: var(--text-feedback-warning);
cursor: pointer;
gap: 4px;
}
.dca174a2baed7ac1-header {
align-items: flex-start;
display: flex;
flex-direction: column;
margin-bottom: 8px;
margin-top: 8px;
padding: 0 16px;
}
.dca174a2baed7ac1-buttonContainer {
box-sizing: border-box;
display: flex;
padding: 0 16px 16px;
width: 100%;
}
._4e3386e3639ae11f-container {
display: flex;
flex-direction: row;
gap: 4px;
width: 100%;
}
._4e3386e3639ae11f-gameIconWrapper {
cursor: pointer;
}
._4e3386e3639ae11f-gameIcon {
flex-shrink: 0;
height: 26px;
position: relative;
width: 26px;
}
._4e3386e3639ae11f-gameIconImage {
border: 1px solid var(--border-muted);
border-radius: 4px;
max-height: 100%;
max-width: 100%;
object-fit: contain;
}
._4e3386e3639ae11f-extraGamesContainer {
display: flex;
flex-direction: column;
gap: 4px;
padding: 8px 0;
}
._4e3386e3639ae11f-extraGameRow {
gap: 8px;
}
._4e3386e3639ae11f-extraGameItem,
._4e3386e3639ae11f-extraGameRow {
align-items: center;
display: flex;
}
._4e3386e3639ae11f-extraGameItem {
justify-content: center;
position: relative;
}
._4e3386e3639ae11f-extraGameIconImage {
position: absolute;
z-index: 1;
}
._4e3386e3639ae11f-extraGameOverlay {
background: var(--background-scrim);
border-radius: 4px;
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
z-index: 10;
}
._4e3386e3639ae11f-extraGameText {
z-index: 20;
}
._4e3386e3639ae11f-gameActivityLevel {
background-color: var(--background-surface-highest);
border-radius: 50%;
inset-inline-end: -4px;
position: absolute;
top: -4px;
}
._4e3386e3639ae11f-gameActivityLevel,
._4e3386e3639ae11f-gameActivityLevelInner {
align-items: center;
box-sizing: border-box;
display: flex;
justify-content: center;
}
._4e3386e3639ae11f-gameActivityLevelInner {
height: 14px;
padding: 2px;
width: 14px;
}
._4e3386e3639ae11f-favoriteGameContainer {
align-items: center;
display: flex;
gap: 8px;
}
@value traitMaxWidth: 268px;
.a2b4d37c64e101d9-container {
flex-wrap: wrap;
}
.a2b4d37c64e101d9-container,
.a2b4d37c64e101d9-trait {
display: flex;
gap: 4px;
}
.a2b4d37c64e101d9-trait {
align-items: center;
border: 1px solid var(--border-subtle);
border-radius: 16px;
max-width: 268px;
padding: 4px 8px;
transition: border-color 0.2s ease;
}
.a2b4d37c64e101d9-trait:hover {
border-color: var(--border-strong);
}
.a2b4d37c64e101d9-traitEmoji {
height: 16px;
width: 16px;
}
.a2b4d37c64e101d9-ellipsize {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._5c9fcec194debbe7-drag {
display: none;
}
._5c9fcec194debbe7-root {
bottom: 0;
contain: strict;
position: absolute;
top: 0;
inset-inline: 0;
pointer-events: all;
}
._5c9fcec194debbe7-enter,
._5c9fcec194debbe7-enterReducedMotion,
._5c9fcec194debbe7-exit,
._5c9fcec194debbe7-exitReducedMotion {
transition-duration: var(--custom-full-screen-layer-animation-duration);
transition-property: transform, opacity;
transition-timing-function: ease-in-out;
}
._5c9fcec194debbe7-enter {
transform: scale(1.1);
}
._5c9fcec194debbe7-enter,
._5c9fcec194debbe7-enterReducedMotion {
opacity: 0;
}
._5c9fcec194debbe7-exit {
transform: scale(1);
}
._5c9fcec194debbe7-exit,
._5c9fcec194debbe7-exitReducedMotion {
opacity: 1;
}
._5c9fcec194debbe7-enterActive,
._5c9fcec194debbe7-enterDone {
opacity: 1;
transform: scale(1);
}
._5c9fcec194debbe7-enterActiveReducedMotion,
._5c9fcec194debbe7-enterDoneReducedMotion {
opacity: 1;
}
._5c9fcec194debbe7-exitActive,
._5c9fcec194debbe7-exitDone {
opacity: 0;
transform: scale(1.1);
}
._5c9fcec194debbe7-exitActiveReducedMotion,
._5c9fcec194debbe7-exitDoneReducedMotion {
opacity: 0;
}
.c2b141c0f80863fb-container {
align-items: center;
display: flex;
flex-direction: column;
}
.c2b141c0f80863fb-keybind {
font-size: 13px;
font-weight: var(--font-weight-semibold);
margin-top: 8px;
text-align: center;
}
.c2b141c0f80863fb-closeButton {
align-items: center;
border-radius: 50%;
border-style: solid;
border-width: 2px;
cursor: pointer;
display: flex;
flex: 0 0 36px;
height: 36px;
justify-content: center;
width: 36px;
}
.c2b141c0f80863fb-closeButton:active {
transform: translateY(1px);
}
.c2b141c0f80863fb-closeButton,
.c2b141c0f80863fb-keybind {
color: var(--interactive-text-default);
}
.c2b141c0f80863fb-closeButton:hover {
background-color: var(--interactive-background-hover);
}
.c2b141c0f80863fb-closeButton:hover,
.c2b141c0f80863fb-closeButton:hover + .c2b141c0f80863fb-keybind {
color: var(--interactive-text-hover);
}
.c2b141c0f80863fb-closeButton:active {
background-color: var(--interactive-background-active);
}
.c2b141c0f80863fb-closeButton:active,
.c2b141c0f80863fb-closeButton:active + .c2b141c0f80863fb-keybind {
color: var(--interactive-text-active);
}
.c2b141c0f80863fb-closeButtonSolid {
border: none;
flex: 0 0 24px;
height: 24px;
width: 24px;
}
.c2b141c0f80863fb-closeButtonSolid:hover {
background-color: transparent;
}
.theme-dark .c2b141c0f80863fb-closeButtonBold:hover {
background-color: hsl(var(--primary-300-hsl) / 0.3);
}
.enable-forced-colors .c2b141c0f80863fb-closeButton {
background-color: ButtonFace;
border-color: ButtonText;
color: ButtonText;
}
.enable-forced-colors .c2b141c0f80863fb-closeButton:active {
background-color: HighlightText;
border-color: Highlight;
color: Highlight;
}
._83f66f9a8c7c74ec-container {
background-color: #fff;
border-radius: var(--radius-md);
display: flex;
padding: var(--space-8) var(--space-24);
-webkit-padding-end: var(--space-12);
align-items: center;
flex: 1;
gap: var(--space-12);
justify-content: space-between;
margin: 0 auto;
margin-bottom: var(--space-48);
padding-inline-end: var(--space-12);
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
._83f66f9a8c7c74ec-themeResponsiveContainer {
background-color: var(--background-mod-subtle);
width: 100%;
}
._83f66f9a8c7c74ec-text {
color: var(--primary-600);
}
._83f66f9a8c7c74ec-button {
display: inline-block;
}
._83f66f9a8c7c74ec-highlight {
color: var(--brand-500);
}
._83f66f9a8c7c74ec-description {
align-items: center;
display: inline-block;
flex-direction: row;
}
._83f66f9a8c7c74ec-responsiveText {
color: var(--text-default);
}
._3add81a1a1ae9da9-wrapper {
text-align: center;
}
._3add81a1a1ae9da9-heading {
margin-bottom: var(--space-32);
}
._3add81a1a1ae9da9-topPerksCards {
display: flex;
flex-wrap: wrap;
gap: var(--space-16);
justify-content: center;
}
._3add81a1a1ae9da9-topPerksCard {
background-color: var(--background-secondary-alt);
border-radius: var(--radius-lg);
box-sizing: border-box;
flex: 1 1 auto;
max-width: 362px;
min-width: 340px;
overflow: hidden;
padding: var(--space-32) var(--space-20);
position: relative;
width: 25%;
}
.full-motion ._3add81a1a1ae9da9-animatedTopPerksCard._3add81a1a1ae9da9-animate {
animation: _3add81a1a1ae9da9-fadeEffects 1.8s ease-in-out forwards;
}
._3add81a1a1ae9da9-topPerksCardImageWrapper {
height: 100%;
inset-inline-start: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
}
._3add81a1a1ae9da9-animatedTopPerksCard {
border-radius: var(--radius-md);
height: 315px;
max-width: 480px;
}
._3add81a1a1ae9da9-imageGradientOverlay {
background: linear-gradient(to bottom, transparent 0, var(--background-secondary-alt) 60%, var(--background-secondary-alt) 100%);
border-radius: var(--radius-lg);
bottom: 0;
height: 300px;
inset-inline-start: 0;
position: absolute;
width: 100%;
}
._3add81a1a1ae9da9-contentContainer {
margin-top: var(--space-16);
overflow: hidden;
position: relative;
}
._3add81a1a1ae9da9-buttonsContainer {
display: flex;
flex-direction: row;
gap: 10px;
justify-content: center;
margin-top: var(--space-24);
overflow: hidden;
}
._3add81a1a1ae9da9-button {
flex: 1 1 0;
}
._3add81a1a1ae9da9-topPerksCardImage {
height: 128px;
}
._3add81a1a1ae9da9-topPerksCardHeading {
margin-bottom: 4px;
}
._3add81a1a1ae9da9-topPerksCardDescription {
color: var(--text-default);
}
._3add81a1a1ae9da9-topPerksCardNew {
inset-inline-end: var(--space-16);
position: absolute;
top: var(--space-16);
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
._3add81a1a1ae9da9-topPerksCardLabelContainer {
background-color: var(--background-base-low);
border-color: var(--border-muted);
border-radius: var(--radius-round);
border-style: solid;
border-width: 1px;
gap: 2px;
margin-top: var(--space-12);
padding: var(--space-4) 10px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
._3add81a1a1ae9da9-labelsContainer,
._3add81a1a1ae9da9-topPerksCardLabelContainer {
align-items: center;
display: flex;
flex-direction: row;
justify-self: center;
}
._3add81a1a1ae9da9-labelsContainer {
color: var(--text-feedback-positive);
gap: var(--space-4);
}
._3add81a1a1ae9da9-intObserver {
bottom: 0;
height: 1px;
inset-inline-start: 0;
opacity: 0;
width: 1px;
}
._3add81a1a1ae9da9-intObserver,
._3add81a1a1ae9da9-shineLine {
pointer-events: none;
position: absolute;
}
._3add81a1a1ae9da9-shineLine {
background: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, hsla(0, 0%, 100%, 0.1) 50%, hsla(0, 0%, 100%, 0));
height: 300%;
inset-inline-start: -400%;
top: -100%;
transform: rotate(30deg);
width: 400px;
z-index: 1;
}
.full-motion ._3add81a1a1ae9da9-shineLine {
animation: _3add81a1a1ae9da9-shineEffect 1.5s ease-in-out;
}
@keyframes _3add81a1a1ae9da9-shineEffect {
0% {
inset-inline-start: -100%;
}
to {
inset-inline-start: 100%;
}
}
.ef07112874c7cc4f-container {
flex: 1;
flex-direction: column;
flex-wrap: wrap;
text-align: center;
}
.ef07112874c7cc4f-container,
.ef07112874c7cc4f-powerupsContainer {
display: flex;
justify-content: center;
}
.ef07112874c7cc4f-powerupsContainer {
align-items: center;
flex-wrap: wrap;
gap: var(--space-16);
margin-top: var(--space-32);
position: relative;
}
.ef07112874c7cc4f-powerupCard {
min-width: 500px;
}
.ef07112874c7cc4f-image {
position: absolute;
}
.ef07112874c7cc4f-contentContainer {
margin-top: 160px;
z-index: 1;
}
._4d7bb356d058f441-wrapper {
background: linear-gradient(45deg, var(--guild-boosting-blue), var(--guild-boosting-purple));
border-radius: 8px;
isolation: isolate;
margin-bottom: 85px;
overflow: hidden;
padding: 50px 24px;
position: relative;
text-align: center;
}
._4d7bb356d058f441-content {
position: relative;
z-index: 2;
}
._4d7bb356d058f441-heading {
margin-bottom: 32px;
}
._4d7bb356d058f441-cards {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
margin: 0 auto;
max-width: 768px;
}
._4d7bb356d058f441-card {
align-items: center;
background-color: hsl(var(--primary-600-hsl) / 0.9);
border-radius: 8px;
box-sizing: border-box;
display: flex;
flex: 1 1 auto;
flex-direction: column;
max-width: 180px;
min-width: 165px;
padding: 24px 12px;
}
.theme-light ._4d7bb356d058f441-card {
background-color: hsl(var(--primary-100-hsl) / 0.9);
}
._4d7bb356d058f441-icon {
color: var(--guild-boosting-pink);
display: block;
height: 30px;
margin-bottom: 10px;
width: 30px;
}
._4d7bb356d058f441-backgroundImages {
background:
0 100% url(/assets/5f5e47f0133f9ee5.svg) no-repeat,
100% 100% url(/assets/383e4e1569554a59.svg) no-repeat;
height: 100%;
inset-inline-start: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
._4d7bb356d058f441-backgroundImages,
._4d7bb356d058f441-iconImage {
filter: saturate(var(--saturation-factor, 1));
}
._0c507a672a52b3e0-guildBoostUnavailableNotice {
align-self: center;
background-color: hsl(var(--white-hsl) / 0.1);
border: 2px solid var(--white);
border-radius: 9999px;
justify-self: center;
margin-bottom: 32px;
padding: 8px 16px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
._0c507a672a52b3e0-guildBoostUnavailableNotice._0c507a672a52b3e0-lightTheme {
border: 2px solid var(--black-500);
}
._0c507a672a52b3e0-guildBoostUnavailableNoticeText {
font-size: 16px;
}
.f9f04c96ff5e7a45-guildStatus {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
margin-bottom: 50px;
text-align: center;
}
.f9f04c96ff5e7a45-guildIcon {
margin: 0 auto 10px;
}
.f9f04c96ff5e7a45-guildName {
margin-bottom: 4px;
}
.f9f04c96ff5e7a45-guildBoostCountWrapper {
color: var(--white);
margin-bottom: 20px;
}
.f9f04c96ff5e7a45-guildBoostCount {
align-items: center;
display: flex;
justify-content: center;
}
.f9f04c96ff5e7a45-guildBoostBadge {
color: inherit;
flex: 0 0 auto;
height: 16px;
-webkit-margin-end: 4px;
margin-inline-end: 4px;
opacity: 0.6;
width: 16px;
}
.f9f04c96ff5e7a45-guildBoostBadgeWithBoosts {
color: var(--guild-boosting-pink);
opacity: 1;
}
.f9f04c96ff5e7a45-guildStatusCopy {
color: inherit;
flex: 0 0 auto;
opacity: 0.6;
}
.f9f04c96ff5e7a45-guildBoostCountCurrentUser {
color: inherit;
margin-top: 4px;
opacity: 0.6;
}
.f9f04c96ff5e7a45-guildBoostCtas {
display: flex;
margin: 0 auto;
max-width: 470px;
width: 100%;
}
.f9f04c96ff5e7a45-guildBoostCta {
border-radius: 4px;
flex: 1 1 50%;
}
.f9f04c96ff5e7a45-guildBoostCtaBoostContent {
color: var(--brand-500);
}
.f9f04c96ff5e7a45-guildBoostCta + .f9f04c96ff5e7a45-guildBoostCta {
-webkit-margin-start: 10px;
margin-inline-start: 10px;
}
.f9f04c96ff5e7a45-guildBoostCtaBoostWrapper,
.f9f04c96ff5e7a45-guildBoostCtaSecondary {
position: relative;
}
.full-motion .f9f04c96ff5e7a45-guildBoostCtaBoostWrapper,
.full-motion .f9f04c96ff5e7a45-guildBoostCtaSecondary {
transition: transform 0.08s;
}
.full-motion .f9f04c96ff5e7a45-guildBoostCtaSecondary {
transition:
background 0.08s,
box-shadow 0.08s,
transform 0.08s;
}
.f9f04c96ff5e7a45-guildBoostCtaBoost {
border-radius: 4px;
box-shadow:
0 1px 2px hsl(var(--primary-500-hsl) / 0.2),
0 8px 16px hsl(var(--primary-500-hsl) / 0.3);
transition: box-shadow 0.08s;
width: 100%;
}
.full-motion .f9f04c96ff5e7a45-guildBoostCtaBoostWrapper:focus-within,
.full-motion .f9f04c96ff5e7a45-guildBoostCtaBoostWrapper:hover,
.full-motion .f9f04c96ff5e7a45-guildBoostCtaSecondary:focus,
.full-motion .f9f04c96ff5e7a45-guildBoostCtaSecondary:hover {
transform: translateY(-3px);
}
.full-motion .f9f04c96ff5e7a45-guildBoostCtaBoostWrapper:focus-within:after,
.full-motion .f9f04c96ff5e7a45-guildBoostCtaBoostWrapper:hover:after,
.full-motion .f9f04c96ff5e7a45-guildBoostCtaSecondary:focus:after,
.full-motion .f9f04c96ff5e7a45-guildBoostCtaSecondary:hover:after {
content: "";
height: 4px;
inset-inline-start: 0;
position: absolute;
top: 100%;
width: 100%;
}
.f9f04c96ff5e7a45-guildBoostCtaBoostWrapper:focus-within .f9f04c96ff5e7a45-guildBoostCtaBoost,
.f9f04c96ff5e7a45-guildBoostCtaBoostWrapper:hover .f9f04c96ff5e7a45-guildBoostCtaBoost,
.f9f04c96ff5e7a45-guildBoostCtaSecondary:focus,
.f9f04c96ff5e7a45-guildBoostCtaSecondary:hover {
box-shadow:
0 1px 2px hsl(var(--primary-500-hsl) / 0.2),
0 12px 24px hsl(var(--primary-500-hsl) / 0.4);
}
.f9f04c96ff5e7a45-guildBoostCtaSecondary:focus,
.f9f04c96ff5e7a45-guildBoostCtaSecondary:hover {
background-color: var(--opacity-white-4);
}
.f9f04c96ff5e7a45-guildBoostCtaBoostShine {
color: hsl(var(--brand-500-hsl) / 0.1);
}
.f9f04c96ff5e7a45-guildBoostCtaGiftContent {
display: inline-flex;
}
.f9f04c96ff5e7a45-guildBoostCtaGiftIcon {
height: 16px;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
width: 16px;
}
.f9f04c96ff5e7a45-FPContainer {
margin-bottom: 23px;
}
._5b98ee5ec86ed598-wrapper {
background-color: var(--background-secondary-alt);
border-radius: 8px;
padding: 60px 50px;
}
._5b98ee5ec86ed598-heading {
margin-bottom: 30px;
text-align: center;
}
._5b98ee5ec86ed598-list {
border-top: 1px solid var(--interactive-muted);
}
._5b98ee5ec86ed598-listItem {
border-bottom: 1px solid var(--interactive-muted);
}
._5b98ee5ec86ed598-questionWrapper {
color: var(--interactive-text-default);
cursor: pointer;
display: flex;
padding: 12px 0;
transition: color 0.1s;
}
._5b98ee5ec86ed598-questionWrapper:active,
._5b98ee5ec86ed598-questionWrapper:hover,
._5b98ee5ec86ed598-questionWrapperExpanded {
color: var(--interactive-text-active);
}
._5b98ee5ec86ed598-questionWrapperExpanded {
padding-bottom: 8px;
}
._5b98ee5ec86ed598-question {
color: inherit;
flex: 1 1 auto;
-webkit-padding-end: 12px;
padding-inline-end: 12px;
transition: color 0.1s;
}
._5b98ee5ec86ed598-questionIcon {
flex: 0 0 auto;
}
._5b98ee5ec86ed598-answer {
margin-bottom: 12px;
width: 80%;
}
@media (max-width: 700px) {
._5b98ee5ec86ed598-answer {
width: 100%;
}
}
.b4589bedc187b0eb-wrapper {
display: flex;
inset-inline-start: 0;
justify-content: center;
pointer-events: none;
position: absolute;
top: 100%;
width: 100%;
z-index: 1;
}
.b4589bedc187b0eb-innerWrapper {
align-items: center;
background-color: var(--background-secondary-alt);
border-radius: 50px;
box-shadow: var(--shadow-border), var(--shadow-high);
box-sizing: border-box;
display: flex;
margin-bottom: 36px;
padding-block: 12px;
padding-inline: 12px 22px;
pointer-events: all;
position: relative;
width: 438px;
}
.b4589bedc187b0eb-innerWrapper:after,
.b4589bedc187b0eb-innerWrapper:before {
border: 2px solid transparent;
border-radius: inherit;
box-sizing: border-box;
content: "";
height: 100%;
inset-inline-start: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
}
.b4589bedc187b0eb-innerWrapper:after {
border-color: var(--guild-boosting-blue);
-webkit-mask: linear-gradient(45deg, #000, transparent);
mask: linear-gradient(45deg, #000, transparent);
}
.b4589bedc187b0eb-innerWrapper:before {
border-color: var(--guild-boosting-purple);
}
.theme-light .b4589bedc187b0eb-innerWrapper {
background-color: var(--background-base-lower);
}
.b4589bedc187b0eb-guildInfo {
align-items: center;
display: flex;
flex: 1 1 auto;
overflow: hidden;
-webkit-padding-end: 8px;
padding-inline-end: 8px;
text-overflow: ellipsis;
}
.b4589bedc187b0eb-guildIcon {
background-color: var(--background-base-low);
flex: 0 0 auto;
-webkit-margin-end: 14px;
margin-inline-end: 14px;
}
.b4589bedc187b0eb-ctaButton {
border-radius: var(--custom-button-button-lg-height);
flex: 0 0 auto;
}
.b4589bedc187b0eb-guildName {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.d00019277a2b29dc-cannonWrapper {
z-index: 1;
}
.d00019277a2b29dc-cannon,
.d00019277a2b29dc-cannonWrapper {
height: 100%;
position: absolute;
width: 100%;
}
.d00019277a2b29dc-confettiTriggerWrapper {
cursor: pointer;
height: 100%;
position: relative;
width: 100%;
z-index: 2;
}
.d00019277a2b29dc-confettiTrigger {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
width: 100%;
}
._1f1cb76e4e3b2f9e-progressBarMarker {
align-items: center;
background-color: var(--opacity-white-40);
border-radius: 100%;
display: flex;
flex-direction: column;
height: var(--custom-guild-boosting-marketing-progress-bar-marker-marker-dimensions);
isolation: isolate;
justify-content: center;
position: absolute;
transform: translateX(-50%);
width: var(--custom-guild-boosting-marketing-progress-bar-marker-marker-dimensions);
z-index: 2;
}
._1f1cb76e4e3b2f9e-progressBarMarker:after {
content: "";
height: 50px;
inset-inline-start: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 50px;
z-index: 1;
}
._1f1cb76e4e3b2f9e-progressBarMarker._1f1cb76e4e3b2f9e-progressBarMarkerCurrent {
background-color: transparent;
}
._1f1cb76e4e3b2f9e-progressBarMarkerCurrent ._1f1cb76e4e3b2f9e-progressBarMarkerIndicator {
box-shadow: 0 5px 11px rgba(0, 0, 0, 0.25);
}
._1f1cb76e4e3b2f9e-progressBarMarkerUnlocked ._1f1cb76e4e3b2f9e-progressBarMarkerIndicator {
background: var(--guild-boosting-pink);
border-radius: 100%;
content: "";
height: var(--custom-guild-boosting-marketing-progress-bar-marker-marker-dimensions);
inset-inline-start: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: var(--custom-guild-boosting-marketing-progress-bar-marker-marker-dimensions);
z-index: 0;
}
._1f1cb76e4e3b2f9e-progressBarMarkerUnlocked._1f1cb76e4e3b2f9e-progressBarMarkerLower ._1f1cb76e4e3b2f9e-progressBarMarkerIndicator {
height: 20px;
inset-inline-start: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 20px;
z-index: 3;
}
._1f1cb76e4e3b2f9e-progressBarMarkerLocked {
cursor: pointer;
}
._1f1cb76e4e3b2f9e-progressBarMarkerLabel {
color: var(--white);
inset-inline-start: 50%;
opacity: 0.4;
padding-top: 4px;
position: absolute;
top: 100%;
transform: translateX(-50%);
transition: opacity 0.125s;
white-space: nowrap;
}
._1f1cb76e4e3b2f9e-progressBarMarkerLabel:after {
content: "";
height: 100%;
inset-inline-start: 50%;
padding: 3px;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
z-index: 1;
}
._1f1cb76e4e3b2f9e-progressBarMarkerUnlocked ._1f1cb76e4e3b2f9e-progressBarMarkerLabel {
opacity: 0.8;
}
._1f1cb76e4e3b2f9e-progressBarMarkerCurrent ._1f1cb76e4e3b2f9e-progressBarMarkerLabel,
._1f1cb76e4e3b2f9e-progressBarMarkerLocked:hover ._1f1cb76e4e3b2f9e-progressBarMarkerLabel {
opacity: 1;
}
._1f1cb76e4e3b2f9e-progressBarMarkerUnlockedIcon {
height: 16px;
-webkit-padding-end: 3px;
inset-inline-end: 100%;
padding-inline-end: 3px;
position: absolute;
top: 50%;
transform: translateY(calc(-50% + 1px));
width: 16px;
}
._1f1cb76e4e3b2f9e-boostedTierIconBackground {
background-color: var(--white);
border-radius: 20px;
height: 20px;
inset-inline-start: 50%;
opacity: 0.5;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
transition: opacity 0.125s;
width: 20px;
z-index: 2;
}
._1f1cb76e4e3b2f9e-progressBarMarkerLocked:hover ._1f1cb76e4e3b2f9e-boostedTierIconBackground {
opacity: 1;
}
._1f1cb76e4e3b2f9e-boostedTierIcon {
color: var(--guild-boosting-pink);
height: 12px;
inset-inline-start: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 12px;
z-index: 4;
}
._1f1cb76e4e3b2f9e-progressBarMarkerUnlocked ._1f1cb76e4e3b2f9e-boostedTierIcon {
color: var(--white);
}
._1f1cb76e4e3b2f9e-progressBarMarkerCurrent ._1f1cb76e4e3b2f9e-boostedTierIcon {
height: 16px;
width: 16px;
}
._1f1cb76e4e3b2f9e-tooltip {
text-align: center;
}
._1f1cb76e4e3b2f9e-disabledIndicator {
color: currentColor;
}
.b28bb7f62b017383-progressBar {
height: 54px;
isolation: isolate;
margin: 0 auto 48px;
max-width: 660px;
position: relative;
}
.b28bb7f62b017383-progressBarScrubber {
height: 8px;
inset-inline: calc(var(--custom-guild-boosting-marketing-progress-bar-marker-dimensions) / 2 + var(--custom-guild-boosting-marketing-progress-bar-end-markers-margin));
position: absolute;
top: 13px;
}
.b28bb7f62b017383-progressBarTrack {
background-color: var(--opacity-white-28);
width: 100%;
z-index: 0;
}
.b28bb7f62b017383-progressBarFill,
.b28bb7f62b017383-progressBarTrack {
border-radius: 8px;
height: 100%;
position: absolute;
}
.b28bb7f62b017383-progressBarFill {
background-image: linear-gradient(90deg, var(--guild-boosting-purple) 0, var(--white) 100%);
inset-inline-start: 0;
z-index: 2;
}
.b28bb7f62b017383-progressBarCurrentProgressTooltip {
margin-top: 100px;
}
.b28bb7f62b017383-progressBarCurrentProgressTooltipMarker {
border-radius: 100%;
height: 50px;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 50px;
z-index: 3;
}
.b28bb7f62b017383-progressBarCurrentProgressTooltipHeading {
font-weight: var(--font-weight-semibold);
margin-bottom: 2px;
}
.b28bb7f62b017383-progressBarCurrentProgressTooltipSubheading {
align-items: center;
display: flex;
}
.b28bb7f62b017383-progressBarCurrentProgressTooltipSubheadingIcon {
color: var(--guild-boosting-pink);
flex: 0 0 auto;
height: 16px;
margin-inline: -2px 4px;
width: 16px;
}
.b28bb7f62b017383-progressBarCurrentProgressTooltipSubheadingCopy {
flex: 1 1 auto;
}
.bb1234f41db08c20-container {
display: inline-block;
position: relative;
}
.bb1234f41db08c20-sparkle {
position: absolute;
}
.bb1234f41db08c20-sparkleStarTopRight {
bottom: calc(100% - 4px);
height: 12.75px;
inset-inline-start: calc(100% - 5px);
width: 12.75px;
}
.bb1234f41db08c20-sparkleStarRight {
bottom: 3px;
inset-inline-start: calc(100% + 1.31px);
}
.bb1234f41db08c20-sparkleStarBottomLeft,
.bb1234f41db08c20-sparkleStarRight {
height: 7.44px;
width: 7.44px;
}
.bb1234f41db08c20-sparkleStarBottomLeft {
inset-inline-start: -1px;
top: calc(100% + 0.56px);
}
.theme-dark .bb1234f41db08c20-sparkle {
color: var(--white);
}
.bb1234f41db08c20-containerColored .bb1234f41db08c20-sparkle.bb1234f41db08c20-sparkleStarTopRight,
.theme-light .bb1234f41db08c20-sparkle.bb1234f41db08c20-sparkleStarTopRight {
color: #83ddc5;
}
.bb1234f41db08c20-containerColored .bb1234f41db08c20-sparkle.bb1234f41db08c20-sparkleStarRight,
.theme-light .bb1234f41db08c20-sparkle.bb1234f41db08c20-sparkleStarRight {
color: #e15be1;
}
.bb1234f41db08c20-containerColored .bb1234f41db08c20-sparkle.bb1234f41db08c20-sparkleStarBottomLeft,
.theme-light .bb1234f41db08c20-sparkle.bb1234f41db08c20-sparkleStarBottomLeft {
color: var(--yellow-260);
}
.fe5e5ddbedbc82f4-tag {
background-color: var(--brand-500);
font-size: 12px;
line-height: 16px;
padding: 0 6px;
}
.fe5e5ddbedbc82f4-tag.fe5e5ddbedbc82f4-inheritBackgroundColor {
background: inherit;
}
.fe5e5ddbedbc82f4-tag.fe5e5ddbedbc82f4-inheritTextColor {
color: inherit;
}
.be48d0ea9c89668f-tierCards {
display: flex;
flex-wrap: wrap;
gap: 22px;
justify-content: center;
}
.be48d0ea9c89668f-tierCard {
border-radius: var(--custom-guild-boosting-marketing-tier-cards-tier-card-border-radius);
box-shadow: var(--shadow-border), var(--shadow-high);
box-sizing: border-box;
flex: 0 0 auto;
padding: 24px 36px 30px;
position: relative;
width: 338px;
}
.be48d0ea9c89668f-tierCard,
.be48d0ea9c89668f-tierCardCurrentTier {
background-image: linear-gradient(45deg, var(--guild-boosting-blue) 0, var(--guild-boosting-purple) 100%);
}
.be48d0ea9c89668f-tierCardCurrentTier {
border-radius: 8px;
inset-inline-start: 28px;
padding: 4px 8px;
position: absolute;
text-transform: uppercase;
top: 0;
transform: translateY(-50%);
}
.be48d0ea9c89668f-tierCardHeader {
align-items: baseline;
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.be48d0ea9c89668f-tierCardHeading {
flex: 0 0 auto;
}
.be48d0ea9c89668f-tierCardBoostRequirement {
flex: 0 0 auto;
opacity: 0.7;
}
.be48d0ea9c89668f-tierCardList {
display: flex;
flex-direction: column;
gap: 12px;
}
.be48d0ea9c89668f-tierCardListItem {
align-items: center;
display: flex;
gap: 8px;
}
.be48d0ea9c89668f-tierCardListIcon {
flex: 0 0 auto;
height: 24px;
width: 24px;
}
.be48d0ea9c89668f-tierCardSparkleHighlight {
background-image: radial-gradient(100% 100% at center, #fff 0, hsla(0, 0%, 100%, 0) 50%);
color: var(--white);
height: 80px;
position: absolute;
width: 1px;
}
.theme-light .be48d0ea9c89668f-tierCardSparkleHighlight {
background-image: radial-gradient(100% 100% at center, hsl(var(--guild-boosting-pink-hsl) / 1) 0, hsl(var(--guild-boosting-pink-hsl) / 0) 50%);
color: var(--guild-boosting-pink);
}
.be48d0ea9c89668f-tierCardSparkleHighlightTopRight {
inset-inline-end: 0;
top: 30px;
}
.be48d0ea9c89668f-tierCardSparkleHighlightBottomLeft {
bottom: 30px;
inset-inline-start: 0;
}
.be48d0ea9c89668f-tierCardBorderHighlight {
border-radius: var(--custom-guild-boosting-marketing-tier-cards-tier-card-border-radius);
box-sizing: border-box;
height: 100%;
inset-inline-start: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
}
.be48d0ea9c89668f-tierCardBorderHighlightTopRight {
border: 1px solid var(--guild-boosting-blue);
-webkit-mask: radial-gradient(100% 100% at top right, #fff 0, hsla(0, 0%, 100%, 0) 100%);
mask: radial-gradient(100% 100% at top right, #fff 0, hsla(0, 0%, 100%, 0) 100%);
}
.be48d0ea9c89668f-tierCardBorderHighlightBottomLeft {
border: 1px solid var(--guild-boosting-purple);
-webkit-mask: radial-gradient(100% 100% at bottom left, #fff 0, hsla(0, 0%, 100%, 0) 100%);
mask: radial-gradient(100% 100% at bottom left, #fff 0, hsla(0, 0%, 100%, 0) 100%);
}
.be48d0ea9c89668f-tierCardSparkle1 {
inset-inline-start: 0;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
.be48d0ea9c89668f-tierCardSparkle2 {
inset-inline-start: 11px;
position: absolute;
top: 10%;
}
.be48d0ea9c89668f-tierCardSparkle3 {
inset-inline-end: 21px;
position: absolute;
top: -20px;
}
.be48d0ea9c89668f-tierCardPerkRow {
align-items: flex-start;
display: flex;
flex-direction: row;
}
.be48d0ea9c89668f-tierCardNewFeatureBadge {
-webkit-margin-start: 8px;
align-self: center;
background: #fff;
border-radius: 8px;
color: var(--premium-tier-2-purple-for-gradients);
margin-inline-start: 8px;
}
._686cf09df72934da-heading {
margin-bottom: 82px;
text-align: center;
}
._686cf09df72934da-tableWrapper {
position: relative;
}
._686cf09df72934da-table {
text-align: center;
width: 100%;
}
._686cf09df72934da-columnHeading,
._686cf09df72934da-tableCell {
border-bottom: 1px solid var(--opacity-white-16);
}
.theme-light ._686cf09df72934da-columnHeading,
.theme-light ._686cf09df72934da-tableCell {
border-bottom-color: var(--opacity-black-16);
}
._686cf09df72934da-columnHeading {
padding-bottom: 16px;
}
._686cf09df72934da-tableCell {
box-sizing: border-box;
padding: 22px 0;
vertical-align: middle;
width: 20%;
}
._686cf09df72934da-tableCellWrapper {
padding: 0;
}
._686cf09df72934da-tableCellInner {
border-bottom: none;
width: 100%;
}
._686cf09df72934da-tableRowHeading {
text-align: start;
}
._686cf09df72934da-booleanValueIcon {
color: var(--interactive-muted);
display: block;
margin: 0 auto;
}
._686cf09df72934da-booleanValueTrue {
color: var(--text-strong);
}
._686cf09df72934da-recommendedTierHighlight {
bottom: -16px;
pointer-events: none;
position: absolute;
top: -38px;
width: 20%;
}
._686cf09df72934da-recommendedTierHighlight:after,
._686cf09df72934da-recommendedTierHighlight:before {
border: 2px solid transparent;
border-radius: 16px;
box-sizing: border-box;
content: "";
height: 100%;
inset-inline-start: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
._686cf09df72934da-recommendedTierHighlight:after {
border-color: var(--guild-boosting-blue);
-webkit-mask: linear-gradient(70deg, #000, transparent);
mask: linear-gradient(70deg, #000, transparent);
}
._686cf09df72934da-recommendedTierHighlight:before {
border-color: var(--guild-boosting-purple);
}
._686cf09df72934da-recommendedTierHighlightTier2 {
inset-inline-end: 20%;
}
._686cf09df72934da-recommendedTierHighlightTier3 {
inset-inline-end: 0;
}
._686cf09df72934da-recommendedTierHighlightTag {
background-image: linear-gradient(30deg, var(--guild-boosting-blue), var(--guild-boosting-purple));
border-radius: 8px;
inset-inline-start: 50%;
padding: 4px 8px;
position: absolute;
text-transform: uppercase;
top: 1px;
transform: translate(-50%, -50%);
z-index: 2;
}
._686cf09df72934da-perkPreviewImage {
background-color: var(--background-secondary-alt);
border-radius: 8px;
box-shadow: var(--shadow-border), var(--shadow-high);
display: block;
height: 168px;
width: 280px;
}
._1dfaec293e55bc43-headerWave {
bottom: -1px;
color: var(--background-base-low);
max-height: 400px;
}
._1dfaec293e55bc43-bodyWave,
._1dfaec293e55bc43-headerWave {
display: block;
inset-inline-start: 50%;
min-width: 1000px;
position: absolute;
transform: translateX(-50%);
width: 100%;
z-index: 1;
}
._1dfaec293e55bc43-bodyWave {
max-height: 1200px;
top: 10%;
}
._1dfaec293e55bc43-bodyWaveGradientStop1 {
stop-color: var(--background-base-low);
}
._1dfaec293e55bc43-bodyWaveGradientStop2 {
stop-color: var(--background-secondary-alt);
}
._1dfaec293e55bc43-bodyWaveGradientStop3 {
stop-color: var(--background-base-low);
}
._6fd0e42f91edfda6-closeIconWrapper {
margin: 0 auto;
max-width: 1060px;
mix-blend-mode: screen;
position: relative;
z-index: 2;
}
.theme-light ._6fd0e42f91edfda6-closeIconWrapper {
mix-blend-mode: multiply;
}
._6fd0e42f91edfda6-closeIcon {
inset-inline-end: 24px;
position: absolute;
top: 48px;
z-index: 2;
}
._6fd0e42f91edfda6-scroller {
background: var(--background-base-low);
height: 100%;
position: relative;
z-index: 1;
}
._6fd0e42f91edfda6-content {
margin: 0 auto;
max-width: 1060px;
}
._6fd0e42f91edfda6-headerContentWrapper {
padding: 100px 32px 32px;
position: relative;
z-index: 2;
}
._6fd0e42f91edfda6-header {
background:
center 15%/90% auto url(/assets/ea2ad3ad1bfd2975.svg) no-repeat,
linear-gradient(359.37deg, rgba(0, 0, 0, 0.5) 12.68%, hsla(0, 0%, 100%, 0) 50.4%),
linear-gradient(
159.15deg,
var(--premium-tier-0-header-gradient-1) 8.49%,
var(--premium-tier-0-header-gradient-2) 32.21%,
var(--premium-tier-0-header-gradient-3) 42.9%,
var(--premium-tier-0-header-gradient-4) 66.06%,
var(--premium-tier-0-header-gradient-5) 71.4%
);
position: relative;
}
.theme-light ._6fd0e42f91edfda6-header {
background:
center 15%/90% auto url(/assets/ea2ad3ad1bfd2975.svg) no-repeat,
linear-gradient(359.37deg, hsla(0, 0%, 100%, 0.5) 12.68%, hsla(0, 0%, 100%, 0) 50.4%),
linear-gradient(
159.15deg,
var(--premium-tier-0-header-gradient-1) 8.49%,
var(--premium-tier-0-header-gradient-2) 32.21%,
var(--premium-tier-0-header-gradient-3) 42.9%,
var(--premium-tier-0-header-gradient-4) 66.06%,
var(--premium-tier-0-header-gradient-5) 71.4%
);
}
._6fd0e42f91edfda6-heading {
margin: 0 auto 48px;
max-width: 960px;
text-align: center;
}
._6fd0e42f91edfda6-middleBodyContentWrapper {
display: flex;
flex-direction: column;
gap: var(--space-64);
padding: 32px;
}
._6fd0e42f91edfda6-lowerBody {
position: relative;
}
._6fd0e42f91edfda6-lowerBodyBackgroundImage {
background: right 285px no-repeat url(/assets/32b48278e7e6c908.svg);
filter: saturate(var(--saturation-factor, 1));
height: 100%;
inset-inline-start: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
z-index: 2;
}
@media (max-width: 1430px) {
._6fd0e42f91edfda6-lowerBodyBackgroundImage {
display: none;
}
}
._6fd0e42f91edfda6-lowerBodyContentWrapper {
padding: 32px;
position: relative;
z-index: 2;
}
._6fd0e42f91edfda6-persistentCtaSpacer {
height: 120px;
}
._6fd0e42f91edfda6-tierComparisonTable {
margin-bottom: 64px;
}
._7d7feb6bbfde0545-premiumTooltipFooterBackground {
background: linear-gradient(90deg, #b473f5, #e292aa);
width: "100%";
}
._7d7feb6bbfde0545-tooltipBodyContainer {
padding: 8px 12px;
text-align: center;
}
._7d7feb6bbfde0545-tooltipPremiumFooterContainer {
align-items: center;
background: linear-gradient(90deg, #b473f5, #e292aa);
border-radius: 0 0 5px 5px;
color: #fff;
display: flex;
justify-content: center;
}
._7d7feb6bbfde0545-tooltipRemovePadding {
padding: 0;
}
._7d7feb6bbfde0545-gemIcon {
margin-top: 2px;
-webkit-margin-start: -4px;
margin-inline-start: -4px;
}
._7d7feb6bbfde0545-tooltipPremiumFooterSegment {
align-items: center;
display: flex;
flex-basis: 0;
flex-grow: 1;
justify-content: center;
padding: 4px;
text-align: center;
}
._7d7feb6bbfde0545-tooltipPremiumFooterTierSegment {
-webkit-border-end: 1px solid;
border-inline-end: 1px solid;
border-color: var(--background-surface-high);
}
._7d7feb6bbfde0545-clanBadgeContainer img {
margin: 0;
}
._976771df75452ce0-boostedGuildIconGem {
height: 12px;
transition: color 0.1s linear;
width: 12px;
}
:where(._976771df75452ce0-boostedGuildIconGem) {
height: 10px;
}
.theme-light ._976771df75452ce0-iconBackgroundTierNone,
.theme-light ._976771df75452ce0-iconBackgroundTierOne,
.theme-light ._976771df75452ce0-iconBackgroundTierThree,
.theme-light ._976771df75452ce0-iconBackgroundTierTwo {
color: var(--background-accent);
}
.theme-dark ._976771df75452ce0-iconBackgroundTierNone,
.theme-dark ._976771df75452ce0-iconBackgroundTierOne,
.theme-dark ._976771df75452ce0-iconBackgroundTierThree,
.theme-dark ._976771df75452ce0-iconBackgroundTierTwo {
color: var(--interactive-muted);
}
._976771df75452ce0-iconTierNone {
color: var(--opacity-white-20);
}
._976771df75452ce0-iconTierOne,
._976771df75452ce0-iconTierTwo {
color: var(--white);
}
._976771df75452ce0-iconTierThree {
color: var(--guild-boosting-pink);
}
._85d1663d6a9fc7f6-guildIconContainer,
._85d1663d6a9fc7f6-guildIconV2Container {
display: flex;
justify-content: center;
min-width: 20px;
}
._85d1663d6a9fc7f6-guildBadge ._85d1663d6a9fc7f6-boostedGuildIconGem {
transition: color 0.1s linear;
}
:where(._85d1663d6a9fc7f6-disableColor) {
color: var(--background-accent);
}
._85d1663d6a9fc7f6-tierTooltipTitle {
font-weight: var(--font-weight-semibold);
}
._85d1663d6a9fc7f6-boostedGuildIconGem {
height: 10px;
}
._85d1663d6a9fc7f6-boostedGuildTierMutedIconWithVisibleBanner {
color: var(--text-muted);
}
._85d1663d6a9fc7f6-iconTierNone {
color: var(--opacity-white-20);
}
._85d1663d6a9fc7f6-boostedGuildTierIconBackgroundWithVisibleBanner {
color: var(--interactive-text-active);
}
._6e5000705ad8bf77-header {
align-items: flex-start;
box-sizing: border-box;
display: flex;
flex-direction: column;
margin-bottom: 8px;
margin-top: 8px;
padding: 0 16px;
width: 100%;
}
._6e5000705ad8bf77-members {
display: flex;
flex-wrap: wrap;
gap: 0 8px;
}
._6e5000705ad8bf77-memberCount {
align-items: center;
display: flex;
gap: 4px;
}
._6e5000705ad8bf77-dot {
background: var(--text-status-offline);
}
._6e5000705ad8bf77-dot,
._6e5000705ad8bf77-dotOnline {
border-radius: 50%;
height: 8px;
width: 8px;
}
._6e5000705ad8bf77-dotOnline {
background: var(--text-status-online);
}
._6e5000705ad8bf77-established {
display: flex;
}
._6e5000705ad8bf77-nameContainer {
align-items: center;
display: flex;
flex-direction: row;
gap: 4px;
width: 100%;
}
._6e5000705ad8bf77-guildNameContainer {
overflow: hidden;
}
._6e5000705ad8bf77-guildNameContainer:hover {
cursor: pointer;
}
._6e5000705ad8bf77-guildNameContainer:hover ._6e5000705ad8bf77-guildName {
text-decoration: underline;
}
._6e5000705ad8bf77-guildName {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._6e5000705ad8bf77-guildBadge {
cursor: pointer;
flex-shrink: 0;
height: 16px;
width: 16px;
}
.d3846c099147bad3-container {
border-radius: 16px;
box-shadow: var(--shadow-border), var(--shadow-high);
display: flex;
flex-direction: column;
overflow: hidden;
width: 300px;
}
.d3846c099147bad3-spinnerContainer {
background: var(--background-surface-highest);
padding: 16px;
}
._10651c5cfe637db6-chipletContainerInner {
align-items: center;
background: var(--background-mod-strong);
border-radius: 4px;
display: inline-flex;
line-height: 16px !important;
padding: 0 4px;
vertical-align: middle;
}
._10651c5cfe637db6-chipletContainerInline {
margin-top: -2px;
}
._10651c5cfe637db6-clickable {
cursor: pointer;
transition: background 0.1s ease-in-out;
}
._10651c5cfe637db6-clickable:hover {
background: var(--background-mod-muted);
}
._10651c5cfe637db6-text {
align-items: center;
display: inline-flex;
line-height: 16px !important;
max-width: 70px;
}
._10651c5cfe637db6-badge {
-webkit-margin-end: 2px;
margin-inline-end: 2px;
margin-top: 0;
}
._10651c5cfe637db6-tooltip {
background: var(--background-surface-highest);
border-radius: 8px;
}
._10651c5cfe637db6-tooltip,
._10651c5cfe637db6-tooltipContainer {
max-width: 360px;
padding: 0;
}
._10651c5cfe637db6-chipletContainerInner._10651c5cfe637db6-noTooltip:hover {
background: var(--background-mod-strong);
}
._10651c5cfe637db6-tagText {
text-indent: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.b789ab22af23d3f0-fallback {
align-items: center;
background-color: #423d80;
box-sizing: border-box;
display: flex;
flex-direction: column;
height: 100%;
padding: 12px;
text-align: center;
}
.b789ab22af23d3f0-spacer {
flex: 1;
}
.e0f8aee83741c888-container {
background-color: var(--background-base-low);
border: 1px solid var(--border-subtle);
border-radius: 12px;
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px;
}
.e0f8aee83741c888-headerContainer {
border-bottom: 1px solid var(--border-subtle);
display: flex;
justify-content: space-between;
padding-bottom: 12px;
}
.e0f8aee83741c888-headerContent {
align-items: center;
display: flex;
flex-direction: row;
gap: 8px;
}
.e0f8aee83741c888-headerTextContainer {
display: flex;
flex-direction: column;
gap: 4px;
}
.e0f8aee83741c888-gameGrid {
display: grid;
gap: 16px;
grid-template-columns: repeat(4, 1fr);
}
.e0f8aee83741c888-gameGrid:has(.e0f8aee83741c888-gameClickable:nth-of-type(5):last-of-type),
.e0f8aee83741c888-gameGrid:has(.e0f8aee83741c888-placeholderArt:nth-of-type(5):last-of-type) {
grid-template-columns: repeat(5, 1fr);
}
.e0f8aee83741c888-gameGrid:has(.e0f8aee83741c888-gameClickable:nth-of-type(9)),
.e0f8aee83741c888-gameGrid:has(.e0f8aee83741c888-placeholderArt:nth-of-type(9)) {
grid-template-columns: repeat(5, 1fr);
}
.e0f8aee83741c888-gameClickable {
cursor: pointer;
opacity: 1;
perspective: 600px;
transition: opacity 0.2s ease;
}
.e0f8aee83741c888-gameGrid:hover .e0f8aee83741c888-gameClickable {
opacity: 0.5;
}
.e0f8aee83741c888-gameGrid:hover .e0f8aee83741c888-gameClickable:hover {
opacity: 1;
}
.e0f8aee83741c888-coverArtContainer {
border-radius: 8px;
position: relative;
transition: box-shadow 0.2s ease;
}
.full-motion .e0f8aee83741c888-coverArtContainer {
transition:
box-shadow 0.2s ease,
transform 0.1s ease-out;
}
.e0f8aee83741c888-gameGrid:hover .e0f8aee83741c888-gameClickable:hover .e0f8aee83741c888-coverArtContainer {
box-shadow: 0 0 25px 0 rgba(145, 101, 255, 0.25);
}
.e0f8aee83741c888-coverArtContainer:after {
border-radius: 8px;
content: "";
inset: 0;
pointer-events: none;
position: absolute;
transition: box-shadow 0.2s ease;
}
.e0f8aee83741c888-gameGrid:hover .e0f8aee83741c888-gameClickable:hover .e0f8aee83741c888-coverArtContainer:after {
box-shadow: inset 0 0 67px 0 rgba(145, 101, 255, 0.25);
}
.e0f8aee83741c888-coverArt {
border: 1px solid var(--border-subtle);
border-radius: 8px;
display: block;
height: 94px;
width: 73px;
}
.e0f8aee83741c888-closeButton {
color: var(--interactive-text-default);
cursor: pointer;
}
.e0f8aee83741c888-placeholderArt {
background-color: var(--background-surface-high);
}
.e0f8aee83741c888-closeButtonContainer {
display: flex;
justify-content: flex-end;
}
.e0f8aee83741c888-errorContainer {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 364px;
}
.e0f8aee83741c888-errorImage {
margin-bottom: 16px;
}
.e0f8aee83741c888-instructionsLink {
display: inline-block;
font-size: inherit;
}
.e0f8aee83741c888-instructionsLink:hover {
text-decoration: underline;
}
.e0f8aee83741c888-gameTile {
height: 36px;
width: 36px;
}
.fd2e49256538f7ed-helper {
align-items: center;
background: var(--background-base-lowest);
border: 1px solid hsla(0, 0%, 100%, 0.04);
border-radius: 8px;
box-shadow: var(--shadow-low);
display: flex;
flex-direction: row;
padding: 12px;
}
.fd2e49256538f7ed-infoFilledIcon {
color: var(--text-default);
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
@value transitionDuration 200ms;
div.modalRoot {
border-radius: 12px;
position: relative;
}
div.c28af8664f7b2fe8-modalHeader {
overflow-x: visible;
}
.c28af8664f7b2fe8-closeBtn {
inset-inline-end: 12px;
position: absolute;
top: 12px;
}
.c28af8664f7b2fe8-asset {
height: auto;
margin-bottom: 24px;
width: 205px;
}
.c28af8664f7b2fe8-modalContent {
display: flex;
flex-direction: column;
gap: 6px;
padding: 0 16px 24px;
}
.c28af8664f7b2fe8-completedModalContent {
align-items: center;
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px 24px;
}
.c28af8664f7b2fe8-choiceContainer {
align-items: center;
background-color: var(--background-base-lower);
border: 1px solid var(--border-muted);
border-radius: 8px;
box-sizing: border-box;
cursor: pointer;
display: flex;
justify-content: space-between;
padding: 12px;
}
.full-motion .c28af8664f7b2fe8-choiceContainer {
transition: background-color 0.2s ease-in-out;
}
.c28af8664f7b2fe8-choiceContainer:hover {
background-color: var(--message-background-hover);
}
.c28af8664f7b2fe8-closeButtonContainer {
border-radius: 3px;
overflow: hidden;
position: relative;
}
.c28af8664f7b2fe8-progressOverlay {
background-color: var(--background-base-lower);
inset: 0;
opacity: 0.2;
pointer-events: none;
position: absolute;
z-index: 10;
}
.c28af8664f7b2fe8-modalHeader {
padding-bottom: 12px;
}
._7d7b6c22fc4e3f67-hidden {
opacity: 0;
transition: opacity 0.35s ease-in-out;
}
._7d7b6c22fc4e3f67-image {
border-radius: inherit;
height: 100%;
inset-inline-start: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
._7d7b6c22fc4e3f67-video {
transition: opacity 0.35s ease-in-out;
}
.a92e89cd6d5ac450-nitroRewardTileAssetContainer {
background-image: linear-gradient(135deg, var(--premium-tier-1-dark-blue-for-gradients) 20%, var(--premium-perk-pink));
display: flex;
place-content: center;
text-align: center;
}
.a92e89cd6d5ac450-nitroRewardTileAsset {
filter: drop-shadow(0 1px 2px rgb(0 0 0/0.4));
height: auto;
margin-top: 2px;
width: 70%;
-webkit-margin-end: 10%;
margin-inline-end: 10%;
}
._281417ebc313bb72-questRewardTile {
border-radius: 4px;
box-shadow: 6px 12px 32px rgba(0, 0, 0, 0.24);
height: 64px;
position: relative;
width: 64px;
}
._281417ebc313bb72-rewardHighlight {
border-radius: 8px;
overflow: hidden;
}
._281417ebc313bb72-rewardHighlight:after {
border: 1px solid var(--opacity-white-16);
border-radius: inherit;
}
._281417ebc313bb72-borderOverlay:before,
._281417ebc313bb72-rewardHighlight:after {
box-sizing: border-box;
content: "";
height: 100%;
inset-inline-start: 0;
position: absolute;
top: 0;
width: 100%;
}
._281417ebc313bb72-borderOverlay:before {
border: 2px solid var(--white);
border-radius: inherit;
-webkit-mask-image: linear-gradient(-45deg, transparent 50%, #000);
mask-image: linear-gradient(-45deg, transparent 50%, #000);
z-index: 1;
}
._281417ebc313bb72-questRewardTileInteractive {
cursor: pointer;
}
._281417ebc313bb72-questRewardTileAsset {
border-radius: inherit;
display: block;
height: 100%;
object-fit: cover;
width: 100%;
}
._281417ebc313bb72-questRewardTileAssetLazyVideo {
position: absolute;
}
._281417ebc313bb72-questRewardTileAssetStatic {
pointer-events: none;
}
._281417ebc313bb72-questRewardTileDetailsLearnMore {
align-items: center;
background: rgba(0, 0, 0, 0.5);
border-radius: inherit;
bottom: 0;
display: flex;
flex-direction: column;
inset-inline: 0;
justify-content: center;
opacity: 0;
position: absolute;
text-align: center;
top: 0;
transition: opacity 0.125s;
z-index: 0;
}
._281417ebc313bb72-questRewardTileDetailsLearnMore p {
flex: 0 0 auto;
margin: 0;
width: 100%;
}
._281417ebc313bb72-questRewardTile:focus ._281417ebc313bb72-questRewardTileDetailsLearnMore,
._281417ebc313bb72-questRewardTile:hover ._281417ebc313bb72-questRewardTileDetailsLearnMore {
opacity: 1;
}
._281417ebc313bb72-hideLearnMore {
cursor: default;
}
@keyframes _281417ebc313bb72-Shine {
0% {
transform: translate3d(-100%, 0, 0);
}
to {
transform: translate3d(210%, 0, 0);
}
}
._281417ebc313bb72-shine {
border-radius: inherit;
color: var(--opacity-white-8);
height: 100%;
inset-inline-start: 0;
pointer-events: none;
top: 0;
width: 100%;
}
.reduce-motion ._281417ebc313bb72-shine {
opacity: 0;
}
.full-motion ._281417ebc313bb72-shine {
animation-duration: 2s;
animation-iteration-count: infinite;
animation-name: _281417ebc313bb72-Shine;
animation-timing-function: ease-in-out;
}
._281417ebc313bb72-imageVideoOverlay {
border-radius: inherit;
height: 100%;
inset-inline-start: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
._0bd12176bed6b72a-wrapper {
background: var(--background-gradient-chat, var(--background-base-lower));
}
._0bd12176bed6b72a-container {
background-color: var(--interactive-background-selected);
display: flex;
flex-direction: column;
gap: 12px;
padding: 10px;
}
._0bd12176bed6b72a-container ._0bd12176bed6b72a-top {
display: flex;
flex-direction: row;
justify-content: space-between;
}
._0bd12176bed6b72a-container ._0bd12176bed6b72a-left {
display: flex;
flex-direction: column;
gap: 4px;
}
._0bd12176bed6b72a-container ._0bd12176bed6b72a-left ._0bd12176bed6b72a-help {
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
._0bd12176bed6b72a-container ._0bd12176bed6b72a-left ._0bd12176bed6b72a-help:hover {
cursor: pointer;
}
._0bd12176bed6b72a-container ._0bd12176bed6b72a-left ._0bd12176bed6b72a-help ._0bd12176bed6b72a-helpText {
display: inline;
-webkit-margin-end: 3px;
margin-inline-end: 3px;
}
._0bd12176bed6b72a-container ._0bd12176bed6b72a-left ._0bd12176bed6b72a-help ._0bd12176bed6b72a-helpIcon {
vertical-align: middle;
}
._0bd12176bed6b72a-container ._0bd12176bed6b72a-right ._0bd12176bed6b72a-imgWrapper {
height: 38px;
position: relative;
width: 38px;
}
._0bd12176bed6b72a-container ._0bd12176bed6b72a-right ._0bd12176bed6b72a-imgWrapper ._0bd12176bed6b72a-imgUnderlay {
background: linear-gradient(155deg, var(--teal-230) 11.08%, var(--yellow-260) 88.92%);
border-radius: 50%;
filter: blur(20px);
inset: 2.5px;
position: absolute;
}
._0bd12176bed6b72a-assetTile {
border-radius: 8px;
height: 100%;
position: relative;
width: 100%;
z-index: 2;
}
.fc17233d555f9b19-rightSparkle {
margin-top: 15px;
-webkit-margin-start: 1px;
margin-inline-start: 1px;
}
.fc17233d555f9b19-leftSparkle {
-webkit-margin-start: -36px;
margin-inline-start: -36px;
-webkit-padding-end: 10px;
margin-bottom: -18px;
padding-inline-end: 10px;
}
.fc17233d555f9b19-sparklesAndButton {
display: flex;
position: relative;
width: 103%;
}
.fc17233d555f9b19-ctaFullWidth {
width: 100%;
}
.fc17233d555f9b19-buttonSparkleStar1 {
bottom: 35px;
height: 13px;
inset-inline-start: -8px;
position: absolute;
width: 14px;
}
.fc17233d555f9b19-buttonSparkleStar2 {
bottom: 12px;
height: 7px;
inset-inline-start: 7px;
position: absolute;
width: 8px;
}
.fc17233d555f9b19-buttonSparkleStar3 {
bottom: 37px;
height: 28px;
inset-inline-start: 8px;
position: absolute;
width: 14px;
}
.fc17233d555f9b19-buttonSparkleStar4 {
bottom: 26px;
height: 11px;
inset-inline-end: 11px;
position: absolute;
width: 12px;
}
.fc17233d555f9b19-buttonSparkleStar5 {
bottom: 41px;
height: 7px;
inset-inline-end: 4px;
position: absolute;
width: 8px;
}
.fc17233d555f9b19-rimGlowVertical {
bottom: 22px;
height: 45px;
inset-inline-start: -1px;
position: absolute;
width: 1px;
}
.fc17233d555f9b19-rimGlowVertical.fc17233d555f9b19-rimGlowVerticalTier0 {
background: linear-gradient(180deg, var(--premium-tier-0-purple-for-gradients) 0, #fff 50.52%, var(--premium-tier-0-purple-for-gradients) 100%);
}
.fc17233d555f9b19-rimGlowVertical.fc17233d555f9b19-rimGlowVerticalTier2 {
background: linear-gradient(180deg, var(--premium-tier-2-purple-for-gradients) 0, #fff 50.52%, var(--premium-tier-2-purple-for-gradients) 100%);
}
.ac86f68ab746d5ff-premiumCards {
display: flex;
gap: 24px;
width: 100%;
}
.ac86f68ab746d5ff-card {
border-radius: 16px;
color: var(--white);
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 24px;
position: relative;
width: 50%;
}
.ac86f68ab746d5ff-card.ac86f68ab746d5ff-withCardHover:hover {
box-shadow: var(--legacy-elevation-high);
}
.ac86f68ab746d5ff-subscriptionPlanInfo {
display: flex;
flex-direction: column;
text-align: start;
}
.ac86f68ab746d5ff-listItems,
.ac86f68ab746d5ff-listItemsBasic {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.ac86f68ab746d5ff-tierCardFocused {
top: 0;
z-index: 2;
}
.ac86f68ab746d5ff-tierCardHidden {
box-shadow: var(--shadow-low);
opacity: 60%;
transform: scale(93%) translateY(9%);
z-index: 1;
}
.ac86f68ab746d5ff-wumpusImageContainer {
border-start-end-radius: 16px;
filter: saturate(var(--saturation-factor, 1));
inset-inline-end: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 40%;
}
.ac86f68ab746d5ff-wumpusImage {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.ac86f68ab746d5ff-tier0.ac86f68ab746d5ff-withTier0Rim:before {
border-radius: var(--radius-lg);
content: "";
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
margin: -1px;
z-index: -1;
}
.ac86f68ab746d5ff-tier0 {
background-image: var(--custom-premium-colors-premium-gradient-tier-0);
}
.ac86f68ab746d5ff-tier2 {
background-image: var(--custom-premium-colors-premium-gradient-tier-2);
}
.ac86f68ab746d5ff-tier0ApplicationHomeBackground {
background: linear-gradient(180deg, #000, #031a3b);
}
.ac86f68ab746d5ff-tier2ApplicationHomeBackground {
background: linear-gradient(180deg, #000, #36266d);
}
.theme-light .ac86f68ab746d5ff-tier0ApplicationHomeBackground {
background: linear-gradient(180deg, #f7f7fe 22.95%, #b6ddfc 153.33%);
}
.theme-light .ac86f68ab746d5ff-tier2ApplicationHomeBackground {
background: linear-gradient(180deg, #f7f7fe, #b6b9fc 153.33%);
}
.ac86f68ab746d5ff-tier2.ac86f68ab746d5ff-withTier2Rim:before {
border-radius: var(--radius-lg);
content: "";
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
margin: -1px;
z-index: -1;
}
.ac86f68ab746d5ff-applicationHomeTextLightMode {
pointer-events: inherit;
}
.ac86f68ab746d5ff-tier0Title {
height: 40px;
width: 106px;
}
.ac86f68ab746d5ff-tier0ApplicationHomeTitle {
color: var(--white);
height: 16px;
width: 132px;
}
.ac86f68ab746d5ff-tierCardHeaderDisplay {
display: flex;
flex-direction: column;
}
.ac86f68ab746d5ff-tier2Title {
display: block;
height: 24px;
width: 96px;
}
.ac86f68ab746d5ff-tier2ApplicationHomeTitle {
color: var(--white);
height: 16px;
width: 64px;
}
.ac86f68ab746d5ff-item,
.ac86f68ab746d5ff-title {
margin-bottom: 8px;
}
.ac86f68ab746d5ff-item {
align-items: center;
display: flex;
flex-direction: row;
}
.ac86f68ab746d5ff-item:last-child {
margin-bottom: 0;
}
.ac86f68ab746d5ff-tier2ApplicationHomeSubheader {
color: var(--white);
margin-bottom: 6px;
}
.ac86f68ab746d5ff-itemApplicationHome {
color: var(--white);
}
.ac86f68ab746d5ff-applicationHomeTierCardSectionHeader {
display: flex;
font-style: italic;
justify-content: center;
margin-bottom: 56px;
text-transform: uppercase;
}
.theme-light .ac86f68ab746d5ff-applicationHomeTextLightMode {
color: var(--black);
}
.ac86f68ab746d5ff-applicationHomeStarBackground {
height: 100%;
inset-inline-end: 50px;
overflow: hidden;
position: absolute;
top: 20px;
width: 50%;
}
.ac86f68ab746d5ff-itemWithWumpus {
}
.ac86f68ab746d5ff-itemWithWumpus:first-of-type {
max-width: 100%;
}
.ac86f68ab746d5ff-icon {
-webkit-margin-end: 8px;
height: 24px;
margin-inline-end: 8px;
width: 24px;
}
.ac86f68ab746d5ff-smallIcon {
-webkit-margin-end: 10px;
height: 18px;
margin-inline-end: 10px;
width: 18px;
}
.ac86f68ab746d5ff-newCircleIcon {
filter: saturate(var(--saturation-factor, 1));
inset-inline-start: 250px;
position: absolute;
top: -24px;
}
.ac86f68ab746d5ff-trialOfferPill {
margin-bottom: 18px;
}
.ac86f68ab746d5ff-listItemsBasic {
min-height: 92%;
}
.ac86f68ab746d5ff-freeTrialPillInlineBlock {
background: var(--white);
border-radius: var(--radius-md);
color: var(--black);
display: inline-block;
font-weight: var(--font-weight-extra-bold);
line-height: 12px;
mix-blend-mode: screen;
padding-bottom: 4px;
padding-top: 4px;
padding-inline: 8px;
text-transform: uppercase;
}
.ac86f68ab746d5ff-freeTrialPillInline {
margin-top: 4px;
}
.ac86f68ab746d5ff-freeTrialActivatedPillInline,
.ac86f68ab746d5ff-freeTrialPillInline {
margin-bottom: 8px;
max-width: 60%;
}
.ac86f68ab746d5ff-freeTrialActivatedPillInline {
margin-top: 8px;
}
.ac86f68ab746d5ff-taglineXPPrice {
margin: 20px 0 10px;
}
.ac86f68ab746d5ff-taglineXPPrices:first-of-type {
margin: 16px 0 8px;
}
.ac86f68ab746d5ff-taglineXPPrices:last-of-type {
margin: 8px 0 16px;
}
.theme-dark .ac86f68ab746d5ff-newCircleIcon {
color: var(--white);
}
.theme-light .ac86f68ab746d5ff-newCircleIcon {
color: var(--premium-perk-yellow);
}
.ac86f68ab746d5ff-newTagItem {
-webkit-margin-start: 8px;
background: #fff;
border-radius: 8px;
color: var(--premium-tier-2-purple-for-gradients);
margin-inline-start: 8px;
}
.ac86f68ab746d5ff-mostPopularText {
color: var(--white);
text-align: center;
text-transform: uppercase;
}
.ac86f68ab746d5ff-mostPopularPill {
background: linear-gradient(95.07deg, var(--premium-tier-2-purple-for-gradients) 0, var(--premium-tier-2-purple-for-gradients-2) 49.96%, var(--premium-tier-2-pink-for-gradients) 95.93%);
border-radius: 8px;
inset-inline-start: 16px;
margin: auto;
padding: 4px 8px;
position: absolute;
top: -12px;
z-index: 10;
}
.ac86f68ab746d5ff-freeTrialPillWithSparkles {
align-items: center;
display: flex;
}
.ac86f68ab746d5ff-sparkleStar1 {
height: 12px;
width: 14px;
}
.ac86f68ab746d5ff-sparkleStar2 {
height: 7px;
width: 8px;
-webkit-margin-start: -3px;
margin-inline-start: -3px;
margin-bottom: 15px;
}
.ac86f68ab746d5ff-sparkleStar3 {
height: 28px;
margin-inline: 2px 10px;
width: 14px;
}
.ac86f68ab746d5ff-freeTrialPill {
align-items: center;
background: var(--white);
border-radius: var(--radius-md);
display: flex;
flex-direction: row;
height: 20px;
justify-content: center;
}
.ac86f68ab746d5ff-freeTrialPill.ac86f68ab746d5ff-freeTrialPillTier0GradientFill {
background: var(--custom-premium-colors-premium-gradient-tier-0);
}
.ac86f68ab746d5ff-freeTrialPill.ac86f68ab746d5ff-freeTrialPillTier2GradientFill {
background: var(--custom-premium-colors-premium-gradient-tier-2);
}
.ac86f68ab746d5ff-freeTrialPill.ac86f68ab746d5ff-greyBackgroundPill {
background: var(--primary-500);
}
.ac86f68ab746d5ff-freeTrialPill.ac86f68ab746d5ff-modBackgroundPill {
background: hsla(240, 4%, 61%, 0.2);
}
.ac86f68ab746d5ff-freeTrialPill.ac86f68ab746d5ff-freeTrialPillTier2OldGradientFill {
background: var(--custom-premium-colors-premium-gradient-tier-2-old);
}
.ac86f68ab746d5ff-freeTrialPill.ac86f68ab746d5ff-lightBackgroundPill {
background: linear-gradient(101deg, var(--premium-tier-2-purple-for-gradients) 25.21%, var(--premium-tier-2-purple-for-gradients-2) 62.43%, var(--premium-tier-2-pink-for-gradients) 95.57%);
border: 1px solid #b473f5;
}
.ac86f68ab746d5ff-freeTrialPill.ac86f68ab746d5ff-freeTrialPillGap {
gap: 10px;
}
.ac86f68ab746d5ff-freeTrialPillText {
cursor: default;
display: inline-block;
font-weight: var(--font-weight-extra-bold);
line-height: 12px;
padding-bottom: 4px;
padding-top: 4px;
padding-inline: 8px;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
}
.ac86f68ab746d5ff-freeTrialPillText.ac86f68ab746d5ff-freeTrialPillTextTier0 {
color: var(--premium-tier-0-purple-for-gradients);
}
.ac86f68ab746d5ff-freeTrialPillText.ac86f68ab746d5ff-freeTrialPillTextTier2 {
color: var(--premium-tier-2-purple-for-gradients);
}
.ac86f68ab746d5ff-freeTrialPillText.ac86f68ab746d5ff-freeTrialPillTextInverted {
color: var(--white);
}
.ac86f68ab746d5ff-freeTrialPillText.ac86f68ab746d5ff-freeTrialPillTextDefault {
color: var(--text-default);
}
.ac86f68ab746d5ff-sparkleStar4 {
height: 11px;
width: 13px;
-webkit-margin-start: 10px;
margin-inline-start: 10px;
}
.ac86f68ab746d5ff-sparkleStar5 {
height: 7px;
width: 8px;
-webkit-margin-start: 6px;
margin-inline-start: 6px;
margin-top: 1px;
}
.ac86f68ab746d5ff-topRimPill {
inset-inline-end: 4px;
position: absolute;
top: -15px;
z-index: 2;
}
.ac86f68ab746d5ff-rimGlowTier0 {
background: linear-gradient(-90deg, var(--premium-tier-0-purple-for-gradients) 0, #fff 4.98%, #fff 50.52%, var(--premium-tier-0-blue-for-gradients) 100%);
inset-inline-end: 5%;
top: -1px;
width: 88%;
}
.ac86f68ab746d5ff-rimGlowTier0,
.ac86f68ab746d5ff-rimGlowTier2 {
height: 1px;
position: absolute;
z-index: 1;
}
.ac86f68ab746d5ff-rimGlowTier2 {
background: linear-gradient(-90deg, var(--premium-tier-2-purple-for-gradients) 0, #fff 4.98%, #fff 50.52%, var(--premium-tier-2-pink-for-gradients) 100%);
inset-inline-end: 5%;
top: -1px;
width: 88%;
}
.ac86f68ab746d5ff-withPromotionalGradientBanner {
background: linear-gradient(100.98deg, #8547c6, #b845c1, #ab5d8a);
border-end-end-radius: 17px;
border-end-start-radius: 17px;
box-sizing: border-box;
overflow: hidden;
}
.ac86f68ab746d5ff-withPromotionalGradientBanner.ac86f68ab746d5ff-withPromotionalCardImage {
background: linear-gradient(100.98deg, rgba(133, 71, 198, 0.82), rgba(184, 69, 193, 0.82), rgba(171, 93, 138, 0.82));
}
.ac86f68ab746d5ff-promotionalCardImage {
inset-inline-end: 0;
position: absolute;
top: 0;
transform: scale(50%);
transform-origin: top right;
z-index: -1;
}
.ac86f68ab746d5ff-promotionalBackgroundImage {
inset-inline-end: 0;
position: absolute;
top: 0;
transform: scale(65%);
transform-origin: top right;
}
.ac86f68ab746d5ff-tier2SideGradient {
background: radial-gradient(80% 70% at 100% 50%, #2d01dc 0, transparent 100%), radial-gradient(80% 70% at 100% 50%, #b182ff 0, transparent 100%);
height: 1000px;
opacity: 0.4;
pointer-events: none;
position: absolute;
width: 100vw;
}
.ac86f68ab746d5ff-subButton {
margin-top: 60px;
}
.ac86f68ab746d5ff-v2SubButtonText {
color: var(--brand-500);
}
.theme-light .ac86f68ab746d5ff-v2SubButtonText {
color: var(--white);
}
.ac86f68ab746d5ff-buttonShine {
color: hsl(var(--brand-500-hsl) / 0.1);
}
.ac86f68ab746d5ff-subButtonText {
color: var(--brand-500);
}
.e62f9dddab9857a0-heading {
margin-bottom: 8px;
}
.e62f9dddab9857a0-context {
margin-bottom: 16px;
}
.e62f9dddab9857a0-gradientUpsellWrapper {
align-items: center;
border-radius: 8px;
box-sizing: border-box;
color: var(--white);
display: flex;
flex-direction: column;
margin-top: 16px;
padding: 16px;
width: 100%;
}
.e62f9dddab9857a0-gradientUpsellWrapper a,
.e62f9dddab9857a0-gradientUpsellWrapper a:hover {
color: var(--white);
text-decoration: underline;
}
.e62f9dddab9857a0-gradientUpsellWrapperTier0 {
background-image: linear-gradient(90deg, var(--premium-tier-0-purple-for-gradients) 0, var(--premium-tier-0-blue-for-gradients-2) 50%, var(--premium-tier-0-blue-for-gradients) 100%);
}
.e62f9dddab9857a0-gradientUpsellWrapperTier2 {
background-image: linear-gradient(90deg, var(--premium-tier-2-purple-for-gradients) 0, var(--premium-tier-2-pink-for-gradients) 100%);
}
.e62f9dddab9857a0-gradientUpsellWrapperWithBottomMargin {
margin-bottom: 24px;
}
.e62f9dddab9857a0-logo {
align-items: center;
color: var(--white);
display: flex;
margin-bottom: 4px;
}
.e62f9dddab9857a0-logoIcon {
flex: 0 0 auto;
-webkit-margin-end: 2px;
height: 24px;
margin-inline-end: 2px;
width: 24px;
}
.e62f9dddab9857a0-logoWordmark {
flex: 0 0 auto;
height: 16px;
width: auto;
}
.e62f9dddab9857a0-copy span {
cursor: pointer;
text-decoration: underline;
}
.e62f9dddab9857a0-copy,
.e62f9dddab9857a0-copy span {
color: var(--white);
}
.e62f9dddab9857a0-copy {
margin-bottom: 12px;
text-align: center;
}
.e62f9dddab9857a0-trialBadge {
background-color: var(--white);
border-radius: 30px;
padding: 2px 8px;
text-transform: uppercase;
}
.e62f9dddab9857a0-trialBadgeInner {
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.e62f9dddab9857a0-gradientUpsellWrapperTier0 .e62f9dddab9857a0-trialBadgeInner {
background-image: linear-gradient(90deg, var(--premium-tier-0-purple-for-gradients) 0, var(--premium-tier-0-blue-for-gradients-2) 50%, var(--premium-tier-0-blue-for-gradients) 100%);
}
.e62f9dddab9857a0-gradientUpsellWrapperTier2 .e62f9dddab9857a0-trialBadgeInner {
background-image: linear-gradient(90deg, var(--premium-tier-2-purple-for-gradients) 0, var(--premium-tier-2-pink-for-gradients) 100%);
}
.e62f9dddab9857a0-trialBadgeGradientTier0 {
background-image: linear-gradient(90deg, var(--premium-tier-0-purple-for-gradients) 0, var(--premium-tier-0-blue-for-gradients-2) 50%, var(--premium-tier-0-blue-for-gradients) 100%);
color: var(--white);
}
.e62f9dddab9857a0-trialBadgeGradientTier2 {
background-image: linear-gradient(90deg, var(--premium-tier-2-purple-for-gradients) 0, var(--premium-tier-2-pink-for-gradients) 100%);
color: var(--white);
}
.e62f9dddab9857a0-contentContainer {
-webkit-padding-start: 24px;
padding-inline-start: 24px;
-webkit-padding-end: 24px;
align-items: center;
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: center;
padding-inline-end: 24px;
}
.e62f9dddab9857a0-countdownText {
color: #fff;
padding-top: 8px;
}
.e62f9dddab9857a0-footer {
background-color: var(--background-base-lowest);
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 12px;
padding-bottom: 16px;
padding-top: 16px;
width: 100%;
}
.theme-dark .e62f9dddab9857a0-cancelButton {
color: #fff;
}
.e62f9dddab9857a0-cancelButton {
-webkit-margin-start: 24px;
margin-inline-start: 24px;
}
.e62f9dddab9857a0-subscribeButton {
-webkit-margin-end: 24px;
margin-inline-end: 24px;
}
.e62f9dddab9857a0-upsellButton {
margin-top: 16px;
width: 100%;
}
.e62f9dddab9857a0-divider {
background-color: var(--border-subtle);
height: 1px;
width: 100%;
}
@keyframes e62f9dddab9857a0-zoomInFromBottomRight {
0% {
opacity: 0;
transform: translateX(80%) translateY(80%) scaleX(20%) scaleY(20%);
}
to {
opacity: 100%;
transform: translateX(0) translateY(0) scaleX(100%) scaleY(100%);
}
}
.e62f9dddab9857a0-messageLengthUpsellContainer {
align-items: center;
background-color: var(--background-surface-high);
border-radius: var(--radius-sm);
display: flex;
flex-direction: column;
overflow: hidden;
padding: 12px;
}
.full-motion .e62f9dddab9857a0-messageLengthUpsellContainer.e62f9dddab9857a0-messageLengthUpsellAppearAnimation {
animation-delay: 0s;
animation-duration: 0.4s;
animation-iteration-count: 1;
animation-name: e62f9dddab9857a0-zoomInFromBottomRight;
animation-timing-function: ease-in;
}
.e62f9dddab9857a0-messageLengthBrandedContainer {
margin-bottom: 16px;
max-width: 290px;
}
.e62f9dddab9857a0-messageLengthUpsellHeader {
margin-bottom: 16px;
margin-top: 4px;
}
.e62f9dddab9857a0-tryOutUpsellContainer {
align-items: center;
display: flex;
flex-direction: column;
}
.e62f9dddab9857a0-topRimPill {
margin-top: -15px;
padding-bottom: 16px;
}
.e62f9dddab9857a0-subscribeButtonWide {
height: 40px;
margin-top: 16px;
width: 100%;
}
.e62f9dddab9857a0-countdownTextInSetting {
color: var(--premium-tier-2-pink);
padding-top: 8px;
}
.theme-light .e62f9dddab9857a0-countdownTextInSetting {
color: var(--premium-tier-2-purple-for-gradients);
}
.e62f9dddab9857a0-premiumTrialUpsellForModal {
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 100%;
}
.e62f9dddab9857a0-upsellClose {
color: var(--interactive-text-default);
cursor: pointer;
inset-inline-end: 20px;
position: absolute;
top: 20px;
}
.e62f9dddab9857a0-upsellImage {
height: 60px;
margin-bottom: 16px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
._61733cb6e6a659f9-container {
align-items: center;
background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.1) 50%, hsla(0, 0%, 100%, 0));
display: flex;
height: 50px;
justify-content: center;
}
._61733cb6e6a659f9-premiumBrandRefreshContainer {
align-items: center;
background: var(--background-mod-normal);
border-radius: var(--radius-md);
display: flex;
padding: var(--space-12) var(--space-16);
}
._61733cb6e6a659f9-v2Container {
background: none;
justify-content: start;
}
._61733cb6e6a659f9-iconContainer {
display: flex;
}
._61733cb6e6a659f9-icon + ._61733cb6e6a659f9-icon {
-webkit-margin-start: -8px;
margin-inline-start: -8px;
}
._61733cb6e6a659f9-mask {
-webkit-mask-image: url(/assets/1f9b76e0279b91a4.svg);
mask-image: url(/assets/1f9b76e0279b91a4.svg);
-webkit-mask-position: 0 0;
mask-position: 0 0;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
._61733cb6e6a659f9-textContainer {
-webkit-margin-start: 9px;
margin-inline-start: 9px;
text-align: start;
}
._790b6db13a5da129-container {
align-items: center;
background: var(--background-base-lowest);
border: 1px solid var(--interactive-muted);
border-radius: 8px;
height: 44px;
justify-content: center;
margin: 24px auto 16px;
max-width: 80%;
min-width: 40%;
padding: 0 20px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
._790b6db13a5da129-container,
._790b6db13a5da129-iconContainer {
display: flex;
}
._790b6db13a5da129-icon + ._790b6db13a5da129-icon {
-webkit-margin-start: -8px;
margin-inline-start: -8px;
}
._790b6db13a5da129-textContainer {
-webkit-margin-start: 8px;
margin-inline-start: 8px;
text-align: start;
}
._3ec704473ec6c7bf-root {
text-align: center;
}
._3ec704473ec6c7bf-root p {
margin: 0 0 16px;
}
._3ec704473ec6c7bf-contentContainer {
display: flex;
flex-direction: row;
}
._3ec704473ec6c7bf-bodyContent {
align-content: center;
}
._3ec704473ec6c7bf-header {
margin-bottom: 24px;
}
._3ec704473ec6c7bf-enhancedHeader,
._3ec704473ec6c7bf-subHeader {
padding: 0 32px;
}
._3ec704473ec6c7bf-content,
._3ec704473ec6c7bf-enhancedContent {
margin-bottom: 32px;
}
._3ec704473ec6c7bf-enhancedContent {
padding: 0;
}
._3ec704473ec6c7bf-footer {
align-items: center;
justify-content: space-between;
}
._3ec704473ec6c7bf-enhancedFooter {
background: var(--background-base-lowest);
}
._3ec704473ec6c7bf-primaryActions {
align-items: center;
display: flex;
}
._3ec704473ec6c7bf-enhancedPrimaryActions {
justify-content: space-between;
width: 100%;
}
._3ec704473ec6c7bf-secondaryAction {
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
._3ec704473ec6c7bf-enhancedSecondaryAction {
color: var(--premium-nitro-pink-text);
}
._3ec704473ec6c7bf-enhancedSecondaryAction:hover {
text-decoration: underline;
}
._3ec704473ec6c7bf-closeButton {
align-self: flex-end;
color: var(--interactive-text-active);
margin: 12px;
position: absolute;
}
._3ec704473ec6c7bf-artContainer {
border-radius: 8px;
margin: -48px auto 24px;
position: relative;
width: 225px;
}
._3ec704473ec6c7bf-artContainerBoxShadow {
box-shadow: var(--elevation-medium);
}
._3ec704473ec6c7bf-art {
width: 225px;
}
._3ec704473ec6c7bf-sparkleBadge {
inset-inline-start: 0;
margin-top: -18px;
position: absolute;
top: 0;
-webkit-margin-start: -12px;
display: block;
filter: drop-shadow(0 1px 3px var(--opacity-black-28));
height: 34px;
margin-inline-start: -12px;
width: 47px;
}
._3ec704473ec6c7bf-newBadge {
display: inline-block;
margin-top: -2px;
vertical-align: middle;
}
._3ec704473ec6c7bf-learnMoreLink {
color: var(--text-link);
cursor: pointer;
}
._3ec704473ec6c7bf-context {
margin-bottom: 16px;
}
._3ec704473ec6c7bf-betaTag {
display: inline-block;
-webkit-margin-start: 0.5em;
margin-inline-start: 0.5em;
vertical-align: baseline;
}
._8162d4592375fb65-artContainer {
align-items: flex-end;
display: flex;
height: 108px;
justify-content: center;
margin: -54px auto 32px;
width: 180px;
}
._8162d4592375fb65-art {
height: 100%;
width: 100%;
}
._8162d4592375fb65-body {
display: flex;
flex-direction: column;
gap: 16px;
white-space: pre-line;
}
._5d473ecff348c314-member {
position: relative;
-webkit-margin-start: 8px;
margin-inline-start: 8px;
max-width: calc(var(--custom-member-list-width) - 16px);
}
._5d473ecff348c314-memberInner {
box-sizing: border-box;
height: auto;
padding: var(--space-xxs) 0 var(--space-xxs);
}
._5d473ecff348c314-offline {
opacity: 0.3;
}
._5d473ecff348c314-offline:hover {
opacity: 1;
}
._5d473ecff348c314-icon {
flex: 0 0 auto;
flex-shrink: 0;
height: 14px;
position: relative;
width: 14px;
}
._5d473ecff348c314-ownerIcon {
color: var(--text-feedback-warning);
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
._5d473ecff348c314-lostPermission {
text-decoration: line-through;
}
._5d473ecff348c314-premiumIcon {
top: 1px;
-webkit-margin-start: 3px;
margin-inline-start: 3px;
}
._5d473ecff348c314-placeholder {
padding: 4px 8px;
}
._5d473ecff348c314-botTag {
-webkit-margin-start: 4px;
flex: 0 0 auto;
margin-inline-start: 4px;
}
._5d473ecff348c314-username {
align-items: center;
display: flex;
flex: 0 1 auto;
max-width: 100%;
min-width: 0;
-webkit-margin-end: auto;
margin-inline-end: auto;
}
._5d473ecff348c314-name {
flex: 1 1 auto;
white-space: nowrap;
}
span._5d473ecff348c314-clanTag {
margin-top: 1px;
-webkit-margin-start: 4px;
margin-inline-start: 4px;
margin-bottom: 1px;
}
._5d473ecff348c314-flatBottom {
border-end-end-radius: 0;
border-end-start-radius: 0;
}
._13cf1aa56cd732d2-heading-sm\/normal {
font-family: var(--font-display);
font-size: 14px;
font-weight: 400;
line-height: 1.2857142857142858;
}
._13cf1aa56cd732d2-heading-sm\/normal._13cf1aa56cd732d2-fontScaling {
font-size: 0.875rem;
}
._13cf1aa56cd732d2-heading-sm\/medium {
font-family: var(--font-display);
font-size: 14px;
font-weight: 500;
line-height: 1.2857142857142858;
}
._13cf1aa56cd732d2-heading-sm\/medium._13cf1aa56cd732d2-fontScaling {
font-size: 0.875rem;
}
._13cf1aa56cd732d2-heading-sm\/semibold {
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
line-height: 1.2857142857142858;
}
._13cf1aa56cd732d2-heading-sm\/semibold._13cf1aa56cd732d2-fontScaling {
font-size: 0.875rem;
}
._13cf1aa56cd732d2-heading-sm\/bold {
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
line-height: 1.2857142857142858;
}
._13cf1aa56cd732d2-heading-sm\/bold._13cf1aa56cd732d2-fontScaling {
font-size: 0.875rem;
}
._13cf1aa56cd732d2-heading-sm\/extrabold {
font-family: var(--font-display);
font-size: 14px;
font-weight: 800;
line-height: 1.2857142857142858;
}
._13cf1aa56cd732d2-heading-sm\/extrabold._13cf1aa56cd732d2-fontScaling {
font-size: 0.875rem;
}
._13cf1aa56cd732d2-heading-md\/normal {
font-family: var(--font-display);
font-size: 16px;
font-weight: 400;
line-height: 1.25;
}
._13cf1aa56cd732d2-heading-md\/normal._13cf1aa56cd732d2-fontScaling {
font-size: 1rem;
}
._13cf1aa56cd732d2-heading-md\/medium {
font-family: var(--font-display);
font-size: 16px;
font-weight: 500;
line-height: 1.25;
}
._13cf1aa56cd732d2-heading-md\/medium._13cf1aa56cd732d2-fontScaling {
font-size: 1rem;
}
._13cf1aa56cd732d2-heading-md\/semibold {
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
line-height: 1.25;
}
._13cf1aa56cd732d2-heading-md\/semibold._13cf1aa56cd732d2-fontScaling {
font-size: 1rem;
}
._13cf1aa56cd732d2-heading-md\/bold {
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
line-height: 1.25;
}
._13cf1aa56cd732d2-heading-md\/bold._13cf1aa56cd732d2-fontScaling {
font-size: 1rem;
}
._13cf1aa56cd732d2-heading-md\/extrabold {
font-family: var(--font-display);
font-size: 16px;
font-weight: 800;
line-height: 1.25;
}
._13cf1aa56cd732d2-heading-md\/extrabold._13cf1aa56cd732d2-fontScaling {
font-size: 1rem;
}
._13cf1aa56cd732d2-heading-lg\/normal {
font-family: var(--font-display);
font-size: 20px;
font-weight: 400;
line-height: 1.2;
}
._13cf1aa56cd732d2-heading-lg\/normal._13cf1aa56cd732d2-fontScaling {
font-size: 1.25rem;
}
._13cf1aa56cd732d2-heading-lg\/medium {
font-family: var(--font-display);
font-size: 20px;
font-weight: 500;
line-height: 1.2;
}
._13cf1aa56cd732d2-heading-lg\/medium._13cf1aa56cd732d2-fontScaling {
font-size: 1.25rem;
}
._13cf1aa56cd732d2-heading-lg\/semibold {
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
line-height: 1.2;
}
._13cf1aa56cd732d2-heading-lg\/semibold._13cf1aa56cd732d2-fontScaling {
font-size: 1.25rem;
}
._13cf1aa56cd732d2-heading-lg\/bold {
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
line-height: 1.2;
}
._13cf1aa56cd732d2-heading-lg\/bold._13cf1aa56cd732d2-fontScaling {
font-size: 1.25rem;
}
._13cf1aa56cd732d2-heading-lg\/extrabold {
font-family: var(--font-display);
font-size: 20px;
font-weight: 800;
line-height: 1.2;
}
._13cf1aa56cd732d2-heading-lg\/extrabold._13cf1aa56cd732d2-fontScaling {
font-size: 1.25rem;
}
._13cf1aa56cd732d2-heading-xl\/normal {
font-family: var(--font-display);
font-size: 24px;
font-weight: 400;
line-height: 1.25;
}
._13cf1aa56cd732d2-heading-xl\/normal._13cf1aa56cd732d2-fontScaling {
font-size: 1.5rem;
}
._13cf1aa56cd732d2-heading-xl\/medium {
font-family: var(--font-display);
font-size: 24px;
font-weight: 500;
line-height: 1.25;
}
._13cf1aa56cd732d2-heading-xl\/medium._13cf1aa56cd732d2-fontScaling {
font-size: 1.5rem;
}
._13cf1aa56cd732d2-heading-xl\/semibold {
font-family: var(--font-display);
font-size: 24px;
font-weight: 600;
line-height: 1.25;
}
._13cf1aa56cd732d2-heading-xl\/semibold._13cf1aa56cd732d2-fontScaling {
font-size: 1.5rem;
}
._13cf1aa56cd732d2-heading-xl\/bold {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
line-height: 1.25;
}
._13cf1aa56cd732d2-heading-xl\/bold._13cf1aa56cd732d2-fontScaling {
font-size: 1.5rem;
}
._13cf1aa56cd732d2-heading-xl\/extrabold {
font-family: var(--font-display);
font-size: 24px;
font-weight: 800;
line-height: 1.25;
}
._13cf1aa56cd732d2-heading-xl\/extrabold._13cf1aa56cd732d2-fontScaling {
font-size: 1.5rem;
}
._13cf1aa56cd732d2-heading-xxl\/normal {
font-family: var(--font-display);
font-size: 32px;
font-weight: 400;
line-height: 1.25;
}
._13cf1aa56cd732d2-heading-xxl\/normal._13cf1aa56cd732d2-fontScaling {
font-size: 2rem;
}
._13cf1aa56cd732d2-heading-xxl\/medium {
font-family: var(--font-display);
font-size: 32px;
font-weight: 500;
line-height: 1.25;
}
._13cf1aa56cd732d2-heading-xxl\/medium._13cf1aa56cd732d2-fontScaling {
font-size: 2rem;
}
._13cf1aa56cd732d2-heading-xxl\/semibold {
font-family: var(--font-display);
font-size: 32px;
font-weight: 600;
line-height: 1.25;
}
._13cf1aa56cd732d2-heading-xxl\/semibold._13cf1aa56cd732d2-fontScaling {
font-size: 2rem;
}
._13cf1aa56cd732d2-heading-xxl\/bold {
font-family: var(--font-display);
font-size: 32px;
font-weight: 700;
line-height: 1.25;
}
._13cf1aa56cd732d2-heading-xxl\/bold._13cf1aa56cd732d2-fontScaling {
font-size: 2rem;
}
._13cf1aa56cd732d2-heading-xxl\/extrabold {
font-family: var(--font-display);
font-size: 32px;
font-weight: 800;
line-height: 1.25;
}
._13cf1aa56cd732d2-heading-xxl\/extrabold._13cf1aa56cd732d2-fontScaling {
font-size: 2rem;
}
._13cf1aa56cd732d2-eyebrow {
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.3333333333333333;
text-transform: uppercase;
}
._13cf1aa56cd732d2-eyebrow._13cf1aa56cd732d2-fontScaling {
font-size: 0.75rem;
}
._13cf1aa56cd732d2-heading-deprecated-12\/normal {
font-family: var(--font-display);
font-size: 12px;
font-weight: 400;
line-height: 1.3333333333333333;
}
._13cf1aa56cd732d2-heading-deprecated-12\/normal._13cf1aa56cd732d2-fontScaling {
font-size: 0.75rem;
}
._13cf1aa56cd732d2-heading-deprecated-12\/medium {
font-family: var(--font-display);
font-size: 12px;
font-weight: 500;
line-height: 1.3333333333333333;
}
._13cf1aa56cd732d2-heading-deprecated-12\/medium._13cf1aa56cd732d2-fontScaling {
font-size: 0.75rem;
}
._13cf1aa56cd732d2-heading-deprecated-12\/semibold {
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
line-height: 1.3333333333333333;
}
._13cf1aa56cd732d2-heading-deprecated-12\/semibold._13cf1aa56cd732d2-fontScaling {
font-size: 0.75rem;
}
._13cf1aa56cd732d2-heading-deprecated-12\/bold {
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
line-height: 1.3333333333333333;
}
._13cf1aa56cd732d2-heading-deprecated-12\/bold._13cf1aa56cd732d2-fontScaling {
font-size: 0.75rem;
}
._13cf1aa56cd732d2-heading-deprecated-12\/extrabold {
font-family: var(--font-display);
font-size: 12px;
font-weight: 800;
line-height: 1.3333333333333333;
}
._13cf1aa56cd732d2-heading-deprecated-12\/extrabold._13cf1aa56cd732d2-fontScaling {
font-size: 0.75rem;
}
._13cf1aa56cd732d2-redesign\/heading-18\/bold {
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
line-height: 1.3333333333333333;
}
._13cf1aa56cd732d2-redesign\/heading-18\/bold._13cf1aa56cd732d2-fontScaling {
font-size: 1.125rem;
}
._13cf1aa56cd732d2-text-xxs\/normal {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 400;
line-height: 1.2;
}
._13cf1aa56cd732d2-text-xxs\/normal._13cf1aa56cd732d2-fontScaling {
font-size: 0.625rem;
}
._13cf1aa56cd732d2-text-xxs\/medium {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 500;
line-height: 1.2;
}
._13cf1aa56cd732d2-text-xxs\/medium._13cf1aa56cd732d2-fontScaling {
font-size: 0.625rem;
}
._13cf1aa56cd732d2-text-xxs\/semibold {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 600;
line-height: 1.2;
}
._13cf1aa56cd732d2-text-xxs\/semibold._13cf1aa56cd732d2-fontScaling {
font-size: 0.625rem;
}
._13cf1aa56cd732d2-text-xxs\/bold {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 700;
line-height: 1.2;
}
._13cf1aa56cd732d2-text-xxs\/bold._13cf1aa56cd732d2-fontScaling {
font-size: 0.625rem;
}
._13cf1aa56cd732d2-text-xs\/normal {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 400;
line-height: 1.3333333333333333;
}
._13cf1aa56cd732d2-text-xs\/normal._13cf1aa56cd732d2-fontScaling {
font-size: 0.75rem;
}
._13cf1aa56cd732d2-text-xs\/medium {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 500;
line-height: 1.3333333333333333;
}
._13cf1aa56cd732d2-text-xs\/medium._13cf1aa56cd732d2-fontScaling {
font-size: 0.75rem;
}
._13cf1aa56cd732d2-text-xs\/semibold {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 600;
line-height: 1.3333333333333333;
}
._13cf1aa56cd732d2-text-xs\/semibold._13cf1aa56cd732d2-fontScaling {
font-size: 0.75rem;
}
._13cf1aa56cd732d2-text-xs\/bold {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 700;
line-height: 1.3333333333333333;
}
._13cf1aa56cd732d2-text-xs\/bold._13cf1aa56cd732d2-fontScaling {
font-size: 0.75rem;
}
._13cf1aa56cd732d2-text-sm\/normal {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 400;
line-height: 1.2857142857142858;
}
._13cf1aa56cd732d2-text-sm\/normal._13cf1aa56cd732d2-fontScaling {
font-size: 0.875rem;
}
._13cf1aa56cd732d2-text-sm\/medium {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 500;
line-height: 1.2857142857142858;
}
._13cf1aa56cd732d2-text-sm\/medium._13cf1aa56cd732d2-fontScaling {
font-size: 0.875rem;
}
._13cf1aa56cd732d2-text-sm\/semibold {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 600;
line-height: 1.2857142857142858;
}
._13cf1aa56cd732d2-text-sm\/semibold._13cf1aa56cd732d2-fontScaling {
font-size: 0.875rem;
}
._13cf1aa56cd732d2-text-sm\/bold {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 700;
line-height: 1.2857142857142858;
}
._13cf1aa56cd732d2-text-sm\/bold._13cf1aa56cd732d2-fontScaling {
font-size: 0.875rem;
}
._13cf1aa56cd732d2-text-md\/normal {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 400;
line-height: 1.25;
}
._13cf1aa56cd732d2-text-md\/normal._13cf1aa56cd732d2-fontScaling {
font-size: 1rem;
}
._13cf1aa56cd732d2-text-md\/medium {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 500;
line-height: 1.25;
}
._13cf1aa56cd732d2-text-md\/medium._13cf1aa56cd732d2-fontScaling {
font-size: 1rem;
}
._13cf1aa56cd732d2-text-md\/semibold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 600;
line-height: 1.25;
}
._13cf1aa56cd732d2-text-md\/semibold._13cf1aa56cd732d2-fontScaling {
font-size: 1rem;
}
._13cf1aa56cd732d2-text-md\/bold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 700;
line-height: 1.25;
}
._13cf1aa56cd732d2-text-md\/bold._13cf1aa56cd732d2-fontScaling {
font-size: 1rem;
}
._13cf1aa56cd732d2-text-lg\/normal {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 400;
line-height: 1.2;
}
._13cf1aa56cd732d2-text-lg\/normal._13cf1aa56cd732d2-fontScaling {
font-size: 1.25rem;
}
._13cf1aa56cd732d2-text-lg\/medium {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 500;
line-height: 1.2;
}
._13cf1aa56cd732d2-text-lg\/medium._13cf1aa56cd732d2-fontScaling {
font-size: 1.25rem;
}
._13cf1aa56cd732d2-text-lg\/semibold {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 600;
line-height: 1.2;
}
._13cf1aa56cd732d2-text-lg\/semibold._13cf1aa56cd732d2-fontScaling {
font-size: 1.25rem;
}
._13cf1aa56cd732d2-text-lg\/bold {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 700;
line-height: 1.2;
}
._13cf1aa56cd732d2-text-lg\/bold._13cf1aa56cd732d2-fontScaling {
font-size: 1.25rem;
}
._13cf1aa56cd732d2-redesign\/message-preview\/normal {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 400;
line-height: 1.3333333333333333;
}
._13cf1aa56cd732d2-redesign\/message-preview\/normal._13cf1aa56cd732d2-fontScaling {
font-size: 0.9375rem;
}
._13cf1aa56cd732d2-redesign\/message-preview\/medium {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 500;
line-height: 1.3333333333333333;
}
._13cf1aa56cd732d2-redesign\/message-preview\/medium._13cf1aa56cd732d2-fontScaling {
font-size: 0.9375rem;
}
._13cf1aa56cd732d2-redesign\/message-preview\/semibold {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 600;
line-height: 1.3333333333333333;
}
._13cf1aa56cd732d2-redesign\/message-preview\/semibold._13cf1aa56cd732d2-fontScaling {
font-size: 0.9375rem;
}
._13cf1aa56cd732d2-redesign\/message-preview\/bold {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 700;
line-height: 1.3333333333333333;
}
._13cf1aa56cd732d2-redesign\/message-preview\/bold._13cf1aa56cd732d2-fontScaling {
font-size: 0.9375rem;
}
._13cf1aa56cd732d2-redesign\/channel-title\/normal {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 400;
line-height: 1.375;
}
._13cf1aa56cd732d2-redesign\/channel-title\/normal._13cf1aa56cd732d2-fontScaling {
font-size: 1rem;
}
._13cf1aa56cd732d2-redesign\/channel-title\/medium {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 500;
line-height: 1.375;
}
._13cf1aa56cd732d2-redesign\/channel-title\/medium._13cf1aa56cd732d2-fontScaling {
font-size: 1rem;
}
._13cf1aa56cd732d2-redesign\/channel-title\/semibold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 600;
line-height: 1.375;
}
._13cf1aa56cd732d2-redesign\/channel-title\/semibold._13cf1aa56cd732d2-fontScaling {
font-size: 1rem;
}
._13cf1aa56cd732d2-redesign\/channel-title\/bold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 700;
line-height: 1.375;
}
._13cf1aa56cd732d2-redesign\/channel-title\/bold._13cf1aa56cd732d2-fontScaling {
font-size: 1rem;
}
._13cf1aa56cd732d2-display-sm {
font-family: var(--font-headline);
font-size: 20px;
font-weight: 800;
line-height: 1;
}
._13cf1aa56cd732d2-display-sm._13cf1aa56cd732d2-fontScaling {
font-size: 1.25rem;
}
._13cf1aa56cd732d2-display-md {
font-family: var(--font-headline);
font-size: 34px;
font-weight: 800;
line-height: 1.0588235294117647;
}
._13cf1aa56cd732d2-display-md._13cf1aa56cd732d2-fontScaling {
font-size: 2.125rem;
}
._13cf1aa56cd732d2-display-lg {
font-family: var(--font-headline);
font-size: 44px;
font-weight: 800;
line-height: 0.9545454545454546;
}
._13cf1aa56cd732d2-display-lg._13cf1aa56cd732d2-fontScaling {
font-size: 2.75rem;
}
._13cf1aa56cd732d2-code {
font-family: var(--font-code);
font-size: 12px;
font-weight: 700;
line-height: 1.3333333333333333;
}
._13cf1aa56cd732d2-code._13cf1aa56cd732d2-fontScaling {
font-size: 0.75rem;
}
._13cf1aa56cd732d2-container {
box-sizing: border-box;
color: var(--channels-default);
flex: 1 1 auto;
text-overflow: ellipsis;
white-space: nowrap;
}
._13cf1aa56cd732d2-header {
}
._13cf1aa56cd732d2-text {
font-family: var(--font-display);
font-size: 12px;
font-weight: var(--font-weight-semibold);
letter-spacing: 0.02em;
line-height: 16px;
text-transform: uppercase;
}
:where(._75742e4cc9019aeb-avatar) {
border-radius: var(--radius-round);
position: absolute;
z-index: var(--custom-user-profile-base-layer-z-index);
}
.user-profile-popout :where(._75742e4cc9019aeb-avatar) {
inset-inline-start: 16px;
top: 61px;
}
.custom-user-profile-theme.user-profile-popout :where(._75742e4cc9019aeb-avatar) {
inset-inline-start: 12px;
top: 57px;
}
.user-profile-modal :where(._75742e4cc9019aeb-avatar) {
inset-inline-start: 24px;
top: -68px;
}
.user-profile-modal-v2 :where(._75742e4cc9019aeb-avatar) {
inset-inline-start: 32px;
top: 80px;
}
.user-profile-sidebar :where(._75742e4cc9019aeb-avatar) {
inset-inline-start: 16px;
top: 72px;
}
:where(._75742e4cc9019aeb-avatar)._75742e4cc9019aeb-withReactReply {
position: static;
}
:where(._75742e4cc9019aeb-avatar)._75742e4cc9019aeb-hoisted {
pointer-events: none;
z-index: var(--custom-user-profile-hoist-z-index);
}
._75742e4cc9019aeb-clickable {
cursor: pointer;
}
._75742e4cc9019aeb-overlay:after {
background-color: var(--black);
border-radius: var(--radius-round);
content: "";
height: 100%;
inset-inline-end: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
}
.full-motion ._75742e4cc9019aeb-overlay:after {
transition: opacity var(--custom-button-transition-duration) ease;
}
._75742e4cc9019aeb-clickable:hover ._75742e4cc9019aeb-overlay:after {
opacity: 0.4;
}
._75742e4cc9019aeb-focusRing {
border-radius: var(--radius-round);
}
:where(._68edb95846a37624-banner) {
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
border-radius: var(--radius-xs) var(--radius-xs) 0 0;
transition: background-color 0.1s;
width: 100%;
}
.user-profile-modal-v2 :where(._68edb95846a37624-banner) {
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
:where(._68edb95846a37624-banner):before {
border-bottom: 1px solid var(--border-muted);
bottom: 0;
content: "";
position: absolute;
width: 100%;
}
:where(._68edb95846a37624-banner):hover ._68edb95846a37624-gifTag {
opacity: 0;
}
._68edb95846a37624-gifTag {
inset-inline-start: 8px;
opacity: 1;
pointer-events: none;
position: absolute;
top: 8px;
z-index: 1;
}
._68edb95846a37624-gifTag .custom-user-profile-theme {
inset-inline-start: 16px;
top: 16px;
}
._68edb95846a37624-mask {
contain: paint;
z-index: 0;
}
.enable-forced-colors ._68edb95846a37624-banner {
forced-color-adjust: none;
}
:root {
--custom-user-profile-banner-height: 0;
--custom-user-profile-theme-padding: 0;
--custom-user-profile-base-layer-z-index: 0;
--custom-user-profile-bottom-layer-z-index: 1;
--custom-user-profile-middle-layer-z-index: 2;
--custom-user-profile-top-layer-z-index: 3;
--custom-user-profile-hoist-z-index: 4;
--custom-user-profile-toast-z-index: 5;
}
:root .user-profile-popout {
--custom-user-profile-banner-height: 105px;
}
:root .user-profile-modal {
--custom-user-profile-banner-height: 210px;
}
:root .user-profile-modal-v2 {
--custom-user-profile-banner-height: 140px;
}
:root .user-profile-sidebar {
--custom-user-profile-banner-height: 120px;
}
:root .custom-user-profile-theme.user-profile-modal,
:root .custom-user-profile-theme.user-profile-popout {
--custom-user-profile-theme-padding: 4px;
}
:root .custom-user-profile-theme.theme-dark {
--control-primary-background-default: var(--profile-gradient-button-color);
--control-primary-background-hover: color-mix(in srgb, var(--profile-gradient-button-color) 90%, var(--black));
--control-primary-background-active: color-mix(in srgb, var(--profile-gradient-button-color) 80%, var(--black));
--control-secondary-background-default: var(--opacity-white-8);
--control-secondary-background-hover: var(--opacity-white-16);
--control-secondary-background-active: var(--opacity-white-12);
}
:root .custom-user-profile-theme.theme-light {
--control-primary-background-default: var(--profile-gradient-button-color);
--control-primary-background-hover: color-mix(in srgb, var(--profile-gradient-button-color) 90%, var(--white));
--control-primary-background-active: color-mix(in srgb, var(--profile-gradient-button-color) 80%, var(--white));
--control-secondary-background-default: var(--opacity-white-72);
--control-secondary-background-hover: var(--opacity-white-92);
--control-secondary-background-active: var(--opacity-white-84);
}
:where(.c0bea05627c5dc35-outer) {
background: var(--background-surface-high);
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
:where(.c0bea05627c5dc35-outer).user-profile-popout {
border-radius: var(--radius-sm);
box-shadow: var(--shadow-border), var(--shadow-high);
max-height: calc(100vh - 20px);
width: 300px;
}
:where(.c0bea05627c5dc35-outer).user-profile-modal {
border-radius: var(--radius-sm);
height: 780px;
width: 600px;
}
:where(.c0bea05627c5dc35-outer).user-profile-modal-v2 {
background: var(--background-base-lower);
border-radius: var(--radius-lg);
box-sizing: border-box;
height: 800px;
max-width: 100%;
min-height: 500px;
outline: 1px solid var(--border-normal);
outline-offset: -1px;
width: 960px;
}
@media (max-height: 900px) {
:where(.c0bea05627c5dc35-outer).user-profile-modal-v2 {
height: calc(100vh - var(--space-24) * 2);
}
}
:where(.c0bea05627c5dc35-outer).user-profile-sidebar {
height: 100%;
overflow: initial;
width: 340px;
}
:where(.c0bea05627c5dc35-outer).custom-user-profile-theme {
background: linear-gradient(var(--profile-gradient-primary-color), var(--profile-gradient-secondary-color));
padding: var(--custom-user-profile-theme-padding);
}
:where(.c0bea05627c5dc35-outer).custom-user-profile-theme.user-profile-modal-v2 {
background: linear-gradient(var(--profile-gradient-modal-background-color), var(--profile-gradient-modal-background-color));
}
.c0bea05627c5dc35-inner {
border-radius: var(--radius-xs);
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: hidden;
}
.user-profile-popout .c0bea05627c5dc35-inner {
gap: 8px;
padding-bottom: 4px;
}
.user-profile-modal .c0bea05627c5dc35-inner {
height: 100%;
}
.user-profile-modal .c0bea05627c5dc35-inner:before {
border-radius: var(--radius-xs);
height: calc(100% - 8px);
width: calc(100% - 8px);
}
.user-profile-modal-v2 .c0bea05627c5dc35-inner {
border-radius: 0;
flex-direction: row;
gap: 0;
height: 100%;
padding-block: 48px 0;
padding-inline: 48px 32px;
}
@media (max-width: 960px) {
.user-profile-modal-v2 .c0bea05627c5dc35-inner {
padding-block: 48px 0;
padding-inline: 16px 4px;
}
}
.user-profile-sidebar .c0bea05627c5dc35-inner {
border-radius: 0;
height: 100%;
}
.user-profile-sidebar .c0bea05627c5dc35-inner:before {
height: 100%;
width: 100%;
}
.custom-user-profile-theme .c0bea05627c5dc35-inner {
--profile-gradient-start: color-mix(in oklab, var(--profile-gradient-overlay-color) 100%, var(--profile-gradient-primary-color));
--profile-gradient-end: color-mix(in oklab, var(--profile-gradient-overlay-color) 100%, var(--profile-gradient-secondary-color));
background: linear-gradient(var(--profile-gradient-start), var(--profile-gradient-start) var(--custom-user-profile-banner-height), var(--profile-gradient-end));
}
.custom-user-profile-theme.user-profile-modal-v2 .c0bea05627c5dc35-inner {
background: linear-gradient(
color-mix(in oklab, var(--profile-gradient-overlay-color) 80%, var(--profile-gradient-modal-background-color)),
color-mix(in oklab, var(--profile-gradient-overlay-color) 20%, var(--profile-gradient-modal-background-color)) 300px
);
}
:where(.c0bea05627c5dc35-overlay) {
background: var(--user-profile-overlay-background);
border-radius: var(--radius-sm);
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
.theme-light :where(.c0bea05627c5dc35-overlay),
:where(.c0bea05627c5dc35-overlay) .theme-dark {
border: 1px solid var(--border-muted);
}
:where(.c0bea05627c5dc35-overlay) ::-webkit-scrollbar-thumb {
background-color: var(--user-profile-border);
}
.no-webkit-scrollbar :where(.c0bea05627c5dc35-overlay) * {
scrollbar-color: var(--user-profile-border) var(--scrollbar-thin-track);
}
.enable-forced-colors .user-profile-modal .c0bea05627c5dc35-inner,
.enable-forced-colors .user-profile-modal.c0bea05627c5dc35-outer,
.enable-forced-colors .user-profile-popout .c0bea05627c5dc35-inner,
.enable-forced-colors .user-profile-popout.c0bea05627c5dc35-outer {
border: 2px solid CanvasText;
}
.enable-forced-colors .c0bea05627c5dc35-outer,
.enable-forced-colors .c0bea05627c5dc35-outer:before,
.enable-forced-colors .c0bea05627c5dc35-overlay {
background-color: Canvas;
}
._19fd16f9b3ed863d-row {
align-items: center;
border-bottom: 1px solid var(--border-subtle);
border-color: var(--border-muted);
display: flex;
gap: var(--space-16);
justify-content: space-between;
margin: 0 var(--space-16);
padding: var(--space-16) 0;
position: relative;
}
.user-profile-modal-v2 ._19fd16f9b3ed863d-row {
border: none;
}
.user-profile-modal-v2 ._19fd16f9b3ed863d-row:not(:last-child) {
margin-bottom: 1px;
}
.user-profile-modal-v2 ._19fd16f9b3ed863d-row:not(:last-child):after {
background-color: var(--border-subtle);
bottom: 0;
content: "";
height: 1px;
inset-inline: calc(var(--space-16) + var(--space-24)) calc(var(--space-16) * -1);
position: absolute;
}
._19fd16f9b3ed863d-clickable,
._19fd16f9b3ed863d-row:last-child {
border-bottom: none;
}
._19fd16f9b3ed863d-clickable {
background-color: var(--background-mod-subtle);
border-radius: var(--radius-sm);
cursor: pointer;
margin: 0;
padding: var(--space-16);
}
._19fd16f9b3ed863d-clickable._19fd16f9b3ed863d-disabled {
opacity: 0.5;
pointer-events: none;
}
._19fd16f9b3ed863d-clickable:hover {
background-color: var(--background-mod-strong);
}
._19fd16f9b3ed863d-noInset {
margin: 0;
padding: 0;
}
._19fd16f9b3ed863d-iconContainer {
display: flex;
justify-content: center;
}
._19fd16f9b3ed863d-icon,
._19fd16f9b3ed863d-iconContainer {
height: var(--space-24);
width: var(--space-24);
}
._19fd16f9b3ed863d-icon {
color: var(--icon-subtle);
}
._19fd16f9b3ed863d-textContainer {
display: flex;
flex-direction: column;
gap: 2px;
}
._19fd16f9b3ed863d-button {
min-width: 75px;
-webkit-margin-start: auto;
flex-shrink: 0;
margin-inline-start: auto;
padding: var(--space-8) var(--space-12);
}
._19fd16f9b3ed863d-number {
align-items: center;
background-color: var(--background-mod-subtle);
border-radius: var(--radius-round);
height: 32px;
justify-content: center;
min-width: 32px;
}
._19fd16f9b3ed863d-number,
._19fd16f9b3ed863d-tableRowGroup {
display: flex;
flex-direction: column;
}
._19fd16f9b3ed863d-tableRowGroup {
flex-shrink: 0;
gap: var(--space-8);
}
._19fd16f9b3ed863d-tableRowGroup ._19fd16f9b3ed863d-content {
background-color: var(--background-base-lower);
border-radius: var(--radius-sm);
flex-grow: 1;
flex-shrink: 0;
overflow: hidden;
padding: 0;
}
._19fd16f9b3ed863d-content {
border: 1px solid var(--border-muted);
}
._19fd16f9b3ed863d-buttonContainer {
align-items: center;
display: flex;
flex-direction: row;
gap: var(--space-4);
}
._19fd16f9b3ed863d-buttonIcon {
height: 16px;
width: 16px;
}
._202d80cea47aca3c-label {
align-items: center;
display: flex;
gap: var(--space-4);
}
.fb7f9476ada049c8-bannerButton {
align-items: center;
background: var(--redesign-button-overlay-alpha-background);
border: 1px solid var(--opacity-white-8);
border-radius: 50%;
box-sizing: border-box;
color: var(--white);
cursor: pointer;
display: flex;
height: var(--custom-button-button-sm-height);
justify-content: center;
transition: background 50ms ease-in;
width: var(--custom-button-button-sm-height);
}
.fb7f9476ada049c8-bannerButton:active,
.fb7f9476ada049c8-bannerButton:hover {
background: var(--redesign-button-overlay-alpha-pressed-background);
transition: background 0.15s ease-out;
}
.fb7f9476ada049c8-bannerButton.fb7f9476ada049c8-disabled {
cursor: normal;
opacity: 0.5;
}
.da589062f0c96515-wrapper {
display: flex;
gap: 8px;
position: absolute;
transition: opacity 0.6s ease;
z-index: var(--custom-user-profile-top-layer-z-index);
}
.da589062f0c96515-wrapper:empty {
display: none;
}
.user-profile-popout .da589062f0c96515-wrapper {
inset-inline-end: 12px;
top: 12px;
}
.user-profile-modal .da589062f0c96515-wrapper {
inset-inline-end: 16px;
top: 12px;
}
.user-profile-sidebar .da589062f0c96515-wrapper {
inset-inline-end: 8px;
top: 8px;
}
.f7ecaca5c80dbf3a-wrapper {
align-items: center;
background-color: var(--background-surface-highest);
border-radius: 4px;
box-shadow: var(--shadow-border), var(--shadow-low);
box-sizing: border-box;
display: grid;
grid-auto-flow: column;
height: 32px;
justify-content: flex-start;
overflow: hidden;
position: relative;
transition: box-shadow 0.1s ease-out;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.full-motion .f7ecaca5c80dbf3a-wrapper:hover {
box-shadow: var(--shadow-border), var(--shadow-medium);
}
.f7ecaca5c80dbf3a-button {
align-items: center;
color: var(--interactive-text-default);
cursor: pointer;
display: flex;
flex: 0 0 auto;
height: 24px;
justify-content: center;
min-width: 24px;
padding: 4px;
position: relative;
}
.f7ecaca5c80dbf3a-button:hover {
background-color: var(--interactive-background-hover);
color: var(--interactive-text-hover);
}
.f7ecaca5c80dbf3a-button:active {
background-color: var(--interactive-background-active);
padding-bottom: 3px;
padding-top: 5px;
}
.f7ecaca5c80dbf3a-button.f7ecaca5c80dbf3a-selected,
.f7ecaca5c80dbf3a-button:active {
color: var(--interactive-text-active);
}
.f7ecaca5c80dbf3a-button.f7ecaca5c80dbf3a-selected {
background-color: var(--interactive-background-selected);
}
.f7ecaca5c80dbf3a-separator {
background-color: var(--border-subtle);
flex: 0 0 auto;
height: 100%;
margin: 0 4px;
width: 1px;
}
.f7ecaca5c80dbf3a-button.f7ecaca5c80dbf3a-disabled,
.f7ecaca5c80dbf3a-button.f7ecaca5c80dbf3a-disabled:active,
.f7ecaca5c80dbf3a-button.f7ecaca5c80dbf3a-disabled:hover {
background-color: transparent;
color: var(--interactive-text-default);
cursor: default;
opacity: 0.5;
padding: 4px;
}
.f7ecaca5c80dbf3a-button.f7ecaca5c80dbf3a-dangerous {
color: var(--status-danger);
}
.f7ecaca5c80dbf3a-button.f7ecaca5c80dbf3a-dangerous:hover {
color: var(--red-400);
}
.enable-forced-colors .f7ecaca5c80dbf3a-wrapper {
border: 1px solid CanvasText;
height: 36px;
}
.enable-forced-colors .f7ecaca5c80dbf3a-button {
background-color: ButtonFace;
border: 1px solid ButtonFace;
color: ButtonText;
height: 26px;
min-width: 26px;
}
.enable-forced-colors .f7ecaca5c80dbf3a-button.f7ecaca5c80dbf3a-selected,
.enable-forced-colors .f7ecaca5c80dbf3a-button:active,
.enable-forced-colors .f7ecaca5c80dbf3a-button:hover {
background-color: HighlightText;
border-color: Highlight;
color: Highlight;
}
._2d0abf0638bcaa3f-popover {
background-color: var(--user-profile-toolbar-background);
border: 1px solid var(--user-profile-toolbar-border);
border-radius: 100px;
box-shadow: var(--shadow-low);
display: inline-flex;
gap: 2px;
height: unset;
opacity: 0;
padding: 2px;
pointer-events: none;
position: absolute;
top: -16px;
z-index: var(--custom-user-profile-hoist-z-index);
}
.custom-user-profile-theme.theme-dark ._2d0abf0638bcaa3f-popover {
-webkit-backdrop-filter: blur(36px);
backdrop-filter: blur(36px);
}
.custom-user-profile-theme.theme-light ._2d0abf0638bcaa3f-popover {
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px);
}
._2d0abf0638bcaa3f-popover._2d0abf0638bcaa3f-visible,
._2d0abf0638bcaa3f-popover:hover {
opacity: 1;
}
.keyboard-mode ._2d0abf0638bcaa3f-popover:focus-within {
opacity: 1;
}
.reduce-motion ._2d0abf0638bcaa3f-popover {
pointer-events: all;
}
._2d0abf0638bcaa3f-popover > ._2d0abf0638bcaa3f-tooltipContainer:first-of-type > ._2d0abf0638bcaa3f-button {
-webkit-padding-start: 6px;
border-radius: 100px 6px 6px 100px;
padding-inline-start: 6px;
-webkit-margin-start: 0;
margin-inline-start: 0;
}
._2d0abf0638bcaa3f-popover > ._2d0abf0638bcaa3f-tooltipContainer:last-of-type > ._2d0abf0638bcaa3f-button {
-webkit-padding-end: 6px;
border-radius: 6px 100px 100px 6px;
padding-inline-end: 6px;
-webkit-margin-end: 0;
margin-inline-end: 0;
}
._2d0abf0638bcaa3f-tooltipContainer:empty {
display: none;
}
._2d0abf0638bcaa3f-activityPopover {
background-color: var(--user-profile-activity-toolbar-background);
inset-inline-end: 8px;
}
.custom-user-profile-theme ._2d0abf0638bcaa3f-activityPopover {
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
}
._2d0abf0638bcaa3f-statusPopover {
inset-inline-end: min(8px, calc(50% - 29px));
}
._2d0abf0638bcaa3f-avatarPopover {
inset-inline: 0;
margin: auto;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
:not(.keyboard-mode).full-motion ._2d0abf0638bcaa3f-popover._2d0abf0638bcaa3f-visible,
:not(.keyboard-mode).full-motion ._2d0abf0638bcaa3f-popover:hover {
animation: _2d0abf0638bcaa3f-fadeIn 0.15s ease forwards;
opacity: 0;
}
:not(.keyboard-mode).full-motion ._2d0abf0638bcaa3f-popover._2d0abf0638bcaa3f-visible._2d0abf0638bcaa3f-expandable,
:not(.keyboard-mode).full-motion ._2d0abf0638bcaa3f-popover:hover._2d0abf0638bcaa3f-expandable {
animation-delay: 0.45s;
}
@keyframes _2d0abf0638bcaa3f-fadeIn {
0% {
opacity: 0;
pointer-events: none;
top: -14px;
}
99% {
pointer-events: none;
}
to {
opacity: 1;
pointer-events: all;
top: -16px;
}
}
._2d0abf0638bcaa3f-button {
height: unset;
min-width: unset;
padding: 4px;
}
.full-motion ._2d0abf0638bcaa3f-button ._2d0abf0638bcaa3f-icon {
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.custom-user-profile-theme ._2d0abf0638bcaa3f-button ._2d0abf0638bcaa3f-icon {
color: var(--icon-strong);
}
._2d0abf0638bcaa3f-button:hover {
background: var(--background-mod-normal);
}
._2d0abf0638bcaa3f-button:hover ._2d0abf0638bcaa3f-icon {
fill: var(--interactive-text-hover);
transform: scale(1.1);
}
._2d0abf0638bcaa3f-button:active {
background: var(--background-mod-strong);
}
._2d0abf0638bcaa3f-button:active ._2d0abf0638bcaa3f-icon {
fill: var(--interactive-text-active);
transform: scale(1);
}
._52c9db19a26ac50b-container {
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
z-index: 101;
}
._52c9db19a26ac50b-background {
background-color: var(--background-base-lower);
opacity: 0.98;
position: absolute;
}
._52c9db19a26ac50b-background,
._52c9db19a26ac50b-content {
height: 100%;
width: 100%;
}
._52c9db19a26ac50b-content {
align-items: center;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
padding: 16px;
position: relative;
}
._52c9db19a26ac50b-closeButton {
cursor: pointer;
inset-inline-end: 20px;
position: absolute;
top: 20px;
}
._52c9db19a26ac50b-closeButtonIcon {
color: var(--interactive-text-default);
}
._52c9db19a26ac50b-description,
._52c9db19a26ac50b-header {
text-align: center;
}
._52c9db19a26ac50b-upsellImage {
width: 124px;
}
._3782a6ea22bc857f-container {
align-items: center;
background-color: var(--background-base-low);
border-radius: var(--radius-sm);
bottom: 0;
display: flex;
flex-direction: column;
position: absolute;
z-index: 1001;
}
._3782a6ea22bc857f-container,
._3782a6ea22bc857f-content {
box-sizing: border-box;
width: 100%;
}
._3782a6ea22bc857f-content {
padding: var(--space-32) var(--space-32) var(--space-12);
}
._3782a6ea22bc857f-closeButton {
color: var(--interactive-text-active);
inset-inline-end: 0;
margin: var(--space-16);
position: absolute;
top: 0;
}
._3782a6ea22bc857f-contentContainer {
align-items: center;
display: flex;
flex-direction: column;
flex-grow: 2;
text-align: center;
}
._3782a6ea22bc857f-image {
width: 250px;
}
._3782a6ea22bc857f-title {
margin-bottom: var(--space-16);
margin-top: var(--space-32);
max-width: 250px;
}
._3782a6ea22bc857f-title._3782a6ea22bc857f-withBadge {
margin-top: var(--space-16);
}
._3782a6ea22bc857f-body {
max-width: 380px;
}
._3782a6ea22bc857f-footer {
background-color: var(--background-base-low);
border-end-end-radius: inherit;
border-end-start-radius: inherit;
box-sizing: border-box;
margin-top: auto;
padding-bottom: var(--space-32);
padding-top: var(--space-8);
width: 100%;
}
._3782a6ea22bc857f-buttonContainer {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
justify-content: space-between;
margin: 0 auto;
padding: 0 var(--space-32);
}
.d829e78297641841-noParentContainer {
bottom: 0;
inset-inline-start: 0;
top: 0;
}
.d829e78297641841-hasParentContainer {
bottom: 0;
inset-inline-start: 0;
top: -16px;
}
.d829e78297641841-hasTabParentContainer {
bottom: 0;
inset-inline-start: 0;
top: -62px;
}
.d829e78297641841-container {
align-items: center;
background-color: var(--background-base-lower);
border-radius: var(--radius-sm);
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
position: absolute;
z-index: 1001;
}
.d829e78297641841-closeButton {
color: var(--interactive-text-active);
inset-inline-end: 0;
margin: 16px;
position: absolute;
top: 0;
}
.d829e78297641841-contentContainer {
align-items: center;
display: flex;
flex-direction: column;
flex-grow: 2;
justify-content: center;
}
.d829e78297641841-image {
margin: 0 0 32px;
}
.d829e78297641841-title {
padding: 0 32px;
}
.d829e78297641841-titleNoSocialProof {
margin-bottom: 24px;
}
.d829e78297641841-body {
padding: 0 32px;
text-align: center;
}
.d829e78297641841-ctaContainer {
align-items: center;
background: var(--background-base-lowest);
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
bottom: 0;
box-sizing: border-box;
display: flex;
inset-inline-start: 0;
justify-content: space-between;
padding: 16px;
width: 100%;
}
.d829e78297641841-secondaryCTA {
-webkit-margin-end: 8px;
color: var(--premium-nitro-pink-text);
margin-inline-end: 8px;
}
.d829e78297641841-secondaryCTA:hover {
text-decoration: underline;
}
.d829e78297641841-container,
.d829e78297641841-ctaContainer {
background-color: var(--modal-background);
}
._97f37b35f073229d-banner {
border-radius: 8px;
max-width: 304px;
width: 100%;
}
._97f37b35f073229d-banner._97f37b35f073229d-hasTrialOffer {
margin-bottom: 16px;
margin-top: 16px;
max-height: 172px;
}
._97f37b35f073229d-wrapper {
align-items: center;
background-color: var(--modal-background);
border-radius: 8px;
display: flex;
height: 100%;
inset-inline-start: 0;
justify-content: center;
position: absolute;
top: 0;
width: 100%;
z-index: 101;
}
._97f37b35f073229d-closeButton {
color: var(--interactive-text-default);
cursor: pointer;
inset-inline-end: 16px;
position: absolute;
top: 16px;
}
._97f37b35f073229d-contentFill {
background: var(--gradients-nitro-classic-diagonal, linear-gradient(45deg, var(--premium-tier-1-blue) 0, var(--premium-tier-1-purple) 75.25%));
border-radius: 8px;
margin-top: 24px;
padding: 36px 84px;
}
._97f37b35f073229d-nitroWheel {
color: var(--premium-tier-1-purple);
-webkit-padding-end: 4px;
padding-inline-end: 4px;
}
._97f37b35f073229d-content {
box-sizing: border-box;
color: var(--text-default);
flex-direction: column;
text-align: center;
}
._97f37b35f073229d-content,
._97f37b35f073229d-header {
align-items: center;
display: flex;
}
._97f37b35f073229d-header {
justify-content: center;
margin: 16px 0 8px;
}
._97f37b35f073229d-headerText {
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
._97f37b35f073229d-subheaderText {
color: var(--text-default);
max-width: 350px;
padding: 0 32px;
white-space: pre-line;
}
._97f37b35f073229d-subheaderText a {
color: var(--text-default);
text-decoration: underline;
}
._97f37b35f073229d-ctaActionWrapper {
align-items: center;
box-sizing: border-box;
display: flex;
justify-content: center;
margin-top: 24px;
padding: 0 48px;
width: 100%;
}
.affa7e120767dd82-listWrapper {
overflow-x: hidden;
overflow-y: scroll;
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
}
.affa7e120767dd82-listHeight {
visibility: hidden;
}
.affa7e120767dd82-listItems {
contain: layout;
position: absolute;
}
.affa7e120767dd82-scroller {
height: 100%;
}
._4e6cebf8beed1ad8-wrapper {
background-color: var(--background-base-lower);
border-radius: 0 0 0 8px;
display: grid;
grid-template-rows: 1fr auto;
inset-inline: 0;
bottom: 0;
overflow: hidden;
position: absolute;
width: 48px;
}
.high-contrast-mode ._4e6cebf8beed1ad8-wrapper {
box-sizing: border-box;
-webkit-border-end: 1px solid var(--border-subtle);
border-inline-end: 1px solid var(--border-subtle);
}
.enable-forced-colors ._4e6cebf8beed1ad8-wrapper {
-webkit-border-end: 1px solid CanvasText;
border-inline-end: 1px solid CanvasText;
}
._0fa6dbf59d1126b0-guildIcon {
align-items: center;
background-color: var(--background-base-low);
color: var(--text-default);
display: flex;
height: 100%;
justify-content: center;
width: 100%;
}
._0fa6dbf59d1126b0-mask {
display: block;
}
._0fa6dbf59d1126b0-guildAcronym {
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
}
._0fa6dbf59d1126b0-categoryItemLockIconContainer,
._0fa6dbf59d1126b0-guildIconWithoutImage {
background-color: var(--background-base-low);
}
._0fa6dbf59d1126b0-categoryItemLockIconContainer {
border: 1px solid var(--background-base-lowest);
border-radius: 50%;
height: 16px;
inset-block: auto -1px;
inset-inline: auto -1px;
position: absolute;
width: 16px;
}
._0fa6dbf59d1126b0-categoryItemLockIcon {
color: var(--icon-strong);
inset: 0;
margin: auto;
position: absolute;
}
.b9ee0c229bc0b6bb-categoryItem {
cursor: pointer;
}
.b9ee0c229bc0b6bb-categoryItemGuildCategory,
.b9ee0c229bc0b6bb-categoryItemPackCategory {
height: var(--custom-emoji-picker-constants-guild-category-icon-size);
margin-bottom: var(--custom-emoji-picker-constants-guild-category-icon-margin-verical);
position: relative;
width: var(--custom-emoji-picker-constants-guild-category-icon-size);
}
.b9ee0c229bc0b6bb-categoryItemGuildCategory,
.b9ee0c229bc0b6bb-categoryItemPackCategory {
}
.b9ee0c229bc0b6bb-categoryItemDefaultCategory {
border-radius: 4px;
height: var(--custom-emoji-picker-constants-unicode-category-icon-size);
margin-bottom: var(--custom-emoji-picker-constants-unicode-category-icon-margin-vertical);
padding: var(--custom-emoji-picker-constants-unicode-category-icon-padding);
transition: background-color 0.1s ease-in-out;
width: var(--custom-emoji-picker-constants-unicode-category-icon-size);
}
.b9ee0c229bc0b6bb-categoryItemDefaultCategory:hover {
background-color: var(--interactive-background-hover);
}
.b9ee0c229bc0b6bb-categoryItemDefaultCategory:hover .b9ee0c229bc0b6bb-categoryIcon {
color: var(--interactive-text-hover);
}
.b9ee0c229bc0b6bb-categoryItemRecentEmoji {
margin-bottom: var(--custom-emoji-picker-constants-guild-category-icon-margin-verical);
}
.b9ee0c229bc0b6bb-categoryItemDefaultCategorySelected,
.b9ee0c229bc0b6bb-categoryItemDefaultCategorySelected:hover {
background-color: var(--background-base-low);
}
.b9ee0c229bc0b6bb-categoryItemDefaultCategorySelected .b9ee0c229bc0b6bb-categoryIcon,
.b9ee0c229bc0b6bb-categoryItemDefaultCategorySelected:hover .b9ee0c229bc0b6bb-categoryIcon {
color: var(--interactive-text-active);
}
.b9ee0c229bc0b6bb-categoryIcon {
color: var(--interactive-text-default);
}
.b9ee0c229bc0b6bb-guildCategorySeparator {
border: none;
border-bottom: var(--custom-emoji-picker-constants-category-separator-size) solid var(--border-subtle);
margin: var(--custom-emoji-picker-constants-category-separator-margin-vertical) 0;
}
.theme-light .b9ee0c229bc0b6bb-categoryItemDefaultCategorySelected .b9ee0c229bc0b6bb-categoryIcon,
.theme-light .b9ee0c229bc0b6bb-categoryItemDefaultCategorySelected:hover .b9ee0c229bc0b6bb-categoryIcon {
color: var(--interactive-text-active);
}
.b9ee0c229bc0b6bb-unicodeShortcut {
align-items: center;
background: inherit;
border-top: 1px solid var(--border-normal);
bottom: 0;
box-sizing: border-box;
color: var(--interactive-text-default);
cursor: pointer;
display: flex;
height: var(--custom-emoji-picker-constants-unicode-category-shortcut-height);
inset-inline-start: 0;
justify-content: center;
opacity: 1;
position: absolute;
width: 100%;
}
.full-motion .b9ee0c229bc0b6bb-unicodeShortcut {
transition:
opacity 0.1s,
transform 0.1s;
}
.b9ee0c229bc0b6bb-unicodeShortcut:hover {
color: var(--interactive-text-hover);
}
.b9ee0c229bc0b6bb-unicodeShortcutInvisible {
opacity: 0;
transform: translateY(var(--custom-emoji-picker-constants-unicode-category-shortcut-height));
}
.b9ee0c229bc0b6bb-hideUnicodeShortcut {
display: none;
}
.enable-forced-colors .b9ee0c229bc0b6bb-unicodeShortcut {
background-color: ButtonFace;
border-top: 1px solid CanvasText;
color: ButtonText;
height: calc(var(--custom-emoji-picker-constants-unicode-category-shortcut-height) - 1px);
}
.enable-forced-colors .b9ee0c229bc0b6bb-categoryItemDefaultCategory,
.enable-forced-colors .b9ee0c229bc0b6bb-categoryItemGuildCategory {
border: 1px solid Canvas;
border-radius: 4px;
transition: none;
}
.enable-forced-colors .b9ee0c229bc0b6bb-categoryItemDefaultCategory .b9ee0c229bc0b6bb-categoryIcon,
.enable-forced-colors .b9ee0c229bc0b6bb-categoryItemGuildCategory .b9ee0c229bc0b6bb-categoryIcon {
color: ButtonText;
}
.enable-forced-colors .b9ee0c229bc0b6bb-categoryItemDefaultCategory:hover,
.enable-forced-colors .b9ee0c229bc0b6bb-categoryItemGuildCategory:hover {
background: ButtonFace;
border-color: ButtonText;
}
.enable-forced-colors .b9ee0c229bc0b6bb-categoryItemDefaultCategorySelected,
.enable-forced-colors .b9ee0c229bc0b6bb-categoryItemDefaultCategorySelected:hover {
background-color: HighlightText;
border-color: Highlight;
}
.enable-forced-colors .b9ee0c229bc0b6bb-categoryItemDefaultCategorySelected .b9ee0c229bc0b6bb-categoryIcon,
.enable-forced-colors .b9ee0c229bc0b6bb-categoryItemDefaultCategorySelected:hover .b9ee0c229bc0b6bb-categoryIcon {
color: Highlight;
}
.b9ee0c229bc0b6bb-guildEmojiSectionItems {
position: relative;
}
.b9ee0c229bc0b6bb-guildEmojiSectionHighlighted:before {
content: "";
position: absolute;
top: -4px;
inset-inline: -8px;
bottom: 0;
}
.theme-dark .b9ee0c229bc0b6bb-guildEmojiSectionHighlighted:before {
background: linear-gradient(90deg, #503572, #673471 50%, #623e55);
}
.theme-light .b9ee0c229bc0b6bb-guildEmojiSectionHighlighted:before {
background: linear-gradient(90deg, #d7c6ec, #e7c5ea 50%, #e3ccd9);
}
.ac2cfbdb62752a53-wrapper {
background-color: var(--background-base-lowest);
border-radius: 4px;
color: var(--text-default);
display: flex;
font-size: 12px;
font-weight: var(--font-weight-medium);
margin: 8px 8px 0;
padding: 10px 8px 8px;
}
.ac2cfbdb62752a53-icon {
color: var(--status-danger);
height: 16px;
min-width: var(--custom-emoji-picker-constants-emoji-size);
}
.ac2cfbdb62752a53-close {
color: var(--interactive-text-default);
cursor: pointer;
height: 14px;
width: 14px;
}
.ac2cfbdb62752a53-close:hover {
color: var(--interactive-text-hover);
}
.ac2cfbdb62752a53-content {
flex: 1 1 auto;
}
@value iconSize 20px;
._0d242e583d6053f6-visuallyHidden {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
._0d242e583d6053f6-tooltip {
max-width: 275px;
}
._0d242e583d6053f6-tooltipContainer {
justify-content: center;
}
._0d242e583d6053f6-tooltipContainer,
._0d242e583d6053f6-tooltipHeadingContainer {
align-items: center;
display: flex;
}
._0d242e583d6053f6-nitroWheel {
-webkit-padding-end: 4px;
padding-inline-end: 4px;
}
input[type="checkbox"]:focus-visible + ._0d242e583d6053f6-label {
box-shadow: 0 0 8px var(--brand-500);
}
._0d242e583d6053f6-label {
background: var(--background-base-lowest);
border-radius: var(--radius-lg);
color: var(--text-default);
cursor: pointer;
display: flex;
height: 20px;
overflow: hidden;
padding: 6px;
position: relative;
transition: background 0.25s ease-out;
width: 20px;
}
._0d242e583d6053f6-labelChecked {
background: var(--brand-500);
box-shadow: unset;
}
._0d242e583d6053f6-icon {
opacity: 1;
position: absolute;
transition: opacity 0.3s;
}
._679540c5b99d9992-emojiErrorItem {
align-items: center;
background-color: var(--background-base-lower);
border-radius: var(--radius-xs);
display: flex;
justify-content: center;
padding: 16px;
}
._679540c5b99d9992-fileIcon {
-webkit-margin-end: 18px;
margin-inline-end: 18px;
}
._679540c5b99d9992-fileName {
color: var(--text-default);
font-size: 16px;
margin-bottom: 4px;
max-width: 256px;
overflow: hidden;
text-overflow: ellipsis;
text-transform: lowercase;
white-space: nowrap;
}
._679540c5b99d9992-fileInfo {
flex: 1;
}
._4623111db66ad380-fileInput {
display: none;
}
.a45a2a5d0f4caddc-diversitySelector {
position: relative;
}
.a45a2a5d0f4caddc-diversitySelectorButton {
cursor: pointer;
height: var(--custom-emoji-picker-constants-diversity-emoji-size);
width: var(--custom-emoji-picker-constants-diversity-emoji-size);
}
.a45a2a5d0f4caddc-diversitySelectorOptions {
background-color: var(--background-secondary-alt);
border: 1px solid var(--background-base-lowest);
border-radius: 4px;
display: flex;
flex-direction: column;
inset-inline-end: -5px;
position: absolute;
top: -5px;
}
.a45a2a5d0f4caddc-diversityEmojiItem {
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
cursor: pointer;
height: var(--custom-emoji-picker-constants-diversity-emoji-size);
padding: var(--custom-emoji-picker-constants-emoji-container-padding-vertical) var(--custom-emoji-picker-constants-emoji-container-padding-horizontal);
transition: background-color 0.1s ease-in-out;
width: var(--custom-emoji-picker-constants-diversity-emoji-size);
}
.a45a2a5d0f4caddc-diversityEmojiItem:hover {
background-color: var(--interactive-background-hover);
}
.a45a2a5d0f4caddc-diversityEmojiItemImage {
height: var(--custom-emoji-picker-constants-diversity-emoji-size);
width: var(--custom-emoji-picker-constants-diversity-emoji-size);
}
.enable-forced-colors .a45a2a5d0f4caddc-diversitySelectorButton {
background-color: HighlightText;
border: 1px solid Highlight;
border-radius: 4px;
padding: 2px;
}
.enable-forced-colors .a45a2a5d0f4caddc-diversityEmojiItem {
background-color: ButtonFace;
border: 1px solid ButtonFace;
border-radius: 4px;
}
.enable-forced-colors .a45a2a5d0f4caddc-diversityEmojiItem:hover {
border-color: ButtonText;
}
.c0e32c5cffed3d9f-wrapper {
position: relative;
transition: box-shadow 0.2s ease-out;
}
.c0e32c5cffed3d9f-wrapper,
.c0e32c5cffed3d9f-wrapper.c0e32c5cffed3d9f-isBurstReactionPicker {
border-radius: var(--custom-emoji-picker-border-radius);
}
.c0e32c5cffed3d9f-wrapper.c0e32c5cffed3d9f-isBurstReactionPicker {
box-shadow: 0 0 0 2px var(--background-brand);
}
.c0e32c5cffed3d9f-wrapper.c0e32c5cffed3d9f-isBurstReactionPicker:before {
box-shadow: 0 0 100px var(--background-brand);
content: "";
height: 100%;
opacity: 0.5;
pointer-events: none;
position: absolute;
width: 100%;
}
.high-contrast-mode .c0e32c5cffed3d9f-wrapper:not(.c0e32c5cffed3d9f-emojiPickerHasTabWrapper) {
border: 1px solid var(--border-normal);
contain: content;
}
.c0e32c5cffed3d9f-emojiPicker {
background-color: var(--background-surface-high);
border-end-end-radius: var(--custom-emoji-picker-border-radius);
border-end-start-radius: var(--custom-emoji-picker-border-radius);
box-shadow: var(--shadow-border), var(--shadow-high);
display: grid;
grid-template-columns: 48px auto;
grid-template-rows: auto 1fr auto;
height: var(--custom-emoji-picker-constants-emoji-picker-height);
overflow: hidden;
width: var(--custom-emoji-picker-constants-min-emoji-picker-width);
}
.c0e32c5cffed3d9f-emojiPickerHasTabWrapper .c0e32c5cffed3d9f-emojiPicker {
background-color: transparent;
border-end-end-radius: 0;
border-end-start-radius: 0;
box-shadow: none;
flex: 1 1 auto;
grid-template-rows: auto 1fr auto;
height: 100%;
width: auto;
}
.c0e32c5cffed3d9f-header {
align-items: center;
background-color: var(--background-surface-high);
border-bottom: 1px solid var(--border-subtle);
border-start-end-radius: var(--custom-emoji-picker-border-radius);
border-start-start-radius: var(--custom-emoji-picker-border-radius);
box-shadow: none;
display: flex;
gap: var(--space-12);
grid-column: 1/3;
margin: 0 -1px;
padding: var(--custom-gif-picker-gutter-size);
padding-top: var(--space-16);
position: relative;
z-index: 100;
}
.c0e32c5cffed3d9f-emojiPickerHasTabWrapper .c0e32c5cffed3d9f-header {
background-color: transparent;
border-end-end-radius: 0;
border-end-start-radius: 0;
margin: 0;
padding: 0 16px 16px;
}
.c0e32c5cffed3d9f-isBurstReactionPicker .c0e32c5cffed3d9f-header {
margin: 0;
}
.c0e32c5cffed3d9f-emojiPickerHasTabWrapper .c0e32c5cffed3d9f-header {
padding: var(--custom-gif-picker-gutter-size);
}
.c0e32c5cffed3d9f-diversitySelector {
grid-column: 2/3;
}
.c0e32c5cffed3d9f-categoryList {
border-end-start-radius: var(--custom-emoji-picker-border-radius);
bottom: 0;
inset-inline-start: 0;
overflow: hidden;
position: absolute;
top: 69px;
width: 48px;
}
.c0e32c5cffed3d9f-emojiPickerHasTabWrapper .c0e32c5cffed3d9f-categoryList {
top: 53px;
}
.c0e32c5cffed3d9f-bodyWrapper {
display: grid;
grid-column: 2/3;
grid-row: 2/3;
grid-template-rows: auto 1fr;
position: relative;
}
.c0e32c5cffed3d9f-emojiPickerListWrapper {
grid-row: 2/2;
overflow: hidden;
position: relative;
}
.c0e32c5cffed3d9f-inspector {
grid-column: 2/3;
grid-row: 3/4;
}
.enable-forced-colors .c0e32c5cffed3d9f-header {
border-bottom: 1px solid CanvasText;
}
@media (max-width: 485px) {
.c0e32c5cffed3d9f-emojiPicker {
width: 350px;
}
}
.aeaaeb2a573807f0-inspector {
align-items: center;
background-color: var(--background-base-lower);
border-top: 1px solid var(--border-normal);
box-sizing: border-box;
display: flex;
flex: 0 0 auto;
flex-direction: row;
height: var(--custom-expression-picker-constants-expression-picker-inspector-bar-height);
overflow: hidden;
padding: 0 16px;
width: 100%;
}
.aeaaeb2a573807f0-graphicPrimary {
height: var(--custom-expression-picker-constants-expression-picker-inspector-bar-graphic-primary-dimensions);
width: var(--custom-expression-picker-constants-expression-picker-inspector-bar-graphic-primary-dimensions);
}
.aeaaeb2a573807f0-graphicSecondary {
height: var(--custom-expression-picker-constants-expression-picker-inspector-bar-graphic-secondary-dimensions);
width: var(--custom-expression-picker-constants-expression-picker-inspector-bar-graphic-secondary-dimensions);
}
.aeaaeb2a573807f0-graphicSecondary,
.aeaaeb2a573807f0-textWrapper {
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
.aeaaeb2a573807f0-textWrapper {
flex: 1;
overflow: hidden;
}
.aeaaeb2a573807f0-titlePrimary,
.aeaaeb2a573807f0-titleSecondary {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.aeaaeb2a573807f0-titleSecondary {
color: var(--interactive-text-default);
}
.aeaaeb2a573807f0-favorite {
-webkit-margin-end: 3px;
margin-inline-end: 3px;
margin-bottom: -1px;
}
.aeaaeb2a573807f0-badgeLabel {
border-radius: 4px;
display: flex;
flex-direction: row;
gap: 4px;
padding: 4px 8px;
text-transform: uppercase;
}
.aeaaeb2a573807f0-topGuildEmojiBadge {
background: linear-gradient(268.26deg, #bf5151, #db803f 102.45%);
}
.aeaaeb2a573807f0-newlyAddedBadge {
background: linear-gradient(268.26deg, #097d8d, #60a654 102.45%);
}
.aeaaeb2a573807f0-newlyAddedBadgeIcon {
color: #fff;
height: 14px;
margin-block: 2px 0;
margin-inline: 0 2px;
width: 14px;
}
.enable-forced-colors .aeaaeb2a573807f0-inspector {
border-top: 1px solid CanvasText;
}
._045fa59e1520eeda-emoji {
height: 100%;
object-fit: contain;
width: 100%;
}
._045fa59e1520eeda-glyphEmoji {
align-items: center;
display: flex;
justify-content: center;
overflow: hidden;
white-space: nowrap;
}
._045fa59e1520eeda-icon {
height: 100%;
transform-origin: 50% 50%;
width: 100%;
fill: var(--interactive-text-default);
}
._29ebda89742214e9-wrapper {
align-items: center;
display: flex;
flex-direction: column;
font-size: 14px;
font-weight: var(--font-weight-medium);
height: 100%;
justify-content: center;
text-align: center;
}
._29ebda89742214e9-sadImage {
background-repeat: no-repeat;
background-size: 90px;
height: 90px;
margin-bottom: 20px;
width: 90px;
}
.theme-dark ._29ebda89742214e9-wrapper {
color: var(--primary-400);
}
.theme-dark ._29ebda89742214e9-sadImage {
background-image: url(/assets/2a563d3b06091b16.svg);
}
.theme-dark ._29ebda89742214e9-forceLightTheme ._29ebda89742214e9-wrapper,
.theme-light ._29ebda89742214e9-wrapper {
color: #99aab5;
}
.theme-dark ._29ebda89742214e9-forceLightTheme ._29ebda89742214e9-sadImage,
.theme-light ._29ebda89742214e9-sadImage {
background-image: url(/assets/ed7b8a00de132314.svg);
}
._14245bb948377a25-wrapper {
align-items: center;
background-color: var(--background-surface-high);
box-sizing: border-box;
display: flex;
height: var(--custom-expression-picker-constants-expression-picker-list-section-heading-height);
padding-block: 0;
padding-inline: 8px 4px;
z-index: 1;
}
._14245bb948377a25-wrapper:after {
background-color: inherit;
content: "";
height: 3px;
inset-inline-start: 0;
position: absolute;
top: -2px;
width: 100%;
}
._14245bb948377a25-header {
align-items: center;
color: var(--text-default);
display: flex;
font-size: 14px;
font-weight: var(--font-weight-semibold);
justify-content: flex-start;
min-width: 0;
transition: color 0.125s;
}
._14245bb948377a25-interactive:hover {
cursor: pointer;
}
._14245bb948377a25-interactive:hover:hover {
color: var(--interactive-text-active);
}
._14245bb948377a25-headerIcon {
display: contents;
height: 100%;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
._14245bb948377a25-headerLabel {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
._14245bb948377a25-headerIcon + ._14245bb948377a25-headerLabel {
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
._14245bb948377a25-headerCollapseIcon {
flex-shrink: 0;
}
.full-motion ._14245bb948377a25-headerCollapseIcon {
transition: transform 0.1s;
}
._14245bb948377a25-headerCollapseIconCollapsed {
transform: rotate(-90deg);
}
.enable-forced-colors ._14245bb948377a25-wrapper {
border-bottom: 1px solid CanvasText;
}
.enable-forced-colors ._14245bb948377a25-interactive {
background-color: ButtonFace;
color: ButtonText;
forced-color-adjust: none;
}
.enable-forced-colors ._14245bb948377a25-interactive:hover {
color: ButtonText;
}
._0b69f200eb3bf411-upsellContainer {
align-items: center;
background:
linear-gradient(var(--background-base-lower), var(--background-base-lower)) padding-box,
var(--custom-premium-colors-premium-gradient-tier-2-tri-color) border-box;
border-radius: 12px;
display: flex;
padding: 12px;
}
._0b69f200eb3bf411-upsellContainer._0b69f200eb3bf411-upsellRedesignEnabled {
background: var(--background-surface-high);
border: 1px solid var(--border-subtle);
overflow: hidden;
padding: 0;
}
._0b69f200eb3bf411-expressiveGradientBg {
display: flex;
flex: 1 1;
padding: 12px;
}
._0b69f200eb3bf411-upsellContainerFloating {
inset-block: auto var(--space-8);
inset-inline: var(--space-8) var(--space-16);
position: absolute;
}
._0b69f200eb3bf411-upsellContainerInline {
flex: 1;
margin: var(--space-8) var(--space-16);
}
._0b69f200eb3bf411-upsellText {
flex: 1;
margin-block: auto;
margin-inline: 8px 16px;
}
._0b69f200eb3bf411-lockIcon {
color: var(--text-strong);
}
.b3fb5fe9675b4b4d-nitroTopDividerContainer {
display: flex;
flex-direction: column;
padding-top: var(--custom-emoji-picker-constants-emoji-premium-upsell-margin-top);
}
.b3fb5fe9675b4b4d-nitroTopDividerUpper {
height: 12px;
}
.b3fb5fe9675b4b4d-nitroTopDividerShadow {
box-shadow: 0 -5px 30px 4px var(--premium-tier-2-purple);
}
.b3fb5fe9675b4b4d-glow.b3fb5fe9675b4b4d-reducedMotion {
opacity: 0;
}
.b3fb5fe9675b4b4d-glow:not(.b3fb5fe9675b4b4d-reducedMotion) {
animation: b3fb5fe9675b4b4d-glowAnimation 5s forwards;
}
@keyframes b3fb5fe9675b4b4d-glowAnimation {
0% {
opacity: 0;
}
60% {
opacity: 0;
}
80% {
opacity: 1;
}
to {
opacity: 0;
}
}
.b3fb5fe9675b4b4d-nitroTopDividerLockContainer {
align-items: center;
display: flex;
}
.b3fb5fe9675b4b4d-nitroTopDividerLockBorder {
background: var(--custom-premium-colors-premium-gradient-tier-2-tri-color);
height: 1px;
width: 100%;
}
.b3fb5fe9675b4b4d-nitroTopDividerLockBorder.b3fb5fe9675b4b4d-brandRefresh {
background: var(--border-normal);
}
.b3fb5fe9675b4b4d-nitroTopDividerLockCircle {
align-items: center;
background: var(--custom-premium-colors-premium-gradient-tier-2-tri-color);
border-radius: 50%;
display: flex;
height: 28px;
inset-inline-start: 50%;
justify-content: center;
position: absolute;
transform: translateX(-50%);
width: 28px;
z-index: 9999;
}
.b3fb5fe9675b4b4d-nitroTopDividerLockCircle.b3fb5fe9675b4b4d-brandRefresh {
background: var(--background-surface-highest);
border: 1px solid var(--border-normal);
}
.b3fb5fe9675b4b4d-nitroTopDividerLockBorderReversed {
background: var(--custom-premium-colors-premium-gradient-tier-2-tri-color-reverse);
height: 1px;
width: 100%;
}
.b3fb5fe9675b4b4d-nitroTopDividerLockBorderReversed.b3fb5fe9675b4b4d-brandRefresh {
background: var(--border-normal);
}
.b3fb5fe9675b4b4d-nitroTopDividerLower {
background-color: var(--premium-tier-2-purple);
height: 12px;
}
.b3fb5fe9675b4b4d-nitroTopDividerLower.b3fb5fe9675b4b4d-brandRefresh {
background: linear-gradient(90deg, var(--expressive-gradient-nitro-pink-start) 0, var(--expressive-gradient-nitro-pink-end) 100%);
}
.theme-light .b3fb5fe9675b4b4d-nitroTopDividerLower.b3fb5fe9675b4b4d-brandRefresh {
background: linear-gradient(90deg, color-mix(in srgb, var(--expressive-gradient-nitro-pink-start) 40%, transparent), color-mix(in srgb, var(--expressive-gradient-nitro-pink-end) 40%, transparent));
}
.b3fb5fe9675b4b4d-reverseTrialTopDividerLower {
background-color: var(--premium-tier-2-purple);
height: 25px;
opacity: 0.2;
}
.b3fb5fe9675b4b4d-premiumUnlockAnimation {
animation: b3fb5fe9675b4b4d-shrink 2s forwards;
inset-inline-start: 50%;
position: absolute;
transform: translateX(-50%);
z-index: 9999;
}
@keyframes b3fb5fe9675b4b4d-shrink {
0% {
height: 67px;
width: 67px;
}
75% {
height: 66px;
width: 66px;
}
90% {
height: 32px;
width: 32px;
}
to {
display: none;
height: 32px;
width: 32px;
}
}
.b3fb5fe9675b4b4d-premiumUnlockedWithNitroPillContainer {
align-items: center;
background: var(--custom-premium-colors-premium-gradient-tier-2-tri-color);
border-radius: 14px;
box-shadow: inset 0 0 4px 0 rgba(194, 105, 195, 0.6);
display: flex;
gap: 4px;
height: 24px;
inset-inline-start: 50%;
opacity: 0;
overflow: hidden;
padding: 4px 16px;
position: absolute;
transform: translateX(-50%);
z-index: 9999;
}
.b3fb5fe9675b4b4d-premiumUnlockedWithNitroPillContainer.b3fb5fe9675b4b4d-reducedMotion {
opacity: 1;
}
.b3fb5fe9675b4b4d-premiumUnlockedWithNitroPillContainer:not(.b3fb5fe9675b4b4d-reducedMotion) {
animation: b3fb5fe9675b4b4d-expand 2s 2s forwards;
}
@keyframes b3fb5fe9675b4b4d-expand {
0% {
max-width: 0;
opacity: 1;
}
to {
max-width: 200px;
opacity: 1;
}
}
._1e702474dc791be1-rowContainer {
display: flex;
flex-direction: row;
gap: 8px;
padding-top: 8px;
}
._1859b636cb709618-image,
._1859b636cb709618-imageLoading {
color: transparent;
object-fit: contain;
pointer-events: none;
}
._1859b636cb709618-imageLoading {
background-repeat: no-repeat;
object-position: 100px;
}
.images-light ._1859b636cb709618-imageLoading {
background-image: url(/assets/4b212c35992a1e02.png);
}
.images-dark ._1859b636cb709618-imageLoading {
background-image: url(/assets/2dfc4736f9e305f0.png);
}
.d982c274a9c229e9-emojiSpriteImage {
object-fit: contain;
pointer-events: none;
}
.d982c274a9c229e9-emojiLockIconContainer {
background: var(--opacity-black-60);
border-radius: 2px;
height: 40px;
inset: 0;
margin: auto;
pointer-events: none;
position: absolute;
width: 40px;
}
.d982c274a9c229e9-emojiLockIcon {
color: var(--icon-strong);
inset: 0;
margin: auto;
position: absolute;
}
.d982c274a9c229e9-lockedEmoji {
border-radius: 2px;
}
.theme-light .d982c274a9c229e9-emojiLockIconContainer {
background: hsl(var(--primary-200-hsl) / 0.6);
}
@keyframes fc7141859aaa98b7-ripple {
0% {
opacity: 1;
transform: scale(0.8);
}
to {
opacity: 0;
transform: scale(1.6);
}
}
.fc7141859aaa98b7-emojiListRow {
display: grid;
grid-auto-flow: column;
-webkit-padding-start: 8px;
padding-inline-start: 8px;
}
.fc7141859aaa98b7-newlyAddedHighlightContainer .fc7141859aaa98b7-emojiListRow {
-webkit-padding-start: 0;
padding-inline-start: 0;
}
.fc7141859aaa98b7-emojiListRow li {
overflow: hidden;
}
.fc7141859aaa98b7-topEmojiSectionContainer {
display: flex;
flex-direction: row;
margin-bottom: 20px;
}
.fc7141859aaa98b7-topEmojiContainer {
display: grid;
grid-auto-flow: column;
}
.fc7141859aaa98b7-topEmojiContainer.fc7141859aaa98b7-noEmojis {
display: none;
}
.fc7141859aaa98b7-newlyAddedHighlightContainer {
display: flex;
flex-direction: column;
position: relative;
}
.fc7141859aaa98b7-newlyAddedBadge {
background-color: #2d7d46;
border-radius: 0 0 4px 4px;
display: flex;
flex-direction: row;
position: absolute;
z-index: 1;
-webkit-margin-start: auto;
align-items: center;
bottom: calc(var(--custom-emoji-picker-constants-newly-added-emoji-badge-height) * -1);
justify-content: center;
margin-inline-start: auto;
text-transform: uppercase;
}
.fc7141859aaa98b7-newlyAddedBadge.fc7141859aaa98b7-alignRight {
inset-inline-end: 0;
}
.fc7141859aaa98b7-newlyAddedBadgeMedium {
width: calc(var(--custom-emoji-picker-constants-emoji-size-medium) + var(--custom-emoji-picker-constants-emoji-container-padding-horizontal) * 2 + 2px);
}
.fc7141859aaa98b7-newlyAddedBadgeLarge {
width: calc(var(--custom-emoji-picker-constants-emoji-size-large) + var(--custom-emoji-picker-constants-emoji-container-padding-horizontal) * 2 + 2px);
}
.fc7141859aaa98b7-newlyAddedBadgeStar {
height: 12px;
width: 12px;
-webkit-margin-end: 2px;
color: #fff;
margin-inline-end: 2px;
}
.fc7141859aaa98b7-newlyAddedHighlight {
border: 1px solid #2d7d46;
border-radius: 4px 4px 4px 0;
z-index: 1;
}
.fc7141859aaa98b7-newlyAddedHighlight.fc7141859aaa98b7-alignRight {
border-radius: 4px 4px 0;
}
.fc7141859aaa98b7-newlyAddedHighlight.fc7141859aaa98b7-oneItem {
border-radius: 4px 4px 0 0;
}
.fc7141859aaa98b7-newlyAddedHighlightContainer:hover .fc7141859aaa98b7-newlyAddedHighlight {
border: 1px solid rgba(45, 125, 70, 0.5);
}
.fc7141859aaa98b7-newlyAddedHighlightContainer:hover .fc7141859aaa98b7-newlyAddedBadge {
background-color: rgba(45, 125, 70, 0.5);
}
.fc7141859aaa98b7-emojiListRowLargeSize {
grid-template-columns: repeat(auto-fill, calc(var(--custom-emoji-picker-constants-emoji-size-large) + var(--custom-emoji-picker-constants-emoji-container-padding-vertical) * 2));
height: calc(var(--custom-emoji-picker-constants-emoji-size-large) + var(--custom-emoji-picker-constants-emoji-container-padding-vertical) * 2);
}
.fc7141859aaa98b7-emojiListRowMediumSize {
grid-template-columns: repeat(auto-fill, calc(var(--custom-emoji-picker-constants-emoji-size-medium) + var(--custom-emoji-picker-constants-emoji-container-padding-vertical) * 2));
height: calc(var(--custom-emoji-picker-constants-emoji-size-medium) + var(--custom-emoji-picker-constants-emoji-container-padding-vertical) * 2);
}
.fc7141859aaa98b7-emojiItem {
background: none;
border-radius: 4px;
cursor: pointer;
display: block;
padding: var(--custom-emoji-picker-constants-emoji-container-padding-vertical) var(--custom-emoji-picker-constants-emoji-container-padding-horizontal);
position: relative;
}
.fc7141859aaa98b7-emojiItem,
.fc7141859aaa98b7-emojiItem:focus {
outline: none;
}
.fc7141859aaa98b7-emojiItem.fc7141859aaa98b7-emojiItemSelected,
.fc7141859aaa98b7-emojiItem.fc7141859aaa98b7-expandCollapseButtonSelected {
background-color: var(--background-accent);
}
.fc7141859aaa98b7-emojiItem.fc7141859aaa98b7-expandCollapseButtonSelected {
border-radius: var(--radius-round);
}
.fc7141859aaa98b7-emojiItem:after {
border: 3px solid var(--yellow-300);
border-radius: 100%;
box-sizing: border-box;
content: "";
height: 100%;
inset-inline-start: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 0;
transform-origin: center;
width: 100%;
z-index: 5;
}
.full-motion .fc7141859aaa98b7-emojiItem:after {
transition: all 0.15s ease-in-out;
}
.fc7141859aaa98b7-emojiItem.fc7141859aaa98b7-showPulse:after {
animation: fc7141859aaa98b7-ripple 0.25s ease-out 1;
}
.fc7141859aaa98b7-emojiItemLarge {
height: calc(var(--custom-emoji-picker-constants-emoji-size-large) + var(--custom-emoji-picker-constants-emoji-container-padding-vertical) * 2);
width: calc(var(--custom-emoji-picker-constants-emoji-size-large) + var(--custom-emoji-picker-constants-emoji-container-padding-horizontal) * 2);
}
.fc7141859aaa98b7-emojiItemMedium {
height: calc(var(--custom-emoji-picker-constants-emoji-size-medium) + var(--custom-emoji-picker-constants-emoji-container-padding-vertical) * 2);
width: calc(var(--custom-emoji-picker-constants-emoji-size-medium) + var(--custom-emoji-picker-constants-emoji-container-padding-horizontal) * 2);
}
.fc7141859aaa98b7-icon {
height: 100%;
transform-origin: 50% 50%;
width: 100%;
fill: var(--interactive-text-default);
}
.fc7141859aaa98b7-icon:hover .fc7141859aaa98b7-icon {
fill: var(--interactive-text-hover);
}
.keyboard-mode .fc7141859aaa98b7-emojiItem.fc7141859aaa98b7-emojiItemSelected {
position: relative;
}
.keyboard-mode .fc7141859aaa98b7-emojiItem.fc7141859aaa98b7-emojiItemSelected:before {
bottom: 0;
content: "";
display: block;
inset-inline: 0;
pointer-events: none;
position: absolute;
top: 0;
--__adaptive-radius: 4px;
border-radius: var(--__adaptive-radius);
--__adaptive-focus-color: var(--interactive-text-hover);
border: 2px solid var(--__adaptive-focus-color);
z-index: 1;
}
.enable-forced-colors .fc7141859aaa98b7-emojiItem.fc7141859aaa98b7-emojiItemSelected {
background-color: HighlightText;
outline: 1px solid Highlight;
outline-offset: -1px;
}
.enable-forced-colors .fc7141859aaa98b7-emojiItem.fc7141859aaa98b7-emojiItemSelected:before {
border-color: Highlight;
}
.theme-light .fc7141859aaa98b7-emojiItem.fc7141859aaa98b7-emojiItemSelected,
.theme-light .fc7141859aaa98b7-emojiItem.fc7141859aaa98b7-expandCollapseButtonSelected {
background-color: var(--background-base-low);
box-shadow: inset 0 0 0 1px var(--border-subtle);
}
.c656aca9a3db31a9-listWrapper {
inset: 0;
position: absolute;
}
.c656aca9a3db31a9-list {
height: 100%;
}
.c656aca9a3db31a9-noSearchResultsContainer {
inset: 0;
position: absolute;
}
.c656aca9a3db31a9-categorySection {
padding-bottom: var(--custom-emoji-picker-constants-emoji-section-margin-bottom);
}
.c656aca9a3db31a9-categorySectionCollapsed,
.c656aca9a3db31a9-categorySectionLast,
.c656aca9a3db31a9-categorySectionNitroDivider {
padding-bottom: 0;
}
.c656aca9a3db31a9-categorySectionNitroLocked {
background-color: hsl(var(--premium-tier-2-purple-hsl) / 0.2);
}
.c656aca9a3db31a9-categorySectionNitroLocked.c656aca9a3db31a9-brandRefresh {
background: linear-gradient(90deg, var(--expressive-gradient-nitro-pink-start) 0, var(--expressive-gradient-nitro-pink-end) 100%);
}
.theme-light .c656aca9a3db31a9-categorySectionNitroLocked.c656aca9a3db31a9-brandRefresh {
background: linear-gradient(90deg, color-mix(in srgb, var(--expressive-gradient-nitro-pink-start) 40%, transparent), color-mix(in srgb, var(--expressive-gradient-nitro-pink-end) 40%, transparent));
}
.c656aca9a3db31a9-header {
position: -webkit-sticky;
position: sticky;
top: 0;
}
.c656aca9a3db31a9-inactiveNitroHeader {
background-color: transparent !important;
}
.c656aca9a3db31a9-activeNitroHeader {
background-color: var(--background-base-lower);
}
.c656aca9a3db31a9-premiumUpsell {
box-sizing: border-box;
height: var(--custom-emoji-picker-constants-emoji-premium-upsell-height);
margin-top: var(--custom-emoji-picker-constants-emoji-premium-upsell-margin-top);
overflow: hidden;
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
.c656aca9a3db31a9-sectionPremiumUpsellTopOfList {
margin-top: 8px;
}
.c656aca9a3db31a9-premiumUpsellTopOfList {
height: 50px;
margin-top: 0;
}
.c656aca9a3db31a9-nitroBottomDivider {
background: var(--custom-premium-colors-premium-gradient-tier-2-tri-color);
height: 1px;
margin: var(--custom-emoji-picker-constants-emoji-premium-upsell-margin-top) 0;
width: 100%;
}
.c656aca9a3db31a9-nitroBottomDivider.c656aca9a3db31a9-brandRefresh {
background: var(--border-normal);
}
.c656aca9a3db31a9-upsellContainer {
align-items: center;
background:
linear-gradient(var(--background-base-lower), var(--background-base-lower)) padding-box,
var(--custom-premium-colors-premium-gradient-tier-2-tri-color) border-box;
border-radius: 12px;
display: flex;
filter: drop-shadow(0 0 10px #b845c180);
height: 52px;
inset-block: auto 8px;
inset-inline: 8px 16px;
padding: 0 12px;
position: absolute;
}
.c656aca9a3db31a9-upsellText {
margin-block: auto;
margin-inline: 4px 16px;
}
.c656aca9a3db31a9-upsellLock {
color: var(--icon-strong);
padding-bottom: 2px;
}
.c656aca9a3db31a9-upsellButton {
background: var(--custom-premium-colors-premium-gradient-tier-2-tri-color);
border-radius: 3px;
flex-shrink: 0;
}
.c656aca9a3db31a9-soundmojiViewMore,
.c656aca9a3db31a9-upsellButton {
-webkit-margin-start: auto;
margin-inline-start: auto;
}
.c656aca9a3db31a9-soundmojiViewMore {
align-self: center;
color: var(--text-default);
cursor: pointer;
font-size: 12px;
font-weight: var(--font-weight-semibold);
transition: color 0.125s;
}
.c656aca9a3db31a9-soundmojiViewMore:hover {
color: var(--interactive-text-active);
}
.a606efe4d3744194-premiumRetentionNotice {
background-color: var(--background-base-lowest);
border-radius: 4px;
color: var(--text-default);
display: flex;
font-size: 12px;
font-weight: var(--font-weight-medium);
line-height: 16px;
margin: 8px 8px 0;
padding: 8px;
}
.a606efe4d3744194-premiumRetentionNoticeIcon {
height: 24px;
min-width: var(--custom-emoji-picker-constants-emoji-size);
-webkit-margin-end: 8px;
margin-inline-end: 8px;
margin-top: 2px;
}
.a606efe4d3744194-premiumRetentionNoticeClose {
color: var(--interactive-text-default);
cursor: pointer;
height: 16px;
width: 16px;
}
.a606efe4d3744194-premiumRetentionNoticeClose:hover {
color: var(--interactive-text-hover);
}
.a606efe4d3744194-premiumRetentionNoticeContent {
flex: 1 1 auto;
}
.d0aeea01a2603d1f-noBoxShadowMargin {
margin: 0;
}
:where(._42bf58529787eb7a-contentImage) {
border-radius: var(--radius-xs);
object-fit: contain;
}
._230d226505533582-fontCode {
font-family: var(--font-code);
}
._230d226505533582-bold {
font-weight: 700;
}
._230d226505533582-inlineTimestamp {
display: inline;
}
._635edac6e9713347-badgeContainer {
align-items: center;
display: flex;
flex-shrink: 0;
gap: 4px;
max-width: 100%;
overflow: hidden;
}
._635edac6e9713347-badgeContainer svg {
flex-shrink: 0;
}
._635edac6e9713347-badgeContainer div {
overflow: hidden;
}
._635edac6e9713347-badgeContainer div,
._635edac6e9713347-badgeLabel {
text-overflow: ellipsis;
white-space: nowrap;
}
._635edac6e9713347-badgeLabel {
overflow-x: hidden;
}
:where(._635edac6e9713347-badgesContainer) {
align-items: center;
display: flex;
gap: 0 8px;
}
:where(._635edac6e9713347-badgesContainer):empty {
display: none;
}
._635edac6e9713347-badgesContainerCard > :nth-child(n + 3) {
display: none;
}
._635edac6e9713347-badgesContainerCard > :nth-child(2) {
flex-shrink: 1;
}
._635edac6e9713347-badgesContainerGameProfile,
._635edac6e9713347-badgesContainerPopout {
flex-wrap: wrap;
row-gap: 4px;
}
._0f2e83213c878a13-container {
box-sizing: border-box;
display: flex;
position: relative;
-webkit-margin-start: 8px;
align-items: center;
background: var(--background-gradient-high, var(--background-surface-high));
border: 1px solid var(--border-muted);
border-radius: var(--radius-md);
cursor: pointer;
gap: 8px;
justify-content: space-between;
margin-inline-start: 8px;
margin-top: 8px;
max-height: 80px;
max-width: calc(var(--custom-member-list-width) - 16px);
padding: 8px;
}
._0f2e83213c878a13-container:hover {
background: var(--background-gradient-higher, var(--interactive-background-hover));
}
._0f2e83213c878a13-container:hover ._0f2e83213c878a13-contentTitle {
color: var(--interactive-text-hover);
}
._0f2e83213c878a13-container:hover ._0f2e83213c878a13-reply {
opacity: 1;
}
._0f2e83213c878a13-container:hover ._0f2e83213c878a13-additionalParticipantBadge {
background: var(--background-gradient-high, var(--background-accent));
}
._0f2e83213c878a13-usesCardRows {
flex-direction: column;
}
._0f2e83213c878a13-cardRow {
align-items: center;
display: flex;
flex-direction: row;
gap: 8px;
justify-content: space-between;
width: 100%;
}
._0f2e83213c878a13-openOnHover {
cursor: auto;
}
._0f2e83213c878a13-reply {
align-items: center;
background: var(--background-base-low);
border: 1px solid var(--background-base-lower);
border-radius: var(--radius-xs);
display: flex;
height: 24px;
inset-inline-end: 8px;
justify-content: center;
margin: auto;
opacity: 0;
position: absolute;
top: 4px;
width: 24px;
}
._0f2e83213c878a13-reply:hover ._0f2e83213c878a13-icon {
color: var(--interactive-text-hover);
}
._0f2e83213c878a13-icon {
color: var(--interactive-text-default);
display: block;
height: 16px;
object-fit: contain;
}
._0f2e83213c878a13-selected,
._0f2e83213c878a13-selected:hover {
background-color: var(--interactive-background-selected);
}
._0f2e83213c878a13-selected ._0f2e83213c878a13-contentDescription {
color: var(--interactive-text-hover);
}
._0f2e83213c878a13-infoSection {
display: flex;
flex: 1;
flex-direction: column;
margin-bottom: -2px;
min-width: 0;
}
._0f2e83213c878a13-userSection {
align-items: center;
display: flex;
margin-bottom: 2px;
}
._0f2e83213c878a13-userName {
color: var(--channels-default);
font-family: var(--font-primary);
font-size: 14px;
font-weight: 500;
line-height: 1.2857142857142858;
max-width: 85%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._0f2e83213c878a13-userName._0f2e83213c878a13-fontScaling {
font-size: 0.875rem;
}
._0f2e83213c878a13-facePile {
display: flex;
-webkit-margin-end: 6px;
margin-inline-end: 6px;
}
._0f2e83213c878a13-facePileItem:not(:first-child) {
-webkit-margin-start: -3px;
margin-inline-start: -3px;
}
._0f2e83213c878a13-additionalParticipantBadge {
background: var(--background-mod-subtle);
border-radius: 8px;
padding-block: 2.25px 2.5px;
padding-inline: 4.2px 4.4px;
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
._0f2e83213c878a13-additionalParticipantBadgeText {
line-height: 10px;
}
img._0f2e83213c878a13-thumbnail {
object-fit: cover;
width: 48px;
}
._0f2e83213c878a13-divider {
background-color: var(--background-mod-subtle);
height: 1px;
width: 100%;
}
._05e81ad8c06c1066-nameTag {
align-items: center;
display: flex;
justify-content: flex-start;
line-height: 1.1;
overflow: hidden;
}
._05e81ad8c06c1066-username {
display: block;
flex: 0 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._05e81ad8c06c1066-bot {
flex: 0 0 auto;
-webkit-margin-start: 1ch;
display: block;
margin-inline-start: 1ch;
}
.f4bc976213b83e68-info {
align-items: center;
display: flex;
flex-direction: row;
justify-content: flex-start;
overflow: hidden;
white-space: nowrap;
}
.f4bc976213b83e68-info.f4bc976213b83e68-withDisplayNameStyles {
overflow: visible;
}
.f4bc976213b83e68-infoSpacing {
-webkit-margin-start: 5px;
margin-inline-start: 5px;
}
.ec58feb9e769a16d-userListItem {
align-items: center;
border-radius: var(--radius-xs);
display: flex;
margin: 8px -8px;
padding: 4px 8px;
}
.ec58feb9e769a16d-userListItem:last-child {
margin-bottom: 4px;
}
.ec58feb9e769a16d-userListItem:not(.ec58feb9e769a16d-popoutDisabled):hover {
background-color: var(--background-base-lowest);
cursor: pointer;
}
.ec58feb9e769a16d-userListItemTag {
-webkit-margin-start: 8px;
margin-inline-start: 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ec58feb9e769a16d-avatar {
flex-shrink: 0;
}
.ec58feb9e769a16d-username {
font-weight: var(--font-weight-semibold);
}
._9ac2896ae58b7106-popoutWrapper {
display: flex;
inset-inline-start: -30px;
max-height: 40vh;
position: relative;
width: 200px;
}
._9ac2896ae58b7106-scroller {
background-color: var(--background-surface-high);
border-radius: 4px;
padding: 8px 16px;
}
._9ac2896ae58b7106-avatars {
align-items: center;
display: flex;
flex-grow: 0;
position: relative;
}
._9ac2896ae58b7106-avatar {
-webkit-mask: url(/assets/38fe464a6fea7d0e.svg);
mask: url(/assets/38fe464a6fea7d0e.svg);
-webkit-mask-size: 100%;
mask-size: 100%;
mask-type: alpha;
}
._9ac2896ae58b7106-avatar._9ac2896ae58b7106-size16 {
-webkit-margin-end: -3px;
margin-inline-end: -3px;
}
._9ac2896ae58b7106-avatar._9ac2896ae58b7106-size20 {
-webkit-margin-end: -5px;
margin-inline-end: -5px;
}
._9ac2896ae58b7106-avatar._9ac2896ae58b7106-size24 {
-webkit-margin-end: -6px;
margin-inline-end: -6px;
}
._9ac2896ae58b7106-avatar._9ac2896ae58b7106-isLast {
-webkit-mask: none;
mask: none;
-webkit-margin-end: 0;
margin-inline-end: 0;
}
._9ac2896ae58b7106-overflow {
align-items: center;
background-color: var(--background-base-lowest);
border-radius: 16px;
box-sizing: border-box;
display: flex;
justify-content: center;
width: auto;
}
._9ac2896ae58b7106-overflow._9ac2896ae58b7106-size16 {
height: 16px;
min-width: 16px;
padding: 0 4px;
}
._9ac2896ae58b7106-overflow._9ac2896ae58b7106-size20 {
height: 20px;
min-width: 20px;
padding: 0 6px;
}
._9ac2896ae58b7106-overflow._9ac2896ae58b7106-size24 {
height: 24px;
min-width: 24px;
padding: 0 8px;
}
._9ac2896ae58b7106-button {
cursor: pointer;
}
._04eede68d145ae81-emojiButton {
align-items: center;
cursor: pointer;
display: flex;
font-size: 14px;
justify-content: center;
max-height: 50px;
}
._04eede68d145ae81-emojiButtonHovered,
._04eede68d145ae81-emojiButtonNormal {
}
._04eede68d145ae81-spriteContainer {
position: relative;
--custom-emoji-sprite-bg-position: calc(var(--custom-emoji-sprite-col) * -1 * var(--custom-emoji-sprite-size)) calc(var(--custom-emoji-sprite-row) * -1 * var(--custom-emoji-sprite-size));
--custom-emoji-sprite-bg-size: calc(var(--custom-emoji-sprite-size) * 20) calc(var(--custom-emoji-sprite-size) * 4);
}
._04eede68d145ae81-sprite,
._04eede68d145ae81-spriteContainer {
display: block;
height: var(--custom-emoji-sprite-size);
width: var(--custom-emoji-sprite-size);
}
._04eede68d145ae81-sprite {
inset-inline-start: 0;
position: absolute;
top: 0;
}
._04eede68d145ae81-spriteColored {
background-image: url(/assets/1b05b930a77fbff9.png);
background-position: var(--custom-emoji-sprite-bg-position);
background-size: var(--custom-emoji-sprite-bg-size);
}
._04eede68d145ae81-spriteGreyscale {
background-color: var(--interactive-text-default);
}
._04eede68d145ae81-spriteGreyscale,
._04eede68d145ae81-spritePremiumColored {
-webkit-mask-image: url(/assets/decf85f79e02d276.png);
mask-image: url(/assets/decf85f79e02d276.png);
-webkit-mask-position: var(--custom-emoji-sprite-bg-position);
mask-position: var(--custom-emoji-sprite-bg-position);
-webkit-mask-size: var(--custom-emoji-sprite-bg-size);
mask-size: var(--custom-emoji-sprite-bg-size);
}
._04eede68d145ae81-spritePremiumColored._04eede68d145ae81-reducedMotion {
background-color: var(--premium-tier-2-purple-for-gradients-2);
}
._04eede68d145ae81-spritePremiumColored:not(._04eede68d145ae81-reducedMotion) {
animation: _04eede68d145ae81-spritePremiumPulsing 2s infinite;
}
@keyframes _04eede68d145ae81-spritePremiumPulsing {
0% {
background-color: var(--premium-tier-2-purple);
}
50% {
background-color: var(--premium-tier-2-purple-for-gradients-2);
}
to {
background-color: var(--premium-tier-2-purple);
}
}
._04eede68d145ae81-inactive {
opacity: 0;
}
._04eede68d145ae81-active {
opacity: 1;
}
._04eede68d145ae81-premiumUnlockAnimation {
position: absolute;
z-index: 100;
}
._04eede68d145ae81-premiumUnlockAnimation._04eede68d145ae81-reducedMotion {
height: 48px;
width: 48px;
}
._04eede68d145ae81-premiumUnlockAnimation:not(._04eede68d145ae81-reducedMotion) {
animation: _04eede68d145ae81-shrink 2s forwards;
}
@keyframes _04eede68d145ae81-shrink {
0% {
height: 60px;
width: 60px;
}
75% {
height: 60px;
width: 60px;
}
to {
height: 48px;
width: 48px;
}
}
.enable-forced-colors ._04eede68d145ae81-spriteGreyscale {
background-color: ButtonText;
}
._5ba62711a5a2d457-reactions {
flex-direction: row;
flex-wrap: wrap;
height: 32px;
justify-content: flex-end;
width: 100px;
}
._5ba62711a5a2d457-reactions,
._5ba62711a5a2d457-reply {
border-radius: 8px;
display: flex;
}
._5ba62711a5a2d457-reply {
background: var(--background-base-low);
box-shadow: var(--shadow-border), var(--shadow-high);
flex-direction: column;
font-size: 16px;
padding: 16px;
text-indent: 0;
width: 300px;
}
._5ba62711a5a2d457-replyHeader {
margin-bottom: 8px;
text-transform: uppercase;
}
._5ba62711a5a2d457-replyInput {
background: var(--input-background-default);
}
._5ba62711a5a2d457-emojiButton {
background-color: transparent;
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
._5ba62711a5a2d457-reaction {
align-self: center;
display: flex;
opacity: 0.8;
transition: opacity 0.2s linear;
}
._5ba62711a5a2d457-reaction:hover {
opacity: 1;
}
._5ba62711a5a2d457-closeIcon {
color: var(--interactive-text-default);
cursor: pointer;
}
.a7acaedd978a9637-heading-sm\/normal {
font-family: var(--font-display);
font-size: 14px;
font-weight: 400;
line-height: 1.2857142857142858;
}
.a7acaedd978a9637-heading-sm\/normal.a7acaedd978a9637-fontScaling {
font-size: 0.875rem;
}
.a7acaedd978a9637-heading-sm\/medium {
font-family: var(--font-display);
font-size: 14px;
font-weight: 500;
line-height: 1.2857142857142858;
}
.a7acaedd978a9637-heading-sm\/medium.a7acaedd978a9637-fontScaling {
font-size: 0.875rem;
}
.a7acaedd978a9637-heading-sm\/semibold {
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
line-height: 1.2857142857142858;
}
.a7acaedd978a9637-heading-sm\/semibold.a7acaedd978a9637-fontScaling {
font-size: 0.875rem;
}
.a7acaedd978a9637-heading-sm\/bold {
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
line-height: 1.2857142857142858;
}
.a7acaedd978a9637-heading-sm\/bold.a7acaedd978a9637-fontScaling {
font-size: 0.875rem;
}
.a7acaedd978a9637-heading-sm\/extrabold {
font-family: var(--font-display);
font-size: 14px;
font-weight: 800;
line-height: 1.2857142857142858;
}
.a7acaedd978a9637-heading-sm\/extrabold.a7acaedd978a9637-fontScaling {
font-size: 0.875rem;
}
.a7acaedd978a9637-heading-md\/normal {
font-family: var(--font-display);
font-size: 16px;
font-weight: 400;
line-height: 1.25;
}
.a7acaedd978a9637-heading-md\/normal.a7acaedd978a9637-fontScaling {
font-size: 1rem;
}
.a7acaedd978a9637-heading-md\/medium {
font-family: var(--font-display);
font-size: 16px;
font-weight: 500;
line-height: 1.25;
}
.a7acaedd978a9637-heading-md\/medium.a7acaedd978a9637-fontScaling {
font-size: 1rem;
}
.a7acaedd978a9637-heading-md\/semibold {
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
line-height: 1.25;
}
.a7acaedd978a9637-heading-md\/semibold.a7acaedd978a9637-fontScaling {
font-size: 1rem;
}
.a7acaedd978a9637-heading-md\/bold {
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
line-height: 1.25;
}
.a7acaedd978a9637-heading-md\/bold.a7acaedd978a9637-fontScaling {
font-size: 1rem;
}
.a7acaedd978a9637-heading-md\/extrabold {
font-family: var(--font-display);
font-size: 16px;
font-weight: 800;
line-height: 1.25;
}
.a7acaedd978a9637-heading-md\/extrabold.a7acaedd978a9637-fontScaling {
font-size: 1rem;
}
.a7acaedd978a9637-heading-lg\/normal {
font-family: var(--font-display);
font-size: 20px;
font-weight: 400;
line-height: 1.2;
}
.a7acaedd978a9637-heading-lg\/normal.a7acaedd978a9637-fontScaling {
font-size: 1.25rem;
}
.a7acaedd978a9637-heading-lg\/medium {
font-family: var(--font-display);
font-size: 20px;
font-weight: 500;
line-height: 1.2;
}
.a7acaedd978a9637-heading-lg\/medium.a7acaedd978a9637-fontScaling {
font-size: 1.25rem;
}
.a7acaedd978a9637-heading-lg\/semibold {
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
line-height: 1.2;
}
.a7acaedd978a9637-heading-lg\/semibold.a7acaedd978a9637-fontScaling {
font-size: 1.25rem;
}
.a7acaedd978a9637-heading-lg\/bold {
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
line-height: 1.2;
}
.a7acaedd978a9637-heading-lg\/bold.a7acaedd978a9637-fontScaling {
font-size: 1.25rem;
}
.a7acaedd978a9637-heading-lg\/extrabold {
font-family: var(--font-display);
font-size: 20px;
font-weight: 800;
line-height: 1.2;
}
.a7acaedd978a9637-heading-lg\/extrabold.a7acaedd978a9637-fontScaling {
font-size: 1.25rem;
}
.a7acaedd978a9637-heading-xl\/normal {
font-family: var(--font-display);
font-size: 24px;
font-weight: 400;
line-height: 1.25;
}
.a7acaedd978a9637-heading-xl\/normal.a7acaedd978a9637-fontScaling {
font-size: 1.5rem;
}
.a7acaedd978a9637-heading-xl\/medium {
font-family: var(--font-display);
font-size: 24px;
font-weight: 500;
line-height: 1.25;
}
.a7acaedd978a9637-heading-xl\/medium.a7acaedd978a9637-fontScaling {
font-size: 1.5rem;
}
.a7acaedd978a9637-heading-xl\/semibold {
font-family: var(--font-display);
font-size: 24px;
font-weight: 600;
line-height: 1.25;
}
.a7acaedd978a9637-heading-xl\/semibold.a7acaedd978a9637-fontScaling {
font-size: 1.5rem;
}
.a7acaedd978a9637-heading-xl\/bold {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
line-height: 1.25;
}
.a7acaedd978a9637-heading-xl\/bold.a7acaedd978a9637-fontScaling {
font-size: 1.5rem;
}
.a7acaedd978a9637-heading-xl\/extrabold {
font-family: var(--font-display);
font-size: 24px;
font-weight: 800;
line-height: 1.25;
}
.a7acaedd978a9637-heading-xl\/extrabold.a7acaedd978a9637-fontScaling {
font-size: 1.5rem;
}
.a7acaedd978a9637-heading-xxl\/normal {
font-family: var(--font-display);
font-size: 32px;
font-weight: 400;
line-height: 1.25;
}
.a7acaedd978a9637-heading-xxl\/normal.a7acaedd978a9637-fontScaling {
font-size: 2rem;
}
.a7acaedd978a9637-heading-xxl\/medium {
font-family: var(--font-display);
font-size: 32px;
font-weight: 500;
line-height: 1.25;
}
.a7acaedd978a9637-heading-xxl\/medium.a7acaedd978a9637-fontScaling {
font-size: 2rem;
}
.a7acaedd978a9637-heading-xxl\/semibold {
font-family: var(--font-display);
font-size: 32px;
font-weight: 600;
line-height: 1.25;
}
.a7acaedd978a9637-heading-xxl\/semibold.a7acaedd978a9637-fontScaling {
font-size: 2rem;
}
.a7acaedd978a9637-heading-xxl\/bold {
font-family: var(--font-display);
font-size: 32px;
font-weight: 700;
line-height: 1.25;
}
.a7acaedd978a9637-heading-xxl\/bold.a7acaedd978a9637-fontScaling {
font-size: 2rem;
}
.a7acaedd978a9637-heading-xxl\/extrabold {
font-family: var(--font-display);
font-size: 32px;
font-weight: 800;
line-height: 1.25;
}
.a7acaedd978a9637-heading-xxl\/extrabold.a7acaedd978a9637-fontScaling {
font-size: 2rem;
}
.a7acaedd978a9637-eyebrow {
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.3333333333333333;
text-transform: uppercase;
}
.a7acaedd978a9637-eyebrow.a7acaedd978a9637-fontScaling {
font-size: 0.75rem;
}
.a7acaedd978a9637-heading-deprecated-12\/normal {
font-family: var(--font-display);
font-size: 12px;
font-weight: 400;
line-height: 1.3333333333333333;
}
.a7acaedd978a9637-heading-deprecated-12\/normal.a7acaedd978a9637-fontScaling {
font-size: 0.75rem;
}
.a7acaedd978a9637-heading-deprecated-12\/medium {
font-family: var(--font-display);
font-size: 12px;
font-weight: 500;
line-height: 1.3333333333333333;
}
.a7acaedd978a9637-heading-deprecated-12\/medium.a7acaedd978a9637-fontScaling {
font-size: 0.75rem;
}
.a7acaedd978a9637-heading-deprecated-12\/semibold {
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
line-height: 1.3333333333333333;
}
.a7acaedd978a9637-heading-deprecated-12\/semibold.a7acaedd978a9637-fontScaling {
font-size: 0.75rem;
}
.a7acaedd978a9637-heading-deprecated-12\/bold {
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
line-height: 1.3333333333333333;
}
.a7acaedd978a9637-heading-deprecated-12\/bold.a7acaedd978a9637-fontScaling {
font-size: 0.75rem;
}
.a7acaedd978a9637-heading-deprecated-12\/extrabold {
font-family: var(--font-display);
font-size: 12px;
font-weight: 800;
line-height: 1.3333333333333333;
}
.a7acaedd978a9637-heading-deprecated-12\/extrabold.a7acaedd978a9637-fontScaling {
font-size: 0.75rem;
}
.a7acaedd978a9637-redesign\/heading-18\/bold {
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
line-height: 1.3333333333333333;
}
.a7acaedd978a9637-redesign\/heading-18\/bold.a7acaedd978a9637-fontScaling {
font-size: 1.125rem;
}
.a7acaedd978a9637-text-xxs\/normal {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 400;
line-height: 1.2;
}
.a7acaedd978a9637-text-xxs\/normal.a7acaedd978a9637-fontScaling {
font-size: 0.625rem;
}
.a7acaedd978a9637-text-xxs\/medium {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 500;
line-height: 1.2;
}
.a7acaedd978a9637-text-xxs\/medium.a7acaedd978a9637-fontScaling {
font-size: 0.625rem;
}
.a7acaedd978a9637-text-xxs\/semibold {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 600;
line-height: 1.2;
}
.a7acaedd978a9637-text-xxs\/semibold.a7acaedd978a9637-fontScaling {
font-size: 0.625rem;
}
.a7acaedd978a9637-text-xxs\/bold {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 700;
line-height: 1.2;
}
.a7acaedd978a9637-text-xxs\/bold.a7acaedd978a9637-fontScaling {
font-size: 0.625rem;
}
.a7acaedd978a9637-text-xs\/normal {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 400;
line-height: 1.3333333333333333;
}
.a7acaedd978a9637-text-xs\/normal.a7acaedd978a9637-fontScaling {
font-size: 0.75rem;
}
.a7acaedd978a9637-text-xs\/medium {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 500;
line-height: 1.3333333333333333;
}
.a7acaedd978a9637-text-xs\/medium.a7acaedd978a9637-fontScaling {
font-size: 0.75rem;
}
.a7acaedd978a9637-text-xs\/semibold {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 600;
line-height: 1.3333333333333333;
}
.a7acaedd978a9637-text-xs\/semibold.a7acaedd978a9637-fontScaling {
font-size: 0.75rem;
}
.a7acaedd978a9637-text-xs\/bold {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 700;
line-height: 1.3333333333333333;
}
.a7acaedd978a9637-text-xs\/bold.a7acaedd978a9637-fontScaling {
font-size: 0.75rem;
}
.a7acaedd978a9637-text-sm\/normal {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 400;
line-height: 1.2857142857142858;
}
.a7acaedd978a9637-text-sm\/normal.a7acaedd978a9637-fontScaling {
font-size: 0.875rem;
}
.a7acaedd978a9637-text-sm\/medium {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 500;
line-height: 1.2857142857142858;
}
.a7acaedd978a9637-text-sm\/medium.a7acaedd978a9637-fontScaling {
font-size: 0.875rem;
}
.a7acaedd978a9637-text-sm\/semibold {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 600;
line-height: 1.2857142857142858;
}
.a7acaedd978a9637-text-sm\/semibold.a7acaedd978a9637-fontScaling {
font-size: 0.875rem;
}
.a7acaedd978a9637-text-sm\/bold {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 700;
line-height: 1.2857142857142858;
}
.a7acaedd978a9637-text-sm\/bold.a7acaedd978a9637-fontScaling {
font-size: 0.875rem;
}
.a7acaedd978a9637-text-md\/normal {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 400;
line-height: 1.25;
}
.a7acaedd978a9637-text-md\/normal.a7acaedd978a9637-fontScaling {
font-size: 1rem;
}
.a7acaedd978a9637-text-md\/medium {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 500;
line-height: 1.25;
}
.a7acaedd978a9637-text-md\/medium.a7acaedd978a9637-fontScaling {
font-size: 1rem;
}
.a7acaedd978a9637-text-md\/semibold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 600;
line-height: 1.25;
}
.a7acaedd978a9637-text-md\/semibold.a7acaedd978a9637-fontScaling {
font-size: 1rem;
}
.a7acaedd978a9637-text-md\/bold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 700;
line-height: 1.25;
}
.a7acaedd978a9637-text-md\/bold.a7acaedd978a9637-fontScaling {
font-size: 1rem;
}
.a7acaedd978a9637-text-lg\/normal {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 400;
line-height: 1.2;
}
.a7acaedd978a9637-text-lg\/normal.a7acaedd978a9637-fontScaling {
font-size: 1.25rem;
}
.a7acaedd978a9637-text-lg\/medium {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 500;
line-height: 1.2;
}
.a7acaedd978a9637-text-lg\/medium.a7acaedd978a9637-fontScaling {
font-size: 1.25rem;
}
.a7acaedd978a9637-text-lg\/semibold {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 600;
line-height: 1.2;
}
.a7acaedd978a9637-text-lg\/semibold.a7acaedd978a9637-fontScaling {
font-size: 1.25rem;
}
.a7acaedd978a9637-text-lg\/bold {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 700;
line-height: 1.2;
}
.a7acaedd978a9637-text-lg\/bold.a7acaedd978a9637-fontScaling {
font-size: 1.25rem;
}
.a7acaedd978a9637-redesign\/message-preview\/normal {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 400;
line-height: 1.3333333333333333;
}
.a7acaedd978a9637-redesign\/message-preview\/normal.a7acaedd978a9637-fontScaling {
font-size: 0.9375rem;
}
.a7acaedd978a9637-redesign\/message-preview\/medium {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 500;
line-height: 1.3333333333333333;
}
.a7acaedd978a9637-redesign\/message-preview\/medium.a7acaedd978a9637-fontScaling {
font-size: 0.9375rem;
}
.a7acaedd978a9637-redesign\/message-preview\/semibold {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 600;
line-height: 1.3333333333333333;
}
.a7acaedd978a9637-redesign\/message-preview\/semibold.a7acaedd978a9637-fontScaling {
font-size: 0.9375rem;
}
.a7acaedd978a9637-redesign\/message-preview\/bold {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 700;
line-height: 1.3333333333333333;
}
.a7acaedd978a9637-redesign\/message-preview\/bold.a7acaedd978a9637-fontScaling {
font-size: 0.9375rem;
}
.a7acaedd978a9637-redesign\/channel-title\/normal {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 400;
line-height: 1.375;
}
.a7acaedd978a9637-redesign\/channel-title\/normal.a7acaedd978a9637-fontScaling {
font-size: 1rem;
}
.a7acaedd978a9637-redesign\/channel-title\/medium {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 500;
line-height: 1.375;
}
.a7acaedd978a9637-redesign\/channel-title\/medium.a7acaedd978a9637-fontScaling {
font-size: 1rem;
}
.a7acaedd978a9637-redesign\/channel-title\/semibold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 600;
line-height: 1.375;
}
.a7acaedd978a9637-redesign\/channel-title\/semibold.a7acaedd978a9637-fontScaling {
font-size: 1rem;
}
.a7acaedd978a9637-redesign\/channel-title\/bold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 700;
line-height: 1.375;
}
.a7acaedd978a9637-redesign\/channel-title\/bold.a7acaedd978a9637-fontScaling {
font-size: 1rem;
}
.a7acaedd978a9637-display-sm {
font-family: var(--font-headline);
font-size: 20px;
font-weight: 800;
line-height: 1;
}
.a7acaedd978a9637-display-sm.a7acaedd978a9637-fontScaling {
font-size: 1.25rem;
}
.a7acaedd978a9637-display-md {
font-family: var(--font-headline);
font-size: 34px;
font-weight: 800;
line-height: 1.0588235294117647;
}
.a7acaedd978a9637-display-md.a7acaedd978a9637-fontScaling {
font-size: 2.125rem;
}
.a7acaedd978a9637-display-lg {
font-family: var(--font-headline);
font-size: 44px;
font-weight: 800;
line-height: 0.9545454545454546;
}
.a7acaedd978a9637-display-lg.a7acaedd978a9637-fontScaling {
font-size: 2.75rem;
}
.a7acaedd978a9637-code {
font-family: var(--font-code);
font-size: 12px;
font-weight: 700;
line-height: 1.3333333333333333;
}
.a7acaedd978a9637-code.a7acaedd978a9637-fontScaling {
font-size: 0.75rem;
}
.a7acaedd978a9637-live {
padding: 0 6px;
}
.a7acaedd978a9637-liveShapeRound {
border-radius: var(--custom-live-indicator-border-radius);
}
.a7acaedd978a9637-liveShapeRoundLeft {
border-radius: var(--custom-live-indicator-border-radius) 0 0 var(--custom-live-indicator-border-radius);
}
.a7acaedd978a9637-liveShapeRoundRight {
border-radius: 0 var(--custom-live-indicator-border-radius) var(--custom-live-indicator-border-radius) 0;
}
.a7acaedd978a9637-grey {
background-color: var(--interactive-muted);
color: var(--interactive-text-default);
}
.a7acaedd978a9637-liveLarge {
font-size: 14px;
line-height: 15px;
}
.a7acaedd978a9637-liveSmall {
}
._0466635b0fbd5ad3-image {
height: 100%;
object-fit: contain;
width: 100%;
}
._0466635b0fbd5ad3-emptyPreviewContainer {
align-items: center;
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
display: flex;
flex: 1 1 auto;
flex-direction: column;
justify-content: center;
}
._0466635b0fbd5ad3-emptyPreviewImage {
background-position: 50%;
background-repeat: no-repeat;
height: 60%;
margin-bottom: 10px;
width: 80%;
}
._0466635b0fbd5ad3-emptyPreviewText {
color: var(--text-default);
}
._0466635b0fbd5ad3-noImage {
background-image: none;
}
.images-light ._0466635b0fbd5ad3-emptyPreviewImage {
background-image: url(/assets/bc689a4cf705a445.svg);
}
.images-light ._0466635b0fbd5ad3-emptyPreviewImage._0466635b0fbd5ad3-noImage {
background-image: none;
}
.images-dark ._0466635b0fbd5ad3-emptyPreviewImage {
background-image: url(/assets/6b1a461f35c05c7a.svg);
}
.images-dark ._0466635b0fbd5ad3-emptyPreviewImage._0466635b0fbd5ad3-noImage {
background-image: none;
}
.c906e8289cdf5715-clickable {
cursor: pointer;
}
.full-motion .c906e8289cdf5715-clickable .c906e8289cdf5715-icon {
transition: transform 0.15s ease-in-out;
}
.full-motion .c906e8289cdf5715-clickable:hover .c906e8289cdf5715-icon {
transform: scale(1.125);
}
.full-motion .c906e8289cdf5715-clickable:active .c906e8289cdf5715-icon {
transform: scale(0.875);
}
._39b322c2a73a9168-card,
._39b322c2a73a9168-container {
position: relative;
}
._39b322c2a73a9168-card {
background-color: var(--background-surface-highest);
border-radius: var(--radius-md);
box-shadow:
inset 0 0 0 1px var(--border-muted),
0 1px 4px 0 hsl(none 0% 0%/0.04);
box-sizing: border-box;
cursor: pointer;
display: flex;
flex-direction: column;
height: 173px;
overflow: hidden;
top: 0;
width: 133px;
}
.custom-user-profile-theme ._39b322c2a73a9168-card {
background-color: var(--user-profile-overlay-background);
}
.full-motion ._39b322c2a73a9168-card {
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
._39b322c2a73a9168-smallCard {
height: 136px;
width: 106px;
}
._39b322c2a73a9168-smallSquareCard {
height: 136px;
width: 136px;
}
._39b322c2a73a9168-largeCard {
height: 173px;
width: 133px;
}
._39b322c2a73a9168-card:focus-within,
._39b322c2a73a9168-card:hover {
transform: scale(1.025);
}
._39b322c2a73a9168-card._39b322c2a73a9168-isOwned {
cursor: default;
opacity: 0.8;
}
._39b322c2a73a9168-card._39b322c2a73a9168-isOwned:focus-within,
._39b322c2a73a9168-card._39b322c2a73a9168-isOwned:hover {
cursor: pointer;
opacity: 1;
}
._39b322c2a73a9168-cardPreview {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
overflow: hidden;
width: 100%;
}
._39b322c2a73a9168-card._39b322c2a73a9168-isOwned ._39b322c2a73a9168-cardPreview {
opacity: 0.5;
}
._39b322c2a73a9168-card._39b322c2a73a9168-isOwned:focus-within ._39b322c2a73a9168-cardPreview,
._39b322c2a73a9168-card._39b322c2a73a9168-isOwned:hover ._39b322c2a73a9168-cardPreview {
opacity: 1;
}
._39b322c2a73a9168-cardStateIconWrapper {
align-items: center;
display: flex;
inset-inline: 0;
justify-content: center;
pointer-events: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
}
._39b322c2a73a9168-cardStateIcon {
color: var(--status-positive);
filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.3));
height: 38px;
transition: opacity 0.3s ease;
width: 38px;
}
._39b322c2a73a9168-card:focus-within ._39b322c2a73a9168-checkmark,
._39b322c2a73a9168-card:hover ._39b322c2a73a9168-checkmark {
opacity: 0;
}
._39b322c2a73a9168-profileEffectPreview {
align-items: flex-start;
}
._39b322c2a73a9168-bundlePreview,
._39b322c2a73a9168-profileEffectPreview {
display: flex;
height: 100%;
justify-content: center;
width: 100%;
}
._39b322c2a73a9168-bundlePreview {
align-items: center;
transform: scale(0.65);
transform-origin: center;
}
.full-motion ._39b322c2a73a9168-bundlePreview {
transition: transform 0.2s ease;
}
._39b322c2a73a9168-card:focus-within ._39b322c2a73a9168-bundlePreview,
._39b322c2a73a9168-card:hover ._39b322c2a73a9168-bundlePreview {
transform: scale(0.65) translateY(-18px);
}
._39b322c2a73a9168-smallCard ._39b322c2a73a9168-bundlePreview,
._39b322c2a73a9168-smallSquareCard ._39b322c2a73a9168-bundlePreview {
height: 175px;
transform: scale(0.5);
width: 300px;
}
._39b322c2a73a9168-card._39b322c2a73a9168-smallCard:focus-within ._39b322c2a73a9168-bundlePreview,
._39b322c2a73a9168-card._39b322c2a73a9168-smallCard:hover ._39b322c2a73a9168-bundlePreview {
transform: scale(0.5);
}
._39b322c2a73a9168-card._39b322c2a73a9168-smallSquareCard:focus-within ._39b322c2a73a9168-bundlePreview,
._39b322c2a73a9168-card._39b322c2a73a9168-smallSquareCard:hover ._39b322c2a73a9168-bundlePreview {
transform: scale(0.5);
}
._39b322c2a73a9168-avatarDecorationPreview {
align-items: center;
display: flex;
justify-content: center;
}
.full-motion ._39b322c2a73a9168-avatarDecorationPreview {
transition: transform 0.2s ease;
}
._39b322c2a73a9168-card:focus-within ._39b322c2a73a9168-avatarDecorationPreview,
._39b322c2a73a9168-card:hover ._39b322c2a73a9168-avatarDecorationPreview {
transform: translateY(-18px);
}
._39b322c2a73a9168-card._39b322c2a73a9168-smallCard:focus-within ._39b322c2a73a9168-avatarDecorationPreview,
._39b322c2a73a9168-card._39b322c2a73a9168-smallCard:hover ._39b322c2a73a9168-avatarDecorationPreview {
transform: none;
}
._39b322c2a73a9168-card._39b322c2a73a9168-smallSquareCard:focus-within ._39b322c2a73a9168-avatarDecorationPreview,
._39b322c2a73a9168-card._39b322c2a73a9168-smallSquareCard:hover ._39b322c2a73a9168-avatarDecorationPreview {
transform: none;
}
._39b322c2a73a9168-nameplatePreview {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
position: relative;
width: 100%;
}
.full-motion ._39b322c2a73a9168-nameplatePreview {
transition: transform 0.2s ease;
}
._39b322c2a73a9168-card:focus-within ._39b322c2a73a9168-nameplatePreview,
._39b322c2a73a9168-card:hover ._39b322c2a73a9168-nameplatePreview {
transform: translateY(-18px);
}
._39b322c2a73a9168-card._39b322c2a73a9168-smallCard:focus-within ._39b322c2a73a9168-nameplatePreview,
._39b322c2a73a9168-card._39b322c2a73a9168-smallCard:hover ._39b322c2a73a9168-nameplatePreview {
transform: none;
}
._39b322c2a73a9168-card._39b322c2a73a9168-smallSquareCard:focus-within ._39b322c2a73a9168-nameplatePreview,
._39b322c2a73a9168-card._39b322c2a73a9168-smallSquareCard:hover ._39b322c2a73a9168-nameplatePreview {
transform: none;
}
._39b322c2a73a9168-nameplateTopLeft {
inset-inline-start: 33px;
position: absolute;
top: 37px;
}
._39b322c2a73a9168-nameplateBottomRight {
bottom: 33px;
inset-inline-end: 33px;
position: absolute;
}
._39b322c2a73a9168-smallCard ._39b322c2a73a9168-nameplateTopLeft {
inset-inline-start: 22px;
top: 22px;
}
._39b322c2a73a9168-smallCard ._39b322c2a73a9168-nameplateBottomRight {
bottom: 22px;
inset-inline-end: 22px;
}
._39b322c2a73a9168-smallSquareCard ._39b322c2a73a9168-nameplateTopLeft {
inset-inline-start: 22px;
top: 22px;
}
._39b322c2a73a9168-smallSquareCard ._39b322c2a73a9168-nameplateBottomRight {
bottom: 22px;
inset-inline-end: 22px;
}
._39b322c2a73a9168-removeItemButton {
align-items: center;
background: var(--background-surface-high);
border: 1px solid var(--border-muted);
border-radius: 100px;
box-shadow: var(--shadow-low);
display: flex;
inset-inline-end: -6px;
justify-content: center;
opacity: 0;
padding: 4px;
position: absolute;
top: -6px;
transition: opacity 50ms ease-in;
z-index: 10;
}
._39b322c2a73a9168-removeItemButton:after {
background-color: transparent;
border-radius: var(--radius-round);
content: "";
height: 100%;
inset-inline-start: 0;
position: absolute;
top: 0;
transition: background-color 50ms ease-in;
width: 100%;
}
._39b322c2a73a9168-removeItemButton:hover:after {
background-color: var(--opacity-red-8);
transition: background-color 0.15s ease-out;
}
._39b322c2a73a9168-removeItemButton:focus {
transition: none;
}
._39b322c2a73a9168-container:hover ._39b322c2a73a9168-removeItemButton,
._39b322c2a73a9168-removeItemButton:focus-visible,
.keyboard-mode ._39b322c2a73a9168-container:focus-within ._39b322c2a73a9168-removeItemButton {
opacity: 1;
transition: opacity 0.15s ease-out;
}
._39b322c2a73a9168-overlay {
align-items: flex-end;
bottom: 0;
display: flex;
inset-inline: 0;
justify-content: center;
opacity: 0;
padding: 12px;
position: absolute;
transition: opacity 50ms ease-in;
z-index: 5;
}
._39b322c2a73a9168-card:focus-within ._39b322c2a73a9168-overlay,
._39b322c2a73a9168-card:hover ._39b322c2a73a9168-overlay {
opacity: 1;
transition: opacity 0.15s ease-out;
}
._39b322c2a73a9168-itemIcon {
align-items: center;
display: flex;
inset-inline-end: 8px;
justify-content: center;
pointer-events: none;
position: absolute;
top: 8px;
}
._39b322c2a73a9168-itemIconHeart {
fill: var(--control-critical-primary-background-default);
}
._39b322c2a73a9168-itemIconShop {
fill: var(--icon-strong);
}
@keyframes _39b322c2a73a9168-placeholderPulse {
0% {
opacity: 0.5;
}
50% {
opacity: 1;
}
to {
opacity: 0.5;
}
}
._39b322c2a73a9168-placeholderCard {
animation: _39b322c2a73a9168-placeholderPulse 1.3s ease-in-out infinite;
}
._39b322c2a73a9168-placeholderAvatar {
opacity: 0.5;
}
._39b322c2a73a9168-seeMoreCard {
height: 173px;
width: 133px;
}
._39b322c2a73a9168-seeMoreCard._39b322c2a73a9168-smallCard {
height: 136px;
width: 105px;
}
._39b322c2a73a9168-seeMoreCard._39b322c2a73a9168-smallSquareCard {
height: 136px;
width: 136px;
}
._39b322c2a73a9168-seeMoreCard:focus-within,
._39b322c2a73a9168-seeMoreCard:hover {
transform: scale(1.025);
}
._39b322c2a73a9168-seeMoreCardPreview {
opacity: 0.5;
}
._39b322c2a73a9168-seeMoreOverlay {
align-items: center;
background-color: var(--background-scrim);
border-radius: inherit;
display: flex;
inset: 0;
justify-content: center;
pointer-events: none;
position: absolute;
z-index: 2;
}
._4772956bbfd13b77-cardContainer {
align-items: center;
background-position: 50%;
background-size: cover;
box-sizing: border-box;
display: flex;
justify-content: center;
overflow: hidden;
position: relative;
}
._4772956bbfd13b77-cardContainer._4772956bbfd13b77-square {
aspect-ratio: 1;
border-radius: var(--radius-sm);
}
._4772956bbfd13b77-cardBackgroundImage {
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
inset-inline: 0;
bottom: 0;
position: absolute;
top: 0;
}
._4772956bbfd13b77-skuImage {
border-radius: var(--radius-xs);
max-width: 100%;
object-fit: cover;
width: 100%;
z-index: 1;
}
._4772956bbfd13b77-skuImage._4772956bbfd13b77-square {
aspect-ratio: 1;
}
._20585df30caf32ab-card:focus-within ._20585df30caf32ab-cardBackgroundImage,
._20585df30caf32ab-card:hover ._20585df30caf32ab-cardBackgroundImage {
transform: scale(100%);
}
._20585df30caf32ab-card:focus-within ._20585df30caf32ab-cardImage,
._20585df30caf32ab-card:hover ._20585df30caf32ab-cardImage {
transform: scale(105%);
}
._20585df30caf32ab-card {
border-radius: none;
display: flex;
height: 100%;
width: 100%;
}
._20585df30caf32ab-cardBackgroundImage {
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
inset-inline: 0;
bottom: 0;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
transform: scale(105%);
width: 100%;
}
.full-motion ._20585df30caf32ab-cardBackgroundImage {
transition: transform 0.5s;
}
._20585df30caf32ab-cardImage {
inset-inline: 0;
bottom: 0;
height: 100%;
object-fit: cover;
object-position: center;
position: absolute;
top: 4px;
transform: scale(100%);
width: 100%;
}
.full-motion ._20585df30caf32ab-cardImage {
transition: transform 0.5s;
}
._20585df30caf32ab-itemIcon {
align-items: center;
display: flex;
inset-inline-end: 8px;
justify-content: center;
pointer-events: none;
position: absolute;
top: 8px;
z-index: 1;
}
._20585df30caf32ab-itemIconHeart {
fill: var(--control-critical-primary-background-default);
}
._20585df30caf32ab-itemIconShop {
fill: var(--icon-strong);
}
._5291b48d0754c572-container {
margin-top: 8px;
position: relative;
}
._5291b48d0754c572-contextContainer {
background-color: var(--background-surface-high);
border-radius: 12px;
color: var(--interactive-text-active);
inset-inline-end: -4px;
padding: 2px;
position: absolute;
top: -8px;
z-index: 2;
}
._5291b48d0754c572-contextContainer,
._5291b48d0754c572-contextIcon {
align-items: center;
display: flex;
justify-content: center;
}
._5291b48d0754c572-contextIcon {
height: 20px;
width: 20px;
-webkit-margin-start: -1px;
margin-inline-start: -1px;
}
._5291b48d0754c572-contextIcon,
._5291b48d0754c572-fireIcon {
margin-top: -1px;
}
._3a590bee48558ff9-container {
background: var(--background-surface-highest);
border-radius: 12px;
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
}
._3a590bee48558ff9-header {
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
}
._3a590bee48558ff9-applicationIcon {
border-radius: 4px;
height: 16px;
width: 16px;
}
._3a590bee48558ff9-items {
display: flex;
flex-direction: row;
justify-content: space-between;
}
._3a590bee48558ff9-spinner {
align-items: center;
display: flex;
height: 144px;
justify-content: center;
width: 100%;
}
._3a590bee48558ff9-contextContainer {
background-color: var(--background-surface-highest);
}
@value maxWidth: 498px;
._0800c264c81ffaff-container {
background-color: var(--background-surface-high);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-border), var(--shadow-high);
isolation: isolate;
overflow: hidden;
}
._0800c264c81ffaff-slotsContainer {
align-items: center;
display: flex;
justify-content: center;
padding: var(--custom-voice-channel-effects-bar-effect-bar-padding-y) var(--custom-voice-channel-effects-bar-effect-bar-padding-x);
width: calc(var(--custom-voice-channel-effects-bar-max-width) - var(--custom-voice-channel-effects-bar-effect-bar-padding-x) * 2);
}
._0800c264c81ffaff-slots {
display: flex;
gap: 24px;
min-width: 272px;
}
._0800c264c81ffaff-slotsWide {
gap: 30px;
}
._0800c264c81ffaff-slot {
cursor: pointer;
}
._0800c264c81ffaff-emoji {
height: 32px;
width: 32px;
}
._0800c264c81ffaff-emojiItemDisabled {
filter: grayscale(100%);
}
._0800c264c81ffaff-animatedPicker {
border-radius: 0;
box-shadow: none;
height: 0;
overflow: hidden;
top: 0;
transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
._0800c264c81ffaff-animatedPickerTall {
height: 440px;
top: 498px;
}
._0800c264c81ffaff-emojiPickerHeader {
background: var(--background-surface-high);
box-shadow: none;
padding-bottom: 4px;
padding-top: var(--space-16);
}
._0800c264c81ffaff-emojiPickerHeaderExpanded {
padding-bottom: 12px;
}
._0800c264c81ffaff-dropDownContainer {
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
._0800c264c81ffaff-dropDown {
color: var(--interactive-text-default);
cursor: pointer;
}
.full-motion ._0800c264c81ffaff-dropDown {
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
._0800c264c81ffaff-dropDown:hover {
color: var(--interactive-text-hover);
}
._0800c264c81ffaff-dropDownOpen {
transform: rotate(180deg);
}
.b2d72f296411131a-container {
align-items: center;
display: flex;
position: relative;
}
.b2d72f296411131a-iconContainer {
flex: 0 0 auto;
height: 16px;
position: relative;
width: 16px;
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
.b2d72f296411131a-icon {
color: var(--primary-300);
position: relative;
width: 100%;
}
.b2d72f296411131a-foreground,
.b2d72f296411131a-icon {
opacity: 0.6;
}
.b2d72f296411131a-avatar {
-webkit-margin-end: -4px;
margin-inline-end: -4px;
}
.b2d72f296411131a-avatarSize {
height: 20px !important;
width: 20px !important;
}
.b2d72f296411131a-emptyUser {
background: var(--primary-500);
border-radius: 50%;
height: 20px;
width: 20px;
}
.b2d72f296411131a-avatarMasked {
-webkit-mask-image: url(/assets/1f9b76e0279b91a4.svg);
mask-image: url(/assets/1f9b76e0279b91a4.svg);
-webkit-mask-position: 0 0;
mask-position: 0 0;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.b2d72f296411131a-moreUsers {
background-color: var(--primary-500);
border-radius: 10px;
color: var(--primary-300);
font-size: 12px;
font-weight: var(--font-weight-bold);
height: 20px;
line-height: 20px;
padding-block: 0;
padding-inline: 6px 8px;
position: relative;
}
.c8743fab996b0de4-noUserDrag {
-webkit-user-drag: none;
}
.c8743fab996b0de4-userSelectText {
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
}
.c8743fab996b0de4-userSelectNone {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.c8743fab996b0de4-cursorDefault {
cursor: default;
}
.c8743fab996b0de4-cursorPointer {
cursor: pointer;
}
._39b46fe686ee524a-clickable {
cursor: pointer;
}
._39b46fe686ee524a-clickable:hover > * {
text-decoration: underline;
}
._91e7a3bdd18ef718-popout {
background-color: var(--background-surface-high);
border-radius: 8px;
box-shadow: var(--shadow-border), var(--shadow-high);
padding: 0 16px;
}
.d9ba3e887bb4a544-link {
border-radius: inherit;
}
.d9ba3e887bb4a544-link:hover {
-webkit-text-decoration-color: var(--text-default);
text-decoration-color: var(--text-default);
}
.ef9ae7987ec7715e-clickable {
border-radius: inherit;
cursor: pointer;
max-width: 100%;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
}
.ef9ae7987ec7715e-clickable:hover {
text-decoration: underline;
-webkit-text-decoration-color: var(--text-default);
text-decoration-color: var(--text-default);
}
.ef9ae7987ec7715e-imagePosition {
align-items: center;
border-radius: var(--radius-xs);
display: flex;
height: -webkit-max-content;
height: -moz-max-content;
height: max-content;
overflow: visible;
position: relative;
}
.ef9ae7987ec7715e-aspectRatio {
aspect-ratio: 1/1;
}
.ef9ae7987ec7715e-aspectRatio.ef9ae7987ec7715e-crunchyroll {
aspect-ratio: 2/3;
}
.ef9ae7987ec7715e-imageContainer {
border-radius: inherit;
display: flex;
justify-content: center;
}
.ef9ae7987ec7715e-imageContainer .ef9ae7987ec7715e-contentImage {
min-width: 60px;
}
.ef9ae7987ec7715e-smallImageContainer {
align-items: center;
border-radius: var(--radius-round);
bottom: -4px;
display: flex;
flex-shrink: 0;
inset-inline-end: -4px;
justify-content: center;
position: absolute;
}
.ef9ae7987ec7715e-contentImage {
border-radius: inherit;
object-fit: cover;
}
._5b1b256298b2742e-loadingSpinner {
-webkit-margin-end: 8px;
height: 24px;
margin-inline-end: 8px;
width: 24px;
}
._3fde7e375925af75-toast {
align-items: center;
background-color: var(--background-surface-highest);
border: 1px solid var(--border-normal);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-high);
color: var(--text-strong);
display: flex;
line-height: 24px;
margin-bottom: 12px;
padding: var(--space-8) var(--space-12);
}
._3fde7e375925af75-toast[data-type="success"] {
background-color: var(--notice-background-positive);
color: var(--notice-text-positive);
}
._3fde7e375925af75-toast[data-type="failure"] {
background-color: var(--notice-background-critical);
color: var(--notice-text-critical);
}
._3fde7e375925af75-content {
color: currentColor;
}
._3fde7e375925af75-icon {
-webkit-margin-end: 8px;
height: 16px;
margin-inline-end: 8px;
margin-top: -2px;
width: 16px;
}
._3fde7e375925af75-clipIcon {
color: var(--text-strong);
}
.af3b89684c536957-popout {
filter: drop-shadow(0 8px 8px var(--opacity-black-32));
width: 348px;
}
.af3b89684c536957-hero,
.af3b89684c536957-popout {
display: flex;
flex-direction: column;
}
.af3b89684c536957-hero {
background-color: var(--background-base-lower);
border-radius: var(--radius-sm);
gap: 8px;
padding: 8px;
}
.af3b89684c536957-interactionsContainer:before {
background-color: var(--border-subtle);
content: "";
height: 1px;
position: absolute;
top: 0;
inset-inline: 16px;
}
.af3b89684c536957-interactionsContainer {
background-color: var(--background-surface-high);
border-end-end-radius: var(--radius-md);
border-end-start-radius: var(--radius-md);
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
position: relative;
}
.af3b89684c536957-replyInput {
--form-input-height: 36px;
}
.af3b89684c536957-joinPromptContainer {
display: flex;
flex-direction: row;
}
.af3b89684c536957-emojiHotrail {
align-items: center;
display: flex;
justify-content: space-between;
margin-bottom: 12px;
padding: 0 12px;
}
.af3b89684c536957-emojiSuggestionButton:hover {
cursor: pointer;
}
.af3b89684c536957-emoji {
width: 24px;
}
.af3b89684c536957-contentImage {
border-radius: var(--radius-xs);
display: block;
}
.af3b89684c536957-heroDetails {
display: flex;
gap: 8px;
justify-content: space-between;
min-width: 0;
}
.af3b89684c536957-toastContainer {
align-items: center;
inset-inline: 0;
bottom: -80px;
display: flex;
justify-content: center;
position: absolute;
}
.af3b89684c536957-emojiHotrailShareToChannel {
align-items: center;
display: flex;
justify-content: space-between;
padding: 0 12px 16px;
}
.af3b89684c536957-inputContainerShareToChannel {
align-items: center;
display: flex;
gap: 16px;
}
.af3b89684c536957-primaryActionPopoutMessageCloseIcon {
align-items: center;
display: flex;
justify-content: center;
}
.af3b89684c536957-primaryActionPopoutMessageCloseIcon:hover {
cursor: pointer;
}
.af3b89684c536957-shareToChannelButton {
align-items: center;
cursor: pointer;
display: flex;
-webkit-border-end: none;
border-inline-end: none;
-webkit-margin-end: var(--space-xs);
margin-inline-end: var(--space-xs);
}
.af3b89684c536957-attachment {
width: 100%;
}
.af3b89684c536957-attachmentContainer {
border-start-end-radius: var(--radius-md);
border-start-start-radius: var(--radius-md);
box-sizing: border-box;
margin-bottom: 1px;
padding: 16px;
width: 100%;
}
.af3b89684c536957-attachmentContainer,
.af3b89684c536957-shareToChannelInput {
background: var(--input-background-default);
}
.af3b89684c536957-shareToChannelInput {
border-radius: var(--radius-md);
display: flex;
}
.af3b89684c536957-shareToChannelInputHasAttachments {
border-start-end-radius: 0;
border-start-start-radius: 0;
}
.af3b89684c536957-popoutContentHeader {
align-items: center;
display: flex;
gap: 16px;
justify-content: space-between;
margin-bottom: 16px;
overflow: hidden;
}
.af3b89684c536957-popoutContentWrapper {
background: var(--background-surface-high);
border-start-end-radius: var(--radius-md);
border-start-start-radius: var(--radius-md);
padding: 16px;
}
.af3b89684c536957-popoutHeroInner {
align-items: center;
display: flex;
gap: 16px;
position: relative;
}
.af3b89684c536957-popoutThumbnailContainer {
min-height: 72px;
text-align: center;
width: 72px;
}
.af3b89684c536957-popoutHeroBody {
display: flex;
flex-direction: column;
overflow: hidden;
}
.af3b89684c536957-popoutHeroTextPrimary {
color: var(--content-inventory-overlay-text-primary);
}
.af3b89684c536957-popoutHeroTextPrimary.af3b89684c536957-popoutHeroTextPrimaryShort {
max-width: 156px;
}
.af3b89684c536957-popoutHeroTextSecondary {
color: var(--content-inventory-overlay-text-secondary);
}
.af3b89684c536957-popoutHeaderIcons {
inset-inline-end: 0;
position: absolute;
top: 0;
}
.af3b89684c536957-popoutUserContainer {
align-items: center;
display: flex;
flex-grow: 1;
overflow: hidden;
}
.af3b89684c536957-popoutUsernames {
overflow: hidden;
text-overflow: ellipsis;
}
.af3b89684c536957-popoutUsername {
display: inline;
}
.af3b89684c536957-streamingPopoutHeader {
align-items: center;
display: flex;
gap: 16px;
padding: 8px;
}
.af3b89684c536957-streamingPopoutHeaderText {
display: flex;
flex-direction: column;
}
.af3b89684c536957-streamingPopoutPreviewContainer {
min-height: 170px;
position: relative;
}
.af3b89684c536957-streamingPopoutImg img {
border-start-end-radius: var(--radius-sm);
border-start-start-radius: var(--radius-sm);
display: block;
}
.af3b89684c536957-voiceChannelPopoutReactorHeader {
display: flex;
justify-content: space-between;
}
.af3b89684c536957-voiceChannelPopoutReactorChannel {
align-items: center;
cursor: pointer;
display: flex;
gap: 4px;
justify-content: center;
}
.af3b89684c536957-voiceChannelPopoutReactorChannel:hover .af3b89684c536957-voiceChannelName {
text-decoration: underline;
}
.af3b89684c536957-voiceChannelGuildIcon {
border-radius: 6px;
}
.af3b89684c536957-voiceChannelAdditionalParticipants {
align-items: center;
background-color: var(--background-mod-strong);
border-radius: 8px;
display: flex;
height: 16px;
justify-content: center;
padding: 0 4px;
}
.af3b89684c536957-primaryActionPopoutDivider {
border-bottom: 1px solid var(--border-subtle);
margin: 16px 0;
width: 100%;
}
.af3b89684c536957-primaryActionPopoutActionButtons {
display: flex;
gap: 8px;
}
.af3b89684c536957-hiddenButRenderedInputField {
display: none;
}
.af3b89684c536957-popoutBlockedWarningIcon {
-webkit-margin-end: 3px;
margin-inline-end: 3px;
margin-bottom: -2px;
}
.af3b89684c536957-popoutTextPrimary {
color: var(--interactive-text-active);
}
.af3b89684c536957-popoutTextSecondary {
color: var(--interactive-text-default);
}
.af3b89684c536957-streamingPopoutHero {
border-radius: var(--radius-sm);
display: flex;
flex-direction: column;
gap: 0;
}
.af3b89684c536957-streamCTA {
align-items: center;
background: var(--background-scrim);
border-radius: 8px;
bottom: 0;
cursor: pointer;
display: flex;
position: absolute;
top: 0;
inset-inline: 0;
justify-content: center;
opacity: 0;
transition: opacity 0.1s linear;
}
.af3b89684c536957-streamCTA:hover {
opacity: 1;
}
.af3b89684c536957-maybeClickable[role="button"] {
cursor: pointer;
}
.af3b89684c536957-maybeClickable[role="button"]:focus-visible .af3b89684c536957-popoutHeroTextPrimary,
.af3b89684c536957-maybeClickable[role="button"]:focus-visible .af3b89684c536957-popoutHeroTextSecondary,
.af3b89684c536957-maybeClickable[role="button"]:focus-visible .af3b89684c536957-popoutTextPrimary,
.af3b89684c536957-maybeClickable[role="button"]:focus-visible .af3b89684c536957-popoutTextSecondary,
.af3b89684c536957-maybeClickable[role="button"]:hover .af3b89684c536957-popoutHeroTextPrimary,
.af3b89684c536957-maybeClickable[role="button"]:hover .af3b89684c536957-popoutHeroTextSecondary,
.af3b89684c536957-maybeClickable[role="button"]:hover .af3b89684c536957-popoutTextPrimary,
.af3b89684c536957-maybeClickable[role="button"]:hover .af3b89684c536957-popoutTextSecondary {
text-decoration: underline;
}
.af3b89684c536957-popoutHeaderIcons {
align-items: center;
align-self: flex-start;
display: flex;
}
.af3b89684c536957-popoutGiftingBreadcrumb {
margin-top: 16px;
padding: 16px;
}
._1692d2a40b43336c-cloudPlaySection {
justify-content: space-between;
}
._1692d2a40b43336c-cloudPlaySectionTextContainer {
align-items: center;
display: flex;
gap: 4px;
}
._264ae65bd065d5f3-container {
align-items: center;
border-radius: 32px;
display: flex;
filter: brightness(0.7);
flex-direction: column;
}
._264ae65bd065d5f3-container[role="button"] {
cursor: pointer;
}
._264ae65bd065d5f3-container[role="button"]:hover {
filter: brightness(1);
}
._667992a23302b97a-listeningTimeline {
align-items: center;
display: flex;
flex-direction: row;
gap: 9px;
justify-content: space-between;
}
._667992a23302b97a-seekBarContainer {
background-color: var(--content-inventory-media-seekbar-container);
border-radius: 2px;
height: 2px;
position: relative;
width: 100%;
}
._667992a23302b97a-seekBarFill {
background-color: var(--text-default);
border-radius: 2px;
height: 2px;
}
._667992a23302b97a-timestamp {
font-family: var(--font-code);
}
._62974be3d630b642-menuIcon {
color: var(--interactive-text-default);
cursor: pointer;
}
._62974be3d630b642-menuIcon:hover {
color: var(--interactive-text-active);
}
.bd6d20648de85ba8-icon {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
box-sizing: border-box;
flex-shrink: 0;
}
.bd6d20648de85ba8-placeholder {
background-color: var(--background-mod-subtle);
}
._921c50dc4baa4b4f-discordLogo {
background: url(/assets/bbbc3d376d38e7bc.svg) no-repeat;
display: none;
flex-shrink: 0;
height: 36px;
margin-bottom: 16px;
width: 112px;
}
._921c50dc4baa4b4f-authBox {
background-color: var(--modal-background);
border-radius: var(--radius-sm);
box-shadow: var(--legacy-elevation-high);
box-sizing: border-box;
color: var(--text-muted);
font-size: 18px;
padding: var(--custom-auth-box-auth-box-padding);
width: 480px;
}
._921c50dc4baa4b4f-authBox a {
color: var(--text-link);
}
._921c50dc4baa4b4f-authBox a:hover {
text-decoration: underline;
}
._921c50dc4baa4b4f-authBoxExpanded {
width: 784px;
}
._921c50dc4baa4b4f-centeringWrapper {
text-align: center;
width: 100%;
}
._921c50dc4baa4b4f-avatar {
margin-bottom: 24px;
}
@media (max-width: 485px) {
._921c50dc4baa4b4f-authBox {
align-items: center;
background: linear-gradient(to left bottom, #3d4046, #1e1e23);
border-radius: 0;
display: flex;
flex-direction: column;
height: 100%;
inset: 0;
overflow: scroll;
padding: 20px 16px;
position: absolute;
width: 100%;
}
._921c50dc4baa4b4f-authBox ._921c50dc4baa4b4f-discordLogo {
display: block;
}
@media (max-width: 830px) {
._921c50dc4baa4b4f-authBox._921c50dc4baa4b4f-authBoxExpanded {
max-width: unset;
}
}
._921c50dc4baa4b4f-authBox ._921c50dc4baa4b4f-centeringWrapper {
min-height: 540px;
position: relative;
}
}
@media (max-width: 830px) {
._921c50dc4baa4b4f-authBoxExpanded {
max-width: 480px;
}
}
.is-mobile ._921c50dc4baa4b4f-authBox {
align-items: center;
background: linear-gradient(to left bottom, #3d4046, #1e1e23);
border-radius: 0;
display: flex;
flex-direction: column;
height: 100%;
inset: 0;
overflow: scroll;
padding: 20px 16px;
position: absolute;
width: 100%;
}
.is-mobile ._921c50dc4baa4b4f-authBox ._921c50dc4baa4b4f-discordLogo {
display: block;
top: 16px;
}
@media (max-width: 830px) {
.is-mobile ._921c50dc4baa4b4f-authBox._921c50dc4baa4b4f-authBoxExpanded {
max-width: unset;
}
}
.is-mobile ._921c50dc4baa4b4f-authBox ._921c50dc4baa4b4f-centeringWrapper {
min-height: 540px;
position: relative;
}
._921c50dc4baa4b4f-authBox[data-theme="light"] ._921c50dc4baa4b4f-discordLogo {
background: url(/assets/34120ace1e4e4d29.svg) no-repeat;
width: 130px;
}
._921c50dc4baa4b4f-authBox[data-theme="dark"] ._921c50dc4baa4b4f-discordLogo {
background: url(/assets/bbbc3d376d38e7bc.svg) no-repeat;
width: 130px;
}
._921c50dc4baa4b4f-title {
font-weight: var(--font-weight-semibold);
}
._921c50dc4baa4b4f-subText {
color: var(--text-muted);
}
._921c50dc4baa4b4f-subText strong {
color: hsl(var(--primary-300-hsl) / 0.9);
font-weight: var(--font-weight-semibold);
}
._921c50dc4baa4b4f-pill {
align-items: center;
display: flex;
}
._921c50dc4baa4b4f-pillOnline {
-webkit-margin-end: 16px;
margin-inline-end: 16px;
}
._921c50dc4baa4b4f-pillMessage {
color: var(--text-default);
font-size: 14px;
white-space: nowrap;
}
@media (min-height: 640px) {
._921c50dc4baa4b4f-pillMessage {
font-size: 16px;
}
}
._921c50dc4baa4b4f-pillIcon {
border-radius: 50%;
display: inline-block;
height: 10px;
width: 10px;
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
._921c50dc4baa4b4f-pillIconTotal {
background-color: var(--text-default);
}
._921c50dc4baa4b4f-pillIconOnline {
background-color: var(--icon-feedback-positive);
}
._921c50dc4baa4b4f-pillFlat {
background: transparent;
}
._921c50dc4baa4b4f-pillFlat ._921c50dc4baa4b4f-pillIconTotal {
background-color: var(--text-muted);
}
._921c50dc4baa4b4f-joiningAs {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
margin-top: 20px;
}
._921c50dc4baa4b4f-joiningAsAvatar {
-webkit-margin-start: 14px;
margin-inline-start: 14px;
}
._921c50dc4baa4b4f-joiningAsUsername {
-webkit-margin-start: 5px;
margin-inline-start: 5px;
}
._921c50dc4baa4b4f-spinnerVideo {
height: 200px;
width: 200px;
}
._921c50dc4baa4b4f-image {
height: auto;
max-height: 120px;
max-width: 186px;
pointer-events: none;
width: 100%;
}
._921c50dc4baa4b4f-block {
text-align: start;
width: 100%;
}
._921c50dc4baa4b4f-button {
font-size: 16px;
line-height: 24px;
}
._921c50dc4baa4b4f-linkButton {
display: block;
padding-inline: 0;
}
._921c50dc4baa4b4f-inviteIcon {
align-items: center;
display: inline-flex;
justify-content: center;
}
._921c50dc4baa4b4f-inviteLargeIcon {
-webkit-margin-end: 0;
margin-inline-end: 0;
}
._921c50dc4baa4b4f-inviteSmallIcon {
-webkit-margin-end: 8px;
flex-shrink: 0;
margin-inline-end: 8px;
margin-top: 0;
}
._921c50dc4baa4b4f-downloadButtonSubtext {
margin-top: 8px;
text-align: center;
}
._921c50dc4baa4b4f-inputError,
._921c50dc4baa4b4f-inputError:focus,
._921c50dc4baa4b4f-inputError:hover {
border-color: var(--status-danger);
}
._921c50dc4baa4b4f-description {
font-size: 12px;
margin-top: 8px;
}
._94ab20c3000a29ab-applicationDetails {
display: flex;
flex-direction: column;
gap: 16px;
padding-top: 24px;
}
._94ab20c3000a29ab-applicationDetails._94ab20c3000a29ab-noPadding {
padding: 0;
}
._94ab20c3000a29ab-entry {
align-items: center;
display: flex;
flex-direction: row;
gap: 8px;
}
._94ab20c3000a29ab-entryIcon {
background-position: 50%;
background-repeat: no-repeat;
background-size: 16px 16px;
box-sizing: border-box;
flex-shrink: 0;
height: 16px;
width: 16px;
}
._94ab20c3000a29ab-entryIcon,
._94ab20c3000a29ab-entryInner {
color: var(--text-muted);
}
._526cc3e512bc21e7-applicationEducation {
display: flex;
flex-direction: column;
gap: 16px;
}
._526cc3e512bc21e7-applicationEducation:not(:first-child) {
padding-top: 24px;
}
._526cc3e512bc21e7-applicationEducation:not(:last-child) {
border-bottom: 1px solid var(--border-subtle);
padding-bottom: 24px;
}
._526cc3e512bc21e7-sectionLabel {
color: var(--text-default);
}
._526cc3e512bc21e7-entry {
align-items: center;
display: flex;
flex-direction: row;
gap: 12px;
}
._526cc3e512bc21e7-entryIcon {
color: var(--text-muted);
height: 20px;
width: 20px;
}
._526cc3e512bc21e7-entryText {
flex: 1;
}
._29337a0286b843ab-scopes:not(:first-child) {
padding-top: 24px;
}
._29337a0286b843ab-scopes:not(:last-child) {
border-bottom: 1px solid var(--border-subtle);
padding-bottom: 24px;
}
._29337a0286b843ab-scopes._29337a0286b843ab-noDivider:not(:last-child) {
border-bottom: none;
padding-bottom: 0;
}
._29337a0286b843ab-scope {
display: flex;
margin-top: 16px;
}
._29337a0286b843ab-scopeInner {
box-sizing: border-box;
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
}
._29337a0286b843ab-sectionLabel {
color: var(--text-default);
margin-bottom: 16px;
}
._29337a0286b843ab-fakeScopeIcon,
._29337a0286b843ab-scopeIcon {
color: var(--text-muted);
}
._29337a0286b843ab-fakeScopeIcon {
opacity: 0.6;
}
._29337a0286b843ab-icon {
height: 20px;
width: 20px;
-webkit-margin-end: 12px;
margin-inline-end: 12px;
}
._41924a9691a7ac81-botPermissions {
display: flex;
flex-direction: column;
gap: 24px;
}
._41924a9691a7ac81-botPermissions:not(:first-child) {
padding-top: 24px;
}
._41924a9691a7ac81-botPermissions:not(:last-child) {
border-bottom: 1px solid var(--border-subtle);
padding-bottom: 24px;
}
._41924a9691a7ac81-permissionsList {
display: flex;
flex-direction: column;
gap: 12px;
justify-content: space-between;
}
._41924a9691a7ac81-permission {
align-items: center;
display: flex;
flex: 2;
font-weight: var(--font-weight-medium);
margin: 16px 0 0;
}
._41924a9691a7ac81-disabledPermissionIcon {
-webkit-margin-end: 8px;
background-color: var(--status-danger);
border-radius: 10%;
box-sizing: border-box;
height: 18px;
margin-inline-end: 8px;
width: 18px;
}
._41924a9691a7ac81-icon {
color: var(--white);
height: 18px;
width: 18px;
}
.c248b6a39f5f76ed-selectorGroup:not(:first-child) {
padding-top: 24px;
}
.c248b6a39f5f76ed-selectorGroup:not(:last-child) {
border-bottom: 1px solid var(--border-subtle);
padding-bottom: 24px;
}
.c248b6a39f5f76ed-select {
align-items: center;
height: 44px;
}
.c248b6a39f5f76ed-label,
.c248b6a39f5f76ed-select {
margin-top: 8px;
}
.c248b6a39f5f76ed-sectionLabel {
color: var(--text-default);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
}
._036308083b4ebd1a-header {
align-items: center;
display: flex;
flex-direction: column;
gap: 8px;
justify-content: center;
}
._036308083b4ebd1a-currentUser {
font-weight: var(--font-weight-medium);
}
._036308083b4ebd1a-currentUserTag {
display: inline;
}
._036308083b4ebd1a-currentUserDiscriminator {
color: var(--interactive-text-default);
display: inline;
}
._036308083b4ebd1a-logoutLink {
-webkit-margin-start: 8px;
color: var(--brand-500);
margin-inline-start: 8px;
}
._036308083b4ebd1a-headerIcons {
align-items: center;
margin-bottom: 16px;
}
._036308083b4ebd1a-ellipseGroup,
._036308083b4ebd1a-headerIcons {
display: flex;
justify-content: space-between;
}
._036308083b4ebd1a-ellipseGroup {
margin: 0 24px;
}
._036308083b4ebd1a-ellipse {
background-color: var(--channel-icon);
border-radius: 50%;
height: 4px;
margin: 0 2px;
opacity: 0.1;
width: 4px;
}
._036308083b4ebd1a-botTag {
margin-top: 4px !important;
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
._036308083b4ebd1a-avatar {
border: 1px solid var(--border-subtle);
height: 64px;
width: 64px;
}
.b1c9f2f24db7d2ca-header {
align-items: center;
gap: 16px;
justify-content: center;
}
.b1c9f2f24db7d2ca-container,
.b1c9f2f24db7d2ca-header {
display: flex;
flex-direction: column;
}
.b1c9f2f24db7d2ca-container {
gap: var(--space-24);
max-width: 400px;
}
.b1c9f2f24db7d2ca-rows {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
display: grid;
grid-auto-rows: 1fr;
}
.b1c9f2f24db7d2ca-appIcon {
border-radius: var(--radius-xl);
height: 80px;
width: 80px;
}
.b1c9f2f24db7d2ca-row {
align-items: center;
background: var(--background-base-lower);
cursor: pointer;
display: flex;
-webkit-padding-start: 16px;
background-color: var(--background-surface-higher);
gap: 12px;
padding-inline-start: 16px;
}
.b1c9f2f24db7d2ca-row:hover {
background: var(--interactive-background-hover);
background-color: var(--background-surface-high);
}
.b1c9f2f24db7d2ca-row:first-child {
border-start-end-radius: 8px;
border-start-start-radius: 8px;
}
.b1c9f2f24db7d2ca-row:last-child {
border-end-end-radius: 8px;
border-end-start-radius: 8px;
}
.b1c9f2f24db7d2ca-row:not(:last-child) .b1c9f2f24db7d2ca-rowInner {
border-bottom: 1px solid var(--interactive-background-hover);
border-color: var(--border-subtle);
}
.b1c9f2f24db7d2ca-rowInner {
align-items: center;
display: flex;
flex: 1;
gap: 8px;
padding-block: 8px;
padding-inline: 0 16px;
}
.b1c9f2f24db7d2ca-rowDetails {
display: flex;
flex: 1;
flex-direction: column;
gap: 2px;
}
.b1c9f2f24db7d2ca-leftIcon {
padding: 4px;
}
.b1c9f2f24db7d2ca-leftIcon,
.b1c9f2f24db7d2ca-rightIcon {
color: var(--interactive-text-default);
}
.b1c9f2f24db7d2ca-learnMore {
margin: 16px 0;
text-align: center;
}
.b1c9f2f24db7d2ca-detailsContainer {
display: flex;
flex-direction: column;
gap: var(--custom-disclosure-spacing);
}
.b1c9f2f24db7d2ca-overviewContainerNoVideo {
background-color: unset;
border-radius: var(--radius-sm);
display: flex;
flex-direction: column;
gap: var(--space-8);
padding: var(--space-12);
}
.b1c9f2f24db7d2ca-titleContainer {
align-items: center;
display: flex;
flex-direction: row;
gap: var(--space-8);
}
.b1c9f2f24db7d2ca-partnerLabelContainer {
background-color: var(--interactive-background-active);
border-radius: var(--radius-lg);
justify-content: center;
padding: 2px var(--space-8);
}
.b1c9f2f24db7d2ca-descriptionContainer {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.b1c9f2f24db7d2ca-expandableDescriptionClickable {
cursor: pointer;
display: flex;
flex-direction: row;
gap: var(--space-4);
}
.b1c9f2f24db7d2ca-overflowHidden {
overflow: hidden;
}
._647f0f4f0ce4ffdf-oauth2PageWrapper {
align-items: center;
bottom: 0;
display: flex;
flex-direction: column;
position: absolute;
top: 0;
inset-inline: 0;
justify-content: center;
min-height: 0;
padding-bottom: 40px;
padding-top: 40px;
}
._647f0f4f0ce4ffdf-oauth2PageContent {
align-items: center;
background: var(--background-base-low);
border-radius: 12px;
box-shadow: var(--legacy-elevation-high);
display: flex;
height: auto;
max-height: calc(100% - 80px);
max-width: 480px;
min-width: 280px;
overflow: hidden;
position: relative;
width: 100%;
}
@media (max-width: 485px) {
._647f0f4f0ce4ffdf-oauth2PageWrapper {
align-items: flex-start;
padding-bottom: 0;
padding-top: 0;
}
._647f0f4f0ce4ffdf-oauth2PageContent {
border-radius: 0;
box-shadow: none;
height: 100%;
max-height: 100%;
overflow: auto;
}
}
.b766146650f2018a-wrapper {
align-items: center;
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
}
.b766146650f2018a-header {
background-position: 50%;
background-repeat: no-repeat;
display: inline-block;
}
.b766146650f2018a-text {
margin-top: 24px;
text-align: center;
}
.b766146650f2018a-authorizedSuccessSubtext {
margin-top: 16px;
max-width: 274px;
text-align: center;
}
.b766146650f2018a-cta {
margin-top: 12px;
}
.b766146650f2018a-headerSuccess {
background: url(/assets/6410595f71273140.svg) no-repeat;
height: 130px;
width: 158px;
}
.b766146650f2018a-headerFailure {
height: 92px;
width: 92px;
}
.b766146650f2018a-closeButton {
inset-inline-end: 12px;
opacity: 0.8;
position: absolute;
top: 12px;
}
.b766146650f2018a-buttonsContainer {
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 16px;
width: 100%;
}
.theme-dark .b766146650f2018a-headerFailure {
background: url(/assets/8fb262894795f907.svg) no-repeat;
}
.theme-light .b766146650f2018a-headerFailure {
background: url(/assets/b02f7cfc8ed3b51a.svg) no-repeat;
}
.b766146650f2018a-authorizedSuccessExternal {
align-items: center;
display: flex;
flex-direction: column;
gap: 24px;
text-align: center;
}
.b766146650f2018a-authorizedSuccessExternalCopy {
align-items: center;
display: flex;
flex-direction: column;
gap: 8px;
}
.b766146650f2018a-authorizedSuccessExternalIcon {
height: 86px;
width: 86px;
}
.b766146650f2018a-authorizedSuccessExternalIcon img {
height: 100%;
width: 100%;
}
.b766146650f2018a-authorizedExternalCta {
width: 100%;
}
._3d3b08df7e9aa942-authorize {
align-items: center;
background: unset;
display: flex;
flex: 1;
flex-direction: column;
gap: var(--space-24);
height: auto;
justify-content: center;
margin: 0;
width: 100%;
}
._3d3b08df7e9aa942-loadingContainer {
min-height: 270px;
}
._3d3b08df7e9aa942-spinner {
height: 240px;
inset-inline-start: 50%;
position: fixed;
top: 50%;
transform: translate(-50%, -50%);
width: 240px;
}
._3d3b08df7e9aa942-contentWrapper {
display: flex;
flex-direction: column;
gap: 16px;
}
._3d3b08df7e9aa942-content {
border-radius: 8px;
margin: 0;
padding: var(--space-32);
position: relative;
}
._3d3b08df7e9aa942-content._3d3b08df7e9aa942-noPadding {
padding: 0;
}
._3d3b08df7e9aa942-contentBackground {
background: var(--background-mod-subtle);
border: 1px solid var(--border-muted);
}
@media (max-width: 568px) {
._3d3b08df7e9aa942-content {
padding: 16px;
}
._3d3b08df7e9aa942-content._3d3b08df7e9aa942-noPadding {
padding: 0;
}
}
._3d3b08df7e9aa942-intObserver {
bottom: 24px;
height: 1px;
pointer-events: none;
position: absolute;
}
._3d3b08df7e9aa942-deepLinkContainer {
align-items: center;
background: var(--background-base-low);
border-radius: 12px;
display: flex;
flex-direction: column;
gap: 16px;
padding: 32px;
text-align: center;
width: 480px;
}
div._3d3b08df7e9aa942-mobilePushContainer {
margin: 0;
padding-top: 16px;
}
._5f4c15d3beae05df-container {
background-color: var(--background-base-low);
border-radius: var(--radius-sm);
box-shadow: var(--elevation-medium);
width: 180px;
}
._5f4c15d3beae05df-clearText {
color: var(--text-link);
}
.ccbbbb5abdaca78b-rowDivider,
.ccbbbb5abdaca78b-rowIconPlaceholder {
--custom-row-icon-size: 40px;
}
.ccbbbb5abdaca78b-appDetailsRowContainer,
.ccbbbb5abdaca78b-rowDivider {
--custom-row-padding: var(--space-12);
}
.ccbbbb5abdaca78b-loadingAnimation {
overflow: hidden;
position: relative;
}
.ccbbbb5abdaca78b-loadingAnimation:after {
background: linear-gradient(-45deg, transparent, #fff, transparent);
content: "";
height: 100%;
inset-inline-start: 0;
opacity: 0.05;
position: absolute;
top: 0;
transform: skewX(-20deg) translateX(-100%);
width: 100%;
}
.full-motion .ccbbbb5abdaca78b-loadingAnimation:after {
animation: ccbbbb5abdaca78b-shimmer 1s ease-in-out infinite;
}
.ccbbbb5abdaca78b-loadingAnimation.ccbbbb5abdaca78b-noAnimation:after {
display: none;
}
.ccbbbb5abdaca78b-loadingAnimation:nth-child(2):after {
animation-delay: 50ms;
}
.ccbbbb5abdaca78b-loadingAnimation:nth-child(3):after {
animation-delay: 0.1s;
}
.ccbbbb5abdaca78b-loadingAnimation:nth-child(4):after {
animation-delay: 0.15s;
}
.ccbbbb5abdaca78b-loadingAnimation:nth-child(5):after {
animation-delay: 0.2s;
}
.ccbbbb5abdaca78b-loadingAnimation:nth-child(6):after {
animation-delay: 0.25s;
}
.ccbbbb5abdaca78b-loadingAnimation:nth-child(7):after {
animation-delay: 0.3s;
}
.ccbbbb5abdaca78b-loadingAnimation:nth-child(8):after {
animation-delay: 0.35s;
}
.ccbbbb5abdaca78b-container {
background-color: var(--background-surface-high);
}
.ccbbbb5abdaca78b-containerBorderRadius {
border-radius: var(--radius-md);
}
.ccbbbb5abdaca78b-rowContainer:first-child {
border-start-end-radius: var(--radius-md);
border-start-start-radius: var(--radius-md);
}
.ccbbbb5abdaca78b-rowContainer:last-child {
border-end-end-radius: var(--radius-md);
border-end-start-radius: var(--radius-md);
}
.ccbbbb5abdaca78b-rowContainer:last-child .ccbbbb5abdaca78b-rowDivider {
display: none;
}
.ccbbbb5abdaca78b-rowDivider {
background-color: var(--background-mod-subtle);
bottom: 0;
height: 1px;
inset-inline: calc(var(--custom-row-padding) + var(--custom-row-icon-size) + var(--space-12)) 0;
position: absolute;
}
.theme-light .ccbbbb5abdaca78b-loadingAnimation:after {
opacity: 0.5;
}
@keyframes ccbbbb5abdaca78b-shimmer {
to {
transform: skewX(-20deg) translateX(100%);
}
}
.ccbbbb5abdaca78b-bannerImage {
background-color: var(--background-mod-subtle);
display: none;
overflow: hidden;
width: 100%;
}
.ccbbbb5abdaca78b-bannerImage.ccbbbb5abdaca78b-mediumBanner {
aspect-ratio: 3/1;
display: block;
}
.ccbbbb5abdaca78b-bannerImage.ccbbbb5abdaca78b-largeBanner {
aspect-ratio: 2/1;
display: block;
}
.ccbbbb5abdaca78b-iconPlaceholder {
--custom-app-icon-size: 38px;
background-color: var(--background-mod-subtle);
border-radius: 25%;
height: var(--custom-app-icon-size);
width: var(--custom-app-icon-size);
}
.ccbbbb5abdaca78b-rowIconPlaceholder {
height: var(--custom-row-icon-size);
width: var(--custom-row-icon-size);
}
.ccbbbb5abdaca78b-appDetailsContainer {
align-items: center;
display: flex;
flex-direction: row;
padding: var(--space-8);
}
.ccbbbb5abdaca78b-appDetailsRowContainer {
padding: var(--custom-row-padding);
}
.ccbbbb5abdaca78b-textContainer {
display: flex;
flex: 1;
flex-direction: column;
-webkit-margin-start: var(--space-12);
margin-inline-start: var(--space-12);
}
.ccbbbb5abdaca78b-textPlaceholder {
align-self: flex-start;
background-color: var(--background-mod-subtle);
border-radius: var(--radius-round);
}
.ccbbbb5abdaca78b-textPlaceholder:not(:last-child) {
margin-bottom: 4px;
}
.ccbbbb5abdaca78b-hidden {
line-height: 1;
opacity: 0;
touch-action: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.c94584907f9d5a22-contentContainer {
padding: 0 var(--space-16) var(--space-16);
}
.c94584907f9d5a22-commandListHeader {
align-items: center;
display: flex;
height: 32px;
justify-content: space-between;
margin-bottom: var(--space-8);
margin-top: var(--space-16);
}
.c94584907f9d5a22-commandContainer {
background-color: var(--background-base-lower);
border-radius: var(--radius-sm);
display: flex;
flex-direction: column;
}
.c94584907f9d5a22-commandContainer .c94584907f9d5a22-command:first-child {
border-start-end-radius: var(--radius-sm);
border-start-start-radius: var(--radius-sm);
}
.c94584907f9d5a22-commandContainer .c94584907f9d5a22-command:not(:last-child) {
border-bottom: 1px solid var(--border-subtle);
}
.c94584907f9d5a22-commandContainer .c94584907f9d5a22-command:last-child {
border-end-end-radius: var(--radius-sm);
border-end-start-radius: var(--radius-sm);
}
.c94584907f9d5a22-commandFocusBlock {
width: 100%;
}
.c94584907f9d5a22-command,
.c94584907f9d5a22-commandFocusBlock {
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.c94584907f9d5a22-command {
background-color: var(--background-base-low);
padding: var(--space-8) var(--space-12);
}
.c94584907f9d5a22-command:hover,
.keyboard-mode .c94584907f9d5a22-command:focus {
background-color: var(--interactive-background-hover);
cursor: pointer;
}
.c94584907f9d5a22-command:active {
background-color: var(--interactive-background-active);
}
.c94584907f9d5a22-commandTextContainer {
display: flex;
flex-direction: column;
flex-grow: 1;
gap: var(--space-4);
width: 1px;
-webkit-margin-end: var(--space-8);
margin-inline-end: var(--space-8);
}
.c94584907f9d5a22-commandTextContainerPlaceholder {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: 2px 0;
width: 350px;
}
._8c853e7d7725e447-clickable {
border-radius: var(--radius-round);
padding: var(--space-8);
}
.e3f97f0d3cd70794-root {
align-items: center;
border-radius: var(--radius-xs);
display: flex;
padding: 8px;
}
.e3f97f0d3cd70794-icon {
height: 24px;
width: 24px;
-webkit-margin-end: 10px;
flex-shrink: 0;
margin-inline-end: 10px;
}
.e3f97f0d3cd70794-text {
flex: 1;
text-align: start;
}
.e3f97f0d3cd70794-info {
background-color: var(--background-feedback-info);
border: 1px solid var(--icon-feedback-info);
}
.e3f97f0d3cd70794-info .e3f97f0d3cd70794-icon {
color: var(--icon-feedback-info);
}
.e3f97f0d3cd70794-warning {
background-color: var(--background-feedback-warning);
border: 1px solid var(--icon-feedback-warning);
}
.e3f97f0d3cd70794-warning .e3f97f0d3cd70794-icon {
box-sizing: border-box;
color: var(--icon-feedback-warning);
height: 20px;
width: 20px;
}
.d84e0fd1f07926c7-actionMenuButton {
background-color: var(--background-base-lower);
border-radius: var(--radius-xs);
cursor: pointer;
display: flex;
padding: var(--space-8);
}
.d84e0fd1f07926c7-actionMenuButton:hover {
background-color: var(--interactive-background-hover);
}
._50a5493e9d9cc496-authedApp {
padding: 20px;
}
._50a5493e9d9cc496-authedAppV2 {
background-color: var(--background-surface-high);
border-radius: var(--radius-sm);
margin-bottom: 16px;
overflow: hidden;
}
._50a5493e9d9cc496-authedAppV2UserSettingsRedesign {
background-color: var(--background-mod-subtle);
}
._50a5493e9d9cc496-header,
._50a5493e9d9cc496-headerV2 {
align-items: center;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
}
._50a5493e9d9cc496-headerV2 {
background-color: var(--background-mod-subtle);
padding: 16px;
}
._50a5493e9d9cc496-headerText {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._50a5493e9d9cc496-headerTextContainer {
margin: 0 8px;
overflow: hidden;
}
._50a5493e9d9cc496-headerTextContainerV2 {
margin: 0 12px;
overflow: hidden;
}
._50a5493e9d9cc496-appDetailsContainer {
padding: 4px 16px;
}
._50a5493e9d9cc496-appDetailsContainer ._50a5493e9d9cc496-appDetailsSection {
background-color: inherit;
border-bottom: 1px solid var(--border-subtle);
border-radius: 0;
margin-bottom: 0;
padding: 16px 0;
}
._50a5493e9d9cc496-appDetailsContainer ._50a5493e9d9cc496-appDetailsSection:active {
background-color: inherit;
}
._50a5493e9d9cc496-appDetailsContainer ._50a5493e9d9cc496-appDetailsSection:before {
border-radius: 0;
box-shadow: none;
}
._50a5493e9d9cc496-appDetailsContainer ._50a5493e9d9cc496-directMessagesSection {
background-color: inherit;
border-radius: 0;
margin-bottom: 0;
padding-top: 16px;
}
._50a5493e9d9cc496-appDetailsContainer ._50a5493e9d9cc496-directMessagesSection:active {
background-color: inherit;
}
._50a5493e9d9cc496-appDetailsContainer ._50a5493e9d9cc496-directMessagesSection:before {
border-radius: 0;
box-shadow: none;
}
._50a5493e9d9cc496-appDetailsSectionHeader {
align-items: center;
cursor: pointer;
display: flex;
justify-content: space-between;
}
._50a5493e9d9cc496-appDetailsContent {
padding-top: 4px;
}
._50a5493e9d9cc496-appAvatar {
border-radius: 50%;
height: 32px;
width: 32px;
-webkit-user-drag: none;
}
._50a5493e9d9cc496-appAvatarV2 {
border-radius: var(--radius-sm);
height: 40px;
width: 40px;
-webkit-user-drag: none;
border: 1px solid var(--border-subtle);
box-sizing: border-box;
}
._50a5493e9d9cc496-reportButton {
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
._50a5493e9d9cc496-botTag {
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
._50a5493e9d9cc496-permissionsDescription {
cursor: default;
}
._50a5493e9d9cc496-permission {
align-items: center;
display: flex;
margin-top: 8px;
}
._50a5493e9d9cc496-permission:first-child {
margin-top: 0;
}
._50a5493e9d9cc496-permissionCheckmark {
background: url(/assets/72e4439bf318b5c5.svg) no-repeat;
filter: saturate(var(--saturation-factor, 1));
width: 23px;
}
._50a5493e9d9cc496-disclosureIcon,
._50a5493e9d9cc496-permissionCheckmark {
background-size: 18px 18px;
display: inline-block;
height: 18px;
}
._50a5493e9d9cc496-disclosureIcon {
width: 18px;
-webkit-margin-end: 5px;
color: var(--text-muted);
margin-inline-end: 5px;
}
._50a5493e9d9cc496-deleteModalBody {
display: flex;
flex-direction: column;
gap: 16px;
}
._50a5493e9d9cc496-warningContainer {
flex-grow: 1;
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
._50a5493e9d9cc496-warningOuterContainer {
align-items: center;
display: flex;
}
._50a5493e9d9cc496-warningIcon {
height: 24px;
width: 24px;
-webkit-margin-end: 8px;
color: var(--text-muted);
margin-inline-end: 8px;
}
._50a5493e9d9cc496-searchContainer {
margin-bottom: 16px;
}
._50a5493e9d9cc496-tosPrivacy {
display: flex;
flex-direction: row;
margin-top: 8px;
}
._50a5493e9d9cc496-tos {
-webkit-margin-end: 12px;
margin-inline-end: 12px;
}
._50a5493e9d9cc496-privacy,
._50a5493e9d9cc496-tos {
display: flex;
}
._50a5493e9d9cc496-externalLinkIcon {
height: 18px;
}
._50a5493e9d9cc496-dmSettingsHeader,
._50a5493e9d9cc496-dmSettingsSwitch {
margin-bottom: 16px;
}
._50a5493e9d9cc496-dmSettingsSwitch {
border-bottom: 1px solid var(--border-subtle);
padding-bottom: 16px;
}
._50a5493e9d9cc496-dmSettingsMute {
align-items: center;
display: flex;
justify-content: space-between;
}
._50a5493e9d9cc496-divider {
display: flex;
height: 100%;
width: 1px;
-webkit-margin-end: 12px;
background-color: var(--border-subtle);
margin-inline-end: 12px;
}
._50a5493e9d9cc496-link {
color: var(--text-link);
}
._50a5493e9d9cc496-footer {
align-items: center;
display: flex;
justify-content: flex-end;
margin: 16px 0;
}
._50a5493e9d9cc496-deauthorizeButton {
flex-shrink: 0;
}
._50a5493e9d9cc496-headingCard {
display: flex;
flex-direction: column;
gap: var(--space-4);
margin-bottom: var(--space-40);
padding: var(--space-20);
}
.fd297e0eff2da25e-marginReset {
margin-bottom: 0;
margin-top: 0;
}
.fd297e0eff2da25e-marginTop4 {
margin-top: var(--custom-margin-margin-x-small);
}
.fd297e0eff2da25e-marginBottom4 {
margin-bottom: var(--custom-margin-margin-x-small);
}
.fd297e0eff2da25e-marginTop8 {
margin-top: var(--custom-margin-margin-small);
}
.fd297e0eff2da25e-marginBottom8 {
margin-bottom: var(--custom-margin-margin-small);
}
.fd297e0eff2da25e-marginTop20 {
margin-top: var(--custom-margin-margin-medium);
}
.fd297e0eff2da25e-marginBottom20 {
margin-bottom: var(--custom-margin-margin-medium);
}
.fd297e0eff2da25e-marginTop40 {
margin-top: var(--custom-margin-margin-large);
}
.fd297e0eff2da25e-marginBottom40 {
margin-bottom: var(--custom-margin-margin-large);
}
.fd297e0eff2da25e-marginTop60 {
margin-top: var(--custom-margin-margin-x-large);
}
.fd297e0eff2da25e-marginBottom60 {
margin-bottom: var(--custom-margin-margin-x-large);
}
.fd297e0eff2da25e-marginCenterHorz {
margin-inline: auto;
}
.fd297e0eff2da25e-marginLeft8 {
-webkit-margin-start: var(--custom-margin-margin-small);
margin-inline-start: var(--custom-margin-margin-small);
}
._997f690fbfff5d7d-clickable {
border-radius: var(--radius-round);
padding: var(--space-8);
}
._997f690fbfff5d7d-container {
display: flex;
flex-direction: row;
gap: var(--space-8);
}
:root {
--custom-app-launcher-sticky-header-height: 66px;
--custom-app-launcher-container-border-radius: var(--radius-sm);
}
._57d3f24138c76890-stickyContainer {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1;
}
._57d3f24138c76890-stickyBannerContainer {
height: 0;
}
._57d3f24138c76890-stickyBanner {
flex-shrink: 0;
height: var(--custom-app-launcher-sticky-header-height);
}
._57d3f24138c76890-bannerBackground {
flex-shrink: 0;
height: 106px;
}
._57d3f24138c76890-backButtonContainer {
inset-inline-start: var(--space-16);
}
._57d3f24138c76890-backButtonContainer,
._57d3f24138c76890-moreMenuButtonContainer {
cursor: pointer;
position: absolute;
top: var(--space-16);
z-index: 1;
}
._57d3f24138c76890-moreMenuButtonContainer {
inset-inline-end: var(--space-16);
}
._57d3f24138c76890-headerButton {
align-items: center;
background-color: color-mix(in oklab, var(--background-surface-highest) 50%, transparent);
display: flex;
justify-content: center;
}
._57d3f24138c76890-headerButton:hover,
.keyboard-mode ._57d3f24138c76890-headerButton:focus {
background-color: color-mix(in oklab, var(--interactive-muted) 40%, color-mix(in oklab, var(--background-surface-highest) 50%, transparent));
}
._57d3f24138c76890-headerButton:active {
background-color: color-mix(in oklab, var(--interactive-muted) 60%, color-mix(in oklab, var(--background-surface-highest) 50%, transparent));
}
._57d3f24138c76890-nameContainer {
align-content: center;
height: var(--custom-app-launcher-sticky-header-height);
inset-inline-start: 0;
justify-content: center;
position: absolute;
top: 0;
width: 100%;
}
._57d3f24138c76890-textApplicationName {
opacity: 0;
text-align: center;
}
.d806b9d3430d54a9-container {
display: grid;
grid-template-columns: 1fr;
padding: 0 16px 16px;
grid-gap: 16px;
}
.d806b9d3430d54a9-activityUrlOverride {
margin-top: 16px;
}
.d806b9d3430d54a9-searchBar {
padding: 8px;
}
._958562d63bb1e99d-container,
._958562d63bb1e99d-monetizationDisclosureContainerStyle {
--custom-disclosure-spacing: var(--space-12);
}
._958562d63bb1e99d-container {
display: flex;
flex-direction: column;
gap: var(--custom-disclosure-spacing);
padding-inline: var(--space-16);
}
._958562d63bb1e99d-videoContainer {
position: relative;
}
._958562d63bb1e99d-videoCover {
aspect-ratio: 16/9;
border-start-end-radius: var(--radius-sm);
border-start-start-radius: var(--radius-sm);
object-fit: cover;
width: 100%;
}
._958562d63bb1e99d-video {
animation: _958562d63bb1e99d-fadeIn 0.5s;
position: absolute;
}
@keyframes _958562d63bb1e99d-fadeIn {
0% {
opacity: 0;
}
to {
opacity: 1;
}
}
._958562d63bb1e99d-overviewContainerWithVideo {
background-color: var(--background-base-low);
border-end-end-radius: var(--radius-sm);
border-end-start-radius: var(--radius-sm);
display: flex;
flex-direction: column;
gap: var(--space-8);
padding: var(--space-12);
}
._958562d63bb1e99d-tabBar {
height: 29px;
}
._958562d63bb1e99d-tabBar ._958562d63bb1e99d-tabItem {
font-weight: 500;
line-height: 18px;
}
._958562d63bb1e99d-overviewContainerNoVideo {
background-color: var(--background-base-low);
border-radius: var(--radius-sm);
display: flex;
flex-direction: column;
gap: var(--space-8);
padding: var(--space-12);
}
._958562d63bb1e99d-titleContainer {
align-items: center;
display: flex;
flex-direction: row;
gap: var(--space-8);
}
._958562d63bb1e99d-partnerLabelContainer {
background-color: var(--interactive-background-active);
border-radius: var(--radius-lg);
justify-content: center;
padding: 2px var(--space-8);
}
._958562d63bb1e99d-tagsContainer {
flex-wrap: wrap;
max-height: 24px;
overflow: hidden;
}
._958562d63bb1e99d-tagContainer,
._958562d63bb1e99d-tagsContainer {
display: flex;
gap: var(--space-4);
}
._958562d63bb1e99d-tagContainer {
align-items: center;
background-color: var(--background-base-lowest);
border-radius: var(--space-4);
flex-direction: row;
padding: 2px var(--space-4);
}
._958562d63bb1e99d-descriptionContainer {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
._958562d63bb1e99d-primaryEntryPointWarningMessage {
margin-top: 4px;
}
._958562d63bb1e99d-entrypointContainer {
display: flex;
gap: 8px;
height: 48px;
margin-top: var(--space-12);
}
._958562d63bb1e99d-developerShelfControlsContainer + ._958562d63bb1e99d-entrypointContainer {
margin-top: var(--space-4);
}
._958562d63bb1e99d-experimentTitleContainer {
display: flex;
flex-direction: column;
gap: 4px;
}
._958562d63bb1e99d-expandableDescriptionClickable {
cursor: pointer;
display: flex;
flex-direction: row;
gap: var(--space-4);
}
._958562d63bb1e99d-overflowHidden {
overflow: hidden;
}
._958562d63bb1e99d-developerShelfControlsContainer {
border-top: 1px solid var(--border-subtle);
padding-top: 12px;
}
._958562d63bb1e99d-developerShelfControlsContainer:not(:last-child) {
border-bottom: 1px solid var(--border-subtle);
padding-bottom: 12px;
}
._958562d63bb1e99d-developerShelfControls {
padding: 0;
}
._958562d63bb1e99d-monetizationDisclosureContainerStyle {
align-items: center;
display: flex;
flex-direction: row;
gap: var(--custom-disclosure-spacing);
margin-bottom: 16.75px;
}
._958562d63bb1e99d-monetizationDisclosureStyle {
align-items: center;
display: flex;
flex-direction: row;
gap: var(--space-4);
}
._958562d63bb1e99d-container._958562d63bb1e99d-fixedHeight {
height: 100%;
}
:root {
--custom-app-launcher-sticky-header-height: 66px;
--custom-app-launcher-container-border-radius: var(--radius-sm);
}
._7bdb06a4e863b838-container {
display: flex;
flex-direction: column;
overflow-y: auto;
}
._7bdb06a4e863b838-appIcon,
._7bdb06a4e863b838-container {
background-color: var(--background-base-lower);
}
._7bdb06a4e863b838-appIcon {
border: var(--space-4) solid var(--background-base-lower);
border-radius: var(--radius-xl);
height: 80px;
inset-inline-start: var(--space-12);
position: absolute;
top: 0;
transform: translateY(var(--custom-app-launcher-sticky-header-height));
width: 80px;
}
.f68fcb39346403ed-brokenImageIcon {
color: var(--background-accent);
height: auto;
object-fit: contain;
width: 48px;
}
._44107ae91bae52ad-activityBadge {
background-color: var(--status-positive-background);
}
._44107ae91bae52ad-activityBadge,
._44107ae91bae52ad-activityNewBadge {
align-items: center;
box-shadow: var(--elevation-low);
display: flex;
}
._44107ae91bae52ad-activityNewBadge {
background-color: var(--background-feedback-critical);
}
._44107ae91bae52ad-activityUpdatedBadge {
align-items: center;
background-color: var(--badge-background-brand);
box-shadow: var(--elevation-low);
display: flex;
}
._44107ae91bae52ad-activityBadgeIcon {
margin-inline: -2px 2px;
}
._44107ae91bae52ad-tooltip {
text-align: center;
}
.cb32c78a53f54371-rowIcon {
--custom-row-icon-size: 40px;
}
.cb32c78a53f54371-appDetailsRowContainer,
.cb32c78a53f54371-rowDivider {
--custom-row-padding: var(--space-12);
}
.cb32c78a53f54371-container {
background-color: var(--background-surface-high);
cursor: pointer;
overflow: hidden;
}
.cb32c78a53f54371-container:hover,
.keyboard-mode .cb32c78a53f54371-container:focus {
background-color: var(--interactive-background-hover);
}
.cb32c78a53f54371-container:active {
background-color: var(--interactive-background-active);
}
.cb32c78a53f54371-containerBorderRadius {
border-radius: var(--radius-md);
}
.cb32c78a53f54371-rowContainer:first-child {
border-start-end-radius: var(--radius-md);
border-start-start-radius: var(--radius-md);
}
.cb32c78a53f54371-rowContainer:last-child {
border-end-end-radius: var(--radius-md);
border-end-start-radius: var(--radius-md);
}
.cb32c78a53f54371-rowContainer:last-child .cb32c78a53f54371-rowDivider {
display: none;
}
.cb32c78a53f54371-rowDivider {
background-color: var(--background-mod-subtle);
bottom: 0;
height: 1px;
inset-inline: 0;
position: absolute;
}
.cb32c78a53f54371-containerDisabled {
background-color: var(--background-surface-high);
cursor: not-allowed;
overflow: hidden;
}
.cb32c78a53f54371-icon {
--custom-icon-size: 38px;
height: var(--custom-icon-size);
width: var(--custom-icon-size);
}
.cb32c78a53f54371-rowIcon {
height: var(--custom-row-icon-size);
width: var(--custom-row-icon-size);
}
.cb32c78a53f54371-iconContainer {
position: relative;
}
.cb32c78a53f54371-iconCard {
--custom-icon-card-size: 48px;
height: var(--custom-icon-card-size);
width: var(--custom-icon-card-size);
}
.cb32c78a53f54371-darkenImage {
filter: brightness(0.4);
}
.cb32c78a53f54371-bannerImageContainer {
display: none;
overflow: hidden;
position: relative;
width: 100%;
}
.cb32c78a53f54371-bannerImageContainer.cb32c78a53f54371-mediumBanner {
aspect-ratio: 3/1;
display: block;
}
.cb32c78a53f54371-bannerImageContainer.cb32c78a53f54371-largeBanner {
aspect-ratio: 16/9;
display: block;
}
.cb32c78a53f54371-bannerImage {
align-items: center;
animation: cb32c78a53f54371-fadeIn 0.7s;
background-color: var(--background-surface-highest);
display: flex;
height: 100%;
justify-content: center;
object-fit: cover;
width: 100%;
}
.cb32c78a53f54371-bannerImage.cb32c78a53f54371-disableFadeIn {
animation: none;
}
.cb32c78a53f54371-bannerUpperRightContainer {
display: flex;
flex-direction: row;
gap: var(--space-4);
inset-inline-end: var(--space-8);
position: absolute;
top: var(--space-8);
}
.cb32c78a53f54371-promotedLabelWrapperBanner {
background-color: color-mix(in oklab, var(--control-secondary-background-default) 80%, transparent 20%);
border-radius: var(--radius-lg);
justify-content: center;
padding: var(--space-4) var(--space-8);
}
.cb32c78a53f54371-promotedLabelWrapperNonBanner {
align-items: center;
background-color: var(--interactive-background-active);
border-radius: var(--radius-lg);
height: 100%;
justify-content: center;
padding: 2px var(--space-4);
}
.cb32c78a53f54371-appDetailsContainer {
align-items: center;
display: flex;
flex-direction: row;
padding: var(--space-8);
position: relative;
}
.cb32c78a53f54371-appDetailsRowContainer {
padding: var(--custom-row-padding);
}
.cb32c78a53f54371-appDetails {
display: flex;
flex-direction: column;
flex-shrink: 1;
overflow: hidden;
-webkit-margin-start: var(--space-12);
margin-inline-start: var(--space-12);
}
.cb32c78a53f54371-appDetailsHeaderContainer {
align-items: center;
display: flex;
flex-direction: row;
gap: var(--space-4);
}
.cb32c78a53f54371-bannerImageChildContainer {
height: 100%;
inset-inline-start: 0;
position: absolute;
top: 0;
width: 100%;
}
.cb32c78a53f54371-activityVideoContainer,
.cb32c78a53f54371-voiceLauncherAppCardContainer {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
width: 100%;
}
.cb32c78a53f54371-activityVideoContainer {
position: absolute;
}
.cb32c78a53f54371-activityVideo {
animation: cb32c78a53f54371-fadeIn 0.5s;
height: 100%;
width: 100%;
}
.cb32c78a53f54371-activityVideo.cb32c78a53f54371-videoFadeOut {
animation: cb32c78a53f54371-fadeOut 0.5s;
animation-fill-mode: forwards;
}
.cb32c78a53f54371-activityVideo > video {
object-fit: cover !important;
}
@keyframes cb32c78a53f54371-fadeIn {
0% {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes cb32c78a53f54371-fadeOut {
0% {
opacity: 1;
}
to {
opacity: 0;
}
}
.cb32c78a53f54371-tooltipContent {
text-align: center;
}
.cb32c78a53f54371-spinner {
background-color: var(--background-scrim);
height: 100%;
inset-inline-start: 0;
margin: 0;
position: absolute;
top: 0;
width: 100%;
}
.cb32c78a53f54371-devShelfBadge,
.cb32c78a53f54371-spinner {
align-items: center;
display: flex;
justify-content: center;
}
.cb32c78a53f54371-devShelfBadge {
background-color: var(--background-mod-strong);
border-radius: 50%;
color: var(--white);
height: 22px;
width: 22px;
z-index: 1;
}
.cb32c78a53f54371-devShelfIcon {
height: 18px;
width: 18px;
}
.cb32c78a53f54371-staffBadge {
height: 20px;
width: 20px;
}
.cce1d3fce39ac93a-emptyStateContainer {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
margin-top: var(--space-8);
text-align: center;
}
.cce1d3fce39ac93a-emptyStateImage {
height: 180;
width: 180;
}
._32c75a165652a80d-header {
align-items: center;
display: flex;
justify-content: space-between;
}
._32c75a165652a80d-viewMore {
cursor: pointer;
}
._32c75a165652a80d-loadingHeader {
background-color: var(--background-mod-subtle);
border-radius: var(--radius-round);
display: flex;
}
._32c75a165652a80d-hidden {
opacity: 0;
touch-action: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
._19cf24ad0aef5ead-container {
align-items: center;
background-color: var(--background-mod-muted);
border-radius: var(--radius-lg);
display: flex;
flex-direction: row;
padding: var(--space-16);
}
._19cf24ad0aef5ead-containerPadding {
padding: 0 32px 32px;
}
._19cf24ad0aef5ead-image {
height: 80px;
width: 80px;
-webkit-margin-end: var(--space-8);
margin-inline-end: var(--space-8);
}
._19cf24ad0aef5ead-body {
flex: 1;
flex-direction: column;
-webkit-margin-end: var(--space-32);
margin-inline-end: var(--space-32);
}
._761e57435cf1c50a-icon {
--custom-app-icon-size: 40px;
}
._761e57435cf1c50a-focusBlock {
--custom-container-padding: var(--space-12);
}
._761e57435cf1c50a-clickable {
background-color: var(--background-surface-high);
cursor: pointer;
position: relative;
}
._761e57435cf1c50a-clickable:hover,
.keyboard-mode ._761e57435cf1c50a-clickable:focus {
background-color: var(--interactive-background-hover);
}
._761e57435cf1c50a-clickable:active {
background-color: var(--interactive-background-active);
}
._761e57435cf1c50a-clickable:first-child {
border-start-end-radius: var(--radius-md);
border-start-start-radius: var(--radius-md);
}
._761e57435cf1c50a-clickable:last-child {
border-end-end-radius: var(--radius-md);
border-end-start-radius: var(--radius-md);
}
._761e57435cf1c50a-clickable:last-child ._761e57435cf1c50a-underline {
display: none;
}
._761e57435cf1c50a-focusBlock {
align-items: center;
display: flex;
flex-direction: row;
overflow: hidden;
padding: var(--custom-container-padding);
}
._761e57435cf1c50a-icon {
height: var(--custom-app-icon-size);
width: var(--custom-app-icon-size);
}
._761e57435cf1c50a-cmdDetails {
display: flex;
flex-direction: column;
flex-shrink: 1;
margin-inline: var(--space-12) auto;
overflow: hidden;
}
._761e57435cf1c50a-cmdAppName {
-webkit-margin-start: var(--space-8);
margin-inline-start: var(--space-8);
white-space: nowrap;
}
._761e57435cf1c50a-underline {
background-color: var(--background-mod-subtle);
bottom: 0;
height: 1px;
inset-inline: 0;
position: absolute;
}
._1729d49b98c12c6d-iconPlaceholder,
._1729d49b98c12c6d-underline {
--custom-app-icon-size: 40px;
}
._1729d49b98c12c6d-container,
._1729d49b98c12c6d-underline {
--custom-container-padding: var(--space-12);
}
._1729d49b98c12c6d-container {
align-items: center;
background-color: var(--background-surface-high);
display: flex;
flex-direction: row;
overflow: hidden;
padding: var(--custom-container-padding);
position: relative;
}
._1729d49b98c12c6d-container:after {
background: linear-gradient(-45deg, transparent, #fff, transparent);
content: "";
height: 100%;
inset-inline-start: 0;
opacity: 0.05;
position: absolute;
top: 0;
transform: skewX(-20deg) translateX(-100%);
width: 100%;
}
.full-motion ._1729d49b98c12c6d-container:after {
animation: _1729d49b98c12c6d-shimmer 1s ease-in-out infinite;
}
._1729d49b98c12c6d-container._1729d49b98c12c6d-noAnimation:after {
display: none;
}
._1729d49b98c12c6d-container:nth-child(2):after {
animation-delay: 50ms;
}
._1729d49b98c12c6d-container:nth-child(3):after {
animation-delay: 0.1s;
}
._1729d49b98c12c6d-container:nth-child(4):after {
animation-delay: 0.15s;
}
._1729d49b98c12c6d-container:nth-child(5):after {
animation-delay: 0.2s;
}
._1729d49b98c12c6d-container:nth-child(6):after {
animation-delay: 0.25s;
}
._1729d49b98c12c6d-container:first-child {
border-start-end-radius: var(--radius-md);
border-start-start-radius: var(--radius-md);
}
._1729d49b98c12c6d-container:last-child {
border-end-end-radius: var(--radius-md);
border-end-start-radius: var(--radius-md);
}
._1729d49b98c12c6d-container:last-child ._1729d49b98c12c6d-underline {
display: none;
}
.theme-light ._1729d49b98c12c6d-container:after {
opacity: 0.5;
}
@keyframes _1729d49b98c12c6d-shimmer {
to {
transform: skewX(-20deg) translateX(100%);
}
}
._1729d49b98c12c6d-iconPlaceholder {
background-color: var(--background-mod-subtle);
border-radius: 25%;
height: var(--custom-app-icon-size);
width: var(--custom-app-icon-size);
}
._1729d49b98c12c6d-textContainer {
display: flex;
flex: 1;
flex-direction: column;
-webkit-margin-start: var(--space-12);
margin-inline-start: var(--space-12);
}
._1729d49b98c12c6d-textPlaceholder {
align-self: flex-start;
background-color: var(--background-mod-subtle);
border-radius: var(--radius-round);
}
._1729d49b98c12c6d-textPlaceholder:not(:last-child) {
margin-bottom: 4px;
}
._1729d49b98c12c6d-hidden {
line-height: 1;
opacity: 0;
touch-action: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
._1729d49b98c12c6d-underline {
background-color: var(--background-mod-subtle);
bottom: 0;
height: 1px;
inset-inline: calc(var(--custom-container-padding) + var(--custom-app-icon-size) + var(--space-12)) 0;
position: absolute;
}
.b1829502d296aaa8-sectionContentContainer {
margin-bottom: var(--space-24);
margin-top: var(--space-12);
overflow: hidden;
}
.b1829502d296aaa8-sectionActivitiesContentContainer {
display: grid;
gap: var(--space-12);
grid-template-columns: repeat(2, 1fr);
margin-bottom: var(--space-24);
margin-top: var(--space-12);
}
.b1829502d296aaa8-searchOpenAppDetailAppCard {
overflow: hidden;
}
._927fca0ac7164d54-container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
._927fca0ac7164d54-developerShelfControlsContainer > :last-child {
padding-bottom: 0;
}
._927fca0ac7164d54-developerShelfControlsLabel,
._927fca0ac7164d54-searchBarContainer {
padding: var(--space-16);
}
._927fca0ac7164d54-searchBarContainer {
flex-grow: 0;
}
._927fca0ac7164d54-scrollableContent {
display: flex;
flex: 1;
flex-direction: column;
overflow-y: auto;
padding: 0 var(--space-16) var(--space-16);
row-gap: var(--space-16);
}
._927fca0ac7164d54-sectionContentContainer {
margin-bottom: var(--space-32);
margin-top: var(--space-12);
}
._927fca0ac7164d54-sectionTwoColumnContentContainer {
display: grid;
gap: var(--space-12);
grid-template-columns: repeat(2, 1fr);
}
._927fca0ac7164d54-sectionRowsContentContainer {
display: flex;
flex-direction: column;
}
._927fca0ac7164d54-frecentList {
-moz-column-gap: var(--space-12);
column-gap: var(--space-12);
display: flex;
flex-direction: row;
}
.c3787acabdf8f60a-container {
display: flex;
flex-direction: column;
}
.c3787acabdf8f60a-header {
align-items: center;
display: grid;
grid-template-columns: 1fr auto 1fr;
justify-content: center;
margin: var(--space-16);
margin-bottom: var(--space-8);
position: relative;
}
.c3787acabdf8f60a-backButton {
-webkit-margin-end: auto;
background-color: var(--background-base-low);
margin-inline-end: auto;
}
.c3787acabdf8f60a-backButton:hover,
.keyboard-mode .c3787acabdf8f60a-backButton:focus {
background-color: var(--interactive-background-hover);
cursor: pointer;
}
.c3787acabdf8f60a-backButton:active {
background-color: var(--interactive-background-active);
}
.c3787acabdf8f60a-appGrid {
gap: var(--space-12);
grid-template-columns: repeat(2, 1fr);
}
.c3787acabdf8f60a-appGrid,
.c3787acabdf8f60a-rows {
display: grid;
margin: var(--space-8) var(--space-16);
}
.c3787acabdf8f60a-rows {
grid-template-columns: repeat(1, 1fr);
}
._9c62c6ed231468c4-drawerSizingWrapper {
flex-grow: 1;
height: 100%;
max-width: 100%;
pointer-events: all;
position: relative;
z-index: 1;
}
._9c62c6ed231468c4-contentWrapper {
background-color: var(--background-base-lower);
border-radius: var(--custom-app-launcher-container-border-radius);
box-shadow: var(--shadow-border), var(--shadow-high);
box-sizing: border-box;
display: flex;
height: 100%;
overflow: hidden;
z-index: 1;
}
._9c62c6ed231468c4-slideContent {
display: flex;
overflow: hidden;
width: 100%;
}
.enable-forced-colors ._9c62c6ed231468c4-resizeHandle {
background-color: ButtonText;
}
.enable-forced-colors ._9c62c6ed231468c4-contentWrapper {
border: 3px solid CanvasText;
}
._31a96fe07c7d9258-positionContainer {
display: flex;
height: var(--custom-app-launcher-height);
pointer-events: none;
width: var(--custom-app-launcher-width);
}
._31a96fe07c7d9258-positionLayer {
pointer-events: none;
z-index: 0;
}
._13533e3c5791980f-heading-sm\/normal {
font-family: var(--font-display);
font-size: 14px;
font-weight: 400;
line-height: 1.2857142857142858;
}
._13533e3c5791980f-heading-sm\/normal._13533e3c5791980f-fontScaling {
font-size: 0.875rem;
}
._13533e3c5791980f-heading-sm\/medium {
font-family: var(--font-display);
font-size: 14px;
font-weight: 500;
line-height: 1.2857142857142858;
}
._13533e3c5791980f-heading-sm\/medium._13533e3c5791980f-fontScaling {
font-size: 0.875rem;
}
._13533e3c5791980f-heading-sm\/semibold {
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
line-height: 1.2857142857142858;
}
._13533e3c5791980f-heading-sm\/semibold._13533e3c5791980f-fontScaling {
font-size: 0.875rem;
}
._13533e3c5791980f-heading-sm\/bold {
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
line-height: 1.2857142857142858;
}
._13533e3c5791980f-heading-sm\/bold._13533e3c5791980f-fontScaling {
font-size: 0.875rem;
}
._13533e3c5791980f-heading-sm\/extrabold {
font-family: var(--font-display);
font-size: 14px;
font-weight: 800;
line-height: 1.2857142857142858;
}
._13533e3c5791980f-heading-sm\/extrabold._13533e3c5791980f-fontScaling {
font-size: 0.875rem;
}
._13533e3c5791980f-heading-md\/normal {
font-family: var(--font-display);
font-size: 16px;
font-weight: 400;
line-height: 1.25;
}
._13533e3c5791980f-heading-md\/normal._13533e3c5791980f-fontScaling {
font-size: 1rem;
}
._13533e3c5791980f-heading-md\/medium {
font-family: var(--font-display);
font-size: 16px;
font-weight: 500;
line-height: 1.25;
}
._13533e3c5791980f-heading-md\/medium._13533e3c5791980f-fontScaling {
font-size: 1rem;
}
._13533e3c5791980f-heading-md\/semibold {
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
line-height: 1.25;
}
._13533e3c5791980f-heading-md\/semibold._13533e3c5791980f-fontScaling {
font-size: 1rem;
}
._13533e3c5791980f-heading-md\/bold {
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
line-height: 1.25;
}
._13533e3c5791980f-heading-md\/bold._13533e3c5791980f-fontScaling {
font-size: 1rem;
}
._13533e3c5791980f-heading-md\/extrabold {
font-family: var(--font-display);
font-size: 16px;
font-weight: 800;
line-height: 1.25;
}
._13533e3c5791980f-heading-md\/extrabold._13533e3c5791980f-fontScaling {
font-size: 1rem;
}
._13533e3c5791980f-heading-lg\/normal {
font-family: var(--font-display);
font-size: 20px;
font-weight: 400;
line-height: 1.2;
}
._13533e3c5791980f-heading-lg\/normal._13533e3c5791980f-fontScaling {
font-size: 1.25rem;
}
._13533e3c5791980f-heading-lg\/medium {
font-family: var(--font-display);
font-size: 20px;
font-weight: 500;
line-height: 1.2;
}
._13533e3c5791980f-heading-lg\/medium._13533e3c5791980f-fontScaling {
font-size: 1.25rem;
}
._13533e3c5791980f-heading-lg\/semibold {
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
line-height: 1.2;
}
._13533e3c5791980f-heading-lg\/semibold._13533e3c5791980f-fontScaling {
font-size: 1.25rem;
}
._13533e3c5791980f-heading-lg\/bold {
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
line-height: 1.2;
}
._13533e3c5791980f-heading-lg\/bold._13533e3c5791980f-fontScaling {
font-size: 1.25rem;
}
._13533e3c5791980f-heading-lg\/extrabold {
font-family: var(--font-display);
font-size: 20px;
font-weight: 800;
line-height: 1.2;
}
._13533e3c5791980f-heading-lg\/extrabold._13533e3c5791980f-fontScaling {
font-size: 1.25rem;
}
._13533e3c5791980f-heading-xl\/normal {
font-family: var(--font-display);
font-size: 24px;
font-weight: 400;
line-height: 1.25;
}
._13533e3c5791980f-heading-xl\/normal._13533e3c5791980f-fontScaling {
font-size: 1.5rem;
}
._13533e3c5791980f-heading-xl\/medium {
font-family: var(--font-display);
font-size: 24px;
font-weight: 500;
line-height: 1.25;
}
._13533e3c5791980f-heading-xl\/medium._13533e3c5791980f-fontScaling {
font-size: 1.5rem;
}
._13533e3c5791980f-heading-xl\/semibold {
font-family: var(--font-display);
font-size: 24px;
font-weight: 600;
line-height: 1.25;
}
._13533e3c5791980f-heading-xl\/semibold._13533e3c5791980f-fontScaling {
font-size: 1.5rem;
}
._13533e3c5791980f-heading-xl\/bold {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
line-height: 1.25;
}
._13533e3c5791980f-heading-xl\/bold._13533e3c5791980f-fontScaling {
font-size: 1.5rem;
}
._13533e3c5791980f-heading-xl\/extrabold {
font-family: var(--font-display);
font-size: 24px;
font-weight: 800;
line-height: 1.25;
}
._13533e3c5791980f-heading-xl\/extrabold._13533e3c5791980f-fontScaling {
font-size: 1.5rem;
}
._13533e3c5791980f-heading-xxl\/normal {
font-family: var(--font-display);
font-size: 32px;
font-weight: 400;
line-height: 1.25;
}
._13533e3c5791980f-heading-xxl\/normal._13533e3c5791980f-fontScaling {
font-size: 2rem;
}
._13533e3c5791980f-heading-xxl\/medium {
font-family: var(--font-display);
font-size: 32px;
font-weight: 500;
line-height: 1.25;
}
._13533e3c5791980f-heading-xxl\/medium._13533e3c5791980f-fontScaling {
font-size: 2rem;
}
._13533e3c5791980f-heading-xxl\/semibold {
font-family: var(--font-display);
font-size: 32px;
font-weight: 600;
line-height: 1.25;
}
._13533e3c5791980f-heading-xxl\/semibold._13533e3c5791980f-fontScaling {
font-size: 2rem;
}
._13533e3c5791980f-heading-xxl\/bold {
font-family: var(--font-display);
font-size: 32px;
font-weight: 700;
line-height: 1.25;
}
._13533e3c5791980f-heading-xxl\/bold._13533e3c5791980f-fontScaling {
font-size: 2rem;
}
._13533e3c5791980f-heading-xxl\/extrabold {
font-family: var(--font-display);
font-size: 32px;
font-weight: 800;
line-height: 1.25;
}
._13533e3c5791980f-heading-xxl\/extrabold._13533e3c5791980f-fontScaling {
font-size: 2rem;
}
._13533e3c5791980f-eyebrow {
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.3333333333333333;
text-transform: uppercase;
}
._13533e3c5791980f-eyebrow._13533e3c5791980f-fontScaling {
font-size: 0.75rem;
}
._13533e3c5791980f-heading-deprecated-12\/normal {
font-family: var(--font-display);
font-size: 12px;
font-weight: 400;
line-height: 1.3333333333333333;
}
._13533e3c5791980f-heading-deprecated-12\/normal._13533e3c5791980f-fontScaling {
font-size: 0.75rem;
}
._13533e3c5791980f-heading-deprecated-12\/medium {
font-family: var(--font-display);
font-size: 12px;
font-weight: 500;
line-height: 1.3333333333333333;
}
._13533e3c5791980f-heading-deprecated-12\/medium._13533e3c5791980f-fontScaling {
font-size: 0.75rem;
}
._13533e3c5791980f-heading-deprecated-12\/semibold {
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
line-height: 1.3333333333333333;
}
._13533e3c5791980f-heading-deprecated-12\/semibold._13533e3c5791980f-fontScaling {
font-size: 0.75rem;
}
._13533e3c5791980f-heading-deprecated-12\/bold {
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
line-height: 1.3333333333333333;
}
._13533e3c5791980f-heading-deprecated-12\/bold._13533e3c5791980f-fontScaling {
font-size: 0.75rem;
}
._13533e3c5791980f-heading-deprecated-12\/extrabold {
font-family: var(--font-display);
font-size: 12px;
font-weight: 800;
line-height: 1.3333333333333333;
}
._13533e3c5791980f-heading-deprecated-12\/extrabold._13533e3c5791980f-fontScaling {
font-size: 0.75rem;
}
._13533e3c5791980f-redesign\/heading-18\/bold {
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
line-height: 1.3333333333333333;
}
._13533e3c5791980f-redesign\/heading-18\/bold._13533e3c5791980f-fontScaling {
font-size: 1.125rem;
}
._13533e3c5791980f-text-xxs\/normal {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 400;
line-height: 1.2;
}
._13533e3c5791980f-text-xxs\/normal._13533e3c5791980f-fontScaling {
font-size: 0.625rem;
}
._13533e3c5791980f-text-xxs\/medium {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 500;
line-height: 1.2;
}
._13533e3c5791980f-text-xxs\/medium._13533e3c5791980f-fontScaling {
font-size: 0.625rem;
}
._13533e3c5791980f-text-xxs\/semibold {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 600;
line-height: 1.2;
}
._13533e3c5791980f-text-xxs\/semibold._13533e3c5791980f-fontScaling {
font-size: 0.625rem;
}
._13533e3c5791980f-text-xxs\/bold {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 700;
line-height: 1.2;
}
._13533e3c5791980f-text-xxs\/bold._13533e3c5791980f-fontScaling {
font-size: 0.625rem;
}
._13533e3c5791980f-text-xs\/normal {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 400;
line-height: 1.3333333333333333;
}
._13533e3c5791980f-text-xs\/normal._13533e3c5791980f-fontScaling {
font-size: 0.75rem;
}
._13533e3c5791980f-text-xs\/medium {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 500;
line-height: 1.3333333333333333;
}
._13533e3c5791980f-text-xs\/medium._13533e3c5791980f-fontScaling {
font-size: 0.75rem;
}
._13533e3c5791980f-text-xs\/semibold {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 600;
line-height: 1.3333333333333333;
}
._13533e3c5791980f-text-xs\/semibold._13533e3c5791980f-fontScaling {
font-size: 0.75rem;
}
._13533e3c5791980f-text-xs\/bold {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 700;
line-height: 1.3333333333333333;
}
._13533e3c5791980f-text-xs\/bold._13533e3c5791980f-fontScaling {
font-size: 0.75rem;
}
._13533e3c5791980f-text-sm\/normal {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 400;
line-height: 1.2857142857142858;
}
._13533e3c5791980f-text-sm\/normal._13533e3c5791980f-fontScaling {
font-size: 0.875rem;
}
._13533e3c5791980f-text-sm\/medium {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 500;
line-height: 1.2857142857142858;
}
._13533e3c5791980f-text-sm\/medium._13533e3c5791980f-fontScaling {
font-size: 0.875rem;
}
._13533e3c5791980f-text-sm\/semibold {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 600;
line-height: 1.2857142857142858;
}
._13533e3c5791980f-text-sm\/semibold._13533e3c5791980f-fontScaling {
font-size: 0.875rem;
}
._13533e3c5791980f-text-sm\/bold {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 700;
line-height: 1.2857142857142858;
}
._13533e3c5791980f-text-sm\/bold._13533e3c5791980f-fontScaling {
font-size: 0.875rem;
}
._13533e3c5791980f-text-md\/normal {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 400;
line-height: 1.25;
}
._13533e3c5791980f-text-md\/normal._13533e3c5791980f-fontScaling {
font-size: 1rem;
}
._13533e3c5791980f-text-md\/medium {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 500;
line-height: 1.25;
}
._13533e3c5791980f-text-md\/medium._13533e3c5791980f-fontScaling {
font-size: 1rem;
}
._13533e3c5791980f-text-md\/semibold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 600;
line-height: 1.25;
}
._13533e3c5791980f-text-md\/semibold._13533e3c5791980f-fontScaling {
font-size: 1rem;
}
._13533e3c5791980f-text-md\/bold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 700;
line-height: 1.25;
}
._13533e3c5791980f-text-md\/bold._13533e3c5791980f-fontScaling {
font-size: 1rem;
}
._13533e3c5791980f-text-lg\/normal {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 400;
line-height: 1.2;
}
._13533e3c5791980f-text-lg\/normal._13533e3c5791980f-fontScaling {
font-size: 1.25rem;
}
._13533e3c5791980f-text-lg\/medium {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 500;
line-height: 1.2;
}
._13533e3c5791980f-text-lg\/medium._13533e3c5791980f-fontScaling {
font-size: 1.25rem;
}
._13533e3c5791980f-text-lg\/semibold {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 600;
line-height: 1.2;
}
._13533e3c5791980f-text-lg\/semibold._13533e3c5791980f-fontScaling {
font-size: 1.25rem;
}
._13533e3c5791980f-text-lg\/bold {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 700;
line-height: 1.2;
}
._13533e3c5791980f-text-lg\/bold._13533e3c5791980f-fontScaling {
font-size: 1.25rem;
}
._13533e3c5791980f-redesign\/message-preview\/normal {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 400;
line-height: 1.3333333333333333;
}
._13533e3c5791980f-redesign\/message-preview\/normal._13533e3c5791980f-fontScaling {
font-size: 0.9375rem;
}
._13533e3c5791980f-redesign\/message-preview\/medium {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 500;
line-height: 1.3333333333333333;
}
._13533e3c5791980f-redesign\/message-preview\/medium._13533e3c5791980f-fontScaling {
font-size: 0.9375rem;
}
._13533e3c5791980f-redesign\/message-preview\/semibold {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 600;
line-height: 1.3333333333333333;
}
._13533e3c5791980f-redesign\/message-preview\/semibold._13533e3c5791980f-fontScaling {
font-size: 0.9375rem;
}
._13533e3c5791980f-redesign\/message-preview\/bold {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 700;
line-height: 1.3333333333333333;
}
._13533e3c5791980f-redesign\/message-preview\/bold._13533e3c5791980f-fontScaling {
font-size: 0.9375rem;
}
._13533e3c5791980f-redesign\/channel-title\/normal {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 400;
line-height: 1.375;
}
._13533e3c5791980f-redesign\/channel-title\/normal._13533e3c5791980f-fontScaling {
font-size: 1rem;
}
._13533e3c5791980f-redesign\/channel-title\/medium {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 500;
line-height: 1.375;
}
._13533e3c5791980f-redesign\/channel-title\/medium._13533e3c5791980f-fontScaling {
font-size: 1rem;
}
._13533e3c5791980f-redesign\/channel-title\/semibold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 600;
line-height: 1.375;
}
._13533e3c5791980f-redesign\/channel-title\/semibold._13533e3c5791980f-fontScaling {
font-size: 1rem;
}
._13533e3c5791980f-redesign\/channel-title\/bold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 700;
line-height: 1.375;
}
._13533e3c5791980f-redesign\/channel-title\/bold._13533e3c5791980f-fontScaling {
font-size: 1rem;
}
._13533e3c5791980f-display-sm {
font-family: var(--font-headline);
font-size: 20px;
font-weight: 800;
line-height: 1;
}
._13533e3c5791980f-display-sm._13533e3c5791980f-fontScaling {
font-size: 1.25rem;
}
._13533e3c5791980f-display-md {
font-family: var(--font-headline);
font-size: 34px;
font-weight: 800;
line-height: 1.0588235294117647;
}
._13533e3c5791980f-display-md._13533e3c5791980f-fontScaling {
font-size: 2.125rem;
}
._13533e3c5791980f-display-lg {
font-family: var(--font-headline);
font-size: 44px;
font-weight: 800;
line-height: 0.9545454545454546;
}
._13533e3c5791980f-display-lg._13533e3c5791980f-fontScaling {
font-size: 2.75rem;
}
._13533e3c5791980f-code {
font-family: var(--font-code);
font-size: 12px;
font-weight: 700;
line-height: 1.3333333333333333;
}
._13533e3c5791980f-code._13533e3c5791980f-fontScaling {
font-size: 0.75rem;
}
._13533e3c5791980f-autocomplete {
background-color: var(--background-surface-high);
border-radius: 5px 5px 0 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
z-index: 3;
}
._13533e3c5791980f-autocompleteInner {
padding-bottom: 8px;
}
._13533e3c5791980f-autocompleteRow {
font-size: 14px;
font-weight: var(--font-weight-medium);
line-height: 16px;
padding: 0 8px;
}
._13533e3c5791980f-autocompleteRowVertical {
}
._13533e3c5791980f-autocompleteRowHorizontal {
padding: 0;
}
._13533e3c5791980f-autocompleteRowContent {
align-items: center;
color: var(--interactive-text-default);
display: flex;
min-height: 16px;
}
._13533e3c5791980f-autocompleteRowContentPrimary {
flex-grow: 0;
flex-shrink: 1;
min-width: 10ch;
overflow: hidden;
}
._13533e3c5791980f-autocompleteRowIcon {
flex: 0 0 auto;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
._13533e3c5791980f-autocompleteRowHeading {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._13533e3c5791980f-autocompleteRowSubheading {
margin-top: 2px;
}
._13533e3c5791980f-autocompleteRowContentSecondary {
flex-basis: 10ch;
flex-grow: 1;
flex-shrink: 0;
min-width: 10ch;
-webkit-margin-start: var(--space-16);
margin-inline-start: var(--space-16);
overflow: hidden;
text-align: end;
text-overflow: ellipsis;
white-space: nowrap;
}
._13533e3c5791980f-base {
border-radius: 3px;
padding: 8px;
}
._13533e3c5791980f-clickable[aria-disabled="false"] > ._13533e3c5791980f-base {
cursor: pointer;
}
._13533e3c5791980f-clickable[aria-disabled="false"] > ._13533e3c5791980f-base:hover,
._13533e3c5791980f-clickable[aria-selected="true"] > ._13533e3c5791980f-base {
background-color: var(--interactive-background-hover);
}
._13533e3c5791980f-dividerContainer ._13533e3c5791980f-base {
padding-bottom: 0;
padding-top: 0;
}
._13533e3c5791980f-divider {
padding: 8px;
}
._13533e3c5791980f-divider:after {
background-color: var(--border-subtle);
content: "";
display: block;
height: 1px;
width: 100%;
}
._13533e3c5791980f-contentTitle {
color: var(--interactive-text-default);
padding: 4px 0;
text-transform: uppercase;
}
._13533e3c5791980f-contentTitle strong {
color: var(--text-subtle);
text-transform: none;
}
._13533e3c5791980f-icon {
color: var(--interactive-text-default);
height: 16px;
object-fit: contain;
width: 16px;
}
._13533e3c5791980f-iconForeground {
fill: var(--interactive-text-default);
}
._13533e3c5791980f-emojiImage {
height: 20px;
object-fit: contain;
width: 20px;
}
._13533e3c5791980f-emojiRaw {
display: block;
font-size: 20px;
}
._13533e3c5791980f-descriptionDiscriminator {
opacity: 0.6;
}
._13533e3c5791980f-autocompleteRowVerticalSmall ._13533e3c5791980f-base {
padding: 4px 8px;
}
._13533e3c5791980f-roleDot {
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
._13533e3c5791980f-autocompletePlaceholder {
background: var(--background-base-low);
border-radius: 16px;
height: 16px;
margin-top: 8px;
}
._13533e3c5791980f-autocompleteContentWrapper {
display: flex;
flex-grow: 1;
gap: var(--space-16);
}
._13533e3c5791980f-autoCompleteRowSuggestion {
}
._13533e3c5791980f-autoCompleteRowSuggestion ._13533e3c5791980f-base {
border-radius: 0;
padding: var(--space-12);
}
._13533e3c5791980f-autoCompleteRowSuggestion ._13533e3c5791980f-autocompleteRowContentPrimary {
min-width: 12ch;
}
._13533e3c5791980f-autoCompleteRowSuggestion ._13533e3c5791980f-autocompleteContentWrapper {
align-items: baseline;
gap: var(--space-8);
-webkit-margin-end: var(--space-16);
margin-inline-end: var(--space-16);
}
._13533e3c5791980f-autoCompleteRowSuggestion ._13533e3c5791980f-autocompleteRowContentSecondary {
text-align: start;
-webkit-margin-start: 0;
flex-basis: auto;
margin-inline-start: 0;
min-width: 0;
}
._13533e3c5791980f-autoCompleteRowSuggestion ._13533e3c5791980f-keyComboContainer {
display: flex;
justify-content: flex-end;
min-width: 3em;
}
._13533e3c5791980f-autoCompleteRowSuggestion ._13533e3c5791980f-verticalLayout ._13533e3c5791980f-autocompleteContentWrapper {
flex-direction: column;
gap: 0;
}
._13533e3c5791980f-autoCompleteRowSuggestion ._13533e3c5791980f-verticalLayout ._13533e3c5791980f-autocompleteRowContentPrimary {
composes: text-xs\/medium;
}
._13533e3c5791980f-autoCompleteRowSuggestion ._13533e3c5791980f-verticalLayout ._13533e3c5791980f-autocompleteRowContentSecondary {
composes: text-xxs\/medium;
flex-basis: auto;
}
.enable-forced-colors ._13533e3c5791980f-autocomplete {
border: 2px solid CanvasText;
}
.enable-forced-colors ._13533e3c5791980f-clickable[aria-selected="true"] > ._13533e3c5791980f-base {
outline: 2px solid Highlight;
outline-offset: Highlight;
}
.enable-forced-colors ._13533e3c5791980f-descriptionDiscriminator {
opacity: 1;
}
.a195358c0257a1b0-option {
border-radius: 4px;
display: block;
font-weight: var(--font-weight-normal);
padding: 0 4px;
}
.theme-light .a195358c0257a1b0-option {
background-color: var(--primary-300);
}
.theme-dark .a195358c0257a1b0-option {
background-color: var(--primary-800);
}
.a195358c0257a1b0-inline {
-webkit-margin-end: 4px;
margin-inline-end: 4px;
padding-bottom: 1px;
}
.a195358c0257a1b0-set {
opacity: 0.5;
}
.a195358c0257a1b0-error {
color: var(--status-danger);
}
.a195358c0257a1b0-active {
background-color: var(--brand-500) !important;
color: var(--white);
}
.a195358c0257a1b0-clickable {
cursor: pointer;
}
.ca5f52b68137f12b-mask {
display: block;
}
.ca5f52b68137f12b-icon {
height: 32px;
width: 32px;
}
.ca5f52b68137f12b-wrapper {
border-radius: 8px;
transition: background-color 0.1s ease-in-out;
}
.ca5f52b68137f12b-selectable:hover {
background-color: var(--interactive-background-hover);
}
.ca5f52b68137f12b-selectable:hover .ca5f52b68137f12b-icon {
color: var(--interactive-text-hover);
}
.ca5f52b68137f12b-selected,
.ca5f52b68137f12b-selected:hover {
background-color: var(--background-base-low);
}
.ca5f52b68137f12b-selected .ca5f52b68137f12b-icon,
.ca5f52b68137f12b-selected:hover .ca5f52b68137f12b-icon {
color: var(--interactive-text-active);
}
.theme-light .ca5f52b68137f12b-selected .ca5f52b68137f12b-icon,
.theme-light .ca5f52b68137f12b-selected:hover .ca5f52b68137f12b-icon {
color: var(--primary-500);
}
._1a58aeaaf7cc4963-icon {
color: var(--interactive-text-default);
}
._1a58aeaaf7cc4963-wrapper {
border-radius: 8px;
transition: background-color 0.1s ease-in-out;
}
._1a58aeaaf7cc4963-selectable:hover {
background-color: var(--interactive-background-hover);
}
._1a58aeaaf7cc4963-selectable:hover ._1a58aeaaf7cc4963-icon {
color: var(--interactive-text-hover);
}
._1a58aeaaf7cc4963-selected,
._1a58aeaaf7cc4963-selected:hover {
background-color: var(--background-base-low);
}
._1a58aeaaf7cc4963-selected ._1a58aeaaf7cc4963-icon,
._1a58aeaaf7cc4963-selected:hover ._1a58aeaaf7cc4963-icon {
color: var(--interactive-text-active);
}
.theme-light ._1a58aeaaf7cc4963-selected ._1a58aeaaf7cc4963-icon,
.theme-light ._1a58aeaaf7cc4963-selected:hover ._1a58aeaaf7cc4963-icon {
color: var(--primary-500);
}
._920abe02ba8772be-wrapper {
align-items: center;
display: flex;
flex-direction: row;
height: 40px;
}
._920abe02ba8772be-image {
align-self: flex-start;
justify-self: flex-start;
margin-top: 4px;
-webkit-margin-end: 16px;
flex-grow: 0;
flex-shrink: 0;
margin-inline-end: 16px;
}
._920abe02ba8772be-infoWrapper {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: hidden;
}
._920abe02ba8772be-source {
-webkit-margin-start: 16px;
flex-grow: 0;
flex-shrink: 0;
margin-inline-start: 16px;
max-width: 33%;
overflow: hidden;
text-overflow: ellipsis;
}
._920abe02ba8772be-usageWrapper {
align-items: center;
display: flex;
flex-direction: row;
}
._920abe02ba8772be-description {
margin-top: 4px;
white-space: nowrap;
}
._920abe02ba8772be-description,
._920abe02ba8772be-title {
overflow: hidden;
text-overflow: ellipsis;
}
._920abe02ba8772be-title {
flex-shrink: 0;
font-weight: var(--font-weight-medium);
}
._920abe02ba8772be-option {
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
._920abe02ba8772be-error {
color: var(--status-danger);
}
._920abe02ba8772be-optionalHeader {
color: var(--text-muted);
text-transform: uppercase;
}
._920abe02ba8772be-optionalCount,
._920abe02ba8772be-optionalHeader {
-webkit-padding-start: 8px;
padding-inline-start: 8px;
}
._920abe02ba8772be-disabled {
opacity: 0.3;
}
._920abe02ba8772be-optionals {
align-items: center;
display: flex;
flex-direction: row;
-webkit-border-start: 1px solid var(--border-subtle);
border-inline-start: 1px solid var(--border-subtle);
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
._920abe02ba8772be-optionalNames {
display: flex;
flex-direction: column;
}
._78aa303169d3d592-wrapper {
align-items: center;
display: flex;
flex-direction: row;
height: 40px;
justify-content: space-between;
padding: 8px;
}
._78aa303169d3d592-infoWrapper {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow: hidden;
}
._78aa303169d3d592-usageWrapper {
align-items: center;
background: var(--background-accent);
border-radius: 16px;
display: flex;
flex-direction: row;
flex-grow: 1;
height: 16px;
}
._78aa303169d3d592-image {
align-self: flex-start;
border-radius: 50%;
flex-grow: 0;
flex-shrink: 0;
height: 32px;
justify-self: flex-start;
margin-top: 4px;
width: 32px;
-webkit-margin-end: 16px;
background: var(--background-base-low);
margin-inline-end: 16px;
}
._78aa303169d3d592-description {
margin-top: 8px;
}
._78aa303169d3d592-description,
._78aa303169d3d592-source {
background: var(--background-base-low);
border-radius: 16px;
height: 16px;
}
._78aa303169d3d592-source {
-webkit-margin-start: 16px;
flex-shrink: 0;
margin-inline-start: 16px;
}
._980441be4289e4aa-upsell {
margin-bottom: -4px;
margin-top: -4px;
}
._980441be4289e4aa-emojis {
display: flex;
}
._980441be4289e4aa-emojiMask {
position: relative;
}
._980441be4289e4aa-emojiBackground {
align-items: center;
background-color: var(--background-base-lowest);
border-radius: 50%;
display: flex;
height: 24px;
justify-content: center;
width: 24px;
}
._980441be4289e4aa-emoji {
height: 16px;
width: 16px;
}
.b1e4f3fb96801b99-wrapper {
background-color: var(--background-base-lowest);
margin-bottom: -16px;
padding-bottom: 8px;
width: 48px;
}
.b1e4f3fb96801b99-list {
background: none;
height: 100%;
}
.b1e4f3fb96801b99-section {
border-radius: 4px;
cursor: pointer;
margin-bottom: 8px;
}
.b1e4f3fb96801b99-section:last-child {
margin-bottom: 0;
}
.b1e4f3fb96801b99-builtInSeparator {
border: none;
border-bottom: 1px solid var(--border-subtle);
border-color: var(--border-subtle);
margin: 8px 0;
}
.d1405bf11dcfb07a-outerWrapper {
border-radius: 5px;
box-shadow: var(--shadow-border), var(--shadow-high);
inset-inline: 0 var(--space-8);
bottom: calc(100% + 8px);
overflow: hidden;
position: absolute;
}
.d1405bf11dcfb07a-wrapper {
display: flex;
flex-direction: row;
height: 420px;
padding-bottom: 0;
}
.d1405bf11dcfb07a-noSearchResults {
height: 340px;
}
.d1405bf11dcfb07a-list {
height: 100%;
}
.d1405bf11dcfb07a-rail {
align-self: stretch;
flex-grow: 0;
flex-shrink: 0;
}
.d1405bf11dcfb07a-content {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.d1405bf11dcfb07a-categoryHeader {
background-color: var(--background-surface-high);
padding: 0 8px;
position: -webkit-sticky;
position: sticky;
top: 0;
}
.d1405bf11dcfb07a-categorySection {
margin-bottom: 16px;
}
.d1405bf11dcfb07a-categorySectionLast {
margin-bottom: 0;
}
.d1405bf11dcfb07a-itemWrapper {
padding: 0;
}
._1464f16f3e3c14a9-inlineElement {
display: inline-block;
}
._1464f16f3e3c14a9-inlineVoid {
cursor: default;
}
._1464f16f3e3c14a9-inlineVoid .mention {
padding-bottom: 1px;
}
._1464f16f3e3c14a9-applicationCommand {
display: flex;
flex-wrap: wrap;
-webkit-margin-start: -4px;
margin-inline-start: -4px;
margin-bottom: -4px;
margin-top: -8px;
}
._1464f16f3e3c14a9-applicationCommand > [data-slate-node="text"] > * {
display: inline-block;
padding-top: 8px;
}
._1464f16f3e3c14a9-applicationCommand > [data-slate-node="text"]:not(:first-child) > :first-child {
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
._1464f16f3e3c14a9-applicationCommand > [data-slate-node="text"]:not(:first-child) > :first-child._1464f16f3e3c14a9-emptyText {
-webkit-margin-start: 2px;
margin-inline-start: 2px;
}
._1464f16f3e3c14a9-applicationCommand > [data-slate-node="text"]:not(:last-child) > :last-child {
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
._1464f16f3e3c14a9-applicationCommand > [data-slate-node="text"]:not(:last-child) > :last-child._1464f16f3e3c14a9-emptyText {
-webkit-margin-end: 2px;
margin-inline-end: 2px;
}
._1464f16f3e3c14a9-applicationCommand:after {
flex: 1;
-webkit-padding-start: 4px;
color: var(--text-muted);
content: attr(data-trailing-placeholder);
padding-inline-start: 4px;
padding-top: 8px;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
white-space: nowrap;
}
._1464f16f3e3c14a9-applicationCommand > [data-slate-node="text"] > *,
._1464f16f3e3c14a9-optionPillValue > [data-slate-node="text"] > * {
min-width: 4px;
}
._1464f16f3e3c14a9-commandName {
font-weight: var(--font-weight-semibold);
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
._1464f16f3e3c14a9-optionPill {
align-self: flex-start;
border: 1px solid transparent;
border-radius: 4px;
display: flex;
justify-content: flex-start;
margin-top: 6px;
max-width: calc(100% - 30px);
vertical-align: top;
}
._1464f16f3e3c14a9-optionPill ._1464f16f3e3c14a9-optionPill {
margin-block: 0;
max-width: none;
}
._1464f16f3e3c14a9-optionPillKey {
border-end-start-radius: 4px;
border-start-start-radius: 4px;
display: inline-block;
flex-shrink: 0;
padding: 1px 8px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
._1464f16f3e3c14a9-optionPillValue {
display: block;
flex: 1;
padding: 1px 8px;
vertical-align: top;
white-space: pre-wrap;
}
._1464f16f3e3c14a9-readonlyPillValue {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
._1464f16f3e3c14a9-readonlyPillValue ::-moz-selection {
background: transparent;
}
._1464f16f3e3c14a9-readonlyPillValue ::selection {
background: transparent;
}
._1464f16f3e3c14a9-attachmentFilename {
color: var(--brand-500);
}
.theme-dark ._1464f16f3e3c14a9-optionPill {
background-color: var(--background-secondary-alt);
border-color: var(--background-base-lowest);
}
.theme-dark ._1464f16f3e3c14a9-optionPillKey {
background-color: var(--background-surface-high);
}
.theme-light ._1464f16f3e3c14a9-optionPill {
background-color: var(--background-base-lower);
border-color: var(--interactive-background-selected);
}
.theme-light ._1464f16f3e3c14a9-optionPillKey {
background-color: var(--background-base-lowest);
}
._1464f16f3e3c14a9-selectedPill {
border-color: Highlight !important;
}
._1464f16f3e3c14a9-erroredPill {
border-color: var(--red-400) !important;
}
._1464f16f3e3c14a9-newLine {
display: inline-block;
}
._1464f16f3e3c14a9-gameMention,
._1464f16f3e3c14a9-timestampMention {
display: inline-flex;
margin: -4px 2px -8px;
}
._1464f16f3e3c14a9-inlineFlex {
display: inline-flex;
margin: 0;
}
._1464f16f3e3c14a9-mentionSuggestion {
background-color: var(--mention-background);
border-radius: var(--radius-xs);
color: var(--mention-foreground);
font-weight: var(--font-weight-medium);
}
._1464f16f3e3c14a9-mentionSuggestion._1464f16f3e3c14a9-mentionSuggestionSimpleColorVariant {
background-color: transparent;
color: var(--text-brand);
}
._31fc2df9348cd84a-assetWrapper {
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
._31fc2df9348cd84a-assetWrapperMasked {
-webkit-mask: url(/assets/34378a8df8efb149.svg) 0 0/100% 100%;
mask: url(/assets/34378a8df8efb149.svg) 0 0/100% 100%;
}
._31fc2df9348cd84a-stickerAsset {
height: 100%;
inset-inline-start: 0;
position: absolute;
top: 0;
width: 100%;
}
._31fc2df9348cd84a-lottieCanvas,
._31fc2df9348cd84a-pngImage {
}
._31fc2df9348cd84a-pngImage {
display: block;
object-fit: contain;
}
._31fc2df9348cd84a-roundedMask {
display: block;
height: 100%;
inset-inline-start: 0;
position: absolute;
top: 0;
width: 100%;
}
._31fc2df9348cd84a-errorContent {
align-items: center;
display: flex;
justify-content: center;
}
._31fc2df9348cd84a-loadingIndicator {
box-sizing: border-box;
cursor: default;
display: block;
-webkit-mask: url(/assets/34378a8df8efb149.svg) 0 0/100% 100%;
mask: url(/assets/34378a8df8efb149.svg) 0 0/100% 100%;
}
._31fc2df9348cd84a-error,
._31fc2df9348cd84a-loadingIndicator {
background-color: var(--interactive-background-active);
height: 100%;
width: 100%;
}
._31fc2df9348cd84a-error {
align-items: center;
display: flex;
flex-direction: column;
font-weight: var(--font-weight-semibold);
justify-content: center;
}
._31fc2df9348cd84a-errorIcon {
color: var(--text-default);
}
._31fc2df9348cd84a-errorText {
margin-top: 4px;
}
._31fc2df9348cd84a-overlayWrapper {
pointer-events: none;
position: relative;
z-index: 1;
}
._31fc2df9348cd84a-overlayStickerWrapper {
position: relative;
z-index: 2;
}
._31fc2df9348cd84a-overlayLabelWrapper {
position: relative;
z-index: 1;
}
._31fc2df9348cd84a-overlayLabel {
background-color: var(--background-surface-high);
border-radius: 20px;
inset-inline-start: 50%;
margin-top: 2px;
padding: 2px 8px;
position: absolute;
top: 100%;
transform: translateX(-50%);
white-space: nowrap;
}
._31fc2df9348cd84a-positionedLayer {
pointer-events: none;
}
._382728d8346e9dcc-legacyInputCommandHeader {
display: flex;
justify-content: space-between;
}
._3b12280cd6748b40-noAutocompleteResults {
height: 200px;
}
.ed47e5efa0b3a819-secondarySection {
padding-top: 0;
}
.ed47e5efa0b3a819-divider {
padding-bottom: 0 !important;
}
._13d18efc23f39c4a-spinner {
padding-top: 8px;
}
._13d18efc23f39c4a-horizontalAutocompletes {
margin-bottom: -4px;
overflow-x: auto;
padding: 0 8px;
}
.no-webkit-scrollbar ._13d18efc23f39c4a-horizontalAutocompletes {
scrollbar-width: thin;
}
._13d18efc23f39c4a-horizontalAutocomplete {
margin-bottom: 4px;
}
@use postcss-pxtorem;
._6b0e07cbaf13ec4e-autocomplete {
border-radius: 5px;
box-shadow: var(--shadow-border), var(--shadow-high);
overflow: hidden;
}
._6b0e07cbaf13ec4e-autocompleteAttached {
bottom: calc(100% + 8px);
inset-inline: var(--space-8) var(--space-16);
position: absolute;
}
._6b0e07cbaf13ec4e-autocompleteAttached._6b0e07cbaf13ec4e-bottom {
inset-inline: 0;
bottom: inherit;
top: 100%;
}
._6b0e07cbaf13ec4e-autocompletePopout {
max-width: 800px;
min-width: 430px;
pointer-events: all;
}
._6b0e07cbaf13ec4e-autocompleteInner {
padding-bottom: 0;
}
._6b0e07cbaf13ec4e-autocompleteTop {
z-index: 1001;
}
._6b0e07cbaf13ec4e-scroller {
display: flex;
flex-direction: column;
padding-bottom: 8px;
}
._6b0e07cbaf13ec4e-stickerAutoComplete {
display: grid;
grid-template-columns: repeat(auto-fill, 116px);
grid-template-rows: repeat(auto-fill, 116px);
grid-gap: 8px;
padding: 8px 16px;
}
._6b0e07cbaf13ec4e-sticker {
margin-top: 2px;
-webkit-margin-start: 2px;
margin-inline-start: 2px;
}
._6b0e07cbaf13ec4e-minimal {
border-radius: 8px;
min-width: 200px;
}
._6b0e07cbaf13ec4e-minimal ._6b0e07cbaf13ec4e-scroller {
margin-inline: -8px;
padding-bottom: 0;
}
._871cdf3b8bd2fb44-container {
height: 100%;
position: relative;
-webkit-margin-end: 12px;
align-items: flex-start;
display: flex;
flex-direction: row;
margin-inline-end: 12px;
overflow: hidden;
}
._871cdf3b8bd2fb44-column {
height: auto;
opacity: 0.1;
padding-top: 12px;
transform-origin: 0 0;
}
._871cdf3b8bd2fb44-gif {
background-color: var(--text-link);
}
._871cdf3b8bd2fb44-categoryLoader,
._871cdf3b8bd2fb44-gif {
-webkit-margin-start: 12px;
border-radius: 5px;
margin-inline-start: 12px;
margin-bottom: 12px;
}
._871cdf3b8bd2fb44-categoryLoader {
background-color: var(--black);
height: 110px;
}
@keyframes _43deb08d456619a2-ripple {
0% {
opacity: 1;
transform: scale(0.4);
}
90% {
opacity: 0;
transform: scale(1.4);
}
to {
opacity: 0;
transform: scale(1.6);
}
}
@keyframes _43deb08d456619a2-bounce {
25% {
transform: scale(0.6);
}
50% {
transform: scale(1.2);
}
to {
transform: scale(1);
}
}
._43deb08d456619a2-gifFavoriteButton {
background-color: var(--background-base-low);
border-radius: 5px;
color: var(--icon-strong);
opacity: 1;
padding: 6px;
}
._43deb08d456619a2-gifFavoriteButton:after {
border: 2px solid var(--yellow-300);
border-radius: 50%;
box-sizing: border-box;
content: "";
height: 100%;
inset-inline-start: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 0;
transform-origin: center;
width: 100%;
z-index: 5;
}
.full-motion ._43deb08d456619a2-gifFavoriteButton:after {
transition: all 0.15s ease-in-out;
}
._43deb08d456619a2-gifFavoriteButton:focus,
._43deb08d456619a2-gifFavoriteButton:hover {
color: var(--yellow-300);
transform: none;
}
._43deb08d456619a2-gifFavoriteButton._43deb08d456619a2-selected {
color: var(--yellow-300);
}
._43deb08d456619a2-gifFavoriteButton._43deb08d456619a2-selected._43deb08d456619a2-showPulse:after {
animation: _43deb08d456619a2-ripple 0.45s ease;
}
._43deb08d456619a2-gifFavoriteButton._43deb08d456619a2-selected._43deb08d456619a2-showPulse ._43deb08d456619a2-icon {
animation: _43deb08d456619a2-bounce 0.4s linear;
}
._43deb08d456619a2-icon {
display: block;
height: 100%;
width: 100%;
}
.enable-forced-colors ._43deb08d456619a2-gifFavoriteButton {
background-color: ButtonFace;
border: 1px solid ButtonFace;
border-radius: 4px;
color: ButtonText;
}
.enable-forced-colors ._43deb08d456619a2-gifFavoriteButton:focus,
.enable-forced-colors ._43deb08d456619a2-gifFavoriteButton:hover {
border-color: ButtonText;
}
.enable-forced-colors ._43deb08d456619a2-gifFavoriteButton._43deb08d456619a2-selected {
background-color: HighlightText;
border-color: Highlight;
color: Highlight;
}
._2dc39186a9b98da4-results {
height: 100%;
}
._2dc39186a9b98da4-result {
border-radius: 5px;
cursor: pointer;
position: relative;
transition: box-shadow 0.15s ease-out;
}
._2dc39186a9b98da4-result:after {
border-radius: 7px;
content: "";
display: block;
position: absolute;
top: -1px;
inset-inline: -1px;
bottom: -1px;
pointer-events: none;
transition: background 0.15s ease-out;
transition-property: box-shadow, background;
}
._2dc39186a9b98da4-result:hover ._2dc39186a9b98da4-favButton {
opacity: 1;
transform: none;
}
._2dc39186a9b98da4-result:hover,
._2dc39186a9b98da4-result[data-focused="true"] {
box-shadow: var(--shadow-border), var(--shadow-low);
}
._2dc39186a9b98da4-result:hover:after,
._2dc39186a9b98da4-result[data-focused="true"]:after {
background: linear-gradient(to bottom, var(--background-mod-strong), var(--background-mod-subtle));
}
._2dc39186a9b98da4-result[data-focused="true"] {
box-shadow: 0 0 0 2px var(--border-focus);
}
._2dc39186a9b98da4-result[data-selected="true"] {
box-shadow: 0 0 0 3px var(--border-focus);
}
.high-contrast-mode ._2dc39186a9b98da4-result {
border: 1px solid var(--border-strong);
}
._2dc39186a9b98da4-gif {
background-color: transparent;
border-radius: 5px;
display: block;
object-fit: cover;
position: relative;
width: 100%;
}
._2dc39186a9b98da4-endContainer {
padding-bottom: 32px;
padding-top: 32px;
text-align: center;
}
._2dc39186a9b98da4-endContainer:after {
background-position: bottom;
background-repeat: no-repeat;
background-size: contain;
content: "";
display: block;
height: 220px;
margin: 0 auto;
width: 100%;
}
._2dc39186a9b98da4-endText {
color: var(--text-feedback-warning);
font-size: 16px;
font-weight: var(--font-weight-medium);
margin-bottom: 8px;
}
._2dc39186a9b98da4-searchSuggestions {
margin-bottom: 32px;
}
._2dc39186a9b98da4-noResults {
height: 100%;
}
._2dc39186a9b98da4-spinnerContainer {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
}
._2dc39186a9b98da4-favButton {
box-sizing: border-box;
inset-inline-end: 4px;
opacity: 0;
position: absolute;
top: 4px;
transform: translateY(-10px);
z-index: 4;
}
.full-motion ._2dc39186a9b98da4-favButton {
transition:
transform 0.2s ease,
opacity 0.1s ease;
}
._2dc39186a9b98da4-emptyHints {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-block: 6px;
margin-inline: 6px 0;
}
._2dc39186a9b98da4-emptyHint {
flex: 1 1 33.33%;
}
._2dc39186a9b98da4-emptyHintCard {
align-items: center;
background-color: var(--background-mod-muted);
border-radius: 5px;
box-sizing: border-box;
color: var(--text-default);
display: flex;
height: 160px;
justify-content: center;
margin: 6px;
padding: 20px;
position: relative;
}
._2dc39186a9b98da4-emptyHintSpacer {
height: 160px;
}
._2dc39186a9b98da4-emptyHintText {
font-size: 15px;
line-height: 1.6;
max-width: 180px;
text-align: center;
}
._2dc39186a9b98da4-emptyHintFavorite {
color: var(--text-feedback-warning);
height: 29px;
inset-inline-end: 6px;
position: absolute;
top: 6px;
width: 29px;
}
@keyframes _2dc39186a9b98da4-loadIN {
0% {
opacity: 0;
transform: translate3d(0, 24px, 0);
}
to {
opacity: 1;
transform: translateZ(0);
}
}
._2dc39186a9b98da4-placeholder {
background: var(--background-mod-muted);
border-radius: 5px;
height: 100%;
width: 100%;
}
.full-motion ._2dc39186a9b98da4-placeholder {
animation: _2dc39186a9b98da4-loadIN 0.6s cubic-bezier(0.17, 0.67, 0.16, 0.99);
animation-fill-mode: forwards;
opacity: 0;
transform: translate3d(0, 48px, 0);
will-change: transform3d, opacity;
}
.enable-forced-colors ._2dc39186a9b98da4-result[data-focused="true"] {
border: 1px solid Canvas;
outline: 2px solid Highlight;
}
.images-light ._2dc39186a9b98da4-endContainer:after {
background-image: url(/assets/9423b541a1c3dfef.svg);
}
.images-dark ._2dc39186a9b98da4-endContainer:after {
background-image: url(/assets/00f1d64f0e8c77b3.svg);
}
.d02962a38047ac3c-container {
height: 100%;
}
.d02962a38047ac3c-categoryFade,
.d02962a38047ac3c-categoryFadeBlurple {
border: 1px solid transparent;
border-radius: 4px;
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
transition: -webkit-backdrop-filter 0.15s ease-out;
transition: backdrop-filter 0.15s ease-out;
transition:
backdrop-filter 0.15s ease-out,
-webkit-backdrop-filter 0.15s ease-out;
z-index: 1;
}
.d02962a38047ac3c-categoryText {
align-items: center;
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
display: flex;
font-weight: var(--font-weight-semibold);
justify-content: center;
pointer-events: none;
z-index: 3;
}
.d02962a38047ac3c-categoryIcon {
-webkit-margin-end: 4px;
height: 20px;
margin-inline-end: 4px;
width: 20px;
}
.d02962a38047ac3c-categoryName {
font-size: 16px;
font-weight: var(--font-weight-semibold);
line-height: 16px;
}
.d02962a38047ac3c-spinnerContainer {
height: 100%;
}
.d02962a38047ac3c-formatSelectors,
.d02962a38047ac3c-spinnerContainer {
align-items: center;
display: flex;
justify-content: center;
}
.d02962a38047ac3c-formatSelectors {
flex-direction: row;
}
.d02962a38047ac3c-formatSelectors select {
display: block;
margin: 0 4px;
}
.d02962a38047ac3c-categoryFade {
background-color: var(--background-scrim);
}
.d02962a38047ac3c-categoryFadeBlurple {
background-color: color-mix(in srgb, var(--background-brand), transparent 20%);
}
.d02962a38047ac3c-categoryFade:hover,
.d02962a38047ac3c-categoryFadeBlurple:hover,
[data-focused="true"] .d02962a38047ac3c-categoryFade,
[data-focused="true"] .d02962a38047ac3c-categoryFadeBlurple {
-webkit-backdrop-filter: brightness(60%) blur(4px);
backdrop-filter: brightness(60%) blur(4px);
border: 1px solid var(--border-strong);
border-radius: 5px;
}
.d02962a38047ac3c-categoryText {
color: var(--white);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}
.fed6d32841cc2da2-container {
background-color: var(--background-base-lower);
display: flex;
flex: 1 1 auto;
flex-direction: column;
overflow: hidden;
position: relative;
white-space: normal;
width: 100%;
}
.fed6d32841cc2da2-container:after {
bottom: 0;
content: "";
height: 8px;
inset-inline: 0;
pointer-events: none;
position: absolute;
}
.fed6d32841cc2da2-content {
z-index: 0;
}
.fed6d32841cc2da2-content,
.fed6d32841cc2da2-header {
position: relative;
}
.fed6d32841cc2da2-header {
background-color: var(--background-surface-high);
border-bottom: 1px solid var(--border-subtle);
box-shadow: none;
flex: 0 0 auto;
padding: var(--custom-gif-picker-gutter-size);
z-index: 1;
}
.fed6d32841cc2da2-searchHeader {
margin-bottom: 0;
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
.fed6d32841cc2da2-backButton {
align-items: center;
cursor: pointer;
display: flex;
height: 28px;
-webkit-margin-end: 8px;
color: var(--text-muted);
margin-inline-end: 8px;
}
.fed6d32841cc2da2-backButton:hover {
color: var(--text-default);
}
.fed6d32841cc2da2-content {
flex: 1 1 auto;
overflow: hidden;
}
._0c74f6fd004aa317-wrapper {
display: grid;
grid-template-rows: 1fr auto;
height: 100%;
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
}
._0d1eff984b8fd277-wrapper {
flex: 1;
}
._0856d03b83e324b0-wrapper {
display: grid;
grid-template-columns: 48px auto;
grid-template-rows: auto 1fr auto;
position: relative;
}
._0856d03b83e324b0-header {
align-items: center;
box-shadow: var(--elevation-low);
display: flex;
grid-column: 1/3;
grid-row: 1/2;
padding: 12px;
z-index: 1;
}
._0856d03b83e324b0-loadingIndicator {
grid-column: 1/-1;
grid-row: 1/-1;
}
._0856d03b83e324b0-gridNoticeWrapper,
._0856d03b83e324b0-listWrapper {
flex: 1;
inset-inline-start: 48px;
position: relative;
width: calc(100% - 48px);
}
._0856d03b83e324b0-gridNoticeWrapper {
flex: none;
}
._0856d03b83e324b0-emptyState {
grid-column: 1/3;
grid-row: 2/2;
margin: 0 20px;
overflow: hidden;
position: relative;
}
.enable-forced-colors ._0856d03b83e324b0-header {
border-bottom: 1px solid CanvasText;
}
.a1e0e01524490cf9-categoryList {
top: 65px;
}
.a1e0e01524490cf9-expressionPickerCategoryList {
top: 53px;
}
.a1e0e01524490cf9-category {
cursor: pointer;
margin-bottom: 8px;
position: relative;
}
.a1e0e01524490cf9-categoryIcon {
align-items: center;
border-radius: var(--radius-xs);
display: flex;
justify-content: center;
padding: 4px;
transition: background-color 0.2s ease;
}
.a1e0e01524490cf9-categoryIcon.a1e0e01524490cf9-selected {
background-color: var(--background-base-low);
}
.a1e0e01524490cf9-categoryIcon:hover {
background-color: var(--interactive-background-hover);
}
.a1e0e01524490cf9-categoryIconIcon {
height: 24px;
width: 24px;
}
.a1e0e01524490cf9-categoryIconIcon,
.a1e0e01524490cf9-defaultsShortcut {
color: var(--interactive-text-default);
}
.a1e0e01524490cf9-defaultsShortcut {
align-items: center;
background-color: var(--background-base-lower);
border-top: 1px solid var(--border-normal);
bottom: 0;
box-sizing: border-box;
cursor: pointer;
display: flex;
height: var(--custom-expression-picker-constants-expression-picker-inspector-bar-height);
inset-inline-start: 0;
justify-content: center;
position: absolute;
width: 100%;
}
.a1e0e01524490cf9-defaultsShortcut:hover {
color: var(--interactive-text-hover);
}
._46002dafa54b8395-keybindHint {
align-items: center;
background-color: var(--background-base-lower);
border-radius: var(--radius-sm);
display: flex;
margin: 16px;
padding: 8px;
position: relative;
}
._46002dafa54b8395-keybindHintText {
display: inline;
}
._46002dafa54b8395-warningIcon {
min-width: 20px;
-webkit-margin-end: 8px;
color: var(--yellow-300);
margin-inline-end: 8px;
}
._46002dafa54b8395-emoji {
height: 100%;
width: 100%;
}
._46002dafa54b8395-closeButton,
._46002dafa54b8395-emoji {
color: var(--interactive-text-default);
}
._46002dafa54b8395-closeButton {
cursor: pointer;
margin-top: -16px;
}
.da9eb2daacfafc6e-soundAddButton {
background: initial;
border: 1px dashed var(--border-subtle);
color: var(--text-muted);
cursor: pointer;
}
.da9eb2daacfafc6e-soundAddButton:hover {
border-color: var(--border-normal);
color: var(--text-default);
}
.da9eb2daacfafc6e-soundAddButton.da9eb2daacfafc6e-focused {
border-color: var(--border-strong);
color: var(--text-default);
}
.da9eb2daacfafc6e-soundAddButton svg {
-webkit-margin-end: 3px;
margin-inline-end: 3px;
}
.da9eb2daacfafc6e-disabled {
pointer-events: none;
}
._614244fbcb264b94-sectionContainer {
align-items: center;
background-color: var(--background-base-low);
display: flex;
height: var(--custom-expression-picker-constants-expression-picker-list-section-heading-height);
padding-block: 0;
padding-inline: 8px 4px;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 10000;
}
._614244fbcb264b94-sectionContainerNitroLocked {
position: relative;
}
._614244fbcb264b94-sectionContainerNitroLockedBackground {
background-color: hsl(var(--premium-tier-2-purple-hsl) / 0.35);
}
._614244fbcb264b94-sectionContainerNitroLockedBackground._614244fbcb264b94-brandRefresh {
background: linear-gradient(90deg, var(--expressive-gradient-nitro-pink-start) 0, var(--expressive-gradient-nitro-pink-end) 100%);
}
.theme-light ._614244fbcb264b94-sectionContainerNitroLockedBackground._614244fbcb264b94-brandRefresh {
background: linear-gradient(90deg, color-mix(in srgb, var(--expressive-gradient-nitro-pink-start) 40%, transparent), color-mix(in srgb, var(--expressive-gradient-nitro-pink-end) 40%, transparent));
}
._614244fbcb264b94-sectionHeader {
color: var(--interactive-text-default);
cursor: pointer;
display: inline-block;
}
._614244fbcb264b94-sectionHeader:hover,
._614244fbcb264b94-sectionHeader:hover ._614244fbcb264b94-sectionTitle {
color: var(--interactive-text-active);
}
._614244fbcb264b94-sectionHeader ._614244fbcb264b94-sectionTitle {
color: var(--interactive-text-default);
}
._614244fbcb264b94-sectionHeaderContent {
align-items: center;
display: flex;
}
._614244fbcb264b94-smallPaddingFooter {
height: 20px;
}
._614244fbcb264b94-lastSectionFooter {
height: 70px;
}
._614244fbcb264b94-nitroLocked._614244fbcb264b94-lastSectionFooter,
._614244fbcb264b94-nitroLocked._614244fbcb264b94-smallPaddingFooter {
background-color: hsl(var(--premium-tier-2-purple-hsl) / 0.35);
}
._614244fbcb264b94-nitroLocked._614244fbcb264b94-lastSectionFooter._614244fbcb264b94-brandRefresh,
._614244fbcb264b94-nitroLocked._614244fbcb264b94-smallPaddingFooter._614244fbcb264b94-brandRefresh {
background: linear-gradient(90deg, var(--expressive-gradient-nitro-pink-start) 0, var(--expressive-gradient-nitro-pink-end) 100%);
}
.theme-light ._614244fbcb264b94-nitroLocked._614244fbcb264b94-lastSectionFooter._614244fbcb264b94-brandRefresh,
.theme-light ._614244fbcb264b94-nitroLocked._614244fbcb264b94-smallPaddingFooter._614244fbcb264b94-brandRefresh {
background: linear-gradient(90deg, color-mix(in srgb, var(--expressive-gradient-nitro-pink-start) 40%, transparent), color-mix(in srgb, var(--expressive-gradient-nitro-pink-end) 40%, transparent));
}
._614244fbcb264b94-nitroLocked:not(._614244fbcb264b94-lastSectionFooter) {
margin-bottom: var(--space-4);
}
._614244fbcb264b94-sectionTitle {
margin: 0 4px;
}
._614244fbcb264b94-headerIcon {
height: 16px;
width: 16px;
}
._614244fbcb264b94-soundRow {
display: flex;
gap: 8px;
padding-bottom: 8px;
-webkit-padding-start: 8px;
padding-inline-start: 8px;
}
._614244fbcb264b94-soundRowNitroLocked {
background-color: hsl(var(--premium-tier-2-purple-hsl) / 0.35);
}
._614244fbcb264b94-soundRowNitroLocked._614244fbcb264b94-brandRefresh {
background: linear-gradient(90deg, var(--expressive-gradient-nitro-pink-start) 0, var(--expressive-gradient-nitro-pink-end) 100%);
}
.theme-light ._614244fbcb264b94-soundRowNitroLocked._614244fbcb264b94-brandRefresh {
background: linear-gradient(90deg, color-mix(in srgb, var(--expressive-gradient-nitro-pink-start) 40%, transparent), color-mix(in srgb, var(--expressive-gradient-nitro-pink-end) 40%, transparent));
}
._614244fbcb264b94-settingsClickArea {
color: var(--interactive-text-default);
cursor: pointer;
transition: color 0.2s ease;
-webkit-margin-start: var(--space-12);
margin-inline-start: var(--space-12);
}
._614244fbcb264b94-settingsClickArea:focus,
._614244fbcb264b94-settingsClickArea:hover {
color: var(--interactive-text-hover);
}
._614244fbcb264b94-settingsSoundmojiClickArea {
padding: 0;
}
._614244fbcb264b94-settingsSoundmojiClickArea:last-child {
-webkit-padding-end: 0;
padding-inline-end: 0;
}
._614244fbcb264b94-premiumSectionDivider {
padding-top: 8px;
}
._614244fbcb264b94-settingsIcon {
height: 24px;
width: 24px;
}
._09f65b4b8a3f8d26-picker {
background-color: var(--background-base-low);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-border), var(--shadow-high);
display: flex;
flex-direction: column;
height: 420px;
overflow: hidden;
width: 531px;
}
._09f65b4b8a3f8d26-picker._09f65b4b8a3f8d26-inExpressionPicker {
box-shadow: none;
height: 100%;
width: auto;
}
._09f65b4b8a3f8d26-fetching {
justify-content: center;
}
._3ad28b0867fa3fad-categoryList {
top: 53px;
}
._3ad28b0867fa3fad-stickerCategory {
border-radius: 4px;
color: var(--interactive-text-default);
cursor: pointer;
height: var(--custom-stickers-constants-sticker-category-icon-size);
margin-bottom: var(--custom-stickers-constants-sticker-category-icon-margin);
width: var(--custom-stickers-constants-sticker-category-icon-size);
}
._3ad28b0867fa3fad-firstPartyCategory:hover {
background-color: var(--interactive-background-hover);
color: var(--interactive-text-hover);
}
._3ad28b0867fa3fad-firstPartyCategorySelected,
._3ad28b0867fa3fad-firstPartyCategorySelected:hover,
._3ad28b0867fa3fad-stickerCategoryGenericSelected,
._3ad28b0867fa3fad-stickerCategoryGenericSelected:hover {
background-color: var(--background-base-low);
}
._3ad28b0867fa3fad-stickerCategoryGenericSelected ._3ad28b0867fa3fad-stickerCategoryGenericIcon {
color: var(--interactive-text-active);
}
._3ad28b0867fa3fad-stickerCategoryGeneric {
box-sizing: border-box;
margin-bottom: 2px;
padding: 4px;
}
._3ad28b0867fa3fad-stickerCategoryGeneric._3ad28b0867fa3fad-stickerCategoryGenericLast {
margin-bottom: var(--custom-stickers-constants-sticker-category-icon-margin);
}
._3ad28b0867fa3fad-stickerCategoryGeneric:hover {
background-color: var(--background-base-low);
}
._3ad28b0867fa3fad-stickerCategoryGenericDisabled {
color: var(--interactive-muted);
cursor: default;
}
._3ad28b0867fa3fad-stickerCategoryGenericDisabled ._3ad28b0867fa3fad-stickerCategoryGenericIcon {
opacity: 0.6;
}
._3ad28b0867fa3fad-stickerCategoryGenericDisabled._3ad28b0867fa3fad-stickerCategory:hover {
background-color: transparent;
color: var(--interactive-muted);
}
._3ad28b0867fa3fad-stickerPackThumbnail {
display: block;
height: 100%;
width: 100%;
}
._3ad28b0867fa3fad-guildCategorySeparator {
border: none;
border-bottom: var(--custom-stickers-constants-category-separator-size) solid var(--border-subtle);
margin: var(--custom-stickers-constants-category-separator-margin-vertical) 0;
}
._3ad28b0867fa3fad-standardStickerShortcut {
align-items: center;
background: inherit;
border-top: 1px solid var(--border-normal);
bottom: 0;
box-sizing: border-box;
color: var(--interactive-text-default);
cursor: pointer;
display: flex;
height: 48px;
inset-inline-start: 0;
justify-content: center;
opacity: 1;
position: absolute;
width: 100%;
}
.full-motion ._3ad28b0867fa3fad-standardStickerShortcut {
transition:
opacity 0.1s,
transform 0.1s;
}
._3ad28b0867fa3fad-standardStickerShortcut:hover {
color: var(--interactive-text-hover);
}
._3ad28b0867fa3fad-invisibleShortcut {
display: none;
opacity: 0;
}
.enable-forced-colors ._3ad28b0867fa3fad-standardStickerShortcut {
background-color: ButtonFace;
border-top: 1px solid CanvasText;
color: ButtonText;
height: 47px;
}
.enable-forced-colors ._3ad28b0867fa3fad-stickerCategory {
border: 1px solid Canvas;
border-radius: 4px;
transition: none;
}
.enable-forced-colors ._3ad28b0867fa3fad-stickerCategory ._3ad28b0867fa3fad-stickerCategoryGenericIcon {
color: ButtonText;
}
.enable-forced-colors ._3ad28b0867fa3fad-stickerCategory:hover {
background: ButtonFace;
border-color: ButtonText;
}
.enable-forced-colors ._3ad28b0867fa3fad-stickerCategoryGenericDisabled {
color: GrayText;
}
.enable-forced-colors ._3ad28b0867fa3fad-stickerCategoryGenericDisabled._3ad28b0867fa3fad-stickerCategory:hover {
color: GrayText;
}
.enable-forced-colors ._3ad28b0867fa3fad-firstPartyCategorySelected,
.enable-forced-colors ._3ad28b0867fa3fad-firstPartyCategorySelected:hover,
.enable-forced-colors ._3ad28b0867fa3fad-stickerCategoryGenericSelected,
.enable-forced-colors ._3ad28b0867fa3fad-stickerCategoryGenericSelected:hover {
background-color: HighlightText;
border-color: Highlight;
}
.enable-forced-colors ._3ad28b0867fa3fad-firstPartyCategorySelected ._3ad28b0867fa3fad-stickerCategoryGenericIcon,
.enable-forced-colors ._3ad28b0867fa3fad-firstPartyCategorySelected:hover ._3ad28b0867fa3fad-stickerCategoryGenericIcon,
.enable-forced-colors ._3ad28b0867fa3fad-stickerCategoryGenericSelected ._3ad28b0867fa3fad-stickerCategoryGenericIcon,
.enable-forced-colors ._3ad28b0867fa3fad-stickerCategoryGenericSelected:hover ._3ad28b0867fa3fad-stickerCategoryGenericIcon {
color: Highlight;
}
._701262752371cc2b-emptyState {
align-items: center;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
text-align: center;
}
._701262752371cc2b-emptyState._701262752371cc2b-unifyTrialUpsell {
margin: 0;
}
._701262752371cc2b-header {
margin-bottom: 8px;
margin-top: 16px;
}
._701262752371cc2b-subtitle {
margin-bottom: 12px;
}
._701262752371cc2b-stickersRow {
display: flex;
margin-bottom: 20px;
}
._701262752371cc2b-stickersRow ._701262752371cc2b-sticker {
margin: auto 2px;
}
.ac65bb98973892fa-upsell {
align-items: center;
background-color: var(--background-base-lowest);
border-radius: 4px;
display: flex;
padding-block: 8px;
padding-inline: 8px 12px;
}
.ac65bb98973892fa-icon {
-webkit-margin-end: 8px;
color: var(--interactive-text-default);
margin-inline-end: 8px;
width: 24px;
}
.ac65bb98973892fa-body {
flex: 1;
}
.d13236c21c5f3b9a-iconWrapper {
align-items: center;
background-image: linear-gradient(90deg, var(--guild-boosting-blue), var(--guild-boosting-purple));
border-radius: 24px;
color: var(--white);
display: flex;
height: 24px;
justify-content: center;
width: 24px;
}
.d13236c21c5f3b9a-icon {
height: 12px;
width: 12px;
}
.ced2834b60370b00-unownedStickerLockContainer {
align-items: center;
background-color: var(--background-accent);
border: 1px solid var(--border-subtle);
border-radius: 100%;
bottom: 0;
display: flex;
inset-inline-end: 0;
justify-content: center;
position: absolute;
}
.ced2834b60370b00-unownedStickerLockIcon {
color: var(--interactive-text-default);
}
@keyframes c6367b0f171ba6d7-ripple {
0% {
opacity: 1;
transform: scale(0.8);
}
to {
opacity: 0;
transform: scale(1.6);
}
}
.c6367b0f171ba6d7-row {
display: grid;
margin-bottom: var(--custom-stickers-constants-sticker-picker-preview-margin);
overflow: hidden;
}
.c6367b0f171ba6d7-row,
.c6367b0f171ba6d7-sticker {
position: relative;
}
.c6367b0f171ba6d7-sticker {
border-radius: var(--custom-stickers-constants-sticker-picker-preview-border-radius);
padding: var(--custom-stickers-constants-sticker-picker-preview-padding);
}
.c6367b0f171ba6d7-sticker:after {
border: 3px solid var(--yellow-300);
border-radius: 100%;
box-sizing: border-box;
content: "";
height: 100%;
inset-inline-start: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 0;
transform-origin: center;
width: 100%;
z-index: 5;
}
.full-motion .c6367b0f171ba6d7-sticker:after {
transition: all 0.15s ease-in-out;
}
.c6367b0f171ba6d7-sticker.c6367b0f171ba6d7-showPulse:after {
animation: c6367b0f171ba6d7-ripple 0.25s ease-out 1;
}
.c6367b0f171ba6d7-createSticker {
align-items: center;
background-color: var(--background-base-low);
border-radius: 8px;
display: flex;
flex-direction: column;
font-weight: var(--font-weight-medium);
justify-content: space-evenly;
position: relative;
}
.c6367b0f171ba6d7-createInspected {
background-color: var(--background-secondary-alt);
}
.c6367b0f171ba6d7-uploadCard {
cursor: pointer;
}
.c6367b0f171ba6d7-iconWrapper {
align-items: center;
background-image: linear-gradient(90deg, var(--guild-boosting-blue), var(--guild-boosting-purple));
border-radius: 36px;
color: var(--white);
display: flex;
height: 36px;
justify-content: center;
width: 36px;
}
.c6367b0f171ba6d7-icon {
height: 18px;
width: 18px;
}
.c6367b0f171ba6d7-inspectedIndicator {
height: 100%;
inset-inline-start: 0;
-webkit-mask: url(/assets/34378a8df8efb149.svg) 0 0/100% 100%;
mask: url(/assets/34378a8df8efb149.svg) 0 0/100% 100%;
position: absolute;
top: 0;
transition:
background-color 0.08s ease-out,
color 0.08s ease-out;
width: 100%;
z-index: -1;
}
.c6367b0f171ba6d7-stickerInspected .c6367b0f171ba6d7-inspectedIndicator {
background-color: var(--background-accent);
}
.c6367b0f171ba6d7-stickerPlaceholder {
cursor: default;
}
.c6367b0f171ba6d7-viewAll {
inset-inline-end: 0;
position: absolute;
top: 0;
}
.c6367b0f171ba6d7-viewAll:hover .c6367b0f171ba6d7-viewAllButton,
.c6367b0f171ba6d7-viewAllInspected .c6367b0f171ba6d7-viewAllButton {
background-color: var(--background-base-lowest);
color: var(--interactive-text-hover);
}
.c6367b0f171ba6d7-viewAllButton {
align-items: center;
background-color: var(--background-secondary-alt);
box-sizing: border-box;
color: var(--interactive-text-default);
display: grid;
font-size: 16px;
font-weight: var(--font-weight-semibold);
height: 100%;
line-height: 20px;
text-align: center;
white-space: pre-line;
width: 100%;
}
.c6367b0f171ba6d7-stickerNode {
transition: opacity 0.25s;
}
.c6367b0f171ba6d7-stickerNodeDimmed {
opacity: 0.3;
}
.c6367b0f171ba6d7-stickerNodeHidden {
visibility: hidden;
}
.c6367b0f171ba6d7-stickerUnsendable {
filter: grayscale(100%);
}
.keyboard-mode .c6367b0f171ba6d7-stickerInspected {
position: relative;
}
.keyboard-mode .c6367b0f171ba6d7-stickerInspected:before {
border-radius: 12px;
bottom: 0;
content: "";
display: block;
inset-inline: 0;
pointer-events: none;
position: absolute;
top: 0;
--__adaptive-focus-color: var(--interactive-text-hover);
border: 2px solid var(--__adaptive-focus-color);
z-index: 1;
}
.enable-forced-colors .c6367b0f171ba6d7-stickerInspected {
background-color: HighlightText;
outline: 1px solid Highlight;
outline-offset: -1px;
}
.enable-forced-colors .c6367b0f171ba6d7-stickerInspected:before {
border-color: Highlight;
}
.e94b8cb2ff7b5c8d-wrapper {
display: grid;
grid-template-rows: 1fr auto;
height: 100%;
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
}
.e94b8cb2ff7b5c8d-footerActions {
margin-bottom: var(--custom-stickers-constants-sticker-picker-preview-margin);
}
.e94b8cb2ff7b5c8d-packHeader {
position: -webkit-sticky;
position: sticky;
top: 0;
-webkit-padding-start: 0;
padding-inline-start: 0;
}
.e94b8cb2ff7b5c8d-packHeaderShopWrapper {
-moz-column-gap: 12px;
column-gap: 12px;
display: flex;
}
.e94b8cb2ff7b5c8d-packHeaderShop {
flex: 1 1 auto;
overflow: hidden;
}
.e94b8cb2ff7b5c8d-packHeaderShopActions {
flex: 0 0 auto;
}
.e94b8cb2ff7b5c8d-sticker {
cursor: pointer;
}
.e94b8cb2ff7b5c8d-divider {
align-items: center;
display: flex;
height: var(--custom-stickers-constants-stickers-list-divider-height);
}
.e94b8cb2ff7b5c8d-shopDivider {
border-top-width: var(--custom-stickers-constants-stickers-shop-divider-border-top-width);
height: var(--custom-stickers-constants-stickers-shop-divider-height);
}
.e94b8cb2ff7b5c8d-tipWithSearch {
margin-top: var(--custom-stickers-constants-sticker-picker-tip-margin-search-results);
}
.e94b8cb2ff7b5c8d-searchSuggestions {
max-width: 250px;
padding-top: 16px;
}
.e94b8cb2ff7b5c8d-searchSuggestion {
background: var(--background-surface-high);
border-radius: 8px;
cursor: pointer;
display: inline-block;
font-weight: var(--font-weight-normal);
margin: 0 4px 8px;
padding: 4px 8px;
}
.e94b8cb2ff7b5c8d-emptyGuildUpsell {
box-sizing: border-box;
height: var(--custom-stickers-constants-stickers-list-empty-guild-upsell-height);
margin-inline: 4px;
overflow: hidden;
}
.cdf8a9a2bbd98bd3-wrapper {
flex: 1;
}
._8fe94ffef7f91201-upsellWrapper {
align-items: center;
background: var(--background-base-lower);
bottom: 0;
display: flex;
flex-direction: column;
height: 100%;
position: absolute;
top: 0;
inset-inline: 0;
justify-content: center;
opacity: 0.98;
padding: 0 20px;
text-align: center;
z-index: 2;
}
._8fe94ffef7f91201-upsellWrapper._8fe94ffef7f91201-unifyTrialUpsell {
justify-content: flex-end;
opacity: 1;
padding: 0;
}
._8fe94ffef7f91201-upsellImage {
height: 80px;
margin-bottom: 16px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
._8fe94ffef7f91201-upsellTitle {
margin-bottom: 8px;
}
._8fe94ffef7f91201-upsellDescription {
margin-bottom: 44px;
max-width: 400px;
}
._8fe94ffef7f91201-upsellClose {
color: var(--interactive-text-default);
cursor: pointer;
inset-inline-end: 20px;
position: absolute;
top: 20px;
}
._8ef02eea17068b73-wrapper {
display: grid;
grid-template-columns: 48px auto;
grid-template-rows: auto 1fr auto;
position: relative;
}
._8ef02eea17068b73-header {
align-items: center;
background-color: var(--background-surface-high);
border-bottom: 1px solid var(--border-subtle);
box-shadow: none;
display: flex;
grid-column: 1/3;
grid-row: 1/2;
min-height: 1px;
padding: var(--custom-gif-picker-gutter-size);
z-index: 1;
}
._8ef02eea17068b73-loadingIndicator {
grid-column: 1/-1;
grid-row: 1/-1;
}
._8ef02eea17068b73-listWrapper {
grid-column: 2/2;
}
._8ef02eea17068b73-emptyState,
._8ef02eea17068b73-listWrapper {
grid-row: 2/2;
overflow: hidden;
position: relative;
}
._8ef02eea17068b73-emptyState {
grid-column: 1/3;
margin: 0 20px;
}
.enable-forced-colors ._8ef02eea17068b73-header {
border-bottom: 1px solid CanvasText;
}
._084343c4f11eaaab-positionLayer {
pointer-events: none;
z-index: 0;
}
._084343c4f11eaaab-positionLayerDefaultAlignLeft {
inset-inline-end: var(--space-16);
}
._084343c4f11eaaab-positionLayerDefaultAlignRight {
inset-inline-start: var(--space-16);
}
._084343c4f11eaaab-positionContainer {
height: 486px;
pointer-events: none;
width: 100%;
}
._084343c4f11eaaab-positionContainerOnlyEmoji {
height: 396px;
}
._084343c4f11eaaab-drawerSizingWrapper {
height: 100%;
inset-inline-end: var(--space-24) !important;
max-width: 100%;
pointer-events: all;
position: absolute;
width: 100%;
z-index: 1;
}
._084343c4f11eaaab-contentWrapper {
box-sizing: border-box;
display: grid;
flex: 1 1 auto;
grid-template-rows: 30px auto;
grid-row-gap: 12px;
background-color: var(--background-surface-high);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-high);
height: 100%;
padding-top: 16px;
position: relative;
z-index: 1;
}
._084343c4f11eaaab-positionContainerOnlyEmoji ._084343c4f11eaaab-contentWrapper {
grid-template-rows: auto;
}
._084343c4f11eaaab-nav {
padding: 0 16px;
}
._084343c4f11eaaab-navList {
display: flex;
}
._084343c4f11eaaab-navItem {
flex: 0 0 auto;
}
._084343c4f11eaaab-navItem + ._084343c4f11eaaab-navItem {
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
._084343c4f11eaaab-navButton {
border-radius: var(--radius-sm);
color: var(--text-default);
cursor: pointer;
font-size: 14px;
font-weight: 600;
line-height: 14px;
padding: 8px 12px;
transition:
background-color 0.1s ease-in-out,
color 0.1s ease-in-out;
}
.high-contrast-mode ._084343c4f11eaaab-navButton {
border: 1px solid var(--border-subtle);
box-sizing: border-box;
}
._084343c4f11eaaab-navButton:hover {
background-color: var(--control-secondary-background-hover);
color: var(--interactive-text-hover);
}
._084343c4f11eaaab-navButton:active {
background-color: var(--control-secondary-background-active);
color: var(--interactive-text-active);
}
._084343c4f11eaaab-navButtonActive {
background-color: var(--background-mod-normal);
color: var(--text-strong);
}
._084343c4f11eaaab-navButtonActive:active,
._084343c4f11eaaab-navButtonActive:hover {
background-color: var(--background-mod-strong);
color: var(--interactive-text-active);
}
.high-contrast-mode ._084343c4f11eaaab-navButtonActive {
border: 1px solid var(--border-normal);
box-sizing: border-box;
}
._084343c4f11eaaab-resizeHandle {
cursor: ew-resize;
height: 100%;
position: absolute;
top: 0;
width: 4px;
z-index: 2;
}
._084343c4f11eaaab-introductionWrapper {
text-align: center;
}
._084343c4f11eaaab-introductionHeader {
font-weight: var(--font-weight-semibold);
margin-bottom: 4px;
}
._084343c4f11eaaab-introductionSubheader {
margin-bottom: 16px;
}
._084343c4f11eaaab-introductionAction {
color: var(--brand-500);
font-weight: var(--font-weight-semibold);
}
._084343c4f11eaaab-introductionTooltip {
max-width: none;
width: 280px;
}
._084343c4f11eaaab-introductionTooltipContent {
padding: 16px;
}
._084343c4f11eaaab-stickersNavItem {
align-items: center;
display: flex;
}
._084343c4f11eaaab-stickersUnseenBadge {
border-radius: 8px;
height: 16px;
min-width: 16px;
padding: 0;
-webkit-margin-start: 4px;
align-items: center;
box-shadow: none;
display: inline-flex;
justify-content: center;
margin-inline-start: 4px;
text-shadow: none;
}
._084343c4f11eaaab-soundboardContainer {
position: relative;
}
._084343c4f11eaaab-soundboardHeader {
align-items: center;
background-color: var(--background-surface-high);
border-bottom: 1px solid var(--border-subtle);
box-shadow: none;
display: flex;
padding: var(--custom-gif-picker-gutter-size);
}
.enable-forced-colors ._084343c4f11eaaab-resizeHandle {
background-color: ButtonText;
}
.enable-forced-colors ._084343c4f11eaaab-contentWrapper {
border: 3px solid CanvasText;
}
.enable-forced-colors ._084343c4f11eaaab-navButton {
border: 1px solid ButtonFace;
}
.enable-forced-colors ._084343c4f11eaaab-navButton:hover {
border-color: ButtonText;
}
.enable-forced-colors ._084343c4f11eaaab-navButtonActive {
border-color: Highlight;
}
._084343c4f11eaaab-soundmojiLabelContainer {
align-items: center;
display: flex;
flex-direction: row;
gap: var(--space-4);
}
._6b4539aac34bc825-userTooltip {
align-items: center;
display: flex;
font-size: 16px;
}
._6b4539aac34bc825-avatar {
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
._6b4539aac34bc825-discriminator {
opacity: 0.5;
}
._6b4539aac34bc825-icon {
height: 1em;
margin-bottom: 0.2rem;
vertical-align: middle;
width: 1em;
-webkit-margin-end: 3px;
margin-inline-end: 3px;
}
._6b4539aac34bc825-tabular {
font-variant-numeric: tabular-nums;
}
.ada32f6ad5a36c58-syntaxAfter,
.ada32f6ad5a36c58-syntaxBefore {
font-weight: var(--font-weight-semibold);
}
.ada32f6ad5a36c58-codeBlockSyntax,
.ada32f6ad5a36c58-syntaxAfter,
.ada32f6ad5a36c58-syntaxBefore {
color: var(--textbox-markdown-syntax);
}
.ada32f6ad5a36c58-codeBlockLang {
color: var(--text-feedback-positive);
}
.ada32f6ad5a36c58-after_s,
.ada32f6ad5a36c58-after_spoiler,
.ada32f6ad5a36c58-after_u,
.ada32f6ad5a36c58-before_s,
.ada32f6ad5a36c58-before_spoiler,
.ada32f6ad5a36c58-before_u,
.ada32f6ad5a36c58-syntaxOverride {
font-weight: var(--font-weight-normal);
}
.ada32f6ad5a36c58-before_em {
-webkit-margin-end: -1px;
margin-inline-end: -1px;
}
.ada32f6ad5a36c58-after_em {
-webkit-margin-start: 1px;
margin-inline-start: 1px;
}
.ada32f6ad5a36c58-before_s,
.ada32f6ad5a36c58-before_u {
-webkit-margin-end: 1px;
margin-inline-end: 1px;
}
.ada32f6ad5a36c58-after_s,
.ada32f6ad5a36c58-after_u {
-webkit-margin-start: 1px;
margin-inline-start: 1px;
}
.ada32f6ad5a36c58-after_u,
.ada32f6ad5a36c58-before_u {
text-decoration: underline;
}
.ada32f6ad5a36c58-before_inlineCode {
border-radius: 3px 0 0 3px;
-webkit-border-end: none;
border-end-start-radius: var(--radius-xs);
border-inline-end: none;
border-start-start-radius: var(--radius-xs);
}
.ada32f6ad5a36c58-after_inlineCode {
border-radius: 0 3px 3px 0;
-webkit-border-start: none;
border-end-end-radius: var(--radius-xs);
border-inline-start: none;
border-start-end-radius: var(--radius-xs);
}
.ada32f6ad5a36c58-bold {
font-weight: var(--font-weight-bold);
}
.ada32f6ad5a36c58-italics {
font-style: italic;
}
.ada32f6ad5a36c58-underline {
text-decoration: underline;
}
.ada32f6ad5a36c58-strikethrough {
text-decoration: line-through;
}
.ada32f6ad5a36c58-fakeLink {
color: var(--text-link);
-webkit-text-decoration: var(--link-decoration);
text-decoration: var(--link-decoration);
}
.ada32f6ad5a36c58-after_inlineCode,
.ada32f6ad5a36c58-before_inlineCode,
.ada32f6ad5a36c58-inlineCode {
background: var(--background-code);
border: 1px solid var(--border-muted);
box-sizing: border-box;
font-family: var(--font-code);
font-size: 85%;
height: auto;
line-height: 18px;
margin: 0;
padding: 0;
text-indent: 0;
white-space: pre-wrap;
width: auto;
}
.ada32f6ad5a36c58-inlineCode {
-webkit-border-start: none;
border-inline-start: none;
-webkit-border-end: none;
border-inline-end: none;
}
.ada32f6ad5a36c58-spoiler {
padding: 0 0.2em;
}
.ada32f6ad5a36c58-codeBlockText,
.ada32f6ad5a36c58-codeLine {
color: var(--text-default);
font-family: var(--font-code);
font-size: 85%;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
}
.ada32f6ad5a36c58-codeLine .hljs-comment,
.ada32f6ad5a36c58-codeLine .hljs-quote {
color: var(--text-muted);
}
.ada32f6ad5a36c58-codeLine .hljs-ansi-control-sequence {
font-size: 70%;
vertical-align: middle;
-webkit-padding-end: 0.1em;
background-color: inherit;
color: var(--textbox-markdown-syntax);
display: inherit;
font-style: inherit;
font-weight: inherit;
padding-inline-end: 0.1em;
text-decoration: none;
}
.ada32f6ad5a36c58-before_subtext {
font-weight: 700;
}
.ada32f6ad5a36c58-before_subtext,
.ada32f6ad5a36c58-subtext {
color: var(--text-muted);
font-size: 13px;
line-height: 17.875px;
}
._1b31f471f0bb10ab-editor {
caret-color: var(--text-default);
text-align: start;
white-space: break-spaces !important;
word-break: break-word;
}
._1b31f471f0bb10ab-editor pre {
max-width: none;
}
._1b31f471f0bb10ab-placeholder {
color: var(--channel-text-area-placeholder);
inset-inline: 0;
overflow: hidden;
pointer-events: none;
position: absolute;
text-overflow: ellipsis;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
white-space: nowrap;
}
.enable-forced-colors ._1b31f471f0bb10ab-placeholder {
color: GrayText;
}
.theme-dark.custom-theme-background.custom-client-theme ._1b31f471f0bb10ab-placeholder {
color: color-mix(in oklab, var(--text-default) 40%, transparent);
}
.ec4baf0360ff3578-slateContainer {
position: relative;
}
.ec4baf0360ff3578-slateTextArea {
box-sizing: border-box;
inset-inline: 0 10px;
min-height: var(--custom-channel-textarea-text-area-height);
padding: calc((var(--custom-channel-textarea-text-area-height) - var(--chat-markup-line-height)) / 2) 0;
position: absolute;
}
.enable-forced-colors .ec4baf0360ff3578-placeholder {
color: GrayText;
}
@use postcss-pxtorem;
._740174f3d6a2c8fe-channelTextArea {
border: 1px solid var(--border-muted);
border-radius: var(--radius-sm);
position: relative;
text-indent: 0;
transition: border-color 0.2s ease;
width: 100%;
}
._740174f3d6a2c8fe-channelTextArea:not(._740174f3d6a2c8fe-highlighted) {
transition: box-shadow 0.2s ease;
}
._740174f3d6a2c8fe-channelTextArea._740174f3d6a2c8fe-error:not(:hover):not(:focus-within) {
box-shadow: 0 0 0 2px var(--text-feedback-critical);
}
._740174f3d6a2c8fe-channelTextArea._740174f3d6a2c8fe-highlighted {
border: 1px solid var(--border-muted);
box-shadow: 0 0 0 4px var(--blue-345);
}
._740174f3d6a2c8fe-channelTextArea:focus-within {
border-color: var(--border-subtle);
box-shadow: none;
}
._740174f3d6a2c8fe-focusRing {
border-radius: 8px;
}
._740174f3d6a2c8fe-scrollableContainer {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 8px;
max-height: var(--custom-channel-textarea-text-area-max-height);
overflow-x: hidden;
overflow-y: scroll;
}
._740174f3d6a2c8fe-themedBackground {
background: var(--background-gradient-highest, var(--chat-background-default));
}
.no-webkit-scrollbar ._740174f3d6a2c8fe-scrollableContainer {
scrollbar-width: none;
}
:where(.custom-theme-background) ._740174f3d6a2c8fe-channelTextArea {
background: var(--background-gradient-highest, var(--input-background-default));
border-color: var(--app-frame-border);
}
.refresh-fast-follow-distinct-borders ._740174f3d6a2c8fe-channelTextArea {
border: 1px solid var(--border-subtle);
}
.refresh-fast-follow-distinct-borders ._740174f3d6a2c8fe-channelTextArea:focus-within {
border-color: var(--app-frame-border);
}
._740174f3d6a2c8fe-sticker {
display: block;
}
._740174f3d6a2c8fe-disabledButtonWrapper {
display: inline-flex;
}
.background-opacity-low ._740174f3d6a2c8fe-scrollableContainer {
background-color: hsl(var(--primary-500-hsl) / 0.5);
}
.background-opacity-low ._740174f3d6a2c8fe-scrollableContainer ._740174f3d6a2c8fe-textArea {
color: var(--white);
}
.background-opacity-medium ._740174f3d6a2c8fe-scrollableContainer {
background-color: hsl(var(--primary-500-hsl) / 0.7);
}
.background-opacity-medium ._740174f3d6a2c8fe-scrollableContainer ._740174f3d6a2c8fe-textArea {
color: var(--white);
}
.background-opacity-high ._740174f3d6a2c8fe-scrollableContainer {
background-color: hsl(var(--primary-500-hsl) / 0.9);
}
._740174f3d6a2c8fe-scrollableContainer::-webkit-scrollbar {
height: 12px;
width: 12px;
}
._740174f3d6a2c8fe-scrollableContainer::-webkit-scrollbar-thumb,
._740174f3d6a2c8fe-scrollableContainer::-webkit-scrollbar-track {
background-clip: padding-box;
border: 4px solid transparent;
}
._740174f3d6a2c8fe-scrollableContainer::-webkit-scrollbar-track {
border-width: initial;
}
._740174f3d6a2c8fe-scrollableContainer::-webkit-scrollbar-thumb {
background-color: hsl(var(--primary-800-hsl) / 0.6);
border-radius: 8px;
}
._740174f3d6a2c8fe-channelTextAreaDisabled ._740174f3d6a2c8fe-scrollableContainer {
opacity: 1;
}
._740174f3d6a2c8fe-hasStackedBar {
border-start-end-radius: 0;
border-start-start-radius: 0;
}
._740174f3d6a2c8fe-inlineContainer {
box-shadow: none;
--custom-channel-textarea-text-area-height: var(--form-input-height);
background: var(--input-background-default);
border-color: var(--input-border-default);
box-sizing: border-box;
}
._740174f3d6a2c8fe-inlineContainer ._740174f3d6a2c8fe-themedBackground {
background: none;
border: none;
height: auto;
}
._740174f3d6a2c8fe-inlineContainer ._740174f3d6a2c8fe-accessoryBar {
align-items: center;
border-top: none;
box-sizing: border-box;
height: var(--custom-channel-textarea-text-area-height);
}
._740174f3d6a2c8fe-flushContainer {
background: unset;
border: none;
}
._740174f3d6a2c8fe-flushContainer ._740174f3d6a2c8fe-inner {
-webkit-padding-start: 0;
padding-inline-start: 0;
}
._740174f3d6a2c8fe-flushContainer ._740174f3d6a2c8fe-accessoryBar {
align-items: flex-start;
border-top: none;
}
._740174f3d6a2c8fe-inner {
display: flex;
position: relative;
-webkit-padding-start: calc(var(--space-16) - 1px);
padding-inline-start: calc(var(--space-16) - 1px);
}
._740174f3d6a2c8fe-innerDisabled {
cursor: not-allowed;
}
._740174f3d6a2c8fe-sansAttachButton {
-webkit-padding-start: calc(var(--space-16) - 1px);
padding-inline-start: calc(var(--space-16) - 1px);
}
._740174f3d6a2c8fe-sansAttachButtonCreateThread {
-webkit-padding-start: 10px;
padding-inline-start: 10px;
}
._740174f3d6a2c8fe-sansAttachButtonCreatePost,
._740174f3d6a2c8fe-sansAttachButtonUserProfileReply {
-webkit-padding-start: 0;
padding-inline-start: 0;
}
._740174f3d6a2c8fe-attachButton {
margin-inline: calc((var(--space-xs) + var(--space-6)) * -1) 10px;
}
._740174f3d6a2c8fe-textArea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
border: none;
box-sizing: border-box;
color: var(--text-default);
font-size: 1rem;
font-weight: var(--font-weight-normal);
height: var(--custom-channel-textarea-text-area-height);
line-height: 1.375rem;
min-height: var(--custom-channel-textarea-text-area-height);
padding-inline: 0 10px;
resize: none;
width: 100%;
}
._740174f3d6a2c8fe-textArea::-moz-placeholder {
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
-moz-user-select: none;
user-select: none;
white-space: nowrap;
}
._740174f3d6a2c8fe-textArea::placeholder {
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
white-space: nowrap;
}
._740174f3d6a2c8fe-textAreaSlate {
box-sizing: border-box;
padding: 0;
}
._740174f3d6a2c8fe-textAreaThreadCreation {
min-height: 66px;
}
._740174f3d6a2c8fe-profileBioInput {
min-height: 100%;
}
._740174f3d6a2c8fe-profileBioInput > div {
height: 100%;
}
._740174f3d6a2c8fe-hiddenAppLauncherAnchor {
align-self: center;
height: 0;
visibility: hidden;
width: 0;
}
._740174f3d6a2c8fe-overlayInlineReply {
height: 100%;
min-height: 100%;
-webkit-padding-end: 0 !important;
padding-inline-end: 0 !important;
}
._740174f3d6a2c8fe-textAreaForPostCreation {
padding: 0 !important;
-webkit-margin-start: 0 !important;
margin-inline-start: 0 !important;
}
._740174f3d6a2c8fe-textAreaForOverlayInlineReply,
._740174f3d6a2c8fe-textAreaForUserProfile {
font-size: 0.875rem;
}
._740174f3d6a2c8fe-textAreaCustomGift[role="textbox"] {
box-sizing: border-box;
height: 100%;
position: absolute !important;
}
@media (-webkit-max-device-pixel-ratio: 1) {
.theme-light ._740174f3d6a2c8fe-textArea {
font-weight: var(--font-weight-medium);
}
}
._740174f3d6a2c8fe-textAreaDisabled {
pointer-events: none;
}
._740174f3d6a2c8fe-buttons {
display: flex;
flex-direction: row;
height: var(--custom-channel-textarea-text-area-height);
position: -webkit-sticky;
position: sticky;
top: 0;
-webkit-margin-end: 6px;
align-items: center;
gap: var(--space-8);
margin-inline-end: 6px;
}
._740174f3d6a2c8fe-buttons._740174f3d6a2c8fe-reducedGap {
gap: var(--space-4);
}
._740174f3d6a2c8fe-spacer {
align-self: center;
background-color: var(--border-subtle);
height: 22px;
margin-inline: var(--space-4);
width: 1px;
}
._740174f3d6a2c8fe-buttons > ._740174f3d6a2c8fe-spacer:last-child {
display: none;
}
.has-webkit-scrollbar ._740174f3d6a2c8fe-buttons {
-webkit-margin-end: 0;
margin-inline-end: 0;
}
._740174f3d6a2c8fe-buttonContainer {
align-items: center;
display: flex;
}
._740174f3d6a2c8fe-button {
box-sizing: border-box;
margin-inline: 0;
min-height: var(--space-32);
min-width: var(--space-32);
padding: 0;
}
._740174f3d6a2c8fe-emojiButton {
border-radius: 8px;
transition-duration: 0.2s;
}
._740174f3d6a2c8fe-emojiButton:hover {
background-color: var(--interactive-background-selected);
}
._740174f3d6a2c8fe-stickerIcon {
height: 20px !important;
width: 20px !important;
}
._740174f3d6a2c8fe-stickerButton {
transition:
background-color 0.2s,
transform 0.2s;
}
._740174f3d6a2c8fe-stickerButtonWithNotification {
margin-top: 1px;
padding-inline: 2px;
}
._740174f3d6a2c8fe-messageConfettiButton:hover ._740174f3d6a2c8fe-messageConfettiIcon,
._740174f3d6a2c8fe-messageConfettiIcon._740174f3d6a2c8fe-active {
color: var(--text-brand) !important;
}
.full-motion ._740174f3d6a2c8fe-messageConfettiButton:hover {
animation: _740174f3d6a2c8fe-wiggle 0.75s ease-in-out;
}
@keyframes _740174f3d6a2c8fe-wiggle {
0% {
transform: rotate(0);
}
30% {
transform: rotate(8deg);
}
40% {
transform: rotate(8deg);
}
80% {
transform: rotate(-6deg);
}
to {
transform: rotate(0deg);
}
}
._740174f3d6a2c8fe-floatingBars {
margin-bottom: 0;
min-height: 0;
}
._740174f3d6a2c8fe-floatingBars ._740174f3d6a2c8fe-newMemberActionBar {
margin-inline: 0;
}
._740174f3d6a2c8fe-stackedBars {
background: var(--background-surface-higher);
}
._740174f3d6a2c8fe-stackedBars > :not(:last-child) {
border-bottom: 1px solid var(--border-subtle);
}
._740174f3d6a2c8fe-floatingBars:empty + ._740174f3d6a2c8fe-stackedBars:nth-child(2),
._740174f3d6a2c8fe-stackedBars:first-child {
border-start-end-radius: var(--radius-sm);
border-start-start-radius: var(--radius-sm);
}
._740174f3d6a2c8fe-stackedBars:not(:last-child) {
border-bottom: 1px solid var(--border-subtle);
}
._740174f3d6a2c8fe-sparkles {
height: 150%;
inset-inline-start: -10px;
position: absolute;
top: -10px;
width: 150%;
}
._740174f3d6a2c8fe-expressionPickerPositionLayer {
inset-inline-start: 86px;
}
.theme-dark.custom-theme-background ._740174f3d6a2c8fe-stackedBars {
background: var(--background-gradient-lowest, var(--background-base-lower));
}
.theme-dark.custom-theme-background ._740174f3d6a2c8fe-textAreaMobileThemed {
margin-top: 16px;
}
.theme-light.custom-theme-background ._740174f3d6a2c8fe-stackedBars {
background: var(--background-gradient-lower, var(--background-base-lower));
}
.theme-light.custom-theme-background ._740174f3d6a2c8fe-textAreaMobileThemed {
margin-top: 16px;
}
.theme-brand ._740174f3d6a2c8fe-inner {
background-color: var(--brand-400);
}
.theme-brand ._740174f3d6a2c8fe-textArea {
color: var(--opacity-white-68);
}
.theme-brand ._740174f3d6a2c8fe-textArea::-moz-placeholder {
color: var(--opacity-white-28);
}
.theme-brand ._740174f3d6a2c8fe-textArea::placeholder {
color: var(--opacity-white-28);
}
._740174f3d6a2c8fe-textArea:not(._740174f3d6a2c8fe-textAreaSlate) {
box-sizing: border-box;
min-height: var(--custom-channel-textarea-text-area-height);
padding: calc((var(--custom-channel-textarea-text-area-height) - var(--chat-markup-line-height)) / 2) 0;
}
.enable-forced-colors ._740174f3d6a2c8fe-scrollableContainer {
overflow-y: auto;
-webkit-padding-end: 12px;
padding-inline-end: 12px;
}
.enable-forced-colors ._740174f3d6a2c8fe-scrollableContainer::-webkit-scrollbar {
width: 8px;
}
.enable-forced-colors ._740174f3d6a2c8fe-scrollableContainer::-webkit-scrollbar-track {
border-radius: 0 8px 8px 0;
}
.enable-forced-colors ._740174f3d6a2c8fe-scrollableContainer::-webkit-scrollbar-thumb,
.enable-forced-colors ._740174f3d6a2c8fe-scrollableContainer::-webkit-scrollbar-track {
border-width: 1px;
}
.enable-forced-colors ._740174f3d6a2c8fe-scrollableContainer::-webkit-scrollbar-thumb {
background-color: CanvasText;
}
._740174f3d6a2c8fe-announcementScrollableContainer {
max-height: calc(var(--custom-channel-textarea-text-area-max-height) + 80px);
}
._908e20001ad67812-divider {
align-items: center;
border-top: thin solid var(--border-subtle);
box-sizing: border-box;
display: flex;
flex: 0 0 auto;
height: 0;
justify-content: center;
pointer-events: none;
position: relative;
z-index: 1;
--divider-color: var(--status-danger);
}
.custom-theme-background ._908e20001ad67812-divider {
border-top-color: var(--border-strong);
}
.low-saturation ._908e20001ad67812-divider {
--divider-color: var(--red-430);
}
.background-opacity-low ._908e20001ad67812-divider,
.background-opacity-medium ._908e20001ad67812-divider {
opacity: 0.5;
}
.background-opacity-high ._908e20001ad67812-divider {
opacity: 0.8;
}
._908e20001ad67812-isUnread,
.custom-theme-background ._908e20001ad67812-isUnread {
border-color: var(--divider-color);
}
._908e20001ad67812-hasContent {
inset-inline: auto;
position: relative;
}
._908e20001ad67812-endCap {
align-items: center;
border-radius: 0 4px 4px 0;
box-sizing: border-box;
color: var(--white);
display: flex;
font-size: 10px;
font-weight: var(--font-weight-bold);
height: 13px;
inset-inline-end: 0;
justify-content: center;
line-height: 9px;
padding-block: 0;
padding-inline: 1px 4px;
position: absolute;
text-transform: uppercase;
top: -7px;
-webkit-border-start: none;
border-inline-start: none;
}
._908e20001ad67812-unreadPill {
background-color: var(--divider-color);
}
._908e20001ad67812-unreadPillCap {
display: block;
height: 13px;
inset-inline-start: -8px;
position: absolute;
top: 0;
}
._908e20001ad67812-unreadPillCapStroke {
color: var(--divider-color);
fill: var(--divider-color);
}
._908e20001ad67812-content {
border-radius: 8px;
color: var(--text-muted);
display: block;
flex: 0 0 auto;
font-size: 12px;
font-weight: var(--font-weight-semibold);
line-height: 13px;
margin-top: -1px;
padding: 2px 4px;
-webkit-padding-start: var(--space-4);
background: var(--background-gradient-chat, var(--background-base-lower));
padding-inline-start: var(--space-4);
}
._908e20001ad67812-isUnread ._908e20001ad67812-content {
color: var(--divider-color);
}
.a4cf0b7f9c0b1603-stickerPreviews {
padding-block: 10px;
padding-inline: 16px 0;
}
.a4cf0b7f9c0b1603-stickerPreviewContainer {
display: inline-block;
position: relative;
}
.a4cf0b7f9c0b1603-stickerPreview {
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
.a4cf0b7f9c0b1603-stickerPreviewDivider {
-webkit-margin-start: 16px;
margin-inline-start: 16px;
}
.a4cf0b7f9c0b1603-closeButton {
color: var(--interactive-text-default);
cursor: pointer;
inset-inline-end: 0;
line-height: 0;
position: absolute;
top: 0;
z-index: 1;
}
.a4cf0b7f9c0b1603-closeButton:hover {
color: var(--interactive-text-hover);
}
.a4cf0b7f9c0b1603-closeIconContainer {
background: var(--channeltextarea-background);
border-radius: 100%;
}
.a4cf0b7f9c0b1603-closeIcon {
height: 16px;
width: 16px;
}
.e876a81258d10c05-closeButton {
color: var(--interactive-text-default);
cursor: pointer;
flex: 0 0 auto;
line-height: 0;
padding-block: 8px;
padding-inline: var(--space-12);
}
.e876a81258d10c05-closeButton:hover {
color: var(--interactive-text-hover);
}
.e876a81258d10c05-closeIcon {
height: 16px;
width: 16px;
}
._8452288fe5be9b1d-heading-sm\/normal {
font-family: var(--font-display);
font-size: 14px;
font-weight: 400;
line-height: 1.2857142857142858;
}
._8452288fe5be9b1d-heading-sm\/normal._8452288fe5be9b1d-fontScaling {
font-size: 0.875rem;
}
._8452288fe5be9b1d-heading-sm\/medium {
font-family: var(--font-display);
font-size: 14px;
font-weight: 500;
line-height: 1.2857142857142858;
}
._8452288fe5be9b1d-heading-sm\/medium._8452288fe5be9b1d-fontScaling {
font-size: 0.875rem;
}
._8452288fe5be9b1d-heading-sm\/semibold {
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
line-height: 1.2857142857142858;
}
._8452288fe5be9b1d-heading-sm\/semibold._8452288fe5be9b1d-fontScaling {
font-size: 0.875rem;
}
._8452288fe5be9b1d-heading-sm\/bold {
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
line-height: 1.2857142857142858;
}
._8452288fe5be9b1d-heading-sm\/bold._8452288fe5be9b1d-fontScaling {
font-size: 0.875rem;
}
._8452288fe5be9b1d-heading-sm\/extrabold {
font-family: var(--font-display);
font-size: 14px;
font-weight: 800;
line-height: 1.2857142857142858;
}
._8452288fe5be9b1d-heading-sm\/extrabold._8452288fe5be9b1d-fontScaling {
font-size: 0.875rem;
}
._8452288fe5be9b1d-heading-md\/normal {
font-family: var(--font-display);
font-size: 16px;
font-weight: 400;
line-height: 1.25;
}
._8452288fe5be9b1d-heading-md\/normal._8452288fe5be9b1d-fontScaling {
font-size: 1rem;
}
._8452288fe5be9b1d-heading-md\/medium {
font-family: var(--font-display);
font-size: 16px;
font-weight: 500;
line-height: 1.25;
}
._8452288fe5be9b1d-heading-md\/medium._8452288fe5be9b1d-fontScaling {
font-size: 1rem;
}
._8452288fe5be9b1d-heading-md\/semibold {
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
line-height: 1.25;
}
._8452288fe5be9b1d-heading-md\/semibold._8452288fe5be9b1d-fontScaling {
font-size: 1rem;
}
._8452288fe5be9b1d-heading-md\/bold {
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
line-height: 1.25;
}
._8452288fe5be9b1d-heading-md\/bold._8452288fe5be9b1d-fontScaling {
font-size: 1rem;
}
._8452288fe5be9b1d-heading-md\/extrabold {
font-family: var(--font-display);
font-size: 16px;
font-weight: 800;
line-height: 1.25;
}
._8452288fe5be9b1d-heading-md\/extrabold._8452288fe5be9b1d-fontScaling {
font-size: 1rem;
}
._8452288fe5be9b1d-heading-lg\/normal {
font-family: var(--font-display);
font-size: 20px;
font-weight: 400;
line-height: 1.2;
}
._8452288fe5be9b1d-heading-lg\/normal._8452288fe5be9b1d-fontScaling {
font-size: 1.25rem;
}
._8452288fe5be9b1d-heading-lg\/medium {
font-family: var(--font-display);
font-size: 20px;
font-weight: 500;
line-height: 1.2;
}
._8452288fe5be9b1d-heading-lg\/medium._8452288fe5be9b1d-fontScaling {
font-size: 1.25rem;
}
._8452288fe5be9b1d-heading-lg\/semibold {
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
line-height: 1.2;
}
._8452288fe5be9b1d-heading-lg\/semibold._8452288fe5be9b1d-fontScaling {
font-size: 1.25rem;
}
._8452288fe5be9b1d-heading-lg\/bold {
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
line-height: 1.2;
}
._8452288fe5be9b1d-heading-lg\/bold._8452288fe5be9b1d-fontScaling {
font-size: 1.25rem;
}
._8452288fe5be9b1d-heading-lg\/extrabold {
font-family: var(--font-display);
font-size: 20px;
font-weight: 800;
line-height: 1.2;
}
._8452288fe5be9b1d-heading-lg\/extrabold._8452288fe5be9b1d-fontScaling {
font-size: 1.25rem;
}
._8452288fe5be9b1d-heading-xl\/normal {
font-family: var(--font-display);
font-size: 24px;
font-weight: 400;
line-height: 1.25;
}
._8452288fe5be9b1d-heading-xl\/normal._8452288fe5be9b1d-fontScaling {
font-size: 1.5rem;
}
._8452288fe5be9b1d-heading-xl\/medium {
font-family: var(--font-display);
font-size: 24px;
font-weight: 500;
line-height: 1.25;
}
._8452288fe5be9b1d-heading-xl\/medium._8452288fe5be9b1d-fontScaling {
font-size: 1.5rem;
}
._8452288fe5be9b1d-heading-xl\/semibold {
font-family: var(--font-display);
font-size: 24px;
font-weight: 600;
line-height: 1.25;
}
._8452288fe5be9b1d-heading-xl\/semibold._8452288fe5be9b1d-fontScaling {
font-size: 1.5rem;
}
._8452288fe5be9b1d-heading-xl\/bold {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
line-height: 1.25;
}
._8452288fe5be9b1d-heading-xl\/bold._8452288fe5be9b1d-fontScaling {
font-size: 1.5rem;
}
._8452288fe5be9b1d-heading-xl\/extrabold {
font-family: var(--font-display);
font-size: 24px;
font-weight: 800;
line-height: 1.25;
}
._8452288fe5be9b1d-heading-xl\/extrabold._8452288fe5be9b1d-fontScaling {
font-size: 1.5rem;
}
._8452288fe5be9b1d-heading-xxl\/normal {
font-family: var(--font-display);
font-size: 32px;
font-weight: 400;
line-height: 1.25;
}
._8452288fe5be9b1d-heading-xxl\/normal._8452288fe5be9b1d-fontScaling {
font-size: 2rem;
}
._8452288fe5be9b1d-heading-xxl\/medium {
font-family: var(--font-display);
font-size: 32px;
font-weight: 500;
line-height: 1.25;
}
._8452288fe5be9b1d-heading-xxl\/medium._8452288fe5be9b1d-fontScaling {
font-size: 2rem;
}
._8452288fe5be9b1d-heading-xxl\/semibold {
font-family: var(--font-display);
font-size: 32px;
font-weight: 600;
line-height: 1.25;
}
._8452288fe5be9b1d-heading-xxl\/semibold._8452288fe5be9b1d-fontScaling {
font-size: 2rem;
}
._8452288fe5be9b1d-heading-xxl\/bold {
font-family: var(--font-display);
font-size: 32px;
font-weight: 700;
line-height: 1.25;
}
._8452288fe5be9b1d-heading-xxl\/bold._8452288fe5be9b1d-fontScaling {
font-size: 2rem;
}
._8452288fe5be9b1d-heading-xxl\/extrabold {
font-family: var(--font-display);
font-size: 32px;
font-weight: 800;
line-height: 1.25;
}
._8452288fe5be9b1d-heading-xxl\/extrabold._8452288fe5be9b1d-fontScaling {
font-size: 2rem;
}
._8452288fe5be9b1d-eyebrow {
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.3333333333333333;
text-transform: uppercase;
}
._8452288fe5be9b1d-eyebrow._8452288fe5be9b1d-fontScaling {
font-size: 0.75rem;
}
._8452288fe5be9b1d-heading-deprecated-12\/normal {
font-family: var(--font-display);
font-size: 12px;
font-weight: 400;
line-height: 1.3333333333333333;
}
._8452288fe5be9b1d-heading-deprecated-12\/normal._8452288fe5be9b1d-fontScaling {
font-size: 0.75rem;
}
._8452288fe5be9b1d-heading-deprecated-12\/medium {
font-family: var(--font-display);
font-size: 12px;
font-weight: 500;
line-height: 1.3333333333333333;
}
._8452288fe5be9b1d-heading-deprecated-12\/medium._8452288fe5be9b1d-fontScaling {
font-size: 0.75rem;
}
._8452288fe5be9b1d-heading-deprecated-12\/semibold {
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
line-height: 1.3333333333333333;
}
._8452288fe5be9b1d-heading-deprecated-12\/semibold._8452288fe5be9b1d-fontScaling {
font-size: 0.75rem;
}
._8452288fe5be9b1d-heading-deprecated-12\/bold {
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
line-height: 1.3333333333333333;
}
._8452288fe5be9b1d-heading-deprecated-12\/bold._8452288fe5be9b1d-fontScaling {
font-size: 0.75rem;
}
._8452288fe5be9b1d-heading-deprecated-12\/extrabold {
font-family: var(--font-display);
font-size: 12px;
font-weight: 800;
line-height: 1.3333333333333333;
}
._8452288fe5be9b1d-heading-deprecated-12\/extrabold._8452288fe5be9b1d-fontScaling {
font-size: 0.75rem;
}
._8452288fe5be9b1d-redesign\/heading-18\/bold {
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
line-height: 1.3333333333333333;
}
._8452288fe5be9b1d-redesign\/heading-18\/bold._8452288fe5be9b1d-fontScaling {
font-size: 1.125rem;
}
._8452288fe5be9b1d-text-xxs\/normal {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 400;
line-height: 1.2;
}
._8452288fe5be9b1d-text-xxs\/normal._8452288fe5be9b1d-fontScaling {
font-size: 0.625rem;
}
._8452288fe5be9b1d-text-xxs\/medium {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 500;
line-height: 1.2;
}
._8452288fe5be9b1d-text-xxs\/medium._8452288fe5be9b1d-fontScaling {
font-size: 0.625rem;
}
._8452288fe5be9b1d-text-xxs\/semibold {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 600;
line-height: 1.2;
}
._8452288fe5be9b1d-text-xxs\/semibold._8452288fe5be9b1d-fontScaling {
font-size: 0.625rem;
}
._8452288fe5be9b1d-text-xxs\/bold {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 700;
line-height: 1.2;
}
._8452288fe5be9b1d-text-xxs\/bold._8452288fe5be9b1d-fontScaling {
font-size: 0.625rem;
}
._8452288fe5be9b1d-text-xs\/normal {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 400;
line-height: 1.3333333333333333;
}
._8452288fe5be9b1d-text-xs\/normal._8452288fe5be9b1d-fontScaling {
font-size: 0.75rem;
}
._8452288fe5be9b1d-text-xs\/medium {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 500;
line-height: 1.3333333333333333;
}
._8452288fe5be9b1d-text-xs\/medium._8452288fe5be9b1d-fontScaling {
font-size: 0.75rem;
}
._8452288fe5be9b1d-text-xs\/semibold {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 600;
line-height: 1.3333333333333333;
}
._8452288fe5be9b1d-text-xs\/semibold._8452288fe5be9b1d-fontScaling {
font-size: 0.75rem;
}
._8452288fe5be9b1d-text-xs\/bold {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 700;
line-height: 1.3333333333333333;
}
._8452288fe5be9b1d-text-xs\/bold._8452288fe5be9b1d-fontScaling {
font-size: 0.75rem;
}
._8452288fe5be9b1d-text-sm\/normal {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 400;
line-height: 1.2857142857142858;
}
._8452288fe5be9b1d-text-sm\/normal._8452288fe5be9b1d-fontScaling {
font-size: 0.875rem;
}
._8452288fe5be9b1d-text-sm\/medium {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 500;
line-height: 1.2857142857142858;
}
._8452288fe5be9b1d-text-sm\/medium._8452288fe5be9b1d-fontScaling {
font-size: 0.875rem;
}
._8452288fe5be9b1d-text-sm\/semibold {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 600;
line-height: 1.2857142857142858;
}
._8452288fe5be9b1d-text-sm\/semibold._8452288fe5be9b1d-fontScaling {
font-size: 0.875rem;
}
._8452288fe5be9b1d-text-sm\/bold {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 700;
line-height: 1.2857142857142858;
}
._8452288fe5be9b1d-text-sm\/bold._8452288fe5be9b1d-fontScaling {
font-size: 0.875rem;
}
._8452288fe5be9b1d-text-md\/normal {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 400;
line-height: 1.25;
}
._8452288fe5be9b1d-text-md\/normal._8452288fe5be9b1d-fontScaling {
font-size: 1rem;
}
._8452288fe5be9b1d-text-md\/medium {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 500;
line-height: 1.25;
}
._8452288fe5be9b1d-text-md\/medium._8452288fe5be9b1d-fontScaling {
font-size: 1rem;
}
._8452288fe5be9b1d-text-md\/semibold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 600;
line-height: 1.25;
}
._8452288fe5be9b1d-text-md\/semibold._8452288fe5be9b1d-fontScaling {
font-size: 1rem;
}
._8452288fe5be9b1d-text-md\/bold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 700;
line-height: 1.25;
}
._8452288fe5be9b1d-text-md\/bold._8452288fe5be9b1d-fontScaling {
font-size: 1rem;
}
._8452288fe5be9b1d-text-lg\/normal {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 400;
line-height: 1.2;
}
._8452288fe5be9b1d-text-lg\/normal._8452288fe5be9b1d-fontScaling {
font-size: 1.25rem;
}
._8452288fe5be9b1d-text-lg\/medium {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 500;
line-height: 1.2;
}
._8452288fe5be9b1d-text-lg\/medium._8452288fe5be9b1d-fontScaling {
font-size: 1.25rem;
}
._8452288fe5be9b1d-text-lg\/semibold {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 600;
line-height: 1.2;
}
._8452288fe5be9b1d-text-lg\/semibold._8452288fe5be9b1d-fontScaling {
font-size: 1.25rem;
}
._8452288fe5be9b1d-text-lg\/bold {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 700;
line-height: 1.2;
}
._8452288fe5be9b1d-text-lg\/bold._8452288fe5be9b1d-fontScaling {
font-size: 1.25rem;
}
._8452288fe5be9b1d-redesign\/message-preview\/normal {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 400;
line-height: 1.3333333333333333;
}
._8452288fe5be9b1d-redesign\/message-preview\/normal._8452288fe5be9b1d-fontScaling {
font-size: 0.9375rem;
}
._8452288fe5be9b1d-redesign\/message-preview\/medium {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 500;
line-height: 1.3333333333333333;
}
._8452288fe5be9b1d-redesign\/message-preview\/medium._8452288fe5be9b1d-fontScaling {
font-size: 0.9375rem;
}
._8452288fe5be9b1d-redesign\/message-preview\/semibold {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 600;
line-height: 1.3333333333333333;
}
._8452288fe5be9b1d-redesign\/message-preview\/semibold._8452288fe5be9b1d-fontScaling {
font-size: 0.9375rem;
}
._8452288fe5be9b1d-redesign\/message-preview\/bold {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 700;
line-height: 1.3333333333333333;
}
._8452288fe5be9b1d-redesign\/message-preview\/bold._8452288fe5be9b1d-fontScaling {
font-size: 0.9375rem;
}
._8452288fe5be9b1d-redesign\/channel-title\/normal {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 400;
line-height: 1.375;
}
._8452288fe5be9b1d-redesign\/channel-title\/normal._8452288fe5be9b1d-fontScaling {
font-size: 1rem;
}
._8452288fe5be9b1d-redesign\/channel-title\/medium {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 500;
line-height: 1.375;
}
._8452288fe5be9b1d-redesign\/channel-title\/medium._8452288fe5be9b1d-fontScaling {
font-size: 1rem;
}
._8452288fe5be9b1d-redesign\/channel-title\/semibold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 600;
line-height: 1.375;
}
._8452288fe5be9b1d-redesign\/channel-title\/semibold._8452288fe5be9b1d-fontScaling {
font-size: 1rem;
}
._8452288fe5be9b1d-redesign\/channel-title\/bold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 700;
line-height: 1.375;
}
._8452288fe5be9b1d-redesign\/channel-title\/bold._8452288fe5be9b1d-fontScaling {
font-size: 1rem;
}
._8452288fe5be9b1d-display-sm {
font-family: var(--font-headline);
font-size: 20px;
font-weight: 800;
line-height: 1;
}
._8452288fe5be9b1d-display-sm._8452288fe5be9b1d-fontScaling {
font-size: 1.25rem;
}
._8452288fe5be9b1d-display-md {
font-family: var(--font-headline);
font-size: 34px;
font-weight: 800;
line-height: 1.0588235294117647;
}
._8452288fe5be9b1d-display-md._8452288fe5be9b1d-fontScaling {
font-size: 2.125rem;
}
._8452288fe5be9b1d-display-lg {
font-family: var(--font-headline);
font-size: 44px;
font-weight: 800;
line-height: 0.9545454545454546;
}
._8452288fe5be9b1d-display-lg._8452288fe5be9b1d-fontScaling {
font-size: 2.75rem;
}
._8452288fe5be9b1d-code {
font-family: var(--font-code);
font-size: 12px;
font-weight: 700;
line-height: 1.3333333333333333;
}
._8452288fe5be9b1d-code._8452288fe5be9b1d-fontScaling {
font-size: 0.75rem;
}
._8452288fe5be9b1d-bar {
display: flex;
flex-direction: row;
-webkit-padding-start: 16px;
align-items: center;
padding-bottom: 2px;
padding-inline-start: 16px;
padding-top: 2px;
}
._8452288fe5be9b1d-commandInfo {
align-items: baseline;
display: flex;
flex: 1 1 auto;
font-size: 14px;
font-weight: var(--font-weight-medium);
gap: 8px;
line-height: 16px;
}
._8452288fe5be9b1d-name {
color: var(--interactive-text-active);
font-size: 16px;
font-weight: var(--font-weight-semibold);
line-height: 20px;
}
._8452288fe5be9b1d-description {
color: var(--interactive-text-default);
}
._8452288fe5be9b1d-description,
._8452288fe5be9b1d-error {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._8452288fe5be9b1d-error {
color: var(--red-400);
}
._8452288fe5be9b1d-actions {
align-items: center;
display: flex;
flex: 0 0 auto;
}
._4930d551a52be017-bar {
align-items: center;
background: var(--background-surface-higher);
border-radius: 8px 8px 0 0;
display: flex;
flex-direction: row;
gap: 8px;
justify-content: start;
padding: var(--space-8) var(--space-16);
}
._841c8f861f7b2704-clipContainer {
margin-top: 0;
overflow: hidden;
padding-top: 3px;
}
._841c8f861f7b2704-container {
display: flex;
flex-direction: column;
}
._841c8f861f7b2704-replyBar,
._841c8f861f7b2704-threadSuggestionBar {
background: var(--background-base-lower);
background-color: unset;
border-bottom: none;
cursor: pointer;
}
.theme-dark.custom-theme-background ._841c8f861f7b2704-replyBar,
.theme-dark.custom-theme-background ._841c8f861f7b2704-threadSuggestionBar {
background: var(--background-gradient-lowest, var(--background-base-lower));
}
.theme-light.custom-theme-background ._841c8f861f7b2704-replyBar,
.theme-light.custom-theme-background ._841c8f861f7b2704-threadSuggestionBar {
background: var(--background-gradient-lower, var(--background-base-lower));
}
._841c8f861f7b2704-replyBar {
align-items: center;
border-start-end-radius: 8px;
border-start-start-radius: 8px;
display: grid;
grid-template-columns: 1fr auto;
}
._841c8f861f7b2704-threadSuggestionBar {
border-top: 1px solid var(--border-subtle);
box-shadow: 0 3px 0 var(--background-base-lower);
display: flex;
flex-direction: row;
padding-bottom: 7px;
padding-top: 7px;
}
._841c8f861f7b2704-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-webkit-margin-start: var(--space-16);
margin-inline-start: var(--space-16);
}
._841c8f861f7b2704-replyLabel {
flex: 1 1 auto;
}
._841c8f861f7b2704-name {
font-weight: var(--font-weight-semibold);
}
._841c8f861f7b2704-actions {
flex: 0 0 auto;
-webkit-margin-end: var(--space-4);
margin-inline-end: var(--space-4);
}
._841c8f861f7b2704-actions,
._841c8f861f7b2704-mentionButton {
align-items: center;
display: flex;
}
._841c8f861f7b2704-mentionButton {
cursor: pointer;
padding: 8px 12px;
text-transform: uppercase;
}
._841c8f861f7b2704-mentionIcon {
height: 16px;
width: 16px;
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
._841c8f861f7b2704-separator {
background-color: var(--border-subtle);
height: 20px;
width: 1px;
}
._841c8f861f7b2704-createThreadButton {
margin-inline: 8px;
white-space: nowrap;
}
.d901142d0e363e66-bar {
align-items: center;
background: var(--background-surface-higher);
border-radius: 8px 8px 0 0;
display: flex;
flex-direction: row;
gap: 8px;
justify-content: start;
padding: var(--space-8) var(--space-16);
}
.d901142d0e363e66-error {
color: var(--red-400);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._258ba11ae2f6eb73-small {
height: 16px;
width: 16px;
}
._258ba11ae2f6eb73-medium {
height: 24px;
width: 24px;
}
._258ba11ae2f6eb73-large {
height: 40px;
width: 40px;
}
._183e81c0d76dd7cd-container {
display: flex;
flex-direction: column;
margin-inline: 16px;
overflow: hidden;
}
._183e81c0d76dd7cd-banner {
align-items: center;
background-color: var(--background-base-lowest);
border-start-end-radius: 8px;
border-start-start-radius: 8px;
display: flex;
flex-grow: 1;
padding: 8px 16px 16px;
}
._183e81c0d76dd7cd-text {
flex-grow: 1;
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
._183e81c0d76dd7cd-clickable {
cursor: pointer;
}
._183e81c0d76dd7cd-channelIcon {
color: var(--channel-icon);
height: 20px;
padding: 4px;
width: 20px;
}
._183e81c0d76dd7cd-iconCircle {
align-items: center;
background-color: var(--brand-500);
border-radius: 10px;
display: flex;
height: 20px;
justify-content: center;
width: 20px;
}
._183e81c0d76dd7cd-nextIcon {
color: var(--interactive-text-active);
}
._183e81c0d76dd7cd-completed {
color: var(--status-positive);
}
.b7b2cf04dd1b67d3-container {
align-items: center;
display: flex;
flex-direction: column;
margin: auto;
text-align: center;
width: 400px;
}
.b7b2cf04dd1b67d3-header {
margin-bottom: 24px;
}
.b7b2cf04dd1b67d3-description {
margin-bottom: 40px;
}
.b7b2cf04dd1b67d3-splashImage {
width: 223px;
}
.b7b2cf04dd1b67d3-settings {
margin-top: 96px;
}
.b7b2cf04dd1b67d3-modal {
margin-bottom: 48px;
margin-top: 40px;
}
.b7b2cf04dd1b67d3-blockedPaymentsModalContent,
.b7b2cf04dd1b67d3-blockedPaymentsModalHeader {
background-color: var(--modal-background);
}
.b7b2cf04dd1b67d3-blockedPaymentsModalHeader {
border-radius: 4px 4px 0 0;
}
.b7b2cf04dd1b67d3-blockedPaymentsModalContent {
border-radius: 0 0 4px 4px;
}
.b7b2cf04dd1b67d3-blockedPaymentsWarningIcon {
-webkit-margin-end: 10px;
margin-inline-end: 10px;
}
.b7b2cf04dd1b67d3-blockedPaymentsWarning {
background-color: var(--background-base-lower);
color: var(--text-default);
display: flex;
justify-items: center;
margin-bottom: 16px;
margin-top: 16px;
padding: 16px 22px;
}
.theme-dark .b7b2cf04dd1b67d3-blockedPaymentsWarning {
border-color: var(--primary-700);
}
.theme-light .b7b2cf04dd1b67d3-blockedPaymentsWarning {
border-color: var(--primary-200);
}
._0f69281f1a3e716b-breadcrumbs {
display: flex;
justify-content: center;
overflow: hidden;
}
._0f69281f1a3e716b-breadcrumbWrapper {
align-items: center;
display: flex;
flex-grow: 0;
font-weight: var(--font-weight-semibold);
}
._0f69281f1a3e716b-breadcrumbFinalWrapper {
overflow: hidden;
}
._0f69281f1a3e716b-breadcrumbArrow {
color: var(--text-muted);
height: 18px;
margin: 0 11px;
width: 18px;
}
.e7b36efa701226e4-pill {
align-items: center;
border: 1px solid var(--border-normal);
border-radius: var(--radius-lg);
display: flex;
justify-content: center;
padding: var(--space-8) var(--space-12);
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.e7b36efa701226e4-pillGradient {
background: linear-gradient(90deg, rgba(155, 29, 165, 0.35) 0, rgba(30, 35, 83, 0.35) 120%), var(--background-base-lower);
}
.theme-light .e7b36efa701226e4-pillGradient {
background: linear-gradient(90deg, rgba(155, 29, 165, 0.1) 0, rgba(30, 35, 83, 0.1) 120%), var(--background-base-lower);
}
.e7b36efa701226e4-pillText {
line-height: 1;
padding-top: 0.75px;
text-transform: uppercase;
}
.fc02493233163480-badgeContainer {
-webkit-margin-start: var(--space-16);
margin-inline-start: var(--space-16);
margin-top: var(--space-8);
}
.d5200e6d16a6b1af-container,
.d5200e6d16a6b1af-headerContainer {
position: relative;
}
.d5200e6d16a6b1af-headerContainer {
align-items: flex-end;
border-start-end-radius: calc(var(--radius-md) - 1px);
border-start-start-radius: calc(var(--radius-md) - 1px);
display: flex;
height: 120px;
min-height: 120px;
padding: 0 var(--space-16) 0;
}
.d5200e6d16a6b1af-headerContainer.d5200e6d16a6b1af-containerBottomPadding {
padding-bottom: var(--space-12);
}
.d5200e6d16a6b1af-bigWumpus {
height: 159px;
inset-inline-end: 41px;
position: absolute;
top: 28px;
z-index: 1000;
}
.d5200e6d16a6b1af-wumpus {
height: 117px;
inset-inline-end: 35px;
position: absolute;
top: 12px;
}
.d5200e6d16a6b1af-bigCloud {
inset-inline-start: calc(50% - 60px);
opacity: 0.25;
position: absolute;
top: 39px;
transform: translateX(-50%);
width: 120px;
}
.d5200e6d16a6b1af-mediumCloud {
inset-inline-start: 28px;
opacity: 0.35;
position: absolute;
top: 22px;
width: 74px;
}
.d5200e6d16a6b1af-smallCloud {
inset-inline-end: 39px;
opacity: 0.25;
position: absolute;
top: 58px;
width: 59px;
}
.d5200e6d16a6b1af-closeButtonPosition {
inset-inline-end: 12px;
position: absolute;
top: 12px;
}
.d5200e6d16a6b1af-textContainer {
gap: var(--space-16);
max-width: 55%;
}
.d5200e6d16a6b1af-headerTextWrapper,
.d5200e6d16a6b1af-textContainer {
display: flex;
flex-direction: column;
}
.d5200e6d16a6b1af-headerTextWrapper {
background-color: var(--background-base-low);
gap: var(--space-12);
justify-content: center;
padding-bottom: var(--space-12);
padding-top: var(--space-24);
text-align: center;
}
.d5200e6d16a6b1af-oneStepCheckoutTextWrapper {
background-color: var(--background-base-low);
padding: var(--space-16) var(--space-16) var(--space-12);
}
.d5200e6d16a6b1af-wordmark {
height: 22px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.d5200e6d16a6b1af-bodyGradientPadding {
height: 24px;
}
.d5200e6d16a6b1af-bodyGradientContainer {
bottom: -24px;
height: 30px;
margin: 0 var(--space-8);
overflow: hidden;
position: absolute;
width: calc(100% - 16px);
}
.d5200e6d16a6b1af-bodyGradient {
background: linear-gradient(0deg, transparent 0, var(--background-base-low) 46.63%);
bottom: 0;
height: 48px;
position: absolute;
width: 100%;
z-index: 1;
}
@media screen and (max-height: 550px), screen and (max-width: 485px) {
.d5200e6d16a6b1af-headerContainer {
border-radius: 0;
}
}
.d5200e6d16a6b1af-nitroText {
font-size: 24px;
font-style: italic;
font-weight: 900;
line-height: 27px;
text-transform: uppercase;
}
.d5200e6d16a6b1af-betaBadgeContainer {
bottom: calc(100% + 8px);
inset-inline-start: 0;
position: absolute;
}
.b66356d2eff474d5-headerBackground {
box-sizing: border-box;
display: flex;
flex-direction: column;
min-height: 114px;
padding: var(--space-20);
position: relative;
width: calc(100% + 2px);
-webkit-margin-start: -1px;
border-start-end-radius: var(--radius-md);
border-start-start-radius: var(--radius-md);
margin-inline-start: -1px;
margin-top: -2px;
}
@media screen and (max-height: 550px), screen and (max-width: 485px) {
.b66356d2eff474d5-headerBackground {
border-radius: 0;
}
}
.b66356d2eff474d5-tier2HeaderBackground {
background-image: linear-gradient(41.27deg, var(--premium-tier-2-purple-for-gradients) 20.01%, var(--premium-tier-2-purple-for-gradients-2) 56.27%, var(--premium-tier-2-pink-for-gradients) 92.19%);
}
.b66356d2eff474d5-snow {
height: 100%;
inset-inline-start: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
.b66356d2eff474d5-closeIcon {
color: var(--text-strong);
opacity: 1;
}
.b66356d2eff474d5-headerTop {
position: relative;
width: 100%;
}
.b66356d2eff474d5-headerIcon {
color: var(--white);
height: 22px;
width: auto;
}
.b66356d2eff474d5-headerIcon.b66356d2eff474d5-nonTier2 {
height: 35px;
}
.b66356d2eff474d5-price {
align-self: flex-end;
background-color: var(--white);
border-radius: 3px;
color: var(--brand-500);
font-size: 14px;
font-weight: var(--font-weight-medium);
line-height: 1.71;
margin-top: 20px;
padding: 2px 12px;
position: relative;
}
.b66356d2eff474d5-closeButton {
color: var(--white) !important;
}
.b66356d2eff474d5-closeButton:hover {
background-color: hsla(0, 0%, 100%, 0.04) !important;
}
.b66356d2eff474d5-trialBadge {
inset-inline-start: 0;
position: absolute;
top: 43px;
}
.b66356d2eff474d5-trialBadgeContainer {
align-items: center;
background: var(--white);
border-radius: 10px;
display: flex;
justify-content: center;
margin-top: 8px;
max-height: 32px;
max-width: 150px;
text-align: start;
text-transform: uppercase;
}
.b66356d2eff474d5-trialOfferText {
-webkit-background-clip: text;
background-clip: text;
background-image: linear-gradient(93.74deg, #8847c6 0.65%, #ac46c3 50.46%, #ad5b91 91.96%);
color: transparent;
line-height: 12px;
padding: 4px 8px;
}
.b66356d2eff474d5-trialOfferText.b66356d2eff474d5-tier0TrialOffer {
background-image: var(--custom-premium-colors-premium-gradient-tier-0);
}
.b66356d2eff474d5-trialBadgeSparkles {
inset-inline-start: 4px;
position: absolute;
top: 43px;
}
._387d4c8530610e7f-tier2Animation {
position: relative;
}
._387d4c8530610e7f-panningAnimation {
position: absolute;
top: 0;
inset-inline: 0;
bottom: 22px;
overflow: hidden;
}
._387d4c8530610e7f-panningAnimationInner {
background-size: 100% 100%;
filter: saturate(var(--saturation-factor, 1));
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
}
._387d4c8530610e7f-tier2Background {
background-image: url(/assets/083b1bde1c6b39a3.svg);
opacity: 0.2;
}
._387d4c8530610e7f-tier2Foreground {
background-image: url(/assets/ae4a4071a85dcaa6.svg);
}
._387d4c8530610e7f-guildWrapper {
position: relative;
}
._387d4c8530610e7f-guildBackground {
top: 0;
inset-inline: 0;
bottom: 0;
}
._387d4c8530610e7f-guildBackground,
._387d4c8530610e7f-guildStar {
position: absolute;
}
._387d4c8530610e7f-sequencedAnimation {
filter: saturate(var(--saturation-factor, 1));
}
.b54a5b2f01b57ad8-modalHeader {
background-image: linear-gradient(var(--modal-background), var(--modal-background));
background-position: 0 10px;
background-repeat: no-repeat;
background-size: 100% calc(100% - 20px);
margin-bottom: -20px;
overflow: clip;
padding-bottom: 0;
}
.b54a5b2f01b57ad8-modalHeaderCustomGift {
align-items: center;
background-image: unset;
background-size: unset;
border-bottom: none;
display: flex;
justify-content: space-between;
margin-bottom: 0;
padding-bottom: 0;
}
.b54a5b2f01b57ad8-closeButton {
-webkit-margin-start: auto;
margin-inline-start: auto;
padding: 0;
}
.b54a5b2f01b57ad8-closeButtonInner {
height: 24px;
}
.b54a5b2f01b57ad8-header {
flex-shrink: 0;
}
body .b54a5b2f01b57ad8-headerAnimation {
border-start-end-radius: 4px;
border-start-start-radius: 4px;
position: absolute;
top: 0;
inset-inline: 50% 0;
bottom: -22px;
min-width: 440px;
overflow: hidden;
transform: translateX(-50%);
width: 100%;
}
@media (max-width: 485px) {
.b54a5b2f01b57ad8-headerAnimation {
min-width: auto !important;
}
}
.b54a5b2f01b57ad8-headerAnimation {
border-start-end-radius: calc(var(--radius-md) - 1px);
border-start-start-radius: calc(var(--radius-md) - 1px);
}
.ae16b80e83c215ab-seasonalGiftBoxHeaderIcon {
align-self: center;
bottom: -11px;
position: absolute;
width: 260px;
z-index: 1;
}
.ae16b80e83c215ab-container {
align-items: center;
background-image: unset;
background-size: unset;
border-radius: 4px 4px 0 0;
display: flex;
justify-content: center;
position: relative;
}
.ae16b80e83c215ab-closeButton {
margin: var(--modal-vertical-padding) var(--modal-horizontal-padding);
-webkit-margin-start: auto;
margin-inline-start: auto;
}
.ca0af25a2bbb4e6d-spinner {
border-radius: 4px;
max-height: 720px;
min-height: 200px;
}
._29abc88a80d256a5-cardIcon {
box-shadow: 0 1px 3px var(--opacity-black-8);
flex: 0 0 auto;
position: relative;
text-indent: -9999em;
transform-origin: 50% 50%;
transform-style: preserve-3d;
}
.full-motion ._29abc88a80d256a5-cardIcon {
transition: transform 0.3s ease-in-out;
}
._29abc88a80d256a5-cardIcon:after,
._29abc88a80d256a5-cardIcon:before {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
._29abc88a80d256a5-cardIcon:before {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background-image: url(/assets/22f7eeb9ea9904c1.svg);
background-size: 100% 100%;
border-radius: 2px;
transform: rotateY(0deg);
}
._29abc88a80d256a5-cardIcon:after,
._29abc88a80d256a5-cardIcon:before {
content: "";
display: block;
height: 100%;
inset-inline-start: 0;
position: absolute;
top: 0;
width: 100%;
}
._29abc88a80d256a5-cardIcon:after {
background: url(/assets/fea1d83d02c90c67.svg);
background-size: 100% 100%;
transform: rotateY(180deg);
}
._29abc88a80d256a5-cardIcon._29abc88a80d256a5-visa:before {
background-image: url(/assets/4c049942fdde71f8.svg);
}
._29abc88a80d256a5-cardIcon._29abc88a80d256a5-american-express:before,
._29abc88a80d256a5-cardIcon._29abc88a80d256a5-amex:before {
background-image: url(/assets/e415725e0e3a87fb.svg);
}
._29abc88a80d256a5-cardIcon._29abc88a80d256a5-discover:before {
background-image: url(/assets/9a5413553cab204a.svg);
}
._29abc88a80d256a5-cardIcon._29abc88a80d256a5-master-card:before,
._29abc88a80d256a5-cardIcon._29abc88a80d256a5-mastercard:before {
background-image: url(/assets/ba865ff6773d1876.svg);
}
._29abc88a80d256a5-cardIcon._29abc88a80d256a5-paypal:before {
background-image: url(/assets/0b87743361cfb797.svg);
}
._29abc88a80d256a5-cardIcon._29abc88a80d256a5-paymentRequest:before {
background-image: url(/assets/a500e0b04a325513.svg);
}
._29abc88a80d256a5-cardIcon._29abc88a80d256a5-gPay:before {
background-image: url(/assets/04e197da860c981f.svg);
}
._29abc88a80d256a5-cardIcon._29abc88a80d256a5-sofort:before {
background-image: url(/assets/eb22e43f6f710d3b.svg);
}
._29abc88a80d256a5-cardIcon._29abc88a80d256a5-przelewy24:before {
background-image: url(/assets/3d961164938e62d7.svg);
}
._29abc88a80d256a5-cardIcon._29abc88a80d256a5-giropay:before {
background-image: url(/assets/fcb798c4bf712284.svg);
}
._29abc88a80d256a5-cardIcon._29abc88a80d256a5-paysafecard:before {
background-image: url(/assets/0b47f9360f12b1fa.svg);
}
._29abc88a80d256a5-cardIcon._29abc88a80d256a5-gcash:before {
background-image: url(/assets/7e5579c4c73ca390.svg);
}
._29abc88a80d256a5-cardIcon._29abc88a80d256a5-grabpay:before {
background-image: url(/assets/224f56365db6763e.svg);
}
._29abc88a80d256a5-cardIcon._29abc88a80d256a5-momo_wallet:before {
background-image: url(/assets/0dbebb1dde8de002.svg);
}
._29abc88a80d256a5-cardIcon._29abc88a80d256a5-venmo:before {
background-image: url(/assets/9bb2cc8906a18ba2.svg);
}
._29abc88a80d256a5-cardIcon._29abc88a80d256a5-kakaopay:before {
background-image: url(/assets/2a5fa2783cb39764.svg);
}
._29abc88a80d256a5-cardIcon._29abc88a80d256a5-gopay_wallet:before {
background-image: url(/assets/637bf6beddb5589b.svg);
}
._29abc88a80d256a5-cardIcon._29abc88a80d256a5-bancontact:before {
background-image: url(/assets/ce90dd2b5978b623.svg);
}
._29abc88a80d256a5-cardIcon._29abc88a80d256a5-eps:before {
background-image: url(/assets/3f80791089be55d4.svg);
}
._29abc88a80d256a5-cardIcon._29abc88a80d256a5-ideal:before {
background-image: url(/assets/160f818e8dc66a17.svg);
}
._29abc88a80d256a5-cardIcon._29abc88a80d256a5-cash_app:before {
background-image: url(/assets/3de97fb87787f20b.svg);
}
._29abc88a80d256a5-cardIcon._29abc88a80d256a5-apple:before,
._29abc88a80d256a5-cardIcon._29abc88a80d256a5-apple_light:before {
background-image: url(/assets/824341c879ac6d59.svg);
}
.theme-light ._29abc88a80d256a5-cardIcon._29abc88a80d256a5-apple:before {
background-image: url(/assets/24de41d4bd8ef584.svg);
}
.theme-light ._29abc88a80d256a5-cardIcon._29abc88a80d256a5-apple_light:before {
background-image: url(/assets/824341c879ac6d59.svg);
}
.theme-light ._29abc88a80d256a5-cardIcon._29abc88a80d256a5-venmo:before {
background-image: url(/assets/1566a4fd747aba18.svg);
}
.reduce-motion ._29abc88a80d256a5-cardIcon {
transition: unset;
}
._29abc88a80d256a5-cardIconSmall {
height: 22px;
width: 32px;
}
._29abc88a80d256a5-cardIconMedium {
height: 44px;
width: 64px;
}
._29abc88a80d256a5-cardIconLarge {
height: 66px;
width: 96px;
}
._29abc88a80d256a5-cardIconXLarge {
height: 88px;
width: 128px;
}
._29abc88a80d256a5-flipped {
transform: rotateY(180deg);
}
._4151b19741c27892-buttonIcon {
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
._4151b19741c27892-button {
margin-bottom: 8px;
width: 200px !important;
}
._4151b19741c27892-button:last-child {
margin-bottom: 0;
}
._4151b19741c27892-connectionInstructions {
margin-top: 8px;
text-align: center;
}
._4151b19741c27892-paymentRequestIcon {
inset-inline-start: 8px;
margin: auto auto 25px;
top: 9px;
z-index: 1;
}
.theme-light ._4151b19741c27892-appleConnectorIcon {
box-shadow: none;
}
._92b20028694bb7d2-buttonIcon {
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
._92b20028694bb7d2-allPaymentsToggleButton {
color: var(--text-strong);
font-size: 14px;
font-weight: var(--font-weight-medium);
line-height: 18px;
margin: 20px auto 0;
padding: 4px 4px 0;
}
._92b20028694bb7d2-allPaymentsToggleButton:hover {
cursor: pointer;
}
._92b20028694bb7d2-allPaymentsSection {
padding-top: 24px;
}
._92b20028694bb7d2-hidden {
display: none;
}
._92b20028694bb7d2-SeparatorLower,
._92b20028694bb7d2-SeparatorUpper {
background: var(--border-subtle);
border: 0;
height: 1px;
width: 100%;
}
._92b20028694bb7d2-SeparatorUpper {
margin: 0 0 16px;
}
._92b20028694bb7d2-SeparatorLower {
margin: 16px 0 0;
}
._92b20028694bb7d2-container {
display: grid;
gap: var(--space-8);
grid-template-columns: 1fr 1fr;
}
@media (max-width: 485px) {
._92b20028694bb7d2-container {
grid-template-columns: 1fr;
}
}
._443626151bceff99-venmoIcon {
inset-inline-start: 8px;
margin: auto auto 25px;
top: 9px;
z-index: 1;
}
._443626151bceff99-connectionInstructions {
margin-top: 8px;
text-align: center;
}
._06c2b2abc360974e-row {
padding-top: 20px;
}
._06c2b2abc360974e-row:first-child {
padding-top: 0;
}
._06c2b2abc360974e-section {
box-sizing: border-box;
-webkit-padding-start: 20px;
flex: 0 1 auto;
padding-inline-start: 20px;
}
._06c2b2abc360974e-section:first-child {
-webkit-padding-start: 0;
padding-inline-start: 0;
}
._06c2b2abc360974e-width100 {
width: 100%;
}
._06c2b2abc360974e-width75 {
width: 75%;
}
._06c2b2abc360974e-width60 {
width: 60%;
}
._06c2b2abc360974e-width40 {
width: 40%;
}
._06c2b2abc360974e-width30 {
width: 30%;
}
._06c2b2abc360974e-width50 {
width: 50%;
}
._06c2b2abc360974e-width25 {
width: 25%;
}
._6181b237ed9969e8-modal {
overflow-x: hidden;
transform: translateZ(0);
}
._6181b237ed9969e8-planSelector {
margin-top: 20px;
}
._6181b237ed9969e8-form {
display: flex;
flex-direction: column;
flex-grow: 1;
max-height: 660px;
}
._6181b237ed9969e8-divider {
border-top: 1px solid;
margin: 0 20px;
position: relative;
}
._6181b237ed9969e8-content {
margin-bottom: 20px;
}
._6181b237ed9969e8-giftToggle {
margin-top: var(--space-8);
}
._6181b237ed9969e8-formTitle {
margin: 20px 0 10px;
}
._6181b237ed9969e8-errorBlock,
._6181b237ed9969e8-purchaseTerms {
margin-top: 20px;
}
._6181b237ed9969e8-invalidIcon {
height: 18px;
padding: 0 1px;
width: 18px;
}
._6181b237ed9969e8-choosePaymentSourceType {
margin-top: 20px;
}
._6181b237ed9969e8-buyButtonTooltipWrapper {
position: relative;
}
._6181b237ed9969e8-buyButtonTooltipTarget {
cursor: not-allowed;
inset: 0;
position: absolute;
z-index: 1;
}
._6181b237ed9969e8-backButtonSize {
height: 38px;
width: auto;
}
._6181b237ed9969e8-backButton {
padding: 0;
}
._6181b237ed9969e8-backButton:hover {
text-decoration: underline;
}
._6181b237ed9969e8-modalContent {
-webkit-overflow-scrolling: touch;
}
@media (max-width: 485px) and (max-height: 550px) {
._6181b237ed9969e8-form {
display: block;
}
._6181b237ed9969e8-modalContent {
height: auto;
}
}
.theme-dark ._6181b237ed9969e8-divider {
border-color: var(--primary-630);
}
.theme-light ._6181b237ed9969e8-divider {
border-color: hsl(var(--primary-200-hsl) / 0.6);
}
._6181b237ed9969e8-backButtonColor {
color: var(--text-default);
}
._2ef075ba87d46edc-note {
font-size: 12px;
margin-top: 20px;
position: relative;
}
._2ef075ba87d46edc-note ~ ._2ef075ba87d46edc-note {
margin-top: 8px;
}
._2ef075ba87d46edc-icon {
flex-shrink: 0;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
._2ef075ba87d46edc-large {
height: 20px;
width: 20px;
}
._2ef075ba87d46edc-small {
height: 14px;
width: 14px;
}
._2ef075ba87d46edc-colorWarning {
color: var(--yellow-300);
}
._2ef075ba87d46edc-colorError {
color: var(--status-danger);
}
._2ef075ba87d46edc-colorPrimary {
color: var(--text-muted);
}
._2ef075ba87d46edc-colorSecondary {
color: var(--text-default);
}
._4106ae7c1472c1de-wrapper {
background-color: var(--modal-background);
flex: 0 0 auto;
padding: var(--space-16) var(--space-16) var(--space-8);
-webkit-padding-start: var(--space-24);
padding-inline-start: var(--space-24);
}
.a8c622117370c730-content {
background-color: var(--modal-background);
border-radius: inherit;
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
}
.a8c622117370c730-breadcrumbsWrapper {
flex: 0 0 auto;
margin: 0 16px;
padding: 16px 0;
}
.a8c622117370c730-bodyWrapper {
display: flex;
flex: 1 1 auto;
flex-direction: column;
height: 100%;
min-height: 0;
position: relative;
}
.a8c622117370c730-scroller {
height: 100%;
padding: 0 16px 16px;
}
.a8c622117370c730-errorBlockWrapper {
padding: 16px 16px 0;
}
.a8c622117370c730-paymentNote {
padding: 0 16px;
}
.a8c622117370c730-loadingBlock {
height: 192px;
}
.a8c622117370c730-sequencer,
.a8c622117370c730-sequencerStatic {
align-items: flex-start;
display: flex;
flex-direction: column;
}
.a8c622117370c730-sequencerStatic {
flex: 1 1 auto;
}
.a8c622117370c730-sequencerAnimatedNode {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
}
._8b579725ff08eeaa-cardNumberWrapper {
position: relative;
}
._8b579725ff08eeaa-cardIcon {
inset-inline-start: 10px;
position: absolute;
top: 10px;
}
._8b579725ff08eeaa-cardInput {
background-color: var(--input-background-default);
border: 1px solid var(--input-border-default);
border-radius: var(--radius-sm);
padding: 10px 9px;
}
._8b579725ff08eeaa-hiddenDiv {
height: 0;
padding: 0;
visibility: hidden;
}
._8b579725ff08eeaa-cardNumberInput {
-webkit-padding-start: 55px;
padding-inline-start: 55px;
}
._8b579725ff08eeaa-cardInputFocused {
border-color: var(--text-link);
}
._8b579725ff08eeaa-cardInputError {
border-color: var(--status-danger);
}
.theme-dark ._8b579725ff08eeaa-inputPrefix {
opacity: 0.5;
}
.enable-forced-colors ._8b579725ff08eeaa-cardInput {
border: 1px solid ButtonText;
display: block;
}
.enable-forced-colors ._8b579725ff08eeaa-cardInput:focus,
.enable-forced-colors ._8b579725ff08eeaa-cardInput:hover {
border-color: Highlight;
}
.enable-forced-colors ._8b579725ff08eeaa-cardInputFocused {
border-color: Highlight;
}
.enable-forced-colors ._8b579725ff08eeaa-inputPrefix {
opacity: 1;
}
._3e8d57b333f5b109-cardBrands {
display: flex;
flex-wrap: wrap;
justify-content: end;
margin-bottom: -15px;
}
._3e8d57b333f5b109-cardFormHeader {
-webkit-margin-start: 5px;
margin-inline-start: 5px;
}
._3e8d57b333f5b109-cardFormHeader._3e8d57b333f5b109-jcb:before {
background-image: url(/assets/e8bf9bea0d018670.svg);
}
.theme-light ._3e8d57b333f5b109-cardFormHeader._3e8d57b333f5b109-jcb:before {
background-image: url(/assets/e8efae14b14ee8dd.svg);
}
._3e8d57b333f5b109-cardFormHeader._3e8d57b333f5b109-jcb_monochrome:before {
background-image: url(/assets/dcebba6e03f7a1f8.svg);
}
.theme-light ._3e8d57b333f5b109-cardFormHeader._3e8d57b333f5b109-jcb_monochrome:before {
background-image: url(/assets/3ec57733d5de83bd.svg);
}
._3e8d57b333f5b109-cardFormHeader._3e8d57b333f5b109-amex:before {
background-image: url(/assets/49f0d07c4a5edf19.svg);
}
.theme-light ._3e8d57b333f5b109-cardFormHeader._3e8d57b333f5b109-amex:before {
background-image: url(/assets/886d17f4a179ce9a.svg);
}
._3e8d57b333f5b109-cardFormHeader._3e8d57b333f5b109-amex_monochrome:before {
background-image: url(/assets/9e62f4a1513dbf78.svg);
}
.theme-light ._3e8d57b333f5b109-cardFormHeader._3e8d57b333f5b109-amex_monochrome:before {
background-image: url(/assets/2a2717437ecb9409.svg);
}
._3e8d57b333f5b109-cardFormHeader._3e8d57b333f5b109-mastercard:before {
background-image: url(/assets/61a8baaebf339a2c.svg);
}
.theme-light ._3e8d57b333f5b109-cardFormHeader._3e8d57b333f5b109-mastercard:before {
background-image: url(/assets/983c3fd5283d32f6.svg);
}
._3e8d57b333f5b109-cardFormHeader._3e8d57b333f5b109-mastercard_monochrome:before {
background-image: url(/assets/929007941f982dc3.svg);
}
.theme-light ._3e8d57b333f5b109-cardFormHeader._3e8d57b333f5b109-mastercard_monochrome:before {
background-image: url(/assets/2d35b5c00b617a15.svg);
}
._3e8d57b333f5b109-cardFormHeader._3e8d57b333f5b109-visa:before {
background-image: url(/assets/7149accdcaae7d2f.svg);
}
.theme-light ._3e8d57b333f5b109-cardFormHeader._3e8d57b333f5b109-visa:before {
background-image: url(/assets/4ae102bdf144a582.svg);
}
._3e8d57b333f5b109-cardFormHeader._3e8d57b333f5b109-visa_monochrome:before {
background-image: url(/assets/c58095d35f0201e3.svg);
}
.theme-light ._3e8d57b333f5b109-cardFormHeader._3e8d57b333f5b109-visa_monochrome:before {
background-image: url(/assets/bb1e18bcf1497322.svg);
}
._3e8d57b333f5b109-cardFormHeader._3e8d57b333f5b109-discover:before {
background-image: url(/assets/e449e7cba36f144c.svg);
}
.theme-light ._3e8d57b333f5b109-cardFormHeader._3e8d57b333f5b109-discover:before {
background-image: url(/assets/75b4bad7b0654bd8.svg);
}
._3e8d57b333f5b109-cardFormHeader._3e8d57b333f5b109-discover_monochrome:before {
background-image: url(/assets/9f626707af59b089.svg);
}
.theme-light ._3e8d57b333f5b109-cardFormHeader._3e8d57b333f5b109-discover_monochrome:before {
background-image: url(/assets/3be3e11e2b0d8996.svg);
}
._3e8d57b333f5b109-cardFormHeader._3e8d57b333f5b109-dinersclub:before {
background-image: url(/assets/b596cb9f6ccc2408.svg);
}
.theme-light ._3e8d57b333f5b109-cardFormHeader._3e8d57b333f5b109-dinersclub:before {
background-image: url(/assets/fc8d44ec7c50ab0e.svg);
}
._3e8d57b333f5b109-cardFormHeader._3e8d57b333f5b109-dinersclub_monochrome:before {
background-image: url(/assets/2ce5f42c5062092f.svg);
}
.theme-light ._3e8d57b333f5b109-cardFormHeader._3e8d57b333f5b109-dinersclub_monochrome:before {
background-image: url(/assets/3b5c40ec70355fde.svg);
}
._3e8d57b333f5b109-cardFormHeader._3e8d57b333f5b109-unionpay:before {
background-image: url(/assets/3472374445e1b6b0.svg);
}
.theme-light ._3e8d57b333f5b109-cardFormHeader._3e8d57b333f5b109-unionpay:before {
background-image: url(/assets/3472374445e1b6b0.svg);
}
._3e8d57b333f5b109-cardFormHeader._3e8d57b333f5b109-unionpay_monochrome:before {
background-image: url(/assets/f4a4e394e0c0b9f2.svg);
}
.theme-light ._3e8d57b333f5b109-cardFormHeader._3e8d57b333f5b109-unionpay_monochrome:before {
background-image: url(/assets/d1fe91ba5e5f4702.svg);
}
.af4c15d2c8c27108-body {
padding-bottom: 16px;
padding-top: 16px;
}
.d31d57c42ea0838e-body {
padding-bottom: 16px;
padding-top: 16px;
}
.d31d57c42ea0838e-nonTopInputWrapper {
padding-top: 20px;
}
.d31d57c42ea0838e-bankSelectionStub {
display: flex;
height: 243px;
justify-content: center;
}
.ceece4f260fd0d49-body {
margin: var(--space-16) 0;
padding: 0 4px;
}
.ceece4f260fd0d49-addressElementContainer,
.ceece4f260fd0d49-loadingContainer {
flex-direction: column;
}
.ceece4f260fd0d49-loadingContainer {
display: flex;
justify-content: center;
margin: var(--space-16) 0;
min-height: 240px;
}
.ceece4f260fd0d49-visible {
transform: translateX(0);
}
.full-motion .ceece4f260fd0d49-visible {
transition: transform 0.2s ease-out;
}
.ceece4f260fd0d49-rightToLeftEntry {
transform: translateX(100%);
}
.ceece4f260fd0d49-leftToRightEntry {
transform: translateX(-100%);
}
.ceece4f260fd0d49-hidden {
height: 0;
visibility: hidden;
}
.full-motion .ceece4f260fd0d49-hidden {
transition: transform 0.2s ease-out;
}
.ceece4f260fd0d49-cardElementContainer.ceece4f260fd0d49-visible,
.ceece4f260fd0d49-defaultPaymentElementContainer.ceece4f260fd0d49-visible {
min-height: 240px;
}
.ceece4f260fd0d49-customPaymentElementContainer.ceece4f260fd0d49-visible {
min-height: 160px;
}
.ceece4f260fd0d49-addressElementContainer.ceece4f260fd0d49-visible {
min-height: 500px;
}
.ceece4f260fd0d49-addressElementContainer.ceece4f260fd0d49-hidden {
height: 0;
min-height: 0;
}
._6a22b613ef2b2776-link {
color: var(--interactive-text-active);
font-size: 14px;
font-weight: var(--font-weight-semibold);
line-height: 18px;
}
._949a0e8fffd6f2d6-body {
align-items: center;
display: flex;
flex-direction: column;
}
._949a0e8fffd6f2d6-description {
margin-top: 8px;
text-align: center;
}
._9e82bf9b4a4ed5fa-body {
padding-bottom: 16px;
padding-top: 16px;
}
._52623796af0f8118-paymentRestrictionBannerContainer {
align-items: center;
border-radius: 4px;
display: flex;
flex-direction: row;
margin-bottom: 16px;
margin-top: 16px;
min-height: 48px;
padding-inline: 20px;
padding-bottom: 10px;
padding-top: 10px;
position: relative;
}
.theme-light ._52623796af0f8118-paymentRestrictionBannerContainer {
background: linear-gradient(90deg, #475cc6 0, #6045c1);
}
.theme-dark ._52623796af0f8118-paymentRestrictionBannerContainer {
background: linear-gradient(90deg, #475cc6 0, #6045c1);
}
._52623796af0f8118-paymentRestrictionBannerBackgroundImage {
background-image: url(/assets/bb502dc7cfcbbacc.svg);
background-repeat: no-repeat;
bottom: 0;
position: absolute;
top: 40%;
inset-inline: 78% 0;
}
._52623796af0f8118-appsIconContainer {
height: 28px;
width: 28px;
-webkit-padding-end: 12px;
padding-inline-end: 12px;
}
.theme-light ._52623796af0f8118-icon {
display: none;
}
.theme-light ._52623796af0f8118-iconDark {
filter: drop-shadow(0 1px 2px rgb(0 0 0/0.4));
height: 28px;
width: 28px;
}
.theme-dark ._52623796af0f8118-icon {
filter: drop-shadow(0 1px 2px rgb(0 0 0/0.4));
height: 28px;
width: 28px;
}
.theme-dark ._52623796af0f8118-iconDark {
display: none;
}
.adyen-checkout__spinner__wrapper {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
}
.adyen-checkout__spinner__wrapper--inline {
display: inline-block;
height: auto;
margin-right: 8px;
}
[dir="rtl"] .adyen-checkout__spinner__wrapper--inline {
margin-left: 8px;
margin-right: 0;
}
.adyen-checkout__spinner {
animation: rotate-spinner 1.5s linear infinite;
border: 3px solid #0075ff;
border-radius: 50%;
border-top-color: transparent;
height: 43px;
width: 43px;
}
.adyen-checkout__spinner--large {
height: 43px;
width: 43px;
}
.adyen-checkout__spinner--small {
border-width: 2px;
height: 16px;
width: 16px;
}
.adyen-checkout__spinner--medium {
height: 28px;
width: 28px;
}
@keyframes rotate-spinner {
0% {
transform: rotate(0deg);
}
to {
transform: rotate(1turn);
}
}
.adyen-checkout__button {
background: #00112c;
border: 0;
border-radius: 6px;
color: #fff;
cursor: pointer;
font-size: 1em;
font-weight: 500;
height: 48px;
margin: 0;
padding: 15px;
text-decoration: none;
transition:
background 0.3s ease-out,
box-shadow 0.3s ease-out;
width: 100%;
}
.adyen-checkout__button:focus {
box-shadow: 0 0 0 2px #3070ed;
outline: 0;
}
.adyen-checkout__button:hover {
background: #1c3045;
box-shadow:
0 0,
0 2px 4px -1px rgba(0, 0, 0, 0.2),
0 4px 5px 0 rgba(0, 0, 0, 0.14);
}
.adyen-checkout__button:active {
background: #3a4a5c;
}
.adyen-checkout__button:hover:focus {
box-shadow:
0 0 0 2px #3070ed,
0 3px 4px rgba(0, 15, 45, 0.2);
}
.adyen-checkout__button:disabled,
.adyen-checkout__button:disabled:hover {
box-shadow: none;
cursor: not-allowed;
opacity: 0.4;
-webkit-user-select: all;
-moz-user-select: all;
user-select: all;
}
.adyen-checkout__button.adyen-checkout__button--loading {
background: #687282;
box-shadow: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.adyen-checkout__button.adyen-checkout__button--pay {
display: flex;
justify-content: center;
margin-top: 24px;
}
.adyen-checkout__button.adyen-checkout__button--pay:disabled {
opacity: 0.4;
}
.adyen-checkout__button.adyen-checkout__button--standalone {
margin-top: 0;
}
.adyen-checkout__button.adyen-checkout__button--inline {
display: block;
font-size: 0.81em;
height: auto;
padding: 10px 8px;
width: auto;
}
.adyen-checkout__button.adyen-checkout__button--ghost {
background: none;
border: 0;
color: #00112c;
}
.adyen-checkout__button.adyen-checkout__button--ghost:hover {
background: #f7f8f9;
box-shadow: none;
}
.adyen-checkout__button.adyen-checkout__button--ghost:active {
background: #e6e9eb;
box-shadow: none;
}
.adyen-checkout__button.adyen-checkout__button--secondary {
background: #fff;
border: 1px solid #00112c;
color: #00112c;
padding: 10px 12px;
}
.adyen-checkout__button.adyen-checkout__button--secondary:hover {
background: #f7f8f9;
box-shadow:
0 2px 4px rgba(27, 42, 60, 0.2),
0 4px 5px rgba(27, 42, 60, 0.14);
}
.adyen-checkout__button.adyen-checkout__button--secondary:active,
.adyen-checkout__button.adyen-checkout__button--secondary:active:hover {
background: #f7f8f9;
box-shadow: none;
}
.adyen-checkout__button.adyen-checkout__button--secondary:disabled,
.adyen-checkout__button.adyen-checkout__button--secondary:disabled:hover {
background-color: #f7f8f9;
border-color: #99a3ad;
box-shadow: none;
cursor: not-allowed;
opacity: 0.5;
-webkit-user-select: all;
-moz-user-select: all;
user-select: all;
}
.adyen-checkout__button.adyen-checkout__button--secondary .adyen-checkout__spinner {
border-color: transparent #00112c #00112c;
}
.adyen-checkout__button.adyen-checkout__button--action {
background: rgba(0, 102, 255, 0.1);
border: 1px solid transparent;
color: #0075ff;
padding: 10px 12px;
}
.adyen-checkout__button.adyen-checkout__button--action:hover {
background: rgba(0, 102, 255, 0.2);
box-shadow: none;
}
.adyen-checkout__button.adyen-checkout__button--action:active,
.adyen-checkout__button.adyen-checkout__button--action:active:hover {
background: rgba(0, 102, 255, 0.3);
box-shadow: none;
}
.adyen-checkout__button.adyen-checkout__button--link {
background: transparent;
border: 1px solid transparent;
border-radius: 3px;
color: #0075ff;
font-weight: 400;
padding: 2px;
}
.adyen-checkout__button.adyen-checkout__button--link:hover {
background: transparent;
box-shadow: none;
text-decoration: underline;
}
.adyen-checkout__button.adyen-checkout__button--completed,
.adyen-checkout__button.adyen-checkout__button--completed:active,
.adyen-checkout__button.adyen-checkout__button--completed:active:hover,
.adyen-checkout__button.adyen-checkout__button--completed:hover {
background: #089a43;
color: #fff;
}
.adyen-checkout__button.adyen-checkout__button--completed .adyen-checkout__button__icon {
filter: brightness(0) invert(1);
}
.adyen-checkout__button__content {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
}
.adyen-checkout__button__icon {
margin-right: 12px;
}
[dir="rtl"] .adyen-checkout__button__icon {
margin-left: 12px;
margin-right: 0;
}
.adyen-checkout__button__text {
display: block;
justify-content: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.adyen-checkout__button .adyen-checkout__spinner {
border-color: transparent #fff #fff;
}
.checkout-secondary-button__text {
font-size: 0.85em;
margin-left: 5px;
margin-top: 1px;
}
.adyen-checkout__fieldset {
-webkit-margin-start: 0;
-webkit-margin-end: 0;
-webkit-padding-before: 0;
-webkit-padding-after: 0;
-webkit-padding-start: 0;
-webkit-padding-end: 0;
border: none;
display: block;
margin-inline-end: 0;
margin-inline-start: 0;
margin: 0;
padding-block-start: 0;
padding-bottom: 8px;
padding-block-end: 0;
padding-inline-end: 0;
padding-inline-start: 0;
width: 100%;
}
.adyen-checkout__fieldset:last-of-type {
padding-bottom: 0;
}
.adyen-checkout__fieldset + .adyen-checkout__fieldset {
margin-top: 16px;
}
.adyen-checkout__fieldset__title {
color: #687282;
display: block;
font-size: 0.68em;
font-weight: 700;
letter-spacing: 1px;
margin: 0;
padding: 0 0 12px;
text-transform: uppercase;
}
.adyen-checkout__field-group,
.adyen-checkout__fieldset__fields {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
}
@media (min-width: 480px) {
.adyen-checkout__field-group:last-of-type .adyen-checkout__field {
margin-bottom: 0;
}
}
.adyen-checkout__field-group:last-of-type .adyen-checkout__field:last-of-type,
:not(.adyen-checkout__field-group) > .adyen-checkout__field:last-of-type {
margin-bottom: 0;
}
.adyen-checkout__fieldset--readonly .adyen-checkout__fieldset__fields {
color: #00112c;
font-size: 0.81em;
line-height: 19px;
margin: 0;
}
.adyen-checkout__field {
display: block;
margin-bottom: 16px;
width: 100%;
}
.adyen-checkout__label {
display: block;
position: relative;
}
.adyen-checkout__helper-text,
.adyen-checkout__label__text {
color: #00112c;
display: block;
font-size: 0.81em;
font-weight: 400;
line-height: 13px;
padding-bottom: 5px;
}
.adyen-checkout__label-adornment--end {
position: absolute;
right: 0;
top: 0;
}
.adyen-checkout__helper-text {
color: #687282;
}
.adyen-checkout__label__text {
display: block;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.1s ease-out;
white-space: nowrap;
}
.adyen-checkout__label__text--error {
color: #c12424;
}
.adyen-checkout__label--focused .adyen-checkout__label__text {
color: #0075ff;
}
.adyen-checkout__error-text {
align-items: center;
color: #c12424;
display: flex;
font-size: 0.75em;
font-weight: 400;
margin-top: 4px;
}
.adyen-checkout__field-wrapper {
display: flex;
width: 100%;
}
@media (min-width: 480px) {
.adyen-checkout__field--20 {
width: 20%;
}
.adyen-checkout__field--30 {
width: 30%;
}
.adyen-checkout__field--40 {
width: 40%;
}
.adyen-checkout__field--50 {
width: 50%;
}
.adyen-checkout__field--60 {
width: 60%;
}
.adyen-checkout__field--70 {
width: 70%;
}
.adyen-checkout__field--80 {
width: 80%;
}
.adyen-checkout__field--col-70 {
width: calc(70% - 8px);
}
.adyen-checkout__field--col-30 {
width: calc(30% - 8px);
}
.adyen-checkout__field--col-50 {
width: calc(50% - 8px);
}
}
.adyen-checkout__field-wrapper > .adyen-checkout__field:first-child {
margin-right: 8px;
}
[dir="rtl"] .adyen-checkout__field-wrapper > .adyen-checkout__field:first-child {
margin-left: 8px;
margin-right: 0;
}
.adyen-checkout__field-wrapper > .adyen-checkout__field:nth-child(2) {
margin-left: 8px;
}
[dir="rtl"] .adyen-checkout__field-wrapper > .adyen-checkout__field:nth-child(2) {
margin-left: 0;
margin-right: 8px;
}
.adyen-checkout__field-wrapper:last-of-type > .adyen-checkout__field {
margin-bottom: 0;
}
.adyen-checkout__input {
background: #fff;
border: 1px solid #b9c4c9;
border-radius: 6px;
box-sizing: border-box;
caret-color: #0075ff;
color: #00112c;
display: block;
font-family: inherit;
font-size: 1em;
height: 40px;
outline: none;
padding: 5px 8px;
position: relative;
transition:
border 0.2s ease-out,
box-shadow 0.2s ease-out;
width: 100%;
}
.adyen-checkout__input:hover {
border-color: #99a3ad;
}
.adyen-checkout__input:required {
box-shadow: none;
}
.adyen-checkout__input--disabled,
.adyen-checkout__input[readonly] {
background: #e6e9eb;
border-color: #e6e9eb;
}
.adyen-checkout__input--disabled:hover {
border-color: #e6e9eb;
}
.adyen-checkout__input-wrapper {
display: block;
position: relative;
}
.adyen-checkout__input-wrapper--block {
display: block;
}
.adyen-checkout-input__inline-validation {
height: 16px;
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
width: 16px;
}
[dir="rtl"] .adyen-checkout-input__inline-validation {
left: 14px;
right: auto;
}
[dir="ltr"] .adyen-checkout-input__inline-validation {
left: auto;
right: 14px;
}
.adyen-checkout-input__inline-validation--valid {
color: #089a43;
}
.adyen-checkout-input__inline-validation--invalid {
color: #c12424;
}
.adyen-checkout__input--valid {
border-bottom-color: #089a43;
}
.adyen-checkout__input--error,
.adyen-checkout__input--error:hover,
.adyen-checkout__input--invalid,
.adyen-checkout__input--invalid:hover {
border-color: #c12424;
}
.adyen-checkout__input::-moz-placeholder {
color: #707070;
font-weight: 200;
}
.adyen-checkout__input::placeholder {
color: #707070;
font-weight: 200;
}
.adyen-checkout__input--date {
padding-right: 30px;
}
.adyen-checkout__input--focus,
.adyen-checkout__input--focus:hover,
.adyen-checkout__input:active,
.adyen-checkout__input:active:hover,
.adyen-checkout__input:focus,
.adyen-checkout__input:focus:hover {
border: 1px solid #0075ff;
box-shadow: 0 0 0 2px #3070ed;
}
.adyen-checkout__input[readonly],
.adyen-checkout__input[readonly]:hover {
background-color: #e6e9eb;
border-color: transparent;
color: #687282;
cursor: default;
}
.adyen-checkout__fieldset--personalDetails .adyen-checkout__field--gender .adyen-checkout__radio_group {
display: flex;
}
.adyen-checkout__fieldset--personalDetails .adyen-checkout__radio_group {
display: flex;
margin: 8px 0;
}
.adyen-checkout__fieldset--personalDetails .adyen-checkout__radio_group__input-wrapper {
margin-right: 20px;
}
.adyen-checkout__fieldset--personalDetails .adyen-checkout__radio_group__input-wrapper:last-child {
margin: 0;
}
.adyen-checkout__radio_group + .adyen-checkout-input__inline-validation {
display: none;
}
.adyen-checkout__radio_group__input {
opacity: 0;
position: absolute;
}
.adyen-checkout__radio_group__label {
color: inherit;
display: block;
font-size: 0.81em;
font-weight: 400;
line-height: 16px;
overflow: visible;
padding-bottom: 0;
padding-left: 24px;
position: relative;
}
.adyen-checkout__label--focused .adyen-checkout__radio_group__label {
color: inherit;
}
.adyen-checkout__radio_group__label:before {
background-color: #fff;
border: 1px solid #b9c4c9;
border-radius: 50%;
content: "";
height: 16px;
left: 0;
position: absolute;
top: 0;
transition:
border-color 0.2s ease-out,
box-shadow 0.2s ease-out;
width: 16px;
}
.adyen-checkout__radio_group__label:hover:before {
border-color: #99a3ad;
box-shadow: 0 0 0 2px #d4d9db;
cursor: pointer;
}
.adyen-checkout__radio_group__label:after {
background-color: #fff;
border-radius: 50%;
box-shadow: 0 1px 1px rgba(0, 15, 45, 0.25);
content: "";
display: block;
height: 6px;
left: 5px;
margin: 0 auto;
position: absolute;
top: 5px;
transform: scale(0);
transition: transform 0.2s ease-out;
width: 6px;
}
.adyen-checkout__radio_group__label:hover {
border-color: #0075ff;
cursor: pointer;
}
.adyen-checkout__radio_group__input:checked + .adyen-checkout__radio_group__label:before,
.adyen-checkout__radio_group__label--selected {
background-color: #0075ff;
border: 0;
transition: all 0.2s ease-out;
}
.adyen-checkout__radio_group__input:checked + .adyen-checkout__radio_group__label:after {
transform: scale(1);
}
.adyen-checkout__radio_group__input:focus + .adyen-checkout__radio_group__label:before {
border-color: #0075ff;
box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.4);
}
.adyen-checkout__radio_group__input:checked + .adyen-checkout__radio_group__label:hover:before,
.adyen-checkout__radio_group__input:checked:active + .adyen-checkout__radio_group__label:before,
.adyen-checkout__radio_group__input:checked:focus + .adyen-checkout__radio_group__label:before {
box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.4);
}
.adyen-checkout__radio_group__label.adyen-checkout__radio_group__label--invalid:before {
border: 1px solid #c12424;
}
.Select-module_adyen-checkout__dropdown__0Mj-n {
position: relative;
}
.Select-module_adyen-checkout__dropdown__button__yTyqq {
align-items: center;
cursor: pointer;
display: flex;
}
.Select-module_adyen-checkout__dropdown__button__yTyqq:after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7' fill='none'%3E%3Cpath fill='%23687282' d='M3.195 6.565a1 1 0 0 0 1.6 0l2.992-3.98a1 1 0 0 0-.8-1.602H1.013a1 1 0 0 0-.8 1.6z'/%3E%3C/svg%3E");
background-position: 50%;
background-repeat: no-repeat;
content: "";
height: 6px;
position: absolute;
right: 16px;
width: 8px;
}
[dir="rtl"] .Select-module_adyen-checkout__dropdown__button__yTyqq:after {
left: 16px;
right: auto;
}
.Select-module_adyen-checkout__dropdown__button--active__Ej-JR:after {
transform: rotate(180deg);
}
.Select-module_adyen-checkout__filter-input__CwPBS {
background: #fff;
border: 0;
caret-color: #0075ff;
color: #00112c;
font-family: inherit;
font-size: 1em;
height: 100%;
padding: 0;
width: 100%;
}
.Select-module_adyen-checkout__filter-input__CwPBS::-moz-placeholder {
color: #b9c4c9;
font-weight: 200;
}
.Select-module_adyen-checkout__filter-input__CwPBS::placeholder {
color: #b9c4c9;
font-weight: 200;
}
.Select-module_adyen-checkout__filter-input__CwPBS:active,
.Select-module_adyen-checkout__filter-input__CwPBS:focus {
outline: 0;
}
.Select-module_adyen-checkout__filter-input__CwPBS[readonly] {
background: #e6e9eb;
border-color: transparent;
color: #00112c;
cursor: not-allowed;
}
.Select-module_adyen-checkout__dropdown__list__YtEzj {
background: #fff;
display: none;
list-style: none;
margin: 0 0 50px;
overflow-y: auto;
padding: 0;
position: absolute;
width: 100%;
z-index: 1;
}
.Select-module_adyen-checkout__dropdown__list__YtEzj.Select-module_adyen-checkout__dropdown__list--active__Gegw2 {
display: block;
}
.Select-module_adyen-checkout__dropdown__element__ORU4- {
align-items: center;
display: flex;
}
.adyen-checkout__image {
opacity: 0;
transition: opacity 0.6s ease-out;
}
.adyen-checkout__image--loaded {
opacity: 1;
}
.adyen-checkout__dropdown__button-icon--left {
flex-direction: row-reverse;
justify-content: flex-end;
}
.adyen-checkout__dropdown__button-icon--left > img {
margin-left: 0;
margin-right: 12px;
}
.adyen-checkout__dropdown {
font-size: 1em;
max-width: 100%;
width: 100%;
}
.adyen-checkout__dropdown__button {
background: #fff;
border: 1px solid #b9c4c9;
border-radius: 6px;
color: #00112c;
font-size: 1em;
height: 40px;
line-height: 20px;
outline: 0;
padding: 7px 24px 7px 12px;
text-decoration: none;
transition:
border 0.2s ease-out,
box-shadow 0.2s ease-out;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
width: 100%;
}
[dir="rtl"] .adyen-checkout__dropdown__button {
padding: 7px 12px 7px 24px;
}
.adyen-checkout__dropdown__button:hover {
border-color: #99a3ad;
}
.adyen-checkout__dropdown__button__icon {
border-radius: 3px;
height: 26px;
margin-right: 12px;
max-width: 40px;
}
.adyen-checkout__dropdown__button--disabled {
opacity: 0.4;
}
.adyen-checkout__dropdown__button--active,
.adyen-checkout__dropdown__button--active:hover,
.adyen-checkout__dropdown__button:active,
.adyen-checkout__dropdown__button:focus {
border-color: #0075ff;
box-shadow: 0 0 0 2px #3070ed;
}
.adyen-checkout__dropdown__button--readonly,
.adyen-checkout__dropdown__button--readonly--active,
.adyen-checkout__dropdown__button--readonly:focus,
.adyen-checkout__dropdown__button--readonly:hover {
background: #e6e9eb;
border-color: transparent;
color: #00112c;
cursor: not-allowed;
}
.adyen-checkout__dropdown__button--readonly:after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7' fill='none'%3E%3Cpath fill='%23B9C4C9' d='M3.195 6.565a1 1 0 0 0 1.6 0l2.992-3.98a1 1 0 0 0-.8-1.602H1.013a1 1 0 0 0-.8 1.6z'/%3E%3C/svg%3E");
}
.adyen-checkout__dropdown__button--invalid {
border-color: #c12424;
}
.adyen-checkout__dropdown__button--valid {
border-bottom-color: #089a43;
}
.adyen-checkout__dropdown__button__text {
flex-grow: 1;
overflow: hidden;
pointer-events: none;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
}
.adyen-checkout__dropdown__button__secondary-text {
margin-right: 16px;
}
.adyen-checkout__dropdown__list {
border-radius: 6px;
box-shadow: 0 2px 7px rgba(0, 15, 45, 0.3);
max-height: 375px;
z-index: 2;
}
.adyen-checkout__dropdown__list.adyen-checkout__dropdown__list--active {
margin-top: 2px;
}
.adyen-checkout__dropdown__element {
border: 1px solid transparent;
cursor: pointer;
font-size: 0.81em;
-webkit-hyphens: auto;
hyphens: auto;
line-height: 20px;
outline: 0;
padding: 8px;
transition:
background 0.2s ease-out,
border-color 0.2s ease-out;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
word-break: break-word;
}
.adyen-checkout__dropdown__element .adyen-checkout__icon {
position: absolute;
right: 8px;
}
.adyen-checkout__dropdown__element:last-child {
border-bottom: 0;
}
.adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--active {
background: rgba(230, 233, 235, 0.6);
}
.adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--selected {
background: rgba(0, 102, 255, 0.1);
}
.adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--selected:active,
.adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--selected:focus,
.adyen-checkout__dropdown__element.adyen-checkout__dropdown__element--selected:hover {
background: rgba(0, 102, 255, 0.15);
}
.adyen-checkout__dropdown__element--disabled {
cursor: not-allowed;
opacity: 0.4;
}
.adyen-checkout__dropdown__element__icon {
border-radius: 3px;
margin-right: 12px;
max-height: 26px;
max-width: 40px;
}
.adyen-checkout__dropdown__element__text {
flex-grow: 1;
}
.adyen-checkout__dropdown__element__secondary-text:not(:last-child) {
margin-right: 8px;
}
.adyen-checkout__dropdown__element__flag {
margin-left: 8px;
margin-right: 10px;
max-height: 18px;
max-width: 27px;
}
.adyen-checkout__dropdown + .adyen-checkout-input__inline-validation {
right: 32px;
}
.adyen-checkout__address-search {
position: relative;
}
.adyen-checkout__address-search .adyen-checkout__dropdown__button:after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='%23687282' d='M6.5 11.9a4.5 4.5 0 0 0 2.6-.83l2.77 2.74c.13.13.3.19.48.19.38 0 .65-.29.65-.66a.63.63 0 0 0-.19-.46l-2.75-2.73a4.4 4.4 0 0 0 .92-2.7 4.48 4.48 0 0 0-8.98 0 4.48 4.48 0 0 0 4.5 4.45m0-.96a3.53 3.53 0 0 1-3.53-3.49 3.52 3.52 0 0 1 7.04 0c0 1.9-1.59 3.49-3.52 3.49Z'/%3E%3C/svg%3E");
background-position: 50%;
background-repeat: no-repeat;
content: "";
height: 16px;
left: 12px;
position: absolute;
width: 16px;
}
.adyen-checkout__address-search .adyen-checkout__dropdown__button--active:after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath fill='%2300112C' d='M6.5 11.9a4.5 4.5 0 0 0 2.6-.83l2.77 2.74c.13.13.3.19.48.19.38 0 .65-.29.65-.66a.63.63 0 0 0-.19-.46l-2.75-2.73a4.4 4.4 0 0 0 .92-2.7 4.48 4.48 0 0 0-8.98 0 4.48 4.48 0 0 0 4.5 4.45m0-.96a3.53 3.53 0 0 1-3.53-3.49 3.52 3.52 0 0 1 7.04 0c0 1.9-1.59 3.49-3.52 3.49Z'/%3E%3C/svg%3E");
transform: none;
}
.adyen-checkout__address-search .adyen-checkout__filter-input {
padding-left: 24px;
}
.adyen-checkout__address-search__manual-add {
position: absolute;
right: 0;
top: 0;
}
.adyen-checkout__address-search__manual-add .adyen-checkout__address-search__manual-add__button {
border: 0;
padding: 0;
}
.adyen-checkout__checkbox {
display: block;
}
.adyen-checkout__checkbox__label {
color: #00112c;
cursor: pointer;
display: inline-block;
font-size: 0.81em;
font-weight: 400;
line-height: 19px;
padding-left: 24px;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
[dir="rtl"] .adyen-checkout__checkbox__label {
padding-left: 0;
padding-right: 24px;
}
.adyen-checkout__checkbox__input {
opacity: 0;
pointer-events: none;
position: absolute;
}
.adyen-checkout__checkbox__input:checked + .adyen-checkout__checkbox__label:before {
opacity: 1;
}
.adyen-checkout__checkbox__input:checked + .adyen-checkout__checkbox__label:after {
background-color: #0075ff;
border: 1px solid #0075ff;
}
.adyen-checkout__checkbox__input:checked:hover + .adyen-checkout__checkbox__label:after {
border-color: #0075ff;
box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.4);
}
.adyen-checkout__checkbox__input:focus + .adyen-checkout__checkbox__label:after {
border: 1px solid #0075ff;
box-shadow: 0 0 0 2px #3070ed;
}
.adyen-checkout__checkbox__input:hover:not(:focus) + .adyen-checkout__checkbox__label:after {
border-color: #99a3ad;
box-shadow: 0 0 0 2px #d4d9db;
}
.adyen-checkout__checkbox__input + .adyen-checkout__checkbox__label:before {
border-color: transparent #fff #fff transparent;
border-radius: 0 2px 1px;
border-style: solid;
border-width: 1px 2px 2px 1px;
content: "";
height: 11px;
left: 1px;
opacity: 0;
position: absolute;
top: 2px;
transform: rotate(37deg);
transform-origin: 100% 100%;
transition: opacity 0.2s ease-out;
width: 6px;
z-index: 1;
}
[dir="rtl"] .adyen-checkout__checkbox__input + .adyen-checkout__checkbox__label:before {
left: auto;
right: 8px;
}
.adyen-checkout__checkbox__input + .adyen-checkout__checkbox__label:after {
background-color: #fff;
border: 1px solid #b9c4c9;
border-radius: 3px;
content: "";
height: 16px;
left: 0;
position: absolute;
top: 0;
transition:
background 0.15s ease-out,
border 0.05s ease-out,
box-shadow 0.1s ease-out;
width: 16px;
z-index: 0;
}
[dir="rtl"] .adyen-checkout__checkbox__input + .adyen-checkout__checkbox__label:after {
left: auto;
right: 0;
}
.adyen-checkout__field--consentCheckbox {
background: #e6e9eb;
border: 1px solid #e6e9eb;
border-radius: 6px;
padding: 14px 14px 13px;
}
[dir="rtl"] .adyen-checkout__field--consentCheckbox {
padding: 14px 14px 13px;
}
.adyen-checkout__field--consentCheckbox.adyen-checkout__field--error {
border-color: #c12424;
}
.adyen-checkout__field--consentCheckbox .adyen-checkout-input__inline-validation {
right: -5px;
top: 10px;
}
.adyen-checkout__open-invoice .adyen-checkout__fieldset--billingAddress {
padding-bottom: 8px;
}
.adyen-checkout__open-invoice .adyen-checkout__fieldset--deliveryAddress {
margin-top: 24px;
padding-bottom: 8px;
}
.adyen-checkout__open-invoice .adyen-checkout__input--separateDeliveryAddress {
margin-bottom: 0;
}
.adyen-checkout__open-invoice .adyen-checkout__field--consentCheckbox {
margin-top: 22px;
}
.adyen-checkout__input--separateDeliveryAddress + .adyen-checkout__checkbox__label {
margin-top: 16px;
}
.adyen-checkout-form-instruction {
color: #687282;
font-size: 0.81em;
font-weight: 400;
line-height: 19px;
margin-top: 0;
}
[dir="rtl"] .adyen-checkout-form-instruction {
padding-right: 0;
}
.adyen-checkout__amazonpay__button {
margin: auto;
}
.adyen-checkout__amazonpay .adyen-checkout__button--ghost {
display: block;
margin: 8px auto 0;
width: auto;
}
@supports (-webkit-appearance: -apple-pay-button) {
.ApplePayButton-module_apple-pay-button__l5g-d,
.ApplePayButton-module_apple-pay__gYjuP {
-webkit-appearance: -apple-pay-button;
}
.ApplePayButton-module_apple-pay-button__l5g-d {
cursor: pointer;
display: inline-block;
}
.ApplePayButton-module_apple-pay-button-black__istwW {
-apple-pay-button-style: #000;
}
.ApplePayButton-module_apple-pay-button-white__-wLaE {
-apple-pay-button-style: #fff;
}
.ApplePayButton-module_apple-pay-button-white-with-line__MlRq7 {
-apple-pay-button-style: white-outline;
}
.ApplePayButton-module_apple-pay-button--type-plain__ycfNl {
-apple-pay-button-type: plain;
}
.ApplePayButton-module_apple-pay-button--type-buy__9m8AB {
-apple-pay-button-type: buy;
}
.ApplePayButton-module_apple-pay-button--type-donate__HmRdK {
-apple-pay-button-type: donate;
}
.ApplePayButton-module_apple-pay-button--type-check-out__XdGWd {
-apple-pay-button-type: check-out;
}
.ApplePayButton-module_apple-pay-button--type-book__-v-VY {
-apple-pay-button-type: book;
}
.ApplePayButton-module_apple-pay-button--type-subscribe__WxWIF {
-apple-pay-button-type: subscribe;
}
.ApplePayButton-module_apple-pay-button--type-add-money__zeBA8 {
-apple-pay-button-type: add-money;
}
.ApplePayButton-module_apple-pay-button--type-contribute__G3E8e {
-apple-pay-button-type: contribute;
}
.ApplePayButton-module_apple-pay-button--type-order__ggI6j {
-apple-pay-button-type: order;
}
.ApplePayButton-module_apple-pay-button--type-reload__QbgLd {
-apple-pay-button-type: reload;
}
.ApplePayButton-module_apple-pay-button--type-rent__VzC-E {
-apple-pay-button-type: rent;
}
.ApplePayButton-module_apple-pay-button--type-support__6EjmY {
-apple-pay-button-type: support;
}
.ApplePayButton-module_apple-pay-button--type-tip__bdzGK {
-apple-pay-button-type: tip;
}
.ApplePayButton-module_apple-pay-button--type-top-up__Eb3qR {
-apple-pay-button-type: top-up;
}
}
@supports not (-webkit-appearance: -apple-pay-button) {
.ApplePayButton-module_apple-pay-button__l5g-d {
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 100% 60%;
border-radius: 5px;
box-sizing: border-box;
display: inline-block;
max-height: 64px;
min-height: 32px;
min-width: 200px;
padding: 0;
}
.ApplePayButton-module_apple-pay-button-black__istwW {
background-color: #000;
background-image: -webkit-named-image(apple-pay-logo-white);
}
.ApplePayButton-module_apple-pay-button-white-with-line__MlRq7,
.ApplePayButton-module_apple-pay-button-white__-wLaE {
background-color: #fff;
background-image: -webkit-named-image(apple-pay-logo-black);
}
.ApplePayButton-module_apple-pay-button-white-with-line__MlRq7 {
border: 0.5px solid #000;
}
}
.adyen-checkout__applepay__button {
height: 48px;
width: 240px;
}
.adyen-checkout__dropin .adyen-checkout__applepay__button {
width: 100%;
}
.adyen-checkout__issuer-button {
align-items: center;
background-color: #fff;
border: none;
border-radius: 6px;
box-shadow: inset 0 0 0 1px #b9c4c9;
cursor: pointer;
display: flex;
flex-basis: 47%;
flex-grow: 2;
font-size: 0.81em;
height: 40px;
padding: 0 12px;
transition:
background 0.3s ease-out,
box-shadow 0.3s ease-out;
}
.adyen-checkout__issuer-button:active {
color: #000;
}
.adyen-checkout__issuer-button:not(.adyen-checkout__issuer-button--selected):focus {
box-shadow: inset 0 0 0 2px #99a3ad;
outline: none;
}
.adyen-checkout__issuer-button:not(.adyen-checkout__issuer-button--selected):focus-visible {
box-shadow: inset 0 0 0 2px #99a3ad;
outline: none;
}
.adyen-checkout__issuer-button:not(.adyen-checkout__issuer-button--selected):hover {
box-shadow: inset 0 0 0 2px #99a3ad;
outline: none;
}
.adyen-checkout__issuer-button--selected {
background: #fff;
box-shadow: inset 0 0 0 2px #0075ff;
color: #0075ff;
font-weight: 500;
height: 40px;
transition: none;
}
.adyen-checkout__issuer-button-img {
margin-right: 8px;
max-height: 26px;
}
.adyen-checkout__issuer-button-group {
display: flex;
flex-wrap: wrap;
gap: 16px 16px;
}
.adyen-checkout__content-separator {
align-items: center;
color: #687282;
display: flex;
font-size: 13px;
justify-content: center;
line-height: 19px;
margin-bottom: 16px;
margin-top: 16px;
white-space: nowrap;
}
.adyen-checkout__content-separator:after,
.adyen-checkout__content-separator:before {
background: #e6e9eb;
content: "";
display: block;
height: 1px;
width: 100%;
}
.adyen-checkout__content-separator:after {
margin-left: 20px;
}
.adyen-checkout__content-separator:before {
margin-right: 20px;
}
.adyen-checkout__field--issuer-list {
margin-bottom: 0;
}
.adyen-checkout__issuer-list__termsAndConditions {
text-align: center;
}
.adyen-checkout-disclaimer__label {
color: #687282;
display: inline-block;
font-size: 0.81em;
font-weight: 400;
line-height: 19px;
margin-top: 16px;
padding-left: 0;
}
[dir="rtl"] .adyen-checkout-disclaimer__label {
padding-right: 0;
}
.adyen-checkout__card-input__form {
transition: opacity 0.25s ease-out;
}
.adyen-checkout__card__cardNumber {
max-width: 400px;
}
.adyen-checkout__card__cardNumber__input {
padding: 5px 8px;
}
.adyen-checkout__card__exp-date__input--oneclick {
font-weight: 400;
line-height: 30px;
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
}
.adyen-checkout__field--storedCard .adyen-checkout__input[readonly],
.adyen-checkout__field--storedCard .adyen-checkout__input[readonly]:hover {
color: #00112c;
}
.adyen-checkout__card__holderName,
.adyen-checkout__field--expiryDate,
.adyen-checkout__field--storedCard {
margin-bottom: 0;
}
.adyen-checkout__card-input .adyen-checkout__fieldset--billingAddress,
.adyen-checkout__card__holderName,
.adyen-checkout__card__kcp-authentication,
.adyen-checkout__card__socialSecurityNumber,
.adyen-checkout__installments,
.adyen-checkout__store-details {
margin-top: 16px;
}
.adyen-checkout__card-input.adyen-checkout__card-input--loading {
pointer-events: none;
}
.adyen-checkout__card__holderName:first-child {
margin: 0 0 16px;
}
.adyen-checkout__field--cardNumber .adyen-checkout__input--error .adyen-checkout__card__cardNumber__brandIcon,
.adyen-checkout__field--cardNumber .adyen-checkout__input--valid:not(.adyen-checkout__card__cardNumber__input--noBrand) + .adyen-checkout-input__inline-validation--valid {
display: none;
}
.adyen-checkout__field--securityCode.adyen-checkout__field--error .adyen-checkout__card__cvc__hint,
.adyen-checkout__field--securityCode.adyen-checkout__field--valid .adyen-checkout__card__cvc__hint {
opacity: 0;
}
@keyframes cvc-indicate-location {
0% {
opacity: 1;
}
to {
opacity: 0.3;
}
}
.adyen-checkout__label--focused .adyen-checkout__field__cvc--back-hint .adyen-checkout__card__cvc__hint--back .adyen-checkout__card__cvc__hint__location,
.adyen-checkout__label--focused .adyen-checkout__field__cvc--front-hint .adyen-checkout__card__cvc__hint--front .adyen-checkout__card__cvc__hint__location {
animation-direction: alternate;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-name: cvc-indicate-location;
}
.adyen-checkout__card__cvc__hint__wrapper {
align-items: center;
-webkit-backface-visibility: visible;
backface-visibility: visible;
display: flex;
height: 100%;
margin: 0 10px;
position: absolute;
right: 0;
top: 0;
transform: translateZ(0);
transform-origin: center;
transform-style: preserve-3d;
transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
width: 27px;
will-change: transform;
}
.adyen-checkout__field__cvc--front-hint.adyen-checkout__card__cvc__hint__wrapper {
transform: rotateY(180deg);
}
.adyen-checkout__card__cvc__hint {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
transition: opacity 0.1s linear;
}
.adyen-checkout__field__exp-date_hint_wrapper {
align-items: center;
bottom: 0;
display: flex;
position: absolute;
right: 0;
top: 0;
transition: opacity 0.1s linear;
}
.adyen-checkout__field__exp-date_hint_wrapper.adyen-checkout__field__exp-date_hint_wrapper--hidden {
opacity: 0;
}
.adyen-checkout__field__exp-date_hint {
height: 18px;
margin: 0 10px 0 0;
width: 27px;
}
.adyen-checkout__card__cvc__hint--front {
transform: rotateY(180deg);
}
@media (prefers-reduced-motion: reduce) {
.adyen-checkout__card__cvc__hint__wrapper {
transition: none;
}
}
.adyen-checkout__fieldset--revolving-plan .adyen-checkout__fieldset__fields {
justify-content: left;
}
.adyen-checkout__fieldset--revolving-plan .adyen-checkout__radio_group {
display: flex;
flex-direction: column;
}
.adyen-checkout__fieldset--revolving-plan .adyen-checkout__radio_group__input-wrapper {
margin-top: 20px;
}
.adyen-checkout__fieldset--revolving-plan .adyen-checkout__field--revolving-plan-installments {
margin-left: 15px;
position: relative;
top: 42px;
width: 30%;
}
.LoadingWrapper-module_loading-input__form__ffCKa {
opacity: 1;
}
.LoadingWrapper-module_loading-input__form--loading__7GmVo {
opacity: 0;
}
.LoadingWrapper-module_loading-input__spinner__GxA51 {
display: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
.LoadingWrapper-module_loading-input__spinner--active__ENNBS {
display: block;
}
.CardInput-module_card-input__wrapper__wXSCw {
position: relative;
}
.CardInput-module_card-input__wrapper__wXSCw *,
.CardInput-module_card-input__wrapper__wXSCw :after,
.CardInput-module_card-input__wrapper__wXSCw :before {
box-sizing: border-box;
}
.CardInput-module_card-input__icon__3Cz5M {
border-radius: 3px;
height: 18px;
margin-left: 7px;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 27px;
}
.CardInput-module_card-input__form__fRo1r {
opacity: 1;
}
.CardInput-module_card-input__spinner__-j2Qi {
display: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
.CardInput-module_card-input__spinner--active__slD7w {
display: block;
}
.CardInput-module_card-input__form--loading__rrmdj {
opacity: 0;
}
.CardInput-module_adyen-checkout__input__11tlB {
display: block;
max-height: 100px;
}
.CardInput-module_adyen-checkout__card__cvc__input--hidden__VIlHV,
.CardInput-module_adyen-checkout__card__exp-date__input--hidden__evi6- {
display: none;
}
.CardInput-module_adyen-checkout__card__exp-cvc__exp-date__input--hidden__YC3VT {
justify-content: flex-end;
}
.CardInput-module_revolving-plan-installments__disabled__VhNj2 {
opacity: 0.4;
pointer-events: none;
}
.adyen-checkout__card__dual-branding__buttons {
display: flex;
opacity: 0.4;
pointer-events: none;
}
.adyen-checkout__card__dual-branding__buttons--active {
opacity: 1;
pointer-events: auto;
}
.adyen-checkout__card__dual-branding__buttons .adyen-checkout__card__cardNumber__brandIcon {
cursor: pointer;
opacity: 1;
}
.adyen-checkout__card__dual-branding__buttons .adyen-checkout__card__cardNumber__brandIcon:first-child {
right: 40px;
}
.adyen-checkout__card__dual-branding__buttons .adyen-checkout__card__cardNumber__brandIcon--not-selected {
opacity: 0.5;
}
.adyen-checkout__card__brands {
display: flex;
flex-basis: auto;
flex-shrink: 1;
flex-wrap: wrap;
gap: 4px;
height: 16px;
margin-bottom: 16px;
margin-top: -8px;
overflow: hidden;
transition: all 0.2s ease-out;
}
.adyen-checkout__card__brands--hidden {
height: 0;
margin: -8px 0 8px;
opacity: 0;
}
.adyen-checkout__card__brands img {
border-radius: 3px;
height: 16px;
width: 24px;
}
.adyen-checkout__card__brands__brand-wrapper {
display: inline-block;
height: 16px;
position: relative;
width: 24px;
}
.adyen-checkout__card__brands__brand-wrapper:after {
border: 1px solid rgba(0, 27, 43, 0.17);
border-radius: 3px;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.adyen-checkout-ctp__otp-resend-code {
color: #0075ff;
cursor: pointer;
font-size: 13px;
font-weight: 400;
margin-left: auto;
}
.adyen-checkout-ctp__otp-resend-code--confirmation,
.adyen-checkout-ctp__otp-resend-code--disabled {
color: #687282;
cursor: default;
font-size: 13px;
font-weight: 400;
margin-left: auto;
pointer-events: none;
}
.adyen-checkout-ctp__otp-resend-code--confirmation {
align-items: center;
display: flex;
}
.adyen-checkout-ctp__otp-resend-code--confirmation > img {
margin-left: 4px;
}
.adyen-checkout-ctp__otp-resend-code-counter {
color: #000;
cursor: default;
display: inline-block;
font-size: 13px;
font-weight: 400;
margin-left: auto;
text-align: right;
}
.adyen-checkout-ctp__section > .adyen-checkout__field.adyen-checkout__field--otp {
margin-bottom: 20px;
}
.adyen_checkout-ctp__brand-wrapper {
align-items: center;
display: flex;
height: 18px;
}
.adyen_checkout-ctp__brand-logo {
margin-right: 6px;
width: 24px;
}
.adyen_checkout-ctp__brand-pipe {
height: 15px;
margin-right: 6px;
}
.adyen_checkout-ctp__brand-scheme {
margin-right: 6px;
object-fit: none;
}
.adyen_checkout-ctp__brand-scheme-mc {
width: 27px;
}
.adyen_checkout-ctp__brand-scheme-visa {
width: 35px;
}
.adyen-checkout__modal-wrapper {
align-items: center;
display: flex;
height: 100%;
left: 0;
overflow-y: auto;
overscroll-behavior-y: contain;
padding: 24px;
position: fixed;
top: 0;
visibility: hidden;
width: 100%;
z-index: 10;
}
.adyen-checkout__modal-wrapper:before {
background: rgba(0, 17, 44, 0.5);
content: "";
height: 100%;
left: 0;
opacity: 0;
position: fixed;
top: 0;
transition: opacity 0.3s linear;
width: 100%;
z-index: 10;
}
.adyen-checkout__modal-wrapper--open {
visibility: visible;
}
.adyen-checkout__modal-wrapper--open .adyen-checkout__modal,
.adyen-checkout__modal-wrapper--open:before {
opacity: 1;
}
.adyen-checkout__modal {
background-color: #fff;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 17, 44, 0.15);
margin: auto;
opacity: 0;
padding: 16px;
position: relative;
transition:
opacity 0.2s ease,
visibility 0.2s ease;
z-index: 11;
}
@media (max-width: 480px) {
.adyen-checkout__modal-wrapper {
padding: 0;
}
.adyen-checkout__modal {
border-radius: 0;
height: 100%;
}
}
.adyen-checkout__ctp-modal-header-image {
display: block;
margin: auto;
}
.adyen-checkout__ctp-modal-title {
font-size: 20px;
font-weight: 700;
line-height: 24px;
margin: 0 0 12px;
padding: 0;
}
.adyen-checkout__ctp-modal-text {
font-size: 13px;
font-weight: 400;
line-height: 19px;
margin-bottom: 16px;
}
.adyen-checkout__ctp-modal-benefits {
margin-left: 0;
padding-left: 20px;
}
.adyen-checkout__ctp-modal-benefits li {
list-style: disc;
margin-bottom: 16px;
}
.adyen-checkout__modal-wrapper--ctp .adyen-checkout__modal {
max-width: 464px;
}
.adyen_checkout-ctp__brand-wrapper--popup {
justify-content: center;
margin-bottom: 24px;
}
.adyen-web__ctp-info-button {
background-color: transparent;
border: 0;
cursor: pointer;
padding: 0;
}
.adyen-checkout-ctp__section-logout-button {
color: #0075ff;
cursor: pointer;
font-size: 13px;
font-weight: 400;
line-height: 19px;
margin-left: auto;
}
.adyen-checkout-ctp__section-logout-button--disabled {
color: #687282;
pointer-events: none;
}
.adyen-checkout-ctp__section {
background-color: #fff;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
padding: 16px;
position: relative;
}
.adyen-checkout-ctp__section-brand {
align-items: center;
display: flex;
height: 18px;
margin-bottom: 14px;
}
.adyen-checkout-ctp__section--standalone {
all: unset;
}
.adyen-checkout-ctp__section .adyen-checkout__fieldset {
margin-bottom: 24px;
}
.adyen-checkout-ctp__section-header {
align-items: center;
display: flex;
}
.adyen-checkout-ctp__section-header-title {
font-size: 17px;
font-weight: 600;
line-height: 22px;
margin: 0 0 4px;
padding: 0;
width: auto;
}
@media screen and (max-width: 400px) {
.adyen-checkout-ctp__section-header-title {
font-size: 15px;
}
}
.adyen-checkout-ctp__section-header-adornment {
margin-left: 5px;
}
.adyen-checkout-ctp__section-text {
color: #687282;
font-size: 13px;
font-weight: 400;
line-height: 19px;
margin: 0 0 16px;
}
.adyen-checkout-ctp__separator {
color: #00112c;
font-size: 13px;
font-weight: 400;
}
.adyen-checkout-ctp__otp-subtitle--highlighted {
color: #00112c;
font-weight: 500;
}
.adyen-checkout-ctp__card-list-single-card {
align-items: center;
background-color: #f7f8f9;
border-radius: 6px;
display: flex;
font-size: 13px;
font-weight: 400;
height: 40px;
line-height: 19px;
padding: 12px;
}
.adyen-checkout-ctp__card-list-single-card-expired {
color: #687282;
text-decoration: line-through;
}
.adyen-checkout-ctp__expired-label {
color: #687282;
font-weight: 500;
line-height: 17px;
margin-left: auto;
}
.adyen-checkout-ctp__card-image {
border-radius: 3px;
margin-right: 8px;
}
.adyen-checkout-ctp__cards-list-dropdown .adyen-checkout__dropdown__element--disabled {
opacity: 1;
}
.adyen-checkout-ctp__cards-list-dropdown .adyen-checkout__dropdown__element--disabled .adyen-checkout__dropdown__element__text {
margin: 0;
opacity: 0.4;
text-decoration: line-through;
}
.adyen-checkout-ctp__cards-list-dropdown .adyen-checkout__dropdown__element--disabled .adyen-checkout__dropdown__element__secondary-text {
color: #687282;
font-weight: 500;
line-height: 17px;
}
.adyen-checkout-ctp__cards-list-dropdown .adyen-checkout__dropdown__button--disabled {
opacity: 1;
}
.adyen-checkout-ctp__cards-list-dropdown .adyen-checkout__dropdown__button--disabled .adyen-checkout__dropdown__button__text {
opacity: 0.4;
text-decoration: line-through;
}
.adyen-checkout-ctp__cards-list-dropdown .adyen-checkout__dropdown__button--disabled .adyen-checkout__dropdown__button__secondary-text {
color: #687282;
font-weight: 500;
opacity: 1;
}
.adyen-checkout-ctp__card {
background-color: #fff;
border: none;
border-radius: 4px;
box-shadow: 0 0 0 2px #999595;
cursor: pointer;
height: 40px;
margin: 0 0 20px;
width: 100%;
}
.adyen-checkout-ctp__empty-cards {
align-items: center;
background-color: #f7f8f9;
border-radius: 6px;
color: #687282;
display: flex;
font-size: 13px;
font-weight: 400;
height: 40px;
line-height: 19px;
margin-bottom: 24px;
padding: 12px 16px;
}
.adyen-checkout__iframe--ctpIframe {
pointer-events: auto;
}
.adyen-checkout__iframe--ctpIframe-hidden {
display: none;
}
.adyen-checkout-ctp__loading-image {
display: block;
margin: 30px auto auto;
}
.adyen-checkout-ctp__loading-subtitle {
font-size: 16px;
line-height: 19px;
margin: 0 auto 58px;
max-width: 280px;
text-align: center;
}
.adyen-checkout-ctp__section > .adyen-checkout__field.adyen-checkout__field--shopperLogin {
margin-bottom: 20px;
}
.adyen-checkout__cashapp > .adyen-checkout__store-details {
margin-bottom: 16px;
margin-top: 0;
}
.adyen-checkout__button-group {
background: transparent;
display: flex;
justify-content: space-between;
}
.adyen-checkout__button-group .adyen-checkout__button {
background: transparent;
border: 0;
box-shadow: inset 0 0 0 1px #99a3ad;
color: #00112c;
font-size: 0.81em;
font-weight: 400;
height: 40px;
line-height: 40px;
margin-right: 8px;
padding: 0;
text-align: center;
}
.adyen-checkout__button-group .adyen-checkout__button:last-child {
margin-right: 0;
}
.adyen-checkout__button-group .adyen-checkout__button:hover {
background: transparent;
box-shadow: inset 0 0 0 2px #99a3ad;
}
.adyen-checkout__button-group .adyen-checkout__button:active {
background: #f7f8f9;
box-shadow: inset 0 0 0 2px #99a3ad;
}
.adyen-checkout__button-group .adyen-checkout__button--disabled,
.adyen-checkout__button-group .adyen-checkout__button--disabled:hover {
cursor: not-allowed;
opacity: 0.4;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.adyen-checkout__button-group .adyen-checkout__button--selected,
.adyen-checkout__button-group .adyen-checkout__button--selected:active,
.adyen-checkout__button-group .adyen-checkout__button--selected:active:hover,
.adyen-checkout__button-group .adyen-checkout__button--selected:hover {
background: #e5efff;
box-shadow: inset 0 0 0 2px #0075ff;
color: #0075ff;
font-weight: 500;
height: 40px;
transition: none;
}
.adyen-checkout__button-group .adyen-checkout__button .adyen-checkout__button-group__input {
opacity: 0;
pointer-events: none;
position: absolute;
}
.adyen-checkout__adyen-giving .adyen-checkout__status__icon {
display: block;
margin: 56px auto 32px;
}
.adyen-checkout__adyen-giving .adyen-checkout__status__text {
color: #00112c;
margin-bottom: 56px;
text-align: center;
}
.adyen-checkout__campaign {
background: #00112c;
border-radius: 6px;
height: 227px;
overflow: hidden;
position: relative;
}
.adyen-checkout__campaign-link:hover .adyen-checkout__campaign-description {
text-decoration: underline;
}
.adyen-checkout__campaign-container {
height: 100%;
}
.adyen-checkout__campaign-logo {
border: 2px solid hsla(0, 0%, 100%, 0.4);
border-radius: 3px;
display: block;
height: 48px;
margin-bottom: 16px;
overflow: hidden;
width: 48px;
}
.adyen-checkout__campaign-background-image {
background-color: #00112c;
background-position: 50%;
background-size: cover;
height: 100%;
}
.adyen-checkout__campaign-link .adyen-checkout__campaign-background-image:before {
background: inherit;
content: "";
height: 100%;
position: absolute;
transition: transform 0.6s ease-out;
width: 100%;
}
.adyen-checkout__campaign-link .adyen-checkout__campaign-background-image:hover:before {
transform: scale(1.1);
}
.adyen-checkout__campaign-link .adyen-checkout__campaign-content {
pointer-events: none;
}
.adyen-checkout__campaign-content {
bottom: 0;
padding: 16px;
position: absolute;
z-index: 2;
}
.adyen-checkout__campaign-description,
.adyen-checkout__campaign-title {
color: #fff;
font-weight: 400;
margin: 0;
}
.adyen-checkout__campaign-title {
font-size: 1em;
margin-bottom: 8px;
}
.adyen-checkout__campaign-description {
font-size: 0.81em;
line-height: 19px;
}
.adyen-checkout__adyen-giving-actions {
margin-top: 16px;
text-align: center;
}
.adyen-checkout__button.adyen-checkout__button--donate {
margin: 16px auto 8px;
}
.adyen-checkout__button.adyen-checkout__button--decline {
display: block;
margin: auto;
width: auto;
}
.adyen-checkout__paywithgoogle {
height: 48px;
}
.adyen-checkout__paywithgoogle > div > button,
.adyen-checkout__paywithgoogle > div > button.long,
.adyen-checkout__paywithgoogle > div > button.short {
height: 48px;
transition:
background-color 0.3s ease-out,
box-shadow 0.3s ease-out;
}
.adyen-checkout__paywithgoogle > div > button.long:focus,
.adyen-checkout__paywithgoogle > div > button.short:focus,
.adyen-checkout__paywithgoogle > div > button:focus {
box-shadow: 0 0 0 2px #99c2ff;
outline: 0;
}
.adyen-checkout__paywithgoogle > div > button.gpay-button {
padding: 15px 24px 13px;
}
.adyen-checkout__econtext-input__field > .adyen-checkout__button--pay:only-child {
margin-top: 0;
}
.adyen-checkout__voucher-result {
border-radius: 12px;
box-sizing: border-box;
position: relative;
text-align: center;
}
.adyen-checkout__voucher-result__bottom,
.adyen-checkout__voucher-result__top {
background: #fff;
border: 1px solid #d4d9db;
}
.adyen-checkout__voucher-result__top {
border-bottom: 0;
border-radius: 12px 12px 0 0;
padding: 40px 0 24px;
}
.adyen-checkout__voucher-result__bottom {
border-radius: 0 0 12px 12px;
border-top: 0;
}
.adyen-checkout__voucher-result__separator {
align-items: center;
background: #fff;
display: flex;
height: 13px;
margin: 0 auto;
position: relative;
width: calc(100% - 14px);
}
.adyen-checkout__voucher-result__separator:after,
.adyen-checkout__voucher-result__separator:before {
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3IiBoZWlnaHQ9IjEzIiBmaWxsPSJub25lIj48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0ibTAgMCA1IDIgMS41IDRIN1Ywem0wIDEzIDUtMiAxLjUtNEg3djZ6IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBzdHJva2U9IiNENEQ5REIiIGQ9Ik02LjQyMyA2LjVDNi40MjMgMy4zMTIgMy43ODMuNzU2LjUuNTE4YzMuMzg2LjIzNiA2IDIuODU1IDYgNS45ODJzLTIuNjE0IDUuNzQ2LTYgNS45ODN2LS4wMDFjMy4yODQtLjIzNyA1LjkyMy0yLjc5NCA1LjkyMy01Ljk4MloiLz48cGF0aCBmaWxsPSIjRDREOURCIiBkPSJNMCAwaDF2MUgwem0wIDEyaDF2MUgweiIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoN3YxM0gweiIvPjwvY2xpcFBhdGg+PC9kZWZzPjwvc3ZnPg==);
}
.adyen-checkout__voucher-result__separator:before {
left: -7px;
}
.adyen-checkout__voucher-result__separator:after,
.adyen-checkout__voucher-result__separator:before {
background-position: 100%;
background-repeat: no-repeat;
content: "";
height: 13px;
position: absolute;
top: 0;
width: 7px;
}
.adyen-checkout__voucher-result__separator:after {
right: -7px;
transform: rotate(-180deg);
}
.adyen-checkout__voucher-result__separator__inner {
border-top: 1px solid #e6e9eb;
width: 100%;
}
.adyen-checkout__voucher-result__image {
align-items: center;
display: flex;
justify-content: center;
margin-bottom: 40px;
width: 100%;
}
.adyen-checkout__link--voucher-result-instructions {
display: inline-block;
}
.adyen-checkout__voucher-result__image__wrapper {
display: block;
height: 48px;
margin: 0 24px;
position: relative;
}
.adyen-checkout__voucher-result__image__wrapper:after {
border: 1px solid rgba(0, 27, 43, 0.17);
border-radius: 3px;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.adyen-checkout__voucher-result__image__wrapper:nth-child(2):before {
border-left: 1px solid #d4d9db;
content: "";
height: 64px;
left: -24.5px;
position: absolute;
top: -8px;
width: 1px;
}
.adyen-checkout__voucher-result__image__brand,
.adyen-checkout__voucher-result__image__issuer {
border-radius: 3px;
height: 48px;
}
.adyen-checkout__voucher-result__introduction {
color: #00112c;
font-size: 0.81em;
line-height: 19px;
margin: 0 auto;
max-width: 400px;
text-align: center;
}
.adyen-checkout__voucher-result__amount {
color: #00112c;
font-size: 1em;
font-weight: 700;
margin: 24px auto 0;
text-align: center;
}
.adyen-checkout__voucher-result__surcharge {
color: #687282;
display: block;
font-size: 0.81em;
font-weight: 400;
line-height: 19px;
text-align: center;
}
.adyen-checkout__voucher-result__code__label {
display: block;
font-weight: 400;
left: 0;
line-height: 19px;
margin: 0 auto;
position: absolute;
right: 0;
top: -2px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
width: auto;
}
.adyen-checkout__voucher-result__code__label:before {
content: "";
position: absolute;
}
.adyen-checkout__voucher-result__code__label__text {
background: #fff;
color: #00112c;
font-size: 13px;
letter-spacing: normal;
line-height: 1;
padding: 0 8px;
}
.adyen-checkout__voucher-result__code__barcode {
display: block;
height: 56px;
margin: 0 auto 8px;
max-width: 100%;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.adyen-checkout__voucher-result__code {
border-width: 1px 0;
color: #00112c;
display: inline-block;
font-size: 1.5em;
font-weight: 700;
letter-spacing: 1px;
line-height: 1.2;
margin: 0 auto;
padding: 16px 48px;
position: relative;
text-align: center;
-webkit-user-select: all;
-moz-user-select: all;
user-select: all;
width: 100%;
word-break: break-word;
}
.adyen-checkout__voucher-result__details {
list-style: none;
margin: -1px auto 0;
padding: 0;
}
.adyen-checkout__voucher-result__details__item {
border-top: 1px solid #e6e9eb;
color: #00112c;
display: flex;
font-size: 0.81em;
justify-content: space-between;
padding: 16px 24px;
word-break: break-word;
}
.adyen-checkout__voucher-result__details__item:last-child {
margin-bottom: 0;
}
.adyen-checkout__voucher-result__details__label {
max-width: 50%;
text-align: left;
}
.adyen-checkout__voucher-result__details__value {
font-weight: 700;
max-width: 50%;
text-align: right;
}
.adyen-checkout__voucher-result__actions {
align-items: center;
display: flex;
justify-content: center;
list-style: none;
margin: 0 auto 32px;
max-width: 100%;
min-width: 200px;
padding: 0;
width: 300px;
}
.adyen-checkout__voucher-result__actions__item {
margin: 0 4px;
}
.adyen-checkout__paypal__buttons {
position: relative;
z-index: 0;
}
.adyen-checkout__paypal__button {
display: flex;
margin-bottom: 16px;
}
.adyen-checkout__paypal__button:empty {
display: none;
}
.adyen-checkout__paypal__status--pending {
margin: 16px 0;
}
.adyen-checkout__paypal__status--processing {
align-items: center;
display: flex;
font-size: 13px;
justify-content: center;
padding: 24px 0;
}
.adyen-checkout__paypal-processing .adyen-checkout__paypal__button {
display: none;
}
.adyen-checkout__payment-method .adyen-checkout__paypal__status--pending {
margin: -16px 0 38px;
}
.adyen-checkout__payment-method .adyen-checkout__paypal__status--processing {
padding: 20px 0 65px;
}
.adyen-checkout__phone-input {
direction: ltr;
}
.adyen-checkout__phone-input .adyen-checkout__input-wrapper {
width: 100%;
}
.adyen-checkout__phone-input .adyen-checkout__input-wrapper .adyen-checkout__input {
height: auto;
padding: 0;
}
.adyen-checkout__phone-input .adyen-checkout__input-wrapper .adyen-checkout__input:focus {
border: 1px solid #0075ff;
box-shadow: 0 0 0 2px #99c2ff;
}
.adyen-checkout__phone-input .adyen-checkout__input-wrapper .adyen-checkout__dropdown__button {
border: 0;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
height: 35px;
width: auto;
}
.adyen-checkout__phone-input .adyen-checkout__input-wrapper .adyen-checkout__dropdown__button:after {
box-sizing: revert;
height: 10px;
left: 40px;
}
.adyen-checkout__phone-input .adyen-checkout__input-wrapper .adyen-checkout__input--phoneNumber {
border: 1px solid transparent;
height: 35px;
margin-left: 8px;
padding-left: 15px;
}
.adyen-checkout__phone-input .adyen-checkout__input-wrapper .adyen-checkout__input-wrapper--phoneInput {
align-items: center;
display: flex;
}
.adyen-checkout__phone-input .adyen-checkout__input-wrapper .adyen-checkout__input-wrapper--phoneInput:focus {
border: 1px solid #0075ff;
box-shadow: 0 0 0 2px #99c2ff;
}
.adyen-checkout__phone-input .adyen-checkout__input-wrapper .adyen-checkout__phoneNumber {
align-items: center;
display: flex;
margin-left: 65px;
width: 100%;
}
.adyen-checkout__phone-input .adyen-checkout__input-wrapper .adyen-checkout__countryFlag {
position: absolute;
}
.adyen-checkout__phone-input .adyen-checkout__input-wrapper .adyen-checkout__dropdown__button--active,
.adyen-checkout__phone-input .adyen-checkout__input-wrapper .adyen-checkout__dropdown__button--active:hover {
box-shadow: none;
}
.adyen-checkout__threeds2__challenge,
.adyen-checkout__threeds2__challenge-container {
background-color: transparent;
box-sizing: border-box;
display: block;
height: inherit;
min-height: 400px;
overflow: hidden;
position: relative;
width: 100%;
}
.adyen-checkout__threeds2__challenge--01,
.adyen-checkout__threeds2__challenge--01 .adyen-checkout__iframe--threeDSIframe {
height: 400px;
width: 250px;
}
.adyen-checkout__threeds2__challenge--02,
.adyen-checkout__threeds2__challenge--02 .adyen-checkout__iframe--threeDSIframe {
height: 400px;
width: 390px;
}
.adyen-checkout__threeds2__challenge--03,
.adyen-checkout__threeds2__challenge--03 .adyen-checkout__iframe--threeDSIframe {
height: 600px;
width: 500px;
}
.adyen-checkout__threeds2__challenge--04,
.adyen-checkout__threeds2__challenge--04 .adyen-checkout__iframe--threeDSIframe {
height: 400px;
width: 600px;
}
.adyen-checkout__threeds2__challenge--05,
.adyen-checkout__threeds2__challenge--05 .adyen-checkout__iframe--threeDSIframe {
height: 100%;
width: 100%;
}
.adyen-checkout__iframe--threeDSIframe {
border: 0;
left: 0;
position: absolute;
top: 0;
}
.adyen-checkout__threeds2-challenge-error .adyen-checkout__status__icon {
display: block;
margin: 56px auto 32px;
}
.adyen-checkout__threeds2-challenge-error .adyen-checkout__status__text {
color: #c12424;
margin-bottom: 56px;
text-align: center;
}
.adyen-checkout__qr-loader {
background: #fff;
border: 1px solid #d4d9db;
border-radius: 12px;
padding: 40px;
text-align: center;
}
.adyen-checkout__qr-loader--result {
padding: 100px;
}
.adyen-checkout__qr-loader__brand-logo {
border-radius: 3px;
width: 74px;
}
.adyen-checkout__qr-loader__subtitle {
margin: 32px auto 0;
max-width: 400px;
}
.adyen-checkout__qr-loader__subtitle--result {
margin-bottom: 32px;
}
.adyen-checkout__qr-loader__payment_amount,
.adyen-checkout__qr-loader__subtitle {
color: #00112c;
font-size: 1em;
line-height: 19px;
}
.adyen-checkout__qr-loader__icon {
height: 88px;
width: 88px;
}
.adyen-checkout__qr-loader__payment_amount {
font-weight: 700;
}
.adyen-checkout__qr-loader__progress {
background: #d4d9db;
border-radius: 24px;
height: 4px;
margin: 32px auto 12px;
padding-right: 3%;
width: 152px;
}
[dir="rtl"] .adyen-checkout__qr-loader__progress {
padding-left: 3%;
padding-right: 0;
}
.adyen-checkout__qr-loader__percentage {
background: #0075ff;
border-radius: 24px;
display: block;
height: 100%;
}
.adyen-checkout__qr-loader__countdown {
color: #687282;
font-size: 0.81em;
}
.adyen-checkout__qr-loader > .adyen-checkout__spinner__wrapper {
margin: 60px 0;
}
.adyen-checkout__qr-loader__app-link {
display: none;
margin-top: 16px;
}
.adyen-checkout__button.adyen-checkout__button--qr-loader {
margin-top: 24px;
text-decoration: none;
}
.adyen-checkout__qr-loader__instructions {
color: #687282;
font-size: 1em;
line-height: 1.5;
margin-top: 32px;
}
.adyen-checkout__qr-loader__actions {
align-items: center;
display: flex;
justify-content: center;
margin-top: 32px;
}
@media only screen and (max-device-width: 1200px) {
.adyen-checkout__qr-loader__app-link {
display: block;
}
}
.adyen-checkout__voucher-result--boletobancario .adyen-checkout__voucher-result__code,
.adyen-checkout__voucher-result--oxxo .adyen-checkout__voucher-result__code {
font-size: 0.81em;
line-height: 19px;
padding: 24px;
word-break: break-all;
}
.adyen-checkout__alert-message {
border-radius: 6px;
display: flex;
font-size: 0.81em;
margin: 0 0 16px;
padding: 12px;
text-align: left;
}
.adyen-checkout__alert-message--error {
background: #fbe6ed;
}
.adyen-checkout__alert-message--warning {
background: #ffeacc;
}
.adyen-checkout__alert-message--info {
background: #e5efff;
}
.adyen-checkout__alert-message__icon {
height: 14px;
margin-right: 8px;
width: 14px;
}
.adyen-checkout__giftcard-result__header {
align-items: center;
display: flex;
flex-wrap: nowrap;
font-size: 1em;
font-weight: 400;
justify-content: space-between;
position: relative;
width: 100%;
}
.adyen-checkout__giftcard-result__header__title {
align-items: center;
display: flex;
}
.adyen-checkout__giftcard-result__name {
margin-left: 8px;
}
.adyen-checkout__giftcard-result__balance {
list-style: none;
margin: 16px 0 0;
padding: 0;
}
.adyen-checkout__giftcard-result__balance__item {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
.adyen-checkout__giftcard-result__balance__item .adyen-checkout__giftcard-result__balance__title--transactionLimit {
color: #687282;
}
.adyen-checkout__giftcard-result__balance__item:last-child {
margin-bottom: 0;
}
.adyen-checkout__giftcard-result__balance__value--amount {
font-weight: 700;
}
.adyen-checkout__giftcard-result__remaining-balance {
color: #687282;
font-size: 13px;
line-height: 19px;
margin: 8px auto 0;
text-align: center;
}
.DropinComponent-module_adyen-checkout__payment-methods-list__mAjAm {
list-style: none;
margin: 0;
padding: 0;
}
.DropinComponent-module_adyen-checkout__payment-method__nWdwg {
display: block;
max-height: 60px;
}
.DropinComponent-module_adyen-checkout__payment-method__details__-rsW7 {
display: none;
}
.DropinComponent-module_adyen-checkout__payment-method__image__nB80V {
height: 26px;
width: 40px;
}
.DropinComponent-module_adyen-checkout__payment-method__image__wrapper__6NWzA {
margin-right: 8px;
}
[dir="rtl"] .DropinComponent-module_adyen-checkout__payment-method__image__wrapper__6NWzA {
margin-left: 8px;
margin-right: 0;
}
.DropinComponent-module_adyen-checkout__payment-method--selected__6egZF {
max-height: 100%;
}
.DropinComponent-module_adyen-checkout__payment-method--selected__6egZF .DropinComponent-module_adyen-checkout__payment-method__details__-rsW7 {
display: block;
}
.adyen-checkout__payment-method__disable-confirmation {
background: #c12424;
border-left: 1px solid #b82222;
border-right: 1px solid #b82222;
color: #fff;
font-size: 0.81em;
margin: 0 -17px;
max-height: 0;
opacity: 0;
overflow: hidden;
transition:
opacity 0.15s ease-out,
max-height 0.15s linear,
margin-bottom 0.1s linear;
}
.adyen-checkout__payment-method__disable-confirmation.adyen-checkout__payment-method__disable-confirmation--open {
margin-bottom: 16px;
max-height: 62px;
opacity: 1;
}
.adyen-checkout__payment-method__disable-confirmation__content {
align-items: center;
display: flex;
justify-content: space-between;
padding: 8px 16px;
}
.adyen-checkout__payment-method__disable-confirmation__buttons {
display: flex;
}
.adyen-checkout__payment-method__disable-confirmation__button {
background: #c12424;
border: 1px solid transparent;
border-radius: 6px;
color: #fff;
cursor: pointer;
display: block;
height: auto;
line-height: 14px;
margin: 0 0 0 8px;
padding: 8px;
width: auto;
}
.adyen-checkout__payment-method__disable-confirmation__button:hover,
.adyen-checkout__payment-method__disable-confirmation__button:hover:focus {
background: #ac2020;
box-shadow: none;
}
.adyen-checkout__payment-method__disable-confirmation__button:active,
.adyen-checkout__payment-method__disable-confirmation__button:hover:active {
background: #961c1c;
box-shadow: none;
}
.adyen-checkout__payment-method__disable-confirmation__button--remove,
.adyen-checkout__payment-method__disable-confirmation__button--remove:disabled {
border-color: #fff;
}
.adyen-checkout__payment-method__disable-confirmation__button--cancel,
.adyen-checkout__payment-method__disable-confirmation__button--cancel:disabled {
border-color: transparent;
}
.adyen-checkout__payment-method {
background: #fff;
border: 1px solid #e6e9eb;
cursor: pointer;
margin-top: -1px;
position: relative;
transition: opacity 0.3s ease-out;
width: 100%;
}
.adyen-checkout__payment-method:focus {
outline: 0;
}
.adyen-checkout__payment-method--selected + .adyen-checkout__payment-method,
.adyen-checkout__payment-method:first-child {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
margin-top: 0;
}
.adyen-checkout__payment-method--next-selected,
.adyen-checkout__payment-method:last-child {
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
margin-bottom: 0;
}
.adyen-checkout__payment-method--loading {
opacity: 0.2;
}
.adyen-checkout__payment-method--selected.adyen-checkout__payment-method--loading {
opacity: 0.9;
}
.adyen-checkout__payment-method--confirming .adyen-checkout__payment-method__details__content,
.adyen-checkout__payment-method--disabling {
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.adyen-checkout__payment-method--disabling {
opacity: 0.3;
}
.adyen-checkout__payment-method__header {
align-items: center;
color: #00112c;
display: flex;
flex-wrap: nowrap;
font-size: 1em;
font-weight: 400;
justify-content: space-between;
padding: 12px 16px 12px 44px;
position: relative;
transition: background 0.1s ease-out;
width: 100%;
}
[dir="rtl"] .adyen-checkout__payment-method__header {
padding: 12px 44px 12px 12px;
}
.adyen-checkout__payment-method--standalone .adyen-checkout__payment-method__header {
padding: 16px;
}
.adyen-checkout__payment-method__header__title {
align-items: center;
background: none;
border: none;
color: #00112c;
cursor: pointer;
display: flex;
flex-shrink: 0;
font-size: 1em;
font-weight: 400;
margin-right: 16px;
max-width: 100%;
padding: 4px;
}
[dir="rtl"] .adyen-checkout__payment-method__header__title {
margin-left: 16px;
margin-right: 0;
}
.adyen-checkout__payment-method__surcharge {
color: #687282;
margin-left: 5px;
}
.adyen-checkout__payment-method--selected {
background: #f7f8f9;
border: 1px solid #e6e9eb;
border-radius: 12px;
cursor: default;
margin: 8px 0;
transition:
margin 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0s,
opacity 0.3s ease-out;
}
.adyen-checkout__payment-method--selected .adyen-checkout__payment-method__header {
flex-wrap: wrap;
}
.adyen-checkout__payment-method__details {
padding: 0 16px;
position: relative;
}
.adyen-checkout__payment-method__details__content {
margin: 0 0 16px;
}
.adyen-checkout__payment-method__image__wrapper {
height: 26px;
position: relative;
width: 40px;
}
.adyen-checkout__payment-method__image__wrapper--outline:after {
border: 1px solid rgba(0, 27, 43, 0.17);
border-radius: 3px;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.adyen-checkout__payment-method__image {
border-radius: 3px;
display: block;
}
.adyen-checkout__payment-method__brands {
display: flex;
flex-basis: auto;
flex-shrink: 1;
flex-wrap: wrap;
height: 16px;
margin: 4px 0;
overflow: hidden;
text-align: right;
}
.adyen-checkout__payment-method__brands .adyen-checkout__payment-method__brand-number {
color: #687282;
font-size: 13px;
}
.adyen-checkout__payment-method--selected .adyen-checkout__payment-method__brands {
height: auto;
overflow: visible;
text-align: left;
}
.adyen-checkout__payment-method__brands .adyen-checkout__payment-method__image__wrapper {
display: inline-block;
height: 16px;
margin-right: 4px;
transition: opacity 0.2s ease-out;
width: 24px;
}
.adyen-checkout__payment-method__brands .adyen-checkout__payment-method__image__wrapper:last-child {
margin: 0;
}
.adyen-checkout__payment-method--selected .adyen-checkout__payment-method__brands .adyen-checkout__payment-method__image__wrapper {
margin-bottom: 4px;
}
.adyen-checkout__payment-method__brands img {
height: 16px;
width: 24px;
}
.adyen-checkout__payment-method__image__wrapper--disabled {
opacity: 0.25;
}
.adyen-checkout__payment-method__radio {
background-color: #fff;
border: 1px solid #b9c4c9;
border-radius: 50%;
height: 16px;
left: 16px;
position: absolute;
transition:
border-color 0.2s ease-out,
box-shadow 0.2s ease-out;
width: 16px;
}
[dir="rtl"] .adyen-checkout__payment-method__radio {
left: auto;
right: 16px;
}
.adyen-checkout__payment-method--standalone .adyen-checkout__payment-method__radio {
display: none;
}
.adyen-checkout__payment-method__radio:after {
background-color: #fff;
border-radius: 50%;
content: "";
display: block;
height: 6px;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%) scale(0);
transition: transform 0.3s ease-out;
width: 6px;
}
.adyen-checkout__payment-method:hover:not(.adyen-checkout__payment-method--selected) .adyen-checkout__payment-method__radio {
border-color: #99a3ad;
box-shadow: 0 0 0 2px #d4d9db;
cursor: pointer;
}
.adyen-checkout__payment-method__radio--selected {
background-color: #0075ff;
border: 0;
transition: all 0.3s ease-out;
}
.adyen-checkout__payment-method__radio--selected:hover {
box-shadow: 0 0 0 2px rgba(0, 102, 255, 0.4);
}
.adyen-checkout__payment-method__radio--selected:after {
transform: translateY(-50%) scale(1);
}
.adyen-checkout__payment-method__name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.adyen-checkout__payment-method__name--selected {
font-weight: 500;
}
.adyen-checkout__payment-method__additional-info {
color: #687282;
font-size: 0.81em;
}
.adyen-checkout__payment-method__name_wrapper {
align-items: flex-start;
display: flex;
flex-direction: column;
}
.adyen-checkout__order-payment-methods-list {
list-style: none;
margin: 0 auto 16px;
padding: 0;
}
.adyen-checkout__order-payment-method {
background: #fff;
border: 1px solid #e6e9eb;
margin-top: -1px;
position: relative;
width: 100%;
}
.adyen-checkout__order-payment-method:first-child {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
}
.adyen-checkout__order-payment-method:last-child {
border-bottom-left-radius: 12px;
border-bottom-right-radius: 12px;
}
.adyen-checkout__order-payment-method__header {
align-items: center;
color: #00112c;
display: flex;
flex-wrap: nowrap;
font-size: 1em;
font-weight: 500;
justify-content: space-between;
padding: 16px;
position: relative;
transition: background 0.1s ease-out;
width: 100%;
}
.adyen-checkout__order-payment-method__header .adyen-checkout__payment-method__header__title {
padding: 0;
}
.adyen-checkout__order-payment-method__details {
padding: 0 16px 16px;
}
.adyen-checkout__order-payment-method__deducted-amount {
display: flex;
font-size: 1em;
justify-content: space-between;
line-height: 1em;
}
.adyen-checkout__order-payment-method__deducted-amount__label {
font-size: 0.81em;
}
.adyen-checkout__order-payment-method__deducted-amount__value {
font-weight: 500;
}
.adyen-checkout__order-remaining-amount {
background: #ffeacc;
border-radius: 6px;
color: #7f4a00;
display: block;
font-size: 0.81em;
margin-bottom: 16px;
padding: 8px 16px;
width: 100%;
}
.adyen-checkout__order-remaining-amount strong {
font-weight: 700;
}
.adyen-checkout__status {
align-items: center;
background-color: #fff;
border: 1px solid #d4d9db;
border-radius: 6px;
color: #00112c;
display: flex;
flex-direction: column;
font-size: 1em;
height: 350px;
justify-content: center;
margin: 0;
padding: 32px;
text-align: center;
}
.adyen-checkout__status__icon {
margin-bottom: 24px;
}
.adyen-checkout__status .adyen-checkout__spinner__wrapper {
max-height: 88px;
}
.adyen-checkout__dropin,
.adyen-checkout__dropin *,
.adyen-checkout__dropin :after,
.adyen-checkout__dropin :before {
box-sizing: border-box;
}
.adyen-checkout__payment-methods-list--loading {
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.adyen-checkout__instant-payment-methods-list {
list-style: none;
margin: 0;
padding: 0;
}
.adyen-checkout__instant-payment-methods-list li:not(:last-child) {
margin-bottom: 8px;
}
.adyen-checkout__link {
color: #0075ff;
text-decoration: none;
}
.adyen-checkout__link:hover {
text-decoration: underline;
}
.AchInput-module_sf-input__wrapper__lfdiv {
position: relative;
}
.AchInput-module_sf-input__wrapper__lfdiv *,
.AchInput-module_sf-input__wrapper__lfdiv :after,
.AchInput-module_sf-input__wrapper__lfdiv :before {
box-sizing: border-box;
}
.AchInput-module_adyen-checkout__input__8WwCR {
display: block;
max-height: 100px;
}
.adyen-checkout__pm__holderName {
margin-bottom: 0;
}
.adyen-checkout__fieldset__title + .adyen-checkout__ach-sf__form {
margin-top: 0;
}
.adyen-checkout__ach-input .adyen-checkout__fieldset--address,
.adyen-checkout__ach-sf__form {
margin-top: 16px;
}
.adyen-checkout__loading-input__form {
transition: opacity 0.25s ease-out;
}
.adyen-checkout-phone-input--new {
direction: ltr;
}
.adyen-checkout-phone-input--new .adyen-checkout__input-wrapper {
width: 100%;
}
.adyen-checkout-phone-input--new .adyen-checkout__input-wrapper .adyen-checkout__input {
height: auto;
padding: 0;
}
.adyen-checkout-phone-input--new .adyen-checkout__input-wrapper .adyen-checkout__input:focus-within {
border: 1px solid #0075ff;
}
.adyen-checkout-phone-input--new .adyen-checkout__input-wrapper .adyen-checkout__input:focus-within .adyen-checkout-dropdown--countrycode-selector {
border-right: 1px solid #0075ff;
}
.adyen-checkout-phone-input--new .adyen-checkout__input-wrapper .adyen-checkout__dropdown__button {
border: 0;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
height: 35px;
width: auto;
}
.adyen-checkout-phone-input--new .adyen-checkout__input-wrapper .adyen-checkout__dropdown__button:after {
box-sizing: revert;
height: 10px;
}
.adyen-checkout-phone-input--new .adyen-checkout__input-wrapper .adyen-checkout__dropdown__button--active,
.adyen-checkout-phone-input--new .adyen-checkout__input-wrapper .adyen-checkout__dropdown__button--active:hover {
box-shadow: none;
}
.adyen-checkout-phone-input--new .adyen-checkout__input-wrapper .adyen-checkout-input--phone-number {
border: 1px solid transparent;
height: 35px;
line-height: 35px;
min-height: 35px;
padding-bottom: 0;
padding-left: 15px;
padding-top: 0;
}
.adyen-checkout-phone-input--new .adyen-checkout__input-wrapper .adyen-checkout-input--phone-number:focus-within {
border: 1px solid #0075ff;
box-shadow: 0 0 0 2px #99c2ff;
}
.adyen-checkout-phone-input--new .adyen-checkout__input-wrapper .adyen-checkout-dropdown--countrycode-selector {
border-right: 1px solid #dce0e5;
min-width: 144px;
width: 144px;
}
.adyen-checkout-phone-input--new .adyen-checkout__input-wrapper .adyen-checkout-input-holder--phone-input {
align-items: center;
display: flex;
}
.adyen-checkout-phone-input--new .adyen-checkout__input-wrapper .adyen-checkout-phone-number {
align-items: center;
display: flex;
flex: 3;
}
.adyen-checkout-phone-input--new .adyen-checkout-phone-input__error-holder {
margin-top: -10px;
}
.adyen-checkout__await {
background: #fff;
border: 1px solid #d4d9db;
border-radius: 12px;
padding: 40px;
text-align: center;
}
.adyen-checkout__await--result {
padding: 100px;
}
.adyen-checkout__qr-loader--app {
border: 0;
border-radius: 0;
padding: 0;
}
.adyen-checkout__await__brand-logo {
border-radius: 3px;
width: 74px;
}
.adyen-checkout__await__indicator-text,
.adyen-checkout__await__subtitle {
color: #00112c;
font-size: 1em;
line-height: 19px;
margin-top: 32px;
}
.adyen-checkout__await__indicator-holder .adyen-checkout__await__indicator-text {
margin-left: 10px;
margin-top: 6px;
}
.adyen-checkout__await__indicator-holder {
display: flex;
justify-content: center;
margin-bottom: 20px;
margin-top: 32px;
}
.adyen-checkout__await__subtitle--result {
margin-bottom: 32px;
}
.adyen-checkout__await__icon {
height: 88px;
width: 88px;
}
.adyen-checkout__await__progress {
background: #d4d9db;
border-radius: 24px;
height: 4px;
margin: 32px auto 12px;
width: 152px;
}
.adyen-checkout__await__percentage {
background: #0075ff;
border-radius: 24px;
display: block;
height: 100%;
}
.adyen-checkout__await__countdown {
color: #687282;
font-size: 0.81em;
}
.adyen-checkout__await > .adyen-checkout__spinner__wrapper {
margin: 60px 0;
}
.adyen-checkout__await__app-link {
display: none;
margin-top: 16px;
}
@media only screen and (max-device-width: 1200px) {
.adyen-checkout__await__app-link {
display: block;
}
}
.adyen-checkout__blik__helper {
color: #00112c;
font-size: 1em;
font-weight: 400;
margin: 0 0 16px;
padding: 0;
}
.adyen-checkout__bankTransfer__introduction {
color: #00112c;
font-size: 0.81em;
font-weight: 400;
margin: 0 0 16px;
padding: 0;
}
.adyen-checkout__bankTransfer__emailField {
margin: 0 0 16px;
}
.adyen-checkout__bacs--confirm {
position: relative;
}
.adyen-checkout__bacs--confirm .adyen-checkout-input__inline-validation--valid {
display: none;
}
.adyen-checkout__bacs .adyen-checkout__field--inactive {
pointer-events: none;
}
.adyen-checkout__bacs .adyen-checkout__bacs--edit {
cursor: pointer;
position: absolute;
right: 0;
top: -25px;
width: 20%;
}
.adyen-checkout__bacs .adyen-checkout__bacs--edit-dropin {
top: -50px;
}
.adyen-checkout__bacs .adyen-checkout__bacs--edit .adyen-checkout__bacs--edit-button {
background: none;
border: none;
color: #0075ff;
cursor: pointer;
text-align: end;
text-decoration: underline;
}
.adyen-checkout__voucher-result__introduction {
font-size: 1em;
max-width: 420px;
}
.adyen-checkout__klarna-widget {
pointer-events: all;
}
.adyen-checkout__field--vpa {
margin-bottom: 0;
}
.adyen-checkout__segmented-control {
background: #fff;
border: 1px solid #b9c4c9;
border-radius: 6px;
display: flex;
gap: 4px;
justify-content: space-between;
padding: 4px 5px;
}
.adyen-checkout__segmented-control--disabled {
pointer-events: none;
}
.adyen-checkout__segmented-control--disabled > .adyen-checkout__segmented-control-segment {
color: #8390a3;
}
.adyen-checkout__segmented-control--disabled > .adyen-checkout__segmented-control-segment--selected {
background: #f3f6f9;
border: 1.5px solid #8390a3;
}
.adyen-checkout__segmented-control-segment {
background: #fff;
border: 0;
border-radius: 6px;
color: #0075ff;
cursor: pointer;
flex-grow: 1;
font-weight: 500;
height: 40px;
text-align: center;
transition: background 0.3s ease-out;
width: 100%;
}
.adyen-checkout__segmented-control-segment:not(.adyen-checkout__segmented-control-segment--selected):hover {
background-color: #f7f8f9;
}
.adyen-checkout__segmented-control-segment:active {
background-color: #f7f8f9;
border: 1.5px solid #687282;
}
.adyen-checkout__segmented-control-segment--selected {
background: #e5f1ff;
border: 1.5px solid #0075ff;
color: #0075ff;
font-weight: 700;
}
.adyen-checkout_upi-mode-selection-text {
font-size: 13px;
font-weight: 400;
line-height: 19px;
margin-bottom: 7px;
margin-top: 0;
}
.adyen-checkout-trustly,
.adyen-checkout__segmented-control--upi-margin-bottom {
margin-bottom: 16px;
}
.adyen-checkout-trustly__descriptor {
font-size: 1em;
font-weight: 500;
margin: 0 0 4px;
}
.adyen-checkout-trustly__description-list {
font-size: 0.81em;
line-height: 1.5;
list-style-type: disc;
margin: 0;
padding-left: 20px;
}
.adyen-checkout-sr-panel {
font-size: 0.75em;
margin-bottom: 20px;
}
.adyen-checkout-sr-panel--sr-only {
clip: rect(0 0 0 0);
border: 0;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.d2b05eec476dcd7f-icon {
inset-inline-start: 8px;
margin: auto auto 25px;
top: 9px;
z-index: 1;
}
.d2b05eec476dcd7f-connectionInstructions {
margin-top: 8px;
text-align: center;
}
.b25217434b773efe-body {
margin: var(--space-16) 0;
}
.b25217434b773efe-flexColumn {
display: flex;
flex-direction: column;
}
.b25217434b773efe-infoNotice {
margin-bottom: 16px;
}
.b25217434b773efe-paymentRequestButton {
display: flex;
flex: 1;
flex-direction: row;
}
.b25217434b773efe-paymentModalBreadcrumbs:after {
padding: 0;
}
.b25217434b773efe-paymentModalError {
background-color: var(--modal-background);
padding-top: 12px;
}
._4ede82b332259d4f-awaitingAuthenticationStep {
padding-bottom: 16px;
padding-top: 16px;
}
._8a7af42ac9c326bb-awaitingWrapper {
align-items: center;
display: flex;
flex-direction: column;
text-align: center;
}
._96722b0ec7b1e2f4-body {
padding-bottom: 16px;
padding-top: 16px;
}
.e1e8320c18db82f6-notification {
align-items: center;
background-color: var(--status-positive-background);
border-radius: 8px;
box-sizing: border-box;
display: flex;
font-size: 14px;
font-weight: var(--font-weight-medium);
line-height: 1.3;
padding: 8px;
width: 100%;
}
.e1e8320c18db82f6-notification a {
color: var(--white);
font-weight: var(--font-weight-semibold);
}
.e1e8320c18db82f6-notification a:hover {
text-decoration: underline;
}
.e1e8320c18db82f6-icon {
flex-shrink: 0;
height: 24px;
width: 24px;
}
.e1e8320c18db82f6-icon,
.e1e8320c18db82f6-text {
color: var(--status-positive-text);
}
.e1e8320c18db82f6-text {
-webkit-margin-start: 8px;
flex: 1;
margin-inline-start: 8px;
}
._6220df7c030d3f82-confirmation {
align-items: center;
display: flex;
flex-direction: column;
padding: 30px 24px 10px;
}
._6220df7c030d3f82-confirmationHeader {
margin-bottom: 16px;
}
._6220df7c030d3f82-divider {
background-color: var(--border-subtle);
height: 1px;
margin: 24px 0;
width: 100%;
}
._1048eefadd42f695-legalFinePrint {
display: flex;
flex-direction: column;
gap: 8px;
}
.f38e431d211897d6-paymentSourceLabel {
-webkit-margin-start: 8px;
line-height: 22px;
margin-inline-start: 8px;
overflow: hidden;
text-overflow: ellipsis;
}
.f38e431d211897d6-paymentSourceLabel:first-child {
-webkit-margin-start: 0;
margin-inline-start: 0;
}
.f38e431d211897d6-paymentSourceSelectedOption {
align-items: center;
display: flex;
overflow: hidden;
}
.f38e431d211897d6-paymentSourceHasWarning {
border-end-end-radius: 0;
border-end-start-radius: 0;
}
.f38e431d211897d6-paymentSourceWarning {
align-content: center;
align-items: center;
display: flex;
padding: 8px;
-webkit-padding-start: 12px;
background-color: var(--background-base-lowest);
border-end-end-radius: 4px;
border-end-start-radius: 4px;
padding-inline-start: 12px;
}
.f38e431d211897d6-paymentSourceWarningIcon {
-webkit-padding-end: 8px;
padding-inline-end: 8px;
}
.f38e431d211897d6-error {
color: var(--red-400);
}
._553e7c10c6e72bf2-formTitle {
margin-bottom: 8px;
}
._553e7c10c6e72bf2-checkbox {
margin-bottom: 10px;
}
._553e7c10c6e72bf2-checkbox:last-child {
margin-bottom: 0;
}
._553e7c10c6e72bf2-checkboxLabel {
color: var(--interactive-text-default);
}
._553e7c10c6e72bf2-finePrint {
color: var(--text-muted);
font-size: 12px;
line-height: 14px;
margin-bottom: 16px;
margin-top: 8px;
}
._65536f0d3da170cd-container {
background: var(--background-surface-highest);
border: 1px solid var(--border-normal, hsla(240, 4%, 61%, 0.32));
border-radius: 12px;
gap: 12px;
margin-bottom: var(--space-12);
padding-block: 8px;
padding-inline: 8px 16px;
}
._65536f0d3da170cd-container,
._65536f0d3da170cd-content {
align-items: center;
display: flex;
}
._65536f0d3da170cd-content {
gap: var(--space-12);
justify-content: center;
}
._7b5f3bf48e52c906-attributionBannerContainer {
align-items: center;
border-radius: 4px;
display: flex;
flex-direction: row;
min-height: 48px;
position: relative;
-webkit-padding-start: 28px;
margin-top: 16px;
padding-bottom: 8px;
padding-inline-start: 28px;
padding-top: 8px;
}
._7b5f3bf48e52c906-avatarContainer {
height: 32px;
width: 32px;
}
._7b5f3bf48e52c906-bannerHeader {
padding-inline: 8px;
}
._7b5f3bf48e52c906-bannerIcon {
border-radius: 4px;
bottom: 0;
inset-inline-end: 0;
position: absolute;
z-index: -1;
}
._7b5f3bf48e52c906-bannerCopy {
border-bottom: 1px solid rgba(78, 80, 88, 0.48);
padding-bottom: 16px;
padding-top: 8px;
}
.theme-light ._7b5f3bf48e52c906-attributionBannerContainer {
background: linear-gradient(90deg, rgba(133, 71, 198, 0.4), rgba(184, 69, 193, 0.4) 50.24%, rgba(171, 93, 138, 0.4));
}
.theme-dark ._7b5f3bf48e52c906-attributionBannerContainer {
background: linear-gradient(90deg, rgba(133, 71, 198, 0.5), rgba(184, 69, 193, 0.5) 50.24%, rgba(171, 93, 138, 0.5));
}
.fda3e4c2d6b02208-table {
background-color: var(--background-mod-subtle);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
padding: var(--space-12);
}
.fda3e4c2d6b02208-table.fda3e4c2d6b02208-premiumRebrand {
border: 1px solid var(--border-muted);
}
.fda3e4c2d6b02208-table.fda3e4c2d6b02208-hasError {
margin-bottom: var(--space-16);
}
.fda3e4c2d6b02208-flex {
display: flex;
}
.fda3e4c2d6b02208-header {
color: var(--interactive-text-active);
font-weight: var(--font-weight-semibold);
margin-bottom: 8px;
}
.fda3e4c2d6b02208-header,
.fda3e4c2d6b02208-rowBase {
font-size: 16px;
line-height: 20px;
}
.fda3e4c2d6b02208-rowBase {
display: flex;
font-weight: var(--font-weight-medium);
}
.fda3e4c2d6b02208-rowBase:not(:last-child) {
margin-bottom: 8px;
}
.fda3e4c2d6b02208-row {
align-items: flex-start;
color: var(--interactive-text-default);
justify-content: space-between;
}
.fda3e4c2d6b02208-row.fda3e4c2d6b02208-canceled {
color: var(--text-feedback-critical);
}
.fda3e4c2d6b02208-rowAmount {
align-items: center;
display: flex;
white-space: nowrap;
}
.fda3e4c2d6b02208-rowLabel {
-webkit-margin-end: 10px;
margin-inline-end: 10px;
}
.fda3e4c2d6b02208-rowPercentDiscount {
-webkit-margin-start: 8px;
background-color: var(--green-360);
border-radius: 2px;
color: var(--white);
font-size: 12px;
line-height: 16px;
margin-inline-start: 8px;
padding: 2px 4px;
}
.fda3e4c2d6b02208-rowDiscountOriginalPrice {
color: var(--text-muted);
font-size: 14px;
font-weight: var(--font-weight-medium);
line-height: 16px;
margin: -4px 0 4px;
text-align: end;
text-decoration: line-through;
}
.fda3e4c2d6b02208-entitlementDiscountRow {
color: var(--text-feedback-positive);
justify-content: flex-end;
}
.fda3e4c2d6b02208-divider {
background-color: var(--border-muted);
height: 1px;
margin: 16px 0;
}
.fda3e4c2d6b02208-divider.fda3e4c2d6b02208-negativeMarginTop {
margin-top: -16px;
}
.fda3e4c2d6b02208-divider.fda3e4c2d6b02208-negativeMarginBottom {
margin-bottom: -4px;
}
.fda3e4c2d6b02208-dividerExtended {
height: 4px;
margin-inline: -16px;
}
.fda3e4c2d6b02208-totalRow {
align-items: center;
display: flex;
justify-content: space-between;
}
.fda3e4c2d6b02208-totalLabel {
color: var(--interactive-text-default);
font-size: 16px;
font-weight: var(--font-weight-medium);
line-height: 20px;
}
.fda3e4c2d6b02208-totalAmount,
.fda3e4c2d6b02208-totalLabel strong {
color: var(--interactive-text-active);
font-weight: var(--font-weight-semibold);
}
.fda3e4c2d6b02208-finePrint {
color: var(--text-default);
font-size: 12px;
font-weight: var(--font-weight-medium);
line-height: 16px;
margin: 16px 0;
}
.fda3e4c2d6b02208-annualPlanDiscountPriceSection {
align-self: flex-end;
display: flex;
flex-direction: row;
}
.fda3e4c2d6b02208-annualPlanOptionDiscount {
background-color: var(--green-360);
border-radius: 8px;
font-weight: var(--font-weight-semibold);
margin-top: 2px;
padding: 0 6px;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
max-height: 16px;
position: relative;
}
.fda3e4c2d6b02208-annualDiscountValues {
display: flex;
flex-direction: column;
}
.fda3e4c2d6b02208-trialEndPrice {
text-align: end;
}
._0687d3d14ec42cbc-activeFractionalPremiumBannerContainer {
align-items: center;
border-radius: 4px;
display: flex;
flex-direction: row;
margin-bottom: 16px;
margin-top: 5px;
min-height: 48px;
padding-inline: 20px;
padding-bottom: 10px;
padding-top: 10px;
position: relative;
}
.theme-light ._0687d3d14ec42cbc-activeFractionalPremiumBannerContainer {
background: linear-gradient(90deg, rgba(133, 71, 198, 0.4), rgba(184, 69, 193, 0.4) 50.24%, rgba(171, 93, 138, 0.4));
}
.theme-dark ._0687d3d14ec42cbc-activeFractionalPremiumBannerContainer {
background: linear-gradient(90deg, rgba(133, 71, 198, 0.5), rgba(184, 69, 193, 0.5) 50.24%, rgba(171, 93, 138, 0.5));
}
._0687d3d14ec42cbc-activeFractionalPremiumBannerBackgroundImage {
background-image: url(/assets/bb502dc7cfcbbacc.svg);
background-repeat: no-repeat;
bottom: 0;
position: absolute;
top: 40%;
inset-inline: 78% 0;
}
._0687d3d14ec42cbc-nitroIconContainer {
height: 28px;
width: 28px;
-webkit-padding-end: 12px;
padding-inline-end: 12px;
}
.theme-light ._0687d3d14ec42cbc-iconFractional {
display: none;
}
.theme-light ._0687d3d14ec42cbc-iconFractionalDark {
filter: drop-shadow(0 1px 2px rgb(0 0 0/0.4));
height: 28px;
width: 28px;
}
.theme-dark ._0687d3d14ec42cbc-iconFractional {
filter: drop-shadow(0 1px 2px rgb(0 0 0/0.4));
height: 28px;
width: 28px;
}
.theme-dark ._0687d3d14ec42cbc-iconFractionalDark {
display: none;
}
._0687d3d14ec42cbc-premiumBrandRefreshContainer {
align-items: center;
background-color: var(--background-surface-highest);
border-radius: var(--radius-md);
display: flex;
flex-direction: row;
margin-bottom: 16px;
margin-top: 5px;
padding: var(--space-8);
position: relative;
}
._0687d3d14ec42cbc-premiumBrandRefreshIcon {
-webkit-margin-end: var(--space-12);
margin-inline-end: var(--space-12);
}
.c0e5ec63a6633c60-wrapper {
border-radius: 4px;
transition: background-color 0.2s ease;
}
.c0e5ec63a6633c60-wrapperActive {
background-color: var(--background-mod-subtle);
}
.d0a022c82c81f631-container {
display: flex;
gap: 8px;
margin-top: 8px;
}
.d0a022c82c81f631-icon {
flex-shrink: 0;
}
._3398004a3d491de2-container {
display: flex;
gap: 8px;
margin-top: 20px;
}
._3398004a3d491de2-iconBackground {
align-items: center;
background-color: var(--interactive-muted);
border-radius: var(--radius-round);
display: flex;
justify-content: center;
padding: 8px;
}
._3398004a3d491de2-link {
cursor: pointer;
display: inline;
text-decoration: underline;
}
.b39acb6f80ac0e4e-pricePerInterval {
color: var(--interactive-text-default);
font-size: 16px;
font-weight: var(--font-weight-normal);
line-height: 20px;
}
.b39acb6f80ac0e4e-pricePerInterval strong {
color: var(--interactive-text-active);
font-size: 24px;
font-weight: var(--font-weight-semibold);
line-height: 30px;
}
.c93be2b49ef88d42-body {
margin-bottom: 40px;
margin-top: 40px;
}
.c93be2b49ef88d42-textArea {
--channel-text-area-placeholder: var(--input-placeholder-text-default);
height: 136px;
transition: border-color 0.2s ease-in-out;
}
.c93be2b49ef88d42-textArea:focus-within {
border-color: var(--text-link);
}
.c93be2b49ef88d42-textArea > div {
height: 100%;
}
.c93be2b49ef88d42-editorTextArea {
height: 136px;
}
.theme-dark .c93be2b49ef88d42-textArea * > span {
color: var(--white);
}
.theme-light .c93be2b49ef88d42-textArea * > span {
color: var(--text-default);
}
._8564eca6ac0e94d4-container {
align-items: center;
background-color: var(--primary-860);
border-radius: var(--radius-sm);
cursor: pointer;
display: flex;
gap: var(--space-6);
height: var(--space-32);
justify-content: center;
opacity: 0.7;
padding: 0 var(--space-16);
width: 140px;
}
._8564eca6ac0e94d4-container._8564eca6ac0e94d4-refresh {
background-color: var(--background-mod-subtle);
border-color: var(--border-muted);
opacity: 1;
}
._8564eca6ac0e94d4-contentContainer {
align-items: center;
display: flex;
gap: var(--space-6);
min-width: 0;
}
._8564eca6ac0e94d4-soundIcon {
min-height: 14px;
min-width: 14px;
}
._8564eca6ac0e94d4-text {
color: var(--white);
}
._8564eca6ac0e94d4-text._8564eca6ac0e94d4-refresh {
color: var(--text-strong);
}
._8564eca6ac0e94d4-customGiftHeader {
align-items: center;
background-color: var(--background-surface-high);
box-shadow: var(--elevation-low);
display: block;
grid-column: 1/3;
grid-row: 1/2;
padding: 12px;
z-index: 1;
}
._8564eca6ac0e94d4-searchAndSound {
align-items: center;
display: flex;
margin-top: 10px;
}
._231eb2f893fd8406-container {
align-items: center;
background-color: var(--primary-860);
border-radius: var(--radius-sm);
cursor: pointer;
display: flex;
gap: var(--space-6);
height: var(--space-32);
justify-content: center;
opacity: 0.7;
padding: 0 var(--space-16);
width: 140px;
}
._231eb2f893fd8406-container._231eb2f893fd8406-refresh {
background-color: var(--background-mod-subtle);
border-color: var(--border-muted);
opacity: 1;
}
._231eb2f893fd8406-contentContainer {
align-items: center;
display: flex;
gap: var(--space-6);
min-width: 0;
}
._231eb2f893fd8406-emojiIcon {
min-height: 14px;
min-width: 14px;
}
._231eb2f893fd8406-text {
color: var(--white);
}
._231eb2f893fd8406-text._231eb2f893fd8406-refresh {
color: var(--text-strong);
}
._231eb2f893fd8406-emojiList {
background-color: var(--background-surface-high);
}
._231eb2f893fd8406-emojiHeader {
background-color: var(--background-base-lower) !important;
}
._231eb2f893fd8406-customGiftContent {
display: flex;
flex-direction: column;
width: 100%;
}
._231eb2f893fd8406-customGiftHeader {
margin-bottom: 10px;
}
._231eb2f893fd8406-categoryList {
top: 120px;
}
.d50aac0b42bc0bbc-customGiftBox,
.d50aac0b42bc0bbc-customGiftBoxHighlighted {
background-color: var(--transparent);
border: 3px solid var(--transparent);
border-radius: 8px;
cursor: pointer;
}
.d50aac0b42bc0bbc-customGiftBoxHighlighted {
border: 2px solid var(--brand-500);
padding: 2px;
}
.d50aac0b42bc0bbc-button {
width: 100%;
}
.d54fab654f8d3dd6-giftMainAnimation {
align-items: flex-end;
display: flex;
height: 275px;
justify-content: center;
position: relative;
}
.d54fab654f8d3dd6-adjustedGiftMainAnimation {
-webkit-margin-start: -20px;
height: 230px;
margin-inline-start: -20px;
}
.d54fab654f8d3dd6-soundEmojiContainer {
bottom: 16px;
display: flex;
gap: var(--space-6);
justify-content: center;
position: absolute;
width: 100%;
}
.d54fab654f8d3dd6-soundEmojiContainer.d54fab654f8d3dd6-refresh {
bottom: unset;
gap: var(--space-12);
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
margin-top: 12px;
top: 100%;
}
.d54fab654f8d3dd6-animation {
transform: scale(1);
}
.d54fab654f8d3dd6-spinner {
height: 100%;
transform: scale(0.75);
width: 100%;
}
.d54fab654f8d3dd6-giftBoxOptionContainer {
align-items: center;
display: flex;
flex-direction: row;
gap: 9px;
margin: 25px auto auto;
max-width: 85%;
}
.d54fab654f8d3dd6-adjustedGiftBoxOptionContainer {
-webkit-margin-start: 15px;
margin-inline-start: 15px;
}
.b130855d8984d74e-planOption {
align-items: center;
color: var(--interactive-text-default);
display: flex;
justify-content: space-between;
padding: 8px 0;
}
.b130855d8984d74e-planOneTimeCost {
margin-top: 8px;
}
.b130855d8984d74e-selectionBox {
border-radius: var(--radius-lg);
margin-bottom: 12px;
outline: 1px solid var(--border-normal);
padding: var(--space-12);
}
.b130855d8984d74e-selectedPlan {
background-color: var(--background-surface-high);
outline: 2px solid var(--brand-500);
outline-color: var(--checkbox-border-default);
}
.b130855d8984d74e-planOptionDisabled {
opacity: 0.6;
}
.b130855d8984d74e-planOptionClickable {
align-items: center;
display: flex;
}
.b130855d8984d74e-planOptionDisabled .b130855d8984d74e-planOptionClickable {
cursor: not-allowed;
}
.b130855d8984d74e-planOptionCheckbox {
-webkit-margin-end: 10px;
margin-inline-end: 10px;
}
.b130855d8984d74e-planOptionInterval {
color: var(--interactive-text-default);
font-weight: var(--font-weight-medium);
}
.b130855d8984d74e-optionSelected {
color: var(--interactive-text-active);
}
.b130855d8984d74e-planOptionCurrentPlan,
.b130855d8984d74e-planOptionMonthsFree {
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
.b130855d8984d74e-planOptionDiscount {
border-radius: 16px;
padding: 2px 8px;
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
.b130855d8984d74e-annualPlanOptionDiscount,
.b130855d8984d74e-planOptionDiscount {
background-color: var(--green-360);
font-weight: var(--font-weight-semibold);
}
.b130855d8984d74e-annualPlanOptionDiscount {
align-content: center;
border-radius: 8px;
margin-top: 3px;
padding: 0 6px;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
position: relative;
}
.b130855d8984d74e-planOptionSubtextContainer {
display: flex;
justify-content: flex-end;
width: 100%;
}
.b130855d8984d74e-planOptionSubtext {
max-width: 176px;
padding-bottom: 12px;
}
.b130855d8984d74e-discountPlanOptionSubtext {
max-width: 300px;
text-align: end;
}
.b130855d8984d74e-discountPlanOptionSubtext p {
margin: 0;
}
.b130855d8984d74e-planOptionClickableContainer {
cursor: pointer;
}
.b130855d8984d74e-optionPriceSelected,
.b130855d8984d74e-updatedOptionSelected {
font-weight: var(--font-weight-semibold);
}
.b130855d8984d74e-optionPriceSelected {
color: var(--interactive-text-active);
}
._57118fa452cbc0e3-giftRecipientInfo {
align-items: center;
display: flex;
}
._57118fa452cbc0e3-giftRecipientInfo > * {
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
._57118fa452cbc0e3-content {
margin: 24px 0;
}
._57118fa452cbc0e3-giftRecipientName,
._57118fa452cbc0e3-giftRecipientTag {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._57118fa452cbc0e3-giftRecipientTag {
color: GrayText;
}
.d947e68f3c652858-stepBody {
padding-top: 12px;
}
.d947e68f3c652858-giftOptions {
justify-content: center;
max-width: 75%;
}
.d947e68f3c652858-stepBodyCustomGift {
display: flex;
flex-direction: row;
width: 820px;
}
.d947e68f3c652858-bodyColumnMiddle,
.d947e68f3c652858-bodyColumnMiddleCentered {
-webkit-margin-end: 30px;
margin-inline-end: 30px;
}
.d947e68f3c652858-bodyColumnMiddleCentered {
align-items: center;
display: flex;
justify-content: center;
}
.d947e68f3c652858-bodyColumnLeft {
margin-inline: var(--space-24) 60px;
}
.d947e68f3c652858-bodyColumnRight {
-webkit-margin-end: 10px;
margin-inline-end: 10px;
}
.d947e68f3c652858-stepBodyCustomGift > * {
width: 50%;
}
.d947e68f3c652858-bodyText {
font-size: 16px;
font-weight: var(--font-weight-medium);
line-height: 20px;
margin-bottom: 16px;
}
.d947e68f3c652858-bodyText,
.d947e68f3c652858-interactiveColor {
color: var(--interactive-text-default);
}
.d947e68f3c652858-clickable {
cursor: pointer;
}
.d947e68f3c652858-selectPlanDivider {
background-color: var(--border-subtle);
height: 1px;
margin: 8px 0 16px;
}
.d947e68f3c652858-giftRecipientName {
color: GrayText;
}
.d947e68f3c652858-giftRecipientInfo {
align-items: center;
display: flex;
}
.d947e68f3c652858-giftRecipientInfo > * {
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
.d947e68f3c652858-giftNitroInfo {
margin-bottom: 20px;
margin-top: 15px;
}
.d947e68f3c652858-giftNitroInfo hr {
background-color: var(--border-subtle);
border: none;
height: 1px;
}
.d947e68f3c652858-selectPlanChooseSubtitle,
.d947e68f3c652858-selectPlanChooseTitle {
color: var(--interactive-text-active);
font-size: 16px;
line-height: 20px;
margin-bottom: 8px;
}
.d947e68f3c652858-selectPlanChooseTitle {
font-weight: var(--font-weight-semibold);
}
.d947e68f3c652858-selectPlanChooseSubtitle {
margin-bottom: 18px;
}
.d947e68f3c652858-selectPlanTotalRow {
margin-top: 8px;
}
.d947e68f3c652858-seasonalGiftBoxHeaderIcon {
align-self: center;
position: absolute;
top: -131px;
width: 260px;
}
.d947e68f3c652858-planSelectSeparator {
background: var(--border-subtle);
border: 0;
height: 1px;
margin: 0 0 4px;
width: 100%;
}
.d947e68f3c652858-trialPlanSelectHeader {
padding-bottom: 12px;
}
.d947e68f3c652858-legacyPricingNotice {
margin-bottom: 16px;
}
.d947e68f3c652858-customGiftMessageWrapper {
margin-bottom: 16px;
margin-top: 16px;
}
.d947e68f3c652858-customGiftMessage {
background-color: var(--background-base-lowest);
}
.d947e68f3c652858-selectGiftTitle {
margin-top: 16px;
}
.d947e68f3c652858-equalDistantBackButton {
-webkit-padding-start: 10px;
padding-inline-start: 10px;
}
.d947e68f3c652858-compactSendGiftToUser {
margin: 16px 0;
}
.d947e68f3c652858-compactSelectGiftTitle {
margin-top: 16px;
}
._3d62f5ba2345de8d-subscriptionCostRowAmount {
font-weight: var(--font-weight-medium);
}
._3d62f5ba2345de8d-subscriptionCostRow {
color: var(--text-strong);
}
._3d62f5ba2345de8d-invoiceItemLabelWithIcon {
align-items: center;
display: flex;
}
._3d62f5ba2345de8d-invoiceItemLabelIcon {
color: var(--interactive-text-default);
-webkit-margin-start: 8px;
height: 14px;
margin-inline-start: 8px;
width: 14px;
}
._3d62f5ba2345de8d-invoiceItemTooltip {
max-width: 240px;
}
._3d62f5ba2345de8d-invoiceItemTooltip p {
margin: 0;
}
._3d62f5ba2345de8d-invoiceItemTooltip strong {
font-weight: var(--font-weight-bold);
}
._3d62f5ba2345de8d-subscriptionDetailsToggle {
align-items: center;
color: var(--text-default);
cursor: pointer;
display: flex;
font-size: 12px;
font-weight: var(--font-weight-medium);
justify-content: center;
line-height: 16px;
margin: -16px 0;
padding: 16px 0;
}
._3d62f5ba2345de8d-subscriptionDetailsToggleCaret {
-webkit-margin-start: 6px;
height: 16px;
margin-inline-start: 6px;
width: 16px;
}
._3d62f5ba2345de8d-subscriptionPeriodResetNotice {
color: var(--text-default);
font-size: 16px;
font-weight: var(--font-weight-medium);
line-height: 20px;
margin-bottom: 16px;
}
._3d62f5ba2345de8d-subscriptionAddedInvoiceItem {
color: var(--text-feedback-positive);
}
._3d62f5ba2345de8d-purchaseDetailsHeaderText {
margin-bottom: 8px;
}
.e4d8037328efe0da-root {
background-color: transparent;
}
.e4d8037328efe0da-root > :last-child {
border-end-end-radius: 4px;
border-end-start-radius: 4px;
}
.e4d8037328efe0da-root.e4d8037328efe0da-withHeader > :first-child {
background-color: transparent;
}
.e4d8037328efe0da-shaker {
align-items: center;
display: flex;
flex-direction: column;
flex-grow: 1;
height: 100%;
justify-content: center;
max-height: 660px;
}
.e4d8037328efe0da-modalHeader {
margin-bottom: -20px;
padding-bottom: 0;
}
.e4d8037328efe0da-header {
margin-bottom: 12px;
}
.e4d8037328efe0da-headerAnimation {
bottom: -20px;
inset-inline-start: calc(50% - 220px);
position: absolute;
top: 0;
width: 440px;
}
.e4d8037328efe0da-stepBody {
padding-top: 16px;
}
.e4d8037328efe0da-bodyText {
color: var(--interactive-text-default);
font-size: 16px;
font-weight: var(--font-weight-medium);
line-height: 20px;
}
.e4d8037328efe0da-invoice,
.e4d8037328efe0da-taxInclusiveNote {
margin-bottom: 16px;
}
.e4d8037328efe0da-premiumBrandRefreshInputBackground {
background-color: var(--background-mod-subtle) !important;
border: 0 !important;
}
.e4d8037328efe0da-paymentSourceWrapper {
margin: 12px 0;
}
.e4d8037328efe0da-paymentSourceOptionalWarning {
color: var(--text-default);
margin-top: 16px;
}
.e4d8037328efe0da-currencyWrapper {
margin-bottom: 16px;
margin-top: 16px;
}
@media (max-width: 485px) {
.e4d8037328efe0da-shaker {
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
max-height: none;
}
.e4d8037328efe0da-root,
.e4d8037328efe0da-shaker {
justify-content: center;
}
.e4d8037328efe0da-root {
border-radius: 0;
width: 100vw;
}
}
.e4d8037328efe0da-trialCheckbox {
align-items: flex-start;
}
.e4d8037328efe0da-trialCheckboxLabel {
font-size: 14px;
line-height: 18px;
}
.e4d8037328efe0da-loader {
margin-top: 64px;
}
.e4d8037328efe0da-contentWrapper {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
}
.e4d8037328efe0da-reviewWarningMessageContainer {
background-color: var(--background-feedback-warning);
border: 1px solid var(--status-warning-background);
border-radius: 4px;
display: flex;
flex-direction: row;
margin-bottom: 16px;
padding: 10px;
}
.e4d8037328efe0da-reviewWarningMessage {
color: var(--interactive-text-active);
-webkit-margin-start: 10px;
margin-inline-start: 10px;
}
.e4d8037328efe0da-trialPriceLine {
align-items: center;
display: flex;
justify-content: space-between;
padding-bottom: 4px;
}
.e4d8037328efe0da-afterTrialPriceLine {
align-items: center;
display: flex;
justify-content: flex-end;
}
.e4d8037328efe0da-discountSubtext {
text-align: end;
}
.e4d8037328efe0da-discountSubtext p {
margin: 0;
}
.e4d8037328efe0da-formTitle {
margin-bottom: 12px;
}
.e4d8037328efe0da-spinnerWrapper {
align-items: center;
display: flex;
justify-content: center;
min-height: 280px;
min-width: 402px;
}
.e4d8037328efe0da-trialHeader {
margin-bottom: 18px;
}
.e4d8037328efe0da-giftMainAnimation {
margin-bottom: var(--space-8);
margin-top: -32px;
position: relative;
}
.e4d8037328efe0da-selectFreeSku {
display: none;
}
.d313e68c0d38a30e-renewalInvoiceDate {
color: var(--text-default);
margin-bottom: 16px;
}
._56a2199dfef1aa99-paymentNote {
background-color: var(--modal-background);
margin: 0;
padding: 16px 16px 0;
}
._98bed514a456096a-warningContainer {
align-items: center;
background-color: var(--background-feedback-warning);
border-radius: var(--radius-sm);
display: flex;
flex-direction: row;
gap: var(--space-10);
padding: var(--space-8);
}
.b52e4f70d11a5ca2-gameIcon {
filter: saturate(var(--saturation-factor, 1));
-webkit-user-drag: none;
background-size: 100%;
border-radius: var(--radius-sm);
color: var(--text-strong);
}
.b52e4f70d11a5ca2-intersectionContainer,
.b52e4f70d11a5ca2-intersectionRef {
position: absolute;
}
.b52e4f70d11a5ca2-intersectionRef {
background: transparent;
height: 1px;
inset-inline-start: 0;
top: 0;
width: 1px;
}
.b52e4f70d11a5ca2-large,
.b52e4f70d11a5ca2-medium,
.b52e4f70d11a5ca2-small {
flex-shrink: 0;
}
.b52e4f70d11a5ca2-xxsmall {
border-radius: var(--radius-xs);
height: 16px;
width: 16px;
}
.b52e4f70d11a5ca2-xsmall {
height: 24px;
width: 24px;
}
.b52e4f70d11a5ca2-small,
.b52e4f70d11a5ca2-xsmall {
border-radius: var(--radius-sm);
}
.b52e4f70d11a5ca2-small {
height: 30px;
width: 30px;
}
.b52e4f70d11a5ca2-medium {
height: 40px;
width: 40px;
}
.b52e4f70d11a5ca2-medium,
.b52e4f70d11a5ca2-mediumLarge {
border-radius: var(--radius-md);
}
.b52e4f70d11a5ca2-mediumLarge {
height: 48px;
width: 48px;
}
.b52e4f70d11a5ca2-large {
height: 60px;
width: 60px;
}
.b52e4f70d11a5ca2-large,
.b52e4f70d11a5ca2-xlarge {
border-radius: var(--radius-lg);
}
.b52e4f70d11a5ca2-xlarge {
height: 80px;
width: 80px;
}
@keyframes b52e4f70d11a5ca2-placeholderPulse {
0% {
opacity: 0.8;
}
50% {
opacity: 1;
}
to {
opacity: 0.8;
}
}
.b52e4f70d11a5ca2-gameIconLoading {
animation: b52e4f70d11a5ca2-placeholderPulse 1.3s ease-in-out infinite;
background-color: var(--background-secondary-alt);
}
._20a53846fe2e8513-muted ._20a53846fe2e8513-avatar {
opacity: 0.3;
}
._20a53846fe2e8513-muted {
color: var(--interactive-muted);
}
._20a53846fe2e8513-highlighted {
color: var(--text-strong);
}
._20a53846fe2e8513-layout {
align-items: center;
border-radius: 4px;
display: flex;
height: 42px;
min-width: 0;
padding: 0;
}
._20a53846fe2e8513-layout._20a53846fe2e8513-fullWidth,
._20a53846fe2e8513-layout._20a53846fe2e8513-fullWidth ._20a53846fe2e8513-content,
._20a53846fe2e8513-layout._20a53846fe2e8513-fullWidth ._20a53846fe2e8513-nameAndDecorators {
width: 100%;
}
._20a53846fe2e8513-avatar {
align-items: center;
display: flex;
flex: 0 0 auto;
justify-content: center;
-webkit-margin-end: 12px;
height: unset;
margin-inline-end: 12px;
width: unset;
}
._20a53846fe2e8513-content {
flex: 1 1 auto;
min-width: 0;
}
._20a53846fe2e8513-content,
._20a53846fe2e8513-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._20a53846fe2e8513-name {
flex: 0 1 auto;
font-size: 16px;
font-weight: var(--font-weight-medium);
line-height: 20px;
}
._20a53846fe2e8513-highlighted ._20a53846fe2e8513-name {
font-weight: var(--font-weight-semibold-1x-light-theme, 500);
}
._20a53846fe2e8513-leftName {
justify-content: flex-start;
overflow: hidden;
}
._20a53846fe2e8513-leftName,
._20a53846fe2e8513-nameAndDecorators {
align-items: center;
display: flex;
}
._20a53846fe2e8513-nameAndDecorators {
justify-content: space-between;
}
._20a53846fe2e8513-subText {
margin-top: -2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._20a53846fe2e8513-subText:empty {
display: none;
}
.enable-forced-colors ._20a53846fe2e8513-muted {
color: inherit;
}
.enable-forced-colors ._20a53846fe2e8513-highlighted {
color: inherit;
}
.density-cozy ._20a53846fe2e8513-layout {
height: 48px;
}
.density-default ._20a53846fe2e8513-layout {
height: 42px;
}
.density-compact ._20a53846fe2e8513-layout {
height: 38px;
}
._20a53846fe2e8513-withDisplayNameStyles {
overflow: visible;
}
._20a53846fe2e8513-withDisplayNameStyles ._20a53846fe2e8513-name {
flex: 1 1 0;
min-width: 0;
overflow: visible;
text-overflow: clip;
white-space: normal;
}
.e144e058a84f76ff-nameplatePreview {
align-items: center;
border-radius: var(--radius-sm);
display: flex;
height: 42px;
position: relative;
}
.e144e058a84f76ff-nameplatePreview.e144e058a84f76ff-large {
height: 52px;
}
.e144e058a84f76ff-nameplatePreview.e144e058a84f76ff-xlarge {
height: 62px;
}
.density-cozy .e144e058a84f76ff-nameplatePreview {
height: 48px;
}
.density-cozy .e144e058a84f76ff-nameplatePreview.e144e058a84f76ff-xsmall {
height: 26px;
}
.density-cozy .e144e058a84f76ff-nameplatePreview.e144e058a84f76ff-small {
height: 30px;
}
.density-cozy .e144e058a84f76ff-nameplatePreview.e144e058a84f76ff-large {
height: 58px;
}
.density-cozy .e144e058a84f76ff-nameplatePreview.e144e058a84f76ff-xlarge {
height: 68px;
}
.density-default .e144e058a84f76ff-nameplatePreview {
height: 42px;
}
.density-default .e144e058a84f76ff-nameplatePreview.e144e058a84f76ff-xsmall {
height: 26px;
}
.density-default .e144e058a84f76ff-nameplatePreview.e144e058a84f76ff-small {
height: 30px;
}
.density-default .e144e058a84f76ff-nameplatePreview.e144e058a84f76ff-large {
height: 52px;
}
.density-default .e144e058a84f76ff-nameplatePreview.e144e058a84f76ff-xlarge {
height: 62px;
}
.density-compact .e144e058a84f76ff-nameplatePreview {
height: 38px;
}
.density-compact .e144e058a84f76ff-nameplatePreview.e144e058a84f76ff-xsmall {
height: 26px;
}
.density-compact .e144e058a84f76ff-nameplatePreview.e144e058a84f76ff-small {
height: 34px;
}
.density-compact .e144e058a84f76ff-nameplatePreview.e144e058a84f76ff-large {
height: 48px;
}
.density-compact .e144e058a84f76ff-nameplatePreview.e144e058a84f76ff-xlarge {
height: 58px;
}
.e144e058a84f76ff-overlayContainer {
flex: 1;
height: 100%;
margin-block: 0;
margin-inline: 8px 32px;
position: relative;
}
.e144e058a84f76ff-nameplatePreview.e144e058a84f76ff-large .e144e058a84f76ff-overlayContainer {
margin-block: 0;
margin-inline: 10px 38px;
}
.e144e058a84f76ff-nameplatePreview.e144e058a84f76ff-xlarge .e144e058a84f76ff-overlayContainer {
margin-block: 0;
margin-inline: 14px 44px;
}
.e144e058a84f76ff-avatarContainer {
align-items: center;
display: flex;
height: 100%;
max-width: 100%;
opacity: 0;
position: absolute;
transition: opacity 0.4s ease;
width: 100%;
}
.e144e058a84f76ff-avatar {
-webkit-margin-end: 12px;
margin-inline-end: 12px;
}
.e144e058a84f76ff-avatarVisible {
opacity: 1;
}
.e144e058a84f76ff-placeholderUsername {
border-radius: 8px;
height: 14px;
opacity: 0.5;
width: 66%;
}
.e144e058a84f76ff-nameplatePreview.e144e058a84f76ff-xsmall .e144e058a84f76ff-placeholderUsername {
height: 8px;
}
.e144e058a84f76ff-nameplatePreview.e144e058a84f76ff-small .e144e058a84f76ff-placeholderUsername {
height: 10px;
}
.e144e058a84f76ff-nameplatePreview.e144e058a84f76ff-large .e144e058a84f76ff-placeholderUsername {
height: 16px;
}
.e144e058a84f76ff-nameplatePreview.e144e058a84f76ff-xlarge .e144e058a84f76ff-placeholderUsername {
height: 18px;
}
.theme-light .e144e058a84f76ff-placeholderUsername {
background-color: #aaaab2;
}
.theme-dark .e144e058a84f76ff-placeholderUsername {
background-color: #706f74;
}
.e144e058a84f76ff-tagChiplet {
-webkit-margin-start: var(--space-4);
margin-inline-start: var(--space-4);
}
.e144e058a84f76ff-inheritWidth {
width: inherit;
}
._0137000bc80ab6ea-profileEffects {
height: 100%;
inset-inline-start: 0;
overflow: hidden;
pointer-events: none;
position: absolute;
top: 0;
transition: opacity 0.6s ease-in-out;
width: 100%;
z-index: var(--custom-user-profile-middle-layer-z-index, 2);
}
._0137000bc80ab6ea-hovered {
opacity: 0.35;
}
._0137000bc80ab6ea-inner {
height: 100%;
inset-inline-start: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
}
.user-profile-modal-v2 ._0137000bc80ab6ea-inner {
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
._0137000bc80ab6ea-innerNoRadius {
border-radius: 0;
}
._0137000bc80ab6ea-effect {
inset-inline-start: 0;
position: absolute;
top: 0;
width: 100%;
}
._1e45840d30b6fafc-previewContainer {
display: flex;
justify-content: center;
overflow: hidden;
position: relative;
width: 100%;
z-index: 0;
}
._1e45840d30b6fafc-previewContainerSetHeight {
height: 390px;
}
.full-motion ._1e45840d30b6fafc-previewContainerAnimation {
animation: _1e45840d30b6fafc-scaleIn 0.5s;
}
._1e45840d30b6fafc-preview {
height: 100%;
object-fit: cover;
object-position: top;
position: relative;
width: 100%;
}
@keyframes _1e45840d30b6fafc-scaleIn {
0% {
transform: scale(0.7);
}
to {
transform: scale(1);
}
}
.d71c71459df6d8de-fadeInAvatarImg {
animation: d71c71459df6d8de-fadeIn 1.5s;
}
.d71c71459df6d8de-avatar {
margin: 0 auto;
}
@keyframes d71c71459df6d8de-fadeIn {
0% {
opacity: 0;
}
to {
opacity: 1;
}
}
._6d0994faecf3e6ea-container {
align-items: center;
aspect-ratio: 1.1;
display: flex;
height: 100%;
justify-content: center;
position: relative;
}
._6d0994faecf3e6ea-profileEffectShopPreview {
border-radius: var(--radius-sm);
height: 80%;
inset-inline-start: 6%;
overflow: hidden;
position: absolute;
top: 10%;
transform-origin: top center;
width: auto;
}
._6d0994faecf3e6ea-avatarDecorationPreview {
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
inset-inline-end: 6%;
position: absolute;
transform: rotate(6deg);
}
._6d0994faecf3e6ea-twoItemBundle ._6d0994faecf3e6ea-profileEffectShopPreview {
aspect-ratio: 0.86;
transform: rotate(-6deg);
}
._6d0994faecf3e6ea-twoItemBundle ._6d0994faecf3e6ea-avatarDecorationPreview {
top: 22%;
}
._6d0994faecf3e6ea-threeItemBundle ._6d0994faecf3e6ea-profileEffectShopPreview {
aspect-ratio: 0.8;
transform: rotate(-8deg);
}
._6d0994faecf3e6ea-threeItemBundle ._6d0994faecf3e6ea-avatarDecorationPreview {
top: 12%;
}
._6d0994faecf3e6ea-threeItemBundle ._6d0994faecf3e6ea-nameplatePreview {
background-color: var(--background-base-low);
border-radius: var(--radius-sm);
bottom: 14%;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.15),
0 1px 3px rgba(0, 0, 0, 0.1);
position: absolute;
width: 96%;
}
.theme-dark ._6d0994faecf3e6ea-avatar {
background: #0c0e0e;
}
.theme-light ._6d0994faecf3e6ea-avatar {
background: #a8a9aa;
}
.a84142355d81b3aa-profileEffectContainer {
border-radius: var(--radius-sm);
height: 296px;
margin: 16px auto 0;
overflow: hidden;
position: relative;
width: 200px;
}
.a84142355d81b3aa-profileEffectBackground {
position: absolute;
width: 100%;
}
.a84142355d81b3aa-nameplateContainer {
margin: var(--space-40) auto var(--space-48);
position: relative;
width: 324px;
}
.a84142355d81b3aa-nameplate {
width: 100%;
}
.a84142355d81b3aa-giftMainAnimationWrapper {
align-items: center;
display: flex;
justify-content: center;
}
.a84142355d81b3aa-avatar {
margin-top: 24px;
}
.a84142355d81b3aa-bundlePreviewWrapper {
margin: 0 auto;
width: 224px;
}
.a84142355d81b3aa-slayerStorefrontReviewImageWrapper {
display: flex;
justify-content: center;
margin-bottom: 8px;
width: 100%;
}
.a84142355d81b3aa-slayerStorefrontReviewImage {
max-width: 180px;
width: 100%;
}
._320c63b08edf1cb5-externalProductWrapper {
align-items: center;
display: flex;
height: 252px;
justify-content: center;
object-fit: contain;
width: 100%;
}
._320c63b08edf1cb5-orbProfileBadgeAsset {
height: 120px;
}
._0b5eae4a8290d23d-profileEffectContainer {
height: 52px;
position: relative;
width: 42px;
}
._0b5eae4a8290d23d-profileEffect,
._0b5eae4a8290d23d-profileEffectBackground {
border-radius: var(--radius-xs);
height: 100%;
position: absolute;
width: 100%;
}
._0b5eae4a8290d23d-profileEffect {
object-fit: cover;
object-position: top;
}
._0b5eae4a8290d23d-avatarDecoration,
._0b5eae4a8290d23d-nameplateContainer {
height: 42px;
width: 42px;
}
._0b5eae4a8290d23d-nameplateContainer {
background-color: var(--modal-background);
border-radius: var(--radius-xs);
overflow: hidden;
position: relative;
}
._0b5eae4a8290d23d-externalProductAsset {
height: 42px;
}
._0b5eae4a8290d23d-bundleMiniPreview {
align-items: center;
display: flex;
height: 52px;
justify-content: center;
position: relative;
width: 52px;
}
._0b5eae4a8290d23d-bundleMiniProfileEffectContainer {
height: 44px;
inset-inline-start: 6px;
position: absolute;
top: 2px;
transform: rotate(-8deg);
width: 36px;
}
._0b5eae4a8290d23d-bundleMiniProfileEffectContainer ._0b5eae4a8290d23d-profileEffectContainer {
height: 100%;
width: 100%;
}
._0b5eae4a8290d23d-bundleMiniAvatarDecorationContainer {
height: 26px;
inset-inline-end: 0;
position: absolute;
top: 5px;
transform: rotate(8deg);
width: 26px;
}
._0b5eae4a8290d23d-bundleMiniAvatarDecorationContainer ._0b5eae4a8290d23d-avatarDecoration {
height: 100%;
width: 100%;
}
._0b5eae4a8290d23d-bundleMiniNameplateContainer {
border-radius: var(--radius-xs);
bottom: 10px;
height: 12px;
inset-inline-start: 0;
overflow: hidden;
position: absolute;
width: 100%;
}
._0b5eae4a8290d23d-bundleMiniNameplateContainer ._0b5eae4a8290d23d-nameplateContainer {
height: 100%;
width: 100%;
}
._6dec98561fbf5c03-applicationIcon {
border-radius: 6px;
}
._42d0dea312b2a471-container {
align-items: center;
display: flex;
gap: 8px;
margin-bottom: 8px;
}
._257663d4c4e80a6b-invoiceTable {
margin-bottom: 16px;
}
._257663d4c4e80a6b-invoiceRow {
align-items: center;
display: flex;
flex-direction: row;
font-size: 16px;
font-weight: var(--font-weight-medium);
gap: 10px;
line-height: 20px;
}
._257663d4c4e80a6b-invoiceRow:not(:last-child) {
margin-bottom: 8px;
}
._257663d4c4e80a6b-invoiceTagColumn {
flex: 1;
}
._257663d4c4e80a6b-invoiceDescriptionColumn {
flex: 5;
}
._257663d4c4e80a6b-invoiceRegularText {
color: var(--text-strong);
}
._257663d4c4e80a6b-invoiceDiscountText {
color: var(--text-feedback-positive);
}
._257663d4c4e80a6b-invoiceDiscountTag {
background-color: var(--green-360);
border-radius: 12px;
display: inline-block;
padding: 2px 6px;
position: relative;
text-align: center;
}
._257663d4c4e80a6b-totalRow {
font-weight: 700;
}
._257663d4c4e80a6b-slayerStorefrontProductPreview {
box-sizing: border-box;
height: 48px;
width: 48px;
}
._257663d4c4e80a6b-rentalDescription {
color: var(--text-muted);
display: block;
margin-top: 4px;
}
.b4496190fad054cc-stepBody {
padding-top: var(--space-8);
}
.b4496190fad054cc-invoiceSpinner {
height: 23px;
}
.b4496190fad054cc-errorBlock {
margin: 5px 15px 15px;
position: relative;
}
.b4496190fad054cc-fineprint {
margin-bottom: 0;
margin-top: 16px;
}
.b4496190fad054cc-skuHeading {
display: flex;
gap: 25px;
margin-bottom: 20px;
}
.b4496190fad054cc-skuHeadingText {
align-self: center;
}
.b4496190fad054cc-socialLayerGameItemDisclaimer {
margin-top: 16px;
}
.e125f131accda830-back {
min-width: auto;
padding: 2px 4px;
width: auto;
-webkit-margin-end: auto;
margin-inline-end: auto;
}
.e125f131accda830-modalFooter {
padding-top: var(--space-24) !important;
}
._4485d15a92eb534f-shopPageContainer {
margin-top: 80px;
min-height: 300px;
}
._4485d15a92eb534f-giftModalContainer,
._4485d15a92eb534f-shopPageContainer {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
}
._4485d15a92eb534f-giftModalContainer {
background-color: var(--background-base-low);
padding: var(--space-24);
}
._4485d15a92eb534f-heading1 {
margin-bottom: 24px;
margin-top: 24px;
}
._4485d15a92eb534f-description {
text-align: center;
}
._4485d15a92eb534f-reload {
margin-top: 24px;
}
._69c6ca6ee136d546-customConfetti {
inset-inline-end: -75px;
pointer-events: none;
top: -120px;
}
._57a8750a60d28276-headerContainerGift {
align-items: center;
background-image: linear-gradient(var(--modal-background), var(--modal-background));
background-size: 100% calc(100% - 20px);
border-radius: var(--radius-md);
display: flex;
justify-content: space-between;
padding: 8px 16px;
}
._57a8750a60d28276-closeButtonGift {
-webkit-margin-start: auto;
margin-inline-start: auto;
}
.cd2ff7fa467efa57-blurb {
color: var(--text-default);
margin-top: 10px;
}
.cd2ff7fa467efa57-blurb,
.cd2ff7fa467efa57-giftSentMessage {
font-size: 16px;
line-height: 1.44;
max-width: 360px;
text-align: center;
}
.cd2ff7fa467efa57-giftSentMessage {
color: var(--text-strong);
margin-bottom: 8px;
margin-top: 16px;
}
.cd2ff7fa467efa57-giftRecipientTag {
color: var(--text-default);
font-size: 13px;
}
.cd2ff7fa467efa57-giftRecipientContainer {
align-items: flex-start;
background-color: var(--background-mod-muted);
border-color: var(--border-subtle);
border-radius: var(--radius-sm);
border-style: solid;
border-width: 1px;
display: flex;
gap: 12px;
margin-top: 16px;
padding: var(--space-12);
}
.cd2ff7fa467efa57-giftRecipientTextContainer {
display: flex;
flex-direction: column;
gap: 2px;
}
.cd2ff7fa467efa57-divider {
background-color: var(--border-subtle);
height: 1px;
margin: 20px 0;
width: 100%;
}
.cd2ff7fa467efa57-subtext {
color: var(--channels-default);
font-size: 12px;
line-height: 14px;
margin-top: 10px;
}
.cd2ff7fa467efa57-subtextError {
color: var(--text-feedback-critical) !important;
}
.cd2ff7fa467efa57-header {
margin-top: 20px;
}
.cd2ff7fa467efa57-headerCustomGifting {
margin-top: 24px;
}
.cd2ff7fa467efa57-giftRecipientSection {
margin-top: 40px;
width: 100%;
}
.cd2ff7fa467efa57-giftRecipient {
display: flex;
gap: var(--space-8);
width: 100%;
}
.cd2ff7fa467efa57-giftRecipientButton {
align-self: flex-end;
margin-bottom: 2px;
}
.cd2ff7fa467efa57-giftRecipientInputWrapper {
width: 100%;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
.cd2ff7fa467efa57-giftRecipientInputError {
border-color: var(--text-feedback-critical) !important;
}
.cd2ff7fa467efa57-giftRecipientRowAvatar {
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
.cd2ff7fa467efa57-sendToRecipientButton {
-webkit-margin-start: 8px;
height: 42px;
margin-inline-start: 8px;
}
.cd2ff7fa467efa57-giftBox {
position: absolute;
top: -131px;
width: 260px;
}
.cd2ff7fa467efa57-confirmation {
align-items: center;
border-radius: 4px;
display: flex;
flex-direction: column;
padding: 0 16px 24px;
}
.cd2ff7fa467efa57-seasonalConfirmationPadding {
padding: 0 16px;
}
.cd2ff7fa467efa57-giftCodeSection {
flex-direction: column;
}
.d28e107656edce18-avatar {
align-items: center;
display: flex;
inset-inline-start: 16px;
justify-content: center;
position: absolute;
top: 61px;
z-index: 1;
}
.d28e107656edce18-overlay:after {
background-color: var(--opacity-black-40);
border-radius: var(--radius-round);
content: "";
height: 100%;
inset-inline-end: 0;
top: 0;
width: 100%;
z-index: 0;
}
.d28e107656edce18-overlay:after,
.d28e107656edce18-overlayIcon {
opacity: 0;
position: absolute;
transition: opacity 0.2s ease;
}
.d28e107656edce18-clickable.d28e107656edce18-avatar {
cursor: pointer;
}
.d28e107656edce18-clickable:focus-within .d28e107656edce18-overlay:after,
.d28e107656edce18-clickable:focus-within .d28e107656edce18-overlayIcon,
.d28e107656edce18-clickable:hover .d28e107656edce18-overlay:after,
.d28e107656edce18-clickable:hover .d28e107656edce18-overlayIcon {
opacity: 1;
}
.d28e107656edce18-menu {
margin-top: 30px;
}
.faf5767e403e54db-clickable {
align-items: center;
background-color: var(--opacity-black-40);
cursor: pointer;
display: flex;
gap: 4px;
height: 100%;
inset-inline-start: 0;
justify-content: center;
opacity: 0;
position: absolute;
top: 0;
transition: opacity 0.2s ease;
width: 100%;
}
.faf5767e403e54db-clickable:hover {
opacity: 1;
}
._2ee1bb9436e8a157-popover {
}
._2ee1bb9436e8a157-popoverGradientWrapper {
}
._2ee1bb9436e8a157-popoverContentWithGradient {
}
._2ee1bb9436e8a157-closeButton {
}
._2ee1bb9436e8a157-header {
gap: 2px;
margin-bottom: 0;
margin-top: var(--space-20);
}
._2ee1bb9436e8a157-headerWithBadge {
}
._2ee1bb9436e8a157-badgeContainer {
}
._2ee1bb9436e8a157-content {
}
._2ee1bb9436e8a157-footer {
}
._2ee1bb9436e8a157-footerText {
}
._2ee1bb9436e8a157-footerLink {
}
._2ee1bb9436e8a157-actionBar {
margin-top: var(--space-16);
}
._2ee1bb9436e8a157-actions {
}
._2ee1bb9436e8a157-actionsFullWidth {
}
._2ee1bb9436e8a157-multistepIndicator {
}
._2ee1bb9436e8a157-multistepActionLayout {
}
._2ee1bb9436e8a157-caretIcon {
}
._2ee1bb9436e8a157-graphic {
margin-bottom: calc(var(--space-6) * -1);
margin-top: 0;
}
._2ee1bb9436e8a157-graphic--sm {
}
._2ee1bb9436e8a157-graphic--md {
}
._2ee1bb9436e8a157-graphic--lg {
}
._2ee1bb9436e8a157-graphic--video {
}
._2ee1bb9436e8a157-title {
color: var(--text-strong);
font-family: var(--font-display-marketing-header);
font-size: 21px;
font-style: italic;
font-weight: 900;
line-height: 20px;
text-align: center;
text-transform: uppercase;
word-wrap: break-word;
width: 100%;
}
._2ee1bb9436e8a157-headerBody {
width: 90%;
}
._2ee1bb9436e8a157-caretHoverable {
pointer-events: auto;
}
._7bebc56e6162e60c-tooltipContainer {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
padding: 16px 8px 4px;
}
._7bebc56e6162e60c-tooltipWordmarkContainer {
margin-top: 8px;
}
.cd30d96c915f2d40-tooltipDescription {
margin-top: var(--space-4);
}
.cd30d96c915f2d40-tooltipWordmark {
color: var(--text-muted);
}
.d4ff1125a84b07c3-tooltipWordmark {
color: var(--text-muted);
margin-bottom: 4px;
}
.d4ff1125a84b07c3-orbBadgeAsset {
width: 64px;
}
.d4ff1125a84b07c3-orbHeaderWithSpacing {
margin-bottom: 12px;
}
.d4ff1125a84b07c3-orbSubtext {
color: var(--text-muted);
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 16px;
margin-bottom: 4px;
margin-top: 10px;
}
._8061a5f9dbf6d829-container {
align-items: center;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
gap: 2px;
margin: 1px 0;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
._8061a5f9dbf6d829-container:empty {
visibility: hidden;
}
._8061a5f9dbf6d829-badge {
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
display: block;
filter: saturate(var(--saturation-factor, 1));
height: 20px;
object-fit: cover;
overflow: hidden;
pointer-events: none;
width: 20px;
}
._8061a5f9dbf6d829-badge:active {
opacity: 0.8;
}
._8061a5f9dbf6d829-badge:before {
background-color: var(--user-profile-border);
border-radius: 50%;
content: "";
display: block;
height: 100%;
width: 100%;
}
._63ed30c16c7151f2-container {
--custom-nickname-line-height: 24px;
--custom-nickname-icon-size: 16px;
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
}
.user-profile-modal ._63ed30c16c7151f2-container,
.user-profile-modal-v2 ._63ed30c16c7151f2-container {
--custom-nickname-line-height: 30px;
--custom-nickname-icon-size: 18px;
}
._63ed30c16c7151f2-container._63ed30c16c7151f2-bot {
display: flex;
flex-direction: column;
gap: 8px;
}
._63ed30c16c7151f2-clickableUsername {
cursor: pointer;
}
._63ed30c16c7151f2-clickableUsername:focus-visible ._63ed30c16c7151f2-nickname,
._63ed30c16c7151f2-clickableUsername:focus-visible ._63ed30c16c7151f2-userTagUsername,
._63ed30c16c7151f2-clickableUsername:hover ._63ed30c16c7151f2-nickname,
._63ed30c16c7151f2-clickableUsername:hover ._63ed30c16c7151f2-userTagUsername {
text-decoration: underline;
}
._63ed30c16c7151f2-nickname {
overflow: hidden;
}
._63ed30c16c7151f2-nickname,
._63ed30c16c7151f2-nicknameWithDisplayNameStyles {
max-height: calc(var(--custom-nickname-line-height) * 3);
word-break: break-word;
}
._63ed30c16c7151f2-nicknameIcons {
align-self: flex-start;
display: flex;
gap: 2px;
padding-top: calc((var(--custom-nickname-line-height) - var(--custom-nickname-icon-size)) / 2);
}
._63ed30c16c7151f2-usernameRow {
gap: 8px;
}
._63ed30c16c7151f2-tags,
._63ed30c16c7151f2-usernameRow {
align-items: center;
display: flex;
flex-direction: row;
}
._63ed30c16c7151f2-tags {
-moz-column-gap: 9.33px;
column-gap: 9.33px;
flex-wrap: wrap;
}
.user-profile-popout ._63ed30c16c7151f2-tags,
.user-profile-sidebar ._63ed30c16c7151f2-tags {
row-gap: 2px;
}
.user-profile-modal-v2 ._63ed30c16c7151f2-tags {
row-gap: 4px;
}
.user-profile-modal ._63ed30c16c7151f2-tags {
row-gap: 8px;
}
._63ed30c16c7151f2-tags._63ed30c16c7151f2-bot,
._63ed30c16c7151f2-tags._63ed30c16c7151f2-pronouns {
-moz-column-gap: 6px;
column-gap: 6px;
}
._63ed30c16c7151f2-userTag {
font-family: var(--text-strong);
font-size: 14px;
font-weight: var(--font-weight-normal);
line-height: 18px;
}
._63ed30c16c7151f2-pronounsTooltip {
max-width: 100%;
}
._63ed30c16c7151f2-pronounsText {
-webkit-margin-end: 2px;
margin-inline-end: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._63ed30c16c7151f2-userTagUsername {
display: inline;
text-overflow: unset;
white-space: normal;
word-break: break-all;
}
._63ed30c16c7151f2-userTagDiscriminator,
._63ed30c16c7151f2-userTagUsername {
color: var(--text-strong);
vertical-align: top;
}
._63ed30c16c7151f2-dotSpacer {
background-color: var(--text-default);
border-radius: 50%;
height: 4px;
width: 4px;
}
._63ed30c16c7151f2-guildTagContainer {
border: 1px solid var(--user-profile-border);
border-radius: var(--radius-sm);
box-sizing: border-box;
height: 20px;
}
._63ed30c16c7151f2-guildTagContainer:hover {
background-color: var(--user-profile-background-hover);
}
._63ed30c16c7151f2-guildTag {
background: unset;
margin: 0 auto;
}
.f5f93a5c4078d63c-viewFullBio {
margin-top: 8px;
}
.f5f93a5c4078d63c-descriptionClamp {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.f5f93a5c4078d63c-maxBioHeight {
max-height: 55px;
}
._6738d5a45a6c52b4-baseAvatar {
display: inline-block;
vertical-align: top;
}
._6738d5a45a6c52b4-largeAvatar {
line-height: 24px;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
._6738d5a45a6c52b4-miniAvatar {
line-height: 18px;
-webkit-margin-end: 4px;
margin-inline-end: 4px;
margin-top: 1px;
}
._5be3ef42f92174b2-header {
flex-shrink: 0;
min-height: calc(var(--custom-user-profile-banner-height) + 35px);
position: relative;
}
.custom-user-profile-theme ._5be3ef42f92174b2-header {
min-height: calc(var(--custom-user-profile-banner-height) + 31px);
}
._5be3ef42f92174b2-headerTag {
border-radius: var(--radius-xs);
bottom: 8px;
inset-inline-end: 16px;
position: absolute;
}
._5be3ef42f92174b2-body {
display: flex;
flex-direction: column;
gap: 12px;
padding: 4px 16px 8px;
}
._5be3ef42f92174b2-card {
padding: 12px;
}
._5be3ef42f92174b2-footer {
display: flex;
flex-direction: column;
padding: 0 16px 12px;
}
._5be3ef42f92174b2-footer:empty {
padding: 0;
visibility: hidden;
}
._5be3ef42f92174b2-backdrop {
background: var(--background-scrim);
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
z-index: var(--custom-user-profile-hoist-z-index);
}
._5be3ef42f92174b2-toast {
top: calc((var(--custom-user-profile-banner-height) - 56px) / 2);
z-index: var(--custom-user-profile-toast-z-index);
}
.custom-user-profile-theme .a99829deaf601327-container {
border: none;
}
.theme-light.custom-user-profile-theme .a99829deaf601327-container {
background: var(--opacity-black-8);
}
.theme-dark.custom-user-profile-theme .a99829deaf601327-container {
background: var(--opacity-white-12);
}
.a99829deaf601327-editor {
--channel-text-area-placeholder: var(--text-muted);
font-size: 14px;
}
.a99829deaf601327-ctaRow {
display: flex;
flex-direction: row;
gap: 10px;
}
.a99829deaf601327-menuItemLabel {
display: flex;
gap: 6px;
}
.a99829deaf601327-container {
border-radius: var(--radius-sm);
}
.a99829deaf601327-upsell {
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.a99829deaf601327-buttons {
display: flex;
flex-direction: row;
-webkit-padding-before: var(--space-6);
align-items: flex-start;
align-self: flex-start;
padding-block-start: var(--space-6);
}
._5a2c624eb18affaa-container {
box-sizing: content-box;
position: relative;
}
._5a2c624eb18affaa-header {
min-height: calc(var(--custom-user-profile-banner-height) + 45px);
z-index: 2;
}
.custom-user-profile-theme ._5a2c624eb18affaa-header {
min-height: calc(var(--custom-user-profile-banner-height) + 35px);
}
._50f142ddcd129c8c-previewContainer {
border: 1px solid var(--border-normal);
border-radius: var(--radius-md);
display: flex;
flex-direction: column;
overflow: hidden;
}
._50f142ddcd129c8c-giftInfoContainer {
align-items: center;
display: flex;
padding: 12px 16px;
}
._50f142ddcd129c8c-previewContainerSelected {
background-color: var(--opacity-blurple-8);
border-color: var(--checkbox-border-default);
}
._50f142ddcd129c8c-previewContainerError {
border-color: var(--background-feedback-critical);
}
._50f142ddcd129c8c-previewTextContainer {
display: flex;
flex: 1;
flex-direction: column;
gap: 4px;
-webkit-padding-start: 10px;
padding-inline-start: 10px;
}
._50f142ddcd129c8c-previewTitleContainer {
align-items: center;
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
._50f142ddcd129c8c-previewTitle {
margin-bottom: 0;
}
._50f142ddcd129c8c-recipientError {
background-color: var(--background-base-lowest);
border-top: 1px solid var(--border-normal);
padding: 8px 12px;
}
._50f142ddcd129c8c-previewLink {
cursor: pointer;
}
._50f142ddcd129c8c-previewLink:hover {
text-decoration: underline;
-webkit-text-decoration-color: var(--text-link);
text-decoration-color: var(--text-link);
}
.bf1b4a30ef37af9c-stepBody {
display: flex;
flex-direction: row;
padding-top: 12px;
}
.bf1b4a30ef37af9c-bodyColumnMiddle {
-webkit-margin-end: 30px;
margin-inline-end: 30px;
}
.bf1b4a30ef37af9c-bodyColumnLeft {
margin-inline: 24px 60px;
}
.bf1b4a30ef37af9c-bodyColumnRight {
-webkit-margin-end: 10px;
margin-inline-end: 10px;
}
.bf1b4a30ef37af9c-stepBody > * {
width: 50%;
}
.bf1b4a30ef37af9c-sendTo {
margin-inline-end: 16px;
}
.bf1b4a30ef37af9c-customGiftMessageWrapper,
.bf1b4a30ef37af9c-sendTo {
margin-top: 24px;
-webkit-margin-end: 16px;
}
.bf1b4a30ef37af9c-customGiftMessageWrapper {
margin-bottom: 24px;
margin-inline-end: 16px;
}
.bf1b4a30ef37af9c-customGiftMessage {
background-color: var(--background-base-lowest);
}
.bf1b4a30ef37af9c-giftPreview {
margin-bottom: 24px;
-webkit-margin-end: 16px;
margin-inline-end: 16px;
}
.bf1b4a30ef37af9c-wishlistGiftPreview {
margin-bottom: 12px;
-webkit-margin-end: 16px;
margin-inline-end: 16px;
}
.bf1b4a30ef37af9c-wishlistGiftPreviewHeader {
margin-bottom: 0;
}
.bf1b4a30ef37af9c-wishlistGiftPreviewFooter {
margin-bottom: 4px;
}
.bf1b4a30ef37af9c-selectGiftTitle {
margin-bottom: 16px;
margin-top: 24px;
}
.bf1b4a30ef37af9c-recommendedGiftPreview {
cursor: pointer;
margin-bottom: 12px;
}
.bf1b4a30ef37af9c-navigateToShopButton {
align-items: center;
background: var(--background-base-low);
border: 1px solid var(--interactive-muted);
border-radius: var(--radius-xs);
cursor: pointer;
display: flex;
gap: 10px;
justify-content: space-between;
padding: 12px 16px;
}
.bf1b4a30ef37af9c-navigateToShopBody {
align-items: center;
display: flex;
flex-direction: row;
gap: 10px;
}
.bf1b4a30ef37af9c-navigateToShopTextWrapper {
display: flex;
flex-direction: column;
}
.bf1b4a30ef37af9c-shopIcon {
align-items: center;
background-color: var(--interactive-background-hover);
border-radius: var(--radius-round);
display: flex;
flex-shrink: 0;
height: 42px;
justify-content: center;
width: 42px;
}
._9abb90559827002a-headerContainer {
background-color: var(--background-base-low);
height: 146px;
position: relative;
width: calc(100% + 2px);
-webkit-margin-start: -1px;
border-start-end-radius: 4px;
border-start-start-radius: 4px;
box-sizing: border-box;
margin-inline-start: -1px;
margin-top: -2px;
min-height: 146px;
}
._9abb90559827002a-closeButton {
inset-inline-end: 16px;
position: absolute;
top: 16px;
}
._9abb90559827002a-headerImage,
._9abb90559827002a-headerImageContainer {
height: 100%;
width: 100%;
}
._9abb90559827002a-headerImage {
border-start-end-radius: var(--radius-md);
border-start-start-radius: var(--radius-md);
object-fit: cover;
}
._9abb90559827002a-orbCheckoutHeaderVideo {
object-fit: cover;
object-position: left top;
}
div._34eac30af6a687c5-modalOverrideBody {
background-color: transparent;
border-radius: 8px;
overflow: visible;
padding: 0;
}
._34eac30af6a687c5-modalOverrideBody::-webkit-scrollbar {
height: 0;
width: 0;
}
._34eac30af6a687c5-modalOverrideSliderBody {
padding: 0;
width: 440px;
}
._34eac30af6a687c5-confettiCanvas {
height: 100%;
position: absolute;
width: 100%;
}
._34eac30af6a687c5-customConfetti {
opacity: 1;
pointer-events: none;
transition: opacity 0.5s ease-in-out;
}
._34eac30af6a687c5-customConfetti._34eac30af6a687c5-hidden {
opacity: 0;
}
._34eac30af6a687c5-modalOverrideBody {
padding: 0;
width: calc(100% + 2px);
-webkit-margin-start: -1px;
margin-inline-start: -1px;
margin-top: -2px;
}
._9baa5181130937c5-confirmation {
align-items: center;
align-self: stretch;
display: flex;
flex-direction: column;
padding-bottom: 16px;
text-align: center;
width: 394px;
}
._9baa5181130937c5-confirmationHeader {
margin-bottom: 8px;
}
._9baa5181130937c5-confirmationDescription {
margin-bottom: 64px;
}
._9baa5181130937c5-skuImage {
aspect-ratio: 1;
margin-bottom: 24px;
width: 150px;
}
.eb2ea2a5783fab20-headerContainerGift {
align-items: center;
background-color: var(--background-base-low);
background-size: 100% calc(100% - 20px);
display: flex;
justify-content: space-between;
padding: 16px 24px;
}
.eb2ea2a5783fab20-closeButtonGift {
-webkit-margin-start: auto;
margin-inline-start: auto;
-webkit-margin-end: -8px;
margin-inline-end: -8px;
}
._7b8d0ed55756837a-stepBody {
display: flex;
flex-direction: row;
gap: var(--size-32);
margin: var(--size-32) var(--size-16);
min-height: 400px;
}
._7b8d0ed55756837a-bodyColumnLeft {
align-items: center;
}
._7b8d0ed55756837a-bodyColumnLeft,
._7b8d0ed55756837a-bodyColumnRight {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--size-16);
justify-content: center;
}
._7b8d0ed55756837a-bodyColumnRight {
min-width: 0;
}
._7b8d0ed55756837a-skuCardImage {
aspect-ratio: 1;
max-width: 280px;
width: 100%;
}
._7b8d0ed55756837a-customGiftMessageWrapper {
margin: 0;
}
._7b8d0ed55756837a-customGiftMessage {
background-color: var(--background-base-lower);
border-radius: var(--size-8);
padding: var(--size-12);
}
._7b8d0ed55756837a-giftEffectsContainer,
._7b8d0ed55756837a-giftPreviewContainer {
display: flex;
gap: var(--size-8);
}
._7b8d0ed55756837a-giftPreviewContainer {
flex-direction: column;
}
._7b8d0ed55756837a-giftPreviewTitle {
margin: 0;
}
._7b8d0ed55756837a-giftPreviewContent {
align-items: center;
background-color: color-mix(in srgb, var(--background-brand) 10%, transparent);
border: 1px solid var(--background-brand);
border-radius: var(--radius-md);
display: flex;
gap: 16px;
padding: 12px 16px;
}
._7b8d0ed55756837a-giftPreviewImageContainer {
flex-shrink: 0;
}
._7b8d0ed55756837a-giftPreviewCardContainer {
aspect-ratio: 1;
width: 48px;
}
._7b8d0ed55756837a-giftPreviewImage {
max-height: 100%;
max-width: 100%;
object-fit: contain;
}
._7b8d0ed55756837a-giftPreviewTextContainer {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
}
._7b8d0ed55756837a-guildNameContainer {
align-items: center;
display: flex;
gap: 6px;
}
._7b8d0ed55756837a-recipientPickerSelectWrapper {
background-color: var(--background-base-lower);
}
._7b8d0ed55756837a-footer {
background-color: var(--background-base-low);
}
._7b8d0ed55756837a-viewItemButton {
max-width: 100%;
width: 100%;
}
.e3bd55d6b00f17df-checkoutModalFooter {
align-items: center;
}
._852008bcf94f9917-orbIconSVG {
height: 18px;
}
.full-motion ._852008bcf94f9917-loading {
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-name: _852008bcf94f9917-spin;
animation-timing-function: linear;
}
@keyframes _852008bcf94f9917-spin {
0% {
transform: rotate(0deg);
}
to {
transform: rotate(1turn);
}
}
._8373460925eae9cd-stepBody {
display: flex;
flex-direction: column;
gap: var(--space-8);
padding-top: var(--space-16);
}
._8373460925eae9cd-warningContainer {
align-items: center;
background-color: var(--background-feedback-warning);
border-radius: var(--radius-sm);
display: flex;
flex-direction: row;
gap: var(--space-10);
padding: var(--space-8);
}
._8373460925eae9cd-paymentSourceWrapper {
margin: 16px 0;
}
._8373460925eae9cd-paymentSourceItem {
align-items: center;
cursor: default;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 14px 16px;
}
._8373460925eae9cd-purchaseDetailsSpinner {
height: 20px;
}
._8373460925eae9cd-orbAmountTag {
align-items: center;
display: flex;
flex-direction: row;
gap: 4px;
}
._8373460925eae9cd-displayFlex {
display: flex;
}
.a3d32e1830eb460c-stepBody {
display: flex;
flex-direction: row;
padding-top: 12px;
}
.a3d32e1830eb460c-stepBody > * {
width: 50%;
}
.bb544939949865b0-stepBody {
display: flex;
flex-direction: column;
gap: var(--space-8);
padding-top: var(--space-16);
}
._0f18af7a8ae229e2-modal {
align-self: stretch;
box-sizing: border-box;
flex-direction: column;
gap: 24px;
padding: 24px 16px;
width: 440px;
}
._0f18af7a8ae229e2-heading,
._0f18af7a8ae229e2-modal {
align-items: center;
display: flex;
}
._0f18af7a8ae229e2-heading {
gap: 8px;
justify-content: space-between;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
._0f18af7a8ae229e2-divider {
background: #fff;
height: 1px;
opacity: 0.1;
width: 408px;
}
._0f18af7a8ae229e2-image {
height: auto;
margin-inline: auto;
margin-top: -104px;
width: 277px;
}
._0f18af7a8ae229e2-body {
display: flex;
flex-direction: column;
gap: 24px;
}
._0f18af7a8ae229e2-header {
align-items: center;
align-self: stretch;
padding: 0 32px;
text-align: center;
}
._0f18af7a8ae229e2-header,
._0f18af7a8ae229e2-selectContainer {
display: flex;
flex-direction: column;
gap: 8px;
}
._0f18af7a8ae229e2-emojiSelect {
background-color: var(--input-background-default);
border: 1px solid var(--input-border-default);
border-radius: var(--radius-xs);
padding: var(--size-12) var(--size-8);
}
._0f18af7a8ae229e2-emojiContent {
flex: 1;
justify-content: space-between;
}
._0f18af7a8ae229e2-emojiContent,
._0f18af7a8ae229e2-selectedEmoji {
align-items: center;
display: flex;
gap: 16px;
}
._0f18af7a8ae229e2-emojiIcon {
height: 28px;
width: 28px;
}
._0f18af7a8ae229e2-chevron,
._0f18af7a8ae229e2-emojiIcon {
color: var(--interactive-text-default);
}
._0f18af7a8ae229e2-chevron {
height: 24px;
width: 24px;
}
._0f18af7a8ae229e2-footer {
align-items: center;
background: var(--background-base-lower);
border-end-end-radius: inherit;
border-end-start-radius: inherit;
box-sizing: border-box;
display: flex;
height: 72px;
justify-content: space-between;
padding: 16px;
width: 100%;
}
._0f18af7a8ae229e2-anomaly {
height: 440px;
width: 440px;
}
._0f18af7a8ae229e2-anomaly,
._0f18af7a8ae229e2-error {
align-content: center;
align-items: center;
display: flex;
flex-direction: column;
}
._0f18af7a8ae229e2-error {
gap: 10px;
margin-top: 100px;
}
._0f18af7a8ae229e2-spinner {
margin-top: 200px;
}
._0f18af7a8ae229e2-buttonCopy {
align-items: center;
display: flex;
gap: 4px;
}
._0f18af7a8ae229e2-tooltip {
text-align: center;
}
._0f18af7a8ae229e2-footerRight {
display: flex;
gap: 8px;
}
@keyframes _0f18af7a8ae229e2-colorCycle {
0%,
60%,
to {
color: var(--custom-confetti-color-1);
}
70% {
color: var(--custom-confetti-color-2);
}
80% {
color: var(--custom-confetti-color-3);
}
90% {
color: var(--custom-confetti-color-4);
}
}
._0f18af7a8ae229e2-remaining {
align-items: center;
animation: _0f18af7a8ae229e2-colorCycle 5s infinite;
display: flex;
gap: 6px;
justify-content: center;
padding: 8px 13px;
}
.full-motion ._0f18af7a8ae229e2-shootingStar {
animation: _0f18af7a8ae229e2-wiggle 5s ease-in-out infinite;
}
.theme-dark ._0f18af7a8ae229e2-remaining {
--custom-confetti-color-1: var(--white);
--custom-confetti-color-2: #fed648;
--custom-confetti-color-3: #ff73fa;
--custom-confetti-color-4: #86dcc5;
}
.theme-light ._0f18af7a8ae229e2-remaining {
--custom-confetti-color-1: #313338;
--custom-confetti-color-2: #db7628;
--custom-confetti-color-3: #b473f5;
--custom-confetti-color-4: #248da1;
}
._0f18af7a8ae229e2-shootingStar {
height: 18px;
width: 18px;
}
@keyframes _0f18af7a8ae229e2-wiggle {
0%,
60%,
to {
transform: rotate(0);
}
70% {
transform: rotate(8deg);
}
75% {
transform: rotate(8deg);
}
80% {
transform: rotate(-6deg);
}
85% {
transform: rotate(0deg);
}
90% {
transform: rotate(8deg);
}
95% {
transform: rotate(-6deg);
}
}
.f5401db153d99696-bar {
background: linear-gradient(90deg, rgba(229, 81, 235, 0.2), rgba(78, 58, 214, 0.2));
border-radius: inherit;
justify-content: space-between;
}
.f5401db153d99696-bar,
.f5401db153d99696-emojiSelectContainer {
display: flex;
flex-direction: row;
}
.f5401db153d99696-emojiSelectContainer {
align-items: center;
color: var(--text-default);
cursor: pointer;
flex-grow: 1;
gap: var(--space-8);
-webkit-padding-start: var(--space-20);
padding-inline-start: var(--space-20);
}
.f5401db153d99696-emojiSelectContainer:hover {
text-decoration: underline;
}
.f5401db153d99696-end {
align-items: center;
display: flex;
flex-direction: row;
-webkit-margin-end: var(--space-4);
margin-inline-end: var(--space-4);
}
.f5401db153d99696-separator {
background-color: var(--border-subtle);
height: 20px;
width: 1px;
}
.f5401db153d99696-emojiIconContainer {
display: flex;
padding: 0;
}
.ba21b46fa80506b4-clipContainer {
margin-top: 0;
overflow: hidden;
padding-top: 3px;
}
.ba21b46fa80506b4-container {
display: flex;
flex-direction: column;
}
.ba21b46fa80506b4-scheduledMessageBar {
align-items: center;
background: var(--background-base-lower);
background-color: unset;
border-bottom: none;
cursor: pointer;
}
.theme-dark.custom-theme-background .ba21b46fa80506b4-scheduledMessageBar {
background: var(--background-gradient-lowest, var(--background-base-lower));
}
.theme-light.custom-theme-background .ba21b46fa80506b4-scheduledMessageBar {
background: var(--background-gradient-lower, var(--background-base-lower));
}
.ba21b46fa80506b4-scheduledMessageBar {
box-shadow: 0 3px 0 var(--background-base-lower);
display: flex;
flex-direction: row;
}
.ba21b46fa80506b4-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-webkit-margin-start: var(--space-16);
margin-inline-start: var(--space-16);
}
.ba21b46fa80506b4-scheduledMessageBarLabel {
flex: 1 1 auto;
}
.ba21b46fa80506b4-actions {
align-items: center;
display: flex;
flex: 0 0 auto;
-webkit-margin-end: var(--space-4);
margin-inline-end: var(--space-4);
}
.e6e74fd4d1221f53-buttonContainer {
border-radius: 8px;
margin-top: unset;
transition-duration: 0.2s;
}
.e6e74fd4d1221f53-buttonContainer:hover {
background-color: var(--interactive-background-selected);
}
.e6e74fd4d1221f53-button {
align-items: center;
background: unset;
border: unset;
border-radius: 8px;
color: var(--interactive-text-default);
cursor: pointer;
display: flex;
height: auto;
justify-content: center;
min-height: var(--space-32);
min-width: var(--space-32);
width: unset;
}
.e6e74fd4d1221f53-button:active,
.e6e74fd4d1221f53-button:hover,
.e6e74fd4d1221f53-buttonActive {
color: var(--interactive-text-active);
}
.e6e74fd4d1221f53-channelAppLauncher {
align-content: flex-end;
align-items: center;
display: flex;
justify-content: center;
margin: 0;
padding: 0;
position: relative;
}
.e6e74fd4d1221f53-hiddenAppLauncherAnchor {
height: 0;
width: 0;
}
.e6e74fd4d1221f53-entrypointAnimation {
height: 44px;
width: 44px;
}
.e6e74fd4d1221f53-entrypointAnimation .e6e74fd4d1221f53-buttonContainer:hover {
background-color: transparent;
}
.e6e74fd4d1221f53-animationGlow {
bottom: -44px;
height: 132px;
inset-inline-start: -32px;
width: 108px;
}
.e6e74fd4d1221f53-animationTrinkets {
bottom: -24px;
height: 100px;
inset-inline-start: -24px;
width: 100px;
}
.e6e74fd4d1221f53-channelAppLauncherButtonPopoutIconContainer {
border-radius: 8px;
outline: 2px solid var(--brand-500);
overflow: hidden;
pointer-events: none;
position: absolute;
z-index: 1;
}
.full-motion .e6e74fd4d1221f53-channelAppLauncherButtonPopoutIcon {
animation: e6e74fd4d1221f53-channelAppLauncherButtonPopoutIconAnimation 3s;
animation-delay: 10ms;
transform: translateY(-100%);
}
@keyframes e6e74fd4d1221f53-channelAppLauncherButtonPopoutIconAnimation {
0% {
transform: translateY(-100%);
}
6% {
transform: translateY(0);
}
94% {
transform: translateY(0);
}
to {
transform: translateY(100%);
}
}
.e6e74fd4d1221f53-channelAppLauncherButtonPopoutIconShimmerContainer {
inset-inline-end: 0;
position: absolute;
top: 0;
}
.e6e74fd4d1221f53-channelAppLauncherButtonPopoutIconShimmer {
align-items: center;
display: flex;
justify-content: center;
margin-top: auto;
transform: translateX(-100%);
}
.full-motion .e6e74fd4d1221f53-channelAppLauncherButtonPopoutIconShimmer {
animation: e6e74fd4d1221f53-channelAppLauncherButtonPopoutIconShimmerAnimation 3s;
}
@keyframes e6e74fd4d1221f53-channelAppLauncherButtonPopoutIconShimmerAnimation {
0% {
transform: translateX(-100%);
}
10% {
transform: translateX(-100%);
}
22% {
transform: translateX(100%);
}
to {
transform: translateX(100%);
}
}
@keyframes _24af7f4d0326ba4f-pulseIcon {
0%,
to {
transform: scale(var(--custom-channel-text-area-button-hover-scale));
}
50% {
transform: none;
}
}
@keyframes _24af7f4d0326ba4f-pulseButton {
0%,
to {
opacity: 0.3;
}
50% {
opacity: 1;
}
}
@keyframes _24af7f4d0326ba4f-sparkle {
0% {
opacity: 0;
transform: rotate(-50deg) scale(0);
}
20% {
opacity: 1;
transform: rotate(0deg) scale(1);
}
40% {
opacity: 0;
transform: rotate(50deg) scale(0);
}
to {
opacity: 0;
transform: rotate(-50deg) scale(0);
}
}
._24af7f4d0326ba4f-button {
align-items: center;
color: var(--interactive-text-default);
cursor: pointer;
display: flex;
justify-content: center;
}
._24af7f4d0326ba4f-button:hover {
color: var(--interactive-text-hover);
}
._24af7f4d0326ba4f-button:active {
color: var(--interactive-text-active);
}
._24af7f4d0326ba4f-button._24af7f4d0326ba4f-disabled {
cursor: not-allowed;
opacity: 0.5;
}
._24af7f4d0326ba4f-button:not(._24af7f4d0326ba4f-noHover) {
border-radius: 8px;
transition-duration: 0.2s;
}
._24af7f4d0326ba4f-button:not(._24af7f4d0326ba4f-noHover):hover {
background-color: var(--interactive-background-selected);
}
._24af7f4d0326ba4f-iconMask {
display: block;
height: 20px;
width: 20px;
}
._24af7f4d0326ba4f-buttonContent {
position: relative;
}
._24af7f4d0326ba4f-icon {
height: 20px;
width: 20px;
}
._24af7f4d0326ba4f-pulseIcon {
animation: _24af7f4d0326ba4f-pulseIcon 0.6s ease;
}
._24af7f4d0326ba4f-pulseButton ._24af7f4d0326ba4f-buttonWrapper {
animation: _24af7f4d0326ba4f-pulseButton 0.6s ease;
}
._24af7f4d0326ba4f-buttonWrapper svg {
display: block;
}
._24af7f4d0326ba4f-notificationDot {
background-color: var(--status-danger);
border-radius: 100%;
bottom: 0;
height: 7px;
inset-inline-end: 0;
transform: translateY(-5%);
width: 7px;
}
._24af7f4d0326ba4f-notificationDot,
._24af7f4d0326ba4f-sparkleContainer {
position: absolute;
}
._24af7f4d0326ba4f-sparkleStar {
color: var(--gold);
inset-inline-start: 20px;
top: -12px;
}
._24af7f4d0326ba4f-sparklePlus,
._24af7f4d0326ba4f-sparkleStar {
animation: _24af7f4d0326ba4f-sparkle 2.5s ease-in-out infinite;
position: relative;
}
._24af7f4d0326ba4f-sparklePlus {
animation-delay: 0.5s;
color: var(--brand-500);
inset-inline-start: -20px;
opacity: 0;
top: 16px;
}
._24af7f4d0326ba4f-active ._24af7f4d0326ba4f-buttonWrapper,
._24af7f4d0326ba4f-buttonWrapper:hover {
color: var(--interactive-text-active);
}
.c0c49a3e5c8626ac-container {
display: flex;
position: relative;
}
.c0c49a3e5c8626ac-container:before {
background: linear-gradient(180deg, rgba(88, 101, 242, 0), #5865f2);
border-radius: 8px;
content: "";
inset: 0;
opacity: 0;
pointer-events: none;
position: absolute;
transition: opacity 0.2s ease;
z-index: -1;
}
.c0c49a3e5c8626ac-containerHovered:before {
opacity: 1;
}
.c0c49a3e5c8626ac-iconContainer {
align-items: center;
display: flex;
height: 20px;
justify-content: center;
pointer-events: none;
position: relative;
width: 20px;
}
.c0c49a3e5c8626ac-giftBoxIcon {
bottom: -6px;
height: auto;
inset-inline-start: -6px;
position: absolute;
width: 32px;
}
.c0c49a3e5c8626ac-trinketsIcon {
position: relative;
z-index: 3;
}
.c0c49a3e5c8626ac-trinketsDecoration {
height: 140%;
inset-inline-start: -20%;
position: absolute;
top: -20%;
transform: scale(1.4);
width: 140%;
z-index: 4;
}
.c0c49a3e5c8626ac-trinketsGlow {
border-radius: 8px;
height: 150%;
inset-inline-start: -25%;
-webkit-mask: radial-gradient(circle at center, transparent 0, transparent 1%, #000 0);
mask: radial-gradient(circle at center, transparent 0, transparent 1%, #000 0);
position: absolute;
top: -25%;
transform: scale(1.1);
width: 150%;
z-index: 1;
}
.aa63abf63dbd9cce-button > .aa63abf63dbd9cce-disabled {
color: var(--interactive-muted);
cursor: not-allowed;
}
.aa63abf63dbd9cce-container {
align-items: center;
display: flex;
}
.aa63abf63dbd9cce-container,
.aa63abf63dbd9cce-separator {
-webkit-margin-start: 0;
margin-inline-start: 0;
}
.aa63abf63dbd9cce-separator {
align-self: center;
background-color: var(--border-muted);
height: var(--chat-markup-line-height);
width: 1px;
}
.aa63abf63dbd9cce-buttonContainer {
display: flex;
}
.aa63abf63dbd9cce-sendIcon {
height: 20px !important;
width: 20px !important;
}
.aa63abf63dbd9cce-button {
box-sizing: border-box;
margin-inline: 0;
min-height: var(--space-32);
min-width: var(--space-32);
padding: 4px;
}
.aa63abf63dbd9cce-buttonChild {
transition: color 0.25s ease-in-out;
}
.aa63abf63dbd9cce-activeButtonChild {
color: var(--text-brand);
}
.theme-dark .aa63abf63dbd9cce-button:focus .aa63abf63dbd9cce-activeButtonChild,
.theme-dark .aa63abf63dbd9cce-button:focus-within .aa63abf63dbd9cce-activeButtonChild,
.theme-dark .aa63abf63dbd9cce-button:hover .aa63abf63dbd9cce-activeButtonChild {
color: var(--brand-430);
}
.theme-dark .aa63abf63dbd9cce-button:active .aa63abf63dbd9cce-activeButtonChild {
color: var(--brand-500);
}
.theme-light .aa63abf63dbd9cce-activeInnerButton:focus,
.theme-light .aa63abf63dbd9cce-activeInnerButton:hover,
.theme-light .aa63abf63dbd9cce-buttonContainer:focus,
.theme-light .aa63abf63dbd9cce-buttonContainer:hover {
color: var(--brand-560);
}
.theme-light .aa63abf63dbd9cce-activeInnerButton:active,
.theme-light .aa63abf63dbd9cce-buttonContainer:active {
color: var(--brand-600);
}
.reduce-motion .aa63abf63dbd9cce-button {
transition: unset;
}
.aa63abf63dbd9cce-container:before {
display: none;
}
.ddf599b22c154d9c-container {
display: inline-flex;
padding-top: var(--space-8);
padding-inline: 19px;
padding-bottom: var(--space-16);
}
.ddf599b22c154d9c-container label[data-mana-component="checkbox"] {
align-items: center;
gap: var(--space-8);
margin: calc(var(--space-4) * -1);
padding: var(--space-4);
}
.ddf599b22c154d9c-container label[data-mana-component="checkbox"] > div:first-of-type {
height: 16px;
width: 16px;
}
.ddf599b22c154d9c-container label[data-mana-component="checkbox"] label > div {
font-size: 14px;
line-height: 1.25;
}
.density-compact .ddf599b22c154d9c-container {
padding-inline: 17px;
}
.density-cozy .ddf599b22c154d9c-container {
padding-inline: 21px;
}
.ddf599b22c154d9c-icon {
margin-bottom: -2px;
margin-top: -2px;
margin-inline: 0;
-webkit-margin-end: 2px;
height: 1em;
margin-inline-end: 2px;
width: 1em;
}
.ddf599b22c154d9c-icon,
.ddf599b22c154d9c-label {
display: inline;
}
.aa605f19898fe32e-upload {
background: var(--background-gradient-higher, var(--background-base-lower));
background-color: var(--background-surface-high);
border: 1px solid var(--border-normal);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-low);
display: inline-flex;
flex-direction: column;
margin: 0;
max-height: 200px;
max-width: 200px;
min-height: 200px;
min-width: 200px;
padding: 8px;
position: relative;
}
.aa605f19898fe32e-upload.aa605f19898fe32e-sizeClip {
background-color: var(--background-mod-subtle);
flex: 1;
max-height: 400px;
max-width: 400px;
min-width: 320px;
padding: 0;
}
.aa605f19898fe32e-uploadContainer {
display: flex;
flex-direction: column;
height: 100%;
position: relative;
}
.aa605f19898fe32e-uploadContainer:hover .aa605f19898fe32e-smallActionBar {
opacity: 1;
}
.aa605f19898fe32e-uploadContainer:focus-within .aa605f19898fe32e-smallActionBar {
opacity: 1;
}
.aa605f19898fe32e-actionBarContainer {
top: 0;
}
.aa605f19898fe32e-actionBar,
.aa605f19898fe32e-actionBarContainer {
inset-inline-end: 0;
position: absolute;
}
.aa605f19898fe32e-actionBar {
padding: 0;
transform: translate(25%, -25%);
z-index: 1;
}
.aa605f19898fe32e-smallActionBar {
opacity: 0;
}
.aa605f19898fe32e-miniPopover {
align-items: center;
height: 24px;
}
@keyframes b7854763c4a57c63-uploadIconAnimateInLeft {
0% {
opacity: 0.6;
transform: translateZ(0) rotate(0deg);
}
4.1667% {
opacity: 0.68;
transform: translate3d(0, -1px, 0) rotate(0deg);
}
30.8334% {
opacity: 1;
transform: translate3d(-48px, -10px, 0) rotate(-36deg);
}
58.3334% {
opacity: 1;
transform: translate3d(-41px, -3px, 0) rotate(-28deg);
}
75% {
opacity: 1;
transform: translate3d(-45px, -8px, 0) rotate(-32deg);
}
83.3334% {
opacity: 1;
transform: translate3d(-44px, -7px, 0) rotate(-30.7deg);
}
to {
opacity: 1;
transform: translate3d(-44px, -6px, 0) rotate(-30deg);
}
}
@keyframes b7854763c4a57c63-uploadIconAnimateInMiddle {
0% {
transform: translateZ(0);
}
30.8334% {
transform: translate3d(0, -10px, 0);
}
58.3334% {
transform: translate3d(0, -3px, 0);
}
75% {
transform: translate3d(0, -8px, 0);
}
83.3334% {
transform: translate3d(0, -7px, 0);
}
to {
transform: translate3d(0, -6px, 0);
}
}
@keyframes b7854763c4a57c63-uploadIconAnimateInRight {
0% {
opacity: 0.6;
transform: translateZ(0) rotate(0deg);
}
4.1667% {
opacity: 0.68;
transform: translate3d(0, -1px, 0) rotate(0deg);
}
30.8334% {
opacity: 1;
transform: translate3d(48px, -10px, 0) rotate(36deg);
}
58.3334% {
opacity: 1;
transform: translate3d(41px, -3px, 0) rotate(28deg);
}
75% {
opacity: 1;
transform: translate3d(45px, -8px, 0) rotate(32deg);
}
83.3334% {
opacity: 1;
transform: translate3d(44px, -7px, 0) rotate(30.7deg);
}
to {
opacity: 1;
transform: translate3d(44px, -6px, 0) rotate(30deg);
}
}
@keyframes b7854763c4a57c63-uploadModalShake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
@keyframes b7854763c4a57c63-uploadTextFadeIn {
0%,
8.334% {
opacity: 0;
transform: translate3d(0, -4px, 0);
}
45.8%,
to {
opacity: 1;
transform: translateZ(0);
}
}
@keyframes b7854763c4a57c63-uploadModalBounceTransition {
0% {
transform: translateZ(0) scale(0.99);
}
50% {
transform: translateZ(0) scale(1.005);
}
to {
transform: translateZ(0) scale(1);
}
}
@keyframes b7854763c4a57c63-uploadModalBounce {
0% {
transform: translateZ(0) scale(0.99);
}
15%,
to {
inset: -10px;
}
33.3334% {
transform: translateZ(0) scale(1.005);
}
54.1667% {
transform: translateZ(0) scale(0.995);
}
70.8334%,
to {
transform: translateZ(0) scale(1);
}
}
.b7854763c4a57c63-uploadArea {
align-items: center;
background: var(--opacity-black-80);
color: var(--white);
display: flex;
font-size: 36px;
height: 100%;
inset-inline-start: 0;
justify-content: center;
opacity: 0;
position: absolute;
top: 0;
visibility: hidden;
width: 100%;
z-index: 2000;
}
.b7854763c4a57c63-uploadArea strong {
font-weight: var(--font-weight-bold);
}
.b7854763c4a57c63-uploadArea * {
pointer-events: none;
}
.b7854763c4a57c63-uploadArea.b7854763c4a57c63-droppable {
visibility: visible;
}
.b7854763c4a57c63-uploadArea.b7854763c4a57c63-uploadModalIn {
opacity: 1;
}
.b7854763c4a57c63-uploadDropModal {
animation: b7854763c4a57c63-uploadIconAnimateIn 0.25s ease-in-out 0s normal forwards;
display: flex;
height: 170px;
position: relative;
width: 310px;
}
.b7854763c4a57c63-uploadDropModal .b7854763c4a57c63-instructions,
.b7854763c4a57c63-uploadDropModal .b7854763c4a57c63-title {
animation: b7854763c4a57c63-uploadTextFadeIn 1s ease 0.175s normal forwards;
opacity: 0;
}
.b7854763c4a57c63-uploadDropModal .b7854763c4a57c63-instructions {
animation-delay: 0.185s;
animation-duration: 1.25s;
}
.b7854763c4a57c63-uploadDropModal .b7854763c4a57c63-bgScale {
background: var(--brand-500);
border-radius: 10px;
inset: 0;
position: absolute;
z-index: -1;
}
.full-motion .b7854763c4a57c63-uploadDropModal .b7854763c4a57c63-bgScale {
animation: b7854763c4a57c63-uploadModalBounce 0.8s ease 0s normal forwards;
}
.b7854763c4a57c63-uploadDropModal .b7854763c4a57c63-inner {
align-items: center;
border: 2px dashed var(--opacity-white-40);
border-radius: 6px;
color: var(--white);
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
width: 100%;
}
.b7854763c4a57c63-uploadDropModal .b7854763c4a57c63-inner .b7854763c4a57c63-title {
box-sizing: border-box;
color: var(--white);
font-size: 22px;
font-weight: var(--font-weight-bold);
padding: 0 8px;
text-align: center;
width: 100%;
}
.b7854763c4a57c63-uploadDropModal .b7854763c4a57c63-inner .b7854763c4a57c63-title strong {
color: var(--white);
}
.b7854763c4a57c63-uploadDropModal .b7854763c4a57c63-inner .b7854763c4a57c63-instructions {
font-size: 12px;
line-height: 16px;
margin-top: 4px;
text-align: center;
-webkit-margin-start: 4px;
color: var(--white);
margin-inline-start: 4px;
}
.b7854763c4a57c63-icons {
height: 60px;
position: relative;
width: 100px;
}
.b7854763c4a57c63-icon {
background-position: 50%;
background-repeat: no-repeat;
flex-shrink: 0;
height: 130px;
transform: translateZ(0);
width: 100px;
}
.b7854763c4a57c63-icon.b7854763c4a57c63-one,
.b7854763c4a57c63-icon.b7854763c4a57c63-three,
.b7854763c4a57c63-icon.b7854763c4a57c63-two {
position: absolute;
}
.full-motion .b7854763c4a57c63-icon.b7854763c4a57c63-one {
animation: b7854763c4a57c63-uploadIconAnimateInLeft 0.8s ease 0s normal forwards;
opacity: 0;
}
.full-motion .b7854763c4a57c63-icon.b7854763c4a57c63-two {
animation: b7854763c4a57c63-uploadIconAnimateInMiddle 0.8s ease 0s normal forwards;
filter: drop-shadow(0 0 48px rgba(88, 101, 242, 0.5));
}
.full-motion .b7854763c4a57c63-icon.b7854763c4a57c63-three {
animation: b7854763c4a57c63-uploadIconAnimateInRight 0.8s ease 0s normal forwards;
opacity: 0;
}
.reduce-motion .b7854763c4a57c63-icon.b7854763c4a57c63-one {
transform: translate3d(-44px, -6px, 0) rotate(-30deg);
}
.reduce-motion .b7854763c4a57c63-icon.b7854763c4a57c63-two {
transform: translate3d(0, -6px, 0);
}
.reduce-motion .b7854763c4a57c63-icon.b7854763c4a57c63-three {
transform: translate3d(44px, -6px, 0) rotate(30deg);
}
.b7854763c4a57c63-wrapOne {
transform: translate3d(0, -70px, 0);
}
.b7854763c4a57c63-wrapTwo {
transform: translate3d(0, -80px, 0);
}
.b7854763c4a57c63-wrapThree {
transform: translate3d(0, -70px, 0);
}
.b7854763c4a57c63-document {
background-image: url(/assets/9ebe3ef63aafee84.svg);
}
.b7854763c4a57c63-image {
background-image: url(/assets/5dea307a4037ec4e.svg);
}
.b7854763c4a57c63-code {
background-image: url(/assets/f4bad77442422ded.svg);
}
.b7854763c4a57c63-crossOne,
.b7854763c4a57c63-crossTwo,
.b7854763c4a57c63-lightOne,
.b7854763c4a57c63-lightTwo,
.b7854763c4a57c63-popOne,
.b7854763c4a57c63-sparkleOne,
.b7854763c4a57c63-sparkleTwo {
animation-iteration-count: 1 !important;
opacity: 0.95;
z-index: 1;
}
.b7854763c4a57c63-sparkleOne {
bottom: -40px;
inset-inline-end: -15px;
}
.b7854763c4a57c63-sparkleTwo {
animation-delay: 1.2s;
inset-inline-end: 12px;
top: -67px;
}
.b7854763c4a57c63-lightOne {
animation-delay: 0.4s;
inset-inline-end: -35px;
top: 24px;
}
.b7854763c4a57c63-lightTwo {
animation-delay: 0.61s;
inset-inline-start: -10px;
top: -32px;
}
.b7854763c4a57c63-crossOne {
animation-delay: 0.56s;
bottom: -35px;
inset-inline-end: 100px;
}
.b7854763c4a57c63-crossTwo {
animation-delay: 0.8s;
bottom: 50px;
inset-inline-start: -70px;
}
.b7854763c4a57c63-popOne {
animation-delay: 0.7s;
bottom: -40px;
inset-inline-start: 50px;
}
.b7854763c4a57c63-fileIcon {
background-position: 50%;
background-repeat: no-repeat;
flex-shrink: 0;
height: 130px;
margin-bottom: 16px;
margin-top: -16px;
width: 100px;
}
.b7854763c4a57c63-fileIcon.b7854763c4a57c63-image {
background-color: var(--background-base-lower);
border-radius: 8px;
box-shadow: 0 2px 8px var(--opacity-black-40);
box-sizing: border-box;
object-fit: contain;
}
.b7854763c4a57c63-fileIcon.b7854763c4a57c63-video {
background-image: url(/assets/98178bd2173d947a.svg);
}
.b7854763c4a57c63-fileIcon.b7854763c4a57c63-acrobat {
background-image: url(/assets/a42338c030af6d9c.svg);
}
.b7854763c4a57c63-fileIcon.b7854763c4a57c63-ae {
background-image: url(/assets/88b289225ff6142a.svg);
}
.b7854763c4a57c63-fileIcon.b7854763c4a57c63-sketch {
background-image: url(/assets/c9f0992f0ab98d49.svg);
}
.b7854763c4a57c63-fileIcon.b7854763c4a57c63-ai {
background-image: url(/assets/93636da24d7ab467.svg);
}
.b7854763c4a57c63-fileIcon.b7854763c4a57c63-archive {
background-image: url(/assets/f89b66e97ea52ba7.svg);
}
.b7854763c4a57c63-fileIcon.b7854763c4a57c63-code {
background-image: url(/assets/f4bad77442422ded.svg);
}
.b7854763c4a57c63-fileIcon.b7854763c4a57c63-document {
background-image: url(/assets/9ebe3ef63aafee84.svg);
}
.b7854763c4a57c63-fileIcon.b7854763c4a57c63-photoshop,
.b7854763c4a57c63-fileIcon.b7854763c4a57c63-ps {
background-image: url(/assets/1084490cf680dd7c.svg);
}
.b7854763c4a57c63-fileIcon.b7854763c4a57c63-spreadsheet {
background-image: url(/assets/b8ca4488a6d443bc.svg);
}
.b7854763c4a57c63-fileIcon.b7854763c4a57c63-webcode {
background-image: url(/assets/6e688b0c124e0ca8.svg);
}
.b7854763c4a57c63-fileIcon.b7854763c4a57c63-audio {
background-image: url(/assets/a6db1d05d35f13d0.svg);
}
.b7854763c4a57c63-fileIcon.b7854763c4a57c63-unknown {
background-image: url(/assets/94660b205108a49f.svg);
}
.b9f75c025c4cad2d-container {
align-items: flex-start;
background: var(--background-surface-high);
box-sizing: border-box;
display: flex;
gap: var(--space-8);
padding: var(--space-12);
width: 100%;
}
.b9f75c025c4cad2d-clipIcon {
align-items: center;
background-color: var(--background-mod-subtle);
border-radius: var(--radius-sm);
display: flex;
flex-shrink: 0;
height: 32px;
justify-content: center;
overflow: hidden;
position: relative;
width: 32px;
}
.b9f75c025c4cad2d-clipIconImage {
height: 100%;
object-fit: cover;
width: 100%;
}
.b9f75c025c4cad2d-clipTextInfo {
display: flex;
flex: 1;
flex-direction: column;
gap: 2px;
justify-content: center;
min-width: 0;
}
.b9f75c025c4cad2d-clipSubtitle,
.b9f75c025c4cad2d-clipTitle {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.b9f75c025c4cad2d-clipAvatars {
align-items: center;
display: flex;
flex-shrink: 0;
}
.a7e304492e5ccc04-actionBarIcon {
display: block;
height: 20px;
object-fit: contain;
width: 20px;
}
._41ea06378162693a-filenameContainer {
margin-top: auto;
}
._41ea06378162693a-filename {
margin-top: 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._41ea06378162693a-mediaContainer {
margin-top: auto;
min-height: 0;
position: relative;
}
._41ea06378162693a-mediaContainer > div:not([aria-expanded="false"]),
._41ea06378162693a-mediaContainer > div:not([aria-expanded="false"]) > div {
height: 100%;
}
._41ea06378162693a-tags {
bottom: 6px;
inset-inline-start: 3px;
position: absolute;
}
._41ea06378162693a-altTag {
background: var(--text-default);
-webkit-margin-end: 4px;
border-radius: 3px;
font-size: 10px;
font-weight: var(--font-weight-semibold);
margin-inline-end: 4px;
padding: 3px;
text-transform: uppercase;
z-index: 1;
}
._41ea06378162693a-spoilerContainer {
height: 100%;
}
._41ea06378162693a-spoilerContainer._41ea06378162693a-sizeXSmall,
._41ea06378162693a-spoilerContainer._41ea06378162693a-sizeXXSmall {
background: none;
}
._41ea06378162693a-spoilerWrapper {
display: flex;
height: 100%;
justify-content: center;
}
._41ea06378162693a-media {
border-radius: var(--radius-md);
max-width: 100%;
object-fit: contain;
}
._41ea06378162693a-media._41ea06378162693a-sizeClip {
aspect-ratio: 16/9;
border-end-end-radius: 0;
border-end-start-radius: 0;
}
._41ea06378162693a-media._41ea06378162693a-sizeXSmall,
._41ea06378162693a-media._41ea06378162693a-sizeXXSmall {
border-radius: var(--radius-xs);
object-fit: cover;
}
._41ea06378162693a-clickableMedia {
cursor: pointer;
}
._41ea06378162693a-spoiler {
filter: blur(var(--custom-channel-attachment-upload-spoiler-blur-radius));
pointer-events: none;
}
._41ea06378162693a-icon {
background-position: 50%;
background-repeat: no-repeat;
height: 144px;
}
._41ea06378162693a-icon._41ea06378162693a-imageSmall {
height: var(--custom-channel-attachment-upload-mini-attachment-size);
}
._41ea06378162693a-icon._41ea06378162693a-imageSmall,
._41ea06378162693a-icon._41ea06378162693a-sizeXSmall,
._41ea06378162693a-icon._41ea06378162693a-sizeXXSmall {
background-size: contain;
}
._41ea06378162693a-icon._41ea06378162693a-video {
background-image: url(/assets/98178bd2173d947a.svg);
}
._41ea06378162693a-icon._41ea06378162693a-acrobat {
background-image: url(/assets/a42338c030af6d9c.svg);
}
._41ea06378162693a-icon._41ea06378162693a-ae {
background-image: url(/assets/88b289225ff6142a.svg);
}
._41ea06378162693a-icon._41ea06378162693a-sketch {
background-image: url(/assets/c9f0992f0ab98d49.svg);
}
._41ea06378162693a-icon._41ea06378162693a-ai {
background-image: url(/assets/93636da24d7ab467.svg);
}
._41ea06378162693a-icon._41ea06378162693a-archive {
background-image: url(/assets/f89b66e97ea52ba7.svg);
}
._41ea06378162693a-icon._41ea06378162693a-code {
background-image: url(/assets/f4bad77442422ded.svg);
}
._41ea06378162693a-icon._41ea06378162693a-document {
background-image: url(/assets/9ebe3ef63aafee84.svg);
}
._41ea06378162693a-icon._41ea06378162693a-photoshop,
._41ea06378162693a-icon._41ea06378162693a-ps {
background-image: url(/assets/1084490cf680dd7c.svg);
}
._41ea06378162693a-icon._41ea06378162693a-spreadsheet {
background-image: url(/assets/b8ca4488a6d443bc.svg);
}
._41ea06378162693a-icon._41ea06378162693a-webcode {
background-image: url(/assets/6e688b0c124e0ca8.svg);
}
._41ea06378162693a-icon._41ea06378162693a-audio {
background-image: url(/assets/a6db1d05d35f13d0.svg);
}
._41ea06378162693a-icon._41ea06378162693a-unknown {
background-image: url(/assets/94660b205108a49f.svg);
}
._41ea06378162693a-attachmentItemSmall {
background-color: unset;
max-height: var(--custom-channel-attachment-upload-mini-attachment-size);
max-width: var(--custom-channel-attachment-upload-mini-attachment-size);
min-height: var(--custom-channel-attachment-upload-mini-attachment-size);
min-width: var(--custom-channel-attachment-upload-mini-attachment-size);
padding: 0;
}
._41ea06378162693a-imageSmall {
border-radius: 12px;
height: var(--custom-channel-attachment-upload-mini-attachment-size);
object-fit: cover;
}
._41ea06378162693a-sizeXSmall {
height: 48px;
min-width: 48px;
width: 48px;
}
._41ea06378162693a-sizeXXSmall {
height: 32px;
min-width: 32px;
width: 32px;
}
._41ea06378162693a-actionBarIcon {
display: block;
height: 16px;
object-fit: contain;
width: 16px;
}
._41ea06378162693a-action {
height: 16px;
min-width: 18px;
padding: 4px;
}
._41ea06378162693a-clipsBadge {
inset-inline-start: 8px;
position: absolute;
top: 8px;
}
._41ea06378162693a-clipsFooter {
background-color: transparent;
}
.theme-dark ._41ea06378162693a-altTag {
color: #000;
mix-blend-mode: screen;
}
.theme-light ._41ea06378162693a-altTag {
color: #fff;
mix-blend-mode: multiply;
}
.b088b0de8015b20f-emptyOption {
border: 2px dashed var(--text-default);
border-radius: 8px;
}
.b088b0de8015b20f-emptyOptionActive {
border-color: var(--text-link);
}
.b088b0de8015b20f-clickContainer {
cursor: pointer;
display: flex;
height: 100%;
width: 100%;
}
.b088b0de8015b20f-commandOptionContainer {
display: flex;
flex-direction: column;
margin: auto;
width: 80%;
}
.b088b0de8015b20f-optionName {
background-color: var(--background-base-lowest);
border-radius: 4px;
color: var(--text-default);
inset-inline-end: 8px;
padding: 2px 6px;
position: absolute;
}
.b088b0de8015b20f-optionNameActive {
color: var(--text-link);
}
.b088b0de8015b20f-optionIcon {
height: 100px;
}
.b088b0de8015b20f-optionHelp {
text-align: center;
}
.b088b0de8015b20f-fileInput {
display: none;
}
.b77158512e0ab116-channelAttachmentArea {
display: flex;
gap: 24px;
margin: 0;
overflow-x: auto;
padding: 20px 10px 10px;
}
.b77158512e0ab116-channelAttachmentArea:last-child {
-webkit-padding-end: 30px;
padding-inline-end: 30px;
}
.b77158512e0ab116-divider {
-webkit-margin-start: 16px;
margin-inline-start: 16px;
}
._6c5a1559a27b6653-root {
background: var(--background-base-lower);
background-color: var(--background-surface-highest);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
display: flex;
max-width: 100%;
padding: var(--space-4) var(--space-8);
}
._6c5a1559a27b6653-text {
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
._6c5a1559a27b6653-premium {
flex-shrink: 0;
height: 18px;
width: 18px;
}
._6c5a1559a27b6653-iconOnly {
color: var(--text-default);
cursor: pointer;
}
._795fb60671d128c1-characterCount {
align-items: flex-end;
bottom: 10px;
color: var(--text-default);
display: flex;
flex-direction: column;
inset-inline-end: 14px;
position: absolute;
}
._795fb60671d128c1-premiumFlair {
color: var(--interactive-text-default);
}
._795fb60671d128c1-premiumFlair:not(:last-child) {
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
._795fb60671d128c1-flairContainer {
align-items: center;
display: flex;
height: 24px;
}
._795fb60671d128c1-upsell {
margin-top: 8px;
}
.be506c040b91bd46-container {
margin: 8px 8px 0;
}
.bba88350df28dff1-toolbar {
align-items: center;
background-color: var(--primary-800);
border-radius: 4px;
box-shadow: var(--shadow-border), var(--shadow-high);
color: var(--primary-300);
display: flex;
flex-direction: column;
pointer-events: all;
position: absolute;
}
.bba88350df28dff1-toolbar:before {
-webkit-border-start: 8px solid transparent;
border-inline-start: 8px solid transparent;
-webkit-border-end: 8px solid transparent;
border-inline-end: 8px solid transparent;
border-top: 8px solid var(--primary-800);
bottom: -8px;
content: "";
height: 0;
inset-inline-start: calc(50% - 8px);
position: absolute;
width: 0;
}
.bba88350df28dff1-buttons {
border-radius: 4px;
display: flex;
flex-direction: row;
height: 32px;
overflow: hidden;
}
.bba88350df28dff1-staticToolbar {
border-radius: 4px 4px 0 0;
display: flex;
justify-content: space-between;
margin-bottom: calc(var(--space-4) * -1);
}
.bba88350df28dff1-staticToolbar .bba88350df28dff1-button:first-of-type {
border-start-start-radius: 4px;
}
.theme-dark .bba88350df28dff1-staticToolbar {
background-color: var(--background-secondary-alt);
}
.theme-light .bba88350df28dff1-staticToolbar {
background-color: var(--background-base-lowest);
}
.bba88350df28dff1-staticButtons {
border-radius: 4px 4px 0 0;
display: flex;
}
.bba88350df28dff1-emojiButton {
-webkit-padding-end: 8px;
padding-inline-end: 8px;
}
.bba88350df28dff1-divider {
-webkit-border-start: 1px solid var(--opacity-white-4);
border-inline-start: 1px solid var(--opacity-white-4);
display: inline-block;
height: 20px;
margin: 6px;
}
.bba88350df28dff1-button {
align-items: center;
background-color: transparent;
border-radius: 0;
color: var(--primary-300);
display: flex;
justify-content: center;
padding: 0;
width: 32px;
}
.bba88350df28dff1-button:hover {
background-color: var(--interactive-background-hover);
color: var(--primary-100);
}
.bba88350df28dff1-button[aria-pressed="true"] {
background-color: var(--interactive-background-selected);
color: var(--white);
}
.bba88350df28dff1-buttonInner,
.bba88350df28dff1-icon {
height: 20px;
}
.bba88350df28dff1-icon {
color: currentColor;
width: 20px;
}
.bba88350df28dff1-staticIcon {
color: var(--interactive-text-default);
}
.bba88350df28dff1-staticDivider {
-webkit-border-start: 1px solid var(--border-subtle);
border-inline-start: 1px solid var(--border-subtle);
}
html:not(.chat-input) .b1f01d03ecc7d736-inputInner {
background: var(--input-background-default);
border-radius: var(--radius-sm);
--custom-slate-textarea-padding: calc((var(--custom-channel-textarea-text-area-height) - var(--chat-markup-line-height)) / 2);
--custom-slate-textarea-right-offset: 10px;
padding: 0 calc(var(--custom-slate-textarea-padding) - var(--custom-slate-textarea-right-offset)) 0 var(--custom-slate-textarea-padding);
}
.chat-input .b1f01d03ecc7d736-input,
.custom-theme-background .b1f01d03ecc7d736-input {
background: var(--input-background-default);
}
.b1f01d03ecc7d736-input {
border: none !important;
}
.b1f01d03ecc7d736-editor {
--channel-text-area-placeholder: var(--text-muted);
font-size: 14px;
min-height: 88px;
}
.b1f01d03ecc7d736-container {
background: var(--background-base-low);
border-radius: 8px;
box-shadow: var(--shadow-border), var(--shadow-high);
padding: 16px;
width: 300px;
}
.user-profile-modal .b1f01d03ecc7d736-container.b1f01d03ecc7d736-activity {
width: 400px;
}
.user-profile-sidebar .b1f01d03ecc7d736-container {
width: 276px;
}
.user-profile-sidebar .b1f01d03ecc7d736-container.b1f01d03ecc7d736-status {
-webkit-margin-start: -90px;
margin-inline-start: -90px;
}
.user-profile-popout .b1f01d03ecc7d736-container.b1f01d03ecc7d736-status {
-webkit-margin-start: -122px;
margin-inline-start: -122px;
}
.user-profile-popout .b1f01d03ecc7d736-container.b1f01d03ecc7d736-avatar {
-webkit-margin-start: -32px;
margin-inline-start: -32px;
}
.user-profile-popout .b1f01d03ecc7d736-container.b1f01d03ecc7d736-activity {
-webkit-margin-start: -32px;
margin-inline-start: -32px;
}
.user-profile-popout .b1f01d03ecc7d736-container.b1f01d03ecc7d736-customProfileTheme.b1f01d03ecc7d736-status {
-webkit-margin-start: -118px;
margin-inline-start: -118px;
}
.user-profile-popout .b1f01d03ecc7d736-container.b1f01d03ecc7d736-customProfileTheme.b1f01d03ecc7d736-avatar {
-webkit-margin-start: -28px;
margin-inline-start: -28px;
}
.c97e55feac203869-popover {
background-color: var(--user-profile-toolbar-background);
border: 1px solid var(--user-profile-toolbar-border);
border-radius: 100px;
box-shadow: var(--shadow-low);
display: inline-flex;
gap: 2px;
height: unset;
inset-inline-end: min(8px, calc(50% - 29px));
opacity: 0;
padding: 2px;
pointer-events: none;
position: absolute;
top: -16px;
}
.custom-user-profile-theme.theme-dark .c97e55feac203869-popover {
-webkit-backdrop-filter: blur(36px);
backdrop-filter: blur(36px);
}
.custom-user-profile-theme.theme-light .c97e55feac203869-popover {
-webkit-backdrop-filter: blur(24px);
backdrop-filter: blur(24px);
}
.c97e55feac203869-popover.c97e55feac203869-visible,
.c97e55feac203869-popover:focus-within {
opacity: 1;
pointer-events: all;
}
:not(.keyboard-mode).full-motion .c97e55feac203869-popover.c97e55feac203869-visible,
:not(.keyboard-mode).full-motion .c97e55feac203869-popover:focus-within {
animation: c97e55feac203869-hoverIn 0.15s ease forwards;
opacity: 0;
}
:not(.keyboard-mode).full-motion .c97e55feac203869-popover.c97e55feac203869-visible.c97e55feac203869-expandable,
:not(.keyboard-mode).full-motion .c97e55feac203869-popover:focus-within.c97e55feac203869-expandable {
animation-delay: 0.3s;
}
@keyframes c97e55feac203869-hoverIn {
0% {
opacity: 0;
top: -14px;
}
to {
opacity: 1;
top: -16px;
}
}
.c97e55feac203869-button {
height: unset;
min-width: unset;
padding: 4px;
}
.c97e55feac203869-button.c97e55feac203869-left {
-webkit-padding-start: 6px;
border-radius: 100px 6px 6px 100px;
padding-inline-start: 6px;
}
.c97e55feac203869-button.c97e55feac203869-right {
-webkit-padding-end: 6px;
border-radius: 6px 100px 100px 6px;
padding-inline-end: 6px;
}
.c97e55feac203869-button:hover {
background: var(--background-mod-normal);
}
.c97e55feac203869-button:hover .c97e55feac203869-icon {
fill: var(--interactive-text-hover);
}
.c97e55feac203869-button:active {
background: var(--background-mod-strong);
}
.c97e55feac203869-button:active .c97e55feac203869-icon {
fill: var(--interactive-text-active);
}
.ab86098b36386ff7-container {
--custom-status-bubble-background-color: var(--background-surface-highest);
--custom-status-bubble-background: var(--custom-status-bubble-background-color);
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
position: absolute;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
z-index: var(--custom-user-profile-middle-layer-z-index);
}
.theme-dark .ab86098b36386ff7-container {
--custom-status-bubble-overlay-color: 255 255 255;
}
.theme-light .ab86098b36386ff7-container {
--custom-status-bubble-overlay-color: 0 0 0;
}
.ab86098b36386ff7-container.ab86098b36386ff7-editable:hover {
--custom-status-bubble-background: linear-gradient(rgb(var(--custom-status-bubble-overlay-color)/0.04), rgb(var(--custom-status-bubble-overlay-color)/0.04)), var(--custom-status-bubble-background-color);
}
.ab86098b36386ff7-container.ab86098b36386ff7-hoisted {
z-index: var(--custom-user-profile-hoist-z-index);
}
.user-profile-popout .ab86098b36386ff7-container {
inset-inline-start: 105px;
top: calc(var(--custom-user-profile-banner-height) - 7px);
}
.user-profile-modal .ab86098b36386ff7-container {
inset-inline-start: 161px;
top: -10px;
}
.user-profile-modal-v2 .ab86098b36386ff7-container {
inset-inline-start: 172px;
top: calc(var(--custom-user-profile-banner-height) - 8px);
}
.user-profile-sidebar .ab86098b36386ff7-container {
inset-inline-start: 109px;
top: calc(var(--custom-user-profile-banner-height) - 7px);
}
.ab86098b36386ff7-referenceContainer {
pointer-events: none;
position: relative;
visibility: hidden;
}
.ab86098b36386ff7-referenceContainer.ab86098b36386ff7-withLabel {
margin-top: -24px;
}
.user-profile-popout .ab86098b36386ff7-referenceContainer {
margin-top: -10px;
margin-inline: 109px 12px;
}
.user-profile-popout .ab86098b36386ff7-referenceContainer.ab86098b36386ff7-withLabel {
margin-top: -24px;
}
.custom-user-profile-theme .user-profile-popout .ab86098b36386ff7-referenceContainer {
margin-inline: 105px 8px;
}
.user-profile-modal .ab86098b36386ff7-referenceContainer {
margin-top: -10px;
margin-inline: 161px 16px;
}
.user-profile-modal .ab86098b36386ff7-referenceContainer.ab86098b36386ff7-withLabel {
margin-top: -24px;
}
.user-profile-modal-v2 .ab86098b36386ff7-referenceContainer {
margin-top: -10px;
margin-inline: 144px 12px;
}
.user-profile-modal-v2 .ab86098b36386ff7-referenceContainer.ab86098b36386ff7-withLabel {
margin-top: -24px;
}
.user-profile-sidebar .ab86098b36386ff7-referenceContainer {
margin-top: -10px;
margin-inline: 109px 8px;
}
.user-profile-sidebar .ab86098b36386ff7-referenceContainer.ab86098b36386ff7-withLabel {
margin-top: -24px;
}
.ab86098b36386ff7-referenceContainer > .ab86098b36386ff7-outer > .ab86098b36386ff7-inner > .ab86098b36386ff7-content {
max-width: 155px;
}
.ab86098b36386ff7-referenceContainer > .ab86098b36386ff7-outer > .ab86098b36386ff7-inner > .ab86098b36386ff7-content.ab86098b36386ff7-unclamped {
position: absolute;
top: 0;
}
.ab86098b36386ff7-referenceContainer > .ab86098b36386ff7-outer {
max-width: none;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
}
.ab86098b36386ff7-outer {
background: var(--custom-status-bubble-background);
border: 1px solid var(--border-muted);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-low);
box-sizing: border-box;
max-width: 181px;
min-width: 42px;
overflow: hidden;
}
.ab86098b36386ff7-outer:before {
height: 20px;
inset-inline-start: 10px;
top: -8px;
width: 20px;
}
.ab86098b36386ff7-outer:after,
.ab86098b36386ff7-outer:before {
background: inherit;
border: inherit;
border-radius: 50%;
box-shadow: inherit;
box-sizing: border-box;
content: "";
position: absolute;
}
.ab86098b36386ff7-outer:after {
height: 10px;
inset-inline-start: -3px;
top: -15px;
width: 10px;
}
.theme-dark .ab86098b36386ff7-outer {
border: 1px solid var(--border-muted);
}
.custom-user-profile-theme.theme-dark .ab86098b36386ff7-outer {
border: 1px solid var(--border-strong);
}
.ab86098b36386ff7-inner {
background: var(--custom-status-bubble-background);
cursor: text;
display: block;
font-size: medium;
margin: 0 auto;
padding: 8px 12px;
position: relative;
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
word-break: break-word;
}
.ab86098b36386ff7-inner.ab86098b36386ff7-clickable {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.ab86098b36386ff7-content {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
color: var(--text-default);
overflow: hidden;
}
.ab86098b36386ff7-content.ab86098b36386ff7-unclamped {
-webkit-line-clamp: 9;
}
.ab86098b36386ff7-singleLineTextClamp {
-webkit-line-clamp: 1;
}
.ab86098b36386ff7-ring {
border-radius: var(--radius-lg);
}
.ab86098b36386ff7-statusText {
color: var(--text-default);
}
.ab86098b36386ff7-statusEmoji:not(:has(~ .ab86098b36386ff7-statusText)) {
max-height: 32px;
max-width: 32px;
min-height: 32px;
min-width: 32px;
}
.ab86098b36386ff7-statusEmoji:has(~ .ab86098b36386ff7-statusText) {
height: 16px;
width: 16px;
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
.ab86098b36386ff7-statusEmoji ~ .ab86098b36386ff7-statusText {
display: inline;
}
.ab86098b36386ff7-labelRow ~ .ab86098b36386ff7-statusEmoji:not(:has(~ .ab86098b36386ff7-statusText)) {
display: block;
margin-inline: auto;
}
.ab86098b36386ff7-addStatusPrompt {
color: var(--text-muted);
display: inline;
vertical-align: middle;
}
.ab86098b36386ff7-italicPrompt {
font-style: italic;
-webkit-padding-end: 1px;
padding-inline-end: 1px;
padding-bottom: 1px;
}
.ab86098b36386ff7-addStatusIcon {
display: inline;
-webkit-margin-end: 4px;
margin-inline-end: 4px;
fill: var(--text-muted);
vertical-align: middle;
}
.ab86098b36386ff7-outer:hover .ab86098b36386ff7-addStatusPrompt {
color: var(--text-default);
}
.ab86098b36386ff7-outer:hover .ab86098b36386ff7-addStatusIconColor {
fill: var(--text-default);
}
.ab86098b36386ff7-labelRow {
margin-bottom: 2px;
}
:where(.bf424dc3dc4c8775-section) {
display: flex;
flex-direction: column;
gap: 8px;
}
:where(.bf424dc3dc4c8775-section):empty,
:where(.bf424dc3dc4c8775-section):has(> .bf424dc3dc4c8775-headings:only-child) {
display: none;
}
.bf424dc3dc4c8775-header {
align-items: center;
display: flex;
gap: 4px;
}
._20827cfa325893cd-list {
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
}
._9d59731d47494e97-container {
--custom-lift-hover: 2px;
--custom-peek-base: 8px;
--custom-peek-hover: 2px;
--custom-expanded-total: calc(var(--custom-lift-hover) + var(--custom-peek-base) + var(--custom-peek-hover));
--custom-transition-duration: 200ms;
}
._9d59731d47494e97-container:has(._9d59731d47494e97-hasMultipleCards) {
padding-bottom: var(--custom-peek-base);
}
._9d59731d47494e97-cardsList,
._9d59731d47494e97-firstCardContainer {
position: relative;
}
._9d59731d47494e97-hasMultipleCards ._9d59731d47494e97-firstCardContainer ._9d59731d47494e97-card {
box-shadow: var(--shadow-low);
z-index: var(--custom-user-profile-middle-layer-z-index);
}
.full-motion ._9d59731d47494e97-hasMultipleCards ._9d59731d47494e97-firstCardContainer ._9d59731d47494e97-card {
transition: transform var(--custom-transition-duration) ease-in-out;
}
._9d59731d47494e97-hasMultipleCards:focus-within ._9d59731d47494e97-firstCardContainer ._9d59731d47494e97-card,
._9d59731d47494e97-hasMultipleCards:hover ._9d59731d47494e97-firstCardContainer ._9d59731d47494e97-card {
transform: translateY(calc(var(--custom-lift-hover) * -1));
}
._9d59731d47494e97-backgroundCardContainer {
box-sizing: border-box;
cursor: pointer;
height: var(--custom-peek-base);
overflow: hidden;
padding-inline: 8px;
position: absolute;
top: 100%;
width: 100%;
}
.full-motion ._9d59731d47494e97-backgroundCardContainer {
--custom-transition-height-delay: var(--custom-transition-duration);
transition:
transform var(--custom-transition-duration) ease-in-out,
height 0s var(--custom-transition-height-delay) linear;
}
._9d59731d47494e97-cardsList:focus-within ._9d59731d47494e97-backgroundCardContainer,
._9d59731d47494e97-cardsList:hover ._9d59731d47494e97-backgroundCardContainer {
--custom-transition-height-delay: 0ms;
height: var(--custom-expanded-total);
transform: translateY(calc(var(--custom-lift-hover) * -1));
}
._9d59731d47494e97-backgroundCardContainer ._9d59731d47494e97-backgroundCard {
height: calc(var(--custom-expanded-total) * 2);
transform: translateY(calc(-100% + var(--custom-peek-base)));
z-index: var(--custom-user-profile-bottom-layer-z-index);
}
.full-motion ._9d59731d47494e97-backgroundCardContainer ._9d59731d47494e97-backgroundCard {
transition: transform var(--custom-transition-duration) ease-in-out;
}
._9d59731d47494e97-backgroundCardContainer ._9d59731d47494e97-backgroundCard:focus-within,
._9d59731d47494e97-backgroundCardContainer ._9d59731d47494e97-backgroundCard:hover {
background: var(--user-profile-overlay-background-hover);
}
._9d59731d47494e97-cardsList:focus-within ._9d59731d47494e97-backgroundCardContainer ._9d59731d47494e97-backgroundCard,
._9d59731d47494e97-cardsList:hover ._9d59731d47494e97-backgroundCardContainer ._9d59731d47494e97-backgroundCard {
transform: translateY(calc(-100% + var(--custom-expanded-total)));
}
._39ec2e3dfb4fd2f2-card {
display: flex;
flex-direction: column;
gap: 8px;
overflow: visible;
padding: 8px;
position: relative;
}
.user-profile-sidebar ._39ec2e3dfb4fd2f2-card {
padding: 12px;
}
.user-profile-modal-v2 ._39ec2e3dfb4fd2f2-card {
border-radius: var(--radius-md);
padding: 12px;
}
._39ec2e3dfb4fd2f2-card._39ec2e3dfb4fd2f2-hoisted {
background: linear-gradient(rgb(var(--background-gradient-color) / 0.4), rgb(var(--background-gradient-color) / 0.4)), linear-gradient(var(--profile-gradient-end), var(--profile-gradient-end)) !important;
pointer-events: none;
z-index: var(--custom-user-profile-hoist-z-index);
}
._39ec2e3dfb4fd2f2-header {
justify-content: space-between;
}
._39ec2e3dfb4fd2f2-header,
._39ec2e3dfb4fd2f2-headerText {
display: flex;
gap: 4px;
}
._39ec2e3dfb4fd2f2-headerText {
align-items: center;
overflow: hidden;
}
._39ec2e3dfb4fd2f2-headerContextMenu:empty {
display: none;
}
._39ec2e3dfb4fd2f2-headerContextMenu._39ec2e3dfb4fd2f2-absolute {
align-self: flex-end;
display: inline-flex;
position: absolute;
}
._39ec2e3dfb4fd2f2-headerContextMenu._39ec2e3dfb4fd2f2-absolute ~ ._39ec2e3dfb4fd2f2-body > ._39ec2e3dfb4fd2f2-content > ._39ec2e3dfb4fd2f2-details {
-webkit-margin-end: 24px;
margin-inline-end: 24px;
}
._39ec2e3dfb4fd2f2-platformIcon {
background-color: var(--icon-muted);
height: 12px;
-webkit-mask-size: cover;
mask-size: cover;
width: 12px;
}
._39ec2e3dfb4fd2f2-body {
gap: 8px;
}
._39ec2e3dfb4fd2f2-body,
._39ec2e3dfb4fd2f2-toolbarContainer {
display: flex;
flex-direction: column;
}
._39ec2e3dfb4fd2f2-toolbarContainer {
border: none;
overflow: visible;
position: relative;
}
._39ec2e3dfb4fd2f2-content {
display: flex;
flex: 1 1 auto;
flex-direction: row;
gap: 8px;
}
.user-profile-modal ._39ec2e3dfb4fd2f2-content,
.user-profile-modal-v2 ._39ec2e3dfb4fd2f2-content {
gap: 12px;
}
._39ec2e3dfb4fd2f2-details {
align-self: center;
display: flex;
flex-direction: column;
gap: 4px;
overflow: hidden;
width: 100%;
}
._39ec2e3dfb4fd2f2-actions {
align-items: center;
display: flex;
gap: 8px;
margin: 4px 0 0;
}
.user-profile-modal ._39ec2e3dfb4fd2f2-actions {
flex-wrap: nowrap;
margin-block: 0;
margin-inline: 20px 0;
}
.user-profile-modal-v2 ._39ec2e3dfb4fd2f2-actions {
flex-wrap: wrap;
}
._39ec2e3dfb4fd2f2-actions ._39ec2e3dfb4fd2f2-primaryButton {
flex: 1;
}
._39ec2e3dfb4fd2f2-actions ._39ec2e3dfb4fd2f2-customButtons {
align-items: center;
display: flex;
flex: 1;
flex-wrap: wrap;
gap: 8px;
}
._39ec2e3dfb4fd2f2-actions ._39ec2e3dfb4fd2f2-customButtons > button {
flex: 1 1 auto;
min-width: calc(50% - 8px);
}
._39ec2e3dfb4fd2f2-actions:empty {
display: none;
}
._39ec2e3dfb4fd2f2-badges {
-moz-column-gap: 8px;
column-gap: 8px;
flex-wrap: wrap;
row-gap: 0;
}
._39ec2e3dfb4fd2f2-clickableContainer {
cursor: pointer;
}
._39ec2e3dfb4fd2f2-clickableContainer:hover > ._39ec2e3dfb4fd2f2-card {
background: var(--user-profile-overlay-background-hover);
}
._39ec2e3dfb4fd2f2-image {
border-radius: var(--radius-sm);
}
._39ec2e3dfb4fd2f2-hangStatusIcon {
height: 100px;
width: 100px;
}
._39ec2e3dfb4fd2f2-hangStatusIcon._39ec2e3dfb4fd2f2-small {
height: 60px;
width: 60px;
}
._39ec2e3dfb4fd2f2-clickableImage,
._39ec2e3dfb4fd2f2-clickableImage:after {
border-radius: var(--radius-sm);
}
._39ec2e3dfb4fd2f2-clickableImage:after {
background-color: var(--black);
content: "";
height: 100%;
inset-inline-end: 0;
opacity: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
}
.full-motion ._39ec2e3dfb4fd2f2-clickableImage:after {
transition: opacity var(--custom-button-transition-duration) ease;
}
._39ec2e3dfb4fd2f2-clickableImage:hover:after {
opacity: 0.2;
}
._39ec2e3dfb4fd2f2-clickableText {
cursor: pointer;
max-width: 100%;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
}
._39ec2e3dfb4fd2f2-clickableText:hover {
text-decoration: underline;
-webkit-text-decoration-color: var(--text-default);
text-decoration-color: var(--text-default);
}
._39ec2e3dfb4fd2f2-inline {
display: inline;
}
._39ec2e3dfb4fd2f2-gameState {
display: flex;
gap: 4px;
}
._39ec2e3dfb4fd2f2-guildIcon {
border-radius: var(--radius-xs);
}
._39ec2e3dfb4fd2f2-voiceChannel {
align-items: center;
display: flex;
gap: 4px;
}
._39ec2e3dfb4fd2f2-voiceChannelText {
align-items: center;
display: flex;
flex: 1;
gap: 2px;
overflow: hidden;
}
._39ec2e3dfb4fd2f2-voiceChannelText ._39ec2e3dfb4fd2f2-clickableText {
overflow: hidden;
}
._39ec2e3dfb4fd2f2-voiceChannelText ._39ec2e3dfb4fd2f2-voiceIcon {
flex-shrink: 0;
}
._39ec2e3dfb4fd2f2-voiceChannelHeading {
overflow: hidden;
word-break: break-all;
}
._39ec2e3dfb4fd2f2-voiceChannelHeading ._39ec2e3dfb4fd2f2-voiceIcon {
position: relative;
top: 1px;
-webkit-margin-end: 2px;
margin-inline-end: 2px;
}
._39ec2e3dfb4fd2f2-voiceChannelDivider {
width: 100%;
}
._39ec2e3dfb4fd2f2-voiceChannelOverflowCount {
background: var(--background-mod-strong);
}
._39ec2e3dfb4fd2f2-contextMenu {
cursor: pointer;
display: flex;
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
._23eb0ce12c12b9c8-divider {
background-color: var(--user-profile-border);
height: 1px;
}
._33ecd0a3614f15b0-cloudPlaySection {
align-items: center;
display: flex;
gap: 16px;
justify-content: space-between;
}
._33ecd0a3614f15b0-cloudPlaySectionTextContainer {
align-items: center;
display: flex;
gap: 8px;
}
._33ecd0a3614f15b0-cloudPlayDivider {
margin: 4px 0;
width: 100%;
}
._8e51c10f5a9d6304-container {
align-items: center;
display: flex;
gap: 8px;
}
._8e51c10f5a9d6304-text {
font-family: var(--font-code);
}
._8e51c10f5a9d6304-bar {
background-color: var(--interactive-muted);
border-radius: 2px;
flex: 1;
height: 2px;
}
._8e51c10f5a9d6304-progress {
background-color: var(--interactive-text-active);
border-radius: inherit;
height: inherit;
min-width: 4px;
}
._3299f831e1be47ba-heading {
display: flex;
justify-content: space-between;
}
._3299f831e1be47ba-preview {
align-items: center;
aspect-ratio: 16/9;
display: flex;
flex-direction: column;
gap: 8px;
justify-content: center;
width: 100%;
}
.user-profile-modal ._3299f831e1be47ba-preview {
max-height: 60px;
max-width: 60px;
min-height: 60px;
min-width: 60px;
}
.user-profile-modal-v2 ._3299f831e1be47ba-preview {
max-height: 100px;
max-width: 100px;
min-height: 100px;
min-width: 100px;
}
._3299f831e1be47ba-image {
background-color: var(--background-base-lowest);
border-radius: var(--radius-sm);
height: 100%;
object-fit: contain;
width: 100%;
}
._3299f831e1be47ba-clickable {
cursor: pointer;
}
._3299f831e1be47ba-disabled {
cursor: not-allowed;
}
._3299f831e1be47ba-overlay {
position: relative;
}
._3299f831e1be47ba-overlay:after {
border-radius: var(--radius-sm);
content: "";
height: 100%;
inset-inline-end: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}
._3299f831e1be47ba-overlay:hover ._3299f831e1be47ba-overlayText {
opacity: 1;
}
.full-motion ._3299f831e1be47ba-overlay:hover ._3299f831e1be47ba-clyde {
display: initial;
}
._3299f831e1be47ba-overlayText {
background: var(--opacity-black-60);
border-radius: var(--radius-sm);
cursor: inherit;
opacity: 0;
padding: 7px 16px;
position: absolute;
z-index: 1;
}
.full-motion ._3299f831e1be47ba-overlayText {
transition: opacity var(--custom-button-transition-duration) ease;
}
._3299f831e1be47ba-clyde {
animation:
_3299f831e1be47ba-fadeIn 7.6s linear 19s forwards,
_3299f831e1be47ba-x 3.8s linear 19s infinite alternate,
_3299f831e1be47ba-y 2.3s linear 19s infinite alternate,
_3299f831e1be47ba-colorX 19s step-start 19s infinite,
_3299f831e1be47ba-colorY 11.5s step-start 19s infinite;
color: hsl(calc((var(--custom-color-y) * 5 + var(--custom-color-x)) * 14.4) 100% 50%);
display: none;
inset-inline-start: 0;
opacity: 0;
position: absolute;
top: 0;
}
@keyframes _3299f831e1be47ba-fadeIn {
0% {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes _3299f831e1be47ba-x {
0% {
inset-inline-start: 0;
}
to {
inset-inline-start: calc(100% - 16px);
}
}
@keyframes _3299f831e1be47ba-y {
0% {
top: 0;
}
to {
top: calc(100% - 16px);
}
}
@keyframes _3299f831e1be47ba-colorX {
0% {
--custom-color-x: 0;
}
20% {
--custom-color-x: 2;
}
40% {
--custom-color-x: 4;
}
60% {
--custom-color-x: 1;
}
80% {
--custom-color-x: 3;
}
to {
--custom-color-x: 0;
}
}
@keyframes _3299f831e1be47ba-colorY {
0% {
--custom-color-y: 0;
}
20% {
--custom-color-y: 2;
}
40% {
--custom-color-y: 4;
}
60% {
--custom-color-y: 1;
}
80% {
--custom-color-y: 3;
}
to {
--custom-color-y: 0;
}
}
.e928f41923a9fe3e-container {
background: var(--card-background-default);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
box-sizing: border-box;
flex-shrink: 0;
height: 60px;
position: relative;
width: 60px;
}
.user-profile-modal-v2 .e928f41923a9fe3e-container {
height: 100px;
width: 100px;
}
.e928f41923a9fe3e-container:before {
background: var(--background-mod-subtle);
border-radius: inherit;
content: "";
height: 100%;
inset-inline-start: 0;
position: absolute;
top: 0;
width: 100%;
}
.theme-dark.custom-user-profile-theme .e928f41923a9fe3e-container {
background: var(--background-mod-strong);
}
.theme-dark.custom-user-profile-theme .e928f41923a9fe3e-container:before {
content: none;
}
.theme-light.custom-user-profile-theme .e928f41923a9fe3e-container {
background: var(--opacity-white-52);
}
.theme-light.custom-user-profile-theme .e928f41923a9fe3e-container:before {
content: none;
}
.e928f41923a9fe3e-circle {
border-radius: var(--radius-round);
box-shadow: var(--shadow-high);
position: absolute;
}
.e928f41923a9fe3e-avatar {
border-radius: inherit;
height: 100%;
outline: 2px solid var(--background-surface-highest);
width: 100%;
}
.theme-dark.custom-user-profile-theme .e928f41923a9fe3e-avatar {
outline-color: var(--opacity-white-24);
}
.theme-light.custom-user-profile-theme .e928f41923a9fe3e-avatar {
outline-color: var(--opacity-white-72);
}
.user-profile-modal-v2 .e928f41923a9fe3e-avatar {
outline-width: 3px;
}
.e928f41923a9fe3e-overflowCount {
align-items: center;
background: var(--background-surface-highest);
border-radius: inherit;
display: flex;
height: 100%;
justify-content: center;
padding: 1px;
position: relative;
width: 100%;
}
.theme-dark.custom-user-profile-theme .e928f41923a9fe3e-overflowCount {
background: var(--opacity-white-24);
}
.theme-light.custom-user-profile-theme .e928f41923a9fe3e-overflowCount {
background: var(--opacity-white-72);
}
._08bd2625f2f5ff33-form {
display: contents;
}
._08bd2625f2f5ff33-modalHeader {
gap: 4px;
overflow: visible;
padding: 16px 0 0;
text-align: center;
}
._08bd2625f2f5ff33-closeButton {
color: var(--interactive-text-default);
cursor: pointer;
inset-inline-end: -4px;
position: absolute;
top: 8px;
}
._08bd2625f2f5ff33-headerImage {
background-image: url(/assets/4ed48b8404cc8dd4.svg);
background-repeat: no-repeat;
height: 150px;
margin: 12px auto;
width: 250px;
}
._08bd2625f2f5ff33-titleRow {
align-items: center;
justify-content: flex-end;
margin-bottom: 8px;
}
._08bd2625f2f5ff33-title,
._08bd2625f2f5ff33-titleRow {
display: inline-flex;
}
._08bd2625f2f5ff33-title {
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
._08bd2625f2f5ff33-textArea {
background: var(--input-background-default);
max-height: 80px;
}
._08bd2625f2f5ff33-error {
margin-top: 8px;
}
._08bd2625f2f5ff33-button {
text-transform: capitalize;
}
._08bd2625f2f5ff33-modal._08bd2625f2f5ff33-gradientBorder {
border: none;
box-sizing: border-box;
}
._08bd2625f2f5ff33-container {
background: radial-gradient(100% 100% at 50% 100%, var(--background-base-low) 60%, var(--transparent) 100%), linear-gradient(270deg, var(--expressive-gradient-purple-end) 0, var(--expressive-gradient-purple-start) 100%);
border-radius: inherit;
border-end-end-radius: 0;
border-end-start-radius: 0;
box-shadow: inset 0 1px 0 1px var(--border-subtle);
}
._08bd2625f2f5ff33-cancelButton {
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
._08bd2625f2f5ff33-modalFooter {
background-color: var(--background-base-low);
padding-bottom: var(--space-24);
padding-top: var(--space-8);
-webkit-border-start: 1px solid var(--border-subtle);
border-inline-start: 1px solid var(--border-subtle);
-webkit-border-end: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
border-inline-end: 1px solid var(--border-subtle);
}
.b661587589abb4a9-clickable {
align-items: center;
cursor: pointer;
display: flex;
flex-direction: row;
gap: 4px;
max-width: 100%;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
}
.b661587589abb4a9-clickable:hover {
text-decoration: underline;
-webkit-text-decoration-color: var(--text-default);
text-decoration-color: var(--text-default);
}
.b661587589abb4a9-clickable:focus-within .b661587589abb4a9-text,
.b661587589abb4a9-clickable:hover .b661587589abb4a9-text {
max-width: calc(100% - 16px);
}
.b661587589abb4a9-clickable:focus-within .b661587589abb4a9-pencilIcon,
.b661587589abb4a9-clickable:hover .b661587589abb4a9-pencilIcon {
visibility: visible;
}
.b661587589abb4a9-text {
max-width: 100%;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
}
.b661587589abb4a9-pencilIcon {
color: var(--text-subtle);
flex-shrink: 0;
}
.b661587589abb4a9-pencilIcon.b661587589abb4a9-hidden {
visibility: hidden;
}
._0f0745937100f096-button {
color: var(--icon-subtle);
cursor: pointer;
height: 16px;
opacity: 0;
transition: color 50ms ease-in;
width: 16px;
}
._0f0745937100f096-button:focus-visible,
._0f0745937100f096-button:hover {
color: var(--icon-strong);
transition: color 0.15s ease-out;
}
._0f0745937100f096-button._0f0745937100f096-visible,
._0f0745937100f096-button:focus-visible {
opacity: 1;
}
.ebf1835e27a0554e-linkIcon {
display: inline-block;
}
.ee71ee16cc02184d-roleIcon {
display: inline-block;
object-fit: contain;
overflow: hidden;
}
.ee71ee16cc02184d-roleIcon:before {
background-color: var(--background-mod-subtle);
border-radius: 50%;
content: "";
display: block;
height: 100%;
width: 100%;
}
.ee71ee16cc02184d-clickable {
cursor: pointer;
}
.dfa8b6b94cddb191-pill {
border: 1px solid var(--user-profile-border);
border-radius: var(--radius-sm);
}
.dfa8b6b94cddb191-role {
align-items: center;
box-sizing: border-box;
display: flex;
font-size: 12px;
font-weight: var(--font-weight-medium);
height: 24px;
padding: 4px;
}
.dfa8b6b94cddb191-role > :first-child {
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
.dfa8b6b94cddb191-roleFlowerStar {
margin: 0 4px;
}
.dfa8b6b94cddb191-roleDot {
font-size: 1.34em;
margin: 0;
}
.dfa8b6b94cddb191-roleRemoveButtonCanRemove {
cursor: pointer;
}
.dfa8b6b94cddb191-roleRemoveButton {
position: relative;
}
.dfa8b6b94cddb191-roleIcon {
-webkit-margin-end: 4px;
margin-inline-end: 4px;
vertical-align: middle;
}
.dfa8b6b94cddb191-roleName {
-webkit-margin-end: 2px;
margin-inline-end: 2px;
overflow: hidden;
}
.dfa8b6b94cddb191-roleRemoveIcon {
display: none;
height: 10px;
inset-inline-start: 50%;
margin-block: -5px 0;
margin-inline: -5px 0;
position: absolute;
top: 50%;
width: 10px;
}
.dfa8b6b94cddb191-role:focus .dfa8b6b94cddb191-roleRemoveIcon,
.dfa8b6b94cddb191-role:hover .dfa8b6b94cddb191-roleRemoveIcon,
.dfa8b6b94cddb191-roleRemoveIconFocused .dfa8b6b94cddb191-roleRemoveIcon {
display: block;
}
.dfa8b6b94cddb191-role:focus .dfa8b6b94cddb191-roleVerifiedIcon,
.dfa8b6b94cddb191-role:hover .dfa8b6b94cddb191-roleVerifiedIcon,
.dfa8b6b94cddb191-roleRemoveIconFocused .dfa8b6b94cddb191-roleVerifiedIcon {
display: none;
}
.dfa8b6b94cddb191-roleCircle {
margin: 0;
}
.enable-forced-colors .dfa8b6b94cddb191-role {
border: 1px solid CanvasText;
}
.enable-forced-colors .dfa8b6b94cddb191-roleRemoveIcon {
background-color: ButtonFace;
border-radius: 100%;
color: ButtonText;
padding: 2px;
}
.enable-forced-colors .dfa8b6b94cddb191-roleRemoveIcon path {
fill: ButtonText !important;
}
._50e22d8b0c6ff6cb-container {
background-color: var(--modal-background);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
padding: 8px;
width: 250px;
}
._50e22d8b0c6ff6cb-popoutRoleDot {
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
._50e22d8b0c6ff6cb-popoutRoleCircle {
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
._7d7f78b99d0a7581-button {
align-items: center;
border: 1px solid var(--user-profile-border);
border-radius: var(--radius-sm);
box-sizing: border-box;
color: var(--interactive-text-default);
cursor: pointer;
display: flex;
gap: 4px;
height: 24px;
max-height: 24px;
min-height: 24px;
padding: 4px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
._7d7f78b99d0a7581-button:hover {
background-color: var(--user-profile-background-hover);
}
.fccfdf3cfff21921-root {
color: var(--text-default);
display: flex;
flex-wrap: wrap;
gap: 4px;
position: relative;
}
.fccfdf3cfff21921-pill {
border: 1px solid var(--user-profile-border);
border-radius: var(--radius-sm);
}
.fccfdf3cfff21921-expandButton {
align-items: center;
cursor: pointer;
padding: 3px 7px;
}
.fccfdf3cfff21921-expandButton:hover {
background-color: var(--user-profile-background-hover);
}
.fccfdf3cfff21921-collapseButton {
align-items: center;
box-sizing: border-box;
cursor: pointer;
display: flex;
height: 24px;
padding: 3px 5px;
}
.fccfdf3cfff21921-collapseButton:hover {
background-color: var(--user-profile-background-hover);
}
._530ce51b6bf15868-container {
align-items: center;
display: flex;
}
._530ce51b6bf15868-mutuals {
-moz-column-gap: 6px;
column-gap: 6px;
flex-wrap: wrap;
row-gap: 2px;
}
._530ce51b6bf15868-mutuals,
._530ce51b6bf15868-section {
align-items: center;
display: flex;
flex-direction: row;
}
._530ce51b6bf15868-section {
cursor: pointer;
gap: 4px;
}
._530ce51b6bf15868-section:focus-visible ._530ce51b6bf15868-text,
._530ce51b6bf15868-section:hover ._530ce51b6bf15868-text {
text-decoration: underline;
}
._530ce51b6bf15868-spacer {
background-color: var(--interactive-text-default);
border-radius: var(--radius-round);
height: 4px;
width: 4px;
}
.bc38cddea75da082-buttons {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.bc38cddea75da082-buttons:empty {
display: none;
}
._10737e29b0802a4f-container {
background-color: var(--background-mod-normal);
border-start-end-radius: var(--radius-sm);
border-start-start-radius: var(--radius-sm);
box-shadow: var(--shadow-low);
display: flex;
flex-direction: column;
height: 60px;
justify-content: center;
overflow: hidden;
position: relative;
width: 252px;
-webkit-padding-before: 6px;
padding-block-start: 6px;
-webkit-padding-end: 0;
padding-inline-end: 0;
-webkit-padding-after: 6px;
padding-block-end: 6px;
-webkit-padding-start: 16px;
padding-inline-start: 16px;
}
._10737e29b0802a4f-container:before {
background: #c6cdf4;
content: "";
filter: blur(40px);
height: 170px;
inset-block-start: -190px;
inset-inline-start: 50%;
opacity: 0.5;
pointer-events: none;
position: absolute;
transform: translateX(-50%);
width: 221px;
}
._10737e29b0802a4f-closeButton {
inset-inline-end: 6px;
position: absolute;
top: 6px;
}
._10737e29b0802a4f-subtitleContainer {
align-items: center;
display: flex;
flex-direction: row;
padding-top: 4px;
}
._10737e29b0802a4f-currentUserAvatar {
margin-inline: -4px;
-webkit-margin-end: 4px;
border: 2px solid var(--background-mod-normal);
margin-inline-end: 4px;
}
.c37c25c6adb61ce2-popoutMenu {
width: 268px;
}
._7970d1797fecf47f-container {
position: relative;
}
._7970d1797fecf47f-avatar,
._7970d1797fecf47f-avatarIconContainer {
align-items: center;
display: flex;
justify-content: center;
}
._7970d1797fecf47f-avatarIconContainer {
background-color: var(--background-secondary-alt);
border-radius: var(--radius-round);
bottom: -8px;
inset-inline-end: -8px;
overflow: hidden;
padding: var(--space-4);
position: absolute;
}
._207b4ebdb5b886cc-preview {
height: 100%;
width: 100%;
filter: blur(5px);
object-fit: contain;
object-position: top;
opacity: 0.3;
}
._207b4ebdb5b886cc-container,
._207b4ebdb5b886cc-preview {
position: relative;
}
._207b4ebdb5b886cc-headerContainer {
gap: var(--space-8);
}
._207b4ebdb5b886cc-body,
._207b4ebdb5b886cc-headerContainer {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
}
._207b4ebdb5b886cc-body {
gap: var(--space-16);
inset-inline-start: 50%;
position: absolute;
text-align: center;
top: 50%;
transform: translate(-50%, -50%);
width: 80%;
}
.a35754f6ea2b3f61-toastContainer {
border-radius: 32px;
box-shadow: var(--shadow-high);
height: 40px;
inset-inline: 0;
margin: 0 auto;
position: absolute;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.a35754f6ea2b3f61-toastPadding {
padding: 10px 16px;
}
.a35754f6ea2b3f61-toastIcon {
height: 20px;
width: 20px;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
.a35754f6ea2b3f61-successToast {
display: flex;
gap: 40px;
}
.beaa9339d3ffa74d-subtext {
align-items: center;
display: flex;
gap: 4px;
}
.bfd1837c1ebb219d-header {
margin-bottom: 4px;
}
.bfd1837c1ebb219d-list {
gap: 2px;
}
.bfd1837c1ebb219d-list,
.bfd1837c1ebb219d-row {
display: flex;
}
.bfd1837c1ebb219d-row {
align-items: center;
gap: 4px;
}
._2c2b3eb1e78614cf-applicationIcon {
height: 1.33em;
margin-inline: 2px 4px;
vertical-align: text-bottom;
width: auto;
}
._2c2b3eb1e78614cf-applicationNameWrapper {
display: inline-block;
}
._9f71b6f7bd6d1b40-channelHeader {
background-color: var(--background-mod-muted);
border-radius: var(--radius-md);
gap: var(--space-12);
margin-top: 12px;
padding: 12px 16px;
}
._9f71b6f7bd6d1b40-header {
align-items: center;
display: flex;
flex-direction: row;
gap: 4px;
}
._9f71b6f7bd6d1b40-profile {
gap: var(--space-8);
padding: 12px;
}
._9f71b6f7bd6d1b40-icon {
color: var(--text-default);
flex-shrink: 0;
}
._5997d01a3565bdaa-upsellContainer {
border-radius: var(--radius-sm);
}
._5997d01a3565bdaa-upsellContent {
background: var(--user-profile-overlay-background);
border-radius: inherit;
position: relative;
}
._5997d01a3565bdaa-upsellContent:after,
._5997d01a3565bdaa-upsellContent:before {
border: 2px solid transparent;
border-radius: inherit;
box-sizing: border-box;
content: "";
height: 100%;
inset-inline-start: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
}
._5997d01a3565bdaa-upsellContent:before {
border-color: var(--guild-boosting-purple);
}
._5997d01a3565bdaa-upsellCloseIconWrapper {
display: flex;
justify-content: center;
}
._5997d01a3565bdaa-upsellDefaultContent {
padding: 12px;
}
._5997d01a3565bdaa-upsellHeader {
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
._5997d01a3565bdaa-upsellButtons,
._5997d01a3565bdaa-upsellHeader {
display: flex;
flex-direction: row;
}
._5997d01a3565bdaa-upsellButtons {
flex-wrap: wrap;
gap: 8px;
}
._5997d01a3565bdaa-upsellButtonWrapper {
flex: 1;
}
.user-profile-modal-v2 ._5997d01a3565bdaa-upsellButtonWrapper {
flex: unset;
}
._5997d01a3565bdaa-upsellButtons ._5997d01a3565bdaa-matchManaColors {
background: var(--control-secondary-background-default);
}
._5997d01a3565bdaa-upsellButtons ._5997d01a3565bdaa-matchManaColors:hover {
background: var(--control-secondary-background-hover);
}
._5997d01a3565bdaa-upsellButtons ._5997d01a3565bdaa-matchManaColors:active {
background: var(--control-secondary-background-active);
}
._5997d01a3565bdaa-upsellRowContent {
align-items: center;
border-radius: inherit;
display: flex;
flex-direction: row;
justify-content: space-between;
padding-block: 12px;
padding-inline: 16px 11px;
position: relative;
}
._5997d01a3565bdaa-upsellRowContent:after,
._5997d01a3565bdaa-upsellRowContent:before {
border: 2px solid transparent;
border-radius: inherit;
box-sizing: border-box;
content: "";
height: 100%;
inset-inline-start: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
}
._5997d01a3565bdaa-upsellRowContent:before {
border-color: var(--guild-boosting-purple);
}
._5997d01a3565bdaa-upsellContent:after,
._5997d01a3565bdaa-upsellRowContent:after {
border-color: var(--guild-boosting-blue);
-webkit-mask: linear-gradient(0deg, #000, transparent);
mask: linear-gradient(0deg, #000, transparent);
}
._5997d01a3565bdaa-upsellRowRight {
align-items: center;
display: flex;
gap: 8px;
}
._5997d01a3565bdaa-upsellCloseIcon {
color: var(--interactive-text-default);
cursor: pointer;
}
._5997d01a3565bdaa-upsellCloseIcon:hover {
color: var(--interactive-text-hover);
}
._5997d01a3565bdaa-upsellCloseIcon:active {
color: var(--interactive-text-active);
}
._43a4bee62f79b268-container {
border-radius: var(--radius-sm);
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 8px;
overflow: hidden;
padding: 10px 12px;
}
._43a4bee62f79b268-buttonContainer {
align-items: center;
display: flex;
gap: 8px;
}
._43a4bee62f79b268-gameIcon {
vertical-align: bottom;
}
._581dd2288501a0d4-container {
align-items: center;
display: flex;
flex-direction: row;
gap: var(--space-8);
padding: var(--space-16);
}
._9dfff3600436b3c3-container {
cursor: pointer;
display: grid;
gap: var(--space-4);
grid-template-columns: 7fr 3fr;
}
._9dfff3600436b3c3-container:hover {
background: var(--user-profile-overlay-background-hover);
}
._9dfff3600436b3c3-content {
box-sizing: border-box;
min-width: 0;
}
._9dfff3600436b3c3-applicationIcon {
border-radius: 2px;
}
._9dfff3600436b3c3-rankImage {
display: inline-block;
height: 1lh;
vertical-align: bottom;
width: 1lh;
}
._9dfff3600436b3c3-textContent {
padding-block: 2px;
}
._9dfff3600436b3c3-featuredCharacterImageContainer {
-webkit-mask: linear-gradient(
90deg,
transparent 0,
rgba(0, 0, 0, 0.013) 4.7%,
rgba(0, 0, 0, 0.049) 9.2%,
rgba(0, 0, 0, 0.104) 13.6%,
rgba(0, 0, 0, 0.175) 18%,
rgba(0, 0, 0, 0.259) 22.6%,
rgba(0, 0, 0, 0.352) 27.4%,
rgba(0, 0, 0, 0.45) 32.6%,
rgba(0, 0, 0, 0.55) 38.3%,
rgba(0, 0, 0, 0.648) 44.5%,
rgba(0, 0, 0, 0.741) 51.4%,
rgba(0, 0, 0, 0.825) 59.1%,
rgba(0, 0, 0, 0.896) 67.7%,
rgba(0, 0, 0, 0.951) 77.3%,
rgba(0, 0, 0, 0.987) 88%,
#000
);
mask: linear-gradient(
90deg,
transparent 0,
rgba(0, 0, 0, 0.013) 4.7%,
rgba(0, 0, 0, 0.049) 9.2%,
rgba(0, 0, 0, 0.104) 13.6%,
rgba(0, 0, 0, 0.175) 18%,
rgba(0, 0, 0, 0.259) 22.6%,
rgba(0, 0, 0, 0.352) 27.4%,
rgba(0, 0, 0, 0.45) 32.6%,
rgba(0, 0, 0, 0.55) 38.3%,
rgba(0, 0, 0, 0.648) 44.5%,
rgba(0, 0, 0, 0.741) 51.4%,
rgba(0, 0, 0, 0.825) 59.1%,
rgba(0, 0, 0, 0.896) 67.7%,
rgba(0, 0, 0, 0.951) 77.3%,
rgba(0, 0, 0, 0.987) 88%,
#000
);
position: relative;
}
._9dfff3600436b3c3-featuredCharacterImage {
position: absolute;
}
.c2a7636633222ffa-breadcrumb {
cursor: pointer;
}
.c2a7636633222ffa-breadcrumb:hover .c2a7636633222ffa-innerContainer {
background: var(--user-profile-overlay-background-hover);
}
.c2a7636633222ffa-innerContainer {
align-items: center;
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
display: flex;
flex-direction: row;
height: 24px;
justify-content: space-between;
padding: 8px;
}
.user-profile-sidebar .c2a7636633222ffa-innerContainer {
padding: 12px;
}
.c2a7636633222ffa-icons {
align-items: center;
display: flex;
flex-direction: row;
gap: 4px;
}
.c2a7636633222ffa-icon {
height: 24px;
position: relative;
width: 24px;
}
.c2a7636633222ffa-icon,
.c2a7636633222ffa-icon img {
border-radius: var(--radius-xs);
}
.c2a7636633222ffa-icon img {
display: block;
height: auto;
max-height: 100%;
max-width: 100%;
width: auto;
}
.c2a7636633222ffa-displayCount {
opacity: 0.5;
}
.c2a7636633222ffa-displayCountText {
align-items: center;
background: rgba(0, 0, 0, 0.6);
border-radius: var(--radius-xs);
display: flex;
height: 24px;
inset-inline-start: 50%;
justify-content: center;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 24px;
}
.c2a7636633222ffa-displayCountTextColor {
color: var(--neutral-9);
}
._6d1908c48c1f2850-card {
background: var(--scoped-control-background-secondary-default, hsla(240, 4%, 61%, 0.08));
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04);
box-sizing: border-box;
cursor: pointer;
flex-shrink: 0;
height: 87px;
overflow: hidden;
position: relative;
width: 65px;
}
._6d1908c48c1f2850-card:focus-visible,
._6d1908c48c1f2850-card:hover {
background: var(--scoped-control-background-secondary-hover, hsla(240, 4%, 61%, 0.16));
}
._6d1908c48c1f2850-cardSmall {
height: 73px;
width: 55px;
}
._6d1908c48c1f2850-cardSingle {
height: 80px;
width: 60px;
}
._6d1908c48c1f2850-cardPreview,
._6d1908c48c1f2850-cardPreviewNoScale {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
width: 100%;
}
._6d1908c48c1f2850-cardPreview > div {
height: 136px;
transform: scale(0.613);
width: 106px;
}
._6d1908c48c1f2850-cardPreview > ._6d1908c48c1f2850-bundlePreview {
transform: scale(0.42);
-webkit-margin-start: -19px;
margin-inline-start: -19px;
}
._6d1908c48c1f2850-cardPreviewNoScale > div {
height: 100%;
width: 100%;
}
._6d1908c48c1f2850-moreOverlay {
align-items: center;
background: rgba(0, 0, 0, 0.5);
display: flex;
inset: 0;
justify-content: center;
position: absolute;
z-index: 1;
}
._6d1908c48c1f2850-card:focus-visible ._6d1908c48c1f2850-moreOverlay,
._6d1908c48c1f2850-moreOverlay ._6d1908c48c1f2850-card:hover {
background: rgba(0, 0, 0, 0.6);
}
._6d1908c48c1f2850-wrapperContainer {
margin-top: 8px;
position: relative;
}
._6d1908c48c1f2850-contextContainer {
background-color: rgba(0, 0, 0, 0.5);
border-radius: 12px;
color: var(--interactive-text-active);
height: 14px;
inset-inline-end: -2px;
padding: 2px;
position: absolute;
top: -4px;
width: 14px;
z-index: 2;
}
._6d1908c48c1f2850-contextContainer,
._6d1908c48c1f2850-contextIcon {
align-items: center;
display: flex;
justify-content: center;
}
._6d1908c48c1f2850-contextIcon {
color: var(--white);
}
._6d1908c48c1f2850-fireIcon {
height: 12px;
width: 12px;
}
._6d1908c48c1f2850-heartIcon {
height: 10px;
width: 10px;
}
._46c9ea21482a065d-card {
border-radius: none;
display: flex;
height: 100%;
width: 100%;
}
._46c9ea21482a065d-cardBackgroundImage {
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
top: 0;
transform: scale(105%);
}
._46c9ea21482a065d-cardBackgroundImage,
._46c9ea21482a065d-cardImage {
inset-inline: 0;
bottom: 0;
height: 100%;
position: absolute;
width: 100%;
}
._46c9ea21482a065d-cardImage {
object-fit: cover;
object-position: center;
top: 4px;
}
._4af0045e795b245a-singleItemContainer {
align-items: center;
display: flex;
gap: 8px;
}
._4af0045e795b245a-singleItemInfo {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
}
._4af0045e795b245a-singleItemName {
cursor: pointer;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
._4af0045e795b245a-singleItemName:focus-visible,
._4af0045e795b245a-singleItemName:hover {
text-decoration: underline;
-webkit-text-decoration-color: var(--text-default);
text-decoration-color: var(--text-default);
}
._06b03796d78ade1c-container {
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
}
._06b03796d78ade1c-header {
align-items: center;
display: flex;
justify-content: space-between;
}
._06b03796d78ade1c-cardsContainer {
display: flex;
gap: 8px;
}
._57082a8c02a68b6e-roleDot {
margin-inline: -2px 2px;
}
._74bfadb8d2c6b83f-wrapper {
align-items: center;
display: flex;
margin-top: 4px;
}
._74bfadb8d2c6b83f-icon {
display: block;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
._74bfadb8d2c6b83f-errorIcon {
color: var(--status-danger);
}
@value maxModalWidth from "./MarkdownModal.module.css";
._1689b6e8323d95c2-video {
border-radius: 3px;
}
@media (max-width: 490px) {
._1689b6e8323d95c2-video {
width: auto !important;
}
}
._1689b6e8323d95c2-container {
padding-bottom: 20px;
}
._1689b6e8323d95c2-container p > img,
._1689b6e8323d95c2-image {
border-radius: 5px;
}
._1689b6e8323d95c2-title {
font-size: 16px;
font-weight: 700;
line-height: 20px;
text-transform: uppercase;
}
._1689b6e8323d95c2-lead {
border-radius: 5px;
margin-bottom: 20px;
}
._1689b6e8323d95c2-added,
._1689b6e8323d95c2-fixed,
._1689b6e8323d95c2-improved,
._1689b6e8323d95c2-progress {
align-items: center;
display: flex;
margin-top: 40px;
}
._1689b6e8323d95c2-added._1689b6e8323d95c2-marginTop,
._1689b6e8323d95c2-fixed._1689b6e8323d95c2-marginTop,
._1689b6e8323d95c2-improved._1689b6e8323d95c2-marginTop,
._1689b6e8323d95c2-progress._1689b6e8323d95c2-marginTop {
margin-top: 20px;
}
._1689b6e8323d95c2-added:after,
._1689b6e8323d95c2-fixed:after,
._1689b6e8323d95c2-improved:after,
._1689b6e8323d95c2-progress:after {
content: "";
flex: 1 1 auto;
height: 1px;
margin-left: 4px;
opacity: 0.6;
}
._1689b6e8323d95c2-added,
h3._1689b6e8323d95c2-added {
color: var(--text-feedback-positive);
}
._1689b6e8323d95c2-added:after,
h3._1689b6e8323d95c2-added:after {
background-color: var(--text-feedback-positive);
}
._1689b6e8323d95c2-fixed,
h3._1689b6e8323d95c2-fixed {
color: var(--text-feedback-critical);
}
._1689b6e8323d95c2-fixed:after,
h3._1689b6e8323d95c2-fixed:after {
background-color: var(--text-feedback-critical);
}
._1689b6e8323d95c2-progress,
h3._1689b6e8323d95c2-progress {
color: var(--text-feedback-warning);
}
._1689b6e8323d95c2-progress:after,
h3._1689b6e8323d95c2-progress:after {
background-color: var(--text-feedback-warning);
}
._1689b6e8323d95c2-improved,
h3._1689b6e8323d95c2-improved {
color: var(--text-brand);
}
._1689b6e8323d95c2-improved:after,
h3._1689b6e8323d95c2-improved:after {
background-color: var(--text-brand);
}
._1689b6e8323d95c2-footer {
display: flex;
}
._1689b6e8323d95c2-socialLink {
margin-right: 16px;
}
._1689b6e8323d95c2-premiumBanner {
align-items: center;
background-image: linear-gradient(to left, var(--premium-tier-1-purple), var(--premium-tier-1-blue));
border-radius: 5px;
color: var(--white);
display: flex;
font-size: 16px;
line-height: 18px;
padding: 16px;
}
._1689b6e8323d95c2-premiumBanner ._1689b6e8323d95c2-premiumIcon {
flex-shrink: 0;
height: 36px;
margin-right: 16px;
width: 36px;
}
.theme-dark ._1689b6e8323d95c2-date {
color: var(--primary-300);
}
.theme-dark ._1689b6e8323d95c2-video {
box-shadow: 0 2px 10px 0 hsl(var(--black-hsl) / 0.2);
}
.theme-dark ._1689b6e8323d95c2-socialLink {
color: var(--primary-300);
}
.theme-light ._1689b6e8323d95c2-date {
color: var(--primary-400);
}
.theme-light ._1689b6e8323d95c2-video {
box-shadow: 0 2px 10px 0 hsl(var(--black-hsl) / 0.1);
}
.theme-light ._1689b6e8323d95c2-socialLink {
color: var(--primary-500);
}
@use postcss-pxtorem;
._5a366c1c081b8f5c-gameIcon {
-webkit-margin-end: 4px;
height: 1rem;
margin-inline-end: 4px;
vertical-align: text-top;
}
._5a366c1c081b8f5c-gameMessageTooltip {
max-width: unset;
}
._5a366c1c081b8f5c-gameMessageTooltipContent {
align-items: center;
display: flex;
padding: 16px;
}
._5a366c1c081b8f5c-textContainer {
align-items: flex-start;
display: flex;
flex-direction: column;
-webkit-margin-start: 8px;
margin-inline-start: 8px;
width: 240px;
}
._5a366c1c081b8f5c-timestamp {
margin-bottom: 4px;
}
._86331cbd99f88226-badge {
display: inline-flex;
object-fit: contain;
overflow: hidden;
-webkit-margin-start: 0.25rem;
align-items: center;
background-color: var(--background-secondary-alt);
border-radius: 12px;
color: var(--interactive-text-active);
cursor: pointer;
flex-direction: row;
margin-inline-start: 0.25rem;
padding-block: 2px;
padding-inline: 4px 8px;
position: relative;
text-indent: 0;
top: 1px;
vertical-align: top;
}
._86331cbd99f88226-badge:hover {
color: var(--interactive-text-hover);
}
._86331cbd99f88226-badgeVerifiedIcon {
height: 16px;
width: 16px;
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
._86331cbd99f88226-roleName {
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.theme-light ._86331cbd99f88226-badge {
color: var(--channels-default);
}
.theme-light ._86331cbd99f88226-badge:hover {
color: var(--interactive-text-hover);
}
._86331cbd99f88226-popout {
background-color: var(--background-surface-high);
border-radius: 4px;
box-shadow: var(--shadow-border), var(--shadow-high);
overflow: hidden;
}
._86331cbd99f88226-popoutChecks {
padding: 12px;
}
._86331cbd99f88226-popoutChecksGroup:not(:last-of-type) {
margin-bottom: 12px;
padding-bottom: 12px;
}
._86331cbd99f88226-popoutCheckGroupName {
align-items: center;
display: flex;
}
._86331cbd99f88226-popoutCheckGroupPlatformIcon {
-webkit-margin-end: 8px;
height: 20px;
margin-inline-end: 8px;
width: 20px;
}
._86331cbd99f88226-popoutCheck {
align-items: center;
display: flex;
margin-top: 8px;
-webkit-margin-start: 28px;
margin-inline-start: 28px;
-webkit-padding-end: 20px;
padding-inline-end: 20px;
}
._86331cbd99f88226-popoutCheckIcon {
color: var(--text-feedback-positive);
height: 18px;
width: 18px;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
._86331cbd99f88226-popoutHeaderContainer {
background-color: var(--background-base-lowest);
padding: 10px;
}
._86331cbd99f88226-popoutHeaderText strong {
color: var(--text-strong);
}
._86331cbd99f88226-buttonContainer {
padding: 8px;
}
._86331cbd99f88226-getRolesButton {
margin-bottom: 8px;
width: 100%;
}
._86331cbd99f88226-viewConnectionsButton {
width: 100%;
}
._86331cbd99f88226-botTag {
-webkit-margin-start: 8px;
margin-inline-start: 8px;
margin-top: -1px;
}
.c00127b63a9cc5d9-messagePopoutContent {
max-width: calc(var(--custom-message-helpers-popout-container-width) * 1.25);
min-width: var(--custom-message-helpers-popout-container-width);
width: auto;
}
.c00127b63a9cc5d9-popoutContainer {
padding: var(--custom-message-helpers-popout-padding-width);
}
.c00127b63a9cc5d9-mainContent {
align-items: start;
display: flex;
flex-direction: row;
}
.c00127b63a9cc5d9-iconContainer {
-webkit-margin-end: var(--custom-message-helpers-popout-padding-width);
color: var(--text-feedback-positive);
margin-inline-end: var(--custom-message-helpers-popout-padding-width);
width: 40px;
}
.c00127b63a9cc5d9-header {
margin-bottom: 4px;
}
.c00127b63a9cc5d9-ctaButton {
margin: 16px auto 0;
}
.c00127b63a9cc5d9-boosterBadge {
-webkit-margin-end: 3px;
margin-inline-end: 3px;
}
.f80704ca4ba27cf7-newMemberBadge {
display: inline-block;
object-fit: contain;
overflow: hidden;
-webkit-margin-start: 0.25rem;
color: var(--text-feedback-positive);
cursor: pointer;
height: calc(1rem + 4px);
margin-inline-start: 0.25rem;
position: relative;
text-indent: 0;
top: 1px;
vertical-align: top;
width: calc(1rem + 4px);
}
._18061034404ab87d-potionBadge {
align-items: center;
background: var(--control-primary-background-default);
border-radius: 8px;
color: var(--white);
cursor: pointer;
display: flex;
gap: 3px;
height: calc(1rem + 2px);
justify-content: center;
object-fit: contain;
overflow: hidden;
padding-inline: 6px 7px;
position: relative;
text-indent: 0;
text-transform: uppercase;
top: 1px;
vertical-align: top;
}
._6ba43da0a44cd9dd-badge {
color: var(--interactive-text-default);
cursor: pointer;
display: inline-block;
height: 1rem;
object-fit: contain;
overflow: hidden;
position: relative;
text-indent: 0;
top: 0.1875rem;
vertical-align: top;
width: 1rem;
}
._8641fcde78605282-popoutContainer {
padding: var(--custom-message-helpers-popout-padding-width);
}
._8641fcde78605282-mainContent {
align-items: start;
display: flex;
flex-direction: row;
margin-bottom: 16px;
}
._8641fcde78605282-roleIconContainer {
-webkit-margin-end: var(--custom-message-helpers-popout-padding-width);
margin-inline-end: var(--custom-message-helpers-popout-padding-width);
width: 40px;
}
._8641fcde78605282-roleName {
margin-bottom: 4px;
}
._8641fcde78605282-truncatingText {
min-width: 0;
}
._8641fcde78605282-ctaButtonContent {
align-items: center;
display: flex;
justify-content: center;
}
._8641fcde78605282-boosterBadge {
-webkit-margin-end: 3px;
height: 14px;
margin-inline-end: 3px;
width: 14px;
}
._5126c0cd07f243a0-ephemeral {
background: var(--brand-05a);
position: relative;
}
._5126c0cd07f243a0-nitroMessage._5126c0cd07f243a0-nitroMessage {
background: linear-gradient(to right, hsl(var(--premium-tier-2-purple-for-gradients-hsl) / 0.08), hsl(var(--premium-tier-2-pink-for-gradients-hsl) / 0.08));
}
._5126c0cd07f243a0-nitroMessage._5126c0cd07f243a0-nitroMessage a {
color: var(--text-link);
}
._5126c0cd07f243a0-automodMessage {
background: var(--message-automod-background-default);
}
._5126c0cd07f243a0-potioned {
background: linear-gradient(to right, hsl(var(--premium-tier-2-purple-for-gradients-hsl) / 0.08), hsl(var(--premium-tier-2-pink-for-gradients-hsl) / 0.08));
position: relative;
}
._5126c0cd07f243a0-mentioned {
background: var(--message-mentioned-background-default);
position: relative;
}
._5126c0cd07f243a0-highlighted,
._5126c0cd07f243a0-replying {
background: var(--message-highlight-background-default);
position: relative;
}
._5126c0cd07f243a0-automodMessage:before,
._5126c0cd07f243a0-ephemeral:before,
._5126c0cd07f243a0-highlighted:before,
._5126c0cd07f243a0-mentioned:before,
._5126c0cd07f243a0-nitroMessage:before,
._5126c0cd07f243a0-potioned:before,
._5126c0cd07f243a0-replying:before {
bottom: 0;
content: "";
display: block;
inset-inline-start: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 2px;
}
._5126c0cd07f243a0-ephemeral:before {
background: var(--brand-500);
}
._5126c0cd07f243a0-nitroMessage:before {
background: var(--custom-premium-colors-premium-gradient-tier-2-tri-color-vertical);
}
._5126c0cd07f243a0-automodMessage:before {
background: var(--text-feedback-critical);
}
._5126c0cd07f243a0-potioned:before {
background: linear-gradient(to right, var(--premium-tier-2-purple-for-gradients) 2px, var(--premium-tier-2-purple-for-gradients), var(--premium-tier-2-pink-for-gradients));
transition: width 0.2s ease-out;
z-index: 1;
}
.full-motion ._5126c0cd07f243a0-message._5126c0cd07f243a0-potioned:not(._5126c0cd07f243a0-editing):not(._5126c0cd07f243a0-hasOpenPopouts):hover:before {
transition:
width 1.1s ease-in,
opacity 1.1s ease-in;
width: 105%;
}
.full-motion.confetti-mode ._5126c0cd07f243a0-message._5126c0cd07f243a0-potioned:before {
transition:
width 0.2s ease-in,
opacity 0.2s ease-in;
width: 105%;
}
._5126c0cd07f243a0-mentioned:before {
background: var(--icon-feedback-warning);
}
._5126c0cd07f243a0-highlighted:before {
background: var(--text-brand);
}
._5126c0cd07f243a0-replying:before {
background: var(--brand-500);
}
._5126c0cd07f243a0-messageListItem {
outline: none;
position: relative;
}
._5126c0cd07f243a0-message {
border-end-end-radius: var(--radius-xs);
border-start-end-radius: var(--radius-xs);
-webkit-padding-end: var(--space-xl) !important;
padding-inline-end: var(--space-xl) !important;
}
.theme-dark ._5126c0cd07f243a0-message._5126c0cd07f243a0-selected,
.theme-dark.mouse-mode.full-motion ._5126c0cd07f243a0-message:hover {
background: var(--message-background-hover);
}
.theme-light ._5126c0cd07f243a0-message._5126c0cd07f243a0-selected,
.theme-light.mouse-mode.full-motion ._5126c0cd07f243a0-message:hover {
background: var(--message-background-hover);
}
._5126c0cd07f243a0-message._5126c0cd07f243a0-mentioned._5126c0cd07f243a0-selected,
.mouse-mode.full-motion ._5126c0cd07f243a0-message._5126c0cd07f243a0-mentioned:hover {
background: var(--message-mentioned-background-hover);
}
._5126c0cd07f243a0-message._5126c0cd07f243a0-highlighted._5126c0cd07f243a0-selected,
.mouse-mode.full-motion ._5126c0cd07f243a0-message._5126c0cd07f243a0-highlighted:hover {
background: var(--message-highlight-background-hover);
}
._5126c0cd07f243a0-message._5126c0cd07f243a0-ephemeral._5126c0cd07f243a0-selected,
.mouse-mode.full-motion ._5126c0cd07f243a0-message._5126c0cd07f243a0-ephemeral:hover {
background: var(--brand-10a);
}
._5126c0cd07f243a0-message._5126c0cd07f243a0-nitroMessage._5126c0cd07f243a0-selected,
.mouse-mode.full-motion ._5126c0cd07f243a0-message._5126c0cd07f243a0-nitroMessage:hover {
background: linear-gradient(to right, hsl(var(--premium-tier-2-purple-for-gradients-hsl) / 0.2), hsl(var(--premium-tier-2-pink-for-gradients-hsl) / 0.2));
}
._5126c0cd07f243a0-message._5126c0cd07f243a0-automodMessage._5126c0cd07f243a0-selected,
.mouse-mode.full-motion ._5126c0cd07f243a0-message._5126c0cd07f243a0-automodMessage:hover {
background: var(--message-automod-background-hover);
}
._5126c0cd07f243a0-message._5126c0cd07f243a0-replying._5126c0cd07f243a0-selected,
.mouse-mode.full-motion ._5126c0cd07f243a0-message._5126c0cd07f243a0-replying:hover {
background: var(--brand-10a);
}
._5126c0cd07f243a0-quotedChatMessage {
position: relative;
}
._5126c0cd07f243a0-highlightContainer {
align-items: center;
display: flex;
margin-bottom: 4px;
}
._5126c0cd07f243a0-highlightIcon {
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
._5126c0cd07f243a0-jump {
background-color: var(--background-base-lowest);
border-radius: 3px;
box-sizing: border-box;
color: var(--text-default);
cursor: pointer;
display: none;
font-size: 12px;
font-weight: var(--font-weight-medium);
height: 24px;
line-height: 16px;
-webkit-margin-start: 6px;
inset-inline-end: 16px;
margin-inline-start: 6px;
padding: 4px;
position: absolute;
text-align: center;
top: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
z-index: 1;
}
._5126c0cd07f243a0-quotedChatMessage:hover ._5126c0cd07f243a0-jump {
display: block;
}
._5126c0cd07f243a0-jump:hover {
color: var(--interactive-text-hover);
}
._5126c0cd07f243a0-jump:active {
color: var(--interactive-text-active);
transform: translate3d(0, 1px, 0);
}
._5126c0cd07f243a0-buttons {
opacity: 0;
pointer-events: none;
}
._5126c0cd07f243a0-message._5126c0cd07f243a0-selected ._5126c0cd07f243a0-buttons,
.mouse-mode ._5126c0cd07f243a0-message:hover ._5126c0cd07f243a0-buttons {
opacity: 1;
}
._5126c0cd07f243a0-message._5126c0cd07f243a0-selected ._5126c0cd07f243a0-buttonsInner,
.mouse-mode ._5126c0cd07f243a0-message:hover ._5126c0cd07f243a0-buttonsInner {
pointer-events: auto;
}
._5126c0cd07f243a0-hideIfMessageNotFocused {
opacity: 0;
}
._5126c0cd07f243a0-message._5126c0cd07f243a0-selected ._5126c0cd07f243a0-hideIfMessageNotFocused,
.mouse-mode ._5126c0cd07f243a0-message:hover ._5126c0cd07f243a0-hideIfMessageNotFocused {
opacity: 1;
}
._5126c0cd07f243a0-cozyMessage._5126c0cd07f243a0-groupStart {
min-height: 2.75rem;
}
._5126c0cd07f243a0-systemMessage._5126c0cd07f243a0-groupStart {
min-height: 1.375rem;
}
._5126c0cd07f243a0-backgroundFlash {
flex: 0 0 auto;
}
._5126c0cd07f243a0-channelTextArea {
margin-top: 8px;
}
._5126c0cd07f243a0-divider {
margin-inline: 1rem 0.875rem;
}
._5126c0cd07f243a0-disableInteraction:after {
content: "";
display: block;
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
}
._5126c0cd07f243a0-groupStart {
margin-top: var(--custom-group-spacing-start);
}
.group-spacing-0 ._5126c0cd07f243a0-groupStart {
--custom-group-spacing-start: 0.0625rem;
}
.group-spacing-0 ._5126c0cd07f243a0-divider {
margin-bottom: -1px;
margin-top: 0;
}
.group-spacing-0 ._5126c0cd07f243a0-divider._5126c0cd07f243a0-hasContent {
margin-bottom: 1.5rem;
margin-top: 1.5rem;
}
.group-spacing-4 ._5126c0cd07f243a0-groupStart {
--custom-group-spacing-start: 0.3125rem;
}
.group-spacing-4 ._5126c0cd07f243a0-divider {
margin-bottom: 0;
margin-top: -1px;
}
.group-spacing-4 ._5126c0cd07f243a0-divider._5126c0cd07f243a0-beforeGroup {
margin-bottom: -1px;
margin-top: 0;
top: 0.125rem;
}
.group-spacing-4 ._5126c0cd07f243a0-divider._5126c0cd07f243a0-hasContent {
margin-bottom: 1.25rem;
margin-top: 1.5rem;
}
.group-spacing-8 ._5126c0cd07f243a0-groupStart {
--custom-group-spacing-start: 0.5625rem;
}
.group-spacing-8 ._5126c0cd07f243a0-divider {
margin-bottom: 2px;
margin-top: 2px;
}
.group-spacing-8 ._5126c0cd07f243a0-divider._5126c0cd07f243a0-beforeGroup {
margin-bottom: -1px;
margin-top: 0;
top: 0.25rem;
}
.group-spacing-8 ._5126c0cd07f243a0-divider._5126c0cd07f243a0-hasContent {
margin-bottom: 1rem;
margin-top: 1.5rem;
}
.group-spacing-16 ._5126c0cd07f243a0-groupStart {
--custom-group-spacing-start: 1.0625rem;
}
.group-spacing-16 ._5126c0cd07f243a0-divider {
margin-bottom: 4px;
margin-top: 4px;
}
.group-spacing-16 ._5126c0cd07f243a0-divider._5126c0cd07f243a0-beforeGroup {
margin-bottom: -1px;
margin-top: 0;
top: 0.5rem;
}
.group-spacing-16 ._5126c0cd07f243a0-divider._5126c0cd07f243a0-hasContent {
margin-bottom: 0.5rem;
margin-top: 1.5rem;
}
.group-spacing-24 ._5126c0cd07f243a0-groupStart {
--custom-group-spacing-start: 1.5625rem;
}
.group-spacing-24 ._5126c0cd07f243a0-divider {
margin-bottom: 4px;
margin-top: 4px;
}
.group-spacing-24 ._5126c0cd07f243a0-divider._5126c0cd07f243a0-beforeGroup {
margin-bottom: -1px;
margin-top: 0;
top: 0.75rem;
}
.group-spacing-24 ._5126c0cd07f243a0-divider._5126c0cd07f243a0-hasContent {
margin-bottom: 0;
margin-top: 1.5rem;
}
._5126c0cd07f243a0-backgroundFlash ._5126c0cd07f243a0-groupStart {
margin-top: 0 !important;
}
._5126c0cd07f243a0-interactionSending {
opacity: 0.5;
}
.enable-forced-colors ._5126c0cd07f243a0-automodMessage:before,
.enable-forced-colors ._5126c0cd07f243a0-ephemeral:before,
.enable-forced-colors ._5126c0cd07f243a0-highlighted:before,
.enable-forced-colors ._5126c0cd07f243a0-mentioned:before,
.enable-forced-colors ._5126c0cd07f243a0-replying:before {
forced-color-adjust: none;
width: 4px;
}
._5126c0cd07f243a0-mentioned .mention.interactive:hover {
text-decoration: underline;
}
._5126c0cd07f243a0-potioned:before {
background: linear-gradient(
to right,
var(--premium-tier-2-purple-for-gradients) 0,
var(--premium-tier-2-purple-for-gradients) 2px,
hsl(var(--premium-tier-2-purple-for-gradients-hsl) / 0.15) 2px,
hsl(var(--premium-tier-2-pink-for-gradients-hsl) / 0.15) 85%,
transparent 100%
);
transition:
width 0.2s ease-in,
opacity 0.2s ease-in;
width: 2px;
}
.de50c1a009e8ad67-container {
position: relative;
}
.de50c1a009e8ad67-blockUserInteraction {
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
cursor: default;
}
.ff168afdf2cda035-emojiIcon {
height: 20px;
width: 20px;
}
._0e5a27acb62d0ca5-icon {
display: inline-block;
height: 16px;
width: 16px;
-webkit-margin-end: 4px;
margin-inline-end: 4px;
margin-bottom: 2px;
vertical-align: bottom;
}
._6b8b81e9fe49add1-container {
display: flex;
flex-direction: row-reverse;
}
._6b8b81e9fe49add1-emojiContainer {
-webkit-margin-end: 16px;
margin-inline-end: 16px;
}
._6b8b81e9fe49add1-name {
margin-bottom: 2px;
}
._6b8b81e9fe49add1-linkedName:hover {
cursor: pointer;
text-decoration: underline;
}
._6b8b81e9fe49add1-channelNameContainer {
align-items: center;
display: flex;
}
._6b8b81e9fe49add1-infoContainer {
flex: 1;
}
._53d72ea328d66e5d-draftBadge {
color: var(--primary-860);
letter-spacing: 0.02em;
}
.ea81a9000bb649bd-draftBadgeContainer {
background-color: var(--background-base-lowest);
border-radius: 8px;
display: flex;
justify-content: center;
margin-top: -20px;
overflow: hidden;
padding: 2px;
position: relative;
z-index: 1;
}
.ea81a9000bb649bd-tierName {
font-family: var(--font-display);
margin-bottom: 16px;
text-align: start;
}
.ea81a9000bb649bd-tierImage {
border-radius: 50%;
height: var(--custom-guild-role-subscription-card-basic-info-tier-image-size);
object-fit: cover;
overflow: hidden;
width: var(--custom-guild-role-subscription-card-basic-info-tier-image-size);
}
.ea81a9000bb649bd-tierPrice {
color: var(--interactive-text-active);
font-size: 24px;
font-weight: var(--font-weight-semibold);
margin-bottom: 2px;
margin-top: 16px;
}
.ea81a9000bb649bd-tierPeriod,
.ea81a9000bb649bd-tierPrice {
font-family: var(--font-display);
}
.ea81a9000bb649bd-tierPeriod {
letter-spacing: 0.02em;
margin-bottom: 16px;
text-transform: uppercase;
}
@media (max-width: 485px) {
.ea81a9000bb649bd-tierName {
margin-bottom: 4px;
}
.ea81a9000bb649bd-tierImage {
height: var(--custom-guild-role-subscription-card-basic-info-tier-image-size) Mobile;
width: var(--custom-guild-role-subscription-card-basic-info-tier-image-size) Mobile;
}
}
.b27fdcc829aba67a-container {
align-items: center;
align-self: stretch;
display: flex;
flex-direction: row;
}
.b27fdcc829aba67a-tierTextInfoContainer {
align-items: flex-start;
flex: 1;
flex-direction: column;
-webkit-margin-start: 16px;
margin-inline-start: 16px;
}
.b27fdcc829aba67a-tierPriceContainer {
align-items: center;
display: flex;
flex-direction: row;
}
.b27fdcc829aba67a-tierPrice {
color: var(--text-default);
font-size: 16px;
height: 20px;
text-align: start;
}
.b27fdcc829aba67a-toggleButton {
color: var(--interactive-text-default);
height: 24px;
justify-content: flex-end;
width: 24px;
}
.e64651eead4ab80e-confirmationContainer {
margin-top: 56px;
}
.e64651eead4ab80e-confirmationHeader {
color: var(--text-default);
margin-bottom: 8px;
text-align: center;
}
.e64651eead4ab80e-confirmationHeader strong {
color: var(--text-strong);
}
.e64651eead4ab80e-confirmationSubtitle {
text-align: center;
}
.e64651eead4ab80e-actions {
display: flex;
flex-direction: column;
margin-top: 24px;
row-gap: 8px;
}
._24a953a793711e24-container {
background-color: var(--background-base-lower);
border-radius: 8px;
display: flex;
padding: 16px;
}
._24a953a793711e24-container:hover {
background-color: var(--background-base-lowest);
cursor: pointer;
}
._24a953a793711e24-emojiContainer {
-webkit-margin-end: 16px;
margin-inline-end: 16px;
}
._24a953a793711e24-name {
margin-bottom: 2px;
}
._24a953a793711e24-channelNameContainer {
align-items: center;
display: flex;
}
._24a953a793711e24-infoContainer {
flex: 1;
}
._24a953a793711e24-caret {
flex: 0 0 auto;
-webkit-margin-start: 16px;
color: var(--interactive-text-default);
margin-inline-start: 16px;
}
._4dd8e2a894da0af9-headerContainer {
height: 146px;
position: relative;
width: 100%;
}
._4dd8e2a894da0af9-headerEmpty {
height: 10px;
inset-inline-start: 0;
position: absolute;
top: 0;
}
._4dd8e2a894da0af9-headerEmpty + .breadcrumb,
._4dd8e2a894da0af9-headerEmpty + .paymentModalContent {
background-color: var(--modal-background);
border-start-end-radius: 4px;
border-start-start-radius: 4px;
}
._4dd8e2a894da0af9-headerEmpty ._4dd8e2a894da0af9-closeContainer {
top: 13px;
}
._4dd8e2a894da0af9-headerImage,
._4dd8e2a894da0af9-headerImageEmpty {
border-start-end-radius: var(--radius-md);
border-start-start-radius: var(--radius-md);
}
._4dd8e2a894da0af9-headerImage {
height: 100%;
object-fit: cover;
width: 100%;
}
._4dd8e2a894da0af9-headerImageEmpty {
background-color: var(--background-base-lower);
height: 100%;
width: 100%;
}
._4dd8e2a894da0af9-closeContainer {
align-items: center;
background-color: var(--opacity-black-84);
border-radius: 50%;
cursor: pointer;
display: flex;
height: 24px;
inset-inline-end: 16px;
justify-content: center;
position: absolute;
top: 16px;
width: 24px;
}
._4dd8e2a894da0af9-closeIcon {
color: var(--interactive-text-default);
height: 16px;
width: 16px;
}
._4dd8e2a894da0af9-tierImageContainer {
background-color: var(--background-base-low);
border-radius: 50%;
bottom: -48px;
height: 80px;
inset-inline-start: calc(50% - 48px);
padding: 8px;
position: absolute;
width: 80px;
z-index: 1;
}
._4dd8e2a894da0af9-tierImage {
border-radius: 50%;
height: 100%;
object-fit: cover;
width: 100%;
}
._4dd8e2a894da0af9-confirmationContainer {
margin-top: 56px;
}
._4dd8e2a894da0af9-confirmationHeader {
margin-bottom: 8px;
text-align: center;
}
._4dd8e2a894da0af9-confirmationHeader strong {
color: var(--text-strong);
}
._4dd8e2a894da0af9-confirmationSubtitle {
margin-bottom: 32px;
text-align: center;
}
._4dd8e2a894da0af9-confirmationSectionLabel {
font-family: var(--font-display);
letter-spacing: 0.02em;
margin-bottom: 8px;
text-transform: uppercase;
}
._4dd8e2a894da0af9-confirmationBenefits {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 20px;
}
._4dd8e2a894da0af9-confirmationButton {
margin: 32px auto 0;
}
._4dd8e2a894da0af9-emojiBenefitsRow {
background-color: var(--background-base-lower);
border-radius: 8px;
display: flex;
padding: 16px;
}
._4dd8e2a894da0af9-emojiImage {
-webkit-margin-end: 16px;
margin-inline-end: 16px;
}
._4dd8e2a894da0af9-emojiName {
margin-bottom: 2px;
}
._3efc4041416bf6dc-container {
border-radius: 8px;
flex: 1;
max-width: 320px;
overflow: hidden;
position: relative;
}
._3efc4041416bf6dc-cardContainerWithoutTopIndicator {
border-radius: 8px;
margin-top: 24px;
overflow: hidden;
}
._3efc4041416bf6dc-tierTrialIndicator {
background-color: var(--brand-500);
color: var(--white);
font-weight: var(--font-weight-medium);
padding-bottom: 4px;
padding-top: 4px;
}
._3efc4041416bf6dc-tierTrialIndicatorIcon {
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
._3efc4041416bf6dc-tierTopIndicator {
display: flex;
font-family: var(--font-display);
font-size: 12px;
justify-content: center;
line-height: 16px;
text-transform: uppercase;
}
._3efc4041416bf6dc-tierInfoContainer {
align-items: center;
display: flex;
flex-direction: column;
padding: 32px 16px 16px;
text-align: center;
}
.theme-light ._3efc4041416bf6dc-tierInfoContainer {
background-color: hsla(0, 0%, 100%, 0.5);
}
.theme-dark ._3efc4041416bf6dc-tierInfoContainer {
background-color: var(--interactive-background-hover);
}
._3efc4041416bf6dc-tierDescriptionTruncate {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
._3efc4041416bf6dc-subscriptionPerks {
background-color: var(--background-base-lower);
padding: 16px;
}
._3efc4041416bf6dc-roleMessagePreview {
background-color: var(--background-base-low);
border: 1px solid var(--border-subtle);
border-radius: 4px;
padding: 12px 0;
}
._3efc4041416bf6dc-roleMessagePreview:not(:last-child) {
margin-bottom: 24px;
}
._3efc4041416bf6dc-sectionHeader {
font-family: var(--font-display);
letter-spacing: 0.02em;
text-transform: uppercase;
}
._3efc4041416bf6dc-benefitsSection:not(:last-child) {
border-bottom: 1px solid var(--opacity-white-4);
margin-bottom: 16px;
padding-bottom: 16px;
}
._3efc4041416bf6dc-benefitsList {
display: flex;
flex-direction: column;
gap: 16px;
}
._3efc4041416bf6dc-emojiList {
display: grid;
gap: 9px 8px;
grid-template-columns: repeat(9, 1fr);
}
._3efc4041416bf6dc-emojiListEmoji {
object-fit: contain;
}
._3efc4041416bf6dc-divider {
background-color: hsla(0, 0%, 100%, 0.06);
height: 1px;
margin: 16px 0;
width: 100%;
}
@media (max-width: 485px) {
._3efc4041416bf6dc-container {
width: auto;
}
._3efc4041416bf6dc-cardContainerWithoutTopIndicator {
margin-top: 0;
}
._3efc4041416bf6dc-tierInfoContainer {
padding-top: 16px;
}
._3efc4041416bf6dc-subscriptionPerks {
background-color: var(--background-secondary-alt);
}
}
._3efc4041416bf6dc-helpMessage {
text-align: start;
}
._82222a56733eb223-giftButton {
--button-outline-brand-text: var(--brand-500);
}
._82222a56733eb223-innerGiftButton {
align-items: center;
display: flex;
}
._82222a56733eb223-buttonText {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._82222a56733eb223-giftIcon {
height: 16px;
min-height: 16px;
min-width: 16px;
width: 16px;
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
.fec5bfb64098f96b-container {
display: flex;
gap: 8px;
}
.fec5bfb64098f96b-verticalContainer {
align-items: flex-start;
display: flex;
flex-direction: column;
}
.fec5bfb64098f96b-horizontalContainer {
align-items: center;
display: flex;
flex-direction: row;
}
.fec5bfb64098f96b-section {
background-color: var(--background-base-low);
border: 1px solid var(--border-subtle);
border-radius: 4px;
display: grid;
gap: 8px;
grid-template-columns: 1fr;
margin: 16px 0;
padding: 16px;
}
.fec5bfb64098f96b-sectionDivider {
background-color: var(--border-subtle);
border: 0;
height: 1px;
width: 100%;
}
.fec5bfb64098f96b-labelSpacing {
margin-bottom: 8px;
margin-top: 8px;
}
.fec5bfb64098f96b-inputGroup {
gap: 8px;
}
.fec5bfb64098f96b-fieldset,
.fec5bfb64098f96b-inputGroup {
display: flex;
flex-direction: column;
}
.fec5bfb64098f96b-fieldset {
border: none;
gap: 16px;
padding: 0;
}
._5f877fa03f71090c-labelSpacing {
margin-bottom: 8px;
margin-top: 8px;
}
._5f877fa03f71090c-applyChangesButton {
margin-bottom: 32px;
margin-top: 8px;
}
._5f877fa03f71090c-markdown {
display: block;
line-height: 20px;
margin-bottom: 16px;
}
._5f877fa03f71090c-textarea {
height: 180px;
width: 100%;
}
@media (max-width: 485px) and (max-height: 450px) {
._5f877fa03f71090c-form {
display: block;
}
}
._5f877fa03f71090c-modal {
box-shadow: var(--legacy-elevation-border), var(--legacy-elevation-high);
margin: 0;
min-height: 180px;
overflow-x: hidden;
width: 440px;
}
._5f877fa03f71090c-scrollerContent {
padding: 0 16px 16px;
}
._5f877fa03f71090c-choosePaymentTypeModal {
align-items: center;
display: flex;
flex-direction: column;
width: 442px;
}
._5f877fa03f71090c-choosePaymentTypeContainer {
padding-bottom: 16px;
padding-top: 16px;
width: 408px;
}
._49fc18ba07c5025f-focusLock {
max-width: 100%;
min-height: 0;
}
._49fc18ba07c5025f-focusLock,
._49fc18ba07c5025f-root {
display: flex;
flex-direction: column;
}
._49fc18ba07c5025f-root {
background-color: var(--modal-background);
border: 1px solid var(--border-normal);
border-radius: var(--radius-md);
margin: 0 auto;
max-height: 100%;
pointer-events: all;
position: relative;
}
._49fc18ba07c5025f-root._49fc18ba07c5025f-root {
border-radius: var(--radius-md);
}
._49fc18ba07c5025f-small {
max-height: 720px;
min-height: 220px;
width: var(--modal-width-small);
}
._49fc18ba07c5025f-medium {
max-height: 800px;
width: var(--modal-width-medium);
}
._49fc18ba07c5025f-large,
._49fc18ba07c5025f-medium {
min-height: 400px;
}
._49fc18ba07c5025f-large {
max-width: 962px;
min-width: var(--modal-width-large);
}
@media screen and (max-height: 550px), screen and (max-width: 485px) {
._49fc18ba07c5025f-root {
max-width: 100%;
min-width: auto;
width: 100%;
}
._49fc18ba07c5025f-fullscreenOnMobile {
border: none !important;
border-radius: 0 !important;
inset: 0;
max-height: none;
overflow-y: auto;
position: absolute;
width: 100%;
}
._49fc18ba07c5025f-fullscreenOnMobile ._49fc18ba07c5025f-footer,
._49fc18ba07c5025f-fullscreenOnMobile ._49fc18ba07c5025f-header {
border-radius: 0;
}
}
._49fc18ba07c5025f-footer,
._49fc18ba07c5025f-header {
flex: 0 0 auto;
overflow-x: hidden;
padding: var(--modal-vertical-padding) var(--modal-horizontal-padding);
position: relative;
z-index: 1;
}
._49fc18ba07c5025f-header {
border-radius: var(--radius-md) var(--radius-md) 0 0;
transition: box-shadow 0.1s ease-out;
word-wrap: break-word;
overflow: hidden;
padding-bottom: 0;
}
._49fc18ba07c5025f-footer {
background-color: var(--modal-footer-background);
border-radius: 0 0 var(--radius-md) var(--radius-md);
padding-top: var(--space-16);
}
._49fc18ba07c5025f-content {
overflow-x: hidden;
padding-inline: var(--modal-horizontal-padding);
padding-top: var(--space-8);
position: relative;
}
._49fc18ba07c5025f-close {
border-radius: 3px;
box-sizing: content-box;
color: var(--icon-strong);
cursor: pointer;
height: 24px;
opacity: 0.5;
padding: 4px;
transition: opacity 0.2s ease-in-out;
}
._49fc18ba07c5025f-close:hover {
color: var(--interactive-text-hover);
opacity: 1;
}
._49fc18ba07c5025f-closeWithCircleBackground {
align-items: center;
background-color: var(--opacity-black-84);
border-radius: 50%;
display: flex;
height: 24px;
justify-content: center;
padding: 0;
width: 24px;
}
._49fc18ba07c5025f-closeWithCircleBackground ._49fc18ba07c5025f-closeIcon {
color: var(--primary-330);
height: 16px;
width: 16px;
}
._49fc18ba07c5025f-closeWithCircleBackground ._49fc18ba07c5025f-closeIcon:hover {
color: var(--primary-230);
}
._49fc18ba07c5025f-closeWithCircleBackground:hover {
background-color: var(--black);
}
@media screen and (max-height: 550px), screen and (max-width: 485px) {
._49fc18ba07c5025f-hideOnFullscreen {
display: none;
}
._49fc18ba07c5025f-footer {
bottom: 0;
box-sizing: border-box;
position: static;
width: 100%;
}
}
._49fc18ba07c5025f-spinnerContainer {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
width: 100%;
}
._49fc18ba07c5025f-footerSeparator,
._49fc18ba07c5025f-separator {
box-shadow: none;
}
.enable-forced-colors ._49fc18ba07c5025f-root {
border: 2px solid CanvasText;
}
.enable-forced-colors ._49fc18ba07c5025f-close {
opacity: 1;
}
._49fc18ba07c5025f-rootWithShadow {
box-shadow: var(--shadow-medium);
}
._5521c625eee7bda5-discountOfferContainer {
align-content: center;
align-items: flex-start;
display: flex;
flex-direction: row;
gap: 16px;
}
._5521c625eee7bda5-discountOfferContent {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
._5521c625eee7bda5-nitroIcon {
border-radius: var(--radius-sm);
filter: saturate(var(--saturation-factor, 1));
}
._11ee883cc2a570ae-offerDetailContainer {
background: var(--background-mod-subtle);
border-radius: var(--radius-md);
padding: var(--space-16);
}
._11ee883cc2a570ae-legalContainer {
margin: var(--space-16) 0;
}
._11ee883cc2a570ae-spinnerContainer {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
width: 100%;
}
._649887ccbedc7c32-churnFooterContainer {
overflow-x: clip;
position: relative;
}
._649887ccbedc7c32-churnFooterGlow {
background: linear-gradient(90deg, rgba(125, 74, 191, 0.5), rgba(171, 77, 187, 0.5) 50.5%, rgba(161, 97, 136, 0.5));
filter: blur(20px);
height: 42px;
inset-inline-start: 15px;
position: absolute;
top: -4px;
width: 410px;
}
._649887ccbedc7c32-churnFooterTopBorder {
background: linear-gradient(90deg, #8947c6, #b246c2 50%, #ac5c8d);
height: 1px;
width: 100%;
}
._649887ccbedc7c32-churnFooterContent {
background: var(--bg-surface-overlay-tmp);
min-height: 132px;
position: relative;
width: 100%;
z-index: 1;
}
._649887ccbedc7c32-churnFooterContentBody {
display: flex;
}
._649887ccbedc7c32-churnFooterIcon {
align-self: flex-start;
padding-top: 20px;
-webkit-padding-start: 16px;
padding-inline-start: 16px;
}
._649887ccbedc7c32-churnFooterContentBodyInner {
align-items: flex-start;
display: flex;
flex-direction: column;
padding-inline: 20px 22px;
padding-bottom: 24px;
padding-top: 22px;
}
._649887ccbedc7c32-churnFooterCopy {
color: var(--text-strong);
margin-bottom: 14px;
}
._649887ccbedc7c32-churnFooterCTAs {
display: flex;
}
._649887ccbedc7c32-churnFooterClaimCTA {
min-width: 153px;
-webkit-margin-end: 8px;
border-color: #764db9;
margin-inline-end: 8px;
}
._649887ccbedc7c32-churnFooterClaimCTAInner {
align-items: center;
display: flex;
}
._649887ccbedc7c32-churnFooterClaimIcon {
-webkit-padding-end: 4px;
padding-inline-end: 4px;
}
.theme-dark ._649887ccbedc7c32-churnFooterClaimCTA,
.theme-dark ._649887ccbedc7c32-churnFooterClaimCopy {
color: var(--white);
}
.theme-light ._649887ccbedc7c32-churnFooterClaimCTA,
.theme-light ._649887ccbedc7c32-churnFooterClaimCopy {
color: #b449b6;
}
._89307899cb638aba-body {
background-color: var(--modal-background);
color: var(--text-default);
font-size: 16px;
line-height: 20px;
padding-bottom: 16px;
}
._89307899cb638aba-body ._89307899cb638aba-title {
margin-top: 16px;
}
._89307899cb638aba-clickable {
cursor: pointer;
}
._89307899cb638aba-whatYouLoseItemContainer {
display: flex;
flex-direction: column;
margin-bottom: 16px;
margin-top: 16px;
row-gap: 8px;
}
._89307899cb638aba-whatYouLoseItemContainer._89307899cb638aba-premiumRebrand {
filter: saturate(var(--saturation-factor, 1));
margin-bottom: 12px;
margin-top: 12px;
}
._89307899cb638aba-whatYouLoseItemContainer._89307899cb638aba-premiumRebrand._89307899cb638aba-noMargin {
margin-bottom: 0;
margin-top: 0;
}
._89307899cb638aba-whatYouLoseItem {
background: var(--background-base-lowest);
border-radius: 8px;
box-sizing: border-box;
display: flex;
min-height: 140px;
padding: 16px;
}
._89307899cb638aba-whatYouLoseItem._89307899cb638aba-premiumRebrand {
background: var(--background-mod-subtle);
border: 1px solid var(--border-muted);
padding: 11px;
}
._89307899cb638aba-whatYouLoseItemLeftColumn {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
-webkit-padding-end: 16px;
padding-inline-end: 16px;
}
._89307899cb638aba-whatYouLoseItemLeftColumn._89307899cb638aba-premiumRebrand {
-webkit-padding-end: var(--space-40);
padding-inline-end: var(--space-40);
}
._89307899cb638aba-whatYouLoseItemLeftColumn._89307899cb638aba-premiumRebrand strong {
font-weight: 400;
}
._89307899cb638aba-whatYouLoseItemLearnMore {
padding: 0;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
}
._89307899cb638aba-whatYouLoseItemRightColumn {
display: flex;
max-width: 180px;
min-width: 180px;
}
._89307899cb638aba-whatYouLoseItemRightColumn._89307899cb638aba-premiumRebrand {
border-radius: var(--radius-sm);
overflow: hidden;
}
._89307899cb638aba-textSingleLineEllipsis {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._89307899cb638aba-profileCard {
min-height: 96px;
overflow: hidden;
padding: 4px;
position: relative;
width: 100%;
}
._89307899cb638aba-profileCardTier1 {
background-color: var(--background-base-low);
border-radius: 8px;
}
._89307899cb638aba-profileAvatar._89307899cb638aba-profileAvatar {
inset-inline-start: 12px;
position: absolute;
top: 30px;
}
._89307899cb638aba-profileAvatarTier1 {
inset-inline-start: 60px;
position: relative;
top: 16px;
}
._89307899cb638aba-profileInner {
background: transparent;
margin-bottom: 8px;
margin-top: 30px;
-webkit-margin-start: 0;
margin-inline-start: 0;
}
._89307899cb638aba-profileUserInfo {
align-items: center;
display: flex;
margin: 30px 0 8px;
padding: 0 16px;
}
._89307899cb638aba-profileUserInfoTier1 {
display: flex;
justify-content: center;
padding-top: 16px;
position: relative;
}
._89307899cb638aba-profileNameTag {
color: var(--interactive-text-active);
font-weight: var(--font-weight-semibold);
line-height: 20px;
max-width: 118px;
}
._89307899cb638aba-profileNameTagUsername {
line-height: 20px;
text-overflow: ellipsis;
}
._89307899cb638aba-profilePremiumIcon {
-webkit-margin-start: 6px;
margin-inline-start: 6px;
}
._89307899cb638aba-emojiStickersPersonalizedContainer {
align-items: center;
display: flex;
justify-content: space-between;
width: 100%;
}
._89307899cb638aba-emojiStickersPersonalizedContainer :not(:last-child) {
-webkit-margin-end: 2px;
margin-inline-end: 2px;
}
._89307899cb638aba-personalizedEmoji {
height: 58px;
width: 58px;
}
._89307899cb638aba-boostCardContainer {
overflow: hidden;
width: 100%;
}
._89307899cb638aba-boostCard {
background-color: var(--background-base-low);
border-radius: 8px;
box-sizing: border-box;
flex-grow: 1;
height: 100%;
overflow: hidden;
padding: 10px;
}
._89307899cb638aba-boostCardIcon {
flex-shrink: 0;
margin-bottom: 4px;
}
._89307899cb638aba-boostCardInfo {
overflow: hidden;
}
._89307899cb638aba-boostCardTitle {
color: var(--text-strong);
}
._89307899cb638aba-boostCardSubtitle {
align-items: center;
display: flex;
padding-top: 2px;
}
._89307899cb638aba-boostCardGem {
color: var(--guild-boosting-pink);
height: 16px;
width: auto;
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
._89307899cb638aba-boostCardCount {
color: var(--text-strong);
opacity: 0.5;
}
._89307899cb638aba-nonPersonalizedGraphic {
max-width: 168px;
width: 100%;
}
._89307899cb638aba-spinner {
padding-bottom: 44px;
padding-top: 60px;
}
._89307899cb638aba-badgeGradientWrapper {
align-items: center;
background-color: var(--background-surface-higher);
border-radius: 8px;
display: flex;
flex-shrink: 0;
height: 100%;
justify-content: center;
min-height: 108px;
position: relative;
width: 100%;
}
._89307899cb638aba-badgeImage {
display: block;
height: 66px;
width: auto;
}
._70c785992f50b647-previewContainer {
padding-block: 0 var(--space-6);
padding-inline: 0;
}
.theme-light ._9258b50a9ae8aedb-progressContainer._9258b50a9ae8aedb-blue {
--custom-gradient-start: var(--blurple-80);
--custom-gradient-end: var(--blurple-38);
--custom-gradient-glow: var(--blurple-38);
}
.theme-light ._9258b50a9ae8aedb-progressContainer._9258b50a9ae8aedb-orange {
--custom-gradient-start: var(--orange-new-80);
--custom-gradient-end: var(--orange-new-24);
--custom-gradient-glow: var(--orange-new-24);
}
.theme-dark ._9258b50a9ae8aedb-progressContainer._9258b50a9ae8aedb-blue {
--custom-gradient-start: var(--blurple-44);
--custom-gradient-end: var(--blurple-24);
--custom-gradient-glow: var(--blurple-24);
}
.theme-dark ._9258b50a9ae8aedb-progressContainer._9258b50a9ae8aedb-orange {
--custom-gradient-start: var(--orange-new-40);
--custom-gradient-end: var(--orange-new-10);
--custom-gradient-glow: var(--orange-new-10);
}
.theme-darker ._9258b50a9ae8aedb-progressContainer._9258b50a9ae8aedb-blue {
--custom-gradient-start: var(--blurple-54);
--custom-gradient-end: var(--blurple-24);
--custom-gradient-glow: var(--blurple-24);
}
.theme-darker ._9258b50a9ae8aedb-progressContainer._9258b50a9ae8aedb-orange {
--custom-gradient-start: var(--orange-new-48);
--custom-gradient-end: var(--orange-new-10);
--custom-gradient-glow: var(--orange-new-10);
}
.theme-midnight ._9258b50a9ae8aedb-progressContainer._9258b50a9ae8aedb-blue {
--custom-gradient-start: var(--blurple-59);
--custom-gradient-end: var(--blurple-24);
--custom-gradient-glow: var(--blurple-24);
}
.theme-midnight ._9258b50a9ae8aedb-progressContainer._9258b50a9ae8aedb-orange {
--custom-gradient-start: var(--orange-new-48);
--custom-gradient-end: var(--orange-new-10);
--custom-gradient-glow: var(--orange-new-10);
}
._9258b50a9ae8aedb-progressContainer {
--custom-expressive-progress-height: 4px;
--custom-background: var(--background-mod-normal);
background: var(--custom-background);
border-radius: 5px;
height: var(--custom-expressive-progress-height);
overflow: visible;
pointer-events: none;
position: relative;
width: 100%;
}
._9258b50a9ae8aedb-progress {
--custom-min-width: 10px;
border-radius: 5px;
height: 100%;
min-width: var(--custom-min-width);
overflow: visible;
position: relative;
transition: width 0.15s cubic-bezier(0.16, 1, 0.3, 1);
width: 0;
}
._9258b50a9ae8aedb-glow {
background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--custom-gradient-glow) 70%, transparent));
border-radius: 20px;
filter: blur(3px);
height: 16px;
inset-inline-end: -3px;
max-width: min(100%, 120px);
position: absolute;
top: -6px;
transform: perspective(400px) rotateY(-30deg);
transform-origin: left center;
width: 100%;
}
._9258b50a9ae8aedb-glow._9258b50a9ae8aedb-empty {
max-width: calc(var(--custom-min-width) * 2);
width: calc(var(--custom-min-width) * 2);
}
._9258b50a9ae8aedb-bar {
background: linear-gradient(90deg, var(--custom-gradient-start) 0, var(--custom-gradient-end) 100%);
border-radius: 5px;
height: 100%;
width: 100%;
}
._9258b50a9ae8aedb-bar._9258b50a9ae8aedb-empty {
background: var(--custom-gradient-end);
}
._167193fcb67d2fb2-container {
overflow: hidden;
position: relative;
width: 100%;
--custom-edge-fade-width: 0;
}
._167193fcb67d2fb2-children {
flex-shrink: auto;
-webkit-mask-image: none;
mask-image: none;
overflow-x: scroll;
scrollbar-width: none;
transition: -webkit-mask-image 0.3s linear;
transition: mask-image 0.3s linear;
transition:
mask-image 0.3s linear,
-webkit-mask-image 0.3s linear;
}
._167193fcb67d2fb2-children._167193fcb67d2fb2-scrollRight {
-webkit-mask-image: linear-gradient(90deg, #000, #000 calc(100% - var(--custom-edge-fade-width)), transparent);
mask-image: linear-gradient(90deg, #000, #000 calc(100% - var(--custom-edge-fade-width)), transparent);
}
._167193fcb67d2fb2-children._167193fcb67d2fb2-scrollLeft {
-webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--custom-edge-fade-width));
mask-image: linear-gradient(90deg, transparent, #000 var(--custom-edge-fade-width));
}
._167193fcb67d2fb2-children._167193fcb67d2fb2-scrollBoth {
-webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--custom-edge-fade-width), #000 calc(100% - var(--custom-edge-fade-width)), transparent);
mask-image: linear-gradient(90deg, transparent, #000 var(--custom-edge-fade-width), #000 calc(100% - var(--custom-edge-fade-width)), transparent);
}
._167193fcb67d2fb2-children._167193fcb67d2fb2-noScroll {
-webkit-mask-image: none;
mask-image: none;
}
._167193fcb67d2fb2-children > * {
flex-shrink: 0;
}
._167193fcb67d2fb2-actions {
align-items: center;
display: flex;
flex-direction: row;
inset: 0;
justify-content: space-between;
padding: var(--space-8);
pointer-events: none;
position: absolute;
z-index: 1;
}
._167193fcb67d2fb2-actions > * {
pointer-events: auto;
}
._167193fcb67d2fb2-button {
opacity: 1;
transition: opacity 0.1s linear;
}
._167193fcb67d2fb2-disabled {
opacity: 0;
pointer-events: none;
}
.bc529db5bf4f355e-child {
align-items: center;
background: pink;
border-radius: 8px;
color: #000;
cursor: pointer;
display: flex;
font-size: 24px;
height: 100px;
justify-content: center;
width: 100px;
}
.feb59c8c6ec00ad9-title {
margin-bottom: 8px;
}
h1.feb59c8c6ec00ad9-title {
font-size: 20px;
font-weight: var(--font-weight-medium);
line-height: 1.2;
}
h2.feb59c8c6ec00ad9-title {
font-size: 16px;
font-weight: var(--font-weight-semibold);
line-height: 1.25;
}
h3.feb59c8c6ec00ad9-title {
font-size: 14px;
line-height: 1.14;
}
h3.feb59c8c6ec00ad9-title,
h4.feb59c8c6ec00ad9-title,
h5.feb59c8c6ec00ad9-title,
h6.feb59c8c6ec00ad9-title {
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
}
h4.feb59c8c6ec00ad9-title,
h5.feb59c8c6ec00ad9-title,
h6.feb59c8c6ec00ad9-title {
font-size: 12px;
line-height: 1.33;
}
.theme-dark h3.feb59c8c6ec00ad9-title {
color: var(--primary-200);
}
.theme-dark h4.feb59c8c6ec00ad9-title,
.theme-dark h5.feb59c8c6ec00ad9-title,
.theme-dark h6.feb59c8c6ec00ad9-title {
color: var(--primary-300);
}
.theme-light h3.feb59c8c6ec00ad9-title,
.theme-light h4.feb59c8c6ec00ad9-title,
.theme-light h5.feb59c8c6ec00ad9-title,
.theme-light h6.feb59c8c6ec00ad9-title {
color: var(--primary-400);
}
h1.feb59c8c6ec00ad9-title,
h2.feb59c8c6ec00ad9-title {
color: var(--text-default);
}
.hljs {
border-radius: 4px;
display: block;
overflow-x: auto;
padding: 0.5em;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
background: var(--background-base-lower);
color: var(--text-default);
}
.theme-dark .hljs-doctag,
.theme-dark .hljs-keyword,
.theme-dark .hljs-meta .hljs-keyword,
.theme-dark .hljs-template-tag,
.theme-dark .hljs-template-variable,
.theme-dark .hljs-type,
.theme-dark .hljs-variable.language_ {
color: #ff7b72;
}
.theme-dark .hljs-title,
.theme-dark .hljs-title.class_,
.theme-dark .hljs-title.class_.inherited__,
.theme-dark .hljs-title.function_ {
color: #d2a8ff;
}
.theme-dark .hljs-attr,
.theme-dark .hljs-attribute,
.theme-dark .hljs-literal,
.theme-dark .hljs-meta,
.theme-dark .hljs-number,
.theme-dark .hljs-operator,
.theme-dark .hljs-selector-attr,
.theme-dark .hljs-selector-class,
.theme-dark .hljs-selector-id,
.theme-dark .hljs-variable {
color: #79c0ff;
}
.theme-dark .hljs-meta .hljs-string,
.theme-dark .hljs-regexp,
.theme-dark .hljs-string {
color: #a5d6ff;
}
.theme-dark .hljs-built_in,
.theme-dark .hljs-symbol {
color: #ffa657;
}
.theme-dark .hljs-code,
.theme-dark .hljs-comment,
.theme-dark .hljs-formula {
color: #8b949e;
}
.theme-dark .hljs-name,
.theme-dark .hljs-quote,
.theme-dark .hljs-selector-pseudo,
.theme-dark .hljs-selector-tag {
color: #7ee787;
}
.theme-dark .hljs-subst {
color: #c9d1d9;
}
.theme-dark .hljs-section {
color: #1f6feb;
font-weight: 700;
}
.theme-dark .hljs-bullet {
color: #f2cc60;
}
.theme-dark .hljs-emphasis {
color: #c9d1d9;
font-style: italic;
}
.theme-dark .hljs-strong {
color: #c9d1d9;
font-weight: 700;
}
.theme-dark .hljs-addition {
background-color: #033a16;
color: #aff5b4;
}
.theme-dark .hljs-deletion {
background-color: #67060c;
color: #ffdcd7;
}
.theme-light .hljs-doctag,
.theme-light .hljs-keyword,
.theme-light .hljs-meta .hljs-keyword,
.theme-light .hljs-template-tag,
.theme-light .hljs-template-variable,
.theme-light .hljs-type,
.theme-light .hljs-variable.language_ {
color: #d73a49;
}
.theme-light .hljs-title,
.theme-light .hljs-title.class_,
.theme-light .hljs-title.class_.inherited__,
.theme-light .hljs-title.function_ {
color: #6f42c1;
}
.theme-light .hljs-attr,
.theme-light .hljs-attribute,
.theme-light .hljs-literal,
.theme-light .hljs-meta,
.theme-light .hljs-number,
.theme-light .hljs-operator,
.theme-light .hljs-selector-attr,
.theme-light .hljs-selector-class,
.theme-light .hljs-selector-id,
.theme-light .hljs-variable {
color: #005cc5;
}
.theme-light .hljs-meta .hljs-string,
.theme-light .hljs-regexp,
.theme-light .hljs-string {
color: #032f62;
}
.theme-light .hljs-built_in,
.theme-light .hljs-symbol {
color: #e36209;
}
.theme-light .hljs-code,
.theme-light .hljs-comment,
.theme-light .hljs-formula {
color: #6a737d;
}
.theme-light .hljs-name,
.theme-light .hljs-quote,
.theme-light .hljs-selector-pseudo,
.theme-light .hljs-selector-tag {
color: #22863a;
}
.theme-light .hljs-subst {
color: #24292e;
}
.theme-light .hljs-section {
color: #005cc5;
font-weight: 700;
}
.theme-light .hljs-bullet {
color: #735c0f;
}
.theme-light .hljs-emphasis {
color: #24292e;
font-style: italic;
}
.theme-light .hljs-strong {
color: #24292e;
font-weight: 700;
}
.theme-light .hljs-addition {
background-color: #f0fff4;
color: #22863a;
}
.theme-light .hljs-deletion {
background-color: #ffeef0;
color: #b31d28;
}
.d285a61ed580c689-hljs {
border-radius: 4px;
display: block;
overflow-x: auto;
padding: 0.5em;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
color: var(--text-default);
}
.d285a61ed580c689-hljs-doctag,
.d285a61ed580c689-hljs-keyword,
.d285a61ed580c689-hljs-meta .d285a61ed580c689-hljs-keyword,
.d285a61ed580c689-hljs-template-tag,
.d285a61ed580c689-hljs-template-variable,
.d285a61ed580c689-hljs-type,
.d285a61ed580c689-hljs-variable.d285a61ed580c689-language_ {
color: var(--text-code-keyword);
}
.d285a61ed580c689-hljs-title,
.d285a61ed580c689-hljs-title.d285a61ed580c689-class_,
.d285a61ed580c689-hljs-title.d285a61ed580c689-class_.d285a61ed580c689-inherited__,
.d285a61ed580c689-hljs-title.d285a61ed580c689-function_ {
color: var(--text-code-title);
}
.d285a61ed580c689-hljs-attr,
.d285a61ed580c689-hljs-attribute,
.d285a61ed580c689-hljs-literal,
.d285a61ed580c689-hljs-meta,
.d285a61ed580c689-hljs-number,
.d285a61ed580c689-hljs-operator,
.d285a61ed580c689-hljs-selector-attr,
.d285a61ed580c689-hljs-selector-class,
.d285a61ed580c689-hljs-selector-id,
.d285a61ed580c689-hljs-variable {
color: var(--text-code-variable);
}
.d285a61ed580c689-hljs-meta .d285a61ed580c689-hljs-string,
.d285a61ed580c689-hljs-regexp,
.d285a61ed580c689-hljs-string {
color: var(--text-code-string);
}
.d285a61ed580c689-hljs-built_in,
.d285a61ed580c689-hljs-symbol {
color: var(--text-code-builtin);
}
.d285a61ed580c689-hljs-code,
.d285a61ed580c689-hljs-comment,
.d285a61ed580c689-hljs-formula {
color: var(--text-code-comment);
}
.d285a61ed580c689-hljs-name,
.d285a61ed580c689-hljs-quote,
.d285a61ed580c689-hljs-selector-pseudo,
.d285a61ed580c689-hljs-selector-tag {
color: var(--text-code-tag);
}
.d285a61ed580c689-hljs-subst {
color: var(--text-code);
}
.d285a61ed580c689-hljs-section {
color: var(--text-code-section);
font-weight: 700;
}
.d285a61ed580c689-hljs-bullet {
color: var(--text-code-bullet);
}
.d285a61ed580c689-hljs-emphasis {
color: var(--text-code);
font-style: italic;
}
.d285a61ed580c689-hljs-strong {
color: var(--text-code);
font-weight: 700;
}
.d285a61ed580c689-hljs-addition {
background-color: var(--background-code-addition);
color: var(--text-code-addition);
}
.d285a61ed580c689-hljs-deletion {
background-color: var(--background-code-deletion);
color: var(--text-code-deletion);
}
.d285a61ed580c689-markdown {
font-size: 16px;
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
}
.d285a61ed580c689-markdown h1,
.d285a61ed580c689-markdown h2,
.d285a61ed580c689-markdown h3,
.d285a61ed580c689-markdown h4,
.d285a61ed580c689-markdown h5,
.d285a61ed580c689-markdown h6,
.d285a61ed580c689-markdown hr {
margin: 20px 0 8px;
}
.d285a61ed580c689-markdown .d285a61ed580c689-blockquote,
.d285a61ed580c689-markdown ol,
.d285a61ed580c689-markdown p,
.d285a61ed580c689-markdown pre,
.d285a61ed580c689-markdown table,
.d285a61ed580c689-markdown ul {
margin-top: 8px;
}
.d285a61ed580c689-markdown :first-child {
margin-top: 0;
}
.d285a61ed580c689-markdown hr,
.d285a61ed580c689-markdown p {
margin-bottom: 0;
}
.d285a61ed580c689-markdown strong {
font-weight: var(--font-weight-semibold);
}
.d285a61ed580c689-markdown em {
font-style: italic;
}
.d285a61ed580c689-markdown ol li {
list-style-type: decimal;
-webkit-margin-start: 20px;
margin-inline-start: 20px;
}
.d285a61ed580c689-markdown ul {
margin: 0 0 12px;
}
.d285a61ed580c689-markdown ul li {
list-style-type: disc;
margin-block: 8px 0;
margin-inline: 20px 0;
}
.d285a61ed580c689-markdown ul li:first-child {
margin-top: 0;
}
.d285a61ed580c689-markdown table {
border-collapse: collapse;
}
.d285a61ed580c689-markdown th {
font-weight: var(--font-weight-semibold);
}
.d285a61ed580c689-markdown td,
.d285a61ed580c689-markdown th {
padding: 8px;
-webkit-border-start: 1px solid transparent;
border-inline-start: 1px solid transparent;
-webkit-border-end: 1px solid transparent;
border-inline-end: 1px solid transparent;
text-align: start;
}
.d285a61ed580c689-markdown tr {
border: 1px solid transparent;
}
.d285a61ed580c689-markdown img {
border-radius: 3px;
}
.d285a61ed580c689-markdown .d285a61ed580c689-blockquote {
display: block;
-webkit-padding-start: 8px;
padding-inline-start: 8px;
-webkit-border-start: 4px solid transparent;
border-inline-start: 4px solid transparent;
}
.d285a61ed580c689-markdown .d285a61ed580c689-blockquote p {
margin: 0;
}
.d285a61ed580c689-markdown .d285a61ed580c689-codeInline {
padding: 0.2em;
}
.d285a61ed580c689-markdown .d285a61ed580c689-paragraph {
margin-bottom: 8px;
}
.theme-dark .d285a61ed580c689-markdown {
color: var(--primary-300);
}
.theme-dark .d285a61ed580c689-markdown th {
background-color: var(--primary-700);
border-color: var(--primary-500);
color: var(--white);
}
.theme-dark .d285a61ed580c689-markdown td {
border-color: var(--primary-500);
}
.theme-dark .d285a61ed580c689-markdown tr {
border-color: var(--primary-500);
color: var(--primary-300);
}
.theme-dark .d285a61ed580c689-markdown tr:nth-child(2n) {
background-color: var(--primary-630);
}
.theme-dark .d285a61ed580c689-markdown .d285a61ed580c689-blockquote {
border-inline-start-color: var(--primary-500);
}
.theme-dark .d285a61ed580c689-markdown code {
background-color: var(--primary-630);
}
.theme-dark .d285a61ed580c689-markdown .d285a61ed580c689-codeInline {
color: var(--primary-200);
}
._2e5ea8af4f2cb8f9-labelValueRow {
align-items: center;
display: flex;
flex-direction: row;
gap: 8px;
}
._1f91841aa61c9ba6-paymentElementStoryContainer {
display: flex;
flex-direction: row;
gap: 12px;
}
._1f91841aa61c9ba6-paymentElementStepModalBody {
max-width: 456px;
width: 456px;
}
._1f91841aa61c9ba6-fullLengthPaymentElementStepModalBody {
max-width: 456px;
min-height: 900px;
width: 456px;
}
._1f91841aa61c9ba6-paymentElementContainer {
margin: 8px;
}
._1f91841aa61c9ba6-fullLengthPaymentElementContainer {
min-height: 900px;
}
.cc5dd25190031396-wrapper {
position: relative;
}
.cc5dd25190031396-svg,
.cc5dd25190031396-wrapper {
box-sizing: border-box;
}
.cc5dd25190031396-svg {
contain: paint;
position: absolute;
}
.cc5dd25190031396-shiftSVG {
inset-inline-start: -4px;
top: -4px;
}
.cc5dd25190031396-noContain {
contain: style;
}
.cc5dd25190031396-lowerBadge {
bottom: 0;
inset-inline-end: 0;
pointer-events: none;
position: absolute;
z-index: 2;
}
.cc5dd25190031396-isHighlighted {
stroke: #000;
stroke-width: 8px;
}
.cc5dd25190031396-upperBadge {
inset-inline-end: 0;
pointer-events: none;
position: absolute;
top: 0;
}
.cc5dd25190031396-focusStroke {
stroke: transparent;
stroke-width: 0;
}
.cc5dd25190031396-focusFill,
.cc5dd25190031396-focusStroke,
.cc5dd25190031396-highlight {
fill: transparent;
}
.keyboard-mode .cc5dd25190031396-focusStroke {
fill: transparent;
stroke: var(--blue-345);
stroke-width: 8px;
}
.keyboard-mode .cc5dd25190031396-focusFill {
fill: var(--background-base-lowest);
}
.keyboard-mode .cc5dd25190031396-simpleFocused {
box-shadow: 0 0 0 4px var(--blue-345);
}
.c1e9c47c23f12ca3-menu {
--custom-menu-viewport-padding: 16px;
--custom-menu-separator-margin: 8px;
background: var(--background-surface-high);
background-color: var(--background-surface-higher);
border: 1px solid var(--border-subtle);
border-radius: 8px;
box-shadow: var(--shadow-high);
box-sizing: border-box;
cursor: default;
display: flex;
height: auto;
max-height: var(--reference-position-layer-max-height, calc(100vh - var(--custom-menu-viewport-padding) * 2));
z-index: 1;
}
.c1e9c47c23f12ca3-scroller {
padding: 8px;
}
.c1e9c47c23f12ca3-fixed {
width: 220px;
}
.c1e9c47c23f12ca3-flexible {
max-width: 320px;
min-width: 188px;
}
.c1e9c47c23f12ca3-item {
border-radius: 2px;
box-sizing: border-box;
cursor: pointer;
font-size: 14px;
font-weight: var(--font-weight-medium);
line-height: 18px;
margin: 0;
}
.c1e9c47c23f12ca3-item.c1e9c47c23f12ca3-hideInteraction {
cursor: default;
}
.c1e9c47c23f12ca3-customItem {
border-color: var(--interactive-text-default);
color: var(--interactive-text-default);
font-size: 14px;
font-weight: var(--font-weight-medium);
line-height: 18px;
}
.c1e9c47c23f12ca3-labelContainer {
align-items: center;
box-sizing: border-box;
display: flex;
justify-content: space-between;
min-height: 32px;
padding: 8px;
}
.c1e9c47c23f12ca3-label {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.c1e9c47c23f12ca3-switchItem {
align-items: center;
display: flex;
gap: var(--space-16);
justify-content: space-between;
min-height: var(--space-32);
padding: var(--space-8);
}
.c1e9c47c23f12ca3-switchItem .c1e9c47c23f12ca3-labelContainer {
min-height: 0;
padding: 0;
}
.c1e9c47c23f12ca3-subtext,
.c1e9c47c23f12ca3-switchItem .c1e9c47c23f12ca3-label {
white-space: normal;
}
.c1e9c47c23f12ca3-subtext {
margin-top: 2px;
}
.c1e9c47c23f12ca3-subtextLineClamp {
white-space: pre;
}
.c1e9c47c23f12ca3-iconContainer {
flex: 0 0 auto;
-webkit-margin-start: 8px;
height: 20px;
margin-inline-start: 8px;
width: 20px;
}
.c1e9c47c23f12ca3-iconContainerLeft {
margin-inline: 0 8px;
}
.c1e9c47c23f12ca3-iconContainerLarge {
height: 32px;
width: 32px;
}
.c1e9c47c23f12ca3-switchContainer {
flex-shrink: 0;
}
.c1e9c47c23f12ca3-icon {
height: 100%;
width: 100%;
}
.c1e9c47c23f12ca3-hintContainer {
flex: 0 0 auto;
max-height: 18px;
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
.c1e9c47c23f12ca3-caret {
color: var(--text-muted);
height: 20px;
width: 20px;
}
.c1e9c47c23f12ca3-disabled {
cursor: pointer;
opacity: 0.5;
pointer-events: none;
}
.c1e9c47c23f12ca3-separator {
border-bottom-color: var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
box-sizing: border-box;
margin: var(--custom-menu-separator-margin, 8px);
}
.c1e9c47c23f12ca3-submenuPaddingContainer {
padding: 0 8px;
}
.c1e9c47c23f12ca3-submenu {
max-width: 320px;
min-width: 188px;
}
.c1e9c47c23f12ca3-colorDefault {
border-color: var(--interactive-text-default);
color: var(--interactive-text-default);
}
.c1e9c47c23f12ca3-colorDefault .c1e9c47c23f12ca3-subtext {
color: var(--text-muted);
}
.c1e9c47c23f12ca3-colorDefault .c1e9c47c23f12ca3-checkbox,
.c1e9c47c23f12ca3-colorDefault .c1e9c47c23f12ca3-radioSelection {
color: var(--control-brand-foreground-new);
}
.c1e9c47c23f12ca3-colorDefault .c1e9c47c23f12ca3-check {
color: var(--white);
}
.c1e9c47c23f12ca3-colorDefault.c1e9c47c23f12ca3-focused {
background-color: var(--background-mod-subtle);
border-radius: 4px;
color: var(--text-strong);
}
.c1e9c47c23f12ca3-colorDefault.c1e9c47c23f12ca3-focused .c1e9c47c23f12ca3-caret,
.c1e9c47c23f12ca3-colorDefault.c1e9c47c23f12ca3-focused .c1e9c47c23f12ca3-checkbox,
.c1e9c47c23f12ca3-colorDefault.c1e9c47c23f12ca3-focused .c1e9c47c23f12ca3-radioSelection,
.c1e9c47c23f12ca3-colorDefault.c1e9c47c23f12ca3-focused .c1e9c47c23f12ca3-subtext {
color: var(--white);
}
.c1e9c47c23f12ca3-colorDefault.c1e9c47c23f12ca3-focused .c1e9c47c23f12ca3-check {
color: var(--text-brand);
fill: var(--text-brand);
}
.c1e9c47c23f12ca3-colorDefault.c1e9c47c23f12ca3-focused:not(.c1e9c47c23f12ca3-checkboxContainer) path {
fill: var(--interactive-text-active);
}
.c1e9c47c23f12ca3-colorDefault.c1e9c47c23f12ca3-focused .c1e9c47c23f12ca3-subtext {
color: var(--text-subtle);
}
.c1e9c47c23f12ca3-colorDefault:active:not(.c1e9c47c23f12ca3-hideInteraction) {
background-color: var(--background-mod-subtle);
color: var(--white);
}
.c1e9c47c23f12ca3-colorDefault .c1e9c47c23f12ca3-label {
color: var(--text-strong);
}
.c1e9c47c23f12ca3-colorBrand,
.c1e9c47c23f12ca3-colorDanger {
}
.c1e9c47c23f12ca3-colorDanger {
color: var(--text-feedback-critical);
}
.c1e9c47c23f12ca3-colorDanger .c1e9c47c23f12ca3-checkbox,
.c1e9c47c23f12ca3-colorDanger .c1e9c47c23f12ca3-radioSelection {
color: var(--status-danger);
}
.c1e9c47c23f12ca3-colorDanger.c1e9c47c23f12ca3-focused {
background-color: var(--background-feedback-critical);
}
.c1e9c47c23f12ca3-colorDanger.c1e9c47c23f12ca3-focused,
.c1e9c47c23f12ca3-colorDanger.c1e9c47c23f12ca3-focused .c1e9c47c23f12ca3-check,
.c1e9c47c23f12ca3-colorDanger.c1e9c47c23f12ca3-focused .c1e9c47c23f12ca3-label {
color: var(--text-feedback-critical);
}
.c1e9c47c23f12ca3-colorDanger.c1e9c47c23f12ca3-focused:not(.c1e9c47c23f12ca3-checkboxContainer) path {
fill: var(--text-feedback-critical);
}
.c1e9c47c23f12ca3-colorDanger:active:not(.c1e9c47c23f12ca3-hideInteraction) {
background-color: var(--background-feedback-critical);
color: var(--text-feedback-critical);
}
.c1e9c47c23f12ca3-colorDanger .c1e9c47c23f12ca3-label {
color: var(--text-feedback-critical);
}
.c1e9c47c23f12ca3-colorPremium {
}
.c1e9c47c23f12ca3-colorPremium .c1e9c47c23f12ca3-icon {
color: var(--guild-boosting-pink);
}
.c1e9c47c23f12ca3-colorPremium.c1e9c47c23f12ca3-focused .c1e9c47c23f12ca3-icon,
.c1e9c47c23f12ca3-colorPremium:active:not(.c1e9c47c23f12ca3-hideInteraction) .c1e9c47c23f12ca3-icon {
color: var(--white);
}
.c1e9c47c23f12ca3-colorPremiumGradient {
}
.c1e9c47c23f12ca3-colorPremiumGradient.c1e9c47c23f12ca3-focused,
.c1e9c47c23f12ca3-colorPremiumGradient:active:not(.c1e9c47c23f12ca3-hideInteraction) {
background: linear-gradient(270deg, var(--premium-tier-2-pink-for-gradients) 0, var(--premium-tier-2-pink-for-gradients-2) 33.63%, var(--premium-tier-2-purple-for-gradients) 100%);
}
.c1e9c47c23f12ca3-colorPremiumGradient .c1e9c47c23f12ca3-check,
.c1e9c47c23f12ca3-colorPremiumGradient .c1e9c47c23f12ca3-radioSelection {
color: var(--white);
}
.c1e9c47c23f12ca3-colorPremiumGradient .c1e9c47c23f12ca3-checkbox,
.c1e9c47c23f12ca3-colorPremiumGradient.c1e9c47c23f12ca3-focused .c1e9c47c23f12ca3-check {
color: var(--premium-tier-2-pink-for-gradients);
}
.c1e9c47c23f12ca3-colorSuccess {
}
.c1e9c47c23f12ca3-colorSuccess,
.c1e9c47c23f12ca3-colorSuccess .c1e9c47c23f12ca3-checkbox,
.c1e9c47c23f12ca3-colorSuccess .c1e9c47c23f12ca3-radioSelection {
color: var(--green-230);
}
.c1e9c47c23f12ca3-colorSuccess.c1e9c47c23f12ca3-focused {
background-color: var(--green-230);
color: var(--white);
}
.c1e9c47c23f12ca3-colorSuccess.c1e9c47c23f12ca3-focused .c1e9c47c23f12ca3-check {
color: var(--green-230);
}
.c1e9c47c23f12ca3-colorSuccess:active:not(.c1e9c47c23f12ca3-hideInteraction) {
background-color: var(--green-360);
color: var(--white);
}
.c1e9c47c23f12ca3-groupLabel {
color: var(--text-muted);
font-family: var(--font-display);
font-size: 14px;
font-weight: 500;
line-height: 20px;
text-transform: capitalize;
}
.c1e9c47c23f12ca3-loader {
align-items: center;
justify-content: center;
padding: 16px;
}
.custom-theme-background .c1e9c47c23f12ca3-menu {
border: 1px solid var(--border-strong);
}
[data-popout-animating="true"] .c1e9c47c23f12ca3-item[aria-haspopup="true"] {
pointer-events: none;
}
svg.c1e9c47c23f12ca3-radioIcon {
height: 20px;
width: 20px;
}
:where(.density-compact) .c1e9c47c23f12ca3-labelContainer {
padding: 4px 8px;
}
.refresh-fast-follow-distinct-borders .c1e9c47c23f12ca3-menu {
border-color: var(--app-frame-border);
}
.refresh-fast-follow-distinct-borders .c1e9c47c23f12ca3-separator {
border-bottom-color: var(--app-frame-border);
}
.enable-forced-colors .c1e9c47c23f12ca3-menu {
background-color: ButtonFace;
border: 2px solid CanvasText;
}
.enable-forced-colors .c1e9c47c23f12ca3-colorDefault {
background-color: ButtonFace;
border: 1px solid ButtonFace;
color: ButtonText;
forced-color-adjust: none;
}
.enable-forced-colors .c1e9c47c23f12ca3-colorDefault .c1e9c47c23f12ca3-caret,
.enable-forced-colors .c1e9c47c23f12ca3-colorDefault .c1e9c47c23f12ca3-label,
.enable-forced-colors .c1e9c47c23f12ca3-colorDefault .c1e9c47c23f12ca3-subtext {
color: inherit;
}
.enable-forced-colors .c1e9c47c23f12ca3-colorDefault .c1e9c47c23f12ca3-checkbox,
.enable-forced-colors .c1e9c47c23f12ca3-colorDefault .c1e9c47c23f12ca3-radioSelection {
color: Highlight;
}
.enable-forced-colors .c1e9c47c23f12ca3-colorDefault .c1e9c47c23f12ca3-check {
color: HighlightText;
}
.enable-forced-colors .c1e9c47c23f12ca3-colorDefault.c1e9c47c23f12ca3-focused,
.enable-forced-colors .c1e9c47c23f12ca3-colorDefault:hover {
border-color: ButtonText;
}
.enable-forced-colors .c1e9c47c23f12ca3-colorDefault[aria-checked="true"] {
background-color: Highlight;
color: HighlightText;
}
.enable-forced-colors .c1e9c47c23f12ca3-colorDefault[aria-checked="true"].c1e9c47c23f12ca3-focused,
.enable-forced-colors .c1e9c47c23f12ca3-colorDefault[aria-checked="true"]:hover {
border-color: HighlightText;
}
.enable-forced-colors .c1e9c47c23f12ca3-colorDefault[aria-checked="true"] .c1e9c47c23f12ca3-radioSelection {
color: HighlightText;
}
.enable-forced-colors .c1e9c47c23f12ca3-colorDefault:active:not(.c1e9c47c23f12ca3-hideInteraction) {
background-color: Highlight;
color: HighlightText;
}
.enable-forced-colors .c1e9c47c23f12ca3-groupLabel,
.enable-forced-colors .c1e9c47c23f12ca3-groupLabel:hover,
.enable-forced-colors .c1e9c47c23f12ca3-hideInteraction,
.enable-forced-colors .c1e9c47c23f12ca3-hideInteraction:hover {
background-color: ButtonFace;
border-color: ButtonFace;
color: ButtonText;
}
.enable-forced-colors .c1e9c47c23f12ca3-disabled,
.enable-forced-colors .c1e9c47c23f12ca3-disabled[aria-checked="true"] {
background-color: Canvas;
color: GrayText;
cursor: not-allowed;
opacity: 1;
}
.enable-forced-colors .c1e9c47c23f12ca3-disabled .c1e9c47c23f12ca3-checkbox,
.enable-forced-colors .c1e9c47c23f12ca3-disabled .c1e9c47c23f12ca3-radioSelection,
.enable-forced-colors .c1e9c47c23f12ca3-disabled[aria-checked="true"] .c1e9c47c23f12ca3-checkbox,
.enable-forced-colors .c1e9c47c23f12ca3-disabled[aria-checked="true"] .c1e9c47c23f12ca3-radioSelection {
color: GrayText;
}
._6e9f8dce4cc18de3-wrapper {
cursor: pointer;
transition:
background-color 0.1s ease-out,
color 0.1s ease-out;
}
._6e9f8dce4cc18de3-childWrapper,
._6e9f8dce4cc18de3-wrapper {
align-items: center;
display: flex;
height: var(--guildbar-avatar-size);
justify-content: center;
width: var(--guildbar-avatar-size);
}
._6e9f8dce4cc18de3-childWrapper {
color: var(--text-default);
transition:
scale 0.15s ease-out,
background-color 0.15s ease-out,
color 0.15s ease-out;
}
._6e9f8dce4cc18de3-childWrapperNoHoverBg {
background-color: var(--background-mod-subtle);
}
.custom-theme-background ._6e9f8dce4cc18de3-childWrapperNoHoverBg {
background-color: var(--background-mod-strong);
}
._6e9f8dce4cc18de3-wrapper._6e9f8dce4cc18de3-selected ._6e9f8dce4cc18de3-childWrapperHoverScale,
._6e9f8dce4cc18de3-wrapper:hover ._6e9f8dce4cc18de3-childWrapperHoverScale {
scale: 1.1;
}
._6e9f8dce4cc18de3-wrapper._6e9f8dce4cc18de3-selected ._6e9f8dce4cc18de3-childWrapper,
._6e9f8dce4cc18de3-wrapper:hover ._6e9f8dce4cc18de3-childWrapper {
background-color: var(--background-brand);
color: var(--white);
}
._6e9f8dce4cc18de3-acronym {
font-weight: var(--font-weight-medium);
line-height: 1.2em;
white-space: nowrap;
}
._6e9f8dce4cc18de3-icon {
display: block;
height: var(--guildbar-avatar-size);
object-fit: cover;
pointer-events: none;
width: var(--guildbar-avatar-size);
}
._6e9f8dce4cc18de3-icon:before {
background-color: var(--background-mod-subtle);
content: "";
display: block;
height: 100%;
width: 100%;
}
._006d6725178bf05b-btnHamburger {
background: transparent;
cursor: pointer;
height: 45px;
margin-right: -20px;
padding: 8px;
position: relative;
transform: scale(0.3);
width: 60px;
}
._006d6725178bf05b-btnHamburger span {
background: var(--white);
display: block;
height: 9px;
opacity: 1;
position: absolute;
transform: rotate(0deg);
transition: 0.25s ease-in-out;
width: 50%;
}
._006d6725178bf05b-btnHamburger span:nth-child(2n) {
border-radius: 0 9px 9px 0;
left: 50%;
}
._006d6725178bf05b-btnHamburger span:nth-child(odd) {
border-radius: 9px 0 0 9px;
left: 0;
}
._006d6725178bf05b-btnHamburger span:first-child,
._006d6725178bf05b-btnHamburger span:nth-child(2) {
top: 0;
}
._006d6725178bf05b-btnHamburger span:nth-child(3),
._006d6725178bf05b-btnHamburger span:nth-child(4) {
top: 18px;
}
._006d6725178bf05b-btnHamburger span:nth-child(5),
._006d6725178bf05b-btnHamburger span:nth-child(6) {
top: 36px;
}
.theme-dark ._006d6725178bf05b-btnHamburger span {
background: var(--white);
}
.theme-light ._006d6725178bf05b-btnHamburger span {
background: var(--black);
}
._006d6725178bf05b-btnHamburgerOpen span:first-child,
._006d6725178bf05b-btnHamburgerOpen span:nth-child(6) {
transform: rotate(45deg);
}
._006d6725178bf05b-btnHamburgerOpen span:nth-child(2),
._006d6725178bf05b-btnHamburgerOpen span:nth-child(5) {
transform: rotate(-45deg);
}
._006d6725178bf05b-btnHamburgerOpen span:first-child {
left: 5px;
top: 7px;
}
._006d6725178bf05b-btnHamburgerOpen span:nth-child(2) {
left: calc(50% - 5px);
top: 7px;
}
._006d6725178bf05b-btnHamburgerOpen span:nth-child(3) {
left: -50%;
opacity: 0;
}
._006d6725178bf05b-btnHamburgerOpen span:nth-child(4) {
left: 100%;
opacity: 0;
}
._006d6725178bf05b-btnHamburgerOpen span:nth-child(5) {
left: 5px;
top: 29px;
}
._006d6725178bf05b-btnHamburgerOpen span:nth-child(6) {
left: calc(50% - 5px);
top: 29px;
}
._9293f6b2fc12398a-hamburger {
flex: 0 0 auto;
-webkit-margin-end: -4px;
margin-inline-end: -4px;
}
._9293f6b2fc12398a-container {
color: var(--text-default);
cursor: default;
display: flex;
flex: 0 0 auto;
flex-direction: column;
font-size: 16px;
justify-content: center;
line-height: 20px;
min-height: var(--custom-channel-header-height);
min-width: 0;
padding: 8px;
position: relative;
width: 100%;
z-index: 2;
--__header-bar-background: var(--background-base-lower);
border-bottom: 1px solid var(--border-subtle);
-webkit-padding-start: calc(var(--custom-message-margin-horizontal));
height: var(--custom-channel-header-height);
padding-inline-start: calc(var(--custom-message-margin-horizontal));
}
._9293f6b2fc12398a-container,
._9293f6b2fc12398a-container * {
box-sizing: border-box;
}
._9293f6b2fc12398a-container._9293f6b2fc12398a-transparent {
background: transparent;
}
._9293f6b2fc12398a-upperContainer {
display: flex;
flex: 1;
}
._9293f6b2fc12398a-children {
align-items: center;
display: flex;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
position: relative;
}
._9293f6b2fc12398a-children:after {
content: "";
height: 100%;
inset-inline-end: 0;
position: absolute;
top: 0;
width: 8px;
}
.custom-theme-background ._9293f6b2fc12398a-children:after {
content: unset;
}
._9293f6b2fc12398a-children._9293f6b2fc12398a-scrollable:after {
display: none;
}
.theme-dark ._9293f6b2fc12398a-children:after {
background: linear-gradient(to right, rgba(54, 57, 63, 0) 0, var(--__header-bar-background) 100%);
}
.theme-light ._9293f6b2fc12398a-children:after {
background: linear-gradient(to right, hsla(0, 0%, 100%, 0) 0, var(--__header-bar-background) 100%);
}
._9293f6b2fc12398a-transparent ._9293f6b2fc12398a-children:after {
display: none;
}
._9293f6b2fc12398a-container._9293f6b2fc12398a-hidden {
opacity: 0;
pointer-events: none;
}
._9293f6b2fc12398a-toolbar {
align-items: center;
display: flex;
flex: 0 0 auto;
gap: var(--space-xs);
min-width: 0;
-webkit-padding-start: var(--space-xs);
padding-inline-start: var(--space-xs);
}
._9293f6b2fc12398a-toolbar ._9293f6b2fc12398a-iconWrapper {
margin: 0;
}
._9293f6b2fc12398a-title {
align-items: center;
display: flex;
justify-content: flex-start;
overflow: hidden;
white-space: nowrap;
}
._9293f6b2fc12398a-titleWrapper {
flex: 0 0 auto;
margin-block: 0;
margin-inline: 0 8px;
min-width: auto;
}
._9293f6b2fc12398a-clickable {
cursor: pointer;
}
._9293f6b2fc12398a-iconWrapper {
align-items: center;
display: flex;
flex: 0 0 auto;
height: var(--space-32);
justify-content: center;
margin: 0;
position: relative;
width: var(--space-32);
}
._9293f6b2fc12398a-icon {
display: block;
-webkit-app-region: no-drag;
height: var(--chat-input-icon-size);
width: var(--chat-input-icon-size);
}
._9293f6b2fc12398a-channelIcon {
margin-inline: -1px calc(var(--custom-message-margin-horizontal) / 2 + 1px);
width: auto;
}
._9293f6b2fc12398a-icon {
color: var(--channel-icon);
}
._9293f6b2fc12398a-clickable ._9293f6b2fc12398a-icon {
color: var(--icon-muted);
}
._9293f6b2fc12398a-clickable:hover ._9293f6b2fc12398a-icon {
color: var(--icon-subtle);
}
._9293f6b2fc12398a-selected ._9293f6b2fc12398a-icon {
color: var(--icon-strong);
}
._9293f6b2fc12398a-iconDisabled {
opacity: 0.6;
}
._9293f6b2fc12398a-iconBadge {
background-color: var(--status-danger);
border-radius: 8px;
height: 8px;
position: absolute;
width: 8px;
}
._9293f6b2fc12398a-iconBadgeTop {
inset-inline-end: 2px;
top: 2px;
}
._9293f6b2fc12398a-iconBadgeBottom {
--custom-icon-offset: calc((var(--chat-input-icon-size) - 8px) / 2);
bottom: var(--custom-icon-offset);
inset-inline-end: var(--custom-icon-offset);
}
._9293f6b2fc12398a-divider {
background: var(--border-subtle);
flex: 0 0 auto;
height: 24px;
margin: 0 4px;
width: 1px;
}
._9293f6b2fc12398a-dot {
align-items: center;
color: var(--background-mod-strong);
height: 4px;
margin: 0 4px;
width: 4px;
}
._9293f6b2fc12398a-caret {
color: var(--icon-muted);
flex-shrink: 0;
margin: 0 2px;
width: 10px;
}
._9293f6b2fc12398a-scrollable {
overflow: auto;
-ms-overflow-style: none;
}
.refresh-fast-follow-distinct-borders ._9293f6b2fc12398a-container {
border-bottom-color: var(--app-frame-border);
}
.refresh-fast-follow-distinct-borders ._9293f6b2fc12398a-divider {
background: var(--app-frame-border);
}
.no-webkit-scrollbar ._9293f6b2fc12398a-scrollable {
scrollbar-width: none;
}
._9293f6b2fc12398a-scrollable::-webkit-scrollbar {
display: none;
}
.high-contrast-mode ._9293f6b2fc12398a-container,
.theme-midnight ._9293f6b2fc12398a-container {
border-bottom: 1px solid var(--border-subtle);
}
.high-contrast-mode ._9293f6b2fc12398a-container._9293f6b2fc12398a-transparent,
.theme-midnight ._9293f6b2fc12398a-container._9293f6b2fc12398a-transparent {
border-bottom: none;
}
.theme-dark ._9293f6b2fc12398a-themed {
background: var(--background-gradient-lower, var(--__header-bar-background));
}
.theme-dark ._9293f6b2fc12398a-themedMobile {
background: var(--background-gradient-high, var(--__header-bar-background));
}
.theme-light ._9293f6b2fc12398a-themed {
background: var(--background-gradient-lowest, var(--__header-bar-background));
}
.theme-light ._9293f6b2fc12398a-themedMobile {
background: var(--background-gradient-low, var(--__header-bar-background));
}
.enable-forced-colors ._9293f6b2fc12398a-container {
border-bottom: 2px solid CanvasText;
}
.enable-forced-colors ._9293f6b2fc12398a-icon {
color: CanvasText;
}
.enable-forced-colors ._9293f6b2fc12398a-clickable ._9293f6b2fc12398a-icon,
.enable-forced-colors ._9293f6b2fc12398a-clickable:hover ._9293f6b2fc12398a-icon {
color: ButtonText;
}
.enable-forced-colors ._9293f6b2fc12398a-clickable {
background-color: ButtonFace;
border-radius: 4px;
color: ButtonText;
}
.enable-forced-colors ._9293f6b2fc12398a-iconBadge {
background-color: Highlight;
}
._9293f6b2fc12398a-titleClickable {
cursor: pointer;
}
._9293f6b2fc12398a-titleClickable:hover {
color: var(--text-strong);
}
.c5f0dc7c7418c331-nitroWheel {
height: 16px;
margin-inline: 2px 4px;
vertical-align: sub;
width: 16px;
}
._36dee59b8fa89219-themeSelectionContainer {
box-sizing: border-box;
height: var(--custom-theme-selection-selection-size);
position: relative;
width: var(--custom-theme-selection-selection-size);
}
._36dee59b8fa89219-themeSelection {
border-radius: 8px;
cursor: pointer;
height: 100%;
width: 100%;
}
._36dee59b8fa89219-themeSelection._36dee59b8fa89219-selected {
cursor: default;
}
._36dee59b8fa89219-defaultThemeSelection {
box-shadow: inset 0 0 0 1px var(--interactive-text-default);
}
._36dee59b8fa89219-selectionCircle {
border-radius: 8px;
box-shadow: inset 0 0 0 4px var(--brand-500);
cursor: default;
height: calc(100% + 4px);
inset-inline-start: -2px;
pointer-events: none;
position: absolute;
top: -2px;
width: calc(100% + 4px);
}
._36dee59b8fa89219-checkmarkCircle {
inset-inline-end: -6px;
position: absolute;
top: -6px;
}
._36dee59b8fa89219-checkmark {
color: var(--brand-500);
}
._36dee59b8fa89219-redCircle {
background-color: var(--red-430);
border-radius: 50%;
inset-inline-end: -6px;
top: -6px;
}
._36dee59b8fa89219-lockedBadgeContainer,
._36dee59b8fa89219-redCircle {
background-clip: content-box;
box-shadow: inset 0 0 0 2px var(--background-base-low);
cursor: pointer;
height: 18px;
padding: 1px;
position: absolute;
width: 18px;
z-index: 2;
}
._36dee59b8fa89219-lockedBadgeContainer {
align-items: center;
background-color: var(--background-base-low);
border-radius: var(--radius-round);
bottom: 0;
display: flex;
inset-inline-end: 0;
justify-content: center;
}
._36dee59b8fa89219-lockedBadge {
color: var(--icon-strong);
height: 10px;
width: 10px;
}
._36dee59b8fa89219-disabled {
opacity: 0.2;
pointer-events: none;
}
._36dee59b8fa89219-iconWrapper {
height: var(--custom-theme-selection-selection-size);
margin-top: 18px;
position: absolute;
text-align: center;
width: var(--custom-theme-selection-selection-size);
}
._36dee59b8fa89219-darkOverlay {
--background-gradient: linear-gradient(var(--opacity-black-20), var(--opacity-black-20));
}
._36dee59b8fa89219-lightOverlay {
--background-gradient: linear-gradient(var(--opacity-white-48), var(--opacity-white-48));
}
._36dee59b8fa89219-darkIcon {
background: var(--primary-600);
}
._36dee59b8fa89219-darkerIcon {
background: var(--plum-20);
}
._36dee59b8fa89219-midnightIcon {
background: var(--black);
}
._36dee59b8fa89219-lightIcon {
background: var(--white);
}
._8fea485116292f13-badgeContainer {
position: relative;
}
._8fea485116292f13-badgeContainer,
._8fea485116292f13-container {
display: flex;
justify-content: center;
}
._8fea485116292f13-container {
align-items: center;
}
._8fea485116292f13-paletteIcon {
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.14));
}
._8fea485116292f13-newBadge {
position: absolute;
top: -8px;
z-index: 1;
}
._8fea485116292f13-newRing {
border-radius: 8px;
filter: drop-shadow(0 0 4px rgba(180, 115, 245, 0.44));
height: calc(100% + 8px);
inset-inline-start: -4px;
position: absolute;
top: -4px;
width: calc(100% + 8px);
}
._8fea485116292f13-darkOverlay {
--background-gradient: linear-gradient(var(--opacity-black-40), var(--opacity-black-40));
}
._8fea485116292f13-lightOverlay {
--background-gradient: linear-gradient(var(--background-mod-subtle), var(--background-mod-subtle));
}
._8fea485116292f13-borderOverlay {
border-radius: 8px;
box-shadow: inset 0 0 0 1px var(--border-strong);
inset: 0;
pointer-events: none;
position: absolute;
}
._8fea485116292f13-disabled {
opacity: 0.5;
pointer-events: none;
}
._67a117a74ffaf557-header {
align-items: center;
display: flex;
justify-content: space-between;
}
._67a117a74ffaf557-headings {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
._67a117a74ffaf557-upsellText {
color: var(--premium-nitro-pink-text);
}
._67a117a74ffaf557-title {
align-items: center;
display: flex;
flex: 1;
}
._67a117a74ffaf557-betaTag {
background: var(--custom-premium-colors-premium-gradient-tier-2);
display: inline;
}
._67a117a74ffaf557-betaTagContainer {
display: inline-flex;
-webkit-margin-start: 2px;
border-radius: 8px;
margin-inline-start: 2px;
}
._67a117a74ffaf557-premiumIcon {
color: var(--icon-strong);
}
._67a117a74ffaf557-easterEggSelection {
position: relative;
transform: rotate(0deg), scale(0);
}
.full-motion ._67a117a74ffaf557-easterEggSelection {
animation: _67a117a74ffaf557-scale-bounce-wiggle 0.5s 0s forwards;
}
._67a117a74ffaf557-sparkles {
animation: _67a117a74ffaf557-fadeOut 2s 3s forwards;
inset-inline-start: 0;
opacity: 1;
pointer-events: none;
position: absolute;
top: 0;
}
@keyframes _67a117a74ffaf557-fadeOut {
0% {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes _67a117a74ffaf557-scale-bounce-wiggle {
0% {
transform: scale(0) rotate(10deg);
}
30% {
transform: scale(1.3) rotate(10deg);
}
55% {
transform: scale(0.7) rotate(-10deg);
}
75% {
transform: scale(1.2) rotate(20deg);
}
85% {
transform: scale(0.98) rotate(-20deg);
}
92% {
transform: scale(1.1) rotate(-5deg);
}
97% {
transform: scale(0.99) rotate(-5deg);
}
to {
transform: scale(1) rotate(0deg);
}
}
._67a117a74ffaf557-subtext {
color: var(--text-subtle);
}
._67a117a74ffaf557-titleText {
color: var(--text-strong);
}
.df4c28a1dd232372-root {
--custom-playground-offset-top: calc(var(--custom-app-top-bar-height) + var(--space-4));
background: var(--background-base-lowest);
display: grid;
grid-template-columns: auto 1fr;
height: 100vh;
max-height: 100vh;
overflow: hidden;
padding-top: var(--custom-playground-offset-top);
}
.df4c28a1dd232372-group {
align-items: center;
display: flex;
flex-direction: column;
gap: var(--space-12);
width: var(--custom-guild-list-width);
}
.df4c28a1dd232372-header {
border-top: 1px solid var(--app-frame-border);
-webkit-border-start: 1px solid var(--app-frame-border);
border-inline-start: 1px solid var(--app-frame-border);
border-start-start-radius: var(--radius-md);
}
.df4c28a1dd232372-headerDivider {
-webkit-margin-end: var(--space-12);
margin-inline-end: var(--space-12);
}
.df4c28a1dd232372-headerRight {
-webkit-margin-start: auto;
margin-inline-start: auto;
-webkit-padding-end: var(--space-8);
padding-inline-end: var(--space-8);
}
.df4c28a1dd232372-sidebar {
background: var(--background-base-lowest);
width: 280px;
-webkit-border-end: 1px solid var(--border-subtle);
border-inline-end: 1px solid var(--border-subtle);
-webkit-border-start: 1px solid var(--border-subtle);
border-inline-start: 1px solid var(--border-subtle);
overflow-y: auto;
padding: var(--space-16);
padding-bottom: var(--space-24);
}
.df4c28a1dd232372-page {
box-sizing: border-box;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: 1fr;
height: 100%;
min-height: 0;
padding-bottom: var(--custom-playground-offset-top);
}
.df4c28a1dd232372-content,
.df4c28a1dd232372-main {
flex: 1;
height: 100%;
min-height: 0;
}
.df4c28a1dd232372-main {
display: flex;
}
.df4c28a1dd232372-mainRightLayout {
flex-direction: row;
}
.df4c28a1dd232372-mainBottomLayout {
flex-direction: column;
}
.df4c28a1dd232372-canvas {
background-color: var(--background-base-lower);
flex: 1;
overflow: auto;
padding: var(--space-24);
padding-bottom: var(--space-32);
}
.df4c28a1dd232372-controls {
background: var(--background-base-lowest);
overflow-y: auto;
padding: var(--space-16);
padding-bottom: var(--space-24);
}
.df4c28a1dd232372-controlsRight {
width: 300px;
-webkit-border-start: 1px solid var(--border-subtle);
border-inline-start: 1px solid var(--border-subtle);
}
.df4c28a1dd232372-controlsBottom {
max-height: 300px;
-webkit-border-before: 1px solid var(--border-subtle);
border-block-start: 1px solid var(--border-subtle);
}
.df4c28a1dd232372-controlsSection {
margin-bottom: 24px;
}
.df4c28a1dd232372-storyContent {
background: var(--background-surface-high);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
contain: layout;
container-type: inline-size;
padding: var(--space-24);
}
._85414bd35b48fc4a-errorCodeMessage {
margin-top: 16px;
}
._5ad890d06f24286d-dots {
color: var(--white);
pointer-events: none;
transform: translateZ(0);
}
._5ad890d06f24286d-dots._5ad890d06f24286d-themed {
color: var(--text-default);
}
.a423bdd721ddcc83-mask {
display: block;
}
.a423bdd721ddcc83-status {
height: 100%;
width: 100%;
}
.enable-forced-colors .a423bdd721ddcc83-status {
forced-color-adjust: none !important;
}
._44b0c28be7879b7b-wrapper {
border-radius: 50%;
position: relative;
}
._44b0c28be7879b7b-pointer {
cursor: pointer;
}
._44b0c28be7879b7b-mask {
display: block;
pointer-events: none;
position: relative;
width: auto;
}
._44b0c28be7879b7b-svg {
contain: paint;
}
._44b0c28be7879b7b-status,
._44b0c28be7879b7b-svg {
position: absolute;
}
._44b0c28be7879b7b-status {
bottom: 0;
height: auto;
inset-inline-end: 0;
}
._44b0c28be7879b7b-cursorDefault {
cursor: default;
}
._44b0c28be7879b7b-avatarStack {
display: grid;
height: 100%;
width: 100%;
}
._44b0c28be7879b7b-avatar,
._44b0c28be7879b7b-avatarBorder {
grid-area: 1/1;
height: 100%;
width: 100%;
}
._44b0c28be7879b7b-avatarBorder {
border-radius: 50%;
}
._44b0c28be7879b7b-avatar {
display: block;
object-fit: cover;
pointer-events: none;
}
._44b0c28be7879b7b-avatar:before {
background-color: var(--background-mod-subtle);
content: "";
display: block;
height: 100%;
width: 100%;
}
._44b0c28be7879b7b-pointerEvents {
pointer-events: auto;
}
._44b0c28be7879b7b-avatarDecoration {
contain: paint;
inset-inline-start: var(--custom-avatar-avatar-decoration-border-position);
pointer-events: none;
position: absolute;
top: var(--custom-avatar-avatar-decoration-border-position);
}
._44b0c28be7879b7b-cutoutIcon {
color: var(--icon-muted);
height: 100%;
width: 100%;
}
._44b0c28be7879b7b-cutoutIcon,
._44b0c28be7879b7b-largeEmoji {
align-items: center;
display: flex;
}
._44b0c28be7879b7b-largeEmoji {
font-size: 48px;
justify-content: center;
}
._06eda958b510be67-button {
align-items: center;
border-radius: 50%;
box-sizing: border-box;
cursor: pointer;
display: flex;
flex-shrink: 0;
justify-content: center;
}
.full-motion ._06eda958b510be67-button {
transition:
color 0.2s ease,
background-color 0.2s ease;
}
._06eda958b510be67-primary {
background-color: var(--background-base-low);
color: var(--text-strong);
}
._06eda958b510be67-primary:hover:not(._06eda958b510be67-disabled) {
color: var(--interactive-text-active);
}
._06eda958b510be67-primary:hover:not(._06eda958b510be67-disabled),
._06eda958b510be67-secondary {
background-color: var(--background-base-lower);
}
._06eda958b510be67-secondary {
color: var(--text-default);
}
._06eda958b510be67-secondary:hover:not(._06eda958b510be67-disabled) {
background-color: var(--background-base-low);
color: var(--interactive-text-active);
}
._06eda958b510be67-tertiary {
background-color: var(--background-base-lowest);
color: var(--interactive-text-default);
}
._06eda958b510be67-tertiary:hover:not(._06eda958b510be67-disabled) {
background-color: var(--background-surface-high);
color: var(--interactive-text-active);
}
._06eda958b510be67-primary,
._06eda958b510be67-secondary,
._06eda958b510be67-tertiary {
background-color: var(--control-secondary-background-default);
color: var(--control-secondary-text-default);
}
._06eda958b510be67-primary:hover,
._06eda958b510be67-secondary:hover,
._06eda958b510be67-tertiary:hover {
background-color: var(--control-secondary-background-hover);
}
._06eda958b510be67-size24 {
height: 24px;
min-height: 24px;
min-width: 24px;
padding: 4px;
width: 24px;
}
._06eda958b510be67-size32 {
height: 32px;
min-height: 32px;
min-width: 32px;
width: 32px;
}
._06eda958b510be67-size36 {
height: 36px;
min-height: 36px;
min-width: 36px;
width: 36px;
}
._06eda958b510be67-disabled {
opacity: 0.3;
pointer-events: none;
}
._217b73c8e5e3ff6d-collapseable {
background-color: var(--background-base-low);
border-radius: var(--radius-sm);
position: relative;
transition: background-color 0.1s ease;
}
._217b73c8e5e3ff6d-collapseable:active {
background-color: var(--background-mod-subtle);
}
._217b73c8e5e3ff6d-collapseable:before {
border-radius: 8px;
box-shadow: var(--elevation-stroke), var(--elevation-low);
content: "";
display: none;
inset: 0;
opacity: 0;
overflow: visible;
position: absolute;
transition: opacity 0.2s ease-in-out;
z-index: 0;
}
._217b73c8e5e3ff6d-collapseable._217b73c8e5e3ff6d-toggled {
cursor: default;
}
._217b73c8e5e3ff6d-collapseable._217b73c8e5e3ff6d-toggled:active {
background-color: var(--background-base-lower);
}
._217b73c8e5e3ff6d-collapseable._217b73c8e5e3ff6d-toggled:before {
opacity: 1;
}
._217b73c8e5e3ff6d-collapseable:not(:last-child) {
margin-bottom: 16px;
}
._217b73c8e5e3ff6d-header {
cursor: pointer;
position: relative;
}
._217b73c8e5e3ff6d-header._217b73c8e5e3ff6d-toggled {
cursor: default;
}
._217b73c8e5e3ff6d-contentExpandContainer {
flex: 1;
overflow: hidden;
}
._217b73c8e5e3ff6d-showOverflow {
overflow: visible;
}
._97e869e420e80b14-combobox {
height: 100%;
overflow: hidden;
padding: var(--space-8);
}
._97e869e420e80b14-header {
padding-bottom: var(--space-8);
}
._97e869e420e80b14-list {
height: 100%;
list-style: none;
margin-top: 8px;
}
._97e869e420e80b14-list._97e869e420e80b14-scroller {
margin-block: 0 8px;
margin-inline: 8px 0;
}
._97e869e420e80b14-item {
align-items: center;
border-radius: 4px;
color: var(--interactive-text-default);
cursor: pointer;
display: flex;
font-weight: var(--font-weight-medium);
margin-bottom: 4px;
outline: none;
padding: 10px 8px;
}
._97e869e420e80b14-focused,
._97e869e420e80b14-item:hover:not(._97e869e420e80b14-disabled) {
background-color: var(--interactive-background-hover);
color: var(--interactive-text-hover);
}
._97e869e420e80b14-itemLabel {
width: 100%;
}
._97e869e420e80b14-itemCheckbox ~ ._97e869e420e80b14-itemLabel {
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
._97e869e420e80b14-empty {
display: grid;
padding: 20px;
text-align: center;
grid-gap: 12px;
}
._97e869e420e80b14-disabled {
cursor: not-allowed;
opacity: 0.3;
}
._97e869e420e80b14-selected {
background-color: var(--interactive-background-selected);
}
._97e869e420e80b14-selectedBrand {
background: var(--brand-500);
color: var(--white);
}
._97e869e420e80b14-selectedBrand._97e869e420e80b14-focused,
._97e869e420e80b14-selectedBrand:hover {
background: var(--brand-600);
color: var(--white);
}
._97e869e420e80b14-searchWithScrollbar {
margin: 8px;
}
.enable-forced-colors ._97e869e420e80b14-item {
border: 1px solid Canvas;
}
.enable-forced-colors ._97e869e420e80b14-disabled {
color: GrayText;
opacity: 1;
}
.enable-forced-colors ._97e869e420e80b14-disabled._97e869e420e80b14-focused {
border-color: GrayText;
}
.enable-forced-colors ._97e869e420e80b14-focused:not(._97e869e420e80b14-disabled),
.enable-forced-colors ._97e869e420e80b14-item:hover:not(._97e869e420e80b14-disabled) {
background-color: ButtonFace;
border-color: ButtonText;
color: ButtonText;
}
.enable-forced-colors ._97e869e420e80b14-selected:not(._97e869e420e80b14-disabled) {
background-color: HighlightText;
color: Highlight;
}
.enable-forced-colors ._97e869e420e80b14-selected:not(._97e869e420e80b14-disabled)._97e869e420e80b14-focused,
.enable-forced-colors ._97e869e420e80b14-selected:not(._97e869e420e80b14-disabled):hover {
border-color: Highlight;
}
._3dde27fb71170aa9-container {
background-color: var(--modal-background);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
box-sizing: border-box;
overflow: hidden;
padding: 8px;
width: 250px;
}
._3dde27fb71170aa9-scroller {
padding: 0;
}
._3dde27fb71170aa9-list {
height: 280px;
padding: 8px 0;
}
.refresh-fast-follow-distinct-borders ._3dde27fb71170aa9-container {
border-color: var(--app-frame-border);
}
.a516b99f170990eb-positioner {
bottom: 0;
inset-inline: 0;
position: fixed;
text-align: center;
z-index: 1000;
}
.a516b99f170990eb-container {
align-items: center;
background-color: var(--background-surface-high);
border-radius: 8px;
box-shadow: var(--shadow-border), var(--shadow-high);
display: inline-flex;
justify-content: center;
margin: auto auto 16px;
max-width: 90vw;
padding: 16px;
}
.a516b99f170990eb-bindName {
flex: 0 0 auto;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
.a516b99f170990eb-shortcut {
flex: 0 0 auto;
margin: 0 2px;
}
.a516b99f170990eb-separator {
color: var(--text-default);
flex: 0 0 auto;
font-weight: var(--font-weight-semibold);
margin: 0 12px;
}
.a516b99f170990eb-separator:after {
content: "•";
}
.focus-rings-ring {
background: none;
border-radius: var(--__adaptive-focus-ring-radius, 4px);
box-shadow: 0 0 0 4px var(--__adaptive-focus-ring-color, var(--focus-primary, #00b0f4));
display: block;
margin: 0;
padding: 0;
pointer-events: none;
position: absolute;
}
.enable-forced-colors .focus-rings-ring {
forced-color-adjust: none;
--__adaptive-focus-ring-color: CanvasText !important;
border: 2px solid Canvas;
}
.ce6bbd07f52c2e77-fieldWrapper {
padding-top: 4px;
position: relative;
}
.bf202d63ad53e289-interactive {
border-radius: inherit;
color: var(--interactive-text-default);
cursor: pointer;
}
.bf202d63ad53e289-interactive:focus-within,
.bf202d63ad53e289-interactive:hover {
background: var(--interactive-background-hover);
color: var(--interactive-text-hover);
}
.bf202d63ad53e289-interactive:active {
background: var(--interactive-background-active);
color: var(--interactive-text-active);
}
.bf202d63ad53e289-muted {
color: var(--interactive-muted);
}
@media (min-width: 486px) {
.bf202d63ad53e289-selected {
background: var(--interactive-background-selected);
color: var(--interactive-text-active);
}
}
.enable-forced-colors .bf202d63ad53e289-interactive {
background-color: ButtonFace;
border: 1px solid ButtonFace;
color: ButtonText;
forced-color-adjust: none;
}
.enable-forced-colors .bf202d63ad53e289-interactive:focus-within,
.enable-forced-colors .bf202d63ad53e289-interactive:hover {
background-color: ButtonFace;
border-color: ButtonText;
color: ButtonText;
}
.enable-forced-colors .bf202d63ad53e289-interactive.bf202d63ad53e289-selected,
.enable-forced-colors .bf202d63ad53e289-interactive.bf202d63ad53e289-selected:focus-within,
.enable-forced-colors .bf202d63ad53e289-interactive.bf202d63ad53e289-selected:hover {
background-color: Highlight;
border-color: HighlightText;
color: HighlightText;
}
._3ff9235ed5dedd8d-container {
position: relative;
width: 100%;
}
._3ff9235ed5dedd8d-items {
flex-direction: row;
flex-wrap: wrap;
}
._3ff9235ed5dedd8d-itemMeasurements,
._3ff9235ed5dedd8d-items {
display: flex;
}
._3ff9235ed5dedd8d-overflowMeasurement {
display: inline-block;
}
._3ff9235ed5dedd8d-measurements {
inset: 0;
pointer-events: none;
position: absolute;
visibility: hidden;
z-index: -1;
}
._3ff9235ed5dedd8d-tooltip {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
._99f8cc7ad4790ce9-scrollerBase {
box-sizing: border-box;
flex: 1 1 auto;
min-height: 0;
position: relative;
}
._99f8cc7ad4790ce9-auto,
._99f8cc7ad4790ce9-none,
._99f8cc7ad4790ce9-thin {
}
._99f8cc7ad4790ce9-thin::-webkit-scrollbar {
height: 8px;
width: 8px;
}
._99f8cc7ad4790ce9-thin::-webkit-scrollbar-track {
background-color: var(--scrollbar-thin-track);
border: 2px solid var(--scrollbar-thin-track);
border-color: var(--scrollbar-thin-track);
}
._99f8cc7ad4790ce9-thin::-webkit-scrollbar-thumb {
background-clip: padding-box;
background-color: var(--scrollbar-thin-thumb);
border: 2px solid transparent;
border-radius: 4px;
min-height: 40px;
}
._99f8cc7ad4790ce9-thin::-webkit-scrollbar-corner {
background-color: transparent;
}
._99f8cc7ad4790ce9-auto::-webkit-scrollbar {
height: 16px;
width: 16px;
}
._99f8cc7ad4790ce9-auto::-webkit-scrollbar-track {
background-color: var(--scrollbar-auto-track);
}
._99f8cc7ad4790ce9-auto::-webkit-scrollbar-thumb,
._99f8cc7ad4790ce9-auto::-webkit-scrollbar-track {
background-clip: padding-box;
border: 4px solid transparent;
border-radius: 8px;
}
._99f8cc7ad4790ce9-auto::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-auto-thumb);
min-height: 40px;
}
._99f8cc7ad4790ce9-auto::-webkit-scrollbar-corner {
background-color: transparent;
}
._99f8cc7ad4790ce9-none::-webkit-scrollbar {
height: 0;
width: 0;
}
._99f8cc7ad4790ce9-fade::-webkit-scrollbar-thumb,
._99f8cc7ad4790ce9-fade::-webkit-scrollbar-track {
visibility: hidden;
}
._99f8cc7ad4790ce9-fade:hover::-webkit-scrollbar-thumb,
._99f8cc7ad4790ce9-fade:hover::-webkit-scrollbar-track {
visibility: visible;
}
._99f8cc7ad4790ce9-scrolling._99f8cc7ad4790ce9-fade:focus-within::-webkit-scrollbar-thumb,
._99f8cc7ad4790ce9-scrolling._99f8cc7ad4790ce9-fade:focus-within::-webkit-scrollbar-track {
visibility: visible;
}
.no-webkit-scrollbar ._99f8cc7ad4790ce9-thin {
scrollbar-color: var(--scrollbar-thin-thumb) var(--scrollbar-thin-track);
scrollbar-width: thin;
}
.no-webkit-scrollbar ._99f8cc7ad4790ce9-thin._99f8cc7ad4790ce9-fade._99f8cc7ad4790ce9-scrolling,
.no-webkit-scrollbar ._99f8cc7ad4790ce9-thin._99f8cc7ad4790ce9-fade:hover {
scrollbar-color: var(--scrollbar-thin-thumb) var(--scrollbar-thin-track);
}
.no-webkit-scrollbar ._99f8cc7ad4790ce9-auto {
scrollbar-color: var(--scrollbar-auto-scrollbar-color-thumb) var(--scrollbar-auto-scrollbar-color-track);
scrollbar-width: auto;
}
.no-webkit-scrollbar ._99f8cc7ad4790ce9-auto._99f8cc7ad4790ce9-fade._99f8cc7ad4790ce9-scrolling,
.no-webkit-scrollbar ._99f8cc7ad4790ce9-auto._99f8cc7ad4790ce9-fade:hover {
scrollbar-color: var(--scrollbar-auto-scrollbar-color-thumb) var(--scrollbar-auto-scrollbar-color-track);
}
.no-webkit-scrollbar ._99f8cc7ad4790ce9-none {
scrollbar-width: none;
}
.no-webkit-scrollbar ._99f8cc7ad4790ce9-fade {
scrollbar-color: transparent transparent;
}
._99f8cc7ad4790ce9-content {
position: relative;
}
._99f8cc7ad4790ce9-disableScrollAnchor {
overflow-anchor: none;
}
._99f8cc7ad4790ce9-managedReactiveScroller {
overflow-x: hidden;
overflow-y: scroll;
}
._99f8cc7ad4790ce9-pointerCover {
inset: 0;
position: absolute;
z-index: 9999;
}
.enable-forced-colors ::-webkit-scrollbar-track {
border-radius: 0;
border-width: 1px;
}
.enable-forced-colors ::-webkit-scrollbar-thumb {
background-color: CanvasText;
border-width: 1px;
}
.enable-forced-colors ::-webkit-scrollbar-thumb:horizontal:active,
.enable-forced-colors ::-webkit-scrollbar-thumb:horizontal:hover,
.enable-forced-colors ::-webkit-scrollbar-thumb:vertical:active,
.enable-forced-colors ::-webkit-scrollbar-thumb:vertical:hover {
background-color: Highlight;
}
.enable-forced-colors ._99f8cc7ad4790ce9-auto::-webkit-scrollbar {
height: 8px;
width: 8px;
}
.enable-forced-colors ._99f8cc7ad4790ce9-auto::-webkit-scrollbar-track {
border-radius: 0;
border-width: 1px;
}
._650391965b2d6ee2-sliderContainer {
box-sizing: border-box;
overflow: visible;
padding: 0 8px;
}
._650391965b2d6ee2-slider {
position: relative;
top: -4px;
}
._783321f3468cf9e8-backdrop {
position: fixed;
top: 0;
inset-inline: 0 var(--devtools-sidebar-width, 0);
bottom: 0;
transform: translateZ(0);
}
._783321f3468cf9e8-backdrop._783321f3468cf9e8-withLayer {
pointer-events: all;
}
.bc663cf6190ce9ad-backdrop {
background-color: var(--black);
}
.bc663cf6190ce9ad-backdrop,
.bc663cf6190ce9ad-layer {
inset: 0;
position: absolute;
}
.bc663cf6190ce9ad-layer {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 0;
padding-bottom: var(--space-24);
padding-top: var(--space-24);
}
.bc663cf6190ce9ad-layer:has([data-modal-align="top"]) {
bottom: auto;
padding-top: 0;
}
.bc663cf6190ce9ad-inactive > * {
pointer-events: none !important;
z-index: -1;
}
._6e5a015f6ac445fa-content {
padding-bottom: 20px;
}
._6e5a015f6ac445fa-cancelButton {
-webkit-margin-end: var(--space-12);
margin-inline-end: var(--space-12);
}
:root {
--custom-paginator-round-button-size: 28px;
}
.c1521037ef09de7e-pageControlContainer {
bottom: 0;
margin-top: 16px;
width: 100%;
}
.c1521037ef09de7e-pageControl {
margin: auto;
padding: 4px 0;
}
.c1521037ef09de7e-pageButton,
.c1521037ef09de7e-pageControl {
align-items: center;
display: flex;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
}
.c1521037ef09de7e-pageButton {
box-sizing: border-box;
color: var(--text-strong);
cursor: pointer;
font-weight: var(--font-weight-semibold);
height: var(--custom-paginator-round-button-size);
justify-content: center;
margin: 4px;
min-width: var(--custom-paginator-round-button-size);
padding: 6px;
}
.c1521037ef09de7e-pageButton:hover {
background-color: var(--background-secondary-alt);
color: var(--interactive-text-hover);
}
.c1521037ef09de7e-roundButton {
border-radius: 14px;
min-width: var(--custom-paginator-round-button-size);
}
.c1521037ef09de7e-endButton {
padding: 0 8px;
}
.c1521037ef09de7e-endButton:first-child {
-webkit-padding-end: 12px;
padding-inline-end: 12px;
}
.c1521037ef09de7e-endButton:last-child {
-webkit-padding-start: 12px;
padding-inline-start: 12px;
}
.c1521037ef09de7e-endButtonInner {
align-items: center;
display: flex;
}
.c1521037ef09de7e-gap {
color: var(--text-default);
margin: 8px 4px;
text-align: center;
width: var(--custom-paginator-round-button-size);
}
.c1521037ef09de7e-iconCaret {
display: inline-block;
height: 1em;
width: 1em;
}
.c1521037ef09de7e-iconCaret:first-child {
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
.c1521037ef09de7e-iconCaret:last-child {
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
.c1521037ef09de7e-jumpToPageInlineInput {
width: 50px;
}
.c1521037ef09de7e-jumpToPageInlineInput + .c1521037ef09de7e-activeButton {
-webkit-margin-start: 10px;
margin-inline-start: 10px;
}
.c1521037ef09de7e-activeButton + .c1521037ef09de7e-jumpToPageInlineInput {
-webkit-margin-start: 6px;
margin-inline-start: 6px;
}
.enable-forced-colors .c1521037ef09de7e-pageButton {
background-color: ButtonFace;
color: ButtonText;
forced-color-adjust: none;
}
.enable-forced-colors .c1521037ef09de7e-pageButton:hover {
text-decoration: underline;
}
.enable-forced-colors .c1521037ef09de7e-activeButton,
.enable-forced-colors .c1521037ef09de7e-activeButton:hover {
background-color: HighlightText;
color: Highlight;
}
.c1521037ef09de7e-activeButton,
.c1521037ef09de7e-activeButton:hover {
background-color: var(--brand-500);
color: var(--white);
}
.eb626bad733b3a0d-selectableItem {
border-radius: 3px;
box-sizing: border-box;
height: 34px;
margin: 2px 0;
padding: 8px 10px;
-webkit-margin-end: 4px;
color: var(--text-strong);
cursor: pointer;
margin-inline-end: 4px;
}
.eb626bad733b3a0d-selectableItem.eb626bad733b3a0d-selected {
cursor: default;
}
.eb626bad733b3a0d-selectableItemLabel {
font-size: 16px;
overflow: hidden;
position: relative;
text-overflow: ellipsis;
top: 1px;
white-space: nowrap;
}
.theme-light .eb626bad733b3a0d-selectableItem:focus,
.theme-light .eb626bad733b3a0d-selectableItem:hover {
background-color: var(--primary-200);
}
.theme-dark .eb626bad733b3a0d-selectableItem:focus,
.theme-dark .eb626bad733b3a0d-selectableItem:hover {
background-color: hsl(var(--primary-700-hsl) / 0.6);
}
.enable-forced-colors .eb626bad733b3a0d-selectableItem:focus,
.enable-forced-colors .eb626bad733b3a0d-selectableItem:hover {
outline: 1px solid Highlight;
outline-offset: -1px;
}
._92efc8f0d8abb645-popoutList {
background: var(--background-secondary-alt);
border-radius: 5px;
padding: 10px 10px 0;
}
._92efc8f0d8abb645-popoutListEmpty {
box-sizing: border-box;
color: var(--text-strong);
cursor: default;
margin-block: 2px;
margin-inline: 0 4px;
padding: 8px 10px 0;
}
._92efc8f0d8abb645-divider {
margin: 8px 0;
}
.enable-forced-colors ._92efc8f0d8abb645-popoutList {
border: 2px solid CanvasText;
}
._4f569b8941af22d1-svg {
display: inline-block;
flex-shrink: 0;
forced-color-adjust: none;
height: 1.25em;
vertical-align: text-bottom;
width: 1.25em;
}
._4f569b8941af22d1-background {
fill: var(--background-secondary-alt);
}
._4f569b8941af22d1-dot,
._4f569b8941af22d1-dotBorderColor {
}
._4f569b8941af22d1-dotBorderColor {
opacity: 0.4;
}
._4f569b8941af22d1-roleCircle {
align-items: center;
border-radius: 50%;
display: flex;
flex-shrink: 0;
forced-color-adjust: none;
height: 12px;
justify-content: center;
margin: 0 4px;
padding: 0;
width: 12px;
}
._4f569b8941af22d1-dotBorderBase {
fill: var(--text-strong);
}
._703b91fc872193e8-roleDotRight {
-webkit-margin-start: 0.25rem;
margin-inline-start: 0.25rem;
}
._703b91fc872193e8-roleDotLeft {
-webkit-margin-end: 0.25rem;
margin-inline-end: 0.25rem;
}
._703b91fc872193e8-username {
}
._703b91fc872193e8-container {
text-decoration: inherit;
}
._703b91fc872193e8-container,
._703b91fc872193e8-nameContainer {
display: inline-flex;
max-width: 100%;
min-width: 0;
}
._703b91fc872193e8-nameContainer {
position: relative;
z-index: 0;
}
._703b91fc872193e8-name {
position: relative;
}
._703b91fc872193e8-name,
._703b91fc872193e8-nameGlow {
overflow: hidden;
text-overflow: ellipsis;
}
._703b91fc872193e8-nameGlow {
height: 100%;
inset: 0;
position: absolute;
width: 100%;
}
._9e06aaa5aecd6e3e-tabItem {
cursor: pointer;
font-size: 13px;
-webkit-margin-end: 20px;
margin-inline-end: 20px;
padding-bottom: 20px;
padding-top: 20px;
}
._9e06aaa5aecd6e3e-tabContainer {
color: var(--text-muted);
}
._9e06aaa5aecd6e3e-pillContainer,
._9e06aaa5aecd6e3e-tabContainer {
display: flex;
flex-direction: row;
}
._9e06aaa5aecd6e3e-pillContainer {
background-color: var(--background-base-lowest);
border-radius: var(--radius-md);
gap: var(--space-4);
justify-content: stretch;
padding: var(--space-4);
}
._9e06aaa5aecd6e3e-pillItem {
border-radius: var(--radius-sm);
color: var(--text-subtle);
cursor: pointer;
display: flex;
flex: 1 1 auto;
justify-content: center;
padding: 8px 16px;
}
._9e06aaa5aecd6e3e-pillItem:not(._9e06aaa5aecd6e3e-pillItemSelected):hover {
background-color: var(--background-mod-subtle);
}
._9e06aaa5aecd6e3e-pillItemSelected {
background-color: var(--background-surface-high);
color: var(--interactive-text-active);
}
.theme-dark ._9e06aaa5aecd6e3e-tabItemSelected {
border-bottom: 2px solid var(--primary-100);
}
.theme-light ._9e06aaa5aecd6e3e-tabItemSelected {
border-bottom: 2px solid var(--primary-500);
}
._9e06aaa5aecd6e3e-tabItemSelected {
color: var(--text-strong);
}
._9e06aaa5aecd6e3e-icon {
height: 16px;
width: 16px;
}
._9e06aaa5aecd6e3e-controlText {
align-items: center;
display: flex;
gap: var(--space-8);
}
._9e06aaa5aecd6e3e-pillItemText {
line-height: 1;
}
._9e06aaa5aecd6e3e-disabled {
cursor: not-allowed;
}
._9e06aaa5aecd6e3e-disabledContainer {
opacity: 0.3;
}
._6ba63b0447df0219-transitionGroup {
overflow: hidden;
position: relative;
}
._6ba63b0447df0219-measurement {
overflow: hidden;
}
._6ba63b0447df0219-measurementFill {
flex: 0 0 auto;
width: 100%;
}
._6ba63b0447df0219-measurementFillStatic {
height: 100%;
}
._6ba63b0447df0219-animatedNode {
width: 100%;
}
@media screen and (max-height: 550px), screen and (max-width: 485px) {
._59d99a8d5d164e77-outerAnimatedDivDynamicSizing {
min-height: 100% !important;
min-width: 100% !important;
}
._59d99a8d5d164e77-innerAnimatedDivDynamicSizing {
width: 100% !important;
}
}
._45edcb804b380ac6-containerTop {
top: calc(var(--custom-app-top-bar-height) + var(--space-8));
}
._45edcb804b380ac6-containerBottom,
._45edcb804b380ac6-containerTop {
display: flex;
flex-direction: column;
inset-inline-start: 50%;
position: fixed;
transform: translateX(-50%);
z-index: 4999;
}
._45edcb804b380ac6-containerBottom {
bottom: 140px;
}
._75013b1dce6b6e1d-breadcrumbs {
overflow: hidden;
}
._75013b1dce6b6e1d-breadcrumbWrapper {
align-items: center;
color: var(--text-muted);
display: flex;
flex-grow: 0;
font-weight: var(--font-weight-semibold);
}
._75013b1dce6b6e1d-activeBreadcrumb {
color: var(--interactive-text-active);
}
._75013b1dce6b6e1d-breadcrumbClickWrapper,
._75013b1dce6b6e1d-breadcrumbFinalWrapper {
overflow: hidden;
}
._75013b1dce6b6e1d-breadcrumb {
font-size: 14px;
}
._75013b1dce6b6e1d-breadcrumbArrow {
height: 18px;
width: 18px;
}
._75013b1dce6b6e1d-interactiveBreadcrumb {
cursor: pointer;
}
._459fb7bcd881f8d6-container {
display: flex;
flex-wrap: wrap;
margin-top: -10px;
-webkit-margin-end: -10px;
margin-inline-end: -10px;
}
._459fb7bcd881f8d6-container._459fb7bcd881f8d6-gradient {
flex-wrap: nowrap;
}
._459fb7bcd881f8d6-customContainer,
._459fb7bcd881f8d6-defaultContainer {
margin-top: 10px;
-webkit-margin-end: 10px;
flex: 1;
margin-inline-end: 10px;
max-width: 70px;
min-width: 60px;
}
._459fb7bcd881f8d6-custom ._459fb7bcd881f8d6-preset {
display: flex;
flex: 1 1 auto;
flex-direction: vertical;
}
._459fb7bcd881f8d6-customColorPicker {
background-color: var(--background-base-low);
border: 1px solid var(--border-subtle);
border-radius: 4px;
box-shadow: var(--shadow-border), var(--shadow-high);
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px;
width: 220px;
}
._459fb7bcd881f8d6-customColorPickerInputContainer {
align-items: center;
display: flex;
gap: 12px;
}
._459fb7bcd881f8d6-customColorPickerEyeDropper {
align-items: center;
cursor: pointer;
display: flex;
height: 16px;
justify-content: center;
margin: 0;
width: 16px;
}
._459fb7bcd881f8d6-customColorPickerInput {
flex: 1;
}
._459fb7bcd881f8d6-customColorPickerInput ._459fb7bcd881f8d6-input {
height: 24px;
text-transform: uppercase;
}
._459fb7bcd881f8d6-colorPickerRow {
display: flex;
flex-wrap: wrap;
height: 20px;
margin-top: 10px;
overflow: hidden;
}
._459fb7bcd881f8d6-colorPickerSwatch {
background-color: transparent;
border-radius: 3px;
box-sizing: border-box;
height: 20px;
position: relative;
width: 20px;
-webkit-margin-end: 10px;
align-items: center;
border: 1px solid transparent;
cursor: pointer;
display: flex;
justify-content: center;
margin-inline-end: 10px;
padding: 0;
}
._459fb7bcd881f8d6-colorPickerSwatch._459fb7bcd881f8d6-custom,
._459fb7bcd881f8d6-colorPickerSwatch._459fb7bcd881f8d6-default {
-webkit-margin-end: 0;
border-radius: 4px;
height: 50px;
margin-inline-end: 0;
width: 100%;
}
._459fb7bcd881f8d6-colorPickerSwatch._459fb7bcd881f8d6-gradientPreset {
border: none;
height: 20px;
width: 40px;
-webkit-margin-end: var(--space-8);
margin-inline-end: var(--space-8);
}
._459fb7bcd881f8d6-colorPickerSwatch._459fb7bcd881f8d6-disabled {
cursor: not-allowed;
opacity: 0.3;
pointer-events: none;
}
._459fb7bcd881f8d6-colorPickerSwatch ._459fb7bcd881f8d6-colorPickerDropper {
inset-inline-end: 4px;
position: absolute;
top: 4px;
}
._459fb7bcd881f8d6-suggestedColors {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
._459fb7bcd881f8d6-suggestedColor {
border: 1px solid var(--primary-400);
border-radius: 4px;
cursor: pointer;
height: 32px;
width: 32px;
}
.theme-dark ._459fb7bcd881f8d6-colorPickerSwatch._459fb7bcd881f8d6-noColor {
border-color: var(--opacity-white-8);
}
.theme-light ._459fb7bcd881f8d6-colorPickerSwatch._459fb7bcd881f8d6-noColor {
border-color: hsl(var(--primary-500-hsl) / 0.1);
}
.enable-forced-colors ._459fb7bcd881f8d6-colorPickerSwatch {
border: 1px solid ButtonText;
forced-color-adjust: none;
}
.enable-forced-colors ._459fb7bcd881f8d6-colorPickerSwatch._459fb7bcd881f8d6-disabled {
border-color: GrayText;
}
.fffc15720e237bf1-copyInput {
background-color: var(--input-background-default);
border: 1px solid var(--input-border-default);
border-radius: var(--radius-sm);
box-sizing: border-box;
cursor: pointer;
height: 40px;
overflow: hidden;
position: relative;
transition: border-color 0.2s ease-in-out;
}
.fffc15720e237bf1-copyInputDefault,
.fffc15720e237bf1-copyInputError {
}
.fffc15720e237bf1-copyInputError {
background-color: var(--background-feedback-critical);
border-color: var(--text-feedback-critical);
color: var(--text-feedback-critical);
}
.fffc15720e237bf1-copyInputSuccess {
background-color: var(--background-feedback-positive);
border-color: var(--text-feedback-positive);
color: var(--text-feedback-positive);
}
.fffc15720e237bf1-layout {
inset: 0;
position: absolute;
}
.fffc15720e237bf1-inputWrapper {
position: relative;
}
.fffc15720e237bf1-button {
border-radius: var(--radius-xs);
margin-block: 4px;
margin-inline: 0 4px;
padding: 2px 20px !important;
transition:
background-color 0.2s ease-in-out,
color 0.2s ease-in-out;
}
.fffc15720e237bf1-hiddenMessage,
.fffc15720e237bf1-input {
background-color: transparent;
font-size: 16px;
line-height: 20px;
overflow: hidden;
padding-block: 10px;
padding-inline: 10px 0;
position: relative;
text-overflow: ellipsis;
white-space: nowrap;
}
.fffc15720e237bf1-input {
border: none;
box-sizing: border-box;
cursor: text;
flex: 1 1 auto;
min-width: 0;
transition: color 0.15s ease;
width: 100%;
}
.fffc15720e237bf1-inputDefault {
}
.fffc15720e237bf1-inputError,
.fffc15720e237bf1-inputSuccess {
color: var(--text-default);
}
.fffc15720e237bf1-hiddenMessage {
inset: 0;
position: absolute;
z-index: 0;
}
.fffc15720e237bf1-inputHidden {
visibility: hidden;
}
.fffc15720e237bf1-hiddenMessage,
.fffc15720e237bf1-inputDefault {
color: var(--text-default);
}
.fffc15720e237bf1-hiddenMessage::-moz-placeholder,
.fffc15720e237bf1-inputDefault::-moz-placeholder {
color: var(--input-placeholder-text-default);
}
.fffc15720e237bf1-hiddenMessage::placeholder,
.fffc15720e237bf1-inputDefault::placeholder {
color: var(--input-placeholder-text-default);
}
._33d1236760f7073e-wrapper {
height: 100%;
margin-inline: auto;
max-width: 440px;
width: 100%;
}
._33d1236760f7073e-image {
background-size: 100% 100%;
}
._33d1236760f7073e-title {
font-size: 17px;
font-weight: var(--font-weight-semibold);
line-height: 22px;
text-transform: uppercase;
}
._33d1236760f7073e-text,
._33d1236760f7073e-title {
color: var(--text-muted);
text-align: center;
}
._33d1236760f7073e-text {
font-size: 16px;
line-height: 20px;
}
._4e371fb81a6ac74d-slider {
inset-inline: 0;
bottom: 0;
position: absolute;
}
._6a443ac3b8a8970b-shinyButton {
overflow: hidden;
}
._6a443ac3b8a8970b-buttonShine,
._6a443ac3b8a8970b-shinyButton > * {
pointer-events: none;
}
._6a443ac3b8a8970b-buttonShine {
color: var(--opacity-white-8);
}
.full-motion ._6a443ac3b8a8970b-buttonShine {
animation-delay: 0.75s;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-name: _6a443ac3b8a8970b-Shine;
animation-timing-function: ease-in-out;
}
.reduce-motion ._6a443ac3b8a8970b-buttonShine {
transform: translate3d(calc(100% - 32px), 0, 0);
}
.full-motion ._6a443ac3b8a8970b-onlyShineOnHover {
animation-delay: 0s;
animation-name: _6a443ac3b8a8970b-InstantShine;
}
._6a443ac3b8a8970b-shineContainer {
bottom: 0;
position: absolute;
top: -50%;
inset-inline: -50% 0;
}
._6a443ac3b8a8970b-shine {
background-color: currentColor;
height: 300%;
position: relative;
top: -100%;
transform: rotate(30deg);
}
._6a443ac3b8a8970b-shineDefault {
width: 56px;
}
._6a443ac3b8a8970b-shineSmall {
width: 30px;
}
._6a443ac3b8a8970b-shinePaused {
animation-play-state: paused;
}
._6a443ac3b8a8970b-shineInner {
background-color: currentColor;
height: 100%;
}
._6a443ac3b8a8970b-shineInnerDefault {
width: 16px;
}
._6a443ac3b8a8970b-shineInnerSmall {
width: 10px;
}
@keyframes _6a443ac3b8a8970b-Shine {
0% {
transform: translate3d(-50%, 0, 0);
}
to {
transform: translate3d(200%, 0, 0);
}
}
@keyframes _6a443ac3b8a8970b-InstantShine {
0% {
transform: translateZ(0);
}
to {
transform: translate3d(200%, 0, 0);
}
}
._0c4c409e1915aba4-iconLayout {
align-items: center;
box-sizing: border-box;
cursor: text;
display: flex;
justify-content: center;
}
._0c4c409e1915aba4-iconLayout[data-size="sm"],
._0c4c409e1915aba4-iconLayout[data-size="sm"] ._0c4c409e1915aba4-iconContainer {
height: var(--icon-size-xs);
width: var(--icon-size-xs);
}
._0c4c409e1915aba4-iconLayout[data-size="md"],
._0c4c409e1915aba4-iconLayout[data-size="md"] ._0c4c409e1915aba4-iconContainer {
height: var(--icon-size-sm);
width: var(--icon-size-sm);
}
._0c4c409e1915aba4-pointer {
cursor: pointer;
}
._0c4c409e1915aba4-iconContainer {
position: relative;
}
._0c4c409e1915aba4-icon {
box-sizing: border-box;
color: var(--interactive-text-default);
height: 100%;
inset-inline-start: 0;
opacity: 0;
position: absolute;
top: 0;
transform: rotate(90deg);
width: 100%;
}
.full-motion ._0c4c409e1915aba4-icon {
transition:
transform 0.1s ease-out,
opacity 0.1s ease-out;
}
._0c4c409e1915aba4-icon._0c4c409e1915aba4-visible {
opacity: 1;
transform: rotate(0deg);
}
._0c4c409e1915aba4-clear {
}
._0c4c409e1915aba4-iconLayout:hover ._0c4c409e1915aba4-clear {
color: var(--interactive-text-hover);
}
._0c4c409e1915aba4-iconLayout:active ._0c4c409e1915aba4-clear {
color: var(--interactive-text-active);
}
.enable-forced-colors ._0c4c409e1915aba4-icon {
background-color: Canvas;
border: 1px solid Canvas;
color: GrayText;
}
.enable-forced-colors ._0c4c409e1915aba4-clear {
background-color: ButtonFace;
border-color: CanvasText;
color: ButtonText;
}
.enable-forced-colors ._0c4c409e1915aba4-iconLayout:active ._0c4c409e1915aba4-clear,
.enable-forced-colors ._0c4c409e1915aba4-iconLayout:hover ._0c4c409e1915aba4-clear {
border-color: ButtonText;
color: ButtonText;
}
._2b1f52e43a8f1c02-heading-sm\/normal {
font-family: var(--font-display);
font-size: 14px;
font-weight: 400;
line-height: 1.2857142857142858;
}
._2b1f52e43a8f1c02-heading-sm\/normal._2b1f52e43a8f1c02-fontScaling {
font-size: 0.875rem;
}
._2b1f52e43a8f1c02-heading-sm\/medium {
font-family: var(--font-display);
font-size: 14px;
font-weight: 500;
line-height: 1.2857142857142858;
}
._2b1f52e43a8f1c02-heading-sm\/medium._2b1f52e43a8f1c02-fontScaling {
font-size: 0.875rem;
}
._2b1f52e43a8f1c02-heading-sm\/semibold {
font-family: var(--font-display);
font-size: 14px;
font-weight: 600;
line-height: 1.2857142857142858;
}
._2b1f52e43a8f1c02-heading-sm\/semibold._2b1f52e43a8f1c02-fontScaling {
font-size: 0.875rem;
}
._2b1f52e43a8f1c02-heading-sm\/bold {
font-family: var(--font-display);
font-size: 14px;
font-weight: 700;
line-height: 1.2857142857142858;
}
._2b1f52e43a8f1c02-heading-sm\/bold._2b1f52e43a8f1c02-fontScaling {
font-size: 0.875rem;
}
._2b1f52e43a8f1c02-heading-sm\/extrabold {
font-family: var(--font-display);
font-size: 14px;
font-weight: 800;
line-height: 1.2857142857142858;
}
._2b1f52e43a8f1c02-heading-sm\/extrabold._2b1f52e43a8f1c02-fontScaling {
font-size: 0.875rem;
}
._2b1f52e43a8f1c02-heading-md\/normal {
font-family: var(--font-display);
font-size: 16px;
font-weight: 400;
line-height: 1.25;
}
._2b1f52e43a8f1c02-heading-md\/normal._2b1f52e43a8f1c02-fontScaling {
font-size: 1rem;
}
._2b1f52e43a8f1c02-heading-md\/medium {
font-family: var(--font-display);
font-size: 16px;
font-weight: 500;
line-height: 1.25;
}
._2b1f52e43a8f1c02-heading-md\/medium._2b1f52e43a8f1c02-fontScaling {
font-size: 1rem;
}
._2b1f52e43a8f1c02-heading-md\/semibold {
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
line-height: 1.25;
}
._2b1f52e43a8f1c02-heading-md\/semibold._2b1f52e43a8f1c02-fontScaling {
font-size: 1rem;
}
._2b1f52e43a8f1c02-heading-md\/bold {
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
line-height: 1.25;
}
._2b1f52e43a8f1c02-heading-md\/bold._2b1f52e43a8f1c02-fontScaling {
font-size: 1rem;
}
._2b1f52e43a8f1c02-heading-md\/extrabold {
font-family: var(--font-display);
font-size: 16px;
font-weight: 800;
line-height: 1.25;
}
._2b1f52e43a8f1c02-heading-md\/extrabold._2b1f52e43a8f1c02-fontScaling {
font-size: 1rem;
}
._2b1f52e43a8f1c02-heading-lg\/normal {
font-family: var(--font-display);
font-size: 20px;
font-weight: 400;
line-height: 1.2;
}
._2b1f52e43a8f1c02-heading-lg\/normal._2b1f52e43a8f1c02-fontScaling {
font-size: 1.25rem;
}
._2b1f52e43a8f1c02-heading-lg\/medium {
font-family: var(--font-display);
font-size: 20px;
font-weight: 500;
line-height: 1.2;
}
._2b1f52e43a8f1c02-heading-lg\/medium._2b1f52e43a8f1c02-fontScaling {
font-size: 1.25rem;
}
._2b1f52e43a8f1c02-heading-lg\/semibold {
font-family: var(--font-display);
font-size: 20px;
font-weight: 600;
line-height: 1.2;
}
._2b1f52e43a8f1c02-heading-lg\/semibold._2b1f52e43a8f1c02-fontScaling {
font-size: 1.25rem;
}
._2b1f52e43a8f1c02-heading-lg\/bold {
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
line-height: 1.2;
}
._2b1f52e43a8f1c02-heading-lg\/bold._2b1f52e43a8f1c02-fontScaling {
font-size: 1.25rem;
}
._2b1f52e43a8f1c02-heading-lg\/extrabold {
font-family: var(--font-display);
font-size: 20px;
font-weight: 800;
line-height: 1.2;
}
._2b1f52e43a8f1c02-heading-lg\/extrabold._2b1f52e43a8f1c02-fontScaling {
font-size: 1.25rem;
}
._2b1f52e43a8f1c02-heading-xl\/normal {
font-family: var(--font-display);
font-size: 24px;
font-weight: 400;
line-height: 1.25;
}
._2b1f52e43a8f1c02-heading-xl\/normal._2b1f52e43a8f1c02-fontScaling {
font-size: 1.5rem;
}
._2b1f52e43a8f1c02-heading-xl\/medium {
font-family: var(--font-display);
font-size: 24px;
font-weight: 500;
line-height: 1.25;
}
._2b1f52e43a8f1c02-heading-xl\/medium._2b1f52e43a8f1c02-fontScaling {
font-size: 1.5rem;
}
._2b1f52e43a8f1c02-heading-xl\/semibold {
font-family: var(--font-display);
font-size: 24px;
font-weight: 600;
line-height: 1.25;
}
._2b1f52e43a8f1c02-heading-xl\/semibold._2b1f52e43a8f1c02-fontScaling {
font-size: 1.5rem;
}
._2b1f52e43a8f1c02-heading-xl\/bold {
font-family: var(--font-display);
font-size: 24px;
font-weight: 700;
line-height: 1.25;
}
._2b1f52e43a8f1c02-heading-xl\/bold._2b1f52e43a8f1c02-fontScaling {
font-size: 1.5rem;
}
._2b1f52e43a8f1c02-heading-xl\/extrabold {
font-family: var(--font-display);
font-size: 24px;
font-weight: 800;
line-height: 1.25;
}
._2b1f52e43a8f1c02-heading-xl\/extrabold._2b1f52e43a8f1c02-fontScaling {
font-size: 1.5rem;
}
._2b1f52e43a8f1c02-heading-xxl\/normal {
font-family: var(--font-display);
font-size: 32px;
font-weight: 400;
line-height: 1.25;
}
._2b1f52e43a8f1c02-heading-xxl\/normal._2b1f52e43a8f1c02-fontScaling {
font-size: 2rem;
}
._2b1f52e43a8f1c02-heading-xxl\/medium {
font-family: var(--font-display);
font-size: 32px;
font-weight: 500;
line-height: 1.25;
}
._2b1f52e43a8f1c02-heading-xxl\/medium._2b1f52e43a8f1c02-fontScaling {
font-size: 2rem;
}
._2b1f52e43a8f1c02-heading-xxl\/semibold {
font-family: var(--font-display);
font-size: 32px;
font-weight: 600;
line-height: 1.25;
}
._2b1f52e43a8f1c02-heading-xxl\/semibold._2b1f52e43a8f1c02-fontScaling {
font-size: 2rem;
}
._2b1f52e43a8f1c02-heading-xxl\/bold {
font-family: var(--font-display);
font-size: 32px;
font-weight: 700;
line-height: 1.25;
}
._2b1f52e43a8f1c02-heading-xxl\/bold._2b1f52e43a8f1c02-fontScaling {
font-size: 2rem;
}
._2b1f52e43a8f1c02-heading-xxl\/extrabold {
font-family: var(--font-display);
font-size: 32px;
font-weight: 800;
line-height: 1.25;
}
._2b1f52e43a8f1c02-heading-xxl\/extrabold._2b1f52e43a8f1c02-fontScaling {
font-size: 2rem;
}
._2b1f52e43a8f1c02-eyebrow {
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.3333333333333333;
text-transform: uppercase;
}
._2b1f52e43a8f1c02-eyebrow._2b1f52e43a8f1c02-fontScaling {
font-size: 0.75rem;
}
._2b1f52e43a8f1c02-heading-deprecated-12\/normal {
font-family: var(--font-display);
font-size: 12px;
font-weight: 400;
line-height: 1.3333333333333333;
}
._2b1f52e43a8f1c02-heading-deprecated-12\/normal._2b1f52e43a8f1c02-fontScaling {
font-size: 0.75rem;
}
._2b1f52e43a8f1c02-heading-deprecated-12\/medium {
font-family: var(--font-display);
font-size: 12px;
font-weight: 500;
line-height: 1.3333333333333333;
}
._2b1f52e43a8f1c02-heading-deprecated-12\/medium._2b1f52e43a8f1c02-fontScaling {
font-size: 0.75rem;
}
._2b1f52e43a8f1c02-heading-deprecated-12\/semibold {
font-family: var(--font-display);
font-size: 12px;
font-weight: 600;
line-height: 1.3333333333333333;
}
._2b1f52e43a8f1c02-heading-deprecated-12\/semibold._2b1f52e43a8f1c02-fontScaling {
font-size: 0.75rem;
}
._2b1f52e43a8f1c02-heading-deprecated-12\/bold {
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
line-height: 1.3333333333333333;
}
._2b1f52e43a8f1c02-heading-deprecated-12\/bold._2b1f52e43a8f1c02-fontScaling {
font-size: 0.75rem;
}
._2b1f52e43a8f1c02-heading-deprecated-12\/extrabold {
font-family: var(--font-display);
font-size: 12px;
font-weight: 800;
line-height: 1.3333333333333333;
}
._2b1f52e43a8f1c02-heading-deprecated-12\/extrabold._2b1f52e43a8f1c02-fontScaling {
font-size: 0.75rem;
}
._2b1f52e43a8f1c02-redesign\/heading-18\/bold {
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
line-height: 1.3333333333333333;
}
._2b1f52e43a8f1c02-redesign\/heading-18\/bold._2b1f52e43a8f1c02-fontScaling {
font-size: 1.125rem;
}
._2b1f52e43a8f1c02-text-xxs\/normal {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 400;
line-height: 1.2;
}
._2b1f52e43a8f1c02-text-xxs\/normal._2b1f52e43a8f1c02-fontScaling {
font-size: 0.625rem;
}
._2b1f52e43a8f1c02-text-xxs\/medium {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 500;
line-height: 1.2;
}
._2b1f52e43a8f1c02-text-xxs\/medium._2b1f52e43a8f1c02-fontScaling {
font-size: 0.625rem;
}
._2b1f52e43a8f1c02-text-xxs\/semibold {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 600;
line-height: 1.2;
}
._2b1f52e43a8f1c02-text-xxs\/semibold._2b1f52e43a8f1c02-fontScaling {
font-size: 0.625rem;
}
._2b1f52e43a8f1c02-text-xxs\/bold {
font-family: var(--font-primary);
font-size: 10px;
font-weight: 700;
line-height: 1.2;
}
._2b1f52e43a8f1c02-text-xxs\/bold._2b1f52e43a8f1c02-fontScaling {
font-size: 0.625rem;
}
._2b1f52e43a8f1c02-text-xs\/normal {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 400;
line-height: 1.3333333333333333;
}
._2b1f52e43a8f1c02-text-xs\/normal._2b1f52e43a8f1c02-fontScaling {
font-size: 0.75rem;
}
._2b1f52e43a8f1c02-text-xs\/medium {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 500;
line-height: 1.3333333333333333;
}
._2b1f52e43a8f1c02-text-xs\/medium._2b1f52e43a8f1c02-fontScaling {
font-size: 0.75rem;
}
._2b1f52e43a8f1c02-text-xs\/semibold {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 600;
line-height: 1.3333333333333333;
}
._2b1f52e43a8f1c02-text-xs\/semibold._2b1f52e43a8f1c02-fontScaling {
font-size: 0.75rem;
}
._2b1f52e43a8f1c02-text-xs\/bold {
font-family: var(--font-primary);
font-size: 12px;
font-weight: 700;
line-height: 1.3333333333333333;
}
._2b1f52e43a8f1c02-text-xs\/bold._2b1f52e43a8f1c02-fontScaling {
font-size: 0.75rem;
}
._2b1f52e43a8f1c02-text-sm\/normal {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 400;
line-height: 1.2857142857142858;
}
._2b1f52e43a8f1c02-text-sm\/normal._2b1f52e43a8f1c02-fontScaling {
font-size: 0.875rem;
}
._2b1f52e43a8f1c02-text-sm\/medium {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 500;
line-height: 1.2857142857142858;
}
._2b1f52e43a8f1c02-text-sm\/medium._2b1f52e43a8f1c02-fontScaling {
font-size: 0.875rem;
}
._2b1f52e43a8f1c02-text-sm\/semibold {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 600;
line-height: 1.2857142857142858;
}
._2b1f52e43a8f1c02-text-sm\/semibold._2b1f52e43a8f1c02-fontScaling {
font-size: 0.875rem;
}
._2b1f52e43a8f1c02-text-sm\/bold {
font-family: var(--font-primary);
font-size: 14px;
font-weight: 700;
line-height: 1.2857142857142858;
}
._2b1f52e43a8f1c02-text-sm\/bold._2b1f52e43a8f1c02-fontScaling {
font-size: 0.875rem;
}
._2b1f52e43a8f1c02-text-md\/normal {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 400;
line-height: 1.25;
}
._2b1f52e43a8f1c02-text-md\/normal._2b1f52e43a8f1c02-fontScaling {
font-size: 1rem;
}
._2b1f52e43a8f1c02-text-md\/medium {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 500;
line-height: 1.25;
}
._2b1f52e43a8f1c02-text-md\/medium._2b1f52e43a8f1c02-fontScaling {
font-size: 1rem;
}
._2b1f52e43a8f1c02-text-md\/semibold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 600;
line-height: 1.25;
}
._2b1f52e43a8f1c02-text-md\/semibold._2b1f52e43a8f1c02-fontScaling {
font-size: 1rem;
}
._2b1f52e43a8f1c02-text-md\/bold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 700;
line-height: 1.25;
}
._2b1f52e43a8f1c02-text-md\/bold._2b1f52e43a8f1c02-fontScaling {
font-size: 1rem;
}
._2b1f52e43a8f1c02-text-lg\/normal {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 400;
line-height: 1.2;
}
._2b1f52e43a8f1c02-text-lg\/normal._2b1f52e43a8f1c02-fontScaling {
font-size: 1.25rem;
}
._2b1f52e43a8f1c02-text-lg\/medium {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 500;
line-height: 1.2;
}
._2b1f52e43a8f1c02-text-lg\/medium._2b1f52e43a8f1c02-fontScaling {
font-size: 1.25rem;
}
._2b1f52e43a8f1c02-text-lg\/semibold {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 600;
line-height: 1.2;
}
._2b1f52e43a8f1c02-text-lg\/semibold._2b1f52e43a8f1c02-fontScaling {
font-size: 1.25rem;
}
._2b1f52e43a8f1c02-text-lg\/bold {
font-family: var(--font-primary);
font-size: 20px;
font-weight: 700;
line-height: 1.2;
}
._2b1f52e43a8f1c02-text-lg\/bold._2b1f52e43a8f1c02-fontScaling {
font-size: 1.25rem;
}
._2b1f52e43a8f1c02-redesign\/message-preview\/normal {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 400;
line-height: 1.3333333333333333;
}
._2b1f52e43a8f1c02-redesign\/message-preview\/normal._2b1f52e43a8f1c02-fontScaling {
font-size: 0.9375rem;
}
._2b1f52e43a8f1c02-redesign\/message-preview\/medium {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 500;
line-height: 1.3333333333333333;
}
._2b1f52e43a8f1c02-redesign\/message-preview\/medium._2b1f52e43a8f1c02-fontScaling {
font-size: 0.9375rem;
}
._2b1f52e43a8f1c02-redesign\/message-preview\/semibold {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 600;
line-height: 1.3333333333333333;
}
._2b1f52e43a8f1c02-redesign\/message-preview\/semibold._2b1f52e43a8f1c02-fontScaling {
font-size: 0.9375rem;
}
._2b1f52e43a8f1c02-redesign\/message-preview\/bold {
font-family: var(--font-primary);
font-size: 15px;
font-weight: 700;
line-height: 1.3333333333333333;
}
._2b1f52e43a8f1c02-redesign\/message-preview\/bold._2b1f52e43a8f1c02-fontScaling {
font-size: 0.9375rem;
}
._2b1f52e43a8f1c02-redesign\/channel-title\/normal {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 400;
line-height: 1.375;
}
._2b1f52e43a8f1c02-redesign\/channel-title\/normal._2b1f52e43a8f1c02-fontScaling {
font-size: 1rem;
}
._2b1f52e43a8f1c02-redesign\/channel-title\/medium {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 500;
line-height: 1.375;
}
._2b1f52e43a8f1c02-redesign\/channel-title\/medium._2b1f52e43a8f1c02-fontScaling {
font-size: 1rem;
}
._2b1f52e43a8f1c02-redesign\/channel-title\/semibold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 600;
line-height: 1.375;
}
._2b1f52e43a8f1c02-redesign\/channel-title\/semibold._2b1f52e43a8f1c02-fontScaling {
font-size: 1rem;
}
._2b1f52e43a8f1c02-redesign\/channel-title\/bold {
font-family: var(--font-primary);
font-size: 16px;
font-weight: 700;
line-height: 1.375;
}
._2b1f52e43a8f1c02-redesign\/channel-title\/bold._2b1f52e43a8f1c02-fontScaling {
font-size: 1rem;
}
._2b1f52e43a8f1c02-display-sm {
font-family: var(--font-headline);
font-size: 20px;
font-weight: 800;
line-height: 1;
}
._2b1f52e43a8f1c02-display-sm._2b1f52e43a8f1c02-fontScaling {
font-size: 1.25rem;
}
._2b1f52e43a8f1c02-display-md {
font-family: var(--font-headline);
font-size: 34px;
font-weight: 800;
line-height: 1.0588235294117647;
}
._2b1f52e43a8f1c02-display-md._2b1f52e43a8f1c02-fontScaling {
font-size: 2.125rem;
}
._2b1f52e43a8f1c02-display-lg {
font-family: var(--font-headline);
font-size: 44px;
font-weight: 800;
line-height: 0.9545454545454546;
}
._2b1f52e43a8f1c02-display-lg._2b1f52e43a8f1c02-fontScaling {
font-size: 2.75rem;
}
._2b1f52e43a8f1c02-code {
font-family: var(--font-code);
font-size: 12px;
font-weight: 700;
line-height: 1.3333333333333333;
}
._2b1f52e43a8f1c02-code._2b1f52e43a8f1c02-fontScaling {
font-size: 0.75rem;
}
._2b1f52e43a8f1c02-base {
box-sizing: border-box;
color: var(--white);
flex: 0 0 auto;
height: 16px;
min-height: 16px;
min-width: 16px;
text-align: center;
}
._2b1f52e43a8f1c02-textBadge {
border-radius: var(--radius-sm);
overflow: hidden;
padding: 0 6px;
text-overflow: ellipsis;
white-space: nowrap;
}
._2b1f52e43a8f1c02-baseShapeRound {
border-radius: var(--radius-round);
}
._2b1f52e43a8f1c02-baseShapeRoundLeft {
border-radius: var(--radius-xs) 0 0 var(--radius-xs);
}
._2b1f52e43a8f1c02-baseShapeRoundRight {
border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}
._2b1f52e43a8f1c02-iconBadge,
._2b1f52e43a8f1c02-numberBadge {
align-items: center;
display: flex;
justify-content: center;
}
._2b1f52e43a8f1c02-iconBadge {
width: 16px;
}
._2b1f52e43a8f1c02-icon {
height: 100%;
padding: 2px;
width: 100%;
}
._2b1f52e43a8f1c02-circleBadge {
height: 8px;
width: 8px;
}
._2b1f52e43a8f1c02-premiumBadge {
background: var(--custom-premium-colors-premium-gradient-tier-2-tri-color);
}
._2b1f52e43a8f1c02-limitedTimeText {
text-transform: uppercase;
}
.enable-forced-colors ._2b1f52e43a8f1c02-base {
background-color: Highlight !important;
color: HighlightText;
forced-color-adjust: none;
outline: 2px solid Canvas;
}
.ebaca56eb4bb23eb-quickSelect {
color: var(--interactive-text-default);
cursor: default;
font-size: 13px;
}
.ebaca56eb4bb23eb-quickSelectClick {
cursor: pointer;
}
.ebaca56eb4bb23eb-quickSelectValue {
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
.ebaca56eb4bb23eb-quickSelectLabel {
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ebaca56eb4bb23eb-quickSelectArrow {
height: 7px;
width: 10px;
-webkit-margin-start: 5px;
margin-inline-start: 5px;
}
.ebaca56eb4bb23eb-quickSelectPopout {
border-radius: 3px;
color: var(--text-strong);
overflow: hidden;
}
.ebaca56eb4bb23eb-quickSelectPopoutScroll {
max-height: 384px;
}
.ebaca56eb4bb23eb-quickSelectScroller {
overflow-y: auto;
}
.ebaca56eb4bb23eb-quickSelectPopoutOption {
cursor: pointer;
padding: 8px;
}
.ebaca56eb4bb23eb-quickSelectPopoutOption.ebaca56eb4bb23eb-selected {
background-color: inherit;
cursor: default;
}
.ebaca56eb4bb23eb-quickSelectPopoutOption:focus {
background-color: var(--interactive-background-hover);
color: var(--interactive-text-hover);
}
.theme-light .ebaca56eb4bb23eb-quickSelectArrow {
background: url(/assets/0bf989849f27d0a7.svg) 50% no-repeat;
}
.theme-light .ebaca56eb4bb23eb-quickSelectPopout {
background-color: var(--white);
}
.theme-light .ebaca56eb4bb23eb-quickSelectPopoutOption:hover {
background-color: var(--primary-100);
}
.theme-dark .ebaca56eb4bb23eb-quickSelectArrow {
background: url(/assets/77e059c86b79040e.svg) 50% no-repeat;
}
.theme-dark .ebaca56eb4bb23eb-quickSelectPopout {
background: var(--primary-630);
}
.theme-dark .ebaca56eb4bb23eb-quickSelectPopoutOption:hover {
background-color: hsl(var(--primary-500-hsl) / 0.3);
}
._96f95c174d3b94a0-value {
width: 48px;
}
._96f95c174d3b94a0-actions {
align-items: center;
display: flex;
gap: var(--space-4);
justify-content: center;
}
._00943886e1cf89d1-wrapper {
background-color: none;
border: 1px solid var(--border-subtle);
padding-inline: calc(var(--space-16) - 1px) calc(var(--space-16) - 2px);
}
._00943886e1cf89d1-overlay {
align-items: center;
bottom: -1px;
display: none;
inset-inline-end: 0;
justify-content: flex-end;
position: absolute;
top: -1px;
-webkit-padding-start: 50px;
box-sizing: border-box;
max-width: 100%;
padding-inline-start: 50px;
}
._00943886e1cf89d1-overlay:empty {
-webkit-padding-start: 0;
padding-inline-start: 0;
}
._00943886e1cf89d1-headerOverlay,
._00943886e1cf89d1-sectionOverlay,
._00943886e1cf89d1-twitchOverlay {
}
._00943886e1cf89d1-headerOverlay {
inset-inline-end: 32px;
}
._00943886e1cf89d1-section {
background-color: var(--background-mod-muted);
border: 1px solid var(--border-subtle);
padding: 12px;
position: relative;
}
._00943886e1cf89d1-section:not(:last-child) {
border-bottom: none;
}
._00943886e1cf89d1-section:first-child {
border-radius: 8px 8px 0 0;
}
._00943886e1cf89d1-section:last-child {
border-radius: 0 0 8px 8px;
}
._00943886e1cf89d1-section:only-child {
border-radius: 8px;
}
._00943886e1cf89d1-clickable {
cursor: pointer;
}
._00943886e1cf89d1-clickable:hover ._00943886e1cf89d1-textContent {
text-decoration: underline;
}
._00943886e1cf89d1-textContent {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._00943886e1cf89d1-separator {
background-color: var(--border-subtle);
height: 1px;
}
._00943886e1cf89d1-separator._00943886e1cf89d1-inset {
margin-inline: 12px;
}
._00943886e1cf89d1-header {
align-items: center;
display: grid;
height: 36px;
position: relative;
grid-gap: 12px;
}
._00943886e1cf89d1-headerFull {
grid-template-columns: 32px minmax(20px, auto) 24px;
}
._00943886e1cf89d1-headerSimple {
grid-template-columns: 32px minmax(20px, auto);
}
._00943886e1cf89d1-headerAvatar {
cursor: pointer;
}
._00943886e1cf89d1-headerIcon,
._00943886e1cf89d1-multipleIconWrapper {
border-radius: 4px;
display: block;
height: 24px;
justify-self: end;
width: 24px;
}
._00943886e1cf89d1-multipleIconWrapper {
align-items: center;
background-color: var(--background-secondary-alt);
border-radius: 50%;
display: flex;
justify-content: center;
}
._00943886e1cf89d1-multipleIcon {
height: 18px;
width: 18px;
}
._00943886e1cf89d1-body {
border-radius: 8px;
}
._00943886e1cf89d1-body:not(:empty) {
margin-top: 12px;
}
._00943886e1cf89d1-body ._00943886e1cf89d1-separator {
margin-bottom: 0;
margin-top: 0;
}
._00943886e1cf89d1-wrapper ._00943886e1cf89d1-body {
background: none;
}
._00943886e1cf89d1-voiceSection {
display: grid;
grid-template-columns: 32px minmax(20px, auto) -webkit-max-content;
grid-template-columns: 32px minmax(20px, auto) max-content;
grid-gap: 12px;
align-items: center;
}
._00943886e1cf89d1-voiceSectionAssets {
align-items: center;
border-radius: 50%;
display: flex;
height: 32px;
justify-content: center;
position: relative;
width: 32px;
}
._00943886e1cf89d1-voiceSectionDetails {
cursor: pointer;
}
._00943886e1cf89d1-voiceSectionDetails:hover ._00943886e1cf89d1-voiceSectionText {
text-decoration: underline;
}
._00943886e1cf89d1-voiceSectionGuildImage,
._00943886e1cf89d1-voiceSectionNoGuildImageWrapper {
border-radius: 50%;
cursor: pointer;
height: 32px;
-webkit-mask: url(/assets/a90b040155ee449f.svg);
mask: url(/assets/a90b040155ee449f.svg);
-webkit-mask-size: 100%;
mask-size: 100%;
mask-type: luminance;
width: 32px;
}
._00943886e1cf89d1-voiceSectionNoGuildImageWrapper {
align-items: center;
background: var(--background-surface-high);
color: var(--white);
display: flex;
justify-content: center;
}
._00943886e1cf89d1-voiceSectionNoGuildImage {
display: inline-block;
overflow: hidden;
}
._00943886e1cf89d1-voiceSectionIconWrapper {
align-items: center;
border-radius: 50%;
bottom: -2px;
display: flex;
height: 16px;
inset-inline-end: -2px;
justify-content: center;
position: absolute;
width: 16px;
}
._00943886e1cf89d1-voiceSectionIcon {
color: var(--text-default);
height: 10px;
width: 10px;
}
._00943886e1cf89d1-applicationStreamingSection {
display: grid;
grid-template-columns: 32px minmax(20px, auto) -webkit-max-content;
grid-template-columns: 32px minmax(20px, auto) max-content;
grid-gap: 12px;
align-items: center;
}
._00943886e1cf89d1-applicationStreamingAvatar {
cursor: pointer;
}
._00943886e1cf89d1-applicationStreamingPreviewWrapper {
align-items: center;
aspect-ratio: 16/9;
background-color: var(--background-secondary-alt);
border-radius: 4px;
cursor: pointer;
display: flex;
justify-content: center;
margin-top: 12px;
overflow: hidden;
position: relative;
}
._00943886e1cf89d1-applicationStreamingPreviewWrapper:hover ._00943886e1cf89d1-applicationStreamingHoverText {
opacity: 1;
}
._00943886e1cf89d1-applicationStreamingPreviewSize {
height: 100%;
width: 100%;
}
._00943886e1cf89d1-applicationStreamingHoverText {
background: var(--opacity-black-60);
border-radius: var(--radius-xl);
cursor: pointer;
opacity: 0;
padding: 7px 16px;
position: absolute;
}
.full-motion ._00943886e1cf89d1-applicationStreamingHoverText {
transition: opacity var(--custom-button-transition-duration) ease;
}
._00943886e1cf89d1-xboxSection {
display: grid;
grid-template-columns: 32px minmax(20px, auto);
grid-gap: 12px;
align-items: center;
}
._00943886e1cf89d1-xboxSectionIcon {
color: var(--primary-300);
height: 28px;
padding: 2px;
width: 28px;
}
._00943886e1cf89d1-twitchSection {
min-height: 32px;
}
._00943886e1cf89d1-twitchSectionHeader {
display: grid;
position: relative;
grid-gap: 12px;
align-items: center;
}
._00943886e1cf89d1-twitchSectionSimple {
grid-template-columns: 32px minmax(20px, auto);
}
._00943886e1cf89d1-twitchSectionFull {
grid-template-columns: 32px minmax(20px, auto) 24px;
}
._00943886e1cf89d1-twitchSectionIcon {
height: 32px;
width: 32px;
}
._00943886e1cf89d1-twitchSectionPlayButton {
cursor: pointer;
inset-inline-start: calc(50% - 16px);
opacity: 0.75;
position: absolute;
top: calc(50% - 16px);
}
._00943886e1cf89d1-twitchSectionAvatar {
justify-self: end;
}
._00943886e1cf89d1-twitchSectionPreviewWrapper {
cursor: pointer;
margin-top: 12px;
}
._00943886e1cf89d1-twitchSectionPreviewWrapper:hover ._00943886e1cf89d1-twitchSectionPlayButton {
opacity: 1;
}
._00943886e1cf89d1-twitchSectionPreview {
border-radius: 4px;
height: 100%;
object-fit: cover;
width: 100%;
}
._00943886e1cf89d1-gameSection {
display: grid;
grid-template-columns: 32px minmax(20px, auto) -webkit-max-content;
grid-template-columns: 32px minmax(20px, auto) max-content;
grid-gap: 12px;
align-items: center;
}
._00943886e1cf89d1-gameSectionIcon {
cursor: pointer;
height: 32px;
width: 32px;
}
._00943886e1cf89d1-activitySection {
display: grid;
grid-template-columns: 32px minmax(20px, auto);
grid-gap: 12px;
align-items: start;
}
._00943886e1cf89d1-activitySectionWithButtons {
grid-template-columns: 32px minmax(20px, auto) minmax(0, -webkit-max-content);
grid-template-columns: 32px minmax(20px, auto) minmax(0, max-content);
}
._00943886e1cf89d1-activitySectionAssets {
align-items: center;
display: grid;
justify-content: start;
position: relative;
}
._00943886e1cf89d1-activitySectionAssets ._00943886e1cf89d1-largeImageMask {
-webkit-mask: url(/assets/ed4c6d51411aad5e.svg);
mask: url(/assets/ed4c6d51411aad5e.svg);
-webkit-mask-size: 100%;
mask-size: 100%;
mask-type: luminance;
}
._00943886e1cf89d1-activitySectionAssets ._00943886e1cf89d1-largeImage {
border-radius: 4px;
height: 32px;
object-fit: cover;
width: 32px;
}
._00943886e1cf89d1-activitySectionAssets ._00943886e1cf89d1-borderRadius0 {
border-radius: 0;
}
._00943886e1cf89d1-activitySectionAssets ._00943886e1cf89d1-smallImage {
border-radius: 50%;
bottom: -4px;
height: 16px;
inset-inline-end: -4px;
position: absolute;
width: 16px;
}
._00943886e1cf89d1-activitySectionDetails {
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
}
._00943886e1cf89d1-spotifySection {
grid-template-columns: 32px minmax(20px, auto) -webkit-max-content;
grid-template-columns: 32px minmax(20px, auto) max-content;
}
.theme-dark ._00943886e1cf89d1-voiceSectionIconWrapper {
background-color: var(--primary-800);
}
.theme-light ._00943886e1cf89d1-voiceSectionIconWrapper {
background: var(--primary-300);
}
._00943886e1cf89d1-embeddedActivityTopRow {
align-items: center;
display: flex;
margin-bottom: 8px;
}
._00943886e1cf89d1-embeddedActivityName {
flex: 1;
}
._00943886e1cf89d1-embeddedActivityTimeElapsed {
flex: 0 0 auto;
}
._00943886e1cf89d1-embeddedActivityPlayerContainer {
align-items: center;
aspect-ratio: 16/9;
background: var(--black);
border-radius: 12px;
display: flex;
justify-content: center;
position: relative;
}
._00943886e1cf89d1-embeddedActivityImage {
border-radius: 12px;
height: auto;
max-height: 100%;
object-fit: cover;
width: 100%;
}
._00943886e1cf89d1-embeddedActivityImageOverlay {
align-items: center;
background: var(--opacity-black-60);
border-radius: 12px;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
position: absolute;
width: 100%;
}
._00943886e1cf89d1-embeddedActivityJoinWrapper {
margin-top: 8px;
}
._00943886e1cf89d1-embeddedActivityIcon {
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
._00943886e1cf89d1-cloudPlaySectionSeparator {
margin: 12px 0 !important;
}
._00943886e1cf89d1-cloudPlaySection {
align-items: center;
display: flex;
gap: 12px;
justify-content: space-between;
}
._00943886e1cf89d1-cloudPlaySectionTextContainer {
align-items: center;
display: flex;
gap: 8px;
}
.refresh-active-now ._00943886e1cf89d1-wrapper {
background: var(--background-base-low);
border-radius: 16px;
padding: 0;
}
.refresh-active-now ._00943886e1cf89d1-body {
border-radius: 0;
}
.refresh-active-now ._00943886e1cf89d1-body:not(:empty) {
margin-top: 0;
}
.refresh-active-now ._00943886e1cf89d1-header {
background-color: var(--background-mod-muted);
padding: 16px;
}
.refresh-active-now ._00943886e1cf89d1-section {
background: none;
border: none;
border-radius: 0;
padding: 16px;
}
.refresh-active-now ._00943886e1cf89d1-section:not(:last-child) {
border-bottom: 1px solid var(--border-subtle);
}
.refresh-active-now ._00943886e1cf89d1-applicationStreamingPreviewWrapper {
border-radius: 8px;
}
@value minColumnWidth: 460px;
._23e6b439306f125a-standardSidebarView {
background: var(--background-base-lowest);
display: flex;
inset: 0;
position: absolute;
z-index: 101;
}
._23e6b439306f125a-standardSidebarView,
._23e6b439306f125a-standardSidebarView * {
box-sizing: border-box;
}
._23e6b439306f125a-standardSidebarView._23e6b439306f125a-withUpsell {
top: 44px;
}
.platform-win ._23e6b439306f125a-standardSidebarView {
top: 22px;
}
._23e6b439306f125a-sidebarRegion {
display: flex;
flex: 1 0 var(--custom-standard-sidebar-view-sidebar-total-width);
justify-content: flex-end;
z-index: 1;
}
._23e6b439306f125a-sidebarRegionScroller {
align-items: flex-start;
background: var(--background-base-lowest);
display: flex;
flex: 1 0 auto;
flex-direction: row;
justify-content: flex-end;
}
._23e6b439306f125a-sidebar {
padding-block: 60px;
width: var(--custom-standard-sidebar-view-sidebar-total-width);
}
._23e6b439306f125a-mobileSidebar,
._23e6b439306f125a-sidebar {
padding-inline: var(--custom-standard-sidebar-view-standard-padding) var(--custom-standard-sidebar-view-sidebar-content-scrollbar-padding);
}
._23e6b439306f125a-mobileSidebar {
padding-block: 10px 60px;
width: 100%;
}
._23e6b439306f125a-contentTransitionWrap {
flex: 1;
height: 100%;
}
._23e6b439306f125a-contentRegionScroller {
align-items: flex-start;
background-color: var(--background-base-low);
display: flex;
flex-direction: row;
height: 100%;
overflow-x: hidden;
position: static;
}
._23e6b439306f125a-contentRegionScroller ._23e6b439306f125a-toolsContainer {
-webkit-margin-end: 21px;
margin-inline-end: 21px;
}
._23e6b439306f125a-contentRegionScroller ._23e6b439306f125a-tools {
position: fixed;
}
._23e6b439306f125a-contentRegionHiddenSidebar {
justify-content: center;
}
._23e6b439306f125a-contentRegionShownSidebar {
justify-content: flex-start;
}
._23e6b439306f125a-contentRegion {
align-items: flex-start;
background: var(--background-base-low);
display: flex;
flex: 1 1 800px;
position: relative;
}
._23e6b439306f125a-contentColumn,
._23e6b439306f125a-customColumn {
flex: 1 1 auto;
max-width: 740px;
min-height: 100%;
min-width: 460px;
}
._23e6b439306f125a-contentColumnWide {
max-width: 740px;
padding-block: 60px 80px;
padding-inline: 40px 10px;
}
._23e6b439306f125a-contentColumnDefault {
padding: 60px 40px 80px;
position: relative;
}
._23e6b439306f125a-contentColumnMinimal {
-webkit-padding-end: 40px;
padding-inline-end: 40px;
}
._23e6b439306f125a-contentColumnScrollable {
flex: 1 1 auto;
min-width: 460px;
position: relative;
}
._23e6b439306f125a-customHeader {
padding-top: 60px;
}
._23e6b439306f125a-customColumn {
padding-bottom: 0;
}
._23e6b439306f125a-customContainer {
inset: 0;
overflow: hidden;
position: absolute;
}
._23e6b439306f125a-customScroller {
box-sizing: border-box;
display: block;
position: static;
}
._23e6b439306f125a-customScroller > div {
margin-inline: 40px 97px;
max-width: 660px;
min-width: 404px;
}
._23e6b439306f125a-noticeRegion {
bottom: 0;
inset-inline: 0 71px;
max-width: 740px;
padding: 0 var(--custom-standard-sidebar-view-standard-padding) var(--custom-standard-sidebar-view-standard-padding);
position: absolute;
z-index: 2;
}
._23e6b439306f125a-noticeRegionHiddenSidebar {
margin: 0 auto;
}
._23e6b439306f125a-toolsContainer {
flex: 0 0 36px;
position: relative;
-webkit-margin-end: 35px;
margin-inline-end: 35px;
padding-top: 60px;
width: 60px;
}
._23e6b439306f125a-mobileSidebarTools {
-webkit-margin-end: 0;
margin-inline-end: 0;
}
.theme-light ._23e6b439306f125a-customContainer:before {
border-bottom: 1px solid var(--opacity-black-8);
box-shadow: 0 1px 4px var(--opacity-black-8);
}
.theme-dark ._23e6b439306f125a-customContainer:before {
border-bottom: 1px solid var(--opacity-black-20);
box-shadow: 0 1px 4px var(--opacity-black-20);
}
._23e6b439306f125a-flexFullWidth {
flex: 1 0 100%;
}
._23e6b439306f125a-hidden {
display: none;
}
._23e6b439306f125a-mobileContent {
box-sizing: border-box;
min-width: unset;
padding-top: 10px;
}
._23e6b439306f125a-mobileContentHeader {
display: flex;
justify-content: space-between;
padding: 10px 20px;
}
._23e6b439306f125a-mobileContentHeader._23e6b439306f125a-hideHamburger {
justify-content: flex-end;
}
._23e6b439306f125a-mobileToolsContainer {
padding-top: 10px;
}
._23e6b439306f125a-mobileToolsContainer._23e6b439306f125a-closeIconOnly {
-webkit-margin-end: 0;
margin-inline-end: 0;
}
._23e6b439306f125a-mobileToolsContainer._23e6b439306f125a-isMobileAndroid {
position: absolute;
z-index: 1000;
}
._23e6b439306f125a-mobileToolsCloseIcon > div {
flex: 0 0 24px;
height: 24px;
width: 24px;
}
._23e6b439306f125a-mobileSidebarHeader {
display: flex;
justify-content: flex-end;
}
&.platform-win ._23e6b439306f125a-contentRegionScroller {
margin-top: var(--custom-app-top-bar-height);
}
.f131e93f07e2fe18-settingsPage {
display: flex;
flex-direction: column;
gap: var(--space-32);
min-width: 0;
width: 100%;
}
.f8303a11ec48bef3-tabBar {
border-bottom: 1px solid var(--border-subtle);
max-width: calc(100% - 60px);
}
.f8303a11ec48bef3-tabBar.f8303a11ec48bef3-vertical {
border-bottom: none;
gap: var(--space-16);
}
.f8303a11ec48bef3-tabBarPanel {
margin-top: var(--space-24);
}
.f8303a11ec48bef3-tabBarPanel.f8303a11ec48bef3-vertical {
flex-grow: 1;
margin-top: 0;
}
.f8303a11ec48bef3-tab {
align-items: center;
display: flex;
flex-shrink: 1;
gap: var(--space-8);
padding-bottom: var(--space-12);
}
.f8303a11ec48bef3-tab.f8303a11ec48bef3-vertical {
border-radius: 0;
-webkit-border-start: 1px solid var(--border-subtle);
border-inline-start: 1px solid var(--border-subtle);
}
.f8303a11ec48bef3-tab.f8303a11ec48bef3-vertical.f8303a11ec48bef3-selected {
color: var(--text-brand);
-webkit-border-start: 2px solid var(--text-brand);
border-inline-start: 2px solid var(--text-brand);
-webkit-margin-start: -1px;
margin-inline-start: -1px;
}
.f8303a11ec48bef3-tabbedSettingsContainer {
display: flex;
flex-direction: column;
}
.f8303a11ec48bef3-tabbedSettingsContainer.f8303a11ec48bef3-vertical {
align-items: flex-start;
flex-direction: row;
gap: var(--space-48);
}
.f89b2c40b824acaf-container {
background-color: var(--input-background-default);
border: 1px solid;
border-color: var(--input-border-default);
border-radius: var(--radius-sm);
box-sizing: border-box;
cursor: pointer;
height: 40px;
min-height: 44px;
position: relative;
}
.f89b2c40b824acaf-layout {
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
}
.f89b2c40b824acaf-base {
background-color: transparent;
font-size: 16px;
line-height: 22px;
overflow: hidden;
padding-block: 10px;
padding-inline: 10px 0;
text-overflow: ellipsis;
transition: color 0.15s ease;
white-space: nowrap;
}
.f89b2c40b824acaf-hiddenMessage {
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
z-index: 0;
}
.f89b2c40b824acaf-input {
border: none;
box-sizing: border-box;
color: var(--text-strong);
flex: 1 1 auto;
min-width: 0;
position: relative;
width: 100%;
z-index: 1;
}
.f89b2c40b824acaf-input::-moz-placeholder {
color: var(--input-placeholder-text-default);
}
.f89b2c40b824acaf-input::placeholder {
color: var(--input-placeholder-text-default);
}
.f89b2c40b824acaf-button {
border-radius: var(--radius-xs);
margin-block: 4px;
margin-inline: 0 4px;
padding: 2px 20px;
transition:
background-color 0.2s ease-in-out,
color 0.2s ease-in-out;
}
.f89b2c40b824acaf-disabled {
cursor: not-allowed;
opacity: 0.3;
}
.f89b2c40b824acaf-disabled .f89b2c40b824acaf-button {
opacity: 1;
}
._2636e15ac7a66a8d-recorderContainer {
transition: border 0.15s ease;
}
._2636e15ac7a66a8d-recorderContainer * {
cursor: pointer;
}
._2636e15ac7a66a8d-recorderContainer:not(._2636e15ac7a66a8d-containerDisabled):focus-within,
._2636e15ac7a66a8d-recorderContainer:not(._2636e15ac7a66a8d-containerDisabled):hover {
border-color: hsl(var(--red-400-hsl) / 0.3);
}
._2636e15ac7a66a8d-containerDisabled {
cursor: not-allowed;
}
._2636e15ac7a66a8d-containerDisabled * {
cursor: not-allowed;
}
._2636e15ac7a66a8d-recorderLayout {
}
._2636e15ac7a66a8d-addKeybindButton {
overflow: hidden;
position: relative;
transition:
background-color 0.2s ease-in-out,
color 0.2s ease-in-out,
width 0.2s ease-in-out;
white-space: nowrap;
width: auto;
}
._2636e15ac7a66a8d-recorderContainer._2636e15ac7a66a8d-recording {
animation: _2636e15ac7a66a8d-shadowPulse 1s ease-in infinite;
border-color: hsl(var(--red-400-hsl) / 0.6);
box-shadow: 0 0 6px hsl(var(--red-400-hsl) / 0.3);
color: var(--status-danger);
}
._2636e15ac7a66a8d-recorderContainer._2636e15ac7a66a8d-recording ._2636e15ac7a66a8d-addKeybindButton {
background-color: hsl(var(--red-400-hsl) / 0.1);
color: var(--status-danger);
}
._2636e15ac7a66a8d-recorderContainer._2636e15ac7a66a8d-recording ._2636e15ac7a66a8d-keybindInput {
color: var(--status-danger);
}
._2636e15ac7a66a8d-recorderContainer._2636e15ac7a66a8d-recording ._2636e15ac7a66a8d-keybindInput::-moz-placeholder {
color: transparent;
}
._2636e15ac7a66a8d-recorderContainer._2636e15ac7a66a8d-recording ._2636e15ac7a66a8d-keybindInput::placeholder {
color: transparent;
}
._2636e15ac7a66a8d-keybindInput {
font-size: 14px;
font-weight: var(--font-weight-semibold);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@keyframes _2636e15ac7a66a8d-shadowPulse {
0% {
box-shadow: 0 0 6px hsl(var(--red-400-hsl) / 0.3);
}
50% {
box-shadow: 0 0 10px hsl(var(--red-400-hsl) / 0.6);
}
to {
box-shadow: 0 0 6px hsl(var(--red-400-hsl) / 0.3);
}
}
._2636e15ac7a66a8d-buttonContainer {
max-width: 128px;
padding: 4px;
}
._90f76fe726e5dadd-keyRecorder {
flex: 1 1 33%;
min-width: 220px;
position: relative;
}
.d17ea2106ff39cda-animator {
display: block;
position: relative;
}
.d17ea2106ff39cda-item {
inset-inline: 0;
bottom: 0;
position: absolute;
top: 0;
}
.e6b06524a3befa54-container {
background: var(--background-base-lowest);
border-radius: 50%;
flex-direction: row;
flex-grow: 0;
flex-shrink: 0;
overflow: hidden;
}
.e6b06524a3befa54-container,
.e6b06524a3befa54-trophyIconContainer {
align-items: center;
display: flex;
justify-content: center;
position: relative;
}
.e6b06524a3befa54-trophyIconContainer {
flex-direction: column;
}
.e6b06524a3befa54-lockContainer {
align-items: center;
background: var(--background-base-lowest);
border-radius: 50%;
bottom: 0;
display: flex;
flex-direction: row;
flex-grow: 0;
flex-shrink: 0;
inset-inline-end: 0;
justify-content: center;
position: absolute;
}
.e6b06524a3befa54-confettiIcon {
-webkit-margin-start: 2px;
margin-inline-start: 2px;
margin-bottom: 5px;
}
._8a969186fc6052b2-container {
background-color: var(--background-secondary-alt);
border-radius: var(--radius-sm);
flex-direction: row;
justify-content: flex-start;
padding: 12px;
}
._8a969186fc6052b2-container,
._8a969186fc6052b2-iconContainer {
align-items: center;
display: flex;
position: relative;
}
._8a969186fc6052b2-iconContainer {
flex-grow: 0;
flex-shrink: 0;
height: 40px;
justify-content: center;
width: 40px;
-webkit-margin-end: 12px;
margin-inline-end: 12px;
}
._8a969186fc6052b2-actionable {
cursor: pointer;
}
._8a969186fc6052b2-name {
color: var(--text-strong);
font-size: 16px;
font-weight: var(--font-weight-bold);
line-height: 20px;
}
._8a969186fc6052b2-description {
color: var(--text-default);
font-size: 12px;
font-weight: var(--font-weight-medium);
line-height: 16px;
}
._8a969186fc6052b2-flair {
bottom: -16px;
inset-inline-start: calc(50% - 24px);
position: absolute;
}
._89d2b85e53f60413-right {
transform: rotate(90deg);
}
._89d2b85e53f60413-down {
transform: rotate(180deg);
}
._89d2b85e53f60413-left {
transform: rotate(-90deg);
}
._8e75f9d969241b38-container {
align-items: center;
background-color: var(--background-base-lower);
border-radius: var(--radius-sm);
display: flex;
flex-direction: row;
justify-content: flex-start;
padding: 12px;
position: relative;
}
._8e75f9d969241b38-container:hover {
background-color: var(--background-secondary-alt);
}
._8e75f9d969241b38-actionable {
cursor: pointer;
}
._8e75f9d969241b38-iconContainer {
align-items: center;
display: flex;
flex-grow: 0;
flex-shrink: 0;
height: 40px;
justify-content: center;
position: relative;
width: 40px;
-webkit-margin-end: 12px;
margin-inline-end: 12px;
}
._8e75f9d969241b38-nameContainer {
display: flex;
flex-direction: column;
}
._8e75f9d969241b38-unlocked {
margin-bottom: 2px;
}
._951aff5457b066d7-backContainer {
align-items: center;
cursor: pointer;
display: flex;
flex-direction: row;
justify-content: flex-start;
}
._951aff5457b066d7-icon {
fill: var(--interactive-text-default);
color: var(--interactive-text-default);
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
._951aff5457b066d7-headerContainer {
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 32px;
}
._951aff5457b066d7-bottomPadding {
flex: 1;
height: 200px;
width: 100px;
}
._951aff5457b066d7-headerIcon {
align-items: center;
background: var(--background-base-lowest);
border-radius: 50%;
display: flex;
flex-direction: row;
flex-grow: 0;
flex-shrink: 0;
justify-content: center;
padding: 8px;
}
._951aff5457b066d7-headerTextContainer {
align-items: flex-start;
display: flex;
flex-direction: column;
flex-grow: 1;
flex-shrink: 1;
gap: 8px;
justify-content: flex-start;
}
._951aff5457b066d7-divider {
margin-bottom: 32px;
margin-top: 32px;
}
._951aff5457b066d7-achievementGrid {
display: grid;
gap: 8px;
grid-template-columns: repeat(2, 1fr);
margin-top: 8px;
}
.f8824b9540b055b4-slideAnimator {
overflow-x: clip;
}
.f8824b9540b055b4-hideButton {
align-self: flex-start;
}
.f8824b9540b055b4-sliderLabel {
margin-bottom: 8px;
}
.f8824b9540b055b4-sliderDescription {
margin-bottom: 16px;
}
.f8824b9540b055b4-achievementContainer {
background-color: var(--background-base-lower);
border-radius: var(--radius-sm);
cursor: pointer;
padding: 12px;
}
.f8824b9540b055b4-achievementContainer,
.f8824b9540b055b4-achievementIconContainer {
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
}
.f8824b9540b055b4-achievementIconContainer {
background: var(--background-base-lowest);
border-radius: 50%;
flex-grow: 0;
flex-shrink: 0;
padding: 8px;
}
.f8824b9540b055b4-achievementTextContainer {
align-items: flex-start;
display: flex;
flex-direction: column;
flex-grow: 1;
flex-shrink: 1;
justify-content: flex-start;
-webkit-margin-start: 12px;
margin-inline-start: 12px;
}
.f8824b9540b055b4-rightCaretIcon {
fill: var(--interactive-text-default);
color: var(--interactive-text-default);
}
.f8824b9540b055b4-enableAnimation {
height: 100%;
width: 100%;
}
.f8824b9540b055b4-enableAnimationOverlay {
align-items: center;
background-color: var(--opacity-black-28);
bottom: 0;
display: flex;
position: fixed;
top: 0;
inset-inline: 0;
justify-content: center;
transition: opacity 0.2s ease;
z-index: 1;
}
.f8824b9540b055b4-enableAnimationOverlayHidden {
opacity: 0;
pointer-events: none;
}
.f8824b9540b055b4-enableAnimationOverlayVisible {
opacity: 1;
}
.aa3ffd68c8f6a69a-flex {
display: flex;
}
.aa3ffd68c8f6a69a-alignStart {
align-items: flex-start;
}
.aa3ffd68c8f6a69a-alignEnd {
align-items: flex-end;
}
.aa3ffd68c8f6a69a-alignCenter {
align-items: center;
}
.aa3ffd68c8f6a69a-alignStretch {
align-items: stretch;
}
.aa3ffd68c8f6a69a-alignBaseline {
align-items: baseline;
}
.aa3ffd68c8f6a69a-justifyStart {
justify-content: flex-start;
}
.aa3ffd68c8f6a69a-justifyEnd {
justify-content: flex-end;
}
.aa3ffd68c8f6a69a-justifyCenter {
justify-content: center;
}
.aa3ffd68c8f6a69a-justifyAround {
justify-content: space-around;
}
.aa3ffd68c8f6a69a-justifyBetween {
justify-content: space-between;
}
.aa3ffd68c8f6a69a-noWrap {
flex-wrap: nowrap;
}
.aa3ffd68c8f6a69a-wrap {
flex-wrap: wrap;
}
.aa3ffd68c8f6a69a-wrapReverse {
flex-wrap: wrap-reverse;
}
.aa3ffd68c8f6a69a-directionRow {
flex-direction: row;
}
.aa3ffd68c8f6a69a-directionRowReverse {
flex-direction: row-reverse;
}
.aa3ffd68c8f6a69a-directionColumn {
flex-direction: column;
}
.aa3ffd68c8f6a69a-spacer {
flex: 1;
overflow: hidden;
}
.aa3ffd68c8f6a69a-vertical {
display: flex;
flex-direction: column;
}
.aa3ffd68c8f6a69a-horizontal {
display: flex;
flex-direction: row;
}
.aa3ffd68c8f6a69a-horizontalReverse {
display: flex;
flex-direction: row-reverse;
}
.aa3ffd68c8f6a69a-horizontal > .aa3ffd68c8f6a69a-spacer,
.aa3ffd68c8f6a69a-horizontalReverse > .aa3ffd68c8f6a69a-spacer,
.aa3ffd68c8f6a69a-vertical > .aa3ffd68c8f6a69a-spacer {
min-height: 1px;
}
.aa3ffd68c8f6a69a-flexCenter,
.aa3ffd68c8f6a69a-streamerModeEnabled {
align-items: center;
display: flex;
justify-content: center;
}
.aa3ffd68c8f6a69a-streamerModeEnabled {
flex: 1;
flex-direction: column;
}
.aa3ffd68c8f6a69a-streamerModeEnabledImage {
background-size: 100% 100%;
height: 220px;
width: 440px;
}
.aa3ffd68c8f6a69a-streamerModeEnabledBtn {
background-color: var(--twitch);
border-radius: 3px;
color: var(--white);
cursor: pointer;
font-size: 18px;
font-weight: var(--font-weight-bold);
line-height: 29px;
margin-top: 20px;
padding: 10px 20px;
text-transform: uppercase;
}
.aa3ffd68c8f6a69a-streamerModeEnabledBtn:hover {
background-color: var(--twitch-secondary);
}
.aa3ffd68c8f6a69a-streamerModeEnabledBtn.aa3ffd68c8f6a69a-disabled {
background-color: var(--twitch);
cursor: default;
opacity: 0.5;
}
.images-light .aa3ffd68c8f6a69a-streamerModeEnabledImage {
background-image: url(/assets/9a898919395a3f13.svg);
}
.images-dark .aa3ffd68c8f6a69a-streamerModeEnabledImage {
background-image: url(/assets/a105cf85c9c42968.svg);
}
._8d74205817b61e29-sectionDescription {
color: var(--text-default);
}
._8d74205817b61e29-card {
background-image: linear-gradient(90deg, var(--teal-460) 0, var(--teal-430) 55%, var(--teal-360) 100%);
flex-wrap: wrap;
gap: 16px;
}
._8d74205817b61e29-manageSubscriptionsButton {
background-color: var(--white);
color: var(--teal-530);
}
._8d74205817b61e29-manageSubscriptionsButton:hover {
background-color: var(--teal-100);
color: var(--teal-630);
}
._8d74205817b61e29-manageSubscriptionsButton:active {
background-color: var(--teal-130);
color: var(--teal-900);
}
._8d74205817b61e29-handImage {
margin-block: -6px;
margin-inline: -16px 16px;
}
._8d74205817b61e29-textContainer {
flex: 1;
position: relative;
}
._8d74205817b61e29-header {
margin-bottom: 4px;
margin-top: 5px;
}
._8d74205817b61e29-description,
._8d74205817b61e29-header {
color: var(--white);
}
._8d74205817b61e29-description strong {
font-weight: var(--font-weight-medium);
}
.e335a78803b4d1df-section {
margin-bottom: 20px;
}
.e335a78803b4d1df-paymentBanner {
align-items: center;
background: var(--background-surface-high);
border-radius: 4px;
display: flex;
margin-bottom: 14px;
padding: 10px;
}
.e335a78803b4d1df-paymentBannerNew {
margin-top: 28px;
position: relative;
}
.e335a78803b4d1df-paymentBannerIcon {
height: 20px;
width: 20px;
}
.e335a78803b4d1df-paymentBannerText {
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
.e335a78803b4d1df-renewalMutationNotice {
margin-bottom: 16px;
}
.e335a78803b4d1df-grandfatheredMessage {
align-items: center;
background-image: linear-gradient(to left, var(--premium-tier-1-purple), var(--premium-tier-1-blue));
border-radius: 3px;
color: var(--white);
display: flex;
font-size: 12px;
line-height: 1.25;
margin-bottom: 16px;
padding-block: 8px;
padding-inline: 8px 16px;
}
.e335a78803b4d1df-grandfatheredMessageText {
-webkit-margin-end: 16px;
flex: 1;
margin-inline-end: 16px;
}
.e335a78803b4d1df-grandfatheredIcon {
height: 24px;
width: 24px;
-webkit-margin-end: 8px;
align-self: flex-start;
flex-shrink: 0;
margin-inline-end: 8px;
}
.e335a78803b4d1df-subscriptionRows {
margin-bottom: 32px;
}
.e335a78803b4d1df-dupSubscriptionRow {
margin-bottom: 48px;
position: relative;
z-index: 1;
}
.e335a78803b4d1df-dupSubscriptionRow:after {
background-color: var(--background-mod-muted);
border-radius: 4px;
content: "";
display: block;
height: calc(100% + 32px);
inset-inline-start: -16px;
position: absolute;
top: -16px;
width: calc(100% + 32px);
z-index: -1;
}
.e335a78803b4d1df-dupSubscriptionRow:first-child {
margin-top: 32px;
}
.e335a78803b4d1df-dupSubscriptionRow:last-child {
margin-bottom: 0;
}
.e335a78803b4d1df-guildSubscriptionRow {
margin-top: 16px;
}
.e335a78803b4d1df-guildBoostingSubscriptionRow {
align-items: flex-start;
border-radius: 4px;
color: var(--white);
display: flex;
font-size: 16px;
line-height: 20px;
padding: 16px;
position: relative;
}
.e335a78803b4d1df-guildBoostingSubscriptionRowActive {
background-image: linear-gradient(90deg, var(--guild-boosting-blue-for-gradients) 0, var(--guild-boosting-purple-for-gradients) 100%);
}
.e335a78803b4d1df-guildBoostingSubscriptionRowActive .e335a78803b4d1df-guildBoostingSubscriptionRowBackground {
background-image: url(/assets/257849697e9ea2a8.svg);
}
.e335a78803b4d1df-guildBoostingSubscriptionRowActive .e335a78803b4d1df-guildBoostingImage {
background-image: url(/assets/b5b61f59756386fc.svg);
}
.e335a78803b4d1df-guildBoostingSubscriptionRowPaused {
background: var(--primary-500);
}
.e335a78803b4d1df-guildBoostingSubscriptionRowPaused .e335a78803b4d1df-guildBoostingSubscriptionRowBackground {
background-image: url(/assets/858f6789052dceec.svg);
}
.e335a78803b4d1df-guildBoostingSubscriptionRowPaused .e335a78803b4d1df-guildBoostingImage {
background-image: url(/assets/3c2c35373162aa43.svg);
}
.e335a78803b4d1df-guildBoostingSubscriptionRowCanceled {
background-image: linear-gradient(90deg, #f18623, #f6a12a 56%, #fab930);
color: var(--black);
}
.e335a78803b4d1df-guildBoostingSubscriptionRowCanceled .e335a78803b4d1df-guildBoostingSubscriptionRowBackground {
background-image: url(/assets/874b60b1d3997aa5.svg);
}
.e335a78803b4d1df-guildBoostingSubscriptionRowCanceled .e335a78803b4d1df-guildBoostingImage {
background-image: url(/assets/3c2c35373162aa43.svg);
}
.e335a78803b4d1df-guildBoostingSubscriptionRowFailedPayment {
background-image: linear-gradient(90deg, #f25a5d, #f14e76 77%, #f04a7f);
}
.e335a78803b4d1df-guildBoostingSubscriptionRowFailedPayment .e335a78803b4d1df-guildBoostingSubscriptionRowBackground {
background-image: url(/assets/87055dac44c4340f.svg);
}
.e335a78803b4d1df-guildBoostingSubscriptionRowFailedPayment .e335a78803b4d1df-guildBoostingImage {
background-image: url(/assets/af24ad118c39d6aa.svg);
}
.e335a78803b4d1df-sectionTitle {
margin-bottom: 16px;
}
.e335a78803b4d1df-sectionDescription {
color: var(--text-default);
line-height: 20px;
margin-bottom: 16px;
margin-top: 0;
}
.e335a78803b4d1df-guildBoostingSubscriptionRowBackground {
background-position: bottom;
background-repeat: no-repeat;
border-radius: 4px;
bottom: 0;
position: absolute;
top: 0;
inset-inline: 0;
}
.e335a78803b4d1df-guildBoostingImage {
flex-shrink: 0;
height: 54px;
width: 96px;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
position: relative;
}
.e335a78803b4d1df-guildBoostingSubscriptionRowBody {
flex-grow: 1;
position: relative;
}
.e335a78803b4d1df-guildBoostingWordmark {
background-image: url(/assets/5f0d3753df69ebf7.svg);
height: 17px;
margin-bottom: 16px;
width: 184px;
}
.e335a78803b4d1df-guildBoostingWordmark.e335a78803b4d1df-canceled {
background-image: url(/assets/7641e347e1ace434.svg);
}
.e335a78803b4d1df-details {
display: flex;
}
@media (max-width: 485px) {
.e335a78803b4d1df-details {
flex-direction: column;
}
}
.e335a78803b4d1df-detailsBlock {
flex-basis: 50%;
flex-grow: 1;
-webkit-margin-end: 16px;
background-color: var(--background-mod-muted);
border: 1px solid var(--border-muted);
border-radius: var(--radius-sm);
margin-inline-end: 16px;
min-width: 200px;
padding: var(--space-16);
}
@media (max-width: 485px) {
.e335a78803b4d1df-detailsBlock {
-webkit-margin-end: 0;
margin-inline-end: 0;
margin-bottom: 20px;
}
}
.e335a78803b4d1df-paymentDropdown {
max-width: 400px;
}
.e335a78803b4d1df-redBorder {
border: 1px solid;
border-color: var(--red-360);
}
.e335a78803b4d1df-detailsBlock:last-child {
-webkit-margin-end: 0;
margin-inline-end: 0;
}
.e335a78803b4d1df-detailBlockHeader,
.e335a78803b4d1df-duplicateHeader {
margin-bottom: 8px;
}
.e335a78803b4d1df-duplicateHeader {
color: var(--red-400);
}
.e335a78803b4d1df-billingInformation {
color: var(--text-default);
font-size: 14px;
line-height: 18px;
}
.e335a78803b4d1df-finePrint {
color: var(--text-muted);
line-height: 1.4;
margin-top: 16px;
}
.e335a78803b4d1df-cardText {
-webkit-padding-start: 8px;
padding-inline-start: 8px;
}
.e335a78803b4d1df-noItemsCard {
background-color: var(--background-base-lower);
border: none;
color: var(--interactive-text-active);
font-size: 16px;
font-weight: var(--font-weight-medium);
line-height: 20px;
margin-top: 16px;
padding: 16px 19px;
}
.theme-dark .e335a78803b4d1df-noItemsIcon {
background: #4f545c;
}
.e335a78803b4d1df-newSparkles {
height: 34px;
inset-inline-start: -10px;
position: absolute;
top: -18px;
width: 47px;
}
.e335a78803b4d1df-boostingDesktopAppBlurb {
margin-top: 8px;
}
.e335a78803b4d1df-duplicateSubscriptionsBanner {
align-items: center;
background: var(--background-mod-muted);
border-radius: 4px;
display: flex;
margin-bottom: 14px;
padding: 10px;
}
.e335a78803b4d1df-duplicateSubscriptionsBannerText {
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
.e335a78803b4d1df-helpNoticeDismissIcon {
cursor: pointer;
padding-top: 2px;
}
._95e2d948d14427ed-button {
background-color: var(--background-secondary-alt);
cursor: pointer;
}
._95e2d948d14427ed-button:first-child {
border-radius: 8px 8px 0 0;
}
._95e2d948d14427ed-button:last-child {
border-radius: 0 0 8px 8px;
}
._95e2d948d14427ed-button:last-child ._95e2d948d14427ed-contentContainer {
border-bottom: none;
}
._95e2d948d14427ed-contentContainer {
align-items: center;
display: flex;
justify-content: space-between;
-webkit-margin-start: 16px;
border-bottom: 1px solid var(--opacity-white-4);
margin-inline-start: 16px;
padding-block: 16px;
padding-inline: 0 16px;
}
._95e2d948d14427ed-arrow {
color: var(--interactive-text-default);
height: 24px;
transform: rotate(-90deg);
width: 24px;
}
._95e2d948d14427ed-label {
color: var(--interactive-text-active);
}
.a327d25d703c41dc-modal {
min-height: 180px;
overflow-x: hidden;
}
.a327d25d703c41dc-form {
display: flex;
flex-direction: column;
flex-grow: 1;
min-height: 0;
}
.a327d25d703c41dc-content {
height: 100%;
padding-bottom: 20px;
}
.a327d25d703c41dc-modalTitle {
padding: 16px 16px 0;
}
.a327d25d703c41dc-divider {
border-top: 1px solid;
margin: 0 20px 12px;
}
.a327d25d703c41dc-errorBlock {
margin-bottom: 20px;
}
.a327d25d703c41dc-sequencer {
display: flex;
flex-direction: column;
}
@media (max-width: 485px) and (max-height: 450px) {
.a327d25d703c41dc-form {
display: block;
}
}
.theme-light .a327d25d703c41dc-divider {
border-color: hsl(var(--primary-200-hsl) / 0.6);
}
.theme-dark .a327d25d703c41dc-divider {
border-color: var(--primary-630);
}
._900c6a3ab86b64c7-externalLink {
width: 100%;
}
.theme-dark ._900c6a3ab86b64c7-container {
background-color: var(--primary-630);
}
.theme-light ._900c6a3ab86b64c7-container {
background-color: hsl(var(--primary-100-hsl) / 0.6);
}
._900c6a3ab86b64c7-currency {
color: var(--text-default);
font-size: 14px;
margin-top: 12px;
}
._900c6a3ab86b64c7-currency ._900c6a3ab86b64c7-currencyDropdown {
-webkit-margin-start: 4px;
flex-grow: 1;
margin-inline-start: 4px;
width: 80px;
}
._37475aea99c8ed8d-container {
align-items: flex-start;
background-color: var(--background-base-lower);
border-radius: 4px;
display: flex;
max-width: 640px;
padding: 10px;
width: 100%;
}
._37475aea99c8ed8d-textContainer {
display: flex;
flex: 1;
}
._37475aea99c8ed8d-warningIcon {
height: 20px;
width: 20px;
}
._37475aea99c8ed8d-info,
._37475aea99c8ed8d-warningIcon {
color: var(--interactive-text-default);
}
._37475aea99c8ed8d-info {
font-size: 14px;
line-height: 18px;
}
._37475aea99c8ed8d-error {
color: var(--text-feedback-critical);
font-weight: var(--font-weight-medium);
}
._25f6c2d126cb8769-benefits {
background-color: var(--background-base-lower);
border-radius: 8px;
padding: 16px;
}
._0ab43688537c1d7f-container {
background-color: var(--background-base-lower);
border-radius: 8px;
padding: 16px;
}
._0ab43688537c1d7f-headerContainer {
align-items: center;
cursor: pointer;
display: flex;
}
._0ab43688537c1d7f-headerTextContainer {
flex: 1;
-webkit-margin-start: 16px;
margin-inline-start: 16px;
}
._0ab43688537c1d7f-guildName {
color: var(--interactive-text-active);
margin-bottom: 2px;
}
._0ab43688537c1d7f-arrowIcon,
._0ab43688537c1d7f-tierName {
color: var(--interactive-text-default);
}
._0ab43688537c1d7f-arrowIcon {
height: 24px;
width: 24px;
}
._0ab43688537c1d7f-arrowIconExpanded {
transform: rotate(180deg);
}
._0ab43688537c1d7f-headerSubtitleContainer {
align-items: center;
display: flex;
gap: 6px;
}
._0ab43688537c1d7f-divider {
border-bottom: 1px solid var(--opacity-white-4);
margin: 16px 0;
}
._0ab43688537c1d7f-changePlanNotice {
background-color: var(--background-secondary-alt);
margin-bottom: 16px;
}
._0ab43688537c1d7f-subscriptionInfoCards {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
._0ab43688537c1d7f-container ._0ab43688537c1d7f-paymentSourceDropdown {
margin-bottom: 16px;
}
._0ab43688537c1d7f-container ._0ab43688537c1d7f-paymentSourceDropdown,
._0ab43688537c1d7f-infoCard,
._0ab43688537c1d7f-paymentSourceDropdownOption {
background-color: var(--background-secondary-alt);
}
._0ab43688537c1d7f-infoCard {
border-radius: 8px;
flex: 1;
padding: 16px;
}
._0ab43688537c1d7f-infoCardLabel {
color: var(--interactive-text-default);
margin-bottom: 16px;
text-transform: uppercase;
}
._0ab43688537c1d7f-infoCardLabelContainer {
display: flex;
flex-direction: row;
}
._0ab43688537c1d7f-infoCardIcon {
height: 16px;
width: 16px;
-webkit-margin-start: 8px;
color: var(--interactive-text-default);
margin-inline-start: 8px;
}
._0ab43688537c1d7f-infoCardValue {
color: var(--text-strong);
font-weight: var(--font-weight-normal);
}
._0ab43688537c1d7f-rowButton {
background-color: var(--background-secondary-alt);
cursor: pointer;
}
._0ab43688537c1d7f-rowButton:first-child {
border-radius: 8px 8px 0 0;
}
._0ab43688537c1d7f-rowButton:last-child {
border-radius: 0 0 8px 8px;
}
._0ab43688537c1d7f-rowButton:last-child ._0ab43688537c1d7f-rowButtonContent {
border-bottom: none;
}
._0ab43688537c1d7f-rowButtonContent {
align-items: center;
display: flex;
justify-content: space-between;
-webkit-margin-start: 16px;
border-bottom: 1px solid var(--opacity-white-4);
margin-inline-start: 16px;
padding-block: 16px;
padding-inline: 0 16px;
}
._0ab43688537c1d7f-rowButtonArrow {
color: var(--interactive-text-default);
height: 24px;
transform: rotate(-90deg);
width: 24px;
}
._0ab43688537c1d7f-rowButtonLabel {
color: var(--interactive-text-active);
font-weight: var(--font-weight-medium);
}
._0ab43688537c1d7f-paymentDueBadge {
color: var(--primary-860);
letter-spacing: 0.02em;
}
._8f372eefd1c1de31-pageDescription {
margin-bottom: 40px;
}
._8f372eefd1c1de31-subscriptionsContainer {
display: flex;
flex-direction: column;
gap: 16px;
}
.bf1984d4f24183ba-buttonWrapper {
display: inline-flex;
max-width: var(--custom-button-button-lg-width);
min-width: -webkit-min-content;
min-width: -moz-min-content;
min-width: min-content;
}
._9851a5bbdc6a8cf5-sectionDescription {
color: var(--text-default);
}
._9851a5bbdc6a8cf5-card {
background-image: linear-gradient(90deg, var(--application-subscription-start) 0, var(--application-subscription-end) 100%);
flex-wrap: wrap;
gap: 16px;
}
._9851a5bbdc6a8cf5-bannerImage {
align-self: flex-end;
margin-bottom: -16px;
}
._9851a5bbdc6a8cf5-textContainer {
flex: 1;
position: relative;
}
._9851a5bbdc6a8cf5-header {
margin-bottom: 4px;
margin-top: 5px;
}
._9851a5bbdc6a8cf5-description,
._9851a5bbdc6a8cf5-header {
color: var(--white);
}
._9851a5bbdc6a8cf5-description strong {
font-weight: var(--font-weight-medium);
}
.be018f868fa303cc-wrapper {
background-color: var(--background-base-lower);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-low);
box-sizing: border-box;
overflow: hidden;
}
.be018f868fa303cc-header {
align-items: center;
background-color: var(--background-secondary-alt);
display: flex;
justify-content: space-between;
}
.be018f868fa303cc-content,
.be018f868fa303cc-header {
padding: 16px;
}
.bb8774b01419b2c6-container {
background-color: var(--background-secondary-alt);
border: 1px solid var(--border-subtle);
border-radius: 8px;
flex-direction: column;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
width: 100%;
}
.bb8774b01419b2c6-container,
.bb8774b01419b2c6-image {
display: flex;
overflow: hidden;
}
.bb8774b01419b2c6-image {
align-items: center;
background-color: var(--brand-500);
border-radius: var(--radius-md);
flex-shrink: 0;
justify-content: center;
}
.bb8774b01419b2c6-image,
.bb8774b01419b2c6-image img {
height: 80px;
width: 80px;
}
.bb8774b01419b2c6-description {
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
display: -webkit-box;
max-height: 36px;
overflow: hidden;
text-align: center;
width: 100%;
}
.bb8774b01419b2c6-card {
background-color: var(--background-secondary-alt);
gap: 10px;
padding: 16px;
}
.bb8774b01419b2c6-body,
.bb8774b01419b2c6-card {
align-items: center;
display: flex;
flex-direction: column;
}
.bb8774b01419b2c6-body {
align-self: stretch;
gap: 16px;
}
.bb8774b01419b2c6-purchaseBtn {
width: 100%;
}
.bb8774b01419b2c6-benefits {
background-color: var(--background-base-lower);
flex-grow: 1;
padding: 16px;
}
.bb8774b01419b2c6-benefitsContainer {
gap: 24px;
}
.bb8774b01419b2c6-benefitsContainer,
.bb8774b01419b2c6-benefitsList {
align-items: flex-start;
align-self: stretch;
display: flex;
flex-direction: column;
}
.bb8774b01419b2c6-benefitsList {
gap: 12px;
}
.bb8774b01419b2c6-benefitsBenefit {
align-items: center;
align-self: stretch;
display: flex;
gap: 16px;
}
.bb8774b01419b2c6-cardBenefit {
display: flex;
gap: 16px;
width: 100%;
}
@value iconSize: 24px;
.bb8774b01419b2c6-cardBenefitIcon {
font-size: 24px;
height: 24px;
width: 24px;
}
.bb8774b01419b2c6-cardBenefitIcon img {
height: 24px;
object-fit: cover;
width: 24px;
}
.bb8774b01419b2c6-benefitsSummary {
align-items: center;
align-self: stretch;
background: var(--background-base-lowest);
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 16px;
}
.fdda30ffc9f22531-hoverCard {
cursor: pointer;
transition:
box-shadow,
transform 0.2s ease;
}
.fdda30ffc9f22531-hoverCard:focus-within,
.fdda30ffc9f22531-hoverCard:hover {
box-shadow: var(--shadow-high);
transform: translateY(-4px);
}
.a6312094ba2f9dc2-toggle {
align-items: center;
color: var(--text-brand);
cursor: pointer;
display: flex;
gap: 4px;
}
._4909b209943734bd-headerWrapper {
height: 72px;
}
._4909b209943734bd-headerContent {
display: flex;
gap: 16px;
}
._4909b209943734bd-appIcon {
border-radius: var(--radius-md);
}
._4909b209943734bd-headerButtons {
display: flex;
gap: 8px;
}
._4909b209943734bd-details {
padding-bottom: 16px;
}
._4909b209943734bd-row {
align-items: center;
border-bottom: 1px solid var(--border-subtle);
box-sizing: border-box;
display: flex;
justify-content: space-between;
padding: 16px 0;
}
._4909b209943734bd-row:first-child {
padding-top: 0;
}
._4909b209943734bd-rowContent {
text-align: end;
}
._4909b209943734bd-subscriptionTypeRow {
display: inline-flex;
gap: 8px;
}
._4909b209943734bd-guildSubscriptionContentRow {
align-items: center;
display: flex;
gap: 8px;
padding-top: 2px;
}
._4909b209943734bd-noticeBanner {
margin-bottom: 16px;
}
._4909b209943734bd-payment {
height: 65px;
}
._4909b209943734bd-benefits {
display: flex;
flex-direction: column;
gap: 16px;
padding-top: 16px;
}
._4909b209943734bd-benefitsHeader {
align-items: center;
display: flex;
justify-content: space-between;
}
._4909b209943734bd-benefitsBtn {
-webkit-margin-start: auto;
margin-inline-start: auto;
}
._4909b209943734bd-managementBtns {
display: flex;
gap: 8px;
}
.e08d4dbc2e55bc06-button {
background: inherit;
padding: 0;
}
.e08d4dbc2e55bc06-seeMore {
align-items: center;
display: flex;
gap: 4px;
margin-top: 4px;
}
.e08d4dbc2e55bc06-content {
overflow: hidden;
transition: height 0.25s ease-in-out;
}
._3425dec38503c478-wrapper {
max-width: 660px;
width: 100%;
}
._3425dec38503c478-headerTitle {
align-items: center;
display: flex;
gap: 16px;
}
._3425dec38503c478-subscriptionImg {
border-radius: 48px;
}
._3425dec38503c478-description {
white-space: pre-line;
}
._3425dec38503c478-benefits {
display: flex;
flex-direction: column;
gap: 16px;
padding-top: 16px;
}
.b87308c465d692b4-header {
align-items: flex-end;
border-bottom-width: 1px;
border-color: hsl(var(--primary-300-hsl) / 0.3);
border-style: solid;
display: flex;
flex-direction: row;
gap: 16px;
margin-bottom: 16px;
padding-bottom: 24px;
}
.theme-dark .b87308c465d692b4-header {
border-color: hsl(var(--primary-400-hsl) / 0.3);
}
.b87308c465d692b4-appIcon {
border-radius: var(--radius-md);
}
.b87308c465d692b4-subInfo {
flex-direction: row;
padding-top: 2px;
}
.b87308c465d692b4-guildSubscription,
.b87308c465d692b4-subInfo,
.b87308c465d692b4-subInfoType {
display: flex;
gap: 8px;
}
.b87308c465d692b4-subInfoType {
align-items: center;
}
.b87308c465d692b4-subscriptions {
display: flex;
flex-direction: column;
gap: 16px;
padding-top: 32px;
}
.b87308c465d692b4-activeSubscriptionCard {
border: 2px solid var(--brand-500);
}
.b87308c465d692b4-activeSubscriptionCTA {
display: flex;
flex-direction: column;
gap: 4px;
text-align: end;
}
.b87308c465d692b4-planNotice {
display: flex;
flex-direction: column;
gap: 8px;
}
._0dc2322bf772062b-subscriptionsContainer {
display: flex;
flex-direction: column;
gap: 16px;
}
._0dc2322bf772062b-title {
align-items: center;
display: flex;
gap: 20px;
margin-bottom: 40px;
}
._94f72ca8df533a71-fractionalPremiumAccountCredit,
._94f72ca8df533a71-premiumSubscriptionAccountCredit {
background-color: var(--background-base-lower);
border-radius: 5px;
}
._94f72ca8df533a71-accountCreditRow {
display: flex;
padding: 16px;
}
._94f72ca8df533a71-accountCreditsContainer ._94f72ca8df533a71-accountCreditRow:not(:last-child) {
border-bottom: 1px solid var(--border-subtle);
}
._94f72ca8df533a71-iconBackground {
align-items: center;
align-self: center;
border-radius: 4px;
display: flex;
justify-content: center;
padding: 4px;
}
._94f72ca8df533a71-iconBackgroundTier0 {
background-image: linear-gradient(90deg, var(--premium-tier-0-purple-for-gradients), var(--premium-tier-0-blue-for-gradients));
}
._94f72ca8df533a71-iconBackgroundTier1 {
background-image: linear-gradient(90deg, var(--premium-tier-1-dark-blue-for-gradients), var(--premium-tier-1-blue-for-gradients));
}
._94f72ca8df533a71-iconBackgroundTier2 {
background-image: linear-gradient(90deg, var(--premium-tier-2-purple-for-gradients), var(--premium-tier-2-pink-for-gradients));
}
._94f72ca8df533a71-iconBackgroundFractional {
background-image: linear-gradient(0deg, var(--guild-boosting-blue), var(--guild-boosting-purple));
}
._94f72ca8df533a71-icon {
color: var(--white);
}
._94f72ca8df533a71-icon,
._94f72ca8df533a71-iconFractional {
height: 24px;
width: 24px;
}
._94f72ca8df533a71-iconFractional {
filter: drop-shadow(0 1px 2px rgb(0 0 0/0.4));
}
._94f72ca8df533a71-rowDetails {
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
margin: 0 8px;
}
._94f72ca8df533a71-rowApplied {
font-weight: var(--font-weight-normal);
}
._94f72ca8df533a71-rowCreditCount {
align-self: center;
color: var(--interactive-text-default);
}
._94f72ca8df533a71-fractionalTimeRemainingRow {
background-color: var(--background-base-lowest);
border-radius: 0 0 5px 5px;
display: flex;
padding: 16px;
}
._94f72ca8df533a71-fractionalTimeRemainingRowDetails {
color: var(--brand-360);
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
margin: 0;
}
._94f72ca8df533a71-fractionalTimeRemainingRowHeader {
color: var(--brand-360);
}
._94f72ca8df533a71-fractionalTimeRemainingPillWrapper {
display: flex;
flex-direction: column;
justify-content: center;
}
._94f72ca8df533a71-fractionalTimeRemainingPill {
align-items: center;
background-image: linear-gradient(0deg, var(--brand-560), var(--brand-460));
border-radius: var(--radius-md);
display: flex;
}
._94f72ca8df533a71-fractionalTimeRemainingPillText {
color: var(--white);
display: inline-block;
line-height: 18px;
padding: 4px 8px;
text-align: center;
}
._94f72ca8df533a71-tier1AccountCreditHeader {
padding-bottom: 16px;
padding-top: 32px;
}
._94f72ca8df533a71-fractionalUnactivatedPill {
align-items: center;
background-color: var(--background-base-lower);
border-radius: var(--radius-md);
display: flex;
}
._94f72ca8df533a71-fractionalUnactivatedPillText {
color: var(--brand-360);
display: inline-block;
line-height: 18px;
padding: 4px 8px;
text-align: center;
}
._8499568628647f7b-banner {
background-position: 0 0;
background-repeat: no-repeat;
border-radius: 4px;
box-sizing: border-box;
color: var(--white);
display: flex;
flex-direction: column;
padding: 16px;
position: relative;
}
._8499568628647f7b-bannerBackgroundImage {
background-image: url(/assets/be68608fe0247064.svg);
background-repeat: no-repeat;
bottom: 0;
position: absolute;
top: 6px;
inset-inline: 0;
}
._8499568628647f7b-image {
background-size: 100% 100%;
flex-shrink: 0;
height: 68px;
width: 96px;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
@media (max-width: 485px) {
._8499568628647f7b-image {
display: none;
}
}
._8499568628647f7b-repositioned ._8499568628647f7b-image {
height: 68px;
width: 88px;
-webkit-margin-end: 16px;
margin-inline-end: 16px;
}
._8499568628647f7b-repositioned ._8499568628647f7b-buttons {
inset-inline-end: 0;
position: relative;
top: 0;
}
._8499568628647f7b-repositioned ._8499568628647f7b-planInfo {
margin: 10px 0 16px;
}
._8499568628647f7b-repositioned ._8499568628647f7b-planName {
height: 28px;
}
._8499568628647f7b-repositioned._8499568628647f7b-tier0 ._8499568628647f7b-basicWordmark {
background-size: contain;
height: 16px;
}
._8499568628647f7b-details,
._8499568628647f7b-image {
position: relative;
}
._8499568628647f7b-tier0._8499568628647f7b-banner {
background-image: var(--custom-premium-colors-premium-gradient-tier-0);
}
._8499568628647f7b-tier0 ._8499568628647f7b-image {
background-image: url(/assets/678405b196a10914.svg);
}
._8499568628647f7b-tier0 ._8499568628647f7b-discordWordmark {
height: 16px;
width: 41px;
}
._8499568628647f7b-tier0 ._8499568628647f7b-basicWordmark {
background-image: url(/assets/dbd86d446dd08738.svg);
background-repeat: no-repeat;
height: 19px;
}
._8499568628647f7b-tier0 ._8499568628647f7b-details {
display: flex;
flex: 1 1 auto;
flex-direction: column;
height: 100%;
}
._8499568628647f7b-tier0._8499568628647f7b-canceled ._8499568628647f7b-image,
._8499568628647f7b-tier0._8499568628647f7b-failedPayment ._8499568628647f7b-image,
._8499568628647f7b-tier0._8499568628647f7b-pausePending ._8499568628647f7b-image,
._8499568628647f7b-tier0._8499568628647f7b-paused ._8499568628647f7b-image {
background-image: url(/assets/2151b9a5d6e8fd2d.svg);
}
._8499568628647f7b-tier1._8499568628647f7b-banner {
background-image: var(--custom-premium-colors-premium-gradient-tier-1);
}
._8499568628647f7b-tier1 ._8499568628647f7b-image {
background-image: url(/assets/9e74dbc28e1b3b88.svg);
}
._8499568628647f7b-tier1 ._8499568628647f7b-discordWordmark {
height: 16px;
width: 41px;
}
._8499568628647f7b-tier1 ._8499568628647f7b-classicWordmark {
background-image: url(/assets/1aa632d6117fca62.svg);
height: 19px;
width: 185px;
}
._8499568628647f7b-tier1 ._8499568628647f7b-details {
display: flex;
flex: 1 1 auto;
flex-direction: column;
height: 100%;
}
._8499568628647f7b-tier1._8499568628647f7b-canceled ._8499568628647f7b-image,
._8499568628647f7b-tier1._8499568628647f7b-failedPayment ._8499568628647f7b-image,
._8499568628647f7b-tier1._8499568628647f7b-pausePending ._8499568628647f7b-image,
._8499568628647f7b-tier1._8499568628647f7b-paused ._8499568628647f7b-image {
background-image: url(/assets/2151b9a5d6e8fd2d.svg);
}
._8499568628647f7b-tier2._8499568628647f7b-banner {
background-image: var(--custom-premium-colors-premium-gradient-tier-2);
}
._8499568628647f7b-tier2 ._8499568628647f7b-image {
background-image: url(/assets/64932bb2d0db66ec.svg);
}
._8499568628647f7b-tier2 ._8499568628647f7b-planName {
height: 32px;
width: 77px;
}
._8499568628647f7b-tier2._8499568628647f7b-canceled ._8499568628647f7b-image,
._8499568628647f7b-tier2._8499568628647f7b-failedPayment ._8499568628647f7b-image,
._8499568628647f7b-tier2._8499568628647f7b-pausePending ._8499568628647f7b-image,
._8499568628647f7b-tier2._8499568628647f7b-paused ._8499568628647f7b-image {
background-image: url(/assets/3137261af6151921.svg);
}
._8499568628647f7b-canceled._8499568628647f7b-banner {
background-image: linear-gradient(90deg, #f18623, #f6a12a 56%, #fab930);
}
._8499568628647f7b-canceled ._8499568628647f7b-planInfo,
._8499568628647f7b-canceled ._8499568628647f7b-planName {
color: var(--black);
}
._8499568628647f7b-failedPayment._8499568628647f7b-banner {
background-image: linear-gradient(270deg, #e82427, #c81031);
}
._8499568628647f7b-paused._8499568628647f7b-banner {
border-radius: 4px;
}
._8499568628647f7b-pausePending._8499568628647f7b-banner,
._8499568628647f7b-paused._8499568628647f7b-banner {
background: var(--primary-500);
}
._8499568628647f7b-planInfo {
font-size: 16px;
line-height: 20px;
margin-top: 8px;
}
._8499568628647f7b-buttons {
inset-inline-end: 20px;
justify-content: flex-end;
position: absolute;
top: 16px;
}
._8499568628647f7b-buttons,
._8499568628647f7b-toolsButtons {
display: flex;
}
._8499568628647f7b-toolsButton {
position: relative;
-webkit-margin-start: 16px;
margin-inline-start: 16px;
}
@media (max-width: 390px) {
._8499568628647f7b-premiumSettingsPushButton {
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
}
._8499568628647f7b-secondaryBannerTextButtonContainerWithPause {
margin-top: 5px;
-webkit-margin-end: 15px;
margin-inline-end: 15px;
}
@media (max-width: 485px) {
._8499568628647f7b-secondaryBannerTextButtonContainerWithPause {
margin-top: 0;
-webkit-margin-end: 0;
margin-inline-end: 0;
}
._8499568628647f7b-secondaryBannerTextButtonContainerWithPause button > span {
display: inline-block;
line-break: strict;
overflow-wrap: break-word;
text-align: center;
white-space: normal;
width: 130px;
word-break: keep-all;
}
}
@media (max-width: 390px) {
._8499568628647f7b-secondaryBannerTextButtonContainerWithPause button > span {
width: 120px;
}
}
._8499568628647f7b-secondaryBannerTextButtonContainer {
margin-top: 5px;
-webkit-margin-end: 15px;
margin-inline-end: 15px;
}
._8499568628647f7b-linkButton {
padding: 0 2px;
position: relative;
}
._8499568628647f7b-externalButton {
text-transform: uppercase;
}
._8499568628647f7b-detailsContainer {
align-items: center;
display: flex;
}
._8499568628647f7b-discountPill {
position: relative;
top: 5px;
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
._8499568628647f7b-headerLabel {
display: flex;
flex-direction: row;
}
._8499568628647f7b-wordMark {
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
._8499568628647f7b-headerColumnB {
flex-direction: row;
}
.df7724002aa03fa8-finePrintWithOverheadSeparator {
border-top: 1px solid var(--border-subtle);
line-height: 1.4;
margin-top: 32px;
padding-top: 32px;
}
.df7724002aa03fa8-finePrint {
line-height: 1.4;
}
._8f41e1f9d50dd427-container {
display: flex;
padding-block: var(--space-8);
-webkit-padding-start: var(--space-4);
padding-inline-start: var(--space-4);
-webkit-padding-end: var(--space-8);
align-items: center;
border-radius: var(--radius-sm);
justify-content: space-between;
min-width: 0;
padding-inline-end: var(--space-8);
}
._8f41e1f9d50dd427-container._8f41e1f9d50dd427-hoverBackground:hover {
background: var(--background-mod-muted);
}
._8f41e1f9d50dd427-userInfoContainer {
align-items: center;
display: flex;
flex-direction: row;
min-width: 0;
overflow: hidden;
}
._8f41e1f9d50dd427-userInfoContainer._8f41e1f9d50dd427-faded {
opacity: 0.5;
}
._8f41e1f9d50dd427-avatar {
-webkit-margin-end: var(--space-12);
flex-shrink: 0;
margin-inline-end: var(--space-12);
}
._8f41e1f9d50dd427-username {
flex-shrink: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._8f41e1f9d50dd427-separator {
-webkit-margin-end: var(--space-4);
margin-inline-end: var(--space-4);
-webkit-margin-start: var(--space-4);
margin-inline-start: var(--space-4);
}
._8f41e1f9d50dd427-label {
flex-shrink: 0;
white-space: nowrap;
}
._8f41e1f9d50dd427-userIconCircle {
align-items: center;
background: var(--background-mod-subtle);
border-radius: 50%;
display: flex;
height: 24px;
justify-content: center;
width: 24px;
}
._8f41e1f9d50dd427-textButtonContainer {
-webkit-margin-start: var(--space-12);
margin-inline-start: var(--space-12);
}
.f1578d037d12d3a8-logoHeader {
font-size: 16px;
font-style: italic;
font-weight: 900;
line-height: 23.643px;
text-transform: uppercase;
}
.f1578d037d12d3a8-container {
background: var(--background-surface-high);
border-radius: var(--radius-sm);
padding: var(--space-4) var(--space-24) 0;
width: 100%;
}
.f1578d037d12d3a8-header {
align-items: center;
border-bottom: 1px solid var(--border-muted);
display: flex;
}
.f1578d037d12d3a8-headerTitle {
height: 16px;
}
.f1578d037d12d3a8-contentGrid {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 320px;
}
.f1578d037d12d3a8-contentGrid > * {
min-width: 0;
}
.f1578d037d12d3a8-descriptionAndButtonContainer {
align-items: flex-start;
display: flex;
flex-direction: column;
justify-content: center;
-webkit-border-end: 1px solid var(--border-muted);
border-inline-end: 1px solid var(--border-muted);
padding-top: var(--space-24);
-webkit-padding-end: var(--space-32);
box-sizing: border-box;
padding-inline-end: var(--space-32);
padding-bottom: var(--space-24);
}
.f1578d037d12d3a8-descriptionContainer {
margin-bottom: var(--space-10);
}
.f1578d037d12d3a8-buttonContainer {
margin-top: var(--space-12);
}
.f1578d037d12d3a8-usersListHeader,
.f1578d037d12d3a8-usersListHeaderContainer {
margin-bottom: 10px;
}
.f1578d037d12d3a8-usersListHeader {
padding: var(--space-12) var(--space-4) 0;
}
.f1578d037d12d3a8-button {
margin-top: var(--space-12);
}
.f1578d037d12d3a8-premiumGroupIcon {
color: var(--text-strong);
}
._32fe3b4969edae3a-churnDiscountBanner {
border-radius: var(--radius-md);
box-sizing: border-box;
display: flex;
flex-direction: column;
height: 100%;
max-width: 660px;
padding: 16px 24px 24px;
position: relative;
}
._32fe3b4969edae3a-churnDiscountBannerContent {
display: flex;
flex-direction: row;
}
._32fe3b4969edae3a-churnDiscountBannerDetails {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
max-width: 420px;
-webkit-padding-end: 12px;
padding-inline-end: 12px;
}
._32fe3b4969edae3a-churnDiscountBannerBackground {
background-color: var(--background-base-lowest);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
}
._32fe3b4969edae3a-selectPlanDivider {
background-color: var(--border-subtle);
height: 1px;
margin: 8px 0 16px;
}
._32fe3b4969edae3a-headerLabel {
display: flex;
flex-direction: row;
padding-bottom: 4px;
}
._32fe3b4969edae3a-headerGradient {
border-radius: var(--radius-md);
margin: -1px;
margin-top: calc(var(--custom-modal-padding-top) * -1 - 1px);
padding: 1px;
padding-top: calc(var(--custom-modal-padding-top) + 1px);
}
._32fe3b4969edae3a-churnDiscountBannerImage {
max-height: 140px;
max-width: 250px;
-webkit-padding-start: 20px;
padding-inline-start: 20px;
}
._32fe3b4969edae3a-activeSubButtons {
display: flex;
gap: 8px;
}
._32fe3b4969edae3a-churnDiscountBannerButton {
margin-top: 12px;
position: relative;
}
._32fe3b4969edae3a-churnDiscountPill {
position: relative;
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
._32fe3b4969edae3a-churnDiscountBannerExpiryDate {
justify-content: flex-end;
position: relative;
-webkit-margin-start: auto;
margin-inline-start: auto;
}
._32fe3b4969edae3a-churnDiscountBannerWordMark {
color: var(--text-strong);
width: 67px;
}
.dbec1607a2f6dfe2-root {
align-items: center;
background-color: var(--background-base-lower);
border-radius: 4px;
display: flex;
font-size: 14px;
line-height: 18px;
padding: 8px 16px;
}
.dbec1607a2f6dfe2-infoIcon {
-webkit-margin-end: 6px;
height: 14px;
margin-inline-end: 6px;
width: 14px;
}
.dbec1607a2f6dfe2-infoIcon,
.dbec1607a2f6dfe2-text {
color: var(--interactive-text-default);
}
.dbec1607a2f6dfe2-text {
flex-grow: 1;
}
.dbec1607a2f6dfe2-cancelLink {
color: var(--blue-345);
font-weight: var(--font-weight-semibold);
white-space: nowrap;
}
@media (max-width: 485px) {
.dbec1607a2f6dfe2-cancelLink {
-webkit-margin-start: 6px;
margin-inline-start: 6px;
}
}
.dbec1607a2f6dfe2-modalBody {
color: var(--interactive-text-default);
font-size: 16px;
line-height: 20px;
margin-bottom: 16px;
}
._7015147b977b3e0e-container {
box-sizing: border-box;
display: flex;
flex: 1;
flex-direction: column;
}
._7015147b977b3e0e-loading {
align-items: center;
display: flex;
height: 520px;
justify-content: center;
}
._7015147b977b3e0e-background {
background-repeat: no-repeat;
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
}
._7015147b977b3e0e-content {
display: flex;
flex-direction: column;
gap: 32px;
position: relative;
}
._7015147b977b3e0e-subSectionHeader {
text-transform: uppercase;
}
._7015147b977b3e0e-accountCredit {
margin-top: 16px;
}
._7015147b977b3e0e-accountCreditTitle {
margin-bottom: 8px;
}
._7015147b977b3e0e-accountCreditDescription {
color: var(--text-default);
margin-bottom: 16px;
margin-top: 0;
}
._7015147b977b3e0e-cardText {
-webkit-padding-start: 8px;
padding-inline-start: 8px;
}
._7015147b977b3e0e-noItemsCard {
background-color: var(--background-base-lower);
border: none;
color: var(--interactive-text-active);
font-size: 16px;
font-weight: var(--font-weight-medium);
line-height: 20px;
margin-top: 16px;
padding: 16px 19px;
}
.theme-dark ._7015147b977b3e0e-noItemsIcon {
background: #4f545c;
}
._7015147b977b3e0e-hr {
border-color: hsl(var(--primary-300-hsl) / 0.3);
border-style: solid;
border-width: 1px 0 0;
display: block;
height: 0;
width: 100%;
}
.theme-dark ._7015147b977b3e0e-hr {
border-color: hsl(var(--primary-400-hsl) / 0.3);
}
:root {
--legacy-elevation-low: 0 1px 5px var(--opacity-black-20);
--legacy-elevation-high: 0 2px 10px 0 var(--opacity-black-8);
--legacy-elevation-border: 0 0 0 1px hsl(var(--primary-300-hsl)/0.3);
}
.theme-dark {
--legacy-elevation-low: 0 1px 5px 0 var(--opacity-black-28);
--legacy-elevation-high: 0 2px 10px 0 var(--opacity-black-20);
--legacy-elevation-border: 0 0 0 1px hsl(var(--primary-700-hsl)/0.6);
}
._9a9f981d3524e20f-elevationLow {
box-shadow: var(--legacy-elevation-low);
}
._9a9f981d3524e20f-elevationHigh {
box-shadow: var(--legacy-elevation-high);
}
._9a9f981d3524e20f-elevationBorderLow {
box-shadow: var(--legacy-elevation-border), var(--legacy-elevation-low);
}
._9a9f981d3524e20f-darkElevationBorderHigh {
box-shadow: var(--legacy-elevation-border), var(--legacy-elevation-high);
}
._9a9f981d3524e20f-lightElevationLow {
box-shadow: var(--legacy-elevation-low);
}
._9a9f981d3524e20f-lightElevationHigh {
box-shadow: var(--legacy-elevation-high);
}
._9a9f981d3524e20f-lightElevationBorderLow {
box-shadow: var(--legacy-elevation-border), var(--legacy-elevation-low);
}
._9a9f981d3524e20f-elevationBorderHigh,
._9a9f981d3524e20f-elevationBorderLow,
._9a9f981d3524e20f-elevationHigh,
._9a9f981d3524e20f-elevationLow,
._9a9f981d3524e20f-lightElevationBorderHigh {
box-shadow: var(--legacy-elevation-border), var(--legacy-elevation-high);
}
._9a9f981d3524e20f-container {
background-color: var(--background-surface-highest);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
box-shadow: var(--legacy-elevation-high);
overflow: hidden;
padding-block: 10px;
padding-inline: 16px 10px;
transition-duration: 0.2s;
transition-property: background-color, color, border-color;
transition-timing-function: ease;
}
._9a9f981d3524e20f-container[data-emphasized="true"] {
background-color: var(--notice-background-critical);
border-color: var(--border-feedback-critical);
color: var(--notice-text-critical);
}
._9a9f981d3524e20f-flexContainer {
align-items: center;
display: flex;
justify-content: space-between;
position: relative;
}
._9a9f981d3524e20f-shrinkingContainer {
overflow: hidden;
}
._9a9f981d3524e20f-actions {
display: flex;
flex-grow: 0;
gap: 0 10px;
justify-content: end;
}
._9a9f981d3524e20f-resetButton {
padding-inline: 0;
}
._9a9f981d3524e20f-message {
color: var(--text-default);
font-size: 16px;
font-weight: var(--font-weight-medium);
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.theme-light ._9a9f981d3524e20f-notice {
background-color: hsl(var(--primary-100-hsl) / 0.95);
}
.theme-dark ._9a9f981d3524e20f-notice {
background: hsl(var(--primary-700-hsl) / 0.95);
}
.theme-dark ._9a9f981d3524e20f-message {
color: var(--white);
}
.enable-forced-colors ._9a9f981d3524e20f-container {
border: 2px solid CanvasText;
}
.e4ef2250e26e0a8f-premiumTrialBadge {
align-items: center;
border-radius: var(--radius-md);
display: flex;
-webkit-margin-start: auto;
margin-inline-start: auto;
padding: 0 6px;
pointer-events: all;
text-transform: uppercase;
}
.e4ef2250e26e0a8f-backgroundGradient {
background: linear-gradient(90deg, #db00a4, #5968f0);
}
.e4ef2250e26e0a8f-premiumTrialAcknowledgedBadge {
background-color: var(--background-mod-strong);
}
.e4ef2250e26e0a8f-BogoBadgeClockIcon {
height: 14px;
width: 14px;
-webkit-margin-end: 4px;
color: var(--icon-subtle);
margin-inline-end: 4px;
}
._4c1e4c295670eb1a-premiumTrialBadge {
align-items: center;
border-radius: var(--radius-md);
color: var(--text-strong);
display: flex;
-webkit-margin-start: auto;
gap: 4px;
margin-inline-start: auto;
padding: 1px 6px;
pointer-events: all;
text-transform: uppercase;
}
._4c1e4c295670eb1a-premiumOfferUnackedBadge {
background: linear-gradient(90deg, #db00a4, #5968f0);
}
._4c1e4c295670eb1a-premiumTrialBadge._4c1e4c295670eb1a-premiumOfferUnackedBadge ._4c1e4c295670eb1a-premiumTrialBadgeIcon,
._4c1e4c295670eb1a-premiumTrialBadge._4c1e4c295670eb1a-premiumOfferWithTimerAcknowledgedBadge ._4c1e4c295670eb1a-premiumTrialBadgeIcon {
height: 12px;
width: 12px;
}
._4c1e4c295670eb1a-premiumOfferWithTimerUnacknowledgedBadge {
background-image: linear-gradient(to right, var(--premium-tier-2-purple-for-gradients), var(--premium-tier-2-pink-for-gradients));
}
._4c1e4c295670eb1a-premiumOfferWithTimerAcknowledgedBadge {
background-color: var(--background-accent);
}
._4c1e4c295670eb1a-premiumTrialBadgeSelected {
background-color: var(--background-base-lower);
}
._4c1e4c295670eb1a-premiumOfferBadgeCopy {
color: var(--white);
}
.theme-light ._4c1e4c295670eb1a-premiumTrialBadge {
background-color: var(--background-base-lowest);
}
.theme-light ._4c1e4c295670eb1a-premiumTrialBadgeSelected {
background-color: var(--background-base-lower);
}
.e681d139d22f277b-premiumLabel {
align-items: center;
display: flex;
justify-content: space-between;
pointer-events: none;
position: relative;
z-index: 3;
}
.e681d139d22f277b-selected {
color: var(--white);
}
.e681d139d22f277b-background {
border-radius: var(--radius-xs);
height: 100%;
inset-inline-start: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
.e681d139d22f277b-selectedBackground {
background-color: var(--brand-500);
}
.enable-forced-colors .e681d139d22f277b-selected {
color: Highlight;
}
.enable-forced-colors .e681d139d22f277b-selectedIcon {
fill: Highlight;
}
.enable-forced-colors .e681d139d22f277b-selectedBackground {
background-color: HighlightText;
}
.c7e9071ee8df9113-tabBarItemContainer {
align-items: center;
display: flex;
justify-content: space-between;
}
.c7e9071ee8df9113-searchBar {
margin-bottom: var(--space-12);
}
._65c15724a894a2e0-featureBorder {
border-radius: 8px;
}
._65c15724a894a2e0-premiumFeatureBorder {
background:
linear-gradient(var(--background-base-low), var(--background-base-low)) padding-box,
var(--custom-premium-colors-premium-gradient-tier-2-diagonal) border-box;
border: 2px solid transparent;
}
._65c15724a894a2e0-limitedFeatureBorder {
background:
linear-gradient(var(--background-base-low), var(--background-base-low)) padding-box,
linear-gradient(var(--blue-345), var(--blue-345), var(--premium-perk-light-blue)) border-box;
border: 1px solid transparent;
}
._65c15724a894a2e0-background {
padding: 24px;
}
._65c15724a894a2e0-premiumBackground {
background: linear-gradient(45deg, hsl(var(--premium-tier-2-purple-for-gradients-hsl) / 0.05) 0, hsl(var(--premium-tier-2-pink-for-gradients-hsl) / 0.05) 100%) border-box;
}
._65c15724a894a2e0-limitedBackground {
background: linear-gradient(78.43deg, hsl(var(--blue-345-hsl) / 0.1), hsl(var(--blue-345-hsl) / 0.1), hsl(var(--premium-perk-light-blue-hsl) / 0.1)) padding-box;
}
.ace4f5a2d9b7fc28-title {
align-items: center;
display: flex;
margin-bottom: 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ace4f5a2d9b7fc28-viewFullProfileButton {
-webkit-margin-start: auto;
margin-inline-start: auto;
}
.ace4f5a2d9b7fc28-disabled {
opacity: 0.4;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.ace4f5a2d9b7fc28-customizationSection {
border-bottom: 1px solid var(--border-subtle);
margin-bottom: 24px;
padding-bottom: 24px;
}
.ace4f5a2d9b7fc28-customizationSection.ace4f5a2d9b7fc28-hideDivider {
border-bottom: none;
padding-bottom: 0;
}
.ace4f5a2d9b7fc28-customizationSection:last-child:not(.ace4f5a2d9b7fc28-withDivider) {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.ace4f5a2d9b7fc28-customizationSection.ace4f5a2d9b7fc28-showBorder {
padding-bottom: 12px;
}
.ace4f5a2d9b7fc28-customizationSectionBackground {
padding: 16px;
}
.ace4f5a2d9b7fc28-sectionDescription {
margin-bottom: 16px;
}
.ace4f5a2d9b7fc28-errorMessage {
margin-top: 8px;
}
.ace4f5a2d9b7fc28-customizationSectionBorder {
margin: -12px -12px 0;
}
._44061dfca5514945-profileCustomizationSection {
position: relative;
}
._44061dfca5514945-profileCustomizationSection p {
margin-top: 0;
}
._44061dfca5514945-baseLayout {
display: flex;
flex-wrap: wrap-reverse;
gap: 35px;
position: relative;
}
._44061dfca5514945-previewsContainer {
align-self: flex-end;
}
@media (min-width: 937px) {
._44061dfca5514945-previewsContainer {
position: -webkit-sticky;
position: sticky;
top: 24px;
}
}
._44061dfca5514945-preview,
._44061dfca5514945-previewItem {
max-width: 348px;
}
._5273bfb3444331e4-topSpacing {
margin-top: 24px;
}
._5273bfb3444331e4-emptyState {
align-items: center;
display: flex;
flex-direction: column;
}
._5273bfb3444331e4-emptyState,
._5273bfb3444331e4-image {
}
._5273bfb3444331e4-image {
height: 162px;
width: 186px;
}
._6a919231d4bdfd4f-bioTextArea {
--channel-text-area-placeholder: var(--input-placeholder-text-default);
border-radius: 3px;
height: 136px;
transition: border-color 0.2s ease-in-out;
}
._6a919231d4bdfd4f-bioTextArea:focus-within {
border-color: var(--text-link);
}
._6a919231d4bdfd4f-bioTextArea > div {
height: 100%;
}
._6a919231d4bdfd4f-bioTextArea,
._6a919231d4bdfd4f-bioTextAreaContainer {
background: var(--input-background-default);
}
._6a919231d4bdfd4f-bioTextAreaContainer {
border: 1px solid var(--input-border-default);
}
._6a919231d4bdfd4f-bioTextAreaContainer:focus-within {
border-color: var(--text-link);
}
._4cc0efee261fe197-imageInputContainer {
height: 0;
position: relative;
width: 0;
}
._89253581b3e6feb0-buttonsContainer {
display: flex;
}
._89253581b3e6feb0-removeButton {
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
._89253581b3e6feb0-buttonHighlighted {
background: linear-gradient(95.07deg, var(--premium-tier-2-purple-for-gradients) 0, var(--premium-tier-2-purple-for-gradients-2) 49.96%, var(--premium-tier-2-pink-for-gradients) 95.93%);
}
._89253581b3e6feb0-overrideButtonsContainer {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 16px;
}
._28d5e0a2d38ee49c-buttonsContainer {
display: flex;
}
._28d5e0a2d38ee49c-removeButton {
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
._28d5e0a2d38ee49c-buttonHighlighted {
background: linear-gradient(95.07deg, var(--premium-tier-2-purple-for-gradients) 0, var(--premium-tier-2-purple-for-gradients-2) 49.96%, var(--premium-tier-2-pink-for-gradients) 95.93%);
}
._28d5e0a2d38ee49c-newBadge {
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
._4962e7dd7cd2297c-buttonsContainer {
display: flex;
gap: 4px;
}
._4962e7dd7cd2297c-newBadge {
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
._25879e61a07a0d84-section {
display: flex;
gap: 4px;
}
._25879e61a07a0d84-newBadge {
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
.ffefd91d1f2593cf-buttonsContainer {
display: flex;
}
.ffefd91d1f2593cf-removeButton {
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
.ffefd91d1f2593cf-buttonHighlighted {
background: linear-gradient(95.07deg, var(--premium-tier-2-purple-for-gradients) 0, var(--premium-tier-2-purple-for-gradients-2) 49.96%, var(--premium-tier-2-pink-for-gradients) 95.93%);
}
.fd47aefbb9db0fe5-buttonsContainer {
display: flex;
}
.fd47aefbb9db0fe5-removeButton {
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
.fd47aefbb9db0fe5-buttonHighlighted {
background: linear-gradient(95.07deg, var(--premium-tier-2-purple-for-gradients) 0, var(--premium-tier-2-purple-for-gradients-2) 49.96%, var(--premium-tier-2-pink-for-gradients) 95.93%);
}
.fd47aefbb9db0fe5-newBadge {
-webkit-margin-start: 2px;
align-items: center;
margin-inline-start: 2px;
}
._2d060d615a1103be-colorSwatch {
cursor: pointer;
display: inline-block;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
position: relative;
text-align: center;
}
._2d060d615a1103be-colorSwatch._2d060d615a1103be-disabled {
cursor: not-allowed;
opacity: 0.3;
}
._2d060d615a1103be-swatch {
align-items: center;
border: 1px solid;
border-radius: 4px;
box-sizing: border-box;
display: flex;
height: 50px;
justify-content: center;
position: relative;
width: 69px;
}
._2d060d615a1103be-editPencilIcon {
inset-inline-end: 4px;
position: absolute;
top: 4px;
}
.enable-forced-colors ._2d060d615a1103be-swatch {
forced-color-adjust: none;
}
._04485055814eeabe-sectionContainer {
display: flex;
margin-top: 8px;
}
._04485055814eeabe-newBadge {
display: inline;
line-height: 18px;
-webkit-margin-start: 2px;
background: var(--custom-premium-colors-premium-gradient-tier-2);
margin-inline-start: 2px;
}
._04485055814eeabe-resetButton {
-webkit-margin-start: 4px;
margin-inline-start: 4px;
margin-top: calc((50px - var(--custom-button-button-sm-height)) / 2);
}
._04485055814eeabe-colorSwatchLabel {
margin-top: 4px;
}
._04485055814eeabe-sparkles {
inset-inline-start: -10px;
pointer-events: none;
position: absolute;
top: -15px;
z-index: 1;
}
._04485055814eeabe-sparklesFlip {
transform: scaleX(-1) scaleY(-1);
}
._04485055814eeabe-sparkleContainer {
position: relative;
}
._04485055814eeabe-sparkleContainer:first-child {
-webkit-margin-end: 16px;
margin-inline-end: 16px;
}
._17e9be68389304f7-displayNameStylesSection {
margin-top: var(--space-24);
}
._0f7dce48ad846f17-upsellOverlayContainer {
background:
linear-gradient(var(--background-base-low), var(--background-base-low)) padding-box,
var(--custom-premium-colors-premium-gradient-tier-2)-diagonal border-box;
border: 2px solid transparent;
border-radius: 8px;
padding: 16px;
position: relative;
}
._0f7dce48ad846f17-upsellOverlay {
align-items: center;
border-radius: 8px;
display: flex;
flex-direction: column;
inset-inline: 0;
bottom: 0;
gap: 16px;
justify-content: center;
padding: 16px 32px;
position: absolute;
text-align: center;
top: 0;
}
._0f7dce48ad846f17-upsellImage {
height: 200px;
width: 240px;
}
._0f7dce48ad846f17-upsellTextContainer {
background: var(--custom-premium-colors-premium-gradient-tier-2);
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 10px;
max-width: 240px;
padding: 16px 18px 18px;
}
.theme-dark ._0f7dce48ad846f17-upsellOverlay {
background-color: var(--opacity-black-40);
}
.theme-light ._0f7dce48ad846f17-upsellOverlay {
background-color: var(--opacity-white-40);
}
._722a8ec1ae98ca7b-sectionsContainer {
flex: 1;
}
._722a8ec1ae98ca7b-nitroWheel {
height: 16px;
margin-inline: 2px 4px;
vertical-align: sub;
width: 16px;
}
._999b58b4e43c632d-section {
margin-top: 16px;
}
._999b58b4e43c632d-guildSelectOptionIcon {
border-radius: 4px;
}
._14af962dc18af767-profilePreviewTitle {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._14af962dc18af767-nameplatePreviewPlaceholder {
background: var(--background-mod-normal);
}
._8279f38edc620354-container {
align-items: center;
border-radius: var(--radius-sm);
flex-direction: row;
margin: 24px 0;
-webkit-padding-end: 24px;
background:
linear-gradient(0deg, var(--opacity-black-20) 0, var(--opacity-black-20) 100%),
linear-gradient(
187deg,
var(--premium-tier-0-header-gradient-1) -9.85%,
var(--premium-tier-0-header-gradient-2) 35.44%,
var(--premium-tier-0-header-gradient-3) 55.85%,
var(--premium-tier-0-header-gradient-4) 100.07%,
var(--premium-tier-0-header-gradient-5) 110.26%
);
background-position: 50%;
background-size: cover;
padding-inline-end: 24px;
}
._8279f38edc620354-container,
._8279f38edc620354-mainColumn {
display: flex;
justify-content: center;
}
._8279f38edc620354-mainColumn {
color: var(--white);
flex: 1;
flex-direction: column;
margin: auto 0;
min-height: 96px;
padding-block: 16px;
padding-inline: 4px 16px;
}
._8279f38edc620354-title {
margin-bottom: 4px;
}
._8279f38edc620354-artContainer {
align-items: center;
align-self: stretch;
display: flex;
flex-basis: 154px;
height: 100px;
position: relative;
}
._8279f38edc620354-art {
bottom: -9px;
height: 124px;
inset-inline-start: -10px;
object-fit: contain;
pointer-events: none;
position: absolute;
width: 154px;
}
@keyframes abf1df291972494e-avatarAnimation {
0% {
transform: rotate(0deg);
}
to {
transform: rotate(1turn);
}
}
.full-motion .abf1df291972494e-spinningAvatar {
animation: abf1df291972494e-avatarAnimation 3s ease infinite;
}
._038c3b16f4442201-modal {
width: 650px;
}
._038c3b16f4442201-modalContent {
-webkit-padding-start: 0;
margin-bottom: 0;
padding-inline-start: 0;
}
._038c3b16f4442201-previewContainerParent {
background: var(--background-base-lower);
border-start-start-radius: var(--radius-md);
margin-top: -8px;
overflow-y: clip;
padding: var(--space-32);
padding-bottom: 0;
}
._038c3b16f4442201-previewContainer {
margin-bottom: -8px;
text-align: start;
width: 240px;
}
.fffe429fef648986-connectedAccountVanityMetadata {
margin-top: 4px;
}
.fffe429fef648986-connectedAccountVanityMetadata > strong {
font-weight: inherit;
}
.fffe429fef648986-connectedAccountVanityMetadata:not(:last-of-type) {
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
.fffe429fef648986-connectedAccountVanityMetadataTag {
background-color: var(--background-mod-subtle);
border-radius: 12px;
padding: 1px 8px;
}
.fffe429fef648986-connectedAccountVanityMetadataItem {
align-items: center;
display: flex;
}
.fffe429fef648986-connectedAccountVanityMetadataItemIcon {
height: 18px;
width: 18px;
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
.fffe429fef648986-paypalVerifiedTag {
background-color: var(--status-positive-background);
color: var(--white) !important;
}
._9a52c914a8ac54d7-title {
margin-bottom: 12px;
}
._9a52c914a8ac54d7-container {
border-top: 1px solid var(--border-strong);
display: flex;
flex-direction: column;
margin-top: 20px;
padding-top: 24px;
width: 100%;
}
._9a52c914a8ac54d7-activityRow {
align-items: stretch;
display: flex;
flex-direction: row;
gap: 16px;
padding: 16px 0;
}
._9a52c914a8ac54d7-activitySettings {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--space-16);
justify-content: center;
}
._9a52c914a8ac54d7-connectionIcon {
height: 32px;
width: 32px;
}
._9a52c914a8ac54d7-divider {
border-bottom: 1px solid var(--border-strong);
width: 100%;
}
._9a52c914a8ac54d7-visibilitySwitch {
margin-bottom: 0;
}
._9a52c914a8ac54d7-additionalDetailsSwitch {
margin-bottom: 0;
margin-top: 8px;
}
._9a52c914a8ac54d7-metadataContainer {
align-items: center;
display: flex;
flex-direction: row;
gap: 4px;
width: 100%;
}
._9a52c914a8ac54d7-metadataContainer ._9a52c914a8ac54d7-metadataItem {
margin: 0;
padding: 0;
}
._9a52c914a8ac54d7-metadataContainer ._9a52c914a8ac54d7-metadataItem:not(:last-of-type) {
-webkit-margin-end: 0;
margin-inline-end: 0;
}
._9a52c914a8ac54d7-metadataRefreshButton {
-webkit-margin-start: 16px;
justify-self: flex-end;
margin-inline-start: 16px;
}
._9a52c914a8ac54d7-dot {
background-color: var(--text-default);
border-radius: 4px;
height: 4px;
margin: 0 4px;
width: 4px;
}
._1499287dd19d7558-container {
display: flex;
flex-direction: row;
margin-bottom: var(--space-12);
}
._1499287dd19d7558-button {
align-content: center;
background-color: var(--background-base-lowest);
border-radius: var(--radius-sm);
color: var(--interactive-text-default);
cursor: pointer;
justify-items: center;
padding: var(--space-8);
}
._1499287dd19d7558-button:hover {
color: var(--interactive-text-active);
}
._1499287dd19d7558-select {
position: relative;
-webkit-margin-start: var(--space-8);
cursor: pointer;
display: flex;
height: 40px;
margin-inline-start: var(--space-8);
overflow: hidden;
}
._1499287dd19d7558-presetImage,
._1499287dd19d7558-select {
border-radius: var(--radius-sm);
flex: 1;
}
._1499287dd19d7558-presetImage {
background-size: cover;
}
._1499287dd19d7558-presetLabel {
align-self: center;
inset: 0;
position: absolute;
text-align: center;
text-transform: uppercase;
}
._9d295a6cf67970b4-tryItOutSection {
margin-top: 40px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
._9d295a6cf67970b4-tryItOutLayout {
gap: 30px;
}
._9d295a6cf67970b4-description {
margin-bottom: 24px;
margin-top: 8px;
}
._9d295a6cf67970b4-premiumPerksList {
-webkit-padding-start: 24px;
list-style: disc;
padding-inline-start: 24px;
}
._9d295a6cf67970b4-premiumSubscribeButton {
margin-top: 24px;
width: 100%;
}
._9d295a6cf67970b4-premiumIcon {
height: 16px;
-webkit-margin-end: -2px;
margin-inline-end: -2px;
}
._9d295a6cf67970b4-editor {
min-width: 315px;
}
._9d295a6cf67970b4-customizationSection {
margin-bottom: 16px;
padding-bottom: 16px;
}
._9d295a6cf67970b4-premiumTier2Divider {
background-image: linear-gradient(90deg, var(--premium-tier-2-pink-for-gradients) 0, var(--premium-tier-2-purple-for-gradients) 50%, var(--premium-tier-2-pink-for-gradients) 100%);
height: 2px;
margin-top: 68px;
margin-inline: -24px;
}
._9d295a6cf67970b4-titleIcon {
color: var(--text-strong);
}
._9d295a6cf67970b4-floatingUpsell {
background: var(--background-secondary-alt);
margin: 0;
margin-top: var(--space-24);
}
.e7c728afc3ff92d3-container {
flex: 1;
justify-content: space-between;
}
.e7c728afc3ff92d3-container,
.e7c728afc3ff92d3-guildPrefixContainer {
align-items: center;
display: flex;
min-width: 0;
}
.e7c728afc3ff92d3-guildPrefixContainer {
justify-content: center;
}
.e7c728afc3ff92d3-guildPrefixIcon {
flex: 1 0 auto;
}
.e7c728afc3ff92d3-details {
-webkit-padding-start: 8px;
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: 0;
padding-inline-start: 8px;
}
.e7c728afc3ff92d3-guildName {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
-webkit-margin-end: 4px;
color: var(--text-strong);
font-size: 16px;
font-weight: var(--font-weight-semibold);
line-height: 20px;
margin-inline-end: 4px;
}
.e7c728afc3ff92d3-tag {
background-color: var(--background-surface-high);
border: 1px solid var(--border-strong);
flex: 0;
padding: 4px 8px;
}
.e7c728afc3ff92d3-badge {
vertical-align: top;
-webkit-margin-end: 2px;
margin-inline-end: 2px;
}
.e7c728afc3ff92d3-tagContainer {
flex: 0 0 auto;
}
._105ba91fba7905bd-subtitle {
margin-bottom: 16px;
}
._105ba91fba7905bd-select,
._105ba91fba7905bd-selectPopout {
gap: 8px;
}
._105ba91fba7905bd-newBadge {
-webkit-margin-start: var(--space-4);
margin-inline-start: var(--space-4);
}
.e60bc032dbd6eea0-displayNameStylesSection {
margin-top: var(--space-24);
}
._17510f6689e8c6b1-newBadge {
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
.def11f7e777299ea-sectionsContainer {
flex: 1;
}
._39749d1aeeec7c43-floatingNitroUpsell {
inset: auto;
bottom: var(--space-32);
inset-inline: var(--space-24);
max-width: 740px;
padding: var(--space-16);
position: -webkit-sticky;
position: sticky;
z-index: 100;
}
._39749d1aeeec7c43-nameplatePreviewPlaceholder {
background: var(--background-mod-normal);
}
.d6f9e90c3456ac40-divider {
margin-bottom: 24px;
padding-bottom: 4px;
}
.d6f9e90c3456ac40-divider,
.d6f9e90c3456ac40-tabBar {
border-bottom: 1px solid var(--border-subtle);
}
.d6f9e90c3456ac40-tabBar {
margin-bottom: 16px;
margin-top: 0;
}
.d6f9e90c3456ac40-tabBarItem {
padding-bottom: 16px;
}
.d6f9e90c3456ac40-guildTabBarItem {
align-items: center;
display: flex;
flex-direction: row;
gap: 8px;
}
._2debea61131de3de-clickable {
cursor: pointer;
display: flex;
}
._2debea61131de3de-info {
padding: 8px 10px;
text-transform: capitalize;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
._2debea61131de3de-line {
display: inline-block;
width: 100%;
}
._2debea61131de3de-appArch,
._2debea61131de3de-os,
._2debea61131de3de-versionHash {
text-transform: none;
}
._2debea61131de3de-compact {
flex-direction: column;
gap: var(--space-4);
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
._2debea61131de3de-compactInfo > :not(:last-child):after {
color: var(--text-muted);
content: "•";
font-size: 10px;
margin: 0 var(--space-4);
}
._2debea61131de3de-compact ._2debea61131de3de-versionHash {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._61a6bac39bf12a0c-wrapper {
background-color: var(--background-base-lower);
background-position: 50% 0;
background-size: cover;
color: var(--text-default);
min-height: 100vh;
overflow: hidden;
}
._61a6bac39bf12a0c-flexWrapper {
height: 100vh;
}
._61a6bac39bf12a0c-image {
background-size: 100% 100%;
height: 154px;
margin-bottom: 40px;
width: 254px;
}
._61a6bac39bf12a0c-text {
margin-bottom: 20px;
width: 440px;
}
._61a6bac39bf12a0c-note {
color: var(--text-muted);
font-size: 16px;
}
._61a6bac39bf12a0c-note,
._61a6bac39bf12a0c-title {
text-align: center;
}
._61a6bac39bf12a0c-title {
color: var(--text-strong);
font-size: 24px;
font-weight: var(--font-weight-semibold);
line-height: 8px;
margin-bottom: 24px;
}
.images-light ._61a6bac39bf12a0c-wrapper {
background-image: url(/assets/069714e321aa543f.svg);
}
.images-light ._61a6bac39bf12a0c-image {
background-image: url(/assets/f9b5479cf5959262.svg);
}
.images-dark ._61a6bac39bf12a0c-wrapper {
background-image: url(/assets/069714e321aa543f.svg);
}
.images-dark ._61a6bac39bf12a0c-image {
background-image: url(/assets/4ced53d842c0ca67.svg);
}
._5541406592b342a0-firstPromotionalAvatar {
z-index: 1;
}
._5541406592b342a0-secondPromotionalAvatar {
-webkit-margin-end: -18px;
margin-inline-end: -18px;
}
._5541406592b342a0-container {
display: flex;
flex-direction: row-reverse;
}
._6fbbd8f815166faf-promotionalGiftMessage {
border-radius: 0 0 16px 16px;
display: flex;
flex-direction: row;
inset-inline-end: 24px;
justify-content: space-between;
min-height: 24px;
padding: 12px 24px;
position: relative;
top: 24px;
width: 100%;
}
._6fbbd8f815166faf-promotionalTextSection {
display: flex;
flex-direction: column;
justify-content: center;
-webkit-margin-end: 12px;
margin-inline-end: 12px;
}
._6fbbd8f815166faf-avatar {
bottom: -15px;
inset-inline-end: 0;
position: absolute;
}
._1995d9ef90fe7f4f-freeTrialText {
text-transform: capitalize;
}
.fd0764d549c356e7-pricePerInterval {
font-weight: 200;
margin-bottom: 18px;
}
.fd0764d549c356e7-price {
font-weight: var(--font-weight-bold);
}
.fd0764d549c356e7-priceSpinner {
display: flex;
height: 22px;
justify-content: flex-start;
margin-bottom: 18px;
}
.fd0764d549c356e7-annualDiscountString {
display: flex;
flex-direction: column;
}
._784e44e2da1db07a-trialHeader {
margin-bottom: 18px;
max-width: 60%;
}
._784e44e2da1db07a-price {
margin: 0 0 8px;
}
._784e44e2da1db07a-price:last-of-type {
margin: 0 0 18px;
}
._33718a16111b9a32-container {
align-items: center;
background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0.1) 50%, hsla(0, 0%, 100%, 0));
display: flex;
height: 36px;
}
._33718a16111b9a32-text {
-webkit-margin-start: 6px;
margin-inline-start: 6px;
}
._33718a16111b9a32-textWithAD {
-webkit-margin-start: 9px;
margin-inline-start: 9px;
}
._6df1abcb56d96feb-premiumCards {
display: flex;
gap: var(--space-32);
width: 100%;
}
._6df1abcb56d96feb-premiumCardHover {
transition: transform 0.4s linear(0, 0.372 7.6%, 0.658 15.6%, 0.866 24.2%, 0.942 28.8%, 1.002 33.7%, 1.036 37.8%, 1.061 42.2%, 1.075 46.9%, 1.08 52%, 1.069 61%, 1.011 85%, 1);
}
._6df1abcb56d96feb-premiumCardHover:hover {
position: relative;
transform: scale(1.0975) translateZ(0);
z-index: 1;
}
._6df1abcb56d96feb-tier2ApplicationHomeSubheader {
margin-bottom: var(--space-16);
}
._6df1abcb56d96feb-applicationHomeCard {
border-radius: var(--radius-lg) !important;
box-sizing: border-box;
height: 470px;
margin: 0 auto;
width: 390px;
}
._6df1abcb56d96feb-applicationHomeCard._6df1abcb56d96feb-narrow {
width: 354px;
}
._6df1abcb56d96feb-card {
background: var(--background-surface-high);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
display: flex;
flex-direction: column;
padding: var(--space-24);
position: relative;
text-align: start;
}
._6df1abcb56d96feb-card._6df1abcb56d96feb-withGiftBanner {
padding-bottom: 90px;
}
._6df1abcb56d96feb-card._6df1abcb56d96feb-borderGradient {
background: var(--background-surface-high);
border: none;
position: relative;
}
._6df1abcb56d96feb-card._6df1abcb56d96feb-borderGradient:after {
background: linear-gradient(to bottom, var(--illo-pink-50) 0, var(--illo-nitro-blue) 100%);
border-radius: calc(var(--radius-sm) + 1px);
content: "";
inset: -1px;
opacity: 0.8;
position: absolute;
z-index: -1;
}
._6df1abcb56d96feb-card._6df1abcb56d96feb-borderGradient._6df1abcb56d96feb-applicationHomeCard:after {
border-radius: var(--radius-lg);
}
._6df1abcb56d96feb-tier0._6df1abcb56d96feb-pillMargin {
margin-top: var(--space-24);
}
._6df1abcb56d96feb-wordmark {
margin-bottom: var(--space-8);
min-height: 25px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
._6df1abcb56d96feb-wumpus {
position: absolute;
z-index: 1;
}
._6df1abcb56d96feb-wumpus._6df1abcb56d96feb-inCard {
inset-inline-end: 24px;
top: 30px;
}
._6df1abcb56d96feb-wumpus._6df1abcb56d96feb-outerCorner {
height: 165px;
inset-inline-end: -33px;
top: -40px;
}
._6df1abcb56d96feb-wumpus._6df1abcb56d96feb-insideCorner {
inset-inline-end: 10px;
top: -20px;
}
._6df1abcb56d96feb-bigCloud {
opacity: 0.62;
position: absolute;
width: 86px;
}
._6df1abcb56d96feb-bigCloud._6df1abcb56d96feb-inCard {
inset-inline-end: 8px;
top: 12px;
}
._6df1abcb56d96feb-bigCloud._6df1abcb56d96feb-insideCorner,
._6df1abcb56d96feb-bigCloud._6df1abcb56d96feb-outerCorner {
inset-inline-end: 140px;
top: 105px;
width: 40px;
}
._6df1abcb56d96feb-smallCloud {
opacity: 0.42;
position: absolute;
width: 47px;
}
._6df1abcb56d96feb-smallCloud._6df1abcb56d96feb-inCard {
inset-inline-end: 172px;
top: 40px;
}
._6df1abcb56d96feb-smallCloud._6df1abcb56d96feb-insideCorner,
._6df1abcb56d96feb-smallCloud._6df1abcb56d96feb-outerCorner {
inset-inline-end: 172px;
top: 65px;
}
._6df1abcb56d96feb-divider {
margin: var(--space-16) 0;
opacity: 0.1;
z-index: 0;
}
._6df1abcb56d96feb-firstFeatureItemContainer {
max-width: 250px;
}
._6df1abcb56d96feb-featureItem {
align-items: center;
color: var(--text-default);
display: flex;
flex-direction: row;
margin-bottom: var(--space-8);
}
._6df1abcb56d96feb-featureItem:last-child {
margin-bottom: 0;
}
._6df1abcb56d96feb-featureItemApplicationHome {
margin-bottom: var(--space-12);
}
._6df1abcb56d96feb-promotionalBackgroundImage {
inset-inline-end: 0;
position: absolute;
top: 0;
transform: scale(50%);
transform-origin: top right;
}
._6df1abcb56d96feb-priceHeader {
margin-top: var(--space-4);
}
._6df1abcb56d96feb-pill {
inset-inline-start: 50%;
position: absolute;
top: 1px;
transform: translate(-50%, -50%);
}
._6df1abcb56d96feb-CTAButton {
display: flex;
margin-top: auto;
padding-top: 0;
width: 100%;
}
._6df1abcb56d96feb-premiumCardsContainer {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
}
._6df1abcb56d96feb-premiumCardsHeader {
font-style: italic;
margin-bottom: var(--space-64);
text-align: center;
text-transform: uppercase;
}
._6df1abcb56d96feb-tier0CardOrder {
order: 0;
}
._6df1abcb56d96feb-tier2CardOrder {
order: 1;
}
._6df1abcb56d96feb-premiumGroupCardOrder {
order: 2;
}
@container premium-marketing-page-container (max-width: 960px) {
._6df1abcb56d96feb-premiumCards {
flex-direction: column;
}
._6df1abcb56d96feb-tier0CardOrder {
order: 1;
}
._6df1abcb56d96feb-tier2CardOrder {
order: 0;
}
}
._6df1abcb56d96feb-cardTitle {
font-size: 32px;
font-style: italic;
line-height: 27px;
text-transform: uppercase;
}
._6df1abcb56d96feb-betaPill,
._6df1abcb56d96feb-cardTitle {
margin-bottom: 8px;
}
._6df1abcb56d96feb-cardHeader {
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
}
._3f0b787cf26e4691-container {
align-items: flex-start;
background: linear-gradient(90deg, rgba(180, 115, 245, 0.1), rgba(226, 146, 170, 0.1));
border: 2px solid var(--redesign-button-premium-primary-purple-for-gradient-2);
border-radius: 16px;
display: flex;
flex-direction: column;
padding: 32px;
}
._3f0b787cf26e4691-header {
margin-bottom: var(--space-4);
}
._3f0b787cf26e4691-wordmark {
font-size: 24px;
font-style: italic;
font-weight: 900;
text-transform: uppercase;
}
._3f0b787cf26e4691-subheader {
margin-bottom: var(--space-16);
}
.e4ef5cb9eb007591-root {
display: flex;
flex-direction: column;
}
.e4ef5cb9eb007591-titleText {
justify-content: center;
margin-bottom: 44px;
text-align: center;
}
.e4ef5cb9eb007591-logo {
width: 100px;
}
.e4ef5cb9eb007591-table {
display: flex;
flex-direction: column;
}
.e4ef5cb9eb007591-headerRow,
.e4ef5cb9eb007591-row {
display: flex;
flex-direction: row;
z-index: 5;
}
.e4ef5cb9eb007591-headerRow {
height: 56px;
margin-top: 24px;
}
.e4ef5cb9eb007591-row {
height: 68px;
}
.e4ef5cb9eb007591-rowBottomBorder {
border-bottom: 1px solid var(--interactive-muted);
}
.e4ef5cb9eb007591-wideRow {
height: 128px;
}
.e4ef5cb9eb007591-shortRow {
height: 20px;
}
.e4ef5cb9eb007591-cell,
.e4ef5cb9eb007591-headerCell {
align-items: center;
display: flex;
flex-direction: column;
width: 208px;
}
.e4ef5cb9eb007591-headerCell {
justify-content: start;
}
.e4ef5cb9eb007591-cell {
justify-content: center;
}
.e4ef5cb9eb007591-headerLabelCell,
.e4ef5cb9eb007591-labelCell {
display: flex;
flex: 1;
justify-content: flex-start;
text-align: start;
}
.e4ef5cb9eb007591-headerLabelCell {
align-items: start;
}
.e4ef5cb9eb007591-buttonsCell,
.e4ef5cb9eb007591-labelCell {
align-items: center;
}
.e4ef5cb9eb007591-buttonsCell {
display: flex;
flex-direction: column;
gap: 16px;
justify-content: flex-start;
padding-top: 16px;
}
.e4ef5cb9eb007591-closeIcon {
color: var(--interactive-muted);
}
.e4ef5cb9eb007591-checkmarkIcon {
color: var(--interactive-text-active);
}
.e4ef5cb9eb007591-button {
height: 40px;
width: 180px;
}
.e4ef5cb9eb007591-tableWrapper {
padding: 2px;
position: relative;
}
.e4ef5cb9eb007591-tier0ColumnOuter,
.e4ef5cb9eb007591-tier0ColumnOuterBackground {
border: 2px solid var(--premium-tier-0-purple-for-gradients);
border-radius: var(--radius-lg);
height: 100%;
inset-inline-end: 208px;
pointer-events: none;
position: absolute;
top: 0;
width: 212px;
z-index: 9;
}
.e4ef5cb9eb007591-tier2ColumnOuter,
.e4ef5cb9eb007591-tier2ColumnOuterBackground {
border: 2px solid var(--premium-tier-2-purple-for-gradients-2);
height: 100%;
}
.e4ef5cb9eb007591-tier2ColumnOuter,
.e4ef5cb9eb007591-tier2ColumnOuterBackground,
.e4ef5cb9eb007591-tier2Pill {
border-radius: 16px;
inset-inline-end: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 212px;
z-index: 9;
}
.e4ef5cb9eb007591-tier0ColumnOuterBackground:before,
.e4ef5cb9eb007591-tier2ColumnOuterBackground:before {
content: "";
opacity: 0.1;
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
z-index: -1;
}
.e4ef5cb9eb007591-tier0ColumnOuterBackground:before {
background: linear-gradient(268deg, var(--premium-tier-0-blue) 17.62%, var(--premium-tier-1-blue-for-gradients) 100%);
}
.e4ef5cb9eb007591-tier2ColumnOuterBackground:before {
background: linear-gradient(101deg, var(--premium-tier-2-purple-for-gradients) 25.21%, var(--premium-tier-2-purple-for-gradients-2) 62.43%, var(--premium-tier-2-pink-for-gradients) 95.57%);
}
.e4ef5cb9eb007591-topBorderRadius {
border-start-end-radius: 16px;
border-start-start-radius: 16px;
}
.e4ef5cb9eb007591-bottomBorderRadius {
border-end-end-radius: 16px;
border-end-start-radius: 16px;
}
.e4ef5cb9eb007591-mostPopularPill {
background: linear-gradient(95.07deg, var(--premium-tier-2-purple-for-gradients) 0, var(--premium-tier-2-purple-for-gradients-2) 49.96%, var(--premium-tier-2-pink-for-gradients) 95.93%);
border-radius: 8px;
margin: auto;
max-height: 24px;
max-width: 112px;
padding: 4px 8px;
position: relative;
top: -12px;
z-index: 10;
}
.e4ef5cb9eb007591-mostPopularText {
color: var(--white);
text-align: center;
text-transform: uppercase;
}
.e4ef5cb9eb007591-trialOfferPill {
margin-top: 4px;
}
.e4ef5cb9eb007591-betaTag {
background: var(--custom-premium-colors-premium-gradient-tier-2);
display: inline;
}
.e4ef5cb9eb007591-bogoPillWithSparkles,
.e4ef5cb9eb007591-freeTrialPillWithSparkles {
justify-content: center;
max-height: 24px;
max-width: 100%;
position: relative;
top: -13px;
z-index: 10;
}
.e4ef5cb9eb007591-brandShineLight {
color: hsl(var(--brand-500-hsl) / 0.1);
}
.e4ef5cb9eb007591-brandShineDark {
color: var(--opacity-white-8);
}
.e4ef5cb9eb007591-premiumGroupCard {
margin-bottom: 50px;
}
.e4ef5cb9eb007591-textLogo {
font-size: 20px;
font-style: italic;
text-transform: uppercase;
}
.c1b44fee7182c296-circleContainer {
overflow: visible;
position: relative;
}
.c1b44fee7182c296-childrenContainer,
.c1b44fee7182c296-circleContainer {
align-items: center;
display: flex;
justify-content: center;
}
.c1b44fee7182c296-childrenContainer {
height: 100%;
inset-inline-start: 0;
position: absolute;
top: 0;
width: 100%;
}
.theme-light .c1b44fee7182c296-baseProgressCircle {
stroke: var(--white);
}
.c1b44fee7182c296-circleSVG {
height: 100%;
overflow: visible;
width: 100%;
}
._7d30aa26739da8cf-nitroGemAnimation {
animation: _7d30aa26739da8cf-gemGlow 5s ease-in-out infinite;
}
._7d30aa26739da8cf-nitroGemContainer {
overflow: visible;
}
._7d30aa26739da8cf-gemBackgroundFill {
fill: var(--background-base-low);
}
.theme-light ._7d30aa26739da8cf-gemBackgroundFill {
fill: var(--white);
}
._7d30aa26739da8cf-progressCircle {
margin-inline: auto;
width: 80%;
}
._7d30aa26739da8cf-progressCricleBottomMargin {
margin-bottom: 15px;
}
@keyframes _7d30aa26739da8cf-gemGlow {
0%,
50%,
to {
filter: drop-shadow(0 0 0 hsl(var(--premium-tier-2-pink-for-gradients-2-hsl) / 0.6));
}
25%,
75% {
filter: drop-shadow(0 0 20px hsl(var(--premium-tier-2-pink-for-gradients-2-hsl) / 0.6));
}
}
._7d30aa26739da8cf-activeProgressCircle {
fill: transparent;
transform: rotate(-90deg);
transform-origin: center;
}
._7d30aa26739da8cf-activeProgressCircleAnimation {
animation:
_7d30aa26739da8cf-glow 5s ease-in-out infinite,
_7d30aa26739da8cf-pulse 5s ease-in-out infinite;
transition: stroke-dashoffset 0.5s ease-out;
}
@keyframes _7d30aa26739da8cf-glow {
0%,
50%,
to {
filter: none;
}
25%,
75% {
filter: drop-shadow(0 0 5px var(--premium-tier-2-pink-for-gradients-2));
}
}
@keyframes _7d30aa26739da8cf-pulse {
0%,
50%,
to {
stroke-width: 2;
}
25%,
75% {
stroke-width: 3;
}
}
._7d30aa26739da8cf-avatarDecoContainer {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
padding: 12%;
width: 100%;
}
._7d30aa26739da8cf-avatarDecoContainer img:before {
background-color: transparent;
}
._7d30aa26739da8cf-avatarDeco {
align-items: center;
background: var(--background-base-low);
border-radius: 50%;
display: flex;
justify-content: center;
padding: 15%;
}
._7d30aa26739da8cf-avatarDecoImage {
height: 100%;
width: 100%;
}
.a61c561e7be40d05-expandedProgressBarContainer,
.a61c561e7be40d05-expandedProgressBarContainerSettingsPage {
align-items: center;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-sizing: border-box;
display: flex;
margin-top: 40px;
min-width: 560px;
}
@media (max-width: 485px) {
.a61c561e7be40d05-expandedProgressBarContainer,
.a61c561e7be40d05-expandedProgressBarContainerSettingsPage {
min-width: unset;
}
}
.a61c561e7be40d05-expandedProgressBarContainer {
border-radius: var(--radius-lg);
max-width: 989px;
min-height: 260px;
}
.a61c561e7be40d05-expandedProgressBarContainerSettingsPage {
background: var(--background-secondary-alt);
border-radius: var(--radius-lg);
margin-bottom: -40px;
min-height: 292px;
}
.a61c561e7be40d05-allReferralsSentBorder {
border: 1px solid var(--premium-tier-2-pink-for-gradients-2);
}
.a61c561e7be40d05-containerWithGlowWithoutBanner,
.a61c561e7be40d05-containerWithoutGlow {
border-radius: var(--radius-lg);
max-width: 989px;
min-height: 260px;
}
.a61c561e7be40d05-containerWithMargins {
margin-inline: 16px;
}
.a61c561e7be40d05-containerWithGlowWithoutBanner {
box-shadow: 0 0 25px 6px rgba(231, 66, 225, 0.3);
}
.a61c561e7be40d05-containerWithGlowOnSettingsPage {
border-radius: 20px;
}
.a61c561e7be40d05-expandedProgressBarContent {
text-align: start;
-webkit-margin-start: 24px;
margin-inline-start: 24px;
}
.a61c561e7be40d05-userAvatarProgressBarContainer {
align-items: center;
display: flex;
flex-direction: row;
margin-bottom: 8px;
margin-top: 8px;
}
.a61c561e7be40d05-userAvatarProgressBarUnit {
align-items: center;
border-radius: 32px;
display: flex;
height: 32px;
justify-content: center;
width: 32px;
}
.a61c561e7be40d05-avatarProgressBarUnitConnectorContainer {
height: 4px;
position: relative;
width: 24px;
}
.a61c561e7be40d05-avatarProgressBarUnitConnectorBase {
background: linear-gradient(90deg, rgba(180, 115, 245, 0.3), rgba(226, 146, 170, 0.3));
height: 100%;
width: 100%;
}
.a61c561e7be40d05-fullHighlight,
.a61c561e7be40d05-halfHighlight {
background: var(--gradients-nitro-nitro-horizontal, linear-gradient(90deg, var(--premium-tier-2-purple) 0, var(--premium-tier-2-pink) 100%));
position: absolute;
top: 0;
}
.a61c561e7be40d05-fullHighlight {
height: 100%;
width: 100%;
}
.a61c561e7be40d05-halfHighlight {
border-end-end-radius: 3px;
border-start-end-radius: 3px;
height: 4px;
width: 12px;
}
.a61c561e7be40d05-expandedProgressBarButtonContainer {
display: flex;
gap: 8px;
margin-top: 16px;
}
.a61c561e7be40d05-expandedProgressBarButtonContainerLayout {
flex-direction: row;
}
.a61c561e7be40d05-expandedProgressBarGiftingCTA {
flex: 1;
}
.a61c561e7be40d05-expandedProgressBarGiftingCTALayout {
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
@media (max-width: 568px) {
.a61c561e7be40d05-expandedProgressBarButtonContainerLayout {
flex-direction: column;
margin-bottom: 32px;
}
.a61c561e7be40d05-expandedProgressBarGiftingCTALayout {
margin-bottom: 8px;
}
}
.a61c561e7be40d05-expandedProgressBarSelectFriendsCTA {
background: linear-gradient(101deg, var(--premium-tier-2-purple-for-gradients) 25.21%, var(--premium-tier-2-purple-for-gradients-2) 62.43%, var(--premium-tier-2-pink-for-gradients) 95.57%);
background-clip: padding-box;
color: var(--white);
flex: 1;
}
.a61c561e7be40d05-banner {
align-items: center;
background: linear-gradient(90deg, hsl(var(--premium-tier-2-purple-for-gradients-hsl) / 0.95) 0, hsl(var(--premium-tier-2-pink-for-gradients-hsl) / 0.95) 100%);
color: var(--white);
display: flex;
height: 40px;
position: absolute;
text-align: start;
top: -40px;
width: calc(100% - 32px);
-webkit-padding-start: 32px;
border-radius: 8px 8px 0 0;
padding-inline-start: 32px;
}
.a61c561e7be40d05-containerWithBanner {
border-radius: 0 0 8px 8px;
}
.a61c561e7be40d05-referralInfoContent {
display: flex;
flex-direction: row;
padding-block: 24px 16px;
padding-inline: 24px 48px;
}
.a61c561e7be40d05-progressBar {
background: rgba(180, 115, 245, 0.3);
border-radius: 10px;
flex-shrink: 0;
height: 8px;
margin-bottom: 8px;
margin-top: 10px;
max-width: 300px;
width: 60%;
}
.a61c561e7be40d05-referralCountdownDays {
color: var(--premium-tier-2-purple);
margin-bottom: 10px;
}
.a61c561e7be40d05-fill {
background: linear-gradient(to right, var(--premium-tier-2-purple), var(--premium-tier-2-pink));
border-radius: 10px;
height: 100%;
transition: width 0.3s ease-in-out;
}
.a61c561e7be40d05-expandedProgressBarSelectFriendsCTAInner {
align-items: center;
display: flex;
flex-direction: row;
}
.a61c561e7be40d05-expandedProgressBarSelectFriendsIcon {
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
.a61c561e7be40d05-giftIcon {
color: #fff;
height: 16px;
width: 16px;
}
.a61c561e7be40d05-expandedProgressBarHeader {
color: var(--text-strong);
}
.a61c561e7be40d05-unsentTooltipContent {
text-align: center;
}
.a61c561e7be40d05-referralProgressBarIcon {
max-width: 150px;
}
.a61c561e7be40d05-referralProgressBarIconSettings {
max-width: 120px;
}
.theme-light .a61c561e7be40d05-expandedProgressBarContainer {
background: rgba(235, 237, 239, 0.7);
}
.theme-light .a61c561e7be40d05-userAvatarProgressBarUnitNum {
background: #860091;
}
.theme-light .a61c561e7be40d05-userAvatarProgressBarUnit {
background: linear-gradient(90deg, rgba(180, 115, 245, 0.6), rgba(226, 146, 170, 0.6));
}
.theme-light .a61c561e7be40d05-expandedProgressBarGiftingCTA {
border-color: var(--premium-tier-2-pink-for-gradients-2);
color: var(--premium-tier-2-pink-for-gradients-2);
}
.theme-dark .a61c561e7be40d05-expandedProgressBarContainer {
background: rgba(35, 36, 40, 0.5);
}
.theme-dark .a61c561e7be40d05-userAvatarProgressBarUnitNum {
background: var(--gradients-nitro-nitro-horizontal, linear-gradient(90deg, var(--premium-tier-2-purple) 0, var(--premium-tier-2-pink) 100%));
}
.theme-dark .a61c561e7be40d05-userAvatarProgressBarUnit {
background: linear-gradient(90deg, rgba(180, 115, 245, 0.3), rgba(226, 146, 170, 0.3));
}
.theme-dark .a61c561e7be40d05-expandedProgressBarGiftingCTA {
border-color: var(--white);
color: var(--white);
}
:root .a61c561e7be40d05-userAvatarProgressBarUnitNum {
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.a45ed3bc8a11b547-divider {
background-color: var(--border-subtle);
height: 1px;
margin-bottom: 24px;
margin-top: 24px;
width: 100%;
}
.a45ed3bc8a11b547-tierCard {
background-image: linear-gradient(95.07deg, var(--premium-tier-2-purple-for-gradients) 0, var(--premium-tier-2-purple-for-gradients-2) 49.96%, var(--premium-tier-2-pink-for-gradients) 95.93%);
border-radius: var(--radius-lg);
color: var(--white);
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 25px;
position: relative;
width: 100%;
}
.a45ed3bc8a11b547-tierCard.a45ed3bc8a11b547-withTier2Rim {
border: 1px solid var(--premium-tier-2-purple-for-gradients);
}
.a45ed3bc8a11b547-tierInfo {
flex: 1;
margin-top: 40px;
margin-inline: 40px 16px;
margin-bottom: 40px;
}
.a45ed3bc8a11b547-tierImage {
align-items: center;
display: flex;
flex: 1;
width: 100%;
}
.a45ed3bc8a11b547-image {
width: 100%;
}
.a45ed3bc8a11b547-tierTitle {
height: 40px;
margin-bottom: 4px;
width: 160px;
}
.a45ed3bc8a11b547-tierCardButton {
height: 40px;
margin-top: 16px;
width: 100%;
}
.a45ed3bc8a11b547-tierCardButtonCTA {
color: var(--brand-500);
}
.a45ed3bc8a11b547-managePlanButton {
margin-top: 16px;
width: 100%;
}
.a45ed3bc8a11b547-giftCard {
background: var(--background-secondary-alt);
margin: 25px 0;
padding: 40px;
}
.a45ed3bc8a11b547-giftCard,
.a45ed3bc8a11b547-giftCardPromotion {
align-items: center;
border-radius: var(--radius-lg);
color: var(--white);
display: flex;
flex-direction: row;
justify-content: space-around;
overflow: hidden;
position: relative;
width: 100%;
}
.a45ed3bc8a11b547-giftCardPromotion {
height: 200px;
margin-bottom: 25px;
padding: 0 30px;
}
.a45ed3bc8a11b547-giftImagePromotion {
inset-inline-start: 32px;
position: absolute;
top: 21px;
width: 220px;
}
.full-motion .a45ed3bc8a11b547-giftImagePromotion {
inset-inline-start: 24px;
top: 10px;
width: 235px;
}
.a45ed3bc8a11b547-giftImageAnimatedPromotion {
padding-bottom: 20px;
}
.a45ed3bc8a11b547-giftInfoPromotion {
max-width: 59%;
-webkit-margin-start: auto;
margin-inline-start: auto;
}
.a45ed3bc8a11b547-giftInfoTitlePromotion {
margin-bottom: 8px;
}
.a45ed3bc8a11b547-giftInfo {
max-width: 50%;
}
.a45ed3bc8a11b547-giftImage {
height: 146px;
}
.a45ed3bc8a11b547-seasonalGiftImage {
bottom: 0;
height: 100%;
inset-inline-end: 47.5%;
position: absolute;
}
.a45ed3bc8a11b547-giftTitle {
margin-bottom: 16px;
}
.a45ed3bc8a11b547-giftText {
margin-bottom: var(--space-12);
}
.a45ed3bc8a11b547-giftAdditionalTerm {
font-style: italic;
}
.a45ed3bc8a11b547-giftCardButton {
height: 40px;
margin-top: 16px;
width: 100%;
}
.a45ed3bc8a11b547-giftButtonCTA {
font-size: 14px;
font-weight: 700;
}
.theme-light .a45ed3bc8a11b547-giftCardButtonColor {
border-color: var(--premium-tier-2-pink-for-gradients-2);
color: var(--premium-tier-2-pink-for-gradients-2);
}
.theme-dark .a45ed3bc8a11b547-giftCardButtonColor {
border-color: #fff;
color: #fff;
}
.a45ed3bc8a11b547-halloweenColor,
.a45ed3bc8a11b547-seasonalColor {
border-color: #fff;
color: #fff;
}
.a45ed3bc8a11b547-bottomOfPageVisibilitySensor {
bottom: 0;
height: 300px;
position: absolute;
}
.a45ed3bc8a11b547-tier2PlanComparisonTableBackground {
background: linear-gradient(90deg, rgba(180, 115, 245, 0.1), rgba(226, 146, 170, 0.1));
}
.a45ed3bc8a11b547-topRimPillWithSparkles {
inset-inline-end: 8px;
position: absolute;
top: -14px;
z-index: 2;
}
.a45ed3bc8a11b547-rimGlowTier2 {
background: linear-gradient(-90deg, var(--premium-tier-2-purple-for-gradients) 0, #fff 4.98%, #fff 50.52%, var(--premium-tier-2-pink-for-gradients) 100%);
height: 1px;
inset-inline-end: 5%;
position: absolute;
top: -1px;
width: 88%;
z-index: 1;
}
.a45ed3bc8a11b547-trialHeader {
margin-bottom: 16px;
}
.a45ed3bc8a11b547-fractionalPremiumTopRimPill {
inset-inline-end: 70px;
position: absolute;
top: -10px;
z-index: 2;
}
.a45ed3bc8a11b547-fractionalPremiumSubheader {
margin-bottom: 16px;
}
.a45ed3bc8a11b547-fractionalPremiumSubheader p {
margin: 0;
}
.a45ed3bc8a11b547-fractionalPremiumSubheader a {
color: #fff;
text-decoration: underline;
}
.a45ed3bc8a11b547-premiumGroupHeader {
font-size: 32px;
font-style: italic;
line-height: 23.643px;
text-transform: uppercase;
}
.a1443c28bb4b5d23-normalStylesDefault {
--custom-poll-style-vote-background: var(--background-base-lowest);
--custom-poll-style-vote-percentage: var(--interactive-background-active);
--custom-poll-style-label: var(--text-default);
--custom-poll-style-border: transparent;
}
.a1443c28bb4b5d23-normalStylesImageOnlyAnswers {
--custom-poll-style-image-background: var(--polls-normal-image-background);
}
.a1443c28bb4b5d23-victorStyles {
--custom-poll-style-vote-percentage: var(--polls-victor-fill);
--custom-poll-style-image-background: var(--background-feedback-warning);
--custom-poll-style-border: var(--status-positive);
}
.a1443c28bb4b5d23-votedStyles {
--custom-poll-style-vote-percentage: var(--polls-voted-fill);
--custom-poll-style-image-background: var(--background-feedback-positive);
--custom-poll-style-border: var(--control-brand-foreground);
}
._72090deda6ab7f6d-tile {
background-color: var(--background-surface-high);
border-radius: 5px;
box-shadow: 0 0 0 hsl(var(--primary-700-hsl) / 0.15);
display: flex;
flex-direction: column;
min-height: 370px;
overflow: hidden;
transform: translateZ(0);
transition:
background-color 0.2s ease,
box-shadow 0.2s ease;
}
._72090deda6ab7f6d-tile:hover {
background-color: var(--background-surface-higher);
}
._72090deda6ab7f6d-tileHorizontal {
align-items: stretch;
flex-direction: row-reverse;
min-height: 0;
width: 660px;
}
._72090deda6ab7f6d-title {
flex: 0 1 auto;
font-size: 18px;
font-weight: var(--font-weight-semibold);
line-height: 1.2;
}
._72090deda6ab7f6d-tagline {
color: var(--text-default);
flex: 1 1 auto;
font-size: 15px;
line-height: 1.3;
margin-top: 8px;
overflow: hidden;
}
._72090deda6ab7f6d-actions {
flex: 0 1 auto;
justify-self: flex-end;
margin-top: 12px;
}
._72090deda6ab7f6d-media {
position: relative;
}
._72090deda6ab7f6d-mediaHorizontal {
align-items: center;
display: flex;
flex: 0 0 305px;
}
._72090deda6ab7f6d-description {
color: var(--text-strong);
display: flex;
flex: 1 1 auto;
flex-direction: column;
padding: 12px;
position: relative;
}
.a8b53fb0d9967324-embedHorizontal {
height: 173px;
}
.a8b53fb0d9967324-embedVertical {
height: 300px;
min-height: auto;
width: 240px;
}
@keyframes a8b53fb0d9967324-loading {
0% {
transform: translate3d(calc(var(--custom-responsive-embed-tile-loading-background-width) * -1), 0, 0);
}
50% {
transform: translateZ(0);
}
to {
transform: translate3d(calc(var(--custom-responsive-embed-tile-loading-background-width) * -1), 0, 0);
}
}
.a8b53fb0d9967324-loadingDescription {
align-items: center;
display: flex;
flex: 1;
}
.a8b53fb0d9967324-loadingBackgroundWrapper {
height: 165px;
margin-top: 16px;
-webkit-mask: url("data:image/svg+xml;utf8,");
mask: url("data:image/svg+xml;utf8,");
-webkit-mask-size: 100%;
mask-size: 100%;
position: relative;
}
.a8b53fb0d9967324-loadingBackgroundWrapper,
.a8b53fb0d9967324-loadingBackgroundWrapperHorizontal {
width: var(--custom-responsive-embed-tile-loading-background-width);
}
.a8b53fb0d9967324-loadingBackgroundWrapperHorizontal {
height: 141px;
margin-top: 8px;
-webkit-mask: url("data:image/svg+xml;utf8,");
mask: url("data:image/svg+xml;utf8,");
}
.a8b53fb0d9967324-loadingImage {
background-color: var(--background-base-lowest);
padding-top: 56%;
width: 100%;
}
.a8b53fb0d9967324-loadingImageHorizontal {
height: 100%;
padding: 0;
}
.a8b53fb0d9967324-loadingBackground {
animation: a8b53fb0d9967324-loading 4s ease-in-out infinite;
bottom: 0;
inset-inline-start: 0;
position: absolute;
top: 0;
width: calc(var(--custom-responsive-embed-tile-loading-background-width) * 2);
}
.images-light .a8b53fb0d9967324-loadingBackground {
background-image: linear-gradient(to right, var(--primary-100), var(--primary-200), var(--primary-100));
}
.images-dark .a8b53fb0d9967324-loadingBackground {
background-image: linear-gradient(to right, var(--primary-600), var(--primary-500), var(--primary-600));
}
.a8b53fb0d9967324-embedHorizontal,
.a8b53fb0d9967324-embedVertical {
background-color: var(--background-surface-high);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
padding: var(--space-4);
}
._47998c66d1bd5bb4-closeButton {
inset-inline-end: 14px;
position: absolute;
top: 14px;
}
._47998c66d1bd5bb4-art {
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
}
._47998c66d1bd5bb4-description {
line-height: 1.44;
margin-bottom: 20px;
}
._47998c66d1bd5bb4-conflictButton {
background-color: var(--background-base-lower);
border: 1px solid;
height: 100px;
justify-content: flex-start;
padding: 20px;
width: 100%;
}
._47998c66d1bd5bb4-linkButtonSize {
height: 38px;
width: auto;
}
._47998c66d1bd5bb4-linkButton {
padding: 0;
}
._47998c66d1bd5bb4-linkButton:hover {
text-decoration: underline;
}
._47998c66d1bd5bb4-retryButton {
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
._47998c66d1bd5bb4-conflictButtonInner {
align-items: center;
display: flex;
width: 100%;
}
._47998c66d1bd5bb4-title {
color: var(--primary-300);
font-size: 12px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.5px;
text-transform: uppercase;
}
._47998c66d1bd5bb4-buttonBody {
color: var(--text-default);
font-size: 16px;
line-height: 1.25;
text-align: start;
}
._47998c66d1bd5bb4-timestamp {
font-weight: var(--font-weight-bold);
}
._47998c66d1bd5bb4-choiceWrapper {
margin-bottom: 20px;
margin-top: 20px;
}
._47998c66d1bd5bb4-choiceLine {
height: 1px;
width: 100%;
}
._47998c66d1bd5bb4-choiceTitle {
margin: 0 8px;
}
._47998c66d1bd5bb4-conflictTitle {
margin-bottom: 4px;
}
._47998c66d1bd5bb4-conflictArt {
height: 60px;
width: 60px;
-webkit-margin-end: 20px;
margin-inline-end: 20px;
}
._47998c66d1bd5bb4-conflictDownloadArt,
._47998c66d1bd5bb4-conflictUploadArt {
}
._47998c66d1bd5bb4-errorArt {
height: 123px;
margin-bottom: 40px;
margin-top: 20px;
width: 220px;
}
.theme-dark ._47998c66d1bd5bb4-conflictButton {
border-color: var(--primary-700);
}
.theme-dark ._47998c66d1bd5bb4-conflictButton:hover {
background-color: var(--primary-500);
}
.theme-dark ._47998c66d1bd5bb4-choiceLine {
background-color: hsl(var(--primary-500-hsl) / 0.6);
}
.theme-light ._47998c66d1bd5bb4-conflictButton {
border-color: hsl(var(--primary-200-hsl) / 0.6);
}
.theme-light ._47998c66d1bd5bb4-conflictButton:hover {
background-color: hsl(var(--primary-200-hsl) / 0.3);
border-color: hsl(var(--primary-300-hsl) / 0.6);
}
.theme-light ._47998c66d1bd5bb4-choiceLine {
background-color: hsl(var(--primary-200-hsl) / 0.6);
}
._47998c66d1bd5bb4-modal {
color: var(--text-default);
}
.images-light ._47998c66d1bd5bb4-conflictUploadArt {
background-image: url(/assets/c48922675fa3fdb4.svg);
}
.images-light ._47998c66d1bd5bb4-conflictDownloadArt {
background-image: url(/assets/7eb5ad9165537ef6.svg);
}
.images-light ._47998c66d1bd5bb4-errorArt {
background-image: url(/assets/eaf420114113c0bc.svg);
}
.images-dark ._47998c66d1bd5bb4-conflictUploadArt {
background-image: url(/assets/c9d06b948b249c3a.svg);
}
.images-dark ._47998c66d1bd5bb4-conflictDownloadArt {
background-image: url(/assets/cc1962559d37a6d1.svg);
}
.images-dark ._47998c66d1bd5bb4-errorArt {
background-image: url(/assets/49e200b52c0a66ab.svg);
}
._0cb5674cd6f6750c-playButton {
padding-inline: 0;
}
._0cb5674cd6f6750c-playButtonContents {
align-items: center;
display: flex;
flex-grow: 1;
}
._0cb5674cd6f6750c-disabledButtonWrapper {
position: relative;
}
._0cb5674cd6f6750c-disabledButtonOverlay {
inset: 0;
position: absolute;
}
._0cb5674cd6f6750c-disabledButtonColor {
background-color: hsl(var(--primary-800-hsl) / 0.5);
color: hsl(var(--primary-100-hsl) / 0.5);
opacity: 1;
}
._0cb5674cd6f6750c-buttonText {
flex-grow: 1;
padding: 2px 16px;
}
._0cb5674cd6f6750c-dropdownArrowHitbox {
align-items: center;
display: flex;
height: 100%;
width: 32px;
z-index: 2;
}
._0cb5674cd6f6750c-arrowSeparator {
background-color: currentColor;
height: 24px;
opacity: 0.2;
width: 1px;
}
._0cb5674cd6f6750c-dropdownArrow {
flex: 1;
height: 24px;
opacity: 0.2;
transition: opacity 0.2s ease;
width: 24px;
}
._0cb5674cd6f6750c-dropdownArrowHitbox:hover ._0cb5674cd6f6750c-dropdownArrow {
opacity: 1;
}
._614623a0ca8129b8-button {
padding: 0;
}
html ._614623a0ca8129b8-progress {
bottom: 0;
inset-inline-start: 0;
position: absolute;
}
._614623a0ca8129b8-disabledButtonWrapper {
position: relative;
}
._614623a0ca8129b8-disabledButtonOverlay {
inset: 0;
position: absolute;
}
._614623a0ca8129b8-disabledButtonColor {
background-color: hsl(var(--primary-800-hsl) / 0.5);
color: var(--text-strong);
opacity: 1;
}
.c7dbcbc778d32dec-row {
align-items: center;
display: flex;
}
.c7dbcbc778d32dec-icon {
-webkit-margin-end: 4px;
height: 20px;
margin-inline-end: 4px;
width: 20px;
}
.c7dbcbc778d32dec-salePercentage {
background-color: var(--green-360);
border-radius: 3px;
color: var(--white);
padding: 4px 6px;
}
.c7dbcbc778d32dec-originalAmount {
color: var(--primary-300);
text-decoration: line-through;
}
.c7dbcbc778d32dec-directoryTilePrice {
font-size: 16px;
font-weight: var(--font-weight-medium);
}
.c7dbcbc778d32dec-directoryTilePrice .c7dbcbc778d32dec-originalAmount,
.c7dbcbc778d32dec-directoryTilePrice .c7dbcbc778d32dec-salePercentage {
-webkit-margin-end: 6px;
margin-inline-end: 6px;
}
.c7dbcbc778d32dec-directoryHeroPrice {
font-size: 16px;
}
.c7dbcbc778d32dec-directoryHeroPrice .c7dbcbc778d32dec-originalAmount,
.c7dbcbc778d32dec-directoryHeroPrice .c7dbcbc778d32dec-salePercentage {
-webkit-margin-end: 6px;
margin-inline-end: 6px;
}
.c7dbcbc778d32dec-directoryHeroPricePremium {
flex-wrap: wrap;
font-size: 14px;
font-weight: var(--font-weight-medium);
}
.c7dbcbc778d32dec-directoryHeroPricePremium .c7dbcbc778d32dec-icon {
flex-shrink: 0;
height: 24px;
width: 24px;
}
.c7dbcbc778d32dec-directorySearchPrice {
color: var(--text-muted);
font-size: 14px;
font-weight: var(--font-weight-medium);
line-height: 16px;
}
.c7dbcbc778d32dec-directorySearchPrice .c7dbcbc778d32dec-icon {
height: 16px;
width: 16px;
}
.c7dbcbc778d32dec-directorySearchPrice .c7dbcbc778d32dec-originalAmount,
.c7dbcbc778d32dec-directorySearchPrice .c7dbcbc778d32dec-salePercentage {
-webkit-margin-end: 6px;
margin-inline-end: 6px;
}
.c7dbcbc778d32dec-listingPrice {
color: var(--primary-100);
font-size: 32px;
font-weight: var(--font-weight-medium);
line-height: 36px;
}
.c7dbcbc778d32dec-listingPrice .c7dbcbc778d32dec-salePercentage {
color: var(--white);
font-size: 16px;
-webkit-margin-start: 10px;
margin-inline-start: 10px;
}
.c7dbcbc778d32dec-listingPrice .c7dbcbc778d32dec-originalAmount {
font-size: 15px;
}
.c7dbcbc778d32dec-embedPrice {
color: var(--text-default);
font-size: 16px;
font-weight: var(--font-weight-medium);
}
.c7dbcbc778d32dec-embedPrice .c7dbcbc778d32dec-originalAmount,
.c7dbcbc778d32dec-embedPrice .c7dbcbc778d32dec-salePercentage {
-webkit-margin-end: 6px;
margin-inline-end: 6px;
}
.c7dbcbc778d32dec-embedPrice .c7dbcbc778d32dec-salePercentage {
background-color: var(--background-surface-high);
}
.theme-light .c7dbcbc778d32dec-directoryHeroPrice .c7dbcbc778d32dec-originalAmount,
.theme-light .c7dbcbc778d32dec-directoryHeroPricePremium .c7dbcbc778d32dec-originalAmount {
color: var(--primary-400);
}
.c7dbcbc778d32dec-directoryHeroPrice,
.c7dbcbc778d32dec-directoryHeroPricePremium {
color: var(--text-default);
}
.f288273cdd64bcde-OSSection {
display: flex;
justify-content: flex-end;
}
.f288273cdd64bcde-purchaseUnitOperatingSystem {
-webkit-margin-start: 4px;
color: var(--primary-500);
margin-inline-start: 4px;
}
.d0ccaf18ea1479c4-tag {
padding: 6px 12px;
}
.d0ccaf18ea1479c4-tag:before {
background-image: url(/assets/609367095f652a43.png);
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
content: "";
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
}
.d0ccaf18ea1479c4-text {
color: var(--white);
display: block;
font-size: 13px;
font-weight: var(--font-weight-semibold);
position: relative;
text-transform: uppercase;
}
._6c02de110e49786e-tag {
padding: 6px 12px;
}
._6c02de110e49786e-tag:before {
background-position: top;
background-repeat: no-repeat;
background-size: cover;
content: "";
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
}
._6c02de110e49786e-text {
color: var(--white);
display: block;
font-size: 13px;
font-weight: var(--font-weight-semibold);
position: relative;
text-transform: uppercase;
}
._6c02de110e49786e-tag {
background-image: linear-gradient(to right, var(--premium-tier-1-blue), var(--premium-tier-1-purple));
}
._6c02de110e49786e-tag:before {
background-image: url(/assets/df3df6cdf0dd1991.svg);
}
._0d97c7477c305e57-centeringContainer {
align-items: center;
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
display: flex;
justify-content: center;
min-height: 126px;
}
._0d97c7477c305e57-titleContainer {
background-image: url(/assets/df31f184a2abb737.png);
box-sizing: border-box;
color: var(--white);
font-size: 20px;
padding: 8px 10px;
text-align: center;
}
._0d97c7477c305e57-loadingContainer,
._0d97c7477c305e57-titleContainer {
}
._0d97c7477c305e57-slideshowWrapper {
height: 100%;
}
._0d97c7477c305e57-spinner {
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
}
._0d97c7477c305e57-imageLoading {
visibility: hidden;
}
._0d97c7477c305e57-splash {
object-position: top;
}
._0d97c7477c305e57-splash,
._0d97c7477c305e57-splashPlaceholder {
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
object-fit: cover;
vertical-align: middle;
width: 100%;
}
._0d97c7477c305e57-splashPlaceholder {
height: 100%;
}
._0d97c7477c305e57-muteContainer {
align-items: center;
background: var(--opacity-black-28);
border-radius: 50%;
bottom: 0;
display: flex;
height: 24px;
inset-inline-end: 0;
justify-content: center;
margin-block: 0 10px;
margin-inline: 0 10px;
opacity: 0;
padding: 4px;
pointer-events: all;
position: absolute;
transition: opacity 0.4s ease;
width: 24px;
z-index: 2;
}
._0d97c7477c305e57-muteContainerPlaying {
opacity: 1;
}
._0d97c7477c305e57-muteContainerMediaOverlay {
inset-inline-end: 0;
margin-block: 0;
margin-inline: 0 10px;
position: absolute;
top: 86px;
}
._0d97c7477c305e57-mute {
color: var(--white);
height: 20px;
width: 20px;
}
.theme-dark ._0d97c7477c305e57-loadingContainer {
background-color: var(--opacity-black-40);
}
.theme-light ._0d97c7477c305e57-loadingContainer {
background-color: var(--opacity-white-40);
}
.theme-light ._0d97c7477c305e57-spinnerItem {
background-color: var(--primary-800);
}
._0bef9109de189622-splashContainer {
margin: 0;
max-height: 60%;
overflow: hidden;
padding-top: 56%;
pointer-events: none;
position: relative;
}
._0bef9109de189622-splashContainerHorizontal {
flex: 1;
height: 100%;
max-height: none;
padding-top: 0;
}
._0bef9109de189622-priceOs {
align-items: center;
display: flex;
justify-content: space-between;
}
._0bef9109de189622-platform {
opacity: 1;
transition: opacity 0.4s ease;
}
._0bef9109de189622-exclusiveRegular {
inset-inline: 0;
bottom: 0;
position: absolute;
}
._0bef9109de189622-exclusivePlaying {
opacity: 0;
transition: opacity 0.4s ease;
}
._0bef9109de189622-splashPlaceholder,
._0bef9109de189622-splashVideo {
height: 100%;
}
._0bef9109de189622-tileBuyButton {
bottom: 12px;
inset-inline-start: 12px;
position: absolute;
transform: translate3d(0, 12px, 0);
}
.full-motion ._0bef9109de189622-tileBuyButton {
transition:
opacity 0.2s,
transform 0.2s ease;
}
._0bef9109de189622-tileBuyButtonVisible {
transform: translateZ(0);
}
._0bef9109de189622-tileBuyButton,
._0bef9109de189622-tileBuyButton:disabled {
opacity: 0;
}
._0bef9109de189622-tileBuyButtonVisible,
._0bef9109de189622-tileBuyButtonVisible:disabled {
opacity: 1;
}
._0bef9109de189622-tilePrice {
transition: opacity 0.2s;
}
._0bef9109de189622-tilePriceWithVisibleBuyButton {
opacity: 0;
}
._0bef9109de189622-socialLayerStorefrontCardContainer {
border-radius: var(--radius-xs);
height: 100%;
}
._0bef9109de189622-socialLayerStorefrontCardBackgroundImage {
background-size: cover;
height: 100%;
}
._0bef9109de189622-socialLayerStorefrontCardImage {
height: 100%;
object-position: center bottom;
}
.bd7f32692e9825f4-tileActions {
align-items: center;
display: flex;
font-weight: var(--font-weight-medium);
}
.bd7f32692e9825f4-actionButton {
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
._857bf4d78ba068ea-metadata {
font-size: 12px;
}
._857bf4d78ba068ea-libraryLink {
-webkit-margin-start: 10px;
align-items: center;
display: flex;
margin-inline-start: 10px;
}
._857bf4d78ba068ea-libraryIcon {
-webkit-margin-end: 6px;
margin-inline-end: 6px;
}
._857bf4d78ba068ea-invalidPoop {
background-position: 50% 50%;
background-repeat: no-repeat;
margin: 0;
max-height: 60%;
overflow: hidden;
padding-top: 56%;
position: relative;
}
._857bf4d78ba068ea-invalidPoopHorizontal {
flex: 1;
height: 100%;
max-height: none;
padding-top: 0;
}
.theme-light ._857bf4d78ba068ea-libraryLink,
.theme-light ._857bf4d78ba068ea-metadata {
color: var(--primary-400);
}
.theme-light ._857bf4d78ba068ea-invalidPoop {
background-color: hsl(var(--primary-400-hsl) / 0.3);
}
.theme-dark ._857bf4d78ba068ea-libraryLink {
color: var(--opacity-white-60);
}
.theme-dark ._857bf4d78ba068ea-invalidPoop {
background-color: hsl(var(--primary-500-hsl) / 0.3);
}
.theme-dark ._857bf4d78ba068ea-metadata {
color: var(--primary-400);
}
._857bf4d78ba068ea-legacySeasonalGiftEmbedWrapper {
background: linear-gradient(102.85deg, #26569e 2.16%, #3584d5 46.11%, #5dbace 99.42%);
background-position: 50% 50%;
}
._857bf4d78ba068ea-customGiftEmbedWrapper {
height: 128px;
margin: 0;
overflow: hidden;
position: relative;
}
._857bf4d78ba068ea-giftEmbedWrapperHorizontal {
flex: 1;
height: 100%;
}
._857bf4d78ba068ea-snow {
height: 100%;
inset-inline-start: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}
._857bf4d78ba068ea-legacySeasonalGiftEmbedBox {
bottom: -18px;
height: 110%;
inset-inline-end: -8px;
position: absolute;
z-index: 1;
}
._857bf4d78ba068ea-legacySeasonalGiftEmbedBoxHorizontal {
bottom: -24px;
}
._857bf4d78ba068ea-customGiftEmbedBox {
bottom: 18px;
inset-inline-start: 33px;
position: absolute;
width: 174px;
}
._857bf4d78ba068ea-customGiftEmbedBoxHorizontal {
bottom: 24px;
inset-inline-start: 36px;
width: 234px;
}
._857bf4d78ba068ea-headerIcon {
margin-bottom: auto;
width: 92px;
-webkit-margin-start: 16px;
color: var(--white);
margin-inline-start: 16px;
margin-top: 16px;
}
._857bf4d78ba068ea-collectiblesEmbedWrapper {
pointer-events: none;
}
._857bf4d78ba068ea-collectiblesAcceptButton {
pointer-events: all;
}
.images-light ._857bf4d78ba068ea-invalidPoop {
background-image: url(/assets/eb4644cbe2f3e90f.svg);
}
.images-dark ._857bf4d78ba068ea-invalidPoop {
background-image: url(/assets/e4a502bfc6589d65.svg);
}
._98ba899df138d534-embed {
border-radius: var(--radius-md);
color: var(--white);
container-type: inline-size;
max-width: 343px;
overflow: hidden;
width: 100%;
}
._98ba899df138d534-showVideoOnFocus {
--custom-ease: cubic-bezier(0.4, 0, 1, 1);
}
._98ba899df138d534-showVideoOnFocus ._98ba899df138d534-staticBanner {
transition: opacity 0.3s var(--custom-ease);
}
._98ba899df138d534-showVideoOnFocus ._98ba899df138d534-videoBanner {
transition: visibility 0.3s var(--custom-ease);
visibility: hidden;
}
._98ba899df138d534-showVideoOnFocus:focus ._98ba899df138d534-staticBanner,
._98ba899df138d534-showVideoOnFocus:focus-within ._98ba899df138d534-staticBanner,
._98ba899df138d534-showVideoOnFocus:hover ._98ba899df138d534-staticBanner {
opacity: 0;
}
._98ba899df138d534-showVideoOnFocus:focus ._98ba899df138d534-videoBanner,
._98ba899df138d534-showVideoOnFocus:focus-within ._98ba899df138d534-videoBanner,
._98ba899df138d534-showVideoOnFocus:hover ._98ba899df138d534-videoBanner {
visibility: visible;
}
._98ba899df138d534-bannerWrapper {
height: 100%;
position: relative;
}
._98ba899df138d534-bannerAspectRatioBot {
aspect-ratio: 17/6;
}
._98ba899df138d534-bannerAspectRatioActivity {
aspect-ratio: 16/9;
}
._98ba899df138d534-videoBanner {
object-fit: cover !important;
}
._98ba899df138d534-staticBanner,
._98ba899df138d534-videoBanner {
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
._98ba899df138d534-staticBanner {
position: absolute;
top: 0;
width: 100%;
}
._98ba899df138d534-header {
color: var(--app-message-embed-secondary-text);
}
._98ba899df138d534-contentContainer {
display: flex;
flex-direction: column;
gap: 12px;
padding: 12px;
}
._98ba899df138d534-contentWrapper {
--custom-content-size: 64px;
display: flex;
flex: 1;
gap: 12px;
min-width: 0;
}
._98ba899df138d534-cursorPointer {
cursor: pointer;
}
._98ba899df138d534-contentWrapperClickable:hover ._98ba899df138d534-contentTitle {
text-decoration: underline;
}
._98ba899df138d534-img {
background-color: rgba(0, 0, 0, 0.64);
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
border-radius: var(--radius-md);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
height: var(--custom-content-size);
width: var(--custom-content-size);
@container (max-width: 270px) {
display: none;
}
}
._98ba899df138d534-content {
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
min-width: 0;
overflow: hidden;
}
._98ba899df138d534-contentInfoWrapper {
color: var(--app-message-embed-secondary-text);
}
._98ba899df138d534-actionWrapper {
display: flex;
flex-direction: row-reverse;
gap: 8px;
@container (max-width: 300px) {
flex-direction: column;
}
}
._98ba899df138d534-actionWrapper > ._98ba899df138d534-buttonWithPossibleDisabledTextWrapper {
flex: 50%;
}
._98ba899df138d534-actionWrapper._98ba899df138d534-actionWrapperPrimaryFirst {
flex-direction: row;
@container (max-width: 300px) {
flex-direction: column;
}
}
._98ba899df138d534-buttonWithPossibleDisabledTextWrapper {
align-items: center;
display: flex;
flex-direction: column;
gap: var(--space-4);
}
._98ba899df138d534-disabledReason {
color: var(--app-message-embed-secondary-text);
text-align: center;
}
._183c2cc3c55377b0-container {
align-items: center;
display: flex;
}
._183c2cc3c55377b0-icon {
color: var(--text-muted);
flex: 0 0 auto;
height: 20px;
margin-inline: -2px calc(var(--space-8) - 2px);
width: 20px;
}
._183c2cc3c55377b0-size56 ._183c2cc3c55377b0-avatarContainer {
height: 56px;
width: 56px;
}
._183c2cc3c55377b0-size56 ._183c2cc3c55377b0-avatarContainerMasked {
-webkit-margin-end: -14px;
height: 56px;
margin-inline-end: -14px;
width: 56px;
}
._183c2cc3c55377b0-size56 ._183c2cc3c55377b0-clickableAvatar,
._183c2cc3c55377b0-size56 ._183c2cc3c55377b0-emptyUser {
height: 56px;
width: 56px;
}
._183c2cc3c55377b0-size32 ._183c2cc3c55377b0-avatarContainer {
height: 32px;
width: 32px;
}
._183c2cc3c55377b0-size32 ._183c2cc3c55377b0-avatarContainerMasked {
-webkit-margin-end: -8px;
height: 32px;
margin-inline-end: -8px;
width: 32px;
}
._183c2cc3c55377b0-size32 ._183c2cc3c55377b0-clickableAvatar,
._183c2cc3c55377b0-size32 ._183c2cc3c55377b0-emptyUser {
height: 32px;
width: 32px;
}
._183c2cc3c55377b0-size24 ._183c2cc3c55377b0-avatarContainer {
height: 24px;
width: 24px;
}
._183c2cc3c55377b0-size24 ._183c2cc3c55377b0-avatarContainerMasked {
-webkit-margin-end: -6px;
height: 24px;
margin-inline-end: -6px;
width: 24px;
}
._183c2cc3c55377b0-size24 ._183c2cc3c55377b0-clickableAvatar,
._183c2cc3c55377b0-size24 ._183c2cc3c55377b0-emptyUser {
height: 24px;
width: 24px;
}
._183c2cc3c55377b0-size16 ._183c2cc3c55377b0-avatarContainer {
height: 16px;
width: 16px;
}
._183c2cc3c55377b0-size16 ._183c2cc3c55377b0-avatarContainerMasked {
-webkit-margin-end: -3px;
height: 16px;
margin-inline-end: -3px;
width: 16px;
}
._183c2cc3c55377b0-size16 ._183c2cc3c55377b0-clickableAvatar,
._183c2cc3c55377b0-size16 ._183c2cc3c55377b0-emptyUser {
height: 16px;
width: 16px;
}
._183c2cc3c55377b0-clickableAvatar {
border-radius: 50%;
cursor: pointer;
}
._183c2cc3c55377b0-emptyUser {
background: var(--background-accent);
border-radius: 50%;
}
._183c2cc3c55377b0-emptyUserDimmed {
background: var(--background-scrim);
}
._183c2cc3c55377b0-avatarWithBackground {
align-items: center;
background-color: var(--opacity-black-52);
display: flex;
justify-content: center;
position: relative;
}
._183c2cc3c55377b0-avatar,
._183c2cc3c55377b0-avatarWithBackground {
border-radius: 50%;
height: 100%;
width: 100%;
}
._183c2cc3c55377b0-moreUsers {
align-items: center;
background-color: var(--background-base-lowest);
box-sizing: border-box;
color: var(--text-default);
display: flex;
font-weight: var(--font-weight-semibold);
justify-content: center;
line-height: 1;
text-align: center;
}
._183c2cc3c55377b0-moreUsers._183c2cc3c55377b0-moreUsersDimmed {
background-color: var(--background-scrim);
}
._183c2cc3c55377b0-size56 ._183c2cc3c55377b0-moreUsers {
border-radius: 28px;
font-size: 24px;
height: 56px;
min-width: 56px;
padding: 0 8px;
}
._183c2cc3c55377b0-size32 ._183c2cc3c55377b0-moreUsers {
border-radius: 16px;
font-size: 12px;
height: 32px;
min-width: 32px;
padding: 0 8px;
}
._183c2cc3c55377b0-size24 ._183c2cc3c55377b0-moreUsers {
border-radius: 12px;
font-size: 12px;
height: 24px;
min-width: 24px;
padding: 0 8px;
}
._183c2cc3c55377b0-size16 ._183c2cc3c55377b0-moreUsers {
border-radius: 8px;
font-size: 10px;
height: 16px;
min-width: 16px;
padding: 0 4px;
}
._748d74f2f5f30878-wrapper {
display: flex;
gap: 4px;
}
:root {
--custom-app-message-embed-base-info-gap: 4px;
--custom-app-message-embed-base-info-top: calc(var(--custom-app-message-embed-base-info-gap) - 2px);
}
._1f7ec40c6e0613ad-description {
margin-top: var(--custom-app-message-embed-base-info-top);
}
._1f7ec40c6e0613ad-description * {
font-weight: 500;
}
._1f7ec40c6e0613ad-tagline {
align-items: center;
display: flex;
gap: 4px;
padding-top: var(--custom-app-message-embed-base-info-gap);
}
._1f7ec40c6e0613ad-tag:not(:first-of-type):before {
content: "∙";
padding: 0 3px;
}
._727be4e195a3a166-wrapper {
background-color: var(--background-surface-high);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
box-sizing: border-box;
container-type: inline-size;
max-width: min(601px, 100%);
overflow: hidden;
padding: 16px;
width: 100%;
}
._727be4e195a3a166-header {
justify-content: space-between;
padding-bottom: 8px;
}
._727be4e195a3a166-header,
._727be4e195a3a166-headerTitle {
align-items: center;
display: flex;
}
._727be4e195a3a166-headerTitle {
gap: 4px;
}
._727be4e195a3a166-content {
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: space-between;
@container (max-width: 400px) {
flex-direction: column;
}
}
._727be4e195a3a166-contentTextWrapper {
display: flex;
flex-basis: min-content;
flex-grow: 10;
flex-shrink: 10;
gap: 16px;
}
._727be4e195a3a166-contentText {
display: flex;
flex-direction: column;
}
._727be4e195a3a166-appIcon {
--custom-size: 44px;
border-radius: var(--custom-size);
height: var(--custom-size);
object-fit: cover;
width: var(--custom-size);
}
._727be4e195a3a166-description {
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
display: -webkit-box;
overflow: hidden;
}
._727be4e195a3a166-openStoreButton {
width: 124px;
@container (max-width: 400px) {
width: 100%;
}
}
._727be4e195a3a166-skuPurchaseButtons {
align-items: center;
display: flex;
flex-basis: min-content;
flex-grow: 1;
gap: 8px;
max-width: 100%;
overflow: hidden;
@container (max-width: 400px) {
flex-direction: column-reverse;
button {
width: 100%;
}
}
}
._727be4e195a3a166-skuPurchaseButtons > button {
flex-grow: 1;
}
.cacd02fa13551840-container {
flex-wrap: wrap;
justify-content: flex-start;
}
.cacd02fa13551840-bumpBox,
.cacd02fa13551840-container {
align-items: center;
display: flex;
}
.cacd02fa13551840-bumpBox {
background-color: var(--background-base-lower);
border-radius: 8px;
flex: 0 0 max-content;
padding: 8px;
-webkit-margin-end: 16px;
margin-inline-end: 16px;
}
.cacd02fa13551840-icon {
color: var(--text-muted);
flex: 0 0 16px;
}
.cacd02fa13551840-icon,
.cacd02fa13551840-publish,
.cacd02fa13551840-tagline {
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
.cacd02fa13551840-publish {
cursor: pointer;
}
.cacd02fa13551840-hidePermanently {
cursor: pointer;
line-height: 24px;
transition: 0.2s linear;
}
.cacd02fa13551840-hidePermanently:focus,
.cacd02fa13551840-hidePermanently:hover {
color: var(--text-default);
}
.cacd02fa13551840-closeIcon {
color: var(--interactive-muted);
cursor: pointer;
display: block;
}
.cacd02fa13551840-closeIcon:focus,
.cacd02fa13551840-closeIcon:hover {
color: var(--interactive-text-hover);
}
.cacd02fa13551840-closeIcon:active {
color: var(--interactive-text-active);
}
@use postcss-pxtorem;
.theme-dark.custom-theme-background ._623de82e76ad7f82-embedFull {
--__spoiler-background-color--hidden: var(--primary-760);
--__spoiler-background-color--hidden--hover: hsl(var(--primary-760-hsl)/0.8);
}
._623de82e76ad7f82-embed {
border-radius: 4px;
box-sizing: border-box;
display: grid;
max-width: -webkit-max-content;
max-width: -moz-max-content;
max-width: max-content;
position: relative;
}
._623de82e76ad7f82-embed .emoji {
height: 18px;
width: 18px;
}
._623de82e76ad7f82-embed :is(h1, h2, h3, h4, h5, h6) .emoji {
height: 1.375em;
width: 1.375em;
}
._623de82e76ad7f82-embed pre {
border: none;
max-width: 100%;
}
._623de82e76ad7f82-embed code {
background: var(--background-base-lowest);
border: none;
}
._623de82e76ad7f82-embed .no-webkit-scrollbar code {
scrollbar-color: var(--background-base-lower) var(--background-base-lowest);
}
._623de82e76ad7f82-embed blockquote {
max-width: 100%;
}
._623de82e76ad7f82-embedFull {
background: var(--background-surface-high);
border: 1px solid var(--border-subtle);
-webkit-border-start: 4px solid var(--border-normal);
border-inline-start: 4px solid var(--border-normal);
}
._623de82e76ad7f82-embedFull._623de82e76ad7f82-isHidden {
-webkit-border-start: 0;
border-inline-start: 0;
}
._623de82e76ad7f82-inlineMediaEmbed {
max-width: 520px;
}
._623de82e76ad7f82-embedAuthorName,
._623de82e76ad7f82-embedAuthorNameLink,
._623de82e76ad7f82-embedDescription,
._623de82e76ad7f82-embedFieldName,
._623de82e76ad7f82-embedFieldValue,
._623de82e76ad7f82-embedFooterText,
._623de82e76ad7f82-embedLink,
._623de82e76ad7f82-embedProvider,
._623de82e76ad7f82-embedTitle,
._623de82e76ad7f82-embedTitleLink {
text-align: start;
unicode-bidi: plaintext;
}
._623de82e76ad7f82-gridContainer {
max-width: 516px;
}
._623de82e76ad7f82-grid {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
overflow: hidden;
padding-block: 0.5rem 1rem;
padding-inline: 0.75rem 1rem;
padding-top: 0.125rem;
}
._623de82e76ad7f82-grid._623de82e76ad7f82-hasThumbnail {
grid-template-columns: minmax(0, 1fr) -webkit-min-content;
grid-template-columns: minmax(0, 1fr) min-content;
}
._623de82e76ad7f82-embedMargin {
margin-top: 8px;
}
._623de82e76ad7f82-embedLink {
cursor: pointer;
text-decoration: none;
}
._623de82e76ad7f82-embedLink:hover {
text-decoration: underline;
}
._623de82e76ad7f82-embedSuppressButton {
color: var(--interactive-text-default);
cursor: pointer;
inset-inline-end: -20px;
opacity: 0;
padding: 2px;
position: absolute;
top: -2px;
}
._623de82e76ad7f82-embed:focus-within ._623de82e76ad7f82-embedSuppressButton,
.mouse-mode ._623de82e76ad7f82-embed:hover ._623de82e76ad7f82-embedSuppressButton {
opacity: 1;
}
._623de82e76ad7f82-embedSuppressButton:hover {
color: var(--interactive-text-hover);
}
._623de82e76ad7f82-embedProvider {
font-size: 0.75rem;
font-weight: var(--font-weight-normal);
grid-column: 1/1;
line-height: 1rem;
}
@media (-webkit-max-device-pixel-ratio: 1) {
.theme-light ._623de82e76ad7f82-embedProvider {
font-weight: var(--font-weight-medium);
}
}
._623de82e76ad7f82-embedAuthor {
align-items: center;
display: flex;
grid-column: 1/1;
}
._623de82e76ad7f82-embedAuthorName {
font-size: 0.875rem;
font-weight: var(--font-weight-semibold);
}
@media (-webkit-max-device-pixel-ratio: 1) {
.theme-light ._623de82e76ad7f82-embedAuthorName {
font-weight: var(--font-weight-medium);
}
}
._623de82e76ad7f82-embedAuthorNameLink {
}
._623de82e76ad7f82-embed ._623de82e76ad7f82-embedAuthorNameLink {
color: var(--text-strong);
}
._623de82e76ad7f82-embedAuthorIcon {
-webkit-margin-end: 8px;
border-radius: 50%;
height: 24px;
margin-inline-end: 8px;
object-fit: contain;
width: 24px;
}
._623de82e76ad7f82-embedTitle {
display: inline-block;
font-size: 1rem;
font-weight: var(--font-weight-semibold);
grid-column: 1/1;
}
._623de82e76ad7f82-embedTitleLink {
}
._623de82e76ad7f82-embedDescription {
font-size: 0.875rem;
font-weight: var(--font-weight-normal);
grid-column: 1/1;
line-height: 1.125rem;
white-space: pre-line;
}
@media (-webkit-max-device-pixel-ratio: 1) {
.theme-light ._623de82e76ad7f82-embedDescription {
font-weight: var(--font-weight-medium);
}
}
._623de82e76ad7f82-embedImage,
._623de82e76ad7f82-embedThumbnail,
._623de82e76ad7f82-embedVideo {
display: block;
object-fit: fill;
}
._623de82e76ad7f82-embedImage img,
._623de82e76ad7f82-embedImage video,
._623de82e76ad7f82-embedThumbnail img,
._623de82e76ad7f82-embedThumbnail video,
._623de82e76ad7f82-embedVideo img,
._623de82e76ad7f82-embedVideo video {
border-radius: 4px;
display: block;
}
._623de82e76ad7f82-embedGalleryImagesWrapper {
border-radius: 4px;
-moz-column-gap: 4px;
column-gap: 4px;
display: grid;
grid-column: 1/2;
grid-template-columns: 1fr 1fr;
margin-top: 16px;
overflow: hidden;
}
._623de82e76ad7f82-embedGallerySide {
display: flex;
flex-direction: column;
overflow: hidden;
}
._623de82e76ad7f82-embedGallerySide > ._623de82e76ad7f82-galleryImage {
border-radius: 0;
display: flex;
justify-content: center;
margin: 0;
max-width: 100%;
min-height: calc(50% - 2px);
min-width: 100%;
}
._623de82e76ad7f82-embedGallerySide > ._623de82e76ad7f82-galleryImage:only-child {
min-height: 100%;
}
._623de82e76ad7f82-embedGallerySide > ._623de82e76ad7f82-galleryImage:nth-child(2) {
margin-top: 4px;
}
._623de82e76ad7f82-obscureVideoSpacing {
bottom: 36px;
transition: bottom 0.1s ease-in-out;
}
._623de82e76ad7f82-galleryImageContainer {
max-height: 100%;
}
._623de82e76ad7f82-embedGalleryImageElement {
height: 100%;
max-height: 100% !important;
max-width: 100% !important;
object-fit: cover;
width: 100%;
}
._623de82e76ad7f82-embedThumbnail {
grid-column: 2/2;
grid-row: 1/8;
-webkit-margin-start: 16px;
flex-shrink: 0;
justify-self: end;
margin-inline-start: 16px;
margin-top: 8px;
}
._623de82e76ad7f82-embedVideo {
display: flex;
position: relative;
}
._623de82e76ad7f82-centerContent,
._623de82e76ad7f82-embedVideoActions,
._623de82e76ad7f82-embedVideoImageComponent {
align-items: center;
display: flex;
justify-content: center;
}
._623de82e76ad7f82-embedVideoImageComponent {
border-radius: 0;
height: 100% !important;
max-height: 100%;
width: 100% !important;
}
._623de82e76ad7f82-embedVideoImageComponentInner {
height: 100% !important;
object-fit: cover;
width: 100% !important;
}
._623de82e76ad7f82-embedVideoActions {
inset: 0;
pointer-events: none;
position: absolute;
z-index: 1;
}
._623de82e76ad7f82-embedVideoAction {
background: none;
background-size: 24px 24px;
display: inline-block;
height: 24px;
opacity: 0.6;
width: 24px;
}
._623de82e76ad7f82-embedVideoAction:hover {
opacity: 1;
}
._623de82e76ad7f82-embedIframe {
display: block;
height: 100%;
width: 100%;
}
._623de82e76ad7f82-embedGIFTag {
inset-inline-end: 4px;
position: absolute;
top: 4px;
}
._623de82e76ad7f82-embedFooter {
align-items: center;
display: flex;
grid-column: 1/1;
grid-row: auto/auto;
}
._623de82e76ad7f82-hasThumbnail ._623de82e76ad7f82-embedFooter {
grid-column: 1/3;
}
._623de82e76ad7f82-embedFooterText {
color: var(--text-default);
font-size: 0.75rem;
font-weight: var(--font-weight-medium);
line-height: 1rem;
}
@media (-webkit-max-device-pixel-ratio: 1) {
.theme-light ._623de82e76ad7f82-embedFooterText {
font-weight: var(--font-weight-medium);
}
}
._623de82e76ad7f82-embedFooterSeparator {
color: var(--text-default);
display: inline-block;
font-weight: var(--font-weight-medium);
margin: 0 4px;
}
._623de82e76ad7f82-embedFooterIcon {
-webkit-margin-end: 8px;
border-radius: 50%;
height: 20px;
margin-inline-end: 8px;
object-fit: contain;
width: 20px;
}
._623de82e76ad7f82-embedFields {
display: grid;
grid-column: 1/1;
margin-top: 8px;
grid-gap: 8px;
}
._623de82e76ad7f82-embedField {
font-weight: var(--font-weight-normal);
}
._623de82e76ad7f82-embedField,
._623de82e76ad7f82-embedFieldName {
font-size: 0.875rem;
line-height: 1.125rem;
min-width: 0;
}
._623de82e76ad7f82-embedFieldName {
font-weight: var(--font-weight-semibold);
margin-bottom: 2px;
}
._623de82e76ad7f82-embedFieldValue {
font-size: 0.875rem;
font-weight: var(--font-weight-normal);
line-height: 1.125rem;
min-width: 0;
white-space: pre-line;
}
._623de82e76ad7f82-embedMedia {
border-radius: 4px;
contain: paint;
grid-column: 1/1;
}
._623de82e76ad7f82-hasThumbnail ._623de82e76ad7f82-embedMedia {
grid-column: 1/3;
}
._623de82e76ad7f82-embedFull ._623de82e76ad7f82-embedMedia {
margin-top: 16px;
}
@media (-webkit-max-device-pixel-ratio: 1) {
.theme-light ._623de82e76ad7f82-embedFieldName {
font-weight: var(--font-weight-semibold);
}
}
@media (-webkit-max-device-pixel-ratio: 1) {
.theme-light ._623de82e76ad7f82-embedFieldValue {
font-weight: var(--font-weight-normal);
}
}
._623de82e76ad7f82-embedDescription,
._623de82e76ad7f82-embedFieldValue {
color: var(--text-default);
}
._623de82e76ad7f82-embedProvider ._623de82e76ad7f82-embedLink {
color: var(--interactive-text-default);
}
._623de82e76ad7f82-embedProvider ._623de82e76ad7f82-embedLink:hover {
color: var(--interactive-text-hover);
}
._623de82e76ad7f82-embedAuthorName,
._623de82e76ad7f82-embedFieldName,
._623de82e76ad7f82-embedTitle {
color: var(--text-strong);
}
._623de82e76ad7f82-embedAuthor,
._623de82e76ad7f82-embedDescription,
._623de82e76ad7f82-embedFields,
._623de82e76ad7f82-embedFooter,
._623de82e76ad7f82-embedMedia,
._623de82e76ad7f82-embedProvider,
._623de82e76ad7f82-embedTitle {
min-width: 0;
}
.background-opacity-low ._623de82e76ad7f82-embedFull {
background-color: hsl(var(--primary-630-hsl) / 0.2);
border-inline-start-color: rgba(32, 34, 37, 0.4) !important;
}
.background-opacity-low ._623de82e76ad7f82-embedFull code {
background: rgba(32, 34, 37, 0.4);
}
.background-opacity-low ._623de82e76ad7f82-embedThumbnail {
opacity: 0.4;
}
.background-opacity-low ._623de82e76ad7f82-embedAmazonMusic,
.background-opacity-low ._623de82e76ad7f82-embedAppleMusic,
.background-opacity-low ._623de82e76ad7f82-embedSpotify {
opacity: 0.8;
}
.background-opacity-low ._623de82e76ad7f82-embedAmazonMusic:hover,
.background-opacity-low ._623de82e76ad7f82-embedAppleMusic:hover,
.background-opacity-low ._623de82e76ad7f82-embedSpotify:hover {
opacity: 1;
}
.background-opacity-low ._623de82e76ad7f82-embedPlaystation {
opacity: 0.8;
}
.background-opacity-low ._623de82e76ad7f82-embedPlaystation:hover {
opacity: 1;
}
.background-opacity-low ._623de82e76ad7f82-embedDescription,
.background-opacity-low ._623de82e76ad7f82-embedFieldValue,
.background-opacity-low ._623de82e76ad7f82-embedFooterText,
.background-opacity-low ._623de82e76ad7f82-embedProvider {
color: var(--white) !important;
text-shadow: 0 0 1px var(--opacity-black-28);
}
.background-opacity-low ._623de82e76ad7f82-embedTitleLink {
color: var(--text-link) !important;
text-shadow:
0 0 1px var(--opacity-white-28),
0 0 3px var(--opacity-black-60);
}
.background-opacity-medium ._623de82e76ad7f82-embedFull {
background-color: hsl(var(--primary-630-hsl) / 0.2);
border-inline-start-color: rgba(32, 34, 37, 0.4) !important;
}
.background-opacity-medium ._623de82e76ad7f82-embedFull code {
background: rgba(32, 34, 37, 0.4);
}
.background-opacity-medium ._623de82e76ad7f82-embedThumbnail {
opacity: 0.4;
}
.background-opacity-medium ._623de82e76ad7f82-embedAmazonMusic,
.background-opacity-medium ._623de82e76ad7f82-embedAppleMusic,
.background-opacity-medium ._623de82e76ad7f82-embedSpotify {
opacity: 0.8;
}
.background-opacity-medium ._623de82e76ad7f82-embedAmazonMusic:hover,
.background-opacity-medium ._623de82e76ad7f82-embedAppleMusic:hover,
.background-opacity-medium ._623de82e76ad7f82-embedSpotify:hover {
opacity: 1;
}
.background-opacity-medium ._623de82e76ad7f82-embedDescription,
.background-opacity-medium ._623de82e76ad7f82-embedFieldValue,
.background-opacity-medium ._623de82e76ad7f82-embedFooterText,
.background-opacity-medium ._623de82e76ad7f82-embedProvider {
color: var(--opacity-black-20) !important;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
}
.background-opacity-medium ._623de82e76ad7f82-embedTitleLink {
color: var(--text-link) !important;
text-shadow:
0 0 1px var(--opacity-white-20),
0 0 3px var(--opacity-black-40);
}
.background-opacity-high ._623de82e76ad7f82-embedFull {
background-color: hsl(var(--primary-630-hsl) / 0.2);
border-inline-start-color: rgba(32, 34, 37, 0.4) !important;
}
.background-opacity-high ._623de82e76ad7f82-embedFull code {
background: rgba(32, 34, 37, 0.4);
}
.background-opacity-high ._623de82e76ad7f82-embedThumbnail {
opacity: 0.4;
}
.background-opacity-high ._623de82e76ad7f82-embedAmazonMusic,
.background-opacity-high ._623de82e76ad7f82-embedAppleMusic,
.background-opacity-high ._623de82e76ad7f82-embedSpotify {
opacity: 0.9;
}
.background-opacity-high ._623de82e76ad7f82-embedAmazonMusic:hover,
.background-opacity-high ._623de82e76ad7f82-embedAppleMusic:hover,
.background-opacity-high ._623de82e76ad7f82-embedSpotify:hover {
opacity: 1;
}
.background-opacity-high ._623de82e76ad7f82-embedDescription,
.background-opacity-high ._623de82e76ad7f82-embedFieldValue,
.background-opacity-high ._623de82e76ad7f82-embedFooterText,
.background-opacity-high ._623de82e76ad7f82-embedProvider {
text-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
}
.background-opacity-high ._623de82e76ad7f82-embedTitleLink {
text-shadow:
0 0 1px hsla(0, 0%, 100%, 0.2),
0 0 3px rgba(0, 0, 0, 0.4);
}
.custom-theme-background ._623de82e76ad7f82-embedFull {
background-color: var(--background-mod-subtle);
}
._623de82e76ad7f82-hiddenEmbed._623de82e76ad7f82-isHidden {
overflow: hidden;
}
._623de82e76ad7f82-hiddenEmbed._623de82e76ad7f82-isHidden ._623de82e76ad7f82-grid {
pointer-events: none;
transition: filter 0.1s ease-out;
}
._623de82e76ad7f82-spoilerEmbed {
}
._623de82e76ad7f82-spoilerEmbed._623de82e76ad7f82-isHidden {
cursor: pointer;
}
._623de82e76ad7f82-spoilerEmbed._623de82e76ad7f82-isHidden ._623de82e76ad7f82-grid {
filter: blur(var(--custom-embed-spoiler-blur-radius));
}
._623de82e76ad7f82-hiddenExplicitEmbed {
}
._623de82e76ad7f82-hiddenExplicitEmbed._623de82e76ad7f82-isHidden ._623de82e76ad7f82-grid {
filter: blur(var(--__obscured-background-blur-radius)) brightness(var(--__obscured-background-brightness));
}
._623de82e76ad7f82-hiddenExplicitEmbed._623de82e76ad7f82-embedFull {
-webkit-border-start: 0;
border-inline-start: 0;
}
._623de82e76ad7f82-justifyAuto {
justify-self: auto !important;
}
.overlay-unlocked ._623de82e76ad7f82-embedAmazonMusic,
.overlay-unlocked ._623de82e76ad7f82-embedAppleMusic,
.overlay-unlocked ._623de82e76ad7f82-embedSpotify,
.overlay-unlocked ._623de82e76ad7f82-embedThumbnail {
opacity: 1;
}
._623de82e76ad7f82-hiddenAttachment._623de82e76ad7f82-isHidden {
pointer-events: none;
transition: filter 0.1s ease;
}
._623de82e76ad7f82-spoilerAttachment {
}
._623de82e76ad7f82-spoilerAttachment._623de82e76ad7f82-isHidden {
filter: blur(var(--custom-embed-spoiler-blur-radius));
}
._623de82e76ad7f82-hiddenExplicitAttachment {
}
._623de82e76ad7f82-hiddenExplicitAttachment._623de82e76ad7f82-isHidden {
filter: blur(var(--__obscured-background-blur-radius)) brightness(var(--__obscured-background-brightness));
}
.enable-forced-colors ._623de82e76ad7f82-embed {
border: 1px solid CanvasText;
}
.enable-forced-colors ._623de82e76ad7f82-embedFull {
border-left-width: 4px;
}
.enable-forced-colors ._623de82e76ad7f82-embedSuppressButton {
background-color: ButtonFace;
border: 1px solid ButtonFace;
color: ButtonText;
opacity: 1;
}
.enable-forced-colors ._623de82e76ad7f82-embedSuppressButton:focus,
.enable-forced-colors ._623de82e76ad7f82-embedSuppressButton:hover {
border-color: ButtonText;
}
._623de82e76ad7f82-contentPlaceholder + ._623de82e76ad7f82-contentPlaceholder {
-webkit-margin-start: 0;
margin-inline-start: 0;
}
.fc817765600a960a-wrapper {
box-sizing: border-box;
position: relative;
word-wrap: break-word;
flex: 0 0 auto;
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
-webkit-padding-end: 1rem;
background: var(--background-gradient-chat, var(--background-base-lower));
contain: paint layout;
overflow: hidden;
padding-inline-end: 1rem;
}
.fc817765600a960a-compact.fc817765600a960a-wrapper {
padding-bottom: 0.125rem;
padding-top: 0.125rem;
}
.fc817765600a960a-cozy.fc817765600a960a-wrapper {
-webkit-padding-start: 4.5rem;
padding-inline-start: 4.5rem;
}
.a11y-font-scaled-up .fc817765600a960a-cozy.fc817765600a960a-wrapper {
-webkit-padding-start: 72px;
padding-inline-start: 72px;
}
.fc817765600a960a-compact .fc817765600a960a-contents {
display: flex;
flex-wrap: wrap;
height: 1.375rem;
overflow: hidden;
-webkit-padding-start: 5rem;
padding-inline-start: 5rem;
}
.fc817765600a960a-compact .fc817765600a960a-contents .fc817765600a960a-content {
display: contents;
}
.fc817765600a960a-cozy .fc817765600a960a-content {
align-items: center;
display: flex;
flex-wrap: wrap;
height: 1.375rem;
overflow: hidden;
text-indent: 0;
}
.fc817765600a960a-compact .fc817765600a960a-content {
display: inline;
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
}
.fc817765600a960a-blob {
flex: 0 0 auto;
height: 1rem;
line-height: 1.375rem;
margin-top: 0.1875rem;
vertical-align: middle;
}
.fc817765600a960a-cozy .fc817765600a960a-blob {
display: block;
}
.fc817765600a960a-hidden {
visibility: hidden;
}
.fc817765600a960a-compact .fc817765600a960a-blob {
display: inline-block;
}
.fc817765600a960a-cozy .fc817765600a960a-header {
align-items: center;
display: flex;
flex-wrap: wrap;
height: 1.375rem;
line-height: 1.375rem;
overflow: hidden;
position: relative;
}
.fc817765600a960a-compact .fc817765600a960a-header {
-webkit-margin-end: 0.5rem;
margin-inline-end: 0.5rem;
}
.fc817765600a960a-attachmentContainer {
padding-bottom: 0.125rem;
padding-top: 0.125rem;
}
.fc817765600a960a-compact .fc817765600a960a-attachmentContainer {
margin-top: 0.25rem;
}
.fc817765600a960a-attachment {
height: 120px;
margin-top: 0.125rem;
width: 240px;
}
.fc817765600a960a-compact .fc817765600a960a-attachment {
-webkit-margin-start: 5rem;
margin-inline-start: 5rem;
}
.fc817765600a960a-blob + .fc817765600a960a-blob {
-webkit-margin-start: 0.25rem;
margin-inline-start: 0.25rem;
}
.fc817765600a960a-header .fc817765600a960a-blob + .fc817765600a960a-blob {
-webkit-margin-start: 0.5rem;
margin-inline-start: 0.5rem;
}
.fc817765600a960a-blob {
border-radius: 0.5rem;
}
.fc817765600a960a-attachment {
border-radius: 6px;
}
.fc817765600a960a-attachment,
.fc817765600a960a-avatar,
.fc817765600a960a-blob {
background-color: var(--text-default);
}
.fc817765600a960a-avatar {
border-radius: 50%;
flex: 0 0 auto;
height: 2.5rem;
inset-inline-start: 1rem;
max-height: 40px;
max-width: 40px;
position: absolute;
top: 0.25rem;
width: 2.5rem;
}
.a11y-font-scaled-up .fc817765600a960a-avatar {
inset-inline-start: 16px;
top: 4px;
}
.fc817765600a960a-compactTimestamp {
margin-inline: -4rem 0.25rem;
}
.b7e1cb0370c2dd0e-container {
display: grid;
grid-auto-flow: row;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
grid-row-gap: 0.25rem;
grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
min-height: 0;
min-width: 0;
padding-bottom: 0.125rem;
padding-top: 0.125rem;
position: relative;
text-indent: 0;
}
.b7e1cb0370c2dd0e-container:empty {
display: none;
}
.b7e1cb0370c2dd0e-container > * {
align-self: start;
justify-self: start;
}
.b7e1cb0370c2dd0e-gifFavoriteButton {
box-sizing: border-box;
display: block;
margin-block: 0;
margin-inline: auto 0;
opacity: 0;
transform: translateY(-16px);
}
.full-motion .b7e1cb0370c2dd0e-gifFavoriteButton {
transition:
transform 0.2s ease,
opacity 0.1s ease;
}
.imageWrapper:focus-within .b7e1cb0370c2dd0e-gifFavoriteButton,
.imageWrapper:hover .b7e1cb0370c2dd0e-gifFavoriteButton {
opacity: 1;
transform: translateY(0);
}
.b7e1cb0370c2dd0e-giftCodeContainer {
width: 100%;
}
.b7e1cb0370c2dd0e-referralContainer {
justify-content: space-between;
width: 100%;
}
.b7e1cb0370c2dd0e-pollContainer {
margin: 4px 0;
}
.b7e1cb0370c2dd0e-confirmText {
margin-bottom: 12px;
}
.b7e1cb0370c2dd0e-threadRoleMentionFailure {
color: var(--text-feedback-critical);
font-size: 12px;
line-height: 16px;
}
.b7e1cb0370c2dd0e-ctaButtonContainer {
margin-bottom: 6px;
margin-top: 6px;
}
._4999704033c530b6-embedIFrame {
opacity: 0.8;
}
._4999704033c530b6-embedIFrame:hover {
opacity: 1;
}
._7473dbb4845d50c7-container {
background: var(--background-mod-subtle);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
box-sizing: border-box;
flex-wrap: wrap;
justify-content: space-between;
max-width: 432px;
padding: var(--space-12);
width: 100%;
}
._7473dbb4845d50c7-container,
._7473dbb4845d50c7-themePreviewContainer {
align-items: center;
display: flex;
gap: var(--space-12);
}
._7473dbb4845d50c7-themePreviewContainer {
flex-grow: 2;
justify-content: flex-start;
}
._7473dbb4845d50c7-colorPreview {
border-radius: var(--radius-sm);
flex-grow: 0;
flex-shrink: 0;
height: 60px;
overflow: hidden;
width: 60px;
}
._7473dbb4845d50c7-sharedByContainer {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
._7473dbb4845d50c7-sharedTitle {
align-items: center;
display: flex;
gap: var(--space-6);
}
._7473dbb4845d50c7-sharedBy {
flex-wrap: wrap;
}
._7473dbb4845d50c7-avatarContainer,
._7473dbb4845d50c7-sharedBy {
display: flex;
gap: var(--space-4);
}
._7473dbb4845d50c7-avatarContainer {
flex-wrap: nowrap;
}
.caab99a2ef47b035-left {
transform: rotate(270deg);
}
.caab99a2ef47b035-right {
transform: rotate(90deg);
}
.caab99a2ef47b035-down {
transform: rotate(180deg);
}
.caab99a2ef47b035-downRight {
transform: rotate(135deg);
}
.caab99a2ef47b035-upLeft {
transform: rotate(315deg);
}
._0b48bcf0ae3184a9-lineClamp {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.adb50a654b4cd212-container {
background: var(--background-base-lower);
border: 1px solid var(--message-highlight-background-hover);
border-radius: 12px;
box-shadow: var(--shadow-low);
display: flex;
gap: 24px;
justify-content: space-between;
padding: 16px;
transition: background 0.3s;
}
@media (max-width: 1439px) {
.adb50a654b4cd212-container {
flex-direction: column-reverse;
max-width: var(--custom-guild-shop-content-width-reduced);
}
.adb50a654b4cd212-container .adb50a654b4cd212-coverImageContainer,
.adb50a654b4cd212-container .adb50a654b4cd212-infoContainer {
max-width: none;
}
}
.adb50a654b4cd212-coverImageContainer {
max-width: 655px;
width: 100%;
}
.adb50a654b4cd212-coverImage {
aspect-ratio: 4;
border-radius: 12px;
object-fit: cover;
width: 100%;
}
.adb50a654b4cd212-infoContainer {
display: flex;
flex: 1;
max-width: 500px;
}
.adb50a654b4cd212-infoContainerNoDescription,
.adb50a654b4cd212-showMoreButton {
align-items: center;
}
.adb50a654b4cd212-showMoreButton {
border-bottom: 1px solid var(--interactive-text-active);
cursor: pointer;
display: inline-flex;
padding-bottom: 2px;
}
.adb50a654b4cd212-showMoreButton:hover {
opacity: 0.75;
transition: 0.3s ease;
}
.adb50a654b4cd212-showMoreArrow {
color: var(--interactive-text-active);
height: 16px;
width: 16px;
-webkit-margin-end: -3px;
margin-inline-end: -3px;
}
._86fa62aafa304c71-guildShopEmbed {
border-radius: 12px;
max-width: 510px;
min-height: 300px;
min-width: 160px;
padding: 16px;
width: 100%;
}
.theme-dark ._86fa62aafa304c71-guildShopEmbed {
background-color: var(--background-base-lower);
}
.theme-light ._86fa62aafa304c71-guildShopEmbed {
background-color: var(--background-secondary-alt);
}
._86fa62aafa304c71-spinnerContainer {
align-items: center;
display: flex;
justify-content: center;
}
._86fa62aafa304c71-serverShopLabel {
display: flex;
gap: 4px;
}
._86fa62aafa304c71-serverShopLabelText {
text-transform: uppercase;
}
._86fa62aafa304c71-guildShopEmbedFooter {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 12px;
width: 100%;
}
._86fa62aafa304c71-guildShopSummary {
display: flex;
flex-direction: column;
height: 42px;
justify-content: space-between;
list-style-type: disc;
-webkit-padding-start: 20px;
color: var(--interactive-muted);
padding-inline-start: 20px;
}
._86fa62aafa304c71-guildShopEmbedCta {
-webkit-margin-start: auto;
margin-inline-start: auto;
}
._86fa62aafa304c71-guildShopEmbedCtaContent {
display: flex;
gap: 8px;
}
._09bc1d7385bf57e1-accessory {
color: var(--interactive-text-default);
cursor: pointer;
display: flex;
gap: var(--space-4);
justify-content: center;
}
._09bc1d7385bf57e1-accessory:hover,
._09bc1d7385bf57e1-accessory:hover ._09bc1d7385bf57e1-accessoryText {
color: var(--interactive-text-hover);
}
._09bc1d7385bf57e1-accessoryText {
color: var(--interactive-text-default);
}
._1562fd65936968ba-toast {
gap: var(--space-8);
}
.d93468f01d578d26-image {
border-radius: var(--radius-xs);
}
.d93468f01d578d26-image,
.d93468f01d578d26-video {
width: 100%;
}
.d93468f01d578d26-media,
.d93468f01d578d26-mediaContainer {
border-radius: var(--radius-xs);
}
.d93468f01d578d26-mediaContainer {
background-color: var(--background-base-lower);
margin-bottom: var(--space-16);
margin-top: var(--space-12);
padding: var(--space-16);
}
._122e465d2e663859-container {
display: flex;
width: 100%;
}
._122e465d2e663859-quote {
background-color: var(--border-subtle);
border-radius: 2px;
width: 4px;
-webkit-margin-end: 12px;
flex-shrink: 0;
margin-inline-end: 12px;
}
._122e465d2e663859-content {
display: flex;
flex-direction: column;
flex-grow: 1;
max-width: 100%;
}
._122e465d2e663859-headerContainer {
align-items: center;
align-self: flex-start;
display: flex;
gap: 4px;
margin-bottom: 4px;
margin-top: 2px;
}
._122e465d2e663859-headerIcon {
flex-shrink: 0;
}
._122e465d2e663859-headerText {
font-style: italic;
}
._122e465d2e663859-footerContainer {
align-items: center;
align-self: flex-start;
border-radius: 4px;
color: var(--text-muted);
cursor: pointer;
display: flex;
gap: 4px;
margin-top: 4px;
max-width: 100%;
padding-bottom: 1px;
padding-top: 1px;
}
._122e465d2e663859-footerContainer:hover {
background-color: var(--interactive-background-hover);
}
._122e465d2e663859-footerContainer:hover ._122e465d2e663859-footerText {
color: var(--interactive-text-hover);
}
._122e465d2e663859-footerText {
overflow: hidden;
text-overflow: ellipsis;
white-space: pre;
}
._122e465d2e663859-originIcon {
border-radius: 4px;
height: 16px;
width: 16px;
}
.d5f3cd116f175f35-wrapper {
background-color: var(--background-surface-high);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
box-sizing: border-box;
cursor: default;
display: flex;
flex-direction: column;
max-width: 432px;
min-width: 160px;
padding: 16px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
width: 100%;
}
.d5f3cd116f175f35-header {
color: var(--interactive-text-default);
font-weight: var(--font-weight-bold);
margin-bottom: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.d5f3cd116f175f35-content {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: 16px;
}
.d5f3cd116f175f35-guildIcon {
background-color: var(--background-mod-subtle);
flex: 0 0 auto;
}
.d5f3cd116f175f35-applicationIcon {
height: 48px;
width: 48px;
}
.d5f3cd116f175f35-guildIconJoined {
cursor: pointer;
}
.d5f3cd116f175f35-guildIconImage {
background-color: var(--background-mod-subtle);
}
.d5f3cd116f175f35-guildIconImageJoined {
cursor: pointer;
}
.d5f3cd116f175f35-inviteDestination {
margin-bottom: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.d5f3cd116f175f35-inviteDestinationJoined {
cursor: pointer;
}
.d5f3cd116f175f35-inviteDestinationJoined:hover {
text-decoration: underline;
}
.d5f3cd116f175f35-channel {
align-items: center;
display: flex;
}
.d5f3cd116f175f35-channelName {
flex: 1 1 auto;
-webkit-margin-start: 4px;
margin-inline-start: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.d5f3cd116f175f35-channelIcon {
color: var(--text-muted);
flex: 0 0 auto;
}
.d5f3cd116f175f35-status {
display: block;
flex: 0 0 auto;
-webkit-margin-end: 4px;
border-radius: 50%;
height: 8px;
margin-inline-end: 4px;
width: 8px;
}
.d5f3cd116f175f35-statusWrapper {
align-items: center;
display: flex;
flex: 0 1 auto;
flex-flow: nowrap;
min-width: 0;
}
.d5f3cd116f175f35-statusOnline {
background-color: var(--green-360);
}
.d5f3cd116f175f35-statusOffline {
background-color: var(--primary-400);
}
.d5f3cd116f175f35-count {
flex: 0 1 auto;
-webkit-margin-end: 8px;
color: var(--interactive-text-default);
margin-inline-end: 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.d5f3cd116f175f35-count:last-child {
-webkit-margin-end: 0;
margin-inline-end: 0;
}
.d5f3cd116f175f35-guildNameWrapper {
align-items: center;
display: flex;
flex: 0 1 auto;
max-width: 100%;
overflow: hidden;
}
.d5f3cd116f175f35-guildName {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.d5f3cd116f175f35-guildBadge {
flex: 0 0 auto;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
.d5f3cd116f175f35-guildInfo {
min-width: 1px;
}
.d5f3cd116f175f35-guildDetail {
color: var(--interactive-text-default);
font-size: 14px;
line-height: 16px;
}
.d5f3cd116f175f35-statusCounts {
align-items: center;
-moz-column-gap: 12px;
column-gap: 12px;
display: flex;
flex-flow: row wrap;
}
.d5f3cd116f175f35-inviteSplash {
background-color: var(--background-mod-subtle);
border-radius: 4px 4px 0 0;
height: 64px;
margin-top: -16px;
margin-inline: -16px;
margin-bottom: 16px;
overflow: hidden;
position: relative;
}
.d5f3cd116f175f35-inviteSplashImage {
display: block;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.125s;
width: 100%;
}
.d5f3cd116f175f35-inviteSplashBadge {
inset-inline-end: 8px;
position: absolute;
top: 8px;
}
.d5f3cd116f175f35-inviteSplashImageLoaded {
opacity: 1;
}
.d5f3cd116f175f35-guildIconExpired {
background-color: var(--background-base-lower);
background-position: 50%;
background-repeat: no-repeat;
background-size: 50px 26px;
border-radius: 12px;
height: 48px;
width: 48px;
}
.d5f3cd116f175f35-inviteDestinationExpired {
color: var(--status-danger);
overflow: hidden;
text-overflow: ellipsis;
}
.d5f3cd116f175f35-buttonForNonMember {
display: block;
-webkit-margin-start: 0;
margin-inline-start: 0;
margin-top: 16px;
width: 100%;
}
@keyframes d5f3cd116f175f35-invite-button-resolving {
0% {
transform: translate3d(calc(var(--custom-invite-button-resolving-background-width) * -1), 0, 0);
}
50% {
transform: translateZ(0);
}
to {
transform: translate3d(calc(var(--custom-invite-button-resolving-background-width) * -1), 0, 0);
}
}
.d5f3cd116f175f35-resolvingWrapper {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: 16px;
overflow: hidden;
width: 100%;
}
.d5f3cd116f175f35-resolving {
flex: 1000 0 auto;
height: 50px;
-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='259' height='50' viewBox='6.122 5.864 259 50'%3E%3Cpath fill-rule='evenodd' d='M68.122 11.864h124a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3h-124a3 3 0 0 1-3-3v-14a3 3 0 0 1 3-3m0 24h194a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3h-194a3 3 0 0 1-3-3v-10a3 3 0 0 1 3-3m-42.77-30h11.54c6.687 0 9.112.696 11.556 2.003a13.63 13.63 0 0 1 5.67 5.67c1.31 2.447 2.004 4.87 2.004 11.557v11.54c0 6.687-.696 9.112-2.003 11.556a13.63 13.63 0 0 1-5.67 5.67c-2.447 1.31-4.87 2.004-11.557 2.004h-11.54c-6.687 0-9.112-.696-11.556-2.003a13.63 13.63 0 0 1-5.67-5.67c-1.31-2.447-2.004-4.87-2.004-11.557v-11.54c0-6.687.696-9.112 2.003-11.556a13.63 13.63 0 0 1 5.67-5.67c2.447-1.31 4.87-2.004 11.557-2.004'/%3E%3C/svg%3E");
mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='259' height='50' viewBox='6.122 5.864 259 50'%3E%3Cpath fill-rule='evenodd' d='M68.122 11.864h124a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3h-124a3 3 0 0 1-3-3v-14a3 3 0 0 1 3-3m0 24h194a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3h-194a3 3 0 0 1-3-3v-10a3 3 0 0 1 3-3m-42.77-30h11.54c6.687 0 9.112.696 11.556 2.003a13.63 13.63 0 0 1 5.67 5.67c1.31 2.447 2.004 4.87 2.004 11.557v11.54c0 6.687-.696 9.112-2.003 11.556a13.63 13.63 0 0 1-5.67 5.67c-2.447 1.31-4.87 2.004-11.557 2.004h-11.54c-6.687 0-9.112-.696-11.556-2.003a13.63 13.63 0 0 1-5.67-5.67c-1.31-2.447-2.004-4.87-2.004-11.557v-11.54c0-6.687.696-9.112 2.003-11.556a13.63 13.63 0 0 1 5.67-5.67c2.447-1.31 4.87-2.004 11.557-2.004'/%3E%3C/svg%3E");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
mask-type: luminance;
position: relative;
width: 259px;
}
.d5f3cd116f175f35-resolvingBackground {
animation: d5f3cd116f175f35-invite-button-resolving 4s ease-in-out infinite;
bottom: 0;
inset-inline-start: 0;
position: absolute;
top: 0;
width: calc(var(--custom-invite-button-resolving-background-width) * 2);
}
.d5f3cd116f175f35-resolvingFakeButton {
border-radius: 3px;
flex: 1 0 auto;
height: 38px;
-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66' height='38' viewBox='0 0 66 38'%3E%3Cpath d='M0 0h66v38H0z' style='fill:%23000;stroke:%23000'/%3E%3C/svg%3E");
mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66' height='38' viewBox='0 0 66 38'%3E%3Cpath d='M0 0h66v38H0z' style='fill:%23000;stroke:%23000'/%3E%3C/svg%3E");
mask-type: luminance;
min-width: 66px;
position: relative;
}
.theme-dark .background-opacity-low .d5f3cd116f175f35-wrapper {
background: hsl(var(--primary-630-hsl) / 0.3);
}
.theme-dark .background-opacity-low .d5f3cd116f175f35-header {
text-shadow:
0 0 1px var(--primary-700),
1px 1px 0 var(--primary-700);
}
.theme-dark .background-opacity-low .d5f3cd116f175f35-button {
opacity: 0.8;
}
.theme-dark .background-opacity-medium .d5f3cd116f175f35-wrapper {
background: hsl(var(--primary-630-hsl) / 0.5);
}
.theme-dark .background-opacity-medium .d5f3cd116f175f35-header {
text-shadow:
0 0 1px var(--primary-600),
1px 1px 0 var(--primary-600);
}
.theme-dark .background-opacity-medium .d5f3cd116f175f35-guildIcon {
opacity: 0.7;
}
.theme-dark .background-opacity-medium .d5f3cd116f175f35-button {
opacity: 0.9;
}
.theme-dark .background-opacity-high .d5f3cd116f175f35-wrapper {
background: hsl(var(--primary-630-hsl) / 0.6);
}
.theme-dark .overlay-unlocked .d5f3cd116f175f35-wrapper {
background-color: var(--background-base-lower);
}
.theme-dark .overlay-unlocked .d5f3cd116f175f35-header {
text-shadow: none;
}
.theme-dark .overlay-unlocked .d5f3cd116f175f35-button,
.theme-dark .overlay-unlocked .d5f3cd116f175f35-guildIcon {
opacity: 1;
}
.images-light .d5f3cd116f175f35-guildIconExpired {
background-image: url(/assets/eb4644cbe2f3e90f.svg);
}
.images-light .d5f3cd116f175f35-resolvingBackground {
background-image: linear-gradient(to right, var(--primary-100), var(--primary-200), var(--primary-100));
}
.images-dark .d5f3cd116f175f35-guildIconExpired {
background-image: url(/assets/e4a502bfc6589d65.svg);
}
.images-dark .d5f3cd116f175f35-resolvingBackground {
background-image: linear-gradient(to right, var(--primary-600), var(--primary-500), var(--primary-600));
}
._164c9b41af229e52-invalidBody {
align-items: center;
display: flex;
gap: 16px;
max-width: 100%;
}
._38db57f7851e6374-lineClamp2Plus {
white-space: pre-wrap;
}
._38db57f7851e6374-lineClamp1 {
white-space: nowrap;
}
._9cd44893360e390c-roleTag,
._9cd44893360e390c-roleTagContainer {
display: flex;
}
._9cd44893360e390c-roleTag {
align-items: center;
background: var(--interactive-background-hover);
border-radius: 4px;
padding: 8px;
}
._9cd44893360e390c-roleColor {
border-radius: 6px;
flex: none;
height: 12px;
width: 12px;
}
._79d38fa75120d990-productCard {
border-radius: 8px;
overflow: hidden;
position: relative;
}
._79d38fa75120d990-solidBackground {
background: var(--background-base-lower);
}
.theme-dark ._79d38fa75120d990-opaqueBackground {
background: rgba(48, 51, 56, 0.85);
}
.theme-light ._79d38fa75120d990-opaqueBackground {
background: var(--background-base-lower);
}
._79d38fa75120d990-productThumbnailContainer {
position: relative;
}
._79d38fa75120d990-productThumbnail {
background: #2b2c31;
object-fit: cover;
width: 100%;
}
._79d38fa75120d990-purchaseToUnlockBadge {
align-items: center;
background-color: rgba(43, 45, 49, 0.7);
border-radius: 30px;
color: var(--white);
display: flex;
gap: 6px;
inset-inline-start: 50%;
justify-content: center;
padding: 4px 12px;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
transition: background-color 0.2s ease-in-out;
white-space: nowrap;
}
._79d38fa75120d990-draftBadge {
bottom: 10px;
inset-inline-end: 8px;
position: absolute;
}
._79d38fa75120d990-productThumbnailContainer:hover ._79d38fa75120d990-purchaseToUnlockBadge {
background-color: rgba(43, 45, 49, 0.45);
}
._79d38fa75120d990-lockIcon {
height: 16px;
width: 16px;
}
._79d38fa75120d990-productName {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._79d38fa75120d990-productDetails {
align-content: flex-start;
border-bottom: 1px solid var(--border-subtle);
display: flex;
flex-direction: row;
flex-grow: 1;
padding: 16px 16px 0;
}
._79d38fa75120d990-productDetailContent {
display: flex;
flex: 1;
flex-direction: column;
gap: 4px;
-webkit-margin-end: 24px;
margin-inline-end: 24px;
overflow: hidden;
}
._79d38fa75120d990-purchaseDetails {
display: grid;
grid-template-columns: 1fr auto;
padding: 16px;
}
._79d38fa75120d990-productActionButton {
grid-area: 1/2/3/3;
}
._79d38fa75120d990-showMoreButton {
align-items: center;
color: var(--interactive-text-hover);
display: flex;
gap: 4px;
padding-top: 2px;
}
._79d38fa75120d990-arrowIcon {
margin-bottom: -2px;
}
._79d38fa75120d990-hasAction {
color: var(--text-link);
cursor: pointer;
}
._79d38fa75120d990-cardClickableContainer {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
._436c970b7c14b8ee-badge {
align-items: center;
border-radius: 4px;
color: var(--white);
display: flex;
gap: 6px;
justify-content: center;
padding: 4px 8px;
}
._436c970b7c14b8ee-badgeIcon {
height: 16px;
width: 16px;
}
._8d9f6a3c3c9a11ef-productCard {
position: relative;
}
._8d9f6a3c3c9a11ef-productCardClickable {
background: var(--background-base-lower);
border-radius: 8px;
cursor: pointer;
overflow: hidden;
}
._8d9f6a3c3c9a11ef-productThumbnail {
grid-area: 1/1/2/3;
height: 190px;
object-fit: cover;
width: 100%;
}
._8d9f6a3c3c9a11ef-productInfo {
align-self: start;
display: flex;
flex-direction: row;
padding: 16px;
}
._8d9f6a3c3c9a11ef-productInfoContent {
align-items: flex-start;
display: flex;
flex: 1;
flex-direction: column;
overflow: hidden;
}
._8d9f6a3c3c9a11ef-productName {
max-width: 100%;
-webkit-padding-end: 16px;
overflow: hidden;
padding-inline-end: 16px;
text-overflow: ellipsis;
white-space: nowrap;
}
._8d9f6a3c3c9a11ef-productDetails {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
._8d9f6a3c3c9a11ef-dotSeparator {
background-color: var(--text-muted);
border-radius: 50%;
flex-shrink: 0;
height: 4px;
width: 4px;
}
._8d9f6a3c3c9a11ef-productActionMenuButton {
cursor: pointer;
height: 24px;
width: 24px;
z-index: 100;
-webkit-margin-end: -8px;
margin-inline-end: -8px;
}
._8d9f6a3c3c9a11ef-productActionMenuButton ._8d9f6a3c3c9a11ef-productActionMenuIcon {
color: var(--interactive-text-default);
}
._8d9f6a3c3c9a11ef-productActionMenuButton:hover ._8d9f6a3c3c9a11ef-productActionMenuIcon {
color: var(--interactive-text-hover);
}
._8d9f6a3c3c9a11ef-menuContainer {
margin-top: 6px;
}
._8d9f6a3c3c9a11ef-disabled {
cursor: not-allowed;
opacity: 0.5;
}
._652b4c114f1f86fa-container {
background-position: 50%;
background-size: cover;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
height: 164px;
margin: -17px -17px 16px;
}
._535f52a610a3ebc1-descriptionText {
color: var(--text-default);
font-family: var(--font-primary);
font-size: 14px;
line-height: 18px;
margin-top: 4px;
}
._535f52a610a3ebc1-truncate {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
max-height: 72px;
}
._290218226e53085c-eventStatusContainer {
align-items: center;
display: flex;
flex-direction: row;
}
._290218226e53085c-isRecurring {
align-items: flex-start;
}
._290218226e53085c-eventStatusGreen {
color: var(--text-feedback-positive);
}
._290218226e53085c-eventStatusBrand {
color: var(--text-brand);
}
._290218226e53085c-eventStatusLabel {
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
._290218226e53085c-liveEventEndTime {
display: inline-block;
}
._290218226e53085c-newBadge {
align-items: center;
background-color: var(--brand-260);
border-radius: 12px;
display: inline-flex;
flex-shrink: 0;
height: 20px;
justify-content: center;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
padding: 0 6px;
vertical-align: text-top;
}
._290218226e53085c-newBadgeText {
color: var(--brand-560);
text-transform: uppercase;
}
.b5010be6beaa8120-container {
display: flex;
flex-direction: column;
}
.b5010be6beaa8120-eventName {
max-width: 534px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.b5010be6beaa8120-eventName:hover {
text-decoration: underline;
}
.b5010be6beaa8120-description {
margin-top: 8px;
}
.b5010be6beaa8120-descriptionWithThumbnail {
max-width: 288px;
}
.b5010be6beaa8120-spacer {
-webkit-margin-start: auto;
margin-inline-start: auto;
}
.b5010be6beaa8120-rsvpCount {
align-items: center;
background-color: var(--background-base-lowest);
border-radius: 12px;
display: flex;
flex-shrink: 0;
height: 20px;
margin-bottom: auto;
padding-inline: 8px;
}
.b5010be6beaa8120-rsvpIcon {
-webkit-margin-end: 4px;
color: var(--text-default);
margin-inline-end: 4px;
}
.b5010be6beaa8120-creator {
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
.b5010be6beaa8120-inline {
align-items: center;
display: flex;
}
.b5010be6beaa8120-eventInfoStatusContainer {
margin-bottom: 12px;
}
.b5010be6beaa8120-statusContainer,
.b5010be6beaa8120-withThumbnail {
display: flex;
flex-direction: row;
}
.b5010be6beaa8120-withThumbnail {
align-items: flex-start;
justify-content: space-between;
}
.b5010be6beaa8120-thumbnailContainer {
align-items: center;
height: auto;
}
.b5010be6beaa8120-thumbnail {
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
height: 120px;
margin-block: 0;
margin-top: -16px;
margin-inline: -16px;
margin-bottom: 16px;
width: calc(100% + 32px);
}
.enable-forced-colors .b5010be6beaa8120-eventName {
color: ButtonText;
text-decoration: underline;
}
.d650db7e7960db60-responseOptions {
margin-top: 8px;
}
.d650db7e7960db60-confirmButton {
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
.da5e8d057abd4424-inviteDetailsContainer {
align-items: center;
display: flex;
flex: 1000 0 auto;
gap: 16px;
max-width: 100%;
min-width: 0;
}
.da5e8d057abd4424-clickable {
cursor: pointer;
}
.da5e8d057abd4424-clickable:hover {
background-color: var(--background-secondary-alt);
}
.da5e8d057abd4424-guildChannelInfoContainer {
align-items: center;
display: flex;
gap: 4px;
min-width: 0;
}
.da5e8d057abd4424-verticalContainer {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
.da5e8d057abd4424-footerContainer {
align-items: center;
display: flex;
flex-flow: row wrap;
gap: 16px;
margin-top: 12px;
overflow: hidden;
}
.da5e8d057abd4424-eventDescription {
font-size: 14px;
line-height: 18px;
}
.da5e8d057abd4424-channelDescription {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.da5e8d057abd4424-guildBadge {
flex-shrink: 0;
}
.da5e8d057abd4424-guildName {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.da5e8d057abd4424-guildName,
.da5e8d057abd4424-guildNameClickable {
min-width: 0;
}
.da5e8d057abd4424-guildNameLinkable {
cursor: pointer;
}
.da5e8d057abd4424-guildNameLinkable:hover {
text-decoration: underline;
}
.da5e8d057abd4424-channelIcon {
flex-shrink: 0;
}
.da5e8d057abd4424-channelInfoContainer {
align-items: center;
color: var(--text-default);
display: flex;
flex-direction: row;
margin-top: 4px;
}
.da5e8d057abd4424-channelLocationLink {
color: var(--text-default);
cursor: pointer;
display: flex;
gap: 4px;
min-width: 0;
}
.da5e8d057abd4424-channelLocationLink:hover {
text-decoration: underline;
}
.da5e8d057abd4424-banner {
border-radius: 4px 4px 0 0;
margin: -16px -16px 16px;
}
._33e19bbc92d921c7-icon {
color: var(--interactive-text-default);
}
.ae254414b3cf28de-separator {
background-color: var(--border-subtle);
height: 1px;
margin-bottom: 16px;
margin-top: 16px;
}
.ae254414b3cf28de-infoTitle {
align-items: center;
display: flex;
overflow: hidden;
}
.ae254414b3cf28de-infoBadge {
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
.ae254414b3cf28de-headerLine {
align-items: center;
display: flex;
flex: 1000 0 auto;
gap: 16px;
max-width: 100%;
}
.ae254414b3cf28de-tooltipContainer {
-webkit-margin-start: 4px;
display: inline-block;
line-height: 0;
margin-inline-start: 4px;
vertical-align: sub;
}
.ae254414b3cf28de-infoIcon {
height: 16px;
width: 16px;
}
.ae254414b3cf28de-buttonContainer {
flex: 1;
}
._96554260c48a84e0-container {
align-items: center;
background: var(--background-base-lowest);
border-radius: 12px;
display: inline-flex;
gap: 4px;
padding: 2px 8px;
}
._956c6ec204e4014c-containerScrollGradient {
background: linear-gradient(0deg, var(--background-base-low) 0, transparent 100%);
bottom: 52px;
height: 52px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
transition: opacity 0.12s ease-in-out;
width: 100%;
}
._956c6ec204e4014c-containerScrollGradient[data-shown="true"] {
opacity: 1;
}
.f4d1ffc892899fc2-text {
display: flex;
gap: 4px;
}
._2465487702f06a78-footer {
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
position: relative;
}
._2465487702f06a78-footerButtons {
display: flex;
gap: 10px;
}
._2465487702f06a78-appIcon {
--custom-size: 24px;
border-radius: var(--custom-size);
height: var(--custom-size);
margin-top: var(--custom-modal-padding-md);
width: var(--custom-size);
-webkit-margin-start: var(--space-16);
margin-inline-start: var(--space-16);
object-fit: cover;
}
._2465487702f06a78-unavailableBody {
margin-bottom: 32px;
margin-top: 8px;
}
._8823a89839c9e7ef-container {
background: var(--background-base-lower);
box-sizing: border-box;
padding-bottom: 24px;
position: relative;
}
._8823a89839c9e7ef-header {
align-items: center;
background-color: var(--background-base-lowest);
display: flex;
height: 260px;
justify-content: center;
margin-bottom: 24px;
overflow: hidden;
position: relative;
}
._8823a89839c9e7ef-headerBackground {
--custom-overlay-color: hsl(var(--primary-730-hsl)/0.9);
background-image: linear-gradient(var(--custom-overlay-color), var(--custom-overlay-color)), var(--custom-background-url);
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
filter: blur(4px);
height: 120%;
left: 50%;
position: absolute;
top: 50%;
transform: translate3d(-50%, -50%, 0);
width: 120%;
}
.theme-light ._8823a89839c9e7ef-headerBackground {
--custom-overlay-color: hsl(var(--white-500-hsl)/0.3);
}
._8823a89839c9e7ef-headerImage {
align-items: center;
border-radius: 8px;
display: flex;
height: 100%;
justify-content: center;
max-height: 85%;
max-width: 59.5%;
overflow: hidden;
width: 100%;
z-index: 1;
}
._8823a89839c9e7ef-headerImage > img {
border-radius: 8px;
box-shadow: var(--shadow-high);
max-height: 100%;
max-width: 100%;
}
._8823a89839c9e7ef-scroller {
height: 100%;
scrollbar-width: thin;
}
._8823a89839c9e7ef-scrollContent {
display: flex;
flex-direction: column;
padding-bottom: 32px;
}
._8823a89839c9e7ef-content {
padding: 0 16px;
}
._8823a89839c9e7ef-details {
gap: 8px;
}
._8823a89839c9e7ef-benefits,
._8823a89839c9e7ef-details {
display: flex;
flex-direction: column;
}
._8823a89839c9e7ef-benefits {
align-items: flex-start;
border-top: 1px solid var(--interactive-background-selected);
gap: 16px;
margin-top: 16px;
padding-top: 16px;
}
._8823a89839c9e7ef-description {
white-space: break-spaces;
}
._57f777e233da01ff-content {
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
margin: auto;
min-width: 32px;
}
._57f777e233da01ff-loading {
inset-inline: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
._57f777e233da01ff-textEmoji {
-webkit-margin-end: 4px;
flex-shrink: 0;
margin-inline-end: 4px;
}
._57f777e233da01ff-premium {
transition: width 0.3s;
}
._57f777e233da01ff-shopIcon {
align-items: center;
display: flex;
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
._57f777e233da01ff-launchIcon {
-webkit-margin-start: 8px;
flex-shrink: 0;
margin-inline-start: 8px;
}
._57f777e233da01ff-hidden {
visibility: hidden;
}
._57f777e233da01ff-label {
flex-shrink: 1;
overflow: hidden;
text-overflow: ellipsis;
}
._81a061abf6bb109d-container {
align-items: center;
display: flex;
width: 100%;
}
._81a061abf6bb109d-select {
max-width: 100%;
width: 400px;
}
._81a061abf6bb109d-inModal {
max-width: 100%;
width: 100%;
}
._81a061abf6bb109d-iconContainer {
align-items: center;
display: flex;
}
._81a061abf6bb109d-hidden {
opacity: 0;
width: 0;
}
._28e94c6a8a731ead-container {
align-items: center;
display: flex;
width: 100%;
}
._28e94c6a8a731ead-select {
max-width: 100%;
width: 400px;
}
._28e94c6a8a731ead-inModal {
max-width: 100%;
width: 100%;
}
._28e94c6a8a731ead-selectOption {
padding: 8px;
}
._28e94c6a8a731ead-disabled {
opacity: 0.6;
}
._28e94c6a8a731ead-emoji,
._28e94c6a8a731ead-smallEmoji {
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
._28e94c6a8a731ead-smallEmoji {
height: 16px;
width: 16px;
}
._28e94c6a8a731ead-offset {
-webkit-margin-start: 27px;
margin-inline-start: 27px;
}
._28e94c6a8a731ead-optionTag {
align-items: center;
background: var(--background-base-low);
border-radius: 3px;
box-sizing: border-box;
color: var(--interactive-text-active);
display: flex;
flex-shrink: 0;
max-width: 230px;
padding: 6px 8px;
}
._28e94c6a8a731ead-labelContainer {
font-size: 14px;
line-height: 18px;
overflow: hidden;
}
._28e94c6a8a731ead-label {
color: var(--text-strong);
margin-bottom: 4px;
}
._28e94c6a8a731ead-description {
color: var(--interactive-text-default);
}
._28e94c6a8a731ead-label,
._28e94c6a8a731ead-singleValueLabel,
._28e94c6a8a731ead-tag {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._28e94c6a8a731ead-tag {
align-items: center;
display: flex;
height: 20px;
}
._28e94c6a8a731ead-option {
font-size: 16px;
}
._28e94c6a8a731ead-option,
._28e94c6a8a731ead-value {
align-items: center;
display: flex;
overflow: hidden;
}
._28e94c6a8a731ead-value {
flex-wrap: wrap;
gap: 4px;
}
._28e94c6a8a731ead-singleValue {
font-size: 16px;
gap: 0;
}
._28e94c6a8a731ead-singleValueLabel {
flex: 1;
}
._28e94c6a8a731ead-error {
align-items: center;
display: flex;
margin-top: 8px;
}
._28e94c6a8a731ead-errorIcon {
color: var(--status-danger);
display: block;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
._78c9164b38c3b0e8-discriminator,
._78c9164b38c3b0e8-username {
color: var(--text-muted);
}
._78c9164b38c3b0e8-tag {
align-items: center;
}
._78c9164b38c3b0e8-tag ._78c9164b38c3b0e8-bot {
margin-top: 0;
}
._78c9164b38c3b0e8-label {
align-items: center;
display: flex;
flex-direction: row;
gap: 4px;
min-width: 100%;
overflow: hidden;
width: 0;
}
._78c9164b38c3b0e8-labelText {
display: flex;
line-height: 1.2;
white-space: nowrap;
}
._78c9164b38c3b0e8-roleCountContainer {
align-items: center;
display: flex;
}
._78c9164b38c3b0e8-roleCountIcon,
._78c9164b38c3b0e8-roleCountText {
color: var(--text-muted);
}
._78c9164b38c3b0e8-roleCountText {
margin: 0 4px;
}
.e21ed7b7001e2203-container {
background-color: var(--input-background-default);
border: 1px solid var(--input-border-default);
border-radius: var(--radius-sm);
transition: background-color 0.1s ease-in-out;
}
.e21ed7b7001e2203-dropping {
background-color: var(--background-surface-highest);
}
.e21ed7b7001e2203-error {
border-color: var(--border-feedback-critical);
}
.e21ed7b7001e2203-mainWrapper {
margin: var(--space-xl) var(--space-sm);
position: relative;
}
.e21ed7b7001e2203-mainBody {
align-items: center;
display: flex;
flex-direction: column;
gap: var(--space-xs);
justify-content: center;
}
.e21ed7b7001e2203-hidden {
visibility: hidden;
}
.e21ed7b7001e2203-absolutelyPositioned {
inset: 0;
position: absolute;
}
.e21ed7b7001e2203-files {
display: grid;
gap: var(--space-xs);
grid-template-columns: 1fr 1fr;
margin: var(--space-sm);
}
.e21ed7b7001e2203-file {
align-items: center;
background-color: var(--background-surface-higher);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
display: flex;
gap: var(--space-sm);
padding: var(--space-xs);
position: relative;
}
.e21ed7b7001e2203-file:focus-within .e21ed7b7001e2203-miniPopover,
.e21ed7b7001e2203-file:hover .e21ed7b7001e2203-miniPopover {
opacity: 1;
}
.e21ed7b7001e2203-singleFileInput {
background-color: var(--background-surface-highest);
}
.e21ed7b7001e2203-filename {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.e21ed7b7001e2203-miniPopover {
background-color: var(--background-surface-high);
border-radius: var(--radius-sm);
height: unset;
inset-inline-end: -6px;
opacity: 0;
outline: 1px solid var(--border-subtle);
position: absolute;
top: -6px;
transition: opacity 0.1s ease-in-out;
}
.e21ed7b7001e2203-action {
height: unset;
min-width: unset;
padding: var(--space-6);
}
.e21ed7b7001e2203-action:active {
padding-bottom: 5px;
padding-top: 7px;
}
.e21ed7b7001e2203-actionIcon {
height: unset;
width: unset;
}
.e21ed7b7001e2203-fileInput {
display: none;
}
._1b11bd49fe2d59c9-formItem {
width: 100%;
}
._322969892fc774ff-canvas {
height: 100%;
inset-inline-end: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
._322969892fc774ff-hidden {
display: none;
}
._5a6cf5f01ba7d2b1-outerButton {
cursor: pointer;
transition: background-color var(--custom-checkpoint-transition-duration) ease;
}
._5a6cf5f01ba7d2b1-innerButton {
align-items: center;
background-color: var(--black);
border: 1px solid;
display: flex;
font-size: 20px;
font-weight: 700;
justify-content: center;
line-height: 24px;
padding: 16px 40px;
transform: translate3d(-4px, -4px, 0);
transition: border-color var(--custom-checkpoint-transition-duration) ease;
}
._5a6cf5f01ba7d2b1-active ._5a6cf5f01ba7d2b1-innerButton,
._5a6cf5f01ba7d2b1-innerButton:active {
transform: translateZ(0);
}
.full-motion ._5a6cf5f01ba7d2b1-innerButton {
transition:
transform 0.2s ease,
border-color var(--custom-checkpoint-transition-duration) ease;
}
._5a6cf5f01ba7d2b1-disabled {
cursor: default;
opacity: 0.6;
pointer-events: none;
}
._33f0bbfef8a68d86-wrapper {
height: 100%;
width: 100%;
}
._33f0bbfef8a68d86-introAnimation {
overflow: hidden;
width: 100%;
}
._33f0bbfef8a68d86-introAnimation,
._33f0bbfef8a68d86-introInner {
inset-inline-start: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
._33f0bbfef8a68d86-introInner {
height: 100vh;
width: 100vw;
}
._33f0bbfef8a68d86-blur {
background-image: linear-gradient(transparent, currentColor 10%, currentColor 90%, transparent);
filter: blur(40px);
}
._33f0bbfef8a68d86-spinner {
height: 100%;
width: 100%;
}
._466c1282685a8c9e-container {
position: relative;
}
._466c1282685a8c9e-sliderContainer {
border: 1px solid;
inset-inline-end: 40px;
padding: 8px;
position: absolute;
top: 0;
transition: border-color var(--custom-checkpoint-transition-duration) ease;
width: 100px;
-webkit-border-end: 0;
border-inline-end: 0;
}
._466c1282685a8c9e-grabber {
background-color: #fff;
height: 2px;
width: 2px;
}
._466c1282685a8c9e-fill {
transition: background-color var(--custom-checkpoint-transition-duration) ease;
}
._233d8aef690d6fa0-container {
background-color: var(--background-base-lowest);
height: 100%;
width: 100%;
--custom-checkpoint-transition-duration: 0.5s;
}
._233d8aef690d6fa0-header {
top: var(--space-32);
inset-inline: 0;
justify-content: space-between;
padding: var(--space-32);
}
._233d8aef690d6fa0-header,
._233d8aef690d6fa0-logo {
align-items: center;
display: flex;
position: absolute;
}
._233d8aef690d6fa0-logo {
gap: 8px;
inset-inline-start: var(--space-40);
}
._233d8aef690d6fa0-logoText {
text-transform: uppercase;
transition: color var(--custom-checkpoint-transition-duration) ease;
}
._233d8aef690d6fa0-stepIndicator {
inset-inline-start: 50%;
position: absolute;
transform: translateX(-50%);
}
._233d8aef690d6fa0-actions {
display: flex;
gap: var(--space-8);
inset-inline-end: var(--space-40);
position: absolute;
}
._233d8aef690d6fa0-closeButton {
align-items: center;
border: 1px solid;
cursor: pointer;
display: flex;
justify-content: center;
min-width: 24px;
padding: 8px;
transition:
border-color var(--custom-checkpoint-transition-duration) ease,
color var(--custom-checkpoint-transition-duration) ease;
}
._233d8aef690d6fa0-nextButton {
bottom: var(--space-40);
inset-inline-end: var(--space-24);
position: absolute;
transform: translateX(-50%);
}
._233d8aef690d6fa0-nextButtonContent {
border: 1px solid;
}
._233d8aef690d6fa0-backButton,
._233d8aef690d6fa0-nextButtonContent {
cursor: pointer;
padding: var(--space-12);
transition: border-color var(--custom-checkpoint-transition-duration) ease;
}
._233d8aef690d6fa0-backButton {
bottom: var(--space-40);
inset-inline-start: var(--space-32);
position: absolute;
}
._233d8aef690d6fa0-iconColor {
transition: fill var(--custom-checkpoint-transition-duration) ease;
}
._233d8aef690d6fa0-shareButton {
bottom: var(--space-40);
inset-inline-end: var(--space-48);
position: absolute;
}
._233d8aef690d6fa0-buttonCTA {
font-size: 18px;
}
@media (max-width: 920px) {
._233d8aef690d6fa0-logoText {
display: none;
}
}
._31f36d4c0a28f917-eyebrow {
font-size: 18px;
font-weight: 800;
}
._31f36d4c0a28f917-title {
align-items: center;
display: flex;
gap: var(--space-12);
}
._31f36d4c0a28f917-titleIcon {
flex-shrink: 0;
}
._31f36d4c0a28f917-iconColor {
transition: fill var(--custom-checkpoint-transition-duration) ease;
}
._31f36d4c0a28f917-numeric {
font-family: Munro, Arial, sans-serif;
}
._31f36d4c0a28f917-clickable {
cursor: pointer;
}
.d876419a947494cc-container {
display: flex;
gap: 24px;
}
.d876419a947494cc-unknownIcon {
border: 2px solid var(--icon-muted);
border-radius: var(--radius-round);
height: 8px;
margin: 6px;
transition: border-color var(--custom-checkpoint-transition-duration) ease;
width: 8px;
}
.d876419a947494cc-clickable {
cursor: pointer;
}
.d876419a947494cc-stepColor {
transition: fill var(--custom-checkpoint-transition-duration) ease;
}
.f0ed56b8a90c366f-slide {
height: 100%;
position: absolute;
top: 0;
width: 100%;
will-change: transform, opacity;
}
.df527309b1cfb09e-container {
height: 48px;
width: 221px;
}
._0526f1a5ebf39868-container {
box-sizing: border-box;
height: 100vh;
position: relative;
transition: color var(--custom-checkpoint-transition-duration) ease;
width: 100vw;
}
._0526f1a5ebf39868-containerPadding {
padding: var(--space-128);
}
._0526f1a5ebf39868-containerCentered {
align-items: center;
display: flex;
justify-content: center;
}
._0526f1a5ebf39868-containerVertical {
flex-direction: column;
}
._9d6ab74a2cc1e3c1-animation {
height: 200px;
width: 100%;
}
.b7ff7d7c6a8c63f4-visibleCanvas {
min-width: 256px;
width: 40%;
}
.b7ff7d7c6a8c63f4-invisible {
opacity: 0;
}
.b7ff7d7c6a8c63f4-hidden {
display: none;
}
.ae9703bae4894004-container {
align-items: center;
display: flex;
gap: var(--space-80);
height: 100%;
justify-self: center;
max-width: 1400px;
width: 100%;
}
.ae9703bae4894004-emojis {
display: flex;
flex-wrap: wrap;
gap: var(--space-16);
margin-bottom: var(--space-32);
}
.ae9703bae4894004-emojiContainer {
align-items: center;
border: 1px solid;
display: flex;
gap: 10px;
padding-inline: var(--space-16);
padding-bottom: var(--space-8);
padding-top: var(--space-8);
}
.ae9703bae4894004-emoji {
height: 32px;
width: 32px;
}
.ae9703bae4894004-emptySubtitle {
margin-top: var(--space-16);
}
.ae9703bae4894004-emptySubtitle,
.ae9703bae4894004-subtitle {
margin-bottom: var(--space-16);
}
.ae9703bae4894004-subtitle {
margin-top: var(--space-32);
}
.ae9703bae4894004-content {
flex-basis: 50%;
}
.dc06fddf3be65018-container {
display: flex;
flex-direction: row;
}
.dc06fddf3be65018-content {
text-transform: uppercase;
}
.dc06fddf3be65018-cardSection,
.dc06fddf3be65018-content {
align-items: center;
display: flex;
flex-direction: column;
}
.dc06fddf3be65018-cardSection {
box-sizing: border-box;
flex-grow: 1;
flex-shrink: 0;
justify-content: center;
padding-bottom: var(--space-128);
padding-top: var(--space-128);
z-index: 1;
}
.dc06fddf3be65018-cardAnimation {
aspect-ratio: 1814/1164;
max-height: 80%;
pointer-events: none;
position: relative;
}
.dc06fddf3be65018-contentSection {
display: flex;
flex: 1;
height: 100%;
position: relative;
transition: min-width 0.3s ease;
}
.dc06fddf3be65018-centerContent {
align-items: center;
}
.dc06fddf3be65018-centerContent,
.dc06fddf3be65018-contentSectionInner {
display: flex;
height: 100%;
justify-content: center;
}
.dc06fddf3be65018-contentSectionInner {
box-sizing: border-box;
flex-direction: column;
padding: var(--space-128);
}
.dc06fddf3be65018-contentSectionInnerClaim {
align-items: center;
}
.dc06fddf3be65018-contentSectionClaim {
min-width: 50%;
overflow: hidden;
}
.dc06fddf3be65018-claimSubtitle {
margin-bottom: var(--space-40);
margin-top: var(--space-8);
}
.dc06fddf3be65018-claimButton {
margin-bottom: var(--space-8);
margin-top: var(--space-40);
}
.dc06fddf3be65018-contentSectionSummary {
min-width: 70%;
}
.dc06fddf3be65018-display {
font-size: 6vw;
-webkit-hyphens: auto;
hyphens: auto;
overflow-wrap: break-word;
text-transform: uppercase;
}
.dc06fddf3be65018-buttonCTA {
font-size: 18px;
}
.dc06fddf3be65018-stats {
display: grid;
gap: var(--space-32);
grid-template-columns: 1fr 1fr;
margin-bottom: var(--space-32);
margin-top: var(--space-32);
}
.dc06fddf3be65018-statTitle {
margin-bottom: var(--space-4);
}
.dc06fddf3be65018-statIcon {
border-radius: var(--radius-none);
height: 32px;
margin-top: var(--space-4);
width: 32px;
}
._744778f417b4a710-container {
display: flex;
justify-content: center;
position: relative;
}
._744778f417b4a710-animatedSlides,
._744778f417b4a710-container {
height: 100%;
width: 100%;
}
._744778f417b4a710-animatedSlide,
._744778f417b4a710-content {
align-items: center;
display: flex;
justify-content: center;
}
._744778f417b4a710-content {
flex-direction: column;
height: 100%;
text-align: center;
width: 50%;
}
._744778f417b4a710-rive {
bottom: 0;
inset-inline-end: 0;
inset-inline-start: 0;
pointer-events: none;
position: absolute;
top: 80px;
}
._744778f417b4a710-display {
font-size: 6vw;
text-transform: uppercase;
}
._744778f417b4a710-subtitle {
margin-bottom: var(--space-32);
margin-top: var(--space-32);
}
._744778f417b4a710-stats {
align-items: center;
display: flex;
gap: var(--space-64);
}
._744778f417b4a710-inputWrapper {
background-color: #000;
border: 1px solid;
margin-top: var(--space-32);
width: 100%;
z-index: 100;
}
._744778f417b4a710-inputCTA {
color: #000;
font-family: var(--font-code);
padding: var(--space-8) var(--space-12);
text-align: start;
text-transform: uppercase;
transition: background-color var(--custom-checkpoint-transition-duration) ease;
}
._744778f417b4a710-input {
border: none;
box-sizing: border-box;
font-size: 16px;
font-weight: 100;
max-height: 600px;
padding-inline: var(--space-12);
resize: none;
scrollbar-width: thin;
transition:
color var(--custom-checkpoint-transition-duration) ease,
scrollbar-color var(--custom-checkpoint-transition-duration) ease;
width: 100%;
}
._744778f417b4a710-actions,
._744778f417b4a710-input {
background-color: #000;
margin-top: var(--space-12);
}
._744778f417b4a710-actions {
align-items: center;
display: flex;
gap: var(--space-12);
justify-content: flex-end;
padding-bottom: var(--space-12);
-webkit-padding-end: var(--space-12);
padding-inline-end: var(--space-12);
}
._744778f417b4a710-disabled {
cursor: not-allowed;
opacity: 0.5;
}
._90f2b70e794de809-container {
position: relative;
}
._90f2b70e794de809-outerBorder {
-webkit-border-end: 1px solid;
border-bottom: 1px solid;
border-inline-end: 1px solid;
bottom: -10px;
-webkit-clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%);
clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%);
inset-inline-end: -10px;
inset-inline-start: 0;
position: absolute;
top: 0;
transition: border-color var(--custom-checkpoint-transition-duration) ease;
}
._90f2b70e794de809-outerBorderAngle {
position: absolute;
width: 1px;
}
._90f2b70e794de809-outerBorderAngleTopRight {
height: 12px;
inset-inline-end: -5px;
top: -2px;
transform: rotate(-52deg);
}
._90f2b70e794de809-outerBorderAngleBottomLeft,
._90f2b70e794de809-outerBorderAngleTopRight {
transition: background-color var(--custom-checkpoint-transition-duration) ease;
}
._90f2b70e794de809-outerBorderAngleBottomLeft {
bottom: -11px;
height: 13px;
inset-inline-start: 4px;
transform: rotate(-40deg);
}
._90f2b70e794de809-outerBorderAngleBottomRight {
bottom: -12px;
height: 14px;
inset-inline-end: -5px;
transform: rotate(-43deg);
transition: background-color var(--custom-checkpoint-transition-duration) ease;
}
._90f2b70e794de809-innerBorder {
border: 1px solid;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 0 100%);
transition: border-color var(--custom-checkpoint-transition-duration) ease;
}
._90f2b70e794de809-containerClipped {
}
._90f2b70e794de809-containerClipped ._90f2b70e794de809-outerBorder {
-webkit-clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 8px 100%);
clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 8px 100%);
}
._90f2b70e794de809-containerClipped ._90f2b70e794de809-innerBorder {
-webkit-clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}
._90f2b70e794de809-containerClipped ._90f2b70e794de809-outerBorderAngleTopRight {
height: 20px;
top: 14px;
transform: rotate(-32deg);
}
._55d8e38b297669db-container {
align-items: unset;
justify-self: center;
max-width: 1336px;
width: 100%;
}
._55d8e38b297669db-header {
display: flex;
gap: var(--space-80);
justify-content: space-between;
}
._55d8e38b297669db-display {
font-size: 100px;
text-transform: uppercase;
word-wrap: break-word;
max-width: 70%;
white-space: pre-line;
}
@media (max-width: 1300px) {
._55d8e38b297669db-display {
font-size: 60px;
}
}
._55d8e38b297669db-subtitle {
margin-bottom: var(--space-32);
}
._55d8e38b297669db-inline {
display: inline;
}
._55d8e38b297669db-games {
align-items: baseline;
display: flex;
gap: var(--space-24);
justify-content: center;
margin-top: var(--space-48);
}
._55d8e38b297669db-gameContainer {
position: relative;
width: 17%;
}
._55d8e38b297669db-largerGameContainer {
position: relative;
width: 20%;
}
._55d8e38b297669db-largerGameContainer ._55d8e38b297669db-gameArt {
max-width: 220px;
width: 100%;
}
._55d8e38b297669db-unknownGameIcon {
height: 40%;
position: absolute;
width: 40%;
}
._55d8e38b297669db-gameArt {
align-items: center;
aspect-ratio: 3/4;
background-color: #000;
box-sizing: border-box;
display: flex;
justify-content: center;
max-width: 190px;
object-fit: cover;
width: 100%;
}
._55d8e38b297669db-artContainer {
position: relative;
}
._55d8e38b297669db-rank {
bottom: 0;
-webkit-clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
color: #000;
inset-inline-start: 0;
padding-inline: var(--space-12);
padding-bottom: var(--space-4);
padding-top: var(--space-4);
position: absolute;
}
._55d8e38b297669db-name {
font-size: 18px;
margin-top: var(--space-24);
}
._55d8e38b297669db-sessions {
font-family: var(--font-code);
text-transform: uppercase;
}
.a217faee822ca23e-container {
display: flex;
flex-direction: column;
max-width: 1080px;
width: 100%;
}
.a217faee822ca23e-header {
display: flex;
gap: var(--space-80);
justify-content: space-between;
}
.a217faee822ca23e-display {
font-size: 100px;
text-transform: uppercase;
word-wrap: break-word;
max-width: 70%;
white-space: pre-line;
}
@media (max-width: 1300px) {
.a217faee822ca23e-display {
font-size: 60px;
}
}
.a217faee822ca23e-subtitle {
margin-bottom: var(--space-32);
}
.a217faee822ca23e-guilds {
display: flex;
gap: var(--space-32);
}
.a217faee822ca23e-guildContainer {
flex: 1;
position: relative;
}
.a217faee822ca23e-guildBorder {
padding: var(--space-32);
}
.a217faee822ca23e-topGuildBorder {
display: flex;
justify-content: space-between;
}
.a217faee822ca23e-topGuild {
margin-bottom: var(--space-32);
margin-top: var(--space-80);
}
.a217faee822ca23e-guildIcon {
border-radius: var(--radius-md);
flex-shrink: 0;
}
.a217faee822ca23e-guildInfo {
align-items: center;
display: flex;
gap: var(--space-16);
}
.a217faee822ca23e-guildName {
display: -webkit-box;
-webkit-box-orient: vertical;
line-clamp: 2;
-webkit-line-clamp: 2;
overflow: hidden;
}
.a217faee822ca23e-guildStats {
align-items: center;
display: flex;
gap: var(--space-32);
-webkit-margin-end: var(--space-32);
margin-inline-end: var(--space-32);
}
.a217faee822ca23e-rank {
color: #000;
inset-inline-end: 0;
padding-inline: var(--space-12);
padding-bottom: var(--space-4);
padding-top: var(--space-4);
position: absolute;
top: 0;
}
.eb06116eae4ac583-wrapper {
position: relative;
}
.eb06116eae4ac583-video {
height: auto;
opacity: 0;
width: 100%;
}
.eb06116eae4ac583-entryVideo,
.eb06116eae4ac583-loopingVideo {
}
.eb06116eae4ac583-loopingVideo {
inset-inline-start: 0;
opacity: 0;
position: absolute;
top: 0;
}
._31e8125b2f0a1eb9-text {
color: #000;
display: inline;
padding-inline: 4px;
transition: background-color var(--custom-checkpoint-transition-duration) ease;
}
._92eda6c2528ee4b4-container {
align-items: center;
display: flex;
gap: var(--space-80);
justify-self: center;
max-width: 1400px;
}
._92eda6c2528ee4b4-video {
max-width: 400px;
min-width: 40%;
width: 40%;
}
._92eda6c2528ee4b4-subtitle {
margin-bottom: var(--space-32);
margin-top: var(--space-32);
}
._185a8c332958fcc0-container {
align-items: center;
display: flex;
gap: var(--space-80);
justify-self: center;
max-width: 1400px;
}
._185a8c332958fcc0-video {
max-width: 400px;
min-width: 40%;
width: 40%;
}
._185a8c332958fcc0-learnMore {
cursor: pointer;
display: inline;
}
._185a8c332958fcc0-link {
display: inline;
text-decoration: underline;
}
._185a8c332958fcc0-orbsIcon {
-webkit-margin-end: var(--space-8);
margin-inline-end: var(--space-8);
}
._185a8c332958fcc0-emptyState {
margin-bottom: var(--space-16);
}
._185a8c332958fcc0-subtitle {
margin-bottom: var(--space-32);
}
._200159af4e5dc30e-hidden {
display: none;
}
._200159af4e5dc30e-content {
align-items: center;
display: flex;
flex-direction: column;
gap: var(--space-32);
inset-inline-start: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
._200159af4e5dc30e-subtitle {
text-align: center;
}
.c1b3dc805953693d-container {
position: relative;
}
.c1b3dc805953693d-hiddenText {
opacity: 0;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.c1b3dc805953693d-animatedText {
height: 100%;
inset-inline-start: 0;
position: absolute;
top: 0;
width: 100%;
}
.cfb73c29a98c527d-content {
--custom-transition-timing-function: cubic-bezier(0.4, 0, 0, 1);
--custom-transition-duration: 0.5s;
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--space-192) 0;
}
.cfb73c29a98c527d-logoVideo {
height: 80px;
inset-inline-start: 40px;
position: absolute;
top: 40px;
width: 80px;
}
.cfb73c29a98c527d-introVideo {
height: 100%;
inset-inline-start: 0;
position: absolute;
top: 0;
transition: opacity var(--custom-transition-duration) var(--custom-transition-timing-function);
width: 100%;
}
.cfb73c29a98c527d-introVideoHidden {
opacity: 0;
transform: translate3d(0, -800px, 0);
}
.cfb73c29a98c527d-animation {
height: 360px;
min-height: 360px;
width: 100%;
}
.cfb73c29a98c527d-knickKnacks {
margin-bottom: 80px;
}
.cfb73c29a98c527d-iconColor {
transition:
fill var(--custom-checkpoint-transition-duration) ease,
stroke var(--custom-checkpoint-transition-duration) ease;
}
.cfb73c29a98c527d-startButtonContent {
gap: 16px;
text-transform: uppercase;
}
.cfb73c29a98c527d-ratingIcon {
bottom: 40px;
inset-inline-start: 40px;
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-user-drag: none;
transition: color var(--custom-checkpoint-transition-duration) ease;
}
.full-motion .cfb73c29a98c527d-introVideo {
transition:
opacity var(--custom-transition-duration) var(--custom-transition-timing-function),
transform var(--custom-transition-duration) var(--custom-transition-timing-function);
}
.cfb73c29a98c527d-unavailableContainer {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.cfb73c29a98c527d-display {
font-size: 8vw;
margin-bottom: var(--space-24);
text-align: center;
}
.cfb73c29a98c527d-display,
.cfb73c29a98c527d-title {
text-transform: uppercase;
}
.cfb73c29a98c527d-title .cfb73c29a98c527d-text {
font-size: 8vw;
}
.cfb73c29a98c527d-subtitleAnimated {
margin-bottom: var(--space-16);
margin-top: var(--space-16);
}
.cfb73c29a98c527d-subtitleAnimated .cfb73c29a98c527d-text {
font-size: 2vw;
}
.cfb73c29a98c527d-subtitle {
margin-bottom: var(--space-32);
text-align: center;
}
.cfb73c29a98c527d-learnMore {
cursor: pointer;
display: inline;
}
.cfb73c29a98c527d-link {
display: inline;
text-decoration: underline;
}
.cfb73c29a98c527d-claimButton {
margin-top: var(--space-24);
}
.cfb73c29a98c527d-buttonCTA {
font-size: 20px;
}
.cfb73c29a98c527d-unavailableLogo {
height: 300px;
margin-top: -150px;
width: 300px;
}
.cfb73c29a98c527d-disclaimer {
padding-inline: var(--space-160);
text-align: center;
}
.cfb73c29a98c527d-attribution,
.cfb73c29a98c527d-disclaimer {
bottom: var(--space-40);
position: absolute;
}
.cfb73c29a98c527d-attribution {
inset-inline-end: var(--space-24);
}
._74acdf600388a483-noDrag {
-webkit-user-drag: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
._74acdf600388a483-container {
position: relative;
width: 380px;
}
._74acdf600388a483-card {
gap: 8px;
}
._74acdf600388a483-card,
._74acdf600388a483-footer {
display: flex;
padding: var(--space-8);
}
._74acdf600388a483-footer {
justify-content: space-between;
}
._74acdf600388a483-title {
color: #000;
font-size: 16px;
text-transform: uppercase;
}
._74acdf600388a483-asset,
._74acdf600388a483-title {
}
._74acdf600388a483-asset {
background-blend-mode: color-burn;
background-image: url(https://cdn.discordapp.com/assets/content/7f5bafad92c161f4e3f0aead83b84dfafeacea91a5eb442f49ed5711470b7887.png);
background-size: cover;
height: 120px;
padding-inline: var(--space-8);
padding-bottom: var(--space-16);
padding-top: var(--space-16);
}
._74acdf600388a483-stats {
flex-direction: column;
overflow: hidden;
}
._74acdf600388a483-stat,
._74acdf600388a483-stats {
display: flex;
gap: var(--space-8);
}
._74acdf600388a483-stat {
align-items: center;
}
._74acdf600388a483-statImage {
background-color: #000;
border: 1px solid #000;
border-radius: 0;
flex-shrink: 0;
height: 14px;
width: 14px;
}
._74acdf600388a483-statText {
color: #000;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._74acdf600388a483-cta {
align-items: center;
cursor: pointer;
display: flex;
gap: var(--space-4);
}
._74acdf600388a483-ctaText {
color: #000;
text-transform: uppercase;
}
._74acdf600388a483-powerContainer {
inset-inline-start: 0;
padding-top: var(--space-8);
position: absolute;
top: 0;
-webkit-padding-start: var(--space-8);
padding-inline-start: var(--space-8);
-webkit-padding-end: var(--space-12);
-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
display: flex;
flex-direction: column;
gap: 2px;
padding-inline-end: var(--space-12);
padding-bottom: var(--space-4);
}
._74acdf600388a483-powerText {
display: flex;
gap: 4px;
}
._74acdf600388a483-powerBar {
display: flex;
gap: 2px;
}
._6c706db0523bd9a7-inline {
opacity: 1;
}
.full-motion ._6c706db0523bd9a7-inline {
transition: all 0.1s ease;
}
._6c706db0523bd9a7-inline._6c706db0523bd9a7-hiddenMosaicItem {
visibility: hidden;
}
.full-motion ._6c706db0523bd9a7-obscured {
transition: all 0.1s ease;
}
._6c706db0523bd9a7-obscured._6c706db0523bd9a7-hiddenMosaicItem {
pointer-events: none;
}
._6c706db0523bd9a7-obscured._6c706db0523bd9a7-hiddenMosaicItem._6c706db0523bd9a7-hiddenSpoiler {
filter: blur(var(--custom-message-attachment-spoiler-blur-radius));
}
._6c706db0523bd9a7-obscured._6c706db0523bd9a7-hiddenMosaicItem._6c706db0523bd9a7-hiddenExplicit {
filter: blur(var(--__obscured-background-blur-radius)) brightness(var(--__obscured-background-brightness));
}
._6c706db0523bd9a7-obscureVideoSpacing {
bottom: 36px;
transition: bottom 0.1s ease-in-out;
}
._6c706db0523bd9a7-mosaicItemContent {
flex: auto;
}
._6c706db0523bd9a7-removeMosaicItemButton {
align-self: flex-start;
color: var(--interactive-text-default);
cursor: pointer;
flex: 0 0 auto;
opacity: 0;
padding: 2px;
}
._6c706db0523bd9a7-spoilerRemoveMosaicItemButton {
inset-inline-end: -20px;
position: absolute;
top: -2px;
}
._6c706db0523bd9a7-mosaicItem {
align-items: start;
display: flex;
flex-flow: row nowrap;
height: 100%;
max-width: 100%;
}
._6c706db0523bd9a7-mosaicItemNoJustify {
justify-self: auto !important;
}
._6c706db0523bd9a7-mosaicItemFullWidth {
align-items: center;
width: 100%;
}
._6c706db0523bd9a7-mosaicItemMediaMosaic {
border-radius: 2px;
max-height: inherit;
position: relative;
}
._6c706db0523bd9a7-hasFooter {
max-width: 100%;
}
._6c706db0523bd9a7-hasFooter,
._6c706db0523bd9a7-hasFooter video {
border-end-end-radius: 0;
border-end-start-radius: 0;
}
._6c706db0523bd9a7-mosaicItemWithFooter {
flex-direction: column;
}
._6c706db0523bd9a7-hideOverflow {
overflow: hidden;
}
._6c706db0523bd9a7-removeMosaicItemButton:focus-within,
._6c706db0523bd9a7-removeMosaicItemButton:hover,
:hover + ._6c706db0523bd9a7-removeMosaicItemButton {
color: var(--interactive-text-hover);
}
._6c706db0523bd9a7-nonMediaMosaicItem {
inset-inline-end: -8px;
outline: 1px solid var(--background-base-lower);
top: -8px;
}
._6c706db0523bd9a7-removeMosaicItemHoverButton:hover,
.keyboard-mode ._6c706db0523bd9a7-removeMosaicItemHoverButton:focus {
background-color: var(--control-critical-primary-background-default);
color: var(--white);
}
._6c706db0523bd9a7-removeMosaicItemHoverButton:active {
background-color: var(--control-critical-primary-background-active);
color: var(--white);
}
._6c706db0523bd9a7-downloadHoverButtonIcon {
height: 20px;
width: 20px;
}
.enable-forced-colors ._6c706db0523bd9a7-removeMosaicItemButton {
background-color: ButtonFace;
border: 1px solid ButtonFace;
color: ButtonText;
opacity: 1;
}
.enable-forced-colors ._6c706db0523bd9a7-removeMosaicItemButton:focus,
.enable-forced-colors ._6c706db0523bd9a7-removeMosaicItemButton:hover {
border-color: ButtonText;
}
._06ab41fd2ef7af3f-hoverButtonGroup:hover,
.keyboard-mode ._06ab41fd2ef7af3f-hoverButtonGroup:focus-within,
:hover + ._06ab41fd2ef7af3f-hoverButtonGroup {
opacity: 1;
}
._06ab41fd2ef7af3f-hoverButton {
color: var(--interactive-text-default);
cursor: pointer;
display: flex;
padding: 6px;
}
._06ab41fd2ef7af3f-hoverButton._06ab41fd2ef7af3f-selected,
._06ab41fd2ef7af3f-hoverButton:hover,
.keyboard-mode ._06ab41fd2ef7af3f-hoverButton:focus {
background-color: var(--interactive-background-hover);
color: var(--interactive-text-hover);
}
._06ab41fd2ef7af3f-hoverButton:active {
background-color: var(--interactive-background-active);
color: var(--interactive-text-active);
}
._06ab41fd2ef7af3f-hoverButtonGroup {
background-color: var(--background-base-low);
border-radius: 5px;
display: flex;
inset-inline-end: 4px;
opacity: 0;
overflow: hidden;
position: absolute;
top: 4px;
z-index: 2;
}
._06ab41fd2ef7af3f-nonMediaMosaicItem {
inset-inline-end: -8px;
outline: 1px solid var(--background-base-lower);
top: -8px;
}
._06ab41fd2ef7af3f-sizer {
height: 0;
inset-inline-start: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
}
._55ed79c7f1cd866a-fileDisplayContainer {
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
}
._55ed79c7f1cd866a-fileHidden {
opacity: 0;
pointer-events: none;
}
.a3c1e13b2bbf49f1-notFoundPlaceholder {
align-items: center;
animation: a3c1e13b2bbf49f1-fadeIn 0.7s;
background-color: var(--opacity-black-4);
display: flex;
height: 100%;
justify-content: center;
object-fit: cover;
width: 100%;
}
.a3c1e13b2bbf49f1-brokenImageIcon {
color: var(--background-accent);
height: auto;
object-fit: contain;
width: 32px;
}
.a3c1e13b2bbf49f1-hiddenSpoilers {
opacity: 0;
pointer-events: none;
}
.f4758a8d6346d18b-oneByOneGrid {
display: inline-block;
max-height: 350px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.f4758a8d6346d18b-oneByOneGridSingle {
border-radius: 8px;
max-width: 100%;
overflow: hidden;
}
.f4758a8d6346d18b-oneByOneGridMosaic {
display: flex;
max-height: 280px;
width: 100%;
}
.f4758a8d6346d18b-oneByTwoGrid {
display: flex;
flex-direction: row;
gap: 4px;
max-height: 280px;
}
.f4758a8d6346d18b-oneByTwoLayoutThreeGrid {
max-height: 350px;
}
.f4758a8d6346d18b-oneByTwoGridItem {
flex: 1;
min-width: 0;
}
.f4758a8d6346d18b-oneByTwoGrid .f4758a8d6346d18b-itemContentContainer,
.f4758a8d6346d18b-oneByTwoGrid .f4758a8d6346d18b-lazyImg {
height: 100%;
}
.f4758a8d6346d18b-oneByTwoSoloItem {
flex: 2;
}
.f4758a8d6346d18b-oneByTwoDuoItem {
flex: 1;
}
.f4758a8d6346d18b-twoByOneGrid {
display: flex;
flex-direction: column;
gap: 4px;
height: 100%;
}
.f4758a8d6346d18b-twoByOneGridItem {
flex: 1;
min-height: 0;
}
.f4758a8d6346d18b-threeByThreeGrid {
display: grid;
flex-direction: row;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-gap: 4px;
}
.f4758a8d6346d18b-threeByThreeGrid .f4758a8d6346d18b-lazyImg,
.f4758a8d6346d18b-threeByThreeGrid .f4758a8d6346d18b-lazyImgContainer {
aspect-ratio: 1/1;
}
.f4758a8d6346d18b-twoByTwoGrid {
display: grid;
flex-direction: row;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
grid-gap: 4px;
max-height: 350px;
}
.f4758a8d6346d18b-oneByOneGrid + .f4758a8d6346d18b-threeByThreeGrid,
.f4758a8d6346d18b-oneByTwoGrid + .f4758a8d6346d18b-threeByThreeGrid {
margin-top: 4px;
}
.f4758a8d6346d18b-visualMediaItemContainer {
border-radius: 8px;
height: 100%;
max-width: 550px;
overflow: hidden;
width: 100%;
}
.f4758a8d6346d18b-visualMediaItemContainer.f4758a8d6346d18b-isInAppComponentsV2 {
max-width: 600px;
}
.f4758a8d6346d18b-nonVisualMediaItemContainer {
display: flex;
flex-direction: column;
max-width: 100%;
}
.f4758a8d6346d18b-nonVisualMediaItem {
max-width: 100%;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.f4758a8d6346d18b-nonVisualMediaItem + .f4758a8d6346d18b-nonVisualMediaItem,
.f4758a8d6346d18b-nonVisualMediaItemContainer {
margin-top: 8px;
}
.f4758a8d6346d18b-itemContentContainer {
height: 100%;
width: 100%;
}
.f4758a8d6346d18b-hasFooter {
max-height: none;
}
._1fcacb0d444cb493-divider {
border-bottom: 1px solid var(--background-mod-strong);
}
._1fcacb0d444cb493-spacingLarge {
margin: var(--space-8) 0;
}
.da9de79f6b77fd55-root.da9de79f6b77fd55-root.da9de79f6b77fd55-sizeReduced {
font-size: 0.875rem;
line-height: calc(var(--chat-markup-line-height) * 0.875);
}
.da9de79f6b77fd55-root.da9de79f6b77fd55-root.da9de79f6b77fd55-sizeReduced small {
font-size: 0.75rem;
line-height: calc(var(--chat-markup-line-height) * 0.75);
}
.da9de79f6b77fd55-root.da9de79f6b77fd55-root.da9de79f6b77fd55-colorMuted {
color: var(--text-subtle);
}
.da9de79f6b77fd55-root.da9de79f6b77fd55-root.da9de79f6b77fd55-colorMuted small {
color: var(--text-muted);
}
.da9de79f6b77fd55-root.da9de79f6b77fd55-root.da9de79f6b77fd55-weightReduced {
font-weight: var(--font-weight-normal);
}
.da9de79f6b77fd55-root.da9de79f6b77fd55-root.da9de79f6b77fd55-weightReduced h1,
.da9de79f6b77fd55-root.da9de79f6b77fd55-root.da9de79f6b77fd55-weightReduced h2,
.da9de79f6b77fd55-root.da9de79f6b77fd55-root.da9de79f6b77fd55-weightReduced h3,
.da9de79f6b77fd55-root.da9de79f6b77fd55-root.da9de79f6b77fd55-weightReduced h4,
.da9de79f6b77fd55-root.da9de79f6b77fd55-root.da9de79f6b77fd55-weightReduced h5,
.da9de79f6b77fd55-root.da9de79f6b77fd55-root.da9de79f6b77fd55-weightReduced h6,
.da9de79f6b77fd55-root.da9de79f6b77fd55-root.da9de79f6b77fd55-weightReduced strong {
font-weight: var(--font-weight-medium);
}
._48344f8d6bef478a-markdownContainer {
overflow-wrap: anywhere;
}
._48344f8d6bef478a-markdownContainer._48344f8d6bef478a-markdownContainer._48344f8d6bef478a-markdownContainer._48344f8d6bef478a-markdownContainer > p:first-child {
margin-top: 0;
}
._48344f8d6bef478a-markdownContainer._48344f8d6bef478a-markdownContainer._48344f8d6bef478a-markdownContainer._48344f8d6bef478a-markdownContainer > p:last-child {
margin-bottom: 0;
}
._48344f8d6bef478a-markdownContainer._48344f8d6bef478a-markdownContainer._48344f8d6bef478a-markdownContainer._48344f8d6bef478a-markdownContainer h1:first-child,
._48344f8d6bef478a-markdownContainer._48344f8d6bef478a-markdownContainer._48344f8d6bef478a-markdownContainer._48344f8d6bef478a-markdownContainer h2:first-child,
._48344f8d6bef478a-markdownContainer._48344f8d6bef478a-markdownContainer._48344f8d6bef478a-markdownContainer._48344f8d6bef478a-markdownContainer h3:first-child {
margin-top: 0;
}
._48344f8d6bef478a-markdownContainer._48344f8d6bef478a-markdownContainer._48344f8d6bef478a-markdownContainer._48344f8d6bef478a-markdownContainer h1:not(:has(+ *)),
._48344f8d6bef478a-markdownContainer._48344f8d6bef478a-markdownContainer._48344f8d6bef478a-markdownContainer._48344f8d6bef478a-markdownContainer h2:not(:has(+ *)),
._48344f8d6bef478a-markdownContainer._48344f8d6bef478a-markdownContainer._48344f8d6bef478a-markdownContainer._48344f8d6bef478a-markdownContainer h3:not(:has(+ *)) {
margin-bottom: 0;
}
._48344f8d6bef478a-markdownContainer._48344f8d6bef478a-markdownContainer._48344f8d6bef478a-markdownContainer._48344f8d6bef478a-markdownContainer blockquote,
._48344f8d6bef478a-markdownContainer._48344f8d6bef478a-markdownContainer._48344f8d6bef478a-markdownContainer._48344f8d6bef478a-markdownContainer pre {
max-width: unset;
}
._8f9ada02a623c0f3-imgContainer {
--__thumbnail-size: 85px;
border-radius: var(--radius-sm);
height: var(--__thumbnail-size);
max-height: var(--__thumbnail-size);
max-width: var(--__thumbnail-size);
overflow: auto;
width: var(--__thumbnail-size);
}
._8f9ada02a623c0f3-img {
object-fit: cover;
}
._8f9ada02a623c0f3-hiddenSpoiler {
filter: blur(var(--custom-message-attachment-spoiler-blur-radius));
pointer-events: none;
}
._6c21f4f70f1e833a-container {
border: 1px solid var(--status-warning);
border-radius: var(--radius-md);
padding: var(--space-16);
}
._4337d0d57e269085-clickable {
cursor: pointer;
}
._4337d0d57e269085-container {
align-items: center;
display: flex;
}
._4337d0d57e269085-truncatedText {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._4337d0d57e269085-usersHeader {
display: flex;
white-space: pre;
}
._8e5774737a01bb03-textPrimary {
color: var(--content-inventory-overlay-text-primary);
}
._8e5774737a01bb03-textSecondary {
color: var(--content-inventory-overlay-text-secondary);
}
._8e5774737a01bb03-headerIcons {
inset-inline-end: 8px;
position: absolute;
top: 8px;
}
._8e5774737a01bb03-container {
align-items: center;
background-color: #000;
border-radius: var(--radius-sm);
display: flex;
gap: 12px;
margin: 4px 0 0;
max-width: 400px;
padding: 8px;
position: relative;
width: 100%;
}
._8e5774737a01bb03-clickable {
cursor: pointer;
}
._8e5774737a01bb03-badges {
margin-top: 4px;
}
._8e5774737a01bb03-thumbnailImage {
height: 0;
min-height: 100%;
}
._8e5774737a01bb03-clickableText {
max-width: -webkit-fit-content;
max-width: -moz-fit-content;
max-width: fit-content;
}
._8e5774737a01bb03-truncatedText {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._8e5774737a01bb03-infoContainer {
overflow: hidden;
position: relative;
width: 100%;
}
._8e5774737a01bb03-users {
overflow: hidden;
width: calc(100% - 30px);
}
._8e5774737a01bb03-thumbnailContainer {
margin-bottom: -2.5px;
}
._1647d698ce7feb4d-container {
display: flex;
flex-direction: column;
}
._1647d698ce7feb4d-children {
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
}
._1647d698ce7feb4d-error {
margin: 4px 0;
}
._60fa3b8f3ca9845f-container {
background: var(--background-surface-high);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
display: flex;
flex-direction: column;
gap: var(--space-8);
overflow: hidden;
padding: var(--space-16);
}
._60fa3b8f3ca9845f-container._60fa3b8f3ca9845f-isHidden {
filter: blur(var(--custom-embed-spoiler-blur-radius));
pointer-events: none;
}
._60fa3b8f3ca9845f-container._60fa3b8f3ca9845f-withAccentColor {
position: relative;
}
._60fa3b8f3ca9845f-container._60fa3b8f3ca9845f-withAccentColor:before {
background-color: var(--__accent-color);
content: "";
height: 100%;
inset-inline-start: 0;
position: absolute;
top: 0;
width: 4px;
}
.custom-theme-background ._60fa3b8f3ca9845f-container {
background-color: var(--background-mod-subtle);
}
.cd2e375056cfceee-description {
margin-bottom: var(--space-8);
}
.c3d3d997784d0ede-section {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.c3d3d997784d0ede-children {
display: flex;
gap: var(--space-12);
justify-content: space-between;
}
.c3d3d997784d0ede-textChildren {
display: flex;
flex: 1;
flex-direction: column;
row-gap: var(--space-4);
}
.c3d3d997784d0ede-textChildren.c3d3d997784d0ede-verticallyCenterAlign {
justify-content: center;
}
.c3d3d997784d0ede-accessory {
align-items: flex-start;
display: flex;
min-width: 0;
}
.c3d3d997784d0ede-accessory.c3d3d997784d0ede-restrictWidth {
max-width: calc(50% - var(--space-12));
}
._5e20857677befdf4-container {
display: flex;
flex-direction: column;
row-gap: 6px;
width: 100%;
}
._5e20857677befdf4-container._5e20857677befdf4-isComponentsV2 {
align-items: stretch;
max-width: min(600px, 100%);
row-gap: var(--space-8);
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
._06f116858aaf7661-container {
border-radius: 12px;
box-sizing: border-box;
-webkit-mask-image: radial-gradient(circle, #fff 100%, #000 0);
mask-image: radial-gradient(circle, #fff 100%, #000 0);
overflow: hidden;
padding: var(--custom-aspect-stable-image-container-padding);
width: 100%;
}
._06f116858aaf7661-container,
._06f116858aaf7661-imageContainer {
align-items: center;
display: flex;
justify-content: center;
position: relative;
}
._06f116858aaf7661-imageContainer {
height: 100%;
}
._06f116858aaf7661-image {
border-radius: 12px;
box-shadow: var(--shadow-high);
height: auto;
max-height: 100%;
max-width: 100%;
object-fit: contain;
position: relative;
width: auto;
}
._06f116858aaf7661-backgroundImage,
._06f116858aaf7661-backgroundImageFilter {
display: block;
height: 100%;
inset-inline-start: 0;
position: absolute;
top: 0;
width: 100%;
}
._06f116858aaf7661-backgroundImage {
object-fit: cover;
transform: scale(1.5);
}
._06f116858aaf7661-backgroundImageFilter {
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
background: rgba(28, 27, 37, 0.9);
}
._06f116858aaf7661-loader {
position: absolute;
}
._419e35bf04c2f56b-postPreviewContainer {
border-radius: 10px;
max-width: 512px;
min-width: 160px;
overflow: hidden;
width: 100%;
}
._419e35bf04c2f56b-thumbnailContainer {
background-color: var(--background-surface-high);
max-height: 288px;
overflow: hidden;
position: relative;
}
._419e35bf04c2f56b-thumbnail {
overflow: hidden;
padding: 0;
width: 100%;
}
._419e35bf04c2f56b-thumbnail,
._419e35bf04c2f56b-thumbnailImage {
border-radius: 0;
height: 100%;
}
._419e35bf04c2f56b-thumbnailOverlay {
align-items: center;
cursor: pointer;
display: flex;
height: 100%;
justify-content: center;
position: absolute;
top: 0;
transition-duration: var(--custom-media-post-embed-transition-duration);
width: 100%;
}
._419e35bf04c2f56b-thumbnailOverlay:hover {
background-color: var(--interactive-background-hover);
}
._419e35bf04c2f56b-thumbnailOverlayCta {
align-items: center;
background-color: rgba(49, 51, 56, 0.75);
border-radius: 64px;
display: flex;
gap: 8px;
padding: 16px;
}
._419e35bf04c2f56b-descriptionContainer {
background-color: var(--background-base-lower);
position: relative;
}
._419e35bf04c2f56b-descriptionHeader {
border-bottom: 1px solid var(--interactive-background-hover);
padding: 16px;
}
._419e35bf04c2f56b-descriptionHeaderText {
line-height: 22px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
._419e35bf04c2f56b-descriptionSubtitle {
width: 360px;
}
._419e35bf04c2f56b-descriptionFooter {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 16px;
}
._419e35bf04c2f56b-authorAvatar {
border-radius: 50%;
height: 40px;
width: 40px;
}
._419e35bf04c2f56b-descriptionFooterContainer {
flex-grow: 1;
}
._419e35bf04c2f56b-descriptionFooterChannelName {
align-items: center;
display: flex;
gap: 5px;
}
._419e35bf04c2f56b-descriptionFooterAuthorContainer {
cursor: default;
display: flex;
}
._419e35bf04c2f56b-authorName {
-webkit-margin-start: 2px;
margin-inline-start: 2px;
}
._419e35bf04c2f56b-mediaChannelIcon {
color: var(--text-muted);
-webkit-margin-end: 2px;
height: 20px;
margin-inline-end: 2px;
width: 20px;
}
._419e35bf04c2f56b-channelName {
cursor: pointer;
}
._419e35bf04c2f56b-channelName:hover {
color: var(--text-strong);
text-decoration: underline;
}
._419e35bf04c2f56b-spoiler {
filter: blur(var(--custom-media-post-embed-spoiler-blur-radius));
pointer-events: none;
}
.f4f0eb773c27d83f-enabled {
cursor: pointer;
}
.f4f0eb773c27d83f-attachmentImage {
object-fit: cover;
object-position: center;
}
.f4f0eb773c27d83f-listItemButton {
cursor: pointer;
}
.f4f0eb773c27d83f-radioBackground {
color: var(--text-default);
}
.f4f0eb773c27d83f-radioForeground {
color: var(--control-brand-foreground);
}
.f4f0eb773c27d83f-checkbox {
align-items: center;
background-color: transparent;
border: 2px solid var(--text-default);
border-radius: 3px;
box-sizing: border-box;
display: flex;
justify-content: center;
}
.f4f0eb773c27d83f-checkboxSelected {
background-color: var(--brand-500);
border: none;
}
._1075886a13179520-answersContainer {
display: grid;
gap: 16px;
grid-template-columns: repeat(2, 1fr);
}
._1075886a13179520-answer {
align-items: center;
aspect-ratio: 1/1;
background-color: var(--custom-poll-style-image-background);
border-radius: var(--radius-xs);
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
._1075886a13179520-currentlyVoting {
transition: background-color var(--custom-button-transition-duration) ease;
}
._1075886a13179520-currentlyVoting ._1075886a13179520-attachment:after {
background-color: var(--white);
content: "";
height: 100%;
inset-inline-start: 0;
opacity: 0;
position: absolute;
top: 0;
transition: opacity var(--custom-button-transition-duration) ease;
width: 100%;
}
._1075886a13179520-currentlyVoting:hover {
box-shadow: var(--shadow-low);
}
._1075886a13179520-currentlyVoting:hover ._1075886a13179520-attachment:after {
opacity: 0.05;
}
.theme-light ._1075886a13179520-currentlyVoting:hover ._1075886a13179520-attachment:after {
opacity: 0.1;
}
._1075886a13179520-attachment {
border-radius: var(--radius-xs);
height: 100%;
position: absolute;
width: 100%;
}
._1075886a13179520-attachmentWithResults {
border-radius: var(--radius-xs) var(--radius-xs) var(--radius-sm) var(--radius-xs);
}
._1075886a13179520-emoji {
height: 30%;
position: absolute;
width: 30%;
}
._1075886a13179520-mediaMissing {
background-color: var(--background-base-low);
}
._1075886a13179520-selectedIcon {
position: relative;
}
._1075886a13179520-pollAnswerIcon {
height: 28px;
inset-inline-end: -9px;
position: absolute;
top: -9px;
width: 28px;
}
._1075886a13179520-votesData {
align-items: center;
align-self: flex-end;
background-color: var(--custom-poll-style-vote-percentage);
border-radius: var(--radius-xs) 0;
bottom: 0;
color: var(--custom-poll-style-label);
display: flex;
flex-direction: row;
gap: 4px;
inset-inline-end: 0;
padding: 4px 6px;
position: absolute;
}
._4c5209741d147f1b-answersContainer {
display: grid;
gap: 8px;
grid-auto-rows: 1fr;
grid-template-columns: 1fr;
margin: 8px 0 16px;
}
._4c5209741d147f1b-answer {
display: flex;
}
._4c5209741d147f1b-answerInner {
align-items: center;
background-color: var(--background-mod-muted);
border-radius: var(--radius-sm);
box-sizing: border-box;
color: var(--text-default);
display: flex;
gap: 8px;
min-height: 50px;
outline: 1px solid var(--custom-poll-style-border);
overflow: hidden;
padding: 8px 16px;
position: relative;
transition:
background-color var(--custom-button-transition-duration) ease,
outline-color var(--custom-button-transition-duration) ease;
width: 100%;
word-break: break-word;
z-index: 1;
}
._4c5209741d147f1b-answer:hover ._4c5209741d147f1b-answerInner._4c5209741d147f1b-currentlyVoting {
outline: 1px solid var(--border-strong);
}
._4c5209741d147f1b-answer ._4c5209741d147f1b-answerInner._4c5209741d147f1b-currentlyVoting._4c5209741d147f1b-selected {
outline: 1px solid var(--control-brand-foreground);
}
._4c5209741d147f1b-mediaContainer {
align-items: center;
display: flex;
justify-content: center;
}
._4c5209741d147f1b-emoji {
-webkit-margin-end: 2px;
margin-inline-end: 2px;
}
._4c5209741d147f1b-attachment,
._4c5209741d147f1b-emoji {
height: 24px;
width: 24px;
}
._4c5209741d147f1b-label {
-webkit-margin-end: auto;
margin-inline-end: auto;
}
._4c5209741d147f1b-avatarForSelected {
-webkit-margin-start: 8px;
height: 20px;
margin-inline-start: 8px;
width: 20px;
}
._4c5209741d147f1b-votePercentageBar {
background-color: var(--custom-poll-style-vote-percentage);
bottom: 0;
inset-inline-start: 0;
position: absolute;
top: 0;
z-index: -1;
}
._4c5209741d147f1b-votesData {
align-items: center;
display: flex;
flex-direction: row;
gap: 8px;
white-space: nowrap;
}
._4c5209741d147f1b-answerSelectionIcon {
flex-shrink: 0;
}
._0be773cf1443f34f-container {
background-color: var(--background-surface-high);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
box-sizing: border-box;
display: flex;
flex-direction: column;
max-width: 472px;
min-width: 302px;
overflow: hidden;
padding: 16px;
position: relative;
width: 100%;
}
._0be773cf1443f34f-header {
display: grid;
gap: 0 8px;
grid-template-areas: "question infoIcon" "prompt infoIcon";
grid-template-columns: 1fr 24px;
}
._0be773cf1443f34f-question {
grid-area: question;
word-break: break-word;
}
._0be773cf1443f34f-prompt {
grid-area: prompt;
margin: 4px 0 0;
}
._0be773cf1443f34f-detailsText {
display: flex;
white-space: nowrap;
}
._0be773cf1443f34f-detailsText > :not(:first-child):before {
content: "\2219";
margin: 0 0.5rem;
}
._0be773cf1443f34f-bottomBar {
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 16px;
min-height: var(--custom-button-button-md-height);
}
._0be773cf1443f34f-secondaryAction {
-webkit-margin-end: auto;
margin-inline-end: auto;
}
._0be773cf1443f34f-tertiaryAction {
cursor: pointer;
padding-inline: 0;
}
._0be773cf1443f34f-tertiaryAction :hover {
text-decoration: underline;
}
.theme-light ._0be773cf1443f34f-container {
border: 1px solid var(--border-subtle);
}
._5301bbcb03374615-container {
box-sizing: border-box;
margin-bottom: 16px;
max-width: 660px;
min-width: 280px;
width: 100%;
}
._5301bbcb03374615-wide._5301bbcb03374615-container {
display: flex;
flex-shrink: 0;
height: 250px;
}
._5301bbcb03374615-tall._5301bbcb03374615-container {
display: flex;
flex-direction: column-reverse;
}
._5301bbcb03374615-contentContainer {
background: var(--background-base-lowest);
border-radius: 8px 0 0 8px;
display: flex;
flex: 1;
flex-direction: column;
padding: 38px 16px 16px;
}
._5301bbcb03374615-tall ._5301bbcb03374615-contentContainer {
border-radius: 0 0 8px 8px;
padding: 16px;
}
._5301bbcb03374615-buttonContainer {
align-self: flex-start;
margin-top: auto;
}
._5301bbcb03374615-tall ._5301bbcb03374615-buttonContainer {
margin-top: 50px;
width: 100%;
}
._5301bbcb03374615-imgContainer {
align-items: center;
background: var(--background-base-lower);
border-radius: 0 8px 8px 0;
display: flex;
flex: 1;
justify-content: center;
padding: 16px;
}
._5301bbcb03374615-missingQuestImage {
height: 180px;
object-fit: contain;
width: 100%;
}
.theme-light ._5301bbcb03374615-contentContainer {
background: var(--background-base-lower);
}
.theme-light ._5301bbcb03374615-imgContainer {
background: var(--background-secondary-alt);
}
.theme-dark ._5301bbcb03374615-contentContainer {
background: var(--background-base-lowest);
}
.theme-dark ._5301bbcb03374615-imgContainer {
background: var(--background-base-lower);
}
.fbc6f7283f697ba7-outerContainer {
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 16px;
padding: 16px;
}
.fbc6f7283f697ba7-outerContainerSm {
flex-wrap: wrap;
gap: 12px;
max-height: none;
}
.fbc6f7283f697ba7-outerContainerXs {
gap: 6px;
max-height: none;
position: relative;
}
.fbc6f7283f697ba7-questRewardEmbed {
height: 80px;
width: 80px;
}
.fbc6f7283f697ba7-questRewardEmbedSm {
height: 70px;
width: 70px;
}
.fbc6f7283f697ba7-questRewardEmbedXs {
bottom: 0;
height: 50px;
position: absolute;
width: 50px;
}
.fbc6f7283f697ba7-taskDetails {
flex: 1 1 180px;
min-width: 180px;
}
.fbc6f7283f697ba7-taskInstructions {
margin-bottom: 4px;
}
.fbc6f7283f697ba7-questEnrollmentBlockedButton {
flex: 1 0 auto;
}
.fbc6f7283f697ba7-fullWidthShinyCtaButtonWrapper {
flex: 1;
width: 100%;
}
.fbc6f7283f697ba7-ctaButtonWrapper {
flex: 1 0 auto;
}
.fbc6f7283f697ba7-outerContainerSm .fbc6f7283f697ba7-ctaButtonWrapper,
.fbc6f7283f697ba7-outerContainerXs .fbc6f7283f697ba7-ctaButtonWrapper {
flex-grow: 1;
}
.fbc6f7283f697ba7-outerContainerXs .fbc6f7283f697ba7-ctaButtonWrapper,
.fbc6f7283f697ba7-outerContainerXs .fbc6f7283f697ba7-questEnrollmentBlockedButton {
width: 100%;
}
.fbc6f7283f697ba7-learnMoreLink {
cursor: pointer;
}
.fbc6f7283f697ba7-ctaTooltipText {
text-align: center;
}
.fbc6f7283f697ba7-root {
background-color: var(--background-surface-high);
}
.fbc6f7283f697ba7-rewardTileWrapper {
position: relative;
}
.fbc6f7283f697ba7-rewardTileExpired {
align-items: center;
background: rgba(0, 0, 0, 0.5);
bottom: 0;
display: flex;
inset-inline: 0;
justify-content: center;
position: absolute;
top: 0;
}
.fbc6f7283f697ba7-rewardTileExpirationTooltip {
text-align: center;
}
.fbc6f7283f697ba7-removeStackWidth {
width: auto;
}
.c93f8c9326525d45-heroAsset {
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
transition: opacity 0.7s;
width: auto;
}
.c93f8c9326525d45-heroAssetCont {
align-items: center;
background-color: var(--background-base-low);
display: flex;
justify-content: center;
overflow: hidden;
}
.c93f8c9326525d45-heroAssetCont,
.c93f8c9326525d45-heroAssetVideo {
inset-inline-start: 0;
position: absolute;
top: 0;
width: 100%;
}
.c93f8c9326525d45-heroAssetVideo {
height: 100%;
object-fit: cover;
transition: opacity 0.4s;
}
._83420555c35283ce-partnerBranding {
align-items: center;
display: flex;
flex: 0 1 auto;
}
._83420555c35283ce-partnerBrandingGameTile {
display: block;
flex: 0 0 auto;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
._83420555c35283ce-partnerBrandingLogotype {
height: 24px;
max-width: 92px;
object-fit: contain;
}
._83420555c35283ce-partnerBrandingLogotypeWithCosponsor {
flex: 0 0 auto;
max-width: 44px;
}
._83420555c35283ce-cosponsorBrandSeparatorWrapper {
align-items: center;
display: flex;
flex: 0 0 auto;
}
._83420555c35283ce-cosponsorBrandSeparator {
height: 12px;
width: 12px;
}
._1d8687673afa90a1-promotedTag {
isolation: isolate;
padding: 3px 4px 2px;
position: relative;
text-transform: uppercase;
}
._1d8687673afa90a1-promotedTag,
._1d8687673afa90a1-promotedTag span {
display: block;
}
._1d8687673afa90a1-promotedTagBackground {
background-color: var(--black);
border-radius: 3px;
height: 100%;
inset-inline-start: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}
._74dc650bf8854a18-outerContainer {
display: flex;
flex-direction: column;
max-height: 185px;
overflow: hidden;
position: relative;
}
._74dc650bf8854a18-outerContainerGiftInventory {
min-height: 185px;
}
._74dc650bf8854a18-outerContainerEmbed {
min-height: 138px;
}
._74dc650bf8854a18-questSplashContainer {
height: 185px;
}
._74dc650bf8854a18-questSplashImage {
max-width: 660px;
object-fit: cover;
position: absolute;
width: 100%;
}
._74dc650bf8854a18-header {
box-sizing: border-box;
flex: 1 1 auto;
height: 100%;
position: relative;
width: 100%;
z-index: 1;
}
._74dc650bf8854a18-outerContainerEmbed._74dc650bf8854a18-outerContainerXs ._74dc650bf8854a18-header {
padding-bottom: 40px;
}
._74dc650bf8854a18-headerContent {
bottom: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
position: absolute;
width: 100%;
}
._74dc650bf8854a18-headerContentEmbed {
position: static;
}
._74dc650bf8854a18-headerExpandedContent {
align-items: flex-start;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px 16px;
}
._74dc650bf8854a18-headerExpandedWrapper {
width: 100%;
}
._74dc650bf8854a18-headerCollapsedContent {
height: 100px;
width: 100%;
}
._74dc650bf8854a18-headerCollapsedClickableContainer {
align-items: center;
cursor: pointer;
display: flex;
flex-direction: row;
height: 100%;
padding: 8px;
width: 100%;
}
._74dc650bf8854a18-headerCollapsedContentRewardWrapper {
align-items: center;
background-color: var(--background-mod-subtle);
border-radius: 8px;
display: flex;
flex-direction: column;
gap: 4px;
padding: 4px 4px 6px;
-webkit-margin-end: 20px;
margin-inline-end: 20px;
}
._74dc650bf8854a18-headerCollapsedRewardTile {
border-radius: 6px;
height: 60px;
width: 60px;
}
._74dc650bf8854a18-headerCollapsedContentCopyWrapper {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: 4px;
}
._74dc650bf8854a18-headerCollapsedContentCopyLogos,
._74dc650bf8854a18-iconLogotypeContainer {
align-items: center;
display: flex;
flex-direction: row;
}
._74dc650bf8854a18-partnerBranding {
-webkit-margin-end: 16px;
margin-inline-end: 16px;
}
._74dc650bf8854a18-partnerBrandingLogotypes {
max-width: 92px;
}
._74dc650bf8854a18-outerContainerXs ._74dc650bf8854a18-partnerBrandingLogotypes {
max-width: 60px;
}
._74dc650bf8854a18-questInfo {
margin-top: 4px;
overflow: hidden;
}
._74dc650bf8854a18-heading {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._74dc650bf8854a18-outerContainer:after {
background: linear-gradient(180deg, transparent, 25%, rgba(0, 0, 0, 0.9));
content: "";
height: 100%;
inset-inline-start: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
}
._74dc650bf8854a18-iconsContainer {
flex-direction: row;
gap: 8px;
inset-inline-end: 16px;
position: absolute;
}
._74dc650bf8854a18-iconWrapper,
._74dc650bf8854a18-iconsContainer {
align-items: center;
display: flex;
}
._74dc650bf8854a18-iconWrapper {
align-self: flex-start;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 16px;
cursor: pointer;
height: 32px;
justify-content: center;
line-height: 32px;
opacity: 0.9;
transition:
background-color 0.125s,
opacity 0.125s;
width: 32px;
}
._74dc650bf8854a18-iconWrapper:focus,
._74dc650bf8854a18-iconWrapper:hover {
background-color: rgba(0, 0, 0, 0.5);
}
._74dc650bf8854a18-iconWrapper:active {
opacity: 0.7;
}
._74dc650bf8854a18-submenuIcon {
color: var(--white);
height: 24px;
inset-inline-start: 4px;
position: absolute;
top: 4px;
width: 24px;
}
._74dc650bf8854a18-shareButton {
margin-top: 8px;
}
._12e165c2871a3e75-questsCard {
border-radius: 8px;
box-shadow: var(--shadow-low);
max-width: 660px;
min-width: 280px;
overflow: hidden;
width: 100%;
}
._12e165c2871a3e75-questsCard + ._12e165c2871a3e75-questsCard {
margin-top: 16px;
}
._255baf7478638c28-spinner {
margin-top: 40px;
}
.d5c2c4e10c0ca481-popout {
background-color: var(--background-base-lower);
border-radius: 8px;
box-shadow: var(--legacy-elevation-high), var(--legacy-elevation-border);
box-sizing: border-box;
line-height: 20px;
overflow: hidden;
padding: 24px 16px;
text-align: center;
width: 240px;
}
.d5c2c4e10c0ca481-staffBadge {
background-image: url(/assets/a5041f91a8a7f1d5.svg);
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
height: 16px;
width: 16px;
}
.d5c2c4e10c0ca481-nameWrapper {
margin-top: 16px;
}
.d5c2c4e10c0ca481-header {
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
.d5c2c4e10c0ca481-description {
margin-top: 8px;
}
.d5c2c4e10c0ca481-avatar {
border-radius: 16px;
height: 100px;
width: 100px;
}
._8c0e23f3e6f9206a-avatar {
-webkit-margin-end: var(--space-4);
margin-inline-end: var(--space-4);
}
._8c0e23f3e6f9206a-username a {
color: unset;
}
._8c0e23f3e6f9206a-timestampSeparator {
margin: 0 var(--space-4);
}
._8c0e23f3e6f9206a-timestamp {
margin: 0;
}
._0ed20844b575b437-container {
display: flex;
width: 100%;
}
._0ed20844b575b437-content {
display: flex;
flex-direction: column;
flex-grow: 1;
max-width: 100%;
}
._0ed20844b575b437-headerContainer {
align-items: center;
align-self: flex-start;
display: flex;
gap: var(--space-4);
margin-bottom: var(--space-4);
margin-top: 2px;
}
._0ed20844b575b437-message {
-webkit-margin-start: calc(var(--space-16) * -1);
margin-inline-start: calc(var(--space-16) * -1);
}
._0ed20844b575b437-nestedAccessories {
-webkit-margin-start: 56px;
margin-inline-start: 56px;
}
._0ed20844b575b437-headerIcon {
flex-shrink: 0;
}
._0ed20844b575b437-headerText {
font-style: italic;
}
._0ed20844b575b437-footerContainer {
align-items: center;
align-self: flex-start;
border-radius: 4px;
color: var(--text-muted);
cursor: pointer;
display: flex;
gap: var(--space-4);
margin-top: var(--space-4);
max-width: 100%;
padding-bottom: 1px;
padding-top: 1px;
}
._0ed20844b575b437-footerContainer:hover {
background-color: var(--interactive-background-hover);
}
._0ed20844b575b437-footerContainer:hover ._0ed20844b575b437-footerText {
color: var(--interactive-text-hover);
}
._0ed20844b575b437-footerText {
overflow: hidden;
text-overflow: ellipsis;
white-space: pre;
}
._0ed20844b575b437-originIcon {
border-radius: 4px;
height: 16px;
width: 16px;
}
.e80b85e1810f71fa-safetyPolicyNoticeContainer {
background: var(--background-base-lower);
border-radius: var(--radius-sm);
display: flex;
flex-direction: column;
}
.e80b85e1810f71fa-noticeContent {
align-items: flex-start;
display: flex;
flex-direction: column;
padding: var(--space-12);
}
.e80b85e1810f71fa-headerRow {
align-items: center;
display: flex;
flex-direction: row;
}
.e80b85e1810f71fa-warningIcon {
color: var(--status-danger);
height: 14px;
width: 14px;
-webkit-margin-end: var(--space-4);
margin-inline-end: var(--space-4);
}
.e80b85e1810f71fa-incidentTiming {
color: var(--text-muted);
margin-top: var(--space-4);
}
.e80b85e1810f71fa-noticeBody {
color: var(--text-muted);
margin-top: var(--space-8);
}
.e80b85e1810f71fa-footerContainer {
align-items: flex-start;
background-color: var(--control-critical-primary-background-default);
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--space-8) var(--space-12);
}
.e80b85e1810f71fa-footerContainer:hover {
background-color: var(--control-critical-primary-background-hover);
}
._86361b88a8a258e6-safetyPolicyNoticeContainer {
background: var(--card-background-default);
border-radius: var(--radius-sm);
display: flex;
flex-direction: column;
}
._86361b88a8a258e6-noticeContent {
align-items: flex-start;
display: flex;
flex-direction: column;
padding: var(--space-12);
}
._86361b88a8a258e6-headerRow {
align-items: center;
display: flex;
flex-direction: row;
}
._86361b88a8a258e6-icon {
height: 14px;
width: 14px;
-webkit-margin-end: var(--space-4);
margin-inline-end: var(--space-4);
}
._86361b88a8a258e6-incidentTiming {
color: var(--text-muted);
margin-top: var(--space-4);
}
._86361b88a8a258e6-noticeBody {
color: var(--text-muted);
margin-top: var(--space-8);
}
._86361b88a8a258e6-detailsButton {
margin-inline: var(--space-8);
padding: var(--space-8) 0;
}
._86361b88a8a258e6-defaultFooterContainer {
align-items: center;
background-color: var(--background-secondary-alt);
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
color: var(--white);
display: flex;
flex-direction: row;
justify-content: start;
width: 100%;
}
._86361b88a8a258e6-defaultFooterContainer:hover {
background-color: var(--control-secondary-background-hover);
}
._86361b88a8a258e6-dangerFooterContainer {
align-items: flex-start;
background-color: var(--control-critical-primary-background-default);
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
color: var(--white);
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
}
._86361b88a8a258e6-dangerfooterContainer:hover {
background-color: var(--control-critical-primary-background-hover);
}
._979b184ce6e2670e-wishlistButton {
align-items: center;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background: rgba(0, 0, 0, 0.52);
border: 1px solid var(--border-muted);
border-radius: var(--radius-sm);
cursor: pointer;
display: flex;
flex-shrink: 0;
gap: 4px;
justify-content: center;
padding: 9px;
}
._979b184ce6e2670e-disabledButton {
cursor: not-allowed;
opacity: 0.5;
}
._979b184ce6e2670e-withHover {
transition:
background-color 50ms ease-in,
color 50ms ease-in,
border-color 50ms ease-in,
opacity 50ms ease-in;
}
._979b184ce6e2670e-withHover:hover {
background: var(--control-overlay-secondary-background-hover);
transition:
background-color 0.15s ease-out,
color 0.15s ease-out,
border-color 0.15s ease-out,
opacity 0.15s ease-out;
}
._979b184ce6e2670e-withHover:active {
background: var(--control-overlay-secondary-background-active);
}
._979b184ce6e2670e-normalIconColor {
fill: var(--white);
}
._979b184ce6e2670e-wishlistedOrHoveredIconColor {
fill: #ec1060;
}
._979b184ce6e2670e-disabledIconColor {
fill: var(--icon-strong);
}
._979b184ce6e2670e-toastIcon {
flex-shrink: 0;
-webkit-margin-end: 4px;
align-items: center;
display: flex;
margin-inline-end: 4px;
}
.abfd909f61de9fdf-card,
.abfd909f61de9fdf-cardContainer {
overflow: hidden;
}
.abfd909f61de9fdf-card {
background: var(--background-base-low);
border: 2px solid var(--border-subtle);
border-radius: var(--radius-sm);
box-sizing: border-box;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: flex-end;
position: relative;
transform: translateY(0);
width: 100%;
}
.abfd909f61de9fdf-cardMedium {
height: 270px;
}
.abfd909f61de9fdf-cardSmall {
height: 246px;
}
.abfd909f61de9fdf-cardImageContainer {
bottom: 0;
inset-inline-end: 0;
inset-inline-start: 0;
position: absolute;
top: 0;
z-index: 0;
}
.abfd909f61de9fdf-cardEmbedded {
border: none;
border-radius: unset;
height: 254px;
}
.abfd909f61de9fdf-cardDark {
background-color: var(--background-surface-high);
}
.abfd909f61de9fdf-cardHighlighted {
box-shadow: var(--shadow-border), var(--shadow-high);
}
.abfd909f61de9fdf-cardDarkHighlighted {
box-shadow: 0 0 15px 1px var(--primary-700);
}
.abfd909f61de9fdf-cardNotLoaded {
cursor: default;
pointer-events: none;
}
.abfd909f61de9fdf-cardAnimation {
transform: scale(100%);
}
.abfd909f61de9fdf-cardAnimation:focus-within,
.abfd909f61de9fdf-cardAnimation:hover {
transform: scale(105%);
}
.full-motion .abfd909f61de9fdf-cardAnimation {
transition:
transform 0.5s,
box-shadow 0.5s;
}
@keyframes abfd909f61de9fdf-fadeIn {
0% {
opacity: 0;
}
to {
opacity: 1;
}
}
.abfd909f61de9fdf-cardBackgroundImage {
background-color: var(--background-base-low);
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
transform: scale(110%);
}
.full-motion .abfd909f61de9fdf-cardBackgroundImage {
transition: transform 0.5s;
}
.abfd909f61de9fdf-cardImage {
height: 100%;
object-fit: cover;
}
.full-motion .abfd909f61de9fdf-cardImage {
transition: transform 0.5s;
}
.abfd909f61de9fdf-ticketIconContainer {
background: var(--brand-400);
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
}
.abfd909f61de9fdf-ticketIcon {
height: 50%;
inset-inline-start: 50%;
object-fit: contain;
object-position: center center;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 50%;
}
.abfd909f61de9fdf-details {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px;
z-index: 1;
}
.abfd909f61de9fdf-titleContainer {
transform: translateY(0);
}
.full-motion .abfd909f61de9fdf-titleContainer {
transition: transform 0.5s;
}
.abfd909f61de9fdf-descriptionContainer {
display: flex;
flex-direction: row;
gap: 4px;
opacity: 1;
}
.full-motion .abfd909f61de9fdf-descriptionContainer {
transition:
opacity 0.25s,
transform 0.25s;
}
.abfd909f61de9fdf-buttonHover {
bottom: 16px;
inset-inline: 16px;
position: absolute;
transform: translateY(150%);
z-index: 1;
}
.full-motion .abfd909f61de9fdf-buttonHover {
transition: all 0.5s;
}
.abfd909f61de9fdf-card:focus-within .abfd909f61de9fdf-buttonHover,
.abfd909f61de9fdf-card:hover .abfd909f61de9fdf-buttonHover {
transform: translateY(0);
}
.abfd909f61de9fdf-card:focus-within .abfd909f61de9fdf-descriptionContainer,
.abfd909f61de9fdf-card:hover .abfd909f61de9fdf-descriptionContainer {
opacity: 0;
transform: translateY(50%);
}
.abfd909f61de9fdf-card:focus-within .abfd909f61de9fdf-titleContainer,
.abfd909f61de9fdf-card:hover .abfd909f61de9fdf-titleContainer {
transform: translateY(-100%);
}
.abfd909f61de9fdf-card:focus-within .abfd909f61de9fdf-bottomGradient,
.abfd909f61de9fdf-card:hover .abfd909f61de9fdf-bottomGradient {
transform: translateY(-15%);
}
.abfd909f61de9fdf-card:focus-within .abfd909f61de9fdf-cardBackgroundImage,
.abfd909f61de9fdf-card:hover .abfd909f61de9fdf-cardBackgroundImage {
transform: scale(100%);
}
.abfd909f61de9fdf-card:focus-within .abfd909f61de9fdf-cardImage,
.abfd909f61de9fdf-card:hover .abfd909f61de9fdf-cardImage {
transform: scale(105%);
}
.abfd909f61de9fdf-bottomGradient {
bottom: -25%;
height: 100%;
inset-inline-end: 0;
position: absolute;
transform: translateY(0);
width: 100%;
}
.full-motion .abfd909f61de9fdf-bottomGradient {
transition: transform 0.5s;
}
.abfd909f61de9fdf-iconAsset {
height: 20px;
object-fit: contain;
object-position: center;
width: 20px;
}
.abfd909f61de9fdf-badge {
background-color: var(--white);
color: var(--black);
inset-inline-start: 16px;
position: absolute;
top: 16px;
z-index: 1;
}
.abfd909f61de9fdf-cardButtonsContainer {
color: var(--primary-100);
display: flex;
flex-direction: row;
gap: 12px;
inset-inline-end: 8px;
position: absolute;
top: 8px;
z-index: 1;
}
.abfd909f61de9fdf-wishlistButton {
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-width: 0;
padding: 0;
}
.abfd909f61de9fdf-forwardButton {
visibility: hidden;
}
.abfd909f61de9fdf-cardButtonContainer {
align-items: center;
background-color: color-mix(in srgb, var(--black) 40%, transparent);
border-radius: var(--radius-sm);
cursor: pointer;
display: flex;
height: 40px;
justify-content: center;
transition: background-color 0.2s ease-in-out;
width: 40px;
}
.abfd909f61de9fdf-cardButtonContainer:hover {
background: color-mix(in srgb, var(--black) 60%, transparent);
}
.abfd909f61de9fdf-cardButtonContainerHovered {
visibility: visible;
}
@keyframes abfd909f61de9fdf-pulse {
0% {
background: var(--background-base-lowest);
}
30% {
background: var(--background-base-low);
}
70% {
background: var(--background-base-low);
}
to {
background: var(--background-base-lowest);
}
}
.abfd909f61de9fdf-placeholderCard {
cursor: default;
pointer-events: none;
}
.abfd909f61de9fdf-placeholderText {
background-color: var(--icon-muted);
border-radius: var(--radius-xs);
height: var(--space-24);
opacity: 0.1;
}
.full-motion .abfd909f61de9fdf-placeholderCard {
animation: abfd909f61de9fdf-pulse 2s ease-in-out infinite alternate;
animation-fill-mode: backwards;
}
.e95ba0bb7b0945f9-container {
display: flex;
flex-direction: column;
height: 380px;
max-width: 512px;
overflow: hidden;
width: 100%;
}
.e95ba0bb7b0945f9-card,
.e95ba0bb7b0945f9-container {
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.e95ba0bb7b0945f9-spinner {
align-self: center;
flex: 1;
justify-self: center;
}
.e95ba0bb7b0945f9-details {
gap: 16px;
padding: 16px;
-webkit-border-end: 1px solid var(--border-subtle);
border-bottom: 1px solid var(--border-subtle);
border-inline-end: 1px solid var(--border-subtle);
-webkit-border-start: 1px solid var(--border-subtle);
background: var(--background-base-low);
border-inline-start: 1px solid var(--border-subtle);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.e95ba0bb7b0945f9-details,
.e95ba0bb7b0945f9-detailsTitleDescription {
display: flex;
flex-direction: column;
}
.e95ba0bb7b0945f9-detailsTitleDescription {
gap: 8px;
}
.e95ba0bb7b0945f9-detailsDescription {
display: flex;
flex-direction: row;
gap: 4px;
}
.e95ba0bb7b0945f9-iconAsset {
height: 20px;
object-fit: contain;
object-position: center;
width: 20px;
}
.dfa9830d78418b5a-popoutContent {
display: flex;
flex-direction: column;
padding: var(--custom-message-helpers-popout-padding-width);
}
.dfa9830d78418b5a-stickersList {
display: flex;
justify-content: space-between;
margin: 8px 0;
}
.dfa9830d78418b5a-stickerWrapper {
cursor: pointer;
}
.dfa9830d78418b5a-packActions {
display: flex;
flex-direction: column;
gap: 8px;
}
.dfa9830d78418b5a-premiumButtonNitroWheel {
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
.dfa9830d78418b5a-premiumButtonInner {
align-items: center;
display: flex;
}
.theme-dark .dfa9830d78418b5a-countdownIcon {
color: var(--yellow-260);
}
.theme-light .dfa9830d78418b5a-popoutContent,
.theme-light .dfa9830d78418b5a-popoutLoader {
background-color: var(--background-surface-high);
box-shadow: var(--shadow-border), var(--shadow-high);
}
.theme-light .dfa9830d78418b5a-countdownIcon {
color: #ff8a00;
}
.dfa9830d78418b5a-nonInteractingSticker {
opacity: 0.5;
}
.abd7a8a2de1017e2-clickableSticker {
cursor: pointer;
}
.abd7a8a2de1017e2-stickerName {
display: inline-flex;
grid-gap: 4px;
}
.abd7a8a2de1017e2-stickerIcon {
height: 16px;
width: 16px;
-webkit-margin-end: 2px;
margin-inline-end: 2px;
}
.background-opacity-low .abd7a8a2de1017e2-clickableSticker {
opacity: 0.6;
}
.background-opacity-medium .abd7a8a2de1017e2-clickableSticker {
opacity: 0.7;
}
.background-opacity-high .abd7a8a2de1017e2-clickableSticker {
opacity: 0.8;
}
@use postcss-pxtorem;
._235ca3770d90ab7c-container {
align-items: flex-start;
color: var(--channels-default);
display: flex;
flex: 0 0 auto;
padding-bottom: 0.125rem;
padding-top: 0.125rem;
position: relative;
}
._235ca3770d90ab7c-compact {
-webkit-margin-start: -4ch;
margin-inline-start: -4ch;
}
._235ca3770d90ab7c-content {
font-size: 1rem;
font-weight: var(--font-weight-normal);
line-height: 1.375rem;
z-index: 1;
}
._235ca3770d90ab7c-content a {
color: var(--interactive-text-active);
cursor: pointer;
font-weight: var(--font-weight-medium);
}
._235ca3770d90ab7c-content ._235ca3770d90ab7c-actionAnchor {
color: var(--text-link);
}
.low-saturation ._235ca3770d90ab7c-content a {
color: var(--interactive-text-active);
}
.decorate-links ._235ca3770d90ab7c-content a {
text-decoration: none;
}
@media (-webkit-max-device-pixel-ratio: 1) {
.theme-light ._235ca3770d90ab7c-content {
font-weight: var(--font-weight-medium);
}
.theme-light ._235ca3770d90ab7c-content a {
font-weight: var(--font-weight-semibold);
}
}
._235ca3770d90ab7c-iconContainer {
align-items: center;
display: flex;
inset-inline-end: 100%;
justify-content: center;
padding-top: 0.25rem;
position: absolute;
width: 2.5rem;
}
._235ca3770d90ab7c-compact ._235ca3770d90ab7c-iconContainer {
-webkit-margin-end: 1rem;
margin-inline-end: 1rem;
}
.font-size-24 ._235ca3770d90ab7c-cozy ._235ca3770d90ab7c-iconContainer {
width: 3rem;
}
.font-size-20 ._235ca3770d90ab7c-cozy ._235ca3770d90ab7c-iconContainer {
width: 3.5rem;
}
.font-size-18 ._235ca3770d90ab7c-cozy ._235ca3770d90ab7c-iconContainer {
width: 4rem;
}
.font-size-12 ._235ca3770d90ab7c-cozy ._235ca3770d90ab7c-iconContainer,
.font-size-14 ._235ca3770d90ab7c-cozy ._235ca3770d90ab7c-iconContainer,
.font-size-15 ._235ca3770d90ab7c-cozy ._235ca3770d90ab7c-iconContainer,
.font-size-16 ._235ca3770d90ab7c-cozy ._235ca3770d90ab7c-iconContainer {
width: 4.5rem;
}
._235ca3770d90ab7c-compact ._235ca3770d90ab7c-iconContainer {
inset-inline-end: auto;
position: relative;
width: auto;
}
._235ca3770d90ab7c-icon {
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
._235ca3770d90ab7c-iconSize {
height: 1rem;
width: 1rem;
}
._235ca3770d90ab7c-action,
._235ca3770d90ab7c-actionAnchor {
-webkit-margin-start: 3px;
margin-inline-start: 3px;
}
._235ca3770d90ab7c-actionAnchor {
cursor: pointer;
}
._235ca3770d90ab7c-timestamp {
display: inline-block;
font-size: 0.75rem;
font-weight: var(--font-weight-normal);
letter-spacing: 0;
line-height: 1.375rem;
text-transform: none;
-webkit-margin-start: 6px;
color: var(--text-muted);
margin-inline-start: 6px;
}
@media (-webkit-max-device-pixel-ratio: 1) {
.theme-light ._235ca3770d90ab7c-timestamp {
font-weight: var(--font-weight-medium);
}
}
.background-opacity-low ._235ca3770d90ab7c-content {
color: var(--white);
text-shadow:
0 0 1px var(--primary-700),
1px 1px 0 var(--primary-700);
}
.background-opacity-low ._235ca3770d90ab7c-content a {
color: var(--interactive-text-active);
}
.background-opacity-high ._235ca3770d90ab7c-content,
.background-opacity-medium ._235ca3770d90ab7c-content {
color: var(--primary-100);
text-shadow:
0 0 1px var(--primary-600),
1px 1px 0 var(--primary-600);
}
.background-opacity-high ._235ca3770d90ab7c-content a,
.background-opacity-medium ._235ca3770d90ab7c-content a {
color: var(--interactive-text-active);
}
.background-opacity-low ._235ca3770d90ab7c-timestamp,
.background-opacity-medium ._235ca3770d90ab7c-timestamp {
color: var(--primary-200);
}
.background-opacity-high ._235ca3770d90ab7c-timestamp {
color: var(--primary-300);
}
._45eb719b9292f49d-iconContainer {
color: var(--icon-muted);
padding-top: 0.125rem;
}
._45eb719b9292f49d-content {
align-items: baseline;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0.25rem;
}
._45eb719b9292f49d-clickableEmoji {
cursor: pointer;
display: inline-block;
}
._45eb719b9292f49d-clickableEmoji:hover {
text-decoration: underline;
}
._45eb719b9292f49d-ctaReactionButton {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
._45eb719b9292f49d-ctaText {
align-items: center;
display: inline-flex;
gap: 0.3em;
height: 100%;
}
._45eb719b9292f49d-ctaEmoji {
height: var(--custom-emoji-size-emoji);
vertical-align: baseline;
width: var(--custom-emoji-size-emoji);
}
@use postcss-pxtorem;
._9271d23503a01b50-spine {
border-bottom: 2px solid var(--background-accent);
border-end-start-radius: 8px;
-webkit-border-start: 2px solid var(--background-accent);
align-self: auto !important;
border-inline-start: 2px solid var(--background-accent);
border-color: var(--border-subtle);
bottom: 29px;
inset-inline-start: -2.5rem;
position: absolute;
top: 0;
width: 2.25rem;
}
._9271d23503a01b50-spine._9271d23503a01b50-systemMessageSpine {
bottom: 32px;
inset-inline-start: -2rem;
width: 1.75rem;
}
._9271d23503a01b50-spine._9271d23503a01b50-cozy {
display: none;
}
._9271d23503a01b50-container {
background-color: var(--background-surface-high);
border: 1px solid var(--border-subtle);
border-radius: 4px;
cursor: pointer;
margin-top: 8px;
max-width: min(100%, 480px);
min-width: 0;
padding: 8px;
}
._9271d23503a01b50-systemMessageContainer {
margin-top: 0;
}
._9271d23503a01b50-topLine {
display: flex;
}
._9271d23503a01b50-name {
color: var(--text-strong);
-webkit-margin-end: 8px;
margin-inline-end: 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._9271d23503a01b50-cta,
._9271d23503a01b50-name {
font-size: 0.875rem;
font-weight: var(--font-weight-semibold);
line-height: 1.125rem;
}
._9271d23503a01b50-cta {
color: var(--text-link);
flex-shrink: 0;
}
._9271d23503a01b50-container:hover ._9271d23503a01b50-cta {
text-decoration: underline;
}
._9271d23503a01b50-bottomLine {
align-items: center;
display: flex;
margin-top: 2px;
}
._9271d23503a01b50-timestamp {
color: var(--text-muted);
flex-shrink: 0;
font-size: 0.875rem;
line-height: 1.125rem;
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
._9271d23503a01b50-clock {
-webkit-margin-start: 6px;
margin-inline-start: 6px;
}
.enable-forced-colors ._9271d23503a01b50-cta {
background-color: ButtonFace;
color: ButtonText;
text-decoration: underline;
}
.enable-forced-colors ._9271d23503a01b50-container {
border: 1px solid ButtonText;
}
.custom-theme-background ._9271d23503a01b50-container {
background-color: var(--background-mod-subtle);
}
:root {
--custom-app-message-embed-base-info-gap: 4px;
--custom-app-message-embed-base-info-top: calc(var(--custom-app-message-embed-base-info-gap) - 2px);
}
.c44293c4c682d5b1-infoWrapper {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--custom-app-message-embed-base-info-gap);
margin-top: var(--custom-app-message-embed-base-info-top);
}
.c44293c4c682d5b1-activityPresenceDetailsContainer {
align-items: center;
display: flex;
gap: 12px;
min-width: 0;
overflow: hidden;
}
.c44293c4c682d5b1-activityPresenceDetailsItemContainer {
align-items: center;
display: flex;
gap: 4px;
}
.c44293c4c682d5b1-activityPresenceDetailsItemContainer.c44293c4c682d5b1-truncatesText {
min-width: 0;
}
.c44293c4c682d5b1-activityPresenceDetailsItemIconContainer {
align-items: center;
display: flex;
}
.c44293c4c682d5b1-activePlayingWrapper {
display: flex;
gap: 4px;
}
._124d244cec9a932b-ephemeralMessage {
color: var(--text-muted);
font-size: 12px;
font-weight: var(--font-weight-normal);
margin-top: 4px;
}
._124d244cec9a932b-userAppsBetaContent {
display: inline-flex;
flex-direction: column;
line-height: 1.33;
}
._124d244cec9a932b-userAppsBetaContent p {
margin: 0;
}
._124d244cec9a932b-icon {
-webkit-margin-end: 4px;
margin-inline-end: 4px;
vertical-align: text-bottom;
}
@media (-webkit-max-device-pixel-ratio: 1) {
.theme-light ._124d244cec9a932b-ephemeralMessage {
font-weight: var(--font-weight-medium);
}
}
:root {
--custom-app-message-embed-base-info-gap: 4px;
--custom-app-message-embed-base-info-top: calc(var(--custom-app-message-embed-base-info-gap) - 2px);
}
.a4b24e590eb96b59-statusCounts {
align-items: center;
display: flex;
flex-flow: row wrap;
-webkit-padding-end: 16px;
max-width: 160px;
padding-inline-end: 16px;
}
.a4b24e590eb96b59-statusCounts.a4b24e590eb96b59-large {
-moz-column-gap: 8px;
column-gap: 8px;
max-width: 304px;
}
.a4b24e590eb96b59-status {
display: block;
flex: 0 0 auto;
-webkit-margin-end: 4px;
border-radius: 50%;
height: 8px;
margin-inline-end: 4px;
width: 8px;
}
.a4b24e590eb96b59-statusWrapper {
align-items: center;
display: flex;
flex: 0 1 auto;
flex-flow: nowrap;
min-width: 0;
}
.a4b24e590eb96b59-statusOnline {
background-color: var(--green-360);
}
.a4b24e590eb96b59-count {
flex: 0 1 auto;
-webkit-margin-end: 8px;
color: var(--interactive-text-default);
margin-inline-end: 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.a4b24e590eb96b59-statusOffline {
background-color: var(--primary-400);
}
.a4b24e590eb96b59-channel {
align-items: center;
display: flex;
-webkit-padding-end: 4px;
max-width: var(--custom-embedded-application-invite-image-width-large);
padding-inline-end: 4px;
}
.a4b24e590eb96b59-channel.a4b24e590eb96b59-ended {
max-width: var(--custom-embedded-application-invite-image-width-small);
}
.a4b24e590eb96b59-channelIcon {
color: var(--text-muted);
flex: 0 0 auto;
-webkit-padding-end: 2px;
padding-inline-end: 2px;
}
.a4b24e590eb96b59-infoWrapper {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--custom-app-message-embed-base-info-gap);
margin-top: var(--custom-app-message-embed-base-info-top);
}
._48c1c0768f2a2421-root {
flex-wrap: wrap;
margin-top: 2px;
position: relative;
}
._48c1c0768f2a2421-role,
._48c1c0768f2a2421-root {
display: flex;
}
._48c1c0768f2a2421-role {
align-items: center;
background: var(--background-secondary-alt);
border-radius: 4px;
box-sizing: border-box;
font-size: 12px;
font-weight: var(--font-weight-medium);
height: 22px;
margin-block: 0 4px;
margin-inline: 0 4px;
padding: 4px;
}
._48c1c0768f2a2421-roleRemoveButton {
position: relative;
}
._48c1c0768f2a2421-roleRemoveButtonCanRemove {
cursor: pointer;
}
._48c1c0768f2a2421-roleDot {
font-size: 1.34em;
}
._48c1c0768f2a2421-roleFlowerStar {
margin: 0 4px;
}
._48c1c0768f2a2421-roleRemoveIcon {
display: none;
height: 10px;
inset-inline-start: 50%;
margin-block: -5px 0;
margin-inline: -5px 0;
position: absolute;
top: 50%;
width: 10px;
}
._48c1c0768f2a2421-role:focus ._48c1c0768f2a2421-roleRemoveIcon,
._48c1c0768f2a2421-role:hover ._48c1c0768f2a2421-roleRemoveIcon,
._48c1c0768f2a2421-roleRemoveIconFocused ._48c1c0768f2a2421-roleRemoveIcon {
display: block;
}
._48c1c0768f2a2421-role:focus ._48c1c0768f2a2421-roleVerifiedIcon,
._48c1c0768f2a2421-role:hover ._48c1c0768f2a2421-roleVerifiedIcon,
._48c1c0768f2a2421-roleRemoveIconFocused ._48c1c0768f2a2421-roleVerifiedIcon {
display: none;
}
._48c1c0768f2a2421-roleName {
max-width: 200px;
-webkit-margin-end: 4px;
margin-inline-end: 4px;
overflow: hidden;
}
._48c1c0768f2a2421-roleNameOverflow {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._48c1c0768f2a2421-actionButton {
color: var(--interactive-text-active);
font-size: 11px;
justify-content: center;
line-height: 11px;
}
._48c1c0768f2a2421-overflowButton {
padding: 4px 8px;
}
._48c1c0768f2a2421-addButton {
padding: 4px 5px;
}
._48c1c0768f2a2421-addButtonIcon {
cursor: pointer;
height: 14px;
width: 14px;
}
._48c1c0768f2a2421-overflowRolesPopout {
background-color: var(--background-secondary-alt);
border-radius: 3px;
box-shadow: var(--legacy-elevation-high), var(--legacy-elevation-border);
padding: 8px;
width: 200px;
}
._48c1c0768f2a2421-overflowRolesPopoutArrowWrapper {
-webkit-margin-start: -8px;
height: 12px;
margin-inline-start: -8px;
overflow: hidden;
width: 16px;
}
._48c1c0768f2a2421-overflowRolesPopoutArrow {
background-color: var(--background-secondary-alt);
box-shadow: var(--legacy-elevation-high), var(--legacy-elevation-border);
height: 8px;
transform: rotate(45deg);
width: 8px;
}
._48c1c0768f2a2421-popoutBottom ._48c1c0768f2a2421-overflowRolesPopoutArrowWrapper {
bottom: 100%;
inset-inline-start: 50%;
position: absolute;
}
._48c1c0768f2a2421-popoutBottom ._48c1c0768f2a2421-overflowRolesPopoutArrow {
bottom: -4px;
inset-inline-start: 4px;
position: absolute;
}
._48c1c0768f2a2421-popoutTop ._48c1c0768f2a2421-overflowRolesPopoutArrowWrapper {
inset-inline-start: 50%;
position: absolute;
top: 100%;
}
._48c1c0768f2a2421-popoutTop ._48c1c0768f2a2421-overflowRolesPopoutArrow {
inset-inline-start: 4px;
position: absolute;
top: -4px;
}
._48c1c0768f2a2421-overflowRolesPopoutHeader {
margin-bottom: 8px;
}
._48c1c0768f2a2421-overflowRolesPopoutHeaderIcon {
-webkit-margin-end: 4px;
height: 12px;
margin-inline-end: 4px;
width: 12px;
}
._48c1c0768f2a2421-overflowRolesPopoutHeaderText {
color: var(--primary-400);
font-size: 12px;
font-weight: var(--font-weight-bold);
text-transform: uppercase;
}
.theme-dark ._48c1c0768f2a2421-overflowRolesPopout {
color: var(--opacity-white-80);
}
.theme-light ._48c1c0768f2a2421-overflowRolesPopout {
color: hsl(var(--primary-500-hsl) / 0.8);
}
._48c1c0768f2a2421-roleIcon {
-webkit-margin-end: 4px;
margin-inline-end: 4px;
vertical-align: middle;
}
.enable-forced-colors ._48c1c0768f2a2421-role {
border: 1px solid CanvasText;
}
.enable-forced-colors ._48c1c0768f2a2421-actionButton {
color: ButtonText;
}
.enable-forced-colors ._48c1c0768f2a2421-roleRemoveIcon {
background-color: ButtonFace;
border-radius: 100%;
color: ButtonText;
padding: 2px;
}
.enable-forced-colors ._48c1c0768f2a2421-roleRemoveIcon path {
fill: ButtonText !important;
}
._373b58a5c752510b-root {
display: flex;
flex-direction: column;
margin-bottom: 16px;
padding: 0 16px;
}
._373b58a5c752510b-rolesHeading {
margin-bottom: 4px;
}
._373b58a5c752510b-rolesList {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
._373b58a5c752510b-rolePill {
background: var(--background-base-lowest);
border-radius: var(--radius-sm);
color: var(--interactive-text-active);
height: 24px;
margin: 0;
padding: 4px;
}
._373b58a5c752510b-rolePill > :first-child {
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
._373b58a5c752510b-rolePill > div:last-child {
-webkit-margin-end: 2px;
margin-inline-end: 2px;
}
._373b58a5c752510b-rolePill > div:last-child span {
font-weight: var(--font-weight-semibold);
}
._083ae98ea5145b08-guildInviteContainer {
background: var(--background-surface-high);
border: 1px solid var(--border-subtle);
border-radius: 16px;
overflow: hidden;
position: relative;
width: 300px;
}
._083ae98ea5145b08-clickable {
cursor: pointer;
}
._083ae98ea5145b08-cardHeightMeasure {
align-items: flex-start;
border-radius: 16px;
display: flex;
flex-direction: column;
width: 100%;
}
._083ae98ea5145b08-cardHeightMeasure ._083ae98ea5145b08-banner {
height: 72px;
}
._083ae98ea5145b08-mainContent {
z-index: 0;
}
._083ae98ea5145b08-footer {
box-sizing: border-box;
width: 100%;
}
._083ae98ea5145b08-floatingFooter {
bottom: 0;
inset-inline: 0;
position: absolute;
z-index: 1;
}
._083ae98ea5145b08-gradient {
background: linear-gradient(180deg, transparent 0, var(--background-surface-high) 100%);
height: 48px;
width: 100%;
}
._083ae98ea5145b08-footerContent {
background: var(--background-surface-high);
}
._083ae98ea5145b08-collapsedFooterContent {
padding-top: 8px;
}
._083ae98ea5145b08-buttonContainer {
display: flex;
padding: 0 16px 16px;
}
._083ae98ea5145b08-hideDetailsButtonContainer {
margin: 0 16px;
}
._083ae98ea5145b08-inviteTitle {
overflow: hidden;
padding: 8px 12px;
text-overflow: ellipsis;
}
.d762d7a26da7a532-clipPill {
align-items: center;
background-color: var(--brand-500);
border-radius: var(--radius-xs);
display: flex;
gap: 4px;
inset-inline-start: 4px;
justify-content: center;
padding: 4px 8px;
position: absolute;
text-transform: uppercase;
top: 4px;
z-index: 1;
}
:root {
--custom-app-message-embed-base-info-gap: 4px;
--custom-app-message-embed-base-info-top: calc(var(--custom-app-message-embed-base-info-gap) - 2px);
}
._403f1d94ed070640-description {
margin-top: var(--custom-app-message-embed-base-info-top);
}
._403f1d94ed070640-description * {
font-weight: var(--font-weight-medium);
}
._403f1d94ed070640-info {
display: flex;
flex-direction: column;
gap: var(--custom-app-message-embed-base-info-gap);
margin-top: var(--custom-app-message-embed-base-info-top);
}
._403f1d94ed070640-tagline,
._403f1d94ed070640-timestampContainer {
align-items: center;
display: flex;
gap: 4px;
}
._403f1d94ed070640-timestampContainer {
min-width: 54px;
}
._403f1d94ed070640-tag:not(:first-of-type):before {
content: "∙";
padding: 0 3px;
}
._403f1d94ed070640-partyStatusWrapper {
display: flex;
gap: 4px;
}
._403f1d94ed070640-footer {
align-items: center;
background-color: var(--opacity-black-20);
color: var(--app-message-embed-secondary-text);
display: flex;
gap: 4px;
justify-content: center;
padding: 12px;
@container (max-width: 270px) {
flex-direction: column;
}
}
._403f1d94ed070640-footerSupportedPlatformIconsContainer {
gap: 4px;
}
._403f1d94ed070640-footerSupportedPlatformIconContainer,
._403f1d94ed070640-footerSupportedPlatformIconsContainer {
align-items: center;
display: flex;
justify-content: center;
}
._403f1d94ed070640-footerSupportedPlatformText {
@container (max-width: 270px) {
text-align: center;
}
}
._403f1d94ed070640-inlineApplicationText {
align-items: flex-end;
display: inline-flex;
flex-direction: row;
gap: 4px;
vertical-align: text-bottom;
}
.f8896c4f6be18f59-reactions {
align-items: center;
display: flex;
flex: 1 0 auto;
flex-wrap: wrap;
margin-bottom: -8px;
padding-bottom: 6px;
padding-top: 1px;
}
.f8896c4f6be18f59-icon {
height: 18px;
width: 18px;
}
.f8896c4f6be18f59-reactionBtn {
background-color: var(--background-mod-subtle);
color: var(--interactive-text-default);
cursor: pointer;
height: 18px;
margin-inline: 4px;
margin-bottom: 2px;
opacity: 0;
}
.f8896c4f6be18f59-reactionBtn:hover .f8896c4f6be18f59-icon {
color: var(--interactive-text-hover);
}
.f8896c4f6be18f59-reactionBtn.f8896c4f6be18f59-active .f8896c4f6be18f59-icon,
.f8896c4f6be18f59-reactionBtn:active .f8896c4f6be18f59-icon {
color: var(--interactive-text-active);
}
.f8896c4f6be18f59-reactionBtn:hover {
background-color: var(--background-mod-normal);
}
.f8896c4f6be18f59-reactionBtn.f8896c4f6be18f59-active,
.f8896c4f6be18f59-reactionBtn.f8896c4f6be18f59-visible,
.f8896c4f6be18f59-reactions:hover .f8896c4f6be18f59-reactionBtn {
opacity: 1;
}
.f8896c4f6be18f59-reactionBtn.f8896c4f6be18f59-forceShow {
background-color: var(--background-base-lower);
border: 1px solid transparent;
border-radius: 8px;
opacity: 1;
padding: 5px 7px;
-webkit-margin-start: 0;
margin-inline-start: 0;
margin-bottom: 4px;
}
.f8896c4f6be18f59-reactionBtn.f8896c4f6be18f59-forceShow:hover {
background-color: var(--background-base-low);
border-color: var(--opacity-white-20);
}
.f8896c4f6be18f59-hideEmoji {
opacity: 0;
}
.f8896c4f6be18f59-reaction {
border-radius: 8px;
box-sizing: border-box;
cursor: pointer;
flex-shrink: 0;
-webkit-margin-end: 4px;
background: var(--background-base-lower);
background-color: var(--background-mod-subtle);
border: 1px solid transparent;
margin-inline-end: 4px;
margin-bottom: 4px;
transition: none 0.1s ease;
transition-property: background-color, border-color;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.full-motion .f8896c4f6be18f59-reaction.f8896c4f6be18f59-shakeReaction {
animation: f8896c4f6be18f59-shake 0.5s;
animation-iteration-count: 1;
}
.f8896c4f6be18f59-reaction.f8896c4f6be18f59-reactionReadOnly {
cursor: not-allowed;
}
.f8896c4f6be18f59-reaction .emoji {
height: 20px;
margin: 2px 0;
min-height: auto;
min-width: auto;
width: 20px;
}
.f8896c4f6be18f59-reaction .emoji-text {
color: var(--text-default);
display: inline-block;
font-size: 20px;
font-variant-emoji: emoji;
vertical-align: -2px;
}
.f8896c4f6be18f59-reaction:hover {
background-color: var(--background-mod-normal);
border-color: var(--border-muted);
}
.f8896c4f6be18f59-reaction:hover .f8896c4f6be18f59-reactionCount {
color: var(--text-strong);
}
.f8896c4f6be18f59-reaction:active {
background-color: var(--background-mod-strong);
border-color: var(--border-strong);
}
.f8896c4f6be18f59-reaction:active .f8896c4f6be18f59-reactionCount {
color: var(--text-strong);
}
.f8896c4f6be18f59-reaction.f8896c4f6be18f59-reactionMe {
background-color: var(--opacity-blurple-24);
border-color: var(--blurple-50);
}
.f8896c4f6be18f59-reaction.f8896c4f6be18f59-reactionMe .f8896c4f6be18f59-reactionCount {
color: var(--text-brand);
}
.low-contrast .f8896c4f6be18f59-reaction.f8896c4f6be18f59-reactionMe {
background-color: var(--brand-15a);
border-color: var(--brand-50a);
}
.low-contrast .f8896c4f6be18f59-reaction.f8896c4f6be18f59-reactionMe .f8896c4f6be18f59-reactionCount {
color: var(--brand-300);
}
.f8896c4f6be18f59-reactionInner {
align-items: center;
display: flex;
padding: 2px 6px;
position: relative;
}
.f8896c4f6be18f59-reactionCount {
font-size: 14px;
font-weight: var(--font-weight-semibold);
-webkit-margin-start: 6px;
color: var(--text-subtle);
margin-inline-start: 6px;
text-align: center;
}
.f8896c4f6be18f59-remainingReactions {
align-self: stretch;
display: flex;
}
.theme-light .f8896c4f6be18f59-reaction:hover {
border-color: var(--opacity-black-20);
}
.theme-light .f8896c4f6be18f59-reaction.f8896c4f6be18f59-reactionMe {
background-color: var(--brand-160);
border-color: var(--brand-500);
}
.theme-light .f8896c4f6be18f59-reaction.f8896c4f6be18f59-reactionMe .f8896c4f6be18f59-reactionCount {
color: var(--brand-560);
}
.background-opacity-high .f8896c4f6be18f59-reaction,
.background-opacity-low .f8896c4f6be18f59-reaction,
.background-opacity-medium .f8896c4f6be18f59-reaction {
background-color: hsl(var(--primary-660-hsl) / 0.2);
}
.background-opacity-high .f8896c4f6be18f59-reactionCount,
.background-opacity-low .f8896c4f6be18f59-reactionCount,
.background-opacity-medium .f8896c4f6be18f59-reactionCount {
color: var(--white);
}
.background-opacity-high .f8896c4f6be18f59-reaction.f8896c4f6be18f59-reactionMe,
.background-opacity-low .f8896c4f6be18f59-reaction.f8896c4f6be18f59-reactionMe,
.background-opacity-medium .f8896c4f6be18f59-reaction.f8896c4f6be18f59-reactionMe {
background-color: var(--brand-50a);
}
.enable-forced-colors .f8896c4f6be18f59-reaction.f8896c4f6be18f59-reactionMe {
border-color: Highlight;
outline: 2px solid Highlight;
}
.f8896c4f6be18f59-premiumIcon {
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
.f8896c4f6be18f59-sparkles {
height: 32px;
inset-inline-start: -8px;
top: -8px;
width: 32px;
}
.f8896c4f6be18f59-burstGlow {
border-radius: 8px;
inset-inline: 0;
bottom: 0;
opacity: 0.35;
position: absolute;
top: 0;
z-index: -1;
}
@keyframes f8896c4f6be18f59-shake {
0% {
transform: translate(1px, 1px) rotate(0deg);
}
10% {
transform: translate(-1px, -1px) rotate(-1deg);
}
20% {
transform: translate(-2px) rotate(1deg);
}
30% {
transform: translate(2px, 1px) rotate(0deg);
}
40% {
transform: translate(1px, -1px) rotate(1deg);
}
50% {
transform: translate(-1px, 1px) rotate(-1deg);
}
60% {
transform: translate(-2px, 1px) rotate(0deg);
}
70% {
transform: translate(2px, 1px) rotate(-1deg);
}
80% {
transform: translate(-1px, -1px) rotate(1deg);
}
90% {
transform: translate(1px, 1px) rotate(0deg);
}
to {
transform: translate(1px, -1px) rotate(-1deg);
}
}
._23977d5b7cef7361-reactions {
align-items: center;
display: flex;
flex: 1 0 auto;
flex-wrap: wrap;
margin-bottom: -0.5rem;
padding-bottom: 0.375rem;
padding-top: 0.125rem;
}
._23977d5b7cef7361-icon {
height: 1.125rem;
width: 1.125rem;
}
._23977d5b7cef7361-reactionBtn {
background-color: var(--background-mod-subtle);
color: var(--interactive-text-default);
cursor: pointer;
height: 1.125rem;
margin-inline: 0.25rem;
margin-bottom: 0.125rem;
opacity: 0;
}
._23977d5b7cef7361-reactionBtn:hover ._23977d5b7cef7361-icon {
color: var(--interactive-text-hover);
}
._23977d5b7cef7361-reactionBtn._23977d5b7cef7361-active ._23977d5b7cef7361-icon,
._23977d5b7cef7361-reactionBtn:active ._23977d5b7cef7361-icon {
color: var(--interactive-text-active);
}
._23977d5b7cef7361-reactionBtn:hover {
background-color: var(--background-mod-normal);
border: 1px solid var(--border-muted);
}
._23977d5b7cef7361-reactionBtn._23977d5b7cef7361-active,
._23977d5b7cef7361-reactionBtn._23977d5b7cef7361-visible,
._23977d5b7cef7361-reactions:hover ._23977d5b7cef7361-reactionBtn {
opacity: 1;
}
._23977d5b7cef7361-reactionBtn._23977d5b7cef7361-forceShow {
border: 0.0625rem solid transparent;
border-radius: 0.5rem;
opacity: 1;
padding: 0.3125rem 0.4375rem;
-webkit-margin-start: 0;
margin-inline-start: 0;
margin-bottom: 0.25rem;
}
.high-contrast-mode ._23977d5b7cef7361-reactionBtn._23977d5b7cef7361-forceShow {
border-color: var(--border-subtle);
}
.high-contrast-mode ._23977d5b7cef7361-reactionBtn._23977d5b7cef7361-forceShow:hover {
border-color: var(--border-strong);
}
._23977d5b7cef7361-hideEmoji {
opacity: 0;
}
._23977d5b7cef7361-reaction,
._23977d5b7cef7361-reactionBtn {
background-color: var(--background-mod-subtle);
}
._23977d5b7cef7361-reaction:hover,
._23977d5b7cef7361-reactionBtn:hover {
background-color: var(--background-mod-normal);
border-color: var(--border-muted);
}
._23977d5b7cef7361-reaction:active,
._23977d5b7cef7361-reactionBtn:active {
background-color: var(--background-mod-strong);
border-color: var(--border-strong);
}
._23977d5b7cef7361-reaction:active ._23977d5b7cef7361-reactionCount,
._23977d5b7cef7361-reactionBtn:active ._23977d5b7cef7361-reactionCount {
color: var(--text-strong);
}
._23977d5b7cef7361-reaction {
border-radius: 0.5rem;
box-sizing: border-box;
cursor: pointer;
flex-shrink: 0;
-webkit-margin-end: 0.25rem;
background: var(--background-base-lower);
background-color: var(--background-mod-subtle);
border: 0.0625rem solid transparent;
margin-inline-end: 0.25rem;
margin-bottom: 0.25rem;
transition: none 0.1s ease;
transition-property: background-color, border-color;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.high-contrast-mode ._23977d5b7cef7361-reaction {
border-color: var(--border-subtle);
}
.high-contrast-mode ._23977d5b7cef7361-reaction:hover {
border-color: var(--border-strong);
}
.full-motion ._23977d5b7cef7361-reaction._23977d5b7cef7361-shakeReaction {
animation: _23977d5b7cef7361-shake 0.5s;
animation-iteration-count: 1;
}
._23977d5b7cef7361-reaction._23977d5b7cef7361-reactionReadOnly {
cursor: not-allowed;
}
._23977d5b7cef7361-reaction .emoji {
height: 1.25rem;
margin: 0.125rem 0;
min-height: auto;
min-width: auto;
width: 1.25rem;
}
._23977d5b7cef7361-reaction .emoji-text {
color: var(--text-default);
display: inline-block;
font-size: 1.25rem;
font-variant-emoji: emoji;
vertical-align: -0.125rem;
}
._23977d5b7cef7361-reaction:hover ._23977d5b7cef7361-reactionCount {
color: var(--text-strong);
}
._23977d5b7cef7361-reaction._23977d5b7cef7361-reactionMe {
background-color: var(--message-reacted-background-default);
border-color: var(--blurple-50);
}
._23977d5b7cef7361-reaction._23977d5b7cef7361-reactionMe ._23977d5b7cef7361-reactionCount {
color: var(--message-reacted-text-default);
}
.low-contrast ._23977d5b7cef7361-reaction._23977d5b7cef7361-reactionMe {
background-color: var(--brand-15a);
border-color: var(--brand-50a);
}
.low-contrast ._23977d5b7cef7361-reaction._23977d5b7cef7361-reactionMe ._23977d5b7cef7361-reactionCount {
color: var(--brand-300);
}
._23977d5b7cef7361-reactionInner {
align-items: center;
display: flex;
padding: 0.125rem 0.375rem;
position: relative;
}
._23977d5b7cef7361-reactionCount {
font-weight: var(--font-weight-semibold);
-webkit-margin-start: 0.375rem;
color: var(--text-subtle);
margin-inline-start: 0.375rem;
text-align: center;
}
._23977d5b7cef7361-remainingReactions {
align-self: stretch;
display: flex;
}
.theme-light ._23977d5b7cef7361-reaction._23977d5b7cef7361-reactionMe {
background-color: var(--brand-160);
border-color: var(--brand-500);
}
.theme-light ._23977d5b7cef7361-reaction._23977d5b7cef7361-reactionMe ._23977d5b7cef7361-reactionCount {
color: var(--brand-560);
}
.background-opacity-high ._23977d5b7cef7361-reaction,
.background-opacity-low ._23977d5b7cef7361-reaction,
.background-opacity-medium ._23977d5b7cef7361-reaction {
background-color: hsl(var(--primary-660-hsl) / 0.2);
}
.background-opacity-high ._23977d5b7cef7361-reactionCount,
.background-opacity-low ._23977d5b7cef7361-reactionCount,
.background-opacity-medium ._23977d5b7cef7361-reactionCount {
color: var(--white);
}
.background-opacity-high ._23977d5b7cef7361-reaction._23977d5b7cef7361-reactionMe,
.background-opacity-low ._23977d5b7cef7361-reaction._23977d5b7cef7361-reactionMe,
.background-opacity-medium ._23977d5b7cef7361-reaction._23977d5b7cef7361-reactionMe {
background-color: var(--brand-50a);
}
.enable-forced-colors ._23977d5b7cef7361-reaction._23977d5b7cef7361-reactionMe {
border-color: Highlight;
outline: 0.125rem solid Highlight;
}
._23977d5b7cef7361-premiumIcon {
-webkit-margin-end: 0.25rem;
margin-inline-end: 0.25rem;
}
._23977d5b7cef7361-sparkles {
height: 2rem;
inset-inline-start: -0.5rem;
top: -0.5rem;
width: 2rem;
}
._23977d5b7cef7361-burstGlow {
border-radius: 0.5rem;
inset-inline: 0;
bottom: 0;
opacity: 0.35;
position: absolute;
top: 0;
z-index: -1;
}
@keyframes _23977d5b7cef7361-shake {
0% {
transform: translate(0.0625rem, 0.0625rem) rotate(0deg);
}
10% {
transform: translate(-0.0625rem, -0.0625rem) rotate(-1deg);
}
20% {
transform: translate(-0.125rem) rotate(1deg);
}
30% {
transform: translate(0.125rem, 0.0625rem) rotate(0deg);
}
40% {
transform: translate(0.0625rem, -0.0625rem) rotate(1deg);
}
50% {
transform: translate(-0.0625rem, 0.0625rem) rotate(-1deg);
}
60% {
transform: translate(-0.125rem, 0.0625rem) rotate(0deg);
}
70% {
transform: translate(0.125rem, 0.0625rem) rotate(-1deg);
}
80% {
transform: translate(-0.0625rem, -0.0625rem) rotate(1deg);
}
90% {
transform: translate(0.0625rem, 0.0625rem) rotate(0deg);
}
to {
transform: translate(0.0625rem, -0.0625rem) rotate(-1deg);
}
}
.custom-theme-background ._23977d5b7cef7361-reaction {
background-color: var(--background-mod-subtle);
border-color: var(--border-strong);
}
.custom-theme-background ._23977d5b7cef7361-reaction._23977d5b7cef7361-reactionMe {
background-color: hsla(var(--brand-500-hsl) / 0.15);
border-color: var(--brand-500);
}
.custom-theme-background ._23977d5b7cef7361-reaction._23977d5b7cef7361-reactionMe ._23977d5b7cef7361-reactionCount {
color: var(--text-brand);
}
._0524ae94b63742ac-emojiContainer {
isolation: isolate;
position: absolute;
}
._0524ae94b63742ac-emoji {
z-index: 1;
}
._0524ae94b63742ac-cannon {
height: 100%;
position: absolute;
width: 100%;
}
._7e9193992eca61a3-container {
align-items: flex-start;
background-color: var(--background-surface-high);
border-radius: 8px;
box-shadow: var(--elevation-high), var(--elevation-stroke);
display: flex;
padding: 16px;
-webkit-margin-start: var(--space-8);
margin-inline-start: var(--space-8);
}
._7e9193992eca61a3-content {
-webkit-margin-start: 24px;
margin-inline-start: 24px;
max-width: 320px;
}
._7e9193992eca61a3-buttonContainer {
display: flex;
margin-top: 16px;
}
._7e9193992eca61a3-cancel {
color: var(--interactive-text-default);
-webkit-margin-start: 24px;
margin-inline-start: 24px;
}
._7e9193992eca61a3-cancel:hover {
color: var(--interactive-text-hover);
}
._7e9193992eca61a3-cancel:active {
color: var(--interactive-text-active);
}
._7e9193992eca61a3-image {
height: 64px;
width: 64px;
}
.ade26d0ba2a38724-artContainer {
border-radius: 8px;
box-shadow: none;
filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.24));
overflow: hidden;
}
.ade26d0ba2a38724-modalContainer {
width: 400px;
}
.ade26d0ba2a38724-bodyContainer {
overflow: hidden;
}
.a9ddb3f9f511689f-effect {
bottom: 0;
overflow: hidden;
pointer-events: none;
position: absolute;
}
.a9ddb3f9f511689f-effectsWrapper {
display: flex;
height: 100%;
justify-content: center;
position: relative;
z-index: 1;
}
.b7f4b43fe1b6e285-container {
display: flex;
flex-direction: row;
height: 100vh;
min-height: 1px;
-webkit-padding-start: var(--space-24);
padding-inline-start: var(--space-24);
}
.b7f4b43fe1b6e285-spacer {
border-bottom: 1px solid var(--border-subtle);
padding-top: var(--custom-modal-padding-md);
}
.b7f4b43fe1b6e285-scroller {
flex: 0 0 auto;
width: 106px;
-webkit-border-end: 1px solid var(--border-subtle);
border-inline-end: 1px solid var(--border-subtle);
margin-top: var(--custom-modal-padding-md);
-webkit-padding-end: var(--space-24);
padding-inline-end: var(--space-24);
}
.b7f4b43fe1b6e285-reactorsContainer {
display: flex;
flex-direction: column;
flex-grow: 1;
min-width: 1px;
}
.b7f4b43fe1b6e285-reactionDefault,
.b7f4b43fe1b6e285-reactionSelected {
align-items: center;
border-radius: 8px;
display: flex;
flex-direction: row;
margin-bottom: 4px;
overflow: hidden;
padding: 0 4px;
}
.b7f4b43fe1b6e285-reactionDefault {
cursor: pointer;
}
.b7f4b43fe1b6e285-reactionDefault:hover {
background-color: var(--background-mod-subtle);
}
.b7f4b43fe1b6e285-emoji {
height: 24px;
min-height: auto;
min-width: auto;
object-fit: contain;
padding-block: 4px;
padding-inline: 4px 8px;
vertical-align: middle;
width: 24px;
}
.b7f4b43fe1b6e285-emojiText {
display: inline-block;
vertical-align: -3px;
}
.b7f4b43fe1b6e285-burstEmojiSection {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
padding: 32px 0;
position: relative;
}
.b7f4b43fe1b6e285-hideEmoji {
opacity: 0;
}
.b7f4b43fe1b6e285-burstEmoji {
height: 32px;
margin-bottom: 8px;
object-fit: contain;
width: 32px;
}
.b7f4b43fe1b6e285-spinner {
height: 52px;
width: 100%;
}
.b7f4b43fe1b6e285-reactor {
box-sizing: border-box;
height: 52px;
margin-inline: 24px 2px;
white-space: nowrap;
}
.b7f4b43fe1b6e285-name,
.b7f4b43fe1b6e285-reactor {
overflow: hidden;
text-overflow: ellipsis;
}
.b7f4b43fe1b6e285-name {
display: flex;
flex: 1;
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
}
.b7f4b43fe1b6e285-ellipsized {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.b7f4b43fe1b6e285-nickname {
line-height: 17px;
}
.b7f4b43fe1b6e285-username {
font-weight: var(--font-weight-medium);
}
.b7f4b43fe1b6e285-tagFaded {
flex-shrink: 10;
-webkit-padding-start: 6px;
opacity: 0.6;
padding-inline-start: 6px;
}
.b7f4b43fe1b6e285-discriminator {
color: var(--text-muted);
}
.b7f4b43fe1b6e285-remove {
opacity: 0;
}
.b7f4b43fe1b6e285-remove:focus-within {
opacity: 1;
}
.b7f4b43fe1b6e285-reactor:hover .b7f4b43fe1b6e285-remove {
opacity: 1;
}
.b7f4b43fe1b6e285-reactors {
--custom-list-scrollbar-top-padding: 12px;
border-radius: var(--radius-sm);
flex: 1;
-webkit-padding-end: var(--space-24);
padding-inline-end: var(--space-24);
padding-top: var(--custom-list-scrollbar-top-padding);
}
.b7f4b43fe1b6e285-reactors::-webkit-scrollbar-thumb,
.b7f4b43fe1b6e285-reactors::-webkit-scrollbar-track {
margin-top: var(--custom-list-scrollbar-top-padding);
}
.b7f4b43fe1b6e285-reactionSelected {
background-color: var(--background-mod-normal);
}
.b7f4b43fe1b6e285-reactionSelected:hover {
background-color: var(--background-mod-strong);
}
.b7f4b43fe1b6e285-reactionDefault:hover {
background-color: var(--interactive-background-hover);
}
._263e47919001b033-effect {
margin-bottom: -2px;
}
._263e47919001b033-effects {
bottom: 0;
display: flex;
justify-content: center;
position: absolute;
}
.e5f2cb44095833d3-effect {
margin-bottom: -0.125rem;
}
.e5f2cb44095833d3-effects {
bottom: 0;
display: flex;
justify-content: center;
position: absolute;
}
.b49891f8a231dbff-reactionTooltip {
background: var(--background-surface-high);
border-radius: var(--radius-xs);
box-shadow: var(--shadow-border), var(--shadow-high);
color: var(--text-default);
font-weight: var(--font-weight-medium);
max-width: 288px;
overflow: hidden;
padding: 16px;
}
.b49891f8a231dbff-reactionTooltipEmoji {
height: 32px;
width: 32px;
}
.b49891f8a231dbff-reactionTooltipText {
-webkit-margin-start: 12px;
margin-inline-start: 12px;
}
.b49891f8a231dbff-reactionTooltipInner {
align-items: center;
display: flex;
-webkit-hyphens: auto;
hyphens: auto;
pointer-events: all;
word-break: break-word;
}
.b49891f8a231dbff-reactionTooltipInner:hover {
cursor: pointer;
}
.b49891f8a231dbff-reactionTooltipInner:hover a {
text-decoration: underline;
}
.b49891f8a231dbff-burstReactionTooltipInner {
pointer-events: all;
}
.b49891f8a231dbff-burstReactionTooltipInner:hover {
cursor: pointer;
}
.b49891f8a231dbff-burstReactionTooltipInner:hover a {
text-decoration: underline;
}
.b49891f8a231dbff-burstReactionTooltipMessage {
align-items: center;
display: flex;
flex-direction: row;
-webkit-hyphens: auto;
hyphens: auto;
pointer-events: all;
word-break: break-word;
}
.b49891f8a231dbff-burstReactionTooltipSpacer {
border-top: 1px solid var(--border-subtle);
margin-top: 8px;
padding-top: 8px;
}
.b49891f8a231dbff-burstReactionTooltipPrompt {
align-items: center;
display: flex;
margin: 12px 0 0;
width: 100%;
}
.b49891f8a231dbff-burstReactionTooltipPromptClickable {
pointer-events: all;
}
.b49891f8a231dbff-burstReactionTooltipPromptClickable:hover {
cursor: pointer;
}
.b49891f8a231dbff-burstReactionTooltipPromptClickable:hover a {
text-decoration: underline;
}
.b49891f8a231dbff-burstReactionTooltipNitroIcon {
-webkit-margin-end: 5px;
margin-inline-end: 5px;
}
.b49891f8a231dbff-burstReactionTooltipUpsellCta {
background: linear-gradient(270deg, var(--premium-tier-2-pink-for-gradients) 0, var(--premium-tier-2-pink-for-gradients-2) 33.63%, var(--premium-tier-2-purple-for-gradients) 100%);
border-radius: 4px;
margin-top: 8px;
width: 100%;
}
.ceba9ee0649c7834-mainContainer.ceba9ee0649c7834-compact {
-webkit-padding-start: 0;
padding-inline-start: 0;
-webkit-margin-start: -3.95rem;
margin-inline-start: -3.95rem;
}
.ceba9ee0649c7834-actions {
display: flex;
flex-direction: row;
gap: 16px;
}
.ceba9ee0649c7834-embed {
margin: 8px 0;
}
._844a1643a3d6da9f-mainContainer._844a1643a3d6da9f-compact {
-webkit-padding-start: 0;
padding-inline-start: 0;
-webkit-margin-start: -3.95rem;
margin-inline-start: -3.95rem;
}
.b851f5f658eb4f6c-thankYouCard {
border-radius: 4px;
display: flex;
flex-direction: row;
height: 200px;
justify-content: center;
margin: 12px 0;
position: relative;
width: 440px;
}
.b851f5f658eb4f6c-thankYouText {
align-self: center;
min-width: 0;
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.b851f5f658eb4f6c-userAvatar {
border-radius: 54px;
width: 100%;
}
.e887d4618a81f17f-CTAMessage {
margin-bottom: 2px;
}
._9ec1abfece1036cc-badge {
-webkit-margin-start: 16px;
margin-inline-start: 16px;
}
._9ec1abfece1036cc-userAvatar {
border-radius: 54px;
width: 100%;
}
._9ec1abfece1036cc-svg {
contain: paint;
}
.d74b42b5f71c0afa-welcomeCard {
background: no-repeat 50% url(/assets/2f7179a17c81ca41.svg);
border-radius: 4px;
display: flex;
flex-direction: row;
height: 200px;
justify-content: center;
margin: 12px 0;
position: relative;
width: 440px;
}
.d74b42b5f71c0afa-welcomeCardText {
align-self: center;
margin: 8px;
min-width: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.d74b42b5f71c0afa-welcomeCardBadge {
-webkit-margin-start: 16px;
margin-inline-start: 16px;
}
.f69538e19b6eaacd-embed {
margin-bottom: var(--custom-message-spacing-vertical-container-cozy);
margin-top: 8px;
}
.f69538e19b6eaacd-container {
align-items: center;
background-color: var(--background-surface-high);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
display: flex;
gap: 0 8px;
max-width: 376px;
padding: 8px 16px;
}
.f69538e19b6eaacd-containerWithImage {
padding-block: 8px;
padding-inline: 8px 16px;
}
.f69538e19b6eaacd-imageContainer {
align-items: center;
background: var(--background-mod-subtle);
border-radius: var(--radius-sm);
display: flex;
flex-shrink: 0;
height: 40px;
justify-content: center;
width: 40px;
}
.f69538e19b6eaacd-description {
display: flex;
flex-direction: column;
-webkit-margin-end: auto;
gap: 2px 0;
margin-inline-end: auto;
overflow: hidden;
}
.f69538e19b6eaacd-victorAnswer {
align-items: center;
display: flex;
gap: 0 4px;
}
.f69538e19b6eaacd-victorAnswerText {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.f69538e19b6eaacd-victorIcon {
flex-shrink: 0;
}
.c0ec5e504d1e3f46-systemMessageContainer {
-webkit-border-start: 2px solid #fff;
border-inline-start: 2px solid #fff;
padding: 12px 16px;
-webkit-margin-end: 40px;
margin-inline-end: 40px;
}
.c0ec5e504d1e3f46-embedContainer {
background: var(--background-mod-subtle);
border-radius: 16px;
margin-top: 16px;
padding: 28px 24px !important;
width: 532px;
}
.c0ec5e504d1e3f46-image {
-webkit-margin-end: 24px;
margin-inline-end: 24px;
}
.c0ec5e504d1e3f46-content {
width: 100%;
}
.c0ec5e504d1e3f46-title {
margin: 4px 0 !important;
}
.c0ec5e504d1e3f46-buttonContainer {
margin-top: 24px;
}
.c9b8e359e4aa2e4f-container {
align-items: center;
align-self: stretch;
display: flex;
justify-content: space-between;
padding: 8px 0;
}
.c9b8e359e4aa2e4f-usernameContainer {
align-items: flex-start;
display: flex;
flex: 1 0 0;
flex-direction: column;
gap: 2px;
height: 32px;
justify-content: center;
}
.c9b8e359e4aa2e4f-userName {
text-overflow: ellipsis;
}
.c9b8e359e4aa2e4f-muted {
opacity: 10%;
}
.c9b8e359e4aa2e4f-userAvatar {
aspect-ratio: 1/1;
justify-content: center;
-webkit-margin-end: 12px;
margin-inline-end: 12px;
}
.c9b8e359e4aa2e4f-checkbox,
.c9b8e359e4aa2e4f-userAvatar {
align-items: center;
display: flex;
}
.c9b8e359e4aa2e4f-checkbox {
height: 100%;
}
._9eabf70a7c9c2f84-emptySearchResultsContainer {
align-items: center;
display: flex;
flex-direction: column;
gap: 8px;
justify-content: center;
padding: 32px 16px;
text-align: center;
}
._2441a9f87347380f-trialRecipientContainer {
align-items: flex-start;
align-self: stretch;
display: flex;
flex-direction: column;
gap: var(--space-16);
}
._2441a9f87347380f-trialRecipientRow {
align-items: center;
align-self: stretch;
border: 1px solid var(--border-muted);
border-radius: 12px;
display: flex;
gap: 12px;
overflow: hidden;
padding: 12px;
}
._2441a9f87347380f-trialRecipientRowDisplayName {
align-items: flex-start;
display: inline-block;
flex: 1 0 0;
flex-direction: column;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._2441a9f87347380f-trialRecipientRowDMContainer {
align-items: center;
background: var(--scoped-control-background-secondary-default, hsla(240, 4%, 61%, 0.12));
border: 1px solid var(--scoped-control-border-secondary-default, hsla(240, 4%, 61%, 0.16));
border-radius: 8px;
cursor: pointer;
display: flex;
gap: var(--space-4);
justify-content: center;
min-height: 32px;
min-width: 64px;
padding: var(--space-4) var(--space-12);
}
._2441a9f87347380f-trialRecipientRowDMCTA {
font-family: var(--font-primary);
font-size: 14px;
font-style: normal;
font-weight: var(--font-weight-medium, 500);
line-height: 18px;
text-align: center;
}
._2441a9f87347380f-errorDisplayName,
._2441a9f87347380f-userName {
color: var(--text-muted);
}
._2441a9f87347380f-erroredAvatar {
opacity: 0.5;
}
._45744b58fc48f274-searchbar {
margin: 0 auto;
}
._45744b58fc48f274-list {
height: 260px;
padding: 0;
width: 100%;
}
._45744b58fc48f274-footer {
align-content: center;
align-items: center;
display: flex;
width: 100%;
}
._45744b58fc48f274-submit {
height: 40px;
margin: 20px 16px 21px;
width: 100%;
}
.theme-dark ._45744b58fc48f274-footerSeparator {
box-shadow: 0 -1px 0 hsl(var(--primary-630-hsl) / 0.6);
}
.theme-light ._45744b58fc48f274-footerSeparator {
box-shadow: 0 -1px 0 hsl(var(--primary-100-hsl) / 0.6);
}
._076c1e9e7f8f918a-invalidWrapper {
border-radius: 3px;
display: block;
overflow: hidden;
position: relative;
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
}
._076c1e9e7f8f918a-invalidWrapper img {
position: absolute;
}
._076c1e9e7f8f918a-invalid {
background-image: url(/assets/eb4644cbe2f3e90f.svg);
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
height: 102px;
width: 200px;
}
._076c1e9e7f8f918a-buttonContainer {
display: flex;
flex-direction: row;
justify-content: space-between;
}
._076c1e9e7f8f918a-metadata {
color: var(--primary-400);
display: flex;
flex-direction: column;
font-size: 12px;
font-weight: var(--font-weight-semibold);
justify-content: flex-end;
}
._076c1e9e7f8f918a-container {
align-items: stretch;
flex-direction: row-reverse;
margin: 0;
min-height: 0;
overflow: hidden;
position: relative;
width: 660px;
}
._076c1e9e7f8f918a-systemMessageContainerDMEmbedXP {
-webkit-border-start: 2px solid var(--border-normal);
align-items: flex-start;
border-inline-start: 2px solid var(--border-normal);
display: flex;
gap: 16px;
padding: 12px 16px;
width: 1097px;
}
._076c1e9e7f8f918a-systemMessageContainerIcon {
padding-top: 0;
}
._076c1e9e7f8f918a-containerDMEmbedXP {
align-items: center;
background: var(--background-mod-subtle, hsla(240, 4%, 61%, 0.12));
border-radius: 16px;
display: flex;
gap: 24px;
height: 200px;
margin-top: 16px;
padding: 28px 24px;
width: 580px;
}
._076c1e9e7f8f918a-contentDMEmbedXP {
display: flex;
flex-direction: column;
gap: 24px;
}
._076c1e9e7f8f918a-contentTextDMEmbedXP {
display: flex;
flex-direction: column;
gap: 4px;
line-height: 20px;
}
._076c1e9e7f8f918a-imgDMEmbedXP {
overflow: visible;
}
._076c1e9e7f8f918a-buttonContainerDMEmbedXP {
align-items: center;
color: #000;
display: flex;
font-family: var(--font-primary);
font-size: 16px;
font-style: normal;
font-weight: var(--font-weight-medium, 500);
gap: 24px;
line-height: 20px;
}
._076c1e9e7f8f918a-tile {
align-items: stretch;
background-color: var(--background-secondary-alt);
border-radius: 5px;
box-shadow: 0 0 0 hsl(var(--primary-700-hsl) / 0.15);
display: flex;
flex-direction: row-reverse;
min-height: 0;
overflow: hidden;
transform: translateZ(0);
transition:
background-color 0.2s ease,
box-shadow 0.2s ease;
width: 660px;
}
._076c1e9e7f8f918a-title {
flex: 0 1 auto;
font-size: 18px;
font-weight: var(--font-weight-semibold);
line-height: 1.2;
}
._076c1e9e7f8f918a-tagline {
color: var(--text-default);
flex: 1 1 auto;
font-size: 15px;
line-height: 1.3;
margin-top: 8px;
overflow: hidden;
}
._076c1e9e7f8f918a-actions {
flex: 0 1 auto;
justify-self: flex-end;
margin-top: 12px;
}
._076c1e9e7f8f918a-media {
align-items: center;
display: flex;
flex: 0 0 278px;
position: relative;
}
._076c1e9e7f8f918a-birthdayReferral,
._076c1e9e7f8f918a-referral {
flex: auto;
height: 100%;
margin: 0;
max-height: none;
overflow: hidden;
padding-top: 0;
position: relative;
}
._076c1e9e7f8f918a-referral {
background: url(/assets/e790daeb039ddb5a.svg) 100% no-repeat;
}
._076c1e9e7f8f918a-birthdayReferral {
background: url(/assets/eb40cc3e32c7e70f.svg) 100% no-repeat;
}
._076c1e9e7f8f918a-description {
color: var(--text-strong);
display: flex;
flex: 1 1 auto;
flex-direction: column;
padding: 12px;
position: relative;
}
.theme-dark ._076c1e9e7f8f918a-tile:hover {
background-color: var(--primary-800);
}
.theme-dark ._076c1e9e7f8f918a-invalid {
background-image: url(/assets/e4a502bfc6589d65.svg);
}
._0557e24e260df123-ticketIcon {
display: block;
height: 1rem;
width: 1rem;
}
.f5d1e2df173e5dbd-welcomeCTA {
margin-bottom: 2px;
}
._75e8ee170883da62-content {
background: var(--background-mod-muted);
border: 1px solid var(--border-subtle);
border-radius: 12px;
max-height: 166px;
overflow: hidden;
}
._75e8ee170883da62-contentCoachmark {
background: var(--background-surface-high);
border: 1.4px solid hsl(var(--background-surface-high-hsl) / 0.25);
}
._75e8ee170883da62-innerContent {
align-items: center;
display: flex;
flex-direction: row;
}
._75e8ee170883da62-innerGlow {
box-shadow: inset 0 0 10px rgba(255, 186, 219, 0.2);
}
._75e8ee170883da62-outerGlow {
box-shadow: 0 0 20px var(--background-surface-high);
}
._75e8ee170883da62-innerContentCoachmark {
display: flex;
flex-direction: column;
}
._75e8ee170883da62-subContent {
align-items: center;
display: flex;
flex: 1;
margin: 16px;
min-width: 0;
}
._75e8ee170883da62-avatars {
flex-shrink: 0;
position: relative;
}
._75e8ee170883da62-recipientUserAvatar,
._75e8ee170883da62-recipientUserAvatarCoachmark {
background-color: var(--background-surface-high);
}
._75e8ee170883da62-currentUserAvatar,
._75e8ee170883da62-currentUserAvatarCoachmark {
background-color: var(--background-surface-high);
border: 2px solid var(--background-surface-high);
bottom: -3px;
inset-inline-end: -2px;
position: absolute;
}
._75e8ee170883da62-textContainer {
display: flex;
flex-direction: column;
-webkit-margin-start: 12px;
margin-inline-start: 12px;
}
._75e8ee170883da62-subHeaderContainer {
align-items: center;
display: flex;
flex-direction: row;
gap: 4px;
}
._75e8ee170883da62-subHeaderText {
color: #fff;
opacity: 0.8;
}
._75e8ee170883da62-subHeaderTextCoachmark {
color: #000;
opacity: 0.8;
}
._75e8ee170883da62-button {
flex: 1;
}
._75e8ee170883da62-buttonSecondary {
color: hsla(0, 0%, 100%, 0.5);
}
._75e8ee170883da62-buttonSecondaryCoachmark {
color: var(--control-secondary-border-default);
}
._75e8ee170883da62-buttonContentContainer {
align-items: center;
display: flex;
justify-content: center;
}
._75e8ee170883da62-buttonText {
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
._75e8ee170883da62-buttonTextPrimary {
color: var(--white);
}
._75e8ee170883da62-buttonTextPrimaryCoachmark {
color: #fff;
}
._75e8ee170883da62-buttonTextSecondary {
color: var(--white);
}
._75e8ee170883da62-buttonTextSecondaryCoachmark {
color: var(--button-outline-primary-text);
}
._75e8ee170883da62-buttonContainer {
display: flex;
-webkit-padding-end: 16px;
align-items: center;
flex-shrink: 0;
gap: 16px;
padding-inline-end: 16px;
}
._75e8ee170883da62-connector {
background-color: var(--background-surface-high);
height: 2px;
pointer-events: none;
position: absolute;
width: 9px;
}
._75e8ee170883da62-rightPopoutConnector {
inset-inline-start: -9px;
top: 12%;
}
._75e8ee170883da62-leftPopoutConnector {
inset-inline-start: 100%;
top: 12%;
}
.theme-dark ._75e8ee170883da62-subHeaderTextCoachmark {
color: #fff;
opacity: 0.8;
}
._4ea495c7880c982f-messageContentContainer {
padding-bottom: 8px;
padding-top: 16px;
}
._4ea495c7880c982f-iconContainer {
height: 100%;
}
._4ea495c7880c982f-icon {
fill: var(--brand-500);
}
._0d94843a1fa4ae32-sm {
height: 28px;
width: 28px;
}
._0d94843a1fa4ae32-md {
height: 68px;
width: 68px;
}
.fb5defab41ad4d68-icon {
height: 1.125rem;
width: 1.125rem;
}
.fb5defab41ad4d68-embed {
align-items: flex-start;
background: var(--background-base-lowest);
border-radius: var(--radius-md);
cursor: pointer;
display: flex;
gap: 12px;
justify-content: center;
max-width: 350px;
padding: 12px;
}
.fb5defab41ad4d68-embed,
.fb5defab41ad4d68-text {
align-self: stretch;
}
.fb5defab41ad4d68-title {
margin-bottom: 6px;
margin-top: 3.5px;
}
.fb5defab41ad4d68-parentContainer a,
.fb5defab41ad4d68-parentContainer span,
.fb5defab41ad4d68-parentContainer time {
display: inline;
}
.fb5defab41ad4d68-img {
height: 66px;
width: 66px;
}
._850153d91b1c1883-container {
background: var(--background-secondary-alt);
border-radius: var(--space-8);
color: var(--text-strong);
display: flex;
flex-grow: 1;
padding: var(--space-16);
}
.theme-light ._850153d91b1c1883-container {
background: var(--background-base-low);
}
._850153d91b1c1883-buttonContainer {
-webkit-margin-start: var(--space-24);
margin-inline-start: var(--space-24);
padding-top: 2px;
}
._850153d91b1c1883-messageContentContainer {
padding-top: var(--space-12);
}
._850153d91b1c1883-iconContainer {
height: 100%;
}
._850153d91b1c1883-icon {
fill: var(--premium-nitro-pink-light);
}
._850153d91b1c1883-nitroBadge {
align-items: center;
display: flex;
margin-top: 2px;
}
._850153d91b1c1883-nitroBadgeIcon {
fill: var(--premium-nitro-pink-light);
}
._850153d91b1c1883-nitroBadgeText {
color: var(--premium-nitro-pink-light);
-webkit-margin-start: var(--space-4);
margin-inline-start: var(--space-4);
}
._850153d91b1c1883-premiumIcon {
height: 16px;
margin: 0;
}
._44c9ad8d149f0821-embedCard {
background-color: var(--background-base-lower);
border-radius: 8px;
padding: 12px;
}
._44c9ad8d149f0821-embedCard._44c9ad8d149f0821-compact {
padding: 4px;
}
._44c9ad8d149f0821-embedCard ._44c9ad8d149f0821-header {
font-family: var(--font-primary) !important;
font-weight: 400 !important;
margin: 0 !important;
padding: 0 !important;
}
._44c9ad8d149f0821-withFooter {
border-radius: 8px 8px 0 0;
}
._44c9ad8d149f0821-messageContainer {
-webkit-margin-start: -8px;
margin-inline-start: -8px;
}
._444920e965051ae6-mainContainer {
margin-bottom: 2px;
margin-top: 2px;
}
._444920e965051ae6-mainContainer._444920e965051ae6-compact {
-webkit-padding-start: 0;
padding-inline-start: 0;
-webkit-margin-start: -3.95rem;
margin-inline-start: -3.95rem;
}
._444920e965051ae6-content {
font-size: 16px;
line-height: 24px;
white-space: pre-wrap;
word-wrap: break-word;
color: var(--text-default);
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
word-break: break-word;
}
._444920e965051ae6-content a {
color: var(--interactive-text-active);
cursor: pointer;
font-weight: var(--font-weight-medium);
}
._444920e965051ae6-content ._444920e965051ae6-actionAnchor {
color: var(--text-link);
}
._444920e965051ae6-content._444920e965051ae6-compact {
-webkit-padding-start: 0;
padding-inline-start: 0;
}
._444920e965051ae6-embedCard {
margin-top: 4px;
}
._444920e965051ae6-embedCard._444920e965051ae6-compact {
margin-top: 0;
}
._444920e965051ae6-embedCard._444920e965051ae6-selected {
background-color: var(--background-secondary-alt);
}
._444920e965051ae6-embedCard._444920e965051ae6-isClickable {
cursor: pointer;
}
._444920e965051ae6-messageContent._444920e965051ae6-compact {
-webkit-padding-start: 3.3rem;
padding-inline-start: 3.3rem;
}
._444920e965051ae6-messageContent ._444920e965051ae6-channelNameContainer {
display: flex;
}
._444920e965051ae6-messageContent ._444920e965051ae6-channelNameContainer ._444920e965051ae6-channelName {
background-color: var(--background-base-lower);
color: var(--text-muted);
}
._444920e965051ae6-messageContent ._444920e965051ae6-channelName {
align-items: center;
color: var(--text-link);
display: flex;
flex-direction: row;
font-weight: var(--font-weight-medium);
justify-content: center;
}
._444920e965051ae6-messageContent ._444920e965051ae6-channelIcon {
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
._444920e965051ae6-iconContainer {
align-items: center;
display: flex;
inset-inline-end: 100%;
justify-content: center;
padding-top: 0;
position: absolute;
width: 2.5rem;
}
._444920e965051ae6-compact ._444920e965051ae6-iconContainer {
-webkit-margin-end: 1rem;
margin-inline-end: 1rem;
}
.font-size-24 ._444920e965051ae6-cozy ._444920e965051ae6-iconContainer {
width: 3rem;
}
.font-size-20 ._444920e965051ae6-cozy ._444920e965051ae6-iconContainer {
width: 3.5rem;
}
.font-size-18 ._444920e965051ae6-cozy ._444920e965051ae6-iconContainer {
width: 4rem;
}
.font-size-12 ._444920e965051ae6-cozy ._444920e965051ae6-iconContainer,
.font-size-14 ._444920e965051ae6-cozy ._444920e965051ae6-iconContainer,
.font-size-15 ._444920e965051ae6-cozy ._444920e965051ae6-iconContainer,
.font-size-16 ._444920e965051ae6-cozy ._444920e965051ae6-iconContainer {
width: 4.5rem;
}
._444920e965051ae6-compact ._444920e965051ae6-iconContainer {
inset-inline-end: auto;
position: relative;
width: auto;
}
._444920e965051ae6-avatarContainer {
align-items: center;
background-color: var(--background-base-lowest);
border-radius: 50%;
display: flex;
height: 40px;
justify-content: center;
width: 40px;
}
._444920e965051ae6-usernameContainer {
font-family: var(--font-primary) !important;
font-weight: 400 !important;
margin: 0 !important;
padding: 0 !important;
}
._444920e965051ae6-usernameContainer ._444920e965051ae6-username {
-webkit-margin-end: 4px;
font-weight: var(--font-weight-semibold);
margin-inline-end: 4px;
}
._444920e965051ae6-usernameContainer ._444920e965051ae6-systemTag {
-webkit-margin-end: 4px;
margin-inline-end: 4px;
margin-top: 0;
}
._444920e965051ae6-usernameContainer._444920e965051ae6-compact {
-webkit-padding-start: 0;
padding-inline-start: 0;
-webkit-margin-start: -24px;
margin-inline-start: -24px;
}
._444920e965051ae6-centeredRowContainer {
align-items: center;
display: flex;
flex-direction: row;
}
._444920e965051ae6-dotMargin {
margin-inline: 8px;
}
._444920e965051ae6-buttonContainer {
-webkit-margin-start: -8px;
margin-inline-start: -8px;
}
._444920e965051ae6-footerIcon {
vertical-align: center;
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
._444920e965051ae6-footerAction {
display: flex;
padding: 8px;
}
._444920e965051ae6-dot {
background-color: var(--background-mod-subtle);
border-radius: 50%;
height: 4px;
width: 4px;
}
._444920e965051ae6-spanCorrection {
align-items: center;
flex-wrap: wrap;
white-space: pre;
}
._444920e965051ae6-compact ._444920e965051ae6-spanCorrection,
._444920e965051ae6-spanCorrection {
display: flex !important;
flex-direction: row;
}
._444920e965051ae6-footerContainer {
background-color: var(--background-base-lowest);
border-radius: 0 0 8px 8px;
line-height: 20px;
padding: 2px 18px 4px;
}
._444920e965051ae6-footerContainer._444920e965051ae6-compact {
-webkit-margin-start: 3.3rem;
margin-inline-start: 3.3rem;
}
._444920e965051ae6-annotationRow {
background-color: var(--background-secondary-alt);
border-radius: 4px;
line-height: 20px;
margin-top: 4px;
padding: 4px 8px 6px;
}
._444920e965051ae6-alertActionIcon {
vertical-align: middle;
-webkit-padding-start: 6px;
color: var(--text-muted);
padding-inline-start: 6px;
}
._444920e965051ae6-alertActionSetCompletedIcon {
color: var(--text-feedback-positive);
vertical-align: middle;
}
._444920e965051ae6-alertActionsIconContainer {
-webkit-margin-start: auto;
margin-inline-start: auto;
}
._444920e965051ae6-titleCase {
text-transform: capitalize;
}
.e8c23ede33f83e45-dropdownArrowHitbox {
align-items: center;
display: flex;
}
.e8c23ede33f83e45-dropdownArrowHitbox:hover .e8c23ede33f83e45-dropdownArrow {
opacity: 1;
}
.e8c23ede33f83e45-dropdownArrow {
flex: 1;
opacity: 0.2;
transition: opacity 0.2s ease;
}
.e8c23ede33f83e45-arrowSeparator {
background-color: currentColor;
opacity: 0.2;
width: 1px;
}
.e8c23ede33f83e45-dropdownSmall {
width: var(--custom-dropdown-button-small-dropdown-size) + var(--custom-dropdown-button-hitbox-padding);
}
.e8c23ede33f83e45-dropdownSmall .e8c23ede33f83e45-arrowSeparator {
height: var(--custom-dropdown-button-small-dropdown-size) - var(--custom-dropdown-button-separator-padding);
}
.e8c23ede33f83e45-dropdownSmall .e8c23ede33f83e45-dropdownArrow {
height: var(--custom-dropdown-button-small-dropdown-size);
width: var(--custom-dropdown-button-small-dropdown-size);
}
.e8c23ede33f83e45-dropdownMedium {
width: var(--custom-dropdown-button-medium-dropdown-size) + var(--custom-dropdown-button-hitbox-padding);
}
.e8c23ede33f83e45-dropdownMedium .e8c23ede33f83e45-arrowSeparator {
height: var(--custom-dropdown-button-medium-dropdown-size) - var(--custom-dropdown-button-separator-padding);
}
.e8c23ede33f83e45-dropdownMedium .e8c23ede33f83e45-dropdownArrow {
height: var(--custom-dropdown-button-medium-dropdown-size);
width: var(--custom-dropdown-button-medium-dropdown-size);
}
.e8c23ede33f83e45-dropdownLarge {
width: var(--custom-dropdown-button-large-dropdown-size) + var(--custom-dropdown-button-hitbox-padding);
}
.e8c23ede33f83e45-dropdownLarge .e8c23ede33f83e45-arrowSeparator {
height: var(--custom-dropdown-button-large-dropdown-size) - var(--custom-dropdown-button-separator-padding);
}
.e8c23ede33f83e45-dropdownLarge .e8c23ede33f83e45-dropdownArrow {
height: var(--custom-dropdown-button-large-dropdown-size);
width: var(--custom-dropdown-button-large-dropdown-size);
}
._2948739da8327684-notice {
align-items: center;
background: linear-gradient(90deg, var(--color-scoped-expressive-background-nitro-1-start, rgba(179, 38, 156, 0.7)) 0, var(--color-scoped-expressive-background-nitro-1-end, rgba(20, 20, 203, 0.7)) 100%), var(--background-base-lowest);
display: flex;
height: 54px;
position: relative;
z-index: 101;
}
@supports not ((grid-template-columns: subgrid) and (white-space-collapse: collapse)) {
._2948739da8327684-notice {
border-start-start-radius: 0;
}
}
@supports (grid-template-columns: subgrid) and (white-space-collapse: collapse) {
._2948739da8327684-notice {
grid-area: notice;
}
}
._2948739da8327684-noticeContent {
align-items: center;
display: flex;
flex: 1;
gap: var(--space-16);
justify-content: center;
}
._2948739da8327684-noticeText strong {
font-weight: var(--font-weight-semibold);
}
._2948739da8327684-closeButton {
margin-inline: auto var(--space-12);
}
.b68a355f2d944f42-premiumIcon {
position: relative;
top: 6px;
-webkit-margin-end: 8px;
height: 24px;
margin-inline-end: 8px;
width: 24px;
}
.b68a355f2d944f42-platformIcon {
display: inline-block;
height: 28px;
margin-top: -4px;
width: 28px;
-webkit-margin-end: 10px;
margin-inline-end: 10px;
position: relative;
vertical-align: middle;
}
.b68a355f2d944f42-platformIcon + .b68a355f2d944f42-platformIcon {
-webkit-margin-start: -10px;
margin-inline-start: -10px;
}
.b68a355f2d944f42-giftIcon {
-webkit-margin-end: 4px;
margin-inline-end: 4px;
vertical-align: text-bottom;
}
.b68a355f2d944f42-icon {
display: inline-block;
height: 20px;
vertical-align: middle;
width: 20px;
-webkit-margin-start: 10px;
margin-inline-start: 10px;
margin-top: -3px;
position: relative;
}
.b68a355f2d944f42-icon + .b68a355f2d944f42-icon {
-webkit-margin-start: 6px;
margin-inline-start: 6px;
}
.b68a355f2d944f42-iconWindows {
-webkit-mask-image: url(/assets/20dd0e244b9a7065.svg);
mask-image: url(/assets/20dd0e244b9a7065.svg);
}
.b68a355f2d944f42-iconApple,
.b68a355f2d944f42-iconWindows {
background-color: currentColor;
}
.b68a355f2d944f42-iconApple {
-webkit-mask-image: url(/assets/d11dc1928431aa27.svg);
mask-image: url(/assets/d11dc1928431aa27.svg);
}
.b68a355f2d944f42-iconAndroid {
background-color: currentColor;
-webkit-mask-image: url(/assets/f625814fc53c325e.svg);
mask-image: url(/assets/f625814fc53c325e.svg);
}
.b68a355f2d944f42-iconUSFlag {
background-image: url(/assets/423c2b95bd0fdafb.png);
background-position: top;
background-repeat: no-repeat;
background-size: 85%;
-webkit-margin-end: 7px;
margin-inline-end: 7px;
margin-top: 0;
}
.b68a355f2d944f42-icon + .b68a355f2d944f42-btn {
-webkit-margin-start: 20px;
margin-inline-start: 20px;
}
.b68a355f2d944f42-textLink {
color: var(--white);
text-decoration: underline;
-webkit-padding-start: 10px;
padding-inline-start: 10px;
-webkit-app-region: no-drag;
}
.b68a355f2d944f42-textLinkSmall {
font-size: 12px;
}
.b68a355f2d944f42-testModeSKUSelector {
-webkit-margin-start: 16px;
height: 24px;
margin-inline-start: 16px;
}
.b68a355f2d944f42-premiumLogo {
display: inline-block;
height: 13px;
position: relative;
top: 2px;
width: 51px;
-webkit-margin-end: 20px;
background-image: url(/assets/a3541a1173e706be.svg);
background-repeat: no-repeat;
background-size: 100%;
margin-inline-end: 20px;
}
.b68a355f2d944f42-premiumText {
font-weight: var(--font-weight-medium);
}
.b68a355f2d944f42-premiumAction {
-webkit-margin-start: 20px;
margin-inline-start: 20px;
}
.b68a355f2d944f42-ellipsis {
-webkit-margin-start: 7px;
margin-inline-start: 7px;
}
.b68a355f2d944f42-quarantineLearnMoreLink {
-webkit-margin-start: 10px;
margin-inline-start: 10px;
text-decoration: underline;
}
.b68a355f2d944f42-errorCodeNoticeText {
-webkit-margin-start: var(--space-8);
margin-inline-start: var(--space-8);
}
.b68a355f2d944f42-errorCodeNoticeClickable {
cursor: pointer;
}
._7b7504fd98ddbf64-text {
display: inline-block;
}
._7b7504fd98ddbf64-text,
._7b7504fd98ddbf64-text a {
color: currentColor;
}
._7b7504fd98ddbf64-text a {
text-decoration: underline;
}
._7b7504fd98ddbf64-premiumIcon {
position: relative;
top: 6px;
-webkit-margin-end: 8px;
height: 24px;
margin-inline-end: 8px;
width: 24px;
}
._36c3e39becc399ad-notice {
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
}
._36c3e39becc399ad-guildIcon {
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
._36c3e39becc399ad-guildName {
color: inherit;
}
._36c3e39becc399ad-guildName:hover {
text-decoration: underline;
}
._36c3e39becc399ad-actionButton {
top: 0;
-webkit-margin-start: 12px;
margin-inline-start: 12px;
}
._36c3e39becc399ad-actionButtonInner {
align-items: center;
display: flex;
gap: 4px;
}
._30f280c215966c1a-notice {
align-items: center;
background-color: var(--brand-600);
box-shadow: none;
color: var(--white);
display: flex;
height: 40px;
justify-content: center;
padding: 0 8px;
}
._30f280c215966c1a-notice._30f280c215966c1a-error {
background-color: var(--status-danger);
}
._30f280c215966c1a-button {
align-items: center;
font-weight: var(--font-weight-semibold);
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
padding: 4px 8px;
}
._30f280c215966c1a-button:hover {
background-color: var(--brand-530);
}
._30f280c215966c1a-error > ._30f280c215966c1a-button:hover {
background-color: var(--red-430);
}
._30f280c215966c1a-header {
color: var(--white);
display: inline;
-webkit-margin-end: 16px;
margin-inline-end: 16px;
}
._8441993cd87690ee-backButtonInner {
display: flex;
gap: 8px;
padding: 2px 0;
}
._8441993cd87690ee-backButton:hover {
background-color: var(--brand-530);
}
._8441993cd87690ee-backNotice {
background-color: var(--brand-600);
border-radius: 0;
padding: 8px;
}
._8441993cd87690ee-closeButton {
height: 100%;
}
._09ccca11226b11ad-container {
background-color: var(--background-surface-high);
border-radius: 4px;
box-shadow: var(--shadow-border), var(--shadow-high);
margin-top: 4px;
max-width: 250px;
overflow: hidden;
padding: 8px 8px 4px;
}
._09ccca11226b11ad-search {
margin: 0 8px 8px;
}
._09ccca11226b11ad-roles {
max-height: 300px;
overflow-y: scroll;
padding: 0 8px 8px;
}
._09ccca11226b11ad-role {
align-items: center;
border-radius: 4px;
cursor: pointer;
display: flex;
flex-grow: 0;
justify-content: space-between;
padding: 8px;
}
._09ccca11226b11ad-role:hover {
background-color: var(--background-base-lower);
}
._09ccca11226b11ad-role._09ccca11226b11ad-disabled {
opacity: 0.5;
}
._09ccca11226b11ad-role._09ccca11226b11ad-disabled:hover {
background-color: var(--background-surface-high);
}
._09ccca11226b11ad-label {
color: var(--text-default);
font-size: 14px;
line-height: 18px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-webkit-margin-end: 8px;
font-weight: var(--font-weight-medium);
margin-inline-end: 8px;
}
._09ccca11226b11ad-iconContainer {
border: 2px solid var(--interactive-text-default);
border-radius: 4px;
display: flex;
flex-shrink: 0;
height: 16px;
width: 16px;
}
._09ccca11226b11ad-iconContainer._09ccca11226b11ad-checked {
background-color: var(--brand-500);
border-color: var(--brand-500);
}
.c9e42fe11bb9448d-settingsWrapper {
background-color: var(--brand-600);
inset-inline-end: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 2000;
}
.c9e42fe11bb9448d-settingsWrapper.c9e42fe11bb9448d-osx .c9e42fe11bb9448d-backButton {
-webkit-margin-start: 76px;
margin-inline-start: 76px;
}
.c9e42fe11bb9448d-settingsWrapper.c9e42fe11bb9448d-windows {
top: 22px;
}
.c9e42fe11bb9448d-settingsWrapper.c9e42fe11bb9448d-windows .c9e42fe11bb9448d-backButton {
-webkit-margin-start: 0;
margin-inline-start: 0;
}
.c9e42fe11bb9448d-backButton {
position: absolute;
}
.c9e42fe11bb9448d-notice {
background-color: var(--brand-600);
color: var(--white);
height: 40px;
justify-content: space-between;
padding: 0 8px;
}
.c9e42fe11bb9448d-notice,
.c9e42fe11bb9448d-noticeContents {
align-items: center;
display: flex;
}
.c9e42fe11bb9448d-noticeContents {
flex: 1 1 auto;
justify-content: center;
}
.c9e42fe11bb9448d-noticeText {
font-weight: var(--font-weight-semibold);
}
.c9e42fe11bb9448d-previewWarning {
line-height: 0;
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
.c9e42fe11bb9448d-button {
font-size: 12px;
font-weight: var(--font-weight-semibold);
line-height: 16px;
-webkit-margin-start: 16px;
align-items: center;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
margin-inline-start: 16px;
padding: 4px 8px;
}
.c9e42fe11bb9448d-button:hover {
background-color: var(--brand-530);
}
.c9e42fe11bb9448d-buttonInner {
display: flex;
}
.c9e42fe11bb9448d-backArrow {
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
.c9e42fe11bb9448d-selectCaret {
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
.c9e42fe11bb9448d-closeButton {
background: url(/assets/26a3dd69161dbf47.svg) no-repeat;
background-position: 50% 55%;
background-size: 10px 10px;
cursor: pointer;
height: 36px;
inset-inline-end: 0;
opacity: 0.5;
position: absolute;
top: 0;
transition: opacity 0.2s;
width: 36px;
-webkit-app-region: no-drag;
}
.c9e42fe11bb9448d-closeButton:hover {
opacity: 1;
}
.c9e42fe11bb9448d-rolesList {
align-items: flex-start;
background-color: var(--background-surface-high);
border-radius: 4px;
display: flex;
flex-direction: column;
gap: 8px;
padding: 8px;
}
.c5cd6ac154c385c9-notice {
background-color: var(--brand-600);
color: var(--white);
display: flex;
height: 40px;
justify-content: center;
padding: 0 8px;
}
.c5cd6ac154c385c9-button,
.c5cd6ac154c385c9-notice {
align-items: center;
}
.c5cd6ac154c385c9-button {
font-weight: var(--font-weight-semibold);
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
padding: 4px 8px;
}
.c5cd6ac154c385c9-button:hover {
background-color: var(--brand-530);
}
.c5cd6ac154c385c9-back {
bottom: 0;
height: 24px;
inset-inline-start: 8px;
margin: auto;
position: absolute;
top: 0;
}
.c5cd6ac154c385c9-iconButton {
align-items: center;
display: flex;
}
.c5cd6ac154c385c9-arrow {
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
.c5cd6ac154c385c9-header {
display: inline;
-webkit-margin-end: 16px;
color: var(--white);
margin-inline-end: 16px;
}
._141609682dcf4db4-optionContainer {
display: flex;
flex-direction: column;
gap: 4px;
}
._141609682dcf4db4-clickableRow {
align-items: center;
border-radius: 8px;
display: flex;
gap: 12px;
padding: 8px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
._141609682dcf4db4-clickableRow:hover {
background: var(--background-mod-normal);
}
._141609682dcf4db4-indicatorWrapper {
align-items: center;
display: flex;
flex-shrink: 0;
}
._141609682dcf4db4-labelContainer {
display: flex;
flex: 1;
flex-direction: column;
gap: 4px;
}
._141609682dcf4db4-label {
align-items: center;
display: flex;
}
._141609682dcf4db4-textInputWrapper {
-webkit-padding-start: 40px;
padding-inline-start: 40px;
}
.b5a371a294fa8a63-container {
gap: 12px;
}
.b5a371a294fa8a63-choicesContainer,
.b5a371a294fa8a63-container {
display: flex;
flex-direction: column;
}
.b5a371a294fa8a63-choicesContainer {
gap: 4px;
}
.b5a371a294fa8a63-choiceRow {
align-items: center;
display: flex;
}
.b5a371a294fa8a63-noChoices {
font-size: 14px;
}
._3cb1194f78853623-container {
display: flex;
flex-direction: column;
gap: 12px;
}
._18c16840301e58cf-container {
display: flex;
flex-direction: column;
gap: 16px;
white-space: normal;
}
._18c16840301e58cf-container ol,
._18c16840301e58cf-container ul {
margin-bottom: 24px;
margin-inline: 20px 0;
}
._2513ed8609d10741-header {
align-items: center;
justify-content: space-between;
}
._2513ed8609d10741-headerContent {
align-items: center;
display: flex;
gap: 12px;
}
._2513ed8609d10741-content {
display: flex;
flex-direction: column;
gap: 48px;
}
._2513ed8609d10741-loading {
padding: 24px;
text-align: center;
}
._477aab310b6de2fc-container {
align-items: center;
display: flex;
flex-direction: row;
gap: var(--space-12);
justify-content: center;
}
._477aab310b6de2fc-buttonGroup {
margin: var(--space-4) 0;
width: unset;
}
._477aab310b6de2fc-blocked {
align-items: center;
display: flex;
}
._477aab310b6de2fc-blockedIcon {
margin-inline: var(--space-12) var(--space-4);
}
._477aab310b6de2fc-blockedText {
font-size: 12px;
font-weight: var(--font-weight-normal);
}
._477aab310b6de2fc-noIcon {
-webkit-margin-start: var(--space-12);
margin-inline-start: var(--space-12);
}
.b99f57e338f8c028-mainContainer.b99f57e338f8c028-compact {
-webkit-padding-start: 0;
padding-inline-start: 0;
-webkit-margin-start: -3.95rem;
margin-inline-start: -3.95rem;
}
.b99f57e338f8c028-content {
font-size: 16px;
line-height: 24px;
white-space: pre-wrap;
word-wrap: break-word;
color: var(--text-default);
display: flex;
flex-direction: column;
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
word-break: break-word;
}
.b99f57e338f8c028-content a {
color: var(--interactive-text-active);
cursor: pointer;
font-weight: var(--font-weight-medium);
}
.b99f57e338f8c028-content .b99f57e338f8c028-actionAnchor {
color: var(--text-link);
}
.b99f57e338f8c028-content.b99f57e338f8c028-compact {
-webkit-padding-start: 0;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
padding-inline-start: 0;
}
.b99f57e338f8c028-flexLineBreak {
flex-basis: 100%;
}
.b99f57e338f8c028-embedCard {
background-color: var(--background-base-lower);
border-radius: 8px;
display: flex;
flex-direction: column;
margin-bottom: 12px;
margin-top: 4px;
overflow: hidden;
-webkit-margin-start: 0;
margin-inline-start: 0;
}
.b99f57e338f8c028-embedCard.b99f57e338f8c028-compact {
-webkit-margin-start: 3.3rem;
margin-inline-start: 3.3rem;
}
.b99f57e338f8c028-cardContent {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
}
.b99f57e338f8c028-cardHeader {
align-items: center;
display: flex;
flex-direction: row;
gap: 4px;
}
.b99f57e338f8c028-cardHeaderContianer {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: 2px;
}
.b99f57e338f8c028-subheader {
gap: 8px;
}
.b99f57e338f8c028-cardFooter,
.b99f57e338f8c028-subheader {
align-items: center;
display: flex;
flex-direction: row;
}
.b99f57e338f8c028-cardFooter {
background-color: var(--background-secondary-alt);
padding: 4px;
}
.b99f57e338f8c028-iconContainer {
align-items: center;
display: flex;
inset-inline-end: 100%;
justify-content: center;
padding-top: 0;
position: absolute;
width: 2.5rem;
}
.b99f57e338f8c028-compact .b99f57e338f8c028-iconContainer {
-webkit-margin-end: 1rem;
margin-inline-end: 1rem;
}
.font-size-24 .b99f57e338f8c028-cozy .b99f57e338f8c028-iconContainer {
width: 3rem;
}
.font-size-20 .b99f57e338f8c028-cozy .b99f57e338f8c028-iconContainer {
width: 3.5rem;
}
.font-size-18 .b99f57e338f8c028-cozy .b99f57e338f8c028-iconContainer {
width: 4rem;
}
.font-size-12 .b99f57e338f8c028-cozy .b99f57e338f8c028-iconContainer,
.font-size-14 .b99f57e338f8c028-cozy .b99f57e338f8c028-iconContainer,
.font-size-15 .b99f57e338f8c028-cozy .b99f57e338f8c028-iconContainer,
.font-size-16 .b99f57e338f8c028-cozy .b99f57e338f8c028-iconContainer {
width: 4.5rem;
}
.b99f57e338f8c028-compact .b99f57e338f8c028-iconContainer {
inset-inline-end: auto;
position: relative;
width: auto;
}
.b99f57e338f8c028-usernameContainer {
font-family: var(--font-primary) !important;
font-weight: 400 !important;
margin: 0 !important;
padding: 0 !important;
}
.b99f57e338f8c028-usernameContainer .b99f57e338f8c028-username {
-webkit-margin-end: 4px;
font-weight: var(--font-weight-semibold);
margin-inline-end: 4px;
}
.b99f57e338f8c028-usernameContainer .b99f57e338f8c028-systemTag {
-webkit-margin-end: 2px;
margin-inline-end: 2px;
margin-top: 2px;
}
.b99f57e338f8c028-usernameContainer.b99f57e338f8c028-compact {
-webkit-padding-start: 0;
padding-inline-start: 0;
-webkit-margin-start: -24px;
margin-inline-start: -24px;
}
.b99f57e338f8c028-centeredRowContainer {
align-items: center;
display: flex;
flex-direction: row;
}
.b99f57e338f8c028-dotMargin {
margin-inline: 8px;
}
.b99f57e338f8c028-footerIcon {
vertical-align: center;
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
.b99f57e338f8c028-footerAction {
display: flex;
padding: 8px;
}
.b99f57e338f8c028-spanCorrection {
flex-wrap: wrap;
white-space: pre;
}
.b99f57e338f8c028-compact .b99f57e338f8c028-spanCorrection,
.b99f57e338f8c028-spanCorrection {
display: flex !important;
flex-direction: row;
}
.b99f57e338f8c028-alertsEnabledSubHeader {
align-items: center;
display: flex;
gap: 4px;
}
.b99f57e338f8c028-alertsEnabledSubHeaderAvatarUsername {
align-items: center;
cursor: pointer;
display: flex;
}
.b99f57e338f8c028-dotSeparatedRow {
gap: 4px;
}
.b99f57e338f8c028-dotSeparatedRow,
.b99f57e338f8c028-footerRow {
align-items: center;
display: flex;
flex-direction: row;
}
.b99f57e338f8c028-dot {
background-color: var(--background-mod-subtle);
border-radius: 50%;
height: 4px;
width: 4px;
}
._9e50d2e803f6f49a-applicationName {
display: inline-flex;
}
._9e50d2e803f6f49a-systemMessage > a:last-of-type {
color: var(--text-link);
}
._2facc4e5ac4a717a-messageContent {
display: inline-block;
}
._2facc4e5ac4a717a-alertIcon {
color: var(--text-feedback-warning);
height: 16px;
width: 16px;
}
.e8c01855fc7a4d95-content p {
margin-bottom: 0;
margin-top: 0;
}
.e8c01855fc7a4d95-content a:last-of-type {
color: var(--text-link);
}
.e8c01855fc7a4d95-gameContainer {
color: var(--text-default);
font-weight: var(--font-weight-medium);
}
.e8c01855fc7a4d95-inlineIcon {
margin-bottom: 2px;
vertical-align: middle;
}
.e9ab2f5e4e7d625b-stageSystemMessage {
color: var(--text-strong);
}
.e9ab2f5e4e7d625b-iconContainer {
color: var(--text-muted);
padding-top: 0;
}
.c085c782c83c36f8-thumbnailStackGallery {
position: relative;
}
.c085c782c83c36f8-gallery-height-1 {
height: 102px;
width: 183px;
}
.c085c782c83c36f8-gallery-height-2 {
height: 114px;
width: 183px;
}
.c085c782c83c36f8-gallery-height-3 {
height: 123px;
width: 183px;
}
.c085c782c83c36f8-gallery-height-max {
height: 131.5px;
width: 183px;
}
.c085c782c83c36f8-thumbnailGallery {
border-radius: 4px;
inset-inline-start: 50%;
object-fit: cover;
position: absolute;
transform: translate(-50%);
}
.c085c782c83c36f8-thumbnailGallery[data-index="3"],
.c085c782c83c36f8-thumbnailStackGallery:not(.c085c782c83c36f8-gallery-height-max):not(.c085c782c83c36f8-gallery-height-3):not(.c085c782c83c36f8-gallery-height-2) .c085c782c83c36f8-thumbnailGallery[data-index="0"] {
bottom: 0;
height: 102px;
width: 183px;
}
.c085c782c83c36f8-thumbnailGallery[data-index="2"],
.c085c782c83c36f8-thumbnailStackGallery.c085c782c83c36f8-gallery-height-2 .c085c782c83c36f8-thumbnailGallery[data-index="0"],
.c085c782c83c36f8-thumbnailStackGallery.c085c782c83c36f8-gallery-height-3 .c085c782c83c36f8-thumbnailGallery[data-index="1"] {
bottom: 28px;
filter: brightness(80%);
height: 86px;
width: 154px;
}
.c085c782c83c36f8-thumbnailGallery[data-index="1"],
.c085c782c83c36f8-thumbnailStackGallery.c085c782c83c36f8-gallery-height-3 .c085c782c83c36f8-thumbnailGallery[data-index="0"] {
bottom: 51px;
filter: brightness(60%);
height: 72px;
width: 128px;
}
.c085c782c83c36f8-thumbnailGallery[data-index="0"] {
bottom: 74.5px;
filter: brightness(50%);
height: 57px;
width: 101.333px;
}
.c085c782c83c36f8-thumbnailStackStacked {
position: relative;
}
.c085c782c83c36f8-stacked-1 {
height: 112px;
width: 200px;
}
.c085c782c83c36f8-stacked-2 {
height: 127px;
width: 215.46px;
}
.c085c782c83c36f8-thumbnailStacked {
border: 1px solid var(--black);
object-fit: cover;
position: absolute;
}
.c085c782c83c36f8-thumbnailStacked[data-index="0"] {
border-radius: 8px;
height: 80px;
inset-inline-start: 0;
opacity: 0.5;
top: 0;
transform: rotate(-2deg);
width: 142px;
}
.c085c782c83c36f8-thumbnailStacked[data-index="1"] {
border-radius: 12px;
height: 112px;
inset-inline-start: 15.46px;
opacity: 1;
top: 15px;
transform: rotate(2deg);
width: 200px;
}
.c085c782c83c36f8-stacked-1 .c085c782c83c36f8-thumbnailStacked[data-index="0"] {
border-radius: 12px;
height: 112px;
inset-inline-start: 0;
top: 0;
transform: rotate(0deg);
width: 200px;
}
.dd7e1393a871abc0-previewContainer {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 8px;
}
.b9588ce0f1435fa6-icon {
height: 1.125rem;
width: 1.125rem;
}
._805141a970102029-icon {
height: 1.125rem;
width: 1.125rem;
}
._9f20a640698aeb6c-iconWrapper {
height: 1rem;
width: 1rem;
}
._9f20a640698aeb6c-icon {
color: var(--guild-boosting-pink);
height: 100%;
width: 100%;
}
._9f20a640698aeb6c-icon,
._9f20a640698aeb6c-message {
cursor: pointer;
}
._9f20a640698aeb6c-cannon,
._9f20a640698aeb6c-cannonWrapper {
height: 100%;
position: absolute;
width: 100%;
}
._9f20a640698aeb6c-easterEggAnimationClickTarget {
cursor: pointer;
pointer-events: all;
position: absolute;
}
._9f20a640698aeb6c-easterEggAnimationClickTargetTopLeft {
inset-inline-start: 0;
top: 0;
transform: scale(-1);
}
._9f20a640698aeb6c-easterEggAnimationClickTargetTopRight {
inset-inline-end: 0;
top: 0;
transform: scaleY(-1);
}
._9f20a640698aeb6c-easterEggAnimationClickTargetBottomLeft {
bottom: 0;
inset-inline-start: 0;
transform: scaleX(-1);
}
._9f20a640698aeb6c-easterEggAnimationClickTargetBottomRight {
bottom: 0;
inset-inline-end: 0;
}
._9f20a640698aeb6c-easterEggAnimation {
height: var(--custom-user-premium-guild-subscription-easter-egg-size);
width: var(--custom-user-premium-guild-subscription-easter-egg-size);
}
._9f20a640698aeb6c-easterEggAnimationHideLeaf .userPremiumGuildSubscriptionLeaf,
._9f20a640698aeb6c-easterEggAnimationHideLeaf .userPremiumGuildSubscriptionLeafParent {
visibility: hidden;
}
.c530da8cb2d1ed53-container {
max-width: 350px;
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
}
.c530da8cb2d1ed53-tooltip {
background-color: var(--background-surface-high);
border-radius: 5px;
box-shadow: var(--shadow-border), var(--shadow-high);
color: var(--primary-200);
font-size: 16px;
line-height: 20px;
overflow-wrap: break-word;
padding: 8px 12px;
}
.c530da8cb2d1ed53-tooltipPointer {
border: 5px solid transparent;
border-top: 5px solid var(--background-surface-high);
height: 0;
inset-inline-start: 50%;
pointer-events: none;
position: absolute;
top: 100%;
width: 0;
-webkit-margin-start: -5px;
margin-inline-start: -5px;
}
.c530da8cb2d1ed53-clickable {
cursor: pointer;
}
.c530da8cb2d1ed53-mention {
background: none;
padding: 0;
}
.c530da8cb2d1ed53-spinner {
height: 16px;
width: 16px;
}
.f84418acfdbdfe54-popover {
background: var(--background-surface-high);
border: 1px solid var(--border-muted);
border-radius: 8px;
box-shadow: var(--shadow-low) !important;
height: auto;
overflow: visible;
padding: 2px;
}
.f84418acfdbdfe54-popover:hover {
border: 1px solid var(--border-subtle);
box-shadow: var(--shadow-medium) !important;
}
.f84418acfdbdfe54-hoverBarButton {
border-radius: 6px;
padding: 2px;
}
.f84418acfdbdfe54-hoverBarButton:hover {
background: var(--interactive-background-hover);
cursor: pointer;
}
.f84418acfdbdfe54-hoverBarButton:hover .f84418acfdbdfe54-icon {
transform: scale(1.1);
}
.f84418acfdbdfe54-hoverBarButton:active {
background: var(--interactive-background-active);
padding: 2px;
}
.f84418acfdbdfe54-hoverBarButton:active .f84418acfdbdfe54-icon {
transform: scale(1);
}
.f84418acfdbdfe54-icon {
display: block;
height: 20px;
object-fit: contain;
width: 20px;
}
.full-motion .f84418acfdbdfe54-icon {
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.f84418acfdbdfe54-buttonContent {
align-items: center;
display: flex;
justify-content: center;
}
.f84418acfdbdfe54-tooltip {
max-width: 300px;
}
.f84418acfdbdfe54-newBadge {
padding: 0 4px;
pointer-events: none;
position: absolute;
top: -12px;
}
.f84418acfdbdfe54-separator {
background: var(--border-subtle);
border-radius: 100px;
height: 24px;
margin: 2px 4px;
width: 1px;
}
._30cbe28ac3d3507e-pro {
text-transform: uppercase;
}
._30cbe28ac3d3507e-tip {
line-height: 16px;
opacity: 1;
}
._30cbe28ac3d3507e-block ._30cbe28ac3d3507e-pro,
._30cbe28ac3d3507e-block ._30cbe28ac3d3507e-tip,
._30cbe28ac3d3507e-tip {
font-size: 14px;
}
._30cbe28ac3d3507e-inline ._30cbe28ac3d3507e-pro,
._30cbe28ac3d3507e-inline ._30cbe28ac3d3507e-tip {
display: inline;
font-size: 12px;
}
._30cbe28ac3d3507e-inline ._30cbe28ac3d3507e-pro {
-webkit-margin-end: 3px;
margin-inline-end: 3px;
}
.enable-forced-colors ._30cbe28ac3d3507e-tip {
opacity: 1;
}
.e8b59c4b335dd2fc-messagesPopoutWrap {
background-color: var(--background-surface-high);
border-radius: 8px;
box-shadow: var(--shadow-border), var(--shadow-high);
box-sizing: border-box;
display: flex;
flex-direction: column;
max-height: 80vh !important;
min-height: 200px;
overflow: hidden;
position: relative;
width: 420px;
z-index: 0;
}
.e8b59c4b335dd2fc-messagesPopoutWrap .mention {
pointer-events: none;
}
.e8b59c4b335dd2fc-header {
background-color: var(--background-surface-high);
border-bottom: 1px solid var(--border-subtle);
padding: 16px;
position: relative;
}
.e8b59c4b335dd2fc-titleContainer {
align-items: center;
display: flex;
gap: 8px;
}
.e8b59c4b335dd2fc-title {
color: var(--text-strong);
}
.e8b59c4b335dd2fc-footer {
background-color: var(--background-mod-subtle);
padding: 16px;
text-align: center;
}
.e8b59c4b335dd2fc-loadingMore {
align-items: center;
display: flex;
justify-content: center;
margin-bottom: 8px;
}
.e8b59c4b335dd2fc-loadingMore .e8b59c4b335dd2fc-spinner {
display: inline-block;
margin: 0;
}
.e8b59c4b335dd2fc-loadingMore {
height: 32px;
margin-top: 8px;
}
.e8b59c4b335dd2fc-hasMore {
align-items: center;
display: flex;
margin-top: 8px;
padding-block: 0 16px;
padding-inline: 16px;
}
.e8b59c4b335dd2fc-messagesPopout {
padding-block: 8px 0;
padding-inline: 8px 0;
}
.e8b59c4b335dd2fc-messageGroupWrapper {
background-color: var(--background-surface-higher);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
margin: 0 0 6px;
margin-bottom: var(--space-8);
overflow: hidden;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-margin-end: var(--space-4);
margin-inline-end: var(--space-4);
}
.e8b59c4b335dd2fc-messagesPopout .e8b59c4b335dd2fc-messageGroupWrapper .e8b59c4b335dd2fc-messageGroupCozy {
-webkit-margin-start: -4px;
margin-inline-start: -4px;
padding-bottom: var(--space-16);
padding-top: var(--space-16);
}
.e8b59c4b335dd2fc-scrollingFooterWrap {
position: relative;
}
.e8b59c4b335dd2fc-emptyPlaceholder {
align-items: center;
display: flex;
flex: 0 0 auto;
flex-direction: column;
margin-bottom: 32px;
margin-top: 8px;
}
.e8b59c4b335dd2fc-emptyPlaceholder.e8b59c4b335dd2fc-bottom {
align-items: center;
margin-bottom: 0;
}
.e8b59c4b335dd2fc-emptyPlaceholder.e8b59c4b335dd2fc-bottom .e8b59c4b335dd2fc-image {
margin-top: 25px;
}
.e8b59c4b335dd2fc-emptyPlaceholder.e8b59c4b335dd2fc-loadingPlaceholder {
margin-top: 100px;
}
.e8b59c4b335dd2fc-image {
background-position: 50%;
background-repeat: no-repeat;
background-size: 94px var(--custom-messages-popout-messages-popout-footer-height);
height: var(--custom-messages-popout-messages-popout-footer-height);
width: var(--custom-messages-popout-messages-popout-footer-height);
}
.e8b59c4b335dd2fc-body {
color: var(--text-default);
font-size: 16px;
font-weight: var(--font-weight-medium);
line-height: 20px;
margin-top: 20px;
text-align: center;
white-space: pre;
}
.e8b59c4b335dd2fc-loadingPlaceholder {
margin-top: 240px;
}
.e8b59c4b335dd2fc-channelSeparator {
margin-bottom: 8px;
margin-top: 24px;
}
.e8b59c4b335dd2fc-channelName {
color: var(--text-strong);
cursor: pointer;
font-size: 16px;
font-weight: var(--font-weight-medium);
line-height: 18px;
}
.e8b59c4b335dd2fc-channelName:hover {
text-decoration: underline;
}
.e8b59c4b335dd2fc-guildName {
color: var(--text-muted);
font-weight: var(--font-weight-medium);
-webkit-margin-start: 4px;
font-size: 12px;
line-height: 16px;
margin-inline-start: 4px;
}
.e8b59c4b335dd2fc-channelSeparator:first-of-type {
margin-top: 13px;
}
.e8b59c4b335dd2fc-actionButtons {
display: none;
inset-inline-end: var(--space-8);
position: absolute;
top: var(--space-8);
}
.e8b59c4b335dd2fc-buttonContainer {
background-color: var(--background-surface-high);
border-radius: var(--radius-sm);
}
.e8b59c4b335dd2fc-messageGroupWrapper:focus-within .e8b59c4b335dd2fc-actionButtons,
.e8b59c4b335dd2fc-messageGroupWrapper:hover .e8b59c4b335dd2fc-actionButtons {
display: flex;
gap: var(--space-8);
}
.enable-forced-colors .e8b59c4b335dd2fc-messagesPopoutWrap {
border: 2px solid CanvasText;
}
._1ce5d425feffd32a-container {
position: relative;
}
._1ce5d425feffd32a-circularImage {
border-radius: 50%;
}
._1ce5d425feffd32a-dots {
margin-top: 0.2px;
}
._06fb54b93b7ce763-channelHeader {
align-items: center;
border-bottom: var(--border-subtle) 1px;
border-style: solid;
display: flex;
gap: 6px;
padding: 12px;
}
._06fb54b93b7ce763-icon {
border-radius: 6px;
box-sizing: border-box;
flex-shrink: 0;
height: 24px;
width: 24px;
}
._06fb54b93b7ce763-dmIcon {
background: var(--background-base-lowest);
justify-content: center;
padding: 6px;
}
._06fb54b93b7ce763-channelNameSection,
._06fb54b93b7ce763-dmIcon {
align-items: center;
display: flex;
}
._06fb54b93b7ce763-channelNameSection {
flex-grow: 1;
overflow: hidden;
}
._06fb54b93b7ce763-channelTypeIcon {
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
._4a7f08b7f81c8b8d-emptyContainer {
box-sizing: border-box;
height: 480px;
padding: 16px;
}
._4a7f08b7f81c8b8d-emptyContainer,
._4a7f08b7f81c8b8d-emptyInner {
display: flex;
flex-direction: column;
}
._4a7f08b7f81c8b8d-emptyInner {
align-items: center;
flex-grow: 1;
justify-content: center;
padding: 0 40px;
pointer-events: none;
text-align: center;
}
._4a7f08b7f81c8b8d-image {
margin-bottom: 24px;
width: 140px;
}
._4a7f08b7f81c8b8d-header {
margin-bottom: 8px;
}
._4a7f08b7f81c8b8d-upsellButton {
-webkit-margin-start: auto;
background: var(--custom-premium-colors-premium-gradient-tier-2-tri-color);
background-clip: padding-box;
border-radius: 3px;
flex-shrink: 0;
margin-inline-start: auto;
}
._4a7f08b7f81c8b8d-upsellContainer {
align-items: center;
background: var(--background-base-lowest);
border-radius: 4px;
display: flex;
padding: 12px;
}
._4a7f08b7f81c8b8d-upsellText {
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
.ea9851460f53c2c3-container {
background: var(--background-base-lowest);
flex-grow: 1;
gap: 6px;
padding: 12px;
}
.ea9851460f53c2c3-container,
.ea9851460f53c2c3-icon {
align-items: center;
display: flex;
}
.ea9851460f53c2c3-icon {
background: var(--background-base-lower);
border-radius: 6px;
height: 24px;
justify-content: center;
width: 24px;
}
._4ad6936dd30096b3-popoutContainer {
background-color: var(--background-surface-high);
border-radius: 8px;
box-shadow: var(--shadow-border), var(--shadow-high);
box-sizing: border-box;
display: flex;
flex-direction: column;
max-height: 80vh;
max-width: 507px;
min-width: 480px;
overflow: hidden;
position: relative;
width: 35vw;
z-index: 0;
}
._4ad6936dd30096b3-messagesScroller {
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px;
}
._4ad6936dd30096b3-message {
margin: 12px 0;
overflow: hidden;
}
._4ad6936dd30096b3-messageContainer {
background: var(--background-surface-higher);
border: 1px solid var(--border-subtle);
border-radius: 8px;
display: flex;
flex-direction: column;
flex-shrink: 0;
overflow: hidden;
position: relative;
transition: box-shadow 0.1s ease-in-out;
}
._4ad6936dd30096b3-messageContainer:focus-within,
._4ad6936dd30096b3-messageContainer:hover {
box-shadow: var(--shadow-high);
}
._4ad6936dd30096b3-messageContainer:focus-within ._4ad6936dd30096b3-hoverBar,
._4ad6936dd30096b3-messageContainer:hover ._4ad6936dd30096b3-hoverBar {
opacity: 1;
}
._4ad6936dd30096b3-clickableMessageBackground {
inset-inline: 0;
bottom: 0;
cursor: pointer;
position: absolute;
top: 0;
}
._4ad6936dd30096b3-deletedMessage {
flex-direction: row;
gap: 6px;
padding: 12px;
}
._4ad6936dd30096b3-deleteIcon,
._4ad6936dd30096b3-deletedMessage {
align-items: center;
display: flex;
}
._4ad6936dd30096b3-deleteIcon {
background: var(--background-base-lowest);
border-radius: 6px;
height: 24px;
justify-content: center;
width: 24px;
}
._4ad6936dd30096b3-hoverBar {
inset-inline-end: 6px;
opacity: 0;
position: absolute;
top: 6px;
}
.bd818628221af7aa-searchToken {
background-color: var(--background-surface-highest);
border: 1px solid var(--border-muted);
border-radius: var(--radius-xs);
color: var(--text-strong);
display: inline-block;
-webkit-margin-start: unset;
height: 22px;
margin-inline-start: unset;
padding: 1px var(--space-4);
}
.bd818628221af7aa-searchAnswer {
border-end-start-radius: 0;
border-start-start-radius: 0;
margin-inline: -2px 2px;
}
.bd818628221af7aa-searchFilter {
border-end-end-radius: 0;
border-start-end-radius: 0;
font-weight: var(--font-weight-semibold);
}
.bd818628221af7aa-searchFilter + .bd818628221af7aa-searchFilter {
-webkit-padding-start: 2px;
padding-inline-start: 2px;
}
.bd818628221af7aa-searchFilter:has(+ .bd818628221af7aa-searchAnswer) {
-webkit-border-end: none;
border-inline-end: none;
}
.bd818628221af7aa-searchFilter + .bd818628221af7aa-searchAnswer {
-webkit-padding-start: 0;
padding-inline-start: 0;
-webkit-border-start: none;
border-inline-start: none;
}
._16eb0bfd5c5a90d1-resultsGroup {
margin-top: -1px;
padding-bottom: 10px;
padding-top: 10px;
position: relative;
}
._16eb0bfd5c5a90d1-resultsGroup:before {
content: "";
display: block;
margin: 0 20px;
position: relative;
top: -10px;
}
._16eb0bfd5c5a90d1-resultsGroup ._16eb0bfd5c5a90d1-header {
font-size: 14px;
font-weight: var(--font-weight-semibold);
padding: 5px 20px 10px;
text-transform: none;
}
._16eb0bfd5c5a90d1-resultsGroup ._16eb0bfd5c5a90d1-searchClearHistory,
._16eb0bfd5c5a90d1-resultsGroup ._16eb0bfd5c5a90d1-searchLearnMore {
color: var(--interactive-text-default);
cursor: pointer;
height: 16px;
position: absolute;
top: 12px;
width: 16px;
}
._16eb0bfd5c5a90d1-resultsGroup ._16eb0bfd5c5a90d1-searchClearHistory:hover,
._16eb0bfd5c5a90d1-resultsGroup ._16eb0bfd5c5a90d1-searchLearnMore:hover {
color: var(--interactive-text-hover);
}
._16eb0bfd5c5a90d1-resultsGroup ._16eb0bfd5c5a90d1-searchClearHistory svg,
._16eb0bfd5c5a90d1-resultsGroup ._16eb0bfd5c5a90d1-searchLearnMore svg {
height: 16px;
width: 16px;
}
._16eb0bfd5c5a90d1-resultsGroup ._16eb0bfd5c5a90d1-searchLearnMore a {
color: inherit;
}
._16eb0bfd5c5a90d1-resultsGroup ._16eb0bfd5c5a90d1-searchLearnMore {
inset-inline-end: 17px;
}
._16eb0bfd5c5a90d1-resultsGroup ._16eb0bfd5c5a90d1-searchClearHistory {
inset-inline-end: 16px;
}
._16eb0bfd5c5a90d1-resultsGroup ._16eb0bfd5c5a90d1-searchLearnMore a {
display: block;
height: 100%;
overflow: hidden;
width: 100%;
}
._16eb0bfd5c5a90d1-resultsGroup ._16eb0bfd5c5a90d1-searchClearHistory {
overflow: hidden;
}
._16eb0bfd5c5a90d1-resultsGroup ._16eb0bfd5c5a90d1-searchHistoryRow {
max-width: calc(100% - 20px);
}
._16eb0bfd5c5a90d1-content {
-webkit-mask-image: linear-gradient(to right, var(--background-surface-high) 90%, transparent 100%);
mask-image: linear-gradient(to right, var(--background-surface-high) 90%, transparent 100%);
width: 100%;
}
._16eb0bfd5c5a90d1-content,
._16eb0bfd5c5a90d1-option {
align-items: center;
display: flex;
}
._16eb0bfd5c5a90d1-option {
border-radius: var(--radius-xs);
cursor: pointer;
font-size: 16px;
height: 34px;
line-height: 1.25;
margin: 0 10px;
overflow: hidden;
padding: 0 10px;
position: relative;
}
._16eb0bfd5c5a90d1-option:after {
content: "";
height: 100%;
inset-inline-end: 0;
position: absolute;
top: 0;
width: 30px;
z-index: 1;
}
._16eb0bfd5c5a90d1-option:hover ._16eb0bfd5c5a90d1-content,
._16eb0bfd5c5a90d1-option[aria-selected="true"] ._16eb0bfd5c5a90d1-content {
-webkit-mask-image: linear-gradient(to right, var(--background-surface-high) 90%, transparent 95%);
mask-image: linear-gradient(to right, var(--background-surface-high) 90%, transparent 95%);
}
._16eb0bfd5c5a90d1-option:hover ._16eb0bfd5c5a90d1-plusIcon,
._16eb0bfd5c5a90d1-option[aria-selected="true"] ._16eb0bfd5c5a90d1-plusIcon {
color: var(--interactive-text-hover);
display: block;
}
._16eb0bfd5c5a90d1-option:hover:before,
._16eb0bfd5c5a90d1-option[aria-selected="true"]:before {
content: "";
height: 34px;
inset-inline-end: 0;
position: absolute;
top: 0;
width: 24px;
z-index: 2;
}
._16eb0bfd5c5a90d1-option:hover:after,
._16eb0bfd5c5a90d1-option[aria-selected="true"]:after {
width: 60px;
}
._16eb0bfd5c5a90d1-option span {
flex-grow: 0;
flex-shrink: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._16eb0bfd5c5a90d1-option ._16eb0bfd5c5a90d1-nonText {
margin: 0 4px;
}
._16eb0bfd5c5a90d1-option ._16eb0bfd5c5a90d1-filter {
margin-block: 0;
margin-inline: 4px 2px;
}
._16eb0bfd5c5a90d1-option ._16eb0bfd5c5a90d1-answer {
margin-block: 0;
margin-inline: 2px 4px;
}
._16eb0bfd5c5a90d1-option ._16eb0bfd5c5a90d1-answer,
._16eb0bfd5c5a90d1-option strong {
font-weight: var(--font-weight-medium);
}
._16eb0bfd5c5a90d1-option strong {
color: var(--text-subtle);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._16eb0bfd5c5a90d1-option ._16eb0bfd5c5a90d1-filter {
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
._16eb0bfd5c5a90d1-option > :first-child {
-webkit-margin-start: 0;
margin-inline-start: 0;
}
._16eb0bfd5c5a90d1-option._16eb0bfd5c5a90d1-user ._16eb0bfd5c5a90d1-displayAvatar {
border-radius: 50%;
display: inline-block;
flex-grow: 0;
flex-shrink: 0;
height: 20px;
width: 20px;
}
._16eb0bfd5c5a90d1-option._16eb0bfd5c5a90d1-user ._16eb0bfd5c5a90d1-displayedNick {
margin: 0 5px;
}
._16eb0bfd5c5a90d1-option._16eb0bfd5c5a90d1-user ._16eb0bfd5c5a90d1-displayUsername,
._16eb0bfd5c5a90d1-option._16eb0bfd5c5a90d1-user ._16eb0bfd5c5a90d1-displayedNick {
font-weight: var(--font-weight-medium);
}
._16eb0bfd5c5a90d1-option._16eb0bfd5c5a90d1-linkSource strong {
text-transform: capitalize;
}
._16eb0bfd5c5a90d1-searchOption ._16eb0bfd5c5a90d1-filter {
font-weight: var(--font-weight-medium);
margin-block: 0;
margin-inline: 0 4px;
}
._16eb0bfd5c5a90d1-searchOption ._16eb0bfd5c5a90d1-answer {
flex-shrink: 1;
font-weight: var(--font-weight-medium);
overflow: hidden;
text-overflow: ellipsis;
}
._16eb0bfd5c5a90d1-datePicker {
border-radius: 0;
box-shadow: none;
display: flex;
flex-direction: column;
justify-content: center;
}
._16eb0bfd5c5a90d1-datePicker ._16eb0bfd5c5a90d1-datePickerHint {
align-items: center;
display: flex;
margin: 0 20px;
padding: 20px 0;
}
._16eb0bfd5c5a90d1-datePicker ._16eb0bfd5c5a90d1-datePickerHint ._16eb0bfd5c5a90d1-hint {
font-size: 16px;
}
._16eb0bfd5c5a90d1-datePicker ._16eb0bfd5c5a90d1-datePickerHint ._16eb0bfd5c5a90d1-hintValue {
border-radius: 3px;
cursor: pointer;
font-size: 14px;
font-weight: var(--font-weight-medium);
line-height: 22px;
padding: 0 3px;
}
._16eb0bfd5c5a90d1-searchResultChannelIcon {
vertical-align: top;
-webkit-margin-end: 4px;
flex-shrink: 0;
height: 16px;
margin-inline-end: 4px;
width: 16px;
}
._16eb0bfd5c5a90d1-searchResultDMChannelIcon {
border-radius: 50%;
height: 20px;
width: 20px;
}
._16eb0bfd5c5a90d1-searchResultDMChannelIcon,
._16eb0bfd5c5a90d1-searchResultGDMChannelIcon {
vertical-align: top;
-webkit-margin-end: 4px;
display: inline-block;
flex-grow: 0;
flex-shrink: 0;
margin-inline-end: 4px;
}
._16eb0bfd5c5a90d1-searchResultGDMChannelIcon {
line-height: 0;
}
._16eb0bfd5c5a90d1-searchResultDMChannelName {
color: var(--search-popout-option-user-nickname);
font-weight: 500;
}
._16eb0bfd5c5a90d1-searchResultDMUserName {
color: var(--search-popout-option-user-username);
font-weight: 500;
margin: 0 5px;
}
._16eb0bfd5c5a90d1-searchResultChannelCategory {
font-size: 10px;
font-weight: var(--font-weight-semibold);
position: relative;
text-transform: uppercase;
-webkit-margin-start: 4px;
flex-shrink: 1;
margin-inline-start: 4px;
overflow: hidden;
text-overflow: ellipsis;
top: 2px;
white-space: nowrap;
}
._16eb0bfd5c5a90d1-plusIcon {
display: none;
inset-inline-end: 8px;
position: absolute;
top: 8px;
z-index: 2;
}
.theme-dark {
--search-popout-option-user-nickname: var(--text-default);
--search-popout-option-user-username: var(--text-muted);
--search-popout-option-filter-text: var(--primary-400);
--search-popout-option-non-text-color: #caccce;
--search-popout-option-filter-color: #caccce;
--search-popout-option-answer-color: #caccce;
--search-popout-date-picker-border: 1px solid hsl(var(--primary-660-hsl)/0.3);
--search-popout-date-picker-hint-text: #caccce;
--search-popout-date-picker-hint-value-text: #fff;
--search-popout-date-picker-hint-value-background: var(--brand-500);
--search-popout-date-picker-hint-value-background-hover: var(--brand-430);
}
.theme-light {
--search-popout-option-user-nickname: var(--text-default);
--search-popout-option-user-username: var(--text-muted);
--search-popout-option-filter-text: #caccce;
--search-popout-option-non-text-color: #5e636a;
--search-popout-option-filter-color: #caccce;
--search-popout-option-answer-color: var(--primary-500);
--search-popout-date-picker-border: 1px solid var(--primary-200);
--search-popout-date-picker-hint-text: #caccce;
--search-popout-date-picker-hint-value-text: #fff;
--search-popout-date-picker-hint-value-background: var(--brand-500);
--search-popout-date-picker-hint-value-background-hover: var(--brand-400);
}
._16eb0bfd5c5a90d1-resultsGroup:before {
border-top: 1px solid var(--border-subtle);
}
._16eb0bfd5c5a90d1-resultsGroup:first-of-type:before {
border-top: none;
}
._16eb0bfd5c5a90d1-resultsGroup ._16eb0bfd5c5a90d1-header {
color: var(--text-default);
}
._16eb0bfd5c5a90d1-resultsGroup ._16eb0bfd5c5a90d1-plusIcon {
color: var(--interactive-text-default);
}
._16eb0bfd5c5a90d1-resultsGroup ._16eb0bfd5c5a90d1-header {
font-family: var(--font-display);
font-weight: var(--font-weight-extra-bold);
letter-spacing: 0.02em;
}
._16eb0bfd5c5a90d1-option:hover {
background-color: var(--interactive-background-hover);
}
._16eb0bfd5c5a90d1-option:hover ._16eb0bfd5c5a90d1-answer,
._16eb0bfd5c5a90d1-option:hover ._16eb0bfd5c5a90d1-filter {
color: var(--interactive-text-hover);
}
._16eb0bfd5c5a90d1-option[aria-selected="true"] {
background-color: var(--interactive-background-hover);
box-shadow: inset 2px 0 0 0 var(--border-focus);
}
._16eb0bfd5c5a90d1-option[aria-selected="true"] ._16eb0bfd5c5a90d1-answer,
._16eb0bfd5c5a90d1-option[aria-selected="true"] ._16eb0bfd5c5a90d1-filter {
color: var(--interactive-text-hover);
}
._16eb0bfd5c5a90d1-option ._16eb0bfd5c5a90d1-nonText {
color: var(--search-popout-option-non-text-color);
}
._16eb0bfd5c5a90d1-option ._16eb0bfd5c5a90d1-answer,
._16eb0bfd5c5a90d1-option ._16eb0bfd5c5a90d1-filter,
._16eb0bfd5c5a90d1-option strong {
color: var(--text-muted);
}
._16eb0bfd5c5a90d1-option._16eb0bfd5c5a90d1-user ._16eb0bfd5c5a90d1-displayedNick {
color: var(--search-popout-option-user-nickname);
}
._16eb0bfd5c5a90d1-option._16eb0bfd5c5a90d1-user ._16eb0bfd5c5a90d1-displayUsername {
color: var(--search-popout-option-user-username);
}
._16eb0bfd5c5a90d1-searchOption ._16eb0bfd5c5a90d1-filter {
color: var(--interactive-text-default);
font-weight: var(--font-weight-semibold);
}
._16eb0bfd5c5a90d1-searchOption ._16eb0bfd5c5a90d1-answer {
color: var(--text-muted);
}
._16eb0bfd5c5a90d1-datePicker {
border-top: none;
}
._16eb0bfd5c5a90d1-datePicker ._16eb0bfd5c5a90d1-datePickerHint {
border-top: var(--search-popout-date-picker-border);
}
._16eb0bfd5c5a90d1-datePicker ._16eb0bfd5c5a90d1-datePickerHint ._16eb0bfd5c5a90d1-hint {
color: var(--search-popout-date-picker-hint-text);
}
._16eb0bfd5c5a90d1-datePicker ._16eb0bfd5c5a90d1-datePickerHint ._16eb0bfd5c5a90d1-hintValue {
background-color: var(--search-popout-date-picker-hint-value-background);
color: var(--search-popout-date-picker-hint-value-text);
}
._16eb0bfd5c5a90d1-datePicker ._16eb0bfd5c5a90d1-datePickerHint ._16eb0bfd5c5a90d1-hintValue:hover {
background-color: var(--search-popout-date-picker-hint-value-background-hover);
}
._16eb0bfd5c5a90d1-searchResultChannelCategory,
._16eb0bfd5c5a90d1-searchResultChannelIcon {
color: var(--text-muted);
opacity: 0.6;
}
._16eb0bfd5c5a90d1-searchResultChannelIconBackground {
opacity: 0.6;
}
._16eb0bfd5c5a90d1-resultChannel {
align-items: center;
display: flex;
flex-wrap: nowrap;
}
.theme-dark,
.theme-light {
--search-popout-option-user-nickname: var(--text-strong);
--search-popout-option-user-username: var(--text-subtle);
--search-popout-option-filter-text: var(--text-subtle);
--search-popout-option-non-text-color: var(--text-muted);
--search-popout-option-filter-color: var(--text-muted);
--search-popout-option-answer-color: var(--text-muted);
--search-popout-date-picker-border: 1px solid var(--border-muted);
--search-popout-date-picker-hint-text: var(--text-muted);
--search-popout-date-picker-hint-value-background-hover: var(--opacity-blurple-32);
}
._16eb0bfd5c5a90d1-filter {
color: var(--text-subtle);
}
.enable-forced-colors ._16eb0bfd5c5a90d1-option[aria-selected="true"] {
outline: 2px solid Highlight;
}
._8de16516b8d9f538-itemContainer {
border-radius: var(--radius-sm);
cursor: pointer;
overflow: hidden;
}
._8de16516b8d9f538-itemContainer:active,
._8de16516b8d9f538-itemContainer:hover,
._8de16516b8d9f538-itemContainer[aria-selected="true"] {
background-color: var(--background-mod-subtle);
color: var(--text-strong);
}
._8de16516b8d9f538-item {
align-items: center;
display: flex;
-webkit-mask-image: linear-gradient(to right, var(--background-surface-high) 90%, transparent 100%);
mask-image: linear-gradient(to right, var(--background-surface-high) 90%, transparent 100%);
padding: var(--space-4) var(--space-8);
}
._8de16516b8d9f538-itemIcon {
color: var(--text-muted);
height: 20px;
width: 20px;
-webkit-margin-end: 8px;
flex-shrink: 0;
margin-inline-end: 8px;
}
._8de16516b8d9f538-filterSublabelTextContainer,
._8de16516b8d9f538-labelWithElements {
align-items: center;
display: flex;
flex-shrink: 0;
gap: 4px;
}
._8de16516b8d9f538-channelNameContainer {
align-items: center;
display: flex;
}
._8de16516b8d9f538-channelName {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._8de16516b8d9f538-channelNameIcon {
color: var(--text-default);
height: 14px;
width: 14px;
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
._8de16516b8d9f538-divider {
background-color: var(--border-subtle);
height: 1px;
margin: var(--space-8) calc(var(--space-8) * -1);
}
._8de16516b8d9f538-groupWrapper {
display: grid;
gap: var(--space-4);
}
._8de16516b8d9f538-groupHeader {
align-items: center;
display: flex;
justify-content: space-between;
padding: var(--space-4) var(--space-8);
}
._8de16516b8d9f538-clearSearchHistory:hover ._8de16516b8d9f538-clearSearchHistoryIcon {
color: var(--text-strong);
}
._8de16516b8d9f538-clearSearchHistoryIcon {
color: var(--text-subtle);
cursor: pointer;
}
._8de16516b8d9f538-autocompletePillContainer {
align-items: center;
display: flex;
flex-shrink: 0;
}
._8de16516b8d9f538-nonText {
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
._8de16516b8d9f538-filterPill {
padding: 3px 6px;
-webkit-padding-end: 2px;
border-radius: var(--radius-xs) 0 0 var(--radius-xs);
padding-inline-end: 2px;
}
._8de16516b8d9f538-answerPill,
._8de16516b8d9f538-filterPill {
background-color: var(--background-mod-strong);
}
._8de16516b8d9f538-answerPill {
align-items: center;
display: flex;
gap: 4px;
white-space: nowrap;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
padding: 3px 6px;
-webkit-padding-start: 2px;
border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
padding-inline-start: 2px;
}
._8de16516b8d9f538-channelAnswerPill {
gap: 0;
}
._8de16516b8d9f538-channelPillIcon {
color: var(--text-default);
-webkit-margin-end: 2px;
margin-inline-end: 2px;
}
.b6544fb09f373e60-container {
background-color: var(--background-surface-high);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-high);
box-sizing: border-box;
max-height: calc(100vh - var(--custom-app-top-bar-height) - var(--custom-channel-textarea-text-area-height) - var(--custom-channel-header-height));
overflow: hidden;
padding: var(--space-12) var(--space-8);
width: 356px;
}
.b6544fb09f373e60-datePickerContainer {
padding: 0;
}
.b6544fb09f373e60-calendar {
display: flex;
justify-content: center;
width: 314px;
}
._55c999adcf6db265-container {
background-color: var(--background-surface-higher);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-high);
box-sizing: border-box;
max-height: calc(100vh - var(--custom-app-top-bar-height) - var(--custom-channel-textarea-text-area-height) - var(--custom-channel-header-height));
overflow: hidden;
width: 320px;
}
._55c999adcf6db265-container:empty {
box-shadow: none;
}
._55c999adcf6db265-queryContainer {
border-bottom: 1px solid;
cursor: pointer;
display: flex;
padding: 15px;
}
._55c999adcf6db265-queryShortcut {
flex: 0 0 auto;
}
._55c999adcf6db265-queryText {
flex: 1 1 auto;
font-size: 12px;
line-height: 24px;
overflow: hidden;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
}
._55c999adcf6db265-queryText strong {
font-size: 15px;
text-transform: none;
}
._55c999adcf6db265-searchDMQueryText {
align-self: center;
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._55c999adcf6db265-keyCombo {
flex-grow: 0;
flex-shrink: 0;
margin: 0;
}
._55c999adcf6db265-queryContainer {
background-color: var(--background-base-low);
border-bottom-color: var(--border-muted);
}
._55c999adcf6db265-queryContainer,
._55c999adcf6db265-queryContainer strong {
color: var(--text-strong);
}
._55c999adcf6db265-focused {
background-color: var(--background-base-lowest);
}
._55c999adcf6db265-inChannelOptionContainer {
border-bottom: 1px solid var(--border-subtle);
border-radius: var(--radius-xs);
font-size: 16px;
overflow: hidden;
padding: 10px;
}
._55c999adcf6db265-inChannelOptionContainer[aria-selected="true"] ._55c999adcf6db265-inChannelOption {
background-color: var(--interactive-background-hover);
box-shadow: inset 2px 0 0 0 var(--border-focus);
}
._55c999adcf6db265-inChannelOption {
align-items: center;
border-radius: var(--radius-xs);
cursor: pointer;
display: flex;
padding: 8px 10px;
}
._55c999adcf6db265-inChannelOption:hover {
background-color: var(--interactive-background-hover);
}
._55c999adcf6db265-searchResultNameContainer {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._55c999adcf6db265-channelContainer {
-webkit-margin-start: 5px;
flex: 1;
margin-inline-start: 5px;
min-width: 0;
white-space: nowrap;
}
.refresh-fast-follow-distinct-borders ._55c999adcf6db265-container {
border-color: var(--app-frame-border);
}
.enable-forced-colors ._55c999adcf6db265-container {
border: 2px solid CanvasText;
}
.c322aadb96ff59c9-search {
overflow: visible;
position: relative;
z-index: 100;
-webkit-app-region: no-drag;
}
.c322aadb96ff59c9-search .DraftEditor-root {
flex: 1;
font-size: 14px;
font-weight: var(--font-weight-medium);
height: 100%;
line-height: 26px;
overflow: hidden;
padding: 0 var(--space-4);
}
.c322aadb96ff59c9-search .DraftEditor-root .DraftEditor-editorContainer {
border: none;
border-radius: 2px;
height: 28px;
overflow: hidden;
}
.c322aadb96ff59c9-search .DraftEditor-root .public-DraftEditor-content,
.c322aadb96ff59c9-search .DraftEditor-root .public-DraftEditorPlaceholder-root {
box-sizing: content-box;
padding-bottom: 20px;
padding-inline: 2px;
}
.c322aadb96ff59c9-search .DraftEditor-root .public-DraftEditorPlaceholder-root {
color: var(--input-placeholder-text-default);
-webkit-padding-start: 4px;
padding-inline-start: 4px;
width: 100%;
}
.c322aadb96ff59c9-search .DraftEditor-root .public-DraftEditorPlaceholder-inner {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap !important;
width: 94%;
}
.c322aadb96ff59c9-search .DraftEditor-root .public-DraftEditor-content {
overflow-x: auto;
overflow-y: hidden;
}
.c322aadb96ff59c9-search .DraftEditor-root .public-DraftStyleDefault-block {
display: inline-block;
min-width: 1px;
white-space: pre;
}
.c322aadb96ff59c9-search .DraftEditor-root .public-DraftStyleDefault-block span {
min-width: 1px;
}
.c322aadb96ff59c9-searchBar {
align-items: center;
background: var(--background-gradient-low, var(--input-background-default));
border: 1px solid var(--input-border-default);
border-radius: var(--radius-sm);
box-shadow: none;
box-sizing: border-box;
color: var(--text-default);
cursor: text;
display: flex;
height: 32px;
overflow: hidden;
padding: 2px 0;
width: 244px;
}
.c322aadb96ff59c9-searchBar .c322aadb96ff59c9-icon {
height: 100%;
-webkit-margin-end: var(--space-4);
margin-inline-end: var(--space-4);
}
.density-compact .c322aadb96ff59c9-searchBar {
height: 28px;
}
.density-compact .c322aadb96ff59c9-search .DraftEditor-root {
height: 100%;
line-height: 22px;
padding: 0 var(--space-4);
}
.density-compact .c322aadb96ff59c9-search .DraftEditor-editorContainer {
height: 24px;
}
.full-motion .c322aadb96ff59c9-searchBar {
transition: width 0.25s ease;
}
.enable-forced-colors .c322aadb96ff59c9-focused,
.enable-forced-colors .c322aadb96ff59c9-open {
border-color: Highlight;
color: CanvasText;
}
.enable-forced-colors .c322aadb96ff59c9-search .public-DraftEditorPlaceholder-root {
color: GrayText;
}
.DraftEditor-editorContainer,
.DraftEditor-root,
.public-DraftEditor-content {
height: inherit;
text-align: initial;
}
.public-DraftEditor-content[contenteditable="true"] {
-webkit-user-modify: read-write-plaintext-only;
}
.DraftEditor-root {
position: relative;
}
.DraftEditor-editorContainer {
background-color: hsla(0, 0%, 100%, 0);
border-left: 0.1px solid transparent;
position: relative;
z-index: 1;
}
.public-DraftEditor-block {
position: relative;
}
.DraftEditor-alignLeft .public-DraftStyleDefault-block {
text-align: left;
}
.DraftEditor-alignLeft .public-DraftEditorPlaceholder-root {
left: 0;
text-align: left;
}
.DraftEditor-alignCenter .public-DraftStyleDefault-block {
text-align: center;
}
.DraftEditor-alignCenter .public-DraftEditorPlaceholder-root {
margin: 0 auto;
text-align: center;
width: 100%;
}
.DraftEditor-alignRight .public-DraftStyleDefault-block {
text-align: right;
}
.DraftEditor-alignRight .public-DraftEditorPlaceholder-root {
right: 0;
text-align: right;
}
.public-DraftEditorPlaceholder-root {
color: #9197a3;
position: absolute;
z-index: 1;
}
.public-DraftEditorPlaceholder-hasFocus {
color: #bdc1c9;
}
.DraftEditorPlaceholder-hidden {
display: none;
}
.public-DraftStyleDefault-block {
position: relative;
white-space: pre-wrap;
}
.public-DraftStyleDefault-ltr {
direction: ltr;
text-align: left;
}
.public-DraftStyleDefault-rtl {
direction: rtl;
text-align: right;
}
.public-DraftStyleDefault-listLTR {
direction: ltr;
}
.public-DraftStyleDefault-listRTL {
direction: rtl;
}
.public-DraftStyleDefault-ol,
.public-DraftStyleDefault-ul {
margin: 16px 0;
padding: 0;
}
.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listLTR {
margin-left: 1.5em;
}
.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listRTL {
margin-right: 1.5em;
}
.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listLTR {
margin-left: 3em;
}
.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listRTL {
margin-right: 3em;
}
.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listLTR {
margin-left: 4.5em;
}
.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listRTL {
margin-right: 4.5em;
}
.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listLTR {
margin-left: 6em;
}
.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listRTL {
margin-right: 6em;
}
.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listLTR {
margin-left: 7.5em;
}
.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listRTL {
margin-right: 7.5em;
}
.public-DraftStyleDefault-unorderedListItem {
list-style-type: square;
position: relative;
}
.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth0 {
list-style-type: disc;
}
.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth1 {
list-style-type: circle;
}
.public-DraftStyleDefault-orderedListItem {
list-style-type: none;
position: relative;
}
.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listLTR:before {
left: -36px;
position: absolute;
text-align: right;
width: 30px;
}
.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listRTL:before {
position: absolute;
right: -36px;
text-align: left;
width: 30px;
}
.public-DraftStyleDefault-orderedListItem:before {
content: counter(ol0) ". ";
counter-increment: ol0;
}
.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth1:before {
content: counter(ol1, lower-alpha) ". ";
counter-increment: ol1;
}
.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth2:before {
content: counter(ol2, lower-roman) ". ";
counter-increment: ol2;
}
.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth3:before {
content: counter(ol3) ". ";
counter-increment: ol3;
}
.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth4:before {
content: counter(ol4, lower-alpha) ". ";
counter-increment: ol4;
}
.public-DraftStyleDefault-depth0.public-DraftStyleDefault-reset {
counter-reset: ol0;
}
.public-DraftStyleDefault-depth1.public-DraftStyleDefault-reset {
counter-reset: ol1;
}
.public-DraftStyleDefault-depth2.public-DraftStyleDefault-reset {
counter-reset: ol2;
}
.public-DraftStyleDefault-depth3.public-DraftStyleDefault-reset {
counter-reset: ol3;
}
.public-DraftStyleDefault-depth4.public-DraftStyleDefault-reset {
counter-reset: ol4;
}
._85d05ad4fed8330c-root._85d05ad4fed8330c-comboIcon {
align-items: center;
display: flex;
flex-direction: row;
height: 24px;
width: auto;
}
._85d05ad4fed8330c-count {
line-height: 24px;
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
._85d05ad4fed8330c-icon {
flex-shrink: 0;
height: 24px;
width: 24px;
}
@keyframes _496769951eb140fe-arrowBounce {
0% {
transform: translate3d(0, -2px, 0);
}
50% {
transform: translateZ(0);
}
to {
transform: translate3d(0, -2px, 0);
}
}
._496769951eb140fe-children {
flex: 0 1 auto;
}
._496769951eb140fe-back {
-webkit-margin-end: 12px;
color: var(--text-default);
margin-inline-end: 12px;
opacity: 0.6;
}
._496769951eb140fe-back:active,
._496769951eb140fe-back:hover {
opacity: 0.8;
}
._496769951eb140fe-back:disabled {
opacity: 0.2;
}
._496769951eb140fe-updateIconForeground {
fill: var(--green-330);
}
._496769951eb140fe-search {
margin: 0 4px;
}
._496769951eb140fe-toolbar {
align-items: center;
display: flex;
flex: 0 0 auto;
}
._496769951eb140fe-downloadArrow {
animation: _496769951eb140fe-arrowBounce 2s ease-in-out infinite;
color: var(--green-360);
}
@media (min-width: 849px) {
._496769951eb140fe-headerBarLoggedOut {
padding: 0 30px;
}
}
._496769951eb140fe-cloud {
color: var(--text-muted);
}
._496769951eb140fe-controlButtonWrapper {
display: flex;
gap: 8px;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
._0920e02cc8fc7b7b-homeBody {
box-sizing: border-box;
margin: 0 auto;
max-width: var(--custom-application-store-home-store-home-width);
padding: 0 20px;
width: 100%;
}
._0920e02cc8fc7b7b-categoryHeader {
border-bottom-width: 1px;
border-style: solid;
display: flex;
flex-direction: column;
font-size: 16px;
font-weight: var(--font-weight-medium);
margin: 32px 0 20px;
padding-bottom: 10px;
}
._0920e02cc8fc7b7b-viewAllGamesButton {
display: flex;
justify-content: center;
margin: 20px auto 40px;
}
._0920e02cc8fc7b7b-viewAllGamesButton:hover ._0920e02cc8fc7b7b-viewAllIcon {
transform: rotate(-90deg) translateY(3px);
}
._0920e02cc8fc7b7b-viewAllGamesButtonInner {
align-items: center;
display: flex;
}
._0920e02cc8fc7b7b-viewAllGames,
._0920e02cc8fc7b7b-viewAllNitroGames {
align-items: center;
cursor: pointer;
display: flex;
font-size: 16px;
}
.full-motion ._0920e02cc8fc7b7b-viewAllGames,
.full-motion ._0920e02cc8fc7b7b-viewAllNitroGames {
transition: transform 0.2s ease;
}
._0920e02cc8fc7b7b-viewAllGames:hover ._0920e02cc8fc7b7b-viewAllIcon,
._0920e02cc8fc7b7b-viewAllNitroGames:hover ._0920e02cc8fc7b7b-viewAllIcon {
transform: rotate(-90deg) translateY(3px);
}
._0920e02cc8fc7b7b-viewAllIcon {
height: 20px;
width: 20px;
}
._0920e02cc8fc7b7b-homeTile {
margin: 0 10px;
}
._0920e02cc8fc7b7b-homeTile:first-child {
-webkit-margin-start: 0;
margin-inline-start: 0;
}
._0920e02cc8fc7b7b-homeTile:last-child {
-webkit-margin-end: 0;
margin-inline-end: 0;
}
._0920e02cc8fc7b7b-spinner {
margin-bottom: 40px;
margin-top: 40px;
}
._0920e02cc8fc7b7b-homeWrapper {
background-color: var(--background-base-lowest);
border-top: 1px solid var(--app-frame-border);
display: flex;
flex-direction: column;
position: relative;
}
._0920e02cc8fc7b7b-homeWrapperNormal {
height: 100%;
width: 100%;
}
._0920e02cc8fc7b7b-marketingWrapper {
flex-shrink: 0;
}
._0920e02cc8fc7b7b-premiumApplicationsHeader {
border-bottom-width: 1px;
border-style: solid;
display: flex;
flex-direction: column;
font-size: 16px;
font-weight: var(--font-weight-medium);
margin: 32px 0 20px;
padding-bottom: 10px;
}
.theme-dark ._0920e02cc8fc7b7b-categoryHeader,
.theme-dark ._0920e02cc8fc7b7b-premiumApplicationsHeader {
border-color: var(--primary-500);
}
.theme-light ._0920e02cc8fc7b7b-categoryHeader,
.theme-light ._0920e02cc8fc7b7b-premiumApplicationsHeader {
border-color: var(--primary-200);
}
@media (min-width: 849px) {
._0920e02cc8fc7b7b-categoryHeader,
._0920e02cc8fc7b7b-premiumApplicationsHeader {
align-content: center;
color: var(--text-strong);
flex-direction: row;
justify-content: space-between;
}
}
@media (max-width: 485px) {
._0920e02cc8fc7b7b-premiumContainer {
padding: 16px;
}
}
._0920e02cc8fc7b7b-viewAllGames {
color: var(--text-strong);
}
._0920e02cc8fc7b7b-headerBarV2LightBackground {
background: var(--white) !important;
}
._0920e02cc8fc7b7b-headerBarV2DarkBackground {
background: var(--black) !important;
}
._62eb1df151d8bf49-applicationHomeBanner {
flex-direction: row;
height: 226px;
margin: 24px 16px;
max-width: 1052px;
position: relative;
}
._62eb1df151d8bf49-applicationHomeBanner,
._62eb1df151d8bf49-settingsBanner {
border-radius: var(--radius-lg);
display: flex;
}
._62eb1df151d8bf49-settingsBanner {
background: var(--background-secondary-alt);
box-sizing: border-box;
flex: 1;
height: 171px;
margin-bottom: 24px;
max-width: 820px;
overflow: hidden;
width: 100%;
}
._62eb1df151d8bf49-settingsImageContainer {
display: flex;
height: auto;
width: auto;
}
._62eb1df151d8bf49-settingsBannerLeftImageContainer {
max-width: 130px;
}
._62eb1df151d8bf49-settingsBannerRightImageContainer {
max-width: 81px;
}
._62eb1df151d8bf49-bannerBoxOutlinePosition {
height: 226px;
position: absolute;
top: -2px;
width: 100%;
}
._62eb1df151d8bf49-backgroundGradient {
background: linear-gradient(90deg, #db00a4, #5968f0);
border-radius: var(--radius-lg);
height: 100%;
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
padding: 2px;
width: calc(100% - 2px);
}
._62eb1df151d8bf49-imageContainer {
border-radius: 0 16px 16px 0;
display: flex;
flex: 518 1 0%;
order: 0;
position: relative;
}
._62eb1df151d8bf49-settingsImage {
height: 100%;
object-fit: cover;
overflow: hidden;
width: auto;
}
._62eb1df151d8bf49-applicationHomeImage {
border-radius: 0 14px 14px 0;
height: 100%;
object-fit: cover;
object-position: left center;
width: 100%;
}
._62eb1df151d8bf49-bannerContent {
flex: 436 1 0%;
flex-direction: column;
justify-content: space-between;
padding: 40px 25px;
}
._62eb1df151d8bf49-bannerContent,
._62eb1df151d8bf49-settingsBannerContent {
display: flex;
position: relative;
width: 100%;
}
._62eb1df151d8bf49-settingsBannerContent {
flex: 405 1 0%;
flex-direction: column;
gap: 8px;
min-width: 300px;
padding: 25px;
}
@container premium-marketing-page-container (max-width: 960px) {
._62eb1df151d8bf49-bannerHeader {
font-size: 32px;
font-weight: 800;
}
._62eb1df151d8bf49-bannerHeader,
._62eb1df151d8bf49-bannerText {
font-style: normal;
line-height: 1.25;
}
._62eb1df151d8bf49-bannerText {
font-size: 16px;
font-weight: 500;
}
}
@container premium-marketing-page-container (max-width: 960px) and (min-width: 720px) {
._62eb1df151d8bf49-bannerHeader {
font-size: 20px;
font-style: normal;
font-weight: 800;
line-height: 24px;
}
._62eb1df151d8bf49-bannerText {
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 1.2857142857142858;
}
}
@container premium-marketing-page-container (max-width: 720px) {
._62eb1df151d8bf49-bannerHeader {
font-size: 20px;
font-style: normal;
font-weight: 800;
line-height: 24px;
}
._62eb1df151d8bf49-bannerText {
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 1.2857142857142858;
}
._62eb1df151d8bf49-bannerContent {
padding: 16px;
}
}
._62eb1df151d8bf49-subscribeButton {
margin-top: 8px;
min-width: 110px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
._62eb1df151d8bf49-subscribeButtonText {
max-width: unset;
}
._62eb1df151d8bf49-premiumTrialBadge {
align-items: center;
border-radius: var(--radius-md);
display: flex;
inset-inline-start: 24px;
position: absolute;
top: -8px;
-webkit-margin-start: auto;
margin-inline-start: auto;
padding: 0 6px;
pointer-events: all;
text-transform: uppercase;
}
._62eb1df151d8bf49-badgeGradient {
background: linear-gradient(90deg, #db00a4, #5968f0);
}
._62eb1df151d8bf49-buttonGradient {
background: var(--custom-premium-colors-premium-gradient-tier-2-tri-color);
color: var(--white) !important;
}
._62eb1df151d8bf49-subBanner {
align-items: center;
background: var(--background-surface-high);
border-radius: var(--radius-lg);
display: flex;
flex-direction: row;
height: 100px;
justify-content: center;
margin: auto auto 40px;
padding: 16px 24px;
position: relative;
width: 620px;
}
._62eb1df151d8bf49-subHomeBannerImageContainer {
display: flex;
height: auto;
max-width: 96px;
width: auto;
}
._62eb1df151d8bf49-subBannerContent {
align-items: flex-start;
display: flex;
flex: 405 1 0%;
flex-direction: column;
gap: 8px;
min-width: 300px;
padding: 25px;
position: relative;
text-align: start;
width: 100%;
}
._72cd3c61001cedfe-container {
align-items: center;
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
bottom: 0;
display: flex;
inset-inline: 0;
justify-content: space-between;
padding: var(--space-8);
position: absolute;
}
._72cd3c61001cedfe-textSection {
display: flex;
flex-direction: column;
justify-content: center;
-webkit-margin-start: var(--space-16);
gap: 2px;
margin-inline-start: var(--space-16);
max-width: 57%;
}
._72cd3c61001cedfe-avatar {
align-items: center;
bottom: -20%;
display: flex;
inset-inline-end: 10px;
position: absolute;
z-index: 1;
}
.full-motion ._72cd3c61001cedfe-avatar {
inset-inline-end: 0;
top: -50px;
}
._72cd3c61001cedfe-bannerImage {
background-position-x: 95%;
background-position-y: 100%;
background-repeat: no-repeat;
background-size: 300%;
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
inset: 0;
opacity: 0.5;
position: absolute;
transform: scaleX(-1);
z-index: 0;
}
.e99fefd24645b4e2-container,
.e99fefd24645b4e2-progressHeader {
align-items: flex-start;
align-self: stretch;
display: flex;
flex-direction: column;
}
.e99fefd24645b4e2-progressHeader {
width: 100%;
}
.e99fefd24645b4e2-progressBar {
background-color: var(--background-surface-highest);
border-radius: 94px;
height: 10px;
margin: var(--space-12) 0;
position: relative;
width: 100%;
}
.e99fefd24645b4e2-progressBarFill {
background: linear-gradient(90deg, #13184c, #5865f2);
height: 100%;
fill: #5865f2;
}
.e99fefd24645b4e2-progressBarIndicator {
align-items: center;
border-radius: 50%;
box-shadow: 0 0 20px 5px #5865f2;
display: flex;
height: 100%;
position: absolute;
}
.e99fefd24645b4e2-cards {
gap: var(--space-12);
width: 100%;
}
.e99fefd24645b4e2-cards,
.e99fefd24645b4e2-promoCardContainer {
display: flex;
flex-direction: column;
}
.e99fefd24645b4e2-promoCardContainer {
align-items: stretch;
background-color: var(--background-surface-highest);
border: 1px solid var(--border-muted);
border-radius: var(--radius-lg);
gap: 14px;
margin-top: var(--space-12);
padding: var(--space-16) 0;
}
.e99fefd24645b4e2-wrap {
display: flex;
flex-direction: row;
gap: 10px;
padding: 0 var(--space-16);
}
.e99fefd24645b4e2-promoCardContent {
width: 100%;
}
.e99fefd24645b4e2-promoCardContentDetails {
width: 60%;
}
.e99fefd24645b4e2-promoCardContentText {
display: flex;
flex-direction: column;
gap: 4px;
margin: var(--space-12) 0;
}
.e99fefd24645b4e2-promoCardAssetContainer {
align-items: center;
display: flex;
width: 40%;
}
.e99fefd24645b4e2-promoCardAsset {
margin: 0 auto;
}
.e99fefd24645b4e2-lockIconContainer {
align-items: center;
aspect-ratio: 1/1;
background: var(--background-mod-subtle);
border-radius: var(--radius-sm);
display: flex;
flex-shrink: 0;
height: 32px;
justify-content: center;
width: 32px;
}
.e99fefd24645b4e2-claimedFooterContainer {
border-top: 1px solid var(--border-muted);
padding-top: var(--space-16);
}
.e99fefd24645b4e2-claimedFooter,
.e99fefd24645b4e2-claimedFooterContainer {
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
}
.e99fefd24645b4e2-claimedFooter {
gap: 10px;
margin: 0 var(--space-16);
}
.e99fefd24645b4e2-claimedFooterCode {
flex: 1 0 0;
}
.e99fefd24645b4e2-extraCodeButton {
align-items: center;
background-color: var(--background-surface-highest);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
cursor: pointer;
display: flex;
justify-content: center;
margin: 0 auto;
padding: var(--space-4) 0;
width: 80%;
}
.abac7bf510fef1f8-boxBackdrop {
align-items: center;
display: flex;
flex-direction: column;
width: 100%;
}
.abac7bf510fef1f8-bentoBoxesGrid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 16px 16px 0;
max-width: 1064px;
row-gap: 16px;
}
.abac7bf510fef1f8-referralProgramBackground,
.abac7bf510fef1f8-yourStyleBackground {
background: linear-gradient(180deg, #000, #19033d);
}
.abac7bf510fef1f8-customThemesBackground,
.abac7bf510fef1f8-displayNameStylesBackground,
.abac7bf510fef1f8-serverProfilesBackground,
.abac7bf510fef1f8-yourSpaceBackground {
background: linear-gradient(180deg, #000, #2a1332);
}
.abac7bf510fef1f8-noLimitsBackground {
background: linear-gradient(180deg, #000, #36266d);
}
.abac7bf510fef1f8-emojisBackground {
background: linear-gradient(180deg, #000, #031a3b);
}
.theme-light .abac7bf510fef1f8-referralProgramBackground,
.theme-light .abac7bf510fef1f8-yourStyleBackground {
background: linear-gradient(180deg, #f7f7fe 22.95%, #a9b7ff 153.33%);
}
.theme-light .abac7bf510fef1f8-serverProfilesBackground {
background: linear-gradient(180deg, #f7f7fe 50%, #ffc6fd 153.33%);
}
.theme-light .abac7bf510fef1f8-customThemesBackground,
.theme-light .abac7bf510fef1f8-displayNameStylesBackground,
.theme-light .abac7bf510fef1f8-yourSpaceBackground {
background: linear-gradient(180deg, #f7f7fe 50%, #ffc6fd 153.33%);
}
.theme-light .abac7bf510fef1f8-noLimitsBackground {
background: linear-gradient(180deg, #f7f7fe 22.95%, #b6b9fc 153.33%);
}
.theme-light .abac7bf510fef1f8-emojisBackground {
background: linear-gradient(180deg, #f7f7fe 22.95%, #b6ddfc 153.33%);
}
.abac7bf510fef1f8-bentoSideGradient {
background: radial-gradient(45% 70% at -22% 50%, #ff70f9 0, transparent 100%), radial-gradient(45% 70% at -22% 50%, #ff903f 0, transparent 100%);
height: 900px;
inset-inline-start: calc(50% - 50vw);
opacity: 0.4;
pointer-events: none;
position: absolute;
top: calc(100% - 509px);
width: 100vw;
}
.abac7bf510fef1f8-boxVideo {
height: 100%;
object-fit: contain;
width: 100%;
}
.abac7bf510fef1f8-elevateProfileVideo,
.abac7bf510fef1f8-shareNitroVideo {
height: 70%;
width: unset;
}
.abac7bf510fef1f8-shareNitroVideo {
position: absolute;
top: 50px;
}
.abac7bf510fef1f8-header p {
margin: 0;
}
.abac7bf510fef1f8-description {
display: flex;
flex-direction: column;
gap: var(--space-12);
}
.abac7bf510fef1f8-description p {
margin: 0;
}
.abac7bf510fef1f8-bentoBoxButton {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.abac7bf510fef1f8-boxesSubHeader {
margin-bottom: 10px;
}
.abac7bf510fef1f8-bentoSectionHeader {
font-style: italic;
text-transform: uppercase;
}
.abac7bf510fef1f8-boxArtContainer.abac7bf510fef1f8-large {
align-content: end;
flex: 1;
order: 0;
position: relative;
}
.abac7bf510fef1f8-boxArtContainer.abac7bf510fef1f8-medium {
height: 316px;
order: 1;
position: relative;
}
.abac7bf510fef1f8-boxArtContainer.abac7bf510fef1f8-small {
align-items: center;
display: flex;
flex-direction: column;
height: 348px;
justify-content: flex-end;
order: 1;
overflow: hidden;
position: relative;
}
.abac7bf510fef1f8-boxContainer.abac7bf510fef1f8-large {
border-radius: 16px;
display: flex;
flex-direction: row;
width: 100%;
}
.abac7bf510fef1f8-boxContainer.abac7bf510fef1f8-medium,
.abac7bf510fef1f8-boxContainer.abac7bf510fef1f8-small {
border-radius: 16px;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.abac7bf510fef1f8-boxContainer.abac7bf510fef1f8-medium {
padding: 24px;
width: calc(50% - 8px);
}
.abac7bf510fef1f8-boxContainer.abac7bf510fef1f8-small {
padding: 0 24px 24px;
width: calc(33.33333% - 10.66667px);
}
.abac7bf510fef1f8-textBox.abac7bf510fef1f8-large {
-webkit-margin-end: 13px;
gap: 24px;
margin-inline-end: 13px;
order: 0;
padding: 24px;
width: 222px;
}
.abac7bf510fef1f8-textBox.abac7bf510fef1f8-large,
.abac7bf510fef1f8-textBox.abac7bf510fef1f8-medium,
.abac7bf510fef1f8-textBox.abac7bf510fef1f8-small {
display: flex;
flex-direction: column;
justify-content: center;
}
.abac7bf510fef1f8-textBox.abac7bf510fef1f8-medium,
.abac7bf510fef1f8-textBox.abac7bf510fef1f8-small {
gap: 16px;
margin-top: 16px;
order: 2;
}
.abac7bf510fef1f8-header.abac7bf510fef1f8-large {
max-width: 95%;
}
.abac7bf510fef1f8-header.abac7bf510fef1f8-large,
.abac7bf510fef1f8-header.abac7bf510fef1f8-medium,
.abac7bf510fef1f8-header.abac7bf510fef1f8-small {
-webkit-hyphens: auto;
hyphens: auto;
word-break: break-word;
}
.abac7bf510fef1f8-bentoBoxButtonWhite {
border-color: var(--white);
color: var(--white);
}
.abac7bf510fef1f8-bentoBoxButtonBrand {
border-color: var(--control-secondary-border-default);
color: var(--control-secondary-border-default) !important;
}
.abac7bf510fef1f8-bentoBoxButtonBrand:hover {
color: var(--white) !important;
}
@container premium-marketing-page-container (max-width: 720px) {
.abac7bf510fef1f8-header.abac7bf510fef1f8-large,
.abac7bf510fef1f8-header.abac7bf510fef1f8-medium {
font-size: 24px;
font-style: normal;
font-weight: 800;
line-height: 30px;
}
.abac7bf510fef1f8-textBox.abac7bf510fef1f8-large {
gap: 16px;
width: 121px;
}
.abac7bf510fef1f8-boxArtContainer.abac7bf510fef1f8-medium {
height: unset;
}
.abac7bf510fef1f8-boxArtContainer.abac7bf510fef1f8-small {
height: 212px;
}
}
@container premium-marketing-page-container (max-width: 720px) and (min-width: 540px) {
.abac7bf510fef1f8-header.abac7bf510fef1f8-small {
font-size: 20px;
font-style: normal;
font-weight: 800;
line-height: 24px;
}
}
@container premium-marketing-page-container (max-width: 540px) {
.abac7bf510fef1f8-boxContainer.abac7bf510fef1f8-large,
.abac7bf510fef1f8-boxContainer.abac7bf510fef1f8-small {
flex-direction: column;
padding: 0 24px 24px;
width: 100%;
}
.abac7bf510fef1f8-textBox.abac7bf510fef1f8-large {
margin: 16px 0 0;
order: 1;
padding: 0;
width: 100%;
}
.abac7bf510fef1f8-boxArtContainer.abac7bf510fef1f8-small {
height: 330px;
position: relative;
}
.abac7bf510fef1f8-elevateProfileVideo,
.abac7bf510fef1f8-shareNitroVideo {
height: 100%;
object-fit: contain;
position: relative;
top: 0;
width: 100%;
}
}
.abac7bf510fef1f8-badgeContainer {
margin-bottom: var(--space-8);
}
.abac7bf510fef1f8-badge {
align-items: center;
background: linear-gradient(90deg, #db00a4, #5968f0);
border-radius: 19px;
justify-content: center;
padding: 0 var(--space-4);
text-transform: uppercase;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.b0db003538002d93-boxBackdrop {
align-items: center;
display: flex;
flex-direction: column;
width: 100%;
}
.b0db003538002d93-bentoSectionHeader {
font-style: italic;
margin-bottom: var(--space-32);
text-transform: uppercase;
}
.b0db003538002d93-bentoBoxesGrid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 1105px;
row-gap: var(--space-32);
}
.b0db003538002d93-bentoBoxButton {
margin-top: var(--space-24);
}
.b0db003538002d93-backgroundColor {
background: var(--background-surface-high);
}
.b0db003538002d93-description {
display: inline;
flex-direction: column;
gap: var(--space-12);
margin-top: var(--space-12);
}
.b0db003538002d93-boxesSubHeader {
margin-bottom: 10px;
}
.b0db003538002d93-badgeContainer {
margin-bottom: var(--space-8);
}
.b0db003538002d93-badge {
align-items: center;
background: linear-gradient(90deg, #db00a4, #5968f0);
border-radius: 19px;
justify-content: center;
padding: 0 var(--space-4);
text-transform: uppercase;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.b0db003538002d93-boxVideo {
height: 100%;
object-fit: contain;
width: 100%;
}
.b0db003538002d93-header {
-webkit-hyphens: auto;
hyphens: auto;
word-break: break-word;
}
.b0db003538002d93-boxArtContainer.b0db003538002d93-large {
align-content: right;
order: 0;
position: relative;
width: 100%;
}
.b0db003538002d93-boxArtContainer.b0db003538002d93-medium {
height: 288px;
order: 1;
position: relative;
}
.b0db003538002d93-boxArtContainer.b0db003538002d93-small {
align-items: center;
display: flex;
flex-direction: column;
height: 348px;
justify-content: flex-end;
order: 1;
overflow: hidden;
position: relative;
}
.b0db003538002d93-boxContainer.b0db003538002d93-large {
border-radius: var(--radius-lg);
display: flex;
flex-direction: row;
height: 400px;
padding: var(--space-12);
width: 100%;
}
.b0db003538002d93-boxContainer.b0db003538002d93-medium,
.b0db003538002d93-boxContainer.b0db003538002d93-small {
border-radius: var(--radius-lg);
box-sizing: border-box;
display: flex;
flex-direction: column;
padding: var(--space-12) var(--space-12) var(--space-24);
}
.b0db003538002d93-boxContainer.b0db003538002d93-medium {
width: calc(50% - 16px);
}
.b0db003538002d93-boxContainer.b0db003538002d93-small {
width: calc(33.33333% - 21.33333px);
}
.b0db003538002d93-textBox.b0db003538002d93-large {
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
min-width: 334px;
order: 0;
padding: 0 var(--space-24);
}
.b0db003538002d93-textBox.b0db003538002d93-medium,
.b0db003538002d93-textBox.b0db003538002d93-small {
display: flex;
flex-direction: column;
justify-content: center;
order: 2;
}
.b0db003538002d93-textBox.b0db003538002d93-medium {
margin: var(--space-24) var(--space-32) var(--space-32);
}
.b0db003538002d93-textBox.b0db003538002d93-small {
margin-top: var(--space-12);
}
.b0db003538002d93-gradientBackground:before {
opacity: 0.3;
}
@container premium-marketing-page-container (max-width: 960px) {
.b0db003538002d93-boxArtContainer.b0db003538002d93-medium {
height: 225px;
}
.b0db003538002d93-textBox.b0db003538002d93-large {
min-width: 280px;
}
}
@container premium-marketing-page-container (max-width: 720px) {
.b0db003538002d93-bentoSectionHeader {
margin-bottom: var(--space-24);
}
.b0db003538002d93-header {
font-size: 24px;
}
.b0db003538002d93-boxContainer.b0db003538002d93-large,
.b0db003538002d93-boxContainer.b0db003538002d93-medium,
.b0db003538002d93-boxContainer.b0db003538002d93-small {
border-radius: var(--radius-lg);
box-sizing: border-box;
display: flex;
flex-direction: column;
height: unset;
padding: 0 0 var(--space-24);
width: 100%;
}
.b0db003538002d93-boxArtContainer.b0db003538002d93-large,
.b0db003538002d93-boxArtContainer.b0db003538002d93-medium,
.b0db003538002d93-boxArtContainer.b0db003538002d93-small {
height: 360px;
order: 1;
position: relative;
}
.b0db003538002d93-textBox.b0db003538002d93-large,
.b0db003538002d93-textBox.b0db003538002d93-small {
display: flex;
flex-direction: column;
justify-content: center;
margin: var(--space-24) var(--space-24) var(--space-32);
order: 2;
padding: unset;
width: unset;
}
}
._70f7f6541f6f031e-wrapper {
bottom: 0;
display: flex;
inset-inline-start: 0;
justify-content: center;
opacity: 0;
pointer-events: none;
position: -webkit-sticky;
position: sticky;
width: 100%;
z-index: 10;
}
._70f7f6541f6f031e-fullscreenWrapper {
margin-bottom: 42px;
}
._70f7f6541f6f031e-innerWrapperBase {
align-items: center;
background-color: var(--background-secondary-alt);
border-radius: 8px;
box-shadow: var(--shadow-border), var(--shadow-high);
box-sizing: border-box;
display: flex;
justify-content: center;
padding: 16px;
pointer-events: all;
position: relative;
}
._70f7f6541f6f031e-innerWrapper {
}
._70f7f6541f6f031e-innerWrapper:after,
._70f7f6541f6f031e-innerWrapper:before {
border: 2px solid transparent;
border-radius: inherit;
box-sizing: border-box;
content: "";
height: 100%;
inset-inline-start: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
}
._70f7f6541f6f031e-innerWrapper:after {
border-color: var(--guild-boosting-blue);
-webkit-mask: linear-gradient(0deg, #000, transparent);
mask: linear-gradient(0deg, #000, transparent);
}
._70f7f6541f6f031e-innerWrapper:before {
border-color: var(--guild-boosting-purple);
}
._70f7f6541f6f031e-innerWrapperApplicationHome {
}
._70f7f6541f6f031e-innerWrapperApplicationHome:after,
._70f7f6541f6f031e-innerWrapperApplicationHome:before {
border: 2px solid transparent;
border-radius: inherit;
box-sizing: border-box;
content: "";
height: 100%;
inset-inline-start: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
}
._70f7f6541f6f031e-innerWrapperApplicationHome:after {
border-color: #5968f0;
-webkit-mask: linear-gradient(0deg, #000, transparent);
mask: linear-gradient(0deg, #000, transparent);
}
._70f7f6541f6f031e-innerWrapperApplicationHome:before {
border-color: #db00a4;
}
._70f7f6541f6f031e-invisible > ._70f7f6541f6f031e-innerWrapper {
pointer-events: none;
}
.theme-light ._70f7f6541f6f031e-innerWrapper {
background-color: var(--background-base-lower);
}
._70f7f6541f6f031e-button {
border-radius: 4px;
min-width: 160px;
}
._70f7f6541f6f031e-button:first-child {
-webkit-margin-end: 16px;
margin-inline-end: 16px;
}
._70f7f6541f6f031e-subButton {
color: var(--brand-500) !important;
}
._70f7f6541f6f031e-tier2Gradient {
background: var(--custom-premium-colors-premium-gradient-tier-2-tri-color);
color: var(--white);
}
._26daef4481a269d6-root {
display: flex;
flex-direction: column;
max-width: 945px;
width: 100%;
}
._26daef4481a269d6-titleText {
justify-content: center;
margin-bottom: 44px;
text-align: center;
}
._26daef4481a269d6-logo {
width: 100px;
}
._26daef4481a269d6-table {
border-collapse: separate;
border-spacing: 10px 20px;
display: flex;
flex-direction: column;
margin-bottom: 27px;
padding: 0 40px;
}
._26daef4481a269d6-headerRow,
._26daef4481a269d6-row {
display: flex;
flex-direction: row;
z-index: 5;
}
._26daef4481a269d6-headerRow {
height: 40px;
margin-top: 24px;
}
._26daef4481a269d6-row {
min-height: 57px;
}
._26daef4481a269d6-rowBottomBorder {
border-bottom: 1px solid var(--interactive-background-active);
}
._26daef4481a269d6-cell,
._26daef4481a269d6-headerCell {
align-items: center;
display: flex;
flex-direction: column;
width: 170px;
}
._26daef4481a269d6-headerCell {
justify-content: start;
}
._26daef4481a269d6-cell {
justify-content: center;
}
._26daef4481a269d6-headerLabelCell,
._26daef4481a269d6-labelCell {
display: flex;
flex: 1;
justify-content: flex-start;
text-align: start;
}
._26daef4481a269d6-headerLabelCell {
align-items: start;
}
._26daef4481a269d6-labelCell {
align-items: center;
margin: 12px 0;
}
._26daef4481a269d6-closeIcon {
color: var(--interactive-muted);
}
._26daef4481a269d6-checkmarkIcon {
color: var(--interactive-text-active);
}
._26daef4481a269d6-button {
height: 40px;
width: 180px;
}
._26daef4481a269d6-tableWrapper {
padding: 2px;
position: relative;
}
._26daef4481a269d6-backgroundGradient {
background: linear-gradient(90deg, #db00a4, #5968f0);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
padding: 2px;
}
._26daef4481a269d6-tier0ColumnPosition {
height: 100%;
inset-inline-end: 208px;
position: absolute;
top: 0;
}
._26daef4481a269d6-tier2ColumnPosition {
height: 100%;
inset-inline-end: 40px;
position: absolute;
top: 0;
}
._26daef4481a269d6-tier0ColumnOuter {
border-radius: var(--radius-lg);
}
._26daef4481a269d6-tier0ColumnOuter,
._26daef4481a269d6-tier2ColumnOuter {
height: 100%;
width: 174px;
z-index: 9;
}
._26daef4481a269d6-tier2ColumnOuter {
border-radius: 16px;
margin-top: -26px;
}
._26daef4481a269d6-tier2Pill {
border-radius: 16px;
inset-inline-end: 0;
position: absolute;
top: 0;
width: 212px;
z-index: 9;
}
._26daef4481a269d6-topBorderRadius {
border-start-end-radius: 16px;
border-start-start-radius: 16px;
}
._26daef4481a269d6-comparisonTablePill {
background: linear-gradient(90deg, #db00a4, #5968f0);
border-radius: 8px;
margin: auto;
max-height: 24px;
max-width: 80px;
padding: 4px 8px;
position: relative;
top: -12px;
z-index: 10;
}
._26daef4481a269d6-mostPopularText {
text-align: center;
text-transform: uppercase;
}
._26daef4481a269d6-mostPopularText,
._26daef4481a269d6-rowLabelText {
color: var(--white);
}
.theme-light ._26daef4481a269d6-rowLabelText {
color: var(--black);
}
._26daef4481a269d6-basicCheckMark {
color: #68bdff;
}
._26daef4481a269d6-premiumCheckMark {
color: #fe58d5;
}
._26daef4481a269d6-bottomMargin,
._26daef4481a269d6-section {
margin-bottom: 30px;
}
._24d8940f4e840aa3-boltContainer,
._24d8940f4e840aa3-carContainer,
._24d8940f4e840aa3-hammerContainer,
._24d8940f4e840aa3-keyContainer,
._24d8940f4e840aa3-starContainer {
pointer-events: none;
}
._24d8940f4e840aa3-carContainer,
._24d8940f4e840aa3-hammerContainer {
z-index: -1;
}
._82b1020fcf7b96bd-jumpingWumpusContainer {
inset-inline-start: 50%;
position: absolute;
top: -300px;
transform: translateX(-50%);
}
._82b1020fcf7b96bd-jumpingWumpus {
height: 283px;
}
._82b1020fcf7b96bd-boltContainer,
._82b1020fcf7b96bd-carContainer,
._82b1020fcf7b96bd-hammerContainer,
._82b1020fcf7b96bd-keyContainer,
._82b1020fcf7b96bd-starContainer {
position: absolute;
}
._82b1020fcf7b96bd-boltContainer {
inset-inline-start: 0;
top: 200px;
}
._82b1020fcf7b96bd-carContainer {
inset-inline-end: 90px;
top: -80px;
}
._82b1020fcf7b96bd-hammerContainer {
inset-inline-start: -65px;
top: 40px;
}
._82b1020fcf7b96bd-keyContainer {
inset-inline-end: 50px;
top: 185px;
}
._82b1020fcf7b96bd-starContainer {
inset-inline-start: 50px;
top: -200px;
}
@container premium-marketing-page-container (max-width: 720px) {
._82b1020fcf7b96bd-boltContainer {
transform: translateY(75px);
}
._82b1020fcf7b96bd-keyContainer {
transform: translateY(125px);
}
._82b1020fcf7b96bd-boltTrinket,
._82b1020fcf7b96bd-carTrinket,
._82b1020fcf7b96bd-hammerTrinket,
._82b1020fcf7b96bd-keyTrinket,
._82b1020fcf7b96bd-starTrinket {
width: 60px;
}
}
._15b9a012b54be4f0-container {
align-items: center;
display: flex;
justify-content: center;
margin-top: 100px;
min-height: 650px;
padding: 0 40px;
position: relative;
}
._15b9a012b54be4f0-contentContainer {
max-width: 800px;
min-width: 600px;
position: relative;
text-align: center;
z-index: 1;
}
._15b9a012b54be4f0-footerHeader {
font-size: 72px;
font-style: italic;
font-weight: 900;
letter-spacing: -1.28px;
line-height: 100%;
text-transform: uppercase;
}
@container premium-marketing-page-container (max-width: 960px) {
._15b9a012b54be4f0-container {
min-height: 750px;
}
}
._7137c5e977587553-container {
background: var(--background-surface-high);
border: 1px solid var(--border-muted);
border-radius: 20px;
flex-direction: row;
gap: 24px;
margin-top: 40px;
max-width: 700px;
padding: 16px 24px;
}
._7137c5e977587553-asset,
._7137c5e977587553-container {
align-items: center;
display: flex;
}
._7137c5e977587553-asset {
flex-direction: column;
flex-shrink: 0;
justify-content: center;
}
._7137c5e977587553-bannerContent {
flex: 1;
flex-direction: column;
gap: 2px;
justify-content: flex;
min-height: 62px;
}
._7137c5e977587553-bannerContent,
._7137c5e977587553-bannerDescription {
align-items: flex-start;
display: flex;
}
._7137c5e977587553-bannerDescription {
text-align: start;
}
._7137c5e977587553-buttonContainer {
-webkit-margin-start: 32px;
margin-inline-start: 32px;
}
@media (max-width: 900px) {
._7137c5e977587553-container {
flex-direction: column;
}
._7137c5e977587553-bannerContent,
._7137c5e977587553-container {
align-items: center;
text-align: center;
}
._7137c5e977587553-bannerDescription {
justify-content: center;
text-align: center;
}
._7137c5e977587553-buttonContainer {
-webkit-margin-start: 0;
margin-inline-start: 0;
}
}
.d0d75b32e1ab86de-timerContainer {
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
}
.d0d75b32e1ab86de-timeUnitsOuterContainer {
display: flex;
flex-direction: row;
justify-content: center;
}
.d0d75b32e1ab86de-timeUnitInnerContainer {
display: flex;
flex-direction: column;
gap: 6px;
}
.d0d75b32e1ab86de-time {
display: flex;
flex-direction: row;
gap: 2px;
}
.d0d75b32e1ab86de-timeBoxOutline {
align-content: center;
background-color: hsl(var(--opacity-24-hsl) / 0.23921568627450981);
border-radius: 6px;
height: 36px;
justify-content: center;
width: 24px;
}
.d0d75b32e1ab86de-unitDivider {
margin: 0 6px;
position: relative;
top: 4px;
}
.afe9b4950c4dfa65-attributionBannerContainer {
align-items: center;
display: flex;
justify-content: start;
margin-top: 8px;
padding-bottom: 20px;
width: 100%;
}
.afe9b4950c4dfa65-premiumBrandRefreshContainer {
align-items: center;
background: var(--background-mod-normal);
border-radius: var(--radius-md);
display: flex;
padding: var(--space-12) var(--space-16);
}
.afe9b4950c4dfa65-attributionBannerContainerRebranded {
align-items: center;
background: var(--color-background-mod-normal, hsla(240, 4%, 61%, 0.2));
border: 1px solid var(--border-muted);
border-radius: var(--radius-md);
display: flex;
flex-direction: column;
gap: 100px;
margin: 24px auto;
padding: 12px 16px;
width: 100%;
}
.afe9b4950c4dfa65-attributionBannerContentApplicationHomeRebranded {
align-items: center;
display: flex;
justify-content: start;
width: 100%;
}
.afe9b4950c4dfa65-textContainerRebranded {
-webkit-margin-start: 12px;
color: var(--white);
margin-inline-start: 12px;
text-align: start;
}
.afe9b4950c4dfa65-attributionBannerContent {
align-items: center;
background: linear-gradient(90deg, rgba(133, 71, 198, 0), rgba(133, 71, 198, 0.5) 25%, rgba(184, 69, 193, 0.5) 50.24%, rgba(171, 93, 138, 0.5) 80%, rgba(171, 93, 138, 0));
display: flex;
height: 50px;
justify-content: center;
margin-top: 24px;
min-width: 768px;
padding-bottom: 4px;
padding-top: 4px;
}
.afe9b4950c4dfa65-iconContainer {
display: flex;
-webkit-padding-start: 135px;
padding-inline-start: 135px;
}
.afe9b4950c4dfa65-iconContainerApplicationHome {
display: flex;
}
.afe9b4950c4dfa65-icon + .afe9b4950c4dfa65-icon {
-webkit-margin-start: -8px;
margin-inline-start: -8px;
}
.afe9b4950c4dfa65-textContainer {
-webkit-margin-start: 9px;
color: var(--white);
margin-inline-start: 9px;
text-align: start;
}
.afe9b4950c4dfa65-attributionIcon {
-webkit-margin-start: auto;
margin-inline-start: auto;
margin-bottom: -12px;
}
._3b397582635ae2a7-offerPill {
align-items: center;
background: linear-gradient(90deg, #db00a4, #5968f0);
border-radius: 20px;
display: flex;
margin-bottom: 12px;
padding: 0 4px;
position: relative;
text-transform: uppercase;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
._3b397582635ae2a7-premiumBrandRefreshOfferPill {
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
background: linear-gradient(90deg, rgba(155, 29, 165, 0.34), rgba(30, 35, 83, 0.34) 120%);
border: 1px solid var(--border-normal);
border-radius: var(--radius-xl);
padding: var(--space-8) var(--space-12);
text-transform: capitalize;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
}
.d033b5f611de2ed4-flyingWumpusContainer {
inset-inline-end: -155px;
pointer-events: none;
position: absolute;
top: 200px;
z-index: 2;
}
.d033b5f611de2ed4-flyingWumpusAsset {
height: 293px;
}
.d033b5f611de2ed4-boltContainer,
.d033b5f611de2ed4-carContainer,
.d033b5f611de2ed4-hammerContainer,
.d033b5f611de2ed4-keyContainer,
.d033b5f611de2ed4-starContainer {
position: absolute;
}
.d033b5f611de2ed4-boltContainer {
inset-inline-end: -250px;
top: 115px;
}
.d033b5f611de2ed4-carContainer {
inset-inline-start: 40px;
top: 270px;
}
.d033b5f611de2ed4-hammerContainer {
inset-inline-end: 90px;
top: 60px;
}
.d033b5f611de2ed4-keyContainer {
inset-inline-start: -70px;
top: 350px;
}
.d033b5f611de2ed4-starContainer {
inset-inline-start: -135px;
top: 110px;
}
@container premium-marketing-page-container (max-width: 960px) {
.d033b5f611de2ed4-flyingWumpusContainer {
inset-inline-end: -100px;
top: 170px;
}
.d033b5f611de2ed4-flyingWumpusAsset {
height: 200px;
}
.d033b5f611de2ed4-boltContainer {
inset-inline-end: -100px;
top: 325px;
}
.d033b5f611de2ed4-carContainer,
.d033b5f611de2ed4-keyContainer,
.d033b5f611de2ed4-starContainer {
transform: translateX(30px) translateY(-50px);
}
}
@container premium-marketing-page-container (max-width: 720px) {
.d033b5f611de2ed4-flyingWumpusContainer {
inset-inline-end: -80px;
top: 180px;
}
.d033b5f611de2ed4-flyingWumpusAsset {
height: 170px;
}
.d033b5f611de2ed4-keyContainer,
.d033b5f611de2ed4-starContainer {
transform: translateX(75px) translateY(-50px);
}
.d033b5f611de2ed4-carContainer {
transform: translateX(-75px) translateY(-50px);
}
.d033b5f611de2ed4-boltTrinket,
.d033b5f611de2ed4-carTrinket,
.d033b5f611de2ed4-hammerTrinket,
.d033b5f611de2ed4-keyTrinket,
.d033b5f611de2ed4-starTrinket {
width: 60px;
}
}
@container premium-marketing-page-container (max-width: 540px) {
.d033b5f611de2ed4-flyingWumpusAsset {
height: 140px;
}
}
:root {
--custom-premium-marketing-hero-heading-padding-top: 120px;
}
._3849ceeb1cc6f2f8-container {
justify-content: center;
text-align: center;
}
._3849ceeb1cc6f2f8-container,
._3849ceeb1cc6f2f8-contentContainer {
align-items: center;
display: flex;
position: relative;
}
._3849ceeb1cc6f2f8-contentContainer {
flex-direction: column;
gap: var(--space-24);
padding-top: var(--custom-premium-marketing-hero-heading-padding-top);
z-index: 1;
}
._3849ceeb1cc6f2f8-containerWithOfferCountdown ._3849ceeb1cc6f2f8-contentContainer {
padding-top: 80px;
}
._3849ceeb1cc6f2f8-body {
align-items: center;
display: flex;
flex-direction: column;
gap: var(--space-24);
margin: 0 80px;
}
._3849ceeb1cc6f2f8-marketingPageTextContainer {
max-width: 800px;
min-width: -webkit-min-content;
min-width: -moz-min-content;
min-width: min-content;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
@container premium-marketing-page-container (max-width: 960px) {
._3849ceeb1cc6f2f8-marketingPageTextContainer {
max-width: 650px;
}
}
@container premium-marketing-page-container (max-width: 720px) {
._3849ceeb1cc6f2f8-marketingPageTextContainer {
max-width: 500px;
}
}
._3849ceeb1cc6f2f8-descriptionContainer {
max-width: 400px;
}
@container premium-marketing-page-container (max-width: 720px) {
._3849ceeb1cc6f2f8-descriptionContainer {
max-width: 250px;
}
}
._3849ceeb1cc6f2f8-marketingPageHeading {
font-size: 64px;
font-style: italic;
font-weight: 900;
letter-spacing: -1.28px;
line-height: 82%;
text-transform: uppercase;
}
._3849ceeb1cc6f2f8-twoButtonContainer {
align-items: center;
display: flex;
gap: 16px;
justify-content: center;
}
._3849ceeb1cc6f2f8-singleButtonContainer {
margin: auto;
min-width: 260px;
}
._3849ceeb1cc6f2f8-offerPillContainer {
inset-inline-start: 50%;
position: absolute;
top: calc(var(--custom-premium-marketing-hero-heading-padding-top) - 40px);
transform: translateX(-50%);
}
._3849ceeb1cc6f2f8-affinitiesContainer,
._3849ceeb1cc6f2f8-referrerAttributionContainer {
margin: 0 auto;
}
._3849ceeb1cc6f2f8-header {
font-size: 58px;
font-style: italic;
font-weight: 900;
letter-spacing: -1.16px;
line-height: 100%;
text-transform: uppercase;
}
@container premium-marketing-page-container (max-width: 960px) {
._3849ceeb1cc6f2f8-header {
font-size: 48px;
letter-spacing: -0.96px;
}
}
@container premium-marketing-page-container (max-width: 720px) {
._3849ceeb1cc6f2f8-header {
font-size: 38px;
letter-spacing: -0.76px;
}
}
._3849ceeb1cc6f2f8-heroOfferCountdown {
margin-bottom: -12px;
}
.d38e00fc836e12fd-wrapper {
bottom: 0;
display: flex;
justify-content: center;
position: -webkit-sticky;
position: sticky;
z-index: 1;
}
.d38e00fc836e12fd-buttonContainer {
background-color: var(--background-surface-highest);
border-radius: var(--radius-md);
box-shadow: var(--shadow-low);
display: flex;
flex-direction: row;
gap: var(--space-12);
padding: var(--space-12);
}
.cbfae2cd2f78944f-root {
display: flex;
flex-direction: column;
margin: 0 var(--space-24);
width: 1080px;
}
.cbfae2cd2f78944f-titleText {
font-style: italic;
justify-content: center;
margin-bottom: var(--space-64);
text-align: center;
text-transform: uppercase;
}
.cbfae2cd2f78944f-planTitleWithPrice {
display: flex;
flex-direction: column;
z-index: 1;
}
.cbfae2cd2f78944f-planTitle {
align-items: center;
display: flex;
gap: var(--space-4);
justify-content: center;
margin-bottom: var(--space-4);
}
.cbfae2cd2f78944f-table {
display: flex;
flex-direction: column;
}
.cbfae2cd2f78944f-headerRow,
.cbfae2cd2f78944f-row {
display: flex;
flex-direction: row;
}
.cbfae2cd2f78944f-headerRow {
border-bottom: 1px solid var(--border-strong);
padding-bottom: var(--space-16);
}
.cbfae2cd2f78944f-cell {
align-items: center;
display: flex;
flex-direction: column;
width: 180px;
}
.cbfae2cd2f78944f-headerLabelCell,
.cbfae2cd2f78944f-labelCell {
display: flex;
flex: 1;
justify-content: flex-start;
text-align: start;
}
.cbfae2cd2f78944f-sectionTitle {
margin-top: 42px;
}
.cbfae2cd2f78944f-planComparisonItem {
border-bottom: 1px solid var(--border-strong);
padding: var(--space-24) 0;
}
.cbfae2cd2f78944f-tableWrapper {
position: relative;
}
.cbfae2cd2f78944f-backgroundGradient {
background: linear-gradient(180deg, var(--pink-49) 0, var(--premium-tier-0-purple) 100%);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
padding: 2px;
}
.cbfae2cd2f78944f-gradientColumn {
height: calc(100% + 28px);
position: absolute;
top: -31px;
width: 180px;
z-index: 1;
}
.cbfae2cd2f78944f-gradientColumn.cbfae2cd2f78944f-tier0 {
inset-inline-end: 180px;
}
.cbfae2cd2f78944f-gradientColumn.cbfae2cd2f78944f-tier2 {
inset-inline-end: 0;
}
.cbfae2cd2f78944f-gradientColumnBorder {
border-radius: var(--radius-md);
height: 100%;
inset-inline-start: -2px;
position: absolute;
top: 0;
width: 100%;
}
.cbfae2cd2f78944f-pill {
inset-inline-start: 50%;
position: absolute;
top: 1px;
transform: translate(-50%, -50%);
z-index: 2;
}
.cbfae2cd2f78944f-pill.cbfae2cd2f78944f-pillGradient {
background: linear-gradient(90deg, rgba(155, 29, 165, 0.84) 0, rgba(30, 35, 83, 0.84) 120%), var(--background-base-lower);
}
.cbfae2cd2f78944f-gradientBackgroundContainer {
border-radius: calc(var(--radius-md) - 2px);
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
.cbfae2cd2f78944f-gradientBackgroundPosition {
inset-inline-start: 0;
position: absolute;
top: 0;
}
.cbfae2cd2f78944f-nitroWheelIconColor {
fill: var(--icon-strong);
}
._81281805fb6b6ae4-heroHeadingContainer {
margin-top: 30px;
-webkit-margin-start: 30px;
margin-inline-start: 30px;
}
._81281805fb6b6ae4-container {
align-items: center;
display: flex;
justify-content: center;
position: relative;
text-align: center;
}
._81281805fb6b6ae4-settingsContainer {
background:
linear-gradient(
192.85deg,
var(--premium-tier-0-header-gradient-1) 42.31%,
var(--premium-tier-0-header-gradient-2) 72.74%,
var(--premium-tier-0-header-gradient-3) 86.45%,
var(--premium-tier-0-header-gradient-4) 98.78%,
var(--premium-tier-0-header-gradient-5) 123.01%
),
linear-gradient(180deg, var(--primary-700) 26.55%, var(--primary-660) 71.14%, var(--primary-630) 100%);
border-radius: 24px;
height: 330px;
margin-bottom: 24px;
width: 100%;
}
._81281805fb6b6ae4-header {
font-size: 44px;
}
@media (max-width: 1100px) {
._81281805fb6b6ae4-header {
font-size: 34px;
}
}
._81281805fb6b6ae4-affinityHeight {
height: 395px;
}
._81281805fb6b6ae4-fullscreenTextContainer {
max-width: 650px;
}
._81281805fb6b6ae4-settingsTextContainer {
max-width: 500px;
}
._81281805fb6b6ae4-description {
margin-top: 24px;
}
._81281805fb6b6ae4-descriptionV2 {
display: flex;
justify-content: start;
}
._81281805fb6b6ae4-descriptionBottomMargin {
margin-bottom: 32px;
}
._81281805fb6b6ae4-affinityDescription,
._81281805fb6b6ae4-affinityDescriptionNoMargin {
margin-top: 22px;
}
._81281805fb6b6ae4-affinityDescription {
margin-bottom: 22px;
}
._81281805fb6b6ae4-affinityDescriptionContainer {
margin-bottom: 10px;
margin-top: 10px;
}
._81281805fb6b6ae4-buttonContainer {
align-items: center;
display: flex;
gap: 16px;
justify-content: center;
width: 100%;
}
._81281805fb6b6ae4-button {
height: 40px;
min-width: 160px;
}
._81281805fb6b6ae4-extendedButton {
max-width: 339px;
width: 100%;
}
._81281805fb6b6ae4-sparkleStar {
color: var(--white);
position: absolute;
}
._81281805fb6b6ae4-settingsSparkleStar1 {
height: 36px;
inset-inline-start: 76px;
top: 42px;
width: 18px;
}
._81281805fb6b6ae4-settingsSparkleStar2 {
height: 24px;
inset-inline-start: 31px;
top: 80px;
width: 12px;
}
._81281805fb6b6ae4-settingsSparkleStar3 {
bottom: 78px;
height: 32px;
inset-inline-end: 94px;
width: 16px;
}
._81281805fb6b6ae4-settingsSparkleStar4 {
bottom: 38px;
height: 24px;
inset-inline-end: 54px;
width: 12px;
}
._81281805fb6b6ae4-fullscreenSparkleStar1 {
height: 32px;
inset-inline-start: -60px;
top: 60px;
width: 16px;
}
._81281805fb6b6ae4-fullscreenSparkleStar2 {
height: 32px;
inset-inline-start: -12px;
top: 98px;
width: 16px;
}
._81281805fb6b6ae4-fullscreenSparkleStar3 {
bottom: -24px;
height: 32px;
inset-inline-end: 20px;
width: 16px;
}
._81281805fb6b6ae4-fullscreenSparkleStar4 {
bottom: 16px;
height: 48px;
inset-inline-end: -36px;
width: 24px;
}
._81281805fb6b6ae4-backgroundColor {
margin-top: 40px;
}
.theme-light ._81281805fb6b6ae4-backgroundColor {
background: linear-gradient(279deg, hsl(var(--black-hsl) / 0) 0, var(--opacity-black-8) 50.8%, hsl(var(--black-hsl) / 0) 100%);
}
._81281805fb6b6ae4-marketingPageCTAContainer {
display: flex;
justify-content: start;
}
._81281805fb6b6ae4-marketingPageCTAMargin {
margin-top: 16px;
}
._81281805fb6b6ae4-marketingPageTextContainer {
max-width: 447px;
}
._81281805fb6b6ae4-marketingPageHeading {
font-size: 30px;
font-weight: 800;
line-height: 32px;
text-align: start;
}
@media (min-width: 972px) and (max-width: 1150px) {
._81281805fb6b6ae4-marketingPageHeading {
font-size: 34px;
font-weight: 800;
line-height: 36px;
}
}
@media (min-width: 1150px) {
._81281805fb6b6ae4-marketingPageHeading {
font-size: 44px;
font-weight: 800;
line-height: 42px;
}
}
._81281805fb6b6ae4-premiumOfferPill {
align-items: center;
background: linear-gradient(90deg, #db00a4, #5968f0);
border-radius: 20px;
display: flex;
margin-bottom: 12px;
padding: 0 4px;
position: relative;
text-transform: uppercase;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
._81281805fb6b6ae4-subButton {
color: hsl(235, calc(var(--saturation-factor, 1) * 85.6%), 64.7%) !important;
}
._81281805fb6b6ae4-whiteSubButton {
color: var(--white) !important;
}
._81281805fb6b6ae4-tier2Gradient {
background: var(--custom-premium-colors-premium-gradient-tier-2-tri-color);
color: var(--white);
}
._81281805fb6b6ae4-heroHeadingV2Art {
height: 100%;
object-fit: contain;
width: 100%;
}
._81281805fb6b6ae4-heroHeadingV2ArtContainer {
align-content: center;
display: flex;
max-width: 500px;
width: 100%;
-webkit-margin-start: 50px;
justify-content: end;
margin-inline-start: 50px;
}
._14cf25a728bdd004-container {
display: flex;
flex-direction: column;
position: relative;
text-align: center;
}
._14cf25a728bdd004-footerHeader {
font-style: italic;
margin-bottom: 36px;
text-transform: uppercase;
}
._14cf25a728bdd004-footerCTAContainer {
margin-bottom: 30px;
}
._14cf25a728bdd004-footerArtContainer {
display: flex;
width: 100%;
}
._14cf25a728bdd004-footerArt {
height: 100%;
object-fit: contain;
width: 100%;
}
@media (max-width: 975px) {
._14cf25a728bdd004-footerHeader {
font-size: 24px;
font-weight: 800;
line-height: 28px;
}
}
._14cf25a728bdd004-leftGradient {
background: radial-gradient(45% 75% at 0 100%, #ff4cd2 0, transparent 100%);
inset-inline-start: calc(50% - 50vw);
opacity: 0.23;
}
._14cf25a728bdd004-leftGradient,
._14cf25a728bdd004-rightGradient {
height: 100%;
pointer-events: none;
position: absolute;
width: 100vw;
}
._14cf25a728bdd004-rightGradient {
background: radial-gradient(45% 75% at 90% 100%, #2d01dc 0, transparent 100%), radial-gradient(45% 75% at 90% 100%, #b182ff 0, transparent 100%);
opacity: 0.4;
}
._88ef12dca13ecf84-navBar {
-webkit-backdrop-filter: blur(11.5px);
backdrop-filter: blur(11.5px);
border-bottom: 1px solid var(--color-border-strong, hsla(240, 4%, 61%, 0.44));
margin-bottom: calc(var(--custom-channel-header-height) * -1);
padding: 0;
position: -webkit-sticky;
position: sticky;
top: 0;
}
._88ef12dca13ecf84-nitroWheelIcon {
margin-top: 3px;
-webkit-margin-end: var(--space-24);
margin-inline-end: var(--space-24);
}
._88ef12dca13ecf84-nitroWheelIconColor {
fill: var(--icon-strong);
}
._88ef12dca13ecf84-navBarContent {
justify-content: space-between;
padding: 0 var(--space-16);
width: 100%;
}
._88ef12dca13ecf84-navBarContent,
._88ef12dca13ecf84-navBarSectionContentContainer {
align-items: center;
display: flex;
height: 100%;
}
._88ef12dca13ecf84-navBarSectionContent {
display: flex;
gap: 20px;
height: 100%;
-webkit-margin-end: var(--space-16);
margin-inline-end: var(--space-16);
}
._88ef12dca13ecf84-sectionClickable {
align-items: center;
cursor: pointer;
display: flex;
height: 100%;
position: relative;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
}
._88ef12dca13ecf84-sectionUnderline {
background-color: var(--text-default);
bottom: -0.5px;
height: 2px;
position: absolute;
width: 100%;
z-index: 1;
}
._88ef12dca13ecf84-sectionUnderline._88ef12dca13ecf84-fadeIn {
animation: _88ef12dca13ecf84-underlineAppear 0.3s ease-out;
}
@keyframes _88ef12dca13ecf84-underlineAppear {
0% {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
.f48ee41a9dd2c078-container {
align-items: center;
display: flex;
flex: 1;
flex-direction: column;
margin: 0 auto;
position: relative;
}
.f48ee41a9dd2c078-fadeInFromTop {
animation: f48ee41a9dd2c078-fadeInFromTop 0.6s ease-out forwards;
will-change: opacity, transform;
}
@keyframes f48ee41a9dd2c078-fadeInFromTop {
0% {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.f48ee41a9dd2c078-containerBackground {
background: var(--background-base-lowest);
}
.f48ee41a9dd2c078-responsiveContainer {
container-name: premium-marketing-page-container;
container-type: inline-size;
}
.f48ee41a9dd2c078-sectionsContainer {
align-items: center;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 164px;
padding: 0 40px;
width: 100%;
}
.f48ee41a9dd2c078-bestOfNitroSectionContainer,
.f48ee41a9dd2c078-heroHeadingContainer,
.f48ee41a9dd2c078-planComparisonTableContainer,
.f48ee41a9dd2c078-premiumTierCardsContainer,
.f48ee41a9dd2c078-promoBannerContainer,
.f48ee41a9dd2c078-whatsNewSectionContainer {
display: flex;
justify-content: center;
position: relative;
width: 100%;
}
.f48ee41a9dd2c078-promoBannerContainer {
max-width: 1052px;
z-index: 1;
}
.f48ee41a9dd2c078-bottomOfPageVisibilitySensor {
bottom: 0;
height: 300px;
position: absolute;
}
.f48ee41a9dd2c078-scroller {
background-color: var(--background-base-low);
contain: layout size;
}
.f48ee41a9dd2c078-topOfPageGradient {
position: absolute;
top: 0;
}
.f48ee41a9dd2c078-topOfPageGradientWithCountdown {
opacity: 0.75;
}
.f48ee41a9dd2c078-bottomOfPageGradient {
bottom: 0;
position: absolute;
transform: rotate(180deg);
}
.c880e89226639033-container {
align-items: center;
display: flex;
flex: 1;
flex-direction: column;
margin: 0 auto;
position: relative;
}
.c880e89226639033-containerBackground {
background: linear-gradient(180deg, #04050c, #19033d);
}
.c880e89226639033-responsiveContainer {
container-name: premium-marketing-page-container;
container-type: inline-size;
}
.c880e89226639033-sectionsContainer {
align-items: center;
flex-direction: column;
}
.c880e89226639033-heroHeadingContainer,
.c880e89226639033-sectionsContainer {
display: flex;
justify-content: center;
width: 100%;
}
.c880e89226639033-heroHeadingContainer {
flex-direction: row;
position: relative;
}
.c880e89226639033-promoBannerContainer {
justify-content: center;
max-width: 1052px;
position: relative;
width: 100%;
z-index: 1;
}
.c880e89226639033-whatsNewSectionContainer {
margin-top: 80px;
}
.c880e89226639033-bestOfNitroSectionContainer,
.c880e89226639033-whatsNewSectionContainer {
margin-bottom: 100px;
position: relative;
}
.c880e89226639033-premiumTierCardsContainer {
margin-bottom: 80px;
max-width: 824px;
width: 100%;
}
.c880e89226639033-planComparisonTableContainer {
align-items: center;
display: flex;
justify-content: center;
position: relative;
width: 100%;
}
.c880e89226639033-bottomOfPageVisibilitySensor {
bottom: 0;
height: 300px;
position: absolute;
}
.c880e89226639033-scroller {
background-color: var(--background-base-low);
contain: layout size;
}
.c880e89226639033-heroHeaderSideGradient {
background: radial-gradient(45% 60% at -30% 40%, #70cbff 0, transparent 100%), radial-gradient(45% 60% at -30% 40%, #172365 0, transparent 100%);
height: 800px;
inset-inline-start: 0;
opacity: 0.4;
pointer-events: none;
position: absolute;
width: 100vw;
}
.c880e89226639033-heroHeaderBackgroundStars {
inset-inline-start: 30px;
position: absolute;
top: -40px;
width: 100%;
}
._60b20dc7b64dc015-container {
align-items: center;
background-color: var(--background-base-lower);
border: none;
box-sizing: border-box;
display: flex;
max-width: 1000px;
padding: 8px;
width: 100%;
}
._60b20dc7b64dc015-container._60b20dc7b64dc015-lightTextLink a {
color: var(--blue-345);
}
._60b20dc7b64dc015-container._60b20dc7b64dc015-centerText {
justify-content: center;
margin-bottom: unset;
}
._60b20dc7b64dc015-icon {
color: var(--status-warning);
-webkit-margin-end: 6px;
height: 13px;
margin-inline-end: 6px;
min-height: 13px;
min-width: 13px;
width: 13px;
}
._60b20dc7b64dc015-icon._60b20dc7b64dc015-lightThemeColorOnly {
color: var(--yellow-300);
}
._52b471709d6d9d05-root {
-webkit-mask-image: linear-gradient(180deg, #000 48.68%, transparent);
mask-image: linear-gradient(180deg, #000 48.68%, transparent);
position: absolute;
z-index: -1;
}
._52b471709d6d9d05-root._52b471709d6d9d05-lifted {
border-start-end-radius: var(--radius-lg);
border-start-start-radius: var(--radius-lg);
margin-top: -32px;
width: 95.6%;
z-index: 0;
}
._52b471709d6d9d05-stop1 {
stop-color: var(--premium-tier-0-header-gradient-1);
}
._52b471709d6d9d05-stop2 {
stop-color: var(--premium-tier-0-header-gradient-2);
}
._52b471709d6d9d05-stop3 {
stop-color: var(--premium-tier-0-header-gradient-3);
}
._52b471709d6d9d05-stop4 {
stop-color: var(--premium-tier-0-header-gradient-4);
}
._52b471709d6d9d05-stop5 {
stop-color: var(--premium-tier-0-header-gradient-5);
}
.c6d62487042b90fc-tag {
background-color: var(--brand-500);
font-size: 12px;
line-height: 16px;
padding: 0 6px;
}
.b62c4e4ee0e62730-perksContainer {
margin: 0 auto;
max-width: 1066px;
position: relative;
}
.b62c4e4ee0e62730-perksTitle,
.b62c4e4ee0e62730-perksTitleStackedCards {
margin-bottom: 32px;
text-align: center;
}
.b62c4e4ee0e62730-customAppIconImage {
height: 115px;
width: 230px;
}
.b62c4e4ee0e62730-perksTitleStackedCards {
margin-bottom: 24px;
}
.b62c4e4ee0e62730-perksCardArt {
filter: saturate(var(--saturation-factor, 1));
}
.b62c4e4ee0e62730-perkCardContainer {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
justify-items: center;
margin-bottom: 32px;
}
.b62c4e4ee0e62730-perkCardContainerExpanded {
margin-bottom: 16px;
}
.b62c4e4ee0e62730-perkCard {
align-items: center;
background-color: var(--background-secondary-alt);
border-radius: 16px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 32px 24px;
position: relative;
width: 100%;
}
.b62c4e4ee0e62730-perkCardNewBadge {
background: var(--custom-premium-colors-premium-gradient-tier-2);
border-radius: 8px;
color: #fff;
inset-inline-start: -4px;
position: absolute;
top: -4px;
}
.b62c4e4ee0e62730-perkCardHeading {
margin-bottom: 8px;
margin-top: 16px;
text-align: center;
}
.b62c4e4ee0e62730-perkCardDescription {
min-height: 36px;
text-align: center;
}
.b62c4e4ee0e62730-perkCardEarlyAccessBadge {
background: var(--custom-premium-colors-premium-gradient-tier-2);
border-radius: 8px;
color: #fff;
inset-inline-start: 24px;
position: absolute;
top: -4px;
}
.b62c4e4ee0e62730-stickersImage {
width: 222px;
}
.b62c4e4ee0e62730-perGuildProfilesImage {
width: 195px;
}
.b62c4e4ee0e62730-clientThemesCard .b62c4e4ee0e62730-perkCardDescription {
padding: 0 30px;
}
.b62c4e4ee0e62730-clientThemesImage {
width: 202px;
width: 227px;
}
.b62c4e4ee0e62730-badgeImage {
width: 193px;
}
.b62c4e4ee0e62730-longerMessagesImage {
width: 222px;
}
.b62c4e4ee0e62730-moreGuildsImage {
width: 116px;
}
.b62c4e4ee0e62730-soundboardImage,
.b62c4e4ee0e62730-superReactionsImage {
height: 132px;
}
.b62c4e4ee0e62730-uploadImage {
width: 220px;
}
.b62c4e4ee0e62730-streamingImage {
width: 175px;
}
.b62c4e4ee0e62730-emojiImage {
width: 210px;
}
.b62c4e4ee0e62730-videoBackgroundImage {
width: 222px;
}
.b62c4e4ee0e62730-moreGuildsAltImage {
width: 260px;
}
.b62c4e4ee0e62730-newTag {
inset-inline-start: -2px;
position: absolute;
top: -4px;
}
.b62c4e4ee0e62730-betaTag {
background: var(--custom-premium-colors-premium-gradient-tier-2);
display: inline;
vertical-align: middle;
}
.b62c4e4ee0e62730-sizeGizmo {
bottom: 0;
inset-inline-start: 50%;
position: absolute;
transform: translate(-50%, -100%);
z-index: 1000;
}
.b62c4e4ee0e62730-sizeGizmoExpanded {
display: flex;
justify-content: center;
}
.b62c4e4ee0e62730-sizeGizmoText {
align-items: center;
display: flex;
justify-content: flex-end;
}
.b62c4e4ee0e62730-sizeGizmoText .b62c4e4ee0e62730-arrow {
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
.b62c4e4ee0e62730-subscriberNitroHome {
max-height: 2000px;
overflow: hidden;
transition: max-height 0.4s ease-in-out;
}
.b62c4e4ee0e62730-subscriberNitroHome.b62c4e4ee0e62730-reducedMotion {
transition: none;
}
.b62c4e4ee0e62730-partiallyHidden {
max-height: 500px;
transition: none;
}
.b62c4e4ee0e62730-customButton {
align-items: center;
background-color: var(--background-base-lowest);
border-radius: 24px;
color: var(--text-default);
display: flex;
font-size: 14px;
gap: 4px;
justify-content: center;
padding-block: 8px;
padding-inline: 16px 8px;
}
.b62c4e4ee0e62730-cover {
background-image: linear-gradient(to bottom, hsl(var(--primary-600-hsl) / 0.71) 0, var(--background-base-low) 85%);
bottom: 0;
height: 31%;
inset-inline: 0;
pointer-events: none;
position: absolute;
}
.b62c4e4ee0e62730-cover.b62c4e4ee0e62730-hidden {
opacity: 0;
}
.b62c4e4ee0e62730-reducedMotion .b62c4e4ee0e62730-cover {
transition: none;
}
.theme-light .b62c4e4ee0e62730-cover {
background-image: linear-gradient(to bottom, var(--opacity-white-72) 0, var(--background-base-low) 85%);
}
._94da4abf5040323c-container {
align-items: center;
display: flex;
flex: 1;
flex-direction: column;
margin: 0 auto -90px;
padding-bottom: 60px;
position: relative;
}
._94da4abf5040323c-settingsContainer {
width: 100%;
}
._94da4abf5040323c-settingsHeroNoBackground {
width: 660px;
}
._94da4abf5040323c-noTopPaddingOverride {
padding-top: 0;
}
._94da4abf5040323c-settingsHeroBogoHeight {
height: 260px;
}
._94da4abf5040323c-premiumTierCardsContainerSettings {
margin-bottom: 60px;
max-width: 824px;
width: 100%;
}
._94da4abf5040323c-promoBannerContainer {
justify-content: center;
margin-bottom: var(--space-24);
max-width: 1052px;
position: relative;
width: 100%;
z-index: 1;
}
._94da4abf5040323c-giftPromoCard {
margin-bottom: 25px;
}
._94da4abf5040323c-perkCardsContainerSpacingSettings {
margin-bottom: 60px !important;
width: 100%;
}
._94da4abf5040323c-planComparisonTable {
max-width: 700px;
}
._94da4abf5040323c-planComparisonTableContainer {
align-items: center;
display: flex;
justify-content: center;
position: relative;
width: 100%;
}
._94da4abf5040323c-bottomIllustration {
bottom: 0;
filter: saturate(var(--saturation-factor, 1));
position: absolute;
}
._94da4abf5040323c-existingSubscriberSpacing {
margin-bottom: 24px;
}
._94da4abf5040323c-footerSpacing {
height: 128px;
}
._94da4abf5040323c-zIndex1 {
z-index: 1;
}
._94da4abf5040323c-trialMarketingMargin {
margin-bottom: 56px;
margin-top: 56px;
padding: unset;
}
._94da4abf5040323c-bottomOfPageVisibilitySensor {
bottom: 0;
height: 300px;
position: absolute;
}
._89573c5fd97389d8-wrapper {
bottom: 0;
inset-inline-start: 0;
margin-bottom: 42px;
opacity: 0;
pointer-events: none;
position: -webkit-sticky;
position: sticky;
width: 100%;
z-index: 10;
}
._89573c5fd97389d8-innerWrapper,
._89573c5fd97389d8-wrapper {
display: flex;
justify-content: center;
}
._89573c5fd97389d8-innerWrapper {
align-items: center;
background-color: var(--background-base-lowest);
border-radius: 16px;
box-sizing: border-box;
padding: 16px;
pointer-events: all;
position: relative;
}
._89573c5fd97389d8-innerWrapper:after,
._89573c5fd97389d8-innerWrapper:before {
content: "";
height: 100%;
inset-inline-start: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
}
._89573c5fd97389d8-invisible > ._89573c5fd97389d8-innerWrapper {
pointer-events: none;
}
._89573c5fd97389d8-tier2Gradient {
background: var(--custom-premium-colors-premium-gradient-tier-2-tri-color);
color: var(--white);
}
._89573c5fd97389d8-descriptionContainer {
display: flex;
flex-direction: column;
margin: 0 16px;
width: 320px;
}
._89573c5fd97389d8-nitroIcon {
border-radius: var(--radius-sm);
filter: saturate(var(--saturation-factor, 1));
height: 48px;
width: 48px;
}
.f8fa75016da5d871-container {
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
}
.f8fa75016da5d871-image {
margin-top: var(--space-16);
width: 100%;
}
._2946928a69770b89-container {
height: 100%;
}
._1f2acc2c7ffb774c-container {
height: 100%;
justify-content: space-between;
}
._1f2acc2c7ffb774c-container,
._1f2acc2c7ffb774c-textColumn {
align-items: center;
display: flex;
flex-direction: column;
}
._1f2acc2c7ffb774c-badgeText {
margin-bottom: 4px;
}
._1f2acc2c7ffb774c-badgeImage {
align-self: center;
height: auto;
max-height: 66%;
pointer-events: none;
width: 70%;
}
.full-motion ._1f2acc2c7ffb774c-badgeImage {
transition: all 0.2s ease-in-out;
}
._1f2acc2c7ffb774c-badgeImage._1f2acc2c7ffb774c-wide {
width: 85%;
}
._1f2acc2c7ffb774c-upcomingBadge {
filter: saturate(0);
opacity: 0.4;
}
div:hover > div > ._1f2acc2c7ffb774c-container ._1f2acc2c7ffb774c-badgeImage:not(._1f2acc2c7ffb774c-upcomingBadge) {
filter: drop-shadow(0 0 34px var(--custom-badge-glow-color));
}
._1f0692e2665d8dcd-cardDescriptionTenureReward {
background-image: linear-gradient(to bottom, var(--background-secondary-alt) 20%, hsl(var(--primary-660-hsl) / 0.3) 80%, hsl(var(--primary-660-hsl) / 0) 95%);
pointer-events: none;
}
._1f0692e2665d8dcd-descriptionCTATenureReward {
align-items: flex-end;
display: flex;
justify-content: center;
}
._1f0692e2665d8dcd-descriptionCTATenureReward > img {
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
._1f0692e2665d8dcd-cardDescription {
background-image: linear-gradient(to bottom, var(--background-secondary-alt) 50%, hsl(var(--primary-660-hsl) / 0.75) 80%);
}
.theme-light ._1f0692e2665d8dcd-cardDescription {
background-image: linear-gradient(to bottom, var(--background-secondary-alt) 50%, hsl(var(--primary-160-hsl) / 0.5) 80%);
}
@keyframes _1f0692e2665d8dcd-glowEffect {
0% {
box-shadow: var(--elevation-medium);
}
50% {
box-shadow: 0 0 16px 16px hsl(var(--premium-tier-2-pink-for-gradients-2-hsl) / 0.3);
}
to {
box-shadow: var(--elevation-medium);
}
}
._1f0692e2665d8dcd-nitroGradientBorderHover {
position: relative;
}
._1f0692e2665d8dcd-nitroGradientBorderHover:before {
background: linear-gradient(95.07deg, var(--premium-tier-2-purple-for-gradients) 0, var(--premium-tier-2-purple-for-gradients-2) 49.96%, var(--premium-tier-2-pink-for-gradients) 95.93%), var(--premium-tier-2-purple-for-gradients);
border-radius: calc(var(--custom-card-border-radius) + 2px);
content: "";
inset: -2px;
opacity: 0;
position: absolute;
z-index: -10;
}
.full-motion ._1f0692e2665d8dcd-nitroGradientBorderHover:before {
transition: opacity 0.2s ease-in-out;
}
._1f0692e2665d8dcd-nitroGradientBorderHover:hover:before {
opacity: 1;
}
._1f0692e2665d8dcd-promotionRedemptionImage {
margin-bottom: var(--space-24);
}
.b5493bb5330ab072-hoverWrapper {
display: flex;
}
.b5493bb5330ab072-hoverWrapper:hover .b5493bb5330ab072-flipCardContainer,
.b5493bb5330ab072-hoverWrapper:hover .b5493bb5330ab072-noFlipCardContainer,
.b5493bb5330ab072-hoverWrapper:hover .b5493bb5330ab072-noFlipCardContainerCarousel {
transform: translateY(-8px);
}
.b5493bb5330ab072-hoverWrapper:hover .b5493bb5330ab072-card {
box-shadow: var(--elevation-medium);
}
.b5493bb5330ab072-hoverWrapper:hover .b5493bb5330ab072-unavailablePerkPill {
display: none;
}
.b5493bb5330ab072-hoverWrapper:hover .b5493bb5330ab072-cardDescription {
opacity: 1;
}
.b5493bb5330ab072-hoverWrapper:hover .b5493bb5330ab072-cardDescription button {
bottom: 24px;
opacity: 1;
pointer-events: all;
transform: scale(1);
}
.b5493bb5330ab072-hoverWrapper:hover .b5493bb5330ab072-hoverCardImage {
border-radius: 20px;
margin: -24px;
width: calc(100% + 48px);
}
.b5493bb5330ab072-hoverWrapper:hover .b5493bb5330ab072-carouselCardImage,
.b5493bb5330ab072-hoverWrapper:hover .b5493bb5330ab072-carouselCardImageGrayscale {
scale: 116.5%;
-webkit-margin-start: 0;
margin-inline-start: 0;
margin-bottom: -9px;
}
.b5493bb5330ab072-hoverWrapper:hover .b5493bb5330ab072-cardComponent {
scale: 65%;
transform-origin: bottom;
}
@media (max-width: 959px) {
.b5493bb5330ab072-hoverWrapper:hover .b5493bb5330ab072-cardComponent {
scale: 85%;
}
}
@media (max-width: 820px) {
.b5493bb5330ab072-hoverWrapper:hover .b5493bb5330ab072-cardComponent {
scale: 75%;
}
}
@media (max-width: 700px) {
.b5493bb5330ab072-hoverWrapper:hover .b5493bb5330ab072-cardComponent {
scale: 65%;
}
}
@media (max-width: 650px) {
.b5493bb5330ab072-hoverWrapper:hover .b5493bb5330ab072-cardComponent {
scale: 55%;
}
}
@media screen and (max-width: 1330px) {
.b5493bb5330ab072-hoverWrapper:hover .b5493bb5330ab072-carouselCardImage,
.b5493bb5330ab072-hoverWrapper:hover .b5493bb5330ab072-carouselCardImageGrayscale {
scale: 122%;
-webkit-margin-start: 0;
margin-inline-start: 0;
margin-bottom: -9px;
}
}
.b5493bb5330ab072-hoverWrapper:hover .b5493bb5330ab072-partialFlipCard {
--custom-y-rotation: -30deg;
transform: rotateY(var(--custom-y-rotation));
}
.b5493bb5330ab072-hoverWrapper:hover .b5493bb5330ab072-partialFlipCard.b5493bb5330ab072-reducedMotion {
transform: none;
}
.b5493bb5330ab072-hoverWrapper:hover .b5493bb5330ab072-ultraFlipCard {
--custom-y-rotation: -570deg;
transform: rotateY(var(--custom-y-rotation));
}
.b5493bb5330ab072-hoverWrapper:hover .b5493bb5330ab072-rotateCard {
--custom-x-rotation: -520deg;
--custom-y-rotation: -1140deg;
transform: rotateX(var(--custom-x-rotation)) rotateY(var(--custom-y-rotation));
}
.b5493bb5330ab072-hoverWrapper:hover .b5493bb5330ab072-flipCard.b5493bb5330ab072-flipped {
transform: rotateY(-180deg);
}
.b5493bb5330ab072-reducedMotion .b5493bb5330ab072-hoverWrapper {
transition: none;
}
.b5493bb5330ab072-flipCardContainer,
.b5493bb5330ab072-noFlipCardContainer,
.b5493bb5330ab072-noFlipCardContainerCarousel {
display: flex;
filter: saturate(var(--saturation-factor, 1));
width: 100%;
}
.b5493bb5330ab072-flipCardContainer.b5493bb5330ab072-forceShadow .b5493bb5330ab072-card,
.b5493bb5330ab072-noFlipCardContainer.b5493bb5330ab072-forceShadow .b5493bb5330ab072-card,
.b5493bb5330ab072-noFlipCardContainerCarousel.b5493bb5330ab072-forceShadow .b5493bb5330ab072-card {
box-shadow: var(--elevation-medium);
}
.full-motion .b5493bb5330ab072-noFlipCardContainer,
.full-motion .b5493bb5330ab072-noFlipCardContainerCarousel {
transition: all 0.1s ease-in-out;
}
@media screen and (min-width: 1331px) {
.b5493bb5330ab072-noFlipCardContainerCarousel {
min-width: 350px;
}
}
.b5493bb5330ab072-confettiCanvas {
height: 100%;
inset-inline-start: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
}
.b5493bb5330ab072-flipCardContainer {
min-height: 350px;
perspective: 1000px;
}
.b5493bb5330ab072-flipCardContainer .b5493bb5330ab072-card {
height: calc(100% - 48px);
width: calc(100% - 48px);
}
.b5493bb5330ab072-flipCardContainer .b5493bb5330ab072-flipCard.b5493bb5330ab072-clickable .b5493bb5330ab072-cover {
opacity: 1;
}
.b5493bb5330ab072-flipCardContainer .b5493bb5330ab072-flipCard.b5493bb5330ab072-flipped {
transform: rotateY(-180deg);
}
.b5493bb5330ab072-flipCardContainer .b5493bb5330ab072-flipCard.b5493bb5330ab072-flipped .b5493bb5330ab072-flipCardButtonContainer {
opacity: 0;
pointer-events: none;
}
.b5493bb5330ab072-flipCardContainer .b5493bb5330ab072-flipCard.b5493bb5330ab072-flipped .b5493bb5330ab072-cover {
opacity: 0;
}
.b5493bb5330ab072-flipCard {
position: relative;
transform-style: preserve-3d;
width: 100%;
}
.full-motion .b5493bb5330ab072-flipCard {
transition: transform 0.8s;
}
.b5493bb5330ab072-flipCard.b5493bb5330ab072-reducedMotion {
transition: none;
}
.b5493bb5330ab072-flipCardBack,
.b5493bb5330ab072-flipCardFront {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
height: 100%;
inset-inline-start: 0;
position: absolute;
top: 0;
width: 100%;
}
.b5493bb5330ab072-flipCardBack {
transform: rotateY(180deg);
}
.b5493bb5330ab072-flipCardHidden {
opacity: 0;
pointer-events: none;
}
.b5493bb5330ab072-flipCardButtonContainer {
align-items: center;
bottom: 0;
display: flex;
position: absolute;
top: 0;
inset-inline: 0;
justify-content: center;
pointer-events: none;
z-index: 40;
}
.b5493bb5330ab072-cardComponent {
transition: scale 0.15s ease-in-out;
}
.b5493bb5330ab072-card {
--custom-card-border-radius: 20px;
align-items: flex-start;
background-color: var(--background-secondary-alt);
background-repeat: no-repeat;
background-size: cover;
border-radius: var(--custom-card-border-radius);
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 24px;
position: relative;
width: 100%;
}
.full-motion .b5493bb5330ab072-card {
transition: all 0.1s ease-in-out;
}
.b5493bb5330ab072-hideOverflow {
overflow: hidden;
}
.b5493bb5330ab072-clickable {
cursor: pointer;
pointer-events: all;
}
.b5493bb5330ab072-pill {
background-image: linear-gradient(to right, var(--premium-tier-2-purple-for-gradients), var(--premium-tier-2-pink-for-gradients));
border-radius: 10px;
color: var(--white);
inset-inline-start: 24px;
padding: 0 8px;
position: absolute;
top: -8px;
z-index: 30;
}
.b5493bb5330ab072-cardHeading {
background-clip: text;
-webkit-background-clip: text !important;
background-color: var(--text-strong);
color: transparent;
display: inline-block;
margin-bottom: 8px;
white-space: pre-wrap;
width: 100%;
z-index: 10;
}
.b5493bb5330ab072-cardSubtitle {
flex-grow: 1;
margin-bottom: 16px;
width: 100%;
z-index: 10;
}
.b5493bb5330ab072-carouselCardImage {
background: linear-gradient(193deg, var(--premium-tier-0-header-gradient-1) 0, var(--premium-tier-0-header-gradient-3) 49.52%, var(--premium-tier-0-header-gradient-4) 82.85%, var(--premium-tier-0-header-gradient-5) 90.53%);
border-radius: 16px;
height: 150px;
padding: 15px;
pointer-events: none;
transform: translateX(1px);
width: 270px;
z-index: 10;
}
.full-motion .b5493bb5330ab072-carouselCardImage {
transition: all 0.1s ease-in-out;
}
.b5493bb5330ab072-carouselCardImageGrayscale {
background: gray;
border-radius: 16px;
filter: grayscale(1%);
height: 180px;
pointer-events: none;
transform: translateX(1px);
width: 300px;
z-index: 10;
}
.full-motion .b5493bb5330ab072-carouselCardImageGrayscale {
transition: all 0.1s ease-in-out;
}
@media screen and (max-width: 1330px) {
.b5493bb5330ab072-carouselCardImageGrayscale {
height: 150px;
width: 230px;
}
}
.b5493bb5330ab072-imageOverlayTextContainer {
display: flex;
justify-content: center;
position: absolute;
top: 140px;
width: 100%;
}
@media screen and (max-width: 1330px) {
.b5493bb5330ab072-imageOverlayTextContainer {
top: 120px;
}
}
.b5493bb5330ab072-imageOverlayText {
background: #313338;
border-radius: 20px;
color: var(--white);
display: inline-block;
font-size: 14px;
padding: 0 8px;
z-index: 100;
}
@media screen and (max-width: 1330px) {
.b5493bb5330ab072-carouselCardImage {
height: 120px;
width: 200px;
}
.b5493bb5330ab072-unavailablePerkPill {
top: 117px;
}
}
.b5493bb5330ab072-cardIllustrationNoHover,
.b5493bb5330ab072-cardImage {
width: 100%;
z-index: 10;
}
.full-motion .b5493bb5330ab072-cardIllustrationNoHover,
.full-motion .b5493bb5330ab072-cardImage {
transition: all 0.1s ease-in-out;
}
.b5493bb5330ab072-cardImage {
border-radius: 14px;
pointer-events: none;
}
.b5493bb5330ab072-cardImage img {
border-radius: inherit;
width: 100%;
}
.b5493bb5330ab072-cardIllustrationNoHover {
display: flex;
flex-direction: column;
height: 100%;
justify-content: flex-end;
}
.b5493bb5330ab072-cardDescription {
align-items: flex-start;
border-radius: 20px;
display: flex;
flex-direction: column;
inset: 0;
justify-content: flex-start;
opacity: 0;
padding: 24px;
position: absolute;
z-index: 20;
}
.full-motion .b5493bb5330ab072-cardDescription {
transition: all 0.1s ease-in-out;
}
.b5493bb5330ab072-cardDescription p {
margin: 0;
}
.b5493bb5330ab072-cardDescription p + p {
margin-top: 8px;
}
.b5493bb5330ab072-cardDescription button {
inset-inline: 24px;
bottom: 8px;
opacity: 0.5;
position: absolute;
transform: scale(0.75);
}
.full-motion .b5493bb5330ab072-cardDescription button {
transition: all 0.1s ease-in-out;
}
.b5493bb5330ab072-reducedMotion .b5493bb5330ab072-cardDescription {
transition: none;
}
.b5493bb5330ab072-cover {
border-radius: 20px;
inset: 0;
opacity: 0;
pointer-events: none;
position: absolute;
}
.full-motion .b5493bb5330ab072-cover {
transition: all 0.1s ease-in-out;
}
.b5493bb5330ab072-reducedMotion .b5493bb5330ab072-cover {
transition: none;
}
.b5493bb5330ab072-above {
background-color: rgba(0, 0, 0, 0.6);
z-index: 30;
}
.b5493bb5330ab072-below {
background-image: linear-gradient(to bottom, hsl(var(--primary-660-hsl) / 0.5) 0, transparent 60%);
z-index: 1;
}
.theme-light .b5493bb5330ab072-below {
background-image: linear-gradient(to bottom, hsl(var(--primary-160-hsl) / 0.5) 0, hsla(0, 0%, 100%, 0) 60%);
}
.b5493bb5330ab072-topCover .b5493bb5330ab072-below {
opacity: 1;
}
.b5493bb5330ab072-purpleGradient {
background-image: linear-gradient(130.41deg, #727eff 7.43%, #b940ff 82.67%);
}
.b5493bb5330ab072-pinkGradient {
background-image: linear-gradient(130.41deg, #ff52d2 7.43%, #b940ff 82.67%);
}
.b5493bb5330ab072-blueGradient {
background-image: linear-gradient(130.41deg, #0fb3ff 7.43%, #b940ff 82.67%);
}
.b5493bb5330ab072-relative {
position: relative;
}
.b5493bb5330ab072-nitroGradientBackground {
background: radial-gradient(100% 100% at 50% 0, var(--background-secondary-alt) 60%, var(--transparent) 100%), linear-gradient(90deg, var(--expressive-gradient-green-end) 0, var(--expressive-gradient-green-start) 100%);
}
.efc71f4458cc9969-section {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 1066px;
width: calc(100% - 32px);
}
.efc71f4458cc9969-heading {
margin: 0 24px 16px;
text-align: center;
}
.efc71f4458cc9969-sectionHeader {
display: flex;
justify-content: space-between;
width: 100%;
}
.efc71f4458cc9969-sectionHeaderSeeAll {
flex-grow: 1;
text-align: center;
}
.efc71f4458cc9969-confettiCanvas {
height: 100%;
inset-inline-start: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
}
.efc71f4458cc9969-container {
display: flex;
}
.efc71f4458cc9969-sectionHeader .efc71f4458cc9969-heading {
flex-grow: 1;
text-align: start;
}
.efc71f4458cc9969-subtitle {
margin: 0 24px 24px;
max-width: 544px;
}
.efc71f4458cc9969-subtitleWithButton {
margin: 0 24px 16px;
max-width: 544px;
}
.efc71f4458cc9969-centerAlignSubtitle,
.efc71f4458cc9969-leftAlignSection {
position: relative;
}
.efc71f4458cc9969-leftAlignSubtitle {
text-align: start;
}
.efc71f4458cc9969-centerAlignSubtitle {
text-align: center;
}
.efc71f4458cc9969-moreSubtitleMargin {
margin-bottom: 32px;
}
.efc71f4458cc9969-section.efc71f4458cc9969-noBackground .efc71f4458cc9969-subtitle {
max-width: unset;
}
.efc71f4458cc9969-fullWidth {
max-width: 100%;
}
.efc71f4458cc9969-cardContainer,
.efc71f4458cc9969-cardContainerNarrowWidth {
display: grid;
gap: 16px;
justify-content: center;
min-height: 380px;
width: 100%;
}
.efc71f4458cc9969-cardContainer {
grid-template-columns: 1fr;
}
.efc71f4458cc9969-cardContainerNarrowWidth {
grid-template-columns: 1fr 1fr;
}
@media (min-width: 960px) {
.efc71f4458cc9969-cardContainer {
grid-template-columns: 1fr 1fr 1fr;
}
}
.efc71f4458cc9969-centerAlignSection {
align-items: center;
}
.efc71f4458cc9969-leftAlignSection {
align-items: start;
}
.efc71f4458cc9969-showAllPerksButton {
-webkit-margin-start: auto;
margin-inline-start: auto;
z-index: 9;
}
.efc71f4458cc9969-showAllPerksButtonCenter {
align-items: center;
margin-bottom: 24px;
z-index: 9;
}
.da4aee5b24d1a407-container {
align-items: flex-start;
background-color: var(--background-secondary-alt);
border-radius: var(--radius-sm);
display: flex;
filter: saturate(var(--saturation-factor, 1));
flex-direction: column;
justify-content: center;
max-width: 1066px;
overflow: hidden;
position: relative;
width: 100%;
}
.da4aee5b24d1a407-bannerImage {
height: 100%;
inset-inline-end: 0;
position: absolute;
z-index: -1;
}
.da4aee5b24d1a407-textContainer {
align-items: flex-start;
display: flex;
flex-direction: column;
justify-content: center;
padding: 32px 50px 40px;
width: 327px;
}
.da4aee5b24d1a407-heading {
margin-bottom: 8px;
}
.da4aee5b24d1a407-giftCardButton {
background-color: var(--background-secondary-alt);
height: 40px;
margin-top: 14px;
width: 100%;
}
.da4aee5b24d1a407-giftButtonCTA {
font-size: 14px;
font-weight: 700;
}
.theme-light .da4aee5b24d1a407-giftCardButton {
border-color: var(--premium-tier-2-pink-for-gradients-2);
color: var(--premium-tier-2-pink-for-gradients-2);
}
.theme-dark .da4aee5b24d1a407-giftCardButton {
border-color: #fff;
color: #fff;
}
.images-light .da4aee5b24d1a407-textContainer {
background-image: linear-gradient(to right, var(--background-secondary-alt), hsl(var(--primary-160-hsl) / 40%) 90%, transparent);
}
.images-dark .da4aee5b24d1a407-textContainer {
background-image: linear-gradient(to right, var(--background-secondary-alt), hsl(var(--primary-660-hsl) / 40%) 90%, transparent);
}
._99d5f15a6ff29a05-container {
background-color: var(--background-secondary-alt);
border-radius: var(--radius-lg);
display: flex;
filter: saturate(var(--saturation-factor, 1));
justify-content: space-between;
max-width: 1066px;
overflow: hidden;
padding: var(--space-12);
position: relative;
width: 100%;
}
._99d5f15a6ff29a05-bannerImage {
height: 300px;
padding: var(--space-64);
z-index: -1;
}
._99d5f15a6ff29a05-textContainer {
align-items: flex-start;
display: flex;
flex-direction: column;
justify-content: center;
padding: var(--space-24);
}
._99d5f15a6ff29a05-heading {
margin-bottom: var(--space-12);
}
._99d5f15a6ff29a05-giftButtonContainer {
margin-top: var(--space-24);
}
._99d5f15a6ff29a05-gradientBackground:before {
opacity: 0.3;
}
.ce5f0d40e8f15f27-container {
background: var(--background-surface-high);
border: 1px solid var(--border-muted);
border-radius: 20px;
flex-direction: row;
gap: 40px;
padding: 32px 24px;
}
.ce5f0d40e8f15f27-bannerContainer,
.ce5f0d40e8f15f27-container {
align-items: center;
display: flex;
max-width: 800px;
}
.ce5f0d40e8f15f27-bannerContainer {
justify-content: center;
}
.ce5f0d40e8f15f27-bannerContent {
flex: 1 0 0;
flex-direction: column;
max-width: 476px;
}
.ce5f0d40e8f15f27-bannerContent,
.ce5f0d40e8f15f27-bannerContentText {
align-items: flex-start;
display: flex;
}
.ce5f0d40e8f15f27-bannerContentText {
flex-direction: column;
gap: 8px;
margin-bottom: 24px;
text-align: start;
}
.ce5f0d40e8f15f27-referredFriendAvatar {
border: 2px solid var(--background-surface-high);
border-radius: 50%;
}
.ce5f0d40e8f15f27-availableReferralSlot {
align-items: center;
background: var(--background-mod-strong);
border-radius: 32px;
color: var(--text-strong);
display: flex;
flex-shrink: 0;
font-weight: var(--font-weight-medium);
height: 24px;
justify-content: center;
line-height: 18px;
width: 24px;
}
.ce5f0d40e8f15f27-progressContainer {
align-items: center;
align-self: stretch;
background: var(--background-surface-high);
display: flex;
flex-direction: row;
gap: 8px;
margin-bottom: 12px;
max-width: 800px;
}
.ce5f0d40e8f15f27-progressCircle {
align-items: center;
display: flex;
flex-direction: column;
flex-shrink: 0;
height: 160px;
justify-content: center;
padding: 8px;
width: 160px;
}
.ce5f0d40e8f15f27-progressCircleImage {
max-width: 150px;
}
.ce5f0d40e8f15f27-progressCircleBorder {
height: "100%";
inset-inline-start: 0;
position: "absolute";
top: 0;
transform: rotate(-90deg);
width: "100%";
}
.ce5f0d40e8f15f27-progressCircleBackground {
fill: var(--background-surface-high);
}
.ce5f0d40e8f15f27-progressCircleRing {
fill: var(--background-mod-strong);
}
.ce5f0d40e8f15f27-glow {
background: transparent;
border-radius: 50%;
box-shadow:
0 0 1px #53ac66,
0 0 1px #53ac66,
0 0 15px #53ac66;
height: 100%;
width: 100%;
}
._36b3ecc30532d77f-header {
font-size: 50px;
font-style: italic;
font-weight: 900;
letter-spacing: -1px;
line-height: 100%;
text-transform: uppercase;
}
@container premium-marketing-page-container (max-width: 720px) {
._36b3ecc30532d77f-header._36b3ecc30532d77f-responsive {
font-size: 42px;
letter-spacing: -0.84px;
}
}
@container premium-marketing-page-container (max-width: 540px) {
._36b3ecc30532d77f-header._36b3ecc30532d77f-responsive {
font-size: 38px;
letter-spacing: -0.76px;
}
}
.cc63c755dbb1fd63-jumpingWumpusContainer {
bottom: -100px;
inset-inline-start: calc(100% + 20px);
pointer-events: none;
position: absolute;
}
.cc63c755dbb1fd63-jumpingWumpus {
height: 227px;
}
.cc63c755dbb1fd63-hammerContainer,
.cc63c755dbb1fd63-keyContainer,
.cc63c755dbb1fd63-starContainer {
pointer-events: none;
position: absolute;
}
.cc63c755dbb1fd63-hammerContainer {
inset-inline-end: 40px;
top: -50px;
}
.cc63c755dbb1fd63-keyContainer {
inset-inline-start: -180px;
top: calc(100% + 20px);
}
.cc63c755dbb1fd63-starContainer {
inset-inline-start: -150px;
top: -50px;
}
.cc63c755dbb1fd63-starTrinket {
height: 80px;
}
.cc63c755dbb1fd63-keyTrinket {
height: 60px;
}
.cc63c755dbb1fd63-hammerTrinket {
height: 30px;
}
@container premium-marketing-page-container (max-width: 960px) {
.cc63c755dbb1fd63-keyContainer,
.cc63c755dbb1fd63-starContainer {
transform: translateX(50px);
}
.cc63c755dbb1fd63-jumpingWumpusContainer {
transform: translateX(-50px);
}
}
@container premium-marketing-page-container (max-width: 720px) {
.cc63c755dbb1fd63-jumpingWumpus {
height: 163px;
}
.cc63c755dbb1fd63-keyContainer {
transform: translateX(100px);
}
.cc63c755dbb1fd63-starTrinket {
height: 62px;
}
.cc63c755dbb1fd63-keyTrinket {
height: 46px;
}
}
._4524c7897dbf7326-banner {
align-items: center;
background: var(--background-surface-high);
border-radius: 20px;
display: flex;
flex-direction: row;
height: 80px;
justify-content: center;
margin: auto auto 40px;
padding: 16px 24px;
position: relative;
width: 624px;
}
._4524c7897dbf7326-bodyContainer {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: 2px;
text-align: start;
width: 400px;
}
._4524c7897dbf7326-trialPill {
justify-content: center;
position: absolute;
top: -13px;
}
._4524c7897dbf7326-promoNitroButton {
-webkit-margin-start: auto;
margin-inline-start: auto;
min-height: 40px;
min-width: 110px;
}
._4524c7897dbf7326-bannerArt {
-webkit-margin-end: 16px;
margin-inline-end: 16px;
}
._4524c7897dbf7326-pill {
inset-inline-start: 20px;
position: absolute;
top: -8px;
}
._4524c7897dbf7326-buttonGradient {
background: var(--custom-premium-colors-premium-gradient-tier-2-tri-color);
background-clip: padding-box;
border-radius: var(--radius-sm);
color: var(--white);
}
._3ce4302b7c49d475-container {
max-height: 300px;
min-width: 800px;
}
._3ce4302b7c49d475-container,
._3ce4302b7c49d475-containerV2 {
align-items: center;
display: flex;
flex-direction: column;
padding-bottom: 80px;
text-align: center;
width: 100%;
}
._3ce4302b7c49d475-containerV2 {
justify-content: center;
padding-top: 42px;
}
._3ce4302b7c49d475-trialPill {
justify-content: center;
margin-bottom: 16px;
}
._3ce4302b7c49d475-content {
min-width: 500px;
position: absolute;
top: 90px;
}
@media (max-width: 485px) {
._3ce4302b7c49d475-content {
min-width: unset;
}
}
._3ce4302b7c49d475-churnDiscountContent {
top: 20px;
}
._3ce4302b7c49d475-contentV2 {
min-width: 500px;
}
@media (max-width: 485px) {
._3ce4302b7c49d475-contentV2 {
min-width: unset;
}
}
._3ce4302b7c49d475-hidden {
visibility: hidden;
}
._3ce4302b7c49d475-heroHeadingOriginalButtonContainer {
align-items: center;
display: flex;
justify-content: center;
}
._3ce4302b7c49d475-header {
margin-bottom: 16px;
}
._3ce4302b7c49d475-premiumSubscribeButton {
align-items: center;
display: flex;
justify-content: center;
}
._3ce4302b7c49d475-button {
box-shadow: 0 12px 36px 0 rgba(0, 0, 0, 0.12);
height: 40px;
}
._3ce4302b7c49d475-reverseTrialGiftButton {
height: 40px;
margin: auto;
min-width: 183px;
position: relative;
}
._3ce4302b7c49d475-subscribeButton {
-webkit-margin-end: 12px;
margin-inline-end: 12px;
}
._3ce4302b7c49d475-headerArt,
._3ce4302b7c49d475-headerArtV2 {
pointer-events: none;
width: 100%;
}
._3ce4302b7c49d475-headerArtV2 {
min-width: 800px;
position: absolute;
top: 0;
z-index: -1;
}
._3ce4302b7c49d475-reverseContainer {
gap: 40px;
text-align: center;
width: 100%;
}
._3ce4302b7c49d475-reverseContainer,
._3ce4302b7c49d475-reverseTrialHomeHeader {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
}
._3ce4302b7c49d475-reverseTrialHomeHeader {
flex-shrink: 0;
margin-top: 40px;
position: relative;
width: 656px;
}
._3ce4302b7c49d475-flexCentered {
display: flex;
justify-content: center;
}
._3ce4302b7c49d475-tooltip {
margin-bottom: 15px;
text-align: center;
}
._3ce4302b7c49d475-pillContainer {
display: inline-block;
margin-top: 5px;
}
._3ce4302b7c49d475-pillIcon {
-webkit-padding-end: 5px;
padding-inline-end: 5px;
}
._3ce4302b7c49d475-referralBanner {
margin: 64px auto auto;
}
._3ce4302b7c49d475-churnEntrypointButtons {
display: flex;
flex-direction: row;
gap: 8px;
width: 380px;
}
._3ce4302b7c49d475-churnEntrypointDescriptionBrandRefresh {
margin-bottom: -12px;
margin-top: 16px;
}
._3ce4302b7c49d475-churnEntrypointDescription {
margin-bottom: 20px;
}
._3ce4302b7c49d475-churnDiscountHeader {
margin-bottom: 16px;
max-width: 600px;
}
._3ce4302b7c49d475-heroOfferCountdown {
margin-bottom: 20px;
}
._555fb2c4a26765b6-container {
align-items: center;
display: flex;
flex-direction: column;
padding: 80px 0 var(--space-64);
width: 100%;
}
._555fb2c4a26765b6-gradientBackground {
position: absolute;
top: 0;
z-index: -1;
}
._555fb2c4a26765b6-content {
align-items: center;
display: flex;
flex-direction: column;
gap: var(--space-32);
text-align: center;
}
._555fb2c4a26765b6-content > :last-child {
margin-top: var(--space-32);
}
._555fb2c4a26765b6-headerContainer {
margin: 0 100px;
max-width: 625px;
min-width: -webkit-min-content;
min-width: -moz-min-content;
min-width: min-content;
position: relative;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
@container premium-marketing-page-container (max-width: 960px) {
._555fb2c4a26765b6-headerContainer {
max-width: 500px;
}
}
@container premium-marketing-page-container (max-width: 720px) {
._555fb2c4a26765b6-headerContainer {
max-width: 400px;
}
}
._555fb2c4a26765b6-twoButtonContainer {
align-items: center;
display: flex;
gap: 16px;
justify-content: center;
}
.b9abc541a0f3bad0-container {
flex-direction: column;
max-height: 600px;
}
.b9abc541a0f3bad0-container,
.b9abc541a0f3bad0-containerInner {
align-items: center;
display: flex;
justify-content: center;
text-align: center;
width: 100%;
}
.b9abc541a0f3bad0-containerInner {
flex-direction: row;
height: 100px;
position: absolute;
top: 60px;
-webkit-margin-start: -182px;
margin-inline-start: -182px;
}
.b9abc541a0f3bad0-content {
flex: 1;
min-width: 500px;
position: relative;
}
.b9abc541a0f3bad0-backButton {
align-items: center;
background-color: var(--background-base-low);
border-radius: 24px;
color: var(--white);
cursor: pointer;
display: flex;
font-family: gg sans;
font-size: 14px;
font-weight: 500;
justify-content: center;
line-height: 18px;
padding-block: 4px;
padding-inline: 16px 20px;
}
.b9abc541a0f3bad0-backButton:hover {
background-color: var(--background-base-lower);
}
.b9abc541a0f3bad0-backButtonContainer {
-webkit-margin-end: 92px;
margin-inline-end: 92px;
}
.b9abc541a0f3bad0-headerArt {
margin-top: -48px;
min-height: 400px;
object-fit: cover;
pointer-events: none;
width: 100%;
}
.theme-light .b9abc541a0f3bad0-backButton {
background-color: var(--opacity-white-20);
}
.theme-light .b9abc541a0f3bad0-backButton:hover {
background-color: var(--opacity-white-28);
}
@media (max-width: 1282px) {
.b9abc541a0f3bad0-backButtonContainer {
inset-inline-start: 10px;
position: absolute;
top: -40px;
}
.b9abc541a0f3bad0-containerInner {
-webkit-margin-start: 0;
margin-inline-start: 0;
}
}
._627b97a76710f68f-hammerContainer {
inset-inline-start: 100%;
top: -25px;
}
._627b97a76710f68f-hammerContainer,
._627b97a76710f68f-keyContainer {
pointer-events: none;
position: absolute;
}
._627b97a76710f68f-keyContainer {
bottom: -50px;
inset-inline-end: 100%;
}
@container premium-marketing-page-container (max-width: 720px) {
._627b97a76710f68f-hammerTrinket {
height: 62px;
}
._627b97a76710f68f-keyTrinket {
height: 60px;
}
}
.eccf53c51a899494-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
justify-content: center;
max-width: 1100px;
padding: var(--space-64) var(--space-32) var(--space-64);
text-align: center;
width: 100%;
}
.eccf53c51a899494-backButtonContainer {
grid-column: 1;
grid-row: 1;
justify-self: start;
-webkit-margin-start: var(--space-16);
margin-inline-start: var(--space-16);
z-index: 1;
}
.eccf53c51a899494-content {
grid-column: 1;
grid-row: 1;
position: relative;
}
.eccf53c51a899494-headerContainer {
justify-self: center;
margin: 0 130px;
max-width: 600px;
min-width: -webkit-min-content;
min-width: -moz-min-content;
min-width: min-content;
position: relative;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
._3cf145205b86c3e6-cardContainer {
display: grid;
gap: 16px;
grid-template-columns: 1fr;
justify-content: center;
min-height: 385px;
padding-bottom: 20px;
position: relative;
width: 100%;
-webkit-padding-start: 4px;
padding-inline-start: 4px;
}
._3cf145205b86c3e6-cardInnerContainer {
-webkit-margin-start: 6px;
align-items: center;
display: flex;
justify-content: start;
margin-inline-start: 6px;
overflow: hidden;
padding: 5px;
position: relative;
}
._3cf145205b86c3e6-card {
display: flex;
height: calc(100% - 20px);
max-width: 348px;
padding: 5px;
position: absolute;
transition:
width 0.1s ease-in-out,
height 0.1s ease-in-out,
padding 0.1s ease-in-out;
}
._3cf145205b86c3e6-perkInfo {
display: flex;
height: 100%;
width: 100%;
}
._3cf145205b86c3e6-inactiveArrow,
._3cf145205b86c3e6-leftArrow,
._3cf145205b86c3e6-rightArrow {
align-items: center;
background-color: var(--background-base-low);
border-radius: 100%;
box-shadow: var(--shadow-low);
cursor: pointer;
display: flex;
height: 40px;
justify-content: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
z-index: 9999;
}
._3cf145205b86c3e6-leftArrow:hover,
._3cf145205b86c3e6-rightArrow:hover {
box-shadow: var(--shadow-low);
}
._3cf145205b86c3e6-leftArrow:active,
._3cf145205b86c3e6-rightArrow:active {
box-shadow: var(--shadow-low-hover);
}
._3cf145205b86c3e6-rightArrow {
inset-inline-end: -1px;
}
._3cf145205b86c3e6-leftArrow {
inset-inline-start: 0;
}
._3cf145205b86c3e6-cardProgressBar {
align-items: center;
background-color: var(--background-base-lower);
border-radius: 14px;
bottom: -16px;
display: flex;
gap: 4px;
inset-inline-start: 50%;
justify-content: center;
margin: 5px;
padding: 6px 18px;
position: absolute;
transform: translateX(-50%);
}
._3cf145205b86c3e6-dot,
._3cf145205b86c3e6-selectedDot {
background-color: var(--interactive-muted);
border-radius: 50%;
height: 6px;
transition: background-color 1s ease;
width: 6px;
}
._3cf145205b86c3e6-selectedDot {
background-color: var(--interactive-text-default);
}
@media screen and (max-width: 1330px) {
._3cf145205b86c3e6-card {
padding-inline: 10px;
width: 280px;
}
}
._3cf145205b86c3e6-arrowIcon {
height: 32px;
width: 32px;
}
._3cf145205b86c3e6-inactiveArrow {
box-shadow: var(--shadow-ledge);
cursor: default;
}
._3cf145205b86c3e6-inactiveArrow ._3cf145205b86c3e6-arrowIcon {
fill: var(--interactive-muted);
}
.theme-dark ._3cf145205b86c3e6-leftArrow,
.theme-dark ._3cf145205b86c3e6-rightArrow {
background-color: var(--primary-530);
}
.theme-dark ._3cf145205b86c3e6-leftArrow:hover,
.theme-dark ._3cf145205b86c3e6-rightArrow:hover {
background-color: var(--primary-600);
}
.theme-dark ._3cf145205b86c3e6-leftArrow:active ._3cf145205b86c3e6-arrowIcon,
.theme-dark ._3cf145205b86c3e6-rightArrow:active ._3cf145205b86c3e6-arrowIcon {
fill: var(--white);
}
.theme-dark ._3cf145205b86c3e6-inactiveArrow {
background-color: var(--primary-530);
}
.theme-light ._3cf145205b86c3e6-leftArrow,
.theme-light ._3cf145205b86c3e6-rightArrow {
background-color: var(--white);
fill: var(--primary-500);
}
.theme-light ._3cf145205b86c3e6-leftArrow:active ._3cf145205b86c3e6-arrowIcon,
.theme-light ._3cf145205b86c3e6-rightArrow:active ._3cf145205b86c3e6-arrowIcon {
fill: var(--primary-860);
}
.theme-light ._3cf145205b86c3e6-inactiveArrow {
background-color: var(--white);
}
._3cf145205b86c3e6-leftArrow,
._3cf145205b86c3e6-rightArrow {
box-shadow: var(--shadow-low);
}
._3cf145205b86c3e6-leftArrow ._3cf145205b86c3e6-arrowIcon,
._3cf145205b86c3e6-rightArrow ._3cf145205b86c3e6-arrowIcon {
fill: var(--text-default);
}
._3cf145205b86c3e6-leftArrow:active,
._3cf145205b86c3e6-rightArrow:active {
background-color: var(--background-base-low);
}
.ca1a02dcad190ff8-container {
--custom-content-width-with-padding: calc(100% - 32px);
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
width: 100%;
}
.ca1a02dcad190ff8-responsiveContainer {
container-name: premium-marketing-page-container;
container-type: inline-size;
}
.ca1a02dcad190ff8-hiddenGradient:before {
display: none;
}
.ca1a02dcad190ff8-perksDiscoverability,
.ca1a02dcad190ff8-whatsNew {
margin-bottom: 64px;
}
.ca1a02dcad190ff8-perksCards {
width: var(--custom-content-width-with-padding);
}
.ca1a02dcad190ff8-manageMembership {
margin-top: 64px;
min-height: 111px;
}
.ca1a02dcad190ff8-giftNitro {
margin-top: 64px;
width: var(--custom-content-width-with-padding);
}
.ca1a02dcad190ff8-seeAllPerksButton {
background: var(--background-surface-high);
border-radius: 4px;
box-shadow: 0 12px 36px 0 var(--opacity-black-16);
color: var(--text-default);
font-family: var(--font-primary);
font-size: 14px;
font-weight: var(--font-weight-normal);
padding-block: 8px;
padding-inline: 16px 8px;
}
.ca1a02dcad190ff8-seeAllPerksButton:hover {
background: linear-gradient(120deg, var(--premium-tier-2-purple-for-gradients) 20%, var(--premium-tier-2-purple-for-gradients-2) 50%, var(--premium-tier-2-pink-for-gradients) 80%);
}
.ca1a02dcad190ff8-seeAllPerksButtonContent {
align-items: center;
display: flex;
}
.ca1a02dcad190ff8-footerSpacing {
height: 180px;
}
.ca1a02dcad190ff8-bottomIllustration {
bottom: 0;
filter: saturate(var(--saturation-factor, 1));
position: absolute;
}
.ca1a02dcad190ff8-heroHeading {
margin-bottom: 16px;
width: var(--custom-content-width-with-padding);
}
.ca1a02dcad190ff8-heading {
align-self: start;
margin: 0 32px 16px;
text-align: start;
}
.ca1a02dcad190ff8-column {
display: flex;
flex-direction: column;
margin-top: -128px;
max-width: 1100px;
width: 100%;
}
.ca1a02dcad190ff8-column.ca1a02dcad190ff8-premiumBrandRefresh {
margin-top: 0;
}
.ca1a02dcad190ff8-bottomOfPageVisibilitySensor {
bottom: 0;
height: 300px;
position: absolute;
}
.ca1a02dcad190ff8-mainPageScroller {
background: var(--background-gradient-chat, var(--background-base-low));
contain: layout size;
}
.custom-client-theme .ca1a02dcad190ff8-mainPageScroller {
background: var(--background-base-low);
}
.ca1a02dcad190ff8-allPerksScroller {
background: var(--background-gradient-chat, var(--background-base-low));
contain: layout size;
height: calc(100% - 48px);
inset-inline-start: 100%;
position: absolute;
top: 48px;
transition: left 0.75s ease-in-out;
width: 100%;
}
.ca1a02dcad190ff8-allPerksScroller.ca1a02dcad190ff8-open {
inset-inline-start: 0;
}
.ca1a02dcad190ff8-openCloseReduceMotion {
transition: none;
}
.ca1a02dcad190ff8-cardCarousel {
display: flex;
flex-direction: column;
justify-content: center;
margin-bottom: 64px;
width: 100%;
}
.theme-light .ca1a02dcad190ff8-seeAllPerksButton {
border: 1px solid var(--border-subtle);
}
.ca1a02dcad190ff8-loading {
align-items: center;
display: flex;
height: 520px;
justify-content: center;
}
.ca1a02dcad190ff8-premiumBrandRefreshGradientBackground {
position: absolute;
top: 0;
z-index: -1;
}
._6f73d43f1235b2bf-container {
box-sizing: border-box;
display: flex;
flex: 1;
flex-direction: column;
margin: 0 auto;
max-width: 660px;
}
._6f73d43f1235b2bf-applicationStoreHomeWrapper {
margin: 60px 40px 80px;
}
._6f73d43f1235b2bf-loading {
align-items: center;
display: flex;
height: 520px;
justify-content: center;
}
._6f73d43f1235b2bf-background {
background-repeat: no-repeat;
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
}
._6f73d43f1235b2bf-content {
position: relative;
}
._6f73d43f1235b2bf-sectionTier2 {
margin-top: 32px;
text-align: center;
}
._6f73d43f1235b2bf-marketingRefreshTier2Intro {
max-width: 325px;
}
._6f73d43f1235b2bf-marketingRefreshTitle {
color: var(--text-strong);
font-size: 24px;
font-weight: var(--font-weight-semibold);
line-height: 30px;
margin-bottom: 8px;
margin-top: 0;
}
._6f73d43f1235b2bf-marketingRefreshSubtitle {
color: var(--text-default);
font-size: 16px;
line-height: 20px;
margin: 0;
}
._6f73d43f1235b2bf-marketingRefreshHeaderAnimation {
width: 332px;
-webkit-margin-start: 16px;
margin-inline-start: 16px;
}
._6f73d43f1235b2bf-marketingRefreshTier2Cta {
margin-top: 48px;
text-align: center;
}
._6f73d43f1235b2bf-marketingRefreshSectionTier1 {
border-top: 1px solid var(--border-subtle);
color: var(--text-default);
display: flex;
margin-top: 48px;
padding-top: 48px;
}
._6f73d43f1235b2bf-marketingRefreshTier1Graphic {
display: block;
height: 148px;
-webkit-margin-end: 60px;
flex-shrink: 0;
margin-inline-end: 60px;
width: 175px;
}
@media (max-width: 920px) {
._6f73d43f1235b2bf-marketingRefreshTier1Graphic {
display: none;
}
}
._6f73d43f1235b2bf-marketingRefreshTier1Logo {
color: var(--text-strong);
display: block;
height: 20px;
margin-bottom: 8px;
width: 194px;
}
._6f73d43f1235b2bf-marketingRefreshDescription {
font-size: 16px;
line-height: 20px;
margin: 0 0 16px;
}
._6f73d43f1235b2bf-tier1InfoTooltipList {
list-style-type: disc;
-webkit-padding-start: 15px;
padding-inline-start: 15px;
}
._6f73d43f1235b2bf-tier1InfoTooltipListItem {
padding: 2px;
}
._6f73d43f1235b2bf-tier1InfoTooltipListItemOffsetItem {
inset-inline-start: -5px;
position: relative;
}
._6f73d43f1235b2bf-tier1InfoIcon {
height: 10px;
width: 10px;
}
._6f73d43f1235b2bf-tier2Buttons {
margin-top: 24px;
}
._6f73d43f1235b2bf-subSectionHeader {
text-transform: uppercase;
}
._6f73d43f1235b2bf-sectionAccountCredit,
._6f73d43f1235b2bf-subscriptionDetails {
border-bottom: 1px solid;
margin-bottom: 40px;
padding-bottom: 40px;
}
._6f73d43f1235b2bf-accountCredit {
margin-top: 16px;
}
._6f73d43f1235b2bf-accountCreditTitle {
margin-bottom: 16px;
}
._6f73d43f1235b2bf-accountCreditDescription {
color: var(--text-default);
line-height: 20px;
margin-bottom: 16px;
margin-top: 0;
}
._6f73d43f1235b2bf-tier2Plan {
display: flex;
}
._6f73d43f1235b2bf-marketingRefreshTier2PlanWrapper {
display: flex;
margin-bottom: 48px;
}
._6f73d43f1235b2bf-marketingRefreshTier2PlanName {
color: var(--logo-primary);
display: block;
height: 60px;
margin-bottom: 32px;
width: auto;
}
._6f73d43f1235b2bf-subscriptionsRedirectContainer {
align-items: center;
background-color: var(--background-base-lower);
border: none;
display: flex;
margin-bottom: 24px;
padding: 8px;
}
._6f73d43f1235b2bf-subscriptionsRedirectWarningIcon {
color: var(--status-warning);
-webkit-margin-end: 6px;
height: 13px;
margin-inline-end: 6px;
width: 13px;
}
.theme-light ._6f73d43f1235b2bf-sectionAccountCredit,
.theme-light ._6f73d43f1235b2bf-subscriptionDetails {
border-color: hsl(var(--primary-300-hsl) / 0.3);
}
.theme-dark ._6f73d43f1235b2bf-sectionAccountCredit,
.theme-dark ._6f73d43f1235b2bf-subscriptionDetails {
border-color: hsl(var(--primary-400-hsl) / 0.3);
}
._6f73d43f1235b2bf-perkList,
._6f73d43f1235b2bf-perkListItem {
margin-bottom: 16px;
}
._6f73d43f1235b2bf-perkListItem {
align-items: center;
display: flex;
}
._6f73d43f1235b2bf-perkListItem:last-child {
margin-bottom: 0;
}
._6f73d43f1235b2bf-perkListItemIcon {
flex-shrink: 0;
height: 20px;
width: 20px;
-webkit-margin-end: 16px;
margin-inline-end: 16px;
}
.theme-dark ._6f73d43f1235b2bf-tier1CustomEmojiPerk {
color: #fee64f;
}
.theme-dark ._6f73d43f1235b2bf-tier1StreamPerk {
color: #9bdd73;
}
.theme-light ._6f73d43f1235b2bf-tier1CustomEmojiPerk {
color: #d0820c;
}
.theme-light ._6f73d43f1235b2bf-tier1StreamPerk {
color: #69974d;
}
.images-light ._6f73d43f1235b2bf-tier1Banner {
background-image: url(/assets/460e67c2a6814672.svg);
}
.images-dark ._6f73d43f1235b2bf-tier1Banner {
background-image: url(/assets/cbe5498434e90cc1.svg);
}
._6f73d43f1235b2bf-tier1Banner {
background-color: var(--background-base-lower);
color: var(--text-strong);
}
._6f73d43f1235b2bf-tier1ProfilePerk {
color: #4087ed;
}
._6f73d43f1235b2bf-tier1BoostPerk {
color: var(--guild-boosting-pink);
}
._6f73d43f1235b2bf-tier1UploadPerk {
color: #776bff;
}
._7df54e658bdcad78-socialLinks {
font-size: 12px;
line-height: 16px;
padding: 8px 10px;
}
._7df54e658bdcad78-link {
padding: 0 2px;
-webkit-margin-end: 8px;
color: var(--interactive-text-default);
margin-inline-end: 8px;
}
._7df54e658bdcad78-link:hover {
color: var(--interactive-text-hover);
}
._7df54e658bdcad78-link:active {
color: var(--interactive-text-active);
}
._7df54e658bdcad78-foreground {
transition: color 0.15s ease;
}
._5d148ffac19e7fb1-preview {
background-color: var(--background-base-lower);
padding: 16px;
}
._5d148ffac19e7fb1-previewMessage {
border-radius: var(--radius-xs);
margin-top: 16px;
padding: 8px;
}
._5d148ffac19e7fb1-previewHeader {
display: flex;
}
._5d148ffac19e7fb1-previewAvatars {
-webkit-margin-start: 8px;
display: grid;
gap: 8px;
grid-auto-flow: column;
margin-inline-start: 8px;
}
._5d148ffac19e7fb1-ttsSliderMarker {
text-transform: uppercase;
}
._5d148ffac19e7fb1-syncProfileThemeWithUserTheme {
scroll-margin-top: 125px;
}
._5d148ffac19e7fb1-reducedMotion {
scroll-margin-top: 145px;
}
.custom-theme-background ._5d148ffac19e7fb1-preview {
background: var(--background-gradient-chat-preview);
}
._5d148ffac19e7fb1-appearanceUpsell {
padding-top: 24px;
}
.eb2508e5fd9f2b15-avatarBackground {
align-items: center;
background-color: var(--background-mod-strong);
border-radius: 50%;
height: 92px;
justify-content: center;
width: 92px;
}
.eb2508e5fd9f2b15-avatar,
.eb2508e5fd9f2b15-avatarBackground {
display: flex;
position: relative;
}
.eb2508e5fd9f2b15-indicator {
align-items: center;
display: flex;
justify-content: center;
position: absolute;
}
.d878e741f1c1999b-container {
border: none;
display: flex;
flex-direction: row;
gap: var(--space-16);
margin-bottom: var(--space-32);
padding-top: var(--space-8);
width: 100%;
--__card-accent-color: transparent;
}
.d878e741f1c1999b-profile {
-webkit-margin-start: var(--space-16);
justify-content: center;
margin-inline-start: var(--space-16);
}
.d878e741f1c1999b-status {
row-gap: var(--space-24);
}
.d878e741f1c1999b-status,
.d878e741f1c1999b-title {
display: flex;
flex-direction: column;
width: 100%;
}
.d878e741f1c1999b-title {
row-gap: var(--space-8);
}
.d878e741f1c1999b-health {
display: flex;
position: relative;
width: 100%;
}
.d878e741f1c1999b-line {
background-color: var(--background-mod-strong);
height: 4px;
position: absolute;
top: var(--space-12);
width: 100%;
}
.d878e741f1c1999b-statusOption {
align-items: center;
display: flex;
flex-direction: column;
position: absolute;
row-gap: var(--space-8);
text-align: center;
width: 15%;
}
.d878e741f1c1999b-statusOption:nth-of-type(2) {
align-items: flex-start;
inset-inline-start: 0;
text-align: start;
}
.d878e741f1c1999b-statusOption:nth-of-type(3) {
inset-inline-start: 25%;
transform: translate(-50%);
}
.d878e741f1c1999b-statusOption:nth-of-type(4) {
inset-inline-start: 50%;
transform: translate(-50%);
}
.d878e741f1c1999b-statusOption:nth-of-type(5) {
inset-inline-start: 75%;
transform: translate(-50%);
}
.d878e741f1c1999b-statusOption:nth-of-type(6) {
align-items: flex-end;
inset-inline-start: 100%;
text-align: end;
transform: translate(-100%);
}
.d878e741f1c1999b-statusLabel {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.d878e741f1c1999b-marker {
align-items: center;
background-color: var(--background-base-low);
border-radius: 50%;
display: flex;
height: 28px;
justify-content: center;
width: 28px;
z-index: 1;
}
.d878e741f1c1999b-marker .d878e741f1c1999b-empty {
background-color: var(--background-mod-strong);
border-radius: 50%;
height: 16px;
width: 16px;
}
.edf232db75486069-dropdown {
background-color: var(--background-base-lower);
border-radius: var(--radius-md);
margin-bottom: 8px;
}
.edf232db75486069-header {
box-sizing: border-box;
cursor: pointer;
flex-direction: row;
padding: 8px;
width: 100%;
}
.edf232db75486069-header,
.edf232db75486069-headerIconWrapper {
align-items: center;
display: flex;
}
.edf232db75486069-headerIconWrapper {
background-color: var(--background-base-lowest);
border-radius: var(--radius-xl);
height: 40px;
justify-content: center;
margin: 5px;
width: 40px;
}
.edf232db75486069-caret {
color: var(--interactive-text-default);
justify-self: flex-end;
margin: 8px;
}
.edf232db75486069-title {
color: var(--text-muted);
margin-inline: 10px auto;
}
.edf232db75486069-items,
.edf232db75486069-title {
display: flex;
flex-direction: column;
}
.edf232db75486069-items {
align-items: center;
color: var(--white);
gap: 8px;
padding: 8px;
}
.edf232db75486069-itemDetail,
.edf232db75486069-items {
box-sizing: border-box;
}
.edf232db75486069-itemDetail {
background-color: var(--background-mod-strong);
border-radius: var(--radius-md);
cursor: pointer;
height: -webkit-max-content;
height: -moz-max-content;
height: max-content;
margin: 8px 4px 0;
padding: var(--space-16);
width: 100%;
}
.edf232db75486069-itemDetailNew {
border: 1px solid var(--brand-500);
}
.edf232db75486069-descriptionContainer {
display: flex;
flex-direction: column;
gap: 8px;
}
.edf232db75486069-incidentTimeBase {
border-radius: var(--radius-md);
padding: 3px 6px;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
}
.edf232db75486069-timestamp {
background-color: var(--background-base-lowest);
}
.edf232db75486069-newBadge,
.edf232db75486069-timestamp {
}
.edf232db75486069-newBadge {
background-color: var(--brand-500);
color: var(--white);
}
.edf232db75486069-expirationDate {
color: var(--channels-default);
}
.edf232db75486069-content {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
min-height: 100px;
min-width: 200px;
padding: 4px;
}
.edf232db75486069-paginationButton {
background-color: var(--background-mod-subtle);
border-end-end-radius: var(--radius-md);
border-end-start-radius: var(--radius-md);
color: var(--white);
font-size: 13px;
margin-top: -8px;
padding: 8px 64px;
}
.edf232db75486069-emptyState {
align-items: center;
display: flex;
flex-direction: column;
gap: 8px;
justify-content: center;
margin-bottom: 12px;
margin-top: 12px;
}
.edf232db75486069-emptyStateSubtext,
.edf232db75486069-emptyStateText {
margin: 0;
}
.edf232db75486069-iconContainer {
margin-bottom: var(--space-16);
position: relative;
}
.edf232db75486069-iconBackground {
background-color: var(--background-base-lowest);
border-radius: 36px;
display: inline-block;
padding: 10px;
}
.edf232db75486069-icon {
color: var(--text-default);
height: 42px;
margin: 4px 2px 0;
width: 42px;
}
.edf232db75486069-stars {
inset-inline-start: -18px;
position: absolute;
}
.d74ef86df6475678-container,
.d74ef86df6475678-emptyPage {
display: flex;
flex-direction: column;
}
.d74ef86df6475678-emptyPage {
align-items: center;
gap: 8px;
justify-content: center;
}
div.d74ef86df6475678-nagbar {
border-radius: 0 0 10px 10px;
margin-top: -24px;
}
._6c75d92c128c46b0-header {
align-items: center;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-bottom: 24px;
padding-top: 24px;
}
._6c75d92c128c46b0-modalCloseButton {
inset-inline-end: 16px;
position: absolute;
top: 16px;
}
._6c75d92c128c46b0-content {
align-items: center;
display: flex;
justify-content: space-around;
margin-bottom: 8px;
}
._6c75d92c128c46b0-icon {
-webkit-margin-end: 16px;
margin-inline-end: 16px;
}
._6c75d92c128c46b0-input {
margin-top: 8px;
}
._6c75d92c128c46b0-settings {
margin-top: 32px;
}
._6c75d92c128c46b0-credentialList,
._6c75d92c128c46b0-description {
margin-bottom: 8px;
}
._6c75d92c128c46b0-credentialList {
background-color: var(--background-base-lower);
border-radius: 4px;
}
._6c75d92c128c46b0-credentialItem {
align-items: center;
border-top: 1px solid var(--border-subtle);
display: flex;
justify-content: space-between;
padding: 8px;
-webkit-padding-start: 32px;
box-sizing: border-box;
overflow: hidden;
padding-inline-start: 32px;
width: 100%;
}
._6c75d92c128c46b0-credentialItem:not(:last-child) {
margin-bottom: 4px;
}
._6c75d92c128c46b0-credentialOptions {
height: 24px;
}
._6c75d92c128c46b0-footer {
justify-content: space-between;
}
.a959b15304ce5719-spacing {
margin-bottom: 20px;
}
.a959b15304ce5719-error {
margin-top: 8px;
}
.a959b15304ce5719-card {
padding: 10px;
}
.a959b15304ce5719-warning {
color: var(--white);
}
._6aefd1a8b680587b-card,
._6aefd1a8b680587b-spacing {
margin-bottom: 20px;
}
._6aefd1a8b680587b-card {
padding: 10px;
}
._6aefd1a8b680587b-error {
margin-top: 8px;
}
._2666bc68709e8a16-lockIcon {
filter: saturate(var(--saturation-factor, 1));
}
._2666bc68709e8a16-btn {
cursor: pointer;
font-size: 14px;
font-weight: var(--font-weight-medium);
line-height: 16px;
padding: 10px 20px;
position: relative;
text-align: center;
transition: background-color 0.2s ease;
}
._2666bc68709e8a16-btn + ._2666bc68709e8a16-btn {
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
._2666bc68709e8a16-btn:disabled {
cursor: not-allowed;
opacity: 0.3;
}
._2666bc68709e8a16-btn._2666bc68709e8a16-btnPrimary {
background-color: var(--brand-500);
border-radius: 3px;
color: var(--white);
padding: 8px 16px;
}
._2666bc68709e8a16-btn._2666bc68709e8a16-btnPrimary:hover:not(:disabled) {
background-color: var(--brand-600);
}
._2666bc68709e8a16-userSettingsSecurityImage {
opacity: 1;
transition: opacity 0.3s ease;
width: 100%;
}
@media (max-width: 840px) {
._2666bc68709e8a16-userSettingsSecurityImage {
opacity: 0;
}
}
._2666bc68709e8a16-userSettingsSecurity ._2666bc68709e8a16-isEnabled {
color: var(--text-feedback-positive);
}
._2666bc68709e8a16-userSettingsSecurity ._2666bc68709e8a16-lockIcon {
-webkit-margin-end: 4px;
height: 14px;
margin-inline-end: 4px;
position: relative;
top: 2px;
width: 10px;
}
._2666bc68709e8a16-userSettingsSecurity ._2666bc68709e8a16-checkboxGroup ._2666bc68709e8a16-code {
cursor: text;
font-family: var(--font-code);
font-size: 14px;
line-height: 28px;
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
}
._2666bc68709e8a16-phoneRevealer {
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
._2666bc68709e8a16-changePasswordButton {
margin-bottom: 28px;
}
._2666bc68709e8a16-inlineNoticeText {
margin-bottom: var(--space-8);
}
._2666bc68709e8a16-backupCode {
align-items: center;
display: flex;
flex-direction: row;
gap: var(--space-8);
outline: none;
}
._2666bc68709e8a16-userProfileCustomizationSection {
margin-top: 40px;
position: relative;
}
._2666bc68709e8a16-nitroIcon {
color: var(--text-strong);
-webkit-margin-end: 6px;
margin-inline-end: 6px;
position: relative;
top: -3px;
}
._2666bc68709e8a16-customizationTitle {
align-items: center;
display: flex;
}
._2666bc68709e8a16-noticeTextButton {
font-weight: 700;
text-decoration: underline;
}
._2666bc68709e8a16-noticeTextButton,
._2666bc68709e8a16-userSettingsSecurity ._2666bc68709e8a16-backupCode {
color: var(--text-default);
}
._2666bc68709e8a16-tabPanel {
margin-top: var(--space-32);
}
._5ecaae3e0bfab122-spacer {
width: 8px;
}
._5ecaae3e0bfab122-input {
background-color: var(--input-background-default);
border: 1px solid var(--input-border-default);
border-radius: var(--radius-sm);
box-sizing: border-box;
color: var(--text-strong);
font-size: 17px;
height: 48px;
margin-inline: var(--space-4);
text-align: center;
width: 48px;
}
.enable-forced-colors ._5ecaae3e0bfab122-input {
border: 1px solid ButtonText;
}
.enable-forced-colors ._5ecaae3e0bfab122-input:focus {
border-color: Highlight;
}
.a0c54f499c2e5848-phoneField {
display: grid;
gap: var(--space-8);
grid-template-columns: 5fr 6fr;
position: relative;
}
.db41ea5ef0e22091-phoneVerificationModal {
min-height: 252px;
padding: 16px;
position: relative;
width: 440px;
}
.db41ea5ef0e22091-phoneVerificationModal .db41ea5ef0e22091-animationContainer {
position: absolute;
top: -150px;
inset-inline: 130px;
}
.db41ea5ef0e22091-phoneVerificationModal .db41ea5ef0e22091-title {
color: var(--text-strong);
font-size: 20px;
font-weight: var(--font-weight-bold);
margin-top: auto;
padding-top: 80px;
}
.db41ea5ef0e22091-phoneVerificationModal .db41ea5ef0e22091-description {
color: var(--text-default);
font-size: 16px;
line-height: 20px;
text-align: center;
}
.db41ea5ef0e22091-phoneVerificationModal .db41ea5ef0e22091-description.db41ea5ef0e22091-error {
color: var(--status-danger);
}
.db41ea5ef0e22091-phoneVerificationModal .db41ea5ef0e22091-field {
align-self: stretch;
}
.d286c531be04f3d2-description {
margin-bottom: 16px;
}
.d286c531be04f3d2-buttonContainer {
display: flex;
flex-direction: row;
}
._1fed1dd06c7aabf7-accountProfileCard {
background-color: var(--background-base-lowest);
border-radius: var(--radius-sm);
overflow: hidden;
position: relative;
}
._1fed1dd06c7aabf7-userInfo {
box-sizing: border-box;
display: flex;
justify-content: space-between;
padding-block: 16px 0;
padding-inline: 120px 16px;
width: 100%;
}
._1fed1dd06c7aabf7-accountProfileCard ._1fed1dd06c7aabf7-avatar {
background-color: var(--background-base-lowest);
box-sizing: content-box;
inset-inline-start: 22px;
position: absolute;
top: 82px;
}
._1fed1dd06c7aabf7-profileCardUsernameRow {
display: flex;
}
._1fed1dd06c7aabf7-overflowMenuButton {
-webkit-margin-start: 8px;
cursor: pointer;
margin-inline-start: 8px;
}
._1fed1dd06c7aabf7-overflowMenuIcon {
color: var(--interactive-text-default);
}
._1fed1dd06c7aabf7-userTag {
color: var(--text-strong);
font-family: var(--font-display);
font-size: 20px;
font-weight: var(--font-weight-semibold);
line-height: 24px;
margin-bottom: 6px;
}
._1fed1dd06c7aabf7-discriminator {
color: var(--text-default);
}
._1fed1dd06c7aabf7-background {
background-color: var(--background-base-lower);
border-radius: var(--radius-sm);
margin: 8px 16px 16px;
padding: 16px;
}
._1fed1dd06c7aabf7-profile {
display: flex;
flex-direction: row;
}
._1fed1dd06c7aabf7-avatarUploaderInner {
height: 80px;
width: 80px;
}
._1fed1dd06c7aabf7-details {
display: flex;
flex-direction: column;
margin-bottom: auto;
margin-top: auto;
-webkit-margin-start: 16px;
margin-inline-start: 16px;
overflow: hidden;
}
._1fed1dd06c7aabf7-detailsInner {
color: var(--text-strong);
overflow: hidden;
text-overflow: ellipsis;
}
._1fed1dd06c7aabf7-badgeList {
background-color: var(--background-base-lower);
border: none;
border-radius: var(--radius-sm);
gap: 4px;
max-width: 228px;
padding: 2px 4px;
}
._1fed1dd06c7aabf7-badgeList:empty {
height: 28px;
}
._1fed1dd06c7aabf7-badge {
height: 24px;
width: 24px;
}
._1fed1dd06c7aabf7-fieldList {
background-color: var(--background-base-lower);
border-radius: var(--radius-sm);
}
._1fed1dd06c7aabf7-field {
display: flex;
flex-direction: row;
justify-content: space-between;
}
._1fed1dd06c7aabf7-fieldSpacer {
margin-top: 24px;
}
._1fed1dd06c7aabf7-fieldSpacerBottom {
margin-bottom: 24px;
}
._1fed1dd06c7aabf7-fieldTitle {
margin-bottom: 4px;
}
._1fed1dd06c7aabf7-fieldButtonList {
display: flex;
}
._1fed1dd06c7aabf7-fieldButton,
._1fed1dd06c7aabf7-pomeloWarning {
margin-bottom: auto;
margin-top: auto;
}
._1fed1dd06c7aabf7-pomeloWarning {
-webkit-padding-end: 10px;
padding-inline-end: 10px;
}
._1fed1dd06c7aabf7-removeButton {
-webkit-margin-end: 16px;
margin-inline-end: 16px;
}
._1fed1dd06c7aabf7-menu,
._1fed1dd06c7aabf7-uploadButton {
align-items: center;
display: flex;
justify-content: center;
-webkit-margin-start: auto;
flex-shrink: 0;
margin-inline-start: auto;
}
._1fed1dd06c7aabf7-menu {
-webkit-margin-end: 16px;
color: var(--interactive-text-default);
cursor: pointer;
margin-inline-end: 16px;
}
._1fed1dd06c7aabf7-avatarError {
margin-top: 8px;
}
._1fed1dd06c7aabf7-constrainedRow {
display: flex;
flex: 1 1 auto;
overflow: hidden;
-webkit-margin-end: 16px;
margin-inline-end: 16px;
}
._1fed1dd06c7aabf7-usernameRow {
overflow: hidden;
}
._1fed1dd06c7aabf7-usernameInnerRow {
color: var(--text-strong);
overflow: hidden;
text-overflow: ellipsis;
}
.enable-forced-colors ._1fed1dd06c7aabf7-overflowMenuIcon {
background-color: ButtonFace;
border: 1px solid ButtonFace;
color: ButtonText;
}
.enable-forced-colors ._1fed1dd06c7aabf7-overflowMenuIcon:focus,
.enable-forced-colors ._1fed1dd06c7aabf7-overflowMenuIcon:hover {
border-color: ButtonText;
}
.enable-forced-colors ._1fed1dd06c7aabf7-accountProfileCard {
border: 1px solid CanvasText;
}
._1fed1dd06c7aabf7-textRevealer {
align-items: center;
display: flex;
gap: 4px;
}
._0ecc4bce434fd124-iconContainer {
color: var(--text-default);
}
._0ecc4bce434fd124-iconContainer,
._0ecc4bce434fd124-iconContainer > foreignObject {
align-items: center;
display: flex;
justify-content: center;
}
._0ecc4bce434fd124-iconContainer > foreignObject {
background: linear-gradient(0deg, var(--background-mod-strong, hsla(240, 4%, 61%, 0.24)) 0, var(--background-mod-strong, hsla(240, 4%, 61%, 0.24)) 100%), var(--background-surface-high);
}
._0ecc4bce434fd124-smallText {
transform: scale(0.42);
}
._0ecc4bce434fd124-textContainer {
align-items: center;
display: flex;
height: 100%;
justify-content: center;
width: 100%;
}
._7db089e5a4993141-guildRow {
align-items: center;
display: flex;
gap: 16px;
}
._7db089e5a4993141-guildsList {
display: flex;
flex-direction: column;
gap: 24px;
}
._7db089e5a4993141-guildRowTextContainer {
flex: 1;
overflow: hidden;
-webkit-margin-end: 32px;
margin-inline-end: 32px;
}
._7db089e5a4993141-memberDetailsContainer {
align-items: center;
display: flex;
gap: 4px;
}
._7db089e5a4993141-infoDot {
border-radius: 50%;
flex-shrink: 0;
height: 8px;
width: 8px;
}
._7db089e5a4993141-memberCountDot {
background-color: var(--primary-300);
}
._7db089e5a4993141-controlsContainer {
align-items: center;
display: flex;
gap: var(--space-4);
justify-content: space-between;
}
._7db089e5a4993141-select {
max-width: 180px;
}
._7db089e5a4993141-showAllButton {
align-items: center;
cursor: pointer;
display: flex;
gap: 16px;
padding: 6px 0;
}
._7db089e5a4993141-showAllIcon {
margin: 0 12px;
}
._7db089e5a4993141-wrapper {
display: flex;
flex-direction: column;
gap: 24px;
}
._7db089e5a4993141-wrapperCompact {
gap: 16px;
}
._7db089e5a4993141-guildRowWrapper {
margin: 0;
}
._7db089e5a4993141-noResultsContainer {
align-items: center;
display: flex;
height: 736px;
justify-content: center;
}
._7db089e5a4993141-noResultsText {
color: var(--text-muted);
text-transform: capitalize;
}
._7db089e5a4993141-headerContainer {
background-color: var(--background-base-low);
display: flex;
flex-direction: column;
gap: 16px;
padding-top: 16px;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1;
}
._6de8b403fe86ae15-defaultSetting {
margin-bottom: 16px;
}
._6de8b403fe86ae15-formTitle {
margin-bottom: 8px;
}
._6de8b403fe86ae15-switchContainer {
background-color: var(--background-surface-high);
border-radius: var(--radius-lg);
padding: 16px;
}
._6de8b403fe86ae15-myServersContainer {
display: flex;
flex-direction: column;
}
._6de8b403fe86ae15-myServersHeaderContainer {
align-items: center;
display: flex;
justify-content: space-between;
}
._6de8b403fe86ae15-myServersTitle {
margin-bottom: 0;
}
._6de8b403fe86ae15-myServersIgnoredWarning {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
._6de8b403fe86ae15-settingSwitch {
display: flex;
gap: 16px;
}
._6de8b403fe86ae15-settingSwitchLabel {
display: flex;
flex: 1;
flex-direction: column;
gap: 2px;
}
._6de8b403fe86ae15-privacyTermsCard {
padding: var(--space-20);
}
.a1d343a407a39907-container {
align-items: center;
background-color: var(--background-base-lowest);
border-radius: var(--radius-sm);
display: flex;
gap: 16px;
margin-bottom: 34px;
margin-top: 44px;
padding: 16px 25px;
}
.a1d343a407a39907-iconContainer {
flex-shrink: 0;
}
.a1d343a407a39907-bannerImage {
height: 69px;
width: 117px;
}
.a1d343a407a39907-textContent {
display: flex;
flex: 1;
flex-direction: column;
gap: 4px;
}
.a1d343a407a39907-buttonContainer {
flex-shrink: 0;
}
.fbfab602fa801e7a-tryItOutButtons {
display: flex;
gap: 12px;
}
.fbfab602fa801e7a-premiumCta {
-webkit-margin-start: 8px;
border-radius: var(--radius-sm);
margin-inline-start: 8px;
}
.fbfab602fa801e7a-basicThemeSelectors {
margin-bottom: 24px;
margin-top: 0;
}
.fbfab602fa801e7a-previewThemeButton {
margin-bottom: 26px;
margin-top: 16px;
}
.fbfab602fa801e7a-premiumTier2Divider {
background-image: linear-gradient(90deg, var(--premium-tier-2-pink-for-gradients) 0, var(--premium-tier-2-purple-for-gradients) 50%, var(--premium-tier-2-pink-for-gradients) 100%);
height: 2px;
margin-inline: -24px;
}
.fbfab602fa801e7a-divider {
margin-bottom: 24px;
margin-top: 32px;
}
.fbfab602fa801e7a-title {
color: var(--text-strong);
}
.fbfab602fa801e7a-colorThemesBackground {
background: var(--background-base-lower);
border: 1px solid var(--border-normal);
border-radius: var(--radius-md);
padding: 24px;
}
.fbfab602fa801e7a-darkSidebarToggle {
margin: var(--space-24) 0;
}
.fbfab602fa801e7a-darkSidebarToggle > div {
align-items: center;
display: flex;
height: 48px;
}
._8a3d71a4c4dc2512-appIconSelectionContainer {
box-sizing: border-box;
position: relative;
}
._8a3d71a4c4dc2512-appIconSelection,
._8a3d71a4c4dc2512-appIconSelectionContainer {
height: var(--custom-theme-selection-selection-size);
width: var(--custom-theme-selection-selection-size);
}
._8a3d71a4c4dc2512-appIconSelection {
border-radius: 8px;
box-shadow: 0 0 2px var(--interactive-text-default);
cursor: pointer;
overflow: hidden;
}
._8a3d71a4c4dc2512-appIconSelection._8a3d71a4c4dc2512-selected {
cursor: default;
}
._8a3d71a4c4dc2512-disabled {
pointer-events: none;
}
._8a3d71a4c4dc2512-lockedBadgeContainer {
align-items: center;
background-clip: content-box;
background-color: var(--background-base-low);
border-radius: var(--radius-round);
bottom: 0;
box-shadow: inset 0 0 0 2px var(--background-base-low);
cursor: pointer;
display: flex;
height: 18px;
inset-inline-end: 0;
justify-content: center;
padding: 1px;
position: absolute;
width: 18px;
z-index: 2;
}
._8a3d71a4c4dc2512-lockedBadge {
color: var(--icon-strong);
height: 10px;
width: 10px;
}
.a00e6edb893d7a3d-header {
align-items: flex-start;
display: flex;
justify-content: space-between;
}
.a00e6edb893d7a3d-headings {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.a00e6edb893d7a3d-title {
align-items: center;
display: flex;
flex: 1;
}
.a00e6edb893d7a3d-premiumIcon {
color: var(--icon-strong);
height: 20px;
width: 20px;
}
.a00e6edb893d7a3d-titleText {
color: var(--text-strong);
}
._3e443c6b2569044a-preview {
align-items: stretch;
display: flex;
flex-direction: column;
height: 180px;
justify-content: center;
overflow: hidden;
position: relative;
}
._3e443c6b2569044a-preview:after {
bottom: 0;
content: "";
cursor: default;
position: absolute;
top: 0;
inset-inline: 0;
}
._3e443c6b2569044a-firstMessage {
margin-top: -0.8rem !important;
}
._3e443c6b2569044a-compactPreview ._3e443c6b2569044a-firstMessage {
margin-top: 0 !important;
}
._3e443c6b2569044a-forcedColorsWarning {
margin-bottom: 12px;
}
._3e443c6b2569044a-themeTitle {
align-items: flex-start;
display: flex;
justify-content: space-between;
}
._3e443c6b2569044a-formControl {
position: relative;
}
._3e443c6b2569044a-previewButton {
inset-inline-end: 0;
position: absolute;
top: 0;
}
.theme-dark.custom-theme-background ._3e443c6b2569044a-preview {
background: var(--background-gradient-chat-preview);
}
.theme-light.custom-theme-background ._3e443c6b2569044a-preview {
background: var(--background-gradient-higher);
}
._3e443c6b2569044a-messageGroupingSpacing {
margin-top: var(--space-24);
}
._3e443c6b2569044a-subtext {
margin-bottom: var(--space-16);
text-transform: none;
}
._3e443c6b2569044a-a11yCallout,
._3e443c6b2569044a-subtext {
color: var(--text-subtle);
}
._3e443c6b2569044a-a11yCallout {
margin-bottom: var(--space-32);
margin-top: var(--space-24);
}
._3e443c6b2569044a-divider {
margin-bottom: var(--space-xl);
margin-top: var(--space-xxl);
}
._3e443c6b2569044a-compactModeToggle {
display: flex;
height: 40px;
justify-content: center;
margin-bottom: 0;
margin-top: var(--space-24);
}
._3e443c6b2569044a-themeTitleContainer {
display: flex;
flex-direction: column;
gap: var(--space-8);
margin-bottom: var(--space-16);
}
._3e443c6b2569044a-timeTitle {
margin-bottom: var(--space-24);
}
[role="radiogroup"] [role="radio"]:last-of-type {
margin-bottom: 0;
}
._6b52d39a14c2d258-tryItOutButtons {
display: flex;
gap: 12px;
}
._6b52d39a14c2d258-selectionGroup {
padding: 0;
}
._6b52d39a14c2d258-divider {
margin-bottom: 24px;
margin-top: 32px;
}
._2d0216932913e005-pageActions {
border-radius: 3px;
display: flex;
flex: 0 0 auto;
justify-content: center;
padding: 20px 0;
}
._2d0216932913e005-buttons {
align-items: center;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
display: flex;
gap: var(--space-8);
padding: var(--space-4);
}
.e9cb00d6250845ad-payment {
transition: background-color 0.2s ease;
width: 100%;
}
.e9cb00d6250845ad-payment:hover,
.e9cb00d6250845ad-payment[data-expanded="true"] {
background-color: var(--background-mod-muted);
}
.e9cb00d6250845ad-expandInfo {
padding: 20px;
}
.e9cb00d6250845ad-summaryInfo {
color: var(--text-strong);
cursor: pointer;
padding: var(--space-16);
transition: background-color 0.2s ease;
}
.e9cb00d6250845ad-summaryInfo[data-expanded="true"] {
background-color: var(--background-mod-muted);
}
.e9cb00d6250845ad-summaryInfo:hover {
background-color: var(--background-mod-subtle);
}
.e9cb00d6250845ad-expandedInfo {
padding: var(--space-16);
}
.e9cb00d6250845ad-paymentHeader {
border-top: 1px solid;
border-color: var(--primary-500);
font-size: 16px;
font-weight: var(--font-weight-semibold);
margin-bottom: 8px;
margin-top: 20px;
padding-top: 20px;
}
.e9cb00d6250845ad-paymentHeader:first-child {
border-top: none;
margin-top: 0;
padding-top: 0;
}
.e9cb00d6250845ad-paymentText {
color: var(--text-default);
font-size: 14px;
line-height: 1.4;
}
.e9cb00d6250845ad-paymentBreakdown {
padding-top: 10px;
}
.e9cb00d6250845ad-paymentDetail {
margin-top: 12px;
}
.e9cb00d6250845ad-paymentDetail:first-child {
margin-top: 20px;
}
.e9cb00d6250845ad-additionalInformationButtonContainer {
margin-top: 16px;
}
.e9cb00d6250845ad-guildProductDetail {
}
.e9cb00d6250845ad-date {
width: 20%;
}
.e9cb00d6250845ad-amount {
align-content: center;
display: flex;
justify-content: flex-end;
}
.e9cb00d6250845ad-statusTag {
border-radius: 3px;
display: block;
-webkit-margin-end: 20px;
color: var(--white);
font-size: 11px;
font-weight: var(--font-weight-medium);
height: 14px;
letter-spacing: 0.4px;
line-height: 14px;
margin-inline-end: 20px;
max-width: 180px;
overflow: hidden;
padding: 0 4px;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
}
.e9cb00d6250845ad-statusTagGreen {
background-color: var(--green-360);
}
.e9cb00d6250845ad-statusTagRed {
background-color: var(--status-danger);
}
.e9cb00d6250845ad-statusTagGrey {
background-color: var(--primary-400);
}
.e9cb00d6250845ad-statusTagYellow {
background-color: var(--yellow-360);
}
.e9cb00d6250845ad-price {
white-space: nowrap;
}
.e9cb00d6250845ad-description {
align-items: center;
display: flex;
flex: 1 1 50%;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
.e9cb00d6250845ad-descriptionIcon {
-webkit-margin-end: 10px;
background-position: 50%;
background-repeat: no-repeat;
flex-shrink: 0;
margin-inline-end: 10px;
}
.e9cb00d6250845ad-guildDescriptionIcon {
background-color: var(--background-accent);
}
.e9cb00d6250845ad-shopIcon {
-webkit-margin-end: 10px;
height: 20px;
margin-inline-end: 10px;
width: 20px;
}
.e9cb00d6250845ad-expand {
-webkit-margin-start: 20px;
height: 24px;
margin-inline-start: 20px;
width: 24px;
}
.e9cb00d6250845ad-downloadInvoice {
font-size: 14px;
margin-top: 12px;
}
.e9cb00d6250845ad-downloadRefundInvoice {
-webkit-margin-start: 14px;
margin-inline-start: 14px;
}
.e9cb00d6250845ad-refundSubHeader {
font-size: 12px;
font-weight: var(--font-weight-semibold);
margin: 20px 0 8px;
text-transform: uppercase;
}
.e9cb00d6250845ad-refundSelect {
-webkit-margin-end: 12px;
flex: 1;
margin-inline-end: 12px;
}
.e9cb00d6250845ad-refundCriteria {
-webkit-margin-end: 32px;
margin-inline-end: 32px;
}
.e9cb00d6250845ad-refundCriteriaIcon {
height: 16px;
width: 16px;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
.e9cb00d6250845ad-giftIcon {
-webkit-margin-start: 10px;
color: var(--text-default);
height: 16px;
margin-inline-start: 10px;
width: 16px;
}
@media (max-width: 800px) {
.e9cb00d6250845ad-refundCriteria {
-webkit-margin-end: 16px;
margin-inline-end: 16px;
}
}
.e9cb00d6250845ad-compact .e9cb00d6250845ad-amount {
align-items: flex-end;
flex-direction: column-reverse;
justify-content: space-between;
width: 20%;
}
.e9cb00d6250845ad-compact .e9cb00d6250845ad-summaryInfo {
padding: 16px 20px;
}
.e9cb00d6250845ad-compact .e9cb00d6250845ad-amount,
.e9cb00d6250845ad-compact .e9cb00d6250845ad-date,
.e9cb00d6250845ad-compact .e9cb00d6250845ad-description {
text-transform: unset;
}
.e9cb00d6250845ad-compact .e9cb00d6250845ad-date {
opacity: 0.6;
}
.e9cb00d6250845ad-compact .e9cb00d6250845ad-descriptionIcon {
height: 40px;
width: 40px;
}
.e9cb00d6250845ad-compact .e9cb00d6250845ad-statusTag {
margin: 8px 0 0;
}
.e9cb00d6250845ad-compact .e9cb00d6250845ad-expand {
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
.e9cb00d6250845ad-compact .e9cb00d6250845ad-date {
font-size: 12px;
line-height: 16px;
width: unset;
}
.e9cb00d6250845ad-compact .e9cb00d6250845ad-description {
flex: 1 1 55%;
text-transform: unset;
width: unset;
}
.e9cb00d6250845ad-refundActions {
align-items: flex-end;
display: flex;
justify-content: space-between;
}
.e9cb00d6250845ad-refundIconContainer,
.e9cb00d6250845ad-refundRules {
display: flex;
}
.e9cb00d6250845ad-copiableContainer {
cursor: pointer;
}
.e9cb00d6250845ad-paymentInfo {
display: flex;
justify-content: space-between;
}
.e9cb00d6250845ad-divider {
border-top: 1px solid var(--interactive-background-hover);
margin-bottom: 16px;
margin-top: 16px;
width: 100%;
}
.e9cb00d6250845ad-sectionDivider {
margin-bottom: 20px;
margin-top: 20px;
}
.e9cb00d6250845ad-guildProductBenefits {
background-color: var(--background-base-lower);
border-radius: 8px;
padding: 16px;
}
.e9cb00d6250845ad-guildProductBenefitLabel {
margin-bottom: 12px;
text-transform: uppercase;
}
.e9cb00d6250845ad-warningBlock {
align-items: center;
overflow: auto;
width: 100%;
}
._43963ae61224cded-descriptionWrapper {
-webkit-margin-start: 14px;
margin-inline-start: 14px;
}
._43963ae61224cded-subText {
margin-top: 4px;
}
._43963ae61224cded-indicator {
align-items: center;
display: flex;
font-size: 11px;
height: 14px;
padding: 0 4px;
-webkit-margin-start: 8px;
border-radius: 3px;
font-weight: var(--font-weight-bold);
letter-spacing: 0.4px;
margin-inline-start: 8px;
text-align: center;
text-transform: uppercase;
}
._43963ae61224cded-defaultIndicator {
background-color: var(--primary-500);
}
._43963ae61224cded-defaultIndicator,
._43963ae61224cded-premiumIndicator {
color: var(--white);
}
._43963ae61224cded-premiumIndicator {
background-color: var(--brand-500);
}
._43963ae61224cded-invalidIndicator {
background-color: var(--red-400);
color: var(--white);
}
._01014d2e38bd7c76-paymentPane {
background-color: var(--background-surface-high);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
color: var(--text-strong);
overflow: hidden;
}
._01014d2e38bd7c76-paymentRow {
cursor: default;
}
._01014d2e38bd7c76-paymentRowHeader {
font-size: 12px;
font-weight: var(--font-weight-semibold);
-webkit-margin-end: 44px;
margin-inline-end: 44px;
padding: 20px;
}
._01014d2e38bd7c76-paymentRowHeaderDescription {
display: flex;
flex: 1 1 50%;
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
._01014d2e38bd7c76-tab {
padding-bottom: 12px;
-webkit-margin-start: 12px;
font-size: 14px;
font-weight: var(--font-weight-semibold);
margin-inline-start: 12px;
}
._01014d2e38bd7c76-tab:first-child {
-webkit-margin-start: 0;
margin-inline-start: 0;
}
._01014d2e38bd7c76-externalRow {
border-radius: 5px;
display: flex;
flex-direction: column;
margin-bottom: 20px;
padding: 20px;
}
._01014d2e38bd7c76-externalRowHeader {
color: var(--text-default);
font-size: 16px;
}
._01014d2e38bd7c76-externalRowBody {
color: var(--text-muted);
font-size: 14px;
line-height: 18px;
margin-top: 8px;
}
._01014d2e38bd7c76-bottomDivider {
border-bottom: 1px solid var(--border-subtle);
}
._01014d2e38bd7c76-bottomDivider:last-child {
border-bottom: none;
}
._01014d2e38bd7c76-verticalFit {
display: flex;
flex: 1 1 auto;
flex-direction: column;
overflow: hidden;
}
.f0c2eabbce28c92d-formError {
margin-bottom: 20px;
}
.f0c2eabbce28c92d-card {
padding: 20px;
}
.f0c2eabbce28c92d-formActions {
-moz-column-gap: 2px;
column-gap: 2px;
display: flex;
flex-wrap: wrap;
row-gap: 10px;
}
.f0c2eabbce28c92d-addressSection,
.f0c2eabbce28c92d-formActions {
margin-top: 20px;
}
.f0c2eabbce28c92d-defaultSection {
margin: var(--space-12) 0;
}
.f0c2eabbce28c92d-defaultCheckboxLabel {
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
.f0c2eabbce28c92d-sectionHeader {
color: var(--text-muted);
margin-bottom: 10px;
}
.f0c2eabbce28c92d-subText {
color: var(--text-muted);
font-size: 14px;
margin-top: 20px;
}
.f0c2eabbce28c92d-errorSubText {
color: var(--red-400);
}
.f0c2eabbce28c92d-disabledTooltipWrapper {
position: relative;
}
.f0c2eabbce28c92d-disabledTooltipTarget {
cursor: not-allowed;
inset: 0;
position: absolute;
z-index: 1;
}
._0eeeeda0f47c3f1e-paymentSourceRow {
justify-content: space-between;
margin: 16px 0;
}
._0eeeeda0f47c3f1e-header,
._0eeeeda0f47c3f1e-paymentSourceRow {
align-items: center;
display: flex;
}
._0eeeeda0f47c3f1e-subText {
color: var(--primary-400);
font-size: 14px;
margin-top: 4px;
}
._0eeeeda0f47c3f1e-footer {
display: flex;
justify-content: flex-end;
margin-top: 20px;
}
._0eeeeda0f47c3f1e-footerContent {
flex: 1;
}
._0eeeeda0f47c3f1e-titleContainer {
align-items: center;
display: flex;
}
._0eeeeda0f47c3f1e-lockIcon {
-webkit-margin-end: var(--space-4);
margin-inline-end: var(--space-4);
}
.a706ba33cbeb179a-syncing {
align-items: center;
display: flex;
height: 300px;
justify-content: center;
}
.a706ba33cbeb179a-paymentHistory {
margin-top: 40px;
}
.a706ba33cbeb179a-codeRedemptionRedirect {
margin-top: var(--space-32);
}
._02fc893000d95af1-wrapper {
position: relative;
}
._02fc893000d95af1-inner {
background-color: transparent;
background-position: 50%;
background-repeat: no-repeat;
background-size: 28px 28px;
border-radius: var(--radius-sm);
height: 44px;
justify-content: center;
width: 44px;
}
._02fc893000d95af1-inner:hover {
background-color: #99aab54d;
border-color: transparent;
cursor: pointer;
}
._02fc893000d95af1-inner:disabled {
opacity: 0.3;
pointer-events: none;
}
._02fc893000d95af1-ellipsis {
align-items: center;
display: flex;
inset: 0;
justify-content: center;
position: absolute;
}
._02fc893000d95af1-spinnerItem {
background-color: #4f545c;
}
.enable-forced-colors ._02fc893000d95af1-inner {
border: 1px solid ButtonFace;
}
.enable-forced-colors ._02fc893000d95af1-inner:focus,
.enable-forced-colors ._02fc893000d95af1-inner:hover {
background-color: ButtonFace;
border-color: ButtonText;
}
.enable-forced-colors ._02fc893000d95af1-inner:disabled {
opacity: 0.3;
pointer-events: none;
}
._0d7935199308d4a9-container {
align-items: center;
background: var(--background-secondary-alt);
border-radius: var(--radius-sm);
display: flex;
flex-direction: row;
padding: 24px 12px;
}
._0d7935199308d4a9-textContainer {
margin: 0 12px;
}
._0d7935199308d4a9-headerText {
align-items: center;
display: flex;
flex-direction: row;
}
._0d7935199308d4a9-newBadge {
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
.c7f964e7e0fc8b47-banner {
filter: saturate(var(--saturation-factor, 1));
height: 180px;
margin-top: -32px;
width: 180px;
}
.c7f964e7e0fc8b47-connectionsContainer {
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
padding: var(--space-8) 0;
}
.c7f964e7e0fc8b47-accountButtonInner {
background-color: var(--control-secondary-background-default);
border: 1px solid var(--control-secondary-border-default);
}
.c7f964e7e0fc8b47-accountButtonInner:hover {
background-color: var(--control-secondary-background-hover);
border-color: var(--control-secondary-border-hover);
}
.c7f964e7e0fc8b47-accountAddWrapper {
position: relative;
}
.c7f964e7e0fc8b47-accountAddInner {
align-items: center;
background-position: 50%;
background-repeat: no-repeat;
background-size: 28px 28px;
border-radius: var(--radius-sm);
color: var(--control-secondary-icon-default);
display: flex;
height: 44px;
justify-content: center;
width: 44px;
}
.c7f964e7e0fc8b47-accountAddInner:hover {
background-color: var(--control-secondary-background-hover);
border-color: var(--control-secondary-border-hover);
cursor: pointer;
}
.c7f964e7e0fc8b47-accountAddInner:disabled {
opacity: 0.5;
pointer-events: none;
}
.c7f964e7e0fc8b47-connectionList {
display: grid;
grid-gap: 24px;
}
.c7f964e7e0fc8b47-connection {
background-color: var(--background-surface-high);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
display: flex;
flex-direction: column;
gap: var(--space-20);
padding: var(--space-16);
width: 100%;
}
.c7f964e7e0fc8b47-connectionUserSettingsRedesign {
background-color: var(--background-mod-subtle);
}
.c7f964e7e0fc8b47-connectionHeader {
align-items: center;
border-radius: 8px 8px 0 0;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
position: relative;
}
.c7f964e7e0fc8b47-connectionHeader .c7f964e7e0fc8b47-connectionAccountValue {
color: var(--text-strong);
-webkit-margin-start: 16px;
margin-inline-start: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.c7f964e7e0fc8b47-connectionAccountLabelContainer {
align-items: center;
display: flex;
flex-direction: row;
}
.c7f964e7e0fc8b47-connectionAccountLabelVerified {
-webkit-margin-start: 4px;
height: 16px;
margin-inline-start: 4px;
width: 20px;
}
.c7f964e7e0fc8b47-connectionAccountLabel {
-webkit-margin-start: 16px;
margin-inline-start: 16px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.c7f964e7e0fc8b47-connectionIcon {
-webkit-user-drag: none;
height: 32px;
width: 32px;
}
.c7f964e7e0fc8b47-connectionOptions {
display: flex;
flex-direction: column;
gap: var(--space-20);
}
.c7f964e7e0fc8b47-integrationsWrapper {
padding: 20px;
}
.c7f964e7e0fc8b47-integrationsWrapper a {
color: var(--text-default);
}
.c7f964e7e0fc8b47-integrationWrapper {
background: var(--background-secondary-alt);
border-radius: var(--radius-sm);
margin-top: 8px;
padding: 16px;
}
.c7f964e7e0fc8b47-integration {
align-items: center;
display: flex;
justify-content: space-between;
}
.c7f964e7e0fc8b47-integration .c7f964e7e0fc8b47-guildIcon {
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
.c7f964e7e0fc8b47-integrationError {
display: flex;
justify-content: center;
}
.c7f964e7e0fc8b47-integrationInner {
display: flex;
flex: 1;
flex-direction: column;
}
.c7f964e7e0fc8b47-integrationInner .c7f964e7e0fc8b47-channelLink {
color: var(--text-default);
font-size: 12px;
}
.c7f964e7e0fc8b47-connectionDelete {
align-self: center;
color: var(--interactive-text-default);
cursor: pointer;
margin: 0 8px;
}
.c7f964e7e0fc8b47-connectionDelete:hover {
color: var(--interactive-text-hover);
}
.c7f964e7e0fc8b47-integrationRevoked {
font-weight: var(--font-weight-semibold);
}
.c7f964e7e0fc8b47-integrationRevoked a {
color: var(--text-link);
}
.c7f964e7e0fc8b47-metadataContainer {
align-content: flex-start;
background-color: var(--background-mod-muted);
border: 1px solid var(--border-muted);
border-radius: var(--radius-sm);
display: flex;
flex-direction: row;
padding: var(--space-8);
}
.c7f964e7e0fc8b47-metadataItem {
align-self: center;
margin-top: 0 !important;
}
.c7f964e7e0fc8b47-metadataRefreshButton {
align-self: center;
-webkit-margin-start: auto;
margin-inline-start: auto;
}
.enable-forced-colors .c7f964e7e0fc8b47-connection {
border: 1px solid CanvasText;
}
.enable-forced-colors .c7f964e7e0fc8b47-connectionHeader {
border-bottom: 1px solid CanvasText;
}
.enable-forced-colors .c7f964e7e0fc8b47-connectionDelete {
background-color: ButtonFace;
border: 1px solid ButtonFace;
color: ButtonText;
}
.enable-forced-colors .c7f964e7e0fc8b47-connectionDelete:focus,
.enable-forced-colors .c7f964e7e0fc8b47-connectionDelete:hover {
border-color: ButtonText;
}
.c7f964e7e0fc8b47-connectedAccountVanityMetadataCreatedAt {
align-items: center;
display: flex;
}
.c7f964e7e0fc8b47-connectionMetadataUpsellTag {
align-self: center;
padding: 0 6px;
}
.c7f964e7e0fc8b47-connectionMetadataUpsellDescription {
align-self: center;
padding: 0 4px;
}
.c7f964e7e0fc8b47-sparkleContainer {
position: relative;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
.c7f964e7e0fc8b47-sparkleTop {
inset-inline-start: -6px;
top: -8px;
}
.c7f964e7e0fc8b47-sparkleBottom,
.c7f964e7e0fc8b47-sparkleTop {
position: absolute;
z-index: 2;
}
.c7f964e7e0fc8b47-sparkleBottom {
bottom: -6px;
inset-inline-end: -4px;
}
.c7f964e7e0fc8b47-infoBox {
margin-top: 16px;
}
._7cd2dbb42fe46bb5-settingsItemHighlight {
border: 1px solid transparent;
border-radius: var(--radius-xs);
bottom: -8px;
position: absolute;
top: -8px;
inset-inline: -8px;
}
._7cd2dbb42fe46bb5-settingsBackgroundFlashElement {
position: relative;
}
._6b700314f042841a-container {
gap: var(--space-16);
}
._6b700314f042841a-container,
._6b700314f042841a-header {
display: flex;
flex-direction: column;
}
._6b700314f042841a-header {
gap: var(--space-4);
}
._6b700314f042841a-description._6b700314f042841a-disabled,
._6b700314f042841a-title._6b700314f042841a-disabled {
cursor: not-allowed;
opacity: 0.6;
}
.enable-forced-colors ._6b700314f042841a-title._6b700314f042841a-disabled {
opacity: 1;
}
.enable-forced-colors ._6b700314f042841a-description._6b700314f042841a-disabled {
color: GrayText;
opacity: 1;
}
._657261f65e80a862-categorySubGroup {
display: flex;
flex-direction: column;
gap: var(--space-16);
}
._657261f65e80a862-categorySubGroup:empty {
display: none;
}
.de806995aea91de8-header {
background-color: var(--background-surface-higher);
border-radius: var(--radius-sm);
}
.de806995aea91de8-gameNamesHeader {
gap: 24px;
justify-content: space-between;
min-height: 36px;
padding: var(--space-8) var(--space-12);
}
.de806995aea91de8-gameIcons,
.de806995aea91de8-gameNamesHeader {
align-items: center;
display: flex;
}
.de806995aea91de8-gameIcons {
flex: 0;
flex-direction: row;
gap: var(--space-8);
min-height: 56px;
padding: var(--space-12);
}
.de806995aea91de8-divider {
background-color: var(--border-subtle);
height: 1px;
width: 100%;
}
.de806995aea91de8-icon {
border-radius: var(--radius-xs);
height: 32px;
width: 32px;
}
.de806995aea91de8-moreIcon {
background-color: var(--background-base-lowest);
justify-content: center;
}
.de806995aea91de8-manageGamesLink,
.de806995aea91de8-moreIcon {
align-items: center;
display: flex;
}
.de806995aea91de8-manageGamesLink {
cursor: pointer;
}
.de806995aea91de8-manageGamesChevron {
margin-top: 1px;
}
.de806995aea91de8-emptyContainer {
align-items: center;
background-color: var(--background-surface-higher);
border-radius: var(--radius-sm);
display: flex;
flex-direction: column;
gap: var(--space-8);
justify-content: center;
padding: var(--space-48) 0;
}
.de806995aea91de8-noGamesConnectedText {
text-transform: uppercase;
}
.b476ba9066043148-guildSelectOptionIcon {
border-radius: var(--radius-sm);
}
.b476ba9066043148-searchableSelect {
align-items: center;
}
.b476ba9066043148-clydeIconContainer {
align-items: center;
background-color: var(--background-brand);
border-radius: var(--radius-sm);
display: flex;
height: 24px;
justify-content: center;
width: 24px;
}
._5cea9da4c2ca012f-card {
background-color: var(--background-base-lower);
border-radius: var(--radius-sm);
box-shadow: var(--elevation-low);
overflow: hidden;
}
._5cea9da4c2ca012f-header {
align-items: center;
background-color: var(--background-secondary-alt);
display: flex;
gap: var(--space-8);
height: 72px;
padding: var(--space-16);
}
._5cea9da4c2ca012f-text {
display: flex;
flex: 1;
flex-direction: column;
}
._5cea9da4c2ca012f-iconContainer {
align-items: center;
background-color: var(--interactive-background-active);
border-radius: var(--radius-round);
display: flex;
padding: var(--space-8);
}
._5cea9da4c2ca012f-usersList {
padding-inline: var(--space-16);
}
._5cea9da4c2ca012f-row {
align-items: center;
border-bottom: 1px solid var(--border-subtle);
display: flex;
flex-direction: row;
justify-content: space-between;
padding-bottom: var(--space-16);
padding-top: var(--space-16);
}
._5cea9da4c2ca012f-lastRow {
border-bottom: none;
}
._5cea9da4c2ca012f-userInfo {
align-items: center;
display: flex;
gap: var(--space-8);
}
._5cea9da4c2ca012f-loadMoreContainer {
padding-bottom: var(--space-16);
}
._5cea9da4c2ca012f-loadMoreButton,
._5cea9da4c2ca012f-loadMoreContainer {
display: flex;
justify-content: center;
}
._5cea9da4c2ca012f-loadMoreButton {
align-items: center;
background-color: var(--interactive-muted);
border-radius: 0 0 var(--radius-xs) var(--radius-xs);
cursor: pointer;
padding-bottom: var(--space-4);
padding-top: var(--space-4);
width: 40%;
}
._0e12499149bf3155-rowContainer {
display: flex;
gap: var(--space-8);
-webkit-margin-end: var(--space-4);
align-items: center;
margin-inline-end: var(--space-4);
}
.b2fe93c012a5f3c1-select {
min-width: 140px;
}
.b2fe93c012a5f3c1-selectItemRow {
align-items: center;
border-bottom: 1px solid var(--border-subtle);
display: grid;
grid-template-columns: 1fr auto;
padding: var(--space-4) 0;
}
.b2fe93c012a5f3c1-title {
min-width: 0;
}
._907671aad6fb9c77-tabs {
margin-top: var(--space-12);
}
._9536c08fb775ae35-safetySettingsNotice {
align-items: center;
background: var(--background-base-lowest);
border-radius: var(--radius-xs);
display: flex;
gap: var(--space-8);
padding: var(--space-16);
}
._9536c08fb775ae35-safetySettingsNotice ._9536c08fb775ae35-closeButton {
-webkit-margin-start: auto;
cursor: pointer;
margin-inline-start: auto;
}
._2023f83bda32c54a-card {
padding: var(--space-16);
}
._2023f83bda32c54a-button {
display: flex;
}
._89d8032fe92992ee-item {
background-color: var(--background-accent);
border-radius: 8px;
margin-bottom: 20px;
overflow: hidden;
}
._89d8032fe92992ee-row {
display: flex;
height: 68px;
padding: 16px;
}
._89d8032fe92992ee-divider {
background-color: var(--border-subtle);
height: 1px;
margin: 0 16px;
}
._89d8032fe92992ee-section {
align-items: center;
background-color: var(--background-secondary-alt);
display: flex;
height: 72px;
padding: 16px;
}
._89d8032fe92992ee-avatar {
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
._89d8032fe92992ee-text {
display: flex;
flex: 1;
flex-direction: column;
}
._89d8032fe92992ee-icon,
._89d8032fe92992ee-username {
cursor: pointer;
}
._89d8032fe92992ee-icon {
align-items: center;
border-radius: 16px;
display: flex;
height: 32px;
justify-content: center;
width: 32px;
}
.full-motion ._89d8032fe92992ee-icon {
transition: background 0.1s ease-in-out;
}
._89d8032fe92992ee-icon:hover {
background-color: var(--interactive-background-selected);
}
._89d8032fe92992ee-sectionIconContainer {
background-color: var(--background-base-lower);
}
._52575e25551a413e-item {
background-color: var(--background-accent);
border-radius: var(--radius-sm);
margin-bottom: 20px;
overflow: hidden;
}
.e18686589e1e1110-button {
align-items: center;
color: var(--icon-subtle);
display: flex;
justify-content: center;
transition: color 0.2s ease;
}
.e18686589e1e1110-button:hover {
color: var(--icon-strong);
}
.enable-forced-colors .e18686589e1e1110-button {
background-color: ButtonFace;
border: 1px solid ButtonText;
}
._0bec3598bf5acffa-container {
height: 100%;
inset-inline-start: 0;
pointer-events: none;
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
}
._0bec3598bf5acffa-gridOverlay {
height: 100%;
width: 100%;
--custom-grid-line-width: 0.3px;
--custom-grid-vertical-lines: linear-gradient(to right, var(--custom-grid-line-color) var(--custom-grid-line-width), transparent var(--custom-grid-line-width));
--custom-grid-horizontal-lines: linear-gradient(to bottom, var(--custom-grid-line-color) var(--custom-grid-line-width), transparent var(--custom-grid-line-width));
--custom-grid-line-color: var(--border-normal);
}
._0bec3598bf5acffa-gridOverlay[data-horizontal="true"][data-vertical="true"] {
background-image: var(--custom-grid-horizontal-lines), var(--custom-grid-vertical-lines);
background-position:
0 var(--custom-grid-vertical-spacing),
var(--custom-grid-horizontal-spacing) 0;
background-size: var(--custom-grid-horizontal-spacing) var(--custom-grid-vertical-spacing);
}
._0bec3598bf5acffa-gridOverlay[data-horizontal="true"][data-vertical="false"] {
background-image: var(--custom-grid-horizontal-lines);
background-position:
0 var(--custom-grid-horizontal-spacing),
var(--custom-grid-horizontal-spacing) 0;
background-size: var(--custom-grid-horizontal-spacing) var(--custom-grid-horizontal-spacing);
}
._0bec3598bf5acffa-gridOverlay[data-horizontal="false"][data-vertical="true"] {
background-image: var(--custom-grid-vertical-lines);
background-position:
0 var(--custom-grid-vertical-spacing),
var(--custom-grid-vertical-spacing) 0;
background-size: var(--custom-grid-vertical-spacing) var(--custom-grid-vertical-spacing);
}
@media (-webkit-max-device-pixel-ratio: 1.5), (max-resolution: 1.5x) {
._0bec3598bf5acffa-gridOverlay {
--custom-grid-line-width: 1px;
}
}
._6be08733343237f7-item {
position: relative;
}
._6be08733343237f7-removeBuildOverride {
inset-inline-end: -31px;
opacity: 0;
position: absolute;
top: -12px;
}
._6be08733343237f7-buildOverrideGroup {
margin-top: -1px;
padding-bottom: 20px;
padding-top: 20px;
position: relative;
}
._6be08733343237f7-buildOverrideGroup:hover ._6be08733343237f7-removeBuildOverride {
opacity: 1;
}
._6be08733343237f7-divider {
margin-bottom: 20px;
}
._6be08733343237f7-buildOverrideList {
display: grid;
gap: 16px;
grid-template-columns: 1fr 1fr;
padding-bottom: 16px;
}
._6be08733343237f7-removeBuildOverrideDisabled {
cursor: not-allowed;
filter: grayscale(100%);
opacity: 0.75;
}
.theme-light ._6be08733343237f7-row {
box-shadow: inset 0 -1px 0 hsl(var(--primary-300-hsl) / 0.3);
}
.theme-dark ._6be08733343237f7-row {
box-shadow: inset 0 -1px 0 hsl(var(--primary-400-hsl) / 0.3);
}
._6be08733343237f7-buttonsContainer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
}
._6be08733343237f7-surveyOverride {
display: flex;
}
._6be08733343237f7-surveyOverrideInput {
-webkit-margin-end: 20px;
flex-grow: 1;
margin-inline-end: 20px;
}
._6be08733343237f7-key {
background-color: var(--background-accent);
border: 1px solid var(--background-base-low);
border-radius: var(--radius-xs);
box-shadow: inset 0 -4px 0 var(--background-base-lowest);
display: inline-block;
font-size: 12px;
font-weight: var(--font-weight-semibold);
height: 23px;
line-height: 12px;
padding: 3px 6px 4px;
text-align: center;
text-transform: uppercase;
}
._6be08733343237f7-codebox {
background: none;
max-height: 380px;
}
.b846e57d7dad7f1a-card {
position: relative;
}
.b846e57d7dad7f1a-card:before {
background-color: var(--interactive-background-hover);
border: 1px solid var(--border-subtle);
border-radius: 5px;
content: "";
position: absolute;
top: 0;
inset-inline: -20px;
bottom: -1px;
opacity: 0;
transition: opacity 0.1s ease;
}
.b846e57d7dad7f1a-card.b846e57d7dad7f1a-active:before,
.b846e57d7dad7f1a-card:focus-within:before,
.b846e57d7dad7f1a-card:hover:before {
opacity: 1;
}
.f06a86efca18b62f-category {
display: flex;
flex-direction: column;
}
.f06a86efca18b62f-category:last-child .f06a86efca18b62f-categoryDivider {
display: none;
}
.f06a86efca18b62f-categoryHeader {
gap: var(--space-8);
margin-bottom: var(--space-16);
}
.f06a86efca18b62f-categoryContent,
.f06a86efca18b62f-categoryHeader {
display: flex;
flex-direction: column;
}
.f06a86efca18b62f-categoryContent {
gap: var(--space-32);
}
.f06a86efca18b62f-categoryDivider {
margin-bottom: var(--space-32);
margin-top: var(--space-32);
}
._9f3276897d1533c1-categorySubGroup {
display: flex;
flex-direction: column;
gap: var(--space-16);
}
._9f3276897d1533c1-categorySubGroup:empty {
display: none;
}
._909810beef5307f9-counter {
background-color: var(--background-surface-highest);
border: 1px solid var(--border-muted);
border-radius: var(--radius-md);
box-shadow: none;
flex-direction: column;
padding: 10px 20px 12px;
}
._909810beef5307f9-counter,
._909810beef5307f9-textRow {
align-items: center;
display: flex;
}
._909810beef5307f9-info {
color: var(--text-default);
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
._909810beef5307f9-counterText,
._909810beef5307f9-tooltip {
text-align: center;
}
._96cb99723c42478c-container {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
._96cb99723c42478c-guildAvatar {
align-items: center;
background-color: var(--primary-600);
border-radius: var(--radius-md);
color: var(--white);
display: flex;
font-weight: 600;
height: 40px;
justify-content: center;
width: 40px;
}
._0d70667cfb8ac94b-container {
align-items: center;
border-bottom: 1px solid var(--border-subtle);
display: flex;
padding-bottom: 12px;
padding-top: 12px;
}
._0d70667cfb8ac94b-descriptors {
-webkit-margin-start: 10px;
margin-inline-start: 10px;
}
._0d70667cfb8ac94b-header {
align-items: center;
display: flex;
}
._0d70667cfb8ac94b-guildBadge {
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
._0d70667cfb8ac94b-childWrapper {
align-items: center;
background-color: var(--background-surface-highest);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
color: var(--text-default);
display: flex;
height: 40px;
justify-content: center;
width: 40px;
}
._0d70667cfb8ac94b-acronym {
font-weight: var(--font-weight-medium);
line-height: 1.2em;
white-space: nowrap;
}
.c408751bed08a47b-container {
align-items: center;
border-bottom: 1px solid var(--border-subtle);
display: flex;
gap: var(--space-12);
padding-bottom: var(--space-12);
padding-top: var(--space-12);
}
.c408751bed08a47b-purchasePlaceholder {
align-items: center;
background: var(--background-mod-normal, hsla(240, 4%, 61%, 0.16));
border-radius: 4px;
display: flex;
justify-content: center;
}
.c408751bed08a47b-avatarDecorationPreview,
.c408751bed08a47b-nameplatePreview,
.c408751bed08a47b-purchasePlaceholder {
height: 40px;
width: 40px;
}
.c408751bed08a47b-nameplatePreview {
object-fit: cover;
object-position: right;
}
._30f35cee7b2aae26-avatarPairContainer {
display: flex;
}
._30f35cee7b2aae26-avatarPair,
._30f35cee7b2aae26-avatarPairContainer {
align-items: center;
justify-content: center;
}
._30f35cee7b2aae26-avatarPair {
background-color: var(--background-surface-higher);
border: 1px solid var(--border-muted);
border-radius: 100px;
box-shadow: none;
display: inline-flex;
gap: var(--space-12);
margin-bottom: var(--space-8);
padding: var(--space-8);
}
._414451690c289489-container {
align-items: center;
border-bottom: 1px solid var(--border-subtle);
display: flex;
padding-bottom: 12px;
padding-top: 12px;
}
._414451690c289489-descriptors {
-webkit-margin-start: 10px;
margin-inline-start: 10px;
}
._7b869fd0e7b8e91a-username {
color: var(--text-strong);
}
._7b869fd0e7b8e91a-discriminator {
color: var(--text-muted);
}
._7b869fd0e7b8e91a-fill {
max-width: 100%;
}
._379fecbe512dfddb-image {
width: 243px;
}
._379fecbe512dfddb-empty {
text-align: center;
}
._339c43c6b95c76c4-container {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
._333b3ea32cf2e64d-container {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
}
._333b3ea32cf2e64d-container > div {
flex: 1;
}
._333b3ea32cf2e64d-sectionHeader {
margin-bottom: var(--space-16);
}
._333b3ea32cf2e64d-avatarList {
display: flex;
gap: var(--space-8);
}
._333b3ea32cf2e64d-actionSection {
margin-bottom: var(--space-8);
}
._333b3ea32cf2e64d-guildRow,
._333b3ea32cf2e64d-userRow {
border: 0;
padding-bottom: 0;
padding-top: 0;
}
._38524e4c5f939069-container {
max-width: 800px;
}
._38524e4c5f939069-connectedCounter {
display: flex;
margin-bottom: var(--space-12);
}
._38524e4c5f939069-icon {
color: var(--text-default);
margin-inline: var(--space-4);
}
._38524e4c5f939069-tooltip {
cursor: pointer;
}
._38524e4c5f939069-header {
align-items: center;
border-bottom: 1px solid var(--border-muted);
box-shadow: none;
display: flex;
padding: var(--space-12);
}
._38524e4c5f939069-headerText {
-webkit-margin-start: var(--space-12);
margin-inline-start: var(--space-12);
overflow: hidden;
width: 100%;
}
._38524e4c5f939069-activityCounterRow {
display: grid;
gap: var(--space-8);
grid-template-columns: repeat(12, 1fr);
}
._38524e4c5f939069-activityCounterRow > div:first-child {
grid-column: 1 / span 12;
}
._38524e4c5f939069-activityCounterRow > div:nth-child(n + 2) {
grid-column: span 6;
}
@media (min-width: 900px) {
._38524e4c5f939069-activityCounterRow > div:first-child {
grid-column: 1 / span 4;
}
._38524e4c5f939069-activityCounterRow > div:nth-child(2) {
grid-column: 5 / span 4;
}
._38524e4c5f939069-activityCounterRow > div:nth-child(3) {
grid-column: 9 / span 4;
}
._38524e4c5f939069-activityCounterRow > div:nth-child(n + 4) {
grid-column: span 3;
grid-row-start: 2;
}
}
._38524e4c5f939069-activityOverview {
display: flex;
flex-direction: column;
gap: var(--space-32);
}
._38524e4c5f939069-emptyActivity {
align-self: center;
margin-top: var(--space-32);
}
._38524e4c5f939069-actionSection {
margin-bottom: var(--space-8);
}
._38524e4c5f939069-actions {
max-height: 105px;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
}
._38524e4c5f939069-actions:last-of-type :last-child {
border-bottom: none;
padding-bottom: 0;
}
._38524e4c5f939069-loadMoreBar {
align-items: center;
background-color: var(--interactive-muted);
border-radius: 0 0 8px 8px;
cursor: pointer;
display: flex;
justify-content: center;
margin: 0 auto;
max-width: 30%;
}
._38524e4c5f939069-loadMore {
padding-bottom: var(--space-4);
padding-top: var(--space-4);
}
._38524e4c5f939069-spinner {
padding-bottom: var(--space-12);
padding-top: var(--space-12);
}
._38524e4c5f939069-sectionDescription,
._38524e4c5f939069-sectionHeader {
margin-bottom: var(--space-4);
}
._38524e4c5f939069-accountRow {
align-items: center;
display: flex;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
-webkit-margin-end: var(--space-4);
margin-inline-end: var(--space-4);
}
._38524e4c5f939069-select {
border-radius: var(--radius-xs);
min-width: 240px;
}
._38524e4c5f939069-disabled {
cursor: not-allowed;
opacity: 0.6;
pointer-events: none;
}
.f8c98cc3d7c1bc42-box {
background-color: var(--background-surface-high);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
box-shadow: none;
}
._6fa7bd68e669a73c-backButton {
align-items: center;
cursor: pointer;
display: flex;
gap: var(--space-4);
}
._6fa7bd68e669a73c-teenSelector {
display: flex;
justify-content: flex-end;
}
._6fa7bd68e669a73c-titleContainer {
flex: 1;
flex-shrink: 0;
}
._6fa7bd68e669a73c-grow {
flex: 1;
}
._3f3a26c56db2976b-tabs {
margin-top: var(--space-12);
}
._5dbf818b58a61b59-container {
align-items: center;
border-radius: 12px;
box-shadow: var(--elevation-low);
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 24px;
text-align: center;
}
@media (min-width: 485px) {
._5dbf818b58a61b59-container {
align-items: flex-start;
flex-direction: row;
padding: 32px;
text-align: start;
}
}
._5dbf818b58a61b59-row {
display: flex;
justify-content: space-between;
}
._5dbf818b58a61b59-headerText {
max-width: 364px;
}
._5dbf818b58a61b59-headerText > * {
margin-bottom: 6px;
}
._5dbf818b58a61b59-headerText > :last-child {
margin-bottom: 0;
}
._5dbf818b58a61b59-headerImage {
align-self: center;
margin-top: 32px;
-webkit-padding-start: 16px;
padding-inline-start: 16px;
}
@media (min-width: 900px) {
._5dbf818b58a61b59-headerImage {
margin-top: 0;
}
}
._5dbf818b58a61b59-button {
display: flex;
justify-content: center;
margin-top: 16px;
}
@media (min-width: 900px) {
._5dbf818b58a61b59-button {
justify-content: flex-start;
}
}
._0624fc41b766635c-row {
align-items: center;
background-color: var(--background-base-lowest);
border: 1px solid var(--border-muted);
border-radius: var(--radius-md);
display: flex;
padding: var(--space-16) var(--space-12);
}
._0624fc41b766635c-inModal {
background-color: var(--background-base-lower);
}
._0624fc41b766635c-inModal ._0624fc41b766635c-icon-container {
background-color: var(--background-base-lowest);
}
._0624fc41b766635c-positive {
color: var(--text-feedback-positive);
}
._0624fc41b766635c-negative {
color: var(--status-danger);
}
._0624fc41b766635c-groupHeader {
margin-bottom: 10px;
}
._0624fc41b766635c-groupHeader:not(:first-child) {
margin-top: 28px;
}
._0624fc41b766635c-header {
margin-bottom: var(--space-4);
}
._0624fc41b766635c-iconContainer {
align-items: center;
border-radius: 50%;
display: flex;
flex-shrink: 0;
height: 40px;
justify-content: center;
width: 40px;
-webkit-margin-end: var(--space-8);
background-color: var(--background-mod-subtle);
border: 1px solid var(--border-subtle);
margin-inline-end: var(--space-8);
}
._5b32177e89c63961-max-width {
max-width: auto;
}
@media (min-width: 900px) {
._5b32177e89c63961-max-width {
max-width: 800px;
}
}
._5b32177e89c63961-container {
box-sizing: border-box;
flex-direction: column;
margin-top: var(--space-12);
}
@media (min-width: 900px) {
._5b32177e89c63961-container {
padding: var(--space-32);
}
}
._8cc9a9c411c88ba2-container {
align-items: center;
display: flex;
flex-direction: row;
padding: 20px;
}
@media (min-width: 900px) {
._8cc9a9c411c88ba2-container {
align-items: flex-start;
flex-direction: column;
}
}
._8cc9a9c411c88ba2-box {
box-shadow: var(--elevation-low);
display: flex;
flex-direction: column;
padding: 20px;
}
._8cc9a9c411c88ba2-circle {
align-items: center;
border-radius: var(--radius-round);
display: flex;
height: 36px;
justify-content: center;
margin-bottom: 10px;
width: 36px;
-webkit-margin-end: 12px;
background-color: var(--background-mod-subtle);
border: 1px solid var(--border-subtle);
margin-inline-end: 12px;
}
._8cc9a9c411c88ba2-icon {
color: var(--text-strong);
}
._8cc9a9c411c88ba2-header {
margin-bottom: 6px;
}
._9c880b3dfc2260a9-container {
max-width: 800px;
}
._9c880b3dfc2260a9-parentalControlsTeenRow {
margin-top: var(--space-24);
}
._9c880b3dfc2260a9-divider {
margin: 0;
}
._8e680ffe35110238-container {
display: flex;
flex-direction: column;
gap: var(--space-32);
overflow: hidden;
}
._8e680ffe35110238-max-width {
max-width: 800px;
}
._8e680ffe35110238-banner,
._8e680ffe35110238-featureCards {
}
._8e680ffe35110238-featureCards {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 12px;
}
@media (min-width: 900px) {
._8e680ffe35110238-featureCards {
flex-direction: row;
}
}
.d9752cdd50c7181f-actionButton {
align-items: center;
border-radius: 50%;
color: var(--interactive-text-default);
cursor: pointer;
display: flex;
height: 36px;
justify-content: center;
width: 36px;
-webkit-margin-start: 10px;
background-color: var(--background-surface-highest);
border: 1px solid var(--border-subtle);
margin-inline-start: 10px;
}
.d9752cdd50c7181f-actionButton:first-child {
-webkit-margin-start: 0;
margin-inline-start: 0;
}
.d9752cdd50c7181f-actionButton:hover {
color: var(--interactive-text-hover);
}
.d9752cdd50c7181f-actionButton:active {
background-color: var(--interactive-background-active);
color: var(--interactive-text-active);
}
.d9752cdd50c7181f-actionButton.d9752cdd50c7181f-disabled {
opacity: 0.3;
pointer-events: none;
}
.d9752cdd50c7181f-actionButton.d9752cdd50c7181f-actionAccept:hover {
color: var(--icon-feedback-positive);
}
.d9752cdd50c7181f-actionButton.d9752cdd50c7181f-actionDeny:hover {
color: var(--status-danger);
}
.d9752cdd50c7181f-icon {
height: 20px;
width: 20px;
}
.enable-forced-colors .d9752cdd50c7181f-actionButton {
background-color: ButtonFace;
border: 1px solid ButtonFace;
color: ButtonText;
forced-color-adjust: none;
}
.enable-forced-colors .d9752cdd50c7181f-actionButton:hover {
border-color: ButtonText;
color: ButtonText;
}
.enable-forced-colors .d9752cdd50c7181f-actionButton:active {
background-color: HighlightText;
border-color: Highlight;
color: Highlight;
}
.enable-forced-colors .d9752cdd50c7181f-actionButton.d9752cdd50c7181f-disabled {
background-color: Canvas;
border-color: GrayText;
color: GrayText;
opacity: 1;
}
._1327d744f38d9aa4-avatar {
flex-shrink: 0;
margin-block: 0;
margin-inline: 0 12px;
}
._1327d744f38d9aa4-userPreview {
display: flex;
flex-direction: column;
overflow: hidden;
-webkit-margin-end: 16px;
margin-inline-end: 16px;
}
._1327d744f38d9aa4-container {
align-items: center;
display: flex;
width: 100%;
}
._1327d744f38d9aa4-userContainerWithTimestamp {
align-items: flex-end;
display: flex;
justify-content: flex-start;
}
._1327d744f38d9aa4-tagContainer {
align-items: flex-end;
display: flex;
margin-top: 2px;
overflow: hidden;
}
._1327d744f38d9aa4-username {
color: var(--text-strong);
flex-grow: 0;
flex-shrink: 1;
font-weight: var(--font-weight-semibold);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._1327d744f38d9aa4-discriminator {
color: var(--text-default);
}
._1327d744f38d9aa4-timestampWithPreview {
-webkit-margin-start: 8px;
flex-grow: 1;
flex-shrink: 0;
margin-inline-start: 8px;
}
.e65d0c75b8a1916b-container {
justify-content: space-between;
width: 100%;
}
.e65d0c75b8a1916b-container,
.e65d0c75b8a1916b-details {
align-items: center;
display: flex;
}
.e65d0c75b8a1916b-details {
overflow: hidden;
}
.e65d0c75b8a1916b-actions {
align-items: center;
display: flex;
}
.a0365b50ede477c9-rowItem {
border-bottom: 1px solid var(--border-subtle);
box-sizing: border-box;
cursor: pointer;
display: flex;
flex-direction: row;
font-size: 16px;
font-weight: var(--font-weight-medium);
line-height: 20px;
overflow: hidden;
padding: 10px;
}
.a0365b50ede477c9-rowItem.a0365b50ede477c9-last {
border-bottom: none;
}
.a0365b50ede477c9-rowItem.a0365b50ede477c9-active,
.a0365b50ede477c9-rowItem:hover {
background: var(--interactive-background-hover);
border-color: transparent;
border-radius: var(--radius-md);
}
.d9914bd9cd9c033f-container {
max-width: 800px;
}
.d9914bd9cd9c033f-section {
margin-bottom: 8px;
}
.d9914bd9cd9c033f-box {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
padding: var(--space-24);
}
@media (min-width: 900px) {
.d9914bd9cd9c033f-box {
padding: 32px;
}
}
.d9914bd9cd9c033f-linkingBanner {
align-items: flex-start;
flex-direction: row;
justify-content: center;
margin-bottom: 24px;
padding: 32px;
}
.d9914bd9cd9c033f-linkingBannerParent {
align-items: flex-start;
flex-direction: column;
}
.d9914bd9cd9c033f-linkingBannerUpper {
display: flex;
flex-direction: row;
}
.d9914bd9cd9c033f-step {
align-items: center;
display: flex;
justify-content: center;
margin-bottom: 16px;
}
.d9914bd9cd9c033f-steps {
align-items: flex-start;
display: flex;
flex-direction: column;
}
.d9914bd9cd9c033f-steps :last-child {
margin-bottom: 0;
}
.d9914bd9cd9c033f-stepNumber {
align-items: center;
display: flex;
height: 32px;
justify-content: center;
width: 32px;
-webkit-margin-end: var(--space-8);
background-color: var(--background-mod-subtle);
border: 1px solid var(--border-muted);
border-radius: var(--radius-round);
margin-inline-end: var(--space-8);
}
.d9914bd9cd9c033f-bannerArt {
height: 110px;
width: 224px;
}
.d9914bd9cd9c033f-maxConnectionInfo {
border-top: 1px solid var(--border-subtle);
display: flex;
justify-content: center;
padding-top: 10px;
}
.d9914bd9cd9c033f-supportHeader {
margin-bottom: 4px;
}
._2d3feb462957391b-flexVertical {
display: flex;
flex-direction: column;
}
._2d3feb462957391b-flexVertical > ._2d3feb462957391b-flexSpacer {
min-height: 1px;
}
._2d3feb462957391b-flexHorizontal {
display: flex;
flex-direction: row;
}
._2d3feb462957391b-flexHorizontal > ._2d3feb462957391b-flexSpacer {
min-width: 1px;
}
._2d3feb462957391b-flexHorizontalReverse {
display: flex;
flex-direction: row-reverse;
}
._2d3feb462957391b-flexHorizontalReverse > ._2d3feb462957391b-flexSpacer {
min-width: 1px;
}
._2d3feb462957391b-flexSpacer {
flex: 1;
overflow: hidden;
}
._2d3feb462957391b-flexCenter {
align-items: center;
display: flex;
justify-content: center;
}
._2d3feb462957391b-flexAlignStart {
align-items: flex-start;
}
._2d3feb462957391b-flexAlignEnd {
align-items: flex-end;
}
._2d3feb462957391b-flexAlignCenter {
align-items: center;
}
._2d3feb462957391b-flexAlignStretch {
align-items: stretch;
}
._2d3feb462957391b-flexJustifyStart {
justify-content: flex-start;
}
._2d3feb462957391b-flexJustifyEnd {
justify-content: flex-end;
}
._2d3feb462957391b-flexJustifyCenter {
justify-content: center;
}
._2d3feb462957391b-flexJustifyAround {
justify-content: space-around;
}
._2d3feb462957391b-flexJustifyBetween {
justify-content: space-between;
}
._2d3feb462957391b-flexNowrap {
flex-wrap: nowrap;
}
._2d3feb462957391b-flexWrap {
flex-wrap: wrap;
}
._2d3feb462957391b-flexWrapReverse {
flex-wrap: wrap-reverse;
}
._48a9c1ba881795e8-flex {
box-sizing: border-box;
display: flex;
}
._48a9c1ba881795e8-flex ._48a9c1ba881795e8-flexChild {
box-sizing: border-box;
flex-grow: 1;
}
._48a9c1ba881795e8-flex._48a9c1ba881795e8-flexGutterSmall {
margin-left: -10px;
margin-right: -10px;
}
._48a9c1ba881795e8-flex._48a9c1ba881795e8-flexGutterSmall ._48a9c1ba881795e8-flexChild {
padding: 0 10px;
}
._48a9c1ba881795e8-flex._48a9c1ba881795e8-flexGutterLarge {
margin-left: -30px;
margin-right: -30px;
}
._48a9c1ba881795e8-flex._48a9c1ba881795e8-flexGutterLarge ._48a9c1ba881795e8-flexChild {
padding: 0 30px;
}
._74f9030597917893-container {
display: flex;
flex-direction: column;
padding-top: 20px;
}
._74f9030597917893-enableCard {
background-color: var(--background-base-lower);
border: 1px solid var(--border-muted);
color: var(--text-strong);
padding: 12px 16px;
}
._74f9030597917893-toggleSection {
margin-bottom: 30px;
}
._74f9030597917893-arrow {
color: var(--text-strong);
}
.dc2e0e7839a6713a-sideNavContent {
max-width: 800px;
min-width: 375px;
padding: 24px;
}
@media (min-width: 900px) {
.dc2e0e7839a6713a-sideNavContent {
padding: 40px;
}
}
.dc2e0e7839a6713a-container {
align-items: stretch;
display: flex;
flex: 1 1 auto;
flex-direction: column;
justify-content: stretch;
min-height: 0;
min-width: 0;
overflow: hidden;
position: relative;
}
.theme-dark.custom-theme-background .dc2e0e7839a6713a-containerSidenav,
.theme-light.custom-theme-background .dc2e0e7839a6713a-containerSidenav {
background: inherit;
}
.dc2e0e7839a6713a-sidebarTabBar {
box-shadow: none;
}
.dc2e0e7839a6713a-settingsTabBar {
border-bottom: 1px solid var(--border-subtle);
margin-bottom: 24px;
}
.dc2e0e7839a6713a-settingsTabBarItem {
align-items: center;
display: flex;
padding-bottom: 14px;
}
.dc2e0e7839a6713a-settingsTabBarItem:first-child {
-webkit-margin-start: 0;
margin-inline-start: 0;
}
.dc2e0e7839a6713a-contentPanel {
align-items: stretch;
display: flex;
flex: 1 1 auto;
flex-direction: column;
justify-content: stretch;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
.dc2e0e7839a6713a-userSettingsContentPanel {
overflow-x: unset;
overflow-y: unset;
}
.dc2e0e7839a6713a-item {
align-items: center;
display: flex;
}
.dc2e0e7839a6713a-badge {
-webkit-margin-start: 6px;
margin-inline-start: 6px;
}
.dc2e0e7839a6713a-containerSidenav {
background: var(--background-gradient-chat, var(--background-base-lower));
border-top: 1px solid var(--app-frame-border);
}
.dc2e0e7839a6713a-loadingContainer {
align-items: center;
display: flex;
justify-content: center;
min-height: calc(100vh - 100px);
}
._0263c8321829b3e8-hoverRoll {
box-sizing: border-box;
contain: paint;
cursor: revert;
display: inline-block;
position: relative;
text-align: start;
vertical-align: top;
width: 100%;
}
._0263c8321829b3e8-hoverRoll._0263c8321829b3e8-forceHover:not(._0263c8321829b3e8-disabled) ._0263c8321829b3e8-default,
._0263c8321829b3e8-hoverRoll:hover:not(._0263c8321829b3e8-disabled) ._0263c8321829b3e8-default {
opacity: 0;
transform: translate3d(0, -107%, 0);
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
._0263c8321829b3e8-hoverRoll._0263c8321829b3e8-forceHover:not(._0263c8321829b3e8-disabled) ._0263c8321829b3e8-hovered,
._0263c8321829b3e8-hoverRoll:hover:not(._0263c8321829b3e8-disabled) ._0263c8321829b3e8-hovered {
opacity: 1;
transform: translateZ(0);
}
._0263c8321829b3e8-default,
._0263c8321829b3e8-hovered {
display: block;
overflow: hidden;
pointer-events: none;
text-overflow: ellipsis;
transform-style: preserve-3d;
white-space: nowrap;
width: 100%;
}
.full-motion ._0263c8321829b3e8-default,
.full-motion ._0263c8321829b3e8-hovered {
transition: all 0.22s ease;
}
._0263c8321829b3e8-hovered {
inset: 0;
opacity: 0;
position: absolute;
transform: translate3d(0, 107%, 0);
}
.cc46f0f859f26200-notDetected,
.cc46f0f859f26200-nowPlaying {
animation: none;
border-radius: 3px;
margin-top: 0;
padding: 16px;
width: 100%;
}
.cc46f0f859f26200-notDetected .cc46f0f859f26200-overlayStatusText,
.cc46f0f859f26200-notDetected .cc46f0f859f26200-overlayWarningIcon,
.cc46f0f859f26200-nowPlaying .cc46f0f859f26200-overlayStatusText,
.cc46f0f859f26200-nowPlaying .cc46f0f859f26200-overlayWarningIcon {
opacity: 1;
}
.cc46f0f859f26200-nowPlayingAdd {
align-self: flex-start;
-webkit-margin-start: 0;
font-size: 14px;
margin-inline-start: 0;
}
.cc46f0f859f26200-game {
background-color: var(--background-mod-normal);
border-radius: 12px;
margin-bottom: 12px;
padding: 16px;
position: relative;
}
.cc46f0f859f26200-game .cc46f0f859f26200-removeGame {
cursor: pointer;
inset-inline-end: -15px;
opacity: 0;
position: absolute;
top: -12px;
}
.cc46f0f859f26200-game:focus-within .cc46f0f859f26200-overlayStatusText,
.cc46f0f859f26200-game:focus-within .cc46f0f859f26200-overlayWarningIcon,
.cc46f0f859f26200-game:focus-within .cc46f0f859f26200-removeGame,
.cc46f0f859f26200-game:hover .cc46f0f859f26200-overlayStatusText,
.cc46f0f859f26200-game:hover .cc46f0f859f26200-overlayWarningIcon,
.cc46f0f859f26200-game:hover .cc46f0f859f26200-removeGame {
opacity: 1;
}
.cc46f0f859f26200-toggleContainer {
-webkit-margin-start: 12px;
margin-inline-start: 12px;
}
.cc46f0f859f26200-activeGame {
border-radius: 12px;
position: relative;
}
.cc46f0f859f26200-activeGame .cc46f0f859f26200-removeGame {
inset-inline-end: -12px;
opacity: 0;
position: absolute;
top: -12px;
}
.cc46f0f859f26200-activeGame:focus-within .cc46f0f859f26200-removeGame,
.cc46f0f859f26200-activeGame:hover .cc46f0f859f26200-removeGame {
opacity: 1;
}
.cc46f0f859f26200-gameName,
.cc46f0f859f26200-gameNameInput,
.cc46f0f859f26200-gameVerifiedIcon,
.cc46f0f859f26200-lastPlayed,
.cc46f0f859f26200-overlayStatusText,
.cc46f0f859f26200-toggleIcon {
z-index: 1;
}
.cc46f0f859f26200-gameNameLastPlayed {
flex: 1;
}
.cc46f0f859f26200-gameVerifiedIcon {
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
.cc46f0f859f26200-gameName {
color: var(--text-strong);
font-size: 16px;
font-weight: var(--font-weight-semibold);
line-height: 22px;
}
.cc46f0f859f26200-gameNameInput {
background-color: transparent;
border: 1px solid transparent;
border-radius: 3px;
padding: 0 4px;
-webkit-margin-start: -5px;
margin-inline-start: -5px;
width: 240px;
}
.cc46f0f859f26200-gameNameInput:focus,
.cc46f0f859f26200-gameNameInput:hover {
background-color: var(--background-secondary-alt);
border-color: hsl(var(--primary-500-hsl) / 0.3);
}
.cc46f0f859f26200-lastPlayed {
color: var(--primary-400);
font-size: 14px;
}
.cc46f0f859f26200-overlayStatusText {
width: 100px;
-webkit-margin-end: 4px;
color: var(--text-muted);
font-size: 14px;
margin-inline-end: 4px;
opacity: 0;
text-transform: uppercase;
}
.cc46f0f859f26200-toggleIcon {
cursor: pointer;
}
.cc46f0f859f26200-toggleIconOff .cc46f0f859f26200-fill {
fill: var(--status-danger);
}
.cc46f0f859f26200-toggleIconInactive {
cursor: not-allowed;
}
.cc46f0f859f26200-toggleIconInactive .cc46f0f859f26200-fill {
fill: var(--status-danger);
opacity: 0.5;
}
.cc46f0f859f26200-overlayWarningIcon {
background: url(/assets/07e52d3b4c358536.svg) no-repeat;
height: 16px;
width: 16px;
-webkit-margin-end: 20px;
margin-inline-end: 20px;
opacity: 0;
}
.cc46f0f859f26200-addGamePopout {
background-color: var(--background-secondary-alt);
border-radius: 3px;
padding: 10px;
width: 300px;
}
.cc46f0f859f26200-addGamePopout .cc46f0f859f26200-actions {
align-items: center;
gap: var(--space-16);
justify-content: flex-end;
}
.cc46f0f859f26200-subgame {
align-items: center;
background-color: var(--background-surface-high);
border-radius: 0;
display: flex;
margin-bottom: 0;
width: 100%;
}
.cc46f0f859f26200-subgame:last-child {
border-radius: 0 0 12px 12px;
}
.cc46f0f859f26200-border {
border-bottom: 1px solid var(--border-subtle);
margin: 0 16px;
}
.cc46f0f859f26200-detectedApplication,
.cc46f0f859f26200-nowPlayingAdd {
align-items: center;
display: flex;
}
.cc46f0f859f26200-nowPlayingAdd {
color: var(--text-muted);
gap: 4px;
}
.cc46f0f859f26200-nowPlaying {
background-color: var(--status-positive-background);
}
.cc46f0f859f26200-nowPlaying .cc46f0f859f26200-gameName {
color: var(--white);
}
.cc46f0f859f26200-nowPlaying .cc46f0f859f26200-gameNameInput:focus,
.cc46f0f859f26200-nowPlaying .cc46f0f859f26200-gameNameInput:hover {
background-color: hsl(var(--green-560-hsl) / 0.3);
border-color: var(--green-560);
}
.cc46f0f859f26200-nowPlaying .cc46f0f859f26200-lastPlayed,
.cc46f0f859f26200-nowPlaying .cc46f0f859f26200-overlayStatusText {
color: var(--white);
}
.cc46f0f859f26200-nowPlaying .cc46f0f859f26200-toggleIconInactive .cc46f0f859f26200-fill,
.cc46f0f859f26200-nowPlaying .cc46f0f859f26200-toggleIconOff .cc46f0f859f26200-fill,
.cc46f0f859f26200-nowPlaying .cc46f0f859f26200-toggleIconOn .cc46f0f859f26200-fill {
fill: var(--white);
}
.cc46f0f859f26200-notDetected {
background-color: var(--background-base-lower);
}
.cc46f0f859f26200-notDetected .cc46f0f859f26200-gameName {
color: var(--interactive-text-active);
}
.cc46f0f859f26200-notDetected .cc46f0f859f26200-lastPlayed {
color: var(--text-muted);
}
.cc46f0f859f26200-toggleIconOn .cc46f0f859f26200-fill {
fill: var(--interactive-text-default);
}
.cc46f0f859f26200-game.cc46f0f859f26200-gameHasSubgame {
border-end-end-radius: 0;
border-end-start-radius: 0;
margin-bottom: 0;
}
.cc46f0f859f26200-subgameContainer {
background-color: var(--background-surface-high);
border-radius: 0 0 12px 12px;
margin-bottom: 20px;
}
.cc46f0f859f26200-detectionToggleModal {
width: var(--modal-width-small);
}
.cc46f0f859f26200-addedGamesTitle {
margin-bottom: var(--space-xs);
}
.cc46f0f859f26200-addedGamesDescription {
margin-bottom: var(--space-16);
}
:root {
--legacy-elevation-low: 0 1px 5px var(--opacity-black-20);
--legacy-elevation-high: 0 2px 10px 0 var(--opacity-black-8);
--legacy-elevation-border: 0 0 0 1px hsl(var(--primary-300-hsl)/0.3);
}
.theme-dark {
--legacy-elevation-low: 0 1px 5px 0 var(--opacity-black-28);
--legacy-elevation-high: 0 2px 10px 0 var(--opacity-black-20);
--legacy-elevation-border: 0 0 0 1px hsl(var(--primary-700-hsl)/0.6);
}
._2b2f1bb918566c48-elevationLow {
box-shadow: var(--legacy-elevation-low);
}
._2b2f1bb918566c48-elevationHigh {
box-shadow: var(--legacy-elevation-high);
}
._2b2f1bb918566c48-elevationBorderLow {
box-shadow: var(--legacy-elevation-border), var(--legacy-elevation-low);
}
._2b2f1bb918566c48-darkElevationBorderHigh {
box-shadow: var(--legacy-elevation-border), var(--legacy-elevation-high);
}
._2b2f1bb918566c48-lightElevationLow {
box-shadow: var(--legacy-elevation-low);
}
._2b2f1bb918566c48-lightElevationHigh {
box-shadow: var(--legacy-elevation-high);
}
._2b2f1bb918566c48-lightElevationBorderLow {
box-shadow: var(--legacy-elevation-border), var(--legacy-elevation-low);
}
._2b2f1bb918566c48-elevationBorderHigh,
._2b2f1bb918566c48-elevationBorderLow,
._2b2f1bb918566c48-elevationHigh,
._2b2f1bb918566c48-elevationLow,
._2b2f1bb918566c48-lightElevationBorderHigh {
box-shadow: var(--legacy-elevation-border), var(--legacy-elevation-high);
}
.c501831bd1d46894-container {
background-position: bottom -80px right -330px;
background-size: auto 155%;
border-radius: 8px;
box-sizing: border-box;
height: 208px;
min-width: 660px;
padding: 24px 32px 32px;
position: relative;
}
.c501831bd1d46894-container.c501831bd1d46894-withMargin {
margin: 32px 0;
}
.theme-dark .c501831bd1d46894-container {
background-color: #0b1320;
}
.theme-light .c501831bd1d46894-container {
background-color: #bec8ff;
}
.c501831bd1d46894-textContainer {
height: 100%;
max-width: 343px;
}
.c501831bd1d46894-headerContainer {
align-items: center;
display: flex;
flex-direction: row;
height: 32px;
max-width: 343px;
-webkit-margin-start: -4px;
margin-inline-start: -4px;
}
.c501831bd1d46894-icon {
width: 30px;
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
._9ed462a7751afeb2-loading {
margin-top: 48px;
}
._9ed462a7751afeb2-maybeLaterButton {
color: var(--text-strong);
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
._9ed462a7751afeb2-maybeLaterButton:hover {
text-decoration: underline;
}
._9ed462a7751afeb2-bodyText {
display: flex;
justify-content: center;
}
._9ed462a7751afeb2-formDivider {
margin: 16px 0;
}
._9ed462a7751afeb2-formSection {
margin-bottom: 16px;
}
._9ed462a7751afeb2-confirmationText {
margin-top: 8px;
}
._9ed462a7751afeb2-headerContainer {
align-items: center;
display: flex;
flex-direction: column;
gap: 8px;
margin: calc(var(--custom-outbound-promotion-redemption-modal-art-height) / -1) auto auto;
padding: 0;
width: 90%;
}
._9ed462a7751afeb2-art {
background-image: url(/assets/1ab7d1a0b0204a75.svg);
height: var(--custom-outbound-promotion-redemption-modal-art-height);
margin-bottom: 16px;
width: 240px;
}
._9ed462a7751afeb2-errorBody,
._9ed462a7751afeb2-errorHeader {
display: flex;
flex-direction: column;
}
._9ed462a7751afeb2-errorBody {
align-items: center;
gap: 8px;
margin: 0 auto;
max-width: 90%;
}
._9ed462a7751afeb2-errorArt {
background-image: url(/assets/26eafe176b5b3454.svg);
height: 99px;
margin: 0 auto 32px;
width: 141px;
}
.fedaccd022fb5126-card {
border-radius: 5px;
box-sizing: border-box;
color: var(--text-strong);
cursor: default;
overflow: hidden;
transform: translateZ(0);
}
.fedaccd022fb5126-header {
padding: 20px;
position: relative;
}
.fedaccd022fb5126-headerButtonColor {
background: var(--primary-500);
color: var(--white);
}
.fedaccd022fb5126-coverArtPosition {
background-position-x: 50%;
background-position-y: 40%;
background-repeat: no-repeat;
background-size: cover;
border-radius: 5px;
bottom: 0;
inset-inline-start: 0;
overflow: hidden;
pointer-events: none;
position: absolute;
top: 0;
transform: translateZ(0);
}
.fedaccd022fb5126-splashArt {
filter: grayscale(100%);
-webkit-mask: radial-gradient(100% 100% at top left, hsla(0, 0%, 100%, 0.6) 0, hsla(0, 0%, 100%, 0) 100%);
mask: radial-gradient(100% 100% at top left, hsla(0, 0%, 100%, 0.6) 0, hsla(0, 0%, 100%, 0) 100%);
opacity: 0.3;
width: 300px;
}
.fedaccd022fb5126-body {
background-color: var(--background-secondary-alt);
}
.fedaccd022fb5126-header {
background-color: var(--background-base-lowest);
color: var(--text-strong);
}
.fedaccd022fb5126-header:hover {
background-color: var(--interactive-background-hover);
}
._6bc4681bdf4108eb-card {
cursor: pointer;
}
._6bc4681bdf4108eb-subText {
font-size: 12px;
line-height: 16px;
}
._6bc4681bdf4108eb-subTextRow {
color: var(--primary-300);
}
._6bc4681bdf4108eb-subtitleHeader {
align-items: center;
color: var(--text-muted);
display: flex;
flex-direction: row;
font-weight: var(--font-weight-semibold);
gap: 4px;
}
._6bc4681bdf4108eb-applicationSubtitleHeader {
margin-top: 2px;
}
._6bc4681bdf4108eb-applicationSubtitleIcon {
border-radius: 6px;
height: 20px;
width: 20px;
}
._6bc4681bdf4108eb-codeText {
margin-bottom: 8px;
}
._6bc4681bdf4108eb-headerText {
-webkit-margin-start: 20px;
margin-inline-start: 20px;
}
._6bc4681bdf4108eb-cardHeader {
align-items: center;
display: flex;
flex: 1 1 auto;
justify-content: space-between;
}
._6bc4681bdf4108eb-giftCodeRow {
border-bottom: 1px solid transparent;
margin: 0 20px;
padding: 20px 0 19px;
}
._6bc4681bdf4108eb-giftCodeRow:last-child {
border-bottom: none;
}
._6bc4681bdf4108eb-generateCodeRow {
padding: 22px 0;
}
._6bc4681bdf4108eb-gameName {
line-height: 19px;
}
._6bc4681bdf4108eb-expandIcon {
-webkit-margin-start: 8px;
cursor: pointer;
margin-inline-start: 8px;
}
._6bc4681bdf4108eb-spinner {
padding: 20px;
}
.theme-dark ._6bc4681bdf4108eb-giftCodeRow {
border-color: hsl(var(--primary-500-hsl) / 0.6);
}
.theme-dark ._6bc4681bdf4108eb-bodyButtonColor {
color: var(--white);
}
.theme-dark ._6bc4681bdf4108eb-bodyButtonColor:hover {
background: var(--primary-500);
}
.theme-dark ._6bc4681bdf4108eb-bodyButtonColor:active {
background: var(--primary-400);
}
.theme-light ._6bc4681bdf4108eb-bodyButtonColor:hover {
background: var(--primary-200);
}
.theme-light ._6bc4681bdf4108eb-bodyButtonColor:active {
background: var(--primary-300);
}
._6bc4681bdf4108eb-giftIcon {
height: 40px;
width: 40px;
}
._6bc4681bdf4108eb-bodyButtonColor {
background: var(--background-base-lower);
}
.d4883c8125f433a3-marginContainer {
margin-top: 20px;
}
.d4883c8125f433a3-gradientContainer {
border: 1px solid transparent;
}
.d4883c8125f433a3-promoHeaderContainer {
align-items: center;
display: flex;
flex-direction: row;
}
.d4883c8125f433a3-promoDescription {
margin-top: var(--space-4);
}
.d4883c8125f433a3-promoNitroButton {
-webkit-margin-start: auto;
margin-inline-start: auto;
}
.d4883c8125f433a3-skuCard {
margin-top: 24px;
}
.d4883c8125f433a3-emptyState {
align-items: center;
display: flex;
flex-direction: column;
}
.d4883c8125f433a3-emptyStateHeader {
color: var(--text-default);
font-size: 24px;
line-height: 1.17;
margin-top: 20px;
}
.d4883c8125f433a3-emptyStateSubtext {
color: var(--text-muted);
line-height: 1.25;
margin-top: 8px;
}
.d4883c8125f433a3-emptyStateImage {
height: 202px;
margin-top: 120px;
width: 404px;
}
.d4883c8125f433a3-loading {
margin-top: 40px;
}
.d4883c8125f433a3-promotionCardDescriptionWithCode {
cursor: text;
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
}
.d4883c8125f433a3-dropsHeaderContainer {
align-items: center;
display: flex;
}
.d4883c8125f433a3-betaTagIcon {
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
.d4883c8125f433a3-divider {
margin: 8px 0 24px;
}
.d4883c8125f433a3-promotionCard {
align-items: flex-start;
background-color: var(--background-base-lowest);
border-radius: var(--radius-xs);
display: flex;
flex-direction: column;
padding: 20px;
}
.d4883c8125f433a3-mainPromotionCardContainer {
align-items: center;
display: flex;
justify-content: space-between;
width: 100%;
}
.d4883c8125f433a3-promotionCardLeftContainer {
display: flex;
}
.d4883c8125f433a3-redeemTooltipContent {
text-align: center;
}
.d4883c8125f433a3-promotionIcon {
height: 40px;
width: 40px;
-webkit-margin-end: 10px;
align-items: center;
align-self: flex-start;
background-color: var(--bg-surface-overlay-tmp);
border-radius: var(--radius-xs);
display: flex;
flex-shrink: 0;
justify-content: center;
margin-inline-end: 10px;
}
.d4883c8125f433a3-promotionIconImage {
max-height: 36px;
max-width: 36px;
}
.d4883c8125f433a3-dropRewardImage {
border-radius: var(--radius-xs);
width: 100%;
}
.d4883c8125f433a3-dropCriteriaText {
margin: 16px 0;
}
.d4883c8125f433a3-dropCriteriaText > p {
margin-bottom: 2px;
margin-top: 2px;
}
.d4883c8125f433a3-dropLearnMore {
margin-bottom: 16px;
}
.d4883c8125f433a3-promotionLegalese {
border-top: 1px solid var(--border-subtle);
margin-top: 8px;
padding-top: 8px;
-webkit-margin-start: 52px;
font-size: 12px;
line-height: 16px;
margin-inline-start: 52px;
margin-bottom: 0;
}
.d4883c8125f433a3-promotionLegalese em {
font-style: italic;
}
.d4883c8125f433a3-dropContainer {
border-radius: var(--radius-xs);
margin-bottom: 20px;
overflow: hidden;
}
.d4883c8125f433a3-availableUntil {
padding-top: 4px;
}
.d4883c8125f433a3-dropCard {
align-items: flex-start;
background-color: var(--background-base-lowest);
display: flex;
flex-direction: column;
padding: 20px;
}
.d4883c8125f433a3-dropCriteria {
align-items: center;
background-color: var(--background-secondary-alt);
padding: 16px 16px 8px;
}
.d4883c8125f433a3-feedback {
background: var(--background-base-lowest);
padding: 8px;
}
.d4883c8125f433a3-dropsHelpText,
.d4883c8125f433a3-feedback {
border-radius: var(--radius-xs);
color: var(--interactive-text-active);
font-size: 14px;
font-weight: var(--font-weight-medium);
margin-bottom: 20px;
margin-top: -12px;
}
.d4883c8125f433a3-dropsHelpText {
background: var(--background-base-lower);
line-height: 18px;
padding: 3px;
padding-inline: 18px;
}
.theme-dark .d4883c8125f433a3-emptyStateImage {
background: url(/assets/b584f76d3ff86700.svg);
}
.theme-light .d4883c8125f433a3-emptyStateImage {
background: url(/assets/28fe27f3657e23ee.svg);
}
.d4883c8125f433a3-premiumIcon {
position: relative;
top: 2px;
-webkit-margin-end: 6px;
height: 24px;
margin-inline-end: 6px;
width: 24px;
}
.d4883c8125f433a3-tier2Gradient {
color: var(--premium-tier-2-pink);
}
._7700a6b2f1efc84a-container {
align-items: center;
background-color: var(--background-base-lower);
border-radius: var(--radius-sm);
display: flex;
flex-direction: row;
gap: 12px;
padding: 16px;
}
._7700a6b2f1efc84a-textContainer {
display: flex;
flex-direction: column;
flex-grow: 1;
gap: 2px;
}
._7700a6b2f1efc84a-iconContainer {
align-items: center;
background-color: var(--background-feedback-warning);
border-radius: var(--radius-sm);
display: flex;
height: 40px;
justify-content: center;
width: 40px;
}
._7700a6b2f1efc84a-gameIconContainer {
position: relative;
}
._7700a6b2f1efc84a-warningCorner {
align-items: center;
background-color: var(--background-base-lower);
border-radius: var(--radius-round);
display: flex;
inset-inline-end: 0;
justify-content: center;
padding: 2px;
position: absolute;
top: 0;
}
._8b9fcfa7b9f4eb18-wrapper {
background-clip: padding-box;
background-color: var(--status-danger);
border-radius: 3px;
box-shadow:
0 1px 0 var(--opacity-black-24),
inset 0 1px 0 var(--opacity-white-16);
color: var(--white);
display: inline-block;
font-size: 12px;
font-weight: var(--font-weight-medium);
line-height: 12px;
padding: 3px 6px;
text-shadow: 0 1px 0 var(--opacity-black-24);
text-transform: uppercase;
}
._8b9fcfa7b9f4eb18-lowImportance {
background-color: var(--background-accent);
}
._71961da99d37ac57-result {
border-radius: 3px;
cursor: pointer;
font-size: 16px;
font-weight: var(--font-weight-medium);
height: 34px;
overflow: hidden;
position: relative;
}
._71961da99d37ac57-result[aria-selected="true"] {
background: var(--interactive-background-selected);
}
._71961da99d37ac57-content {
align-items: baseline;
display: flex;
flex-direction: row;
height: 34px;
line-height: 34px;
overflow: hidden;
padding: 0 10px;
}
._71961da99d37ac57-contentDefault,
._71961da99d37ac57-contentUnread {
}
._71961da99d37ac57-contentDefault {
color: var(--interactive-text-default);
}
._71961da99d37ac57-contentUnread {
color: var(--text-strong);
}
._71961da99d37ac57-voiceSummaryContainer {
align-self: center;
}
._71961da99d37ac57-iconContainer {
width: 20px;
-webkit-margin-end: 5px;
align-items: center;
align-self: center;
display: flex;
justify-content: center;
margin-inline-end: 5px;
}
._71961da99d37ac57-gameIcon,
._71961da99d37ac57-iconContainer {
flex-grow: 0;
flex-shrink: 0;
}
._71961da99d37ac57-gameIconSize {
height: 20px;
width: 20px;
}
._71961da99d37ac57-icon {
color: var(--interactive-text-default);
display: block;
}
._71961da99d37ac57-name {
align-items: baseline;
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._71961da99d37ac57-misc,
._71961da99d37ac57-name {
display: flex;
}
._71961da99d37ac57-misc {
align-items: center;
flex: 0 1 auto;
max-width: 140px;
-webkit-margin-start: 4px;
color: var(--interactive-text-default);
margin-inline-start: 4px;
}
._71961da99d37ac57-match {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._71961da99d37ac57-badge,
._71961da99d37ac57-match {
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
._71961da99d37ac57-note {
color: var(--text-muted);
font-size: 10px;
font-weight: var(--font-weight-semibold);
line-height: 14px;
margin-top: 1px;
overflow: hidden;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
}
._71961da99d37ac57-username {
font-weight: var(--font-weight-normal);
opacity: 0.6;
}
._71961da99d37ac57-header {
color: var(--interactive-text-default);
font-size: 12px;
font-weight: var(--font-weight-semibold);
letter-spacing: 0.025em;
line-height: 30px;
margin-top: 4px;
text-transform: uppercase;
}
._71961da99d37ac57-dmIconContainer ._71961da99d37ac57-guildIcon,
._71961da99d37ac57-guildIconContainer ._71961da99d37ac57-guildIcon {
background-size: 100% 100%;
border-radius: 3px;
display: block;
flex-grow: 0;
flex-shrink: 0;
line-height: 20px;
margin: 0;
overflow: hidden;
text-align: center;
}
._71961da99d37ac57-dmIconContainer,
._71961da99d37ac57-guildIconContainer {
}
._71961da99d37ac57-score {
align-items: center;
background-color: var(--opacity-black-20);
border-radius: 2px;
bottom: 2px;
display: flex;
font-family: var(--font-code);
inset-inline-end: 2px;
justify-content: center;
padding-inline: 8px;
position: absolute;
top: 2px;
}
.enable-forced-colors ._71961da99d37ac57-result[aria-selected="true"] {
outline: 2px solid Highlight;
outline-offset: -2px;
}
._25eff5f63b128cf0-channelIdSection {
margin-top: 8px;
}
._25eff5f63b128cf0-guildName {
flex-shrink: 1;
font-size: 12px;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: pre;
}
._25eff5f63b128cf0-selectedVoiceChannel {
align-items: stretch;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xs);
display: flex;
flex-direction: column;
flex-grow: 1;
flex-shrink: 1;
justify-content: center;
min-height: 0;
min-width: 0;
pointer-events: none;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
._25eff5f63b128cf0-noVoiceChannelSelected {
padding: 0 16px;
}
._25eff5f63b128cf0-voiceListSearchEmpty {
padding: 16px;
text-align: center;
}
._740f25428e5fa983-keybindMessage {
position: relative;
}
._740f25428e5fa983-keybindMessage a {
color: inherit;
text-decoration: underline;
}
._740f25428e5fa983-item {
flex: 1;
-webkit-margin-end: 16px;
margin-inline-end: 16px;
position: relative;
}
._740f25428e5fa983-item a {
color: inherit;
text-decoration: underline;
}
._740f25428e5fa983-switch {
align-items: center;
display: flex;
flex: 0;
margin-top: 28px;
-webkit-margin-start: 32px;
margin-inline-start: 32px;
}
._740f25428e5fa983-removeKeybindFloating {
inset-inline-end: -31px;
opacity: 0;
position: absolute;
top: -12px;
}
._740f25428e5fa983-removeKeybind {
align-items: center;
cursor: pointer;
display: flex;
flex: 0;
margin-top: 28px;
}
._740f25428e5fa983-ghostPill {
align-items: center;
background-color: var(--yellow-160);
border: 1px solid var(--yellow-300);
color: var(--primary-860);
display: inline-grid;
grid-template-columns: auto 1fr;
padding: 10px;
grid-gap: 10px;
border-radius: var(--radius-xs);
font-size: 14px;
}
._740f25428e5fa983-keybindGroup {
margin-top: -1px;
padding-bottom: 20px;
padding-top: 20px;
position: relative;
}
._740f25428e5fa983-keybindGroup:hover ._740f25428e5fa983-removeKeybindFloating {
opacity: 1;
}
._740f25428e5fa983-keybindGroupContent {
align-items: center;
display: flex;
flex-direction: row;
margin-bottom: 8px;
}
.keyboard-mode ._740f25428e5fa983-keybindGroup:focus-within ._740f25428e5fa983-removeKeybindFloating {
opacity: 1;
}
._740f25428e5fa983-defaultKeybindGroup {
background-color: var(--background-surface-higher);
border: 1px solid var(--border-muted);
border-radius: var(--radius-md);
display: flex;
flex-direction: column;
gap: var(--space-16);
padding: var(--space-16) 0;
}
._740f25428e5fa983-defaultKeybind {
align-items: center;
box-sizing: border-box;
display: grid;
font-weight: var(--font-weight-medium);
grid-template-columns: 1fr auto;
padding: 0 var(--space-16);
}
._740f25428e5fa983-defaultKeybindShortcutGroup {
display: grid;
grid-gap: 4px;
}
._740f25428e5fa983-defaultKeybindGroupHeader {
margin-bottom: 24px;
text-transform: uppercase;
}
._740f25428e5fa983-defaultKeybindGroupWithDescription {
margin-bottom: 4px;
}
._740f25428e5fa983-defaultKeybindGroupDescription {
margin-bottom: 20px;
}
._740f25428e5fa983-browserNotice a {
color: inherit;
text-decoration: underline;
}
._740f25428e5fa983-systemServiceUpsell {
margin-bottom: 24px;
}
._740f25428e5fa983-ctaContainer {
gap: 12px;
margin-bottom: 24px;
}
._740f25428e5fa983-ctaContainer,
._740f25428e5fa983-warning {
align-items: center;
display: flex;
flex-direction: row;
}
._740f25428e5fa983-warning {
flex-grow: 1;
gap: 8px;
}
._740f25428e5fa983-addButton {
-webkit-margin-start: 12px;
flex-shrink: 0;
margin-inline-start: 12px;
}
._75920c6a1d5deff1-container {
scroll-margin-bottom: var(--space-16);
scroll-margin-top: var(--space-16);
}
.dbfbe01105eb2897-baseControlItem {
border-radius: var(--radius-lg);
display: flex;
flex-direction: row;
flex-grow: 1;
gap: var(--space-12);
min-height: 48px;
padding: var(--space-12);
transition: background-color 0.15s ease;
}
.dbfbe01105eb2897-baseControlItem:hover.dbfbe01105eb2897-clickable {
background-color: var(--interactive-background-hover);
cursor: pointer;
}
.dbfbe01105eb2897-baseControlItemLeadingElement,
.dbfbe01105eb2897-baseControlItemTrailingElements {
align-items: center;
display: flex;
justify-content: center;
}
.dbfbe01105eb2897-baseControlItemTrailingElements {
gap: var(--space-4);
}
.dbfbe01105eb2897-baseControlItemTitle {
display: flex;
flex-direction: row;
gap: var(--space-8);
}
.dbfbe01105eb2897-baseControlItemContent {
display: flex;
flex-direction: column;
flex-grow: 1;
gap: var(--space-4);
justify-content: center;
}
.dbfbe01105eb2897-secondaryTitle:before {
color: var(--text-muted);
content: "•";
margin: 0 var(--space-8);
}
._15430d3f0efb8a14-navigatorIcon {
align-items: center;
background-color: var(--background-mod-muted);
border-radius: var(--radius-sm);
display: flex;
height: 48px;
justify-content: center;
width: 48px;
}
._64c86c9f6e22c2df-triggerButton {
all: unset;
cursor: pointer;
}
._64c86c9f6e22c2df-panel {
height: var(--disclosure-panel-height);
overflow: clip;
}
.full-motion ._64c86c9f6e22c2df-panel:not(._64c86c9f6e22c2df-disablePanelAnimation) {
transition: height 0.2s ease-in-out;
}
.full-motion ._64c86c9f6e22c2df-icon {
transition: transform 0.2s ease-out;
}
._64c86c9f6e22c2df-icon {
transform: rotateX(0deg);
}
._64c86c9f6e22c2df-iconClosed {
transform: rotateX(180deg);
}
.a1f93fe6ac7c969d-open {
--custom-container-padding: var(--space-4);
background-color: var(--background-mod-muted);
border-radius: 20px;
margin: calc(var(--custom-container-padding) * -1);
padding-bottom: calc(var(--custom-base-setting-wrapper-horizontal-padding) - var(--custom-base-setting-wrapper-vertical-padding) + var(--custom-container-padding));
padding-top: var(--custom-container-padding);
padding-inline: var(--custom-container-padding);
}
._450f650beeb15c9b-headerTitle {
align-items: center;
display: flex;
flex-direction: row;
gap: var(--space-8);
}
.c15d445ed76c59b9-notice {
padding: 0 var(--space-12);
}
._143d25009b3564c4-divider {
margin: 0 var(--space-12);
width: auto;
}
._3c320ad402edb79a-header {
margin-bottom: var(--space-16);
min-height: 40px;
}
._3c320ad402edb79a-title {
padding-top: var(--space-8);
}
._3c320ad402edb79a-subtitle,
._3c320ad402edb79a-title {
margin-bottom: var(--space-12);
padding-inline: var(--space-12);
}
._3c320ad402edb79a-title + ._3c320ad402edb79a-subtitle {
margin-bottom: var(--space-12);
margin-top: -8px;
}
._3c320ad402edb79a-divider {
margin: 0 var(--space-12);
width: auto;
}
.a5d75d6f2a4f6ad8-listTitle {
margin: 0 var(--space-12);
}
.a5d75d6f2a4f6ad8-collapsibleContainer {
position: relative;
}
.a5d75d6f2a4f6ad8-hoverDivider {
opacity: 1;
transition: opacity 0.15s ease;
}
.a5d75d6f2a4f6ad8-collapsibleContainer:hover .a5d75d6f2a4f6ad8-hoverDivider {
opacity: 0;
}
._6131ab3dbe0affed-panel {
margin-block: var(--space-64) var(--space-64);
margin-inline: auto;
max-width: 696px;
min-width: 300px;
padding: 0 var(--space-16);
position: relative;
}
@media (max-width: 1080px) {
._6131ab3dbe0affed-panel {
margin-block: var(--space-80) var(--space-80);
margin-inline: auto;
}
}
._6131ab3dbe0affed-panel * {
box-sizing: border-box;
}
._6131ab3dbe0affed-scroller {
height: 100%;
overflow-x: visible;
scroll-padding-top: 24px;
scrollbar-gutter: stable both-edges;
}
._6131ab3dbe0affed-tabBar {
margin-bottom: var(--space-24);
}
._6131ab3dbe0affed-notice {
bottom: 0;
inset-inline: 0;
margin: 0 auto;
max-width: 696px;
min-width: 300px;
padding: var(--space-16);
position: absolute;
z-index: 2;
}
._6131ab3dbe0affed-categories {
display: flex;
flex-direction: column;
flex-grow: 1;
}
._6131ab3dbe0affed-divider {
margin-bottom: var(--space-48);
margin-top: var(--space-48);
}
._28f6b224e529a2a9-title {
margin-inline: var(--space-12);
margin-bottom: var(--space-4);
}
._678d302356d24b03-split {
align-items: start;
display: grid;
gap: var(--space-16);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 800px) {
._678d302356d24b03-split {
grid-template-columns: 1fr;
}
}
.e42467e37c2a7a08-localizedName {
font-size: 14px;
font-weight: var(--font-weight-normal);
line-height: 20px;
}
.e42467e37c2a7a08-flag {
flex: 0 0 auto;
margin: 0 8px;
}
.e42467e37c2a7a08-flagImage {
display: block;
filter: saturate(var(--saturation-factor, 1));
height: 18px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
width: 27px;
}
.cc1cc58619fd0775-emptyWidgetContainer {
align-items: center;
display: flex;
flex-direction: column;
height: calc(100% - 32px);
justify-content: center;
padding: 16px;
width: calc(100% - 32px);
}
.cc1cc58619fd0775-emptyWidgetContainer.cc1cc58619fd0775-absolute {
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
}
.cc1cc58619fd0775-emptyWidgetIcon {
opacity: 0.24;
}
._789365ddb50399a0-effectsWrapper {
height: 100%;
position: relative;
}
._789365ddb50399a0-effects {
inset: 0;
position: absolute;
}
.c8b06d02ca1314f9-text {
color: var(--opacity-white-80);
font-size: 12px;
font-weight: var(--font-weight-medium);
line-height: 12px;
}
.c8b06d02ca1314f9-textLeft,
.c8b06d02ca1314f9-textRight {
}
.c8b06d02ca1314f9-bar {
background-color: hsl(var(--primary-500-hsl) / 0.16);
border-radius: 2px;
height: 4px;
}
.c8b06d02ca1314f9-barInMultiLine {
margin-bottom: 4px;
}
.c8b06d02ca1314f9-barInner {
background-color: var(--white);
border-radius: 2px;
height: 100%;
min-width: 4px;
}
.c8b06d02ca1314f9-themed .c8b06d02ca1314f9-textLeft,
.c8b06d02ca1314f9-themed .c8b06d02ca1314f9-textRight {
color: var(--text-default);
}
.c8b06d02ca1314f9-themed .c8b06d02ca1314f9-barInner {
background-color: var(--text-default);
}
.c8b06d02ca1314f9-singleLineContainer {
align-items: center;
display: flex;
}
.c8b06d02ca1314f9-barInSingleLine {
flex: 1;
margin-inline: 4px;
}
.c8b06d02ca1314f9-textLeftInSingleLine {
min-width: 32px;
text-align: end;
}
._2ef4989efde1f4e4-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._2ef4989efde1f4e4-headerContainer {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
min-width: 0;
width: 100%;
}
._2ef4989efde1f4e4-headerText {
font-weight: var(--font-weight-bold);
text-transform: uppercase;
}
._2ef4989efde1f4e4-headerText + div {
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
._2ef4989efde1f4e4-headerTextNormal {
}
._2ef4989efde1f4e4-headerTextEmptyBody {
}
._2ef4989efde1f4e4-body {
display: flex;
}
._2ef4989efde1f4e4-bodyAlignCenter,
._2ef4989efde1f4e4-bodyNormal {
align-items: center;
}
._2ef4989efde1f4e4-openGameProfile {
cursor: pointer;
}
._2ef4989efde1f4e4-openGameProfile:hover {
text-decoration: underline;
}
._2ef4989efde1f4e4-assets {
align-self: flex-start;
position: relative;
}
._2ef4989efde1f4e4-assets ._2ef4989efde1f4e4-assetsHangStatus {
height: 40px;
width: 40px;
}
._2ef4989efde1f4e4-assetsLargeMaskStreamPreview,
._2ef4989efde1f4e4-assetsLargeMaskVoiceChannel {
-webkit-mask: url(/assets/f86a4d3ee1fc9ef0.svg);
mask: url(/assets/f86a4d3ee1fc9ef0.svg);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
._2ef4989efde1f4e4-assetsLargeMaskActivityFeed {
-webkit-mask: url(/assets/892bf2036797f905.svg);
mask: url(/assets/892bf2036797f905.svg);
}
._2ef4989efde1f4e4-assetsLargeImage {
-webkit-user-drag: none;
border-radius: 8px;
display: block;
object-fit: cover;
}
._2ef4989efde1f4e4-assetsLargeImageSpotify {
border-radius: 0;
}
._2ef4989efde1f4e4-assetsLargeImageStreamPreview,
._2ef4989efde1f4e4-assetsLargeImageStreamPreviewXbox {
height: 60px;
width: 60px;
}
._2ef4989efde1f4e4-assetsLargeImageStreamPreview,
._2ef4989efde1f4e4-assetsLargeImageStreamPreviewXbox {
}
._2ef4989efde1f4e4-assetsLargeImageActivityFeed,
._2ef4989efde1f4e4-assetsLargeImageActivityFeedXbox {
height: 90px;
width: 90px;
}
._2ef4989efde1f4e4-assetsLargeImageActivityFeed,
._2ef4989efde1f4e4-assetsLargeImageActivityFeedXbox {
}
._2ef4989efde1f4e4-assetsLargeImageVoiceChannel {
height: 64px;
width: 64px;
}
._2ef4989efde1f4e4-assetsLargeImageVoiceChannelXbox {
}
._2ef4989efde1f4e4-assetsLargeImageActivityFeedTwitch {
border-radius: 8px;
height: 260px;
-webkit-mask: linear-gradient(0deg, transparent 10%, #000 80%);
mask: linear-gradient(0deg, transparent 10%, #000 80%);
width: 100%;
}
._2ef4989efde1f4e4-assetsSmallImage {
-webkit-user-drag: none;
border-radius: 50%;
bottom: -4px;
inset-inline-end: -4px;
position: absolute;
}
._2ef4989efde1f4e4-assetsSmallImageStreamPreview,
._2ef4989efde1f4e4-assetsSmallImageVoiceChannel {
height: 20px;
width: 20px;
}
._2ef4989efde1f4e4-assetsSmallImageStreamPreview,
._2ef4989efde1f4e4-assetsSmallImageVoiceChannel {
}
._2ef4989efde1f4e4-assetsSmallImageActivityFeed {
height: 30px;
width: 30px;
}
._2ef4989efde1f4e4-assetsSmallImageActivityFeedWithoutLargeImage,
._2ef4989efde1f4e4-assetsSmallImageStreamPreviewWithoutLargeImage,
._2ef4989efde1f4e4-assetsSmallImageVoiceChannelWithoutLargeImage {
height: 40px;
width: 40px;
}
._2ef4989efde1f4e4-assetsSmallImageActivityFeedWithoutLargeImage,
._2ef4989efde1f4e4-assetsSmallImageStreamPreviewWithoutLargeImage,
._2ef4989efde1f4e4-assetsSmallImageVoiceChannelWithoutLargeImage {
}
._2ef4989efde1f4e4-gameIcon {
flex: 0 0 auto;
}
._2ef4989efde1f4e4-screenshareIcon {
background-image: url(/assets/aa013155f3c2ecb0.svg);
height: 40px;
width: 40px;
}
._2ef4989efde1f4e4-content {
overflow: hidden;
}
._2ef4989efde1f4e4-contentImagesStreamPreview,
._2ef4989efde1f4e4-contentImagesVoiceChannel {
-webkit-margin-start: 10px;
margin-inline-start: 10px;
}
._2ef4989efde1f4e4-contentImagesStreamPreview,
._2ef4989efde1f4e4-contentImagesVoiceChannel {
}
._2ef4989efde1f4e4-contentImagesActivityFeed {
-webkit-margin-start: 10px;
margin-inline-start: 10px;
}
._2ef4989efde1f4e4-contentNoImagesStreamPreview,
._2ef4989efde1f4e4-contentNoImagesVoiceChannel {
}
._2ef4989efde1f4e4-contentNoImagesActivityFeed {
margin-bottom: -4px;
}
._2ef4989efde1f4e4-contentGameImageStreamPreview,
._2ef4989efde1f4e4-contentGameImageVoiceChannel {
margin-bottom: -1px;
-webkit-margin-start: 10px;
margin-inline-start: 10px;
}
._2ef4989efde1f4e4-contentGameImageStreamPreview,
._2ef4989efde1f4e4-contentGameImageVoiceChannel {
}
._2ef4989efde1f4e4-textRow {
display: block;
font-size: 14px;
line-height: 18px;
}
._2ef4989efde1f4e4-clickableDetails,
._2ef4989efde1f4e4-details,
._2ef4989efde1f4e4-playTime,
._2ef4989efde1f4e4-state,
._2ef4989efde1f4e4-timestamp {
}
._2ef4989efde1f4e4-clickableDetails {
cursor: pointer;
}
._2ef4989efde1f4e4-clickableDetails:hover {
text-decoration: underline;
}
._2ef4989efde1f4e4-nameNormal {
}
._2ef4989efde1f4e4-detailsWrap {
}
._2ef4989efde1f4e4-guildIcon {
border-radius: var(--radius-xs);
}
._2ef4989efde1f4e4-guildDetails {
align-items: center;
display: flex;
gap: 4px;
margin-top: 4px;
}
._2ef4989efde1f4e4-voiceChannelInfo {
align-items: center;
display: flex;
gap: 2px;
}
._2ef4989efde1f4e4-nameWrap {
}
._2ef4989efde1f4e4-activityActivityFeed ._2ef4989efde1f4e4-name {
display: none;
}
._2ef4989efde1f4e4-activityActivityFeed ._2ef4989efde1f4e4-details {
font-weight: var(--font-weight-semibold);
}
._2ef4989efde1f4e4-timeBarActivityFeed {
margin-top: 10px;
}
._2ef4989efde1f4e4-timeBarVoiceChannel {
margin-top: 4px;
}
._2ef4989efde1f4e4-activityName,
._2ef4989efde1f4e4-nameNormal,
._2ef4989efde1f4e4-nameWrap {
color: var(--white);
}
._2ef4989efde1f4e4-bodyLink {
}
._2ef4989efde1f4e4-bodyLink:hover {
text-decoration: underline;
}
._2ef4989efde1f4e4-twitchImageContainer {
background: var(--primary-800);
border-radius: 8px;
position: relative;
}
._2ef4989efde1f4e4-twitchImageOverlay {
inset-inline: 0;
bottom: 0;
padding: 16px;
position: absolute;
}
._2ef4989efde1f4e4-twitchBackgroundImage {
display: inline-block;
min-height: 260px;
}
._2ef4989efde1f4e4-streamUsername {
color: var(--primary-200);
font-size: 16px;
font-weight: var(--font-weight-semibold);
line-height: 1.25;
}
._2ef4989efde1f4e4-streamName {
color: var(--primary-300);
font-size: 14px;
font-weight: var(--font-weight-medium);
margin-top: 8px;
}
._2ef4989efde1f4e4-streamGame {
color: var(--primary-400);
font-size: 12px;
font-weight: var(--font-weight-semibold);
margin-top: 8px;
text-transform: uppercase;
}
._2ef4989efde1f4e4-activityVoiceChannel ._2ef4989efde1f4e4-headerText {
color: var(--interactive-text-default);
}
._2ef4989efde1f4e4-activityVoiceChannel ._2ef4989efde1f4e4-activityName,
._2ef4989efde1f4e4-activityVoiceChannel ._2ef4989efde1f4e4-name,
._2ef4989efde1f4e4-activityVoiceChannel ._2ef4989efde1f4e4-nameNormal,
._2ef4989efde1f4e4-activityVoiceChannel ._2ef4989efde1f4e4-nameWrap {
color: var(--text-strong);
}
._2ef4989efde1f4e4-activityVoiceChannel ._2ef4989efde1f4e4-content,
._2ef4989efde1f4e4-activityVoiceChannel ._2ef4989efde1f4e4-details,
._2ef4989efde1f4e4-activityVoiceChannel ._2ef4989efde1f4e4-playTime,
._2ef4989efde1f4e4-activityVoiceChannel ._2ef4989efde1f4e4-state,
._2ef4989efde1f4e4-activityVoiceChannel ._2ef4989efde1f4e4-timestamp {
color: var(--text-default);
}
._2ef4989efde1f4e4-platformIcon {
display: none;
}
._2ef4989efde1f4e4-icon {
display: block;
height: 16px;
width: 16px;
-webkit-margin-end: 4px;
color: var(--text-default);
flex: 0 0 auto;
margin-inline-end: 4px;
}
._2ef4989efde1f4e4-wrap {
flex-wrap: wrap;
}
._2ef4989efde1f4e4-activityDetails {
display: flex;
flex-direction: row;
width: 100%;
}
._2ef4989efde1f4e4-activityActivityFeed ._2ef4989efde1f4e4-content,
._2ef4989efde1f4e4-activityActivityFeed ._2ef4989efde1f4e4-details {
color: var(--text-default);
}
._2ef4989efde1f4e4-activityStreamPreview ._2ef4989efde1f4e4-activityName,
._2ef4989efde1f4e4-activityStreamPreview ._2ef4989efde1f4e4-content,
._2ef4989efde1f4e4-activityStreamPreview ._2ef4989efde1f4e4-details,
._2ef4989efde1f4e4-activityStreamPreview ._2ef4989efde1f4e4-name,
._2ef4989efde1f4e4-activityStreamPreview ._2ef4989efde1f4e4-nameNormal {
color: var(--text-strong);
}
._65bb62b5135fffa1-buttonsWrapper {
flex: 0 1 auto;
margin-top: 12px;
}
._65bb62b5135fffa1-buttonsWrapper:empty {
margin: 0;
}
._65bb62b5135fffa1-horizontal > :not(:first-child) {
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
._65bb62b5135fffa1-vertical > :not(:first-child) {
margin-top: 8px;
}
._34f7d981c8c46c0a-actionsStreamPreview {
margin-top: 10px;
}
._34f7d981c8c46c0a-actionsProfile,
._34f7d981c8c46c0a-actionsProfileV2 {
-webkit-margin-start: 20px;
flex: 1 1 auto;
margin-inline-start: 20px;
margin-top: 0;
}
._34f7d981c8c46c0a-actionsSimplifiedProfile {
-webkit-margin-start: 10px;
flex: 1 1 auto;
margin-inline-start: 10px;
margin-top: 0;
}
._34f7d981c8c46c0a-actionsActivityFeed {
margin-top: 8px;
}
._34f7d981c8c46c0a-errorImage {
height: 135px;
}
._34f7d981c8c46c0a-cannotLaunchImage {
}
._34f7d981c8c46c0a-actionsWrapper {
align-items: flex-end;
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}
._34f7d981c8c46c0a-actionsWrapper ._34f7d981c8c46c0a-actionsProfile,
._34f7d981c8c46c0a-actionsWrapper ._34f7d981c8c46c0a-actionsProfileV2,
._34f7d981c8c46c0a-actionsWrapper ._34f7d981c8c46c0a-actionsSimplifiedProfile {
-webkit-margin-start: 0;
margin-inline-start: 0;
margin-top: 12px;
}
._6da2d8abf659f945-body {
padding: 10px;
}
._6da2d8abf659f945-streamPreviewWrapper {
-webkit-padding-start: 16px;
opacity: 0;
padding-inline-start: 16px;
position: relative;
transform: translate3d(8px, 0, 0) scale(0.98);
transform-origin: 50% 50%;
}
.full-motion ._6da2d8abf659f945-streamPreviewWrapper {
transition:
opacity 0.15s ease,
transform 125ms ease-in;
}
._6da2d8abf659f945-streamPreviewWrapper._6da2d8abf659f945-mounted {
opacity: 1;
transform: translateZ(0) scale(1);
}
._6da2d8abf659f945-streamPreview {
background-color: var(--background-surface-high);
border-radius: 5px;
box-shadow: var(--shadow-border), var(--shadow-high);
overflow: hidden;
width: 252px;
}
._6da2d8abf659f945-previewContainer {
background-color: var(--background-secondary-alt);
box-sizing: border-box;
height: 142px;
position: relative;
width: 100%;
}
._6da2d8abf659f945-previewContainer:hover ._6da2d8abf659f945-previewHover {
opacity: 1;
}
._6da2d8abf659f945-previewHover {
align-items: center;
opacity: 0;
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
cursor: pointer;
display: flex;
font-weight: var(--font-weight-semibold);
justify-content: center;
line-height: 18px;
transition: opacity 0.2s ease-in-out;
}
._6da2d8abf659f945-previewImage {
height: 100%;
width: 100%;
}
._6da2d8abf659f945-applicationName {
color: var(--text-default);
font-size: 14px;
inset-inline-start: 12px;
line-height: 18px;
position: absolute;
top: 8px;
}
._6da2d8abf659f945-liveIcon {
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
._6da2d8abf659f945-activityActions {
margin-top: 0;
}
._6da2d8abf659f945-protip {
margin-top: 10px;
text-align: center;
}
._6da2d8abf659f945-white {
color: var(--white);
}
.theme-dark ._6da2d8abf659f945-applicationName {
color: var(--primary-100);
}
.theme-dark ._6da2d8abf659f945-previewHover {
background: var(--opacity-black-60);
}
.theme-light ._6da2d8abf659f945-previewHover {
background: hsl(var(--primary-500-hsl) / 0.6);
}
._394db220ddf598fe-container {
align-items: center;
display: block;
flex: 1 1 auto;
overflow: hidden;
position: relative;
vertical-align: middle;
white-space: nowrap;
}
._394db220ddf598fe-container ._394db220ddf598fe-chipletContainer {
display: inline-block;
overflow: hidden;
}
._394db220ddf598fe-container ._394db220ddf598fe-chipletParent {
display: inline;
overflow: hidden;
position: relative;
-webkit-padding-start: 4px;
padding-inline-start: 4px;
}
._394db220ddf598fe-container ._394db220ddf598fe-usernameContainer {
display: inline-block;
flex: 1;
margin-top: 2px;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
}
._394db220ddf598fe-container._394db220ddf598fe-isOverlayContainer {
align-content: center;
background: var(--background-base-low);
border-radius: 4px;
display: flex;
flex: none;
flex-direction: row;
height: 20px;
}
._394db220ddf598fe-container._394db220ddf598fe-isOverlayContainer ._394db220ddf598fe-usernameContainer {
margin-top: 0;
}
._394db220ddf598fe-container._394db220ddf598fe-isOverlayContainer ._394db220ddf598fe-chipletContainer,
._394db220ddf598fe-container._394db220ddf598fe-isOverlayContainer ._394db220ddf598fe-chipletParent {
align-content: center;
align-items: center;
display: flex;
}
._394db220ddf598fe-container._394db220ddf598fe-isOverlayContainer ._394db220ddf598fe-chipletContainer {
margin: 0;
padding: 1.5px;
}
._394db220ddf598fe-container._394db220ddf598fe-isOverlayContainer ._394db220ddf598fe-chipletContainer._394db220ddf598fe-noPadding {
padding: 0;
}
._394db220ddf598fe-isOverlayTag {
margin: 0;
}
@keyframes _07f9193042954787-outgoing-call-pulse {
0% {
opacity: 0.2;
}
50% {
opacity: 0.9;
}
to {
opacity: 0.2;
}
}
._07f9193042954787-list {
display: flex;
justify-content: flex-start;
}
._07f9193042954787-listDefault {
align-items: stretch;
flex-direction: column;
flex-wrap: nowrap;
}
._07f9193042954787-listCollapse {
align-items: flex-start;
flex-direction: row;
flex-wrap: wrap;
}
._07f9193042954787-voiceUser {
position: relative;
}
._07f9193042954787-clickable {
cursor: pointer;
}
._07f9193042954787-content {
align-items: center;
border-radius: var(--radius-sm);
display: flex;
gap: 8px;
justify-content: flex-start;
padding-block: 4px;
padding-inline: var(--space-xs) var(--space-xs);
}
._07f9193042954787-flipped {
flex-direction: row-reverse;
}
._07f9193042954787-userLarge {
height: 38px;
}
._07f9193042954787-userSmall {
height: 32px;
}
._07f9193042954787-listCollapse ._07f9193042954787-content {
-webkit-margin-start: 8px;
margin-inline-start: 8px;
padding: 0;
}
._07f9193042954787-listCollapse ._07f9193042954787-content._07f9193042954787-flipped {
margin-inline: 0 8px;
}
._07f9193042954787-listDefault ._07f9193042954787-avatarContainer {
margin-inline: 8px;
}
._07f9193042954787-overlap {
margin-inline: -8px -4px;
margin-bottom: -4px;
margin-top: -1px;
}
._07f9193042954787-overlap ._07f9193042954787-content {
-webkit-margin-start: 0;
margin-inline-start: 0;
}
._07f9193042954787-overlap ._07f9193042954787-avatar {
border: 4px solid var(--background-base-lower);
border-color: var(--background-base-lowest);
margin: 0;
}
._07f9193042954787-avatar {
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
border-radius: 50%;
flex: 0 0 auto;
}
._07f9193042954787-avatarSmall {
height: 24px;
width: 24px;
}
._07f9193042954787-avatarLarge {
height: 30px;
width: 30px;
}
._07f9193042954787-username {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._07f9193042954787-voiceUser:hover ._07f9193042954787-selfHangStatus {
background-color: transparent;
border-color: transparent;
}
div._07f9193042954787-clanTagBadgeContainer {
-webkit-margin-start: 0;
margin-inline-start: 0;
}
._07f9193042954787-clanTagBadge {
height: 16px;
width: 16px;
}
._07f9193042954787-usernameFont {
font-size: 14px;
font-weight: var(--font-weight-medium);
line-height: 18px;
}
._07f9193042954787-icons {
flex: 0 0 auto;
-webkit-margin-end: 0;
margin-inline-end: 0;
}
._07f9193042954787-iconGroup,
._07f9193042954787-icons {
align-items: center;
display: flex;
gap: 4px;
}
._07f9193042954787-iconGroup {
margin: 0;
}
._07f9193042954787-iconGroup:empty {
display: none;
}
._07f9193042954787-flipped ._07f9193042954787-icons {
margin-inline: 8px 0;
}
._07f9193042954787-icon {
height: 16px;
width: 16px;
}
._07f9193042954787-hoverableIcon:hover {
color: var(--icon-subtle);
}
._07f9193042954787-iconTooltipContainer {
line-height: 0;
}
._07f9193042954787-iconTooltip {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
._07f9193042954787-iconPriortySpeaker {
border-radius: 8px;
height: 6px;
inset-inline-start: -16px;
position: absolute;
width: 6px;
}
._07f9193042954787-icon,
._07f9193042954787-username {
color: var(--channels-default);
}
._07f9193042954787-iconServer,
._07f9193042954787-strikethrough {
color: var(--status-danger);
}
._07f9193042954787-listDefault ._07f9193042954787-clickable:hover ._07f9193042954787-content {
background: var(--interactive-background-hover);
}
._07f9193042954787-listDefault ._07f9193042954787-clickable:active ._07f9193042954787-content {
background: var(--interactive-background-active);
}
._07f9193042954787-listDefault ._07f9193042954787-clickable._07f9193042954787-selected ._07f9193042954787-content {
background: var(--interactive-background-selected);
}
._07f9193042954787-listDefault ._07f9193042954787-clickable:hover ._07f9193042954787-username {
color: var(--interactive-text-hover);
}
._07f9193042954787-optionsButton {
align-items: center;
border-radius: 4px;
display: flex;
flex-shrink: 0;
height: 24px;
inset-inline-end: 5px;
justify-content: center;
width: 24px;
}
._07f9193042954787-optionsActive,
._07f9193042954787-optionsButton:hover {
background: var(--interactive-background-active);
}
._07f9193042954787-voiceUser:not(:hover, :focus-within) ._07f9193042954787-optionsButton:not(._07f9193042954787-optionsActive) {
width: 0;
}
._07f9193042954787-voiceUser:not(:hover, :focus-within) ._07f9193042954787-optionsButtonContainer:not(._07f9193042954787-optionsContainerActive) {
display: none;
}
span._07f9193042954787-clanTag {
background: var(--background-mod-subtle);
flex: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
span._07f9193042954787-clanTag._07f9193042954787-isOverlay {
background: var(--background-base-lowest);
}
._07f9193042954787-listDefault ._07f9193042954787-clickable:hover ._07f9193042954787-clanTag {
background: var(--background-accent);
}
.theme-light ._07f9193042954787-listDefault ._07f9193042954787-clickable:hover ._07f9193042954787-clanTag {
background: var(--background-mod-strong);
}
._07f9193042954787-listDefault ._07f9193042954787-clickable._07f9193042954787-selected ._07f9193042954787-username,
._07f9193042954787-usernameSpeaking {
color: var(--interactive-text-active);
}
._07f9193042954787-liveIcon {
background-color: var(--status-danger);
color: var(--white);
}
._07f9193042954787-iconPriortySpeakerSpeaking {
background-color: var(--green-360);
}
._07f9193042954787-iconPriortySpeaker {
background-color: var(--text-muted);
}
._07f9193042954787-disabled {
opacity: 0.5;
}
._07f9193042954787-disabled:hover {
opacity: 1;
}
._07f9193042954787-ringing {
animation: _07f9193042954787-outgoing-call-pulse 1.25s ease-out infinite;
opacity: 0.3;
}
._07f9193042954787-guestSuffix {
color: var(--text-feedback-positive);
}
._07f9193042954787-userAvatar {
margin: 0;
}
._07f9193042954787-gameIcon {
border-radius: var(--radius-xs);
}
.enable-forced-colors ._07f9193042954787-clickable:hover ._07f9193042954787-username,
.enable-forced-colors ._07f9193042954787-username {
background-color: ButtonFace;
color: ButtonText;
forced-color-adjust: none;
text-decoration: underline;
}
.enable-forced-colors ._07f9193042954787-icon {
color: CanvasText;
}
.adebbad0504cfbbb-effect {
position: absolute;
}
.adebbad0504cfbbb-username {
align-items: center;
box-sizing: border-box;
display: flex;
height: 24px;
justify-content: center;
padding: var(--space-4) var(--space-8);
-webkit-margin-start: var(--space-4);
background-color: rgba(19, 19, 24, 0.8);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-border) var(--shadow-high);
cursor: pointer;
flex-shrink: 1;
gap: 8px;
margin-inline-start: var(--space-4);
max-width: 100%;
opacity: 0.8;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.adebbad0504cfbbb-username.adebbad0504cfbbb-streaming {
-webkit-padding-end: var(--space-4);
padding-inline-end: var(--space-4);
}
.adebbad0504cfbbb-voiceUserContainer {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.adebbad0504cfbbb-voiceUser {
align-items: center;
cursor: pointer;
display: flex;
flex-direction: row;
opacity: 0.4;
position: relative;
transition: opacity 0.1s ease-in-out;
}
.adebbad0504cfbbb-voiceUser.adebbad0504cfbbb-flipped {
flex-direction: row;
justify-content: flex-end;
}
.adebbad0504cfbbb-voiceUser.adebbad0504cfbbb-flipped .adebbad0504cfbbb-avatar {
margin-inline: 0;
}
.adebbad0504cfbbb-voiceUser.adebbad0504cfbbb-flipped .adebbad0504cfbbb-username {
margin-inline: 0 var(--space-4);
-webkit-padding-start: var(--space-4);
padding-inline-start: var(--space-4);
}
.adebbad0504cfbbb-voiceUser.adebbad0504cfbbb-flipped .adebbad0504cfbbb-voiceIcons {
-webkit-margin-end: var(--space-4) !important;
margin-inline-end: var(--space-4) !important;
}
.adebbad0504cfbbb-clanTag {
-webkit-margin-start: var(--space-4);
margin-inline-start: var(--space-4);
}
.adebbad0504cfbbb-voiceIcons {
margin-inline: 0 !important;
}
.adebbad0504cfbbb-voiceIcon {
color: var(--white) !important;
display: block;
flex-shrink: 0;
opacity: 0.5;
-webkit-margin-start: 0 !important;
margin-inline-start: 0 !important;
}
.adebbad0504cfbbb-interactive {
opacity: 1 !important;
}
.adebbad0504cfbbb-speaking {
opacity: 0.9;
}
.adebbad0504cfbbb-speaking .adebbad0504cfbbb-avatarSpeakingOutline {
outline: 1px solid var(--green-300);
outline-offset: 2px;
}
.adebbad0504cfbbb-justConnected {
opacity: 0.6;
}
.adebbad0504cfbbb-connectedAnimationContainer {
background-color: #131318;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
bottom: 4px;
inset-inline-start: 36px;
overflow: hidden;
position: absolute;
top: 4px;
z-index: 100;
}
.adebbad0504cfbbb-connectedAnimationContainer.adebbad0504cfbbb-right {
inset-inline-end: 36px;
inset-inline-start: unset;
}
.adebbad0504cfbbb-emptySpace {
height: 0;
width: 0;
}
.adebbad0504cfbbb-connectedAnimationInnerContainer {
align-items: center;
display: flex;
gap: var(--space-4);
height: 100%;
justify-content: flex-start;
overflow: hidden;
white-space: nowrap;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.adebbad0504cfbbb-connectedAnimationInnerContainer.adebbad0504cfbbb-exiting {
max-width: 100%;
}
.adebbad0504cfbbb-connectedAnimationInnerContainer.adebbad0504cfbbb-left {
-webkit-padding-start: 8px;
padding-inline-start: 8px;
text-align: start;
}
.adebbad0504cfbbb-connectedAnimationInnerContainer.adebbad0504cfbbb-right {
-webkit-padding-end: 4px;
padding-inline-end: 4px;
text-align: end;
}
.adebbad0504cfbbb-animation {
height: 24px;
width: 24px;
}
.adebbad0504cfbbb-hiddenVoiceStates {
align-items: center;
display: flex;
flex-direction: row;
gap: var(--space-4);
opacity: 1;
}
.adebbad0504cfbbb-hiddenVoiceStates.adebbad0504cfbbb-locked {
opacity: 0.4;
}
.adebbad0504cfbbb-hiddenVoiceStates.adebbad0504cfbbb-flipped {
flex-direction: row-reverse;
}
.adebbad0504cfbbb-hiddenVoiceStatesAvatar {
justify-content: center;
}
.adebbad0504cfbbb-hiddenVoiceStatesAvatar,
.adebbad0504cfbbb-hiddenVoiceStatesText {
align-items: center;
display: flex;
flex-direction: row;
}
.adebbad0504cfbbb-hiddenVoiceStatesText {
background-color: rgba(19, 19, 24, 0.8);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-border) var(--shadow-high);
cursor: pointer;
flex-shrink: 1;
opacity: 0.8;
padding: var(--space-4) var(--space-8);
}
.fa952ee741b957c0-debugMode {
background-color: rgba(255, 0, 0, 0.25);
border: 2px solid red;
}
.fa952ee741b957c0-clickable {
pointer-events: auto;
}
._98feba23eed84178-key {
background: var(--background-base-low);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xs);
color: var(--text-muted);
font-family: var(--font-code);
font-size: 10px;
font-style: normal;
font-weight: 600;
height: 16px;
line-height: 14px;
text-transform: uppercase;
}
._98feba23eed84178-key + ._98feba23eed84178-key {
-webkit-margin-start: 0;
margin-inline-start: 0;
}
._98feba23eed84178-keySpan {
box-sizing: border-box;
display: inline-block;
margin-inline: var(--space-4);
padding: 0 var(--space-4);
}
._98feba23eed84178-keyDiv {
align-items: center;
display: flex;
font-size: 10px;
height: 10px;
justify-content: center;
line-height: 12px;
padding: 2px 4px;
}
.cbf20cc1d0abae3a-keybindFlexboxLayout {
align-items: baseline;
display: flex;
flex: 0 0 auto;
flex-direction: row;
flex-wrap: wrap;
gap: var(--space-4);
justify-content: flex-start;
max-width: 100%;
overflow: visible;
white-space: normal;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.cbf20cc1d0abae3a-keyCombo {
vertical-align: middle;
}
.cbf20cc1d0abae3a-keyCombo,
.cbf20cc1d0abae3a-keyComboKey {
display: inline-block;
}
._6d7919faa2dc3ac6-bgShade {
background-color: rgba(19, 19, 24, 0.9);
border: 1px solid hsla(0, 0%, 100%, 0.08);
box-sizing: border-box;
}
._6d7919faa2dc3ac6-keybind {
background-color: var(--background-mod-strong);
border-color: var(--border-strong);
color: var(--text-strong);
}
._6d7919faa2dc3ac6-titleWrapper {
align-items: center;
border-radius: 12px;
display: flex;
flex-direction: row;
justify-content: flex-start;
max-width: 100%;
padding: 2px 8px;
}
._6d7919faa2dc3ac6-titleWrapperWithHint {
border-radius: 8px;
}
._6d7919faa2dc3ac6-titleWrapperClickable {
cursor: pointer;
height: auto;
}
._6d7919faa2dc3ac6-extrasEmptySpace {
flex: 1;
height: 24px;
}
._6d7919faa2dc3ac6-button {
align-items: center;
border-radius: 50%;
color: var(--text-strong);
cursor: pointer;
display: flex;
height: 24px;
justify-content: center;
width: 24px;
}
._6d7919faa2dc3ac6-button._6d7919faa2dc3ac6-active {
border-color: var(--background-brand);
}
._9d98d3a9398a6f7d-enableOverlayItemAction {
align-items: center;
display: flex;
flex-direction: row;
gap: 8px;
justify-content: flex-end;
}
._9d98d3a9398a6f7d-collapseable {
background-color: var(--background-base-lower);
border: 1px solid var(--background-mod-muted);
border-radius: var(--radius-sm);
overflow: hidden;
}
._9d98d3a9398a6f7d-notificationSettingsContainer {
display: flex;
flex-direction: column;
gap: 16px;
padding: 12px 0;
}
._9d98d3a9398a6f7d-notificationSettingsContainer ._9d98d3a9398a6f7d-notificationItem {
align-items: center;
border-bottom: 1px solid var(--background-mod-muted);
display: flex;
flex-direction: row;
gap: 12px;
justify-content: space-between;
padding: 8px 0;
}
._9d98d3a9398a6f7d-notificationSettingsContainer ._9d98d3a9398a6f7d-notificationItem ._9d98d3a9398a6f7d-notificationDescriptionContainer {
display: flex;
flex-direction: column;
gap: 2px;
}
._9d98d3a9398a6f7d-groupContainer,
._9d98d3a9398a6f7d-mainCollapseableContainer {
background-color: var(--background-base-lower);
}
._9d98d3a9398a6f7d-groupContainer {
border-radius: var(--radius-sm);
flex: 1;
overflow: hidden;
transition: background-color 0.1s ease-in-out;
}
._9d98d3a9398a6f7d-groupWarning {
cursor: default;
}
._9d98d3a9398a6f7d-standaloneContainer {
background-color: var(--background-base-lower);
border: 1px solid var(--background-mod-muted);
border-radius: var(--radius-sm);
}
._9d98d3a9398a6f7d-groupCollapsedContainer {
align-items: stretch;
background-color: var(--background-base-lower);
display: flex;
flex: 1;
flex-direction: column;
gap: 8px;
padding: 0;
position: relative;
width: 100%;
z-index: 1;
}
._9d98d3a9398a6f7d-groupCollapsed,
._9d98d3a9398a6f7d-groupCollapsedAction {
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
}
._9d98d3a9398a6f7d-groupCollapsedAction {
gap: 8px;
}
._9d98d3a9398a6f7d-emptySpacer {
height: 20px;
width: 20px;
}
._9d98d3a9398a6f7d-playingDot {
background-color: var(--text-feedback-positive);
border-radius: 50%;
height: 8px;
margin: 2px;
width: 8px;
}
._9d98d3a9398a6f7d-groupHeader {
align-items: center;
display: flex;
flex-direction: row;
gap: 8px;
justify-content: flex-start;
padding: 8px 16px;
}
._9d98d3a9398a6f7d-expandedContainer,
._9d98d3a9398a6f7d-groupHeader {
background-color: var(--background-base-lowest);
}
._9d98d3a9398a6f7d-groupContent {
gap: 12px;
justify-content: space-between;
padding: 16px 16px 12px;
}
._9d98d3a9398a6f7d-groupContent,
._9d98d3a9398a6f7d-groupTitle {
align-items: center;
display: flex;
flex-direction: row;
}
._9d98d3a9398a6f7d-groupTitle {
gap: 4px;
justify-content: flex-start;
}
._9d98d3a9398a6f7d-groupIcon {
align-items: center;
display: flex;
justify-content: center;
}
._9d98d3a9398a6f7d-groupMainContent {
display: flex;
flex: 1;
flex-direction: column;
gap: 2px;
}
._9d98d3a9398a6f7d-subtitleContainer {
padding: 12px 16px 4px;
}
._9d98d3a9398a6f7d-scroller {
max-height: 30vh;
}
._9d98d3a9398a6f7d-groupAction {
align-items: center;
display: flex;
flex-direction: row;
gap: 8px;
justify-content: flex-end;
}
._9d98d3a9398a6f7d-gameIcon {
height: 32px;
width: 32px;
}
._9d98d3a9398a6f7d-overlayEnabledSettingsContainer {
display: flex;
flex-direction: column;
gap: 12px;
padding: 12px 0;
}
._9d98d3a9398a6f7d-limitedInteractionOverrideContainer {
display: flex;
flex: 1;
flex-direction: column;
gap: 0;
}
._9d98d3a9398a6f7d-settingsDivider {
background-color: var(--background-mod-muted);
height: 1px;
margin: 16px 0;
width: 100%;
}
._9d98d3a9398a6f7d-rowContainer {
align-items: center;
display: flex;
flex: 1;
flex-direction: row;
gap: 12px;
justify-content: space-between;
}
._9d98d3a9398a6f7d-keybindRecorderContainer {
flex-basis: 50%;
max-width: 280px;
}
._9d98d3a9398a6f7d-keybindHeaderContainer {
flex-basis: auto;
}
._9d98d3a9398a6f7d-keybindMainContainer {
align-items: flex-start;
display: flex;
flex: 1;
flex-direction: column;
gap: 4px;
justify-content: flex-start;
}
._9d98d3a9398a6f7d-keybindAdminWarning {
padding-bottom: 8px;
padding-top: 4px;
}
._9d98d3a9398a6f7d-keybindContainer {
align-items: center;
display: flex;
flex: 1;
flex-direction: row;
gap: 8px;
justify-content: space-between;
width: 100%;
}
._9d98d3a9398a6f7d-voiceSettingsContainer {
display: grid;
gap: 24px;
grid-template-columns: calc(35% - 24px) calc(35% - 24px) 30%;
grid-template-rows: repeat(2, auto);
}
._9d98d3a9398a6f7d-voiceSettingsContainer > :nth-child(3) {
grid-column: 3;
grid-row: 1 / span 2;
}
._9d98d3a9398a6f7d-voiceWidgetContainer {
align-items: flex-start;
background: rgba(0, 0, 0, 0.16);
border: 1px dashed hsla(0, 0%, 100%, 0.16);
border-radius: 12px;
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
width: 100%;
}
._9d98d3a9398a6f7d-widgetSettingsContainer {
align-items: center;
background-color: var(--background-mod-subtle);
border-radius: 8px;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 270px;
padding: 32px;
width: 100%;
}
._9d98d3a9398a6f7d-widgetContainer {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: 4px;
-webkit-padding-start: 24px;
padding-inline-start: 24px;
}
._9d98d3a9398a6f7d-select {
width: 100%;
}
._9d98d3a9398a6f7d-widgetHeaderContainer {
align-items: center;
display: flex;
flex-direction: row;
gap: 4px;
}
._9d98d3a9398a6f7d-sliderContainer {
-webkit-padding-start: 4px;
padding-inline-start: 4px;
width: 100%;
}
._9d98d3a9398a6f7d-formItemTitle {
margin-bottom: 4px;
}
._9d98d3a9398a6f7d-overlaySettingsNux {
align-items: center;
display: flex;
flex-direction: column;
gap: 32px;
justify-content: center;
padding: 12px;
position: relative;
width: 100%;
}
._9d98d3a9398a6f7d-closeCircleButton {
cursor: pointer;
inset-inline-end: 12px;
position: absolute;
top: 24px;
z-index: 1;
}
._9d98d3a9398a6f7d-nuxFirstImage {
height: 371px;
width: 660px;
}
._9d98d3a9398a6f7d-nuxUserSettingsImage {
height: 188px;
width: 660px;
}
._9d98d3a9398a6f7d-mainTitleContainer {
align-items: center;
display: flex;
flex-direction: column;
gap: 12px;
justify-content: center;
text-align: center;
width: 360px;
}
._9d98d3a9398a6f7d-nuxDivider {
background-color: var(--background-mod-strong);
height: 1px;
margin: 16px 0;
width: 100%;
}
._9d98d3a9398a6f7d-systemServiceWarning {
flex-shrink: 1;
margin-inline: 16px;
margin-bottom: 16px;
margin-top: 4px;
}
._37c994eaa0187c7b-container {
background-color: var(--background-surface-high);
border-radius: 5px;
box-shadow: var(--shadow-border), var(--shadow-high);
padding: 2px 4px;
}
._37c994eaa0187c7b-manageSubscription {
background-color: var(--background-base-lowest);
color: var(--text-link);
}
._5ef8ccb1e54132bf-imageWrapper {
align-items: center;
background-color: var(--white);
border-radius: 60px;
display: flex;
height: 60px;
justify-content: center;
overflow: hidden;
position: relative;
width: 60px;
z-index: 1;
}
._5ef8ccb1e54132bf-image {
height: 80%;
width: 80%;
z-index: 1;
}
._5ef8ccb1e54132bf-cooldown {
background-color: var(--blue-200);
}
._5ef8ccb1e54132bf-cooldownImage {
height: 26px;
}
._8dbf5a7a8b8d3617-boostIconContainer {
border-radius: 100%;
box-shadow: var(--elevation-medium);
position: relative;
}
._8dbf5a7a8b8d3617-boostIcon {
height: 36px;
width: 36px;
}
._8dbf5a7a8b8d3617-boostIconCanceled {
display: block;
}
._8dbf5a7a8b8d3617-snowflake {
inset-inline-start: -16px;
position: absolute;
top: 2px;
z-index: 1;
}
._5dba5003598d9c70-guildContainer {
align-items: center;
background-color: var(--background-secondary-alt);
display: flex;
flex-direction: row;
padding: 30px 18px;
position: relative;
}
._5dba5003598d9c70-guildInfoContainer {
display: flex;
flex: 1;
flex-direction: column;
margin: 0 16px;
}
._5dba5003598d9c70-guildBoostStatsContainer {
align-items: center;
display: flex;
flex-direction: row;
margin-top: 6px;
}
._5dba5003598d9c70-separator {
height: 18px;
-webkit-border-end: 1px solid var(--text-muted);
border-inline-end: 1px solid var(--text-muted);
margin: 0 10px;
opacity: 0.5;
}
._5dba5003598d9c70-guildBoostBadge {
color: var(--guild-boosting-pink);
-webkit-margin-end: 6px;
height: 16px;
margin-inline-end: 6px;
width: 16px;
}
._5dba5003598d9c70-sparkle {
color: var(--white);
position: absolute;
z-index: 1;
}
.theme-light ._5dba5003598d9c70-sparkle {
color: var(--guild-boosting-pink);
}
._5dba5003598d9c70-sparkle1 {
bottom: 9px;
inset-inline-start: 0;
}
._5dba5003598d9c70-sparkle2 {
inset-inline-end: 9px;
top: -15px;
}
._5dba5003598d9c70-sparkle3 {
inset-inline-end: 0;
top: 24px;
}
._5dba5003598d9c70-sparkle4 {
inset-inline-end: -22px;
top: 28px;
}
._5dba5003598d9c70-sideSparkleContainer {
background-image: radial-gradient(100% 100% at center, #fff 0, hsla(0, 0%, 100%, 0) 50%);
position: absolute;
width: 1px;
z-index: 1;
}
.theme-light ._5dba5003598d9c70-sideSparkleContainer {
background-image: radial-gradient(100% 100% at center, hsl(var(--guild-boosting-pink-hsl) / 1) 0, hsl(var(--guild-boosting-pink-hsl) / 0) 50%);
}
._5dba5003598d9c70-sideSparkle {
inset-inline-start: -8px;
}
.ceb06aa49ba836f9-container,
.ceb06aa49ba836f9-wrapper {
display: flex;
flex-direction: column;
margin-bottom: 30px;
}
.ceb06aa49ba836f9-container {
gap: 12px;
}
.ceb06aa49ba836f9-appliedBoostContainer {
background-color: var(--background-secondary-alt);
border-radius: var(--radius-sm);
display: flex;
flex-direction: column;
overflow: hidden;
}
.ceb06aa49ba836f9-guildContainer {
align-items: center;
display: flex;
flex-direction: row;
padding: 18px;
}
.ceb06aa49ba836f9-guildInfoContainer {
display: flex;
flex: 1;
flex-direction: column;
margin: 0 15px;
}
.ceb06aa49ba836f9-guildBoostStatsContainer {
align-items: center;
display: flex;
flex-direction: row;
margin-top: 6px;
}
.ceb06aa49ba836f9-separator {
height: 18px;
-webkit-border-end: 1px solid var(--text-muted);
border-inline-end: 1px solid var(--text-muted);
margin: 0 10px;
}
.ceb06aa49ba836f9-guildBoostBadge {
color: var(--guild-boosting-pink);
-webkit-margin-end: 6px;
margin-inline-end: 6px;
}
.ceb06aa49ba836f9-boostContainer {
background-color: var(--primary-800);
display: flex;
flex-direction: column;
padding: 0 20px;
}
.theme-light .ceb06aa49ba836f9-boostContainer {
background-color: var(--primary-200);
}
.ceb06aa49ba836f9-boostInnerContainer {
align-items: center;
display: flex;
flex-direction: row;
padding: 6px 0;
}
.ceb06aa49ba836f9-boostContainerSeparator {
background-color: var(--primary-500);
height: 1px;
opacity: 0.48;
}
.theme-light .ceb06aa49ba836f9-boostContainerSeparator {
opacity: 0.2;
}
.ceb06aa49ba836f9-cancel {
color: var(--text-feedback-warning);
}
.ceb06aa49ba836f9-boostDescriptionContainer {
flex: 1;
margin: 0 10px;
position: relative;
}
.ceb06aa49ba836f9-boostDescriptionInnerContainer {
position: absolute;
transform: translateY(-50%);
width: 100%;
}
.ceb06aa49ba836f9-boostSlotMenuIcon {
color: var(--interactive-text-default);
cursor: pointer;
display: flex;
}
.ceb06aa49ba836f9-mainSeparator {
background-color: var(--primary-500);
height: 1px;
opacity: 0.48;
}
.theme-light .ceb06aa49ba836f9-mainSeparator {
opacity: 0.3;
}
._8e08ce7f1f1b7f5a-wrapper {
isolation: isolate;
position: relative;
}
._8e08ce7f1f1b7f5a-gradient {
background:
center 15%/90% auto url(/assets/63ac51b66622ae3d.svg) no-repeat,
linear-gradient(180deg, var(--premium-tier-0-header-gradient-2) 0, var(--premium-tier-0-header-gradient-3) 60%, var(--premium-tier-0-header-gradient-4) 120%);
border-radius: 8px 8px 0 0;
overflow: hidden;
padding: 76px 56px 36px;
position: relative;
z-index: 1;
}
._8e08ce7f1f1b7f5a-guildBoostGemWrapper {
background-color: var(--white);
border-radius: 34px;
box-shadow: var(--elevation-medium);
height: 68px;
overflow: hidden;
top: 0;
transform: translate(-50%, -25%);
width: 68px;
z-index: 2;
}
._8e08ce7f1f1b7f5a-guildBoostGem,
._8e08ce7f1f1b7f5a-guildBoostGemWrapper {
inset-inline-start: 50%;
position: absolute;
}
._8e08ce7f1f1b7f5a-guildBoostGem {
height: 60px;
top: 50%;
transform: translate(-50%, -50%);
}
._8e08ce7f1f1b7f5a-heading {
color: var(--text-strong);
position: relative;
text-align: center;
z-index: 2;
}
._8e08ce7f1f1b7f5a-heading p {
margin: 0;
}
._8e08ce7f1f1b7f5a-wave {
bottom: -96px;
fill: var(--background-base-low);
inset-inline-start: 0;
position: absolute;
width: 100%;
z-index: 1;
}
._834f55a43c168c27-wrapper {
align-items: center;
background-color: var(--background-secondary-alt);
border-radius: var(--radius-sm);
display: flex;
flex-direction: row;
margin-bottom: 50px;
padding: 30px 18px;
position: relative;
}
._834f55a43c168c27-icon {
border-radius: 100%;
height: 60px;
width: 60px;
}
._834f55a43c168c27-info {
display: flex;
flex: 1;
flex-direction: column;
margin: 0 16px;
}
._37ae554d51e1c7d1-wrapper {
background-color: var(--background-secondary-alt);
border-radius: var(--radius-sm);
padding: 16px 18px;
}
._37ae554d51e1c7d1-copy,
._37ae554d51e1c7d1-wrapper {
align-items: center;
display: flex;
}
._37ae554d51e1c7d1-cta {
color: var(--text-link) !important;
display: inline;
height: auto;
-webkit-margin-start: 4px;
margin-inline-start: 4px;
min-height: auto;
min-width: auto;
padding: 0;
}
._37ae554d51e1c7d1-boostIcon {
color: var(--guild-boosting-pink);
-webkit-margin-end: 4px;
height: 16px;
margin-inline-end: 4px;
width: 16px;
}
._5153730f0c7cf20d-wrapper {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 50px;
}
._5153730f0c7cf20d-header {
margin-bottom: 20px;
margin-top: 30px;
}
._5153730f0c7cf20d-recommendedServerCard {
border-radius: var(--radius-sm);
position: relative;
}
._686cef7a0274c88d-wrapper {
display: flex;
flex-direction: column;
margin-bottom: 40px;
padding: 0 70px;
text-align: center;
}
._686cef7a0274c88d-subtitle {
margin-bottom: 6px;
}
.d970dab3554a9582-subscription {
align-items: center;
background-color: var(--background-base-lower);
border-radius: 8px;
display: flex;
padding: 16px;
}
.d970dab3554a9582-subscriptionInfo {
-webkit-margin-start: 16px;
margin-inline-start: 16px;
}
.d970dab3554a9582-tierInfo {
align-items: center;
display: flex;
}
.d970dab3554a9582-tierPill {
align-items: center;
align-self: flex-start;
background-color: var(--background-secondary-alt);
border-radius: 11px;
display: inline-flex;
font-size: 12px;
line-height: 14px;
padding-block: 4px;
padding-inline: 4px 8px;
}
.d970dab3554a9582-tierPill,
.d970dab3554a9582-tierPillStar {
color: var(--text-default);
}
.d970dab3554a9582-tierPillStar {
height: 16px;
width: 16px;
-webkit-margin-end: 5px;
margin-inline-end: 5px;
}
.d970dab3554a9582-guildIcon {
background-color: var(--background-base-low);
}
.d970dab3554a9582-guildName {
color: var(--text-strong);
flex: 1;
font-size: 16px;
font-weight: var(--font-weight-bold);
line-height: 20px;
margin-bottom: 8px;
}
.d970dab3554a9582-levelIcon {
height: 16px;
margin: 0 4px;
width: 16px;
}
.d970dab3554a9582-levelDownIcon {
color: var(--status-danger);
}
.d970dab3554a9582-levelUpIcon {
color: var(--green-360);
}
.theme-light .d970dab3554a9582-boost {
background-color: var(--primary-230);
}
.theme-light .d970dab3554a9582-guildName {
color: var(--primary-500);
}
.d970dab3554a9582-tierPillGem {
color: var(--text-muted);
}
._2cbe84306807f742-content {
display: flex;
flex-direction: column;
padding-bottom: 16px;
}
._2cbe84306807f742-guildCard {
margin: 16px 0;
}
._2cbe84306807f742-image {
align-self: center;
background-repeat: no-repeat;
background-size: 100%;
flex-shrink: 0;
margin: 20px 0;
}
._2cbe84306807f742-transferGuildCardHeader {
margin-top: 16px;
text-transform: uppercase;
}
._2cbe84306807f742-activeTransferGuildCardBorder {
background: linear-gradient(to left, var(--guild-boosting-purple), var(--guild-boosting-blue));
padding: 2px;
}
._2cbe84306807f742-activeTransferGuildCardBorder,
._2cbe84306807f742-transferFromGuildCard {
border-radius: 8px;
margin-top: 8px;
}
._2cbe84306807f742-transferToGuildCard {
border-radius: 8px;
}
._2cbe84306807f742-error {
margin: 16px;
}
._2cbe84306807f742-pendingCancellation {
align-items: center;
background: var(--background-feedback-warning);
border: 1px solid var(--icon-feedback-warning);
border-radius: 4px;
display: flex;
margin-top: 16px;
padding: 8px 16px;
}
._2cbe84306807f742-pendingCancellationIcon {
color: var(--text-feedback-warning);
flex-shrink: 0;
}
._2cbe84306807f742-pendingCancellationMessage {
color: var(--text-default);
-webkit-margin-start: 10px;
margin-inline-start: 10px;
}
._2cbe84306807f742-footer {
padding: 16px 24px;
}
._39466562bae551de-modal {
overflow: hidden;
}
._39466562bae551de-modalCloseButton {
inset-inline-end: 12px;
opacity: 0.8;
position: absolute;
top: 12px;
}
._39466562bae551de-modalCloseButton:hover {
opacity: 1;
}
._39466562bae551de-modalContent {
padding: 8px 0;
}
._39466562bae551de-selectHeaderContainer {
align-items: flex-start;
display: flex;
flex-direction: column;
z-index: auto;
}
._39466562bae551de-selectHeader {
margin-bottom: 16px;
}
._39466562bae551de-selectGuild {
align-items: center;
border-radius: 4px;
cursor: pointer;
display: flex;
padding: 8px 6px;
}
._39466562bae551de-selectGuild:hover {
background-color: var(--background-secondary-alt);
}
._39466562bae551de-selectGuildIcon {
flex: 0 0 auto;
}
._39466562bae551de-selectGuildName {
flex: 0 1 auto;
-webkit-margin-start: 12px;
margin-inline-start: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._39466562bae551de-selectGuildLevel {
flex: 0 0 auto;
-webkit-margin-start: 6px;
margin-inline-start: 6px;
}
._39466562bae551de-selectGuildCopy {
align-items: baseline;
display: flex;
flex: 1 1 auto;
overflow: hidden;
}
._39466562bae551de-selectGuildPseudoCta {
background: var(--brand-500);
flex: 0 0 auto;
-webkit-margin-start: 6px;
border-radius: 4px;
margin-inline-start: 6px;
padding: 6px 16px;
}
._39466562bae551de-emptyStateWrapper {
padding: 8px 16px;
text-align: center;
}
._39466562bae551de-emptyStateWrapper p {
margin: 0;
}
._39466562bae551de-emptyStateWrapper a:hover {
text-decoration: underline;
}
._7e0905bb27d4f913-header {
background-image: url(/assets/cb4131669938b6ad.svg);
background-position: top;
background-repeat: no-repeat;
background-size: cover;
box-sizing: border-box;
height: 132px;
}
._7e0905bb27d4f913-animation {
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
}
._7e0905bb27d4f913-headerTitle {
background-image: url(/assets/9f911879992ce2d1.svg);
height: 28px;
width: 60px;
}
._7e0905bb27d4f913-header ._7e0905bb27d4f913-closeButton {
color: var(--white);
inset-inline-end: 12px;
opacity: 0.8;
position: absolute;
top: 12px;
}
._7e0905bb27d4f913-header ._7e0905bb27d4f913-closeButton:hover {
opacity: 1;
}
.enable-forced-colors ._7e0905bb27d4f913-header ._7e0905bb27d4f913-closeButton {
opacity: 1;
}
._884d1a68e0616619-animationContainer,
._884d1a68e0616619-container {
position: relative;
z-index: 0;
}
._884d1a68e0616619-animationContainer {
border-radius: 8px;
display: flex;
flex-direction: column;
overflow: hidden;
}
._884d1a68e0616619-svgBorder {
height: calc(100% + 2px);
inset-inline-start: -1px;
position: absolute;
top: -1px;
width: calc(100% + 2px);
z-index: 1;
}
._884d1a68e0616619-svgCopy {
display: block;
}
._884d1a68e0616619-animationContainer {
color: var(--text-strong);
}
._884d1a68e0616619-shine {
color: var(--opacity-white-48);
}
._5e07c67f3bc3bdd9-upsellFooter {
align-items: center;
background-color: var(--background-base-lower);
border-radius: 8px;
color: var(--text-default);
display: flex;
font-size: 14px;
line-height: 18px;
margin-top: 16px;
padding: 8px;
}
._5e07c67f3bc3bdd9-upsellFooterIcon {
flex-shrink: 0;
-webkit-margin-end: 8px;
height: 24px;
margin-inline-end: 8px;
width: 24px;
}
._5e07c67f3bc3bdd9-reverseTrialUpsellContainer {
border-radius: 4px;
box-shadow: 0 0 40px 0 rgba(229, 85, 211, 0.5);
position: relative;
}
._5e07c67f3bc3bdd9-unlockIcon {
height: 46px;
inset-inline-start: 7px;
pointer-events: none;
position: absolute;
top: -14px;
width: 46px;
}
._5e07c67f3bc3bdd9-upsellText {
-webkit-padding-start: 48px;
padding-inline-start: 48px;
}
._945b88f4a5fbc681-bodyText {
color: var(--text-default);
font-size: 16px;
line-height: 20px;
}
._945b88f4a5fbc681-planSelectText {
margin-bottom: 16px;
}
._945b88f4a5fbc681-planSelectRow {
align-items: center;
display: flex;
justify-content: space-between;
margin: 8px auto;
}
._945b88f4a5fbc681-planSelectRowALaCarte {
justify-content: flex-start;
}
._945b88f4a5fbc681-planSelectorWrapper {
align-items: center;
display: flex;
}
._945b88f4a5fbc681-planSelectorHeader {
font-weight: var(--font-weight-semibold);
margin-bottom: 8px;
}
._945b88f4a5fbc681-planSelectorRadioBarALaCarte {
align-items: flex-start;
}
._945b88f4a5fbc681-planSelectorRadioIconALaCarte {
margin-top: 4px;
}
._945b88f4a5fbc681-planSelectorPlanName {
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
._945b88f4a5fbc681-planSelectorLabel {
color: var(--text-default);
font-size: 16px;
line-height: 20px;
-webkit-margin-start: 16px;
margin-inline-start: 16px;
}
._945b88f4a5fbc681-planSelectorPreviewPrice {
color: var(--interactive-text-default);
font-size: 16px;
line-height: 20px;
}
._945b88f4a5fbc681-planSelectDivider {
background-color: var(--border-subtle);
height: 1px;
margin: 16px 0;
}
._945b88f4a5fbc681-planSelectorSubtotal {
color: var(--interactive-text-active);
font-size: 16px;
font-weight: var(--font-weight-semibold);
line-height: 20px;
}
._945b88f4a5fbc681-invoiceTableBottom,
._945b88f4a5fbc681-paymentSourceWrapper {
margin: 16px 0;
}
._945b88f4a5fbc681-taxInclusiveNote {
margin-top: 12px;
}
._945b88f4a5fbc681-confirmationContainer {
align-items: center;
display: flex;
flex-direction: column;
padding: 56px 32px 64px;
}
._945b88f4a5fbc681-confirmationAnimation {
height: 140px;
margin-bottom: 32px;
width: 400px;
}
._945b88f4a5fbc681-confirmationText,
._945b88f4a5fbc681-confirmationUpgradedBanner {
margin-bottom: 16px;
}
._945b88f4a5fbc681-confirmationText {
color: var(--interactive-text-default);
font-size: 16px;
font-weight: var(--font-weight-medium);
line-height: 20px;
text-align: center;
}
._945b88f4a5fbc681-confirmationText p {
margin: 0;
}
._945b88f4a5fbc681-confirmationText p + p {
margin-top: 8px;
}
._945b88f4a5fbc681-existingSlotNotice {
align-items: center;
background-color: var(--background-base-lower);
border-radius: 8px;
color: var(--text-default);
display: flex;
font-size: 14px;
line-height: 18px;
margin-bottom: 16px;
margin-top: 16px;
padding: 8px;
}
._945b88f4a5fbc681-existingSlotIcon {
flex-shrink: 0;
-webkit-margin-end: 8px;
height: 24px;
margin-inline-end: 8px;
width: 24px;
}
._945b88f4a5fbc681-existingSlotTooltipWarningIcon {
height: 16px;
vertical-align: text-bottom;
width: 14px;
-webkit-margin-start: 6px;
cursor: pointer;
margin-inline-start: 6px;
}
._945b88f4a5fbc681-loadingSpinner {
flex: 1;
max-width: 100px;
}
._945b88f4a5fbc681-reverseTrialContextInfoDivider {
background-color: var(--border-subtle);
height: 1px;
}
._945b88f4a5fbc681-reverseTrialContextText {
margin: 12px 0;
}
._945b88f4a5fbc681-reverseTrialContextMarginBottom {
margin-bottom: 8px;
}
.c609c885432f58b3-perkRow {
align-items: center;
border-bottom: 1px solid var(--channeltextarea-background);
display: flex;
margin: 0 16px;
padding: 16px 0;
}
.c609c885432f58b3-perkRow:last-child {
border-bottom: none;
}
.c609c885432f58b3-perkIconContainer {
display: flex;
justify-content: center;
-webkit-margin-end: 16px;
margin-inline-end: 16px;
}
.c609c885432f58b3-perkIcon,
.c609c885432f58b3-perkIconContainer {
height: 24px;
width: 24px;
}
.c609c885432f58b3-perkDescription {
color: var(--interactive-text-active);
font-size: 16px;
font-weight: var(--font-weight-medium);
line-height: 20px;
}
._3bf54bb4cb13e0cd-content {
padding-top: 32px;
}
._3bf54bb4cb13e0cd-closeButton {
inset-inline-end: 4px;
position: absolute;
top: 12px;
}
._3bf54bb4cb13e0cd-upsellImage {
background-image: url(/assets/7a8cfb4e8b5926c9.svg);
background-size: cover;
height: 120px;
margin: 0 auto 32px;
width: 265px;
}
._3bf54bb4cb13e0cd-upsellImageWithTrialOffer {
margin-top: 24px;
}
._3bf54bb4cb13e0cd-premiumTrialBadge {
inset-inline-start: 50%;
position: absolute;
top: 20px;
transform: translateX(-50%);
}
._3bf54bb4cb13e0cd-bodyText {
color: var(--interactive-text-default);
font-size: 16px;
font-weight: var(--font-weight-medium);
line-height: 20px;
}
._3bf54bb4cb13e0cd-perksList {
background-color: var(--background-base-lower);
border-radius: 8px;
margin: 16px 0;
}
._3bf54bb4cb13e0cd-perkIconGuild {
color: var(--guild-boosting-pink);
}
._3bf54bb4cb13e0cd-perkIconUpload {
color: var(--premium-perk-yellow);
}
._3bf54bb4cb13e0cd-perkIconStream {
color: var(--premium-perk-dark-blue);
}
._3bf54bb4cb13e0cd-perkIconChatPerks {
color: var(--brand-400);
}
._3bf54bb4cb13e0cd-backStep {
flex-grow: 1;
-webkit-margin-start: -16px;
margin-inline-start: -16px;
}
._3bf54bb4cb13e0cd-footerRight {
display: flex;
}
._65b4870a32f7e6ba-contentWrapper {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
}
._65b4870a32f7e6ba-content {
overflow: hidden;
}
._65b4870a32f7e6ba-planSelectStep {
border: none;
}
._65b4870a32f7e6ba-breadcrumbsWrapper {
border-bottom: 1px solid var(--border-subtle);
padding: 0 16px 16px;
}
._65b4870a32f7e6ba-externalErrorBlock {
margin-top: 16px;
}
._65b4870a32f7e6ba-externalErrorBlock a {
text-decoration: underline;
}
._65b4870a32f7e6ba-helpMessageWrapper {
margin-bottom: 16px;
}
._65b4870a32f7e6ba-bodyWrapper {
position: relative;
}
._65b4870a32f7e6ba-footerRight {
display: flex;
}
._65b4870a32f7e6ba-backStep {
flex-grow: 1;
-webkit-margin-start: -16px;
margin-inline-start: -16px;
}
._65b4870a32f7e6ba-copy {
color: var(--text-default);
}
._65b4870a32f7e6ba-loadingWrapper {
align-items: center;
display: flex;
justify-content: center;
min-height: 398px;
padding-top: 16px;
}
._0f8ce48f594c7284-modal {
overflow: hidden;
}
._0f8ce48f594c7284-selectContent {
padding: 8px 0;
}
._0f8ce48f594c7284-confirmImage {
height: 134px;
width: 264px;
}
._0f8ce48f594c7284-transferConfirmImage {
height: 128px;
width: 216px;
}
._0f8ce48f594c7284-successBody {
align-items: center;
display: flex;
flex-direction: column;
padding-bottom: 20px;
}
._0f8ce48f594c7284-successAnimation {
height: 200px;
width: 300px;
}
._0f8ce48f594c7284-quantitySelectorBody {
margin-top: 20px;
}
._0f8ce48f594c7284-quantitySelectorDescription,
._0f8ce48f594c7284-quantitySelectorHeader {
margin-bottom: 16px;
}
._0f8ce48f594c7284-quantitySelectorWrapper {
align-items: center;
display: flex;
margin: 32px auto;
}
._0f8ce48f594c7284-quantitySelectorLabel {
line-height: 20px;
-webkit-margin-start: 16px;
margin-inline-start: 16px;
}
._0f8ce48f594c7284-modalCloseButton {
inset-inline-end: 12px;
opacity: 0.8;
position: absolute;
top: 12px;
}
._0f8ce48f594c7284-modalCloseButton:hover {
opacity: 1;
}
.images-light ._0f8ce48f594c7284-confirmImage {
background-image: url(/assets/52c92d8492ebe041.svg);
}
.images-light ._0f8ce48f594c7284-transferConfirmImage {
background-image: url(/assets/2d416896e0bbb412.svg);
}
.images-dark ._0f8ce48f594c7284-confirmImage {
background-image: url(/assets/52c92d8492ebe041.svg);
}
.images-dark ._0f8ce48f594c7284-transferConfirmImage {
background-image: url(/assets/c278e895ac47b4af.svg);
}
._0f8ce48f594c7284-tierPill {
background-color: var(--background-secondary-alt);
color: var(--text-default);
}
._968a4b9cecf98b8c-body {
color: var(--text-default);
font-size: 16px;
line-height: 20px;
padding-bottom: 16px;
}
._968a4b9cecf98b8c-invoiceTable {
margin: 16px 0;
}
._968a4b9cecf98b8c-cancelImage {
background-image: url(/assets/14d412ef35277fe7.svg);
height: 128px;
margin: 0 auto 24px;
width: 270px;
}
html ._968a4b9cecf98b8c-invoiceCancelRow {
color: var(--status-danger);
}
._968a4b9cecf98b8c-error {
margin-bottom: 16px;
margin-top: 16px;
}
._968a4b9cecf98b8c-textButton {
-webkit-margin-end: 12px;
margin-inline-end: 12px;
}
.fe75b7c9484c016c-body {
color: var(--text-default);
font-size: 16px;
line-height: 20px;
padding-bottom: 16px;
}
.fe75b7c9484c016c-uncancelImage {
background-image: url(/assets/d5c03099c5d632e3.svg);
height: 128px;
margin: 0 auto 24px;
width: 234px;
}
.fe75b7c9484c016c-error {
margin-bottom: 16px;
}
._9902028ffbba1d6c-wrapper {
margin-bottom: 10px;
position: relative;
}
._9902028ffbba1d6c-specialHeader {
align-items: center;
background: linear-gradient(90deg, hsl(var(--premium-tier-2-purple-for-gradients-2-hsl) / 0.4) 0, hsl(var(--premium-tier-2-pink-for-gradients-hsl) / 0.3) 100%);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
display: flex;
height: 40px;
position: relative;
-webkit-padding-start: 20px;
padding-inline-start: 20px;
}
._9902028ffbba1d6c-pill {
background-image: linear-gradient(95deg, var(--premium-tier-2-purple-for-gradients) 0, var(--premium-tier-2-purple-for-gradients-2) 49.96%, var(--premium-tier-2-pink-for-gradients) 95.93%);
border-radius: 10px;
color: var(--white);
inset-inline-start: 20px;
padding: 0 8px;
position: absolute;
top: -8px;
z-index: 30;
}
._9902028ffbba1d6c-content._9902028ffbba1d6c-headerWithoutSpecialHeader {
border-radius: var(--radius-sm);
}
._9902028ffbba1d6c-content._9902028ffbba1d6c-headerWithBoost {
border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
._9902028ffbba1d6c-content {
position: relative;
z-index: 0;
}
._9902028ffbba1d6c-content:after,
._9902028ffbba1d6c-content:before {
border: 1px solid transparent;
border-radius: inherit;
box-sizing: border-box;
content: "";
height: 100%;
inset-inline-start: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
}
._9902028ffbba1d6c-content:after {
border-color: var(--guild-boosting-blue);
-webkit-mask: linear-gradient(45deg, #000, transparent);
mask: linear-gradient(45deg, #000, transparent);
}
._9902028ffbba1d6c-content:before {
border-color: var(--guild-boosting-purple);
}
._9902028ffbba1d6c-border {
height: 100%;
inset-inline-start: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
._9902028ffbba1d6c-header {
align-items: center;
background-color: var(--background-base-lower);
border-radius: var(--radius-sm);
display: flex;
padding: 30px 18px;
}
._9902028ffbba1d6c-headerHeading {
margin-bottom: 4px;
}
._9902028ffbba1d6c-headerContentPrimary {
align-items: center;
display: flex;
flex: 1 1 auto;
-webkit-margin-end: 12px;
margin-inline-end: 12px;
width: 100%;
}
._9902028ffbba1d6c-headerBoostGems {
display: flex;
flex: 0 0 auto;
-webkit-margin-end: 16px;
isolation: isolate;
margin-inline-end: 16px;
}
._9902028ffbba1d6c-headerBoostGem {
box-shadow: var(--elevation-medium);
}
._9902028ffbba1d6c-headerBoostGem + ._9902028ffbba1d6c-headerBoostGem {
-webkit-margin-start: -30px;
margin-inline-start: -30px;
}
._9902028ffbba1d6c-headerLearnMoreLink {
color: var(--text-link);
cursor: pointer;
}
._9902028ffbba1d6c-headerLearnMoreLink:hover {
text-decoration: underline;
}
._9902028ffbba1d6c-unappliedBoostSlots {
background-color: var(--background-secondary-alt);
border-radius: 0 0 8px 8px;
padding: 0 18px;
}
._9902028ffbba1d6c-unappliedGuildBoostSlot {
align-items: center;
display: flex;
padding: 6px 0;
}
._9902028ffbba1d6c-unappliedGuildBoostSlot + ._9902028ffbba1d6c-unappliedGuildBoostSlot {
border-top: 1px solid hsl(var(--primary-500-hsl) / 0.5);
}
.theme-light ._9902028ffbba1d6c-unappliedGuildBoostSlot + ._9902028ffbba1d6c-unappliedGuildBoostSlot {
border-top-color: hsl(var(--primary-500-hsl) / 0.2);
}
._9902028ffbba1d6c-unappliedGuildBoostSlotContentPrimary {
align-items: center;
display: flex;
flex: 1 1 auto;
-webkit-margin-end: 12px;
margin-inline-end: 12px;
width: 100%;
}
._9902028ffbba1d6c-unappliedGuildBoostSlotContentSecondary {
flex: 0 0 auto;
}
._9902028ffbba1d6c-unappliedGuildBoostSlotIcon {
flex: 0 0 auto;
-webkit-margin-end: 10px;
margin-inline-end: 10px;
}
._9902028ffbba1d6c-unappliedGuildBoostSlotCta {
padding: 0;
}
@media (max-width: 800px) {
._9902028ffbba1d6c-header,
._9902028ffbba1d6c-unappliedGuildBoostSlot {
flex-direction: column;
}
._9902028ffbba1d6c-headerContentPrimary,
._9902028ffbba1d6c-unappliedGuildBoostSlotContentPrimary {
-webkit-margin-end: 0;
margin-inline-end: 0;
}
._9902028ffbba1d6c-headerContentSecondary,
._9902028ffbba1d6c-unappliedGuildBoostSlotContentSecondary {
align-self: flex-end;
margin-top: 4px;
}
}
._744fffb886c6f25b-tierComparisonTable {
margin-bottom: 64px;
}
._744fffb886c6f25b-boosterRecognitionCard {
max-width: 140px;
min-width: 130px;
}
._744fffb886c6f25b-faq {
padding: 36px 20px;
}
._744fffb886c6f25b-blockedPaymentsWarning {
margin-bottom: 32px;
}
._744fffb886c6f25b-FPContainer {
margin-bottom: 63px;
}
._744fffb886c6f25b-FPPill {
background-color: var(--background-accent);
}
._744fffb886c6f25b-guildBoostingSettings {
display: flex;
flex-direction: column;
}
._39fd057adac5d09c-container {
box-sizing: border-box;
display: flex;
flex: 1;
flex-direction: column;
}
._39fd057adac5d09c-loading {
align-items: center;
display: flex;
height: 520px;
justify-content: center;
}
._39fd057adac5d09c-background {
background-repeat: no-repeat;
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
}
._39fd057adac5d09c-content {
position: relative;
}
._39fd057adac5d09c-divider {
background-color: var(--border-subtle);
height: 1px;
margin: 40px 0;
}
.b1c93b1e46eff0f4-container {
align-self: center;
margin-top: var(--space-32);
}
.b1c93b1e46eff0f4-emptySearchIcon {
height: 40px;
margin-bottom: 8px;
width: 100%;
}
._803f2f55621144fb-description {
white-space: pre-wrap;
}
._803f2f55621144fb-description p:first-child {
margin-top: 0;
}
._803f2f55621144fb-description p:last-child,
._803f2f55621144fb-groupTitle {
margin-bottom: 0;
}
._803f2f55621144fb-sessions {
margin: 32px 0;
}
._803f2f55621144fb-otherSessions {
display: flex;
flex-direction: column;
margin-top: 16px;
}
._803f2f55621144fb-session {
align-items: center;
border-bottom: 1px solid var(--border-subtle);
display: flex;
gap: 24px;
padding: 16px 0;
}
._803f2f55621144fb-session._803f2f55621144fb-currentSession {
border-bottom: none;
}
._803f2f55621144fb-sessionIcon {
align-items: center;
background: var(--interactive-text-default);
border-radius: 50%;
color: var(--background-base-lower);
display: flex;
height: 48px;
justify-content: center;
padding: 8px;
width: 48px;
}
._803f2f55621144fb-legacySession ._803f2f55621144fb-sessionIcon {
background: var(--interactive-muted);
}
._803f2f55621144fb-sessionInfo {
display: flex;
flex-direction: column;
gap: 8px;
}
._803f2f55621144fb-sessionInfoRow {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
._803f2f55621144fb-sessionMoreButton {
-webkit-margin-start: auto;
color: var(--interactive-text-default);
cursor: pointer;
margin-inline-start: auto;
}
._803f2f55621144fb-sessionMoreButton:hover {
color: var(--interactive-text-hover);
}
._803f2f55621144fb-sessionCheckbox {
-webkit-margin-start: auto;
margin-inline-start: auto;
}
._803f2f55621144fb-sessionLogoutIcon {
transform: rotate(180deg);
}
._803f2f55621144fb-logOutAllButton {
align-self: flex-start;
margin-top: 16px;
}
._803f2f55621144fb-loading {
align-items: center;
display: flex;
height: 300px;
justify-content: center;
}
._803f2f55621144fb-tools {
border-bottom: 1px solid var(--border-subtle);
border-top: 1px solid var(--border-subtle);
margin-top: 32px;
padding: 1rem 0;
}
._803f2f55621144fb-toolsTitle {
margin-bottom: 0.5rem;
}
@media (max-width: 900px) {
._8ab7e4190786a9c3-noticeImage {
display: none;
}
}
._8ab7e4190786a9c3-sectionLabel:only-child {
display: none;
}
._8ab7e4190786a9c3-noticeCard {
display: flex;
flex-direction: row;
gap: var(--space-8);
justify-content: space-between;
padding: var(--space-20);
}
._79adc013f0f79653-systemServiceContainer {
align-items: center;
display: flex;
flex-direction: row;
gap: 24px;
justify-content: space-between;
}
._79adc013f0f79653-systemServiceTextContainer {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.bc4a3e90e1b1b5ca-group {
margin-top: 20px;
}
.bc4a3e90e1b1b5ca-title {
cursor: pointer;
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
.bc4a3e90e1b1b5ca-experimentDate {
color: var(--channels-default);
}
.bc4a3e90e1b1b5ca-emptyState {
margin-top: 36px;
text-align: center;
}
.bc4a3e90e1b1b5ca-description {
margin-top: 4px;
}
.bc4a3e90e1b1b5ca-divider {
margin-top: 20px;
}
.bc4a3e90e1b1b5ca-debugTitle {
margin-top: 16px;
}
.bc4a3e90e1b1b5ca-pre {
white-space: pre;
}
.bc4a3e90e1b1b5ca-card {
background-color: var(--background-surface-higher);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
padding: var(--space-16);
}
.bc4a3e90e1b1b5ca-collapsible {
background: none;
padding: var(--space-8);
}
.bc4a3e90e1b1b5ca-collapsible code {
background-color: var(--background-code);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
padding: var(--space-4);
}
._6f81c82c609055e8-heading {
margin-bottom: 20px;
}
._6f81c82c609055e8-tabBar {
gap: 40px;
max-width: calc(100% - 60px);
}
._6f81c82c609055e8-tab {
align-items: center;
display: flex;
flex-shrink: 1;
gap: 8px;
padding-bottom: 12px;
}
._6f81c82c609055e8-tabIcon {
flex-shrink: 0;
height: 24px;
width: 24px;
}
._6f81c82c609055e8-iconTitle {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._6f81c82c609055e8-body {
margin-top: 16px;
}
@media (max-width: 960px) {
._6f81c82c609055e8-tabBar {
gap: 32px;
}
}
._50e6814668c72ffe-upsellOuter {
border-radius: var(--radius-sm);
margin: 8px 12px;
position: relative;
}
._50e6814668c72ffe-upsellInner {
background: linear-gradient(to right, hsl(var(--premium-tier-2-purple-for-gradients-hsl) / 0.1) 0, hsl(var(--premium-tier-2-pink-for-gradients-hsl) / 0.1) 100%) border-box;
border-radius: calc(var(--radius-sm) - 2px);
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
}
._50e6814668c72ffe-upsellTitle {
display: flex;
gap: 4px;
}
._50e6814668c72ffe-nitroWheel {
color: var(--text-strong);
}
._50e6814668c72ffe-close {
cursor: pointer;
inset-inline-end: 8px;
position: absolute;
top: 8px;
}
._50e6814668c72ffe-closeIcon {
color: var(--interactive-text-default);
}
._84bad078060c37c1-soundButtonSettingContainer {
align-items: center;
background: var(--input-background-default);
border: 1px solid var(--input-border-default);
border-radius: var(--radius-sm);
box-sizing: border-box;
display: flex;
flex-direction: row;
font-weight: var(--font-weight-semibold);
height: 40px;
justify-content: space-between;
overflow: hidden;
padding: 0 12px;
position: relative;
text-align: center;
width: 50%;
}
._84bad078060c37c1-emoji {
flex-shrink: 0;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
._84bad078060c37c1-emoji,
._84bad078060c37c1-secondaryIcon {
height: 20px;
width: 20px;
}
._84bad078060c37c1-secondaryIcon {
margin: 0 4px;
}
._84bad078060c37c1-secondaryIconActive {
cursor: pointer;
}
._84bad078060c37c1-secondaryIconDisabled {
color: var(--interactive-muted);
}
._84bad078060c37c1-container {
align-items: center;
display: flex;
}
._84bad078060c37c1-soundText {
max-width: 190px;
overflow: hidden;
text-overflow: ellipsis;
}
.c3d9481c21f6c807-guildSelector {
margin-bottom: 0;
margin-top: 0;
}
.c3d9481c21f6c807-nitroWheel {
height: 16px;
width: 16px;
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
.c3d9481c21f6c807-container {
margin-bottom: 16px;
}
.c3d9481c21f6c807-callSoundsTitle {
margin-bottom: 8px;
}
.c3d9481c21f6c807-callSoundsDivider {
margin-bottom: 24px;
margin-top: 4px;
}
.c3d9481c21f6c807-notice {
margin-top: 8px;
}
.c3d9481c21f6c807-pill {
align-items: center;
background: var(--background-secondary-alt);
border-radius: 8px;
display: inline-flex;
gap: 4px;
padding: 4px 8px;
}
.c3d9481c21f6c807-pillText {
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.c3d9481c21f6c807-pillIcon {
width: 16px;
}
._12eefe2ddee412f1-singleSelectOption {
-moz-column-gap: 8px;
column-gap: 8px;
display: flex;
}
._12eefe2ddee412f1-deviceContainer {
align-items: center;
display: grid;
gap: 4px;
grid-template-areas: "label subLabel certifiedPill";
grid-template-columns: auto 1fr -webkit-min-content;
grid-template-columns: auto 1fr min-content;
width: 100%;
}
._12eefe2ddee412f1-deviceContainer._12eefe2ddee412f1-withIcon {
grid-template-areas: "icon label subLabel certifiedPill";
grid-template-columns: -webkit-min-content auto 1fr -webkit-min-content;
grid-template-columns: min-content auto 1fr min-content;
}
._12eefe2ddee412f1-deviceContainer._12eefe2ddee412f1-multiLine {
grid-template-areas: "label certifiedPill" "subLabel certifiedPill";
grid-template-columns: 1fr -webkit-min-content;
grid-template-columns: 1fr min-content;
}
._12eefe2ddee412f1-deviceContainer._12eefe2ddee412f1-multiLine._12eefe2ddee412f1-withIcon {
grid-template-areas: "icon label certifiedPill" "icon subLabel certifiedPill";
grid-template-columns: -webkit-min-content 1fr -webkit-min-content;
grid-template-columns: min-content 1fr min-content;
}
._12eefe2ddee412f1-deviceContainer._12eefe2ddee412f1-multiLine ._12eefe2ddee412f1-deviceSubLabel:after,
._12eefe2ddee412f1-deviceContainer._12eefe2ddee412f1-multiLine ._12eefe2ddee412f1-deviceSubLabel:before {
content: "";
}
._12eefe2ddee412f1-deviceContainer ._12eefe2ddee412f1-deviceIcon {
align-items: center;
display: flex;
grid-area: icon;
}
._12eefe2ddee412f1-deviceContainer ._12eefe2ddee412f1-deviceLabel {
grid-area: label;
}
._12eefe2ddee412f1-deviceContainer ._12eefe2ddee412f1-deviceSubLabel {
grid-area: subLabel;
text-overflow: ellipsis;
}
._12eefe2ddee412f1-deviceContainer ._12eefe2ddee412f1-deviceSubLabel:before {
content: "(";
}
._12eefe2ddee412f1-deviceContainer ._12eefe2ddee412f1-deviceSubLabel:after {
content: ")";
}
._12eefe2ddee412f1-deviceContainer ._12eefe2ddee412f1-deviceCertifiedPill {
align-items: center;
display: flex;
grid-area: certifiedPill;
}
._53965a42989baf13-spacingTop24 {
margin-top: 24px;
}
._53965a42989baf13-permissionWarning {
margin-top: 8px;
}
._53965a42989baf13-previewToggle {
margin-top: 24px;
}
._53965a42989baf13-cameraPreviewTitle {
align-items: center;
display: flex;
}
._53965a42989baf13-selector {
margin-top: 16px;
width: 100%;
}
._53965a42989baf13-selector._53965a42989baf13-selectorNoHeader {
margin-top: 24px;
}
._53965a42989baf13-imageInput {
display: none;
}
._53965a42989baf13-backgroundIconOptionIcon {
height: 24px;
}
._53965a42989baf13-backgroundOptions {
display: grid;
gap: var(--space-16);
grid-auto-rows: 1fr;
grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
margin-top: var(--space-16);
}
._53965a42989baf13-backgroundOptionsLarge {
align-content: space-between;
grid-auto-rows: 91px;
grid-template-columns: repeat(auto-fill, 178px);
justify-content: space-between;
}
._53965a42989baf13-backgroundImageOption {
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
object-fit: cover;
width: 100%;
}
.full-motion ._53965a42989baf13-backgroundImageOption {
transition: transform 0.2s ease-out;
}
._53965a42989baf13-backgroundOptionBackgroundBlurred {
filter: blur(14px);
position: absolute;
}
._53965a42989baf13-backgroundOptionBlurBackground {
background-image: url(https://cdn.discordapp.com/assets/content/9b1bb92a5685e3f1d67378826197687bb24f8cf1319a4ab2375fbc8a3fb7d0fe.png);
}
._53965a42989baf13-backgroundOption {
box-sizing: border-box;
cursor: pointer;
height: 100%;
position: relative;
width: 100%;
}
.full-motion ._53965a42989baf13-backgroundOption {
transition:
box-shadow 0.2s ease-out,
transform 0.2s ease-out,
background 0.2s ease-out,
opacity 0.2s ease-in;
}
._53965a42989baf13-backgroundOption:hover:not(._53965a42989baf13-backgroundOption._53965a42989baf13-backgroundOptionDisabled):not(._53965a42989baf13-backgroundOptionSelected) {
box-shadow: var(--elevation-medium);
transform: translateY(-1px);
}
._53965a42989baf13-backgroundOption:hover:not(._53965a42989baf13-backgroundOption._53965a42989baf13-backgroundOptionDisabled):not(._53965a42989baf13-backgroundOptionSelected) ._53965a42989baf13-backgroundImageOption {
transform: scale(1.05) translateZ(0);
}
._53965a42989baf13-backgroundOptionInner {
background-color: var(--primary-700);
border-radius: 4px;
height: 100%;
overflow: hidden;
position: relative;
width: 100%;
}
._53965a42989baf13-playIcon {
align-items: center;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 50%;
color: var(--white);
display: flex;
height: 16px;
inset-inline-end: 4px;
justify-content: center;
position: absolute;
top: 4px;
width: 16px;
}
._53965a42989baf13-newTextBadge {
border: 3px solid var(--background-base-low);
border-radius: 10px;
box-sizing: content-box;
inset-inline-start: -6px;
position: absolute;
top: -3px;
}
._53965a42989baf13-backgroundOptionRing {
border: 2px solid var(--brand-500);
border-radius: 4px;
position: absolute;
top: -4px;
inset-inline: -4px;
bottom: -4px;
}
._53965a42989baf13-backgroundOptionDisabled {
cursor: not-allowed;
}
._53965a42989baf13-backgroundOptionDisabled ._53965a42989baf13-backgroundCustomInlineUpsellBackgroundDarkener {
opacity: 0.04;
}
._53965a42989baf13-backgroundOptionContent {
align-items: center;
color: var(--white);
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
position: relative;
width: 100%;
}
._53965a42989baf13-overflowEllipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._53965a42989baf13-backgroundOptionText {
box-sizing: border-box;
max-width: 100%;
padding: 0 4px;
}
._53965a42989baf13-newBackgroundTooltipContainer {
position: relative;
}
._53965a42989baf13-backgroundCustomInlineUpsellBackground {
background-image: linear-gradient(90deg, var(--premium-tier-2-purple-for-gradients) 0, var(--premium-tier-2-purple-for-gradients-2) 50.24%, var(--premium-tier-2-pink-for-gradients) 100%);
position: absolute;
}
._53965a42989baf13-backgroundCustomInlineUpsellBackgroundDarkener {
background-color: var(--neutral-45);
filter: blur(12px);
height: 100%;
opacity: 0.2;
position: absolute;
width: 100%;
}
._53965a42989baf13-backgroundCustomInlineUpsell {
align-items: center;
display: flex;
}
._53965a42989baf13-backgroundCustomInlineUpsellIcon {
flex-shrink: 0;
height: 14px;
width: 14px;
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
._53965a42989baf13-customBackgroundTooltip {
align-items: center;
color: var(--interactive-text-default);
display: flex;
}
._53965a42989baf13-customBackgroundTooltipIcon {
-webkit-margin-end: 4px;
height: 16px;
margin-inline-end: 4px;
width: 16px;
}
.theme-dark ._53965a42989baf13-backgroundOptionDisabled ._53965a42989baf13-backgroundCustomInlineUpsellBackground,
.theme-dark ._53965a42989baf13-backgroundOptionDisabled ._53965a42989baf13-backgroundOptionContent {
opacity: 0.2;
}
.theme-light ._53965a42989baf13-backgroundOptionDisabled ._53965a42989baf13-backgroundCustomInlineUpsellBackground,
.theme-light ._53965a42989baf13-backgroundOptionDisabled ._53965a42989baf13-backgroundOptionContent {
opacity: 0.5;
}
.f22a746281d46738-spacingTop24 {
margin-top: 24px;
}
.f22a746281d46738-permissionWarning {
margin-top: 8px;
}
.f22a746281d46738-selector {
margin-top: 16px;
width: 100%;
}
.f22a746281d46738-selector.f22a746281d46738-selectorNoHeader {
margin-top: 24px;
}
.f22a746281d46738-tooltip {
max-width: 244px;
text-align: center;
}
.f22a746281d46738-tooltipWrapper {
height: 100%;
}
.f22a746281d46738-previewToggle {
margin-bottom: 0;
}
.f22a746281d46738-filterLoadingIndicator {
background-color: var(--opacity-black-68);
bottom: 0;
height: 100%;
justify-content: center;
position: absolute;
width: 100%;
}
.f22a746281d46738-cameraPreviewTitle,
.f22a746281d46738-filterLoadingIndicator {
align-items: center;
display: flex;
}
.f22a746281d46738-cameraDeeplink {
margin-top: var(--space-8);
}
._11e1f74ed34823b2-cameraWrapper {
align-items: center;
background-color: var(--background-base-lower);
border: 1px solid var(--background-base-lowest);
border-radius: var(--radius-xs);
display: flex;
flex-direction: column;
justify-content: center;
min-height: 220px;
position: relative;
width: 100%;
}
._11e1f74ed34823b2-camera {
position: relative;
transform: scaleX(-1);
}
.fe5040603d3d1bbe-devices {
flex-direction: column;
margin-bottom: 20px;
}
.fe5040603d3d1bbe-deviceColumns,
.fe5040603d3d1bbe-devices {
display: flex;
gap: var(--space-16);
}
.fe5040603d3d1bbe-column {
flex: 1 1 50%;
}
._062838a9530acec0-wrapper {
height: calc(var(--custom-gradient-progress-notch-height) + var(--custom-gradient-progress-notch-margin) * 2);
min-width: 0;
position: relative;
width: 100%;
}
._062838a9530acec0-container {
display: flex;
height: 100%;
overflow: hidden;
position: relative;
}
._062838a9530acec0-progress {
background-color: var(--gradient-progress-pill-background);
}
._062838a9530acec0-notches,
._062838a9530acec0-progress {
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
}
._062838a9530acec0-notches {
width: 100%;
}
._062838a9530acec0-notches._062838a9530acec0-gray {
color: var(--background-base-low);
}
._062838a9530acec0-notches._062838a9530acec0-black {
color: var(--background-surface-high);
}
._011b76fc5d782f8f-container {
display: flex;
flex-direction: column;
}
._011b76fc5d782f8f-micTest {
align-items: center;
display: flex;
margin-top: 4px;
position: relative;
}
._011b76fc5d782f8f-title {
margin-top: 8px;
}
._011b76fc5d782f8f-description,
._011b76fc5d782f8f-title {
margin-bottom: 4px;
}
._011b76fc5d782f8f-micTestCaption {
inset-inline-start: 0;
position: absolute;
top: calc(100% + 4px);
}
._011b76fc5d782f8f-buttonSizer {
align-items: center;
display: flex;
margin-top: 4px;
position: absolute;
visibility: hidden;
width: 100%;
}
._011b76fc5d782f8f-buttonSizerSpacer {
min-width: 0;
width: 100%;
}
._011b76fc5d782f8f-buttonWrapper {
-webkit-margin-end: var(--space-8);
margin-inline-end: var(--space-8);
}
._169b38876903edc0-micTest {
margin-bottom: 16px;
}
._169b38876903edc0-micTestHelpLink {
-webkit-margin-start: 4px;
margin-inline-start: 4px;
}
.fb7bea5ed91ce0c5-krispCard {
align-items: center;
display: flex;
flex-direction: row;
gap: var(--space-16);
padding: var(--space-20);
}
.ac7648c9bd968881-sensitivity {
min-height: 136px;
}
.theme-light .ac7648c9bd968881-sliderBar {
background-color: var(--primary-200);
}
.theme-dark .ac7648c9bd968881-sliderBar {
background-color: var(--primary-400);
}
.ac7648c9bd968881-sliderBar.ac7648c9bd968881-speaking {
background-color: var(--green-230);
}
.ac7648c9bd968881-inputSensitivityToggle .ac7648c9bd968881-sliderBar {
transition: background-color 0.2s linear;
}
.ac7648c9bd968881-inputSensitivityToggle.ac7648c9bd968881-manual .ac7648c9bd968881-microphone {
position: absolute;
width: 100%;
}
.ac7648c9bd968881-inputSensitivityToggle.ac7648c9bd968881-manual .ac7648c9bd968881-microphone .ac7648c9bd968881-fill {
background-color: var(--opacity-black-24);
height: 100%;
transition: width 35ms ease;
}
.ac7648c9bd968881-inputDisabledWarning,
.ac7648c9bd968881-inputDisabledWarning a {
color: var(--text-feedback-critical);
}
.ac7648c9bd968881-inputDisabledWarning a {
font-weight: var(--font-weight-bold);
}
.ac7648c9bd968881-inputSensitivitySlider {
height: 40px;
position: relative;
width: 100%;
}
.ac7648c9bd968881-inputSensitivityBar {
border-radius: var(--radius-xs);
display: block;
height: 8px;
overflow: hidden;
position: relative;
}
.ac7648c9bd968881-inputSensitivityBarFill {
background: var(--brand-500);
height: 100%;
}
.theme-light .ac7648c9bd968881-userSettingsVoice .ac7648c9bd968881-inputSensitivityToggle.ac7648c9bd968881-manual .ac7648c9bd968881-microphone {
background-color: transparent;
}
.theme-dark .ac7648c9bd968881-inputSensitivityToggle.ac7648c9bd968881-manual .ac7648c9bd968881-microphone {
background-color: transparent;
}
.ac7648c9bd968881-inputSensitivityToggle:not(.ac7648c9bd968881-manual) {
padding-top: 8px;
}
._7072d5a055974808-volumes {
display: flex;
gap: var(--space-16);
}
._7072d5a055974808-column {
flex: 1 1 50%;
}
._581eac78e841159b-poggermodeIcon {
height: 20px;
}
._581eac78e841159b-premiumTab {
overflow: visible;
}
._5142266782e9c798-inputWrapper {
flex-grow: 1;
-webkit-margin-end: 10px;
margin-inline-end: 10px;
margin-bottom: 20px;
width: 100%;
}
._421edea01cb52e16-titleBar {
z-index: 3001;
-webkit-app-region: drag;
flex-shrink: 0;
}
._421edea01cb52e16-withFrame {
height: 18px;
margin-top: 4px;
}
._421edea01cb52e16-typeMacOS {
position: absolute;
width: 72px;
}
._421edea01cb52e16-typeMacOS ._421edea01cb52e16-macDragRegion {
padding-bottom: 32px;
width: 70px;
}
._421edea01cb52e16-typeMacOSWithFrame {
align-items: center;
display: flex;
flex-direction: row;
height: 24px;
justify-content: space-between;
margin-top: 0;
}
._421edea01cb52e16-typeMacOSWithFrame ._421edea01cb52e16-macButtons {
margin-top: -2px;
-webkit-margin-end: -70px;
margin-inline-end: -70px;
}
._421edea01cb52e16-typeWindows {
align-items: stretch;
display: flex;
flex-direction: row-reverse;
justify-content: flex-start;
}
._421edea01cb52e16-wordmark {
font-size: 0;
pointer-events: none;
}
._421edea01cb52e16-wordmarkWindows {
color: var(--text-muted);
inset-inline-start: 0;
padding: 4px 9px 3px;
position: absolute;
top: 0;
}
._421edea01cb52e16-wordmarkMacOS {
margin: 0 auto;
}
._421edea01cb52e16-winButton {
align-items: center;
cursor: pointer;
display: flex;
height: 22px;
justify-content: center;
pointer-events: auto;
position: relative;
top: -4px;
width: 28px;
-webkit-app-region: no-drag;
}
._421edea01cb52e16-winButtonMinMax {
}
._421edea01cb52e16-winButtonMinMax:hover {
background-color: var(--interactive-background-hover);
color: var(--interactive-text-hover);
}
._421edea01cb52e16-winButtonMinMax:active {
background-color: var(--interactive-background-active);
color: var(--interactive-text-active);
}
._421edea01cb52e16-winButtonClose {
}
._421edea01cb52e16-winButtonClose:hover {
background-color: var(--status-danger);
color: var(--white);
}
._421edea01cb52e16-winButton {
color: var(--interactive-text-default);
}
._421edea01cb52e16-macButtons {
align-items: center;
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10px;
width: 70px;
}
._421edea01cb52e16-macButtons svg {
display: block;
visibility: hidden;
}
._421edea01cb52e16-focused ._421edea01cb52e16-macButtons:hover svg {
visibility: visible;
}
._421edea01cb52e16-macButton {
border-radius: 50%;
box-sizing: border-box;
height: 12px;
width: 12px;
-webkit-app-region: no-drag;
}
._421edea01cb52e16-macButtonClose,
._421edea01cb52e16-macButtonMaximize,
._421edea01cb52e16-macButtonMinimize {
}
._421edea01cb52e16-macButtonMaximize {
background-color: #34c749;
}
._421edea01cb52e16-macButtonMinimize {
background-color: #fdbc40;
}
._421edea01cb52e16-macButtonClose {
background-color: #fc615d;
}
._421edea01cb52e16-unfocused ._421edea01cb52e16-macButtonClose,
._421edea01cb52e16-unfocused ._421edea01cb52e16-macButtonMaximize,
._421edea01cb52e16-unfocused ._421edea01cb52e16-macButtonMinimize {
background-color: var(--background-mod-subtle);
}
.custom-theme-background ._421edea01cb52e16-withBackgroundOverride {
background: var(--background-gradient-app-frame, var(--background-base-lowest));
}
.custom-theme-background ._421edea01cb52e16-withBackgroundOverride._421edea01cb52e16-typeWindows {
margin-top: 0;
padding-top: 4px;
}
._90dc5e06d05dc634-tile {
background-color: var(--primary-700);
border-radius: var(--custom-base-tile-border-radius);
box-sizing: border-box;
overflow: hidden;
position: relative;
}
._90dc5e06d05dc634-tile._90dc5e06d05dc634-noBorder {
border-radius: 0;
}
._078ba7e849715dc7-fillParent {
display: block;
height: 100%;
overflow: clip;
width: 100%;
}
._078ba7e849715dc7-hiddenIframeContainer {
opacity: 0;
}
._078ba7e849715dc7-iframePlaceholder {
background-color: #000;
}
.d6b206a637c8e59a-popoutWrapper {
display: flex;
margin-bottom: 10px;
max-height: 40vh;
position: relative;
width: 200px;
}
.d6b206a637c8e59a-scroller {
background-color: var(--background-surface-high);
border-radius: 4px;
padding: 8px 16px;
}
.d6b206a637c8e59a-viewers {
align-items: center;
display: flex;
flex-grow: 0;
position: relative;
}
.d6b206a637c8e59a-viewers:hover .d6b206a637c8e59a-popoutWrapper {
opacity: 1;
transform: translateX(0);
visibility: visible;
}
.d6b206a637c8e59a-viewer {
-webkit-margin-start: -2px;
margin-inline-start: -2px;
-webkit-mask: url(/assets/eae6388e2d5a721a.svg);
mask: url(/assets/eae6388e2d5a721a.svg);
-webkit-mask-size: 100%;
mask-size: 100%;
mask-type: luminance;
}
.d6b206a637c8e59a-viewer:last-child {
-webkit-mask: none;
mask: none;
}
.d6b206a637c8e59a-overflow {
align-items: center;
display: flex;
justify-content: center;
-webkit-margin-start: -4px;
background-color: var(--primary-600);
border-radius: 15px;
box-shadow: -1px 0 0 1px var(--black);
color: var(--primary-300);
font-size: 12px;
font-weight: var(--font-weight-bold);
height: 25px;
letter-spacing: 0.5px;
margin-inline-start: -4px;
width: 25px;
z-index: 2;
}
.d6b206a637c8e59a-memberListHeader {
font-weight: var(--font-weight-semibold);
margin-bottom: 12px;
margin-top: 8px;
text-transform: uppercase;
}
.d6b206a637c8e59a-memberListHeader,
.d6b206a637c8e59a-memberListItemText {
color: var(--text-default);
}
.d6b206a637c8e59a-viewersIcon {
color: var(--primary-300);
display: flex;
height: 24px;
width: 24px;
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
.d6b206a637c8e59a-viewersIcon.d6b206a637c8e59a-activeButton,
.d6b206a637c8e59a-viewersIcon:hover {
color: var(--white);
}
.d6b206a637c8e59a-viewersTooltipItem {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.d6b206a637c8e59a-memberListItem:not(.d6b206a637c8e59a-popoutDisabled):hover {
background-color: var(--background-base-lowest);
}
._94748c73ac5ff785-videoHeight {
flex: 0 0 auto;
position: relative;
}
._94748c73ac5ff785-videoHeight._94748c73ac5ff785-animated {
transition: height 0.35s ease;
}
._94748c73ac5ff785-videoHeight._94748c73ac5ff785-normal {
height: 50vh;
}
._94748c73ac5ff785-videoHeight._94748c73ac5ff785-minimum {
height: 275px;
}
._94748c73ac5ff785-videoHeight._94748c73ac5ff785-haven,
._94748c73ac5ff785-videoHeight._94748c73ac5ff785-noChat {
height: 100vh;
}
._94748c73ac5ff785-videoHeight._94748c73ac5ff785-fullScreen {
height: 100vh;
position: fixed;
top: 0;
inset-inline: 0;
bottom: 0;
transition: none;
z-index: 100;
}
.platform-win ._94748c73ac5ff785-videoHeight._94748c73ac5ff785-normal {
height: calc(50vh - 22px);
}
.platform-win ._94748c73ac5ff785-videoHeight._94748c73ac5ff785-noChat {
height: calc(100vh - 22px);
}
._94748c73ac5ff785-video {
background-color: var(--primary-800);
background-position: 50%;
background-size: 100%;
cursor: default;
height: 100%;
min-height: 275px;
overflow: hidden;
position: relative;
width: 100%;
}
._94748c73ac5ff785-video._94748c73ac5ff785-idle {
cursor: none;
}
._94748c73ac5ff785-video._94748c73ac5ff785-fullScreen ._94748c73ac5ff785-videoCenter,
._94748c73ac5ff785-video._94748c73ac5ff785-noChat ._94748c73ac5ff785-videoCenter,
._94748c73ac5ff785-video._94748c73ac5ff785-normal ._94748c73ac5ff785-videoCenter {
align-self: flex-end;
}
._94748c73ac5ff785-video._94748c73ac5ff785-fullScreen ._94748c73ac5ff785-videoBottom,
._94748c73ac5ff785-video._94748c73ac5ff785-noChat ._94748c73ac5ff785-videoBottom,
._94748c73ac5ff785-video._94748c73ac5ff785-normal ._94748c73ac5ff785-videoBottom {
opacity: 0;
transform: translate3d(0, 8px, 0);
}
.full-motion ._94748c73ac5ff785-video._94748c73ac5ff785-fullScreen ._94748c73ac5ff785-videoBottom,
.full-motion ._94748c73ac5ff785-video._94748c73ac5ff785-noChat ._94748c73ac5ff785-videoBottom,
.full-motion ._94748c73ac5ff785-video._94748c73ac5ff785-normal ._94748c73ac5ff785-videoBottom {
transition:
transform 0.2s ease-in-out,
opacity 0.2s ease-in-out;
}
._94748c73ac5ff785-video._94748c73ac5ff785-fullScreen:not(._94748c73ac5ff785-idle) ._94748c73ac5ff785-videoWrapper._94748c73ac5ff785-focused ._94748c73ac5ff785-videoBottom,
._94748c73ac5ff785-video._94748c73ac5ff785-fullScreen:not(._94748c73ac5ff785-idle) ._94748c73ac5ff785-videoWrapper:hover ._94748c73ac5ff785-videoBottom,
._94748c73ac5ff785-video._94748c73ac5ff785-noChat:not(._94748c73ac5ff785-idle) ._94748c73ac5ff785-videoWrapper._94748c73ac5ff785-focused ._94748c73ac5ff785-videoBottom,
._94748c73ac5ff785-video._94748c73ac5ff785-noChat:not(._94748c73ac5ff785-idle) ._94748c73ac5ff785-videoWrapper:hover ._94748c73ac5ff785-videoBottom,
._94748c73ac5ff785-video._94748c73ac5ff785-normal:not(._94748c73ac5ff785-idle) ._94748c73ac5ff785-videoWrapper._94748c73ac5ff785-focused ._94748c73ac5ff785-videoBottom,
._94748c73ac5ff785-video._94748c73ac5ff785-normal:not(._94748c73ac5ff785-idle) ._94748c73ac5ff785-videoWrapper:hover ._94748c73ac5ff785-videoBottom {
opacity: 1;
transform: translateZ(0);
}
._94748c73ac5ff785-video ._94748c73ac5ff785-videoBackgroundTransition {
box-shadow: var(--legacy-elevation-high);
}
._94748c73ac5ff785-videoWrapper {
border-radius: 3px;
position: relative;
}
._94748c73ac5ff785-videoInner {
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
overflow: hidden;
pointer-events: none;
z-index: 1;
}
._94748c73ac5ff785-videoBottom,
._94748c73ac5ff785-videoCenter,
._94748c73ac5ff785-videoTop {
pointer-events: all;
}
._94748c73ac5ff785-videoBackground,
._94748c73ac5ff785-videoBackgroundTransition {
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
height: 100%;
width: 100%;
}
._94748c73ac5ff785-videoBackgroundTransition {
align-items: center;
display: flex;
overflow: hidden;
}
.theme-light ._94748c73ac5ff785-video._94748c73ac5ff785-minimum {
background-color: var(--white);
box-shadow: inset 0 -1px 0 var(--primary-230);
}
.images-light ._94748c73ac5ff785-video._94748c73ac5ff785-noChat ._94748c73ac5ff785-videoTop,
.images-light ._94748c73ac5ff785-video._94748c73ac5ff785-normal ._94748c73ac5ff785-videoTop {
background-image: linear-gradient(0deg, hsl(var(--black-hsl) / 0) 0, var(--opacity-black-88) 100%);
}
.images-dark ._94748c73ac5ff785-video._94748c73ac5ff785-noChat ._94748c73ac5ff785-videoTop,
.images-dark ._94748c73ac5ff785-video._94748c73ac5ff785-normal ._94748c73ac5ff785-videoTop {
background-image: linear-gradient(0deg, hsl(var(--black-hsl) / 0) 0, var(--opacity-black-88) 100%);
}
.e4cb9af80253a521-pictureInPictureVideo {
aspect-ratio: 16/9;
background: var(--primary-800);
border-radius: 8px;
overflow: hidden;
transform: translateZ(0);
}
.e4cb9af80253a521-videoControls {
background: linear-gradient(var(--black) 0, transparent 30%, transparent 60%, var(--black) 100%);
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 8px;
pointer-events: none;
transition: opacity 0.2s ease-in-out;
}
.e4cb9af80253a521-videoControlsTextActivity {
pointer-events: all;
z-index: 2;
}
.e4cb9af80253a521-topControls {
flex: 0 1 auto;
pointer-events: all;
transform: translateZ(0);
width: 100%;
}
.full-motion .e4cb9af80253a521-topControls {
transition: transform 0.2s ease-in-out;
}
.e4cb9af80253a521-topControlsTextActivity {
align-items: flex-start;
flex-direction: row;
height: 100%;
}
.e4cb9af80253a521-bottomControls,
.e4cb9af80253a521-topControlsTextActivity {
display: flex;
justify-content: space-between;
}
.e4cb9af80253a521-bottomControls {
align-items: center;
color: var(--white);
flex: 0 1 auto;
pointer-events: all;
transform: translateZ(0);
width: 100%;
}
.full-motion .e4cb9af80253a521-bottomControls {
transition: transform 0.2s ease-in-out;
}
.e4cb9af80253a521-bottomLeftControls {
min-width: 0;
}
.e4cb9af80253a521-idle .e4cb9af80253a521-videoControls {
opacity: 0;
}
.e4cb9af80253a521-idle .e4cb9af80253a521-topControls {
transform: translate3d(0, -8px, 0);
}
.e4cb9af80253a521-idle .e4cb9af80253a521-bottomControls {
transform: translate3d(0, 8px, 0);
}
.e4cb9af80253a521-backButton {
-webkit-margin-end: 2px;
color: var(--primary-300);
flex-shrink: 0;
margin-inline-end: 2px;
}
.e4cb9af80253a521-headerBar {
height: auto;
padding: 4px 0 0;
}
.e4cb9af80253a521-topControls .e4cb9af80253a521-headerBar {
-webkit-app-region: no-drag;
}
.e4cb9af80253a521-headerIdleContainer {
justify-content: space-between;
}
.e4cb9af80253a521-headerIdleContainer,
.e4cb9af80253a521-headerTitle {
display: flex;
flex-shrink: 1;
overflow: hidden;
}
.e4cb9af80253a521-headerTitle {
align-items: center;
border-bottom: 1px solid transparent;
color: var(--white);
justify-content: flex-start;
line-height: 20px;
margin: 0;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
}
.e4cb9af80253a521-headerTitle:hover {
border-bottom: 1px solid var(--white);
cursor: pointer;
}
.e4cb9af80253a521-headerTitle:hover .e4cb9af80253a521-backButton {
color: var(--white);
}
.e4cb9af80253a521-headerText {
flex-shrink: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.e4cb9af80253a521-menuIcon {
cursor: pointer;
}
.keyboard-mode .e4cb9af80253a521-videoControls {
opacity: 1;
}
.c6e099f3aa7c1767-art {
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
margin-bottom: 16px;
width: 100%;
}
.c6e099f3aa7c1767-art.c6e099f3aa7c1767-small {
display: none;
}
.c6e099f3aa7c1767-art.c6e099f3aa7c1767-medium {
height: 88px;
}
.c6e099f3aa7c1767-art.c6e099f3aa7c1767-large {
height: 134px;
}
.c6e099f3aa7c1767-header {
color: var(--white);
margin-bottom: 4px;
text-align: center;
}
.c6e099f3aa7c1767-errorCodeMessage {
position: relative;
z-index: 1;
}
.c6e099f3aa7c1767-description {
color: var(--primary-200);
text-align: center;
}
.c6e099f3aa7c1767-description a {
position: relative;
z-index: 1;
}
.c6e099f3aa7c1767-description p {
margin: 0;
}
.c6e099f3aa7c1767-outerButton {
margin-top: 16px;
z-index: 1;
}
.e605a12daad840f7-root {
background-color: var(--opacity-black-60);
bottom: 0;
position: absolute;
top: 0;
inset-inline: 0;
pointer-events: none;
}
.c7da7434e459fd4b-popIn {
transform: rotate(-180deg);
}
._211d1cc3f7e37d69-participantsButton {
background: var(--primary-630);
border-radius: 48px;
box-shadow: var(--shadow-border), var(--shadow-high);
padding: 4px;
}
._211d1cc3f7e37d69-participantsButton:hover {
background: var(--primary-700);
}
._211d1cc3f7e37d69-rightCaret {
transform: rotate(-90deg);
}
._211d1cc3f7e37d69-leftCaret {
transform: rotate(90deg);
}
._211d1cc3f7e37d69-upCaret {
transform: rotate(180deg);
}
._211d1cc3f7e37d69-downCaret {
transform: rotate(0deg);
}
._211d1cc3f7e37d69-members {
-webkit-margin-end: 4px;
margin-inline-end: 4px;
}
._211d1cc3f7e37d69-iconContainer {
display: flex;
}
._211d1cc3f7e37d69-iconContainer > svg {
color: var(--white);
}
._666fac20ee9dfe96-fauxDisabled {
opacity: 0.5;
}
.enable-forced-colors ._666fac20ee9dfe96-fauxDisabled {
opacity: 1;
}
.f41a994450e4a2ef-arrowIcon {
height: 24px;
transform: rotate(270deg);
width: 24px;
}
.f41a994450e4a2ef-arrowIconExpanded {
transform: rotate(1turn);
}
.f41a994450e4a2ef-rightPipIcon {
-webkit-margin-start: 16px;
margin-inline-start: 16px;
}
.f41a994450e4a2ef-leftPipIcon {
-webkit-margin-end: 16px;
margin-inline-end: 16px;
}
.f41a994450e4a2ef-participantsButton {
inset-inline-end: 16px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.f41a994450e4a2ef-pipHeader {
height: 12px;
position: relative;
width: 100%;
z-index: 2;
}
.f41a994450e4a2ef-pipHeaderContent {
align-items: center;
background-color: var(--black);
box-sizing: border-box;
display: flex;
height: 12px;
justify-content: space-between;
max-width: 100%;
padding: 0 8px;
position: absolute;
}
.full-motion .f41a994450e4a2ef-pipHeaderContent {
transition: all 0.2s ease-in-out;
}
.f41a994450e4a2ef-pipHeaderContentOpen {
background: linear-gradient(var(--black) 0, var(--black) 30%, transparent 100%);
cursor: pointer;
height: 40px;
padding: 8px;
}
.f41a994450e4a2ef-pipHeaderButtonsRight {
display: flex;
}
.f41a994450e4a2ef-menuIcon {
color: #fff;
}
.f41a994450e4a2ef-leaveActivityIcon {
-webkit-margin-start: 6px;
height: 24px;
margin-inline-start: 6px;
width: 24px;
}
.c5bcbe78cec6b2ba-root {
height: 100%;
width: 100%;
}
.c5bcbe78cec6b2ba-root.c5bcbe78cec6b2ba-pipMode {
transition: height 0.2s ease-in-out;
width: 320px;
}
.c5bcbe78cec6b2ba-root.c5bcbe78cec6b2ba-pipModeShort {
height: 180px;
}
.c5bcbe78cec6b2ba-root.c5bcbe78cec6b2ba-pipModeTall {
height: 410px;
}
.c5bcbe78cec6b2ba-root.c5bcbe78cec6b2ba-hidden {
max-height: 0;
transition: none;
width: 0;
}
.c5bcbe78cec6b2ba-iframe {
height: 100%;
min-height: 2px;
min-width: 2px;
width: 100%;
}
.c5bcbe78cec6b2ba-iframe.c5bcbe78cec6b2ba-pipModeShort {
height: 180px;
}
.c5bcbe78cec6b2ba-iframe.c5bcbe78cec6b2ba-pipModeTall {
height: 410px;
}
.c5bcbe78cec6b2ba-pipNonInteractive {
pointer-events: none;
}
.c5bcbe78cec6b2ba-clickShield {
inset: 0;
position: absolute;
}
.c5bcbe78cec6b2ba-multiPIPMode {
margin-top: 8px;
}
@supports (grid-template-columns: subgrid) and (white-space-collapse: collapse) {
.c38106a3f0c3ca76-bar {
grid-area: titleBar;
}
}
.c38106a3f0c3ca76-bar {
align-content: center;
align-items: center;
display: flex;
gap: var(--space-8);
justify-content: space-between;
min-height: var(--custom-app-top-bar-height);
-webkit-padding-end: var(--space-12);
padding-inline-end: var(--space-12);
position: relative;
-webkit-app-region: drag;
}
.platform-osx .c38106a3f0c3ca76-bar {
-webkit-padding-start: calc(100 / var(--custom-zoom, 100) * (var(--custom-guild-list-width) + var(--space-md)));
padding-inline-start: calc(100 / var(--custom-zoom, 100) * (var(--custom-guild-list-width) + var(--space-md)));
}
.platform-win .c38106a3f0c3ca76-bar {
-webkit-padding-end: 0;
padding-inline-end: 0;
}
.c38106a3f0c3ca76-systemBar {
display: none;
justify-content: flex-end;
z-index: 999999;
}
.c38106a3f0c3ca76-show {
display: flex;
}
.c38106a3f0c3ca76-fixed {
position: fixed;
top: 0;
inset-inline: 0 var(--devtools-sidebar-width);
}
.c38106a3f0c3ca76-title {
justify-content: center;
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
}
.c38106a3f0c3ca76-leading,
.c38106a3f0c3ca76-title {
align-items: center;
display: flex;
}
.c38106a3f0c3ca76-leading {
box-sizing: border-box;
justify-content: flex-start;
}
.c38106a3f0c3ca76-leading,
.c38106a3f0c3ca76-trailing {
gap: var(--space-12);
position: relative;
z-index: 1;
-webkit-app-region: no-drag;
}
.c38106a3f0c3ca76-trailing,
.c38106a3f0c3ca76-winButtons {
align-items: center;
display: flex;
justify-content: flex-end;
}
.c38106a3f0c3ca76-winButtons {
color: var(--interactive-text-default);
gap: var(--space-4);
}
.c38106a3f0c3ca76-winButtonsWithDivider:before {
content: "";
display: block;
-webkit-border-start: 1px solid var(--border-subtle);
border-inline-start: 1px solid var(--border-subtle);
height: calc(var(--custom-app-top-bar-height) - var(--space-12));
margin-inline: var(--space-4);
}
.c38106a3f0c3ca76-winButton {
align-items: center;
cursor: pointer;
display: flex;
height: var(--custom-app-top-bar-height);
justify-content: center;
width: var(--custom-app-top-bar-height);
}
.c38106a3f0c3ca76-winButtonMinMax:hover {
background-color: var(--interactive-background-hover);
color: var(--interactive-text-hover);
}
.c38106a3f0c3ca76-winButtonMinMax:active {
background-color: var(--interactive-background-active);
color: var(--interactive-text-active);
}
.c38106a3f0c3ca76-winButtonClose {
}
.c38106a3f0c3ca76-winButtonClose:hover {
background-color: var(--status-danger);
color: var(--white);
}
._6341f5794d35fb69-pictureInPicture {
inset-inline-start: 0;
position: absolute;
top: 0;
}
._6341f5794d35fb69-pictureInPicture._6341f5794d35fb69-dragging {
cursor: grabbing;
height: 100%;
pointer-events: auto;
width: 100%;
}
._6341f5794d35fb69-pictureInPictureWindow {
position: absolute;
z-index: 1000;
}
._6341f5794d35fb69-borderRadius {
border-radius: 8px;
}
._6341f5794d35fb69-hidden {
display: none;
}
._6341f5794d35fb69-resizeHandle {
height: 20px;
position: absolute;
width: 20px;
}
._6341f5794d35fb69-resizeHandleTopRight {
bottom: -7px;
cursor: nesw-resize;
inset-inline-start: -7px;
}
._6341f5794d35fb69-resizeHandleTopLeft {
bottom: -7px;
cursor: nwse-resize;
inset-inline-end: -7px;
}
._6341f5794d35fb69-resizeHandleBottomRight {
cursor: nwse-resize;
inset-inline-start: -7px;
top: -7px;
}
._6341f5794d35fb69-resizeHandleBottomLeft {
cursor: nesw-resize;
inset-inline-end: -7px;
top: -7px;
}
._6341f5794d35fb69-belowSidebar {
z-index: 90 !important;
}
.eb6eba6824108695-canvas {
height: 100%;
inset-inline-start: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
z-index: 10000;
}
._01b8da2711bed5ad-errorPage {
width: 100%;
}
.dd40b0dbb7edc29b-dismissButton {
align-items: center;
background-color: var(--background-base-low);
border: 1px solid var(--border-subtle);
border-radius: 16px;
box-shadow: var(--shadow-border) var(--shadow-high);
cursor: pointer;
display: flex;
height: 24px;
inset-inline-end: -8px;
justify-content: center;
line-height: 0;
position: absolute;
top: -8px;
visibility: hidden;
width: 24px;
}
.dd40b0dbb7edc29b-dismissButton .dd40b0dbb7edc29b-dismissIcon {
color: var(--interactive-text-default);
}
.dd40b0dbb7edc29b-dismissButton:hover {
background-color: var(--background-surface-high);
}
.dd40b0dbb7edc29b-dismissButton:hover .dd40b0dbb7edc29b-dismissIcon {
color: var(--interactive-text-active);
}
.dd40b0dbb7edc29b-dismissButton:hover,
.container:hover .dd40b0dbb7edc29b-dismissButton {
visibility: visible;
}
.e8d31f9c1e8d9b86-animationWrapper {
background-color: rgba(19, 19, 24, 0.95);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-border) var(--shadow-high);
position: absolute;
transform-origin: 50% 100%;
width: 100%;
}
.e8d31f9c1e8d9b86-clickZone {
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
}
.e8d31f9c1e8d9b86-animationWrapper.e8d31f9c1e8d9b86-clickable:hover {
background-color: rgba(28, 29, 35, 0.95);
}
.e8d31f9c1e8d9b86-overflowWrapper {
border-radius: var(--radius-sm);
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
overflow: hidden;
}
.e8d31f9c1e8d9b86-container {
box-sizing: border-box;
padding: 8px;
position: relative;
width: var(--custom-notification-container-width);
}
.e8d31f9c1e8d9b86-container:after {
bottom: -8px;
content: "";
display: block;
height: 8px;
inset-inline-start: 0;
position: absolute;
width: 100%;
}
.e8d31f9c1e8d9b86-iconAndDetails {
align-items: top;
display: flex;
}
.e8d31f9c1e8d9b86-details,
.e8d31f9c1e8d9b86-footer {
display: flex;
}
.e8d31f9c1e8d9b86-details {
flex: 1 1 auto;
flex-direction: column;
justify-content: center;
overflow: hidden;
}
.e8d31f9c1e8d9b86-hint {
margin-top: var(--space-4);
}
.e8d31f9c1e8d9b86-clickable {
cursor: pointer;
}
.e8d31f9c1e8d9b86-animationWrapper:hover .e8d31f9c1e8d9b86-dismissButton,
.e8d31f9c1e8d9b86-dismissButton:hover {
visibility: visible;
}
.e8d31f9c1e8d9b86-buttonContainer {
display: flex;
margin-top: var(--space-8);
}
.e8d31f9c1e8d9b86-button {
max-width: calc(50% - var(--space-4));
}
.e8d31f9c1e8d9b86-button + .e8d31f9c1e8d9b86-button {
-webkit-margin-start: var(--space-8);
margin-inline-start: var(--space-8);
}
.e8d31f9c1e8d9b86-avatar {
-webkit-margin-end: var(--space-12);
align-items: center;
border-radius: 2px;
display: flex;
flex: 0 0 auto;
justify-content: center;
margin-inline-end: var(--space-12);
}
.e8d31f9c1e8d9b86-avatar,
.e8d31f9c1e8d9b86-icon {
height: 40px;
width: 40px;
}
.e8d31f9c1e8d9b86-icon {
border-radius: var(--radius-sm);
}
.e13eda3f8407ca82-errorNotificationContainer {
background-color: rgba(19, 19, 24, 0.95);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-border) var(--shadow-high);
position: relative !important;
}
.e13eda3f8407ca82-errorNotificationWrapper {
height: auto;
position: relative;
top: auto;
inset-inline: auto;
bottom: auto;
display: block;
margin-top: 24px;
width: 300px;
-webkit-margin-start: 24px;
margin-inline-start: 24px;
}
.e13eda3f8407ca82-errorClickNotification {
width: 300px;
}
.e13eda3f8407ca82-stackTraceCode {
font-family: var(--font-code);
}
.e13eda3f8407ca82-code {
padding: 15px;
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
}
.e13eda3f8407ca82-notificationIcon {
fill: var(--white);
}
._0bd4a058c09118e7-popout {
display: flex;
flex-direction: column;
height: 100vh;
}
._0bd4a058c09118e7-content {
align-items: center;
display: flex;
flex: 1 1 auto;
flex-direction: column;
height: 100%;
justify-content: center;
min-height: 0;
position: relative;
--custom-chat-input-margin-bottom: var(--space-xs);
}
._0bd4a058c09118e7-titleBar {
background: var(--background-gradient-app-frame, var(--background-base-lowest));
}
@keyframes _7135bcd237ed35a5-pulse {
0% {
border-color: hsla(0, 0%, 100%, 0);
}
25% {
border-color: hsla(0, 0%, 100%, 0.16);
}
50%,
to {
border-color: hsla(0, 0%, 100%, 0);
}
}
@keyframes _7135bcd237ed35a5-darkerPulse {
0% {
border-color: hsla(0, 0%, 100%, 0);
}
25% {
border-color: hsla(0, 0%, 100%, 0.32);
}
50%,
to {
border-color: hsla(0, 0%, 100%, 0);
}
}
._7135bcd237ed35a5-innerContainer {
border: 20px solid hsla(0, 0%, 100%, 0);
border-radius: 50%;
}
.app-focused ._7135bcd237ed35a5-innerContainer {
animation: _7135bcd237ed35a5-darkerPulse 2s linear infinite;
animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
._7135bcd237ed35a5-outerContainer {
border: 20px solid hsla(0, 0%, 100%, 0);
border-radius: 50%;
}
.app-focused ._7135bcd237ed35a5-outerContainer {
animation: _7135bcd237ed35a5-pulse 2s linear infinite;
animation-delay: 0.2s;
animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.fb62e279d3f0a88a-background {
align-items: center;
display: flex;
flex-wrap: nowrap;
height: 100%;
justify-content: center;
position: relative;
width: 100%;
z-index: 0;
}
.fb62e279d3f0a88a-background:before {
background: inherit;
content: "";
display: block;
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
z-index: -1;
}
.fb62e279d3f0a88a-avatarWrapper {
border-radius: 50%;
}
.user-profile-video-tile-background.fb62e279d3f0a88a-background {
background: linear-gradient(
color-mix(in oklab, var(--profile-gradient-primary-color) 20%, var(--profile-gradient-modal-background-color)),
color-mix(in oklab, var(--profile-gradient-secondary-color) 60%, var(--profile-gradient-modal-background-color)) 100%
);
}
.fbcaba6b03348a40-button {
line-height: 0;
}
.fbcaba6b03348a40-badgeUpgrade {
bottom: 2px;
color: var(--brand-500);
inset-inline-end: 2px;
position: absolute;
}
._948a4596ed7351e6-mirror {
transform: scaleX(-1);
}
._948a4596ed7351e6-video {
background-color: var(--black);
position: relative;
}
._948a4596ed7351e6-media,
._948a4596ed7351e6-video {
height: 100%;
width: 100%;
}
._948a4596ed7351e6-media {
object-fit: contain;
}
._2920920e101e0994-container {
align-items: center;
background: radial-gradient(100% 100% at 50% 100%, var(--modal-background) 60%, var(--transparent) 100%), linear-gradient(270deg, var(--expressive-gradient-purple-start) 0, var(--expressive-gradient-purple-end) 100%);
display: flex;
flex-wrap: wrap;
height: 100%;
justify-content: center;
padding: var(--space-4);
width: 100%;
}
._2920920e101e0994-content,
._2920920e101e0994-cta {
text-align: center;
width: 100%;
}
._2920920e101e0994-cta {
display: inline-block;
}
._2920920e101e0994-cta > button {
display: block;
margin: 0 auto;
}
._2920920e101e0994-artContainer {
padding-bottom: var(--space-48);
width: 100%;
}
._2920920e101e0994-artContainer._2920920e101e0994-small {
padding-bottom: 0;
}
._2920920e101e0994-art {
background-image: url(/assets/422703837071ae97.svg);
background-position: 50%;
background-repeat: no-repeat;
background-size: contain;
height: 185px;
width: 100%;
}
._2920920e101e0994-art._2920920e101e0994-small {
display: none;
}
._2920920e101e0994-art._2920920e101e0994-medium {
height: 134px;
}
._2920920e101e0994-art._2920920e101e0994-large {
height: 185px;
}
._2920920e101e0994-header {
color: var(--text-strong);
margin-bottom: var(--space-24);
text-align: center;
}
.c30e20083a9cfc88-content {
align-items: center;
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
display: flex;
justify-content: center;
overflow: hidden;
}
.c30e20083a9cfc88-streamHidden {
background: var(--primary-700);
flex-direction: column;
}
.c30e20083a9cfc88-streamHiddenEmptyState {
margin: 0;
padding: 0;
}
.c30e20083a9cfc88-streamHiddenCTA {
align-items: center;
display: flex;
justify-content: center;
}
.c30e20083a9cfc88-largePaddingTop {
padding-top: 8px;
}
.c30e20083a9cfc88-cta {
z-index: 1;
}
.c30e20083a9cfc88-addCta {
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
._0268697ee14a9162-content {
align-items: center;
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
display: flex;
justify-content: center;
overflow: hidden;
}
._0268697ee14a9162-streamHidden {
background: var(--primary-700);
flex-direction: column;
}
._0268697ee14a9162-streamHiddenEmptyState {
margin: 0;
padding: 0;
}
._0268697ee14a9162-streamHiddenCTA {
align-items: center;
display: flex;
justify-content: center;
}
._0268697ee14a9162-largePaddingTop {
padding-top: 8px;
}
._0268697ee14a9162-addStreamIcon {
height: 24px;
width: 24px;
}
._0268697ee14a9162-addCTA {
padding: 8px;
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
._2cdb89539fd956c8-leftTrayIcon {
-webkit-margin-end: 16px;
margin-inline-end: 16px;
}
._2cdb89539fd956c8-rightTrayIcon {
-webkit-margin-start: 16px;
margin-inline-start: 16px;
}
._2cdb89539fd956c8-embedTarget {
height: 100%;
width: 100%;
}
._2cdb89539fd956c8-embedTargetHidden {
height: 0;
visibility: hidden;
width: 0;
}
._2cdb89539fd956c8-participantName {
-webkit-margin-start: 8px;
margin-inline-start: 8px;
}
._2cdb89539fd956c8-videoControls {
background: none;
}
._6ef4dfe97806d150-loading {
background: var(--background-base-lower);
color: var(--text-default);
height: 100vh;
position: absolute;
width: 100%;
}
._5b92781e10faa50d-container {
background-color: var(--background-base-lower);
border-radius: 3px;
bottom: 0;
box-shadow: var(--shadow-border), var(--shadow-high);
font-family: var(--font-code);
font-size: 10px;
inset-inline-end: 0;
margin: 8px;
min-height: 5em;
padding: 8px;
pointer-events: all;
position: absolute;
white-space: pre;
width: 320px;
z-index: 1001;
}
._5b92781e10faa50d-containerMinimized {
min-height: auto;
width: auto;
}
._5b92781e10faa50d-content {
align-items: flex-start;
display: flex;
flex-direction: column;
min-height: 5em;
}
._5b92781e10faa50d-contentMinimized {
display: none;
}
._5b92781e10faa50d-notTracked {
color: var(--text-muted);
}
._5b92781e10faa50d-label {
display: flex;
}
._5b92781e10faa50d-baseIcon {
height: 12px;
width: 12px;
}
._5b92781e10faa50d-iconNotTracked {
color: var(--primary-300);
}
._5b92781e10faa50d-iconTracked {
color: var(--status-positive);
}
._5b92781e10faa50d-minimizeButton {
cursor: pointer;
inset-inline-end: 0;
padding: 8px;
position: absolute;
top: 0;
}
._5b92781e10faa50d-jsonSection {
-webkit-margin-start: 8px;
margin-inline-start: 8px;
margin-bottom: 8px;
-webkit-user-select: text;
-moz-user-select: text;
user-select: text;
}
._5b92781e10faa50d-stack {
color: var(--text-muted);
}
._5b92781e10faa50d-current,
._5b92781e10faa50d-stack {
}
._5b92781e10faa50d-current {
color: var(--text-default);
}
@keyframes f910d08f42c82225-outgoing-call-pulse {
0% {
opacity: 0;
transform: scaleX(1);
}
11.56% {
opacity: 1;
}
39.02% {
opacity: 0;
transform: scale3d(1.1, 1.1, 1);
}
39.03% {
transform: scaleX(1);
}
39.04% {
opacity: 1;
}
66.48% {
opacity: 0;
transform: scale3d(1.1, 1.1, 1);
}
to {
opacity: 0;
transform: scaleX(1);
}
}
@keyframes f910d08f42c82225-incoming-call-pulse {
0% {
opacity: 0;
transform: scaleX(1);
}
0.7% {
opacity: 1;
}
25.54% {
opacity: 0;
transform: scale3d(1.1, 1.1, 1);
}
25.55% {
transform: scaleX(1);
}
25.56% {
opacity: 1;
}
49.98% {
opacity: 0;
transform: scale3d(1.1, 1.1, 1);
}
49.99% {
transform: scaleX(1);
}
50% {
opacity: 1;
}
74.69% {
opacity: 0;
transform: scale3d(1.1, 1.1, 1);
}
74.70% {
transform: scaleX(1);
}
74.71% {
opacity: 1;
}
to {
opacity: 0;
transform: scale3d(1.1, 1.1, 1);
}
}
.f910d08f42c82225-clickable {
cursor: pointer;
}
.f910d08f42c82225-wrapper {
position: relative;
}
.f910d08f42c82225-wrapper.f910d08f42c82225-ringingOutgoing:after {
animation: f910d08f42c82225-outgoing-call-pulse var(--custom-call-avatar-outgoing-duration) infinite ease-out;
}
.f910d08f42c82225-wrapper.f910d08f42c82225-ringingIncoming:after,
.f910d08f42c82225-wrapper.f910d08f42c82225-ringingOutgoing:after {
background: transparent;
border: 3px solid var(--interactive-text-active);
border-radius: 100%;
content: "";
height: 100%;
inset-inline-start: -3px;
pointer-events: none;
position: absolute;
top: -3px;
transform-origin: center;
width: 100%;
}
.f910d08f42c82225-wrapper.f910d08f42c82225-ringingIncoming:after {
animation: f910d08f42c82225-incoming-call-pulse var(--custom-call-avatar-incoming-duration) infinite ease-out;
}
.f910d08f42c82225-statusContainer {
background-color: var(--red-400);
border-radius: 50%;
bottom: 0;
inset-inline-end: 0;
padding: 4px;
position: absolute;
}
.f910d08f42c82225-status,
.f910d08f42c82225-statusContainer {
height: 16px;
width: 16px;
}
.f910d08f42c82225-voiceAvatar {
border-radius: 50%;
height: 100%;
position: inherit;
width: 100%;
}
.f910d08f42c82225-voiceAvatar.f910d08f42c82225-ringingOutgoing {
opacity: 0.3;
}
.f910d08f42c82225-border {
border-radius: 50%;
inset: 0;
position: absolute;
}
.app-focused .f910d08f42c82225-border {
transition: box-shadow 0.1s ease-out;
}
.f910d08f42c82225-overlay {
align-items: center;
background-color: var(--opacity-black-60);
border-radius: 50%;
display: flex;
height: 100%;
inset: 0;
justify-content: center;
position: absolute;
width: 100%;
}
.f910d08f42c82225-overlayIcon {
color: var(--white);
height: 32px;
width: 32px;
}
.f910d08f42c82225-callAvatarMask {
overflow: visible;
position: relative;
}
.f910d08f42c82225-callAvatarMaskContainer {
height: 100%;
position: relative;
}
._0c1351772e3f019a-item {
align-items: center;
display: flex;
}
._2dbe1dc734ff26a5-root {
align-items: center;
background: var(--background-surface-high);
border-radius: 8px;
box-shadow: var(--shadow-border), var(--shadow-high);
box-sizing: border-box;
display: flex;
flex-direction: column;
min-width: 232px;
padding: 16px;
position: relative;
}
._2dbe1dc734ff26a5-root._2dbe1dc734ff26a5-previewCamera {
flex-direction: column-reverse;
overflow: hidden;
}
._2dbe1dc734ff26a5-previewRoot {
align-items: center;
background: var(--background-secondary-alt);
display: flex;
justify-content: center;
}
._2dbe1dc734ff26a5-preview,
._2dbe1dc734ff26a5-preview:after,
._2dbe1dc734ff26a5-previewRoot {
inset: 0;
position: absolute;
}
._2dbe1dc734ff26a5-preview:after {
background: linear-gradient(#18191c, transparent 84px, transparent 183px, #18191c);
content: "";
}
._2dbe1dc734ff26a5-mainChannelInfo {
align-items: center;
display: flex;
flex-direction: column;
max-width: 100%;
}
._2dbe1dc734ff26a5-mainChannelInfo ._2dbe1dc734ff26a5-titleGroup {
max-width: 100%;
}
._2dbe1dc734ff26a5-mainChannelInfo ._2dbe1dc734ff26a5-icon {
margin: 16px 0;
}
._2dbe1dc734ff26a5-mainChannelInfo ._2dbe1dc734ff26a5-subtitle,
._2dbe1dc734ff26a5-mainChannelInfo ._2dbe1dc734ff26a5-title {
text-align: center;
}
._2dbe1dc734ff26a5-mainChannelInfo ._2dbe1dc734ff26a5-title {
flex-shrink: 1;
margin-bottom: 2px;
min-width: 0;
overflow-wrap: break-word;
}
._2dbe1dc734ff26a5-mainChannelInfo ._2dbe1dc734ff26a5-subtitle {
margin-bottom: 24px;
}
._2dbe1dc734ff26a5-previewChannelHeader {
inset-inline-start: 0;
position: absolute;
top: 16px;
-webkit-padding-start: 16px;
align-items: center;
box-sizing: border-box;
display: flex;
max-width: 100%;
padding-inline-start: 16px;
}
._2dbe1dc734ff26a5-previewChannelHeader ._2dbe1dc734ff26a5-titleGroup {
flex-shrink: 1;
min-width: 0;
}
._2dbe1dc734ff26a5-previewChannelHeader ._2dbe1dc734ff26a5-icon {
-webkit-margin-end: 16px;
margin-inline-end: 16px;
}
._2dbe1dc734ff26a5-previewChannelHeader ._2dbe1dc734ff26a5-subtitle,
._2dbe1dc734ff26a5-previewChannelHeader ._2dbe1dc734ff26a5-title {
color: var(--text-strong);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._2dbe1dc734ff26a5-wrapper {
pointer-events: all;
z-index: 1001;
}
._2dbe1dc734ff26a5-actionButton {
line-height: 0;
}
._2dbe1dc734ff26a5-fullRegionDropdownButtonOverride {
padding: 0 4px;
}
._2dbe1dc734ff26a5-actions {
display: flex;
gap: 8px;
}
._2dbe1dc734ff26a5-previewButton {
margin-top: 16px;
}
._2dbe1dc734ff26a5-guildIcon {
align-items: center;
background-color: var(--background-base-low);
color: var(--text-default);
display: flex;
height: 100%;
justify-content: center;
width: 100%;
}
._2dbe1dc734ff26a5-mask {
display: block;
}
._2dbe1dc734ff26a5-guildAcronym {
font-size: 24px;
overflow: hidden;
text-overflow: ellipsis;
}
._2dbe1dc734ff26a5-guildIconWithoutImage {
background-color: var(--background-base-low);
}
.a7f798289c9d0317-container {
background-color: var(--background-base-lower);
border-radius: 3px;
bottom: 0;
box-shadow: var(--shadow-border), var(--shadow-high);
font-family: var(--font-code);
font-size: 10px;
inset-inline-end: 0;
margin: 8px;
min-width: 5rem;
padding: 8px;
pointer-events: all;
position: absolute;
white-space: pre;
z-index: 1001;
}
.a7f798289c9d0317-status {
align-items: center;
display: flex;
justify-content: center;
}
.a7f798289c9d0317-statusIndicator {
-webkit-padding-end: 0.5rem;
padding-inline-end: 0.5rem;
}
.a7f798289c9d0317-statusText {
-webkit-padding-start: 0.5rem;
padding-inline-start: 0.5rem;
}
[data-popout-root],
html {
--brand-05a: hsla(var(--brand-500-hsl)/0.05);
--brand-10a: hsla(var(--brand-500-hsl)/0.1);
--brand-15a: hsla(var(--brand-500-hsl)/0.15);
--brand-20a: hsla(var(--brand-500-hsl)/0.2);
--brand-25a: hsla(var(--brand-500-hsl)/0.25);
--brand-30a: hsla(var(--brand-500-hsl)/0.3);
--brand-35a: hsla(var(--brand-500-hsl)/0.35);
--brand-40a: hsla(var(--brand-500-hsl)/0.4);
--brand-45a: hsla(var(--brand-500-hsl)/0.45);
--brand-50a: hsla(var(--brand-500-hsl)/0.5);
--brand-55a: hsla(var(--brand-500-hsl)/0.55);
--brand-60a: hsla(var(--brand-500-hsl)/0.6);
--brand-65a: hsla(var(--brand-500-hsl)/0.65);
--brand-70a: hsla(var(--brand-500-hsl)/0.7);
--brand-75a: hsla(var(--brand-500-hsl)/0.75);
--brand-80a: hsla(var(--brand-500-hsl)/0.8);
--brand-85a: hsla(var(--brand-500-hsl)/0.85);
--brand-90a: hsla(var(--brand-500-hsl)/0.9);
--brand-95a: hsla(var(--brand-500-hsl)/0.95);
}
[data-popout-root].low-saturation,
html.low-saturation {
--control-brand-foreground: var(--interactive-text-default);
}
html.disable-forced-colors * {
forced-color-adjust: none;
}
.decorate-links {
--link-decoration: underline;
}
._2a8914fa6869f3ad-editorAnimate {
-webkit-margin-end: calc((var(--custom-client-themes-editor-content-width) + (var(--custom-client-themes-editor-editor-padding) * 2)) * -1);
animation: _2a8914fa6869f3ad-slidein 0.25s ease-in 1s forwards;
margin-inline-end: calc((var(--custom-client-themes-editor-content-width) + (var(--custom-client-themes-editor-editor-padding) * 2)) * -1);
}
@keyframes _2a8914fa6869f3ad-slidein {
0% {
-webkit-margin-end: calc((var(--custom-client-themes-editor-content-width) + (var(--custom-client-themes-editor-editor-padding) * 2)) * -1);
margin-inline-end: calc((var(--custom-client-themes-editor-content-width) + (var(--custom-client-themes-editor-editor-padding) * 2)) * -1);
}
to {
-webkit-margin-end: 0;
margin-inline-end: 0;
}
}
._2a8914fa6869f3ad-title {
align-items: center;
display: flex;
flex: 1;
}
._2a8914fa6869f3ad-title ._2a8914fa6869f3ad-premiumIcon {
color: var(--text-strong);
-webkit-margin-start: 8px;
height: 18px;
margin-inline-start: 8px;
width: 18px;
}
._2a8914fa6869f3ad-editor {
background: var(--background-base-low);
box-sizing: border-box;
flex-grow: 0;
height: 100%;
inset-inline-end: 0;
padding: var(--custom-client-themes-editor-editor-padding) 0;
position: relative;
z-index: 1;
-webkit-border-start: 5px solid var(--background-base-lower);
border-inline-start: 5px solid var(--background-base-lower);
display: flex;
flex-direction: column;
padding-inline: var(--space-16);
}
._2a8914fa6869f3ad-editorHeader {
width: var(--custom-client-themes-editor-content-width);
}
._2a8914fa6869f3ad-editorBody,
._2a8914fa6869f3ad-editorHeader {
padding: 0 var(--custom-client-themes-editor-editor-padding);
}
._2a8914fa6869f3ad-selectionGroup {
margin-top: 16px;
width: var(--custom-client-themes-editor-content-width);
}
._2a8914fa6869f3ad-editorFooter {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 16px;
padding: 0 var(--custom-client-themes-editor-editor-padding);
}
._2a8914fa6869f3ad-closeCircleButton {
cursor: pointer;
height: 20px;
inset-inline-end: 18px;
position: absolute;
top: 18px;
width: 20px;
z-index: 2;
}
._2a8914fa6869f3ad-closeCircle {
color: var(--interactive-text-default);
height: 100%;
width: 100%;
}
._2a8914fa6869f3ad-closeCircle:focus,
._2a8914fa6869f3ad-closeCircle:hover {
color: var(--interactive-text-hover);
}
._50163d4ba77e00f2-debugToolsPanel {
background: var(--background-base-low);
box-sizing: border-box;
display: flex;
flex-direction: column;
flex-grow: 0;
gap: 25px;
height: 100%;
inset-inline-end: 0;
max-width: 350px;
padding: 0;
position: relative;
z-index: 1;
}
._50163d4ba77e00f2-header {
align-items: center;
display: flex;
flex-direction: row;
gap: var(--space-16);
justify-content: space-between;
padding-top: var(--space-16);
padding-inline: var(--space-12);
}
._50163d4ba77e00f2-headerTextContainer {
gap: var(--space-8);
}
._50163d4ba77e00f2-body,
._50163d4ba77e00f2-headerTextContainer {
display: flex;
flex-direction: column;
}
._50163d4ba77e00f2-body {
flex-grow: 1;
gap: var(--space-16);
padding-inline: var(--space-12);
}
._50163d4ba77e00f2-footer {
border-top: 1px solid var(--border-normal);
}
._50163d4ba77e00f2-categoryContainer,
._50163d4ba77e00f2-footer {
display: flex;
flex-direction: column;
gap: var(--space-8);
padding: var(--space-16);
}
._50163d4ba77e00f2-categoryContainer {
background-color: var(--background-mod-subtle);
border-radius: var(--radius-sm);
}
._50163d4ba77e00f2-categoryHeader {
align-items: center;
}
._50163d4ba77e00f2-categoryHeader,
._50163d4ba77e00f2-statusRow {
display: flex;
flex-direction: row;
gap: var(--space-4);
}
._50163d4ba77e00f2-statusRow {
align-items: start;
}
._50163d4ba77e00f2-statusTextContainer {
align-items: flex-start;
display: flex;
flex: 1 0 0;
flex-direction: column;
gap: 4px;
justify-content: center;
}
._50163d4ba77e00f2-iconGood {
fill: var(--icon-feedback-positive);
}
._50163d4ba77e00f2-iconBad {
fill: var(--icon-feedback-critical);
}
._50163d4ba77e00f2-statusIcon {
flex-shrink: 0;
}
._50163d4ba77e00f2-calloutBox {
align-items: center;
align-self: stretch;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
display: flex;
gap: var(--space-4);
justify-content: center;
padding: var(--space-8);
}
._50163d4ba77e00f2-tabBar {
border-bottom: 1px solid var(--border-subtle);
max-width: calc(100% - 60px);
}
._50163d4ba77e00f2-tabBar._50163d4ba77e00f2-vertical {
border-bottom: none;
gap: var(--space-16);
}
._50163d4ba77e00f2-tab {
align-items: center;
display: flex;
flex-shrink: 1;
gap: var(--space-8);
padding-bottom: var(--space-12);
}
._50163d4ba77e00f2-tab._50163d4ba77e00f2-vertical {
border-radius: 0;
-webkit-border-start: 1px solid var(--border-subtle);
border-inline-start: 1px solid var(--border-subtle);
}
._50163d4ba77e00f2-tab._50163d4ba77e00f2-vertical._50163d4ba77e00f2-selected {
color: var(--text-brand);
-webkit-border-start: 2px solid var(--text-brand);
border-inline-start: 2px solid var(--text-brand);
-webkit-margin-start: -1px;
margin-inline-start: -1px;
}
._50163d4ba77e00f2-spinner {
margin-inline: var(--space-96);
}
.cc53dee884e76e4a-container {
background-color: var(--background-surface-highest);
border-radius: var(--radius-sm);
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 10px;
margin: 25px auto 0;
padding: 8px;
width: 260px;
}
.cc53dee884e76e4a-bannerImage {
height: 33.75px;
width: 57.23px;
}
.cc53dee884e76e4a-topContent {
align-items: center;
display: flex;
gap: 12px;
}
.cc53dee884e76e4a-textContent {
display: flex;
flex: 1;
flex-direction: column;
gap: 2px;
}
.cf6da1923918f7e3-editorAnimate {
-webkit-margin-end: calc((var(--custom-client-themes-editor-content-width) + (var(--custom-client-themes-editor-editor-padding) * 2)) * -1);
animation: cf6da1923918f7e3-slidein 0.5s ease-in 1s forwards;
margin-inline-end: calc((var(--custom-client-themes-editor-content-width) + (var(--custom-client-themes-editor-editor-padding) * 2)) * -1);
}
@keyframes cf6da1923918f7e3-slidein {
0% {
-webkit-margin-end: calc((var(--custom-client-themes-editor-content-width) + (var(--custom-client-themes-editor-editor-padding) * 2)) * -1);
margin-inline-end: calc((var(--custom-client-themes-editor-content-width) + (var(--custom-client-themes-editor-editor-padding) * 2)) * -1);
}
to {
-webkit-margin-end: 0;
margin-inline-end: 0;
}
}
.cf6da1923918f7e3-themeEditor {
background: var(--background-base-low);
box-sizing: border-box;
flex-grow: 0;
height: 100%;
inset-inline-end: 0;
padding: var(--custom-client-themes-editor-editor-padding) 0;
position: relative;
z-index: 1;
-webkit-border-start: 6px solid var(--background-base-lower);
border-inline-start: 6px solid var(--background-base-lower);
display: flex;
flex-direction: column;
padding-inline: var(--space-12);
}
.cf6da1923918f7e3-editorHeader {
width: var(--custom-client-themes-editor-content-width);
}
.cf6da1923918f7e3-editorBody,
.cf6da1923918f7e3-editorHeader {
padding: 0 var(--custom-client-themes-editor-editor-padding);
}
.cf6da1923918f7e3-selectionGroup {
margin-top: 16px;
width: var(--custom-client-themes-editor-content-width);
}
.cf6da1923918f7e3-editorFooter {
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 16px;
max-width: 268px;
padding: 0 var(--custom-client-themes-editor-editor-padding);
}
.cf6da1923918f7e3-closeCircleButton {
cursor: pointer;
height: 20px;
inset-inline-end: 18px;
position: absolute;
top: 18px;
width: 20px;
z-index: 2;
}
.cf6da1923918f7e3-closeCircle {
color: var(--interactive-text-default);
height: 100%;
width: 100%;
}
.cf6da1923918f7e3-closeCircle:focus,
.cf6da1923918f7e3-closeCircle:hover {
color: var(--interactive-text-hover);
}
.cf6da1923918f7e3-bannerUpsell {
align-items: center;
background-image: var(--custom-premium-colors-premium-gradient-tier-2);
border-radius: 8px;
box-sizing: border-box;
display: flex;
padding: 10px;
}
.cf6da1923918f7e3-bannerUpsell .cf6da1923918f7e3-premiumIcon {
color: var(--white);
-webkit-margin-end: 10px;
flex-shrink: 0;
height: 24px;
margin-inline-end: 10px;
width: 24px;
}
._247cf55b957fdfe1-container {
flex-direction: column;
gap: 8px;
}
._247cf55b957fdfe1-container,
._247cf55b957fdfe1-loader {
display: flex;
width: 100%;
}
._247cf55b957fdfe1-loader {
align-items: center;
justify-content: center;
}
._247cf55b957fdfe1-headerContainer {
align-items: center;
display: flex;
justify-content: space-between;
}
._247cf55b957fdfe1-addColorButtonText {
color: var(--text-brand);
text-transform: capitalize;
}
._247cf55b957fdfe1-addColorButtonWrapper {
position: relative;
}
._247cf55b957fdfe1-disabledButtonOverlay {
cursor: not-allowed;
inset: 0;
position: absolute;
z-index: 1;
}
._247cf55b957fdfe1-addColorButton._247cf55b957fdfe1-disabled ._247cf55b957fdfe1-addColorButtonText {
color: var(--text-muted);
}
._247cf55b957fdfe1-gradientBar {
border-radius: var(--radius-sm);
height: 44px;
position: relative;
width: 100%;
}
._247cf55b957fdfe1-colorSquare {
align-items: center;
border-radius: var(--radius-xs);
cursor: pointer;
display: flex;
justify-content: center;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
.full-motion ._247cf55b957fdfe1-colorSquare {
transition: all 0.2s ease;
}
.full-motion ._247cf55b957fdfe1-colorSquare:hover {
transform: translate(-50%, -50%) scale(1.05);
}
._247cf55b957fdfe1-colorSquareInner {
border: 2px solid #fff;
border-radius: var(--radius-xs);
box-shadow:
0 3px 13.2px 0 rgba(0, 0, 0, 0.15),
0 1px 2px 0 rgba(0, 0, 0, 0.05),
inset 0 1px 6px 0 rgba(0, 0, 0, 0.15);
height: 20px;
width: 20px;
}
._247cf55b957fdfe1-colorSquare._247cf55b957fdfe1-selected ._247cf55b957fdfe1-colorSquareInner {
border: 4px solid #fff;
}
._247cf55b957fdfe1-colorSquare:hover ._247cf55b957fdfe1-removeColorButton {
opacity: 1;
}
._247cf55b957fdfe1-colorSquareSelectedTriangle {
height: 0;
position: absolute;
top: calc(50% + 13px);
transform: translateX(-50%);
width: 0;
-webkit-border-start: 4px solid transparent;
border-inline-start: 4px solid transparent;
-webkit-border-end: 4px solid transparent;
border-inline-end: 4px solid transparent;
border-top: 5px solid #fff;
}
._247cf55b957fdfe1-hexInputContainer {
align-items: center;
background: var(--background-mod-subtle);
border: 1px solid var(--border-muted);
border-radius: var(--radius-sm);
display: flex;
height: 40px;
padding-block: 0;
padding-inline: 8px 4px;
position: relative;
transition: border-color 0.15s ease;
}
._247cf55b957fdfe1-hexInputContainer:focus-within {
border-color: var(--control-primary-background-default);
box-shadow: 0 0 0 1px var(--control-primary-background-default);
}
._247cf55b957fdfe1-hexInput {
background: none;
border: none;
color: var(--text-default);
flex: 1 1 0;
font-family: var(--font-primary);
font-size: 16px;
font-weight: 400;
height: 100%;
min-width: 0;
outline: none;
padding: 0;
}
._247cf55b957fdfe1-hexInput::-moz-placeholder {
color: var(--text-muted);
}
._247cf55b957fdfe1-hexInput::placeholder {
color: var(--text-muted);
}
._247cf55b957fdfe1-trailingIcons {
align-items: center;
display: flex;
-webkit-margin-start: 8px;
flex-shrink: 0;
margin-inline-start: 8px;
}
._247cf55b957fdfe1-hexInputInner {
background: none;
border: none;
font-family: var(--font-primary);
font-size: 14px;
font-weight: 400;
height: 100%;
padding: 0;
}
._247cf55b957fdfe1-eyeDropperIcon {
height: 16px;
width: 16px;
}
._247cf55b957fdfe1-colorItem {
align-items: center;
display: flex;
gap: 8px;
}
._247cf55b957fdfe1-hexColorPreview {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xs);
flex-shrink: 0;
height: 24px;
width: 24px;
-webkit-margin-end: 8px;
margin-inline-end: 8px;
}
._247cf55b957fdfe1-colorPreview {
border: 1px solid var(--background-base-lowest);
border-radius: var(--radius-xs);
height: 24px;
width: 24px;
}
.enable-forced-colors ._247cf55b957fdfe1-container {
forced-color-adjust: none;
}
._247cf55b957fdfe1-icon {
display: block;
}
._247cf55b957fdfe1-eyeDropperTooltip {
max-width: 130px;
}
.c85552a60d5ba236-themeSelector {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
height: 32px;
}
.c85552a60d5ba236-themePillItemSelected {
border: 1px solid var(--border-subtle);
}
.c85552a60d5ba236-themePillItemSelected,
.c85552a60d5ba236-themeSelector [class*="pillItem"] {
border-radius: var(--radius-xs);
}
._5a2dfc677f2b8493-container {
border: 1px solid var(--border-muted);
width: 288px;
}
._5a2dfc677f2b8493-container,
._5a2dfc677f2b8493-mobileContainer {
background: var(--background-base-low);
display: flex;
flex-direction: column;
}
._5a2dfc677f2b8493-mobileContainer {
height: 100%;
width: 100%;
}
._5a2dfc677f2b8493-editorBody {
gap: 32px;
margin-top: 16px;
padding-inline: var(--space-12) calc(var(--space-12) - 8px);
}
._5a2dfc677f2b8493-editorBody,
._5a2dfc677f2b8493-section {
display: flex;
flex-direction: column;
}
._5a2dfc677f2b8493-section {
gap: 12px;
}
._5a2dfc677f2b8493-resetButton {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 19px;
}
._5a2dfc677f2b8493-headerContainer {
align-items: center;
display: flex;
gap: 4px;
}
._5a2dfc677f2b8493-closeButton {
-webkit-margin-start: auto;
margin-inline-start: auto;
}
._5a2dfc677f2b8493-sliderContainer {
display: flex;
flex-direction: column;
gap: 8px;
}
._5a2dfc677f2b8493-gradientDirectionSliderContainer {
margin-bottom: 4px;
position: relative;
}
._5a2dfc677f2b8493-gradientDirectionSliderContainer div[class*="barFill"] {
background: transparent;
display: none;
opacity: 0;
}
._5a2dfc677f2b8493-angleIndicatorOverlay {
align-items: center;
display: flex;
height: 12px;
position: absolute;
top: 35.5px;
inset-inline: 0.5px;
justify-content: space-between;
}
._5a2dfc677f2b8493-angleIndicatorDot {
background-color: var(--interactive-muted);
border-radius: 50%;
height: 8px;
width: 8px;
}
._5a2dfc677f2b8493-angleIndicatorDotHover,
._5a2dfc677f2b8493-angleIndicatorLargeDot {
background-color: var(--interactive-muted);
border-radius: 50%;
height: 10px;
width: 10px;
}
._5a2dfc677f2b8493-angleIndicatorLargeDotHover {
background-color: var(--interactive-muted);
border-radius: 50%;
height: 12px;
width: 12px;
}
._5a2dfc677f2b8493-sliderWrapper:hover ._5a2dfc677f2b8493-angleIndicatorDot {
height: 10px;
width: 10px;
}
._5a2dfc677f2b8493-sliderWrapper:hover ._5a2dfc677f2b8493-angleIndicatorLargeDot {
height: 12px;
width: 12px;
}
._5a2dfc677f2b8493-footerContainer {
align-items: center;
border-top: 1px solid var(--border-subtle);
display: flex;
flex-direction: row;
gap: 8px;
padding: 16px 20px;
}
._5a2dfc677f2b8493-footerContainer > * {
flex: 1;
}
._5a2dfc677f2b8493-footerContainerNonPremium {
flex-direction: column;
gap: 12px;
}
._5a2dfc677f2b8493-footerRightButtons {
align-items: center;
display: flex;
gap: 24px;
justify-content: flex-end;
width: 100%;
}
._5a2dfc677f2b8493-subscribeButton {
color: var(--white);
flex-shrink: 0;
height: 40px;
min-width: 110px;
width: 100%;
}
._5a2dfc677f2b8493-coachmarkHeaderContainer {
display: flex;
flex-direction: column;
}
._5a2dfc677f2b8493-headerAndCloseRow {
align-items: center;
display: flex;
justify-content: space-between;
width: 100%;
}
._5a2dfc677f2b8493-subtitle {
margin-top: var(--space-4);
}
._5a2dfc677f2b8493-coachmarkFooterContainer {
border-top: 1px solid var(--border-subtle);
display: flex;
flex-direction: column;
gap: var(--space-8);
padding: var(--space-16) var(--space-20);
}
._5a2dfc677f2b8493-nitroIcon {
fill: var(--icon-strong);
}
._5a2dfc677f2b8493-controlLabelContainer {
display: flex;
justify-content: space-between;
white-space: nowrap;
}
._5a2dfc677f2b8493-controlLabelInput {
background: none;
border: 1px solid transparent;
border-radius: var(--radius-xs);
color: var(--text-default);
flex: 0 0 auto;
font-family: var(--font-primary);
font-size: 16px;
font-weight: var(--font-weight-medium);
height: 20px;
line-height: 20px;
outline: none;
padding-block: 0;
padding-inline: 12px 0;
text-align: end;
transition: border-color 0.15s ease;
width: 40px;
}
._5a2dfc677f2b8493-controlLabelInput:focus {
background: var(--input-background-default);
border-color: var(--control-primary-background-default);
box-shadow: 0 0 0 1px var(--control-primary-background-default);
}
._5a2dfc677f2b8493-controlLabelInput::-moz-placeholder {
color: var(--input-placeholder-text-default);
}
._5a2dfc677f2b8493-controlLabelInput::placeholder {
color: var(--input-placeholder-text-default);
}
._26f4a3b365a669cd-mobileContainer {
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
z-index: 100;
}
.a3002d7de5be5280-appAsidePanelWrapper {
display: flex;
flex: 1 1 auto;
flex-direction: row;
min-height: 0;
}
.a3002d7de5be5280-mobileAppAsidePanelWrapper {
flex-direction: column;
overflow-y: scroll;
}
.a3002d7de5be5280-notAppAsidePanel {
flex: 1;
min-width: 0;
}
.a3002d7de5be5280-app {
position: static;
}
.a3002d7de5be5280-app,
.a3002d7de5be5280-mobileApp {
height: 100%;
z-index: auto;
}
.a3002d7de5be5280-allowsScrolling,
.a3002d7de5be5280-mobileApp {
overflow: auto;
}
.a3002d7de5be5280-notAppAsidePanel:has(~ [data-app-right-panel="true"]) .a3002d7de5be5280-app {
position: relative;
}
.ab9bdf90e7c35b35-modal {
border-radius: 5px;
box-shadow: var(--legacy-elevation-border), var(--legacy-elevation-high);
display: flex;
flex: 1;
flex-direction: column;
min-height: 0;
position: relative;
}
.theme-dark .ab9bdf90e7c35b35-modal {
background-color: var(--primary-600);
}
.theme-light .ab9bdf90e7c35b35-modal {
background: var(--white);
}
.ab9bdf90e7c35b35-sizeSmall {
max-height: 660px;
min-height: 200px;
width: 440px;
}
.ab9bdf90e7c35b35-sizeMedium {
max-height: 800px;
min-height: 400px;
width: 600px;
}
.ab9bdf90e7c35b35-sizeLarge {
max-width: 960px;
min-height: 400px;
min-width: 800px;
}
@media (max-width: 485px) {
.ab9bdf90e7c35b35-sizeLarge,
.ab9bdf90e7c35b35-sizeMedium,
.ab9bdf90e7c35b35-sizeSmall {
align-self: center;
max-height: 100vh;
min-width: auto;
width: 96%;
}
.ab9bdf90e7c35b35-fullscreenOnMobile {
border-radius: 0;
position: absolute;
top: 0;
inset-inline: 0;
bottom: 0;
overflow-y: auto;
width: 100%;
}
.ab9bdf90e7c35b35-fullscreenOnMobile .ab9bdf90e7c35b35-footer,
.ab9bdf90e7c35b35-fullscreenOnMobile .ab9bdf90e7c35b35-header {
border-radius: 0;
}
.ab9bdf90e7c35b35-hideOnFullscreen {
display: none;
}
}
:root {
--application-subscription-end: hsl(var(--application-subscription-end-hsl)/1);
--application-subscription-end-hsl: 196.564 calc(var(--saturation-factor, 1) * 98.788%) 32.353%;
--application-subscription-start: hsl(var(--application-subscription-start-hsl)/1);
--application-subscription-start-hsl: 234.909 calc(var(--saturation-factor, 1) * 68.465%) 52.745%;
--battlenet: hsl(var(--battlenet-hsl)/1);
--battlenet-hsl: 199.651 calc(var(--saturation-factor, 1) * 100%) 44.902%;
--bg-animated-gradient-background-indigo-1: hsl(var(--bg-animated-gradient-background-indigo-1-hsl)/1);
--bg-animated-gradient-background-indigo-1-hsl: 241.5 calc(var(--saturation-factor, 1) * 57.143%) 27.451%;
--bg-animated-gradient-background-indigo-2: hsl(var(--bg-animated-gradient-background-indigo-2-hsl)/1);
--bg-animated-gradient-background-indigo-2-hsl: 257.059 calc(var(--saturation-factor, 1) * 100%) 20%;
--bg-animated-gradient-background-not-black: hsl(var(--bg-animated-gradient-background-not-black-hsl)/1);
--bg-animated-gradient-background-not-black-hsl: 240 calc(var(--saturation-factor, 1) * 7.143%) 5.49%;
--bg-animated-gradient-background-pink-1: hsl(var(--bg-animated-gradient-background-pink-1-hsl)/1);
--bg-animated-gradient-background-pink-1-hsl: 327.831 calc(var(--saturation-factor, 1) * 80.583%) 59.608%;
--bg-gradient-aurora-1: hsl(var(--bg-gradient-aurora-1-hsl)/1);
--bg-gradient-aurora-1-hsl: 219.74 calc(var(--saturation-factor, 1) * 86.517%) 17.451%;
--bg-gradient-aurora-2: hsl(var(--bg-gradient-aurora-2-hsl)/1);
--bg-gradient-aurora-2-hsl: 237.778 calc(var(--saturation-factor, 1) * 76.415%) 41.569%;
--bg-gradient-aurora-3: hsl(var(--bg-gradient-aurora-3-hsl)/1);
--bg-gradient-aurora-3-hsl: 183.556 calc(var(--saturation-factor, 1) * 78.035%) 33.922%;
--bg-gradient-aurora-4: hsl(var(--bg-gradient-aurora-4-hsl)/1);
--bg-gradient-aurora-4-hsl: 169.2 calc(var(--saturation-factor, 1) * 60.241%) 32.549%;
--bg-gradient-aurora-5: hsl(var(--bg-gradient-aurora-5-hsl)/1);
--bg-gradient-aurora-5-hsl: 229.839 calc(var(--saturation-factor, 1) * 92.537%) 26.275%;
--bg-gradient-blurple-twilight-1: hsl(var(--bg-gradient-blurple-twilight-1-hsl)/1);
--bg-gradient-blurple-twilight-1-hsl: 233.904 calc(var(--saturation-factor, 1) * 79.574%) 53.922%;
--bg-gradient-blurple-twilight-2: hsl(var(--bg-gradient-blurple-twilight-2-hsl)/1);
--bg-gradient-blurple-twilight-2-hsl: 245.294 calc(var(--saturation-factor, 1) * 63.75%) 31.373%;
--bg-gradient-chroma-glow-1: hsl(var(--bg-gradient-chroma-glow-1-hsl)/1);
--bg-gradient-chroma-glow-1-hsl: 183.39 calc(var(--saturation-factor, 1) * 86.341%) 40.196%;
--bg-gradient-chroma-glow-2: hsl(var(--bg-gradient-chroma-glow-2-hsl)/1);
--bg-gradient-chroma-glow-2-hsl: 258.113 calc(var(--saturation-factor, 1) * 89.831%) 46.275%;
--bg-gradient-chroma-glow-3: hsl(var(--bg-gradient-chroma-glow-3-hsl)/1);
--bg-gradient-chroma-glow-3-hsl: 298.491 calc(var(--saturation-factor, 1) * 90.857%) 34.314%;
--bg-gradient-chroma-glow-4: hsl(var(--bg-gradient-chroma-glow-4-hsl)/1);
--bg-gradient-chroma-glow-4-hsl: 264.767 calc(var(--saturation-factor, 1) * 100%) 66.275%;
--bg-gradient-chroma-glow-5: hsl(var(--bg-gradient-chroma-glow-5-hsl)/1);
--bg-gradient-chroma-glow-5-hsl: 206.702 calc(var(--saturation-factor, 1) * 75.494%) 50.392%;
--bg-gradient-citrus-sherbert-1: hsl(var(--bg-gradient-citrus-sherbert-1-hsl)/1);
--bg-gradient-citrus-sherbert-1-hsl: 39.683 calc(var(--saturation-factor, 1) * 88.732%) 58.235%;
--bg-gradient-citrus-sherbert-2: hsl(var(--bg-gradient-citrus-sherbert-2-hsl)/1);
--bg-gradient-citrus-sherbert-2-hsl: 18 calc(var(--saturation-factor, 1) * 81.522%) 63.922%;
--bg-gradient-cotton-candy-1: hsl(var(--bg-gradient-cotton-candy-1-hsl)/1);
--bg-gradient-cotton-candy-1-hsl: 349.315 calc(var(--saturation-factor, 1) * 76.842%) 81.373%;
--bg-gradient-cotton-candy-2: hsl(var(--bg-gradient-cotton-candy-2-hsl)/1);
--bg-gradient-cotton-candy-2-hsl: 226.4 calc(var(--saturation-factor, 1) * 92.593%) 84.118%;
--bg-gradient-crimson-moon-1: hsl(var(--bg-gradient-crimson-moon-1-hsl)/1);
--bg-gradient-crimson-moon-1-hsl: 0 calc(var(--saturation-factor, 1) * 88.608%) 30.98%;
--bg-gradient-crimson-moon-2: hsl(var(--bg-gradient-crimson-moon-2-hsl)/1);
--bg-gradient-crimson-moon-2-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
--bg-gradient-desert-khaki-1: hsl(var(--bg-gradient-desert-khaki-1-hsl)/1);
--bg-gradient-desert-khaki-1-hsl: 28.696 calc(var(--saturation-factor, 1) * 32.394%) 86.078%;
--bg-gradient-desert-khaki-2: hsl(var(--bg-gradient-desert-khaki-2-hsl)/1);
--bg-gradient-desert-khaki-2-hsl: 40 calc(var(--saturation-factor, 1) * 41.284%) 78.627%;
--bg-gradient-desert-khaki-3: hsl(var(--bg-gradient-desert-khaki-3-hsl)/1);
--bg-gradient-desert-khaki-3-hsl: 50.164 calc(var(--saturation-factor, 1) * 49.593%) 75.882%;
--bg-gradient-dusk-1: hsl(var(--bg-gradient-dusk-1-hsl)/1);
--bg-gradient-dusk-1-hsl: 292.8 calc(var(--saturation-factor, 1) * 13.514%) 36.275%;
--bg-gradient-dusk-2: hsl(var(--bg-gradient-dusk-2-hsl)/1);
--bg-gradient-dusk-2-hsl: 223.125 calc(var(--saturation-factor, 1) * 41.026%) 69.412%;
--bg-gradient-easter-egg-1: hsl(var(--bg-gradient-easter-egg-1-hsl)/1);
--bg-gradient-easter-egg-1-hsl: 226.731 calc(var(--saturation-factor, 1) * 58.427%) 65.098%;
--bg-gradient-easter-egg-2: hsl(var(--bg-gradient-easter-egg-2-hsl)/1);
--bg-gradient-easter-egg-2-hsl: 227.143 calc(var(--saturation-factor, 1) * 30.973%) 44.314%;
--bg-gradient-forest-1: hsl(var(--bg-gradient-forest-1-hsl)/1);
--bg-gradient-forest-1-hsl: 124.286 calc(var(--saturation-factor, 1) * 25.926%) 10.588%;
--bg-gradient-forest-2: hsl(var(--bg-gradient-forest-2-hsl)/1);
--bg-gradient-forest-2-hsl: 142.5 calc(var(--saturation-factor, 1) * 26.23%) 23.922%;
--bg-gradient-forest-3: hsl(var(--bg-gradient-forest-3-hsl)/1);
--bg-gradient-forest-3-hsl: 76.154 calc(var(--saturation-factor, 1) * 20.635%) 24.706%;
--bg-gradient-forest-4: hsl(var(--bg-gradient-forest-4-hsl)/1);
--bg-gradient-forest-4-hsl: 116.667 calc(var(--saturation-factor, 1) * 16.981%) 41.569%;
--bg-gradient-forest-5: hsl(var(--bg-gradient-forest-5-hsl)/1);
--bg-gradient-forest-5-hsl: 42.766 calc(var(--saturation-factor, 1) * 38.525%) 47.843%;
--bg-gradient-hanami-1: hsl(var(--bg-gradient-hanami-1-hsl)/1);
--bg-gradient-hanami-1-hsl: 352.174 calc(var(--saturation-factor, 1) * 68.317%) 80.196%;
--bg-gradient-hanami-2: hsl(var(--bg-gradient-hanami-2-hsl)/1);
--bg-gradient-hanami-2-hsl: 43.146 calc(var(--saturation-factor, 1) * 73.554%) 76.275%;
--bg-gradient-hanami-3: hsl(var(--bg-gradient-hanami-3-hsl)/1);
--bg-gradient-hanami-3-hsl: 115.714 calc(var(--saturation-factor, 1) * 43.077%) 74.51%;
--bg-gradient-lofi-vibes-1: hsl(var(--bg-gradient-lofi-vibes-1-hsl)/1);
--bg-gradient-lofi-vibes-1-hsl: 219.759 calc(var(--saturation-factor, 1) * 83.838%) 80.588%;
--bg-gradient-lofi-vibes-2: hsl(var(--bg-gradient-lofi-vibes-2-hsl)/1);
--bg-gradient-lofi-vibes-2-hsl: 183.81 calc(var(--saturation-factor, 1) * 57.798%) 78.627%;
--bg-gradient-lofi-vibes-3: hsl(var(--bg-gradient-lofi-vibes-3-hsl)/1);
--bg-gradient-lofi-vibes-3-hsl: 129.6 calc(var(--saturation-factor, 1) * 46.296%) 78.824%;
--bg-gradient-lofi-vibes-4: hsl(var(--bg-gradient-lofi-vibes-4-hsl)/1);
--bg-gradient-lofi-vibes-4-hsl: 75.738 calc(var(--saturation-factor, 1) * 48.8%) 75.49%;
--bg-gradient-mars-1: hsl(var(--bg-gradient-mars-1-hsl)/1);
--bg-gradient-mars-1-hsl: 14.795 calc(var(--saturation-factor, 1) * 36.318%) 39.412%;
--bg-gradient-mars-2: hsl(var(--bg-gradient-mars-2-hsl)/1);
--bg-gradient-mars-2-hsl: 0 calc(var(--saturation-factor, 1) * 36.19%) 41.176%;
--bg-gradient-midnight-blurple-1: hsl(var(--bg-gradient-midnight-blurple-1-hsl)/1);
--bg-gradient-midnight-blurple-1-hsl: 245.077 calc(var(--saturation-factor, 1) * 55.085%) 53.725%;
--bg-gradient-midnight-blurple-2: hsl(var(--bg-gradient-midnight-blurple-2-hsl)/1);
--bg-gradient-midnight-blurple-2-hsl: 259.024 calc(var(--saturation-factor, 1) * 74.545%) 10.784%;
--bg-gradient-mint-apple-1: hsl(var(--bg-gradient-mint-apple-1-hsl)/1);
--bg-gradient-mint-apple-1-hsl: 165.625 calc(var(--saturation-factor, 1) * 39.669%) 52.549%;
--bg-gradient-mint-apple-2: hsl(var(--bg-gradient-mint-apple-2-hsl)/1);
--bg-gradient-mint-apple-2-hsl: 118.681 calc(var(--saturation-factor, 1) * 40.444%) 55.882%;
--bg-gradient-mint-apple-3: hsl(var(--bg-gradient-mint-apple-3-hsl)/1);
--bg-gradient-mint-apple-3-hsl: 86.667 calc(var(--saturation-factor, 1) * 48.293%) 59.804%;
--bg-gradient-neon-nights-1: hsl(var(--bg-gradient-neon-nights-1-hsl)/1);
--bg-gradient-neon-nights-1-hsl: 176.407 calc(var(--saturation-factor, 1) * 98.817%) 33.137%;
--bg-gradient-neon-nights-2: hsl(var(--bg-gradient-neon-nights-2-hsl)/1);
--bg-gradient-neon-nights-2-hsl: 259.333 calc(var(--saturation-factor, 1) * 39.474%) 55.294%;
--bg-gradient-neon-nights-3: hsl(var(--bg-gradient-neon-nights-3-hsl)/1);
--bg-gradient-neon-nights-3-hsl: 313.548 calc(var(--saturation-factor, 1) * 52.542%) 46.275%;
--bg-gradient-retro-raincloud-1: hsl(var(--bg-gradient-retro-raincloud-1-hsl)/1);
--bg-gradient-retro-raincloud-1-hsl: 201.553 calc(var(--saturation-factor, 1) * 47.032%) 42.941%;
--bg-gradient-retro-raincloud-2: hsl(var(--bg-gradient-retro-raincloud-2-hsl)/1);
--bg-gradient-retro-raincloud-2-hsl: 241.017 calc(var(--saturation-factor, 1) * 29.648%) 60.98%;
--bg-gradient-retro-storm-1: hsl(var(--bg-gradient-retro-storm-1-hsl)/1);
--bg-gradient-retro-storm-1-hsl: 201.553 calc(var(--saturation-factor, 1) * 47.032%) 42.941%;
--bg-gradient-retro-storm-2: hsl(var(--bg-gradient-retro-storm-2-hsl)/1);
--bg-gradient-retro-storm-2-hsl: 240.896 calc(var(--saturation-factor, 1) * 27.801%) 47.255%;
--bg-gradient-sepia-1: hsl(var(--bg-gradient-sepia-1-hsl)/1);
--bg-gradient-sepia-1-hsl: 32.727 calc(var(--saturation-factor, 1) * 14.163%) 45.686%;
--bg-gradient-sepia-2: hsl(var(--bg-gradient-sepia-2-hsl)/1);
--bg-gradient-sepia-2-hsl: 36.207 calc(var(--saturation-factor, 1) * 46.774%) 24.314%;
--bg-gradient-strawberry-lemonade-1: hsl(var(--bg-gradient-strawberry-lemonade-1-hsl)/1);
--bg-gradient-strawberry-lemonade-1-hsl: 326.98 calc(var(--saturation-factor, 1) * 74.129%) 39.412%;
--bg-gradient-strawberry-lemonade-2: hsl(var(--bg-gradient-strawberry-lemonade-2-hsl)/1);
--bg-gradient-strawberry-lemonade-2-hsl: 27.778 calc(var(--saturation-factor, 1) * 71.681%) 44.314%;
--bg-gradient-strawberry-lemonade-3: hsl(var(--bg-gradient-strawberry-lemonade-3-hsl)/1);
--bg-gradient-strawberry-lemonade-3-hsl: 39.588 calc(var(--saturation-factor, 1) * 80.165%) 52.549%;
--bg-gradient-sunrise-1: hsl(var(--bg-gradient-sunrise-1-hsl)/1);
--bg-gradient-sunrise-1-hsl: 326.809 calc(var(--saturation-factor, 1) * 41.964%) 43.922%;
--bg-gradient-sunrise-2: hsl(var(--bg-gradient-sunrise-2-hsl)/1);
--bg-gradient-sunrise-2-hsl: 27.5 calc(var(--saturation-factor, 1) * 44.86%) 58.039%;
--bg-gradient-sunrise-3: hsl(var(--bg-gradient-sunrise-3-hsl)/1);
--bg-gradient-sunrise-3-hsl: 50.286 calc(var(--saturation-factor, 1) * 46.256%) 44.51%;
--bg-gradient-sunset-1: hsl(var(--bg-gradient-sunset-1-hsl)/1);
--bg-gradient-sunset-1-hsl: 259.2 calc(var(--saturation-factor, 1) * 55.556%) 35.294%;
--bg-gradient-sunset-2: hsl(var(--bg-gradient-sunset-2-hsl)/1);
--bg-gradient-sunset-2-hsl: 21.667 calc(var(--saturation-factor, 1) * 66.667%) 57.647%;
--bg-gradient-under-the-sea-1: hsl(var(--bg-gradient-under-the-sea-1-hsl)/1);
--bg-gradient-under-the-sea-1-hsl: 114.783 calc(var(--saturation-factor, 1) * 10.502%) 42.941%;
--bg-gradient-under-the-sea-2: hsl(var(--bg-gradient-under-the-sea-2-hsl)/1);
--bg-gradient-under-the-sea-2-hsl: 158.667 calc(var(--saturation-factor, 1) * 20.362%) 43.333%;
--bg-gradient-under-the-sea-3: hsl(var(--bg-gradient-under-the-sea-3-hsl)/1);
--bg-gradient-under-the-sea-3-hsl: 175.385 calc(var(--saturation-factor, 1) * 10.924%) 46.667%;
--bungie: hsl(var(--bungie-hsl)/1);
--bungie-hsl: 196.916 calc(var(--saturation-factor, 1) * 100%) 44.51%;
--checkpoint-emojis-gradient-end: hsl(var(--checkpoint-emojis-gradient-end-hsl)/1);
--checkpoint-emojis-gradient-end-hsl: 283.2 calc(var(--saturation-factor, 1) * 53.191%) 9.216%;
--checkpoint-emojis-gradient-start: hsl(var(--checkpoint-emojis-gradient-start-hsl)/1);
--checkpoint-emojis-gradient-start-hsl: 260.114 calc(var(--saturation-factor, 1) * 87.129%) 60.392%;
--checkpoint-emojis-primary: hsl(var(--checkpoint-emojis-primary-hsl)/1);
--checkpoint-emojis-primary-hsl: 269.011 calc(var(--saturation-factor, 1) * 88.35%) 79.804%;
--checkpoint-emojis-secondary: hsl(var(--checkpoint-emojis-secondary-hsl)/1);
--checkpoint-emojis-secondary-hsl: 268.837 calc(var(--saturation-factor, 1) * 72.067%) 64.902%;
--checkpoint-end-gradient-end: hsl(var(--checkpoint-end-gradient-end-hsl)/1);
--checkpoint-end-gradient-end-hsl: 149.333 calc(var(--saturation-factor, 1) * 56.962%) 15.49%;
--checkpoint-end-gradient-start: hsl(var(--checkpoint-end-gradient-start-hsl)/1);
--checkpoint-end-gradient-start-hsl: 149.302 calc(var(--saturation-factor, 1) * 50.588%) 50%;
--checkpoint-end-primary: hsl(var(--checkpoint-end-primary-hsl)/1);
--checkpoint-end-primary-hsl: 143.316 calc(var(--saturation-factor, 1) * 83.55%) 54.706%;
--checkpoint-end-secondary: hsl(var(--checkpoint-end-secondary-hsl)/1);
--checkpoint-end-secondary-hsl: 143.673 calc(var(--saturation-factor, 1) * 78.61%) 36.667%;
--checkpoint-friends-gradient-end: hsl(var(--checkpoint-friends-gradient-end-hsl)/1);
--checkpoint-friends-gradient-end-hsl: 259.481 calc(var(--saturation-factor, 1) * 79.381%) 19.02%;
--checkpoint-friends-gradient-start: hsl(var(--checkpoint-friends-gradient-start-hsl)/1);
--checkpoint-friends-gradient-start-hsl: 256.018 calc(var(--saturation-factor, 1) * 96.507%) 55.098%;
--checkpoint-friends-primary: hsl(var(--checkpoint-friends-primary-hsl)/1);
--checkpoint-friends-primary-hsl: 234 calc(var(--saturation-factor, 1) * 90%) 80.392%;
--checkpoint-friends-secondary: hsl(var(--checkpoint-friends-secondary-hsl)/1);
--checkpoint-friends-secondary-hsl: 234 calc(var(--saturation-factor, 1) * 39.823%) 55.686%;
--checkpoint-gaming-gradient-end: hsl(var(--checkpoint-gaming-gradient-end-hsl)/1);
--checkpoint-gaming-gradient-end-hsl: 28.8 calc(var(--saturation-factor, 1) * 53.191%) 9.216%;
--checkpoint-gaming-gradient-start: hsl(var(--checkpoint-gaming-gradient-start-hsl)/1);
--checkpoint-gaming-gradient-start-hsl: 27.595 calc(var(--saturation-factor, 1) * 100%) 53.529%;
--checkpoint-gaming-primary: hsl(var(--checkpoint-gaming-primary-hsl)/1);
--checkpoint-gaming-primary-hsl: 34.699 calc(var(--saturation-factor, 1) * 100%) 51.176%;
--checkpoint-gaming-secondary: hsl(var(--checkpoint-gaming-secondary-hsl)/1);
--checkpoint-gaming-secondary-hsl: 26.809 calc(var(--saturation-factor, 1) * 86.239%) 42.745%;
--checkpoint-guilds-gradient-end: hsl(var(--checkpoint-guilds-gradient-end-hsl)/1);
--checkpoint-guilds-gradient-end-hsl: 170.4 calc(var(--saturation-factor, 1) * 53.191%) 9.216%;
--checkpoint-guilds-gradient-start: hsl(var(--checkpoint-guilds-gradient-start-hsl)/1);
--checkpoint-guilds-gradient-start-hsl: 169.589 calc(var(--saturation-factor, 1) * 90.123%) 47.647%;
--checkpoint-guilds-primary: hsl(var(--checkpoint-guilds-primary-hsl)/1);
--checkpoint-guilds-primary-hsl: 169.811 calc(var(--saturation-factor, 1) * 97.546%) 68.039%;
--checkpoint-guilds-secondary: hsl(var(--checkpoint-guilds-secondary-hsl)/1);
--checkpoint-guilds-secondary-hsl: 169.672 calc(var(--saturation-factor, 1) * 68.539%) 34.902%;
--checkpoint-messages-gradient-end: hsl(var(--checkpoint-messages-gradient-end-hsl)/1);
--checkpoint-messages-gradient-end-hsl: 7.2 calc(var(--saturation-factor, 1) * 53.191%) 9.216%;
--checkpoint-messages-gradient-start: hsl(var(--checkpoint-messages-gradient-start-hsl)/1);
--checkpoint-messages-gradient-start-hsl: 308.75 calc(var(--saturation-factor, 1) * 98.969%) 61.961%;
--checkpoint-messages-primary: hsl(var(--checkpoint-messages-primary-hsl)/1);
--checkpoint-messages-primary-hsl: 315.084 calc(var(--saturation-factor, 1) * 100%) 64.902%;
--checkpoint-messages-secondary: hsl(var(--checkpoint-messages-secondary-hsl)/1);
--checkpoint-messages-secondary-hsl: 315.319 calc(var(--saturation-factor, 1) * 70.854%) 39.02%;
--checkpoint-persona-eight-background-overlay: hsl(var(--checkpoint-persona-eight-background-overlay-hsl)/1);
--checkpoint-persona-eight-background-overlay-hsl: 32 calc(var(--saturation-factor, 1) * 60%) 9.804%;
--checkpoint-persona-eight-gradient-end: hsl(var(--checkpoint-persona-eight-gradient-end-hsl)/1);
--checkpoint-persona-eight-gradient-end-hsl: 31.154 calc(var(--saturation-factor, 1) * 55.319%) 18.431%;
--checkpoint-persona-eight-gradient-start: hsl(var(--checkpoint-persona-eight-gradient-start-hsl)/1);
--checkpoint-persona-eight-gradient-start-hsl: 39.184 calc(var(--saturation-factor, 1) * 56.322%) 65.882%;
--checkpoint-persona-eight-primary: hsl(var(--checkpoint-persona-eight-primary-hsl)/1);
--checkpoint-persona-eight-primary-hsl: 39.184 calc(var(--saturation-factor, 1) * 56.322%) 65.882%;
--checkpoint-persona-eight-secondary: hsl(var(--checkpoint-persona-eight-secondary-hsl)/1);
--checkpoint-persona-eight-secondary-hsl: 39.612 calc(var(--saturation-factor, 1) * 42.387%) 47.647%;
--checkpoint-persona-five-background-overlay: hsl(var(--checkpoint-persona-five-background-overlay-hsl)/1);
--checkpoint-persona-five-background-overlay-hsl: 339.545 calc(var(--saturation-factor, 1) * 66.667%) 12.941%;
--checkpoint-persona-five-gradient-end: hsl(var(--checkpoint-persona-five-gradient-end-hsl)/1);
--checkpoint-persona-five-gradient-end-hsl: 339.231 calc(var(--saturation-factor, 1) * 67.241%) 22.745%;
--checkpoint-persona-five-gradient-start: hsl(var(--checkpoint-persona-five-gradient-start-hsl)/1);
--checkpoint-persona-five-gradient-start-hsl: 339.114 calc(var(--saturation-factor, 1) * 90.805%) 65.882%;
--checkpoint-persona-five-primary: hsl(var(--checkpoint-persona-five-primary-hsl)/1);
--checkpoint-persona-five-primary-hsl: 339.114 calc(var(--saturation-factor, 1) * 90.805%) 65.882%;
--checkpoint-persona-five-secondary: hsl(var(--checkpoint-persona-five-secondary-hsl)/1);
--checkpoint-persona-five-secondary-hsl: 338.983 calc(var(--saturation-factor, 1) * 71.66%) 48.431%;
--checkpoint-persona-four-background-overlay: hsl(var(--checkpoint-persona-four-background-overlay-hsl)/1);
--checkpoint-persona-four-background-overlay-hsl: 312.222 calc(var(--saturation-factor, 1) * 93.103%) 11.373%;
--checkpoint-persona-four-gradient-end: hsl(var(--checkpoint-persona-four-gradient-end-hsl)/1);
--checkpoint-persona-four-gradient-end-hsl: 7.2 calc(var(--saturation-factor, 1) * 53.191%) 9.216%;
--checkpoint-persona-four-gradient-start: hsl(var(--checkpoint-persona-four-gradient-start-hsl)/1);
--checkpoint-persona-four-gradient-start-hsl: 308.75 calc(var(--saturation-factor, 1) * 98.969%) 61.961%;
--checkpoint-persona-four-primary: hsl(var(--checkpoint-persona-four-primary-hsl)/1);
--checkpoint-persona-four-primary-hsl: 312.083 calc(var(--saturation-factor, 1) * 84.706%) 66.667%;
--checkpoint-persona-four-secondary: hsl(var(--checkpoint-persona-four-secondary-hsl)/1);
--checkpoint-persona-four-secondary-hsl: 315.319 calc(var(--saturation-factor, 1) * 70.854%) 39.02%;
--checkpoint-persona-nine-background-overlay: hsl(var(--checkpoint-persona-nine-background-overlay-hsl)/1);
--checkpoint-persona-nine-background-overlay-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 14.902%;
--checkpoint-persona-nine-gradient-end: hsl(var(--checkpoint-persona-nine-gradient-end-hsl)/1);
--checkpoint-persona-nine-gradient-end-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 24.706%;
--checkpoint-persona-nine-gradient-start: hsl(var(--checkpoint-persona-nine-gradient-start-hsl)/1);
--checkpoint-persona-nine-gradient-start-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 93.333%;
--checkpoint-persona-nine-primary: hsl(var(--checkpoint-persona-nine-primary-hsl)/1);
--checkpoint-persona-nine-primary-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 93.333%;
--checkpoint-persona-nine-secondary: hsl(var(--checkpoint-persona-nine-secondary-hsl)/1);
--checkpoint-persona-nine-secondary-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 66.275%;
--checkpoint-persona-one-background-overlay: hsl(var(--checkpoint-persona-one-background-overlay-hsl)/1);
--checkpoint-persona-one-background-overlay-hsl: 169.5 calc(var(--saturation-factor, 1) * 76.923%) 10.196%;
--checkpoint-persona-one-gradient-end: hsl(var(--checkpoint-persona-one-gradient-end-hsl)/1);
--checkpoint-persona-one-gradient-end-hsl: 168.98 calc(var(--saturation-factor, 1) * 59.036%) 16.275%;
--checkpoint-persona-one-gradient-start: hsl(var(--checkpoint-persona-one-gradient-start-hsl)/1);
--checkpoint-persona-one-gradient-start-hsl: 169.811 calc(var(--saturation-factor, 1) * 97.546%) 68.039%;
--checkpoint-persona-one-primary: hsl(var(--checkpoint-persona-one-primary-hsl)/1);
--checkpoint-persona-one-primary-hsl: 169.811 calc(var(--saturation-factor, 1) * 97.546%) 68.039%;
--checkpoint-persona-one-secondary: hsl(var(--checkpoint-persona-one-secondary-hsl)/1);
--checkpoint-persona-one-secondary-hsl: 169.672 calc(var(--saturation-factor, 1) * 68.539%) 34.902%;
--checkpoint-persona-seven-background-overlay: hsl(var(--checkpoint-persona-seven-background-overlay-hsl)/1);
--checkpoint-persona-seven-background-overlay-hsl: 44.516 calc(var(--saturation-factor, 1) * 100%) 6.078%;
--checkpoint-persona-seven-gradient-end: hsl(var(--checkpoint-persona-seven-gradient-end-hsl)/1);
--checkpoint-persona-seven-gradient-end-hsl: 30.361 calc(var(--saturation-factor, 1) * 85.567%) 19.02%;
--checkpoint-persona-seven-gradient-start: hsl(var(--checkpoint-persona-seven-gradient-start-hsl)/1);
--checkpoint-persona-seven-gradient-start-hsl: 49.891 calc(var(--saturation-factor, 1) * 100%) 63.922%;
--checkpoint-persona-seven-primary: hsl(var(--checkpoint-persona-seven-primary-hsl)/1);
--checkpoint-persona-seven-primary-hsl: 49.891 calc(var(--saturation-factor, 1) * 100%) 63.922%;
--checkpoint-persona-seven-secondary: hsl(var(--checkpoint-persona-seven-secondary-hsl)/1);
--checkpoint-persona-seven-secondary-hsl: 49.935 calc(var(--saturation-factor, 1) * 74.163%) 40.98%;
--checkpoint-persona-six-background-overlay: hsl(var(--checkpoint-persona-six-background-overlay-hsl)/1);
--checkpoint-persona-six-background-overlay-hsl: 27 calc(var(--saturation-factor, 1) * 80%) 9.804%;
--checkpoint-persona-six-gradient-end: hsl(var(--checkpoint-persona-six-gradient-end-hsl)/1);
--checkpoint-persona-six-gradient-end-hsl: 28.8 calc(var(--saturation-factor, 1) * 53.191%) 9.216%;
--checkpoint-persona-six-gradient-start: hsl(var(--checkpoint-persona-six-gradient-start-hsl)/1);
--checkpoint-persona-six-gradient-start-hsl: 27.595 calc(var(--saturation-factor, 1) * 100%) 53.529%;
--checkpoint-persona-six-primary: hsl(var(--checkpoint-persona-six-primary-hsl)/1);
--checkpoint-persona-six-primary-hsl: 26.834 calc(var(--saturation-factor, 1) * 100%) 60.98%;
--checkpoint-persona-six-secondary: hsl(var(--checkpoint-persona-six-secondary-hsl)/1);
--checkpoint-persona-six-secondary-hsl: 26.809 calc(var(--saturation-factor, 1) * 86.239%) 42.745%;
--checkpoint-persona-three-background-overlay: hsl(var(--checkpoint-persona-three-background-overlay-hsl)/1);
--checkpoint-persona-three-background-overlay-hsl: 262.105 calc(var(--saturation-factor, 1) * 80.282%) 13.922%;
--checkpoint-persona-three-gradient-end: hsl(var(--checkpoint-persona-three-gradient-end-hsl)/1);
--checkpoint-persona-three-gradient-end-hsl: 283.2 calc(var(--saturation-factor, 1) * 53.191%) 9.216%;
--checkpoint-persona-three-gradient-start: hsl(var(--checkpoint-persona-three-gradient-start-hsl)/1);
--checkpoint-persona-three-gradient-start-hsl: 260.114 calc(var(--saturation-factor, 1) * 87.129%) 60.392%;
--checkpoint-persona-three-primary: hsl(var(--checkpoint-persona-three-primary-hsl)/1);
--checkpoint-persona-three-primary-hsl: 269.011 calc(var(--saturation-factor, 1) * 88.35%) 79.804%;
--checkpoint-persona-three-secondary: hsl(var(--checkpoint-persona-three-secondary-hsl)/1);
--checkpoint-persona-three-secondary-hsl: 268.837 calc(var(--saturation-factor, 1) * 72.067%) 64.902%;
--checkpoint-persona-two-background-overlay: hsl(var(--checkpoint-persona-two-background-overlay-hsl)/1);
--checkpoint-persona-two-background-overlay-hsl: 260.426 calc(var(--saturation-factor, 1) * 70.149%) 13.137%;
--checkpoint-persona-two-gradient-end: hsl(var(--checkpoint-persona-two-gradient-end-hsl)/1);
--checkpoint-persona-two-gradient-end-hsl: 259.481 calc(var(--saturation-factor, 1) * 79.381%) 19.02%;
--checkpoint-persona-two-gradient-start: hsl(var(--checkpoint-persona-two-gradient-start-hsl)/1);
--checkpoint-persona-two-gradient-start-hsl: 256.018 calc(var(--saturation-factor, 1) * 96.507%) 55.098%;
--checkpoint-persona-two-primary: hsl(var(--checkpoint-persona-two-primary-hsl)/1);
--checkpoint-persona-two-primary-hsl: 217.982 calc(var(--saturation-factor, 1) * 93.162%) 77.059%;
--checkpoint-persona-two-secondary: hsl(var(--checkpoint-persona-two-secondary-hsl)/1);
--checkpoint-persona-two-secondary-hsl: 234 calc(var(--saturation-factor, 1) * 39.823%) 55.686%;
--checkpoint-persona-zero-background-overlay: hsl(var(--checkpoint-persona-zero-background-overlay-hsl)/1);
--checkpoint-persona-zero-background-overlay-hsl: 148.8 calc(var(--saturation-factor, 1) * 60.976%) 8.039%;
--checkpoint-persona-zero-gradient-end: hsl(var(--checkpoint-persona-zero-gradient-end-hsl)/1);
--checkpoint-persona-zero-gradient-end-hsl: 149.333 calc(var(--saturation-factor, 1) * 56.962%) 15.49%;
--checkpoint-persona-zero-gradient-start: hsl(var(--checkpoint-persona-zero-gradient-start-hsl)/1);
--checkpoint-persona-zero-gradient-start-hsl: 149.302 calc(var(--saturation-factor, 1) * 50.588%) 50%;
--checkpoint-persona-zero-primary: hsl(var(--checkpoint-persona-zero-primary-hsl)/1);
--checkpoint-persona-zero-primary-hsl: 143.804 calc(var(--saturation-factor, 1) * 83.636%) 56.863%;
--checkpoint-persona-zero-secondary: hsl(var(--checkpoint-persona-zero-secondary-hsl)/1);
--checkpoint-persona-zero-secondary-hsl: 143.673 calc(var(--saturation-factor, 1) * 78.61%) 36.667%;
--checkpoint-quests-gradient-end: hsl(var(--checkpoint-quests-gradient-end-hsl)/1);
--checkpoint-quests-gradient-end-hsl: 283.2 calc(var(--saturation-factor, 1) * 53.191%) 9.216%;
--checkpoint-quests-gradient-start: hsl(var(--checkpoint-quests-gradient-start-hsl)/1);
--checkpoint-quests-gradient-start-hsl: 260.114 calc(var(--saturation-factor, 1) * 87.129%) 60.392%;
--checkpoint-quests-primary: hsl(var(--checkpoint-quests-primary-hsl)/1);
--checkpoint-quests-primary-hsl: 269.011 calc(var(--saturation-factor, 1) * 88.35%) 79.804%;
--checkpoint-quests-secondary: hsl(var(--checkpoint-quests-secondary-hsl)/1);
--checkpoint-quests-secondary-hsl: 268.837 calc(var(--saturation-factor, 1) * 72.067%) 64.902%;
--checkpoint-voice-gradient-end: hsl(var(--checkpoint-voice-gradient-end-hsl)/1);
--checkpoint-voice-gradient-end-hsl: 30.361 calc(var(--saturation-factor, 1) * 85.567%) 19.02%;
--checkpoint-voice-gradient-start: hsl(var(--checkpoint-voice-gradient-start-hsl)/1);
--checkpoint-voice-gradient-start-hsl: 49.891 calc(var(--saturation-factor, 1) * 100%) 63.922%;
--checkpoint-voice-primary: hsl(var(--checkpoint-voice-primary-hsl)/1);
--checkpoint-voice-primary-hsl: 49.891 calc(var(--saturation-factor, 1) * 100%) 63.922%;
--checkpoint-voice-secondary: hsl(var(--checkpoint-voice-secondary-hsl)/1);
--checkpoint-voice-secondary-hsl: 49.935 calc(var(--saturation-factor, 1) * 74.163%) 40.98%;
--checkpoint-welcome-gradient-end: hsl(var(--checkpoint-welcome-gradient-end-hsl)/1);
--checkpoint-welcome-gradient-end-hsl: 149.333 calc(var(--saturation-factor, 1) * 56.962%) 15.49%;
--checkpoint-welcome-gradient-start: hsl(var(--checkpoint-welcome-gradient-start-hsl)/1);
--checkpoint-welcome-gradient-start-hsl: 149.302 calc(var(--saturation-factor, 1) * 50.588%) 50%;
--checkpoint-welcome-primary: hsl(var(--checkpoint-welcome-primary-hsl)/1);
--checkpoint-welcome-primary-hsl: 143.316 calc(var(--saturation-factor, 1) * 83.55%) 54.706%;
--checkpoint-welcome-secondary: hsl(var(--checkpoint-welcome-secondary-hsl)/1);
--checkpoint-welcome-secondary-hsl: 143.673 calc(var(--saturation-factor, 1) * 78.61%) 36.667%;
--crunchyroll: hsl(var(--crunchyroll-hsl)/1);
--crunchyroll-hsl: 29.289 calc(var(--saturation-factor, 1) * 92.952%) 55.49%;
--ebay: hsl(var(--ebay-hsl)/1);
--ebay-hsl: 211.429 calc(var(--saturation-factor, 1) * 100%) 41.176%;
--epic-games: hsl(var(--epic-games-hsl)/1);
--epic-games-hsl: 34.286 calc(var(--saturation-factor, 1) * 6.195%) 22.157%;
--facebook: hsl(var(--facebook-hsl)/1);
--facebook-hsl: 220.714 calc(var(--saturation-factor, 1) * 44.211%) 37.255%;
--github: hsl(var(--github-hsl)/1);
--github-hsl: 0 calc(var(--saturation-factor, 1) * 4.167%) 9.412%;
--gold: hsl(var(--gold-hsl)/1);
--gold-hsl: 45.652 calc(var(--saturation-factor, 1) * 100%) 54.902%;
--guild-boosting-blue: hsl(var(--guild-boosting-blue-hsl)/1);
--guild-boosting-blue-hsl: 221.132 calc(var(--saturation-factor, 1) * 70.044%) 55.49%;
--guild-boosting-blue-for-gradients: hsl(var(--guild-boosting-blue-for-gradients-hsl)/1);
--guild-boosting-blue-for-gradients-hsl: 234.909 calc(var(--saturation-factor, 1) * 68.465%) 52.745%;
--guild-boosting-pink: hsl(var(--guild-boosting-pink-hsl)/1);
--guild-boosting-pink-hsl: 302.143 calc(var(--saturation-factor, 1) * 100%) 72.549%;
--guild-boosting-purple: hsl(var(--guild-boosting-purple-hsl)/1);
--guild-boosting-purple-hsl: 269.032 calc(var(--saturation-factor, 1) * 83.784%) 70.98%;
--guild-boosting-purple-for-gradients: hsl(var(--guild-boosting-purple-for-gradients-hsl)/1);
--guild-boosting-purple-for-gradients-hsl: 269.162 calc(var(--saturation-factor, 1) * 91.795%) 61.765%;
--hypesquad-house-1: hsl(var(--hypesquad-house-1-hsl)/1);
--hypesquad-house-1-hsl: 253.458 calc(var(--saturation-factor, 1) * 76.978%) 72.745%;
--hypesquad-house-2: hsl(var(--hypesquad-house-2-hsl)/1);
--hypesquad-house-2-hsl: 8.511 calc(var(--saturation-factor, 1) * 86.503%) 68.039%;
--hypesquad-house-3: hsl(var(--hypesquad-house-3-hsl)/1);
--hypesquad-house-3-hsl: 168.553 calc(var(--saturation-factor, 1) * 69.091%) 56.863%;
--illo-blue-10: hsl(var(--illo-blue-10-hsl)/1);
--illo-blue-10-hsl: 235.2 calc(var(--saturation-factor, 1) * 100%) 95.098%;
--illo-blue-20: hsl(var(--illo-blue-20-hsl)/1);
--illo-blue-20-hsl: 234.737 calc(var(--saturation-factor, 1) * 90.476%) 87.647%;
--illo-blue-30: hsl(var(--illo-blue-30-hsl)/1);
--illo-blue-30-hsl: 234 calc(var(--saturation-factor, 1) * 90%) 80.392%;
--illo-blue-40: hsl(var(--illo-blue-40-hsl)/1);
--illo-blue-40-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
--illo-blue-50: hsl(var(--illo-blue-50-hsl)/1);
--illo-blue-50-hsl: 236.25 calc(var(--saturation-factor, 1) * 58.716%) 42.745%;
--illo-blue-60: hsl(var(--illo-blue-60-hsl)/1);
--illo-blue-60-hsl: 237.931 calc(var(--saturation-factor, 1) * 72.5%) 31.373%;
--illo-blue-70: hsl(var(--illo-blue-70-hsl)/1);
--illo-blue-70-hsl: 240 calc(var(--saturation-factor, 1) * 100%) 20%;
--illo-green-10: hsl(var(--illo-green-10-hsl)/1);
--illo-green-10-hsl: 145.385 calc(var(--saturation-factor, 1) * 100%) 94.902%;
--illo-green-20: hsl(var(--illo-green-20-hsl)/1);
--illo-green-20-hsl: 144.407 calc(var(--saturation-factor, 1) * 88.06%) 86.863%;
--illo-green-30: hsl(var(--illo-green-30-hsl)/1);
--illo-green-30-hsl: 143.67 calc(var(--saturation-factor, 1) * 87.2%) 75.49%;
--illo-green-40: hsl(var(--illo-green-40-hsl)/1);
--illo-green-40-hsl: 143.804 calc(var(--saturation-factor, 1) * 83.636%) 56.863%;
--illo-green-50: hsl(var(--illo-green-50-hsl)/1);
--illo-green-50-hsl: 145.714 calc(var(--saturation-factor, 1) * 70%) 43.137%;
--illo-green-60: hsl(var(--illo-green-60-hsl)/1);
--illo-green-60-hsl: 149.048 calc(var(--saturation-factor, 1) * 79.747%) 30.98%;
--illo-green-70: hsl(var(--illo-green-70-hsl)/1);
--illo-green-70-hsl: 152.941 calc(var(--saturation-factor, 1) * 100%) 20%;
--illo-nitro-blue: hsl(var(--illo-nitro-blue-hsl)/1);
--illo-nitro-blue-hsl: 240 calc(var(--saturation-factor, 1) * 82.063%) 43.725%;
--illo-orange-10: hsl(var(--illo-orange-10-hsl)/1);
--illo-orange-10-hsl: 33.571 calc(var(--saturation-factor, 1) * 100%) 83.529%;
--illo-orange-20: hsl(var(--illo-orange-20-hsl)/1);
--illo-orange-20-hsl: 28.029 calc(var(--saturation-factor, 1) * 100%) 73.137%;
--illo-orange-30: hsl(var(--illo-orange-30-hsl)/1);
--illo-orange-30-hsl: 25.532 calc(var(--saturation-factor, 1) * 98.947%) 62.745%;
--illo-orange-40: hsl(var(--illo-orange-40-hsl)/1);
--illo-orange-40-hsl: 24.149 calc(var(--saturation-factor, 1) * 99.177%) 52.353%;
--illo-orange-50: hsl(var(--illo-orange-50-hsl)/1);
--illo-orange-50-hsl: 21.391 calc(var(--saturation-factor, 1) * 90.551%) 49.804%;
--illo-orange-60: hsl(var(--illo-orange-60-hsl)/1);
--illo-orange-60-hsl: 18.356 calc(var(--saturation-factor, 1) * 91.632%) 46.863%;
--illo-orange-70: hsl(var(--illo-orange-70-hsl)/1);
--illo-orange-70-hsl: 15 calc(var(--saturation-factor, 1) * 92.035%) 44.314%;
--illo-pink-10: hsl(var(--illo-pink-10-hsl)/1);
--illo-pink-10-hsl: 290.4 calc(var(--saturation-factor, 1) * 100%) 95.098%;
--illo-pink-20: hsl(var(--illo-pink-20-hsl)/1);
--illo-pink-20-hsl: 308 calc(var(--saturation-factor, 1) * 90.909%) 87.059%;
--illo-pink-30: hsl(var(--illo-pink-30-hsl)/1);
--illo-pink-30-hsl: 312 calc(var(--saturation-factor, 1) * 96.154%) 79.608%;
--illo-pink-40: hsl(var(--illo-pink-40-hsl)/1);
--illo-pink-40-hsl: 315.084 calc(var(--saturation-factor, 1) * 100%) 64.902%;
--illo-pink-50: hsl(var(--illo-pink-50-hsl)/1);
--illo-pink-50-hsl: 309.787 calc(var(--saturation-factor, 1) * 64.977%) 42.549%;
--illo-pink-60: hsl(var(--illo-pink-60-hsl)/1);
--illo-pink-60-hsl: 305.455 calc(var(--saturation-factor, 1) * 76.101%) 31.176%;
--illo-pink-70: hsl(var(--illo-pink-70-hsl)/1);
--illo-pink-70-hsl: 300 calc(var(--saturation-factor, 1) * 100%) 20%;
--illo-purple-10: hsl(var(--illo-purple-10-hsl)/1);
--illo-purple-10-hsl: 271.2 calc(var(--saturation-factor, 1) * 100%) 95.098%;
--illo-purple-20: hsl(var(--illo-purple-20-hsl)/1);
--illo-purple-20-hsl: 268.966 calc(var(--saturation-factor, 1) * 90.625%) 87.451%;
--illo-purple-30: hsl(var(--illo-purple-30-hsl)/1);
--illo-purple-30-hsl: 269.011 calc(var(--saturation-factor, 1) * 88.35%) 79.804%;
--illo-purple-40: hsl(var(--illo-purple-40-hsl)/1);
--illo-purple-40-hsl: 268.462 calc(var(--saturation-factor, 1) * 85.714%) 64.314%;
--illo-purple-50: hsl(var(--illo-purple-50-hsl)/1);
--illo-purple-50-hsl: 264.275 calc(var(--saturation-factor, 1) * 59.817%) 42.941%;
--illo-purple-60: hsl(var(--illo-purple-60-hsl)/1);
--illo-purple-60-hsl: 260.87 calc(var(--saturation-factor, 1) * 72.327%) 31.176%;
--illo-purple-70: hsl(var(--illo-purple-70-hsl)/1);
--illo-purple-70-hsl: 257.059 calc(var(--saturation-factor, 1) * 100%) 20%;
--illo-yellow-10: hsl(var(--illo-yellow-10-hsl)/1);
--illo-yellow-10-hsl: 50 calc(var(--saturation-factor, 1) * 100%) 87.059%;
--illo-yellow-20: hsl(var(--illo-yellow-20-hsl)/1);
--illo-yellow-20-hsl: 49.714 calc(var(--saturation-factor, 1) * 100%) 79.412%;
--illo-yellow-30: hsl(var(--illo-yellow-30-hsl)/1);
--illo-yellow-30-hsl: 50.069 calc(var(--saturation-factor, 1) * 100%) 71.569%;
--illo-yellow-40: hsl(var(--illo-yellow-40-hsl)/1);
--illo-yellow-40-hsl: 49.891 calc(var(--saturation-factor, 1) * 100%) 63.922%;
--illo-yellow-50: hsl(var(--illo-yellow-50-hsl)/1);
--illo-yellow-50-hsl: 42.551 calc(var(--saturation-factor, 1) * 89.091%) 56.863%;
--illo-yellow-60: hsl(var(--illo-yellow-60-hsl)/1);
--illo-yellow-60-hsl: 35.942 calc(var(--saturation-factor, 1) * 81.176%) 50%;
--illo-yellow-70: hsl(var(--illo-yellow-70-hsl)/1);
--illo-yellow-70-hsl: 30.137 calc(var(--saturation-factor, 1) * 100%) 42.941%;
--input-placeholder-text-dark: hsl(var(--input-placeholder-text-dark-hsl)/1);
--input-placeholder-text-dark-hsl: 216 calc(var(--saturation-factor, 1) * 2.128%) 53.922%;
--lol: hsl(var(--lol-hsl)/1);
--lol-hsl: 190.286 calc(var(--saturation-factor, 1) * 89.744%) 7.647%;
--lol-text-dark: hsl(var(--lol-text-dark-hsl)/1);
--lol-text-dark-hsl: 37.444 calc(var(--saturation-factor, 1) * 81.595%) 31.961%;
--lol-text-light: hsl(var(--lol-text-light-hsl)/1);
--lol-text-light-hsl: 41.143 calc(var(--saturation-factor, 1) * 50.239%) 59.02%;
--partner: hsl(var(--partner-hsl)/1);
--partner-hsl: 215.376 calc(var(--saturation-factor, 1) * 82.775%) 59.02%;
--paypal: hsl(var(--paypal-hsl)/1);
--paypal-hsl: 230.455 calc(var(--saturation-factor, 1) * 69.841%) 24.706%;
--playstation: hsl(var(--playstation-hsl)/1);
--playstation-hsl: 220 calc(var(--saturation-factor, 1) * 95.652%) 27.059%;
--plum-23-alpha: hsl(var(--plum-23-alpha-hsl)/0.10196078431372549);
--plum-23-alpha-hsl: 240 calc(var(--saturation-factor, 1) * 63.415%) 83.922%;
--premium-nitro-pink-dark: hsl(var(--premium-nitro-pink-dark-hsl)/1);
--premium-nitro-pink-dark-hsl: 299.45 calc(var(--saturation-factor, 1) * 43.083%) 50.392%;
--premium-nitro-pink-light: hsl(var(--premium-nitro-pink-light-hsl)/1);
--premium-nitro-pink-light-hsl: 299.333 calc(var(--saturation-factor, 1) * 42.857%) 58.824%;
--premium-perk-blue: hsl(var(--premium-perk-blue-hsl)/1);
--premium-perk-blue-hsl: 222.047 calc(var(--saturation-factor, 1) * 100%) 75.098%;
--premium-perk-blue-alt: hsl(var(--premium-perk-blue-alt-hsl)/1);
--premium-perk-blue-alt-hsl: 223.03 calc(var(--saturation-factor, 1) * 100%) 80.588%;
--premium-perk-dark-blue: hsl(var(--premium-perk-dark-blue-hsl)/1);
--premium-perk-dark-blue-hsl: 220.392 calc(var(--saturation-factor, 1) * 67.401%) 55.49%;
--premium-perk-gold: hsl(var(--premium-perk-gold-hsl)/1);
--premium-perk-gold-hsl: 37.5 calc(var(--saturation-factor, 1) * 95.726%) 54.118%;
--premium-perk-green: hsl(var(--premium-perk-green-hsl)/1);
--premium-perk-green-hsl: 163.953 calc(var(--saturation-factor, 1) * 55.128%) 69.412%;
--premium-perk-light-blue: hsl(var(--premium-perk-light-blue-hsl)/1);
--premium-perk-light-blue-hsl: 221.481 calc(var(--saturation-factor, 1) * 100%) 84.118%;
--premium-perk-orange: hsl(var(--premium-perk-orange-hsl)/1);
--premium-perk-orange-hsl: 25.424 calc(var(--saturation-factor, 1) * 96.721%) 64.118%;
--premium-perk-pink: hsl(var(--premium-perk-pink-hsl)/1);
--premium-perk-pink-hsl: 305.197 calc(var(--saturation-factor, 1) * 100%) 75.098%;
--premium-perk-purple: hsl(var(--premium-perk-purple-hsl)/1);
--premium-perk-purple-hsl: 272.079 calc(var(--saturation-factor, 1) * 100%) 80.196%;
--premium-perk-yellow: hsl(var(--premium-perk-yellow-hsl)/1);
--premium-perk-yellow-hsl: 46.813 calc(var(--saturation-factor, 1) * 98.913%) 63.922%;
--premium-tier-0-blue: hsl(var(--premium-tier-0-blue-hsl)/1);
--premium-tier-0-blue-hsl: 201.649 calc(var(--saturation-factor, 1) * 100%) 38.039%;
--premium-tier-0-blue-for-gradients: hsl(var(--premium-tier-0-blue-for-gradients-hsl)/1);
--premium-tier-0-blue-for-gradients-hsl: 201.649 calc(var(--saturation-factor, 1) * 100%) 38.039%;
--premium-tier-0-blue-for-gradients-2: hsl(var(--premium-tier-0-blue-for-gradients-2-hsl)/1);
--premium-tier-0-blue-for-gradients-2-hsl: 209.022 calc(var(--saturation-factor, 1) * 80%) 45.098%;
--premium-tier-0-header-gradient-1: hsl(var(--premium-tier-0-header-gradient-1-hsl)/1);
--premium-tier-0-header-gradient-1-hsl: 240.451 calc(var(--saturation-factor, 1) * 55.187%) 47.255%;
--premium-tier-0-header-gradient-2: hsl(var(--premium-tier-0-header-gradient-2-hsl)/1);
--premium-tier-0-header-gradient-2-hsl: 224.444 calc(var(--saturation-factor, 1) * 77.885%) 59.216%;
--premium-tier-0-header-gradient-3: hsl(var(--premium-tier-0-header-gradient-3-hsl)/1);
--premium-tier-0-header-gradient-3-hsl: 246.207 calc(var(--saturation-factor, 1) * 74.359%) 69.412%;
--premium-tier-0-header-gradient-4: hsl(var(--premium-tier-0-header-gradient-4-hsl)/1);
--premium-tier-0-header-gradient-4-hsl: 294.595 calc(var(--saturation-factor, 1) * 79.856%) 72.745%;
--premium-tier-0-header-gradient-5: hsl(var(--premium-tier-0-header-gradient-5-hsl)/1);
--premium-tier-0-header-gradient-5-hsl: 336.456 calc(var(--saturation-factor, 1) * 55.245%) 71.961%;
--premium-tier-0-purple: hsl(var(--premium-tier-0-purple-hsl)/1);
--premium-tier-0-purple-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
--premium-tier-0-purple-for-gradients: hsl(var(--premium-tier-0-purple-for-gradients-hsl)/1);
--premium-tier-0-purple-for-gradients-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
--premium-tier-1-blue: hsl(var(--premium-tier-1-blue-hsl)/1);
--premium-tier-1-blue-hsl: 227.538 calc(var(--saturation-factor, 1) * 86.667%) 70.588%;
--premium-tier-1-blue-for-gradients: hsl(var(--premium-tier-1-blue-for-gradients-hsl)/1);
--premium-tier-1-blue-for-gradients-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
--premium-tier-1-dark-blue-for-gradients: hsl(var(--premium-tier-1-dark-blue-for-gradients-hsl)/1);
--premium-tier-1-dark-blue-for-gradients-hsl: 234.909 calc(var(--saturation-factor, 1) * 68.465%) 52.745%;
--premium-tier-1-purple: hsl(var(--premium-tier-1-purple-hsl)/1);
--premium-tier-1-purple-hsl: 243.704 calc(var(--saturation-factor, 1) * 100%) 84.118%;
--premium-tier-2-pink: hsl(var(--premium-tier-2-pink-hsl)/1);
--premium-tier-2-pink-hsl: 342 calc(var(--saturation-factor, 1) * 57.971%) 72.941%;
--premium-tier-2-pink-for-gradients: hsl(var(--premium-tier-2-pink-for-gradients-hsl)/1);
--premium-tier-2-pink-for-gradients-hsl: 325.385 calc(var(--saturation-factor, 1) * 31.707%) 51.765%;
--premium-tier-2-pink-for-gradients-2: hsl(var(--premium-tier-2-pink-for-gradients-2-hsl)/1);
--premium-tier-2-pink-for-gradients-2-hsl: 295.42 calc(var(--saturation-factor, 1) * 51.373%) 50%;
--premium-tier-2-purple: hsl(var(--premium-tier-2-purple-hsl)/1);
--premium-tier-2-purple-hsl: 270 calc(var(--saturation-factor, 1) * 86.667%) 70.588%;
--premium-tier-2-purple-for-gradients: hsl(var(--premium-tier-2-purple-for-gradients-hsl)/1);
--premium-tier-2-purple-for-gradients-hsl: 269.291 calc(var(--saturation-factor, 1) * 52.697%) 52.745%;
--premium-tier-2-purple-for-gradients-2: hsl(var(--premium-tier-2-purple-for-gradients-2-hsl)/1);
--premium-tier-2-purple-for-gradients-2-hsl: 295.645 calc(var(--saturation-factor, 1) * 50%) 51.373%;
--reddit: hsl(var(--reddit-hsl)/1);
--reddit-hsl: 16.235 calc(var(--saturation-factor, 1) * 100%) 50%;
--riot-games: hsl(var(--riot-games-hsl)/1);
--riot-games-hsl: 349.487 calc(var(--saturation-factor, 1) * 100%) 45.882%;
--role-blue: hsl(var(--role-blue-hsl)/1);
--role-blue-hsl: 203.793 calc(var(--saturation-factor, 1) * 64.444%) 35.294%;
--role-brown: hsl(var(--role-brown-hsl)/1);
--role-brown-hsl: 23.929 calc(var(--saturation-factor, 1) * 100%) 32.941%;
--role-burgundy: hsl(var(--role-burgundy-hsl)/1);
--role-burgundy-hsl: 333.725 calc(var(--saturation-factor, 1) * 79.275%) 37.843%;
--role-dark-blue: hsl(var(--role-dark-blue-hsl)/1);
--role-dark-blue-hsl: 198.947 calc(var(--saturation-factor, 1) * 18.447%) 40.392%;
--role-dark-grey: hsl(var(--role-dark-grey-hsl)/1);
--role-dark-grey-hsl: 199.535 calc(var(--saturation-factor, 1) * 18.298%) 46.078%;
--role-dark-purple: hsl(var(--role-dark-purple-hsl)/1);
--role-dark-purple-hsl: 282.143 calc(var(--saturation-factor, 1) * 43.75%) 37.647%;
--role-dark-teal: hsl(var(--role-dark-teal-hsl)/1);
--role-dark-teal-hsl: 168.108 calc(var(--saturation-factor, 1) * 76.552%) 28.431%;
--role-default: hsl(var(--role-default-hsl)/1);
--role-default-hsl: 203.571 calc(var(--saturation-factor, 1) * 15.909%) 65.49%;
--role-green: hsl(var(--role-green-hsl)/1);
--role-green-hsl: 145 calc(var(--saturation-factor, 1) * 63.529%) 33.333%;
--role-grey: hsl(var(--role-grey-hsl)/1);
--role-grey-hsl: 202.5 calc(var(--saturation-factor, 1) * 4%) 60.784%;
--role-light-blue: hsl(var(--role-light-blue-hsl)/1);
--role-light-blue-hsl: 203.571 calc(var(--saturation-factor, 1) * 15.909%) 65.49%;
--role-light-green: hsl(var(--role-light-green-hsl)/1);
--role-light-green-hsl: 145.443 calc(var(--saturation-factor, 1) * 63.2%) 49.02%;
--role-light-grey: hsl(var(--role-light-grey-hsl)/1);
--role-light-grey-hsl: 183.529 calc(var(--saturation-factor, 1) * 8.718%) 61.765%;
--role-magenta: hsl(var(--role-magenta-hsl)/1);
--role-magenta-hsl: 339.606 calc(var(--saturation-factor, 1) * 82.186%) 51.569%;
--role-orange: hsl(var(--role-orange-hsl)/1);
--role-orange-hsl: 28.163 calc(var(--saturation-factor, 1) * 79.675%) 51.765%;
--role-purple: hsl(var(--role-purple-hsl)/1);
--role-purple-hsl: 282.581 calc(var(--saturation-factor, 1) * 38.912%) 53.137%;
--role-salmon: hsl(var(--role-salmon-hsl)/1);
--role-salmon-hsl: 5.614 calc(var(--saturation-factor, 1) * 78.082%) 57.059%;
--role-sky-blue: hsl(var(--role-sky-blue-hsl)/1);
--role-sky-blue-hsl: 204.072 calc(var(--saturation-factor, 1) * 69.874%) 53.137%;
--role-tan: hsl(var(--role-tan-hsl)/1);
--role-tan-hsl: 36.667 calc(var(--saturation-factor, 1) * 86.538%) 40.784%;
--role-teal: hsl(var(--role-teal-hsl)/1);
--role-teal-hsl: 168.148 calc(var(--saturation-factor, 1) * 75.701%) 41.961%;
--role-terracotta: hsl(var(--role-terracotta-hsl)/1);
--role-terracotta-hsl: 5.546 calc(var(--saturation-factor, 1) * 63.636%) 36.667%;
--role-yellow: hsl(var(--role-yellow-hsl)/1);
--role-yellow-hsl: 48.053 calc(var(--saturation-factor, 1) * 88.976%) 50.196%;
--samsung: hsl(var(--samsung-hsl)/1);
--samsung-hsl: 231 calc(var(--saturation-factor, 1) * 77.778%) 35.294%;
--skype: hsl(var(--skype-hsl)/1);
--skype-hsl: 196.186 calc(var(--saturation-factor, 1) * 100%) 42.157%;
--spotify: hsl(var(--spotify-hsl)/1);
--spotify-hsl: 141.154 calc(var(--saturation-factor, 1) * 72.897%) 41.961%;
--steam: hsl(var(--steam-hsl)/1);
--steam-hsl: 214.615 calc(var(--saturation-factor, 1) * 35.135%) 14.51%;
--transparent: hsl(var(--transparent-hsl)/0);
--transparent-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
--twitch: hsl(var(--twitch-hsl)/1);
--twitch-hsl: 264.13 calc(var(--saturation-factor, 1) * 100%) 63.922%;
--twitch-secondary: hsl(var(--twitch-secondary-hsl)/1);
--twitch-secondary-hsl: 263.936 calc(var(--saturation-factor, 1) * 80.342%) 54.118%;
--twitter: hsl(var(--twitter-hsl)/1);
--twitter-hsl: 202.817 calc(var(--saturation-factor, 1) * 89.121%) 53.137%;
--xbox: hsl(var(--xbox-hsl)/1);
--xbox-hsl: 120 calc(var(--saturation-factor, 1) * 77.143%) 27.451%;
--youtube: hsl(var(--youtube-hsl)/1);
--youtube-hsl: 0.351 calc(var(--saturation-factor, 1) * 72.766%) 46.078%;
}
.theme-dark {
--app-frame-background: var(--neutral-78);
--app-frame-border: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--app-message-embed-secondary-text: hsl(var(--white-hsl)/0.7);
--background-accent: var(--primary-530);
--background-base-low: var(--neutral-66);
--background-base-lower: var(--neutral-69);
--background-base-lowest: var(--neutral-73);
--background-brand: var(--blurple-50);
--background-code: hsl(var(--opacity-blurple-8-hsl)/0.0784313725490196);
--background-code-addition: hsl(var(--opacity-green-12-hsl)/0.12156862745098039);
--background-code-deletion: hsl(var(--opacity-red-12-hsl)/0.12156862745098039);
--background-feedback-critical: hsl(var(--opacity-red-8-hsl)/0.0784313725490196);
--background-feedback-info: hsl(var(--opacity-blue-8-hsl)/0.0784313725490196);
--background-feedback-positive: hsl(var(--opacity-green-8-hsl)/0.0784313725490196);
--background-feedback-warning: hsl(var(--opacity-yellow-8-hsl)/0.0784313725490196);
--background-mod-muted: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--background-mod-normal: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--background-mod-strong: hsl(var(--opacity-20-hsl)/0.2);
--background-mod-subtle: hsl(var(--opacity-8-hsl)/0.0784313725490196);
--background-scrim: hsl(var(--opacity-black-72-hsl)/0.7215686274509804);
--background-scrim-lightbox: hsl(var(--opacity-black-92-hsl)/0.9215686274509803);
--background-secondary-alt: var(--primary-660);
--background-surface-high: var(--neutral-64);
--background-surface-higher: var(--neutral-62);
--background-surface-highest: var(--neutral-60);
--background-tile-gradient-pink-end: hsl(var(--illo-pink-70-hsl)/0.3);
--background-tile-gradient-pink-start: hsl(var(--illo-pink-50-hsl)/0.3);
--badge-background-brand: var(--blurple-50);
--badge-expressive-background-default: var(--neutral-1);
--badge-expressive-text-default: var(--neutral-71);
--badge-text-brand: var(--neutral-1);
--bg-surface-overlay-tmp: var(--neutral-64);
--bg-surface-raised: var(--primary-560);
--border-feedback-critical: hsl(var(--opacity-red-20-hsl)/0.2);
--border-focus: var(--blue-new-30);
--border-muted: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--border-normal: hsl(var(--opacity-20-hsl)/0.2);
--border-strong: hsl(var(--opacity-44-hsl)/0.4392156862745098);
--border-subtle: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--button-danger-background-disabled: var(--red-new-50);
--button-outline-brand-background-hover: var(--brand-500);
--button-outline-brand-border-active: var(--brand-560);
--button-outline-primary-text: var(--white);
--card-background-default: var(--neutral-64);
--card-primary-pressed-bg: var(--primary-645);
--card-secondary-bg: hsl(var(--opacity-8-hsl)/0.0784313725490196);
--card-secondary-pressed-bg: var(--primary-645);
--channel-icon: var(--neutral-28);
--channel-text-area-placeholder: var(--primary-430);
--channels-default: var(--neutral-28);
--channeltextarea-background: var(--primary-560);
--chat-background: var(--primary-600);
--chat-background-default: var(--neutral-64);
--chat-border: var(--primary-700);
--chat-text-muted: var(--neutral-27);
--checkbox-background-active: var(--blurple-65);
--checkbox-background-default: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--checkbox-background-hover: hsl(var(--opacity-black-8-hsl)/0.0784313725490196);
--checkbox-background-selected-default: var(--blurple-50);
--checkbox-background-selected-hover: var(--blurple-60);
--checkbox-border-active: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--checkbox-border-default: var(--neutral-34);
--checkbox-border-hover: hsl(var(--opacity-80-hsl)/0.8);
--checkbox-border-selected-default: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--checkbox-border-selected-hover: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--checkbox-icon-active: var(--neutral-1);
--chip-blurple-dark-background: var(--blurple-70);
--chip-blurple-dark-text: var(--blurple-1);
--chip-blurple-light-background: var(--blurple-20);
--chip-blurple-light-text: var(--blurple-91);
--chip-blurple-medium-background: var(--blurple-40);
--chip-blurple-medium-text: var(--blurple-100);
--chip-gray-dark-background: var(--neutral-75);
--chip-gray-dark-text: var(--neutral-6);
--chip-gray-light-background: var(--neutral-10);
--chip-gray-light-text: var(--neutral-68);
--chip-gray-medium-background: var(--neutral-40);
--chip-gray-medium-text: var(--neutral-1);
--chip-green-dark-background: var(--green-new-70);
--chip-green-dark-text: var(--green-new-1);
--chip-green-light-background: var(--green-new-20);
--chip-green-light-text: var(--green-new-91);
--chip-green-medium-background: var(--green-new-45);
--chip-green-medium-text: var(--green-new-96);
--chip-orange-dark-background: var(--orange-new-70);
--chip-orange-dark-text: var(--orange-new-1);
--chip-orange-light-background: var(--orange-new-20);
--chip-orange-light-text: var(--orange-new-93);
--chip-orange-medium-background: var(--orange-new-40);
--chip-orange-medium-text: var(--orange-new-100);
--chip-pink-dark-background: var(--illo-pink-60);
--chip-pink-dark-text: var(--neutral-1);
--chip-pink-light-background: var(--illo-pink-20);
--chip-pink-light-text: var(--neutral-73);
--chip-pink-medium-background: var(--illo-pink-40);
--chip-pink-medium-text: var(--neutral-100);
--chip-purple-dark-background: var(--illo-purple-60);
--chip-purple-dark-text: var(--neutral-10);
--chip-purple-light-background: var(--illo-purple-20);
--chip-purple-light-text: var(--neutral-75);
--chip-purple-medium-background: var(--illo-purple-40);
--chip-purple-medium-text: var(--neutral-100);
--chip-red-dark-background: var(--red-new-70);
--chip-red-dark-text: var(--red-new-1);
--chip-red-light-background: var(--red-new-20);
--chip-red-light-text: var(--red-new-95);
--chip-red-medium-background: var(--red-new-45);
--chip-red-medium-text: var(--red-new-100);
--chip-yellow-dark-background: var(--yellow-new-70);
--chip-yellow-dark-text: var(--yellow-new-1);
--chip-yellow-light-background: var(--yellow-new-20);
--chip-yellow-light-text: var(--yellow-new-87);
--chip-yellow-medium-background: var(--yellow-new-45);
--chip-yellow-medium-text: var(--yellow-new-80);
--content-inventory-media-seekbar-container: hsl(var(--plum-6-hsl)/0.24);
--content-inventory-overlay-text-primary: hsl(var(--white-hsl)/0.85);
--content-inventory-overlay-text-secondary: hsl(var(--white-hsl)/0.7);
--context-menu-backdrop-background: hsl(var(--opacity-black-72-hsl)/0.7215686274509804);
--control-brand-foreground: var(--brand-360);
--control-brand-foreground-new: var(--brand-360);
--control-connected-background-active: var(--green-new-65);
--control-connected-background-default: var(--green-new-50);
--control-connected-background-hover: var(--green-new-60);
--control-connected-border-active: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-connected-border-default: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-connected-border-hover: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-connected-icon-active: var(--neutral-1);
--control-connected-icon-default: var(--neutral-1);
--control-connected-icon-hover: var(--neutral-1);
--control-connected-text-active: var(--neutral-1);
--control-connected-text-default: var(--neutral-1);
--control-connected-text-hover: var(--neutral-1);
--control-critical-primary-background-active: var(--red-new-65);
--control-critical-primary-background-default: var(--red-new-50);
--control-critical-primary-background-hover: var(--red-new-60);
--control-critical-primary-border-active: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-critical-primary-border-default: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-critical-primary-border-hover: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-critical-primary-icon-active: var(--neutral-1);
--control-critical-primary-icon-default: var(--neutral-1);
--control-critical-primary-icon-hover: var(--neutral-1);
--control-critical-primary-text-active: var(--neutral-1);
--control-critical-primary-text-default: var(--neutral-1);
--control-critical-primary-text-hover: var(--neutral-1);
--control-critical-secondary-background-active: hsl(var(--opacity-20-hsl)/0.2);
--control-critical-secondary-background-default: hsl(var(--opacity-8-hsl)/0.0784313725490196);
--control-critical-secondary-background-hover: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--control-critical-secondary-border-active: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--control-critical-secondary-border-default: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--control-critical-secondary-border-hover: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--control-critical-secondary-icon-active: var(--red-new-22);
--control-critical-secondary-icon-default: var(--red-new-22);
--control-critical-secondary-icon-hover: var(--red-new-22);
--control-critical-secondary-text-active: var(--red-new-22);
--control-critical-secondary-text-default: var(--red-new-22);
--control-critical-secondary-text-hover: var(--red-new-22);
--control-expressive-background-active: var(--neutral-5);
--control-expressive-background-default: var(--neutral-1);
--control-expressive-background-hover: var(--neutral-1);
--control-expressive-border-active: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--control-expressive-border-default: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--control-expressive-border-hover: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--control-expressive-icon-active: var(--neutral-100);
--control-expressive-icon-default: var(--neutral-100);
--control-expressive-icon-hover: var(--neutral-100);
--control-expressive-text-active: var(--neutral-100);
--control-expressive-text-default: var(--neutral-100);
--control-expressive-text-hover: var(--neutral-100);
--control-icon-only-background-active: hsl(var(--opacity-20-hsl)/0.2);
--control-icon-only-background-hover: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--control-icon-only-border-active: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--control-icon-only-border-hover: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--control-icon-only-icon-active: var(--neutral-1);
--control-icon-only-icon-default: var(--neutral-16);
--control-icon-only-icon-hover: var(--neutral-1);
--control-overlay-primary-background-active: var(--neutral-17);
--control-overlay-primary-background-default: var(--neutral-1);
--control-overlay-primary-background-hover: var(--neutral-9);
--control-overlay-primary-border-active: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--control-overlay-primary-border-default: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--control-overlay-primary-border-hover: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--control-overlay-primary-icon-active: var(--neutral-100);
--control-overlay-primary-icon-default: var(--neutral-100);
--control-overlay-primary-icon-hover: var(--neutral-100);
--control-overlay-primary-text-active: var(--neutral-100);
--control-overlay-primary-text-default: var(--neutral-100);
--control-overlay-primary-text-hover: var(--neutral-100);
--control-overlay-secondary-background-active: hsl(var(--opacity-black-48-hsl)/0.47843137254901963);
--control-overlay-secondary-background-default: hsl(var(--opacity-black-52-hsl)/0.5215686274509804);
--control-overlay-secondary-background-hover: hsl(var(--opacity-black-64-hsl)/0.6392156862745098);
--control-overlay-secondary-border-active: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--control-overlay-secondary-border-default: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--control-overlay-secondary-border-hover: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--control-overlay-secondary-icon-active: var(--neutral-1);
--control-overlay-secondary-icon-default: var(--neutral-1);
--control-overlay-secondary-icon-hover: var(--neutral-1);
--control-overlay-secondary-text-active: var(--neutral-1);
--control-overlay-secondary-text-default: var(--neutral-1);
--control-overlay-secondary-text-hover: var(--neutral-1);
--control-primary-background-active: var(--blurple-65);
--control-primary-background-default: var(--blurple-50);
--control-primary-background-hover: var(--blurple-60);
--control-primary-border-active: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-primary-border-default: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-primary-border-hover: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-primary-icon-active: var(--neutral-1);
--control-primary-icon-default: var(--neutral-1);
--control-primary-icon-hover: var(--neutral-1);
--control-primary-text-active: var(--neutral-1);
--control-primary-text-default: var(--neutral-1);
--control-primary-text-hover: var(--neutral-1);
--control-secondary-background-active: hsl(var(--opacity-20-hsl)/0.2);
--control-secondary-background-default: hsl(var(--opacity-8-hsl)/0.0784313725490196);
--control-secondary-background-hover: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--control-secondary-border-active: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--control-secondary-border-default: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--control-secondary-border-hover: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--control-secondary-icon-active: var(--neutral-1);
--control-secondary-icon-default: var(--neutral-1);
--control-secondary-icon-hover: var(--neutral-1);
--control-secondary-text-active: var(--neutral-1);
--control-secondary-text-default: var(--neutral-1);
--control-secondary-text-hover: var(--neutral-1);
--creator-revenue-icon-gradient-end: var(--teal-430);
--creator-revenue-icon-gradient-start: var(--teal-360);
--creator-revenue-info-box-background: hsl(var(--teal-430-hsl)/0.1);
--creator-revenue-info-box-border: var(--teal-400);
--creator-revenue-locked-channel-icon: var(--teal-345);
--creator-revenue-progress-bar: var(--teal-400);
--embed-background: var(--primary-630);
--embed-background-alternate: var(--primary-600);
--experimental-avatar-embed-bg: hsl(var(--opacity-black-52-hsl)/0.5215686274509804);
--expressive-gradient-blue-end: hsl(var(--illo-blue-60-hsl)/0.45);
--expressive-gradient-blue-start: hsl(var(--illo-blue-40-hsl)/0.45);
--expressive-gradient-green-end: hsl(var(--illo-green-70-hsl)/0.45);
--expressive-gradient-green-start: hsl(var(--illo-green-50-hsl)/0.45);
--expressive-gradient-nitro-green-end: hsl(var(--illo-nitro-blue-hsl)/0.5);
--expressive-gradient-nitro-green-start: hsl(var(--illo-green-50-hsl)/0.5);
--expressive-gradient-nitro-pink-end: hsl(var(--illo-nitro-blue-hsl)/0.5);
--expressive-gradient-nitro-pink-start: hsl(var(--illo-pink-60-hsl)/0.5);
--expressive-gradient-pink-end: hsl(var(--illo-pink-70-hsl)/0.45);
--expressive-gradient-pink-start: hsl(var(--illo-pink-50-hsl)/0.45);
--expressive-gradient-purple-end: hsl(var(--illo-purple-60-hsl)/0.45);
--expressive-gradient-purple-start: hsl(var(--illo-purple-40-hsl)/0.45);
--expressive-gradient-tenure-badge-bronze-end: hsl(var(--illo-orange-70-hsl)/0.3);
--expressive-gradient-tenure-badge-bronze-start: hsl(var(--illo-orange-30-hsl)/0.3);
--expressive-gradient-tenure-badge-diamond-end: hsl(var(--illo-purple-50-hsl)/0.3);
--expressive-gradient-tenure-badge-diamond-start: hsl(var(--illo-purple-40-hsl)/0.3);
--expressive-gradient-tenure-badge-emerald-end: hsl(var(--illo-green-60-hsl)/0.3);
--expressive-gradient-tenure-badge-emerald-start: hsl(var(--illo-green-40-hsl)/0.3);
--expressive-gradient-tenure-badge-gold-end: hsl(var(--yellow-new-41-hsl)/0.3);
--expressive-gradient-tenure-badge-gold-start: hsl(var(--illo-yellow-50-hsl)/0.3);
--expressive-gradient-tenure-badge-opal-end: hsl(var(--blue-new-50-hsl)/0.3);
--expressive-gradient-tenure-badge-opal-start: hsl(var(--teal-new-30-hsl)/0.3);
--expressive-gradient-tenure-badge-platinum-end: hsl(var(--teal-new-60-hsl)/0.3);
--expressive-gradient-tenure-badge-platinum-start: hsl(var(--teal-new-20-hsl)/0.3);
--expressive-gradient-tenure-badge-ruby-end: hsl(var(--red-new-80-hsl)/0.3);
--expressive-gradient-tenure-badge-ruby-start: hsl(var(--red-new-44-hsl)/0.3);
--expressive-gradient-tenure-badge-silver-end: hsl(var(--neutral-58-hsl)/0.3);
--expressive-gradient-tenure-badge-silver-start: hsl(var(--neutral-12-hsl)/0.3);
--gradient-progress-pill-background: var(--neutral-46);
--home-background: var(--primary-645);
--icon-default: var(--neutral-10);
--icon-feedback-critical: var(--red-new-22);
--icon-feedback-info: var(--blue-new-24);
--icon-feedback-positive: var(--green-new-25);
--icon-feedback-warning: var(--yellow-new-46);
--icon-invert: var(--neutral-71);
--icon-link: var(--blue-new-27);
--icon-muted: var(--neutral-23);
--icon-status-dnd: var(--red-new-45);
--icon-status-idle: var(--yellow-new-22);
--icon-status-offline: var(--neutral-27);
--icon-status-online: var(--green-new-40);
--icon-strong: var(--neutral-1);
--icon-subtle: var(--neutral-16);
--icon-transparent: hsl(var(--transparent-hsl)/0);
--input-background-default: hsl(var(--opacity-black-8-hsl)/0.0784313725490196);
--input-background-error-default: hsl(var(--opacity-red-4-hsl)/0.0392156862745098);
--input-border-active: var(--blurple-50);
--input-border-default: hsl(var(--opacity-20-hsl)/0.2);
--input-border-error-default: var(--red-new-22);
--input-border-hover: hsl(var(--opacity-20-hsl)/0.2);
--input-border-readonly: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--input-icon-default: var(--neutral-16);
--input-placeholder-text-default: var(--neutral-31);
--input-text-default: var(--neutral-10);
--input-text-error-default: var(--neutral-10);
--interactive-background-active: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--interactive-background-hover: hsl(var(--opacity-8-hsl)/0.0784313725490196);
--interactive-background-selected: hsl(var(--opacity-20-hsl)/0.2);
--interactive-icon-active: var(--neutral-1);
--interactive-icon-default: var(--neutral-16);
--interactive-icon-hover: var(--neutral-1);
--interactive-muted: var(--primary-500);
--interactive-text-active: var(--neutral-1);
--interactive-text-default: var(--neutral-16);
--interactive-text-hover: var(--neutral-1);
--logo-primary: var(--white);
--mention-background: hsl(var(--opacity-blurple-24-hsl)/0.23921568627450981);
--mention-foreground: var(--blurple-8);
--message-automod-background-default: hsl(var(--red-400-hsl)/0.05);
--message-automod-background-hover: hsl(var(--red-400-hsl)/0.1);
--message-background-hover: hsl(var(--opacity-8-hsl)/0.0784313725490196);
--message-highlight-background-default: hsl(var(--opacity-blurple-16-hsl)/0.1607843137254902);
--message-highlight-background-hover: hsl(var(--opacity-blurple-12-hsl)/0.12156862745098039);
--message-mentioned-background-default: hsl(var(--opacity-yellow-8-hsl)/0.0784313725490196);
--message-mentioned-background-hover: hsl(var(--opacity-yellow-4-hsl)/0.0392156862745098);
--message-reacted-background-default: hsl(var(--opacity-blurple-24-hsl)/0.23921568627450981);
--message-reacted-text-default: var(--blurple-3);
--mobile-background-scrim-opaque: var(--black);
--mobile-expression-picker-background-default: var(--neutral-69);
--mobile-text-heading-primary: var(--neutral-1);
--modal-background: var(--neutral-64);
--modal-footer-background: var(--neutral-64);
--navigator-header-tint: var(--white);
--notice-background-critical: var(--red-new-75);
--notice-background-info: var(--blue-new-76);
--notice-background-positive: var(--green-new-77);
--notice-background-warning: var(--yellow-new-84);
--notice-text-critical: var(--red-new-1);
--notice-text-info: var(--blue-new-1);
--notice-text-positive: var(--green-new-3);
--notice-text-warning: var(--yellow-new-1);
--overlay-backdrop-lightbox: hsl(var(--opacity-black-92-hsl)/0.9215686274509803);
--panel-bg: var(--neutral-66);
--polls-normal-image-background: var(--primary-660);
--polls-victor-fill: hsl(var(--green-360-hsl)/0.2);
--polls-voted-fill: hsl(var(--brand-500-hsl)/0.2);
--premium-nitro-pink-text: var(--pink-34);
--profile-gradient-note-background: hsl(var(--black-hsl)/0.3);
--profile-gradient-overlay: hsl(var(--black-hsl)/0.6);
--profile-gradient-overlay-synced-with-user-theme: hsl(var(--black-hsl)/0.8);
--profile-gradient-role-pill-background: hsl(var(--primary-660-hsl)/0.5);
--profile-gradient-role-pill-border: hsl(var(--white-hsl)/0.2);
--profile-gradient-section-box: hsl(var(--black-hsl)/0.45);
--radio-background-active: var(--blurple-65);
--radio-background-default: hsl(var(--opacity-black-8-hsl)/0.0784313725490196);
--radio-background-hover: hsl(var(--opacity-black-8-hsl)/0.0784313725490196);
--radio-background-selected-default: var(--blurple-50);
--radio-background-selected-hover: var(--blurple-60);
--radio-border-active: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--radio-border-default: hsl(var(--opacity-64-hsl)/0.6392156862745098);
--radio-border-hover: hsl(var(--opacity-80-hsl)/0.8);
--radio-border-selected-default: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--radio-border-selected-hover: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--radio-foreground-active: var(--blurple-50);
--radio-foreground-default: hsl(var(--opacity-black-8-hsl)/0.0784313725490196);
--radio-foreground-hover: hsl(var(--opacity-black-8-hsl)/0.0784313725490196);
--radio-thumb-background-active: var(--neutral-1);
--redesign-button-active-background: var(--green-430);
--redesign-button-active-pressed-background: var(--green-460);
--redesign-button-active-text: var(--white);
--redesign-button-danger-background: var(--red-430);
--redesign-button-destructive-background: var(--red-430);
--redesign-button-destructive-pressed-background: var(--red-460);
--redesign-button-destructive-text: var(--white);
--redesign-button-overlay-alpha-background: hsl(var(--black-hsl)/0.54);
--redesign-button-overlay-alpha-pressed-background: hsl(var(--black-hsl)/0.64);
--redesign-button-overlay-alpha-text: var(--white);
--redesign-button-positive-background: var(--green-430);
--redesign-button-premium-primary-pink-for-gradient: var(--premium-tier-2-pink-for-gradients);
--redesign-button-premium-primary-pressed-background: hsl(var(--black-hsl)/0.1);
--redesign-button-premium-primary-purple-for-gradient: var(--premium-tier-2-purple-for-gradients);
--redesign-button-premium-primary-purple-for-gradient-2: var(--premium-tier-2-purple-for-gradients-2);
--redesign-button-primary-alt-border: var(--blurple-26);
--redesign-button-primary-background: var(--brand-500);
--redesign-button-primary-overlay-background: var(--white);
--redesign-button-primary-overlay-pressed-background: var(--primary-230);
--redesign-button-primary-overlay-text: var(--primary-860);
--redesign-button-primary-pressed-background: var(--brand-560);
--redesign-button-primary-text: var(--white);
--redesign-button-secondary-background: var(--primary-460);
--redesign-button-secondary-border: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--redesign-button-secondary-overlay-background: hsl(var(--black-hsl)/0.54);
--redesign-button-secondary-overlay-pressed-background: hsl(var(--black-hsl)/0.64);
--redesign-button-secondary-overlay-text: var(--white);
--redesign-button-secondary-pressed-background: var(--primary-500);
--redesign-button-secondary-pressed-border: hsl(var(--transparent-hsl)/0);
--redesign-button-secondary-text: var(--neutral-10);
--redesign-button-selected-background: hsl(var(--brand-500-hsl)/0.24);
--redesign-button-selected-pressed-background: hsl(var(--brand-500-hsl)/0.28);
--redesign-button-selected-text: var(--blurple-50);
--redesign-button-tertiary-background: var(--primary-660);
--redesign-button-tertiary-pressed-background: var(--primary-560);
--redesign-button-tertiary-pressed-text: var(--primary-330);
--redesign-button-tertiary-text: var(--neutral-10);
--scrollbar-auto-scrollbar-color-thumb: var(--neutral-39);
--scrollbar-auto-scrollbar-color-track: var(--neutral-74);
--scrollbar-auto-thumb: var(--neutral-36);
--scrollbar-auto-track: hsl(var(--transparent-hsl)/0);
--scrollbar-thin-thumb: var(--neutral-38);
--scrollbar-thin-track: hsl(var(--black-hsl)/0);
--spine-default: hsl(var(--opacity-44-hsl)/0.4392156862745098);
--spoiler-hidden-background: var(--neutral-36);
--spoiler-hidden-background-hover: var(--neutral-27);
--spoiler-revealed-background: var(--primary-660);
--status-danger: var(--red-400);
--status-online: var(--green-360);
--status-positive: var(--green-360);
--status-positive-background: var(--green-430);
--status-positive-text: var(--white);
--status-speaking: var(--green-360);
--status-warning: var(--yellow-300);
--status-warning-background: var(--yellow-300);
--status-warning-text: var(--black);
--switch-background-active: var(--blurple-65);
--switch-background-default: hsl(var(--opacity-black-12-hsl)/0.12156862745098039);
--switch-background-hover: hsl(var(--opacity-black-12-hsl)/0.12156862745098039);
--switch-background-selected-default: var(--blurple-50);
--switch-background-selected-hover: var(--blurple-60);
--switch-border-default: hsl(var(--opacity-20-hsl)/0.2);
--switch-border-hover: hsl(var(--opacity-40-hsl)/0.4);
--switch-border-selected-default: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--switch-border-selected-hover: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--switch-thumb-background-default: var(--neutral-1);
--switch-thumb-background-selected-default: var(--neutral-1);
--switch-thumb-icon-active: var(--blurple-50);
--switch-thumb-icon-default: var(--neutral-71);
--text-brand: var(--blurple-26);
--text-code: var(--blue-new-16);
--text-code-addition: var(--green-new-15);
--text-code-builtin: var(--orange-new-14);
--text-code-bullet: var(--yellow-new-32);
--text-code-comment: var(--neutral-26);
--text-code-deletion: var(--red-new-11);
--text-code-keyword: var(--red-new-12);
--text-code-section: var(--blue-new-16);
--text-code-string: var(--teal-new-17);
--text-code-tag: var(--green-new-12);
--text-code-title: var(--blurple-9);
--text-code-variable: var(--blue-new-10);
--text-default: var(--neutral-10);
--text-feedback-critical: var(--red-new-22);
--text-feedback-info: var(--blue-new-24);
--text-feedback-positive: var(--green-new-25);
--text-feedback-warning: var(--yellow-new-46);
--text-invert: var(--neutral-71);
--text-link: var(--blue-new-27);
--text-muted: var(--neutral-23);
--text-overlay-dark: var(--neutral-71);
--text-overlay-light: var(--neutral-1);
--text-status-dnd: var(--red-new-45);
--text-status-idle: var(--yellow-new-22);
--text-status-offline: var(--neutral-27);
--text-status-online: var(--green-new-40);
--text-strong: var(--neutral-1);
--text-subtle: var(--neutral-16);
--textbox-markdown-syntax: var(--primary-360);
--thread-channel-spine: var(--primary-500);
--user-profile-activity-toolbar-background: var(--neutral-60);
--user-profile-background-hover: hsl(var(--opacity-8-hsl)/0.0784313725490196);
--user-profile-border: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--user-profile-note-background-focus: var(--neutral-73);
--user-profile-overlay-background: var(--neutral-60);
--user-profile-overlay-background-hover: hsl(var(--opacity-8-hsl)/0.0784313725490196);
--user-profile-toolbar-background: var(--neutral-60);
--user-profile-toolbar-border: hsl(var(--opacity-4-hsl)/0.0392156862745098);
}
@supports (color: color-mix(in lch, red, blue)) {
.theme-dark {
--app-frame-background: color-mix(in oklab, var(--neutral-78) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--app-frame-border: color-mix(
in oklab,
hsl(var(--opacity-12-hsl)/0.12156862745098039) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--app-message-embed-secondary-text: color-mix(in oklab, hsl(var(--white-hsl)/0.7) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.7) var(--custom-theme-text-color-amount, 0%));
--background-accent: color-mix(in oklab, var(--primary-530) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--background-base-low: color-mix(in oklab, var(--neutral-66) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--background-base-lower: color-mix(in oklab, var(--neutral-69) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--background-base-lowest: color-mix(in oklab, var(--neutral-73) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--background-code: color-mix(in oklab, hsl(var(--opacity-blurple-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--background-code-addition: color-mix(in oklab, hsl(var(--opacity-green-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--background-code-deletion: color-mix(in oklab, hsl(var(--opacity-red-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--background-feedback-critical: color-mix(in oklab, hsl(var(--opacity-red-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--background-feedback-info: color-mix(in oklab, hsl(var(--opacity-blue-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--background-feedback-positive: color-mix(in oklab, hsl(var(--opacity-green-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--background-feedback-warning: color-mix(in oklab, hsl(var(--opacity-yellow-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--background-scrim: color-mix(in oklab, hsl(var(--opacity-black-72-hsl)/0.7215686274509804) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.7215686274509804) var(--custom-theme-base-color-amount, 0%));
--background-scrim-lightbox: color-mix(in oklab, hsl(var(--opacity-black-92-hsl)/0.9215686274509803) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.9215686274509803) var(--custom-theme-base-color-amount, 0%));
--background-secondary-alt: color-mix(in oklab, var(--primary-660) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--background-surface-high: color-mix(in oklab, var(--neutral-64) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--background-surface-higher: color-mix(in oklab, var(--neutral-62) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--background-surface-highest: color-mix(in oklab, var(--neutral-60) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--background-tile-gradient-pink-end: color-mix(in oklab, hsl(var(--illo-pink-70-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--background-tile-gradient-pink-start: color-mix(in oklab, hsl(var(--illo-pink-50-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--bg-surface-overlay-tmp: color-mix(in oklab, var(--neutral-64) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--bg-surface-raised: color-mix(in oklab, var(--primary-560) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--border-feedback-critical: color-mix(in oklab, hsl(var(--opacity-red-20-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--border-focus: color-mix(in oklab, var(--blue-new-30) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--border-muted: color-mix(
in oklab,
hsl(var(--opacity-4-hsl)/0.0392156862745098) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0392156862745098) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--border-normal: color-mix(in oklab, hsl(var(--opacity-20-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--border-strong: color-mix(
in oklab,
hsl(var(--opacity-44-hsl)/0.4392156862745098) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.4392156862745098) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--border-subtle: color-mix(
in oklab,
hsl(var(--opacity-12-hsl)/0.12156862745098039) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--card-background-default: color-mix(in oklab, var(--neutral-64) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--card-primary-pressed-bg: color-mix(in oklab, var(--primary-645) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--card-secondary-bg: color-mix(in oklab, hsl(var(--opacity-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--card-secondary-pressed-bg: color-mix(in oklab, var(--primary-645) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--channel-icon: color-mix(in oklab, var(--neutral-28) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--channel-text-area-placeholder: color-mix(in oklab, var(--primary-430) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--channels-default: color-mix(in oklab, var(--neutral-28) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--channeltextarea-background: color-mix(in oklab, var(--primary-560) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--chat-background: color-mix(in oklab, var(--primary-600) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--chat-background-default: color-mix(in oklab, var(--neutral-64) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--chat-border: color-mix(in oklab, var(--primary-700) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--chat-text-muted: color-mix(in oklab, var(--neutral-27) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--content-inventory-media-seekbar-container: color-mix(in oklab, hsl(var(--plum-6-hsl)/0.24) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.24) var(--custom-theme-base-color-amount, 0%));
--content-inventory-overlay-text-primary: color-mix(in oklab, hsl(var(--white-hsl)/0.85) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.85) var(--custom-theme-text-color-amount, 0%));
--content-inventory-overlay-text-secondary: color-mix(in oklab, hsl(var(--white-hsl)/0.7) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.7) var(--custom-theme-text-color-amount, 0%));
--context-menu-backdrop-background: color-mix(in oklab, hsl(var(--opacity-black-72-hsl)/0.7215686274509804) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.7215686274509804) var(--custom-theme-base-color-amount, 0%));
--control-brand-foreground: color-mix(in oklab, var(--brand-360) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--control-brand-foreground-new: color-mix(in oklab, var(--brand-360) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--creator-revenue-icon-gradient-end: color-mix(in oklab, var(--teal-430) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--creator-revenue-icon-gradient-start: color-mix(in oklab, var(--teal-360) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--creator-revenue-info-box-background: color-mix(in oklab, hsl(var(--teal-430-hsl)/0.1) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1) var(--custom-theme-base-color-amount, 0%));
--creator-revenue-info-box-border: color-mix(in oklab, var(--teal-400) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--creator-revenue-locked-channel-icon: color-mix(in oklab, var(--teal-345) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--creator-revenue-progress-bar: color-mix(in oklab, var(--teal-400) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--embed-background: color-mix(in oklab, var(--primary-630) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--embed-background-alternate: color-mix(in oklab, var(--primary-600) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--experimental-avatar-embed-bg: color-mix(in oklab, hsl(var(--opacity-black-52-hsl)/0.5215686274509804) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.5215686274509804) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-blue-end: color-mix(in oklab, hsl(var(--illo-blue-60-hsl)/0.45) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.45) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-blue-start: color-mix(in oklab, hsl(var(--illo-blue-40-hsl)/0.45) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.45) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-green-end: color-mix(in oklab, hsl(var(--illo-green-70-hsl)/0.45) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.45) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-green-start: color-mix(in oklab, hsl(var(--illo-green-50-hsl)/0.45) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.45) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-nitro-green-end: color-mix(in oklab, hsl(var(--illo-nitro-blue-hsl)/0.5) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.5) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-nitro-green-start: color-mix(in oklab, hsl(var(--illo-green-50-hsl)/0.5) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.5) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-nitro-pink-end: color-mix(in oklab, hsl(var(--illo-nitro-blue-hsl)/0.5) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.5) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-nitro-pink-start: color-mix(in oklab, hsl(var(--illo-pink-60-hsl)/0.5) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.5) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-pink-end: color-mix(in oklab, hsl(var(--illo-pink-70-hsl)/0.45) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.45) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-pink-start: color-mix(in oklab, hsl(var(--illo-pink-50-hsl)/0.45) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.45) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-purple-end: color-mix(in oklab, hsl(var(--illo-purple-60-hsl)/0.45) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.45) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-purple-start: color-mix(in oklab, hsl(var(--illo-purple-40-hsl)/0.45) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.45) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-bronze-end: color-mix(in oklab, hsl(var(--illo-orange-70-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-bronze-start: color-mix(in oklab, hsl(var(--illo-orange-30-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-diamond-end: color-mix(in oklab, hsl(var(--illo-purple-50-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-diamond-start: color-mix(in oklab, hsl(var(--illo-purple-40-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-emerald-end: color-mix(in oklab, hsl(var(--illo-green-60-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-emerald-start: color-mix(in oklab, hsl(var(--illo-green-40-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-gold-end: color-mix(in oklab, hsl(var(--yellow-new-41-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-gold-start: color-mix(in oklab, hsl(var(--illo-yellow-50-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-opal-end: color-mix(in oklab, hsl(var(--blue-new-50-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-opal-start: color-mix(in oklab, hsl(var(--teal-new-30-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-platinum-end: color-mix(in oklab, hsl(var(--teal-new-60-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-platinum-start: color-mix(in oklab, hsl(var(--teal-new-20-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-ruby-end: color-mix(in oklab, hsl(var(--red-new-80-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-ruby-start: color-mix(in oklab, hsl(var(--red-new-44-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-silver-end: color-mix(in oklab, hsl(var(--neutral-58-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-silver-start: color-mix(in oklab, hsl(var(--neutral-12-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--gradient-progress-pill-background: color-mix(in oklab, var(--neutral-46) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--home-background: color-mix(in oklab, var(--primary-645) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--icon-default: color-mix(in oklab, var(--neutral-10) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-feedback-critical: color-mix(in oklab, var(--red-new-22) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-feedback-info: color-mix(in oklab, var(--blue-new-24) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-feedback-positive: color-mix(in oklab, var(--green-new-25) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-feedback-warning: color-mix(in oklab, var(--yellow-new-46) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-invert: color-mix(in oklab, var(--neutral-71) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-link: color-mix(in oklab, var(--blue-new-27) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-muted: color-mix(in oklab, var(--neutral-23) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-status-dnd: color-mix(in oklab, var(--red-new-45) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-status-idle: color-mix(in oklab, var(--yellow-new-22) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-status-offline: color-mix(in oklab, var(--neutral-27) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-status-online: color-mix(in oklab, var(--green-new-40) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-strong: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-subtle: color-mix(in oklab, var(--neutral-16) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-transparent: color-mix(in oklab, hsl(var(--transparent-hsl)/0) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0) var(--custom-theme-text-color-amount, 0%));
--input-background-default: color-mix(in oklab, hsl(var(--opacity-black-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--input-background-error-default: color-mix(in oklab, hsl(var(--opacity-red-4-hsl)/0.0392156862745098) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0392156862745098) var(--custom-theme-base-color-amount, 0%));
--input-border-active: color-mix(in oklab, var(--blurple-50) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--input-border-default: color-mix(in oklab, hsl(var(--opacity-20-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--input-border-error-default: color-mix(in oklab, var(--red-new-22) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--input-border-hover: color-mix(in oklab, hsl(var(--opacity-20-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--input-border-readonly: color-mix(
in oklab,
hsl(var(--opacity-white-8-hsl)/0.0784313725490196) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--input-icon-default: color-mix(in oklab, var(--neutral-16) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--input-placeholder-text-default: color-mix(in oklab, var(--neutral-31) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--input-text-default: color-mix(in oklab, var(--neutral-10) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--input-text-error-default: color-mix(in oklab, var(--neutral-10) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-background-active: color-mix(in oklab, hsl(var(--opacity-16-hsl)/0.1607843137254902) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1607843137254902) var(--custom-theme-base-color-amount, 0%));
--interactive-background-hover: color-mix(in oklab, hsl(var(--opacity-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--interactive-background-selected: color-mix(in oklab, hsl(var(--opacity-20-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-base-color-amount, 0%));
--interactive-icon-active: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-icon-default: color-mix(in oklab, var(--neutral-16) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-icon-hover: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-muted: color-mix(in oklab, var(--primary-500) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-text-active: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-text-default: color-mix(in oklab, var(--neutral-16) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-text-hover: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--logo-primary: color-mix(in oklab, var(--white) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--mention-background: color-mix(in oklab, hsl(var(--opacity-blurple-24-hsl)/0.23921568627450981) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.23921568627450981) var(--custom-theme-base-color-amount, 0%));
--mention-foreground: color-mix(in oklab, var(--blurple-8) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--message-automod-background-default: color-mix(in oklab, hsl(var(--red-400-hsl)/0.05) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.05) var(--custom-theme-base-color-amount, 0%));
--message-automod-background-hover: color-mix(in oklab, hsl(var(--red-400-hsl)/0.1) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1) var(--custom-theme-base-color-amount, 0%));
--message-background-hover: color-mix(in oklab, hsl(var(--opacity-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--message-highlight-background-default: color-mix(in oklab, hsl(var(--opacity-blurple-16-hsl)/0.1607843137254902) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1607843137254902) var(--custom-theme-base-color-amount, 0%));
--message-highlight-background-hover: color-mix(in oklab, hsl(var(--opacity-blurple-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--message-mentioned-background-default: color-mix(in oklab, hsl(var(--opacity-yellow-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--message-mentioned-background-hover: color-mix(in oklab, hsl(var(--opacity-yellow-4-hsl)/0.0392156862745098) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0392156862745098) var(--custom-theme-base-color-amount, 0%));
--message-reacted-background-default: color-mix(in oklab, hsl(var(--opacity-blurple-24-hsl)/0.23921568627450981) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.23921568627450981) var(--custom-theme-base-color-amount, 0%));
--message-reacted-text-default: color-mix(in oklab, var(--blurple-3) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--mobile-background-scrim-opaque: color-mix(in oklab, var(--black) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--mobile-expression-picker-background-default: color-mix(in oklab, var(--neutral-69) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--mobile-text-heading-primary: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--modal-background: color-mix(in oklab, var(--neutral-64) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--modal-footer-background: color-mix(in oklab, var(--neutral-64) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--navigator-header-tint: color-mix(in oklab, var(--white) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--overlay-backdrop-lightbox: color-mix(in oklab, hsl(var(--opacity-black-92-hsl)/0.9215686274509803) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.9215686274509803) var(--custom-theme-base-color-amount, 0%));
--panel-bg: color-mix(in oklab, var(--neutral-66) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--polls-normal-image-background: color-mix(in oklab, var(--primary-660) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--polls-victor-fill: color-mix(in oklab, hsl(var(--green-360-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-base-color-amount, 0%));
--polls-voted-fill: color-mix(in oklab, hsl(var(--brand-500-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-base-color-amount, 0%));
--premium-nitro-pink-text: color-mix(in oklab, var(--pink-34) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--profile-gradient-note-background: color-mix(in oklab, hsl(var(--black-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--profile-gradient-overlay: color-mix(in oklab, hsl(var(--black-hsl)/0.6) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.6) var(--custom-theme-base-color-amount, 0%));
--profile-gradient-overlay-synced-with-user-theme: color-mix(in oklab, hsl(var(--black-hsl)/0.8) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.8) var(--custom-theme-base-color-amount, 0%));
--profile-gradient-role-pill-background: color-mix(in oklab, hsl(var(--primary-660-hsl)/0.5) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.5) var(--custom-theme-base-color-amount, 0%));
--profile-gradient-role-pill-border: color-mix(in oklab, hsl(var(--white-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--profile-gradient-section-box: color-mix(in oklab, hsl(var(--black-hsl)/0.45) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.45) var(--custom-theme-base-color-amount, 0%));
--redesign-button-active-background: color-mix(in oklab, var(--green-430) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-active-pressed-background: color-mix(in oklab, var(--green-460) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-active-text: color-mix(in oklab, var(--white) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-danger-background: color-mix(in oklab, var(--red-430) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-destructive-background: color-mix(in oklab, var(--red-430) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-destructive-pressed-background: color-mix(in oklab, var(--red-460) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-destructive-text: color-mix(in oklab, var(--white) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-overlay-alpha-background: color-mix(in oklab, hsl(var(--black-hsl)/0.54) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.54) var(--custom-theme-base-color-amount, 0%));
--redesign-button-overlay-alpha-pressed-background: color-mix(in oklab, hsl(var(--black-hsl)/0.64) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.64) var(--custom-theme-base-color-amount, 0%));
--redesign-button-overlay-alpha-text: color-mix(in oklab, var(--white) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-positive-background: color-mix(in oklab, var(--green-430) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-premium-primary-pink-for-gradient: color-mix(in oklab, var(--premium-tier-2-pink-for-gradients) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-premium-primary-pressed-background: color-mix(in oklab, hsl(var(--black-hsl)/0.1) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1) var(--custom-theme-base-color-amount, 0%));
--redesign-button-premium-primary-purple-for-gradient: color-mix(in oklab, var(--premium-tier-2-purple-for-gradients) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-premium-primary-purple-for-gradient-2: color-mix(in oklab, var(--premium-tier-2-purple-for-gradients-2) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-primary-alt-border: color-mix(in oklab, var(--blurple-26) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--redesign-button-primary-background: color-mix(in oklab, var(--brand-500) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-primary-overlay-background: color-mix(in oklab, var(--white) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-primary-overlay-pressed-background: color-mix(in oklab, var(--primary-230) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-primary-overlay-text: color-mix(in oklab, var(--primary-860) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-primary-pressed-background: color-mix(in oklab, var(--brand-560) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-primary-text: color-mix(in oklab, var(--white) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-secondary-background: color-mix(in oklab, var(--primary-460) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-secondary-border: color-mix(
in oklab,
hsl(var(--opacity-12-hsl)/0.12156862745098039) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--redesign-button-secondary-overlay-background: color-mix(in oklab, hsl(var(--black-hsl)/0.54) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.54) var(--custom-theme-base-color-amount, 0%));
--redesign-button-secondary-overlay-pressed-background: color-mix(in oklab, hsl(var(--black-hsl)/0.64) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.64) var(--custom-theme-base-color-amount, 0%));
--redesign-button-secondary-overlay-text: color-mix(in oklab, var(--white) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-secondary-pressed-background: color-mix(in oklab, var(--primary-500) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-secondary-pressed-border: color-mix(in oklab, hsl(var(--transparent-hsl)/0) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--redesign-button-secondary-text: color-mix(in oklab, var(--neutral-10) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-selected-background: color-mix(in oklab, hsl(var(--brand-500-hsl)/0.24) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.24) var(--custom-theme-base-color-amount, 0%));
--redesign-button-selected-pressed-background: color-mix(in oklab, hsl(var(--brand-500-hsl)/0.28) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.28) var(--custom-theme-base-color-amount, 0%));
--redesign-button-selected-text: color-mix(in oklab, var(--blurple-50) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-tertiary-background: color-mix(in oklab, var(--primary-660) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-tertiary-pressed-background: color-mix(in oklab, var(--primary-560) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-tertiary-pressed-text: color-mix(in oklab, var(--primary-330) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-tertiary-text: color-mix(in oklab, var(--neutral-10) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--scrollbar-auto-scrollbar-color-thumb: color-mix(in oklab, var(--neutral-39) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--scrollbar-auto-scrollbar-color-track: color-mix(in oklab, var(--neutral-74) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--scrollbar-auto-thumb: color-mix(in oklab, var(--neutral-36) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--scrollbar-auto-track: color-mix(in oklab, hsl(var(--transparent-hsl)/0) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0) var(--custom-theme-base-color-amount, 0%));
--scrollbar-thin-thumb: color-mix(in oklab, var(--neutral-38) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--scrollbar-thin-track: color-mix(in oklab, hsl(var(--black-hsl)/0) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0) var(--custom-theme-base-color-amount, 0%));
--spine-default: color-mix(
in oklab,
hsl(var(--opacity-44-hsl)/0.4392156862745098) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.4392156862745098) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--spoiler-hidden-background: color-mix(in oklab, var(--neutral-36) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--spoiler-hidden-background-hover: color-mix(in oklab, var(--neutral-27) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--spoiler-revealed-background: color-mix(in oklab, var(--primary-660) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--text-brand: color-mix(in oklab, var(--blurple-26) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code: color-mix(in oklab, var(--blue-new-16) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-addition: color-mix(in oklab, var(--green-new-15) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-builtin: color-mix(in oklab, var(--orange-new-14) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-bullet: color-mix(in oklab, var(--yellow-new-32) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-comment: color-mix(in oklab, var(--neutral-26) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-deletion: color-mix(in oklab, var(--red-new-11) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-keyword: color-mix(in oklab, var(--red-new-12) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-section: color-mix(in oklab, var(--blue-new-16) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-string: color-mix(in oklab, var(--teal-new-17) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-tag: color-mix(in oklab, var(--green-new-12) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-title: color-mix(in oklab, var(--blurple-9) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-variable: color-mix(in oklab, var(--blue-new-10) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-default: color-mix(in oklab, var(--neutral-10) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-feedback-critical: color-mix(in oklab, var(--red-new-22) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-feedback-info: color-mix(in oklab, var(--blue-new-24) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-feedback-positive: color-mix(in oklab, var(--green-new-25) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-feedback-warning: color-mix(in oklab, var(--yellow-new-46) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-invert: color-mix(in oklab, var(--neutral-71) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-link: color-mix(in oklab, var(--blue-new-27) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-muted: color-mix(in oklab, var(--neutral-23) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-overlay-dark: color-mix(in oklab, var(--neutral-71) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-overlay-light: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-status-dnd: color-mix(in oklab, var(--red-new-45) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-status-idle: color-mix(in oklab, var(--yellow-new-22) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-status-offline: color-mix(in oklab, var(--neutral-27) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-status-online: color-mix(in oklab, var(--green-new-40) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-strong: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-subtle: color-mix(in oklab, var(--neutral-16) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--textbox-markdown-syntax: color-mix(in oklab, var(--primary-360) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--thread-channel-spine: color-mix(in oklab, var(--primary-500) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--user-profile-activity-toolbar-background: color-mix(in oklab, var(--neutral-60) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--user-profile-background-hover: color-mix(in oklab, hsl(var(--opacity-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--user-profile-border: color-mix(
in oklab,
hsl(var(--opacity-12-hsl)/0.12156862745098039) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--user-profile-note-background-focus: color-mix(in oklab, var(--neutral-73) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--user-profile-overlay-background: color-mix(in oklab, var(--neutral-60) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--user-profile-overlay-background-hover: color-mix(in oklab, hsl(var(--opacity-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--user-profile-toolbar-background: color-mix(in oklab, var(--neutral-60) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--user-profile-toolbar-border: color-mix(
in oklab,
hsl(var(--opacity-4-hsl)/0.0392156862745098) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0392156862745098) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
}
}
.theme-light {
--app-frame-background: var(--neutral-7);
--app-frame-border: hsl(var(--opacity-28-hsl)/0.2784313725490196);
--app-message-embed-secondary-text: hsl(var(--white-hsl)/0.7);
--background-accent: var(--primary-430);
--background-base-low: var(--neutral-2);
--background-base-lower: var(--neutral-2);
--background-base-lowest: var(--neutral-4);
--background-brand: var(--blurple-50);
--background-code: hsl(var(--opacity-blurple-4-hsl)/0.0392156862745098);
--background-code-addition: hsl(var(--opacity-green-12-hsl)/0.12156862745098039);
--background-code-deletion: hsl(var(--opacity-red-12-hsl)/0.12156862745098039);
--background-feedback-critical: hsl(var(--opacity-red-8-hsl)/0.0784313725490196);
--background-feedback-info: hsl(var(--opacity-blue-8-hsl)/0.0784313725490196);
--background-feedback-positive: hsl(var(--opacity-green-8-hsl)/0.0784313725490196);
--background-feedback-warning: hsl(var(--opacity-yellow-8-hsl)/0.0784313725490196);
--background-mod-muted: hsl(var(--opacity-8-hsl)/0.0784313725490196);
--background-mod-normal: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--background-mod-strong: hsl(var(--opacity-24-hsl)/0.23921568627450981);
--background-mod-subtle: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--background-scrim: hsl(var(--opacity-black-52-hsl)/0.5215686274509804);
--background-scrim-lightbox: hsl(var(--opacity-black-92-hsl)/0.9215686274509803);
--background-secondary-alt: var(--primary-160);
--background-surface-high: var(--neutral-1);
--background-surface-higher: var(--neutral-1);
--background-surface-highest: var(--neutral-1);
--background-tile-gradient-pink-end: hsl(var(--illo-pink-30-hsl)/0.3);
--background-tile-gradient-pink-start: hsl(var(--illo-pink-10-hsl)/0.3);
--badge-background-brand: var(--blurple-50);
--badge-expressive-background-default: var(--blurple-50);
--badge-expressive-text-default: var(--neutral-1);
--badge-text-brand: var(--neutral-1);
--bg-surface-overlay-tmp: var(--primary-130);
--bg-surface-raised: var(--white);
--border-feedback-critical: hsl(var(--opacity-red-24-hsl)/0.23921568627450981);
--border-focus: var(--blue-new-40);
--border-muted: hsl(var(--opacity-20-hsl)/0.2);
--border-normal: hsl(var(--opacity-36-hsl)/0.3607843137254902);
--border-strong: hsl(var(--opacity-48-hsl)/0.47843137254901963);
--border-subtle: hsl(var(--opacity-28-hsl)/0.2784313725490196);
--button-danger-background-disabled: var(--red-new-50);
--button-outline-brand-background-hover: var(--brand-500);
--button-outline-brand-border-active: var(--brand-560);
--button-outline-primary-text: var(--black);
--card-background-default: var(--neutral-1);
--card-primary-pressed-bg: var(--primary-160);
--card-secondary-bg: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--card-secondary-pressed-bg: var(--primary-160);
--channel-icon: var(--neutral-43);
--channel-text-area-placeholder: var(--primary-400);
--channels-default: var(--neutral-43);
--channeltextarea-background: var(--primary-160);
--chat-background: var(--white);
--chat-background-default: var(--neutral-1);
--chat-border: var(--primary-200);
--chat-text-muted: var(--neutral-40);
--checkbox-background-active: var(--blurple-65);
--checkbox-background-default: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--checkbox-background-hover: hsl(var(--opacity-black-4-hsl)/0.0392156862745098);
--checkbox-background-selected-default: var(--blurple-50);
--checkbox-background-selected-hover: var(--blurple-60);
--checkbox-border-active: hsl(var(--opacity-28-hsl)/0.2784313725490196);
--checkbox-border-default: var(--neutral-30);
--checkbox-border-hover: var(--neutral-46);
--checkbox-border-selected-default: hsl(var(--opacity-28-hsl)/0.2784313725490196);
--checkbox-border-selected-hover: hsl(var(--opacity-28-hsl)/0.2784313725490196);
--checkbox-icon-active: var(--neutral-1);
--chip-blurple-dark-background: var(--blurple-70);
--chip-blurple-dark-text: var(--blurple-1);
--chip-blurple-light-background: var(--blurple-20);
--chip-blurple-light-text: var(--blurple-91);
--chip-blurple-medium-background: var(--blurple-40);
--chip-blurple-medium-text: var(--blurple-100);
--chip-gray-dark-background: var(--neutral-75);
--chip-gray-dark-text: var(--neutral-6);
--chip-gray-light-background: var(--neutral-10);
--chip-gray-light-text: var(--neutral-68);
--chip-gray-medium-background: var(--neutral-40);
--chip-gray-medium-text: var(--neutral-1);
--chip-green-dark-background: var(--green-new-70);
--chip-green-dark-text: var(--green-new-1);
--chip-green-light-background: var(--green-new-20);
--chip-green-light-text: var(--green-new-91);
--chip-green-medium-background: var(--green-new-45);
--chip-green-medium-text: var(--green-new-96);
--chip-orange-dark-background: var(--orange-new-70);
--chip-orange-dark-text: var(--orange-new-1);
--chip-orange-light-background: var(--orange-new-20);
--chip-orange-light-text: var(--orange-new-93);
--chip-orange-medium-background: var(--orange-new-40);
--chip-orange-medium-text: var(--orange-new-100);
--chip-pink-dark-background: var(--illo-pink-60);
--chip-pink-dark-text: var(--neutral-1);
--chip-pink-light-background: var(--illo-pink-20);
--chip-pink-light-text: var(--neutral-73);
--chip-pink-medium-background: var(--illo-pink-40);
--chip-pink-medium-text: var(--neutral-100);
--chip-purple-dark-background: var(--illo-purple-60);
--chip-purple-dark-text: var(--neutral-10);
--chip-purple-light-background: var(--illo-purple-20);
--chip-purple-light-text: var(--neutral-75);
--chip-purple-medium-background: var(--illo-purple-40);
--chip-purple-medium-text: var(--neutral-100);
--chip-red-dark-background: var(--red-new-70);
--chip-red-dark-text: var(--red-new-1);
--chip-red-light-background: var(--red-new-20);
--chip-red-light-text: var(--red-new-95);
--chip-red-medium-background: var(--red-new-45);
--chip-red-medium-text: var(--red-new-100);
--chip-yellow-dark-background: var(--yellow-new-70);
--chip-yellow-dark-text: var(--yellow-new-1);
--chip-yellow-light-background: var(--yellow-new-20);
--chip-yellow-light-text: var(--yellow-new-87);
--chip-yellow-medium-background: var(--yellow-new-45);
--chip-yellow-medium-text: var(--yellow-new-80);
--content-inventory-media-seekbar-container: hsl(var(--plum-6-hsl)/0.24);
--content-inventory-overlay-text-primary: hsl(var(--white-hsl)/0.85);
--content-inventory-overlay-text-secondary: hsl(var(--white-hsl)/0.7);
--context-menu-backdrop-background: hsl(var(--opacity-black-52-hsl)/0.5215686274509804);
--control-brand-foreground: var(--brand-500);
--control-brand-foreground-new: var(--brand-500);
--control-connected-background-active: var(--green-new-65);
--control-connected-background-default: var(--green-new-50);
--control-connected-background-hover: var(--green-new-60);
--control-connected-border-active: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-connected-border-default: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-connected-border-hover: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-connected-icon-active: var(--neutral-1);
--control-connected-icon-default: var(--neutral-1);
--control-connected-icon-hover: var(--neutral-1);
--control-connected-text-active: var(--neutral-1);
--control-connected-text-default: var(--neutral-1);
--control-connected-text-hover: var(--neutral-1);
--control-critical-primary-background-active: var(--red-new-65);
--control-critical-primary-background-default: var(--red-new-50);
--control-critical-primary-background-hover: var(--red-new-60);
--control-critical-primary-border-active: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-critical-primary-border-default: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-critical-primary-border-hover: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-critical-primary-icon-active: var(--neutral-1);
--control-critical-primary-icon-default: var(--neutral-1);
--control-critical-primary-icon-hover: var(--neutral-1);
--control-critical-primary-text-active: var(--neutral-1);
--control-critical-primary-text-default: var(--neutral-1);
--control-critical-primary-text-hover: var(--neutral-1);
--control-critical-secondary-background-active: hsl(var(--opacity-24-hsl)/0.23921568627450981);
--control-critical-secondary-background-default: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--control-critical-secondary-background-hover: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--control-critical-secondary-border-active: hsl(var(--opacity-20-hsl)/0.2);
--control-critical-secondary-border-default: hsl(var(--opacity-20-hsl)/0.2);
--control-critical-secondary-border-hover: hsl(var(--opacity-20-hsl)/0.2);
--control-critical-secondary-icon-active: var(--red-new-53);
--control-critical-secondary-icon-default: var(--red-new-53);
--control-critical-secondary-icon-hover: var(--red-new-53);
--control-critical-secondary-text-active: var(--red-new-53);
--control-critical-secondary-text-default: var(--red-new-53);
--control-critical-secondary-text-hover: var(--red-new-53);
--control-expressive-background-active: var(--blurple-65);
--control-expressive-background-default: var(--blurple-50);
--control-expressive-background-hover: var(--blurple-60);
--control-expressive-border-active: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-expressive-border-default: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-expressive-border-hover: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-expressive-icon-active: var(--neutral-1);
--control-expressive-icon-default: var(--neutral-1);
--control-expressive-icon-hover: var(--neutral-1);
--control-expressive-text-active: var(--neutral-1);
--control-expressive-text-default: var(--neutral-1);
--control-expressive-text-hover: var(--neutral-1);
--control-icon-only-background-active: hsl(var(--opacity-24-hsl)/0.23921568627450981);
--control-icon-only-background-hover: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--control-icon-only-border-active: hsl(var(--opacity-20-hsl)/0.2);
--control-icon-only-border-hover: hsl(var(--opacity-20-hsl)/0.2);
--control-icon-only-icon-active: var(--neutral-71);
--control-icon-only-icon-default: var(--neutral-44);
--control-icon-only-icon-hover: var(--neutral-71);
--control-overlay-primary-background-active: var(--neutral-17);
--control-overlay-primary-background-default: var(--neutral-1);
--control-overlay-primary-background-hover: var(--neutral-9);
--control-overlay-primary-border-active: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-overlay-primary-border-default: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-overlay-primary-border-hover: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-overlay-primary-icon-active: var(--neutral-100);
--control-overlay-primary-icon-default: var(--neutral-100);
--control-overlay-primary-icon-hover: var(--neutral-100);
--control-overlay-primary-text-active: var(--neutral-100);
--control-overlay-primary-text-default: var(--neutral-100);
--control-overlay-primary-text-hover: var(--neutral-100);
--control-overlay-secondary-background-active: hsl(var(--opacity-black-48-hsl)/0.47843137254901963);
--control-overlay-secondary-background-default: hsl(var(--opacity-black-52-hsl)/0.5215686274509804);
--control-overlay-secondary-background-hover: hsl(var(--opacity-black-64-hsl)/0.6392156862745098);
--control-overlay-secondary-border-active: hsl(var(--opacity-20-hsl)/0.2);
--control-overlay-secondary-border-default: hsl(var(--opacity-20-hsl)/0.2);
--control-overlay-secondary-border-hover: hsl(var(--opacity-20-hsl)/0.2);
--control-overlay-secondary-icon-active: var(--neutral-1);
--control-overlay-secondary-icon-default: var(--neutral-1);
--control-overlay-secondary-icon-hover: var(--neutral-1);
--control-overlay-secondary-text-active: var(--neutral-1);
--control-overlay-secondary-text-default: var(--neutral-1);
--control-overlay-secondary-text-hover: var(--neutral-1);
--control-primary-background-active: var(--blurple-65);
--control-primary-background-default: var(--blurple-50);
--control-primary-background-hover: var(--blurple-60);
--control-primary-border-active: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-primary-border-default: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-primary-border-hover: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-primary-icon-active: var(--neutral-1);
--control-primary-icon-default: var(--neutral-1);
--control-primary-icon-hover: var(--neutral-1);
--control-primary-text-active: var(--neutral-1);
--control-primary-text-default: var(--neutral-1);
--control-primary-text-hover: var(--neutral-1);
--control-secondary-background-active: hsl(var(--opacity-24-hsl)/0.23921568627450981);
--control-secondary-background-default: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--control-secondary-background-hover: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--control-secondary-border-active: hsl(var(--opacity-20-hsl)/0.2);
--control-secondary-border-default: hsl(var(--opacity-20-hsl)/0.2);
--control-secondary-border-hover: hsl(var(--opacity-20-hsl)/0.2);
--control-secondary-icon-active: var(--neutral-71);
--control-secondary-icon-default: var(--neutral-71);
--control-secondary-icon-hover: var(--neutral-71);
--control-secondary-text-active: var(--neutral-71);
--control-secondary-text-default: var(--neutral-71);
--control-secondary-text-hover: var(--neutral-71);
--creator-revenue-icon-gradient-end: var(--teal-400);
--creator-revenue-icon-gradient-start: var(--teal-345);
--creator-revenue-info-box-background: hsl(var(--teal-430-hsl)/0.1);
--creator-revenue-info-box-border: var(--teal-400);
--creator-revenue-locked-channel-icon: var(--teal-400);
--creator-revenue-progress-bar: var(--teal-345);
--embed-background: var(--primary-130);
--embed-background-alternate: var(--primary-200);
--experimental-avatar-embed-bg: hsl(var(--opacity-black-52-hsl)/0.5215686274509804);
--expressive-gradient-blue-end: hsl(var(--illo-blue-30-hsl)/0.8);
--expressive-gradient-blue-start: hsl(var(--illo-blue-10-hsl)/0.8);
--expressive-gradient-green-end: hsl(var(--illo-green-30-hsl)/0.8);
--expressive-gradient-green-start: hsl(var(--illo-green-10-hsl)/0.8);
--expressive-gradient-nitro-green-end: hsl(var(--illo-blue-40-hsl)/0.9);
--expressive-gradient-nitro-green-start: hsl(var(--illo-green-10-hsl)/0.9);
--expressive-gradient-nitro-pink-end: hsl(var(--illo-blue-40-hsl)/0.9);
--expressive-gradient-nitro-pink-start: hsl(var(--illo-pink-30-hsl)/0.9);
--expressive-gradient-pink-end: hsl(var(--illo-pink-30-hsl)/0.8);
--expressive-gradient-pink-start: hsl(var(--illo-pink-10-hsl)/0.8);
--expressive-gradient-purple-end: hsl(var(--illo-purple-30-hsl)/0.8);
--expressive-gradient-purple-start: hsl(var(--illo-purple-10-hsl)/0.8);
--expressive-gradient-tenure-badge-bronze-end: hsl(var(--illo-orange-70-hsl)/0.3);
--expressive-gradient-tenure-badge-bronze-start: hsl(var(--illo-orange-30-hsl)/0.3);
--expressive-gradient-tenure-badge-diamond-end: hsl(var(--illo-purple-50-hsl)/0.3);
--expressive-gradient-tenure-badge-diamond-start: hsl(var(--illo-purple-40-hsl)/0.3);
--expressive-gradient-tenure-badge-emerald-end: hsl(var(--illo-green-60-hsl)/0.3);
--expressive-gradient-tenure-badge-emerald-start: hsl(var(--illo-green-40-hsl)/0.3);
--expressive-gradient-tenure-badge-gold-end: hsl(var(--yellow-new-41-hsl)/0.3);
--expressive-gradient-tenure-badge-gold-start: hsl(var(--illo-yellow-50-hsl)/0.3);
--expressive-gradient-tenure-badge-opal-end: hsl(var(--blue-new-50-hsl)/0.3);
--expressive-gradient-tenure-badge-opal-start: hsl(var(--teal-new-30-hsl)/0.3);
--expressive-gradient-tenure-badge-platinum-end: hsl(var(--teal-new-60-hsl)/0.3);
--expressive-gradient-tenure-badge-platinum-start: hsl(var(--teal-new-20-hsl)/0.3);
--expressive-gradient-tenure-badge-ruby-end: hsl(var(--red-new-80-hsl)/0.3);
--expressive-gradient-tenure-badge-ruby-start: hsl(var(--red-new-44-hsl)/0.3);
--expressive-gradient-tenure-badge-silver-end: hsl(var(--neutral-58-hsl)/0.3);
--expressive-gradient-tenure-badge-silver-start: hsl(var(--neutral-12-hsl)/0.3);
--gradient-progress-pill-background: var(--neutral-18);
--home-background: var(--primary-100);
--icon-default: var(--neutral-69);
--icon-feedback-critical: var(--red-new-53);
--icon-feedback-info: var(--blue-new-56);
--icon-feedback-positive: var(--green-new-55);
--icon-feedback-warning: var(--yellow-new-70);
--icon-invert: var(--neutral-1);
--icon-link: var(--blue-new-50);
--icon-muted: var(--neutral-41);
--icon-status-dnd: var(--red-new-50);
--icon-status-idle: var(--yellow-new-45);
--icon-status-offline: var(--neutral-45);
--icon-status-online: var(--green-160);
--icon-strong: var(--neutral-71);
--icon-subtle: var(--neutral-44);
--icon-transparent: hsl(var(--transparent-hsl)/0);
--input-background-default: hsl(var(--opacity-black-1-hsl)/0.0196078431372549);
--input-background-error-default: hsl(var(--opacity-red-4-hsl)/0.0392156862745098);
--input-border-active: var(--blurple-50);
--input-border-default: hsl(var(--opacity-36-hsl)/0.3607843137254902);
--input-border-error-default: var(--red-new-53);
--input-border-hover: hsl(var(--opacity-36-hsl)/0.3607843137254902);
--input-border-readonly: hsl(var(--opacity-black-4-hsl)/0.0392156862745098);
--input-icon-default: var(--neutral-44);
--input-placeholder-text-default: var(--neutral-42);
--input-text-default: var(--neutral-69);
--input-text-error-default: var(--neutral-69);
--interactive-background-active: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--interactive-background-hover: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--interactive-background-selected: hsl(var(--opacity-24-hsl)/0.23921568627450981);
--interactive-icon-active: var(--neutral-71);
--interactive-icon-default: var(--neutral-44);
--interactive-icon-hover: var(--neutral-71);
--interactive-muted: var(--primary-300);
--interactive-text-active: var(--neutral-71);
--interactive-text-default: var(--neutral-44);
--interactive-text-hover: var(--neutral-71);
--logo-primary: var(--brand-500);
--mention-background: hsl(var(--opacity-blurple-24-hsl)/0.23921568627450981);
--mention-foreground: var(--blurple-71);
--message-automod-background-default: hsl(var(--red-400-hsl)/0.05);
--message-automod-background-hover: hsl(var(--red-400-hsl)/0.1);
--message-background-hover: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--message-highlight-background-default: hsl(var(--opacity-blurple-16-hsl)/0.1607843137254902);
--message-highlight-background-hover: hsl(var(--opacity-blurple-20-hsl)/0.2);
--message-mentioned-background-default: hsl(var(--opacity-yellow-8-hsl)/0.0784313725490196);
--message-mentioned-background-hover: hsl(var(--opacity-yellow-12-hsl)/0.12156862745098039);
--message-reacted-background-default: hsl(var(--opacity-blurple-24-hsl)/0.23921568627450981);
--message-reacted-text-default: var(--blurple-75);
--mobile-background-scrim-opaque: var(--black);
--mobile-expression-picker-background-default: var(--neutral-2);
--mobile-text-heading-primary: var(--neutral-71);
--modal-background: var(--neutral-1);
--modal-footer-background: var(--neutral-1);
--navigator-header-tint: var(--primary-500);
--notice-background-critical: var(--red-new-1);
--notice-background-info: var(--blue-new-1);
--notice-background-positive: var(--green-new-1);
--notice-background-warning: var(--yellow-new-1);
--notice-text-critical: var(--red-new-78);
--notice-text-info: var(--blue-new-76);
--notice-text-positive: var(--green-new-76);
--notice-text-warning: var(--yellow-new-85);
--overlay-backdrop-lightbox: hsl(var(--opacity-black-92-hsl)/0.9215686274509803);
--panel-bg: var(--neutral-2);
--polls-normal-image-background: var(--white);
--polls-victor-fill: hsl(var(--green-400-hsl)/0.2);
--polls-voted-fill: hsl(var(--brand-500-hsl)/0.2);
--premium-nitro-pink-text: var(--pink-61);
--profile-gradient-note-background: hsl(var(--white-hsl)/0.3);
--profile-gradient-overlay: hsl(var(--white-hsl)/0.6);
--profile-gradient-overlay-synced-with-user-theme: hsl(var(--white-hsl)/0.8);
--profile-gradient-role-pill-background: hsl(var(--white-hsl)/0.5);
--profile-gradient-role-pill-border: hsl(var(--primary-660-hsl)/0.2);
--profile-gradient-section-box: hsl(var(--white-hsl)/0.45);
--radio-background-active: var(--blurple-65);
--radio-background-default: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--radio-background-hover: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--radio-background-selected-default: var(--blurple-50);
--radio-background-selected-hover: var(--blurple-60);
--radio-border-active: hsl(var(--opacity-28-hsl)/0.2784313725490196);
--radio-border-default: var(--neutral-34);
--radio-border-hover: var(--neutral-46);
--radio-border-selected-default: hsl(var(--opacity-28-hsl)/0.2784313725490196);
--radio-border-selected-hover: hsl(var(--opacity-28-hsl)/0.2784313725490196);
--radio-foreground-active: var(--blurple-50);
--radio-foreground-default: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--radio-foreground-hover: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--radio-thumb-background-active: var(--neutral-1);
--redesign-button-active-background: var(--green-430);
--redesign-button-active-pressed-background: var(--green-460);
--redesign-button-active-text: var(--white);
--redesign-button-danger-background: var(--red-430);
--redesign-button-destructive-background: var(--red-430);
--redesign-button-destructive-pressed-background: var(--red-460);
--redesign-button-destructive-text: var(--white);
--redesign-button-overlay-alpha-background: hsl(var(--black-hsl)/0.54);
--redesign-button-overlay-alpha-pressed-background: hsl(var(--black-hsl)/0.64);
--redesign-button-overlay-alpha-text: var(--white);
--redesign-button-positive-background: var(--green-430);
--redesign-button-premium-primary-pink-for-gradient: var(--premium-tier-2-pink-for-gradients);
--redesign-button-premium-primary-pressed-background: hsl(var(--black-hsl)/0.1);
--redesign-button-premium-primary-purple-for-gradient: var(--premium-tier-2-purple-for-gradients);
--redesign-button-premium-primary-purple-for-gradient-2: var(--premium-tier-2-purple-for-gradients-2);
--redesign-button-primary-alt-border: var(--blurple-50);
--redesign-button-primary-background: var(--brand-500);
--redesign-button-primary-overlay-background: var(--white);
--redesign-button-primary-overlay-pressed-background: var(--primary-230);
--redesign-button-primary-overlay-text: var(--primary-860);
--redesign-button-primary-pressed-background: var(--brand-560);
--redesign-button-primary-text: var(--white);
--redesign-button-secondary-background: var(--white);
--redesign-button-secondary-border: hsl(var(--opacity-28-hsl)/0.2784313725490196);
--redesign-button-secondary-overlay-background: hsl(var(--black-hsl)/0.54);
--redesign-button-secondary-overlay-pressed-background: hsl(var(--black-hsl)/0.64);
--redesign-button-secondary-overlay-text: var(--white);
--redesign-button-secondary-pressed-background: var(--primary-130);
--redesign-button-secondary-pressed-border: hsl(var(--opacity-20-hsl)/0.2);
--redesign-button-secondary-text: var(--neutral-69);
--redesign-button-selected-background: hsl(var(--brand-500-hsl)/0.16);
--redesign-button-selected-pressed-background: hsl(var(--brand-500-hsl)/0.24);
--redesign-button-selected-text: var(--blurple-50);
--redesign-button-tertiary-background: hsl(var(--black-hsl)/0.08);
--redesign-button-tertiary-pressed-background: hsl(var(--black-hsl)/0.16);
--redesign-button-tertiary-pressed-text: var(--primary-500);
--redesign-button-tertiary-text: var(--neutral-69);
--scrollbar-auto-scrollbar-color-thumb: var(--neutral-33);
--scrollbar-auto-scrollbar-color-track: var(--neutral-5);
--scrollbar-auto-thumb: var(--neutral-31);
--scrollbar-auto-track: hsl(var(--transparent-hsl)/0);
--scrollbar-thin-thumb: var(--neutral-32);
--scrollbar-thin-track: hsl(var(--black-hsl)/0);
--spine-default: hsl(var(--opacity-48-hsl)/0.47843137254901963);
--spoiler-hidden-background: var(--neutral-31);
--spoiler-hidden-background-hover: var(--neutral-40);
--spoiler-revealed-background: var(--primary-160);
--status-danger: var(--red-430);
--status-online: var(--green-400);
--status-positive: var(--green-400);
--status-positive-background: var(--green-430);
--status-positive-text: var(--white);
--status-speaking: var(--green-360);
--status-warning: var(--yellow-400);
--status-warning-background: var(--yellow-400);
--status-warning-text: var(--white);
--switch-background-active: var(--blurple-65);
--switch-background-default: hsl(var(--opacity-black-1-hsl)/0.0196078431372549);
--switch-background-hover: hsl(var(--opacity-black-1-hsl)/0.0196078431372549);
--switch-background-selected-default: var(--blurple-50);
--switch-background-selected-hover: var(--blurple-60);
--switch-border-default: hsl(var(--opacity-black-16-hsl)/0.1607843137254902);
--switch-border-hover: hsl(var(--opacity-black-44-hsl)/0.4392156862745098);
--switch-border-selected-default: hsl(var(--opacity-28-hsl)/0.2784313725490196);
--switch-border-selected-hover: hsl(var(--opacity-28-hsl)/0.2784313725490196);
--switch-thumb-background-default: var(--neutral-44);
--switch-thumb-background-selected-default: var(--neutral-1);
--switch-thumb-icon-active: var(--blurple-50);
--switch-thumb-icon-default: var(--neutral-1);
--text-brand: var(--blurple-50);
--text-code: var(--blue-new-64);
--text-code-addition: var(--green-new-68);
--text-code-builtin: var(--orange-new-63);
--text-code-bullet: var(--yellow-new-77);
--text-code-comment: var(--neutral-41);
--text-code-deletion: var(--red-new-66);
--text-code-keyword: var(--red-new-63);
--text-code-section: var(--blue-new-64);
--text-code-string: var(--teal-new-66);
--text-code-tag: var(--green-new-69);
--text-code-title: var(--blurple-68);
--text-code-variable: var(--blue-new-68);
--text-default: var(--neutral-69);
--text-feedback-critical: var(--red-new-53);
--text-feedback-info: var(--blue-new-56);
--text-feedback-positive: var(--green-new-55);
--text-feedback-warning: var(--yellow-new-70);
--text-invert: var(--neutral-1);
--text-link: var(--blue-new-50);
--text-muted: var(--neutral-41);
--text-overlay-dark: var(--neutral-71);
--text-overlay-light: var(--neutral-2);
--text-status-dnd: var(--red-new-50);
--text-status-idle: var(--yellow-new-45);
--text-status-offline: var(--neutral-45);
--text-status-online: var(--green-160);
--text-strong: var(--neutral-71);
--text-subtle: var(--neutral-44);
--textbox-markdown-syntax: var(--primary-530);
--thread-channel-spine: var(--primary-300);
--user-profile-activity-toolbar-background: var(--neutral-1);
--user-profile-background-hover: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--user-profile-border: hsl(var(--opacity-28-hsl)/0.2784313725490196);
--user-profile-note-background-focus: var(--neutral-4);
--user-profile-overlay-background: var(--neutral-1);
--user-profile-overlay-background-hover: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--user-profile-toolbar-background: var(--neutral-1);
--user-profile-toolbar-border: hsl(var(--opacity-20-hsl)/0.2);
}
@supports (color: color-mix(in lch, red, blue)) {
.theme-light {
--app-frame-background: color-mix(in oklab, var(--neutral-7) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--app-frame-border: color-mix(
in oklab,
hsl(var(--opacity-28-hsl)/0.2784313725490196) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2784313725490196) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--app-message-embed-secondary-text: color-mix(in oklab, hsl(var(--white-hsl)/0.7) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.7) var(--custom-theme-text-color-amount, 0%));
--background-accent: color-mix(in oklab, var(--primary-430) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--background-base-low: color-mix(in oklab, var(--neutral-2) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--background-base-lower: color-mix(in oklab, var(--neutral-2) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--background-base-lowest: color-mix(in oklab, var(--neutral-4) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--background-code: color-mix(in oklab, hsl(var(--opacity-blurple-4-hsl)/0.0392156862745098) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0392156862745098) var(--custom-theme-base-color-amount, 0%));
--background-code-addition: color-mix(in oklab, hsl(var(--opacity-green-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--background-code-deletion: color-mix(in oklab, hsl(var(--opacity-red-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--background-feedback-critical: color-mix(in oklab, hsl(var(--opacity-red-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--background-feedback-info: color-mix(in oklab, hsl(var(--opacity-blue-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--background-feedback-positive: color-mix(in oklab, hsl(var(--opacity-green-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--background-feedback-warning: color-mix(in oklab, hsl(var(--opacity-yellow-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--background-scrim: color-mix(in oklab, hsl(var(--opacity-black-52-hsl)/0.5215686274509804) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.5215686274509804) var(--custom-theme-base-color-amount, 0%));
--background-scrim-lightbox: color-mix(in oklab, hsl(var(--opacity-black-92-hsl)/0.9215686274509803) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.9215686274509803) var(--custom-theme-base-color-amount, 0%));
--background-secondary-alt: color-mix(in oklab, var(--primary-160) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--background-surface-high: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--background-surface-higher: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--background-surface-highest: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--background-tile-gradient-pink-end: color-mix(in oklab, hsl(var(--illo-pink-30-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--background-tile-gradient-pink-start: color-mix(in oklab, hsl(var(--illo-pink-10-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--bg-surface-overlay-tmp: color-mix(in oklab, var(--primary-130) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--bg-surface-raised: color-mix(in oklab, var(--white) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--border-feedback-critical: color-mix(
in oklab,
hsl(var(--opacity-red-24-hsl)/0.23921568627450981) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.23921568627450981) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--border-focus: color-mix(in oklab, var(--blue-new-40) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--border-muted: color-mix(in oklab, hsl(var(--opacity-20-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--border-normal: color-mix(
in oklab,
hsl(var(--opacity-36-hsl)/0.3607843137254902) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3607843137254902) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--border-strong: color-mix(
in oklab,
hsl(var(--opacity-48-hsl)/0.47843137254901963) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.47843137254901963) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--border-subtle: color-mix(
in oklab,
hsl(var(--opacity-28-hsl)/0.2784313725490196) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2784313725490196) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--card-background-default: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--card-primary-pressed-bg: color-mix(in oklab, var(--primary-160) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--card-secondary-bg: color-mix(in oklab, hsl(var(--opacity-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--card-secondary-pressed-bg: color-mix(in oklab, var(--primary-160) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--channel-icon: color-mix(in oklab, var(--neutral-43) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--channel-text-area-placeholder: color-mix(in oklab, var(--primary-400) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--channels-default: color-mix(in oklab, var(--neutral-43) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--channeltextarea-background: color-mix(in oklab, var(--primary-160) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--chat-background: color-mix(in oklab, var(--white) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--chat-background-default: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--chat-border: color-mix(in oklab, var(--primary-200) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--chat-text-muted: color-mix(in oklab, var(--neutral-40) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--content-inventory-media-seekbar-container: color-mix(in oklab, hsl(var(--plum-6-hsl)/0.24) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.24) var(--custom-theme-base-color-amount, 0%));
--content-inventory-overlay-text-primary: color-mix(in oklab, hsl(var(--white-hsl)/0.85) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.85) var(--custom-theme-text-color-amount, 0%));
--content-inventory-overlay-text-secondary: color-mix(in oklab, hsl(var(--white-hsl)/0.7) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.7) var(--custom-theme-text-color-amount, 0%));
--context-menu-backdrop-background: color-mix(in oklab, hsl(var(--opacity-black-52-hsl)/0.5215686274509804) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.5215686274509804) var(--custom-theme-base-color-amount, 0%));
--control-brand-foreground: color-mix(in oklab, var(--brand-500) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--control-brand-foreground-new: color-mix(in oklab, var(--brand-500) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--creator-revenue-icon-gradient-end: color-mix(in oklab, var(--teal-400) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--creator-revenue-icon-gradient-start: color-mix(in oklab, var(--teal-345) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--creator-revenue-info-box-background: color-mix(in oklab, hsl(var(--teal-430-hsl)/0.1) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1) var(--custom-theme-base-color-amount, 0%));
--creator-revenue-info-box-border: color-mix(in oklab, var(--teal-400) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--creator-revenue-locked-channel-icon: color-mix(in oklab, var(--teal-400) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--creator-revenue-progress-bar: color-mix(in oklab, var(--teal-345) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--embed-background: color-mix(in oklab, var(--primary-130) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--embed-background-alternate: color-mix(in oklab, var(--primary-200) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--experimental-avatar-embed-bg: color-mix(in oklab, hsl(var(--opacity-black-52-hsl)/0.5215686274509804) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.5215686274509804) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-blue-end: color-mix(in oklab, hsl(var(--illo-blue-30-hsl)/0.8) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.8) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-blue-start: color-mix(in oklab, hsl(var(--illo-blue-10-hsl)/0.8) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.8) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-green-end: color-mix(in oklab, hsl(var(--illo-green-30-hsl)/0.8) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.8) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-green-start: color-mix(in oklab, hsl(var(--illo-green-10-hsl)/0.8) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.8) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-nitro-green-end: color-mix(in oklab, hsl(var(--illo-blue-40-hsl)/0.9) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.9) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-nitro-green-start: color-mix(in oklab, hsl(var(--illo-green-10-hsl)/0.9) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.9) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-nitro-pink-end: color-mix(in oklab, hsl(var(--illo-blue-40-hsl)/0.9) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.9) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-nitro-pink-start: color-mix(in oklab, hsl(var(--illo-pink-30-hsl)/0.9) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.9) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-pink-end: color-mix(in oklab, hsl(var(--illo-pink-30-hsl)/0.8) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.8) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-pink-start: color-mix(in oklab, hsl(var(--illo-pink-10-hsl)/0.8) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.8) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-purple-end: color-mix(in oklab, hsl(var(--illo-purple-30-hsl)/0.8) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.8) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-purple-start: color-mix(in oklab, hsl(var(--illo-purple-10-hsl)/0.8) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.8) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-bronze-end: color-mix(in oklab, hsl(var(--illo-orange-70-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-bronze-start: color-mix(in oklab, hsl(var(--illo-orange-30-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-diamond-end: color-mix(in oklab, hsl(var(--illo-purple-50-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-diamond-start: color-mix(in oklab, hsl(var(--illo-purple-40-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-emerald-end: color-mix(in oklab, hsl(var(--illo-green-60-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-emerald-start: color-mix(in oklab, hsl(var(--illo-green-40-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-gold-end: color-mix(in oklab, hsl(var(--yellow-new-41-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-gold-start: color-mix(in oklab, hsl(var(--illo-yellow-50-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-opal-end: color-mix(in oklab, hsl(var(--blue-new-50-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-opal-start: color-mix(in oklab, hsl(var(--teal-new-30-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-platinum-end: color-mix(in oklab, hsl(var(--teal-new-60-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-platinum-start: color-mix(in oklab, hsl(var(--teal-new-20-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-ruby-end: color-mix(in oklab, hsl(var(--red-new-80-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-ruby-start: color-mix(in oklab, hsl(var(--red-new-44-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-silver-end: color-mix(in oklab, hsl(var(--neutral-58-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-silver-start: color-mix(in oklab, hsl(var(--neutral-12-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--gradient-progress-pill-background: color-mix(in oklab, var(--neutral-18) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--home-background: color-mix(in oklab, var(--primary-100) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--icon-default: color-mix(in oklab, var(--neutral-69) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-feedback-critical: color-mix(in oklab, var(--red-new-53) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-feedback-info: color-mix(in oklab, var(--blue-new-56) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-feedback-positive: color-mix(in oklab, var(--green-new-55) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-feedback-warning: color-mix(in oklab, var(--yellow-new-70) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-invert: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-link: color-mix(in oklab, var(--blue-new-50) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-muted: color-mix(in oklab, var(--neutral-41) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-status-dnd: color-mix(in oklab, var(--red-new-50) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-status-idle: color-mix(in oklab, var(--yellow-new-45) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-status-offline: color-mix(in oklab, var(--neutral-45) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-status-online: color-mix(in oklab, var(--green-160) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-strong: color-mix(in oklab, var(--neutral-71) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-subtle: color-mix(in oklab, var(--neutral-44) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-transparent: color-mix(in oklab, hsl(var(--transparent-hsl)/0) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0) var(--custom-theme-text-color-amount, 0%));
--input-background-default: color-mix(in oklab, hsl(var(--opacity-black-1-hsl)/0.0196078431372549) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0196078431372549) var(--custom-theme-base-color-amount, 0%));
--input-background-error-default: color-mix(in oklab, hsl(var(--opacity-red-4-hsl)/0.0392156862745098) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0392156862745098) var(--custom-theme-base-color-amount, 0%));
--input-border-active: color-mix(in oklab, var(--blurple-50) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--input-border-default: color-mix(
in oklab,
hsl(var(--opacity-36-hsl)/0.3607843137254902) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3607843137254902) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--input-border-error-default: color-mix(in oklab, var(--red-new-53) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--input-border-hover: color-mix(
in oklab,
hsl(var(--opacity-36-hsl)/0.3607843137254902) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3607843137254902) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--input-border-readonly: color-mix(
in oklab,
hsl(var(--opacity-black-4-hsl)/0.0392156862745098) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0392156862745098) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--input-icon-default: color-mix(in oklab, var(--neutral-44) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--input-placeholder-text-default: color-mix(in oklab, var(--neutral-42) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--input-text-default: color-mix(in oklab, var(--neutral-69) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--input-text-error-default: color-mix(in oklab, var(--neutral-69) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-background-active: color-mix(in oklab, hsl(var(--opacity-16-hsl)/0.1607843137254902) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1607843137254902) var(--custom-theme-base-color-amount, 0%));
--interactive-background-hover: color-mix(in oklab, hsl(var(--opacity-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--interactive-background-selected: color-mix(in oklab, hsl(var(--opacity-24-hsl)/0.23921568627450981) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.23921568627450981) var(--custom-theme-base-color-amount, 0%));
--interactive-icon-active: color-mix(in oklab, var(--neutral-71) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-icon-default: color-mix(in oklab, var(--neutral-44) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-icon-hover: color-mix(in oklab, var(--neutral-71) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-muted: color-mix(in oklab, var(--primary-300) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-text-active: color-mix(in oklab, var(--neutral-71) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-text-default: color-mix(in oklab, var(--neutral-44) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-text-hover: color-mix(in oklab, var(--neutral-71) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--logo-primary: color-mix(in oklab, var(--brand-500) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--mention-background: color-mix(in oklab, hsl(var(--opacity-blurple-24-hsl)/0.23921568627450981) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.23921568627450981) var(--custom-theme-base-color-amount, 0%));
--mention-foreground: color-mix(in oklab, var(--blurple-71) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--message-automod-background-default: color-mix(in oklab, hsl(var(--red-400-hsl)/0.05) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.05) var(--custom-theme-base-color-amount, 0%));
--message-automod-background-hover: color-mix(in oklab, hsl(var(--red-400-hsl)/0.1) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1) var(--custom-theme-base-color-amount, 0%));
--message-background-hover: color-mix(in oklab, hsl(var(--opacity-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--message-highlight-background-default: color-mix(in oklab, hsl(var(--opacity-blurple-16-hsl)/0.1607843137254902) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1607843137254902) var(--custom-theme-base-color-amount, 0%));
--message-highlight-background-hover: color-mix(in oklab, hsl(var(--opacity-blurple-20-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-base-color-amount, 0%));
--message-mentioned-background-default: color-mix(in oklab, hsl(var(--opacity-yellow-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--message-mentioned-background-hover: color-mix(in oklab, hsl(var(--opacity-yellow-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--message-reacted-background-default: color-mix(in oklab, hsl(var(--opacity-blurple-24-hsl)/0.23921568627450981) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.23921568627450981) var(--custom-theme-base-color-amount, 0%));
--message-reacted-text-default: color-mix(in oklab, var(--blurple-75) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--mobile-background-scrim-opaque: color-mix(in oklab, var(--black) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--mobile-expression-picker-background-default: color-mix(in oklab, var(--neutral-2) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--mobile-text-heading-primary: color-mix(in oklab, var(--neutral-71) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--modal-background: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--modal-footer-background: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--navigator-header-tint: color-mix(in oklab, var(--primary-500) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--overlay-backdrop-lightbox: color-mix(in oklab, hsl(var(--opacity-black-92-hsl)/0.9215686274509803) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.9215686274509803) var(--custom-theme-base-color-amount, 0%));
--panel-bg: color-mix(in oklab, var(--neutral-2) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--polls-normal-image-background: color-mix(in oklab, var(--white) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--polls-victor-fill: color-mix(in oklab, hsl(var(--green-400-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-base-color-amount, 0%));
--polls-voted-fill: color-mix(in oklab, hsl(var(--brand-500-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-base-color-amount, 0%));
--premium-nitro-pink-text: color-mix(in oklab, var(--pink-61) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--profile-gradient-note-background: color-mix(in oklab, hsl(var(--white-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--profile-gradient-overlay: color-mix(in oklab, hsl(var(--white-hsl)/0.6) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.6) var(--custom-theme-base-color-amount, 0%));
--profile-gradient-overlay-synced-with-user-theme: color-mix(in oklab, hsl(var(--white-hsl)/0.8) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.8) var(--custom-theme-base-color-amount, 0%));
--profile-gradient-role-pill-background: color-mix(in oklab, hsl(var(--white-hsl)/0.5) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.5) var(--custom-theme-base-color-amount, 0%));
--profile-gradient-role-pill-border: color-mix(in oklab, hsl(var(--primary-660-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--profile-gradient-section-box: color-mix(in oklab, hsl(var(--white-hsl)/0.45) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.45) var(--custom-theme-base-color-amount, 0%));
--redesign-button-active-background: color-mix(in oklab, var(--green-430) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-active-pressed-background: color-mix(in oklab, var(--green-460) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-active-text: color-mix(in oklab, var(--white) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-danger-background: color-mix(in oklab, var(--red-430) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-destructive-background: color-mix(in oklab, var(--red-430) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-destructive-pressed-background: color-mix(in oklab, var(--red-460) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-destructive-text: color-mix(in oklab, var(--white) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-overlay-alpha-background: color-mix(in oklab, hsl(var(--black-hsl)/0.54) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.54) var(--custom-theme-base-color-amount, 0%));
--redesign-button-overlay-alpha-pressed-background: color-mix(in oklab, hsl(var(--black-hsl)/0.64) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.64) var(--custom-theme-base-color-amount, 0%));
--redesign-button-overlay-alpha-text: color-mix(in oklab, var(--white) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-positive-background: color-mix(in oklab, var(--green-430) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-premium-primary-pink-for-gradient: color-mix(in oklab, var(--premium-tier-2-pink-for-gradients) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-premium-primary-pressed-background: color-mix(in oklab, hsl(var(--black-hsl)/0.1) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1) var(--custom-theme-base-color-amount, 0%));
--redesign-button-premium-primary-purple-for-gradient: color-mix(in oklab, var(--premium-tier-2-purple-for-gradients) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-premium-primary-purple-for-gradient-2: color-mix(in oklab, var(--premium-tier-2-purple-for-gradients-2) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-primary-alt-border: color-mix(in oklab, var(--blurple-50) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--redesign-button-primary-background: color-mix(in oklab, var(--brand-500) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-primary-overlay-background: color-mix(in oklab, var(--white) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-primary-overlay-pressed-background: color-mix(in oklab, var(--primary-230) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-primary-overlay-text: color-mix(in oklab, var(--primary-860) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-primary-pressed-background: color-mix(in oklab, var(--brand-560) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-primary-text: color-mix(in oklab, var(--white) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-secondary-background: color-mix(in oklab, var(--white) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-secondary-border: color-mix(
in oklab,
hsl(var(--opacity-28-hsl)/0.2784313725490196) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2784313725490196) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--redesign-button-secondary-overlay-background: color-mix(in oklab, hsl(var(--black-hsl)/0.54) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.54) var(--custom-theme-base-color-amount, 0%));
--redesign-button-secondary-overlay-pressed-background: color-mix(in oklab, hsl(var(--black-hsl)/0.64) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.64) var(--custom-theme-base-color-amount, 0%));
--redesign-button-secondary-overlay-text: color-mix(in oklab, var(--white) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-secondary-pressed-background: color-mix(in oklab, var(--primary-130) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-secondary-pressed-border: color-mix(
in oklab,
hsl(var(--opacity-20-hsl)/0.2) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--redesign-button-secondary-text: color-mix(in oklab, var(--neutral-69) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-selected-background: color-mix(in oklab, hsl(var(--brand-500-hsl)/0.16) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.16) var(--custom-theme-base-color-amount, 0%));
--redesign-button-selected-pressed-background: color-mix(in oklab, hsl(var(--brand-500-hsl)/0.24) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.24) var(--custom-theme-base-color-amount, 0%));
--redesign-button-selected-text: color-mix(in oklab, var(--blurple-50) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-tertiary-background: color-mix(in oklab, hsl(var(--black-hsl)/0.08) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.08) var(--custom-theme-base-color-amount, 0%));
--redesign-button-tertiary-pressed-background: color-mix(in oklab, hsl(var(--black-hsl)/0.16) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.16) var(--custom-theme-base-color-amount, 0%));
--redesign-button-tertiary-pressed-text: color-mix(in oklab, var(--primary-500) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-tertiary-text: color-mix(in oklab, var(--neutral-69) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--scrollbar-auto-scrollbar-color-thumb: color-mix(in oklab, var(--neutral-33) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--scrollbar-auto-scrollbar-color-track: color-mix(in oklab, var(--neutral-5) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--scrollbar-auto-thumb: color-mix(in oklab, var(--neutral-31) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--scrollbar-auto-track: color-mix(in oklab, hsl(var(--transparent-hsl)/0) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0) var(--custom-theme-base-color-amount, 0%));
--scrollbar-thin-thumb: color-mix(in oklab, var(--neutral-32) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--scrollbar-thin-track: color-mix(in oklab, hsl(var(--black-hsl)/0) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0) var(--custom-theme-base-color-amount, 0%));
--spine-default: color-mix(
in oklab,
hsl(var(--opacity-48-hsl)/0.47843137254901963) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.47843137254901963) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--spoiler-hidden-background: color-mix(in oklab, var(--neutral-31) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--spoiler-hidden-background-hover: color-mix(in oklab, var(--neutral-40) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--spoiler-revealed-background: color-mix(in oklab, var(--primary-160) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--text-brand: color-mix(in oklab, var(--blurple-50) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code: color-mix(in oklab, var(--blue-new-64) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-addition: color-mix(in oklab, var(--green-new-68) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-builtin: color-mix(in oklab, var(--orange-new-63) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-bullet: color-mix(in oklab, var(--yellow-new-77) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-comment: color-mix(in oklab, var(--neutral-41) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-deletion: color-mix(in oklab, var(--red-new-66) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-keyword: color-mix(in oklab, var(--red-new-63) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-section: color-mix(in oklab, var(--blue-new-64) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-string: color-mix(in oklab, var(--teal-new-66) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-tag: color-mix(in oklab, var(--green-new-69) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-title: color-mix(in oklab, var(--blurple-68) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-variable: color-mix(in oklab, var(--blue-new-68) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-default: color-mix(in oklab, var(--neutral-69) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-feedback-critical: color-mix(in oklab, var(--red-new-53) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-feedback-info: color-mix(in oklab, var(--blue-new-56) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-feedback-positive: color-mix(in oklab, var(--green-new-55) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-feedback-warning: color-mix(in oklab, var(--yellow-new-70) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-invert: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-link: color-mix(in oklab, var(--blue-new-50) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-muted: color-mix(in oklab, var(--neutral-41) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-overlay-dark: color-mix(in oklab, var(--neutral-71) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-overlay-light: color-mix(in oklab, var(--neutral-2) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-status-dnd: color-mix(in oklab, var(--red-new-50) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-status-idle: color-mix(in oklab, var(--yellow-new-45) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-status-offline: color-mix(in oklab, var(--neutral-45) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-status-online: color-mix(in oklab, var(--green-160) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-strong: color-mix(in oklab, var(--neutral-71) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-subtle: color-mix(in oklab, var(--neutral-44) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--textbox-markdown-syntax: color-mix(in oklab, var(--primary-530) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--thread-channel-spine: color-mix(in oklab, var(--primary-300) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--user-profile-activity-toolbar-background: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--user-profile-background-hover: color-mix(in oklab, hsl(var(--opacity-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--user-profile-border: color-mix(
in oklab,
hsl(var(--opacity-28-hsl)/0.2784313725490196) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2784313725490196) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--user-profile-note-background-focus: color-mix(in oklab, var(--neutral-4) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--user-profile-overlay-background: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--user-profile-overlay-background-hover: color-mix(in oklab, hsl(var(--opacity-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--user-profile-toolbar-background: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--user-profile-toolbar-border: color-mix(in oklab, hsl(var(--opacity-20-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
}
}
.theme-midnight {
--app-frame-background: var(--neutral-100);
--app-frame-border: hsl(var(--opacity-20-hsl)/0.2);
--app-message-embed-secondary-text: hsl(var(--white-hsl)/0.7);
--background-accent: var(--plum-17);
--background-base-low: var(--neutral-95);
--background-base-lower: var(--neutral-97);
--background-base-lowest: var(--neutral-100);
--background-brand: var(--blurple-50);
--background-code: hsl(var(--opacity-blurple-8-hsl)/0.0784313725490196);
--background-code-addition: hsl(var(--opacity-green-12-hsl)/0.12156862745098039);
--background-code-deletion: hsl(var(--opacity-red-12-hsl)/0.12156862745098039);
--background-feedback-critical: hsl(var(--opacity-red-8-hsl)/0.0784313725490196);
--background-feedback-info: hsl(var(--opacity-blue-8-hsl)/0.0784313725490196);
--background-feedback-positive: hsl(var(--opacity-green-8-hsl)/0.0784313725490196);
--background-feedback-warning: hsl(var(--opacity-yellow-8-hsl)/0.0784313725490196);
--background-mod-muted: hsl(var(--opacity-8-hsl)/0.0784313725490196);
--background-mod-normal: hsl(var(--opacity-20-hsl)/0.2);
--background-mod-strong: hsl(var(--opacity-24-hsl)/0.23921568627450981);
--background-mod-subtle: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--background-scrim: hsl(var(--opacity-black-72-hsl)/0.7215686274509804);
--background-scrim-lightbox: hsl(var(--opacity-black-92-hsl)/0.9215686274509803);
--background-secondary-alt: var(--plum-17);
--background-surface-high: var(--neutral-91);
--background-surface-higher: var(--neutral-87);
--background-surface-highest: var(--neutral-83);
--background-tile-gradient-pink-end: hsl(var(--illo-pink-70-hsl)/0.3);
--background-tile-gradient-pink-start: hsl(var(--illo-pink-50-hsl)/0.3);
--badge-background-brand: var(--blurple-50);
--badge-expressive-background-default: var(--neutral-1);
--badge-expressive-text-default: var(--neutral-71);
--badge-text-brand: var(--neutral-1);
--bg-surface-overlay-tmp: var(--plum-21);
--bg-surface-raised: var(--plum-23);
--border-feedback-critical: hsl(var(--opacity-red-24-hsl)/0.23921568627450981);
--border-focus: var(--blue-new-30);
--border-muted: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--border-normal: hsl(var(--opacity-20-hsl)/0.2);
--border-strong: hsl(var(--opacity-44-hsl)/0.4392156862745098);
--border-subtle: hsl(var(--opacity-20-hsl)/0.2);
--button-danger-background-disabled: var(--red-new-50);
--button-outline-brand-background-hover: var(--brand-500);
--button-outline-brand-border-active: var(--brand-560);
--button-outline-primary-text: var(--white);
--card-background-default: var(--neutral-91);
--card-primary-pressed-bg: var(--plum-25);
--card-secondary-bg: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--card-secondary-pressed-bg: var(--plum-26);
--channel-icon: var(--neutral-37);
--channel-text-area-placeholder: var(--plum-11);
--channels-default: var(--neutral-37);
--channeltextarea-background: var(--plum-23);
--chat-background: var(--black);
--chat-background-default: var(--neutral-91);
--chat-border: var(--plum-20);
--chat-text-muted: var(--neutral-38);
--checkbox-background-active: var(--blurple-65);
--checkbox-background-default: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--checkbox-background-hover: hsl(var(--opacity-black-8-hsl)/0.0784313725490196);
--checkbox-background-selected-default: var(--blurple-50);
--checkbox-background-selected-hover: var(--blurple-60);
--checkbox-border-active: hsl(var(--opacity-20-hsl)/0.2);
--checkbox-border-default: var(--neutral-44);
--checkbox-border-hover: hsl(var(--opacity-80-hsl)/0.8);
--checkbox-border-selected-default: hsl(var(--opacity-20-hsl)/0.2);
--checkbox-border-selected-hover: hsl(var(--opacity-20-hsl)/0.2);
--checkbox-icon-active: var(--neutral-1);
--chip-blurple-dark-background: var(--blurple-70);
--chip-blurple-dark-text: var(--blurple-1);
--chip-blurple-light-background: var(--blurple-20);
--chip-blurple-light-text: var(--blurple-91);
--chip-blurple-medium-background: var(--blurple-40);
--chip-blurple-medium-text: var(--blurple-100);
--chip-gray-dark-background: var(--neutral-75);
--chip-gray-dark-text: var(--neutral-6);
--chip-gray-light-background: var(--neutral-10);
--chip-gray-light-text: var(--neutral-68);
--chip-gray-medium-background: var(--neutral-40);
--chip-gray-medium-text: var(--neutral-1);
--chip-green-dark-background: var(--green-new-70);
--chip-green-dark-text: var(--green-new-1);
--chip-green-light-background: var(--green-new-20);
--chip-green-light-text: var(--green-new-91);
--chip-green-medium-background: var(--green-new-45);
--chip-green-medium-text: var(--green-new-96);
--chip-orange-dark-background: var(--orange-new-70);
--chip-orange-dark-text: var(--orange-new-1);
--chip-orange-light-background: var(--orange-new-20);
--chip-orange-light-text: var(--orange-new-93);
--chip-orange-medium-background: var(--orange-new-40);
--chip-orange-medium-text: var(--orange-new-100);
--chip-pink-dark-background: var(--illo-pink-60);
--chip-pink-dark-text: var(--neutral-1);
--chip-pink-light-background: var(--illo-pink-20);
--chip-pink-light-text: var(--neutral-73);
--chip-pink-medium-background: var(--illo-pink-40);
--chip-pink-medium-text: var(--neutral-100);
--chip-purple-dark-background: var(--illo-purple-60);
--chip-purple-dark-text: var(--neutral-10);
--chip-purple-light-background: var(--illo-purple-20);
--chip-purple-light-text: var(--neutral-75);
--chip-purple-medium-background: var(--illo-purple-40);
--chip-purple-medium-text: var(--neutral-100);
--chip-red-dark-background: var(--red-new-70);
--chip-red-dark-text: var(--red-new-1);
--chip-red-light-background: var(--red-new-20);
--chip-red-light-text: var(--red-new-95);
--chip-red-medium-background: var(--red-new-45);
--chip-red-medium-text: var(--red-new-100);
--chip-yellow-dark-background: var(--yellow-new-70);
--chip-yellow-dark-text: var(--yellow-new-1);
--chip-yellow-light-background: var(--yellow-new-20);
--chip-yellow-light-text: var(--yellow-new-87);
--chip-yellow-medium-background: var(--yellow-new-45);
--chip-yellow-medium-text: var(--yellow-new-80);
--content-inventory-media-seekbar-container: hsl(var(--plum-6-hsl)/0.24);
--content-inventory-overlay-text-primary: hsl(var(--white-hsl)/0.85);
--content-inventory-overlay-text-secondary: hsl(var(--white-hsl)/0.7);
--context-menu-backdrop-background: hsl(var(--black-hsl)/0.7);
--control-brand-foreground: var(--brand-360);
--control-brand-foreground-new: var(--brand-360);
--control-connected-background-active: var(--green-new-65);
--control-connected-background-default: var(--green-new-50);
--control-connected-background-hover: var(--green-new-60);
--control-connected-border-active: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-connected-border-default: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-connected-border-hover: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-connected-icon-active: var(--neutral-1);
--control-connected-icon-default: var(--neutral-1);
--control-connected-icon-hover: var(--neutral-1);
--control-connected-text-active: var(--neutral-1);
--control-connected-text-default: var(--neutral-1);
--control-connected-text-hover: var(--neutral-1);
--control-critical-primary-background-active: var(--red-new-65);
--control-critical-primary-background-default: var(--red-new-50);
--control-critical-primary-background-hover: var(--red-new-60);
--control-critical-primary-border-active: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-critical-primary-border-default: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-critical-primary-border-hover: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-critical-primary-icon-active: var(--neutral-1);
--control-critical-primary-icon-default: var(--neutral-1);
--control-critical-primary-icon-hover: var(--neutral-1);
--control-critical-primary-text-active: var(--neutral-1);
--control-critical-primary-text-default: var(--neutral-1);
--control-critical-primary-text-hover: var(--neutral-1);
--control-critical-secondary-background-active: hsl(var(--opacity-24-hsl)/0.23921568627450981);
--control-critical-secondary-background-default: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--control-critical-secondary-background-hover: hsl(var(--opacity-20-hsl)/0.2);
--control-critical-secondary-border-active: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--control-critical-secondary-border-default: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--control-critical-secondary-border-hover: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--control-critical-secondary-icon-active: var(--red-new-38);
--control-critical-secondary-icon-default: var(--red-new-38);
--control-critical-secondary-icon-hover: var(--red-new-38);
--control-critical-secondary-text-active: var(--red-new-38);
--control-critical-secondary-text-default: var(--red-new-38);
--control-critical-secondary-text-hover: var(--red-new-38);
--control-expressive-background-active: var(--neutral-5);
--control-expressive-background-default: var(--neutral-1);
--control-expressive-background-hover: var(--neutral-1);
--control-expressive-border-active: hsl(var(--opacity-20-hsl)/0.2);
--control-expressive-border-default: hsl(var(--opacity-20-hsl)/0.2);
--control-expressive-border-hover: hsl(var(--opacity-20-hsl)/0.2);
--control-expressive-icon-active: var(--neutral-100);
--control-expressive-icon-default: var(--neutral-100);
--control-expressive-icon-hover: var(--neutral-100);
--control-expressive-text-active: var(--neutral-100);
--control-expressive-text-default: var(--neutral-100);
--control-expressive-text-hover: var(--neutral-100);
--control-icon-only-background-active: hsl(var(--opacity-24-hsl)/0.23921568627450981);
--control-icon-only-background-hover: hsl(var(--opacity-20-hsl)/0.2);
--control-icon-only-border-active: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--control-icon-only-border-hover: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--control-icon-only-icon-active: var(--neutral-8);
--control-icon-only-icon-default: var(--neutral-27);
--control-icon-only-icon-hover: var(--neutral-8);
--control-overlay-primary-background-active: var(--neutral-17);
--control-overlay-primary-background-default: var(--neutral-1);
--control-overlay-primary-background-hover: var(--neutral-9);
--control-overlay-primary-border-active: hsl(var(--opacity-20-hsl)/0.2);
--control-overlay-primary-border-default: hsl(var(--opacity-20-hsl)/0.2);
--control-overlay-primary-border-hover: hsl(var(--opacity-20-hsl)/0.2);
--control-overlay-primary-icon-active: var(--neutral-100);
--control-overlay-primary-icon-default: var(--neutral-100);
--control-overlay-primary-icon-hover: var(--neutral-100);
--control-overlay-primary-text-active: var(--neutral-100);
--control-overlay-primary-text-default: var(--neutral-100);
--control-overlay-primary-text-hover: var(--neutral-100);
--control-overlay-secondary-background-active: hsl(var(--opacity-black-48-hsl)/0.47843137254901963);
--control-overlay-secondary-background-default: hsl(var(--opacity-black-52-hsl)/0.5215686274509804);
--control-overlay-secondary-background-hover: hsl(var(--opacity-black-64-hsl)/0.6392156862745098);
--control-overlay-secondary-border-active: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--control-overlay-secondary-border-default: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--control-overlay-secondary-border-hover: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--control-overlay-secondary-icon-active: var(--neutral-1);
--control-overlay-secondary-icon-default: var(--neutral-1);
--control-overlay-secondary-icon-hover: var(--neutral-1);
--control-overlay-secondary-text-active: var(--neutral-1);
--control-overlay-secondary-text-default: var(--neutral-1);
--control-overlay-secondary-text-hover: var(--neutral-1);
--control-primary-background-active: var(--blurple-65);
--control-primary-background-default: var(--blurple-50);
--control-primary-background-hover: var(--blurple-60);
--control-primary-border-active: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-primary-border-default: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-primary-border-hover: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-primary-icon-active: var(--neutral-1);
--control-primary-icon-default: var(--neutral-1);
--control-primary-icon-hover: var(--neutral-1);
--control-primary-text-active: var(--neutral-1);
--control-primary-text-default: var(--neutral-1);
--control-primary-text-hover: var(--neutral-1);
--control-secondary-background-active: hsl(var(--opacity-24-hsl)/0.23921568627450981);
--control-secondary-background-default: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--control-secondary-background-hover: hsl(var(--opacity-20-hsl)/0.2);
--control-secondary-border-active: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--control-secondary-border-default: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--control-secondary-border-hover: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--control-secondary-icon-active: var(--neutral-8);
--control-secondary-icon-default: var(--neutral-8);
--control-secondary-icon-hover: var(--neutral-8);
--control-secondary-text-active: var(--neutral-8);
--control-secondary-text-default: var(--neutral-8);
--control-secondary-text-hover: var(--neutral-8);
--creator-revenue-icon-gradient-end: var(--teal-430);
--creator-revenue-icon-gradient-start: var(--teal-360);
--creator-revenue-info-box-background: hsl(var(--teal-430-hsl)/0.1);
--creator-revenue-info-box-border: var(--teal-400);
--creator-revenue-locked-channel-icon: var(--teal-345);
--creator-revenue-progress-bar: var(--teal-400);
--embed-background: var(--plum-23);
--embed-background-alternate: var(--plum-23);
--experimental-avatar-embed-bg: hsl(var(--opacity-black-52-hsl)/0.5215686274509804);
--expressive-gradient-blue-end: hsl(var(--illo-blue-60-hsl)/0.25);
--expressive-gradient-blue-start: hsl(var(--illo-blue-40-hsl)/0.25);
--expressive-gradient-green-end: hsl(var(--illo-green-70-hsl)/0.25);
--expressive-gradient-green-start: hsl(var(--illo-green-50-hsl)/0.25);
--expressive-gradient-nitro-green-end: hsl(var(--illo-nitro-blue-hsl)/0.3);
--expressive-gradient-nitro-green-start: hsl(var(--illo-green-50-hsl)/0.3);
--expressive-gradient-nitro-pink-end: hsl(var(--illo-nitro-blue-hsl)/0.3);
--expressive-gradient-nitro-pink-start: hsl(var(--illo-pink-60-hsl)/0.3);
--expressive-gradient-pink-end: hsl(var(--illo-pink-70-hsl)/0.25);
--expressive-gradient-pink-start: hsl(var(--illo-pink-50-hsl)/0.25);
--expressive-gradient-purple-end: hsl(var(--illo-purple-60-hsl)/0.25);
--expressive-gradient-purple-start: hsl(var(--illo-purple-40-hsl)/0.25);
--expressive-gradient-tenure-badge-bronze-end: hsl(var(--illo-orange-70-hsl)/0.3);
--expressive-gradient-tenure-badge-bronze-start: hsl(var(--illo-orange-30-hsl)/0.3);
--expressive-gradient-tenure-badge-diamond-end: hsl(var(--illo-purple-50-hsl)/0.3);
--expressive-gradient-tenure-badge-diamond-start: hsl(var(--illo-purple-40-hsl)/0.3);
--expressive-gradient-tenure-badge-emerald-end: hsl(var(--illo-green-60-hsl)/0.3);
--expressive-gradient-tenure-badge-emerald-start: hsl(var(--illo-green-40-hsl)/0.3);
--expressive-gradient-tenure-badge-gold-end: hsl(var(--yellow-new-41-hsl)/0.3);
--expressive-gradient-tenure-badge-gold-start: hsl(var(--illo-yellow-50-hsl)/0.3);
--expressive-gradient-tenure-badge-opal-end: hsl(var(--blue-new-50-hsl)/0.3);
--expressive-gradient-tenure-badge-opal-start: hsl(var(--teal-new-30-hsl)/0.3);
--expressive-gradient-tenure-badge-platinum-end: hsl(var(--teal-new-60-hsl)/0.3);
--expressive-gradient-tenure-badge-platinum-start: hsl(var(--teal-new-20-hsl)/0.3);
--expressive-gradient-tenure-badge-ruby-end: hsl(var(--red-new-80-hsl)/0.3);
--expressive-gradient-tenure-badge-ruby-start: hsl(var(--red-new-44-hsl)/0.3);
--expressive-gradient-tenure-badge-silver-end: hsl(var(--neutral-58-hsl)/0.3);
--expressive-gradient-tenure-badge-silver-start: hsl(var(--neutral-12-hsl)/0.3);
--gradient-progress-pill-background: var(--neutral-63);
--home-background: var(--plum-18);
--icon-default: var(--neutral-10);
--icon-feedback-critical: var(--red-new-38);
--icon-feedback-info: var(--blue-new-41);
--icon-feedback-positive: var(--green-new-40);
--icon-feedback-warning: var(--yellow-new-60);
--icon-invert: var(--neutral-71);
--icon-link: var(--blue-new-42);
--icon-muted: var(--neutral-33);
--icon-status-dnd: var(--red-new-45);
--icon-status-idle: var(--yellow-new-22);
--icon-status-offline: var(--neutral-27);
--icon-status-online: var(--green-new-40);
--icon-strong: var(--neutral-8);
--icon-subtle: var(--neutral-27);
--icon-transparent: hsl(var(--transparent-hsl)/0);
--input-background-default: hsl(var(--opacity-black-12-hsl)/0.12156862745098039);
--input-background-error-default: hsl(var(--opacity-red-4-hsl)/0.0392156862745098);
--input-border-active: var(--blurple-50);
--input-border-default: hsl(var(--opacity-20-hsl)/0.2);
--input-border-error-default: var(--red-new-38);
--input-border-hover: hsl(var(--opacity-20-hsl)/0.2);
--input-border-readonly: hsl(var(--opacity-white-12-hsl)/0.12156862745098039);
--input-icon-default: var(--neutral-27);
--input-placeholder-text-default: var(--neutral-39);
--input-text-default: var(--neutral-10);
--input-text-error-default: var(--neutral-10);
--interactive-background-active: hsl(var(--opacity-20-hsl)/0.2);
--interactive-background-hover: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--interactive-background-selected: hsl(var(--opacity-24-hsl)/0.23921568627450981);
--interactive-icon-active: var(--neutral-8);
--interactive-icon-default: var(--neutral-27);
--interactive-icon-hover: var(--neutral-8);
--interactive-muted: var(--plum-13);
--interactive-text-active: var(--neutral-8);
--interactive-text-default: var(--neutral-27);
--interactive-text-hover: var(--neutral-8);
--logo-primary: var(--white);
--mention-background: hsl(var(--opacity-blurple-24-hsl)/0.23921568627450981);
--mention-foreground: var(--blurple-26);
--message-automod-background-default: hsl(var(--red-345-hsl)/0.08);
--message-automod-background-hover: hsl(var(--red-400-hsl)/0.1);
--message-background-hover: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--message-highlight-background-default: hsl(var(--opacity-blurple-16-hsl)/0.1607843137254902);
--message-highlight-background-hover: hsl(var(--opacity-blurple-12-hsl)/0.12156862745098039);
--message-mentioned-background-default: hsl(var(--opacity-yellow-8-hsl)/0.0784313725490196);
--message-mentioned-background-hover: hsl(var(--opacity-yellow-4-hsl)/0.0392156862745098);
--message-reacted-background-default: hsl(var(--opacity-blurple-24-hsl)/0.23921568627450981);
--message-reacted-text-default: var(--blurple-21);
--mobile-background-scrim-opaque: var(--plum-19);
--mobile-expression-picker-background-default: var(--neutral-97);
--mobile-text-heading-primary: var(--neutral-8);
--modal-background: var(--neutral-91);
--modal-footer-background: var(--neutral-91);
--navigator-header-tint: var(--white);
--notice-background-critical: var(--red-new-95);
--notice-background-info: var(--blue-new-95);
--notice-background-positive: var(--green-new-98);
--notice-background-warning: var(--yellow-new-97);
--notice-text-critical: var(--red-new-15);
--notice-text-info: var(--blue-new-20);
--notice-text-positive: var(--green-new-21);
--notice-text-warning: var(--yellow-new-41);
--overlay-backdrop-lightbox: hsl(var(--opacity-black-92-hsl)/0.9215686274509803);
--panel-bg: var(--plum-24);
--polls-normal-image-background: var(--primary-660);
--polls-victor-fill: hsl(var(--green-360-hsl)/0.2);
--polls-voted-fill: hsl(var(--brand-500-hsl)/0.2);
--premium-nitro-pink-text: var(--pink-55);
--profile-gradient-note-background: hsl(var(--black-hsl)/0.3);
--profile-gradient-overlay: hsl(var(--black-hsl)/0.6);
--profile-gradient-overlay-synced-with-user-theme: hsl(var(--black-hsl)/0.8);
--profile-gradient-role-pill-background: hsl(var(--primary-660-hsl)/0.5);
--profile-gradient-role-pill-border: hsl(var(--white-hsl)/0.2);
--profile-gradient-section-box: hsl(var(--black-hsl)/0.45);
--radio-background-active: var(--blurple-65);
--radio-background-default: hsl(var(--opacity-black-8-hsl)/0.0784313725490196);
--radio-background-hover: hsl(var(--opacity-black-8-hsl)/0.0784313725490196);
--radio-background-selected-default: var(--blurple-50);
--radio-background-selected-hover: var(--blurple-60);
--radio-border-active: hsl(var(--opacity-20-hsl)/0.2);
--radio-border-default: hsl(var(--opacity-64-hsl)/0.6392156862745098);
--radio-border-hover: hsl(var(--opacity-80-hsl)/0.8);
--radio-border-selected-default: hsl(var(--opacity-20-hsl)/0.2);
--radio-border-selected-hover: hsl(var(--opacity-20-hsl)/0.2);
--radio-foreground-active: var(--blurple-50);
--radio-foreground-default: hsl(var(--opacity-black-8-hsl)/0.0784313725490196);
--radio-foreground-hover: hsl(var(--opacity-black-8-hsl)/0.0784313725490196);
--radio-thumb-background-active: var(--neutral-1);
--redesign-button-active-background: var(--green-430);
--redesign-button-active-pressed-background: var(--green-460);
--redesign-button-active-text: var(--white);
--redesign-button-danger-background: var(--red-430);
--redesign-button-destructive-background: var(--red-430);
--redesign-button-destructive-pressed-background: var(--red-460);
--redesign-button-destructive-text: var(--white);
--redesign-button-overlay-alpha-background: hsl(var(--black-hsl)/0.54);
--redesign-button-overlay-alpha-pressed-background: hsl(var(--black-hsl)/0.64);
--redesign-button-overlay-alpha-text: var(--white);
--redesign-button-positive-background: var(--green-430);
--redesign-button-premium-primary-pink-for-gradient: var(--premium-tier-2-pink-for-gradients);
--redesign-button-premium-primary-pressed-background: hsl(var(--black-hsl)/0.1);
--redesign-button-premium-primary-purple-for-gradient: var(--premium-tier-2-purple-for-gradients);
--redesign-button-premium-primary-purple-for-gradient-2: var(--premium-tier-2-purple-for-gradients-2);
--redesign-button-primary-alt-border: var(--blurple-42);
--redesign-button-primary-background: var(--brand-500);
--redesign-button-primary-overlay-background: var(--white);
--redesign-button-primary-overlay-pressed-background: var(--plum-4);
--redesign-button-primary-overlay-text: var(--plum-25);
--redesign-button-primary-pressed-background: var(--brand-560);
--redesign-button-primary-text: var(--white);
--redesign-button-secondary-background: var(--plum-17);
--redesign-button-secondary-border: hsl(var(--opacity-20-hsl)/0.2);
--redesign-button-secondary-overlay-background: hsl(var(--black-hsl)/0.54);
--redesign-button-secondary-overlay-pressed-background: hsl(var(--black-hsl)/0.64);
--redesign-button-secondary-overlay-text: var(--white);
--redesign-button-secondary-pressed-background: var(--plum-15);
--redesign-button-secondary-pressed-border: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--redesign-button-secondary-text: var(--neutral-10);
--redesign-button-selected-background: hsl(var(--brand-500-hsl)/0.24);
--redesign-button-selected-pressed-background: hsl(var(--brand-500-hsl)/0.28);
--redesign-button-selected-text: var(--blurple-50);
--redesign-button-tertiary-background: hsl(var(--opacity-black-12-hsl)/0.12156862745098039);
--redesign-button-tertiary-pressed-background: hsl(var(--plum-11-hsl)/0.2);
--redesign-button-tertiary-pressed-text: var(--plum-6);
--redesign-button-tertiary-text: var(--neutral-10);
--scrollbar-auto-scrollbar-color-thumb: var(--neutral-47);
--scrollbar-auto-scrollbar-color-track: var(--neutral-100);
--scrollbar-auto-thumb: var(--neutral-46);
--scrollbar-auto-track: hsl(var(--transparent-hsl)/0);
--scrollbar-thin-thumb: var(--neutral-47);
--scrollbar-thin-track: hsl(var(--black-hsl)/0);
--spine-default: hsl(var(--opacity-44-hsl)/0.4392156862745098);
--spoiler-hidden-background: var(--neutral-46);
--spoiler-hidden-background-hover: var(--neutral-37);
--spoiler-revealed-background: hsl(var(--plum-11-hsl)/0.16);
--status-danger: var(--red-400);
--status-online: var(--green-360);
--status-positive: var(--green-360);
--status-positive-background: var(--green-430);
--status-positive-text: var(--white);
--status-speaking: var(--green-360);
--status-warning: var(--yellow-300);
--status-warning-background: var(--yellow-300);
--status-warning-text: var(--black);
--switch-background-active: var(--blurple-65);
--switch-background-default: hsl(var(--opacity-black-12-hsl)/0.12156862745098039);
--switch-background-hover: hsl(var(--opacity-black-12-hsl)/0.12156862745098039);
--switch-background-selected-default: var(--blurple-50);
--switch-background-selected-hover: var(--blurple-60);
--switch-border-default: hsl(var(--opacity-20-hsl)/0.2);
--switch-border-hover: hsl(var(--opacity-40-hsl)/0.4);
--switch-border-selected-default: hsl(var(--opacity-20-hsl)/0.2);
--switch-border-selected-hover: hsl(var(--opacity-20-hsl)/0.2);
--switch-thumb-background-default: var(--neutral-1);
--switch-thumb-background-selected-default: var(--neutral-1);
--switch-thumb-icon-active: var(--blurple-50);
--switch-thumb-icon-default: var(--neutral-71);
--text-brand: var(--blurple-42);
--text-code: var(--blue-new-33);
--text-code-addition: var(--green-new-32);
--text-code-builtin: var(--orange-new-31);
--text-code-bullet: var(--yellow-new-56);
--text-code-comment: var(--neutral-37);
--text-code-deletion: var(--red-new-29);
--text-code-keyword: var(--red-new-30);
--text-code-section: var(--blue-new-33);
--text-code-string: var(--teal-new-34);
--text-code-tag: var(--green-new-29);
--text-code-title: var(--blurple-28);
--text-code-variable: var(--blue-new-28);
--text-default: var(--neutral-10);
--text-feedback-critical: var(--red-new-38);
--text-feedback-info: var(--blue-new-41);
--text-feedback-positive: var(--green-new-40);
--text-feedback-warning: var(--yellow-new-60);
--text-invert: var(--neutral-71);
--text-link: var(--blue-new-42);
--text-muted: var(--neutral-33);
--text-overlay-dark: var(--neutral-71);
--text-overlay-light: var(--neutral-8);
--text-status-dnd: var(--red-new-45);
--text-status-idle: var(--yellow-new-22);
--text-status-offline: var(--neutral-27);
--text-status-online: var(--green-new-40);
--text-strong: var(--neutral-8);
--text-subtle: var(--neutral-27);
--textbox-markdown-syntax: var(--plum-9);
--thread-channel-spine: var(--plum-13);
--user-profile-activity-toolbar-background: var(--neutral-83);
--user-profile-background-hover: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--user-profile-border: hsl(var(--opacity-20-hsl)/0.2);
--user-profile-note-background-focus: var(--neutral-100);
--user-profile-overlay-background: var(--neutral-83);
--user-profile-overlay-background-hover: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--user-profile-toolbar-background: var(--neutral-83);
--user-profile-toolbar-border: hsl(var(--opacity-16-hsl)/0.1607843137254902);
}
@supports (color: color-mix(in lch, red, blue)) {
.theme-midnight {
--app-frame-background: color-mix(in oklab, var(--neutral-100) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--app-frame-border: color-mix(in oklab, hsl(var(--opacity-20-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--app-message-embed-secondary-text: color-mix(in oklab, hsl(var(--white-hsl)/0.7) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.7) var(--custom-theme-text-color-amount, 0%));
--background-accent: color-mix(in oklab, var(--plum-17) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--background-base-low: color-mix(in oklab, var(--neutral-95) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--background-base-lower: color-mix(in oklab, var(--neutral-97) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--background-base-lowest: color-mix(in oklab, var(--neutral-100) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--background-code: color-mix(in oklab, hsl(var(--opacity-blurple-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--background-code-addition: color-mix(in oklab, hsl(var(--opacity-green-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--background-code-deletion: color-mix(in oklab, hsl(var(--opacity-red-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--background-feedback-critical: color-mix(in oklab, hsl(var(--opacity-red-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--background-feedback-info: color-mix(in oklab, hsl(var(--opacity-blue-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--background-feedback-positive: color-mix(in oklab, hsl(var(--opacity-green-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--background-feedback-warning: color-mix(in oklab, hsl(var(--opacity-yellow-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--background-scrim: color-mix(in oklab, hsl(var(--opacity-black-72-hsl)/0.7215686274509804) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.7215686274509804) var(--custom-theme-base-color-amount, 0%));
--background-scrim-lightbox: color-mix(in oklab, hsl(var(--opacity-black-92-hsl)/0.9215686274509803) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.9215686274509803) var(--custom-theme-base-color-amount, 0%));
--background-secondary-alt: color-mix(in oklab, var(--plum-17) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--background-surface-high: color-mix(in oklab, var(--neutral-91) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--background-surface-higher: color-mix(in oklab, var(--neutral-87) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--background-surface-highest: color-mix(in oklab, var(--neutral-83) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--background-tile-gradient-pink-end: color-mix(in oklab, hsl(var(--illo-pink-70-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--background-tile-gradient-pink-start: color-mix(in oklab, hsl(var(--illo-pink-50-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--bg-surface-overlay-tmp: color-mix(in oklab, var(--plum-21) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--bg-surface-raised: color-mix(in oklab, var(--plum-23) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--border-feedback-critical: color-mix(
in oklab,
hsl(var(--opacity-red-24-hsl)/0.23921568627450981) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.23921568627450981) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--border-focus: color-mix(in oklab, var(--blue-new-30) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--border-muted: color-mix(
in oklab,
hsl(var(--opacity-16-hsl)/0.1607843137254902) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1607843137254902) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--border-normal: color-mix(in oklab, hsl(var(--opacity-20-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--border-strong: color-mix(
in oklab,
hsl(var(--opacity-44-hsl)/0.4392156862745098) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.4392156862745098) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--border-subtle: color-mix(in oklab, hsl(var(--opacity-20-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--card-background-default: color-mix(in oklab, var(--neutral-91) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--card-primary-pressed-bg: color-mix(in oklab, var(--plum-25) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--card-secondary-bg: color-mix(in oklab, hsl(var(--opacity-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--card-secondary-pressed-bg: color-mix(in oklab, var(--plum-26) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--channel-icon: color-mix(in oklab, var(--neutral-37) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--channel-text-area-placeholder: color-mix(in oklab, var(--plum-11) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--channels-default: color-mix(in oklab, var(--neutral-37) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--channeltextarea-background: color-mix(in oklab, var(--plum-23) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--chat-background: color-mix(in oklab, var(--black) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--chat-background-default: color-mix(in oklab, var(--neutral-91) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--chat-border: color-mix(in oklab, var(--plum-20) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--chat-text-muted: color-mix(in oklab, var(--neutral-38) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--content-inventory-media-seekbar-container: color-mix(in oklab, hsl(var(--plum-6-hsl)/0.24) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.24) var(--custom-theme-base-color-amount, 0%));
--content-inventory-overlay-text-primary: color-mix(in oklab, hsl(var(--white-hsl)/0.85) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.85) var(--custom-theme-text-color-amount, 0%));
--content-inventory-overlay-text-secondary: color-mix(in oklab, hsl(var(--white-hsl)/0.7) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.7) var(--custom-theme-text-color-amount, 0%));
--context-menu-backdrop-background: color-mix(in oklab, hsl(var(--black-hsl)/0.7) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.7) var(--custom-theme-base-color-amount, 0%));
--control-brand-foreground: color-mix(in oklab, var(--brand-360) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--control-brand-foreground-new: color-mix(in oklab, var(--brand-360) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--creator-revenue-icon-gradient-end: color-mix(in oklab, var(--teal-430) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--creator-revenue-icon-gradient-start: color-mix(in oklab, var(--teal-360) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--creator-revenue-info-box-background: color-mix(in oklab, hsl(var(--teal-430-hsl)/0.1) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1) var(--custom-theme-base-color-amount, 0%));
--creator-revenue-info-box-border: color-mix(in oklab, var(--teal-400) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--creator-revenue-locked-channel-icon: color-mix(in oklab, var(--teal-345) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--creator-revenue-progress-bar: color-mix(in oklab, var(--teal-400) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--embed-background: color-mix(in oklab, var(--plum-23) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--embed-background-alternate: color-mix(in oklab, var(--plum-23) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--experimental-avatar-embed-bg: color-mix(in oklab, hsl(var(--opacity-black-52-hsl)/0.5215686274509804) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.5215686274509804) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-blue-end: color-mix(in oklab, hsl(var(--illo-blue-60-hsl)/0.25) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.25) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-blue-start: color-mix(in oklab, hsl(var(--illo-blue-40-hsl)/0.25) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.25) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-green-end: color-mix(in oklab, hsl(var(--illo-green-70-hsl)/0.25) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.25) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-green-start: color-mix(in oklab, hsl(var(--illo-green-50-hsl)/0.25) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.25) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-nitro-green-end: color-mix(in oklab, hsl(var(--illo-nitro-blue-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-nitro-green-start: color-mix(in oklab, hsl(var(--illo-green-50-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-nitro-pink-end: color-mix(in oklab, hsl(var(--illo-nitro-blue-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-nitro-pink-start: color-mix(in oklab, hsl(var(--illo-pink-60-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-pink-end: color-mix(in oklab, hsl(var(--illo-pink-70-hsl)/0.25) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.25) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-pink-start: color-mix(in oklab, hsl(var(--illo-pink-50-hsl)/0.25) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.25) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-purple-end: color-mix(in oklab, hsl(var(--illo-purple-60-hsl)/0.25) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.25) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-purple-start: color-mix(in oklab, hsl(var(--illo-purple-40-hsl)/0.25) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.25) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-bronze-end: color-mix(in oklab, hsl(var(--illo-orange-70-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-bronze-start: color-mix(in oklab, hsl(var(--illo-orange-30-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-diamond-end: color-mix(in oklab, hsl(var(--illo-purple-50-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-diamond-start: color-mix(in oklab, hsl(var(--illo-purple-40-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-emerald-end: color-mix(in oklab, hsl(var(--illo-green-60-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-emerald-start: color-mix(in oklab, hsl(var(--illo-green-40-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-gold-end: color-mix(in oklab, hsl(var(--yellow-new-41-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-gold-start: color-mix(in oklab, hsl(var(--illo-yellow-50-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-opal-end: color-mix(in oklab, hsl(var(--blue-new-50-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-opal-start: color-mix(in oklab, hsl(var(--teal-new-30-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-platinum-end: color-mix(in oklab, hsl(var(--teal-new-60-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-platinum-start: color-mix(in oklab, hsl(var(--teal-new-20-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-ruby-end: color-mix(in oklab, hsl(var(--red-new-80-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-ruby-start: color-mix(in oklab, hsl(var(--red-new-44-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-silver-end: color-mix(in oklab, hsl(var(--neutral-58-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-silver-start: color-mix(in oklab, hsl(var(--neutral-12-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--gradient-progress-pill-background: color-mix(in oklab, var(--neutral-63) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--home-background: color-mix(in oklab, var(--plum-18) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--icon-default: color-mix(in oklab, var(--neutral-10) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-feedback-critical: color-mix(in oklab, var(--red-new-38) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-feedback-info: color-mix(in oklab, var(--blue-new-41) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-feedback-positive: color-mix(in oklab, var(--green-new-40) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-feedback-warning: color-mix(in oklab, var(--yellow-new-60) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-invert: color-mix(in oklab, var(--neutral-71) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-link: color-mix(in oklab, var(--blue-new-42) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-muted: color-mix(in oklab, var(--neutral-33) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-status-dnd: color-mix(in oklab, var(--red-new-45) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-status-idle: color-mix(in oklab, var(--yellow-new-22) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-status-offline: color-mix(in oklab, var(--neutral-27) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-status-online: color-mix(in oklab, var(--green-new-40) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-strong: color-mix(in oklab, var(--neutral-8) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-subtle: color-mix(in oklab, var(--neutral-27) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-transparent: color-mix(in oklab, hsl(var(--transparent-hsl)/0) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0) var(--custom-theme-text-color-amount, 0%));
--input-background-default: color-mix(in oklab, hsl(var(--opacity-black-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--input-background-error-default: color-mix(in oklab, hsl(var(--opacity-red-4-hsl)/0.0392156862745098) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0392156862745098) var(--custom-theme-base-color-amount, 0%));
--input-border-active: color-mix(in oklab, var(--blurple-50) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--input-border-default: color-mix(in oklab, hsl(var(--opacity-20-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--input-border-error-default: color-mix(in oklab, var(--red-new-38) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--input-border-hover: color-mix(in oklab, hsl(var(--opacity-20-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--input-border-readonly: color-mix(
in oklab,
hsl(var(--opacity-white-12-hsl)/0.12156862745098039) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--input-icon-default: color-mix(in oklab, var(--neutral-27) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--input-placeholder-text-default: color-mix(in oklab, var(--neutral-39) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--input-text-default: color-mix(in oklab, var(--neutral-10) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--input-text-error-default: color-mix(in oklab, var(--neutral-10) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-background-active: color-mix(in oklab, hsl(var(--opacity-20-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-base-color-amount, 0%));
--interactive-background-hover: color-mix(in oklab, hsl(var(--opacity-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--interactive-background-selected: color-mix(in oklab, hsl(var(--opacity-24-hsl)/0.23921568627450981) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.23921568627450981) var(--custom-theme-base-color-amount, 0%));
--interactive-icon-active: color-mix(in oklab, var(--neutral-8) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-icon-default: color-mix(in oklab, var(--neutral-27) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-icon-hover: color-mix(in oklab, var(--neutral-8) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-muted: color-mix(in oklab, var(--plum-13) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-text-active: color-mix(in oklab, var(--neutral-8) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-text-default: color-mix(in oklab, var(--neutral-27) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-text-hover: color-mix(in oklab, var(--neutral-8) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--logo-primary: color-mix(in oklab, var(--white) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--mention-background: color-mix(in oklab, hsl(var(--opacity-blurple-24-hsl)/0.23921568627450981) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.23921568627450981) var(--custom-theme-base-color-amount, 0%));
--mention-foreground: color-mix(in oklab, var(--blurple-26) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--message-automod-background-default: color-mix(in oklab, hsl(var(--red-345-hsl)/0.08) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.08) var(--custom-theme-base-color-amount, 0%));
--message-automod-background-hover: color-mix(in oklab, hsl(var(--red-400-hsl)/0.1) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1) var(--custom-theme-base-color-amount, 0%));
--message-background-hover: color-mix(in oklab, hsl(var(--opacity-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--message-highlight-background-default: color-mix(in oklab, hsl(var(--opacity-blurple-16-hsl)/0.1607843137254902) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1607843137254902) var(--custom-theme-base-color-amount, 0%));
--message-highlight-background-hover: color-mix(in oklab, hsl(var(--opacity-blurple-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--message-mentioned-background-default: color-mix(in oklab, hsl(var(--opacity-yellow-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--message-mentioned-background-hover: color-mix(in oklab, hsl(var(--opacity-yellow-4-hsl)/0.0392156862745098) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0392156862745098) var(--custom-theme-base-color-amount, 0%));
--message-reacted-background-default: color-mix(in oklab, hsl(var(--opacity-blurple-24-hsl)/0.23921568627450981) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.23921568627450981) var(--custom-theme-base-color-amount, 0%));
--message-reacted-text-default: color-mix(in oklab, var(--blurple-21) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--mobile-background-scrim-opaque: color-mix(in oklab, var(--plum-19) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--mobile-expression-picker-background-default: color-mix(in oklab, var(--neutral-97) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--mobile-text-heading-primary: color-mix(in oklab, var(--neutral-8) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--modal-background: color-mix(in oklab, var(--neutral-91) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--modal-footer-background: color-mix(in oklab, var(--neutral-91) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--navigator-header-tint: color-mix(in oklab, var(--white) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--overlay-backdrop-lightbox: color-mix(in oklab, hsl(var(--opacity-black-92-hsl)/0.9215686274509803) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.9215686274509803) var(--custom-theme-base-color-amount, 0%));
--panel-bg: color-mix(in oklab, var(--plum-24) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--polls-normal-image-background: color-mix(in oklab, var(--primary-660) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--polls-victor-fill: color-mix(in oklab, hsl(var(--green-360-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-base-color-amount, 0%));
--polls-voted-fill: color-mix(in oklab, hsl(var(--brand-500-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-base-color-amount, 0%));
--premium-nitro-pink-text: color-mix(in oklab, var(--pink-55) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--profile-gradient-note-background: color-mix(in oklab, hsl(var(--black-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--profile-gradient-overlay: color-mix(in oklab, hsl(var(--black-hsl)/0.6) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.6) var(--custom-theme-base-color-amount, 0%));
--profile-gradient-overlay-synced-with-user-theme: color-mix(in oklab, hsl(var(--black-hsl)/0.8) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.8) var(--custom-theme-base-color-amount, 0%));
--profile-gradient-role-pill-background: color-mix(in oklab, hsl(var(--primary-660-hsl)/0.5) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.5) var(--custom-theme-base-color-amount, 0%));
--profile-gradient-role-pill-border: color-mix(in oklab, hsl(var(--white-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--profile-gradient-section-box: color-mix(in oklab, hsl(var(--black-hsl)/0.45) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.45) var(--custom-theme-base-color-amount, 0%));
--redesign-button-active-background: color-mix(in oklab, var(--green-430) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-active-pressed-background: color-mix(in oklab, var(--green-460) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-active-text: color-mix(in oklab, var(--white) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-danger-background: color-mix(in oklab, var(--red-430) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-destructive-background: color-mix(in oklab, var(--red-430) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-destructive-pressed-background: color-mix(in oklab, var(--red-460) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-destructive-text: color-mix(in oklab, var(--white) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-overlay-alpha-background: color-mix(in oklab, hsl(var(--black-hsl)/0.54) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.54) var(--custom-theme-base-color-amount, 0%));
--redesign-button-overlay-alpha-pressed-background: color-mix(in oklab, hsl(var(--black-hsl)/0.64) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.64) var(--custom-theme-base-color-amount, 0%));
--redesign-button-overlay-alpha-text: color-mix(in oklab, var(--white) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-positive-background: color-mix(in oklab, var(--green-430) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-premium-primary-pink-for-gradient: color-mix(in oklab, var(--premium-tier-2-pink-for-gradients) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-premium-primary-pressed-background: color-mix(in oklab, hsl(var(--black-hsl)/0.1) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1) var(--custom-theme-base-color-amount, 0%));
--redesign-button-premium-primary-purple-for-gradient: color-mix(in oklab, var(--premium-tier-2-purple-for-gradients) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-premium-primary-purple-for-gradient-2: color-mix(in oklab, var(--premium-tier-2-purple-for-gradients-2) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-primary-alt-border: color-mix(in oklab, var(--blurple-42) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--redesign-button-primary-background: color-mix(in oklab, var(--brand-500) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-primary-overlay-background: color-mix(in oklab, var(--white) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-primary-overlay-pressed-background: color-mix(in oklab, var(--plum-4) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-primary-overlay-text: color-mix(in oklab, var(--plum-25) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-primary-pressed-background: color-mix(in oklab, var(--brand-560) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-primary-text: color-mix(in oklab, var(--white) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-secondary-background: color-mix(in oklab, var(--plum-17) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-secondary-border: color-mix(in oklab, hsl(var(--opacity-20-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--redesign-button-secondary-overlay-background: color-mix(in oklab, hsl(var(--black-hsl)/0.54) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.54) var(--custom-theme-base-color-amount, 0%));
--redesign-button-secondary-overlay-pressed-background: color-mix(in oklab, hsl(var(--black-hsl)/0.64) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.64) var(--custom-theme-base-color-amount, 0%));
--redesign-button-secondary-overlay-text: color-mix(in oklab, var(--white) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-secondary-pressed-background: color-mix(in oklab, var(--plum-15) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-secondary-pressed-border: color-mix(
in oklab,
hsl(var(--opacity-16-hsl)/0.1607843137254902) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1607843137254902) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--redesign-button-secondary-text: color-mix(in oklab, var(--neutral-10) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-selected-background: color-mix(in oklab, hsl(var(--brand-500-hsl)/0.24) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.24) var(--custom-theme-base-color-amount, 0%));
--redesign-button-selected-pressed-background: color-mix(in oklab, hsl(var(--brand-500-hsl)/0.28) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.28) var(--custom-theme-base-color-amount, 0%));
--redesign-button-selected-text: color-mix(in oklab, var(--blurple-50) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-tertiary-background: color-mix(in oklab, hsl(var(--opacity-black-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--redesign-button-tertiary-pressed-background: color-mix(in oklab, hsl(var(--plum-11-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-base-color-amount, 0%));
--redesign-button-tertiary-pressed-text: color-mix(in oklab, var(--plum-6) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-tertiary-text: color-mix(in oklab, var(--neutral-10) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--scrollbar-auto-scrollbar-color-thumb: color-mix(in oklab, var(--neutral-47) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--scrollbar-auto-scrollbar-color-track: color-mix(in oklab, var(--neutral-100) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--scrollbar-auto-thumb: color-mix(in oklab, var(--neutral-46) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--scrollbar-auto-track: color-mix(in oklab, hsl(var(--transparent-hsl)/0) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0) var(--custom-theme-base-color-amount, 0%));
--scrollbar-thin-thumb: color-mix(in oklab, var(--neutral-47) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--scrollbar-thin-track: color-mix(in oklab, hsl(var(--black-hsl)/0) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0) var(--custom-theme-base-color-amount, 0%));
--spine-default: color-mix(
in oklab,
hsl(var(--opacity-44-hsl)/0.4392156862745098) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.4392156862745098) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--spoiler-hidden-background: color-mix(in oklab, var(--neutral-46) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--spoiler-hidden-background-hover: color-mix(in oklab, var(--neutral-37) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--spoiler-revealed-background: color-mix(in oklab, hsl(var(--plum-11-hsl)/0.16) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.16) var(--custom-theme-base-color-amount, 0%));
--text-brand: color-mix(in oklab, var(--blurple-42) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code: color-mix(in oklab, var(--blue-new-33) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-addition: color-mix(in oklab, var(--green-new-32) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-builtin: color-mix(in oklab, var(--orange-new-31) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-bullet: color-mix(in oklab, var(--yellow-new-56) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-comment: color-mix(in oklab, var(--neutral-37) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-deletion: color-mix(in oklab, var(--red-new-29) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-keyword: color-mix(in oklab, var(--red-new-30) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-section: color-mix(in oklab, var(--blue-new-33) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-string: color-mix(in oklab, var(--teal-new-34) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-tag: color-mix(in oklab, var(--green-new-29) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-title: color-mix(in oklab, var(--blurple-28) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-variable: color-mix(in oklab, var(--blue-new-28) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-default: color-mix(in oklab, var(--neutral-10) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-feedback-critical: color-mix(in oklab, var(--red-new-38) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-feedback-info: color-mix(in oklab, var(--blue-new-41) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-feedback-positive: color-mix(in oklab, var(--green-new-40) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-feedback-warning: color-mix(in oklab, var(--yellow-new-60) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-invert: color-mix(in oklab, var(--neutral-71) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-link: color-mix(in oklab, var(--blue-new-42) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-muted: color-mix(in oklab, var(--neutral-33) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-overlay-dark: color-mix(in oklab, var(--neutral-71) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-overlay-light: color-mix(in oklab, var(--neutral-8) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-status-dnd: color-mix(in oklab, var(--red-new-45) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-status-idle: color-mix(in oklab, var(--yellow-new-22) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-status-offline: color-mix(in oklab, var(--neutral-27) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-status-online: color-mix(in oklab, var(--green-new-40) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-strong: color-mix(in oklab, var(--neutral-8) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-subtle: color-mix(in oklab, var(--neutral-27) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--textbox-markdown-syntax: color-mix(in oklab, var(--plum-9) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--thread-channel-spine: color-mix(in oklab, var(--plum-13) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--user-profile-activity-toolbar-background: color-mix(in oklab, var(--neutral-83) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--user-profile-background-hover: color-mix(in oklab, hsl(var(--opacity-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--user-profile-border: color-mix(in oklab, hsl(var(--opacity-20-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--user-profile-note-background-focus: color-mix(in oklab, var(--neutral-100) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--user-profile-overlay-background: color-mix(in oklab, var(--neutral-83) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--user-profile-overlay-background-hover: color-mix(in oklab, hsl(var(--opacity-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--user-profile-toolbar-background: color-mix(in oklab, var(--neutral-83) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--user-profile-toolbar-border: color-mix(
in oklab,
hsl(var(--opacity-16-hsl)/0.1607843137254902) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1607843137254902) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
}
}
.theme-darker {
--app-frame-background: var(--neutral-97);
--app-frame-border: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--app-message-embed-secondary-text: hsl(var(--white-hsl)/0.7);
--background-accent: var(--plum-15);
--background-base-low: var(--neutral-82);
--background-base-lower: var(--neutral-86);
--background-base-lowest: var(--neutral-92);
--background-brand: var(--blurple-50);
--background-code: hsl(var(--opacity-blurple-8-hsl)/0.0784313725490196);
--background-code-addition: hsl(var(--opacity-green-12-hsl)/0.12156862745098039);
--background-code-deletion: hsl(var(--opacity-red-12-hsl)/0.12156862745098039);
--background-feedback-critical: hsl(var(--opacity-red-8-hsl)/0.0784313725490196);
--background-feedback-info: hsl(var(--opacity-blue-8-hsl)/0.0784313725490196);
--background-feedback-positive: hsl(var(--opacity-green-8-hsl)/0.0784313725490196);
--background-feedback-warning: hsl(var(--opacity-yellow-8-hsl)/0.0784313725490196);
--background-mod-muted: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--background-mod-normal: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--background-mod-strong: hsl(var(--opacity-20-hsl)/0.2);
--background-mod-subtle: hsl(var(--opacity-8-hsl)/0.0784313725490196);
--background-scrim: hsl(var(--opacity-black-72-hsl)/0.7215686274509804);
--background-scrim-lightbox: hsl(var(--opacity-black-92-hsl)/0.9215686274509803);
--background-secondary-alt: var(--plum-15);
--background-surface-high: var(--neutral-79);
--background-surface-higher: var(--neutral-76);
--background-surface-highest: var(--neutral-73);
--background-tile-gradient-pink-end: hsl(var(--illo-pink-70-hsl)/0.3);
--background-tile-gradient-pink-start: hsl(var(--illo-pink-50-hsl)/0.3);
--badge-background-brand: var(--blurple-50);
--badge-expressive-background-default: var(--neutral-1);
--badge-expressive-text-default: var(--neutral-71);
--badge-text-brand: var(--neutral-1);
--bg-surface-overlay-tmp: var(--neutral-73);
--bg-surface-raised: var(--plum-18);
--border-feedback-critical: hsl(var(--opacity-red-20-hsl)/0.2);
--border-focus: var(--blue-new-30);
--border-muted: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--border-normal: hsl(var(--opacity-20-hsl)/0.2);
--border-strong: hsl(var(--opacity-44-hsl)/0.4392156862745098);
--border-subtle: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--button-danger-background-disabled: var(--red-new-50);
--button-outline-brand-background-hover: var(--brand-500);
--button-outline-brand-border-active: var(--brand-560);
--button-outline-primary-text: var(--white);
--card-background-default: var(--neutral-79);
--card-primary-pressed-bg: var(--plum-19);
--card-secondary-bg: hsl(var(--opacity-8-hsl)/0.0784313725490196);
--card-secondary-pressed-bg: var(--plum-21);
--channel-icon: var(--neutral-35);
--channel-text-area-placeholder: var(--plum-11);
--channels-default: var(--neutral-35);
--channeltextarea-background: var(--plum-15);
--chat-background: var(--plum-16);
--chat-background-default: var(--neutral-80);
--chat-border: var(--plum-20);
--chat-text-muted: var(--neutral-35);
--checkbox-background-active: var(--blurple-65);
--checkbox-background-default: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--checkbox-background-hover: hsl(var(--opacity-black-8-hsl)/0.0784313725490196);
--checkbox-background-selected-default: var(--blurple-50);
--checkbox-background-selected-hover: var(--blurple-60);
--checkbox-border-active: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--checkbox-border-default: var(--neutral-41);
--checkbox-border-hover: hsl(var(--opacity-80-hsl)/0.8);
--checkbox-border-selected-default: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--checkbox-border-selected-hover: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--checkbox-icon-active: var(--neutral-1);
--chip-blurple-dark-background: var(--blurple-70);
--chip-blurple-dark-text: var(--blurple-1);
--chip-blurple-light-background: var(--blurple-20);
--chip-blurple-light-text: var(--blurple-91);
--chip-blurple-medium-background: var(--blurple-40);
--chip-blurple-medium-text: var(--blurple-100);
--chip-gray-dark-background: var(--neutral-75);
--chip-gray-dark-text: var(--neutral-6);
--chip-gray-light-background: var(--neutral-10);
--chip-gray-light-text: var(--neutral-68);
--chip-gray-medium-background: var(--neutral-40);
--chip-gray-medium-text: var(--neutral-1);
--chip-green-dark-background: var(--green-new-70);
--chip-green-dark-text: var(--green-new-1);
--chip-green-light-background: var(--green-new-20);
--chip-green-light-text: var(--green-new-91);
--chip-green-medium-background: var(--green-new-45);
--chip-green-medium-text: var(--green-new-96);
--chip-orange-dark-background: var(--orange-new-70);
--chip-orange-dark-text: var(--orange-new-1);
--chip-orange-light-background: var(--orange-new-20);
--chip-orange-light-text: var(--orange-new-93);
--chip-orange-medium-background: var(--orange-new-40);
--chip-orange-medium-text: var(--orange-new-100);
--chip-pink-dark-background: var(--illo-pink-60);
--chip-pink-dark-text: var(--neutral-1);
--chip-pink-light-background: var(--illo-pink-20);
--chip-pink-light-text: var(--neutral-73);
--chip-pink-medium-background: var(--illo-pink-40);
--chip-pink-medium-text: var(--neutral-100);
--chip-purple-dark-background: var(--illo-purple-60);
--chip-purple-dark-text: var(--neutral-10);
--chip-purple-light-background: var(--illo-purple-20);
--chip-purple-light-text: var(--neutral-75);
--chip-purple-medium-background: var(--illo-purple-40);
--chip-purple-medium-text: var(--neutral-100);
--chip-red-dark-background: var(--red-new-70);
--chip-red-dark-text: var(--red-new-1);
--chip-red-light-background: var(--red-new-20);
--chip-red-light-text: var(--red-new-95);
--chip-red-medium-background: var(--red-new-45);
--chip-red-medium-text: var(--red-new-100);
--chip-yellow-dark-background: var(--yellow-new-70);
--chip-yellow-dark-text: var(--yellow-new-1);
--chip-yellow-light-background: var(--yellow-new-20);
--chip-yellow-light-text: var(--yellow-new-87);
--chip-yellow-medium-background: var(--yellow-new-45);
--chip-yellow-medium-text: var(--yellow-new-80);
--content-inventory-media-seekbar-container: hsl(var(--plum-6-hsl)/0.24);
--content-inventory-overlay-text-primary: hsl(var(--white-hsl)/0.85);
--content-inventory-overlay-text-secondary: hsl(var(--white-hsl)/0.7);
--context-menu-backdrop-background: hsl(var(--opacity-black-72-hsl)/0.7215686274509804);
--control-brand-foreground: var(--brand-360);
--control-brand-foreground-new: var(--brand-360);
--control-connected-background-active: var(--green-new-65);
--control-connected-background-default: var(--green-new-50);
--control-connected-background-hover: var(--green-new-60);
--control-connected-border-active: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-connected-border-default: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-connected-border-hover: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-connected-icon-active: var(--neutral-1);
--control-connected-icon-default: var(--neutral-1);
--control-connected-icon-hover: var(--neutral-1);
--control-connected-text-active: var(--neutral-1);
--control-connected-text-default: var(--neutral-1);
--control-connected-text-hover: var(--neutral-1);
--control-critical-primary-background-active: var(--red-new-65);
--control-critical-primary-background-default: var(--red-new-50);
--control-critical-primary-background-hover: var(--red-new-60);
--control-critical-primary-border-active: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-critical-primary-border-default: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-critical-primary-border-hover: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-critical-primary-icon-active: var(--neutral-1);
--control-critical-primary-icon-default: var(--neutral-1);
--control-critical-primary-icon-hover: var(--neutral-1);
--control-critical-primary-text-active: var(--neutral-1);
--control-critical-primary-text-default: var(--neutral-1);
--control-critical-primary-text-hover: var(--neutral-1);
--control-critical-secondary-background-active: hsl(var(--opacity-20-hsl)/0.2);
--control-critical-secondary-background-default: hsl(var(--opacity-8-hsl)/0.0784313725490196);
--control-critical-secondary-background-hover: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--control-critical-secondary-border-active: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--control-critical-secondary-border-default: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--control-critical-secondary-border-hover: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--control-critical-secondary-icon-active: var(--red-new-32);
--control-critical-secondary-icon-default: var(--red-new-32);
--control-critical-secondary-icon-hover: var(--red-new-32);
--control-critical-secondary-text-active: var(--red-new-32);
--control-critical-secondary-text-default: var(--red-new-32);
--control-critical-secondary-text-hover: var(--red-new-32);
--control-expressive-background-active: var(--neutral-5);
--control-expressive-background-default: var(--neutral-1);
--control-expressive-background-hover: var(--neutral-1);
--control-expressive-border-active: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--control-expressive-border-default: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--control-expressive-border-hover: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--control-expressive-icon-active: var(--neutral-100);
--control-expressive-icon-default: var(--neutral-100);
--control-expressive-icon-hover: var(--neutral-100);
--control-expressive-text-active: var(--neutral-100);
--control-expressive-text-default: var(--neutral-100);
--control-expressive-text-hover: var(--neutral-100);
--control-icon-only-background-active: hsl(var(--opacity-20-hsl)/0.2);
--control-icon-only-background-hover: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--control-icon-only-border-active: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--control-icon-only-border-hover: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--control-icon-only-icon-active: var(--neutral-2);
--control-icon-only-icon-default: var(--neutral-23);
--control-icon-only-icon-hover: var(--neutral-2);
--control-overlay-primary-background-active: var(--neutral-17);
--control-overlay-primary-background-default: var(--neutral-1);
--control-overlay-primary-background-hover: var(--neutral-9);
--control-overlay-primary-border-active: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--control-overlay-primary-border-default: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--control-overlay-primary-border-hover: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--control-overlay-primary-icon-active: var(--neutral-100);
--control-overlay-primary-icon-default: var(--neutral-100);
--control-overlay-primary-icon-hover: var(--neutral-100);
--control-overlay-primary-text-active: var(--neutral-100);
--control-overlay-primary-text-default: var(--neutral-100);
--control-overlay-primary-text-hover: var(--neutral-100);
--control-overlay-secondary-background-active: hsl(var(--opacity-black-48-hsl)/0.47843137254901963);
--control-overlay-secondary-background-default: hsl(var(--opacity-black-52-hsl)/0.5215686274509804);
--control-overlay-secondary-background-hover: hsl(var(--opacity-black-64-hsl)/0.6392156862745098);
--control-overlay-secondary-border-active: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--control-overlay-secondary-border-default: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--control-overlay-secondary-border-hover: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--control-overlay-secondary-icon-active: var(--neutral-1);
--control-overlay-secondary-icon-default: var(--neutral-1);
--control-overlay-secondary-icon-hover: var(--neutral-1);
--control-overlay-secondary-text-active: var(--neutral-1);
--control-overlay-secondary-text-default: var(--neutral-1);
--control-overlay-secondary-text-hover: var(--neutral-1);
--control-primary-background-active: var(--blurple-65);
--control-primary-background-default: var(--blurple-50);
--control-primary-background-hover: var(--blurple-60);
--control-primary-border-active: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-primary-border-default: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-primary-border-hover: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--control-primary-icon-active: var(--neutral-1);
--control-primary-icon-default: var(--neutral-1);
--control-primary-icon-hover: var(--neutral-1);
--control-primary-text-active: var(--neutral-1);
--control-primary-text-default: var(--neutral-1);
--control-primary-text-hover: var(--neutral-1);
--control-secondary-background-active: hsl(var(--opacity-20-hsl)/0.2);
--control-secondary-background-default: hsl(var(--opacity-8-hsl)/0.0784313725490196);
--control-secondary-background-hover: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--control-secondary-border-active: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--control-secondary-border-default: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--control-secondary-border-hover: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--control-secondary-icon-active: var(--neutral-2);
--control-secondary-icon-default: var(--neutral-2);
--control-secondary-icon-hover: var(--neutral-2);
--control-secondary-text-active: var(--neutral-2);
--control-secondary-text-default: var(--neutral-2);
--control-secondary-text-hover: var(--neutral-2);
--creator-revenue-icon-gradient-end: var(--teal-430);
--creator-revenue-icon-gradient-start: var(--teal-360);
--creator-revenue-info-box-background: hsl(var(--teal-430-hsl)/0.1);
--creator-revenue-info-box-border: var(--teal-400);
--creator-revenue-locked-channel-icon: var(--teal-345);
--creator-revenue-progress-bar: var(--teal-400);
--embed-background: var(--plum-18);
--embed-background-alternate: var(--plum-18);
--experimental-avatar-embed-bg: hsl(var(--opacity-black-52-hsl)/0.5215686274509804);
--expressive-gradient-blue-end: hsl(var(--illo-blue-60-hsl)/0.3);
--expressive-gradient-blue-start: hsl(var(--illo-blue-40-hsl)/0.3);
--expressive-gradient-green-end: hsl(var(--illo-green-70-hsl)/0.3);
--expressive-gradient-green-start: hsl(var(--illo-green-50-hsl)/0.3);
--expressive-gradient-nitro-green-end: hsl(var(--illo-nitro-blue-hsl)/0.4);
--expressive-gradient-nitro-green-start: hsl(var(--illo-green-50-hsl)/0.4);
--expressive-gradient-nitro-pink-end: hsl(var(--illo-nitro-blue-hsl)/0.4);
--expressive-gradient-nitro-pink-start: hsl(var(--illo-pink-60-hsl)/0.4);
--expressive-gradient-pink-end: hsl(var(--illo-pink-70-hsl)/0.3);
--expressive-gradient-pink-start: hsl(var(--illo-pink-50-hsl)/0.3);
--expressive-gradient-purple-end: hsl(var(--illo-purple-60-hsl)/0.3);
--expressive-gradient-purple-start: hsl(var(--illo-purple-40-hsl)/0.3);
--expressive-gradient-tenure-badge-bronze-end: hsl(var(--illo-orange-70-hsl)/0.3);
--expressive-gradient-tenure-badge-bronze-start: hsl(var(--illo-orange-30-hsl)/0.3);
--expressive-gradient-tenure-badge-diamond-end: hsl(var(--illo-purple-50-hsl)/0.3);
--expressive-gradient-tenure-badge-diamond-start: hsl(var(--illo-purple-40-hsl)/0.3);
--expressive-gradient-tenure-badge-emerald-end: hsl(var(--illo-green-60-hsl)/0.3);
--expressive-gradient-tenure-badge-emerald-start: hsl(var(--illo-green-40-hsl)/0.3);
--expressive-gradient-tenure-badge-gold-end: hsl(var(--yellow-new-41-hsl)/0.3);
--expressive-gradient-tenure-badge-gold-start: hsl(var(--illo-yellow-50-hsl)/0.3);
--expressive-gradient-tenure-badge-opal-end: hsl(var(--blue-new-50-hsl)/0.3);
--expressive-gradient-tenure-badge-opal-start: hsl(var(--teal-new-30-hsl)/0.3);
--expressive-gradient-tenure-badge-platinum-end: hsl(var(--teal-new-60-hsl)/0.3);
--expressive-gradient-tenure-badge-platinum-start: hsl(var(--teal-new-20-hsl)/0.3);
--expressive-gradient-tenure-badge-ruby-end: hsl(var(--red-new-80-hsl)/0.3);
--expressive-gradient-tenure-badge-ruby-start: hsl(var(--red-new-44-hsl)/0.3);
--expressive-gradient-tenure-badge-silver-end: hsl(var(--neutral-58-hsl)/0.3);
--expressive-gradient-tenure-badge-silver-start: hsl(var(--neutral-12-hsl)/0.3);
--gradient-progress-pill-background: var(--neutral-56);
--home-background: var(--plum-18);
--icon-default: var(--neutral-5);
--icon-feedback-critical: var(--red-new-32);
--icon-feedback-info: var(--blue-new-35);
--icon-feedback-positive: var(--green-new-35);
--icon-feedback-warning: var(--yellow-new-56);
--icon-invert: var(--neutral-71);
--icon-link: var(--blue-new-37);
--icon-muted: var(--neutral-29);
--icon-status-dnd: var(--red-new-45);
--icon-status-idle: var(--yellow-new-22);
--icon-status-offline: var(--neutral-27);
--icon-status-online: var(--green-new-40);
--icon-strong: var(--neutral-2);
--icon-subtle: var(--neutral-23);
--icon-transparent: hsl(var(--transparent-hsl)/0);
--input-background-default: hsl(var(--opacity-black-12-hsl)/0.12156862745098039);
--input-background-error-default: hsl(var(--opacity-red-4-hsl)/0.0392156862745098);
--input-border-active: var(--blurple-50);
--input-border-default: hsl(var(--opacity-20-hsl)/0.2);
--input-border-error-default: var(--red-new-32);
--input-border-hover: hsl(var(--opacity-20-hsl)/0.2);
--input-border-readonly: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--input-icon-default: var(--neutral-23);
--input-placeholder-text-default: var(--neutral-37);
--input-text-default: var(--neutral-5);
--input-text-error-default: var(--neutral-5);
--interactive-background-active: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--interactive-background-hover: hsl(var(--opacity-8-hsl)/0.0784313725490196);
--interactive-background-selected: hsl(var(--opacity-20-hsl)/0.2);
--interactive-icon-active: var(--neutral-2);
--interactive-icon-default: var(--neutral-23);
--interactive-icon-hover: var(--neutral-2);
--interactive-muted: var(--plum-13);
--interactive-text-active: var(--neutral-2);
--interactive-text-default: var(--neutral-23);
--interactive-text-hover: var(--neutral-2);
--logo-primary: var(--white);
--mention-background: hsl(var(--opacity-blurple-24-hsl)/0.23921568627450981);
--mention-foreground: var(--blurple-19);
--message-automod-background-default: hsl(var(--red-345-hsl)/0.08);
--message-automod-background-hover: hsl(var(--red-400-hsl)/0.1);
--message-background-hover: hsl(var(--opacity-8-hsl)/0.0784313725490196);
--message-highlight-background-default: hsl(var(--opacity-blurple-16-hsl)/0.1607843137254902);
--message-highlight-background-hover: hsl(var(--opacity-blurple-12-hsl)/0.12156862745098039);
--message-mentioned-background-default: hsl(var(--opacity-yellow-8-hsl)/0.0784313725490196);
--message-mentioned-background-hover: hsl(var(--opacity-yellow-4-hsl)/0.0392156862745098);
--message-reacted-background-default: hsl(var(--opacity-blurple-24-hsl)/0.23921568627450981);
--message-reacted-text-default: var(--blurple-14);
--mobile-background-scrim-opaque: var(--black);
--mobile-expression-picker-background-default: var(--neutral-86);
--mobile-text-heading-primary: var(--neutral-2);
--modal-background: var(--neutral-79);
--modal-footer-background: var(--neutral-79);
--navigator-header-tint: var(--white);
--notice-background-critical: var(--red-new-86);
--notice-background-info: var(--blue-new-86);
--notice-background-positive: var(--green-new-88);
--notice-background-warning: var(--yellow-new-92);
--notice-text-critical: var(--red-new-9);
--notice-text-info: var(--blue-new-13);
--notice-text-positive: var(--green-new-14);
--notice-text-warning: var(--yellow-new-28);
--overlay-backdrop-lightbox: hsl(var(--opacity-black-92-hsl)/0.9215686274509803);
--panel-bg: var(--neutral-82);
--polls-normal-image-background: var(--primary-660);
--polls-victor-fill: hsl(var(--green-360-hsl)/0.2);
--polls-voted-fill: hsl(var(--brand-500-hsl)/0.2);
--premium-nitro-pink-text: var(--pink-51);
--profile-gradient-note-background: hsl(var(--black-hsl)/0.3);
--profile-gradient-overlay: hsl(var(--black-hsl)/0.6);
--profile-gradient-overlay-synced-with-user-theme: hsl(var(--black-hsl)/0.8);
--profile-gradient-role-pill-background: hsl(var(--primary-660-hsl)/0.5);
--profile-gradient-role-pill-border: hsl(var(--white-hsl)/0.2);
--profile-gradient-section-box: hsl(var(--black-hsl)/0.45);
--radio-background-active: var(--blurple-65);
--radio-background-default: hsl(var(--opacity-black-8-hsl)/0.0784313725490196);
--radio-background-hover: hsl(var(--opacity-black-8-hsl)/0.0784313725490196);
--radio-background-selected-default: var(--blurple-50);
--radio-background-selected-hover: var(--blurple-60);
--radio-border-active: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--radio-border-default: hsl(var(--opacity-64-hsl)/0.6392156862745098);
--radio-border-hover: hsl(var(--opacity-80-hsl)/0.8);
--radio-border-selected-default: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--radio-border-selected-hover: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--radio-foreground-active: var(--blurple-50);
--radio-foreground-default: hsl(var(--opacity-black-8-hsl)/0.0784313725490196);
--radio-foreground-hover: hsl(var(--opacity-black-8-hsl)/0.0784313725490196);
--radio-thumb-background-active: var(--neutral-1);
--redesign-button-active-background: var(--green-430);
--redesign-button-active-pressed-background: var(--green-460);
--redesign-button-active-text: var(--white);
--redesign-button-danger-background: var(--red-430);
--redesign-button-destructive-background: var(--red-430);
--redesign-button-destructive-pressed-background: var(--red-460);
--redesign-button-destructive-text: var(--white);
--redesign-button-overlay-alpha-background: hsl(var(--black-hsl)/0.54);
--redesign-button-overlay-alpha-pressed-background: hsl(var(--black-hsl)/0.64);
--redesign-button-overlay-alpha-text: var(--white);
--redesign-button-positive-background: var(--green-430);
--redesign-button-premium-primary-pink-for-gradient: var(--premium-tier-2-pink-for-gradients);
--redesign-button-premium-primary-pressed-background: hsl(var(--black-hsl)/0.1);
--redesign-button-premium-primary-purple-for-gradient: var(--premium-tier-2-purple-for-gradients);
--redesign-button-premium-primary-purple-for-gradient-2: var(--premium-tier-2-purple-for-gradients-2);
--redesign-button-primary-alt-border: var(--blurple-36);
--redesign-button-primary-background: var(--brand-500);
--redesign-button-primary-overlay-background: var(--white);
--redesign-button-primary-overlay-pressed-background: var(--plum-4);
--redesign-button-primary-overlay-text: var(--plum-25);
--redesign-button-primary-pressed-background: var(--brand-560);
--redesign-button-primary-text: var(--white);
--redesign-button-secondary-background: var(--plum-15);
--redesign-button-secondary-border: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--redesign-button-secondary-overlay-background: hsl(var(--black-hsl)/0.54);
--redesign-button-secondary-overlay-pressed-background: hsl(var(--black-hsl)/0.64);
--redesign-button-secondary-overlay-text: var(--white);
--redesign-button-secondary-pressed-background: var(--plum-13);
--redesign-button-secondary-pressed-border: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--redesign-button-secondary-text: var(--neutral-5);
--redesign-button-selected-background: hsl(var(--brand-500-hsl)/0.24);
--redesign-button-selected-pressed-background: hsl(var(--brand-500-hsl)/0.28);
--redesign-button-selected-text: var(--blurple-50);
--redesign-button-tertiary-background: hsl(var(--plum-11-hsl)/0.12);
--redesign-button-tertiary-pressed-background: hsl(var(--plum-11-hsl)/0.2);
--redesign-button-tertiary-pressed-text: var(--plum-5);
--redesign-button-tertiary-text: var(--neutral-5);
--scrollbar-auto-scrollbar-color-thumb: var(--neutral-45);
--scrollbar-auto-scrollbar-color-track: var(--neutral-94);
--scrollbar-auto-thumb: var(--neutral-43);
--scrollbar-auto-track: hsl(var(--transparent-hsl)/0);
--scrollbar-thin-thumb: var(--neutral-45);
--scrollbar-thin-track: hsl(var(--black-hsl)/0);
--spine-default: hsl(var(--opacity-44-hsl)/0.4392156862745098);
--spoiler-hidden-background: var(--neutral-43);
--spoiler-hidden-background-hover: var(--neutral-34);
--spoiler-revealed-background: hsl(var(--plum-11-hsl)/0.16);
--status-danger: var(--red-400);
--status-online: var(--green-360);
--status-positive: var(--green-360);
--status-positive-background: var(--green-430);
--status-positive-text: var(--white);
--status-speaking: var(--green-360);
--status-warning: var(--yellow-300);
--status-warning-background: var(--yellow-300);
--status-warning-text: var(--black);
--switch-background-active: var(--blurple-65);
--switch-background-default: hsl(var(--opacity-black-12-hsl)/0.12156862745098039);
--switch-background-hover: hsl(var(--opacity-black-12-hsl)/0.12156862745098039);
--switch-background-selected-default: var(--blurple-50);
--switch-background-selected-hover: var(--blurple-60);
--switch-border-default: hsl(var(--opacity-20-hsl)/0.2);
--switch-border-hover: hsl(var(--opacity-40-hsl)/0.4);
--switch-border-selected-default: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--switch-border-selected-hover: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--switch-thumb-background-default: var(--neutral-1);
--switch-thumb-background-selected-default: var(--neutral-1);
--switch-thumb-icon-active: var(--blurple-50);
--switch-thumb-icon-default: var(--neutral-71);
--text-brand: var(--blurple-36);
--text-code: var(--blue-new-27);
--text-code-addition: var(--green-new-26);
--text-code-builtin: var(--orange-new-25);
--text-code-bullet: var(--yellow-new-52);
--text-code-comment: var(--neutral-33);
--text-code-deletion: var(--red-new-23);
--text-code-keyword: var(--red-new-24);
--text-code-section: var(--blue-new-27);
--text-code-string: var(--teal-new-28);
--text-code-tag: var(--green-new-23);
--text-code-title: var(--blurple-21);
--text-code-variable: var(--blue-new-22);
--text-default: var(--neutral-5);
--text-feedback-critical: var(--red-new-32);
--text-feedback-info: var(--blue-new-35);
--text-feedback-positive: var(--green-new-35);
--text-feedback-warning: var(--yellow-new-56);
--text-invert: var(--neutral-71);
--text-link: var(--blue-new-37);
--text-muted: var(--neutral-29);
--text-overlay-dark: var(--neutral-71);
--text-overlay-light: var(--neutral-2);
--text-status-dnd: var(--red-new-45);
--text-status-idle: var(--yellow-new-22);
--text-status-offline: var(--neutral-27);
--text-status-online: var(--green-new-40);
--text-strong: var(--neutral-2);
--text-subtle: var(--neutral-23);
--textbox-markdown-syntax: var(--plum-9);
--thread-channel-spine: var(--plum-13);
--user-profile-activity-toolbar-background: var(--neutral-73);
--user-profile-background-hover: hsl(var(--opacity-8-hsl)/0.0784313725490196);
--user-profile-border: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--user-profile-note-background-focus: var(--neutral-92);
--user-profile-overlay-background: var(--neutral-73);
--user-profile-overlay-background-hover: hsl(var(--opacity-8-hsl)/0.0784313725490196);
--user-profile-toolbar-background: var(--neutral-73);
--user-profile-toolbar-border: hsl(var(--opacity-4-hsl)/0.0392156862745098);
}
@supports (color: color-mix(in lch, red, blue)) {
.theme-darker {
--app-frame-background: color-mix(in oklab, var(--neutral-97) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--app-frame-border: color-mix(
in oklab,
hsl(var(--opacity-12-hsl)/0.12156862745098039) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--app-message-embed-secondary-text: color-mix(in oklab, hsl(var(--white-hsl)/0.7) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.7) var(--custom-theme-text-color-amount, 0%));
--background-accent: color-mix(in oklab, var(--plum-15) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--background-base-low: color-mix(in oklab, var(--neutral-82) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--background-base-lower: color-mix(in oklab, var(--neutral-86) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--background-base-lowest: color-mix(in oklab, var(--neutral-92) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--background-code: color-mix(in oklab, hsl(var(--opacity-blurple-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--background-code-addition: color-mix(in oklab, hsl(var(--opacity-green-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--background-code-deletion: color-mix(in oklab, hsl(var(--opacity-red-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--background-feedback-critical: color-mix(in oklab, hsl(var(--opacity-red-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--background-feedback-info: color-mix(in oklab, hsl(var(--opacity-blue-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--background-feedback-positive: color-mix(in oklab, hsl(var(--opacity-green-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--background-feedback-warning: color-mix(in oklab, hsl(var(--opacity-yellow-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--background-scrim: color-mix(in oklab, hsl(var(--opacity-black-72-hsl)/0.7215686274509804) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.7215686274509804) var(--custom-theme-base-color-amount, 0%));
--background-scrim-lightbox: color-mix(in oklab, hsl(var(--opacity-black-92-hsl)/0.9215686274509803) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.9215686274509803) var(--custom-theme-base-color-amount, 0%));
--background-secondary-alt: color-mix(in oklab, var(--plum-15) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--background-surface-high: color-mix(in oklab, var(--neutral-79) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--background-surface-higher: color-mix(in oklab, var(--neutral-76) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--background-surface-highest: color-mix(in oklab, var(--neutral-73) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--background-tile-gradient-pink-end: color-mix(in oklab, hsl(var(--illo-pink-70-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--background-tile-gradient-pink-start: color-mix(in oklab, hsl(var(--illo-pink-50-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--bg-surface-overlay-tmp: color-mix(in oklab, var(--neutral-73) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--bg-surface-raised: color-mix(in oklab, var(--plum-18) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--border-feedback-critical: color-mix(in oklab, hsl(var(--opacity-red-20-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--border-focus: color-mix(in oklab, var(--blue-new-30) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--border-muted: color-mix(
in oklab,
hsl(var(--opacity-4-hsl)/0.0392156862745098) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0392156862745098) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--border-normal: color-mix(in oklab, hsl(var(--opacity-20-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--border-strong: color-mix(
in oklab,
hsl(var(--opacity-44-hsl)/0.4392156862745098) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.4392156862745098) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--border-subtle: color-mix(
in oklab,
hsl(var(--opacity-12-hsl)/0.12156862745098039) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--card-background-default: color-mix(in oklab, var(--neutral-79) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--card-primary-pressed-bg: color-mix(in oklab, var(--plum-19) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--card-secondary-bg: color-mix(in oklab, hsl(var(--opacity-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--card-secondary-pressed-bg: color-mix(in oklab, var(--plum-21) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--channel-icon: color-mix(in oklab, var(--neutral-35) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--channel-text-area-placeholder: color-mix(in oklab, var(--plum-11) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--channels-default: color-mix(in oklab, var(--neutral-35) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--channeltextarea-background: color-mix(in oklab, var(--plum-15) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--chat-background: color-mix(in oklab, var(--plum-16) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--chat-background-default: color-mix(in oklab, var(--neutral-80) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--chat-border: color-mix(in oklab, var(--plum-20) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--chat-text-muted: color-mix(in oklab, var(--neutral-35) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--content-inventory-media-seekbar-container: color-mix(in oklab, hsl(var(--plum-6-hsl)/0.24) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.24) var(--custom-theme-base-color-amount, 0%));
--content-inventory-overlay-text-primary: color-mix(in oklab, hsl(var(--white-hsl)/0.85) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.85) var(--custom-theme-text-color-amount, 0%));
--content-inventory-overlay-text-secondary: color-mix(in oklab, hsl(var(--white-hsl)/0.7) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.7) var(--custom-theme-text-color-amount, 0%));
--context-menu-backdrop-background: color-mix(in oklab, hsl(var(--opacity-black-72-hsl)/0.7215686274509804) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.7215686274509804) var(--custom-theme-base-color-amount, 0%));
--control-brand-foreground: color-mix(in oklab, var(--brand-360) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--control-brand-foreground-new: color-mix(in oklab, var(--brand-360) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--creator-revenue-icon-gradient-end: color-mix(in oklab, var(--teal-430) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--creator-revenue-icon-gradient-start: color-mix(in oklab, var(--teal-360) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--creator-revenue-info-box-background: color-mix(in oklab, hsl(var(--teal-430-hsl)/0.1) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1) var(--custom-theme-base-color-amount, 0%));
--creator-revenue-info-box-border: color-mix(in oklab, var(--teal-400) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--creator-revenue-locked-channel-icon: color-mix(in oklab, var(--teal-345) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--creator-revenue-progress-bar: color-mix(in oklab, var(--teal-400) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--embed-background: color-mix(in oklab, var(--plum-18) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--embed-background-alternate: color-mix(in oklab, var(--plum-18) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--experimental-avatar-embed-bg: color-mix(in oklab, hsl(var(--opacity-black-52-hsl)/0.5215686274509804) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.5215686274509804) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-blue-end: color-mix(in oklab, hsl(var(--illo-blue-60-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-blue-start: color-mix(in oklab, hsl(var(--illo-blue-40-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-green-end: color-mix(in oklab, hsl(var(--illo-green-70-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-green-start: color-mix(in oklab, hsl(var(--illo-green-50-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-nitro-green-end: color-mix(in oklab, hsl(var(--illo-nitro-blue-hsl)/0.4) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.4) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-nitro-green-start: color-mix(in oklab, hsl(var(--illo-green-50-hsl)/0.4) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.4) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-nitro-pink-end: color-mix(in oklab, hsl(var(--illo-nitro-blue-hsl)/0.4) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.4) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-nitro-pink-start: color-mix(in oklab, hsl(var(--illo-pink-60-hsl)/0.4) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.4) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-pink-end: color-mix(in oklab, hsl(var(--illo-pink-70-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-pink-start: color-mix(in oklab, hsl(var(--illo-pink-50-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-purple-end: color-mix(in oklab, hsl(var(--illo-purple-60-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-purple-start: color-mix(in oklab, hsl(var(--illo-purple-40-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-bronze-end: color-mix(in oklab, hsl(var(--illo-orange-70-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-bronze-start: color-mix(in oklab, hsl(var(--illo-orange-30-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-diamond-end: color-mix(in oklab, hsl(var(--illo-purple-50-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-diamond-start: color-mix(in oklab, hsl(var(--illo-purple-40-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-emerald-end: color-mix(in oklab, hsl(var(--illo-green-60-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-emerald-start: color-mix(in oklab, hsl(var(--illo-green-40-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-gold-end: color-mix(in oklab, hsl(var(--yellow-new-41-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-gold-start: color-mix(in oklab, hsl(var(--illo-yellow-50-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-opal-end: color-mix(in oklab, hsl(var(--blue-new-50-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-opal-start: color-mix(in oklab, hsl(var(--teal-new-30-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-platinum-end: color-mix(in oklab, hsl(var(--teal-new-60-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-platinum-start: color-mix(in oklab, hsl(var(--teal-new-20-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-ruby-end: color-mix(in oklab, hsl(var(--red-new-80-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-ruby-start: color-mix(in oklab, hsl(var(--red-new-44-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-silver-end: color-mix(in oklab, hsl(var(--neutral-58-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--expressive-gradient-tenure-badge-silver-start: color-mix(in oklab, hsl(var(--neutral-12-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--gradient-progress-pill-background: color-mix(in oklab, var(--neutral-56) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--home-background: color-mix(in oklab, var(--plum-18) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--icon-default: color-mix(in oklab, var(--neutral-5) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-feedback-critical: color-mix(in oklab, var(--red-new-32) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-feedback-info: color-mix(in oklab, var(--blue-new-35) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-feedback-positive: color-mix(in oklab, var(--green-new-35) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-feedback-warning: color-mix(in oklab, var(--yellow-new-56) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-invert: color-mix(in oklab, var(--neutral-71) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-link: color-mix(in oklab, var(--blue-new-37) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-muted: color-mix(in oklab, var(--neutral-29) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-status-dnd: color-mix(in oklab, var(--red-new-45) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-status-idle: color-mix(in oklab, var(--yellow-new-22) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-status-offline: color-mix(in oklab, var(--neutral-27) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-status-online: color-mix(in oklab, var(--green-new-40) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-strong: color-mix(in oklab, var(--neutral-2) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-subtle: color-mix(in oklab, var(--neutral-23) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-transparent: color-mix(in oklab, hsl(var(--transparent-hsl)/0) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0) var(--custom-theme-text-color-amount, 0%));
--input-background-default: color-mix(in oklab, hsl(var(--opacity-black-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--input-background-error-default: color-mix(in oklab, hsl(var(--opacity-red-4-hsl)/0.0392156862745098) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0392156862745098) var(--custom-theme-base-color-amount, 0%));
--input-border-active: color-mix(in oklab, var(--blurple-50) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--input-border-default: color-mix(in oklab, hsl(var(--opacity-20-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--input-border-error-default: color-mix(in oklab, var(--red-new-32) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--input-border-hover: color-mix(in oklab, hsl(var(--opacity-20-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--input-border-readonly: color-mix(
in oklab,
hsl(var(--opacity-white-8-hsl)/0.0784313725490196) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--input-icon-default: color-mix(in oklab, var(--neutral-23) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--input-placeholder-text-default: color-mix(in oklab, var(--neutral-37) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--input-text-default: color-mix(in oklab, var(--neutral-5) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--input-text-error-default: color-mix(in oklab, var(--neutral-5) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-background-active: color-mix(in oklab, hsl(var(--opacity-16-hsl)/0.1607843137254902) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1607843137254902) var(--custom-theme-base-color-amount, 0%));
--interactive-background-hover: color-mix(in oklab, hsl(var(--opacity-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--interactive-background-selected: color-mix(in oklab, hsl(var(--opacity-20-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-base-color-amount, 0%));
--interactive-icon-active: color-mix(in oklab, var(--neutral-2) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-icon-default: color-mix(in oklab, var(--neutral-23) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-icon-hover: color-mix(in oklab, var(--neutral-2) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-muted: color-mix(in oklab, var(--plum-13) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-text-active: color-mix(in oklab, var(--neutral-2) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-text-default: color-mix(in oklab, var(--neutral-23) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-text-hover: color-mix(in oklab, var(--neutral-2) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--logo-primary: color-mix(in oklab, var(--white) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--mention-background: color-mix(in oklab, hsl(var(--opacity-blurple-24-hsl)/0.23921568627450981) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.23921568627450981) var(--custom-theme-base-color-amount, 0%));
--mention-foreground: color-mix(in oklab, var(--blurple-19) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--message-automod-background-default: color-mix(in oklab, hsl(var(--red-345-hsl)/0.08) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.08) var(--custom-theme-base-color-amount, 0%));
--message-automod-background-hover: color-mix(in oklab, hsl(var(--red-400-hsl)/0.1) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1) var(--custom-theme-base-color-amount, 0%));
--message-background-hover: color-mix(in oklab, hsl(var(--opacity-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--message-highlight-background-default: color-mix(in oklab, hsl(var(--opacity-blurple-16-hsl)/0.1607843137254902) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1607843137254902) var(--custom-theme-base-color-amount, 0%));
--message-highlight-background-hover: color-mix(in oklab, hsl(var(--opacity-blurple-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--message-mentioned-background-default: color-mix(in oklab, hsl(var(--opacity-yellow-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--message-mentioned-background-hover: color-mix(in oklab, hsl(var(--opacity-yellow-4-hsl)/0.0392156862745098) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0392156862745098) var(--custom-theme-base-color-amount, 0%));
--message-reacted-background-default: color-mix(in oklab, hsl(var(--opacity-blurple-24-hsl)/0.23921568627450981) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.23921568627450981) var(--custom-theme-base-color-amount, 0%));
--message-reacted-text-default: color-mix(in oklab, var(--blurple-14) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--mobile-background-scrim-opaque: color-mix(in oklab, var(--black) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--mobile-expression-picker-background-default: color-mix(in oklab, var(--neutral-86) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--mobile-text-heading-primary: color-mix(in oklab, var(--neutral-2) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--modal-background: color-mix(in oklab, var(--neutral-79) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--modal-footer-background: color-mix(in oklab, var(--neutral-79) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--navigator-header-tint: color-mix(in oklab, var(--white) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--overlay-backdrop-lightbox: color-mix(in oklab, hsl(var(--opacity-black-92-hsl)/0.9215686274509803) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.9215686274509803) var(--custom-theme-base-color-amount, 0%));
--panel-bg: color-mix(in oklab, var(--neutral-82) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--polls-normal-image-background: color-mix(in oklab, var(--primary-660) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--polls-victor-fill: color-mix(in oklab, hsl(var(--green-360-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-base-color-amount, 0%));
--polls-voted-fill: color-mix(in oklab, hsl(var(--brand-500-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-base-color-amount, 0%));
--premium-nitro-pink-text: color-mix(in oklab, var(--pink-51) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--profile-gradient-note-background: color-mix(in oklab, hsl(var(--black-hsl)/0.3) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.3) var(--custom-theme-base-color-amount, 0%));
--profile-gradient-overlay: color-mix(in oklab, hsl(var(--black-hsl)/0.6) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.6) var(--custom-theme-base-color-amount, 0%));
--profile-gradient-overlay-synced-with-user-theme: color-mix(in oklab, hsl(var(--black-hsl)/0.8) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.8) var(--custom-theme-base-color-amount, 0%));
--profile-gradient-role-pill-background: color-mix(in oklab, hsl(var(--primary-660-hsl)/0.5) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.5) var(--custom-theme-base-color-amount, 0%));
--profile-gradient-role-pill-border: color-mix(in oklab, hsl(var(--white-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--profile-gradient-section-box: color-mix(in oklab, hsl(var(--black-hsl)/0.45) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.45) var(--custom-theme-base-color-amount, 0%));
--redesign-button-active-background: color-mix(in oklab, var(--green-430) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-active-pressed-background: color-mix(in oklab, var(--green-460) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-active-text: color-mix(in oklab, var(--white) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-danger-background: color-mix(in oklab, var(--red-430) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-destructive-background: color-mix(in oklab, var(--red-430) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-destructive-pressed-background: color-mix(in oklab, var(--red-460) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-destructive-text: color-mix(in oklab, var(--white) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-overlay-alpha-background: color-mix(in oklab, hsl(var(--black-hsl)/0.54) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.54) var(--custom-theme-base-color-amount, 0%));
--redesign-button-overlay-alpha-pressed-background: color-mix(in oklab, hsl(var(--black-hsl)/0.64) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.64) var(--custom-theme-base-color-amount, 0%));
--redesign-button-overlay-alpha-text: color-mix(in oklab, var(--white) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-positive-background: color-mix(in oklab, var(--green-430) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-premium-primary-pink-for-gradient: color-mix(in oklab, var(--premium-tier-2-pink-for-gradients) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-premium-primary-pressed-background: color-mix(in oklab, hsl(var(--black-hsl)/0.1) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1) var(--custom-theme-base-color-amount, 0%));
--redesign-button-premium-primary-purple-for-gradient: color-mix(in oklab, var(--premium-tier-2-purple-for-gradients) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-premium-primary-purple-for-gradient-2: color-mix(in oklab, var(--premium-tier-2-purple-for-gradients-2) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-primary-alt-border: color-mix(in oklab, var(--blurple-36) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--redesign-button-primary-background: color-mix(in oklab, var(--brand-500) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-primary-overlay-background: color-mix(in oklab, var(--white) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-primary-overlay-pressed-background: color-mix(in oklab, var(--plum-4) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-primary-overlay-text: color-mix(in oklab, var(--plum-25) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-primary-pressed-background: color-mix(in oklab, var(--brand-560) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-primary-text: color-mix(in oklab, var(--white) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-secondary-background: color-mix(in oklab, var(--plum-15) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-secondary-border: color-mix(
in oklab,
hsl(var(--opacity-12-hsl)/0.12156862745098039) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--redesign-button-secondary-overlay-background: color-mix(in oklab, hsl(var(--black-hsl)/0.54) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.54) var(--custom-theme-base-color-amount, 0%));
--redesign-button-secondary-overlay-pressed-background: color-mix(in oklab, hsl(var(--black-hsl)/0.64) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.64) var(--custom-theme-base-color-amount, 0%));
--redesign-button-secondary-overlay-text: color-mix(in oklab, var(--white) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-secondary-pressed-background: color-mix(in oklab, var(--plum-13) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--redesign-button-secondary-pressed-border: color-mix(
in oklab,
hsl(var(--opacity-4-hsl)/0.0392156862745098) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0392156862745098) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--redesign-button-secondary-text: color-mix(in oklab, var(--neutral-5) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-selected-background: color-mix(in oklab, hsl(var(--brand-500-hsl)/0.24) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.24) var(--custom-theme-base-color-amount, 0%));
--redesign-button-selected-pressed-background: color-mix(in oklab, hsl(var(--brand-500-hsl)/0.28) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.28) var(--custom-theme-base-color-amount, 0%));
--redesign-button-selected-text: color-mix(in oklab, var(--blurple-50) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-tertiary-background: color-mix(in oklab, hsl(var(--plum-11-hsl)/0.12) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12) var(--custom-theme-base-color-amount, 0%));
--redesign-button-tertiary-pressed-background: color-mix(in oklab, hsl(var(--plum-11-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-base-color-amount, 0%));
--redesign-button-tertiary-pressed-text: color-mix(in oklab, var(--plum-5) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-tertiary-text: color-mix(in oklab, var(--neutral-5) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--scrollbar-auto-scrollbar-color-thumb: color-mix(in oklab, var(--neutral-45) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--scrollbar-auto-scrollbar-color-track: color-mix(in oklab, var(--neutral-94) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--scrollbar-auto-thumb: color-mix(in oklab, var(--neutral-43) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--scrollbar-auto-track: color-mix(in oklab, hsl(var(--transparent-hsl)/0) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0) var(--custom-theme-base-color-amount, 0%));
--scrollbar-thin-thumb: color-mix(in oklab, var(--neutral-45) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--scrollbar-thin-track: color-mix(in oklab, hsl(var(--black-hsl)/0) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0) var(--custom-theme-base-color-amount, 0%));
--spine-default: color-mix(
in oklab,
hsl(var(--opacity-44-hsl)/0.4392156862745098) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.4392156862745098) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--spoiler-hidden-background: color-mix(in oklab, var(--neutral-43) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--spoiler-hidden-background-hover: color-mix(in oklab, var(--neutral-34) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--spoiler-revealed-background: color-mix(in oklab, hsl(var(--plum-11-hsl)/0.16) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.16) var(--custom-theme-base-color-amount, 0%));
--text-brand: color-mix(in oklab, var(--blurple-36) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code: color-mix(in oklab, var(--blue-new-27) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-addition: color-mix(in oklab, var(--green-new-26) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-builtin: color-mix(in oklab, var(--orange-new-25) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-bullet: color-mix(in oklab, var(--yellow-new-52) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-comment: color-mix(in oklab, var(--neutral-33) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-deletion: color-mix(in oklab, var(--red-new-23) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-keyword: color-mix(in oklab, var(--red-new-24) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-section: color-mix(in oklab, var(--blue-new-27) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-string: color-mix(in oklab, var(--teal-new-28) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-tag: color-mix(in oklab, var(--green-new-23) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-title: color-mix(in oklab, var(--blurple-21) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-variable: color-mix(in oklab, var(--blue-new-22) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-default: color-mix(in oklab, var(--neutral-5) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-feedback-critical: color-mix(in oklab, var(--red-new-32) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-feedback-info: color-mix(in oklab, var(--blue-new-35) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-feedback-positive: color-mix(in oklab, var(--green-new-35) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-feedback-warning: color-mix(in oklab, var(--yellow-new-56) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-invert: color-mix(in oklab, var(--neutral-71) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-link: color-mix(in oklab, var(--blue-new-37) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-muted: color-mix(in oklab, var(--neutral-29) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-overlay-dark: color-mix(in oklab, var(--neutral-71) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-overlay-light: color-mix(in oklab, var(--neutral-2) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-status-dnd: color-mix(in oklab, var(--red-new-45) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-status-idle: color-mix(in oklab, var(--yellow-new-22) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-status-offline: color-mix(in oklab, var(--neutral-27) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-status-online: color-mix(in oklab, var(--green-new-40) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-strong: color-mix(in oklab, var(--neutral-2) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-subtle: color-mix(in oklab, var(--neutral-23) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--textbox-markdown-syntax: color-mix(in oklab, var(--plum-9) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--thread-channel-spine: color-mix(in oklab, var(--plum-13) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--user-profile-activity-toolbar-background: color-mix(in oklab, var(--neutral-73) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--user-profile-background-hover: color-mix(in oklab, hsl(var(--opacity-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--user-profile-border: color-mix(
in oklab,
hsl(var(--opacity-12-hsl)/0.12156862745098039) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
--user-profile-note-background-focus: color-mix(in oklab, var(--neutral-92) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--user-profile-overlay-background: color-mix(in oklab, var(--neutral-73) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--user-profile-overlay-background-hover: color-mix(in oklab, hsl(var(--opacity-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--user-profile-toolbar-background: color-mix(in oklab, var(--neutral-73) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--user-profile-toolbar-border: color-mix(
in oklab,
hsl(var(--opacity-4-hsl)/0.0392156862745098) 100%,
hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0392156862745098) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%))
);
}
}
.custom-user-profile-theme.theme-dark {
--user-profile-activity-toolbar-background: hsl(var(--opacity-24-hsl)/0.23921568627450981);
--user-profile-background-hover: hsl(var(--opacity-white-4-hsl)/0.0392156862745098);
--user-profile-border: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--user-profile-note-background-focus: hsl(var(--black-hsl)/0.3);
--user-profile-overlay-background: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--user-profile-overlay-background-hover: hsl(var(--opacity-20-hsl)/0.2);
--user-profile-toolbar-background: hsl(var(--opacity-black-48-hsl)/0.47843137254901963);
--user-profile-toolbar-border: hsl(var(--opacity-4-hsl)/0.0392156862745098);
}
.custom-user-profile-theme.theme-light {
--user-profile-activity-toolbar-background: hsl(var(--opacity-white-48-hsl)/0.47843137254901963);
--user-profile-background-hover: hsl(var(--opacity-black-8-hsl)/0.0784313725490196);
--user-profile-border: hsl(var(--opacity-black-8-hsl)/0.0784313725490196);
--user-profile-note-background-focus: hsl(var(--white-hsl)/0.3);
--user-profile-overlay-background: hsl(var(--opacity-white-24-hsl)/0.23921568627450981);
--user-profile-overlay-background-hover: hsl(var(--opacity-white-36-hsl)/0.3607843137254902);
--user-profile-toolbar-background: hsl(var(--opacity-white-60-hsl)/0.6);
--user-profile-toolbar-border: hsl(var(--opacity-20-hsl)/0.2);
}
.high-contrast-mode .theme-dark,
.high-contrast-mode.theme-dark {
--app-frame-border: var(--neutral-12);
--background-code: hsl(var(--opacity-blurple-12-hsl)/0.12156862745098039);
--background-feedback-critical: hsl(var(--opacity-red-12-hsl)/0.12156862745098039);
--background-feedback-info: hsl(var(--opacity-blue-12-hsl)/0.12156862745098039);
--background-feedback-positive: hsl(var(--opacity-green-12-hsl)/0.12156862745098039);
--background-feedback-warning: hsl(var(--opacity-yellow-12-hsl)/0.12156862745098039);
--background-mod-muted: hsl(var(--opacity-8-hsl)/0.0784313725490196);
--background-mod-normal: hsl(var(--opacity-20-hsl)/0.2);
--background-mod-strong: hsl(var(--opacity-24-hsl)/0.23921568627450981);
--background-mod-subtle: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--border-focus: var(--blue-new-18);
--border-muted: var(--neutral-26);
--border-normal: var(--neutral-5);
--border-strong: var(--neutral-1);
--border-subtle: var(--neutral-12);
--card-secondary-bg: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--channel-icon: var(--neutral-19);
--channel-text-area-placeholder: var(--neutral-25);
--channels-default: var(--neutral-19);
--chat-text-muted: var(--neutral-17);
--checkbox-border-active: var(--neutral-12);
--checkbox-border-default: var(--neutral-1);
--checkbox-border-hover: var(--neutral-12);
--checkbox-border-selected-default: var(--neutral-12);
--checkbox-border-selected-hover: var(--neutral-12);
--control-connected-border-active: var(--green-new-20);
--control-connected-border-default: var(--green-new-20);
--control-connected-border-hover: var(--green-new-20);
--control-critical-primary-border-active: var(--red-new-15);
--control-critical-primary-border-default: var(--red-new-15);
--control-critical-primary-border-hover: var(--red-new-15);
--control-critical-secondary-background-active: hsl(var(--opacity-24-hsl)/0.23921568627450981);
--control-critical-secondary-background-default: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--control-critical-secondary-background-hover: hsl(var(--opacity-20-hsl)/0.2);
--control-critical-secondary-border-active: var(--red-new-15);
--control-critical-secondary-border-default: var(--red-new-15);
--control-critical-secondary-border-hover: var(--red-new-15);
--control-critical-secondary-icon-active: var(--red-new-5);
--control-critical-secondary-icon-default: var(--red-new-5);
--control-critical-secondary-icon-hover: var(--red-new-5);
--control-critical-secondary-text-active: var(--red-new-5);
--control-critical-secondary-text-default: var(--red-new-5);
--control-critical-secondary-text-hover: var(--red-new-5);
--control-icon-only-background-active: hsl(var(--opacity-24-hsl)/0.23921568627450981);
--control-icon-only-background-hover: hsl(var(--opacity-20-hsl)/0.2);
--control-icon-only-border-active: var(--neutral-26);
--control-icon-only-border-hover: var(--neutral-26);
--control-icon-only-icon-active: var(--neutral-1);
--control-icon-only-icon-default: var(--neutral-2);
--control-icon-only-icon-hover: var(--neutral-1);
--control-overlay-secondary-border-active: var(--neutral-26);
--control-overlay-secondary-border-default: var(--neutral-26);
--control-overlay-secondary-border-hover: var(--neutral-26);
--control-primary-border-active: var(--blurple-18);
--control-primary-border-default: var(--blurple-18);
--control-primary-border-hover: var(--blurple-18);
--control-secondary-background-active: hsl(var(--opacity-24-hsl)/0.23921568627450981);
--control-secondary-background-default: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--control-secondary-background-hover: hsl(var(--opacity-20-hsl)/0.2);
--control-secondary-border-active: var(--neutral-22);
--control-secondary-border-default: var(--neutral-22);
--control-secondary-border-hover: var(--neutral-22);
--control-secondary-icon-active: var(--neutral-1);
--control-secondary-icon-default: var(--neutral-1);
--control-secondary-icon-hover: var(--neutral-1);
--control-secondary-text-active: var(--neutral-1);
--control-secondary-text-default: var(--neutral-1);
--control-secondary-text-hover: var(--neutral-1);
--gradient-progress-pill-background: var(--neutral-35);
--icon-default: var(--neutral-1);
--icon-feedback-critical: var(--red-new-5);
--icon-feedback-info: var(--blue-new-8);
--icon-feedback-positive: var(--green-new-10);
--icon-feedback-warning: var(--yellow-new-7);
--icon-link: var(--blue-new-18);
--icon-muted: var(--neutral-12);
--icon-strong: var(--neutral-1);
--icon-subtle: var(--neutral-2);
--input-background-default: hsl(var(--opacity-black-28-hsl)/0.2784313725490196);
--input-border-default: var(--neutral-22);
--input-border-error-default: var(--red-new-5);
--input-border-hover: var(--neutral-5);
--input-icon-default: var(--neutral-2);
--input-placeholder-text-default: var(--neutral-28);
--input-text-default: var(--neutral-1);
--input-text-error-default: var(--neutral-1);
--interactive-background-active: hsl(var(--opacity-20-hsl)/0.2);
--interactive-background-hover: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--interactive-background-selected: hsl(var(--opacity-24-hsl)/0.23921568627450981);
--interactive-icon-active: var(--neutral-1);
--interactive-icon-default: var(--neutral-2);
--interactive-icon-hover: var(--neutral-1);
--interactive-muted: var(--neutral-27);
--interactive-text-active: var(--neutral-1);
--interactive-text-default: var(--neutral-2);
--interactive-text-hover: var(--neutral-1);
--mention-background: hsl(var(--opacity-blurple-48-hsl)/0.47843137254901963);
--mention-foreground: var(--blurple-1);
--message-automod-background-default: hsl(var(--opacity-red-20-hsl)/0.2);
--message-automod-background-hover: hsl(var(--opacity-red-24-hsl)/0.23921568627450981);
--message-background-hover: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--message-highlight-background-default: hsl(var(--opacity-blurple-20-hsl)/0.2);
--message-highlight-background-hover: hsl(var(--opacity-blurple-24-hsl)/0.23921568627450981);
--message-mentioned-background-default: hsl(var(--opacity-yellow-20-hsl)/0.2);
--message-mentioned-background-hover: hsl(var(--opacity-yellow-24-hsl)/0.23921568627450981);
--mobile-text-heading-primary: var(--neutral-1);
--radio-border-active: var(--neutral-12);
--radio-border-default: var(--neutral-12);
--radio-border-hover: var(--neutral-12);
--radio-border-selected-default: var(--neutral-12);
--radio-border-selected-hover: var(--neutral-12);
--redesign-button-primary-alt-border: var(--brand-300);
--redesign-button-secondary-border: var(--neutral-12);
--redesign-button-secondary-text: var(--neutral-1);
--redesign-button-tertiary-text: var(--neutral-1);
--redesign-channel-name-muted-text: var(--neutral-12);
--redesign-channel-name-text: var(--neutral-1);
--spine-default: var(--neutral-1);
--stage-card-pill-bg: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--status-danger: var(--red-new-29);
--switch-border-default: var(--neutral-12);
--switch-border-hover: var(--neutral-12);
--switch-border-selected-default: var(--neutral-12);
--switch-border-selected-hover: var(--neutral-12);
--text-brand: var(--brand-300);
--text-code: var(--blue-new-1);
--text-code-addition: var(--green-new-2);
--text-code-builtin: var(--orange-new-1);
--text-code-bullet: var(--yellow-new-1);
--text-code-comment: var(--neutral-15);
--text-code-deletion: var(--red-new-1);
--text-code-keyword: var(--red-new-1);
--text-code-section: var(--blue-new-1);
--text-code-string: var(--teal-new-3);
--text-code-tag: var(--green-new-3);
--text-code-title: var(--blue-new-1);
--text-code-variable: var(--blue-new-1);
--text-default: var(--neutral-1);
--text-feedback-critical: var(--red-new-5);
--text-feedback-info: var(--blue-new-8);
--text-feedback-positive: var(--green-new-10);
--text-feedback-warning: var(--yellow-new-7);
--text-link: var(--blue-new-18);
--text-muted: var(--neutral-12);
--text-strong: var(--neutral-1);
--text-subtle: var(--neutral-2);
--thread-channel-spine: var(--neutral-27);
--user-profile-background-hover: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--user-profile-border: var(--neutral-12);
--user-profile-overlay-background-hover: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--user-profile-toolbar-border: var(--neutral-26);
}
@supports (color: color-mix(in lch, red, blue)) {
.high-contrast-mode .theme-dark,
.high-contrast-mode.theme-dark {
--app-frame-border: color-mix(in oklab, var(--neutral-12) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--background-code: color-mix(in oklab, hsl(var(--opacity-blurple-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--background-feedback-critical: color-mix(in oklab, hsl(var(--opacity-red-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--background-feedback-info: color-mix(in oklab, hsl(var(--opacity-blue-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--background-feedback-positive: color-mix(in oklab, hsl(var(--opacity-green-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--background-feedback-warning: color-mix(in oklab, hsl(var(--opacity-yellow-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--border-focus: color-mix(in oklab, var(--blue-new-18) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--border-muted: color-mix(in oklab, var(--neutral-26) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--border-normal: color-mix(in oklab, var(--neutral-5) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--border-strong: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--border-subtle: color-mix(in oklab, var(--neutral-12) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--card-secondary-bg: color-mix(in oklab, hsl(var(--opacity-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--channel-icon: color-mix(in oklab, var(--neutral-19) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--channel-text-area-placeholder: color-mix(in oklab, var(--neutral-25) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--channels-default: color-mix(in oklab, var(--neutral-19) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--chat-text-muted: color-mix(in oklab, var(--neutral-17) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--gradient-progress-pill-background: color-mix(in oklab, var(--neutral-35) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--icon-default: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-feedback-critical: color-mix(in oklab, var(--red-new-5) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-feedback-info: color-mix(in oklab, var(--blue-new-8) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-feedback-positive: color-mix(in oklab, var(--green-new-10) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-feedback-warning: color-mix(in oklab, var(--yellow-new-7) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-link: color-mix(in oklab, var(--blue-new-18) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-muted: color-mix(in oklab, var(--neutral-12) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-strong: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-subtle: color-mix(in oklab, var(--neutral-2) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--input-background-default: color-mix(in oklab, hsl(var(--opacity-black-28-hsl)/0.2784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2784313725490196) var(--custom-theme-base-color-amount, 0%));
--input-border-default: color-mix(in oklab, var(--neutral-22) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--input-border-error-default: color-mix(in oklab, var(--red-new-5) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--input-border-hover: color-mix(in oklab, var(--neutral-5) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--input-icon-default: color-mix(in oklab, var(--neutral-2) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--input-placeholder-text-default: color-mix(in oklab, var(--neutral-28) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--input-text-default: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--input-text-error-default: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-background-active: color-mix(in oklab, hsl(var(--opacity-20-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-base-color-amount, 0%));
--interactive-background-hover: color-mix(in oklab, hsl(var(--opacity-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--interactive-background-selected: color-mix(in oklab, hsl(var(--opacity-24-hsl)/0.23921568627450981) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.23921568627450981) var(--custom-theme-base-color-amount, 0%));
--interactive-icon-active: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-icon-default: color-mix(in oklab, var(--neutral-2) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-icon-hover: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-muted: color-mix(in oklab, var(--neutral-27) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-text-active: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-text-default: color-mix(in oklab, var(--neutral-2) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-text-hover: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--mention-background: color-mix(in oklab, hsl(var(--opacity-blurple-48-hsl)/0.47843137254901963) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.47843137254901963) var(--custom-theme-base-color-amount, 0%));
--mention-foreground: color-mix(in oklab, var(--blurple-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--message-automod-background-default: color-mix(in oklab, hsl(var(--opacity-red-20-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-base-color-amount, 0%));
--message-automod-background-hover: color-mix(in oklab, hsl(var(--opacity-red-24-hsl)/0.23921568627450981) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.23921568627450981) var(--custom-theme-base-color-amount, 0%));
--message-background-hover: color-mix(in oklab, hsl(var(--opacity-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--message-highlight-background-default: color-mix(in oklab, hsl(var(--opacity-blurple-20-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-base-color-amount, 0%));
--message-highlight-background-hover: color-mix(in oklab, hsl(var(--opacity-blurple-24-hsl)/0.23921568627450981) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.23921568627450981) var(--custom-theme-base-color-amount, 0%));
--message-mentioned-background-default: color-mix(in oklab, hsl(var(--opacity-yellow-20-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-base-color-amount, 0%));
--message-mentioned-background-hover: color-mix(in oklab, hsl(var(--opacity-yellow-24-hsl)/0.23921568627450981) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.23921568627450981) var(--custom-theme-base-color-amount, 0%));
--mobile-text-heading-primary: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-primary-alt-border: color-mix(in oklab, var(--brand-300) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--redesign-button-secondary-border: color-mix(in oklab, var(--neutral-12) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--redesign-button-secondary-text: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-tertiary-text: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-channel-name-muted-text: color-mix(in oklab, var(--neutral-12) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-channel-name-text: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--spine-default: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--stage-card-pill-bg: color-mix(in oklab, hsl(var(--opacity-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--text-brand: color-mix(in oklab, var(--brand-300) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code: color-mix(in oklab, var(--blue-new-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-addition: color-mix(in oklab, var(--green-new-2) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-builtin: color-mix(in oklab, var(--orange-new-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-bullet: color-mix(in oklab, var(--yellow-new-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-comment: color-mix(in oklab, var(--neutral-15) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-deletion: color-mix(in oklab, var(--red-new-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-keyword: color-mix(in oklab, var(--red-new-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-section: color-mix(in oklab, var(--blue-new-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-string: color-mix(in oklab, var(--teal-new-3) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-tag: color-mix(in oklab, var(--green-new-3) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-title: color-mix(in oklab, var(--blue-new-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-variable: color-mix(in oklab, var(--blue-new-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-default: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-feedback-critical: color-mix(in oklab, var(--red-new-5) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-feedback-info: color-mix(in oklab, var(--blue-new-8) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-feedback-positive: color-mix(in oklab, var(--green-new-10) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-feedback-warning: color-mix(in oklab, var(--yellow-new-7) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-link: color-mix(in oklab, var(--blue-new-18) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-muted: color-mix(in oklab, var(--neutral-12) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-strong: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-subtle: color-mix(in oklab, var(--neutral-2) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--thread-channel-spine: color-mix(in oklab, var(--neutral-27) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--user-profile-background-hover: color-mix(in oklab, hsl(var(--opacity-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--user-profile-border: color-mix(in oklab, var(--neutral-12) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--user-profile-overlay-background-hover: color-mix(in oklab, hsl(var(--opacity-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--user-profile-toolbar-border: color-mix(in oklab, var(--neutral-26) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
}
}
.high-contrast-mode .theme-light,
.high-contrast-mode.theme-light {
--app-frame-border: var(--neutral-50);
--background-code: hsl(var(--opacity-blurple-8-hsl)/0.0784313725490196);
--background-feedback-critical: hsl(var(--opacity-red-12-hsl)/0.12156862745098039);
--background-feedback-info: hsl(var(--opacity-blue-12-hsl)/0.12156862745098039);
--background-feedback-positive: hsl(var(--opacity-green-12-hsl)/0.12156862745098039);
--background-feedback-warning: hsl(var(--opacity-yellow-12-hsl)/0.12156862745098039);
--background-mod-muted: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--background-mod-normal: hsl(var(--opacity-20-hsl)/0.2);
--background-mod-strong: hsl(var(--opacity-28-hsl)/0.2784313725490196);
--background-mod-subtle: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--border-focus: var(--blue-new-63);
--border-muted: var(--neutral-38);
--border-normal: var(--neutral-59);
--border-strong: var(--neutral-72);
--border-subtle: var(--neutral-50);
--card-secondary-bg: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--channel-icon: var(--neutral-50);
--channel-text-area-placeholder: var(--neutral-39);
--channels-default: var(--neutral-50);
--chat-text-muted: var(--neutral-48);
--checkbox-border-active: var(--neutral-50);
--checkbox-border-default: var(--neutral-72);
--checkbox-border-hover: var(--neutral-50);
--checkbox-border-selected-default: var(--neutral-50);
--checkbox-border-selected-hover: var(--neutral-50);
--control-connected-border-active: var(--green-new-60);
--control-connected-border-default: var(--green-new-60);
--control-connected-border-hover: var(--green-new-60);
--control-critical-primary-border-active: var(--red-new-58);
--control-critical-primary-border-default: var(--red-new-58);
--control-critical-primary-border-hover: var(--red-new-58);
--control-critical-secondary-background-active: hsl(var(--opacity-28-hsl)/0.2784313725490196);
--control-critical-secondary-background-default: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--control-critical-secondary-background-hover: hsl(var(--opacity-20-hsl)/0.2);
--control-critical-secondary-border-active: var(--red-new-58);
--control-critical-secondary-border-default: var(--red-new-58);
--control-critical-secondary-border-hover: var(--red-new-58);
--control-critical-secondary-icon-active: var(--red-new-63);
--control-critical-secondary-icon-default: var(--red-new-63);
--control-critical-secondary-icon-hover: var(--red-new-63);
--control-critical-secondary-text-active: var(--red-new-63);
--control-critical-secondary-text-default: var(--red-new-63);
--control-critical-secondary-text-hover: var(--red-new-63);
--control-icon-only-background-active: hsl(var(--opacity-28-hsl)/0.2784313725490196);
--control-icon-only-background-hover: hsl(var(--opacity-20-hsl)/0.2);
--control-icon-only-border-active: var(--neutral-38);
--control-icon-only-border-hover: var(--neutral-38);
--control-icon-only-icon-active: var(--neutral-100);
--control-icon-only-icon-default: var(--neutral-64);
--control-icon-only-icon-hover: var(--neutral-100);
--control-overlay-secondary-border-active: var(--neutral-38);
--control-overlay-secondary-border-default: var(--neutral-38);
--control-overlay-secondary-border-hover: var(--neutral-38);
--control-primary-border-active: var(--blurple-59);
--control-primary-border-default: var(--blurple-59);
--control-primary-border-hover: var(--blurple-59);
--control-secondary-background-active: hsl(var(--opacity-28-hsl)/0.2784313725490196);
--control-secondary-background-default: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--control-secondary-background-hover: hsl(var(--opacity-20-hsl)/0.2);
--control-secondary-border-active: var(--neutral-44);
--control-secondary-border-default: var(--neutral-44);
--control-secondary-border-hover: var(--neutral-44);
--control-secondary-icon-active: var(--neutral-100);
--control-secondary-icon-default: var(--neutral-100);
--control-secondary-icon-hover: var(--neutral-100);
--control-secondary-text-active: var(--neutral-100);
--control-secondary-text-default: var(--neutral-100);
--control-secondary-text-hover: var(--neutral-100);
--gradient-progress-pill-background: var(--neutral-31);
--icon-default: var(--neutral-76);
--icon-feedback-critical: var(--red-new-63);
--icon-feedback-info: var(--blue-new-65);
--icon-feedback-positive: var(--green-new-65);
--icon-feedback-warning: var(--yellow-new-76);
--icon-link: var(--blue-new-63);
--icon-muted: var(--neutral-50);
--icon-strong: var(--neutral-100);
--icon-subtle: var(--neutral-64);
--input-background-default: hsl(var(--opacity-black-12-hsl)/0.12156862745098039);
--input-border-default: var(--neutral-44);
--input-border-error-default: var(--red-new-63);
--input-border-hover: var(--neutral-59);
--input-icon-default: var(--neutral-64);
--input-placeholder-text-default: var(--neutral-44);
--input-text-default: var(--neutral-76);
--input-text-error-default: var(--neutral-76);
--interactive-background-active: hsl(var(--opacity-20-hsl)/0.2);
--interactive-background-hover: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--interactive-background-selected: hsl(var(--opacity-28-hsl)/0.2784313725490196);
--interactive-icon-active: var(--neutral-100);
--interactive-icon-default: var(--neutral-64);
--interactive-icon-hover: var(--neutral-100);
--interactive-muted: var(--neutral-40);
--interactive-text-active: var(--neutral-100);
--interactive-text-default: var(--neutral-64);
--interactive-text-hover: var(--neutral-100);
--mention-background: hsl(var(--opacity-blurple-28-hsl)/0.2784313725490196);
--mention-foreground: var(--blurple-82);
--message-automod-background-default: hsl(var(--opacity-red-12-hsl)/0.12156862745098039);
--message-automod-background-hover: hsl(var(--opacity-red-16-hsl)/0.1607843137254902);
--message-background-hover: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--message-highlight-background-default: hsl(var(--opacity-blurple-20-hsl)/0.2);
--message-highlight-background-hover: hsl(var(--opacity-blurple-24-hsl)/0.23921568627450981);
--message-mentioned-background-default: hsl(var(--opacity-yellow-12-hsl)/0.12156862745098039);
--message-mentioned-background-hover: hsl(var(--opacity-yellow-16-hsl)/0.1607843137254902);
--mobile-text-heading-primary: var(--neutral-100);
--radio-border-active: var(--neutral-50);
--radio-border-default: var(--neutral-50);
--radio-border-hover: var(--neutral-50);
--radio-border-selected-default: var(--neutral-50);
--radio-border-selected-hover: var(--neutral-50);
--redesign-button-primary-alt-border: var(--brand-600);
--redesign-button-secondary-border: var(--neutral-50);
--redesign-button-secondary-text: var(--neutral-76);
--redesign-button-tertiary-text: var(--neutral-76);
--redesign-channel-name-muted-text: var(--neutral-50);
--redesign-channel-name-text: var(--neutral-100);
--spine-default: var(--neutral-72);
--stage-card-pill-bg: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--status-danger: var(--red-new-48);
--switch-border-default: var(--neutral-50);
--switch-border-hover: var(--neutral-50);
--switch-border-selected-default: var(--neutral-50);
--switch-border-selected-hover: var(--neutral-50);
--text-brand: var(--brand-600);
--text-code: var(--blue-new-74);
--text-code-addition: var(--green-new-79);
--text-code-builtin: var(--orange-new-74);
--text-code-bullet: var(--yellow-new-83);
--text-code-comment: var(--neutral-49);
--text-code-deletion: var(--red-new-77);
--text-code-keyword: var(--red-new-73);
--text-code-section: var(--blue-new-74);
--text-code-string: var(--teal-new-76);
--text-code-tag: var(--green-new-76);
--text-code-title: var(--blue-new-74);
--text-code-variable: var(--blue-new-74);
--text-default: var(--neutral-76);
--text-feedback-critical: var(--red-new-63);
--text-feedback-info: var(--blue-new-65);
--text-feedback-positive: var(--green-new-65);
--text-feedback-warning: var(--yellow-new-76);
--text-link: var(--blue-new-63);
--text-muted: var(--neutral-50);
--text-strong: var(--neutral-100);
--text-subtle: var(--neutral-64);
--thread-channel-spine: var(--neutral-40);
--user-profile-background-hover: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--user-profile-border: var(--neutral-50);
--user-profile-overlay-background-hover: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--user-profile-toolbar-border: var(--neutral-38);
}
@supports (color: color-mix(in lch, red, blue)) {
.high-contrast-mode .theme-light,
.high-contrast-mode.theme-light {
--app-frame-border: color-mix(in oklab, var(--neutral-50) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--background-code: color-mix(in oklab, hsl(var(--opacity-blurple-8-hsl)/0.0784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.0784313725490196) var(--custom-theme-base-color-amount, 0%));
--background-feedback-critical: color-mix(in oklab, hsl(var(--opacity-red-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--background-feedback-info: color-mix(in oklab, hsl(var(--opacity-blue-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--background-feedback-positive: color-mix(in oklab, hsl(var(--opacity-green-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--background-feedback-warning: color-mix(in oklab, hsl(var(--opacity-yellow-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--border-focus: color-mix(in oklab, var(--blue-new-63) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--border-muted: color-mix(in oklab, var(--neutral-38) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--border-normal: color-mix(in oklab, var(--neutral-59) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--border-strong: color-mix(in oklab, var(--neutral-72) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--border-subtle: color-mix(in oklab, var(--neutral-50) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--card-secondary-bg: color-mix(in oklab, hsl(var(--opacity-16-hsl)/0.1607843137254902) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1607843137254902) var(--custom-theme-base-color-amount, 0%));
--channel-icon: color-mix(in oklab, var(--neutral-50) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--channel-text-area-placeholder: color-mix(in oklab, var(--neutral-39) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--channels-default: color-mix(in oklab, var(--neutral-50) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--chat-text-muted: color-mix(in oklab, var(--neutral-48) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--gradient-progress-pill-background: color-mix(in oklab, var(--neutral-31) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--icon-default: color-mix(in oklab, var(--neutral-76) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-feedback-critical: color-mix(in oklab, var(--red-new-63) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-feedback-info: color-mix(in oklab, var(--blue-new-65) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-feedback-positive: color-mix(in oklab, var(--green-new-65) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-feedback-warning: color-mix(in oklab, var(--yellow-new-76) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-link: color-mix(in oklab, var(--blue-new-63) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-muted: color-mix(in oklab, var(--neutral-50) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-strong: color-mix(in oklab, var(--neutral-100) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-subtle: color-mix(in oklab, var(--neutral-64) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--input-background-default: color-mix(in oklab, hsl(var(--opacity-black-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--input-border-default: color-mix(in oklab, var(--neutral-44) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--input-border-error-default: color-mix(in oklab, var(--red-new-63) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--input-border-hover: color-mix(in oklab, var(--neutral-59) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--input-icon-default: color-mix(in oklab, var(--neutral-64) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--input-placeholder-text-default: color-mix(in oklab, var(--neutral-44) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--input-text-default: color-mix(in oklab, var(--neutral-76) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--input-text-error-default: color-mix(in oklab, var(--neutral-76) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-background-active: color-mix(in oklab, hsl(var(--opacity-20-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-base-color-amount, 0%));
--interactive-background-hover: color-mix(in oklab, hsl(var(--opacity-16-hsl)/0.1607843137254902) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1607843137254902) var(--custom-theme-base-color-amount, 0%));
--interactive-background-selected: color-mix(in oklab, hsl(var(--opacity-28-hsl)/0.2784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2784313725490196) var(--custom-theme-base-color-amount, 0%));
--interactive-icon-active: color-mix(in oklab, var(--neutral-100) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-icon-default: color-mix(in oklab, var(--neutral-64) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-icon-hover: color-mix(in oklab, var(--neutral-100) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-muted: color-mix(in oklab, var(--neutral-40) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-text-active: color-mix(in oklab, var(--neutral-100) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-text-default: color-mix(in oklab, var(--neutral-64) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-text-hover: color-mix(in oklab, var(--neutral-100) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--mention-background: color-mix(in oklab, hsl(var(--opacity-blurple-28-hsl)/0.2784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2784313725490196) var(--custom-theme-base-color-amount, 0%));
--mention-foreground: color-mix(in oklab, var(--blurple-82) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--message-automod-background-default: color-mix(in oklab, hsl(var(--opacity-red-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--message-automod-background-hover: color-mix(in oklab, hsl(var(--opacity-red-16-hsl)/0.1607843137254902) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1607843137254902) var(--custom-theme-base-color-amount, 0%));
--message-background-hover: color-mix(in oklab, hsl(var(--opacity-16-hsl)/0.1607843137254902) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1607843137254902) var(--custom-theme-base-color-amount, 0%));
--message-highlight-background-default: color-mix(in oklab, hsl(var(--opacity-blurple-20-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-base-color-amount, 0%));
--message-highlight-background-hover: color-mix(in oklab, hsl(var(--opacity-blurple-24-hsl)/0.23921568627450981) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.23921568627450981) var(--custom-theme-base-color-amount, 0%));
--message-mentioned-background-default: color-mix(in oklab, hsl(var(--opacity-yellow-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--message-mentioned-background-hover: color-mix(in oklab, hsl(var(--opacity-yellow-16-hsl)/0.1607843137254902) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1607843137254902) var(--custom-theme-base-color-amount, 0%));
--mobile-text-heading-primary: color-mix(in oklab, var(--neutral-100) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-primary-alt-border: color-mix(in oklab, var(--brand-600) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--redesign-button-secondary-border: color-mix(in oklab, var(--neutral-50) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--redesign-button-secondary-text: color-mix(in oklab, var(--neutral-76) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-tertiary-text: color-mix(in oklab, var(--neutral-76) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-channel-name-muted-text: color-mix(in oklab, var(--neutral-50) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-channel-name-text: color-mix(in oklab, var(--neutral-100) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--spine-default: color-mix(in oklab, var(--neutral-72) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--stage-card-pill-bg: color-mix(in oklab, hsl(var(--opacity-16-hsl)/0.1607843137254902) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1607843137254902) var(--custom-theme-base-color-amount, 0%));
--text-brand: color-mix(in oklab, var(--brand-600) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code: color-mix(in oklab, var(--blue-new-74) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-addition: color-mix(in oklab, var(--green-new-79) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-builtin: color-mix(in oklab, var(--orange-new-74) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-bullet: color-mix(in oklab, var(--yellow-new-83) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-comment: color-mix(in oklab, var(--neutral-49) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-deletion: color-mix(in oklab, var(--red-new-77) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-keyword: color-mix(in oklab, var(--red-new-73) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-section: color-mix(in oklab, var(--blue-new-74) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-string: color-mix(in oklab, var(--teal-new-76) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-tag: color-mix(in oklab, var(--green-new-76) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-title: color-mix(in oklab, var(--blue-new-74) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-variable: color-mix(in oklab, var(--blue-new-74) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-default: color-mix(in oklab, var(--neutral-76) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-feedback-critical: color-mix(in oklab, var(--red-new-63) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-feedback-info: color-mix(in oklab, var(--blue-new-65) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-feedback-positive: color-mix(in oklab, var(--green-new-65) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-feedback-warning: color-mix(in oklab, var(--yellow-new-76) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-link: color-mix(in oklab, var(--blue-new-63) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-muted: color-mix(in oklab, var(--neutral-50) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-strong: color-mix(in oklab, var(--neutral-100) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-subtle: color-mix(in oklab, var(--neutral-64) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--thread-channel-spine: color-mix(in oklab, var(--neutral-40) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--user-profile-background-hover: color-mix(in oklab, hsl(var(--opacity-16-hsl)/0.1607843137254902) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1607843137254902) var(--custom-theme-base-color-amount, 0%));
--user-profile-border: color-mix(in oklab, var(--neutral-50) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--user-profile-overlay-background-hover: color-mix(in oklab, hsl(var(--opacity-16-hsl)/0.1607843137254902) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1607843137254902) var(--custom-theme-base-color-amount, 0%));
--user-profile-toolbar-border: color-mix(in oklab, var(--neutral-38) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
}
}
.high-contrast-mode .theme-midnight,
.high-contrast-mode.theme-midnight {
--app-frame-border: var(--neutral-24);
--background-code: hsl(var(--opacity-blurple-12-hsl)/0.12156862745098039);
--background-feedback-critical: hsl(var(--opacity-red-12-hsl)/0.12156862745098039);
--background-feedback-info: hsl(var(--opacity-blue-12-hsl)/0.12156862745098039);
--background-feedback-positive: hsl(var(--opacity-green-12-hsl)/0.12156862745098039);
--background-feedback-warning: hsl(var(--opacity-yellow-12-hsl)/0.12156862745098039);
--background-mod-muted: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--background-mod-normal: hsl(var(--opacity-24-hsl)/0.23921568627450981);
--background-mod-strong: hsl(var(--opacity-28-hsl)/0.2784313725490196);
--background-mod-subtle: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--border-focus: var(--blue-new-35);
--border-muted: var(--neutral-36);
--border-normal: var(--neutral-18);
--border-strong: var(--neutral-10);
--border-subtle: var(--neutral-24);
--card-secondary-bg: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--channel-icon: var(--neutral-29);
--channel-text-area-placeholder: var(--neutral-36);
--channels-default: var(--neutral-29);
--chat-text-muted: var(--neutral-28);
--checkbox-border-active: var(--neutral-24);
--checkbox-border-default: var(--neutral-10);
--checkbox-border-hover: var(--neutral-24);
--checkbox-border-selected-default: var(--neutral-24);
--checkbox-border-selected-hover: var(--neutral-24);
--control-connected-border-active: var(--green-new-26);
--control-connected-border-default: var(--green-new-26);
--control-connected-border-hover: var(--green-new-26);
--control-critical-primary-border-active: var(--red-new-23);
--control-critical-primary-border-default: var(--red-new-23);
--control-critical-primary-border-hover: var(--red-new-23);
--control-critical-secondary-background-active: hsl(var(--opacity-28-hsl)/0.2784313725490196);
--control-critical-secondary-background-default: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--control-critical-secondary-background-hover: hsl(var(--opacity-24-hsl)/0.23921568627450981);
--control-critical-secondary-border-active: var(--red-new-23);
--control-critical-secondary-border-default: var(--red-new-23);
--control-critical-secondary-border-hover: var(--red-new-23);
--control-critical-secondary-icon-active: var(--red-new-23);
--control-critical-secondary-icon-default: var(--red-new-23);
--control-critical-secondary-icon-hover: var(--red-new-23);
--control-critical-secondary-text-active: var(--red-new-23);
--control-critical-secondary-text-default: var(--red-new-23);
--control-critical-secondary-text-hover: var(--red-new-23);
--control-icon-only-background-active: hsl(var(--opacity-28-hsl)/0.2784313725490196);
--control-icon-only-background-hover: hsl(var(--opacity-24-hsl)/0.23921568627450981);
--control-icon-only-border-active: var(--neutral-36);
--control-icon-only-border-hover: var(--neutral-36);
--control-icon-only-icon-active: var(--neutral-1);
--control-icon-only-icon-default: var(--neutral-15);
--control-icon-only-icon-hover: var(--neutral-1);
--control-overlay-secondary-border-active: var(--neutral-36);
--control-overlay-secondary-border-default: var(--neutral-36);
--control-overlay-secondary-border-hover: var(--neutral-36);
--control-primary-border-active: var(--blurple-25);
--control-primary-border-default: var(--blurple-25);
--control-primary-border-hover: var(--blurple-25);
--control-secondary-background-active: hsl(var(--opacity-28-hsl)/0.2784313725490196);
--control-secondary-background-default: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--control-secondary-background-hover: hsl(var(--opacity-24-hsl)/0.23921568627450981);
--control-secondary-border-active: var(--neutral-32);
--control-secondary-border-default: var(--neutral-32);
--control-secondary-border-hover: var(--neutral-32);
--control-secondary-icon-active: var(--neutral-1);
--control-secondary-icon-default: var(--neutral-1);
--control-secondary-icon-hover: var(--neutral-1);
--control-secondary-text-active: var(--neutral-1);
--control-secondary-text-default: var(--neutral-1);
--control-secondary-text-hover: var(--neutral-1);
--gradient-progress-pill-background: var(--neutral-45);
--icon-default: var(--neutral-6);
--icon-feedback-critical: var(--red-new-23);
--icon-feedback-info: var(--blue-new-25);
--icon-feedback-positive: var(--green-new-26);
--icon-feedback-warning: var(--yellow-new-49);
--icon-link: var(--blue-new-28);
--icon-muted: var(--neutral-24);
--icon-strong: var(--neutral-1);
--icon-subtle: var(--neutral-15);
--input-background-default: hsl(var(--opacity-black-12-hsl)/0.12156862745098039);
--input-border-default: var(--neutral-32);
--input-border-error-default: var(--red-new-23);
--input-border-hover: var(--neutral-18);
--input-icon-default: var(--neutral-15);
--input-placeholder-text-default: var(--neutral-37);
--input-text-default: var(--neutral-6);
--input-text-error-default: var(--neutral-6);
--interactive-background-active: hsl(var(--opacity-24-hsl)/0.23921568627450981);
--interactive-background-hover: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--interactive-background-selected: hsl(var(--opacity-28-hsl)/0.2784313725490196);
--interactive-icon-active: var(--neutral-1);
--interactive-icon-default: var(--neutral-15);
--interactive-icon-hover: var(--neutral-1);
--interactive-muted: var(--neutral-38);
--interactive-text-active: var(--neutral-1);
--interactive-text-default: var(--neutral-15);
--interactive-text-hover: var(--neutral-1);
--mention-background: hsl(var(--opacity-blurple-48-hsl)/0.47843137254901963);
--mention-foreground: var(--blurple-13);
--message-automod-background-default: hsl(var(--opacity-red-24-hsl)/0.23921568627450981);
--message-automod-background-hover: hsl(var(--opacity-red-28-hsl)/0.2784313725490196);
--message-background-hover: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--message-highlight-background-default: hsl(var(--opacity-blurple-20-hsl)/0.2);
--message-highlight-background-hover: hsl(var(--opacity-blurple-24-hsl)/0.23921568627450981);
--message-mentioned-background-default: hsl(var(--opacity-yellow-24-hsl)/0.23921568627450981);
--message-mentioned-background-hover: hsl(var(--opacity-yellow-28-hsl)/0.2784313725490196);
--mobile-text-heading-primary: var(--neutral-1);
--radio-border-active: var(--neutral-24);
--radio-border-default: var(--neutral-24);
--radio-border-hover: var(--neutral-24);
--radio-border-selected-default: var(--neutral-24);
--radio-border-selected-hover: var(--neutral-24);
--redesign-button-primary-alt-border: var(--brand-345);
--redesign-button-secondary-border: var(--neutral-24);
--redesign-button-secondary-text: var(--neutral-6);
--redesign-button-tertiary-text: var(--neutral-6);
--redesign-channel-name-muted-text: var(--neutral-24);
--redesign-channel-name-text: var(--neutral-1);
--spine-default: var(--neutral-10);
--stage-card-pill-bg: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--status-danger: var(--red-new-45);
--switch-border-default: var(--neutral-24);
--switch-border-hover: var(--neutral-24);
--switch-border-selected-default: var(--neutral-24);
--switch-border-selected-hover: var(--neutral-24);
--text-brand: var(--brand-345);
--text-code: var(--blue-new-20);
--text-code-addition: var(--green-new-20);
--text-code-builtin: var(--orange-new-19);
--text-code-bullet: var(--yellow-new-44);
--text-code-comment: var(--neutral-27);
--text-code-deletion: var(--red-new-16);
--text-code-keyword: var(--red-new-17);
--text-code-section: var(--blue-new-20);
--text-code-string: var(--teal-new-22);
--text-code-tag: var(--green-new-21);
--text-code-title: var(--blue-new-20);
--text-code-variable: var(--blue-new-20);
--text-default: var(--neutral-6);
--text-feedback-critical: var(--red-new-23);
--text-feedback-info: var(--blue-new-25);
--text-feedback-positive: var(--green-new-26);
--text-feedback-warning: var(--yellow-new-49);
--text-link: var(--blue-new-28);
--text-muted: var(--neutral-24);
--text-strong: var(--neutral-1);
--text-subtle: var(--neutral-15);
--thread-channel-spine: var(--neutral-38);
--user-profile-background-hover: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--user-profile-border: var(--neutral-24);
--user-profile-overlay-background-hover: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--user-profile-toolbar-border: var(--neutral-36);
}
@supports (color: color-mix(in lch, red, blue)) {
.high-contrast-mode .theme-midnight,
.high-contrast-mode.theme-midnight {
--app-frame-border: color-mix(in oklab, var(--neutral-24) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--background-code: color-mix(in oklab, hsl(var(--opacity-blurple-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--background-feedback-critical: color-mix(in oklab, hsl(var(--opacity-red-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--background-feedback-info: color-mix(in oklab, hsl(var(--opacity-blue-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--background-feedback-positive: color-mix(in oklab, hsl(var(--opacity-green-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--background-feedback-warning: color-mix(in oklab, hsl(var(--opacity-yellow-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--border-focus: color-mix(in oklab, var(--blue-new-35) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--border-muted: color-mix(in oklab, var(--neutral-36) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--border-normal: color-mix(in oklab, var(--neutral-18) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--border-strong: color-mix(in oklab, var(--neutral-10) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--border-subtle: color-mix(in oklab, var(--neutral-24) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--card-secondary-bg: color-mix(in oklab, hsl(var(--opacity-16-hsl)/0.1607843137254902) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1607843137254902) var(--custom-theme-base-color-amount, 0%));
--channel-icon: color-mix(in oklab, var(--neutral-29) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--channel-text-area-placeholder: color-mix(in oklab, var(--neutral-36) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--channels-default: color-mix(in oklab, var(--neutral-29) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--chat-text-muted: color-mix(in oklab, var(--neutral-28) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--gradient-progress-pill-background: color-mix(in oklab, var(--neutral-45) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--icon-default: color-mix(in oklab, var(--neutral-6) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-feedback-critical: color-mix(in oklab, var(--red-new-23) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-feedback-info: color-mix(in oklab, var(--blue-new-25) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-feedback-positive: color-mix(in oklab, var(--green-new-26) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-feedback-warning: color-mix(in oklab, var(--yellow-new-49) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-link: color-mix(in oklab, var(--blue-new-28) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-muted: color-mix(in oklab, var(--neutral-24) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-strong: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-subtle: color-mix(in oklab, var(--neutral-15) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--input-background-default: color-mix(in oklab, hsl(var(--opacity-black-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--input-border-default: color-mix(in oklab, var(--neutral-32) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--input-border-error-default: color-mix(in oklab, var(--red-new-23) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--input-border-hover: color-mix(in oklab, var(--neutral-18) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--input-icon-default: color-mix(in oklab, var(--neutral-15) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--input-placeholder-text-default: color-mix(in oklab, var(--neutral-37) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--input-text-default: color-mix(in oklab, var(--neutral-6) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--input-text-error-default: color-mix(in oklab, var(--neutral-6) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-background-active: color-mix(in oklab, hsl(var(--opacity-24-hsl)/0.23921568627450981) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.23921568627450981) var(--custom-theme-base-color-amount, 0%));
--interactive-background-hover: color-mix(in oklab, hsl(var(--opacity-16-hsl)/0.1607843137254902) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1607843137254902) var(--custom-theme-base-color-amount, 0%));
--interactive-background-selected: color-mix(in oklab, hsl(var(--opacity-28-hsl)/0.2784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2784313725490196) var(--custom-theme-base-color-amount, 0%));
--interactive-icon-active: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-icon-default: color-mix(in oklab, var(--neutral-15) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-icon-hover: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-muted: color-mix(in oklab, var(--neutral-38) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-text-active: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-text-default: color-mix(in oklab, var(--neutral-15) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-text-hover: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--mention-background: color-mix(in oklab, hsl(var(--opacity-blurple-48-hsl)/0.47843137254901963) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.47843137254901963) var(--custom-theme-base-color-amount, 0%));
--mention-foreground: color-mix(in oklab, var(--blurple-13) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--message-automod-background-default: color-mix(in oklab, hsl(var(--opacity-red-24-hsl)/0.23921568627450981) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.23921568627450981) var(--custom-theme-base-color-amount, 0%));
--message-automod-background-hover: color-mix(in oklab, hsl(var(--opacity-red-28-hsl)/0.2784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2784313725490196) var(--custom-theme-base-color-amount, 0%));
--message-background-hover: color-mix(in oklab, hsl(var(--opacity-16-hsl)/0.1607843137254902) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1607843137254902) var(--custom-theme-base-color-amount, 0%));
--message-highlight-background-default: color-mix(in oklab, hsl(var(--opacity-blurple-20-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-base-color-amount, 0%));
--message-highlight-background-hover: color-mix(in oklab, hsl(var(--opacity-blurple-24-hsl)/0.23921568627450981) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.23921568627450981) var(--custom-theme-base-color-amount, 0%));
--message-mentioned-background-default: color-mix(in oklab, hsl(var(--opacity-yellow-24-hsl)/0.23921568627450981) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.23921568627450981) var(--custom-theme-base-color-amount, 0%));
--message-mentioned-background-hover: color-mix(in oklab, hsl(var(--opacity-yellow-28-hsl)/0.2784313725490196) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2784313725490196) var(--custom-theme-base-color-amount, 0%));
--mobile-text-heading-primary: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-primary-alt-border: color-mix(in oklab, var(--brand-345) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--redesign-button-secondary-border: color-mix(in oklab, var(--neutral-24) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--redesign-button-secondary-text: color-mix(in oklab, var(--neutral-6) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-tertiary-text: color-mix(in oklab, var(--neutral-6) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-channel-name-muted-text: color-mix(in oklab, var(--neutral-24) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-channel-name-text: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--spine-default: color-mix(in oklab, var(--neutral-10) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--stage-card-pill-bg: color-mix(in oklab, hsl(var(--opacity-16-hsl)/0.1607843137254902) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1607843137254902) var(--custom-theme-base-color-amount, 0%));
--text-brand: color-mix(in oklab, var(--brand-345) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code: color-mix(in oklab, var(--blue-new-20) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-addition: color-mix(in oklab, var(--green-new-20) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-builtin: color-mix(in oklab, var(--orange-new-19) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-bullet: color-mix(in oklab, var(--yellow-new-44) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-comment: color-mix(in oklab, var(--neutral-27) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-deletion: color-mix(in oklab, var(--red-new-16) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-keyword: color-mix(in oklab, var(--red-new-17) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-section: color-mix(in oklab, var(--blue-new-20) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-string: color-mix(in oklab, var(--teal-new-22) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-tag: color-mix(in oklab, var(--green-new-21) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-title: color-mix(in oklab, var(--blue-new-20) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-variable: color-mix(in oklab, var(--blue-new-20) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-default: color-mix(in oklab, var(--neutral-6) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-feedback-critical: color-mix(in oklab, var(--red-new-23) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-feedback-info: color-mix(in oklab, var(--blue-new-25) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-feedback-positive: color-mix(in oklab, var(--green-new-26) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-feedback-warning: color-mix(in oklab, var(--yellow-new-49) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-link: color-mix(in oklab, var(--blue-new-28) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-muted: color-mix(in oklab, var(--neutral-24) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-strong: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-subtle: color-mix(in oklab, var(--neutral-15) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--thread-channel-spine: color-mix(in oklab, var(--neutral-38) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--user-profile-background-hover: color-mix(in oklab, hsl(var(--opacity-16-hsl)/0.1607843137254902) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1607843137254902) var(--custom-theme-base-color-amount, 0%));
--user-profile-border: color-mix(in oklab, var(--neutral-24) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--user-profile-overlay-background-hover: color-mix(in oklab, hsl(var(--opacity-16-hsl)/0.1607843137254902) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1607843137254902) var(--custom-theme-base-color-amount, 0%));
--user-profile-toolbar-border: color-mix(in oklab, var(--neutral-36) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
}
}
.high-contrast-mode .theme-darker,
.high-contrast-mode.theme-darker {
--app-frame-border: var(--neutral-19);
--background-code: hsl(var(--opacity-blurple-12-hsl)/0.12156862745098039);
--background-feedback-critical: hsl(var(--opacity-red-12-hsl)/0.12156862745098039);
--background-feedback-info: hsl(var(--opacity-blue-12-hsl)/0.12156862745098039);
--background-feedback-positive: hsl(var(--opacity-green-12-hsl)/0.12156862745098039);
--background-feedback-warning: hsl(var(--opacity-yellow-12-hsl)/0.12156862745098039);
--background-mod-muted: hsl(var(--opacity-8-hsl)/0.0784313725490196);
--background-mod-normal: hsl(var(--opacity-20-hsl)/0.2);
--background-mod-strong: hsl(var(--opacity-24-hsl)/0.23921568627450981);
--background-mod-subtle: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--border-focus: var(--blue-new-30);
--border-muted: var(--neutral-32);
--border-normal: var(--neutral-13);
--border-strong: var(--neutral-5);
--border-subtle: var(--neutral-19);
--card-secondary-bg: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--channel-icon: var(--neutral-27);
--channel-text-area-placeholder: var(--neutral-33);
--channels-default: var(--neutral-27);
--chat-text-muted: var(--neutral-25);
--checkbox-border-active: var(--neutral-19);
--checkbox-border-default: var(--neutral-5);
--checkbox-border-hover: var(--neutral-19);
--checkbox-border-selected-default: var(--neutral-19);
--checkbox-border-selected-hover: var(--neutral-19);
--control-connected-border-active: var(--green-new-23);
--control-connected-border-default: var(--green-new-23);
--control-connected-border-hover: var(--green-new-23);
--control-critical-primary-border-active: var(--red-new-19);
--control-critical-primary-border-default: var(--red-new-19);
--control-critical-primary-border-hover: var(--red-new-19);
--control-critical-secondary-background-active: hsl(var(--opacity-24-hsl)/0.23921568627450981);
--control-critical-secondary-background-default: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--control-critical-secondary-background-hover: hsl(var(--opacity-20-hsl)/0.2);
--control-critical-secondary-border-active: var(--red-new-19);
--control-critical-secondary-border-default: var(--red-new-19);
--control-critical-secondary-border-hover: var(--red-new-19);
--control-critical-secondary-icon-active: var(--red-new-16);
--control-critical-secondary-icon-default: var(--red-new-16);
--control-critical-secondary-icon-hover: var(--red-new-16);
--control-critical-secondary-text-active: var(--red-new-16);
--control-critical-secondary-text-default: var(--red-new-16);
--control-critical-secondary-text-hover: var(--red-new-16);
--control-icon-only-background-active: hsl(var(--opacity-24-hsl)/0.23921568627450981);
--control-icon-only-background-hover: hsl(var(--opacity-20-hsl)/0.2);
--control-icon-only-border-active: var(--neutral-32);
--control-icon-only-border-hover: var(--neutral-32);
--control-icon-only-icon-active: var(--neutral-1);
--control-icon-only-icon-default: var(--neutral-10);
--control-icon-only-icon-hover: var(--neutral-1);
--control-overlay-secondary-border-active: var(--neutral-32);
--control-overlay-secondary-border-default: var(--neutral-32);
--control-overlay-secondary-border-hover: var(--neutral-32);
--control-primary-border-active: var(--blurple-21);
--control-primary-border-default: var(--blurple-21);
--control-primary-border-hover: var(--blurple-21);
--control-secondary-background-active: hsl(var(--opacity-24-hsl)/0.23921568627450981);
--control-secondary-background-default: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--control-secondary-background-hover: hsl(var(--opacity-20-hsl)/0.2);
--control-secondary-border-active: var(--neutral-29);
--control-secondary-border-default: var(--neutral-29);
--control-secondary-border-hover: var(--neutral-29);
--control-secondary-icon-active: var(--neutral-1);
--control-secondary-icon-default: var(--neutral-1);
--control-secondary-icon-hover: var(--neutral-1);
--control-secondary-text-active: var(--neutral-1);
--control-secondary-text-default: var(--neutral-1);
--control-secondary-text-hover: var(--neutral-1);
--gradient-progress-pill-background: var(--neutral-42);
--icon-default: var(--neutral-1);
--icon-feedback-critical: var(--red-new-16);
--icon-feedback-info: var(--blue-new-19);
--icon-feedback-positive: var(--green-new-20);
--icon-feedback-warning: var(--yellow-new-33);
--icon-link: var(--blue-new-21);
--icon-muted: var(--neutral-19);
--icon-strong: var(--neutral-1);
--icon-subtle: var(--neutral-10);
--input-background-default: hsl(var(--opacity-black-16-hsl)/0.1607843137254902);
--input-border-default: var(--neutral-29);
--input-border-error-default: var(--red-new-16);
--input-border-hover: var(--neutral-13);
--input-icon-default: var(--neutral-10);
--input-placeholder-text-default: var(--neutral-35);
--input-text-default: var(--neutral-1);
--input-text-error-default: var(--neutral-1);
--interactive-background-active: hsl(var(--opacity-20-hsl)/0.2);
--interactive-background-hover: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--interactive-background-selected: hsl(var(--opacity-24-hsl)/0.23921568627450981);
--interactive-icon-active: var(--neutral-1);
--interactive-icon-default: var(--neutral-10);
--interactive-icon-hover: var(--neutral-1);
--interactive-muted: var(--neutral-35);
--interactive-text-active: var(--neutral-1);
--interactive-text-default: var(--neutral-10);
--interactive-text-hover: var(--neutral-1);
--mention-background: hsl(var(--opacity-blurple-48-hsl)/0.47843137254901963);
--mention-foreground: var(--blurple-5);
--message-automod-background-default: hsl(var(--opacity-red-20-hsl)/0.2);
--message-automod-background-hover: hsl(var(--opacity-red-24-hsl)/0.23921568627450981);
--message-background-hover: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--message-highlight-background-default: hsl(var(--opacity-blurple-20-hsl)/0.2);
--message-highlight-background-hover: hsl(var(--opacity-blurple-24-hsl)/0.23921568627450981);
--message-mentioned-background-default: hsl(var(--opacity-yellow-20-hsl)/0.2);
--message-mentioned-background-hover: hsl(var(--opacity-yellow-24-hsl)/0.23921568627450981);
--mobile-text-heading-primary: var(--neutral-1);
--radio-border-active: var(--neutral-19);
--radio-border-default: var(--neutral-19);
--radio-border-hover: var(--neutral-19);
--radio-border-selected-default: var(--neutral-19);
--radio-border-selected-hover: var(--neutral-19);
--redesign-button-primary-alt-border: var(--brand-330);
--redesign-button-secondary-border: var(--neutral-19);
--redesign-button-secondary-text: var(--neutral-1);
--redesign-button-tertiary-text: var(--neutral-1);
--redesign-channel-name-muted-text: var(--neutral-19);
--redesign-channel-name-text: var(--neutral-1);
--spine-default: var(--neutral-5);
--stage-card-pill-bg: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--status-danger: var(--red-new-39);
--switch-border-default: var(--neutral-19);
--switch-border-hover: var(--neutral-19);
--switch-border-selected-default: var(--neutral-19);
--switch-border-selected-hover: var(--neutral-19);
--text-brand: var(--brand-330);
--text-code: var(--blue-new-14);
--text-code-addition: var(--green-new-14);
--text-code-builtin: var(--orange-new-12);
--text-code-bullet: var(--yellow-new-29);
--text-code-comment: var(--neutral-23);
--text-code-deletion: var(--red-new-9);
--text-code-keyword: var(--red-new-10);
--text-code-section: var(--blue-new-14);
--text-code-string: var(--teal-new-15);
--text-code-tag: var(--green-new-15);
--text-code-title: var(--blue-new-14);
--text-code-variable: var(--blue-new-14);
--text-default: var(--neutral-1);
--text-feedback-critical: var(--red-new-16);
--text-feedback-info: var(--blue-new-19);
--text-feedback-positive: var(--green-new-20);
--text-feedback-warning: var(--yellow-new-33);
--text-link: var(--blue-new-21);
--text-muted: var(--neutral-19);
--text-strong: var(--neutral-1);
--text-subtle: var(--neutral-10);
--thread-channel-spine: var(--neutral-35);
--user-profile-background-hover: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--user-profile-border: var(--neutral-19);
--user-profile-overlay-background-hover: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--user-profile-toolbar-border: var(--neutral-32);
}
@supports (color: color-mix(in lch, red, blue)) {
.high-contrast-mode .theme-darker,
.high-contrast-mode.theme-darker {
--app-frame-border: color-mix(in oklab, var(--neutral-19) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--background-code: color-mix(in oklab, hsl(var(--opacity-blurple-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--background-feedback-critical: color-mix(in oklab, hsl(var(--opacity-red-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--background-feedback-info: color-mix(in oklab, hsl(var(--opacity-blue-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--background-feedback-positive: color-mix(in oklab, hsl(var(--opacity-green-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--background-feedback-warning: color-mix(in oklab, hsl(var(--opacity-yellow-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--border-focus: color-mix(in oklab, var(--blue-new-30) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--border-muted: color-mix(in oklab, var(--neutral-32) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--border-normal: color-mix(in oklab, var(--neutral-13) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--border-strong: color-mix(in oklab, var(--neutral-5) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--border-subtle: color-mix(in oklab, var(--neutral-19) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--card-secondary-bg: color-mix(in oklab, hsl(var(--opacity-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--channel-icon: color-mix(in oklab, var(--neutral-27) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--channel-text-area-placeholder: color-mix(in oklab, var(--neutral-33) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--channels-default: color-mix(in oklab, var(--neutral-27) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--chat-text-muted: color-mix(in oklab, var(--neutral-25) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--gradient-progress-pill-background: color-mix(in oklab, var(--neutral-42) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-base-color-amount, 0%));
--icon-default: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-feedback-critical: color-mix(in oklab, var(--red-new-16) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-feedback-info: color-mix(in oklab, var(--blue-new-19) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-feedback-positive: color-mix(in oklab, var(--green-new-20) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-feedback-warning: color-mix(in oklab, var(--yellow-new-33) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-link: color-mix(in oklab, var(--blue-new-21) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-muted: color-mix(in oklab, var(--neutral-19) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-strong: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--icon-subtle: color-mix(in oklab, var(--neutral-10) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--input-background-default: color-mix(in oklab, hsl(var(--opacity-black-16-hsl)/0.1607843137254902) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.1607843137254902) var(--custom-theme-base-color-amount, 0%));
--input-border-default: color-mix(in oklab, var(--neutral-29) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--input-border-error-default: color-mix(in oklab, var(--red-new-16) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--input-border-hover: color-mix(in oklab, var(--neutral-13) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--input-icon-default: color-mix(in oklab, var(--neutral-10) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--input-placeholder-text-default: color-mix(in oklab, var(--neutral-35) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--input-text-default: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--input-text-error-default: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-background-active: color-mix(in oklab, hsl(var(--opacity-20-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-base-color-amount, 0%));
--interactive-background-hover: color-mix(in oklab, hsl(var(--opacity-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--interactive-background-selected: color-mix(in oklab, hsl(var(--opacity-24-hsl)/0.23921568627450981) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.23921568627450981) var(--custom-theme-base-color-amount, 0%));
--interactive-icon-active: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-icon-default: color-mix(in oklab, var(--neutral-10) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-icon-hover: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-muted: color-mix(in oklab, var(--neutral-35) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-text-active: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-text-default: color-mix(in oklab, var(--neutral-10) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--interactive-text-hover: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--mention-background: color-mix(in oklab, hsl(var(--opacity-blurple-48-hsl)/0.47843137254901963) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.47843137254901963) var(--custom-theme-base-color-amount, 0%));
--mention-foreground: color-mix(in oklab, var(--blurple-5) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--message-automod-background-default: color-mix(in oklab, hsl(var(--opacity-red-20-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-base-color-amount, 0%));
--message-automod-background-hover: color-mix(in oklab, hsl(var(--opacity-red-24-hsl)/0.23921568627450981) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.23921568627450981) var(--custom-theme-base-color-amount, 0%));
--message-background-hover: color-mix(in oklab, hsl(var(--opacity-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--message-highlight-background-default: color-mix(in oklab, hsl(var(--opacity-blurple-20-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-base-color-amount, 0%));
--message-highlight-background-hover: color-mix(in oklab, hsl(var(--opacity-blurple-24-hsl)/0.23921568627450981) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.23921568627450981) var(--custom-theme-base-color-amount, 0%));
--message-mentioned-background-default: color-mix(in oklab, hsl(var(--opacity-yellow-20-hsl)/0.2) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.2) var(--custom-theme-base-color-amount, 0%));
--message-mentioned-background-hover: color-mix(in oklab, hsl(var(--opacity-yellow-24-hsl)/0.23921568627450981) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.23921568627450981) var(--custom-theme-base-color-amount, 0%));
--mobile-text-heading-primary: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-primary-alt-border: color-mix(in oklab, var(--brand-330) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--redesign-button-secondary-border: color-mix(in oklab, var(--neutral-19) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--redesign-button-secondary-text: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-button-tertiary-text: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-channel-name-muted-text: color-mix(in oklab, var(--neutral-19) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--redesign-channel-name-text: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--spine-default: color-mix(in oklab, var(--neutral-5) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--stage-card-pill-bg: color-mix(in oklab, hsl(var(--opacity-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--text-brand: color-mix(in oklab, var(--brand-330) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code: color-mix(in oklab, var(--blue-new-14) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-addition: color-mix(in oklab, var(--green-new-14) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-builtin: color-mix(in oklab, var(--orange-new-12) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-bullet: color-mix(in oklab, var(--yellow-new-29) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-comment: color-mix(in oklab, var(--neutral-23) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-deletion: color-mix(in oklab, var(--red-new-9) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-keyword: color-mix(in oklab, var(--red-new-10) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-section: color-mix(in oklab, var(--blue-new-14) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-string: color-mix(in oklab, var(--teal-new-15) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-tag: color-mix(in oklab, var(--green-new-15) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-title: color-mix(in oklab, var(--blue-new-14) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-code-variable: color-mix(in oklab, var(--blue-new-14) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-default: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-feedback-critical: color-mix(in oklab, var(--red-new-16) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-feedback-info: color-mix(in oklab, var(--blue-new-19) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-feedback-positive: color-mix(in oklab, var(--green-new-20) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-feedback-warning: color-mix(in oklab, var(--yellow-new-33) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-link: color-mix(in oklab, var(--blue-new-21) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-muted: color-mix(in oklab, var(--neutral-19) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-strong: color-mix(in oklab, var(--neutral-1) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--text-subtle: color-mix(in oklab, var(--neutral-10) 100%, var(--custom-theme-text-color, #000) var(--custom-theme-text-color-amount, 0%));
--thread-channel-spine: color-mix(in oklab, var(--neutral-35) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--user-profile-background-hover: color-mix(in oklab, hsl(var(--opacity-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--user-profile-border: color-mix(in oklab, var(--neutral-19) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
--user-profile-overlay-background-hover: color-mix(in oklab, hsl(var(--opacity-12-hsl)/0.12156862745098039) 100%, hsl(var(--custom-theme-base-color-hsl, 0 0% 0%)/0.12156862745098039) var(--custom-theme-base-color-amount, 0%));
--user-profile-toolbar-border: color-mix(in oklab, var(--neutral-32) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
}
}
:root {
--neutral-1: hsl(var(--neutral-1-hsl)/1);
--neutral-1-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
--neutral-2: hsl(var(--neutral-2-hsl)/1);
--neutral-2-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 98.431%;
--neutral-3: hsl(var(--neutral-3-hsl)/1);
--neutral-3-hsl: 240 calc(var(--saturation-factor, 1) * 6.667%) 97.059%;
--neutral-4: hsl(var(--neutral-4-hsl)/1);
--neutral-4-hsl: 240 calc(var(--saturation-factor, 1) * 4.348%) 95.49%;
--neutral-5: hsl(var(--neutral-5-hsl)/1);
--neutral-5-hsl: 240 calc(var(--saturation-factor, 1) * 6.667%) 94.118%;
--neutral-6: hsl(var(--neutral-6-hsl)/1);
--neutral-6-hsl: 210 calc(var(--saturation-factor, 1) * 5.263%) 92.549%;
--neutral-7: hsl(var(--neutral-7-hsl)/1);
--neutral-7-hsl: 240 calc(var(--saturation-factor, 1) * 4.545%) 91.373%;
--neutral-8: hsl(var(--neutral-8-hsl)/1);
--neutral-8-hsl: 240 calc(var(--saturation-factor, 1) * 3.846%) 89.804%;
--neutral-9: hsl(var(--neutral-9-hsl)/1);
--neutral-9-hsl: 240 calc(var(--saturation-factor, 1) * 5.085%) 88.431%;
--neutral-10: hsl(var(--neutral-10-hsl)/1);
--neutral-10-hsl: 240 calc(var(--saturation-factor, 1) * 4.478%) 86.863%;
--neutral-11: hsl(var(--neutral-11-hsl)/1);
--neutral-11-hsl: 225 calc(var(--saturation-factor, 1) * 5.405%) 85.49%;
--neutral-12: hsl(var(--neutral-12-hsl)/1);
--neutral-12-hsl: 225 calc(var(--saturation-factor, 1) * 4.878%) 83.922%;
--neutral-13: hsl(var(--neutral-13-hsl)/1);
--neutral-13-hsl: 240 calc(var(--saturation-factor, 1) * 4.545%) 82.745%;
--neutral-14: hsl(var(--neutral-14-hsl)/1);
--neutral-14-hsl: 240 calc(var(--saturation-factor, 1) * 4.167%) 81.176%;
--neutral-15: hsl(var(--neutral-15-hsl)/1);
--neutral-15-hsl: 228 calc(var(--saturation-factor, 1) * 4.854%) 79.804%;
--neutral-16: hsl(var(--neutral-16-hsl)/1);
--neutral-16-hsl: 228 calc(var(--saturation-factor, 1) * 4.505%) 78.235%;
--neutral-17: hsl(var(--neutral-17-hsl)/1);
--neutral-17-hsl: 240 calc(var(--saturation-factor, 1) * 4.274%) 77.059%;
--neutral-18: hsl(var(--neutral-18-hsl)/1);
--neutral-18-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 75.49%;
--neutral-19: hsl(var(--neutral-19-hsl)/1);
--neutral-19-hsl: 230 calc(var(--saturation-factor, 1) * 4.545%) 74.118%;
--neutral-20: hsl(var(--neutral-20-hsl)/1);
--neutral-20-hsl: 230 calc(var(--saturation-factor, 1) * 4.286%) 72.549%;
--neutral-21: hsl(var(--neutral-21-hsl)/1);
--neutral-21-hsl: 240 calc(var(--saturation-factor, 1) * 4.11%) 71.373%;
--neutral-22: hsl(var(--neutral-22-hsl)/1);
--neutral-22-hsl: 231.429 calc(var(--saturation-factor, 1) * 4.575%) 70%;
--neutral-23: hsl(var(--neutral-23-hsl)/1);
--neutral-23-hsl: 231.429 calc(var(--saturation-factor, 1) * 4.348%) 68.431%;
--neutral-24: hsl(var(--neutral-24-hsl)/1);
--neutral-24-hsl: 240 calc(var(--saturation-factor, 1) * 4.192%) 67.255%;
--neutral-25: hsl(var(--neutral-25-hsl)/1);
--neutral-25-hsl: 231.429 calc(var(--saturation-factor, 1) * 4%) 65.686%;
--neutral-26: hsl(var(--neutral-26-hsl)/1);
--neutral-26-hsl: 232.5 calc(var(--saturation-factor, 1) * 4.396%) 64.314%;
--neutral-27: hsl(var(--neutral-27-hsl)/1);
--neutral-27-hsl: 232.5 calc(var(--saturation-factor, 1) * 4.255%) 63.137%;
--neutral-28: hsl(var(--neutral-28-hsl)/1);
--neutral-28-hsl: 232.5 calc(var(--saturation-factor, 1) * 4.082%) 61.569%;
--neutral-29: hsl(var(--neutral-29-hsl)/1);
--neutral-29-hsl: 232.5 calc(var(--saturation-factor, 1) * 3.96%) 60.392%;
--neutral-30: hsl(var(--neutral-30-hsl)/1);
--neutral-30-hsl: 233.333 calc(var(--saturation-factor, 1) * 4.306%) 59.02%;
--neutral-31: hsl(var(--neutral-31-hsl)/1);
--neutral-31-hsl: 232.5 calc(var(--saturation-factor, 1) * 3.704%) 57.647%;
--neutral-32: hsl(var(--neutral-32-hsl)/1);
--neutral-32-hsl: 233.333 calc(var(--saturation-factor, 1) * 4.036%) 56.275%;
--neutral-33: hsl(var(--neutral-33-hsl)/1);
--neutral-33-hsl: 233.333 calc(var(--saturation-factor, 1) * 3.93%) 55.098%;
--neutral-34: hsl(var(--neutral-34-hsl)/1);
--neutral-34-hsl: 233.333 calc(var(--saturation-factor, 1) * 3.797%) 53.529%;
--neutral-35: hsl(var(--neutral-35-hsl)/1);
--neutral-35-hsl: 233.333 calc(var(--saturation-factor, 1) * 3.704%) 52.353%;
--neutral-36: hsl(var(--neutral-36-hsl)/1);
--neutral-36-hsl: 234 calc(var(--saturation-factor, 1) * 4%) 50.98%;
--neutral-37: hsl(var(--neutral-37-hsl)/1);
--neutral-37-hsl: 233.333 calc(var(--saturation-factor, 1) * 3.557%) 49.608%;
--neutral-38: hsl(var(--neutral-38-hsl)/1);
--neutral-38-hsl: 234 calc(var(--saturation-factor, 1) * 4.065%) 48.235%;
--neutral-39: hsl(var(--neutral-39-hsl)/1);
--neutral-39-hsl: 234 calc(var(--saturation-factor, 1) * 4.167%) 47.059%;
--neutral-40: hsl(var(--neutral-40-hsl)/1);
--neutral-40-hsl: 234 calc(var(--saturation-factor, 1) * 4.274%) 45.882%;
--neutral-41: hsl(var(--neutral-41-hsl)/1);
--neutral-41-hsl: 234 calc(var(--saturation-factor, 1) * 4.425%) 44.314%;
--neutral-42: hsl(var(--neutral-42-hsl)/1);
--neutral-42-hsl: 234 calc(var(--saturation-factor, 1) * 4.545%) 43.137%;
--neutral-43: hsl(var(--neutral-43-hsl)/1);
--neutral-43-hsl: 234 calc(var(--saturation-factor, 1) * 4.673%) 41.961%;
--neutral-44: hsl(var(--neutral-44-hsl)/1);
--neutral-44-hsl: 234.545 calc(var(--saturation-factor, 1) * 5.314%) 40.588%;
--neutral-45: hsl(var(--neutral-45-hsl)/1);
--neutral-45-hsl: 234.545 calc(var(--saturation-factor, 1) * 5.473%) 39.412%;
--neutral-46: hsl(var(--neutral-46-hsl)/1);
--neutral-46-hsl: 234.545 calc(var(--saturation-factor, 1) * 5.641%) 38.235%;
--neutral-47: hsl(var(--neutral-47-hsl)/1);
--neutral-47-hsl: 234 calc(var(--saturation-factor, 1) * 5.319%) 36.863%;
--neutral-48: hsl(var(--neutral-48-hsl)/1);
--neutral-48-hsl: 234.545 calc(var(--saturation-factor, 1) * 6.077%) 35.49%;
--neutral-49: hsl(var(--neutral-49-hsl)/1);
--neutral-49-hsl: 234.545 calc(var(--saturation-factor, 1) * 6.286%) 34.314%;
--neutral-50: hsl(var(--neutral-50-hsl)/1);
--neutral-50-hsl: 234.545 calc(var(--saturation-factor, 1) * 6.509%) 33.137%;
--neutral-51: hsl(var(--neutral-51-hsl)/1);
--neutral-51-hsl: 234.545 calc(var(--saturation-factor, 1) * 6.667%) 32.353%;
--neutral-52: hsl(var(--neutral-52-hsl)/1);
--neutral-52-hsl: 234 calc(var(--saturation-factor, 1) * 6.173%) 31.765%;
--neutral-53: hsl(var(--neutral-53-hsl)/1);
--neutral-53-hsl: 234.545 calc(var(--saturation-factor, 1) * 6.918%) 31.176%;
--neutral-54: hsl(var(--neutral-54-hsl)/1);
--neutral-54-hsl: 234 calc(var(--saturation-factor, 1) * 6.41%) 30.588%;
--neutral-55: hsl(var(--neutral-55-hsl)/1);
--neutral-55-hsl: 234 calc(var(--saturation-factor, 1) * 6.579%) 29.804%;
--neutral-56: hsl(var(--neutral-56-hsl)/1);
--neutral-56-hsl: 233.333 calc(var(--saturation-factor, 1) * 6.04%) 29.216%;
--neutral-57: hsl(var(--neutral-57-hsl)/1);
--neutral-57-hsl: 233.333 calc(var(--saturation-factor, 1) * 6.207%) 28.431%;
--neutral-58: hsl(var(--neutral-58-hsl)/1);
--neutral-58-hsl: 240 calc(var(--saturation-factor, 1) * 6.294%) 28.039%;
--neutral-59: hsl(var(--neutral-59-hsl)/1);
--neutral-59-hsl: 233.333 calc(var(--saturation-factor, 1) * 6.475%) 27.255%;
--neutral-60: hsl(var(--neutral-60-hsl)/1);
--neutral-60-hsl: 233.333 calc(var(--saturation-factor, 1) * 6.667%) 26.471%;
--neutral-61: hsl(var(--neutral-61-hsl)/1);
--neutral-61-hsl: 232.5 calc(var(--saturation-factor, 1) * 6.061%) 25.882%;
--neutral-62: hsl(var(--neutral-62-hsl)/1);
--neutral-62-hsl: 233.333 calc(var(--saturation-factor, 1) * 6.977%) 25.294%;
--neutral-63: hsl(var(--neutral-63-hsl)/1);
--neutral-63-hsl: 232.5 calc(var(--saturation-factor, 1) * 6.349%) 24.706%;
--neutral-64: hsl(var(--neutral-64-hsl)/1);
--neutral-64-hsl: 232.5 calc(var(--saturation-factor, 1) * 6.557%) 23.922%;
--neutral-65: hsl(var(--neutral-65-hsl)/1);
--neutral-65-hsl: 232.5 calc(var(--saturation-factor, 1) * 6.667%) 23.529%;
--neutral-66: hsl(var(--neutral-66-hsl)/1);
--neutral-66-hsl: 232.5 calc(var(--saturation-factor, 1) * 6.897%) 22.745%;
--neutral-67: hsl(var(--neutral-67-hsl)/1);
--neutral-67-hsl: 231.429 calc(var(--saturation-factor, 1) * 6.195%) 22.157%;
--neutral-68: hsl(var(--neutral-68-hsl)/1);
--neutral-68-hsl: 240 calc(var(--saturation-factor, 1) * 5.455%) 21.569%;
--neutral-69: hsl(var(--neutral-69-hsl)/1);
--neutral-69-hsl: 231.429 calc(var(--saturation-factor, 1) * 6.542%) 20.98%;
--neutral-70: hsl(var(--neutral-70-hsl)/1);
--neutral-70-hsl: 240 calc(var(--saturation-factor, 1) * 5.769%) 20.392%;
--neutral-71: hsl(var(--neutral-71-hsl)/1);
--neutral-71-hsl: 230 calc(var(--saturation-factor, 1) * 6%) 19.608%;
--neutral-72: hsl(var(--neutral-72-hsl)/1);
--neutral-72-hsl: 240 calc(var(--saturation-factor, 1) * 6.122%) 19.216%;
--neutral-73: hsl(var(--neutral-73-hsl)/1);
--neutral-73-hsl: 230 calc(var(--saturation-factor, 1) * 6.383%) 18.431%;
--neutral-74: hsl(var(--neutral-74-hsl)/1);
--neutral-74-hsl: 240 calc(var(--saturation-factor, 1) * 6.522%) 18.039%;
--neutral-75: hsl(var(--neutral-75-hsl)/1);
--neutral-75-hsl: 230 calc(var(--saturation-factor, 1) * 6.818%) 17.255%;
--neutral-76: hsl(var(--neutral-76-hsl)/1);
--neutral-76-hsl: 240 calc(var(--saturation-factor, 1) * 5.882%) 16.667%;
--neutral-77: hsl(var(--neutral-77-hsl)/1);
--neutral-77-hsl: 240 calc(var(--saturation-factor, 1) * 6.024%) 16.275%;
--neutral-78: hsl(var(--neutral-78-hsl)/1);
--neutral-78-hsl: 228 calc(var(--saturation-factor, 1) * 6.329%) 15.49%;
--neutral-79: hsl(var(--neutral-79-hsl)/1);
--neutral-79-hsl: 240 calc(var(--saturation-factor, 1) * 6.494%) 15.098%;
--neutral-80: hsl(var(--neutral-80-hsl)/1);
--neutral-80-hsl: 228 calc(var(--saturation-factor, 1) * 6.849%) 14.314%;
--neutral-81: hsl(var(--neutral-81-hsl)/1);
--neutral-81-hsl: 240 calc(var(--saturation-factor, 1) * 5.714%) 13.725%;
--neutral-82: hsl(var(--neutral-82-hsl)/1);
--neutral-82-hsl: 240 calc(var(--saturation-factor, 1) * 5.882%) 13.333%;
--neutral-83: hsl(var(--neutral-83-hsl)/1);
--neutral-83-hsl: 225 calc(var(--saturation-factor, 1) * 6.25%) 12.549%;
--neutral-84: hsl(var(--neutral-84-hsl)/1);
--neutral-84-hsl: 240 calc(var(--saturation-factor, 1) * 6.452%) 12.157%;
--neutral-85: hsl(var(--neutral-85-hsl)/1);
--neutral-85-hsl: 225 calc(var(--saturation-factor, 1) * 6.897%) 11.373%;
--neutral-86: hsl(var(--neutral-86-hsl)/1);
--neutral-86-hsl: 240 calc(var(--saturation-factor, 1) * 7.143%) 10.98%;
--neutral-87: hsl(var(--neutral-87-hsl)/1);
--neutral-87-hsl: 240 calc(var(--saturation-factor, 1) * 5.66%) 10.392%;
--neutral-88: hsl(var(--neutral-88-hsl)/1);
--neutral-88-hsl: 225 calc(var(--saturation-factor, 1) * 8%) 9.804%;
--neutral-89: hsl(var(--neutral-89-hsl)/1);
--neutral-89-hsl: 240 calc(var(--saturation-factor, 1) * 6.383%) 9.216%;
--neutral-90: hsl(var(--neutral-90-hsl)/1);
--neutral-90-hsl: 240 calc(var(--saturation-factor, 1) * 6.667%) 8.824%;
--neutral-91: hsl(var(--neutral-91-hsl)/1);
--neutral-91-hsl: 220 calc(var(--saturation-factor, 1) * 7.317%) 8.039%;
--neutral-92: hsl(var(--neutral-92-hsl)/1);
--neutral-92-hsl: 240 calc(var(--saturation-factor, 1) * 5.263%) 7.451%;
--neutral-93: hsl(var(--neutral-93-hsl)/1);
--neutral-93-hsl: 240 calc(var(--saturation-factor, 1) * 8.571%) 6.863%;
--neutral-94: hsl(var(--neutral-94-hsl)/1);
--neutral-94-hsl: 240 calc(var(--saturation-factor, 1) * 6.667%) 5.882%;
--neutral-95: hsl(var(--neutral-95-hsl)/1);
--neutral-95-hsl: 240 calc(var(--saturation-factor, 1) * 7.692%) 5.098%;
--neutral-96: hsl(var(--neutral-96-hsl)/1);
--neutral-96-hsl: 240 calc(var(--saturation-factor, 1) * 9.091%) 4.314%;
--neutral-97: hsl(var(--neutral-97-hsl)/1);
--neutral-97-hsl: 240 calc(var(--saturation-factor, 1) * 12.5%) 3.137%;
--neutral-98: hsl(var(--neutral-98-hsl)/1);
--neutral-98-hsl: 240 calc(var(--saturation-factor, 1) * 9.091%) 2.157%;
--neutral-99: hsl(var(--neutral-99-hsl)/1);
--neutral-99-hsl: 240 calc(var(--saturation-factor, 1) * 20%) 0.98%;
--neutral-100: hsl(var(--neutral-100-hsl)/1);
--neutral-100-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
--blue-new-1: hsl(var(--blue-new-1-hsl)/1);
--blue-new-1-hsl: 216.923 calc(var(--saturation-factor, 1) * 100%) 94.902%;
--blue-new-2: hsl(var(--blue-new-2-hsl)/1);
--blue-new-2-hsl: 216.774 calc(var(--saturation-factor, 1) * 100%) 93.922%;
--blue-new-3: hsl(var(--blue-new-3-hsl)/1);
--blue-new-3-hsl: 216 calc(var(--saturation-factor, 1) * 100%) 93.137%;
--blue-new-4: hsl(var(--blue-new-4-hsl)/1);
--blue-new-4-hsl: 216 calc(var(--saturation-factor, 1) * 100%) 92.157%;
--blue-new-5: hsl(var(--blue-new-5-hsl)/1);
--blue-new-5-hsl: 215.455 calc(var(--saturation-factor, 1) * 100%) 91.373%;
--blue-new-6: hsl(var(--blue-new-6-hsl)/1);
--blue-new-6-hsl: 214.286 calc(var(--saturation-factor, 1) * 100%) 90.392%;
--blue-new-7: hsl(var(--blue-new-7-hsl)/1);
--blue-new-7-hsl: 215.094 calc(var(--saturation-factor, 1) * 100%) 89.608%;
--blue-new-8: hsl(var(--blue-new-8-hsl)/1);
--blue-new-8-hsl: 214.138 calc(var(--saturation-factor, 1) * 100%) 88.627%;
--blue-new-9: hsl(var(--blue-new-9-hsl)/1);
--blue-new-9-hsl: 213.871 calc(var(--saturation-factor, 1) * 100%) 87.843%;
--blue-new-10: hsl(var(--blue-new-10-hsl)/1);
--blue-new-10-hsl: 214.545 calc(var(--saturation-factor, 1) * 100%) 87.059%;
--blue-new-11: hsl(var(--blue-new-11-hsl)/1);
--blue-new-11-hsl: 213.803 calc(var(--saturation-factor, 1) * 100%) 86.078%;
--blue-new-12: hsl(var(--blue-new-12-hsl)/1);
--blue-new-12-hsl: 214.4 calc(var(--saturation-factor, 1) * 100%) 85.294%;
--blue-new-13: hsl(var(--blue-new-13-hsl)/1);
--blue-new-13-hsl: 214.177 calc(var(--saturation-factor, 1) * 100%) 84.51%;
--blue-new-14: hsl(var(--blue-new-14-hsl)/1);
--blue-new-14-hsl: 214.286 calc(var(--saturation-factor, 1) * 100%) 83.529%;
--blue-new-15: hsl(var(--blue-new-15-hsl)/1);
--blue-new-15-hsl: 213.793 calc(var(--saturation-factor, 1) * 97.753%) 82.549%;
--blue-new-16: hsl(var(--blue-new-16-hsl)/1);
--blue-new-16-hsl: 213.333 calc(var(--saturation-factor, 1) * 95.745%) 81.569%;
--blue-new-17: hsl(var(--blue-new-17-hsl)/1);
--blue-new-17-hsl: 213.83 calc(var(--saturation-factor, 1) * 95.918%) 80.784%;
--blue-new-18: hsl(var(--blue-new-18-hsl)/1);
--blue-new-18-hsl: 213.402 calc(var(--saturation-factor, 1) * 94.175%) 79.804%;
--blue-new-19: hsl(var(--blue-new-19-hsl)/1);
--blue-new-19-hsl: 213.861 calc(var(--saturation-factor, 1) * 94.393%) 79.02%;
--blue-new-20: hsl(var(--blue-new-20-hsl)/1);
--blue-new-20-hsl: 213.143 calc(var(--saturation-factor, 1) * 92.92%) 77.843%;
--blue-new-21: hsl(var(--blue-new-21-hsl)/1);
--blue-new-21-hsl: 213.333 calc(var(--saturation-factor, 1) * 91.525%) 76.863%;
--blue-new-22: hsl(var(--blue-new-22-hsl)/1);
--blue-new-22-hsl: 213.214 calc(var(--saturation-factor, 1) * 91.803%) 76.078%;
--blue-new-23: hsl(var(--blue-new-23-hsl)/1);
--blue-new-23-hsl: 213.391 calc(var(--saturation-factor, 1) * 90.551%) 75.098%;
--blue-new-24: hsl(var(--blue-new-24-hsl)/1);
--blue-new-24-hsl: 213.051 calc(var(--saturation-factor, 1) * 89.394%) 74.118%;
--blue-new-25: hsl(var(--blue-new-25-hsl)/1);
--blue-new-25-hsl: 213.443 calc(var(--saturation-factor, 1) * 89.706%) 73.333%;
--blue-new-26: hsl(var(--blue-new-26-hsl)/1);
--blue-new-26-hsl: 213.12 calc(var(--saturation-factor, 1) * 88.652%) 72.353%;
--blue-new-27: hsl(var(--blue-new-27-hsl)/1);
--blue-new-27-hsl: 213.281 calc(var(--saturation-factor, 1) * 87.671%) 71.373%;
--blue-new-28: hsl(var(--blue-new-28-hsl)/1);
--blue-new-28-hsl: 212.977 calc(var(--saturation-factor, 1) * 86.755%) 70.392%;
--blue-new-29: hsl(var(--blue-new-29-hsl)/1);
--blue-new-29-hsl: 213.333 calc(var(--saturation-factor, 1) * 87.097%) 69.608%;
--blue-new-30: hsl(var(--blue-new-30-hsl)/1);
--blue-new-30-hsl: 213.043 calc(var(--saturation-factor, 1) * 86.25%) 68.627%;
--blue-new-31: hsl(var(--blue-new-31-hsl)/1);
--blue-new-31-hsl: 213.191 calc(var(--saturation-factor, 1) * 85.455%) 67.647%;
--blue-new-32: hsl(var(--blue-new-32-hsl)/1);
--blue-new-32-hsl: 212.917 calc(var(--saturation-factor, 1) * 84.706%) 66.667%;
--blue-new-33: hsl(var(--blue-new-33-hsl)/1);
--blue-new-33-hsl: 213.061 calc(var(--saturation-factor, 1) * 84%) 65.686%;
--blue-new-34: hsl(var(--blue-new-34-hsl)/1);
--blue-new-34-hsl: 212.98 calc(var(--saturation-factor, 1) * 84.358%) 64.902%;
--blue-new-35: hsl(var(--blue-new-35-hsl)/1);
--blue-new-35-hsl: 213.117 calc(var(--saturation-factor, 1) * 83.696%) 63.922%;
--blue-new-36: hsl(var(--blue-new-36-hsl)/1);
--blue-new-36-hsl: 212.866 calc(var(--saturation-factor, 1) * 83.069%) 62.941%;
--blue-new-37: hsl(var(--blue-new-37-hsl)/1);
--blue-new-37-hsl: 212.795 calc(var(--saturation-factor, 1) * 82.564%) 61.765%;
--blue-new-38: hsl(var(--blue-new-38-hsl)/1);
--blue-new-38-hsl: 212.927 calc(var(--saturation-factor, 1) * 82%) 60.784%;
--blue-new-39: hsl(var(--blue-new-39-hsl)/1);
--blue-new-39-hsl: 212.695 calc(var(--saturation-factor, 1) * 81.463%) 59.804%;
--blue-new-40: hsl(var(--blue-new-40-hsl)/1);
--blue-new-40-hsl: 212.791 calc(var(--saturation-factor, 1) * 81.905%) 58.824%;
--blue-new-41: hsl(var(--blue-new-41-hsl)/1);
--blue-new-41-hsl: 212.571 calc(var(--saturation-factor, 1) * 81.395%) 57.843%;
--blue-new-42: hsl(var(--blue-new-42-hsl)/1);
--blue-new-42-hsl: 212.514 calc(var(--saturation-factor, 1) * 80.995%) 56.667%;
--blue-new-43: hsl(var(--blue-new-43-hsl)/1);
--blue-new-43-hsl: 212.459 calc(var(--saturation-factor, 1) * 80.617%) 55.49%;
--blue-new-44: hsl(var(--blue-new-44-hsl)/1);
--blue-new-44-hsl: 212.086 calc(var(--saturation-factor, 1) * 80.258%) 54.314%;
--blue-new-45: hsl(var(--blue-new-45-hsl)/1);
--blue-new-45-hsl: 211.875 calc(var(--saturation-factor, 1) * 80%) 52.941%;
--blue-new-46: hsl(var(--blue-new-46-hsl)/1);
--blue-new-46-hsl: 211.515 calc(var(--saturation-factor, 1) * 80.488%) 51.765%;
--blue-new-47: hsl(var(--blue-new-47-hsl)/1);
--blue-new-47-hsl: 211.176 calc(var(--saturation-factor, 1) * 80.315%) 50.196%;
--blue-new-48: hsl(var(--blue-new-48-hsl)/1);
--blue-new-48-hsl: 210.711 calc(var(--saturation-factor, 1) * 85.425%) 48.431%;
--blue-new-49: hsl(var(--blue-new-49-hsl)/1);
--blue-new-49-hsl: 209.327 calc(var(--saturation-factor, 1) * 95.708%) 45.686%;
--blue-new-50: hsl(var(--blue-new-50-hsl)/1);
--blue-new-50-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
--blue-new-51: hsl(var(--blue-new-51-hsl)/1);
--blue-new-51-hsl: 209.189 calc(var(--saturation-factor, 1) * 100%) 43.529%;
--blue-new-52: hsl(var(--blue-new-52-hsl)/1);
--blue-new-52-hsl: 209.309 calc(var(--saturation-factor, 1) * 100%) 42.549%;
--blue-new-53: hsl(var(--blue-new-53-hsl)/1);
--blue-new-53-hsl: 209.151 calc(var(--saturation-factor, 1) * 100%) 41.569%;
--blue-new-54: hsl(var(--blue-new-54-hsl)/1);
--blue-new-54-hsl: 209.126 calc(var(--saturation-factor, 1) * 99.038%) 40.784%;
--blue-new-55: hsl(var(--blue-new-55-hsl)/1);
--blue-new-55-hsl: 209.4 calc(var(--saturation-factor, 1) * 98.039%) 40%;
--blue-new-56: hsl(var(--blue-new-56-hsl)/1);
--blue-new-56-hsl: 209.388 calc(var(--saturation-factor, 1) * 98%) 39.216%;
--blue-new-57: hsl(var(--blue-new-57-hsl)/1);
--blue-new-57-hsl: 209.684 calc(var(--saturation-factor, 1) * 96.939%) 38.431%;
--blue-new-58: hsl(var(--blue-new-58-hsl)/1);
--blue-new-58-hsl: 209.514 calc(var(--saturation-factor, 1) * 96.859%) 37.451%;
--blue-new-59: hsl(var(--blue-new-59-hsl)/1);
--blue-new-59-hsl: 209.503 calc(var(--saturation-factor, 1) * 96.791%) 36.667%;
--blue-new-60: hsl(var(--blue-new-60-hsl)/1);
--blue-new-60-hsl: 209.492 calc(var(--saturation-factor, 1) * 97.79%) 35.49%;
--blue-new-61: hsl(var(--blue-new-61-hsl)/1);
--blue-new-61-hsl: 209.48 calc(var(--saturation-factor, 1) * 97.74%) 34.706%;
--blue-new-62: hsl(var(--blue-new-62-hsl)/1);
--blue-new-62-hsl: 209.294 calc(var(--saturation-factor, 1) * 98.837%) 33.725%;
--blue-new-63: hsl(var(--blue-new-63-hsl)/1);
--blue-new-63-hsl: 209.455 calc(var(--saturation-factor, 1) * 98.802%) 32.745%;
--blue-new-64: hsl(var(--blue-new-64-hsl)/1);
--blue-new-64-hsl: 209.259 calc(var(--saturation-factor, 1) * 100%) 31.765%;
--blue-new-65: hsl(var(--blue-new-65-hsl)/1);
--blue-new-65-hsl: 209.241 calc(var(--saturation-factor, 1) * 100%) 30.98%;
--blue-new-66: hsl(var(--blue-new-66-hsl)/1);
--blue-new-66-hsl: 209.221 calc(var(--saturation-factor, 1) * 100%) 30.196%;
--blue-new-67: hsl(var(--blue-new-67-hsl)/1);
--blue-new-67-hsl: 209.6 calc(var(--saturation-factor, 1) * 100%) 29.412%;
--blue-new-68: hsl(var(--blue-new-68-hsl)/1);
--blue-new-68-hsl: 209.589 calc(var(--saturation-factor, 1) * 100%) 28.627%;
--blue-new-69: hsl(var(--blue-new-69-hsl)/1);
--blue-new-69-hsl: 209.577 calc(var(--saturation-factor, 1) * 100%) 27.843%;
--blue-new-70: hsl(var(--blue-new-70-hsl)/1);
--blue-new-70-hsl: 209.565 calc(var(--saturation-factor, 1) * 100%) 27.059%;
--blue-new-71: hsl(var(--blue-new-71-hsl)/1);
--blue-new-71-hsl: 210 calc(var(--saturation-factor, 1) * 100%) 26.275%;
--blue-new-72: hsl(var(--blue-new-72-hsl)/1);
--blue-new-72-hsl: 210 calc(var(--saturation-factor, 1) * 100%) 25.49%;
--blue-new-73: hsl(var(--blue-new-73-hsl)/1);
--blue-new-73-hsl: 210 calc(var(--saturation-factor, 1) * 100%) 24.706%;
--blue-new-74: hsl(var(--blue-new-74-hsl)/1);
--blue-new-74-hsl: 210 calc(var(--saturation-factor, 1) * 100%) 23.922%;
--blue-new-75: hsl(var(--blue-new-75-hsl)/1);
--blue-new-75-hsl: 210.508 calc(var(--saturation-factor, 1) * 100%) 23.137%;
--blue-new-76: hsl(var(--blue-new-76-hsl)/1);
--blue-new-76-hsl: 210.783 calc(var(--saturation-factor, 1) * 100%) 22.549%;
--blue-new-77: hsl(var(--blue-new-77-hsl)/1);
--blue-new-77-hsl: 210.811 calc(var(--saturation-factor, 1) * 100%) 21.765%;
--blue-new-78: hsl(var(--blue-new-78-hsl)/1);
--blue-new-78-hsl: 210.841 calc(var(--saturation-factor, 1) * 100%) 20.98%;
--blue-new-79: hsl(var(--blue-new-79-hsl)/1);
--blue-new-79-hsl: 211.154 calc(var(--saturation-factor, 1) * 100%) 20.392%;
--blue-new-80: hsl(var(--blue-new-80-hsl)/1);
--blue-new-80-hsl: 211.2 calc(var(--saturation-factor, 1) * 100%) 19.608%;
--blue-new-81: hsl(var(--blue-new-81-hsl)/1);
--blue-new-81-hsl: 211.25 calc(var(--saturation-factor, 1) * 100%) 18.824%;
--blue-new-82: hsl(var(--blue-new-82-hsl)/1);
--blue-new-82-hsl: 212.258 calc(var(--saturation-factor, 1) * 100%) 18.235%;
--blue-new-83: hsl(var(--blue-new-83-hsl)/1);
--blue-new-83-hsl: 212.36 calc(var(--saturation-factor, 1) * 100%) 17.451%;
--blue-new-84: hsl(var(--blue-new-84-hsl)/1);
--blue-new-84-hsl: 212.791 calc(var(--saturation-factor, 1) * 100%) 16.863%;
--blue-new-85: hsl(var(--blue-new-85-hsl)/1);
--blue-new-85-hsl: 212.927 calc(var(--saturation-factor, 1) * 100%) 16.078%;
--blue-new-86: hsl(var(--blue-new-86-hsl)/1);
--blue-new-86-hsl: 213.418 calc(var(--saturation-factor, 1) * 100%) 15.49%;
--blue-new-87: hsl(var(--blue-new-87-hsl)/1);
--blue-new-87-hsl: 213.6 calc(var(--saturation-factor, 1) * 100%) 14.706%;
--blue-new-88: hsl(var(--blue-new-88-hsl)/1);
--blue-new-88-hsl: 214.167 calc(var(--saturation-factor, 1) * 100%) 14.118%;
--blue-new-89: hsl(var(--blue-new-89-hsl)/1);
--blue-new-89-hsl: 214.783 calc(var(--saturation-factor, 1) * 100%) 13.529%;
--blue-new-90: hsl(var(--blue-new-90-hsl)/1);
--blue-new-90-hsl: 215.077 calc(var(--saturation-factor, 1) * 100%) 12.745%;
--blue-new-91: hsl(var(--blue-new-91-hsl)/1);
--blue-new-91-hsl: 215.806 calc(var(--saturation-factor, 1) * 100%) 12.157%;
--blue-new-92: hsl(var(--blue-new-92-hsl)/1);
--blue-new-92-hsl: 216.61 calc(var(--saturation-factor, 1) * 100%) 11.569%;
--blue-new-93: hsl(var(--blue-new-93-hsl)/1);
--blue-new-93-hsl: 217.091 calc(var(--saturation-factor, 1) * 100%) 10.784%;
--blue-new-94: hsl(var(--blue-new-94-hsl)/1);
--blue-new-94-hsl: 217.647 calc(var(--saturation-factor, 1) * 100%) 10%;
--blue-new-95: hsl(var(--blue-new-95-hsl)/1);
--blue-new-95-hsl: 219.574 calc(var(--saturation-factor, 1) * 100%) 9.216%;
--blue-new-96: hsl(var(--blue-new-96-hsl)/1);
--blue-new-96-hsl: 221.429 calc(var(--saturation-factor, 1) * 100%) 8.235%;
--blue-new-97: hsl(var(--blue-new-97-hsl)/1);
--blue-new-97-hsl: 223.333 calc(var(--saturation-factor, 1) * 100%) 7.059%;
--blue-new-98: hsl(var(--blue-new-98-hsl)/1);
--blue-new-98-hsl: 227.586 calc(var(--saturation-factor, 1) * 100%) 5.686%;
--blue-new-99: hsl(var(--blue-new-99-hsl)/1);
--blue-new-99-hsl: 231 calc(var(--saturation-factor, 1) * 100%) 3.922%;
--blue-new-100: hsl(var(--blue-new-100-hsl)/1);
--blue-new-100-hsl: 240 calc(var(--saturation-factor, 1) * 100%) 1.373%;
--blurple-1: hsl(var(--blurple-1-hsl)/1);
--blurple-1-hsl: 230.4 calc(var(--saturation-factor, 1) * 100%) 95.098%;
--blurple-2: hsl(var(--blurple-2-hsl)/1);
--blurple-2-hsl: 231.429 calc(var(--saturation-factor, 1) * 100%) 94.51%;
--blurple-3: hsl(var(--blurple-3-hsl)/1);
--blurple-3-hsl: 230.625 calc(var(--saturation-factor, 1) * 100%) 93.725%;
--blurple-4: hsl(var(--blurple-4-hsl)/1);
--blurple-4-hsl: 228.333 calc(var(--saturation-factor, 1) * 100%) 92.941%;
--blurple-5: hsl(var(--blurple-5-hsl)/1);
--blurple-5-hsl: 229.231 calc(var(--saturation-factor, 1) * 100%) 92.353%;
--blurple-6: hsl(var(--blurple-6-hsl)/1);
--blurple-6-hsl: 227.442 calc(var(--saturation-factor, 1) * 100%) 91.569%;
--blurple-7: hsl(var(--blurple-7-hsl)/1);
--blurple-7-hsl: 228.261 calc(var(--saturation-factor, 1) * 100%) 90.98%;
--blurple-8: hsl(var(--blurple-8-hsl)/1);
--blurple-8-hsl: 228 calc(var(--saturation-factor, 1) * 100%) 90.196%;
--blurple-9: hsl(var(--blurple-9-hsl)/1);
--blurple-9-hsl: 227.547 calc(var(--saturation-factor, 1) * 100%) 89.608%;
--blurple-10: hsl(var(--blurple-10-hsl)/1);
--blurple-10-hsl: 228.214 calc(var(--saturation-factor, 1) * 100%) 89.02%;
--blurple-11: hsl(var(--blurple-11-hsl)/1);
--blurple-11-hsl: 227 calc(var(--saturation-factor, 1) * 100%) 88.235%;
--blurple-12: hsl(var(--blurple-12-hsl)/1);
--blurple-12-hsl: 227.619 calc(var(--saturation-factor, 1) * 100%) 87.647%;
--blurple-13: hsl(var(--blurple-13-hsl)/1);
--blurple-13-hsl: 227.463 calc(var(--saturation-factor, 1) * 100%) 86.863%;
--blurple-14: hsl(var(--blurple-14-hsl)/1);
--blurple-14-hsl: 227.143 calc(var(--saturation-factor, 1) * 100%) 86.275%;
--blurple-15: hsl(var(--blurple-15-hsl)/1);
--blurple-15-hsl: 227.671 calc(var(--saturation-factor, 1) * 100%) 85.686%;
--blurple-16: hsl(var(--blurple-16-hsl)/1);
--blurple-16-hsl: 227.368 calc(var(--saturation-factor, 1) * 100%) 85.098%;
--blurple-17: hsl(var(--blurple-17-hsl)/1);
--blurple-17-hsl: 227.848 calc(var(--saturation-factor, 1) * 100%) 84.51%;
--blurple-18: hsl(var(--blurple-18-hsl)/1);
--blurple-18-hsl: 227.711 calc(var(--saturation-factor, 1) * 100%) 83.725%;
--blurple-19: hsl(var(--blurple-19-hsl)/1);
--blurple-19-hsl: 227.442 calc(var(--saturation-factor, 1) * 100%) 83.137%;
--blurple-20: hsl(var(--blurple-20-hsl)/1);
--blurple-20-hsl: 227.865 calc(var(--saturation-factor, 1) * 100%) 82.549%;
--blurple-21: hsl(var(--blurple-21-hsl)/1);
--blurple-21-hsl: 228.261 calc(var(--saturation-factor, 1) * 100%) 81.961%;
--blurple-22: hsl(var(--blurple-22-hsl)/1);
--blurple-22-hsl: 228 calc(var(--saturation-factor, 1) * 100%) 81.373%;
--blurple-23: hsl(var(--blurple-23-hsl)/1);
--blurple-23-hsl: 228.367 calc(var(--saturation-factor, 1) * 100%) 80.784%;
--blurple-24: hsl(var(--blurple-24-hsl)/1);
--blurple-24-hsl: 228.713 calc(var(--saturation-factor, 1) * 100%) 80.196%;
--blurple-25: hsl(var(--blurple-25-hsl)/1);
--blurple-25-hsl: 228.462 calc(var(--saturation-factor, 1) * 100%) 79.608%;
--blurple-26: hsl(var(--blurple-26-hsl)/1);
--blurple-26-hsl: 228.785 calc(var(--saturation-factor, 1) * 100%) 79.02%;
--blurple-27: hsl(var(--blurple-27-hsl)/1);
--blurple-27-hsl: 228.991 calc(var(--saturation-factor, 1) * 98.198%) 78.235%;
--blurple-28: hsl(var(--blurple-28-hsl)/1);
--blurple-28-hsl: 229.189 calc(var(--saturation-factor, 1) * 98.23%) 77.843%;
--blurple-29: hsl(var(--blurple-29-hsl)/1);
--blurple-29-hsl: 229.381 calc(var(--saturation-factor, 1) * 96.581%) 77.059%;
--blurple-30: hsl(var(--blurple-30-hsl)/1);
--blurple-30-hsl: 229.655 calc(var(--saturation-factor, 1) * 96.667%) 76.471%;
--blurple-31: hsl(var(--blurple-31-hsl)/1);
--blurple-31-hsl: 229.322 calc(var(--saturation-factor, 1) * 95.161%) 75.686%;
--blurple-32: hsl(var(--blurple-32-hsl)/1);
--blurple-32-hsl: 229.5 calc(var(--saturation-factor, 1) * 93.75%) 74.902%;
--blurple-33: hsl(var(--blurple-33-hsl)/1);
--blurple-33-hsl: 230.164 calc(var(--saturation-factor, 1) * 93.846%) 74.51%;
--blurple-34: hsl(var(--blurple-34-hsl)/1);
--blurple-34-hsl: 230.323 calc(var(--saturation-factor, 1) * 92.537%) 73.725%;
--blurple-35: hsl(var(--blurple-35-hsl)/1);
--blurple-35-hsl: 230.476 calc(var(--saturation-factor, 1) * 92.647%) 73.333%;
--blurple-36: hsl(var(--blurple-36-hsl)/1);
--blurple-36-hsl: 230.625 calc(var(--saturation-factor, 1) * 91.429%) 72.549%;
--blurple-37: hsl(var(--blurple-37-hsl)/1);
--blurple-37-hsl: 230.84 calc(var(--saturation-factor, 1) * 91.608%) 71.961%;
--blurple-38: hsl(var(--blurple-38-hsl)/1);
--blurple-38-hsl: 231.364 calc(var(--saturation-factor, 1) * 90.411%) 71.373%;
--blurple-39: hsl(var(--blurple-39-hsl)/1);
--blurple-39-hsl: 231.111 calc(var(--saturation-factor, 1) * 90.604%) 70.784%;
--blurple-40: hsl(var(--blurple-40-hsl)/1);
--blurple-40-hsl: 231.618 calc(var(--saturation-factor, 1) * 89.474%) 70.196%;
--blurple-41: hsl(var(--blurple-41-hsl)/1);
--blurple-41-hsl: 231.739 calc(var(--saturation-factor, 1) * 88.462%) 69.412%;
--blurple-42: hsl(var(--blurple-42-hsl)/1);
--blurple-42-hsl: 232.286 calc(var(--saturation-factor, 1) * 88.608%) 69.02%;
--blurple-43: hsl(var(--blurple-43-hsl)/1);
--blurple-43-hsl: 232.766 calc(var(--saturation-factor, 1) * 87.578%) 68.431%;
--blurple-44: hsl(var(--blurple-44-hsl)/1);
--blurple-44-hsl: 232.917 calc(var(--saturation-factor, 1) * 87.805%) 67.843%;
--blurple-45: hsl(var(--blurple-45-hsl)/1);
--blurple-45-hsl: 232.966 calc(var(--saturation-factor, 1) * 86.826%) 67.255%;
--blurple-46: hsl(var(--blurple-46-hsl)/1);
--blurple-46-hsl: 233.469 calc(var(--saturation-factor, 1) * 86.982%) 66.863%;
--blurple-47: hsl(var(--blurple-47-hsl)/1);
--blurple-47-hsl: 233.919 calc(var(--saturation-factor, 1) * 86.047%) 66.275%;
--blurple-48: hsl(var(--blurple-48-hsl)/1);
--blurple-48-hsl: 234.4 calc(var(--saturation-factor, 1) * 86.207%) 65.882%;
--blurple-49: hsl(var(--blurple-49-hsl)/1);
--blurple-49-hsl: 234.474 calc(var(--saturation-factor, 1) * 85.393%) 65.098%;
--blurple-50: hsl(var(--blurple-50-hsl)/1);
--blurple-50-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
--blurple-51: hsl(var(--blurple-51-hsl)/1);
--blurple-51-hsl: 234.8 calc(var(--saturation-factor, 1) * 79.787%) 63.137%;
--blurple-52: hsl(var(--blurple-52-hsl)/1);
--blurple-52-hsl: 234.658 calc(var(--saturation-factor, 1) * 74.49%) 61.569%;
--blurple-53: hsl(var(--blurple-53-hsl)/1);
--blurple-53-hsl: 234.507 calc(var(--saturation-factor, 1) * 69.608%) 60%;
--blurple-54: hsl(var(--blurple-54-hsl)/1);
--blurple-54-hsl: 234.388 calc(var(--saturation-factor, 1) * 65.877%) 58.627%;
--blurple-55: hsl(var(--blurple-55-hsl)/1);
--blurple-55-hsl: 234.222 calc(var(--saturation-factor, 1) * 61.644%) 57.059%;
--blurple-56: hsl(var(--blurple-56-hsl)/1);
--blurple-56-hsl: 234.091 calc(var(--saturation-factor, 1) * 58.407%) 55.686%;
--blurple-57: hsl(var(--blurple-57-hsl)/1);
--blurple-57-hsl: 233.488 calc(var(--saturation-factor, 1) * 55.365%) 54.314%;
--blurple-58: hsl(var(--blurple-58-hsl)/1);
--blurple-58-hsl: 233.28 calc(var(--saturation-factor, 1) * 51.867%) 52.745%;
--blurple-59: hsl(var(--blurple-59-hsl)/1);
--blurple-59-hsl: 233.115 calc(var(--saturation-factor, 1) * 49.194%) 51.373%;
--blurple-60: hsl(var(--blurple-60-hsl)/1);
--blurple-60-hsl: 232.941 calc(var(--saturation-factor, 1) * 46.667%) 50%;
--blurple-61: hsl(var(--blurple-61-hsl)/1);
--blurple-61-hsl: 232.759 calc(var(--saturation-factor, 1) * 46.774%) 48.627%;
--blurple-62: hsl(var(--blurple-62-hsl)/1);
--blurple-62-hsl: 232.566 calc(var(--saturation-factor, 1) * 46.888%) 47.255%;
--blurple-63: hsl(var(--blurple-63-hsl)/1);
--blurple-63-hsl: 232.432 calc(var(--saturation-factor, 1) * 47.234%) 46.078%;
--blurple-64: hsl(var(--blurple-64-hsl)/1);
--blurple-64-hsl: 232.222 calc(var(--saturation-factor, 1) * 47.368%) 44.706%;
--blurple-65: hsl(var(--blurple-65-hsl)/1);
--blurple-65-hsl: 232 calc(var(--saturation-factor, 1) * 47.511%) 43.333%;
--blurple-66: hsl(var(--blurple-66-hsl)/1);
--blurple-66-hsl: 231.845 calc(var(--saturation-factor, 1) * 47.907%) 42.157%;
--blurple-67: hsl(var(--blurple-67-hsl)/1);
--blurple-67-hsl: 231.6 calc(var(--saturation-factor, 1) * 48.077%) 40.784%;
--blurple-68: hsl(var(--blurple-68-hsl)/1);
--blurple-68-hsl: 231.429 calc(var(--saturation-factor, 1) * 48.515%) 39.608%;
--blurple-69: hsl(var(--blurple-69-hsl)/1);
--blurple-69-hsl: 231.158 calc(var(--saturation-factor, 1) * 48.718%) 38.235%;
--blurple-70: hsl(var(--blurple-70-hsl)/1);
--blurple-70-hsl: 230.968 calc(var(--saturation-factor, 1) * 49.206%) 37.059%;
--blurple-71: hsl(var(--blurple-71-hsl)/1);
--blurple-71-hsl: 230.667 calc(var(--saturation-factor, 1) * 49.451%) 35.686%;
--blurple-72: hsl(var(--blurple-72-hsl)/1);
--blurple-72-hsl: 230.455 calc(var(--saturation-factor, 1) * 50%) 34.51%;
--blurple-73: hsl(var(--blurple-73-hsl)/1);
--blurple-73-hsl: 230.824 calc(var(--saturation-factor, 1) * 49.708%) 33.529%;
--blurple-74: hsl(var(--blurple-74-hsl)/1);
--blurple-74-hsl: 230.602 calc(var(--saturation-factor, 1) * 50.303%) 32.353%;
--blurple-75: hsl(var(--blurple-75-hsl)/1);
--blurple-75-hsl: 230.37 calc(var(--saturation-factor, 1) * 50.943%) 31.176%;
--blurple-76: hsl(var(--blurple-76-hsl)/1);
--blurple-76-hsl: 230 calc(var(--saturation-factor, 1) * 51.316%) 29.804%;
--blurple-77: hsl(var(--blurple-77-hsl)/1);
--blurple-77-hsl: 228.947 calc(var(--saturation-factor, 1) * 52.055%) 28.627%;
--blurple-78: hsl(var(--blurple-78-hsl)/1);
--blurple-78-hsl: 228.649 calc(var(--saturation-factor, 1) * 52.857%) 27.451%;
--blurple-79: hsl(var(--blurple-79-hsl)/1);
--blurple-79-hsl: 228.333 calc(var(--saturation-factor, 1) * 53.731%) 26.275%;
--blurple-80: hsl(var(--blurple-80-hsl)/1);
--blurple-80-hsl: 228.696 calc(var(--saturation-factor, 1) * 53.488%) 25.294%;
--blurple-81: hsl(var(--blurple-81-hsl)/1);
--blurple-81-hsl: 228.358 calc(var(--saturation-factor, 1) * 54.472%) 24.118%;
--blurple-82: hsl(var(--blurple-82-hsl)/1);
--blurple-82-hsl: 228 calc(var(--saturation-factor, 1) * 55.556%) 22.941%;
--blurple-83: hsl(var(--blurple-83-hsl)/1);
--blurple-83-hsl: 227.619 calc(var(--saturation-factor, 1) * 56.757%) 21.765%;
--blurple-84: hsl(var(--blurple-84-hsl)/1);
--blurple-84-hsl: 228.197 calc(var(--saturation-factor, 1) * 57.009%) 20.98%;
--blurple-85: hsl(var(--blurple-85-hsl)/1);
--blurple-85-hsl: 226.78 calc(var(--saturation-factor, 1) * 58.416%) 19.804%;
--blurple-86: hsl(var(--blurple-86-hsl)/1);
--blurple-86-hsl: 227.143 calc(var(--saturation-factor, 1) * 58.333%) 18.824%;
--blurple-87: hsl(var(--blurple-87-hsl)/1);
--blurple-87-hsl: 226.667 calc(var(--saturation-factor, 1) * 60%) 17.647%;
--blurple-88: hsl(var(--blurple-88-hsl)/1);
--blurple-88-hsl: 226.415 calc(var(--saturation-factor, 1) * 62.353%) 16.667%;
--blurple-89: hsl(var(--blurple-89-hsl)/1);
--blurple-89-hsl: 226.8 calc(var(--saturation-factor, 1) * 62.5%) 15.686%;
--blurple-90: hsl(var(--blurple-90-hsl)/1);
--blurple-90-hsl: 225 calc(var(--saturation-factor, 1) * 64.865%) 14.51%;
--blurple-91: hsl(var(--blurple-91-hsl)/1);
--blurple-91-hsl: 225.652 calc(var(--saturation-factor, 1) * 65.714%) 13.725%;
--blurple-92: hsl(var(--blurple-92-hsl)/1);
--blurple-92-hsl: 225 calc(var(--saturation-factor, 1) * 68.75%) 12.549%;
--blurple-93: hsl(var(--blurple-93-hsl)/1);
--blurple-93-hsl: 225.366 calc(var(--saturation-factor, 1) * 69.492%) 11.569%;
--blurple-94: hsl(var(--blurple-94-hsl)/1);
--blurple-94-hsl: 225.789 calc(var(--saturation-factor, 1) * 70.37%) 10.588%;
--blurple-95: hsl(var(--blurple-95-hsl)/1);
--blurple-95-hsl: 224.571 calc(var(--saturation-factor, 1) * 74.468%) 9.216%;
--blurple-96: hsl(var(--blurple-96-hsl)/1);
--blurple-96-hsl: 224.516 calc(var(--saturation-factor, 1) * 75.61%) 8.039%;
--blurple-97: hsl(var(--blurple-97-hsl)/1);
--blurple-97-hsl: 226.154 calc(var(--saturation-factor, 1) * 76.471%) 6.667%;
--blurple-98: hsl(var(--blurple-98-hsl)/1);
--blurple-98-hsl: 227.368 calc(var(--saturation-factor, 1) * 76%) 4.902%;
--blurple-99: hsl(var(--blurple-99-hsl)/1);
--blurple-99-hsl: 229.091 calc(var(--saturation-factor, 1) * 84.615%) 2.549%;
--blurple-100: hsl(var(--blurple-100-hsl)/1);
--blurple-100-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
--green-new-1: hsl(var(--green-new-1-hsl)/1);
--green-new-1-hsl: 137.455 calc(var(--saturation-factor, 1) * 100%) 89.216%;
--green-new-2: hsl(var(--green-new-2-hsl)/1);
--green-new-2-hsl: 136.552 calc(var(--saturation-factor, 1) * 100%) 88.627%;
--green-new-3: hsl(var(--green-new-3-hsl)/1);
--green-new-3-hsl: 136.271 calc(var(--saturation-factor, 1) * 90.769%) 87.255%;
--green-new-4: hsl(var(--green-new-4-hsl)/1);
--green-new-4-hsl: 137 calc(var(--saturation-factor, 1) * 83.333%) 85.882%;
--green-new-5: hsl(var(--green-new-5-hsl)/1);
--green-new-5-hsl: 135.738 calc(var(--saturation-factor, 1) * 79.221%) 84.902%;
--green-new-6: hsl(var(--green-new-6-hsl)/1);
--green-new-6-hsl: 136.452 calc(var(--saturation-factor, 1) * 73.81%) 83.529%;
--green-new-7: hsl(var(--green-new-7-hsl)/1);
--green-new-7-hsl: 135.938 calc(var(--saturation-factor, 1) * 71.111%) 82.353%;
--green-new-8: hsl(var(--green-new-8-hsl)/1);
--green-new-8-hsl: 135.938 calc(var(--saturation-factor, 1) * 66.667%) 81.176%;
--green-new-9: hsl(var(--green-new-9-hsl)/1);
--green-new-9-hsl: 136.364 calc(var(--saturation-factor, 1) * 64.706%) 80%;
--green-new-10: hsl(var(--green-new-10-hsl)/1);
--green-new-10-hsl: 136.364 calc(var(--saturation-factor, 1) * 61.111%) 78.824%;
--green-new-11: hsl(var(--green-new-11-hsl)/1);
--green-new-11-hsl: 135.882 calc(var(--saturation-factor, 1) * 59.649%) 77.647%;
--green-new-12: hsl(var(--green-new-12-hsl)/1);
--green-new-12-hsl: 136.522 calc(var(--saturation-factor, 1) * 57.025%) 76.275%;
--green-new-13: hsl(var(--green-new-13-hsl)/1);
--green-new-13-hsl: 136.522 calc(var(--saturation-factor, 1) * 54.331%) 75.098%;
--green-new-14: hsl(var(--green-new-14-hsl)/1);
--green-new-14-hsl: 136.901 calc(var(--saturation-factor, 1) * 53.383%) 73.922%;
--green-new-15: hsl(var(--green-new-15-hsl)/1);
--green-new-15-hsl: 136.056 calc(var(--saturation-factor, 1) * 51.079%) 72.745%;
--green-new-16: hsl(var(--green-new-16-hsl)/1);
--green-new-16-hsl: 136.438 calc(var(--saturation-factor, 1) * 50.345%) 71.569%;
--green-new-17: hsl(var(--green-new-17-hsl)/1);
--green-new-17-hsl: 136.438 calc(var(--saturation-factor, 1) * 48.344%) 70.392%;
--green-new-18: hsl(var(--green-new-18-hsl)/1);
--green-new-18-hsl: 136.8 calc(var(--saturation-factor, 1) * 47.771%) 69.216%;
--green-new-19: hsl(var(--green-new-19-hsl)/1);
--green-new-19-hsl: 136.8 calc(var(--saturation-factor, 1) * 46.012%) 68.039%;
--green-new-20: hsl(var(--green-new-20-hsl)/1);
--green-new-20-hsl: 137.368 calc(var(--saturation-factor, 1) * 44.706%) 66.667%;
--green-new-21: hsl(var(--green-new-21-hsl)/1);
--green-new-21-hsl: 137.143 calc(var(--saturation-factor, 1) * 44%) 65.686%;
--green-new-22: hsl(var(--green-new-22-hsl)/1);
--green-new-22-hsl: 137.143 calc(var(--saturation-factor, 1) * 42.541%) 64.51%;
--green-new-23: hsl(var(--green-new-23-hsl)/1);
--green-new-23-hsl: 137.468 calc(var(--saturation-factor, 1) * 42.246%) 63.333%;
--green-new-24: hsl(var(--green-new-24-hsl)/1);
--green-new-24-hsl: 137.468 calc(var(--saturation-factor, 1) * 40.933%) 62.157%;
--green-new-25: hsl(var(--green-new-25-hsl)/1);
--green-new-25-hsl: 137.778 calc(var(--saturation-factor, 1) * 40.704%) 60.98%;
--green-new-26: hsl(var(--green-new-26-hsl)/1);
--green-new-26-hsl: 137.778 calc(var(--saturation-factor, 1) * 39.512%) 59.804%;
--green-new-27: hsl(var(--green-new-27-hsl)/1);
--green-new-27-hsl: 138.072 calc(var(--saturation-factor, 1) * 39.336%) 58.627%;
--green-new-28: hsl(var(--green-new-28-hsl)/1);
--green-new-28-hsl: 138.072 calc(var(--saturation-factor, 1) * 38.249%) 57.451%;
--green-new-29: hsl(var(--green-new-29-hsl)/1);
--green-new-29-hsl: 138.353 calc(var(--saturation-factor, 1) * 38.117%) 56.275%;
--green-new-30: hsl(var(--green-new-30-hsl)/1);
--green-new-30-hsl: 138.353 calc(var(--saturation-factor, 1) * 37.118%) 55.098%;
--green-new-31: hsl(var(--green-new-31-hsl)/1);
--green-new-31-hsl: 138.837 calc(var(--saturation-factor, 1) * 36.441%) 53.725%;
--green-new-32: hsl(var(--green-new-32-hsl)/1);
--green-new-32-hsl: 139.31 calc(var(--saturation-factor, 1) * 36.1%) 52.745%;
--green-new-33: hsl(var(--green-new-33-hsl)/1);
--green-new-33-hsl: 139.773 calc(var(--saturation-factor, 1) * 35.484%) 51.373%;
--green-new-34: hsl(var(--green-new-34-hsl)/1);
--green-new-34-hsl: 140 calc(var(--saturation-factor, 1) * 35.433%) 50.196%;
--green-new-35: hsl(var(--green-new-35-hsl)/1);
--green-new-35-hsl: 140 calc(var(--saturation-factor, 1) * 36%) 49.02%;
--green-new-36: hsl(var(--green-new-36-hsl)/1);
--green-new-36-hsl: 140.217 calc(var(--saturation-factor, 1) * 37.705%) 47.843%;
--green-new-37: hsl(var(--green-new-37-hsl)/1);
--green-new-37-hsl: 140.645 calc(var(--saturation-factor, 1) * 39.241%) 46.471%;
--green-new-38: hsl(var(--green-new-38-hsl)/1);
--green-new-38-hsl: 141.064 calc(var(--saturation-factor, 1) * 40.517%) 45.49%;
--green-new-39: hsl(var(--green-new-39-hsl)/1);
--green-new-39-hsl: 141.474 calc(var(--saturation-factor, 1) * 42.222%) 44.118%;
--green-new-40: hsl(var(--green-new-40-hsl)/1);
--green-new-40-hsl: 141.649 calc(var(--saturation-factor, 1) * 44.292%) 42.941%;
--green-new-41: hsl(var(--green-new-41-hsl)/1);
--green-new-41-hsl: 142.041 calc(var(--saturation-factor, 1) * 46.226%) 41.569%;
--green-new-42: hsl(var(--green-new-42-hsl)/1);
--green-new-42-hsl: 143.168 calc(var(--saturation-factor, 1) * 49.268%) 40.196%;
--green-new-43: hsl(var(--green-new-43-hsl)/1);
--green-new-43-hsl: 143.529 calc(var(--saturation-factor, 1) * 51.515%) 38.824%;
--green-new-44: hsl(var(--green-new-44-hsl)/1);
--green-new-44-hsl: 144 calc(var(--saturation-factor, 1) * 54.974%) 37.451%;
--green-new-45: hsl(var(--green-new-45-hsl)/1);
--green-new-45-hsl: 145.234 calc(var(--saturation-factor, 1) * 58.47%) 35.882%;
--green-new-46: hsl(var(--green-new-46-hsl)/1);
--green-new-46-hsl: 145.636 calc(var(--saturation-factor, 1) * 62.5%) 34.51%;
--green-new-47: hsl(var(--green-new-47-hsl)/1);
--green-new-47-hsl: 146.316 calc(var(--saturation-factor, 1) * 67.857%) 32.941%;
--green-new-48: hsl(var(--green-new-48-hsl)/1);
--green-new-48-hsl: 147.731 calc(var(--saturation-factor, 1) * 75.796%) 30.784%;
--green-new-49: hsl(var(--green-new-49-hsl)/1);
--green-new-49-hsl: 149.764 calc(var(--saturation-factor, 1) * 87.586%) 28.431%;
--green-new-50: hsl(var(--green-new-50-hsl)/1);
--green-new-50-hsl: 151.128 calc(var(--saturation-factor, 1) * 100%) 26.078%;
--green-new-51: hsl(var(--green-new-51-hsl)/1);
--green-new-51-hsl: 151.145 calc(var(--saturation-factor, 1) * 100%) 25.686%;
--green-new-52: hsl(var(--green-new-52-hsl)/1);
--green-new-52-hsl: 151.406 calc(var(--saturation-factor, 1) * 100%) 25.098%;
--green-new-53: hsl(var(--green-new-53-hsl)/1);
--green-new-53-hsl: 150.968 calc(var(--saturation-factor, 1) * 98.413%) 24.706%;
--green-new-54: hsl(var(--green-new-54-hsl)/1);
--green-new-54-hsl: 150.984 calc(var(--saturation-factor, 1) * 98.387%) 24.314%;
--green-new-55: hsl(var(--green-new-55-hsl)/1);
--green-new-55-hsl: 150.756 calc(var(--saturation-factor, 1) * 98.347%) 23.725%;
--green-new-56: hsl(var(--green-new-56-hsl)/1);
--green-new-56-hsl: 150.769 calc(var(--saturation-factor, 1) * 98.319%) 23.333%;
--green-new-57: hsl(var(--green-new-57-hsl)/1);
--green-new-57-hsl: 151.053 calc(var(--saturation-factor, 1) * 98.276%) 22.745%;
--green-new-58: hsl(var(--green-new-58-hsl)/1);
--green-new-58-hsl: 150.536 calc(var(--saturation-factor, 1) * 98.246%) 22.353%;
--green-new-59: hsl(var(--green-new-59-hsl)/1);
--green-new-59-hsl: 150.826 calc(var(--saturation-factor, 1) * 98.198%) 21.765%;
--green-new-60: hsl(var(--green-new-60-hsl)/1);
--green-new-60-hsl: 150.556 calc(var(--saturation-factor, 1) * 100%) 21.176%;
--green-new-61: hsl(var(--green-new-61-hsl)/1);
--green-new-61-hsl: 150.857 calc(var(--saturation-factor, 1) * 100%) 20.588%;
--green-new-62: hsl(var(--green-new-62-hsl)/1);
--green-new-62-hsl: 150.291 calc(var(--saturation-factor, 1) * 100%) 20.196%;
--green-new-63: hsl(var(--green-new-63-hsl)/1);
--green-new-63-hsl: 150.6 calc(var(--saturation-factor, 1) * 100%) 19.608%;
--green-new-64: hsl(var(--green-new-64-hsl)/1);
--green-new-64-hsl: 150 calc(var(--saturation-factor, 1) * 100%) 19.216%;
--green-new-65: hsl(var(--green-new-65-hsl)/1);
--green-new-65-hsl: 150.316 calc(var(--saturation-factor, 1) * 100%) 18.627%;
--green-new-66: hsl(var(--green-new-66-hsl)/1);
--green-new-66-hsl: 149.677 calc(var(--saturation-factor, 1) * 100%) 18.235%;
--green-new-67: hsl(var(--green-new-67-hsl)/1);
--green-new-67-hsl: 149.67 calc(var(--saturation-factor, 1) * 100%) 17.843%;
--green-new-68: hsl(var(--green-new-68-hsl)/1);
--green-new-68-hsl: 149.318 calc(var(--saturation-factor, 1) * 100%) 17.255%;
--green-new-69: hsl(var(--green-new-69-hsl)/1);
--green-new-69-hsl: 149.302 calc(var(--saturation-factor, 1) * 100%) 16.863%;
--green-new-70: hsl(var(--green-new-70-hsl)/1);
--green-new-70-hsl: 148.571 calc(var(--saturation-factor, 1) * 100%) 16.471%;
--green-new-71: hsl(var(--green-new-71-hsl)/1);
--green-new-71-hsl: 148.889 calc(var(--saturation-factor, 1) * 100%) 15.882%;
--green-new-72: hsl(var(--green-new-72-hsl)/1);
--green-new-72-hsl: 148.101 calc(var(--saturation-factor, 1) * 100%) 15.49%;
--green-new-73: hsl(var(--green-new-73-hsl)/1);
--green-new-73-hsl: 148.052 calc(var(--saturation-factor, 1) * 100%) 15.098%;
--green-new-74: hsl(var(--green-new-74-hsl)/1);
--green-new-74-hsl: 147.568 calc(var(--saturation-factor, 1) * 100%) 14.51%;
--green-new-75: hsl(var(--green-new-75-hsl)/1);
--green-new-75-hsl: 147.5 calc(var(--saturation-factor, 1) * 100%) 14.118%;
--green-new-76: hsl(var(--green-new-76-hsl)/1);
--green-new-76-hsl: 146.571 calc(var(--saturation-factor, 1) * 100%) 13.725%;
--green-new-77: hsl(var(--green-new-77-hsl)/1);
--green-new-77-hsl: 146.866 calc(var(--saturation-factor, 1) * 100%) 13.137%;
--green-new-78: hsl(var(--green-new-78-hsl)/1);
--green-new-78-hsl: 145.846 calc(var(--saturation-factor, 1) * 100%) 12.745%;
--green-new-79: hsl(var(--green-new-79-hsl)/1);
--green-new-79-hsl: 145.714 calc(var(--saturation-factor, 1) * 100%) 12.353%;
--green-new-80: hsl(var(--green-new-80-hsl)/1);
--green-new-80-hsl: 144.59 calc(var(--saturation-factor, 1) * 100%) 11.961%;
--green-new-81: hsl(var(--green-new-81-hsl)/1);
--green-new-81-hsl: 144.407 calc(var(--saturation-factor, 1) * 100%) 11.569%;
--green-new-82: hsl(var(--green-new-82-hsl)/1);
--green-new-82-hsl: 143.571 calc(var(--saturation-factor, 1) * 100%) 10.98%;
--green-new-83: hsl(var(--green-new-83-hsl)/1);
--green-new-83-hsl: 143.333 calc(var(--saturation-factor, 1) * 100%) 10.588%;
--green-new-84: hsl(var(--green-new-84-hsl)/1);
--green-new-84-hsl: 143.077 calc(var(--saturation-factor, 1) * 100%) 10.196%;
--green-new-85: hsl(var(--green-new-85-hsl)/1);
--green-new-85-hsl: 141.6 calc(var(--saturation-factor, 1) * 100%) 9.804%;
--green-new-86: hsl(var(--green-new-86-hsl)/1);
--green-new-86-hsl: 141.25 calc(var(--saturation-factor, 1) * 100%) 9.412%;
--green-new-87: hsl(var(--green-new-87-hsl)/1);
--green-new-87-hsl: 139.565 calc(var(--saturation-factor, 1) * 100%) 9.02%;
--green-new-88: hsl(var(--green-new-88-hsl)/1);
--green-new-88-hsl: 139.535 calc(var(--saturation-factor, 1) * 100%) 8.431%;
--green-new-89: hsl(var(--green-new-89-hsl)/1);
--green-new-89-hsl: 139.024 calc(var(--saturation-factor, 1) * 100%) 8.039%;
--green-new-90: hsl(var(--green-new-90-hsl)/1);
--green-new-90-hsl: 138.462 calc(var(--saturation-factor, 1) * 100%) 7.647%;
--green-new-91: hsl(var(--green-new-91-hsl)/1);
--green-new-91-hsl: 136.216 calc(var(--saturation-factor, 1) * 100%) 7.255%;
--green-new-92: hsl(var(--green-new-92-hsl)/1);
--green-new-92-hsl: 135.429 calc(var(--saturation-factor, 1) * 100%) 6.863%;
--green-new-93: hsl(var(--green-new-93-hsl)/1);
--green-new-93-hsl: 134.545 calc(var(--saturation-factor, 1) * 100%) 6.471%;
--green-new-94: hsl(var(--green-new-94-hsl)/1);
--green-new-94-hsl: 133.548 calc(var(--saturation-factor, 1) * 100%) 6.078%;
--green-new-95: hsl(var(--green-new-95-hsl)/1);
--green-new-95-hsl: 132.414 calc(var(--saturation-factor, 1) * 100%) 5.686%;
--green-new-96: hsl(var(--green-new-96-hsl)/1);
--green-new-96-hsl: 131.111 calc(var(--saturation-factor, 1) * 100%) 5.294%;
--green-new-97: hsl(var(--green-new-97-hsl)/1);
--green-new-97-hsl: 129.6 calc(var(--saturation-factor, 1) * 100%) 4.902%;
--green-new-98: hsl(var(--green-new-98-hsl)/1);
--green-new-98-hsl: 128.182 calc(var(--saturation-factor, 1) * 100%) 4.314%;
--green-new-99: hsl(var(--green-new-99-hsl)/1);
--green-new-99-hsl: 129.474 calc(var(--saturation-factor, 1) * 100%) 3.725%;
--green-new-100: hsl(var(--green-new-100-hsl)/1);
--green-new-100-hsl: 127.5 calc(var(--saturation-factor, 1) * 100%) 3.137%;
--red-new-1: hsl(var(--red-new-1-hsl)/1);
--red-new-1-hsl: 1.765 calc(var(--saturation-factor, 1) * 100%) 93.333%;
--red-new-2: hsl(var(--red-new-2-hsl)/1);
--red-new-2-hsl: 1.579 calc(var(--saturation-factor, 1) * 100%) 92.549%;
--red-new-3: hsl(var(--red-new-3-hsl)/1);
--red-new-3-hsl: 1.429 calc(var(--saturation-factor, 1) * 100%) 91.765%;
--red-new-4: hsl(var(--red-new-4-hsl)/1);
--red-new-4-hsl: 2.609 calc(var(--saturation-factor, 1) * 100%) 90.98%;
--red-new-5: hsl(var(--red-new-5-hsl)/1);
--red-new-5-hsl: 2.4 calc(var(--saturation-factor, 1) * 100%) 90.196%;
--red-new-6: hsl(var(--red-new-6-hsl)/1);
--red-new-6-hsl: 2.222 calc(var(--saturation-factor, 1) * 100%) 89.412%;
--red-new-7: hsl(var(--red-new-7-hsl)/1);
--red-new-7-hsl: 3.103 calc(var(--saturation-factor, 1) * 100%) 88.627%;
--red-new-8: hsl(var(--red-new-8-hsl)/1);
--red-new-8-hsl: 2.903 calc(var(--saturation-factor, 1) * 100%) 87.843%;
--red-new-9: hsl(var(--red-new-9-hsl)/1);
--red-new-9-hsl: 2.727 calc(var(--saturation-factor, 1) * 100%) 87.059%;
--red-new-10: hsl(var(--red-new-10-hsl)/1);
--red-new-10-hsl: 3.429 calc(var(--saturation-factor, 1) * 100%) 86.275%;
--red-new-11: hsl(var(--red-new-11-hsl)/1);
--red-new-11-hsl: 3.243 calc(var(--saturation-factor, 1) * 100%) 85.49%;
--red-new-12: hsl(var(--red-new-12-hsl)/1);
--red-new-12-hsl: 3.846 calc(var(--saturation-factor, 1) * 100%) 84.706%;
--red-new-13: hsl(var(--red-new-13-hsl)/1);
--red-new-13-hsl: 2.963 calc(var(--saturation-factor, 1) * 100%) 84.118%;
--red-new-14: hsl(var(--red-new-14-hsl)/1);
--red-new-14-hsl: 2.824 calc(var(--saturation-factor, 1) * 100%) 83.333%;
--red-new-15: hsl(var(--red-new-15-hsl)/1);
--red-new-15-hsl: 3.371 calc(var(--saturation-factor, 1) * 100%) 82.549%;
--red-new-16: hsl(var(--red-new-16-hsl)/1);
--red-new-16-hsl: 2.609 calc(var(--saturation-factor, 1) * 100%) 81.961%;
--red-new-17: hsl(var(--red-new-17-hsl)/1);
--red-new-17-hsl: 3.125 calc(var(--saturation-factor, 1) * 100%) 81.176%;
--red-new-18: hsl(var(--red-new-18-hsl)/1);
--red-new-18-hsl: 3 calc(var(--saturation-factor, 1) * 100%) 80.392%;
--red-new-19: hsl(var(--red-new-19-hsl)/1);
--red-new-19-hsl: 2.913 calc(var(--saturation-factor, 1) * 100%) 79.804%;
--red-new-20: hsl(var(--red-new-20-hsl)/1);
--red-new-20-hsl: 3.364 calc(var(--saturation-factor, 1) * 100%) 79.02%;
--red-new-21: hsl(var(--red-new-21-hsl)/1);
--red-new-21-hsl: 2.727 calc(var(--saturation-factor, 1) * 100%) 78.431%;
--red-new-22: hsl(var(--red-new-22-hsl)/1);
--red-new-22-hsl: 2.655 calc(var(--saturation-factor, 1) * 100%) 77.843%;
--red-new-23: hsl(var(--red-new-23-hsl)/1);
--red-new-23-hsl: 2.586 calc(var(--saturation-factor, 1) * 98.305%) 76.863%;
--red-new-24: hsl(var(--red-new-24-hsl)/1);
--red-new-24-hsl: 2.542 calc(var(--saturation-factor, 1) * 96.721%) 76.078%;
--red-new-25: hsl(var(--red-new-25-hsl)/1);
--red-new-25-hsl: 2 calc(var(--saturation-factor, 1) * 95.238%) 75.294%;
--red-new-26: hsl(var(--red-new-26-hsl)/1);
--red-new-26-hsl: 2.439 calc(var(--saturation-factor, 1) * 93.893%) 74.314%;
--red-new-27: hsl(var(--red-new-27-hsl)/1);
--red-new-27-hsl: 2.4 calc(var(--saturation-factor, 1) * 92.593%) 73.529%;
--red-new-28: hsl(var(--red-new-28-hsl)/1);
--red-new-28-hsl: 1.905 calc(var(--saturation-factor, 1) * 90%) 72.549%;
--red-new-29: hsl(var(--red-new-29-hsl)/1);
--red-new-29-hsl: 1.875 calc(var(--saturation-factor, 1) * 88.889%) 71.765%;
--red-new-30: hsl(var(--red-new-30-hsl)/1);
--red-new-30-hsl: 1.385 calc(var(--saturation-factor, 1) * 87.838%) 70.98%;
--red-new-31: hsl(var(--red-new-31-hsl)/1);
--red-new-31-hsl: 1.818 calc(var(--saturation-factor, 1) * 85.714%) 69.804%;
--red-new-32: hsl(var(--red-new-32-hsl)/1);
--red-new-32-hsl: 1.343 calc(var(--saturation-factor, 1) * 84.81%) 69.02%;
--red-new-33: hsl(var(--red-new-33-hsl)/1);
--red-new-33-hsl: 1.333 calc(var(--saturation-factor, 1) * 82.822%) 68.039%;
--red-new-34: hsl(var(--red-new-34-hsl)/1);
--red-new-34-hsl: 1.314 calc(var(--saturation-factor, 1) * 82.036%) 67.255%;
--red-new-35: hsl(var(--red-new-35-hsl)/1);
--red-new-35-hsl: 0.87 calc(var(--saturation-factor, 1) * 80.233%) 66.275%;
--red-new-36: hsl(var(--red-new-36-hsl)/1);
--red-new-36-hsl: 0.863 calc(var(--saturation-factor, 1) * 78.531%) 65.294%;
--red-new-37: hsl(var(--red-new-37-hsl)/1);
--red-new-37-hsl: 0.426 calc(var(--saturation-factor, 1) * 77.901%) 64.51%;
--red-new-38: hsl(var(--red-new-38-hsl)/1);
--red-new-38-hsl: 0.423 calc(var(--saturation-factor, 1) * 76.344%) 63.529%;
--red-new-39: hsl(var(--red-new-39-hsl)/1);
--red-new-39-hsl: 0 calc(var(--saturation-factor, 1) * 74.869%) 62.549%;
--red-new-40: hsl(var(--red-new-40-hsl)/1);
--red-new-40-hsl: 359.586 calc(var(--saturation-factor, 1) * 73.604%) 61.373%;
--red-new-41: hsl(var(--red-new-41-hsl)/1);
--red-new-41-hsl: 359.592 calc(var(--saturation-factor, 1) * 73.134%) 60.588%;
--red-new-42: hsl(var(--red-new-42-hsl)/1);
--red-new-42-hsl: 358.792 calc(var(--saturation-factor, 1) * 71.981%) 59.412%;
--red-new-43: hsl(var(--red-new-43-hsl)/1);
--red-new-43-hsl: 358.411 calc(var(--saturation-factor, 1) * 70.892%) 58.235%;
--red-new-44: hsl(var(--red-new-44-hsl)/1);
--red-new-44-hsl: 358.421 calc(var(--saturation-factor, 1) * 69.725%) 57.255%;
--red-new-45: hsl(var(--red-new-45-hsl)/1);
--red-new-45-hsl: 358.052 calc(var(--saturation-factor, 1) * 68.75%) 56.078%;
--red-new-46: hsl(var(--red-new-46-hsl)/1);
--red-new-46-hsl: 357.692 calc(var(--saturation-factor, 1) * 67.826%) 54.902%;
--red-new-47: hsl(var(--red-new-47-hsl)/1);
--red-new-47-hsl: 357.342 calc(var(--saturation-factor, 1) * 66.949%) 53.725%;
--red-new-48: hsl(var(--red-new-48-hsl)/1);
--red-new-48-hsl: 356.625 calc(var(--saturation-factor, 1) * 66.116%) 52.549%;
--red-new-49: hsl(var(--red-new-49-hsl)/1);
--red-new-49-hsl: 355.951 calc(var(--saturation-factor, 1) * 65.462%) 51.176%;
--red-new-50: hsl(var(--red-new-50-hsl)/1);
--red-new-50-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
--red-new-51: hsl(var(--red-new-51-hsl)/1);
--red-new-51-hsl: 355.556 calc(var(--saturation-factor, 1) * 64.8%) 49.02%;
--red-new-52: hsl(var(--red-new-52-hsl)/1);
--red-new-52-hsl: 355.472 calc(var(--saturation-factor, 1) * 64.898%) 48.039%;
--red-new-53: hsl(var(--red-new-53-hsl)/1);
--red-new-53-hsl: 355.355 calc(var(--saturation-factor, 1) * 64.854%) 46.863%;
--red-new-54: hsl(var(--red-new-54-hsl)/1);
--red-new-54-hsl: 355.263 calc(var(--saturation-factor, 1) * 64.957%) 45.882%;
--red-new-55: hsl(var(--red-new-55-hsl)/1);
--red-new-55-hsl: 355.541 calc(var(--saturation-factor, 1) * 64.348%) 45.098%;
--red-new-56: hsl(var(--red-new-56-hsl)/1);
--red-new-56-hsl: 355.068 calc(var(--saturation-factor, 1) * 65.179%) 43.922%;
--red-new-57: hsl(var(--red-new-57-hsl)/1);
--red-new-57-hsl: 355.385 calc(var(--saturation-factor, 1) * 65.297%) 42.941%;
--red-new-58: hsl(var(--red-new-58-hsl)/1);
--red-new-58-hsl: 355.286 calc(var(--saturation-factor, 1) * 65.421%) 41.961%;
--red-new-59: hsl(var(--red-new-59-hsl)/1);
--red-new-59-hsl: 355.182 calc(var(--saturation-factor, 1) * 65.55%) 40.98%;
--red-new-60: hsl(var(--red-new-60-hsl)/1);
--red-new-60-hsl: 355.075 calc(var(--saturation-factor, 1) * 65.686%) 40%;
--red-new-61: hsl(var(--red-new-61-hsl)/1);
--red-new-61-hsl: 355 calc(var(--saturation-factor, 1) * 66%) 39.216%;
--red-new-62: hsl(var(--red-new-62-hsl)/1);
--red-new-62-hsl: 355.349 calc(var(--saturation-factor, 1) * 66.154%) 38.235%;
--red-new-63: hsl(var(--red-new-63-hsl)/1);
--red-new-63-hsl: 354.803 calc(var(--saturation-factor, 1) * 67.196%) 37.059%;
--red-new-64: hsl(var(--red-new-64-hsl)/1);
--red-new-64-hsl: 354.677 calc(var(--saturation-factor, 1) * 67.391%) 36.078%;
--red-new-65: hsl(var(--red-new-65-hsl)/1);
--red-new-65-hsl: 354.59 calc(var(--saturation-factor, 1) * 67.778%) 35.294%;
--red-new-66: hsl(var(--red-new-66-hsl)/1);
--red-new-66-hsl: 354.5 calc(var(--saturation-factor, 1) * 68.966%) 34.118%;
--red-new-67: hsl(var(--red-new-67-hsl)/1);
--red-new-67-hsl: 354.359 calc(var(--saturation-factor, 1) * 69.231%) 33.137%;
--red-new-68: hsl(var(--red-new-68-hsl)/1);
--red-new-68-hsl: 353.793 calc(var(--saturation-factor, 1) * 70.732%) 32.157%;
--red-new-69: hsl(var(--red-new-69-hsl)/1);
--red-new-69-hsl: 353.628 calc(var(--saturation-factor, 1) * 71.069%) 31.176%;
--red-new-70: hsl(var(--red-new-70-hsl)/1);
--red-new-70-hsl: 354.054 calc(var(--saturation-factor, 1) * 71.613%) 30.392%;
--red-new-71: hsl(var(--red-new-71-hsl)/1);
--red-new-71-hsl: 353.394 calc(var(--saturation-factor, 1) * 73.154%) 29.216%;
--red-new-72: hsl(var(--red-new-72-hsl)/1);
--red-new-72-hsl: 353.271 calc(var(--saturation-factor, 1) * 73.793%) 28.431%;
--red-new-73: hsl(var(--red-new-73-hsl)/1);
--red-new-73-hsl: 352.571 calc(var(--saturation-factor, 1) * 75.54%) 27.255%;
--red-new-74: hsl(var(--red-new-74-hsl)/1);
--red-new-74-hsl: 353.01 calc(var(--saturation-factor, 1) * 76.296%) 26.471%;
--red-new-75: hsl(var(--red-new-75-hsl)/1);
--red-new-75-hsl: 352.277 calc(var(--saturation-factor, 1) * 78.295%) 25.294%;
--red-new-76: hsl(var(--red-new-76-hsl)/1);
--red-new-76-hsl: 351.6 calc(var(--saturation-factor, 1) * 80.645%) 24.314%;
--red-new-77: hsl(var(--red-new-77-hsl)/1);
--red-new-77-hsl: 351.34 calc(var(--saturation-factor, 1) * 81.513%) 23.333%;
--red-new-78: hsl(var(--red-new-78-hsl)/1);
--red-new-78-hsl: 351.25 calc(var(--saturation-factor, 1) * 84.211%) 22.353%;
--red-new-79: hsl(var(--red-new-79-hsl)/1);
--red-new-79-hsl: 351.064 calc(var(--saturation-factor, 1) * 85.455%) 21.569%;
--red-new-80: hsl(var(--red-new-80-hsl)/1);
--red-new-80-hsl: 350.217 calc(var(--saturation-factor, 1) * 88.462%) 20.392%;
--red-new-81: hsl(var(--red-new-81-hsl)/1);
--red-new-81-hsl: 350 calc(var(--saturation-factor, 1) * 90%) 19.608%;
--red-new-82: hsl(var(--red-new-82-hsl)/1);
--red-new-82-hsl: 349.773 calc(var(--saturation-factor, 1) * 91.667%) 18.824%;
--red-new-83: hsl(var(--red-new-83-hsl)/1);
--red-new-83-hsl: 349.412 calc(var(--saturation-factor, 1) * 93.407%) 17.843%;
--red-new-84: hsl(var(--red-new-84-hsl)/1);
--red-new-84-hsl: 349.157 calc(var(--saturation-factor, 1) * 95.402%) 17.059%;
--red-new-85: hsl(var(--red-new-85-hsl)/1);
--red-new-85-hsl: 348.889 calc(var(--saturation-factor, 1) * 97.59%) 16.275%;
--red-new-86: hsl(var(--red-new-86-hsl)/1);
--red-new-86-hsl: 348.608 calc(var(--saturation-factor, 1) * 100%) 15.49%;
--red-new-87: hsl(var(--red-new-87-hsl)/1);
--red-new-87-hsl: 348.8 calc(var(--saturation-factor, 1) * 100%) 14.706%;
--red-new-88: hsl(var(--red-new-88-hsl)/1);
--red-new-88-hsl: 349.167 calc(var(--saturation-factor, 1) * 100%) 14.118%;
--red-new-89: hsl(var(--red-new-89-hsl)/1);
--red-new-89-hsl: 349.565 calc(var(--saturation-factor, 1) * 100%) 13.529%;
--red-new-90: hsl(var(--red-new-90-hsl)/1);
--red-new-90-hsl: 350 calc(var(--saturation-factor, 1) * 100%) 12.941%;
--red-new-91: hsl(var(--red-new-91-hsl)/1);
--red-new-91-hsl: 350.476 calc(var(--saturation-factor, 1) * 100%) 12.353%;
--red-new-92: hsl(var(--red-new-92-hsl)/1);
--red-new-92-hsl: 351 calc(var(--saturation-factor, 1) * 100%) 11.765%;
--red-new-93: hsl(var(--red-new-93-hsl)/1);
--red-new-93-hsl: 351.579 calc(var(--saturation-factor, 1) * 100%) 11.176%;
--red-new-94: hsl(var(--red-new-94-hsl)/1);
--red-new-94-hsl: 352.075 calc(var(--saturation-factor, 1) * 100%) 10.392%;
--red-new-95: hsl(var(--red-new-95-hsl)/1);
--red-new-95-hsl: 351.6 calc(var(--saturation-factor, 1) * 100%) 9.804%;
--red-new-96: hsl(var(--red-new-96-hsl)/1);
--red-new-96-hsl: 352 calc(var(--saturation-factor, 1) * 100%) 8.824%;
--red-new-97: hsl(var(--red-new-97-hsl)/1);
--red-new-97-hsl: 352.683 calc(var(--saturation-factor, 1) * 100%) 8.039%;
--red-new-98: hsl(var(--red-new-98-hsl)/1);
--red-new-98-hsl: 353.143 calc(var(--saturation-factor, 1) * 100%) 6.863%;
--red-new-99: hsl(var(--red-new-99-hsl)/1);
--red-new-99-hsl: 351.724 calc(var(--saturation-factor, 1) * 100%) 5.686%;
--red-new-100: hsl(var(--red-new-100-hsl)/1);
--red-new-100-hsl: 354 calc(var(--saturation-factor, 1) * 100%) 3.922%;
--teal-new-1: hsl(var(--teal-new-1-hsl)/1);
--teal-new-1-hsl: 183.396 calc(var(--saturation-factor, 1) * 100%) 89.608%;
--teal-new-2: hsl(var(--teal-new-2-hsl)/1);
--teal-new-2-hsl: 186.316 calc(var(--saturation-factor, 1) * 100%) 88.824%;
--teal-new-3: hsl(var(--teal-new-3-hsl)/1);
--teal-new-3-hsl: 186.102 calc(var(--saturation-factor, 1) * 93.651%) 87.647%;
--teal-new-4: hsl(var(--teal-new-4-hsl)/1);
--teal-new-4-hsl: 186.774 calc(var(--saturation-factor, 1) * 88.571%) 86.275%;
--teal-new-5: hsl(var(--teal-new-5-hsl)/1);
--teal-new-5-hsl: 185.714 calc(var(--saturation-factor, 1) * 81.818%) 84.902%;
--teal-new-6: hsl(var(--teal-new-6-hsl)/1);
--teal-new-6-hsl: 185.538 calc(var(--saturation-factor, 1) * 78.313%) 83.725%;
--teal-new-7: hsl(var(--teal-new-7-hsl)/1);
--teal-new-7-hsl: 186.176 calc(var(--saturation-factor, 1) * 75.556%) 82.353%;
--teal-new-8: hsl(var(--teal-new-8-hsl)/1);
--teal-new-8-hsl: 186 calc(var(--saturation-factor, 1) * 72.917%) 81.176%;
--teal-new-9: hsl(var(--teal-new-9-hsl)/1);
--teal-new-9-hsl: 185.915 calc(var(--saturation-factor, 1) * 68.932%) 79.804%;
--teal-new-10: hsl(var(--teal-new-10-hsl)/1);
--teal-new-10-hsl: 185.676 calc(var(--saturation-factor, 1) * 67.273%) 78.431%;
--teal-new-11: hsl(var(--teal-new-11-hsl)/1);
--teal-new-11-hsl: 186.316 calc(var(--saturation-factor, 1) * 65.517%) 77.255%;
--teal-new-12: hsl(var(--teal-new-12-hsl)/1);
--teal-new-12-hsl: 185.455 calc(var(--saturation-factor, 1) * 62.602%) 75.882%;
--teal-new-13: hsl(var(--teal-new-13-hsl)/1);
--teal-new-13-hsl: 185.316 calc(var(--saturation-factor, 1) * 61.24%) 74.706%;
--teal-new-14: hsl(var(--teal-new-14-hsl)/1);
--teal-new-14-hsl: 185.926 calc(var(--saturation-factor, 1) * 60%) 73.529%;
--teal-new-15: hsl(var(--teal-new-15-hsl)/1);
--teal-new-15-hsl: 185.06 calc(var(--saturation-factor, 1) * 58.042%) 71.961%;
--teal-new-16: hsl(var(--teal-new-16-hsl)/1);
--teal-new-16-hsl: 185.647 calc(var(--saturation-factor, 1) * 57.047%) 70.784%;
--teal-new-17: hsl(var(--teal-new-17-hsl)/1);
--teal-new-17-hsl: 185.517 calc(var(--saturation-factor, 1) * 56.129%) 69.608%;
--teal-new-18: hsl(var(--teal-new-18-hsl)/1);
--teal-new-18-hsl: 186.067 calc(var(--saturation-factor, 1) * 55.28%) 68.431%;
--teal-new-19: hsl(var(--teal-new-19-hsl)/1);
--teal-new-19-hsl: 185.275 calc(var(--saturation-factor, 1) * 53.846%) 66.863%;
--teal-new-20: hsl(var(--teal-new-20-hsl)/1);
--teal-new-20-hsl: 185.806 calc(var(--saturation-factor, 1) * 53.143%) 65.686%;
--teal-new-21: hsl(var(--teal-new-21-hsl)/1);
--teal-new-21-hsl: 185.684 calc(var(--saturation-factor, 1) * 52.486%) 64.51%;
--teal-new-22: hsl(var(--teal-new-22-hsl)/1);
--teal-new-22-hsl: 185 calc(var(--saturation-factor, 1) * 51.064%) 63.137%;
--teal-new-23: hsl(var(--teal-new-23-hsl)/1);
--teal-new-23-hsl: 185.455 calc(var(--saturation-factor, 1) * 50.769%) 61.765%;
--teal-new-24: hsl(var(--teal-new-24-hsl)/1);
--teal-new-24-hsl: 185.347 calc(var(--saturation-factor, 1) * 50.249%) 60.588%;
--teal-new-25: hsl(var(--teal-new-25-hsl)/1);
--teal-new-25-hsl: 185.243 calc(var(--saturation-factor, 1) * 49.282%) 59.02%;
--teal-new-26: hsl(var(--teal-new-26-hsl)/1);
--teal-new-26-hsl: 185.143 calc(var(--saturation-factor, 1) * 48.837%) 57.843%;
--teal-new-27: hsl(var(--teal-new-27-hsl)/1);
--teal-new-27-hsl: 185.556 calc(var(--saturation-factor, 1) * 48.649%) 56.471%;
--teal-new-28: hsl(var(--teal-new-28-hsl)/1);
--teal-new-28-hsl: 184.954 calc(var(--saturation-factor, 1) * 47.598%) 55.098%;
--teal-new-29: hsl(var(--teal-new-29-hsl)/1);
--teal-new-29-hsl: 184.821 calc(var(--saturation-factor, 1) * 47.458%) 53.725%;
--teal-new-30: hsl(var(--teal-new-30-hsl)/1);
--teal-new-30-hsl: 185.217 calc(var(--saturation-factor, 1) * 47.325%) 52.353%;
--teal-new-31: hsl(var(--teal-new-31-hsl)/1);
--teal-new-31-hsl: 184.615 calc(var(--saturation-factor, 1) * 46.614%) 50.784%;
--teal-new-32: hsl(var(--teal-new-32-hsl)/1);
--teal-new-32-hsl: 184.959 calc(var(--saturation-factor, 1) * 48.207%) 49.216%;
--teal-new-33: hsl(var(--teal-new-33-hsl)/1);
--teal-new-33-hsl: 184.839 calc(var(--saturation-factor, 1) * 50.82%) 47.843%;
--teal-new-34: hsl(var(--teal-new-34-hsl)/1);
--teal-new-34-hsl: 185.156 calc(var(--saturation-factor, 1) * 54.237%) 46.275%;
--teal-new-35: hsl(var(--teal-new-35-hsl)/1);
--teal-new-35-hsl: 184.545 calc(var(--saturation-factor, 1) * 58.407%) 44.314%;
--teal-new-36: hsl(var(--teal-new-36-hsl)/1);
--teal-new-36-hsl: 184.38 calc(var(--saturation-factor, 1) * 63.134%) 42.549%;
--teal-new-37: hsl(var(--teal-new-37-hsl)/1);
--teal-new-37-hsl: 184.615 calc(var(--saturation-factor, 1) * 69.082%) 40.588%;
--teal-new-38: hsl(var(--teal-new-38-hsl)/1);
--teal-new-38-hsl: 183.974 calc(var(--saturation-factor, 1) * 78.238%) 37.843%;
--teal-new-39: hsl(var(--teal-new-39-hsl)/1);
--teal-new-39-hsl: 183.976 calc(var(--saturation-factor, 1) * 95.402%) 34.118%;
--teal-new-40: hsl(var(--teal-new-40-hsl)/1);
--teal-new-40-hsl: 183.929 calc(var(--saturation-factor, 1) * 100%) 32.941%;
--teal-new-41: hsl(var(--teal-new-41-hsl)/1);
--teal-new-41-hsl: 183.976 calc(var(--saturation-factor, 1) * 100%) 32.549%;
--teal-new-42: hsl(var(--teal-new-42-hsl)/1);
--teal-new-42-hsl: 184.049 calc(var(--saturation-factor, 1) * 100%) 31.961%;
--teal-new-43: hsl(var(--teal-new-43-hsl)/1);
--teal-new-43-hsl: 184.099 calc(var(--saturation-factor, 1) * 100%) 31.569%;
--teal-new-44: hsl(var(--teal-new-44-hsl)/1);
--teal-new-44-hsl: 184.528 calc(var(--saturation-factor, 1) * 100%) 31.176%;
--teal-new-45: hsl(var(--teal-new-45-hsl)/1);
--teal-new-45-hsl: 184.586 calc(var(--saturation-factor, 1) * 100%) 30.784%;
--teal-new-46: hsl(var(--teal-new-46-hsl)/1);
--teal-new-46-hsl: 184.286 calc(var(--saturation-factor, 1) * 100%) 30.196%;
--teal-new-47: hsl(var(--teal-new-47-hsl)/1);
--teal-new-47-hsl: 184.371 calc(var(--saturation-factor, 1) * 100%) 29.608%;
--teal-new-48: hsl(var(--teal-new-48-hsl)/1);
--teal-new-48-hsl: 184.832 calc(var(--saturation-factor, 1) * 100%) 29.216%;
--teal-new-49: hsl(var(--teal-new-49-hsl)/1);
--teal-new-49-hsl: 184.932 calc(var(--saturation-factor, 1) * 100%) 28.627%;
--teal-new-50: hsl(var(--teal-new-50-hsl)/1);
--teal-new-50-hsl: 184.615 calc(var(--saturation-factor, 1) * 100%) 28.039%;
--teal-new-51: hsl(var(--teal-new-51-hsl)/1);
--teal-new-51-hsl: 184.714 calc(var(--saturation-factor, 1) * 100%) 27.451%;
--teal-new-52: hsl(var(--teal-new-52-hsl)/1);
--teal-new-52-hsl: 184.783 calc(var(--saturation-factor, 1) * 100%) 27.059%;
--teal-new-53: hsl(var(--teal-new-53-hsl)/1);
--teal-new-53-hsl: 184.889 calc(var(--saturation-factor, 1) * 100%) 26.471%;
--teal-new-54: hsl(var(--teal-new-54-hsl)/1);
--teal-new-54-hsl: 184.545 calc(var(--saturation-factor, 1) * 100%) 25.882%;
--teal-new-55: hsl(var(--teal-new-55-hsl)/1);
--teal-new-55-hsl: 185.077 calc(var(--saturation-factor, 1) * 100%) 25.49%;
--teal-new-56: hsl(var(--teal-new-56-hsl)/1);
--teal-new-56-hsl: 184.724 calc(var(--saturation-factor, 1) * 100%) 24.902%;
--teal-new-57: hsl(var(--teal-new-57-hsl)/1);
--teal-new-57-hsl: 185.28 calc(var(--saturation-factor, 1) * 100%) 24.51%;
--teal-new-58: hsl(var(--teal-new-58-hsl)/1);
--teal-new-58-hsl: 184.918 calc(var(--saturation-factor, 1) * 100%) 23.922%;
--teal-new-59: hsl(var(--teal-new-59-hsl)/1);
--teal-new-59-hsl: 185.5 calc(var(--saturation-factor, 1) * 100%) 23.529%;
--teal-new-60: hsl(var(--teal-new-60-hsl)/1);
--teal-new-60-hsl: 185.128 calc(var(--saturation-factor, 1) * 100%) 22.941%;
--teal-new-61: hsl(var(--teal-new-61-hsl)/1);
--teal-new-61-hsl: 185.739 calc(var(--saturation-factor, 1) * 100%) 22.549%;
--teal-new-62: hsl(var(--teal-new-62-hsl)/1);
--teal-new-62-hsl: 185.357 calc(var(--saturation-factor, 1) * 100%) 21.961%;
--teal-new-63: hsl(var(--teal-new-63-hsl)/1);
--teal-new-63-hsl: 186 calc(var(--saturation-factor, 1) * 100%) 21.569%;
--teal-new-64: hsl(var(--teal-new-64-hsl)/1);
--teal-new-64-hsl: 185.607 calc(var(--saturation-factor, 1) * 100%) 20.98%;
--teal-new-65: hsl(var(--teal-new-65-hsl)/1);
--teal-new-65-hsl: 186.286 calc(var(--saturation-factor, 1) * 100%) 20.588%;
--teal-new-66: hsl(var(--teal-new-66-hsl)/1);
--teal-new-66-hsl: 185.882 calc(var(--saturation-factor, 1) * 100%) 20%;
--teal-new-67: hsl(var(--teal-new-67-hsl)/1);
--teal-new-67-hsl: 186.6 calc(var(--saturation-factor, 1) * 100%) 19.608%;
--teal-new-68: hsl(var(--teal-new-68-hsl)/1);
--teal-new-68-hsl: 186.186 calc(var(--saturation-factor, 1) * 100%) 19.02%;
--teal-new-69: hsl(var(--teal-new-69-hsl)/1);
--teal-new-69-hsl: 186.316 calc(var(--saturation-factor, 1) * 100%) 18.627%;
--teal-new-70: hsl(var(--teal-new-70-hsl)/1);
--teal-new-70-hsl: 186.522 calc(var(--saturation-factor, 1) * 100%) 18.039%;
--teal-new-71: hsl(var(--teal-new-71-hsl)/1);
--teal-new-71-hsl: 186.667 calc(var(--saturation-factor, 1) * 100%) 17.647%;
--teal-new-72: hsl(var(--teal-new-72-hsl)/1);
--teal-new-72-hsl: 186.818 calc(var(--saturation-factor, 1) * 100%) 17.255%;
--teal-new-73: hsl(var(--teal-new-73-hsl)/1);
--teal-new-73-hsl: 187.059 calc(var(--saturation-factor, 1) * 100%) 16.667%;
--teal-new-74: hsl(var(--teal-new-74-hsl)/1);
--teal-new-74-hsl: 187.229 calc(var(--saturation-factor, 1) * 100%) 16.275%;
--teal-new-75: hsl(var(--teal-new-75-hsl)/1);
--teal-new-75-hsl: 186.75 calc(var(--saturation-factor, 1) * 100%) 15.686%;
--teal-new-76: hsl(var(--teal-new-76-hsl)/1);
--teal-new-76-hsl: 187.692 calc(var(--saturation-factor, 1) * 100%) 15.294%;
--teal-new-77: hsl(var(--teal-new-77-hsl)/1);
--teal-new-77-hsl: 187.895 calc(var(--saturation-factor, 1) * 100%) 14.902%;
--teal-new-78: hsl(var(--teal-new-78-hsl)/1);
--teal-new-78-hsl: 187.397 calc(var(--saturation-factor, 1) * 100%) 14.314%;
--teal-new-79: hsl(var(--teal-new-79-hsl)/1);
--teal-new-79-hsl: 188.451 calc(var(--saturation-factor, 1) * 100%) 13.922%;
--teal-new-80: hsl(var(--teal-new-80-hsl)/1);
--teal-new-80-hsl: 188.696 calc(var(--saturation-factor, 1) * 100%) 13.529%;
--teal-new-81: hsl(var(--teal-new-81-hsl)/1);
--teal-new-81-hsl: 188.182 calc(var(--saturation-factor, 1) * 100%) 12.941%;
--teal-new-82: hsl(var(--teal-new-82-hsl)/1);
--teal-new-82-hsl: 188.438 calc(var(--saturation-factor, 1) * 100%) 12.549%;
--teal-new-83: hsl(var(--teal-new-83-hsl)/1);
--teal-new-83-hsl: 189.677 calc(var(--saturation-factor, 1) * 100%) 12.157%;
--teal-new-84: hsl(var(--teal-new-84-hsl)/1);
--teal-new-84-hsl: 189.153 calc(var(--saturation-factor, 1) * 100%) 11.569%;
--teal-new-85: hsl(var(--teal-new-85-hsl)/1);
--teal-new-85-hsl: 189.474 calc(var(--saturation-factor, 1) * 100%) 11.176%;
--teal-new-86: hsl(var(--teal-new-86-hsl)/1);
--teal-new-86-hsl: 189.818 calc(var(--saturation-factor, 1) * 100%) 10.784%;
--teal-new-87: hsl(var(--teal-new-87-hsl)/1);
--teal-new-87-hsl: 190.189 calc(var(--saturation-factor, 1) * 100%) 10.392%;
--teal-new-88: hsl(var(--teal-new-88-hsl)/1);
--teal-new-88-hsl: 190.588 calc(var(--saturation-factor, 1) * 100%) 10%;
--teal-new-89: hsl(var(--teal-new-89-hsl)/1);
--teal-new-89-hsl: 191.25 calc(var(--saturation-factor, 1) * 100%) 9.412%;
--teal-new-90: hsl(var(--teal-new-90-hsl)/1);
--teal-new-90-hsl: 191.739 calc(var(--saturation-factor, 1) * 100%) 9.02%;
--teal-new-91: hsl(var(--teal-new-91-hsl)/1);
--teal-new-91-hsl: 192.273 calc(var(--saturation-factor, 1) * 100%) 8.627%;
--teal-new-92: hsl(var(--teal-new-92-hsl)/1);
--teal-new-92-hsl: 192.857 calc(var(--saturation-factor, 1) * 100%) 8.235%;
--teal-new-93: hsl(var(--teal-new-93-hsl)/1);
--teal-new-93-hsl: 193.5 calc(var(--saturation-factor, 1) * 100%) 7.843%;
--teal-new-94: hsl(var(--teal-new-94-hsl)/1);
--teal-new-94-hsl: 194.211 calc(var(--saturation-factor, 1) * 100%) 7.451%;
--teal-new-95: hsl(var(--teal-new-95-hsl)/1);
--teal-new-95-hsl: 195 calc(var(--saturation-factor, 1) * 100%) 7.059%;
--teal-new-96: hsl(var(--teal-new-96-hsl)/1);
--teal-new-96-hsl: 194.545 calc(var(--saturation-factor, 1) * 100%) 6.471%;
--teal-new-97: hsl(var(--teal-new-97-hsl)/1);
--teal-new-97-hsl: 197.419 calc(var(--saturation-factor, 1) * 100%) 6.078%;
--teal-new-98: hsl(var(--teal-new-98-hsl)/1);
--teal-new-98-hsl: 197.143 calc(var(--saturation-factor, 1) * 100%) 5.49%;
--teal-new-99: hsl(var(--teal-new-99-hsl)/1);
--teal-new-99-hsl: 199.2 calc(var(--saturation-factor, 1) * 100%) 4.902%;
--teal-new-100: hsl(var(--teal-new-100-hsl)/1);
--teal-new-100-hsl: 204.545 calc(var(--saturation-factor, 1) * 100%) 4.314%;
--yellow-new-1: hsl(var(--yellow-new-1-hsl)/1);
--yellow-new-1-hsl: 30 calc(var(--saturation-factor, 1) * 100%) 90.588%;
--yellow-new-2: hsl(var(--yellow-new-2-hsl)/1);
--yellow-new-2-hsl: 31.698 calc(var(--saturation-factor, 1) * 100%) 89.608%;
--yellow-new-3: hsl(var(--yellow-new-3-hsl)/1);
--yellow-new-3-hsl: 33.559 calc(var(--saturation-factor, 1) * 100%) 88.431%;
--yellow-new-4: hsl(var(--yellow-new-4-hsl)/1);
--yellow-new-4-hsl: 34.688 calc(var(--saturation-factor, 1) * 100%) 87.451%;
--yellow-new-5: hsl(var(--yellow-new-5-hsl)/1);
--yellow-new-5-hsl: 34.783 calc(var(--saturation-factor, 1) * 100%) 86.471%;
--yellow-new-6: hsl(var(--yellow-new-6-hsl)/1);
--yellow-new-6-hsl: 35.676 calc(var(--saturation-factor, 1) * 100%) 85.49%;
--yellow-new-7: hsl(var(--yellow-new-7-hsl)/1);
--yellow-new-7-hsl: 36.456 calc(var(--saturation-factor, 1) * 100%) 84.51%;
--yellow-new-8: hsl(var(--yellow-new-8-hsl)/1);
--yellow-new-8-hsl: 36.429 calc(var(--saturation-factor, 1) * 100%) 83.529%;
--yellow-new-9: hsl(var(--yellow-new-9-hsl)/1);
--yellow-new-9-hsl: 37.079 calc(var(--saturation-factor, 1) * 100%) 82.549%;
--yellow-new-10: hsl(var(--yellow-new-10-hsl)/1);
--yellow-new-10-hsl: 37.66 calc(var(--saturation-factor, 1) * 100%) 81.569%;
--yellow-new-11: hsl(var(--yellow-new-11-hsl)/1);
--yellow-new-11-hsl: 37.347 calc(var(--saturation-factor, 1) * 100%) 80.784%;
--yellow-new-12: hsl(var(--yellow-new-12-hsl)/1);
--yellow-new-12-hsl: 37.864 calc(var(--saturation-factor, 1) * 100%) 79.804%;
--yellow-new-13: hsl(var(--yellow-new-13-hsl)/1);
--yellow-new-13-hsl: 38.131 calc(var(--saturation-factor, 1) * 100%) 79.02%;
--yellow-new-14: hsl(var(--yellow-new-14-hsl)/1);
--yellow-new-14-hsl: 38.036 calc(var(--saturation-factor, 1) * 100%) 78.039%;
--yellow-new-15: hsl(var(--yellow-new-15-hsl)/1);
--yellow-new-15-hsl: 38.276 calc(var(--saturation-factor, 1) * 100%) 77.255%;
--yellow-new-16: hsl(var(--yellow-new-16-hsl)/1);
--yellow-new-16-hsl: 38.5 calc(var(--saturation-factor, 1) * 100%) 76.471%;
--yellow-new-17: hsl(var(--yellow-new-17-hsl)/1);
--yellow-new-17-hsl: 38.4 calc(var(--saturation-factor, 1) * 100%) 75.49%;
--yellow-new-18: hsl(var(--yellow-new-18-hsl)/1);
--yellow-new-18-hsl: 38.605 calc(var(--saturation-factor, 1) * 100%) 74.706%;
--yellow-new-19: hsl(var(--yellow-new-19-hsl)/1);
--yellow-new-19-hsl: 38.797 calc(var(--saturation-factor, 1) * 100%) 73.922%;
--yellow-new-20: hsl(var(--yellow-new-20-hsl)/1);
--yellow-new-20-hsl: 38.54 calc(var(--saturation-factor, 1) * 100%) 73.137%;
--yellow-new-21: hsl(var(--yellow-new-21-hsl)/1);
--yellow-new-21-hsl: 38.723 calc(var(--saturation-factor, 1) * 100%) 72.353%;
--yellow-new-22: hsl(var(--yellow-new-22-hsl)/1);
--yellow-new-22-hsl: 38.483 calc(var(--saturation-factor, 1) * 100%) 71.569%;
--yellow-new-23: hsl(var(--yellow-new-23-hsl)/1);
--yellow-new-23-hsl: 38.658 calc(var(--saturation-factor, 1) * 100%) 70.784%;
--yellow-new-24: hsl(var(--yellow-new-24-hsl)/1);
--yellow-new-24-hsl: 38.824 calc(var(--saturation-factor, 1) * 100%) 70%;
--yellow-new-25: hsl(var(--yellow-new-25-hsl)/1);
--yellow-new-25-hsl: 38.599 calc(var(--saturation-factor, 1) * 100%) 69.216%;
--yellow-new-26: hsl(var(--yellow-new-26-hsl)/1);
--yellow-new-26-hsl: 38.758 calc(var(--saturation-factor, 1) * 100%) 68.431%;
--yellow-new-27: hsl(var(--yellow-new-27-hsl)/1);
--yellow-new-27-hsl: 38.545 calc(var(--saturation-factor, 1) * 100%) 67.647%;
--yellow-new-28: hsl(var(--yellow-new-28-hsl)/1);
--yellow-new-28-hsl: 38.698 calc(var(--saturation-factor, 1) * 100%) 66.863%;
--yellow-new-29: hsl(var(--yellow-new-29-hsl)/1);
--yellow-new-29-hsl: 38.844 calc(var(--saturation-factor, 1) * 100%) 66.078%;
--yellow-new-30: hsl(var(--yellow-new-30-hsl)/1);
--yellow-new-30-hsl: 38.644 calc(var(--saturation-factor, 1) * 100%) 65.294%;
--yellow-new-31: hsl(var(--yellow-new-31-hsl)/1);
--yellow-new-31-hsl: 38.785 calc(var(--saturation-factor, 1) * 100%) 64.51%;
--yellow-new-32: hsl(var(--yellow-new-32-hsl)/1);
--yellow-new-32-hsl: 38.919 calc(var(--saturation-factor, 1) * 98.93%) 63.333%;
--yellow-new-33: hsl(var(--yellow-new-33-hsl)/1);
--yellow-new-33-hsl: 39.048 calc(var(--saturation-factor, 1) * 98.953%) 62.549%;
--yellow-new-34: hsl(var(--yellow-new-34-hsl)/1);
--yellow-new-34-hsl: 38.86 calc(var(--saturation-factor, 1) * 98.974%) 61.765%;
--yellow-new-35: hsl(var(--yellow-new-35-hsl)/1);
--yellow-new-35-hsl: 39.289 calc(var(--saturation-factor, 1) * 98.01%) 60.588%;
--yellow-new-36: hsl(var(--yellow-new-36-hsl)/1);
--yellow-new-36-hsl: 39.505 calc(var(--saturation-factor, 1) * 98.058%) 59.608%;
--yellow-new-37: hsl(var(--yellow-new-37-hsl)/1);
--yellow-new-37-hsl: 39.42 calc(var(--saturation-factor, 1) * 98.104%) 58.627%;
--yellow-new-38: hsl(var(--yellow-new-38-hsl)/1);
--yellow-new-38-hsl: 39.81 calc(var(--saturation-factor, 1) * 97.235%) 57.451%;
--yellow-new-39: hsl(var(--yellow-new-39-hsl)/1);
--yellow-new-39-hsl: 39.816 calc(var(--saturation-factor, 1) * 97.309%) 56.275%;
--yellow-new-40: hsl(var(--yellow-new-40-hsl)/1);
--yellow-new-40-hsl: 40.179 calc(var(--saturation-factor, 1) * 97.391%) 54.902%;
--yellow-new-41: hsl(var(--yellow-new-41-hsl)/1);
--yellow-new-41-hsl: 40.345 calc(var(--saturation-factor, 1) * 97.479%) 53.333%;
--yellow-new-42: hsl(var(--yellow-new-42-hsl)/1);
--yellow-new-42-hsl: 41.311 calc(var(--saturation-factor, 1) * 96.825%) 50.588%;
--yellow-new-43: hsl(var(--yellow-new-43-hsl)/1);
--yellow-new-43-hsl: 41.355 calc(var(--saturation-factor, 1) * 100%) 49.216%;
--yellow-new-44: hsl(var(--yellow-new-44-hsl)/1);
--yellow-new-44-hsl: 41.116 calc(var(--saturation-factor, 1) * 100%) 49.216%;
--yellow-new-45: hsl(var(--yellow-new-45-hsl)/1);
--yellow-new-45-hsl: 40.8 calc(var(--saturation-factor, 1) * 100%) 49.02%;
--yellow-new-46: hsl(var(--yellow-new-46-hsl)/1);
--yellow-new-46-hsl: 40.56 calc(var(--saturation-factor, 1) * 100%) 49.02%;
--yellow-new-47: hsl(var(--yellow-new-47-hsl)/1);
--yellow-new-47-hsl: 40.241 calc(var(--saturation-factor, 1) * 100%) 48.824%;
--yellow-new-48: hsl(var(--yellow-new-48-hsl)/1);
--yellow-new-48-hsl: 40 calc(var(--saturation-factor, 1) * 100%) 48.824%;
--yellow-new-49: hsl(var(--yellow-new-49-hsl)/1);
--yellow-new-49-hsl: 39.518 calc(var(--saturation-factor, 1) * 100%) 48.824%;
--yellow-new-50: hsl(var(--yellow-new-50-hsl)/1);
--yellow-new-50-hsl: 39.435 calc(var(--saturation-factor, 1) * 100%) 48.627%;
--yellow-new-51: hsl(var(--yellow-new-51-hsl)/1);
--yellow-new-51-hsl: 39.098 calc(var(--saturation-factor, 1) * 100%) 47.843%;
--yellow-new-52: hsl(var(--yellow-new-52-hsl)/1);
--yellow-new-52-hsl: 38.912 calc(var(--saturation-factor, 1) * 100%) 46.863%;
--yellow-new-53: hsl(var(--yellow-new-53-hsl)/1);
--yellow-new-53-hsl: 38.974 calc(var(--saturation-factor, 1) * 100%) 45.882%;
--yellow-new-54: hsl(var(--yellow-new-54-hsl)/1);
--yellow-new-54-hsl: 38.777 calc(var(--saturation-factor, 1) * 100%) 44.902%;
--yellow-new-55: hsl(var(--yellow-new-55-hsl)/1);
--yellow-new-55-hsl: 38.571 calc(var(--saturation-factor, 1) * 100%) 43.922%;
--yellow-new-56: hsl(var(--yellow-new-56-hsl)/1);
--yellow-new-56-hsl: 38.455 calc(var(--saturation-factor, 1) * 100%) 43.137%;
--yellow-new-57: hsl(var(--yellow-new-57-hsl)/1);
--yellow-new-57-hsl: 38.233 calc(var(--saturation-factor, 1) * 100%) 42.157%;
--yellow-new-58: hsl(var(--yellow-new-58-hsl)/1);
--yellow-new-58-hsl: 38 calc(var(--saturation-factor, 1) * 100%) 41.176%;
--yellow-new-59: hsl(var(--yellow-new-59-hsl)/1);
--yellow-new-59-hsl: 37.573 calc(var(--saturation-factor, 1) * 100%) 40.392%;
--yellow-new-60: hsl(var(--yellow-new-60-hsl)/1);
--yellow-new-60-hsl: 37.612 calc(var(--saturation-factor, 1) * 100%) 39.412%;
--yellow-new-61: hsl(var(--yellow-new-61-hsl)/1);
--yellow-new-61-hsl: 37.347 calc(var(--saturation-factor, 1) * 100%) 38.431%;
--yellow-new-62: hsl(var(--yellow-new-62-hsl)/1);
--yellow-new-62-hsl: 36.875 calc(var(--saturation-factor, 1) * 100%) 37.647%;
--yellow-new-63: hsl(var(--yellow-new-63-hsl)/1);
--yellow-new-63-hsl: 36.898 calc(var(--saturation-factor, 1) * 100%) 36.667%;
--yellow-new-64: hsl(var(--yellow-new-64-hsl)/1);
--yellow-new-64-hsl: 36.393 calc(var(--saturation-factor, 1) * 100%) 35.882%;
--yellow-new-65: hsl(var(--yellow-new-65-hsl)/1);
--yellow-new-65-hsl: 36.201 calc(var(--saturation-factor, 1) * 100%) 35.098%;
--yellow-new-66: hsl(var(--yellow-new-66-hsl)/1);
--yellow-new-66-hsl: 35.862 calc(var(--saturation-factor, 1) * 100%) 34.118%;
--yellow-new-67: hsl(var(--yellow-new-67-hsl)/1);
--yellow-new-67-hsl: 35.294 calc(var(--saturation-factor, 1) * 100%) 33.333%;
--yellow-new-68: hsl(var(--yellow-new-68-hsl)/1);
--yellow-new-68-hsl: 35.273 calc(var(--saturation-factor, 1) * 100%) 32.353%;
--yellow-new-69: hsl(var(--yellow-new-69-hsl)/1);
--yellow-new-69-hsl: 34.658 calc(var(--saturation-factor, 1) * 100%) 31.569%;
--yellow-new-70: hsl(var(--yellow-new-70-hsl)/1);
--yellow-new-70-hsl: 34.395 calc(var(--saturation-factor, 1) * 100%) 30.784%;
--yellow-new-71: hsl(var(--yellow-new-71-hsl)/1);
--yellow-new-71-hsl: 33.725 calc(var(--saturation-factor, 1) * 100%) 30%;
--yellow-new-72: hsl(var(--yellow-new-72-hsl)/1);
--yellow-new-72-hsl: 33.649 calc(var(--saturation-factor, 1) * 100%) 29.02%;
--yellow-new-73: hsl(var(--yellow-new-73-hsl)/1);
--yellow-new-73-hsl: 32.917 calc(var(--saturation-factor, 1) * 100%) 28.235%;
--yellow-new-74: hsl(var(--yellow-new-74-hsl)/1);
--yellow-new-74-hsl: 32.571 calc(var(--saturation-factor, 1) * 100%) 27.451%;
--yellow-new-75: hsl(var(--yellow-new-75-hsl)/1);
--yellow-new-75-hsl: 31.765 calc(var(--saturation-factor, 1) * 100%) 26.667%;
--yellow-new-76: hsl(var(--yellow-new-76-hsl)/1);
--yellow-new-76-hsl: 31.603 calc(var(--saturation-factor, 1) * 100%) 25.686%;
--yellow-new-77: hsl(var(--yellow-new-77-hsl)/1);
--yellow-new-77-hsl: 30.709 calc(var(--saturation-factor, 1) * 100%) 24.902%;
--yellow-new-78: hsl(var(--yellow-new-78-hsl)/1);
--yellow-new-78-hsl: 30.244 calc(var(--saturation-factor, 1) * 100%) 24.118%;
--yellow-new-79: hsl(var(--yellow-new-79-hsl)/1);
--yellow-new-79-hsl: 29.748 calc(var(--saturation-factor, 1) * 100%) 23.333%;
--yellow-new-80: hsl(var(--yellow-new-80-hsl)/1);
--yellow-new-80-hsl: 28.696 calc(var(--saturation-factor, 1) * 100%) 22.549%;
--yellow-new-81: hsl(var(--yellow-new-81-hsl)/1);
--yellow-new-81-hsl: 28.108 calc(var(--saturation-factor, 1) * 100%) 21.765%;
--yellow-new-82: hsl(var(--yellow-new-82-hsl)/1);
--yellow-new-82-hsl: 27.477 calc(var(--saturation-factor, 1) * 100%) 20.98%;
--yellow-new-83: hsl(var(--yellow-new-83-hsl)/1);
--yellow-new-83-hsl: 26.214 calc(var(--saturation-factor, 1) * 100%) 20.196%;
--yellow-new-84: hsl(var(--yellow-new-84-hsl)/1);
--yellow-new-84-hsl: 25.714 calc(var(--saturation-factor, 1) * 100%) 19.216%;
--yellow-new-85: hsl(var(--yellow-new-85-hsl)/1);
--yellow-new-85-hsl: 24.894 calc(var(--saturation-factor, 1) * 100%) 18.431%;
--yellow-new-86: hsl(var(--yellow-new-86-hsl)/1);
--yellow-new-86-hsl: 24 calc(var(--saturation-factor, 1) * 100%) 17.647%;
--yellow-new-87: hsl(var(--yellow-new-87-hsl)/1);
--yellow-new-87-hsl: 22.326 calc(var(--saturation-factor, 1) * 100%) 16.863%;
--yellow-new-88: hsl(var(--yellow-new-88-hsl)/1);
--yellow-new-88-hsl: 21.22 calc(var(--saturation-factor, 1) * 100%) 16.078%;
--yellow-new-89: hsl(var(--yellow-new-89-hsl)/1);
--yellow-new-89-hsl: 19.747 calc(var(--saturation-factor, 1) * 100%) 15.49%;
--yellow-new-90: hsl(var(--yellow-new-90-hsl)/1);
--yellow-new-90-hsl: 18.4 calc(var(--saturation-factor, 1) * 100%) 14.706%;
--yellow-new-91: hsl(var(--yellow-new-91-hsl)/1);
--yellow-new-91-hsl: 16.056 calc(var(--saturation-factor, 1) * 100%) 13.922%;
--yellow-new-92: hsl(var(--yellow-new-92-hsl)/1);
--yellow-new-92-hsl: 14.328 calc(var(--saturation-factor, 1) * 100%) 13.137%;
--yellow-new-93: hsl(var(--yellow-new-93-hsl)/1);
--yellow-new-93-hsl: 12.381 calc(var(--saturation-factor, 1) * 100%) 12.353%;
--yellow-new-94: hsl(var(--yellow-new-94-hsl)/1);
--yellow-new-94-hsl: 9.153 calc(var(--saturation-factor, 1) * 100%) 11.569%;
--yellow-new-95: hsl(var(--yellow-new-95-hsl)/1);
--yellow-new-95-hsl: 6.545 calc(var(--saturation-factor, 1) * 100%) 10.784%;
--yellow-new-96: hsl(var(--yellow-new-96-hsl)/1);
--yellow-new-96-hsl: 4.706 calc(var(--saturation-factor, 1) * 100%) 10%;
--yellow-new-97: hsl(var(--yellow-new-97-hsl)/1);
--yellow-new-97-hsl: 1.277 calc(var(--saturation-factor, 1) * 100%) 9.216%;
--yellow-new-98: hsl(var(--yellow-new-98-hsl)/1);
--yellow-new-98-hsl: 0 calc(var(--saturation-factor, 1) * 100%) 8.235%;
--yellow-new-99: hsl(var(--yellow-new-99-hsl)/1);
--yellow-new-99-hsl: 0 calc(var(--saturation-factor, 1) * 100%) 7.059%;
--yellow-new-100: hsl(var(--yellow-new-100-hsl)/1);
--yellow-new-100-hsl: 0 calc(var(--saturation-factor, 1) * 100%) 5.294%;
--orange-new-1: hsl(var(--orange-new-1-hsl)/1);
--orange-new-1-hsl: 15.789 calc(var(--saturation-factor, 1) * 100%) 92.549%;
--orange-new-2: hsl(var(--orange-new-2-hsl)/1);
--orange-new-2-hsl: 17.727 calc(var(--saturation-factor, 1) * 100%) 91.373%;
--orange-new-3: hsl(var(--orange-new-3-hsl)/1);
--orange-new-3-hsl: 17.143 calc(var(--saturation-factor, 1) * 100%) 90.392%;
--orange-new-4: hsl(var(--orange-new-4-hsl)/1);
--orange-new-4-hsl: 17.778 calc(var(--saturation-factor, 1) * 100%) 89.412%;
--orange-new-5: hsl(var(--orange-new-5-hsl)/1);
--orange-new-5-hsl: 19 calc(var(--saturation-factor, 1) * 100%) 88.235%;
--orange-new-6: hsl(var(--orange-new-6-hsl)/1);
--orange-new-6-hsl: 19.385 calc(var(--saturation-factor, 1) * 100%) 87.255%;
--orange-new-7: hsl(var(--orange-new-7-hsl)/1);
--orange-new-7-hsl: 19.714 calc(var(--saturation-factor, 1) * 100%) 86.275%;
--orange-new-8: hsl(var(--orange-new-8-hsl)/1);
--orange-new-8-hsl: 20 calc(var(--saturation-factor, 1) * 100%) 85.294%;
--orange-new-9: hsl(var(--orange-new-9-hsl)/1);
--orange-new-9-hsl: 20.506 calc(var(--saturation-factor, 1) * 97.531%) 84.118%;
--orange-new-10: hsl(var(--orange-new-10-hsl)/1);
--orange-new-10-hsl: 20.241 calc(var(--saturation-factor, 1) * 95.402%) 82.941%;
--orange-new-11: hsl(var(--orange-new-11-hsl)/1);
--orange-new-11-hsl: 20.455 calc(var(--saturation-factor, 1) * 95.652%) 81.961%;
--orange-new-12: hsl(var(--orange-new-12-hsl)/1);
--orange-new-12-hsl: 20.44 calc(var(--saturation-factor, 1) * 93.814%) 80.98%;
--orange-new-13: hsl(var(--orange-new-13-hsl)/1);
--orange-new-13-hsl: 21.064 calc(var(--saturation-factor, 1) * 90.385%) 79.608%;
--orange-new-14: hsl(var(--orange-new-14-hsl)/1);
--orange-new-14-hsl: 21.429 calc(var(--saturation-factor, 1) * 89.091%) 78.431%;
--orange-new-15: hsl(var(--orange-new-15-hsl)/1);
--orange-new-15-hsl: 21.386 calc(var(--saturation-factor, 1) * 87.826%) 77.451%;
--orange-new-16: hsl(var(--orange-new-16-hsl)/1);
--orange-new-16-hsl: 21.714 calc(var(--saturation-factor, 1) * 86.777%) 76.275%;
--orange-new-17: hsl(var(--orange-new-17-hsl)/1);
--orange-new-17-hsl: 21.667 calc(var(--saturation-factor, 1) * 85.714%) 75.294%;
--orange-new-18: hsl(var(--orange-new-18-hsl)/1);
--orange-new-18-hsl: 21.622 calc(var(--saturation-factor, 1) * 84.733%) 74.314%;
--orange-new-19: hsl(var(--orange-new-19-hsl)/1);
--orange-new-19-hsl: 22.105 calc(var(--saturation-factor, 1) * 82.609%) 72.941%;
--orange-new-20: hsl(var(--orange-new-20-hsl)/1);
--orange-new-20-hsl: 22.051 calc(var(--saturation-factor, 1) * 81.818%) 71.961%;
--orange-new-21: hsl(var(--orange-new-21-hsl)/1);
--orange-new-21-hsl: 22 calc(var(--saturation-factor, 1) * 81.081%) 70.98%;
--orange-new-22: hsl(var(--orange-new-22-hsl)/1);
--orange-new-22-hsl: 22.131 calc(var(--saturation-factor, 1) * 79.221%) 69.804%;
--orange-new-23: hsl(var(--orange-new-23-hsl)/1);
--orange-new-23-hsl: 22.08 calc(var(--saturation-factor, 1) * 78.616%) 68.824%;
--orange-new-24: hsl(var(--orange-new-24-hsl)/1);
--orange-new-24-hsl: 22.205 calc(var(--saturation-factor, 1) * 76.97%) 67.647%;
--orange-new-25: hsl(var(--orange-new-25-hsl)/1);
--orange-new-25-hsl: 22.154 calc(var(--saturation-factor, 1) * 76.471%) 66.667%;
--orange-new-26: hsl(var(--orange-new-26-hsl)/1);
--orange-new-26-hsl: 22.273 calc(var(--saturation-factor, 1) * 75%) 65.49%;
--orange-new-27: hsl(var(--orange-new-27-hsl)/1);
--orange-new-27-hsl: 22.222 calc(var(--saturation-factor, 1) * 74.586%) 64.51%;
--orange-new-28: hsl(var(--orange-new-28-hsl)/1);
--orange-new-28-hsl: 22.336 calc(var(--saturation-factor, 1) * 73.262%) 63.333%;
--orange-new-29: hsl(var(--orange-new-29-hsl)/1);
--orange-new-29-hsl: 22.174 calc(var(--saturation-factor, 1) * 71.875%) 62.353%;
--orange-new-30: hsl(var(--orange-new-30-hsl)/1);
--orange-new-30-hsl: 22.128 calc(var(--saturation-factor, 1) * 71.574%) 61.373%;
--orange-new-31: hsl(var(--orange-new-31-hsl)/1);
--orange-new-31-hsl: 22.238 calc(var(--saturation-factor, 1) * 70.443%) 60.196%;
--orange-new-32: hsl(var(--orange-new-32-hsl)/1);
--orange-new-32-hsl: 22.345 calc(var(--saturation-factor, 1) * 69.378%) 59.02%;
--orange-new-33: hsl(var(--orange-new-33-hsl)/1);
--orange-new-33-hsl: 22.041 calc(var(--saturation-factor, 1) * 69.014%) 58.235%;
--orange-new-34: hsl(var(--orange-new-34-hsl)/1);
--orange-new-34-hsl: 22.148 calc(var(--saturation-factor, 1) * 68.037%) 57.059%;
--orange-new-35: hsl(var(--orange-new-35-hsl)/1);
--orange-new-35-hsl: 22.252 calc(var(--saturation-factor, 1) * 67.111%) 55.882%;
--orange-new-36: hsl(var(--orange-new-36-hsl)/1);
--orange-new-36-hsl: 22.353 calc(var(--saturation-factor, 1) * 66.234%) 54.706%;
--orange-new-37: hsl(var(--orange-new-37-hsl)/1);
--orange-new-37-hsl: 22.208 calc(var(--saturation-factor, 1) * 65.254%) 53.725%;
--orange-new-38: hsl(var(--orange-new-38-hsl)/1);
--orange-new-38-hsl: 22.166 calc(var(--saturation-factor, 1) * 65.145%) 52.745%;
--orange-new-39: hsl(var(--orange-new-39-hsl)/1);
--orange-new-39-hsl: 22.264 calc(var(--saturation-factor, 1) * 64.372%) 51.569%;
--orange-new-40: hsl(var(--orange-new-40-hsl)/1);
--orange-new-40-hsl: 22.125 calc(var(--saturation-factor, 1) * 63.492%) 50.588%;
--orange-new-41: hsl(var(--orange-new-41-hsl)/1);
--orange-new-41-hsl: 22.222 calc(var(--saturation-factor, 1) * 64.286%) 49.412%;
--orange-new-42: hsl(var(--orange-new-42-hsl)/1);
--orange-new-42-hsl: 22.683 calc(var(--saturation-factor, 1) * 66.667%) 48.235%;
--orange-new-43: hsl(var(--orange-new-43-hsl)/1);
--orange-new-43-hsl: 22.771 calc(var(--saturation-factor, 1) * 69.167%) 47.059%;
--orange-new-44: hsl(var(--orange-new-44-hsl)/1);
--orange-new-44-hsl: 22.857 calc(var(--saturation-factor, 1) * 71.795%) 45.882%;
--orange-new-45: hsl(var(--orange-new-45-hsl)/1);
--orange-new-45-hsl: 22.941 calc(var(--saturation-factor, 1) * 74.561%) 44.706%;
--orange-new-46: hsl(var(--orange-new-46-hsl)/1);
--orange-new-46-hsl: 23.237 calc(var(--saturation-factor, 1) * 78.281%) 43.333%;
--orange-new-47: hsl(var(--orange-new-47-hsl)/1);
--orange-new-47-hsl: 23.523 calc(var(--saturation-factor, 1) * 82.243%) 41.961%;
--orange-new-48: hsl(var(--orange-new-48-hsl)/1);
--orange-new-48-hsl: 24 calc(var(--saturation-factor, 1) * 87.379%) 40.392%;
--orange-new-49: hsl(var(--orange-new-49-hsl)/1);
--orange-new-49-hsl: 24.649 calc(var(--saturation-factor, 1) * 93.909%) 38.627%;
--orange-new-50: hsl(var(--orange-new-50-hsl)/1);
--orange-new-50-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
--orange-new-51: hsl(var(--orange-new-51-hsl)/1);
--orange-new-51-hsl: 24.783 calc(var(--saturation-factor, 1) * 98.925%) 36.471%;
--orange-new-52: hsl(var(--orange-new-52-hsl)/1);
--orange-new-52-hsl: 24.333 calc(var(--saturation-factor, 1) * 97.826%) 36.078%;
--orange-new-53: hsl(var(--orange-new-53-hsl)/1);
--orange-new-53-hsl: 24.343 calc(var(--saturation-factor, 1) * 96.685%) 35.49%;
--orange-new-54: hsl(var(--orange-new-54-hsl)/1);
--orange-new-54-hsl: 24.07 calc(var(--saturation-factor, 1) * 96.629%) 34.902%;
--orange-new-55: hsl(var(--orange-new-55-hsl)/1);
--orange-new-55-hsl: 23.713 calc(var(--saturation-factor, 1) * 95.429%) 34.314%;
--orange-new-56: hsl(var(--orange-new-56-hsl)/1);
--orange-new-56-hsl: 23.558 calc(var(--saturation-factor, 1) * 95.322%) 33.529%;
--orange-new-57: hsl(var(--orange-new-57-hsl)/1);
--orange-new-57-hsl: 23.625 calc(var(--saturation-factor, 1) * 95.238%) 32.941%;
--orange-new-58: hsl(var(--orange-new-58-hsl)/1);
--orange-new-58-hsl: 23.312 calc(var(--saturation-factor, 1) * 95.152%) 32.353%;
--orange-new-59: hsl(var(--orange-new-59-hsl)/1);
--orange-new-59-hsl: 23.137 calc(var(--saturation-factor, 1) * 95.031%) 31.569%;
--orange-new-60: hsl(var(--orange-new-60-hsl)/1);
--orange-new-60-hsl: 23.046 calc(var(--saturation-factor, 1) * 96.178%) 30.784%;
--orange-new-61: hsl(var(--orange-new-61-hsl)/1);
--orange-new-61-hsl: 22.857 calc(var(--saturation-factor, 1) * 96.078%) 30%;
--orange-new-62: hsl(var(--orange-new-62-hsl)/1);
--orange-new-62-hsl: 22.917 calc(var(--saturation-factor, 1) * 96%) 29.412%;
--orange-new-63: hsl(var(--orange-new-63-hsl)/1);
--orange-new-63-hsl: 22.817 calc(var(--saturation-factor, 1) * 97.26%) 28.627%;
--orange-new-64: hsl(var(--orange-new-64-hsl)/1);
--orange-new-64-hsl: 22.446 calc(var(--saturation-factor, 1) * 97.203%) 28.039%;
--orange-new-65: hsl(var(--orange-new-65-hsl)/1);
--orange-new-65-hsl: 22.5 calc(var(--saturation-factor, 1) * 98.551%) 27.059%;
--orange-new-66: hsl(var(--orange-new-66-hsl)/1);
--orange-new-66-hsl: 22.105 calc(var(--saturation-factor, 1) * 98.519%) 26.471%;
--orange-new-67: hsl(var(--orange-new-67-hsl)/1);
--orange-new-67-hsl: 22.443 calc(var(--saturation-factor, 1) * 100%) 25.686%;
--orange-new-68: hsl(var(--orange-new-68-hsl)/1);
--orange-new-68-hsl: 22.031 calc(var(--saturation-factor, 1) * 100%) 25.098%;
--orange-new-69: hsl(var(--orange-new-69-hsl)/1);
--orange-new-69-hsl: 21.6 calc(var(--saturation-factor, 1) * 100%) 24.51%;
--orange-new-70: hsl(var(--orange-new-70-hsl)/1);
--orange-new-70-hsl: 21.322 calc(var(--saturation-factor, 1) * 100%) 23.725%;
--orange-new-71: hsl(var(--orange-new-71-hsl)/1);
--orange-new-71-hsl: 20.847 calc(var(--saturation-factor, 1) * 100%) 23.137%;
--orange-new-72: hsl(var(--orange-new-72-hsl)/1);
--orange-new-72-hsl: 20.348 calc(var(--saturation-factor, 1) * 100%) 22.549%;
--orange-new-73: hsl(var(--orange-new-73-hsl)/1);
--orange-new-73-hsl: 20.357 calc(var(--saturation-factor, 1) * 100%) 21.961%;
--orange-new-74: hsl(var(--orange-new-74-hsl)/1);
--orange-new-74-hsl: 19.817 calc(var(--saturation-factor, 1) * 100%) 21.373%;
--orange-new-75: hsl(var(--orange-new-75-hsl)/1);
--orange-new-75-hsl: 19.245 calc(var(--saturation-factor, 1) * 100%) 20.784%;
--orange-new-76: hsl(var(--orange-new-76-hsl)/1);
--orange-new-76-hsl: 18.641 calc(var(--saturation-factor, 1) * 100%) 20.196%;
--orange-new-77: hsl(var(--orange-new-77-hsl)/1);
--orange-new-77-hsl: 18 calc(var(--saturation-factor, 1) * 100%) 19.608%;
--orange-new-78: hsl(var(--orange-new-78-hsl)/1);
--orange-new-78-hsl: 17.32 calc(var(--saturation-factor, 1) * 100%) 19.02%;
--orange-new-79: hsl(var(--orange-new-79-hsl)/1);
--orange-new-79-hsl: 16.596 calc(var(--saturation-factor, 1) * 100%) 18.431%;
--orange-new-80: hsl(var(--orange-new-80-hsl)/1);
--orange-new-80-hsl: 16.484 calc(var(--saturation-factor, 1) * 100%) 17.843%;
--orange-new-81: hsl(var(--orange-new-81-hsl)/1);
--orange-new-81-hsl: 15.682 calc(var(--saturation-factor, 1) * 100%) 17.255%;
--orange-new-82: hsl(var(--orange-new-82-hsl)/1);
--orange-new-82-hsl: 14.824 calc(var(--saturation-factor, 1) * 100%) 16.667%;
--orange-new-83: hsl(var(--orange-new-83-hsl)/1);
--orange-new-83-hsl: 13.735 calc(var(--saturation-factor, 1) * 100%) 16.275%;
--orange-new-84: hsl(var(--orange-new-84-hsl)/1);
--orange-new-84-hsl: 12.75 calc(var(--saturation-factor, 1) * 100%) 15.686%;
--orange-new-85: hsl(var(--orange-new-85-hsl)/1);
--orange-new-85-hsl: 11.688 calc(var(--saturation-factor, 1) * 100%) 15.098%;
--orange-new-86: hsl(var(--orange-new-86-hsl)/1);
--orange-new-86-hsl: 10.541 calc(var(--saturation-factor, 1) * 100%) 14.51%;
--orange-new-87: hsl(var(--orange-new-87-hsl)/1);
--orange-new-87-hsl: 9.296 calc(var(--saturation-factor, 1) * 100%) 13.922%;
--orange-new-88: hsl(var(--orange-new-88-hsl)/1);
--orange-new-88-hsl: 7.941 calc(var(--saturation-factor, 1) * 100%) 13.333%;
--orange-new-89: hsl(var(--orange-new-89-hsl)/1);
--orange-new-89-hsl: 7.273 calc(var(--saturation-factor, 1) * 100%) 12.941%;
--orange-new-90: hsl(var(--orange-new-90-hsl)/1);
--orange-new-90-hsl: 5.714 calc(var(--saturation-factor, 1) * 100%) 12.353%;
--orange-new-91: hsl(var(--orange-new-91-hsl)/1);
--orange-new-91-hsl: 4 calc(var(--saturation-factor, 1) * 100%) 11.765%;
--orange-new-92: hsl(var(--orange-new-92-hsl)/1);
--orange-new-92-hsl: 3.158 calc(var(--saturation-factor, 1) * 100%) 11.176%;
--orange-new-93: hsl(var(--orange-new-93-hsl)/1);
--orange-new-93-hsl: 2.182 calc(var(--saturation-factor, 1) * 100%) 10.784%;
--orange-new-94: hsl(var(--orange-new-94-hsl)/1);
--orange-new-94-hsl: 1.154 calc(var(--saturation-factor, 1) * 100%) 10.196%;
--orange-new-95: hsl(var(--orange-new-95-hsl)/1);
--orange-new-95-hsl: 358.776 calc(var(--saturation-factor, 1) * 100%) 9.608%;
--orange-new-96: hsl(var(--orange-new-96-hsl)/1);
--orange-new-96-hsl: 358.667 calc(var(--saturation-factor, 1) * 100%) 8.824%;
--orange-new-97: hsl(var(--orange-new-97-hsl)/1);
--orange-new-97-hsl: 358.537 calc(var(--saturation-factor, 1) * 100%) 8.039%;
--orange-new-98: hsl(var(--orange-new-98-hsl)/1);
--orange-new-98-hsl: 356.757 calc(var(--saturation-factor, 1) * 100%) 7.255%;
--orange-new-99: hsl(var(--orange-new-99-hsl)/1);
--orange-new-99-hsl: 356.129 calc(var(--saturation-factor, 1) * 100%) 6.078%;
--orange-new-100: hsl(var(--orange-new-100-hsl)/1);
--orange-new-100-hsl: 355 calc(var(--saturation-factor, 1) * 100%) 4.706%;
--pink-1: hsl(var(--pink-1-hsl)/1);
--pink-1-hsl: 316.5 calc(var(--saturation-factor, 1) * 100%) 92.157%;
--pink-2: hsl(var(--pink-2-hsl)/1);
--pink-2-hsl: 316.744 calc(var(--saturation-factor, 1) * 100%) 91.569%;
--pink-3: hsl(var(--pink-3-hsl)/1);
--pink-3-hsl: 315.652 calc(var(--saturation-factor, 1) * 100%) 90.98%;
--pink-4: hsl(var(--pink-4-hsl)/1);
--pink-4-hsl: 315.918 calc(var(--saturation-factor, 1) * 100%) 90.392%;
--pink-5: hsl(var(--pink-5-hsl)/1);
--pink-5-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 89.804%;
--pink-6: hsl(var(--pink-6-hsl)/1);
--pink-6-hsl: 315.556 calc(var(--saturation-factor, 1) * 100%) 89.412%;
--pink-7: hsl(var(--pink-7-hsl)/1);
--pink-7-hsl: 314.737 calc(var(--saturation-factor, 1) * 100%) 88.824%;
--pink-8: hsl(var(--pink-8-hsl)/1);
--pink-8-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 88.235%;
--pink-9: hsl(var(--pink-9-hsl)/1);
--pink-9-hsl: 314.516 calc(var(--saturation-factor, 1) * 100%) 87.843%;
--pink-10: hsl(var(--pink-10-hsl)/1);
--pink-10-hsl: 314.769 calc(var(--saturation-factor, 1) * 100%) 87.255%;
--pink-11: hsl(var(--pink-11-hsl)/1);
--pink-11-hsl: 314.118 calc(var(--saturation-factor, 1) * 100%) 86.667%;
--pink-12: hsl(var(--pink-12-hsl)/1);
--pink-12-hsl: 314.366 calc(var(--saturation-factor, 1) * 100%) 86.078%;
--pink-13: hsl(var(--pink-13-hsl)/1);
--pink-13-hsl: 314.795 calc(var(--saturation-factor, 1) * 100%) 85.686%;
--pink-14: hsl(var(--pink-14-hsl)/1);
--pink-14-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 85.098%;
--pink-15: hsl(var(--pink-15-hsl)/1);
--pink-15-hsl: 314.615 calc(var(--saturation-factor, 1) * 100%) 84.706%;
--pink-16: hsl(var(--pink-16-hsl)/1);
--pink-16-hsl: 314.815 calc(var(--saturation-factor, 1) * 100%) 84.118%;
--pink-17: hsl(var(--pink-17-hsl)/1);
--pink-17-hsl: 315.181 calc(var(--saturation-factor, 1) * 100%) 83.725%;
--pink-18: hsl(var(--pink-18-hsl)/1);
--pink-18-hsl: 315.349 calc(var(--saturation-factor, 1) * 100%) 83.137%;
--pink-19: hsl(var(--pink-19-hsl)/1);
--pink-19-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 82.745%;
--pink-20: hsl(var(--pink-20-hsl)/1);
--pink-20-hsl: 315.165 calc(var(--saturation-factor, 1) * 100%) 82.157%;
--pink-21: hsl(var(--pink-21-hsl)/1);
--pink-21-hsl: 315.319 calc(var(--saturation-factor, 1) * 100%) 81.569%;
--pink-22: hsl(var(--pink-22-hsl)/1);
--pink-22-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 81.176%;
--pink-23: hsl(var(--pink-23-hsl)/1);
--pink-23-hsl: 315.152 calc(var(--saturation-factor, 1) * 100%) 80.588%;
--pink-24: hsl(var(--pink-24-hsl)/1);
--pink-24-hsl: 315.294 calc(var(--saturation-factor, 1) * 100%) 80%;
--pink-25: hsl(var(--pink-25-hsl)/1);
--pink-25-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 79.608%;
--pink-26: hsl(var(--pink-26-hsl)/1);
--pink-26-hsl: 315.14 calc(var(--saturation-factor, 1) * 100%) 79.02%;
--pink-27: hsl(var(--pink-27-hsl)/1);
--pink-27-hsl: 315.273 calc(var(--saturation-factor, 1) * 100%) 78.431%;
--pink-28: hsl(var(--pink-28-hsl)/1);
--pink-28-hsl: 314.867 calc(var(--saturation-factor, 1) * 100%) 77.843%;
--pink-29: hsl(var(--pink-29-hsl)/1);
--pink-29-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 77.255%;
--pink-30: hsl(var(--pink-30-hsl)/1);
--pink-30-hsl: 315.126 calc(var(--saturation-factor, 1) * 100%) 76.667%;
--pink-31: hsl(var(--pink-31-hsl)/1);
--pink-31-hsl: 315.372 calc(var(--saturation-factor, 1) * 100%) 76.275%;
--pink-32: hsl(var(--pink-32-hsl)/1);
--pink-32-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 75.686%;
--pink-33: hsl(var(--pink-33-hsl)/1);
--pink-33-hsl: 315.118 calc(var(--saturation-factor, 1) * 100%) 75.098%;
--pink-34: hsl(var(--pink-34-hsl)/1);
--pink-34-hsl: 315.231 calc(var(--saturation-factor, 1) * 100%) 74.51%;
--pink-35: hsl(var(--pink-35-hsl)/1);
--pink-35-hsl: 315.455 calc(var(--saturation-factor, 1) * 100%) 74.118%;
--pink-36: hsl(var(--pink-36-hsl)/1);
--pink-36-hsl: 315.111 calc(var(--saturation-factor, 1) * 100%) 73.529%;
--pink-37: hsl(var(--pink-37-hsl)/1);
--pink-37-hsl: 315.217 calc(var(--saturation-factor, 1) * 100%) 72.941%;
--pink-38: hsl(var(--pink-38-hsl)/1);
--pink-38-hsl: 315.319 calc(var(--saturation-factor, 1) * 100%) 72.353%;
--pink-39: hsl(var(--pink-39-hsl)/1);
--pink-39-hsl: 315.417 calc(var(--saturation-factor, 1) * 100%) 71.765%;
--pink-40: hsl(var(--pink-40-hsl)/1);
--pink-40-hsl: 315.51 calc(var(--saturation-factor, 1) * 100%) 71.176%;
--pink-41: hsl(var(--pink-41-hsl)/1);
--pink-41-hsl: 315.2 calc(var(--saturation-factor, 1) * 100%) 70.588%;
--pink-42: hsl(var(--pink-42-hsl)/1);
--pink-42-hsl: 315.294 calc(var(--saturation-factor, 1) * 100%) 70%;
--pink-43: hsl(var(--pink-43-hsl)/1);
--pink-43-hsl: 315.385 calc(var(--saturation-factor, 1) * 100%) 69.412%;
--pink-44: hsl(var(--pink-44-hsl)/1);
--pink-44-hsl: 315.472 calc(var(--saturation-factor, 1) * 100%) 68.824%;
--pink-45: hsl(var(--pink-45-hsl)/1);
--pink-45-hsl: 315.185 calc(var(--saturation-factor, 1) * 100%) 68.235%;
--pink-46: hsl(var(--pink-46-hsl)/1);
--pink-46-hsl: 315.181 calc(var(--saturation-factor, 1) * 100%) 67.451%;
--pink-47: hsl(var(--pink-47-hsl)/1);
--pink-47-hsl: 315.266 calc(var(--saturation-factor, 1) * 100%) 66.863%;
--pink-48: hsl(var(--pink-48-hsl)/1);
--pink-48-hsl: 315.349 calc(var(--saturation-factor, 1) * 100%) 66.275%;
--pink-49: hsl(var(--pink-49-hsl)/1);
--pink-49-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 65.49%;
--pink-50: hsl(var(--pink-50-hsl)/1);
--pink-50-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 64.706%;
--pink-51: hsl(var(--pink-51-hsl)/1);
--pink-51-hsl: 315.341 calc(var(--saturation-factor, 1) * 94.624%) 63.529%;
--pink-52: hsl(var(--pink-52-hsl)/1);
--pink-52-hsl: 315.349 calc(var(--saturation-factor, 1) * 89.583%) 62.353%;
--pink-53: hsl(var(--pink-53-hsl)/1);
--pink-53-hsl: 315.357 calc(var(--saturation-factor, 1) * 84%) 60.784%;
--pink-54: hsl(var(--pink-54-hsl)/1);
--pink-54-hsl: 315.366 calc(var(--saturation-factor, 1) * 79.612%) 59.608%;
--pink-55: hsl(var(--pink-55-hsl)/1);
--pink-55-hsl: 315.375 calc(var(--saturation-factor, 1) * 74.766%) 58.039%;
--pink-56: hsl(var(--pink-56-hsl)/1);
--pink-56-hsl: 315.287 calc(var(--saturation-factor, 1) * 71.041%) 56.667%;
--pink-57: hsl(var(--pink-57-hsl)/1);
--pink-57-hsl: 315.294 calc(var(--saturation-factor, 1) * 67.401%) 55.49%;
--pink-58: hsl(var(--pink-58-hsl)/1);
--pink-58-hsl: 315.6 calc(var(--saturation-factor, 1) * 64.103%) 54.118%;
--pink-59: hsl(var(--pink-59-hsl)/1);
--pink-59-hsl: 315.51 calc(var(--saturation-factor, 1) * 60.996%) 52.745%;
--pink-60: hsl(var(--pink-60-hsl)/1);
--pink-60-hsl: 315.417 calc(var(--saturation-factor, 1) * 58.065%) 51.373%;
--pink-61: hsl(var(--pink-61-hsl)/1);
--pink-61-hsl: 315.319 calc(var(--saturation-factor, 1) * 55.294%) 50%;
--pink-62: hsl(var(--pink-62-hsl)/1);
--pink-62-hsl: 315.766 calc(var(--saturation-factor, 1) * 55.02%) 48.824%;
--pink-63: hsl(var(--pink-63-hsl)/1);
--pink-63-hsl: 315.672 calc(var(--saturation-factor, 1) * 55.372%) 47.451%;
--pink-64: hsl(var(--pink-64-hsl)/1);
--pink-64-hsl: 315.573 calc(var(--saturation-factor, 1) * 55.745%) 46.078%;
--pink-65: hsl(var(--pink-65-hsl)/1);
--pink-65-hsl: 315.469 calc(var(--saturation-factor, 1) * 56.14%) 44.706%;
--pink-66: hsl(var(--pink-66-hsl)/1);
--pink-66-hsl: 315.714 calc(var(--saturation-factor, 1) * 56.757%) 43.529%;
--pink-67: hsl(var(--pink-67-hsl)/1);
--pink-67-hsl: 315.61 calc(var(--saturation-factor, 1) * 57.209%) 42.157%;
--pink-68: hsl(var(--pink-68-hsl)/1);
--pink-68-hsl: 315.372 calc(var(--saturation-factor, 1) * 58.454%) 40.588%;
--pink-69: hsl(var(--pink-69-hsl)/1);
--pink-69-hsl: 315.126 calc(var(--saturation-factor, 1) * 59.204%) 39.412%;
--pink-70: hsl(var(--pink-70-hsl)/1);
--pink-70-hsl: 315 calc(var(--saturation-factor, 1) * 59.794%) 38.039%;
--pink-71: hsl(var(--pink-71-hsl)/1);
--pink-71-hsl: 315.263 calc(var(--saturation-factor, 1) * 60.638%) 36.863%;
--pink-72: hsl(var(--pink-72-hsl)/1);
--pink-72-hsl: 315.135 calc(var(--saturation-factor, 1) * 61.326%) 35.49%;
--pink-73: hsl(var(--pink-73-hsl)/1);
--pink-73-hsl: 315.413 calc(var(--saturation-factor, 1) * 62.286%) 34.314%;
--pink-74: hsl(var(--pink-74-hsl)/1);
--pink-74-hsl: 315.283 calc(var(--saturation-factor, 1) * 63.095%) 32.941%;
--pink-75: hsl(var(--pink-75-hsl)/1);
--pink-75-hsl: 315 calc(var(--saturation-factor, 1) * 64.198%) 31.765%;
--pink-76: hsl(var(--pink-76-hsl)/1);
--pink-76-hsl: 314.851 calc(var(--saturation-factor, 1) * 65.161%) 30.392%;
--pink-77: hsl(var(--pink-77-hsl)/1);
--pink-77-hsl: 315 calc(var(--saturation-factor, 1) * 67.568%) 29.02%;
--pink-78: hsl(var(--pink-78-hsl)/1);
--pink-78-hsl: 314.694 calc(var(--saturation-factor, 1) * 69.014%) 27.843%;
--pink-79: hsl(var(--pink-79-hsl)/1);
--pink-79-hsl: 314.526 calc(var(--saturation-factor, 1) * 70.37%) 26.471%;
--pink-80: hsl(var(--pink-80-hsl)/1);
--pink-80-hsl: 314.839 calc(var(--saturation-factor, 1) * 72.093%) 25.294%;
--pink-81: hsl(var(--pink-81-hsl)/1);
--pink-81-hsl: 314.505 calc(var(--saturation-factor, 1) * 73.984%) 24.118%;
--pink-82: hsl(var(--pink-82-hsl)/1);
--pink-82-hsl: 314.157 calc(var(--saturation-factor, 1) * 77.391%) 22.549%;
--pink-83: hsl(var(--pink-83-hsl)/1);
--pink-83-hsl: 313.793 calc(var(--saturation-factor, 1) * 79.817%) 21.373%;
--pink-84: hsl(var(--pink-84-hsl)/1);
--pink-84-hsl: 314.118 calc(var(--saturation-factor, 1) * 82.524%) 20.196%;
--pink-85: hsl(var(--pink-85-hsl)/1);
--pink-85-hsl: 313.735 calc(var(--saturation-factor, 1) * 85.567%) 19.02%;
--pink-86: hsl(var(--pink-86-hsl)/1);
--pink-86-hsl: 314.074 calc(var(--saturation-factor, 1) * 89.011%) 17.843%;
--pink-87: hsl(var(--pink-87-hsl)/1);
--pink-87-hsl: 313.671 calc(var(--saturation-factor, 1) * 92.941%) 16.667%;
--pink-88: hsl(var(--pink-88-hsl)/1);
--pink-88-hsl: 313.421 calc(var(--saturation-factor, 1) * 95%) 15.686%;
--pink-89: hsl(var(--pink-89-hsl)/1);
--pink-89-hsl: 313.973 calc(var(--saturation-factor, 1) * 97.333%) 14.706%;
--pink-90: hsl(var(--pink-90-hsl)/1);
--pink-90-hsl: 313.714 calc(var(--saturation-factor, 1) * 100%) 13.725%;
--pink-91: hsl(var(--pink-91-hsl)/1);
--pink-91-hsl: 313.636 calc(var(--saturation-factor, 1) * 100%) 12.941%;
--pink-92: hsl(var(--pink-92-hsl)/1);
--pink-92-hsl: 314.516 calc(var(--saturation-factor, 1) * 100%) 12.157%;
--pink-93: hsl(var(--pink-93-hsl)/1);
--pink-93-hsl: 314.483 calc(var(--saturation-factor, 1) * 100%) 11.373%;
--pink-94: hsl(var(--pink-94-hsl)/1);
--pink-94-hsl: 314.444 calc(var(--saturation-factor, 1) * 100%) 10.588%;
--pink-95: hsl(var(--pink-95-hsl)/1);
--pink-95-hsl: 315.6 calc(var(--saturation-factor, 1) * 100%) 9.804%;
--pink-96: hsl(var(--pink-96-hsl)/1);
--pink-96-hsl: 314.667 calc(var(--saturation-factor, 1) * 100%) 8.824%;
--pink-97: hsl(var(--pink-97-hsl)/1);
--pink-97-hsl: 316.5 calc(var(--saturation-factor, 1) * 100%) 7.843%;
--pink-98: hsl(var(--pink-98-hsl)/1);
--pink-98-hsl: 316.364 calc(var(--saturation-factor, 1) * 100%) 6.471%;
--pink-99: hsl(var(--pink-99-hsl)/1);
--pink-99-hsl: 319.2 calc(var(--saturation-factor, 1) * 100%) 4.902%;
--pink-100: hsl(var(--pink-100-hsl)/1);
--pink-100-hsl: 327.273 calc(var(--saturation-factor, 1) * 100%) 2.157%;
--opacity-1: hsl(var(--opacity-1-hsl)/0.0196078431372549);
--opacity-1-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
--opacity-4: hsl(var(--opacity-4-hsl)/0.0392156862745098);
--opacity-4-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
--opacity-8: hsl(var(--opacity-8-hsl)/0.0784313725490196);
--opacity-8-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
--opacity-12: hsl(var(--opacity-12-hsl)/0.12156862745098039);
--opacity-12-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
--opacity-16: hsl(var(--opacity-16-hsl)/0.1607843137254902);
--opacity-16-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
--opacity-20: hsl(var(--opacity-20-hsl)/0.2);
--opacity-20-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
--opacity-24: hsl(var(--opacity-24-hsl)/0.23921568627450981);
--opacity-24-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
--opacity-28: hsl(var(--opacity-28-hsl)/0.2784313725490196);
--opacity-28-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
--opacity-32: hsl(var(--opacity-32-hsl)/0.3215686274509804);
--opacity-32-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
--opacity-36: hsl(var(--opacity-36-hsl)/0.3607843137254902);
--opacity-36-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
--opacity-40: hsl(var(--opacity-40-hsl)/0.4);
--opacity-40-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
--opacity-44: hsl(var(--opacity-44-hsl)/0.4392156862745098);
--opacity-44-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
--opacity-48: hsl(var(--opacity-48-hsl)/0.47843137254901963);
--opacity-48-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
--opacity-52: hsl(var(--opacity-52-hsl)/0.5215686274509804);
--opacity-52-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
--opacity-56: hsl(var(--opacity-56-hsl)/0.5607843137254902);
--opacity-56-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
--opacity-60: hsl(var(--opacity-60-hsl)/0.6);
--opacity-60-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
--opacity-64: hsl(var(--opacity-64-hsl)/0.6392156862745098);
--opacity-64-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
--opacity-68: hsl(var(--opacity-68-hsl)/0.6784313725490196);
--opacity-68-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
--opacity-72: hsl(var(--opacity-72-hsl)/0.7215686274509804);
--opacity-72-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
--opacity-76: hsl(var(--opacity-76-hsl)/0.7607843137254902);
--opacity-76-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
--opacity-80: hsl(var(--opacity-80-hsl)/0.8);
--opacity-80-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
--opacity-84: hsl(var(--opacity-84-hsl)/0.8392156862745098);
--opacity-84-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
--opacity-88: hsl(var(--opacity-88-hsl)/0.8784313725490196);
--opacity-88-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
--opacity-92: hsl(var(--opacity-92-hsl)/0.9215686274509803);
--opacity-92-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
--opacity-96: hsl(var(--opacity-96-hsl)/0.9607843137254902);
--opacity-96-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 60.784%;
--opacity-blue-1: hsl(var(--opacity-blue-1-hsl)/0.0196078431372549);
--opacity-blue-1-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
--opacity-blue-4: hsl(var(--opacity-blue-4-hsl)/0.0392156862745098);
--opacity-blue-4-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
--opacity-blue-8: hsl(var(--opacity-blue-8-hsl)/0.0784313725490196);
--opacity-blue-8-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
--opacity-blue-12: hsl(var(--opacity-blue-12-hsl)/0.12156862745098039);
--opacity-blue-12-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
--opacity-blue-16: hsl(var(--opacity-blue-16-hsl)/0.1607843137254902);
--opacity-blue-16-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
--opacity-blue-20: hsl(var(--opacity-blue-20-hsl)/0.2);
--opacity-blue-20-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
--opacity-blue-24: hsl(var(--opacity-blue-24-hsl)/0.23921568627450981);
--opacity-blue-24-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
--opacity-blue-28: hsl(var(--opacity-blue-28-hsl)/0.2784313725490196);
--opacity-blue-28-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
--opacity-blue-32: hsl(var(--opacity-blue-32-hsl)/0.3215686274509804);
--opacity-blue-32-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
--opacity-blue-36: hsl(var(--opacity-blue-36-hsl)/0.3607843137254902);
--opacity-blue-36-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
--opacity-blue-40: hsl(var(--opacity-blue-40-hsl)/0.4);
--opacity-blue-40-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
--opacity-blue-44: hsl(var(--opacity-blue-44-hsl)/0.4392156862745098);
--opacity-blue-44-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
--opacity-blue-48: hsl(var(--opacity-blue-48-hsl)/0.47843137254901963);
--opacity-blue-48-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
--opacity-blue-52: hsl(var(--opacity-blue-52-hsl)/0.5215686274509804);
--opacity-blue-52-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
--opacity-blue-56: hsl(var(--opacity-blue-56-hsl)/0.5607843137254902);
--opacity-blue-56-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
--opacity-blue-60: hsl(var(--opacity-blue-60-hsl)/0.6);
--opacity-blue-60-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
--opacity-blue-64: hsl(var(--opacity-blue-64-hsl)/0.6392156862745098);
--opacity-blue-64-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
--opacity-blue-68: hsl(var(--opacity-blue-68-hsl)/0.6784313725490196);
--opacity-blue-68-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
--opacity-blue-72: hsl(var(--opacity-blue-72-hsl)/0.7215686274509804);
--opacity-blue-72-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
--opacity-blue-76: hsl(var(--opacity-blue-76-hsl)/0.7607843137254902);
--opacity-blue-76-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
--opacity-blue-80: hsl(var(--opacity-blue-80-hsl)/0.8);
--opacity-blue-80-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
--opacity-blue-84: hsl(var(--opacity-blue-84-hsl)/0.8392156862745098);
--opacity-blue-84-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
--opacity-blue-88: hsl(var(--opacity-blue-88-hsl)/0.8784313725490196);
--opacity-blue-88-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
--opacity-blue-92: hsl(var(--opacity-blue-92-hsl)/0.9215686274509803);
--opacity-blue-92-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
--opacity-blue-96: hsl(var(--opacity-blue-96-hsl)/0.9607843137254902);
--opacity-blue-96-hsl: 209.339 calc(var(--saturation-factor, 1) * 100%) 44.51%;
--opacity-blurple-1: hsl(var(--opacity-blurple-1-hsl)/0.0196078431372549);
--opacity-blurple-1-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
--opacity-blurple-4: hsl(var(--opacity-blurple-4-hsl)/0.0392156862745098);
--opacity-blurple-4-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
--opacity-blurple-8: hsl(var(--opacity-blurple-8-hsl)/0.0784313725490196);
--opacity-blurple-8-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
--opacity-blurple-12: hsl(var(--opacity-blurple-12-hsl)/0.12156862745098039);
--opacity-blurple-12-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
--opacity-blurple-16: hsl(var(--opacity-blurple-16-hsl)/0.1607843137254902);
--opacity-blurple-16-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
--opacity-blurple-20: hsl(var(--opacity-blurple-20-hsl)/0.2);
--opacity-blurple-20-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
--opacity-blurple-24: hsl(var(--opacity-blurple-24-hsl)/0.23921568627450981);
--opacity-blurple-24-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
--opacity-blurple-28: hsl(var(--opacity-blurple-28-hsl)/0.2784313725490196);
--opacity-blurple-28-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
--opacity-blurple-32: hsl(var(--opacity-blurple-32-hsl)/0.3215686274509804);
--opacity-blurple-32-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
--opacity-blurple-36: hsl(var(--opacity-blurple-36-hsl)/0.3607843137254902);
--opacity-blurple-36-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
--opacity-blurple-40: hsl(var(--opacity-blurple-40-hsl)/0.4);
--opacity-blurple-40-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
--opacity-blurple-44: hsl(var(--opacity-blurple-44-hsl)/0.4392156862745098);
--opacity-blurple-44-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
--opacity-blurple-48: hsl(var(--opacity-blurple-48-hsl)/0.47843137254901963);
--opacity-blurple-48-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
--opacity-blurple-52: hsl(var(--opacity-blurple-52-hsl)/0.5215686274509804);
--opacity-blurple-52-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
--opacity-blurple-56: hsl(var(--opacity-blurple-56-hsl)/0.5607843137254902);
--opacity-blurple-56-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
--opacity-blurple-60: hsl(var(--opacity-blurple-60-hsl)/0.6);
--opacity-blurple-60-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
--opacity-blurple-64: hsl(var(--opacity-blurple-64-hsl)/0.6392156862745098);
--opacity-blurple-64-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
--opacity-blurple-68: hsl(var(--opacity-blurple-68-hsl)/0.6784313725490196);
--opacity-blurple-68-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
--opacity-blurple-72: hsl(var(--opacity-blurple-72-hsl)/0.7215686274509804);
--opacity-blurple-72-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
--opacity-blurple-76: hsl(var(--opacity-blurple-76-hsl)/0.7607843137254902);
--opacity-blurple-76-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
--opacity-blurple-80: hsl(var(--opacity-blurple-80-hsl)/0.8);
--opacity-blurple-80-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
--opacity-blurple-84: hsl(var(--opacity-blurple-84-hsl)/0.8392156862745098);
--opacity-blurple-84-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
--opacity-blurple-88: hsl(var(--opacity-blurple-88-hsl)/0.8784313725490196);
--opacity-blurple-88-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
--opacity-blurple-92: hsl(var(--opacity-blurple-92-hsl)/0.9215686274509803);
--opacity-blurple-92-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
--opacity-blurple-96: hsl(var(--opacity-blurple-96-hsl)/0.9607843137254902);
--opacity-blurple-96-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
--opacity-green-1: hsl(var(--opacity-green-1-hsl)/0.0196078431372549);
--opacity-green-1-hsl: 151.128 calc(var(--saturation-factor, 1) * 100%) 26.078%;
--opacity-green-4: hsl(var(--opacity-green-4-hsl)/0.0392156862745098);
--opacity-green-4-hsl: 151.128 calc(var(--saturation-factor, 1) * 100%) 26.078%;
--opacity-green-8: hsl(var(--opacity-green-8-hsl)/0.0784313725490196);
--opacity-green-8-hsl: 151.128 calc(var(--saturation-factor, 1) * 100%) 26.078%;
--opacity-green-12: hsl(var(--opacity-green-12-hsl)/0.12156862745098039);
--opacity-green-12-hsl: 151.128 calc(var(--saturation-factor, 1) * 100%) 26.078%;
--opacity-green-16: hsl(var(--opacity-green-16-hsl)/0.1607843137254902);
--opacity-green-16-hsl: 151.128 calc(var(--saturation-factor, 1) * 100%) 26.078%;
--opacity-green-20: hsl(var(--opacity-green-20-hsl)/0.2);
--opacity-green-20-hsl: 151.128 calc(var(--saturation-factor, 1) * 100%) 26.078%;
--opacity-green-24: hsl(var(--opacity-green-24-hsl)/0.23921568627450981);
--opacity-green-24-hsl: 151.128 calc(var(--saturation-factor, 1) * 100%) 26.078%;
--opacity-green-28: hsl(var(--opacity-green-28-hsl)/0.2784313725490196);
--opacity-green-28-hsl: 151.128 calc(var(--saturation-factor, 1) * 100%) 26.078%;
--opacity-green-32: hsl(var(--opacity-green-32-hsl)/0.3215686274509804);
--opacity-green-32-hsl: 151.128 calc(var(--saturation-factor, 1) * 100%) 26.078%;
--opacity-green-36: hsl(var(--opacity-green-36-hsl)/0.3607843137254902);
--opacity-green-36-hsl: 151.128 calc(var(--saturation-factor, 1) * 100%) 26.078%;
--opacity-green-40: hsl(var(--opacity-green-40-hsl)/0.4);
--opacity-green-40-hsl: 151.128 calc(var(--saturation-factor, 1) * 100%) 26.078%;
--opacity-green-44: hsl(var(--opacity-green-44-hsl)/0.4392156862745098);
--opacity-green-44-hsl: 151.128 calc(var(--saturation-factor, 1) * 100%) 26.078%;
--opacity-green-48: hsl(var(--opacity-green-48-hsl)/0.47843137254901963);
--opacity-green-48-hsl: 151.128 calc(var(--saturation-factor, 1) * 100%) 26.078%;
--opacity-green-52: hsl(var(--opacity-green-52-hsl)/0.5215686274509804);
--opacity-green-52-hsl: 151.128 calc(var(--saturation-factor, 1) * 100%) 26.078%;
--opacity-green-56: hsl(var(--opacity-green-56-hsl)/0.5607843137254902);
--opacity-green-56-hsl: 151.128 calc(var(--saturation-factor, 1) * 100%) 26.078%;
--opacity-green-60: hsl(var(--opacity-green-60-hsl)/0.6);
--opacity-green-60-hsl: 151.128 calc(var(--saturation-factor, 1) * 100%) 26.078%;
--opacity-green-64: hsl(var(--opacity-green-64-hsl)/0.6392156862745098);
--opacity-green-64-hsl: 151.128 calc(var(--saturation-factor, 1) * 100%) 26.078%;
--opacity-green-68: hsl(var(--opacity-green-68-hsl)/0.6784313725490196);
--opacity-green-68-hsl: 151.128 calc(var(--saturation-factor, 1) * 100%) 26.078%;
--opacity-green-72: hsl(var(--opacity-green-72-hsl)/0.7215686274509804);
--opacity-green-72-hsl: 151.128 calc(var(--saturation-factor, 1) * 100%) 26.078%;
--opacity-green-76: hsl(var(--opacity-green-76-hsl)/0.7607843137254902);
--opacity-green-76-hsl: 151.128 calc(var(--saturation-factor, 1) * 100%) 26.078%;
--opacity-green-80: hsl(var(--opacity-green-80-hsl)/0.8);
--opacity-green-80-hsl: 151.128 calc(var(--saturation-factor, 1) * 100%) 26.078%;
--opacity-green-84: hsl(var(--opacity-green-84-hsl)/0.8392156862745098);
--opacity-green-84-hsl: 151.128 calc(var(--saturation-factor, 1) * 100%) 26.078%;
--opacity-green-88: hsl(var(--opacity-green-88-hsl)/0.8784313725490196);
--opacity-green-88-hsl: 151.128 calc(var(--saturation-factor, 1) * 100%) 26.078%;
--opacity-green-92: hsl(var(--opacity-green-92-hsl)/0.9215686274509803);
--opacity-green-92-hsl: 151.128 calc(var(--saturation-factor, 1) * 100%) 26.078%;
--opacity-green-96: hsl(var(--opacity-green-96-hsl)/0.9607843137254902);
--opacity-green-96-hsl: 151.128 calc(var(--saturation-factor, 1) * 100%) 26.078%;
--opacity-red-1: hsl(var(--opacity-red-1-hsl)/0.0196078431372549);
--opacity-red-1-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
--opacity-red-4: hsl(var(--opacity-red-4-hsl)/0.0392156862745098);
--opacity-red-4-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
--opacity-red-8: hsl(var(--opacity-red-8-hsl)/0.0784313725490196);
--opacity-red-8-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
--opacity-red-12: hsl(var(--opacity-red-12-hsl)/0.12156862745098039);
--opacity-red-12-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
--opacity-red-16: hsl(var(--opacity-red-16-hsl)/0.1607843137254902);
--opacity-red-16-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
--opacity-red-20: hsl(var(--opacity-red-20-hsl)/0.2);
--opacity-red-20-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
--opacity-red-24: hsl(var(--opacity-red-24-hsl)/0.23921568627450981);
--opacity-red-24-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
--opacity-red-28: hsl(var(--opacity-red-28-hsl)/0.2784313725490196);
--opacity-red-28-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
--opacity-red-32: hsl(var(--opacity-red-32-hsl)/0.3215686274509804);
--opacity-red-32-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
--opacity-red-36: hsl(var(--opacity-red-36-hsl)/0.3607843137254902);
--opacity-red-36-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
--opacity-red-40: hsl(var(--opacity-red-40-hsl)/0.4);
--opacity-red-40-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
--opacity-red-44: hsl(var(--opacity-red-44-hsl)/0.4392156862745098);
--opacity-red-44-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
--opacity-red-48: hsl(var(--opacity-red-48-hsl)/0.47843137254901963);
--opacity-red-48-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
--opacity-red-52: hsl(var(--opacity-red-52-hsl)/0.5215686274509804);
--opacity-red-52-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
--opacity-red-56: hsl(var(--opacity-red-56-hsl)/0.5607843137254902);
--opacity-red-56-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
--opacity-red-60: hsl(var(--opacity-red-60-hsl)/0.6);
--opacity-red-60-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
--opacity-red-64: hsl(var(--opacity-red-64-hsl)/0.6392156862745098);
--opacity-red-64-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
--opacity-red-68: hsl(var(--opacity-red-68-hsl)/0.6784313725490196);
--opacity-red-68-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
--opacity-red-72: hsl(var(--opacity-red-72-hsl)/0.7215686274509804);
--opacity-red-72-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
--opacity-red-76: hsl(var(--opacity-red-76-hsl)/0.7607843137254902);
--opacity-red-76-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
--opacity-red-80: hsl(var(--opacity-red-80-hsl)/0.8);
--opacity-red-80-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
--opacity-red-84: hsl(var(--opacity-red-84-hsl)/0.8392156862745098);
--opacity-red-84-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
--opacity-red-88: hsl(var(--opacity-red-88-hsl)/0.8784313725490196);
--opacity-red-88-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
--opacity-red-92: hsl(var(--opacity-red-92-hsl)/0.9215686274509803);
--opacity-red-92-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
--opacity-red-96: hsl(var(--opacity-red-96-hsl)/0.9607843137254902);
--opacity-red-96-hsl: 355.636 calc(var(--saturation-factor, 1) * 64.706%) 50%;
--opacity-teal-1: hsl(var(--opacity-teal-1-hsl)/0.0196078431372549);
--opacity-teal-1-hsl: 184.615 calc(var(--saturation-factor, 1) * 100%) 28.039%;
--opacity-teal-4: hsl(var(--opacity-teal-4-hsl)/0.0392156862745098);
--opacity-teal-4-hsl: 184.615 calc(var(--saturation-factor, 1) * 100%) 28.039%;
--opacity-teal-8: hsl(var(--opacity-teal-8-hsl)/0.0784313725490196);
--opacity-teal-8-hsl: 184.615 calc(var(--saturation-factor, 1) * 100%) 28.039%;
--opacity-teal-12: hsl(var(--opacity-teal-12-hsl)/0.12156862745098039);
--opacity-teal-12-hsl: 184.615 calc(var(--saturation-factor, 1) * 100%) 28.039%;
--opacity-teal-16: hsl(var(--opacity-teal-16-hsl)/0.1607843137254902);
--opacity-teal-16-hsl: 184.615 calc(var(--saturation-factor, 1) * 100%) 28.039%;
--opacity-teal-20: hsl(var(--opacity-teal-20-hsl)/0.2);
--opacity-teal-20-hsl: 184.615 calc(var(--saturation-factor, 1) * 100%) 28.039%;
--opacity-teal-24: hsl(var(--opacity-teal-24-hsl)/0.23921568627450981);
--opacity-teal-24-hsl: 184.615 calc(var(--saturation-factor, 1) * 100%) 28.039%;
--opacity-teal-28: hsl(var(--opacity-teal-28-hsl)/0.2784313725490196);
--opacity-teal-28-hsl: 184.615 calc(var(--saturation-factor, 1) * 100%) 28.039%;
--opacity-teal-32: hsl(var(--opacity-teal-32-hsl)/0.3215686274509804);
--opacity-teal-32-hsl: 184.615 calc(var(--saturation-factor, 1) * 100%) 28.039%;
--opacity-teal-36: hsl(var(--opacity-teal-36-hsl)/0.3607843137254902);
--opacity-teal-36-hsl: 184.615 calc(var(--saturation-factor, 1) * 100%) 28.039%;
--opacity-teal-40: hsl(var(--opacity-teal-40-hsl)/0.4);
--opacity-teal-40-hsl: 184.615 calc(var(--saturation-factor, 1) * 100%) 28.039%;
--opacity-teal-44: hsl(var(--opacity-teal-44-hsl)/0.4392156862745098);
--opacity-teal-44-hsl: 184.615 calc(var(--saturation-factor, 1) * 100%) 28.039%;
--opacity-teal-48: hsl(var(--opacity-teal-48-hsl)/0.47843137254901963);
--opacity-teal-48-hsl: 184.615 calc(var(--saturation-factor, 1) * 100%) 28.039%;
--opacity-teal-52: hsl(var(--opacity-teal-52-hsl)/0.5215686274509804);
--opacity-teal-52-hsl: 184.615 calc(var(--saturation-factor, 1) * 100%) 28.039%;
--opacity-teal-56: hsl(var(--opacity-teal-56-hsl)/0.5607843137254902);
--opacity-teal-56-hsl: 184.615 calc(var(--saturation-factor, 1) * 100%) 28.039%;
--opacity-teal-60: hsl(var(--opacity-teal-60-hsl)/0.6);
--opacity-teal-60-hsl: 184.615 calc(var(--saturation-factor, 1) * 100%) 28.039%;
--opacity-teal-64: hsl(var(--opacity-teal-64-hsl)/0.6392156862745098);
--opacity-teal-64-hsl: 184.615 calc(var(--saturation-factor, 1) * 100%) 28.039%;
--opacity-teal-68: hsl(var(--opacity-teal-68-hsl)/0.6784313725490196);
--opacity-teal-68-hsl: 184.615 calc(var(--saturation-factor, 1) * 100%) 28.039%;
--opacity-teal-72: hsl(var(--opacity-teal-72-hsl)/0.7215686274509804);
--opacity-teal-72-hsl: 184.615 calc(var(--saturation-factor, 1) * 100%) 28.039%;
--opacity-teal-76: hsl(var(--opacity-teal-76-hsl)/0.7607843137254902);
--opacity-teal-76-hsl: 184.615 calc(var(--saturation-factor, 1) * 100%) 28.039%;
--opacity-teal-80: hsl(var(--opacity-teal-80-hsl)/0.8);
--opacity-teal-80-hsl: 184.615 calc(var(--saturation-factor, 1) * 100%) 28.039%;
--opacity-teal-84: hsl(var(--opacity-teal-84-hsl)/0.8392156862745098);
--opacity-teal-84-hsl: 184.615 calc(var(--saturation-factor, 1) * 100%) 28.039%;
--opacity-teal-88: hsl(var(--opacity-teal-88-hsl)/0.8784313725490196);
--opacity-teal-88-hsl: 184.615 calc(var(--saturation-factor, 1) * 100%) 28.039%;
--opacity-teal-92: hsl(var(--opacity-teal-92-hsl)/0.9215686274509803);
--opacity-teal-92-hsl: 184.615 calc(var(--saturation-factor, 1) * 100%) 28.039%;
--opacity-teal-96: hsl(var(--opacity-teal-96-hsl)/0.9607843137254902);
--opacity-teal-96-hsl: 184.615 calc(var(--saturation-factor, 1) * 100%) 28.039%;
--opacity-yellow-1: hsl(var(--opacity-yellow-1-hsl)/0.0196078431372549);
--opacity-yellow-1-hsl: 39.435 calc(var(--saturation-factor, 1) * 100%) 48.627%;
--opacity-yellow-4: hsl(var(--opacity-yellow-4-hsl)/0.0392156862745098);
--opacity-yellow-4-hsl: 39.435 calc(var(--saturation-factor, 1) * 100%) 48.627%;
--opacity-yellow-8: hsl(var(--opacity-yellow-8-hsl)/0.0784313725490196);
--opacity-yellow-8-hsl: 39.435 calc(var(--saturation-factor, 1) * 100%) 48.627%;
--opacity-yellow-12: hsl(var(--opacity-yellow-12-hsl)/0.12156862745098039);
--opacity-yellow-12-hsl: 39.435 calc(var(--saturation-factor, 1) * 100%) 48.627%;
--opacity-yellow-16: hsl(var(--opacity-yellow-16-hsl)/0.1607843137254902);
--opacity-yellow-16-hsl: 39.435 calc(var(--saturation-factor, 1) * 100%) 48.627%;
--opacity-yellow-20: hsl(var(--opacity-yellow-20-hsl)/0.2);
--opacity-yellow-20-hsl: 39.435 calc(var(--saturation-factor, 1) * 100%) 48.627%;
--opacity-yellow-24: hsl(var(--opacity-yellow-24-hsl)/0.23921568627450981);
--opacity-yellow-24-hsl: 39.435 calc(var(--saturation-factor, 1) * 100%) 48.627%;
--opacity-yellow-28: hsl(var(--opacity-yellow-28-hsl)/0.2784313725490196);
--opacity-yellow-28-hsl: 39.435 calc(var(--saturation-factor, 1) * 100%) 48.627%;
--opacity-yellow-32: hsl(var(--opacity-yellow-32-hsl)/0.3215686274509804);
--opacity-yellow-32-hsl: 39.435 calc(var(--saturation-factor, 1) * 100%) 48.627%;
--opacity-yellow-36: hsl(var(--opacity-yellow-36-hsl)/0.3607843137254902);
--opacity-yellow-36-hsl: 39.435 calc(var(--saturation-factor, 1) * 100%) 48.627%;
--opacity-yellow-40: hsl(var(--opacity-yellow-40-hsl)/0.4);
--opacity-yellow-40-hsl: 39.435 calc(var(--saturation-factor, 1) * 100%) 48.627%;
--opacity-yellow-44: hsl(var(--opacity-yellow-44-hsl)/0.4392156862745098);
--opacity-yellow-44-hsl: 39.435 calc(var(--saturation-factor, 1) * 100%) 48.627%;
--opacity-yellow-48: hsl(var(--opacity-yellow-48-hsl)/0.47843137254901963);
--opacity-yellow-48-hsl: 39.435 calc(var(--saturation-factor, 1) * 100%) 48.627%;
--opacity-yellow-52: hsl(var(--opacity-yellow-52-hsl)/0.5215686274509804);
--opacity-yellow-52-hsl: 39.435 calc(var(--saturation-factor, 1) * 100%) 48.627%;
--opacity-yellow-56: hsl(var(--opacity-yellow-56-hsl)/0.5607843137254902);
--opacity-yellow-56-hsl: 39.435 calc(var(--saturation-factor, 1) * 100%) 48.627%;
--opacity-yellow-60: hsl(var(--opacity-yellow-60-hsl)/0.6);
--opacity-yellow-60-hsl: 39.435 calc(var(--saturation-factor, 1) * 100%) 48.627%;
--opacity-yellow-64: hsl(var(--opacity-yellow-64-hsl)/0.6392156862745098);
--opacity-yellow-64-hsl: 39.435 calc(var(--saturation-factor, 1) * 100%) 48.627%;
--opacity-yellow-68: hsl(var(--opacity-yellow-68-hsl)/0.6784313725490196);
--opacity-yellow-68-hsl: 39.435 calc(var(--saturation-factor, 1) * 100%) 48.627%;
--opacity-yellow-72: hsl(var(--opacity-yellow-72-hsl)/0.7215686274509804);
--opacity-yellow-72-hsl: 39.435 calc(var(--saturation-factor, 1) * 100%) 48.627%;
--opacity-yellow-76: hsl(var(--opacity-yellow-76-hsl)/0.7607843137254902);
--opacity-yellow-76-hsl: 39.435 calc(var(--saturation-factor, 1) * 100%) 48.627%;
--opacity-yellow-80: hsl(var(--opacity-yellow-80-hsl)/0.8);
--opacity-yellow-80-hsl: 39.435 calc(var(--saturation-factor, 1) * 100%) 48.627%;
--opacity-yellow-84: hsl(var(--opacity-yellow-84-hsl)/0.8392156862745098);
--opacity-yellow-84-hsl: 39.435 calc(var(--saturation-factor, 1) * 100%) 48.627%;
--opacity-yellow-88: hsl(var(--opacity-yellow-88-hsl)/0.8784313725490196);
--opacity-yellow-88-hsl: 39.435 calc(var(--saturation-factor, 1) * 100%) 48.627%;
--opacity-yellow-92: hsl(var(--opacity-yellow-92-hsl)/0.9215686274509803);
--opacity-yellow-92-hsl: 39.435 calc(var(--saturation-factor, 1) * 100%) 48.627%;
--opacity-yellow-96: hsl(var(--opacity-yellow-96-hsl)/0.9607843137254902);
--opacity-yellow-96-hsl: 39.435 calc(var(--saturation-factor, 1) * 100%) 48.627%;
--opacity-orange-1: hsl(var(--opacity-orange-1-hsl)/0.0196078431372549);
--opacity-orange-1-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
--opacity-orange-4: hsl(var(--opacity-orange-4-hsl)/0.0392156862745098);
--opacity-orange-4-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
--opacity-orange-8: hsl(var(--opacity-orange-8-hsl)/0.0784313725490196);
--opacity-orange-8-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
--opacity-orange-12: hsl(var(--opacity-orange-12-hsl)/0.12156862745098039);
--opacity-orange-12-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
--opacity-orange-16: hsl(var(--opacity-orange-16-hsl)/0.1607843137254902);
--opacity-orange-16-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
--opacity-orange-20: hsl(var(--opacity-orange-20-hsl)/0.2);
--opacity-orange-20-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
--opacity-orange-24: hsl(var(--opacity-orange-24-hsl)/0.23921568627450981);
--opacity-orange-24-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
--opacity-orange-28: hsl(var(--opacity-orange-28-hsl)/0.2784313725490196);
--opacity-orange-28-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
--opacity-orange-32: hsl(var(--opacity-orange-32-hsl)/0.3215686274509804);
--opacity-orange-32-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
--opacity-orange-36: hsl(var(--opacity-orange-36-hsl)/0.3607843137254902);
--opacity-orange-36-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
--opacity-orange-40: hsl(var(--opacity-orange-40-hsl)/0.4);
--opacity-orange-40-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
--opacity-orange-44: hsl(var(--opacity-orange-44-hsl)/0.4392156862745098);
--opacity-orange-44-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
--opacity-orange-48: hsl(var(--opacity-orange-48-hsl)/0.47843137254901963);
--opacity-orange-48-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
--opacity-orange-52: hsl(var(--opacity-orange-52-hsl)/0.5215686274509804);
--opacity-orange-52-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
--opacity-orange-56: hsl(var(--opacity-orange-56-hsl)/0.5607843137254902);
--opacity-orange-56-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
--opacity-orange-60: hsl(var(--opacity-orange-60-hsl)/0.6);
--opacity-orange-60-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
--opacity-orange-64: hsl(var(--opacity-orange-64-hsl)/0.6392156862745098);
--opacity-orange-64-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
--opacity-orange-68: hsl(var(--opacity-orange-68-hsl)/0.6784313725490196);
--opacity-orange-68-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
--opacity-orange-72: hsl(var(--opacity-orange-72-hsl)/0.7215686274509804);
--opacity-orange-72-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
--opacity-orange-76: hsl(var(--opacity-orange-76-hsl)/0.7607843137254902);
--opacity-orange-76-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
--opacity-orange-80: hsl(var(--opacity-orange-80-hsl)/0.8);
--opacity-orange-80-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
--opacity-orange-84: hsl(var(--opacity-orange-84-hsl)/0.8392156862745098);
--opacity-orange-84-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
--opacity-orange-88: hsl(var(--opacity-orange-88-hsl)/0.8784313725490196);
--opacity-orange-88-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
--opacity-orange-92: hsl(var(--opacity-orange-92-hsl)/0.9215686274509803);
--opacity-orange-92-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
--opacity-orange-96: hsl(var(--opacity-orange-96-hsl)/0.9607843137254902);
--opacity-orange-96-hsl: 25.079 calc(var(--saturation-factor, 1) * 100%) 37.059%;
--opacity-pink-1: hsl(var(--opacity-pink-1-hsl)/0.0196078431372549);
--opacity-pink-1-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 64.706%;
--opacity-pink-4: hsl(var(--opacity-pink-4-hsl)/0.0392156862745098);
--opacity-pink-4-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 64.706%;
--opacity-pink-8: hsl(var(--opacity-pink-8-hsl)/0.0784313725490196);
--opacity-pink-8-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 64.706%;
--opacity-pink-12: hsl(var(--opacity-pink-12-hsl)/0.12156862745098039);
--opacity-pink-12-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 64.706%;
--opacity-pink-16: hsl(var(--opacity-pink-16-hsl)/0.1607843137254902);
--opacity-pink-16-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 64.706%;
--opacity-pink-20: hsl(var(--opacity-pink-20-hsl)/0.2);
--opacity-pink-20-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 64.706%;
--opacity-pink-24: hsl(var(--opacity-pink-24-hsl)/0.23921568627450981);
--opacity-pink-24-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 64.706%;
--opacity-pink-28: hsl(var(--opacity-pink-28-hsl)/0.2784313725490196);
--opacity-pink-28-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 64.706%;
--opacity-pink-32: hsl(var(--opacity-pink-32-hsl)/0.3215686274509804);
--opacity-pink-32-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 64.706%;
--opacity-pink-36: hsl(var(--opacity-pink-36-hsl)/0.3607843137254902);
--opacity-pink-36-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 64.706%;
--opacity-pink-40: hsl(var(--opacity-pink-40-hsl)/0.4);
--opacity-pink-40-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 64.706%;
--opacity-pink-44: hsl(var(--opacity-pink-44-hsl)/0.4392156862745098);
--opacity-pink-44-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 64.706%;
--opacity-pink-48: hsl(var(--opacity-pink-48-hsl)/0.47843137254901963);
--opacity-pink-48-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 64.706%;
--opacity-pink-52: hsl(var(--opacity-pink-52-hsl)/0.5215686274509804);
--opacity-pink-52-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 64.706%;
--opacity-pink-56: hsl(var(--opacity-pink-56-hsl)/0.5607843137254902);
--opacity-pink-56-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 64.706%;
--opacity-pink-60: hsl(var(--opacity-pink-60-hsl)/0.6);
--opacity-pink-60-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 64.706%;
--opacity-pink-64: hsl(var(--opacity-pink-64-hsl)/0.6392156862745098);
--opacity-pink-64-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 64.706%;
--opacity-pink-68: hsl(var(--opacity-pink-68-hsl)/0.6784313725490196);
--opacity-pink-68-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 64.706%;
--opacity-pink-72: hsl(var(--opacity-pink-72-hsl)/0.7215686274509804);
--opacity-pink-72-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 64.706%;
--opacity-pink-76: hsl(var(--opacity-pink-76-hsl)/0.7607843137254902);
--opacity-pink-76-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 64.706%;
--opacity-pink-80: hsl(var(--opacity-pink-80-hsl)/0.8);
--opacity-pink-80-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 64.706%;
--opacity-pink-84: hsl(var(--opacity-pink-84-hsl)/0.8392156862745098);
--opacity-pink-84-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 64.706%;
--opacity-pink-88: hsl(var(--opacity-pink-88-hsl)/0.8784313725490196);
--opacity-pink-88-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 64.706%;
--opacity-pink-92: hsl(var(--opacity-pink-92-hsl)/0.9215686274509803);
--opacity-pink-92-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 64.706%;
--opacity-pink-96: hsl(var(--opacity-pink-96-hsl)/0.9607843137254902);
--opacity-pink-96-hsl: 315 calc(var(--saturation-factor, 1) * 100%) 64.706%;
--opacity-white-1: hsl(var(--opacity-white-1-hsl)/0.0196078431372549);
--opacity-white-1-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
--opacity-white-4: hsl(var(--opacity-white-4-hsl)/0.0392156862745098);
--opacity-white-4-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
--opacity-white-8: hsl(var(--opacity-white-8-hsl)/0.0784313725490196);
--opacity-white-8-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
--opacity-white-12: hsl(var(--opacity-white-12-hsl)/0.12156862745098039);
--opacity-white-12-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
--opacity-white-16: hsl(var(--opacity-white-16-hsl)/0.1607843137254902);
--opacity-white-16-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
--opacity-white-20: hsl(var(--opacity-white-20-hsl)/0.2);
--opacity-white-20-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
--opacity-white-24: hsl(var(--opacity-white-24-hsl)/0.23921568627450981);
--opacity-white-24-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
--opacity-white-28: hsl(var(--opacity-white-28-hsl)/0.2784313725490196);
--opacity-white-28-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
--opacity-white-32: hsl(var(--opacity-white-32-hsl)/0.3215686274509804);
--opacity-white-32-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
--opacity-white-36: hsl(var(--opacity-white-36-hsl)/0.3607843137254902);
--opacity-white-36-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
--opacity-white-40: hsl(var(--opacity-white-40-hsl)/0.4);
--opacity-white-40-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
--opacity-white-44: hsl(var(--opacity-white-44-hsl)/0.4392156862745098);
--opacity-white-44-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
--opacity-white-48: hsl(var(--opacity-white-48-hsl)/0.47843137254901963);
--opacity-white-48-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
--opacity-white-52: hsl(var(--opacity-white-52-hsl)/0.5215686274509804);
--opacity-white-52-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
--opacity-white-56: hsl(var(--opacity-white-56-hsl)/0.5607843137254902);
--opacity-white-56-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
--opacity-white-60: hsl(var(--opacity-white-60-hsl)/0.6);
--opacity-white-60-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
--opacity-white-64: hsl(var(--opacity-white-64-hsl)/0.6392156862745098);
--opacity-white-64-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
--opacity-white-68: hsl(var(--opacity-white-68-hsl)/0.6784313725490196);
--opacity-white-68-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
--opacity-white-72: hsl(var(--opacity-white-72-hsl)/0.7215686274509804);
--opacity-white-72-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
--opacity-white-76: hsl(var(--opacity-white-76-hsl)/0.7607843137254902);
--opacity-white-76-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
--opacity-white-80: hsl(var(--opacity-white-80-hsl)/0.8);
--opacity-white-80-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
--opacity-white-84: hsl(var(--opacity-white-84-hsl)/0.8392156862745098);
--opacity-white-84-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
--opacity-white-88: hsl(var(--opacity-white-88-hsl)/0.8784313725490196);
--opacity-white-88-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
--opacity-white-92: hsl(var(--opacity-white-92-hsl)/0.9215686274509803);
--opacity-white-92-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
--opacity-white-96: hsl(var(--opacity-white-96-hsl)/0.9607843137254902);
--opacity-white-96-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
--opacity-black-1: hsl(var(--opacity-black-1-hsl)/0.0196078431372549);
--opacity-black-1-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
--opacity-black-4: hsl(var(--opacity-black-4-hsl)/0.0392156862745098);
--opacity-black-4-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
--opacity-black-8: hsl(var(--opacity-black-8-hsl)/0.0784313725490196);
--opacity-black-8-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
--opacity-black-12: hsl(var(--opacity-black-12-hsl)/0.12156862745098039);
--opacity-black-12-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
--opacity-black-16: hsl(var(--opacity-black-16-hsl)/0.1607843137254902);
--opacity-black-16-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
--opacity-black-20: hsl(var(--opacity-black-20-hsl)/0.2);
--opacity-black-20-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
--opacity-black-24: hsl(var(--opacity-black-24-hsl)/0.23921568627450981);
--opacity-black-24-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
--opacity-black-28: hsl(var(--opacity-black-28-hsl)/0.2784313725490196);
--opacity-black-28-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
--opacity-black-32: hsl(var(--opacity-black-32-hsl)/0.3215686274509804);
--opacity-black-32-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
--opacity-black-36: hsl(var(--opacity-black-36-hsl)/0.3607843137254902);
--opacity-black-36-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
--opacity-black-40: hsl(var(--opacity-black-40-hsl)/0.4);
--opacity-black-40-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
--opacity-black-44: hsl(var(--opacity-black-44-hsl)/0.4392156862745098);
--opacity-black-44-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
--opacity-black-48: hsl(var(--opacity-black-48-hsl)/0.47843137254901963);
--opacity-black-48-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
--opacity-black-52: hsl(var(--opacity-black-52-hsl)/0.5215686274509804);
--opacity-black-52-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
--opacity-black-56: hsl(var(--opacity-black-56-hsl)/0.5607843137254902);
--opacity-black-56-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
--opacity-black-60: hsl(var(--opacity-black-60-hsl)/0.6);
--opacity-black-60-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
--opacity-black-64: hsl(var(--opacity-black-64-hsl)/0.6392156862745098);
--opacity-black-64-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
--opacity-black-68: hsl(var(--opacity-black-68-hsl)/0.6784313725490196);
--opacity-black-68-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
--opacity-black-72: hsl(var(--opacity-black-72-hsl)/0.7215686274509804);
--opacity-black-72-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
--opacity-black-76: hsl(var(--opacity-black-76-hsl)/0.7607843137254902);
--opacity-black-76-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
--opacity-black-80: hsl(var(--opacity-black-80-hsl)/0.8);
--opacity-black-80-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
--opacity-black-84: hsl(var(--opacity-black-84-hsl)/0.8392156862745098);
--opacity-black-84-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
--opacity-black-88: hsl(var(--opacity-black-88-hsl)/0.8784313725490196);
--opacity-black-88-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
--opacity-black-92: hsl(var(--opacity-black-92-hsl)/0.9215686274509803);
--opacity-black-92-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
--opacity-black-96: hsl(var(--opacity-black-96-hsl)/0.9607843137254902);
--opacity-black-96-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
--red-100: hsl(var(--red-100-hsl)/1);
--red-100-hsl: 350 calc(var(--saturation-factor, 1) * 75%) 98.431%;
--red-130: hsl(var(--red-130-hsl)/1);
--red-130-hsl: 0 calc(var(--saturation-factor, 1) * 83.333%) 97.647%;
--red-160: hsl(var(--red-160-hsl)/1);
--red-160-hsl: 0 calc(var(--saturation-factor, 1) * 90.909%) 95.686%;
--red-200: hsl(var(--red-200-hsl)/1);
--red-200-hsl: 358.125 calc(var(--saturation-factor, 1) * 88.889%) 92.941%;
--red-230: hsl(var(--red-230-hsl)/1);
--red-230-hsl: 358.696 calc(var(--saturation-factor, 1) * 85.185%) 89.412%;
--red-260: hsl(var(--red-260-hsl)/1);
--red-260-hsl: 359.077 calc(var(--saturation-factor, 1) * 89.041%) 85.686%;
--red-300: hsl(var(--red-300-hsl)/1);
--red-300-hsl: 358.588 calc(var(--saturation-factor, 1) * 91.398%) 81.765%;
--red-330: hsl(var(--red-330-hsl)/1);
--red-330-hsl: 358.857 calc(var(--saturation-factor, 1) * 91.304%) 77.451%;
--red-345: hsl(var(--red-345-hsl)/1);
--red-345-hsl: 358.168 calc(var(--saturation-factor, 1) * 92.908%) 72.353%;
--red-360: hsl(var(--red-360-hsl)/1);
--red-360-hsl: 358.471 calc(var(--saturation-factor, 1) * 91.813%) 66.471%;
--red-400: hsl(var(--red-400-hsl)/1);
--red-400-hsl: 358.659 calc(var(--saturation-factor, 1) * 87.317%) 59.804%;
--red-430: hsl(var(--red-430-hsl)/1);
--red-430-hsl: 358.16 calc(var(--saturation-factor, 1) * 68.776%) 53.529%;
--red-460: hsl(var(--red-460-hsl)/1);
--red-460-hsl: 358.705 calc(var(--saturation-factor, 1) * 59.149%) 46.078%;
--red-500: hsl(var(--red-500-hsl)/1);
--red-500-hsl: 359.504 calc(var(--saturation-factor, 1) * 60.199%) 39.412%;
--red-530: hsl(var(--red-530-hsl)/1);
--red-530-hsl: 358.919 calc(var(--saturation-factor, 1) * 63.429%) 34.314%;
--red-560: hsl(var(--red-560-hsl)/1);
--red-560-hsl: 358.788 calc(var(--saturation-factor, 1) * 63.871%) 30.392%;
--red-600: hsl(var(--red-600-hsl)/1);
--red-600-hsl: 358.636 calc(var(--saturation-factor, 1) * 64.706%) 26.667%;
--red-630: hsl(var(--red-630-hsl)/1);
--red-630-hsl: 358.5 calc(var(--saturation-factor, 1) * 65.574%) 23.922%;
--red-660: hsl(var(--red-660-hsl)/1);
--red-660-hsl: 359.155 calc(var(--saturation-factor, 1) * 65.138%) 21.373%;
--red-700: hsl(var(--red-700-hsl)/1);
--red-700-hsl: 358.125 calc(var(--saturation-factor, 1) * 66.667%) 18.824%;
--red-730: hsl(var(--red-730-hsl)/1);
--red-730-hsl: 358.929 calc(var(--saturation-factor, 1) * 66.667%) 16.471%;
--red-760: hsl(var(--red-760-hsl)/1);
--red-760-hsl: 358.846 calc(var(--saturation-factor, 1) * 70.27%) 14.51%;
--red-800: hsl(var(--red-800-hsl)/1);
--red-800-hsl: 358.636 calc(var(--saturation-factor, 1) * 68.75%) 12.549%;
--red-830: hsl(var(--red-830-hsl)/1);
--red-830-hsl: 358.378 calc(var(--saturation-factor, 1) * 67.273%) 10.784%;
--red-860: hsl(var(--red-860-hsl)/1);
--red-860-hsl: 0 calc(var(--saturation-factor, 1) * 66.667%) 9.412%;
--red-900: hsl(var(--red-900-hsl)/1);
--red-900-hsl: 0 calc(var(--saturation-factor, 1) * 70%) 7.843%;
--orange-100: hsl(var(--orange-100-hsl)/1);
--orange-100-hsl: 18 calc(var(--saturation-factor, 1) * 100%) 98.039%;
--orange-130: hsl(var(--orange-130-hsl)/1);
--orange-130-hsl: 23.333 calc(var(--saturation-factor, 1) * 100%) 96.471%;
--orange-160: hsl(var(--orange-160-hsl)/1);
--orange-160-hsl: 21.29 calc(var(--saturation-factor, 1) * 93.939%) 93.529%;
--orange-200: hsl(var(--orange-200-hsl)/1);
--orange-200-hsl: 21.25 calc(var(--saturation-factor, 1) * 92.308%) 89.804%;
--orange-230: hsl(var(--orange-230-hsl)/1);
--orange-230-hsl: 23.514 calc(var(--saturation-factor, 1) * 92.5%) 84.314%;
--orange-260: hsl(var(--orange-260-hsl)/1);
--orange-260-hsl: 23.301 calc(var(--saturation-factor, 1) * 94.495%) 78.627%;
--orange-300: hsl(var(--orange-300-hsl)/1);
--orange-300-hsl: 25.468 calc(var(--saturation-factor, 1) * 94.558%) 71.176%;
--orange-330: hsl(var(--orange-330-hsl)/1);
--orange-330-hsl: 27 calc(var(--saturation-factor, 1) * 94.737%) 62.745%;
--orange-345: hsl(var(--orange-345-hsl)/1);
--orange-345-hsl: 28.342 calc(var(--saturation-factor, 1) * 87.665%) 55.49%;
--orange-360: hsl(var(--orange-360-hsl)/1);
--orange-360-hsl: 26.145 calc(var(--saturation-factor, 1) * 71.315%) 50.784%;
--orange-400: hsl(var(--orange-400-hsl)/1);
--orange-400-hsl: 25.443 calc(var(--saturation-factor, 1) * 67.521%) 45.882%;
--orange-430: hsl(var(--orange-430-hsl)/1);
--orange-430-hsl: 24.681 calc(var(--saturation-factor, 1) * 69.458%) 39.804%;
--orange-460: hsl(var(--orange-460-hsl)/1);
--orange-460-hsl: 23.538 calc(var(--saturation-factor, 1) * 72.222%) 35.294%;
--orange-500: hsl(var(--orange-500-hsl)/1);
--orange-500-hsl: 22.314 calc(var(--saturation-factor, 1) * 76.101%) 31.176%;
--orange-530: hsl(var(--orange-530-hsl)/1);
--orange-530-hsl: 21.869 calc(var(--saturation-factor, 1) * 76.978%) 27.255%;
--orange-560: hsl(var(--orange-560-hsl)/1);
--orange-560-hsl: 21.474 calc(var(--saturation-factor, 1) * 77.236%) 24.118%;
--orange-600: hsl(var(--orange-600-hsl)/1);
--orange-600-hsl: 22.857 calc(var(--saturation-factor, 1) * 79.245%) 20.784%;
--orange-630: hsl(var(--orange-630-hsl)/1);
--orange-630-hsl: 22.105 calc(var(--saturation-factor, 1) * 79.167%) 18.824%;
--orange-660: hsl(var(--orange-660-hsl)/1);
--orange-660-hsl: 22.388 calc(var(--saturation-factor, 1) * 78.824%) 16.667%;
--orange-700: hsl(var(--orange-700-hsl)/1);
--orange-700-hsl: 21.724 calc(var(--saturation-factor, 1) * 76.316%) 14.902%;
--orange-730: hsl(var(--orange-730-hsl)/1);
--orange-730-hsl: 21.923 calc(var(--saturation-factor, 1) * 78.788%) 12.941%;
--orange-760: hsl(var(--orange-760-hsl)/1);
--orange-760-hsl: 21.333 calc(var(--saturation-factor, 1) * 78.947%) 11.176%;
--orange-800: hsl(var(--orange-800-hsl)/1);
--orange-800-hsl: 21 calc(var(--saturation-factor, 1) * 80%) 9.804%;
--orange-830: hsl(var(--orange-830-hsl)/1);
--orange-830-hsl: 20 calc(var(--saturation-factor, 1) * 76.744%) 8.431%;
--orange-860: hsl(var(--orange-860-hsl)/1);
--orange-860-hsl: 20 calc(var(--saturation-factor, 1) * 72.973%) 7.255%;
--orange-900: hsl(var(--orange-900-hsl)/1);
--orange-900-hsl: 25.714 calc(var(--saturation-factor, 1) * 72.414%) 5.686%;
--yellow-100: hsl(var(--yellow-100-hsl)/1);
--yellow-100-hsl: 33.75 calc(var(--saturation-factor, 1) * 100%) 96.863%;
--yellow-130: hsl(var(--yellow-130-hsl)/1);
--yellow-130-hsl: 31.304 calc(var(--saturation-factor, 1) * 100%) 95.49%;
--yellow-160: hsl(var(--yellow-160-hsl)/1);
--yellow-160-hsl: 32.727 calc(var(--saturation-factor, 1) * 100%) 91.373%;
--yellow-200: hsl(var(--yellow-200-hsl)/1);
--yellow-200-hsl: 35 calc(var(--saturation-factor, 1) * 97.297%) 85.49%;
--yellow-230: hsl(var(--yellow-230-hsl)/1);
--yellow-230-hsl: 36.637 calc(var(--saturation-factor, 1) * 96.581%) 77.059%;
--yellow-260: hsl(var(--yellow-260-hsl)/1);
--yellow-260-hsl: 40.656 calc(var(--saturation-factor, 1) * 96.825%) 62.941%;
--yellow-300: hsl(var(--yellow-300-hsl)/1);
--yellow-300-hsl: 40.421 calc(var(--saturation-factor, 1) * 86.364%) 56.863%;
--yellow-330: hsl(var(--yellow-330-hsl)/1);
--yellow-330-hsl: 40 calc(var(--saturation-factor, 1) * 75.309%) 52.353%;
--yellow-345: hsl(var(--yellow-345-hsl)/1);
--yellow-345-hsl: 39.545 calc(var(--saturation-factor, 1) * 70.968%) 48.627%;
--yellow-360: hsl(var(--yellow-360-hsl)/1);
--yellow-360-hsl: 39.018 calc(var(--saturation-factor, 1) * 74.429%) 42.941%;
--yellow-400: hsl(var(--yellow-400-hsl)/1);
--yellow-400-hsl: 37.792 calc(var(--saturation-factor, 1) * 78.571%) 38.431%;
--yellow-430: hsl(var(--yellow-430-hsl)/1);
--yellow-430-hsl: 37.447 calc(var(--saturation-factor, 1) * 84.431%) 32.745%;
--yellow-460: hsl(var(--yellow-460-hsl)/1);
--yellow-460-hsl: 36.279 calc(var(--saturation-factor, 1) * 87.755%) 28.824%;
--yellow-500: hsl(var(--yellow-500-hsl)/1);
--yellow-500-hsl: 35.5 calc(var(--saturation-factor, 1) * 93.75%) 25.098%;
--yellow-530: hsl(var(--yellow-530-hsl)/1);
--yellow-530-hsl: 34.857 calc(var(--saturation-factor, 1) * 92.92%) 22.157%;
--yellow-560: hsl(var(--yellow-560-hsl)/1);
--yellow-560-hsl: 33.83 calc(var(--saturation-factor, 1) * 94%) 19.608%;
--yellow-600: hsl(var(--yellow-600-hsl)/1);
--yellow-600-hsl: 34.815 calc(var(--saturation-factor, 1) * 93.103%) 17.059%;
--yellow-630: hsl(var(--yellow-630-hsl)/1);
--yellow-630-hsl: 34.521 calc(var(--saturation-factor, 1) * 92.405%) 15.49%;
--yellow-660: hsl(var(--yellow-660-hsl)/1);
--yellow-660-hsl: 34.688 calc(var(--saturation-factor, 1) * 91.429%) 13.725%;
--yellow-700: hsl(var(--yellow-700-hsl)/1);
--yellow-700-hsl: 34.286 calc(var(--saturation-factor, 1) * 90.323%) 12.157%;
--yellow-730: hsl(var(--yellow-730-hsl)/1);
--yellow-730-hsl: 32.941 calc(var(--saturation-factor, 1) * 92.727%) 10.784%;
--yellow-760: hsl(var(--yellow-760-hsl)/1);
--yellow-760-hsl: 32.727 calc(var(--saturation-factor, 1) * 91.667%) 9.412%;
--yellow-800: hsl(var(--yellow-800-hsl)/1);
--yellow-800-hsl: 32.432 calc(var(--saturation-factor, 1) * 90.244%) 8.039%;
--yellow-830: hsl(var(--yellow-830-hsl)/1);
--yellow-830-hsl: 31.875 calc(var(--saturation-factor, 1) * 88.889%) 7.059%;
--yellow-860: hsl(var(--yellow-860-hsl)/1);
--yellow-860-hsl: 32.308 calc(var(--saturation-factor, 1) * 86.667%) 5.882%;
--yellow-900: hsl(var(--yellow-900-hsl)/1);
--yellow-900-hsl: 36 calc(var(--saturation-factor, 1) * 83.333%) 4.706%;
--green-100: hsl(var(--green-100-hsl)/1);
--green-100-hsl: 136.667 calc(var(--saturation-factor, 1) * 90%) 96.078%;
--green-130: hsl(var(--green-130-hsl)/1);
--green-130-hsl: 136.875 calc(var(--saturation-factor, 1) * 94.118%) 93.333%;
--green-160: hsl(var(--green-160-hsl)/1);
--green-160-hsl: 140.952 calc(var(--saturation-factor, 1) * 91.304%) 86.471%;
--green-200: hsl(var(--green-200-hsl)/1);
--green-200-hsl: 143.478 calc(var(--saturation-factor, 1) * 93.496%) 75.882%;
--green-230: hsl(var(--green-230-hsl)/1);
--green-230-hsl: 146.323 calc(var(--saturation-factor, 1) * 86.592%) 64.902%;
--green-260: hsl(var(--green-260-hsl)/1);
--green-260-hsl: 145.605 calc(var(--saturation-factor, 1) * 75.12%) 59.02%;
--green-300: hsl(var(--green-300-hsl)/1);
--green-300-hsl: 146.323 calc(var(--saturation-factor, 1) * 65.401%) 53.529%;
--green-330: hsl(var(--green-330-hsl)/1);
--green-330-hsl: 146.494 calc(var(--saturation-factor, 1) * 63.115%) 47.843%;
--green-345: hsl(var(--green-345-hsl)/1);
--green-345-hsl: 146.939 calc(var(--saturation-factor, 1) * 65.919%) 43.725%;
--green-360: hsl(var(--green-360-hsl)/1);
--green-360-hsl: 145.385 calc(var(--saturation-factor, 1) * 65%) 39.216%;
--green-400: hsl(var(--green-400-hsl)/1);
--green-400-hsl: 142.703 calc(var(--saturation-factor, 1) * 60.656%) 35.882%;
--green-430: hsl(var(--green-430-hsl)/1);
--green-430-hsl: 141.522 calc(var(--saturation-factor, 1) * 56.098%) 32.157%;
--green-460: hsl(var(--green-460-hsl)/1);
--green-460-hsl: 141.481 calc(var(--saturation-factor, 1) * 56.643%) 28.039%;
--green-500: hsl(var(--green-500-hsl)/1);
--green-500-hsl: 141.37 calc(var(--saturation-factor, 1) * 58.4%) 24.51%;
--green-530: hsl(var(--green-530-hsl)/1);
--green-530-hsl: 140.308 calc(var(--saturation-factor, 1) * 60.748%) 20.98%;
--green-560: hsl(var(--green-560-hsl)/1);
--green-560-hsl: 138.621 calc(var(--saturation-factor, 1) * 61.702%) 18.431%;
--green-600: hsl(var(--green-600-hsl)/1);
--green-600-hsl: 139.245 calc(var(--saturation-factor, 1) * 65.432%) 15.882%;
--green-630: hsl(var(--green-630-hsl)/1);
--green-630-hsl: 140 calc(var(--saturation-factor, 1) * 66.667%) 14.118%;
--green-660: hsl(var(--green-660-hsl)/1);
--green-660-hsl: 139.091 calc(var(--saturation-factor, 1) * 68.75%) 12.549%;
--green-700: hsl(var(--green-700-hsl)/1);
--green-700-hsl: 141 calc(var(--saturation-factor, 1) * 74.074%) 10.588%;
--green-730: hsl(var(--green-730-hsl)/1);
--green-730-hsl: 138.333 calc(var(--saturation-factor, 1) * 78.261%) 9.02%;
--green-760: hsl(var(--green-760-hsl)/1);
--green-760-hsl: 140 calc(var(--saturation-factor, 1) * 84.615%) 7.647%;
--green-800: hsl(var(--green-800-hsl)/1);
--green-800-hsl: 139.286 calc(var(--saturation-factor, 1) * 82.353%) 6.667%;
--green-830: hsl(var(--green-830-hsl)/1);
--green-830-hsl: 137.5 calc(var(--saturation-factor, 1) * 80%) 5.882%;
--green-860: hsl(var(--green-860-hsl)/1);
--green-860-hsl: 132.632 calc(var(--saturation-factor, 1) * 70.37%) 5.294%;
--green-900: hsl(var(--green-900-hsl)/1);
--green-900-hsl: 128.571 calc(var(--saturation-factor, 1) * 58.333%) 4.706%;
--blue-100: hsl(var(--blue-100-hsl)/1);
--blue-100-hsl: 210 calc(var(--saturation-factor, 1) * 80%) 98.039%;
--blue-130: hsl(var(--blue-130-hsl)/1);
--blue-130-hsl: 210 calc(var(--saturation-factor, 1) * 87.5%) 96.863%;
--blue-160: hsl(var(--blue-160-hsl)/1);
--blue-160-hsl: 208.889 calc(var(--saturation-factor, 1) * 87.097%) 93.922%;
--blue-200: hsl(var(--blue-200-hsl)/1);
--blue-200-hsl: 206.25 calc(var(--saturation-factor, 1) * 92.308%) 89.804%;
--blue-230: hsl(var(--blue-230-hsl)/1);
--blue-230-hsl: 205.135 calc(var(--saturation-factor, 1) * 92.5%) 84.314%;
--blue-260: hsl(var(--blue-260-hsl)/1);
--blue-260-hsl: 204.231 calc(var(--saturation-factor, 1) * 94.545%) 78.431%;
--blue-300: hsl(var(--blue-300-hsl)/1);
--blue-300-hsl: 202.649 calc(var(--saturation-factor, 1) * 97.419%) 69.608%;
--blue-330: hsl(var(--blue-330-hsl)/1);
--blue-330-hsl: 200.957 calc(var(--saturation-factor, 1) * 100%) 59.02%;
--blue-345: hsl(var(--blue-345-hsl)/1);
--blue-345-hsl: 199.524 calc(var(--saturation-factor, 1) * 100%) 49.412%;
--blue-360: hsl(var(--blue-360-hsl)/1);
--blue-360-hsl: 202.562 calc(var(--saturation-factor, 1) * 100%) 47.451%;
--blue-400: hsl(var(--blue-400-hsl)/1);
--blue-400-hsl: 206.809 calc(var(--saturation-factor, 1) * 100%) 46.078%;
--blue-430: hsl(var(--blue-430-hsl)/1);
--blue-430-hsl: 212.208 calc(var(--saturation-factor, 1) * 100%) 45.294%;
--blue-460: hsl(var(--blue-460-hsl)/1);
--blue-460-hsl: 213.589 calc(var(--saturation-factor, 1) * 100%) 40.98%;
--blue-500: hsl(var(--blue-500-hsl)/1);
--blue-500-hsl: 213.297 calc(var(--saturation-factor, 1) * 100%) 35.686%;
--blue-530: hsl(var(--blue-530-hsl)/1);
--blue-530-hsl: 212.129 calc(var(--saturation-factor, 1) * 100%) 30.392%;
--blue-560: hsl(var(--blue-560-hsl)/1);
--blue-560-hsl: 211.765 calc(var(--saturation-factor, 1) * 100%) 26.667%;
--blue-600: hsl(var(--blue-600-hsl)/1);
--blue-600-hsl: 211.017 calc(var(--saturation-factor, 1) * 100%) 23.137%;
--blue-630: hsl(var(--blue-630-hsl)/1);
--blue-630-hsl: 211.132 calc(var(--saturation-factor, 1) * 100%) 20.784%;
--blue-660: hsl(var(--blue-660-hsl)/1);
--blue-660-hsl: 211.579 calc(var(--saturation-factor, 1) * 100%) 18.627%;
--blue-700: hsl(var(--blue-700-hsl)/1);
--blue-700-hsl: 211.765 calc(var(--saturation-factor, 1) * 100%) 16.667%;
--blue-730: hsl(var(--blue-730-hsl)/1);
--blue-730-hsl: 210.833 calc(var(--saturation-factor, 1) * 100%) 14.118%;
--blue-760: hsl(var(--blue-760-hsl)/1);
--blue-760-hsl: 211.429 calc(var(--saturation-factor, 1) * 100%) 12.353%;
--blue-800: hsl(var(--blue-800-hsl)/1);
--blue-800-hsl: 211.111 calc(var(--saturation-factor, 1) * 100%) 10.588%;
--blue-830: hsl(var(--blue-830-hsl)/1);
--blue-830-hsl: 212.5 calc(var(--saturation-factor, 1) * 100%) 9.412%;
--blue-860: hsl(var(--blue-860-hsl)/1);
--blue-860-hsl: 213.488 calc(var(--saturation-factor, 1) * 100%) 8.431%;
--blue-900: hsl(var(--blue-900-hsl)/1);
--blue-900-hsl: 213.333 calc(var(--saturation-factor, 1) * 100%) 7.059%;
--teal-100: hsl(var(--teal-100-hsl)/1);
--teal-100-hsl: 193.333 calc(var(--saturation-factor, 1) * 69.231%) 97.451%;
--teal-130: hsl(var(--teal-130-hsl)/1);
--teal-130-hsl: 192 calc(var(--saturation-factor, 1) * 83.333%) 95.294%;
--teal-160: hsl(var(--teal-160-hsl)/1);
--teal-160-hsl: 190.5 calc(var(--saturation-factor, 1) * 83.333%) 90.588%;
--teal-200: hsl(var(--teal-200-hsl)/1);
--teal-200-hsl: 188.333 calc(var(--saturation-factor, 1) * 85.714%) 83.529%;
--teal-230: hsl(var(--teal-230-hsl)/1);
--teal-230-hsl: 187.934 calc(var(--saturation-factor, 1) * 88.321%) 73.137%;
--teal-260: hsl(var(--teal-260-hsl)/1);
--teal-260-hsl: 188.276 calc(var(--saturation-factor, 1) * 81.921%) 65.294%;
--teal-300: hsl(var(--teal-300-hsl)/1);
--teal-300-hsl: 188.903 calc(var(--saturation-factor, 1) * 72.77%) 58.235%;
--teal-330: hsl(var(--teal-330-hsl)/1);
--teal-330-hsl: 189.375 calc(var(--saturation-factor, 1) * 65.574%) 52.157%;
--teal-345: hsl(var(--teal-345-hsl)/1);
--teal-345-hsl: 189.677 calc(var(--saturation-factor, 1) * 62.753%) 48.431%;
--teal-360: hsl(var(--teal-360-hsl)/1);
--teal-360-hsl: 189.718 calc(var(--saturation-factor, 1) * 63.964%) 43.529%;
--teal-400: hsl(var(--teal-400-hsl)/1);
--teal-400-hsl: 189.6 calc(var(--saturation-factor, 1) * 63.452%) 38.627%;
--teal-430: hsl(var(--teal-430-hsl)/1);
--teal-430-hsl: 190.459 calc(var(--saturation-factor, 1) * 63.006%) 33.922%;
--teal-460: hsl(var(--teal-460-hsl)/1);
--teal-460-hsl: 190.515 calc(var(--saturation-factor, 1) * 64.238%) 29.608%;
--teal-500: hsl(var(--teal-500-hsl)/1);
--teal-500-hsl: 190.465 calc(var(--saturation-factor, 1) * 65.152%) 25.882%;
--teal-530: hsl(var(--teal-530-hsl)/1);
--teal-530-hsl: 190.263 calc(var(--saturation-factor, 1) * 66.667%) 22.353%;
--teal-560: hsl(var(--teal-560-hsl)/1);
--teal-560-hsl: 189.565 calc(var(--saturation-factor, 1) * 69.697%) 19.412%;
--teal-600: hsl(var(--teal-600-hsl)/1);
--teal-600-hsl: 188.852 calc(var(--saturation-factor, 1) * 71.765%) 16.667%;
--teal-630: hsl(var(--teal-630-hsl)/1);
--teal-630-hsl: 189.643 calc(var(--saturation-factor, 1) * 73.684%) 14.902%;
--teal-660: hsl(var(--teal-660-hsl)/1);
--teal-660-hsl: 188.4 calc(var(--saturation-factor, 1) * 75.758%) 12.941%;
--teal-700: hsl(var(--teal-700-hsl)/1);
--teal-700-hsl: 189.13 calc(var(--saturation-factor, 1) * 79.31%) 11.373%;
--teal-730: hsl(var(--teal-730-hsl)/1);
--teal-730-hsl: 189 calc(var(--saturation-factor, 1) * 80%) 9.804%;
--teal-760: hsl(var(--teal-760-hsl)/1);
--teal-760-hsl: 188.571 calc(var(--saturation-factor, 1) * 81.395%) 8.431%;
--teal-800: hsl(var(--teal-800-hsl)/1);
--teal-800-hsl: 188 calc(var(--saturation-factor, 1) * 83.333%) 7.059%;
--teal-830: hsl(var(--teal-830-hsl)/1);
--teal-830-hsl: 188.889 calc(var(--saturation-factor, 1) * 87.097%) 6.078%;
--teal-860: hsl(var(--teal-860-hsl)/1);
--teal-860-hsl: 187.826 calc(var(--saturation-factor, 1) * 85.185%) 5.294%;
--teal-900: hsl(var(--teal-900-hsl)/1);
--teal-900-hsl: 189 calc(var(--saturation-factor, 1) * 90.909%) 4.314%;
--white: hsl(var(--white-hsl)/1);
--white-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
--white-500: hsl(var(--white-500-hsl)/1);
--white-500-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 100%;
--black: hsl(var(--black-hsl)/1);
--black-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
--black-500: hsl(var(--black-500-hsl)/1);
--black-500-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0%;
--brand-100: hsl(var(--brand-100-hsl)/1);
--brand-100-hsl: 240 calc(var(--saturation-factor, 1) * 77.778%) 98.235%;
--brand-130: hsl(var(--brand-130-hsl)/1);
--brand-130-hsl: 235.714 calc(var(--saturation-factor, 1) * 87.5%) 96.863%;
--brand-160: hsl(var(--brand-160-hsl)/1);
--brand-160-hsl: 234.545 calc(var(--saturation-factor, 1) * 84.615%) 94.902%;
--brand-200: hsl(var(--brand-200-hsl)/1);
--brand-200-hsl: 236 calc(var(--saturation-factor, 1) * 83.333%) 92.941%;
--brand-230: hsl(var(--brand-230-hsl)/1);
--brand-230-hsl: 235.5 calc(var(--saturation-factor, 1) * 86.957%) 90.98%;
--brand-260: hsl(var(--brand-260-hsl)/1);
--brand-260-hsl: 235.2 calc(var(--saturation-factor, 1) * 86.207%) 88.627%;
--brand-300: hsl(var(--brand-300-hsl)/1);
--brand-300-hsl: 235.161 calc(var(--saturation-factor, 1) * 86.111%) 85.882%;
--brand-330: hsl(var(--brand-330-hsl)/1);
--brand-330-hsl: 234.75 calc(var(--saturation-factor, 1) * 85.106%) 81.569%;
--brand-345: hsl(var(--brand-345-hsl)/1);
--brand-345-hsl: 234.783 calc(var(--saturation-factor, 1) * 85.185%) 78.824%;
--brand-360: hsl(var(--brand-360-hsl)/1);
--brand-360-hsl: 235.152 calc(var(--saturation-factor, 1) * 86.087%) 77.451%;
--brand-400: hsl(var(--brand-400-hsl)/1);
--brand-400-hsl: 234.677 calc(var(--saturation-factor, 1) * 86.111%) 71.765%;
--brand-430: hsl(var(--brand-430-hsl)/1);
--brand-430-hsl: 235 calc(var(--saturation-factor, 1) * 85.714%) 69.804%;
--brand-460: hsl(var(--brand-460-hsl)/1);
--brand-460-hsl: 234.93 calc(var(--saturation-factor, 1) * 85.542%) 67.451%;
--brand-500: hsl(var(--brand-500-hsl)/1);
--brand-500-hsl: 234.935 calc(var(--saturation-factor, 1) * 85.556%) 64.706%;
--brand-530: hsl(var(--brand-530-hsl)/1);
--brand-530-hsl: 234.857 calc(var(--saturation-factor, 1) * 66.667%) 58.824%;
--brand-560: hsl(var(--brand-560-hsl)/1);
--brand-560-hsl: 234.72 calc(var(--saturation-factor, 1) * 51.44%) 52.353%;
--brand-600: hsl(var(--brand-600-hsl)/1);
--brand-600-hsl: 234.857 calc(var(--saturation-factor, 1) * 46.667%) 44.118%;
--brand-630: hsl(var(--brand-630-hsl)/1);
--brand-630-hsl: 235.385 calc(var(--saturation-factor, 1) * 46.667%) 38.235%;
--brand-660: hsl(var(--brand-660-hsl)/1);
--brand-660-hsl: 234.75 calc(var(--saturation-factor, 1) * 47.059%) 33.333%;
--brand-700: hsl(var(--brand-700-hsl)/1);
--brand-700-hsl: 235.161 calc(var(--saturation-factor, 1) * 46.97%) 25.882%;
--brand-730: hsl(var(--brand-730-hsl)/1);
--brand-730-hsl: 234.828 calc(var(--saturation-factor, 1) * 46.774%) 24.314%;
--brand-760: hsl(var(--brand-760-hsl)/1);
--brand-760-hsl: 234.34 calc(var(--saturation-factor, 1) * 46.903%) 22.157%;
--brand-800: hsl(var(--brand-800-hsl)/1);
--brand-800-hsl: 234.894 calc(var(--saturation-factor, 1) * 47.475%) 19.412%;
--brand-830: hsl(var(--brand-830-hsl)/1);
--brand-830-hsl: 235 calc(var(--saturation-factor, 1) * 47.368%) 14.902%;
--brand-860: hsl(var(--brand-860-hsl)/1);
--brand-860-hsl: 234.783 calc(var(--saturation-factor, 1) * 46.939%) 9.608%;
--brand-900: hsl(var(--brand-900-hsl)/1);
--brand-900-hsl: 232.5 calc(var(--saturation-factor, 1) * 50%) 3.137%;
--primary-100: hsl(var(--primary-100-hsl)/1);
--primary-100-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 97.647%;
--primary-130: hsl(var(--primary-130-hsl)/1);
--primary-130-hsl: 220 calc(var(--saturation-factor, 1) * 13.043%) 95.49%;
--primary-160: hsl(var(--primary-160-hsl)/1);
--primary-160-hsl: 210 calc(var(--saturation-factor, 1) * 11.111%) 92.941%;
--primary-200: hsl(var(--primary-200-hsl)/1);
--primary-200-hsl: 216 calc(var(--saturation-factor, 1) * 9.804%) 90%;
--primary-230: hsl(var(--primary-230-hsl)/1);
--primary-230-hsl: 210 calc(var(--saturation-factor, 1) * 9.091%) 87.059%;
--primary-260: hsl(var(--primary-260-hsl)/1);
--primary-260-hsl: 214.286 calc(var(--saturation-factor, 1) * 8.434%) 83.725%;
--primary-300: hsl(var(--primary-300-hsl)/1);
--primary-300-hsl: 210 calc(var(--saturation-factor, 1) * 9.259%) 78.824%;
--primary-330: hsl(var(--primary-330-hsl)/1);
--primary-330-hsl: 215 calc(var(--saturation-factor, 1) * 8.824%) 73.333%;
--primary-345: hsl(var(--primary-345-hsl)/1);
--primary-345-hsl: 214.286 calc(var(--saturation-factor, 1) * 8.434%) 67.451%;
--primary-360: hsl(var(--primary-360-hsl)/1);
--primary-360-hsl: 213.75 calc(var(--saturation-factor, 1) * 8.081%) 61.176%;
--primary-400: hsl(var(--primary-400-hsl)/1);
--primary-400-hsl: 222.857 calc(var(--saturation-factor, 1) * 5.833%) 52.941%;
--primary-430: hsl(var(--primary-430-hsl)/1);
--primary-430-hsl: 229.091 calc(var(--saturation-factor, 1) * 4.803%) 44.902%;
--primary-460: hsl(var(--primary-460-hsl)/1);
--primary-460-hsl: 228 calc(var(--saturation-factor, 1) * 5.155%) 38.039%;
--primary-500: hsl(var(--primary-500-hsl)/1);
--primary-500-hsl: 228 calc(var(--saturation-factor, 1) * 6.024%) 32.549%;
--primary-530: hsl(var(--primary-530-hsl)/1);
--primary-530-hsl: 226.667 calc(var(--saturation-factor, 1) * 6.475%) 27.255%;
--primary-560: hsl(var(--primary-560-hsl)/1);
--primary-560-hsl: 225 calc(var(--saturation-factor, 1) * 6.667%) 23.529%;
--primary-600: hsl(var(--primary-600-hsl)/1);
--primary-600-hsl: 222.857 calc(var(--saturation-factor, 1) * 6.667%) 20.588%;
--primary-630: hsl(var(--primary-630-hsl)/1);
--primary-630-hsl: 220 calc(var(--saturation-factor, 1) * 6.522%) 18.039%;
--primary-645: hsl(var(--primary-645-hsl)/1);
--primary-645-hsl: 220 calc(var(--saturation-factor, 1) * 6.977%) 16.863%;
--primary-660: hsl(var(--primary-660-hsl)/1);
--primary-660-hsl: 228 calc(var(--saturation-factor, 1) * 6.667%) 14.706%;
--primary-700: hsl(var(--primary-700-hsl)/1);
--primary-700-hsl: 225 calc(var(--saturation-factor, 1) * 6.25%) 12.549%;
--primary-730: hsl(var(--primary-730-hsl)/1);
--primary-730-hsl: 225 calc(var(--saturation-factor, 1) * 7.143%) 10.98%;
--primary-760: hsl(var(--primary-760-hsl)/1);
--primary-760-hsl: 220 calc(var(--saturation-factor, 1) * 6.383%) 9.216%;
--primary-800: hsl(var(--primary-800-hsl)/1);
--primary-800-hsl: 220 calc(var(--saturation-factor, 1) * 8.108%) 7.255%;
--primary-830: hsl(var(--primary-830-hsl)/1);
--primary-830-hsl: 240 calc(var(--saturation-factor, 1) * 4%) 4.902%;
--primary-860: hsl(var(--primary-860-hsl)/1);
--primary-860-hsl: 240 calc(var(--saturation-factor, 1) * 7.692%) 2.549%;
--primary-900: hsl(var(--primary-900-hsl)/1);
--primary-900-hsl: 0 calc(var(--saturation-factor, 1) * 0%) 0.784%;
--plum-0: hsl(var(--plum-0-hsl)/1);
--plum-0-hsl: 240 calc(var(--saturation-factor, 1) * 9.091%) 97.843%;
--plum-1: hsl(var(--plum-1-hsl)/1);
--plum-1-hsl: 240 calc(var(--saturation-factor, 1) * 4.348%) 95.49%;
--plum-2: hsl(var(--plum-2-hsl)/1);
--plum-2-hsl: 220 calc(var(--saturation-factor, 1) * 8.571%) 93.137%;
--plum-3: hsl(var(--plum-3-hsl)/1);
--plum-3-hsl: 225 calc(var(--saturation-factor, 1) * 8%) 90.196%;
--plum-4: hsl(var(--plum-4-hsl)/1);
--plum-4-hsl: 225 calc(var(--saturation-factor, 1) * 6.25%) 87.451%;
--plum-5: hsl(var(--plum-5-hsl)/1);
--plum-5-hsl: 220 calc(var(--saturation-factor, 1) * 7.317%) 83.922%;
--plum-6: hsl(var(--plum-6-hsl)/1);
--plum-6-hsl: 231.429 calc(var(--saturation-factor, 1) * 6.667%) 79.412%;
--plum-7: hsl(var(--plum-7-hsl)/1);
--plum-7-hsl: 226.667 calc(var(--saturation-factor, 1) * 6.767%) 73.922%;
--plum-8: hsl(var(--plum-8-hsl)/1);
--plum-8-hsl: 230 calc(var(--saturation-factor, 1) * 7.407%) 68.235%;
--plum-9: hsl(var(--plum-9-hsl)/1);
--plum-9-hsl: 231.429 calc(var(--saturation-factor, 1) * 7.071%) 61.176%;
--plum-10: hsl(var(--plum-10-hsl)/1);
--plum-10-hsl: 228.75 calc(var(--saturation-factor, 1) * 6.78%) 53.725%;
--plum-11: hsl(var(--plum-11-hsl)/1);
--plum-11-hsl: 228.75 calc(var(--saturation-factor, 1) * 6.897%) 45.49%;
--plum-12: hsl(var(--plum-12-hsl)/1);
--plum-12-hsl: 228 calc(var(--saturation-factor, 1) * 7.614%) 38.627%;
--plum-13: hsl(var(--plum-13-hsl)/1);
--plum-13-hsl: 227.143 calc(var(--saturation-factor, 1) * 8.333%) 32.941%;
--plum-14: hsl(var(--plum-14-hsl)/1);
--plum-14-hsl: 230 calc(var(--saturation-factor, 1) * 8.451%) 27.843%;
--plum-15: hsl(var(--plum-15-hsl)/1);
--plum-15-hsl: 229.091 calc(var(--saturation-factor, 1) * 8.943%) 24.118%;
--plum-16: hsl(var(--plum-16-hsl)/1);
--plum-16-hsl: 234 calc(var(--saturation-factor, 1) * 9.259%) 21.176%;
--plum-17: hsl(var(--plum-17-hsl)/1);
--plum-17-hsl: 233.333 calc(var(--saturation-factor, 1) * 9.278%) 19.02%;
--plum-18: hsl(var(--plum-18-hsl)/1);
--plum-18-hsl: 233.333 calc(var(--saturation-factor, 1) * 10.588%) 16.667%;
--plum-19: hsl(var(--plum-19-hsl)/1);
--plum-19-hsl: 232.5 calc(var(--saturation-factor, 1) * 10.811%) 14.51%;
--plum-20: hsl(var(--plum-20-hsl)/1);
--plum-20-hsl: 231.429 calc(var(--saturation-factor, 1) * 11.111%) 12.353%;
--plum-21: hsl(var(--plum-21-hsl)/1);
--plum-21-hsl: 231.429 calc(var(--saturation-factor, 1) * 12.727%) 10.784%;
--plum-22: hsl(var(--plum-22-hsl)/1);
--plum-22-hsl: 240 calc(var(--saturation-factor, 1) * 12%) 9.804%;
--plum-23: hsl(var(--plum-23-hsl)/1);
--plum-23-hsl: 240 calc(var(--saturation-factor, 1) * 11.628%) 8.431%;
--plum-24: hsl(var(--plum-24-hsl)/1);
--plum-24-hsl: 228 calc(var(--saturation-factor, 1) * 14.286%) 6.863%;
--plum-25: hsl(var(--plum-25-hsl)/1);
--plum-25-hsl: 240 calc(var(--saturation-factor, 1) * 14.286%) 5.49%;
--plum-26: hsl(var(--plum-26-hsl)/1);
--plum-26-hsl: 240 calc(var(--saturation-factor, 1) * 15.789%) 3.725%;
}
.visual-refresh {
--blue-100: var(--blue-new-1);
--blue-100-hsl: var(--blue-new-1-hsl);
--blue-130: var(--blue-new-1);
--blue-130-hsl: var(--blue-new-1-hsl);
--blue-160: var(--blue-new-1);
--blue-160-hsl: var(--blue-new-1-hsl);
--blue-200: var(--blue-new-5);
--blue-200-hsl: var(--blue-new-5-hsl);
--blue-230: var(--blue-new-11);
--blue-230-hsl: var(--blue-new-11-hsl);
--blue-260: var(--blue-new-16);
--blue-260-hsl: var(--blue-new-16-hsl);
--blue-300: var(--blue-new-24);
--blue-300-hsl: var(--blue-new-24-hsl);
--blue-330: var(--blue-new-30);
--blue-330-hsl: var(--blue-new-30-hsl);
--blue-345: var(--blue-new-36);
--blue-345-hsl: var(--blue-new-36-hsl);
--blue-360: var(--blue-new-40);
--blue-360-hsl: var(--blue-new-40-hsl);
--blue-400: var(--blue-new-46);
--blue-400-hsl: var(--blue-new-46-hsl);
--blue-430: var(--blue-new-52);
--blue-430-hsl: var(--blue-new-52-hsl);
--blue-460: var(--blue-new-57);
--blue-460-hsl: var(--blue-new-57-hsl);
--blue-500: var(--blue-new-62);
--blue-500-hsl: var(--blue-new-62-hsl);
--blue-530: var(--blue-new-67);
--blue-530-hsl: var(--blue-new-67-hsl);
--blue-560: var(--blue-new-71);
--blue-560-hsl: var(--blue-new-71-hsl);
--blue-600: var(--blue-new-75);
--blue-600-hsl: var(--blue-new-75-hsl);
--blue-630: var(--blue-new-78);
--blue-630-hsl: var(--blue-new-78-hsl);
--blue-660: var(--blue-new-81);
--blue-660-hsl: var(--blue-new-81-hsl);
--blue-700: var(--blue-new-84);
--blue-700-hsl: var(--blue-new-84-hsl);
--blue-730: var(--blue-new-87);
--blue-730-hsl: var(--blue-new-87-hsl);
--blue-760: var(--blue-new-90);
--blue-760-hsl: var(--blue-new-90-hsl);
--blue-800: var(--blue-new-92);
--blue-800-hsl: var(--blue-new-92-hsl);
--blue-830: var(--blue-new-94);
--blue-830-hsl: var(--blue-new-94-hsl);
--blue-860: var(--blue-new-95);
--blue-860-hsl: var(--blue-new-95-hsl);
--blue-900: var(--blue-new-96);
--blue-900-hsl: var(--blue-new-96-hsl);
--brand-100: var(--blurple-1);
--brand-100-hsl: var(--blurple-1-hsl);
--brand-130: var(--blurple-1);
--brand-130-hsl: var(--blurple-1-hsl);
--brand-160: var(--blurple-1);
--brand-160-hsl: var(--blurple-1-hsl);
--brand-200: var(--blurple-4);
--brand-200-hsl: var(--blurple-4-hsl);
--brand-230: var(--blurple-7);
--brand-230-hsl: var(--blurple-7-hsl);
--brand-260: var(--blurple-10);
--brand-260-hsl: var(--blurple-10-hsl);
--brand-300: var(--blurple-15);
--brand-300-hsl: var(--blurple-15-hsl);
--brand-330: var(--blurple-21);
--brand-330-hsl: var(--blurple-21-hsl);
--brand-345: var(--blurple-26);
--brand-345-hsl: var(--blurple-26-hsl);
--brand-360: var(--blurple-29);
--brand-360-hsl: var(--blurple-29-hsl);
--brand-400: var(--blurple-38);
--brand-400-hsl: var(--blurple-38-hsl);
--brand-430: var(--blurple-41);
--brand-430-hsl: var(--blurple-41-hsl);
--brand-460: var(--blurple-45);
--brand-460-hsl: var(--blurple-45-hsl);
--brand-500: var(--blurple-50);
--brand-500-hsl: var(--blurple-50-hsl);
--brand-530: var(--blurple-54);
--brand-530-hsl: var(--blurple-54-hsl);
--brand-560: var(--blurple-59);
--brand-560-hsl: var(--blurple-59-hsl);
--brand-600: var(--blurple-65);
--brand-600-hsl: var(--blurple-65-hsl);
--brand-630: var(--blurple-70);
--brand-630-hsl: var(--blurple-70-hsl);
--brand-660: var(--blurple-74);
--brand-660-hsl: var(--blurple-74-hsl);
--brand-700: var(--blurple-81);
--brand-700-hsl: var(--blurple-81-hsl);
--brand-730: var(--blurple-82);
--brand-730-hsl: var(--blurple-82-hsl);
--brand-760: var(--blurple-84);
--brand-760-hsl: var(--blurple-84-hsl);
--brand-800: var(--blurple-86);
--brand-800-hsl: var(--blurple-86-hsl);
--brand-830: var(--blurple-91);
--brand-830-hsl: var(--blurple-91-hsl);
--brand-860: var(--blurple-96);
--brand-860-hsl: var(--blurple-96-hsl);
--brand-900: var(--blurple-99);
--brand-900-hsl: var(--blurple-99-hsl);
--green-100: var(--green-new-1);
--green-100-hsl: var(--green-new-1-hsl);
--green-130: var(--green-new-1);
--green-130-hsl: var(--green-new-1-hsl);
--green-160: var(--green-new-3);
--green-160-hsl: var(--green-new-3-hsl);
--green-200: var(--green-new-9);
--green-200-hsl: var(--green-new-9-hsl);
--green-230: var(--green-new-16);
--green-230-hsl: var(--green-new-16-hsl);
--green-260: var(--green-new-21);
--green-260-hsl: var(--green-new-21-hsl);
--green-300: var(--green-new-25);
--green-300-hsl: var(--green-new-25-hsl);
--green-330: var(--green-new-29);
--green-330-hsl: var(--green-new-29-hsl);
--green-345: var(--green-new-34);
--green-345-hsl: var(--green-new-34-hsl);
--green-360: var(--green-new-40);
--green-360-hsl: var(--green-new-40-hsl);
--green-400: var(--green-new-45);
--green-400-hsl: var(--green-new-45-hsl);
--green-430: var(--green-new-52);
--green-430-hsl: var(--green-new-52-hsl);
--green-460: var(--green-new-58);
--green-460-hsl: var(--green-new-58-hsl);
--green-500: var(--green-new-63);
--green-500-hsl: var(--green-new-63-hsl);
--green-530: var(--green-new-69);
--green-530-hsl: var(--green-new-69-hsl);
--green-560: var(--green-new-73);
--green-560-hsl: var(--green-new-73-hsl);
--green-600: var(--green-new-77);
--green-600-hsl: var(--green-new-77-hsl);
--green-630: var(--green-new-80);
--green-630-hsl: var(--green-new-80-hsl);
--green-660: var(--green-new-83);
--green-660-hsl: var(--green-new-83-hsl);
--green-700: var(--green-new-86);
--green-700-hsl: var(--green-new-86-hsl);
--green-730: var(--green-new-89);
--green-730-hsl: var(--green-new-89-hsl);
--green-760: var(--green-new-91);
--green-760-hsl: var(--green-new-91-hsl);
--green-800: var(--green-new-94);
--green-800-hsl: var(--green-new-94-hsl);
--green-830: var(--green-new-96);
--green-830-hsl: var(--green-new-96-hsl);
--green-860: var(--green-new-98);
--green-860-hsl: var(--green-new-98-hsl);
--green-900: var(--green-new-99);
--green-900-hsl: var(--green-new-99-hsl);
--orange-100: var(--orange-new-1);
--orange-100-hsl: var(--orange-new-1-hsl);
--orange-130: var(--orange-new-1);
--orange-130-hsl: var(--orange-new-1-hsl);
--orange-160: var(--orange-new-1);
--orange-160-hsl: var(--orange-new-1-hsl);
--orange-200: var(--orange-new-3);
--orange-200-hsl: var(--orange-new-3-hsl);
--orange-230: var(--orange-new-8);
--orange-230-hsl: var(--orange-new-8-hsl);
--orange-260: var(--orange-new-14);
--orange-260-hsl: var(--orange-new-14-hsl);
--orange-300: var(--orange-new-21);
--orange-300-hsl: var(--orange-new-21-hsl);
--orange-330: var(--orange-new-30);
--orange-330-hsl: var(--orange-new-30-hsl);
--orange-345: var(--orange-new-35);
--orange-345-hsl: var(--orange-new-35-hsl);
--orange-360: var(--orange-new-39);
--orange-360-hsl: var(--orange-new-39-hsl);
--orange-400: var(--orange-new-42);
--orange-400-hsl: var(--orange-new-42-hsl);
--orange-430: var(--orange-new-45);
--orange-430-hsl: var(--orange-new-45-hsl);
--orange-460: var(--orange-new-57);
--orange-460-hsl: var(--orange-new-57-hsl);
--orange-500: var(--orange-new-62);
--orange-500-hsl: var(--orange-new-62-hsl);
--orange-530: var(--orange-new-67);
--orange-530-hsl: var(--orange-new-67-hsl);
--orange-560: var(--orange-new-73);
--orange-560-hsl: var(--orange-new-73-hsl);
--orange-600: var(--orange-new-75);
--orange-600-hsl: var(--orange-new-75-hsl);
--orange-630: var(--orange-new-80);
--orange-630-hsl: var(--orange-new-80-hsl);
--orange-660: var(--orange-new-81);
--orange-660-hsl: var(--orange-new-81-hsl);
--orange-700: var(--orange-new-82);
--orange-700-hsl: var(--orange-new-82-hsl);
--orange-730: var(--orange-new-87);
--orange-730-hsl: var(--orange-new-87-hsl);
--orange-760: var(--orange-new-89);
--orange-760-hsl: var(--orange-new-89-hsl);
--orange-800: var(--orange-new-92);
--orange-800-hsl: var(--orange-new-92-hsl);
--orange-830: var(--orange-new-99);
--orange-830-hsl: var(--orange-new-99-hsl);
--orange-860: var(--orange-new-99);
--orange-860-hsl: var(--orange-new-99-hsl);
--orange-900: var(--orange-new-100);
--orange-900-hsl: var(--orange-new-100-hsl);
--plum-0: var(--neutral-2);
--plum-0-hsl: var(--neutral-2-hsl);
--plum-1: var(--neutral-4);
--plum-1-hsl: var(--neutral-4-hsl);
--plum-10: var(--neutral-34);
--plum-10-hsl: var(--neutral-34-hsl);
--plum-11: var(--neutral-41);
--plum-11-hsl: var(--neutral-41-hsl);
--plum-12: var(--neutral-46);
--plum-12-hsl: var(--neutral-46-hsl);
--plum-13: var(--neutral-50);
--plum-13-hsl: var(--neutral-50-hsl);
--plum-14: var(--neutral-58);
--plum-14-hsl: var(--neutral-58-hsl);
--plum-15: var(--neutral-64);
--plum-15-hsl: var(--neutral-64-hsl);
--plum-16: var(--neutral-69);
--plum-16-hsl: var(--neutral-69-hsl);
--plum-17: var(--neutral-73);
--plum-17-hsl: var(--neutral-73-hsl);
--plum-18: var(--neutral-77);
--plum-18-hsl: var(--neutral-77-hsl);
--plum-19: var(--neutral-80);
--plum-19-hsl: var(--neutral-80-hsl);
--plum-2: var(--neutral-6);
--plum-2-hsl: var(--neutral-6-hsl);
--plum-20: var(--neutral-84);
--plum-20-hsl: var(--neutral-84-hsl);
--plum-21: var(--neutral-86);
--plum-21-hsl: var(--neutral-86-hsl);
--plum-22: var(--neutral-89);
--plum-22-hsl: var(--neutral-89-hsl);
--plum-23: var(--neutral-91);
--plum-23-hsl: var(--neutral-91-hsl);
--plum-24: var(--neutral-93);
--plum-24-hsl: var(--neutral-93-hsl);
--plum-25: var(--neutral-95);
--plum-25-hsl: var(--neutral-95-hsl);
--plum-26: var(--neutral-97);
--plum-26-hsl: var(--neutral-97-hsl);
--plum-3: var(--neutral-8);
--plum-3-hsl: var(--neutral-8-hsl);
--plum-4: var(--neutral-10);
--plum-4-hsl: var(--neutral-10-hsl);
--plum-5: var(--neutral-12);
--plum-5-hsl: var(--neutral-12-hsl);
--plum-6: var(--neutral-15);
--plum-6-hsl: var(--neutral-15-hsl);
--plum-7: var(--neutral-19);
--plum-7-hsl: var(--neutral-19-hsl);
--plum-8: var(--neutral-24);
--plum-8-hsl: var(--neutral-24-hsl);
--plum-9: var(--neutral-29);
--plum-9-hsl: var(--neutral-29-hsl);
--primary-100: var(--neutral-2);
--primary-100-hsl: var(--neutral-2-hsl);
--primary-130: var(--neutral-4);
--primary-130-hsl: var(--neutral-4-hsl);
--primary-160: var(--neutral-6);
--primary-160-hsl: var(--neutral-6-hsl);
--primary-200: var(--neutral-8);
--primary-200-hsl: var(--neutral-8-hsl);
--primary-230: var(--neutral-10);
--primary-230-hsl: var(--neutral-10-hsl);
--primary-260: var(--neutral-12);
--primary-260-hsl: var(--neutral-12-hsl);
--primary-300: var(--neutral-15);
--primary-300-hsl: var(--neutral-15-hsl);
--primary-330: var(--neutral-19);
--primary-330-hsl: var(--neutral-19-hsl);
--primary-345: var(--neutral-23);
--primary-345-hsl: var(--neutral-23-hsl);
--primary-360: var(--neutral-28);
--primary-360-hsl: var(--neutral-28-hsl);
--primary-400: var(--neutral-34);
--primary-400-hsl: var(--neutral-34-hsl);
--primary-430: var(--neutral-41);
--primary-430-hsl: var(--neutral-41-hsl);
--primary-460: var(--neutral-46);
--primary-460-hsl: var(--neutral-46-hsl);
--primary-500: var(--neutral-50);
--primary-500-hsl: var(--neutral-50-hsl);
--primary-530: var(--neutral-59);
--primary-530-hsl: var(--neutral-59-hsl);
--primary-560: var(--neutral-64);
--primary-560-hsl: var(--neutral-64-hsl);
--primary-600: var(--neutral-69);
--primary-600-hsl: var(--neutral-69-hsl);
--primary-630: var(--neutral-73);
--primary-630-hsl: var(--neutral-73-hsl);
--primary-645: var(--neutral-75);
--primary-645-hsl: var(--neutral-75-hsl);
--primary-660: var(--neutral-79);
--primary-660-hsl: var(--neutral-79-hsl);
--primary-700: var(--neutral-83);
--primary-700-hsl: var(--neutral-83-hsl);
--primary-730: var(--neutral-86);
--primary-730-hsl: var(--neutral-86-hsl);
--primary-760: var(--neutral-89);
--primary-760-hsl: var(--neutral-89-hsl);
--primary-800: var(--neutral-92);
--primary-800-hsl: var(--neutral-92-hsl);
--primary-830: var(--neutral-95);
--primary-830-hsl: var(--neutral-95-hsl);
--primary-860: var(--neutral-98);
--primary-860-hsl: var(--neutral-98-hsl);
--primary-900: var(--neutral-99);
--primary-900-hsl: var(--neutral-99-hsl);
--red-100: var(--red-new-1);
--red-100-hsl: var(--red-new-1-hsl);
--red-130: var(--red-new-1);
--red-130-hsl: var(--red-new-1-hsl);
--red-160: var(--red-new-1);
--red-160-hsl: var(--red-new-1-hsl);
--red-200: var(--red-new-1);
--red-200-hsl: var(--red-new-1-hsl);
--red-230: var(--red-new-5);
--red-230-hsl: var(--red-new-5-hsl);
--red-260: var(--red-new-10);
--red-260-hsl: var(--red-new-10-hsl);
--red-300: var(--red-new-16);
--red-300-hsl: var(--red-new-16-hsl);
--red-330: var(--red-new-21);
--red-330-hsl: var(--red-new-21-hsl);
--red-345: var(--red-new-30);
--red-345-hsl: var(--red-new-30-hsl);
--red-360: var(--red-new-38);
--red-360-hsl: var(--red-new-38-hsl);
--red-400: var(--red-new-46);
--red-400-hsl: var(--red-new-46-hsl);
--red-430: var(--red-new-48);
--red-430-hsl: var(--red-new-48-hsl);
--red-460: var(--red-new-55);
--red-460-hsl: var(--red-new-55-hsl);
--red-500: var(--red-new-62);
--red-500-hsl: var(--red-new-62-hsl);
--red-530: var(--red-new-67);
--red-530-hsl: var(--red-new-67-hsl);
--red-560: var(--red-new-71);
--red-560-hsl: var(--red-new-71-hsl);
--red-600: var(--red-new-75);
--red-600-hsl: var(--red-new-75-hsl);
--red-630: var(--red-new-77);
--red-630-hsl: var(--red-new-77-hsl);
--red-660: var(--red-new-81);
--red-660-hsl: var(--red-new-81-hsl);
--red-700: var(--red-new-84);
--red-700-hsl: var(--red-new-84-hsl);
--red-730: var(--red-new-89);
--red-730-hsl: var(--red-new-89-hsl);
--red-760: var(--red-new-92);
--red-760-hsl: var(--red-new-92-hsl);
--red-800: var(--red-new-95);
--red-800-hsl: var(--red-new-95-hsl);
--red-830: var(--red-new-96);
--red-830-hsl: var(--red-new-96-hsl);
--red-860: var(--red-new-98);
--red-860-hsl: var(--red-new-98-hsl);
--red-900: var(--red-new-99);
--red-900-hsl: var(--red-new-99-hsl);
--teal-100: var(--teal-new-1);
--teal-100-hsl: var(--teal-new-1-hsl);
--teal-130: var(--teal-new-1);
--teal-130-hsl: var(--teal-new-1-hsl);
--teal-160: var(--teal-new-1);
--teal-160-hsl: var(--teal-new-1-hsl);
--teal-200: var(--teal-new-7);
--teal-200-hsl: var(--teal-new-7-hsl);
--teal-230: var(--teal-new-13);
--teal-230-hsl: var(--teal-new-13-hsl);
--teal-260: var(--teal-new-19);
--teal-260-hsl: var(--teal-new-19-hsl);
--teal-300: var(--teal-new-24);
--teal-300-hsl: var(--teal-new-24-hsl);
--teal-330: var(--teal-new-30);
--teal-330-hsl: var(--teal-new-30-hsl);
--teal-345: var(--teal-new-33);
--teal-345-hsl: var(--teal-new-33-hsl);
--teal-360: var(--teal-new-38);
--teal-360-hsl: var(--teal-new-38-hsl);
--teal-400: var(--teal-new-45);
--teal-400-hsl: var(--teal-new-45-hsl);
--teal-430: var(--teal-new-53);
--teal-430-hsl: var(--teal-new-53-hsl);
--teal-460: var(--teal-new-59);
--teal-460-hsl: var(--teal-new-59-hsl);
--teal-500: var(--teal-new-65);
--teal-500-hsl: var(--teal-new-65-hsl);
--teal-530: var(--teal-new-70);
--teal-530-hsl: var(--teal-new-70-hsl);
--teal-560: var(--teal-new-74);
--teal-560-hsl: var(--teal-new-74-hsl);
--teal-600: var(--teal-new-78);
--teal-600-hsl: var(--teal-new-78-hsl);
--teal-630: var(--teal-new-81);
--teal-630-hsl: var(--teal-new-81-hsl);
--teal-660: var(--teal-new-84);
--teal-660-hsl: var(--teal-new-84-hsl);
--teal-700: var(--teal-new-86);
--teal-700-hsl: var(--teal-new-86-hsl);
--teal-730: var(--teal-new-89);
--teal-730-hsl: var(--teal-new-89-hsl);
--teal-760: var(--teal-new-92);
--teal-760-hsl: var(--teal-new-92-hsl);
--teal-800: var(--teal-new-94);
--teal-800-hsl: var(--teal-new-94-hsl);
--teal-830: var(--teal-new-96);
--teal-830-hsl: var(--teal-new-96-hsl);
--teal-860: var(--teal-new-98);
--teal-860-hsl: var(--teal-new-98-hsl);
--teal-900: var(--teal-new-99);
--teal-900-hsl: var(--teal-new-99-hsl);
--yellow-100: var(--yellow-new-1);
--yellow-100-hsl: var(--yellow-new-1-hsl);
--yellow-130: var(--yellow-new-1);
--yellow-130-hsl: var(--yellow-new-1-hsl);
--yellow-160: var(--yellow-new-1);
--yellow-160-hsl: var(--yellow-new-1-hsl);
--yellow-200: var(--yellow-new-6);
--yellow-200-hsl: var(--yellow-new-6-hsl);
--yellow-230: var(--yellow-new-15);
--yellow-230-hsl: var(--yellow-new-15-hsl);
--yellow-260: var(--yellow-new-31);
--yellow-260-hsl: var(--yellow-new-31-hsl);
--yellow-300: var(--yellow-new-36);
--yellow-300-hsl: var(--yellow-new-36-hsl);
--yellow-330: var(--yellow-new-39);
--yellow-330-hsl: var(--yellow-new-39-hsl);
--yellow-345: var(--yellow-new-55);
--yellow-345-hsl: var(--yellow-new-55-hsl);
--yellow-360: var(--yellow-new-60);
--yellow-360-hsl: var(--yellow-new-60-hsl);
--yellow-400: var(--yellow-new-63);
--yellow-400-hsl: var(--yellow-new-63-hsl);
--yellow-430: var(--yellow-new-68);
--yellow-430-hsl: var(--yellow-new-68-hsl);
--yellow-460: var(--yellow-new-72);
--yellow-460-hsl: var(--yellow-new-72-hsl);
--yellow-500: var(--yellow-new-76);
--yellow-500-hsl: var(--yellow-new-76-hsl);
--yellow-530: var(--yellow-new-79);
--yellow-530-hsl: var(--yellow-new-79-hsl);
--yellow-560: var(--yellow-new-82);
--yellow-560-hsl: var(--yellow-new-82-hsl);
--yellow-600: var(--yellow-new-84);
--yellow-600-hsl: var(--yellow-new-84-hsl);
--yellow-630: var(--yellow-new-86);
--yellow-630-hsl: var(--yellow-new-86-hsl);
--yellow-660: var(--yellow-new-86);
--yellow-660-hsl: var(--yellow-new-86-hsl);
--yellow-700: var(--yellow-new-88);
--yellow-700-hsl: var(--yellow-new-88-hsl);
--yellow-730: var(--yellow-new-90);
--yellow-730-hsl: var(--yellow-new-90-hsl);
--yellow-760: var(--yellow-new-92);
--yellow-760-hsl: var(--yellow-new-92-hsl);
--yellow-800: var(--yellow-new-93);
--yellow-800-hsl: var(--yellow-new-93-hsl);
--yellow-830: var(--yellow-new-96);
--yellow-830-hsl: var(--yellow-new-96-hsl);
--yellow-860: var(--yellow-new-100);
--yellow-860-hsl: var(--yellow-new-100-hsl);
--yellow-900: var(--yellow-new-100);
--yellow-900-hsl: var(--yellow-new-100-hsl);
}
.refresh-fast-follow-distinct-borders .theme-dark,
.refresh-fast-follow-distinct-borders.theme-dark {
--app-frame-border: var(--neutral-52);
}
@supports (color: color-mix(in lch, red, blue)) {
.refresh-fast-follow-distinct-borders .theme-dark,
.refresh-fast-follow-distinct-borders.theme-dark {
--app-frame-border: color-mix(in oklab, var(--neutral-52) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
}
}
.refresh-fast-follow-distinct-borders .theme-light,
.refresh-fast-follow-distinct-borders.theme-light {
--app-frame-border: var(--neutral-12);
}
@supports (color: color-mix(in lch, red, blue)) {
.refresh-fast-follow-distinct-borders .theme-light,
.refresh-fast-follow-distinct-borders.theme-light {
--app-frame-border: color-mix(in oklab, var(--neutral-12) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
}
}
.refresh-fast-follow-distinct-borders .theme-midnight,
.refresh-fast-follow-distinct-borders.theme-midnight {
--app-frame-border: var(--neutral-73);
}
@supports (color: color-mix(in lch, red, blue)) {
.refresh-fast-follow-distinct-borders .theme-midnight,
.refresh-fast-follow-distinct-borders.theme-midnight {
--app-frame-border: color-mix(in oklab, var(--neutral-73) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
}
}
.refresh-fast-follow-distinct-borders .theme-darker,
.refresh-fast-follow-distinct-borders.theme-darker {
--app-frame-border: var(--neutral-65);
}
@supports (color: color-mix(in lch, red, blue)) {
.refresh-fast-follow-distinct-borders .theme-darker,
.refresh-fast-follow-distinct-borders.theme-darker {
--app-frame-border: color-mix(in oklab, var(--neutral-65) 100%, var(--custom-theme-base-color, #000) var(--custom-theme-border-color-amount, var(--custom-theme-base-color-amount, 0%)));
}
}
.mana-toggle-inputs .theme-dark,
.mana-toggle-inputs.theme-dark {
--checkbox-background-default: hsl(var(--opacity-black-8-hsl)/0.0784313725490196);
--checkbox-border-default: hsl(var(--opacity-64-hsl)/0.6392156862745098);
}
.mana-toggle-inputs .theme-light,
.mana-toggle-inputs.theme-light {
--checkbox-background-default: hsl(var(--opacity-black-4-hsl)/0.0392156862745098);
--checkbox-border-default: var(--neutral-34);
}
.mana-toggle-inputs .theme-darker,
.mana-toggle-inputs .theme-midnight,
.mana-toggle-inputs.theme-darker,
.mana-toggle-inputs.theme-midnight {
--checkbox-background-default: hsl(var(--opacity-black-8-hsl)/0.0784313725490196);
--checkbox-border-default: hsl(var(--opacity-64-hsl)/0.6392156862745098);
}
.theme-dark {
--shadow-border: 0 0 0 1px hsl(none 0% 100%/0.08);
--shadow-border-filter: drop-shadow(0 0 1px hsl(none 0% 100%/0.08));
--shadow-button-overlay: 0 12px 24px 0 hsl(none 0% 0%/0.24);
--shadow-button-overlay-filter: drop-shadow(0 12px 24px hsl(none 0% 0%/0.24));
--shadow-high: 0 12px 24px 0 hsl(none 0% 0%/0.24);
--shadow-high-filter: drop-shadow(0 12px 24px hsl(none 0% 0%/0.24));
--shadow-ledge: 0 2px 0 0 hsl(none 0% 0%/0.05), 0 1.5px 0 0 hsl(none 0% 0%/0.05), 0 1px 0 0 hsl(none 0% 0%/0.16);
--shadow-ledge-filter: drop-shadow(0 1.5px 0 hsl(none 0% 0%/0.24));
--shadow-low: 0 1px 4px 0 hsl(none 0% 0%/0.14);
--shadow-low-filter: drop-shadow(0 1px 4px hsl(none 0% 0%/0.14));
--shadow-low-active: 0 0 4px 0 hsl(none 0% 0%/0.14);
--shadow-low-active-filter: drop-shadow(0 0 4px hsl(none 0% 0%/0.14));
--shadow-low-hover: 0 4px 10px 0 hsl(none 0% 0%/0.14);
--shadow-low-hover-filter: drop-shadow(0 4px 10px hsl(none 0% 0%/0.14));
--shadow-medium: 0 4px 8px 0 hsl(none 0% 0%/0.16);
--shadow-medium-filter: drop-shadow(0 4px 8px hsl(none 0% 0%/0.16));
--shadow-mobile-navigator-x: 0 0 10px 0 hsl(none 0% 0%/0.22);
--shadow-mobile-navigator-x-filter: drop-shadow(0 0 10px hsl(none 0% 0%/0.22));
--shadow-top-high: 0 -12px 32px 0 hsl(none 0% 0%/0.24);
--shadow-top-high-filter: drop-shadow(0 -12px 32px hsl(none 0% 0%/0.24));
--shadow-top-ledge: 0 -2px 0 0 hsl(none 0% 0%/0.05), 0 -1.5px 0 0 hsl(none 0% 0%/0.05), 0 -1px 0 0 hsl(none 0% 0%/0.16);
--shadow-top-ledge-filter: drop-shadow(0 -1.5px 0 hsl(none 0% 0%/0.24));
--shadow-top-low: 0 -1px 4px 0 hsl(none 0% 0%/0.14);
--shadow-top-low-filter: drop-shadow(0 -1px 4px hsl(none 0% 0%/0.14));
}
.theme-light {
--shadow-border: 0 0 0 1px hsl(none 0% 0%/0.08);
--shadow-border-filter: drop-shadow(0 0 1px hsl(none 0% 0%/0.08));
--shadow-button-overlay: 0 12px 24px 0 hsl(none 0% 0%/0.24);
--shadow-button-overlay-filter: drop-shadow(0 12px 24px hsl(none 0% 0%/0.24));
--shadow-high: 0 12px 36px 0 hsl(none 0% 0%/0.12);
--shadow-high-filter: drop-shadow(0 12px 36px hsl(none 0% 0%/0.12));
--shadow-ledge: 0 2px 0 0 hsl(none 0% 0%/0.03), 0 1.5px 0 0 hsl(none 0% 0%/0.03), 0 1px 0 0 hsl(none 0% 0%/0.08);
--shadow-ledge-filter: drop-shadow(0 1.5px 0 hsl(none 0% 0%/0.12));
--shadow-low: 0 1px 4px 0 hsl(none 0% 0%/0.08);
--shadow-low-filter: drop-shadow(0 1px 4px hsl(none 0% 0%/0.08));
--shadow-low-active: 0 0 4px 0 hsl(none 0% 0%/0.08);
--shadow-low-active-filter: drop-shadow(0 0 4px hsl(none 0% 0%/0.08));
--shadow-low-hover: 0 4px 8px 0 hsl(none 0% 0%/0.08);
--shadow-low-hover-filter: drop-shadow(0 4px 8px hsl(none 0% 0%/0.08));
--shadow-medium: 0 4px 8px 0 hsl(none 0% 0%/0.08);
--shadow-medium-filter: drop-shadow(0 4px 8px hsl(none 0% 0%/0.08));
--shadow-mobile-navigator-x: 0 0 9px 0 hsl(none 0% 0%/0.13);
--shadow-mobile-navigator-x-filter: drop-shadow(0 0 9px hsl(none 0% 0%/0.13));
--shadow-top-high: 0 -12px 36px 0 hsl(none 0% 0%/0.12);
--shadow-top-high-filter: drop-shadow(0 -12px 36px hsl(none 0% 0%/0.12));
--shadow-top-ledge: 0 -2px 0 0 hsl(none 0% 0%/0.03), 0 -1.5px 0 0 hsl(none 0% 0%/0.03), 0 -1px 0 0 hsl(none 0% 0%/0.08);
--shadow-top-ledge-filter: drop-shadow(0 -1.5px 0 hsl(none 0% 0%/0.12));
--shadow-top-low: 0 -1px 4px 0 hsl(none 0% 0%/0.08);
--shadow-top-low-filter: drop-shadow(0 -1px 4px hsl(none 0% 0%/0.08));
}
.theme-darker,
.theme-midnight {
--shadow-border: 0 0 0 1px hsl(none 0% 100%/0.08);
--shadow-border-filter: drop-shadow(0 0 1px hsl(none 0% 100%/0.08));
--shadow-button-overlay: 0 12px 24px 0 hsl(none 0% 0%/0.24);
--shadow-button-overlay-filter: drop-shadow(0 12px 24px hsl(none 0% 0%/0.24));
--shadow-high: 0 12px 24px 0 hsl(none 0% 0%/0.24);
--shadow-high-filter: drop-shadow(0 12px 24px hsl(none 0% 0%/0.24));
--shadow-ledge: 0 2px 0 0 hsl(none 0% 0%/0.05), 0 1.5px 0 0 hsl(none 0% 0%/0.05), 0 1px 0 0 hsl(none 0% 0%/0.16);
--shadow-ledge-filter: drop-shadow(0 1.5px 0 hsl(none 0% 0%/0.24));
--shadow-low: 0 1px 4px 0 hsl(none 0% 0%/0.14);
--shadow-low-filter: drop-shadow(0 1px 4px hsl(none 0% 0%/0.14));
--shadow-low-active: 0 0 4px 0 hsl(none 0% 0%/0.14);
--shadow-low-active-filter: drop-shadow(0 0 4px hsl(none 0% 0%/0.14));
--shadow-low-hover: 0 4px 10px 0 hsl(none 0% 0%/0.14);
--shadow-low-hover-filter: drop-shadow(0 4px 10px hsl(none 0% 0%/0.14));
--shadow-medium: 0 4px 8px 0 hsl(none 0% 0%/0.16);
--shadow-medium-filter: drop-shadow(0 4px 8px hsl(none 0% 0%/0.16));
--shadow-mobile-navigator-x: 0 0 10px 0 hsl(none 0% 0%/0.22);
--shadow-mobile-navigator-x-filter: drop-shadow(0 0 10px hsl(none 0% 0%/0.22));
--shadow-top-high: 0 -12px 32px 0 hsl(none 0% 0%/0.24);
--shadow-top-high-filter: drop-shadow(0 -12px 32px hsl(none 0% 0%/0.24));
--shadow-top-ledge: 0 -2px 0 0 hsl(none 0% 0%/0.05), 0 -1.5px 0 0 hsl(none 0% 0%/0.05), 0 -1px 0 0 hsl(none 0% 0%/0.16);
--shadow-top-ledge-filter: drop-shadow(0 -1.5px 0 hsl(none 0% 0%/0.24));
--shadow-top-low: 0 -1px 4px 0 hsl(none 0% 0%/0.14);
--shadow-top-low-filter: drop-shadow(0 -1px 4px hsl(none 0% 0%/0.14));
}
:root {
--size-0: 0px;
--size-4: 4px;
--size-8: 8px;
--size-12: 12px;
--size-16: 16px;
--size-20: 20px;
--size-24: 24px;
--size-32: 32px;
--size-48: 48px;
--size-64: 64px;
--size-80: 80px;
--size-96: 96px;
--size-128: 128px;
--size-160: 160px;
--size-192: 192px;
--size-xxs: var(--size-4);
--size-xs: var(--size-8);
--size-sm: var(--size-12);
--size-md: var(--size-16);
--size-lg: var(--size-20);
--size-xl: var(--size-24);
--size-xxl: var(--size-32);
--breakpoint-480: 480px;
--breakpoint-640: 640px;
--breakpoint-768: 768px;
--breakpoint-1024: 1024px;
--breakpoint-1280: 1280px;
--breakpoint-1536: 1536px;
--breakpoint-1800: 1800px;
--breakpoint-2500: 2500px;
--breakpoint-xxs: 480px;
--breakpoint-xs: 640px;
--breakpoint-sm: 768px;
--breakpoint-md: 1024px;
--breakpoint-lg: 1280px;
--breakpoint-xl: 1536px;
--breakpoint-xxl: 1800px;
--breakpoint-max: 2500px;
--space-0: 0px;
--space-4: 4px;
--space-6: 6px;
--space-8: 8px;
--space-10: 10px;
--space-12: 12px;
--space-16: 16px;
--space-20: 20px;
--space-24: 24px;
--space-26: 26px;
--space-30: 30px;
--space-32: 32px;
--space-40: 40px;
--space-48: 48px;
--space-64: 64px;
--space-80: 80px;
--space-96: 96px;
--space-128: 128px;
--space-160: 160px;
--space-192: 192px;
--space-xxs: var(--space-4);
--space-xs: var(--space-8);
--space-sm: var(--space-12);
--space-md: var(--space-16);
--space-lg: var(--space-20);
--space-xl: var(--space-24);
--space-xxl: var(--space-32);
}
.density-compact {
--space-xxs: var(--space-4);
--space-xs: var(--space-6);
--space-sm: var(--space-10);
--space-md: var(--space-12);
--space-lg: var(--space-16);
--space-xl: var(--space-20);
--space-xxl: var(--space-26);
}
.density-cozy {
--space-xxs: var(--space-4);
--space-xs: var(--space-10);
--space-sm: var(--space-16);
--space-md: var(--space-20);
--space-lg: var(--space-24);
--space-xl: var(--space-30);
--space-xxl: var(--space-40);
}
.density-default {
--space-xxs: var(--space-4);
--space-xs: var(--space-8);
--space-sm: var(--space-12);
--space-md: var(--space-16);
--space-lg: var(--space-20);
--space-xl: var(--space-24);
--space-xxl: var(--space-32);
}
:root {
--radius-none: 0px;
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-xxl: 32px;
--radius-round: 2147483647px;
}
.theme-dark {
--guild-header-text-shadow: 0 1px 1px hsl(var(--black-hsl)/0.4);
--elevation-stroke: 0 0 0 1px hsl(var(--primary-900-hsl)/0.15);
--elevation-low: 0 1px 0 hsl(var(--primary-900-hsl)/0.2), 0 1.5px 0 hsl(var(--primary-860-hsl)/0.05), 0 2px 0 hsl(var(--primary-900-hsl)/0.05);
--elevation-medium: 0 4px 4px hsl(var(--black-hsl)/0.16);
--elevation-high: 0 8px 16px hsl(var(--black-hsl)/0.24);
}
.theme-light {
--guild-header-text-shadow: 0 1px 1px hsl(var(--white-hsl)/0.4);
--elevation-stroke: 0 0 0 1px hsl(var(--primary-860-hsl)/0.08);
--elevation-low: 0 1px 0 hsl(var(--primary-860-hsl)/0.1), 0 1.5px 0 hsl(var(--primary-900-hsl)/0.025), 0 2px 0 hsl(var(--primary-860-hsl)/0.025);
--elevation-medium: 0 4px 4px hsl(var(--black-hsl)/0.08);
--elevation-high: 0 8px 16px hsl(var(--black-hsl)/0.16);
}
@font-face {
font-family: ABC Ginto Nord;
font-style: normal;
font-weight: 800;
src: url(/assets/097b737553f77c92.woff2) format("woff2");
}
@font-face {
font-family: ABC Ginto Nord;
font-style: italic;
font-weight: 800;
src: url(/assets/d7f3d9317a5ff964.woff2) format("woff2");
}
@font-face {
font-family: ABC Ginto Nord Discord;
font-style: normal;
font-weight: 700;
src: url(/assets/bb673ee29d9d9269.woff2) format("woff2");
}
@font-face {
font-family: ABC Ginto Nord Discord;
font-style: italic;
font-weight: 700;
src: url(/assets/1a1e4ba0da23278e.woff2) format("woff2");
}
@font-face {
font-family: ABC Ginto Normal;
font-style: normal;
font-weight: 300;
src: url(/assets/2d538acdbc2eb6b8.woff2) format("woff2");
}
@font-face {
font-family: ABC Ginto Normal;
font-style: italic;
font-weight: 300;
src: url(/assets/6897c8395199e044.woff2) format("woff2");
}
@font-face {
font-family: ABC Ginto Normal;
font-style: normal;
font-weight: 400;
src: url(/assets/89cc835cf102bf12.woff2) format("woff2");
}
@font-face {
font-family: ABC Ginto Normal;
font-style: italic;
font-weight: 400;
src: url(/assets/9e78b20620cb79ff.woff2) format("woff2");
}
@font-face {
font-family: ABC Ginto Normal;
font-style: normal;
font-weight: 500;
src: url(/assets/094adef82c637a3c.woff2) format("woff2");
}
@font-face {
font-family: ABC Ginto Normal;
font-style: italic;
font-weight: 500;
src: url(/assets/5b3d873665de628f.woff2) format("woff2");
}
@font-face {
font-family: ABC Ginto Normal;
font-style: normal;
font-weight: 700;
src: url(/assets/a893ac26791508c7.woff2) format("woff2");
}
@font-face {
font-family: ABC Ginto Normal;
font-style: italic;
font-weight: 700;
src: url(/assets/5a4f9cc740b6d92b.woff2) format("woff2");
}
@font-face {
font-family: ABC Ginto Normal;
font-style: normal;
font-weight: 800;
src: url(/assets/908064caebce5abe.woff2) format("woff2");
}
@font-face {
font-family: ABC Ginto Normal;
font-style: italic;
font-weight: 800;
src: url(/assets/f2d2cc13894d7060.woff2) format("woff2");
}
@font-face {
font-family: ABC Ginto Discord;
font-style: normal;
font-weight: 400;
src: url(/assets/bd0f5c73464e9717.woff2) format("woff2");
}
@font-face {
font-family: ABC Ginto Discord;
font-style: normal;
font-weight: 500;
src: url(/assets/a47177db4e543b05.woff2) format("woff2");
}
@font-face {
font-family: gg sans;
font-style: normal;
font-weight: 400;
src: url(/assets/66d715454104d24e.woff2) format("woff2");
}
@font-face {
font-family: gg sans;
font-style: italic;
font-weight: 400;
src: url(/assets/dd24010f3cf7def7.woff2) format("woff2");
}
@font-face {
font-family: gg sans;
font-style: normal;
font-weight: 500;
src: url(/assets/b272b33815319bae.woff2) format("woff2");
}
@font-face {
font-family: gg sans;
font-style: italic;
font-weight: 500;
src: url(/assets/6a1346ad3821ff3c.woff2) format("woff2");
}
@font-face {
font-family: gg sans;
font-style: normal;
font-weight: 600;
src: url(/assets/2df2c3ff74408972.woff2) format("woff2");
}
@font-face {
font-family: gg sans;
font-style: italic;
font-weight: 600;
src: url(/assets/d5d789aeb6282532.woff2) format("woff2");
}
@font-face {
font-family: gg sans;
font-style: normal;
font-weight: 700;
src: url(/assets/189422196a4f8b53.woff2) format("woff2");
}
@font-face {
font-family: gg sans;
font-style: italic;
font-weight: 700;
src: url(/assets/ce3b8055f5114434.woff2) format("woff2");
}
@font-face {
font-family: gg sans;
font-style: normal;
font-weight: 800;
src: url(/assets/b2fdbe507d6ce9ef.woff2) format("woff2");
}
@font-face {
font-family: gg sans;
font-style: italic;
font-weight: 800;
src: url(/assets/03dcf979852e8b8e.woff2) format("woff2");
}
@font-face {
font-family: gg mono;
font-style: normal;
font-weight: 400;
src: url(/assets/249d0a057895c668.woff2) format("woff2");
}
@font-face {
font-family: gg mono;
font-style: normal;
font-weight: 700;
src: url(/assets/45efa6936fdfb918.woff2) format("woff2");
}
@font-face {
font-family: Noto Sans;
font-style: normal;
font-weight: 400;
src: url(/assets/f72b5ce64feb2086.woff2) format("woff2");
}
@font-face {
font-family: Noto Sans;
font-style: italic;
font-weight: 400;
src: url(/assets/7a6a566c2e88a35d.woff2) format("woff2");
}
@font-face {
font-family: Noto Sans;
font-style: normal;
font-weight: 500;
src: url(/assets/a4a3d323feb11add.woff2) format("woff2");
}
@font-face {
font-family: Noto Sans;
font-style: italic;
font-weight: 500;
src: url(/assets/1a9d6f15e3bade15.woff2) format("woff2");
}
@font-face {
font-family: Noto Sans;
font-style: normal;
font-weight: 600;
src: url(/assets/36e7b68ea0c05ae7.woff2) format("woff2");
}
@font-face {
font-family: Noto Sans;
font-style: italic;
font-weight: 600;
src: url(/assets/7b652d8bbf885aea.woff2) format("woff2");
}
@font-face {
font-family: Noto Sans;
font-style: normal;
font-weight: 700;
src: url(/assets/cb2006dbced0e246.woff2) format("woff2");
}
@font-face {
font-family: Noto Sans;
font-style: italic;
font-weight: 700;
src: url(/assets/e52f0cba712e2fb4.woff2) format("woff2");
}
@font-face {
font-family: Noto Sans;
font-style: normal;
font-weight: 800;
src: url(/assets/772df2968ca0cf92.woff2) format("woff2");
}
@font-face {
font-family: Noto Sans;
font-style: italic;
font-weight: 800;
src: url(/assets/19797abd0807f76b.woff2) format("woff2");
}
@font-face {
font-family: Source Code Pro;
font-style: normal;
font-weight: 400;
src: url(/assets/268aaee6b96a3789.woff2) format("woff2");
}
@font-face {
font-family: Source Code Pro;
font-style: normal;
font-weight: 700;
src: url(/assets/c76eb070f0fcec44.woff2) format("woff2");
}
@font-face {
font-family: Corinthia;
font-style: normal;
font-weight: 400;
src: url(/assets/b598312a5e479904.woff2) format("woff2");
}
@font-face {
font-family: Fraunces;
font-style: normal;
font-weight: 300 800;
src: url(/assets/943f151cdf1b637e.woff2) format("woff2");
}
@font-face {
font-family: Munro;
font-style: normal;
font-weight: 400;
src: url(/assets/b4099c935ba38494.woff2) format("woff2");
}
@font-face {
font-family: Cherry Bomb One;
font-style: normal;
font-weight: 400;
src: url(/assets/36b8ec02240b4a57.woff2) format("woff2");
unicode-range: u+0000-003f, u+0041-ffff;
}
@font-face {
font-family: Chicle;
font-style: normal;
font-weight: 400;
src: url(/assets/75128ea3f06f2281.woff2) format("woff2");
unicode-range: u+0000-003f, u+0041-ffff;
}
@font-face {
font-family: Neo Castel;
font-style: normal;
font-weight: 400;
src: url(/assets/b002cee37c62600b.woff2) format("woff2");
unicode-range: u+0000-003f, u+0041-ffff;
}
@font-face {
font-family: Museo Moderno;
font-style: normal;
font-weight: 500;
src: url(/assets/df8d053a43eba015.woff2) format("woff2");
unicode-range: u+0000-003f, u+0041-ffff;
}
@font-face {
font-family: Pixelify Sans;
font-style: normal;
font-weight: 400;
src: url(/assets/ae8462614cb0ef23.woff2) format("woff2");
unicode-range: u+0000-003f, u+0041-ffff;
}
@font-face {
font-family: Sinistre;
font-style: normal;
font-weight: 400;
src: url(/assets/7d62c7ec06cb13a4.woff2) format("woff2");
unicode-range: u+0000-003f, u+0041-ffff;
}
@font-face {
font-family: Zilla Slab;
font-style: normal;
font-weight: 600;
src: url(/assets/4f94f359293a357d.woff2) format("woff2");
unicode-range: u+0000-003f, u+0041-ffff;
}
:root {
--font-primary: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-display: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-headline: "ABC Ginto Nord", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-code:
"gg mono", "Source Code Pro", Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier,
monospace;
--font-clan-body: Fraunces, "gg sans", serif, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-clan-signature: Corinthia, "gg sans", cursive, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-display-marketing: "ABC Ginto Discord", "gg sans", serif, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-display-marketing-header: "ABC Ginto Nord Discord", "gg sans", serif, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
:root:lang(bg),
:root:lang(el),
:root:lang(ru),
:root:lang(uk) {
--font-primary: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-display: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-headline: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-code:
"gg mono", "Source Code Pro", Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier,
monospace;
--font-clan-body: Fraunces, "gg sans", serif, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-clan-signature: Corinthia, "gg sans", cursive, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-display-marketing: "ABC Ginto Discord", "gg sans", serif, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-display-marketing-header: "ABC Ginto Nord Discord", "gg sans", serif, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
:root:lang(ko) {
--font-primary: "gg sans", "Apple SD Gothic Neo", NanumBarunGothic, "맑은 고딕", "Malgun Gothic", Gulim, 굴림, Dotum, 돋움, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-display: "gg sans", "Apple SD Gothic Neo", NanumBarunGothic, "맑은 고딕", "Malgun Gothic", Gulim, 굴림, Dotum, 돋움, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-headline: "ABC Ginto Nord", "Apple SD Gothic Neo", NanumBarunGothic, "맑은 고딕", "Malgun Gothic", Gulim, 굴림, Dotum, 돋움, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-code:
"gg mono", "Source Code Pro", Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier,
monospace;
--font-clan-body: Fraunces, "gg sans", serif, "Apple SD Gothic Neo", NanumBarunGothic, "맑은 고딕", "Malgun Gothic", Gulim, 굴림, Dotum, 돋움, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-clan-signature: Corinthia, "gg sans", cursive, "Apple SD Gothic Neo", NanumBarunGothic, "맑은 고딕", "Malgun Gothic", Gulim, 굴림, Dotum, 돋움, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-display-marketing: "ABC Ginto Discord", "gg sans", serif, "Apple SD Gothic Neo", NanumBarunGothic, "맑은 고딕", "Malgun Gothic", Gulim, 굴림, Dotum, 돋움, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-display-marketing-header: "ABC Ginto Nord Discord", "gg sans", serif, "Apple SD Gothic Neo", NanumBarunGothic, "맑은 고딕", "Malgun Gothic", Gulim, 굴림, Dotum, 돋움, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
:root:lang(ja) {
--font-primary: "gg sans", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, Osaka, "MS PGothic", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-display: "gg sans", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, Osaka, "MS PGothic", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-headline: "ABC Ginto Nord", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, Osaka, "MS PGothic", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-code:
"gg mono", "Source Code Pro", Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier,
monospace;
--font-clan-body: Fraunces, "gg sans", serif, "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, Osaka, "MS PGothic", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-clan-signature: Corinthia, "gg sans", cursive, "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, Osaka, "MS PGothic", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-display-marketing: "ABC Ginto Discord", "gg sans", serif, "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, Osaka, "MS PGothic", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-display-marketing-header:
"ABC Ginto Nord Discord", "gg sans", serif, "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, Osaka, "MS PGothic", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
:root:lang(zh-CN) {
--font-primary: "gg sans", "Microsoft YaHei New", 微软雅黑, "Microsoft Yahei", "Microsoft JhengHei", 宋体, SimSun, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-display: "gg sans", "Microsoft YaHei New", 微软雅黑, "Microsoft Yahei", "Microsoft JhengHei", 宋体, SimSun, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-headline: "ABC Ginto Nord", "Microsoft YaHei New", 微软雅黑, "Microsoft Yahei", "Microsoft JhengHei", 宋体, SimSun, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-code:
"gg mono", "Source Code Pro", Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier,
monospace;
--font-clan-body: Fraunces, "gg sans", serif, "Microsoft YaHei New", 微软雅黑, "Microsoft Yahei", "Microsoft JhengHei", 宋体, SimSun, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-clan-signature: Corinthia, "gg sans", cursive, "Microsoft YaHei New", 微软雅黑, "Microsoft Yahei", "Microsoft JhengHei", 宋体, SimSun, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-display-marketing: "ABC Ginto Discord", "gg sans", serif, "Microsoft YaHei New", 微软雅黑, "Microsoft Yahei", "Microsoft JhengHei", 宋体, SimSun, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-display-marketing-header: "ABC Ginto Nord Discord", "gg sans", serif, "Microsoft YaHei New", 微软雅黑, "Microsoft Yahei", "Microsoft JhengHei", 宋体, SimSun, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
:root:lang(zh-TW) {
--font-primary: "gg sans", "Microsoft JhengHei", 微軟正黑體, "Microsoft JhengHei UI", "Microsoft YaHei", 微軟雅黑, 宋体, SimSun, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-display: "gg sans", "Microsoft JhengHei", 微軟正黑體, "Microsoft JhengHei UI", "Microsoft YaHei", 微軟雅黑, 宋体, SimSun, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-headline: "ABC Ginto Nord", "Microsoft JhengHei", 微軟正黑體, "Microsoft JhengHei UI", "Microsoft YaHei", 微軟雅黑, 宋体, SimSun, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-code:
"gg mono", "Source Code Pro", Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier,
monospace;
--font-clan-body: Fraunces, "gg sans", serif, "Microsoft JhengHei", 微軟正黑體, "Microsoft JhengHei UI", "Microsoft YaHei", 微軟雅黑, 宋体, SimSun, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-clan-signature: Corinthia, "gg sans", cursive, "Microsoft JhengHei", 微軟正黑體, "Microsoft JhengHei UI", "Microsoft YaHei", 微軟雅黑, 宋体, SimSun, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-display-marketing: "ABC Ginto Discord", "gg sans", serif, "Microsoft JhengHei", 微軟正黑體, "Microsoft JhengHei UI", "Microsoft YaHei", 微軟雅黑, 宋体, SimSun, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-display-marketing-header:
"ABC Ginto Nord Discord", "gg sans", serif, "Microsoft JhengHei", 微軟正黑體, "Microsoft JhengHei UI", "Microsoft YaHei", 微軟雅黑, 宋体, SimSun, "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
:root {
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extra-bold: 800;
--channels-name-line-height: 24px;
--channels-spine-inverted-offset-top: 6px;
--channels-spine-offset-left: 24px;
--chat-avatar-size: 40px;
--chat-input-icon-size: 20px;
--chat-markup-line-height: 1.375rem;
--chat-resize-handle-width: 8px;
--control-input-height-md: 44px;
--control-input-height-sm: 32px;
--control-item-height-md: 40px;
--control-item-height-sm: 32px;
--form-input-height: 44px;
--guildbar-avatar-size: 40px;
--guildbar-folder-size: 48px;
--icon-size-lg: 32px;
--icon-size-md: 24px;
--icon-size-sm: 18px;
--icon-size-xs: 16px;
--icon-size-xxs: 12px;
--modal-horizontal-padding: 24px;
--modal-vertical-padding: 16px;
--modal-width-large: 800px;
--modal-width-medium: 602px;
--modal-width-small: 442px;
--select-max-width: 248px;
--select-option-height: 40px;
}
.mana-text-inputs {
--control-input-height-md: 40px;
}
.refresh-fast-follow-avatars.density-compact {
--guildbar-avatar-size: 40px;
--guildbar-folder-size: 48px;
}
.refresh-fast-follow-avatars.density-cozy,
.refresh-fast-follow-avatars.density-default {
--guildbar-avatar-size: 44px;
--guildbar-folder-size: 52px;
}
.density-compact {
--channels-name-line-height: 20px;
--channels-spine-inverted-offset-top: 2px;
--channels-spine-offset-left: 20px;
}
.density-default {
--channels-name-line-height: 24px;
--channels-spine-inverted-offset-top: 6px;
--channels-spine-offset-left: 24px;
}
.density-cozy {
--channels-name-line-height: 28px;
--channels-spine-inverted-offset-top: 9px;
--channels-spine-offset-left: 28px;
}
a,
abbr,
acronym,
address,
applet,
big,
blockquote,
body,
caption,
cite,
code,
dd,
del,
dfn,
div,
dl,
dt,
em,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
html,
iframe,
img,
ins,
kbd,
label,
legend,
li,
object,
ol,
p,
pre,
q,
s,
samp,
small,
span,
strike,
strong,
table,
tbody,
td,
tfoot,
th,
thead,
tr,
tt,
ul,
var {
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
padding: 0;
vertical-align: baseline;
}
a {
color: var(--text-link);
cursor: pointer;
text-decoration: none;
}
a img {
border: none;
}
body {
background: transparent;
font-family: var(--font-primary);
line-height: 1;
margin: 0;
overflow: hidden;
padding: 0;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
p {
margin: 14px 0;
}
ol,
ul {
list-style: none;
}
::-moz-placeholder {
font-weight: var(--font-weight-normal);
}
::placeholder,
input,
select,
textarea {
font-family: var(--font-primary);
font-weight: var(--font-weight-normal);
}
@media (-webkit-max-device-pixel-ratio: 1) {
.theme-light ::-moz-placeholder {
font-weight: var(--font-weight-medium);
}
.theme-light ::placeholder,
.theme-light input,
.theme-light select,
.theme-light textarea {
font-weight: var(--font-weight-medium);
}
}
strong {
font-weight: var(--font-weight-semibold);
}
button {
border: 0;
cursor: pointer;
font-family: var(--font-primary);
font-weight: var(--font-weight-medium);
}
code {
font-family: var(--font-code);
font-size: 14px;
line-height: 16px;
}
:root {
--custom-index-scrollbar-width: 10px;
--custom-index-scrollbar-margin: 3px;
--custom-auth-box-auth-box-padding: 32px;
--custom-wave-splash-responsive-width-mobile: 485px;
--custom-wave-splash-responsive-width-mobile-first: 486px;
--custom-wave-splash-responsive-width-desktop: 1080px;
--custom-wave-splash-max-qr-login-width: 830px;
--custom-channel-text-area-button-hover-scale: 0.85714;
--custom-drag-resize-container-handle-size: 8px;
--custom-drag-resize-container-handle-bleed: 2px;
--custom-drag-resize-container-handle-offset: calc(var(--custom-drag-resize-container-handle-bleed) - var(--custom-drag-resize-container-handle-size));
--custom-embed-spoiler-blur-radius: 44px;
--custom-gradient-progress-notch-width: 8px;
--custom-gradient-progress-notch-height: 16px;
--custom-gradient-progress-notch-margin: 2px;
--custom-guild-discovery-card-card-height: 320px;
--custom-guild-discovery-card-card-height-with-tags: 350px;
--custom-icon-button-icon-lg-size: 36px;
--custom-icon-button-icon-md-size: 24px;
--custom-icon-button-icon-sm-size: 18px;
--custom-icon-button-icon-xs-size: 12px;
--custom-invite-button-resolving-background-width: 380px;
--custom-keybind-space-around-key: 8px;
--custom-keybind-shadow-width: 2px;
--custom-keybind-vertical-padding-total-height: 8px;
--custom-keybind-applied-vertical-padding: calc((var(--custom-keybind-vertical-padding-total-height) - var(--custom-keybind-shadow-width)) / 2);
--custom-full-screen-layer-animation-duration: 150ms;
--custom-layout-sidebar-width: 232px;
--custom-message-avatar-size: 40px;
--custom-message-avatar-decoration-size: calc(var(--custom-message-avatar-size) * var(--decoration-to-avatar-ratio));
--custom-message-margin-compact-indent: 5rem;
--custom-message-spacing-vertical-container-cozy: 0.125rem;
--custom-message-padding-vertical-container-compact: 0.125rem;
--custom-message-meta-space: 0.25rem;
--custom-message-reply-indent: 0.625rem;
--custom-message-margin-left-content-cozy: calc(var(--custom-message-avatar-size, 40px) + var(--custom-message-margin-horizontal) + var(--custom-message-margin-horizontal));
--custom-message-reply-message-preview-line-height: 1.125rem;
--custom-message-attachment-spoiler-blur-radius: 44px;
--custom-user-premium-guild-subscription-easter-egg-size: 196px;
--custom-notification-spacing: 12px;
--custom-notification-container-width: 300px;
--custom-notification-space-around-divider: 12px;
--custom-notification-box-shadow-opacity: 0.8;
--custom-notification-box-shadow-blur-radius: 7px;
--custom-notification-box-shadow-spread-radius: 3px;
--custom-widget-max-widget-height: 100vh;
--custom-widget-bar-padding: 12px;
--custom-widget-body-padding: 4px;
--custom-widget-bar-height: 20px;
--custom-premium-guild-progress-bar-progress-bar-width: 24px;
--custom-premium-guild-progress-bar-tier-marker-size: 16px;
--custom-call-avatar-outgoing-duration: 2.5s;
--custom-call-avatar-incoming-duration: 5.407s;
--custom-resizable-icon-size: 16px;
--custom-resizable-icon-padding: 4px;
--custom-resizable-extension-size: 4px;
--custom-live-indicator-border-radius: 16px;
--custom-tutorial-popout-padding-content: 16px;
--custom-tutorial-popout-height-media-approx: 80px;
--custom-emoji-size-emoji: 1.375em;
--custom-emoji-size-jumbo-emoji: 3rem;
--custom-margin-margin-x-small: 4px;
--custom-margin-margin-small: 8px;
--custom-margin-margin-medium: 20px;
--custom-margin-margin-large: 40px;
--custom-margin-margin-x-large: 60px;
--custom-media-queries-media-query-mobile-header: 849px;
--custom-media-queries-media-query-mobile: 768px;
--custom-scrollbar-scrollbar-width: 14px;
--custom-scrollbar-scrollbar-margin: 3px;
--custom-scrollbar-border-radius: calc(var(--custom-scrollbar-scrollbar-width)/2);
--custom-voice-channel-effect-voice-channel-effect-animation-size: 800px;
--custom-voice-channel-effects-bar-effect-bar-padding-x: 16px;
--custom-voice-channel-effects-bar-effect-bar-padding-y: 12px;
--custom-voice-channel-effects-bar-max-width: 498px;
--custom-base-tile-border-radius: 8px;
--video-calls-base-tile-border-radius: var(--radius-lg);
--custom-summary-avatars-avatar-diameter: 16px;
--custom-guild-settings-premium-tier-status-progress-with-subscriptions-margin-top: 7px;
--custom-guild-stickers-tiers-grid-breakpoint: 1010px;
--custom-guild-sticker-upload-modal-emoji-size: 22px;
--custom-guild-sticker-upload-modal-emoji-margin: 10px;
--custom-stickers-constants-stickers-list-padding-top: 0;
--custom-stickers-constants-stickers-list-padding-top-search-results: 8px;
--custom-stickers-constants-stickers-list-padding-right: 0;
--custom-stickers-constants-stickers-list-padding-bottom: 0;
--custom-stickers-constants-stickers-list-padding-left: 8px;
--custom-stickers-constants-stickers-list-divider-height: 30px;
--custom-stickers-constants-stickers-list-empty-guild-upsell-height: 54px;
--custom-stickers-constants-stickers-shop-list-section-heading-height: 66px;
--custom-stickers-constants-stickers-shop-divider-border-top-width: 1px;
--custom-stickers-constants-stickers-shop-divider-height: 1px;
--custom-stickers-constants-stickers-shop-list-section-footer-height: 32px;
--custom-stickers-constants-stickers-shop-list-section-footer-stacked-margin: 8px;
--custom-stickers-constants-sticker-picker-preview-dimensions: 96px;
--custom-stickers-constants-sticker-picker-preview-dimensions-small: 80px;
--custom-stickers-constants-sticker-picker-preview-padding: 2px;
--custom-stickers-constants-sticker-shop-modal-preview-dimensions: 72px;
--custom-stickers-constants-sticker-picker-preview-margin: 12px;
--custom-stickers-constants-sticker-picker-preview-margin-small: 4px;
--custom-stickers-constants-sticker-picker-preview-border-radius: 4px;
--custom-stickers-constants-sticker-category-list-padding: 8px;
--custom-stickers-constants-sticker-category-icon-margin: 8px;
--custom-stickers-constants-sticker-category-icon-size: 32px;
--custom-stickers-constants-sticker-category-unicode-icon-size: 24px;
--custom-stickers-constants-sticker-dimension: 160px;
--custom-stickers-constants-sticker-purchase-pack-preview-dimensions: 76px;
--custom-stickers-constants-sticker-purchase-pack-preview-padding: 2px;
--custom-stickers-constants-sticker-purchase-pack-preview-margin: 0;
--custom-stickers-constants-sticker-picker-breakpoint-small: 360px;
--custom-stickers-constants-sticker-picker-breakpoint-medium: 446px;
--custom-stickers-constants-category-separator-size: 1px;
--custom-stickers-constants-category-separator-margin-vertical: 12px;
--custom-header-icon-color-expired: #4e5058;
--custom-reaction-picker-border-radius: 8px;
--custom-outbound-promotion-redemption-modal-art-height: 120px;
--custom-premium-colors-premium-gradient-tier-0: linear-gradient(to right, var(--premium-tier-0-purple-for-gradients), var(--premium-tier-0-blue-for-gradients));
--custom-premium-colors-premium-gradient-tier-1: linear-gradient(to right, var(--premium-tier-1-blue-for-gradients), var(--premium-tier-1-dark-blue-for-gradients));
--custom-premium-colors-premium-gradient-tier-2: linear-gradient(to right, var(--premium-tier-2-purple-for-gradients), var(--premium-tier-2-pink-for-gradients));
--custom-premium-colors-premium-gradient-tier-2-transparent: linear-gradient(to right, hsl(var(--premium-tier-2-purple-for-gradients-hsl)/0.3), hsl(var(--premium-tier-2-pink-for-gradients-hsl)/0.3));
--custom-premium-colors-premium-gradient-tier-2-diagonal: linear-gradient(45deg, var(--premium-tier-2-purple-for-gradients), var(--premium-tier-2-pink-for-gradients));
--custom-premium-colors-premium-gradient-tier-2-tri-color: linear-gradient(to right, var(--premium-tier-2-purple-for-gradients), var(--premium-tier-2-purple-for-gradients-2), var(--premium-tier-2-pink-for-gradients));
--custom-premium-colors-premium-gradient-tier-2-tri-color-reverse: linear-gradient(to left, var(--premium-tier-2-purple-for-gradients), var(--premium-tier-2-purple-for-gradients-2), var(--premium-tier-2-pink-for-gradients));
--custom-premium-colors-premium-gradient-tier-2-tri-color-vertical: linear-gradient(to top, var(--premium-tier-2-purple-for-gradients), var(--premium-tier-2-purple-for-gradients-2), var(--premium-tier-2-pink-for-gradients));
--custom-premium-colors-premium-gradient-tier-2-old: linear-gradient(to right, var(--premium-tier-2-purple), var(--premium-tier-2-pink));
--custom-premium-colors-banner-yellow: #ffeaa0;
--custom-premium-colors-banner-black: #232428;
--custom-pending-row-max-width: 1040px;
--custom-people-page-max-width-with-toolbar: 940px;
--custom-family-center-page-responsive-width-mobile: 900px;
--custom-text-widget-background-color-header-default: var(--primary-600);
--custom-voice-widget-top-margin: calc(var(--custom-widget-bar-height) + var(--custom-widget-bar-padding) * 2);
--custom-voice-widget-widget-width: 272px;
--custom-party-avatars-avatar-diameter: 24px;
--custom-mobile-web-handoff-link-mobile-web-handoff-height: 70px;
--custom-embedded-application-invite-content-height: 130px;
--custom-embedded-application-invite-content-height-tall: 162px;
--custom-embedded-application-invite-content-width: 576px;
--custom-embedded-application-invite-image-width-small: 225px;
--custom-embedded-application-invite-image-width-large: 288px;
--custom-message-helpers-popout-content-width: 256px;
--custom-message-helpers-popout-padding-width: 16px;
--custom-message-helpers-popout-container-width: calc(var(--custom-message-helpers-popout-content-width) + var(--custom-message-helpers-popout-padding-width) * 2);
--custom-media-post-attachments-horizontal-padding: 48px;
--custom-media-post-embed-spoiler-blur-radius: 20px;
--custom-media-post-embed-transition-duration: 170ms;
--custom-raging-demon-duration: 0.15s;
--custom-interaction-iframe-modal-modal-min-width: 320px;
--custom-interaction-iframe-modal-modal-margin: 80px;
--custom-interaction-iframe-modal-modal-max-width: 1280px;
--custom-interaction-iframe-modal-modal-header-height: 52px;
--custom-accept-invite-detail-components-small-mobile-breakpoint: 640px;
--custom-accept-invite-mobile-small-mobile-breakpoint: 640px;
--custom-hub-discovery-add-hub-card-card-height: 320px;
--custom-hub-discovery-guild-list-card-height: 320px;
--custom-hub-discovery-guild-list-min-card-width: 248px;
--custom-hub-discovery-guild-list-gutter-size: 16px;
--custom-hub-discovery-page-max-page-width: 1608px;
--custom-guild-tooltip-icon-size: 20px;
--custom-guild-tooltip-icon-size-v-2: 16px;
--custom-folder-item-animation-duration: 150ms;
--custom-folder-item-guild-icon-margin: 8px;
--custom-category-channel-space-before-category: 16px;
}
.density-compact {
--custom-category-channel-space-before-category: var(--space-8);
}
:root {
--custom-add-permissions-modal-focus-ring-width: 4px;
--custom-custom-role-icon-form-item-role-icon-preview-size: 32px;
--custom-guild-settings-roles-edit-shared-sidebar-width: 232px;
--custom-guild-settings-roles-intro-roles-transition: 250ms;
--custom-guild-settings-roles-intro-pause-transition: 166ms;
--custom-guild-settings-roles-intro-background-transition: 500ms;
--custom-guild-settings-roles-intro-banner-transition-delay: calc(var(--custom-guild-settings-roles-intro-roles-transition) + var(--custom-guild-settings-roles-intro-pause-transition));
--custom-guild-settings-roles-intro-roles-transition-delay: calc(
var(--custom-guild-settings-roles-intro-roles-transition) + var(--custom-guild-settings-roles-intro-pause-transition) * 2 + var(--custom-guild-settings-roles-intro-background-transition)
);
--custom-guild-settings-community-intro-content-spacing: 32px;
--custom-guild-settings-community-intro-hover-distance: -12px;
--custom-guild-settings-community-intro-text-spacing: 8px;
--custom-guild-settings-discovery-landing-page-max-width-tab: 905px;
--custom-guild-settings-discovery-landing-page-settings-max-width: 520px;
--custom-guild-settings-partner-content-spacing: 32px;
--custom-event-detail-info-tab-base-spacing: 8px;
--custom-subscription-listing-previews-carousel-cards-get-cut-off-width: 724px;
--custom-editable-benefits-list-emoji-size: 24px;
--custom-edit-benefit-modal-emoji-size: 22px;
--custom-edit-benefit-modal-emoji-margin: 10px;
--custom-guild-settings-role-subscriptions-max-width: 905px;
--custom-guild-settings-role-subscriptions-overview-settings-max-width: 520px;
--custom-guild-settings-store-page-settings-max-width: 520px;
--custom-importable-benefits-list-listing-image-size: 40px;
--custom-import-benefits-modal-icon-size: 24px;
--custom-import-benefits-modal-role-icon-size: 40px;
--custom-role-icon-uploader-icon-size: 24px;
--custom-guild-role-subscription-style-constants-cover-image-aspect-ratio: 4;
--custom-historic-earnings-table-toggle-expand-column-width: 30px;
--custom-guild-role-subscription-card-basic-info-tier-image-size: 80px;
--custom-guild-role-subscription-card-basic-info-tier-image-size-mobile: 48px;
--custom-guild-role-subscriptions-overview-page-page-max-width: 1180px;
--custom-guild-dialog-popout-width: 250px;
--custom-guild-dialog-splash-ratio: 1.77778;
--custom-guild-dialog-icon-size: 84px;
--custom-guild-dialog-icon-padding: 4px;
--custom-guild-product-download-modal-header-image-width: 119px;
--custom-guild-onboarding-home-page-max-page-width: 1128px;
--custom-guild-onboarding-home-page-max-single-column-width: 704px;
--custom-home-resource-channels-obscured-blur-radius: 20px;
--custom-guild-member-application-review-sidebar-width: 29vw;
--custom-featured-items-popout-featured-items-popout-footer-height: 120px;
--custom-guild-boosting-sidebar-display-conditional-bottom-margin: 12px;
--custom-guild-boosting-marketing-progress-bar-marker-dimensions: 32px;
--custom-guild-boosting-marketing-progress-bar-end-markers-margin: 4px;
--custom-guild-boosting-marketing-progress-bar-marker-marker-dimensions: 32px;
--custom-guild-boosting-marketing-tier-cards-tier-card-border-radius: 16px;
--custom-go-live-modal-art-height: 112px;
--custom-gif-picker-gutter-size: 0 16px 12px 16px;
--custom-gif-picker-search-results-desired-item-width: 160px;
--custom-forum-composer-attachments-attachment-size: 78px;
--custom-forum-post-obscured-blur-radius: 20px;
--custom-forum-post-grid-view-obscured-blur-radius: 20px;
--custom-demo-forum-channel-padding-large: 20px;
--custom-demo-forum-channel-post-padding: 12px;
--custom-demo-forum-channel-gap-size: 8px;
--custom-feedback-modal-emoji-size: 64px;
--custom-feedback-modal-close-button-margin: 12px;
--custom-expression-suggestions-container-padding: 8px;
--custom-expression-suggestions-sticker-suggestion-size: 48px;
--custom-expression-suggestions-sticker-suggestion-margin: 8px;
--custom-expression-picker-constants-expression-picker-list-section-heading-height: 32px;
--custom-expression-picker-constants-expression-picker-inspector-bar-graphic-primary-dimensions: 28px;
--custom-expression-picker-constants-expression-picker-inspector-bar-graphic-secondary-dimensions: 32px;
--custom-expression-picker-constants-expression-picker-inspector-bar-height: 48px;
--custom-emoji-picker-border-radius: 8px;
--custom-emoji-picker-constants-min-emoji-picker-width: 498px;
--custom-emoji-picker-constants-emoji-size-medium: 40px;
--custom-emoji-picker-constants-emoji-size-large: 48px;
--custom-emoji-picker-constants-emoji-container-padding-horizontal: 4px;
--custom-emoji-picker-constants-emoji-container-padding-vertical: 4px;
--custom-emoji-picker-constants-emoji-picker-height: 440px;
--custom-emoji-picker-constants-emoji-section-margin-bottom: 12px;
--custom-emoji-picker-constants-emoji-list-padding-top: 0;
--custom-emoji-picker-constants-emoji-list-padding-right: 0;
--custom-emoji-picker-constants-emoji-list-padding-bottom: 8px;
--custom-emoji-picker-constants-emoji-list-padding-left: 8px;
--custom-emoji-picker-constants-emoji-list-search-results-padding-top: 8px;
--custom-emoji-picker-constants-unicode-category-icon-margin-vertical: 2px;
--custom-emoji-picker-constants-unicode-category-icon-size: 24px;
--custom-emoji-picker-constants-unicode-category-icon-padding: 4px;
--custom-emoji-picker-constants-unicode-category-shortcut-height: 48px;
--custom-emoji-picker-constants-guild-category-icon-size: 32px;
--custom-emoji-picker-constants-guild-category-icon-margin-verical: 8px;
--custom-emoji-picker-constants-category-separator-size: 1px;
--custom-emoji-picker-constants-category-separator-margin-vertical: 12px;
--custom-emoji-picker-constants-diversity-emoji-size: 24px;
--custom-emoji-picker-constants-emoji-premium-upsell-height: 54px;
--custom-emoji-picker-constants-emoji-premium-upsell-margin-top: 16px;
--custom-emoji-picker-constants-newly-added-emoji-badge-height: 16px;
--custom-discover-static-guild-card-card-height: 258px;
--custom-discover-featured-guilds-section-card-height: 320px;
--custom-discover-featured-guilds-section-min-card-width: 248px;
--custom-discover-featured-guilds-section-gutter-size: 16px;
--custom-discover-search-results-max-search-bar-width: 720px;
--custom-guild-directory-min-card-width: 248px;
--custom-guild-directory-gutter-size: 16px;
--custom-guild-directory-min-content-width: 320px;
--custom-guild-directory-max-page-width: 1608px;
--custom-guild-directory-entry-card-card-height: 274px;
--custom-guild-directory-landing-min-header-height: 200px;
--custom-guild-shop-page-two-column-max-width: 1439px;
--custom-aspect-stable-image-container-padding: 20px;
--custom-monetization-info-table-expandable-rows-toggle-expand-column-width: 30px;
--custom-guild-shop-content-width: 1044px;
--custom-guild-shop-content-width-reduced: 788px;
--custom-guild-shop-content-width-minimum: 688px;
--custom-guild-shop-channel-row-gradient: linear-gradient(113deg, #2f3570 1.98%, #422c70 94.48%);
--custom-guild-shop-channel-row-gradient-hover: linear-gradient(113deg, #383f86 1.98%, #4d3385 94.48%);
--custom-guild-shop-channel-row-border-gradient: linear-gradient(113deg, #6591ff, #d150ff);
--custom-guild-shop-channel-row-glow: 0 0 4px rgba(189, 149, 255, 0.5);
--custom-guild-shop-preview-pill-shadow-dark: -4px 5px #1d1d1d;
--custom-guild-shop-preview-pill-shadow-light: -4px 5px #d7dce8;
--custom-guild-shop-gradient-start: #686bff;
--custom-guild-shop-gradient-end: #c356fd;
--custom-clips-enabled-indicator-medium-break-point: 920px;
--custom-clips-enabled-indicator-badge-icon-dimension-override: 20px;
--custom-client-themes-editor-content-width: calc(var(--custom-theme-selection-selection-size) * 3 + var(--custom-theme-selection-group-column-gap) * 2);
--custom-client-themes-editor-editor-padding: 16px;
--custom-theme-selection-selection-size: 60px;
--custom-theme-selection-group-column-gap: 24px;
--custom-channel-attachment-upload-spoiler-blur-radius: 44px;
--custom-channel-attachment-upload-mini-attachment-size: 78px;
--custom-channel-textarea-text-area-height: 44px;
--custom-channel-textarea-text-area-max-height: 50vh;
--custom-channel-notice-icon-size: 16px;
--custom-channel-notice-padding: 12px;
--custom-channel-call-participants-popout-padding-value: 16px;
--custom-stream-upsell-modal-art-height: 149px;
--custom-voice-channel-status-modal-emoji-size: 22px;
--custom-voice-channel-status-modal-emoji-margin: 10px;
--custom-broadcasting-tooltip-image-offset: 40px;
--custom-application-directory-content-min-width: 600px;
--custom-application-directory-content-max-width: 1024px;
--custom-guild-count-small-icon-size: 16px;
--custom-guild-count-large-icon-size: 20px;
--custom-collection-gallery-text-container-width: 400px;
--custom-collection-gallery-media-breakpoint: 1024px;
--custom-collection-gallery-column-card-height: 600px;
--custom-collection-gallery-row-card-height: 283px;
--custom-collection-list-card-gap: 16px;
--custom-collection-list-with-image-grid-gap: 16px;
--custom-collections-collection-gap: 32px;
--custom-application-directory-profile-sidebar-width: 192px;
--custom-application-directory-profile-sidebar-margin-right: 48px;
--custom-application-directory-profile-icon-size: 122px;
--custom-application-directory-search-sidebar-width: 200px;
--custom-application-directory-search-sidebar-margin-right: 32px;
--custom-accept-invite-modal-invite-modal-height: 420px;
--custom-accept-invite-modal-small-screen-width: 720px;
--custom-avatar-avatar-decoration-border-position: calc((1 - var(--decoration-to-avatar-ratio)) / 2 * 100%);
--custom-button-button-xl-width: 148px;
--custom-button-button-xl-height: 50px;
--custom-button-button-lg-width: 130px;
--custom-button-button-lg-height: 44px;
--custom-button-button-md-width: 96px;
--custom-button-button-md-height: 38px;
--custom-button-button-sm-width: 60px;
--custom-button-button-sm-height: 32px;
--custom-button-button-tn-height: 24px;
--custom-button-button-tn-width: 52px;
--custom-button-link-underline-width: 1px;
--custom-button-link-underline-offset: 1px;
--custom-button-link-underline-stop: calc(var(--custom-button-link-underline-width) + var(--custom-button-link-underline-offset));
--custom-button-filled-hover: 0.1;
--custom-button-filled-active: 0.2;
--custom-button-transition-duration: 170ms;
--custom-modal-min-width-large: 800px;
--custom-special-markdown-small-break-point: 600px;
--custom-special-markdown-medium-break-point: 768px;
--custom-user-profile-hype-squad-badge-icon-size: 24px;
--custom-user-profile-hype-squad-badge-shine-size-offset: 64px;
--custom-guild-discovery-gutter-size: 16px;
--custom-guild-discovery-max-page-width: 1608px;
--custom-dropdown-button-small-dropdown-size: 16px;
--custom-dropdown-button-medium-dropdown-size: 24px;
--custom-dropdown-button-large-dropdown-size: 32px;
--custom-dropdown-button-separator-padding: 4px;
--custom-dropdown-button-hitbox-padding: 8px;
--custom-responsive-embed-tile-loading-background-width: 271px;
--custom-game-install-locations-item-padding: 20px;
--custom-game-list-row-min-height: 62px;
--custom-game-list-linked-to-glow-duration: 2000ms;
--custom-application-store-home-store-home-width: 1245px;
--custom-application-store-listing-body-max-width: 880px;
--custom-store-colors-primary-750: #191b1d;
--custom-store-colors-premium-gradient: linear-gradient(to right, var(--premium-tier-2-purple), var(--premium-tier-2-pink));
--custom-member-list-item-avatar-decoration-padding: 2px;
--custom-messages-popout-messages-popout-footer-height: 120px;
--custom-radio-image-border-thickness: 2px;
--custom-standard-sidebar-view-sidebar-content-width: 192px;
--custom-standard-sidebar-view-standard-padding: 20px;
--custom-standard-sidebar-view-sidebar-content-scrollbar-padding: 6px;
--custom-standard-sidebar-view-sidebar-total-width: 264px;
--decoration-to-avatar-ratio: 1.2;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
}
.theme-dark.custom-theme-background {
--custom-background-gradient-color: 0 0 0;
--custom-background-gradient-opacity-chat: 0.8;
--custom-background-gradient-highest-opacity: 0.65;
--custom-background-gradient-lowest-opacity: 0.9;
--custom-background-gradient-lower-opacity: 0.85;
--custom-background-gradient-low-opacity: 0.8;
--custom-background-gradient-high-opacity: 0.75;
--custom-background-gradient-higher-opacity: 0.7;
--custom-background-gradient-opacity-app-frame: var(--custom-background-gradient-higher-opacity);
}
.theme-dark.custom-theme-background.custom-client-theme {
--custom-background-gradient-lowest-opacity: calc(0.54 + var(--custom-background-gradient-opacity-mix-amount, 1) * 0.4 * 0.9);
--custom-background-gradient-lower-opacity: calc(0.51 + var(--custom-background-gradient-opacity-mix-amount, 1) * 0.4 * 0.85);
--custom-background-gradient-low-opacity: calc(0.48 + var(--custom-background-gradient-opacity-mix-amount, 1) * 0.4 * 0.8);
--custom-background-gradient-high-opacity: calc(0.45 + var(--custom-background-gradient-opacity-mix-amount, 1) * 0.4 * 0.75);
--custom-background-gradient-higher-opacity: calc(0.42 + var(--custom-background-gradient-opacity-mix-amount, 1) * 0.4 * 0.7);
--custom-background-gradient-opacity-chat: calc(0.48 + var(--custom-background-gradient-opacity-mix-amount, 1) * 0.4 * 0.8);
--custom-background-gradient-highest-opacity: calc(0.39 + var(--custom-background-gradient-opacity-mix-amount, 1) * 0.4 * 0.65);
}
.custom-theme-background .theme-dark,
.theme-dark.custom-theme-background {
--custom-theme-base-color: var(--custom-theme-base-color-dark);
--custom-theme-text-color: var(--custom-theme-text-color-dark);
--custom-theme-base-color-hsl: var(--custom-theme-base-color-dark-hsl);
}
.theme-light.custom-theme-background {
--custom-background-gradient-color: 255 255 255;
--custom-background-gradient-highest-opacity: 0.95;
--custom-background-gradient-opacity-chat: 0.85;
--custom-background-gradient-lowest-opacity: 0.85;
--custom-background-gradient-lower-opacity: 0.8;
--custom-background-gradient-low-opacity: 0.75;
--custom-background-gradient-high-opacity: 0.7;
--custom-background-gradient-higher-opacity: 0.65;
--custom-background-gradient-opacity-app-frame: var(--custom-background-gradient-higher-opacity);
}
.theme-light.custom-theme-background.custom-client-theme {
--custom-background-gradient-lowest-opacity: calc(0.51 + var(--custom-background-gradient-opacity-mix-amount, 1) * 0.4 * 0.85);
--custom-background-gradient-lower-opacity: calc(0.48 + var(--custom-background-gradient-opacity-mix-amount, 1) * 0.4 * 0.8);
--custom-background-gradient-low-opacity: calc(0.45 + var(--custom-background-gradient-opacity-mix-amount, 1) * 0.4 * 0.75);
--custom-background-gradient-high-opacity: calc(0.42 + var(--custom-background-gradient-opacity-mix-amount, 1) * 0.4 * 0.7);
--custom-background-gradient-higher-opacity: calc(0.325 + var(--custom-background-gradient-opacity-mix-amount, 1) * 0.5 * 0.65);
--custom-background-gradient-opacity-chat: calc(var(--custom-background-gradient-chat-opacity-base-light, 0.85) * (0.6 + var(--custom-background-gradient-opacity-mix-amount, 1) * 0.4));
--custom-background-gradient-highest-opacity: calc(var(--custom-background-gradient-highest-opacity-base-light, 0.95) * (0.8 + var(--custom-background-gradient-opacity-mix-amount, 1) * 0.2));
}
.custom-theme-background .theme-light,
.theme-light.custom-theme-background {
--custom-theme-base-color: var(--custom-theme-base-color-light);
--custom-theme-text-color: var(--custom-theme-text-color-light);
--custom-theme-base-color-hsl: var(--custom-theme-base-color-light-hsl);
}
.custom-theme-background {
--custom-background-gradient-lowest-color: var(--custom-background-gradient-color);
--custom-background-gradient-lower-color: var(--custom-background-gradient-color);
--custom-background-gradient-low-color: var(--custom-background-gradient-color);
--custom-background-gradient-high-color: var(--custom-background-gradient-color);
--custom-background-gradient-higher-color: var(--custom-background-gradient-color);
--custom-background-gradient-chat-color: var(--custom-background-gradient-color);
--custom-background-gradient-app-frame-color: var(--custom-background-gradient-color);
--custom-background-gradient-highest-color: var(--custom-background-gradient-color);
--custom-background-gradient-cover: fixed 0 0/cover, var(--custom-theme-background) fixed 0 0 / cover;
--background-gradient-lowest: linear-gradient(
rgb(var(--custom-background-gradient-lowest-color)/var(--custom-background-gradient-lowest-opacity)),
rgb(var(--custom-background-gradient-lowest-color)/var(--custom-background-gradient-lowest-opacity))
)
var(--custom-background-gradient-cover);
--background-gradient-lower: linear-gradient(
rgb(var(--custom-background-gradient-lower-color)/var(--custom-background-gradient-lower-opacity)),
rgb(var(--custom-background-gradient-lower-color)/var(--custom-background-gradient-lower-opacity))
)
var(--custom-background-gradient-cover);
--background-gradient-low: linear-gradient(rgb(var(--custom-background-gradient-low-color)/var(--custom-background-gradient-low-opacity)), rgb(var(--custom-background-gradient-low-color)/var(--custom-background-gradient-low-opacity)))
var(--custom-background-gradient-cover);
--background-gradient-high: linear-gradient(
rgb(var(--custom-background-gradient-high-color)/var(--custom-background-gradient-high-opacity)),
rgb(var(--custom-background-gradient-high-color)/var(--custom-background-gradient-high-opacity))
)
var(--custom-background-gradient-cover);
--background-gradient-higher: linear-gradient(
rgb(var(--custom-background-gradient-higher-color)/var(--custom-background-gradient-higher-opacity)),
rgb(var(--custom-background-gradient-higher-color)/var(--custom-background-gradient-higher-opacity))
)
var(--custom-background-gradient-cover);
--background-gradient-chat: linear-gradient(
rgb(var(--custom-background-gradient-chat-color)/var(--custom-background-gradient-opacity-chat)),
rgb(var(--custom-background-gradient-chat-color)/var(--custom-background-gradient-opacity-chat))
)
var(--custom-background-gradient-cover);
--background-gradient-app-frame: linear-gradient(
rgb(var(--custom-background-gradient-app-frame-color)/var(--custom-background-gradient-opacity-app-frame)),
rgb(var(--custom-background-gradient-app-frame-color)/var(--custom-background-gradient-opacity-app-frame))
)
var(--custom-background-gradient-cover);
--background-gradient-highest: linear-gradient(
rgb(var(--custom-background-gradient-highest-color)/var(--custom-background-gradient-highest-opacity)),
rgb(var(--custom-background-gradient-highest-color)/var(--custom-background-gradient-highest-opacity))
)
var(--custom-background-gradient-cover);
--background-gradient-chat-preview:
linear-gradient(rgb(var(--custom-background-gradient-chat-color)/var(--custom-background-gradient-opacity-chat)), rgb(var(--custom-background-gradient-chat-color)/var(--custom-background-gradient-opacity-chat))),
var(--custom-theme-background);
}
.disable-adaptive-theme {
--custom-theme-base-color-amount: 0% !important;
--custom-theme-text-color-amount: 0% !important;
}
.reduce-adaptive-theme {
--custom-theme-base-color-amount: 20% !important;
--custom-theme-text-color-amount: 20% !important;
}
@supports (color: color-mix(in lch, red, blue)) {
.custom-theme-background:not(.custom-client-theme) {
--custom-app-border-frame-base: color-mix(in oklab, var(--custom-theme-primary-color) 50%, var(--custom-theme-secondary-color) 50%);
--app-border-frame: color-mix(in oklab, var(--custom-app-border-frame-base) 24%, var(--border-subtle) 100%);
}
}
._51fd70792ee2e563-appMount,
body,
html {
height: 100%;
width: 100%;
}
._51fd70792ee2e563-appMount {
color: var(--background-base-lowest);
display: flex;
flex-direction: column;
overflow: hidden;
position: absolute;
}
._51fd70792ee2e563-appMount,
body {
background: var(--background-base-lowest);
text-rendering: optimizeLegibility;
}
.overlay ._51fd70792ee2e563-appMount,
.overlay body {
background: transparent;
}
::-moz-placeholder {
font-family: var(--font-primary);
text-rendering: optimizeLegibility;
}
::placeholder,
body,
button,
input,
select,
textarea {
font-family: var(--font-primary);
text-rendering: optimizeLegibility;
}
a,
button,
div,
input,
label,
select,
span,
strong,
textarea {
outline: 0;
}
img[alt] {
text-indent: -9999px;
}
@media (-webkit-max-device-pixel-ratio: 1.5) {
.theme-light {
--font-weight-semibold-1x-light-theme: 600;
}
}
:root {
--custom-guild-list-padding: var(--space-md);
--custom-guild-list-width: calc(var(--guildbar-avatar-size) + var(--custom-guild-list-padding) * 2);
--custom-guild-sidebar-width: 268px;
--custom-app-sidebar-target-width: calc(var(--custom-guild-sidebar-width) + var(--custom-guild-list-width));
--custom-rtc-account-height: 44px;
--custom-app-top-bar-height: 32px;
--custom-app-top-bar-item-radius: 6px;
--custom-channel-header-height: calc(var(--guildbar-avatar-size) + var(--space-xs));
--custom-member-list-width: 264px;
--custom-channel-textarea-text-area-height: 56px;
--custom-chat-aligned-icon-offset: ((var(--chat-avatar-size) - var(--chat-input-icon-size))/2);
--custom-message-margin-horizontal: var(--space-md);
}
.refresh-title-bar-small {
--custom-app-top-bar-height: 24px;
}
.refresh-title-bar-large {
--custom-app-top-bar-height: 40px;
}
.platform-osx {
--custom-app-top-bar-height: max(calc(100/var(--custom-zoom, 100) * 32px), 32px);
}
.platform-osx.refresh-title-bar-small {
--custom-app-top-bar-height: max(calc(100/var(--custom-zoom, 100) * 24px), 24px);
}
.platform-osx.refresh-title-bar-large {
--custom-app-top-bar-height: max(calc(100/var(--custom-zoom, 100) * 40px), 40px);
}
.refresh-fast-follow-avatars {
--custom-guild-list-padding: min(var(--space-md), var(--space-16));
--custom-guild-list-width: calc(var(--guildbar-avatar-size) + var(--custom-guild-list-padding) * 2);
--custom-channel-header-height: calc(40px + var(--space-xs));
}
.density-compact {
--custom-member-list-width: 256px;
}
.density-cozy {
--custom-member-list-width: 268px;
}
.grecaptcha-badge {
visibility: hidden;
}
.enable-forced-colors:not(.platform-web) body:before,
html:has(.enable-forced-colors:not(.platform-web)) body:before {
border: 6px solid #d3d3d3;
border-top: 0 solid #d3d3d3;
box-sizing: border-box;
content: "";
display: block;
forced-color-adjust: none;
height: 100%;
inset-inline-start: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
}
.enable-forced-colors:not(.platform-web) #_51fd70792ee2e563-app-mount,
.enable-forced-colors:not(.platform-web) ._51fd70792ee2e563-appMount,
html:has(.enable-forced-colors:not(.platform-web)) #_51fd70792ee2e563-app-mount,
html:has(.enable-forced-colors:not(.platform-web)) ._51fd70792ee2e563-appMount {
background-color: Canvas;
box-sizing: border-box;
height: calc(100% - 6px);
margin: 0 6px 6px;
width: calc(100% - 12px);
}
.enable-forced-colors:not(.platform-web).theme-dark body:before,
html:has(.enable-forced-colors:not(.platform-web)).theme-dark body:before {
border-color: #d3d3d3;
}
.enable-forced-colors:not(.platform-web).theme-dark.app-focused body:before,
html:has(.enable-forced-colors:not(.platform-web)).theme-dark.app-focused body:before {
border-color: gold;
}
.enable-forced-colors:not(.platform-web).theme-light body:before,
html:has(.enable-forced-colors:not(.platform-web)).theme-light body:before {
border-color: gray;
}
.enable-forced-colors:not(.platform-web).theme-light.app-focused body:before,
html:has(.enable-forced-colors:not(.platform-web)).theme-light.app-focused body:before {
border-color: #483d8b;
}
.high-contrast-mode,
.high-contrast-mode .theme-light,
.high-contrast-mode.theme-light,
.high-contrast-mode .theme-dark,
.high-contrast-mode.theme-dark,
.high-contrast-mode .theme-darker,
.high-contrast-mode.theme-darker,
.high-contrast-mode .theme-midnight,
.high-contrast-mode.theme-midnight {
--shadow-border: 0 0 0 1px var(--border-strong) !important;
}
/*# sourceMappingURL=web.f4609b88ed6a5023.css.map*/