body{
    margin: 0;
    padding: 0;
    cursor: auto;
}
img {
    max-width: 100%;
    height: auto;
}
/*jquery ui*/
.addNCanvas{
    padding: 5px 15px;
    color: #fff;
    cursor: context-menu;
}

.bDesignDetail-sidebar .wrap_components .ctn_t_03 .bFlx .addNCanvas {
    width: auto; 
    height: 200px; 
    margin-right: 10px;
}
.oldBoxColor {
    width: 30px;
    height: 30px;
    margin-right: 5px;
    border: 1px solid white;
}

.oldBoxColor .a-color-picker {
    position: relative;
    top: 30px;
}

div#toolbar_image_edit {
    position: relative;
}

div#boxEditColorSvg {
    position: absolute;
    top: 33px;
    z-index: 99999;
}
.draggable_image_ui.ui-resizable.ui-draggable.ui-draggable-handle {
    line-height: 0;
}
div#control_drap_resize_ui {
    border: 1px solid #00a8ff;
    position: absolute;
    z-index: 99999;
}
.canvas-content {
    box-shadow: 0px 1px 10px 4px rgb(255 1 25 / 10%);
}
.canvas-content > .ui-resizable-s {
    cursor: s-resize;
    height: 35px;
    width: 35px;
    bottom: -17px;
    left: calc(50% - 17px);
    background: rgb(237 177 2 / 70%);
    border-radius: 50%;
}

.map_popup {
    z-index: 214748364!important;
}

.canvas-content > .ui-resizable-n {
    cursor: n-resize;
    height: 35px;
    width: 35px;
    top: -17px;
    left: calc(50% - 17px);
    background: rgb(237 177 2 / 70%);
    border-radius: 50%;
}

.ui-resizable-e {
    cursor: e-resize;
    width: 10px;
    right: -5px;
    top: calc(50% - 5px);
    height: 10px;
    background: #00a8ff;
}

.ui-resizable-w {
    cursor: w-resize;
    width: 10px;
    left: -5px;
    top: calc(50% - 5px);
    height: 10px;
    background: #00a8ff;
}

.ui-resizable-s {
    cursor: s-resize;
    height: 10px;
    width: 10px;
    bottom: -5px;
    left: calc(50% - 5px);
    background: #00a8ff;
}

.ui-resizable-n {
    cursor: n-resize;
    height: 10px;
    width: 10px;
    top: -5px;
    left: calc(50% - 5px);
    background: #00a8ff;
}

.ui-resizable-se {
    cursor: se-resize;
    width: 10px;
    height: 10px;
    right: -5px;
    bottom: -5px;
    background: #00a8ff;
}

.ui-resizable-ne {
    cursor: ne-resize;
    width: 10px;
    height: 10px;
    right: -5px;
    top: -5px;
    background: #00a8ff;
}
.ui-resizable-nw {
    cursor: nw-resize;
    width: 10px;
    height: 10px;
    left: -5px;
    top: -5px;
    background: #00a8ff;
}
.ui-resizable-sw {
    cursor: sw-resize;
    width: 10px;
    height: 10px;
    left: -5px;
    bottom: -5px;
    background: #00a8ff;
}
.ui-resizable-0 {
    width: 100%;
    height: 0;
    left: 0;
    top: 0;
    border-top: 1px dotted #00a8ff;
}
.ui-resizable-1 {
    width: 100%;
    height: 0;
    left: 0;
    bottom: 0;
    border-bottom: 1px dotted #00a8ff;
}
.ui-resizable-2 {
    width: 0;
    height: 100%;
    left: 0;
    top: 0;
    border-left: 1px dotted #00a8ff;
}
.ui-resizable-3 {
    width: 0;
    height: 100%;
    right: 0;
    top: 0;
    border-right: 1px dotted #00a8ff;
}
.ui-resizable-handle{
    z-index: 999999999;
}
.ui-draggable-9999 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999999999!important;
}



/*.custom_ui{
    display: none!important;
}*/
.ui-rotatable-handle {
    position: absolute;
    bottom: -20px;
    left: calc(50% - 8px);
    width: 20px;
    height: 12px;
    background: url('/assets_editer/style/rotate30.png');
    background-size: cover;
}
.ui-resizable-handle-cus {
    position: absolute;
    font-size: 0.1px;
    display: block;
    -ms-touch-action: none;
    touch-action: none;
}

/*custom*/

.ql-container.ql-snow {
    border: none;
}
.ql-editor {
    padding: 0;
    overflow-y: initial;
}

.editerAreaDesign {
    margin: 0;
    outline: none;
    width: 100%;
    /*display: table;*/
}
p {
    margin: 0;
    padding: 0;
}

.draggable_text_ui{
    display: table;
    height: auto!important;
}
#editerArea {
    display: table;
    margin: 0 auto;
}
.canvas-content {
    margin: 30px auto;
    width: 1920px;
    height: 1080px;
    position: relative;
    
}
.container_design_w {
    width: 100%;
    height: 100%;
}

.draggable_text_ui, .draggable_image_ui {
    position: absolute;
    /*display: table;*/
    cursor: pointer;
}
.draggable_image_ui {
    line-height: 0;
}
.draggable_image_ui img, .draggable_image_ui a{
    width: 100%;
    height: 100%;
    line-height: 0;
    display: block;
}


div#quill_toolbar {
    width: 100%;
    height: 40px;
    background: #3e0808;
}
input.ql-size {
    width: 50px;
}


