label.label-agreement
{
	margin-bottom: .75rem;
	font-size: .85rem;
	color: #777;
}

.custom-color
{
	position: relative;
	display: inline-block;
	vertical-align: top;
}

.custom-color input[type='color']
{
	position: relative;
	display: none;
	appearance: none;
	-webkit-appearance: none;
}

.custom-color .color-display
{
	position: relative;
    background-color: #F7F7F7;
    padding: .25rem .25rem;
    width: 1.5rem;
	height: 1.5rem;
    border: 1px solid #BBB;
	margin-top: .1rem;
    margin-bottom: .65rem;
}

.custom-color .color-display .color
{
    background-color: black;
    width: 100%;
	height: 100%;
}

.editor
{
	position: relative;
	width: 100%;
	//height: 40vw;
	height: auto;
	margin-bottom: 1.5rem;
	border: 1px solid rgba(25, 25, 25, .35);
	border-radius: 7.5px;
	font-size: 0;
	overflow: hidden;
}

.popup
{
	position: absolute;
	display: none;
	background-color: rgba(0, 0, 0, .5);
	width: 100%;
	height: 100%;
	font-size: .9rem;
	z-index: 1050;
}

.popup .popup-container
{
	position: absolute;
	background-color: white;
	max-width: 100%;
	max-height: 90%;
	padding: 1rem;
	padding-top: 1.75rem;
	border-radius: 7.5px;
	top: 5%;
	left: 50%;
	transform: translateX(-50%);
	box-shadow: 0 0 10px rgba(0, 0, 0, .5);
	overflow-y: auto;
}
#popup-upload .popup-container
{
	width: 40rem;
}

.popup .popup-container .popup-close
{
	position: absolute;
	padding: .25rem;
	top: .25rem;
	right: .5rem;
	font-size: 1.1rem;
	color: black;
	line-height: 100%;
	cursor: pointer;
	z-index: 2;
	transition: color .35s, transform .35s;
}
.popup .popup-container .popup-close:hover
{
	transform: rotate(90deg);
	color: #888;
}

.popup .popup-spinner
{
	position: absolute;
	background-color: rgba(0, 0, 0, .4);
	width: 100%;
	height: 100%;
}

.popup .popup-spinner:after
{
	content: '\f110';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(0deg);
	font-family: "Font Awesome 5 Free";
	font-size: 1.75rem;
	font-weight: bold;
	color: #DDD;
	line-height: 100%;
	text-shadow: 0 0 10px rgba(0, 0, 0, .55);
}
.popup.active .popup-spinner:after
{
	animation: spinnerAnim 1.6s ease-in-out infinite;
}

