/* CSS overrides */

    /*
    PRIMARY: Blue #00548E (use for blue & old gold), Yellow #ffc758
    SECONDARY: Bright blue #00548E (old teal), Indigo #11385d (old purple)
    Backgrounds only (use gray text): #BBC9E0 #E9EDF4
    */

    body.with-banner .hero-general-content-container.empty-hero {
        padding-top: 84px;
    }

/*New Colors Mapping*/

    :root {
      --white: #ffffff;
      --grey-dark: #636363;

      --blue500: #11385D;
      --blue400: #00548E;
      --blue300: #3E76A9;
      --blue200: #BBC9E0;
      --blue100: #E9EDF4;

      --blue500-hover: #174978;
      --blue400-hover: #3f76a9;
      --blue300-hover: #376895;
      --blue200-hover: #6189B7;
      --blue100-hover: #a5b5d2;
    }

    .blue,
    .gold,
    .purple,
    .rose,
    .teal,
    .sharp-slide-right a {
        color: var(--blue400);
    }

    .blue-border>a:hover,
    .gold-border>a:hover,
    .purple-border>a:hover,
    .rose-border>a:hover,
    .teal-border>a:hover {
        color: var(--blue500); !important;
        text-decoration: none !important;
    }

    .blue-bg,
    .gold-bg,
    .purple-bg,
    .rose-bg,
    .teal-bg {
        background-color: var(--blue400) !important;
    }

    .blue-border,
    .gold-border,
    .purple-border,
    .rose-border,
    .teal-border {
        border-color: var(--blue400) !important;
    }

/* New Blue Shades Color Classes */
.color_blue500,
.color_blue500-bg {
    background-color: var(--blue500);
}
.color_blue500-hover {
    background-color: var(--blue500-hover);
}

.color_blue400,
.color_blue400-bg,
.gold-bg {
    background-color: var(--blue400);
}
.color_blue400-hover {
    background-color: var(--blue400-hover);
}

.color_blue300,
.color_blue300-bg {
    background-color: var(--blue300);
}
.color_blue300-hover {
    background-color: var(--blue300-hover);
}

.color_blue200,
.color_blue200-bg {
    background-color: var(--blue200);
}
.color_blue200-hover {
    background-color: var(--blue200-hover);
}

.color_blue100,
.color_blue100-bg {
    background-color: var(--blue100);
}
.color_blue100-hover {
    background-color: var(--blue100-hover);
}

.color_blue500-border {
    border-color: var(--blue500);
}
.color_blue400-border {
    border-color:  var(--blue400);
}
.color_blue300-border {
    border-color: var(--blue300);
}
.color_blue200-border {
    border-color: var(--blue200);
}
.color_blue100-border {
    border-color: var(--blue100);
}


/* FIXES _hero.scss issue*/
    .hero-container__media.hero-container__media--large {
        background-position: center;
        background-size: cover;
    }

    @media screen and (min-width: 768px) {
        .shp-header.calpers-header .shp-logo a.shp-left>img {
            width: 120px;
            margin-top: -8px;
        }
    }

    ul.checklist,
    ul.arrow {
        list-style-type: none;
        padding-left: 0;
    }

    ul.checklist>li {
        background: url("/images/default-source/site-images/icons/checkmark-with-box-02.png") no-repeat left top;
        padding: 0.5em 0.5em 1em 3em;
        background-size: 30px;
    }

    ul.arrow>li::before {
        content: '';
        display: inline-block;
        background: url('/images/default-source/site-images/icons/yellow-bullet-sm.png') no-repeat left top;
        width: 19px;
        height: 19px;
    }

    ul.arrow li {
        margin-bottom: 1.25em;
    }

    .custom-tab-inner {
        width: 75%;
        margin: 2em 0;
        left: 12.5%;
        position: relative;
    }

/* CSS overrides */
    p,
    ol,
    ul {
        margin: 0 0 1.25em;
    }

    .form-control,
    .form-control-input,
    .form-control-shp,
    .sfTxt,
    select {
        font-size: 1em;
        color: #58595b;
        border-radius: 0;
    }

    .news-photo img,
    .news-photo-lg img {
        object-fit: cover;
    }

    .news-photo img {
        height: 256px;
    }

    .news-photo-lg img {
        height: 336px;
    }

    .news-photo a,
    .news-photo-lg a {
        text-decoration: none;
    }

    .nav-primary__link:focus,
    .nav-primary__link:hover {
        color: #00548E;
    }

