.pledge-analytics-card {
    border: 1px solid #ced4da;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.pledge-filters .form-group {
    display: inline-flex;
    align-items: flex-end;
    flex-direction: column;
    justify-content: flex-end;
    margin-right: 1rem;
    margin-bottom: 0.75rem;
}

.pledge-filters label {
    display: inline-block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    text-align: left;
    width: 100%;
}

.pledge-filters select.form-control {
    min-width: 10rem;
}

.pledge-filters .btn {
    margin-top: 0;
}

.pledge-filters .form-group-button {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    margin-right: 0;
    margin-bottom: 0.75rem;
}

.pledge-filters .form-group-button .button-spacer {
    visibility: hidden;
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    text-align: center;
    width: 100%;
}

#order_graph_daily,
#order_graph_monthly,
#order_graph_yearly {
    position: relative;
    margin-bottom: 14em;
    width: 99%;
    height: 330px;
}

#order_graph_daily .bar-caption,
#order_graph_monthly .bar-caption,
#order_graph_yearly .bar-caption {
    position: relative;
    text-align: center;
    top: 0;
}

#order_graph_daily .bar-caption h2,
#order_graph_monthly .bar-caption h2,
#order_graph_yearly .bar-caption h2 {
    color: #212529;
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
}

#order_graph_daily .bar-y-axis,
#order_graph_monthly .bar-y-axis,
#order_graph_yearly .bar-y-axis {
    position: absolute;
    top: 32px;
    width: 5em;
    margin: 0;
    padding: 0;
    float: left;
    display: inline;
}

#order_graph_daily .bar-y-axis ul,
#order_graph_monthly .bar-y-axis ul,
#order_graph_yearly .bar-y-axis ul {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 352px;
    margin: 0;
    padding: 0;
}

#order_graph_daily .bar-y-axis li,
#order_graph_monthly .bar-y-axis li,
#order_graph_yearly .bar-y-axis li {
    list-style: none;
    float: none;
    text-align: right;
    color: #adb5bd;
}

#order_graph_daily .bar-chart,
#order_graph_daily .bar-chart dd,
#order_graph_daily .bar-chart dt,
#order_graph_monthly .bar-chart,
#order_graph_monthly .bar-chart dd,
#order_graph_monthly .bar-chart dt,
#order_graph_yearly .bar-chart,
#order_graph_yearly .bar-chart dd,
#order_graph_yearly .bar-chart dt {
    margin: 0;
    padding: 0;
}

#order_graph_daily .bar-chart,
#order_graph_monthly .bar-chart,
#order_graph_yearly .bar-chart {
    position: absolute;
    top: 32px;
    left: 5.5em;
    width: calc(98% - 5.5em);
    height: 300px;
}

#order_graph_daily .bar-chart::before,
#order_graph_daily .bar-chart::after,
#order_graph_monthly .bar-chart::before,
#order_graph_monthly .bar-chart::after,
#order_graph_yearly .bar-chart::before,
#order_graph_yearly .bar-chart::after {
    content: "";
    position: absolute;
    background-color: #ced4da;
    z-index: 0;
}

#order_graph_daily .bar-chart::before,
#order_graph_monthly .bar-chart::before,
#order_graph_yearly .bar-chart::before {
    top: 0;
    bottom: -52px;
    left: 0;
    width: 1px;
}

#order_graph_daily .bar-chart::after,
#order_graph_monthly .bar-chart::after,
#order_graph_yearly .bar-chart::after {
    left: -0.5em;
    right: 0;
    bottom: -52px;
    height: 1px;
}

#order_graph_daily .bar-chart dd,
#order_graph_monthly .bar-chart dd,
#order_graph_yearly .bar-chart dd {
    position: relative;
    float: left;
    height: 330px;
    margin-top: 22px;
}

#order_graph_daily .bar-chart dd {
    width: 3.2%;
}

#order_graph_monthly .bar-chart dd,
#order_graph_yearly .bar-chart dd {
    width: 8%;
}

#order_graph_daily .bar-chart dd em,
#order_graph_monthly .bar-chart dd em,
#order_graph_yearly .bar-chart dd em {
    position: absolute;
    display: inline-block;
    bottom: -4.5em;
    left: 85%;
    font-style: inherit;
    color: #adb5bd;
    transform: translateX(-50%) rotate(-90deg);
    transform-origin: center;
    white-space: nowrap;
}

#order_graph_daily .bar-chart span,
#order_graph_monthly .bar-chart span,
#order_graph_yearly .bar-chart span {
    position: absolute;
    display: block;
    width: 30%;
    bottom: 0;
    right: 0;
    z-index: 1;
    color: #495057;
    text-align: center;
    text-decoration: none;
    background-image: linear-gradient(to bottom, #17a2b8 0, #007bff 100%);
    background-repeat: repeat-x;
    border-radius: 0.2rem 0.2rem 0 0;
}

#order_graph_daily .bar-chart dd .bar-value,
#order_graph_monthly .bar-chart dd .bar-value,
#order_graph_yearly .bar-chart dd .bar-value {
    position: absolute;
    left: 85%;
    margin: 0;
    padding: 3px;
    color: #343a40;
    z-index: 3;
    background-color: #fff;
    font-weight: 700;
    white-space: nowrap;
    transform: translate(-50%, 0);
    border-radius: 3px;
}

.pledge-summary {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid #ced4da;
    background: #f8f9fa;
    border-radius: 0.25rem;
    color: #212529;
    font-weight: 600;
}

.pledge-summary .summary-label {
    color: #6c757d;
    font-weight: 400;
    margin-right: 0.5rem;
}

.registration-detail-list dt,
.registration-detail-list dd {
    margin-bottom: 0;
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid #e9ecef;
}

.registration-detail-list dt {
    font-weight: 600;
    color: #495057;
}

.registration-detail-list dd {
    color: #212529;
}

.registration-detail-list .row:last-child dt,
.registration-detail-list .row:last-child dd {
    border-bottom: 0;
}

@media (max-width: 767.98px) {
    .pledge-filters {
        display: block;
    }

    .pledge-filters .form-group {
        display: block;
        margin-right: 0;
    }

    .pledge-filters select.form-control {
        min-width: 0;
        width: 100%;
    }

    .pledge-filters .btn {
        width: 100%;
    }
}
