<style type="text/css">

/* general page design */
BODY {
  font-family: Helvetica, Arial, sans-serif;
  color: #595959;
  font-size: 16px;
}
TABLE.page > tbody > tr > td {
  vertical-align: top;
}
TD.header {
  height: 10px;
}
TD.footer {
  height: 10px;
}
DIV.footer {
  height: 10px;
  border-top: 1px solid grey;
  padding-top: 5px;
  margin-right: 10px;
  text-align: center;
  font-size: 12px;
}
DIV.standard DIV.content {
  padding-top: 15px;
}
DIV.page.content_page TD.header DIV.title {
  height: 40px;
}
DIV.page.content_page TD.header DIV.titletext {
  font-size: 20px;
  color: white;
  top: 10px;
  left: 5px;
  position: absolute;
}
DIV.subtitle {
  border-bottom: 1px solid grey;
  padding-top: 20px;
  padding-bottom: 5px;
  margin-right: 10px;
  font-size: 20px;
  overflow: hidden;
  width: auto;
  white-space: nowrap;
}


/* Cover Design */
TD.header DIV.title {
  position: relative;
  width: auto;
  width: 159mm;
  height: 200px;
  background: rgb(99,147,193);
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(99,147,193,1) 0%, rgba(207,231,250,1) 90%, rgba(207,231,250,1) 100%);
}
DIV.cover TD.header DIV.titletext {
  font-size: 30px;
  color: white;
  bottom: 0px;
  left: 5px;
  position: absolute;
}
DIV.cover TD.header DIV.title_bar {
  margin-top: 1px;
  background-color: #B3BEC8;
}
DIV.cover TD.header {
  border-bottom: 0;
}
DIV.cover DIV.footer {
  display: none;
}
DIV.cover DIV.content DIV.date {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #595959;
  font-weight: bold;
}
DIV.cover DIV.content DIV.title {
  margin-top: 100px;
  font-size: 20px;
  font-weight: bold;
  color: #6393c1;
}
DIV.cover DIV.content DIV.details {
  margin-top: 40px;
  font-weight: bold;
}
DIV.cover DIV.content DIV.details TH {
  text-align: left;
}
DIV.cover DIV.content DIV.details TD {
  padding-left: 10px;
}
DIV.cover DIV.description {
  padding-top: 30px;
  white-space: pre;
}


/* Event Report */
TABLE.legendtable {
  margin-top: 10px;
  width: 300px;
  border-collapse: collapse;
}
TABLE.legendtable TD, TABLE.legendtable TH {
  border: 1px solid grey;
  padding: 3px;
}
TABLE.legendtable TD.totals {
  width: 55px;
  text-align: right;
}
TABLE.legendtable TH.totals {
  width: 55px;
  text-align: center;
}
TABLE.legendtable TD.img {
  text-align: center;
}

DIV.logdate {
  font-size: 10px;
}
DIV.logdate IMG {
  vertical-align: bottom;
  padding-right: 5px;
  width: 12px;
  height: 12px;
}
DIV.logoptions {
  font-size: 10px;
  height: 14px;
  line-height: 14px;
  overflow: hidden;
  padding-bottom: 4px;
  padding-top: 1px;
  white-space: nowrap;
  width: auto;
}
SPAN.logtype {
  width: 220px;
  white-space: nowrap;
  float: right;
  overflow: hidden;
}

/* SLA Report */
DIV.output {
  padding-top: 2px;
  padding-bottom: 10px;
  font-size: 12px;
}
SPAN.duration {
  float: right;
}
TABLE.availability_details {
  margin-top: 30px;
  margin-left: 10px;
  border-collapse: collapse;
  font-size: 10px;
}
TABLE.availability_details.totals {
  margin-top: 15px;
}
TABLE.availability_details TD, TABLE.availability_details TH {
  border: 1px solid grey;
}
TABLE.availability_details TD {
  text-align: right;
}
TABLE.availability_details.months12 TH {
  min-width: 39px;
}
TABLE.availability_details.weeks5 TH, TABLE.availability_details.weeks4 TH {
  min-width: 50px;
}
TD.sla_nok, SPAN.sla_nok {
  color: red;
}
DIV.flotgraph {
  width:auto;
  height:300px;
}
DIV.axis_y {
  position: relative;
  left: -2px;
}
SPAN.graph_hst_legend {
  left: 20px;
  position: absolute;
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
}
SPAN.graph_svc_hst_legend {
  left: 20px;
  position: absolute;
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
}
SPAN.graph_svc_legend {
  left: 170px;
  position: absolute;
  width: 170px;
  white-space: nowrap;
  overflow: hidden;
}
SPAN.graph_percent_legend {
  left: 345px;
  position: absolute;
  width: 65px;
  white-space: nowrap;
  overflow: hidden;
  text-align: right;
}
IMG.pnpimage {
  margin-top: 5px;
}
IMG.grafanaimage {
  margin-top: 35px;
  width: 80%;
}

/* page sizing */
BODY, HTML {
  margin: 0;
  padding: 0;
  border:0;
  width: 210mm;
}
DIV.page {
  border: 0;
  margin: 0;
  padding: 17mm 24mm 17mm 24mm;
  width: auto;
  height: 260mm;
  page-break-after: always;
  position: relative;
  overflow: hidden;
}
TABLE.page {
  height: 100%;
  width: 100%;
  border-spacing: 0px;
  border-collapse: collapse;
  border: 0;
  padding: 0;
  margin: 0;
}
DIV.content {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* preview styles */
BODY.preview DIV.page {
  border: 1px solid grey;
  margin: 10px;
}
BODY.preview {
  background-color: #CCCCCC;
}
BODY.preview DIV.page {
  background-color: #FFFFFF;
  -webkit-box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.5);
  box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.5);
}

.vertical {
  margin: 0px;
  margin-bottom: 4px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-0.00000000, M12=1.00000000, M21=-1.00000000, M22=-0.00000000,sizingMethod='auto expand')";
  filter: flipv() fliph(); writing-mode: tb-rl; /* IE < 9 */
  -webkit-transform: rotate(-90.0deg);  /* Safari 3.1+, Chrome */
  -moz-transform: rotate(-90.0deg);  /* Firefox 3.5-15 */
  -ms-transform: rotate(-90.0deg);  /* IE9+ */
  -o-transform: rotate(-90.0deg);  /* Opera 10.5-12.00 */
  transform: rotate(-90.0deg);
  white-space: nowrap;
}

.round {
  border-radius: 9999px;
  text-align: center;
}
.red {
  background-color: #ef4444;
  color: black;
}
.green {
  background-color: #22c55e;
  color: white;
}
.yellow {
  background-color: #fde047;
  color: black;
}
.orange {
  background-color: #fb923c;
  color: black;
}
I.fa-solid {
  width: 14px;
  height: 14px;
  font-size: 15px;
  line-height: 14px;
  margin-top: -5px;
}
.small, I.fa-solid.small {
  width: 16px;
  height: 16px;
  font-size: 12px;
  line-height: 16px;
  margin-top: -4px;
}

.hidden {
  display: none;
}

</style>
