/*
@font-face {
	font-family: "Hecto";
	src: url("../fonts/Zetafonts_-_Extenda_40_Hecto.otf") format("opentype");
}
*/

@font-face {
	font-family: "TheMillavaDemo";
	src: url("../fonts/TheMillavaDemoRegular-MVYjp.ttf") format("truetype");
}


@font-face {
	font-family: "Deutschlander";
	src: url("../fonts/Deutschlander-O5we.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Extenda";
	src: url("../fonts/Zetafonts_-_Extenda_40_Hecto.otf") format("opentype");
	font-weight: normal;
	font-style: normal;
}


html, body 
{
	font-size: 15px;
	font-family: "TheMillavaDemo", sans-serif;
	background: #666666;
	color: white;
	margin: 0;
	padding: 0;
	overflow: hidden; /* for scrollable flex cells, all parents must be overflow hidden. see: https://stackoverflow.com/a/35609992 */
}
input
{
	font-family: sans-serif;
}


h1
{
	font-size: 60px;
}

h2
{
	font-size: 48px;
}

h3
{
	font-size: 38px;
}

.decotitle
{
	font-family: "Deutschlander";
	font-weight: 500 !important;
	font-style: normal !important;
	text-transform: uppercase;
	margin: 0;
}






/***************************************************************/
/******************** FIXME: PLEASE REMOVE *********************/

.uiflex
{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
		
	display: flex;
	align-items: center;
	justify-content: center;
}
  .uiflex.alignright
, .uibox.alignright
{
	justify-content: end;
}
.flexcolumn
{
	flex-direction: column;
}

.uiflex .uiflex
{
	position: static;
}

.uibox
{
	border: 1px solid black;
	padding: 20px;
	margin: 20px;
	
	color: black;
	background: silver;
}

/******************** //FIXME:             *********************/
/***************************************************************/



.msg
{
	border: 1px solid green;
	background: rgb(240, 255, 240);
	padding: 10px;
	margin: 10px;
	
	max-width: 92%;
}
.msg
, .msg pre
{
	white-space: pre-wrap
}

.msg.error
{
	border: 1px solid red;
	background: rgb(255, 240, 240);
}




.appui
{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
    	display: flex;
	flex-direction: column;
	align-items: strecth;
	overflow: hidden;
}

.appui .header
{
	display: flex;
	flex-direction: row;
	flex: 8;
	justify-content: space-between;
	border-bottom: 1px solid #222222;
}

.appui .logotitle
{
	margin-left: 15px;
}

.appui .header div
{
}

.appui .header .toprightform
{
	margin-top: 4px;
	margin-right: 5px;
}

.appui .header .logoutform
{
}

.appui .header .exportdataform
{
	margin-right: 0.8em;
}
.appui .header .importdataform
{
	margin-right: 0.8em;
}

#import_data_textarea
{
	width: 100%;
	min-height: 25vh;
}

.appui .header .saving_indicator
{
	display: flex;
	flex-direction: row;

	color: white;
	opacity: 0.0;
}

.appui .header .toprightformgroup
{
	display: flex;
	flex-direction: row;
}

.appui .body
{
	display: flex;
	flex-direction: row;	
	align-items: strecth;
	flex: 92;
	overflow: hidden;
}

.appui .sidebar_main
{
	flex: 15;
	box-sizing: border-box;
	padding: 0.5vh 0.25vw;
	border-right: 1px solid #222222;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

  .appui .sidebar_main .decotitle
, .appui .sidebar_main .updown
, .appui .sidebar_2 .decotitle
, .appui .sidebar_2 .tenants_controls
{
	margin-left: 0.8vw;
	margin-right: 0.8vw;
}

.appui .sidebar_2
{
	flex: 16;
	box-sizing: border-box;
	padding: 0.5vh 0.25vw;
	border-left: 1px solid #222222;
	display: flex;
	flex-direction: column;
}

.appui .center
{
	flex: 60;
	position: relative; top: 0; left: 0;
	user-select: none;
}

.appui .floorplan
{
	position: relative;
	background: white url('../images/floor_image2.png') center center no-repeat;
	background-size: 100% 100%;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.appui .allrooms
{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 2;
	top: 0;
	left: 0;
}

.droparea
{
	position: absolute;
	/*background: purple; */
	/*opacity: 0.7;*/
	z-index: 1;
}

.droptarget_label
{
	position: absolute;
	color: #0c4681;
	font-size: 1.1vw;
	float: left;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.droptarget_label .text
{
	display: inline-block;
}
.droptarget_arealabel
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
	float: left;
	text-align: center;
	font-family: "TheMillavaDemo", sans-serif;
	font-size: 0.75vw;
	color: #0c4681;
	opacity: 0.7;
}
[arealabel_pos="center"] .droptarget_arealabel
{
	bottom: auto;
	top: 50%;
}
.droptarget_arealabel .text
{
	display: inline-block;
}

.tenant
{
	display: flex;
	flex-direction: column;		
	width: 100%;
	height: 100%;
	z-index: 2;	
	cursor: pointer;
	position: relative;
	top: 0;
	left: 0;
}
.currentDrag
{
	z-index: 1000
}

.tenant .decotop
{
	background: #24b246;
	flex: 4;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: stretch;
}
.tenant .decotop .initials
{
	/*
	font-family: "Deutschlander";
	font-weight: 500 !important;
	*/ 
	font-family: "Deutschlander";
	font-weight: 300 !important;
	font-style: normal !important;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: white;
	text-align: center;
	font-size: 140%;
}
.greyed .tenant .decotop
{
	background: silver;
}
.greyed .tenant .decotop .initials
{
	color: silver;
}
.tenant .num
{
	border: 2px solid #24b246;
	border-top: none;
	border-bottom-left-radius: 7px;
	border-bottom-right-radius: 7px;
	background: white;
	color: #24b246;
	text-align: center;
	font-weight: bold;
	flex: 1;
	cursor: pointer;
}
.greyed .tenant .num
{
	background: silver;
	color: silver;
}

/* should be dynamic
.tenant.t2 .decotop
{
	background: purple;
}
.tenant.t2 .num
{
	border-color: purple;
	color: purple;
}

.tenant.t3 .decotop
{
	background: rgb(213,65,84);
}
.tenant.t3 .num
{
	border-color: rgb(213,65,84);
	color: rgb(213,65,84);
}
*/


.tenants_list
{
	height: 100%;
	flex: 1;
	overflow-y: scroll;
	overflow-x: hidden;
}

.tenants_list_item
{
	border: 0.3em solid #24b246;
	background: #24b246;
	padding-left: 1.1em;
	border-radius: 0.5em;
	margin-top: 1.5em;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	user-select: none;
}
.tenants_list_item .menubutton
, .tenant .menubutton
{
	background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAACvElEQVR42u3d0ZGEIBBFUTT/nDUCFD6gGzgnBF5dcWpna0oBAAAAUrgcQZjHPgKhLwh7CUQUthOIMGwoEMLjsKODFYY9Hag4bCoQcdhVIOKwrUBIHod9HaA4bOzwxGHnULcjAE+Wk28PWzs0cdjbKxZ4org9bO4GAYGA69brld3dICAQQCDgXdTnD9u7QUAgIBAQCAgEBAICAQQCn/yx6J8vK7pBAIGAQMC7qM8hNneDgEDAdes1y95uEHCDuEVsLRB2i8TOXrHAk8UtYmOHJxL7OkCR2FYgIrGrQMgViU0dpkjs6UCFYkeBiMSGAhGK7QTChFjsJRDB2AcAAAAAAAAAAAAAwNepY/nKu0DoDMJmAhGF/QQiDDsKhPA4bOlQhWFThykOuwpEHLYViDjsKxCKH9ERCEvHYWcHJw5bj+NXbsFT5fjbw94OTBw294oFniZuD7u7QUAg4Kr1emV7NwgIBBAIeA/1+cP+bhAQCAgEBAICAYGAQEAgQJU/FLXxZUU3CCAQEAh4D/U5xO5uEBAIuGq9ZtncDQJuELeIvQXCbpHY2isWeKq4Rezs4ERiY4cnEvsKRCS2FQi5IrGrgxSJTR2mUGwpEJHYUSBCsZ9AmBCLzQQiGBsBAAAAAAAAAAAAAAAV/tcglv8HEQidQdhMIKKwn0CEYUeBEB6HLR2qMGzqMMVhV4GIw7YCEYd9BULxC1MCYek47OzgxGHrcfwMNHiqHH972NuBicPmXrHA08TtYXc3CAgEXLVer2zvBgGBAAIB76E+f9jfDQICAYGAQEAgIBAQCAgEqPKHoja+rOgGAQQCAgHvoT6H2N0NAgIBV63XLJu7QcAN4haxt0DYLRJbe8UCTxW3iJ0dnEhs7PBEYl+BiMS2AiFXJHZ1kCKxqcMUii0FIhI7CkQo9hMIE2KxmUAEYyMgvRdLEGPovcVdyAAAAABJRU5ErkJggg==') center center no-repeat;
	background-size: 75% 75%;
	/*border: 0.1em solid #444444;*/
	width: 2.2em;
	height: 2.2em;
	border-radius: 1.1em;
	position: absolute;
	top: 0.2em;
	right: 0.2em;
	cursor: pointer;
}
.tenant .menubutton
{
	width: 1.5em;
	height: 1.5em;
	border-radius: 0.75em;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAACw0lEQVR42u3dAY6EIBBFQfD+d8YTKJgotE3VEda8fMg4s6UAAAAAIVR/gjVaa637cGr1fAQiiOGHJRiBiEIsAhGGUAQiDpEIhIVhCEUg4hCJQMQhEoGIQyQCEYdIBCKOH8QhEoGIQySfO/wJwIJsux5WRCDiEIkjFlgQ62FFLAgIBByxHK8csywICAQQCLiDuH+4h1gQEAgIBAQCAgGBgEAAgUCPD4s6vKxoQQCBgEDAHcQ9xP3DgoBAwBHLMcvxyoKABbEifptXIGSLRByOWGBBrIj1EIhIxCEQkYhDICIRh0CIFYk4BCIScQhEKMIQiEjEIRChCEMgTIhFFAIRjCAAAAAAAAAAAAAAAIrX3ZfyyrtAeBiEYAQiircenlgEIgyhCEQcIhGIMIQiEHFEeKgiEYg4RCIQcYhEIOIQiUDEIRKBiEMk2fgvt2BB9l4PKyIQcYjEEQssiPWwIhYEBAKOWI5XjlkWBAQCCATcQdw/3EMsCAgEBAICAYGAQEAggEDgjg+KBnhZ0YIAAgGBgDuIe4j7hwUBgYAjlmOW45UFAQtiRfw2r0DIFok4HLHAglgR6yEQkYhDICIRh0BEIg6BECsScQhEJOIQiFCEIRCRiEMgQhGGQJgQiygEIhhBAAAAAAAAAAAAAAAA13zXYCHfBxEID4MQjEBE8dbDE4tAhCEUgYhDJAIRhlAEIo4ID1UkAhGHSAQiDpEIRBwiEYg4RCIQcYgkG/8GGizI3uthRQQiDpE4YoEFsR5WxIKAQMARy/HKMcuCgEAAgYA7iPuHe4gFAYGAQEAgIBAQCAgEEAjc8UHRAC8rWhBAICAQcAdxD3H/sCAgEHDEcsxyvLIgYEGsiN/mFQjZIhGHIxZYECtiPQQiEnEIRCTiEIhIxCEQYkUiDoGIRBwCEYowBCIScQhEKMIQCBNiEYVABCMI4A9Od2qM9zvYE8QAAAAASUVORK5CYII=');
}
.tenant .menubutton
{
	top: 0;
	right: 0;
}
.greyed .tenant .menubutton
{
	display: none;
}
.tenants_list_item .menubutton:hover
, .tenant .menubutton:hover
{
	border-color: #888888;
	background-color: silver;
	opacity: 0.7;
}
.tenant .menubutton:hover
{
	opacity: 1.0;
}
.tenants_list_item .colorpicker
{
	display: none;
}
.tenants_list_item .decobar
{
	background: #24b246;
	width: 1.1em;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.tenants_list_item.selected
{
	border-left-style: dashed !important;
	background: white !important;
}

.tenants_list_item .roomslist
{
	display: none;
	background: white;
	color: black;
	font-weight: bold;
	font-size: 0.96vw;
}
.tenants_list_item.selected .roomslist
{
	display: block;
}
.tenants_list_item .roomslist .rl_item
{
	padding-left: 1.5em;
}

.tenants_list_item .name
{
	padding: 0.8em 1.2em;
	background: white;
	color: #24b246;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 110%;
	cursor: pointer;
}

.tenants_list_item.t2
{
	background: purple;
	border-color: purple;
}
.tenants_list_item.t2 .decobar
{
	background: purple;
}

.tenants_list_item.t2 .name
{
	color: purple;
}

.tenants_list_item.t3
{
	background: rgb(213,65,84);
	border-color: rgb(213,65,84);
}
.tenants_list_item.t3 .decobar
{
	background: rgb(213,65,84);
}

.tenants_list_item.t3 .name
{
	color: rgb(213,65,84);
}


.updown
{
	display: flex;
	justify-content: space-between;
	margin-top: 1.5em;
}

.updown input
{
	font-family: sans-serif;
	font-weight: bold;
	font-size: 130%;
}

.tenants_controls
{
	display: flex;
	justify-content: center;
}
.tenants_controls input
{
	font-family: sans-serif;
	font-weight: bold;
	font-size: 115%;
}

.movements_history
{
	height: 100%;
	flex: 1;
	overflow-y: scroll;
	overflow-x: hidden;
}

.movements_history_item
{
	border: 0.3em solid #24b246;
	background: #24b246;
	padding-left: 0.4em;
	border-radius: 0.5em;
	margin-top: 1.5em;
	cursor: pointer;
}
.movements_history_item:first-child
{
	margin-top: 0.5em;
}

.movements_history_item .text
{
	padding: 0.8em 1.2em;
	background: white;
	color: black;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 0.85vw;
	cursor: pointer;
	display: flex;
	flex-direction: column;
}
.movements_history_item .text .tenantname
{
	color: #24b246;
}
.movements_history_item .text .thetext
{
}
.movements_history_item .text .ts
{
	color: #444444;
	font-size: 70%;
	margin-top: 0.8em;
}



/*
.movements_history_item.t2
{
	background: purple;
	border-color: purple;
}
.movements_history_item.t2 .text .tenantname
{
	color: purple;
}

.movements_history_item.t3
{
	background: rgb(213,65,84);
	border-color: rgb(213,65,84);
}
.movements_history_item.t3 .text .tenantname
{
	color: rgb(213,65,84);
}
*/

.title_topmargin
{
	margin-top: 0.5em;
}


#loadingOverlay
{
	position: fixed;
	z-index: 1000000;
	background: #2c4055;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}
#loadingOverlay .spinner
{
	width: 15%;
	height: auto;
	animation:spin 6s linear infinite;
}
@keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }



.updownarea
, .addremovearea
{
	position: absolute;
	right: 1.5vw;
	top: 6.5vw;
	float: none;
	padding: 1.2vw 0;
	width: 11vw;
	font-family: "Deutschlander";
	font-size: 250%;
	outline: 0.8vw solid rgb(180, 255, 180);
	background: rgb(100, 155, 100);	
	display: inline-block;
	color: white;
	text-transform: uppercase;
	visibility: hidden;
}
.downarea.updownarea
{
	top: 15.5vw;
}
.addremovearea
{
	right: 9vw;
	top: 0.7vw;
	width: 3vw;
	height: 3vw;
	visibility: visible;
	padding: 0.25vw;
	cursor: pointer;
}
.addarea.addremovearea
{
}
.removearea.addremovearea
{
	right: 2vw;
	visibility: hidden;
	outline-color: rgb(255, 180, 180);
	background: rgb(155, 100, 100);	
}
.addremovearea img
{
	width: 100%;
	height: 100%;
}



.rightclickmenu
{
	position: absolute;
	/*border: 0.15vw solid black;*/
	border-radius: 0.3vw;
	background: rgb(215,215,215);
	padding: 0.9vw;
	box-shadow: 0.3vw 0.3vw 0.3vw #222222;
	display: none;
	/*font: 1.4vw normal "TheMillavaDemo", sans-serif;*/
	font: 1.4vw normal "Deutschlander", sans-serif;
	line-height: 1.4vw;
	text-transform: uppercase;
	z-index: 1000000;
}
.rightclickmenu .menuitem
{
	color: black;
	/*color: yellow;*/
	cursor: pointer;
	padding: 0.4vw 0.05vw;
}
.rightclickmenu .menuitem:hover
{
	/*background: rgb(140, 250, 100);*/
	background: rgb(243,243,243);
}
.rightclickmenu  .scroll_button
{
	text-align: center;
	display: none;
	height: 3vh;
	line-height: 3vh;
}
.rightclickmenu  .scroll_button.up
{
	cursor: n-resize;
}
.rightclickmenu  .scroll_button.down
{
	cursor: s-resize;
}
.rightclickmenu.has_scroll .scroll_button
{
	display: block;
}
.rightclickmenu.has_scroll .scroll_button:hover
{
	background: rgb(240,240,240);
}
.rightclickmenu  .menuitems
{
	overflow-y: hidden;
	overflow-x: hidden;
}

.colorPickerWidget
{
	width: 18vw;
	float: left;
	position: absolute;
	top: 0;
	left: 0;
	background: rgb(215,215,215);
	border-radius: 0.3vw;
	/*border: 1px solid black;*/
	box-shadow: 0.3vw 0.3vw 0.3vw #222222;
	z-index: 1000000;
	display: none;
}
.color-picker
{
	z-index: 1000001;
	box-shadow: none !important;
}
.colorPickerWidget .thePicker
{
	display: flex;
	flex-wrap: wrap;
}
.colorPickerWidget .thePicker input
{
	flex-grow: 40;
	flex-shrink: 40;
	flex-basis: 0;
	height: 1.5em;
	line-height: 1.5em;
	box-sizing: border-box;
	min-width: 0; /* inputs need a min-width */
	min-height: 0;
	padding: 0 0.25em;
	border: 1px solid black;
}
.colorPickerWidget .thePicker .colorSample
{
	flex-grow: 60;
	flex-shrink: 60;
	flex-basis: 0;
	height: 1.5em;
	box-sizing: border-box;
	background: white;
}
.colorPickerWidget .thePicker .spaceforpicker
{
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 100%;
	height: 10em;
	box-sizing: border-box;
}
.colorPickerWidget .controls
{
	padding: 0.6em 0 0.4em;
	display: flex;
	justify-content: center;
}



.savedFilesList
{
	border: 1px solid blue;
	max-height: 50vh;
	overflow-y: auto;
}

.savedFilesList .item
{
	background: rgb(230, 230, 255);
	padding: 0.3em 0.6em;
	margin: 0.3em 0;
	cursor: pointer;
}
.savedFilesList .item:hover
{
	background: rgb(244, 244, 255);
}
.savedFilesList .item.selected
{
	background: rgb(100, 100, 210);
	color: white;
}

.datatext
{
	width: 100%;
	height: 50vh;
}