@keyframes spinnerAnim
{
	0%
	{
		transform: translate(-50%, -50%) rotate(0deg);
	}
	
	7%
	{
		transform: translate(-50%, -50%) rotate(0deg);
	}
	
	93%
	{
		transform: translate(-50%, -50%) rotate(360deg);
	}
	
	100%
	{
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

#popup-artwork .popup-container
{
	width: 85%;
}

#popup-artwork .category-list,
#popup-artwork .subcategory-list
{
	position: relative;
	list-style: none;
	padding-left: 1em;
	user-select: none;
}

#popup-artwork .subcategory-list li
{
	position: relative;
}

#popup-artwork .subcategory-list:before
{
	content: '';
	position: absolute;
	background-color: #333;
	width: 1.5px;
	height: 100%;
	left: .8em;
	top: 0;
}
#popup-artwork .subcategory-list .subcategory-list:before
{
	background-color: #666;
}
#popup-artwork .subcategory-list .subcategory-list .subcategory-list:before
{
	background-color: #BBB;
}

#popup-artwork .subcategory-list li:before
{
	content: '';
	position: absolute;
	background-color: #333;
	width: 7.5px;
	height: 1px;
	left: -.2em;
	top: calc(.6rem - 1px);
}
#popup-artwork .subcategory-list .subcategory-list li:before
{
	background-color: #666;
}
#popup-artwork .subcategory-list .subcategory-list .subcategory-list li:before
{
	background-color: #AAA;
}

#popup-artwork .category-list li a,
#popup-artwork .category-list li a
{
	position: relative;
	padding-left: 1.5rem;
}

#popup-artwork .category-list li a:before,
#popup-artwork .category-list li a:before
{
	position: absolute;
	//content: '\f111';
	left: .5rem;
	font-family: "Font Awesome 5 Free";
	font-size: .5rem;
	font-weight: bold;
	transition: transform .35s;
}
#popup-artwork .category-list li a.has-sub:before,
#popup-artwork .category-list li a.has-sub:before
{
	content: '\f105';
	font-size: 1rem;
}
#popup-artwork .category-list li a.has-sub[aria-expanded='true']:before,
#popup-artwork .category-list li a.has-sub[aria-expanded='true']:before
{
	transform: rotate(90deg);
}

#popup-artwork .artwork-list
{
	font-size: 0;
}

#popup-artwork .artwork-list-item
{
	position: relative;
	display: inline-block;
	background-color: white;
	width: calc(20% - .65rem - 2px);
	height: 10vw;
	padding: .75rem;
	border: 1px solid rgba(175, 175, 175, .65);
	margin: .25rem;
	cursor: pointer;
	vertical-align: top;
	transition: box-shadow .35s, border .35s;
}

#popup-artwork .artwork-list-item:hover
{
	border: 1px solid rgba(100, 100, 100, .75);
	box-shadow: 0 0 7.5px rgba(0, 0, 0, .25);
}

#popup-artwork .artwork-list-item img
{
	position: relative;
	max-width: 100%;
	max-height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#popup-choose-design .popup-container
{
	width: 85%;
}

#popup-choose-design .design-list-item
{
	position: relative;
	display: inline-block;
	background-color: #EEE;
	width: calc(16.5% - .5rem - 2px);
	height: 10vw;
	//padding: .75rem;
	border: 1px solid rgba(175, 175, 175, .65);
	margin: .25rem;
	cursor: pointer;
	vertical-align: top;
	transition: box-shadow .35s, border .35s;
}

#popup-choose-design .design-list-item:hover
{
	border: 1px solid rgba(100, 100, 100, .75);
	box-shadow: 0 0 7.5px rgba(0, 0, 0, .25);
}

#popup-choose-design .design-list-item img
{
	position: relative;
	max-width: 100%;
	max-height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.editor .topbar-area
{
	display: none;
	background-color: white;
	border-bottom: 1px solid #DDD;
	z-index: 1001;
}

.editor .topbar-area .btn-controls-area,
.editor .topbar-area .btn-proceed-area
{
	display: inline-block;
	background-color: white;
	padding: .75rem .95rem;
	border-right: 1px solid #DDD;
	line-height: 100%;
	cursor: pointer;
}

.editor .topbar-area .btn-controls-area:after,

.editor .topbar-area .btn-proceed-area:after
{
	content: '\f0c9';
	color: black;
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	font-size: 1.25rem;
	line-height: 100%;
	transition: color .35s;
}

.editor .topbar-area .btn-controls-area:hover:after,
.editor .topbar-area .btn-proceed-area:hover:after
{
	color: var(--theme-color);
}

.editor .topbar-area .btn-proceed-area
{
	position: absolute;
	right: 0;
	border-right: 0;
	border-left: 1px solid #DDD;
}

.editor .topbar-area .btn-proceed-area:after
{
	content: '\f07a';
}

.editor .controls-area .btn-close-controls-area,
.editor .proceed-area .btn-close-proceed-area
{
	display: none;
	padding-bottom: .75rem;
	text-align: center;
}

.editor .controls-area .btn-close-controls-area:before,
.editor .proceed-area .btn-close-proceed-area:before
{
	content: '\f00d';
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	font-size: 1.5rem;
}

.editor .controls-area .btn-close-controls-area:hover:before,
.editor .proceed-area .btn-close-proceed-area:hover:before
{
	color: var(--theme-color);
}

.editor .controls-area
{
	position: relative;
	display: inline-block;
	background-color: white;
	width: 20%;
	height: 100%;
	padding: .75rem;
	font-size: .9rem;
	vertical-align: top;
}

.editor .controls-area .btn-control
{
	background-color: #F0F0F0;
	width: 100%;
	padding: .75rem;
	border: 1px solid #E0E0E0;
	margin-bottom: .5rem;
	outline: none;
	font-size: 1rem;
	//font-weight: bold;
	color: black;
	text-align: left;
	line-height: 100%;
	-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
	box-shadow: 0 0 3px rgba(0, 0, 0, .15);
	transition: background .35s;
}

.editor .controls-area .btn-control:hover
{
	background-color: #DADADA;
}

.editor .controls-area .btn-control i
{
	margin-right: .35rem;
	font-size: 1.2rem;
	color: var(--theme-color);
}

.editor .canvas-wrapper
{
	position: relative;
	display: inline-block;
	background-color: #EEE;
	width: 60%;
	height: 100%;
	min-height: 75vh;
	padding: 1rem;
	font-size: 1.25vw;
	user-select: none;
	text-align: center;
	vertical-align: top;
	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, .3);
	box-shadow: inset 0 0 5px rgba(0, 0, 0, .3);
	overflow: hidden;
}

.editor .canvas-overflow
{
	position: relative;
	display: inline-block;
	overflow: hidden;
}

.editor .canvas
{
	position: relative;
	background-color: white;
	display: inline-block;
	-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .25);
	box-shadow: 0 0 4px rgba(0, 0, 0, .25);
	//overflow: hidden; /* Dont use overflow hidden on canvas otherwise html2canvas export image will be cut-off */
}

.editor .canvas .frame
{
	position: relative;
	max-width: calc(100% - 0rem);
	max-height: calc(90vh - 5rem);
	user-select: none;
	pointer-events: none;
	z-index: 1001;
}

.editor .canvas .watermark
{
	position: absolute;
	display: none;
	width: 100%;
	height: auto;
	padding: 10%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	user-select: none;
	pointer-events: none;
	opacity: .1;
	z-index: 1005;
}

.editor-export .canvas-item,
.editor .canvas .canvas-item
{
	position: absolute;
	min-width: 35px;
	min-height: 35px;
	width: 10vw;
	height: auto;
	border: 1.5px dashed transparent;
	top: 1.5rem;
	left: 1.5rem;
	user-select: none;
	cursor: pointer;
	line-height: 100%;
}
.editor .canvas .canvas-item.active
{
	//border-color: #777;
	cursor: move;
}

.editor-export .canvas-item img,
.editor .canvas .canvas-item img
{
	position: relative;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	user-select: none;
}

.editor-export .canvas-item span,
.editor .canvas .canvas-item span
{
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	font-weight: inherit;
	text-decoration: inherit;
	text-align: inherit;
	text-stroke: inherit;
	-webkit-text-stroke: inherit;
}

.editor .canvas-wrapper #editor-active-controls
{
	position: absolute;
	display: none;
	width: 100%;
	height: 100%;
	border: 1.5px dashed #777;
	font-style: normal;
	font-size: .9rem;
	color: black;
	text-align: left;
	text-stroke: 0;
	-webkit-text-stroke: 0;
	pointer-events: none;
	z-index: 1010;
}

.editor .canvas-wrapper #editor-active-controls .control-move,
.editor .canvas-wrapper #editor-active-controls .control-rotate,
.editor .canvas-wrapper #editor-active-controls .control-delete,
.editor .canvas-wrapper #editor-active-controls .control-scale
{
	position: absolute;
	background-color: white;
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid rgba(0, 0, 0, .5);
	top: 0;
	left: 0;
	transform: translate(-100%, -100%);
	user-select: none;
	cursor: move;
	pointer-events: auto;
	-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .5);
	box-shadow: 0 0 3px rgba(0, 0, 0, .5);
}
.editor .canvas-wrapper #editor-active-controls .control-rotate
{
	top: 0;
	left: auto;
	right: 0;
	transform: translate(100%, -100%);
	cursor: grab;
}
.editor .canvas-wrapper #editor-active-controls .control-delete
{
	top: auto;
	bottom: 0;
	transform: translate(-100%, 100%);
	cursor: pointer;
}
.editor .canvas-wrapper #editor-active-controls .control-scale
{
	top: auto;
	left: auto;
	bottom: 0;
	right: 0;
	transform: translate(100%, 100%);
	cursor: nw-resize;
}

.editor .canvas-wrapper #editor-active-controls .control-move:before,
.editor .canvas-wrapper #editor-active-controls .control-rotate:before,
.editor .canvas-wrapper #editor-active-controls .control-delete:before,
.editor .canvas-wrapper #editor-active-controls .control-scale:before
{
	content: '\f0b2';
	position: relative;
	display: inline-block;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	font-size: 1rem;
}
.editor .canvas-wrapper #editor-active-controls .control-rotate:before
{
	content: '\f2f1';
}
.editor .canvas-wrapper #editor-active-controls .control-delete:before
{
	content: '\f1f8';
}
.editor .canvas-wrapper #editor-active-controls .control-scale:before
{
	content: '\f338';
	transform: translate(-50%, -50%) rotate(-45deg);
}

.editor .proceed-area
{
	position: relative;
	display: inline-block;
	background-color: white;
	width: 20%;
	height: 100%;
	padding: .5rem;
	font-size: .9rem;
	vertical-align: top;
	overflow: auto;
}

.editor-container
{
	position: relative;
	//max-height: 62.5%;
	border: 1px solid #BBB;
	border-radius: 5px;
	font-size: .9rem;
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .15);
	box-shadow: 0 0 5px rgba(0, 0, 0, .15);
}
.editor-container.float
{
	position: absolute;
	max-height: none;
	top: 5px;
	left: 5px;
	z-index: 1025;
}
.editor-container.float .title
{
	cursor: move;
}

