@import
	url('https://fonts.googleapis.com/css2?family=Baloo+Thambi+2:wght@400;500&display=swap')
	;

/* Common Containers */
body, html {
	background-color: rgba(18, 45, 66, 1);
	font-family: 'Baloo Thambi 2', cursive;
	margin: 0 !important;
	padding: 0 !important;
	font-size: calc(20px + 0.5vw);	
	box-sizing: border-box;
}

body {
	overflow-x: hidden;
}

body#workbench, html#workbench {
	/* height: calc(100vh - 5px); */
	/* 15px to cater for extra inherited magin at the top */
	height: 100%;
	overflow-y: hidden;
}

body h5 {
	color: #fff;
	text-decoration: none;
	
	font-family: inherit;
	font-weight: 400;
	font-size: 0.9rem;
	
	margin-top: 2rem;
	margin-bottom: 1.7rem;
}

.wordyDiv {
	color: white;
	font-size: 0.6rem;
}

.wordyDiv dl dd{
	margin-bottom: 1rem;
}

.wordyDiv dl a {
	color: white;
}

.wordyDiv .note{
	font-style: italic;
}

*, *:before, *:after {
	box-sizing: inherit;
}

#mainContainer {
	display: grid;
	/* grid-template-rows: 1.3rem auto */
	grid-template-rows: 1.3rem auto auto;
	grid-template-columns: 100%;
	grid-gap: 0.5rem;
	width: 93%;
	max-width: 1500px;
	margin-top: 10px;
	margin-bottom: 1rem;
	min-height: 98vh;
}

#workbench #mainContainer {
	/* height: calc(100% - 5px); */
	height: 100%;
	padding-bottom: 10px;
	grid-template-rows: 1.3rem auto;
}

/* Header */
header {
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: auto auto auto;
	grid-template-areas: "headerLeft headerMid headerRight";
	height: 100%;
}

header .logo {
	grid-area: headerLeft;
	justify-self: start;
	align-self: end;
	font-family: serif;
	/* font-size: 35px; */
	font-size: 1.3rem;
	height: 1.3rem;
	color: #fff;
	text-decoration: none;
}

header #headerMid { /* Preview DDL */
	position: relative;
}

header #headerMid div {
	position: absolute;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-end;
	width: 100%;	
}

header #headerMid select {
	align-self: flex-end;
	height: 1.1rem;
	background-color: #3E6B89;
	color: white;
	border: none;
	border-radius: 3px;
	text-align: center;
	font-size: 0.6rem;
	font-family: 'Baloo Thambi 2', cursive;
	outline: none;
}

/* (Workbench) loading wheel */
header #headerMid #loadSpinner {
	height: 0.7rem;
	width: 0.7rem;
	
	align-self: center;
	/* margin-left: 8px; */
	margin-left: 0.4rem;
	margin-right: -24px;
	position: relative;
	
	border: 2px solid #3E6B89;
	border-top: 2px solid rgba(255, 255, 255, 0.9);
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

/* Safari */
@-webkit-keyframes spin { 	
	0% {
		-webkit-transform: rotate(0deg);
	}

	100%
	{
		-webkit-transform: rotate(360deg);
	}
}

@keyframes spin { 
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

header #headerRight {
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-content: flex-end;
}

header #headerRight #btnSave {
	grid-area: headerRight;
	font-size: 0.9rem;
	font-weight: 500;
	height: 1.1rem;
	padding: 0 0.7rem;
	margin: 0;
	align-self: flex-end;
}

header #headerRight #donateForm {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: flex-end;
	margin: 0;
	padding-bottom: 2px;
}

#donateForm > #btnDonate {
	/* width: 5rem; */
	height: 1rem;
	margin: 0;
	padding: 0 0.5rem;
	background-color: #fff361;
	color: rgba(18, 45, 66, 1);
	font-size: 0.6rem;
}

#donateForm > #btnDonate:hover {
	background-color: #ffef33 !important;
}

footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* justify-content: center; */
	justify-content: flex-end;
	font-size: 0.6rem;
	height: 100%;
	color: white;
}

footer a {
	color: white;
}

/* General */
.middle {
	margin: auto;
}

.noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

/* Home Page */
#homeContentContainer {
	/* display: grid; */
	/* grid-template-rows: auto 38.2%;
	grid-gap: 25px; 
	width: 100%;
	height: 100%;*/
	color: white;
}