/* SUPERSCRIPT */
    sup {
        font-size: 0.6em;
    }

    a sup {
        display: inline-block;
        border-bottom: 1px solid #58595b;
        padding-bottom: 0.9em;
    }

    h1 sup {
        font-size: 25%;
        top: -2em;
    }

    /*@media screen and (min-width: 768px) {
    body.with-banner .hero-general-content-container.empty-hero {
      padding-top: 132px;
    }
    }*/

/* ICONS */
    .icon-bg {
        text-align: center;
        background-color: #00548E;
        width: 100px;
        height: 100px;
        padding-top: 15px;
        border-radius: 50%;
    }

    .icon-bg img {
        width: 70px;
        height: auto;
    }

/* BOX WITH BACKGROUND COLOR */
    .shade {
        padding: 1.5em;
        background-color: #E9EDF4;
    }

    .shade h2,
    .shade h3 {
        margin: 0;
    }

/* TYPOGRAPHY */
    .navbar-default .navbar-link,
    body,
    h1,
    h2,
    h3,
    h1.blue,
    h2.blue,
    h3.blue,
    p.blue,
    .breadcrumb>.active,
    .shp-breadcrumbs>.active {
        color: #58595b;
    }

    h1,
    h2,
    .welcome-container--header h3,
    .text-light,
    .text-bold,
    .pregnancy-container .text-large {
        font-weight: 600;
    }

    h1 {
        font-size: 2.625em;
        /* 42px */
        line-height: 1.0333333em;
        /* 62px */
    }

    h2,
    .text-large,
    .welcome-container--header h3 {
        font-size: 1.625em;
        /* 26px */
        line-height: 1.076923em;
        /* 28px */
    }

    h3,
    .h4,
    h4 {
        font-size: 1.125em;
        /* 18px -- 16px is 1em */
        line-height: 1.333333em;
        /* 24px for 18px; 25.6px for 16px */
    }

    #onboarding .matching-plan .plan-header h3,
    #onboarding .recommended-plan .plan-header h3,
    .h1,
    .h2,
    .h3,
    h1,
    h2,
    h3 {
        margin-bottom: 0.5em;
    }

    .welcome-container--header p {
        margin-bottom: 30px;
    }

    .general-content-container,
    .text-normal {
        line-height: 1.6em;
    }

/* DEFAULT BUTTON */
    .btn-shp-cta button[type=submit],
    .btn-shp-default button[type=submit],
    a.btn-shp-cta,
    a.btn-shp-default,
    button.btn-shp-ct,
    button.btn-shp-default,
    input.btn-shp-cta[type=submit],
    input[type=submit].btn-shp-default,
    label.btn-shp-cta,
    label.btn-shp-default {
        color: #58595b;
        border-color: #ffc758;
        background-color: #ffc758;
    }

    .btn-shp-cta button.active[type=submit],
    .btn-shp-cta button:focus[type=submit],
    .btn-shp-cta button:hover[type=submit],
    .btn-shp-default button[type=submit].active,
    .btn-shp-default button[type=submit]:focus,
    .btn-shp-default button[type=submit]:hover,
    a.active.btn-shp-cta,
    a.btn-shp-cta:focus,
    a.btn-shp-cta:hover,
    a.btn-shp-default.active,
    a.btn-shp-default:focus,
    a.btn-shp-default:hover,
    button.active.btn-shp-ct,
    button.btn-shp-ct:focus,
    button.btn-shp-ct:hover,
    button.btn-shp-default.active,
    button.btn-shp-default:focus,
    button.btn-shp-default:hover,
    input.active.btn-shp-cta[type=submit],
    input.btn-shp-cta:focus[type=submit],
    input.btn-shp-cta:hover[type=submit],
    input[type=submit].btn-shp-default.active,
    input[type=submit].btn-shp-default:focus,
    input[type=submit].btn-shp-default:hover,
    label.active.btn-shp-cta,
    label.btn-shp-cta:focus,
    label.btn-shp-cta:hover,
    label.btn-shp-default.active,
    label.btn-shp-default:focus,
    label.btn-shp-default:hover {
        color: #58595b;
        background-color: #fff !important;
    }

