powerup.css

/*
Copyright 2020 Dynatrace LLC

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
*/
.threeBlink {
  animation-iteration-count: 3 !important;
}

div.powerup-color-critical {
  background-color: red;
}

span.powerup-color-critical,
h1.powerup-color-critical {
  color: red;
}

@keyframes powerup-color-critical-div-blink {
  0% {
    background-color: darkred;
  }
  50% {
    background-color: red;
  }
  100% {
    background-color: darkred;
  }
}

@keyframes powerup-color-critical-span-blink {
  0% {
    color: darkred;
  }
  50% {
    color: red;
  }
  100% {
    color: darkred;
  }
}

div.powerup-color-critical-blink {
  animation-name: powerup-color-critical-div-blink;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  background-color: red;
}

span.powerup-color-critical-blink {
  animation-name: powerup-color-critical-span-blink;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  color: red;
}

div.powerup-color-warning {
  background-color: yellow;
}

span.powerup-color-warning,
h1.powerup-color-warning {
  color: yellow;
}

@keyframes powerup-color-warning-div-blink {
  0% {
    background-color: yellow;
  }
  50% {
    background-color: goldenrod;
  }
  100% {
    background-color: yellow;
  }
}

@keyframes powerup-color-warning-span-blink {
  0% {
    color: yellow;
  }
  50% {
    color: goldenrod;
  }
  100% {
    color: yellow;
  }
}

div.powerup-color-warning-blink {
  animation-name: powerup-color-div-warning;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  background-color: yellow;
}

span.powerup-color-warning-blink {
  animation-name: powerup-color-span-warning;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  color: yellow;
}

div.powerup-color-normal {
  background-color: green;
}

span.powerup-color-normal,
h1.powerup-color-normal {
  color: green;
}

.powerup-svg-critical {
  fill: red;
}

@keyframes powerup-svg-critical-blink {
  0% {
    fill: darkred;
  }
  50% {
    fill: red;
  }
  100% {
    fill: darkred;
  }
}

.powerup-svg-critical-blink {
  animation-name: powerup-svg-critical-blink;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  fill: red;
}

.powerup-svg-warning {
  fill: yellow;
}

@keyframes powerup-svg-warning-blink {
  0% {
    fill: yellow;
  }
  50% {
    fill: goldenrod;
  }
  100% {
    fill: yellow;
  }
}

.powerup-svg-warning-blink {
  animation-name: powerup-svg-warning-blink;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  fill: yellow;
}

.powerup-svg-normal {
  fill: green;
}

.powerup-color-nan {
  color: #b7b7b7;
}

.powerup-svg-nan {
  fill: #b7b7b7;
}

.powerup-markup {
  display: none;
}

.country:hover {
  fill: blue !important;
  cursor: crosshair;
}

.powerupMapTooltip {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 1000;
  text-align: right;
}

.geoText,
.valueText {
  font-size: large;
}

.powerupLineTooltip {
  display: flex;
}

.powerupLineTooltip .dot {
  border-radius: 3px;
}

.powerupLineTooltip div {
  flex: 0;
  /*white-space: nowrap;*/
}

.powerupLineTooltip .spacer {
  flex: 1;
}

.powerup-sankey-icon {
  width: 20px;
  height: 20px;
  background-color: rgba(0, 0, 0, 0.2);
}

.powerup-icon-yellow {
  fill: #ffe11c;
}

.powerup-icon-red {
  fill: #dc172a;
}

.powerup-icon-green {
  fill: #2ab06f;
}

.powerup-icon-white {
  fill: white;
}

.powerup-icon-purple {
  fill: #7c38a1;
}

.powerup-icon-teal {
  fill: #00a1b2;
}

.powerup-icon-lightpurple {
  fill: #a972cc;
}

.powerup-icon-gray {
  fill: #b7b7b7;
}

.powerup-sankey-tooltip {
  z-index: 1100;
  background: white;
  opacity: 0.8;
  border: 1px solid #7c38a1;
  border-radius: 3px;
  padding: 5px;
}

.powerupFunnelContainer {
  height: 100%;
  width: 100%;
  z-index: 999;
  position: absolute;
}

.powerupFunnelLabel {
  position: absolute;
  /*width: 100%;*/
  text-align: center;
}

.powerupTileDrillin {
  cursor: pointer;
}

.powerupPlotBackground,
.powerupHighchartsContainer {
  cursor: default;
}

