@import url('https://fonts.googleapis.com/css2?family=REM:wght@300;500;600;900&display=swap');

body
{
	font-family: 'REM', sans-serif !important;
	font-size: 20px;
	/* background: url("IMG_8517.jpeg"); */
	/* background: url('vectorstock_50597415.svg'); */
	/* background: url('vectorstock_147569.svg'); */
	background: url('vectorstock_15323211.png');
	background-size: 100vw auto;
	margin: 0;
	background-attachment: fixed;
	background-position-y: 60%;
	font-weight: 300 !important;
	/* background-size: 160%; */
}

.mq-container
{
	background-color: #b4ffdbbb;
	border-radius: 16px;
	padding: 8px;
	backdrop-filter: blur(2px);
	margin-left: auto;
	margin-right: auto;
	max-width: 35rem;
	padding: 1rem 3rem 2rem 3rem;
	margin-top: 1rem;
	box-shadow: 6px 6px 18px rgba(23, 50, 22, 0.3);
}

.headercontainer
{
	background-color: #b4ffdbbb;
}


h1              { font-size: 2em; margin: .67em 0 }
h2              { font-size: 1.5em; margin: .75em 0 }
h3              { font-size: 1.17em; margin: .83em 0 }

h1
{
	font-weight: 900 !important;
	padding: initial !important;
	line-height: 1.2;
}

h2, h3
{
	font-weight: 600 !important;
}

.inputgroup
{
	margin: 11px;
	padding: 7px;
	border-radius: 5px;
	box-shadow: 2px 2px 6px rgba(0, 128, 0, 0.5);
	background: rgb(189,254,255);
	background: linear-gradient(104deg, rgba(189,254,255,1) 0%, rgba(204,255,199,1) 100%);
	max-width: 30em;
	display: flex;
}

.inputgroup-nobg
{
	background: none;
	box-shadow: none;
	display: block;
}

.signupgroup
{
	background-color: #f0fff2;
	box-shadow: 1px 1px 3px rgba(0, 0,0, 0.15);
}



.button
{
	background: rgb(0,164,166);
	background: linear-gradient(104deg, rgba(0,164,166,1) 0%, rgba(27,182,12,1) 100%);
	color: white;
	font-weight: 900;
	padding: 10px;
	border: none;
	border-radius: 20px;
	font-size: 24pt;
	box-shadow: 0 4px 0 rgb(2, 112, 113), 0 2px 3px rgb(0, 48, 0, 1), 0 5px 5px rgb(0, 48, 0, 1);
	text-shadow: 1.5px 1.5px 1.5px rgba(0, 64, 0, 0.2);
	display: inline-block;
	width: 100%;
	text-align: center;
	text-decoration: none;
	margin-bottom: 1rem;
}

.button-smaller
{
	font-size: 1.3rem;
	padding: 5px;
	border-radius: 8px;
}

.button:hover
{
	background: linear-gradient(104deg, rgb(14, 196, 199) 0%, rgb(42, 208, 27) 100%);
}

.button:active
{
	background: linear-gradient(104deg, rgb(54, 230, 233) 0%, rgb(73, 220, 60) 100%);
	box-shadow: 0 1px 0 rgb(2, 112, 113), 0 2px 0px rgb(0, 48, 0, 1), 0 5px 2px rgb(0, 48, 0, 1);
	margin-top: 3px;
	margin-bottom: calc(1rem - 3px);
}



label
{
	flex-basis: 30%;
	text-align: right;
	padding-right: 10px;
	font-weight: 500;
}

.norightalign label
{
	text-align: left !important;
}

input
{
	flex-basis: 70%;
	font-size: 14pt;
	font-weight: 300 !important;
}


.form-label
{
	padding: 0;
	margin: 0;
	font-size: 1.15rem;
}




/*
{
	max-width: 30em;
	display: block;
	text-align: center;
}
*/

.inputcluster
{
	max-width: 30em;
}


@media screen and (max-device-width: 600px)
{
	body
	{
		font-size: 0.9em;
	}
}




.document
{
	background: #e8fff4dd;
	background-color: white;
	padding: 1rem 3rem;
	margin-top: none;
	min-height: 100vh;
}


.main-container
{
	max-width: 60rem;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 6px 6px 18px rgba(24, 64, 23, 0.3);
	position: relative;
}

.container-smaller
{
	max-width: 45rem;
	margin-left: auto;
	margin-right: auto;
}


