:root{
	--proControlsWidth: 400px;
	--headerHeight: 60px;
	--primaryBtnColor: rgba(253,66,0, 1);
	--headerBgColor: #222;
	--validationMessageBGColor: red;
	--validationMessageTextColor: #fff;
}
body{
	padding: 0; 
	margin: 0; 
	font-family: system-ui, helvetica, arial, sans-serif;
	}

#bgMotionCanvas{
	display: block;
	height: 100vh;
	left: 0;
	position: fixed;
	top: 0;
	width: 100vw;
	z-index: -1;
}	

.mobileHidden{
	display: none;
}

.visibility-hidden{
	visibility: hidden;	
}

#header{
	background: var(--headerBgColor);
	color: #fff;
	display: flex;
	height: var(--headerHeight);
	justify-content: space-between;
	left: 0;
	position: fixed;
	top: 0;
	width: 100vw;
	z-index: 20;
	}
	
#header .logoCnt{
	display: flex;
	flex-direction: row;
	}
	
#header .logo{
	border: 1px solid #efefef;
	border-radius: 4px;
	box-sizing: border-box;
	height: calc(var(--headerHeight) - 10px);
	margin-top: 5px;
	margin-left: 20px;
	padding: 3px;
	width: calc(var(--headerHeight) - 10px);
	}
	
	
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){		
	#header .logo{
		border: 0.5px solid #efefef;
		}	
	}
	
#header .user-info {
	width: 100px;
	text-align: left;
	top: 5px;
	position: relative;
	}
#header .user-info .text-info{
	display: none;
}

#header .user-info .userImage{
	height: 48px;
	width: 48px;
	border-radius: 4px;
	margin-left: 21px;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	}

#header .user-info .userImage img{
	height: auto;
	width: 100%;
	}
#header .btnCnt{
	order: 3;
	display: flex;
	width: 300px;
	justify-content: flex-end;
}
#load-btn, #proControls .btn {
	background-color: var(--primaryBtnColor); 
	border: 0;
	border-radius: 4px;
	box-sizing: border-box;
	color: #fff;
	font-size: 14px;
	margin-right:20px; 
	
	padding: 10px; 
	text-align: center; 
	text-decoration: none;
	top: 13px;
	height: 35px;
	position: relative;
	}	
			
header h1{
	margin: 0 0 0 7px;
	line-height: 60px;
	font-weight: 100;
	}
header h1 span{
	font-size: 12px;
	}
		
h2{
	padding-left: 0px;
	margin-bottom: 0;
	}
		
canvas{ 
	display: block; 
	background: #eee; 
	margin: 0 auto; 
	top: 30px; 
	position: relative;
	margin-bottom: 60px;
	}
	
input[type="text"]{
	display: block;
	margin: 20px auto;
	padding: 10px;
	box-sizing: border-box;
	width: 100%;
	height: 35px;
	position: relative;
	}	

input#jobNumber{
	padding-left: 36px;
	box-sizing: border-box;
	}
		
.hidable-control{
	cursor: pointer;
	}
.spinner{
	height: 30vh;
	display: block;
	margin-bottom: 20px;
	}
	
.interface-builder-breadcrumb-bar{
	top: 60px;
	height: 60px;
	background: #ccc;
	position: fixed;
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	z-index: 10;
	}

.interface-builder-breadcrumb-bar div{	
	width: 50px;
	height: 50px;
	font-size: 9px;
	background: #eee;
	border: 1px solid #333;
	border-radius: 4px;
	padding: 3px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
	text-align: center;
	margin-left: 20px;
	}
.interface-builder-breadcrumb-bar div:hover{
	background: #666;
	color: #fff;
	cursor: pointer;
	}
			
#proControlsWrap{
	width: var(--proControlsWidth);
	height: calc(100vh - var(--headerHeight)); 
	padding-bottom: var(--headerHeight);
	position: fixed; 
	top: var(--headerHeight);
	background: #efefef;
	overflow: scroll;
	display: block;
	box-shadow: 0 5px 5px rgba(0,0,0,0.5);
	z-index: 1000;
	}
	
#proControls{
	width: inherit;
	height: auto;
	position: relative;
	display: block;
	}
	
#proControls ul li{
	list-style: none;
	padding: 0 0 0 10px;
	border-bottom: 1px solid #dfdfdf;
	
	}
	
