@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');

html[onsflag-ios] {
	scroll-behavior										:	smooth;
}

html[onsflag-android] {
	overscroll-behavior-y								:	contain;
}

html, body {
	max-width											:	100%;
	overflow-x											:	hidden;
	min-height											:	100%;
	min-height											:	calc(100% + constant(safe-area-inset-top));
	min-height											:	calc(100% + env(safe-area-inset-top));
	-webkit-tap-highlight-color							:	var(--purple);
}

body {
	overflow-x											:	hidden;
	background-color									:	var(--black);
}

body[onsflag-ios] {
	overscroll-behavior-y								:	contain;
}

ons-progress-circular {
	position											:	absolute;
	top													:	50%;
	left												:	50%;
	transform											:	translate(-50%, -50%);
}

.tabbar--material__border {
	background-color									:	var(--darkgrey);
}

.progress-circular__secondary {
	stroke												:	var(--purple);
}

.progress-circular__primary {
	stroke												:	var(--purple);
}

.action-sheet-button,
.action-sheet-button:active,
.action-sheet-button:visited,
.action-sheet-button:focus,
.action-sheet-button:hover {
	color												:	var(--green);
	background-color									:	var(--darkgrey);
}

.alert-dialog-button--rowfooter:first-child {
	color												:	var(--green);
	background-image									:	linear-gradient(0deg, transparent, transparent 50%, var(--black) 50%);
}

#finish-shopping-list-alert .alert-dialog-button--rowfooter:first-child {
	color												:	var(--red);
	background-image									:	linear-gradient(0deg, transparent, transparent 50%, var(--black) 50%);
}

#finish-shopping-list-alert .alert-dialog-button--rowfooter {
	color												:	var(--green);
}

#finish-food-list-alert .alert-dialog-button--rowfooter:first-child {
	color												:	var(--red);
	background-image									:	linear-gradient(0deg, transparent, transparent 50%, var(--black) 50%);
}

#finish-food-list-alert .alert-dialog-button--rowfooter {
	color												:	var(--green);
}

#add-components-modal input[type="text"] {
	width												:	160%;
}

#add-components-modal .list-item__left {
	color												:	var(--green);
}

.alert-dialog {
	background-color									:	var(--darkgrey);
}

html[onsflag-android] .alert-dialog {
	background-color									:	var(--black);
}

.alert-dialog-title {
	color												:	var(--white);
}

.alert-dialog-content {
	color												:	var(--white);
	font-family											:	'Righteous', -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
}

.list-title {
	font-family											:	'Righteous', -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
	font-size											:	1rem;
	color												:	var(--purple);
	padding-top											:	1rem;
	padding-bottom										:	1rem;
	padding-right										:	1rem;
}

.progress-bar--indeterminate:before,
.progress-bar__primary,
.progress-bar__secondary,
.progress-bar--indeterminate:after {
	background-color									:	var(--purple);
}

.action-sheet-button--destructive,
.action-sheet-button--destructive:active,
.action-sheet-button--destructive:visited,
.action-sheet-button--destructive:focus,
.action-sheet-button--destructive:hover {
	color												:	var(--red);
	background-color									:	var(--darkgrey);
}

.action-sheet-button:last-of-type,
.action-sheet-button:last-of-type:active,
.action-sheet-button:last-of-type:visited,
.action-sheet-button:last-of-type:focus,
.action-sheet-button:last-of-type:hover {
	background-color									:	var(--darkgrey);
}

.action-sheet-title {
	color												:	var(--white);
	background-color									:	var(--darkgrey);
	font-family											:	'Righteous', -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
}

.text-center {
	text-align											:	center;
}

.sender {
	color												:	var(--purple);
}

.hint-to {
	color												:	var(--green);
}

.recipient {
	color												:	var(--blue);
}

.news-message {
	font-style											:	italic;
	font-size											:	1rem;
	max-width											:	85%;
	white-space											:	pre-wrap;
}

