#dynamiciFrame {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100vw;
    height: 90vh;
}

#breadcrumbs-container a {
    font-size: 14px;
}
.navBarLinks svg {
    font-size: 15px;
    position: relative;
    top: 0;
    bottom: 0;
    margin: auto;
}
.navBarLinks {
    height: 40px;
    display: flex;
    align-items: center;
}
.currentPage {
    font-weight: 800;
    color: var(--color-link);
    letter-spacing: 1.15px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
}

/* Custom scrollbar for guide navigation */
.custom-scroll::-webkit-scrollbar {
    width: 6px;
}

.custom-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.custom-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Link hover effects */
.nav-link {
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

.nav-link:hover {
    background: rgba(113, 128, 150, 0.1);
}

.nav-link.active {
    background: rgba(124, 58, 237, 0.1) !important;
    border-left-color: #8b5cf6;
}

/* Accordion animations */
.accordion-content {
    /** display: none;**/
}

.rotate-180 {
    transform: rotate(180deg);
}

/* Glow effect for active sections */
.glow-effect {
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
}

/* Responsive adjustments */
4@media (max-width: 768px) {
    .accordion-header {
        padding: 0.75rem 1rem;
    }

    .nav-link {
        padding: 0.5rem 1rem;
    }
}






/*/////////////////////////////////////////////////////////*/
/*////////////////////   S  V  G  s  //////////////////////*/
/*/////////////////////////////////////////////////////////*/
svg.global {
    background-color: transparent;
    display: block;
}


/*///////////////////////  C O L O U R S  ////////////*/
/*////////////////////////////////////////////////////*/
svg.darkGray path {
    fill: #30363d;
}
svg.lightGray path {
    fill: #c8c8c8;
}
svg.blue path {
    fill: #58a6ff;
}
svg.red path {
    fill: #f85149;
}
svg.white path {
    fill: #f8f8f8;
}
svg.black path {
    fill: #0d1117;
}
svg.green path {
    fill: #3fb950;
}
svg.yellow path {
    fill: #f9e71e;
}
svg.orange path {
    fill: #ff8c00;
}
svg.purple path {
    fill: #8b5cf6;
}
svg.pink path {
    fill: #ff69b4;
}
svg.cyan path {
    fill: #00bcd4;
}
svg.teal path {
    fill: #20b2aa;
}
svg.lime path {
    fill: #32cd32;
}
svg.indigo path {
    fill: #4b0082;
}
svg.violet path {
    fill: #8a2be2;
}
svg.magenta path {
    fill: #ff00ff;
}
svg.emerald path {
    fill: #50c878;
}
svg.amber path {
    fill: #ffbf00;
}
svg.rose path {
    fill: #ff007f;
}
svg.slate path {
    fill: #708090;
}
svg.zinc path {
    fill: #71717a;
}
svg.stone path {
    fill: #78716c;
}
svg.neutral path {
    fill: #737373;
}
svg.sky path {
    fill: #0ea5e9;
}
svg.azure path {
    fill: #007fff;
}
svg.mint path {
    fill: #00ff7f;
}
svg.coral path {
    fill: #ff7f50;
}
svg.salmon path {
    fill: #fa8072;
}
svg.gold path {
    fill: #ffd700;
}
svg.silver path {
    fill: #c0c0c0;
}
svg.bronze path {
    fill: #cd7f32;
}
svg.crimson path {
    fill: #dc143c;
}
svg.navy path {
    fill: #000080;
}
svg.maroon path {
    fill: #800000;
}
svg.olive path {
    fill: #808000;
}
svg.aqua path {
    fill: #00ffff;
}
svg.fuchsia path {
    fill: #ff00ff;
}
/*////////////////////////////////////////////////////*/



/*////////////////////  S H A D E S  ///////////////////*/
/*///////////////////////////  H U E S  ////////////////*/
svg.darkBlue path {
    fill: #1f2937;
}
svg.lightBlue path {
    fill: #bfdbfe;
}
svg.darkGreen path {
    fill: #065f46;
}
svg.lightGreen path {
    fill: #bbf7d0;
}
svg.darkRed path {
    fill: #7f1d1d;
}
svg.lightRed path {
    fill: #fecaca;
}
svg.darkPurple path {
    fill: #581c87;
}
svg.lightPurple path {
    fill: #ddd6fe;
}
svg.darkOrange path {
    fill: #9a3412;
}
svg.lightOrange path {
    fill: #fed7aa;
}
svg.darkYellow path {
    fill: #a16207;
}
svg.lightYellow path {
    fill: #fef3c7;
}
/*////////////////////////////////////////////////////*/



/*//////////////////////////  F I L T E R E D  ///////*/
/*////////////////////////////////////////////////////*/
svg.shadow {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}
svg.blur {
    filter: blur(0.5px);
}
svg.brightness {
    filter: brightness(1.2);
}
svg.contrast {
    filter: contrast(1.2);
}
svg.grayscale {
    filter: grayscale(100%);
}
svg.sepia {
    filter: sepia(100%);
}
svg.invert {
    filter: invert(100%);
}
svg.hueRotate path {
    filter: hue-rotate(90deg);
}
svg.saturate path {
    filter: saturate(150%);
}
/*////////////////////////////////////////////////////*/



/*//////////////////////////  S I Z I N G ////////////*/
/*////////////////////////////////////////////////////*/
svg.tiny {
    width: 0.75rem;
    height: 0.75rem;
}
svg.small {
    width: 0.975rem;
    height: 0.975rem;
}
svg.medium {
    width: 1.5625rem;
    height: 1.5625rem;
}
svg.large {
    width: 2.25rem;
    height: 2.25rem;
}
svg.xlarge {
    width: 3.5rem;
    height: 3.5rem;
}
svg.xxlarge {
    width: 4.5rem;
    height: 4.5rem;
}
svg.huge {
    width: 6rem;
    height: 6rem;
}
svg.massive {
    width: 8rem;
    height: 8rem;
}

svg.xs {
    width: 1rem;
    height: 1rem;
}
svg.sm {
    width: 1.25rem;
    height: 1.25rem;
}
svg.md {
    width: 1.75rem;
    height: 1.75rem;
}
svg.lg {
    width: 2.5rem;
    height: 2.5rem;
}
svg.xl {
    width: 3rem;
    height: 3rem;
}
svg.xxl {
    width: 4rem;
    height: 4rem;
}

svg.rounded {
    border-radius: 0.375rem;
}
svg.circular {
    border-radius: 50%;
}
/*////////////////////////////////////////////////////*/



/*/////////////////  A N I M A T I O N S  ////////////*/
/*////////////////////////////////////////////////////*/
svg.spin {
    animation: spin 1s linear infinite;
}
svg.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
svg.bounce {
    animation: bounce 1s infinite;
}
svg.ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
svg.wiggle {
    animation: wiggle 1s ease-in-out infinite;
}
svg.fadeIn {
    animation: fadeIn 0.5s ease-in-out;
}
svg.slideIn {
    animation: slideIn 0.3s ease-out;
}
svg.zoomIn {
    animation: zoomIn 0.3s ease-out;
}
/*////////////////////////////////////////////////////*/



/*//////////////  I N T E R A C T I O N S   //////////*/
/*////////////////////////////////////////////////////*/
svg.hover:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}
svg.clickable {
    cursor: pointer;
    transition: all 0.2s ease;
}
svg.clickable:hover {
    opacity: 0.8;
}
svg.disabled {
    opacity: 0.5;
    pointer-events: none;
}
svg.active {
    transform: scale(0.95);
}
/*////////////////////////////////////////////////////*/




