p.questionnaireTitle {
    position: absolute;
    text-align: center;
}

div.questionnaireViewContainer {
    transition: transform 0.5s ease-out;
    text-align: center;
    position: absolute;
    left: calc(100% - 115px);
    background-color: hsl(0, 0%, 100%);
    width: calc(100% - 230px);
    top: 120px;
    height: calc(100% - 120px);
    box-sizing: border-box;
    z-index: 10;
    min-width: 700px;
}

div.questionContainer, div.reorderQuestionContainer, div.reorderFormContainer, div.containerBottomBar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 70px;
    right: 95px;
    padding: 10px;
    overflow: auto;
}

/*list item*/

div.questionnaire-list-item, div.linked-questionnaire-list-item  {
    cursor: pointer;
    position: relative;
    padding: 15px;
    display: block;
    vertical-align: top;
    border-top: solid 1px hsl(0, 0%, 25%);
    min-height: unset !important;
}

div.questionnaire-list-item > div {
    position: relative;
    display: inline-block;
    vertical-align: top;
}

div.questionnaire-list-item p {
    padding: 5px 0 !important;
    line-height: 135% !important;
}

div.questionnaire-list-item > div:first-child {
    width: calc(100% - 100px);
}

div.questionnaire-list-item > div:last-child {
    width: 100px;
}

div.questionnaire-list-item .qnaire-version {
    font-size: 14pt;
}


div.questionnaire-list-item .QuestionnaireAccess {
    height: auto;
}

/* linked list item */

div.linked-questionnaire-list-item p.listItemTitle {
    color: hsl(150, 100%, 55%) !important;
    display: inline-block;
    padding-left: 35px !important;
}


.qnaire-link-icon {
    display: none;
}

div.questionnaire-list-item .qnaire-link-icon {
    top: 2px;
    padding: 5px;
    margin-right: 5px;
    cursor: default;
    position: absolute;
    display: inline-flex;
    align-items: center;
    height: 24px;
    width: 24px;
}

svg.qnaire-link-icon-svg {
    fill: hsl(150, 100%, 55%) !important;
    height: 30px;
    width: 30px;
    margin: 0;
}

div.questionnaire-list-item svg.qnaire-link-icon-svg {
    height: 24px;
    width: 24px;
}

div.questionnaire-list-item-access-row {
    position: relative;
    display: block;
}

div.button-questionnaire-list-item, div.button-questionnaire-update {
    cursor: pointer;
    display: inline-block;
    background-color: hsl(0, 0%, 20%);
    color: hsl(0, 0%, 100%) !important;
    border: solid 1px hsla(0, 0%, 100%, 0.50) !important;
    position: relative;
    height: 40px;
    width: 80px;
    margin: 5px;
    border-radius: 5px;
    user-select: none;
    text-align: center;
    line-height: 42px;
    float: right;
    pointer-events: all;
}

div.button-questionnaire-update {
    float: none;
    height: 100%;
    width: 70px;
    font-size: 12pt;
    line-height: 30px;
    margin: 0px 5px;
    vertical-align: top;
    pointer-events: all;
    cursor: pointer;
}

p.questionnaire-update-text {
    color: hsl(0, 0%, 100%);
    font-size: 12pt;
    display: inline-block;
    position: relative;
}

div.button-questionnaire-update:hover, div.button-questionnaire-list-item:hover {
    background-color: hsl(0, 0%, 30%);
}

div.questionnaire-list-item:first-child {
    border-top: none;
}

div.questionnaire-list-item:hover {
    background-color: hsl(0, 0%, 15%);
}

div.questionnaire-list-item-contents {

}

div.questionnaire-list-item-buttons {
    border-top: none;
}

div.questionnaire-list-item-error-label, div.questionnaire-list-item-errors-label {
    font-size: 16pt;
    line-height: 150%;
    color: hsl(0, 0%, 100%);
    background-color: hsl(0, 100%, 40%) !important;
    width: 190px;
    padding: 5px;
    margin: 10px 0 ;
    border-radius: 5px;
    white-space: nowrap;
    text-align: center;
}
div.questionnaire-list-item-errors-label {
    width: 210px;
}

div.loading-animation-wrapper {
    display: block !important;
    position: absolute !important;
}



/* save indicator */

p.questionnaire-save-indicator {
    display: none;
    z-index: 100000;
    font-size: 12pt;
    color: hsl(0, 100%, 100%);
    position: absolute;
    left: 20px;
    text-align: center;
    line-height: 70px;
}

div.sectionHeader > p.questionnaire-save-indicator {
    display: none !important;
}

div.sectionHeader.questionnaire-viewer-open > p.questionnaire-save-indicator {
    display: inline-block !important;
}

    /* linked section dock changes */

#questionnaire-section-dock.linked-questionnaire #button-edit-questionnaire,
#questionnaire-section-dock.linked-questionnaire #button-share-questionnaire {
    display: none !important;
}

#questionnaire-section-dock.linked-questionnaire #button-delete-questionnaire {
    right: 0 !important;
    margin-right: 10px !important;
    top: 0 !important;
}

#questionnaire-section-dock.linked-questionnaire > #questionnaire-label{
    color: hsl(150, 100%, 55%) !important;
    padding-left: 10px;
}

#questionnaire-section-dock.linked-questionnaire > .qnaire-link-icon {
    cursor: default;
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 100%;
}

    /*access icon*/

.public-questionnaire {
    background-color: hsl(0, 0%, 100%);
}

.public-questionnaire svg {
    fill: hsl(200, 75%, 30%);
    stroke: hsl(0, 0%, 100%);
}

/*branching*/

div.containerBottomBar {
    position: static;
    padding: 10px;
    width: calc(100% - 20px);
}

div.reorderQuestionContainer, div.reorderFormContainer {
    right: 0;
    /*margin: 10px;*/
    padding: 10px;
}

div.introSection, div.endSection {
    cursor: default;
    pointer-events: none;
}

div.introSection p, div.endSection p {
    color: hsl(0, 0%, 50%);
}

div.introSection {
    margin-bottom: 2px;
}

div.endSection {
    margin-top: 2px;
}

div.wrapperNoPad {
    border-radius: 5px;
}

div.questionControlBar, div.questionReorderControlBar {
    position: absolute;
    margin: 15px 15px 0px 15px;
    bottom: 0;
    height: 70px;
    left: 0;
    right: 90px;
    border-top: 1px solid hsl(0, 0%, 80%);
    z-index: 10;
}

div.questionReorderControlBar {
    right: 0;
}

div.buttonDeleteQuestion, div.buttonDeleteSection {
    margin: 0 10px;
    min-width: 80px;
    position: relative;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    font-size: 18px;
    line-height: 18px;
    white-space: nowrap;
    padding: 15px;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    pointer-events: all;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: hsl(0, 0%, 100%) !important;
    background-color: hsl(0, 100%, 40%) !important;
    border: solid 1px hsl(0, 100%, 40%) !important;
}
div.buttonDeleteQuestion:hover, #confirm-delete-question-button:hover, div.buttonDeleteSection:hover {
    background-color: hsla(0, 100%, 40%, 0.9) !important;
    border: solid 1px hsla(0, 100%, 40%, 0.9) !important;
}

div.buttonNextQuestion, div.buttonCancelForm, div.buttonPreviousQuestion, div.buttonReorderQuestion, div.buttonAddQuestion,
div.buttonExpandAllSections, div.buttonCollapseAllSections, div.buttonDone, div.buttonDecline, input.declineButtonInput {
    margin: 10px;
    left: 0;
    min-width: 80px;
    position: absolute;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    font-size: 18px;
    line-height: 18px;
    white-space: nowrap;
    padding: 15px;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    pointer-events: all;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: hsl(0, 0%, 100%) !important;
    background-color: hsl(195, 100%, 35%) !important;
    border: solid 1px hsl(195, 100%, 35%) !important;
}

div.buttonDecline {
    min-height: 20px;
    min-width: 100px;
}

div.buttonDecline, input.declineButtonInput {
    width: auto;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: unset;
}

