/* Current Brand Colors: 
   -------------
    - #2364aa (blue), #3da5d9 (light blue), #73bfb8 (green), #fb8500 (orange), #fec601 (yellow), #c9c9c9 (grey)
    - REDESIGN #093067 (dark blue), #3664a6 (med-dark blue/h2) #1a92b6 (medium blue/btn), #dbf7ff (light blue/h3), #eff9fc very light blue/grey, #ff8300 (orange/h1 alt/accent)
*/

/***************************** STYLE VARIABLES *****************************/
:root {

    /* ----- Bootstrap styles available in :root by default ----- */

    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #aeaeae;
    --bs-gray-dark: #343a40;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-body-color: #5F5E60;
    --bs-link-color: #3D3088;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));

    --bs-dropdown-item-border-radius: 10px;

    /* ----- KDB style variables ----- */

    --banner-background-color1: #093067;
    --banner-text-color1: #ffffff;
    --banner-background-color2: #73bfb8;
    --banner-text-color2: #ffffff;
    --banner-background-color3: #DD5D26;
    --banner-text-color3: #ffffff;
    --banner-background-color4: #F9F9E1;
    --banner-text-color4: #3D3088;
    --bottom-border-color1: #2364aa; /* Usually used as a wide bottom border for images */
    --bottom-border-color2: #73bfb8; /* Usually used as a wide bottom border for images */
    --bottom-border-color3: #fb8500; /* Usually used as a wide bottom border for images */
    --bottom-border-color4: #c9c9c9; /* Usually used as a wide bottom border for images */
    --button-color: #7CC244;
    --button-hover-color: #639C36;
    --button-secondary-color: #ffffff;
    --card-background-color1: #3D3088;
    --card-h1-color1: #ffffff;
    --card-btn-color1: #7CC244;
    --card-background-color2: #2364aa;
    --card-btn-color2: #1a92b6;
    --card-h1-color2: #ffffff;
    --card-background-color3: #F9F9E1;
    --card-btn-color3: #1a92b6;
    --card-h1-color3: #ffffff;
    --card-h3-color3: #093067;
    --footer-background-color: #3D3088;
    --footer-link-color: #ffffff;
    --footer-link-hover-color: #DD5D26;
    --footer-link-hover-underline-color: #DD5D26;
    --h1-default-color: #3D3088;
    --h1-alt-color: #7CC244;
    --h2-default-color: #7CC244;
    --h2-alt-color: #DD5D26;
    --h3-default-color: #3D3088;
    --h4-default-color: #3D3088;
    --h6-default-color: #3D3088;
    --highlighted-review-header-text-color: #2364aa;
    --highlighted-review-star-rating-color: #ffdc12;
    --highlighted-review-text-color: #363636;
    --highlighted-review-top-icon-color: #2364aa;
    --highlighted-text-color: #7CC244;
    --meet-the-team-fun-fact-icon-color: #7CC244;
    --meet-the-team-image-border-color: #3D3088;
    --meet-the-team-modal-name-color: #3D3088;
    --mobile-footer-social-icon-color: #ffffff;
    --mobile-footer-social-icon-hover-color: #3664a6;
    --mobile-footer-top-border-color: #3D3088;
    --modal-popup-close-icon-color: #73bfb8;
    --navbar-background-color: #ffffff !important;
    --navbar-dropdown-hover-color: #7CC244;
    --navbar-dropdown-item-color: #DD5D26;
    --rz-listbox-border: 0px !important;
    --social-icon-color: #3D3088;
    --social-icon-hover-color: #DD5D26;
    --promo-ribbon-background-color: #3D3088;
    --search-button-background-color: #dddddd;
    --swiper-theme-color: #7CC244;
}

/**************************** BOOTSTRAP CLASS STYLE OVERRIDES **************************/

.navbar {
    --bs-navbar-active-color: #3D3088;
}


/***************************** BODY AND LAYOUT STYLES *****************************/
html, body {
    font-family: 'poppins', sans-serif !important;
    font-size: 1.0rem;
/*    font-weight: 300 !important;
*/}

.h1-default-color {
    color: var(--h1-default-color);
}

.h1-alt-color {
    color: var(--h1-alt-color); 
}

