/* * KING TV WHMCS Master CSS * Central place for KING TV WHMCS visual overrides. * No frontend JavaScript. */ /* ========================================================= GLOBAL SIDEBAR CLEANUP Remove unwanted WHMCS support links everywhere ========================================================= */ a[href*="knowledgebase.php"], a[href*="downloads.php"], a[href*="serverstatus.php"], a[href*="networkissues.php"], a[href*="networkstatus.php"], li:has(a[href*="knowledgebase.php"]), li:has(a[href*="downloads.php"]), li:has(a[href*="serverstatus.php"]), li:has(a[href*="networkissues.php"]), li:has(a[href*="networkstatus.php"]), .list-group-item:has(a[href*="knowledgebase.php"]), .list-group-item:has(a[href*="downloads.php"]), .list-group-item:has(a[href*="serverstatus.php"]), .list-group-item:has(a[href*="networkissues.php"]), .list-group-item:has(a[href*="networkstatus.php"]) { display: none !important; } /* ========================================================= VIEW TICKET PAGE Scoped by ticket/reply content only ========================================================= */ body:has(#main-body .ticket-reply), body:has(#main-body .ticketReply), body:has(#main-body .ticketreply), body:has(#main-body textarea[name="message"]), body:has(#main-body textarea[name="reply"]) { background: linear-gradient(180deg, #020617 0%, #06113c 52%, #020617 100%) !important; background-color: #020617 !important; } body:has(#main-body .ticket-reply) #main-body, body:has(#main-body .ticketReply) #main-body, body:has(#main-body .ticketreply) #main-body, body:has(#main-body textarea[name="message"]) #main-body, body:has(#main-body textarea[name="reply"]) #main-body { background: transparent !important; } body:has(#main-body .ticket-reply) #main-body .container, body:has(#main-body .ticketReply) #main-body .container, body:has(#main-body .ticketreply) #main-body .container, body:has(#main-body textarea[name="message"]) #main-body .container, body:has(#main-body textarea[name="reply"]) #main-body .container { max-width: 1120px !important; } /* Reply panel */ #main-body .panel:has(textarea[name="message"]), #main-body .panel:has(textarea[name="reply"]), #main-body .card:has(textarea[name="message"]), #main-body .card:has(textarea[name="reply"]) { background: linear-gradient(180deg, rgba(8,23,61,.96), rgba(2,6,23,.98)) !important; border: 1px solid rgba(16,185,129,.45) !important; border-radius: 18px !important; color: #eef6ff !important; box-shadow: 0 18px 42px rgba(0,0,0,.26) !important; overflow: hidden !important; } #main-body .panel:has(textarea[name="message"]) > .panel-heading, #main-body .panel:has(textarea[name="reply"]) > .panel-heading, #main-body .card:has(textarea[name="message"]) > .card-header, #main-body .card:has(textarea[name="reply"]) > .card-header { background: linear-gradient(135deg, #10b981, #0f766e) !important; color: #ffffff !important; border-bottom: 1px solid rgba(255,255,255,.12) !important; padding: 14px 18px !important; } #main-body .panel:has(textarea[name="message"]) > .panel-heading *, #main-body .panel:has(textarea[name="reply"]) > .panel-heading *, #main-body .card:has(textarea[name="message"]) > .card-header *, #main-body .card:has(textarea[name="reply"]) > .card-header * { color: #ffffff !important; } /* Force reply body open using CSS only */ #main-body .panel:has(textarea[name="message"]) .collapse, #main-body .panel:has(textarea[name="reply"]) .collapse, #main-body .panel:has(textarea[name="message"]) .panel-collapse, #main-body .panel:has(textarea[name="reply"]) .panel-collapse, #main-body .card:has(textarea[name="message"]) .collapse, #main-body .card:has(textarea[name="reply"]) .collapse { display: block !important; height: auto !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; } /* Reply form spacing */ #main-body .panel:has(textarea[name="message"]) .panel-body, #main-body .panel:has(textarea[name="reply"]) .panel-body, #main-body .card:has(textarea[name="message"]) .card-body, #main-body .card:has(textarea[name="reply"]) .card-body, #main-body form:has(textarea[name="message"]), #main-body form:has(textarea[name="reply"]) { padding-top: 22px !important; } /* Clean labels */ #main-body .panel:has(textarea[name="message"]) label, #main-body .panel:has(textarea[name="reply"]) label, #main-body .panel:has(textarea[name="message"]) .control-label, #main-body .panel:has(textarea[name="reply"]) .control-label, #main-body .card:has(textarea[name="message"]) label, #main-body .card:has(textarea[name="reply"]) label, #main-body form:has(textarea[name="message"]) label, #main-body form:has(textarea[name="reply"]) label { position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; display: block !important; float: none !important; clear: both !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 0 8px 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; color: #dbeafe !important; font-size: 13px !important; line-height: 1.25 !important; font-weight: 900 !important; text-align: left !important; text-transform: none !important; letter-spacing: 0 !important; white-space: normal !important; } /* Horizontal WHMCS form fields inside reply panel become clean stacked fields */ #main-body .panel:has(textarea[name="message"]) .form-group, #main-body .panel:has(textarea[name="reply"]) .form-group, #main-body form:has(textarea[name="message"]) .form-group, #main-body form:has(textarea[name="reply"]) .form-group { position: static !important; display: block !important; clear: both !important; margin: 0 0 14px 0 !important; padding: 0 !important; } #main-body .panel:has(textarea[name="message"]) .form-group > label[class*="col-"], #main-body .panel:has(textarea[name="reply"]) .form-group > label[class*="col-"], #main-body form:has(textarea[name="message"]) .form-group > label[class*="col-"], #main-body form:has(textarea[name="reply"]) .form-group > label[class*="col-"] { width: 100% !important; max-width: 100% !important; flex: none !important; float: none !important; text-align: left !important; } #main-body .panel:has(textarea[name="message"]) .form-group > div[class*="col-"], #main-body .panel:has(textarea[name="reply"]) .form-group > div[class*="col-"], #main-body form:has(textarea[name="message"]) .form-group > div[class*="col-"], #main-body form:has(textarea[name="reply"]) .form-group > div[class*="col-"] { width: 100% !important; max-width: 100% !important; flex: none !important; float: none !important; padding-left: 0 !important; padding-right: 0 !important; } /* Inputs */ #main-body .panel:has(textarea[name="message"]) input[type="text"], #main-body .panel:has(textarea[name="reply"]) input[type="text"], #main-body .panel:has(textarea[name="message"]) input[type="email"], #main-body .panel:has(textarea[name="reply"]) input[type="email"], #main-body form:has(textarea[name="message"]) input[type="text"], #main-body form:has(textarea[name="reply"]) input[type="text"], #main-body form:has(textarea[name="message"]) input[type="email"], #main-body form:has(textarea[name="reply"]) input[type="email"] { width: 100% !important; min-height: 48px !important; background: rgba(2,6,23,.92) !important; border: 1px solid rgba(96,165,250,.34) !important; border-radius: 11px !important; color: #ffffff !important; padding: 12px 14px !important; font-size: 15px !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.025) !important; } /* Toolbar compact */ #main-body .panel:has(textarea[name="message"]) .btn-toolbar, #main-body .panel:has(textarea[name="reply"]) .btn-toolbar, #main-body .panel:has(textarea[name="message"]) .md-header, #main-body .panel:has(textarea[name="reply"]) .md-header, #main-body form:has(textarea[name="message"]) .btn-toolbar, #main-body form:has(textarea[name="reply"]) .btn-toolbar, #main-body form:has(textarea[name="message"]) .md-header, #main-body form:has(textarea[name="reply"]) .md-header { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; align-items: center !important; padding: 8px !important; margin: 0 0 10px 0 !important; background: rgba(2,6,23,.72) !important; border: 1px solid rgba(96,165,250,.18) !important; border-radius: 12px !important; } #main-body .panel:has(textarea[name="message"]) .btn-toolbar .btn, #main-body .panel:has(textarea[name="reply"]) .btn-toolbar .btn, #main-body .panel:has(textarea[name="message"]) .md-header .btn, #main-body .panel:has(textarea[name="reply"]) .md-header .btn, #main-body form:has(textarea[name="message"]) .btn-toolbar .btn, #main-body form:has(textarea[name="reply"]) .btn-toolbar .btn, #main-body form:has(textarea[name="message"]) .md-header .btn, #main-body form:has(textarea[name="reply"]) .md-header .btn { width: auto !important; min-width: 32px !important; max-width: none !important; height: 32px !important; min-height: 32px !important; padding: 0 8px !important; margin: 0 !important; flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; line-height: 1 !important; } /* Text area and upload */ #main-body .panel:has(textarea[name="message"]) textarea, #main-body .panel:has(textarea[name="reply"]) textarea, #main-body form:has(textarea[name="message"]) textarea, #main-body form:has(textarea[name="reply"]) textarea { background: rgba(2,6,23,.94) !important; color: #ffffff !important; border-color: rgba(96,165,250,.34) !important; } #main-body .panel:has(textarea[name="message"]) input[type="file"], #main-body .panel:has(textarea[name="reply"]) input[type="file"], #main-body form:has(textarea[name="message"]) input[type="file"], #main-body form:has(textarea[name="reply"]) input[type="file"] { background: rgba(2,6,23,.88) !important; color: #ffffff !important; border: 1px solid rgba(96,165,250,.28) !important; border-radius: 10px !important; padding: 9px !important; } /* Ticket reply cards */ #main-body .ticket-reply, #main-body .ticketReply, #main-body .ticketreply { background: linear-gradient(180deg, rgba(8,23,61,.97), rgba(2,6,23,.99)) !important; border: 1px solid rgba(96,165,250,.24) !important; border-radius: 16px !important; box-shadow: 0 16px 36px rgba(0,0,0,.22) !important; color: #eef6ff !important; margin-bottom: 14px !important; overflow: hidden !important; } /* Remove ugly white ticket headers */ #main-body .ticket-reply .user, #main-body .ticketReply .user, #main-body .ticketreply .user, #main-body .ticket-reply .posted-by, #main-body .ticketReply .posted-by, #main-body .ticketreply .posted-by, #main-body .ticket-reply .date, #main-body .ticketReply .date, #main-body .ticketreply .date, #main-body .ticket-reply > .header, #main-body .ticketReply > .header, #main-body .ticketreply > .header, #main-body .ticket-reply > div:first-child, #main-body .ticketReply > div:first-child, #main-body .ticketreply > div:first-child { background: rgba(8,23,61,.96) !important; color: #ffffff !important; border-bottom: 1px solid rgba(96,165,250,.18) !important; } #main-body .ticket-reply *, #main-body .ticketReply *, #main-body .ticketreply * { color: #eef6ff !important; text-shadow: none !important; } #main-body .ticket-reply a, #main-body .ticketReply a, #main-body .ticketreply a { color: #93c5fd !important; } #main-body .ticket-reply .rating *, #main-body .ticketReply .rating *, #main-body .ticketreply .rating *, #main-body .ticket-reply .fa-star, #main-body .ticketReply .fa-star { color: #facc15 !important; } /* Mobile */ @media (max-width: 767px) { body:has(#main-body .ticket-reply) #main-body .container, body:has(#main-body .ticketReply) #main-body .container, body:has(#main-body .ticketreply) #main-body .container, body:has(#main-body textarea[name="message"]) #main-body .container, body:has(#main-body textarea[name="reply"]) #main-body .container { width: 100% !important; max-width: 100% !important; padding-left: 12px !important; padding-right: 12px !important; } #main-body .panel:has(textarea[name="message"]) .panel-body, #main-body .panel:has(textarea[name="reply"]) .panel-body, #main-body form:has(textarea[name="message"]), #main-body form:has(textarea[name="reply"]) { padding-top: 16px !important; } #main-body .panel:has(textarea[name="message"]) label, #main-body .panel:has(textarea[name="reply"]) label, #main-body form:has(textarea[name="message"]) label, #main-body form:has(textarea[name="reply"]) label { font-size: 12.5px !important; margin-bottom: 6px !important; } #main-body .panel:has(textarea[name="message"]) input[type="text"], #main-body .panel:has(textarea[name="reply"]) input[type="text"], #main-body form:has(textarea[name="message"]) input[type="text"], #main-body form:has(textarea[name="reply"]) input[type="text"], #main-body .panel:has(textarea[name="message"]) input[type="email"], #main-body .panel:has(textarea[name="reply"]) input[type="email"], #main-body form:has(textarea[name="message"]) input[type="email"], #main-body form:has(textarea[name="reply"]) input[type="email"] { min-height: 44px !important; font-size: 14px !important; } } /* KING TV TICKET EDITOR DARK V10 START */ /* * Ticket editor and reply readability. * CSS only. No JS. No hooks. * Applies to viewticket.php, submitticket.php, and openticket.php style forms. */ /* Keep ticket pages on the normal KING TV WHMCS dark background */ body:has(#main-body .ticket-reply), body:has(#main-body .ticketReply), body:has(#main-body .ticketreply), body:has(#main-body textarea[name="message"]), body:has(#main-body textarea[name="reply"]), body:has(#main-body form[action*="submitticket"]), body:has(#main-body form[action*="viewticket"]) { background: linear-gradient(180deg, #020617 0%, #06113c 52%, #020617 100%) !important; background-color: #020617 !important; } body:has(#main-body .ticket-reply) #main-body, body:has(#main-body .ticketReply) #main-body, body:has(#main-body .ticketreply) #main-body, body:has(#main-body textarea[name="message"]) #main-body, body:has(#main-body textarea[name="reply"]) #main-body { background: transparent !important; } /* Remove unwanted support sidebar items everywhere */ a[href*="knowledgebase.php"], a[href*="downloads.php"], a[href*="serverstatus.php"], a[href*="networkissues.php"], a[href*="networkstatus.php"], li:has(a[href*="knowledgebase.php"]), li:has(a[href*="downloads.php"]), li:has(a[href*="serverstatus.php"]), li:has(a[href*="networkissues.php"]), li:has(a[href*="networkstatus.php"]), .list-group-item:has(a[href*="knowledgebase.php"]), .list-group-item:has(a[href*="downloads.php"]), .list-group-item:has(a[href*="serverstatus.php"]), .list-group-item:has(a[href*="networkissues.php"]), .list-group-item:has(a[href*="networkstatus.php"]) { display: none !important; } /* Main ticket/open-ticket/reply panels */ #main-body .panel:has(textarea[name="message"]), #main-body .panel:has(textarea[name="reply"]), #main-body .card:has(textarea[name="message"]), #main-body .card:has(textarea[name="reply"]), #main-body form:has(textarea[name="message"]), #main-body form:has(textarea[name="reply"]) { background: linear-gradient(180deg, rgba(8,23,61,.96), rgba(2,6,23,.98)) !important; border: 1px solid rgba(16,185,129,.42) !important; border-radius: 18px !important; color: #eef6ff !important; box-shadow: 0 18px 42px rgba(0,0,0,.24) !important; } #main-body .panel:has(textarea[name="message"]) > .panel-heading, #main-body .panel:has(textarea[name="reply"]) > .panel-heading, #main-body .card:has(textarea[name="message"]) > .card-header, #main-body .card:has(textarea[name="reply"]) > .card-header { background: linear-gradient(135deg, #10b981, #0f766e) !important; border-bottom: 1px solid rgba(255,255,255,.14) !important; color: #ffffff !important; padding: 14px 18px !important; } #main-body .panel:has(textarea[name="message"]) > .panel-heading *, #main-body .panel:has(textarea[name="reply"]) > .panel-heading *, #main-body .card:has(textarea[name="message"]) > .card-header *, #main-body .card:has(textarea[name="reply"]) > .card-header * { color: #ffffff !important; } /* Form labels */ #main-body .panel:has(textarea[name="message"]) label, #main-body .panel:has(textarea[name="reply"]) label, #main-body .panel:has(textarea[name="message"]) .control-label, #main-body .panel:has(textarea[name="reply"]) .control-label, #main-body .card:has(textarea[name="message"]) label, #main-body .card:has(textarea[name="reply"]) label, #main-body form:has(textarea[name="message"]) label, #main-body form:has(textarea[name="reply"]) label { position: static !important; display: block !important; float: none !important; width: auto !important; max-width: 100% !important; margin: 0 0 8px 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; color: #dbeafe !important; font-size: 13px !important; line-height: 1.25 !important; font-weight: 900 !important; text-align: left !important; } /* Normal inputs */ #main-body .panel:has(textarea[name="message"]) input[type="text"], #main-body .panel:has(textarea[name="reply"]) input[type="text"], #main-body .panel:has(textarea[name="message"]) input[type="email"], #main-body .panel:has(textarea[name="reply"]) input[type="email"], #main-body form:has(textarea[name="message"]) input[type="text"], #main-body form:has(textarea[name="reply"]) input[type="text"], #main-body form:has(textarea[name="message"]) input[type="email"], #main-body form:has(textarea[name="reply"]) input[type="email"], #main-body form:has(textarea[name="message"]) select, #main-body form:has(textarea[name="reply"]) select { background: rgba(2,6,23,.92) !important; border: 1px solid rgba(96,165,250,.34) !important; border-radius: 11px !important; color: #ffffff !important; min-height: 44px !important; padding: 10px 13px !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.025) !important; } /* Native textarea */ #main-body textarea[name="message"], #main-body textarea[name="reply"], #main-body textarea#message, #main-body textarea#replymessage { background: rgba(2,6,23,.94) !important; color: #ffffff !important; border: 1px solid rgba(96,165,250,.34) !important; border-radius: 12px !important; min-height: 220px !important; font-size: 15px !important; line-height: 1.6 !important; } /* Markdown / CodeMirror / rich editor white-box killer */ #main-body .CodeMirror, #main-body .CodeMirror-scroll, #main-body .CodeMirror-sizer, #main-body .CodeMirror-lines, #main-body .CodeMirror pre, #main-body .CodeMirror-code, #main-body .EasyMDEContainer, #main-body .EasyMDEContainer .CodeMirror, #main-body .md-editor, #main-body .md-editor > textarea, #main-body .md-editor .md-input, #main-body .note-editor, #main-body .note-editing-area, #main-body .note-editable, #main-body .fr-box, #main-body .fr-wrapper, #main-body .fr-element, #main-body .cke, #main-body .cke_inner, #main-body .cke_contents, #main-body iframe.cke_wysiwyg_frame { background: #020617 !important; background-color: #020617 !important; color: #ffffff !important; border-color: rgba(96,165,250,.30) !important; } #main-body .CodeMirror { border: 1px solid rgba(96,165,250,.34) !important; border-radius: 12px !important; min-height: 240px !important; } #main-body .CodeMirror-scroll { min-height: 240px !important; } #main-body .CodeMirror pre, #main-body .CodeMirror-line, #main-body .CodeMirror-line span, #main-body .CodeMirror-code span, #main-body .cm-s-default, #main-body .cm-s-default span { color: #ffffff !important; } #main-body .CodeMirror-cursor { border-left-color: #ffffff !important; } #main-body .CodeMirror-selected { background: rgba(96,165,250,.28) !important; } /* Editor preview should never be white */ #main-body .editor-preview, #main-body .editor-preview-side, #main-body .editor-preview-active, #main-body .md-preview, #main-body .note-statusbar, #main-body .CodeMirror-gutters { background: #020617 !important; color: #ffffff !important; border-color: rgba(96,165,250,.18) !important; } /* Editor toolbar */ #main-body .editor-toolbar, #main-body .btn-toolbar, #main-body .md-header, #main-body .note-toolbar, #main-body .fr-toolbar, #main-body .cke_top { background: rgba(2,6,23,.82) !important; border: 1px solid rgba(96,165,250,.20) !important; border-radius: 12px 12px 0 0 !important; color: #ffffff !important; } #main-body .editor-toolbar button, #main-body .editor-toolbar a, #main-body .btn-toolbar .btn, #main-body .md-header .btn, #main-body .note-toolbar .btn, #main-body .fr-toolbar button, #main-body .cke_button { background: rgba(15,23,42,.94) !important; border: 1px solid rgba(96,165,250,.24) !important; border-radius: 8px !important; color: #ffffff !important; width: auto !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; padding: 0 8px !important; margin: 2px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } #main-body .editor-toolbar button:hover, #main-body .editor-toolbar a:hover, #main-body .btn-toolbar .btn:hover, #main-body .md-header .btn:hover, #main-body .note-toolbar .btn:hover { background: rgba(30,58,138,.94) !important; color: #ffffff !important; } /* File upload */ #main-body input[type="file"] { background: rgba(2,6,23,.88) !important; color: #ffffff !important; border: 1px solid rgba(96,165,250,.28) !important; border-radius: 10px !important; padding: 8px !important; } /* Ticket reply cards */ #main-body .ticket-reply, #main-body .ticketReply, #main-body .ticketreply { background: linear-gradient(180deg, rgba(8,23,61,.98), rgba(2,6,23,.99)) !important; border: 1px solid rgba(96,165,250,.24) !important; border-radius: 16px !important; box-shadow: 0 16px 36px rgba(0,0,0,.22) !important; color: #eef6ff !important; margin-bottom: 14px !important; overflow: hidden !important; } /* Remove white reply headers */ #main-body .ticket-reply > div:first-child, #main-body .ticketReply > div:first-child, #main-body .ticketreply > div:first-child, #main-body .ticket-reply .user, #main-body .ticketReply .user, #main-body .ticketreply .user, #main-body .ticket-reply .posted-by, #main-body .ticketReply .posted-by, #main-body .ticketreply .posted-by, #main-body .ticket-reply .date, #main-body .ticketReply .date, #main-body .ticketreply .date { background: rgba(8,23,61,.96) !important; color: #ffffff !important; border-bottom: 1px solid rgba(96,165,250,.18) !important; } /* Color-code likely staff/admin replies when WHMCS class exists */ #main-body .ticket-reply.staff, #main-body .ticketReply.staff, #main-body .ticketreply.staff, #main-body .ticket-reply.admin, #main-body .ticketReply.admin, #main-body .ticketreply.admin, #main-body .ticket-reply.staff-reply, #main-body .ticketReply.staff-reply, #main-body .ticketreply.staff-reply, #main-body .ticket-reply.admin-reply, #main-body .ticketReply.admin-reply, #main-body .ticketreply.admin-reply { border-color: rgba(16,185,129,.45) !important; background: linear-gradient(180deg, rgba(4,47,46,.55), rgba(2,6,23,.99)) !important; } /* Client replies if WHMCS class exists */ #main-body .ticket-reply.client, #main-body .ticketReply.client, #main-body .ticketreply.client, #main-body .ticket-reply.customer, #main-body .ticketReply.customer, #main-body .ticketreply.customer, #main-body .ticket-reply.user, #main-body .ticketReply.user, #main-body .ticketreply.user { border-color: rgba(255,122,26,.42) !important; background: linear-gradient(180deg, rgba(67,36,18,.40), rgba(2,6,23,.99)) !important; } /* Fallback alternating separation if WHMCS gives no staff/client class */ #main-body .ticket-reply:nth-of-type(odd), #main-body .ticketReply:nth-of-type(odd), #main-body .ticketreply:nth-of-type(odd) { border-left: 4px solid rgba(255,122,26,.72) !important; } #main-body .ticket-reply:nth-of-type(even), #main-body .ticketReply:nth-of-type(even), #main-body .ticketreply:nth-of-type(even) { border-left: 4px solid rgba(16,185,129,.72) !important; } #main-body .ticket-reply *, #main-body .ticketReply *, #main-body .ticketreply * { color: #eef6ff !important; text-shadow: none !important; } #main-body .ticket-reply a, #main-body .ticketReply a, #main-body .ticketreply a { color: #93c5fd !important; } #main-body .ticket-reply .rating *, #main-body .ticketReply .rating *, #main-body .ticketreply .rating *, #main-body .ticket-reply .fa-star, #main-body .ticketReply .fa-star { color: #facc15 !important; } /* Mobile */ @media (max-width: 767px) { body:has(#main-body .ticket-reply) #main-body .container, body:has(#main-body .ticketReply) #main-body .container, body:has(#main-body .ticketreply) #main-body .container, body:has(#main-body textarea[name="message"]) #main-body .container, body:has(#main-body textarea[name="reply"]) #main-body .container { width: 100% !important; max-width: 100% !important; padding-left: 12px !important; padding-right: 12px !important; } #main-body .CodeMirror, #main-body .CodeMirror-scroll { min-height: 200px !important; } #main-body .panel:has(textarea[name="message"]) label, #main-body .panel:has(textarea[name="reply"]) label, #main-body form:has(textarea[name="message"]) label, #main-body form:has(textarea[name="reply"]) label { font-size: 12.5px !important; margin-bottom: 6px !important; } #main-body .editor-toolbar button, #main-body .editor-toolbar a, #main-body .btn-toolbar .btn, #main-body .md-header .btn, #main-body .note-toolbar .btn { min-width: 30px !important; height: 30px !important; min-height: 30px !important; padding: 0 7px !important; } } /* KING TV TICKET EDITOR DARK V10 END */ /* KING TV TICKET STATUS BAR DARK V11 START */ /* * CSS only. * Fixes the white editor status / word count bar on ticket reply and open-ticket pages. * Kept scoped to ticket editor wrappers to avoid breaking invoices, modals, tables, captcha, or gateway frames. */ #main-body .panel:has(textarea[name="message"]) .editor-statusbar, #main-body .panel:has(textarea[name="reply"]) .editor-statusbar, #main-body .card:has(textarea[name="message"]) .editor-statusbar, #main-body .card:has(textarea[name="reply"]) .editor-statusbar, #main-body form:has(textarea[name="message"]) .editor-statusbar, #main-body form:has(textarea[name="reply"]) .editor-statusbar, #main-body .panel:has(textarea[name="message"]) .CodeMirror-statusbar, #main-body .panel:has(textarea[name="reply"]) .CodeMirror-statusbar, #main-body form:has(textarea[name="message"]) .CodeMirror-statusbar, #main-body form:has(textarea[name="reply"]) .CodeMirror-statusbar, #main-body .panel:has(textarea[name="message"]) .note-statusbar, #main-body .panel:has(textarea[name="reply"]) .note-statusbar, #main-body form:has(textarea[name="message"]) .note-statusbar, #main-body form:has(textarea[name="reply"]) .note-statusbar, #main-body .panel:has(textarea[name="message"]) .fr-second-toolbar, #main-body .panel:has(textarea[name="reply"]) .fr-second-toolbar, #main-body form:has(textarea[name="message"]) .fr-second-toolbar, #main-body form:has(textarea[name="reply"]) .fr-second-toolbar { background: #020617 !important; background-color: #020617 !important; color: #94a3b8 !important; border-top: 1px solid rgba(96,165,250,.22) !important; border-left: 1px solid rgba(96,165,250,.22) !important; border-right: 1px solid rgba(96,165,250,.22) !important; border-bottom: 1px solid rgba(96,165,250,.22) !important; border-radius: 0 0 10px 10px !important; box-shadow: none !important; } #main-body .panel:has(textarea[name="message"]) .editor-statusbar *, #main-body .panel:has(textarea[name="reply"]) .editor-statusbar *, #main-body .card:has(textarea[name="message"]) .editor-statusbar *, #main-body .card:has(textarea[name="reply"]) .editor-statusbar *, #main-body form:has(textarea[name="message"]) .editor-statusbar *, #main-body form:has(textarea[name="reply"]) .editor-statusbar *, #main-body .panel:has(textarea[name="message"]) .note-statusbar *, #main-body .panel:has(textarea[name="reply"]) .note-statusbar *, #main-body form:has(textarea[name="message"]) .note-statusbar *, #main-body form:has(textarea[name="reply"]) .note-statusbar *, #main-body .panel:has(textarea[name="message"]) .fr-second-toolbar *, #main-body .panel:has(textarea[name="reply"]) .fr-second-toolbar *, #main-body form:has(textarea[name="message"]) .fr-second-toolbar *, #main-body form:has(textarea[name="reply"]) .fr-second-toolbar * { background: transparent !important; color: #94a3b8 !important; border-color: rgba(96,165,250,.22) !important; box-shadow: none !important; } /* Extra fallback for the exact white strip when the editor uses generic footer/status classes */ #main-body .panel:has(textarea[name="message"]) .CodeMirror + div, #main-body .panel:has(textarea[name="reply"]) .CodeMirror + div, #main-body form:has(textarea[name="message"]) .CodeMirror + div, #main-body form:has(textarea[name="reply"]) .CodeMirror + div, #main-body .panel:has(textarea[name="message"]) .EasyMDEContainer > div:last-child, #main-body .panel:has(textarea[name="reply"]) .EasyMDEContainer > div:last-child, #main-body form:has(textarea[name="message"]) .EasyMDEContainer > div:last-child, #main-body form:has(textarea[name="reply"]) .EasyMDEContainer > div:last-child { background: #020617 !important; background-color: #020617 !important; color: #94a3b8 !important; border-color: rgba(96,165,250,.22) !important; } /* If WHMCS/editor outputs a plain white bottom helper row without a known class */ #main-body .panel:has(textarea[name="message"]) textarea + div, #main-body .panel:has(textarea[name="reply"]) textarea + div, #main-body form:has(textarea[name="message"]) textarea + div, #main-body form:has(textarea[name="reply"]) textarea + div { background-color: #020617 !important; color: #94a3b8 !important; border-color: rgba(96,165,250,.22) !important; } /* Keep the actual upload button readable, not affected by the statusbar fallback */ #main-body input[type="file"]::file-selector-button { background: #f8fafc !important; color: #020617 !important; border: 1px solid rgba(96,165,250,.28) !important; border-radius: 6px !important; padding: 5px 9px !important; } /* KING TV TICKET STATUS BAR DARK V11 END */ /* KING TV TICKET PAGE FINAL V12 START */ /* * Ticket page final CSS. * Master CSS only. * No hooks. No JavaScript. No DOM changes. */ /* --------------------------------------------------------- Remove unwanted support links everywhere --------------------------------------------------------- */ #Secondary_Sidebar-Support-Knowledgebase, #Secondary_Sidebar-Support-Downloads, #Secondary_Sidebar-Support-Network_Status, #Secondary_Sidebar-Support-NetworkStatus, #Secondary_Sidebar-Support-Server_Status, #Secondary_Sidebar-Support-ServerStatus, [id*="Secondary_Sidebar"][id*="Knowledgebase"], [id*="Secondary_Sidebar"][id*="Downloads"], [id*="Secondary_Sidebar"][id*="Network_Status"], [id*="Secondary_Sidebar"][id*="NetworkStatus"], [id*="Secondary_Sidebar"][id*="Server_Status"], [id*="Secondary_Sidebar"][id*="ServerStatus"], a[href*="knowledgebase.php"], a[href*="downloads.php"], a[href*="serverstatus.php"], a[href*="networkissues.php"], a[href*="networkstatus.php"], li:has(a[href*="knowledgebase.php"]), li:has(a[href*="downloads.php"]), li:has(a[href*="serverstatus.php"]), li:has(a[href*="networkissues.php"]), li:has(a[href*="networkstatus.php"]), .list-group-item:has(a[href*="knowledgebase.php"]), .list-group-item:has(a[href*="downloads.php"]), .list-group-item:has(a[href*="serverstatus.php"]), .list-group-item:has(a[href*="networkissues.php"]), .list-group-item:has(a[href*="networkstatus.php"]), .panel-sidebar a[href*="knowledgebase.php"], .panel-sidebar a[href*="downloads.php"], .panel-sidebar a[href*="serverstatus.php"], .panel-sidebar a[href*="networkissues.php"], .panel-sidebar a[href*="networkstatus.php"], .panel-sidebar .list-group-item:has(a[href*="knowledgebase.php"]), .panel-sidebar .list-group-item:has(a[href*="downloads.php"]), .panel-sidebar .list-group-item:has(a[href*="serverstatus.php"]), .panel-sidebar .list-group-item:has(a[href*="networkissues.php"]), .panel-sidebar .list-group-item:has(a[href*="networkstatus.php"]) { display: none !important; } /* --------------------------------------------------------- Ticket pages dark base --------------------------------------------------------- */ body:has(#main-body .ticket-reply), body:has(#main-body .ticketReply), body:has(#main-body .ticketreply), body:has(#main-body textarea[name="message"]), body:has(#main-body textarea[name="reply"]), body:has(#main-body form[action*="submitticket"]), body:has(#main-body form[action*="viewticket"]) { background: linear-gradient(180deg, #020617 0%, #06113c 52%, #020617 100%) !important; background-color: #020617 !important; } body:has(#main-body .ticket-reply) #main-body, body:has(#main-body .ticketReply) #main-body, body:has(#main-body .ticketreply) #main-body, body:has(#main-body textarea[name="message"]) #main-body, body:has(#main-body textarea[name="reply"]) #main-body { background: transparent !important; } /* --------------------------------------------------------- Ticket information action buttons alignment --------------------------------------------------------- */ body:has(#main-body .ticket-reply) #main-body .panel .btn-warning, body:has(#main-body .ticketReply) #main-body .panel .btn-warning, body:has(#main-body .ticketreply) #main-body .panel .btn-warning, body:has(#main-body textarea[name="message"]) #main-body .panel .btn-warning, body:has(#main-body textarea[name="reply"]) #main-body .panel .btn-warning, body:has(#main-body .ticket-reply) #main-body .panel .btn-danger, body:has(#main-body .ticketReply) #main-body .panel .btn-danger, body:has(#main-body .ticketreply) #main-body .panel .btn-danger, body:has(#main-body textarea[name="message"]) #main-body .panel .btn-danger, body:has(#main-body textarea[name="reply"]) #main-body .panel .btn-danger { min-height: 44px !important; width: calc(50% - 7px) !important; max-width: calc(50% - 7px) !important; margin: 8px 3px 0 3px !important; padding: 0 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; vertical-align: top !important; border-radius: 0 !important; font-weight: 900 !important; line-height: 1.1 !important; } body:has(#main-body .ticket-reply) #main-body .panel .btn-warning, body:has(#main-body .ticketReply) #main-body .panel .btn-warning, body:has(#main-body .ticketreply) #main-body .panel .btn-warning, body:has(#main-body textarea[name="message"]) #main-body .panel .btn-warning, body:has(#main-body textarea[name="reply"]) #main-body .panel .btn-warning { background: linear-gradient(135deg, #ff7a1a, #f59e0b) !important; border: 0 !important; color: #ffffff !important; } body:has(#main-body .ticket-reply) #main-body .panel .btn-danger, body:has(#main-body .ticketReply) #main-body .panel .btn-danger, body:has(#main-body .ticketreply) #main-body .panel .btn-danger, body:has(#main-body textarea[name="message"]) #main-body .panel .btn-danger, body:has(#main-body textarea[name="reply"]) #main-body .panel .btn-danger { background: linear-gradient(135deg, #ef4444, #dc2626) !important; border: 0 !important; color: #ffffff !important; } /* --------------------------------------------------------- Reply/open ticket panels --------------------------------------------------------- */ #main-body .panel:has(textarea[name="message"]), #main-body .panel:has(textarea[name="reply"]), #main-body .card:has(textarea[name="message"]), #main-body .card:has(textarea[name="reply"]), #main-body form:has(textarea[name="message"]), #main-body form:has(textarea[name="reply"]) { background: linear-gradient(180deg, rgba(8,23,61,.96), rgba(2,6,23,.98)) !important; border: 1px solid rgba(16,185,129,.42) !important; border-radius: 18px !important; color: #eef6ff !important; box-shadow: 0 18px 42px rgba(0,0,0,.24) !important; } #main-body .panel:has(textarea[name="message"]) > .panel-heading, #main-body .panel:has(textarea[name="reply"]) > .panel-heading, #main-body .card:has(textarea[name="message"]) > .card-header, #main-body .card:has(textarea[name="reply"]) > .card-header { background: linear-gradient(135deg, #10b981, #0f766e) !important; border-bottom: 1px solid rgba(255,255,255,.14) !important; color: #ffffff !important; padding: 14px 18px !important; } #main-body .panel:has(textarea[name="message"]) > .panel-heading *, #main-body .panel:has(textarea[name="reply"]) > .panel-heading *, #main-body .card:has(textarea[name="message"]) > .card-header *, #main-body .card:has(textarea[name="reply"]) > .card-header * { color: #ffffff !important; } /* Force collapsed reply body visible using CSS only */ #main-body .panel:has(textarea[name="message"]) .collapse, #main-body .panel:has(textarea[name="reply"]) .collapse, #main-body .panel:has(textarea[name="message"]) .panel-collapse, #main-body .panel:has(textarea[name="reply"]) .panel-collapse, #main-body .card:has(textarea[name="message"]) .collapse, #main-body .card:has(textarea[name="reply"]) .collapse { display: block !important; height: auto !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; } /* Labels */ #main-body .panel:has(textarea[name="message"]) label, #main-body .panel:has(textarea[name="reply"]) label, #main-body .panel:has(textarea[name="message"]) .control-label, #main-body .panel:has(textarea[name="reply"]) .control-label, #main-body .card:has(textarea[name="message"]) label, #main-body .card:has(textarea[name="reply"]) label, #main-body form:has(textarea[name="message"]) label, #main-body form:has(textarea[name="reply"]) label { position: static !important; display: block !important; float: none !important; width: auto !important; max-width: 100% !important; margin: 0 0 8px 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; color: #dbeafe !important; font-size: 13px !important; line-height: 1.25 !important; font-weight: 900 !important; text-align: left !important; } /* Inputs */ #main-body .panel:has(textarea[name="message"]) input[type="text"], #main-body .panel:has(textarea[name="reply"]) input[type="text"], #main-body .panel:has(textarea[name="message"]) input[type="email"], #main-body .panel:has(textarea[name="reply"]) input[type="email"], #main-body form:has(textarea[name="message"]) input[type="text"], #main-body form:has(textarea[name="reply"]) input[type="text"], #main-body form:has(textarea[name="message"]) input[type="email"], #main-body form:has(textarea[name="reply"]) input[type="email"], #main-body form:has(textarea[name="message"]) select, #main-body form:has(textarea[name="reply"]) select { background: rgba(2,6,23,.92) !important; border: 1px solid rgba(96,165,250,.34) !important; border-radius: 11px !important; color: #ffffff !important; min-height: 44px !important; padding: 10px 13px !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.025) !important; } /* --------------------------------------------------------- White editor/status bar killer --------------------------------------------------------- */ #main-body textarea[name="message"], #main-body textarea[name="reply"], #main-body textarea#message, #main-body textarea#replymessage, #main-body .CodeMirror, #main-body .CodeMirror-scroll, #main-body .CodeMirror-sizer, #main-body .CodeMirror-lines, #main-body .CodeMirror-code, #main-body .CodeMirror pre, #main-body .EasyMDEContainer, #main-body .EasyMDEContainer *, #main-body .md-editor, #main-body .md-editor *, #main-body .note-editor, #main-body .note-editor *, #main-body .fr-box, #main-body .fr-box *, #main-body .cke, #main-body .cke * { background-color: #020617 !important; color: #ffffff !important; border-color: rgba(96,165,250,.28) !important; box-shadow: none !important; } #main-body .CodeMirror { border: 1px solid rgba(96,165,250,.34) !important; border-radius: 12px !important; min-height: 240px !important; } #main-body .CodeMirror-scroll { min-height: 240px !important; } #main-body .editor-statusbar, #main-body .CodeMirror-statusbar, #main-body .note-statusbar, #main-body .fr-second-toolbar, #main-body .md-footer, #main-body .editor-footer, #main-body .textarea-footer, #main-body .editor-toolbar + .CodeMirror + div, #main-body .EasyMDEContainer > div:last-child, #main-body .md-editor > div:last-child, #main-body .note-editor > div:last-child, #main-body textarea[name="message"] + div, #main-body textarea[name="reply"] + div, #main-body textarea#message + div, #main-body textarea#replymessage + div { background: #020617 !important; background-color: #020617 !important; color: #94a3b8 !important; border-color: rgba(96,165,250,.22) !important; box-shadow: none !important; } #main-body .editor-statusbar *, #main-body .CodeMirror-statusbar *, #main-body .note-statusbar *, #main-body .fr-second-toolbar *, #main-body .md-footer *, #main-body .editor-footer *, #main-body .textarea-footer * { background: transparent !important; color: #94a3b8 !important; border-color: rgba(96,165,250,.22) !important; } /* Toolbar */ #main-body .editor-toolbar, #main-body .btn-toolbar, #main-body .md-header, #main-body .note-toolbar, #main-body .fr-toolbar, #main-body .cke_top { background: rgba(2,6,23,.82) !important; border: 1px solid rgba(96,165,250,.20) !important; border-radius: 12px 12px 0 0 !important; color: #ffffff !important; } #main-body .editor-toolbar button, #main-body .editor-toolbar a, #main-body .btn-toolbar .btn, #main-body .md-header .btn, #main-body .note-toolbar .btn, #main-body .fr-toolbar button, #main-body .cke_button { background: rgba(15,23,42,.94) !important; border: 1px solid rgba(96,165,250,.24) !important; border-radius: 8px !important; color: #ffffff !important; width: auto !important; min-width: 32px !important; height: 32px !important; min-height: 32px !important; padding: 0 8px !important; margin: 2px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* File upload */ #main-body input[type="file"] { background: rgba(2,6,23,.88) !important; color: #ffffff !important; border: 1px solid rgba(96,165,250,.28) !important; border-radius: 10px !important; padding: 8px !important; } #main-body input[type="file"]::file-selector-button { background: #f8fafc !important; color: #020617 !important; border: 1px solid rgba(96,165,250,.28) !important; border-radius: 6px !important; padding: 5px 9px !important; } /* --------------------------------------------------------- Reply cards, color coded --------------------------------------------------------- */ #main-body .ticket-reply, #main-body .ticketReply, #main-body .ticketreply { background: linear-gradient(180deg, rgba(8,23,61,.98), rgba(2,6,23,.99)) !important; border: 1px solid rgba(96,165,250,.24) !important; border-radius: 16px !important; box-shadow: 0 16px 36px rgba(0,0,0,.22) !important; color: #eef6ff !important; margin-bottom: 14px !important; overflow: hidden !important; } #main-body .ticket-reply > div:first-child, #main-body .ticketReply > div:first-child, #main-body .ticketreply > div:first-child, #main-body .ticket-reply .user, #main-body .ticketReply .user, #main-body .ticketreply .user, #main-body .ticket-reply .posted-by, #main-body .ticketReply .posted-by, #main-body .ticketreply .posted-by, #main-body .ticket-reply .date, #main-body .ticketReply .date, #main-body .ticketreply .date { background: rgba(8,23,61,.96) !important; color: #ffffff !important; border-bottom: 1px solid rgba(96,165,250,.18) !important; } /* Alternating color separation when WHMCS does not provide staff/client classes */ #main-body .ticket-reply:nth-of-type(odd), #main-body .ticketReply:nth-of-type(odd), #main-body .ticketreply:nth-of-type(odd) { border-left: 4px solid rgba(255,122,26,.78) !important; } #main-body .ticket-reply:nth-of-type(even), #main-body .ticketReply:nth-of-type(even), #main-body .ticketreply:nth-of-type(even) { border-left: 4px solid rgba(16,185,129,.78) !important; } /* Staff/admin class support if available */ #main-body .ticket-reply.staff, #main-body .ticketReply.staff, #main-body .ticketreply.staff, #main-body .ticket-reply.admin, #main-body .ticketReply.admin, #main-body .ticketreply.admin { border-left: 4px solid rgba(16,185,129,.90) !important; background: linear-gradient(180deg, rgba(4,47,46,.55), rgba(2,6,23,.99)) !important; } /* Client/customer class support if available */ #main-body .ticket-reply.client, #main-body .ticketReply.client, #main-body .ticketreply.client, #main-body .ticket-reply.customer, #main-body .ticketReply.customer, #main-body .ticketreply.customer { border-left: 4px solid rgba(255,122,26,.90) !important; background: linear-gradient(180deg, rgba(67,36,18,.40), rgba(2,6,23,.99)) !important; } #main-body .ticket-reply *, #main-body .ticketReply *, #main-body .ticketreply * { color: #eef6ff !important; text-shadow: none !important; } #main-body .ticket-reply a, #main-body .ticketReply a, #main-body .ticketreply a { color: #93c5fd !important; } #main-body .ticket-reply .rating *, #main-body .ticketReply .rating *, #main-body .ticketreply .rating *, #main-body .ticket-reply .fa-star, #main-body .ticketReply .fa-star { color: #facc15 !important; } /* Mobile */ @media (max-width: 767px) { body:has(#main-body .ticket-reply) #main-body .container, body:has(#main-body .ticketReply) #main-body .container, body:has(#main-body .ticketreply) #main-body .container, body:has(#main-body textarea[name="message"]) #main-body .container, body:has(#main-body textarea[name="reply"]) #main-body .container { width: 100% !important; max-width: 100% !important; padding-left: 12px !important; padding-right: 12px !important; } #main-body .CodeMirror, #main-body .CodeMirror-scroll { min-height: 200px !important; } #main-body .editor-toolbar button, #main-body .editor-toolbar a, #main-body .btn-toolbar .btn, #main-body .md-header .btn, #main-body .note-toolbar .btn { min-width: 30px !important; height: 30px !important; min-height: 30px !important; padding: 0 7px !important; } } /* KING TV TICKET PAGE FINAL V12 END */ /* KING TV TICKET INFO BUTTONS EXACT V27 START */ /* * Exact live DOM fix. * Real panel selector: * div[menuitemname="Ticket Information"].panel.panel-sidebar.panel-sidebar * * Reply is the left column itself. * Close is a button inside the right column. * Scope is only the Ticket Information sidebar panel. */ div[menuitemname="Ticket Information"].panel.panel-sidebar .panel-footer.clearfix { box-sizing: border-box !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: center !important; gap: 14px !important; width: 100% !important; max-width: 100% !important; padding: 18px 20px 20px 20px !important; margin: 0 !important; background: transparent !important; border: 0 !important; overflow: visible !important; text-align: center !important; } div[menuitemname="Ticket Information"].panel.panel-sidebar .panel-footer.clearfix:before, div[menuitemname="Ticket Information"].panel.panel-sidebar .panel-footer.clearfix:after { content: none !important; display: none !important; } /* The two Bootstrap columns are the real button boxes */ div[menuitemname="Ticket Information"].panel.panel-sidebar .panel-footer.clearfix .col-button-left, div[menuitemname="Ticket Information"].panel.panel-sidebar .panel-footer.clearfix .col-button-right { box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; float: none !important; clear: none !important; flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; padding: 0 !important; margin: 0 !important; position: static !important; inset: auto !important; transform: none !important; vertical-align: top !important; overflow: hidden !important; border: 0 !important; border-radius: 0 !important; color: #ffffff !important; font-size: 14px !important; line-height: 48px !important; font-weight: 900 !important; text-align: center !important; white-space: nowrap !important; text-indent: 0 !important; letter-spacing: 0 !important; } div[menuitemname="Ticket Information"].panel.panel-sidebar .panel-footer.clearfix .col-button-left { background: linear-gradient(135deg, #ff7a1a, #f59e0b) !important; } div[menuitemname="Ticket Information"].panel.panel-sidebar .panel-footer.clearfix .col-button-right { background: linear-gradient(135deg, #ef4444, #dc2626) !important; } /* Close button fills the red column. Reply text/link also fills the orange column if present. */ div[menuitemname="Ticket Information"].panel.panel-sidebar .panel-footer.clearfix .col-button-left > *, div[menuitemname="Ticket Information"].panel.panel-sidebar .panel-footer.clearfix .col-button-right > *, div[menuitemname="Ticket Information"].panel.panel-sidebar .panel-footer.clearfix .col-button-left .btn, div[menuitemname="Ticket Information"].panel.panel-sidebar .panel-footer.clearfix .col-button-right .btn, div[menuitemname="Ticket Information"].panel.panel-sidebar .panel-footer.clearfix .col-button-right button.btn.btn-danger { box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; height: 100% !important; min-height: 100% !important; max-height: 100% !important; padding: 0 8px !important; margin: 0 !important; float: none !important; clear: none !important; position: static !important; inset: auto !important; transform: none !important; vertical-align: top !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #ffffff !important; font-size: 14px !important; line-height: 48px !important; font-weight: 900 !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: clip !important; text-indent: 0 !important; letter-spacing: 0 !important; opacity: 1 !important; } /* Specific override for Bootstrap btn-sm btn-block close button */ div[menuitemname="Ticket Information"].panel.panel-sidebar .panel-footer.clearfix .col-button-right > button.btn.btn-danger.btn-sm.btn-block { width: 100% !important; min-width: 100% !important; max-width: 100% !important; height: 100% !important; min-height: 100% !important; max-height: 100% !important; padding: 0 8px !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; color: #ffffff !important; } div[menuitemname="Ticket Information"].panel.panel-sidebar .panel-footer.clearfix .btn i, div[menuitemname="Ticket Information"].panel.panel-sidebar .panel-footer.clearfix .btn .fa, div[menuitemname="Ticket Information"].panel.panel-sidebar .panel-footer.clearfix .btn .fas { display: inline-block !important; width: auto !important; height: 14px !important; line-height: 14px !important; margin: 0 5px 0 0 !important; padding: 0 !important; float: none !important; position: static !important; vertical-align: middle !important; color: #ffffff !important; } @media (max-width: 420px) { div[menuitemname="Ticket Information"].panel.panel-sidebar .panel-footer.clearfix { gap: 12px !important; padding-left: 18px !important; padding-right: 18px !important; } div[menuitemname="Ticket Information"].panel.panel-sidebar .panel-footer.clearfix .col-button-left, div[menuitemname="Ticket Information"].panel.panel-sidebar .panel-footer.clearfix .col-button-right { height: 46px !important; min-height: 46px !important; max-height: 46px !important; line-height: 46px !important; font-size: 13px !important; } div[menuitemname="Ticket Information"].panel.panel-sidebar .panel-footer.clearfix .col-button-left > *, div[menuitemname="Ticket Information"].panel.panel-sidebar .panel-footer.clearfix .col-button-right > *, div[menuitemname="Ticket Information"].panel.panel-sidebar .panel-footer.clearfix .col-button-left .btn, div[menuitemname="Ticket Information"].panel.panel-sidebar .panel-footer.clearfix .col-button-right .btn { line-height: 46px !important; font-size: 13px !important; } } /* KING TV TICKET INFO BUTTONS EXACT V27 END */ /* KING TV TICKET BUTTON MARGIN CENTER V29 START */ /* * Final micro-fix. * Keeps V27 layout. * Overrides the older broad .btn-danger margin rule that DevTools showed: * margin: 0 30px 0 0 !important; */ /* Left Reply box and right Close box stay equal */ body:has(#main-body .ticket-reply) #main-body div[menuitemname="Ticket Information"].panel.panel-sidebar .panel-footer.clearfix .col-button-left, body:has(#main-body .ticket-reply) #main-body div[menuitemname="Ticket Information"].panel.panel-sidebar .panel-footer.clearfix .col-button-right { margin: 0 !important; padding: 0 !important; height: 48px !important; min-height: 48px !important; max-height: 48px !important; line-height: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Stronger than the old broad ticket .btn-danger rule */ body:has(#main-body .ticket-reply) #main-body div[menuitemname="Ticket Information"].panel.panel-sidebar .panel-footer.clearfix .col-button-right > button.btn.btn-danger.btn-sm.btn-block, body:has(#main-body .ticket-reply) #main-body div[menuitemname="Ticket Information"].panel.panel-sidebar .panel-footer.clearfix .col-button-right .btn.btn-danger, body:has(#main-body .ticket-reply) #main-body div[menuitemname="Ticket Information"].panel.panel-sidebar .panel-footer.clearfix .col-button-left > *, body:has(#main-body .ticket-reply) #main-body div[menuitemname="Ticket Information"].panel.panel-sidebar .panel-footer.clearfix .col-button-left .btn { margin: 0 !important; margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding: 0 8px !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; height: 100% !important; min-height: 100% !important; max-height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; vertical-align: middle !important; transform: none !important; top: auto !important; bottom: auto !important; } /* Icon baseline polish */ body:has(#main-body .ticket-reply) #main-body div[menuitemname="Ticket Information"].panel.panel-sidebar .panel-footer.clearfix .btn i, body:has(#main-body .ticket-reply) #main-body div[menuitemname="Ticket Information"].panel.panel-sidebar .panel-footer.clearfix .btn .fa, body:has(#main-body .ticket-reply) #main-body div[menuitemname="Ticket Information"].panel.panel-sidebar .panel-footer.clearfix .btn .fas { margin: 0 6px 0 0 !important; padding: 0 !important; line-height: 1 !important; height: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; transform: none !important; top: auto !important; } /* KING TV TICKET BUTTON MARGIN CENTER V29 END */ /* KING TV SUBMIT TICKET FORM POLISH V6 START */ /* * Final safe Open Ticket form polish. * Single aligned column. * Scoped only to submit ticket form. * Does not touch view ticket buttons, invoices, checkout, or sidebars. */ /* Remove double-card styling around this form only */ #main-body .main-content:has(form select[name="deptid"]):has(textarea.markdown-editor), #main-body .main-content:has(form select[name="deptid"]):has(textarea[name="message"]), #main-body .panel-body:has(form select[name="deptid"]):has(textarea.markdown-editor), #main-body .panel-body:has(form select[name="deptid"]):has(textarea[name="message"]), #main-body .panel:has(form select[name="deptid"]):has(textarea.markdown-editor), #main-body .panel:has(form select[name="deptid"]):has(textarea[name="message"]) { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* One clean form card */ #main-body form:has(select[name="deptid"]):has(textarea.markdown-editor), #main-body form:has(select[name="deptid"]):has(textarea[name="message"]) { box-sizing: border-box !important; width: 100% !important; max-width: 720px !important; margin: 0 auto 40px auto !important; padding: 28px 30px 30px 30px !important; display: block !important; background: rgba(3, 10, 32, 0.86) !important; border: 1px solid rgba(16, 185, 129, 0.44) !important; border-radius: 18px !important; box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32) !important; } /* Reset WHMCS grid inside form */ #main-body form:has(select[name="deptid"]) .row, #main-body form:has(select[name="deptid"]) .form-group, #main-body form:has(select[name="deptid"]) .row.form-group, #main-body form:has(select[name="deptid"]) [class*="col-sm-"], #main-body form:has(select[name="deptid"]) [class*="col-xs-"] { box-sizing: border-box !important; float: none !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } #main-body form:has(select[name="deptid"]) .form-group, #main-body form:has(select[name="deptid"]) .row.form-group { margin-bottom: 16px !important; } /* Labels */ #main-body form:has(select[name="deptid"]) label { display: block !important; margin: 0 0 8px 0 !important; color: #d7f7ff !important; font-size: 13px !important; line-height: 1.25 !important; font-weight: 900 !important; letter-spacing: 0.01em !important; } /* Inputs, selects, textarea */ #main-body form:has(select[name="deptid"]) input.form-control, #main-body form:has(select[name="deptid"]) select.form-control, #main-body form:has(select[name="deptid"]) textarea.form-control { box-sizing: border-box !important; display: block !important; width: 100% !important; max-width: 100% !important; height: 44px !important; min-height: 44px !important; padding: 10px 13px !important; margin: 0 !important; background: #030817 !important; color: #ffffff !important; border: 1px solid rgba(96, 165, 250, 0.48) !important; border-radius: 10px !important; box-shadow: none !important; font-size: 14px !important; line-height: 20px !important; font-weight: 650 !important; } /* Keep the top simple fields from becoming too wide on desktop */ @media (min-width: 768px) { #main-body form:has(select[name="deptid"]) input[name="name"], #main-body form:has(select[name="deptid"]) #inputName, #main-body form:has(select[name="deptid"]) input[name="email"], #main-body form:has(select[name="deptid"]) #inputEmail, #main-body form:has(select[name="deptid"]) select[name="deptid"], #main-body form:has(select[name="deptid"]) #inputDepartment, #main-body form:has(select[name="deptid"]) select[name="relatedservice"], #main-body form:has(select[name="deptid"]) #inputRelatedService, #main-body form:has(select[name="deptid"]) select[name="urgency"], #main-body form:has(select[name="deptid"]) #inputPriority { max-width: 360px !important; } } #main-body form:has(select[name="deptid"]) input.form-control:focus, #main-body form:has(select[name="deptid"]) select.form-control:focus, #main-body form:has(select[name="deptid"]) textarea.form-control:focus { border-color: rgba(255, 122, 26, 0.86) !important; box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.16) !important; outline: none !important; } /* Message editor */ #main-body form:has(select[name="deptid"]) .md-editor { width: 100% !important; border: 1px solid rgba(96, 165, 250, 0.40) !important; border-radius: 12px !important; overflow: hidden !important; background: #030817 !important; } #main-body form:has(select[name="deptid"]) .md-header { background: #071127 !important; border: 0 !important; border-bottom: 1px solid rgba(96, 165, 250, 0.30) !important; padding: 8px 8px 4px 8px !important; } /* Toolbar */ #main-body form:has(select[name="deptid"]) .md-header .btn-toolbar, #main-body form:has(select[name="deptid"]) .md-header .btn-group { display: inline-flex !important; flex-wrap: wrap !important; gap: 4px !important; margin: 0 5px 4px 0 !important; vertical-align: top !important; } #main-body form:has(select[name="deptid"]) .md-header .btn, #main-body form:has(select[name="deptid"]) .btn-toolbar .btn { min-width: 32px !important; width: 32px !important; height: 28px !important; padding: 0 !important; margin: 0 !important; border-radius: 7px !important; background: rgba(15, 23, 42, 0.95) !important; border: 1px solid rgba(148, 163, 184, 0.30) !important; color: #ffffff !important; font-size: 12px !important; line-height: 26px !important; font-weight: 800 !important; box-shadow: none !important; overflow: hidden !important; } #main-body form:has(select[name="deptid"]) .md-header .btn-success, #main-body form:has(select[name="deptid"]) .btn-toolbar .btn-success, #main-body form:has(select[name="deptid"]) .md-header .btn:has(.fa-eye), #main-body form:has(select[name="deptid"]) .btn-toolbar .btn:has(.fa-eye) { width: auto !important; min-width: 82px !important; padding: 0 10px !important; background: linear-gradient(135deg, #10b981, #059669) !important; border: 0 !important; white-space: nowrap !important; overflow: visible !important; } /* Message textarea */ #main-body form:has(select[name="deptid"]) textarea.markdown-editor, #main-body form:has(select[name="deptid"]) textarea[name="message"] { min-height: 250px !important; height: 250px !important; resize: vertical !important; border: 0 !important; border-radius: 0 !important; } /* Attachments */ #main-body form:has(select[name="deptid"]) input[type="file"] { height: 42px !important; padding: 8px 10px !important; background: #030817 !important; color: #ffffff !important; border: 1px solid rgba(96, 165, 250, 0.45) !important; border-radius: 9px !important; } #main-body form:has(select[name="deptid"]) button[onclick*="extraTicketAttachment"] { height: 42px !important; margin: 8px 0 0 0 !important; border-radius: 999px !important; background: rgba(15, 23, 42, 0.96) !important; border: 1px solid rgba(148, 163, 184, 0.32) !important; color: #ffffff !important; font-weight: 900 !important; } /* Attachment help text */ #main-body form:has(select[name="deptid"]) .ticket-attachments-message, #main-body form:has(select[name="deptid"]) .text-muted { color: rgba(255, 255, 255, 0.74) !important; font-size: 12px !important; line-height: 1.45 !important; margin-top: 8px !important; } /* Captcha */ #main-body form:has(select[name="deptid"]) .g-recaptcha { display: flex !important; justify-content: center !important; margin: 22px auto 20px auto !important; } /* Button row */ #main-body form:has(select[name="deptid"]) .form-group.text-center, #main-body form:has(select[name="deptid"]) p.text-center:has(input[type="submit"]), #main-body form:has(select[name="deptid"]) div.text-center:has(input[type="submit"]) { display: flex !important; justify-content: center !important; align-items: center !important; gap: 12px !important; margin: 6px 0 0 0 !important; padding: 0 !important; } /* Submit and Cancel */ #main-body form:has(select[name="deptid"]) input[type="submit"].btn, #main-body form:has(select[name="deptid"]) button[type="submit"].btn { min-width: 116px !important; height: 44px !important; padding: 0 22px !important; border-radius: 999px !important; background: linear-gradient(135deg, #10b981, #059669) !important; border: 0 !important; color: #ffffff !important; font-weight: 900 !important; line-height: 44px !important; box-shadow: 0 12px 24px rgba(16, 185, 129, 0.22) !important; } #main-body form:has(select[name="deptid"]) input[type="reset"].btn, #main-body form:has(select[name="deptid"]) .form-group.text-center .btn.btn-default, #main-body form:has(select[name="deptid"]) p.text-center .btn.btn-default { min-width: 102px !important; height: 44px !important; padding: 0 20px !important; border-radius: 999px !important; background: rgba(15, 23, 42, 0.95) !important; border: 1px solid rgba(148, 163, 184, 0.36) !important; color: #ffffff !important; font-weight: 850 !important; line-height: 42px !important; } /* Mobile */ @media (max-width: 767px) { #main-body form:has(select[name="deptid"]):has(textarea.markdown-editor), #main-body form:has(select[name="deptid"]):has(textarea[name="message"]) { max-width: calc(100% - 28px) !important; padding: 18px 14px 22px 14px !important; border-radius: 15px !important; } #main-body form:has(select[name="deptid"]) .form-group, #main-body form:has(select[name="deptid"]) .row.form-group { margin-bottom: 15px !important; } #main-body form:has(select[name="deptid"]) textarea.markdown-editor, #main-body form:has(select[name="deptid"]) textarea[name="message"] { min-height: 230px !important; height: 230px !important; } } /* Mobile sidebar spacing on support pages */ @media (max-width: 767px) { .sidebar .panel-sidebar .list-group-item, .sidebar .panel-sidebar a.list-group-item { min-height: 58px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; } .sidebar .panel-sidebar .list-group-item small, .sidebar .panel-sidebar a.list-group-item small, .sidebar .panel-sidebar .list-group-item .pull-right, .sidebar .panel-sidebar a.list-group-item .pull-right { margin-left: 8px !important; white-space: nowrap !important; } } /* KING TV SUBMIT TICKET FORM POLISH V6 END */