.mdl-layout__header {
    z-index: 90;
}

.mdl-layout__drawer-button {
    height: 50px;
    width: 48px !important;
    left: 14px;
    margin: 6px 0 6px 0 !important;
    outline: none;
    z-index: 105;
}

    .mdl-layout__drawer-button > img {
        margin-bottom: 2px;
    }

.mdl-layout__content {
    z-index: auto;
}

.mdl-layout__header-row {
    padding: 0 32px 0 32px !important;
    height: 64px !important;
}

.mdl-navigation {
    padding-top: 0 !important;
}

.mdl-navigation__link {
    line-height: 22px;
    vertical-align: middle;
}

    .mdl-navigation__link:hover {
        background-color: #eee !important;
        right: 8px;
        text-decoration: none;
        cursor: pointer;
        z-index: 2000;
    }

h3 {
    font-size: 24px;
}

.mdl-layout-title {
    cursor: pointer;
    letter-spacing: normal;
    font-weight: 500;
}

.mdl-layout__obfuscator {
    z-index: 70 !important;
}

.aim-slim-header-menu {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    float: right;
    padding: 12px;
    outline: none;
}

    .aim-slim-header-menu > img {
        width: 24px;
        pointer-events: none;
    }

    .aim-slim-header-menu:hover {
        cursor: pointer;
    }

    .aim-slim-header-menu > svg:not([fill]) {
        fill: currentColor;
    }

.aim-slim-header-window-background {
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 2000;
}

.aim-slim-header-tooltip {
    display: none;
    position: fixed;
    padding: 8px;
    color: #fff;
    background-color: rgba(97,97,97,.9);
    border-radius: 2px;
    font-size: 10px;
    line-height: 14px;
    font-weight: 500;
    z-index: 999;
    text-align: center;
}

    .aim-slim-header-tooltip.account-tooltip {
        right: 20px;
        color: #000000;
        background-color: #ffffff;
    }

    .aim-slim-header-tooltip > .tenant-name {
        display: inline-block;
        width: 100%;
        white-space: nowrap;
        padding: 2px;
    }

    .aim-slim-header-tooltip .user-name {
        display: inline-block;
        width: 100%;
        white-space: nowrap;
        padding: 2px;
    }