/* CUSTOM BUTTONS */
    .btn-shp-custom button[type=submit],
    a.btn-shp-custom,
    button.btn-shp-custom,
    input[type=submit].btn-shp-custom,
    label.btn-shp-custom {
        color: #58595b;
        border-color: #ffc758;
        background-color: #ffc758;
    }

    .btn-shp-custom button[type=submit].white,
    a.btn-shp-custom.white,
    button.btn-shp-custom.white,
    input[type=submit].btn-shp-custom.white,
    label.btn-shp-custom.white {
        color: #58595b;
        border-color: #ffc758;
    }

    .btn-shp-custom button[type=submit].white.active,
    .btn-shp-custom button[type=submit].white:hover,
    a.btn-shp-custom.white.active,
    a.btn-shp-custom.white:hover,
    button.btn-shp-custom.white.active,
    button.btn-shp-custom.white:hover,
    input[type=submit].btn-shp-custom.white.active,
    input[type=submit].btn-shp-custom.white:hover,
    label.btn-shp-custom.white.active,
    label.btn-shp-custom.white:hover {
        color: #58595b;
        background-color: #fff;
        border-color: #fff;
    }

    /*.quote-container--browseplans .btn-shp-custom button[type=submit].white,
    .quote-container--browseplans a.btn-shp-custom.white,
    .quote-container--browseplans button.btn-shp-custom.white,
    .quote-container--browseplans input[type=submit].btn-shp-custom.white,
    .quote-container--browseplans label.btn-shp-custom.white {
    color: #11385D;
    }*/

/* HEADER / NAV BAR */
    .shp-navbar.calpers-navbar {
        border-bottom: 2px solid #f6f6f6;
    }

/* HOMEPAGE */
    h1.hero-container--welcome-box--intro {
        /* HOMEPAGE INTRO */
        font-size: 48px;
        line-height: 1.21em;
    }

    .hero-container--welcome-box--inner {
        border: 1px solid #00548e;
    }

    h1.hero-container--welcome-box--intro {
        font-weight: 600;
        color: #58595b;
    }

    .footer .footer-lower,
    .footer .footer-lower .footer-lower--madewithlove {
        background-color: #00548E;
    }

    .footer .footer-bottom {
        background-color: #11385D;
    }

/* NUMBER ICONS */
    .bullet-number {
        float: left;
        clear: left;
        margin: 0 1em 0 0;
        overflow: hidden;
        width: 50px;
    }

    .bullet-copy {
        list-style-type: none;
        padding-left: 0;
        margin-bottom: 1em;
        overflow: hidden;
    }

    .bullet-copy h3 {
        margin: 0;
        padding: 0;
    }

    .bullet-copy p,
    .bullet-copy li {
        margin-bottom: 1.5em;
    }

/* WIDGETS */
/***************************************************/

/* BANNER TICKER */
    div.banner-ticker {
        background-color: rgba(255, 199, 88, 1.0);
        padding: 16px 0;
        height: 48px;
        top: 84px;
        line-height: 1em;
    }

    div.banner-ticker.white,
    div.banner-ticker a {
        color: #58595b;
    }

    @media screen and (min-width: 768px) {
        div.banner-ticker {
            font-size: 1em;
        }
    }

    @media screen and (max-width: 767px) {
        body.with-banner .hero-general-content-container {
            padding: 0;
            margin-top: 130px;
        }
    }

