.page-report-header {
    padding: 10px 15px;
    border-bottom: 1px solid #c8c8c8;
}

.page-report .report-main .container {
    border-left: 1px solid #c8c8c8;
    border-right: 1px solid #c8c8c8;
}

.page-report .report-main .container .row {
    padding: 20px 10px;
    border-bottom: 1px solid #c8c8c8;
}

.page-report .report-main .container .row > * {
    padding-left: 10px;
    padding-right: 10px;
}

.report-tabs .item {
    position: relative;
    padding: 10px 20px;
    border-right: 1px solid #c8c8c8;
    cursor: pointer;
}

.report-tabs .item span {
    color: rgba(26, 26, 26, 0.5);
    font-size: 20px;
    line-height: 25px;
    font-weight: 700;
}

.report-tabs .item.is-active {
    box-shadow: 0px 1px 0px 0px #f4f4f4;
}

.report-tabs .item.is-active span {
    color: var(--maincolor);
}

.report-tabs-content .item {
    display: none;
}

.report-tabs-content .item.is-active {
    display: block;
}

.report-card-wrap {
    margin-bottom: 20px;
}

.report-card {
    padding: 20px 10px;
    border: 1px solid #c8c8c8;
    height: 100%;
    text-align: center;
}

.report-card.highlighted {
    border-color: #1DAB22;
    background-color: #fff;
}

.report-card.canceled {
    border-color: red;
    background-color: #fff;
}

.report-card .value {
    display: block;
    color: var(--maincolor);
    font-size: 40px;
    line-height: 40px;
}

.report-card.highlighted .value {
    color: #1DAB22;
    font-size: 60px;
    line-height: 60px;
}

.report-card.canceled .value {
    color: red;
    font-size: 60px;
    line-height: 60px;
}

.report-card .value + span {
    display: block;
    font-family: freight-sans-pro, sans-serif;
    font-size: 14px;
    line-height: 14px;
    margin-top: 10px;
}

.report-card .values > * {
    width: 100%;
}

#daterange {
    padding: 5px 10px;
    width: 400px;
}