.h2-alt-color {
    color: var(--h2-alt-color) !important;
    /*font-size: 48px;*/
    /*font-family: "poppins", sans-serif !important;*/
    /*font-weight: 600;*/
    /*word-wrap: break-word*/
}

.h3-alt-color {
    color: var(--h2-alt-color) !important;
    /*font-size: 32px;*/
    /*font-family: "poppins", sans-serif !important;*/
    /*font-weight: 600;*/
    /*word-wrap: break-word*/
}

.body-container {
    padding: 0px 0px 0px 0px;
}

.container-fluid.full-width {
    padding-left: 0;
    padding-right: 0;
}

.main-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: clip;
}

.modal-body i, em {
    color: var(--modal-popup-close-icon-color);
    font-size: 1.75rem;
    padding-right: 10px;
}

.component h1 {
    color: var(--h1-default-color) !important;
    font-family: 'poppins', sans-serif !important;
    font-size: 2.5rem !important;
    font-weight: 500 !important;
    letter-spacing: -2px !important;
}

.component h2 {
    color: var(--h1-default-color) !important;
    font-family: 'poppins', sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 300 !important;
    letter-spacing: -2px !important;
}

.component .row {
    justify-content: flex-start;
}

@media only screen and (max-width: 768px) {
    .component .row {
        justify-content: center;
    }
}

/***************************** HEADER AND FOOTER STYLES *****************************/
.contact-info {
    color: var(--h1-default-color) !important;
    text-decoration: none;
}

 /*Mainly used to override header default colors*/
.default-text-color {
    color: var(--bs-body-color); !important;
}

.dropdown-item.active, .dropdown-item:active {
    /*background-color: var(--navbar-dropdown-item-color) !important;*/
    /*color: #ffffff !important;*/
}

.dropdown-item {
    --bs-dropdown-link-color: var(--navbar-dropdown-item-color); 
    --bs-dropdown-link-hover-color: var(--navbar-dropdown-item-color);
    /*--bs-dropdown-link-active-bg: var(--bs-body-color);*/
}

.dropdown-item:hover {
    background-image: linear-gradient(rgb(0 0 0/15%), rgb(0 0 0/15%));
}

/*@media (min-width: 576px ) {*/
/*    .dropdown:hover > .dropdown-menu {*/
/*        display: block;*/
/*        margin-top:0;*/
/*    }*/
/*}*/

.dropdown-toggle {
    border-radius: 10px;
}

/*.dropdown-toggle:hover {*/
/*    background-image: linear-gradient(rgb(0 0 0/15%) 0 0);*/
/*    color: var(--h1-alt-color);*/
/*}*/

.dropdown-menu {
    --bs-dropdown-link-active-bg: #ffffff;
    --bs-dropdown-link-active-color: var(--navbar-dropdown-item-color);
}

.dropdown-menu li {
    position: relative;
}

.dropdown-menu .dropdown-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -7px;
}

.dropdown-menu .dropdown-submenu-left {
    right: 100%;
    left: auto;
}

.dropdown-menu > li:hover > .dropdown-submenu {
    display: block;
}

.slide-panel { 
    width: 500px;
}

.avatar-top {
    width: 100%; border-radius: .5rem; 
}

.header-appt-button {
    font-size: 1rem;
}

.ortho-nav {
    background-color: var(--navbar-background-color) !important;
}

    .ortho-nav .nav-item a {
        color: var(--h1-default-color);
        font-family: 'poppins', sans-serif;
        font-size: 1.1rem;
        text-transform: none;
        letter-spacing: 0.5px;
    }

    .ortho-nav .dropdown-menu a {
        background-color: #ffffff !important;
        color: var(--h2-alt-color) !important;
        font-family: 'poppins', sans-serif;
        font-size: 1.0rem;
        text-transform: none;
        letter-spacing: 0.5px;
    }

.dropdown-toggle:hover {
    color: var(--social-icon-hover-color) !important;
}

.site-footer-mobile {
    background-color: #ffffff;
    border-top: 6px solid var(--mobile-footer-top-border-color);
    bottom: 0;
    left: 0;
    padding: 10px 0px;
    position: fixed;
    text-align: center;
    width: 100%;
    z-index: 99;
}