/*div.declineOption input.MultipleChoiceInput, div.declineOption p.editFieldLabel, div.declineOption input.declineButtonInput, div.declineOption textarea.MultipleChoiceInput {*/
/*    margin-left: 50px;*/
/*}*/

div.declineOption input.answerVariableName {
    margin-left: 30px;
}

/*div.declineOption .removableAnswer, div.declineOptionWrapper .removableAnswer {*/
/*    position: absolute;*/
/*    !*top: 15px;*!*/
/*    left: 0;*/
/*}*/

div.declineOptionWrapper > .removableAnswer {
    position: absolute;
    /*top: 15px;*/
    left: 0;
}

input.declineButtonInput {
    width: 300px;
    background-color: hsl(0, 0%, 100%) !important;
    max-width: 500px;
    color: hsl(195, 100%, 30%) !important;
    border: 1px solid hsl(0, 0%, 0%) !important;
    border-radius: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    color: hsl(195, 100%, 30%);
    line-height: 135%;
    text-align: left;
    padding: 10px;
    height: 42px;
    min-height: 52px;
    overflow: hidden;
    resize: none;
    box-sizing: border-box;
    cursor: text;
    position: relative;
    display: inline-block;
    margin: 0;
}


div.buttonNextQuestion:hover, div.buttonPreviousQuestion:hover, div.buttonExpandAllSections:hover, div.buttonCollapseAllSections:hover {
    background-color: hsl(195, 75%, 95%)!important;
}

div.buttonCancel:hover {

}

div.buttonNextQuestion, div.buttonPreviousQuestion, div.buttonExpandAllSections, div.buttonCollapseAllSections {
    background-color: hsl(0, 100%, 100%) !important;
    border: solid 2px hsl(195, 100%, 35%) !important;
    color: hsl(195, 100%, 35%) !important;
}

div.buttonExpandAllSections, div.buttonCollapseAllSections {
    width: 100px;
}

div.buttonReorderQuestion, div.buttonAddQuestion {
    position: relative;
    text-align: center;
    width: auto;
}

div.buttonReorderQuestion:hover, div.buttonAddQuestion:hover, div.buttonDone:hover {
    background-color: hsla(195, 100%, 35%, 0.9) !important;
    /*border: solid 2px hsla(195, 100%, 35%, 0.9) !important;*/
}

div.buttonDone, div.buttonDeleteSection {
    position: absolute;
    margin: 10px 0;
    left: unset;
    top: 0;
    right: 0;
}

div.buttonAddQuestion:hover, div.buttonReorderQuestion:hover, div.buttonDeleteQuestion:hover {

    /*background-color: hsla(0, 100%, 40%, 0.9) !important;*/
    /*border: solid 1px hsla(0, 100%, 40%, 0.9) !important*/
}

div.buttonNextQuestion, div.buttonPreviousQuestion, div.buttonExpandAllSections {
    margin: 10px 0;
}

div.buttonCollapseAllSections {
    left: 135px;
}

div.buttonNextQuestion {
    top: 0;
    left: auto;
    right: 0;
}

div.buttonCancelForm {
    top: 0;
    left: 0;
    margin: 10px 0;
    background-color: hsl(0, 100%, 100%) !important;
    color: hsl(0, 0%, 0%) !important;
    border: 1px solid hsl(0, 0%, 50%) !important;
}

div.buttonCancelForm:hover {
    background-color: hsla(0, 0%, 0%, 0.1) !important;
}

div.buttonQuestionOption, div.buttonHeadingOption, div.buttonQuestionOptionExtraWidth {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    font-size: 18px;
    color: hsl(0, 100%, 100%);
    line-height: 18px;
    white-space: nowrap;
    padding: 15px;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    pointer-events: all;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    min-width: 120px;
    margin:0 5px;
    background-color: hsl(195, 100%, 35%) !important;
    border: solid 1px hsl(195, 100%, 35%) !important;
    position: relative;
    width: auto;
}

div.buttonQuestionOption {
    width: 120px;
}

div.buttonQuestionOptionExtraWidth {
    padding: 15px 0;
    font-size: 15px;
    width: 150px
}

div.buttonQuestionOption:hover, div.buttonQuestionOptionExtraWidth:hover {
    background-color: hsla(195, 100%, 35%, 0.9) !important;
    border: solid 1px hsla(195, 100%, 35%, 0.9) !important;
}

div.buttonHeadingOption {
    color: hsl(0, 100%, 40%) !important;
    background-color: hsl(0, 0%, 100%) !important;
    border: solid 2px hsl(0, 100%, 40%) !important;
    position: relative;
    text-align: center;
    width: auto;
}

div.buttonAddQuestion {
    width: 120px;
    transition: none;
}

div.buttonAddQuestionIcon {
    width: 38px;
    height: 38px;
    padding: 10px;
    border-radius: 20px;
    position: absolute;
    top: -1px;
    box-sizing: border-box;
    right: 0;
    border: 1px solid hsl(0, 100%, 100%);
    margin: 6px 10px;
    text-align: center;
}

p.questionLabel, p.headerLabel {
    text-align: left;
    font-size: 14pt;
    color: hsl(0, 0%, 100%);
}

p.headerLabel {
    color: hsl(0, 0%, 0%);
    display: block;
    text-align: center;
    font-size: 25px;
    line-height: 25px;
    margin: 20px 0 10px;
    font-weight: bold;
}

/*  PUBLIC QUESTIONNAIRES DROP DOWN TABLE  */

div.public-questionnaires-dropdown, #public-checklists-dropdown {
    padding: 10px;
    position: absolute;
    display: block;
    bottom: calc(100% - 70px);
    left: 10px;
    margin: 0;
    right: 0;
    max-height: 400px;
    overflow-y: auto;
    width: auto;
    max-width: 950px;
    box-sizing: border-box;
    background-color: hsl(0, 100%, 100%);
    /* border: solid 4px hsl(140, 100%, 55%); */
    border-radius: 5px;
    transition: transform 0.3s linear;
    z-index: 1005;
}

div.public-questionnaires-dropdown p.usernameField {
    white-space: nowrap;
}

div.public-questionnaires-dropdown p {
    font-size: 18px !important;
}

div.public-questionnaires-dropdown td {
    padding: 10px 5px;
}

/*QUESTION SCROLL BAR*/

div.questionScrollBar {
    background-color: hsl(0, 0%, 90%);
    height: 100%;
    width: 95px;
    position: absolute;
    right: 0;
    overflow-y: auto;
}

div.sectionScrollContainer {
    cursor: pointer;
    pointer-events: none;
    line-height: 30px;
    color: hsl(0, 0%, 0%);
    text-align: right;
    border-top: 1px solid hsl(0, 0%, 70%);
}

div.questionScrollIcon, div.headerScrollIcon, div.sectionScrollIcon {
    cursor: pointer;
    pointer-events: all;
    line-height: 30px;
    color: hsl(0, 0%, 0%);
    text-align: right;
    padding: 5px;
    position: relative;
}

p {
    word-break: break-word !important;
}

div.questionScrollIcon {
    white-space: nowrap;
    text-align: right;
    font-size: 0;
    position: relative;
}

div.questionError > p.scrollIconText, div.sectionScrollIcon.questionError {
    color: hsl(0, 100%, 40%);
}

p.scrollIconText {
    pointer-events: none;
    position: relative;
    vertical-align: top;
    margin-right: 29px;
    display: inline-block;
    line-height: 29px;
    color: hsl(0, 0%, 0%);
}

img.scrollIconImg {
    pointer-events: none;
    opacity: 0.5;
    display: block;
    position: absolute;
    right: 3px;
    top: 50%;
    margin-top: -13px;
    height: 23px;
    width: 23px;
}

.reorderQuestionListItem img {
    right: unset;
    left: 5px;
}

    /***************QUESTION ERROR STYLING**********/

.questionError > img.scrollIconImg {
    opacity: 1;
}

.questionError > .wrapper .questionField {
    background-color: hsla(0, 100%, 60%, 0.6) !important;;
    border: 1px solid hsl(0, 100%, 40%) !important;
}

.questionError p.questionLabelField {
    color: hsl(0, 100%, 40%) !important;
}

