:root {
	--accent: rgba(144, 22, 22, 1);
	--2ndAccent: rgb(226, 42, 42);
	--accentShadow: 0px 5px 25px 0px rgba(105, 0, 0, 0.25);
}








.optionsEditor.dragDrop .optionName.active {
	border-top:1px solid rgba(0, 76, 247, 1);
}

.optionsEditor.dragDrop .optionName.dim {
	opacity:.5;
}

.optionValue {
	padding:0px;
	border-bottom:0px solid black;
}

.parentLabel {
	font-size:.65em;
	opacity:.5;
	padding-left:5px;
}

.optionsEditor .halfSection:nth-child(even) input {
	border-left:1px solid rgba(255, 255, 255, 0.081);
}

.newCameraSettings {
	display:none;
}

/* .optionValue input {
	border-left:1px solid rgba(255, 255, 255, 0.081) !important;
} */

.assignSettingTitle,
.recipeSetting h2 {
	display: block;
	vertical-align:middle;
	margin-bottom:15px;
}

input.assignSetting {
	display: inline-block;
	vertical-align:middle;
	width:175px;
	margin-right:10px;
}

.assignSpan {
	display: inline-block;
	vertical-align:middle;
	color: rgba(255, 255, 255, 0.539);
	padding-right:10px;
}






/* Inputs & Forms */

input,
select {
	-webkit-appearance: none;
	outline: none;
	display:inline-block;
	vertical-align: top;
	top:0;
	left:0;
	right:0;
	margin: 6px auto;
	width:100%;
	border:0;
	border:1px solid rgba(255, 255, 255, 0.05);
	padding:9px 14px;
	background: rgba(255, 255, 255, 0.02);
	color:white;
	font-size:14px;
	font-weight:200;
	transform:translateY(1px);
	border-radius:6px;
	transition: all .075s;
}

select {
	padding-right:28px;
}

select.lite {
	background: rgba(255, 255, 255, 0.1);
}

select.mini {
	padding: 5px 8px;
	line-height: 14px;
	padding-right: 20px;
	padding-bottom: 6px;
}

input.half-width {
	width:calc(50% - 6px);
}

input:nth-child(even) {
	margin-right:12px;
}

input:focus,
input.defined {
	background: rgba(255, 255, 255, 0.045);
	/* border-bottom:1px solid var(--accent); */
}

.searchField {
	position: relative;
}

.searchField::after {
	content: "\f002";
	font-family: 'Font Awesome 5 Pro';
	font-weight: 900;
	position: absolute;
	top:0;
	bottom:0;
	right:8px;
	margin: auto;
	font-size:14px;
	width:16px;
	height:13px;
	color:rgba(255, 255, 255, .3);
}






/* Headings */

h1 {
	margin:25px 0;
	padding:0;
	font-size:24px;
	font-weight:600;
}








/* links & buttons */

a {
	display:inline-block;
}

a.subtle {
	font-size:.75em;
	color:rgba(255, 255, 255, 0.65);
}

.btn {
	-webkit-appearance: none;
	display: inline-block;
	margin-top: 6px;
	border-radius: 10000px;
	padding: 6px 12px;
	background: rgba(37, 37, 37, 1);
	border: 1px solid rgba(255, 255, 255, 0.075);
	box-shadow: 0px 5px 25px 0px rgba(53, 53, 53, 0.25);
	cursor: pointer;
	color: white;
	font-weight: 300;
	font-size: 12px;
	line-height: 16px;
	font-family: "Montserrat", sans-serif;
	transition: background .2s;
}

.btn.large {
	padding: 8px 24px;
}

.btn-red,
.btn-red:hover {
	background: var(--accent);
	border:1px solid rgba(255, 255, 255, 0.075);
	box-shadow: var(--accentShadow);
}

.btn.disabled {
	color:rgba(137, 137, 137, 1);
	cursor: not-allowed;
}

.icon-btn {
	-webkit-appearance: none;
	display:inline-block;
	vertical-align: top;
	margin-top:6px;
	border-radius:10000px;
	background: rgba(37, 37, 37, 1);
	border:1px solid rgba(255, 255, 255, 0.075);
	box-shadow: 0px 5px 25px 0px rgba(53, 53, 53, 0.25);
	padding:0px;
	height:30px;
	width:30px;
	line-height: 29px;
	font-size:14px;
	text-indent:1px;
	text-align: center;
	cursor:pointer;
	color:white;
	transition: background .2s;
}

.btn.full-width {
	width:100%;
}

.btn:not(.disabled):hover,
.icon-btn:not(.disabled):hover {
	background: rgba(50, 50, 50, 1);
}

.btn.full-width:hover {
	transform: scale(1);
}









/* Login Page */

.loginContainer {
	width:100%;
	text-align: center;
}

.loginContainer,
.loginContainer::after {
	min-height:calc(80vh - 60px - 50px);
}

.loginContainer::after {
	content:"";
	display: inline-block;
	vertical-align: middle;
	width:0px;
}

