* { margin: 0; padding: 0; box-sizing: border-box; }
html {}
table { border-collapse: collapse; }
body { font-family: serif; }
h1, h2, h3, h4, h5, h6 { font-family: sans-serif; color: #333; }
h1 { font-size: 1.8rem; margin-bottom: 0.4rem; }
a { color: #333; }
a:visited { color: #666; }
a:hover { color: #999; }

/* Header */
header {
	padding-right:   1.4rem;
	background:      #eee;
	display:         flex;
	align-items:     center;
	justify-content: space-between;}
header > div:nth-child(2) {
	text-align: right; display: flex; flex-direction: column; gap: 0.2rem; }
header a, header a:visited { padding: 0.1rem; color: #444; }
header .brand {
	display:        flex; align-items: center;
	font-size:      1.8rem;
	font-family:    sans-serif;
	font-weight:    bold;
	font-style:     italic;
	letter-spacing: -0.1rem;}
header .brand img {
	height:     80px;
	display:    block;
	margin-top: 0.4rem;
}
header .brand a {
	display:         block;
	text-decoration: none;
	color:           #666;
}

footer { padding: 0.8rem 1.2rem; font-size: 0.8rem; margin-top: 2rem; border-top: 1px solid gainsboro; }
footer div { display: flex; align-items: center; gap: 0.2rem; margin-bottom: 0.2rem; }
footer .dem-logo { height: 15px; }
main { padding: 0.6rem 1.2rem; }
.error { color: red; }

/* Button */
button { cursor: pointer; padding: 0 0.2rem; white-space: nowrap; }
div.buttons { display: flex; gap: 0 0.2rem; align-items: center; flex-wrap: wrap; }
div.buttons button {
	display: flex; align-items: center; gap: 0.2rem; padding: 0.2rem 0.4rem; }
button img { width: 16px; height: 16px; }
button svg { width: 16px; height: 16px; opacity: 0.8; }

/* Table common */
th, td span.label { font-weight: bold; font-family: sans-serif; font-size: 0.8rem; }
td span.label { color: #888; margin-right: 0.2rem; }

/* ul, li */
ul { margin: 1rem 0; }
li { margin: 0 0 0 1rem; }

/* List */
.list-title { display: flex; align-items: center; gap: 0.5rem; }
.list-title h1 { margin: 0; }
.list-filter {
	background-color: #eee;
	padding:          0.6rem;
	margin:           0.4rem 0 0.6rem;
	border-radius:    0.3rem;
	display:          flex; align-items: center; gap: 0.4rem;
}

table.list { position: relative; margin: 0.6rem 0; border-bottom: 2px solid #eee; width: 100%; }
table.list th {
	position:   sticky; top: 0; z-index: 90;
	background: #444; color: #ccc;
	text-align: left; padding: 0.4rem; }
table.list td { padding: 0 0.4rem; vertical-align: top; }
table.list tr:nth-child(4n-3), table.list tr:nth-child(4n-2) { background: #eee; }
table.list tr:nth-child(4n-3) td, table.list tr:nth-child(4n-1) td { padding-top: 0.4rem; }
table.list tr:nth-child(4n-2) td, table.list tr:nth-child(4n) td { padding-bottom: 0.4rem; }
table.list button { margin: 0.2rem 0; }

table tr.last-record {
	/*opacity:          0;*/
	background-color: #ffff93 !important;
}
table tr.last-record.ease-in {
	/*opacity:    1;*/
	/*transition: 0.2s opacity;*/
	background-color: transparent !important;
	transition:       1s background-color;
}
table.list tr:nth-child(4n-3).last-record.ease-in,
table.list tr:nth-child(4n-2).last-record.ease-in {
	background-color: #eee !important;
	transition:       1s background-color;
}

/* Create */
table.card { margin: 0.4rem 0; max-width: 36rem; }
table.card th {
	background: #eee; vertical-align: top;
	text-align: right; padding: 0.4rem; }
table.card td { padding: 0.4rem; vertical-align: top; }
table.card td div.buttons { gap: 0.4rem; }

/* Form elements */
input[type=text], input[type=email], input[type=date], input[type=password] { width: 100%; }
textarea { width: 100%; min-height: 6rem; }
select { padding: 0.2rem; }

/* Toast */
.toast {
	font-family: sans-serif; font-size: 0.9rem;
	display:     flex; align-items: flex-start; gap: 0.6rem;
	padding:     0.4rem; width: 300px;
	position:    fixed; top: 10px; left: -310px; z-index: 100;
	box-shadow:  4px 4px 0 0 rgba(0, 0, 0, 0.2);
	animation:   6s 0s forwards toast-auto-close;
	transition:  1s opacity;
}
.toast:hover { animation-play-state: paused; }
.toast.keep-open { animation: 6s 0s forwards toast-keep-open; }

.toast.success { background: #d9ffd9; border-left: 3px solid green; }
.toast.success .toast-icon { fill: green; }
.toast.info { background: #ddefff; border-left: 3px solid steelblue; }
.toast.info .toast-icon { fill: steelblue; }
.toast.warn { background: #fff9dd; border-left: 3px solid orange; }
.toast.warn .toast-icon { fill: orange; }
.toast.error { background: #ffe0ea; color: #000; border-left: 3px solid firebrick; }
.toast.error .toast-icon { fill: firebrick; }
.toast-close { cursor: pointer; }
.toast-content { flex-grow: 1; padding-top: 0.1rem; }

@keyframes toast-keep-open {
	10% { transform: translateX(320px); }
	50% { transform: translateX(320px); }
	100% { transform: translateX(320px); }
}
@keyframes toast-auto-close {
	10% { transform: translateX(320px); }
	50% { transform: translateX(320px); }
	100% { transform: translateX(-320px); }
}

/* Specific */
#show-password { margin-top: 0.4rem; }

/* Responsive section */
@media only screen and (max-width: 600px) {
	table.list, table.list thead, table.list tbody, table.list tr, table.list th, table.list td {
		display: block; }
	table.list thead { position: absolute; left: -9999px; top: -9999px; height: 0; }
	table.list tr:nth-child(4n-2) td:nth-child(1):before,
	table.list tr:nth-child(4n) td:nth-child(1):before { content: "ID: "; }
}

@media only screen and (max-width: 400px) {
	table.card, table.card thead, table.card tbody, table.card tr, table.card th, table.card td {
		display: block; width: 100%; }
	table.card th { text-align: left; background: transparent; padding-bottom: 0; }
	table.card td { padding-top: 0.2rem; padding-bottom: 0.6rem; }
	table.card tr:nth-child(odd) { background: #eee; }
}