/*** Colors ***************************************/
:root {
    --saNav__blue-grey: #254A5D;
    --saNav__yellow: #F1BE48;
    --saNav__dark-grey: #21343D;
    --saNav__light-grey: #5B7380;
    --saNav__silver: #C3D0D6;
    --saNav__light-pro-cyan: #45BBE6;
    --saNav__crimson: #da2e4e;
    --saNav__orange: #e35205;
    --saNav__slate: #94a7b0;
    --saColorTeal: #ddf0f0;
    --saColorLightBlue: #f3f5fd;
    --saColorGrey: #f3f3f3;
    --saColorWhite: #fff;
    --saColorPrimary: #182340;
    --saColorBrandBlue: #375edf;
    --saColorBrandBlack: #182340;
    --saColorLightGray: #6b7682;
    --saColorNeutralSteel: #7181A0;
    --saColorNeutral: #DEE4EB;
}
/*** End Colors ************************************/

.saNav__bar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1px;
    grid-template-areas: "mLogo mCert mHowItWorks mResources mLogin mCTA mNotification";
    grid-gap: 25px;
    background-color: var(--saColorWhite);
    z-index: 2000;
    position: fixed;
    top: 0px;
    height: 88px;
    width: 100vw;
    padding-left: 10vw;
    padding-right: 10vw;
    font-family: "Graphik";
}

/*grid area definitions*/
.saNav__left {
    grid-area: mLogo;
    align-self: center;
}

#sa__nav_menu_Certification {
    grid-area: mCert;
    align-self: center;
}

#sa__nav_menu_HowItWorks {
    grid-area: mHowItWorks;
    align-self: center;
}

#sa__nav_menu_Resources {
    grid-area: mResources;
    align-self: center;
}

#sa__nav_menu_Login {
    grid-area: mLogin;
    text-align: right;
    margin-top: 18px;
}

#sa__nav_menu_CTA {
    grid-area: mCTA;
    align-self: center;
    align-content: center;
    justify-content: center;
    justify-items: center;
    align-items: center;
    white-space: nowrap;
}

#sa__nav_menu_Notification {
    grid-area: mNotification;
    align-self: center;
}

#sa__nav_menu_Mobile {
    grid-area: mMobile;
    align-self: center;
}
/*End Grid area definitions*/

#sa__nav_btn_Back {
    display: none;
}

#divLoginContent .saNav__container {
    margin-right: -170px;
    padding-bottom: 40px;
    width: auto;
}

#findACourseBtn {
    min-width: 153px;
}

.sa__nav_ham {
    display: none;
    background-image: url("../Images/icons/hamburger.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 30px 30px;
    height: 30px;
    margin-right: 16px;
    width: 100%;
}

.sa__nav_ham_close {
    background-image: url("../Images/icons/mobile-x.svg");
}

.saNav__mobileIcon {
    display: none;
}

.saNav__footer {
    background-color: var(--saColorGrey);
    color: var(--saColorBrandBlack);
    font-family: "Graphik";
    padding-top: 20px;
}

.saNav__footer__inside {
    padding-top: 72px;
    display: grid;
    grid-template-columns: 1fr 5fr 1fr;
    width: 100%;
}

.saNav__footer__inside__a {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 16px;
    justify-items: left;
}

.saNav__footer__inside__b {
    display: grid;
    grid-template-columns: 1fr 1fr 4fr;
    width: 100%;
}

.saNav__grid--flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    margin-top: 8px;
}

.saGrid__hr {
    border-top: 1px solid #B1BFC9;
    margin-top: 12px;
    margin-bottom: 32px;
}

