/* 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 2rem 0 2rem; padding: 0 12px; }

/* ribbon and dropdowns */
.topContentWrap { 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: 0.2rem 0 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: 6px 10px; font-size: 12px; text-transform: uppercase; background-color: #16191c; color: #d8d8d8; vertical-align: top; white-space: nowrap; top: -5px; left: 5px; line-height: 1; margin: 0 0 0 2em; font-size: 12px; }

/* .function .topContentWrap, .blockchain { 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; }
.workflow .topContentWrap { border-top: 1px solid #37a8ac; }
.workflow.guide .topContentWrap { top: 3px; }
.sticky .iconography, .sticky .badge, .sticky .main-heading a { 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: #608bab; border-radius: 3px; font-size: 14px; position: relative; display: inline-block; border: 1px solid transparent; padding: 0px .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 { top: 0; left: 0; right: 0; margin: 0; width: 100%; }


@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; }
}
@media (max-width: 500px) {
    .main-heading-wrapper h1 { font-size: 2rem; }
}