/* HEADER STYLES FOR REFERENCE DOCS

   developer:   suef
   requires:    /common/framework/css/framework.en.css
                /language-assets/css/global.css
   ========================================================================== */

.main #searchlink p, .inner { max-width: 960px; margin: 0 auto; position: relative; padding: 0 12px; }
.topContentWrap { height: 36px; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.header { background: #414141; overflow: hidden; outline: 1px solid transparent; }
.header .inner { padding: 1rem 12px 1.2rem; }
.header .header-link { display: inline-block; vertical-align: middle; }
.header .header-link span { font-size: 1.6rem; font-weight: 300; line-height: 1.26; display: block; }
.header .heading1 { color: #fff; }
.header .heading2 { color: #b7b7b7; }
.header .header-link:hover span { color: #fff; }
.header .right { float: right; top: .7rem; position: relative; text-align: right; width: 40.5%; }
.header a.language-home:before { content: ''; background: url('../img/wolf-icon2x.png') no-repeat left bottom; background-size: 18px 36px; display: inline-block; width: 18px; height: 18px; vertical-align: top; margin: 1px .3rem 0 0; opacity: .6; }
a.language-home { font-weight: 300; font-size: .82rem; top: .5rem; position: relative; padding: 0; line-height: 21px; color: #222; opacity: .5; }
a.language-home:hover { opacity: 1; }
.header .right a.language-home { color: #ddd; margin: .5rem 0 0 0; }
.header .right a.language-home:hover { color: #fff; }
footer a.language-home { display: none; }
.header .search { display: block; position: relative; height: 26px; margin: auto; }
.header .search #query { color: #888; font-weight: 300; width: 100%; padding: 3px 27px; background: #535353; border: 1px solid #676767; border-radius: 4px; }
input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px #535353 inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #fff;
}
input:-webkit-autofill:focus {
    -webkit-box-shadow: /*your box-shadow*/,0 0 0 50px #535353 inset;
    -webkit-text-fill-color: #fff;
} 
.header .search #query:focus, .header .search #query.term-found { color: #fff; }
.header .search #query::-ms-input-placeholder { color: #888; font-weight: 400; }
.header .search .clearfield { display: none; background: url('../img/close-btn2x.png') no-repeat transparent !important; background-size: 13px 13px !important; border: 0; width: 13px; height: 13px; position: absolute; top: 2px; bottom: 0; margin: auto; right: 10px; opacity: .5; }
.header .search .clearfield:hover { opacity: 1; color: #fff; border-color: #fff; }
.header .search #query::-ms-clear { display: none; width:0; height:0; }
#search-button { background-color: transparent; position: absolute; border: 0; font-size: 0; left: 7px; top: 0; bottom: 0; margin: 7px 0; opacity: .4; }
#search-button:hover { opacity: 1; }

#searchlink, #spelling_container { text-align: left; line-height: 27px; background: #676767; padding: 5px 0; }
#searchlink p, #spelling_container span { font-size: 13px; color: #fff; font-family: Arial, Verdana, sans-serif; }
#searchlink a, #spelling_container a { text-decoration: underline; color: #fff; font-family: Arial, Verdana, sans-serif; }
.spelling_alert { max-width: 960px; margin: 0 auto; padding: 0 1rem; }

.main-title-top { color: #848484; font-size: 1.27rem; font-weight: 600; top: -1.2rem; position: absolute; display: block; }

.iconography .new { top: 1rem; position: relative; }

.sticky .main-title-top { font-size: 1.05rem; top: .15rem; }
.sticky .main-title-top + .main-title { margin: 1rem 0 0; bottom: -5px; position: relative; }
.sticky .main-title { font-size: 1.7rem; margin: 0; }
.main-title + img[width="9"] { display: none; }
.sticky .iconography .new { position: absolute; right: 0; top: 1rem; font-size: .9rem; }
.sticky .iconography { float: none; height: auto; min-height: 28px; }
.sticky .iconography .experimental { top: -7px; font-size: .8rem; }
.sticky .iconography .updated { display: none; }

.make-room { margin: 3rem 0 1.07rem; }
.make-room .main-title-top { top: -1.3rem; }
.make-room .iconography .experimental { top: -2.7rem; }
.sticky .make-room.main-heading { margin: 1.2rem 0 .8rem; }
.sticky .make-room .main-title-top { top: -.2rem; }
.sticky .make-room .iconography .experimental { top: -1.4rem; }
.sticky .make-room .iconography .new { top: 1.5rem; }

/* ==========================================================================
   BADGE
   ========================================================================== */
.badge { display: inline-block; padding: 6px 20px; font-size: .75rem; text-transform: uppercase; color: #fff; vertical-align: top; background: #848484; white-space: nowrap; }
.function .badge { background: #136eb7; }
#guide .badge, .howto .badge, #overviewGuide .badge { background: #d96500; }
#techNote .badge, .tutorial .badge, #tutorialOverview .badge { background: #be5324; }
.message .badge { background: #dd1100; }
.c .badge { background: #3f7f1f; }
.program .badge { background: #42821f; }
.package .badge, #package .badge { background: #608bab; }

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.dropdown { float: right; outline: 1px solid transparent; }
.dropdown > li { display: inline-block; list-style: none; }
.dropdown .sub_menu { display: none; max-height: 80vh; overflow: auto; }
.dropdown a.menu { color: #646464; display: inline-block; padding: 6px 15px 6px 10px; line-height: 1; font-size: .9rem; }
.dropdown a.menu:hover {  }
.dropdown a.menu:after { right: -4px; position: relative; content: ''; background-image: url('../img/dropdown.svg'); background-position: center center; background-repeat: no-repeat; background-size: contain; display: inline-block; width: 10px; height: 10px; left: 6px; top: 0; }


.dropdown .menu:before { display: none; }
.dropdown li:hover .menu:after { filter: hue-rotate(225deg); }
.dropdown .hover .menu, .dropdown .hover .menu:hover { color: #fff !important; background-color: #d96500; }
.dropdown .hover:hover .menu:after { filter: brightness(0) invert(1);  }
.dropdown .hover .sub_menu { background: #fff; font-size: .94rem; position: absolute; display: block; border: 1px solid #d9d9d9; padding: .35rem 0 .6rem; z-index: 10; min-width: 150px; }
.dropdown .sub_menu a { display: block; padding: .37rem 1.04rem; white-space: nowrap; }
.dropdown .sub_menu a:hover { color: #d96500; }
.dropdown .edge { position: relative; }
.dropdown .edge .sub_menu { right: 0; left: auto; position: absolute; }
.dropdown .right-edge { position: relative; }
.dropdown .right-edge .sub_menu { left: 0; right: auto; position: absolute; }
.dropdown .see-also + .sub_menu a, .dropdown .functions + .sub_menu a { font-weight: 600; }

/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */

/* styles for large screens (1200px)
   ========================================================================== */

@media all and (max-width: 1200px) {
    .badge { font-size: .8rem; }
    .header a.language-home, a.language-home { font-size: .875rem; }
}
/* styles for medium screens (900px)
   ========================================================================== */

@media all and (max-width: 900px) {
    .header .right { width: 195px; top: .25rem; }
    .make-room .main-title-top { top: -1.2rem; }
    .sticky .make-room .main-title-top { font-size: 1rem; }
}

/* styles for small screens (600px)
   ========================================================================== */

@media all and (max-width: 600px) {
    .main .header span.heading1, .main .header span.heading2 { font-size: 1rem; }
    .main .header span.heading1 { text-transform: uppercase; }
    .main .header .inner { padding: .5rem 12px .5rem; }
    .main .header .right { display: inline-block; }
    .main .header .search { display: none; }
    .main .header .right a.language-home { font-size: 0; display: inline-block; top: 0; position: relative; margin: 0; }

    .main-heading { margin: 1rem 0; }
    .topContentWrap + .main-title { margin: 1rem 0; }
    .main-title { font-size: 2.3rem; }

    .make-room { margin: 2.7rem 0 0; }
    .make-room .main-title-top { top: -16px; }
    .make-room .iconography .experimental { top: -2.5rem; }

    .iconography { height: auto; }

    .iconography .new { right: 12px; top: -1.1rem; text-align: right; position: absolute; width: 100%; }

    .sticky .iconography { float: right; min-height: auto; }

    .sticky .main-title-top { top: .3rem; }
    .sticky .main-title { margin: 0; }
    .sticky .main-heading { margin: 0 0 1.5rem; padding: 0; }
    .sticky .iconography .experimental { top: -.7rem; }
    .sticky .iconography .new { top: 0; right: 12px; }
    .sticky .main-title-top + .main-title { bottom: -8px; position: relative; }

    .sticky .make-room.main-heading { margin: .5rem 0 1.3rem; }
    .sticky .make-room .main-title-top { top: 2px; }
    .sticky .make-room .iconography .experimental { top: -.6rem; }
    .sticky .make-room .iconography .new { top: 0; }
}
@media all and (max-width: 500px) {
    .main-heading-wrapper h1 { font-size: 2rem; padding: 0 12px; }
    .main-heading-wrapper .inner { padding: 0 !important; }
    .main-heading { padding: 0; }
    .main-title-top { left: 12px; }
    .sticky .main-title-top { left: 12px; top: auto; }
    .sticky .main-title-top + .main-title { top: 0; }
    .topContentWrap.collapsed { position: relative; padding: 0; }
    .badge { padding-left: 5px; padding-right: 5px; margin: 0 0 0 12px; }
    .workflow-tabs li { margin: .55rem -4px 0 0; }

    .iconography .experimental { left: 12px; }
    .iconography .new { font-size: 1rem; }

    .collapsed.open { background: #e5e5e5; }
    .collapsed .dropdown { top: 30px; position: absolute; right: 0; visibility: hidden; }
    .topContentWrap .dropdown.hide { display: inline-block !important; visibility: hidden; }
    .square { display: inline-block !important; background: #a6a6a6; width: 3px; height: 3px; margin: 0 3px 0 0; }
    .collapsed .collapsed-dropdown { top: 0; right: 4px; font-size: 1.4rem; position: absolute; width: 2.5rem; height: 2.5rem; line-height: .35; cursor: pointer; text-align: center; padding: 8px 3px; margin: 0; z-index: 100; }
    .collapsed .collapsed-dropdown:hover .square { background: #898989; }
    .collapsed .collapsed-dropdown.open .square { background: #898989; }
    .collapsed .collapsed-dropdown:active .square { background: #646464; }
    .collapsed .collapsed-dropdown.open:hover .square { opacity: .5; }
    .collapsed .collapsed-dropdown.open + .dropdown { display: block; visibility: visible; background: #e5e5e5; width: 110%; position: absolute; left: 0; right: 0; padding: .3rem 1rem; top: 30px; z-index: 10000; margin: 0; border-bottom: 1px solid #d5d5d5; }
    .sticky .collapsed .collapsed-dropdown.open + .dropdown { left: 0; }

    .dropdown .sub_menu, .dropdown .right-edge .sub_menu { left: 0; right: 0; margin: 0 auto; position: fixed; }
    .dropdown .right-edge { position: static; }
}