.saNav__logo {
    background-image: url("../Images/Logos/SA_Logo.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 230px;
    height: 40px;
    width: 300px;
}

.saNav__notification {
    height: 30px;
    width: 30px;
    background-image: url("../Images/notifications/SA_global_icon_notifications_default_alert_40x40.png"); /* The image used */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: 30px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
}

    .saNav__notification:hover {
        background-image: url("../Images/notifications/SA_global_icon_notifications_hover_alert_40x40.png"); /* The image used */
        cursor: pointer;
    }

.saNav__button {
    padding: 12px 16px 12px 16px;
    border-radius: 100px;
    margin-top: 8px;
    margin-bottom: 8px;
    font-family: Graphik;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.75px;
    min-width: 80px;
    text-decoration: none;
    cursor: pointer;
    align-self: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    transition: 0.3s;
    width: fit-content;
    align-items: center;
    gap: 8px;
}

.saNav__primaryButton, .saNav__primaryButton:visited {
    border: 1px solid var(--saColorBrandBlue);
    color: var(--saColorWhite) !important;
    background: var(--saColorBrandBlue);
    -webkit-text-fill-color: var(--saColorWhite) !important;
}

    .saNav__primaryButton:hover, .saNav__primaryButton:focus {
        text-decoration: none;
        background: #0039cd;
        border: 1px solid #0039cd;
        color: var(--saColorWhite);
        text-decoration: none !important;
    }

.saNav__secondaryButton, .saNav__secondaryButton:visited {
    border: 1px solid var(--saColorBrandBlue);
    color: var(--saColorBrandBlue);
}

    .saNav__secondaryButton:hover, .saNav__secondaryButton:focus {
        background: var(--saColorBrandBlue);
        color: var(--saColorWhite);
        border: 1px solid var(--saColorBrandBlue);
    }

.saNav__dropdown {
    padding: 16px 0 16px 0;
    text-align: center;
    min-height: 40px;
    max-height: 360px;
    z-index: 2001;
}

.saNav__dropbtn {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.75px;
    color: var(--saColorBrandBlack) !important;
    text-decoration: none !important;
    user-select: none;
    white-space: nowrap;
}

    .saNav__dropbtn:hover {
        color: var(--saColorBrandBlue);
    }

.saNav__login {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.75px;
    color: var(--saColorBrandBlack);
    text-decoration: none;
    user-select: none;
    white-space: nowrap;
}

.saNav__loginLink {
    padding-top: 16px;
}

.saNav__links {
    list-style-type: none;
    text-align: left;
    padding: 0px;
    margin-bottom: 10px;
    margin-left: 0 !important;
}

.saNav__link, .saNav__link a {
    font-weight: 400;
    color: var(--saColorBrandBlack) !important;
    text-decoration: none !important;
}

    .saNav__link a:hover, .saNav__link a:focus {
        color: var(--saColorBrandBlue) !important;
    }

    .saNav__link a:visited {
    }

.saNav__header__link, .saNav__footer__link {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.75px;
}

.saNav__argh {
    margin-bottom: 10px;
}

.saNav__footer__link {
    margin-bottom: 8px;
}

.saNav__links__heading {
    font-size: 15px;
    letter-spacing: 2px;
    margin-bottom: 32px;
    font-weight: 500;
    line-height: 1.1;
    color: var(--saNav__light-grey);
}

.saNav__links__sectionHeading {
    font-size: 10px;
    font-weight: 500;
    color: var(--saColorNeutralSteel);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 20px;
    margin-bottom: 20px;
}

.saNav__dropdownContent {
    display: grid;
    transition: all 0.25s ease-in-out;
    visibility: hidden;
}

.saNav__dropdown--hover:hover .saNav__dropdownContent {
    transition-delay: 0.25s;
    visibility: visible;
    opacity: 1;
}


.saNav__dropdownContent--wide {
    position: absolute;
    width: 100%;
    left: 0;
    top: 101px;
}

.saNav__dropdownContent--aligned {
    position: relative;
    width: 300px;
    margin-top: 47px;
    text-align: left;
}

    .saNav__dropdownContent--aligned .saNav__container {
        padding: 50px;
    }

.saNav__dropdownContent--wide .saNav__container {
    width: 1400px;
}

.saNav__container {
    background-color: var(--saColorWhite);
    border-radius: 30px;
    margin-right: auto;
    margin-left: auto;
    margin-top: -10px;
    box-shadow: 0 4px 6px 4px rgba(0, 0, 0, 0.15), 0 10px 20px 10px rgba(0, 0, 0, 0.13);
}

.saNav__container--LoggedIn {
    width: 300px !important;
    margin-left: 200px;
}

.saNav__grid {
    display: grid;
    justify-items: unset;
    align-items: center;
}

.saNav__bulletIcon {
    width: 24px;
    height: 24px;
    background-image: url("/_scrum/nav2/Images/icons/bullet-ff.svg");
    background-size: cover;
}

.saNav__bulletIcon--sm {
    background-image: url("/_scrum/nav2/Images/icons/bullet-sm.svg");
}

.saNav__bulletIcon--po {
    background-image: url("/_scrum/nav2/Images/icons/bullet-po.svg");
}

.saNav__bulletIcon--dev {
    background-image: url("/_scrum/nav2/Images/icons/bullet-dev.svg");
}

.saNav__bulletIcon--facilitation {
    background-image: url("/_scrum/nav2/Images/icons/bullet-facilitation.svg");
}

.saNav__bulletIcon--leadership {
    background-image: url("/_scrum/nav2/Images/icons/bullet-leadership.svg");
}

.saNav__bulletIcon--scaling {
    background-image: url("/_scrum/nav2/Images/icons/bullet-scaling.svg");
}

.saNav__bulletIcon--cst {
    background-image: url("/_scrum/nav2/Images/icons/bullet-cst.svg");
}

.saNav__bulletIcon--ctc {
    background-image: url("/_scrum/nav2/Images/icons/bullet-ctc.svg");
}

.saNav__bulletIcon--cec {
    background-image: url("/_scrum/nav2/Images/icons/bullet-cec.svg");
}

.saNav__bulletIcon--rea {
    background-image: url("/_scrum/nav2/Images/icons/bullet-rea.svg");
}

.saNav__bulletIcon--browse {
    background-image: url("/_scrum/nav2/Images/icons/bullet-browse.svg");
}

.saNav__bulletIcon--find {
    background-image: url("/_scrum/nav2/Images/icons/bullet-find.svg");
}

.saNav__bulletIcon--how-it-works {
    background-image: url("/_scrum/nav2/Images/icons/bullet-how-it-works.svg");
}

.saNav__bulletIcon--what-is {
    background-image: url("/_scrum/nav2/Images/icons/bullet-what-is.svg");
}

.saNav__bulletIcon--renew-cert {
    background-image: url("/_scrum/nav2/Images/icons/bullet-renew-cert.svg");
}

.saNav__bulletIcon--RL {
    background-image: url("/_scrum/nav2/Images/icons/bullet-RL.svg");
}

.saNav__bulletIcon--articles {
    background-image: url("/_scrum/nav2/Images/icons/bullet-articles.svg");
}

.saNav__bulletIcon--videos {
    background-image: url("/_scrum/nav2/Images/icons/bullet-videos.svg");
}

.saNav__bulletIcon--collections {
    background-image: url("/_scrum/nav2/Images/icons/bullet-collections.svg");
}

.saNav__bulletIcon--webinars {
    background-image: url("/_scrum/nav2/Images/icons/bullet-webinars.svg");
}

.saNav__bulletIcon--learning-journey {
    background-image: url("/_scrum/nav2/Images/icons/bullet-learning-journey.svg");
}

.saNav__bulletIcon--earn-seus {
    background-image: url("/_scrum/nav2/Images/icons/bullet-earn-seus.svg");
}

.saNav__bulletIcon--GSG {
    background-image: url("/_scrum/nav2/Images/icons/bullet-GSG.svg");
}

.saNav__bulletIcon--RSG {
    background-image: url("/_scrum/nav2/Images/icons/bullet-RSG.svg");
}

.saNav__bulletIcon--host-RSG {
    background-image: url("/_scrum/nav2/Images/icons/bullet-host-RSG.svg");
}

.saNav__bulletIcon--retreats {
    background-image: url("/_scrum/nav2/Images/icons/bullet-retreats.svg");
}

.saNav__bullet {
    display: grid;
    grid-gap: 6px;
    align-items: center;
    grid-template-columns: min-content auto;
    margin-top: 20px;
}

    .saNav__bullet p {
        font-size: 14px;
        line-height: 21px;
        letter-spacing: 0.25px;
    }

.saNav__featured {
    display: grid;
    grid-gap: 15px;
    align-items: center;
    grid-template-columns: max-content auto;
}

.saNav__grid--3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.saNav__column--right--dark {
    padding: 36px 50px 26px 36px;
    background-color: #F4F7FA;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
}

.saNav__column--left {
    padding: 36px 10px 26px 50px;
}

.saNav__column--middle {
    padding: 36px 10px 26px 10px;
}

.saNav__column--right {
    padding: 36px 50px 26px 10px;
}

.saNav__column--loggedin {
    padding: 36px;
}

.saNav__section__image {
    opacity: 1;
    height: 100px;
    border-radius: 10px;
    margin-bottom: 12px;
}

.saNav__section__header {
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    padding: 12px 15px 6px 15px;
    border-bottom: 3px solid var(--saColorBrandBlue);
    color: var(--saColorBrandBlue);
}

.saNav__notification {
    font-family: "Graphik";
}

.saNav__notification__h4 {
    margin-bottom: 10px;
    font-size: 22px;
    color: var(--saColorWhite);
    font-weight: bold;
}

.saNav__notification__date {
    color: var(--saNav__light-pro-cyan);
    font-size: 10px;
}

.saNav__notification__msg {
    font-size: 14px;
    padding-bottom: 10px;
}

.saNav__notification__sep {
    border-bottom: 1px solid var(--saNav__slate);
}

@media (max-width:1600px) {
    #sa__nav_menu_Login {
        width: 200px;
    }
}

