:root {
    --font-size-base: 14px;
    --font-size-small: 13px;
    --font-size-title: 20px;
}

body {
    background: #eef3fb;
    padding-top: 56px;
    padding-bottom: 70px;
    font-size: var(--font-size-base);
}

.app-toolbar {
    background-color: #4478c4;
    min-height: 60px;
}

.app-toolbar img {
    object-fit: contain;
}

.navbar-brand {
    font-size: var(--font-size-title);
    font-weight: 600;
}

.bottom-bar {
    height: 60px;
    background: #4478c4;
    border-top: 1px solid #2d5f9f;
}

.bottom-btn {
    width: 48px;
    height: 42px;
    font-size: 20px;
}

.mobile-card {
    border-radius: 14px;
}

.table-mobile th {
    background: #4478c4;
    color: white;
    font-size: var(--font-size-small);
}

.table-mobile td {
    font-size: var(--font-size-small);
    vertical-align: middle;
}

.action-btn {
    width: 34px;
    height: 34px;
    padding: 0;
}
.card-pari {
    background: #ffffff;
    border-left: 4px solid #0d6efd;
}

.card-dispari {
    background: #f8f9fa;
    border-left: 4px solid #198754;
}

.card:hover {
    transform: translateY(-2px);
    transition: .2s;
}
.font-mobile-small {
    font-size: var(--font-size-small);
}

.form-control,
.form-label,
.btn,
.offcanvas-body,
.modal-body,
.modal-title {
    font-size: var(--font-size-base);
}

/* =====================================
       SMARTPHONE PICCOLI
       ===================================== */
@media (max-width: 576px) {

    :root {
        --font-size-base: 11px;
        --font-size-small: 10px;
        --font-size-title: 15px;
    }

    .bottom-btn {
        width: 42px;
        height: 38px;
        font-size: 16px;
    }

    .navbar-brand {
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .table-mobile th,
    .table-mobile td {
        padding: 4px;
    }

    .btn-sm {
        padding: .20rem .35rem;
    }
}

/* =====================================
       TABLET
       ===================================== */
@media (min-width: 577px) and (max-width: 991px) {

    :root {
        --font-size-base: 14px;
        --font-size-small: 13px;
        --font-size-title: 18px;
    }
}

/* =====================================
       DESKTOP
       ===================================== */
@media (min-width: 992px) {

    :root {
        --font-size-base: 16px;
        --font-size-small: 15px;
        --font-size-title: 22px;
    }

    .bottom-btn {
        width: 52px;
        height: 46px;
        font-size: 22px;
    }
}