/* PCP 0.6.2 */

@font-face {
	font-family: Montserrat;
	src: url('fonts/Montserrat-VariableFont_wght.ttf');
}

* {
	box-sizing: border-box;
}

body{
/*	font-family: sans-serif;*/
	font-family: Montserrat;
	padding: 0;
	margin: 0;
	font-size: 10px;
}

/* Login */

.loginbody{
	display: flex;
	flex-direction: row;
	justify-content: center;
	width:100%;
	height:100%;
	align-content: center;
	position: absolute;
}

.logincarrier {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width:500px;
	align-content: center;
	gap: 30px;
	 
}

.loginwrapper {
	background-color: #1e2833;
	width: 500px;
	padding: 30px;
	border-radius: 6px;
	color: #fff;
	box-shadow: black 0px 0px 20px;
	display: flex;
	flex-direction: column; 
}

.loginwrapper.confirmed {
	background-color: green;
	font-size: 2.5rem;
}

.loginwrapper.caution {
	background-color: orange;
	font-size: 2.5rem;
}

.resendconf {
	text-decoration: underline;
}

.resendconf:hover {
	text-decoration: underline;
	color: #cccccc;
	cursor: pointer;
}

.loginwrapper #errorlogin{
	padding-top: 20px;
	display: none;
	transition: 0.5s;
	width: 100%;
	text-align: center;
	font-size: 1rem;
}

formhead {
	order: 1;
	color: inherit;
	font-size: 3rem;
	text-align: center;
	padding: 20px 0 20px 0;
}

.loginwrapper .textbutton {
	order: 3;
	color: inherit;
	font-size: 1.1rem;
	text-align: center;
	padding: 20px 0 20px 0; 
}

.loginwrapper .textbutton a {
	color: inherit;
}

.loginwrapper .textbutton a:hover {
	text-decoration: underline;
	text-underline-position: under;
}

formarea {
	order: 2;
	color: inherit;
}

.form-control {
	background:none;
	border:none;
	border-bottom:1px solid #434a52;
	border-radius:0;
	box-shadow:none;
	outline:none;
	color:inherit;
	width: 100%;
	padding: 30px 10px 10px 10px;
	font-size: 1.2rem;

}

.btn-primary{
	border:none;
	border-radius:4px;
	padding:11px 11px 11px 11px;
	margin-top: 20px;
	box-shadow:none;
	text-shadow:none;
	outline:none;
	background-color: #214a80;
	width: 100%;
	color: inherit;
	font-size: 1.4rem;
}

.btn-primary:hover {
	background-color: #4e73a4;
	cursor: pointer;
}

/* carrier */
.carrier{
	display: flex;

	position: absolute;
	width:100%;
	height:100%;
}

/* left menu */

.menu-area {
	flex:1;
	background-color: white;
	border-right:1px darkgray solid;

	height:100%;

	display: flex;
	flex-direction: column;


	/*float:left;
	position: absolute;
*/
}

.menu-area div{
	padding:.3rem 1rem;
	word-break: keep-all;
	width: max-content;
}

.menu-head{
	flex-grow: 1;

	font-size: 3rem;
	text-align: center;
}

.menu-items{
	flex-grow: 1000;
	font-size: 1.2rem;
	padding:0 !important;
}

.menu-items ul{
	padding:0;
	margin:0;
}

.menu-items ul li{
	list-style: none;
	padding:.4rem 1rem;

}

.menu-items ul li:hover{
	background-color: #1e2833;
	color:white;
	cursor: pointer;
}

.menu-items ul li.cur{
	background-color: #1e2833;
	color:white;
}

.menu-items ul li.inactive{
	color: grey;
}

.menu-items ul li.inactive:hover{
	background-color: white;
	cursor: not-allowed;
}


.menu-foot{
	flex-grow: 1;
	font-size: 1rem;
	text-align: center;

	border-top: 1px darkgray solid;
	width: 100% !important;
}



/* content */

.content{
	flex:10;
	overflow: scroll;
	font-size: 1rem;
	padding: 1.5rem;
}

.col{
	display: flex;
	flex-direction: column;
	gap:1rem;
}

.col1{
	display: flex;
	flex-direction: column;
	gap:0rem;	
}

.row{
	display: flex;
	flex-direction: row;
	gap:1rem;
	flex-wrap: wrap;
	margin: 1rem 2rem;
}

.row_error{
	display: none;
	flex-direction: row;
	gap:0rem;
	flex-wrap: wrap;
	background-color: bisque;
	padding: 0.2rem 0.3rem;
}

.row1{
	display: flex;
	flex-direction: row;
	gap:0rem;
	flex-wrap: wrap;
}

.row2{
	display: flex;
	flex-direction: row;
	gap:2rem;
	flex-wrap: wrap;
}

.grow100{
	flex-grow: 100;
}

.row-even{
	justify-content: space-evenly;
}

.item{
	border:1px solid grey;
	border-left:5px solid grey;
}

.alt1{
	padding: 1rem 5rem;
	border-radius: 5px;
}

.item:hover{
	border-color:#1e2833;
}

.hdiv{
	border:1px solid lightgrey;
	margin:0 12rem 0 12rem;
}

.headline{
	border:none;
	font-size: 1.5rem;
}

.emptylistmarking{
	border: none;
	color:grey;
	text-align: center;
}

.large-center{
	font-size: 3rem;
	font-weight: 600;
	text-align: center;
}

.icon {
	font-size: 1.5rem;
}

.description{
	font-size: .7rem;
	color:grey;
}

.locontent{
	font-size: 1.2rem;
}

.buttons{
	display: flex;
	flex-direction: column;
	row-gap: 0.5rem;
}

button, buttontag{
	padding: .5em 2em .5em 2em;
	font-size: 1.2rem;
	color: white;
	background-color: #1e2833;
	border: none;
	border-radius: 5px;
}

.graybutton{
	background-color: #dbdbdb;
}

.bluebutton{
	background-color: #1e2833;
}

.bluebutton:hover{
	background-color: #4e73a4;
}

.redbutton{
	background-color: #802125;
}

.redbutton:hover{
	background-color: #7b4043;
}

.loading{
	background-color: grey;
	color: black;
	display:inline-block;
	-webkit-mask:linear-gradient(-60deg,#000 30%,#0005,#000 70%) right/300% 100%;
	background-repeat: no-repeat;
	animation: shimmer 2s infinite;
}

@keyframes shimmer {
	100% {-webkit-mask-position:left}
}

.loadingok{
	background-color: green !important;
}

#flag.current{
	background-color: #35a335;
	color: black;
	display:inline-block;
}

#flag.future{
	background-color: orange;
	color: black;
	display:inline-block;
}

#flag.old{
	background-color: grey;
	color: black;
	display:inline-block;
}

.emptyfielderror {
	font-style: italic;
	color: red;
}

.inputset{
	display: flex;
	flex-direction: column;
	gap:0px;
}

.inputset input,
.inputset select {
	padding:.7rem;
	font-size: 1rem;
	background-color: white;
	border:solid 1px grey;
	border-radius: 3px;
}

.inputset input.error,
.inputset select.error {
	border: 1px solid #e87272;
	background-color: bisque;
}

.json pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
.json .string { color: green; }
.json .number { color: darkorange; }
.json .boolean { color: blue; }
.json .null { color: magenta; }
.json .key { color: red; }