/* base Form CSS */

form
{
  float: left;
  width: 100%;
}

.form-container
{
    margin-bottom: 14px;
}

form input,
form label,
form textarea,
form select,
form span {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    color: #74767B;
}

/* form div.column
{
    padding-left: 0;
    padding-right: 0;
} */

textarea
{
    resize: none;
}

label {
    font-size: 16px;
    line-height: 16px;
    color: #d2d3d4;
    position: absolute;
    transform-origin: top left;
    transform: translate(0, 16px) scale(1);
    transition: all .1s ease-in-out;
    /*z-index: 50;*/
}

.ui-checkboxradio-label {
    transform-origin: unset;
    transform: unset;
    transition: unset;
}

.form-element-container
{

}

.element-outline-container
{
    padding: 3px;
    border: 1px solid transparent;
}

.element-outline-container.focus
{
    padding: 2px;
    border: 2px dotted #979797;
}

.element-outline-container.focus .text-element-container,
.element-outline-container.focus .select-element-container
{
    border: 2px solid #0069b5;
    height: auto;
}

.text-element-container
{
    border: 2px solid #8C8C8C;
    padding: 0 35px 0 8px;
    position: relative;
}

.text-element-container.disabled,
.text-element-container.disabled:hover
{
  border: 2px dashed #9fa1a4;
  padding: 0 35px 0 8px;
  position: relative;
  background-color: #FAFAFA;
  cursor: not-allowed;
}

form input[disabled]
{
    cursor: not-allowed;
}

[type="checkbox"] + label, [type="radio"] + label
{
    display: inline-block;
    vertical-align: baseline;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
}

.select-element-container
{
    border: 2px solid #9fa1a4;
    padding: 0;
    position: relative;
}

.text-element-container:hover,
.select-element-container:hover {
    border: 2px solid #0069b5;
}

.text-element-container input,
.text-element-container textarea
{
    border: none;
    font-size: 16px;
    line-height: 18px;
    outline: 0;
    padding: 16px 0 16px 0;
    width: 100%;
    box-shadow: none;
    margin: 0;
    height: auto;
    background-color: transparent;
    transition: unset;
    min-height: unset;
}

.text-element-container input:focus,
.text-element-container textarea:focus
{
    border: none;
    font-size: 16px;
    line-height: 18px;
    outline: 0;
    padding: 16px 0 16px 0;
    width: 100%;
    box-shadow: none;
    margin: 0;
    height: auto;
    background-color: transparent;
    transition: unset;
    min-height: unset;
}

.text-element-container.active label
{
    transform: translate(0, 4px) scale(.60);
}

.selectLabel
{
    display: none;
}


.selectLabel.select-label-active
{
    display: block;
    transform: translate(0, 4px) scale(.60);
}

.ui-selectmenu-button.ui-button
{
    border: none;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    background: transparent;
    outline: 0;
    width: 100%;
    font-size: 16px;
    line-height: 16px;
    padding: 0;
}

.ui-selectmenu-text
{
    padding: 16px 0 16px 8px;
    color: #74767B;
    width: 100%;
    line-height: 18px;
}

.ui-selectmenu-icon.ui-icon
{
    background-image: none;
    display: none;
}

form .ui-selectmenu-text::after,
.ui-selectmenu-text::after
{
    font-family: "Font Awesome 6 Pro";
    content: '\f0d7';
    font-weight: 900;
    font-size: 16px;
    color: #030211;
    background-image: none;
    position: absolute;
    right: 0;
    padding-right: 8px;
}

.ui-selectmenu-menu .ui-menu .ui-menu-item
{
    width: 100%;
    padding: 0;
    border-bottom: 1px solid #d2d3d4;
}

.ui-selectmenu-menu .ui-menu .ui-menu-item-wrapper
{
    padding: 8px;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    border: 2px solid transparent;
    background: none;
    font-weight: normal;
    color: #74767B;
    /*color: #ffffff;*/
}