.powerupHighchartsContainer .highcharts-sankey-series .highcharts-node,
.powerupHighchartsContainer .highcharts-sankey-series .highcharts-data-label * {
  cursor: context-menu;
}

.powerupHighchartsContainer .highcharts-sankey-series .highcharts-link {
  cursor: zoom-in;
}

.powerupSankeyDetailPopup {
  z-index: 1200;
  background: #242424;
  opacity: 0.95;
  height: 80%;
  width: 90%;
  margin: 50px 20px;
  overflow: auto !important;
  padding: 10px;
  font-family: BerninaSansWeb, sans-serif;
  display: flex;
  flex-direction: column;
}

.powerupSankeyDetailPopup > div:not(.powerupSankeyDisclaimer) {
  flex: 1;
}

.powerupSankeyDetailPopup a {
  color: #00b9cc;
  text-decoration: none;
}

.powerupSankeyDetailPopup a:hover {
  cursor: pointer;
  text-decoration: underline;
}

.highcharts-exporting-group {
  visibility: hidden;
}

.highcharts-menu {
  overflow: visible !important;
}

.powerupVisible {
  visibility: visible;
}

.powerupHeatmap {
  font-family: BerninaSansWeb, sans-serif !important;
}

.powerupMath,
.powerupVlookup,
.powerupDate {
  display: flex;
  padding-left: 20px;
  flex-direction: column;
  justify-content: center;
}

.powerupMathText,
.powerupDateText {
  color: #898989;
  padding-left: 20px;
  font-size: 14px;
  font-weight: 500;
}

.powerupStdev span {
  font-size: 32px;
}

.powerupTable {
  z-index: 1000;
  padding-right: 10px;
}

.powerupTableScroll {
  overflow: auto;
}

.powerupTableScroll > div > div:last-of-type {
  padding-right: 5px;
}

.powerupTableScroll::-webkit-scrollbar
{
  width: 6px;
  background-color: transparent;
}

.powerupTableScroll::-webkit-scrollbar-thumb
{
  border-radius: 10px;
  box-shadow: none;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
  background-color: #00b9cc;
  background-image: -webkit-linear-gradient(top,
    #00848e 0%,
    #00b9cc 50%,
    #00848e 100%)
}

.powerupTableScroll::-webkit-scrollbar-track
{
  box-shadow: none;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
  background-color: transparent;
  border-radius: 10px;
  border: 1px solid #454646;
  margin-top:10px;
}

.powerupTable span {
  user-select: text;
}

.powerupTable:hover {
  cursor: default;
}

.powerupTable a.powerupTableCol,
.powerupTable a.powerupTableCol:hover {
  color: #00b9cc !important;
  font-size: 1.1em !important;
  text-decoration: none;
  z-index: 1001;
}

.powerupTable a,
.powerupTable a:hover {
  color: #fff;
  text-decoration: underline;
}

.powerupTable a.powerupTableCol:hover:not(.powerupTableColAsc):not(.powerupTableColDesc) {
  cursor: n-resize;
}

.powerupTableColAsc:hover {
  cursor: s-resize;
}

.powerupTableColDesc:hover {
  cursor: n-resize;
}

.powerupTableColDesc::after {
  content: "";
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #00b9cc;
  position: absolute;
  margin-left: 5px;
}

.powerupTableColAsc::after {
  content: "";
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #00b9cc;
  position: absolute;
  margin-left: 5px;
}

.powerupTableMenu {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  border-radius: 3px;
}

.powerupTableMenu.on {
  background-color: #454646;
}

.powerupTableMenu > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
}

.powerupTableButton {
  color: white;
  text-decoration: none;
  border-radius: 3px;
  border: 1px #00b9cc solid;
  background: #454646;
  padding: 3px;
  width: 17px;
  height: 17px;
  display: table;
  z-index: 1101;
  margin: 5px;
  margin-top: 0px;
  text-align: center;
}

.powerupTableButton:hover {
  background-color: #6a6b6b;
  color: white;
  text-decoration: none;
}

.powerupBackground {
  background-repeat: no-repeat;
  /*background-attachment: fixed; */
  background-size: cover;
}

.powerupImage {
  width: 100%;
  height: 100%;
}

.powerupTooltip {
  position: absolute;
  pointer-events: none;
  border: 1px solid #00a1b2;
  border-radius: 3px;
  background-color: white;
  opacity: 0;
  /*visibility: hidden;*/
  z-index: 9000;
  color: rgb(51, 51, 51);
  text-align: center;
  padding: 5px 0px;
  min-width: 80px;
}

