* { box-sizing:border-box; }

html, body { height:100%; }
body { margin:0; font-family:"Plus Jakarta Sans", serif; background:#f5f6f7; color:#111; }

img { display:block; max-width:100%; }

#pd-app { position:fixed; inset:0; display:grid; grid-template-rows:54px 1fr; grid-template-columns:400px 1fr; grid-template-areas:"topbar topbar" "sidebar canvas"; }

.topbar { grid-area:topbar; background:#000; color:#fff; display:flex; align-items:center; }
.topbar .topbar-spacer { flex:1; }
.topbar .logo {  padding:0 13px; }
.topbar .logo img { max-height:20px; }
.topbar .pd-nav { list-style:none; margin:0; padding:0; }
.topbar .pd-nav li { display:inline-block; }
.topbar .pd-nav li a { display:block; padding:10px 12px; color:#FFF; border-radius:5px;}
.topbar .pd-nav li a:hover { background:#333; }
.topbar .pd-nav li.active a { background:#333; }
.topbar .pd-button { appearance:none; border:0; cursor:pointer; font-size:19px; margin-left:10px; padding:17px 25px; font-weight:600; }
.topbar .pd-button--primary { background:#FF7260; color:#FFF; }
.topbar .pd-button--primary:hover { background:#f66c5b; }

.sidebar { grid-area:sidebar; background:#fff; border-right:1px solid #e5e7eb; overflow:auto; }

/* IMPORTS */
.sidebar #imports h3 { padding:0 20px; margin:20pxpx 0; }
.sidebar .no-imports { margin-bottom:5px; padding:0 20px; }
.sidebar .no-imports p { font-size:14px; background:#d1ebed; padding:18px; margin:0; line-height:1.5em }
.sidebar .no-imports p strong { font-size:16px; }
.sidebar .no-imports p a { color:#000; }
.sidebar .new-import {  }
.sidebar .new-import .crm-logos { padding:20px; display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.sidebar .new-import .crm-logos .crm { height:70px; display:flex; border:1px solid #DDD; padding:15px; align-items:center; justify-content:center; }
.sidebar .new-import .crm-logos .crm:hover { -webkit-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.2); }
.sidebar .new-import .crm-logos .crm img { max-height:40px }


/* DESIGN SETTINGS */
.sidebar .accordion-header { cursor:pointer; padding:13px 20px; font-size:15px; border-top:1px solid #CCC; }
.sidebar .accordion-header:first-child { border:0 }
.sidebar .accordion-header i { margin-right:6px; }
.sidebar .accordion-header i.fa-chevron-down { transform:translateX(-3px); display:none }
.sidebar .accordion-header.active {  }
.sidebar .accordion-header.active i { margin-right:2px; }
.sidebar .accordion-header.active i.fa-chevron-right { display:none }
.sidebar .accordion-header.active i.fa-chevron-down { display:inline-block }
.sidebar .accordion-contents { display:none; padding:10px 20px 10px }
.sidebar .form-field { display:flex; align-items:center; margin-bottom:1rem; }
.sidebar .form-field.form-field-wide { display:block }
.sidebar .form-field-section_start,
.sidebar .form-field-section_end,
.sidebar .form-field-search_form_fields { display:block }
.sidebar .form-field-section_start { font-size:18px; font-weight:500 }
.sidebar .form-field-section_end { border-top:1px solid #DDD; margin:22px 0 18px }
.sidebar .form-field-section_end:last-child { border:0;  }
.sidebar .form-field > label { flex: 0 0 150px; font-size:14px; }
.sidebar .form-field.form-field-wide > label { display:block; margin-bottom:9px; }
.sidebar .form-field input[type='text'],
.sidebar .form-field input[type='number'],
.sidebar .form-field input[type='email'],
.sidebar .form-field select,
.sidebar .form-field textarea { flex:1; padding:8px; border-radius:3px; width:auto; border:1px solid #BBB }
.sidebar .form-field input[type='text'],
.sidebar .form-field input[type='number'],
.sidebar .form-field textarea { min-width: 200px; }
.sidebar .form-field textarea { resize: vertical; }
.sidebar .form-field input[type='color'] {  }
.sidebar .form-field .field-wrapper { flex:1; text-align:right }
.sidebar .form-field .field-wrapper input[type='text'],
.sidebar .form-field .field-wrapper input[type='number'],
.sidebar .form-field .field-wrapper textarea { min-width:0; }
.sidebar .form-field .field-wrapper input[type='number'] { max-width:80px }
.sidebar .form-field-select-options input[type='text'] { min-width:0; width:40%; margin-right:7px; margin-bottom:7px; }
.sidebar .form-field-select-options i { cursor:pointer; color:#BBB; margin-right:4px; }
.sidebar .form-field-select-options i:hover { color:#000; }
.sidebar .form-field-toggle {  }
.sidebar .form-field-toggle .switch { position:relative; display:inline-block; vertical-align:middle; width:60px; height:34px; }
.sidebar .form-field-toggle .switch input { opacity:0; width:0; height:0; }
.sidebar .form-field-toggle .slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#ccc; -webkit-transition:.4s; transition:.4s; }
.sidebar .form-field-toggle .slider:before { position:absolute; content:""; height:26px; width:26px; left:4px; bottom:4px; background-color:white; -webkit-transition:.4s; transition:.4s; }
.sidebar .form-field-toggle input:checked + .slider { background-color:#3ebfbb; }
.sidebar .form-field-toggle input:focus + .slider { box-shadow:0 0 1px #3ebfbb; }
.sidebar .form-field-toggle input:checked + .slider:before { -webkit-transform:translateX(26px); -ms-transform:translateX(26px); transform:translateX(26px); }
.sidebar .form-field-toggle .slider.round { border-radius:34px; }
.sidebar .form-field-toggle .slider.round:before { border-radius:50%; }
.sidebar .field-accordion { border:1px solid #CCC; border-radius:8px; margin-bottom:7px; font-size:14px; }
.sidebar .field-accordion .field-accordion-header { position:relative; padding:9px 13px; }
.sidebar .field-accordion .field-accordion-header i { cursor:pointer; position:absolute; font-size:14px; padding:11px 5px; right:7px; top:0; color:#BBB }
.sidebar .field-accordion .field-accordion-header i:hover { color:#000 }
.sidebar .field-accordion .field-accordion-header i.fa-arrows-alt { right:50px; }
.sidebar .field-accordion .field-accordion-header i.fa-trash-alt { right:28px; }
.sidebar .field-accordion .field-accordion-header i.fa-chevron-down { display:none; color:#000 } 
.sidebar .field-accordion.active .field-accordion-header i.fa-chevron-up { display:none }
.sidebar .field-accordion.active .field-accordion-header i.fa-chevron-down { display:inline-block }
.sidebar .field-accordion .field-accordion-contents { display:none; padding:5px 13px 13px }
.sidebar .field-accordion .field-accordion-contents .form-field > label { flex:0 0 100px }
.sidebar .field-accordion-wrapper { }
.sidebar .field-accordion-wrapper .ui-state-highlight { background:#f8f8f8; margin-bottom:7px; border:1px solid #eee; border-radius:8px; }

.pe-canvas { grid-area:canvas; position:relative; overflow:auto; background:#fafafa; }
.pe-preview { position:absolute; inset:0; padding:24px; display:grid; place-items:center; }
/*.pe-preview__inner { width:min(960px, 90vw); height:min(540px, 70vh); border:2px dashed #c7c9cc; background:#fff; border-radius:12px; display:grid; place-items:center; box-shadow:0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04); }
.pe-preview__inner h1 { margin:0; opacity:.5; letter-spacing:.08em; text-transform:uppercase; }*/

.upgrade-lightbox { position:fixed; z-index:9999; top:0; left:0; width:100%; height:100vh; background:rgba(0, 0, 0, 0.5); display:flex; justify-content:center; align-items:center; }
.upgrade-lightbox-contents { position:relative; text-align:center; color:#000; background:#FFF; padding:35px; border-radius:15px; max-width:500px; width:90%; box-shadow:0 4px 20px rgba(0,0,0,0.2); }
.upgrade-lightbox-contents a.close-lightbox { position:absolute; top:20px; right:25px; color:#000; font-size:32px; }
.upgrade-lightbox-contents h2 { margin:0; pading:0; margin-bottom:25px; }
.upgrade-lightbox-contents p { margin:0; pading:0; margin-bottom:35px; }
.upgrade-lightbox-contents .buttons { text-align:center; }
.upgrade-lightbox-contents a.button { text-decoration:none; background:#3ebfbb; color:#FFF; font-weight:600; text-align:center; display:inline-block; padding:17px 50px; border-radius:5px; font-size:18px; }