/* WETWORKSLAB skin for the WHMCS support pages (contact, tickets, knowledge base, announcements, downloads).
   Loaded only on those templates by includes/hooks/wlp_pages.php. CSS only. */
#main-body { --y: #fedc45; --y-hv: #ffe673; --line: rgba(255,255,255,.10); --line2: rgba(255,255,255,.16); --muted: #a9a9a9; --panel: #181818;
  background: radial-gradient(60% 40% at 100% 0%, rgba(254,220,69,.07), rgba(254,220,69,0) 60%), #121212 !important; padding-block: 48px 72px !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; color: #e0e0e0; }
#main-body > .container { max-width: 1240px; }
#main-body :is(h1, h2, h3, h4, h5, .card-title) { color: #fff !important; letter-spacing: normal; }
#main-body .header-lined h1, #main-body .primary-content > h1:first-child { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.7rem) !important; font-weight: 800 !important; margin-bottom: 6px !important; }
#main-body .breadcrumb { background: transparent !important; padding: 0 !important; margin-bottom: 26px !important; font-size: .88rem; }
#main-body .breadcrumb-item, #main-body .breadcrumb-item a { color: var(--muted) !important; } #main-body .breadcrumb-item.active { color: #fff !important; }
#main-body .breadcrumb-item + .breadcrumb-item::before { color: #555 !important; }
#main-body a:not(.btn):not(.list-group-item):not(.page-link):not(.tile) { color: var(--y); }
#main-body :is(.text-muted, small) { color: var(--muted) !important; }

/* cards, sidebar */
#main-body :is(.card, .TM-card, .panel) { background: var(--panel) !important; border: 1px solid var(--line) !important; border-radius: .75rem !important; box-shadow: none !important; color: #e0e0e0 !important; }
#main-body .card-header { background: transparent !important; border-bottom: 1px solid var(--line) !important; padding: 14px 18px !important; }
#main-body .card-sidebar .card-title { font-size: .95rem !important; font-weight: 700 !important; }
#main-body .list-group-item { background: transparent !important; border-color: var(--line) !important; color: #e0e0e0 !important; }
#main-body .list-group-item-action:hover { background: rgba(254,220,69,.06) !important; color: var(--y) !important; }
#main-body .card-sidebar .list-group-item.active { background: rgba(254,220,69,.1) !important; color: var(--y) !important; border-left: 3px solid var(--y) !important; }
#main-body :is(.fas, .far, .fal, .fad):not(.btn *) { color: var(--y); }

/* knowledge base */
#main-body :is(.bg-primary, .kb-search, .search-container) { background: radial-gradient(80% 140% at 100% 0%, rgba(254,220,69,.14), rgba(254,220,69,0) 60%), #161616 !important;
  border: 1px solid rgba(254,220,69,.35) !important; border-radius: .9rem !important; }
#main-body :is(.bg-primary, .kb-search) .form-control { background: #0f0f0f !important; }
#main-body .kb-article, #main-body .primary-content .list-group-item-action { background: var(--panel) !important; border: 1px solid var(--line) !important; border-radius: .6rem !important; margin-bottom: 8px; padding: 14px 16px !important; }
#main-body .primary-content .list-group { gap: 0; } #main-body .primary-content .list-group-item-action:hover { border-color: rgba(254,220,69,.5) !important; }

/* announcements */
#main-body .annuncement-item, #main-body .announcement-details { background: var(--panel) !important; border: 1px solid var(--line) !important; border-radius: .75rem !important; padding: 20px 22px !important; margin-bottom: 14px !important; }
#main-body .announcement-date { color: var(--y) !important; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; }
#main-body .annuncement-body { color: #cfcfcf !important; }

/* contact tiles */
#main-body .tile.stats { background: var(--panel) !important; border: 1px solid var(--line) !important; border-radius: .9rem !important; color: #fff !important; transition: border-color .15s, transform .15s; }
#main-body .tile.stats:hover { border-color: var(--y) !important; transform: translateY(-2px); }
#main-body .tile.stats .title :is(span, .text-base) { color: #fff !important; } #main-body .tile.stats .decs { color: var(--muted) !important; }

/* forms */
#main-body :is(.form-control, .custom-file-label, select, textarea) { background: #0f0f0f !important; border: 1px solid var(--line2) !important; color: #fff !important; border-radius: .55rem !important; box-shadow: none !important; }
#main-body :is(.form-control, textarea):focus { border-color: var(--y) !important; }
#main-body label { color: #d6d6d6 !important; font-weight: 600; }
#main-body .btn { border-radius: .55rem !important; font-weight: 700 !important; box-shadow: none !important; }
#main-body .btn-primary { background: var(--y) !important; border-color: var(--y) !important; color: #000 !important; }
#main-body .btn-primary:hover { background: var(--y-hv) !important; border-color: var(--y-hv) !important; }
#main-body :is(.btn-default, .btn-secondary, .btn-link) { background: transparent !important; border: 1px solid var(--line2) !important; color: #fff !important; }
#main-body .btn-link { border: 0 !important; color: var(--y) !important; }
#main-body .btn-group .btn.active, #main-body .btn-group .btn:active { background: var(--y) !important; border-color: var(--y) !important; color: #000 !important; }
#main-body :is(.md-editor, .markdown-editor) { border-color: var(--line2) !important; border-radius: .55rem !important; }
#main-body .alert { background: #1a1a1a !important; border: 1px solid var(--line2) !important; color: #e0e0e0 !important; border-radius: .6rem !important; }
#main-body .alert-success { border-color: rgba(60,207,106,.5) !important; } #main-body .alert-danger { border-color: rgba(255,95,87,.5) !important; }
#main-body .pagination .page-link { background: transparent !important; border: 1px solid var(--line2) !important; color: #fff !important; border-radius: .4rem !important; margin: 0 2px; }
#main-body .pagination .active .page-link { background: var(--y) !important; border-color: var(--y) !important; color: #000 !important; }
/* wider: same 1240px as the header */
#main-body .main-container-nosidebar { max-width: 1240px !important; }