section.kpi_date { display: flex; justify-content: flex-end; } section.kpi_date .kpi_container { position: relative; margin-top: 20px; margin-right: 0px; justify-content: space-between; font-size: 14px; } section.block-kpi_highlight_block .content-end, section.block-kpi_block .content-end { display: none !important; } section.block-kpi_highlight_block .bg-grey2, section.block-kpi_block .bg-grey2 { padding: 35px 45px; } section.block-kpi_highlight_block .flex, section.block-kpi_block .flex { display: flex; justify-content: space-between; } @media (max-width: 1200px) { section.block-kpi_highlight_block .flex, section.block-kpi_block .flex { flex-wrap: wrap; } } section.block-kpi_highlight_block .flex.flex-3 .content, section.block-kpi_block .flex.flex-3 .content { width: calc(33.33% - 30px); } @media (max-width: 1200px) { section.block-kpi_highlight_block .flex.flex-3 .content, section.block-kpi_block .flex.flex-3 .content { width: 100%; } } section.block-kpi_highlight_block .flex .modalDash, section.block-kpi_block .flex .modalDash { display: none; height: 100vh; width: 100vw; position: fixed; top: 0; left: 0; z-index: 4; background: rgba(0, 0, 0, 0.75); } section.block-kpi_highlight_block .flex .modalDash:hover, section.block-kpi_block .flex .modalDash:hover { cursor: unset; } section.block-kpi_highlight_block .flex .modalDash.show, section.block-kpi_block .flex .modalDash.show { display: flex; width: 100%; justify-content: center; align-items: center; } section.block-kpi_highlight_block .flex .modalDash .innerModal, section.block-kpi_block .flex .modalDash .innerModal { max-width: 1090px; max-height: 566px; border-radius: 5px; width: 90%; height: 90%; background: white; position: relative; padding: 20px; box-sizing: border-box; } section.block-kpi_highlight_block .flex .modalDash .innerModal .banner, section.block-kpi_block .flex .modalDash .innerModal .banner { position: relative; background: #ededed; width: calc(100% + 40px); left: -20px; border-bottom-left-radius: 5px; padding: 20px; border-bottom-right-radius: 5px; display: inline-flex; align-items: center; justify-content: center; top: -50px; } section.block-kpi_highlight_block .flex .modalDash .innerModal .banner p, section.block-kpi_block .flex .modalDash .innerModal .banner p { color: #57555b; margin: 0; margin-right: 20px; } section.block-kpi_highlight_block .flex .modalDash .innerModal .banner a, section.block-kpi_block .flex .modalDash .innerModal .banner a { background-color: #03b3bc; color: #fff; border-radius: 5px; padding: 15px 10px; display: inline-block; font-weight: 600; } section.block-kpi_highlight_block .flex .modalDash .innerModal .banner a svg, section.block-kpi_block .flex .modalDash .innerModal .banner a svg { margin-right: 5px; } section.block-kpi_highlight_block .flex .modalDash .innerModal .title, section.block-kpi_block .flex .modalDash .innerModal .title { font-size: 28px; font-weight: 600; color: #57555b; width: calc(100% - 50px); text-align: center; position: absolute; top: 20px; } section.block-kpi_highlight_block .flex .modalDash .innerModal .title p, section.block-kpi_block .flex .modalDash .innerModal .title p { margin-bottom: 0; } section.block-kpi_highlight_block .flex .modalDash .innerModal .title .description, section.block-kpi_block .flex .modalDash .innerModal .title .description { color: #57555b; font-size: 18px; width: 100%; text-align: center; line-height: 32px; } section.block-kpi_highlight_block .flex .modalDash .innerModal span.closeModal, section.block-kpi_block .flex .modalDash .innerModal span.closeModal { position: absolute; right: 48px; top: -20px; padding: 10px; background: #e2e2e2; color: #57555b; text-align: center; border-radius: 5px; font-weight: bold; } section.block-kpi_highlight_block .flex .modalDash .innerModal span.closeModal:hover, section.block-kpi_block .flex .modalDash .innerModal span.closeModal:hover { cursor: pointer; } section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs, section.block-kpi_block .flex .modalDash .innerModal .graphs { display: flex; justify-content: center; padding-bottom: 75px; align-items: flex-end; height: 100%; } section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .lineContainer, section.block-kpi_block .flex .modalDash .innerModal .graphs .lineContainer { width: 628px; } section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .lineContainer .line-chart, section.block-kpi_block .flex .modalDash .innerModal .graphs .lineContainer .line-chart { max-width: 100%; } section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles { display: block; min-height: 245px; width: 320px; position: relative; align-items: center; margin-bottom: 66px; } @media (max-width: 640px) { section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles { display: none; } } section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .time, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .time { padding-top: 70px; font-size: 14px; text-align: center; width: 222px; } @media (min-width: 640px) and (max-width: 768px) { section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .time, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .time { padding-top: 90px; width: 184px; } } section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer { position: relative; } section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart { width: 160px; height: 160px; border-radius: 80px; } section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .data, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .data, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .data, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .data { flex-direction: column; } section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .data span, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .data span, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .data span, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .data span { color: #fff !important; line-height: 34px; } section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .data p, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .data p, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .data p, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .data p { margin: 2px; color: #fff; font-size: 16px; line-height: 16px; } section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart { position: relative; max-width: 160px; } section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .comparison, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .comparison, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .comparison, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .comparison, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .comparison, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .comparison, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .comparison, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .comparison { background: rgb(244, 244, 244); width: 110px; height: 110px; border-radius: 60px; border: 4px solid #fff; position: absolute; z-index: 2; bottom: -68px; right: -68px; display: flex; justify-content: center; align-items: center; } @media (min-width: 640px) and (max-width: 768px) { section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .comparison, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .comparison, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .comparison, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .comparison, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .comparison, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .comparison, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .comparison, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .comparison { bottom: -88px; right: -28px; } } section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .comparison span, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .comparison span, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .comparison span, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .comparison span, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .comparison span, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .comparison span, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .comparison span, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .comparison span { padding: 15px; text-align: center; font-size: 14px; } section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .comparison span p, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .comparison span p, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .comparison span p, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .comparison span p, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .comparison span p, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .comparison span p, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .comparison span p, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .comparison span p { margin: 0; font-size: 14px; line-height: 16px; } section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .comparison span b, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .comparison span b, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .comparison span b, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .comparison span b, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .comparison span b, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .comparison span b, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .comparison span b, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .comparison span b { font-size: 22px; color: #57555b; position: relative; padding-left: 16px; line-height: 22px; } section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .comparison span b.down::before, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .comparison span b.down::before, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .comparison span b.down::before, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .comparison span b.down::before, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .comparison span b.down::before, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .comparison span b.down::before, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .comparison span b.down::before, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .comparison span b.down::before { content: ""; width: 0; height: 0; position: absolute; left: -6px; top: 10px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-radius: 2px; } section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .comparison span b.down.green::before, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .comparison span b.down.green::before, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .comparison span b.down.green::before, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .comparison span b.down.green::before, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .comparison span b.down.green::before, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .comparison span b.down.green::before, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .comparison span b.down.green::before, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .comparison span b.down.green::before { border-top: 10px solid #95c11f; } section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .comparison span b.down.red::before, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .comparison span b.down.red::before, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .comparison span b.down.red::before, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .comparison span b.down.red::before, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .comparison span b.down.red::before, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .comparison span b.down.red::before, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .comparison span b.down.red::before, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .comparison span b.down.red::before { border-top: 10px solid #f00; } section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .comparison span b.up::before, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .comparison span b.up::before, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .comparison span b.up::before, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .comparison span b.up::before, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .comparison span b.up::before, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .comparison span b.up::before, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .comparison span b.up::before, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .comparison span b.up::before { content: ""; width: 0; height: 0; top: 10px; position: absolute; left: -6px; width: 0; border-radius: 2px; border-left: 10px solid transparent; border-right: 10px solid transparent; } section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .comparison span b.up.green::before, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .comparison span b.up.green::before, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .comparison span b.up.green::before, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .comparison span b.up.green::before, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .comparison span b.up.green::before, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .comparison span b.up.green::before, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .comparison span b.up.green::before, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .comparison span b.up.green::before { border-bottom: 10px solid #95c11f; } section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .comparison span b.up.red::before, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .comparison span b.up.red::before, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .comparison span b.up.red::before, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .comparison span b.up.red::before, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .comparison span b.up.red::before, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .comparison span b.up.red::before, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .comparison span b.up.red::before, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .comparison span b.up.red::before { border-bottom: 10px solid #f00; } section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .data, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .data, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .data, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .data, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .data, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .data, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .data, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .data { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .data span, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .data span, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .data span, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .data span, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .data span, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .data span, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .data span, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .data span { color: #57555b; font-size: 34px; font-weight: bold; } section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .ChartBack, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .ChartBack, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .ChartBack, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .ChartBack, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .ChartBack, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .ChartBack, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .ChartBack, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .ChartBack { position: absolute; z-index: 0; } section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .ChartFront, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .ChartFront, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .ChartFront, section.block-kpi_highlight_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .ChartFront, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .ChartFront, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .ChartFront, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .ChartFront, section.block-kpi_block .flex .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .ChartFront { position: relative; z-index: 1; } section.block-kpi_highlight_block .flex.flex-2 .tileContainer.singlePadding, section.block-kpi_block .flex.flex-2 .tileContainer.singlePadding { width: calc(50% - 30px); } @media (min-width: 991px) and (max-width: 1200px) { section.block-kpi_highlight_block .flex.flex-2 .tileContainer.singlePadding, section.block-kpi_block .flex.flex-2 .tileContainer.singlePadding { width: 100%; margin-bottom: 30px; } } @media (max-width: 767px) { section.block-kpi_highlight_block .flex.flex-2 .tileContainer.singlePadding, section.block-kpi_block .flex.flex-2 .tileContainer.singlePadding { width: 100%; margin-bottom: 30px; } } section.block-kpi_highlight_block .flex .tileContainer, section.block-kpi_block .flex .tileContainer { margin: 20px 0; padding: 20px; box-sizing: border-box; background: #fff; border-radius: 5px; position: relative; } section.block-kpi_highlight_block .flex .tileContainer .dated, section.block-kpi_block .flex .tileContainer .dated { margin-top: 20px; } section.block-kpi_highlight_block .flex .tileContainer .exploreModal, section.block-kpi_block .flex .tileContainer .exploreModal { position: relative; display: flex; text-align: right; justify-content: flex-end; width: auto; min-height: 35px; margin-top: -10px; margin-right: -8px; align-items: center; } section.block-kpi_highlight_block .flex .tileContainer .exploreModal .openModal, section.block-kpi_block .flex .tileContainer .exploreModal .openModal { display: flex; align-items: center; } section.block-kpi_highlight_block .flex .tileContainer .exploreModal .openModal:hover, section.block-kpi_block .flex .tileContainer .exploreModal .openModal:hover { cursor: pointer; } section.block-kpi_highlight_block .flex .tileContainer .exploreModal .openModal p, section.block-kpi_block .flex .tileContainer .exploreModal .openModal p { margin: 0; margin: 0px; display: inline-block; } section.block-kpi_highlight_block .flex .tileContainer .exploreModal .openModal svg, section.block-kpi_block .flex .tileContainer .exploreModal .openModal svg { display: inline-block; margin-right: 5px; } section.block-kpi_highlight_block .flex .tileContainer.singlePadding, section.block-kpi_block .flex .tileContainer.singlePadding { width: calc(33.33% - 30px); } @media (max-width: 1200px) { section.block-kpi_highlight_block .flex .tileContainer.singlePadding, section.block-kpi_block .flex .tileContainer.singlePadding { width: calc(50% - 30px); } } @media (max-width: 767px) { section.block-kpi_highlight_block .flex .tileContainer.singlePadding, section.block-kpi_block .flex .tileContainer.singlePadding { width: 100%; margin-bottom: 30px; } } section.block-kpi_highlight_block .flex .tileContainer .bottom, section.block-kpi_block .flex .tileContainer .bottom { padding-bottom: 20px; } section.block-kpi_highlight_block .flex .tileContainer .bottom .title, section.block-kpi_block .flex .tileContainer .bottom .title { text-align: center; font-size: 24px; font-weight: 600; line-height: 26px; color: #57555b; } section.block-kpi_highlight_block .flex .tileContainer .bottom .title p, section.block-kpi_block .flex .tileContainer .bottom .title p { margin: 0 0; } section.block-kpi_highlight_block .flex .tileContainer .bottom .time, section.block-kpi_block .flex .tileContainer .bottom .time { text-align: center; font-size: 16px; } section.block-kpi_highlight_block .flex .tileContainer .tileControl, section.block-kpi_block .flex .tileContainer .tileControl { display: flex; flex-direction: column; height: 100%; justify-content: space-between; } section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles, section.block-kpi_block .flex .tileContainer .tileControl .tiles { display: flex; min-height: 245px; position: relative; align-items: center; justify-content: center; } section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .lineChartContainer, section.block-kpi_block .flex .tileContainer .tileControl .tiles .lineChartContainer { position: relative; padding-left: 10%; } @media (min-width: 768px) and (max-width: 991px) { section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .lineChartContainer, section.block-kpi_block .flex .tileContainer .tileControl .tiles .lineChartContainer { padding-left: 7%; } } @media (max-width: 640px) { section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .lineChartContainer, section.block-kpi_block .flex .tileContainer .tileControl .tiles .lineChartContainer { display: none; } } section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .lineChartContainer p, section.block-kpi_block .flex .tileContainer .tileControl .tiles .lineChartContainer p { margin-top: 4px; margin-bottom: 4px; color: #57555b; font-size: 14px; } section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .lineChartContainer .lineChart, section.block-kpi_block .flex .tileContainer .tileControl .tiles .lineChartContainer .lineChart { width: 300px; height: 168px; } @media (max-width: 1200px) { section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .lineChartContainer .lineChart, section.block-kpi_block .flex .tileContainer .tileControl .tiles .lineChartContainer .lineChart { width: 250px; height: 140px; } } section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .lineChartContainer .lineChart .line-chart, section.block-kpi_block .flex .tileContainer .tileControl .tiles .lineChartContainer .lineChart .line-chart { max-width: 300px; max-height: 100%; background: rgb(244, 244, 244); border-radius: 5px; } section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .dated, section.block-kpi_block .flex .tileContainer .tileControl .tiles .dated { text-align: center; font-size: 16px; } section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .dated.comparisonDate, section.block-kpi_block .flex .tileContainer .tileControl .tiles .dated.comparisonDate { position: absolute; right: -52px; bottom: -4px; } section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer { position: relative; } section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer.comparison, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer.comparison, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer.comparison, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer.comparison { height: 228px; left: -30px; } @media (min-width: 768px) and (max-width: 991px) { section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer.comparison, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer.comparison, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer.comparison, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer.comparison { left: -10px; } } section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer.comparison .doughnutChart, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer.comparison .doughnutChart, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer.comparison .doughnutChart, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer.comparison .doughnutChart { max-width: 144px; } section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer.comparison .circleChart, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer.comparison .circleChart, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer.comparison .circleChart, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer.comparison .circleChart { width: 144px; height: 144px; } section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart { width: 160px; height: 160px; border-radius: 80px; } section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .data, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .data, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .data, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .data { flex-direction: column; } section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .data span, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .data span, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .data span, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .data span { color: #fff !important; line-height: 34px; } section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .data p, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .data p, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .data p, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .data p { margin: 2px; color: #fff; font-size: 16px; line-height: 16px; } section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart { position: relative; max-width: 160px; } section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison { background: rgb(244, 244, 244); width: 110px; height: 110px; border-radius: 60px; border: 4px solid #fff; position: absolute; z-index: 2; bottom: -68px; right: -68px; display: flex; justify-content: center; align-items: center; } @media (min-width: 768px) and (max-width: 991px) { section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison { bottom: -88px; right: -28px; } } section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison span, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison span, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison span, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison span, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison span, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison span, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison span, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison span { padding: 15px; text-align: center; font-size: 14px; } section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison span p, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison span p, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison span p, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison span p, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison span p, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison span p, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison span p, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison span p { margin: 0; font-size: 14px; line-height: 16px; } section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison span b, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison span b, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison span b, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison span b, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison span b, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison span b, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison span b, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison span b { font-size: 22px; color: #57555b; position: relative; padding-left: 16px; line-height: 22px; } section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison span b.down::before, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison span b.down::before, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison span b.down::before, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison span b.down::before, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison span b.down::before, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison span b.down::before, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison span b.down::before, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison span b.down::before { content: ""; width: 0; height: 0; position: absolute; left: -6px; top: 10px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-radius: 2px; } section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison span b.down.green::before, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison span b.down.green::before, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison span b.down.green::before, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison span b.down.green::before, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison span b.down.green::before, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison span b.down.green::before, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison span b.down.green::before, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison span b.down.green::before { border-top: 10px solid #95c11f; } section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison span b.down.red::before, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison span b.down.red::before, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison span b.down.red::before, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison span b.down.red::before, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison span b.down.red::before, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison span b.down.red::before, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison span b.down.red::before, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison span b.down.red::before { border-top: 10px solid #f00; } section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison span b.up::before, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison span b.up::before, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison span b.up::before, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison span b.up::before, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison span b.up::before, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison span b.up::before, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison span b.up::before, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison span b.up::before { content: ""; width: 0; height: 0; top: 10px; position: absolute; left: -6px; width: 0; border-radius: 2px; border-left: 10px solid transparent; border-right: 10px solid transparent; } section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison span b.up.green::before, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison span b.up.green::before, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison span b.up.green::before, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison span b.up.green::before, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison span b.up.green::before, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison span b.up.green::before, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison span b.up.green::before, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison span b.up.green::before { border-bottom: 10px solid #95c11f; } section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison span b.up.red::before, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison span b.up.red::before, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison span b.up.red::before, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison span b.up.red::before, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison span b.up.red::before, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison span b.up.red::before, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison span b.up.red::before, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison span b.up.red::before { border-bottom: 10px solid #f00; } section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .data, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .data, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .data, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .data, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .data, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .data, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .data, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .data { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .data span, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .data span, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .data span, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .data span, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .data span, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .data span, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .data span, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .data span { color: #57555b; font-size: 34px; font-weight: bold; } section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .ChartBack, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .ChartBack, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .ChartBack, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .ChartBack, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .ChartBack, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .ChartBack, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .ChartBack, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .ChartBack { position: absolute; z-index: 0; } section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .ChartFront, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .ChartFront, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .ChartFront, section.block-kpi_highlight_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .ChartFront, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .ChartFront, section.block-kpi_block .flex .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .ChartFront, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .ChartFront, section.block-kpi_block .flex .tileContainer .tileControl .tiles .circleChartContainer .circleChart .ChartFront { position: relative; z-index: 1; } .block-dashboard .bg-white .pull-left { margin-left: calc(-1 * (100% + 100px) / 3 - 70px); } @media (min-width: 1500px) { .block-dashboard .bg-white .pull-left { margin-left: 0px; } } @media (min-width: 1200px) and (max-width: 1499px) { .block-dashboard .bg-white .pull-left { margin-left: calc(-1 * (100% + 100px) / 3 - 70px); } } @media (min-width: 992px) and (max-width: 1199px) { .block-dashboard .bg-white .pull-left { margin-left: calc(-1 * (100% + 100px) / 1.95 - 70px); } } @media (max-width: 991px) { .block-dashboard .bg-white .pull-left { margin: 0 -75px 0 -65px; } .block-dashboard .bg-white .performanCharts { max-width: 100%; } .block-dashboard .bg-white .performanCharts .pull-left { margin-top: -30px; } .block-dashboard .bg-white .performanCharts .pull-left:first-of-type { margin-top: 0px; } } @media (max-width: 768px) { .block-dashboard .bg-white .pull-left { margin: 0 -30px 0 -25px; } .block-dashboard .bg-white .performanCharts { max-width: 100%; } .block-dashboard .bg-white .performanCharts .pull-left { margin-top: -30px; } .block-dashboard .bg-white .performanCharts .pull-left:first-of-type { margin-top: 0px; } } .block-dashboard .bg-grey2 { padding: 30px; border-radius: 4px; } .block-dashboard .bg-grey2 h2.dots { margin: 0 0 20px; } .block-dashboard .bg-grey2 h2.dots::after { content: ""; background-image: radial-gradient(circle closest-side, #fff 80%, rgba(0, 0, 0, 0) 10%); } .strategiesConteainer { display: flex; justify-content: space-between; margin-top: 30px; margin-bottom: 30px; } @media (max-width: 1200px) { .strategiesConteainer { flex-wrap: wrap; } } .strategiesConteainer .strategies { padding: 0 20px; text-align: center; } @media (max-width: 1200px) { .strategiesConteainer .strategies { padding: 0 0px; width: 50%; } } #dashboard-tabs { text-align: right; padding: 0 30px; } #dashboard-tabs a, #dashboard-tabs span { display: inline-block; font-size: 18px; padding: 7px 20px 8px; border-radius: 4px 4px 0 0; margin-left: 10px; color: #fff; font-weight: 700; background: #e83273; max-width: 250px; text-align: center; text-decoration: none; } #dashboard-tabs a.active, #dashboard-tabs span.active { background: #e2e2e2 !important; color: black; text-decoration: none; } #dashboard-tabs a:hover, #dashboard-tabs span:hover { background: #d30934; text-decoration: none; } .performanCharts { max-width: 100%; } .performanCharts.tab-1, .performanCharts.tab-2, .performanCharts.tab-3 { display: none; } .performanCharts.tab-1.active, .performanCharts.tab-2.active, .performanCharts.tab-3.active { display: block; } .performanCharts .pull-left { margin-top: -30px; } .performanCharts .pull-left:first-of-type { margin-top: 0px; } section.block-kpi_dashboard { padding-bottom: 0px !important; } section.block-kpi_dashboard #dashboard-tabs { /* TODO: remove once this feature goes live */ display: none; } section.block-kpi_dashboard + section { margin-top: 120px !important; } section.kpi_dashboard p, section.kpi_dashboard span, section.kpi_dashboard div { font-family: "omnes-pro", sans-serif; } section.kpi_dashboard .modalDash { display: none; height: 100vh; width: 100vw; position: fixed; top: 0; left: 0; z-index: 4; background: rgba(0, 0, 0, 0.75); } section.kpi_dashboard .modalDash:hover { cursor: unset; } section.kpi_dashboard .modalDash.show { display: flex; width: 100%; justify-content: center; align-items: center; } section.kpi_dashboard .modalDash .innerModal { max-width: 1090px; max-height: 566px; border-radius: 5px; width: 90%; height: 90%; background: white; position: relative; padding: 20px; box-sizing: border-box; } section.kpi_dashboard .modalDash .innerModal .banner { position: relative; background: #ededed; width: calc(100% + 40px); left: -20px; border-bottom-left-radius: 5px; padding: 20px; border-bottom-right-radius: 5px; display: inline-flex; align-items: center; justify-content: center; top: -50px; } section.kpi_dashboard .modalDash .innerModal .banner p { color: #57555b; margin: 0; margin-right: 20px; } section.kpi_dashboard .modalDash .innerModal .banner a { background-color: #03b3bc; color: #fff; border-radius: 5px; padding: 15px 10px; display: inline-block; font-weight: 600; } section.kpi_dashboard .modalDash .innerModal .banner a svg { margin-right: 5px; } section.kpi_dashboard .modalDash .innerModal .title { font-size: 28px; font-weight: 600; color: #57555b; width: calc(100% - 50px); text-align: center; position: absolute; top: 20px; } section.kpi_dashboard .modalDash .innerModal .title p { margin-bottom: 0; } section.kpi_dashboard .modalDash .innerModal .title .description { color: #57555b; font-size: 18px; width: 100%; text-align: center; line-height: 32px; } section.kpi_dashboard .modalDash .innerModal span.closeModal { position: absolute; right: 48px; top: -20px; padding: 10px; background: #e2e2e2; color: #57555b; text-align: center; border-radius: 5px; font-weight: bold; } section.kpi_dashboard .modalDash .innerModal span.closeModal:hover { cursor: pointer; } section.kpi_dashboard .modalDash .innerModal .graphs { display: flex; justify-content: center; align-items: flex-end; padding-bottom: 66px; height: 100%; } section.kpi_dashboard .modalDash .innerModal .graphs .lineContainer { width: 628px; } section.kpi_dashboard .modalDash .innerModal .graphs .lineContainer .line-chart { max-width: 100%; } section.kpi_dashboard .modalDash .innerModal .graphs .tiles { display: block; min-height: 245px; width: 320px; position: relative; align-items: center; } @media (max-width: 640px) { section.kpi_dashboard .modalDash .innerModal .graphs .tiles { display: none; } } section.kpi_dashboard .modalDash .innerModal .graphs .tiles .time { padding-top: 70px; font-size: 14px; text-align: center; width: 222px; } @media (min-width: 640px) and (max-width: 768px) { section.kpi_dashboard .modalDash .innerModal .graphs .tiles .time { padding-top: 90px; width: 184px; } } section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer { position: relative; } section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart { width: 160px; height: 160px; border-radius: 80px; } section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .data, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .data { flex-direction: column; } section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .data span, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .data span { color: #fff !important; line-height: 34px; } section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .data p, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .data p { margin: 2px; color: #fff; font-size: 16px; line-height: 16px; } section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart { position: relative; max-width: 160px; } section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .comparison, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .comparison, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .comparison, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .comparison { background: rgb(244, 244, 244); width: 110px; height: 110px; border-radius: 60px; border: 4px solid #fff; position: absolute; z-index: 2; bottom: -68px; right: -68px; display: flex; justify-content: center; align-items: center; } @media (min-width: 640px) and (max-width: 768px) { section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .comparison, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .comparison, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .comparison, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .comparison { bottom: -88px; right: -28px; } } section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .comparison span, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .comparison span, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .comparison span, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .comparison span { padding: 15px; text-align: center; font-size: 14px; } section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .comparison span p, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .comparison span p, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .comparison span p, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .comparison span p { margin: 0; font-size: 14px; line-height: 16px; } section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .comparison span b, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .comparison span b, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .comparison span b, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .comparison span b { font-size: 22px; color: #57555b; position: relative; padding-left: 16px; } section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .comparison span b.down::before, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .comparison span b.down::before, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .comparison span b.down::before, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .comparison span b.down::before { content: ""; width: 0; height: 0; position: absolute; left: -6px; top: 10px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-radius: 2px; } section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .comparison span b.down.green::before, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .comparison span b.down.green::before, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .comparison span b.down.green::before, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .comparison span b.down.green::before { border-top: 10px solid #95c11f; } section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .comparison span b.down.red::before, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .comparison span b.down.red::before, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .comparison span b.down.red::before, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .comparison span b.down.red::before { border-top: 10px solid #f00; } section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .comparison span b.up::before, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .comparison span b.up::before, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .comparison span b.up::before, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .comparison span b.up::before { content: ""; width: 0; height: 0; top: 10px; position: absolute; left: -6px; width: 0; border-radius: 2px; border-left: 10px solid transparent; border-right: 10px solid transparent; } section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .comparison span b.up.green::before, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .comparison span b.up.green::before, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .comparison span b.up.green::before, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .comparison span b.up.green::before { border-bottom: 10px solid #95c11f; } section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .comparison span b.up.red::before, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .comparison span b.up.red::before, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .comparison span b.up.red::before, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .comparison span b.up.red::before { border-bottom: 10px solid #f00; } section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .data, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .data, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .data, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .data { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .data span, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .data span, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .data span, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .data span { color: #57555b; font-size: 34px; font-weight: bold; } section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .ChartBack, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .ChartBack, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .ChartBack, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .ChartBack { position: absolute; z-index: 0; } section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .doughnutChart .ChartFront, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .doughnutChartContainer .circleChart .ChartFront, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .doughnutChart .ChartFront, section.kpi_dashboard .modalDash .innerModal .graphs .tiles .circleChartContainer .circleChart .ChartFront { position: relative; z-index: 1; } section.kpi_dashboard .kpi_container { display: flex; position: relative; align-items: stretch; margin-right: -30px; justify-content: space-between; } @media (max-width: 767px) { section.kpi_dashboard .kpi_container { flex-wrap: wrap; } } section.kpi_dashboard .kpi_container.reverse { flex-direction: row-reverse; } section.kpi_dashboard .kpi_container .tileContainer { padding: 20px; box-sizing: border-box; background: #fff; border-radius: 5px; position: relative; width: calc(66.66% - 30px); margin-right: 30px; } section.kpi_dashboard .kpi_container .tileContainer .dated { margin-top: 20px; } @media (max-width: 767px) { section.kpi_dashboard .kpi_container .tileContainer:nth-last-of-type(2) { margin-top: 30px; } } section.kpi_dashboard .kpi_container .tileContainer.emptyTile { background: #57555b; display: flex; justify-content: center; } section.kpi_dashboard .kpi_container .tileContainer.emptyTile .kpiError { align-self: center; color: #ffffff; font-weight: bold; text-transform: uppercase; font-size: 25px; } @media (max-width: 767px) { section.kpi_dashboard .kpi_container .tileContainer { width: 100%; } } section.kpi_dashboard .kpi_container .tileContainer .exploreModal { position: relative; display: flex; text-align: right; justify-content: flex-end; width: auto; margin-top: -10px; margin-right: -8px; min-height: 35px; align-items: center; } section.kpi_dashboard .kpi_container .tileContainer .exploreModal .openModal { display: flex; align-items: center; } section.kpi_dashboard .kpi_container .tileContainer .exploreModal .openModal:hover { cursor: pointer; } section.kpi_dashboard .kpi_container .tileContainer .exploreModal .openModal p { margin: 0; margin: 0px; display: inline-block; } section.kpi_dashboard .kpi_container .tileContainer .exploreModal .openModal svg { display: inline-block; margin-right: 5px; } section.kpi_dashboard .kpi_container .tileContainer.singlePadding { width: calc(33.33% - 30px); } @media (max-width: 767px) { section.kpi_dashboard .kpi_container .tileContainer.singlePadding { width: 100%; } section.kpi_dashboard .kpi_container .tileContainer.singlePadding:first-of-type { margin-bottom: 0px; } section.kpi_dashboard .kpi_container .tileContainer.singlePadding:last-of-type { margin-top: 30px; } } section.kpi_dashboard .kpi_container .tileContainer .bottom { padding-bottom: 20px; } section.kpi_dashboard .kpi_container .tileContainer .bottom .title { text-align: center; font-size: 24px; font-weight: 600; line-height: 26px; color: #57555b; } section.kpi_dashboard .kpi_container .tileContainer .bottom .title p { margin: 0 0; } section.kpi_dashboard .kpi_container .tileContainer .bottom .time { text-align: center; font-size: 16px; } section.kpi_dashboard .kpi_container .tileContainer .tileControl { display: flex; flex-direction: column; height: 100%; justify-content: space-between; } section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles { display: flex; min-height: 245px; position: relative; align-items: center; justify-content: center; } section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .lineChartContainer { position: relative; padding-left: 10%; } @media (min-width: 768px) and (max-width: 991px) { section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .lineChartContainer { padding-left: 7%; } } @media (max-width: 640px) { section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .lineChartContainer { display: none; } } section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .lineChartContainer p { margin-top: 4px; margin-bottom: 4px; color: #57555b; font-size: 14px; } section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .lineChartContainer .lineChart { width: 300px; height: 168px; } @media (max-width: 1200px) { section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .lineChartContainer .lineChart { width: 250px; height: 140px; } } section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .lineChartContainer .lineChart .line-chart { max-width: 300px; max-height: 100%; background: rgb(244, 244, 244); border-radius: 5px; } section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .dated { text-align: center; font-size: 16px; } section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .dated.comparisonDate { position: absolute; right: -52px; bottom: -4px; } section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer { position: relative; } section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer.comparison, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer.comparison { height: 228px; left: -30px; } @media (min-width: 768px) and (max-width: 991px) { section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer.comparison, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer.comparison { left: -10px; } } section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer.comparison .doughnutChart, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer.comparison .doughnutChart { max-width: 144px; } section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer.comparison .circleChart, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer.comparison .circleChart { width: 144px; height: 144px; } section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .circleChart { width: 160px; height: 160px; border-radius: 80px; } section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .data, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .circleChart .data { flex-direction: column; } section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .data span, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .circleChart .data span { color: #fff !important; line-height: 34px; } section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .data p, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .circleChart .data p { margin: 2px; color: #fff; font-size: 16px; line-height: 16px; } section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .circleChart { position: relative; max-width: 160px; } section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison { background: rgb(244, 244, 244); width: 110px; height: 110px; border-radius: 60px; border: 4px solid #fff; position: absolute; z-index: 2; bottom: -68px; right: -68px; display: flex; justify-content: center; align-items: center; } @media (min-width: 768px) and (max-width: 991px) { section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison { bottom: -88px; right: -28px; } } section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison span, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison span, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison span, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison span { padding: 13px; text-align: center; font-size: 14px; } section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison span p, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison span p, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison span p, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison span p { margin: 0; font-size: 14px; line-height: 16px; } section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison span p.daysunit, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison span p.daysunit, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison span p.daysunit, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison span p.daysunit { margin-left: 2px; display: block; margin-bottom: 5px; margin-top: -8px; } section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison span b, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison span b, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison span b, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison span b { font-size: 22px; color: #57555b; position: relative; padding-left: 15px; } section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison span b.down::before, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison span b.down::before, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison span b.down::before, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison span b.down::before { content: ""; width: 0; height: 0; position: absolute; left: -6px; top: 10px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-radius: 2px; } section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison span b.down.green::before, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison span b.down.green::before, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison span b.down.green::before, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison span b.down.green::before { border-top: 10px solid #95c11f; } section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison span b.down.red::before, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison span b.down.red::before, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison span b.down.red::before, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison span b.down.red::before { border-top: 10px solid #f00; } section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison span b.up::before, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison span b.up::before, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison span b.up::before, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison span b.up::before { content: ""; width: 0; height: 0; top: 10px; position: absolute; left: -6px; width: 0; border-radius: 2px; border-left: 10px solid transparent; border-right: 10px solid transparent; } section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison span b.up.green::before, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison span b.up.green::before, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison span b.up.green::before, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison span b.up.green::before { border-bottom: 10px solid #95c11f; } section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .comparison span b.up.red::before, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .comparison span b.up.red::before, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .comparison span b.up.red::before, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .circleChart .comparison span b.up.red::before { border-bottom: 10px solid #f00; } section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .data, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .data, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .data, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .circleChart .data { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .data span, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .data span, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .data span, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .circleChart .data span { color: #57555b; font-size: 34px; font-weight: bold; } section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .ChartBack, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .ChartBack, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .ChartBack, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .circleChart .ChartBack { position: absolute; z-index: 0; } section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .doughnutChart .ChartFront, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .doughnutChartContainer .circleChart .ChartFront, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .doughnutChart .ChartFront, section.kpi_dashboard .kpi_container .tileContainer .tileControl .tiles .circleChartContainer .circleChart .ChartFront { position: relative; z-index: 1; } /*# sourceMappingURL=dashboard.css.map*/