/**************************************************
				Font definitions
***************************************************/

@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: 	url("../fonts/material/MaterialIcons-Regular.ttf"),
			url("../fonts/material/MaterialIcons-Regular.woff"),
			url("../fonts/material/MaterialIcons-Regular.woff2")
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: normal;
	src: 	url("../fonts/roboto/Roboto-Regular.ttf");
}

@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: normal;
	src: 	url("../fonts/roboto/Roboto-Italic.ttf");
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: bold;
	src: 	url("../fonts/roboto/Roboto-Bold.ttf");
}

@font-face {
	font-family: 'Roboto';
	font-style: italic;
	font-weight: bold;
	src: 	url("../fonts/roboto/Roboto-BoldItalic.ttf");
}

/**************************************************
					Utilities
***************************************************/

/* display an element as Material icon */
.icon {
	
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	white-space: nowrap;
	
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'liga';
	
}

/* prepends an element as Material icon. The data-icon attribute sets the icon to display*/
.icon-prepend::before {
	content: attr(data-icon);
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	white-space: nowrap;
	
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'liga';
	
}

/* appends an element as Material icon. The data-icon attribute sets the icon to display*/
.icon-append::after {
	content: attr(data-icon);
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	display: inline-block;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	white-space: nowrap;
	
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'liga';
	
}

/**************************************************
					Defaults
***************************************************/

html {
	font-family: 'Roboto', 'sans-serif';
	color: var(--black);
}

* {
	padding: 0;
	margin: 0;
	font-size: 2.2vh;
	
	overflow-wrap: break-word;
  	word-wrap: break-word;
  	word-break: break-word;
  	hyphens: auto;
}

h1 { font-size: 2em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.2em; }