.site-footer-desktop {
    margin-top: auto; /* Keep the footer at the bottom if there is not enough content to fill the page */
    background-color: var(--footer-background-color);
}

.site-footer-text-desktop {
    color: var(--footer-link-color);
    font-family: 'Poppins', sans-serif;
    font-size: 1.15rem;
    text-decoration: none;
}

.site-footer-text-desktop:hover {
    color: var(--footer-link-hover-color);
    text-decoration: underline;
    text-decoration-color: var(--footer-link-hover-underline-color);
}

.social-icon-caret {
    color: var(--social-icon-color) !important;
}

.social-icon-caret:hover {
    color: var(--social-icon-hover-color) !important;
}

/***************************** MAIN CONTENT STYLES *****************************/
/*a {*/
/*    text-decoration: none !important;*/
/*}*/

/* Works for normal accordions */
.accordion .accordion-button,
.accordion .accordion-button.collapsed{
    font-size: 1.25rem;
    border-radius: 6px;
}

/* Needed only when the accordion has .accordion-flush because Bootstrap’s flush variant forces radius back to 0 */
.accordion.accordion-flush > .accordion-item > .accordion-header > .accordion-button,
.accordion.accordion-flush > .accordion-item > .accordion-header > .accordion-button.collapsed{
    border-radius: 6px;
}

.rz-selectbutton .rz-button.rz-button-lg.rz-state-active {
    background-color: #73bfb8 !important;
    border-color: #73bfb8 !important;
    
}

.articles-style h2 {
    font-size: 2.0rem !important;
}
.articles-style h3 {
    font-size: 1.5rem !important;
}
.articles-style h4 {
    font-size: 1.25rem !important;
}

p a {
    color: var(--bs-link-color);
}

p a:hover {
    color: var(--footer-link-hover-color);
}

section {
    padding-top: 48px;
    padding-bottom: 48px;
}


/***************************** BANNER COLOR 1 FOR PROMO PAGES *****************************/

.banner-color1 {
    background-color: var(--banner-background-color1);
    padding: 40px 0px;
}

    .banner-color1 h1 {
        color: #dbf7ff !important;
        font-size: 3.5rem !important;
        font-weight: bold !important;
    }
    .banner-color1 h2 {
        color: #ffffff !important;
        font-size: 2rem !important;
        font-weight: normal !important;
    }
    .banner-color1 h3 {
        color: #ff8300 !important;
        font-size: 2rem !important;
        font-weight: 400 !important;
    }
    .banner-color1 h5 {
        color: #ffffff !important;
        font-size:1.5rem !important;
        font-weight: 400 !important;
    }
    .banner-color1 h6 {
        color: #ffffff !important;
        font-size: 1.25rem !important;
        font-weight: 400 !important;
    }

    .banner-color1 .rz-label {
        color: #ffffff !important;
    }
    .banner-color1 #recaptchaDiv {
        margin-top: 20px;
        margin-bottom: 20px;
        text-align: center;
    }
    .banner-color1 p {
        color: #ffffff !important;
    }
    
    .promo-ribbon {
        background-color: var(--promo-ribbon-background-color);
    }

/***************************** BANNER COLOR 2 FOR home page "Ready to Learn More" section *****************************/


.banner-color2 {
    background-color: var(--banner-background-color1);
    padding: 40px 0px 0px 0px;
}

    .banner-color2 h1 {
        color: #ffffff !important;
        font-size: 3.5rem !important;
        font-weight: normal !important;
    }

    .banner-color2 h2 {
        color: #ffffff !important;
        font-size: 3.0rem !important;
        font-weight: 700 !important;
        padding-top: 20px;
        padding-bottom: 20px
    }

    .banner-color2 h3 {
        color: #dbf7ff !important;
        font-size: 1.5rem !important;
        font-weight: 700 !important;
    }

    .banner-color2 p {
        color: var(--banner-text-color3) !important;
        font-size: 1rem !important;
        font-weight: normal !important;
    }

    .banner-color2 p a {
        color: #093067 !important;
    }



