#books2bits-analytics {
    max-width: 1200px;
    margin: 40px auto;
    font-family: Arial, sans-serif;
}

.b2b-header {
    margin-bottom: 30px;
}

.b2b-header h2 {
    margin-bottom: 5px;
    font-size: 32px;
}

.b2b-header p {
    color: #777;
    margin: 0;
}


.b2b-loading {
    padding: 40px;
    text-align: center;
    background: #fff;
    border-radius: 15px;
}


.b2b-cards {
    display: grid;
    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;

    margin-bottom: 25px;
}


.b2b-card {
    background: #fff;

    border-radius: 16px;

    padding: 25px;

    box-shadow:
        0 2px 10px
        rgba(0,0,0,0.06);
}


.b2b-card-title {
    display: block;

    color: #666;

    font-size: 14px;

    margin-bottom: 10px;
}


.b2b-card strong {
    display: block;

    font-size: 34px;

    margin-bottom: 5px;
}


.b2b-card-description {
    color: #999;

    font-size: 13px;
}


.b2b-panel {
    background: #fff;

    border-radius: 16px;

    padding: 25px;

    margin-bottom: 25px;

    box-shadow:
        0 2px 10px
        rgba(0,0,0,0.06);
}


.b2b-panel-header h3 {
    margin-top: 0;

    font-size: 20px;
}


.b2b-chart-container {
    height: 350px;
}


.b2b-channel,
.b2b-page {
    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 15px 5px;

    border-bottom:
        1px solid #eee;
}


.b2b-channel:last-child,
.b2b-page:last-child {
    border-bottom: none;
}


.b2b-page small {
    display: block;

    color: #999;

    margin-top: 4px;
}


.b2b-error {
    padding: 20px;

    background: #fff1f1;

    border-radius: 10px;

    color: #a00;
}


@media (max-width: 900px) {

    .b2b-cards {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 600px) {

    #books2bits-analytics {
        margin: 20px 10px;
    }


    .b2b-cards {
        grid-template-columns: 1fr;
    }


    .b2b-card strong {
        font-size: 28px;
    }

}