.dataAvailabilityChart {
    cursor: pointer;
    margin-left: 15px;
}

    .dataAvailabilityChart.indicatorLoading {
        min-width: 70px;
        height: 70px;
    }

#totalEpochs {
    padding-top: 6px;
}

.pieChartButton {
    margin-right: 0;
    position: inherit;
}

button.easyPieChart {
    white-space: normal;
    width: 125px;
}

.piechartspan {
    color: grey;
    display: block;
    padding-right: 5px;
}

.piechartConsumptionspan {
    color: grey;
    display: block;
    padding-right: 5px;
}

.nodata, .noDataMessage {
    display: none;
}

.easy-pie-chart .percent {
    margin-top: -12px !important;
}

.siteDateMatrix td {
    margin: 5px;
    border: solid #ffffff 1px;
}

 .siteDateMatrix th {
     padding: 5px 0;
     font-weight: normal;
     font-size: 10px;
     text-align: center;
 }

#dataCompleteness .modal-body {
    padding: 10px;
}

#dataCompleteness .loadingMessage {
    text-align: center;
    margin: 10px;
}

.cellRed {
    background: #ff5052;
}

.cellGreen {
    background: #99cc68;
}

.cellYellow {
    background: #ffcb46;
}

.customConsumptionGreen {
    color: #99cc68 !important;
}

.customConsumptionRed {
    color: #ff5052 !important;
}

.statusCell, .dateHeader, .siteHeader {
    cursor: pointer;
}

.tooltip {
    z-index: 10000;
}

#dataCompleteness {
    text-align: center;
    padding: 0 !important;
}

#dataCompleteness:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
}

 #dataCompleteness .modal-dialog {
     display: inline-block;
     text-align: left;
     vertical-align: middle;
 }

    #dataCompleteness.modal.withIndicator .modal-body {
        min-height: 150px;
    }

@media (min-width: 1320px) {
    #dataCompleteness .modal-lg {
        width: 1300px;
    }
}

 @media (max-width: 1300px) {
    .siteDateMatrix th {
        padding: 5px;
    }
 }

@media (max-width: 655px) {
    #content {
        display: flex;
        flex-wrap: wrap;
    }

    #pageTitle {
        flex-grow: 1;
    }
}

.rinexCharts {
    display: flex;
}

@media (min-width: 655px) {
    .rinexCharts {
        margin-top: -64px;
        margin-right: 20px;
        float: right;
    }
}

 @media (min-width: 767px) {
     .wrapper-content {
         margin-top: 35px;
     }
 }

 @media (min-width: 450px) {
     .piechartspan {
         padding-top: 16px;
         float: left;
     }

     .piechartConsumptionspan {
         padding-top: 8px;
         float: left;
     }
 }

@media (max-width: 780px) {
    .piechartspan, .piechartConsumptionspan {
        font-size: 12px;
    }

     .modal-dialog {
         width: 90%;
     }

    .rinexCharts > div:first-child {
         margin-left: 10px;
     }

     .dataAvailabilityChart.indicatorLoading {
         margin-top: 0;
     }
 }

.modal-body .panel {
    height: 500px;
    overflow-y: auto;
    margin-bottom: 0;
}

.siteDateMatrix {
    table-layout: fixed;
}

#siteDateMatrix .clusterize-scroll {
    width: 100%;
    height: 100%;
}

    .siteDateMatrix thead {
        position: relative;
        display: block;
        overflow: visible;
        background: #FFF;
    }

    .siteDateMatrix thead th:not(.emptyCell), .siteDateMatrix td { /*align header and body cells vertically*/
        width: 40px;
        min-width: 40px;
    }

    .siteDateMatrix td, .siteDateMatrix tbody tr th { /*align header and body cells horizontally*/
        height: 24px;
    }

    .emptyCell, .siteDateMatrix tbody tr th {
        position: relative;
        display: block;
        width: 58px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        background-color: #ffffff;
    }

.emptyCell {
    height: 40px;
    z-index: 10;
}

.siteDateMatrix tbody {
    display: block;
}

#allSitesOneDayChart, #singleSiteSelectedPeriodChart {
    overflow: auto;
}

.canvasWrap {
    width: 1240px;
    height: 470px;
    margin: 0 auto;
    margin-top: 15px;
}

.chartTitle {
    font-weight: bold;
    font-size: 14px;
    text-align: center;
}

    .chartTitle .timePeriod {
        font-size: 17px;
    }

    .chartTitle .siteData i {
        margin: 0 2px 5px 6px;
    }

.modal-header button {
    margin-top: 6px;
    margin-left: 6px;
}

    .modal-header button i {
        font-size: 18px;
    }
    .modal-header button i.fa-close {
        color: lightgray;
    }

.legendContent {
    display: flex;
    justify-content: center;
}

    .legendContent .legendContentCell {
        width: 20px;
        height: 20px;
        margin-left: 10px;
        margin-right: 8px;
    }

.removeOverFlow {
    overflow: hidden !important;
}

#dataCompleteness.modal.withIndicator.indicatorLoading .modal-content {
    max-height: 100% !important;
}

.secondLevelLoading {
    height: 581px !important;
}

.noDataMessage {
    margin-bottom: 460px;
}