.overflow { max-height: 320px; }

/*.ui-selectmenu-menu .ui-menu .ui-menu-item:first-child*/
/*{*/
    /*display: none;*/
/*}*/


/* checkbox - radio */

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button, html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
    border: 2px solid transparent;
    background: transparent;
    font-weight: normal;
    /*color: #9FA1A4;*/
    text-align: left;
}

.ui-checkboxradio-icon-space
{
    padding: 0 4px;
}

/* radio checkbox container hover focus */
.radio-element-container .ui-state-hover,
.radio-element-container .ui-widget-content .ui-state-hover,
.radio-element-container .ui-widget-header .ui-state-hover,
.radio-element-container .ui-state-focus,
.radio-element-container .ui-widget-content .ui-state-focus,
.radio-element-container .ui-widget-header .ui-state-focus,
.radio-element-container .ui-button:hover,
.radio-element-container .ui-button:focus,
.checkbox-element-container .ui-state-hover,
.checkbox-element-container .ui-widget-content .ui-state-hover,
.checkbox-element-container .ui-widget-header .ui-state-hover,
.checkbox-element-container .ui-state-focus,
.checkbox-element-container .ui-widget-content .ui-state-focus,
.checkbox-element-container .ui-widget-header .ui-state-focus,
.checkbox-element-container .ui-button:hover,
.checkbox-element-container .ui-button:focus{
    border: 2px dotted #979797;
    background: transparent;
    font-weight: normal;
    color: #58595b;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    outline: 0;
    box-shadow: unset;
}

/* radio elements */
.radio-element-container .ui-checkboxradio-radio-label .ui-icon-background {
    width: 20px;
    height: 20px;
    border-radius: 1em;
    overflow: visible;
    border: 2px solid #58595b;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background-image: unset;
}

.radio-element-container .ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
.radio-element-container .ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
    background-image: none;
    width: 20px;
    height: 20px;
    border-width: 2px;
    border-style: solid;
}

.radio-element-container .ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon::after,
.radio-element-container .ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon::after {
    background-image: none;
    width: 25px;
    height: 25px;
    position: absolute;
    left: -2px;
    top: 2px;
    font-family: "Font Awesome 6 Pro";
    content: '\f111';
    font-weight: 800;
    font-size: 16px;
    color: #0069b5;
    text-indent: 0;
}

/* checkbox elements */
.checkbox-element-container .ui-checkboxradio-label .ui-icon-background {
    width: 25px;
    height: 25px;
    border-radius: 0;
    overflow: visible;
    border: 2px solid #58595b;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background-image: none;
}

.checkbox-element-container .ui-state-active .ui-icon::after,
.checkbox-element-container .ui-button:active .ui-icon::after {
    background-image: none;
    width: 25px;
    height: 25px;
    position: absolute;
    left: 2px;
    top: 2px;
    font-family: "Font Awesome 6 Pro";
    content: '\f00c';
    font-weight: 400;
    font-size: 16px;
    text-indent: 0;
}

.checkbox-element-container .ui-state-active .ui-icon.unCheckRadio::after,
.checkbox-element-container .ui-button:active .ui-icon.unCheckRadio::after
{
    content: '';
}

/* radio css */
.checkbox-element-container .radioButton.ui-checkboxradio-label .ui-icon-background {
    border-radius: 50%;
}



/* checkbox radio border color focus hover */
.checkbox-element-container .ui-state-hover .ui-icon,
.checkbox-element-container .ui-state-focus .ui-icon,
.checkbox-element-container .ui-button:hover .ui-icon,
.checkbox-element-container .ui-button:focus .ui-icon,
.radio-element-container .ui-state-hover .ui-icon,
.radio-element-container .ui-state-focus .ui-icon,
.radio-element-container .ui-button:hover .ui-icon,
.radio-element-container .ui-button:focus .ui-icon{
    border: 2px solid #0069b5;
}

.groupHeader,
legend
{
    display: block;
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.8;
    color: #0a0a0a;
    margin-bottom: 0.8rem;
}