#feedbackButtonVertical {
	position: fixed;
	right: 0;
	top: 42%;
	width: 1.3rem;
	padding: 0.6rem 0.2rem 0.6rem 0.3rem;
	border-radius: 0.2rem 0 0 0.2rem ;
	z-index: 20;
}

#feedbackButtonVertical img {
	width: 100%;
}

#feedbackBox {
	position: fixed;
	bottom: -15rem; /* <--------------------   **Must be equal to (negative) #feedbackBody height */
	/* right: 80px; */
	right: 6%;
	width: 10rem;
	font-size: 0.7rem;
	z-index: 20;
	/* background-color: lime; */
	/* border: 3px solid green; */
}

#workbench #feedbackBox {
	display: none;
}

#feedbackBox #feedbackBody {
	/* background-color: white; */
	background-color: rgba(18, 45, 66, 1);
	height: 15rem;	/* <---------------------   **Must be equal to (positive) #feedbackBox bottom */
	border: 2px solid #F78536;
	border-bottom: none;
	border-top: none;
	color: white;
	padding: 8px;
}

#feedbackBox #feedbackBody > div {
	margin-top: 0.4rem;
}

#feedbackBox #feedbackHeader {
	display: flex;
	align-items: center;
	justify-content: center;
	
	width: 100%;
	height: 1.1rem;
	
	border-radius: 5px 5px 0 0;
	
	background-color: #F78536;
	/* background-color: #66ebff; */
	color: white;
	cursor: pointer;
	font-size: 0.7rem;
	padding: 4px;
}

#feedbackBox #feedbackHeader #headerText {
	margin-left: 0.2rem;
}

#feedbackBox #feedbackHeader img {
	height: 100%;	
}

#feedbackBox input, textarea {
	width: 100%;
	font-size: 0.6rem;
	font-family: inherit;
}

#feedbackBox textarea {
	height: 8rem;
}

#feedbackBox #feedbackBody #btnFbSubmit {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0 1rem;
	/* margin-top: 1rem; */
	margin-top: 0.3rem;
	width: 80%;
	height: 1rem;
}

#feedbackBox #feedbackHeader #closeButton{
	display: none;
	position: absolute;
	right: 0;
	margin-right: 0.5rem;
	padding: 0 0.2rem;
	font-size: 0.4rem;
	background-color: rgba(0,0,0,0.1);
	border-radius: 0.15rem;
	cursor: pointer;
}

#feedbackBox #feedbackHeader #closeButton:hover{
	background-color: rgba(0,0,0,0.2);
}

#feedbackBox.shown #feedbackHeader #closeButton{
	display: inline;
}

#feedbackBox #feedbackBody #lblStatusContainer {
	text-align: center;	
	margin-top: 0.2rem;
	height: 0.8rem;
	font-size: 0.6rem;
}

#workflowContainer {
	display: grid;
	grid-template-columns: 24% auto 24% auto 24%;	
	margin-top: 4rem;
	margin-bottom: 6rem;
}

#workflowContainer h3 {
	font-size: 0.7rem;
	font-weight: 400;
	margin: 0;
}

/* #dropBoxWrapper { */
/* width: 100%; */
/* } */
#workflowContainer div {
	text-align: center;
}

.workflowStep div {
	height: 100%;
}

.workflowStep img {
	width: 80%;
	margin-bottom: 5px;
	/* height: 80%; */
}

#workflowContainer .arrow {
	/* margin-left: auto;
	margin-right: auto; */
	margin-top: 45%;
}

#workflowContainer .arrow img {
	width: 100%;
	/* opacity: 0.8; */
	padding-left: 28%;
	padding-right: 28%;
}

#newsLetterContainer {
	margin: 1rem 0 1rem;
	/* margin: 3rem 0 6rem; */
	font-size: 0.5rem;
}

#newsLetterContainer h3 {
	/* margin: auto; */
	text-align: center;
	font-weight: 500;
	margin-bottom: 1.2rem;
	font-size: 1rem;
}

#newsLetterContainer #newsLetterBody {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	
	width: 100%;	
	
	font-size: 0.6rem;
	
	text-align: center;
}

#newsLetterContainer #newsLetterBody > span {
	margin-right: 0.3rem;
}

