styles.css

* {
    font-family: 'Inter', sans-serif;
}

#loading {

    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 100%;
    background-color: white;
}

.loader {
    border: 16px solid #f3f3f3;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    z-index: 101;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
  }
  
  /* Safari */
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

#outputarea {
    padding: 2px;
    margin-left: 2px;
    margin-right: 2px;
    width: 100vw;
}

table.pvtTable {
    font-family:arial;
    font-size: 8pt;
    text-align: left;
    border-collapse: collapse;
}
table.pvtTable tr th, table.pvtTable tr th {
    background-color: #e6EEEE;
    border: 1px solid #CDCDCD;
    font-size: 8pt;
    padding: 5px;
}

table.pvtTable .pvtColLabel {text-align: center;}
table.pvtTable .pvtTotalLabel {text-align: right;}

table.pvtTable tr td {
    color: #3D3D3D;
    padding: 5px;
    background-color: #FFF;
    border: 1px solid #CDCDCD;
    vertical-align: top;
    text-align: right;
}

.pvtTotal, .pvtGrandTotal { font-weight: bold; }

.pvtVals { text-align: center;}
.pvtAggregator { margin-bottom: 5px ;}

.pvtAxisContainer, .pvtVals {
    border: 1px solid gray;
    background: #EEE;
    padding: 5px;
}
.pvtAxisContainer li {
    padding: 8px 6px;
    list-style-type: none;
    cursor:move;
}
.pvtAxisContainer li.pvtPlaceholder {
    -webkit-border-radius: 5px;
    padding: 3px 15px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px dashed #aaa;
}

.pvtAxisContainer li span.pvtAttr {
    background: #F3F3F3;
    border: 1px solid #DEDEDE;
    padding: 2px 3px;
    white-space: 'nowrap';
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.pvtTriangle {
    cursor:pointer;
    color: grey;
}

.pvtHorizList li { display: inline; }
.pvtVertList { vertical-align: top; }

.pvtFilteredAttribute { font-style: italic ; border-radius: 4px; background-color: #CDCDCD; }

.pvtFilterBox {
    z-index: 100;
    min-height: 5rem;
    width: 280px;
    bottom: 25px;
    top: auto !important;
    overflow-y: scroll;
    border: 1px solid gray;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 10px 5px -5px rgba(0, 0, 0, .5);
    padding: 20px;
    margin: 5px;
    position: fixed;
    text-align: center;
    background-color: rgba(255, 255, 255, .15);  
    backdrop-filter: blur(5px);
}

.pvtFilterBox h4, .pvtFilterBox p, .pvtFilterBox button { margin: 5px; padding: 5px; border-radius: 5px;}

.pvtCheckContainer{
    text-align: left;
    overflow: scroll;
    width: 100%;
    max-height: 200px;
}
.pvtCheckContainer p{ margin: 5px; }

.pvtRendererArea {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 2px;
}

.c3-axis-x-label, .c3-axis-y-label {
    font-size: 1rem;
    font-weight: 600;
}

.c3-legend-item .c3-legend-item-tile {
    font-size: 10px;
}