body {
    font-size: var(--font-size-mobile);
    
    .page {
        padding: 20px;
    }    
}



main {
    padding: 0 10px;
}

h1 {
    font-size: 20px;
}

h2 {
    font-size: 17px;
}

header#title {
    font-size: 20px;
}

   
#toTop {
    display: none;
}


/* DASHBOARD */

.audit {
    padding: 15px;
    
    &>div.audit-title {
        font-size: 16px;
    }
    
    &>div.audit-questions,
    &>div.audit-date,
    &>div.audit-due {
        font-size: 13px;
    }
}


/* MENU BARS */

nav#menu {
    font-size: var(--font-size-mobile);

    a {
        &:before {
            margin: 0;
        }
        
        span {
            display: none;
        }
    }
}

nav#actions {
    font-size: 14px;
    gap: 5px;
    
    a {
        padding: 12px 17px;
        
        &:before {
            display: none;
        }
    }
}


/* AUDIT */

#auditPeriod,
#auditDue {
    font-size: 13px;
    padding: 5px 10px;
}

#auditActions {
    font-size: 14px;
    gap: 5px;
    
    a {
        padding: 12px 17px;
        
        &:before {
            display: none;
        }
    }
}

.question {
    gap: 0;
    flex-wrap: wrap;
    padding: 0;
    
    &+.question {
        border-top: none;
        margin-top: 40px;
    }
    
    h2 {
        font-size: 16px;
    }
    
    .questionStatus {
        margin: 20px 0 0 0;
        text-align: left;
    }
    
    &>div:first-child {
        flex: 100%;
        font-size: 15px;
        padding: 15px;
        text-align: left;
    }
    
    &>div:last-child {
        flex: 100%;
        padding: 0;
    }
}


#response {
    #responseSelect select {
        font-size: var(--font-size-mobile);
        padding: 5px;
    }
}


/* BUTTONS */

.btn-area {
    margin: 10px 0;
}

.btn {
    font-size: 15px;
    padding: 15px 0;
    width: 100%;
    
    &+.btn {
        margin: 10px 0;
    }    
}