p.headingText, p.instructionText {
    word-break: break-word;
    padding: 30px 5px 20px 5px !important;
    font-style: normal;
    font-size: 19pt;
    color: hsl(0, 0%, 0%) !important;
}

p.instructionText {
    font-size: 19pt;
    color: hsl(0, 0%, 50%) !important;
}


/***********************************************/



div.reorderQuestionListItem > img.scrollIconImg {
    position: absolute;
    left: 50px;
    top: 50%;
    margin-top: -11px;
}

div.reorderQuestionListItem.questionError p.reorderQuestionText {
    color: hsl(0, 100%, 40%) !important;
}

div.headerScrollIcon {
    border-top: 1px solid hsl(0, 0%, 70%);
}

div.headerScrollIcon:first-child {
    border: none;
}

div.sectionScrollIcon {
    font-weight: bold;
    text-align: left;
    pointer-events: all;
    cursor: pointer;
}

div.sectionScrollIcon:first-child {
    border-top: none;
}

div.sectionScrollIconActive {
    background-color:hsl(150, 50%, 88%);
}

div.questionScrollIcon:hover, div.sectionScrollIcon:hover, div.headerScrollIcon:hover {
    background-color: hsla(0, 0%, 0%, 0.1);
}

/*INFO PAGE*/

div.inlineContainer {
    width: auto;
    display: inline-block;
}

.disabled div.inlineContainer {
    pointer-events: none !important;
    cursor: default !important;
}

div.inlineContainer:hover div.radioButtonQuestionnaire,
div.inlineContainer:hover div.radioButtonQuestionnaireSmall {
    background-color: hsl(0, 0%, 90%);
}

.disabled div.radioButtonActive {
    background-color: hsl(0, 0%, 50%) !important;
}

.disabled p.questionnaireInfoHeader {
    color: hsl(0, 0%, 50%) !important;
}

.disabled div.inlineContainer {
    pointer-events: none;
    cursor: default;
}

p.questionnaireInfo {
    margin-left: 20px;
    padding: 5px 0;
    position: relative;
    font-family: "StandardFontRegular", "Arial", sans-serif;
    font-size: 15pt;
    color: hsl(0, 0%, 10%);
    display: inline-block;
    line-height: 50px;
}

#questionnaire-view-template p.versionNumber {
    margin: 12px 15px 0px 30px;;
}

#questionnaire-view-template textarea.questionnaireInput {
    width: calc(100% - 277px);
    margin: 12px 15px 0px 30px;
    min-height: 30px !important;
    color: hsl(195, 100%, 30%);
    padding: 10px;
    border: 1px solid hsl(0, 0%, 0%);
    border-radius: 5px;
    /*transition: width 0.3s linear;*/
    text-align: left;
    max-width: 100%;
    max-height: 100%;
    resize: none;
    box-sizing: border-box;
    line-height: 135%;
    overflow: hidden;
}

p.questionnaireInfoHeader {
    /*text-align: right;*/
    width: 210px;
    display: inline-block;
    line-height: 50px;
    vertical-align: top;
    font-family: "StandardFontBold", "Arial", sans-serif;
    font-size: 17pt;
    letter-spacing: 1px;
    padding: 5px 0px;
    color: hsl(0, 0%, 25%);
}

#questionnaire-label {
    overflow: hidden;
    height: 100%;
    max-width: 50%;
}

div.radioButtonQuestionnaire, div.radioButtonQuestionnaireSmall {
    cursor: pointer;
    display: inline-block;
    border: 1px solid hsl(0, 0%, 0%);
    border-radius: 20px;
    width: 35px;
    height: 35px;
    margin: 12px 15px 0px 30px;
}

div.radioButtonQuestionnaireSmall {
    width: 25px;
    height: 25px;
    margin: 0px 8px 0px 20px;
}

div.radioButtonActive {
    background-color: hsl(195, 100%, 30%);
}

p.questionnaireDetailText {
    position: relative;
    display: inline-block;
    color: hsl(0, 0%, 0%);
    line-height: 60px;
    font-size: 15pt;
    vertical-align: top;
}

div.optionsWrapper {
    position: relative;
    text-align: left;
    display: block;
    padding: 20px 10px;
}

div.optionsWrapper p.editFieldLabel {
    line-height: 27px;
    margin: 0;
    vertical-align: top;
}

p.questionNumber, p.questionType {
    position: relative;
    text-align: left;
    color: hsl(150, 100%, 46%);
    padding: 20px 10px;
    top: 0;
    left: 0px;
    right: 50px;
    font-size: 25pt;
    font-weight: bold
}

.subQuestion p.questionNumber {
    font-size: 18pt;
}

p.questionType {
    font-size: 18pt;
    font-weight: bold;
    left: unset;
    position: absolute;
    right: 20px;
    top: 10px;
}

p.questionText, p.headingText, p.reorderQuestionText, p.reorderSectionText, p.instructionText {
    color: hsl(0, 0%, 0%);
    text-align: left;
    font-size: 17pt;
    letter-spacing: 1px;
    font-weight: bold;
    padding: 20px 5px;
    line-height: 130%;
}

p.questionText {
    color: hsl(195, 100%, 30%);
}

p.instructionText {
    font-size: 15pt;
    font-style: italic;
}

p.questionText, p.headingText, p.instructionText {
    padding: 20px 10px !important;
}

p.reorderQuestionText {
    margin-left: 80px;
    font-size: 12pt;
    line-height: 130%;
    padding: 10px 10px 10px 5px;
}

p.reorderSectionText {
    margin-left: 40px;
    font-size: 16pt;
    color: hsl(195, 100%, 35%);
    padding: 0 40px 0px 5px;
    line-height: 55px;
}

div.originalQuestionPlaceholder {
    border-radius: 5px;
    background-color: hsl(195, 100%, 40%) !important;
}

.originalQuestionPlaceholder p.reorderSectionText {
    color: hsl(195, 100%, 90%);
}

div.reorderItemClone {
    position: absolute;
    display: block;
    height: 50px;
    background-color: hsl(195, 45%, 65%) !important;
    opacity: 0.4 !important;
    border-radius: 5px;
}

/*div.questionScrollIcon.questionError {
/*border-left: 3px solid hsl(0, 100%, 40%);*/
/*    color: hsl(0, 100%, 40%) !important;*/
/*}*/

p.editFieldLabel, p.requiredLabel, p.declineLabel {
    position: relative;
    margin-bottom: 2px;
    text-align: left;
    font-size: 12pt;
    color: hsl(0, 0%, 25%);
}

p.editFieldLabel p.declineLabel {
    pointer-events: none;
    cursor: default;
}

p.declineLabel {
    margin-left: 45px;
}



/*********QUESTION TEXT AREAS/INPUTS**********/


textarea.questionHeading, textarea.questionField, textarea.instructionField, textarea.optionField {
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid hsl(0, 0%, 0%);
    border-radius: 5px;
    color: hsl(195, 100%, 30%);
    width: 100%;
    line-height: 135%;
    text-align: left;
    padding: 10px;
    height: 42px;
    min-height: 52px;
    overflow: hidden;
    resize: none;
    box-sizing: border-box;
}

textarea.shortAnswer, textarea.mediumAnswer, textarea.longAnswer,
textarea.textFieldPlaceHolder, textarea.numberField, input.locationLatLon, textarea.locationAddress, textarea.questionField,
textarea.instructionField, textarea.optionField {
    color: hsl(195, 100%, 30%);
    padding: 10px;
    border: 1px solid hsl(0, 0%, 0%);
    border-radius: 5px;
    width: 100%;
    /*transition: width 0.3s linear;*/
    text-align: left;
    max-width: 100%;
    max-height: 100%;
    resize: none;
    box-sizing: border-box;
}

textarea.optionField {
    padding: 15px 10px;
    font-size: 16px;
    width: calc(100% - 367px);
    /*max-width: 600px;*/
    min-width: 120px;
    max-height: none;
}

.question-edit-field-container textarea.optionField {
    width: calc(100% - 415px);
}

.question-edit-field-container input.optionValueField {
    margin-left: 50px;
}