.loginForm {
	display: inline-block;
	vertical-align: middle;
	width:350px;
	/* background:rgb(17, 17, 17);
	border:1px solid rgba(255, 255, 255, 0.06);
	border-radius: 6px;
	box-shadow:0px 10px 30px rgba(0, 0, 0, 0.416); */
}





/* Footer */

/* footer {
	position: absolute;
	bottom:0;
	left:0;
	right:0;
	margin: auto;
	margin-bottom: 15px;
	text-align:center;
	opacity:.2;
} */




/* Navigation */

header {
	position: fixed;
	z-index:1000;
}

header:before {
	content:"";
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin: auto;
	background:#171717;
	border-bottom:1px solid #1F1F1F;
	z-index:0;
}

header .shadowCloser {
	opacity:0;
	pointer-events: none;
	content:"";
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin: auto;
	background:rgba(0, 0, 0, 0.566);
	transition:opacity .3s;
	z-index:-3;
}

header.navOpen .shadowCloser {
	opacity:1;
	pointer-events: all;
}

header,
.headerSpacer {
	top:0;
	left:0;
	right:0;
	margin: auto;
	height:60px;
}

header .logo {
	display: block;
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin: auto;
	height:30px;
	width:auto;
}

header .menuButton {
	display: block;
	position: absolute;
	top:0;
	left:15px;
	bottom:0;
	margin: auto;
	height:40px;
	width:40px;
	line-height: 40px;
	border-radius:50%;
	background: rgba(255, 255, 255, 0);
	text-align:center;
	transition:background .1s;
}

header .mainMenuBtn {
	cursor: pointer;
}

header .menuButton:active, 
header .mainMenuBtn:active .menuButton {
	background: rgba(255, 255, 255, 0.1);
}

.pageTitle {
	display: block;
	position: absolute;
	top:0;
	left:60px;
	bottom:0;
	margin: auto;
	height:22px;
	font-size:16px;
	line-height: 22px;
	color:white;
}

.mainNav {
	pointer-events: none;
	position:absolute;
	top:100%;
	left:0;
	bottom:0;
	width:375px;
	z-index:10000;
	background: #0E0E0E;
	height: calc(100vh - 100%);
	transform: translate3d(-100%, 0, 0);
	transition: transform 250ms cubic-bezier(0.33, 1, 0.68, 1);
	overflow: scroll;
}

.mainNav > nav {
	position:relative;
	display: flex;
	flex-direction: column;
	height:100%;
}

.subNav {
	
}

nav .navLogo {
	display: block;
	position: relative;
	top: 10px;
	left: 0;
	margin: 0;
	height: auto;
	width: 185px;
	margin-left: 25px;
}

.companyNav {
	padding-top:10px;
	margin-top:auto;
}

header.navOpen .mainNav {
	pointer-events: all;
	transform: translate3d(0, 0, 0);
}

nav ul {
	text-decoration: none;
	padding:0px;
}

nav ul li {
	display:block;
	padding:10px 20px;
	padding-left:30px;
	letter-spacing: 1px;
	font-weight: 400;
}

nav ul li a {
	font-size:1.5em;
	color:white;
}

.navLabel {
	position: relative;
	top: 13px;
	left: 0;
	margin: 0 20px;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 1px;
	padding: 0px 9px;
	color: rgba(145, 145, 145, 1);
	border-bottom: 1px solid rgba(44, 44, 44, 1);
	padding-bottom: 5px;
}

.navCopy {
	color: rgba(145, 145, 145, 1);
	font-size:12px;
	margin-top:30px;
	padding:0px 30px;
	padding-bottom:30px;
}






/* Main */

main {
	display: block;
	position: relative;
	top:0;
	left:0;
	right:0;
	margin: auto;
	min-height:calc(100vh - 60px); /* window height - nav height */
	width:100vw;
	/* max-width:1440px; */
	/* min-height:calc(100vh - 60px + 70px); /* window height - nav height + footer height */ */
	/* padding:25px 35px; */
	/* padding-bottom: 70px; */
}

main.one-sidebar {
	width:calc(100vw - 350px);
}

main.two-sidebars {
	width:calc(100vw - 700px);
}







/* App Sidebar */

.sidebar {
	position: fixed;
	bottom:0;
	margin: auto;
	width:350px;
	height:calc(100vh - 60px); /* should be the same height of the header bar; */
	background:#0E0E0E;
	overflow-y: scroll;
	overflow-x:hidden;
}

.sidebar.left {
	left:0;
	border-right:1px solid #1F1F1F;
}

.sidebar.right {
	right:0;
	border-left:1px solid #1F1F1F;
}

.sidebarSection {
	position: relative;
	top:0;
	left:0;
	right:0;
	margin: auto;
	padding:25px 20px;
	padding-bottom: 0px;
	width:100%;
}

.sidebarTitle {
	text-transform: uppercase;
	font-size:18px;
	letter-spacing: 0.175em;
	font-weight:400;
	padding: 0px 10px;
	padding-bottom:10px;
	border-bottom:1px solid rgba(40, 40, 40, 1);
}



/* Collections Lists for Sidebar */

.sidebarSection .collectionsLists {
	
}

