.card{

background:#111827;

border-radius:12px;

padding:20px;

border:1px solid #1f2937;

}

.title{

font-size:14px;

opacity:.7;

}

.value{

margin-top:12px;

font-size:34px;

font-weight:bold;

}

.panel{

background:#111827;

border-radius:12px;

padding:20px;

border:1px solid #1f2937;

}

#searchBox{

width:100%;

padding:10px 12px;

margin-top:4px;

border-radius:8px;

border:1px solid #374151;

background:#1f2937;

color:#ffffff;

font-size:15px;

outline:none;

transition:all .2s ease;

}

#searchBox:focus{

border-color:#00d4ff;

box-shadow:0 0 10px rgba(0,212,255,.35);

}


/* ==============================
   MOBILE CARDS / FILTERS
   ============================== */

@media (max-width: 768px) {

    .card {
        padding: 14px;
        border-radius: 10px;
    }

    .title {
        font-size: 12px;
    }

    .value {
        margin-top: 7px;

        font-size: 26px;

        white-space: nowrap;
    }

    .panel {
        padding: 14px;

        border-radius: 10px;

        min-height: 280px;
    }

    #searchBox {
        min-height: 44px;

        padding:
            11px 12px;

        font-size: 16px;

        box-sizing: border-box;
    }

    select,
    input,
    button {
        font-size: 16px;
    }

    canvas {
        max-width: 100% !important;
    }

}


@media (max-width: 480px) {

    .cards .card {
        flex-basis: 78vw;
    }

    .value {
        font-size: 24px;
    }

}