/*    WM - using banner color 3 for light blue background, middle sections
*/
.background-orange {
    background-color: var(--banner-background-color3);
}
    .background-orange h1 {
        /*color: var(--banner-text-color3) !important;*/
        /*font-size: 3.5rem !important;*/
        font-weight: 700 !important;
    }

    .background-orange h2 {
        /*color: var(--banner-text-color3) !important;*/
        /*font-size: 3.0rem !important;*/
        font-weight: 700 !important;
        position: static;
    }

    /*.background-orange p {*/
    /*    color: var(--banner-text-color3) !important;*/
    /*    font-size: 1rem !important;*/
    /*    font-weight: normal !important;*/
    /*}*/
    /*.background-orange p a {*/
    /*    color: #093067 !important;*/
    /*}*/


/*    WM - using banner color 4 for light tan background, home page HEADER section
*/
.banner-color4 {
    background-color: var(--banner-background-color4);
}

    .heading {
        color: var(--banner-text-color4) !important;
        font-family: 'poppins', sans-serif !important;
        /*font-size: 3.5rem !important;*/
        font-weight: 700 !important;
        padding-bottom: 10px;
    }
    
    .subheading {
        /*font-size: 1.5rem !important;*/
        font-family: 'poppins', sans-serif !important;
        font-weight: 700 !important;
        padding-bottom: 10px;
    }
    
    .hero-heading {
        color: var(--h1-default-color) !important;
        font-family: 'poppins', sans-serif !important;
        font-size: 4.5rem !important;
        letter-spacing: -4px !important;
        text-transform: none !important;
        line-height: 1.0 !important;
        padding-top: 20px;
        padding-bottom: 20px;
    }


/*    WM - using banner color 5 for white background, bottom FLUSH to next section, Home Page INTRO section
*/


.banner-color5 {
    background-color: #ffffff !important;
    padding: 40px 0px 0px 0px;
}

    .banner-color5 p {
        font-size: 1rem !important;
        font-weight: normal !important;
    }


/*    WM - using banner color 6 for white background MAIN CONTENT SECTIONS on MOST PAGES, bottom padding to next section
*/

.banner-color6 {
    background-color: #ffffff !important;
}
    .banner-color6 i {
        color: #ffffff !important;
    }

    .banner-color6 h6 {
        color: #093067 !important;
        font-weight: 700 !important;
    }

/*    WM - using banner color 7 for very light blue background, hours and directions on office page, Our Staff on MTT page
*/

.banner-color7 {
    background-color: #ffffff !important;
    padding: 40px 0px 40px 0px;
}

    .banner-color7 p {
        font-size: 1rem !important;
        font-weight: normal !important;
    }
    .banner-color7 h4 {
        font-size: 1.25rem !important;
        color: var(--h1-default-color) !important;
    }
    
    .banner-color7 accordion-button {
        background-color: #eff9fc !important;
    }



/*    WM - using banner color 8 for light blue background, internal page HEADER sections
*/
.page-header {
    background-color: white;

    /* top | right | bottom | left */
    /*padding: 2% 0% 3% 0%;*/
}

    .page-header h1 {
        color: var(--h1-default-color) !important;
        font-family: 'poppins', sans-serif !important;
        font-size: 3.5rem !important;
        font-weight: 600 !important;
        letter-spacing: -2px !important;
        text-transform: none !important;
        line-height: 1.2 !important;
    }

.page-header-flush {
    background-color: var(--banner-background-color4);
    padding: 0% 0% 3% 0%;
}

    .page-header-flush h1 {
        color: var(--h1-default-color) !important;
        font-family: 'poppins', sans-serif !important;
        font-size: 3.5rem !important;
        font-weight: 600 !important;
        letter-spacing: -2px !important;
        text-transform: none !important;
        line-height: 1.2 !important;
    }


/*    WM - using banner color 9 for white background, internal page FAQ sections
*/
.banner-color9 {
    background-color: #ffffff !important;
}

    .banner-color9 p {
        font-size: 1rem !important;
        font-weight: normal !important;
    }

/*    WM - using banner color 10 for medium blue background, reusable "Your Journey..."/"Career Opportunities" banner
*/

.banner-color10 {
    background-color: var(--banner-background-color4) !important;
    padding: 40px 0px 40px 0px;
}
    .banner-color10 h2 {
        color: var(--h1-default-color) !important;
    }
    .banner-color10 h4 {
        color: var(--h2-alt-color) !important;
    }
    .banner-color10 p {
        font-size: 1rem !important;
        font-weight: normal !important;
    }

    .banner-color10 accordion-button {
        background-color: #ffffff !important;
    }

