/* tForge for P&G 24.04.2022*/

:root {
	--tF-gray: #C6C6C6;
	--tF-darkGray:#595959;
	--tF-blue: #00468C;
	--tF-orange: #FF6A00;
	--tF-red: #cc0000;
	--kb-txt: #373737;
	--kb-orange: #e85312;
	--kb-blue: #003374;
}

/* normalize behaviour */
* {box-sizing: border-box; outline: none; text-decoration: none; margin: 0px; padding: 0px;}
*:focus {outline: none; text-decoration: none;}

html, body {
	position: relative;
	width: 100%;
	height: 100%;
	border: none;
	user-select: none;
}
input, select, textarea, button{font-family:inherit;}


@font-face {
	font-family: 'OpenSans';
	font-style: normal;
	font-weight: 400;
	src: local(''),
		 url('/fonts/OpenSans-Regular.woff2') format('woff2');
}
  @font-face {
	font-family: 'OpenSans';
	font-style: italic;
	font-weight: 400;
	src: local(''),
		 url('/fonts/OpenSans-Italic.woff2') format('woff2');
}
@font-face {
	font-family: 'OpenSans';
	font-style: normal;
	font-weight: 300;
	src: local(''),
		 url('/fonts/OpenSans-Light.woff2') format('woff2');
}
@font-face {
	font-family: 'OpenSans';
	font-style: normal;
	font-weight: 500;
	src: local(''),
		 url('/fonts/OpenSans-Medium.woff2') format('woff2');
}

/* ==================== Application specific ==================== */


body{
	text-align: center;
	margin: auto;
	background-color: white;
	color: var(--kb-txt);
	font-family: "OpenSans", Arial, sans-serif;
	font-weight: 400;
	font-size: 13px; /*basis for all `em`*/

}

/* Responsive design */
@media only screen and (min-width: 380px){
	body{
		font-size: 14px;
	}
}
@media only screen and (min-width: 410px){
	body{
		font-size: 16px;
	}
}


h1 {
	margin-top: 3em;
	margin-bottom: 1.5em;
	color: var(--kb-orange);
	font-size: 2em;
	font-weight: 500;
	width: 100%;
	border-bottom: 1px solid var(--kb-orange);
}

h2 {
	margin-top: 2em;
	margin-bottom: 1em;
	color: var(--kb-txt);
	font-size: 1.5em;
	font-weight: 500;
}

h3 {
	margin-top: 1em;
	margin-bottom: 0.5em;
	color: var(--kb-txt);
	font-size: 1.2em;
	font-style: italic;
	font-weight: 400;
}

p{
	margin-bottom: 0.75em;
	font-weight: 300;
}


/* Buttons */

.btn{
	text-align: center;
	font-size: 1em;
	border: 1px solid var(--kb-orange);
	background-color: white;
	color: var(--kb-orange);
	padding: 0.6em 1em 0.5em 1em;
	min-height: 2.5em;
	user-select: none;
}
.btn:hover {
	color: white;
	background-color: var(--kb-orange);
	transition: 500ms;
}
.btn:not(:last-child) {
	margin-right: 0.5em;
}
.btn.gray {
	background-color: var(--kb-txt);
	color: white;
	border: none;
	transition: 500ms;
}
.btn.orange {
	background-color: var(--kb-orange);
	color: white;
}


/* Container for items shown on desk */

.page {
	width: 100%;
	margin: auto;
	max-width: 800px;
	padding: 2em;
	padding-top: 6em;
	text-align: left;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	overflow-y: auto;
}

ul {
	list-style-position: outside;
	margin-left: 20px;
}
li {
	list-style-image: url(/img/kb-arrow.svg);
	margin-bottom: 0.5em;
}

img {
	object-fit: contain;
}


/* User Input, Forms ...*/

input, label {
	display:block;
}

.box-input{
	display: block;
	min-width: 200px;
	margin-bottom: 2em;
}
.box-input:not(last){
	margin-right: 2em;
}
.box-input label{
	color: var(--kb-txt);
	position: relative;
	font-size: 0.8em;
}
.box-input input{
	margin-top: 0.4em;
	padding: 0.5em;
	font-size: 1em;
	width: 100%;
	border: 1px solid #aaa;
	background-color: white;
}
.box-input input:focus{
	border: 2px solid #444;
	box-shadow: 0px 1px 5px 4px rgba(0,0,0,0.10);
}
.box-input input.invalid{
	border: 1px solid #c00;
	box-shadow: 0px 1px 5px 4px rgba(180,0,0,0.10);
}
.box-input textarea {
	margin-top: 0.4em;
	padding: 0.5em;
	font-size: 1em;
	width: 100%;
	border: none;
	background-color: white;
	border-bottom: 1px solid var(--PG-blue);
	resize: none;
}
.val-info{
	display: none;
	color: #c00;
	position: relative;
	font-size: 0.8em;
}
.val-info.invalid{
	display: block;
}

a {
	color: var(--kb-orange);
	text-decoration: underline;
}