/* SIDE BY SIDE CTAs */
    .quote-container .quote-container--getaquote {
        background-color: #00548E;
    }

    .quote-container .quote-container--browseplans {
        background-color: #11385D;
    }

    /*
    .quote-container--browseplans .btn-shp-custom button[type=submit].white.active,
    .quote-container--browseplans .btn-shp-custom button[type=submit].white:hover,
    .quote-container--browseplans a.btn-shp-custom.white.active,
    .quote-container--browseplans a.btn-shp-custom.white:hover,
    .quote-container--browseplans button.btn-shp-custom.white.active,
    .quote-container--browseplans button.btn-shp-custom.white:hover,
    .quote-container--browseplans input[type=submit].btn-shp-custom.white.active,
    .quote-container--browseplans input[type=submit].btn-shp-custom.white:hover,
    .quote-container--browseplans label.btn-shp-custom.white.active,
    .quote-container--browseplans label.btn-shp-custom.white:hover {
    background-color: #ffc758;
    color: #58595b;
    }*/
    .quote-container .quote-container--getaquote .quote-container--getaquote-header,
    .quote-container .quote-container--browseplans .quote-container--browseplans-header {
        font-weight: 600;
        font-size: 1.625em;
        /* 26px */
        line-height: 1.076923em;
        /* 28px */
    }

    .quote-container .text-large {
        font-size: initial;
        /* 16px */
        line-height: 1.6em;
        /* 25.6px */
    }

    .quote-container .text-bold.text-large {
        font-size: 0.75em;
        /* 18px */
        line-height: 1.5em;
        margin-bottom: 0.2em;
    }

/* CAROUSELS */
    .sharp-slide .slick-prev:before {
        content: url(/images/default-source/site-images/icons/arrow-left.png);
    }

    .sharp-slide .slick-next:before {
        content: url(/images/default-source/site-images/icons/arrow-right.png);
    }

    .sharp-slider-container {
        background-color: #fff;
    }

/* WELCOME BLOCK */
    .welcome-members-container .welcome-container--header h1,
    .welcome-members-container .welcome-container--header p {
        text-align: left;
    }

/* KICKER and FULL INFO BLOCK */
    @media screen and (min-width: 1350px) {
        .content-padding {
            padding-right: 275px;
            padding-left: 275px;
        }
    }

    @media screen and (min-width: 992px) {
        .subcontent-padding {
            padding-right: 0;
            padding-left: 15px;
        }
    }

    .kicker-body-content {
        padding-left: 0;
    }

    .kicker-content {
        padding-right: 0;
    }

/* FULL INFO BLOCK only */
    .pregnancy-container img.pad30 {
        padding-right: initial;
        padding-left: initial;
    }

/* CALLOUT BUTTONS */
    @media screen and (min-width: 768px) {
        .search-container {
            padding-right: 80px;
            padding-left: 80px;
        }
    }

    .search-container {
        background-color: #11385d;
    }

    .search-container.blue-bg {
        background-color: #11385D !important;
    }

    .search-container .search-container--header,
    .search-container .search-container--button {
        text-align: initial;
    }

    .search-container--header h3,
    .search-container--header p,
    .search-container--header p a {
        color: #fff;
    }

    .search-container--header h3 {
        font-size: 1.625em;
        /* 26px */
        line-height: 1.076923em;
        /* 28px */
    }

    .search-container--header h3.text-bold {
        font-weight: 600;
    }

    .search-container a.btn-shp-default:hover,
    .search-container a.btn-shp-default:active {
        color: #58595b;
        background-color: #fff !important;
        border-color: #fff;
    }

/* ACCOLADES */
    .accolade-container .accolade-container--header {
        text-align: initial;
    }

    .accolade-container--header h3 {
        font-weight: unset;
        font-size: unset;
        line-height: 1.6em;
    }

    .accolade-container .accolade-container--body {
        width: 996px;
        left: 261px;
        position: relative;
    }

    .accolade-container .accolade-container--body .col-md-3 {
        padding-left: 0;
        padding-right: 4px;
    }

/* INFO CARDS */
    .member-manageplan-options-container--card--header h3 {
        font-size: 1.625em;
        line-height: 1.076923em;
        font-weight: 600;
    }

    @media screen and (min-width: 768px) {
        .member-manageplan-options-container .member-manageplan-options-container--card .member-manageplan-options-container--card--body {
            min-height: 240px;
            /* Undoes height from ae-overrides.scss. Copy within card should be 5 lines max. */
        }
    }

