/* ========================================================================== VeeHosty client area, account and authentication styles Loaded after bootstrap.min.css, veehosty-compat.css and veehosty.css. No WHMCS theme CSS is loaded: everything a client page shows is styled here. 1 form system 2 auth pages 3 client layout + cards 4 page menu (context sidebar) 5 data tables + search 6 status pills 7 dashboard 8 services / domains 9 billing 10 support + tickets 11 knowledgebase, news, downloads, status 12 misc components 13 dark mode 14 small screens ========================================================================== */ /* 1. Form system ------------------------------------------------------------ */ .vh-body .form-control, .vh-body .custom-select, .vh-body select.form-control, .vh-body .vh-input, .vh-body .dataTables_wrapper .dataTables_length select { min-height: 48px; padding: 11px 14px; font: 400 15.5px/1.4 var(--vh-font); color: var(--vh-heading); background-color: var(--vh-surface); border: 1px solid #d7d8db; border-radius: 6px; box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; } html[data-theme="dark"] .vh-body .form-control, html[data-theme="dark"] .vh-body .custom-select, html[data-theme="dark"] .vh-body .vh-input { border-color: var(--vh-border-strong); } .vh-body select.form-control, .vh-body .custom-select, .vh-body .dataTables_wrapper .dataTables_length select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237a7397' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; } .vh-body select[multiple].form-control { background-image: none; padding-right: 14px; } .vh-body textarea.form-control { min-height: 130px; line-height: 1.6; } .vh-body .form-control-sm, .vh-body .input-group-sm > .form-control { min-height: 38px; padding: 6px 10px; font-size: 14px; } .vh-body .form-control:focus, .vh-body .custom-select:focus, .vh-body .vh-input:focus { border-color: var(--vh-primary); box-shadow: 0 0 0 3px var(--vh-primary-ring); outline: 0; background-color: var(--vh-surface); color: var(--vh-heading); } .vh-body .form-control::placeholder { color: #9b95b3; opacity: 1; } .vh-body .form-control:disabled, .vh-body .form-control[readonly] { background-color: var(--vh-surface-2); color: var(--vh-muted); } .vh-body label, .vh-body .col-form-label, .vh-body .control-label, .vh-field__label { display: inline-block; font-size: 14px; font-weight: 600; color: var(--vh-heading); margin-bottom: 7px; } .vh-body .form-group { margin-bottom: 18px; } .vh-body .form-text, .vh-body .field-help-text, .vh-body small.text-muted { color: var(--vh-muted) !important; font-size: 13px; } .vh-body .has-error .form-control, .vh-body .form-control.is-invalid, .vh-body .form-control.error { border-color: var(--vh-danger) !important; box-shadow: 0 0 0 3px rgba(216, 58, 58, .12); } .vh-body .field-error-msg { display: none; color: var(--vh-danger); font-size: 13px; margin-top: 6px; } .vh-body .has-error .field-error-msg { display: block; } .vh-body .input-group > .form-control { min-width: 0; } .vh-body .input-group-text { background: var(--vh-surface-2); border: 1px solid #d7d8db; color: var(--vh-muted); border-radius: 6px; min-height: 48px; } .vh-body .input-group > .input-group-append > .btn, .vh-body .input-group > .input-group-prepend > .btn { min-height: 48px; } .vh-body .form-check { padding-left: 0; display: flex; align-items: flex-start; gap: 10px; } .vh-body .form-check-input { position: static; margin: 3px 0 0; } .vh-body input[type="checkbox"], .vh-body input[type="radio"] { width: 18px; height: 18px; accent-color: var(--vh-cta); cursor: pointer; flex-shrink: 0; } .vh-check { display: inline-flex !important; align-items: center; gap: 9px; margin: 0 !important; font-weight: 500 !important; color: var(--vh-text) !important; cursor: pointer; } .vh-check input { margin: 0; } /* password reveal inside the field */ .vh-pw { position: relative; flex-wrap: nowrap; } .vh-pw > .form-control { border-radius: 6px !important; padding-right: 50px; } .vh-pw > .input-group-append { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); z-index: 4; margin: 0; } .vh-body .vh-pw__toggle, .vh-body .vh-pw-toggle { min-height: 40px !important; width: 42px; padding: 0; border: 0 !important; background: transparent !important; color: var(--vh-muted) !important; box-shadow: none !important; border-radius: 6px !important; display: inline-flex; align-items: center; justify-content: center; } .vh-body .vh-pw__toggle:hover, .vh-body .vh-pw-toggle:hover { color: var(--vh-primary) !important; background: var(--vh-primary-soft) !important; } /* 2. Authentication pages ------------------------------------------------------- */ .vh-authshell--split { grid-template-columns: minmax(380px, 34%) minmax(0, 1fr); } .vh-authshell--split.vh-authshell--wide { grid-template-columns: minmax(0, 56%) minmax(0, 1fr); } .vh-authshell--split .vh-authshell__form { padding: 30px 56px 22px; } .vh-authshell--split .vh-authshell__top { justify-content: center; position: relative; } .vh-authshell--split .vh-authshell__top .vh-iconbtn { position: absolute; right: -24px; color: var(--vh-muted) !important; } .vh-authshell--split .vh-authshell__top .vh-logo__text { font-size: 24px; color: var(--vh-heading); } .vh-authshell--split .vh-authshell__foot { text-align: center; } .vh-signin { width: 100%; max-width: 400px; margin: 0 auto; } .vh-signin--wide { max-width: 760px; } .vh-signin--card { max-width: none; } /* body.vh-auth is set by the shell; cancel the old single-card auth background */ .vh-body.vh-auth .vh-authshell--split #main-body.vh-authshell__main { background: none; } .vh-body.vh-auth .vh-authshell--center #main-body.vh-authshell__main { background: var(--vh-surface); } .vh-auth__title { font-size: 26px !important; font-weight: 700 !important; color: var(--vh-heading) !important; text-align: center; margin: 0 0 26px !important; letter-spacing: -.01em !important; } .vh-auth__title--lg { font-size: 30px !important; font-weight: 600 !important; margin-bottom: 12px !important; } .vh-auth__text { color: var(--vh-muted); text-align: center; font-size: 15.5px; margin: 0 0 24px; } .vh-auth__form { margin: 0; } .vh-field { margin-bottom: 18px; } .vh-field__label { display: block; font-size: 14px; font-weight: 500; color: var(--vh-text); margin-bottom: 6px; } .vh-body .vh-input { min-height: 52px; font-size: 16.5px; border-radius: 4px; } .vh-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 22px; font-size: 14.5px; } .vh-auth__link { color: var(--vh-cta) !important; font-weight: 600; } .vh-auth__link:hover { color: var(--vh-cta-dark) !important; } .vh-body .vh-auth__submit { display: flex; width: 100%; min-height: 52px; font-size: 16.5px; font-weight: 600; border-radius: 4px; box-shadow: none; } .vh-body .vh-auth__secondary { display: flex; width: 100%; min-height: 48px; margin-top: 10px; border-radius: 4px; } .vh-auth__alt { text-align: center; margin: 22px 0 0; font-size: 14.5px; color: var(--vh-muted); } .vh-auth__alt a { color: var(--vh-cta) !important; font-weight: 600; margin-left: 4px; } .vh-signin .alert { margin-bottom: 20px; } .vh-signin .social-signin-btns { display: grid; gap: 10px; margin-top: 18px; } .vh-signin .social-signin-btns > * { width: 100%; } .vh-signin .password-strength-meter .progress { height: 6px; margin-top: 4px; } .vh-signin .captchaimage img, .vh-register .captchaimage img { border-radius: 4px; } .vh-shell-auth .vh-trust { display: none; } /* registration form in the wide split column */ .vh-register .card { background: none; border: 0; box-shadow: none; margin-bottom: 8px !important; } .vh-register .card-body { padding: 0 0 6px !important; } .vh-register .card-title { font-size: 17px !important; font-weight: 700 !important; color: var(--vh-heading); margin: 8px 0 16px !important; padding-bottom: 10px; border-bottom: 1px solid var(--vh-border); } .vh-register .prepend-icon .field-icon { display: none !important; } .vh-register .prepend-icon .form-control:not([type="tel"]), .vh-register .prepend-icon .field:not([type="tel"]) { padding-left: 14px !important; } .vh-register .intl-tel-input input[type="tel"], .vh-register .iti input[type="tel"] { padding-left: 92px !important; } .vh-register .form-control { min-height: 50px; border-radius: 4px; } .vh-register .vh-field__label { margin-bottom: 6px; } .vh-register .vh-pw-toggle { position: absolute; right: 4px; bottom: 5px; } .vh-register .prepend-icon { position: relative; } .vh-register .generate-password { min-height: 44px; } .vh-register .password-strength-meter .progress { height: 8px; margin-top: 18px; } .vh-register .accepttos + * { margin-left: 2px; } .vh-register p.text-center { text-align: left !important; } .vh-register .vh-auth__submit { margin-top: 8px; } .vh-register .intl-tel-input, .vh-register .iti { width: 100%; } .vh-register .bootstrap-switch { border-radius: 999px; } #registration .sub-heading { text-align: center; margin: 6px 0 14px; color: var(--vh-muted); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; } /* centred auth (reset password, 2FA) */ .vh-authshell--center .vh-signin { max-width: none; } .vh-authshell--center .vh-auth__title--lg { color: #2b1f51 !important; } html[data-theme="dark"] .vh-authshell--center .vh-auth__title--lg { color: var(--vh-heading) !important; } .vh-authshell--center .vh-auth__alt a { margin-left: 0; } /* 3. Client layout and cards ------------------------------------------------------ */ .vh-clientmain .primary-content { min-width: 0; } .vh-clientmain .primary-content > .card, .vh-clientmain .primary-content > form > .card, .vh-body .vh-clientmain .card, .vh-body .vh-sitecard { background: var(--vh-surface); border: 1px solid var(--vh-border); border-radius: 14px; box-shadow: 0 1px 2px rgba(43, 31, 81, .04), 0 6px 18px rgba(43, 31, 81, .05); margin-bottom: 22px; overflow: hidden; } .vh-body .vh-clientmain .card .card { box-shadow: none; } .vh-body .card-header, .vh-body .card-footer { background: var(--vh-surface); border-color: var(--vh-border); padding: 16px 22px; } .vh-body .card-footer { background: var(--vh-surface-2); } .vh-body .card-body { padding: 22px; } .vh-body .card-title { font-size: 17px; font-weight: 700; color: var(--vh-heading); margin-bottom: 16px; } .vh-body .card-header .card-title { margin: 0; } .vh-body .vh-clientmain h2, .vh-body .vh-clientmain .h2 { font-size: 22px; } .vh-body .vh-clientmain h3, .vh-body .vh-clientmain .h3 { font-size: 19px; } .vh-body .vh-clientmain h4, .vh-body .vh-clientmain .h4 { font-size: 17px; } .vh-body .vh-clientmain p { color: var(--vh-text); } .vh-body .header-lined { border: 0; padding: 0; margin: 0 0 18px; } .vh-body .header-lined h1, .vh-body .header-lined h2 { font-size: 22px; margin: 0 0 4px; } .vh-body .vh-clientmain .primary-content > h1:first-child { display: none; } .vh-body .bg-white, .vh-body .bg-light { background-color: var(--vh-surface) !important; } .vh-body .border, .vh-body .border-top, .vh-body .border-bottom { border-color: var(--vh-border) !important; } .vh-body .text-primary { color: var(--vh-primary) !important; } .vh-body .text-success { color: var(--vh-success) !important; } .vh-body .text-danger { color: var(--vh-danger) !important; } .vh-body .text-warning { color: var(--vh-warning) !important; } /* site-shell inner pages (logged-out knowledgebase, contact, pricing ...) */ .vh-shell-site #main-body:not(.vh-main-flush) { padding: 40px 0 90px; } .vh-shell-site #main-body:not(.vh-main-flush) > .container { max-width: var(--vh-container); padding-left: 24px; padding-right: 24px; } .vh-shell-site #main-body .card { background: var(--vh-surface); border: 1px solid var(--vh-border); border-radius: 14px; box-shadow: 0 6px 18px rgba(43, 31, 81, .05); margin-bottom: 22px; overflow: hidden; } .vh-shell-site .primary-content > h1:first-child { display: none; } /* 4. Page menu (WHMCS contextual sidebar) ------------------------------------------- */ .vh-body .card-sidebar { border: 1px solid var(--vh-border) !important; border-radius: 14px !important; background: var(--vh-surface) !important; box-shadow: none !important; overflow: hidden; margin-bottom: 16px !important; } .vh-body .card-sidebar .card-header { padding: 14px 18px 10px; background: transparent; border: 0; } .vh-body .card-sidebar .card-title { display: flex; align-items: center; gap: 8px; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .09em; text-transform: uppercase; color: var(--vh-muted) !important; margin: 0 !important; } .vh-body .card-sidebar .card-title > i:first-child { color: var(--vh-primary); font-size: 13px; } .vh-body .card-sidebar .card-title .badge { margin-left: auto; float: none !important; } .vh-body .card-sidebar .card-minimise { margin-left: auto; float: none !important; cursor: pointer; font-size: 11px; color: var(--vh-muted); transition: transform .2s ease; padding: 4px; } .vh-body .card-sidebar .card-title .badge + .card-minimise { margin-left: 8px; } .vh-body .card-sidebar .card-minimise.minimised { transform: rotate(180deg); } .vh-body .card-sidebar .card-body { padding: 4px 18px 16px; font-size: 14.5px; } .vh-body .card-sidebar .list-group { padding: 0 8px 10px; flex-direction: column; } .vh-body .card-sidebar .list-group-item { border: 0 !important; border-radius: 9px !important; margin: 1px 0; padding: 9px 12px; background: transparent; color: var(--vh-text) !important; font-size: 14.5px; font-weight: 500; display: block; } .vh-body .card-sidebar .list-group-item-action:hover, .vh-body .card-sidebar .list-group-item-action:focus { background: var(--vh-primary-soft); color: var(--vh-primary) !important; } .vh-body .card-sidebar .list-group-item.active { background: var(--vh-primary-soft) !important; color: var(--vh-primary) !important; font-weight: 700; box-shadow: none; } .vh-body .card-sidebar .list-group-item.disabled { opacity: .5; } .vh-body .sidebar-menu-item-wrapper { display: flex; align-items: center; gap: 10px; } .vh-body .sidebar-menu-item-icon-wrapper { width: 18px; text-align: center; color: var(--vh-muted); flex-shrink: 0; } .vh-body .list-group-item.active .sidebar-menu-item-icon-wrapper, .vh-body .list-group-item-action:hover .sidebar-menu-item-icon-wrapper { color: var(--vh-primary); } .vh-body .sidebar-menu-item-label { flex: 1; min-width: 0; } .vh-body .sidebar-menu-item-badge .badge, .vh-body .card-sidebar .list-group-item .badge { background: var(--vh-surface-2); color: var(--vh-heading); border: 1px solid var(--vh-border); border-radius: 999px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; } .vh-body .list-group-item.active .badge { background: var(--vh-primary); color: #fff; border-color: var(--vh-primary); } .vh-body .card-sidebar .card-footer { background: transparent; border-top: 1px solid var(--vh-border); padding: 12px 18px; } .vh-body .card-sidebar .card-footer .btn { width: 100%; } .vh-body .card-sidebar .btn { font-size: 14px; } .vh-body .card-sidebar .card-body .btn-block { margin-top: 10px; } .vh-body .card-sidebar.d-block.d-md-none { display: none !important; } @media (max-width: 767.98px) { .vh-body .card-sidebar.d-none.d-md-block { display: block !important; } } /* 5. Data tables and search ------------------------------------------------------------ */ .vh-body .table-container { background: var(--vh-surface); border: 1px solid var(--vh-border); border-radius: 14px; padding: 0; overflow: hidden; box-shadow: 0 1px 2px rgba(43, 31, 81, .04), 0 6px 18px rgba(43, 31, 81, .05); margin-bottom: 22px; } .vh-body .table-container { overflow-x: auto; } .vh-body .dataTables_wrapper { padding: 0; } .vh-body .dataTables_wrapper .listtable { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; } .vh-body .dataTables_wrapper .listtable > .dataTables_filter { order: 1; flex: 1 1 320px; padding: 18px 20px 0; } .vh-body .dataTables_wrapper .listtable > .dataTables_info { order: 2; padding: 18px 20px 0; margin-left: auto; color: var(--vh-muted); font-size: 13.5px; white-space: nowrap; } .vh-body .dataTables_wrapper .listtable > table, .vh-body .dataTables_wrapper .listtable > .table-responsive { order: 3; flex: 1 1 100%; width: 100% !important; margin: 14px 0 0 !important; } .vh-body .dataTables_wrapper .dataTables_filter { text-align: left; float: none; } .vh-body .dataTables_wrapper .dataTables_filter label { position: relative; display: block; width: 100%; max-width: 420px; margin: 0; font-size: 0; } .vh-body .dataTables_wrapper .dataTables_filter label::before { content: ""; position: absolute; left: 15px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); pointer-events: none; z-index: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a7397' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat center / 16px 16px; } .vh-body .dataTables_wrapper .dataTables_filter input { width: 100% !important; margin: 0 !important; height: 46px; padding: 0 16px 0 42px; font: 500 15px var(--vh-font); color: var(--vh-heading); background: var(--vh-bg-alt); border: 1px solid var(--vh-border); border-radius: 10px; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } /* theme.css adds its own search.png inside the box with a stronger selector: drop it, the label icon above is the only one */ .vh-body .dataTables_wrapper .dataTables_filter label .form-control, .vh-body .dataTables_wrapper .dataTables_filter label input[type="search"] { background-image: none !important; background-color: var(--vh-bg-alt); padding: 0 16px 0 42px !important; height: 46px; } .vh-body .dataTables_wrapper .dataTables_filter label .form-control:focus { background-color: var(--vh-surface); } .vh-body .dataTables_wrapper .dataTables_filter input::placeholder { color: #9b95b3; } .vh-body .dataTables_wrapper .dataTables_filter input:focus { outline: 0; background: var(--vh-surface); border-color: var(--vh-primary); box-shadow: 0 0 0 3px var(--vh-primary-ring); } .vh-body .dataTables_wrapper .dataTables_length { float: none; padding: 14px 20px 18px; color: var(--vh-muted); font-size: 13.5px; } .vh-body .dataTables_wrapper .dataTables_length label { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; color: var(--vh-muted); font-size: 13.5px; } .vh-body .dataTables_wrapper .dataTables_length select { min-height: 38px; height: 38px; padding: 4px 34px 4px 12px; font-size: 14px; border-radius: 8px; width: auto; background-position: right 11px center; } .vh-body .dataTables_wrapper .dataTables_paginate { float: right; padding: 14px 20px 18px; } .vh-body .dataTables_wrapper .dataTables_paginate .pagination { margin: 0; gap: 6px; flex-wrap: wrap; } .vh-body .dataTables_wrapper::after { content: ""; display: block; clear: both; } .vh-body table.table, .vh-body table.dataTable { width: 100%; border-collapse: separate !important; border-spacing: 0; color: var(--vh-text); margin: 0 !important; } .vh-body .table thead th, .vh-body table.dataTable thead th { background: var(--vh-surface-2); color: var(--vh-muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 13px 18px !important; border-top: 1px solid var(--vh-border); border-bottom: 1px solid var(--vh-border) !important; white-space: nowrap; text-align: left; } .vh-body .table td, .vh-body table.dataTable tbody td { padding: 16px 18px !important; border-top: 0; border-bottom: 1px solid var(--vh-border); vertical-align: middle; font-size: 15px; color: var(--vh-text); background: transparent; } .vh-body .table tbody tr:last-child td { border-bottom: 0; } .vh-body .table td strong, .vh-body .table td a { color: var(--vh-heading); } .vh-body .table td a:hover { color: var(--vh-primary); } .vh-body .table-list tbody tr, .vh-body table.dataTable tbody tr { cursor: pointer; transition: background-color .12s ease; } .vh-body .table-list tbody tr:hover td, .vh-body table.dataTable tbody tr:hover td { background: var(--vh-primary-soft); } .vh-body .table-striped tbody tr:nth-of-type(odd) { background: transparent; } .vh-body .table-bordered, .vh-body .table-bordered td, .vh-body .table-bordered th { border-color: var(--vh-border); } .vh-body .table .text-center { text-align: center !important; } .vh-body table.dataTable thead .sorting, .vh-body table.dataTable thead .sorting_asc, .vh-body table.dataTable thead .sorting_desc { cursor: pointer; position: relative; padding-right: 30px !important; } .vh-body table.dataTable thead .sorting::before, .vh-body table.dataTable thead .sorting::after, .vh-body table.dataTable thead .sorting_asc::before, .vh-body table.dataTable thead .sorting_asc::after, .vh-body table.dataTable thead .sorting_desc::before, .vh-body table.dataTable thead .sorting_desc::after { display: none !important; content: none !important; } .vh-body table.dataTable thead .sorting { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cpath d='M4 0l4 5H0zM4 12L0 7h8z' fill='%23c3bdd8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .vh-body table.dataTable thead .sorting_asc { color: var(--vh-primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cpath d='M4 0l4 5H0z' fill='%236a4bd0'/%3E%3Cpath d='M4 12L0 7h8z' fill='%23d9d4ea'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .vh-body table.dataTable thead .sorting_desc { color: var(--vh-primary); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cpath d='M4 0l4 5H0z' fill='%23d9d4ea'/%3E%3Cpath d='M4 12L0 7h8z' fill='%236a4bd0'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .vh-body table.dataTable td.dataTables_empty { text-align: center; padding: 48px 20px !important; color: var(--vh-muted); cursor: default; } .vh-body table.dataTable td.dataTables_empty::before { content: ""; display: block; width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 16px; background: var(--vh-primary-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236a4bd0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h18M6 3h12l3 4v13a1 1 0 01-1 1H4a1 1 0 01-1-1V7z'/%3E%3Cpath d='M9 12h6'/%3E%3C/svg%3E") no-repeat center / 24px; } .vh-body table.dataTable tbody tr:has(td.dataTables_empty):hover td { background: transparent; } .vh-body table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before, .vh-body table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before { background: var(--vh-primary); border: 0; box-shadow: none; top: 50%; transform: translateY(-50%); } .vh-body table.dataTable > tbody > tr.child ul.dtr-details { width: 100%; } .vh-body table.dataTable > tbody > tr.child ul.dtr-details > li { border-bottom: 1px solid var(--vh-border); padding: 8px 0; } .vh-body .table-responsive { border: 0; } .vh-body .table-container .table-responsive, .vh-body .card .table-responsive { margin: 0; } .vh-body .card > .table, .vh-body .card > .table-responsive > .table { margin: 0; } .vh-body .card .table thead th:first-child, .vh-body .table-container .table thead th:first-child { border-left: 0; } .vh-body table.dataTable tbody td:first-child { color: var(--vh-heading); font-weight: 600; } /* table cell helpers WHMCS prints */ .vh-body .table-list td .text-domain, .vh-body .table-list td small, .vh-body .table-list .text-muted { color: var(--vh-muted) !important; font-size: 13.5px; } .vh-body .ssl-info img, .vh-body .table-list .ssl-info img { width: 22px; height: 22px; } .vh-body .table-list td .sorting-hidden { display: none; } /* pagination (DataTables + Bootstrap) */ .vh-body .pagination { gap: 6px; } .vh-body .page-item .page-link { min-width: 38px; height: 38px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px !important; margin: 0; border: 1px solid var(--vh-border); background: var(--vh-surface); color: var(--vh-heading); font-weight: 600; font-size: 14px; box-shadow: none; } .vh-body .page-item .page-link:hover { background: var(--vh-primary-soft); border-color: var(--vh-primary); color: var(--vh-primary); } .vh-body .page-item.active .page-link { background: var(--vh-primary); border-color: var(--vh-primary); color: #fff; } .vh-body .page-item.disabled .page-link { background: var(--vh-surface-2); color: #b7b1cc; border-color: var(--vh-border); } /* every other search box */ .vh-body .kb-search .form-control, .vh-body .input-group-lg.kb-search .form-control, .vh-body form[action*="knowledgebase"] input[name="search"], .vh-body .announcements-search input, .vh-body .downloads-search input, .vh-body input[type="search"].form-control { height: 50px; min-height: 50px; border-radius: 10px !important; padding-left: 44px; background: var(--vh-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a7397' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 16px center / 16px 16px; } .vh-body .kb-search .input-group-append .btn, .vh-body .input-group-lg .btn { min-height: 50px; border-radius: 10px !important; margin-left: 8px; } .vh-body .input-group.kb-search, .vh-body .input-group-lg { flex-wrap: nowrap; } .vh-body .vh-search input[type="search"] { padding-left: 44px; background-image: none; } /* 6. Status pills ----------------------------------------------------------------------- */ .vh-body .label, .vh-body .badge, .vh-body .status { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .01em; padding: 5px 11px; line-height: 1.2; white-space: nowrap; border: 0; } .vh-body .label::before, .vh-body .status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; } .vh-body .label.requestor-badge::before { display: none; } .vh-body .label, .vh-body .badge-secondary, .vh-body .badge-light { background: var(--vh-surface-2); color: var(--vh-muted); } .vh-body .status-active, .vh-body .status-paid, .vh-body .status-completed, .vh-body .status-accepted, .vh-body .status-open, .vh-body .status-delivered, .vh-body .label-success, .vh-body .badge-success { background: rgba(15, 157, 107, .12) !important; color: #0c8a5d !important; } .vh-body .status-pending, .vh-body .status-unpaid, .vh-body .status-customer-reply, .vh-body .status-in-progress, .vh-body .status-pending-transfer, .vh-body .status-pending-registration, .vh-body .status-on-hold, .vh-body .status-draft, .vh-body .label-warning, .vh-body .badge-warning { background: rgba(245, 158, 11, .14) !important; color: #b45309 !important; } .vh-body .status-suspended, .vh-body .status-overdue, .vh-body .status-fraud, .vh-body .status-terminated, .vh-body .status-expired, .vh-body .status-dead, .vh-body .status-redemption, .vh-body .status-grace, .vh-body .label-danger, .vh-body .badge-danger { background: rgba(216, 58, 58, .12) !important; color: #c22f2f !important; } .vh-body .status-cancelled, .vh-body .status-closed, .vh-body .status-refunded, .vh-body .status-collections, .vh-body .status-transferred-away, .vh-body .label-default { background: var(--vh-surface-2) !important; color: var(--vh-muted) !important; } .vh-body .status-answered, .vh-body .label-info, .vh-body .badge-info, .vh-body .badge-primary, .vh-body .label-primary { background: var(--vh-primary-soft) !important; color: var(--vh-primary) !important; } .vh-body .status-custom { background: var(--vh-surface-2); } /* 7. Dashboard -------------------------------------------------------------------------- */ .vh-dash-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 18px 22px; margin-bottom: 22px; background: var(--vh-surface); border: 1px solid var(--vh-border); border-radius: 14px; box-shadow: 0 6px 18px rgba(43, 31, 81, .05); } .vh-dash-hero__eyebrow { margin: 0 0 2px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vh-muted); } .vh-dash-hero__sub { margin: 0; font-size: 15.5px; font-weight: 600; color: var(--vh-heading); } .vh-dash-hero__sub .fa-check-circle { color: var(--vh-success); } .vh-dash-hero__sub .fa-info-circle { color: var(--vh-warning); } .vh-dash-hero__sub .fa-exclamation-circle { color: var(--vh-danger); } .vh-dash-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; } .vh-dash-hero__actions .vh-btn { padding: 10px 18px; font-size: 14.5px; } .vh-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 22px; } .vh-kpi { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon label" "value value" "meta meta"; gap: 4px 12px; align-items: center; padding: 20px 20px 18px; border-radius: 14px; background: var(--vh-surface); border: 1px solid var(--vh-border); text-decoration: none !important; box-shadow: 0 6px 18px rgba(43, 31, 81, .05); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .vh-kpi:hover { transform: translateY(-3px); border-color: var(--vh-primary); box-shadow: 0 16px 34px rgba(43, 31, 81, .12); } .vh-kpi__icon { grid-area: icon; width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; } .vh-kpi__icon--violet { background: var(--vh-primary-soft); color: var(--vh-primary); } .vh-kpi__icon--blue { background: rgba(142, 149, 255, .16); color: #5b62e0; } .vh-kpi__icon--green { background: rgba(15, 157, 107, .12); color: #0c8a5d; } .vh-kpi__icon--orange { background: rgba(245, 116, 59, .14); color: var(--vh-cta); } .vh-kpi__label { grid-area: label; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vh-muted); } .vh-kpi__value { grid-area: value; margin-top: 12px; font-size: 32px; font-weight: 800; letter-spacing: -.03em; color: var(--vh-heading); line-height: 1.1; } .vh-kpi__value small { font-size: 16px; font-weight: 600; color: var(--vh-muted); letter-spacing: 0; } .vh-kpi__value--money { font-size: 26px; } .vh-kpi__meta { grid-area: meta; font-size: 13.5px; font-weight: 600; color: var(--vh-primary); display: flex; align-items: center; gap: 6px; } .vh-kpi__meta i { font-size: 11px; transition: transform .18s ease; } .vh-kpi:hover .vh-kpi__meta i { transform: translateX(3px); } .vh-kpi--alert { border-color: rgba(245, 116, 59, .45); } .vh-kpi--alert .vh-kpi__meta { color: var(--vh-cta); } .vh-actions-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 26px; } .vh-actions-row a { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 12px; background: var(--vh-surface); border: 1px solid var(--vh-border); font-weight: 600; font-size: 14.5px; color: var(--vh-heading) !important; text-decoration: none !important; transition: border-color .15s ease, background-color .15s ease; } .vh-actions-row a:hover { border-color: var(--vh-primary); background: var(--vh-primary-soft); } .vh-actions-row span { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(245, 116, 59, .12); color: var(--vh-cta); } .vh-dash { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; align-items: start; } .vh-dash__main, .vh-dash__side { display: grid; gap: 22px; min-width: 0; } .vh-body .vh-widget { margin: 0 !important; border-radius: 14px !important; } .vh-body .vh-widget__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: var(--vh-surface); border-bottom: 1px solid var(--vh-border); } .vh-body .vh-widget__title { display: flex; align-items: center; gap: 10px; font-size: 16px !important; font-weight: 700 !important; margin: 0 !important; color: var(--vh-heading); } .vh-widget__icon { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--vh-primary-soft); color: var(--vh-primary); font-size: 14px; } .vh-body .vh-widget__title .badge { background: var(--vh-cta); color: #fff; } .vh-body .vh-widget__title .badge::before { display: none; } .vh-widget__link { font-size: 13.5px; font-weight: 700; color: var(--vh-primary) !important; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } .vh-widget__link i { font-size: 11px; } .vh-body .vh-widget__body { padding: 18px 20px; font-size: 15px; color: var(--vh-text); } .vh-body .vh-widget__body p:last-child { margin-bottom: 0; } .vh-body .vh-widget__list { padding: 6px 0; max-height: 380px; overflow-y: auto; scrollbar-width: thin; } .vh-body .vh-widget__list .list-group-item { border: 0; border-bottom: 1px solid var(--vh-border); border-radius: 0 !important; padding: 13px 20px; background: transparent; color: var(--vh-text) !important; font-size: 14.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; } .vh-body .vh-widget__list .list-group-item:last-child { border-bottom: 0; } .vh-body .vh-widget__list .list-group-item-action:hover { background: var(--vh-primary-soft); } .vh-body .vh-widget__list .list-group-item .text-last-updated, .vh-body .vh-widget__list .list-group-item small { color: var(--vh-muted); font-size: 12.5px; flex-basis: 100%; } .vh-body .vh-widget__list .div-service-item { display: flex; align-items: center; gap: 12px; width: 100%; } .vh-body .vh-widget__list .div-service-status { flex-shrink: 0; } .vh-body .vh-widget__list .div-service-name { flex: 1; min-width: 0; color: var(--vh-heading); font-weight: 600; } .vh-body .vh-widget__list .div-service-name .text-domain { display: block; color: var(--vh-muted); font-weight: 500; font-size: 13px; } .vh-body .vh-widget__list .div-service-buttons .btn { padding: 6px 12px; font-size: 13px; } .vh-body .vh-widget__foot { background: var(--vh-surface-2); padding: 12px 20px; font-size: 13.5px; } .vh-body .vh-widget__foot:empty { display: none; } .vh-body .vh-widget .card-body .btn { margin-top: 4px; } .vh-dash-addon { margin-bottom: 22px; } /* 8. Services and domains --------------------------------------------------------------- */ .vh-body .product-details { display: block; } .vh-body .product-status { position: relative; border-radius: 14px; padding: 28px 20px 22px; text-align: center; color: #fff; overflow: hidden; margin-bottom: 14px !important; background: radial-gradient(260px 160px at 100% 0%, rgba(255, 255, 255, .2), transparent 60%), linear-gradient(140deg, #3b1d8f, #6a4bd0); } .vh-body .product-status .product-icon .fa-stack { font-size: 26px; } .vh-body .product-status .product-icon .fa-circle { color: rgba(255, 255, 255, .16); } .vh-body .product-status .product-icon .fa-inverse { color: #fff; } .vh-body .product-status h3, .vh-body .product-status h4 { color: #fff !important; margin: 10px 0 2px; font-size: 22px; font-weight: 800; } .vh-body .product-status h4 { font-size: 14px; font-weight: 500; opacity: .85; } .vh-body .product-status .product-status-text { display: inline-block; margin-top: 14px; padding: 5px 14px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .vh-body .product-status-active .product-status-text { background: rgba(52, 211, 153, .25); } .vh-body .product-status-suspended .product-status-text, .vh-body .product-status-terminated .product-status-text { background: rgba(248, 113, 113, .3); } .vh-body .product-status-pending .product-status-text { background: rgba(251, 191, 36, .3); } .vh-body .product-actions-wrapper { margin: 0 -5px; } .vh-body .product-actions-wrapper > [class*="col-"] { padding: 5px; } .vh-body .product-details .col-md-6.text-center { text-align: left !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; align-content: start; font-size: 16px; font-weight: 700; color: var(--vh-heading); line-height: 1.4; } .vh-body .product-details .col-md-6.text-center > h4 { grid-column: 1 / -1; margin: 14px 0 0; font-size: 11.5px !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vh-muted); } .vh-body .product-details .col-md-6.text-center > h4:first-child { margin-top: 0; } .vh-body .product-details .col-md-6.text-center { display: block; } .vh-body .product-details .col-md-6.text-center > h4 { display: block; margin-bottom: 3px; }.vh-body .product-details-tab-container { border: 1px solid var(--vh-border); border-top: 0; border-radius: 0 0 14px 14px; padding: 22px; background: var(--vh-surface) !important; margin-bottom: 22px; } .vh-body .responsive-tabs-sm-connector { display: none; } /* tabs */ .vh-body .nav-tabs { border-bottom: 1px solid var(--vh-border); gap: 2px; flex-wrap: wrap; } .vh-body .nav-tabs .nav-link { border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; color: var(--vh-muted); font-weight: 600; font-size: 14.5px; padding: 12px 16px; margin-bottom: -1px; } .vh-body .nav-tabs .nav-link:hover { color: var(--vh-primary); } .vh-body .nav-tabs .nav-link.active, .vh-body .nav-tabs .nav-item.show .nav-link { color: var(--vh-heading); border-bottom-color: var(--vh-cta); background: transparent; } .vh-body .card > .card-header .nav-tabs, .vh-body .card-header-tabs { margin: -16px -22px -17px; padding: 0 12px; } .vh-body .nav-pills .nav-link { border-radius: 9px; font-weight: 600; color: var(--vh-text); } .vh-body .nav-pills .nav-link.active { background: var(--vh-primary); color: #fff; } .vh-body .tab-content > .tab-pane { padding-top: 4px; } /* domain pages */ .vh-body .domain-details .card-body, .vh-body #domainsInfo { font-size: 15px; } .vh-body .bulk-domain-management, .vh-body .domains-overview { margin-bottom: 22px; } .vh-body .btn-group-toggle .btn.active { background: var(--vh-primary); color: #fff !important; border-color: var(--vh-primary); } .vh-body .dns-records td, .vh-body .dns-records th { padding: 10px 12px !important; } .vh-body .bootstrap-switch { border-radius: 999px; border-color: var(--vh-border-strong); } .vh-body .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success { background: var(--vh-success); } .vh-body .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary { background: var(--vh-primary); } .vh-body .bootstrap-switch .bootstrap-switch-handle-off { background: var(--vh-surface-2); color: var(--vh-muted); } /* upgrade, cancel, configure ssl */ .vh-body .upgrade-container .card, .vh-body .upgrade .card { margin-bottom: 18px; } .vh-body .cancel-request .form-group { margin-bottom: 20px; } /* bulk action button bar above the domains table */ .vh-body .btn-group.btn-group-sm.mb-3 { display: flex; flex-wrap: wrap; gap: 8px; } .vh-body .btn-group.btn-group-sm.mb-3 > .btn, .vh-body .btn-group.btn-group-sm.mb-3 > .btn-group > .btn { border-radius: 8px !important; margin: 0 !important; } /* 9. Billing ---------------------------------------------------------------------------- */ .vh-body .invoice-summary, .vh-body .add-funds-summary { border-radius: 14px; } .vh-body .masspay .table td, .vh-body .masspay .table th { padding: 12px 16px !important; } .vh-body .credit-balance, .vh-body .alert-credit-balance { border-radius: 12px; } .vh-body .paymethod-info { display: inline-flex; align-items: center; gap: 8px; } .vh-body .account-paymethods .btn-group .btn { padding: 6px 12px; font-size: 13px; } /* 10. Support and tickets --------------------------------------------------------------- */ .vh-body .view-ticket > .card-body:first-child { padding: 20px 22px; border-bottom: 1px solid var(--vh-border); } .vh-body .view-ticket > .card-body:first-child .card-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 19px; } .vh-body .view-ticket > .card-body:first-child .ticket-actions { margin: 0 !important; display: flex; gap: 8px; } .vh-body .view-ticket > .card-body:first-child p { margin: 0; color: var(--vh-muted); } .vh-body .view-ticket > .card-body:first-child p strong { color: var(--vh-heading); } .vh-msg { display: flex; gap: 14px; align-items: flex-start; padding: 18px 22px !important; border: 0 !important; background: transparent; } .vh-msg + .vh-msg { padding-top: 6px !important; } .vh-msg__avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; background: linear-gradient(135deg, var(--vh-cta), #ff9a6b); color: #fff; } .vh-msg--staff .vh-msg__avatar { background: linear-gradient(135deg, var(--vh-primary), var(--vh-accent)); } .vh-msg .ticket-reply { flex: 1; min-width: 0; border: 1px solid var(--vh-border); border-radius: 4px 16px 16px 16px; background: var(--vh-surface); overflow: hidden; margin: 0; } .vh-msg--staff .ticket-reply { background: var(--vh-primary-soft); border-color: rgba(106, 75, 208, .22); } .vh-msg .ticket-reply .posted-by { padding: 12px 18px 0; font-size: 13.5px; color: var(--vh-muted); background: transparent; border: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } .vh-msg .ticket-reply .posted-by-name { color: var(--vh-heading); font-weight: 700; } .vh-msg .ticket-reply .requestor-badge { margin-left: auto; float: none !important; background: var(--vh-surface-2); color: var(--vh-muted); padding: 3px 10px; } .vh-msg--staff .ticket-reply .requestor-badge { background: var(--vh-primary); color: #fff; } .vh-msg .ticket-reply .message { padding: 10px 18px 16px !important; color: var(--vh-text); font-size: 15px; line-height: 1.7; word-wrap: break-word; } .vh-msg .ticket-reply .message hr { border-color: var(--vh-border); margin: 12px 0 8px; } .vh-msg .ticket-reply .attachments { padding: 12px 18px 16px !important; border-top: 1px dashed var(--vh-border); font-size: 13.5px; } .vh-body .attachment-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .vh-body .attachment-list li a, .vh-body .attachment-list li > span { display: inline-flex; } .vh-body .attachment-list li span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--vh-border); background: var(--vh-surface); } .vh-body .attachment-list figure { margin: 0; color: var(--vh-primary); } .vh-body .attachment-list .caption { font-weight: 600; color: var(--vh-heading); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vh-body .rating .star, .vh-body .rating-done .star { color: #f5a623; } .vh-body #ticketReplyContainer .card-body, .vh-body .ticket-reply-form { padding: 22px; } .vh-body .md-editor { border: 1px solid #d7d8db !important; border-radius: 8px; overflow: hidden; } .vh-body .md-editor > .md-header { background: var(--vh-surface-2); border-bottom: 1px solid var(--vh-border); padding: 6px; } .vh-body .md-editor > .md-header .btn { background: transparent; border: 0; color: var(--vh-muted) !important; padding: 6px 9px; box-shadow: none; } .vh-body .md-editor > .md-header .btn:hover { background: var(--vh-primary-soft); color: var(--vh-primary) !important; } .vh-body .md-editor > textarea { border: 0 !important; background: var(--vh-surface); color: var(--vh-heading); padding: 14px; font-size: 15px; box-shadow: none; } .vh-body .md-editor .md-footer { background: var(--vh-surface-2); border-top: 1px solid var(--vh-border); color: var(--vh-muted); font-size: 12.5px; } .vh-body .custom-file-label, .vh-body .input-group .custom-file-label { min-height: 48px; padding: 12px 14px; border-radius: 6px; border: 1px dashed var(--vh-border-strong); background: var(--vh-surface-2); color: var(--vh-muted); } .vh-body .custom-file-label::after { height: 46px; padding: 12px 16px; background: var(--vh-primary-soft); color: var(--vh-primary); border-left: 1px solid var(--vh-border); font-weight: 600; } .vh-body .custom-file-input { height: 48px; } .vh-body .ticket-subject, .vh-body .supportticketsubmit .card-title { color: var(--vh-heading); } /* submit ticket step one: department picker */ .vh-body .supportticketsubmit-stepone .list-group-item, .vh-body .dept-list a, .vh-body .card .list-group-item.list-group-item-action { border: 1px solid var(--vh-border); border-radius: 12px !important; margin-bottom: 10px; padding: 16px 18px; background: var(--vh-surface); color: var(--vh-heading) !important; } .vh-body .supportticketsubmit-stepone .list-group-item:hover, .vh-body .card .list-group-item.list-group-item-action:hover { border-color: var(--vh-primary); background: var(--vh-primary-soft); } /* 11. Knowledgebase, announcements, downloads, server status, contact, domain pricing ------ */ .vh-body .kb-search, .vh-body .announcements-search { margin-bottom: 22px; } .vh-body .kb-category, .vh-body .kbcategories a, .vh-body .kb-article-item, .vh-body .kbarticles > a, .vh-body .download-item, .vh-body .announcement-single { color: var(--vh-heading); text-decoration: none !important; } .vh-body .kbcategories, .vh-body .kb-categories { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .vh-body .card .list-group-flush .list-group-item, .vh-body .kb-articles .list-group-item { border: 0; border-bottom: 1px solid var(--vh-border); border-radius: 0 !important; padding: 15px 22px; background: transparent; color: var(--vh-heading) !important; margin: 0; } .vh-body .card .list-group-flush .list-group-item:last-child { border-bottom: 0; } .vh-body .card .list-group-flush .list-group-item:hover { background: var(--vh-primary-soft); } .vh-body .card .list-group-flush .list-group-item small, .vh-body .card .list-group-flush .list-group-item .text-muted { display: block; color: var(--vh-muted) !important; font-size: 13.5px; margin-top: 4px; } .vh-body .card .list-group-flush .list-group-item i:first-child { color: var(--vh-primary); width: 20px; } .vh-body .announcement-single h3 a, .vh-body .announcement h2 { color: var(--vh-heading); } .vh-body .announcement-single .label, .vh-body .announcement .label { margin-bottom: 10px; } .vh-body .kb-article-content, .vh-body .announcement-content, .vh-body .markdown-content { font-size: 16px; line-height: 1.75; color: var(--vh-text); } .vh-body .kb-article-content img, .vh-body .announcement-content img { max-width: 100%; height: auto; border-radius: 10px; } .vh-body .kb-rate-article { border-top: 1px solid var(--vh-border); padding-top: 18px; margin-top: 18px; } .vh-body .server-status .card, .vh-body .network-issue { border-radius: 14px; } .vh-body .server-status .table td, .vh-body #tableServerStatus td { text-align: center; } .vh-body .server-status .table td:first-child, .vh-body #tableServerStatus td:first-child { text-align: left; font-weight: 600; color: var(--vh-heading); } .vh-body .server-status img, .vh-body #tableServerStatus img { width: 18px; } .vh-body .contact-form .card-body, .vh-body form[action*="contact"] { font-size: 15px; } /* domain pricing page */ .vh-body .domain-pricing .tld-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .vh-body .domain-pricing .tld-filters a, .vh-body .tld-filters .badge { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--vh-border); background: var(--vh-surface); color: var(--vh-heading) !important; font-size: 13.5px; font-weight: 600; text-decoration: none !important; } .vh-body .domain-pricing .tld-filters a.active, .vh-body .domain-pricing .tld-filters a:hover { background: var(--vh-primary); border-color: var(--vh-primary); color: #fff !important; } .vh-body .domain-pricing .tld-filters a::before { display: none; } .vh-body .domain-pricing .tld-pricing-header, .vh-body .domain-pricing .tld-row { display: flex; align-items: center; border-bottom: 1px solid var(--vh-border); background: var(--vh-surface); } .vh-body .domain-pricing .tld-pricing-header { background: var(--vh-surface-2); color: var(--vh-muted); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: 14px 14px 0 0; border: 1px solid var(--vh-border); } .vh-body .domain-pricing .tld-pricing-header > div, .vh-body .domain-pricing .tld-row > div { padding: 13px 18px; } .vh-body .domain-pricing .bg-white { border: 1px solid var(--vh-border); border-top: 0; border-radius: 0 0 14px 14px; overflow: hidden; margin-bottom: 28px; } .vh-body .domain-pricing .tld-row:hover { background: var(--vh-primary-soft); } .vh-body .domain-pricing .tld-row strong, .vh-body .domain-pricing .tld-row .two-row-center strong { color: var(--vh-heading); font-size: 16px; } .vh-body .domain-pricing .tld-row small { color: var(--vh-muted); } .vh-body .domain-pricing .tld-row .label, .vh-body .domain-pricing .tld-sale-group .label { font-size: 10.5px; padding: 2px 8px; margin-left: 6px; } .vh-body .domain-pricing .tld-row .label::before { display: none; } .vh-body .domain-pricing .tld-sale-group-hot { background: rgba(216, 58, 58, .12); color: #c22f2f; } .vh-body .domain-pricing .tld-sale-group-new { background: rgba(15, 157, 107, .12); color: #0c8a5d; } .vh-body .domain-pricing .tld-sale-group-sale { background: rgba(245, 116, 59, .14); color: #d9551b; } .vh-body .domain-pricing h4 { font-size: 18px; margin: 4px 0 14px; } /* 12. Misc components ----------------------------------------------------------------------- */ .vh-body .alert { border-radius: 12px; padding: 14px 18px; font-size: 15px; border-width: 1px; } .vh-body .alert-success { background: rgba(15, 157, 107, .08); border-color: rgba(15, 157, 107, .3); color: #0b7a52; } .vh-body .alert-info { background: var(--vh-primary-soft); border-color: rgba(106, 75, 208, .25); color: #4a2fb0; } .vh-body .alert-warning { background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .35); color: #925005; } .vh-body .alert-danger { background: rgba(216, 58, 58, .08); border-color: rgba(216, 58, 58, .3); color: #b42626; } .vh-body .alert a { color: inherit; font-weight: 700; text-decoration: underline; } .vh-body .alert ul { margin: 6px 0 0; padding-left: 20px; } .vh-body .alert .btn { text-decoration: none; } .vh-body .dropdown-menu { border-radius: 12px; border: 1px solid var(--vh-border); box-shadow: 0 18px 40px rgba(43, 31, 81, .16); padding: 6px; background: var(--vh-surface); } .vh-body .dropdown-item { border-radius: 8px; padding: 9px 12px; font-size: 14.5px; color: var(--vh-heading); } .vh-body .dropdown-item:hover, .vh-body .dropdown-item:focus, .vh-body .dropdown-item.active { background: var(--vh-primary-soft); color: var(--vh-primary); } .vh-body .modal-content { border-radius: 16px; border: 1px solid var(--vh-border); background: var(--vh-surface); box-shadow: 0 30px 70px rgba(18, 6, 43, .3); } .vh-body .modal-header { border-bottom: 1px solid var(--vh-border); padding: 18px 24px; } .vh-body .modal-title { font-size: 19px; font-weight: 700; color: var(--vh-heading); } .vh-body .modal-body { padding: 22px 24px; color: var(--vh-text); } .vh-body .modal-footer { border-top: 1px solid var(--vh-border); padding: 14px 24px; gap: 8px; background: var(--vh-surface-2); border-radius: 0 0 16px 16px; } .vh-body .modal-backdrop.show { opacity: .55; background: #12062b; } .vh-body .close { color: var(--vh-heading); opacity: .55; text-shadow: none; font-size: 26px; } .vh-body .progress { height: 8px; border-radius: 999px; background: var(--vh-surface-2); overflow: hidden; } .vh-body .progress-bar { background: linear-gradient(90deg, var(--vh-primary), var(--vh-accent)); } .vh-body .progress-bar.bg-success { background: var(--vh-success) !important; } .vh-body .progress-bar.bg-warning { background: #f59e0b !important; } .vh-body .progress-bar.bg-danger { background: var(--vh-danger) !important; } .vh-body .popover { border-radius: 12px; border: 1px solid var(--vh-border); background: var(--vh-surface); box-shadow: 0 18px 40px rgba(43, 31, 81, .16); font-family: var(--vh-font); } .vh-body .popover-header { background: var(--vh-surface-2); border-bottom: 1px solid var(--vh-border); color: var(--vh-heading); } .vh-body .popover-body { color: var(--vh-text); } .vh-body .tooltip-inner { background: #1c0b45; border-radius: 8px; font-family: var(--vh-font); font-size: 13px; padding: 6px 10px; } .vh-body .list-group-item { background: var(--vh-surface); border-color: var(--vh-border); color: var(--vh-text); } .vh-body .btn-default { background: var(--vh-surface); border: 1px solid var(--vh-border-strong); color: var(--vh-heading) !important; } .vh-body .btn-default:hover, .vh-body .btn-default:focus { background: var(--vh-primary-soft); border-color: var(--vh-primary); color: var(--vh-primary) !important; } .vh-body .btn-danger { background: transparent; border: 1px solid rgba(216, 58, 58, .45); color: #c22f2f !important; box-shadow: none; } .vh-body .btn-danger:hover, .vh-body .btn-danger:focus { background: #d83a3a; border-color: #d83a3a; color: #fff !important; } .vh-body .btn-success { background: var(--vh-cta); border-color: var(--vh-cta); } .vh-body .btn-xs, .vh-body .btn-group-xs > .btn { padding: 4px 10px; font-size: 12.5px; border-radius: 7px; } .vh-body .btn-sm { padding: 7px 13px; font-size: 13.5px; border-radius: 8px; } .vh-body .btn-lg { padding: 13px 26px; font-size: 16px; } .vh-body .btn-group > .btn { box-shadow: none; } .vh-body .breadcrumb { background: none; padding: 0; margin: 0; } .vh-body .well, .vh-body .jumbotron { background: var(--vh-surface-2); border: 1px solid var(--vh-border); border-radius: 14px; } .vh-body .client-alerts li a { color: var(--vh-text); } .vh-body #fullpage-overlay { background: rgba(18, 6, 43, .6); } .vh-body #fullpage-overlay .msg { color: #fff; } .vh-state { display: flex; justify-content: center; padding: 20px 0; } .vh-state__body { max-width: 560px; width: 100%; text-align: center; background: var(--vh-surface); border: 1px solid var(--vh-border); border-radius: 16px; padding: 44px 32px; box-shadow: 0 10px 30px rgba(43, 31, 81, .08); } .vh-state__body h2 { font-size: 24px; margin-bottom: 16px; } .vh-invite__body { background: var(--vh-surface); border: 1px solid var(--vh-border); border-radius: 16px; padding: 36px 28px; } .vh-invite .invite-box { border: 1px solid var(--vh-border); border-radius: 12px; padding: 22px; margin-bottom: 16px; } .vh-invite .invite-box h2 { font-size: 20px; margin-bottom: 16px; } .vh-body .empty-state, .vh-body .no-data { text-align: center; padding: 40px 20px; color: var(--vh-muted); } .vh-body .sub-heading { position: relative; text-align: center; margin: 18px 0; } .vh-body .sub-heading span { background: var(--vh-surface); padding: 0 12px; position: relative; z-index: 1; color: var(--vh-muted); font-size: 13px; } .vh-body .sub-heading::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--vh-border); } .vh-body hr { border-color: var(--vh-border); } .vh-body .iti, .vh-body .intl-tel-input { width: 100%; } .vh-body .iti__country-list, .vh-body .intl-tel-input .country-list { border-radius: 10px; border-color: var(--vh-border); box-shadow: 0 18px 40px rgba(43, 31, 81, .16); } .vh-body .captchaimage img { border-radius: 6px; border: 1px solid var(--vh-border); } .vh-body #inputCaptcha { max-width: 170px; } /* 13. Dark mode ------------------------------------------------------------------------------ */ html[data-theme="dark"] .vh-body .table thead th, html[data-theme="dark"] .vh-body table.dataTable thead th { background: var(--vh-surface-2); } html[data-theme="dark"] .vh-body table.dataTable tbody td, html[data-theme="dark"] .vh-body .table td { background: transparent; } html[data-theme="dark"] .vh-body table.dataTable tbody tr:hover td { background: var(--vh-primary-soft); } html[data-theme="dark"] .vh-body .alert-success { color: #6ee7b7; } html[data-theme="dark"] .vh-body .alert-info { color: #c4b5fd; } html[data-theme="dark"] .vh-body .alert-warning { color: #fcd34d; } html[data-theme="dark"] .vh-body .alert-danger { color: #fca5a5; } html[data-theme="dark"] .vh-body .status-active, html[data-theme="dark"] .vh-body .status-paid, html[data-theme="dark"] .vh-body .status-completed, html[data-theme="dark"] .vh-body .status-open, html[data-theme="dark"] .vh-body .label-success, html[data-theme="dark"] .vh-body .badge-success { color: #6ee7b7 !important; } html[data-theme="dark"] .vh-body .status-pending, html[data-theme="dark"] .vh-body .status-unpaid, html[data-theme="dark"] .vh-body .status-customer-reply, html[data-theme="dark"] .vh-body .label-warning { color: #fcd34d !important; } html[data-theme="dark"] .vh-body .status-suspended, html[data-theme="dark"] .vh-body .status-overdue, html[data-theme="dark"] .vh-body .status-terminated, html[data-theme="dark"] .vh-body .label-danger { color: #fca5a5 !important; } html[data-theme="dark"] .vh-body .status-answered, html[data-theme="dark"] .vh-body .label-info, html[data-theme="dark"] .vh-body .badge-info { color: #c4b5fd !important; } html[data-theme="dark"] .vh-body .btn-danger { color: #fca5a5 !important; } html[data-theme="dark"] .vh-body .form-control::placeholder { color: #8a82ab; } html[data-theme="dark"] .vh-body select.form-control, html[data-theme="dark"] .vh-body .custom-select, html[data-theme="dark"] .vh-body .dataTables_wrapper .dataTables_length select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23b3a8d9' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); } html[data-theme="dark"] .vh-body .tooltip-inner { background: #43376e; } html[data-theme="dark"] .vh-authshell--split .vh-authshell__form { background: var(--vh-bg); } html[data-theme="dark"] .vh-body .md-editor > textarea { color: var(--vh-heading); } html[data-theme="dark"] .vh-body .text-dark, html[data-theme="dark"] .vh-body .text-body { color: var(--vh-heading) !important; } /* 14. Small screens ---------------------------------------------------------------------------- */ @media (max-width: 1199.98px) { .vh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vh-dash { grid-template-columns: minmax(0, 1fr); } .vh-authshell--split, .vh-authshell--split.vh-authshell--wide { grid-template-columns: minmax(0, 1fr); } .vh-authshell--split .vh-authshell__form { padding: 24px 28px; min-height: 100vh; } .vh-authshell--split .vh-authshell__top .vh-iconbtn { right: 0; } } @media (max-width: 767.98px) { .vh-body .table-container, .vh-body .vh-clientmain .card { border-radius: 12px; } .vh-body .dataTables_wrapper .listtable > .dataTables_filter { padding: 14px 14px 0; flex-basis: 100%; } .vh-body .dataTables_wrapper .dataTables_filter label { max-width: none; } .vh-body .dataTables_wrapper .listtable > .dataTables_info { padding: 4px 14px 0; margin-left: 0; white-space: normal; } .vh-body .dataTables_wrapper .listtable > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .vh-body .dataTables_wrapper .dataTables_paginate { float: none; padding: 12px 14px 0; } .vh-body .dataTables_wrapper .dataTables_length { padding: 12px 14px 16px; } .vh-body .table td, .vh-body table.dataTable tbody td { padding: 13px 14px !important; font-size: 14px; } .vh-body .table thead th, .vh-body table.dataTable thead th { padding: 11px 14px !important; } .vh-body .card-body { padding: 18px 16px; } .vh-dash-hero { padding: 16px; } .vh-dash-hero__actions, .vh-dash-hero__actions .vh-btn { width: 100%; } .vh-msg { padding: 14px 14px !important; gap: 10px; } .vh-msg__avatar { width: 34px; height: 34px; font-size: 14px; } .vh-body .product-details-tab-container { padding: 16px; } .vh-body .nav-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .vh-body .nav-tabs .nav-link { white-space: nowrap; } .vh-body .domain-pricing .tld-pricing-header > div, .vh-body .domain-pricing .tld-row > div { padding: 11px 10px; } .vh-body .table-responsive { display: block; width: 100%; overflow-x: auto; } .vh-body .vh-clientmain .card > .table, .vh-body .card-body > .table, .vh-body .tab-pane > .table { display: block; overflow-x: auto; } .vh-shell-site #main-body:not(.vh-main-flush) > .container { padding-left: 16px; padding-right: 16px; } } @media (max-width: 575.98px) { .vh-kpis { grid-template-columns: minmax(0, 1fr); gap: 12px; } .vh-kpi { padding: 16px; } .vh-kpi__value { font-size: 28px; margin-top: 8px; } .vh-actions-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vh-authshell--split .vh-authshell__form { padding: 18px 16px; } .vh-auth__row { flex-wrap: wrap; } .vh-body .view-ticket > .card-body:first-child .ticket-actions { width: 100%; } .vh-body .view-ticket > .card-body:first-child .ticket-actions .btn { flex: 1; } } @media (max-width: 359.98px) { .vh-actions-row { grid-template-columns: minmax(0, 1fr); } .vh-body .page-item .page-link { min-width: 34px; height: 34px; padding: 0 9px; } } @media print { .vh-pagehead, .vh-ctabs, .vh-clientgrid__side { display: none !important; } } /* ========================================================================== Account pages: details, users, contacts, email history ========================================================================== */ /* themed checkboxes and radios */ .vh-body .primary-content input[type="checkbox"].form-check-input, .vh-body .primary-content input[type="radio"].form-check-input, .vh-body .primary-content .controls input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: 0 0 18px; width: 18px; height: 18px; margin: 2px 0 0; position: static; border: 1.5px solid var(--vh-border-strong); background: var(--vh-surface); border-radius: 5px; cursor: pointer; display: inline-grid; place-content: center; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; } .vh-body .primary-content input[type="radio"].form-check-input { border-radius: 50%; } .vh-body .primary-content input[type="checkbox"].form-check-input::before, .vh-body .primary-content .controls input[type="checkbox"]::before { content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform .12s ease; background: #fff; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); } .vh-body .primary-content input[type="radio"].form-check-input::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .12s ease; } .vh-body .primary-content input[type="checkbox"].form-check-input:checked, .vh-body .primary-content input[type="radio"].form-check-input:checked, .vh-body .primary-content .controls input[type="checkbox"]:checked { background: var(--vh-primary); border-color: var(--vh-primary); } .vh-body .primary-content input.form-check-input:checked::before, .vh-body .primary-content .controls input[type="checkbox"]:checked::before { transform: scale(1); } .vh-body .primary-content input.form-check-input:focus-visible, .vh-body .primary-content .controls input[type="checkbox"]:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--vh-primary-ring); } .vh-body .primary-content input.form-check-input:disabled { opacity: .5; cursor: not-allowed; } /* email preferences: a grid of option tiles instead of squeezed inline labels */ .vh-body .primary-content .controls.form-check { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; padding: 0; margin: 4px 0 0; } .vh-body .primary-content .controls.form-check > br { display: none; } .vh-body .primary-content .controls.form-check > label { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 14px 16px; cursor: pointer; border: 1px solid var(--vh-border); border-radius: 10px; background: var(--vh-surface); color: var(--vh-text); font-size: 14px; font-weight: 500; line-height: 1.45; transition: border-color .15s ease, background .15s ease; } .vh-body .primary-content .controls.form-check > label:hover { border-color: var(--vh-border-strong); } .vh-body .primary-content .controls.form-check > label:has(input:checked) { border-color: color-mix(in srgb, var(--vh-primary) 45%, var(--vh-border)); background: var(--vh-primary-soft); } /* mailing list switch */ .vh-body .primary-content .bootstrap-switch { margin-top: 4px; border-width: 1px; box-shadow: none; } .vh-body .primary-content .bootstrap-switch .bootstrap-switch-handle-on, .vh-body .primary-content .bootstrap-switch .bootstrap-switch-handle-off, .vh-body .primary-content .bootstrap-switch .bootstrap-switch-label { font-family: var(--vh-font); font-weight: 600; font-size: 12.5px; } .vh-body .primary-content .bootstrap-switch .bootstrap-switch-label { background: var(--vh-surface); } /* form footer buttons */ .vh-body .primary-content form > .form-group.text-center { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; } .vh-body .primary-content form > .form-group.text-center .btn { margin: 0; min-width: 130px; } /* contacts: "choose contact" bar as a card */ .vh-body .primary-content .vh-contact-pick { background: var(--vh-surface); border: 1px solid var(--vh-border); border-radius: var(--vh-radius); box-shadow: var(--vh-shadow-sm); color: var(--vh-text); padding: 16px 20px; margin-bottom: 20px; } .vh-body .primary-content .vh-contact-pick .row { align-items: center; } .vh-body .primary-content .vh-contact-pick .col-form-label { font-weight: 700; color: var(--vh-heading); padding-top: 0; padding-bottom: 0; } /* user management table */ .vh-body .primary-content .table-striped { border: 1px solid var(--vh-border); border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; margin-bottom: 14px; } .vh-body .primary-content .table-striped th { background: var(--vh-surface-2, var(--vh-bg-alt)); color: var(--vh-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-top: 0; border-bottom: 1px solid var(--vh-border); padding: 12px 16px; } .vh-body .primary-content .table-striped td { padding: 14px 16px; vertical-align: middle; border-top: 1px solid var(--vh-border); color: var(--vh-heading); } .vh-body .primary-content .table-striped tr:nth-child(2) td { border-top: 0; } .vh-body .primary-content .table-striped td small { color: var(--vh-muted); font-size: 12.5px; } .vh-body .primary-content .table-striped td .label { margin: 0 4px; vertical-align: middle; } .vh-body .primary-content .table-striped td .btn { margin: 2px 4px 2px 0; } .vh-body .primary-content .table-striped td .text-grey { color: var(--vh-muted); } /* invite: permission choice and permission list */ .vh-body .primary-content .form-check.form-check-inline { display: inline-flex; align-items: center; gap: 8px; margin: 0 18px 6px 0; padding: 0; font-weight: 500; color: var(--vh-heading); cursor: pointer; } .vh-body .primary-content #invitePermissions > br { display: none; } .vh-body .primary-content #invitePermissions .form-check.form-check-inline, .vh-body .primary-content .permissions .form-check { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px 10px; width: 100%; margin: 0; padding: 11px 12px; border-radius: 8px; } .vh-body .primary-content #invitePermissions .form-check + .form-check { border-top: 1px solid var(--vh-border); border-radius: 0; } .vh-body .primary-content #invitePermissions .form-check:hover { background: var(--vh-bg-alt); } .vh-body .primary-content #invitePermissions .form-check .text-muted { font-weight: 400; font-size: 13.5px; } @media (max-width: 767.98px) { .vh-body .primary-content .controls.form-check { grid-template-columns: 1fr; } .vh-body .primary-content .vh-contact-pick .col-form-label { margin-bottom: 8px; } .vh-body .primary-content .table-striped th[width] { width: auto; } .vh-body .primary-content .table-striped td { display: block; border-top: 0; padding: 10px 14px; } .vh-body .primary-content .table-striped tr + tr td:first-child { border-top: 1px solid var(--vh-border); } .vh-body .primary-content .table-striped tr:first-child th + th { display: none; } } /* email preference tiles (includes/vh/email-prefs.tpl) */ .vh-body .vh-prefs__lead { margin: -4px 0 18px; color: var(--vh-muted); font-size: 14px; } .vh-body .vh-prefs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .vh-body .vh-pref { display: flex; align-items: center; gap: 14px; margin: 0; padding: 16px 18px; cursor: pointer; min-height: 84px; border: 1px solid var(--vh-border); border-radius: 12px; background: var(--vh-surface); transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; } .vh-body .vh-pref:hover { border-color: var(--vh-border-strong); box-shadow: var(--vh-shadow-sm); } .vh-body .vh-pref:has(.vh-pref__switch:checked) { border-color: color-mix(in srgb, var(--vh-primary) 40%, var(--vh-border)); background: color-mix(in srgb, var(--vh-primary) 4%, var(--vh-surface)); } .vh-body .vh-pref:has(.vh-pref__switch:focus-visible) { box-shadow: 0 0 0 3px var(--vh-primary-ring); } .vh-pref__icon { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--vh-bg-alt); color: var(--vh-muted); font-size: 18px; transition: background .15s ease, color .15s ease; } .vh-body .vh-pref:has(.vh-pref__switch:checked) .vh-pref__icon { background: var(--vh-primary-soft); color: var(--vh-primary); } .vh-pref__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .vh-pref__title { font-weight: 700; font-size: 15px; color: var(--vh-heading); line-height: 1.3; } .vh-pref__desc { font-size: 13.5px; color: var(--vh-muted); line-height: 1.45; } /* the checkbox drawn as a toggle switch */ .vh-body .vh-pref__switch { -webkit-appearance: none; appearance: none; flex: 0 0 40px; width: 40px; height: 22px; margin: 0; position: relative; cursor: pointer; border-radius: 999px; background: var(--vh-border-strong); border: 0; outline: 0; transition: background .18s ease; } .vh-body .vh-pref__switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .18s ease; } .vh-body .vh-pref__switch:checked { background: var(--vh-primary); } .vh-body .vh-pref__switch:checked::before { transform: translateX(18px); } @media (max-width: 767.98px) { .vh-body .vh-prefs { grid-template-columns: 1fr; } .vh-body .vh-pref { padding: 14px; min-height: 0; } } /* bootstrap-switch (e.g. "Join our mailing list") drawn as the theme's pill toggle */ .vh-body .bootstrap-switch { position: relative; display: inline-block; width: 44px !important; min-width: 44px !important; max-width: 44px; height: 24px; padding: 0; margin: 4px 0 0; vertical-align: middle; border: 0; border-radius: 999px; background: var(--vh-border-strong); box-shadow: none; overflow: hidden; cursor: pointer; transition: background .18s ease, box-shadow .18s ease; } .vh-body .bootstrap-switch.bootstrap-switch-on { background: var(--vh-primary); } .vh-body .bootstrap-switch.bootstrap-switch-focused { box-shadow: 0 0 0 3px var(--vh-primary-ring); border: 0; } .vh-body .bootstrap-switch.bootstrap-switch-disabled, .vh-body .bootstrap-switch.bootstrap-switch-readonly { opacity: .55; cursor: not-allowed; } .vh-body .bootstrap-switch .bootstrap-switch-container { width: 100% !important; height: 100%; margin: 0 !important; transform: none !important; position: static; } /* the visible half becomes an invisible click area covering the whole pill */ .vh-body .bootstrap-switch .bootstrap-switch-handle-on, .vh-body .bootstrap-switch .bootstrap-switch-handle-off { position: absolute; inset: 0; width: auto !important; height: auto; padding: 0; margin: 0; background: transparent !important; color: transparent !important; font-size: 0; border: 0; border-radius: 999px; z-index: 1; } .vh-body .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-handle-off, .vh-body .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-handle-on { display: none !important; } /* the label becomes the white knob */ .vh-body .bootstrap-switch .bootstrap-switch-label { position: absolute; top: 3px; left: 3px; width: 18px !important; height: 18px; padding: 0; margin: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); font-size: 0; pointer-events: none; z-index: 2; transition: transform .18s ease; } .vh-body .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-label { transform: translateX(20px); } .vh-body .bootstrap-switch .bootstrap-switch-label::before, .vh-body .bootstrap-switch .bootstrap-switch-label::after { display: none; } /* user management: keep the action buttons on one line */ .vh-body .primary-content .table-striped td:last-child { white-space: nowrap; text-align: right; } .vh-body .primary-content .table-striped th:last-child { width: 1%; text-align: right; } .vh-body .primary-content .table-striped td:last-child .btn { margin: 0 0 0 6px; } .vh-body .primary-content .table-striped td:last-child .btn:first-child { margin-left: 0; } @media (max-width: 767.98px) { .vh-body .primary-content .table-striped td:last-child { text-align: left; white-space: normal; } } /* ========================================================================== User management (account-user-management.tpl) ========================================================================== */ .vh-body .vh-users__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .vh-body .vh-users__head .card-title { margin-bottom: 4px; } .vh-body .vh-users__sub { margin: 0; color: var(--vh-muted); font-size: 14px; } .vh-body .vh-users__invite-link { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; } .vh-body .vh-users__subhead { margin: 22px 0 10px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--vh-muted); } .vh-body .vh-users__list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--vh-border); border-radius: 12px; overflow: hidden; } .vh-body .vh-user { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--vh-surface); } .vh-body .vh-user + .vh-user { border-top: 1px solid var(--vh-border); } .vh-body .vh-user__avatar { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--vh-gradient); color: #fff; font-weight: 800; font-size: 17px; } .vh-body .vh-user--invite .vh-user__avatar { background: var(--vh-bg-alt); color: var(--vh-muted); font-size: 16px; } .vh-body .vh-user__main { flex: 1 1 auto; min-width: 0; } .vh-body .vh-user__email { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-weight: 700; color: var(--vh-heading); font-size: 15px; } .vh-body .vh-user__email-text { min-width: 0; overflow-wrap: anywhere; } .vh-body .vh-user__tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; background: var(--vh-bg-alt); color: var(--vh-muted); font-size: 12px; font-weight: 700; } .vh-body .vh-user__tag--owner { background: var(--vh-primary-soft); color: var(--vh-primary); } .vh-body .vh-user__tag--owner i { font-size: 10px; } .vh-body .vh-user__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; color: var(--vh-muted); font-size: 13px; } .vh-body .vh-user__meta span { display: inline-flex; align-items: center; gap: 6px; } .vh-body .vh-user__2fa.is-on { color: var(--vh-success); } .vh-body .vh-user__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; margin: 0; } .vh-body .vh-user__actions .btn { display: inline-flex; align-items: center; gap: 7px; margin: 0; white-space: nowrap; } .vh-body .vh-user__full { display: inline-flex; align-items: center; gap: 7px; color: var(--vh-muted); font-size: 13px; font-weight: 600; } .vh-body .vh-users__note { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; color: var(--vh-muted); font-size: 13.5px; } .vh-body .vh-users__note i { margin-top: 3px; } /* invite card */ .vh-body .vh-invite__row { display: flex; gap: 10px; margin: 18px 0 14px; } .vh-body .vh-invite__field { position: relative; flex: 1 1 auto; min-width: 0; } .vh-body .vh-invite__field i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--vh-muted); pointer-events: none; } .vh-body .vh-invite__field .form-control { padding-left: 40px; height: 46px; } .vh-body .vh-invite__row .btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 46px; } .vh-body .vh-invite__choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .vh-body .vh-invite__opt, .vh-body .vh-invite__perm { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 13px 16px; cursor: pointer; border: 1px solid var(--vh-border); border-radius: 10px; background: var(--vh-surface); color: var(--vh-heading); font-size: 14px; transition: border-color .15s ease, background .15s ease; } .vh-body .vh-invite__opt:hover, .vh-body .vh-invite__perm:hover { border-color: var(--vh-border-strong); } .vh-body .vh-invite__opt:has(input:checked), .vh-body .vh-invite__perm:has(input:checked) { border-color: color-mix(in srgb, var(--vh-primary) 45%, var(--vh-border)); background: var(--vh-primary-soft); } .vh-body .vh-invite__perms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } .vh-body .vh-invite__perm span { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .vh-body .vh-invite__perm small { color: var(--vh-muted); font-size: 12.5px; line-height: 1.4; } @media (max-width: 767.98px) { .vh-body .vh-users__head { flex-direction: column; align-items: stretch; } .vh-body .vh-users__invite-link { justify-content: center; } .vh-body .vh-user { flex-wrap: wrap; padding: 14px; } .vh-body .vh-user__main { flex-basis: calc(100% - 58px); } .vh-body .vh-user__actions { flex: 1 1 100%; padding-left: 58px; flex-wrap: wrap; } .vh-body .vh-user__actions .btn { flex: 1 1 auto; justify-content: center; } .vh-body .vh-invite__row { flex-direction: column; } .vh-body .vh-invite__row .btn { justify-content: center; } .vh-body .vh-invite__choice, .vh-body .vh-invite__perms { grid-template-columns: 1fr; } } @media (max-width: 419.98px) { .vh-body .vh-user__actions { padding-left: 0; } } /* ========================================================================== Compact contact form (includes/vh/contact-fields.tpl) ========================================================================== */ .vh-body .vh-cform__legend { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--vh-muted); } .vh-body .vh-cform__legend i { color: var(--vh-primary); font-size: 13px; } .vh-body .vh-cform__grid + .vh-cform__legend { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--vh-border); } .vh-body .vh-cform__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; } .vh-body .vh-cform__field { min-width: 0; margin: 0; } .vh-body .vh-cform__field--2 { grid-column: span 2; } .vh-body .vh-cform__field > label { display: block; margin: 0 0 6px; padding: 0; font-size: 13px; font-weight: 600; color: var(--vh-heading); } .vh-body .vh-cform__opt { font-weight: 400; color: var(--vh-muted); } .vh-body .vh-cform .form-control, .vh-body .vh-cform .custom-select { height: 42px; font-size: 14.5px; } .vh-body .vh-cform .intl-tel-input { display: block; width: 100%; } /* compact "choose contact" bar */ .vh-body .primary-content .vh-contact-pick { padding: 12px 16px; } .vh-body .primary-content .vh-contact-pick .row { margin: 0; gap: 10px; flex-wrap: nowrap; } .vh-body .primary-content .vh-contact-pick .row > [class*="col-"] { padding: 0; max-width: none; flex: 0 0 auto; } .vh-body .primary-content .vh-contact-pick .row > .col-md-6 { flex: 1 1 0; min-width: 0; } .vh-body .primary-content .vh-contact-pick .row > .col-form-label { white-space: nowrap; } .vh-body .primary-content .vh-contact-pick .row > .col-md-2 { margin-top: 0 !important; } .vh-body .primary-content .vh-contact-pick .btn { min-width: 90px; height: 42px; } .vh-body .primary-content .vh-contact-pick .custom-select { height: 42px; } @media (max-width: 991.98px) { .vh-body .vh-cform__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .vh-body .vh-cform__grid { grid-template-columns: 1fr; gap: 12px; } .vh-body .vh-cform__field--2 { grid-column: auto; } .vh-body .primary-content .vh-contact-pick .row { flex-wrap: wrap; } .vh-body .primary-content .vh-contact-pick .row > [class*="col-"] { flex: 1 1 100%; } .vh-body .primary-content .vh-contact-pick .col-form-label { margin-bottom: 0; } } /* choose-contact bar (flex form) */ .vh-body .primary-content .vh-contact-pick__form { display: flex; align-items: center; gap: 12px; margin: 0; } .vh-body .primary-content .vh-contact-pick__label { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; color: var(--vh-heading); white-space: nowrap; } .vh-body .primary-content .vh-contact-pick__label i { color: var(--vh-primary); } .vh-body .primary-content .vh-contact-pick__form .custom-select { flex: 1 1 0; min-width: 0; width: auto; height: 42px; } .vh-body .primary-content .vh-contact-pick__form .btn { flex: 0 0 auto; min-width: 80px; height: 42px; margin: 0; } @media (max-width: 575.98px) { .vh-body .primary-content .vh-contact-pick__form { flex-wrap: wrap; } .vh-body .primary-content .vh-contact-pick__label { flex-basis: 100%; } } .vh-body .vh-cform__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vh-body .vh-cform__grid--custom { margin-top: 14px; } @media (max-width: 991.98px) { .vh-body .vh-cform__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .vh-body .vh-cform__grid--3 { grid-template-columns: 1fr; } } /* compact registration form */ .vh-register--compact .row { margin-left: -8px; margin-right: -8px; } .vh-register--compact .row > [class*="col-"] { padding-left: 8px; padding-right: 8px; } .vh-register--compact .form-group { margin-bottom: 14px; } .vh-register--compact .form-control { min-height: 44px; height: 44px; font-size: 14.5px; } .vh-register--compact .vh-field__label { margin-bottom: 5px; font-size: 13px; } .vh-register--compact .card-title { margin-bottom: 12px; } .vh-register--compact .card { margin-bottom: 4px !important; } @media (max-width: 575.98px) { .vh-register--compact .form-group { margin-bottom: 12px; } } .vh-register--compact .card-body { overflow: visible !important; } /* active domain-category chip: white text on the purple fill */ .vh-body .tld-filters .badge.badge-success, .vh-body .tld-filters .badge.active, .vh-body .tld-filters .badge.badge-success:hover, .vh-body .tld-filters .badge.active:hover { color: #fff !important; background: var(--vh-primary) !important; border-color: var(--vh-primary) !important; } /* ========================================================================== Sidebar menus (Page menu: Overview, Actions, ...) - theme redesign ========================================================================== */ .vh-body .card-sidebar { box-shadow: 0 1px 2px rgba(43, 31, 81, .04) !important; } .vh-body .card-sidebar .card-header { padding: 16px 18px 8px; } .vh-body .card-sidebar .card-title > i:first-child { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--vh-primary-soft); color: var(--vh-primary); font-size: 12px; } .vh-body .card-sidebar .card-title { font-size: 11.5px !important; } .vh-body .card-sidebar .list-group { padding: 4px 10px 12px; gap: 2px; } .vh-body .card-sidebar .list-group-item { display: block; border: 0 !important; border-radius: 10px !important; margin: 0 !important; padding: 8px 10px !important; color: var(--vh-heading) !important; font-size: 14.5px; font-weight: 600; line-height: 1.3; background: transparent; transition: background .15s ease, color .15s ease; } .vh-body .card-sidebar .sidebar-menu-item-wrapper { gap: 12px; min-height: 32px; } /* icon tile */ .vh-body .card-sidebar .sidebar-menu-item-icon-wrapper { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--vh-bg-alt); color: var(--vh-primary); font-size: 14px; transition: background .15s ease, color .15s ease; } .vh-body .card-sidebar .sidebar-menu-item-icon-wrapper .loading { position: absolute; } /* items WHMCS adds without an icon (e.g. "Log in to SiteLock", "Information"): give them the same tile */ .vh-body .card-sidebar .sidebar-menu-item-wrapper:not(:has(.sidebar-menu-item-icon-wrapper))::before { content: "\f054"; font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-weight: 900; font-size: 10px; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--vh-bg-alt); color: var(--vh-primary); } .vh-body .card-sidebar .list-group-tab-nav .sidebar-menu-item-wrapper:not(:has(.sidebar-menu-item-icon-wrapper))::before { content: "\f111"; font-size: 6px; } .vh-body .card-sidebar .sidebar-menu-item-label { overflow-wrap: anywhere; } .vh-body .card-sidebar .sidebar-menu-item-label br { display: none; } .vh-body .card-sidebar .sidebar-menu-item-label img { max-height: 18px; width: auto; vertical-align: middle; } /* hover and selected */ .vh-body .card-sidebar .list-group-item-action:hover, .vh-body .card-sidebar .list-group-item-action:focus { background: var(--vh-bg-alt) !important; color: var(--vh-primary) !important; } .vh-body .card-sidebar .list-group-item-action:hover .sidebar-menu-item-icon-wrapper, .vh-body .card-sidebar .list-group-item-action:hover .sidebar-menu-item-wrapper::before { color: var(--vh-primary); } .vh-body .card-sidebar .list-group-item.active { background: var(--vh-primary-soft) !important; color: var(--vh-primary) !important; position: relative; } .vh-body .card-sidebar .list-group-item.active::before { content: ""; position: absolute; left: -10px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--vh-primary); } .vh-body .card-sidebar .list-group-item.active .sidebar-menu-item-icon-wrapper, .vh-body .card-sidebar .list-group-item.active .sidebar-menu-item-wrapper::before { color: var(--vh-primary); } .vh-body .card-sidebar .list-group-item.disabled { opacity: .45; } /* plain (non-link) rows */ .vh-body .card-sidebar div.list-group-item { color: var(--vh-text) !important; font-weight: 500; } /* when the page menu sits above the content (tablet / phone): actions become a grid of tiles */ @media (max-width: 991.98px) { .vh-body .vh-clientgrid__side .card-sidebar .list-group { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; padding: 6px 12px 14px; } .vh-body .vh-clientgrid__side .card-sidebar .list-group-item { border: 1px solid var(--vh-border) !important; padding: 10px 12px !important; background: var(--vh-surface); } .vh-body .vh-clientgrid__side .card-sidebar .list-group-item.active::before { display: none; } .vh-body .vh-clientgrid__side .card-sidebar .list-group-item.active { border-color: color-mix(in srgb, var(--vh-primary) 40%, var(--vh-border)) !important; } } @media (max-width: 479.98px) { .vh-body .vh-clientgrid__side .card-sidebar .list-group { grid-template-columns: minmax(0, 1fr); } } html[data-theme="dark"] .vh-body .card-sidebar .sidebar-menu-item-icon-wrapper, html[data-theme="dark"] .vh-body .card-sidebar .sidebar-menu-item-wrapper::before { background: #241a46; } /* the SiteLock login item carries a form inside its label: keep it on one line, with a shield tile */ .vh-body .card-sidebar .sidebar-menu-item-wrapper { align-items: center; } .vh-body .card-sidebar .sidebar-menu-item-label form { display: inline; margin: 0 !important; } .vh-body .card-sidebar .btn-service-sso .sidebar-menu-item-wrapper:not(:has(.sidebar-menu-item-icon-wrapper))::before { content: "\f3ed"; font-size: 13px; } /* ========================================================================== Service page: cPanel module overview (Package, Add-ons, Usage, Shortcuts, Quick email, Billing) and the SiteLock widget - restyled from the theme (the module's own template is not changed) ========================================================================== */ .vh-tpl-clientareaproductdetails #cPanelPackagePanel .card-body, .vh-tpl-clientareaproductdetails #cPanelExtrasPurchasePanel .card-body { padding: 20px 22px !important; } /* package / domain */ .vh-tpl-clientareaproductdetails .cpanel-package-details { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 14px; } .vh-tpl-clientareaproductdetails .cpanel-package-details em { font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vh-muted); } .vh-tpl-clientareaproductdetails .cpanel-package-details h4 { font-size: 22px; font-weight: 800; color: var(--vh-heading); } .vh-tpl-clientareaproductdetails .cpanel-package-details a { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 4px 12px; border-radius: 999px; background: var(--vh-primary-soft); color: var(--vh-primary); font-size: 13.5px; font-weight: 600; text-decoration: none; } .vh-tpl-clientareaproductdetails .cpanel-package-details a::before { content: "\f0ac"; font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-weight: 900; font-size: 11px; } .vh-tpl-clientareaproductdetails #cPanelPackagePanel .card-body > p { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; } .vh-tpl-clientareaproductdetails #cPanelPackagePanel .card-body > p .btn { margin: 0; } /* add-ons and extras: select + full-width button */ .vh-tpl-clientareaproductdetails #cPanelExtrasPurchasePanel .card-body { margin: 0 !important; width: 100%; } .vh-tpl-clientareaproductdetails #cPanelExtrasPurchasePanel form { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; } .vh-tpl-clientareaproductdetails #cPanelExtrasPurchasePanel select { width: 100% !important; margin: 0 !important; height: 44px; } .vh-tpl-clientareaproductdetails #cPanelExtrasPurchasePanel .btn { margin: 0 !important; width: 100%; height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--vh-primary) !important; border-color: var(--vh-primary) !important; color: #fff !important; font-weight: 700; } .vh-tpl-clientareaproductdetails #cPanelExtrasPurchasePanel .btn:hover { background: var(--vh-primary-dark) !important; } /* usage statistics */ .vh-tpl-clientareaproductdetails .cpanel-usage-stats { padding: 20px 18px !important; } .vh-tpl-clientareaproductdetails .cpanel-usage-stats .row > div { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--vh-text); font-size: 13.5px; font-weight: 600; } .vh-tpl-clientareaproductdetails .cpanel-usage-stats .row > div br { display: none; } .vh-tpl-clientareaproductdetails .cpanel-usage-stats .row > div strong { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--vh-muted); } .vh-tpl-clientareaproductdetails .cpanel-usage-stats .limit-near { margin: 16px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--vh-bg-alt); font-size: 12.5px; color: var(--vh-muted) !important; } .vh-tpl-clientareaproductdetails .cpanel-usage-stats .limit-near.text-danger { background: #fdecec; color: var(--vh-danger) !important; } /* SiteLock (MarketConnect) widget */ .vh-tpl-clientareaproductdetails #mc-promo-widgets { margin: 0 0 16px; display: block; } .vh-tpl-clientareaproductdetails .mc-promo-login { border: 0 !important; background: none !important; box-shadow: none !important; margin: 0 !important; } .vh-tpl-clientareaproductdetails .mc-promo-login .content { display: flex !important; flex-direction: row; align-items: center; gap: 18px; padding: 18px 22px !important; margin: 0; background: var(--vh-surface); border: 1px solid var(--vh-border); border-radius: var(--vh-radius-lg); box-shadow: var(--vh-shadow-sm); } .vh-tpl-clientareaproductdetails .mc-promo-login .logo { flex: 0 0 64px; width: 64px !important; height: 64px !important; border-radius: 14px; background: var(--vh-bg-alt); display: inline-flex !important; align-items: center; justify-content: center; margin: 0 !important; } .vh-tpl-clientareaproductdetails .mc-promo-login .logo img { max-width: 40px !important; max-height: 40px !important; margin: 0 !important; } .vh-tpl-clientareaproductdetails .mc-promo-login .logo + div { position: static !important; transform: none !important; flex: 1 1 auto; min-width: 0; } .vh-tpl-clientareaproductdetails .mc-promo-login .panel-heading { padding: 0 !important; border: 0 !important; background: none !important; } .vh-tpl-clientareaproductdetails .mc-promo-login .panel-heading h3 { margin: 0 0 10px !important; font-size: 17px !important; font-weight: 800; color: var(--vh-heading); } .vh-tpl-clientareaproductdetails .mc-promo-login .panel-body { padding: 0 !important; } .vh-tpl-clientareaproductdetails .mc-promo-login form { margin: 0; } .vh-tpl-clientareaproductdetails .mc-promo-login .actions { display: flex; flex-wrap: wrap; gap: 8px; } .vh-tpl-clientareaproductdetails .mc-promo-login .actions .btn { margin: 0; min-width: 104px; } .vh-tpl-clientareaproductdetails .mc-promo-login .actions .btn-service-sso { background: var(--vh-primary) !important; border-color: var(--vh-primary) !important; color: #fff !important; } /* quick shortcuts: tiles */ .vh-tpl-clientareaproductdetails .cpanel-feature-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; margin: 0 !important; } .vh-tpl-clientareaproductdetails .cpanel-feature-row > div { width: auto !important; max-width: none !important; flex: none !important; padding: 0 !important; } .vh-tpl-clientareaproductdetails .cpanel-feature-row a { height: 100%; margin: 0 !important; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px 10px; border: 1px solid var(--vh-border); border-radius: 14px; background: var(--vh-surface); color: var(--vh-heading) !important; font-size: 13.5px; font-weight: 600; line-height: 1.25; text-decoration: none !important; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .vh-tpl-clientareaproductdetails .cpanel-feature-row a:hover { border-color: var(--vh-primary); box-shadow: var(--vh-shadow); transform: translateY(-2px); color: var(--vh-primary) !important; } .vh-tpl-clientareaproductdetails .cpanel-feature-row img { width: 40px; height: 40px; object-fit: contain; margin: 0 !important; padding: 8px; box-sizing: content-box; border-radius: 12px; background: var(--vh-bg-alt); } /* quick create email account */ .vh-tpl-clientareaproductdetails #frmCreateEmailAccount .row { row-gap: 10px; } .vh-tpl-clientareaproductdetails #frmCreateEmailAccount .form-control, .vh-tpl-clientareaproductdetails #frmCreateEmailAccount .btn { height: 44px; margin: 0 !important; } .vh-tpl-clientareaproductdetails #frmCreateEmailAccount .input-group-text { height: 44px; background: var(--vh-bg-alt); border-color: var(--vh-border); color: var(--vh-muted); font-weight: 600; } .vh-tpl-clientareaproductdetails #frmCreateEmailAccount .input-group-text small { font-size: 13px; } /* the fields stay read-only until clicked (blocks autofill): keep them looking like normal inputs */ .vh-tpl-clientareaproductdetails #frmCreateEmailAccount .form-control[readonly] { background-color: var(--vh-surface); color: var(--vh-heading); cursor: text; } .vh-tpl-clientareaproductdetails #frmCreateEmailAccount .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } /* billing overview, configurable options, additional info: label / value list */ .vh-tpl-clientareaproductdetails #cPanelBillingOverviewPanel .card-body > .row { margin: 0; } .vh-tpl-clientareaproductdetails #cPanelBillingOverviewPanel .card-body > .row > div { flex: 0 0 100%; max-width: 100%; padding: 0; } .vh-tpl-clientareaproductdetails #cPanelBillingOverviewPanel .card-body > .row > div > .row, .vh-tpl-clientareaproductdetails #cPanelConfigurableOptionsPanel .card-body > .row, .vh-tpl-clientareaproductdetails #cPanelAdditionalInfoPanel .card-body > .row { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: baseline; gap: 16px; margin: 0; padding: 11px 0; border-bottom: 1px dashed var(--vh-border); } .vh-tpl-clientareaproductdetails #cPanelBillingOverviewPanel .card-body > .row > div:last-child > .row:last-child, .vh-tpl-clientareaproductdetails #cPanelConfigurableOptionsPanel .card-body > .row:last-child, .vh-tpl-clientareaproductdetails #cPanelAdditionalInfoPanel .card-body > .row:last-child { border-bottom: 0; } .vh-tpl-clientareaproductdetails #cPanelBillingOverviewPanel .card-body > .row > div > .row > div, .vh-tpl-clientareaproductdetails #cPanelConfigurableOptionsPanel .card-body > .row > div, .vh-tpl-clientareaproductdetails #cPanelAdditionalInfoPanel .card-body > .row > div { flex: 0 1 auto !important; max-width: none !important; width: auto !important; padding: 0 !important; } .vh-tpl-clientareaproductdetails #cPanelBillingOverviewPanel .card-body > .row > div > .row > div:first-child, .vh-tpl-clientareaproductdetails #cPanelConfigurableOptionsPanel .card-body > .row > div:first-child, .vh-tpl-clientareaproductdetails #cPanelAdditionalInfoPanel .card-body > .row > div:first-child { text-align: left !important; color: var(--vh-muted); font-weight: 500; font-size: 14px; } .vh-tpl-clientareaproductdetails #cPanelConfigurableOptionsPanel .card-body > .row > div:first-child strong, .vh-tpl-clientareaproductdetails #cPanelAdditionalInfoPanel .card-body > .row > div:first-child strong { font-weight: 500; } .vh-tpl-clientareaproductdetails #cPanelBillingOverviewPanel .card-body > .row > div > .row > div:last-child, .vh-tpl-clientareaproductdetails #cPanelConfigurableOptionsPanel .card-body > .row > div:last-child, .vh-tpl-clientareaproductdetails #cPanelAdditionalInfoPanel .card-body > .row > div:last-child { text-align: right !important; color: var(--vh-heading); font-weight: 700; font-size: 14px; } @media (min-width: 768px) { .vh-tpl-clientareaproductdetails #cPanelBillingOverviewPanel .card-body > .row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; } .vh-tpl-clientareaproductdetails #cPanelBillingOverviewPanel .card-body > .row > div:first-child > .row:last-child { border-bottom: 0; } } /* KYC verification page (theme override of the kyc_verification add-on template) */ .vh-body .vh-kyc { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; } .vh-body .vh-kyc__card { background: var(--vh-surface); border: 1px solid var(--vh-border); border-radius: var(--vh-radius-lg, 18px); padding: 26px; box-shadow: var(--vh-shadow-sm); } .vh-body .vh-kyc__head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; } .vh-body .vh-kyc__icon { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--vh-primary-soft); color: var(--vh-primary); font-size: 22px; } .vh-body .vh-kyc__headtext { flex: 1 1 220px; min-width: 0; } .vh-body .vh-kyc__title { margin: 0 0 3px; font-size: 21px; font-weight: 800; color: var(--vh-heading); } .vh-body .vh-kyc__sub { margin: 0; font-size: 14px; color: var(--vh-muted); } .vh-body .vh-kyc__pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 800; white-space: nowrap; } .vh-body .vh-kyc__pill--ok { background: var(--vh-success-soft, #e6f6f0); color: var(--vh-success, #0f9d6b); } .vh-body .vh-kyc__pill--wait { background: #fff4e5; color: var(--vh-warning, #c77700); } .vh-body .vh-kyc__pill--bad { background: #fdecec; color: var(--vh-danger, #d83a3a); } .vh-body .vh-kyc__pill--info { background: var(--vh-primary-soft); color: var(--vh-primary); } .vh-body .vh-kyc__alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin: 0 0 16px; border-radius: 12px; font-size: 14px; line-height: 1.5; } .vh-body .vh-kyc__alert i { margin-top: 3px; } .vh-body .vh-kyc__alert--ok { background: var(--vh-success-soft, #e6f6f0); color: #0b6e4b; } .vh-body .vh-kyc__alert--bad { background: #fdecec; color: #a32a2a; } .vh-body .vh-kyc__state { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 14px; border: 1px dashed var(--vh-border-strong); background: var(--vh-bg-alt); font-size: 14.5px; color: var(--vh-text); } .vh-body .vh-kyc__state strong { color: var(--vh-heading); font-size: 15.5px; } .vh-body .vh-kyc__state--ok { border-color: rgba(15, 157, 107, .35); background: var(--vh-success-soft, #e6f6f0); } .vh-body .vh-kyc__state--wait { border-color: rgba(199, 119, 0, .35); background: #fffaf2; } /* upload rows */ .vh-body .vh-kyc__labels, .vh-body .vh-kyc__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 118px; gap: 10px; align-items: center; } .vh-body .vh-kyc__labels { margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vh-muted); } .vh-body .vh-kyc__docs { display: flex; flex-direction: column; gap: 10px; } .vh-body .vh-kyc__docs .otherDocumentRow { display: block; } .vh-body .vh-kyc__row { margin: 0; } .vh-body .vh-kyc__row .form-control { height: 46px; margin: 0; } .vh-body .vh-kyc__fixed { pointer-events: none; background-color: var(--vh-bg-alt) !important; color: var(--vh-heading) !important; font-weight: 600; background-image: none !important; } .vh-body .vh-kyc__file { padding: 0 !important; line-height: 44px; font-size: 14px; color: var(--vh-text); cursor: pointer; overflow: hidden; } .vh-body .vh-kyc__file::file-selector-button { height: 100%; margin: 0 12px 0 0; padding: 0 16px; border: 0; border-right: 1px solid var(--vh-border); background: var(--vh-primary-soft); color: var(--vh-primary); font: 700 13.5px var(--vh-font); cursor: pointer; } .vh-body .vh-kyc__file:hover::file-selector-button { background: var(--vh-primary); color: #fff; } .vh-body .vh-kyc__remove { height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border: 1px solid #f3c6c6; border-radius: 10px; background: #fff5f5; color: var(--vh-danger, #d83a3a); font-weight: 700; font-size: 13.5px; cursor: pointer; transition: background .15s ease, color .15s ease; } .vh-body .vh-kyc__remove:hover:not(:disabled) { background: var(--vh-danger, #d83a3a); color: #fff; } .vh-body .vh-kyc__remove:disabled { border-color: var(--vh-border); background: var(--vh-bg-alt); color: var(--vh-muted); cursor: default; } .vh-body .vh-kyc__hint { margin: 12px 0 0; font-size: 13px; color: var(--vh-muted); } .vh-body .vh-kyc__actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--vh-border); } .vh-body .vh-kyc__actions .btn { height: 46px; display: inline-flex; align-items: center; gap: 8px; padding: 0 20px; border-radius: 12px; font-weight: 700; } .vh-body .vh-kyc__add:disabled { opacity: .5; cursor: not-allowed; } .vh-body .vh-kyc__submit { background: var(--vh-cta, #f5743b) !important; border-color: var(--vh-cta, #f5743b) !important; color: #fff !important; box-shadow: 0 10px 24px rgba(245, 116, 59, .28); } .vh-body .vh-kyc__submit:hover { background: var(--vh-cta-dark, #e05f26) !important; } .vh-body .vh-kyc__reqs { margin-top: 20px; padding: 16px 18px; border-radius: 14px; background: var(--vh-bg-alt); } .vh-body .vh-kyc__reqs-title { margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--vh-muted); } .vh-body .vh-kyc__reqs ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; } .vh-body .vh-kyc__reqs li { display: flex; flex-direction: column; gap: 2px; font-size: 14px; } .vh-body .vh-kyc__reqs li strong { color: var(--vh-heading); } .vh-body .vh-kyc__reqs li em { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: #fdecec; color: var(--vh-danger, #d83a3a); font-style: normal; font-size: 11.5px; font-weight: 700; } .vh-body .vh-kyc__reqs li span { color: var(--vh-text); font-size: 13.5px; } /* FAQ */ .vh-body .vh-kyc__faqtitle { margin: 0 0 14px; font-size: 18px; font-weight: 800; color: var(--vh-heading); } .vh-body .vh-kyc__faq { display: flex; flex-direction: column; gap: 10px; } .vh-body .vh-kyc__faq details { border: 1px solid var(--vh-border); border-radius: 12px; background: var(--vh-surface); transition: border-color .15s ease; } .vh-body .vh-kyc__faq details[open] { border-color: color-mix(in srgb, var(--vh-primary) 40%, var(--vh-border)); } .vh-body .vh-kyc__faq summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 700; color: var(--vh-heading); } .vh-body .vh-kyc__faq summary::-webkit-details-marker { display: none; } .vh-body .vh-kyc__faq summary i { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--vh-primary-soft); color: var(--vh-primary); font-size: 14px; } .vh-body .vh-kyc__faq summary::after { content: "\f078"; margin-left: auto; font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-weight: 900; font-size: 11px; color: var(--vh-muted); transition: transform .15s ease; } .vh-body .vh-kyc__faq details[open] summary::after { transform: rotate(180deg); } .vh-body .vh-kyc__faq details p { margin: 0; padding: 0 16px 14px 56px; font-size: 14px; line-height: 1.6; color: var(--vh-text); } .vh-body .vh-kyc__faq details a { color: var(--vh-primary); font-weight: 600; } @media (max-width: 767.98px) { .vh-body .vh-kyc__card { padding: 18px; } .vh-body .vh-kyc__labels { display: none; } .vh-body .vh-kyc__row { grid-template-columns: minmax(0, 1fr); padding: 12px; border: 1px solid var(--vh-border); border-radius: 12px; } .vh-body .vh-kyc__actions .btn { flex: 1 1 100%; justify-content: center; } .vh-body .vh-kyc__faq details p { padding-left: 16px; } } /* KYC add-on banner (printed by the add-on with inline styles): theme colours */ .vh-body .vh-preoutput > div[style*="ffdddd"] { display: block; text-align: center; padding: 10px 16px !important; border: 0 !important; border-bottom: 1px solid #f6d3b8 !important; background: #fff4ec !important; color: #8a3b12 !important; font-weight: 600 !important; font-size: 14px; line-height: 1.4; } .vh-body .vh-preoutput > div[style*="ffdddd"] strong { color: #c2410c; } .vh-body .vh-preoutput > div[style*="ffdddd"] a { display: inline-block; margin: 4px 0 4px 12px !important; padding: 6px 14px !important; border-radius: 999px !important; background: var(--vh-cta, #f5743b) !important; color: #fff !important; font-weight: 700; font-size: 13px; text-decoration: none !important; } .vh-body .vh-preoutput > div[style*="ffdddd"] a:hover { background: var(--vh-cta-dark, #e05f26) !important; } /* Open ticket, step 1: department cards */ .vh-body .vh-depts { background: var(--vh-surface); border: 1px solid var(--vh-border); border-radius: var(--vh-radius-lg, 18px); padding: 26px; box-shadow: var(--vh-shadow-sm); } .vh-body .vh-depts__head { margin-bottom: 20px; } .vh-body .vh-depts__title { margin: 0 0 6px; font-size: 20px; font-weight: 800; color: var(--vh-heading); } .vh-body .vh-depts__text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--vh-text); } .vh-body .vh-depts__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .vh-body .vh-dept { display: flex; align-items: center; gap: 14px; padding: 16px; min-height: 84px; border: 1px solid var(--vh-border); border-radius: 14px; background: var(--vh-surface); text-decoration: none !important; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background-color .15s ease; } .vh-body .vh-dept:hover, .vh-body .vh-dept:focus-visible { border-color: var(--vh-primary); background: var(--vh-primary-soft); box-shadow: var(--vh-shadow); transform: translateY(-2px); outline: 0; } .vh-body .vh-dept__icon { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--vh-primary-soft); color: var(--vh-primary); font-size: 19px; transition: background .15s ease, color .15s ease; } .vh-body .vh-dept:hover .vh-dept__icon, .vh-body .vh-dept:focus-visible .vh-dept__icon { background: var(--vh-primary); color: #fff; } .vh-body .vh-dept__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .vh-body .vh-dept__name { font-size: 15.5px; font-weight: 800; color: var(--vh-heading); line-height: 1.3; } .vh-body .vh-dept__desc { font-size: 13.5px; color: var(--vh-muted); line-height: 1.4; } .vh-body .vh-dept__go { flex: 0 0 auto; color: var(--vh-muted); font-size: 13px; transition: color .15s ease, transform .15s ease; } .vh-body .vh-dept:hover .vh-dept__go { color: var(--vh-primary); transform: translateX(3px); } @media (max-width: 575.98px) { .vh-body .vh-depts { padding: 18px; } .vh-body .vh-depts__grid { grid-template-columns: minmax(0, 1fr); } } /* Social sign-in / "Connect with ..." buttons (security settings, login, register) */ .vh-body .social-signin-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 6px 0 18px; } .vh-body .btn-social { display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; min-width: 230px; height: 46px; padding: 0 22px !important; margin: 0 !important; border: 1px solid var(--vh-border-strong, #d3cde9) !important; border-radius: 12px !important; background: var(--vh-surface, #fff) !important; color: var(--vh-heading, #2b1f51) !important; font-size: 15px; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; cursor: pointer; box-shadow: 0 1px 2px rgba(43, 31, 81, .06); transition: background .15s ease, box-shadow .15s ease, transform .15s ease, border-color .15s ease; } .vh-body .btn-social i { position: static !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; font-size: 19px; line-height: 1; } .vh-body .btn-social:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(43, 31, 81, .12); } .vh-body .btn-social:focus-visible { outline: 0; box-shadow: 0 0 0 4px var(--vh-primary-ring, rgba(106, 75, 208, .25)); } .vh-body .btn-social:disabled, .vh-body .btn-social.disabled { opacity: .55; transform: none; box-shadow: none; cursor: not-allowed; } /* brands */ .vh-body .btn-social.btn-facebook { background: #1877f2 !important; border-color: #1877f2 !important; color: #fff !important; } .vh-body .btn-social.btn-facebook:hover { background: #0f66d8 !important; border-color: #0f66d8 !important; box-shadow: 0 10px 22px rgba(24, 119, 242, .3); } .vh-body .btn-social.btn-twitter, .vh-body .btn-social.btn-x { background: #0f1419 !important; border-color: #0f1419 !important; color: #fff !important; } .vh-body .btn-social.btn-twitter:hover, .vh-body .btn-social.btn-x:hover { background: #272c30 !important; border-color: #272c30 !important; } .vh-body .btn-social.btn-linkedin { background: #0a66c2 !important; border-color: #0a66c2 !important; color: #fff !important; } .vh-body .btn-social.btn-google .fa-google { color: #ea4335; } @media (max-width: 479.98px) { .vh-body .social-signin-btns .btn-social { width: 100%; min-width: 0; } } /* Client area home: MarketConnect sign-in widgets (SiteLock "Manage Your Security", etc.) */ .vh-body .panel-mc-sso > .row { display: flex; flex-wrap: nowrap; align-items: center; gap: 20px; margin: 0; } .vh-body .panel-mc-sso > .row > div { flex: 1 1 auto; max-width: none; width: auto; padding: 0; text-align: left !important; min-width: 0; } .vh-body .panel-mc-sso > .row > div:first-child { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 16px; background: var(--vh-bg-alt); display: flex; align-items: center; justify-content: center; } .vh-body .panel-mc-sso > .row > div:first-child img { max-width: 42px; max-height: 42px; width: auto; height: auto; margin: 0; } /* form: "Choose domain" label, then dropdown + Manage on one line (the WHMCS label is a bare text node, so it is redrawn) */ .vh-body .panel-mc-sso form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin: 0; font-size: 0; } .vh-body .panel-mc-sso form::before { content: "Choose domain"; flex: 0 0 100%; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--vh-muted); } .vh-body .panel-mc-sso form > * { font-size: 14.5px; } .vh-body .panel-mc-sso form select.form-control { flex: 1 1 220px; width: auto; min-width: 0; height: 44px; margin: 0; } .vh-body .panel-mc-sso form .btn { flex: 0 0 auto; height: 44px; min-width: 116px; margin: 0 0 0 10px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--vh-primary) !important; border-color: var(--vh-primary) !important; color: #fff !important; font-weight: 700; } .vh-body .panel-mc-sso form .btn:hover { background: var(--vh-primary-dark) !important; } .vh-body .panel-mc-sso form .login-feedback { flex: 0 0 100%; } .vh-body .panel-mc-sso form .login-feedback:empty { display: none; } .vh-body .panel-mc-sso small { display: block; margin-top: 8px; font-size: 12px; color: var(--vh-muted); } @media (max-width: 575.98px) { .vh-body .panel-mc-sso > .row { flex-direction: column; align-items: stretch; gap: 14px; } .vh-body .panel-mc-sso > .row > div:first-child { flex-basis: 56px; width: 56px; height: 56px; } .vh-body .panel-mc-sso form .btn { flex: 1 1 100%; margin-left: 0; } } /* top area: Package/Domain and Usage side by side at the same height, Add-ons full width below, no empty gaps */ .vh-tpl-clientareaproductdetails .row:has(> div > #cPanelPackagePanel) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0 0 16px; } .vh-tpl-clientareaproductdetails .row:has(> div > #cPanelPackagePanel) > div { display: contents; } .vh-tpl-clientareaproductdetails .row:has(> div > #cPanelPackagePanel) .card { margin: 0 !important; } .vh-tpl-clientareaproductdetails #cPanelPackagePanel .card-body, .vh-tpl-clientareaproductdetails #cPanelUsagePanel .card-body { display: flex; flex-direction: column; justify-content: center; } .vh-tpl-clientareaproductdetails #cPanelUsagePanel .cpanel-usage-stats .row { margin: 0; } @media (min-width: 768px) { .vh-tpl-clientareaproductdetails .row:has(> div > #cPanelPackagePanel) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vh-tpl-clientareaproductdetails #cPanelPackagePanel { grid-column: 1; grid-row: 1; } .vh-tpl-clientareaproductdetails #cPanelUsagePanel { grid-column: 2; grid-row: 1; } .vh-tpl-clientareaproductdetails #cPanelExtrasPurchasePanel, .vh-tpl-clientareaproductdetails #cPanelGetSitejet { grid-column: 1 / -1; } } @media (min-width: 576px) { .vh-tpl-clientareaproductdetails #cPanelExtrasPurchasePanel form { flex-direction: row; align-items: center; } .vh-tpl-clientareaproductdetails #cPanelExtrasPurchasePanel select { flex: 1 1 auto; width: auto !important; } .vh-tpl-clientareaproductdetails #cPanelExtrasPurchasePanel .btn { flex: 0 0 auto; width: auto; height: 44px; padding: 0 22px; } } .vh-tpl-clientareaproductdetails #cPanelExtrasPurchasePanel .card-body { padding: 16px 22px !important; } @media (max-width: 575.98px) { .vh-tpl-clientareaproductdetails .mc-promo-login .content { padding: 16px !important; gap: 14px; } .vh-tpl-clientareaproductdetails .mc-promo-login .logo { flex-basis: 52px; width: 52px !important; height: 52px !important; } .vh-tpl-clientareaproductdetails .cpanel-feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }