.isolated-section-query .hide-when-isolated,.isolated-section-query :not(.sample-section)>h2{display:none}.ui-title{color:var(--dh-color-text);border-bottom:1px solid var(--dh-color-gray-800);padding-bottom:10px;margin:1.5rem 0}pre{color:var(--dh-color-gray-700)}.swatch{height:2.5rem;width:100%;text-align:center;line-height:2.5rem}.gray-swatch{display:flex}.gray-swatch span{flex:1 0 50%}.swatch-primary-hover{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-accent-hover-bg);padding:0 20px 0 36px}.swatch-primary-hover:after{content:"--dh-color-accent-hover-bg";grid-column:2}.swatch-primary-dark{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-accent-down-bg);padding:0 20px 0 36px}.swatch-primary-dark:after{content:"--dh-color-accent-down-bg";grid-column:2}.swatch-mid{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-gray-mid);padding:0 20px 0 36px}.swatch-mid:after{content:"--dh-color-gray-mid";grid-column:2}.swatch-content-bg{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-content-bg, #2d2a2e);padding:0 20px 0 36px}.swatch-content-bg:after{content:"--dh-color-content-bg, #2d2a2e";grid-column:2}.swatch-background{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-black, #1a171a);padding:0 20px 0 36px}.swatch-background:after{content:"--dh-color-black, #1a171a";grid-column:2}.swatch-foreground{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-white, #f0f0ee);padding:0 20px 0 36px}.swatch-foreground:after{content:"--dh-color-white, #f0f0ee";grid-column:2}.swatch-secondary-hover{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-neutral-hover-bg);padding:0 20px 0 36px}.swatch-secondary-hover:after{content:"--dh-color-neutral-hover-bg";grid-column:2}.swatch-danger-hover{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-negative-hover-bg);padding:0 20px 0 36px}.swatch-danger-hover:after{content:"--dh-color-negative-hover-bg";grid-column:2}.swatch-primary{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-accent-bg);padding:0 20px 0 36px}.swatch-primary:after{content:"--dh-color-accent-bg";grid-column:2}.swatch-secondary{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-neutral-bg);padding:0 20px 0 36px}.swatch-secondary:after{content:"--dh-color-neutral-bg";grid-column:2}.swatch-success{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-positive-bg);padding:0 20px 0 36px}.swatch-success:after{content:"--dh-color-positive-bg";grid-column:2}.swatch-info{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-info-bg);padding:0 20px 0 36px}.swatch-info:after{content:"--dh-color-info-bg";grid-column:2}.swatch-warning{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-notice-bg);padding:0 20px 0 36px}.swatch-warning:after{content:"--dh-color-notice-bg";grid-column:2}.swatch-danger{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-negative-bg);padding:0 20px 0 36px}.swatch-danger:after{content:"--dh-color-negative-bg";grid-column:2}.swatch-light{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-neutral-bg);padding:0 20px 0 36px}.swatch-light:after{content:"--dh-color-neutral-bg";grid-column:2}.swatch-dark{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-neutral-bg);padding:0 20px 0 36px}.swatch-dark:after{content:"--dh-color-neutral-bg";grid-column:2}.gray-swatch-100{margin-top:2.5rem;position:relative}.gray-swatch-100:before{content:"Grays";color:var(--dh-color-text);display:block;position:absolute;font-size:10px;top:-2rem}.swatch-red{margin-top:2.5rem;position:relative}.swatch-red:before{content:"Base Colors";color:var(--dh-color-text);display:block;position:absolute;font-size:10px;top:-2rem}.swatch-content-bg{border:1px solid var(--dh-color-gray-500);margin-top:2.5rem;position:relative}.swatch-content-bg:before{content:"Semantic Colors";color:var(--dh-color-text);display:block;position:absolute;font-size:10px;top:-2rem}.swatch-primary{margin-top:2.5rem;position:relative}.swatch-primary:before{content:"Brand Colors";color:var(--dh-color-text);display:block;position:absolute;font-size:10px;top:-2rem}.swatch-success{margin-top:2.5rem;position:relative}.swatch-success:before{content:"Levels";color:var(--dh-color-text);display:block;position:absolute;font-size:10px;top:-2rem}.swatch-light{margin-top:2.5rem;position:relative}.swatch-light:before{content:"Brightness";color:var(--dh-color-text);display:block;position:absolute;font-size:10px;top:-2rem}.swatch-blue{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-visual-blue);padding:0 20px 0 36px}.swatch-blue:after{content:"--dh-color-visual-blue";grid-column:2}.swatch-indigo{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:#6610f2;padding:0 20px 0 36px}.swatch-indigo:after{content:"#6610f2";grid-column:2}.swatch-purple{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-visual-purple);padding:0 20px 0 36px}.swatch-purple:after{content:"--dh-color-visual-purple";grid-column:2}.swatch-pink{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:#e83e8c;padding:0 20px 0 36px}.swatch-pink:after{content:"#e83e8c";grid-column:2}.swatch-red{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-visual-red);padding:0 20px 0 36px}.swatch-red:after{content:"--dh-color-visual-red";grid-column:2}.swatch-orange{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-visual-orange);padding:0 20px 0 36px}.swatch-orange:after{content:"--dh-color-visual-orange";grid-column:2}.swatch-yellow{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-visual-yellow);padding:0 20px 0 36px}.swatch-yellow:after{content:"--dh-color-visual-yellow";grid-column:2}.swatch-green{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-visual-green);padding:0 20px 0 36px}.swatch-green:after{content:"--dh-color-visual-green";grid-column:2}.swatch-teal{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:#20c997;padding:0 20px 0 36px}.swatch-teal:after{content:"#20c997";grid-column:2}.swatch-cyan{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:#17a2b8;padding:0 20px 0 36px}.swatch-cyan:after{content:"#17a2b8";grid-column:2}.swatch-white{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-white, #f0f0ee);padding:0 20px 0 36px}.swatch-white:after{content:"--dh-color-white, #f0f0ee";grid-column:2}.swatch-gray{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-gray-500);padding:0 20px 0 36px}.swatch-gray:after{content:"--dh-color-gray-500";grid-column:2}.swatch-gray-dark{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-gray-300);padding:0 20px 0 36px}.swatch-gray-dark:after{content:"--dh-color-gray-300";grid-column:2}.swatch-black{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-black, #1a171a);padding:0 20px 0 36px}.swatch-black:after{content:"--dh-color-black, #1a171a";grid-column:2}.gray-swatch-100{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-gray-900, #fcfcfa);padding:0 20px 0 36px}.gray-swatch-100:after{content:"--dh-color-gray-900, #fcfcfa";grid-column:2}.gray-swatch-200{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-gray-800);padding:0 20px 0 36px}.gray-swatch-200:after{content:"--dh-color-gray-800";grid-column:2}.gray-swatch-300{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-gray-700);padding:0 20px 0 36px}.gray-swatch-300:after{content:"--dh-color-gray-700";grid-column:2}.gray-swatch-400{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-gray-600);padding:0 20px 0 36px}.gray-swatch-400:after{content:"--dh-color-gray-600";grid-column:2}.gray-swatch-500{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-gray-500);padding:0 20px 0 36px}.gray-swatch-500:after{content:"--dh-color-gray-500";grid-column:2}.gray-swatch-600{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-gray-500);padding:0 20px 0 36px}.gray-swatch-600:after{content:"--dh-color-gray-500";grid-column:2}.gray-swatch-700{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-gray-400);padding:0 20px 0 36px}.gray-swatch-700:after{content:"--dh-color-gray-400";grid-column:2}.gray-swatch-800{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-gray-300);padding:0 20px 0 36px}.gray-swatch-800:after{content:"--dh-color-gray-300";grid-column:2}.gray-swatch-900{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-gray-75);padding:0 20px 0 36px}.gray-swatch-900:after{content:"--dh-color-gray-75";grid-column:2}.gray-swatch-850{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-gray-200);padding:0 20px 0 36px}.gray-swatch-850:after{content:"--dh-color-gray-200";grid-column:2}.gray-swatch-8XX{display:grid;grid-template-columns:120px 1fr;text-align:left;white-space:nowrap;background-color:var(--dh-color-gray-100);padding:0 20px 0 36px}.gray-swatch-8XX:after{content:"--dh-color-gray-100";grid-column:2}.style-guide-container{background-color:var(--dh-color-content-bg, #2d2a2e);padding:1rem}h5.sub-title{color:var(--dh-color-gray-800);padding-bottom:10px;margin:2.5rem 0 1rem}.style-guide-inputs .draggable-item-list{height:300px}.navigations{position:relative;height:400px;width:325px;border:1px solid var(--dh-color-input-border)}.icons{display:grid;grid-template-columns:repeat(auto-fit,62px);grid-auto-rows:min-content;gap:8px;flex-grow:1}.icons .flash{position:fixed;top:1rem;right:1rem;opacity:0;padding:1rem;border-radius:4px;color:var(--dh-color-fg, #f0f0ee);background-color:var(--dh-color-content-bg, #2d2a2e);transition:opacity .2s;box-shadow:0 0 4px var(--dh-color-black, #1a171a);pointer-events:none}.icons .flash.in{opacity:1}.icons .no-result{width:200px}.icons .card{display:flex;flex-direction:column;justify-content:center;align-items:center;border-color:transparent;background-color:transparent;height:auto;padding:.5rem 2px}.icons .card .svg-inline--fa{align-self:center}.icons .card:focus{border-color:var(--dh-color-accent-bg)}.icons .card label{max-width:100%;font-size:.8rem;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.icons .fa-pulse{animation:none}#sample-section-spectrum-comparison-samples .input-label{margin:0;padding:4px 0 5px;font-size:12px;line-height:1.3}._themeColorsPalette_v5aa0_1{display:grid;grid-template-columns:repeat(15,1fr);gap:1px;align-items:center}._themeColorsPalette_v5aa0_1 ._swatch_v5aa0_7{display:flex;aspect-ratio:4/3;align-items:flex-start;justify-content:flex-end}._themeColors_v5aa0_1{--swatch-height: 24px;--column-gap: 14px;display:grid;column-gap:var(--column-gap);grid-template-columns:repeat(auto-fit,210px)}._themeColors_v5aa0_1 ._label_v5aa0_21{display:block;padding:1rem 0;font-weight:700}._themeColors_v5aa0_1 ._label_v5aa0_21._capitalize_v5aa0_26{text-transform:capitalize}._themeColors_v5aa0_1 ._swatch_v5aa0_7{display:flex;align-items:center;height:var(--swatch-height);gap:4px;margin-bottom:1px}._themeColors_v5aa0_1 ._swatch_v5aa0_7 span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}._themeColors_v5aa0_1 ._swatch_v5aa0_7 button,._themeColorsPalette_v5aa0_1 ._swatch_v5aa0_7 button{opacity:0}._themeColors_v5aa0_1 ._swatch_v5aa0_7:hover button,._themeColorsPalette_v5aa0_1 ._swatch_v5aa0_7:hover button{opacity:1}.goto-top-button{visibility:visible;opacity:1;transition:opacity .3s,visibility 0s linear 0s}html:not([data-scroll=true]) .goto-top-button{visibility:hidden;opacity:0;transition:opacity .3s,visibility 0s linear .3s}