body {
    font-family: Calibri, Carlito, Arial, Sans-Serif;
}

button, input[type='submit'], input[type='button'] {
    background-color: white;
    padding: 1em;
    font-weight: bold;
    border: 1px solid grey;
    cursor: pointer;
}

button:hover, input[type='submit']:hover, input[type='button']:hover {
    background-color: #4cddf3;
}

#customerInfo {
    text-align: center;
    margin: 0 auto;
    max-width: 50em;
}

div.rpt-desc {
    display: inline-block;
    font-weight: bold;
    vertical-align: middle;
    padding: 0.25em;
}

div.rpt-desc-line {
    display: block;
    text-align: left;
}

span.price {
    font-weight: normal;
}

div.rpt-desc-confirm {
    display: none;
}

div.rpt-options {
    padding: 0.25em;
    margin: 0 auto;
    text-align: center;
}

div.addl-options-header {
    font-style: italic;
    cursor: pointer;
}

div.rpt-addl-options {
    display: inline-table;
    margin: 0 auto;
    width: 31em;
}

div.rpt-option {
    display: table-row;
    margin: 0 auto;
}

label.option-label, div.option-field {
    display: table-cell;
    padding: 0.10em 0.25em;
    text-align: left;
}

div.option-field input {
    width: 25em;
}

div.rpt-user-message {
    max-width: 50em;
    text-align: left;
    margin: 0 auto;
    padding: 0.25em;
}

div.data-icon {
    background-color: #4cddf3;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;

    -webkit-border-bottom-left-radius: 50%;
    -webkit-border-bottom-right-radius: 50%;
    -webkit-border-top-left-radius: 50%;
    -webkit-border-top-right-radius: 50%;

    height: 110px;
    width: 110px;
    margin: 0.5em auto;
    cursor: pointer;
}

#export {
    text-align: center;
    margin-top: 0.5em;
}

form {
    display: inline;
}

#report {
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
    display: none;
    text-align: center;
    max-width: 55em;
}

#report > div {
    margin-bottom: 0.25em;
    margin-top: 1em;
}

div.rpt-data {
    max-width: 45em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    margin-bottom: 1em;
}

.statement {
    font-size: 1.3em;
    max-width: 35em !important;
    text-align: center;
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
}

div.rpt-peak {
    font-size: 1.3em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    margin-bottom: 1em;
    text-align: center;

}

.rpt-header {
    height: 5em;
    max-width: 50em;
    margin: 0 auto;
    background-color: #006699;
    text-align: left;
    padding: 0em 0.5em;
}

.rpt-footer {
    height: 5em;
    max-width: 50em;
    margin: 0 auto;
/ / background-color: #eaeaea;
    background-color: #006699;
    text-align: left;
    padding: 0em 0.5em;
}

.rpt-footer > img {
    float: left;
    max-height: 3em;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.rpt-title {
    color: #FFF;
    font-size: 2.5em;
}

div.rpt-title {
    display: inline-block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

td.rpt-title {
    vertical-align: middle;
}

.rpt-date {
    color: #FFF;
    float: right;
    display: inline-block;
    font-size: 1.2em;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.rpt-table {
    margin: 0 auto;
}

.rpt-chart {
    display: inline-block;
    margin-right: 0.5em;
}

.rpt-map {
    display: inline-block;
    margin-left: 0.5em;
}

.data-algo {
    margin: 0 auto;
    text-align: left;
    max-width: 50em;
    width: 100%;
}

.tandc {
    margin: 0 auto;
    text-align: center;
    font-size: 0.75em;
    max-width: 66.6666666666666667em;
    width: 100%;
}

.disclaimer {
    text-align: center;
    margin: 1em auto;
    max-width: 66.666666667em;
    font-size: 0.75em;
}

div.rpt-info {
    border: 1px solid #006699;
    max-width: 49.5em;
    margin: 0 auto;
    text-align: left;
    padding-left: 0.25em;
    padding-right: 0.25em;

}

.rpt-address, .rpt-created, .rpt-distance {
    display: block;
    color: #000;
}

.rpt-info-wrapper {
    color: #006699;
}

td.rpt-company-info {
    color: #006699;
    width: 40%;
}

td.rpt-info {
    vertical-align: top;
}

td.rpt-info-wrapper {
    vertical-align: top;
    width: 50%;
}

td.rpt-created-wrapper {
    text-align: right;
    white-space: pre;
}

td.num {
    text-align: center;
}

span.rpt-info {
    color: #000;
}

#report * table {
    margin: 0 auto;
    width: 100%;
    max-width: 45em;
    border-spacing: 0;
    border-left: 1 #006699 solid;
    border-right: 1 #006699 solid;
}

#report * th {
    background-color: #006699;
    font-weight: bold;
    white-space: pre;
    width: 33%;
    color: #FFF;
}

#report * td {
    border-bottom: 1 #006699 solid;
}

div.data-brief {
    max-width: 24.75em;
    width: 100%;
}

.data-row {
    width: 100%;
    display: table-row;
}

.data-cell {
    text-align: center;
    display: table-cell;
    width: 50%;
    vertical-align: top;
}

.hail-info {
    text-align: center;
    display: table-cell;
    margin: 0 auto;
    width: 50%;
    vertical-align: top;
}

div.email-dialog {
    position: fixed;
    width: 30em;
    height: 3em;
    float: left;
    left: 50%;
    top: 50%;
    margin-left: -15em;
    margin-top: -4.5em;
    display: none;
    background-color: white;
    border: 2px solid grey;
    padding-top: 3em;
    padding-bottom: 3em;
}

div.email-dialog-close {
    background-color: #4cddf3;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;

    -webkit-border-bottom-left-radius: 50%;
    -webkit-border-bottom-right-radius: 50%;
    -webkit-border-top-left-radius: 50%;
    -webkit-border-top-right-radius: 50%;

    height: 20px;
    width: 20px;
    position: absolute;
    top: 0;
    left: 0;
    margin-left: -10px;
    margin-top: -10px;
    cursor: pointer;

    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    color: grey;
}

/* D3 stuff below */

.axis path {
    fill: none;
    stroke: #000;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.axis line {
    stroke-width: 2;
    shape-rendering: crispEdges;
}

.pointer line {
    stroke: black;
    stroke-width: 2;
    shape-rendering: crispEdges;
}

.tick line {
    stroke-width: 1;
    stroke: black;
    shape-rendering: crispEdges;
}

.data1 {
    stroke: steelblue;
}

.data2 {
    stroke: orange;
}

rect.bar {
    fill: steelblue;
}

path {
    stroke-width: 1;
    fill: none;
}

path.freezing {
    stroke: black;
    stroke-dasharray: 5, 5;
}

text {
    font-size: 12px;
}

.bar rect {
    fill: steelblue;
    shape-rendering: crispEdges;
}

@media print {
    #customerInfo, #export, div.loading, #undefined-sticky-wrapper, #footer {
        display: none;
    }

    #report {
        display: block;
    }

    .rpt-header, #report * th {
        background-color: #006699;
    }
}