body {
    background-color: #25333f;
}

body > * {
	margin: 0.5rem;
}

.container {
	display: grid;
	flex-direction: column;
    justify-content: left;
    grid-template-columns: auto auto;
    list-style-type: none;
}

.container.firstchildlarge > :first-child {
	grid-column: 1 / -1;	
}

.container > * {
	display: block;
	margin: 0.5rem;
}

h1 {
	font-size: 3em;
}

/* nav bar */
*, .logo {
    color: #e2e2e2;
    font-family: "Roboto", sans-serif;
}

nav {
    background-color: #1d2832;
    margin: 0;
    padding: 1em;
    font-size: 1.2em;
}

nav a {
    padding-right: 1em;
    text-decoration: none;
    color: rgb(65, 89, 110);
}

nav h2 {
    display: inline-block
}

nav > :last-child {
	float: right;
	padding-right: 0;
}

/* notification stuff */
.notif {
    padding: 0.5em;
    background-color: #1d2832;
}

.notif.error {
    background-color: #faa;
}

.notif p {
    margin: 5px;
}

/* landing page */
form.creation {
    background-color: #2e3d4d;
    padding: 1em;
    margin-top: 2em;
}

form.creation > h3 {
    margin: 5px;
    margin-right: 2em;
}

input {
	color: #2e3d4d;
}

input[type="text"] {
    width: calc(100% - 40em);
    min-width: 10em;
}

form.creation > * {
    display: inline-block;
    margin-right: 1.5em;
}

li a {
    text-decoration: none;
}

ul {
    display: grid;
    justify-content: left;
    grid-auto-rows: minmax(5em, auto);
    gap: 1em;
    grid-template-columns: repeat(auto-fill, minmax(8em, 1fr));
    list-style-type: none;
    margin-left: auto;
    margin-right: auto;
}

li {
    background-color: #2e3d4d;
    width: 6em;
    height: 3.5em;
    padding: 1em;
    margin: .5em;
    margin-left: 0;
}

.name {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* user page */
.balance {
	display: block;
	line-break: normal;
}

.balance-value {
	padding-left: 1rem;
	font-size: 2em;
}

/* Amount selector user page */
.amount {
    display: block;
    padding-top: 1em;
}

.amount-presets {
    display: grid;
    justify-content: left;
    grid-auto-rows: minmax(5em, 2);
    grid-template-columns: repeat(6, 6em);
    list-style-type: none;
}
input.button {
	place-content: center;
	padding: 0.8em 0.5em;
	border: none;
	border-radius: 4px;
}

.amount-presets > form > input {
    width: 6em;
    margin: 1em;
}

.amount-presets input:not([type=submit]) {
    display: none !important;
}

.amount-pos {
	color: rgb(0, 204, 29);
}

input.amount-pos {
    background: rgb(21, 89, 73);
}

.amount-neg {
    color: rgb(245, 73, 99);
}

input.amount-neg {
    background-color: rgb(84, 64, 82);
}

/* amount neutral */
.amount-ntr {
    color: #00e1ff;
}

input.amount-ntr {
    background-color: #0e646f;
}

h3 {
	margin: 4px;
	margin-left: 0;	
}

.backgroundbox {
	width: fit-content;
	background-color: #1d2832;
	padding: 1em;
}

.transactions.container > :first-child {
	width: 36em;
}

/* create transaction box */
.box {
	display: grid;
    justify-content: left;
    /* grid-auto-rows: minmax(5em, 2); */
    /* grid-template-columns: repeat(2, calc(50% - 2em)); */
    grid-template-columns: auto 10em;
}

form.box > :first-child, form.box > :last-child {
  grid-column: 1 / -1;
}

form.box > * {
	margin: .3em;
	width: auto;
}


table {
	padding: 1em;
	margin-right: auto;
	margin-left: auto;
}

td {
	padding: .3em;
	min-width: 5em;
}

tr:nth-child(2n) {
	background-color: #1d2832;
}

input {
	background-color: inherit;
	color: white;
}

input:not([type=submit]) {
	border: none;
	border-bottom: 1px solid #e2e2e2;
}

@media print {
	nav, .container, h1 {
		display: none;
	}

	table.log:before {
		content: "Abrechenbarkeit Log";
		font-size: 2em;
		text-decoration: underline;
	}

	table.productlist:before {
		content: "Produkt Liste";
		font-size: 2em;
		text-decoration: underline;
	}

	tr :last-child {
		display: none;		
	}

	td {
	  border-bottom: 1px solid black;
	}

	*, body {
		background-color: white;
		color: black;
	}

	form {
		display: none;
	}
}