.border-color1 {
    border-color: #ff8300 !important;
    border-style: solid none solid none !important;
    border-width: 4px !important;
}
.border-color2 {
    border-color: #ff8300 !important;
    border-style: solid solid solid solid !important;
    border-width: 6px !important;
    padding: 10px 10px 40px 10px;
}

.breadcrumb {
    font-size: 0.85rem !important;
}
    .breadcrumb a {
        color: #093067 !important;
    }

.btn {
    font-family: 'Poppins', sans-serif;
    vertical-align: middle !important;
    letter-spacing: 1px;
    border-radius: 5rem;
}

/* Override Bootstrap .btn-primary */
/*.navbar-brand's color property will override the button color without !important*/
.btn-primary {
    --bs-btn-color: #fff;
    color: var(--bs-btn-color) !important;
    --bs-btn-bg: var(--button-color);
    --bs-btn-border-color: var(--button-color);

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--button-color) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--button-color) 85%, black);

    --bs-btn-focus-shadow-rgb: 49, 132, 253;

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--button-color) 75%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--button-color) 75%, black);

    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--button-color);
    --bs-btn-disabled-border-color: var(--button-color);
}

/*.btn {*/
/*    background-color: var(--button-color);*/
/*    color: #ffffff !important;*/
/*    font-family: 'poppins', sans-serif;*/
/*    !*font-size: 1.15rem;*!*/
/*    !*text-transform: uppercase;*!*/
/*    vertical-align: middle !important;*/
/*    letter-spacing: 1px;*/
/*    border-radius:  5rem;*/
/*    border: none;*/
/*}*/
     /*Generic darken for all buttons when they are hovered */
    /*.btn:hover {*/
    /*    background-image: linear-gradient(rgb(0 0 0/15%), rgb(0 0 0/15%));*/
    /*}*/

.btn:hover {
    background-color: var(--button-hover-color);
}

.btn-lg {
    padding: 0.75rem 2rem !important;
}

.btn-md {
    font-size: 16px;
    padding: 8px 24px;
}

.btn-secondary {
    background-color: var(--button-secondary-color);
    color: var(--button-color);
    /*text-transform: uppercase;*/
    border: none;
}

    .btn-secondary:hover {
        background-color: var(--button-color) !important;
        background-image: linear-gradient(var(--button-color), var(--button-color)) !important;
        color: white !important;
        
    }

.btn-link {
    color: var(--bs-link-color);
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
    border: none;
    background-color: transparent;
}

.btn-link:hover {
    /*color: white;*/
    color: var(--bs-link-color);
    background-color: #FFFFFF;
    background-image: linear-gradient(rgb(0 0 0/15%), rgb(0 0 0/15%));
    font-weight: bold;
    text-decoration: underline;
    text-decoration-color: var(--bs-link-color);
    cursor: pointer;
}

.faq-card {
    background-color: var(--card-background-color3);
    border: 0;
    border-radius: 2rem;
}

/*################### Articles Slider Section CSS #########################*/

.article-card {
    /*box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;*/
    /*border: 2px inset rgba(0, 0, 0, 0.1);*/
    border: 0;
    border-radius: 2rem;
}

.article-card::after{
    content:"";
    position:absolute;
    inset:0; 
    border-radius:inherit;
    pointer-events:none;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
}