.editor-container .title
{
	position: relative;
	background-color: #EEE;
	width: 100%;
	padding: .65rem;
	border-bottom: 1px solid #DDD;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	font-size: 1rem;
}
.editor-container.allow-collapse .title
{
	cursor: pointer;
}
.editor-container.allow-close .title,
.editor-container.allow-collapse .title
{
	padding-right: 1.85rem;
}
.editor-container.allow-close .title .btn-close
{
	content: '\f00d';
	position: absolute;
	padding: .25rem;
	top: 50%;
	right: .4rem;
	transform: translateY(-50%);
	font-size: 1rem;
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	color: black;
	line-height: 100%;
	cursor: pointer;
	transition: transform .35s, color .35s;
}
.editor-container.allow-close .title .btn-close:hover
{
	transform: translateY(-50%) rotate(90deg);
	color: #888;
}
.editor-container.allow-collapse .title:after
{
	content: '\f0da';
	position: absolute;
	top: 50%;
	right: .65rem;
	transform: translateY(-50%);
	font-size: 1rem;
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	transition: transform .35s;
}
.editor-container.allow-collapse .title[aria-expanded='true']:after
{
	transform: translateY(-50%) rotate(90deg);
}

.editor-container .content
{
	background-color: white;
	width: 100%;
	padding: .65rem;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	margin-bottom: 0;
	list-style: none;
	font-size: .85rem;
	overflow: auto;
}

