.page_spinner {
    color: #23c4fa;
    position: absolute;
    /*
    * Created with https://www.css-gradient.com
    * Gradient link: https://www.css-gradient.com/?c1=089e5e&c2=d14e13&gt=l&gd=dtr
    */
    background: #00295b;
    background: linear-gradient(225deg,rgba(0, 41, 91, 1)  0%, hsl(126.67deg 26.47% 13.33%), rgba(106, 42, 91, 1) 100%);
    z-index: 100000;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.page_spinner div {
    font-size: 25px;
    color: #23c4fa;
    position: absolute;
    background: url(/assets/img/loader.gif) 50% 50% no-repeat;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 100101;
}
/* ribbon ini */
.x800633800860377_container {
    position: fixed;
    top: 0;
    right: 0;
    transform: translateX(45%);
    z-index: 2147483647;
}
.x800633800860377_ribbon {
    display: block;
    width: 100vw;
    height: 3vw;
    transform: rotate(45deg);
    background-image: url("data:image/svg+xml,%3Csvg class='flag' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Crect width='1200' height='800' fill='%23005BBB'/%3E%3Crect width='1200' height='400' y='400' fill='%23FFD500'/%3E%3C/svg%3E");
    background-size: auto;
    box-shadow: 0 0 8px rgb(0 0 0 / 50%);
}
.x46648751614603046_container {
    position: fixed;
    bottom: 0;
    left: 0;
    transform: translateX(-45%);
    z-index: 2147483647;
}
.xUA_ribbon {
    display: block;
    width: 15vw;
    height: 3vw;
    transform: rotate(45deg);
    background-image: url("data:image/svg+xml,%3Csvg class='flag' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Crect width='1200' height='800' fill='%23005BBB'/%3E%3Crect width='1200' height='400' y='400' fill='%23FFD500'/%3E%3C/svg%3E");
    background-size: auto;
    box-shadow: 0 0 8px rgb(0 0 0 / 50%);
}
.xRU_ribbon {
    display: block;
    width: 100vw;
    height: 3vw;
    transform: rotate(45deg);
    background-image: url("data:image/svg+xml,<svg class='flag' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 900'><rect width='1200' height='900' fill='%23FFFFFF'/><rect width='1200' height='300' y='300' fill='%230039a6'/><rect width='1200' height='300' y='600' fill='%23d52b1e'/></svg>");
    background-size: auto;
    box-shadow: 0 0 8px rgb(0 0 0 / 50%);
}
/* ribbon fim */
.avatar img {
    border: 3px solid #3397d4 !important;
}
.avatar img:hover {
    border: 7px solid #3397d4 !important;;
}
#sidebar #avatar img:hover {
    transform: scale(1.2);
}
#sidebar #avatar img {
    transition: transform .5s;
}

/* ==========================================================================
   Navbar & .nav-btn-bar Compact Styling (Reduced by 2rem: 5rem -> 3rem)
   ========================================================================== */
#_navbar,
.navbar,
.navbar > .content {
    min-height: 3rem !important;
    max-height: 3rem !important;
    height: 3rem !important;
}

.navbar > .content::before {
    height: 3rem !important;
}

.nav-btn-bar {
    height: 3rem !important;
    min-height: 3rem !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}

/* Apply 3rem button sizing ONLY to buttons, anchors, and icon wrappers, NOT input elements */
.nav-btn-bar > a.nav-btn,
.nav-btn-bar > button.nav-btn,
.nav-btn-bar > div.nav-btn,
a.nav-btn,
button.nav-btn,
div.nav-btn {
    height: 3rem !important;
    width: 3rem !important;
    min-width: 3rem !important;
    max-width: 3rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.15rem !important;
    line-height: 1 !important;
    padding: 0 !important;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.nav-btn-bar > a.nav-btn i,
.nav-btn-bar > button.nav-btn i,
.nav-btn-bar > div.nav-btn i,
.nav-btn i,
.nav-btn [class^="icon-"],
.nav-btn [class*=" icon-"],
.nav-btn .fa,
.nav-btn .fa-solid,
.nav-btn .fas,
.nav-btn .fab {
    font-size: 1.15rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.2s ease, color 0.2s ease;
}

#_nav-apoio {
    color: var(--menu-text);
}

#_nav-apoio:hover,
#_nav-apoio:focus {
    color: #e6c458 !important;
    background-color: rgba(230, 196, 88, 0.12) !important;
}

#_nav-apoio:hover i,
#_nav-apoio:focus i {
    transform: scale(1.18);
    color: #e6c458 !important;
}

#_nav-studio {
    color: var(--menu-text);
}

#_nav-studio:hover,
#_nav-studio:focus {
    color: #3397d4 !important;
    background-color: rgba(51, 151, 212, 0.12) !important;
}

#_nav-studio:hover i,
#_nav-studio:focus i {
    transform: scale(1.18);
    color: #3397d4 !important;
}

#_menu:hover [class^="icon-"] {
    transform: scale(1.1);
}

/* ==========================================================================
   Full Width Search Box & Input Fix
   ========================================================================== */
#_search-box {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 3rem !important;
    width: 100% !important;
    background-color: var(--body-bg) !important;
    display: flex !important;
    align-items: center !important;
    transform: translateY(-9999px);
    z-index: 100 !important;
}

#_search-box.show {
    transform: none !important;
}

#_search-box > div.nav-btn {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 3rem !important;
    height: 3rem !important;
    min-width: 3rem !important;
    max-width: 3rem !important;
    border: none !important;
    pointer-events: none !important;
    z-index: 102 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#_search-box > input[type="search"],
#_search-input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 3rem !important;
    line-height: 3rem !important;
    flex: 1 1 100% !important;
    display: block !important;
    padding-left: 3rem !important;
    padding-right: 3rem !important;
    font-size: 1rem !important;
    font-family: inherit !important;
    color: var(--body-color) !important;
    background-color: var(--body-bg) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    z-index: 101 !important;
    box-sizing: border-box !important;
}

#_search-box > button[type="reset"] {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 3rem !important;
    height: 3rem !important;
    min-width: 3rem !important;
    max-width: 3rem !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 102 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#_hits {
    top: 3rem !important;
    height: calc(100vh - 3rem) !important;
    z-index: 99 !important;
    background-color: var(--body-bg) !important;
}

/* ==========================================================================
   Mermaid Diagrams Styling (graph TD, flowcharts, diagrams)
   ========================================================================== */
.mermaid-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem 0;
    padding: 1.5rem 1rem;
    background-color: rgba(120, 120, 120, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.mermaid-container .mermaid {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mermaid-container .mermaid svg {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
}

.dark-mode .mermaid-container {
    background-color: rgba(15, 23, 42, 0.6);
    border-color: rgba(56, 189, 248, 0.2);
}