.btn-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid var(--button-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Slider layout */
.post-viewport {
    overflow: hidden;
}

.post-viewport--static { overflow: visible; }

.post-track {
    --post-gap: 3rem;                 /* single source of truth for gap */
    display: flex;
    flex-wrap: nowrap;
    gap: var(--post-gap);
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;    /* keeps cards aligned on manual scroll */
    /*padding-left: 24px;*/
    /* space for shadows so they aren’t clipped at edges */
    /*padding-inline: 14px;*/
    /*margin-inline: calc(var(14px) * -1); !* preserve outer alignment *!*/

}

.post-track::-webkit-scrollbar { display: none; }

.post-track--wrap {
    flex-wrap: wrap;          /* allow wrapping to next line */
    overflow: visible;        /* no horizontal scrolling */
    scroll-snap-type: none;   /* disable snap for this variant */
}

.post-col {
    /* 3-up default */
    flex: 0 0 calc((100% - (var(--post-gap) * 2)) / 3);
    min-width: 0;                     /* prevent content from blowing out width */
    scroll-snap-align: start;
    box-sizing: border-box;
}

/* <= 991.98px: 2-up */
@media (max-width: 991.98px) {
    .post-col { flex: 0 0 calc((100% - var(--post-gap)) / 2); }
}

/* <= 575.98px: 1-up */
@media (max-width: 575.98px) {
    .post-col { flex: 0 0 100%; }
}

/*#####################################################################*/
    
    
.category-tag-green  { background-color:#7CC244 !important; }
.category-tag-orange { background-color:#F3713B !important; }
.category-tag-purple { background-color:#43329F !important; }
.category-tag-gray   { background-color:#6B6B6B !important; }
.category-tag-cyan   { background-color:#66D0D9 !important; }
.category-tag-yellow { background-color:#F5C542 !important; }

.card {
    --bs-card-border-radius: 2rem;
    /*--bs-card-border-color:  transparent; !* we'll need to fix the border corner clipping issue before we can show the outline again*!*/
    --bs-card-color: var(--bs-body-color);
}

.card-header {
    --bs-card-inner-border-radius: 2rem;
}

.card-white {
    background-color: #ffffff;
    text-align: center;
    border-radius: 1rem;
}

.card-color1 {
    background-color: var(--card-background-color1);
    text-align: center;
    border-radius: 2rem;
}

    .card-color1 h1 {
        color: var(--card-h1-color1) !important;
    }

    .card-color1 h3 {
        color: #ffffff !important;
    }

    .card-color1 h5 {
        color: #ffffff !important;
    }

    .card-color1 .btn {
        background-color: var(--card-btn-color1) !important;
        color: #ffffff !important;
    }

    .card-color1 i {
        color: #ffffff;
    }
    
/*   card-color2 NOT IN USE   */

/*    WM - using card color 3 for MAIN light blue card background, 3 card layout on dark blue background
*/

.card-color3 {
    background-color: var(--card-background-color3);
    text-align: center;
    border-radius: 1rem;
    padding-top: 40px !important;
    padding-bottom: 80px !important;
}

.card-header-alt {
    
}
    .card-color3 h1 {
        color: var(--h1-default-color) !important;
    }

    .card-color3 h5 {
        color: var(--h2-default-color) !important;
    }

    .card-color3 .btn {
        background-color: var(--card-btn-color1) !important;
        color: #ffffff !important;
    }

    .card-color3 i {
        color: #fb8500 !important;
    }

    .card-color3 p {
        color: var(--h1-default-color) !important;
    }

    .card-color3 img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        padding-top: 20px;
        padding-bottom: 20px;
    }
/*    WM - using card color 4 for very light blue card background, 3 card layout on white background
*/

.card-color4 {
    background-color: #eff9fc !important;
    text-align: left;
    border-radius: 1rem;
    padding-bottom: 20px !important;
}

    .card-color4 h1 {
        color: var(--h1-default-color) !important;
    }
    .card-color4 h4 {
        color: #1a92b6 !important;
    }
    .card-color4 h5 {
        color: var(--h2-default-color) !important;
    }

    .card-color4 .btn {
        background-color: var(--card-btn-color1) !important;
        color: #ffffff !important;
    }

    .card-color4 i {
        color: #093067 !important;
    }

    .card-color4 p {
        color: var(--h1-default-color) !important;
    }

    .card-color4 img {
        display: block;
        padding-top: 20px;
        padding-bottom: 20px;
    }

.card-color5 {
    background-color: var(--card-background-color3);
    text-align: center;
    border-radius: 1rem;
    padding-top: 40px !important;
    padding-bottom: 80px !important;
    border: 0;
}

    .card-color5 h1 {
        color: var(--h1-default-color) !important;
    }

    .card-color5 h5 {
        color: var(--h2-default-color) !important;
    }

    .card-color5 i {
        color: #093067 !important;
    }

    .card-color5 p {
        color: var(--h1-default-color) !important;
    }

    .card-color5 img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        padding-top: 20px;
        padding-bottom: 20px;
    }

/*    WM - using for Treatment By Age page
*/

.content-overlay-tba {
    border-radius: 25px;
    color: #ffffff;
    font-size: 1.2rem;
}

    .content-overlay-tba h2 {
        color: #ffffff !important;
        font-size: 2.5rem !important;
    }

a.content-box-link:link h2 {
    text-decoration: none !important;
    color: #ffffff !important;
}

a.content-box-link:visited h2 {
    text-decoration: none !important;
    color: #ffffff !important;
}

a.content-box-link:hover h2 {
    text-decoration: underline !important;
    text-decoration-style: wavy !important;
    color: #ffffff !important;
}

a.content-box-link:active h2 {
    text-decoration: underline !important;
    text-decoration-style: wavy !important;
    color: #ffffff !important;
}

/* The p a and p a:hover classes have been updated to display the same effect, 
    the external-link class can primarily be used as an override for <a> tags not nested in paragraphs */
.external-link {
    color: var(--bs-link-color);
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}

.external-link:hover {
    color: var(--social-icon-hover-color);
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}

/* Normally this would go in the reusableComponents Meet the Team styles, but the HTML for this section is being stored in a string and then written out to the page. 
   This means the compiler can't properly manipulate the view to apply the view-specific styles and the CSS isolation won't work properly, so we must put it here. */
.fun-fact-icon {
    color: var(--meet-the-team-fun-fact-icon-color) !important;
    font-size: 1.75rem !important;
    padding-right: 10px !important;
}

h1 {
    color: var(--h1-default-color);
    font-family: 'poppins', sans-serif;
    /*font-size: 3.5rem;*/
    font-weight: 700;
    /*letter-spacing: -2px;*/
}

h2 {
    color: var(--h2-default-color);
    font-family: 'poppins', sans-serif;
    /*font-size: 3.0rem;*/
    font-weight: 700;
}

    h2.externship {
        color: var(--h2-default-color) !important;
        font-family: 'Poppins', sans-serif;
        font-size: 1.25rem !important;
        letter-spacing: -1px;
    }

h3 {
    color: var(--h3-default-color);
    font-family: 'poppins', sans-serif;
    /*font-size: 2.0rem;*/
    font-weight: 700;
}

h4 {
    color: var(--h4-default-color);
    font-family: 'poppins', sans-serif;
    /*font-size: 1.5rem;*/
    font-weight: 700;
}

h5 {
    font-family: 'poppins', sans-serif;
    font-size: 1.5rem;
}

h6 {
    color: var(--h6-default-color);
    font-family: 'poppins', sans-serif;
    font-size: 1.25rem;
}

.highlighted-text {
    text-transform: uppercase;
    color: var(--highlighted-text-color);
    font-weight: bold;
    font-family: 'poppins', sans-serif;
}

.divider-line {
    border-top: 4px solid var(--button-color); !important;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.img-shadow {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/*This should eventually be used for the patient portal login screen, but it doesn't exist in the other site css files, so we hardcoded the style in the PatientPortal.Client/Login.razor file*/
.card-shadow {
    box-shadow: rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
}

img.pill-border {
    border-radius: 2rem;
}

/* remove individual outlines */
.input-group .form-control:focus,
.input-group .btn:focus{
    box-shadow:none;
}

/* 🔸 highlight whole bar when any child is focused */
.input-group:focus-within{
    box-shadow:0 0 0 .25rem rgba(0,123,255,.25); /* Bootstrap-blue ring */
}

/* cosmetics */
.input-group .form-control{border:none;padding-left:20px}
.input-group .btn{border:none;padding:10px 20px}
    
.img-circle {
    /*width: 70vw;           !* Responsive: 70% of viewport width on mobile *!*/
    max-width: 650px;        /* Don't exceed original size on large screens */
    max-height: 650px;       /* Don't exceed original size on large screens */
    aspect-ratio: 1/1;       /* Ensures perfect square */
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover; 
    width: 100%;
    height: 100%;
}


.icon-wrapper {
    position: relative;
    width: 196px;
    height: 196px;
}

.icon-bg {
    position: absolute;
    top:    0;
    left:   0;
    width:  100%;
    height: 100%;
    object-fit: contain;  /* ensures it scales cleanly */
    z-index: 0;
}

.icon-fg {
    position: absolute;
    top:    50%;
    left:   50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    color: #fff;        /* or whatever foreground color */
}


.responsive-youtube {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
    border-color: #ff8300;
}

    .responsive-youtube iframe {
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        position: absolute;
    }

.social-icon-inherit {
    color: inherit !important;
    font-size: 2.0rem;
}

.social-icon {
    color: var(--social-icon-color);
    font-size: 2.0rem;
}

.social-icon:hover {
    color: var(--social-icon-hover-color);
}

.social-icon2 {
    color: #ffffff !important;
    font-size: 2.0rem;
}

.social-icon2:hover {
    color: #3664a6 !important;
}

.search-bar {
    max-width: 500px;
    margin: auto auto;
}

.search-bar .input-group {
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.search-bar .form-control {
    border: none;
    padding-left: 20px;
}

.search-bar .btn {
    border: none;
    border-radius: 0 !important;
    padding: 10px 20px;
}
    
/* For CustomerReviewCarousel (SwiperJS) pagination-bullet edits wont work from inside CustomerReviewsCarousel.razor.css */
.swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    /*background: #f3f3f3;*/
    /*opacity: .2;*/
}

.swiper-pagination-bullet-active {
    background: var(--button-color);
}


.validation-message {
    color: var(--rz-danger) !important;
    font-size: 0.75rem;
}

/***************************** Styles for braces comparision chart from Colin *****************************/

@media screen and (max-width: 576px) {
    .ffontz {
        font-size: 11px;
    }
}


@media screen and (min-width: 576px) {
    .colmRlznar {
        width: 12rem;
    }
}




.flexTable {
    font-size: 16px;
}


.colmRlznar {
    background-color: #1a92b6 !important;
    color: #fff;
}

.colmRlz1 {
    /* background-color: #1a92b6;*/
    border-top-left-radius: 15px;
    border: 5px solid #fff;
    border-top-right-radius: 15px;
    flex-direction: column;
    padding-right: 0 !important;
    padding-left: 0 !important;
    text-align: center;
}

.colmRlz2 {
    /* background-color: #1a92b6;*/
    border-top-left-radius: 10px;
    border: 5px solid #fff;
    border-top-right-radius: 10px;
    flex-direction: column;
    padding-right: 0 !important;
    padding-left: 0 !important;
    text-align: center;
    color: #093067 !important;
}

.colmRlz1 .py-3 {
    border-bottom: 1px solid #252525;
}

.colmRlz2 .py-3 {
    border-bottom: 1px solid #dedede;
}

.leftistColumn {
    flex-direction: column;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.leftistLwrCell {
    border-bottom: 2px solid #dedede;
    font-weight: 700 !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.popularCell {
    /* background-color: #093067;*/
    color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    font-weight: 700 !important;
    padding-bottom: 1rem !important;
    padding-top: 1rem !important;
}

.topCellBrdr {
    border-bottom: 5px solid #fff;
    font-size: 16px;
    font-weight: 700 !important;
    line-height: 1.2;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
    padding-top: 1rem !important;
    padding-bottom: 1.5rem !important;
}

.topCellLeft {
    background-color: #F0FAFC;
}

.cellHeight {
    min-height: 80px;
}

.orangeCell {
    background-color: #f68a30 !important;
}

.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
}

    .embed-responsive::before {
        display: block;
        content: "";
    }

    .embed-responsive .embed-responsive-item,
    .embed-responsive iframe,
    .embed-responsive embed,
    .embed-responsive object,
    .embed-responsive video {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

.embed-responsive-21by9::before {
    padding-top: 42.85714%;
}

.embed-responsive-16by9::before {
    padding-top: 56.25%;
}

.embed-responsive-4by3::before {
    padding-top: 75%;
}

.embed-responsive-1by1::before {
    padding-top: 100%;
}




/***************************** BOOTSTRAP OVERRIDE STYLES *****************************/
.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}

    .close:hover {
        color: #000;
        text-decoration: none;
    }

    .close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
        opacity: .75;
    }

button.close {
    padding: 0;
    background-color: transparent;
    border: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

a.close.disabled {
    pointer-events: none;
}