/* FAQs */
    p:empty {
        display: none;
    }

    .faq-filter-container .filter-container--filter-box ul li {
        color: #58595b;
        background-color: #E9EDF4;
        border: 1px solid #E9EDF4;
        font-size: 0.888889em;
    }

    .faq-filter-container .filter-container--filter-box ul li:hover {
        background-color: #fff;
        color: #58595b;
        border: 1px solid #ffc758;
    }

    .faq-filter-container .filter-container--filter-box ul li.active {
        background-color: #ffc758;
        color: #58595b;
        border: 0;
    }

    @media screen and (min-width: 768px) {
        .faq-filter-container .filter-container--filter-box ul {
            width: 81%;
        }
    }

    .faq-categories li a {
        color: #00548e;
        text-decoration: none;
    }

    .faq-categories li a:hover {
        color: #fff;
    }

    .faq-categories li a:focus {
        text-decoration: none;
    }

    h3.topic-hdr,
    .faq-topic {
        font-size: 1.8rem;
        line-height: 2.4em;
        font-weight: 700;
        cursor: pointer;
    }

    .faq-container p {
        margin-bottom: 0;
    }

    .faq-container ul,
    .faq-container ol {
        margin-top: 1.25em;
    }

/* CONTENT TOGGLES (ACCORDIONS) */
    .content-toggle {
        margin-top: -26px;
    }

    .faq-container div[id$=faq] .faq-section {
        color: #58595b;
        font-weight: 600;
    }

    @media screen and (min-width: 1000px) {
        .faq-container div[id$=faq] .faq-section {
            font-size: 1.625em;
            line-height: 1.076923em;
        }
    }

    .content-toggle .col-sm-12,
    .content-toggle .col-md-10,
    .content-toggle .col-lg-8 {
        border-bottom: 1px solid #58595b;
    }

