.demo-container,.demo-row,.prop,.props-container{display:flex}.demo-container,.props-container{flex-direction:column}.demo-row,.prop{flex-direction:row}.demo-row{justify-content:center;color:#fff;padding-bottom:1rem;margin-top:1rem;margin-bottom:1rem}.props-container{background-color:#fff;text-align:left;margin-left:.6rem}.prop{margin-bottom:.4rem}.prop .value{color:#000;font-size:large}.prop .name{color:#2f4f4f;font-size:large;margin-right:.3rem;margin-left:.7rem}@media (max-width:900px){.demo-row{flex-direction:column}}.hidden{display:none}.demo-label{margin-top:1rem}.box{border-radius:5px;background-color:#423c5e;padding:.5rem;margin-top:10px;color:#ff976b;outline:none}.box,.box.range{box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)}.box.range{-webkit-appearance:none;background-color:#484263;background:#484263;border:1px solid #484263;height:15px;padding:0;opacity:.9;-webkit-transition:.2s;transition:opacity .2s}.box.range::-moz-range-thumb{border-radius:50%;appearance:none;width:30px;height:30px;cursor:pointer;background:#fd6e31;border:1px solid #ff4d00}.box.range::-webkit-slider-thumb{border-radius:50%;appearance:none;width:30px;height:30px;cursor:pointer;background:#fd6e31;border:1px solid #ff4d00;box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);-webkit-appearance:none}.box.select{color:#fff;padding-right:.5rem}.box-container{text-align:center;display:flex;flex-direction:column;align-items:center;margin:1rem;overflow:hidden}.box.checkbox{border:1px solid #000;height:30px;width:30px}.box.checkbox:checked{-webkit-transition:all .2s;transition:all .2s}.border,.icon-button,.preview,.preview-screen,.previewer-container{margin:1rem}.preview,.preview-tools,.previewer-container{display:flex}.previewer-container{box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);background-color:#282c34}.preview,.previewer-container{flex-direction:column;border-radius:7px}.previewer-label{color:#fff;padding:1rem 1.5rem .5rem;font-size:20px;-webkit-font-smoothing:antialiased}.previewer-header{margin-top:3rem;margin-bottom:1rem;font-size:xx-large;text-align:center}.preview-screen{padding-top:1rem}.preview{padding-bottom:1rem}.preview-tools{flex-direction:row;text-align:left}.icon-button{-webkit-appearance:none;background-color:transparent;border:0;outline:none;width:40px;height:40px;text-align:center;border-radius:9999px}.icon-button:hover .fill{fill:#5e6e8f;transition:.2s}@media (max-width:650px){.previewer-label{font-size:18px}}@media (max-width:400px){.previewer-label{font-size:16px}}