.news-message a,
.news-message a:active,
.news-message a:visited,
.news-message a:focus,
.news-message a:hover {
	color												:	var(--white);
}

@media (orientation: landscape) {
	.news-message {
		max-width										:	100%;
	}
}

body.online .news-delete {
	color												:	var(--white);
	position											:	relative;
	float												:	right;
	top													:	-15px;
	right												:	-15px;
}

body.offline .news-delete {
	color												:	var(--white);
	position											:	relative;
	float												:	right;
	top													:	-15px;
	right												:	-15px;
	visibility											:	hidden;
}

.news-time {
	font-size											:	0.65rem;
	font-style											:	italic;
	color												:	var(--blue);
}

#news .page__content,
#shopping .page__content,
#food .page__content {
	background-image									:	url('../../media/images/logo/logo.png') !important;
	background-repeat									:	no-repeat !important;
	background-position									:	center center !important;
	background-color									:	var(--black) !important;
}

@media (orientation: portrait) {
	html[onsflag-iphonex-portrait] .page__content {
		padding-bottom									:	78px;
	}

	html[onsflag-android] .page__content {
		padding-bottom									:	48px;
	}

	#portrait-mode-hint {
		display											:	none;
	}
}

@media (orientation: landscape) {
	html[onsflag-iphonex-landscape] .page__content {
		padding-bottom									:	66px;
	}

	html[onsflag-android] .page__content {
		padding-bottom									:	46px;
	}

	#portrait-mode-hint {
		display											:	block;
		color											:	var(--white);
		font-family										:	'Righteous', -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
		text-align										:	center;
		position										:	absolute;
		top												:	50%;
		left											:	50%;
		transform										:	translate(-50%, -50%);
	}

	#app {
		display											:	none;
	}
}

.modal-close {
	color												:	var(--white);
}

.modal {
	background-color									:	var(--black);
}

.select-input {
	font-size											:	0.85rem;
}

ons-select {
	width												:	98%;
}

body.online #send-new-message-button {
	background-color									:	var(--purple);
	color												:	var(--white);
	font-family											:	'Righteous', -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
	margin-top											:	2rem;
}

body.offline #send-new-message-button {
	background-color									:	var(--purple);
	color												:	var(--white);
	font-family											:	'Righteous', -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
	pointer-events										:	none;
	opacity												:	0.4;
	margin-top											:	2rem;
}

body.online #add-new-components-button {
	background-color									:	var(--purple);
	color												:	var(--white);
	font-family											:	'Righteous', -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
	margin-top											:	2rem;
}

body.offline #add-new-components-button {
	background-color									:	var(--purple);
	color												:	var(--white);
	font-family											:	'Righteous', -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
	pointer-events										:	none;
	opacity												:	0.4;
	margin-top											:	2rem;
}

body.online #check-new-components-button {
	background-color									:	var(--purple);
	color												:	var(--white);
	font-family											:	'Righteous', -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
	margin-top											:	2rem;
}

body.offline #check-new-components-button {
	background-color									:	var(--purple);
	color												:	var(--white);
	font-family											:	'Righteous', -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
	pointer-events										:	none;
	opacity												:	0.4;
	margin-top											:	2rem;
}

body.offline #search-new-shopping-item {
	pointer-events										:	none;
	opacity												:	0.4;
}

body.offline .got-shopping-item {
	pointer-events										:	none;
	opacity												:	0.4;
}

body.offline .delete-shopping-item {
	pointer-events										:	none;
	opacity												:	0.4;
}

body.offline #finish-shopping-list {
	pointer-events										:	none;
	opacity												:	0.4;
}

.textarea {
	width												:	98%;
	caret-color											:	var(--purple);
}

input[type="text"],
input[type="search"] {
	caret-color											:	var(--purple);
}

@media (orientation: landscape) {
	.modal-close {
		top												:	5px;
	}
}

