.bg_number {
    font-size: 20px;
    text-anchor: middle;
    text-align: center;
}

.md_number {
    font-size: 16px;
    text-anchor: middle;
    text-align: center;
}

.intro-text {
    font-size: 12px;
}

.tab-text {
    font-size: 14px;
    font-weight: bold;
}

.title-text {
    font-size: 20px;
    font-weight: bold;
}

#std-disclosure-nd {
    font-size: 20px;
    text-anchor: middle;
    text-align: center;
}

#number-calls-nd {
    font-size: 20px;
    text-anchor: middle;
    text-align: center;
}

#number-retained-nd {
    font-size: 20px;
    text-anchor: middle;
    text-align: center;
}

#total-donations-nd {
    font-size: 60px;
}

.dc-chart g.row text {
    fill: black;
    font-size: 12px;
}

.dc-chart .pie-slice {
    fill: white;
    font-size: 12px;
    cursor: pointer;
}


/*Hide the group header from data table*/

.dc-table-group {
    display: none
}

html,
body {
    fill: black;
}

.chart-title {
    width: 100%;
    text-align: center;
}

.w3-bar-item {
    padding: 8px 8px;
    float: left;
    width: auto;
    border: none;
    outline: none;
    display: block
}

.w3-button:hover {
    color: #000!important;
    background-color: #ccc!important
}

.dashboard-title {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 16px;
    background-image: url('./images/');
    /* Add a search icon to input */
    background-position: 10px 5px;
    /* Position the search icon */
    background-repeat: no-repeat;
    /* Do not repeat the icon image */
    background-size: 40px 40px;
    padding: 12px 20px 12px 100px;
    /* Add some padding */
}

.XXDataTables_filter {
    background-image: url('./images/searchicon.png');
    /* Add a search icon to input */
    background-position: 10px 6px;
    /* Position the search icon */
    background-repeat: no-repeat;
    /* Do not repeat the icon image */
    width: 20%;
    /* Full-width */
    height: 10px;
    font-size: 12px;
    /* Increase font-size */
    padding: 12px 20px 12px 40px;
    /* Add some padding */
    border: 1px solid #ddd;
    /* Add a grey border */
    margin-bottom: 5px;
    /*Add some space below the input */
}

table.dataTable td {
    padding: 0px 0px;
    width: 1px;
    white-space: nowrap;
    font-size: 16px;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

table.dataTable th {
    font-size: 16px;
}

table {
    width: 80%;
    table-layout: fixed;
}

#dialog {
    opacity: 0.80;
    background-color: black;
    display: none;
    width: 170;
    height: 100;
    position: absolute;
    color: white;
    font-size: 12px;
    padding: 20px 20px 20px 20px;
}

.matching {
    text-decoration: underline;
    color: white;
    background-color: #FB8072;
}

.matching2 {
    text-decoration: underline;
    background-color: #8DD3C7;
}

.matching3 {
    text-decoration: underline;
    background-color: #FFFFB3;
}

.matching4 {
    text-decoration: underline;
    background-color: #BEBADA;
}

.matching5 {
    text-decoration: underline;
    background-color: #5ba3c3;
}

.matching6 {
    text-decoration: underline;
    background-color: #ffccf4;
}

.matching7 {
    text-decoration: underline;
    color: white;
    background-color: #117f8e;
}

.matching8 {
    text-decoration: underline;
    background-color: #f3dccc;
}

.notmatching {
    background-color: yellow;
    color: black;
}

.agent {
    color: orange;
}

.tooltip {
    position: absolute;
    color: white;
    background-color: tan;
    text-align: center;
    border: 1px solid #000;
}

div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}


/* Style the buttons inside the tab */

div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}


/* Change background color of buttons on hover */

div.tab button:hover {
    background-color: #ddd;
}


/* Create an active/current tablink class */

div.tab button.active {
    background-color: #ccc;
}


/* Style the tab content */

.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

.tabcontent {
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
    /* Fading effect takes 1 second */
}

@-webkit-keyframes fadeEffect {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeEffect {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}