@media print {
    html, body, a, table {
        color: black !important;
    }

    a {
        text-decoration: none !important;
    }

    .printArea {
        width: 100% !important;
    }

    .pageBreak {
        page-break-after: always;
    }

    .hideOnPrint {
        display: none !important;
    }

    .showOnPrint {
        display: block;
    }

    .content-with-border {
        border: none;
        padding: 0px;
    }
}

/***************************/
/* ADJUST FOR SCREEN SIZES */
/***************************/

@media (max-width: 900px) {

    :root {
        --bs-body-font-size: 90%;
    }

    body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .form-control {
        font-size: 90%;
    }

    .btn {
        --bs-btn-font-size: 90%;
        padding: 0 0 0 0;
    }

    .nav-link {
        --bs-nav-link-font-size: 90%;
    }

    .dropdown-menu {
        --bs-dropdown-font-size: 90%;
        --bs-dropdown-padding-y: 2px;
        --bs-dropdown-item-padding-x: 2px;
        --bs-dropdown-item-padding-y: 0.5px;
        --bs-dropdown-header-padding-x: 2px;
        --bs-dropdown-header-padding-y: 1px;
        --bs-dropdown-divider-margin-y: 1px;
    }

    .row {
        --bs-gutter-x: 2px;
    }

    .card {
        --bs-card-spacer-x: 2px;
        --bs-card-spacer-y: 2px;
        --bs-card-cap-padding-x: 1px;
        --bs-card-cap-padding-y: 2px;
    }

    .navbar {
        --bs-navbar-padding-y: 1px;
    }

    .navbar-nav {
        --bs-nav-link-padding-y: 1px;
    }
}

@media (max-width: 500px) {

    :root {
        --bs-body-font-size: 80%;
    }

    body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .form-control {
        font-size: 80%;
    }

    .btn {
        --bs-btn-font-size: 80%;
    }

    .dropdown-menu {
        --bs-dropdown-font-size: 80%;
    }

    .nav-link {
        --bs-nav-link-font-size: 80%;
    }

    .mobile-page .content-with-border {
        border: none;
    }
}

/****************************************/
/*  PRINT STYLES                        */
/****************************************/

.show-print {
    visibility: hidden;
}

@media print {
    body > header:first-child {
        visibility: hidden;
    }

    footer {
        visibility: hidden;
    }

    main {
        margin-top: 0;
    }
    
    body {
        color: black !important;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    a {
        text-decoration: none;
    }

        a[href]:after {
            content: none;
        }

    pre {
        white-space: pre-wrap;
    }

    h1 {
        font-size: larger !important;
    }

    .container {
        border: none;
        display: inline-block;
        margin: 0;
    }

    .show-print {
        visibility: visible;
    }

    .hidden-print {
        visibility: hidden;
    }
}