/*==================================================
ORGANIZATION OVERVIEW
Axio Documentation — polished page styling
==================================================*/

/*==================================================
BASE / PAGE RHYTHM
==================================================*/

.announcement-box,
.resource-grid,
.resource-grid-info,
.method-grid,
.page-navigation,
.tip-box{
    box-sizing:border-box;
}

.announcement-box{
    display:flex;
    align-items:center;
    gap:24px;
    padding:26px 28px;
    margin:28px 0 38px;
    border:3px solid #d6ccff;
    border-left:5px solid #7c5cff;
    border-radius:10px;
    background:#f5f4f8;
}

.announcement-icon{
    width:70px;
    height:70px;
    min-width:70px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#eef2ff;
    border-radius:16px;
}

.announcement-icon img{
    width:38px;
    height:38px;
}

.announcement-content{
    flex:1;
}

.announcement-box h2{
    margin:0 0 10px;
    font-size:1.2rem !important;
    line-height:1.35;
}

.announcement-box p{
    margin:0;
    color:#5f6470;
    line-height:1.7;
}


/*==================================================
TIP / CALLOUT BOX
==================================================*/

.tip-box{
    margin:30px 0;
    padding:20px 24px;
    border-radius:12px;
    border-left:5px solid #22c55e;
    background:#f0fff4;
}

.tip-box h3{
    margin-top:0;
}

.tip-box ul{
    margin-bottom:0;
}


/*==================================================
TABLES
==================================================*/

table{
    width:100%;
    margin:22px 0 30px;
    border-collapse:collapse;
    border:1px solid #e0e4eb;
    background:#fff;
    box-shadow:0 3px 12px rgba(15,23,42,.035);
}

table th{
    background:#e2ddf3;
    color:#172033;
    font-weight:700;
}

table th,
table td{
    padding:13px 15px;
    border:1px solid #d2c1f5;
    vertical-align:middle;
    line-height:1.55;
}

table tbody tr:hover{
    background:#fbfcff;
}


/*==================================================
CODE / HIERARCHY / EXAMPLES
==================================================*/

pre{
    border:1px solid #e2e5ec;
    border-radius:10px;
    margin:22px 0 28px;
    padding:18px 20px;
    background:#f8f9fc;
    overflow-x:auto;
    box-shadow:0 2px 8px rgba(15,23,42,.025);
}

pre code{
    font-size:14px;
    line-height:1.65;
}

code{
    font-size:14px;
    padding:2px 5px;
    border-radius:4px;
}


/*==================================================
HEADINGS
==================================================*/

h1{
    margin-top:38px;
    margin-bottom:24px;
    line-height:1.2;
}

h2{
    margin-top:42px;
    margin-bottom:14px;
    line-height:1.25;
}

h3{
    margin-top:28px;
    margin-bottom:12px;
    line-height:1.3;
}

h4{
    line-height:1.35;
}


/*==================================================
TEXT
==================================================*/

p{
    line-height:1.75;
}

li{
    line-height:1.7;
}


/*==================================================
RESOURCE GRID
==================================================*/

.resource-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
    margin:28px 0 42px;
}

.resource-grid-info{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
    margin:28px 0 42px;
}

.resource-card{
    border:1px solid #e8edf4;
    border-radius:16px;
    padding:20px;
    display:flex;
    flex-direction:column;
    min-height:260px;
    transition:transform .2s ease, box-shadow .2s ease;
    box-shadow:0 3px 10px rgba(15,23,42,.03);
}

.resource-card:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 32px rgba(15,23,42,.07);
}


/*==================================================
CARD COLORS
==================================================*/

.resource-card.project{
    background:#f9f8fd;
    border:1px solid #886ec4;
}

.resource-card.workspace{
    background:#f8fff9;
    border:1px solid #56d87b;
}

.resource-card.environment{
    background:#fff9f2;
    border:1px solid #f7c08d;
}


/*==================================================
CARD TITLE
==================================================*/

.card-title{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
}

.resource-card .card-title h3{
    margin:0;
    font-size:1.15rem;
    font-weight:700;
    line-height:1.3;
}

.card-title .ui-title{
    color:#2563eb;
    margin:0;
    font-size:1.55rem;
    font-weight:700;
}

.card-title .git-title{
    color:#147e3b;
    margin:0;
    font-size:1.55rem;
    font-weight:700;
}


