/* MASTER.CSS - To be included with all templates  */

/* ESSENTIALS */

html, body { height: 100%; margin: 0; padding: 0; }
body {
	background-color: var(--color-body-bg);
    -webkit-font-smoothing: antialiased; 
    height: 100%;
    width: 100%;
}
ul { list-style-type: none; float: right; }
body, ul, li { margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; padding: 0; }

a:link { color: inherit; text-decoration: none; }
a:visited { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
a:active { text-decoration: underline; }

::selection { background: #2980b9; color: #ffffff; text-shadow: none;}
::-moz-selection { background: #2980b9; color: #ffffff; text-shadow: none;}

div.column1 { background: inherit; display: inline-block; font-size: 1rem; width:100%; }
div.column2 { background: inherit; display: inline-block; font-size: 1rem; width:50%; }
div.column3 { background: inherit; display: inline-block; font-size: 1rem; width:33.33%; }
div.column4 { background: inherit; display: inline-block; font-size: 1rem; width:25%; }
div.column5 { background: inherit; display: inline-block; font-size: 1rem; width:20%; }
div.column6 { background: inherit; display: inline-block; font-size: 1rem; width:16.6%; }
div.column7 { background: inherit; display: inline-block; font-size: 1rem; width:14.28%; }

.fs12 {font-size: 12px;} .fs14 {font-size: 14px;} .fs16 {font-size: 16px;} 
.fs18 {font-size: 18px;} .fs20 {font-size: 20px;} .fs22 {font-size: 22px;}
.fs24 {font-size: 24px;} .fs26 {font-size: 26px;} .fs28 {font-size: 28px;} 
.fs30 {font-size: 30px;} .fs32 {font-size: 32px;} .fs34 {font-size: 34px;}
.fs36 {font-size: 36px;} .fs38 {font-size: 38px;} .fs40 {font-size: 40px;} 
.fs42 {font-size: 42px;} .fs44 {font-size: 44px;} .fs46 {font-size: 46px;}
.fs48 {font-size: 48px;} .fs50 {font-size: 50px;} .fs52 {font-size: 52px;}
.fs70 {font-size: 70px;} .fs80 {font-size: 80px;} .fs90 {font-size: 90px;}

.bold {font-weight: bold;} .lighter {font-weight: lighter;} .italic {font-style: italic;}
.lowercase {text-transform: lowercase;} .uppercase {text-transform: uppercase;}
.underline {text-decoration: underline;}

.padbottom10 {padding-bottom: 10px;} .padbottom20 {padding-bottom: 20px;}
.padbottom30 {padding-bottom: 30px;} .padbottom40 {padding-bottom: 40px;}
.padbottom50 {padding-bottom: 50px;} .padbottom60 {padding-bottom: 60px;}
.padleft5 {padding-left: 5px;} .padleft10 {padding-left: 10px;} 
.padleft15 {padding-left: 15px;} .padleft20 {padding-left: 20px;} 
.padleft25 {padding-left: 25px;} .padleft25 {padding-left: 30px;}
.padright5 {padding-right: 5px;} .padright10 {padding-right: 10px;} 
.padright15 {padding-right: 15px;} .padright20 {padding-right: 20px;} 
.padright25 {padding-right: 25px;} .padright30 {padding-right: 30px;}
.padtop6 {padding-top: 6px;} .padtop10 {padding-top: 10px;}
.padtop14 {padding-top: 14px;} .padtop20 {padding-top: 20px;}
.padtop30 {padding-top: 30px;} .padtop40 {padding-top: 40px;}
.padtop50 {padding-top: 50px;} .padtop60 {padding-top: 60px;}

/* CUSTOM FONTS */

@font-face {
    font-family: Inter-Regular;
    src: url('/static/fonts/Inter-Regular.otf'); /* IE9-IE11 */
    src: url('/static/fonts/Inter-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/static/fonts/Inter-Regular.woff') format('woff'), /* Most Browsers */
         url('/static/fonts/Inter-Regular.ttf')  format('truetype'); /* Most Except IE */
	font-display: swap;
}
@font-face {
    font-family: Inter-Medium;
    src: url('/static/fonts/Inter-Medium.otf'); /* IE9-IE11 */
    src: url('/static/fonts/Inter-Medium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/static/fonts/Inter-Medium.woff') format('woff'), /* Most Browsers */
         url('/static/fonts/Inter-Medium.ttf')  format('truetype'); /* Most Except IE */
	font-display: swap;
}
@font-face {
    font-family: Inter-SemiBold;
    src: url('/static/fonts/Inter-SemiBold.otf'); /* IE9-IE11 */
    src: url('/static/fonts/Inter-SemiBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('/static/fonts/Inter-SemiBold.woff') format('woff'), /* Most Browsers */
         url('/static/fonts/Inter-SemiBold.ttf')  format('truetype'); /* Most Except IE */
	font-display: swap;
}

button:not(.logregselector) {font-family: Inter-Regular;}
input {font-family: Inter-Regular;}
textarea {font-family: Inter-Regular;}
select {font-family: Inter-Regular;}

#navbar {font-family: Inter-Regular;}
.navlogo h1 {font-family: Inter-Medium;}
.mobile-title h1 {font-family: Inter-Regular;}
.mt-tamari {font-family: Inter-Medium !important;}

#block1 {font-family: Inter-Regular;} /* All pages */
#block1 h1 {font-family: Inter-Medium; font-weight: normal;}
#block1 h2 {font-family: Inter-Medium; font-weight: normal;}
#block1 h3 {font-family: Inter-Medium; font-weight: normal;}
#block1 h4 {font-family: Inter-Medium; font-weight: normal;}
.recipe1-text {font-family: Inter-Medium;} /* All Recipes, Favorites, Categories, Mobile Category */
.r2bottom div {font-family: Inter-Medium;} /* All Recipes, Favorites, Categories, Mobile Category */
.exprecinner div {font-family: Inter-Medium;} /* Explore and Explore All */
.seemore {font-family: Inter-Medium;} /* Explore */
.logregselector {font-family: Inter-Medium;} /* Login and Register */
#addtolist, #scheduler {font-family: Inter-Regular;} /* Recipe Detail */
#addtolist h2, #scheduler h2 {font-family: Inter-Medium; font-weight: normal;} /* Recipe Detail */
.timebold {font-family: Inter-Medium;} /* Recipe Detail */
#barcodescanner {font-family: Inter-Regular;} /* Shopping Lists */
#barcodescanner h2 {font-family: Inter-Medium; font-weight: normal;} /* Shopping Lists */

/* THEMES */
:root {
	--icon-1-blue: url("/static/icon-1-blue.png");
	--icon-1-green: url("/static/icon-1-green.png");
	--icon-1-purple: url("/static/icon-1-purple.png");
	--icon-1-pink: url("/static/icon-1-pink.png");
	--icon-2-blue: url("/static/icon-2-blue.png");
	--icon-2-green: url("/static/icon-2-green.png");
	--icon-2-purple: url("/static/icon-2-purple.png");
	--icon-2-pink: url("/static/icon-2-pink.png");
	--icon-3-blue: url("/static/icon-3-blue.png");
	--icon-3-green: url("/static/icon-3-green.png");
	--icon-3-purple: url("/static/icon-3-purple.png");
	--icon-3-pink: url("/static/icon-3-pink.png");
	--icon-4-blue: url("/static/icon-4-blue.png");
	--icon-4-green: url("/static/icon-4-green.png");
	--icon-4-purple: url("/static/icon-4-purple.png");
	--icon-4-pink: url("/static/icon-4-pink.png");
	--color-body-bg: #2b2b2b;
	--color-flashed-err: #ac3426;
	--color-flashed-err-lighter: #b1382b;
	--color-flashed-err-darker: #a83123;
	--color-flashed-norm: #1c7e45;
	--color-navbar-bg: #111111;
	--color-navbar-font: #ffffff;
	--color-navbar-li-a-hover: #f1f1f1;
	--background-navlogo: url("/static/logo-dark.png");
	--color-navleft-li-hover: #1a1a1a;
	--color-active-bg: #111111;
	--color-active-bg-hover: #1a1a1a;
	--color-active-bottom: #ffffff;
	--color-navright-hover: #1a1a1a;
	--color-dropdown-content-bg: #1a1a1a;
	--color-dropdown-content-boxshadow: rgba(0,0,0,0.2);
	--color-dropdown-content-a: #ffffff;
	--color-dropdown-content-a-bghover: #202020;
	--color-mobilebg: #1a1a1a;
	--color-mobile-dropdown-hr: #ffffff;
	--color-hamburger-line: #d6d6d6;
	--color-footer: rgba(15, 15, 15, 0.75);
}
[data-theme="light"] {
	--icon-1-blue: url("/static/icon-1-blue-light.png");
	--icon-1-green: url("/static/icon-1-green-light.png");
	--icon-1-purple: url("/static/icon-1-purple-light.png");
	--icon-1-pink: url("/static/icon-1-pink-light.png");
	--icon-2-blue: url("/static/icon-2-blue-light.png");
	--icon-2-green: url("/static/icon-2-green-light.png");
	--icon-2-purple: url("/static/icon-2-purple-light.png");
	--icon-2-pink: url("/static/icon-2-pink-light.png");
	--icon-3-blue: url("/static/icon-3-blue-light.png");
	--icon-3-green: url("/static/icon-3-green-light.png");
	--icon-3-purple: url("/static/icon-3-purple-light.png");
	--icon-3-pink: url("/static/icon-3-pink-light.png");
	--icon-4-blue: url("/static/icon-4-blue-light.png");
	--icon-4-green: url("/static/icon-4-green-light.png");
	--icon-4-purple: url("/static/icon-4-purple-light.png");
	--icon-4-pink: url("/static/icon-4-pink-light.png");
	--color-body-bg: #cfcfcf;
	--color-flashed-err: #df7c71;
	--color-flashed-err-lighter: #e28075;
	--color-flashed-err-darker: #dc786d;
	--color-flashed-norm: #68c08e;
	--color-navbar-bg: #efefef;
	--color-navbar-font: #000000;
	--color-navbar-li-a-hover: #0e0e0e;
	--background-navlogo: url("/static/logo-light.png");
	--color-navleft-li-hover: #e5e5e5;
	--color-active-bg: #efefef;
	--color-active-bg-hover: #e5e5e5;
	--color-active-bottom: #000000;
	--color-navright-hover: #e5e5e5;
	--color-dropdown-content-bg: #e5e5e5;
	--color-dropdown-content-boxshadow: rgba(255, 255, 255, 0.2);
	--color-dropdown-content-a: #000000;
	--color-dropdown-content-a-bghover: #dfdfdf;
	--color-mobilebg: #e5e5e5;
	--color-mobile-dropdown-hr: #000000;
	--color-hamburger-line: #222222;
	--color-footer: rgba(245, 245, 245, 0.75);
}
[data-theme="dark"] {
	--icon-1-blue: url("/static/icon-1-blue-dark.png");
	--icon-1-green: url("/static/icon-1-green-dark.png");
	--icon-1-purple: url("/static/icon-1-purple-dark.png");
	--icon-1-pink: url("/static/icon-1-pink-dark.png");
	--icon-2-blue: url("/static/icon-2-blue-dark.png");
	--icon-2-green: url("/static/icon-2-green-dark.png");
	--icon-2-purple: url("/static/icon-2-purple-dark.png");
	--icon-2-pink: url("/static/icon-2-pink-dark.png");
	--icon-3-blue: url("/static/icon-3-blue-dark.png");
	--icon-3-green: url("/static/icon-3-green-dark.png");
	--icon-3-purple: url("/static/icon-3-purple-dark.png");
	--icon-3-pink: url("/static/icon-3-pink-dark.png");
	--icon-4-blue: url("/static/icon-4-blue-dark.png");
	--icon-4-green: url("/static/icon-4-green-dark.png");
	--icon-4-purple: url("/static/icon-4-purple-dark.png");
	--icon-4-pink: url("/static/icon-4-pink-dark.png");
	--color-body-bg: #2b2b2b;
	--color-flashed-err: #ac3426;
	--color-flashed-err-lighter: #b1382b;
	--color-flashed-err-darker: #a83123;
	--color-flashed-norm: #1c7e45;
	--color-navbar-bg: #111111;
	--color-navbar-font: #ffffff;
	--color-navbar-li-a-hover: #f1f1f1;
	--background-navlogo: url("/static/logo-dark.png");
	--color-navleft-li-hover: #1a1a1a;
	--color-active-bg: #111111;
	--color-active-bg-hover: #1a1a1a;
	--color-active-bottom: #ffffff;
	--color-navright-hover: #1a1a1a;
	--color-dropdown-content-bg: #1a1a1a;
	--color-dropdown-content-boxshadow: rgba(0,0,0,0.2);
	--color-dropdown-content-a: #ffffff;
	--color-dropdown-content-a-bghover: #202020;
	--color-mobilebg: #1a1a1a;
	--color-mobile-dropdown-hr: #ffffff;
	--color-hamburger-line: #d6d6d6;
	--color-footer: rgba(15, 15, 15, 0.75);
}
/* ACCENT COLORS */
:root {
	--color: #2980b9;
	--color-lighter: #2d87c4;
	--color-darker: #2c81ba;
	--color-alt1: #2f8ac7;
	--color-alt2: #308fce;
}
[data-accentcolor="dark-blue"] {
	--color: #2980b9;
	--color-lighter: #2d87c4;
	--color-darker: #2c81ba;
	--color-alt1: #2f8ac7;
	--color-alt2: #308fce;
}
[data-accentcolor="dark-green"] {
	--color: #218c74;
	--color-lighter: #239179;
	--color-darker: #218972;
	--color-alt1: #24937b;
	--color-alt2: #269880;
}
[data-accentcolor="dark-purple"] {
	--color: #7b00bb;
	--color-lighter: #7e00c2;
	--color-darker: #7800b8;
	--color-alt1: #8800d2;
	--color-alt2: #9300e2;
}
[data-accentcolor="dark-pink"] {
	--color: #ae0085;
	--color-lighter: #b20189;
	--color-darker: #a90082;
	--color-alt1: #bc0090;
	--color-alt2: #c50097;
}
[data-accentcolor="light-blue"] {
	--color: #81c7f5;
	--color-lighter: #8acaf5;
	--color-darker: #7ec3f2;
	--color-alt1: #77beee;
	--color-alt2: #71b9ea;
}
[data-accentcolor="light-green"] {
	--color: #53cab0;
	--color-lighter: #58cfb5;
	--color-darker: #4cc5ab;
	--color-alt1: #47bfa5;
	--color-alt2: #3eb99e;
}
[data-accentcolor="light-purple"] {
	--color: #c47aec;
	--color-lighter: #ca83f0;
	--color-darker: #c075e9;
	--color-alt1: #be70e7;
	--color-alt2: #bb6be7;
}
[data-accentcolor="light-pink"] {
	--color: #e570ca;
	--color-lighter: #ed7cd3;
	--color-darker: #e16bc6;
	--color-alt1: #df65c2;
	--color-alt2: #db60be;
}
/* SCALING */
:root {
	--font-dropdown-content: 16px;
	--font-navbar: 18px;
	--font-mobile-title-h1: 26px;
	--padding-left-mobile-title-h1: 10px; /* Change to 44px when using hamburger */
	--padding-top-mobile-title-h1: 9px;
	--height-mobile-navbar: 44px;
	--width-hamburger-line: 18px;
	--height-hamburger-line: .15rem;
	--top-hamburger-line2: 7px;
	--top-hamburger-line3: 14px;
	--width-line-checked: 22px;
}
[data-scaling="normal"] {
	--font-dropdown-content: 16px;
	--font-navbar: 18px;
	--font-mobile-title-h1: 26px;
	--padding-left-mobile-title-h1: 10px; /* Change to 44px when using hamburger */
	--padding-top-mobile-title-h1: 9px;
	--height-mobile-navbar: 44px;
	--width-hamburger-line: 18px;
	--height-hamburger-line: .15rem;
	--top-hamburger-line2: 7px;
	--top-hamburger-line3: 14px;
	--width-line-checked: 22px;
}
[data-scaling="large"] {
	--font-dropdown-content: 18px;
	--font-navbar: 20px;
	--font-mobile-title-h1: 28px;
	--padding-left-mobile-title-h1: 10px; /* Change to 48px when using hamburger */
	--padding-top-mobile-title-h1: 10px;
	--height-mobile-navbar: 48px;
	--width-hamburger-line: 22px;
	--height-hamburger-line: .2rem;
	--top-hamburger-line2: 8px;
	--top-hamburger-line3: 16px;
	--width-line-checked: 24px;
}	
/* PROFILE PICTURES */
.icon-1-blue {background-image: var(--icon-1-blue);}
.icon-1-green {background-image: var(--icon-1-green);}
.icon-1-purple {background-image: var(--icon-1-purple);}
.icon-1-pink {background-image: var(--icon-1-pink);}
.icon-2-blue {background-image: var(--icon-2-blue);}
.icon-2-green {background-image: var(--icon-2-green);}
.icon-2-purple {background-image: var(--icon-2-purple);}
.icon-2-pink {background-image: var(--icon-2-pink);}
.icon-3-blue {background-image: var(--icon-3-blue);}
.icon-3-green {background-image: var(--icon-3-green);}
.icon-3-purple {background-image: var(--icon-3-purple);}
.icon-3-pink {background-image: var(--icon-3-pink);}
.icon-4-blue {background-image: var(--icon-4-blue);}
.icon-4-green {background-image: var(--icon-4-green);}
.icon-4-purple {background-image: var(--icon-4-purple);}
.icon-4-pink {background-image: var(--icon-4-pink);}
/* NAVBAR MENU */
#navbar {
	background-color: var(--color-navbar-bg);
	color: var(--color-navbar-font);
	min-height: 64px;
	width: 100%;
	font-size: var(--font-navbar);
	position: fixed;
	z-index: 1000;
}
.navbarinner {height: 100%; margin: 0 auto; width: 1300px;}
#navbar ul {list-style: none; line-height: 64px;}
#navbar li {display: inline-block;}
#navbar li a:hover {color: var(--color-navbar-li-a-hover); text-decoration: none;}
.navlogo {
	background-image: var(--background-navlogo);
	background-size: cover;
	background-repeat: no-repeat;
	height: 28px; 
	width: 108px; 
	float: left; 
	margin-right: 22px; 
	margin-top: 17px;
}
.navlogo h1 {font-size: 28px;}
.mobile-title {
	display: none; 
	height: var(--height-mobile-navbar);
	max-width: calc(100% - var(--height-mobile-navbar));
}
.mobile-title h1 {
	display: none; 
	font-size: var(--font-mobile-title-h1); 
	line-height: var(--height-mobile-navbar); 
	padding-left: var(--padding-left-mobile-title-h1); 
	padding-top: 0px;
	margin: 0;
	max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mt-tamari {display: block !important;}
.navleft {
	float: left;
	overflow: hidden;
	position: relative;
	width: calc(100% - 200px);
}
.navleft ul {
	float: none;
	white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}
.navleft ul::-webkit-scrollbar {
	display: none; /* Chrome, Safari, and Opera */
}
.scroll-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	display: none;
	height: 100%;
}
.scroll-arrow img {
	padding-top: 22px;
	width: 12px;
	height: 20px;
}
.scroll-right {
	background: linear-gradient(to right, transparent 0%, var(--color-navbar-bg) 25%, var(--color-navbar-bg) 50%, var(--color-navbar-bg) 100%);
	right: 0;
	padding: 10px 8px;
}
.scroll-left {
	background: linear-gradient(to left, transparent 0%, var(--color-navbar-bg) 25%, var(--color-navbar-bg) 50%, var(--color-navbar-bg) 100%);
	left: 0;
	padding: 10px 8px;
}
.navleft span {padding-left: 12px; padding-right: 12px;}
.navleft li:hover {background: var(--color-navleft-li-hover);}
.navleft-l {padding-right: 0px !important;}
.navleft-r {padding-left: 0px !important;}
.active {
	background: linear-gradient(to bottom, var(--color-active-bg) calc(100% - 2px), var(--color-active-bottom) 5px) no-repeat left bottom;
}
.active:hover {
	background: linear-gradient(to bottom, var(--color-active-bg-hover) calc(100% - 2px), var(--color-active-bottom) 5px) no-repeat left bottom !important;
}
.linkfull {display: inline;}
.linkshort {display: none;}
.navright {
	float: right;
	height: 64px;
	vertical-align: middle;
	width: 64px;
}
@media (hover: hover) and (pointer: fine) {
	.navright:hover {
		background: var(--color-navright-hover);
	}
}
.navrightsignout {color: var(--color-flashed-err) !important;}
.navrighticon {
	border-radius: 50%;
	background-size: 38px 38px;
	height: 38px;
	margin-left: 13px;
	margin-top: 13px;
	margin-bottom: 11px;
	width: 38px;
}
.navnoauth {float: right;}
.navnoauth li:hover {background: var(--color-navright-hover);}
.navnoauth span {padding-left: 12px; padding-right: 12px;}
.dropdown-content {
	background-color: var(--color-dropdown-content-bg);
	box-shadow: 0px 8px 16px 0px var(--color-dropdown-content-boxshadow);
	display: none;
	position: absolute;
	font-size: var(--font-dropdown-content);
	width: 164px;
	margin-left: -100px;
    margin-top: 2px;
	z-index: 1100;
}
.dropdown-content a {
	color: var(--color-dropdown-content-a);
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}
.dropdown-content a:hover {background-color: var(--color-dropdown-content-a-bghover); text-decoration: none;}
.showdrop {display: block;}
/* MOBILE DROPDOWN MENU */
.mobilebg {background-color: var(--color-mobilebg);}
.mobile-dropdown {display: none;}
.mobile-dropdown input[type=checkbox] {display: none;}
.mobile-dropdown div {
	display: flex;
	width: 100%;
	padding: 0;
}
.mobile-dropdown div li {
	display: block !important; 
	padding-left: 13px;
}
.mobile-dropdown section {
	max-height: 0px;
	overflow: hidden;
	transition: all 1s cubic-bezier(.325, 1, .22, 1);
	width: 100%;
}
.mobilebg-top {margin-bottom: 5px !important;}
.mobilebg-bottom {margin-top: 5px !important;}
.mobile-dropdown div ul {
	margin: 0;
	list-style: none;
	line-height: 36px !important;
	transition: none;
	width: 100%;
}
.mobile-dropdown input[type=checkbox]:checked ~ div section {
	height: auto;
	max-height: 280px;
	transition: all 1s cubic-bezier(.5, 1, .22, 1);
}
.mobile-dropdown hr {
	background-color: var(--color-mobile-dropdown-hr);
	color: var(--color-mobile-dropdown-hr);
	margin-left: 13px;
	margin-right: 13px;
	margin-top: 0px;
	margin-bottom: 0px;
	height: 1px;
}
.drop-profile {
	background-size: 57px 57px;
	border-radius: 50%;
	float: right;
	width: 57px !important;
	height: 57px;
	margin-top: -64px;
	margin-bottom: 12px;
	margin-right: 13px;
}
/* MOBILE HAMBURGER */
.mobile-dropdown .hamburger {
	display: none;
	position: absolute;
	top: 14px;
	left: 13px;
	height: 27px;
	width: 27px;
	cursor: pointer;
	transition: all 1s cubic-bezier(.19, 1, .22, 1);
}
.mobile-dropdown .hamburger .line {
	background: var(--color-hamburger-line);
	position: absolute;
	display: block;
	width: var(--width-hamburger-line);
	height: var(--height-hamburger-line);
	border-radius: .2rem;
	left: 0;
	transition: all .6s cubic-bezier(.5, .1, 0, 1.2);
}
.mobile-dropdown .hamburger .line-1 {top: 0;}
.mobile-dropdown .hamburger .line-2 {
	top: var(--top-hamburger-line2);
	transform: translateX(0px);
}
.mobile-dropdown .hamburger .line-3 {top: var(--top-hamburger-line3);} 
.mobile-dropdown input[type=checkbox]:checked ~ label .line-1 {
	top: 0px;
	width: var(--width-line-checked);
	transform: translateX(-11px) rotate(-45deg) translateY(12px);
}
.mobile-dropdown input[type=checkbox]:checked ~ label .line-2 {
	opacity: 0;
}
.mobile-dropdown input[type=checkbox]:checked ~ label .line-3 {
	top: 14px;
	width: var(--width-line-checked);
	transform: translateX(-8px) rotate(45deg) translateY(-8px);
}

/* MOBILE FOOTER */
footer {display: none;}
.mobile-tab-bar {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 20;
    background: var(--color-footer);
    backdrop-filter: blur(6px) saturate(140%) contrast(0.9) brightness(1.05);
	-webkit-backdrop-filter: blur(6px) saturate(140%) contrast(0.9) brightness(1.05);
    color: var(--color-navbar-font);
    border-radius: 32px;
    padding: 5px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    height: 54px;
	box-shadow: 0 0 10px 0 var(--color-body-bg);
}
.mobile-tab-button {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    border-radius: 27px;
    height: 54px;
    width: calc(100% + 10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    margin-inline: -10px;
    padding-inline: 10px;
    z-index: 0;
}
.mobile-tab-button:first-child { margin-left: 0; }
.mobile-tab-button:last-child  { margin-right: 0; }
.mobile-tab-button > * { position: relative; z-index: 1; }
.mobile-tab-button.tab-active { z-index: 2; }
.mobile-tab-button:focus-visible {
    outline: 2px solid #2e2e2e;
    outline-offset: 2px;
}
.mobile-tab-button.tab-active {
    background: var(--color);
}
.tab-btn-icon img {
    width: 26px;
    height: 26px;
	padding-bottom: 4px;
    display: block;
    object-fit: contain;
}
.tab-btn-text {
    font-size: 10px;
    line-height: 1;
    letter-spacing: .2px;
}

/* NAVBAR RESPONSIVE */
@media screen and (max-width: 1300px) { 
	.navbarinner {width: 100%;}
	.navlogo {margin-left: 12px;}
	.navleft {
		width: calc(100% - 212px);
	}
}
@media screen and (max-width: 850px) { 
	.navleft-l {display: none;}
	.navleft-r {padding-left: 10px !important;}
	.linkfull {display: none;}
	.linkshort {display: inline;}
}
@media screen and (max-width: 700px) { 
    #navbar {height: var(--height-mobile-navbar); min-height: auto;}
	.navlogo {display: none; height: var(--height-mobile-navbar);}
	.navlogo h1 {font-size: 26px; line-height: 26px; padding-left: 40px; padding-top: 9px;}
	.mobile-title {display: inline-block;}
    .navbarinner { width: 100%;}
	.navnoauth {display: none;}
	.navleft {display: none;}
	.navright {height: var(--height-mobile-navbar); width: var(--height-mobile-navbar);}
	.navrighticon {
		background-size: calc(var(--height-mobile-navbar) - 12px) calc(var(--height-mobile-navbar) - 12px);
		height: calc(var(--height-mobile-navbar) - 12px);
		margin-left: 6px;
		margin-top: 6px;
		margin-bottom: 4px;
		width: calc(var(--height-mobile-navbar) - 12px);
	}
	.mobile-dropdown {display: none;} /* Disabled since Version 1.5 */
	.hamburger {display: none !important;} /* Disabled since Version 1.5 */
	footer{display: block;}
}
@media screen and (max-width: 400px) { 
	.navlogo h1 {padding-top: 10px;}
}