.header-top
{
	padding: 0.6rem 3rem;
	background: linear-gradient(45deg, #157b6d 0%, #0f7445 100%);
	color: white;
	font-size: 32px;
	font-weight: 600;
	text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
	margin-top: 0.5rem;
}



.header-bottom
{
	padding: 0.3rem 3rem;
	background: linear-gradient(45deg, #105f55 0%, #095134 100%);
	color: white;
	font-size: 18px;
	font-weight: 300;
	text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
}


.header-messages
{
	padding: 0.3rem 3rem;
	background: linear-gradient(45deg, #b9fff6 0%, #abffdd 100%);
	font-size: 18px;
	font-weight: 300;
	position: absolute;
	z-index: 1000;
	left: 0;
	right: 0;

	opacity: 0.0;
	animation-name: headerfade;
	animation-duration: 8s;
	animation-iteration-count: 1;
}

@keyframes headerfade
{
	0% { opacity: 0.0; }
	6% { opacity: 1.0; }
	93% { opacity: 1.0; }
	99% { opacity: 0.01; display: block; transform: translateY(0px); }
	100% { display: none; transform: translateY(-1000px); }
}


@keyframes attention
{
	0% { text-shadow: 0 0 0 white, 0 0 0 white, 0 0 0 white; }
	25% { text-shadow: 0 0 5px white, 0 0 5px white, 0 0 5px white; }
	50% { text-shadow: 0 0 0 white, 0 0 0 white, 0 0 0 white; }
	75% { text-shadow: 0 0 5px white, 0 0 5px white, 0 0 5px white; }
	100% { text-shadow: 0 0 0 white, 0 0 0 white, 0 0 0 white; }
}

.header-message-danger
{
	color: white;
	background: linear-gradient(45deg, #f04343 0%, #c41d1a 100%);
}



.header-message-danger a
{
	color: white !important;
}

.header-message-success
{
	background: linear-gradient(45deg, #b9ffc0 0%, #bafe98 100%);
}


.header-admin
{
	padding: 0.3rem 3rem;
	background: linear-gradient(45deg, #104e5f 0%, #094d51 100%);
	/* background: linear-gradient(45deg, #1c4e7d 0%, #104d75 100%); */
	color: white;
	font-size: 18px;
	font-weight: 300;
	text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
	/* border: 3px solid #9dd0ff; */
}

.header-bottom a, .header-admin a
{
	color: white;
	text-decoration: none;
	margin-right: 16px;
}

.header-top a
{
	color: white;
	text-decoration: none;
}



@media only screen and (max-width: 600px)
{
	body
	{
		background-size: auto 100vh;
		font-size: 18px;
	}

}

b
{
	font-weight: 600;
}



table
{
	border: 1px solid rgb(178, 209, 169);
	border-collapse: collapse;
	background-color: white;
	font-weight: 300;
	margin-top: 1rem;
	margin-bottom: 1rem;
	box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.15);
	width: 100%;
}

thead
{
	padding: 1rem;
	background: linear-gradient(45deg, #105f55 0%, #095134 100%);
	color: white;
	font-size: 18px;
	font-weight: 300;
	text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
}

th
{
	font-weight: 600;
	border: 1px solid #218275;
}

td
{
	border: 1px solid rgb(178, 209, 169);
}

th, td
{
	padding: 8px 12px;
}

.qr
{
	width: 160px;
	height: 160px;
	box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
}

.servertype
{
	color: #ff9090;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);

	animation-name: servertype;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

@keyframes servertype
{
	0%
	{
		color: #ff9090;
	}
	50%
	{
		color: #fcf7b9;
	}
	0%
	{
		color: #ff9090;
	}
}

.bucket-login
{
	margin-left: auto;
	margin-right: auto;
	max-width: 35rem;
	margin-top: 8px;
	text-align: right;	
}

.bucket-login a
{
	color: green;
	font-size: 1rem;
}

.readonly
{
	background-color: rgb(214, 214, 214);
	color: gray;
}

.loggedinas
{
	font-size: 12px;
	font-style: italic;
}

.thin
{
	font-weight: 200;
}

.menuhl
{
	text-shadow: 2px 2px 4px #efff9578;
	font-weight: 500;
}

.finished
{
	background-color: rgb(202, 202, 202);
}

.errors
{
	background: linear-gradient(45deg, #f04343 0%, #c41d1a 100%);
	color: white;
	font-size: .9rem;
	padding: 4px;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	font-weight: 500;
	line-height: 1.1;
}

.errors li
{
	list-style-type: none;
	margin-left: 0;
	padding-left: 4;
}


.login-message
{
	background: linear-gradient(45deg, #44c63d 0%, #2ea963 100%);
	color: white;
	font-size: 1.1rem;
	padding: 4px;
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 8px;
	font-weight: 500;
	line-height: 1.1;
	box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.15);
}

.login-message-danger
{
	background-color: white;
	background: linear-gradient(45deg, #f04343 0%, #c41d1a 100%);
}



.textarea-undo-bootstrap
{
	font-family: "REM" !important;
	font-size: 1rem !important;
}