@import "reset";

.webremote-portal
	background: white;
	position: relative;

	.loading 
		p
			text-align: center;

.webremote-portal-inner

	font-size: 16px;

	h1 
		text-align: center;
		font-size: 200%;
		font-weight: bold;

	p 
		margin-top: 0.6em;

	.control-label,
	.url, 
	.token
		font-family: monospace;
		font-weight: bold;
		display: inline-block;
		border: 1px solid gray;
		padding: 2px 5px;
		border-radius: 5px;
		background: #ddd;
		margin-right: 3px;
		margin-left: 3px;
		font-size: 120%;

		&.keyboard
			border: 1px solid orange;
			background: #FFFF4D;
			border-radius: 2px;

		&.mobile
			border-radius: 10px;

	.errors
		color: red;

	div.connected-users
		float: right;
		width: 50%;

	div.active-users
		float: right;
		width: 50%;

	.connection-information
		clear: both;
		margin-bottom: 15px;

	.connected-users
	.active-users 
		margin-bottom: 15px;

	.connection-information .url,
	.connection-information .token
		font-family: monospace;
		font-weight: bold;

	.countdown-background 
		position: absolute;
		width: 100%;
		height: 100%;
		background: white;
		z-index: 5;
		opacity: 0.7;
		top: 0;
		left: 0;

	.countdown
		position: absolute;
		margin: 0;
		padding: 0;
		z-index: 1;
		font-size: 200%;
		z-index: 10;
		width: 100%;
		top: 50%;
		margin-top: -2em;

		p
			margin-top: 0;
			text-align: center;

	ul 
		li 
			margin-top: 0.5em;

	.errors 

		position: absolute;
		bottom: 0px;
		width: 100%;

		p 
			color: red;
			border: 1px solid red;
			padding: 15px;
			margin: 15px;
			background-color: #FFBABA;

	li.empty 
		color: gray;

	.accounts-overlay
		position: absolute;
		background: black;
		opacity: 0.5;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

	.accounts
		position: absolute;
		left: 50%;
		top: 50%;
		width: 400px;
		height: 300px;
		background: white;
		margin-top: -150px;
		margin-left: -201px;
		z-index: 1;
		border: 2px solid black;

	.available-accounts

		li.selected
			background: yellow;

		li.unselected
			background: gray;

		li.unavailable
			color: gray;