div.appHeader {
    background-color: hsl(210, 11%, 96%);
    border-bottom: 1px solid hsl(210, 11%, 84%);
}

div.appHeader > nav {
    margin: 10px auto 10px auto;
    max-width: 1200px;
    border: none;
    background-color: transparent;
}

div.appHeader > nav > ul {
    margin: 0px;
    padding: 0px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style-type: none;
}

div.appHeader > nav > ul > li.left {
    margin-right: 10px;
    width: 260px;
}

div.appHeader > nav > ul > li.center {
    margin-right: 10px;
    margin-left: 10px;
    text-align: center;
}

div.appHeader > nav > ul > li.right {
    margin-left: 10px;
    text-align: right;
}

div.appHeader > nav > ul > li div.contextSelector > button.btn-primary,
div.appHeader > nav > ul > li div.contextSelector > button.btn-primary:visited {
    box-sizing: border-box;
    border: 1px solid hsl(210, 11%, 84%);
    border-radius: 2px 2px 0px 0px;
    box-shadow: none;
    width: 260px;
    padding: 10px 12px 10px 12px;
    background: hsl(0, 0%, 100%);
    font-family: Quicksand, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: hsl(0, 0%, 30%);
}

div.appHeader > nav > ul > li div.accountMenu > button.btn-primary,
div.appHeader > nav > ul > li div.accountMenu > button.btn-primary:visited {
    box-sizing: border-box;
    border: 1px solid transparent;
    box-shadow: none;
    width: 260px;
    padding: 10px 12px 10px 12px;
    background: transparent;
    font-family: Quicksand, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: hsl(0, 0%, 30%);
}

div.appHeader > nav > ul > li div.btn-group > button.btn-primary:focus,
div.appHeader > nav > ul > li div.btn-group > button.btn-primary:hover,
div.appHeader > nav > ul > li div.btn-group > button.btn-primary:active,
div.appHeader > nav > ul > li div.btn-group.dropdown.open > button.btn-primary {
    border: 1px solid hsl(210, 11%, 84%);
    border-radius: 2px 2px 0px 0px;
    background: hsl(0, 0%, 100%);
    color: hsl(0, 0%, 30%);
}

/* safari does not allow for display flex on buttons so we need a container div */
div.appHeader > nav > ul > li div > button.btn-primary > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