@media (orientation: portrait) {
	html[onsflag-iphonex-portrait] body.online .fab--bottom__center,
	html[onsflag-iphonex-portrait] body.online .fab--bottom__left,
	html[onsflag-iphonex-portrait] body.online .fab--bottom__right {
		bottom											:	90px;
		right											:	20px;
		background-color								:	var(--purple);
	}

	html[onsflag-android] body.online .fab--bottom__center,
	html[onsflag-android] body.online .fab--bottom__left,
	html[onsflag-android] body.online .fab--bottom__right {
		bottom											:	55px;
		right											:	20px;
		background-color								:	var(--purple);
		color											:	var(--white);
	}

	html[onsflag-iphonex-portrait] body.offline .fab--bottom__center,
	html[onsflag-iphonex-portrait] body.offline .fab--bottom__left,
	html[onsflag-iphonex-portrait] body.offline .fab--bottom__right {
		bottom											:	90px;
		right											:	20px;
		background-color								:	var(--purple);
		visibility										:	hidden;
	}

	html[onsflag-android] body.offline .fab--bottom__center,
	html[onsflag-android] body.offline .fab--bottom__left,
	html[onsflag-android] body.offline .fab--bottom__right {
		bottom											:	55px;
		right											:	20px;
		background-color								:	var(--purple);
		color											:	var(--white);
		visibility										:	hidden;
	}
}

@media (orientation: landscape) {
	html[onsflag-iphonex-landscape] body.online .fab--bottom__center,
	html[onsflag-iphonex-landscape] body.online .fab--bottom__left,
	html[onsflag-iphonex-landscape] body.online .fab--bottom__right {
		bottom											:	80px;
		right											:	6px;
		background-color								:	var(--purple);
	}

	html[onsflag-android] body.online .fab--bottom__center,
	html[onsflag-android] body.online .fab--bottom__left,
	html[onsflag-android] body.online .fab--bottom__right {
		bottom											:	55px;
		right											:	12px;
		background-color								:	var(--purple);
		color											:	var(--white);
	}

	html[onsflag-iphonex-landscape] body.offline .fab--bottom__center,
	html[onsflag-iphonex-landscape] body.offline .fab--bottom__left,
	html[onsflag-iphonex-landscape] body.offline .fab--bottom__right {
		bottom											:	80px;
		right											:	6px;
		background-color								:	var(--purple);
		visibility										:	hidden;
	}

	html[onsflag-android] body.offline .fab--bottom__center,
	html[onsflag-android] body.offline .fab--bottom__left,
	html[onsflag-android] body.offline .fab--bottom__right {
		bottom											:	55px;
		right											:	12px;
		background-color								:	var(--purple);
		color											:	var(--white);
		visibility										:	hidden;
	}
}

.toolbar-button {
	color												:	var(--purple);
}

.toolbar-button--outline {
	border												:	1px solid var(--purple);
}

.tabbar__icon {
	color												:	var(--purple);
}

.tabbar__button,
:checked+.tabbar__button {
	color												:	var(--white);
	top													:	10px;
}

html[onsflag-android] .tabbar__button,
html[onsflag-android] :checked+.tabbar__button {
	top													:	-2px;
}

.tabbar__label {
	font-family											:	'Righteous', -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
	padding-top											:	0.5rem;
}

.tabbar__icon+.tabbar__label {
	color												:	var(--purple);
}

.toolbar__title {
	font-family											:	'Righteous', -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
}

.list-item__center {
	font-family											:	'Righteous', -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
}

.list-item__subtitle {
	font-family											:	'Righteous', -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
}

.bottom-bar p {
	font-family											:	'Righteous', -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
}

.list {
	background-color									:	var(--black);
	background-image									:	none;
}

.list-item__thumbnail {
	width												:	60px;
	height												:	60px;
}

.tabbar__label {
	font-family											:	'Righteous', -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
	color												:	var(--white);
}