.powerupTooltip::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  /*border-color: #00a1b2 transparent transparent transparent;*/
  border-color: transparent;
}

.grid-tile:hover .powerupTooltip,
.powerupTooltipHover {
  /*visibility: visible;*/
  opacity: 0.8;
}

tspan.powerupFilterProp,
.powerupSankeyDetailPopup a.powerupFilterProp {
  color: #a972cc;
  font-weight: bold;
  cursor: zoom-in;
  text-decoration: none;
}

tspan.powerupFilterProp {
  fill: #a972cc;
  font-weight: bold;
  cursor: zoom-in;
  text-decoration: none;
}

tspan.powerupFilterProp:hover,
.powerupSankeyDetailPopup a.powerupFilterProp:hover {
  text-decoration: underline;
}

.powerupRemoveFilter {
  cursor: zoom-out;
}

.powerupSankeyDetailPopup th {
  text-align: left;
}

.powerupSankeyDetailPopup tr {
  vertical-align: top;
}

.powerupHide {
  display: none !important;
}

.powerupSankeyDropdown {
  position: absolute;
  z-index: 1050;
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
  font-size: 12px;
  height: 40px;
  width: 180px;
  color: black;
}

.powerupSankeyDisclaimer {
  margin-top: 40px;
  font-size: smaller;
  text-align: right;
  color: white;
  font-style: italic;
  font-family: sans-serif;
}

.powerupSankeyDisclaimer > div:first-of-type {
  flex-grow: 1;
}

.powerupSankeyDisclaimer > div:last-of-type {
  flex-grow: 0;
}

ul.powerupNoEye {
  list-style-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBmaWxsPSIjZmZmZmZmIiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiPjxwYXRoIGQ9Ik0yNDAuNjY3IDMyMi4yNDVBNjguMTgxIDY4LjE4MSAwIDAwMjU1Ljk5NSAzMjRDMjkzLjU1NyAzMjQgMzI0IDI5My41NTcgMzI0IDI1NmMwLTUuMjc0LS42Mi0xMC40MDEtMS43NTctMTUuMzMxbC04MS41NzYgODEuNTc2ek00MjguNTM0IDY2LjQ5NmMtNy44MS03LjgxLTIwLjQ3My03LjgxLTI4LjI4NCAwbC01OS44NSA1OS44NDlDMzE1LjY3OCAxMTUuMTY4IDI4OC4xMTUgMTA4IDI1OC4wNjYgMTA4aC00LjEzMkMxMTcuMzQ3IDEwOCAzMiAyNTYgMzIgMjU2czMwLjEwNiA1Mi42NzYgODMuNTcgOTUuMTc2TDY2LjQ5NCA0MDAuMjVjLTcuODEgNy44MS03LjgxIDIwLjQ3NCAwIDI4LjI4NCA3LjgxIDcuODEgMjAuNDc0IDcuODEgMjguMjg1IDBMNDI4LjUzNCA5NC43OGM3LjgxLTcuODEgNy44MS0yMC40NzQgMC0yOC4yODR6TTE0OCAyNTZjMC0yOC44NSAxMS4yMy01NS45NyAzMS42Mi03Ni4zNjVDMjAwLjAxNSAxNTkuMjM1IDIyNy4xMzggMTQ4IDI1NS45OTUgMTQ4YzE3LjgzOCAwIDM1LjAxNCA0LjMgNTAuMzUgMTIuNGwtMzAuNTM4IDMwLjUzOUE2Ny45MTUgNjcuOTE1IDAgMDAyNTUuOTk1IDE4OEMyMTguNDIyIDE4OCAxODggMjE4LjQ0MyAxODggMjU2YzAgNi44OTMgMS4wMyAxMy41NDIgMi45MzcgMTkuODA5bC0zMC41NCAzMC41NEMxNTIuMjk3IDI5MS4wMTQgMTQ4IDI3My44MzkgMTQ4IDI1NnoiPjwvcGF0aD48cGF0aCBkPSJNMzk5LjQxNSAxNjMuNDk3bC00NS45MiA0NS45MkMzNjAuMzcgMjIzLjc3NyAzNjQgMjM5LjYxIDM2NCAyNTYuMDAxYzAgMjguODQ5LTExLjIzNCA1NS45Ny0zMS42MzMgNzYuMzY4UzI4NC44NDUgMzY0IDI1NS45OTUgMzY0Yy0xNi4zOTIgMC0zMi4yMjQtMy42My00Ni41ODEtMTAuNTAxbC0zMy45NzggMzMuOTc4QzE5OS4xMzMgMzk3LjU5OSAyMjUuMzg4IDQwNCAyNTMuOTM0IDQwNGg0LjEzMkMzOTUuNDY2IDQwNCA0ODAgMjU2IDQ4MCAyNTZzLTI5LjEzNi01MC41LTgwLjU4NS05Mi41MDN6Ij48L3BhdGg+PC9zdmc+");
}