/*==================================================
ICON BOX
==================================================*/

.icon-box{
    width:58px;
    height:58px;
    border-radius:16px;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-shrink:0;
}

.project .icon-box{
    background:#f3edff;
}

.workspace .icon-box{
    background:#eafbf1;
}

.environment .icon-box{
    background:#fff4e9;
}

.icon-box img{
    width:30px;
    height:30px;
}

.card-title img{
    width:48px;
    height:48px;
    padding:10px;
    border-radius:14px;
    object-fit:contain;
}


/*==================================================
RESOURCE CARD CONTENT
==================================================*/

.resource-card p{
    color:#5b6472;
    font-size:15px;
    line-height:1.7;
    margin:0 0 17px;
}

.resource-card h4{
    margin:2px 0 12px;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:1.7px;
    color:#8a94a6;
    font-weight:700;
}

.resource-card ul{
    list-style:none;
    margin:0;
    padding:0;
}

.resource-card li{
    display:block;
    position:relative;
    margin-bottom:9px;
    color:#374151;
    padding-left:20px;
}

.resource-card li::before{
    content:"✓" !important;
    color:#22c55e !important;
    font-weight:700 !important;
    position:absolute;
    left:0;
    top:0;
    margin:0;
}

.main-content ul > li::before {
    position: absolute !important;
    margin-left: 0em !important;
}


/*==================================================
CARD FOOTER
==================================================*/

.card-footer{
    margin-top:auto;
    padding-top:15px;
    border-top:1px solid rgba(38,124,231,.16);
    display:flex;
    justify-content:flex-end;
}

.card-footer a{
    color:#5b5cf0;
    font-weight:600;
    text-decoration:none;
}

.card-footer a:hover{
    color:#3f41dd;
}


/*==================================================
SECTION DESCRIPTION
==================================================*/

.section-description{
    margin-top:-5px;
    margin-bottom:26px;
    color:#6b7280;
    font-size:15px;
    line-height:1.7;
}


/*==================================================
WAYS TO CREATE RESOURCES
==================================================*/

.method-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
    margin:28px 0 34px;
}

.method-card{
    border:1px solid #ececec;
    border-radius:16px;
    padding:20px;
    display:flex;
    flex-direction:column;
    min-height:400px;
    transition:transform .2s ease, box-shadow .2s ease;
    box-shadow:0 2px 8px rgba(15,23,42,.03);
}

.method-card:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 32px rgba(15,23,42,.07);
}

.method-card.ui{
    background:#f7f9fd;
    border:1px solid #2066ff;
}

.method-card.git{
    background:#f5fff9;
    border:1px solid #5ba06f;
}

.method-card .card-title{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
}

.method-card .card-title h3{
    margin:0;
    font-size:1.2rem;
    font-weight:700;
}

.method-card p{
    margin:0 0 17px;
    color:#5b6472;
    line-height:1.7;
}

.method-card h4{
    margin:0 0 12px;
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:1.7px;
    color:#8b93a3;
}

.method-card ul,
.method-card ol{
    margin:0 0 14px;
}

.method-card ul{
    list-style:none;
    padding:0;
}

.method-card li{
    position:relative;
    margin-bottom:9px;
    padding-left:20px;
}

.method-card li::before {
    content: "✓" !important;
    color: #22c55e !important;
    font-weight: bold !important;    
    margin-left: 0.10em !important;
}

.method-card ul li::before{
    content:"✓" !important;
    color:#22c55e !important;
    font-weight:700 !important;
    position:absolute;
    left:0;
    top:0;
}

.method-card ol{
    padding-left:24px;
}

.method-card ol li{
    padding-left:4px;
}

.method-card .card-footer{
    margin-top:auto;
    padding-top:15px;
    border-top:1px solid #eef2f7;
}

.method-card .icon-box{
    width:54px;
    height:54px;
    border-radius:16px;
    display:flex;
    justify-content:center;
    align-items:center;
}

.method-card.ui .icon-box{
    background:#eaf2ff;
}

.method-card.git .icon-box{
    background:#eafbf1;
}

.method-card .icon-box img{
    width:28px;
    height:28px;
}


/*==================================================
ICON BACKGROUNDS
==================================================*/

.project-icon{
    background:#f3eeff;
}

.workspace-icon{
    background:#eafbf0;
}