.list-item--longdivider,
.list-item--material.list-item--longdivider {
	background-color									:	var(--black);
	border-bottom										:	2px solid var(--darkgrey);
}

#app-menu-content .list-item--longdivider:last-of-type,
#app-menu-content .list-item--material.list-item--longdivider:last-of-type {
    border-bottom										:	2px solid var(--darkgrey);
}

#new-message-modal .list .list-item__center {
	background-image									:	none;
}

#app-menu-content .page__background {
	background-color									:	var(--black);
}

.delete-shopping-item {
	color												:	var(--red);
}

.delete-food-item {
	color												:	var(--red);
}

.got-shopping-item.open {
	color												:	var(--blue);
	margin-right										:	2rem;
}

.get-food-item.open {
	color												:	var(--blue);
	margin-right										:	2rem;
}

.got-shopping-item.closed {
	color												:	var(--green);
}

#finish-shopping-list {
	color												:	var(--green);
	float												:	right;
	visibility											:	hidden;
}

body.online .toolbar__right .signal-no {
	display												:	none;
}

body.offline .toolbar__right .signal-yes {
	display												:	none;
}

.alert-dialog-button--rowfooter {
	background-image									:	linear-gradient(0deg, transparent, transparent 50%, var(--black) 50%), linear-gradient(90deg, transparent, transparent 50%, var(--black) 50%);
	color												:	var(--red);
}

#shopping .list-header {
	text-transform										:	none;
	color												:	var(--white);
}

#food .list-header {
	text-transform										:	none;
	color												:	var(--white);
}

#shopping .list {
	padding-bottom										:	2px;
}

#food .list {
	padding-bottom										:	2px;
}

#shopping .list-item__center {
	color												:	var(--white);
}

#food .list-item__center {
	color												:	var(--white);
}

#open-shopping-items {
	color												:	var(--white);
	font-weight: bold;
	font-size: 1rem;
}

#open-food-items {
	color												:	var(--white);
	font-weight: bold;
	font-size: 1rem;
}

#search-new-shopping-item {
	width												:	98%;
	margin-left											:	1%;
	margin-right										:	1%;
	margin-top											:	1rem;
}

#search-new-food {
	width												:	98%;
	margin-left											:	1%;
	margin-right										:	1%;
	margin-top											:	1rem;
}

.search-input {
	background-image									:	none;
	caret-color											:	var(--purple);
	text-align											:	center;
	padding												:	0 28px 0 28px;
}

input,
textarea,
[contenteditable] {
	caret-color											:	var(--purple);
}

.autocomplete-suggestions {
	background-color									:	var(--darkgrey);
	border												:	0;
}

.autocomplete-suggestion {
	font-family											:	'Righteous', -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
	color												:	var(--white);
	padding												:	0.6rem;
}

.autocomplete-suggestion b {
	color												:	var(--purple);
}

:checked+.switch__toggle {
    box-shadow											:	inset 0 0 0 2px var(--blue);
    background-color									:	var(--blue);
}

html[onsflag-android] :checked+.switch--material__toggle>.switch--material__handle {
	box-shadow											:	inset 0 0 0 2px var(--blue);
    background-color									:	var(--blue);
}

.modal__content {
	overflow											:	auto;
	overflow-y											:	scroll;
	overflow-x											:	hidden;
	max-height											:	90vh;
	display												:	block;
	top													:	50%;
	left												:	50%;
	width												:	100%;
	transform											:	translate(-50%, -50%);
	position											:	absolute;
	margin-top											:	4vh;
	padding-bottom										:	6vh;
	-webkit-overflow-scrolling							:	touch;
}

#search-for-components-chefkoch {
	color												:	var(--white);
	text-decoration										:	none;
	font-size											:	0.8rem;
	font-weight											:	normal;
}

#search-for-components-chefkoch span {
	color												:	var(--green);
}