.sidebarSection .collectionListing {
	display: flex;
	position: relative;
	padding:8px 10px;
	padding-right:4px;
	flex-flow: row;
}

.sidebarSection .collectionListing:nth-child(even) {
	background: rgba(255, 255, 255, .015);
}

.sidebarSection .collectionName {
	font-size:14px;
	font-weight: 400;
	color:rgba(255, 255, 255, .5);
	flex-grow:1;
}






/* Page Content Area */

.pageContent {
	position:relative;
	top:0;
	left:0;
	right:0;
	margin: auto;
	width:calc(100% - ( 350px * 2 ) );/* should be the same width of the sidebars; */
	height:calc(100vh - 60px);  /* Matches main element's height */
	overflow-y: scroll;
	overflow-x: hidden;
}






/* Recipe Masonry Grid */

.recipeMasonryElement {
	top:0;
	position: relative;
	left:0;
	right:0;
	margin: auto;
	height: 100%;
	width: 100%;
	overflow-y: scroll;
	overflow-x: hidden;
	
	--bPadding:20px;
	--hPadding:35px;
}

.recipeMasonry {
	position: relative;
	top:0;
	left:0;
	right:0;
	margin: auto;
	width:calc(100% - var(--bPadding) - var(--hPadding) - var(--hPadding)); /* The first subtracted value should match .recipeItem's padding-bottom. The 2nd subtracted value is for the padding of the entire masonry */
}

.recipeMasonry[layout-mode='masonry'] {
	padding-top:15px;
}

.recipeMasonry[layout-mode='masonry'] .masonrySizer {
	width:33%
}

.recipeMasonry[layout-mode='masonry'] .recipeItem {
	width:33.33%;
	padding:0px 10px; /* This value should be half of padding-bottom */
	padding-bottom:20px;
	cursor:pointer;
	
	opacity:0; /* hidden until loaded */
}

.recipeMasonry[layout-mode='masonry'].is-showing-items .recipeItem {
	opacity: 1;
}

.recipeMasonry[layout-mode='masonry'] .recipeItem .itemContainer {
	position: relative;
	width:100%;
	background:rgb(35, 35, 35);
}

.recipeMasonry[layout-mode='masonry'] .recipeItem .itemContainer .recipeInfo {
	display: flex;
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin: auto;
	height:100%;
	width:100%;
	padding:15px 25px;
	z-index:2;
}

.recipeMasonry[layout-mode='masonry'] .recipeItem .itemContainer .recipeInfo .infoContainer {
	position: relative;
	align-self: flex-end;
	width:100%;
}

.recipeMasonry[layout-mode='masonry'] .recipeItem .itemContainer .recipeName {
	position: relative;
	opacity:.65;
	font-size:22px;
	font-weight:400;
	padding-bottom:18px;
	transform: translate3d(0, 12px, 0) scale(.75);
	transform-origin: bottom left;
	width:100%;
	text-shadow:0px 0px 5px rgba(0, 0, 0, 0.677);
	transition:transform .2s, opacity .2s;
}

.recipeMasonry[layout-mode='masonry'] .recipeItem .itemContainer:hover .recipeName {
	opacity:1;
	transform: translate3d(0, 0px, 0) scale(1);
}

.recipeMasonry[layout-mode='masonry'] .recipeItem .itemContainer:hover .recipeName::before {
	opacity:1;
}

.recipeMasonry[layout-mode='masonry'] .recipeItem .itemContainer .recipeName::before {
	content:"";
	opacity: 0;
	position: absolute;
	bottom:7px;
	left:0;
	width:40%;
	height:2px;
	background:white;
	transition:opacity .2s;
}

.recipeMasonry[layout-mode='masonry'] .recipeItem .itemContainer:after {
	content:"";
	pointer-events: none;
	position: absolute;
	left:0;
	right:0;
	bottom:0;
	margin: auto;
	width:100%;
	height:65%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65) 100%);
	z-index:1;
	transition:background .2s, height .2s;
}

.recipeMasonry[layout-mode='masonry'] .recipeItem .itemContainer:hover:after {
	height:75%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.85) 110%);
}

.recipeMasonry[layout-mode='vertical'] .recipeThumbImg.background-image {
	display:none;
}

.recipeMasonry[layout-mode='masonry'] .recipeThumb img {
	display: block;
	width:100%;
}

.recipeMasonry[layout-mode='masonry'] .recipeAge {
	display: none;
}

.recipeMasonry[layout-mode='masonry'] .btnHolder {
	position: relative;
	height:0px;
	overflow: hidden;
	transition: height .3s;
}

.recipeMasonry[layout-mode='masonry'] .recipeItem .recipeInitials {
	position: absolute;
	text-align: center;
	line-height:75px;
	top:-20px;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	width:75px;
	height:75px;
	text-transform: uppercase;
	font-size:40px;
	white-space: nowrap;
	text-indent: 3px;
	letter-spacing: .1em;
}

 .favorited .icon-btn.favorite {
	/* background: white; */
	color:var(--2ndAccent);
}






/* Masonry List View */

.recipeMasonry[layout-mode='vertical'] {
	padding-top:0px;
}