/*/////////////////  B A C K G R O U N D S  //////////*/
/*///////////////////////  B O R D E R S  ////////////*/
svg.bgWhite {
    background-color: #ffffff;
}
svg.bgBlack {
    background-color: #000000;
}
svg.bgGray {
    background-color: #f3f4f6;
}
svg.bgDark {
    background-color: #1f2937;
}
svg.bgBlue {
    background-color: #dbeafe;
}
svg.bgGreen {
    background-color: #d1fae5;
}
svg.bgRed {
    background-color: #fee2e2;
}
svg.bgYellow {
    background-color: #fef3c7;
}
svg.bgPurple {
    background-color: #ede9fe;
}
svg.bgPink {
    background-color: #fce7f3;
}

svg.border {
    border: 1px solid #e5e7eb;
}
svg.borderDark {
    border: 1px solid #374151;
}
svg.borderLight {
    border: 1px solid #f3f4f6;
}
svg.borderThick {
    border: 2px solid #6b7280;
}
svg.borderDashed {
    border: 1px dashed #9ca3af;
}
svg.borderDotted {
    border: 1px dotted #9ca3af;
}
svg.icon-beat-fade {
    animation: beatFade var(--beat-fade-duration, 1.5s) ease-in-out infinite;
    transform-origin: center;
    display: inline-block;
}
/*////////////////////////////////////////////////////*/



