/* ol:/ui/extranet-2/style/header-pulldown-menu.css */
/**
 * @file: header-pulldown-menu.css
 * @about: Contains positioning and layout of the pulldown menu's and content (located in the Extranet header)
 */

/**
 * Generic settings (eg. layout of bubbles)
 */

.header-pulldown-menu {
    position: relative;
}

#sec-nav .mr-quick-search-button,
.header-pm-hint {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0);
    padding: 0;
    box-sizing: content-box;
    text-align: center;
    font: normal 12px/24px Arial, sans-serif;
    color: #222;
    background-repeat: no-repeat;
    background-position: center;
    background-color: unset;
    background-size: 21px;
    cursor: pointer;
    filter: none;
}

/** mod Implementation issues */
.header-pm-hint.issues--issue::after,
.header-pm-hint.issues--blocker::after {
    content: '';
    position: absolute;
    display: block;
    top: 1px;
    right: 5px;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background-color: #ff9800;
}

@keyframes poing {
    0%, 7%, 20%  {
        transform: scaleY(1);
    }
    5% {
        transform: scaleY(.9);
    }
    10%  {
        transform: translateY(-3px) scaleY(1.2);
    }
    13% {
        transform: translateY(-5px) scaleY(1);
    }
    18% {
        transform: translateY(0) scaleY(.9);
    }
}

.header-pm-hint.issues--blocker::after {
    background-color: #e92943;
    animation: poing 3s 5 cubic-bezier(.45,.75,.45,2) 2s;
    transform-origin: bottom;
}

.header-pm-user-preferences .issues--issue a,
.header-pm-user-preferences .issues--blocker a {
    background: #ff980066 url(##pathui##/img/alert-circle.svg) no-repeat calc(100% - 7px) 50% / 13px;
}

.header-pm-user-preferences .issues--blocker a {
    background-color: #fbdbe0;
}

.relationQuickSearch__toggler,
#sec-nav .mr-quick-search-button {
    text-indent: -999em;
    background-image: url(../img/search-users.svg);
}

.relationQuickSearch__toggler--loading {
    background-image: url(../img/search-users-spin.svg);
}

.admin-actions .header-pm-hint {
    text-align: left;
    text-indent: -999em;
    background-image: url(../img/admin.svg);
}

.help-menu-hint {
    position: relative;
    text-align: left;
    text-indent: -999em;
    background-image: url(../img/book-question.svg);
}

.header-pm-hint:hover,
.mr-quick-search-button:hover,
.open > .header-pm-hint,
.open > .mr-quick-search-button {
    color: #fff;
    border-color: transparent;
    background-color: #e6e6e6;
    box-shadow: 0 0 0 3px #e6e6e6;
}

.header-pm-hint--outlineHidden {
    outline: none;
}

.help-menu-hint-new::after {
    content: '';
    position: absolute;
    display: block;
    top: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: #fa6400;
}

.header-pm-bubble {
    display: none; /** show/hide by javascript */
    position: absolute;
    top: 28px;
    right: -8px;
    min-width: 150px;
    border-radius: 4px;
    background: #fff;
    box-shadow: var(--mi-shdw-4);
}

/** Open pulldown menu's */
.header-pulldown-menu.open:before,
.header-pulldown-menu.open:after {
    position: absolute;
    bottom: -3px;
    right: 7px;
    content: "";
    border: 5px solid rgba(0,0,0,0);
    border-bottom-color: #ddd;
}

.header-pulldown-menu.open:after {
    bottom: -5px;
    border-bottom-color: #fff;
}

.header-pulldown-menu.open .header-pm-bubble {
    display: block;
}

.no-js .header-pulldown-menu:hover .header-pm-bubble {
    display: block;
}

.help-menu.open {
    border-color: transparent;
    box-shadow: none;
}

/**
 * .account-login
 * Pulldown menu that contains login / account information and user settings (eg. chosen language)
 */

.account-login-icon {
    color: #fff !important;
    background-color: #222 !important;
    background-size: 30px !important;
    box-shadow: none !important;
}

.account-login-icon-impersonate {
    background-size: 16px !important;
}

.impersonator-hint {
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999;
    transition: transform .2s 1s;
    transform-origin: right;
    padding: 0 .3em;
    border-radius: 0 0 0 .2em;
    white-space: nowrap;
    font-size: 10px;
    background: #ffce0a;
}

.impersonator-hint:hover {
    transform: scale(1.4);
}

.--depersonate .impersonator-hint {
    display: none;
}