.multi-select textarea.optionField {
    width: calc(100% - 261px);
}


.multi-select .declineOptionWrapper > textarea.optionField {
    width: calc(100% - 217px);
}

.declineOptionWrapper > textarea {
    margin-left: 45px;
}

/*.declineOption .removableAnswer {*/
/*    margin-left: 10px;*/
/*}*/

.declineOption.subQuestionOption .removableAnswer {
    left: 0px !important;

}

.subQuestion .declineViewModeOption {
    padding: 0 !important;
}

.subQuestion textarea.optionField {
    width: calc(100% - 93px);
}

textarea.instructionField {
    font-style: italic;
}

div.multiTextField {
    padding: 80px 0px 10px 0px !important;
}

div.multiTextField p.questionNumber {
    position: absolute;
    top: 10px;
}

.subQuestion p.questionText {
    font-size: 14pt;
}

input.locationLatLon {
    padding: 3px;
    margin: 20px 30px 20px 10px;
    background-color: hsl(0, 0%, 80%);
    border: solid 1px hsl(0, 0%, 50%);
    pointer-events: none;
    width: 80px;
    display: inline-block;
}

textarea.locationAddress {
    background-color: hsl(0, 0%, 80%);
    border: solid 1px hsl(0, 0%, 50%);
    pointer-events: none;
    display: block;
    height: 100px !important;
    width: 400px;
}

/************ LOCATION QUESTION MAP ************/

div.locationMapContainer .leaflet-control-container {
    display: none;
}

div.locationMapContainer {
    display: block;
    position: relative;
    width: 100%;
    height: 500px;
}

p.locationQuestionDetails {
    text-align: left;
    font-size: 13pt;
    letter-spacing: 1px;
    margin: 20px 0px;
    color: hsl(0, 0%, 25%);
}

div.mapSelectionIcon {
    z-index: 1000;
    top: 235px;
    left: 50%;
    margin-left: -15px;
    position: absolute;
    height: 30px;
    width: 30px;
    background-color: transparent;
    border: 2px solid hsl(0 , 0%, 100%);
}

div.mapContainer::-webkit-scrollbar {
    display: none !important;
}

div.mapCanvas::-webkit-scrollbar {
    display: none !important;
}

textarea.numberField {
    height: 52px;
    width: 300px;
}


input, textarea {
    pointer-events: all;
}

input.shortAnswer, input.Standard {
    color: hsl(195, 100%, 30%);
    padding: 10px;
    border: 1px solid hsl(0, 0%, 0%);
    border-radius: 5px;
    width: 100%;
    transition: width 0.3s linear;
    text-align: left;
    max-width: 100%;
    max-height: 100%;
    resize: none;
}

textarea.textFieldPlaceHolder {
    height: 52px !important;
    overflow-y: hidden;
    background-color: hsl(0, 0%, 80%);
    border: solid 1px hsl(0, 0%, 50%);
    pointer-events: none;
}

textarea.questionHeading:focus, textarea.shortAnswer:focus, textarea.longAnswer:focus, input.MultipleChoiceInput:focus, textarea.MultipleChoiceInput:focus,
input.RangeAnswerField:focus, input.shortAnswer:focus, textarea.mediumAnswer:focus, textarea:focus {
    outline: none;
    box-shadow: 0px 0px 0px 4px hsl(195, 100%, 60%) !important;
}

div.wrapperNoPad > input.shortAnswer {
    margin: 5px 10px;
    width: calc(100% - 230px);
}

textarea.shortAnswer:focus {
    outline: none;
}

textarea.shortAnswer {
    height: 52px !important;
}

div.AddQuestionTemplate {
    color: hsl(0, 0%, 0%);
    height: 75px;
    box-sizing: border-box;
}

div.AddQuestionTemplate, div.AddQuestionnaire, div.AddQuestionnaireToDOM {
    /*min-height: 60px;*/
    margin: 0;
    transition: height 0.3s linear;
}

div.AddQuestionnaire {
    display: flex;
    justify-content: space-between;
}

div.AddQuestionnaireToDOM {
    padding-top: 20px;
    text-align: center;
}

div.AddQuestionnaireTemplate {
    color: hsl(0, 0%, 0%);
    z-index: 5000;
    display: none;
    width: 100%;
    height: 100%;
    background-color: hsl(0, 100%, 100%);
    border-radius: 5px;
    padding: 10px;
}

div.MultipleChoiceAnswerField {
    cursor: pointer;
    display: inline-block;
    /*min-width: 200px;*/
    width: 100%;
    height: 40px;
    /*margin: 0 20px;*/
}

input.MultipleChoiceInput, input.RangeAnswerField, input.YesOrNoInput, input.goToInput, textarea.MultipleChoiceInput {
    /*pointer-events: none;*/
    /*user-select: none;*/

    color: hsl(195, 100%, 30%);
    cursor: text;
    display: inline-block;
    width: 400px;
    height: 100%;
    padding: 5px;
    font-size: 16px;
    border: 1px solid hsl(0, 0%, 0%);
    border-radius: 5px;
}

textarea.MultipleChoiceInput {

    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid hsl(0, 0%, 0%);
    border-radius: 5px;
    color: hsl(195, 100%, 30%);
    width: 400px;
    text-align: left;
    padding: 10px;
    min-height: 52px;
    line-height: 175%;
    /*min-height: 52px;*/
    overflow: hidden;
    resize: none;
    box-sizing: border-box;

}

input.MultipleChoiceInput, input.YesOrNoInput, textarea.MultipleChoiceInput {
    width: calc(100% - 70px);
    max-width: 500px;
}

textarea.questionError {
    background-color: hsla(0, 100%, 70%, 0.8);
    border: 1px solid hsl(0, 100%, 40%);
}

textarea.MultipleChoiceInput.questionError {
    background-color: hsla(0, 100%, 70%, 0.8);
    border: 1px solid hsl(0, 100%, 40%);
}

input.YesOrNoInput {
    color: hsl(0, 0%, 0%);
    pointer-events:none;
    border: transparent;
    width: 50px
}

input.goToInput {
    width: 200px;
}

/********RANGE QUESTION*********/

input.RangeAnswerField {
    color: hsl(180, 100%, 32%);
    width: 30px;
    margin: 0 10px;
    text-align: center
}

div.MultipleChoiceBubble, div.MultipleSelectionBubble, div.removableAnswer,
div.rangeAnswer {
    display: inline-block;
    border: 1px solid hsl(0, 0%, 0%);
    width: 15px;
    height: 15px;
    padding: 10px;
    border-radius: 20px;
    margin: 7px 7px 7px 0;
    cursor: default;
}

div.rangeAnswer {
    position: relative;
    color: grey;
    margin: 5px 20px;
}

p.rangeAnswer, p.rangeAnswerDoubleDigit {
    font-size: 16px;
    color: hsl(0, 0%, 60%);
}

p.rangeAnswerDoubleDigit {
    top: 10px;
    left: 8px;
    position: absolute;
    margin-right: 3px;
}

div.removableAnswer {
    cursor: pointer;
}

div.MultipleSelectionBubble {
    border-radius: 5px !important;
}

div.selected {
    background-color: hsl(0, 100%, 40%);
}
/******INPUT FIELDS ********/

input.numberField {
}

/******QUESTION OPTIONS/MODE ********/

div.modeSelector, div.multiTextModeSelector {
    /*background-color: hsl(0, 0% ,100%);*/
    z-index: 100;
    position: absolute;
    right: 20px;
    top: 22px;
    border-radius: 5px;
}

.subQuestion div.modeSelector {
}

div.multiTextModeSelector {
    top: 238px;
    right: unset;
    left: 40px;
}

div.multiTextField div.modeSelector {
    right: unset;
    left: 50px;
}

.multiText  div.optionsWrapper {
    text-align: right;
    padding: 10px 10px 20px 10px;
}

.viewMode div.optionsWrapper {
    padding: 10px !important;
    text-align: left;
}

div.multiTextField div.modeSelector {
    top: 81px;
}