#editor-layers.content
{
	max-height: 16rem;
}

.editor-container .content .row
{
	margin: 0;
}
.editor-container .content label
{
	font-size: .85rem;
}

.editor-container .content > li
{
	position: relative;
	background-color: white;
	width: 100%;
	padding: .3rem;
	padding-right: 1rem;
	border: 1px solid #BBB;
	border-radius: 5px;
	margin-bottom: .2rem;
	user-select: none;
	cursor: pointer;
	transition: background .35s, border .35s, font-weight .35s, box-shadow .35s;
}
.editor-container .content > li:hover
{
	background-color: #F0F0F0;
	border: 1px solid var(--theme-color-secondary);
	-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .25);
	box-shadow: 0 0 3px rgba(0, 0, 0, .25);
}
.editor-container .content > li.active
{
	background-color: #F0F0F0;
	border: 2px solid var(--theme-color-secondary);
	font-weight: bold;
	-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .25);
	box-shadow: 0 0 3px rgba(0, 0, 0, .25);
}

.editor-container .content > li:before
{
	content: '\f302';
	margin-right: .35rem;
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
}
.editor-container .content > li.layer-image:before
{
	content: '\f093';
}
.editor-container .content > li.layer-text:before
{
	content: '\f031';
}

.editor-container .content > li:after
{
	content: '\f338';
	position: absolute;
	top: 50%;
	right: .35rem;
	transform: translateY(-50%);
	font-family: "Font Awesome 5 Free";
	font-size: .9rem;
	font-weight: bold;
}