ul.powerupEye {
  list-style-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBmaWxsPSIjZmZmZmZmIiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiPjxwYXRoIGQ9Ik0yNTguMDY2IDEwOGgtNC4xMzJDMTE3LjM0NyAxMDggMzIgMjU2IDMyIDI1NnM4NC41MzQgMTQ4IDIyMS45MzQgMTQ4aDQuMTMyQzM5NS40NjYgNDA0IDQ4MCAyNTYgNDgwIDI1NnMtODUuMzQ3LTE0OC0yMjEuOTM0LTE0OHptNzQuMyAyMjQuMzY5QzMxMS45NjkgMzUyLjc2NyAyODQuODQ3IDM2NCAyNTUuOTk2IDM2NGMtMjguODU2IDAtNTUuOTgtMTEuMjM1LTc2LjM3NS0zMS42MzZDMTU5LjIzIDMxMS45NyAxNDggMjg0Ljg1IDE0OCAyNTYuMDAxYzAtMjguODUgMTEuMjMtNTUuOTcgMzEuNjItNzYuMzY1QzIwMC4wMTUgMTU5LjIzNSAyMjcuMTM4IDE0OCAyNTUuOTk1IDE0OGMyOC44NSAwIDU1Ljk3MyAxMS4yMzMgNzYuMzcyIDMxLjYzMVMzNjQgMjI3LjE1MSAzNjQgMjU2LjAwMWMwIDI4Ljg0OS0xMS4yMzQgNTUuOTctMzEuNjMzIDc2LjM2OHoiPjwvcGF0aD48cGF0aCBkPSJNMjU1Ljk5NSAxODhDMjkzLjU1NyAxODggMzI0IDIxOC40NDMgMzI0IDI1NnMtMzAuNDQzIDY4LTY4LjAwNSA2OEMyMTguNDIyIDMyNCAxODggMjkzLjU1NyAxODggMjU2czMwLjQyMi02OCA2Ny45OTUtNjh6Ij48L3BhdGg+PC9zdmc+");
}

tr.powerupSubHeader th {
  text-align: center;
  border-bottom: #e6e6e6 solid 1px;
  color: #e6e6e6;
}

.powerupSankeyPopupTooltip {
  position: relative;
}

.powerupSankeyPopupTooltipText {
  visibility: hidden;
  width: 120px;
  background-color: white;
  color: black;
  text-align: center;
  padding: 5px 0;
  border-radius: 3px;
  opacity: 0.8;
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
  font-size: 12px;

  position: absolute;
  z-index: 1;
  right: 105%;
  top: -5px;
  font-weight: normal;
}

.powerupSankeyPopupTooltip:hover .powerupSankeyPopupTooltipText {
  visibility: visible;
}

