body {
        padding: 20px;
}

.chart {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        height: 300px;
        margin: 0 auto;
        padding: 20px;
        padding-top: 40px;
        position: relative;
}

.bar {
        width: 49%;
        position: relative;
        background-color: rgb(0, 123, 255);
        /* border: 1px solid rgb(0, 123, 255); */
}


.label {
        text-align: center;
        position: absolute;
        width: 100%;
        bottom: 100%;
        color: #000;
        margin-bottom: 3px;
}



.chart2 {
        min-height: 300px;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(1, 1fr);

}

.topwindow {
        padding: 20px 24px 20px 24px;
        margin: 10px;
        /* border: 1px solid #e0e0e0; */
        width: 160px;
        /* border-radius: 5px; */
}

.dataTable {
        width: 100%;
        border-collapse: collapse;
}

th,
td {
        font-family: 'Arial', sans-serif;
        color: rgb(51, 51, 51);
        font-size: 15px;

        border-bottom: 1px solid #ddd;
        padding: 9px;
        text-align: left;
}

th {

        font-weight: 400;
        color: #888888;
}

table tr {
        background-color: #ffffff;
        height: 30px;
}

table tr:hover {
        background-color: #f0f0f0;
}

h2 {
        color: rgb(51, 51, 51);
        margin-top: 0;
        font-family: 'Bebas-Neue', sans-serif;
        font-weight: 400;
        margin-bottom: 20px;
}

h3 {
        color: rgb(51, 51, 51);
        margin-top: 0;
        font-family: 'Arial', sans-serif;
        font-weight: 340;
        margin-bottom: 20px;
}


.editbutton {
        padding: 0;
        border: none;
        background: none;
        color: #007bff;
        margin: 0;
        cursor: pointer;
        font-size: 14px;
}

.editbutton:hover {
        color: #014894;
}

#popup {
        display: none;
        position: fixed;
        left: 50vw;
        top: 50vh;
        transform: translate(-50%, -50%);
        background-color: white;
        padding: 20px;
        border: 1px solid #e2e2e2;
        height: 70vh;
        width: 65vw;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
        z-index: 2;
        border-radius: 12.5px;
}

.closepopupbutton {
        position: absolute;
        top: 3vh;
        right: 3vh;
        background: none;
        border: none;
        font-size: 20px;
        cursor: pointer;
}

#agent-info {
        width: 70%;
        margin-bottom: 3vh;
}

#representative-info {
        width: 100%,
}

.horizontal-line {
        width: 100%;
        border-top: 0.75px solid #aeb3b6;
        ;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: content-box;

}

.card-content {
        display: flex;
}

.card-chart {
        width: 60px !important;
        height: 60px !important;
}

canvas{
        margin-right: 10px;
}