/* CUSTOM TABS */
    .sharp-tabs .nav-tabs>li>a {
        font-weight: 600;
    }

    .nav-justified>li>a,
    .nav-tabs.nav-justified>li>a,
    .sharp-tabs .tab-content>.tab-pane .tab-heading {
        text-align: unset;
    }

    .sharp-tabs .tab-content>.tab-pane .tab-heading {
        font-weight: unset;
        font-size: unset;
        line-height: unset;
    }

    @media screen and (min-width: 1350px) {
        .sharp-tabs .nav-tabs>li>a {
            padding: 34px 40px 40px;
        }
    }

    .sharp-tabs .nav-tabs>li.blue>a,
    .sharp-tabs .nav-tabs>li.blue>a:hover,
    .sharp-tabs .nav-tabs>li.gold>a,
    .sharp-tabs .nav-tabs>li.gold>a:hover,
    .sharp-tabs .nav-tabs>li.teal>a,
    .sharp-tabs .nav-tabs>li.teal>a:hover,
    .sharp-tabs .nav-tabs>li.purple>a,
    .sharp-tabs .nav-tabs>li.purple>a:hover {
        background-color: #fff;
        color: #00548e;
        border: 1px solid #11385d;
    }

    .sharp-tabs .nav-tabs>li.blue.active>a,
    .sharp-tabs .nav-tabs>li.blue.active>a:focus,
    .sharp-tabs .nav-tabs>li.blue.active>a:hover,
    .sharp-tabs .nav-tabs>li.gold.active>a,
    .sharp-tabs .nav-tabs>li.gold.active>a:focus,
    .sharp-tabs .nav-tabs>li.gold.active>a:hover,
    .sharp-tabs .nav-tabs>li.teal.active>a,
    .sharp-tabs .nav-tabs>li.teal.active>a:focus,
    .sharp-tabs .nav-tabs>li.teal.active>a:hover,
    .sharp-tabs .nav-tabs>li.purple.active>a,
    .sharp-tabs .nav-tabs>li.purple.active>a:focus,
    .sharp-tabs .nav-tabs>li.purple.active>a:hover {
        background-color: #00548E;
        border: 1px solid #00548E;
    }

    .sharp-tabs .tab-content>.tab-pane.blue .tab-heading,
    .sharp-tabs .tab-content>.tab-pane.gold .tab-heading,
    .sharp-tabs .tab-content>.tab-pane.teal .tab-heading,
    .sharp-tabs .tab-content>.tab-pane.purple .tab-heading {
        background-color: #00548E;
    }

    .sharp-tabs .tab-content>.tab-pane.blue,
    .sharp-tabs .tab-content>.tab-pane.gold,
    .sharp-tabs .tab-content>.tab-pane.teal,
    .sharp-tabs .tab-content>.tab-pane.purple {
        border: 1px solid #00548E;
    }

    .tab-body ul {
        list-style-type: none;
        padding: 0;
    }

    .sharp-tabs .nav-tabs {
        z-index: 0;
    }

    .sharp-tabs .nav-tabs li>a {
        line-height: 1.5em;
    }

    .tab-body h4,
    .tab-body .h4 {
        margin-top: 25px;
        margin-bottom: 10px;
    }

    .eff,
    .updated {
        white-space: nowrap;
    }

    li .eff,
    li .updated,
    p .eff,
    p .updated {
        font-style: italic;
    }

    h3 .eff,
    h3 .updated {
        font-size: 0.7em;
    }

    /* You have to use UTF-8 characters, not HTML entities. \a0 =    */
    li .eff::before,
    p .eff::before {
        content: " - effective\a0";
    }

    li .updated::before,
    p .updated::before {
        content: " - updated\a0";
    }

    h3 .eff::before {
        content: "effective\a0";
    }

    h3 .updated::before {
        content: "updated\a0";
    }

    .tab-body ul.arrow li::before {
        /*list-style-position: outside;*/
        content: '';
        display: inline-block;
        background: url('/images/default-source/site-images/icons/yellow-bullet-sm.png') no-repeat 0 5px;
        width: 14px;
        height: 19px;
        background-size: 8px 15px;
    }

    @media screen and (min-width: 1350px) {
        .sharp-tabs .tab-content>.tab-pane .tab-body {
            padding: 0;
        }
    }

    @media screen and (min-width: 769px) {
        .sharp-tabs .tab-content>.tab-pane .tab-body {
            width: 83.040421%;
            left: 8.5%;
            margin: 2em 0;
            position: relative;
        }

        .sharp-tabs .tab-content>.tab-pane .tab-heading {
            padding: 40px 291px 40px 95px;
        }

        .file-list {
            width: 49%;
            vertical-align: top;
            display: inline-block;
        }

        .file-list.left {
            padding-right: 1.5em;
        }

        .file-list h3:nth-child(1) {
            margin-top: 0;
        }

        .file-list li {
            margin-bottom: 1em;
        }
    }

    /*Sharp Tabs New color mapping*/

    .nav-tabs>li.blue500>a {
      background-color: var(--white);
      border-color: var(--blue500);
      color: var(--blue500);
    }

    .nav-tabs>li.blue500.active>a,
    .nav-tabs>li.blue500.active>a:hover,
    .nav-tabs>li.blue500.active>a:focus {
      color: var(--white);
      background-color: var(--blue500);
      border: 1px solid var(--blue500);
    }

    .tab-content>.tab-pane.blue500 {
      border: 1px solid var(--blue500);

      .tab-heading {
        background-color: var(--blue500);
        color: var(--white);
      }

      .tab-expander,
      .tab-expander>a {
        background-color: var(--blue500);
        color: var(--blue500);
      }

      .tab-body {
        background-color: var(--white);
        color: var(--grey-dark);
      }
    }

    .nav-tabs>li.blue400>a {
      background-color: var(--white);
      border-color: var(--blue400);
      color: var(--blue400);
    }

    .nav-tabs>li.blue400.active>a,
    .nav-tabs>li.blue400.active>a:hover,
    .nav-tabs>li.blue400.active>a:focus {
      color: var(--white);
      background-color: var(--blue400);
      border: 1px solid var(--blue400);
    }

    .tab-content>.tab-pane.blue400 {
      border: 1px solid var(--blue400);

      .tab-heading {
        background-color: var(--blue400);
        color: var(--white);
      }

      .tab-expander,
      .tab-expander>a {
        background-color: var(--blue400);
        color: var(--blue400);
      }

      .tab-body {
        background-color: var(--white);
        color: var(--grey-dark);
      }
    }

    .nav-tabs>li.blue300>a {
      background-color: var(--white);
      border-color: var(--blue300);
      color: var(--blue300);
    }

    .nav-tabs>li.blue300.active>a,
    .nav-tabs>li.blue300.active>a:hover,
    .nav-tabs>li.blue300.active>a:focus {
      color: var(--white);
      background-color: var(--blue300);
      border: 1px solid var(--blue300);
    }

    .tab-content>.tab-pane.blue300 {
      border: 1px solid var(--blue300);

      .tab-heading {
        background-color: var(--blue300);
        color: var(--white);
      }

      .tab-expander,
      .tab-expander > a {
        background-color: var(--blue300);
        color: var(--blue300);
      }

      .tab-body {
        background-color: var(--white);
        color: var(--grey-dark);
      }
    }

    .nav-tabs>li.blue200>a {
      background-color: var(--white);
      border-color: var(--blue200);
      color: var(--blue200);
    }

    .nav-tabs>li.blue200.active>a,
    .nav-tabs>li.blue200.active>a:hover,
    .nav-tabs>li.blue200.active>a:focus {
      color: var(--white);
      background-color: var(--blue200);
      border: 1px solid var(--blue200);
    }

    .tab-content>.tab-pane.blue200 {
      border: 1px solid var(--blue200);

      .tab-heading {
        background-color: var(--blue200);
        color: var(--white);
      }

      .tab-expander,
      .tab-expander>a {
        background-color: var(--blue200);
        color: var(--blue200);
      }

      .tab-body {
        background-color: var(--white);
        color: var(--grey-dark);
      }
    }

    .nav-tabs>li.blue200>a {
      background-color: var(--white);
      border-color: var(--blue200);
      color: var(--blue200);
    }

    .nav-tabs>li.blue200.active>a,
    .nav-tabs>li.blue200.active>a:hover,
    .nav-tabs>li.blue200.active>a:focus {
      color: var(--blue200);
      background-color: var(--blue200);
      border: 1px solid var(--blue200);
    }

    .tab-content>.tab-pane.blue200 {
      border: 1px solid var(--blue200);

      .tab-heading {
        background-color: var(--blue200);
        color: var(--white);
      }

      .tab-expander,
      .tab-expander>a {
        background-color: var(--blue200);
        color: var(--blue200);
      }

      .tab-body {
        background-color: var(--white);
        color: #636363;
      }
    }

