@media only screen and (max-width: 70rem) {
    /* ---------- master ---------- */
    table {
        border: none;
    }
    table thead tr {
        display: none;
    }
    table tr {
        display: block;
    }
    table th, table td {
        padding: 1.5rem 0.5rem;
    }
    table td {
        position: relative;
        display: block;
        float: right;
        text-align: left;
        padding-left: 35%;
        width: 100%;
        height: inherit;
    }
    table td::before {
        position: absolute;
        left: 1rem;
        content: attr(data-title) ": ";
        float: left;
        text-align: left;
        width: 35%;
    }
    tbody tr:nth-child(even) {
        background: var(--gray);
    }
    .select {
        font-size: 0.85rem;
        width: 100%;
    }
    .textarea {
        width: 100%;
    }
    /* ---------- tools ---------- */
    .container {
        margin-top: 10vh;
        min-height: 80vh;
    }
    .container h1 {
        font-size: 2rem;
        text-align: center;
    }
    .container h2 {
        font-size: 1rem;
    }
    .container p {
        font-size: 0.85rem;
    }
    .padding {
        padding: 0 1rem;
    }
    .half-width {
        width: 100% !important;
    }
    .hide-responsive {
        display: none !important;
    }
    .page li {
        font-size: 0.85rem;
    }
    .bold {
        color: white;
        background: var(--primary);
    }
    /* ---------- header ---------- */
    .header {
        height: 10vh;
    }
    .header .contact {
        display: none;
    }
    .header .navigation {
        background: var(--primary);
        height: 100%;
    }
    .header .navigation i {
        color: white;
    }
    .header .navigation .brand {
        background: white;
        border-radius: 1rem;
        padding: 0 1rem;
        height: 2.5rem;
        width: fit-content;
    }
    .header .navigation .full-name a {
        display: none;
    }
    /* ---------- login ---------- */
    .login form {
        width: 90%;
    }
    /* ---------- cards ---------- */
    .card {
        height: 18rem;
        width: 20rem;
    }
    /* ---------- page ---------- */
    .page .form {
        width: 100%;
    }
    /* ---------- page-double ---------- */
    .page-double {
        flex-direction: column;
        align-items: center;
    }
    .page-double .text {
        width: 100%;
    }
    .page-double .content {
        width: 100%;
    }
    .filter {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.75rem !important;
    }
    .residential .filter form, .nursing .filter form {
        width: 80%;
    }
    .residential .filter select, .nursing .filter select {
        width: 100%;
    }
    .residential .filter input, .nursing .filter input {
        width: 100% !important;
    }
    /* ---------- tabs ---------- */
    .tabs {
        top: 20vh;
        font-size: 2.5rem;
    }
    #residential, #nursing {
        margin-top: 7.5rem;
    }
    /* ---------- notes ---------- */
    .late-entry {
        width: 100%;
    }
    .nursing-input {
        flex-direction: column;
    }
    .nursing-input p {
        width: 100%;
    }
    .nursing-input textarea, .nursing-input input {
        font-size: 0.85rem;
        height: 5rem;
        width: 100%;
    }
    .nursing-note-grid .nursing-content .nursing-input p {
        width: 50%;
    }
    .nursing-note-grid .nursing-content .nursing-input input, .nursing-note-grid .nursing-content .nursing-input textarea {
        width: 50%;
    }
    .nursing-note-grid {
        display: flex !important;
        flex-direction: column;
    }
    .nursing-note-grid .nursing-content {
        display: flex !important;
        flex-direction: column;
    }
    /* ---------- email ---------- */
    .email-container.active {
        top: 10vh;
        height: 90vh;
    }
    .email-popup {
        overflow: hidden;
        padding: 0.5rem;
        padding-bottom: 10rem;
        width: 90%;
        height: 90%;
    }
    .email-popup-title {
        flex-direction: column;
    }
    .email-popup .message {
        overflow-y: scroll;
        height: inherit;
    }
    .email-popup-title h1 {
        font-size: 2rem;
    }
    .email-popup p {
        font-size: 1rem;
    }
    /* ---------- footer-bar ---------- */
    .footer-bar {
        flex-direction: column;
        gap: 0.25rem;
        padding: 2rem 0 !important;
        min-height: inherit;
        height: inherit;
    }
    .footer-bar p {
        font-size: 0.85rem;
    }
    .footer-bar .divider {
        display: none;
    }
    .security-seal {
        transform: scale(0.4);
        height: 1rem;
        width: 1rem;
    }
}