#proControls ul li ul li{
	transition: border 0.5s ease;
	}
		
#proControls ul li li.hidable-control.open{
	border-bottom: 0;
	}
	
#proControls ul li ul li{
	padding: 1rem 0 1rem 10px;
	position: relative;
	}
	
#proControls#proControls ul li.no-border{
	border: 0;
	}	

#proControls, #proControls ul, #proControls ul ul{	
	padding-left: 0;
	}
	
#procontrolsList{
	margin:0;
	}
	
#proControls li, #proControls li ul li, #proControls li ul li{
	list-style: none;
	padding-bottom: calc(1rem + 4px);
	padding-left: 0;
	}
		
#procontrolsList li.sticky{
	position: -webkit-sticky;
	}
	
#proControls > ul > li.hidable-control{
	padding-left: 20px;
	}

#proControls h2, #proControls h3 {
	padding-left: 10px;
	cursor: pointer;
	}
	
#proControls h3 {
	margin-top: 0;
	margin-bottom: 0px;
	}
	
#proControls h2	{
	background: #444;
	color: #fff;
	padding: 10px 10px 10px 30px;
	margin-left: -20px;
	margin-top: 0;
	position: relative;
	}
	
#proControls .hidable-control svg {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid #fff;
	box-sizing: border-box;
	padding: 2px;
	position: absolute;
	display: inline-block;
	margin-right: 20px;
	right: 0;
	top: 12px;
	transform: rotate(0);
	transition: transform  0.25s ease-in-out;
	}	
	
#proControls .hidable-control h3~svg{
	border: 1px solid #aaa;
	top: 16px;
	}
	
#proControls .sectionDesc{
	padding-left: 10px;
	cursor: auto;
	}
		
#proControls h2.hidable-control.open ~svg,#proControls .hidable-control.open h3 ~ svg, #proControls .hidable-control.open h3 ~ p ~ svg { 
	transform: rotate(45deg);
	}
	
#proControls .hidable:not(.hidable-control):not(.image_gallery):not(#sGlobal):not(.sectionDesc){ 
	display: none;
	}
	
ul li fieldset{
	border: 0;
	padding: 10px 0 10px 10px;
	}
	
#proControls ul li fieldset.sizes input{	
	margin-bottom: 10px;
	}
	
#proControls input[type="text"]{	
	box-sizing: border-box;
	width: calc(100% - 20px);
	left: 0;
	margin-left: 0;
	}	
	
#proControls ul li fieldset label{
	display: block;
	}	
	
#proControls .image_gallery {
	display: flex;
	flex-direction: row;
	overflow-x: scroll;
	padding-bottom: 20px;
	width: calc(var(--proControlsWidth) - 34px);
	margin-top: 20px;
	box-sizing: border-box;
	}

#proControls .image_gallery .image_cnt{
	width: 80px; 
	height: 90px;
	display: block;
	margin-right: 5px;
	text-align: center;
	}

#proControls .image_gallery .image_cnt .overflowWrap{
	box-sizing: border-box;
	border: 1px solid #ccc;
	width: 80px; 
	height: 80px;
	overflow: hidden;
	display: flex;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;	
	}

#proControls .image_gallery .image_cnt .suggestedMsg, #proControls .image_gallery .image_cnt .currentMsg{
	width: 80px; 
	height: 15px;
	display: block;
	background: blue;
	}
#proControls .image_gallery .image_cnt .currentMsg{
	background: green;
}
#proControls .dndCnt.has-advanced-upload{
	outline-color: #000;
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(100% - 20px);
}
	
#proControls p{
	font-size: 12px;
	width: calc(100% - 20px);
	color: #666;
	}
#proControls h5{
	margin-bottom: 0;
}	


#proControls li > h4{
	padding-left: 10px;
}

#proControls h4{
	margin-top: 0;
	padding-left: 0px;
}

#proControls  p.desc{
	padding-left: 10px;
	width: 260px;
	margin-top: 5px;
	margin-bottom: 0;
	cursor: auto;
	}
	
		
#proControls .previewImageHolder{
	display: block;
	height: auto;
	width: calc(100% - 20px);
	}	
	
#proControls .previewImageHolder .previewImage{	
	width: 100%;
	}
	