div.buttonRemoveField {
    pointer-events: all;
    cursor: pointer;
    position: absolute;
    top: 80px;
    left: 2px;
    display: inline-block;
    border: 1px solid hsl(0, 0%, 0%);
    width: 15px;
    height: 15px;
    padding: 10px;
    border-radius: 20px;
    margin: 7px;
}

div.questionModeWrapper div.modeSelector {
    display: inline-block;
    position: relative;
    right: unset;
    top: unset;
}

div.modeOption:first-child {
    border-left: 1px solid hsl(0, 0%, 70%);
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

div.modeOption:last-child {
    border-right: 1px solid hsl(0, 0%, 70%);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

div.modeOption:hover {
    background-color: hsl(0, 0%, 90%);
}


div.modeOption {
    border-bottom: 1px solid hsl(0, 0%, 70%);
    border-top: 1px solid hsl(0, 0%, 70%);
    position: relative;
    display: inline-block;
    color: hsl(0, 0%, 0%);
    cursor: pointer;
    pointer-events: all;
    font-weight: bold;
    padding: 15px 20px;
    font-size: 18px;
}

/* MULTI TEXT*/


.multiText p.questionText {
    padding: 10px;
}


/******MULTIPLE CHOICE ANSWER DETAILS********/

div.questionModeWrapper {
    width: 100%;
    text-align: center;
    padding: 10px 10px 30px 10px;
}

div.declineButton {

}

div.declineOption {
    padding-top: 0;
    padding-bottom: 0;
    /*height: 130px;*/
}

div.declineViewModeOption {

}

div.addTextFieldWrapper {
    height: 70px;
    cursor: pointer;
    pointer-events: all;
    display: inline-block;
    width: auto;
}

div.addTextFieldWrapper {
    height: auto;
}

/*div.declineOptionWrapper div.buttonAddAnswer {*/
/*    top: 30px;*/
/*    position: absolute;*/
/*}*/

div.addAnswerRow div.MultipleChoiceAnswerField{
    width: auto;
    pointer-events: all;
    cursor: pointer;
}

/*div.declineOptionWrapper .removableAnswer {*/
/*    top: 48px;*/
/*    position: absolute;*/
/*}*/


div.multiChoiceDecline div.buttonAddAnswer {
    top: 30px;
}

div.declineOption input.answerVariableName {
    margin-top: 2px;
}



/*div.questionOption.declineOption {*/
/*    margin-left: 40px;*/
/*}*/

/*div.multiChoiceDecline div.buttonAddAnswer {*/
/*    margin-left: 48px;*/
/*}*/

/*div.declineOptionWrapper p.answerLabel {*/
/*    margin-top: 20px;*/
/*    margin-left: 55px;*/
/*}*/

/*div.multiChoiceDecline p.answerLabel {*/
/*    margin-top: 20px;*/
/*    margin-left: 52px;*/
/*}*/

/*div.declineOptionWrapper p.editFieldLabel {*/
/*    margin-left: 50px;*/
/*}*/

p.addNewOptionLabel {
    text-align: left;
    font-size: 14pt;
    line-height: 52px;
    display: inline-block;
    color: hsl(0, 0%, 0%);
    cursor: pointer;
}

input.answerVariableName, input.questionValueField, input.optionValueField {
    font-size: 14px;
    color: hsl(180, 100%, 32%);
    pointer-events: all;
    cursor: text;
    border: none;
    border-radius: 5px;
    min-width: 250px;
    width: auto;
}


/*QUESTION OPTION DIVS*/

/**style rule**/

/*question classes pertain to question.label*/
/*option classes pertain to question.options*/
/*value classes pertain to value property for either questions or options*/

div.questionOptionsWrapper {
}

div.questionValueWrapper, div.optionValueWrapper {
    display: block;
    position: relative;
    margin: 5px 0;
    text-align: left;
}



div.optionValueWrapper {
    margin: 5px 0px 5px 45px;
}

div.textOption div.optionValueWrapper {
    margin: 5px 0px;
}

div.questionOption {
    position: relative;
    text-align: left;
    width: 100%;
    color: hsl(0, 100%, 100%);
    display: block;
    box-sizing: border-box;
    padding: 10px;
}

tr.questionOption > td {
    padding:  10px 0;
}

.question-view-mode div.questionOption {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    padding: 10px 0;
}

.question-view-mode .questionnaireQuestion {
    left: unset;
    padding: 0px 10px;
    /*display: flex;*/
    /*flex: 1;*/
    /*max-width: calc(100% - 116px) !important;*/
}


.question-view-mode td {
    display: table-cell;
    vertical-align: middle;
}

.question-view-mode .questionOptionShape {
    margin: 0;
    display: flex;
    top: unset;
    position: relative;
}


div.questionOptionWrapper, div.declineOptionWrapper {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
}


input.questionValueField, input.optionValueField {
    padding: 5px;
    min-width: 250px;
}

input.answerVariableName:focus, input.questionValueField:focus, input.optionValueField:focus {
    outline: none;
    box-shadow: 0px 0px 0px 2px hsl(195, 100%, 60%) !important;
}

div.subQuestion {
    width: calc(100% - 130px) !important;
    margin-left: 125px;
    padding: 10px;
    border-radius: 0px !important;
    border-left: 3px solid hsl(195, 100%, 35%);
}

/*div.subQuestion p.editFieldLabel {*/
/*    margin-left: 0px !important;*/
/*}*/

div.questionnaireOptions div.subQuestion {
    border: none;
}

p.subQuestionLabel {
    text-align: left;
    color: white;
    font-size: 14px;
    line-height: 22px;
}

div.buttonDeleteSubQuestion p.subQuestionLabel {
    color: hsl(0, 100%, 40%);
}

div.buttonAddSubQuestionIcon {
    width: 38px;
    height: 38px;
    padding: 10px;
    border-radius: 20px;
    position: absolute;
    top: -1px;
    box-sizing: border-box;
    right: 0;
    border: 1px solid hsl(0, 100%, 100%);
    margin: 7px 10px;
    text-align: center;
}

/*GO TO DETAILS*/

div.goToContainer {
    background-color: hsl(0, 0%, 100%);
    color: black;
    font-size: 14pt;
    margin: 0 20px;
    position: relative;
    display: inline-block;
    vertical-align: top;
    height: auto;
    box-sizing: border-box;
    width: 110px;
    cursor: pointer;
    pointer-events: all;
}

div.goToContainer.redText .buttonDropdown {
    border-top-color:  hsl(0, 100%, 40%);
}

div.goToContainer.redText svg {
    fill:  hsl(0, 100%, 40%);
}

div.goToMenuButton {
    background-color: hsl(0, 0%, 100%);
    color: black;
    font-size: 14pt;
    /*margin: 0 20px;*/
    position: relative;
    border: solid 1px hsl(0, 0%, 80%);
    display: inline-block;
    vertical-align: top;
    height: 52px;
    border-radius: 4px;
    box-sizing: border-box;
    width: 110px;
    padding: 10px;
    cursor: pointer;
    pointer-events: all;
    flex: 0 1 auto;
}

div.goToContainer.redText p.menuButtonLabel {
    font-weight: bolder;
    color: hsl(0, 100%, 40%);
}

div.goToContainer.redText div.goToMenuButton {
    border: 1px solid hsl(0, 100%, 40%);
}

div.goToMenuButton:hover {
    background-color: hsl(0, 0%, 95%);
}

p.menuButtonLabel, p.section-goto-label {
    text-align: center;
    pointer-events: none;
    color: black;
    font-size: 14px;
    width: 40px;
    margin-right: 10px;
}

.section-wrapper .goToContainer, .section-wrapper .goToMenuButton {
    width: auto !important;
    min-width: 90px;
}

p.section-goto-label {
    width: auto;
}

table.fullSize {
    pointer-events: none;
    height: 100%;
    width: 100%;
}

div.sectionMenuItem, div.sectionMenuItemActive, div.questionMenuItem {
    font-size: 16px;
    color: hsl(0, 0%, 0%);
    border-radius: 5px;
    padding: 12px;
    line-height: 23px;
    word-break: normal;
    /*white-space: nowrap;*/
    cursor: pointer;
}

div.sectionMenuItem:hover, div.questionMenuItem:hover {
    background-color: hsl(0, 0%, 95%);
}

div.goToDropDownMenu {
    margin-top: 55px;
    margin-bottom: 20px;
    width: 100%;
    left: -1px;
    top: 0px;
    z-index: 10000;
    overflow-y: scroll;
    min-height: 40px;
    max-height: 40vh;
    box-sizing: border-box;
    opacity: 1;
    display: none;
    transition: top 0.5s ease-out;
    position: absolute;
    background-color: hsl(0, 0%, 100%);
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0px 1px 1px 1px hsla(0, 0%, 0%, 0.35);
    pointer-events: all;
    cursor: default;
}

div.buttonAddSubQuestion, div.buttonDeleteSubQuestion {
    height: 20px;
    width: 130px;
    margin-left: 10px;
    position: relative;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    font-size: 14px;
    line-height: 14px;
    white-space: nowrap;
    padding: 15px;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
    pointer-events: all;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: hsl(0, 0%, 100%) !important;
    background-color: hsl(195, 100%, 35%) !important;
    border: solid 1px hsl(195, 100%, 35%) !important;
}

div.buttonDeleteSubQuestionIcon {
    position: absolute;
    top: 14px;
    right: 20px;
    height: 20px;
    width: 20px;
}

/*div.buttonDeleteSubQuestionIcon svg.deleteItemIcon {*/
/*    top: 20px;*/
/*}*/

svg.buttonDeleteSubQuestionIcon {
    height: 20px;
    width: 20px;
    fill: hsl(0, 100%, 40%) !important;
    margin: 5px;
    padding: 0;
}

div.buttonDeleteSubQuestion {
    border: solid 1px hsl(0, 0%, 80%) !important;
    background-color: hsl(0, 0%, 100%) !important;
    position: relative !important;
}

div.buttonDeleteSubQuestion p {
    color: black !important;
}

div.buttonDeleteSubQuestion:hover {
    background-color: hsl(0, 0%, 95%) !important;
}

div.buttonAddSubQuestion:hover {
    background-color: hsla(195, 100%, 35%, 0.9) !important
}

/***************MATRIX QUESTION********/

.matrixOption div.MultipleChoiceBubble, .matrixOption div.MultipleSelectionBubble {
    display: inline-block;
    border: 1px solid hsl(0, 0%, 0%);
    width: 15px;
    height: 15px;
    padding: 10px;
    border-radius: 20px;
    margin: 7px;
    pointer-events: all;
    cursor: pointer;
    position: relative;
    top: 3px;
}

.matrixOption > .MultipleChoiceAnswerField {
    margin-left: 35px;
}

.matrixOption > .buttonMoveQuestionnaireOption {
    top: 40px !important;
    margin-left: 15px;
}

.matrixOption .answerVariableName {
    margin-left: 67px !important;
}

.matrixOption svg {
    top: 6px !important;
    left: 5px !important;
}

table.matrixQuestionTable {

    overflow: scroll;
    max-width: 100%;
}

table.matrixQuestionTable td {
    padding: 10px 5px;
}

td.matrixRow {
    text-align: left;
}

p.questionMatrixColumnLabel {
    font-size: 13pt;
    line-height: 125%;
    color: hsl(0, 0%, 0%);
    text-align: center;
    padding: 0px 10px;
}

p.questionMatrixRowLabel {
    font-size: 13pt;
    line-height: 125%;
    color: hsl(0, 0%, 0%);
}

div.addItemRow {
    pointer-events: all;
    cursor: pointer;
    display: inline-block;
    height: 40px;
}


table.matrixQuestionTable tr {
    border-top: 1px solid hsl(0, 0%, 90%);
}

table.matrixQuestionTable tr:first-child {
    border-top: none
}

td.spacer {
    width: auto;
    color: white;
}

p.matrixQuestionValue {
    color: black;
    font-size: 14pt;
}

div.matrixOptionBubble, div.matrixMultiOptionBubble {
    display: inline-block;
    border: 1px solid hsl(0, 0%, 0%);
    width: 15px;
    height: 15px;
    padding: 7px;
    border-radius: 20px;
    margin: 7px;
    cursor: default;
}

div.matrixMultiOptionBubble {
    border-radius: 0px;
}

div.newRowWrapper .answerLabel, div.newColumnWrapper .answerLabel {
    margin: 7px;
}

div.newRowWrapper, div.newColumnWrapper {
    padding-bottom: 30px !important;
}

div.newColumnWrapper:last-child {
    padding-bottom: 5px;
}

div.variableOptionWrapper {
    position: relative;
    width: 100%;
    color: hsl(0, 100%, 100%);
    display: block;
    box-sizing: border-box;
    padding: 10px;
    margin: 10px 0px 0px 10px
}

/*DROP DOWN */

div.dropDownMenu {
    padding: 10px;
    position: absolute;
    display: block;
    bottom: calc(100% - 70px);
    left: 10px;
    margin: 0px;
    right: 0;
    max-height: 400px;
    overflow-y: auto;
    max-width: 650px;
    box-sizing: border-box;
    background-color: hsl(0, 100%, 100%);
    /*border: solid 4px hsl(140, 100%, 55%);*/
    border-radius: 5px;
    transition: transform 0.3s linear;
    z-index: 1005;
}

/*REORDER QUESTION FORM*/

div.modalForm, div.newQuestionModalForm, div.deleteSectionForm, div.deleteGoToForm,
div.deleteEmptySectionForm, div.subQuestionModalForm, div.deleteSubQuestionForm {
    display: none;
    z-index: 6000;
    background-color: hsl(0, 100%, 100%);
    border-radius: 5px;
    height: auto;
    overflow-y: auto;
    margin: 10px;
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
}

div.newQuestionModalForm, div.deleteSectionForm, div.deleteGoToForm,
div.deleteEmptySectionForm, div.subQuestionModalForm, div.deleteSubQuestionForm {
    position: absolute;
    width: 600px;
    height: 540px;
    top: 50%;
    left: 50%;
    right: 50px;
    /*bottom: 20px;*/
    margin-top: -270px;
    margin-left: -300px;
}

div.deleteGoToForm {
    margin-top: -110px;
    margin-left: -200px;
    height: 220px;
    width: 400px;
}

div.newQuestionModalForm, div.subQuestionModalForm {
    width: 710px;
    margin-left: -355px;
    height: 620px;
    margin-top: -315px;
    overflow-y: auto;
}

div.newQuestionModalForm {
    width: 870px;
    margin-left: -435px;
    height: 540px;
    margin-top: -270px;
    overflow-y: auto;
}

div.newSectionModalForm {
    width: 500px !important;
    margin-left: -250px !important;
    height: 230px !important;
    margin-top: -115px !important;
    overflow-y: auto;
}

div.subQuestionModalForm {
    width: 600px;
    margin-left: -300px;
    height: 290px;
    margin-top: -145px;
}

/*DELETE ITEM FORM */

div.deleteSectionForm, div.deleteEmptySectionForm {
    overflow-y: visible;
    position: absolute;
    width: 500px;
    height: 260px;
    top: 50%;
    left: 50%;
    margin-top: -140px;
    margin-left: -250px;
}

div.deleteEmptySectionForm {
    width: 500px;
    height: 200px;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -250px;
}

div.deleteSubQuestionForm {
    width: 500px;
    height: 215px;
    top: 50%;
    left: 50%;
    margin-top: -110px;
    margin-left: -250px;
}

div.deleteSubQuestionForm p.formText {
    line-height: 175%;
    white-space: pre-wrap;
}

div.sectionModal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsl(0, 0%, 0%);
    opacity: 0.8;
    z-index: 5000;
    display: none;
    pointer-events: all;
    box-sizing: border-box;
}

div.radioButton, div.squareButton, div.radioButtonSmall {
    pointer-events: all;
    cursor: pointer;
    padding: 10px;
    display: inline-block;
    position: relative;
    left: 0;
    width: 18px;
    height: 18px;
    border-radius: 25px;
    border: 1px solid hsl(0, 100%, 0%);
    background-color: hsl(0, 100%, 100%); !important;
    margin-right: 10px;
}

div.radioButtonSmall {
    margin: 7px 5px 0px 5px;
    width: 3px;
    height: 3px;
}

div.squareButton {
    margin: 5px 10px;
    border-radius: 0;
    width: 5px;
    height: 5px;
}


div.radioButton:hover, div.squareButton:hover {
    background-color: hsl(0, 0%, 90%); !important;
}

div.radioButtonActive {
    background-color: hsl(195, 100%, 45%) !important
}

div.sectionItemActive {
    cursor: default;
    background-color: hsl(150, 100%, 55%);
    color: hsl(0, 0%, 0%);
}

div.sectionItemActive:hover {
    background-color: hsl(150, 100%, 55%);
}

p.formTitle, p.formText {
    padding: 10px 0;
    color: hsl(0, 0%, 0%)
}

p.formText {
    font-size: 12pt;
    vertical-align: top;
    line-height: 135%;
}

p.formTitle {
    font-weight: bold;
    text-align: center;
    font-size: 17pt;
}

div.buttonDropdown {
    display: inline-block;
    margin-top: 6px;
    margin-left: 10px;
    margin-right: 10px;
    cursor: pointer;
    pointer-events: none;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 12px solid hsl(0, 100%, 0%);
}

div.buttonDeleteOption {
    position: relative;
    display: inline-block;
    height: 18px;
    width: 18px;
    padding: 5px 5px;
    border-radius: 20px;
    border: 1px solid hsl(0, 0%, 0%);
    cursor: pointer;
    pointer-events: all;
    box-sizing: content-box;
}

div.buttonDeleteGoTo, div.buttonDeleteGoToDecline, div.buttonDeleteItem {
    cursor: pointer;
    pointer-events: all;
    position: absolute;
    top: 10px;
    right: 20px;
    height: 20px;
    width: 20px;
}

div.buttonDeleteGoTo {
    top: 15px;
}

.section-wrapper div.buttonDeleteGoTo {
    top: 0px;
    right: unset;
    left: unset;
    position: relative;
    margin: 0 8px;
}

div.deleteItemIcon {

}

svg.deleteItemIcon {
}

div.buttonDeleteGoToDecline {
    top: 0;
    left: 15px;
}

svg.buttonDeleteGoTo, div.buttonDeleteSubQuestion svg.buttonDeleteGoTo {
    fill: hsl(0, 0%, 0%);
    height: 20px;
    width: 20px;
    margin: 5px;
    padding: 0;
}

.buttonRemoveField svg.buttonDeleteGoTo, .buttonAddAnswer svg.buttonDeleteGoTo,
.buttonRemoveAnswer svg.buttonDeleteGoTo {
    height: 15px;
    width: 15px;
    margin: 0px;
    top: 10px;
    left: 10px;
    position: absolute;
}

div.MultipleSelectionBubble svg.buttonDeleteGoTo,
div.MultipleChoiceBubble svg.buttonDeleteGoTo,
.declineOption svg.buttonDeleteGoTo {
    position: absolute;
    top: 14px;
    left: 13px;
    height: 15px;
    width: 15px;
}

.declineOption svg.buttonDeleteGoTo {
    top: 6px !important;
    left: 5px !important;
}

div.buttonDeleteOption:hover {
    background-color: hsl(0, 0%, 90%);
}

div.sectionProjectMenu {
    width: 228px;
    left: 214px;
    top: 175px;
    z-index: 10000;
    overflow-y: scroll;
    min-height: 68px;
    max-height: 30vh;
    box-sizing: border-box;
    opacity: 1;
    display: none;
    transition: top 0.5s ease-out;
    position: absolute;
    background-color: hsl(0, 0%, 100%);
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0px 1px 1px 1px hsla(0, 0%, 0%, 0.35);
    pointer-events: all;
}


/*************************** QUESTIONNAIRE VIEWER ITEMS *******************************/

p.ownerLabel {
    font-size: 20pt;
    line-height: 40px;
    letter-spacing: 0;
    color: hsl(195, 100%, 50%);
    text-align: left;
    font-family: "StandardFontBold", "Arial", sans-serif;
}

p.questionnaireQuestion {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 50px;
    font-size: 16pt;
    line-height: 135%;
    color: hsl(0, 0%, 0%);
    pointer-events: none;
    padding: 0 5px;
}

p.goto-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-style: italic;
    min-height: 50px;
    width: auto;
    justify-content: flex-end;
    font-size: 16pt;
    line-height: 135%;
    color: hsl(0, 0%, 70%);
    pointer-events: none;
    margin-left: 50px;
    white-space: nowrap;
}

