/* tForge for P&G 24.04.2022*/

:root {
	--tF-gray: #C6C6C6;
	--tF-darkGray:#595959;
	--tF-blue: #00468C;
	--tF-orange: #FF6A00;
	--tF-red: #cc0000;
	--bg-gray: #eee;
	--txt-gray: #333;
}

/* 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; dont use this as it shifts the body down by some pixel*/
	width: 100%;
	height: 100%;
	border: none;
	user-select: none;
	padding: 0px;
	margin: 0px;
}
input, select, textarea, button{font-family:inherit;}

.hide {
	visibility: hidden;
}

/* quicksand-300 - latin-ext_latin */
@font-face {
	font-family: 'Quicksand';
	font-style: normal;
	font-weight: 300;
	src: local(''),
		 url('/fonts/quicksand-v30-latin-ext_latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
		 url('/fonts/quicksand-v30-latin-ext_latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

  /* quicksand-regular - 400 - latin-ext_latin */
  @font-face {
	font-family: 'Quicksand';
	font-style: normal;
	font-weight: 400;
	src: local(''),
		 url('/fonts/quicksand-v30-latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
		 url('/fonts/quicksand-v30-latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

  /* quicksand-500 - latin-ext_latin */
  @font-face {
	font-family: 'Quicksand';
	font-style: normal;
	font-weight: 500;
	src: local(''),
		 url('/fonts/quicksand-v30-latin-ext_latin-500.woff2') format('woff2'),
		 url('/fonts/quicksand-v30-latin-ext_latin-500.woff') format('woff');
  }

  /* Font weights 600 and 700 deactivated for performance reasons
  		REMEMBER to ADD TO SERVICE-WORKER.js as files to be cached! */

  /* quicksand-600 - latin-ext_latin */
  /* @font-face {
	font-family: 'Quicksand';
	font-style: normal;
	font-weight: 600;
	src: local(''),
		 url('/fonts/quicksand-v30-latin-ext_latin-600.woff2') format('woff2'),
		 url('/fonts/quicksand-v30-latin-ext_latin-600.woff') format('woff');
  } */

  /* quicksand-700 - latin-ext_latin */
  /* @font-face {
	font-family: 'Quicksand';
	font-style: normal;
	font-weight: 700;
	src: local(''),
		 url('/fonts/quicksand-v30-latin-ext_latin-700.woff2') format('woff2'),
		 url('/fonts/quicksand-v30-latin-ext_latin-700.woff') format('woff');
  } */




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


body{
	text-align: center;
	margin: auto;
	background-color: var(--bg-gray);
	color: var(--txt-gray);
	font-family: 'Quicksand', Verdana, Geneva, Tahoma, sans-serif;
	font-weight: 300;
	font-size: 15px; /*basis for all `em`*/

}

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


h1 {
	color: var(--tF-blue);
	font-size: 2em;
	font-weight: 500;
}

h2 {
	color: var(--tF-blue);
	font-size: 1.5em;
	font-weight: 400;
}

h3 {
	color: var(--tF-darkGray);
	font-size: 1.2em;
	font-weight: 400;
	margin: 0.5em 0em 0.3em 0em;
}

/* Table layout */

table {
	/* table-layout: fixed; */
	margin-top: 0.5em;
	margin-bottom: 1em;
	width:100%;
	border-collapse: collapse;
	background-color: white;
	text-align: left;
	font-family: Montserrat, Helvetica, Verdana, Geneva, Tahoma, sans-serif;
	border-bottom: 1px solid var(--tF-gray);
}

th, td {
	padding:8px;
	user-select: all;
}
th {
	background-color: var(--tF-gray);
}
tr:nth-child(odd) {
	background-color: #EEE;
}

.cell-images {
	min-width: 100px;
	display: flex;
	flex-direction: row;
	overflow-x: auto;
	overflow-y: hidden;
}
td img {
	padding: 0.2em;
	height: 7em;
}

.cell-btn-small {
	padding: 0.2em;
	width: 1.4em;
	user-select: none;
}

/* Buttons */

.btn{
	text-align: center;
	font-size: 1em;
	font-weight: 400;
	border-radius: 3px;
	border: 1px solid var(--tF-blue);
	background-color: white;
	color: var(--tF-blue);
	padding: 0.6em 1em 0.5em 1em;
	min-height: 2.5em;
	user-select: none;
	box-shadow: 0px 1px 8px 5px rgba(0,0,0,0.04);
}
.btn:not(:last-child) {
	margin-right: 0.5em;
}
.btn:hover {
	color: white;
	background-color: var(--tF-blue);
	transition: 500ms;
}
.btn.gray {
	background-color: var(--txt-gray);
	color: white;
	border: none;
	transition: 500ms;
}
.btn.gray:hover {
	background-color: #222;
	transition: 500ms;
}
.btn.blue {
	background-color: var(--tF-blue);
	color: white;
}


/* Container for items shown on desk */

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


/* Common modal layout */

.modal {
	position: fixed;
	right: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(211, 214, 218, 0.80);
	backdrop-filter: blur(5px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2000;
}

.modal-backBtn{
	color: var(--tF-blue);
	position: absolute;
	top: 4%;
	left: 5%;
}

.modal-frame {
	display: flex;
	width: 90%;
	height: 80%;
	flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: stretch;
    overflow-x: hidden;
    overflow-y: auto;
	background-color: var(--bg-gray);
	border: solid 1px var(--tF-blue);
	border-radius: 8px 8px 8px 8px;
}

/* Input fields */

input, label {
	display: block;
	text-align: left;
}

.flex-row{
	margin-top: 1em;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
}

.box-input{
	display: block;
	width: 30%;
	min-width: 200px;
}
.box-input:not(:last-child){
	margin-right: 2em;
}
td.box-input{
	width: 100%;
}
.box-input label{
	color: var(--tF-blue);
	position: relative;
	font-size: 0.8em;
}
.box-input input{
	margin-top: 0.4em;
	padding: 0.5em;
	font-size: 1em;
	width: 100%;
	border: none;
	background-color: white;
	border-bottom: 1px solid var(--tF-blue);
}

.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(--tF-blue);
	resize: none;
}