.--depersonate .account-login-icon-impersonate {
    background-size: 30px !important;
}

/** User preferences */
.header-pm-user-preferences li {
    display: block;
}

.header-pm-user-preferences > li:first-child {
    margin-top: 10px;
}

.header-pm-user-preferences li:last-child {
    margin-bottom: 10px;
}

.header-pm-user-preferences .separator-before {
    margin: 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
}

div#sec-nav .header-pm-user-preferences .separator {
    margin: 5px 0 0 0;
    padding-top: 5px;
    border-top: 1px solid #ccc !important; /** Specificity wars: border-color is set with !important in prodesign token :'( */
}

.header-pm-user-preferences li > a,
.header-pm-user-preferences li > span {
    display: block;
    padding: 4px 20px;
    white-space: nowrap;
    text-decoration: none;
    color: inherit;
}

.header-pm-user-preferences > li:nth-child(n+2) > span {
    font-weight: bold;
}

.header-pm-user-preferences a:hover {
    background-color: #eee;
}

.header-pm-subtitle {
    display: block;
    font-size: .8em;
}

/** Languages */
.header-pm-user-preferences .current a {
    background: transparent url(##pathui##/img/check.svg) no-repeat 3px 50%;
    background-size: 14px;
}

/**
 * .help-menu
 * Contains platform information and page help
 */

.help-menu .header-pm-bubble {
    min-width: 300px;
}

/** Sections */
.header-pm-section {
    padding: 3px 20px;
}

.header-pm-section-platform-info {
    padding-top: 15px;
}

.header-pm-section-page-help {
    padding: 0;
}

/** Page help grid, positioning and layout of container elements */
.header-pm-section-page-help {
    z-index: 5000;
    overflow: hidden;
    top: 135px;
    bottom: 600px;
    max-height: 35px;
    padding: 0;
    border-top: 1px solid #ddd;
    background: #f2f2f2;
    transition: top .15s ease-in-out, bottom .2s ease-in-out, max-height .2s ease-out .1s;
}

.pagehelp-visible {
    position: fixed;
    top: 10px;
    bottom: 10px;
    width: 304px;
    margin-left: -2px;
    max-height: 2000px;
    box-shadow: 0 7px 5px -7px rgba(0,0,0,0.25), 0 1px 9px rgba(0,0,0,0.3);
}

.container-pagehelp-content {
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    width: 300px;
    height: 95%;
    padding: 10px 20px;
}

.pagehelp-visible .container-pagehelp-content {
    background:
        /* Shadow covers */
    linear-gradient(#f8f8f8 30%, rgba(228,237,244,0)),
    linear-gradient(rgba(228,237,244,0), #f8f8f8 70%) 0 100%,

        /* Shadows */
    radial-gradient(50% 0, farthest-side, rgba(0,0,0,.15), rgba(0,0,0,0)),
    radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.15), rgba(0,0,0,0)) 0 100%;
    background:
        /* Shadow covers */
    linear-gradient(#f8f8f8 30%, rgba(228,237,244,0)),
    linear-gradient(rgba(228,237,244,0), #f8f8f8 70%) 0 100%,

        /* Shadows */
    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.15), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.15), rgba(0,0,0,0)) 0 100%;
    background-repeat: no-repeat;
    background-color: #f8f8f8;
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;

    /* Opera doesn't support this in the shorthand */
    background-attachment: local, local, scroll, scroll;
}

.container-pagehelp-toggler {
    display: block;
    padding: 10px 20px;
    font: bold 13px/14px Arial, sans-serif;
    cursor: pointer;
}

.container-pagehelp-toggler:after {
    float: right;
    font: bold 22px/14px arial;
    content: "\203a";
    transform: rotate(90deg);
    transition: transform .2s;
}

.pagehelp-visible .container-pagehelp-toggler:after {
    content: "\00d7";
    font-size: 14px;
    transform: rotate(0deg);
}

/** Markup of page help content */
.container-pagehelp-content {
    line-height: 1.5;
}

.container-pagehelp-content p,
.container-pagehelp-content ul,
.container-pagehelp-content ol {
    margin-bottom: 1em !important; /** Selector wars: Overriding way too specific id selectors */
}

/** fix unordered lists in page help, because of nav styling on 'div#sec-nav ul' */
div#sec-nav .container-pagehelp-content ul {
    margin-left: 2em;
    list-style: disc;
}

.container-pagehelp-content img {
    max-width: 100%;
    height: auto;
}

.container-pagehelp-content iframe {
    max-width: 100%;
}