:root {
	--design-color: #35A3E9;
	--design-color-disabled: rgba(52, 163, 233, 0.5);
	--active-color: #35E9A3;
	--background-color: #E8E4E0;
	--foreground-color: #F5F3F1;
	--input-color: #FCFBFB;
	--input-gradient: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
	--input-shadow: /*-1px -1px 2px rgba(255, 255, 255, 0.8), */1px 1px 2px rgba(0, 0, 0, 0.2);
	--card-shadow: 1.5px 1.5px 3px rgba(0, 0, 0, 0.3);
	--popover-background-color: var(--foreground-color)!important;
}

html, body {
	overflow: hidden;
}

body view-controller, body .modal-container > view-controller.visible {
	background-color: var(--foreground-color);
}

*:not(input):not(textarea) {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	cursor: default;
}

.content-box {
	display: inline-block;
	box-sizing: border-box;
	vertical-align: top;
}

.content-box._1of1 {
	width: 100%;
}

.content-box._1of3 {
	width: 33.33%;
}

.content-box._2of3 {
	width: 66.66%;
}

.field-label {
	font-size: 14px;
	font-style: italic;
	color: #AAAAAA;
	display: block;
	margin-bottom: 2px;
}

.field-label:not(:first-child) {
	margin-top: 0.8em;
}

body button {
	display: inline-block;
	color: var(--design-color);
	padding: 0.3em;
	padding-left: 0.6665em;
	padding-right: 0.6665em;
	border-radius: 5px;
	-webkit-appearance: none;
	background: transparent;
	border: none;
	font-size: 15px;
	margin: 0;
}

body input, input, button, textarea, body select {
	font-family: inherit;
	border-radius: 0.3em;
	font-size: 14px;
}

/* Old design
body input:not([type="submit"]), textarea, select {
	border: 1px solid rgba(210, 210, 210, 1);
}
*/

body input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]), body textarea {
    -webkit-appearance: none;
    border: none;
    box-shadow: 1px 1px 2px #FFFFFF, -1px -1px 2px rgba(0, 0, 0, 0.2);
    background-color: var(--input-color);
    margin-top: 3px;
    margin-bottom: 3px;
}

body input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="range"])[disabled], body textarea[disabled] {
	background-color: var(--foreground-color);
}

body input:not([type="submit"]):not([type="date"]):not([type="range"]), button, textarea, select {
	padding: 0.3em;
}

select, input[list] {
	-webkit-appearance: none;
    background: var(--input-gradient), linear-gradient(to left, var(--design-color) 0, var(--design-color) 20px, #FFFFFF 20px);
    background-repeat: no-repeat;
	padding-right: calc(20px + 0.3em);
    border: none;
    box-shadow: var(--input-shadow);

	/* old design
	-webkit-appearance: none;
	background: linear-gradient(to left, var(--design-color) 0, var(--design-color) 20px, #FFFFFF 21px);
	background-repeat: no-repeat;
	padding-right: calc(20px + 0.3em);
    */
}

select[disabled], input[list][disabled] {
	background: var(--input-gradient), linear-gradient(to left, var(--design-color-disabled) 0, var(--design-color-disabled) 20px, #FFFFFF 20px);
}

button.primary, .button.primary {
	background: var(--input-gradient), var(--design-color);
	color: #FFFFFF;
	box-shadow: var(--input-shadow);
}

button:not(.primary):not([disabled]):hover {
	background-color: rgba(0, 0, 0, 0.07);
}

button:not(.primary):not([disabled]):active {
	background-color: rgba(0, 0, 0, 0.14);
}

button.primary:not([disabled]):active {
	filter: brightness(0.88);
}

button[disabled] {
	opacity: 0.5;
}

button.default {
	font-weight: bold;
}

button.destructive {
	color: var(--destructive-action-color);
}

button.options:after {
	content: '●●●';
	font-size: 0.7em;
	display: inline-block;
	margin-bottom: 3px;
}

body navigation-bar {
	background: #FFFEFC linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.05));
	box-shadow: var(--input-shadow);
	clip-path: inset(0 0 -3px 0);
	z-index: 1000;
}

body table-view-cell.selected {
	background: var(--input-gradient), var(--design-color);
}

.vertical-centerer {
	display: inline-block;
	height: 100%;
	pointer-events: none;
	width: 0;
	vertical-align: middle;
}

.information-box {
	padding: 0.6em;
	background-color: rgba(0, 0, 255, 0.15);
	display: inline-block;
}

.error-box {
	padding: 0.6em;
	background-color: rgba(255, 0, 0, 0.15);
	display: inline-block;
}

@media screen and (max-width: 480px) {
	.content-box {
		display: block;
	}
}