.aim-slim-header-suite-menu-window {
    position: absolute;
    top: 40px;
    display: block;
    background-color: #fff;
    margin: 24px 0 0 0;
    padding: 16px;
    box-shadow: 0 1px 15px rgba(0,0,0,.4);
    -moz-box-sizing: content-box !important;
    -webkit-box-sizing: content-box !important;
    box-sizing: content-box !important;
}

    .aim-slim-header-suite-menu-window:after, .aim-slim-header-suite-menu-window:before {
        bottom: 100%;
        right: 12px;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .aim-slim-header-suite-menu-window:after {
        border-bottom-color: #fff;
        border-width: 12px;
        margin-left: -12px;
    }

    .aim-slim-header-suite-menu-window:before {
        border-bottom-color: rgba(0,0,0,.54);
        border-width: 13px;
        margin-left: -13px;
    }

    .aim-slim-header-suite-menu-window > div {
        display: inline-block;
        height: 110px;
        width: 110px;
        margin: 10px;
    }

        .aim-slim-header-suite-menu-window > div:hover {
            cursor: pointer;
        }

        .aim-slim-header-suite-menu-window > div > .menu-picture {
            height: 80%;
            width: 56%;
            margin-left: 22%;
            margin-right: 22%;
        }

        .aim-slim-header-suite-menu-window > div > .menu-label {
            font-size: 12px;
            text-align: center;
            vertical-align: middle;
            height: 20%;
            width: 100%;
        }

.aim-title {
    font-size: 24px;
    width: 50%;
    line-height: normal;
}

.aim-trademark {
    font-size: 12px;
    vertical-align: 72%;
    line-height: 12px;
}

.mdl-layout__drawer {
    background-color: #fff;
    overflow-x: hidden;
    z-index: 80;
    width: 279px;
    -moz-transform: translateX(-279px);
    -ms-transform: translateX(-279px);
    -o-transform: translateX(-279px);
    -webkit-transform: translateX(-279px);
    transform: translateX(-279px);
}

.mdl-navigation__link.withIcon {
    padding: 12px 12px 12px 22px !important;
    color: rgba(0,0,0,.87) !important;
    font-weight: 400;
    font-size: 15px;
    letter-spacing: .01em;
}

    .mdl-navigation__link.withIcon > img {
        position: relative;
        top: -2px;
        height: 24px;
        width: 24px;
        color: rgba(0,0,0,.54);
        margin-right: 18px;
    }

.mdl-navigation__link.openInNewWindow::after {
    content: url('/Images/GoogleMaterialIcons/ic_open_in_new_gray_24px.svg');
    float: right;
    transform: scale(.6);
    margin-top: -3px;
    margin-bottom: -3px;
}

.aim-drawer-main {
    margin-top: 64px;
    padding-top: 20px !important;
    padding-bottom: 0 !important;
    width: 279px;
    background: #fff;
    z-index: 2;
}

    .aim-drawer-main > .group {
        border-top: 1px solid #cecece;
        margin-top: 20px;
    }

        .aim-drawer-main > .group > .group-name {
            color: #757575;
            font-size: 12px;
            padding: 16px 0 12px 24px;
        }

.aim-drawer-footer {
    position: absolute;
    bottom: 0;
    width: 279px;
    background: #fff;
    z-index: 1;
}

.aim-drawer-footer-image-container {
    margin-top: 10px;
    text-align: center;
}

.aim-drawer-footer-image {
    margin: 0 auto 0 auto;
    max-width: 240px;
    max-height: 75px;
}

.aim-drawer-copyright {
    color: rgba(0,0,0,.38) !important;
    font-weight: 400;
    font-size: 11px;
    margin-top: 24px;
    text-align: center;
}

.aim-slim-header-account-menu-window {
    position: absolute;
    top: 56px;
    display: block;
    background-color: #fff;
    margin: 8px 0 8px 0;
    box-shadow: 0 1px 15px rgba(0,0,0,.4);
    -moz-box-sizing: content-box !important;
    -webkit-box-sizing: content-box !important;
    box-sizing: content-box !important;
}

    .aim-slim-header-account-menu-window > ul {
        list-style-type: none;
        margin: 0;
        padding: 0 0 16px 0;
    }

        .aim-slim-header-account-menu-window > ul > li {
            display: block;
            padding: 0 24px 0 24px;
            height: 48px;
            line-height: 48px;
            cursor: pointer;
            vertical-align: middle;
            outline: none;
        }

            .aim-slim-header-account-menu-window > ul > li:hover {
                background-color: #e2eff8;
            }

            .aim-slim-header-account-menu-window > ul > li > a {
                display: inline-block;
                min-width: 170px;
                color: rgba(0,0,0,.87);
                text-decoration: none;
                outline: none;
                white-space: nowrap;
            }

                .aim-slim-header-account-menu-window > ul > li > a > img {
                    margin-left: 0;
                    margin-right: 20px;
                }

.aim-slim-header-account-menu-dropdown-separator {
    height: 0;
    height: 2px !important;
    border-bottom: 1px solid #cfcfcf;
}

.aim-page-header {
    word-wrap: break-word;
    border-bottom: 1px solid #d2d6d9;
    margin-left: 0;
    margin-right: 0;
    margin-top: 20px;
}

.aim-page-header > div {
    padding-left: 0;
    padding-right: 0;
}

/*#region Header and drawer menu branding styles */

.mdl-layout__header svg {
    fill: #F4F4f4;
    /*
    This is to fix toggling issues with inline svg.
    When clicking on same button to collapse it, if the pointer-event is not set to 'none',
    the svg will get the event (instead of the button/div) so the logic that check if the same button was clicked will fail.
*/
    pointer-events: none !important;
}

.mdl-layout__header {
    background-color: var(--header-background-color);
    color: var(--header-foreground-color);
}

.aim-slim-header-suite-menu-window > div {
    background-color: #0F76C7;
    color: #F4F4f4;
}

    .aim-slim-header-suite-menu-window > div:hover {
        background-color: #009AF7;
    }

    .aim-slim-header-suite-menu-window > div > svg {
        fill: #F4F4f4;
    }

/*#endregion Header and drawer menu branding styles */

/*#region Common Branding Styles */

.insight-branded-logo-content-url {
    /* deprecated: this is not working with edge and IE,
    use insight-branded-logo-content-url-background instead
    And do not specify value for hte image src.
*/
    content: url('/explore/Controls/Common/Images/Logo-Home-aimInSight-text.svg');
}

.insight-branded-logo {
    background: url('/explore/Controls/Common/Images/Logo-Home-aimInSight-text.svg');
    background-size: contain;
    background-repeat: no-repeat;
    height: 80px;
    width: 304px;
}

.branded-accent-color {
    color: #03A9F4;
}

.branded-hover-accent-color:hover {
    color: #03A9F4;
}

.branded-accent-background-color {
    background-color: #03A9F4;
}

.branded-hover-accent-background-color:hover {
    background-color: #03A9F4;
}

.aim-username {
    font-family: Roboto;
    font-weight: 400;
    float: right;
    padding-top: 8px;
}

.ads-typography--product-name {
    text-align: left;
    font: normal  normal 500 24px/29px Barlow;
    letter-spacing: 0;
    color: rgba(0, 0, 0, 204);
    opacity: 1;
}

.ads-typography--headline2 {
    text-align: left;
    font: normal normal 300 36px/40px Barlow;
    letter-spacing: -0.01px;
    color: rgba(0, 0, 0, 255);
    opacity: 0.9;
}

.ads-typography--headline3 {
    font-family: Barlow, sans-serif;
    font-weight: 400;
    /* font-size: 28px; */
}

.ads-typography--body1 {
    font-family: Roboto, sans-serif;
    font-weight: 400;
    /* font-size: 16px; */
}

.ads-typography--body2 {
    font-family: Roboto, sans-serif;
    font-weight: 400;
    /* font-size: 14px; */
}

.ads-typography--button {
    font-family: Roboto, sans-serif;
    font-weight: 500;
    /* font-size: 14px; */
}

/*#endregion Common Branding Styles */