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

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;
    max-width: 130px;
    padding: 0 10px 0 10px;
  }
  .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: #767676;
}
.previousbalance-module .option-block .option-text {
  text-align: center;
}

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

Updates for double text input fields

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

.component-block.double-text-input .option-block .inputs-wrapper {
  display: flex;
}

@media (max-width: 480px) {
  .component-block.double-text-input .option-block {
    flex-direction: column;
  }
  .component-block.double-text-input .option-block .go-button {
    align-self: 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: #767676;
}
.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: none;
  }
  .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;
}

.credit-card-contract-module .singleselectflex .option-block .option:only-child {
  width: fit-content !important;
}

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

"Powered By Healthnote" styles

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

.branding-container {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 30px;
}

.scheduler-extra .main .scroll-container .branding-container {
  background: #eee;
}

.branding img {
  height: 100%;
  width: 100%;
}

@media (min-width: 768px) {
  .branding {
    width: 50%;
    height: auto;
  }
}