body {
    color: #291E3B;
    font-family: 'Archivo', sans-serif;
    padding-top: 70px;
}

/* Padding for logo. */
.navbar-brand {
    padding: 7px 15px 0;
}

.navbar-main {
    background-color: #F8F4ED;
    border-color: #EDEBE8;
}

@media (max-width: 767px) {
    /* Center navbar brand on mobile. */
    .navbar-header {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

.navbar-brand img {
    height: 36px;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
}

input[type=radio] {
    accent-color: #78429A;
}

.page-header {
    text-align: center;
    border-bottom: 1px solid #EDEBE8;
    color:  #4F4A40;
}

.page-header h1 {
    font-weight: 500;
}

.btn-primary {
    background-color: #78429A;
    border-color: #EDEBE8;
    transition-property: all;
    transition-duration: 0.2s;
}

.btn-primary:hover {
    background-color: #c7a3e7;
    border-color: #EDEBE8;
    color: #291E3B;
}

.btn-primary:active, .btn-primary:visited {
    background-color: #78429A;
    border-color: #000;
}

.btn-primary:focus {
    background-color: #78429A;
    border-color: #000;
}

.btn-primary:active:focus {
    background-color: #78429A;
    border-color: #000;
    outline: none;
}

.alert a {
    font-weight: bold;
}

.info-icon {
    margin-right: 10px;
}

.survey-intro, #Survey-ShowOutro .alert {
    background-color: #F8F4ED;
}

.survey-footer {
    background-color: #F8F4ED;
    display: flex;
}

#survey-code-get .code-input-row label {
    position: relative;
}

#survey-code-get .code-input-row label.dash::before {
    content: '-';
    font-size: 50px;
    font-weight: normal;
    line-height: 38px;
    position: absolute;
    left: -24px;
}

#survey-code-get .code-input-row input {
    font-family: monospace;
    text-align: center;
    text-transform: uppercase;
}

@media (min-width: 480px) {
    #survey-code-get .code-input-row input {
        /* Increase font size of input fields for larger devices */
        font-size: 25px;
    }
}

/* Primary question label */
#survey-show .primary-question-label {
    font-size: 18px;
    font-weight: 400;
}

/* Group question label (sub-question) */
#survey-show .group-question-label {
    font-size: 16px;
    margin-left: 5px;
}

/* Override default styling for possible response labels (checkbox/radio) */
#survey-show .possible-response {
    font-size: 16px;
    font-weight: normal;
}

/* Primary grouping for a question and answer, and survey introduction */
#survey-show .question-answer-container, #survey-show .survey-intro {
    margin-bottom: 50px;
}

/* Top margin to custom respondent group (department) form control */
#survey-show #respondent_group_item_unlisted {
    margin-top: 10px;
}

/* Answer container */
#survey-show .single-question .answer-container, #survey-show .question-group {
    background-color: #F9F8F7;
    border: 1px solid #E6E6E6;
    border-radius: 4px;
    padding: 5px;
}

/* Constrain resizing to vertical only */
#survey-show .answer-container textarea {
    resize: vertical;
}

#survey-show .answer-container .form-control {
    font-size: 16px;
}

/* Remove padding from question groups, they will handle their own */
#survey-show .question-group {
    padding: 0;
}

/* Separate each question in a question group and pad response control(s). */
#survey-show .group-question-container {
    border-bottom: 1px solid #e6e6e6;
    padding: 5px;
}

/* Remove border from last question in question group. */
#survey-show .group-question-container:last-child {
    border-bottom: none;
}

/* Smaller and lighter font for required label text */
#survey-show .required-label {
    color: #847C6A;
    font-size: 14px;
}

/* Override required label color when the field has an error */
#survey-show .has-error .required-label {
    color: #ad5d49;
}

/* Expand to fill */
#survey-show .possible-response-container {
    display: block;
}

/* Possible response */
#survey-show .possible-response {
    /* invisible border so height doesn't change on hover */
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 2px;
    cursor: pointer;
    display: block;
    margin-bottom: 3px;
    padding: 4px 6px;
}

/* Override color when question has an error */
#survey-show .has-error .possible-response {
    color: #ad5d49;
}

/* Highlight selected response */
#survey-show .possible-response.selected {
    background-color: #E8DBF5;
    border-color: #E6E6E6;
    transition-property: all;
    transition-duration: 0.3s;
}

/* Separate question comment button/textarea */
#survey-show .question-comment-container {
    border-top: 1px dotted #ccc;
    margin-top: 5px;
    padding-top: 5px;
}

/* Constrain resizing to vertical only */
#survey-show .question-comment-container textarea {
    resize: vertical;
}

/* Override .has-error border color for question comment inputs since it's never required */
#survey-show .has-error .question-comment-container textarea {
    border-color: #ccc;
}

/* Override default color of Bootstrap buttons */
#survey-show .question-comment-container button {
    color: #5b5b5b;
}

.question-answer-container {
    color: #4F4A40;
}

.form-control {
    color: #291E3B;
}

.help-block {
    color: #847C6A;
}

/* Desktop styles */
@media (min-width: 768px) {
    /* Additional spacing for headings */
    h1, h2, h3, h4, h5, h6 {
        letter-spacing: 1px;
    }

    /* Increase question font size */
    #survey-show .primary-question-label {
        font-size: 24px;
    }

    /* Additional separation between each question and answer combination, and survey introduction */
    #survey-show .question-answer-container, #survey-show .survey-intro {
        margin-bottom: 60px;
    }

    /* Additional padding for answers and outer group question container */
    #survey-show .single-question .answer-container, #survey-show .group-question-container {
        padding: 10px;
    }

    /* Table layout for answer */
    #survey-show .answers-table {
        display: table;
        table-layout: fixed;
        width: 100%;
    }

    /* Response group becomes a row */
    #survey-show .response-group {
        display: table-row;
    }

    /* Response container becomes a cell */
    #survey-show .possible-response-container {
        display: table-cell;
        text-align: center;
        padding: 6px 3px 0;
        vertical-align: top;
    }

    /* Cell width for 5 responses */
    #survey-show .response-group-size-5 .possible-response-container {
        width: 20%;
    }

    /* Cell width for 6 responses */
    #survey-show .response-group-size-6 .possible-response-container {
        width: 16.666%;
    }

    /* Cell width for 11 responses */
    #survey-show .response-group-size-11 .possible-response-container {
        width: 9.091%;
    }

    /* Remove top padding from first response row */
    #survey-show .response-group:first-child .possible-response-container {
        padding-top: 0;
    }

    /* Don't pad first response in a row */
    #survey-show .possible-response-container:first-child {
        padding-left: 0;
    }

    /* Don't pad last response in a row */
    #survey-show .possible-response-container:last-child {
        padding-right: 0;
    }

    /* Pad possible response */
    #survey-show .possible-response {
        /* Remove margin applied on mobile */
        margin-bottom: 0;
        padding: 12px 2px 7px;
    }

    /* Show dotted border on hover */
    #survey-show .possible-response:hover {
        border: 1px dashed rgba(86, 86, 86, 0.36);
    }

    /* Center radio/checkbox button */
    #survey-show .answer-container input[type="radio"], #survey-show .answer-container input[type="checkbox"] {
        display: block;
        margin: 0 auto;
    }

    /* Additional spacing for question comment button/textarea controls */
    #survey-show .question-comment-container {
        margin-top: 10px;
        padding-top: 10px;
    }
}