html {
	height:100%;
}

body {
	background: Window;
	color: WindowText;
	height:100%;
	display:flex;
	flex-direction:column;
}

.shortcut {
	cursor:pointer;
}


.ges-height-100 {
	height:calc( 100% - 100px );
}

.ges-height-50 {
	height:calc( 100% - 50px );
}

.ges-100 {
	height:100%;
}

.ges-overflow {
	overflow-y:auto;
	height:100%;
}

.ges-pointer {
	cursor:pointer;
}

.ges-circle {
	height: 64px;
	width: 64px;
	font-size: 24px;
	padding: 0;
	font-weight: bold;
}

.selected {
	color:#fff!important;
	background-color:#4CAF50!important;
}

.placeholder:empty::before {
	content: attr(placeholder);	
	font-style: italic;
}

#appLogo {
    background-image: url('/html/img/logo.png');
    background-repeat: no-repeat;
    background-size: contain;
    width: 64px;
    height: 64px;
    display: inline-block;
}

#appName {
    font-size: 3vw;
}

#appName.reduce {
	font-size:0vw;
	transition: font-size 1s ease;
}

#menuText {
	font-size:3vw;
	transition: font-size 1s ease;
}

#appRightMenu {
	font-size:3vw;
	cursor:pointer;
	background-color:rgba(0,0,0,0) !important; 
}

/*#sidebar button {
	font-size:0.9em;
}*/

.ges-direction-row {
	flex-direction: row !important;
}

.ges-direction-column {
    flex-direction: column !important;
}

.ges-display-flex {
	display:flex;
}

.ges-flex-1 {
	flex: 1;
}

.ges-flex-2 {
	flex: 2;
}

@media screen and (min-width: 200px) and (max-width: 640px) {
	#appLogo {
		width: 32px;
    	height: 32px;
	}
	
	#appRightMenu {
		font-size:6vw;
	}
	
	.w3-modal-content {
		margin : auto;
		line-height: 1.3;
	}
	
	.w3-container, .w3-panel {
		padding: 0.01vw 2vw !important;
	}

	.ges-circle {
		height: 32px;
		width: 32px;
		font-size: 13px;
		font-weight: bold;
		padding: 0;
	}
	
}


.ges-blue {
	color: white !important;
	background: rgb(33,145,243);
    background: linear-gradient(135deg, rgba(33,145,243,1) 0%, rgba(33,150,243,1) 50%, rgba(33,150,243,0.5) 100%);
}