#proControls .image_gallery .image_cnt .suggestedMsg:after, #proControls .image_gallery .image_cnt .currentMsg:after{
	content:"Suggested";
	font-size: 11px;
	text-align: center;
	line-height: 15px;
	position: relative;
	top: -3px;
	width: 80px!important;
	color: #fff;
	}
#proControls .image_gallery .image_cnt .currentMsg:after{
	content:"current";
	}

#proControls .image_gallery .image_cnt img{
	width: 80px; 
	height: 80px;
	display: block;
	object-fit: cover;
	}
	
svg{
	display: none;
	}
	
.preview-canvas-info-cnt .lock, .preview-canvas-info-cnt .refresh{
	width: 44px;
	height: 44px;
	border: 1px solid #000;
	border-radius: 4px;
	background: #fff;
	margin-right: 10px;
}

.btn-cnt svg{
	display: block;
	}

.preview-canvas-info-cnt div:last-of-type{
	margin-right: 0
	}

.preview-canvas-info-cnt{
	display: flex; 
	height: 60px; 
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	align-content: center;
}
	
canvas{
	border: 1px solid #000;
	}
	
#projectStep-final, #projectStep-upload{
	order: 9999;	
	}	
	
#projectStep-upload.large{
	height: 100vh
	}

.make-png, #startBtn, .btn-primary-link{
	padding: 20px; 
	background:var(--primaryBtnColor); 
	max-width:  calc(100vw - var(--proControlsWidth)); 
	color: #fff; 
	text-align: center; 
	box-sizing: border-box;
	border-radius: 4px;
	border: 0;
	font-size: 18px;
	max-height: 60px;
	}
.make-png{
	z-index: 100;
	position: relative;
	margin: 0 20px 20px 20px;
	margin-left: calc(var(--proControlsWidth) + 20px); 
	}
	
#header .make-png{
	max-width:  auto;
	margin-left: 20px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 10px;
}
	
#startBtn{
	
	}	
.make-png:hover{
	cursor: pointer;
	background:#2863bc;
	}	

body *.hidden{
	display: none!important;
	}


.make-png.options-Visible{
	left: var(--proControlsWidth);
	position: relative;
	width: calc(100vw - var(--proControlsWidth));
	}
	
#previewArea{
	align-items: stretch;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-items: center;
	left: var(--proControlsWidth);
	min-height: 100vh;
	margin-bottom: 40px;
	padding-bottom: var(--headerHeight);
	position: relative;
	top: 30px;
	width: calc(100vw - var(--proControlsWidth));
	}
	
.preview-canvas-cnt{
	align-items: center;
	border: 0.5px solid #ddd;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	flex-grow: 3;
	justify-content: center;
	min-width: 50%;
	padding: 20px;
	}

#previewArea #previewAreaOverlay{
	position: fixed;
	width: calc(100vw - var(--proControlsWidth));
	height: calc(100% - var(--headerHeight));
	background: rgba(40,40,40,.95);
	z-index: 1000;
	top: var(--headerHeight);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	}
	
#previewArea #previewAreaOverlay .spinner{
	width: 10vh;
	height: 10vh;
	background: url("../images/celina-spinner-v1.svg") center center no-repeat;
	background-size: cover;
	}

	
	
.preview-canvas-cnt .msgCnt{
	height: 16px;
	}
	
.preview-canvas-cnt .msgCnt.animate{
	animation: 1s ease-out forwards animateIn;
	}
	
.preview-canvas-cnt .msgCnt.animateOut{
	animation: 0.25s ease-out forwards animateOutFast;
	}
	
@keyframes animateIn{
	0%{opacity: 0;}
	17%{opacity: 1;}
	100%{opacity: 1;}
	}

@keyframes animateOutFast{
	0%{opacity: 1;}
	100%{opacity: 0;}
	}
	
@media screen and (min-width: 1920px){
	.preview-canvas-cnt{
		min-width: 25%;
		max-width: 50%;
		}
	}
.preview-canvas-cnt:hover{
	background: rgba(0,0,0,0.05);
	}	
#previewArea.hidden{
	display: none;
	}	
	
#previewArea .previewImg{
	border: 1px solid #000;
	display: block;
	height: auto;
	position: relative;
	
	}	

#previewArea h2, #previewArea h3{
	text-align: center;
	}
	
