body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}*{padding:0;margin:0;list-style:none;border:none;box-sizing:border-box;outline:0;text-decoration:none}#root,body,html{height:100%}#root{display:flex}.sidebar{width:320px;min-width:320px;border-right:1px solid #ddd;padding:25px}.sidebar .logo{margin-bottom:25px;display:flex;align-items:center}.sidebar .logo a{display:flex;align-items:center;justify-content:space-between;font-size:25px;color:#333}.sidebar .logo a img{margin-right:8px}.sidebar .logo a:hover{color:#0099e5}.sidebar .description{font-size:15px;line-height:1.7;color:#888;margin-bottom:25px}.sidebar .menu ul li a{display:block;font-size:18px;color:#111;font-weight:700;cursor:pointer}.sidebar .menu ul li a:hover{color:#0099e5}.sidebar hr{margin:15px 0;height:1px;background:#e0e0e0}.sidebar .external-link span{display:block;color:#111;margin-bottom:6px;font-size:14px}.sidebar .external-link p{color:#aaa;font-size:13px}.sidebar .external-link:hover p{color:#0099e5}.about-modal{max-width:720px;background-color:#fff;box-shadow:0 0 15px 5px rgba(0,0,0,.1);padding:50px;position:relative}.about-modal h3{font-size:25px;margin-bottom:25px}.about-modal p{font-size:16px;line-height:1.8;margin-bottom:15px;color:#555}.about-modal .modal-close-btn{position:absolute;top:15px;right:15px;width:30px;height:30px;cursor:pointer}.about-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.copied{position:fixed;bottom:20px;right:30px;background-color:var(--bgColor);color:var(--textColor);padding:10px 15px;border-radius:3px;font-size:13px;z-index:9999}.content{flex:1 1;overflow:auto;display:flex;flex-direction:column}.content .header{height:60px;border-bottom:1px solid #ddd;display:flex;position:-webkit-sticky;position:sticky;top:0;z-index:999;background-color:#fff;align-items:center;justify-content:space-between}.content .header .search{flex:1 1;position:relative}.content .header .search .icon{position:absolute;top:0;left:0;width:60px;height:100%;display:flex;justify-content:center;align-items:center}.content .header .search .icon svg{width:20px;height:20px}.content .header .search input{width:100%;height:100%;font-size:16px;padding:0 20px 0 60px}.content .header .back-btn{background:transparent;margin-left:20px;font-weight:500;font-size:20px;color:#444;display:flex;align-items:center}.content .header .back-btn svg{margin-right:8px;display:block;font-size:18px}.content .header .back-btn:hover{color:#999}.content .header .back-btn:hover path{stroke:#999}.content .header .download{padding-right:25px;cursor:pointer;display:flex;justify-content:center;align-items:center}.content .header .download .actions{display:flex;margin-right:15px}.content .header .download .actions a,.content .header .download .actions button{height:30px;width:40px;background-color:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer}.content .header .download .actions a svg,.content .header .download .actions button svg{height:20px;width:18px;color:#999}.content .header .download .actions a svg:hover,.content .header .download .actions button svg:hover{color:#333}.content .header .download .actions select{height:30px;padding:0 10px 0 15px;box-shadow:0 0 4px 0 rgba(0,0,0,.1);color:#999;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;margin:0 10px;border-radius:3px;transition:all .15s ease-out}.content .header .download .actions select:hover{color:#333;box-shadow:0 0 4px 1px rgba(0,0,0,.3)}.content .header .download .selected{font-size:13px;font-weight:500;color:#999;display:flex;align-items:center;justify-content:center}.content .header .download .selected svg{font-size:30px;margin-right:5px}.content .header .download .selected:hover{color:#333}.content .brands{height:calc(100% - 60px);width:100%}.content .brands .brand{border:1px solid #ccc;background-color:#fff;padding:15px;margin:10px 15px}.content .brands .brand h5{font-size:18px;margin-bottom:10px;cursor:pointer}.content .brands .brand-colors{display:flex}.content .brands .brand-colors span{cursor:pointer;background-color:var(--bgColor);height:40px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;color:var(--textColor);text-indent:-9999px;width:60px;box-shadow:0 0 5px 0 rgba(0,0,0,.1);margin-right:10px}.content .brands .brand-colors span svg{font-size:22px;display:none}.content .brands .brand-colors span:hover svg{display:block}.content .brands .brand.selected{border-color:red}.content .brands .brand.selected .brand-colors span{flex:1 1}.content .brands .brand.selected .brand-colors span:hover{text-indent:5px}.content .brands .brand.selected .brand-colors span:hover svg{display:block}
/*# sourceMappingURL=main.00ec284e.chunk.css.map */