/* ==============
   GLOBAL STYLES
   ============== */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    font-family: Arial, Helvetica, sans-serif;
}

img {
    max-width: 100%;
    height: auto;
}

#app {
    width: 100%;
}

/* =================
   MOBILE RESPONSIVE
   ================= */

@media (max-width: 768px) {

    html,
    body {
        overflow-x: hidden;
    }

    .container,
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: unset !important;
        margin: 0 auto !important;
    }

    table {
        font-size: 0.85rem;
    }

    th,
    td {
        padding: 6px !important;
    }

    button,
    select,
    input {
        max-width: 100%;
    }

    h1 {
        font-size: 1.6rem;
    }

    h2 {
        font-size: 1.4rem;
    }

    h3 {
        font-size: 1.2rem;
    }

    h4 {
        font-size: 1.1rem;
    }

    h5 {
        font-size: 1rem;
    }
}