html, body { margin: 0; border: 0; padding: 0; width: 100%; height: 100%; }
/* 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; }
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: #69c1c4; 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.icon.delete { background-image: url("../icons/buttonIcon_Delete_normal_20px.svg"); }
button.icon.delete:hover { background-image: url("../icons/buttonIcon_Delete_hover_20px.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_Validate_normal_20px.svg"); }
button.icon.save:hover { background-image: url("../icons/buttonIcon_Validate_hover_20px.svg"); }
button.confirm { border-color: #F00; }
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; }
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; }
#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: 1000; transition: opacity .2s linear; }
#globalContainer div.loginBackground.visible { opacity: 1; }
#globalContainer div.loginBackground div.loginForm { width: 100%; left: 100%; height: 200px; position: absolute; background: #69C1C4; 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.loginForm > form { text-align: center; margin: 0; }
#globalContainer div.loginForm input { font: 16px "Arial"; padding: 5px; border: 2px solid #FFF; filter: drop-shadow(0px 0px 6px rgba(0,0,0,.25)); background-color: rgba(255,255,255,.75); 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: #ACE0E1; background-color: rgba(255,255,255,.85); }
#globalContainer div.loginForm input:focus { border-color: #2C6061; background-color: #FFF; }
#globalContainer div.loginForm input:active { border-color: #000; background-color: #FFF; }
#globalContainer div.loginForm button { padding: 5px; margin: 0 4px; background-color: #FFF; outline: none; }
#globalContainer div.loginForm button:hover { border-color: #ACE0E1; cursor: pointer; }
#globalContainer div.loginForm button:focus { border-color: #2C6061; }
#globalContainer div.loginForm button:active { border-color: #000; }
#globalContainer div.loginForm button { font: 16px "Arial"; border: 2px solid #FFF; filter: drop-shadow(0px 0px 6px rgba(0,0,0,.25)); transition: border-color .2s; height: auto; }
#globalContainer div.loginForm button:hover { border-color: #ACE0E1; }
#globalContainer > div.menuContainer { display: flex; flex-direction: column; height: 100%; }
#globalContainer > div.menuContainer > div.menuHeader { flex: 0 0 auto; background-color: #69C1C4; 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 Dosis; 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 64px; background: #FFF url("../icons/verdemobil_40px.svg") no-repeat 50% 50%; }
div.menuContainer li.turtleMenu > ul.logo2 { flex: 0 0 78px; background: #FFF url("../icons/a2imp_logo.svg") no-repeat 50% 50%; }
div.menuContainer li.turtleMenu > ul.sites { flex: 0 0 auto; padding: 0 16px; transition: background .2s, color .2s; }
div.menuContainer li.turtleMenu > ul.sites > div { display: flex; height: 100%; align-items: center; }
div.menuContainer li.turtleMenu > ul.sites > div > span { height: 100%; }
div.menuContainer li.turtleMenu > ul.sites > div > span:nth-child(1) { display: inline-block; min-width: 32px; flex: 0 0 32px; background: url("../icons/site_icon_white_32px.svg") no-repeat 50% 50%; transition: background-image .2s; }
div.menuContainer li.turtleMenu > ul.sites > div > span:nth-child(2) { display: inline-block; flex: 1 1 auto; padding: 0 8px 0 8px; max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
div.menuContainer li.turtleMenu > ul.sites > div > span:nth-child(2):last-child { padding: 0 0 0 8px; }
div.menuContainer li.turtleMenu > ul.sites:hover { background-color: #EEE; color: #000; cursor: pointer; }
div.menuContainer li.turtleMenu > ul.sites.active { background-color: #FFF; color: #000; cursor: pointer; }
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.highscore { flex: 0 0 auto; padding: 0 16px; transition: background .2s, color .2s; }
div.menuContainer li.turtleMenu > ul.highscore:hover { background-color: #EEE; color: #000; cursor: pointer; }
div.menuContainer li.turtleMenu > ul.highscore.active { background-color: #FFF; color: #000; cursor: pointer; }
div.menuContainer li.turtleMenu > ul.curves { flex: 0 0 auto; padding: 0 16px; transition: background .2s, color .2s; }
div.menuContainer li.turtleMenu > ul.curves > div { display: flex; height: 100%; align-items: center; }
div.menuContainer li.turtleMenu > ul.curves > div > span { height: 100%; }
div.menuContainer li.turtleMenu > ul.curves > div > span:nth-child(1) { display: inline-block; min-width: 32px; flex: 0 0 32px; background: url("../icons/group_icon_white_32px.svg") no-repeat 50% 50%; transition: background-image .2s; }
div.menuContainer li.turtleMenu > ul.curves > div > span:nth-child(2) { display: inline-block; flex: 1 1 auto; padding: 0 8px 0 8px; }
div.menuContainer li.turtleMenu > ul.curves > div > span:nth-child(2):last-child { padding: 0 0 0 8px; }
div.menuContainer li.turtleMenu > ul.curves:hover { background-color: #EEE; color: #000; cursor: pointer; }
div.menuContainer li.turtleMenu > ul.curves.active { background-color: #FFF; color: #000; cursor: pointer; }
div.menuContainer li.turtleMenu > ul.curves:hover > div > span:nth-child(1) { background-image: url("../icons/group_icon_black_32px.svg"); }
div.menuContainer li.turtleMenu > ul.curves.active > div > span:nth-child(1) { background-image: url("../icons/group_icon_black_32px.svg"); }
div.menuContainer li.turtleMenu > ul.admin { flex: 0 0 auto; padding: 0 16px; transition: background .2s, color .2s; }
div.menuContainer li.turtleMenu > ul.admin > div { display: flex; height: 100%; align-items: center; }
div.menuContainer li.turtleMenu > ul.admin > div > span { height: 100%; }
div.menuContainer li.turtleMenu > ul.admin > div > span:nth-child(1) { display: inline-block; min-width: 32px; flex: 0 0 32px; background: url("../icons/administration_icon_white_32px.svg") no-repeat 50% 50%; transition: background-image .2s; }
div.menuContainer li.turtleMenu > ul.admin > div > span:nth-child(2) { display: inline-block; flex: 1 1 auto; padding: 0 8px 0 8px; }
div.menuContainer li.turtleMenu > ul.admin > div > span:nth-child(2):last-child { padding: 0 0 0 8px; }
div.menuContainer li.turtleMenu > ul.admin:hover { background-color: #EEE; color: #000; cursor: pointer; }
div.menuContainer li.turtleMenu > ul.admin.active { background-color: #FFF; color: #000; cursor: pointer; }
div.menuContainer li.turtleMenu > ul.admin:hover > div > span:nth-child(1) { background-image: url("../icons/administration_icon_black_32px.svg"); }
div.menuContainer li.turtleMenu > ul.admin.active > div > span:nth-child(1) { background-image: url("../icons/administration_icon_black_32px.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: #346062; }
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: #346062; background-image: url("../icons/logout_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: #CC0000; transition: background .05s; cursor: pointer; }
/*!Turtle Menu */
/* Sites part */
#globalContainer div.menuContainer div.content div.sites { padding: 16px; 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.sitecontainer { flex: 0 0 340px; height: 290px; margin: 8px; position: relative; }
#globalContainer div.menuContainer div.content div.sites > div.sitecontainer.dragEnter > div.site { border-color: #000 !important; animation: zoominoutsinglefeatured 1s infinite ; }
#globalContainer div.menuContainer div.content div.sites > div.sitecontainer > div.site { height: 100%; border-radius: 2px; padding: 8px; border: 2px solid #CCC; 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; user-select: none; -webkit-user-select: none; }
#globalContainer div.menuContainer div.content div.sites > div.sitecontainer > div.site * { pointer-events: none; }
#globalContainer div.menuContainer div.content div.sites > div.sitecontainer > div.site[outdated='true'] { border-color: rgba(255,0,0); border-width: 4px; }
#globalContainer div.menuContainer div.content div.sites > div.sitecontainer > 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.sitecontainer > div.site.active { border-color: #000 !important; opacity: 1; }
#globalContainer div.menuContainer div.content div.sites > div.sitecontainer > 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.sitecontainer > div.site input[name='purifyingstate'] { text-align: center; width: 250px; }
#globalContainer div.menuContainer div.content div.sites > div.sitecontainer > 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.sitecontainer > 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.sitecontainer > 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.sitecontainer > 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.sitecontainer > 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.sitecontainer > div.site.dragging { opacity: .2; }
#globalContainer div.menuContainer div.content div.sites > div.sitecontainer > div.dropArea { opacity: 0; pointer-events: inherit; }
#globalContainer div.menuContainer div.content div.sites > div.sitecontainer > div.dropArea.before { position: absolute; top: 0 ; bottom: 0; left: -16px; width: 16px; background: #888; z-index: 10; }
#globalContainer div.menuContainer div.content div.sites > div.sitecontainer > div.dropArea.after { position: absolute; top: 0 ; bottom: 0; right: -16px; width: 16px; background: #888; z-index: 10;}
#globalContainer div.menuContainer div.content div.sites > div.sitecontainer.active > div.dropArea.delete { position: absolute; bottom: 0; right: 0; left: 0; height: 32px; background: #888 url('../icons/close_16px_white.svg') no-repeat 50% 50%; z-index: 10;}
#globalContainer div.menuContainer div.content div.sites > div.sitecontainer > div.dropArea.dragEnter { opacity: 1; }
#globalContainer div.menuContainer div.content div.sites > div.sitecontainer > div.site table.variables { width: 100%; color: inherit; }
#globalContainer div.menuContainer div.content div.sites > div.sitecontainer > div.site table.variables td.optional { opacity: 0; transition: opacity .2s; }
#globalContainer div.menuContainer div.content div.sites > div.sitecontainer > 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.sitecontainer > div.site table.variables input { text-align: right; width: 100%; }
#globalContainer div.menuContainer div.content div.sites > div.sitecontainer > div.site table.variables div.digester_gauge { width: 104px; height: 48px; margin: auto; }
#globalContainer div.menuContainer div.content div.sites > div.sitecontainer > div.site table.variables div.bulk { display: flex; font-size: 12px; align-items: center; }
#globalContainer div.menuContainer div.content div.sites > div.sitecontainer > div.site table.variables div.bulk label { margin-right: 10px; }
#globalContainer div.menuContainer div.content div.sites > div.sitecontainer > div.site table.variables div.bulk div.meter-container { flex: 1 1 auto; height: 18px; position: relative; }
#globalContainer div.menuContainer div.content div.sites > div.sitecontainer > div.site table.variables div.bulk div.meter-container meter { width: 100%; height: 100%; }
#globalContainer div.menuContainer div.content div.sites > div.sitecontainer > div.site table.variables div.bulk div.meter-container div { top: 3px; left: 0; right: 0; text-align: center; font-size: 10px; position: absolute; font-weight: bold; }
#globalContainer div.menuContainer div.content div.sites > div.sitecontainer > div.site[type='group'] > div.stats span.icon { background-image: url("../icons/sites/folder.svg") }
#globalContainer div.menuContainer div.content div.sites > div.returnButton { text-align: center; justify-content: center; font-size: 30px; border-radius: 2px; border: 2px solid #CCC; flex: 0 0 32px; height: 290px; margin: 8px; padding: 8px; background-color: #FFF; 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; user-select: none; -webkit-user-select: none; }
#globalContainer div.menuContainer div.content div.sites > div.returnButton: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.returnButton.dragEnter { border-color: #000 !important; }
/* Production (highscore) */
#globalContainer div.menuContainer div.content div#highscore { display: flex; position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding-top: 10px; box-sizing: border-box; margin: 8px; flex-direction: column; }
#globalContainer div.menuContainer div.content div#highscore div.section { flex: 0 0 25%; display: flex; }
#globalContainer div.menuContainer div.content div#highscore div.section div.monthConsumption { text-align: center; font: 32px Arial; flex: 0 0 40%; display: flex; align-self: center; justify-content: center; flex-direction: column;}
#globalContainer div.menuContainer div.content div#highscore div.section div.monthConsumption > div { text-align: center; }
#globalContainer div.menuContainer div.content div#highscore div.section div.monthConsumption > div.titre { margin-bottom: 10px; text-decoration: underline; }
#globalContainer div.menuContainer div.content div#highscore div.section div.chartContainer { flex: 0 0 60%; border: 1px solid #eee; position: relative; }
#globalContainer div.menuContainer div.content div#highscore div.section div.chartContainer > div.chart { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
@keyframes zoominoutsinglefeatured {
0% {
transform: scale(1,1);
}
50% {
transform: scale(0.9,0.9);
}
100% {
transform: scale(1,1);
}
}