:root {
	--color-background: #DDD;
	--color-foreground: #EEE;
	--color-inactive: #e8e8e8;
	--color-dim: #BBB;
	--color-text: #222;
	--color-dark: #333;
	--color-gray: #888;
	--color-light: #FAFAFA;
	--color-primary: #1C7CD5;
  --blue: #1C7CD5;
  --red: #c2484a;
  --green: #50b300;
	--gray: #666;
}
.blue { color: var(--blue) }
.red { color: var(--red) }
.green { color: var(--green) }
.gray { color: var(--gray) }

* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
	background-color: var(--color-background);
	color: var(--color-text);
}

section {
	margin: auto;
	margin-bottom: 10px;
	display: block;
	padding: 20px;
	border-radius: 20px;
	width: calc(100% - 40px);
	background-color: var(--color-foreground);
	position: relative;
}

h1 {
	font-family: Rajdhani, sans-serif;
	font-size: 3em;
  font-weight: 400;
	color: var(--color-dim);
	text-transform: uppercase;
	letter-spacing: -3px;
	margin: 0px;
}

h2 {
	font-family: Rajdhani, sans-serif;
	color: var(--color-dark);
	text-align: left;
	margin: 0px;
}

h2, h3 {
	text-transform: uppercase;
	color: var(--color-dark);
}

body {
	font-family: Rajdhani, sans-serif;
	text-align: center;
	font-size: 14pt;
}

select, textarea, button, select, input[type='text'], input[type='number'] {
	font-family: Rajdhani, sans-serif;
	font-size: 14pt;
  color: var(--color-text);
  border: 1px var(--color-dim) solid;
	border-radius: 5px;
	padding: 10px;
  appearance: none;
  -webkit-appearance: none;
	background-color: var(--color-light);
}
  button.plain {
    background-color: transparent;
    border: none;
    padding: 0px;
    margin: 0px;
  }

select {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 16px 12px;
	padding-right: 40px;
}
	select:hover {
		background-color: var(--color-light);
	}

button {
	border: none;
	background-color: var(--color-primary);
	color: var(--color-light);
	padding: 10px 20px;
  box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);
	cursor: pointer;
}

	button:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}
	button:hover {
		filter: brightness(120%);
	}
	button.plain {
		padding: 0px;
		border: none;
		background: none;
		color: inherit;
		font: inherit;
		box-shadow: none;
	}
	button.secondary {
		border: 1px var(--color-primary) solid;
		color: var(--color-primary);
		background-color: transparent;
		box-shadow: none;
	}

footer {
	margin: 50px;
}

.material-icons {
  font-family: 'Material Symbols Outlined';
  color: inherit;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-icons.filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-icons.md-10 { font-size: 10px; }
.material-icons.md-14 { font-size: 14px; }
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }

.material-icons.add, .material-icons.remove, .material-icons.confirm {
  cursor: pointer;
  user-select: none;
}
.material-icons.add:hover, .material-icons.remove:hover { color: var(--blue) }
.material-icons.confirm { color: var(--red) }