@media (max-width:1440px) {
    #divLoginContent .saNav__container {
        margin-right: -170px;
    }

    #sa__nav_menu_Login {
        width: 175px;
    }

    .saNav__bar {
        padding-left: 16px;
        padding-right: 16px;
    }

    .saNav__dropdownContent .saNav__container {
        width: 1200px;
    }
}

@media (max-width:1290px) {
    #sa__nav_menu_Login {
        width: 127px;
    }

    #divLoginContent .saNav__container {
        margin-right: 0;
    }

    .saNav__logo {
        background-size: 230px;
        width: 250px;
    }

    .saNav__grid {
        display: grid;
        grid-gap: 16px;
        padding: 16px;
        justify-items: start;
        align-items: center;
    }

    .saNav__grid--3 {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/** MOBILE STYLES *******************************************************************************************************************/
@media (max-width:1005px) {
    #divLoginContent {
        display: grid;
        margin-left: 16px;
    }

        #divLoginContent .saNav__container {
            margin-right: unset;
        }

    .saNav__mobileHide {
        display: none;
    }

    .saNav__logo {
        background-size: 140px;
        width: 150px;
        margin-left: 10px;
    }

    .saNav__login {
        font-size: 12px;
        line-height: 16px;
        letter-spacing: 0.75px;
    }

    .saNav__loginLink {
        padding-top: 34px;
        text-align: right !important;
    }

    .saNav__helloLink {
        margin-top: unset !important;
        margin-right: 12px;
        align-self: center;
        justify-self: left;
    }

    .saNav__mobileIcon {
        background-image: url("../Images/icons/chevron-right.svg");
        margin-top: 5px;
        height: 18px;
        width: 18px;
        float: right;
        display: revert;
    }

    .saNav__ReturnIcon {
        background-image: url("../Images/icons/chevron-back.svg");
        background-position: center;
        height: 18px;
        width: 18px;
        margin-right: 4px;
        margin-left: 16px;
    }

    #sa__nav_btn_Back {
        position: absolute;
        top: 77px;
        z-index: 2002;
    }

    .saNav__ReturnLink {
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        letter-spacing: 0.75px;
    }

    .saNav__header__link, .saNav__footer__link {
        padding: 6px 0;
        font-size: 16px;
        text-align: left;
    }

    .sa__nav_ham {
        display: block;
    }

    .saNav__bar {
        grid-template-columns: 1fr 1fr 71px;
        grid-template-rows: 88px 50px 50px 50px auto;
        grid-template-areas:
            "mLogo mLogin mMobile"
            "mCert mCert mCert"
            "mHowItWorks mHowItWorks mHowItWorks"
            "mResources mResources mResources"
            "mCTA mCTA mCTA";
        grid-gap: 0px;
        width: 100vw;
        padding-left: 0;
        padding-right: 0;
        overflow: hidden;
    }

    .navBar__open {
        height: 100vh;
    }

    .navBar__open_loggedIn {
        grid-template-rows: 88px 50px 50px 50px 50px auto;
        grid-template-areas:
            "mLogo . mMobile"
            "mLogin mLogin mLogin"
            "mCert mCert mCert"
            "mHowItWorks mHowItWorks mHowItWorks"
            "mResources mResources mResources"
            "mCTA mCTA mCTA";
        height: 100vh;
    }

    .saNav__container--LoggedIn {
        width: 100vw !important;
        margin-left: 0;
    }

    .saNav__footer {
        display: block;
    }

    .saNav__alogo {
        float: left;
    }

    .saNav__mobileMenu {
        display: block;
        float: right;
        margin-right: 16px;
        text-decoration: none;
    }

    #sa__nav_menu_Login {
        align-self: start;
        text-align: left;
        margin-top: unset;
        width: auto;
    }

    #sa__nav_menu_CTA {
        align-self: start;
        margin-top: 10px;
        border-bottom: unset;
        white-space: initial;
        text-align: center;
    }

    .saNav__argh {
        margin-top: 20px;
    }

    .saNav__dropdown {
        padding: 0 16px;
        text-align: left;
        border-bottom: 1px solid var(--saColorNeutral);
        font-size: 20px;
        max-height: unset;
        transition: all 0.50s ease-in-out .2s;
    }

    .saNav__dropdown--hidden {
        transition: all 0.1s ease-in-out 0s;
        visibility: hidden;
    }

    :root {
        --saNav__dropdownContentTop: 110px;
    }

    .saNav__dropdownContent {
        position: absolute;
        top: var(--saNav__dropdownContentTop);
        left: 100vw; /* Push off to the right so it slides in from right to left */
        visibility: hidden;
        width: 100vw;
        height: calc(100vh - var(--saNav__dropdownContentTop));
        background-color: var(--saColorWhite);
        transition: all 0.6s ease-in-out 0s;
    }

    .saNav__dropdownContent--aligned {
        position: absolute;
        width: unset;
        margin-top: unset;
    }

        .saNav__dropdownContent--aligned .saNav__container {
            padding: unset;
        }


    .saNav__dropdownContent_show {
        visibility: visible;
        left: 0; /* Slide in from the left */
        transition: all 0.6s ease-in-out 0s;
    }

    .saNav__section__header {
        margin-top: 24px;
        text-align: left;
        padding: unset;
        border-bottom: unset;
        color: var(--saColorBrandBlack);
    }

    .saNav__grid--3,
    .saNav__footer__inside,
    .saNav__footer__inside__a,
    .saNav__footer__inside__b {
        grid-template-columns: 1fr;
        padding: 0;
        grid-gap: 0;
    }

    .saNav__footer__inside {
        padding-top: 16px;
        grid-template-columns: 16px 10fr 16px;
        padding-bottom: 40px;
    }

    .saNav__footer__inside__a {
        grid-template-columns: 1fr;
    }

    .saNav__footer__inside__b {
        grid-template-columns: 1fr;
    }

    .saNav__grid {
        padding: 0;
    }

    .saNav__column--left,
    .saNav__column--middle,
    .saNav__column--right,
    .saNav__column--loggedin,
    .saNav__column--right--dark {
        padding: 0 16px 0 16px;
        width: 100vw;
    }

    .saNav__column--right--dark {
        padding: 16px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .saNav__dropdownContent .saNav__container {
        width: 100vw;
        position: relative;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        margin-top: -9px;
        border-radius: 0;
        box-shadow: unset;
        padding-bottom: 50px;
    }

    .saNav__links {
        padding: 6px 0;
        font-size: 18px;
        text-align: left;
    }

    .saNav__mobileSubmenu {
        overflow-x: hidden;
    }

    .saNav__notification__container {
        float: left;
        margin: 0px 15px 0px 0px;
    }

    .saNav__primaryButton, .saNav__secondaryButton {
        display: inline-block;
        width: 100%;
        min-width: 120px;
    }
}
/** MOBILE STYLES END ***************************************************************************************************************/

.saNav__footer__heading {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.5px;
    color: var(--saColorBrandBlack);
    margin-bottom: 8px;
}