/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');

:root {
  --oct-brand-blue:        #364FEC;
  --oct-brand-blue-bright: #0F6FFF;
  --oct-brand-blue-tint:   #C9DEFF;
  --oct-brand-blue-pale:   #F0F6FF;
  --oct-brand-yellow:      #FFBE0B;
  --oct-sec-cyan:    #0BC6FF;
  --oct-sec-orange:  #F9833D;
  --oct-sec-pink:    #FF0B4C;
  --oct-sec-flame:   #FF440B;
  --oct-sec-mint:    #36ECD3;
  --oct-ink:        #333333;
  --oct-ink-2:      #444444;
  --oct-ink-3:      #4D4D4D;
  --oct-ink-4:      #2D2D2D;
  --oct-mute:       #777777;
  --oct-mute-2:     #B8B3B3;
  --oct-line:       #C1C1C1;
  --oct-line-soft:  #DBDBDB;
  --oct-bg:         #FFFFFF;
  --oct-code-bg:    #060F37;
  --oct-code-fg:    #DFDFDF;
  --oct-success:    #1F8A5B;
  --oct-warn:       #FFB300;
  --oct-danger:     #E5484D;
  --oct-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --oct-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --oct-shadow-button: 0 4px 2px rgba(57,81,231,0.15);
  --oct-shadow-card:   0 1px 2px rgba(20,20,40,0.04), 0 4px 14px rgba(20,20,40,0.06);
}

