.key-control{bottom:10px;z-index:700;border:none;border-radius:1px}.key-control .key-control--header{border:none}.key-control--header .button--key{width:62px;height:auto;min-height:0;border:none;border-radius:0;padding:0;position:relative;display:flex;flex-direction:column-reverse}.key-control--header .button--key .icon--chevron-accordion{position:static;text-align:center;height:32px;justify-content:center;align-items:center}.key-control--header .button--key .picker__heading--key-control-button{font-size:10px;text-align:center;padding:6px 0;justify-content:center;align-items:center;background:#2a2a2a;width:100%}.key-control--header .button--key[aria-expanded=true] .picker__heading--key-control-button{display:none}.key-container{background:rgba(0,0,0,.7);color:#fff;-moz-user-select:none;-ms-user-select:none;user-select:none}.key-html-container{display:block;margin:auto;font-family:FSEmeric;width:62px;height:30vh;min-height:185px;padding:5px 0}.key-html-container>*{display:grid;grid-template-columns:auto auto;grid-auto-flow:row;grid-gap:5px;font-size:10px;line-height:1;height:100%;justify-content:center}.key-html-container>* .value{align-self:center}.key-html-container>* .swatch{display:inline-block;width:5px;height:100%}.key-html-container>* .key-section-header{grid-column:span 2;font-weight:bold;align-self:end}.key-label-container{background-color:#2a2a2a;text-align:center;padding:6px 0;font-size:10px}.key-axis line{stroke:#fff}.key-axis path{stroke:#fff}.key-axis text{fill:#fff;font-size:10px;font-weight:normal}