.environment-icon{
    background:#fff2e8;
}

.ui-icon{
    background:#edf5ff;
}

.git-icon{
    background:#eafbf0;
}


/*==================================================
UI VS PLATFORM AS CODE TABLE
==================================================*/

.method-grid + h3{
    margin-top:28px;
}

.method-grid + h3 + table{
    margin-top:18px;
}


/*==================================================
RESOURCE HIERARCHY
==================================================*/

/* The Markdown hierarchy is rendered from a fenced code block. */
h2 + p + pre{
    background:#fbfbfd;
    border:1px solid #dfe3ea;
}

h2 + p + pre code{
    color:#43516a;
}


/*==================================================
EXAMPLE BLOCK
==================================================*/

/* Ordered-list examples directly under the hierarchy table. */
h3 + ol{
    margin:14px 0 28px;
    padding:18px 22px 18px 42px;
    border:1px solid #e1dcff;
    border-radius:12px;
    background:#f7f4ff;
}

h3 + ol li{
    margin-bottom:7px;
}

h3 + ol li:last-child{
    margin-bottom:0;
}


/*==================================================
CHECKLIST
==================================================*/

h2 + ul{
    margin-top:18px;
}

/* Specifically styles the Getting started checklist */
h2#heading-getting-started-checklist + ul{
    list-style:none;
    padding:0;
    margin:18px 0 38px;
}

h2#heading-getting-started-checklist + ul li{
    position:relative;
    padding-left:28px;
    margin-bottom:10px;
}

h2#heading-getting-started-checklist + ul li::before{
    content:"";
    position:absolute;
    left:1px;
    top:.42em;
    width:13px;
    height:13px;
    border:1.5px solid #cfd5df;
    border-radius:3px;
    background:#fff;
}


/*==================================================
GLOSSARY
==================================================*/

h2#heading-glossary + table{
    margin-top:18px;
}

h2#heading-glossary + table th{
    background:#f7f5ff;
}

h2#heading-glossary + table td:first-child{
    width:28%;
    font-weight:600;
    color:#374151;
}


/*==================================================
PAGE NAVIGATION
==================================================*/

.page-navigation{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:28px;
    margin:42px 0 12px;
    padding-top:26px;
}

.page-navigation .nav-button{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:280px;
    padding:15px 24px;
    border-radius:8px;
    background:#6d4df5;
    color:#fff !important;
    font-weight:600;
    text-decoration:none;
    transition:background .2s ease, transform .2s ease;
}

.page-navigation .nav-button:hover{
    background:#5b3fe0;
    color:#fff !important;
    text-decoration:none;
    transform:translateY(-1px);
}

.page-navigation .previous{
    margin-right:auto;
}

.page-navigation .next{
    margin-left:auto;
}


/*==================================================
FOOTER NOTE
==================================================*/

.footer-note{
    text-align:center;
    color:#6b7280;
    margin-top:50px;
    font-size:15px;
}

.footer-note a{
    text-decoration:none;
    font-weight:600;
}


/*==================================================
SECTION DIVIDERS
==================================================*/

.resource-grid + hr,
.resource-grid-info + hr,
.method-grid + hr{
    margin:42px 0;
}


/*==================================================
RESPONSIVE
==================================================*/

