.box-layout[data-v-0279c8d5]{width:100%;min-width:400px;text-align:center;background:#fff;padding:10px;border-radius:10px;-webkit-box-shadow:0 4px 8px rgba(0,0,0,.1);box-shadow:0 4px 8px rgba(0,0,0,.1)}.box-layout .box-header h1[data-v-0279c8d5]{font-size:20px;background-color:#9050b1;color:#fff;margin:0 0 10px;padding:10px;border-radius:5px}.box-layout .tabs[data-v-0279c8d5]{margin-top:5px;margin-bottom:10px}.tab-button[data-v-0279c8d5]{padding:10px 20px;margin:0 10px;cursor:pointer;border:none;background-color:#f0f0f0;border-radius:5px;-webkit-transition:background-color .3s ease;transition:background-color .3s ease}.tab-button.active[data-v-0279c8d5],.tab-button[data-v-0279c8d5]:hover{background-color:#9050b1;color:#fff}.grid[data-v-0279c8d5]{margin-top:5px}.grid .grid-col[data-v-0279c8d5]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.cell[data-v-0279c8d5]{-webkit-box-flex:1;-ms-flex:1;flex:1;text-align:center;position:relative;margin:7px 0;height:45px;display:ruby-text}.cell.oneType[data-v-0279c8d5]{height:auto}.box-circle-wrapper[data-v-0279c8d5]{position:relative;display:inline-block}.box-circle[data-v-0279c8d5]{width:40px;height:40px;line-height:40px;background-color:#5daf34;color:#333;text-align:center;cursor:pointer;border:2px solid #ccc;-webkit-transition:background-color .3s ease,-webkit-transform .3s ease;transition:background-color .3s ease,-webkit-transform .3s ease;transition:background-color .3s ease,transform .3s ease;transition:background-color .3s ease,transform .3s ease,-webkit-transform .3s ease;display:inline-block;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.box-circle.oneType[data-v-0279c8d5]{width:200px;height:200px;line-height:200px}.box-circle.isUsing[data-v-0279c8d5]{background-color:orange}.box-circle.filled[data-v-0279c8d5]{background-color:red}.box-circle.needAdd[data-v-0279c8d5]{background-color:#00f}.box-circle-wrapper.selected-outline[data-v-0279c8d5]:after{content:"";position:absolute;top:-4px;left:-4px;width:48px;height:48px;border:2px solid #9050b1}.box-circle-wrapper.transferred-overlay[data-v-0279c8d5]:after{content:attr(data-index);position:absolute;top:50%;left:50%;width:48px;height:48px;background-color:rgba(144,80,177,.6);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transition:background-color .3s ease;transition:background-color .3s ease;pointer-events:none;color:#fff;font-size:16px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.box-circle-wrapper.isOneType-outline.transferred-overlay[data-v-0279c8d5]:after{width:220px;height:220px}.box-circle-wrapper.isOneType-outline.selected-outline[data-v-0279c8d5]:after{top:-10px;left:-10px;width:220px;height:220px}.item-code[data-v-0279c8d5]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#fff;font-size:small}.progress-bar[data-v-0279c8d5]{height:5px;width:80%;margin:5px;border-radius:3px;-webkit-transition:width .3s ease,background-color .3s ease;transition:width .3s ease,background-color .3s ease}