@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:100;src:local("Roboto Thin "),local("Roboto-Thin"),url(fonts/roboto-latin-100.woff2) format("woff2"),url(fonts/roboto-latin-100.woff) format("woff")}@font-face{font-family:Roboto;font-style:italic;font-display:swap;font-weight:100;src:local("Roboto Thin italic"),local("Roboto-Thinitalic"),url(fonts/roboto-latin-100italic.woff2) format("woff2"),url(fonts/roboto-latin-100italic.woff) format("woff")}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:300;src:local("Roboto Light "),local("Roboto-Light"),url(fonts/roboto-latin-300.woff2) format("woff2"),url(fonts/roboto-latin-300.woff) format("woff")}@font-face{font-family:Roboto;font-style:italic;font-display:swap;font-weight:300;src:local("Roboto Light italic"),local("Roboto-Lightitalic"),url(fonts/roboto-latin-300italic.woff2) format("woff2"),url(fonts/roboto-latin-300italic.woff) format("woff")}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:400;src:local("Roboto Regular "),local("Roboto-Regular"),url(fonts/roboto-latin-400.woff2) format("woff2"),url(fonts/roboto-latin-400.woff) format("woff")}@font-face{font-family:Roboto;font-style:italic;font-display:swap;font-weight:400;src:local("Roboto Regular italic"),local("Roboto-Regularitalic"),url(fonts/roboto-latin-400italic.woff2) format("woff2"),url(fonts/roboto-latin-400italic.woff) format("woff")}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:500;src:local("Roboto Medium "),local("Roboto-Medium"),url(fonts/roboto-latin-500.woff2) format("woff2"),url(fonts/roboto-latin-500.woff) format("woff")}@font-face{font-family:Roboto;font-style:italic;font-display:swap;font-weight:500;src:local("Roboto Medium italic"),local("Roboto-Mediumitalic"),url(fonts/roboto-latin-500italic.woff2) format("woff2"),url(fonts/roboto-latin-500italic.woff) format("woff")}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:700;src:local("Roboto Bold "),local("Roboto-Bold"),url(fonts/roboto-latin-700.woff2) format("woff2"),url(fonts/roboto-latin-700.woff) format("woff")}@font-face{font-family:Roboto;font-style:italic;font-display:swap;font-weight:700;src:local("Roboto Bold italic"),local("Roboto-Bolditalic"),url(fonts/roboto-latin-700italic.woff2) format("woff2"),url(fonts/roboto-latin-700italic.woff) format("woff")}@font-face{font-family:Roboto;font-style:normal;font-display:swap;font-weight:900;src:local("Roboto Black "),local("Roboto-Black"),url(fonts/roboto-latin-900.woff2) format("woff2"),url(fonts/roboto-latin-900.woff) format("woff")}@font-face{font-family:Roboto;font-style:italic;font-display:swap;font-weight:900;src:local("Roboto Black italic"),local("Roboto-Blackitalic"),url(fonts/roboto-latin-900italic.woff2) format("woff2"),url(fonts/roboto-latin-900italic.woff) format("woff")}.color-id-selector-container{border-color:#9e9e9e;border-style:solid;border-width:1px 0 0 1px;display:flex;flex-wrap:wrap;width:20em}.color-id-button-text{color:#757575}.color-id-button-text.activated{color:#424242}.color-id-button-container{align-items:center;background:transparent;border-color:#9e9e9e;border-style:solid;border-width:0 1px 1px 0;display:inline-block;display:flex;flex-direction:column;justify-content:flex-start;padding:.5em;position:relative;text-align:center;width:50%;z-index:1;transition:background-color .2s ease}.color-id-button-container:active{background:rgba(33,33,33,.1);transition:unset}.color-id-button-container:hover:after{opacity:1}.color-id-button-container:active:after{opacity:0;transition:unset}.color-id-button-container:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;box-shadow:0 2px 8px rgba(0,0,0,.3);transition:opacity .2s ease}.color-id-button-container.activated{background:#fff;z-index:2}.color-id-button-container.activated:active{background:#fafafa}.color-id-button-container.activated:hover:after{opacity:1}.color-id-button-container.activated:active:after{opacity:.6;transition:unset}.color-id-button-container.activated:after{content:"";position:absolute;width:100%;height:100%;opacity:1;box-shadow:0 3px 12px rgba(0,0,0,.3);transition:opacity .2s ease}.color-id-button-text{font-size:1.2em}.color-id-button-text:first-letter{text-transform:capitalize}.color-id-button-preview{display:flex;flex-direction:column;height:100%;width:100%}.color-id-button-preview-top{align-items:center;flex:2;justify-content:center}.color-id-button-preview-bottom{display:flex;flex:1;font-size:.8em;line-height:2em}.color-id-button-preview-bottom div{flex:1}*{box-sizing:border-box}.swatch-picker-container{border:1px solid #9e9e9e;border-left-width:0;padding:.5em}.color-button-container{width:2em;height:2em;margin-right:1px;padding:0}.color-button-container:last-child{margin:0}.swatch-picker-button{width:2em;height:2em;padding:0;position:absolute;transform:translate(0);transition-duration:.3s;transition-timing-function:ease;transition-property:all}.swatch-picker-button:hover{border-radius:1em;transition-duration:.1s;z-index:1}.swatch-picker-button:after{content:"";position:absolute;width:100%;height:100%;opacity:0;background:rgba(33,33,33,.3);transition:all .3s ease}.swatch-picker-button:hover:after{border-radius:1em}.swatch-picker-button:active:after{opacity:1;transition:unset}.swatch-picker-row{margin:1px 0;display:flex}.color-prefs-container{display:flex;border-color:#bdbdbd;border-style:solid;border-width:1px 0 0 1px}.color-prefs-label-container{display:flex;flex-wrap:wrap;width:20em}.color-prefs-picker-container{border-color:#9e9e9e;border-style:solid;border-width:0 1px 1px 0}html{font-family:Roboto,Helvetica,sans-serif;background:#e0e0e0}pre{background:#eee;margin:1em;padding:1em;min-width:30em}.code-preview-container{border:1px solid #9e9e9e;border-left-width:0}code{line-height:150%}.demo-container{width:30em;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-around}.demo-container>*{margin:.5em!important}.demo-container input{flex:1 1 100%}.tr{width:10em;height:10em;background:#00f}.app-container{display:flex;flex-direction:row;justify-content:center}.column-two{display:flex}.flex-column{display:flex;flex-direction:column;justify-content:center}p:first-letter{text-transform:capitalize}.palette-container{background:#fff;padding:.5em}