/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Jul 10 2026 | 07:50:22 */
#kkpk-navigator-standalone.kkpk-wrapper {
    width: 100% !important; max-width: 1280px !important; margin: 0 auto !important; padding: 40px 20px !important; background-color: #FFFFFF !important; border-radius: 25px !important;
}
    #kkpk-navigator-standalone.kkpk-wrapper *, #kkpk-navigator-standalone.kkpk-wrapper *::before, #kkpk-navigator-standalone.kkpk-wrapper *::after { box-sizing: border-box !important; }
    #kkpk-navigator-standalone .kkpk-header { text-align: center !important; max-width: 768px !important; margin: 0 auto 48px auto !important; }

    /*#kkpk-navigator-standalone .kkpk-main-desc { font-size: 15px !important; color: #64748B !important; line-height: 1.5 !important; margin: 0 !important; }*/
    #kkpk-navigator-standalone .kkpk-grid-container { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important; gap: 32px !important; align-items: stretch !important; }
    #kkpk-navigator-standalone .kkpk-selector-pane { grid-column: span 5 / span 5 !important; max-height: 540px !important; overflow-y: auto !important; padding-right: 8px !important; }
    #kkpk-navigator-standalone .kkpk-item-btn { width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 16px !important; background-color: #FFFFFF !important; border: 1px solid #E2E8F0 !important; border-radius: 16px !important; margin-bottom: 12px !important; cursor: pointer !important; transition: all 0.2s ease !important; box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important; text-align: left !important; font-family: inherit !important; }
    #kkpk-navigator-standalone .kkpk-item-btn:hover { background-color: rgba(224, 236, 236, 0.3) !important; border-color: rgba(10, 84, 79, 0.4) !important; }
    #kkpk-navigator-standalone .kkpk-item-body { min-width: 0 !important; flex: 1 1 0% !important; display: block !important; }
    #kkpk-navigator-standalone .kkpk-item-title { display: block !important; font-size: 18px !important; font-weight: 700 !important; color: #0F172A !important; line-height: 1.3 !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: break-word !important; }
    #kkpk-navigator-standalone .kkpk-item-sub { display: block !important; font-size: 15px !important; color: #64748B !important; line-height: 1.4 !important; margin-top: 4px !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: break-word !important; }
    #kkpk-navigator-standalone .kkpk-item-arrow { color: #94A3B8 !important; margin-left: 12px !important; flex-shrink: 0 !important; font-size: 12px !important; }
    #kkpk-navigator-standalone .kkpk-item-btn.kkpk-state-active { background-color: #E0ECEC !important; border: 2px solid rgba(10, 84, 79, 0.6) !important; padding: 15px !important; }
    #kkpk-navigator-standalone .kkpk-item-btn.kkpk-state-active .kkpk-item-title { color: #0A544F !important; }
    #kkpk-navigator-standalone .kkpk-item-btn.kkpk-state-active .kkpk-item-sub { color: #475569 !important; }
    #kkpk-navigator-standalone .kkpk-item-btn.kkpk-state-active .kkpk-item-arrow { color: #0A544F !important; }
    #kkpk-navigator-standalone .kkpk-display-card { grid-column: span 7 / span 7 !important; background: #0A544F !important; background-color: #0A544F !important; border-radius: 24px !important; padding: 32px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; position: relative !important; box-shadow: 0 10px 25px -5px rgba(10, 84, 79, 0.3) !important; min-height: 460px !important; }
    #kkpk-navigator-standalone .kkpk-card-inner { display: block !important; }
    #kkpk-navigator-standalone .kkpk-card-badge { font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: #E0ECEC !important; margin-bottom: 24px !important; }
    #kkpk-navigator-standalone .kkpk-card-badge i { margin-right: 6px !important; }
    #kkpk-navigator-standalone .kkpk-card-header-group { margin-bottom: 24px !important; }
    #kkpk-navigator-standalone .kkpk-module-number { display: block !important; font-size: 13px !important; font-weight: 600 !important; color: #CBD5E1 !important; margin-bottom: 4px !important; }
    #kkpk-navigator-standalone .kkpk-module-title { font-size: 22px !important; font-weight: 800 !important; color: #FFFFFF !important; line-height: 1.25 !important; margin: 0 !important; }
    #kkpk-navigator-standalone .kkpk-skills-layout { margin-bottom: 24px !important; }
    #kkpk-navigator-standalone .kkpk-skills-title { font-size: 18px !important; font-weight: 700 !important; color: #E0ECEC !important; margin: 0 0 12px 0 !important; }
    #kkpk-navigator-standalone .kkpk-skills-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
    #kkpk-navigator-standalone .kkpk-skills-list li { display: flex !important; align-items: flex-start !important; margin-bottom: 10px !important; }
    #kkpk-navigator-standalone .kkpk-skills-list i { color: #E0ECEC !important; font-size: 14px !important; margin-top: 3px !important; margin-right: 10px !important; flex-shrink: 0 !important; }
    #kkpk-navigator-standalone .kkpk-skills-list span { color: #F8FAFC !important; line-height: 1.4 !important; }
    #kkpk-navigator-standalone .kkpk-card-footer { display: flex !important; align-items: center !important; justify-content: space-between !important; border-top: 1px solid rgba(224, 236, 236, 0.25) !important; padding-top: 20px !important; margin-top: 20px !important; }
    .kkpk-scrollbar::-webkit-scrollbar { width: 5px; }
    .kkpk-scrollbar::-webkit-scrollbar-track { background: #F1F5F9; border-radius: 4px; }
    .kkpk-scrollbar::-webkit-scrollbar-thumb { background: rgba(10, 84, 79, 0.4); border-radius: 4px; }
    .kkpk-scrollbar::-webkit-scrollbar-thumb:hover { background: #0A544F; }
    @media (max-width: 1023px) {
        #kkpk-navigator-standalone .kkpk-grid-container { display: block !important; }
        #kkpk-navigator-standalone .kkpk-selector-pane { max-height: none !important; padding-right: 0 !important; margin-bottom: 32px !important; }
        #kkpk-navigator-standalone .kkpk-display-card { min-height: auto !important; }
    }
    @media (max-width: 639px) {
        #kkpk-navigator-standalone.kkpk-wrapper { padding: 24px 12px !important; }
        #kkpk-navigator-standalone .kkpk-main-title { font-size: 22px !important; }
        #kkpk-navigator-standalone .kkpk-display-card { padding: 20px !important; }
        #kkpk-navigator-standalone .kkpk-module-title { font-size: 18px !important; }
        #kkpk-navigator-standalone .kkpk-card-footer { flex-direction: column !important; gap: 16px !important; text-align: center !important; }
    }