.recipeMasonry[layout-mode='vertical'] .recipeItem {
	display:flex;
	position: relative;
	width:100%;
	padding:15px 4px;
	flex-flow: row;
	border:0px;
	border-radius:0px;
	flex-grow: 1;
	border-bottom: 1px solid rgba(255,255,255,.15);
	cursor:pointer;
}

.recipeMasonry[layout-mode='vertical'] .recipeItem.active {
	background: rgba(255, 255, 255, 0.05);
}

.recipeMasonry[layout-mode='vertical'] .recipeItem .recipeThumb {
	display:inline-block;
	position: relative;
	align-self: center;
	width:35px;
	height:35px;
	background: rgba(40, 40, 40, 1);
	border-radius:3px;
}

.recipeMasonry[layout-mode='vertical'] .recipeItem .recipeInfo {
	display: flex;
	flex-grow: 1;
}

.recipeMasonry[layout-mode='vertical'] .recipeItem .itemContainer {
	display: flex;
	flex-grow: 1;
}

.recipeMasonry[layout-mode='vertical'] .recipeItem .infoContainer {
	display: flex;
	flex-grow: 1;
}

.recipeMasonry[layout-mode='vertical'] .recipeThumbImg.background-image {
	display:block;
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin: auto;
}

.recipeMasonry[layout-mode='vertical'] .recipeThumb img {
	display: none;
}

.recipeMasonry[layout-mode='vertical'] .recipeItem .recipeName {
	align-self: center;
	padding: 0 10px;
	padding-right: 5px;
	border-bottom: 0;
	font-weight: 300;
	letter-spacing: .1em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex-grow: 1;
}

.recipeMasonry[layout-mode='vertical'] .recipeAge {
	display: auto;
	align-self: center;
	font-size:10px;
	/* text-transform: uppercase; */
	color:rgba(255,255,255, .2);
	padding:10px;
	width:75px;
	text-align: left;
}

.recipeMasonry[layout-mode='vertical'] .recipeItem .recipeInitials {
	text-align: center;
	line-height:35px;
	width:100%;
	height:100%;
	text-transform: uppercase;
	font-size:14px;
	white-space: nowrap;
	text-indent: 3px;
	letter-spacing: .1em;
}

.recipeMasonry[layout-mode='vertical'] .btnHolder {
	position: relative;
	cursor: pointer;
	height:auto !important;
	align-self: center;
}

.recipeMasonry[layout-mode='vertical'] .recipeItem .icon-btn,
.recipeMasonry[layout-mode='vertical'] .recipeItem .btn {
	margin-top:0;
}




/* Recipe Masonry Filter Bar */

.filterBar {
	display: flex;
	top:0px;
	position: sticky;
	flex-flow: row;
	width:100%;
	padding:15px 50px;
	justify-content: center;
	z-index:5;
	background: #000;
}

.filterBar::before {
	/* content:""; */
	position: absolute;
	bottom:0;
	left:0;
	right:0;
	height:1px;
	margin:0px 45px;
	
	background: rgba(255, 255, 255, .15);	
}

.filterSection {
	position: relative;
	width:33.33%;
	font-size:0;
}




.filterOptions {
	
}

.filterOptions .filterBtn {
	/* display: inline-block; */
	position: absolute;
	top:0;
	left:0;
	bottom:0;
	margin: auto;
	height:26px;
	width:96px;
	text-align: center;
	border-radius:1000px;
	padding:6px 10px;
	background: rgba(255, 255, 255, 0.0);
	border:1px solid rgba(255, 255, 255, 0.0);
	text-transform: uppercase;
	opacity: .65;
	font-size: 12px;
	line-height: 12px;
	letter-spacing: 1px;
	font-weight:400;
	cursor: pointer;
	transition: opacity .2s, background .2s, border .2s;
}

.filterOptions .filterBtn:hover,
.filterOptions.active .filterBtn {
	background: rgba(255, 255, 255, 0.1);
	border:1px solid rgba(255, 255, 255, 0.1);
}

.filterOptionsCloser {
	display: none;
	position: absolute;
	top:calc(-500vh + 50%);
	left:calc(-500vw + 50%);
	height:1000vh;
	width:1000vw;
}

.filterOptions.active .filterOptionsCloser {
	display: block;
}

.filterOptionsWindow {
	opacity:0;
	pointer-events: none;
	transform: translateY(50px);
	position: absolute;
	top:calc(100% + 15px);
	left:0;
	right:0;
	margin: auto;
	width:320px;
	padding:5px 10px;
	background:rgb(21, 21, 21);
	border:1px solid rgba(255, 255, 255, .1);
	border-radius:5px;
	z-index:2;
	box-shadow: 0px 10px 30px 10px rgba(0, 0, 0, 0.75);
	
	transition: opacity .2s, transform .3s;
}

.filterOptions.active .filterOptionsWindow {
	opacity:1;
	pointer-events: all;
	transform: translateY(0px);
}

.filterGroup {
	margin-bottom:10px;
}

