/**
 * All of the CSS for your public-facing functionality
 */



 /* for the appearance of the pain test options form  */
 .painForm .e-form__indicators__indicator__progress {
    background-color: #ffffff;
    border-radius: 1em;
    height: 1em;
}

 .painForm span.elementor-field-option {
    padding: 1em;
    background-color: #ffffff;
    border-radius: 0.2em;
    margin-bottom: 0.6em;
    font-weight:700;
}

.painForm .elementor-widget-container .elementor-form .elementor-field-type-step label.elementor-field-label {
    color: #ffffff !important;
    font-size: 1.4em;
    font-weight: 600;
}

.painForm .e-form__indicators__indicator__progress__meter {
    background-image: linear-gradient(90deg, #6886e6, #56dcae, #60d1f7, #ffffff);
    font-size: 10px;
}

.painForm button.elementor-button.e-form__buttons__wrapper__button.e-form__buttons__wrapper__button-previous {
    margin-right: 8px;
}
/* ^ for the appearance of the pain test options form ^ */



/* for any box that has a hover with coloring overlay and text and button animation for example the insurance page and conditions boxes in conditions we treat */
.noInsuranceText{
    left: 50%;
    transform: translate(-50%, 0);
}


.colorOverlayBox:hover .noInsuranceText{
    
    transform:translate(-50%,-100px);
}

.noInsuranceBtn{
    
    opacity:0;
    transition: visibility 0s, opacity 0.5s linear;
}

.noInsuranceOverlay{
    transition: all 0s, opacity 0.5s linear;
}

.colorOverlayBox:hover .noInsuranceBtn{
    
    display:visible;
    opacity:1;
}
/* ^ for any box that has a hover with coloring overlay and text and button animation ^ */



/* for the resource links that are considered one word and need to wrap for mobile and tablet */
.resourceLinksWrap{
    word-wrap: break-word;
}
/* ^ for the resource links that are considered one word and need to wrap for mobile and tablet ^ */


/* for any table contained in the resources page that need to have borders  */
.tableWithBorders table,.tableWithBorders th,.tableWithBorders td {
    border: 1px solid black;
  }
/* ^ for any table contained in the resources page that need to have borders ^ */



/* for the list bullets that need to be a rounded primary color square  */
.betterHealthAlaskaBullet li {
    list-style-image: url(https://dev.betterhealthalaska.com/wp-content/uploads/2024/04/better-health-alaska-bullet.webp);
}

.tickListText li {
    list-style-image: url(https://dev.betterhealthalaska.com/wp-content/uploads/2024/04/tick-svgrepo-com-e1714130707166.png);
}
/* ^ for the list bullets that need to be a rounded primary color square ^  */


/* bigger checkboxes for the sidebar forms for better SEO in mobile */
@media only screen and (max-width: 600px) {

    .darkBlueNewsletterForm input[type=checkbox],.lightBlueNewsletterForm input[type=checkbox] {
        transform: scale(1.8);
        margin: 1em 1em 1em 0.5em;
    }
}
/* ^ bigger checkboxes for the sidebar forms for better SEO in mobile ^ */


/* the achievements section needs no-wrap for mobile for height consistency in the rows  */
@media only screen and (max-width: 600px) {

    .fbAchievementNoWrap h4{
        white-space:nowrap;
    }

    .fbPageSlider p.elementor-slide-heading {
        font-size: 0.9em !important;
    }

}
/* ^ the achievements section needs no-wrap for mobile for height consistency in the rows ^ */


/* making the arrows of the popup menu be displayed in the other side of the screen and not next to the links  */
.popupMenuToggle div nav ul li a {
    justify-content: space-between;
}

.popupMenuToggle .highlighted svg {
    transform: rotate(180deg);
    transition: all 0.5s ease-in-out;
}
/* ^ making the arrows of the popup menu be displayed in the other side of the screen and not next to the links ^ */


/* in the post-like content in the anchorage children pages, some of them needed bigger font-size in the h2 headings of the content  */
/* the class is located in the outer container (main container) in the elementor editor  */
.anchorageChild div div div h2 {
    font-size: 2em;
}
/* ^in the post-like content in the anchorage children pages, some of them needed bigger font-size in the h2 headings of the content ^ */

/* in the blog post content, the h2 paragraphs line hight change  */
.postContent h2 {
    line-height: 1.4em;
}
/* ^ in the blog post content, the h2 paragraphs line hight change ^ */

/* hiding the reCAPTCHA badge from the bottom left corner in all the pages */
.elementor-field-type-recaptcha_v3 .grecaptcha-badge {
    visibility: hidden;
}
/* ^ hiding the reCAPTCHA badge from the bottom left corner in all the pages ^ */


/* changes for the firing of triggers in google tag manager */

/* blue mini form  */
button#gform_submit_button_7::before {
    content: 'Submit';
}
#gform_submit_button_7 span.elementor-button-text {
    display: none;
}

/* green mini form  */
button#gform_submit_button_8::before {
    content: 'Schedule an appointment';
}
#gform_submit_button_8 span.elementor-button-text {
    display: none;
}

/* check my insurance form  */
button#gform_submit_button_3::before {
    content: 'Submit';
}
#gform_submit_button_3 span.elementor-button-text {
    display: none;
}

/* request an appointment */
button#gform_submit_button_1::before {
    content: 'Request Appointment';
}
#gform_submit_button_1 span.elementor-button-text {
    display: none;
}

/* FB pages light green mini forms */
button#gform_submit_button_46::before {
    content: 'SCHEDULE AN APPOINTMENT';
}
#gform_submit_button_46 span.elementor-button-text {
    display: none;
}

/* ^ changes for the firing of triggers in google tag manager ^ */

/* used to make blue the links in the localized conditions pages, in the first section  */
.blueTextLink a{
	color:#1676D8;
}
/* ^ used to make blue the links in the localized conditions pages, in the first section  ^*/

/* making the h3 headings in desired size automatically, this class is also used in team member page  */
.conditionsText h3{
    font-size:1.313rem;
}
/* ^ making the h3 headings in desired size automatically, this class is also used in team member page  */

/* for the time schedule in the footer area, to give symmetry in mobile view  */
@media only screen and (max-width: 600px) {
	.footerAptoTable{
		margin:auto;
	}
}
/* ^ for the time schedule in the footer area, to give symmetry in mobile view  */

/* for the footer links to undo the font weight they inherit and cannot be changed through elementor */

.footerBoldFix p a {
    font-weight: 400;
}

/* used to make blue the links in the localized conditions pages, in the first section  */
.blueTextLink p a{
	color:#1676D8;
}
/* ^ used to make blue the links in the localized conditions pages, in the first section  ^*/

/* for the time schedule in the footer area, to give symmetry in mobile view  */
@media only screen and (max-width: 600px) {
	.footerAptoTable{
		margin:auto;
	}
}
/* ^ for the time schedule in the footer area, to give symmetry in mobile view  */