html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }

html { line-height: 1; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }

a img { border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

a { text-decoration: none; outline: none; }

:focus, :active { margin: 0; border: 0; outline-color: transparent; outline-style: none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; resize: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }

button::-moz-focus-inner, input[type=reset]::-moz-focus-inner, input[type=button]::-moz-focus-inner, input[type=submit]::-moz-focus-inner, input[type=file] > input[type=button]::-moz-focus-inner { border: none; }

/* Header; */
header { display: table-row; width: 100%; height: 44px; max-height: 44px; background: #bc141a; }

.hdr-wrapper { display: table-cell; width: 100%; }

.hdr-layout { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; }

.hme { height: 44px; max-height: 44px; width: 100px; background: black url("../img/jll-logo-red-white.svg") no-repeat 50% 50%; background-size: auto 26px; -webkit-flex-grow: 0; flex-grow: 0; -webkit-align-items: center; align-items: center; }

.report-title { padding-left: 15px; color: whitesmoke; font-size: 0.92em; font-weight: normal; line-height: 44px; text-transform: uppercase; -webkit-flex-grow: 1; flex-grow: 1; }

.hdr-actions { display: -webkit-flex; display: flex; height: 44px; -webkit-flex-grow: 0; flex-grow: 0; -webkit-align-items: center; align-items: center; }
.hdr-actions button { width: 34px; height: 34px; line-height: 34px; border: 0; background: transparent; }

.hdr-search-wrapper { position: relative; margin-right: 4px; display: -webkit-flex; display: flex; background: whitesmoke; -moz-border-radius: 44px; -webkit-border-radius: 44px; border-radius: 44px; -webkit-flex-grow: 0; flex-grow: 0; -webkit-align-items: center; align-items: center; }
.hdr-search-wrapper .btn-find, .hdr-search-wrapper .hdr-inp-find, .hdr-search-wrapper .btn-find-clear { -webkit-flex-grow: 0; flex-grow: 0; }

.btn-find { -moz-border-radius: 44px 0 0 44px; -webkit-border-radius: 44px; border-radius: 44px 0 0 44px; }
.btn-find.ico-find { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="icon" x="0" y="0" width="64" height="64" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve"><path fill="#A0A7AA" d="M45 40.3l-1 1L42.7 40l-0.2 0.2c3.7-4.3 6-9.8 6-15.9C48.6 10.8 37.7 0 24.3 0 10.9 0 0 10.8 0 24.2 0 37.6 10.9 48.4 24.3 48.4c6.1 0 11.7-2.3 16-6L39.9 42.8l1.3 1.3 -1 1 19 18.9 4.8-4.8L45 40.3zM24.3 43C13.9 43 5.4 34.6 5.4 24.2c0-10.4 8.5-18.8 18.9-18.8 10.4 0 18.9 8.4 18.9 18.8C43.2 34.6 34.7 43 24.3 43z"/></svg>') 50% 50% no-repeat; background-size: 16px 16px; }

.hdr-inp-find { height: 34px; min-width: 200px; border: 0; background: transparent; }

.btn-find-clear { -moz-border-radius: 0 44px 44px 0; -webkit-border-radius: 0; border-radius: 0 44px 44px 0; }

.btn-share { -webkit-flex-grow: 0; flex-grow: 0; width: 44px; height: 100%; margin: 0 8px; }

/* Navigation; */
nav { display: table-cell; vertical-align: top; width: 100px; height: 100%; background: transparent; }

.nav-left { list-style-type: none; }
.nav-left .nav-left-item { position: relative; min-height: 64px; }
.nav-left .nav-left-item.nli-selected { background: #2a2a2b; -moz-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05), inset -2px 1px 0 0 rgba(0, 0, 0, 0.8); -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05), inset -2px 1px 0 0 rgba(0, 0, 0, 0.8); box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.05), inset -2px 1px 0 0 rgba(0, 0, 0, 0.8); }
.nav-left .nav-left-item.nli-selected:after { position: absolute; right: -12px; margin-top: -58px; content: "\25B6"; color: #2a2a2b; font-size: 34px; line-height: 34px; }
.nav-left .nav-left-item .nli-link { display: block; }
.nav-left .nav-left-item .nli-link .ico-nav-left { display: block; width: 64px; height: 64px; margin: 0 auto; }
.nav-left .nav-left-item .nli-link .nli-text { display: inline-block; width: 100px; padding: 4px 0; color: #9d9c9c; font-size: 0.6em; text-align: center; text-transform: uppercase; }

/* Glyphics; */
/* Glyphics: Navigation; */
/* Main; */
main { display: table-cell; height: 100%; vertical-align: top; }

.tab-container { display: table; height: 100%; width: 100%; }

.tabs { display: table-row; height: 44px; text-align: center; }
.tabs a { display: inline-block; padding: 0 50px; color: #9d9c9c; text-transform: uppercase; font-size: 0.92em; font-weight: bold; line-height: 44px; }
.tabs .tabs-selected { position: relative; color: whitesmoke; background: #828180; -moz-box-shadow: inset 0 2px 0 0 #3b3b3c, inset 0 -2px 0 0 #3b3b3c; -webkit-box-shadow: inset 0 2px 0 0 #3b3b3c, inset 0 -2px 0 0 #3b3b3c; box-shadow: inset 0 2px 0 0 #3b3b3c, inset 0 -2px 0 0 #3b3b3c; }
.tabs .tabs-selected .tab-notch { position: absolute; display: block; width: 100%; height: 1em; margin: -0.36em auto auto -50px; font-size: 1.6em; line-height: 0.86em; text-align: center; vertical-align: top; background: transparent; }
.tabs .tabs-selected .tab-notch:after { content: "\25BC"; color: #828180; text-shadow: 0 5px 0 #3b3b3c; }

.content { display: table-row; background: #e3e3e3; }
.content > section { display: table-cell; height: 100%; }

.tab-card { display: table; height: 100%; width: 100%; border-collapse: separate; border-spacing: 15px; }
.tab-card .tab-set { display: table-row; }
.tab-card .tab-set .tab-cell { position: relative; display: table-cell; width: 100%; height: 100%; vertical-align: top; background: transparent; }

.grid { display: table; height: 100%; width: 100%; border-collapse: collapse; border-spacing: 0px; }

.grid-wrap { display: table-row; height: 100%; }

.grid-col { display: table-cell; height: 100%; vertical-align: top; background: transparent; }
.grid-col.grid-col-left { width: 60%; }
.grid-col .grid-row-wrap { display: table; width: 100%; height: 100%; background: transparent; }
.grid-col .grid-row-wrap .grid-row { display: table-row; }
.grid-col .grid-row-wrap .grid-row .grid-cell { position: relative; display: table-cell; height: auto; padding-top: 6px; vertical-align: top; background: #e3e3e3; }
.grid-col .grid-row-wrap .grid-row .grid-cell.grid-cell-1 { height: 96px; min-height: 96px; max-height: 96px; }
.grid-col .grid-row-wrap .grid-row .grid-cell.grid-cell-2 { height: 192px; min-height: 192px; max-height: 192px; }
.grid-col .grid-row-wrap .grid-row .grid-cell.grid-cell-3 { height: 288px; min-height: 288px; max-height: 288px; }
.grid-col .grid-row-wrap .grid-row:first-child .grid-cell { padding-top: 0; }

.kpi-group { display: table; table-layout: fixed; width: 100%; height: 100%; }
.kpi-group .kpi-row { display: table-row; width: 100%; height: 100%; }
.kpi-group .kpi-row .kpi-cell { display: table-cell; width: 33.33%; height: 100%; }
.kpi-group .kpi-row .kpi-cell:last-child .kpi { margin-right: 0; }

.kpi { position: relative; height: 84px; margin-right: 6px; padding: 6px; }
.kpi.kpi-olive { background: #ab9942; }
.kpi.kpi-orange { background: #e36307; }
.kpi.kpi-petrol { background: #318eaf; }
.kpi h3, .kpi h4 { display: block; width: 100%; color: whitesmoke; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.kpi h3 { font-size: 0.66em; text-transform: uppercase; }
.kpi h4 { font-size: 1.8em; font-weight: 300; }
.kpi h4.curr, .kpi h4.thou, .kpi h4.pcnt { display: none; }

.chart-container { height: 100%; background: whitesmoke; }

.grid-col-right .chart-container { margin-left: 6px; }

/* Popover; */
.po-popover-container { pointer-events: none; display: none; position: absolute; width: 300px; min-width: 300px !important; max-width: 390px !important; height: 308px; background: transparent; }

.po-kpi-frame { position: relative; background: transparent; border: 6px solid white; -moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.25); }

.po-kpi-frame-fill { position: absolute; top: 0; background: transparent; border: 6px solid white; z-index: 10; }

.po-contents-wrapper { pointer-events: all; position: absolute; box-sizing: border-box; width: 100%; background: white; -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25); z-index: 9; -moz-transition: height 450ms ease-in-out; -o-transition: height 450ms ease-in-out; -webkit-transition: height 450ms ease-in-out; transition: height 450ms ease-in-out; }

.po-kpi-notch { position: absolute; width: 100%; height: 1em; bottom: -0.76em; margin: 0; font-size: 1.6em; line-height: 0.92em; text-align: center; vertical-align: top; background: transparent; }
.po-kpi-notch:after { content: "\25BC"; }

.po-header { margin: 9px 0; padding: 9px 10px; border-bottom: 1px solid #e3e3e3; }
.po-header h3 { color: #3b3b3c; font-size: 0.86em; font-weight: 700; line-height: 0.86em; letter-spacing: -0.025em; }
.po-header h3 .closePopover { position: relative; display: block; float: right; width: 17px; height: 17px; margin-top: -8px; color: #318eaf; font-size: 1px; background: transparent; border: 1px solid #318eaf; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; overflow: hidden; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4; -moz-transition: 450ms all ease-in-out; -o-transition: 450ms all ease-in-out; -webkit-transition: 450ms all ease-in-out; transition: 450ms all ease-in-out; }
.po-header h3 .closePopover .angle { position: absolute; height: 16px; width: 16px; left: 50%; margin: 9px auto auto -10px; overflow: hidden; border: 1px solid #318eaf; clip: rect(0px, 30px, 8px, 10px); cursor: pointer; }
.po-header h3 .closePopover .angle.angle-up { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.po-header h3 .closePopover:hover { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; -moz-transition: 450ms all ease-in-out; -o-transition: 450ms all ease-in-out; -webkit-transition: 450ms all ease-in-out; transition: 450ms all ease-in-out; }

.po-main { padding: 10px; border-bottom: 1px solid #e3e3e3; }
.po-main p { margin-bottom: 0.75em; color: #3b3b3c; font-size: 0.76em; font-weight: normal; line-height: 1.2em; letter-spacing: -0.025em; }
.po-main h4 { font-size: 0.86em; font-weight: 700; text-transform: uppercase; }
.po-main dt { margin-top: 10px; font-size: 0.76em; font-weight: 700; }
.po-main dd { margin-bottom: 0.5em; font-size: 0.76em; font-weight: 300; }

.po-footer { margin: 9px 0; padding: 9px 10px; }
.po-footer p { color: #3b3b3c; font-size: 0.66em; font-weight: normal; line-height: 1em; letter-spacing: -0.025em; }

#btn-test { display: inline-block; margin: 20px 80px; padding: 8px 20px; text-align: center; background: #e3e3e3; border: 1px solid #9d9c9c; font-size: 0.86em; cursor: pointer; }
#btn-test:active { background: #C0C7CA; }

html, body { height: 100%; }

.wrapper, .reports-section, .reports-area, .reports-group { height: 100%; width: 100%; }

.wrapper { display: table; }

.reports-section { display: table-row; background: #3b3b3c; }

.reports-area { display: table-cell; }

.reports-group { display: table; }

body { font-family: Arial, "Helvetica Neue", "Helvetica Medium", Helvetica, "Arial Neue", sans-serif; font-kerning: normal; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; letter-spacing: 0.025em; }