.box-wrp,.button:active,.cawrp,.wrp-cus{position:relative}.button,.family-box #bold::before,.text-color-icon,.text-input textarea,body{font-family:Arial,sans-serif}@font-face{font-family:MyWebFont;src:url('../fonts/FontFPD.eot');src:url('../fonts/FontFPD.eot?#iefix') format('embedded-opentype'),url('../fonts/FontFPD.woff') format('woff'),url('../fonts/FontFPD.ttf') format('truetype'),url('../fonts/FontFPD.svg#svgFontName') format('svg')}body{margin:0;padding:0;background:#fff;color:#000;font-size:14px}*{box-sizing:border-box}.box-wrp{width:818px;max-width:100%;margin:10px auto;padding:10px 40px 20px;border:1px solid #ccc}.cawrp{width:min(700px,calc(100vw - 20px),calc(100dvh - 130px));aspect-ratio:1/1;margin:0 auto}.canvas-container,.canvas-container canvas{width:100%!important;height:100%!important}.canvas-container canvas{display:block;background:0 0!important}.button{display:inline-flex;align-items:center;justify-content:center;padding:11px 14px;border:1px solid #4e6096;border-radius:3px;background:linear-gradient(to bottom,#7892c2 5%,#476e9e 100%);box-shadow:inset 0 -3px 7px 0 #9fb4f2;color:#fff;font-size:17px;line-height:1;text-decoration:none;text-shadow:0 1px 0 #283966;cursor:pointer}.button:hover{background:linear-gradient(to bottom,#476e9e 5%,#7892c2 100%)}.button:active{top:1px}.button i,.button svg{pointer-events:none}#linkToImage .button,.button.icon-button{width:52px;height:52px;padding:0}.place-order{margin:0}#lnkDownload{gap:5px}#lnkDownload:disabled{opacity:.4;cursor:not-allowed}.wrp-cus{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:5px;width:100%;margin:20px 0 10px;z-index:20}.wrp-cus .upload-btn-wrapper{position:relative;display:inline-flex;flex:0 0 auto;margin:0;overflow:hidden}.upload-btn-wrapper input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.wrp-cus .text-box{display:inline-block;margin:0}#linkToImage{position:absolute;top:12px;right:12px;z-index:100}#linkToImage .button i,#linkToImage .button svg{font-size:24px}.text-input{display:none;position:absolute;top:0;left:0;width:100%;padding:10px;background:#fff;z-index:1100}.font-picker.open .font-picker-options,.text-input.opn{display:block}.text-input textarea{width:100%;min-height:150px;padding:10px;font-size:16px;line-height:1.4}.text-input button{margin:10px 0;padding:10px 20px;border:none;border-radius:3px;background:#333;color:#fff;font-size:16px;cursor:pointer}.close-sp{float:right;display:inline-block;padding:0 0 10px;cursor:pointer}.layer:after{content:"";position:fixed;inset:0;background:#fff;z-index:1000}.family-box{display:none;padding:12px;background:#efefef;border-radius:5px}.family-box.active{display:flex!important;align-items:center;justify-content:center;flex-wrap:nowrap;gap:10px;position:fixed;left:50%;bottom:110px;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 20px);margin:0;padding:10px 12px;z-index:999999}.family-box>#bold,.family-box>#italic,.family-box>.underline{flex:0 0 auto;min-width:40px;width:40px;height:40px;margin:0;padding:0;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:4px;background:#fff;color:rgba(0,0,0,.8);font-size:16px;line-height:1;cursor:pointer}.family-box #bold::before{content:"B";font-weight:700}.family-box #italic::before{content:"I";font-family:Georgia,serif;font-weight:700;font-style:italic}.family-box .underline::before{content:"U";font-family:Arial,sans-serif;font-weight:700;text-decoration:underline}.family-box .color-picker{position:relative;width:52px;min-width:52px;flex:0 0 52px;margin:0;padding:0;border:0;background:0 0}.family-box .text-color-button{width:52px;min-width:52px;height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 8px;border:0;border-radius:4px;background:#fff;color:#000;cursor:pointer}.text-color-icon{font-size:20px;font-weight:700;line-height:20px}.text-color-indicator{display:block;width:22px;height:4px;margin-top:2px;background:silver;border-radius:1px}#text-luminosity,.family-box .color-picker #text-color{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}.family-box .color-picker #text-spectrum{position:absolute;left:0;bottom:calc(100% + 10px);width:250px;padding:0;z-index:1200}.font-picker{position:relative;width:180px;flex:0 0 180px}.family-box .font-picker-selected{width:100%;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border:1px solid #ccc!important;border-radius:10px!important;background:#fff!important;color:#000!important;font-size:16px!important;cursor:pointer}.font-picker-options{display:none;position:absolute;left:0;bottom:calc(100% + 6px);width:220px;max-height:330px;overflow-y:auto;padding:6px;background:#fff;border:1px solid #ccc;border-radius:10px;box-shadow:0 4px 15px rgba(0,0,0,.2);z-index:9999999}.color-set,.font-picker-options button:hover{background:#efefef}.font-picker-options button{display:block;width:100%;height:auto;margin:0;padding:9px 12px;border:0;border-radius:5px;background:#fff;color:#000;text-align:left;font-size:18px;line-height:1.3;cursor:pointer}.co-sp{display:inline-block;font-size:14px;font-weight:700}.color-set{clear:both;padding:0 0 10px;border-bottom:2px solid #ccc;border-radius:5px}.color-set h3{margin:20px 0}.canvas-color-picker{z-index:2147483647}#draggable{width:100px;height:100px;padding:.5em;float:left;margin:10px 10px 10px 0}#droppable{width:150px;height:150px;padding:.5em;float:left;margin:10px}.top-action{position:absolute;top:10px;right:10px}.top-action img{margin:0 10px}.box-wrp .action{text-align:center}.box-wrp .btn.f-btn{margin-right:50px}.btn{padding:8px 20px;border:2px solid gray;border-radius:8px;background-color:#fff;color:gray;font-size:20px;font-weight:700}.field-box{width:100%;float:left}.field-box .left-frm{width:49%;float:left;padding:10px;margin-right:1%;background:#ccc}.field-box .right-frm{width:50%;float:left;padding:10px;background:#ccc}.field-box .fields{margin:10px 0}.field-box .fields label{display:inline-block;margin-right:15px}.form-box .qty{width:190px;margin:10px 0;padding:4px;border:1px solid #ccc}.fields input{padding:5px;border:1px solid #ccc}@media (max-width:767px){.back-sp,.co-sp{display:inline-block}.box-wrp{width:100%;max-width:100%;padding:10px}.text-input textarea{min-height:100px;font-size:18px}.wrp-cus{gap:4px;margin:15px 0 10px}.button{padding:10px 12px;font-size:16px}#linkToImage .button,.button.icon-button{width:48px;height:48px;padding:0}.family-box.active{gap:6px;max-width:calc(100vw - 10px);padding:8px}.family-box>#bold,.family-box>#italic,.family-box>.underline{width:38px;min-width:38px;height:38px}.family-box .color-picker{width:50px;min-width:50px;flex-basis:50px}.family-box .text-color-button{width:50px;min-width:50px;height:38px}.font-picker{width:170px;flex-basis:170px}.family-box .font-picker-selected{height:38px;padding:0 12px;font-size:16px!important}.font-picker-options{width:210px;max-height:300px}.font-picker-options button{padding:8px 10px;font-size:17px}.co-sp{margin:10px 0 0 30px!important}.back-sp{margin-bottom:5px;color:#999;font-size:12px;cursor:pointer}.color-multi #colorful{opacity:0}.color-multi .silver-sp::before{content:"\e93e";padding-right:7px;color:#b02222;font-family:MyWebFont}.field-box .left-frm,.field-box .right-frm{width:100%;margin:0}}