/* Background by https://www.toptal.com/designers/subtlepatterns/ under CC license */
* 
{
	box-sizing: border-box;
}

html
{
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	overflow-behaviour: none;
}

body
{	
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: Arial;
	font-size: 16px;
	color: black;
	background-image: url("../images/45degree-fabric.png"), url("../images/white-wall-hash.png");
	background-repeat: repeat;
	overflow: auto;
	overflow-behaviour: scroll;
}

.hidden
{
	display: none !important;
}

/* LDS-Roller by loading.io under CC0 license */
.lds-roller
{	display: inline-block;
	position: relative;
	width: 5em;
	height: 5em;
	color: white;
}
.lds-roller.centered
{
	display: block;
	margin: auto;
}
.lds-roller div
{	animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
	transform-origin: 2.5em 2.5em;
}
.lds-roller div:after
{	content: " ";
	display: block;
	position: absolute;
	width: 0.4375em;
	height: 0.4375em;
	border-radius: 50%;
	background: #fff;
	margin: -0.25em 0 0 -0.25em;
}
.lds-roller div:nth-child(1)
{	animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after
{	top: 3.9375em;
	left: 3.9375em;
}
.lds-roller div:nth-child(2)
{	animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after
{	top: 4.25em;
	left: 3.5em;
}
.lds-roller div:nth-child(3)
{	animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after
{	top: 4.4375em;
	left: 3em;
}
.lds-roller div:nth-child(4)
{	animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after
{	top: 4.5em;
	left: 2.5em;
}
.lds-roller div:nth-child(5)
{	animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after
{	top: 4.4375em;
	left: 2em;
}
.lds-roller div:nth-child(6)
{	animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after
{	top: 4.25em;
	left: 1.5em;
}
.lds-roller div:nth-child(7)
{	animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after
{	top: 3.9375em;
	left: 1.0625em;
}
.lds-roller div:nth-child(8)
{	animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after
{	top: 3.5em;
	left: 0.75em;
}
@keyframes lds-roller
{	0% 
	{	transform: rotate(0deg);
	}
  	100% 
	{	transform: rotate(360deg);
	}
}

.glass-box 
{
	background-color: rgba(255, 255, 255, 0.3);
	color: white;
	border: 0;
	padding: 2.5em;
	border-radius: 0.5em;
	box-shadow: 0 0 0.5em #000;
	position: absolute;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}
.glass-box.error
{
	background-color: rgba(255, 0, 0, 0.4);
}
.glass-box .inputline
{
	width: 100%;
	display: flex;
	margin-bottom: 1em;
	border: none;
	padding: 0.5em;
	border-radius: 0.33em;
	background-color: white;
}
.glass-box .inputline span
{
	display: flex;
	justify-content: center;
    align-items: center;
    color: black;
}
.glass-box .inputline input 
{
	border: none;
	width: 100%;
	font-size: 1.125em;
	outline: none;
	padding-left: 0.5em;
}

#modal
{
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.5);
	align-items: center;
	justify-content: center;
	z-index: 1000;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}
#modal-content
{
	overscroll-behavior: contain !important;
}
#modal-status
{
	/* width: 32em; */
}
#modal-status-text
{
	font-size: 1.125em;
	text-align: center;
	color: white;
}

#modal-error
{
	width: 32em;
}
#modal-error-text
{
	font-size: 1.125em;
	text-align: center;
	color: white;
}
#modal-error-button
{	
	display: block;
	background-color: #eb4034;
	color: #fff;
	border: none;
	border-radius: 0.33em;
	cursor: pointer;
	font-size: 1.125em;
	text-align: center;
	margin: 0 auto;
	margin-top: 1em;
	padding: 0.625em 2em;
	transition: background-color 0.5s;
}
#modal-error-button:hover
{
	background-color: #db190b;
}

#login-page
{
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image: url("../images/login-background-landscape.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}
@media all and (orientation: portrait)
{   #login-page
    {   background-image: url("../images/login-background-portrait.jpg");
    }
}
@media all and (orientation: landscape)
{   #login-page
    {   background-image: url("../images/login-background-landscape.jpg");
    }
}

#login-container
{
	width: 32em;

}
#login-container img
{
	width: 100%;
	margin-bottom: 2em;
}
#login-header-text 
{
	font-size: 2em;
	font-weight: 600;
	padding-bottom: 0.75em;
	text-align: center;
}
#login-error-text
{
	margin-bottom: 1em;
	padding: 1em;
	border: none;
	background-color: rgba(255, 0, 0, 0.5);
	border-radius: 10px;
	font-size: 1.125em;
	text-align: center;
}
#login-button
{
	background-color: #0398fc;
	color: #fff;
	border: none;
	border-radius: 0.33em;
	cursor: pointer;
	width: 100%;
	font-size: 1.125em;
	margin-top: 1em;
	padding: 0.625em;
	transition: background-color 0.5s;
}
#login-button:hover
{
	background-color: #0362fc;
}
#login-status-text
{
	margin-top: 1em;
	font-size: 1.125em;
	text-align: center;
}

#start-page
{
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	display: table;
	align-items: center;
	justify-content: center;
	overflow: auto;
	overscroll-behavior: contain;
}
#start-page #content-container
{
	display: table-cell !important;
	vertical-align: middle;
	text-align:center

}
#property-list 
{
	list-style-type: none;
	margin: 0 auto;
	padding: 0;
	width: 32em;
}
#property-list li
{	
	display: block;
	background-color: #0398fc;
	color: #fff;
	border: none;
	border-radius: 0.33em;
	cursor: pointer;
	width: 100%;
	font-size: 1.125em;
	text-align: center;
	margin-bottom: 1em;
	padding: 0.625em;
	transition: background-color 0.5s;
}
#property-list li:first-child
{
	margin-top: 1em;
}
#property-list li:hover
{
	background-color: #0362fc;
}