.editor-container .btn.btn-container
{
	background-color: #EEE;
	padding: .25rem .5rem;
	border: 1px solid rgba(175, 175, 175, .5);
	font-size: .8rem;
	color: black;
}

.editor-container .btn.btn-container:hover
{
	background-color: #CCC;
	color: black;
}

.editor-container .btn-text-style.active,
.editor-container .btn-text-align.active
{
	background-color: var(--theme-color);
	color: white;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.editor-container .btn-text-style.active:hover,
.editor-container .btn-text-align.active:hover
{
	background-color: rgba(var(--theme-color-r), var(--theme-color-g), var(--theme-color-b), .7);
	color: white;
}

.colorpicker
{
	z-index: 1030;
}

.colorpicker input[type='text'],
.colorpicker input[type='number']
{
	position: absolute;
	background: transparent;
	width: auto;
    padding: 0;
	border: none;
    margin: 0;
    top: 6px;
    right: 13px;
    font-size: 10px;
}

#lamination-option
{
	padding: 0;
	list-style: none;
	font-size: 0;
}

#lamination-option li
{
	position: relative;
	display: inline-block;
	width: calc(25% - .5rem);
	border: 0px solid var(--theme-color);
	margin: .25rem;
	cursor: pointer;
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .4);
	box-shadow: 0 0 5px rgba(0, 0, 0, .4);
	overflow: hidden;
	transition: border .35s, border-radius .35s;
}
#lamination-option li.active,
#lamination-option li:hover
{
	border: 1.5px solid var(--theme-color);
	border-radius: 100%;
}
#lamination-option img
{
	max-width: 100%;
	max-height: 100%;
}

.lamination-detail
{
	display: none;
	padding: .35rem;
	border: 1px solid rgba(175, 175, 175, .6);
	margin-bottom: 1rem;
	font-size: .85rem;
	line-height: 125%;
}

.lamination-detail.active
{
	display: block;
}

.grandtotal
{
	margin: .65rem 0;
	font-size: 1.3rem;
	font-weight: bold;
	color: var(--theme-color);
}

.hints
{
	font-size: .9rem;
	color: #777;
}

.btn-deletedesign
{
	background-color: rgb(180, 25, 25);
}

.btn-deletedesign:hover
{
	background-color: rgb(200, 20, 20, .7);
}

.editor-export
{
	position: absolute;
	display: none;
	background-color: white;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 10000;
}

/* Desktop Style */
@media (min-width: 1200px)
{
	
}

/* Non-desktop Style */
@media (max-width: 992px)
{
	#popup-artwork .artwork-list-item
	{
		width: calc(50% - .5rem - 2px);
		height: 30vw;
		padding: .5rem;
	}

	#popup-choose-design .design-list-item
	{
		width: calc(50% - .5rem - 2px);
		height: 30vw;
	}

	.editor .topbar-area
	{
		display: block;
		
	}
	
	.editor .controls-area,
	.editor .proceed-area
	{
		position: absolute;
		width: 85%;
		height: 100%;
		border-right: 1px solid #DDD;
		top: 0;
		left: -100%;
		z-index: 1002;
		-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3);
		box-shadow: 0 0 5px rgba(0, 0, 0, .3);
		overflow-y: auto;
		transition: left .5s, right .5s;
	}
	
	.editor .controls-area .btn-close-controls-area,
	.editor .proceed-area .btn-close-proceed-area
	{
		display: block;
	}
	
	.editor .controls-area.active
	{
		left: 0;
	}
	
	.editor .proceed-area
	{
		left: auto;
		right: -100%;
	}
	
	.editor .proceed-area.active
	{
		right: 0;
	}
	
	.editor .canvas-wrapper
	{
		width: 100%;
	}
	
	.editor-container
	{
		max-height: 100%;
	}
}

/* Mobile Style */
@media (max-width: 768px)
{
	#popup-choose-design .design-list-item
	{
		width: calc(100% - .5rem - 2px);
		height: 55vw;
	}
}