.section-wrapper p.goto-label {
    width: auto;
    margin: 0 2px;
}

div.questionnaireSelector {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    font-family: "StandardFontRegular", "Arial", sans-serif;
}

div.questionnaireOptions, div.subQuestionOptions {
    padding: 0px 15px;
    text-align: left;
    /*padding-left: 20px;*/
    /*padding-bottom: 5px;*/
}

div.questionnaireOption, div.infoPanelQuestionnaireOption, div.questionnaireSubOption {
    position: relative;
    min-height: 50px;
    display: block;
    font-size: 14pt;
    color: hsl(0, 0%, 20%);
    vertical-align: middle;
}

div.questionnaireSubOption {
    padding: 10px;
}

div.questionOption, div.subQuestionOption {
    padding: 10px;
    display: block;
}

div.questionOption.selected, div.subQuestionOption.selected {
    background-color: hsl(190, 100%, 40%) !important;
    border-radius: 5px;
}



div.addOptionWrapper, div.addDeclineOptionWrapper {
    padding: 10px;
    text-align: left;
    width: auto;
    pointer-events: all;
    cursor: pointer;
    position: relative;
}

div.addDeclineOptionWrapper {
    cursor: default;
}


/*DROP DOWN MENU VIEW FOR MULTIPLE CHOICE QUESTIONS*/

