: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: Arial, Helvetica, sans-serif;
}

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

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

/* Components */

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

p, label, a {
	font-size: 13px;
}

button {
	color: white;
	height: 30px;
	cursor: pointer;
	border: solid 1px var(--color-grey-light);
	min-width: 100px;
	align-self: baseline;
	background: linear-gradient(180deg,rgba(0, 176, 208, 1) 0%, rgba(0, 134, 167, 1) 100%);
	justify-self: baseline;
	border-radius: 4px;

	&:hover {
		border-color: var(--color-dlink);
	}

	&:active {
		background: linear-gradient(180deg,rgba(0, 176, 208, 1) 0%, rgba(0, 134, 167, 1) 0%);
	}
}

dialog {
	margin: auto;
}

/* Sections */

vv-shell {
	width: calc(100% - 30px);
	margin: 40px 0;
	padding: 20px;
	position: relative;
	min-height: 400px;
	box-shadow: 0 0 9px 3px #00000026;
	border-radius: 9px;
	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");
	}
}

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

	img {
		height: 60px;
	}

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

		a {
			color: var(--color-dlink);
			font-weight: bolder;
			text-decoration: 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-weight: bolder;
			margin-bottom: 10px;
		}

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

			& a {
				text-decoration: none;
			}
		}
	}
}