/* GLOBAL STYLES FOR REFERENCE DOCS HEADER

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

.main { position: relative; padding: 0; margin: 0; }
.main .inner, .main #searchlink p { margin: 0 auto; padding: 0 12px; }

/* ribbon and dropdowns */
.topContentWrap { background: #e5e5e5; padding: 0 12px; position: relative; top: 0;  height: 36px; z-index: 10; }
.main .main-heading-wrapper .inner { padding: 0 !important; }
.main-heading { position: relative; padding: 2.2rem 12px 0; margin: 0 0 1.07rem; }
.main-heading .inner { padding: 0; }
.sticky .main-heading { margin: 0 12px; padding: 0; max-width: 79%; }
.sticky .main-title { font-size: 1rem; margin: 11px 0 0 12px !important; }
.topContentWrap:after { content: ''; clear: both; display: block; }
.ribbonWrap { float: left; }
 .ribbonOuter { display: inline-block; min-width: 260px; height: 25px; font: 1.1rem/2.4rem 'Source Sans Pro', Arial, Helvetica, sans-serif; color: #8a8a8a; letter-spacing: .05rem; }
    .ribbonInner { padding: 0 25px; text-transform:uppercase; }

.badge { display: inline-block; padding: 8px 0; font-size: 12px; text-transform: uppercase; color: #898989; vertical-align: top; white-space: nowrap; top: -5px; left: 5px; line-height: 1; margin: 5px 0; font-size: 12px; }

.function .topContentWrap, .blockchain .topContentWrap { border-bottom: 2px solid #136eb7; }
#guide .topContentWrap, .howto .topContentWrap, #overviewGuide .topContentWrap { border-bottom: 2px solid #d96500; }
#guide .topContentWrap, .howto .topContentWrap, #overviewGuide .topContentWrap { border-bottom: 2px solid #d96500; }
#techNote .topContentWrap, #tutorial .topContentWrap, #tutorialOverview .topContentWrap { border-bottom: 2px solid #be5324; }
#techNote .topContentWrap, #tutorial .topContentWrap, #tutorialOverview .topContentWrap { border-bottom: 2px solid #be5324; }
#techNote .topContentWrap, #tutorial .topContentWrap, #tutorialOverview .topContentWrap { border-bottom: 2px solid #be5324; }
.message .topContentWrap { border-bottom: 2px solid #dd1100; }
.c  .topContentWrap, .man-page  .topContentWrap { border-bottom: 2px solid #3f7f1f; }
.program .topContentWrap { border-bottom: 2px solid #42821f; }
.package .topContentWrap, #package .topContentWrap { border-bottom: 2px solid #608bab; }
.package .topContentWrap, #package .topContentWrap { border-bottom: 2px solid #608bab; }
.workflow .topContentWrap { border-bottom: 2px solid #27979a; }
.entity .topContentWrap { border-bottom: 2px solid #fee3b8; }

.main-title-top { color: #848484; font-size: 1.27rem; font-weight: 600; display: block; position: relative; bottom: -4px; }
.iconography { margin: 0 12px 0 0; }
.iconography .experimental { font-size: 1rem; color: #848484; text-transform: uppercase; letter-spacing: 0; font-weight: 600; margin: .3rem 0; }

.sticky .topContentWrap { border-top: 0 !important; z-index: 0; position: absolute; top: 0; margin: 0; width: 100%; height: 100%;}
.workflow .topContentWrap { border-top: 1px solid #37a8ac; }
.workflow.guide .topContentWrap { top: 3px; }
.sticky .iconography, .sticky .badge, .sticky .main-heading a { display: none; }



/* ==========================================================================
   Main heading Grid
   ========================================================================== */
.main-heading {
   display: grid;
   grid-template-columns: 1fr minmax(100px,auto);
   grid-template-rows: repeat(3,auto);
   align-items: center;
}

.main-heading > .main-title { 
   grid-column: 1;
   grid-row: 1 / -1;
   align-self: center;
}

.main-heading-wrapper:not(.sticky) .main-title {
   grid-row: 2 / -1;
}

.main-heading > a.related-interpreter { 
   grid-column: 2;
   grid-row: 2;
   align-self: center;
   justify-self: flex-end;
   position: relative;
   margin: 0;
   padding: 0;
}

.main-heading > .iconography-wrapper:not(.empty) + a.related-interpreter {
   grid-row: 4;
   margin: 0;
}

.main-heading > .iconography-wrapper {
   grid-row: 1 / -1;
   grid-column: 2;
   position: relative;
   display: flex;
   justify-content: flex-end;
   top: 0;
}

.main-heading > .iconography-wrapper .iconography {
   justify-content: flex-end;
   position: relative;
   margin: 0;
   top: 0;
   height: auto !important;
   display: flex;
   flex-wrap: wrap;
   padding: 0;
   text-align: right;
}

.main-heading > .iconography-wrapper .iconography > span {
   display: block;
   width: 100%;
   margin: 0;
   position: relative;
   top: 0;
   padding: 0;
   text-align: right;
}

/* Example: Listing of Compiled Types »  */
.main-heading > .FullListing {
   grid-row: 1;
   grid-column: 1;
   display: flex;
   margin: 0;
}

/* Header sticky */

.main-heading-wrapper.sticky .FullListing,
.main-heading-wrapper.sticky .iconography-wrapper,
.main-heading-wrapper.sticky .NewInGraphic {
   display: none;
}

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.dropdown { float: right; outline: 1px solid transparent; text-align: right; height: 32px; overflow: hidden; }
.dropdown.show { visibility: visible; }
.dropdown > li { display: inline-block; list-style: none; }
.dropdown .sub_menu { display: none; }
.dropdown a.menu { color: #333; border-radius: 3px; font-size: 14px; position: relative; display: inline-block; margin: 3px 0; border: 1px solid transparent; padding: 3px .7rem 3px .4rem; }
.dropdown .hover a.menu { color: #646464; background: #fff; color: #646464; }
.dropdown a.menu:after { right: 2px; position: relative; content: ''; background: url('../img/dropdown.svg') center center no-repeat; background-size: contain; display: inline-block; width: 10px; height: 10px; left: 4px; top: 0; }

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

.dropdown .menu:before { display: none; }
.dropdown .hover .sub_menu { background: #fff; font-size: .94167rem; position: fixed; display: block; border: 1px solid #d9d9d9; border-radius: 5px; padding: 0; z-index: 12; min-width: 150px; top: 75px; margin: 0; max-height: 80vh;
    overflow: auto; }
.dropdown .sub_menu a { background: none; padding: 5px 10px; line-height: 1; margin: 5px; display: block; white-space: nowrap; color: #898989 !important; position: relative; z-index: 100; }
.dropdown .sub_menu a:hover { background-color: #e5e5e5; border-radius: 3px; color: #898989; }
.dropdown .edge .sub_menu { right: 0; left: auto; }
.dropdown .right-edge .sub_menu { right: 0; left: auto; }
.dropdown .see-also + .sub_menu a, .dropdown .functions + .sub_menu a { font-weight: 600; }

.topContentWrap .dropdown.hide { display: inline-block !important; visibility: hidden; position: absolute; }
.open .topContentWrap .dropdown.hide { visibility: visible; }
.collapsed-dropdown  { border-radius: 3px; height: 28px; width: 28px; top: 0; bottom: 0; right: 69px; margin: auto; text-align: center; vertical-align: middle; position: absolute; z-index: 10; }
.collapsed .collapsed-dropdown:hover { background: #bfbfbf; }
.collapsed .collapsed-dropdown:active { background: #a6a6a6; }
.square { width: 3px; height: 3px; margin: 12px 3px 0 0; display: inline-block; vertical-align: top; background: #333; }
.square:last-of-type { margin: 12px 0 0 0; }

.collapsed .dropdown { margin: 0 28px 0 0; }
.open .dropdown { display: block; visibility: visible; background: #e5e5e5; width: 100% !important; position: absolute; left: 0; right: 0; top: 40px; padding: .2rem 1rem; z-index: 10000; margin: 0; height: 40px; text-align: left; overflow: visible; }
.open .dropdown .hover .sub_menu { top: 117px; }
.open .dropdown a.menu { padding: 5px 6px 5px 3px; font-size: .95rem; }

.sticky { position: fixed; top: 0; left: 0; right: 0; margin: 0; width: 100%; }

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

.topic-overview-link {
    grid-column: 2;
    display: grid;
    width: 98px;
    height: 0px;
    margin-left: 38px;
}

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

.topic-overview-text {
    color: #8b8b8b;
    margin-left: auto;
    text-align: left;
    font-size: 12px;
    grid-column: 2;
}

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

.topic-overview-link > img {
    position: relative;
    top: 2px;
    float: left;
    right: 5px;
    grid-column: 1;
    grid-row: 1;
}

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

@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
   ========================================================================== */

@media (max-width: 600px) {
    .main .header .inner { padding: 0; }
    .topContentWrap { border-top: 0 !important; }
    .dropdown .sub_menu a { white-space: normal; }
    .main-title { font-size: 2.3rem; }
    .open .dropdown a.menu { padding: 5px 5px 5px 2px; font-size: 12px; }

   /* ==========================================================================
      Main heading Grid for 600px
   ========================================================================== */

   .main-heading:empty { display:none }

   .main-heading {
      grid-template-columns: 1fr;
      grid-template-rows: repeat(3,auto);
      justify-items: flex-start;
   }

   .main-heading > .main-title { 
      grid-column: 1;
      grid-row: 2;
   }

   .main-heading > a.related-interpreter { 
      grid-column: 1;
      grid-row: 1;
      justify-self: flex-start;
   }

   .main-heading > .iconography-wrapper {
      grid-column: 1 / -1;
      grid-row: 1;
   }

   .main-heading > .iconography-wrapper > .iconography > .media-icons,
   .main-heading > .iconography-wrapper > .iconography > .media-icons + span {
      width: auto;
      margin-right: 10px;
   }

   .main-heading > .FullListing + .iconography-wrapper {
      grid-column: 2;
      grid-row: 1 / -1;
   }

   /* Example of content: Related Entity »   */
   .main-heading > .iconography-wrapper.empty + a.related-interpreter,
   .main-heading > .iconography-wrapper.wrap-down + a.related-interpreter {
      margin: 10px 0;
      padding: 0;
      border: 0;
      position: relative;
   }

   .main-heading > .iconography-wrapper + a.related-interpreter {
      grid-row: 1;
      grid-column: 2;
   }

   .main-heading > .iconography-wrapper.empty + a.related-interpreter {
      grid-column: 1;
      justify-self: flex-end;
   }

}
@media (max-width: 500px) {
    .main-heading-wrapper h1 { font-size: 2rem; }
}