/* TEMPLATE */ 

body {
    font-size: var(--font-size-mobile);
}

.page {
    padding: 20px;
}

h1 {
    font-size: 20px;
}

h2 {
    font-size: 17px;
}

header#title {
    font-size: 20px;
}
   
#toTop {
    display: none;
}

nav#menu {
    font-size: var(--font-size-mobile);

    a {
        &::before {
            margin: 0;
        }

        span {
            display: none;
        }
    }
}

/* AUDIT LIST */

.audit {
    .auditTitle {
        font-size: 17px;
    }

    .auditPeriod,
    .auditQuestions,
    .auditDate,
    .auditDue,
    .auditCompleted {
        font-size: 14px;

        progress {
            display: none;
        }

        &::before {
            display: none;
        }
    }
}

/* AUDIT */

#auditDates {
    flex-direction: column;
    flex-wrap: wrap;
}

#auditActions a::before {
    display: none;
}

.auditCategory .auditCategoryTitle {
    font-size: 16px;
}

.auditCategoryQuestion {
    flex-direction: column;
    padding: 0;
    row-gap: 15px;

    .auditCategoryQuestionLeft {
        align-items: center;
        border-radius: 10px 10px 0 0;
        flex: 1;
        flex-direction: row;
        padding: 10px 15px;
        
        &>div:last-child a {
            font-size: 14px;
            text-decoration: none;

            &::before {
                display: inline;
                font-size: 14px;
                margin-right: 6px;
            }
        }
    }

    .auditCategoryQuestionMain {
        flex: 1;
        padding: 0 15px 10px 15px;

        .auditCategoryQuestionHeading {
            font-size: 16px;

            time {
                display: block;
                margin: 4px 0 0 0;
            }
        }
    }
}

#response {
    #responseSelect select {
        font-size: var(--font-size-mobile);
        padding: 5px;
    }
}

/* BUTTONS */

.btn {
    box-sizing: border-box;
    font-size: 13px;
    width: 100%;

    &+.btn {
        margin: 10px 0 0 0;
    }
}