div.dropDownViewModeContainer {
    position: relative;
    display: block;
    text-align: left;
}

div.dropDownViewQuestionContainer {
    padding: 10px !important;
    position: relative;
    display: inline-block;
    width: auto;
    min-width: 400px;
    border: 1px solid hsl(0, 0%, 80%);
    border-radius: 5px;
    left: 0;
}

div.buttonQuestionnaireDropDown {
    display: inline-block;
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: default;
    pointer-events: none;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 10px solid hsl(0, 0%, 0%);
}

div.questionnairePlaceholder {
    padding: 0 10px;
    border-radius: 5px;
    border: 1px solid hsl(0, 0%, 80%);
    position: relative;
    min-height: 50px;
    min-width: 400px;
    display: block;
    font-size: 14pt;
    color: hsl(0, 0%, 20%);
    vertical-align: middle;
    margin-bottom: 10px;
}

div.dropDownViewModeQuestion {
    display: inline-block !important;
    width: auto;
    padding: 5px !important;
    border-radius: 5px !important;
    border:  1px solid hsl(0, 0%, 0%) !important;
}

div.answerBubbleViewMode, div.answerBubbleViewModeSelected, div.questionOptionShape {
    position: relative;
    line-height: 50px;
    display: inline-block;
    width: 24px;
    height: 24px;
    /*margin-top: 13px;*/
    border: solid 1px hsl(0, 0%, 10%);
}

.question-view-mode div.answerBubbleViewMode {
    margin: 0 !important;
}

div.questionOptionShape {
    position: absolute;
    display: inline-block;
    border-radius: 15px;
    height: 28px;
    width: 28px;
    margin-right: 3px;
    top: 50%;
    margin-top: -14px
}

div.answerBubbleViewModeSelected {
    background-color: hsl(200, 100%, 55%);
}

div.infoPanel {
    flex-direction: column;
    align-items: center;
    vertical-align: top;
    display: flex;
    position: absolute;
    bottom: -130px;
    width: 100%;
    height: 240px;
    background-color: hsl(0, 0%, 10%);
    transition: transform 0.4s ease-out;
}

div.slideInfoPanel {
    border-top: solid 1px hsl(0, 0%, 25%);
    align-items: center;
    display: flex;
    justify-content: space-between;
    z-index: 10;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    background-color: hsl(0, 0%, 10%);
}