.filterGroupName {
	font-size:13px;
	text-transform: uppercase;
	opacity: .6;
	padding:7px 5px;
	padding-right:10px;
	border-bottom:1px solid rgba(255, 255, 255, 0.1);
	margin-bottom:5px;
	cursor: pointer;
}

.filterGroup .groupedFilters {
	padding-left:5px;
	padding-right:0px;
}

.filterGroupName i {
	float: right;
}

.filterOption {
	position: relative;
	top:0;
	left:0;
	right:0;
	margin: auto;
	font-size:15px;
	padding:7px 10px;
	margin-bottom: 2px;
	padding-right: 30px;
	border-radius:3px;
	font-weight:400;
	color:white;
	cursor: pointer;
	transition: background .1s;
}

.filterOption.active,
.filterOption:hover {
	background: rgba(255, 255, 255, 0.05);
}

.filterOption i {
	display: block;
	position: absolute;
	top:0;
	bottom: 0;
	right:7px; /* should be the same as the top/bottom padding of parent */
	margin: auto;
	font-family: 'Font Awesome 5 Pro';
	font-weight: 900;
	font-size: 11px;
	border:1px solid rgba(255, 255, 255, 0.1);
	border-radius:3px;
	background: rgba(255, 255, 255, 0.05);
	width:22px;
	height:22px;
	line-height: 20px;
	text-indent: -2px;
	text-align: center;
}

.filterOption.active i {
	background:var(--accent);
	border:1px solid rgba(255, 255, 255, 0);
}

.filterOption.active i:before {
	content: "\f00c";
}




.viewOptions {
	margin-left:auto;
	margin-right:5px;
}

.viewOptions .viewBtn {
	color:rgb(115, 115, 115);
	cursor:pointer;
	display: inline-block;
	vertical-align: top;
	position: relative;
	top:0;
	left:0;
	margin: auto;
	font-size:16px;
	line-height: 15px;
	padding:5px;
	padding-left:6px;
	border-radius:2px;
	transition:background .2s, color .2s;
}

.viewOptions .viewBtn.active {
	color:rgb(255, 255, 255);
}

.viewOptions .viewBtn:hover {
	background:rgba(255, 255, 255, 0.15);
	color:rgb(255, 255, 255);
}




.orderByOptions {
	display: flex;
	text-align: right;
	font-size:13px;
	align-items: center;
}

.orderByOptions .orderByOptionsContainer {
	display:inline-block;
	vertical-align: middle;
	cursor: pointer;
}

.orderByOptions .selectContainer {
	display:inline-block;
	vertical-align: middle;
	padding-bottom:2px;
}

.orderByOptions .selectContainer::after {
	margin: auto 0px;
	font-size: 14px;
	line-height: 25px;
}