#newsLetterContainer #newsLetterBody > div {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

#newsLetterContainer #newsLetterBody #newsLetterUpdateCriterion{
	height: 1rem;
	font-size: 0.6rem;
	border-radius: 3px;
	/* vertical-align: middle; */
	margin-left: 0.1rem;
	margin-right: 0.1rem;
}

#newsLetterContainer #newsLetterBody #btnSubscribe {
	height: 1rem;
	font-size: 0.5rem;
	
	margin: 0;
	padding: 0 0.5rem
}

#newsLetterContainer #newsLetterBody #txtNewsLetterEmail {
	height: 1rem;
	font-size: 0.5rem;
	
	width: 7rem;
	margin-right: 10px;
}

.validationSuccess{
	color: lime !important;
}

.validationError {
	color: #ff0000 !important;
}

::placeholder {
  color: white;
  opacity: 0.6; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: white;
 opacity: 0.6;
}

::-ms-input-placeholder { /* Microsoft Edge */
 color: white;
 opacity: 0.6;
}

#dropBox {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 15rem;
	border: 2px dashed #F78536;
	border-radius: 5px;
}

#dropBox #message {
	width: 80%;
	text-align: center;
	font-size: 0.9rem;
	/* padding: 2rem 0 2rem; */
}

#dropBox #message h1 {
	font-size: 0.9rem;
	font-weight: 400;
	margin-bottom: 1.5rem;
	margin-top: 0;
}

#dropBox .dropBoxButton {	
	margin-top: 2.5%;	
	font-size: 1.2rem;
}

.orangeButton {
	display: inline-flex;
	margin: auto;
	align-items: center;
	background-color: #F78536;
	color: white;
	border: none;
	/* border-radius: 7px; */
	border-radius: 0.3rem;
	font-family: inherit;
	cursor: pointer;
	padding: 0 2rem;
}

.orangeButton:hover {
	background-color: #E67D34 !important;
}

#dropBox .dropBoxButton img {
	margin-right: 0.4rem;
	height: 1.2rem;
}

#dropBox #btnGoWorkbench {
	background-color: transparent;
	position: relative;
}

#dropBox #btnGoWorkbench #bgColourActive, #dropBox #btnGoWorkbench #bgColourInactive
	{
	background-color: #F78536;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	border-radius: inherit;
}

#dropBox #btnGoWorkbench #bgColourInactive {
	opacity: 0.6;
}

#dropBox #btnGoWorkbench .inactive:hover {
	cursor: default !important;
}

#dropBox #btnGoWorkbench .loading {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

#dropBox #btnGoWorkbench span {
	position: relative;
	z-index: 10;
	pointer-events: none;
}

#dropBox #dropButton img {
	margin: auto;
	margin-right: 0.5rem;
	height: 1.05rem;
}

#dropBox #errorMessage {
	color: red;
	font-size: 0.7em;
	height: 1em;
	margin-top: 0.5em;
}

#dropBox #fileUploadedScreen {
	width: 100%;
	height: 100%;
	text-align: center;
	display: grid;
	grid-template-columns: 66% auto;
}

#dropBox #workbenchOptions {
	display: flex;
	justify-content: center;
	align-items: center;
	border-right: 2px dashed #F78536;
}

#dropBox #workbenchOptions #optionsWrapper {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	width: 80%;
	height: 80%;
}

#dropBox #workbenchOptions #optionsWrapper #cardsWrapper {
	display: flex;
	justify-content: space-between;
	width: 100%;
	height: 70%;
}

/* #dropBox #workbenchOptions #presetOptionsCard {
	
} */

#dropBox #workbenchOptions #customOptionsCard {
	grid-gap: 0.5em;
}

#dropBox #workbenchOptions .optionsCard {
	display: grid;
	grid-template-rows: 20% auto;
	width: 47%;
	border: 2px solid white;
	/* padding: 15% 3% 2%; */
	padding: 2% 3% 2%;
	position: relative;
	box-sizing: border-box;
	border-radius: 5px;
	text-align: left;
}

.optionsCard .customRadio {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid white;
	border-radius: 999px;
	position: absolute;
	right: 10px;
	top: 10px;
	height: 16px;
	width: 16px;
	margin: 0;
	vertical-align: top;
	background-color: transparent;
	box-sizing: border-box;
}