#downloadFinishedImageBtn{
	background:var(--primaryBtnColor); 
	color: #fff; 
	clear: both; 
	display: block;  
	height: 50px; 
	line-height: 50px;
	margin: 60px auto 0;
	text-align: center; 
	width: 300px; 
	}

	
#test fieldset{
	border:0;
	display: inherit;
	height:100%;
	text-align: left;
	max-width: 100%;
	align-items: inherit;
	justify-items: inherit;
	align-content: inherit;
	justify-content: inherit;
	flex-direction: column;
	position: relative;
	padding: 0;
	}

#test fieldset .dndCnt{
	display: flex;	
	height: 100%;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	width:100%;
	}
#test fieldset .dndCnt .dndCnt__input label{
	cursor: pointer;
}

#test fieldset .dndCnt .linkHighlight{
	font-weight: bold;
	text-decoration: underline;	
}
#test fieldset.checkboxCnt{	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	text-align: left;
	width: 100px;
	}
	
#test fieldset label{
	display: block;
	width: 100%;
	}

.dynamicControls{
	display: flex;
	flex-direction: column;
	height: 80px;
	margin-left: 0px;
	position: -webkit-sticky;
	top: 74px;
	width: 100%;
	z-index: 10;
	margin-bottom: 40px;
	}

.dynamicControls ul{
	border: 1px solid #ccc;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	margin: 0 0px 5px 0px;
	padding-left: 0;
	width: 100%;
	overflow: hidden;
	}

.dynamicControls ul:nth-of-type(2){
	margin-bottom: 0;
	}

.dynamicControls li{
	border-right: 1px solid #ccc;
	list-style: none;
	margin: 0;
	padding:8px 10px; 
	text-align: center;
	width: 100%;
	font-size: 10px;
	letter-spacing: 1px;
	}

.dynamicControls ul li:first-of-type, {
	font-weight: bold;
	}

.dynamicControls ul li:nth-of-type(2), .dynamicControls ul li:nth-of-type(1), .dynamicControls ul:nth-of-type(2) li{
	text-transform: uppercase;
	}
	
.dynamicControls ul li:nth-of-type(2), .dynamicControls ul li:nth-of-type(1), .dynamicControls ul:nth-of-type(2) li:nth-of-type(1), .dynamicControls ul:nth-of-type(2) li:nth-of-type(2){
	max-width: 150px;
	flex-shrink: 0;
	}
	
.dynamicControls li.btn:hover{
	cursor: pointer;
	}

.dynamicControls li.active{
	background: #bbb;
	font-weight: 700;
	}

.dynamicControls li:last-of-type{
	border-right: 0;
	}

/* hack to position the preceeding string in the job number box, fix when you are styling */
.f3.screen span{
	margin-top: -20px;	
	margin-left: -140px;
	position: relative;
	}

.preview-canvas-cnt canvas{
	 
	border: 1px solid #111;
	}
	
.previewImg{
	border: 1px solid #111;
	margin: 20px;
	}
	
#setupSVG{
	display: none;
	}


/************ Interface builder Image gallery ***********/ 

.gallery-question.screen {
	flex-direction: column;
	overflow: scroll;
	height: auto;
	}
	
.gallery-question.screen .questioncnt {
	margin-top: 50px;
	width: 90vw;
	box-sizing: border-box;
	height: auto;
	padding: 50px 0px 50px 50px;
	}
	
.screen .image_gallery{	
	display: flex;
	flex-wrap: wrap;
	}
	
.gallery-question.screen h5{		
	padding-left: 20px;
	}
	
.screen .image_gallery .image_cnt{
	padding: 20px;
	width: calc(33% - 40px);
	position: relative;
	}
	
.screen .image_gallery .image_cnt .suggestedMsg{
	width: calc(100% - 40px);
	height: 24px;
	display: block;
	background: var(--tertiaryColor);
	position: absolute;
	top: 19px;
	box-sizing: border-box;	
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	}

.screen .image_gallery .image_cnt .suggestedMsg:after{
	content:"Suggested";
	font-size: 11px;
	text-align: center;
	line-height: 24px;
	display: block;
	position: relative;
	top: 0px;
	left: 0;
	color: #fff;
	}
	
.screen .image_gallery .image_cnt .overflowWrap, .screen .image_gallery .image_cnt .overflowWrap img {
	width: 100%;
	}