.animClass {
    -webkit-transform: translate3d(0, -100%, 0);
    /* more specific animation properties here */
}

/********************************/

.buttonMoveQuestionnaireItems,.buttonMoveSection, .buttonMoveQuestionnaireOption {
    position: absolute;
    display: inline-block;
    bottom: auto;
    top: 50%;
    margin-top: -15px;
    left: 0;
    height: 15px;
    width: 15px;
    padding: 7px;
    background-color: transparent;
    border: none;
}

.question-edit-field-container, .sub-question-edit-field-container {
    display: block;
    position: relative;
}

.question-edit-field-container .buttonMoveQuestionnaireOption,
.sub-question-edit-field-container .buttonMoveQuestionnaireOption {
    position: relative;
    pointer-events: all;
    padding: 15px !important;
    margin-top: unset;
    top: 3px;
}

.buttonMoveSection {
    top: 27px;
}

.reorderQuestionListItem, .reorderSectionListItem {
    pointer-events: all;
    cursor: pointer;
    position: relative;
    width: 100%;
    color: hsl(0, 100%, 100%);
    display: block;
    box-sizing: border-box;
    padding: 0px;
    border-radius: 5px;
}

.reorderSectionListItem {
    min-height: 55px;
}
.reorderQuestionListItem {
    padding: 0;
    width: 100%;
}

.reorder-question-placeholder, .reorder-section-placeholder, .reorder-option-placeholder {
    height: 4px;
    width: 100%;
    margin-top: -2px;
    /*border: 1px solid hsl(195, 100%, 35%);*/
    border-radius: 2px;
    background-color: hsl(195, 100%, 40%);
    position: absolute;
}

.reorder-section-placeholder {
    width: calc(100% - 20px);
}

div.sectionCollapsed {
    pointer-events: none;
    cursor: default;
    opacity: 0;
    height: 0px;
}

/*.reorderQuestionListItem:first-child {*/
/*margin-top: 10px;*/
/*}*/

.buttonCloseForm {
    pointer-events: all;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    color: hsl(0, 0%, 0%);
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 17px;
    display: block;
    height: 15px;
    width: 17px;
    padding: 8px;
    border-radius: 5px;
}

.buttonCloseForm:hover,
.buttonExpandSection:hover {
    background-color: hsla(0, 0%, 0%, 0.1);
}

.buttonExpandSection {
    position: absolute;
    top: 5px;
    right: 10px;
    padding: 10px;
    cursor: pointer;
    width: 25px;
    height: 25px;
    border-radius: 5px;
    z-index: 5000;
}

/* MODAL & MESSAGES */

/* message on top of modal form */
p.modalMessage {
    white-space: normal;
    line-height: 135%;
    padding: 10px 20px 10px 200px;
    z-index: 10000;
    display: none;
    text-align: right;
    position: absolute;
    left: 0;
    top: 0;
    right: 95px;
    color: hsl(0, 100%, 100%);
}

.scrollBarMargin {
    width: auto !important;
    right: 95px !important;
}

/*MODIFIERS*/

textarea.longAnswer {
    height: 160px !important;
}

textarea.mediumAnswer {
    height: 100px !important;
}

textarea.shortAnswer {
    height: 52px !important;
}

/* QUESTIONNAIRE ASSET VIEWER */

.assetViewerQuestionContainer .rangeAnswer, .assetViewerQuestionContainer .matrixOptionBubble {
    pointer-events: all;
    cursor: pointer;
}

.assetViewerQuestionContainer .answerBubbleViewModeSelected {
    pointer-events: none !important;
    cursor: default;
}

.view-questionnaire .locationAddress {
    padding: 10px 0 !important;
    height: auto !important;
}

#questionnaire-asset-content-viewer .buttonEditItems {
    border-color: hsla(200, 75%, 40%, 0.8);
}



#questionnaire-asset-content-viewer .buttonEditItems:hover {
    /*background-color: hsla(200, 75%, 40%, 0.1);*/
    background-color: hsl(200, 75%, 95%);

}

#questionnaire-asset-content-viewer .sectionEditButtonSvg {
    fill: hsla(200, 75%, 40%, 0.8);
}

/* DROP DOWN MENU FOR SINGLE SELECT QUESTIONS */

.single-select-dropdown-selector {
    pointer-events: all;
    cursor: pointer;
    padding: 0 10px;
    border-radius: 5px;
    border: 1px solid hsl(0, 0%, 80%);
    position: relative;
    min-height: 50px;
    display: block;
    font-size: 14pt;
    color: hsl(0, 0%, 20%);
    vertical-align: middle;
    margin-bottom: 10px;
}

.single-select-dropdown-selector > div.buttonQuestionnaireDropDown {
    display: inline-block;
    position: absolute;
    top: 50%;
    margin-top: -5px;
    right: 20px;
    cursor: default;
    pointer-events: none;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 10px solid hsl(0, 0%, 0%);
}

.single-select-dropdown-selector:hover, .single-select-dropdown-list-item:hover  {
    background-color: hsl(0, 0%, 95%);
}

.single-select-dropdown-menu {
    padding: 10px;
    position: relative;
    display: block;
    box-sizing: border-box;
    background-color: hsl(0, 100%, 100%);
    border: 1px solid hsl(0, 0%, 80%);
    border-radius: 5px;
    transition: transform 0.3s linear;
    z-index: 10;
}

.single-select-dropdown-list-item {
    pointer-events: all;
    cursor: pointer;
    border-radius: 5px;
}

.single-select-dropdown-list-item-label {
    font-size: 16pt;
    color: black;
    display: inline-block;
    position: relative;
    padding-left: 20px;
    padding-right: 20px;
    top: 0;
    vertical-align: top;
    line-height: 70px;
}

svg.button-edit-question-icon {
    padding: 6px;
    height: 18px;
    width: 18px;
    fill: hsla(200, 75%, 40%, 0.8);
    color: hsl(0, 100%, 100%);
}

div.button-edit-question {
    display: none;
    pointer-events: all;
    background-color: hsl(0, 0%, 100%);
    position: absolute !important;
    top: 5px;
    right: 5px;
    height: 30px;
    width: 30px;
    z-index: 10;
    margin: 0 !important;
}

/* EDIT QUESTIONNAIRE MAP */

#questionnaire-form-container div.locationMapContainer {
    /*height: 50%;*/
    width: 70%;
    margin: 0 auto;
    /*box-sizing: content-box !important;*/
    /*box-sizing: content-box !important;*/
    border: 2px solid transparent;
}

.editable-map {
    cursor: pointer !important;
    pointer-events: all !important;
}

.editable-map-vert-line {
    display: none;
    z-index: 1000;
    left: calc(50% + 1px);
    top: 0;
    bottom: 0;
    position: absolute;
    width: 2px;
    background-color: hsla(150, 100%, 55%, 0.5) !important;
}

.editable-map-horiz-line {
    display: none;
    z-index: 1000;
    left: 0;
    right: 0;
    top: calc(50% + 1px);
    position: absolute;
    height: 2px;
    background-color: hsla(150, 100%, 55%, 0.5) !important;
}


.editable-map .editable-map-horiz-line, .editable-map .editable-map-vert-line {
    display: block;
}

div.locationMapContainer.editable-map {
    border: 2px solid hsl(150, 100%, 55%) !important;
}


div.button-change-map, div.button-end-change-map {
    font-weight: bold;
    pointer-events: all;
    cursor: pointer;
    font-size: 12pt;
    color: hsl(200, 75%, 40%);
    border-radius: 5px;
    background-color: white;
    display: block;
    position: absolute !important;
    top: 10px;
    right: 10px;
    height: auto;
    width: 60px;
    padding: 15px 10px;
    z-index: 1000;
    text-align: center;
}

div.button-change-map:hover {
    background-color: hsl(0, 0%, 95%);
}

div.button-end-change-map {
    background-color: hsl(150, 100%, 55%);
    color: hsl(0, 0%, 0%);
}
div.button-end-change-map:hover {
    background-color: hsl(150, 100%, 65%);
}