/*//////////////////  K E Y F R A M E S  /////////////*/
/*////////////////////////////////////////////////////*/
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
@keyframes bounce {
    0%, 20%, 53%, 80%, 100% { transform: translate3d(0, 0, 0); }
    40%, 43% { transform: translate3d(0, -30px, 0); }
    70% { transform: translate3d(0, -15px, 0); }
    90% { transform: translate3d(0, -4px, 0); }
}
@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}
@keyframes wiggle {
    0%, 7% { transform: rotateZ(0); }
    15% { transform: rotateZ(-15deg); }
    20% { transform: rotateZ(10deg); }
    25% { transform: rotateZ(-10deg); }
    30% { transform: rotateZ(6deg); }
    35% { transform: rotateZ(-4deg); }
    40%, 100% { transform: rotateZ(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideIn {
    from { transform: translateY(-10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes zoomIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@keyframes beatFade {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(var(--beat-fade-scale, 1.075));
        opacity: var(--beat-fade-opacity, 0.67);
    }
}
/*////////////////////////////////////////////////////*/



/*///////////////  S P E C I A L  ////////////////////*/
/*/////////////////////  C A S E S  //////////////////*/
.nav-item-icon .small {
 width: 0.5rem;
 height: 0.5rem;
 opacity: 0.65;
}






#outageBanner.hide #scroll-nav {
    opacity: 1;
}

#bannerWrapper {
    position: fixed;
    top: 0;
    display: flex;
    justify-items: center;
    left: 0;
    right: 0;
    margin-left: 5%;
    margin-top: 1%;
    z-index: 50;
    width: 100vw;
    /* padding-left: 1rem; */
    /* padding-right: 1rem; */
    height: 100px;
    font-family: var(--font-text);
    user-select: none;
}

#outageBanner {
    background-color: rgba(206, 80, 80, 0.95);
    color: var(--color-text-primary);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.64);
    padding: 18px 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.7s ease, opacity 0.6s ease;
    width: 90vw !important;
    height: auto;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid var(--color-nav-item);
    position: absolute;
    left: 0;
    right: 0;
    top: 50px;
    /* margin: auto !important; */
}

.banner-content {
    display: flex;
    align-content: center;
    width: 100%;
    max-width: 1280px;
    gap: 20px;
}

.icon {
    flex-shrink: 0;
    color: #fff;
    margin-top: 2px;
}

.banner-text {
    flex-grow: 1;
}

.banner-text .main-message {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.banner-text .sub-message {
    font-size: 13px;
    font-weight: normal;
    margin-top: 6px;
    opacity: 0.9;
}

.close-button {
    background: transparent;
    border: none;
    color: whitesmoke;
    cursor: pointer;
    transition: opacity 0.3s ease;
    padding: 4px;
    margin-top: 2px;
}

.close-button:hover {
    opacity: 0.7;
}

@keyframes bannerFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-100px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

#outageBanner {
    opacity: 0;
    transform: translateY(-100px);
    animation: bannerFadeIn 0.8s ease-out 1s forwards;
}

#outageBanner.hide {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}

.main-message {
    font-size: 15px;
}

.hideOtherNav {
    opacity: 0;
    transition: opacity 0.45s ease-in-out;
}










     /* Container Styling */
 .guide-container {
     position: relative;
     width: 100%;
     max-width: 400px;
     background-color: transparent;
     color: #ffffff;

 }
.hidden {
    display: none;
}

/* Search Box */
.search-box {
    padding: 16px;
}
.search-wrapper {
    position: relative;
}
.search-input {
    width: 100%;
    padding: 8px 12px 8px 36px;
    background-color: #2e2e3a;
    border: 1px solid #555;
    border-radius: 6px;
    color: #eee;
}
.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #aaa;
}