@media (max-width:1200px){

    .resource-grid,
    .resource-grid-info{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .method-grid{
        grid-template-columns:1fr;
    }

    .page-navigation .nav-button{
        min-width:230px;
    }
}


@media (max-width:768px){

    .announcement-box{
        flex-direction:column;
        align-items:flex-start;
        gap:16px;
    }

    .announcement-icon{
        width:60px;
        height:60px;
        min-width:60px;
    }

    .resource-grid,
    .resource-grid-info,
    .method-grid{
        grid-template-columns:1fr;
    }

    .resource-card,
    .method-card{
        min-height:auto;
    }

    table{
        display:block;
        overflow-x:auto;
        white-space:nowrap;
    }

    .page-navigation{
        flex-direction:column;
        align-items:stretch;
    }

    .page-navigation .nav-button{
        width:100%;
        min-width:0;
    }

    .page-navigation .previous,
    .page-navigation .next{
        margin:0;
    }
}


@media (max-width:480px){

    .announcement-box{
        padding:20px;
    }

    .resource-card,
    .method-card{
        padding:16px;
        border-radius:14px;
    }

    .card-title img{
        width:42px;
        height:42px;
        padding:8px;
    }

    .resource-card .card-title h3,
    .method-card .card-title h3{
        font-size:1.05rem;
    }

    pre{
        padding:14px;
    }
}



/* ==================================================
   ORGANIZATION CONTEXT NOTES
   ================================================== */

.organization-context-notes {
    display: flex;
    flex-direction: column;
    gap: 10px;

    width: 100%;
    margin: 12px 0 28px;
    padding: 0;
}

/* --------------------------------------------------
   Common callout styling
   -------------------------------------------------- */

.organization-context-notes p {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;
    min-height: 40px;

    box-sizing: border-box;

    margin: 0 !important;
    padding: 9px 16px 9px 43px !important;

    border-radius: 7px;

    font-size: 14px !important;
    line-height: 1.55 !important;
    font-weight: 400 !important;

    color: #40546d !important;
}


/* --------------------------------------------------
   BLUE INFO BOX
   First paragraph
   -------------------------------------------------- */

.organization-context-notes p:first-child {
    background: #eef6ff !important;
    border: 1px solid #c9def8;

    color: #40546d !important;
}


/* Blue information icon */

.organization-context-notes p:first-child::before {
    content: "i";

    position: absolute;
    left: 12px;
    top: 50%;

    transform: translateY(-50%);

    width: 18px;
    height: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #1683e8;
    color: #ffffff;

    font-size: 12px;
    font-weight: 700;
    font-family: Arial, sans-serif;
}


/* --------------------------------------------------
   GREEN SUCCESS BOX
   Second paragraph
   -------------------------------------------------- */

.organization-context-notes p:last-child {
    background: #effcf4 !important;
    border: 1px solid #c8efd8;

    color: #40546d !important;
}


/* Green check icon */

.organization-context-notes p:last-child::before {
    content: "✓";

    position: absolute;
    left: 12px;
    top: 50%;

    transform: translateY(-50%);

    width: 18px;
    height: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #16b866;
    color: #ffffff;

    font-size: 11px;
    font-weight: 700;
    font-family: Arial, sans-serif;
}


/* --------------------------------------------------
   BOLD TEXT
   -------------------------------------------------- */

.organization-context-notes strong {
    color: #334155 !important;
    font-weight: 700 !important;
}


/* --------------------------------------------------
   REMOVE EXTRA SPACING
   -------------------------------------------------- */

.organization-context-notes p:last-child {
    margin-bottom: 0 !important;
}


/* --------------------------------------------------
   RESPONSIVE
   -------------------------------------------------- */

@media (max-width: 768px) {

    .organization-context-notes {
        gap: 8px;
        margin: 10px 0 24px;
    }

    .organization-context-notes p {
        min-height: auto;

        padding: 10px 12px 10px 40px !important;

        font-size: 14px !important;
        line-height: 1.6 !important;
    }

}



/* ==================================================
   RESOURCE HIERARCHY
   ================================================== */

.resource-hierarchy-section {
    margin: 42px 0 46px;
}

.resource-hierarchy-section h2 {
    margin: 0 0 8px;
    font-size: 1.65rem;
    line-height: 1.3;
    font-weight: 700;
    color: #111827;
}

.resource-hierarchy-section .section-description {
    margin: 0 0 22px;
    color: #53647d;
    font-size: 16px;
    line-height: 1.65;
}


/* ==================================================
   HIERARCHY LAYOUT
   ================================================== */

.hierarchy-layout {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 16px;
    align-items: stretch;
    margin-bottom: 14px;
}


/* ==================================================
   HIERARCHY TREE
   ================================================== */

.hierarchy-visual {
    border: 1px solid #d9dde6;
    border-radius: 7px;
    background: #ffffff;
    padding: 18px 18px 16px;
    min-height: 190px;
    box-sizing: border-box;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.03);
}

.hierarchy-tree {
    color: #34445d;
    line-height: 1.75;
}

.tree-level {
    display: flex;
    align-items: center;
    min-height: 28px;
    white-space: nowrap;
}

.tree-organization {
    padding-left: 0;
}

.tree-project {
    padding-left: 18px;
}

.tree-workspace {
    padding-left: 42px;
}

.tree-environment {
    padding-left: 66px;
}