hr { margin: 1em 0; border-color: #00000033; }
label {
	font-size: 0.8em;
	font-weight: bold;
	display: block;
}
a {
	color: var(--primary-1);
}

/**************************************************
				Layout Components
***************************************************/

body.mobile-app {
	height: 100vh;
	width: 100vw;
}

.mobile-header {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 8vh;
	line-height: 8vh;
	z-index: 100;
	display: flex;
	align-content: stretch;
	align-items: stretch;
	justify-content: space-evenly;
	
	background-color: var(--primary);
	color: var(--white);
}

.mobile-header img {
	flex: 0;
	height: 6vh;
	margin: auto 12px;
}

.mobile-header .title {
	flex: 4;
	text-align: center;
	font-size: 1.2em;
}

.mobile-header div {
	align-self: flex-end;
	height: 100%;
}

.mobile-header div > a, .mobile-header div > .handle {
	line-height: 8vh;
	margin: auto 2vw;
	vertical-align: middle;
	
	color: white;
	text-decoration: none;
	font-size: 1.8em;
	width: 100%;
	height: 100%;
}

.mobile-main {
	position: fixed;
	box-sizing: border-box;
	overflow-y: scroll;
	overflow-x: hidden;
	
	padding: 1.4em;
	padding-bottom: 6em;
	
	top: 8vh;
	left: 0px;
	height: 84vh;
	width: 100vw;
}

/* .mobile-main > * { */
/* 	margin: 1em 0.5em; */
/* } */

.mobile-footer {
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100vw;
	height: 8vh;
	z-index: 100;
	
	border-top: 1px solid var(--grey-2);
	background-color: var(--grey-3);
	
	display: flex;
	align-items: stretch;
	justify-content: space-around;
}

.mobile-footer .mobile-nav {
	flex: 1;
	align-content: center;
	align-self: center;
	text-align: center;
	vertical-align: middle;
	color: var(--grey);
}

.mobile-footer .mobile-nav.selected {
	color: var(--white);
	background-color: var(--primary-1); 
}

.mobile-nav a {
	color: inherit;
	text-decoration: none;
	font-size: 1.8em;
	line-height: 8vh;
	width: 100%;
	height: 100%;
}

.mobile-container {
	margin: 1em 0.5em;
	background-color: var(--grey-3);
	display: flex;
	border-radius: var(--border-radius);
	box-shadow: 2px 2px 4px #00000044;
	border-left: 0.8em solid transparent;
	color: var(--grey);
}


.mobile-container .display {
	margin: 0.5em 0;
	color: var(--grey-1);
	display: grid;
}

.mobile-container .wrapper {
	flex: 1;
	padding: 1em;
	overflow: hidden;
}

.mobile-container .wrapper .title {
	--fg: var(--black);
	color: var(--fg);
	font-size: 1.2em;
	word-break: break-word;
}

.mobile-container .wrapper .title.success 	{ --fg: var(--success-fg); }
.mobile-container .wrapper .title.warn 	{ --fg: var(--warn-fg); }
.mobile-container .wrapper .title.active 	{ --fg: var(--info-fg); }
.mobile-container .wrapper .title.error 	{ --fg: var(--error-fg); }
.mobile-container .wrapper .title.inactive 	{ --fg: var(--grey-2); }

.mobile-container .wrapper > .content {
	max-height: 0px;
	overflow: hidden;
	transition: max-height var(--transition-time) cubic-bezier(0, 1, 0, 1);
	color: var(--grey-1);
}
.mobile-container.visible .wrapper > .content {
	max-height: 10000px;
	border-top: 1px solid var(--grey-2);
	margin-top: 2vh;
	padding: 2vh 0;
	transition: max-height var(--transition-time) ease-in-out;
}

.mobile-container .wrapper .content > * {
	margin: 0.5em 0 0.5em;
	display: grid;
}

.mobile-container .wrapper .content label {
	color: var(--grey);
	margin: 1em 0 0.5em;
}

.mobile-container .control {
	cursor: pointer;
	border-left: 1px solid var(--grey-2);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.mobile-container .control i {
	text-align: center;
	font-size: 2em;
	transform: rotate(0deg);
	-webkit-transition: -webkit-transform 0.6s ease-in-out;
	-ms-transition: -ms-transform 0.6s ease-in-out;
	transition: transform 0.6s ease-in-out;
}

.mobile-container.visible .control.collapsible i {
	transform: rotate(90deg);
}

.mobile-container.active 	{ border-left-color: var(--primary-1); }
.mobile-container.warn 		{ border-left-color: var(--warn-fg); }
.mobile-container.inactive 	{ border-left-color: var(--grey); }
.mobile-container.success 	{ border-left-color: var(--success-fg); }
.mobile-container.error 	{ border-left-color: var(--error-fg); }

/**************************************************
				Control Components
***************************************************/

.dropdown {
	display: none;
	position: absolute;
	top: 8vh;
	right: 1px;
	max-height: 0px;
	min-width: 40vw;
	z-index: 200;
	
	list-style: none;
	line-height: 1;
	
	border: 1px solid var(--grey-2);
	border-top: none;
	box-sizing: border-box;	
	box-shadow: -4px 4px 20px #00000000;
	
	overflow: hidden;
	
	background-color: var(--white);
	
	transition: max-height .5s ease-out,
				box-shadow .2s ease-out;
}

.dropdown a {
	color: var(--black);
	text-decoration: none;
	padding: 0.6em;
	display: block;
}




.dropdown .item.separator {
	padding: 0;
	border: 1px solid var(--grey-2);
}

.dropdown .item.separator a {
	padding: 0;
}

.has-dropdown > .handle { 
	position: relative;
	color: white;
	text-decoration: none;
	font-size: 1.8em;
	width: 100%;
	height: 100%;
}

.has-dropdown  .handle.notify::after {
	content: ' ';
	position: absolute;
	width: 0.2em;
	height: 0.2em;
	border-radius: 2em;
	top: 0.5em;
	left: 0.8em;
	background-color: var(--warn-fg); 
}

.has-dropdown:focus-within .dropdown {
	display: block;
	max-height: 100vh;
	pointer-events: auto;
	box-shadow: -4px 4px 20px #00000044;
	z-index: 4000;
	overflow: visible;
}

.mobile-toast {
	--fg: var(--info-fg);
	--bg: var(--info-bg);
	
	margin: 0.5em;
	padding: 12px;
	background-color: var(--bg);
	border-radius: var(--border-radius);
	border-left: 0.7rem solid var(--fg);
	color: var(--fg);
	display: flex;
	align-items: stretch;
	justify-content: stretch;
}

.mobile-toast span.icon {
	flex: 0;
	font-size: 1.8em;
}
.mobile-toast span.content {
	flex: 1;
	padding: 6px 12px;
}

.mobile-toast.warn {
	--fg: var(--warn-fg);
	--bg: var(--warn-bg);
}
.mobile-toast.error {
	--fg: var(--error-fg);
	--bg: var(--error-bg);
}
.mobile-toast.success {
	--fg: var(--success-fg);
	--bg: var(--success-bg);
}

.mobile-button, 
.mobile-app input[type="button"],
.mobile-app input[type="submit"] {
	--fg: var(--white);
	--bg: var(--info-fg);
	
	flex: 1;
	margin-bottom: 2vh;
	border: none;
	border-radius: var(--border-radius);
	background-color: var(--bg);
	color: var(--fg);
	box-shadow: 2px 2px 4px var(--shadow-color);
	box-sizing: border-box;
	padding: 0.8em 16px;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	
	overflow: visible; 
}

.mobile-button:active,
.mobile-app input[type="button"]:active,
.mobile-app input[type="submit"]:active {
	box-shadow: none;
}

.mobile-button.primary,
.mobile-app input[type="button"].primary,
.mobile-app input[type="submit"].primary {
	--bg: var(--success-fg);
}

.mobile-button.secondary,
.mobile-app input[type="button"].secondary,
.mobile-app input[type="submit"].secondary {
	--bg: var(--grey);
}

.mobile-button.important,
.mobile-app input[type="button"].important,
.mobile-app input[type="submit"].important {
	--bg: var(--error-fg);
}

ul.mobile-list {
	list-style: none;	
}

ul.mobile-list li {
	padding: 0.5em;
	display: flex;
	align-items: stretch;
	align-content: stretch;
}

ul.mobile-list li > p {
	flex: 1;
	align-self: flex-end;
	text-align: right;
	color: var(--grey-1);
}

ul.mobile-list li > label {
	font-weight: bold;
}

ul.mobile-list li:nth-child(odd) {
	background-color: #00000011;
}

/**************************************************
						Forms
***************************************************/

.mobile-app form, .mobile-app .form {
	display: flex;
	flex-direction: column;
	margin: 1em 0.5em;
}

.mobile-app form input[type="submit"], 
.mobile-app .form input[type="submit"] {
	margin: 0;
}

.mobile-app form label, .mobile-app .form label {
	font-size: 0.8em;
	font-weight: bold;
}

.mobile-app form input, 
.mobile-app form select,
.mobile-app .form input, 
.mobile-app .form select,
.mobile-app form textarea,
.mobile-app .form textarea{
	padding: 0.5em;
	margin-bottom: 2vh;
	box-sizing: border-box;
	font-size: 0.9em;
	border: 1px solid var(--grey-2);
	border-radius: var(--border-radius);
	box-shadow: inset 4px 4px 10px #00000022;
	background-color: var(--white);
	width: 100%;
	resize: none;
}


.mobile-app form input::placeholder,
.mobile-app .form input::placeholder,
.mobile-app form textarea::placeholder,
.mobile-app .form textarea::placeholder {
	font-weight: normal;
}

.mobile-app input.has-error,
.mobile-app textarea.has-error {
	border-color: var(--error-fg);
	border-width: 2px;
	background-color: var(--error-bg);
}

.mobile-app p.form-error {
	color: var(--error-fg);
	margin-bottom: 2vh;
}

.mobile-app input[readonly],
.mobile-app select[readonly],
.mobile-app textarea[readonly] {
	background-color: var(--grey-2);
	color: black;
}

@media(min-width: 712px) {
	.mobile-main {
		padding: 1.4em 12em;
		padding-bottom: 4em;
	}
}