/* Progress */
.progress-box {
    padding: 8px 16px 16px;
}
.progress-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}
.progress-text {
    font-size: 12px;
    color: #4db0f7;
}
.progress-percent {
    font-size: 12px;
    color: #aaa;
}
.progress-bar-container {
    width: 100%;
    background-color: #3b3b3b;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
}
.progress-bar {
    height: 6px;
    background: linear-gradient(to right, #4db0f7, #9b59b6);
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* Accordion */
.accordion-wrapper {
    max-height: calc(100vh - 180px);
    overflow-y: auto;
}
.accordion-group {
    border-left: 4px solid #4db0f7;
    margin-bottom: 10px;
}
.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: #2e2e3a;
    cursor: pointer;
    transition: background-color 0.3s;
}
.accordion-header:hover {
    background-color: #3a3a4a;
}
.accordion-title {
    display: flex;
    align-items: center;
}
.accordion-icon {
    color: #4db0f7;
    margin-right: 8px;
}
.accordion-label {
    font-weight: 500;
    letter-spacing: 2px;
}
.accordion-chevron {
    color: #aaa;
    font-size: 12px;
    transition: transform 0.3s ease;
}
.accordion-content {
    padding: 0 16px 10px;
}

/* Nav Link */
.nav-link {
    display: flex;
    align-items: center;
    padding: 10px 0;
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s;

    position : relative; z-index: 30;
}
.nav-link:hover .link-dot {
    background-color: #9b59b6;
}
.nav-link:hover .link-text {
    color: #fff;
}
.nav-link:hover .link-external {
    opacity: 1;
}
.link-dot {
    width: 8px;
    height: 8px;
    background-color: transparent;
    border-radius: 50%;
    margin-right: 10px;
    transition: background-color 0.3s;
}
.link-text {
    flex-grow: 1;
    color: #ccc;
    transition: color 0.3s;
}
.link-external {
    opacity: 0;
    transition: opacity 0.3s;
}

/* Floating Action Button */
.fab-container {
    position: absolute;
    bottom: 16px;
    right: 16px;
}
.fab-button {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(to bottom right, #4db0f7, #9b59b6);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s, box-shadow 0.3s;
}
.fab-button:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}



/*/////////////  P R O G R E S S I V E  ///////////////////*/
/*////////////////  W E B  A P P S  ///////////////////////*/
.guide-section {
     margin-bottom: 1.5rem;
 }
.guide-section-title {
    color: #8b5cf6;
    font-size: 15px;
    font-weight: 600;
    margin: 12px 0 8px 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.guide-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.guide-link {
    color: #c9d1d9;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}
.guide-link:hover {
    background: rgba(110, 118, 129, 0.1);
    color: #58a6ff;
}
.guide-link.active {
    background: rgba(56, 139, 253, 0.1);
    color: #58a6ff;
    border-left: 2px solid #58a6ff;
}



/*///////////////  S E A R C H  ///////////////////////////*/
/*////////  M O D A L  &  R E S U L T S  //////////////////*/

.search-result-item {
    transition: all 0.45s ease;
}
.search-result-item:hover {
    background-color: rgba(59, 130, 246, 0.1);
}
.searchOverlayCon {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.65s ease, transform 0.65s ease;
}
.search-overlay.show .searchOverlayCon {
    opacity: 1;
    transform: translateY(0);
}
.searchBar {
    background: transparent !important;
}

.search-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    backdrop-filter: blur(10px);
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.65s ease-in-out;
}
.search-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

#closeSearch {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
}
.footer span {
    font-size: 10px;
    opacity: 0.55;
    transition: opacity 0.45s ease-in-out;

}
.command-palette:hover .footer span {
    opacity: 1;
    transition: opacity 0.45s ease-in-out;
}



/*/////////////  P R O G R E S S   ////////////////////////*/
/*//////  B U T T O N  &  M O D A L  //////////////////////*/
.progress-button {
    margin: 20px auto 0;
    padding: 8px 16px;
    background: #238636;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: block;
    font-size: 14px;
}
.progress-button:disabled {
    background: #2ea043;
    cursor: default;
    opacity: 0.8;
}
.progress-button:disabled::after {
    content: " ✓";
    margin-left: 5px;
}

.progress-modal {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(28, 34, 43, 0.9);
     backdrop-filter: blur(5px);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 1000;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.3s ease;
 }
.progress-modal.active {
    opacity: 1;
    pointer-events: all;
}
.modal-content {
    background: #1f2937;
    border-radius: 12px;
    padding: 24px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}
.progress-modal.active .modal-content {
    transform: translateY(0);
}
.modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: #f3f4f6;
}
.modal-buttons {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}
.modal-btn {
    flex: 1;
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.modal-btn-save {
    background: #2563eb;
    color: white;
    border: none;
}
.modal-btn-save:hover {
    background: #1d4ed8;
}
.modal-btn-discard {
    background: transparent;
    color: #9ca3af;
    border: 1px solid #4b5563;
}
.modal-btn-discard:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #f3f4f6;
}
.modal-btn-cancel {
    flex: 1;
    padding: 10px 16px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    background: #374151;
    color: white;
    border: none;
    transition: all 0.2s ease;
}
.modal-btn-cancel:hover {
    background: #4b5563;
}



