/* ======================

Default Health Note Banner

====================== */
.provider-logo {
  background: url('https://s3.amazonaws.com/ui.healthnote.com/images/questionnaire/system/default-icon.png') no-repeat center;
  background-size: cover;
}
.header-image {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  background: url('https://s3.amazonaws.com/ui.healthnote.com/images/questionnaire/system/health-note-banner.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* ======================

Updated styling Focus

====================== */
.progress-bar {
  max-width: 780px;
}
.header {
  width: 100%;
  height: 40vw;
  max-height: 300px;
  margin: 0px;
  padding: 0px;
}
.button {
  border-radius: 25px 0px 25px 25px;
}
.provider-block {
  margin-bottom: 15px;
}

/* Button Changes */
div.button.button-active {
  background: #999999;
}
.edit {
  background: #219087;
}
.header-wrapper .button {
  opacity: 0;
}

/* Fixing app wider than edit popup */
.app {
  max-width: none;
}
/* Making Scroll Notification Bigger */
.scroll-notification {
  height: 58px;
  line-height: 58px;
  max-width: 780px;
}
/* Background defocus */
.main {
  background: #F3F2F2;
}
.bot > .component-block, .bot > .quiz-module > .component-block {
  background: #f8f7f7;
}
.bot > .component-block > div, .bot > .quiz-module .component-block > div {
  opacity: 0.2;
}
div.button.button-active {
  opacity: 0.4;
}
.edit-active {
	opacity: 0.75;
}
.bot .component-block .answer {
  opacity: 1;
}
.bot > .component-block:last-of-type, .bot > .quiz-module .component-block:last-of-type {
  opacity: 1;
  background: #ffffff;
  box-shadow: 0 2px 8px 0 rgba(123,123,123,0.50);
}
.bot .component-block:last-of-type > div {
  opacity: 1;
}
.scroll-container, .scroll-container > div:last-child {
  background: #F3F2F2 !important;
}

/* Updating Orange */
.continue-button-active, .confirmation-popup-container, .go-button-active, .scroll-notification, .singleselectflex .option-block .option:only-child, .info-card > .option-block > .button:only-of-type {
  background: #F3A600;
}

/* Making the list select icons bigger */
.multiselect .option-icon {
  width: 35px;
  height: 35px;
  margin-bottom: 8px;
}
.multiselect .option-text {
  margin-top: 18px;
}
.multiselect .option-text {
  max-width: calc(100% - 75px);
}
/* Fixing Confirmation Popup */
.app {
  max-width: 780px;
  margin: 0 auto;
}
.confirmation-popup {
  max-width: 780px;
}
.confirmation-popup-container{
  width: calc(100% - 100px);
  max-width: calc(780px - 100px);
  margin: 0px 50px;
  height: auto;
  padding-bottom: 20px;
}
/* Updating single action button */
.singleselectflex .option-block .option:only-child {
  margin: 5px auto !important;
  width: 200px !important;
}
.continue-button {
  margin-top: 15px;
}
.continue-button + .arrow {
  margin-top: 37px;
}
.multiselect .continue-button + .arrow {
  margin-top: 57px;
}

/* Privacy policy button */
.info-card > .option-block > .button:only-of-type {
  max-width: 436px;
  margin: 0px auto 5px !important;
  line-height: 33px;
  padding: 9px 7px;
}
.question-block.info-card-content{
  border-radius:5px 5px 5px 5px;
  background:#fff;
}
.question-block.info-card-content .soap-note{
  font-size:20px;
}
.question-block.info-card-content .soap-note b.user-entry{
  font-size:20px;
  color:#00acb9;
}
.singleselectflex .option-block .option:only-child {
  height: 50px;
  line-height: 50px;
}

/* Pamphlet type instructions */
.question-block.info-card-content .header.stop{
  color: #F54D0C;
  font-weight: 700;
  margin: 0px -25px 20px;
  width: 100%;
  padding: 10px 25px;
}
.question-block.info-card-content .header {
  overflow: auto;
  height: auto;
}
.question-block.info-card-content .images {
  margin-bottom: 0px;
  margin-top: 30px;
}
.question-block.info-card-content .subtext .image-holder {
  margin: 0px auto;
}
.question-block.info-card-content .subtext .image-holder img {
  max-width: 80%;
  min-width: 100px;
  margin: 0px 10%;
  max-height: 200px;
  padding: 0px 0px 15px;
}
.question-block.info-card-content .subtext .image-holder img[src$=".svg"] {
  width: 100%;
  height: 200px;
}
.question-block.info-card-content .subtext p{
  padding-bottom: 12px;
}
.question-block.info-card-content .image-holder p {
  padding: 0px 10px 30px;
}
.bot > .info-card > .question-block.info-card-content, .bot > .info-card > .question-block.info-card-instruction, .bot > .info-card > .provider-block {
  opacity: 1;
}
.bot > .component-block.info-card {
  background: #ffffff;
}
.component-block.info-card .option-block .button {
  padding: 11px 7px;
  line-height: 30px;
}
.component-block.info-card .option-block.answer .button {
  margin-bottom: 5px;
}
.question-block.info-card-content {
  max-width: 100%;
}

/* Dot loading animation */
.question-block .dot{
  display:inline-block;
  position: relative;
  margin:10px 5px -10px 0px;
}
.question-block .dot:nth-of-type(1){
  animation: dot-flashing 1s infinite linear alternate;
  animation-delay: 0s;
  margin-left: calc(50% - 30px);
}
.question-block .dot:nth-of-type(2){
  animation: dot-flashing 1s infinite linear alternate;
  animation-delay: 0.5s;
}
.question-block .dot:nth-of-type(3){
  animation: dot-flashing 1s infinite linear alternate;
  animation-delay: 1s;
}
@keyframes dot-flashing {
  0% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0.05;
  }
}

/* ===========================

Fixes for IE 10, 11

=========================== */
.arrow-target, .singleselectflex .option, .edit-active, div.button.button-active, .component-block.multiselect, .singleselectflex .option-block, .singleselectflex .option-block .option, .singleselectflex .option-block .option .option-text, .signature-button, .question-block.info-card-content, .medications .med, .medications .med .name, .medications .med .dosage, .medications .med .frequency, .search-block, .option-block.popup-autocomplete.autocomplete {
  flex: 0 1 auto;
    -ms-flex: 0 1 auto;
}
.singleselectflex .option-text {
  text-align: left;
  min-width: 15px;
}
.singleselectflex .option-block {
  display: block;
  text-align: justify;
}
.singleselectflex .option-block .option {
  display: inline-block;
}
.singleselectflex .option-block.answer {
  min-height: 60px;
  display: flex;
  display: -ms-flexbox;
}
.singleselectflex .option-block .option:only-child {
  display: block;
  margin: 0px auto;
}
.singleselectflex .option-block .option:only-child .option-text {
  line-height: 50px;
  text-align: center;
}
.option-block {
  justify-content: flex-start;
}
.option-block.answer {
  justify-content: flex-end;
}
.option-block.answer .button {
  max-width: 50%;
  text-align: center;
  margin-bottom: 8px;
}
.signature-block {
	max-width: none;
}
.signature .arrow-target {
	display:block;
	max-width: none;
}
.component-block.address .inputs-wrapper, .component-block.address-entity .inputs-wrapper {
  -ms-flex-direction:row;
}
_:-ms-lang(x), .signature-button .continue-button {
    max-width:calc(50% - 20px);
    margin-right: 10px;
}
_:-ms-lang(x), .signature-button .clear-button {
    max-width:calc(50% - 20px);
    margin-right: 10px;
}
_:-ms-lang(x), .info-card > .option-block > .button.button-active {
  margin:0px !important;
}
_:-ms-lang(x), .row-buttons.row-autocomplete {
  justify-content: flex-start;
}
_:-ms-lang(x), .option-block.popup-autocomplete.autocomplete .search-block-active {
  margin-bottom: 54%;
}

/* ===========================

Mobile < 510px

=========================== */

@media (max-width: 550px){
  .question-block.info-card-content .images {
    flex-direction: column;
  }
  .question-block.info-card-content .image-holder {
    display: block;
    width: 75%;
    margin: 0px auto 15px;
    text-align: center;
  }
  .question-block.info-card-content .subtext .image-holder img {
    max-width: 165px;
    margin: 0px auto;
  }
  .question-block.info-card-content .subtext .image-holder img[src$=".svg"] {
    width: 100%;
    height: 200px;
  }
}

/* ===========================

Mobile < 320px

=========================== */

@media (max-width: 320px){
  .option-block.autocomplete .inputs-wrapper .search-input {
  padding: 0px 10px;
  }
  .continue-button {
    margin-top: 10px;
  }
  .continue-button + .arrow {
    margin-top: 34px;
  }
  .multiselect .continue-button + .arrow {
    margin-top: 54px;
  }
  .option-block {
  	margin-top: 5px;
  }
  .inputs-wrapper {
  	margin-top: 5px;
  }
  .question-block.info-card-content .subtext p {
    line-height: 28px;
    font-size: 22px;
  }
}

/* ======================

iPad and larger screens

====================== */

@media screen and (min-width: 425px) , screen and (min-device-width: 375px) and (min-device-height: 815px) , @media screen and (min-device-width: 320px) and (min-device-height: 568px) , @media screen and (min-device-width: 375px) and (min-device-height: 667px) , @media screen and (min-device-width: 414px) and (min-device-height: 776px) {
  /* Making Scroll Notification Bigger */
  .scroll-notification {
    height: 65px;
    font-size: 29px;
    line-height: 65px;
  }
  .continue-button {
    height: 50px;
    line-height: 50px;
    width: 250px;
    font-weight: 600;
    font-size: 24px;
    margin: 15px calc(50% - 125px) 45px calc(50% - 125px);
    border-radius: 13px;
  }
  .multiselect .continue-button + .arrow {
    left:-90px;
  }
  .singleselectflex .option-block .option:only-child {
    width: 250px;
    font-size: 24px;
    font-weight: 600;
    border-radius: 13px;
  }
  .go-button {
    height: 50px;
    line-height: 50px;
    font-weight: 600;
    font-size: 24px;
    border-radius: 13px;
    width: 130px;
  }
  .info-card > .option-block > .button:only-of-type {
    height: 34px;
    line-height: 32px;
    font-weight: 600;
    font-size: 24px;
    border-radius: 13px;
    max-width: 250px;
  }
  .signature-button .clear-button {
    height: 50px;
    line-height: 50px;
    font-size: 24px;
    border-radius: 13px;
  }
  /* Fixes for IE 10, 11 */
  .info-card > .option-block > .button:only-of-type {
    height: auto;
    flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    width: 100%;
    text-align: center;
  }
  .info-card > .option-block > .button.button-active {
    width: auto;
    margin: 0px 0px 5px !important;
  }
}

/* ======================

Fixes for Copay & Payment

====================== */

.copay-module .question-block.info-card-content, .previousbalance-module .question-block.info-card-content {
   flex-direction: row;
   display: flex;
   flex: 0 1 auto;
  -ms-flex: 0 1 auto;
}
.copay-module .question-block.info-card-content .subtext, .previousbalance-module .question-block.info-card-content .subtext {
   width: 100%;
}
.copay-module .question-block.info-card-content h3 {
   text-align: end;
   line-height:33px;
   margin: 0px 0px 5px;
}
.copay-module .question-block.info-card-content, .previousbalance-module .question-block.info-card-content {
  margin-bottom: 20px;
}
.component-block.creditcard .inputs-wrapper .row:nth-child(1) {
  margin-bottom: 20px;
  margin-top: 15px;
}
.component-block.creditcard .inputs-wrapper .row {
  margin-bottom: 20px;
}
.text-input {
  border-color: #696969;
}
.previousbalance-module .option-block .option-text {
  text-align: center;
}

/* ======================

Fixes for date input fields

====================== */

.component-block.date .option-block {
  flex-direction: column;
}
.component-block.date .option-block .inputs-wrapper {
  flex-direction: row;
  display: flex;
  margin-top: 10px;
  flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  margin-bottom: -20px;
}
.date-input {
  width: calc(100% - 25px);
  border-color: #696969;
}
.component-block.date .option-block .inputs-wrapper .arrow{
  left: -12px;
  z-index: 1000;
}

/* ======================

Fixes for med module

====================== */
.meds-edit-wrapper .edit-med.button {
  margin: 12px 15px;
}
.meds-edit-wrapper .med-dosage {
  margin: 8px 0px;
}
.yes-no-block-item {
  min-height: 125px;
}
.autocomplete.popup-autocomplete .button-cancel{
  margin: 0px auto;
}
.option-block.popup-autocomplete.autocomplete .search-block-active {
  max-height: 50%;
  border-bottom: solid 3px #f7b500;
  border-top: solid 3px #f7b500;
  box-shadow: 0 1px 7px 0 rgba(149,149,149,0.50);
}
.row-autocomplete {
  bottom: 10%;
  position: absolute;
}
.module_meds_eng .list-yes-no .yes-no-option, .edit-rmv-option {
  cursor: pointer;
}


/* ======================

Fixes for insurance v2 module

====================== */

.component-block.search-insurance .option-block.autocomplete .button-cancel {
  position: relative !important;
}
.search-insurance .option-block.popup-autocomplete.autocomplete .search-item {
  min-height: 30px;
  font-size: 19px;
  line-height: 26px;
  display: flex;
  align-items: center;
}
.component-block.search-insurance .option-block.autocomplete .search-block-active {
  height: 48%;
  margin-bottom: 0px;
}
.component-block.search-insurance .titletext {
  padding: 50px 0px 20px;
}
.component-block.search-insurance .option-block.autocomplete .inputs-wrapper {
  padding-bottom: 5px;
}
.component-block.search-insurance .search-block .search-instruction {
  font-size: 21px;
  text-shadow: 0 1px 3px rgba(108,108,108,0.50);
  padding-bottom: 20px;
}

@media (max-width: 425px) {
  .option-block.autocomplete .inputs-wrapper .go-button {
    display: block;
  }
  .component-block.search-insurance .option-block.autocomplete .button-cancel {
    height: 45px;
    line-height: 45px;
  }
  .component-block.search-insurance .subtext {
    line-height:normal;
    font-size: 21px;
  }
  .option-block.controls .upload-actions .button {
    font-size: 22px;
  }
}

@media (max-width: 376px) {
  .option-block.controls .upload-actions .button {
    font-size: 21px;
    line-height:27px;
    padding: 10px 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 1 auto;
    -ms-flex: 0 1 auto;
  }
}

@media (max-height: 500px) {
   .component-block.search-insurance .option-block.autocomplete .button-cancel {
    display: none;
  }
  .component-block.search-insurance .subtext {
    line-height:normal;
    font-size: 19px;
  }
  .component-block.search-insurance .option-block.autocomplete .inputs-wrapper {
    z-index: 100;
  }
}


/* ======================

Fixes for search as you type

====================== */

.search-block-active.less-sugg {
  height: 175px;
  min-height: 175px;
  max-height: 175px;
}


/* ======================

Insurance v2 unsure and other button special styles

====================== */

.insurance-module-v2 .option.insurance-unsure, .insurance-module-v2 .option.insurance-more {
  display: block;
  max-width: 375px;
  width: 100%;
  margin: 0px auto 12px;
  text-align:center;
}
.insurance-module-v2 .option.insurance-unsure .option-text, .insurance-module-v2 .option.insurance-more .option-text {
    text-align: center;
    line-height: 32px;
    padding: 1px 12px 9px;
    margin-top: 8px;
    display: inline-block;
}
.insurance-module-v2 .option.insurance-unsure, .insurance-module-v2 .option.insurance-unsure:hover {
  margin-top: 24px;
  background: #d4d4d4;
}
.insurance-module-v2 .option.insurance-unsure .option-text {
  color: #292929;
}
.insurance-module-v2 .option.insurance-more {
  background: #F3A600;
}


/* ======================

New styling and color changes for useability (only on dev)

====================== */

.provider-logo {
  border-radius: 3px;
}
.slash {
  color: #767676;
  font-weight: 400;
  font-size: 38px;
}
@media (max-width: 320px) {
  .component-block .question-block {
    margin-bottom: 10px;
  }
}

/* pamphlet instructions */
.question-block.info-card-content .header.stop{
  color: #EB4A0A;
}

/* Fixes for old things */
/* fix at line 501 */
.component-block.date .option-block .inputs-wrapper .arrow{
  left: 0px;
}


/* prevoius questions defocus */

.bot > .component-block > div, .bot > .quiz-module .component-block > div {
  opacity: 0.55;
}
.bot .quiz-module .component-block:last-of-type > div, .bot .quiz-module .component-block .option-block.answer {
  opacity: 1;
}
.subtext a, .msg_subtext a, .question-text a {
  color: #212121;
  text-decoration: none;
  display: inline;
  cursor: pointer;
}
.bot > .component-block:last-of-type .subtext a, .bot > .component-block:last-of-type .msg_subtext a, .quiz-module .component-block:last-of-type .subtext a, .quiz-module .component-block:last-of-type .msg_subtext a, .bot > .component-block:last-of-type .question-text a {
  color: #007ae6;
  text-decoration: underline;
  text-underline-offset: 2px;
}
div.button.button-active {
  opacity: 0.45;
  background: #000;
  hyphens:auto;
  text-shadow: none;
  cursor: auto;
  box-shadow: none;
  border-radius: 25px 0px 25px 25px;
  padding-left: 15px;
  padding-right: 15px;
}
.component-block.creditcard .option-block.answer .button-active {
  opacity: 1;
  background: #ffffff;
  color: #212121;
  border: solid 3px #ececec;
  max-width: 100%;
  border-radius: 3px;
  text-underline-offset: 2px;
  hyphens:none;
  font-size: 24px;
}
.component-block.creditcard .option-block.answer .button-active a {
  color: #007ae6;
  text-decoration: underline;
}
.bot > .copay-module:not(:last-child) .component-block > div, .bot > .pharmacy-module:not(:last-child) .component-block > div, .bot > .credit-card-contract-module:not(:last-child) .component-block > div, .bot > .previousbalance-module:not(:last-child) .component-block > div, .bot > .care-team-module:not(:last-child) .component-block > div, .bot > .insurance-module-v2:not(:last-child) .component-block > div {
  opacity: 0.55;
}
.bot > .copay-module .component-block > div, .bot > .pharmacy-module .component-block > div, .bot > .credit-card-contract-module .component-block > div, .bot > .previousbalance-module .component-block > div, .bot > .care-team-module .component-block > div, .bot > .insurance-module-v2 .component-block > div {
  opacity: 0.55;
}
/* Med module specific fix for defocus*/
.bot > .module_med_v20.component-block > div, .bot > .module_med_v20.component-block:last-of-type > div > div, .bot > .module_med_v20.component-block > div:last-of-type > .option-block.answer {
  opacity: 1;
}
.bot > .module_med_v20.component-block > div > div {
  opacity: 0.55;
}
.info-card > .option-block > .button-active.button:only-of-type {
  background: #000000;
  text-shadow: none;
  cursor: auto;
}

/* Text Inputs */

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
input::placeholder {
  color: #767676;
  font-size: 23px;
  width: 100%;
  opacity: 1;
}

.text-input {
  text-overflow: ellipsis;
  padding-right: 3px;
  padding-left: 8px;
}
.number-input {
  border-color: #696969;
}
.text-input.mr, .number-input.mr {
  margin-right:0px;
}

/* Inputs warning messaging */
.notification-message {
  background: #EB0000;
}
.invalid {
  border-color: #EB0000 !important;
  border-width: 3px;
  background: #ffffff url(https://s3.amazonaws.com/ui.healthnote.com/images/icon-input-invalid-small.svg) no-repeat right 7px center;
  background-size: 25px 25px;
  padding-left: 8px;
  padding-right: 38px;
  text-align:left;
  padding-bottom:0px;
  text-overflow: ellipsis;
}
@media (max-width: 425px) {
  .date-input.invalid {
    background-position: right 5px center;
    padding-left: 5px;
    padding-right: 30px;
  }
  .component-block.date .inputs-wrapper > div:nth-child(2) {
    padding-left: 5px;
    padding-right: 5px;
  }
}
@media (max-width: 375px) {
  .date-input.invalid {
    background-position: right 3px center;
    background-size: 19px 21px;
    padding-left: 5px;
    padding-right: 20px;
    letter-spacing: -1px;
  }
  .component-block.date .inputs-wrapper > div:nth-child(2) {
    padding-left: 3px;
    padding-right: 3px;
  }
}
@media (max-width: 315px) {
  .date-input.invalid {
    background-image: none;
    padding-right: 3px;
    padding-left: 3px;
    text-align: center;
  }
}

/* Autocomplete search inputs*/
.option-block.autocomplete .inputs-wrapper .search-input {
  padding-right: 8px;
}

/* messaging other */
.loading-block .percent {
  text-shadow:
   0px 1px 10px #15948A,
   -1px -1px 1px #15948A,
    1px -1px 1px #15948A,
    -1px 1px 1px #15948A,
     1px 1px 1px #15948A;
}
.confirmation-popup-content  {
  font-size: 24px;
  color: #212121;
}
.confirmation-popup {
  z-index:100;
}
@media (max-width: 365px) {
  .confirmation-popup-container {
    margin: 0px 20px;
    width: calc(100% - 40px);
  }
}
.scroll-notification {
  box-shadow: 0 0 15px 0 rgba(50,50,50,0.30);
}

/* Buttons */

/* main button adjustments */
.button, .blank, .edit, .camera-request .option, .singleselectflex .option, .v20 .edit-med, .module_meds_eng .list-yes-no .edit-rmv-option {
  box-shadow:inset 0px 1px 1px 0.5px rgba(255, 255, 255, 0.3), inset 0px -1px 2px 0px rgba(0,0,0, 0.4);
  font-size: 25px;
  letter-spacing: 0.75px;
  text-shadow:
   0px 1px 10px #15948A,
   -1px -1px 1px #15948A,
    1px -1px 1px #15948A,
    -1px 1px 1px #15948A,
     1px 1px 1px #15948A;
}
.component-block.yes\/no .option-block .button, .component-block.info-card .option-block .button {
  padding: 11px 7px;
  line-height: 30px;
  display:flex;
  align-items: center;
  flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  justify-content: center;
}
.component-block.yes\/no .option-block .button.button-active, .component-block.yes\/no .option-block .button.edit-active, .component-block.info-card .option-block .button.button-active, .component-block.info-card .option-block .button.edit-active  {
  flex: 0 1 auto;
  -ms-flex: 0 1 auto;
}
.edit {
  opacity: .85;
  text-shadow:
   0px 1px 10px #128178,
   -1px -1px 1px #128178,
    1px -1px 1px #128178,
    -1px 1px 1px #128178,
     1px 1px 1px #128178;
}
.button-active {
  padding: 10px 15px;
  text-shadow: none;
}
.continue-button-active, .go-button-active, .singleselectflex .option-block .option:only-child, .info-card > .option-block > .button:only-of-type, .button-ok, .legal-popup .legal-popup-footer .btn-done, .insurance-module-v2 .option.insurance-more {
  box-shadow:inset 0px 1px 1px 0.5px rgba(255, 255, 255, 0.3), inset 0px -1px 2px 0px rgba(0,0,0, 0.2);
  font-size: 25px;
  letter-spacing: 0.75px;
  font-weight: bold;
  text-shadow:
   0px 1px 10px #D17F05,
   -1px -1px 1px #D17F05,
    1px -1px 1px #D17F05,
    -1px 1px 1px #D17F05,
     1px 1px 1px #D17F05;
}
.scroll-notification {
  padding: 7px 0px;
}
.go-button-active, .go-button {
  font-size: 20px;
  margin-left: 10px;
  letter-spacing: normal;
  font-weight: 700;
}
.component-block.autocomplete .option-block.autocomplete {
  margin-left: 0px;
  padding: 0px;
}
.component-block .date .continue-button {
  z-index: 99;
}
.module_med_v20 .component-block.autocomplete .option-block.autocomplete {
  margin-left: -15px;
  padding: 20px 20px 0px;
}
.option-block.controls .upload-actions .button {
  font-size: 25px;
  line-height:27px;
  padding: 10px 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;
  -ms-flex: 0 1 auto;
}
@media (max-width: 320px) {
  .module_med_v20 .component-block.autocomplete .option-block.autocomplete {
    margin-left: -10px;
    margin-top: 0px;
    padding: 15px 15px 0px;
  }
  .subtext {
    line-height: 1.2em;
  }
  .question-text {
    line-height: 1.2em;
  }
}
@media (max-width: 425px) {
  .option-block.autocomplete .inputs-wrapper .go-button {
    display: block;
  }
  .option-block.controls .upload-actions .button {
    letter-spacing: normal;
    margin-left: 0px;
  }
  .option-block.controls .upload-actions .button.inactive{
    margin-left: 10px;
  }
  .option-block.controls .upload-actions .button.blank {
    padding: 0px;
  }
}

.camera-request .option, .singleselectflex .option {
  margin: 0px 12px 12px 0px;
  min-width: 54px;
  text-align:center;
}
.camera-request .option-text, .singleselectflex .option-text {
  display:inline-block;
  text-align:left;
  line-height: 1.2em;
  padding: 3px 12px 10px;
}
.camera-request .option-block {
  width: auto;
}
.singleselectflex .option-block .option:only-child .option-text {
  margin-top:0px;
  padding: 0px 12px;
}
.legal-popup .legal-popup-footer .btn-done {
  cursor:pointer;
}
div.button.button-active {
  cursor: auto;
  box-shadow:inset 0px 0px 0px 0px;
}

/* Med module buttons */
.module_meds_eng .list-yes-no .yes-no-block.status-yes .yes-no-option.no {
  color: #212121;
  background: #d4d4d4;
  border: #d4d4d4 solid 2px;
}
.module_meds_eng .list-yes-no .yes-no-option {
  font-size: 24px;
}
.module_meds_eng .list-yes-no .yes-no-block.status-yes .yes-no-option.no:hover {
  box-shadow:inset 0px 0px 0px 900px rgba(0, 0, 0, 0.04);
}
.module_meds_eng .yes-no-block .yes.yes-no-option-active:hover {
  box-shadow:inset 0px 0px 0px 900px rgba(0, 0, 0, 0.1);
}
.autocomplete.popup-autocomplete .button-cancel {
  position: relative;
}

/* Edit confirm menu buttons (do not change) */
.btn-cancel, .btn-ok {
  box-shadow:inset 0px 1px 1px 0.5px rgba(0,0,0, 0.05), inset 0px -1px 2px 0px rgba(0,0,0, 0.3);
}
.btn-cancel:hover, .btn-ok:hover {
  box-shadow:inset 0px 0px 0px 900px rgba(0, 0, 0, 0.04);
}

/* Credit card fixes */
.component-block.creditcard .not-valid {
  border-color: #EB0000 !important;
  border-width: 3px;
  background: #ffffff url(https://s3.amazonaws.com/ui.healthnote.com/images/icon-input-invalid-small.svg) no-repeat right 7px center;
  background-size: 25px 25px;
  padding-left: 8px;
  padding-right: 38px;
  text-align:left;
  padding-bottom:0px;
  text-overflow: ellipsis;
}
.component-block.creditcard .row.button-row .continue-button.skip-button {
  width: calc(40% - 0px);
  max-width: 120px;
}
.component-block.creditcard .row.button-row .arrow-target .continue-button {
  width: 100%;
  margin: 0px;
  margin-left: -15px;
}
.component-block.creditcard .inputs-wrapper .row:nth-child(5).button-row .arrow-target {
  margin: 0px 10px;
  padding: 0px 15px;
  width: 40%;
  max-width: 200px;
}
.component-block.creditcard .credit-card-form-label {
  position: absolute;
  right: auto;
  top: -42px;
  color: rgba(255,255,255,0);
  background: url(https://s3.amazonaws.com/ui.healthnote.com/images/icon-credit-card.svg) no-repeat left -8px center;
  padding-right: 100px;
  background-size: 100% 60px;
}
.component-block.creditcard .continue-button-active:before {
  content: "";
  display: inline-block;
  width: 21px;
  height: 24px;
  background: url(https://s3.amazonaws.com/ui.healthnote.com/images/icon-secure-lock-wht.svg) no-repeat center;
  background-size: 100%;
  margin-bottom: -3px;

  filter: drop-shadow(0px 0px 2px #c27605) drop-shadow(0px 0px 8px #D17F05);
}
.component-block.creditcard .inputs-wrapper .row:nth-child(5).button-row .arrow-target .continue-button {
    overflow-y: hidden;
}
.component-block.creditcard .inputs-wrapper .row:nth-child(5).button-row .arrow-target {
    margin-left: 10px;
    margin-right: 0px;
}
.component-block.creditcard .inputs-wrapper .row:nth-child(5).button-row > .continue-button  {
  margin-left: 0px;
  margin-right: 10px;
}

@media (max-width: 365px) {
  .component-block.creditcard .continue-button-active:before {
    display: none;
  }
  .component-block.creditcard .row .arrow-target:first-of-type + .arrow-target {
    margin-right: 0px;
    margin-left: 0px;
  }
  .component-block.creditcard .row .arrow-target:first-of-type + .arrow-target:last-of-type {
    margin-right: 10px;
  }
  .component-block.creditcard .inputs-wrapper .row:nth-child(5).button-row .arrow-target {
    margin-left: 5px;
    margin-right: 0px;
  }
  .component-block.creditcard .inputs-wrapper .row:nth-child(5).button-row > .continue-button  {
    margin-left: 0px;
    margin-right: 5px;
  }
}
@media (max-width: 320px) {
  .component-block.creditcard .not-valid {
    background: none;
  }
}

@media (max-width: 320px) {
  .button:nth-child(2), .button {
    margin-left: 10px;
  }
  .signature .continue-button {
    font-size: 25px;
  }
}

/* Blood preasure quesiton fixes */
.blood-pressure-v2 .row-buttons {
  max-width: 370px;
  margin: 0px auto;
  width: 100%;
}
.blood-pressure-v2 .row-buttons .continue-button {
  font-size: 24px;
  line-height:25px;
  padding: 10px 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;
  -ms-flex: 0 1 auto;
  margin: 0px;
  width: calc(100% - 5px);;
  box-sizing:border-box;
  margin-left: 5px;
  max-width: 175px;

}
.blood-pressure-v2 .row-buttons .arrow-target {
  margin: 0px;
  width: 50%;
}
.blood-pressure-v2 .row-buttons .skip-button {
  letter-spacing: -0.5px;
  margin-left:0px;
  width: calc(50% - 5px);
  margin-right: 5px;
}
@media (max-width: 376px) {
  .slash {
    margin: 0px 15px;
  }
}


/* bluegreen primary button color */
.button, .blank, .edit, .camera-request .option, .singleselectflex .option, .v20 .edit-med, .module_meds_eng .list-yes-no .edit-rmv-option/*, .button:hover, .blank:hover, .edit:hover, .camera-request .option:hover, .singleselectflex .option:hover, .module_meds_eng .list-yes-no .edit-rmv-option:hover */{
  background:#17A196;
}

/* bluegreen primary button hover */
.button:hover, .blank:hover, .edit:hover, .camera-request .option:hover, .singleselectflex .option:hover, .module_meds_eng .list-yes-no .edit-rmv-option:hover {
  box-shadow:inset 0px 0px 0px 900px rgba(0, 0, 0, 0.1);
  background-color: #17A196;
  cursor: pointer;
}

/* Orange alert button color */
.continue-button-active, .go-button-active, .singleselectflex .option-block .option:only-child, .info-card > .option-block > .button:only-of-type, .button-ok, .legal-popup .legal-popup-footer .btn-done, .insurance-module-v2 .option.insurance-more/*, .continue-button-active:hover, .go-button-active:hover, .singleselectflex .option-block .option:only-child:hover, .info-card > .option-block > .button:only-of-type:hover, .button-ok:hover, .legal-popup .legal-popup-footer .btn-done:hover, .insurance-module-v2 .option.insurance-more:hover */{
  background: #F79400;
}

/* orange alert button hover */
.continue-button-active:hover, .go-button-active:hover, .singleselectflex .option-block .option:only-child:hover, .info-card > .option-block > .button:only-of-type:hover, .button-ok:hover, .legal-popup .legal-popup-footer .btn-done:hover, .insurance-module-v2 .option.insurance-more:hover {
  box-shadow:inset 0px 0px 0px 900px rgba(0, 0, 0, 0.04);
  cursor: pointer;
}

/* grey cancel/skip/delete/unsure button hover */
.module_meds_eng .list-yes-no .edit-rmv-option.rmv:hover, .button-cancel:hover, .signature-button .clear-button:hover, .button.inactive:hover, .signature-button .clear-button:hover, .component-block.creditcard .skip-button:hover, .insurance-module-v2 .option.insurance-unsure:hover, .blood-pressure-v2 .row-buttons .skip-button:hover {
  box-shadow:inset 0px 0px 0px 900px rgba(0, 0, 0, 0.05);
  cursor: pointer;
}
/* grey cancel/skip/delete button color */
.module_meds_eng .list-yes-no .edit-rmv-option.rmv, .button-cancel, .signature-button .clear-button, .button.inactive, .signature-button .clear-button, .component-block.creditcard .skip-button, .insurance-module-v2 .option.insurance-unsure, .blood-pressure-v2 .row-buttons .skip-button  {
  font-size: 25px;
  color: #212121;
  background: #d4d4d4 !important;
  text-shadow:0px 1px 3px rgba(0,0,0, 0.2);
  box-shadow:inset 0px 1px 2px 0px rgba(255, 255, 255, 0.99), inset 0px -1px 2px 0px rgba(0,0,0, 0.3);
  font-weight:normal;
}

/* Orange backgrounds */
.continue-button-active, .confirmation-popup-container, .go-button-active, .scroll-notification, .singleselectflex .option-block .option:only-child, .info-card > .option-block > .button:only-of-type, .button-ok, .legal-popup .legal-popup-footer .btn-done {
  background: #F79400;
  background: #fa9500;
}
.scroll-notification {
  text-shadow:
   0px 1px 10px #D17F05,
   -1px -1px 1px #D17F05,
    1px -1px 1px #D17F05,
    -1px 1px 1px #D17F05,
     1px 1px 1px #D17F05;
}

/* Search as you type */
.search-nothing-found, .search-keep-typing, .component-block.search-insurance .search-block .search-instruction {
  text-shadow:
   0px 1px 10px #D17F05,
   -1px -1px 1px #D17F05,
    1px -1px 1px #D17F05,
    -1px 1px 1px #D17F05,
     1px 1px 1px #D17F05;
}
.search-block {
  background-color: #ff9900;
  background-color: #fa9500;
}
.option-block.popup-autocomplete.autocomplete .search-block-active, .search-block-active {
  border-bottom: solid 3px rgba(255, 255, 255, 0);
  border-top: solid 3px rgba(255, 255, 255, 0);
  border-radius: 5px;
}
.option-block.popup-autocomplete.autocomplete .search-item {
  padding: 10px 20px 10px 10px;
  min-height: 30px;
  font-size: 19px;
  letter-spacing: 0.75px;
  font-weight: 700;
}
.search-item {
  padding-top: 9px;
  padding-bottom: 9px;
  font-size: 19px;
  letter-spacing: 0.75px;
  font-weight: 700;
}
.search-item:hover {
  box-shadow:inset 0px 0px 0px 900px rgba(0, 0, 0, 0.04);
}
.search-block-active .btn-more {
  box-shadow:inset 0px 1px 1px 0.5px rgba(0,0,0, 0.05), inset 0px -1px 2px 0px rgba(0,0,0, 0.3);
}
.search-block-active .btn-more:hover {
  box-shadow:inset 0px 0px 0px 900px rgba(0, 0, 0, 0.04);
}

/* check boxes */
.multiselect .option-active, .list .option-active {
  font-weight: normal;
  letter-spacing: 0.75px;
  text-shadow:
   0px 1px 10px #15948A,
   -1px -1px 1px #15948A,
    1px -1px 1px #15948A,
    -1px 1px 1px #15948A,
     1px 1px 1px #15948A;
}
.singleselect .option-text, .singleselect-insurance .option-text, .multiselect .option-text, .list .option-text {
  letter-spacing: 0.75px;
}
.multiselect .option-icon, .multiselect .option-active > .option-icon, .list .option-active > .option-icon {
  background: #ffffff;
  border-radius: 7px;
  border: 3px solid #000000;
  width: 29px;
  height: 29px;
  position:relative;
}
.multiselect .option-active > .option-icon, .list .option-active > .option-icon {
  background: #ffffff;
  border-radius: 6px;
  border: none;
  box-shadow:0px 0px 0px 3px rgba(0, 0, 0, 0.25);
  width: 29px;
  height: 29px;
  margin: 16px 16px 11px 16px;
  position:relative;
}
.multiselect .option-active > .option-icon:after {
  content: "";
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  transform: rotate(45deg);
  position:absolute;
  bottom: 5px;
  left: 16px;
  width: 3px;
  height: 18px;
  background: #000;
}
.multiselect .option-active > .option-icon:before {
  content: "";
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  transform: rotate(45deg);
  position:absolute;
  bottom: 11px;
  left: 4px;
  width: 9px;
  height: 3px;
  background: #000;
}

/* Signature */
.signature .question-text {
  color: #17A196;
}
.dashed-line {
  border-color: #17A196;
}
.signature .signature-error {
  color: #EB0000;
}

/* Fixes for client specific color schemes - add to those files only and un-comment - NOT for DEFAULT COLORS */
/*
.button, .blank, .edit, .camera-request .option, .singleselectflex .option, .v20 .edit-med, .module_meds_eng .list-yes-no .edit-rmv-option {
  text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
  box-shadow:inset 0px 1px 1px 0.5px rgba(255, 255, 255, 0.3), inset 0px -1px 2px 0px rgba(0,0,0, 0.3);
}
.confirmation-popup-container .confirmation-popup-title, .confirmation-popup-container .confirmation-popup-content {
  text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
}
.continue-button-active, .go-button-active, .singleselectflex .option-block .option:only-child, .info-card > .option-block > .button:only-of-type, .button-ok, .legal-popup .legal-popup-footer .btn-done, .insurance-module-v2 .option.insurance-more {
  text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
  box-shadow:inset 0px 1px 1px 0.5px rgba(255, 255, 255, 0.3), inset 0px -1px 2px 0px rgba(0,0,0, 0.3);
}
.scroll-notification, .confirmation-popup-title, .confirmation-popup-content {
  text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
}
.search-nothing-found, .search-keep-typing, .component-block.search-insurance .search-block .search-instruction {
  text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
}
.multiselect .option-active, .list .option-active {
  text-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
}
.component-block.creditcard .continue-button-active:before {
  filter: none;
}
.button:hover, .blank:hover, .edit:hover, .camera-request .option:hover, .singleselectflex .option:hover, .module_meds_eng .list-yes-no .edit-rmv-option:hover {
  background-color: ; /* add client button color here */
/*}
*/

/* ======================

Powered by HN logo (only on dev)

====================== */

.component-block.header {
  overflow:visible;
}
.component-block.header:before {
  content:"";
  background: url('https://s3.amazonaws.com/ui.healthnote.com/images/client/powered-hn-horizontal.png') no-repeat;
  background-size: cover;
  display:block;
  position:absolute;
  height: 30px;
  width: 195px;
  bottom: -40px;
  right: 8px;
  z-index:1;
}
.component-block.end:after, .component-block.wait:after {
  content:"";
  background: url('https://s3.amazonaws.com/ui.healthnote.com/images/client/powered-hn-horizontal.png') no-repeat;
  background-size: cover;
  display:block;
  position:absolute;
  height: 30px;
  width: 195px;
  top: 10px;
  right: 8px;
  z-index:1;
}

/* ===========================

Edit Popup New Style (only on dev)

============================ */

.confirmation-popup-container {
  max-width: 375px;
  margin: 0px auto;
  position: relative;
  padding: 1px 1px 78px;
  top: 50%;
  transform: translateY(-50%);
}
.confirmation-popup-form {
  background: #ffffff;
  color: #000000;
  padding: 10px 10px 1px;
  margin: 8px 8px 0px;
  border-radius: 7px 7px 3px 3px;
}
.confirmation-popup-form .confirmation-popup-title, .confirmation-popup-form .confirmation-popup-content {
  text-shadow: none;
}
.confirmation-popup-form .confirmation-popup-content {
  margin-bottom: 25px;
}
.confirmation-popup-controls .btn-cancel {
  margin: 15px -8px -5px 0px;
  width: 50%;
}
.confirmation-popup-controls .btn-ok {
  margin: 15px 16px -5px -10px;
  width: 50%;
}

/* ===========================

Color and font consolidation (only on dev)

============================ */

/* Colors */
.progress-bar {
  background: #ececec;
  border-bottom: solid 1px #d4d4d4;
}
.progress-bar-complete {
  border-bottom: solid 1px #27A59B;
}
html, body {
  background: #ececec;
}
.text-input {
  caret-color: #007AE6;
}
.instructions-container {
  background-color: #212121;
}
.canvas.canvas-signature {
  border-color: #767676;
}
.option-icon {
  opacity: 0.45;
}

/* Fonts */
input, .date-input, .number-input, .text-input {
  font-size: 23px;
  color: #000000;
  font-weight: 400;
}
.option-text {
  font-size: 25px;
  font-weight: 400;
  color: #212121;
}
.option-icon + .option-text {
  font-size: 24px;
}
.search-nothing-found, .search-keep-typing {
  font-size: 22px;
  padding: 0px 5px 10px;
  box-sizing: border-box;
  line-height: 26px;
}
.scroll-notification, .singleselectflex .option-block .option:only-child .option-text, .insurance-module-v2 .option.insurance-more .option-text {
  font-weight: 700;
}
.component-block.search-insurance .search-block .search-instruction {
  font-size: 22px;
}
.btn-more {
  font-size: 20px;
}
.info-card-content h3 {
  font-size: 27px;
}

/* Fix @media rule for scroll notification in small windows */
@media (max-width: 425px) {
  .scroll-notification {
      height: 50px;
      font-size: 24px;
      line-height: 50px;
  }
}

/* Buttons */
.module_meds_eng .list-yes-no .yes-no-option {
  color: #17A196;
  font-size: 24px;
  border: #17A196 solid 2px;
}
.module_meds_eng .list-yes-no .yes-no-option:hover {
  box-shadow:inset 0px 0px 0px 900px rgba(0, 0, 0, 0.04);
}
.module_meds_eng .yes-no-block .yes.yes-no-option-active, .module_meds_eng .yes-no-block .no.yes-no-option-active {
  background-color: #17A196;
  box-shadow:inset 0px 1px 1px 0.5px rgba(255, 255, 255, 0.3), inset 0px -1px 2px 0px rgba(0,0,0, 0.4);
  text-shadow:
   0px 1px 10px #15948A,
   -1px -1px 1px #15948A,
    1px -1px 1px #15948A,
    -1px 1px 1px #15948A,
     1px 1px 1px #15948A;
  border: solid 2px #ffffff;
  padding: 4px 15px;
  width: 50px;
  margin-left: 28px;
  /* margin-top: 16px; */
}
.module_meds_eng .list-yes-no .yes-no-block.status-no .yes-no-option.yes, .module_meds_eng .list-yes-no .yes-no-block.status-yes .yes-no-option.no {
  text-shadow:0px 1px 3px rgba(0,0,0, 0.2);
  box-shadow:inset 0px 1px 2px 0px rgba(255, 255, 255, 0.99), inset 0px -1px 2px 0px rgba(0,0,0, 0.3);
  border: solid 2px #ffffff;
  padding: 4px 15px;
  width: 50px;
  margin-left: 28px;
  color: #212121;
  background: #d4d4d4;
}
.module_meds_eng .list-yes-no .yes-no-block.status-no .yes-no-option.yes:hover {
  box-shadow:inset 0px 0px 0px 900px rgba(0, 0, 0, 0.04);
}
.module_meds_eng .yes-no-block .no.yes-no-option-active:hover {
  box-shadow:inset 0px 0px 0px 900px rgba(0, 0, 0, 0.1);
}
.module_meds_eng .yes-no-block .yes.yes-no-option-active:before {
  background-color: #17A196;
}
.module_meds_eng .list-yes-no .yes-no-block.status-yes .yes-no-option.no, .module_meds_eng .yes-no-block .no.yes-no-option-active  {
  margin-top:16px;
}
.module_meds_eng .list-yes-no .yes-no-option.yes {
  margin-top:2px;
}
.module_meds_eng .yes-no-block .yes.yes-no-option-active, .module_meds_eng .list-yes-no .yes-no-block.status-no .yes-no-option.yes {
  margin-top:0px;
}

/* Messaging */
.module_meds_eng .list-yes-no .option-text {
  width: calc(100% - 126px);
}

/* Update for image taking instructions for insurance card */
.insurance-instructions.front{
  background: url(https://s3.amazonaws.com/ui.healthnote.com/images/questionnaire/guide-front-insurance-card-no-text.svg) no-repeat top center;
  background-size: 100%;
}
.insurance-instructions.back{
  background: url(https://s3.amazonaws.com/ui.healthnote.com/images/questionnaire/guide-back-insurance-card-no-text.svg) no-repeat top center;
  background-size: 100%;
}
.insurance-instructions.front:after, .insurance-instructions.back:after {
  content: "Try to center the card against a dark background and make sure all four corners are visible.";
  width: calc(100% - 50px);
  color: #ffffff;
  position:absolute;
  bottom: 25px;
  background: #212121;
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  left: 25px;
  box-sizing:border-box;
  padding: 10px 20px;
}

/* border-radius sync across buttons */

.signature-button .clear-button, .continue-button, .info-card > .option-block > .button:only-of-type, .go-button, .button-cancel, .camera-request .option, .singleselectflex .option, .module_meds_eng .list-yes-no .edit-rmv-option, .module_meds_eng .list-yes-no .yes-no-option, .button-ok, .v20 .edit-med, .singleselectflex .option-block .option:only-child, .btn-more, .btn-cancel, .btn-ok, .legal-popup .legal-popup-footer .btn-done {
  border-radius: 11px;
}