.customRadio .radioSelected {
	width: 50%;
	height: 50%;
	background-color: white;
	border-radius: 999px;
	box-sizing: border-box;
}

.optionsCard .cardBody {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	height: 100%;

	/* 	background-color:red; */
}

#customOptionsCard .cardBody {
	justify-content: space-around;
}

.optionsCard .cardTitle {
	text-align: left;
	padding-right: 30px;
	font-size: min(1.9vw, 30px);
	margin-top: -2%;
	/* Cheap fix to compensate for the extra room in the span element */
	/* which makes the text look like it's offset south too much */
	/*position: absolute;
	left: 15px;
	top: 10px; */
	text-align: left;
}

#workbenchOptions .optionsCard img {
	/* height: 55%; */
	width: 25%;
	margin: auto;
}

.whiteBorderDDL{
	background-color: transparent;
	color: white;
	border: 2px solid white;
	
	font-family: 'Baloo Thambi 2', cursive;
	font-size: 0.6em;	
	
	/* -webkit-appearance: none; */
	-webkit-border-radius: 0px;
	border-radius: 0px;
}

.whiteBorderDDL option {
	background-color: rgba(18, 45, 66, 1);
}

.optionsCard .cardBody select {
	padding: 0;
	padding-left: 3px;
	
	width: 100%;
	margin: 0 auto;
	
	height: 31px;
}

.whiteBorderTextBox{
	background-color: transparent;
	border: 2px solid white;
	color: white;
	font-family: 'Baloo Thambi 2', cursive;
	text-align: center;
	font-size: 0.6em;
	border-radius: 3px;
}

/* .optionsCard .cardBody input {	
	
} */

.optionsCard .cardBody input[type=text] {
	width: 100%;
	height: 25px;	
}

.optionsCard .cardBody input[type=text], .optionsCard .cardBody select {
	border-radius: 3px;
	outline: none;
}

.optionsCard .cardBody select option {	
	padding: 0;
}

.optionsCard .cardBody label {
	display: inline-block;
	/* width: 4.8em;	 */
	font-size: 0.6em;
}

.optionsCard .cardBody .dimensions {
	margin-top: -16%;
}

.optionsCard .cardBody .dimensions div {
	/* 	display: grid;
	margin-bottom: 0.6em;
    grid-template-columns: 8vw auto; */
	text-align: left;
	margin-top: 0.5em;
}

#dropBox #workbenchOptions .dropBoxButton {
	display: block;
	width: 100%;
	text-align: center;
	padding: 0;
	margin: 0;
}

#dropBox #filePreview {
	padding: 2% 10%;
	font-size: 0.7rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	/* Required for truncating the file name in case its too long */
}

#dropBox #filePreview img {
	width: 50%;
	margin-bottom: 7%;
}

#dropBox #filePreview>span {
	display: inline-block;
	text-overflow: ellipsis;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
}

#dropBox #filePreview #removeFileWrapper {
	text-align: right;
	width: 100%;
	margin-bottom: 6%;
	margin-top: -5%;
}

#removeFileWrapper #removeFile {
	display: inline-block;
	background-color: red;
	border-radius: 5px;
	cursor: pointer;
	padding: 0 0.3rem;
	font-size: 0.5rem;
}

#promoContainer {
	display: flex;
	flex-direction: column;
	/* margin-top: 6rem; */
	margin-top: 2rem;
	font-size: 1rem;
}

#promoContainer h2 {
	font-size: 1rem;
	font-weight: 400;
	margin: 0;
}

#promoContainer .promoRow {
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
	margin-bottom: 4rem;
}

#promoContainer .promoRow:nth-child(2) {
	justify-content: flex-end;
}

#promoContainer .promoText {
	width: 38.197%;
	/* background-color: yellow; */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

#promoContainer .promoText h3 {
	font-size: 0.75rem;
	margin-top: 0.5rem;
	margin-bottom: 0;
	font-weight: 400;
	width: 85%;
}

#promoContainer .promoImage {
	/* width: 61.803%; */
	/* background-color: red; */
	width: 50%;
	display: flex;
	justify-content: center;
}

/* #promoContainer .promoText span {
	
	text-align: center;
} */

#promoContainer .promoImage img {
	width: 90%;
}