/* BUTTONS */
    .buttons-container .buttons-container--button.urgentcare,
    .buttons-container .buttons-container--button.urgentcare:hover {
        background-color: #00548E;
    }

    .buttons-container .buttons-container--button.medications,
    .buttons-container .buttons-container--button.medications:hover,
    .buttons-container .buttons-container--button.provider,
    .buttons-container .buttons-container--button.provider:hover {
        background-color: #11385d;
    }

    @media screen and (min-width: 992px) {
        .buttons-container .buttons-container--button {
            font-size: 1.625em;
            line-height: 1.076923em;
            font-weight: 600;
        }
    }

    @media screen and (max-width: 1280px) and (orientation: landscape) {
        .buttons-container .buttons-container--button {
            font-size: 2rem;
            line-height: 2.6rem;
        }

        .subcontent-padding {
            padding-bottom: 40px;
        }
    }

/* HELPFUL LINKS */
    .helpful-container--links {
        padding: 30px;
    }

    .helpful-container--links h3 {
        font-size: 1.625em;
        line-height: 1.076923em;
    }

    .helpful-container--links p:last-child {
        margin: 0
    }

/* OVATIONS */
    .ovation-container {
        padding: 0 150px;
        background-size: 191px;
        background-image: url('/images/default-source/site-images/accolade-images/bg_ovation_wave.png?sfvrsn=9018dc80_2');
    }

    .ovation-container,
    .ovation-container--ovation {
        background-color: #0e385d;
    }

    .ovation-container--ovation .text-center {
        text-align: unset;
    }

    .ovation-container--ovation p {
        font-size: 1.25em;
        margin: 0;
        font-weight: 600;
        line-height: 25px;
    }

    .ovation-container--ovation .text-bold {
        display: inline-block;
        font-weight: 500;
    }

    @media screen and (min-width: 1350px) {
        .ovation-container .ovation-container--ovation {
            padding: 100px 220px;
        }
    }

    @media screen and (max-width: 600px) {
        .ovation-container {
            padding: 0 60px;
        }
    }

    @media screen and (max-width: 470px) {
        .ovation-container {
            padding: 0 20px;
            background-image: none;
        }
    }