.powerupSankeyPopupTooltip .powerupSankeyPopupTooltipText::after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 100%; /* To the right of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent #7c38a1;
}

.powerupSankeySaveButton svg {
  background: white;
  cursor: context-menu;
}

.powerupSankeyButtonBar {
  background: #242424;
  position: sticky;
  bottom: -10px;
}

.powerupSankeyButton {
  width: 70px;
  margin: 5px 10px 5px auto;
  padding: 2px 0px;
  color: #00a1b2;
  font-size: 14px;
  border: #00a1b2 1px solid;
  border-radius: 3px;
  white-space: nowrap;
  text-align: center;
  background-color: white;
}

table.powerupLinkPopup {
  table-layout: fixed;
  width: 100%;
}

tr.powerupColHeaders th {
  position: sticky;
  top: -10px;
  background: #242424;
}

table.powerupLinkPopup td {
  overflow: hidden;
  text-overflow: ellipsis;
}

table.powerupLinkPopup tr > *:nth-of-type(1),
table.powerupLinkPopup tr > *:nth-of-type(7),
table.powerupLinkPopup tr > *:nth-of-type(8) {
  width: 20px;
  text-align: center;
  word-break: normal;
}

table.powerupLinkPopup tr > *:nth-of-type(2),
table.powerupLinkPopup tr > *:nth-of-type(4) {
  width: 10%;
  text-align: left;
  word-break: normal;
}

table.powerupLinkPopup tr > *:nth-of-type(3),
table.powerupLinkPopup tr > *:nth-of-type(5) {
  width: 35%;
  text-align: left;
  word-break: break-all;
}

table.powerupLinkPopup tr > *:nth-of-type(6) {
  width: 5%;
  text-align: right;
  word-break: normal;
}

table.powerupActionPopup tr > *:nth-of-type(4) {
  text-align: right;
}

.powerup-svg-multi {
  display: none;
}

.powerup-svg-multi.powerup-svg-multi-0.powerup-svg-normal,
.powerup-svg-multi.powerup-svg-multi-0.powerup-svg-normal-blink {
  display: block;
}

.powerup-svg-multi.powerup-svg-multi-1.powerup-svg-warning,
.powerup-svg-multi.powerup-svg-multi-1.powerup-svg-warning-blink {
  display: block;
}

.powerup-svg-multi.powerup-svg-multi-2.powerup-svg-critical,
.powerup-svg-multi.powerup-svg-multi-2.powerup-svg-critical-blink {
  display: block;
}

.powerup-svg-multi.powerup-svg-nan {
  display: block;
}

.PowerupReportGenerator {
  position: fixed;
  left: 10%;
  top: 10%;
  width: 80%;
  height: 80%;
  z-index: 20000;
  background: white;
  border-radius: 3px;
  border: 1px #454646 solid;
  overflow: auto;
}

.powerupButton,
.powerupButton:visited {
  min-width: 70px;
  height: 22px;
  margin: 5px 10px 5px auto;
  padding: 2px 2px;
  color: #00a1b2;
  font-size: 14px;
  border: #00a1b2 1px solid;
  border-radius: 3px;
  white-space: nowrap;
  text-align: center;
  background-color: white;
}

.powerupButton:hover {
  border-color: #006d75;
  color: #006d75;
}

.powerupButton.powerupButtonDefault,
.powerupButton.powerupButtonDefault:visited {
  color: #fff;
  --dt-button-default-color: #00a1b2;
  --dt-button-hover-color: #00848e;
  --dt-button-active-color: #006d75;
  background: #00a1b2;
  border-color: #00a1b2;
}

.powerupButton.powerupButtonDefault:hover {
  background: #00848e;
}

.powerupButton.powerupCloseButton {
  width: 22px;
  min-width: 22px;
  height: 22px;
  position: absolute;
  top: 2px;
  right: 2px;
}

.PowerupReportGenerator {
  display: flex;
  flex-direction: column;
}

.PowerupReportGenerator > div {
  flex: 1;
  padding: 10px;
}

.PowerupReportGenerator > div:first-of-type {
  flex: 0;
  align-content: center;
  position: sticky;
  top: 0px;
  background: white;
  border-bottom: 1px #e6e6e6 solid;
}

.PowerupReportGenerator > div:last-of-type {
  flex: 0;
  align-content: center;
  position: sticky;
  bottom: 0px;
  background: white;
  border-top: 1px #e6e6e6 solid;
}

textarea.powerupPreviewOptions {
  width: 500px;
  height: 150px;
  font-size: 10px;
}

.powerupValidJSON {
  border-bottom: green 3px solid;
}

.powerupInvalidJSON {
  border-bottom: red 3px solid;
}

#PowerupReportGeneratorHiddenCopy {
  display: none;
}

button.powerupExpandable {
  border: none;
  display: inline-flex;
  align-items: center;
  background: none;
}

.powerupExpandableArrow {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  transform: rotate(0deg);
  transition: 0.125s;
  margin-right: 5px;
}

.powerupExpandableArrow svg {
  fill: #00a1b2;
  width: 16px;
  height: 16px;
}
#PowerupReportGeneratorPreviewOptions section {
  margin: 5px;
}

section.powerupOptionsOpen .powerupExpandableArrow {
  transform: rotate(-90deg);
}

.powerupErrorBar {
  color: red;
  font-weight: bold;
}

#generateReportRefreshButton {
  margin-left: 5px;
}

.powerupHelpFooter {
  font-size: smaller;
  font-style: italic;
  font-family: sans-serif;
  margin-top: 5px;
}

.powerupOptionsContent > div:not([class]) {
  display: flex;
  align-items: flex-end;
}

#PowerupReportGeneratorPreviewOptions.generated {
  margin-top: 20px;
  border-top: 1px #e6e6e6 solid;
}

.powerupRadioOption {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin: 10px;
}

.powerupRadioOption div {
  display: flex;
  flex-direction: column;
}

.powerupRadioOption img {
  width: 400px;
}

.powerupColorPreview {
  height: 16px;
  width: 32px;
  display: inline-block;
  margin-left: 3px;
}

.powerupOptionsContent table {
  width: 30%;
}

.powerupOptionsContent table td {
  white-space: nowrap;
}

.powerupOptionsContent th {
  text-align: left;
}

.powerupNoFlex {
  display: block;
}

.powerupClickableHeader a,
.powerupClickableHeader a:visited {
  color: #00a1b2;
  text-decoration: none;
}

.powerupClickableHeader a:hover {
  color: #00848e;
  text-decoration: underline;
  cursor: pointer;
}

.powerupLineConfig,
.powerupBandConfig {
  border: rgb(51, 51, 51) 1px solid;
  margin: 5px;
  left: 10px;
  position: relative;
  width: 400px;
}

.powerupTDTooltip {
  position: relative;
}

.powerupTDTooltipText {
  visibility: hidden;
  width: 120px;
  color: black;
  text-align: center;
  padding: 5px 0;
  border-radius: 3px;
  opacity: 0.8;
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
  white-space: normal;

  position: absolute;
  z-index: 1;
  /*right: 105%;
  top: -5px;*/
  bottom: 100%;
  left: 75%; /*further right to be over input instead of centered*/
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */

  border: 1px #00a1b2 solid;
  background-color: #e6e6e6;
}