/* Workbench */
#workspaceMain {
	display: grid;
	grid-template-columns: min(12%, 160px) auto;
	grid-template-rows: auto;
	/* grid-column-gap: 12px; */
	grid-column-gap: 16px;
	height: 100%;
	min-height: 0;
}

aside, main {
	display: flex;
	height: 100%;
	min-height: 0;
}

#scroll {
	width: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
	/* 	padding: 7px; */
	/* padding-right: 18px; */
	padding-right: 8px;
	/* background-color: rgba(245, 245, 245, 0.3); */
	max-height: 100%;
}

#scroll .scrollPageContainer {
	width: 100%;
	margin-bottom: 7px;
	border-radius: 7px;
	padding: 4px;
	display: inline-flex;
	cursor: pointer;
}

#scroll img {
	width: 100%;
	border: 2px solid black;
}

#scroll #overlaidPages {
	display: none;
}

/* width */
#scroll::-webkit-scrollbar {
	width: 15px;
}

/* Track */
#scroll::-webkit-scrollbar-track {
	background-color: rgba(255, 255, 255, 0.3);
	border-radius: 3px;
}

/* Handle */
#scroll::-webkit-scrollbar-thumb {
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 3px;
}

/* Handle on hover */
#scroll::-webkit-scrollbar-thumb:hover {
	background-color: rgba(255, 255, 255, 0.7);
}

/* Custom Scrollbar for Mozilla */
body, html {
	scrollbar-color: #C1C1C1 #F1F1F1;
}

/* Actual Workbench Section

-------- HTML WS Area Layers -------
1 = #workspace div
2 = html canvas
3 = #overlay grid div (all 8 divs have blue background except the viewport in the middle) 
-------- WS Area Layers -------*/
#workspace {
	width: 100%;
	height: 100%;
	max-height: 100%;
	position: relative;
}

#workspace canvas {
	position: absolute;
	width: 100%;
	height: 100%;
	float: left;
}

#workspace #controlsOverlay {
	/* 	margin-left: 8px;
	margin-right: 8px;
    width: -moz-calc(100% - 16px);
  	width: -webkit-calc(100% - 16px);
  	width: -o-calc(100% - 16px);
  	width: calc(100% - 16px); */
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
	top: 0px;
	pointer-events: none;
	color: white;
	font-size: 16px;
	text-decoration: none;
}

#workspace #controlsOverlay a {
	color: inherit;
	text-decoration: inherit;
}

#workspace #controlsOverlay a, 
#workspace #controlsOverlay input, 
#workspace #controlsOverlay button {
	pointer-events: auto;
}

#workspace #cropControls {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	/* 	margin-top: 8px; */
}

#workspace #bottomControls {
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	position: absolute;
	bottom: 0px;
	width: 100%;
	align-items: center;
}

#workspace #bottomControls input {
	margin-right: 3px;
	border-radius: 3px;
	border: none;
	font-size: 18px;
	width: 2em;
}

#workspace #bottomControls button {
	border-radius: 6px;
	width: 2em;
	height: 1.5em;
	font-size: 18px;
	border: none;
	outline: none;
	cursor: pointer;
	padding-left: 0;
	padding-right: 0;
}

#workspace #controlsOverlay #bottomControls img {
	height: 100%;
	padding: 2px;
}

/* ----------------------------------- Responsiveness ---------------------------------------- */

@media only screen and ( min-width: 1800px ){
	#feedbackBox{
		right: 10%;
	}
}