.tree-stack {
    padding-left: 90px;
}

.tree-workflow {
    padding-left: 114px;
}

.tree-branch {
    color: #8b95a7;
    margin-right: 7px;
    font-family: monospace;
}

.tree-icon {
    width: 18px;
    margin-right: 6px;
    color: #5364d8;
    font-size: 13px;
}

.tree-level strong {
    font-weight: 600;
    color: #334155;
}

.tree-muted {
    margin-left: 5px;
    color: #6b7280;
    font-weight: 400;
}


/* ==================================================
   HIERARCHY TABLE
   ================================================== */

.hierarchy-table-wrapper {
    min-width: 0;
}

.hierarchy-table {
    width: 100%;
    height: 100%;
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0;
    border: 1px solid #dfe3eb;
    border-radius: 7px;
    overflow: hidden;
    background: #ffffff;
}

.hierarchy-table th {
    padding: 11px 13px !important;
    text-align: left;
    background: #f5f3ff !important;
    border: 0 !important;
    border-bottom: 1px solid #dfe3eb !important;
    color: #172033;
    font-size: 14px;
    font-weight: 700;
}

.hierarchy-table td {
    padding: 12px 13px !important;
    border: 0 !important;
    border-bottom: 1px solid #e1e5ec !important;
    color: #53647d;
    font-size: 14px;
    line-height: 1.45;
    vertical-align: middle;
}

.hierarchy-table tr:last-child td {
    border-bottom: 0 !important;
}

.hierarchy-table td:first-child {
    width: 28%;
    color: #34445d;
    font-weight: 600;
}


/* ==================================================
   RECOMMENDED CREATION ORDER
   ================================================== */

.creation-order {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding: 9px 12px;
    border: 1px solid #f3c985;
    border-radius: 6px;
    background: #fff8eb;
    color: #53647d;
    font-size: 14px;
    line-height: 1.5;
}

.creation-order-icon {
    font-size: 15px;
    flex-shrink: 0;
}

.creation-order strong {
    color: #475569;
}


/* ==================================================
   EXAMPLE BOX
   ================================================== */

.hierarchy-example {
    margin: 0;
    padding: 13px 16px 14px;
    border: 1px solid #dcd3ff;
    border-radius: 7px;
    background: #f7f4ff;
}

.example-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    color: #34445d;
    font-size: 14px;
}

.example-icon {
    color: #6254d9;
    font-size: 14px;
}

.hierarchy-example ol {
    margin: 0;
    padding-left: 22px;
}

.hierarchy-example li {
    margin: 3px 0;
    padding-left: 2px;
    color: #53647d;
    font-size: 14px;
    line-height: 1.5;
}

.hierarchy-example li strong {
    color: #34445d;
}

.hierarchy-example code {
    padding: 2px 5px;
    border-radius: 4px;
    background: #eeeaff;
    color: #5b4fc7;
    font-size: 13px;
}

.hierarchy-example li span {
    color: #6b7280;
}


/* ==================================================
   RESPONSIVE
   ================================================== */

@media (max-width: 900px) {

    .hierarchy-layout {
        grid-template-columns: 1fr;
    }

    .hierarchy-visual {
        min-height: auto;
    }

}


@media (max-width: 600px) {

    .resource-hierarchy-section {
        margin: 32px 0;
    }

    .resource-hierarchy-section h2 {
        font-size: 1.4rem;
    }

    .hierarchy-visual {
        padding: 14px;
        overflow-x: auto;
    }

    .hierarchy-tree {
        min-width: 430px;
    }

    .hierarchy-table-wrapper {
        overflow-x: auto;
    }

    .hierarchy-table {
        min-width: 620px;
    }

    .creation-order {
        align-items: flex-start;
    }

}


/* ==================================================
   ACCESS, ROLES, AND PERMISSIONS
   ================================================== */

.access-roles-section {
    margin: 38px 0 34px;
}

.access-roles-section h2 {
    margin: 0 0 6px;
    font-size: 1.55rem;
    line-height: 1.3;
    font-weight: 700;
    color: #111827;
}

.access-intro {
    margin: 0 0 14px;
    color: #53647d;
    font-size: 15px;
    line-height: 1.6;
}

.access-intro strong {
    color: #34445d;
    font-weight: 700;
}


/* ==================================================
   ACCESS TABLE
   ================================================== */