.powerupTDTooltip:hover .powerupTDTooltipText {
  visibility: visible;
}

.powerupTDTooltip .powerupTDTooltipText::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #00a1b2 transparent transparent transparent;
}

.powerupOptionsButtonBar {
  flex: 0;
  padding: 5px;
}

.powerupBordered {
  border: 1px #e6e6e6 solid;
}

.powerupTableGrid {
  display: grid;
  grid-auto-flow: row;
  /*grid-template-columns: repeat(3, minmax(80px, auto));*/
}

.powerupTableGrid > div {
  overflow: hidden;
}

.powerupTableGrid > div > div:first-child {
  border-bottom: 1px solid #454646;
  line-height: 1.1em;
  font-size: 0.85em;
  height: 11px;
  margin: 15px 0 8px;
}

.powerupTableGrid > div > div:not(:first-child) {
  color: #e6e6e6;
  line-height: 1.4em;
  font-size: 1em;
}

.powerupTableGrid > div:not(:first-child) {
  text-align: right;
  font-family: monospace;
}

.powerupTableGrid > div > div:nth-child(2n + 3) {
  background-color: #454646;
}

.powerupTableGrid > div > div > span, 
.powerupTableGrid > div > div > a {
  padding: 0 10px 0 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .9em;
}

.powerupOverridden {
  display: none;
}

.powerupReportButton,
.powerupEllipsisButton {
  padding-left: 0px;
  text-align: justify !important;
}

.powerupGauge, .powerupHoneycomb {
  margin-top: 5px;
}

[uitestid="gwt-debug-dtaqlTile"] .powerupGauge,
[uitestid="gwt-debug-dtaqlTile"] .powerupHoneycomb {
  margin-top: 25px;
}

.powerupMenuIcon > svg {
  fill: #00848e !important;
}

.powerupDepIcon {
  float: left;
}

.powerupDepIconTooltipText {
  width: 300px;
  color: black;
  text-align: center;
  padding: 5px 0;
  border-radius: 3px;
  opacity: 0.8;
  font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
  white-space: normal;

  position: absolute;
  z-index: 1;
  bottom: 100%;
  margin-left: -140px; /* Use half of the width (120/2 = 60), to center the tooltip */

  border: 1px #00a1b2 solid;
  background-color: #e6e6e6;
}

.powerupDepIcon:hover > .powerupDepIconTooltipText {
  visibility: visible;
}

.powerupDepIconTooltip .powerupDepIconTooltipText::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #00a1b2 transparent transparent transparent;
}