/* Tablet ----------------------------------------- */
@media only screen and ( max-width : 768px ) {
	body, html {
		font-size: calc(12px + 0.8vh);		
	}
	
	#mainContainer {
		grid-template-rows: 1.6rem auto;
	}
	
	header {
		grid-template-columns: 1fr 1fr 1fr;
		grid-gap: 20px;
	}
	
	header .logo {
		font-size: 1.5rem;
		height: 1.5rem;
	}

	#workspaceMain {
		grid-template-columns: 100%;
		grid-template-rows: auto 16%;
		/* grid-template-rows: auto 5rem; */
		grid-template-areas: "main" "aside";
	}
	#workbench aside {
		grid-area: aside;
		width: 100%;
	}
	#workbench main {
		grid-area: main;
	}
	#workbench #scroll {
		overflow-y: hidden;
		overflow-x: scroll;
		height: 100%;
		width: 100%;
		padding-right: 0;
		padding-bottom: 5px;
	}
	#scroll #pagesImages {
		height: 100%;
		width: max-content;
	}
	#scroll .scrollPageContainer {
		float: left;
		height: 100%;
		width: auto;
		margin-bottom: 0;
		display: flex;
		/* display: block; */
	}
	#scroll img {
		width: auto;
		height: 100%;
	}
	
	@supports (-moz-appearance:none) { 
		#scroll .scrollPageContainer { 
			height: 12vh;
		}
	}

	#workspace #controlsOverlay {
		padding-left: 10px;
		padding-right: 10px;
	}
	
	#workspace #controlsOverlay #bottomControls {
		width: calc(100% - 20px);
	}
	
	/* (Vertical Width) */
	::-webkit-scrollbar {
		width: 0;
	}
	
	/* (Vertical Width) */
	#workbench::-webkit-scrollbar {
		height: 8px;
	}
	
	/* Track */
	#workbench::-webkit-scrollbar-track {
		background-color: rgba(255, 255, 255, 0.3);
		border-radius: 3px;
	}
	
	/* Handle */
	#workbench::-webkit-scrollbar-thumb {
		background-color: rgba(255, 255, 255, 0.5);
		border-radius: 3px;
	}
	
	/* Handle on hover */
	#workbench::-webkit-scrollbar-thumb:hover {
		background-color: rgba(255, 255, 255, 0.7);
	}
}