/*/////////////  S E A R C H  /////////////////////////////*/
/*//////////////////  M O D A L  //////////////////////////*/
.contentWrapper {
     font-family: var(--font-text);
     background-color: rgba(0, 0, 0, 0.5);
     display: flex;
     justify-content: center;
     align-items: flex-start;
     padding-top: 100px;
     margin: 0;
     height: 100vh;
 }
.command-palette {
    max-width: 90vw;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 2rem;
}

.search-container {
    padding: 16px;
    border-bottom: 1px solid #e5e7eb;
}
.inputGlobal {
    width: 100%;
    padding: 8px 12px;
    font-family: var(--font-text);
    font-size: 14px;
    line-height: 20px;
    background-color: #e5e7eb;
    border: 1.5px solid #6B7280;
    border-radius: 6px;
    outline: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    
}
.inputGlobal:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.inputGlobal::placeholder {
    color: #9ca3af;
}

.results-header {
    padding: 8px 16px;
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.results-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 300px;
    overflow-y: auto;
}
.result-item {
    padding: 8px 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}
.result-item:hover {
    background-color: #f9fafb;
}
.result-item.active {
    background-color: #f3f4f6;
}
.result-title {
    font-size: 14px;
    color: #111827;
    font-weight: 500;
}
.result-description {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

.footer {
    padding: 8px 16px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #6b7280;
}

.keyboard-shortcut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #f3f4f6;
    border-radius: 4px;
    padding: 2px 6px;
    margin-left: 8px;
}