.access-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.access-roles-table {
    width: 100%;
    margin: 0 !important;
    border-collapse: collapse !important;
    border-spacing: 0;
    border: 1px solid #dfe3eb;
    background: #ffffff;
}

.access-roles-table th {
    padding: 8px 10px !important;
    background: #f5f3ff !important;
    border: 1px solid #dfe3eb !important;
    color: #172033 !important;
    font-weight: 700 !important;
    line-height: 1.35;
    text-align: left;
    vertical-align: middle;
}

.access-roles-table td {
    padding: 7px 10px !important;
    border: 1px solid #dfe3eb !important;
    color: #53647d;
    line-height: 1.35;
    vertical-align: middle;
}

.access-roles-table td:first-child {
    width: 16%;
    color: #34445d;
}

.access-roles-table td:not(:first-child) {
    text-align: center;
}

.access-roles-table td strong {
    color: #34445d;
    font-weight: 700;
}


/* ==================================================
   ACCESS NOTES
   ================================================== */

.access-footnote {
    margin: 7px 0 0;
    color: #667085;
    line-height: 1.45;
}

.access-scope-note {
    margin: 7px 0 0;
    color: #53647d;
    line-height: 1.55;
}


/* ==================================================
   ORGANIZATION SETTINGS
   ================================================== */

.organization-settings-section {
    margin: 34px 0 42px;
}

.organization-settings-section > h2 {
    margin: 0 0 14px;
    font-size: 1.55rem;
    line-height: 1.3;
    font-weight: 700;
    color: #111827;
}

.organization-subsection {
    margin: 0 0 22px;
}

.organization-subsection:last-child {
    margin-bottom: 0;
}

.organization-subsection h3 {
    margin: 0 0 4px;
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 700;
    color: #34445d;
}

.organization-subsection p {
    margin: 0 0 10px;
    color: #53647d;
    font-size: 15px;
    line-height: 1.7;
}

.organization-subsection p:last-child {
    margin-bottom: 0;
}

.organization-subsection strong {
    color: #34445d;
    font-weight: 700;
}


/* ==================================================
   RESPONSIVE
   ================================================== */

@media (max-width: 768px) {

    .access-roles-section,
    .organization-settings-section {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .access-roles-table {
        min-width: 720px;
    }

    .access-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .organization-subsection p {
        font-size: 14px;
        line-height: 1.65;
    }

}


/* ==================================================
   YAML EXAMPLE BOX
   ================================================== */

.yaml-example-box {
    margin: 18px 0 28px;
    padding: 14px 16px 16px;

    background: #f7f4ff;
    border: 1px solid #ddd5ff;
    border-radius: 7px;

    box-sizing: border-box;
}


/* ==================================================
   EXAMPLE TITLE
   ================================================== */

.yaml-example-title {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 8px;

    color: #34445d;
    font-size: 14px;
    line-height: 1.4;
}

.yaml-example-title strong {
    color: #34445d;
    font-weight: 700;
}

.yaml-example-icon {
    color: #6254d9;
    font-size: 14px;
    line-height: 1;
}


/* ==================================================
   YAML CODE
   No inner box
   ================================================== */

.yaml-example-box pre.yaml-code {
    display: block;

    margin: 0 !important;
    padding: 4px 0 0 0 !important;

    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    overflow-x: auto;

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;

    font-size: 13px !important;
    line-height: 1.65 !important;

    color: #34445d !important;
    white-space: pre;
}


/* ==================================================
   CODE ELEMENT
   ================================================== */

.yaml-example-box pre.yaml-code code {
    display: inline;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    font-family: inherit;
    font-size: inherit !important;
    line-height: inherit !important;

    color: #34445d !important;
}


/* ==================================================
   YAML SYNTAX COLORS
   ================================================== */

.yaml-example-box .yaml-key {
    color: #7c3aed;
    font-weight: 600;
}

.yaml-example-box .yaml-value {
    color: #475569;
}


/* ==================================================
   RESPONSIVE
   ================================================== */

@media (max-width: 768px) {

    .yaml-example-box {
        margin: 16px 0 24px;
        padding: 12px 14px 14px;
    }

    .yaml-example-box pre.yaml-code {
        padding: 4px 0 0 0 !important;
        font-size: 12px !important;
        line-height: 1.6 !important;
    }

}