/* Phone and smaller ------------------------------- */
@media only screen and ( max-width : 426px) {
	body, html {
		/* font-size: calc(12px + 1.2vh); */
		font-size: 20px;
	}
	#mainContainer {
		grid-template-rows: 25px auto;
	}
	
	header {
		grid-gap: 0.4rem;
		height: 1rem;
	}
	
	header .logo {
		font-size: 1rem;
		height: 1rem;
	}
	
	#workbench header #headerMid {
		min-width: 5rem;
	}
	
	header #headerMid select {
		font-size: 0.6rem;
		height: 0.9rem;
	}
	
	header #headerMid select option {
		/* padding: 5px; */
		font-size: 0.6rem;
	}
	
	header #headerMid #loadSpinner {
		margin-left: 0.15rem;
	}
	
	header #headerRight #btnSave {
		font-size: 0.7rem;
		height: 0.9rem;
		padding: 0 0.3rem
	}
	
	header #donateForm > #btnDonate {
		padding: 0 0.2rem;
	}
	
	#homeContentContainer { 
		display: flex;
		flex-direction: column;
	}
	
	#newsLetterContainer {
		margin-bottom: 1rem;
		order: 2;
	}
	
	#newsLetterContainer #newsLetterBody {
		flex-direction: column;
		font-size: 0.75rem;
	}
	
	#newsLetterContainer #newsLetterBody > span {
		margin-bottom: 0.4rem;
		margin-right: 0;
		width: 10rem;
	}
	
	#newsLetterContainer #newsLetterBody #newsLetterUpdateCriterion{
		height: 1.5rem;
		font-size: 0.75rem;
	}
	
	#newsLetterContainer #newsLetterBody #btnSubscribe {
		height: 1.5rem;
		font-size: 0.75rem;
	}
	
	#newsLetterContainer #newsLetterBody #txtNewsLetterEmail {
		height: 1.5rem;
		font-size: 0.75rem;
	}
	
	#dropBox {
		height: auto;
		margin-bottom: 3rem;
		margin-top: 1rem;
		order: 1;
	}
	#dropBox #message {
		margin-top: 3em;
		margin-bottom: 3em;
	}
	#dropBox #fileUploadedScreen {
		grid-template-columns: 100%;
		grid-template-rows: 5.5rem auto;
	}
	#fileUploadedScreen #workbenchOptions {
		grid-row: 2;
		border: none;
		border-top: 2px dashed #F78536;
		box-sizing: border-box;
		padding-top: 1.1em;
		padding-bottom: 1.1em;
	}
	#fileUploadedScreen #filePreview {
		grid-row: 1;
		padding-left: 6%;
		padding-right: 6%;
	}
	#dropBox #workbenchOptions #optionsWrapper {
		width: 88%;
		height: 100%;
	}
	#dropBox #workbenchOptions #optionsWrapper #cardsWrapper {
		flex-direction: column;
		height: 88%;
	}
	#dropBox #workbenchOptions .optionsCard {
		width: 100%;
		height: 11em;
		padding-bottom: 4%;
		margin-bottom: 0.9em;
	}
	#dropBox #filePreview img {
		display: none;
	}
	#dropBox #filePreview {
		font-size: 1.1rem;
	}
	#dropBox .dropBoxButton {
		font-size: 1.1rem;
		padding: 0 1.5rem;
	}
	#dropBox .dropBoxButton img {
		height: 1.3rem;
	}
	
	.optionsCard .cardTitle {
		font-size: 1.2em;
	}
	.optionsCard .cardBody select {
		height: 38px;
	}
	.optionsCard .cardBody input[type=text] {
		height: 30px;
	}
	.optionsCard .cardBody label, .optionsCard .cardBody select,
		.optionsCard .cardBody input[type=text] {
		font-size: 0.9em;
	}
	.optionsCard .cardBody .dimensions {
		margin-top: -11%;
	}
	.optionsCard .cardBody .dimensions div:first-child {
		padding-bottom: 10px;
	}
	#workflowContainer {
		grid-template-columns: 100%;
		grid-template-rows: auto 10rem auto 10rem auto;		
		order: 3;
		margin-bottom: 3rem;
	}
	
	#workflowContainer h3 {
		font-size: inherit;
	}
	
	#workflowContainer .workflowStep {
		margin: auto;
	}
	#workflowContainer .workflowStep div {
		width: 94%;
		margin: auto;
		height: 100%;
	}
	.workflowStep img {
		height: auto;
	}
	#workflowContainer .arrow {
		display: flex;
		margin: 0;
		align-items: center;
		justify-content: center;
	}
	#workflowContainer .arrow img {
		transform: scaleX(-1) rotate(90deg); /* scaleX(-1) flips the image */
		width: 16%;
		/* margin: auto; */
		padding: 0;
	}
	#workspace #controlsOverlay {
		font-size: 0.5rem;
	}
	#workspace #bottomControls {
		grid-template-columns: 2fr 1.6fr 2fr;
	}
	#workspace #bottomControls button {
		width: 12vw;
	}
	#workspace #bottomControls button:first-child {
		margin-right: 5px;
	}
	#workspace #controlsOverlay {
		font-size: 0.6rem;
	}
	#workspace #controlsOverlay #bottomControls {
		font-size: 0.6rem;
	}
	#workspace #controlsOverlay #bottomControls .static {
		display: none;
	}
	
	#feedbackBox {
		width: 3rem;
	}
	
	#feedbackBox.shown {
		top: 5%;
		left: 0;
		bottom: auto;
		width: 100%;
	}
	
	#feedbackBox #feedbackBody {
		border-bottom: 2px solid #F78536;		
	}
	
	#feedbackBox #feedbackHeader {
		height: 2rem;
		font-size: 1rem;
	}
	
	#feedbackBox #feedbackHeader img {
		margin-right: 0;
		height: 1.2rem;
	}
	
	#feedbackBox #feedbackHeader #headerText{
		display: none;		
	}
	
	#feedbackBox.shown #feedbackHeader #headerText{
		display: inline;		
	}
	
	#feedbackBox #feedbackHeader #closeButton{
		margin-right: 1rem;
		font-size: 0.7rem;	
		padding: 0 0.4rem;
		border-radius: 0.3rem;
	}
	
	#feedbackBox.shown #feedbackHeader #closeButton{
		display: inline;
	}
	
	#promoContainer{
		order: 4;
		margin-top: 8rem;
	}
	
	#promoContainer .promoRow {
		flex-direction: column;
		justify-content: flex-start;
	}
	#promoContainer .promoRow:nth-child(2) {
		flex-direction: column-reverse;
		justify-content: flex-end;
	}
	#promoContainer .promoText, #promoContainer .promoImage {
		width: 100%;
	}
	
	#promoContainer .promoText {
		margin-top: 0.5rem;
	}
}

@media only screen and ( max-width : 300px) {
	#dropBox .dropBoxButton {
		font-size: 1rem;
		padding: 0 1rem;
	}
	
	#dropBox .dropBoxButton img {
		height: 1rem;
	}
}