*{box-sizing: border-box;}
h1,h2,h3,h4,h5,h6,p,ul,li,ol,figure{margin:0;padding:0;}
body{display:flex;font-family:Helvetica;margin:0;padding:0;}
.layout-grid{display:flex;gap:15px;flex-wrap: wrap;}/*max-width: calc( 85px * 3 );*/
.layout-grid .svg-selection-wrapper{width:30%;}
.layout-grid .svg-selection-wrapper.selected{outline: 2px solid green;margin: 0;padding: 0;line-height: 0;}
.layout-grid .svg-template{width:100%;cursor:pointer;background-color:#fff;}
.layout-grid .svg-template text{font-family:Helvetica;stroke:#222;}
.layout-grid .svg-template rect{fill:#fff;stroke:#222;}
.layout-grid .svg-template rect[data-uuid]{fill:#fff;}
.layout-grid .svg-template:hover rect{fill:#fff;stroke:#222;}
.layout-grid .svg-template:hover text{fill:#222;}
#svg-template-save.hidden{display:none;}

.page-preview svg {display:block;margin:0 auto;max-height:calc( 100vh - 50px );}
.page-preview text{font-family:Helvetica;}
.page-preview rect[data-uuid]{cursor:pointer;fill:#fff;}

body[data-bg="#fff"] .layout-grid .svg-template,
body[data-bg="#fff"] .page-preview .svg-template {background-color:#fff;}

body[data-bg="#fff"] .layout-grid .svg-template rect,
body[data-bg="#fff"] .page-preview .svg-template rect{stroke:#222;}

body[data-bg="#fff"] .layout-grid .svg-template rect[data-uuid],
body[data-bg="#fff"] .page-prevew .svg-template rect[data-uuid]{fill:#fff;}
body[data-bg="#fff"] .layout-grid .svg-template rect[data-for-slug="description"] {stroke-width:0.3 !important;display:block;}

body[data-bg="#fff"] .layout-grid .svg-template text,
body[data-bg="#fff"] .page-preview .svg-template text{fill:#aaa;}
body[data-bg="#fff"] .layout-grid .svg-template text {display:none;}
body[data-bg="#fff"] .page-preview .svg-template text{cursor:pointer;}

body[data-bg="#000"] .layout-grid .svg-template,
body[data-bg="#000"] .page-preview .svg-template {background-color:#000;}

body[data-bg="#000"] .layout-grid .svg-template rect,
body[data-bg="#000"] .page-prevew .svg-template rect{stroke:#aaa;fill:#000;}

body[data-bg="#000"] .layout-grid .svg-template rect[data-uuid],
body[data-bg="#000"] .page-preview .svg-template rect[data-uuid]{fill:#fff;}
body[data-bg="#000"] .layout-grid .svg-template rect[data-for-slug="description"] {stroke-width:0.3 !important;display:block;}

body[data-bg="#000"] .layout-grid .svg-template text,
body[data-bg="#000"] .page-preview .svg-template text{fill:#aaa;}
body[data-bg="#000"] .layout-grid .svg-template text {display:none;}
body[data-bg="#000"] .page-preview .svg-template text{cursor:pointer;}

.page-preview rect[data-uuid]:hover{fill:#efefef !important;stroke:#eaeaea !important;}
.page-preview image:hover{cursor:pointer;}

/* When NOT dragging, allow rect to receive drops */
.svg-draggable-image {pointer-events: none;}

/* When dragging this image, re-enable pointer events */
.svg-draggable-image.dragging {pointer-events: all;}

main{width:40%;padding:25px 15px;background:#f0f0f0;}
.form-wizard{padding:30px 40px;min-width:310px;width:30%}
h1{font-size:28px;padding-bottom:15px;line-height:1.1em;}

.form-wizard h2 {font-size:16px;padding-bottom:15px;}
.content-panel{padding:59px 40px 25px;min-width:310px;width:30%}
.content-panel.hidden{display:none;}
.content-panel h2 {font-size:16px;padding-bottom:15px;}
.content-panel h3 {font-size:16px;padding-bottom:15px;}

#text-counter{width:100%;margin:0;padding:0px 0 25px;text-align:center;color:#a0a0a0;font-size:10px;}

.btn {border:1px solid #999;background:transparent;height:24px;width:80px;line-height:22px;text-align:center;display:inline-block;font-size:10px;text-transform:uppercase;color:#222;outline:none;padding:0;margin:0;cursor:pointer;background:white;}
.btn:hover{color:#000;border:1px solid #000;}
.save-line {padding-top:25px;}
.has-error{color:red !important;}

.bg-container{display:flex;flex-direction:row;gap:10px;padding-bottom:30px}
.bg-container label {overflow:hidden;position:relative;height:32px;width:32px;top:-6px;cursor:pointer;border-radius:16px;}
.bg-container input {position:absolute;left:-100%;top:0;}
.bg-container .label-text {position:relative;overflow:hidden;display:inline-block;height:28px;width:28px;text-indent:-120px;top:2px;left:2px;border-radius:14px;}
.bg-container .label-text:before {content:"";display:block;height:20px;width:20px;border-radius:10px;position:absolute;top:4px;left:4px;outline:1px solid #999;}
#bg-white ~ .label-text:before {background:white;}
#bg-black ~ .label-text:before {background:black;}
.bg-container label:hover .label-text,
.bg-container label :checked ~ .label-text {outline:2px solid green;}

.content-panel fieldset {border:0;padding:0;margin:0;position:relative;overflow:hidden;}
.content-panel fieldset .image-uploader {display:block;height:50px;width:50px;overflow:hidden;cursor:pointer;}
.content-panel fieldset .image-uploader-cross {display:block;height:50px;width:50px;border:1px solid #999;}
.content-panel fieldset .image-uploader-cross:hover {border:1px solid #000;}
.content-panel fieldset .image-uploader-cross:before {content:"+";font-family:Helvetica;position:absolute;font-size:30px;font-weight:300;color:#999;display:block;text-align:center;width:48px;line-height:48px;}
.content-panel fieldset .image-uploader-cross:hover:before {color:black;}
.content-panel fieldset #image-uploader {position:absolute;left:-3000%;top:0;}

.section-edit {display:inline;margin:0;padding:0;background:transparent;color:blue;border:0;outline:0;font-size:16px;font-family:Helvetica;margin-left:5px;color:#aaa;cursor:pointer;}
.section-edit:hover{color:#222;}

.form-step {padding-bottom:15px;}
.form-step input[type="text"],
.form-step input[type="email"],
.form-step input[type="url"] {border:1px solid #999;height:28px;line-height:28px;width:100%;padding:0 10px;font-size:14px;display:block;margin-bottom:10px;}
.form-step textarea {border:1px solid #999;line-height:28px;width:100%;padding:0 10px;height:200px;font-family:Helvetica;font-size:14px;display:block;margin-bottom:10px;}

.images-step{margin-bottom:15px;}
.images-step h3{font-weight:normal}

.image-grid{display:flex;width:100%;max-width:100%;gap:15px;padding-top:15px;flex-wrap:wrap;min-height:50px;align-content: flex-start;max-height: calc( 100vh - 350px );overflow: auto;margin-bottom:5px;}
.uploaded-image {width:45%;max-width:45%;min-width:45%;position:relative;overflow:hidden;}
.uploaded-image img {width:100%;display:block;cursor: grab;}
.uploaded-image .btn-wrapper{position:absolute;left:0;top:-20px;width:100%;height:20px;background:rgba(255,255,255,0.7);display:flex;flex-direction:row;transition:all ease 0.2s;}
.uploaded-image .btn-wrapper .btn-delete{border:0;color:white;margin:0;padding:8px 0px 8px 0;font-size:10px;color:black;font-family:Helvetica;font-weight:bold;line-height:8px;display:block;width:40px;cursor:pointer;background:transparent;}
.uploaded-image .btn-wrapper .btn-dims{border:0;color:white;margin:0;padding:8px 0 8px 4px;font-size:10px;color:black;font-family:Helvetica;font-weight:bold;line-height:8px;display:block;width:calc( 100% - 40px);}
.uploaded-image:hover .btn-wrapper{top:0;}
.uploaded-image:hover .btn-wrapper .btn-delete:hover{background:white;}
.uploaded-image.selected {display:none !important;opacity:0 !important;}

.cropper-modal {position:fixed;inset:0;background:rgba(255,255,255,0.85);display:none;justify-content:center;align-items:center;z-index:99999;opacity:1;flex-direction:column;}
.cropper-container {max-width:90vw;max-height:80vh;overflow:hidden;width:700px;height:700px;}
.cropper-controls {margin-top:15px;text-align:center;}
#cropper-image {max-width:100%;max-height:100%;display:block;}
#custom-drag-ghost {position:fixed;pointer-events:none;z-index:100000;opacity:0.85;transform:translate(-50%, -50%);display:none;}
#cropper-modal {display: none;align-items: center;justify-content: center;}
#cropper-container-fixed {width: 700px;height: 700px;position: relative;overflow: hidden;}

.cropper-line,
.cropper-point{background-color:red;}
.cropper-view-box{outline:1px solid red;}
.cropper-line{opacity:0;}
.cropper-dashed{opacity:1;border:0 dashed #fff}
.cropper-bg{background:#eaeaea;}

.hidden{display:none;}
.fa:before{font-family:fontawesome;font-size:18px;color:#fff;line-height:32px;width:32px;height:36px;display:block;position:relative;top:0;left:0;font-weight:100;}
.social-step .fa {height:36px;width:36px;display:inline-block;margin-right:4px;border:2px solid white;background:#c1c1c3;border-radius:18px;padding:0;cursor:pointer;outline:2px solid white;}
.social-step .fa:hover,
.social-step .fa.selected{background:#d1d1d3;outline:2px solid green}
.social-buttons{padding-bottom:15px;}
.social-fields > div{display:flex;line-height:28px;}
.social-fields > .hidden{display:none;}
.social-fields input{border-top:0 !important;border-left:0 !important;border-right:0 !important;border-bottom:1px solid #c1c1c3 !important;}

/**
 * SVG Styles
 */
.page-preview svg { user-select: none; -webkit-user-select: none;}
svg image {-webkit-user-drag: auto; user-select: none; pointer-events: all;}
/*svg rect[data-slug] { pointer-events: none; }*/
.filled{stroke-width: 0 !important;pointer-events: none;display:none;}


/**
 * Ghost element
 */
.ghost{width:120px;height:auto;position:fixed;pointer-events:none;z-index:9999;display:block !important;opacity:0.8;;position:absolute;top:-9999px;left:-9999px;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.5));border-radius:4px;background:white;}