/* HEADER STYLES FOR REFERENCE DOCS

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

.main > header, .main > section, .main > div { padding: 0 3% !important; }
.main #searchlink p, .inner { max-width: 1000px; margin: 0 auto; position: relative; }
/* temporary until build has structures */
.main-content.inner { max-width: 1000px !important; margin-left: auto; margin-right: auto; padding: 0 !important; }
#guide .main > *:not(header):not(section):not(.sticky):not(.main-heading-wrapper) { margin-left: auto; margin-right: auto; }

.inner > .hideable { padding: 0 0 .5rem; }

.topContentWrap { 
   min-height: 40px; 
   padding: 0; z-index: 10; 
   display: grid;
   grid-template-columns: minmax(auto,150px) auto;
   grid-template-areas: "left right";
}

.main-heading-wrapper, .main-heading-wrapper.sticky { top: 42px; }
.workflow .main-heading-wrapper.sticky { background: #e5e5e5; }
.sticky .main-heading-wrapper.open { height: 40px; background: #e5e5e5; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.header { background: #414141; outline: 1px solid transparent; }
.header .inner { padding: 1rem 0 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: 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 { text-align: left; color: #fff; line-height: 27px; background: #676767; padding: 5px 3% !important; }
#spelling_container { margin: 5rem 0 -2.5rem; background: #fff; }
#searchlink p, #spelling_container span { font-size: 13px; font-family: Arial, Verdana, sans-serif; }
#searchlink a { text-decoration: underline; color: #fff; font-family: Arial, Verdana, sans-serif; font-weight: 600; }
#spelling_container a { color: #d07124; font-family: Arial, Verdana, sans-serif; font-weight: 600; }
#spelling_container a:hover { color: #f77700; }
#searchlink p { color: #fff; }
#spelling_container .suggestions { color: #d07124; }
.spelling_alert { max-width: 960px; margin: 0 auto; padding: 0 1rem; }

.main-title-top { color: #848484; font-size: 1.27rem; font-weight: 600; bottom: -7px; position: relative; display: block; }

.sticky { top: 0; }
.main-title + img[width="9"] { display: none; }
.sticky .iconography, .sticky .badge, .sticky .main-heading a { display: none; }
.sticky h1 .special-character.FilledRightTriangle { font-size: 1rem; }

/* ==========================================================================
   BADGE
   ========================================================================== */
.badge { grid-area: left; text-align: center; align-self: baseline; display: inline-block; padding: 6px 8px; font-size: .75rem; text-transform: uppercase; color: #fff; vertical-align: top; background: #848484; }
.function .badge, .blockchain .badge { background: #136eb7; }
#guide .badge, #galleryguide .badge, .howto .badge, #overviewGuide .badge { background: #d96500; }
#techNote .badge { background: #6276b3; }
#tutorial .badge, #tutorialOverview .badge { background: #be5324; }
#monograph .badge, #monograph .badge, #monographOverview .badge { background: #ce7c58; }
.message .badge { background: #dd1100; }
.c .badge, .man-page .badge { background: #3f7f1f; }
.program .badge { background: #42821f; }
.package .badge, #package .badge { background: #608bab; }
.entity .badge { background: #fee3b8; color: #653510; }
.workflow .badge { background: #37a8ac; }

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.dropdown { float: right; outline: 1px solid transparent; text-align: right; height: 30px; overflow: hidden; }
.dropdown > li { display: inline-block; list-style: none; }
.dropdown .sub_menu { display: none; max-height: 80vh; overflow: auto; text-align: left; }
.dropdown a.menu { color: #646464; display: inline-block; padding: 7px 15px 7px 10px; line-height: 1; font-size: 14px; border-radius: 3px; margin: 2px 2px 0 0; white-space: nowrap; }
.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 .hover .menu, .dropdown .hover .menu:hover, .dropdown a.menu:hover { color: #fff !important; background-color: #d96500; }
.dropdown .hover .menu:after, .dropdown a.menu:hover: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: 12; min-width: 150px; border-radius: 3px; }
.dropdown .sub_menu a { display: block; padding: .37rem 1.04rem; white-space: nowrap; }
.dropdown .sub_menu a:hover { color: #d96500; }
.dropdown .edge .sub_menu { right: 0; left: auto; }
.dropdown .right-edge .sub_menu { left: auto; right: 0; }
.dropdown .see-also + .sub_menu a, .dropdown .functions + .sub_menu a { font-weight: 600; }

.dropdown .sub_menu hr { background: #ddd; border: 0; height: 1px; margin: .37rem 1.04rem 0; }
.dropdown .other { color: #848484; padding: .37rem 1.04rem; }

/* Collapsed */
.collapsed.open .dropdown .hover .sub_menu { display: block;}
.collapsed-dropdown { 
   grid-area: right; 
   border-radius: 3px; 
   height: 25px; 
   width: 25px; 
   top: 0; 
   right: 0;
   margin: 5px 0; 
   justify-self: center;
   text-align: center; 
   vertical-align: middle; 
   position: relative; 
   display: none; 
   z-index: 10; 
}

.sticky .collapsed-dropdown { top: 0; }
.collapsed-dropdown:hover, .collapsed-dropdown.open { background: #d96402; }
.collapsed-dropdown:hover .square, .collapsed-dropdown.open .square { background: #fff; }
.collapsed-dropdown:active { background: #d96402; }
.collapsed-dropdown:active .square { background: #fff; }
.square { width: 3px; height: 3px; margin: 12px 3px 0 0; vertical-align: top; background: #333; display: inline-block; }
.square:last-of-type { margin: 12px 0 0 0; }
.topContentWrap .dropdown { 
   width: 100%;
   align-self: center;
   left: 0;
   right: 0px;
   align-self: ;
   margin: ;
   margin-right: 0; 
   grid-area: right;
}

.sticky .topContentWrap { 
   z-index: 0; 
   position: relative; 
   display: grid;
   margin: 0; 
   padding: 0; 
   float: none;
   grid-template-columns: auto;
}

.sticky.collapsed .collapsed-dropdown { top: 2px; }
.sticky .main-heading { margin: 0; }
.sticky .main-heading h1, .sticky .main-heading .main-title {
    /* white-space: normal; */
    line-height: 40px;
    /* max-width: 95%; */
    text-overflow: ellipsis;
}
.main-heading-wrapper.sticky { height: auto; }
.main-heading-wrapper.sticky .inner {
  display: grid;
  grid-template-columns: 1fr auto;
}

.main-heading-wrapper.sticky .inner .topContentWrap {
  order: 2;
}

/* ==========================================================================
   Topic Overview links to core-areas
   ========================================================================== */

.topic-overview-link {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    width: 98px;
    height: auto;
    margin-left: 38px;
    margin-top: 7px;
    justify-items: center;
    align-self: start;
    gap: 6px;
    margin-bottom: 4px;
}

:lang(ja) .topic-overview-link {
    width: 105px;
}

.topic-overview-text {
    color: #444;
    text-align: center;
    font-size: 12px;
    grid-column: 1;
    grid-row: 2;
    white-space: nowrap;
}

.topic-overview-link:hover .topic-overview-text {
    color: #f77700;
}

.topic-overview-link > img {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    width: 48px;
    height: 30px;
}

.topic-overview-chevron {
    color: #f77700;
}

.topic-overview-link img {
    border: 1px solid #e7e7e7;
}

.topic-overview-link:hover img {
    border-color: #ff7700;
    opacity: 0.8;
}

@media all and (max-width: 600px) {
    .topic-overview-link {
        grid-row: 2;
    }
}

@media all and (min-width: 601px) {
    .topic-overview-link + .iconography-wrapper {
        grid-row: 4;
    }
}

/* ==========================================================================
   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; }
    #monograph .sticky .main-heading { padding: 0; }
}
/* styles for medium screens (900px)
   ========================================================================== */

@media all and (max-width: 900px) {
    .header .right { width: 195px; top: .25rem; }
}

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

@media all and (max-width: 600px) {
    .main > header, .main > section, .main > div { padding: 0 12px !important; }
    .main > div.main-heading-wrapper { padding: 0 !important; }
    .badge { margin-left: 12px !important; }
    .main .header span.heading1, .main .header span.heading2 { font-size: 1rem; }
    .main .header span.heading1 { text-transform: uppercase; }
    .main .header .inner { padding: .5rem 0 .5rem !important; }
    .main-heading-wrapper.sticky .inner { grid-template-columns: calc(100% - 50px) 50px; }

   
    .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-wrapper.open .topContentWrap {
      grid-template-columns: minmax(auto,150px) auto minmax(auto,50px);
      row-gap: 0;
      grid-template-areas: 
      "left center right" 
      "bottom bottom bottom";
      grid-template-rows: auto;
   }

    .main-heading-wrapper.open.sticky .topContentWrap {
      padding-right: 0;
      grid-template-columns: minmax(auto,50px);
      grid-template-areas: 
      "right" 
      "bottom";
   }

   .open .topContentWrap { background: #e5e5e5; }

   .collapsed-dropdown.open ~ .dropdown { 
      /*grid-area: center;*/
      display: block; 
      visibility: visible; 
      width: 100% !important; 
      background: #e5e5e5; 
      position: absolute; 
      padding: 0 .5rem 15px 0; 
      height: 40px; z-index: 10; margin: 0; 
      text-align: center; overflow: visible; 
      position: relative;
      top: 0; left: 0; right: 0;
      display: flex !important;
      align-items: center;
      justify-content: center;
   }

   .collapsed-dropdown.open ~ .dropdown a.menu { margin: 1px 2px 0 0; }
   .sticky .collapsed-dropdown.open ~ .dropdown { 
      top: 80px; position: fixed; margin: 0; 
      padding-right: 20px; 
   }

   .topContentWrap .dropdown.hide { 
      grid-area: bottom !important; 
      display: inline-block !important; 
      visibility: hidden; 
      position: absolute; 
   }

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

    .topContentWrap .collapsed-dropdown { 
      display: block; 
      grid-area: right;
      justify-content: flex-end;
      justify-self: flex-end;
      margin-right: 13px;
       top: 3px;
    }

   .main-heading-wrapper.open .topContentWrap .dropdown {
      display: block;
   }

   .main-heading-wrapper .topContentWrap .dropdown {
      grid-area: bottom;
      display: none;
      margin: 0;
   }

   .dropdown a.menu { font-size: 13px; }
   .dropdown .sub_menu { width: 100%; display: none; }
   .open .dropdown a.menu { padding: 5px 9px 5px 4px; font-size: 12px; }

   .iconography { height: auto; }
   .iconography .new { text-align: left; width: 100%; }

}
@media all and (max-width: 500px) {
    .main-heading-wrapper h1 { font-size: 2rem; }
    .main-heading { padding: 0; }
    .workflow-tabs li { margin: .55rem -4px 0 0; }

    .iconography .new { font-size: 1rem; }


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