/* ID:33998 */
@charset "utf-8";

article {
	margin-top: 0px;
	margin-bottom:0px;
}

table.login{
	padding:2ex 0;
}

main#content {
	div{
		&.preLogin,
		&.pastLogin{
			margin-left:5em;
			margin-right:5em;
		}
	}
}
form#loginForm{
	display:none;
}

div#settings{
	background-color: var(--mainbg);
	color: var(--mainfontColor);
	height:30em;
	overflow:hidden;
	width:50em;
	max-width: 100%;
	&::backdrop{
		background: rgba(0,0,0,0.6);
		backdrop-filter: blur(3px);
		overscroll-behavior: contain;
	}
	h1{
		background-color: var(--mainBarColor);
		color:var(--mainBarFontColor);
		margin:0;
		text-align: center;
	}
	div.flexRow{
		margin-top:1rem;
	}
	div.font,
	div.mode{
		border:2px solid grey;
		border-radius: 5px;
		height:5rex;
		width:6rem;
		text-align: center;
    margin: 4px 1rem;
		padding: 0.2rem 0;
		display: grid;
    place-items: center;
		&.selected{
			border-color:blue;
		}
	}
	.desc{
		width:8em;
		vertical-align: middle;
	}
	div.font{
		&.fontSizeSmaller {
			font-size: var(--fontSizeSmaller);
		}
		&.fontSizeSmall {
			font-size: var(--fontSizeSmall);
		}
		&.fontSizeDefault{
			font-size: var(--fontSizeDefault);
		}
		&.fontSizeBig{
			font-size: var(--fontSizeBig);
		}
		&.fontSizeBigger{
			font-size: var(--fontSizeBigger);
		}

	}
	div.mode{
		background-color: var(--mainbg);
		color: var(--mainfontColor);
		&.modeLight{
			color-scheme:light;
		}
		&.modeDark{
			color-scheme:dark;
		}
		&.modeAuto{
			color-scheme:light dark;
		}
	}
	div.stickBottom{
		padding:5px;
		position: absolute;
		bottom: 0;
	}
}

table.login{
	margin-left:auto;
	margin-right: auto;

	#showMultiInput {
		display:none;
		label{
			color: lightgrey;
		}
		input[type=radio]:checked + label {
			color: inherit !important;
		}
		td{
			text-align: center;
			vertical-align: middle;
		}
		input{
			display: none;
		}
	}

	tr{
		td{
			position: relative;
			padding: 1.1em 0.3ex;
			&.newPassword{
				font-size:.8em;
				padding-top:4ex;
				text-align:center;
			}
			&.loginButton{
				text-align: center;
			}
			input:invalid{
				border-color: lightgrey;
			}
			button{
				width:100%;
			}
			i.showPwd{
				left:unset;
				right: 0;
			}

		}
		&.OIDC{
			td{
				border-top:1px solid darkgray;
				margin-top: 4ex;
				button{
					background-color: red;
				}
			}
		}
	}
}

div.running{
	border:none;
	color:black;
	display:none;
	margin-left:auto;
	margin-right: auto;
	padding:2ex;
	width:15em;
}

/* installprompt*/
#installPrompt{
	background: var(--mainbg);
	box-shadow: 0px 0px 2px black;
	bottom: 0;
	display: grid;
	grid-template-columns: 4.5em 1fr;
	grid-gap: 1em;
	left:0;
	height: 7em;
	padding-top: 1ex;
	position: fixed;
	right: 0;
	z-index: 9999;
	div{
		box-sizing: border-box;
		padding-top: 1ex;
		position: relative;
		span{
			font-size: 90%;
			&.caption{
				font-size: 100%;
			}
		}
		.closebutton{
			float: right;
			font-size: 130%;
			text-align: center;
			width: 4ex;
		}
		button{
			position: absolute;
			bottom: 0;
			right: 0;
		}
	}
	&> img{
		height: auto;
		width: 100%;
	}
}
html.darkMode{
	#installPrompt img{
		filter: invert(0.3);

	}
}

#rememberMe{
	display: none;
}
@media (display-mode: standalone){
	#rememberMe{
		display: initial;
	}
}