.groupLabel {
    margin-top: 1rem;
    padding: 3px;
}

.requiredClass::after
{
    content:' ';
    color: red;
    font-size: 1rem;
    margin-top: -1rem;
}

.checkboxGroup
{
    margin-bottom: 1.8rem;
    display: flow-root;
}

.checkRadioBox
{
    display: inline;
    width: auto;
    margin-right: 0.5rem;
}

.checkRadioLabel
{
    display: inline;
    width: auto;
    margin-right: 0.5rem;
}

/* hidden field */
.hidden {
    display: none;
}
/* disabled field */

.disabled-field
{
    background-color: #e5e5e5;
}

/* form text hightlites for p tag */

.ptagRedHighlite p
{
    color: red;
}

/* refresh */

.refresh
{
    display: block;
    margin: 0;
    padding: 0;
    line-height: 0;
    position: absolute;
    right:8px;
    display: block;
    top: 18px;
    text-decoration: none !important;
}

.refresh.textarea
{
    top:12px;
}

.refresh::before
{
    content: '\f057';
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-size: 16px;
    line-height: 16px;
    color: #BCBCBC;
    height: 15px;
    width: 15px;
}

/* error messages */

.error-message-wrapper
{
    border: 1px solid #d2280a;
}

.errorMsg
{
    display: block;
    padding: 0;
    margin: 0;
    min-height: 1.4rem;
}
.error, .error p
{
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 14px;
    color: #d2280a;
    padding: 6px 0 0 8px;
    float: none;
}

/*** form buttons ***/
input[type="submit"]
{
    background-color: #003046;
    margin-left: 0;
    margin-right: 0;
}

.submit-button {
    padding-left: 4px;
}

.column.submit-button {
    padding-left: 1.2rem !important;
}

/* form recaptcha css */
.grecaptcha-badge
{
  z-index: 1000;
}
/* hide date field placeholder */

.text-element-container.date-field
{
    padding: 0 15px 0 8px;
    color: #9FA1A4;
}
.covidQuestion .ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon,
#fsForm3842266 .ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
#fsForm3842266 .ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon
{
	width: 25px;
	height: 25px;
}

.covidQuestion .checkbox-element-container .ui-checkboxradio-label .ui-icon-background,
#fsForm3842266 .checkbox-element-container .ui-checkboxradio-label .ui-icon-background,
.formRadio.ui-checkboxradio-label .ui-icon-background
{
    border-radius: 50% !important;
}

.formRadio

.covidQuestion .checkbox-element-container .ui-checkboxradio-label
{
    color: #000;
}

.covidQuestion .checkbox-element-container .ui-state-active .ui-icon::after,
.covidQuestion .checkbox-element-container .ui-button:active .ui-icon::after,
#fsForm3842266 .checkbox-element-container .ui-state-active .ui-icon::after,
#fsForm3842266 .checkbox-element-container .ui-button:active .ui-icon::after {
    background-image: none;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 3.5px;
    top: 3px;
    font-family: "Font Awesome 6 Pro";
    content: '\f111';
    font-weight: 800;
    font-size: 14px;
    text-indent: 0;
    color: #0069b5;
}

#multipleLocationStatusTarget .column:last-child:not(:first-child),
#multipleLocationStatusTarget .columns:last-child:not(:first-child){
    float: left;
}
#multipleLocationStatusTarget .location:nth-of-type(3n+4) {
    clear: both;
}
#multipleLocationStatusTarget .ui-selectmenu-text {
    color: #9FA1A4;
}
#multipleLocationStatusTarget [role=combobox][aria-disabled='false'] .ui-selectmenu-text {
    color: #000000;
}

/* form section CSS */

.flex-section .formSectionFields
{
    display: flex;
    flex-direction: row;
}

.form-section
{
    float: left;
}

/* Mobile clinic form styling (remove from this stylesheet and put in vspvision.css when moving to DEV */