#toolbar_design {
    width: 150px;
    display: table;
    background: #fff;
    position: absolute;
    display: none;
    z-index: 2147483640;
}

.section_controls {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
}
.control_st {
    width: 100%;
    display: block;
    background: #ccc3c3;
    margin-bottom: 5px;
    padding: 5px 0px;
    text-align: center;
    cursor: pointer;
}

.editerAreaDesign {
    font-family: "Noto Sans JP";
    line-height: 1.5;
    font-size: 30px;
}

.bDesignDetail-content .toolbar .itBar .boxColor {
    width: 232px;
    padding: 0;
}
.editerAreaDesign ol li {
    list-style: inside;
}

.vertical_text {
    writing-mode: vertical-lr;
}

.bDesignDetail-content .bCtn .canvas-content {
    max-width: 100000px;
}

div.canvas-content:first-child .sort_up, div.canvas-content:last-child .sort_down{
    display: none;
}

.bDesignDetail-content .bCtn .bMain .bControl02 {
    z-index: 214748364;
}

.left-editer-toolbar, .toolbarRight {
    display: none;
}

.fancybox-overlay {
    z-index: 2147483647;
}




.main_popup .bPrevew .pr {
    visibility: inherit;
    opacity: 1;
}

.main_popup {
    display: none;
}


.main_popup .bPrevew .pr {
    padding: 0px;
}


.smartphoneView {
    width: 400px!important;
}

.smartphoneView .fancybox-inner {
    width: 400px!important;
}
.pr.showSp {
    width: 400px;
    margin: 0 auto;
    box-shadow: 0px 0px 9px #777777;
}
.design_active {
    outline: 2px solid #00a8ff;
}

#backgroundColor {
    background: #ffffff;
    border: 1px solid #fff;
    width: 100%;
    height: 30px;
}

#colorPickerBackground .a-color-picker-stack.a-color-picker-transparent.a-color-picker-circle {
    display: none;
}
#colorPickerBackground {
    margin: 0 auto;
    display: table;
}

.title_label_question_answer {
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 600;
    color: #fff;
    margin-bottom: 10px;
    margin-top: 10px;
    display: block;
}

#map_creates input.form-control, #question_creates input.form-control, #question_creates select.form-control, #menu_creates input.form-control, #menu_creates select.form-control {
    width: 100%;
    height: 30px;
    background-color: #B1B2B2;
    border: none;
    padding: 0 10px;
    font-size: 1.4rem;
    color: #fff;
}

.bContact .form-control {
    width: 100%;
}

textarea.form-control {
    width: 100%;
    height: 100px;
    background-color: #B1B2B2;
    border: none;
    padding: 5px 10px;
    font-size: 1.4rem;
    color: #fff;
}
input.remove_question, input.remove_menu {
    width: 120px;
    height: 30px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: none;
    -moz-border-radius: 100px;
    border-radius: 100px;
    background: rgba(92, 102, 111, 0.5);
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 600;
    margin: 0 auto;
    cursor: pointer;
    -webkit-transition: opacity 0.3s ease-out;
    -moz-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
}

.item_out_create_form:not(:last-child){
    margin-bottom: 15px;
    border-bottom: 1px solid #fff;
    padding-bottom: 15px;
}


#preview_design .canvas-content {
    margin: 0;
    box-shadow: none;
    border: none;
}
header#header {
    background-color: #fff;
    z-index: 99999;
}
div.titleMenu {
    position: absolute;
    top: -30px;
}
.canvas-content > .ui-resizable-n:before, .canvas-content > .ui-resizable-s:before {
    content: '';
    width: 15px;
    height: 15px;
    display: block;
    z-index: 999999;
    position: absolute;
    left: 10px;
    top: 4px;
    background:url('/asset/img/design-detail/arr_up.svg');
    background-size: contain;
    background-repeat: no-repeat;
}
.canvas-content > .ui-resizable-n:after, .canvas-content > .ui-resizable-s:after {
    content: '';
    width: 15px;
    height: 15px;
    display: block;
    z-index: 999999;
    position: absolute;
    left: 10px;
    bottom: 0px;
    background:url('/asset/img/design-detail/arr_down.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

.bDesignDetail-content .bCtn .btnMore {
     padding: 0px 0px; 
}
.bDesignDetail-content .bCtn .btnMore__btn{
    margin: 50px auto;
}
div#map {
    height: 100%;
}

.controlLock {
    outline: 2px solid #00a8ff;
}
.controlLock:after {
    content: "";
    width: 30px;
    height: 30px;
    position: absolute;
    right: -15px;
    bottom: -15px;
    background: url('/asset/img/design-detail/i_mn_15.svg');
}

.filepond--panel-top:after {
    display: none!important;
}
.filepond--panel-root {
    background-color: #49535d;
}
.filepond--drop-label {
    color: #fff;
    padding: 30px 0px;
    font-size: 16px!important;
    font-weight: bold!important;
}
.filepond--panel[data-scalable=true] {
    background-color: #49535d!important;
}
.filepond--root .filepond--drop-label {
    min-height: 9.5em;
}
.filepond--list-scroller {
    display: none;
    height: 0px!important;
    overflow: hidden!important;
}

.editerAreaDesign{
    min-width: 4px;
}

input.titleMenuContent {
    max-width: 140px;
}

.draggable_node_jsx:hover {
    outline: 1px solid #00a8ff;
}

/*div#control_drap_resize_ui:hover {
    z-index: 99;
}*/