/* CLUDO BANNER & SEARCH */
    .cludo-banner {
        float: left;
        font-family: 'open sans', sans-serif;
        background-color: #00548E;
        margin-bottom: 40px;
        padding: 30px;
    }

    .cludo-banner p {
        float: left;
        width: 72%;
        margin: 0;
        padding: 0;
        font-size: 22px;
        line-height: 1.5em;
        font-weight: 500;
        color: #fff;
    }

    .cludo-banner p a {
        color: #fff;
        text-decoration: none;
    }

    .cludo-banner .btn-wrapper {
        float: right;
        width: 28%;
        text-align: right;
    }

    .cludo-autocomplete-items div.active,
    .cludo-autocomplete-items li.active,
    .search_autocomplete div.active,
    .search_autocomplete li.active {
        background-color: #00548E !important;
        color: #fff
    }

/* TOOLTIPS */
    /* - Wrap your text is a span tag, add class="tool", use data-tag attribute for tooltip text, e.g.,
    <span class="tool" data-tip="Tooltip text.">Word</span>
    */
    .tool {
        cursor: help;
        position: relative;
        text-decoration: underline;
    }

    /*== common styles for both parts of tool tip ==*/
    .tool::before,
    .tool::after {
        left: 50%;
        opacity: 0;
        position: absolute;
        z-index: -100;
    }

    .tool:hover::before,
    .tool:focus::before,
    .tool:hover::after,
    .tool:focus::after {
        opacity: 1;
        transform: scale(1) translateY(0);
        z-index: 100;
    }

    /*== speech bubble ==*/
    .tool::after {
        background: #11385D;
        color: #FFF;
        border-radius: .25em;
        bottom: 180%;
        content: attr(data-tip);
        margin-left: -8.75em;
        padding: 1em;
        transition: all .65s cubic-bezier(.84, -0.18, .31, 1.26) .2s;
        transform: scale(.6) translateY(50%);
        width: 24em;
    }

    /*== pointer ==*/
    .tool::before {
        border-color: #11385D transparent transparent transparent;
        /* SHOULD MATCH SPEECH BUBBLE BACKGROUND COLOR ABOVE*/
        border-style: solid;
        border-width: 1em 0.75em 0 0.75em;
        bottom: 115%;
        content: "";
        margin-left: -0.5em;
        transition: all .65s cubic-bezier(.84, -0.18, .31, 1.26), opacity .65s .5s;
        transform: scale(.6) translateY(-90%);
    }

    .tool:hover::before,
    .tool:focus::before {
        transition: all .65s cubic-bezier(.84, -0.18, .31, 1.26) .2s;
    }

    .tool:hover::after,
    .tool:focus::after {
        transition: all .65s cubic-bezier(.84, -0.18, .31, 1.26);
    }

    @media (max-width: 760px) {
        .tool::after {
            font-size: .75em;
            margin-left: -5em;
            width: 10em;
        }
    }

/* FOOTNOTE */
    .footnote p {
        font-size: 0.75em;
        line-height: 1.333333em;
    }

/* FOOTER */
    .footer-copyright ul {
        list-style-type: none;
        margin-bottom: 0;
        padding: 0;
    }

    .footer-copyright ul li {
        padding: 3px 0;
        font-size: 1.6rem;
        line-height: 2.4rem;
    }

    @media screen and (min-width: 768px) {
        .footer-copyright ul {
            margin-bottom: 30px;
        }
    }

/* MOBILE RULES */
    @media screen and (max-width: 767px) {
        .shp-navbar {
            max-width: 430px;
        }

        #header-inc .center-block {
            margin: 0;
            padding: 0;
        }

        .shp-header .shp-logo {
            margin-left: 15px;
        }

        .shp-header.calpers-header .shp-logo a.calpers-right>img {
            width: 100px;
        }

        .shp-header .nav-item {
            left: -15px;
            position: relative;
        }

        .breadcrumb-container {
            display: none;
        }

        h1 {
            font-size: 2.625em;
            /* 42px */
            line-height: 1.047619em;
            /* 44px */
        }

        h1.hero-container--welcome-box--intro {
            /* HOMEPAGE INTRO */
            font-size: 2em;
        }

        .general-content-container,
        .text-normal {
            line-height: 1.25em;
        }

        .pregnancy-container img.pb40 {
            padding-bottom: 0;
        }

        .footer-copyright .col-sm-4.pad5,
        .footer-lower--links>div:nth-child(5),
        .accolade-container {
            display: none;
        }
    }