.orderByOptions .selectContainer select {
	margin:0;
	width:125px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.orderByOptions label {
	display: inline-block;
	line-height: 18px;
}




.recipeMasonryElement .addRecipeBtn {
	position:relative;
	top:0;
	left:0;
	right:0;
	margin: auto;
	margin-bottom: 5px;
	padding:var(--bPadding); /* inherited from the .recipeMasonryElement */
	text-align: center;
	color:rgba(255,255,255,1);
	width:calc(100%  - var(--bPadding) - var(--hPadding) - var(--hPadding)); /* inherited from the .recipeMasonryElement */
	background:rgba(255,255,255,.065);
	border: 1px solid rgba(255,255,255,.1);
	border-radius:8px;
	cursor:pointer;
	opacity:.5;
	transition: opacity .2s;
}

.recipeMasonryElement .addRecipeBtn:hover {
	opacity: 1;
}







/* Floating Information Window */

.floatingContentWindow {
	display:flex;
	flex-direction: column;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	height: calc(100% - 50px);
	width: calc(100% - 100px);
	max-width:800px;
	max-height:900px;
	border: 1px solid rgba(26,26,26,1);
	background: linear-gradient(to bottom, #000000, #101010);
	z-index: 901;
	border-radius: 15px;
	transform: translate3d(0, 75px, 0);
	opacity:0;
	transition: transform .4s, opacity .4s;
	overflow-y:scroll;
	overflow:-x:hidden;
	pointer-events: none;
	
	--hPadding: 35px;
}

.floatingContentWindow.open {
	transform: translate3d(0, 0, 0);
	opacity:1;
	pointer-events: all;
}

.floatingContentOverlay  {
	pointer-events: none;
	opacity:0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	background:rgba(0,0,0,.75);
	z-index: 900;
	transition: opacity .4s;
}

.floatingContentOverlay.show {
	pointer-events: all;
	opacity:1;
}

.floatingContentWindow .titleBar {
	position: sticky;
	top:0;
	width:100%;
	margin: auto;
	padding: 24px var(--hPadding);
	z-index:10;
	background:black;
}

.floatingContentWindow .title {
	display:block;
	position: relative;
	font-size:24px;
	font-weight:400;
}

.closeWindowBtn {
	position: absolute;
	top:0;
	right:24px;
	bottom:0;
	margin: auto;
	height:40px;
	width:40px;
	line-height:40px;
	text-align: center;
	color:white;
	font-size: 24px;
	cursor: pointer;
}






/* Recipe Information Window */

.popUpRecipe .imagesHolder {
	position: relative;
	padding: 0px var(--hPadding);
	padding-bottom:30px;
	overflow-x: scroll
	overflow-y:hidden;
	white-space: nowrap;
}

.popUpRecipe .imagesHolder .imgHolder,
.popUpRecipe .imagesHolder .addImage {
	display: inline-block;
	vertical-align: top;
	position: relative;
	top:0;
	left:0;
	margin: auto;
	height:225px;
	margin-right:25px;
	cursor:pointer;
}


.popUpRecipe .imagesHolder.enlarge .imgHolder,
.popUpRecipe .imagesHolder.enlarge .addImage {
	height:325px;
}

.popUpRecipe .imgHolder .optionsButton {
	opacity: 0;
	top: auto;
	right:8px;
	bottom: 8px;
	cursor: pointer;
	box-shadow: 0px 0px 13px 10px rgba(0,0,0,.2);
	border-radius: 50%;
	color: white;
	background: rgba(0,0,0,.2);
	transition:opacity .2s, background .2s, box-shadow .2s;
}

.popUpRecipe .imgHolder:hover .optionsButton {
	opacity: 1;
}

.popUpRecipe .imgHolder .optionsButton:hover {
	box-shadow: 0px 0px 13px 10px rgba(0,0,0,.4);
	background: rgba(0,0,0,.4);
}


.popUpRecipe .imgHolder img {
	display: block;
	position: relative;
	top:0;
	left:0;
	margin: auto;
	height:100%;
	width: auto;
	cursor:pointer;
}

.popUpRecipe .addImage {
	opacity:.5;
	margin-right:30px;
	width:200px;
	border:2px dashed rgba(255,255,255, .15);
	background:rgba(255,255,255,.04);
	border-radius:8px;
	cursor:pointer;
	transition:opacity .2s, border .2s;
}

.popUpRecipe .addImage:hover {
	opacity:1;
	border:2px dashed rgba(255,255,255, .2);
}

.popUpRecipe .addImage .addImageBtn {
	position: absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	height:50px;
	width:50px;
	line-height:50px;
	border-radius:50%;
	text-align:center;
	background:rgba(255,255,255,.1);
	box-shadow: 0px 0px 0px 0px rgba(0,0,0,.4);
	font-size:18px;
	transform: scale(.85);
	transition: background .2s, transform .2s, box-shadow .2s;
}

.popUpRecipe .addImage:hover .addImageBtn {
	background:var(--accent);
	transform: scale(1);
	box-shadow: var(--accentShadow);
}

.popUpRecipe .addImage .addImageBtn i {
	padding-left: 2px;
	padding-bottom: 1px;
}

.popUpRecipe .recipeValuesHolder {
	flex-grow:1;
	position:relative;
	top:0;
	left:0;
	right:0;
	margin:auto;
	width: 100%;
}

.popUpRecipe .recipeValuesScroller {
	position:relative;
	top:0;
	left:0;
	right:0;
	margin:auto;
	overflow-x:hidden;
	overflow-y:scroll;
}

.popUpRecipe .recipeValuesHolder:after {
	content:"";
	display:block;
	position: relative;
	height:15px;
}

.popUpRecipe .recipeValuesHolder .recipeValue {
	display:flex;
	align-items: center;
	position:relative;
	top:0;
	left:0;
	right:0;
	margin:auto;
	padding: 20px var(--hPadding);
	border-top:1px solid rgba(255,255,255,.1);
}

.popUpRecipe .recipeValuesHolder .recipeValue .title {
	/* flex-grow: 1; */
	font-size: 16px;
	color:rgba(255,255,255,.66);
	width:50%;
}

.popUpRecipe .recipeValuesHolder .recipeValue .value {
	width:50%;
	font-size: 16px;
}

.popUpRecipe .toolbar {
	position: sticky;
	bottom:0;
	height:60px;
	width:100%;
	padding:0px var(--hPadding);
	text-align:center;
	padding-bottom: 20px;
}

.popUpRecipe .toolbar .tool {
	display:inline-block;
	vertical-align: top;
	width: calc(33.33333% - 24px);
	box-sizing: content-box !important;
}

.popUpRecipe .toolbar .tool:nth-child(2) {
	padding:0px var(--hPadding);
}

.popUpRecipe .toolbar .tool .btn {
	box-shadow:0px -5px 30px 5px rgba(0,0,0,0.4);
}

.popUpRecipe .toolbar .tool .btn i {
	transform: translateY(-1px);
	font-size: 10px;
}







/* popUpRecipe editing mode */

.popUpRecipe.editing .recipeValuesHolder .recipeValue .value {
	/* min-width:250px; */
}

.popUpRecipe.editing .recipeValuesHolder .recipeValue .value input {
	margin:0;
	border:0px;
	border-bottom:1px solid rgba(255,255,255,.1);
	border-radius:0px;
	text-align: right;
	width:100%;
}

.popUpRecipe.editing .recipeValuesHolder .recipeValue .value .selectContainer {
	margin:0;
	text-align: right;
	width:100%;
	cursor:pointer;
}

.popUpRecipe.editing .recipeValuesHolder .recipeValue .value .selectContainer select {
	margin:0;
	text-align-last: right;
	
}
.popUpRecipe.editing .recipeValuesHolder .recipeValue .value .selectContainer option { 
	direction: rtl; 
}

/* .popUpRecipe.editing .recipeValuesHolder .recipeValue .value input:focus {
	text-align: left;
} */




.popUpRecipe .supportedCameras {
	/* padding:20px 0px; */
	/* border-top:1px solid rgba(255,255,255,.1); */
	
	--height: 300px;
}

.popUpRecipe .supportedCameras .title {
	font-size:18px;
	padding:20px var(--hPadding);
	padding-bottom:15px;
}

.popUpRecipe .supportedCameras .cameraSelector {
	display: flex;
	align-items: top;
	position:relative;
	top:0;
	left:0;
	right:0;
	margin: auto;
	height:var(--height);
}

.popUpRecipe .supportedCameras .cameraSelector .selectedSidebar {
	position:relative;
	top:0;
	left:0;
	right:0;
	margin: auto;
	width:calc(250px + var(--hPadding));
	height:var(--height);
	padding:15px 20px;
	padding-left:var(--hPadding);
	background: rgba(255,255,255,.025);
}

.popUpRecipe .supportedCameras .cameraSelector .selectedSidebar .title {
	text-transform: uppercase;
	font-size:12px;
	color:rgba(255,255,255,.66);
	margin-bottom:5px;
	padding:0px;
	padding-bottom:5px;
	border-bottom:1px solid rgba(255,255,255,.1);
}

.popUpRecipe .supportedCameras .cameraSelector .selectedSidebar .selected {
	margin-bottom:15px;
}

.popUpRecipe .supportedCameras .cameraSelector .selectedSidebar .selected .tempText {
	color:rgba(255,255,255,.33);
	font-size:12px;
	font-style: italic;
	font-weight: 200;
}

.popUpRecipe .supportedCameras .cameraSelector .cameraGrid {
	position:relative;
	top:0;
	left:0;
	right:0;
	margin: auto;
	flex-grow:1;
	height:var(--height);
	background: rgba(255,255,255,.05);
	overflow-x: scroll;
	overflow-y:hidden;
}

.popUpRecipe .supportedCameras .cameraSelector .cameraGrid .row {
	display: inline-block;
	position:relative;
	top:0;
	left:0;
	right:0;
	margin: auto;
	flex-grow:1;
	height:calc(var(--height) / 2);
	width:auto;
	font-size:0px;
	white-space: nowrap;
}

.popUpRecipe .supportedCameras .cameraSelector .cameraGrid .camera {
	display: inline-block;
	position:relative;
	top:0;
	left:0;
	right:0;
	margin: auto;
	flex-grow:1;
	height:calc(var(--height) / 2);
	width:calc(var(--height) / 2);
	white-space: normal;
	cursor: pointer;
}

.popUpRecipe .supportedCameras .cameraSelector .cameraGrid .camera:before {
	content:"";
	display: block;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin: auto;
	height:calc(100% - 10px);
	width:calc(100% - 10px);
	background:rgba(0,0,0,0.1);
	border:1px solid rgba(0,0,0,0.1);
	border-radius:8px;
	transition:background .2s;
}

.popUpRecipe .supportedCameras .cameraSelector .cameraGrid .camera:hover:before {	
	background:rgba(0,0,0,0.2);
}

.popUpRecipe .supportedCameras .cameraSelector .cameraGrid .camera .icon {
	position:relative;
	top:0;
	left:0;
	right:0;
	margin: 15px auto;
	margin-bottom: 5px;
	/* height:calc(( var( --height) / 2 ) - 30px); Keeping this here to remember the technique in the future.
	width:calc(( var( --height) / 2 ) - 30px); */
	height: 70px;
	width: 70px;
}

.popUpRecipe .supportedCameras .cameraSelector .cameraGrid .camera .name {
	position:relative;
	top:0;
	left:0;
	right:0;
	margin: auto;
	width:100%;
	text-align: center;
	transform: scaleX(2);
	font-size:12px;
}

.popUpRecipe .supportedCameras .cameraSelector .cameraGrid .camera .sensor {
	position:relative;
	top:0;
	left:0;
	right:0;
	margin: auto;
	margin-top: 10px;
	width:100%;
	text-align: center;
	opacity:.6;
	font-size:12px;
}








/* Loadout Sidebar */


.sidebar .loadoutSection {
	display: flex;
	flex-direction: column;
	position: relative;
	width:100%;
	height:100%;
}


/* Selected Camera & Backup Preview */

.sidebar .selectedCamera {
	position: sticky;
	top:0;
	left:0;
	right:0;
	margin: 0 auto;
	margin-bottom:35px;
	width:100%;
	padding-top:25px;
	z-index:10;
}

.sidebar .selectedCamera::before {
	content:"";
	position: absolute;
	top:-20%;
	left:0;
	right:0;
	bottom:0;
	margin: auto;
	height: 100%;
	background: radial-gradient(rgba(255,255,255,0.05) 5%, rgba(255,255,255,0) 80%);
	z-index:2;
}

.sidebar .selectedCamera::after {
	content:"";
	pointer-events: none;
	position: absolute;
	top:0;
	left:0;
	right:0;
	height: calc(100% + 60px);
	margin: auto;
	background: linear-gradient(to top, rgba(0, 0, 0, 0), #0e0e0e 15%);
	z-index:1;
}

.sidebar .selectedCamera * {
	z-index:3;
}

.sidebar .selectedCamera .cameraIcon {
	position: relative;
	top:0;
	left:0;
	right:0;
	margin: auto;
	margin-bottom:15px;
	height:135px;
	width:135px;
}

.sidebar .selectedCamera .cameraName {
	position: relative;
	top:0;
	left:0;
	right:0;
	margin: auto;
	width:100%;
	text-align: center;
	font-size:22px;
	margin-bottom:25px;
	transform: scaleX(2);
	text-transform: uppercase;
	cursor:pointer;
}

.sidebar .selectedCamera .cameraName i {
	display: inline-block;
	vertical-align: top;
	font-size: 16px;
	line-height: 26px;
	transform: scaleX(.75);
	transform-origin: right;
}

.sidebar .selectedCamera .backupLabel {
	position: relative;
	top:0;
	left:0;
	right:0;
	margin: auto;
	margin-bottom:20px;
	width:100%;
	text-align: center;
	font-size:14px;
	text-transform: uppercase;
	font-weight:300;
	letter-spacing: .25em;
}

.sidebar .selectedCamera .backupName {
	position: relative;
	top:0;
	left:0;
	right:0;
	margin: auto;
	width:100%;
	text-align: center;
	font-size:20px;
	margin-bottom:10px;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor:pointer;
}

.sidebar .selectedCamera .backupName span {
	letter-spacing: 3px;
	font-weight:500;
}

.sidebar .selectedCamera .backupName i {
	display: inline-block;
	vertical-align: top;
	font-size: 16px;
	line-height: 22px;
	transform: scaleX(1.25);
}

.sidebar .selectedCamera .backupDate {
	position: relative;
	top:0;
	left:0;
	right:0;
	margin: auto;
	width:100%;
	text-align: center;
	font-size:12px;
	color:rgba(255,255,255,.4);
	letter-spacing: .1em;
	font-weight:200;
}





/* Sidebar Recipe List */

.sidebar .recipeList {
	position: relative;
	top:0;
	left:0;
	right:0;
	margin:auto;
	margin-top:5px;
}

.sidebar .recipeList .recipeListing {
	display:flex;
	align-items: center;
	position: relative;
	top:0;
	left:0;
	right:0;
	margin:auto;
	font-size:0px;
	margin-top:10px;
}

.sidebar .recipeList .recipeListing .recipeThumbImg {
	width:35px;
	height:35px;
	margin-right:10px;
	cursor:pointer;
}

.sidebar .recipeList .recipeListing .recipeName {
	flex-grow: 1;
	font-size:16px;
	font-weight:300;
	color:rgba(255,255,255, .66);
	cursor:pointer;
}
.sidebar .recipeList .recipeListing .recipeTools {
	font-size:16px;
}
.sidebar .recipeList .recipeListing .recipeTools i.moveListing {
	opacity:.6;
	cursor: grab;
	transition:opacity .2s;
}

.sidebar .recipeList .recipeListing .recipeTools i.moveListing:hover {
	opacity:1;
}

.sidebar .recipeList .recipeListing .recipeTools .optionsButton {
	display: inline-block;
	margin:0;
	text-align: right;
}



/* Sidebar Loadout preview */

.loadoutSection .loadoutPreview {
	flex-grow: 1;
	padding-top:10px;
}

.loadoutPreview {
	margin-top:0;
}

.loadoutPreview .sidebarTitle {
	padding-left:0;
	padding-right:0;
}

.loadoutPreview .sidebarTitle i {
	float:right;
	cursor: pointer;
}

.loadoutPreview .loadoutCount {
	font-size:14px;
	width:15px;
	padding-right:5px;
	text-align: center;
}




.loadoutSection .downloadLoadout {
	position: sticky;
	bottom:0;
	left:0;
	right:0;
	margin: auto;
	width:100%;
	padding:25px;
	text-align: center;
	/* border-top:1px solid rgba(255,255,255,.1); */
	/* background:#0E0E0E; */
}

.loadoutSection .downloadLoadout::before {
	content:"";
	pointer-events: none;
	position: absolute;
	bottom:0;
	left:0;
	right:0;
	height: calc(100% + 25px);
	margin: auto;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #0e0e0e 25%);
	z-index: 1;
}

.loadoutSection .downloadLoadout * {
	position: relative;
	z-index:5;
}

.loadoutSection .downloadLoadout a.subtle {
	font-weight:300;
	opacity: .35;
	margin-top:15px;
	transition:opacity .2s;
}

.loadoutSection .downloadLoadout a.subtle:hover {
	opacity: 1;
}