@font-face {
    font-family: 'MyWebFont';
    src: url('../fonts/FontFPD.eot'); /* IE9 Compat Modes */
    src: url('../fonts/FontFPD.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/FontFPD.woff') format('woff'), /* Pretty Modern Browsers */
        url('../fonts/FontFPD.ttf')  format('truetype'), /* Safari, Android, iOS */
        url('../fonts/FontFPD.svg#svgFontName') format('svg'); /* Legacy iOS */
}
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }

body{ font-family: arial; margin:0; padding: 0; color:#000; font-size: 14px; background: #fff;}
.box-wrp{width: 580px;margin: 10px auto;border: 1px solid #ccc;padding: 10px 40px  40px  40px ; position:relative;}
.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;}
.box-wrp .btn{ cursor:pointer; padding: 6px 20px;display: inline-block;border: 1px solid #ff9800;border-radius: 20px;color: #000;text-decoration: none;font-size: 14px;}
.place-order{ cursor:pointer; font-weight: bold; padding: 6px 20px;display: inline-block;border: 1px solid #ff9800;border-radius: 20px;color: #000;text-decoration: none;font-size: 14px; margin: 20px 10px 10px 0;}
.co-sp{ font-size: 14px; font-weight: bold; display: inline-block;}
.color-set{border-bottom: 2px solid #ccc;padding: 0 0 10px 0; clear: both; background: #efefef;border-radius: 5px;}
.color-set h3{ margin: 20px 0; }
.canvas-container{ margin: 0 auto;}
.upload-btn-wrapper {
    position: relative;
    display: inline-block;
    overflow: hidden; float: left;
}

.btn {
    border: 2px solid gray;
    color: gray;
    background-color: white;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 20px;
    font-weight: bold;
}

.upload-btn-wrapper input[type=file] {
    font-size: 100px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}
.wrp-cus{ float: left; width: 100%; margin: 20px 0; text-align: center; }
.wrp-cus .upload-btn-wrapper{  margin-right: 8px; margin-left: 0;}
.wrp-cus .text-box{ display: inline-block; float: left; margin-right: 10px; }
.family-box{ width: 100%; float: left; background: #efefef;padding: 12px;border-radius: 5px;margin: 0 0 20px 0;}
.family-box button {background: #fff;color: rgba(0,0,0,.8);margin-right: 12px;height: 40px;padding: 12px 0;text-align: center;min-width: 40px;font-size: 16px;border-radius: 4px;cursor: pointer;line-height: 1; border: none;}
.family-box select{padding: 3px 10px;border-radius: 10px;border: 1px solid #ccc;overflow: hidden;}
.canvas-container{ width: 100% !important; height: 400px !important;}
.canvas-container canvas{ width: 100% !important; height: 370px !important;}
.cawrp{ width: 350px; margin: 0 auto;}
.field-box{ width: 100%; float: left;}
.field-box .left-frm{ width: 49%; float: left; padding: 10px; box-sizing: border-box; background: #ccc; margin-right: 1%;}
.field-box .right-frm{ width: 50%; float: left; padding: 10px; box-sizing: border-box; background: #ccc;}
.field-box .fields{ margin: 10px 0;}
.field-box .fields label{ margin-right: 15px; display: inline-block;}
.form-box .qty{ margin: 10px 0;width: 190px;padding: 4px;border: 1px solid #ccc;}
.fields input { padding: 5px; border: 1px solid #ccc;}

.text-input{ display: none; position: absolute;top: 0;background: #fff;z-index: 9;padding: 10px;width: 100%; left: 0;}
.text-input.opn{ display: block;}
.text-input textarea{ padding: 10px;}
.text-input button{background: #333;border: none;padding: 10px 20px;color: #fff;font-size: 16px;border-radius: 3px;margin: 10px 0;}
.family-box.active{position: fixed;width: 578px;bottom: -19px;margin-left: -40px;z-index: 9; }

#bold:before{font-family: "MyWebFont";content: "\e60e";}
#italic:before{font-family: "MyWebFont";content: "\e611";}
.underline:before{font-family: "MyWebFont";content: "\e60f";}
.family-box .color-picker{width: 50px;margin: 0 13px 0 0;padding: 0;float: left; background: none;border: none;}
.family-box .color-picker #text-spectrum{ position: absolute;width: 250px;padding: 10px; bottom: 100%;}
.family-box .color-picker #text-color{ height: 38px;}



@media (max-width: 767px){
    .box-wrp{ width: 92%;}
    .wrp-cus{ text-align: center;}
    .wrp-cus .upload-btn-wrapper{ margin: 0;float: none;}
    .wrp-cus .text-box{ float: none;}
    .family-box button{ margin: 5px;}
    .co-sp{ display: block; margin: 10px 0 0 0 !important;}
    .box-wrp{ padding: 20px;}
    .family-box{ display: none;}
    .family-box.active{ display: block;}
    .box-wrp .btn{ font-size: 12px;float: left; padding: 6px 10px;}
    .wrp-cus .text-box{ margin: 0;}
    .field-box .left-frm{ margin: 0; width: 100%;}
    .field-box .right-frm{ width: 100%;}
    /*body .color-set {border-bottom: 2px solid #ccc; padding: 0 0 10px 0; clear: both;position: fixed; bottom: 0; z-index: 99; background: #fff; width: 100%;  left: 0;    padding: 20px;}*/
    .co-sp{ display: inline-block; margin: 10px 0 0 30px !important;}
    /*body .color-picker { padding: 11px; border: none; border-radius: 4px; position: fixed; width: 100%; left: 0; bottom: 70px; background: #fff; margin: 0; box-sizing: border-box;}*/
    .back-sp{ font-size: 12px; color: #999; display: inline-block; margin-bottom: 5px; cursor: pointer;}
    .cawrp { width: 270px; margin: 0 auto;}
    .canvas-container { width: 100% !important; height: 300px !important;}
    .canvas-container canvas{ width: 100% !important; height: 286px !important;}
    .color-multi #colorful{ opacity: 0; }
    .color-multi .silver-sp:before{content: "\e93e";font-family: "MyWebFont"; color: #b02222; padding-right: 7px;}
    .layer:after{background: rgba(0,0,0,.3);content: "";position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 1;}
    .close-sp{float: right;display: inline-block;padding: 0 0 10px 0; cursor: pointer;}
}