.step-heading {
  border-bottom: 1px solid #000;
  margin-bottom: 4rem;
}

.step-heading h1 {
  /* background-color: #A1AEB7; */
  background-image: url("/dam/jcr:f71894be-a862-414e-836c-ed0d2fbf7b46/sub-page-header-bar.jpg");
  padding-top: 2rem;
  padding-bottom: 2rem;
  color: #fff !important;
}

.step-heading p {
 padding: 2rem 7rem;
}

input[name^="previous-button"] {
  float: left;
}

input[name^="next-button"] {
  float: right;
}

.multi-page-form button[type="button"] {
  margin-left: 0;
  margin-right: 0;
}

.centerSectionFields > div {
  margin-left: auto;
  margin-right: auto;
}

/* These are for counter component */
form .counter-group label,
form .counter-group textarea,
form .counter-group select,
form .counter-group span {
    font-weight: 800;
}

.counterTotal {
    height: 1px;
    width: 1px;
    border: 0px;
    display: block;
    box-shadow: none;
    display: inline;
    margin: 0;
    padding: 0;
}

 .plus:focus, .minus:focus, .counterTotal:focus{
    outline: none;
    outline-style: none;
    box-shadow: none;
    border-color: transparent;
}

.counter-group label {
    color: var(--text-color);
    transform: none;
    transition: none;
    display: inline-block;
    position: relative;
    margin-bottom: 0px;
    text-transform: none;
    width: 50%;
    margin-right: 5%;
}

.large-12 .counter-group label {
    width: 71%;
}

.counter-group .ui-button {
    padding: 2px 0px;
    /* display: inline-block; */
}

.plus, .minus {
    width: 30px;
    border-radius: 4px;
}

.fs-form button.minus {
    background: #ddd;
    border: 1px solid #ddd;
    color: #fff;
    font-weight: 700;
}

.fs-form button.plus {
    background: var(--primary-color) ;
    border: 1px solid var(--primary-color) ;
    color: #fff;
    font-weight: 700;
}

.counter-group .ui-state-default,
.counter-group .ui-button {
    text-align: center;
}

form .counterItemWrap span.ui-button-text {
  color: #fff !important;
  font-weight: bold;
}

.counterItemWrap .ui-spinner a.ui-spinner-button {
    display: none;
}

.counterItemWrap .ui-widget.ui-widget-content {
    border: none;
}

.counterItemWrap input {
    display: inline-block;
    float: none;
    height: auto;
    text-align: center;
    border: 0px;
    background: #fff;
}

.ui-spinner {
    vertical-align: top;
    display: inline-block;
}

.spinner {
    width: 40px;
    margin: 0 16px;
}

.counter-group hr {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100%;
}

.remainingCount {
    float: right;
}
/* Styles for number input field*/

/* Chrome, Safari, Edge, Opera */
.numberField ::-webkit-outer-spin-button,
.numberField input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.numberField input[type=number] {
  -moz-appearance: textfield;
}

.numberField .ui-widget.ui-widget-content {
    border: none;
    background-color: transparent;
}
.numberField .ui-spinner {
    width: 100%;
}
.numberField .text-element-container {
    padding: 0 0 0 8px;
}
.numberField .text-element-container label .active{
    transform: translate(0, 4px) scale(.60);
}

.numberField .ui-button {
    background: #fff;
    border-radius: 0px;
}
.numberField .ui-button:hover {
    background: #cccccc;
    border-radius: 0px;
}

.formstack-form form {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    float: none;
}

.formstack-form form:not(.column) {
  flex-direction: row;
  flex-wrap: wrap;
}

.formstack-form form:not(.column) .element-outline-container {
    min-width: 100%;
}

.formstack-form form:not(.column) .form-element-container {
    display: flex;
    flex-wrap: wrap;
    align-self: flex-start;
}

.formstack-form form:not(.column) .form-text *:not(.mgnlEditor) *,
.formstack-form form:not(.column) .form-text *:not(.mgnlEditor) div {
    flex-grow: 1;
}

