@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600;700;900&display=swap');

:root {

	/* --------------------------------------------------------------- */
	/* --- COLORS ---------------------------------------------------- */
	/* --------------------------------------------------------------- */

	--color-background: #ced8de;

	--color-red: #d2232a;
	--color-red-hover: #b4242b;

	--color-green: #33b924;
	--color-green-hover: #2b9d1f;

	--color-blue: #1f8efb;
	--color-blue-hover: #419df8;

	--color-white: #ffffff;
	--color-light-grey: #ecf1f4;
	--color-dark-grey: #61676b;
	--color-black: #000000;


	/* --------------------------------------------------------------- */
	/* --- WIDTHS ---------------------------------------------------- */
	/* --------------------------------------------------------------- */

	--page-width: 1080px;
	--content-width: 1060px;


	/* --------------------------------------------------------------- */
	/* --- TYPOGRAPHY ------------------------------------------------ */
	/* --------------------------------------------------------------- */

	--font-family: 'Titillium Web', sans-serif;

	--font-size-s: 14px;
	--font-size-m: 18px;
	--font-size-l: 22px;
	--font-size-xl: 32px;

	--font-thin: 400;
	--font-regular: 600;
	--font-bold: 700;
	--font-black: 900;

	--font-input: 14px Verdana;
}



/* --------------------------------------------------------------- */
/* --- RESET ----------------------------------------------------- */
/* --------------------------------------------------------------- */

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	min-height: 100%;
}



/* --------------------------------------------------------------- */
/* --- MAIN ------------------------------------------------------ */
/* --------------------------------------------------------------- */

body {

	font-family: var(--font-family);
	font-size: var(--font-size-m);
	font-weight: var(--font-regular);

	color: var(--color-black);
	background-color: var(--color-background);
}


#wrapper {

	min-height: 100vh;

	width: var(--page-width);

	margin: 0 auto;

	background-color: var(--color-white);
}


#main {

	width: var(--content-width);

	margin: 10px auto;
}


#header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 100px;
	padding: 0 20px;
	background-color: var(--color-black);
}


.hdr_logo {
	display: block;
}


.navi {
	color: var(--color-white);
	text-align: right;
	line-height: 1.8;
}


.navi a {
	color: var(--color-white);
	text-decoration: none;
}


.navi a:hover {
	text-decoration: underline;
}


hr {
	display: block;
	width: 100%;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	border-top: 1px solid var(--color-light-grey);
}


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


a:hover {
	text-decoration: underline;
}



/* --------------------------------------------------------------- */
/* --- GLOBAL ---------------------------------------------------- */
/* --------------------------------------------------------------- */

.red_txt {

	color: var(--color-red);
}


textarea,
select,
input[type="text"],
input[type="password"] {
	padding: 10px;
	border: 1px solid transparent;
	background-color: var(--color-light-grey);
	font: var(--font-input);
}


input[type="submit"] {
	padding: 10px 16px;
	border: 0;
	background-color: var(--color-blue);
	color: var(--color-white);
	cursor: pointer;
	font: var(--font-input);
	transition: background-color .2s ease;
}


input[type="submit"]:hover {
	background-color: var(--color-blue-hover);
}


#country-list {
	position: fixed;
	width: 338px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--font-size-s);
	border: 1px solid var(--color-dark-grey);
}


#country-list li {
	padding: 4px;
	background-color: var(--color-light-grey);
}


#country-list li:hover {
	background-color: var(--color-background);
	cursor: pointer;
}


.listings {
	width: 100%;
	margin-top: 20px;
	border-collapse: collapse;
}


.listings th {
	text-align: left;
	border-bottom: 1px solid var(--color-black);
}


.listings td {

	line-height: 36px;
}



/* --------------------------------------------------------------- */
/* --- BUTTONS --------------------------------------------------- */
/* --------------------------------------------------------------- */

.btn {
	display: inline-block;
	width: 90px;
	height: 60px;
	margin: 0 13px 20px 13px;
	border: none;
	border-radius: 12px;
	color: var(--color-white);
	text-align: center;
	text-decoration: none;
	font-size: var(--font-size-l);
	font-weight: var(--font-bold);
	cursor: pointer;
	transition: background-color .2s ease;
}


.btn-red {
	background-color: var(--color-red);
}


.btn-red:hover {
	background-color: var(--color-red-hover);
}


.btn-green {
	background-color: var(--color-green);
}


.btn-green:hover {
	background-color: var(--color-green-hover);
}



/* --------------------------------------------------------------- */
/* --- TRAILERE -------------------------------------------------- */
/* --------------------------------------------------------------- */

.t_button {
	line-height: 60px;
}



/* --------------------------------------------------------------- */
/* --- VÆRKTØJ --------------------------------------------------- */
/* --------------------------------------------------------------- */

.tool_img {
	float: right;
	width: 300px;
	height: 300px;
	border: 1px solid var(--color-dark-grey);
}

.login_container {
	width: 100%;
	text-align: center;
}

.login_container
select,
input[type="password"] {
	width: 200px;
	margin: 0 30px 0 10px;
}


.live-search-wrapper {

	position: relative;

	width: 340px;
}

.live-search {

	width: 100%;
}

.live-search-results {

	position: absolute;

	top: 100%;
	left: 0;

	width: 100%;

	z-index: 999;
}


.live-search-results ul {

	margin: 0;
	padding: 0;

	list-style: none;

	border: 1px solid var(--color-dark-grey);

	background-color: var(--color-white);
}


.live-search-results li {

	padding: 10px;

	cursor: pointer;

	border-bottom: 1px solid var(--color-light-grey);
}


.live-search-results li:last-child {

	border-bottom: 0;
}


.live-search-results li:hover {

	background-color: var(--color-light-grey);
}