html    { scroll-padding-top: 6rem; }
body    {
        background-color: #FFFFFF;
} @media all and (min-width:  0.0000rem) and (max-width: 36.9375rem) {
        html {font-size : 12px;  }
} @media all and (min-width: 36.9375rem) and (max-width: 73.5000rem) {
        html {font-size : 12px;  }
} @media all and (min-width: 73.5000rem) {
        html {font-size : 16px;  }
}
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
*       {
        font-family: var(--oct-font); padding: 0px; margin: 0px; color: #000000; fill: #000000;
        -ms-overflow-style: none; scrollbar-width: none;
}    *::-webkit-scrollbar {
        display: none;
} body::-webkit-scrollbar {
        display: none;
} body  {
        -ms-overflow-style: none; scrollbar-width: none; 
        -webkit-text-size-adjust: 100%;
} a     {
        text-decoration   : none; cursor : pointer;
}  *.Sz15   ,    *.Sz15     { font-size: 3.0rem; padding-top: -0.75rem; padding-bottom: -0.75rem;
}  *.Sz15  *,    *.Sz15 *   { font-size: 3.0rem; padding-top: -0.75rem; padding-bottom: -0.75rem;
} h1  , h2  , h3  ,  h4   , h5  , h6   { font-size: 1.5rem;
} h1 *, h2 *, h3 *,  h4 * , h5 *, h6 * { font-size: 1.5rem;
}  *.Hdng   ,    *.Hdng     { font-size: 2.0rem;
}  *.Hdng  *,    *.Hdng *   { font-size: 2.0rem;
}  *.Cmfr   ,    *.Cmfr     { font-size: 1.5rem;
}  *.Cmfr  *,    *.Cmfr *   { font-size: 1.5rem;
}  p        ,      span     { font-size: 1.0rem;
}  ul       ,      li       { font-size: 1.0rem;
}  hr                       { width: 100%; border: 0px solid #000000; height: 0.125rem; 
                              background-color: #364FEC; margin-top: 2rem; margin-bottom: 2rem;
}
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
header  {
        position: fixed; top: 0.0px ; width: 100%; z-index: 100; background-color: rgba(255,255,255,0.92);
        border-bottom: 0.5px solid rgba(0,0,0,0.06);
        visibility: hidden; display: flex; align-items: center; padding: 1.25rem;
        padding-left: 1.00rem; padding-right: 1.00rem; box-sizing: border-box;
}
/**********************************************************************************************/
  @media all and (min-width:  0.0000rem) and (max-width: 36.9375rem) {
        header { visibility: visible; }
} @media all and (min-width: 36.9375rem) and (max-width: 73.5000rem) {
        header { visibility: visible; }
} @media all and (min-width: 73.5000rem) {
        header { visibility: visible; }
}
/**********************************************************************************************/
header  * { color: var(--oct-ink); fill: var(--oct-ink); }
header  > *:nth-child(1) { width: 17.9375rem; }
header  > *:nth-child(1) > a > img { height: 1.50rem; }
header  > *:nth-child(2) {
        display: flex; align-items: center; justify-content: space-between; flex-grow: 1;
}
aside   {
        width: 18.9375rem; background-color: rgba(201,222,255,0.5); position: fixed; left: 0px; top: 0px;
        height: 100vh; padding: 2rem; padding-top: 5rem; box-sizing: border-box; bottom: 0px;
        overflow-y:scroll; border-right: 0.5px solid rgba(0,0,0,0.06);
}
aside   * { color: var(--oct-ink); fill: var(--oct-ink); }
aside   > * { margin-bottom: 0.25rem; }
aside   > a > svg { min-width: 0.75rem; min-height: 0.75rem; }
main    {
        margin-left: 19.9375rem; margin-top: 4rem; padding-top: 4rem; padding-bottom: 4rem;
        box-sizing : border-box; margin-right: 1rem;
}
main    > div  { width: 48.25rem; margin-left: auto; margin-right: auto; }
#DsplyWidthMngr{ display: none; box-sizing: border-box; padding: 2rem; }
/**********************************************************************************************/
  @media all and (min-width:  0.0000rem) and (max-width: 36.9375rem) {
        header { display: none; }
        aside  { display: none; }
        main   { display: none; }
        #DsplyWidthMngr { display:block; }
} @media all and (min-width: 36.9375rem) and (max-width: 73.5000rem) {
        header { display: none; }
        aside  { display: none; }
        main   { display: none; }
        #DsplyWidthMngr { display:block; }
} @media all and (min-width: 73.5000rem) {
}
/**********************************************************************************************/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
/*||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*/
.Back { display: block; margin-left: -2rem; margin-bottom: 2rem; }
.Bold { font-weight: 800; }
.Bold * { font-weight: 800; }
.Br   { margin-bottom: 1rem; display: block; content: ""; }
.BrandColor { color: #364FEC; }
.BrandColor * { color: #364FEC; }
.Button {
        display: flex; height: 2.6250rem; align-items: center; width: 11.8750rem;
        padding-left: 1rem;
        box-sizing: border-box; border: 0px solid #ffffff; background-color: #ffffff;
        border-radius: 10px;
}
.Button > svg  { fill : #000000; }
.Button > span { color: #000000; }
.ButtonBlue { background-color: rgba(54,79,236,0.7); box-shadow: var(--oct-shadow-button); }
.ButtonBlue > svg  { fill : #ffffff; }
.ButtonBlue > svg  > * { fill : #ffffff; }
.ButtonBlue > span { color: #ffffff; }
.ButtonBlue:hover  { opacity: 0.88; }
.ButtonSize1  { width: 24rem; }
.Code   {
        display: flex; justify-content: space-between; box-sizing: border-box; padding: 1.5rem;
        background-color: #060F37; border-radius: 0.25rem;
}
.Code > *:nth-child(1) {
        white-space: pre; font-family: 'Roboto Mono';
        color: var(--oct-code-fg); font-size: 0.75rem; text-wrap: wrap;
}
.Code > *:nth-child(2) {
        display: inline-block; fill: #ffffff; color: #ffffff; cursor: pointer;
        min-width: 1.00rem; min-height: 1.00rem;
            width: 1.00rem;     height: 1.00rem;
        max-width: 1.00rem; max-height: 1.00rem;
}
.Code > *:nth-child(2) > * { fill: #ffffff; color: #ffffff; }
.CodeFont { font-family: 'Roboto Mono'; }
.Hghlgh {
        display: inline-block; background-color: #FFBE0B; color: #060F37; padding: 0.25rem;
        padding-left: 0.50rem; padding-right: 0.50rem; border-radius: 0.25rem;
} 
.IconText { display: flex; align-items: center; }
.IconText   * { font-size: 0.8750rem; }
.IconText > *:nth-child(1) { width: 0.7500rem; height: 0.7500rem; margin-right : 0.50rem; }
.IconText > *:nth-child(2) { }
aside .IconText { padding: 0.5rem 0.75rem; border-radius: 6px; transition: background 0.15s ease, color 0.15s ease; }
aside .IconText:hover { background: rgba(54,79,236,0.08); }
aside .IconText:hover * { color: var(--oct-brand-blue); fill: var(--oct-brand-blue); }
aside .IconText .active { color: var(--oct-brand-blue); font-weight: 600; }
aside a:has(.active) { background: rgba(54,79,236,0.12); }
.InfoBox  {
        display: flex ; width: 72.50rem; box-sizing: border-box; padding: 1rem;
        padding-top: 2rem; padding-bottom: 0rem; background-color: #ffffff; flex-wrap: wrap;
}
.InfoBox> * { width: 22.8125rem; margin-right: 1.00rem; margin-bottom: 2.00rem; }
.InfoBox> *:nth-child(3n) { margin-right: 0.00rem; }
.InfoBox> * > *:nth-child(1) { margin-bottom: 1rem; }
.InfoBox> * > *:nth-child(2) {
        width: 21.5625rem; display: block; margin-left: 1.25rem; font-size: 0.8750rem;
}
.Input  { width: 24rem; }
.Input  > div {
        display: flex ; padding: 1rem; height: 2.6250rem; align-items: center; width: 24rem;
        background-color: #ffffff; margin-bottom: 0.5rem; box-sizing: border-box;
        border: 0.5px solid var(--oct-ink); border-radius: 12px;
}
.Input  > div > svg   {
        display: inline-block; max-width: 0.75rem; max-height: 0.75rem; margin-right: 1.0rem;
        fill: #000000; color: #000000; background-color: #ffffff;
        min-width: 0.75rem; min-height: 0.75rem;
}
.Input  > div > input {
        display: inline-block; width: 20.1875rem; background-color: #ffffff; border: 0px;
        outline: none; border-radius: 0px; font-size: 0.8750rem;
}
.Input > div  > input::-webkit-box-placeholder { color: #c0c0c0; opacity: 1; }
.Input > div  > input::-moz-box-placeholder    { color: #c0c0c0; opacity: 1; }
.Input > div  > input::-ms-box-placeholder     { color: #c0c0c0; opacity: 1; }
.Input > div  > input::placeholder             { color: #c0c0c0; opacity: 1; }
.Input > span { display: block; color:#364FEC; font-size: 0.8750rem; }
.List  { }
.List  > span { display: block; margin-bottom: 1rem; }
.ListTable    { display: flex ; justify-content: space-between; }
.ListTable> * { width: 23.6250rem; }
.ListTable> * > h2{ margin-bottom: 1rem; }
.Margin1 { margin-bottom: 1rem; }
.Margin2 { margin-bottom: 2rem; }
.Margin4 { margin-bottom: 4rem; }
.Margin8 { margin-bottom: 8rem; }
.PageBackButton   { margin-bottom: 4rem; }
.PageBackButton > * { display: inline-block; font-size: 1.5rem; }
.SideBorder{
        border-right: 0.125rem dashed #364FEC;
}
.Table { display: block; }
.Table > * { display: flex ; justify-content: space-between; margin-bottom: 0.25rem; }
.Table > * > * {
        background-color: #ffffff; padding: 1.00rem;
        font-size: 0.8750rem; border-radius: 0.25rem; box-sizing: border-box;
        padding-left: 1.00rem; padding-right: 1.00rem;
}
.Table > * > *:nth-child(1) { width: 24rem; font-weight: 800; }
.Table > * > *:nth-child(2) { width: 24rem; }
.Table > * > * * { font-size: 0.8750rem !important; }
.Title { display: block; background-color: #364FEC; padding:1rem; margin-bottom: 4.00rem; }
.Title * { color: #ffffff; fill:#ffffff; font-weight: 800; }
.Title > * { }
.Title > * > *:nth-child(1) { }

/* ── Environment badge (header) ──────────────────── */
.EnvBadge {
        display: inline-block; font-size: .65rem; font-weight: 800;
        letter-spacing: .06em; padding: .15rem .45rem;
        border-radius: 4px; vertical-align: middle; margin-left: .4rem;
}
.EnvBadgeTest { background: rgba(249,171,0,.25); color: #f9ab00; }
.EnvBadgeLive { background: rgba(30,142,62,.25); color: #1e8e3e; }