@charset "UTF-8";.CssGenerator .Home{padding:16px 16px 32px;color:#282828}.CssGenerator .Home p.Home-CustomStyle{margin:0 0 .7em;line-height:1.7}.CssGenerator .Home a.Home-CustomStyle{text-decoration:none;color:#07c}.CssGenerator .Home a.Home-CustomStyle:hover,.CssGenerator .Home a.Home-CustomStyle:active{text-decoration:underline;color:#09e}.CssGenerator .Home-contents{margin:0 12px}.CssGenerator .Home-howto{margin:0 0 32px}.CssGenerator .Home-howto_lead{margin:0 0 32px!important}.CssGenerator .Home-usageImg{display:block;margin:12px auto}.CssGenerator .Home-howtoImg{display:block;margin:8px}.CssGenerator .Home .LoadStyleForm-input{padding-left:8px;padding-right:8px;height:36px}.CssGenerator .Home .LoadStyleForm-button{padding:0 24px;font-size:14px;height:36px}.CssGenerator .Home .LoadStyleForm-Message{margin:0 0 8px;padding:6px;font-size:16px}.CssGenerator .Home-footnotes{font-size:15px;color:#444}.CssGenerator .LoadStyleForm-input,.CssGenerator .LoadStyleForm-button{height:30px}.CssGenerator .LoadStyleForm-Message{height:20px;padding:4px 0 8px;font-size:14px;font-weight:700}.CssGenerator .LoadStyleForm-Message.LoadStyleForm-Message_success{color:#45b72f}.CssGenerator .LoadStyleForm-Message.LoadStyleForm-Message_error{color:red}.Note{padding-left:1em;text-indent:-1em;margin-bottom:.35em}.CssGenerator .Menu{color:#282828;padding:0}.CssGenerator .Menu-title{margin:10px;padding:2px;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;border:solid 2px #999;border-radius:6px}.CssGenerator .Menu-title span{display:block;font-size:16px;line-height:2.5;background:rgb(250,250,250);border:solid 1px #bbb;border-radius:4px}.CssGenerator .Menu .List{border-top:solid 1px #e6e6e6;border-bottom:solid 1px #e6e6e6}.CssGenerator .Menu .List .MenuHeader{display:block;padding:0 12px;font-size:16px;font-weight:700;line-height:2.5;border-bottom:solid 1px #e6e6e6;background-color:#f0f0f0}.CssGenerator .Menu .List .MenuItem-link{display:block;text-decoration:none;padding:0 18px;color:#07c;font-size:13.5px;font-weight:700;line-height:2.7;border-bottom:solid 1px #e6e6e6}.CssGenerator .Menu .List .MenuItem-link:hover{background-color:#e4f3ff}.CssGenerator .Menu .List .MenuItem-link_active{color:#282828;background-color:#cce8ff}.CssGenerator .Menu .List .MenuItem:nth-child(odd) .MenuItem-link{background:#fcfcfc}.CssGenerator .Menu .List .MenuItem:nth-child(odd) .MenuItem-link:hover{background-color:#e4f3ff}.CssGenerator .Menu .List .MenuItem:nth-child(odd) .MenuItem-link_active{color:#282828;background-color:#cce8ff}.CssGenerator .Menu .List .Menu-GenerateBtn-list{margin:12px 8px}.CssGenerator .Layout{display:-webkit-box;display:-ms-flexbox;display:flex}.CssGenerator .Layout-Menu{width:275px;min-width:275px;height:100%;border-right:3px solid #eee}.CssGenerator .Layout-Main{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;min-width:640px;height:100%;overflow-y:auto}.Toggle{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;height:24px}.Toggle .Toggle-btn{width:38px;height:20px;background:#ccc;position:relative;display:inline-block;border-radius:25%/50%;-webkit-transition:.3s;-o-transition:.3s;transition:.3s;-webkit-box-sizing:border-box;box-sizing:border-box;margin:auto 8px auto 0}.Toggle .Toggle-btn:after{content:"";position:absolute;width:20px;height:20px;border-radius:100%;left:0;top:0;z-index:2;background:#fff;-webkit-box-shadow:0 0 4px rgba(0,0,0,.25);box-shadow:0 0 4px #00000040;-webkit-transition:.4s;-o-transition:.4s;transition:.4s;cursor:pointer}.Toggle .Toggle-btn .Toggle-input{display:none}.Toggle .Toggle-btn_checked{background-color:#09e}.Toggle .Toggle-btn_checked:after{left:20px}.CssGenerator .CustomizePage-toggle{margin:0 0 8px;padding:6px 0 0}.CssGenerator .CustomizePage-content{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;padding:16px 16px 32px}.CssGenerator .CustomizePage-contentOverlay{position:absolute;inset:0;z-index:10;background:rgba(0,0,0,.4)}.CssGenerator .CustomizePage-Paginator{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin:16px 0 210px}.CssGenerator .CustomizePage-TipsButton{margin:0 0 4px;padding-left:12px;padding-right:12px}.CssGenerator .CustomizePage-TipsButton:before{content:"";display:inline-block;height:14px;width:14px;-webkit-mask:url(/assets/svg/tools/css-generator/information.svg?0a0dfb3) no-repeat 50% 50%;mask:url(/assets/svg/tools/css-generator/information.svg?0a0dfb3) no-repeat 50% 50%;-webkit-mask-size:cover;mask-size:cover;background:#fff;vertical-align:bottom;margin-right:4px}.CssGenerator .Preview{width:375px;height:500px;border:1px solid #cccccc;background:#fff}.CssGenerator .PreviewWrap{height:calc(100% - 48px);padding:16px}.CssGenerator .PreviewWrap-heading{margin:0 0 16px;padding:12px 16px 10px;color:#fff;font-size:20px;line-height:1.5;background:#589fbe;border-radius:6px}.CssGenerator .PreviewWrap-wrap{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:calc(100% - 46px);margin:0 16px;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.CssGenerator .PreviewWrap-main{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:600px}.CssGenerator .PreviewWrap-preview{min-width:390px;padding-left:15px;-webkit-box-sizing:border-box;box-sizing:border-box}.CssGenerator .PreviewWrap-previewContainer{position:sticky;top:0}.CssGenerator .InputGroup{display:-webkit-box;display:-ms-flexbox;display:flex;padding:6px 8px;border-bottom:1px solid #ccc}.CssGenerator .InputGroup .InputGroup-label{min-width:150px}.CssGenerator .InputGroup .InputGroup-body{-webkit-box-flex:1;-ms-flex:1;flex:1}.CssGenerator .AdvancedBorderInputGroup{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.CssGenerator .AdvancedBorderInputGroup-input{-webkit-box-flex:1;-ms-flex:1;flex:1}.CssGenerator .AdvancedBorderInputGroup-toggle{margin-left:16px;width:180px}.CssGenerator .AdvancedBorderInputGroup-table{width:100%;min-width:236px;max-width:300px;table-layout:fixed}.CssGenerator .AdvancedBorderInputGroup-inputTd{text-align:center}.CssGenerator .AdvancedBorderInputGroup-inputTd_left{text-align:left}.CssGenerator .AdvancedBorderInputGroup-inputTd_right{text-align:right}.CssGenerator .AdvancedBorderInputGroup-inputTd .Input{vertical-align:middle}.CssGenerator .RadioInputGroup .RadioInputGroup-List_unstyled .RadioInputGroup-ListItem{margin-bottom:12px}.CssGenerator .RadioInputGroup .RadioInputGroup-List .RadioInputCustomStyle{margin-right:16px}.CssGenerator .RadioInputGroup .RadioInputGroup-List .RadioInputGroup-ListItem label{cursor:pointer}.CssGenerator .RadioInputGroup .RadioInputGroup-List .Input_radio{position:relative;top:2px;cursor:pointer}.ColorPicker{display:inline-block;position:relative}.ColorPicker-Input{width:50px;height:25px}.ColorPicker-Popup{position:relative}.ColorPicker-Popup-overlay:before{content:" ";position:fixed;inset:0;cursor:default;background:transparent;z-index:100}.ColorPicker-Popup-container{position:absolute;top:5px;background:#fff;z-index:101;width:448px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);box-shadow:0 1px 2px #0003}.ColorPicker-Popup-container_center{margin-left:-199px;border-radius:5px}.ColorPicker-Popup-container_center:before{content:"";position:absolute;left:50%;top:-9px;display:block;height:9.6px;width:16.8px;margin-left:-8.4px;background:url(/assets/svg/other/fukidashi.svg?0a0dfb3) no-repeat}.ColorPicker-Popup-container_left{margin-left:0;border-radius:5px}.ColorPicker-Popup-container_left:before{content:"";position:absolute;left:25px;top:-9px;display:block;height:9.6px;width:16.8px;margin-left:-8.4px;background:url(/assets/svg/other/fukidashi.svg?0a0dfb3) no-repeat}.ColorPicker-Popup-container_right{margin-left:-398px;border-radius:5px}.ColorPicker-Popup-container_right:before{content:"";position:absolute;right:25px;top:-9px;display:block;height:9.6px;width:16.8px;margin-right:-8.4px;background:url(/assets/svg/other/fukidashi.svg?0a0dfb3) no-repeat}.ColorPicker-Popup-inputGroup{padding:0 16px 16px;text-align:center}.ColorPicker-Popup-input,.ColorPicker-Popup-button{height:30px}.ColorPicker-Picker{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-sizing:border-box;box-sizing:border-box;padding:16px;width:448px}.ColorPicker-HexPicker{width:200px}.ColorPicker-ListPicker{padding:0;width:200px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.ColorPicker-ListPickerItem{display:inline-block;margin:0 4px 4px 0}.ColorPicker-ListPickerItem-btn{width:20px;height:20px;border:1px solid #e6e6e6}.ColorPicker-ListPickerItem-btn_active{border-color:#09e;-webkit-box-shadow:0 0 1px #fff inset,0 0 1px #fff inset,0 0 1px #fff inset,0 0 1px #fff inset,0 0 1px #fff inset;box-shadow:0 0 1px #fff inset,0 0 1px #fff inset,0 0 1px #fff inset,0 0 1px #fff inset,0 0 1px #fff inset;background-repeat:no-repeat;background-position:center center;background-image:url(/assets/svg/icon/checkmark_blue.svg?0a0dfb3);background-size:14px 14px}.CssGenerator .PresetDesignItem{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;gap:0 12px;margin-bottom:16px}.CssGenerator .PresetDesignItem .Button{margin-top:6px;padding-left:12px;padding-right:12px}.CssGenerator .PresetDesignList{margin-bottom:16px}.CssGenerator .Generate{padding:16px 16px 0}.CssGenerator .Generate .PreviewWrap-main{padding-bottom:32px}.CssGenerator .Generate p.Generate-customStyle{margin:0 0 .7em;line-height:1.7}.CssGenerator .Generate .Generate-CssOutput{position:relative;height:400px;margin:0 12px 16px}.CssGenerator .Generate .Generate-CssOutput_loading{-webkit-box-sizing:border-box;box-sizing:border-box;height:400px;width:100%;border:1px solid #e6e6e6}.CssGenerator .Generate .Generate-CssOutput_error{margin:0 0 16px;padding:12px;color:#e00;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#fee;border:solid 1px #e00;-webkit-box-shadow:0 0 2px rgba(240,0,0,.5) inset;box-shadow:0 0 2px #f0000080 inset}.CssGenerator .Generate .Generate-CssOutput-textarea{-webkit-box-sizing:border-box;box-sizing:border-box;height:400px;width:100%;overflow:auto;padding:8px;border:1px solid #e6e6e6}.CssGenerator .Generate .Generate-CssOutput-textarea::-webkit-scrollbar{overflow:hidden;border-radius:3px}.CssGenerator .Generate .Generate-CssOutput-textarea::-webkit-scrollbar:horizontal{height:8px}.CssGenerator .Generate .Generate-CssOutput-textarea::-webkit-scrollbar:vertical{width:8px}.CssGenerator .Generate .Generate-CssOutput-textarea::-webkit-scrollbar-button{display:none}.CssGenerator .Generate .Generate-CssOutput-textarea::-webkit-scrollbar-thumb{overflow:hidden;background:#c1c1c1}.CssGenerator .Generate .Generate-CssOutput-textarea::-webkit-scrollbar-track{background:#ffffff}.CssGenerator .Generate .Generate-CssOutput-textarea::-webkit-scrollbar-corner{display:none}.CssGenerator .Generate .Generate-CssOutput .Generate-CopyButton{position:absolute;top:0;right:0}.CssGenerator .Generate .Generate-CssOutput .Generate-CopyButton_copied:before{content:"";display:inline-block;height:14px;width:14px;-webkit-mask:url(/assets/svg/tools/css-generator/check.svg?0a0dfb3) no-repeat 50% 50%;mask:url(/assets/svg/tools/css-generator/check.svg?0a0dfb3) no-repeat 50% 50%;-webkit-mask-size:cover;mask-size:cover;background:#fff;vertical-align:middle;margin-right:4px}.CssGenerator .Generate-howto{display:block;margin:0 12px 16px}.CssGenerator .Generate-howtoImg{display:block;margin:8px}.CssGenerator{margin-top:2px;background:#fff;height:calc(100vh - 40px)}