/* ========== ========== TEMPLATES ========== ========== */
:root {
	--color-text: #858585;
	--color-active: #b5b5b5;
	
	--color-frame-title: #d59440;
	
	--input-background: #1d2b39;
	--input-background-hover: #23374b;
	--input-background-active: #2a4a6b;
	--input-border: #22384f;
}

/* ========== ========== GENERAL ========== ========== */

html, body {
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Hitopoly regular';
	display: flex;
    justify-content: center;
    align-items: flex-start;
}

#internal {
	background: url('/res/img/background_internal.jpg') #000000;
	background-size: cover;
    background-repeat: no-repeat;
	background-position: top center;
}

#external {
	background: url('/res/img/background_external.jpg') #000000;
	background-size: cover;
    background-repeat: no-repeat;
	background-position: top center;
	align-items: center;
}

main {
	width: 1000px;
    min-height: 200px;
    background: #111d25eb;
    margin: 100px 0;
	color: var(--color-text);
}

/* ========== ========== FONTS ========== ========== */

@font-face {
	font-family: 'Hitopoly title';
	src: url('/res/fonts/Bebas-Neue.ttf');
}

@font-face {
	font-family: 'Hitopoly regular';
	src: url('/res/fonts/framd.ttf');
}

/* ========== ========== INPUTS ========== ========== */

input {
	background: var(--input-background);
	border: 1px solid var(--input-border);
	color: var(--color-text);
	width: 200px;
}

input:hover {
	background: var(--input-background-hover);
}

input:active {
	background: var(--input-background-active);
	color: var(--color-active);
}

input[type=submit] {
	clip-path: polygon(
		0% 0%, 
		100% 0%, 
		100% calc(100% - 5px), 
		calc(100% - 5px) 100%, 
		0% 100%, 
		0% 0%
		);
	width: 150px;
	height: 30px;
	cursor: pointer;
}

/* ========== ========== CHECK-IN ========== ========== */

#check-bordered {
	width: 520px;
    background: #0d0e0e;
}

#check-block {
	margin: 4px;
    width: -webkit-fill-available;
    border: 1px solid #17212f;
	padding: 10px 20px;
}

#check-title {
	width: -webkit-fill-available;
    height: 20px;
    background: url('/res/img/icons/warning.png') no-repeat;
    background-position: left center;
    padding: 6px 20px 14px 60px;
    color: var(--color-frame-title);
	font-family: 'Hitopoly title';
    font-size: 22px;
    font-weight: bold;
}

/* ========== ========== ERROR FRAME ========== ========== */

#error-cover {
	width: 100%;
    height: 100%;
    position: absolute;
    background: #000000b5;
	display: flex;
    align-items: center;
    justify-content: center;
}

#error-block-bordered {
	width: 420px;
    background: #0d0e0e;
}

#error-block {
	margin: 4px;
    width: -webkit-fill-available;
    border: 1px solid #17212f;
	padding: 10px 20px;
}

#error-title {
	width: -webkit-fill-available;
    height: 20px;
    background: url('/res/img/icons/error.png') no-repeat;
    background-position: left center;
    padding: 6px 20px 14px 60px;
    color: var(--color-frame-title);
	font-family: 'Hitopoly title';
    font-size: 22px;
    font-weight: bold;
}

#error-message {
	color: var(--color-text);
	font-size: 18px;
	padding: 20px 10px;
	text-align: center;
}

#error-close {
	text-align: center;
}