*{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;font-weight:300;}
@font-face {
    font-family: 'PinkSunset';
    src: url('/fonts/pinksunset/PinkSunset.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: block; /* critical */
}
@font-face {
    font-family: 'Halyard';
    src: url('/fonts/halyard/Halyard Text Regular.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: block; /* critical */
}
/* welcome page */
.welcome-form {flex-direction:column;padding-top:80px;}
.welcome-form main {max-width:360px;width:calc(100% - 40px );margin:0 auto;padding:25px;background:white;margin-bottom:80px;}
.welcome-form .logo-line a {display:inline-block;line-height:0;}
.welcome-form .logo-line img {display:block;line-height:0;font-size:16px;color:black;}
.welcome-form h1{text-align:center;font-size:24px;line-height:1.2;padding-top:25px;padding-bottom:25px;}
.welcome-form h2{text-align:center;font-size:16px;line-height:1.2;padding-bottom:10px;}
.welcome-form p{text-align:center;font-size:14px;line-height:1.2;}
.welcome-form form{padding-top:25px;}
.welcome-form form p{padding-bottom:18px;width:100%;min-width:100%;max-width:100%;}
.welcome-form label{display:block;}
.welcome-form .label{display:block;padding-bottom:8px;font-size:14px;text-align:left;}
.welcome-form input{display:block;width:100%;border:1px solid #aaa;margin:0;padding:0 10px;line-height:24px;text-align:left;outline:none;border-radius:3px;}
.welcome-form .save-line{text-align:center;}
.welcome-form .form-fields{display:flex;flex-direction:row;gap:15px;}
.welcome-form .form-fields p{width:calc(50% - 7.5px);min-width:calc(50% - 7.5px);max-width:calc(50% - 7.5px);}

.grid-side{height:100%;display:grid;grid-template-rows: 1fr auto;}

#branding{margin:0 0 25px;width:calc(100%);}
#branding img{max-width:100%;display:block;max-height:60px;}

.copyright{width:calc(100% - 80px);margin:0;font-size:12px;line-height:40px;color:#a0a0a0;}
#help{color:black;text-decoration:none;position:absolute;top:30px;right:40px;font-size:12px;}
#help:hover{text-decoration:underline;}

/* logged in pages */
.layout-grid{display:flex;gap:15px;flex-direction:row;flex-wrap:nowrap;}/*max-width: calc( 85px * 3 );*/
.svg-group{width:100%;min-width:100%;max-width:100%;display:flex;gap:15px;flex-direction:row;margin-right:40px;display:none;flex-wrap:wrap;position:relative;}
.svg-group.selected{display:flex;}
.layout-grid .svg-selection-wrapper{width:30%;aspect-ratio: 216 / 303;display: flex;position:relative;}
.layout-grid .svg-selection-wrapper:before{content:"";display:block;width:100%;height:100%;border:1px solid #ccc;position:absolute;z-index: 1;top:0;left:0;}
.layout-grid .svg-selection-wrapper.selected{outline: 2px solid #00aeef;margin: 0;padding: 4px;line-height: 0;}
.layout-grid .svg-template{width:100%;cursor:pointer;background-color:#fff;display:block;z-index: 2;position: relative;top:1px;left:1px;}
.layout-grid .svg-template text{font-family:Helvetica;stroke:#000;}
.layout-grid .svg-template rect{fill:#fff;stroke:#000;stroke-width: 1px !important;}
.layout-grid .svg-template rect[data-slug^="field"]{stroke-width: 0px !important;}
.layout-grid .svg-template rect[data-slug^="image"]{stroke-width: 0px !important;}
.layout-grid .svg-template rect[data-uuid]{fill:#fff;}
.layout-grid .svg-template:hover rect{fill:#fff;stroke:#000;}
.layout-grid .svg-template:hover text{fill:#000;}
#svg-template-save.hidden{display:none;}
svg{overflow:visible}

.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;}
.layout-grid .svg-template .inner-bound{stroke:#ccc;stroke-width:0.3}

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"] .page-preview .svg-template rect.page-bg,
body[data-bg="#fff"] .page-preview .svg-template rect.inner-bound{stroke-width:0;}

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"] .page-preview .svg-template rect[data-for-slug="description"] {stroke-width:0.0 !important;display:block;}

body[data-bg="#fff"] .layout-grid .svg-template text,
body[data-bg="#fff"] .page-preview .svg-template text{fill:#000;}
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:#222;}

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"] .page-preview .svg-template rect[data-for-slug="description"] {stroke-width:0.0 !important;display:block;}

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

.page-bg {display:none;}
.inner-bound {display:none;}

.layout-controls,
.rendered-controls,
.completed-controls{padding-top:20px;text-align:center;}
.completed-controls{display:none;}

.layout-controls .btn-dot,
.rendered-controls .btn-dot,
.completed-controls .btn-dot {border:0;outline:none;height:12px;width:12px;border-radius:7px;overflow:hidden;background:transparent;position:relative;margin:0 3px;cursor:pointer;background:#aaa;}

.layout-controls .btn-dot:hover,
.rendered-controls .btn-dot:hover,
.completed-controls .btn-dot:hover {background:#bbb;}

.layout-controls .btn-dot.selected,
.rendered-controls .btn-dot.selected,
.completed-controls .btn-dot.selected {outline:2px solid #00aeef;background:white;padding:2px;}

.layout-controls .btn-dot span,
.rendered-controls .btn-dot span,
.completed-controls .btn-dot span {position:absolute;left:-20000px;top:0;}
#my-pages-headline{padding-bottom:15px;}
body[data-remaining="0"] .finish-order-button{display:none !important;}
body[data-remaining="0"] .form-step{display:none !important;}
body[data-remaining="0"] .fields{display:block !important;}
body[data-remaining="0"] .start-again{display:block;display:none;}
.completed-pages{display:none;}
/*.has-pages .completed-pages{display:block;}*/

.prev-svgs,.next-svgs {border:0;height:28px;width:28px;border-radius:14px;background:#eee;outline:none;line-height:28px;position:relative;overflow:hidden;cursor:pointer;}
.prev-svgs:hover,.next-svgs:hover{background:#ccc;}
.prev-svgs span,.next-svgs span {position:absolute;left:-20000px;top:0;}
.prev-svgs:before{display:block;position:absolute;left:0;top:0px;height:28px;width:26px;line-height:28px;content:"\f053";font-family:'Font Awesome 5 Pro';color:white;font-size:18px;}
.next-svgs:before{display:block;position:absolute;left:2px;top:0px;height:28px;width:26px;line-height:28px;content:"\f054";font-family:'Font Awesome 5 Pro';color:white;font-size:18px;}
.prev-svgs{position:absolute;left:-35px;top:-115px;}
.next-svgs{position:absolute;right:-15px;top:-115px;}
.layout-btns{position:relative;}
.completed-btns{position:relative;display:none;}
/*.rendered-btns .prev-svgs,
.rendered-btns .next-svgs {margin-top:-128px;}*/
.rendered-btns .next-svgs{margin-right:-35px;}
/*.completed-btns .next-svgs{margin-right:-35px;}*/
.saved-layouts .rendered-btns .next-svgs{margin-right:-15px;}
.rendered-grid{z-index:2;overflow:hidden;flex-wrap:nowrap;display:flex;gap:10px;}
.completed-grid{z-index:2;overflow:hidden;flex-wrap:nowrap;display:flex;gap:10px;flex-direction:row;}
.rendered-btns{z-index:1;}
.completed-btns{z-index:1;}

.completed-pages{padding-top:30px;}

.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;}

.dashboard main{width:41%;padding:20px 15px;background:#f0f0f0;}
.form-wizard{padding:20px 40px 0;min-width:310px;width:29.5%;position:relative;overflow:auto;height:100vh;}
.dashboard h1{font-size:28px;padding-bottom:30px;line-height:1.1em;}

.form-wizard h2 {font-size:16px;padding-bottom:25px;}
.form-wizard .pages-available{color:black;font-weight:300;}
.content-panel{padding:59px 40px 25px;min-width:310px;width:29.5%;position:relative;height:100vh;overflow:auto;display:grid;grid-template-rows: auto 1fr auto;}
.content-panel.hidden{display:grid;}
.content-panel.hidden .fields{display:none;}
.content-panel h2 {font-size:16px;padding-bottom:15px;}
.content-panel h3 {font-size:16px;padding-bottom:15px;}
.content-panel .fields {overflow:auto;height:calc(100vh - 120px);}
.mylayouts-open .content-panel .fields {overflow:auto;height:calc(100vh - 120px - 269px);}

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

.btn {border:1px solid #999;background:transparent;height:24px;width:100px;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;text-decoration:none;}
.btn:hover{color:#000;border:1px solid #000;}
.dashboard .save-line {padding-top:25px;}
.has-error{color:red !important;}

.bg-container{display:flex;flex-direction:row;gap:10px;padding-bottom:30px}
.bg-title{position:relative;top:2px;}
.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 #00aeef;}

.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;}

.grid-top .layout-btns{display:none;}
.section-edit,
.mylayout-toggle{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,
.mylayout-toggle:hover;{color:#222;}
.section-edit .fa-chevron-up,
.mylayout-toggle .fa-chevron-up{display:none;}
.section-edit .fa-chevron-down,
.mylayout-toggle .fa-chevron-down{display:block;}
.section-edit .fa-chevron-up:before,
.section-edit .fa-chevron-down:before,
.mylayout-toggle .fa-chevron-up:before,
.mylayout-toggle .fa-chevron-down:before{color:#aaa;}
.form-step.selected .fa-chevron-up{display:block;}
.form-step.selected .fa-chevron-down{display:none;}
.mylayouts-open .fa-chevron-up{display:none;}
.mylayouts-open .fa-chevron-down{display:block;}

.content-panel h2{padding-bottom:0;}
.content-panel .selected h2{padding-bottom:0px;}

.form-step {padding-bottom:15px;}
.form-step input[type="text"],
.form-step input[type="email"],
.form-step input[type="url"],
#modal-message input[type="text"] {
	border:1px solid #ccc;
	height:48px;
	line-height:48px;
	width:100%;
	padding:0 10px;
	font-size:16px;
	display:block;
	margin-bottom:20px;
	outline:none;
	font-weight:300;
	color:black;
	-webkit-appearance:none;
}
.form-step input[type="text"]::placeholder {
	opacity: 1;
	color:#a0a0a0;
}
.form-step textarea::placeholder {
	opacity: 1;
	color:#a0a0a0;
}
.form-step input[type="text"]::-moz-placeholder {
	opacity: 1;
	color:#a0a0a0;
}
.form-step textarea::-moz-placeholder {
	opacity: 1;
	color:#a0a0a0;
}
.form-step input[type="text"]::-webkit-placeholder {
	opacity: 1;
	color:#a0a0a0;
}
.form-step textarea::-webkit-placeholder {
	opacity: 1;
	color:#a0a0a0;
}
.form-step textarea {border:1px solid #ccc;line-height:20px;width:100%;padding:10px 10px;height:140px;font-family:Helvetica;font-size:16px;display:block;margin-bottom:10px;text-align:center;font-weight:300;-webkit-appearance:none;}

.form-step input[type="text"]:focus,
.form-step input[type="email"]:focus,
.form-step input[type="url"]:focus,
#modal-message input[type="text"]:focus,
.form-step textarea:focus {outline:none;border-color:#4d85b5;}
#modal-message p{font-weight:300;}

/*.images-step{margin-bottom:15px;}*/

.images-step h3{font-weight:300}
.images-step .images-done{display:none;}
/*.images-step.selected .images-done{display:block;}*/

.image-step-complete .images-step.selected .images-done{display:block;}

.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 - 280px );
	overflow		: auto;
	margin-bottom	: 5px;
	height			: calc(100vh - 337px);
}
.mylayouts-open .image-grid{height:calc(100vh - 591px);}
.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:-30px;width:100%;height:30px;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:13px 0px 13px 0;font-size:12px;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:13px 0 13px 10px;font-size:12px;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;}
.uploaded-image .raw-loading {position:absolute;inset: 0;background: rgba(255, 255, 255, 0.9);pointer-events: none; transition: opacity 120ms linear;cursor:not-allowed;}
.uploaded-image .raw-loading:before{content:"Loading Asset: " attr(data-percent);font-size:14px;width:100%;color:black;line-height:28px;text-align:center;font-weight:bold;padding-top:40px;display:block;}

.cropper-modal {position:fixed;inset:0;background:rgba(255,255,255,0.95);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;margin-bottom: 30px;display:flex;gap:15px;}
#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;padding-top:30px;}
#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;}

/* test resize fix */
#cropper-container-fixed {
	max-width: 700px;
	max-height: 700px;
	width: 100%;
	height: auto;
	position: relative;
	overflow: hidden;
}

/* test resize fix */
.cropper-container {
	width: auto !important;
	height: 100% !important;
	max-width: 700px !important;
	max-height: 700px !important;
	aspect-ratio: 1 / 1 !important;
/*    overflow: visible !important;*/
}


.hidden{display:none;}
.fa:before{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 #00aeef}*/
.social-buttons{padding-bottom:10px;}
.social-buttons button{height:32px;width:32px;display:inline-block;margin-right:4px;border:2px solid white;background:#c1c1c3;border-radius:16px;padding:0;cursor:pointer;outline:2px solid white;float:left;background:transparent;}
.social-buttons button.selected{background:#d1d1d3;background:white;outline:2px solid #00aeef;}
.social-buttons button path{fill:white;fill:#c1c1c3;}
.social-fields > div{overflow:hidden;width:100%;margin-bottom: 0px;padding:3px 0 3px 3px;height:41px;}
.social-fields > div > div{line-height:28px;width: calc( 100% - 42px );border-bottom:1px solid #aaa;float:right;display:none;margin:0;padding-top:3px;}
.social-fields button.selected ~ div {display:flex;}
.social-field[data-valid="no"] > div {border-bottom: 2px solid #a00;}
.social-field[data-valid="yes"] > div {border-bottom: 2px solid #00aeef;}
.social-field[data-valid="no"] button {outline:2px solid #a00;}
.social-fields > .hidden{display:none;}
.social-fields input{
	border:0 !important;
	position:relative;
	top:0px;
	font-family: Helvetica;
	font-size:14px !important;
	color:#aaa;
	font-weight:300 !important;
	margin-bottom:0 !important;
	outline:none;
	padding:0 10px 0 2px !important;
	line-height:28px !important;
	height:28px !important;
}
.social-fields input::placeholder {
	color		: #000;
	opacity		: 1;
}
.social-buttons button svg {height:16px;height:20px;top:1px;position:relative;}
.social-buttons span {color:#aaa;font-size:14px;}
.finished-layout .section-edit {display:none;}
.finished-layout .form-step {display:none;}
.finished-layout h2.unfinished {color:#aaa;}
.saved-layouts{display:none;position:relative;height:236px;}
.saved-layours .rendered-grid{flex-direction:row;gap:15px;display:flex;}
.saved-layouts .rendered-btns{position:relative;top:0;left:0;width:100%;}
.saved-layouts > .rendered-grids div{width:calc(33% - 15px);min-width:calc(33% - 15px);max-width:calc(33% - 15px);}
.saved-layouts img {outline: 1px solid #eee;}
.my-layouts{display:none;}
.minimised .saved-layouts{display:none;}
.mylayouts-open .saved-layouts{display:block;}
.mylayouts-open .my-layouts{height:60px;display:block !important;}
.has-mylayouts .my-layouts{display:block !important;}
.saved-layout{position:relative;width:calc(33% - 10px);max-width:calc(33% - 10px);min-width:calc(33% - 10px);display:none;padding:1px;}
.complete-pages .saved-layout{display:block;}
.mylayout-group{display:none;flex-direction:row;gap:15px;width:100%;min-width:100%;max-width:100%;}
.mylayout-group.selected{display:flex;}
.saved-layout img{display:block;}
/*.progress-wrap {position:absolute;bottom:-5px;left:0;width:100%;height:4px;background:rgba(255,255,255,0.3);border-top:1px solid #eee;}
.progress-wrap .progress-bar{height:4px;position:absolute;left:0;top:0;width:0%;background:#ccc;}*/
.layout-actions{position:absolute;bottom:30px;left:0;width:100%;text-align:center;display:flex;gap:8px;justify-content:center;}
.layout-actions button {display:none;height:22px;width:50px;text-align:center;background:white;border:1px solid #eaeaea;color:black;cursor:pointer;font-size:10px;text-transform:uppercase;}
.layout-actions button:hover {border:1px solid black;}
.saved-layout:hover .layout-actions button {display:inline-block;}
/*.upload-status {font-size:12px;margin-top:6px;color:#000;position:absolute;top:11px;left:0;width:100%;text-align:center;background:rgba(255,255,255,0.7);font-size:10px;text-transform:uppercase;padding:3px 0;}*/
.upload-status {display:flex;justify-content:center;color:#000;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;background:rgba(255,255,255,0.7);text-transform:uppercase;padding:0;z-index: 3;}
.saved-layout.finished-uploading .upload-status {display:none;}
.saved-layout .btn-download{height:28px;width:28px;position:absolute;left:3px;top:3px;display:none;border:1px solid #999}
.saved-layout .btn-download:before{height:26px;width:26px;display:block;text-align:center;line-height:26px;color:black;font-size:14px;line-height:26px;text-decoration:none;background:white;color:#666;}
.saved-layout:hover .btn-download{display:block;background:black;color:white;}
.saved-layout:hover .btn-download:before{display:block;}
.editing-done.hidden {display:none;}
.start-again.hidden {display:none;}
.editing-done{padding-top:18px;}
.editing-done h2{padding-bottom:10px;}
/*.save-state{margin-top:20px;}*/
#save-and-view-pdf{width:150px;display:none;}
.state-1{}
#reset-ui{width: 200px;display: inline-block;display: block;width: unset;padding-left: 20px;padding-right: 20px;}
.state-1 #save-and-view-pdf{display:inline-block;}
.state-1 #reset-ui{display:none;}
.btn-options{display:flex;margin-bottom:10px;padding-top:20px;gap:10px;position:relative;}
.btn-options.loading:before{position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;background:rgba(255,255,255,0.6);content:"";}
.btn-options.loading i{position: absolute;left: 145px;top: 32px;width: 22px;height: 22px;z-index: 3;display: block;margin-top: -11px;}
.btn-options.loading i:before{font-family: 'Font Awesome 5 Pro';color: black;height: 22px;width: 22px;display: block;line-height: 22px;}
.btn-options i{display:none;}
.btn.finalise-state{width:150px;display:inline-block;}
/*.start-again {padding-top:18px;}*/
.clone-restart{padding-top:15px;}
.restart {margin-top:20px;width:200px;}
.finished-layout .form-step,
.finished-layout .editing-done {display:none;}
.my-layouts {
	padding-top:0px;
	height:80px;
	position:absolute;
	bottom:0;left:0;padding-left:40px;width:calc(100% - 0px);padding-right:40px;background:white;overflow:hidden;
}
.mylayouts-open .my-layouts {height:330px;display:block;}
/*.my-layouts.minimised{height:30px;}*/
.my-layouts h2 {margin-top:10px;padding-bottom:6px;padding-top:5px;border-top:1px solid #aaa;}
.my-layouts .rendered {display:block;}
.form-step-inner{display:none;}
.selected .form-step-inner {display:block;padding-top:10px;}
.social-step .form-step-inner{padding-top:5px;}
.form-step-inner .fa-chevron-left:before{color:#222;text-align:center;font-size:18px;width:11px;padding-right:5px;}
.mylayout-group .saved-layout{display:block}

.mylayouts-open .image-grid{height:calc(100vh - 606px);height:calc(100vh - 555px);}
.crop-grid{display:none;}

/*.is-clone-button{display:none !important;}
.is-delete-button{display:none !important;}*/
.no-close .fa-times{display:none;}
.is-delete-button{position:absolute;top:3px;height:28px !important;width:28px !important;right:3px;display:none;min-width:unset;background:white !important;color:#666 !important;border:1px solid #666;border-radius: 0 !important;min-width:unset !important;border-color:#999 !important;line-height:22px !important; font-size:10px !important;}
.is-clone-button{position:absolute;bottom:3px;left:3px;width:65px;display:none !important;}
.completed-pages .is-delete-button{display:none;}
.finish-order-button{
	position:absolute;
	bottom:78px;
	left:50%;
	width:66px;
	display:block;
	color:white !important;
	font-size:12px !important;
	margin:0 0 0 -33px !important;
	background:#00aeef !important;
	min-width:unset !important;
	height:30px !important;
	line-height:28px !important;
	border-radius:3px !important;
	border:1px solid #00aeef !important;
}
.finish-order-button.hidden{display:none !important;}
.saved-layout:hover button{display:block;}
/*.completed-1 .finish-order-button{display:none !important;}*/
.completed-1 .is-clone-button {left:50%;margin-left:-32.5px;display:none !important;}
.page-limit-reached .finish-order-button{display:none !important}
/**
 * SVG Styles
 */
.page-preview svg { user-select: none; -webkit-user-select: none;overflow:hidden}
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;}


/**
 * Modal
 */
#modal-message{display:none;}
/*#modal-message.opened{
	display:block;
	position:fixed;
	top:calc( 50vh - 130px );
	height:260px;
	width:400px;
	border-radius:15px;
	border:1px solid #eee;
	z-index: 100;
	background: white;
	left: calc( 50vw - 200px );
}*/
#modal-message.opened {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    max-height: 90vh;          /* prevents overflow */
    border-radius: 15px;
    border: 1px solid #eee;
    z-index: 100;
    background: white;
    padding:10px 25px;
}
#modal-message .close-modal{position:absolute;top:15px;right:15px;background:transparent;border:0;height:24px;width:24px;line-height:22px;outline:none;cursor:pointer;z-index:2;margin:0;padding:0;}
#modal-message .close-modal:before{color:#222;display:block;height:24px;width:24px;line-height:22px;margin:0;padding:0;}
#modal-message h2{margin:0;padding:18px 0 0 0;z-index:2;font-size:16px;}
#modal-message p{margin:0;padding:18px 0 0;line-height:1.2;z-index:2;}
#modal-message .close-line{
	padding:25px 0;
	z-index:2;
	width:100%;
	text-align:center;
}
#modal-message.no-ok .close-line{
	display:none;
}
/*#modal-message .close-line button{border:1px solid #ccc;background:white;color:#222;height:28px;width:120px;margin:0;padding:0;text-align:center;line-height:26px;outline:none;cursor:pointer;z-index:2;}
#modal-message .close-line button:hover{color:black;border:1px solid #222;}
*/
#modal-message.opened ~ #modal-backdrop{
	position		: fixed;
	left			: 0;
	top				: 0;
	width			: 100vw;
	height			: 100vh;
	background		: rgba(0,0,0,0.5);
	z-index			: 10;
}
#modal-message input{
	display			: block;
	margin			: 5px 0 !important;
	width			: 100%;
	text-align		: center;
}
#modal-message input.error{
	border			: 1px solid #aa0000;
}

.layout-name{
	position		: absolute;
	bottom			: 1px;
	left			: 1px;
	width			: calc( 100% - 2px);
	text-align		: center;
	font-size		: 12px;
	overflow		: hidden;
	height			: 30px;
	line-height		: 30px;
	background		: rgba(255,255,255,0.7);
	transition		: all ease 0.2s;
	font-weight		: 300;
}

/* Smooth, continuous spin */
@keyframes fa-spin-smooth {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* When uploading/processing */
.is-uploading {
	display: inline-flex;          /* keeps icon layout stable */
	align-items: center;
	justify-content: center;
}

/* If the element itself IS the icon */
.is-uploading,.loading i {
	animation: fa-spin-smooth 0.9s linear infinite;
	transform-origin: 50% 50%;
	will-change: transform;
}

/* If .is-uploading is on a wrapper and the FA icon is inside */
.is-uploading .fa-solid,
.is-uploading .fa-regular,
.is-uploading .fa-light,
.is-uploading .fa-thin,
.is-uploading .fa-duotone,
.is-uploading .fa-brands,
.is-uploading .fa {
	animation: fa-spin-smooth 0.9s linear infinite;
	transform-origin: 50% 50%;
	will-change: transform;
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.is-uploading,
	.is-uploading .fa-solid,
	.is-uploading .fa-regular,
	.is-uploading .fa-light,
	.is-uploading .fa-thin,
	.is-uploading .fa-duotone,
	.is-uploading .fa-brands,
	.is-uploading .fa {
		animation: none !important;
	}
}
.fa-spinner:before{
	font-family: 'Font Awesome 5 Pro';
	font-style: normal;
	font-size: 44px;
}

.btn {
  background-color: #00aeef;
  color: white;
  border: 1px solid #00aeef;
  font-size: 15px;
  line-height: 48px;
  height: 50px;
  min-width: 140px;
  text-transform: uppercase;
  margin: 0 auto;
  border:1px solid #00aeef;
  border-radius:3px;
  font-weight:400 !important;
}
.btn:hover {
  background: white;
  color: #00aeef;
  border:1px solid #00aeef;
}
.btn-subordinated {
  background: white;
  color: #00aeef;
  border:1px solid #00aeef;
}
.btn-subordinated:hover {
	background-color	: #00aeef;
	color				: white;
}
.is-published {
	border				: 2px solid #00aeef;
}
.is-published .finish-order-button {
	display				: none !important;
}
.is-published-label{
	display				: none;
}
.is-published .is-published-label {
	display				: block;
	position			: absolute;
	bottom				: 78px;
	left				: 0;
	width				: 100%;
	display				: block;
	font-size			: 12px !important;
	margin				: 0 0 0 0 !important;
	color				: white !important;
	background			: #00aeef !important;
	min-width			: unset !important;
	height				: 30px !important;
	line-height			: 30px !important;
	border-radius		: 0px !important;
	border				: 0 !important;
	letter-spacing		: 0.25px;
}
.is-published .is-published-label:before {
	content:"✓ ";
}

.layout-end .editing-done {
	padding-top:177px;
}

#a4-save .a4-full-next{display:none;}
.full-bleed #a4-save .a4-full-next{display:inline;}
.full-bleed #a4-save .a4-next{display:none;}