div.appHeader > nav > ul > li div > button.btn-primary > div > span.name {
    width: 208px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.appHeader > nav > ul > li div.accountMenu > button.btn-primary > div > span.name {
    width: 180px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.appHeader > nav > ul > li div > button.btn-primary > div > span.arrow {
    content: url("../image/dropdown.arrow.svg");
}

div.appHeader > nav > ul > li div > ul.uib-dropdown-menu {
    box-shadow: none;
    width: 260px;
}

div.appHeader > nav > ul > li div > ul.uib-dropdown-menu > li > a,
div.appHeader > nav > ul > li div > ul.uib-dropdown-menu > li > a:link,
div.appHeader > nav > ul > li div > ul.uib-dropdown-menu > li > a:visited,
div.appHeader > nav > ul > li div > ul.uib-dropdown-menu > li > a:focus,
div.appHeader > nav > ul > li div > ul.uib-dropdown-menu > li > a:hover,
div.appHeader > nav > ul > li div > ul.uib-dropdown-menu > li > a:active {
    padding: 10px 12px 8px 12px;
    font-family: Quicksand, sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: normal;
    color: hsl(0, 0%, 30%);
}

div.appHeader > nav > ul > li div > ul.uib-dropdown-menu > li > a > span.name {
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.appHeader > nav > ul > li div > ul.uib-dropdown-menu > li.divider {
    margin: 0px;
}

div.appHeader > nav > ul > li div > ul.uib-dropdown-menu > li > a.new {
    display: flex;
    justify-content: center;
    align-items: center;
}

div.appHeader > nav > ul > li div > ul.uib-dropdown-menu > li > a.new > img {
    margin-right: 12px;
}

div.appHeader > nav > ul > li div > ul.uib-dropdown-menu > li > a.new > span.name {
    width: auto;
    margin-top: 3px;
    margin-bottom: 3px;
}

div.appWorkflowNav {
    margin-top: 40px;
}

div.appWorkflowNav > nav {
    margin: auto auto 0px auto;
    max-width: 1200px;
    border-bottom: 1px solid hsl(210, 11%, 84%);
}

div.appWorkflowNav > nav > ul {
    margin: 0px auto 0px auto;
    padding: 0px;
    display: table;
    text-align: center;
    list-style-type: none;
    white-space: nowrap;
}

div.appWorkflowNav > nav > ul > li {
    display: inline-block;
    transform: translatey(1px);
}

div.appWorkflowNav > nav > ul > li.active {
    border-bottom: 2px solid hsl(175, 46%, 55%);
}

div.appWorkflowNav > nav > ul > li > a {
    display: inline-block;
    padding: 10px 25px 10px 25px;
    font-size: 16px;
}

div.appWorkflowNav > nav > ul > li.active > a {
    color: hsl(0, 0%, 30%);
}

div.appFooter {
    margin-top: 100px;
}

div.appFooter > nav.navbar {
    margin: auto auto 0px auto;
    max-width: 1200px;
    border-top: .5px solid hsl(210, 11%, 84%);
    border-right: none;
    border-bottom: none;
    border-left: none;
    background-color: transparent;
}

div.appFooter > nav.navbar > ul {
    float:none;
    margin: auto;
    display: table;
    text-align: center;
    white-space: nowrap;
}

div.appFooter > nav.navbar > ul > li {
    display: inline-block;
}

div.appWorkflowHeader {
    margin: 40px auto 40px auto;
    width: 830px;
    padding-right: 15px;
    padding-left: 15px;
    display: flex;
    align-items: center;
    column-gap: 80px;
}

div.appWorkflowHeader > h3 {
    margin-top: auto;
    margin-bottom: auto;
    display: inline-block;
}

div.appWorkflowHeader > div.links {
    display: flex;
    column-gap: 20px;
}

div.appWorkflowHeader > div.links > a.iconLink.edit {
    margin-bottom: auto;
}

div.appWorkflowFooter {
    margin: 40px auto 40px auto;
    width: 830px;
    padding-right: 15px;
    padding-left: 15px;
    display: flex;
    align-items: center;
    column-gap: 80px;
}

div.breadcrumb {
    background-color: transparent;
    margin: 0px auto -23px auto;
    max-width: 1200px;
    padding: 0px;
}

div.breadcrumb.belowHeader {
    margin-top: 10px;
}

div.appContainer > div.help.topMargin {
    margin-top: 30px;
}

form > div.schema-form-array.recurringSchedule > ol > li {
    display: grid;
    grid-template-areas:
        "schemaFormArrayHandle schemaFormArrayDay schemaFormArrayStartTime schemaFormArrayEndTime schemaFormArrayTrash";
}

form > div.schema-form-array.recurringSchedule > ol > li::before {
    grid-area: schemaFormArrayHandle;
}

form > div.schema-form-array.recurringSchedule > ol > li > :nth-child(1) {
    grid-area: schemaFormArrayTrash;
}

form > div.schema-form-array.recurringSchedule > ol > li > :nth-child(2) {
    grid-area: schemaFormArrayDay;
}

form > div.schema-form-array.recurringSchedule > ol > li > :nth-child(2) > .form-control,
form > div.schema-form-array.recurringSchedule > ol > li > :nth-child(2) > .form-control:focus {
    width: 250px;
}

form > div.schema-form-array.recurringSchedule > ol > li > :nth-child(3) {
    grid-area: schemaFormArrayStartTime;
}

form > div.schema-form-array.recurringSchedule > ol > li > :nth-child(4) {
    grid-area: schemaFormArrayEndTime;
}

form > div.schema-form-array.recurringSchedule > ol > li > :nth-child(3) > .form-control,
form > div.schema-form-array.recurringSchedule > ol > li > :nth-child(3) > .form-control:focus,
form > div.schema-form-array.recurringSchedule > ol > li > :nth-child(4) > .form-control,
form > div.schema-form-array.recurringSchedule > ol > li > :nth-child(4) > .form-control:focus {
    margin-left: 26px;
    width: 115px;
}

form > div.schema-form-array.recurringSchedule > ol > li > div:nth-child(3)::after {
    position: absolute;
    top: -1px;
    left: 426px;
    content: url("../image/dash.svg");
    font-size: 32px;
    font-weight: 600;
}

form > div.schema-form-array.recurringSchedule > ol > li > div.has-error:nth-child(3) > .help-block,
form > div.schema-form-array.recurringSchedule > ol > li > div.has-error:nth-child(4) > .help-block {
    margin-left: 26px;
}

@media (max-width: 844px) {
    form > div.schema-form-array.recurringSchedule > ol > li > * > .form-control,
    form > div.schema-form-array.recurringSchedule > ol > li > * > .form-control:focus {
        width: initial;
        max-width: initial;
        min-width: initial;
    }
}

form > div.schema-form-array.calendarSchedule > ol > li {
    display: grid;
    grid-template-areas:
        "schemaFormArrayHandle schemaFormArrayDay schemaFormArrayStartTime schemaFormArrayEndTime schemaFormArrayTrash";
}

form > div.schema-form-array.calendarSchedule > ol > li::before {
    grid-area: schemaFormArrayHandle;
}

form > div.schema-form-array.calendarSchedule > ol > li > :nth-child(1) {
    grid-area: schemaFormArrayTrash;
}

form > div.schema-form-array.calendarSchedule > ol > li > :nth-child(2) {
    grid-area: schemaFormArrayDay;
}

form > div.schema-form-array.calendarSchedule > ol > li > :nth-child(2) > .form-control,
form > div.schema-form-array.calendarSchedule > ol > li > :nth-child(2) > .form-control:focus {
    width: 250px;
}

form > div.schema-form-array.calendarSchedule > ol > li > :nth-child(3) {
    grid-area: schemaFormArrayStartTime;
}

form > div.schema-form-array.calendarSchedule > ol > li > :nth-child(4) {
    grid-area: schemaFormArrayEndTime;
}

form > div.schema-form-array.calendarSchedule > ol > li > :nth-child(3) > .form-control,
form > div.schema-form-array.calendarSchedule > ol > li > :nth-child(3) > .form-control:focus,
form > div.schema-form-array.calendarSchedule > ol > li > :nth-child(4) > .form-control,
form > div.schema-form-array.calendarSchedule > ol > li > :nth-child(4) > .form-control:focus {
    margin-left: 26px;
    width: 115px;
}

form > div.schema-form-array.calendarSchedule > ol > li > div:nth-child(3)::after {
    position: absolute;
    top: -1px;
    left: 426px;
    content: url("../image/dash.svg");
    font-size: 32px;
    font-weight: 600;
}

form > div.schema-form-array.calendarSchedule > ol > li > div.has-error:nth-child(3) > .help-block,
form > div.schema-form-array.calendarSchedule > ol > li > div.has-error:nth-child(4) > .help-block {
    margin-left: 26px;
}

@media (max-width: 844px) {
    form > div.schema-form-array.calendarSchedule > ol > li > * > .form-control,
    form > div.schema-form-array.calendarSchedule > ol > li > * > .form-control:focus {
        width: initial;
        max-width: initial;
        min-width: initial;
    }
}

div.newRequests.orSeparator > hr {
    margin-top: 50px;
    margin-bottom: 50px;
    width: 365px;
}

.fileUploadWell {
    margin: 10px auto auto auto;
    border: 2px dashed hsl(210, 11%, 84%);
    border-radius: 2px;
    min-height: 90px;
    width: 800px;
    padding: 0px;
    background-color: transparent;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    letter-spacing: -0.04em;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 25px;
}

.fileUploadWell.hover {
    border: 2px dashed hsl(175, 46%, 55%);
}

@media (max-width: 990px) {
    .fileUploadWell {
        max-width: 100%;
    }
}

form[name=participantsManualEntryForm] > div:first-child {
    margin-top: 25px;
}

div.button-has-error.participantsCsvUpload {
    margin-top: 20px;
}

textarea#description,
textarea#body {
    height: 300px;
}

form[name=interceptorUpdaterForm] > div > textarea#body {
    height: 150px;
}

form > div.schema-form-array.questions > ol > li {
    display: grid;
    grid-template:
        "schemaFormArrayHandle schemaFormArrayType schemaFormArrayQuestion schemaFormArrayTrash"
        ". schemaFormArrayRequired schemaFormArrayOptions schemaFormArrayOptions"
        ". schemaFormArrayRandomize schemaFormArrayOptions schemaFormArrayOptions";
    grid-template-rows: auto 55px auto auto;
    margin-bottom: 30px;
}

form > div.schema-form-array.questions > ol > li::before {
    grid-area: schemaFormArrayHandle;
}

form > div.schema-form-array.questions > ol > li > :nth-child(1) {
    grid-area: schemaFormArrayTrash;
}

form > div.schema-form-array.questions > ol > li > :nth-child(2) {
    grid-area: schemaFormArrayType;
    margin-bottom: 0px;
}

form > div.schema-form-array.questions > ol > li > :nth-child(2) > .form-control,
form > div.schema-form-array.questions > ol > li > :nth-child(2) > .form-control:focus {
    width: 253px;
}

form > div.schema-form-array.questions > ol > li > :nth-child(3) {
    grid-area: schemaFormArrayQuestion;
    margin-bottom: 0px;
    margin-left: 16px;
}

form > div.schema-form-array.questions > ol > li > :nth-child(3) > .form-control,
form > div.schema-form-array.questions > ol > li > :nth-child(3) > .form-control:focus {
    width: 471px;
}

form > div.schema-form-array.questions > ol > li > :nth-child(4) {
    grid-area: schemaFormArrayRequired;
}

form > div.schema-form-array.questions > ol > li > :nth-child(5) {
    grid-area: schemaFormArrayRandomize;
}

form > div.schema-form-array.questions > ol > li > :nth-child(6) {
    grid-area: schemaFormArrayOptions;
}

form > div.schema-form-array.questions > ol > li > div.schema-form-array {
    margin-left: -12px;
}

form > div.schema-form-array.questions > ol > li > div.schema-form-array > ol > li > div > .form-control,
form > div.schema-form-array.questions > ol > li > div.schema-form-array > ol > li > div > .form-control:focus {
    width: 471px;
}

form > div.schema-form-array.questions > ol > li > button {
    margin-top: 0px;
}

form > div.schema-form-array.terminateConditions > ol > li {
    width: 100%;
}

form > div.schema-form-array.terminateConditions > ol > li:not(:first-child) {
    margin-top: 50px;
}

form > div.schema-form-array.terminateConditions > ol > li::before {
    display: none;
}

form > div.schema-form-array.terminateConditions > ol > li > div.schema-form-array > ol > li {
    column-gap: 20px;
}

form > div.schema-form-array.terminateConditions > ol > li > div.schema-form-array > ol > li::before {
    display: none;
}

form > div.schema-form-array.terminateConditions > ol > li > div.schema-form-array > ol > li > :nth-child(2) {
    flex-grow: 2;
}

div.placeholders {
    margin: 40px auto auto auto;
    width: 830px;
    padding-right: 15px;
    padding-left: 15px;
    display: flex;
    flex-wrap: wrap;
}

@media (max-width: 844px) {
    div.placeholders {
        width: 100%;
    }
}

div.placeholders > p.help {
    margin-bottom: 30px;
}

div.placeholders > span.placeholder {
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 15px;
    white-space: nowrap;
}

div.placeholders > span.placeholder.required {
    font-weight: 700;
    color: hsl(0, 0%, 21%);
}

table.appContainer > tbody > tr > td > div.appWorkflowHeader {
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
}

table.appContainer > tbody > tr > td > div.appWorkflowFooter {
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
}

table.appTable {
    margin-top: 30px;
    table-layout: fixed;
}

table.appTable > tbody > tr.focused {
    background-color: hsl(0, 0%, 94%);
}

table.appTable > tbody > tr > th,
table.appTable > tbody > tr > td {
    max-width: 500px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

table.appTable > tbody > tr > th {
    border-bottom: .5px solid hsl(210, 11%, 84%);
    padding: 0px 20px 5px 0px;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    letter-spacing: -0.04em;
    color: hsl(0, 0%, 21%);
}

table.appTable > tbody > tr > td {
    padding: 15px 75px 15px 0px;
}

table.appTable > tbody > tr > td:first-child {
    font-weight: 700;
}

table.appTable > tbody > tr > td.actions {
    max-width: none;
}

table.appTable > tbody > tr > td.actions > * {
    margin-left: 5px;
}

table.appTable > tbody > tr > td.actions > :first-child {
    margin-left: 0px;
}

table.appTable > tbody > tr > td.actions > div {
    padding-top: 15px;
    padding-bottom: 15px;
}

table.appTable > tbody > tr > td.tags {
    max-width: none;
}

table.appTable > tbody > tr > td.tags > tags-input > div.host > div.tags {
    max-width: 400px;
    width: auto;
    min-width: 200px;
}

table.appTable > tbody > tr > td:last-child {
     padding-right: 0px;
}

table.appTable > tbody > tr > td > div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

table.appTable > tbody > tr > td > div.list {
    margin-bottom: 10px;
}

table.appTable > tbody > tr > td > div.list:last-child {
    margin-bottom: 0px;
}

table.appTable > tbody > tr > td > div.status {
    display: flex;
    align-items: center;
}

table.appTable > tbody > tr > td > div.status > img {
    margin-right: 10px;
}

div.help,
p.help {
    margin-top: 10px;
}

div.filter {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

div.actions {
    margin-top: 20px;
    display: flex;
    column-gap: 15px;
}

tags-input {
    display: flex;
}

tags-input:focus {
    outline: none;
}

tags-input > div.host {
    display: inline-flex;
    margin-top: 0px;
    margin-bottom: 0px;
}

tags-input > div.host:focus {
    outline: none;
}

tags-input > div.host > div.tags {
    display: inline-flex;
    flex-wrap: wrap;
    border-radius: 2px;
    border-color: hsl(210, 11%, 84%);
    box-shadow: none;
    width: 400px;
    padding: 6px;
    overflow-x: auto;
}

tags-input > div.host > div.tags:focus {
    outline: none;
}

tags-input > div.host > div.tags > ul.tag-list:focus {
    outline: none;
}

tags-input > div.host > div.tags > ul.tag-list > li.tag-item {
    border: 1px solid hsl(0, 0%, 80%);
    background: hsl(0, 0%, 92%);
}

tags-input > div.host > div.tags > ul.tag-list > li.tag-item:focus {
    outline: none;
}

tags-input > div.host > div.tags > ul.tag-list > li.tag-item:last-child {
    margin-right: 10px;
}

tags-input > div.host > div.tags > ul.tag-list > li.tag-item > ti-tag-item:focus {
    outline: none;
}

tags-input > div.host > div.tags > ul.tag-list > li.tag-item > ti-tag-item > ng-include {
    white-space: nowrap;
}

tags-input > div.host > div.tags > ul.tag-list > li.tag-item > ti-tag-item > ng-include:focus {
    outline: none;
}

tags-input > div.host > div.tags > ul.tag-list > li.tag-item > ti-tag-item > ng-include > span {
    white-space: nowrap;
    font-family: Quicksand, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: hsl(0, 0%, 30%);
}

tags-input > div.host > div.tags > ul.tag-list > li.tag-item > ti-tag-item > ng-include > span:focus {
    outline: none;
}

tags-input > div.host > div.tags > ul.tag-list > li.tag-item > ti-tag-item > ng-include > a.remove-button,
tags-input > div.host > div.tags > ul.tag-list > li.tag-item > ti-tag-item > ng-include > a.remove-button:visited,
tags-input > div.host > div.tags > ul.tag-list > li.tag-item > ti-tag-item > ng-include > a.remove-button:focus,
tags-input > div.host > div.tags > ul.tag-list > li.tag-item > ti-tag-item > ng-include > a.remove-button:hover,
tags-input > div.host > div.tags > ul.tag-list > li.tag-item > ti-tag-item > ng-include > a.remove-button:active {
    outline: none;
    color: hsl(0, 0%, 30%);
    text-decoration: none;
}

tags-input > div.host > div.tags > input.input {
    -webkit-appearance: none;
    -moz-appearance: none;
    min-width: 125px;
    padding-left: 0px;
    font-family: Quicksand, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: hsl(0, 0%, 30%);
}

tags-input > div.host > div.tags > input.input::-webkit-input-placeholder {
    color: hsl(0, 0%, 67%);
}

tags-input > div.host > div.tags > input.input::-moz-placeholder {
    color: hsl(0, 0%, 67%);
}

tags-input > div.host > div.tags > input.input:-ms-input-placeholder {
    color: hsl(0, 0%, 67%);
}

tags-input > div.host > div.tags > input.input:-moz-placeholder {
    color: hsl(0, 0%, 67%);
}

form[name=participantSearchFiltersForm] {
    flex-wrap: wrap;
}

form[name=participantScheduleFiltersForm] {
    margin-top: 20px;   /* decrease from 30px to 20px since it's not the first line of filters */
    flex-wrap: wrap;
}

form[name=participantDetailFiltersForm] {
    margin-top: 20px;   /* decrease from 30px to 20px since it's not the first line of filters */
    flex-wrap: wrap;
}

form > div.schema-form-array.detailFilters {
    display: flex;
    flex-direction: column;
}

form > div.schema-form-array.detailFilters > ol {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

form > div.schema-form-array.detailFilters > ol > li {
    width: auto;
    display: grid;
    align-items: center;
}

form > div.schema-form-array.detailFilters > ol > li {
    grid-template-columns: 20px 8px 450px 12px 20px;
    grid-template-areas: "schemaFormArrayHandle . schemaFormArrayQuestion . schemaFormArrayTrash";
}

form > div.schema-form-array.detailFilters > ol > li::before {
    grid-area: schemaFormArrayHandle;
    margin-right: 0px;
    padding-top: 0px;
}

form > div.schema-form-array.detailFilters > ol > li > :nth-child(1) {
    grid-area: schemaFormArrayQuestion;
    width: 100%;
}

form > div.schema-form-array.detailFilters > ol > li > :nth-child(2) {
    grid-area: schemaFormArrayTrash;
    margin-left: 0px;
}

form > div.schema-form-array.detailFilters > ol > li > button.close {
    margin-top: 8px;
}

form > div.schema-form-array.detailFilters > ol > li.dropdown,
form > div.schema-form-array.detailFilters > ol > li.state,
form > div.schema-form-array.detailFilters > ol > li.country {
    grid-template-columns: 20px 8px 450px 30px 270px 12px 20px;
    grid-template-areas: "schemaFormArrayHandle . schemaFormArrayQuestion . schemaFormArrayDropdownValue . schemaFormArrayTrash";
}

form > div.schema-form-array.detailFilters > ol > li.dropdown > :nth-child(1),
form > div.schema-form-array.detailFilters > ol > li.state > :nth-child(1),
form > div.schema-form-array.detailFilters > ol > li.country > :nth-child(1) {
    grid-area: schemaFormArrayQuestion;
    width: 100%;
}

form > div.schema-form-array.detailFilters > ol > li.dropdown > :nth-child(2),
form > div.schema-form-array.detailFilters > ol > li.state > :nth-child(2),
form > div.schema-form-array.detailFilters > ol > li.country > :nth-child(2) {
    grid-area: schemaFormArrayDropdownValue;
    width: 100%;
}

form > div.schema-form-array.detailFilters > ol > li.dropdown > :nth-child(3),
form > div.schema-form-array.detailFilters > ol > li.state > :nth-child(3),
form > div.schema-form-array.detailFilters > ol > li.country > :nth-child(3) {
    grid-area: schemaFormArrayTrash;
    margin-left: 0px;
}

form > div.schema-form-array.detailFilters > ol > li.number {
    grid-template-columns: 20px 8px 450px 30px 120px 30px 120px 12px 20px;
    grid-template-areas: "schemaFormArrayHandle . schemaFormArrayQuestion . schemaFormArrayMinValue . schemaFormArrayMaxValue . schemaFormArrayTrash";
}

form > div.schema-form-array.detailFilters > ol > li.number > :nth-child(1) {
    grid-area: schemaFormArrayQuestion;
    width: 100%;
}

form > div.schema-form-array.detailFilters > ol > li.number > :nth-child(2) {
    grid-area: schemaFormArrayMinValue;
    width: 100%;
}

form > div.schema-form-array.detailFilters > ol > li.number > :nth-child(3) {
    grid-area: schemaFormArrayMaxValue;
    width: 100%;
}

form > div.schema-form-array.detailFilters > ol > li.number > :nth-child(4) {
    grid-area: schemaFormArrayTrash;
    margin-left: 0px;
}

form > div.schema-form-array.detailFilters > div > button.btn.btn-default,
form > div.schema-form-array.detailFilters > div > button.btn.btn-default:visited {
    margin-left: 0px;
}

form > div.schema-form-array.detailFilters > ol + div {
    margin-top: 20px;
    margin-left: 28px;
}

form[name=participantDateFiltersForm] {
    margin-top: 20px;   /* decrease from 30px to 20px since it's not the first line of filters */
    flex-wrap: wrap;
}

form[name=participantDateFiltersForm] > div.datePicker > input.form-control {
    width: 375px;
}

div.button-has-error.allParticipants {
    margin-top: 30px;
}

table.appTable.allParticipants > tbody > tr > td > div.longText {
    min-width: 500px;
}

table.appTable.allParticipants > tbody > tr > td > div {
    white-space: normal;
}

table.appTable.allParticipants > tbody > tr > td > div.firstName,
table.appTable.allParticipants > tbody > tr > td > div.lastName,
table.appTable.allParticipants > tbody > tr > td > div.email,
table.appTable.allParticipants > tbody > tr > td > div.phoneNumber,
table.appTable.allParticipants > tbody > tr > td > div.country,
table.appTable.allParticipants > tbody > tr > td > div.state,
table.appTable.allParticipants > tbody > tr > td.timezone > div,
table.appTable.allParticipants > tbody > tr > td.createTime > div,
table.appTable.allParticipants > tbody > tr > td.inviteTime > div,
table.appTable.allParticipants > tbody > tr > td.interviewTime > div,
table.appTable.allParticipants > tbody > tr > td.incentiveRequestTime > div,
table.appTable.allParticipants > tbody > tr > td.availability > div {
    white-space: nowrap;
}

table.appTable.allParticipants > tbody > tr > td.availability > button {
    margin-top: 5px;
}

table.appTable.allParticipants > tbody > tr > td.availability > a {
    display: block;
}

div.button-has-error.upcomingParticipants {
    margin-top: 30px;
}

table.availabilityCalendar {
    margin-top: 30px;
    min-width: 1200px;  /* when lowering this, check that the upcomingParticipants form does not wrap */
    table-layout: fixed;
}

table.availabilityCalendar > tbody > tr:first-child > th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    letter-spacing: -0.04em;
    color: hsl(0, 0%, 21%);
}

table.availabilityCalendar > tbody > tr:first-child > th > div.day {
    font-size: 14px;
    font-weight: 400;
    color: hsl(0, 0%, 73%);
}

table.availabilityCalendar > tbody > tr > th,
table.availabilityCalendar > tbody > tr > td {
    border: .5px solid hsl(210, 11%, 84%);
    min-width: 200px;
    background-color: hsl(0, 0%, 100%);
}

table.availabilityCalendar > tbody > tr > th {
    padding: 20px;
}

table.availabilityCalendar > tbody > tr > td {
    padding: 5px 20px 5px 20px;
}

table.availabilityCalendar > tbody > tr > th:first-child,
table.availabilityCalendar > tbody > tr > td:first-child {
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    font-family: Montserrat, sans-serif;
    font-weight: 500;
    letter-spacing: -0.04em;
    color: hsl(0, 0%, 21%);
}

table.availabilityCalendar > tbody > tr > th.separator,
table.availabilityCalendar > tbody > tr > td.separator {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    padding-right: 0px;
    padding-left: 0px;
    background-color: hsl(0, 0%, 98%);
}

table.availabilityCalendar > tbody > tr > th.noTopBorder,
table.availabilityCalendar > tbody > tr > td.noTopBorder {
    border-top: none;
}

table.availabilityCalendar > tbody > tr > th.noRightBorder,
table.availabilityCalendar > tbody > tr > td.noRightBorder {
    border-right: none;
}

table.availabilityCalendar > tbody > tr > th.noBottomBorder,
table.availabilityCalendar > tbody > tr > td.noBottomBorder {
    border-bottom: none;
}

table.availabilityCalendar > tbody > tr > th.noLeftBorder,
table.availabilityCalendar > tbody > tr > td.noLeftBorder {
    border-left: none;
}

table.availabilityCalendar > tbody > tr > th.topCutout.bottomCutout,
table.availabilityCalendar > tbody > tr > td.topCutout.bottomCutout {
    background-image: url("../image/triangle.down.svg"), url("../image/triangle.up.svg");
    background-position: left top, left bottom;
    background-repeat: repeat-x;
}

table.availabilityCalendar > tbody > tr > th.rightCutout.leftCutout,
table.availabilityCalendar > tbody > tr > td.rightCutout.leftCutout {
    background-image: url("../image/triangle.left.svg"), url("../image/triangle.right.svg");
    background-position: right top, left top;
    background-repeat: repeat-y;
}

table.availabilityCalendar > tbody > tr > td > span > button {
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 4px;
    padding: 10px 12px 10px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: 500;
}

table.availabilityCalendar > tbody > tr > td > span > button.btn-primary,
table.availabilityCalendar > tbody > tr > td > span > button.btn-primary:visited {
    background-color: hsl(175, 46%, 93%);
    color: hsl(175, 46%, 45%);
}

table.availabilityCalendar > tbody > tr > td > span > button.btn-primary:focus,
table.availabilityCalendar > tbody > tr > td > span > button.btn-primary:hover {
    background-color: hsl(175, 46%, 88%);
    color: hsl(175, 46%, 45%);
}

table.availabilityCalendar > tbody > tr > td > span > button.btn-primary:active {
    background-color: hsl(175, 46%, 93%);
    color: hsl(175, 46%, 45%);
}

table.availabilityCalendar > tbody > tr > td > span > button.btn-secondary,
table.availabilityCalendar > tbody > tr > td > span > button.btn-secondary:visited {
    background-color: hsl(0, 0%, 96%);
    color: hsl(0, 0%, 45%);
}

table.availabilityCalendar > tbody > tr > td > span > button.btn-secondary:focus,
table.availabilityCalendar > tbody > tr > td > span > button.btn-secondary:hover {
    background-color: hsl(0, 0%, 91%);
    color: hsl(0, 0%, 45%);
}

table.availabilityCalendar > tbody > tr > td > span > button.btn-secondary:active {
    background-color: hsl(0, 0%, 96%);
    color: hsl(0, 0%, 45%);
}

table.availabilityCalendar > tbody > tr > td > span > div.popover {
    border: none;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.16);
}

table.availabilityCalendar > tbody > tr > td > span > div.popover > div.arrow {
    display: none;
}

table.availabilityCalendar > tbody > tr > td > span > div.popover > div.popover-inner {
    background-color: hsl(0, 0%, 100%);
}

table.availabilityCalendar > tbody > tr > td > span > div.popover > div.popover-inner::after {
    position: absolute;
    z-index: -1;
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.16);
    background-color: hsl(0, 0%, 100%);
    content: "";
}

table.availabilityCalendar > tbody > tr > td > span > div.popover.top > div.popover-inner::after {
    left: 50%;
    bottom: -7px;
    margin-left: -7px;
}

table.availabilityCalendar > tbody > tr > td > span > div.popover.right > div.popover-inner::after {
    top: 50%;
    left: -7px;
    margin-top: -7px;
}

table.availabilityCalendar > tbody > tr > td > span > div.popover.bottom > div.popover-inner::after {
    left: 50%;
    top: -7px;
    margin-left: -7px;
}

table.availabilityCalendar > tbody > tr > td > span > div.popover.left > div.popover-inner::after {
    top: 50%;
    right: -7px;
    margin-top: -7px;
}

table.availabilityCalendar > tbody > tr > td > span > div.popover > div.popover-inner > div.popover-content > div.label {
    margin-top: 15px;
    padding: 0px;
    display: flex;
    align-items: center;
    font-family: Montserrat, sans-serif;
    font-weight: 300;
    letter-spacing: -0.04em;
    font-size: 14px;
    color: hsl(0, 0%, 73%);
}

table.availabilityCalendar > tbody > tr > td > span > div.popover > div.popover-inner > div.popover-content > div.label.status {
    margin-top: -5px;
    margin-bottom: 5px;
    display: block;
    text-align: center;
    font-weight: 600;
}

table.availabilityCalendar > tbody > tr > td > span > div.popover > div.popover-inner > div.popover-content > div.label.status.scheduled {
    color: hsl(175, 46%, 45%);
}

table.availabilityCalendar > tbody > tr > td > span > div.popover > div.popover-inner > div.popover-content > div.label > span {
    display: inline-block;
}

table.availabilityCalendar > tbody > tr > td > span > div.popover > div.popover-inner > div.popover-content > div.label > span:first-child {
    width: 35px;
}

table.availabilityCalendar > tbody > tr > td > span > div.popover > div.popover-inner > div.popover-content > div.value {
    margin-left: 35px;
    margin-right: 10px;
    width: 190px;
    word-wrap: break-word;
    font-family: Quicksand, sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: hsl(0, 0%, 21%);
}

table.availabilityCalendar > tbody > tr > td > span > div.popover > div.popover-inner > div.popover-content > div.value.status {
    margin: 5px auto 3px auto;
    width: 100%;
    text-align: center;
}

table.availabilityCalendar > tbody > tr > td > span > div.popover > div.popover-inner > div.popover-content > a.moreDetails,
table.availabilityCalendar > tbody > tr > td > span > div.popover > div.popover-inner > div.popover-content > a.moreDetails:link,
table.availabilityCalendar > tbody > tr > td > span > div.popover > div.popover-inner > div.popover-content > a.moreDetails:visited,
table.availabilityCalendar > tbody > tr > td > span > div.popover > div.popover-inner > div.popover-content > a.moreDetails:focus,
table.availabilityCalendar > tbody > tr > td > span > div.popover > div.popover-inner > div.popover-content > a.moreDetails:hover,
table.availabilityCalendar > tbody > tr > td > span > div.popover > div.popover-inner > div.popover-content > a.moreDetails:active {
    display: block;
    margin-top: 15px;
    text-align: center;
}

table.availabilityCalendar > tbody > tr > td > span > div.popover > div.popover-inner > div.popover-content > hr {
    margin-right: -15px;
    margin-left: -15px;
    border: .5px solid hsl(0, 0%, 90%);
}

div.button-has-error.scheduledParticipants {
    margin-top: 30px;
}

table.formContext {
    margin: 40px auto auto auto;
}

table.formContext > tbody > tr > th {
    width: 200px;
    padding-right: 15px;
    padding-left: 10px;
}

table.formContext > tbody > tr > td {
    width: 615px;
    padding-right: 15px;
    padding-left: 20px;
}

@media (max-width: 844px) {
    table.formContext > tbody > tr > th,
    table.formContext > tbody > tr > td {
        padding-right: 15px;
        padding-left: 15px;
    }
}

div.projectAnalysis.orSeparator > hr {
    margin-top: 50px;
    margin-bottom: 50px;
    width: 800px;
}

div.appContainer.aggregateAnalysis {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 20px;
}

ul.researchQuestionResponse {
    list-style: none;
    padding-left: 0px;
}

ul.researchQuestionResponse > li {
    border: .25px solid hsl(0, 0%, 85%);
    border-radius: 8px;
    padding: 20px 30px 30px 30px;
    background-color: hsl(0, 0%, 100%);
}

ul.researchQuestionResponse > li:not(:first-child) {
    margin-top: 20px;
}

ul.researchQuestionResponse > li > h4 {
    margin-bottom: 20px;
}

ul.researchQuestionResponse > li > div {
    white-space: pre-wrap;
}

ul.researchQuestionResponse > li > ul {
    padding-left: 0px;
    display: flex;
    flex-direction: column;
    row-gap: 12px;
}

ul.researchQuestionResponse > li > ul > li {
    list-style-type:none;
    margin-bottom: 20px;
}

ul.researchQuestionResponse > li > ul > li > p {
    margin-bottom: 3px;
}

ul.researchQuestionResponse > li > ul > li > p > span:first-child {
    font-weight: 900;
}

ul.researchQuestionResponse > li > ul > li > p > span.name {
    font-weight: 900;
    font-style: italic;
    color: hsl(0, 0%, 21%);
}

ul.researchQuestionResponse > li > ul > li > p > span.quote {
    margin-right: 4px;
}

div.researchQuestionActions {
    margin-top: 15px;
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(2, auto);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

div.researchQuestionActions > div.button-has-error {
    grid-column: 1 / 3;
}

form[name=researchQuestionPromptUpdaterForm] > div textarea.form-control[name=question],
form[name=researchQuestionPromptUpdaterForm] > div textarea.form-control[name=question]:focus {
    height: 75px;
}

form[name=researchQuestionPromptUpdaterForm] > div.promptAggregate textarea.form-control[name=prompt],
form[name=researchQuestionPromptUpdaterForm] > div.promptAggregate textarea.form-control[name=prompt]:focus,
form[name=researchQuestionPromptUpdaterForm] > div.promptInterview textarea.form-control[name=prompt],
form[name=researchQuestionPromptUpdaterForm] > div.promptInterview textarea.form-control[name=prompt]:focus {
    height: 600px;
}

table.appContainer.recordingAnalyzer > tbody > tr > td > h4:not(:first-child) {
    margin-top: 100px;
}

table.appContainer.recordingAnalyzer > tbody > tr > td > div:not(:first-child) {
    margin-top: 50px;
}

table.appContainer.recordingAnalyzer > tbody > tr > td > div > * {
    margin-top: 50px;
}

table.appContainer.recordingAnalyzer > tbody > tr > td > div > h5 {
    font-size: 24px;
}

table.appContainer.recordingAnalyzer > tbody > tr > td > div > div.question {
    max-width: 800px;
}

table.appContainer.recordingAnalyzer > tbody > tr > td > div > div.prompt {
    max-width: 800px;
    white-space: break-spaces;
}

table.appContainer.recordingAnalyzer > tbody > tr > td > div > form {
    margin-right: 25px;
    display: inline-grid;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: repeat(2, auto);
    grid-column-gap: 5px;
    grid-auto-flow: column;
    justify-items: start;
    align-items: start;
}

table.appContainer.recordingAnalyzer > tbody > tr > td > div > form > textarea {
    grid-column: span 4;
    height: 400px;
    width: 650px;
}

table.appContainer.recordingAnalyzer > tbody > tr > td > div > button {
    display: block;
}

div.appWorkflowHeader.recordingAnalysis {
    column-gap: 15px;
}

div.appWorkflowHeader.interviewTranscript {
    margin-bottom: 25px;
    display: grid;
    grid-template-columns: minmax(auto, auto) minmax(auto, auto) 1fr;
    grid-template-rows: repeat(2, auto);
    grid-column-gap: 15px;
    grid-row-gap: 15px;
}

div.appWorkflowHeader.interviewTranscript > div.button-has-error {
    grid-column: 1 / 4;
}

div.settingsSection {
    margin: 30px auto 60px auto;
    width: 1200px;
    padding-right: 15px;
    padding-left: 15px;
    display: flex;
}

div.settingsSection h4 {
    font-weight: 600;
}

div.settingsSection h5 {
    font-size: 16px;
    font-weight: 400;
    color: hsl(0, 0%, 45%);
}

div.settingsSection > h4 {
    width: 250px;
    min-width: 250px;
    font-weight: 500;
}

div.settingsSection > div {
    margin-right: 90px;
}

div.settingsSection > div > div.help {
    margin-top: 10px;
    margin-bottom: 20px;
}

div.settingsSection > div > table.appTable {
    margin-top: 10px;
}

div.settingsSection > form > div {
    padding-left: 0px;
}

@media (max-width: 844px) {
    div.settingsSection > form > div.schema-form-submit {
        padding-left: 0px;
    }
}

@media (max-width: 844px) {
    div.settingsSection > form > div.helpvalue.has-error {
        padding-left: 0px;
    }
}

div.settingsSection div.button-has-error {
    margin-top: 20px;
}

hr.sectionSeparator.settings {
    margin: 0px auto 60px auto;
    width: 1200px;
}

div.settingsSection.organizationDeleter {
    width: 830px;
}

div.settingsSection.organizationDeleter > h4 {
    width: 200px;
    min-width: 200px;
}

div.settingsSection.projectCopier {
    width: 830px;
}

div.settingsSection.projectCopier > h4 {
    width: 200px;
    min-width: 200px;
}

div.settingsSection.projectDeleter {
    width: 830px;
}

div.settingsSection.projectDeleter > h4 {
    width: 200px;
    min-width: 200px;
}

div.currentSubscription > div {
    font-size: 14px;
    color: hsl(0, 0%, 73%);
}

div.settingsSection.planSelector {
    margin-bottom: 30px;
}

div.wizardStep {
    margin: 20px auto 60px auto;
    width: 830px;
    padding-right: 15px;
    padding-left: 15px;
    display: flex;
}

hr.sectionSeparator.wizard {
    margin: auto;
    width: 800px;
}

div.wizardNav {
    margin: 30px auto 30px auto;
    width: 830px;
    padding-right: 15px;
    padding-left: 15px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

div.wizardStep > form > div {
    margin-top: 20px;
    max-width: 500px;
    padding-right: 0px;
    padding-left: 0px;
}

div.wizardStep > form > div:first-child {
    margin-top: 0px;
}

div.wizardStep > form > div > label.control-label,
div.wizardStep > form > div.has-success > label.control-label,
div.wizardStep > form > div.has-error > label.control-label {
    width: 140px;
    max-width: 140px;
    min-width: 140px;
}

div.wizardStep > form > div .form-control,
div.wizardStep > form > div .form-control:focus {
    width: 350px;
}

div.wizardStep > form > div > .help-block {
    width: 350px;
}

div.wizardStep > form > div.helpvalue.has-error {
    margin-left: 150px;
    padding-left: 0px;
    width: 350px;
}

div.wizardStep.addOnContainer > div.addOn > label {
    margin-top: 25px;
}

div.wizardStep.tosContainer {
    flex-direction: column;
}

div.wizardStep.tosContainer > div.termsBody {
    margin-bottom: 40px;
    height: 400px;
    overflow: auto;
}

div.appWorkflowHeader.planPurchaser {
    width: 1120px;
}

div.wizardStep.planPurchaser {
    margin: 35px auto 60px auto;
    width: 1120px;
    column-gap: 90px;
}

hr.sectionSeparator.wizard.planPurchaser {
    width: 1090px;
}

div.wizardNav.planPurchaser {
    width: 1120px;
}

@media (max-width: 1140px) {
    div.appWorkflowHeader.planPurchaser {
        width: 100%;
    }

    div.wizardStep.planPurchaser {
        width: 100%;
        flex-direction: column-reverse;
        row-gap: 50px;
    }

    div.wizardStep.planPurchaser > form > div {
        margin-right: 0px;
        margin-left: 0px;
        grid-template-columns: none;
        grid-template-rows: none;
    }

    div.wizardStep.planPurchaser > form > div > label.control-label,
    div.wizardStep.planPurchaser > form > div.has-success > label.control-label,
    div.wizardStep.planPurchaser > form > div.has-error > label.control-label {
        width: 100%;
        max-width: 100%;
    }

    div.wizardStep.planPurchaser > form > div .form-control,
    div.wizardStep.planPurchaser > form > div .form-control:focus {
        width: 100%;
        max-width: 100%;
    }

    div.wizardStep.planPurchaser > form > div.helpvalue.has-error {
        margin-left: 0px;
    }

    hr.sectionSeparator.wizard.planPurchaser {
        width: 100%;
    }

    div.wizardNav.planPurchaser {
        width: 100%;
    }
}

div.planPurchaserSummary {
    box-sizing: border-box;
    border-radius: 2px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    width: 500px;
    padding: 20px 40px 20px 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

div.planPurchaserSummary > h4.header {
    width: 100%;
    line-height: normal;
}

div.planPurchaserSummary > h6 {
    margin-top: 20px;
    margin-bottom: 0px;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: hsl(0, 0%, 73%);
}

div.planPurchaserSummary > h6.plan,
div.planPurchaserSummary > h6.organization {
    width: 190px;
}

div.planPurchaserSummary > h6.addOn {
    width: 100%;
}

div.planPurchaserSummary > h4.plan,
div.planPurchaserSummary > h4.addOn,
div.planPurchaserSummary > h4.organization {
    margin-top: 0px;
    font-family: Quicksand, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.planPurchaserSummary > h4.plan,
div.planPurchaserSummary > h4.organization {
    width: 190px;
}

div.planPurchaserSummary > h4.addOn {
    width: 100%;
}

div.planPurchaserSummary > h5 {
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: hsl(0, 0%, 73%);
}

div.planPurchaserSummary > h4.nonrecurringSubtotal,
div.planPurchaserSummary > h4.nonrecurringTotal,
div.planPurchaserSummary > h4.recurringTotal {
    font-family: Quicksand, sans-serif;
    font-weight: 600;
    line-height: normal;
}

div.planPurchaserSummary > h4.nonrecurringTotal.tbd {
    font-size: 16px;
    font-weight: 500;
    color: hsl(0, 0%, 45%);
}

div.planPurchaserSummary > h4 > span {
    font-size: 14px;
    font-weight: 400;
    color: hsl(0, 0%, 73%);
}

div.planPurchaserSummary > hr {
    width: 100%;
}

div.wizardStep.purchaseConfirmation {
    margin: 60px auto 30px auto;
    box-sizing: border-box;
    border-radius: 2px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    width: 610px;
    padding: 20px 80px 30px 80px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

div.wizardStep.purchaseConfirmation > img {
    margin: 10px auto auto auto;
}

div.purchaseConfirmation > h4.header {
    margin-top: 0px;
    width: 100%;
    text-align: center;
    font-family: Quicksand, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: normal;
}

div.purchaseConfirmation > h4.header.first {
    margin-top: 30px;
}

div.purchaseConfirmation > h6 {
    margin-top: 40px;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: hsl(0, 0%, 73%);
}

div.purchaseConfirmation > h6.plan {
    width: 250px;
}

div.purchaseConfirmation > h6.organization {
    width: 200px;
}

div.purchaseConfirmation > h6.addOn {
    width: 100%;
}

div.purchaseConfirmation > h6.first {
    margin-top: 40px;
}

div.purchaseConfirmation > h4.plan,
div.purchaseConfirmation > h4.addOn,
div.purchaseConfirmation > h4.organization {
    margin-top: 0px;
    font-family: Quicksand, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.purchaseConfirmation > h4.plan {
    width: 250px;
}

div.purchaseConfirmation > h4.organization {
    width: 200px;
}

div.purchaseConfirmation > h4.addOn {
    width: 100%;
}

div.purchaseConfirmation > h4.addOn.last {
    margin-bottom: 30px;
}

div.purchaseConfirmation > h5 {
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    color: hsl(0, 0%, 73%);
}

div.purchaseConfirmation > h4.nonrecurringSubtotal,
div.purchaseConfirmation > h4.nonrecurringTotal,
div.purchaseConfirmation > h4.recurringTotal {
    font-family: Quicksand, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: normal;
}

div.purchaseConfirmation > h4 > span {
    font-size: 14px;
    font-weight: 400;
    color: hsl(0, 0%, 73%);
}

div.purchaseConfirmation > hr {
    width: 100%;
}

div.breadcrumb.purchaseConfirmation {
    margin-top: 0px;
    margin-bottom: 0px;
    max-width: 650px;
}

table.appTable.invoices > tbody > tr > td {
    padding-top: 25px;
    padding-bottom: 25px;
}

div.appWorkflowHeader.subscription {
    width: 1200px;
}

div.screenerWorkflowHeader,
div.surveyWorkflowHeader {
    margin: 40px auto 20px auto;
    max-width: 830px;
    padding-right: 15px;
    padding-left: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

div.screenerWorkflowHeader > h3,
div.surveyWorkflowHeader > h3 {
    margin-bottom: 0px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
    line-height: normal;
}

div.screenerWorkflowHeader > div,
div.surveyWorkflowHeader > div {
    color: hsl(0, 0%, 30%);
}

@media (max-width: 844px) {
    div.screenerWorkflowHeader > div,
    div.surveyWorkflowHeader > div {
        margin-top: 5px;
        width: 100%;
    }
}

div.screenerWorkflowHeader > form > div,
div.surveyWorkflowHeader > form > div {
    margin-top: 0px;
}

div.screenerWorkflowHeader > form > div > select.form-control,
div.screenerWorkflowHeader > form > div > select.form-control:focus,
div.surveyWorkflowHeader > form > div > select.form-control,
div.surveyWorkflowHeader > form > div > select.form-control:focus {
    border: none;
    width: auto;
    padding-left: 0px;
    background-color: transparent;
}

@media (max-width: 844px) {
    div.screenerWorkflowHeader > form > div,
    div.surveyWorkflowHeader > form > div {
        margin-top: 20px;
        padding-left: 0px;
    }
}

div.wizardStep.screener {
    margin-bottom: 0px;
}

@media (max-width: 844px) {
    div.wizardStep.screener {
        width: 100%;
    }
}

div.wizardNav.screener,
div.wizardNav.survey {
    position: sticky;
    bottom: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    border-top: 2px solid hsl(0, 0%, 95%);
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: hsl(0, 0%, 98%);
    justify-content: flex-end;
    flex-wrap: wrap;
}

div.button-has-error.screener {
    padding-right: 15px;
    padding-left: 15px;
}

@media (max-width: 844px) {
    div.wizardNav.screener,
    div.wizardNav.survey {
        width: 100%;
    }
}

div.availabilityAccordion {
    margin-bottom: 30px;
}

div.availabilityAccordion h5 {
    font-size: 16px;
    font-weight: 600;
}

div.availabilityAccordion button.btn,
div.availabilityAccordion button.btn:visited,
div.availabilityAccordion button.btn:focus,
div.availabilityAccordion button.btn:hover,
div.availabilityAccordion button.btn:active {
    margin-right: 12px;
    margin-bottom: 18px;
    padding: 8px 14px;
    background-color: hsl(0, 0%, 100%);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
}

div.availabilityAccordion button.btn.btn-primary,
div.availabilityAccordion button.btn.btn-primary:visited,
div.availabilityAccordion button.btn.btn-primary:focus,
div.availabilityAccordion button.btn.btn-primary:hover,
div.availabilityAccordion button.btn.btn-primary:active {
    border: 1px solid hsl(175, 46%, 55%);
    color: hsl(175, 46%, 55%);
}

div.availabilityAccordion button.btn.btn-secondary,
div.availabilityAccordion button.btn.btn-secondary:visited,
div.availabilityAccordion button.btn.btn-secondary:focus,
div.availabilityAccordion button.btn.btn-secondary:hover,
div.availabilityAccordion button.btn.btn-secondary:active {
    border: 1px solid hsl(0, 0%, 80%);
    color: hsl(0, 0%, 55%);
}

form[name=participantDetailUpdaterForm] {
    margin-bottom: 50px;
}

form[name=participantDetailUpdaterForm] > div.schema-form-checkbox {
    margin-bottom: 30px;
}

div.wizardNav.screener.participantDetailUpdater {
    justify-content: space-between;
}

div.wizardNav.survey.participantDetailUpdater {
    justify-content: flex-end;
}

div.wizardStep.confirmation {
    margin-top: 100px;
    margin-bottom: 100px;
    width: 100%;
    max-width: 600px;
    flex-direction: column;
    align-items: center;
}

div.wizardStep.confirmation > h3 {
    margin-top: 40px;
    text-align: center;
}

div.wizardStep.confirmation > div {
    text-align: center;
}