:root {
	--color-grey: #888888;
	--color-dlink: #00B0D0;
	--color-grey-dark: #424242;
	--color-grey-light: #F7F7F7;
}

* {
	color: inherit;
	margin: 0;
	box-sizing: border-box;
	font-family: "Roboto", sans-serif;
}

html {
	display: grid;
	justify-items: center;
}

body {
	width: 1000px;
	display: grid;
	background: url("/assets/media/Inner-page_cut_02.png") repeat-x right top;
	justify-items: center;
	grid-template-rows: 70px 1fr 200px;
	background-position: 50% -30px;
	grid-template-columns: 1fr;
}

/* Components */

h1,
h2,
h3 {
	color: var(--color-dlink);
}

a,
p,
li,
label {
	color: #666;
	font-size: 13px;
}

a {
	color: var(--color-dlink);
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}

	&:has(> button) {
		display: contents;
	}
}

ul {
	padding: unset;
	list-style: none;
}

button {
	cursor: pointer;

	&.style {
		--offset: 0;
		--sprite: -29px;

		color: white;
		border: unset;
		height: 29px;
		padding: 0 30px;
		display: inline-block;
		position: relative;
		background:
			url("/assets/media/btnStyle_l.png"),
			url("/assets/media/btnStyle_c.png"),
			url("/assets/media/btnStyle_r.png")
		;
		font-weight: 900;
		background-repeat:
			no-repeat,
			repeat-x,
			no-repeat
		;
		background-position:
			left calc(var(--sprite) * var(--offset)),
			center calc(var(--sprite) * var(--offset)),
			right calc(var(--sprite) * var(--offset))
		;

		&.main {
			--offset: 0;
			&:hover { --offset: 1; }
			&:is(:active, .active) { --offset: 2; }
		}
	}
}

dialog {
	margin: auto;
	border: var(--color-grey-light) 1px solid;
	padding: 20px;
	box-shadow: 0 0 10px #bbbbbb;
	border-radius: 5px;
	background-color: white;
}

div.container {
	border: #ccc 1px solid;
	padding: 20px;
	border-radius: 5px;
	background-color: white;
}

/* Sections */

vv-shell {
	width: calc(100% - 30px);
	border: #dfdfdf 1px solid;
	margin: 40px 0;
	padding: 5px;
	display: grid;
	position: relative;
	min-height: 400px;
	box-shadow: 0 0 10px #bbbbbb;
	border-radius: 5px;
	background-color: white;

	&[vv-loading="true"] ::not(dialog) {
		pointer-events: none;
	}

	&[vv-loading="true"]::after {
		--size: 150px;

		top: 50%;
		left: 50%;
		color: var(--color-dlink);
		width: var(--size);
		height: var(--size);
		padding: 15px;
		content: "";
		position: absolute;
		transform: translate(-50%, -50%);
		font-weight: bolder;
		background-size: contain;
		background-image: url("/assets/media/spinner.gif");
	}

	main {
		padding: 20px;
		background-color: var(--color-grey-light);
	}
}

header {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;

	img {
		height: 60px;
	}

	> div {
		height: 100%;
		display: flex;
		padding: 10px 0;
		align-items: end;
		flex-direction: column;
		justify-content: space-between;

		nav ul {
			gap: 20px;
			display: flex;
			list-style: none;

			a {
				color: var(--color-dlink);
			}
		}

		.profile {
			display: contents;

			> div {
				display: flex;
				align-items: center;
				margin-right: 10px;

				&:not(.active) {
					display: none;
				}

				img {
					height: 1em;
				}
			}

			> div.active + a {
				display: none;
			}
		}
	}
}

footer {
	width: 100%;
	display: grid;
	margin-top: 100px;
	color: var(--color-grey);
	grid-template-columns: repeat(4, 1fr);

	section {
		padding: 20px;

		&:not(:first-child) {
			border-left: solid 1px var(--color-grey);
		}

		p {
			font-size: 15px;
			font-weight: bolder;
			margin-bottom: 10px;
		}

		a {
			color: inherit;
		}
	}
}