.formstack-form form:not(.column) .checkboxGroup {
    margin-bottom: 0;
}

.formstack-form form:not(.column) .checkboxGroup .groupLabel,
.formstack-form form:not(.column) .checkboxGroup .groupHeader {
    margin-top: 0;
    margin-bottom: 0;
}

.formstack-form form:not(.column) .checkboxGroup label {
    padding-top: 0;
}

/*FIX for Inner section followed by Input PRH field (inner section within inner section)*/
.text-element-container, .select-element-container  {
    display: flex;
  }

.formSectionLabel {
    padding: unset;
}

/*--- SMALL only ------------------------- */
@media screen and (max-width: 39.9375em) {
    .large-12 .counter-group label {
        width: 50%;
    }
}

/*--- MEDIUM only ------------------------- */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
    .medium-12 .counter-group label {
        width: 50%;
    }

    .medium-18 .counter-group label {
        width: 65%;
    }

    .medium-24 .counter-group label {
        width: 73%;
    }
}

/*--- Large and up ------------------------- */
@media screen and (min-width: 64em) {
    .large-24 .counter-group label {
        width: 83%;
    }
    .large-18 .counter-group label {
        width: 80%;
    }
}

/* iPad Pro */
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px)
and (-webkit-min-device-pixel-ratio: 2) {
    .counter-group label {
        width: 78%;
    }
}

/* [end] counter styles */


/* Styling for Doctor/Optician Forms (test and live) */
#fsForm4812312 .checkboxGroup,
#fsForm1849843 .checkboxGroup {
  margin-top: 1.25rem;
  margin-bottom: 0.25rem;
}

#fsForm4812312 .form-text h3,
#fsForm1849843 .form-text h3 {
  border-bottom: 2px solid #ccc;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

#fsForm4812312 .form-text h4,
#fsForm1849843 .form-text h4 {
  border-bottom: 1px dashed #ccc;
  padding-bottom: 1rem;
  padding-top: 1rem;
  margin-bottom: 1rem;
}

#fsForm4812312 .disabledGrey,
#fsForm1849843 .disabledGrey {
  background-color: #efefef;
}

#fsForm4812312 .pdfobject-container,
#fsForm1849843 .pdfobject-container {
  text-align: center;
}

#fsForm4812312 .pdfobject,
#fsForm1849843 .pdfobject {
  margin: 0 2rem 2rem 0;
  padding: 1rem;
  border: 2px solid #ccc;
}

#fsForm4812312 .pdfLabel,
#fsForm1849843 .pdfLabel {
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
}

/*----------------------------------------------------------------------------
  Foundation Media Queries
   https://foundation.zurb.com/sites/docs/media-queries.html
-----------------------------------------------------------------------------*/

/********************** Small only *************************/
@media screen and (max-width: 39.9375em) {


  /* formstack multi-page form styling  */

  .step-heading p {
    padding: 2rem 1rem;
  }

  .formSectionFields > div.step-heading {
    padding-left: 0;
    padding-right: 0;
  }

  .step-heading h1 {
    padding-right: 1rem;
    padding-left: 1rem;
  }

}

/********************** Medium and up *************************/
@media screen and (min-width: 40em)  {



}

/********************** Medium only *************************/
@media screen and (min-width: 40em) and  (max-width: 64.1em) {

  .footerLinkContainer {
  }

}
/********************** Large and up *************************/
@media screen and (min-width: 64em) {

}

/********************** Large only *************************/
@media screen and (min-width: 64em) and (max-width: 74.9375em) {

}

/********************** iPad Both Orientations *************************/
@media only screen and (min-device-width: 768px)
and (max-device-width: 1024px) {

  .step-heading p {
   padding: 2rem 1rem;
  }

}

/********************** iPad Landscape Only *************************/
@media only screen and (min-device-width: 768px)
and (max-device-width: 1024px) and (orientation: landscape) {

}