@charset "UTF-8";
/* CSS Document */

:root{
	--ac0: #ffffff;
	--ac1: #445998;
	--ac2: #00a2db;
	--ac3: #3daa36;
	--ac4: #e30917;
	--ac5: #facd1d;
}

*{

	margin: 0px;
	padding: 0px;
	
	font-size: 0px;
	line-height: 0px;
	
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-weight: 300;
	letter-spacing: 1px;
	
	width:100%;
	height: 100%;
	overflow: hidden;
	
	z-index: 0;
	
	object-fit: contain;
	border-collapse: collapse;
	border: none;
	box-shadow: none;
	box-sizing: border-box;
	text-decoration: none;
	cursor: default;
	
		
	-webkit-user-drag: none!important;
	-khtml-user-drag: none!important;
	-moz-user-drag: none!important;
	-o-user-drag: none!important;
	user-drag: none!important;
}

*:not(input, textarea){
	
	-webkit-touch-callout: none!important;
	-webkit-user-select: none!important;
	-khtml-user-select: none!important;
	-moz-user-select: none!important;
	-ms-user-select: none!important;
	user-select: none!important;
}

body{
	width:100vw;
	height: 100vh;
	overflow: auto;
	background-color: rgb(25,25,25)
}

/* Screen */
#screen{
	width: var(--screenwidth);
	height: var(--screenheight);
	background-color: var(--ac1)
}

/* Header */

#header{
	width: var(--webappwidth);
	height: var(--headerheight);
	padding: var(--defaultspacing);
	margin: auto;
}

/* Topbar */
#topbar{
	width: var(--webappwidth);
	height: var(--topbarheight);
	background-color: var(--ac2);
	margin: auto;
	
	border-top-left-radius: var(--defaultspacing);
	border-top-right-radius: var(--defaultspacing);
}


#topbartitle{
	white-space: nowrap;
	width: var(--topbartitlewidth);
	padding: var(--defaultspacing);
	color: var(--ac0);
	margin: auto;
	text-align: center;
	
}

#topbarbackbutton{
	position: absolute;
	width: auto;
	height: var(--topbarheight);
	padding: var(--defaultspacing);
	border-top-left-radius: var(--defaultspacing);
}

#topbarbackbutton:hover{
	background-color: var(--ac3)
}

/* Web app */
#webapp{
	width: var(--webappwidth);
	height: var(--webappheight);
	background-color: var(--ac0);
	margin: auto;
	
	border-bottom-left-radius: var(--defaultspacing);
	border-bottom-right-radius: var(--defaultspacing);
	
}

/* Windows */
.window{
	width: var(--windowwidth);
	height: var(--windowheight);
	margin: var(--defaultspacing);
	
	display: none;
	justify-content: center;
	align-items: center;
}

.cwin{
	display: flex;
}

/* Elements */
p{
	font-size: var(--defaultfontsize);
	line-height: var(--defaultfontsize);
}
.button, .button *{
	cursor: pointer;
}

/* Input */

input{
	border: 1px solid lightgray
}

/* Default */
*::-webkit-input-placeholder{opacity: 0.8;}
.itemtext *::-webkit-input-placeholder{color: white}

/* FF 4-18 */
*:-moz-placeholder {opacity: 0.8;}
.itemtext *:-moz-placeholder {color: white}

/* FF 19+ */
*::-moz-placeholder {opacity: 0.8;}
.itemtext *::-moz-placeholder {color: white}

/* IE 10+ */
*:-ms-input-placeholder {opacity: 0.8;}
.itemtext *:-ms-input-placeholder {color: white}

/* Microsoft Edge */
*::-ms-input-placeholder {opacity: 0.8;}
.itemtext *::-ms-input-placeholder {color: white}

/* modern browser */
*::placeholder {opacity: 0.8;}
.itemtext *::placeholder {color: white}