body {
    /*margin-top:30pt;*/
    line-height: 30pt;
}
p {
	font-family: "Arial";
	font-style:normal;
	font-size: 12pt;
    line-height: 15pt;
}
#chart_upTimetitle, #chart_downTimetitle {
	font-family: "Arial";
	font-style:normal;
	font-weight: bold;
	font-size: 24pt;
}

#chart_subtitle {
	font-family: "Arial";
	font-style:normal;
	font-size: 12pt;
}

.chart-caption {
	font-family:  Arial, 'Helvetica Neue', Helvetica, sans-serif;
	font-style:normal;
	font-size: 28pt;
	font-weight:700;
	text-align:center;
}

.chart_title {
	font-family: "Arial";
	font-style:normal;
	font-size: 14pt;
    font-weight:300;
    margin-top:15pt;
}

#pie-chart-caption {
    margin-bottom:20pt;
}

.blankdot {
    background-image: url("blankDot.png");
    background-repeat: no-repeat;
}

.bluedot {
    background-image: url("blueDot.png");
    background-repeat: no-repeat;
}

.greendot {
	background-image: url("greenDot.png");
    background-repeat: no-repeat;
}

#break {
    margin-left:20%;
    margin-right:20%;
    align-content:center;
    margin-top:30pt;
    margin-bottom: 30pt;
}

#page-break {
	margin-left:18%;
    margin-right:18%;
    align-content:center;
}

.row {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}

.column {

    margin: 30px;
    font-family:  Arial, 'Helvetica Neue', Helvetica, sans-serif;
	font-style:normal;
	font-size: 14pt;
	font-weight:100;
	text-align:left;
    flex-basis: 30%;
}


#calendar {
    background-color: #333333;
    padding-left: 10%;
    padding-right: 5%;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 50px;
}

.flex-container-month {
  display: flex;
  flex-basis: 210px;
  flex-wrap: wrap;
  background-color: #333333;
}

.flex-container > div {
  background-color: #333333;
  border-color:#000;
  border-style: solid;
  border-width: 1px;
  margin: 10px;
  padding: 15px;
}

.flex-container > div:hover {
    background-color: #555555;
    cursor:pointer;
}

.flex-container-month .greendot,.flex-container-month .bluedot, .flex-container-month .blankdot {
	margin: 2px;
	padding: 8px;
    padding-right: 11px;
	height: 8px;
	width: 8px;
	background-repeat: no-repeat;
    background-position: center;
}

.flex-caption {
	flex-basis: 220px;
	font-family: Arial;
    font-weight:bold;
	color: #cacaca;
	font-size: 18pt;
    padding-bottom: 10pt;
    padding-left: 6pt;
}

.flex-pie-container {
    display:flex;
    justify-content:center;
    flex-wrap: wrap;
}

.chart-calendar-legend {
    display: flex;
    padding-left: 16%;
    background-color: #333333;
    color: #fff;
    padding-top: 30pt;
    line-height: 10pt;
}

.calendar-legend-box {
    flex-basis: 200px;
    padding-left: 20px;
    padding-top: 2px;
    font-family: Arial;
    font-weight:bold;
	color: #cacaca;
	font-size: 13pt;
    margin-bottom: 20px;
}

.flex-piechart {
    margin-left: 0pt;
    margin-right:0pt;
    flex-basis: 390px;
    text-align: center !important;
}

.imagesize {
    width: 15px;
    height: 15px;
    flex-basis: 40px;
}

.vertical-line-space {
	margin-top: 20pt;
	margin-bottom: 20pt;
}

#calendar-chart-caption {
    padding: 20pt;
    padding-left: 16%;
    background-color: #333333;
    color: #fff;
    text-align: left;
}

#page-subtitle {
    color: #000;
    font-family: Arial;
    font-weight:bold;
	font-size: 12pt;
    margin-top: 20px;
    margin-bottom: 10px;
    text-align:left;
    margin-left: 18%;
}

#page-caption {
    margin-left: 18%;
    text-align:left;
    color: #8ad517;
    font-family: Arial;
    font-weight:bold;
	font-size: 32pt;
    margin-top: 10px;
    margin-bottom: 40px;
}

.page-title-detail {
    color: #000;
    font-family: Arial;
    font-weight:bold;
	font-size: 32pt;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
}

#page-detail-box {
    display:flex;
	justify-content:center;
    flex-wrap: wrap;
}

#subpage-detail-box {
    display:flex;
	justify-content:flex-start;
	flex-wrap: wrap;
}

.detail-box {
    margin-left: 20px;
    margin-right:80px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.page-box {
    text-align:center;
	margin-left: 80px;
    margin-right:80px;
    margin-top: 30px;
    margin-bottom: 20px;
}

#outperformedsla, #uptime, #amountmonth {
	color: #7bbd2e;
}

.vertical-space {
	margin-top: 30pt;
}

.verticalLine {
  border-left: 1px solid #ddd;
}

.month-info {
    color: #000;
    font-family: Arial;
    font-weight:bold;
	font-size: 28pt;
}

#month-average {
    color: #8ad517;
}

.month-detail-text {
     color: #000;
    font-family: Arial;
    font-weight: normal;
	font-size: 14pt;
}

.month-detail-subtext {
     color: #000;
    font-family: Arial;
    font-weight: normal;
	font-size: 11pt;
    padding-top: 10px;
}

.month-subcaption {
    font-size: 22pt;
	font-weight: bolder;
    margin-top: 20pt;
}

#daily-performance {
    display: flex;
	flex-wrap: wrap;
    margin-left: 10pt;
}

#downtime-summary {
    display: flex;
	flex-wrap: wrap;
    margin-left: 10pt;
}

#rotate {
  /* FF3.5+ */
  -moz-transform: rotate(-90.0deg);
  /* Opera 10.5 */
  -o-transform: rotate(-90.0deg);
  /* Saf3.1+, Chrome */
  -webkit-transform: rotate(-90.0deg);
  /* IE6,IE7 */
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=0.083);
  /* IE8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
  /* Standard */
  transform: rotate(-90.0deg);
  transform-origin: center;
}

#upTimechart {
	width: 80%;
	height: 260px;
	display: inline-block;
}

#chart_upTimeMonth, #chart_downTimeMonth {
    width:50%;
    margin-top: 30pt;
    flex-basis: 400px;
}

#monthlyupTime, #monthlydownTime {
    width:90%;
	height: 260px;
    flex-basis: 750px;
}

#current-month {
    margin-bottom: 30pt;
}

.flex-pie-container, .chart-caption, #page-break, .chart-calendar-legend { width: 100% !important; }