/*
   CSS styling examples for the Vaadin app.
   Visit https://vaadin.com/docs/flow/theme/theming-overview.html and
   https://vaadin.com/themes/lumo for more information.
*/

html {
	--lumo-primary-text-color: rgb(21, 91, 152);
    --lumo-primary-color-50pct: rgba(21, 91, 152, 0.5);
    --lumo-primary-color-10pct: rgba(21, 91, 152, 0.1);
    --lumo-primary-color: #155B98;
    --lumo-secondary-color: #DC2B38;
    
    --lumo-base-light: #f3f5f7;
    
    --app-bar-height: 60px;
    --app-bar-height-s: 122px;
  	--app-bar-wrapper-color:#2F4858;
  	--login-background: url('images/bgee.svg');
}

.tox .tox-statusbar {
	display: none;
}


/* Example: CSS class name to center align the content . */

.centered-content {
  margin: 0 auto;
  max-width: 250px;
}


.nav-tab vaadin-icon {
	width:35px;
	height: 35px;
	color: hsla(0, 100%, 100%, 0.5);
}

.nav-tab:hover vaadin-icon {
	color: hsla(0, 100%, 100%, 1);
}

.spacing {
	width: var(--lumo-space-xs);
	flex: 0 0 auto;	
}

.inline-fl2 > * {
	flex: 1 0 48%;
}


.noselect {
	-webkit-touch-callout: none; 
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none; 
	-ms-user-select: none; 
   	user-select: none; 
}
@media (max-width: 576px) {
	html,body, #outlet {
		height: -moz-available;          /* WebKit-based browsers will ignore this. */
		height: fill-available;
		height: -webkit-fill-available;
	}
}
.v-status-message {
	display: none;
}

.v-loading-indicator {
	position: fixed; /* Occupy whole screen even if scrolled */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/* Eat mouse events when visible, doesn't prevent scrolling */
	pointer-events: none;
	/* Animated with delay to prevent flashing */
	z-index: 2147483647;
}

.v-loading-indicator.second, .v-loading-indicator.third {
	animation: fadein 0.3s ease-out 0.2s normal 1 both;
}


.v-loading-indicator.third:before {
	color: var(--lumo-primary-color-50pct);
	font-size: 90px;
	text-indent: -9999em;
	overflow: hidden;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -1em;
	content: '';
	-webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
	animation: load6 1.7s infinite ease, round 1.7s infinite ease;
}
@keyframes fadein {
	0% {
		background: rgba(0,0,0,0);
	}
	100% {
		background: rgba(0,0,0,.2); /* Darkens the UI */
	}
}

@-webkit-keyframes load6 {
	0% {
		box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
	}
	5%,
	95% {
		box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
	}
	10%,
	59% {
		box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
	}
	20% {
		box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
	}
	38% {
		box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
	}
	100% {
		box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
	}
}
@keyframes load6 {
	0% {
		box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
	}
	5%,
	95% {
		box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
	}
	10%,
	59% {
		box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
	}
	20% {
		box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
	}
	38% {
		box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
	}
	100% {
		box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
	}
}
@-webkit-keyframes round {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes round {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}