html, body																							{ margin: 0; border: 0; padding: 0; width: 100%; height: 100%; }

.spinner							{ width: 40px; height: 40px; position: relative; margin: 64px auto; }
.spinner > span						{ position: absolute; display: block; text-align: center; right: -100px; left: -100px; top: 40px; font-size: 20px; color: #fff; font-weight: bold; }
.double-bounce1, .double-bounce2	{ width: 100%; height: 100%; border-radius: 50%; background-color: #fff; opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: sk-bounce 2.0s infinite ease-in-out; animation: sk-bounce 2.0s infinite ease-in-out; }
.double-bounce2						{ -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

@keyframes sk-finished {
  0% {
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
	background-color: #fff;
	opacity: .25;
  } 50%{ 
    transform: scale(2.0);
    -webkit-transform: scale(2.0);
	background-color: #2e4;
	opacity: .6;
  } 100% {
	  opacity: 0;
	  transform: scale(0);
  }
}

/* Very global stylesheet */
button																								{ border: 1px solid #7f8c8d; background-color: #dee2e2; transition: color .2s, background .2s, opacity .2s; user-select: none; font: 13px "Arial"; padding: 2px 10px; height: 28px; border-radius: 2px; }
button.icon																							{ background-repeat: no-repeat; background-position: 4px 50%; padding-left: 32px; }
button:hover																						{ background-color: #FFF; cursor: pointer; transition: color .05s, background .05s, border-color .05s; }
button:focus																						{ border-color: #FBA31E; background-color: #fff; outline: none; }
button:active																						{ border-color: #000; }

button.nolabel																						{ background-position: 50% 50%; padding-left: 10px; }
button.noborder																						{ border: none; background-color: transparent; }

button.lite																							{ font-size: 12px; padding: 1px 6px; height: 22px; }
button.lite.icon																					{ background-position: 4px 50%; background-size: 14px 14px; padding-left: 22px; }

button.icon.delete																					{ background-image: url("../icons/buttonIcon_Delete_normal_14px.svg"); }
button.icon.delete:hover																			{ background-image: url("../icons/buttonIcon_Delete_normal_14px.svg"); }
button.icon.update																					{ background-image: url("../icons/buttonIcon_Update_normal_20px.svg"); }
button.icon.update:hover																			{ background-image: url("../icons/buttonIcon_Update_hover_20px.svg"); }
button.icon.cancel																					{ background-image: url("../icons/buttonIcon_Cancel_normal_20px.svg"); }
button.icon.cancel:hover																			{ background-image: url("../icons/buttonIcon_Cancel_hover_20px.svg"); }
button.icon.add																						{ background-image: url("../icons/buttonIcon_Add_normal_20px.svg"); }
button.icon.add:hover																				{ background-image: url("../icons/buttonIcon_Add_hover_20px.svg"); }
button.icon.save																					{ background-image: url("../icons/buttonIcon_Save_normal_14px.svg"); }
button.icon.save:hover																				{ background-image: url("../icons/buttonIcon_Save_normal_14px.svg"); }
button.icon.open																					{ background-image: url("../icons/buttonIcon_Open_normal_14px.svg"); }
button.icon.open:hover																				{ background-image: url("../icons/buttonIcon_Open_normal_14px.svg"); }

button.confirm																						{ border-color: #F00; }



/*input																								{ height: 22px; }*/

label																								{ user-select: none; }
label > labelIcon																					{ height: 16px; opacity: .75; vertical-align: middle; }
label input[disabled='disabled'] + labelIcon														{ opacity: .5; }
label:not(:last-child) input + labelicon 															{ padding-right: 16px; }
label > input:checked + labelicon																	{ opacity: 1; }
label labelIcon.private																				{ padding-left: 20px; background: url("../icons/buttonIcon_Private_normal_16px.svg") no-repeat 0% 50%; }
label labelIcon.public																				{ padding-left: 20px; background: url("../icons/buttonIcon_Public_normal_16px.svg") no-repeat 0% 50%; }
label labelIcon.family																				{ padding-left: 20px; background: url("../icons/uxInterface/family_16px.svg") no-repeat 0% 50%; }

/* TailS 2019 */
/* label icon + text */
label.iconText										{ display: inline-flex; cursor: pointer; }
label.iconText > icon								{ opacity: .75; font: 12px Roboto; line-height: 1.5; }
label.iconText > input								{ cursor: pointer; }
label.iconText > input:checked + icon				{ opacity: 1; }
label.iconText > icon.unit							{ height: 16px; padding-left: 20px; background: url("../icons/uxInterface/unit_16px.svg") no-repeat 0% 50%; }
label.iconText > icon.family						{ height: 16px; padding-left: 20px; background: url("../icons/uxInterface/family_16px.svg") no-repeat 0% 50%; }
label.iconText:not(:last-child) input + icon		{ padding-right: 16px; }
/* TailS 2019 */

div.form																							{ flex: 0 0 800px; height: 600px; border: 1px solid #7f8c8d; filter: drop-shadow(0px 0px 8px rgba(0,0,0,.4)); background: #FFF; box-sizing: border-box; padding: 4px 10px; font: 14px "Arial"; text-align: center; position: relative; transition: transform .2s; border-radius: 3px; }
div.form > section																					{ display: block; position: relative; margin-top: 8px; text-align: left; }
div.form > section::before																			{ content: ""; position: absolute; top: calc(50% - 1px); right: 2px; left: 2px; height: 2px; background-color: #7f8c8d; z-index: -1; }
div.form > section > span																			{ margin: 0 20px; background-color: #FFF; padding: 0 4px; color: #7f8c8d; font: 12px "Arial"; }
div.form > div.formMenu																				{ position: absolute; height: 32px; bottom: 0; left: 0; right: 0; padding: 4px 10px; display: flex; align-items: center; justify-content: flex-end; }
div.form > div.formMenu > button																	{ margin: 0 2px; }
div.form > table																					{ display: inline-table; text-align: left; }
div.form > table td																					{ padding: 4px; }
div.form > table.properties																			{ width: 700px; font: 14px "Arial"; }
div.form > table.properties td:nth-child(1)															{ text-align: left; }
div.form > table.properties td:nth-child(2)															{ text-align: right; }
div.form > table.properties td:nth-child(2) input[type='text'],
div.form > table.properties td:nth-child(2) input[type='password']									{ width: 300px; }
div.form > table.properties input																	{ font: inherit; height: 30px; }
div.form > table.properties input[type='text']														{ border: thin solid #AAA; padding: 2px 4px; }
div.form > table.properties select																	{ font: inherit; height: 30px; }
div.form > table.properties label																	{ display: inline-flex; align-items: center; }
div.form > table.properties label > labelIcon														{ line-height: 19px; }


/* List container */
div.listContainer 																					{ flex: 0 0 auto; margin: 8px; box-sizing: border-box; display: flex; flex-direction: column; transition: flex .2s; width: 320px; }

div.listContainer div.ui-resizable-handle.ui-resizable-e											{ background: rgba(0,0,0,.4); opacity: 0; transition: opacity 0.2s; }
div.listContainer div.ui-resizable-handle.ui-resizable-e:hover										{ opacity: .5; }
div.listContainer.ui-resizable.ui-resizable-resizing div.ui-resizable-handle						{ opacity: 1; }

div.listContainer header																			{ flex: 0 0 28px; background-color: #7f8c8d; color: #FFF; display: flex; align-items: center; padding: 0 4px; font: 12px "Arial"; }
div.listContainer header span.text																	{ flex: 1 1 auto; }
div.listContainer header span.search																{ flex: 0 0 auto; }
div.listContainer header span.search > input														{ opacity: 0; width: 0; height: 22px; transition: opacity .2s, width .2s; border: 1px solid #728080; border-radius: 2px; padding: 0 2px; outline: none; }
div.listContainer header span.search > input:hover													{ border-color: #5D6868; }
div.listContainer header span.search > input:focus													{ border-color: #69C1C4; }
div.listContainer header span.search > button														{ background: url("../icons/search_white_18px.svg") no-repeat 50% 50%; cursor: pointer; border: 1px solid #728080; outline: none; height: 22px; width: 22px; margin-left: 1px; border-radius: 2px; }
div.listContainer header span.search > button:hover													{ background-color: rgba(255,255,255,.4); border-color: #5D6868; }
div.listContainer header span.search > button:focus													{ background-color: rgba(255,255,255,.4); border-color: #69C1C4; }
div.listContainer header span.search.active input													{ opacity: 1; width: 200px; }

div.listContainer list																				{ flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; }
div.listContainer list > item																		{ height: 48px; border: 1px solid #ecf0f1; font: 16px Dosis; font-weight: bold; transition: color .2s, background .2s, border-color .2s, font-size .2s, height .2s, opacity .2s; display: flex; }
div.listContainer list > item:nth-child(even)														{ background-color: #EEE; }
div.listContainer list > item:hover																	{ cursor: pointer; border-color: #bdc3c7; background-color: #bdc3c7; transition: color .05s, background .05s, border-color .05s, opacity .05s; color: #FFF; }
div.listContainer list > item.ui-draggable.ui-draggable-dragging									{ z-index: 9999; opacity: .75; }
div.listContainer list > item > div.drop															{ position: absolute; height: 16px; width: 100%; background: transparent; transition: background .2s; }
div.listContainer list > item > div.drop.drop-hover													{ background: rgba(0,0,0,.5); }
div.listContainer list > item > div.drop.top														{ top: 0; }
div.listContainer list > item > div.drop.bottom														{ bottom: 0; }
div.listContainer list > item > span.icon															{ flex: 0 0 48px; background: no-repeat 50% 50%/67%; transition: color .2s, background .2s, background-size .2s, flex .2s; }
div.listContainer list > item > span.icon.curve														{ background-image: url("../icons/group_icon_black_32px.svg"); }
div.listContainer list > item > span.icon.datapoint													{ background-image: url("../icons/datapointFamilyIcons/datapoint_black_32px.svg"); }
div.listContainer list > item > span.icon.famBoiler													{ background-image: url("../icons/datapointFamilyIcons/boiler_black_32px.svg"); }
div.listContainer list > item > span.icon.famChilledWaterGroup										{ background-image: url("../icons/datapointFamilyIcons/chilled_water_black_32px.svg"); }
div.listContainer list > item > span.icon.famChromato												{ background-image: url("../icons/datapointFamilyIcons/chromato_black_32px.svg"); }
div.listContainer list > item > span.icon.famCompHP													{ background-image: url("../icons/datapointFamilyIcons/compressor_black_32px.svg"); }
div.listContainer list > item > span.icon.famCompMP													{ background-image: url("../icons/datapointFamilyIcons/compressor_black_32px.svg"); }
div.listContainer list > item > span.icon.famInstEp													{ background-image: url("../icons/datapointFamilyIcons/filter_instru_black_32px.svg"); }
div.listContainer list > item > span.icon.famMotEp													{ background-image: url("../icons/datapointFamilyIcons/filter_motor_black_32px.svg"); }
div.listContainer list > item:hover > span.icon														{ transition: color .05s, background .05s; }
div.listContainer list > item:hover > span.icon.curve												{ background-image: url("../icons/group_icon_white_32px.svg"); }
div.listContainer list > item:hover > span.icon.datapoint											{ background-image: url("../icons/datapointFamilyIcons/datapoint_white_32px.svg"); }
div.listContainer list > item:hover > span.icon.famBoiler											{ background-image: url("../icons/datapointFamilyIcons/boiler_white_32px.svg"); }
div.listContainer list > item:hover > span.icon.famChilledWaterGroup								{ background-image: url("../icons/datapointFamilyIcons/chilled_water_white_32px.svg"); }
div.listContainer list > item:hover > span.icon.famChromato											{ background-image: url("../icons/datapointFamilyIcons/chromato_white_32px.svg"); }
div.listContainer list > item:hover > span.icon.famCompHP											{ background-image: url("../icons/datapointFamilyIcons/compressor_white_32px.svg"); }
div.listContainer list > item:hover > span.icon.famCompMP											{ background-image: url("../icons/datapointFamilyIcons/compressor_white_32px.svg"); }
div.listContainer list > item:hover > span.icon.famInstEp											{ background-image: url("../icons/datapointFamilyIcons/filter_instru_white_32px.svg"); }
div.listContainer list > item:hover > span.icon.famMotEp											{ background-image: url("../icons/datapointFamilyIcons/filter_motor_white_32px.svg"); }
div.listContainer list > item > span.name															{ flex: 1 1 auto; display: flex; align-items: center; padding-left: 4px; padding-right: 4px; word-break: break-all; user-select: none; }
div.listContainer list > item > span.complex														{ flex: 1 1 auto; display: flex; flex-direction: column; padding-left: 4px; padding-right: 4px; user-select: none; }
div.listContainer list > item > span.complex > p.name												{ user-select: none; margin: 0; flex: 0 0 65%; display: flex; align-items: center; }
div.listContainer list > item > span.complex > p.description										{ user-select: none; margin: 0; flex: 0 0 35%; display: flex; align-items: center; padding-left: 4px; font-family: "Arial"; font-size: 10px; font-weight: 400; border-left: 16px solid transparent; }
div.listContainer list > item > span.conf															{ flex: 0 0 48px; background: url("../icons/config_black_24px.svg") no-repeat 50% 50%/50%; transition: color .2s, background .2s, opacity .2s, flex .2s; opacity: .5; }
div.listContainer list > item:hover > span.conf														{ background-image: url("../icons/config_white_24px.svg"); transition: color .05s, background .05s, opacity .2s; }
div.listContainer list > item.active																{ background-color: #69C1C4; color: #FFF; border-color: #529C9F; }
div.listContainer list > item.active > span.icon													{ }
div.listContainer list > item.active > span.icon.curve												{ background-image: url("../icons/group_icon_white_32px.svg"); }
div.listContainer list > item.active > span.icon.datapoint											{ background-image: url("../icons/datapointFamilyIcons/datapoint_white_32px.svg"); }
div.listContainer list > item.active > span.icon.famBoiler											{ background-image: url("../icons/datapointFamilyIcons/boiler_white_32px.svg"); }
div.listContainer list > item.active > span.icon.famChilledWaterGroup								{ background-image: url("../icons/datapointFamilyIcons/chilled_water_white_32px.svg"); }
div.listContainer list > item.active > span.icon.famChromato										{ background-image: url("../icons/datapointFamilyIcons/chromato_white_32px.svg"); }
div.listContainer list > item.active > span.icon.famCompHP											{ background-image: url("../icons/datapointFamilyIcons/compressor_white_32px.svg"); }
div.listContainer list > item.active > span.icon.famCompMP											{ background-image: url("../icons/datapointFamilyIcons/compressor_white_32px.svg"); }
div.listContainer list > item.active > span.icon.famInstEp											{ background-image: url("../icons/datapointFamilyIcons/filter_instru_white_32px.svg"); }
div.listContainer list > item.active > span.icon.famMotEp											{ background-image: url("../icons/datapointFamilyIcons/filter_motor_white_32px.svg"); }
div.listContainer list > item.active > span.conf													{ background-image: url("../icons/config_white_24px.svg"); }

div.listContainer list > item > span.conf:hover														{ opacity: 1; cursor: pointer; transition: color .05s, background .05s, opacity .05s; }

div.listContainer button.add																		{ flex: 0 0 32px; font: 26px "Arial"; display: flex; align-items: center; justify-content: center; transition: color .2s, background .2s, opacity .2s, flex .2s; }

@media screen and (max-width: 1366px) {
	div.form																						{ transform-origin: center center; transform: scale(.75, .75); }

	div.listContainer																				{ }
	div.listContainer header																		{ flex: 0 0 24px; padding: 0 4px; font: 11px "Arial"; }
	div.listContainer header span.search > input													{ }
	div.listContainer list > item																	{ height: 32px; font-size: 13px; }
	div.listContainer list > item > span.icon														{ flex: 0 0 32px; }
	div.listContainer list > item > span.conf														{ flex: 0 0 32px; }
	div.listContainer header span.search.active input												{ width: 150px; }
	
	div.listContainer button.add																	{ flex: 0 0 26px; font: 20px "Arial"; }
}
/*!List container */

#globalContainer																					{ position: relative; overflow: hidden; height: 100%; }

/* Login interface */
#globalContainer div.loginBackground																{ opacity: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0,0,0,.5); display: flex; flex-direction: column; justify-content: center; z-index: 2000; transition: opacity .2s linear, backdrop-filter .2s linear; backdrop-filter: blur(1.5rem); }
#globalContainer div.loginBackground.visible														{ opacity: 1; }
#globalContainer div.loginBackground > div.loginForm												{ width: 100%; left: 100%; height: 200px; position: absolute; background: var(--main-hl-bg-color, rgba(229,11,126,1)); filter: drop-shadow(0px 0px 6px rgba(0,0,0,.25)); transition: left .2s ease-in, background-color .2s; display: flex; justify-content: center; align-items: center; }
#globalContainer div.loginBackground.visible > div.loginForm										{ left: 0; }
#globalContainer div.loginBackground > div.loginForm.error											{ background-color: red; }
#globalContainer div.loginBackground > div.loginForm > div.formContainer							{ display: flex; flex-direction: column; }
#globalContainer div.loginBackground > div.loginForm > div.formContainer > div.logo					{ background: url('../icons/logo2.svg'); background-repeat: no-repeat; background-size: contain; width: 100%; height: 64px; margin: 20px 0 20px 0; background-position: 50% 50%; }
#globalContainer div.loginForm form																	{ text-align: center; margin: 0; }
#globalContainer div.loginForm input																{ font: 16px "Arial"; padding: 5px; border: 2px solid var(--main-hl-inputborder-color, #fff); filter: drop-shadow(0px 0px 6px rgba(0,0,0,.25)); background-color: var(--main-hl-inputbg-color, rgba(255,255,255,.75)); color: var(--main-hl-inputfg-color); transition: border-color .2s; outline: none; margin: 0 4px; }
#globalContainer div.loginForm input.username														{ background-image: url("../icons/user_24px.svg"); background-repeat: no-repeat; background-position: 4px 50%; padding: 5px 5px 5px 36px; }
#globalContainer div.loginForm input.password														{ background-image: url("../icons/password_24px.svg"); background-repeat: no-repeat; background-position: 4px 50%; padding: 5px 5px 5px 36px; }
#globalContainer div.loginForm input:hover															{ border-color: var(--main-hl-inputborderhover-color); background-color: var(--main-hl-inputbghover-color); color: var(--main-hl-inputfghover-color); }
#globalContainer div.loginForm input:focus															{ border-color: var(--main-hl-inputborderfocus-color); background-color: var(--main-hl-inputbgfocus-color); color: var(--main-hl-inputfgfocus-color); }
#globalContainer div.loginForm button																{ padding: 5px; margin: 0 4px; outline: none; font: 16px "Arial"; border: 2px solid #FFF; border-color: var(--main-validate-btnborder-color); background-color: var(--main-validate-btnbg-color); color: var(--main-validate-btnfg-color); filter: drop-shadow(0px 0px 6px rgba(0,0,0,.25)); transition: border-color .2s; height: auto; }
#globalContainer div.loginForm button:hover															{ cursor: pointer; border-color: var(--main-validate-btnborderhover-color); background-color: var(--main-validate-btnbghover-color); color: var(--main-validate-btnfghover-color); }
#globalContainer div.loginForm button:focus															{ border-color: var(--main-validate-btnborderfocus-color); background-color: var(--main-validate-btnbgfocus-color); color: var(--main-validate-btnfgfocus-color); }

#globalContainer > div.menuContainer																{ display: flex; flex-direction: column; height: 100%; }
#globalContainer > div.menuContainer > div.menuHeader												{ flex: 0 0 auto; background-color: var(--main-hl-bg-color, #FBA31E); filter: drop-shadow(0px 0px 6px rgba(0,0,0,.25)); }
#globalContainer > div.menuContainer > div.content													{ flex: 1 1 auto; margin: 0; position: relative; }
#globalContainer > div.menuContainer > div.menuFooter												{ display: none; flex: 0 0 0; }

/* Turtle Menu */
div.menuContainer li.turtleMenu																		{ display: flex; height: 48px; list-style-type: none; margin: 0; padding: 0; font: 16px Barlow; font-weight: bold; overflow: hidden; }
div.menuContainer li.turtleMenu > ul																{ padding: 0;  margin: 0; line-height: 48px; color: #FFF; user-select: none; }

div.menuContainer li.turtleMenu > ul > div > span.close												{ display: inline-block; min-width: 16px; flex: 0 0 16px; background: url("../icons/close_16px.svg") no-repeat 50% 50%; opacity: .5; transition: opacity .2s; }
div.menuContainer li.turtleMenu > ul > div > span.close:hover										{ opacity: 1; }

div.menuContainer li.turtleMenu > ul.logo															{ flex: 0 0 80px; background: #fff url("../icons/logo.svg") no-repeat 50% 50%; border: 8px solid #fff; background-size: contain; }

div.menuContainer li.turtleMenu > ul.menuItem														{ flex: 0 0 auto; padding: 0 16px; transition: background .2s, color .2s; cursor: pointer; }
div.menuContainer li.turtleMenu > ul.menuItem:hover													{ background-color: #EEE; color: #000; }
div.menuContainer li.turtleMenu > ul.menuItem.active												{ background-color: #FFF; color: #000; }
div.menuContainer li.turtleMenu > ul.menuItem > div													{ display: flex; height: 100%; align-items: center; }
div.menuContainer li.turtleMenu > ul.menuItem > div > span											{ height: 100%; }
div.menuContainer li.turtleMenu > ul.menuItem > div > span:nth-child(1)								{ display: inline-block; min-width: 32px; flex: 0 0 32px; background-repeat: no-repeat; background-position: 50% 50%; transition: background-image .2s; }
div.menuContainer li.turtleMenu > ul.menuItem > div > span:nth-child(2)								{ display: inline-block; flex: 1 1 auto; padding: 0 8px 0 8px; }
div.menuContainer li.turtleMenu > ul.menuItem > div > span:nth-child(2):last-child					{ padding: 0 0 0 8px; }

div.menuContainer li.turtleMenu > ul.sites > div > span:nth-child(1)								{ background-image: url("../icons/site_icon_white_32px.svg"); }
div.menuContainer li.turtleMenu > ul.sites > div > span:nth-child(2)								{ max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
div.menuContainer li.turtleMenu > ul.sites:hover > div > span.close,
div.menuContainer li.turtleMenu > ul.sites.active > div > span.close 								{ background-image: url("../icons/close_black_16px.svg"); }
div.menuContainer li.turtleMenu > ul.sites:hover > div > span:nth-child(1),
div.menuContainer li.turtleMenu > ul.sites.active > div > span:nth-child(1)							{ background-image: url("../icons/site_icon_black_32px.svg"); }

div.menuContainer li.turtleMenu > ul.datapoints > div > span:nth-child(1)							{ background-image: url("../icons/datapoints_icon_white_32px.svg"); }
div.menuContainer li.turtleMenu > ul.datapoints:hover > div > span:nth-child(1),
div.menuContainer li.turtleMenu > ul.datapoints.active > div > span:nth-child(1)					{ background-image: url("../icons/datapoints_icon_black_32px.svg"); }

div.menuContainer li.turtleMenu > ul.hardwares > div > span:nth-child(1)							{ background-image: url("../icons/materiel_icon_white_32px.svg"); }
div.menuContainer li.turtleMenu > ul.hardwares:hover > div > span:nth-child(1),
div.menuContainer li.turtleMenu > ul.hardwares.active > div > span:nth-child(1)						{ background-image: url("../icons/materiel_icon_black_32px.svg"); }

div.menuContainer li.turtleMenu > ul.profile > div > span:nth-child(1)								{ background-image: url("../icons/User rounded 32x32_white.svg"); }
div.menuContainer li.turtleMenu > ul.profile:hover > div > span:nth-child(1),
div.menuContainer li.turtleMenu > ul.profile.active > div > span:nth-child(1)						{ background-image: url("../icons/User rounded 32x32_black.svg"); }

div.menuContainer li.turtleMenu > ul.events > div > span:nth-child(1)								{ background-image: url("../icons/event_32x32_white.svg"); }
div.menuContainer li.turtleMenu > ul.events:hover > div > span:nth-child(1),
div.menuContainer li.turtleMenu > ul.events.active > div > span:nth-child(1)						{ background-image: url("../icons/event_32x32_black.svg"); }

div.menuContainer li.turtleMenu > ul.admin > div > span:nth-child(1)								{ background-image: url("../icons/Gear2_32x32_white.svg"); }
div.menuContainer li.turtleMenu > ul.admin:hover > div > span:nth-child(1),
div.menuContainer li.turtleMenu > ul.admin.active > div > span:nth-child(1)							{ background-image: url("../icons/Gear2_32x32_black.svg"); }

div.menuContainer li.turtleMenu > ul.title															{ flex: 1 1 auto; text-align: center; }

div.menuContainer li.turtleMenu > ul.loggedUser														{ flex: 0 0 auto; width: 300px; color: #ffffff; }
div.menuContainer li.turtleMenu > ul.loggedUser > div												{ display: flex; height: 100%; align-items: center; justify-content: space-between; }
div.menuContainer li.turtleMenu > ul.loggedUser > div > span.user									{ height: 100%; flex: 1 1 auto; background-image: url("../icons/user_alone_32px.svg"); background-repeat: no-repeat; background-position: 5px 50%; padding: 0px 5px 0px 40px; display: flex; align-items: center; line-height: normal; }
div.menuContainer li.turtleMenu > ul.loggedUser > div > span.logout									{ height: 100%; flex: 0 0 48px; background-color: #ffffff; background-image: url("../icons/logout_black_24px.svg"); background-repeat: no-repeat; background-position: 50% 50%; transition: background .2s; }
div.menuContainer li.turtleMenu > ul.loggedUser > div > span.logout:hover							{ background-color: #CC2020; background-image: url("../icons/logout_white_24px.svg"); transition: background .05s; cursor: pointer; }
/*!Turtle Menu */

/* Sites part */
#globalContainer div.menuContainer div.content div.sites												{ padding-top: 18px; height: 100%; display: flex; overflow-x: hidden; overflow-y: scroll; flex-wrap: wrap; align-content: start; font: 14px Dosis; position: absolute; top: 0; bottom: 0; left: 0; right: 0; box-sizing: border-box; }
#globalContainer div.menuContainer div.content div.sites > div.site										{ border-radius: 2px; border: 2px solid #CCC; flex: 0 0 340px; height: 290px; margin: 8px; padding: 8px; background-color: #EEE; opacity: .85; transition: opacity .2s, filter .2s, border-color .2s; box-sizing: border-box; filter: drop-shadow(0px 0px 4px rgba(0,0,0,.2)); display: flex; flex-direction: column; }
#globalContainer div.menuContainer div.content div.sites > div.site[outdated='true']					{ border-color: rgba(255,0,0); border-width: 4px; }
#globalContainer div.menuContainer div.content div.sites > div.site:hover								{ border-color: #69C1C4; opacity: 1; transition: opacity .05s, filter .25s, border-color .2s; filter: drop-shadow(0px 0px 8px rgba(0,0,0,.4)); cursor: pointer; }
#globalContainer div.menuContainer div.content div.sites > div.site.active								{ border-color: #000; opacity: 1; }
#globalContainer div.menuContainer div.content div.sites > div.site input								{ background-color: rgba(255,255,255,.85); border: thin solid rgba(0,0,0,.3); padding: 3px 4px; cursor: inherit; font-family: Roboto; }
#globalContainer div.menuContainer div.content div.sites > div.site input[name='purifyingstate']		{ text-align: center; width: 250px; }
#globalContainer div.menuContainer div.content div.sites > div.site > div.title							{ flex: 0 0 auto; text-shadow: 1px 1px 2px rgba(0, 0, 0, .4); }
#globalContainer div.menuContainer div.content div.sites > div.site > div.state							{ flex: 0 0 auto; color: inherit; font: 14px Roboto; text-align: center; margin-top: 8px; }
#globalContainer div.menuContainer div.content div.sites > div.site > div.stats							{ flex: 1 1 auto; color: inherit; font: 14px Roboto; display: flex; flex-direction: row; margin-top: 8px; }
#globalContainer div.menuContainer div.content div.sites > div.site > div.stats span.icon				{ background: url("../icons/sites/injection.svg") no-repeat 50% 100%; flex: 0 0 100px; opacity: .75; }
#globalContainer div.menuContainer div.content div.sites > div.site > div.stats span.data				{ flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; }

#globalContainer div.menuContainer div.content div.sites > div.site table.variables								{ width: 100%; color: inherit; }
#globalContainer div.menuContainer div.content div.sites > div.site table.variables td							{ opacity: 0; transition: opacity .2s; }
#globalContainer div.menuContainer div.content div.sites > div.site table.variables span						{ font-size: 12px; width: 100%; display: inline-block; border-bottom: 1px solid; margin-bottom: 2px; }
#globalContainer div.menuContainer div.content div.sites > div.site table.variables input						{ text-align: right; width: 100%; }
#globalContainer div.menuContainer div.content div.sites > div.site table.variables div.digester_gauge			{ width: 104px; height: 48px; margin: auto; }