@font-face { font-family: "LuxUno"; src: url("../fonts/LuxeUno-Heavy.woff2") format("woff2"), url("../fonts/LuxeUno-Heavy.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Mazin"; src: url("../fonts/Mazin-Regular.woff2") format("woff2"), url("../fonts/Mazin-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Mazin"; src: url("../fonts/Mazin-Italic.woff2") format("woff2"), url("../fonts/Mazin-Italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Mazin"; src: url("../fonts/Mazin-Bold.woff2") format("woff2"), url("../fonts/Mazin-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } :root { --clr-bg: #222; --clr-surface: #2A2A2A; --clr-surface-alt: #333333; --clr-field: #212121; --clr-border: #4D4D4D; --clr-border-light: rgba(0, 0, 0, 0.03); --clr-text: #ffffff; --clr-text-dark: #111; --clr-text-muted: #a3a3a3; --clr-primary: #fc00ba; --clr-link: #fc00ba; --clr-btn-secondary: #1D1D1D; --clr-on-primary: #ffffff; --clr-on-surface: #ffffff; --grey-900: #1D1D1D; --grey-800: #262626; --grey-700: #2A2A2A; --grey-600: #3c3c3c; --grey-500: #575757; --grey-400: #686868; --grey-100: #f0f0f0; --clr-success: #00b03b; --clr-danger: #791a1a; --clr-warning: #ffa700; --clr-success-border: #00e152; --clr-danger-border: #791a1a; --ff-body: "Mazin", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --ff-heading: "LuxUno", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --type-field-control: 0.8rem; --lh-base: 1.8; --lh-tight: 1.1; --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-section: 3rem; --container-max: 100%; --container-gutter: var(--sp-6); --radius: 9999px; --radius-sm: 6px; --radius-lg: 16px; --shadow-1: 0 1px 2px rgba(0,0,0,0.35), 0 1px 1px rgba(255,255,255,0.04) inset; --shadow-2: 0 6px 18px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.03) inset; --shadow-focus: 0 0 0 3px rgba(252,0,186,0.35); --card-shadow: 0 2px 6px rgba(0,0,0,0.08), 0 12px 32px rgba(0,0,0,0.18); --bp-sm: 576px; --bp-md: 768px; --bp-lg: 992px; --bp-xl: 1200px; --easing: cubic-bezier(0.2, 0.6, 0.2, 1); --dur-quick: 120ms; --dur-fast: 200ms; --dur-normal: 300ms; --dur-slow: 450ms; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 84px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, figcaption, blockquote, dl, dd { margin: 0; padding: 0; } body { min-height: 100vh; text-rendering: optimizeSpeed; } ul, ol { list-style: none; } a { text-decoration: none; color: inherit; } img, picture, video, canvas, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; } :root{ --viewport-border: 3px; } html, body{ height: 100%; } html{ overflow-x: hidden; } body::after{ content:""; position: fixed; inset: 0; pointer-events: none; box-sizing: border-box; z-index: 9999; border: 0 solid transparent; opacity: 0; transition: opacity var(--dur-fast) var(--easing); } html[data-viewport-border="1"] body::after{ border: var(--viewport-border) solid var(--clr-primary); opacity: 1; } .nav-sign-in { width: 200px; background-color: var(--clr-primary); display: flex; align-items: center; justify-content: center; height: 100%; margin: 0; padding: 0; text-decoration: none; color: #fff; text-decoration: none; } .nav-sign-in:hover{ background-color: white; color: var(--clr-primary); text-decoration: none; } .nav-sign-in .material-icons-outlined{ flex: 0 0 auto; margin-right: 10px; font-size: 1.25rem; line-height: 1; } .subnav-actions{ display:flex; align-items:center; gap: 10px; } .subnav-switch{ display:flex; align-items:center; gap: 10px; padding: 6px 10px; border: 1px solid var(--clr-border); border-radius: var(--radius-sm); background: color-mix(in oklab, var(--clr-surface-alt) 85%, var(--grey-900)); } .subnav-switch__label{ font-size: var(--type-note); color: var(--clr-text-muted); line-height: 1; user-select: none; } .ui-switch{ position: relative; width: 52px; height: 28px; display:inline-block; flex: 0 0 auto; } .ui-switch__track{ position:absolute; inset:0; border-radius: 999px; border: 1px solid var(--clr-border); background: rgba(0,0,0,0.28); transition: background-color var(--dur-fast) var(--easing), border-color var(--dur-fast) var(--easing); } .ui-switch__track::after{ content:""; position:absolute; top: 50%; left: 3px; width: 22px; height: 22px; transform: translateY(-50%); border-radius: 999px; background: var(--clr-text); box-shadow: 0 6px 18px rgba(0,0,0,0.35); transition: left var(--dur-fast) var(--easing); } .ui-switch > input{ position: absolute; inset: 0; opacity: 0; margin: 0; padding: 0; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; accent-color: transparent; color: transparent; width: 100%; height: 100%; min-width: 0; min-height: 0; z-index: 2; } .ui-switch > input::-ms-check{ display: none; } .ui-switch > input:disabled{ background: transparent !important; box-shadow: none !important; } .ui-switch > input:checked ~ .ui-switch__track{ background: color-mix(in oklab, var(--clr-primary) 38%, rgba(0,0,0,0.28)); border-color: color-mix(in oklab, var(--clr-primary) 55%, var(--clr-border)); } .ui-switch > input:checked ~ .ui-switch__track::after{ left: 27px; } .ui-switch > input:focus-visible ~ .ui-switch__track{ outline: 2px solid color-mix(in oklab, var(--clr-primary) 65%, transparent); outline-offset: 3px; } .subnav-switch.is-disabled, .subnav-switch[aria-disabled="true"]{ opacity: 0.6; } .subnav-switch.is-disabled .subnav-switch__label, .subnav-switch[aria-disabled="true"] .subnav-switch__label{ color: var(--clr-text-muted); } .ui-switch > input:disabled{ cursor: not-allowed; } .ui-switch > input:disabled ~ .ui-switch__track{ background: color-mix(in oklab, var(--clr-surface-alt) 70%, var(--grey-900)); border-color: color-mix(in oklab, var(--clr-border) 85%, transparent); opacity: 0.75; } .ui-switch > input:disabled ~ .ui-switch__track::after{ background: color-mix(in oklab, var(--clr-text) 75%, var(--clr-surface)); box-shadow: none; } .ui-switch > input:disabled:checked ~ .ui-switch__track{ background: color-mix(in oklab, var(--clr-primary) 18%, var(--clr-surface-alt)); border-color: color-mix(in oklab, var(--clr-primary) 30%, var(--clr-border)); } .ui-switch > input:disabled ~ .ui-switch__track, .ui-switch > input:disabled ~ .ui-switch__track::after{ transition: none; } body { margin: 0; padding: 0; border: none; background-color: var(--clr-bg); color: var(--clr-text); font-family: var(--ff-body); font-size: var(--type-p); line-height: var(--lh-base); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .world-logo { width: 180px; } h1 { font-family: var(--ff-heading); font-weight: 700; font-size: var(--type-display); line-height: var(--lh-tight); color: var(--clr-text); margin-bottom: var(--sp-5); } h2 { font-family: var(--ff-heading); font-weight: 700; font-size: var(--type-section-title); line-height: var(--lh-tight); color: var(--clr-text); margin-bottom: var(--sp-6); } h3 { font-family: var(--ff-heading); font-weight: 700; font-size: var(--type-card-title); line-height: var(--lh-tight); color: var(--clr-text); margin-bottom: var(--sp-4); } h4 { font-family: var(--ff-heading); font-weight: 700; font-size: var(--type-lead); line-height: var(--lh-tight); color: var(--clr-text); margin-bottom: var(--sp-3); } h5 { font-family: var(--ff-heading); font-weight: 700; font-size: var(--type-p); line-height: var(--lh-tight); color: var(--clr-text); margin-bottom: var(--sp-4); letter-spacing: 0.02em; } p { font-family: var(--ff-body); font-weight: var(--fw-regular); font-size: var(--type-p); line-height: var(--lh-base); color: var(--clr-text); margin-bottom: var(--sp-6); } .mk-legal__table-wrap { width: 100%; overflow-x: auto; margin: 1.25rem 0 2rem; border: 1px solid #dddddd; border-radius: 16px; background: #ffffff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04); } .mk-legal__table { width: 100%; min-width: 760px; border-collapse: collapse; background: #ffffff; color: #222222; } .mk-legal__table thead { background: #f5f5f5; } .mk-legal__table th, .mk-legal__table td { padding: 1rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid #e7e7e7; font-size: var(--type-step-body); line-height: 1.6; } .mk-legal__table th { font-size: var(--type-note); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #555555; white-space: nowrap; } .mk-legal__table tbody tr:last-child td { border-bottom: 0; } .mk-legal__table tbody tr:nth-child(even) { background: #fafafa; } .mk-legal__table tbody tr:hover { background: #f2f2f2; } .mk-legal__table td:first-child, .mk-legal__table th:first-child { padding-left: 1.25rem; } .mk-legal__table td:last-child, .mk-legal__table th:last-child { padding-right: 1.25rem; } .mk-legal__table code { display: inline-block; padding: 0.2rem 0.45rem; border-radius: 8px; background: #f3f3f3; border: 1px solid #dddddd; color: #222222; font-size: 0.9em; font-family: Consolas, Monaco, 'Courier New', monospace; word-break: break-word; } .mk-legal__section h3 + .mk-legal__table-wrap { margin-top: 0.9rem; } .mk-legal__table th:nth-child(1), .mk-legal__table td:nth-child(1) { width: 16%; } .mk-legal__table th:nth-child(2), .mk-legal__table td:nth-child(2) { width: 12%; } .mk-legal__table th:nth-child(3), .mk-legal__table td:nth-child(3) { width: 40%; } .mk-legal__table th:nth-child(4), .mk-legal__table td:nth-child(4) { width: 14%; } .mk-legal__table th:nth-child(5), .mk-legal__table td:nth-child(5) { width: 18%; } .mk-legal__table-wrap::-webkit-scrollbar { height: 10px; } .mk-legal__table-wrap::-webkit-scrollbar-track { background: #efefef; border-radius: 999px; } .mk-legal__table-wrap::-webkit-scrollbar-thumb { background: #cfcfcf; border-radius: 999px; } .mk-legal__table-wrap::-webkit-scrollbar-thumb:hover { background: #b8b8b8; } @media (max-width: 768px) { .mk-legal__table-wrap { margin: 1rem 0 1.75rem; border-radius: 14px; } .mk-legal__table th, .mk-legal__table td { padding: 0.85rem 0.85rem; font-size: var(--type-meta); } .mk-legal__table th { font-size: var(--type-note); } .mk-legal__table td:first-child, .mk-legal__table th:first-child { padding-left: 1rem; } .mk-legal__table td:last-child, .mk-legal__table th:last-child { padding-right: 1rem; } } .table { width: 100%; border-collapse: separate; border-spacing: 0; color: #bfbfbf; background-color: var(--clr-bg); } .table thead th { position: sticky; top: 0; color: var(--clr-text); font-weight: var(--fw-bold); font-size: var(--type-p); text-align: left; padding: 12px 6px; border-bottom: 1px solid var(--clr-border); white-space: nowrap; background-color: #3d3d3d; } .table tbody td { font-size: var(--type-p); padding: 12px 6px; vertical-align: middle; } .table tbody tr { background-color: #313131; } .table tbody tr + tr td { border-top: 1px solid var(--clr-border); } .table tbody tr:last-child td { border-bottom: 1px solid var(--clr-border); } .table tbody tr:hover { background: rgba(255,255,255,0.03); } .table thead th:first-child, .table tbody td:first-child { padding-left: 20px; } .table thead th:last-child, .table tbody td:last-child { padding-right: 20px; } .table--compact thead th, .table--compact tbody td { padding: 10px 12px; } table.js-sortable thead th .sort-btn{ appearance: none; -webkit-appearance: none; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; font: inherit !important; letter-spacing: inherit !important; text-transform: none !important; color: inherit !important; line-height: inherit !important; border-radius: 0 !important; height: auto !important; min-height: 0 !important; width: auto !important; min-width: 0 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; cursor: pointer !important; } table.js-sortable thead th .sort-btn:hover{ text-decoration: underline; } table.js-sortable thead th .sort-arrows{ font-size: var(--type-note); opacity: 0.6; } table.js-sortable thead th .sort-btn.is-asc .sort-arrows::after{ content: " ↑"; } table.js-sortable thead th .sort-btn.is-desc .sort-arrows::after{ content: " ↓"; } table.js-sortable thead th .sort-btn:focus{ outline: none !important; } table.js-sortable thead th .sort-btn:focus-visible{ outline: 2px solid rgba(255,255,255,0.35); outline-offset: 2px; border-radius: 6px; } a { color: var(--clr-primary); text-decoration: none; transition: color var(--dur-fast) var(--easing), text-decoration-color var(--dur-fast) var(--easing); } a:hover { color: var(--clr-on-primary); text-decoration: underline; text-decoration-color: var(--clr-primary); } a:focus-visible { outline: none; color: var(--clr-on-primary); box-shadow: var(--shadow-focus); border-radius: 2px; } a:active { opacity: 0.9; } a.link-muted { color: var(--clr-text-muted); } a.link-muted:hover { color: var(--clr-primary); text-decoration: underline; text-decoration-color: var(--clr-primary); } p a { color: var(--clr-primary); text-underline-offset: 2px; } p a:hover { text-decoration-thickness: 1.5px; text-underline-offset: 3px; } a .material-icons-outlined { display: inline-flex; align-items: center; position: relative; line-height: 1; vertical-align: -3px; } button, .btn { --btn-h: 48px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-family: var(--ff-body); font-size: var(--type-p); font-weight: var(--fw-bold); border: none; border-radius: var(--radius); padding: 0.5625rem 1.5rem; cursor: pointer; width: auto; min-width: 0; max-width: 100%; min-height: var(--btn-h); line-height: 1; text-align: center; transition: transform var(--dur-quick) var(--easing), background-color var(--dur-fast) var(--easing), color var(--dur-fast) var(--easing); } .btn { overflow: visible; background-color: var(--clr-primary); color: var(--clr-on-primary); text-decoration: none !important; } a.btn:hover, a.btn:focus, a.btn:active, .btn:hover, .btn:focus, .btn:active { background-color: #fff !important; color: var(--clr-primary) !important; text-decoration: none !important; } .btn .material-icons-outlined, .btn span { color: inherit !important; } .mk-auth-btn{ position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; } .mk-auth-btn__label{ display: inline-flex; align-items: center; justify-content: center; } .mk-auth-btn__spinner{ width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: none; flex: 0 0 16px; animation: mkAuthBtnSpin 0.7s linear infinite; } .mk-auth-btn.is-loading{ pointer-events: none; opacity: 0.9; } .mk-auth-btn.is-loading .mk-auth-btn__spinner{ display: inline-block; } @keyframes mkAuthBtnSpin{ to{ transform: rotate(360deg); } } button { overflow: visible !important; background-color: var(--clr-primary); color: var(--clr-on-primary); text-decoration: none !important; } button::before, button::after { content: none !important; display: none !important; animation: none !important; } button, .btn{ border: 1px solid transparent; } button:hover, button:focus, button:active, .btn:hover, .btn:focus, .btn:active{ border-color: var(--clr-primary); } button:hover, button:focus, button:active { background-color: #fff !important; color: var(--clr-primary) !important; } button:hover *, button:focus *, button:active * { color: inherit !important; } .btn:not(.btn-secondary):not(.mk-auth-btn--secondary) { --primary-button-icon-svg: url("../icons/material-symbols-outlined-wght200/arrow_forward.svg"); } .sticky-actions__btn--primary { --primary-button-icon-svg: url("../icons/material-symbols-outlined-wght200/save.svg"); } button.btn[type="submit"] { --primary-button-icon-svg: url("../icons/material-symbols-outlined-wght200/task_alt.svg"); } .btn.mk-message-modal-btn, .btn.mk-contact-submit-btn, .btn.sp-contact-submit-btn { --primary-button-icon-svg: url("../icons/material-symbols-outlined-wght200/send.svg"); } a.btn[href^="#"] { --primary-button-icon-svg: url("../icons/material-symbols-outlined-wght200/expand_more.svg"); } a.btn[href*="/contact"], a.btn[href^="mailto:"] { --primary-button-icon-svg: url("../icons/material-symbols-outlined-wght200/phone.svg"); } a.btn[href*="/marketplace"], a.btn[href*="/browse-"] { --primary-button-icon-svg: url("../icons/material-symbols-outlined-wght200/storefront.svg"); } a.btn[href*="/signin"], a.btn[href*="/login"], .btn[data-auth-open] { --primary-button-icon-svg: url("../icons/material-symbols-outlined-wght200/login.svg"); } .btn.mk-modal__close, .btn[data-mk-modal-close], .btn[data-action-modal-close], .btn[data-rfq-close], .btn[data-contact-seller-close], .btn[data-partner-modal-close], .btn[data-stand-feedback-close], .btn[data-make-offer-success-close] { --primary-button-icon-svg: url("../icons/material-symbols-outlined-wght200/close.svg"); } .btn.mk-offerup-modal__morebtn { --primary-button-icon-svg: url("../icons/material-symbols-outlined-wght200/chevron_right.svg"); } html body :is(.btn:not(.btn-secondary):not(.mk-auth-btn--secondary), .sticky-actions__btn--primary):not(:has(.material-icons)):not(:has(.material-icons-outlined)):not(:has(.material-symbols-outlined)):not(:has(svg)):not(:has(img)):not(:has([class*="icon"]))::before { content: "" !important; display: inline-flex !important; align-items: center; justify-content: center; flex: 0 0 1.125rem; width: 1.125rem; height: 1.125rem; background-color: currentColor; -webkit-mask: var(--primary-button-icon-svg, url("../icons/material-symbols-outlined-wght200/arrow_forward.svg")) center / contain no-repeat; mask: var(--primary-button-icon-svg, url("../icons/material-symbols-outlined-wght200/arrow_forward.svg")) center / contain no-repeat; } .btn-secondary { background-color: var(--clr-btn-secondary); color: var(--clr-text); } .btn-secondary:is(:hover, :focus-visible, :active) { background-color: #fff !important; border-color: var(--clr-btn-secondary) !important; color: var(--clr-btn-secondary) !important; -webkit-text-fill-color: var(--clr-btn-secondary) !important; } .btn-secondary:is(:hover, :focus-visible, :active) * { color: inherit !important; -webkit-text-fill-color: inherit !important; } @keyframes plane-fly { 0% { left: calc(-1 * var(--plane-size)); opacity: 0; transform: translateY(-50%) rotate(90deg); } 10% { opacity: 1; } 90% { left: calc(130% - var(--plane-size)); opacity: 1; transform: translateY(-50%) rotate(90deg); } 100% { left: 130%; opacity: 0; transform: translateY(-50%) rotate(90deg); } } @property --nose { syntax: '<percentage>'; initial-value: 18%; inherits: false; } @keyframes jet-follow { 0% { width: 0%; clip-path: polygon( 0% 0%, 100% calc(50% - var(--nose) / 2), 100% calc(50% - var(--nose) / 2), 100% calc(50% + var(--nose) / 2), 100% calc(50% + var(--nose) / 2), 0% 100% ); } 70% { width: 80%; clip-path: polygon( 0% 0%, 100% calc(50% - var(--nose) / 2), 100% calc(50% - var(--nose) / 2), 100% calc(50% + var(--nose) / 2), 100% calc(50% + var(--nose) / 2), 0% 100% ); } 90% { width: 105%; clip-path: polygon( 0% 0%, 100% calc(50% - var(--nose) / 2), 100% calc(50% - var(--nose) / 2), 100% calc(50% + var(--nose) / 2), 100% calc(50% + var(--nose) / 2), 0% 100% ); } 100% { width: calc(100% + var(--jet-overshoot)); clip-path: polygon( 0% 0%, 100% 0%, 100% 0%, 100% 100%, 100% 100%, 0% 100% ); } } .form { width: 100%; display: flex; flex-direction: column; gap: var(--sp-5); } .form-group { display: flex; flex-direction: column; gap: var(--sp-2); } .form-group label { font-size: var(--type-p); font-weight: var(--fw-medium); color: var(--clr-text); letter-spacing: 0.01em; } input[type="date"] { color-scheme: dark; } input[type="date"]::-webkit-calendar-picker-indicator { opacity: 1; cursor: pointer; filter: brightness(0) saturate(100%) invert(18%) sepia(100%) saturate(7426%) hue-rotate(308deg) brightness(101%) contrast(104%); transform: translateY(-8px); } :root{ --datetime-picker-icon-filter: invert(39%) sepia(96%) saturate(1805%) hue-rotate(296deg) brightness(101%) contrast(101%); } input[type="datetime-local"]::-webkit-calendar-picker-indicator{ opacity: 1; cursor: pointer; filter: var(--datetime-picker-icon-filter); } input, select, textarea { width: 100%; height: 50px; padding: var(--sp-3) var(--sp-4); font-family: var(--ff-body); font-size: var(--type-p); color: var(--clr-text); background-color: var(--clr-field); border: 1px solid var(--clr-border); transition: border-color var(--dur-fast) var(--easing), box-shadow var(--dur-fast) var(--easing), background-color var(--dur-fast) var(--easing); margin-top: 8px; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--clr-primary); box-shadow: var(--shadow-focus); } ::placeholder { color: var(--clr-text-muted); opacity: 0.8; } select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>"); background-repeat: no-repeat; background-position: right var(--sp-4) center; background-size: 16px; cursor: pointer; } textarea { resize: vertical; min-height: 120px; line-height: 1.5; } form button { align-self: flex-start; } .form-group.floating { position: relative; gap: 0; } .form-group.floating input, .form-group.floating select, .form-group.floating textarea { border: none; border-bottom: 1px solid var(--clr-border); border-radius: 0; box-shadow: none; padding: var(--sp-6) var(--sp-2) var(--sp-2) var(--sp-2); transition: border-color var(--dur-fast) var(--easing), box-shadow var(--dur-fast) var(--easing); } .form-group.floating input:focus, .form-group.floating select:focus, .form-group.floating textarea:focus { border-bottom-color: var(--clr-primary); outline: none; box-shadow: none; } .form-group.floating label { position: absolute; left: var(--sp-2); top: 50%; transform: translateY(-50%); font-size: var(--type-p); color: var(--clr-text-muted); pointer-events: none; transition: top var(--dur-fast) var(--easing), right var(--dur-fast) var(--easing), left var(--dur-fast) var(--easing), transform var(--dur-fast) var(--easing), font-size var(--dur-fast) var(--easing), color var(--dur-fast) var(--easing); } .form-group.floating.is-error label, .form-group.floating.is-valid label{ left: var(--sp-2); top: var(--sp-3); transform: none; font-size: var(--type-note); } .form-group.floating.is-error label, .form-group.floating.is-valid label{ color: rgba(255,255,255,0.4); } .form-group.floating input::placeholder, .form-group.floating textarea::placeholder { color: transparent; } .form-group.floating input:focus + label, .form-group.floating input:not(:placeholder-shown) + label, .form-group.floating textarea:focus + label, .form-group.floating textarea:not(:placeholder-shown) + label, .form-group.floating:has(> select) > label, .form-group.floating select + label, .form-group.floating select:focus + label, .form-group.floating select:valid + label{ left: var(--sp-2); top: var(--sp-3); transform: none; font-size: var(--type-note); color: rgba(255, 255, 255, 0.4); } .form-group.floating.is-valid input, .form-group.floating.is-valid select, .form-group.floating.is-valid textarea { border-bottom-color: var(--clr-success); } .form-group.floating.is-valid label { color: var(--clr-success); } .form-group.floating.is-error input, .form-group.floating.is-error select, .form-group.floating.is-error textarea { border-bottom-color: var(--clr-danger); } .form-group.floating select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg fill='%23fc00ba' width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5'/></svg>"); background-repeat: no-repeat; background-position: right var(--sp-4) center; background-size: 20px; height: 50px; min-height: 50px; padding: 22px calc(var(--sp-8) + 8px) 6px var(--sp-2); line-height: 1.2; cursor: pointer; background-color: #212121; color: var(--clr-text); border-bottom: 1px solid var(--clr-border); border-radius: 0; } .form-group.floating textarea { resize: vertical; min-height: 120px; line-height: 1.5; scrollbar-width: none; -ms-overflow-style: none; } .form-group.floating textarea::-webkit-scrollbar { display: none; } .form-group.floating select option { padding: var(--sp-5) var(--sp-4); background-color: var(--clr-surface); color: var(--clr-text); line-height: 2.2; } .form-group.floating select option:hover, .form-group.floating select option:checked { background-color: var(--clr-surface-alt); color: var(--clr-primary); } @supports (-webkit-appearance: none) { .form-group.floating select { -webkit-padding-end: var(--sp-8); } } .form-group.floating textarea + label { left: var(--sp-2); top: 30%; transform: translateY(-50%); font-size: var(--type-p); color: var(--clr-text-muted); } .form-group.floating textarea:focus + label, .form-group.floating textarea:not(:placeholder-shown) + label { left: var(--sp-2); top: var(--sp-3); transform: none; font-size: var(--type-note); color: rgba(255, 255, 255, 0.4); } .field-msg { position: absolute; min-width: 150px; bottom: 0.5em; right: 0.5em; font-size: var(--type-note); line-height: 1.5; color: #fff; white-space: nowrap; background: var(--clr-danger); padding: 3px 10px; border-radius: 50px; margin-top: 10px; text-align: center; } .form-group.floating { position: relative; padding-bottom: 1.2em; } .field-msg, .field-msg[hidden] { display: none; } .form-group.is-error > .field-msg, .form-group.floating.is-error .field-msg { display: block; } .form-group.is-valid > .field-msg, .form-group.floating.is-valid .field-msg { display: none; } .form-group.floating.is-error .field-msg { color: #fff; } .form-group.floating input, .form-group.floating select, .form-group.floating textarea { border: none; border-bottom: 1px solid var(--clr-primary); border-radius: 0; box-shadow: none; } .form-group.floating input:focus, .form-group.floating select:focus, .form-group.floating textarea:focus { border-bottom-color: var(--clr-primary); } .form-group.floating.is-valid input, .form-group.floating.is-valid select, .form-group.floating.is-valid textarea { border-bottom-color: var(--clr-success); } .form-group.floating.is-error input, .form-group.floating.is-error select, .form-group.floating.is-error textarea { border-bottom-color: var(--clr-danger); } select{ background-color: #212121; color: var(--clr-text); border: 1px solid var(--clr-border); } select option, select optgroup{ background-color: #1d1d1d; color: var(--clr-text); } select option:checked{ background-color: #2a2a2a; color: var(--clr-primary); } select option:hover{ background-color: #2a2a2a; color: var(--clr-primary); } .apu-modal select, .apu-modal select option{ background-color: #1d1d1d; color: var(--clr-text); } .checkbox{ width: 100%; display: flex; flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: #212121; border: 1px solid var(--clr-border); border-radius: var(--radius-sm); font-size: var(--type-p); color: var(--clr-text); cursor: pointer; transition: background-color var(--dur-fast) var(--easing), border-color var(--dur-fast) var(--easing), box-shadow var(--dur-fast) var(--easing), transform var(--dur-quick) var(--easing); margin-top: 10px; } .checkbox:hover{ border-color: var(--clr-primary); background: color-mix(in oklab, var(--clr-surface-alt) 60%, var(--clr-primary) 8%); box-shadow: var(--shadow-1); } .checkbox input[type="checkbox"]{ appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 18px; height: 18px; flex: 0 0 18px; margin: 0; padding: 0; border-radius: 4px; border: 1px solid var(--clr-border); background-color: var(--grey-900); display: inline-block; position: relative; cursor: pointer; transition: border-color var(--dur-fast) var(--easing), background-color var(--dur-fast) var(--easing), box-shadow var(--dur-fast) var(--easing); } .checkbox input[type="checkbox"]:focus-visible{ outline: none; box-shadow: var(--shadow-focus); } .checkbox input[type="checkbox"]:checked{ background-color: var(--clr-primary); border-color: var(--clr-primary); } .checkbox input[type="checkbox"]:checked::after{ content: ""; position: absolute; inset: 3px 4px 3px 5px; border-right: 2px solid var(--clr-on-primary); border-bottom: 2px solid var(--clr-on-primary); transform: rotate(45deg); } .checkbox span{ flex: 1 1 auto; } .checkbox input[type="checkbox"]:disabled{ opacity: 0.5; cursor: not-allowed; } .checkbox input[type="checkbox"]:disabled + span{ color: var(--clr-text-muted); cursor: not-allowed; } .checkbox.mk-filter-check{ margin-top: 0; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--clr-surface-alt); color: var(--clr-text); } .checkbox.mk-filter-check span{ font-size: var(--type-field-control); line-height: 1.5; } .checkbox.mk-filter-check:has(input:checked){ border-color: var(--clr-primary); background: color-mix(in oklab, var(--clr-surface-alt) 88%, var(--clr-primary) 12%); } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type="number"] { -moz-appearance: textfield; appearance: textfield; } input:disabled, textarea:disabled, select:disabled, .form-group.floating input:disabled, .form-group.floating textarea:disabled, .form-group.floating select:disabled, .is-disabled { background-color: var(--grey-800); border-color: var(--grey-600); border-bottom-color: var(--grey-600); color: var(--clr-text-muted); -webkit-text-fill-color: var(--clr-text-muted); cursor: not-allowed; opacity: 0.7; } .form-group.floating select:disabled { background-color: var(--grey-800); color: var(--clr-text-muted); -webkit-text-fill-color: var(--clr-text-muted); border-bottom-color: var(--grey-600); cursor: not-allowed; opacity: 0.7; background-image: url("data:image/svg+xml;utf8,<svg fill='%23a3a3a3' width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5'/></svg>"); background-repeat: no-repeat; background-position: right var(--sp-4) center; background-size: 20px; } .form-group.floating select:disabled + label { color: var(--clr-text-muted); } .form-group.floating.is-valid select:disabled, .form-group.floating.is-error select:disabled { border-bottom-color: var(--grey-600); } .form-group.floating.is-valid select:disabled + label, .form-group.floating.is-error select:disabled + label { color: var(--clr-text-muted); } .form-group.floating select:disabled + label { left: var(--sp-2); top: var(--sp-3); transform: none; font-size: var(--type-note); color: rgba(255,255,255,0.4); } .form-group.floating select:disabled { padding-top: var(--sp-6); padding-bottom: var(--sp-2); } .form-group.floating input:disabled + label, .form-group.floating select:disabled + label, .form-group.floating textarea:disabled + label { left: var(--sp-2); top: var(--sp-3); transform: none; font-size: var(--type-note); color: rgba(255, 255, 255, 0.4); } button:disabled, button[disabled], button[aria-disabled="true"], .btn:disabled, .btn[disabled], .btn.is-disabled, .btn[aria-disabled="true"], .btn.btn--primary:disabled, .btn.btn--primary[disabled], .btn.btn--primary.is-disabled, .pill-link.is-disabled, .pill-link[aria-disabled="true"] { background: var(--grey-800) !important; background-color: var(--grey-800) !important; border-color: var(--grey-600) !important; border-bottom-color: var(--grey-600) !important; color: var(--clr-text-muted) !important; -webkit-text-fill-color: var(--clr-text-muted) !important; cursor: not-allowed !important; opacity: 0.68 !important; box-shadow: none !important; filter: grayscale(0.2); pointer-events: none; transform: none !important; } button:disabled .material-icons-outlined, button[disabled] .material-icons-outlined, button[aria-disabled="true"] .material-icons-outlined, .btn:disabled .material-icons-outlined, .btn[disabled] .material-icons-outlined, .btn.is-disabled .material-icons-outlined, .btn[aria-disabled="true"] .material-icons-outlined, .pill-link.is-disabled .material-icons-outlined, .pill-link[aria-disabled="true"] .material-icons-outlined { color: var(--clr-text-muted) !important; -webkit-text-fill-color: var(--clr-text-muted) !important; } .vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; } .tag-group { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-5); } .tag { --pill-pad-y: 0.6rem; --pill-pad-x: 1.2rem; display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--pill-pad-y) var(--pill-pad-x); background: var(--clr-surface); color: var(--clr-text); border: 1px solid var(--clr-border); border-radius: 9999px; cursor: pointer; user-select: none; transition: background-color var(--dur-fast) var(--easing), border-color var(--dur-fast) var(--easing), color var(--dur-fast) var(--easing), transform var(--dur-quick) var(--easing); } .tag:hover { border-color: rgba(255,255,255,0.2); background-color: white; color: black; } .tag:has(input:focus-visible) { box-shadow: var(--shadow-focus); } .tag-control { width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--clr-border); opacity: 1; position: relative; flex: 0 0 15px; background-color: var(--grey-900); } .tag-control::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: transparent; transition: background-color var(--dur-fast) var(--easing); } .tag-label { font-size: var(--type-p); line-height: 1; white-space: nowrap; } .tag input:checked ~ .tag-label, .tag input:checked ~ .tag-control { color: var(--clr-on-primary); } .tag input:checked ~ .tag-control::after { background: var(--clr-on-primary); } .tag input:checked ~ .tag-label, .tag input:checked ~ .tag-control, .tag input:checked ~ .tag-label + * { } .tag input:checked + .tag-control, .tag input:checked + .tag-control + .tag-label { } .tag input:checked ~ .tag-label { color: var(--clr-on-primary); } .tag input:checked ~ .tag-control { border-color: var(--clr-on-primary); } .tag input:checked ~ .tag-control::after { background: var(--clr-on-primary); } .tag input:checked ~ .tag-label::before { } .tag:has(input:checked) { background: var(--clr-primary); border-color: transparent; color: var(--clr-on-primary); } .stat-card { position: relative; padding-bottom: 30px; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); overflow: hidden; pointer-events: auto; } .stat-card { display: flex; flex-direction: column; } .stat-card .card-body { flex: 1; overflow: auto; min-height: 0; padding-bottom: 20px; } .stat-list-toggle { display: block; } .card-bar { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); background: color-mix(in oklab, var(--grey-900) 65%, transparent); } .card-icon { font-size: 20px; color: var(--clr-text-muted); } .card-bar .card-toggle { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: inherit; } .card-bar .card-toggle:hover { color: var(--clr-primary); } .card-bar-main { display: flex; align-items: center; gap: var(--sp-2); width: 100%; } .card-selected-label a { color: #fff !important; text-decoration: none; } .card-selected-label a:hover, .card-selected-label a:focus { color: var(--clr-primary) !important; text-decoration: none; } .card-selected-label { display: flex; align-items: center; justify-content: space-between; flex: 1; min-width: 0; gap: var(--sp-2); } .card-label-left { font-weight: 600; white-space: nowrap; } .card-label-right { margin-left: auto; text-align: right; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-close { all: unset; cursor: pointer; width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--radius); color: var(--clr-text-muted); } .card-close:hover { color: var(--clr-on-primary); background: rgba(255, 255, 255, 0.08); } .card-body { display: grid; grid-template-columns: 64px 1fr; grid-auto-rows: auto; column-gap: var(--sp-4); row-gap: var(--sp-3); align-items: flex-start; padding: 20px 20px 0 20px; } .stat-icon { width: 56px; height: 56px; border-radius: 999px; display: grid; place-items: center; background: var(--grey-800); border: 1px solid var(--clr-border); } .stat-icon .material-icons-outlined { font-size: 26px; color: var(--clr-on-surface); opacity: 0.9; } .stat-main .stat-value { font-family: var(--ff-heading); font-weight: 700; font-size: var(--type-h3); line-height: var(--type-line-h3); color: var(--clr-primary); } .stat-main .stat-value.small { font-size: var(--type-section-title); color: var(--clr-on-surface); } .stat-main .stat-label { margin-top: 6px; font-size: var(--type-p); color: var(--clr-on-surface); opacity: 0.9; } .stat-main .stat-label.accent { color: var(--clr-primary); } .stat-list { width: 100%; } .stat-list-toggle { display: none; margin-top: var(--sp-3); grid-column: 1 / -1; } .mini-list { list-style: none; margin: 0; padding: 0; } .mini-list-heading { font-size: var(--type-p); font-weight: 600; margin-bottom: var(--sp-4); color: var(--clr-on-surface); } .mini-list-footer { margin-top: var(--sp-4); display: flex; justify-content: flex-end; font-weight: 600; } .mini-list-footer-text { display: block; padding: 4px 0 0; font-size: var(--type-note); opacity: 0.7; } .spoolup-footer__turnstile{ margin: 0; font-size: var(--type-note); line-height: 1.5; opacity: 0.82; } .spoolup-footer__turnstile a{ color: inherit; text-decoration: underline; } .mini-list li { border-top: 1px solid var(--clr-border); } .mini-list li:last-child { border-bottom: 1px solid var(--clr-border); } .mini-list .item-link { display: flex; align-items: center; justify-content: space-between; width: 100%; text-decoration: none; color: var(--clr-on-surface); font-size: var(--type-p); padding: var(--sp-2) 0; box-sizing: border-box; } .mini-list .item-link:hover { color: var(--clr-primary); } .mini-list .item-name, .mini-list .item-text { margin-right: var(--sp-2); } .mini-list .item-count { font-variant-numeric: tabular-nums; opacity: 0.85; } .brand-box { width: 64px; height: 64px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--grey-800); border: 1px solid var(--clr-border); } .brand-box img { max-width: 80%; max-height: 80%; object-fit: contain; filter: brightness(1.05); } .aside-cta { margin-top: var(--sp-2); display: flex; justify-content: flex-end; pointer-events: auto; } .card-selected-label .card-label-right { display: inline-flex; align-items: center; gap: 0.25rem; } .card-filter-clear { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; margin-left: 0.15rem; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(0, 0, 0, 0.15); cursor: pointer; } .card-filter-clear .material-icons-outlined { font-size: 14px; line-height: 1; } .card-filter-clear:hover, .card-filter-clear:focus-visible { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.9); outline: none; } .fit-text { display: block; font-size: var(--type-section-title) !important; line-height: 1.1; word-break: none; max-width: 90%; text-overflow: ellipsis; } .stat-card { position: relative; } .card-resize-hint { position: absolute; left: 0; right: 0; bottom: 0; height: 32px; display: flex; align-items: center; justify-content: center; user-select: none; pointer-events: auto; cursor: pointer; background: color-mix( in oklab, var(--clr-surface) 85%, #000 5% ); border: 0; appearance: none; -webkit-appearance: none; } .card-resize-hint .material-icons-outlined { font-size: 18px; transform: rotate(90deg); color: var(--clr-on-surface); opacity: 0.5; } .stat-card.is-collapsed .card-resize-hint { display: none; } #worldFleetCard.is-collapsed .resize-handle, #worldFleetCard.is-collapsed .card-resize-hint{ display: none !important; } .search-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); } .site-search, .search-field { position: relative; flex: 1 1 auto; min-width: 0; } .site-search > input:is([type="text"], [type="search"]), .search-field > input:is([type="text"], [type="search"]) { width: 100%; height: 50px; min-height: 50px; margin: 0; padding: 0 46px 0 var(--sp-4); background-color: var(--clr-field); color: var(--clr-text); border: 1px solid var(--clr-border); border-radius: var(--radius); font-family: var(--ff-body); font-size: var(--type-field-control); line-height: 1.5; box-shadow: none; text-overflow: ellipsis; transition: border-color var(--dur-fast) var(--easing), background-color var(--dur-fast) var(--easing), box-shadow var(--dur-fast) var(--easing); } .site-search > input:is([type="text"], [type="search"])::placeholder, .search-field > input:is([type="text"], [type="search"])::placeholder { color: var(--clr-text-muted); opacity: 0.8; font-style: normal; } .site-search > input:is([type="text"], [type="search"]):focus, .search-field > input:is([type="text"], [type="search"]):focus { outline: none; border-color: var(--clr-primary); background-color: var(--clr-field); box-shadow: var(--shadow-focus); } .site-search > .material-icons-outlined, .site-search > .material-symbols-outlined, .search-field > .search-icon { position: absolute; right: var(--sp-4); top: 50%; transform: translateY(-50%); font-size: 1.25rem; color: var(--clr-text-muted); pointer-events: none; line-height: 1; } .site-search--submit { display: flex; align-items: center; gap: var(--sp-3); } .site-search--submit > input:is([type="text"], [type="search"]) { flex: 1 1 auto; min-width: 0; padding-right: var(--sp-4) !important; } .clear-search { display: inline-block; color: var(--clr-primary); font-size: var(--type-p); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); text-decoration: none; transition: color var(--dur-fast) var(--easing), background-color var(--dur-fast) var(--easing); } .clear-search:hover { color: var(--clr-on-primary); text-decoration: underline; } .clear-search:focus-visible { outline: none; } .actions-cell{ text-align: right; } body.has-subnav { padding-top: 100px; } .subnav { position: fixed; top: 0; left: 0; right: 0; background: var(--clr-surface); border-bottom: 1px solid var(--clr-border); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); z-index: 1100; margin-bottom: 90px; isolation: isolate; } .subnav-inner { max-width: var(--container-max); margin-inline: auto; padding: 0 0 0 30px; display: flex; align-items: stretch; justify-content: space-between; gap: var(--sp-6); min-height: 60px; } .subnav-left { display: flex; align-items: stretch; gap: var(--sp-5); } .subnav-brand { display: inline-flex; align-items: center; } .subnav-logo { height: 32px; width: auto; } .subnav-main { display: flex; align-items: stretch; gap: var(--sp-3); margin-left: 40px; } .subnav-actions { display: flex; align-items: center; gap: var(--sp-4); } .subnav-actions .material-icons-outlined { top: 0 !important; } .subnav-link { display: flex; align-items: center; gap: var(--sp-2); padding-inline: var(--sp-8); padding-block: 0; font-size: var(--type-p); font-weight: 500; color: #ffffff; background: transparent; text-decoration: none !important; align-self: stretch; transition: background-color var(--dur-fast) var(--easing); } .subnav-link .material-icons-outlined { flex: 0 0 auto; font-size: 1.25rem; line-height: 1; color: var(--clr-primary); text-decoration: none !important; } .subnav-link:hover, .subnav-link:focus-visible { background-color: rgba(0, 0, 0, 0.22); color: #ffffff; text-decoration: none !important; outline: none; } .subnav-link:hover .material-icons-outlined, .subnav-link:focus-visible .material-icons-outlined { color: #ffffff; text-decoration: none !important; } .pill-link { --btn-h: 48px; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 0.5625rem var(--sp-5); border: 1px solid var(--clr-border); border-radius: var(--radius); color: var(--clr-text); background: var(--grey-800); font-size: var(--type-p); line-height: 1; text-decoration: none !important; transition: border-color var(--dur-fast) var(--easing), background-color var(--dur-fast) var(--easing), color var(--dur-fast) var(--easing), transform var(--dur-quick) var(--easing); min-height: var(--btn-h); height: auto; box-sizing: border-box; white-space: nowrap; } .pill-link.is-disabled{ opacity: 0.68; pointer-events: none; cursor: not-allowed; filter: grayscale(0.2); } .pill-link.is-disabled .material-icons-outlined{ opacity: 0.85; } .pill-link .material-icons-outlined { font-size: 20px; color: var(--clr-primary); top: 0 !important; } .pill-link:hover { border-color: var(--clr-primary); background: color-mix(in oklab, var(--clr-primary) 12%, transparent); } .pill-link:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .pill-link--light{ background: var(--grey-800); color: #fff; border-color: var(--clr-border); font-weight: 600; } .pill-link--light .material-icons-outlined{ color: currentColor; } .pill-link--light:hover{ background: #fff; border-color: var(--grey-800); color: var(--grey-800); } .pill-link--light:hover .material-icons-outlined{ color: var(--grey-800); } .pill-link--light:focus-visible{ outline: none; box-shadow: var(--shadow-focus); } .icon-link { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--clr-border); background: transparent; color: var(--clr-text); text-decoration: none !important; transition: border-color var(--dur-fast) var(--easing), background-color var(--dur-fast) var(--easing), transform var(--dur-quick) var(--easing); } .icon-link .material-icons-outlined { font-size: 20px; color: var(--clr-primary); top: 0; } .icon-link:hover { border-color: var(--clr-primary); background: color-mix(in oklab, var(--clr-primary) 10%, transparent); } .icon-link:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .page { max-width: 100%; margin: 0 auto; padding: var(--sp-6) var(--container-gutter); display: grid; padding-bottom: 130px; } .grid { display: grid; grid-template-columns: minmax(50%, 1fr) 40%; gap: var(--sp-10); align-items: start; } .panel { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); } .panel .form, .panel.help { padding: var(--sp-8); } .panel.help h3 { margin-top: 0; } .panel.help p { color: var(--clr-text-muted); } .panel.help { position: sticky; top: clamp(16px, 4vh, 48px); } .file-row { display: flex; align-items: center; gap: var(--sp-4); } input[type="file"] { width: 100%; background: var(--clr-surface-alt); border: 1px solid var(--clr-border); border-radius: var(--radius-sm); padding: var(--sp-4); color: var(--clr-text); cursor: pointer; height: 70px; } input[type="file"]::file-selector-button { margin-right: var(--sp-4); border: 1px solid var(--clr-border); background: var(--grey-900); color: var(--clr-text); padding: var(--sp-3) var(--sp-5); border-radius: var(--radius); cursor: pointer; transition: border-color var(--dur-fast) var(--easing), background-color var(--dur-fast) var(--easing), transform var(--dur-quick) var(--easing); } input[type="file"]::file-selector-button:hover { border-color: var(--clr-primary); background: color-mix(in oklab, var(--clr-primary) 14%, var(--grey-900)); } @supports not selector(input::file-selector-button) { input[type="file"] { padding: var(--sp-3) var(--sp-4); } } .panel .form .form-group { padding-bottom: var(--sp-8); border-bottom: 1px solid var(--clr-border); margin-bottom: var(--sp-8); } .actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-6); margin-top: var(--sp-8); } .layout { display:grid; grid-template-columns:minmax(640px,1fr) min(15vw); gap:var(--sp-10); align-items:start; } .panel-body { padding:var(--sp-8); } .map-grid { display:grid; gap:var(--sp-5); position:relative; padding-top: calc(var(--sp-6) + 2px); } .map-grid::before, .map-grid::after { position:absolute; top:0; font-size:var(--type-p); font-weight:var(--fw-medium); color:var(--clr-text-muted); letter-spacing:.02em; } .map-grid::before{ content:"Excel Field"; left:0; } .map-grid::after { content:"Data Centre Field"; right:40%; } .map-grid .row { display:grid; grid-template-columns: 1fr 1fr; gap:var(--sp-6); align-items:center; } .excel-label { background:var(--clr-surface-alt); color:var(--clr-text); padding: var(--sp-3) var(--sp-4); min-height: 42px; display:flex; align-items:center; } .map-grid .form-group.floating{ padding-bottom:0; } .map-grid .form-group.floating select{ min-height:42px; } .map-grid .form-group.floating .field-msg{ position:static; margin-top: var(--sp-2); } .error-note{ margin-top: var(--sp-6); padding: var(--sp-4) var(--sp-5); border:1px solid color-mix(in oklab, var(--clr-danger) 65%, transparent); background: color-mix(in oklab, var(--clr-danger) 18%, var(--clr-surface)); color:#fff; border-radius: var(--radius-sm); } .layout > aside.panel{ position:sticky; top: clamp(16px, 4vh, 48px); align-self:start; } .layout > aside .hdr{ margin-top:0; } .layout > aside p{ color:var(--clr-text-muted); } .import-wrap { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: var(--sp-8); width: 33vw; margin: 0 auto; } .import-hdr { align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-6); width: 100%; } .import-hdr h2 { margin-bottom: var(--sp-6); } .muted { color: var(--clr-text-muted); margin-top: var(--sp-6); } .info { color: var(--clr-text-muted); margin-top: var(--sp-3); } .spinner{ width: 44px; height: 44px; border-radius: 50%; border: 4px solid color-mix(in oklab, var(--clr-border) 60%, transparent); border-top-color: var(--clr-primary); background: transparent; animation: import-spin 1s linear infinite; flex: 0 0 auto; } @keyframes import-spin { to { transform: rotate(360deg); } } pre.log{ max-height: 360px; overflow: auto; padding: var(--sp-5); margin-top: var(--sp-4); background: color-mix(in oklab, var(--grey-900) 85%, var(--clr-bg)); color: var(--clr-on-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); font-family: var(--ff-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace); font-size: var(--type-p); line-height: var(--lh-base); white-space: pre-wrap; word-break: break-word; } .import-summary{ display:none; margin-top: var(--sp-5); padding: var(--sp-5); border: 1px solid var(--clr-border); border-radius: var(--radius-sm); background: color-mix(in oklab, var(--clr-surface-alt) 70%, transparent); display:grid; gap: var(--sp-2); font-size: var(--type-p); } .ok { color: var(--clr-success); } .warn { color: #f1b24a; } .err { color: var(--clr-danger); } .import-actions, .import-wrap > .actions { margin-top: var(--sp-6); display:flex; gap: var(--sp-4); justify-content: flex-end; align-items: center; } .import-progress{ margin-top: var(--sp-4); background: var(--grey-800); border: 1px solid var(--clr-border); border-radius: var(--radius-sm); height: 10px; overflow: hidden; } .import-progress > .fill{ height: 100%; width: 0%; background: linear-gradient(90deg, var(--clr-primary), #ff5ccc); transition: width var(--dur-fast) var(--easing); } .import-wrap a:focus-visible{ outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); } .admin-dashboard-body { background-color: var(--clr-bg); } .page-main-admin { margin: 0 auto; padding: var(--sp-4) var(--container-gutter) var(--sp-12); } .page-inner { max-width: 100%; margin: 0 auto; } .page-header { margin-bottom: var(--sp-8); } .page-title { margin-bottom: var(--sp-2); } .page-subtitle { color: var(--clr-text-muted); font-size: var(--type-p); } .admin-grid { margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); align-items: stretch; } .stat-card-admin { height: 100%; } .stat-card-admin .card-body { display: flex; flex-direction: column; align-items: flex-start; padding: var(--sp-5) var(--sp-5) var(--sp-5); row-gap: var(--sp-4); } .admin-card-image { width: 100%; border-radius: var(--radius-lg); overflow: hidden; background: var(--grey-800); } .admin-card-image img { display: block; width: 100%; height: 200px; object-fit: cover; } .stat-card-admin .stat-main { width: 100%; } .stat-card-admin .stat-main .stat-label { margin-top: 0; font-size: var(--type-p); color: var(--clr-text-muted); } .admin-card-actions { margin-top: 0; width: 100%; } .admin-card-actions .admin-card-button { width: 100%; } .admin-top-logo { width: 90%; margin: 0 auto var(--sp-6); padding-top: var(--sp-4); display: flex; align-items: center; } .admin-logo-link { display: inline-block; } .admin-logo-img { height: 42px; width: auto; } .admin-card-actions { display: flex; flex-direction: column; gap: var(--sp-2); width: 100%; } .admin-quick-action { display: flex; align-items: center; gap: var(--sp-2); } .admin-quick-action .material-icons-outlined { font-size: 20px; } .auth-body { background: var(--grey-900); color: var(--clr-text); min-height: 100vh; display: flex; } .auth-shell { flex: 1; display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; } .auth-left { position: relative; background: var(--clr-surface); border-right: 1px solid var(--clr-border); display: flex; flex-direction: column; padding-inline: var(--sp-8); padding-block: var(--sp-6); } .auth-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); margin-bottom: var(--sp-8); } .auth-logo-group { display: inline-flex; align-items: center; gap: var(--sp-3); } .auth-logo-mark { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 2px solid var(--clr-primary); display: grid; place-items: center; font-family: var(--ff-heading); font-size: var(--type-p); } .auth-logo-text { font-family: var(--ff-heading); font-size: var(--type-p); letter-spacing: 0.08em; text-transform: uppercase; } .auth-logo-text span { color: var(--clr-primary); } .auth-reset-link { font-size: var(--type-p); padding-inline: var(--sp-5); padding-block: var(--sp-2); } .auth-reset-link .material-icons-outlined { font-size: 20px; color: var(--clr-primary); } .auth-main { flex: 1; display: flex; align-items: center; justify-content: center; } .auth-card { width: 100%; max-width: 360px; } .auth-title { font-family: var(--ff-heading); font-size: var(--type-lead); margin-bottom: var(--sp-6); } .auth-meta { margin-top: var(--sp-5); font-size: var(--type-p); color: var(--clr-text-muted); } .auth-meta a { font-weight: var(--fw-bold); } .auth-code-field { min-width: 0; margin: 0 0 18px; padding: 0; border: 0; } .auth-code-label { display: block; margin: 0 0 8px; padding: 0; color: var(--clr-text-muted); font-size: var(--type-field-label); font-weight: var(--fw-regular); line-height: 1.4; } .auth-code-group { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; width: 100%; } .auth-code-group .auth-code-digit { width: 100%; min-width: 0; height: 54px; margin: 0; padding: 0; border: 1px solid var(--clr-border); border-radius: var(--radius-sm); background: var(--clr-field); color: var(--clr-text); caret-color: var(--clr-primary); font-family: var(--ff-body); font-size: 1.125rem; font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); line-height: 1; text-align: center; } .auth-code-group .auth-code-digit:focus { border-color: var(--clr-primary); outline: 0; box-shadow: var(--shadow-focus); } .auth-code-field.is-invalid .auth-code-digit { border-color: var(--clr-danger); } .auth-code-error { display: none; margin: 8px 0 0; color: var(--clr-text); font-size: var(--type-note); line-height: var(--type-line-note); } .auth-code-field.is-invalid .auth-code-error { display: block; } .btn-full { width: 100%; min-width: 0; } .auth-right { position: relative; overflow: hidden; background-image: url("../images/site/backgrounds/auth-bg.jpg"); background-size: cover; background-position: center; } .auth-right::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.75) 30%, rgba(0,0,0,0.8) 100% ); mix-blend-mode: multiply; } .auth-right-inner { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-inline: var(--sp-12); padding-block: var(--sp-8); } .auth-hero-tag { font-size: var(--type-p); letter-spacing: 0.22em; text-transform: uppercase; color: var(--clr-text-muted); margin-bottom: var(--sp-4); } .auth-hero-title { font-family: var(--ff-heading); font-size: var(--type-display); line-height: 1.05; text-transform: uppercase; } .auth-hero-title .accent { color: var(--clr-primary); } .auth-hero-title .dot { color: var(--clr-primary); } .auth-hero-copy { margin-top: var(--sp-4); max-width: 360px; font-size: var(--type-p); color: var(--clr-text-muted); } .auth-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient( to bottom, rgba(255,255,255,0.4), rgba(255,255,255,0.02) ); pointer-events: none; } @media (max-width: 768px) { .auth-body { display: block; min-height: 100vh; min-height: 100dvh; } .auth-shell { display: block; min-height: 100vh; min-height: 100dvh; } .auth-left { width: 100%; min-height: 100vh; min-height: 100dvh; padding: max(20px, env(safe-area-inset-top, 0px)) 20px max(24px, env(safe-area-inset-bottom, 0px)); border-right: 0; } .auth-header { gap: var(--sp-4); margin-bottom: 0; } .auth-main { align-items: flex-start; padding: clamp(44px, 10vh, 84px) 0 32px; } .auth-card { max-width: 420px; margin-inline: auto; } .auth-title { font-size: var(--type-section-title) !important; line-height: var(--type-line-heading) !important; } .auth-right, .auth-divider { display: none; } } .alert-bar { position: fixed; top: 60px; left: 0; right: 0; z-index: 999999999; padding-inline: var(--container-gutter); padding-block: var(--sp-3); background: color-mix(in oklab, var(--grey-800) 85%, transparent); box-shadow: 0 4px 16px rgba(0,0,0,0.45); height: 60px; } .alert-bar-inner { max-width: 100%; margin: 0 auto; display: flex; align-items: center; gap: var(--sp-3); font-size: var(--type-p); color: var(--clr-on-surface); } .alert-bar-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .alert-bar-icon .material-icons-outlined { font-size: 20px; } .alert-bar-message { flex: 1 1 auto; } .alert-bar-close { all: unset; cursor: pointer; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,0.25); background: rgba(0,0,0,0.25); transition: background-color var(--dur-fast) var(--easing), border-color var(--dur-fast) var(--easing), transform var(--dur-quick) var(--easing); } .alert-bar-close .material-icons-outlined { font-size: 20px; } .alert-bar-close:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.7); transform: translateY(-1px); text-decoration: none !important; } .alert-bar--success { background: var(--clr-success); border-bottom: 2px solid var(--clr-success-border); border-top: 2px solid var(--clr-success-border); color: #ffffff; } .alert-bar--error { background: var(--clr-danger); border-bottom: 2px solid var(--clr-danger-border); border-top: 2px solid var(--clr-danger-border); color: #ffffff; } .spoolup-footer{ background:#2a2a2a; border-top:1px solid rgba(255,255,255,0.08); color:#fff; padding:0; } .spoolup-footer .mk-container{ width:100%; } .spoolup-footer__inner{ width:100%; display:flex; flex-direction:column; } .spoolup-footer__grid{ display:grid; grid-template-columns:repeat(4, 1fr) 1.35fr; row-gap:32px; column-gap:40px; align-items:start; padding:60px 0; } .spoolup-footer__brand, .spoolup-footer__col{ min-width:0; } .spoolup-footer__logo{ display:inline-block; text-decoration:none; } .spoolup-footer__logo img{ height:28px; width:auto; display:block; opacity:0.95; } .spoolup-footer__tagline{ margin:16px 0 0; font-size:var(--type-p); line-height:1.7; opacity:0.82; max-width:360px; color:#fff; } .spoolup-footer__meta{ margin-top:18px; display:grid; gap:10px; } .spoolup-footer__meta-row{ display:flex; align-items:flex-start; gap:10px; font-size:var(--type-note); line-height:1.5; opacity:0.9; color:#fff; } .spoolup-footer__meta-row .material-icons-outlined{ font-size:18px; opacity:0.7; flex:0 0 auto; } .spoolup-footer__meta-row a{ color:#fff; text-decoration:none; opacity:0.9; } .spoolup-footer__meta-row a:hover{ text-decoration:underline; opacity:1; } .spoolup-footer__title{ margin:0 0 34px; font-size:var(--type-lead); line-height:1.3; color:#fff; } .spoolup-footer__links{ list-style:none; margin:0; padding:0; display:grid; gap:10px; } .spoolup-footer__links li{ margin:0; padding:0; } .spoolup-footer__links a{ text-decoration:none; font-size:var(--type-p); line-height:1.6; color:rgba(255,255,255,0.82); transition:color .2s ease, opacity .2s ease; } .spoolup-footer__links a:hover{ color:var(--clr-primary); opacity:1; } .spoolup-footer__links--articles{ gap:12px; } .spoolup-footer__col--articles{ display:flex; flex-direction:column; } .spoolup-footer__articles-wrap{ display:flex; flex-direction:column; height:100%; min-height:220px; } .spoolup-footer__view-all{ margin-top:auto; padding-top:16px; font-size:var(--type-note); text-decoration:none; color:rgba(255,255,255,0.75); } @media (min-width:1025px){ .spoolup-footer__links{ gap:0; } .spoolup-footer__links li:first-child, .spoolup-footer__links li + li{ border-top:1px solid rgba(255,255,255,0.10); } .spoolup-footer__links a{ display:block; padding:10px 0; } .spoolup-footer__view-all{ padding:10px 0; border-top:1px solid rgba(255,255,255,0.10); } } .spoolup-footer__view-all:hover{ color:var(--clr-primary); text-decoration:underline; } .spoolup-footer__cta{ margin-top:22px; } .spoolup-footer__cta .btn{ display:inline-flex; align-items:center; gap:8px; } .spoolup-footer__cta .material-icons-outlined{ font-size:18px; } .spoolup-footer__bottom{ position:relative; background:#222; display:flex; align-items:center; justify-content:flex-start; min-height:78px; padding:20px; width:100%; } .spoolup-footer__bottom-logo{ display:inline-flex; align-items:center; flex:0 0 auto; text-decoration:none; } .spoolup-footer__bottom-logo img{ height:24px; width:auto; display:block; opacity:0.95; } .spoolup-footer__bottom-copy{ position:absolute; left:50%; transform:translateX(-50%); margin:0; font-size:var(--type-note); line-height:1.5; opacity:0.72; color:#fff; text-align:center; white-space:nowrap; } .spoolup-footer__small{ font-size:var(--type-note); line-height:1.5; opacity:0.72; color:#fff; } .spoolup-footer__small a{ color:inherit; text-decoration:none; } .spoolup-footer__small a:hover{ color:var(--clr-primary); text-decoration:underline; } .spoolup-footer__small--right{ text-align:right; } .spoolup-footer__sep{ margin:0 8px; opacity:0.45; } .subnav, .subnav-inner, .subnav-left, .subnav-main{ overflow: visible; } .subnav-dd{ position: relative; display: inline-flex; align-items: center; } .subnav-dd-caret{ margin-left: 6px; font-size: 20px; line-height: 1; opacity: 0.85; cursor: pointer; user-select: none; transition: transform 140ms ease; } .subnav-dd-caret:focus{ outline: 2px solid rgba(255,255,255,0.25); outline-offset: 3px; border-radius: 999px; } .subnav-dd-menu{ position: absolute; top: 100%; left: 0; z-index: 2147483647; min-width: 260px; padding: 12px; border: 1px solid rgba(255,255,255,0.14); background: rgba(20,20,20,0.98); box-shadow: 0 16px 40px rgba(0,0,0,0.45); display: none; } .subnav-dd:hover .subnav-dd-menu{ display: block; } .subnav-dd:hover .subnav-dd-caret{ transform: rotate(180deg); } .subnav-dd-item{ display: flex; align-items: center; gap: 16px; padding: 16px; text-decoration: none; color: inherit; } .subnav-dd-item:hover{ background: rgba(255,255,255,0.06); text-decoration: none; color: var(--clr-primary); } .subnav-dd-item .material-icons-outlined{ font-size: 20px; line-height: 1; opacity: 0.9; } .su-card, .su-data-panel, .su-listing-card{ min-width: 0; border: 1px solid var(--clr-border); border-radius: var(--radius-lg); background: var(--clr-surface); box-shadow: var(--card-shadow); overflow: hidden; } .su-data-panel{ padding: 0; } .su-data-panel > .su-data-panel__header{ display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-height: 0; margin: 0; padding: var(--sp-5); border: 0; border-bottom: 1px solid var(--clr-border); border-radius: 0; background: var(--clr-surface-alt); text-align: left; } .su-data-panel .su-data-panel__heading, .su-data-panel > .su-data-panel__header > .left, .su-data-panel > .su-data-panel__header > .right{ display: flex; align-items: center; gap: 10px; min-width: 0; } .su-data-panel .su-data-panel__heading, .su-data-panel > .su-data-panel__header > .left{ flex: 1 1 auto; } .su-data-panel > .su-data-panel__header > .right{ flex: 0 0 auto; margin-left: auto; } .su-data-panel > .su-data-panel__header h3, .su-data-panel > .su-data-panel__header .title{ width: auto; margin: 0; color: var(--clr-text); text-align: left; } .su-data-panel .su-data-panel__meta, .su-data-panel > .su-data-panel__header .dash-count{ margin: 0; color: var(--clr-text-muted); font-size: var(--type-note); font-weight: var(--fw-regular); line-height: var(--type-line-note); white-space: nowrap; } .su-data-panel > .su-data-panel__body{ display: block; min-width: 0; padding: var(--sp-5); background: var(--clr-surface); } .su-data-panel .su-data-panel__scroll{ --su-table-scrollbar-thumb: #1d1d1d; --su-table-scrollbar-track: transparent; display: block; width: 100%; max-width: 100%; min-width: 0; margin: 0; padding: 0 0 8px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: #1d1d1d transparent; -webkit-overflow-scrolling: touch; } .su-data-panel .su-data-panel__scroll::-webkit-scrollbar{ width: var(--su-scrollbar-size, 6px); height: var(--su-scrollbar-size, 6px); background: transparent !important; } .su-data-panel .su-data-panel__scroll::-webkit-scrollbar-track{ background: transparent !important; box-shadow: none !important; } .su-data-panel .su-data-panel__scroll::-webkit-scrollbar-thumb{ border: 0 !important; border-radius: var(--su-scrollbar-radius, 999px); background: #1d1d1d !important; background-color: #1d1d1d !important; box-shadow: none !important; } .su-data-panel .su-data-panel__scroll::-webkit-scrollbar-button{ display: none; width: 0; height: 0; } .su-data-panel .su-data-table{ display: table; width: max-content; min-width: max(760px, 100%); border: 0; border-collapse: collapse; border-spacing: 0; background: transparent; color: var(--clr-text); table-layout: auto; } .su-data-panel .su-data-table thead{ display: table-header-group; } .su-data-panel .su-data-table tbody{ display: table-row-group; } .su-data-panel .su-data-table tr{ display: table-row; background: transparent; } .su-data-panel .su-data-table th, .su-data-panel .su-data-table td{ display: table-cell; min-width: 110px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--clr-border); color: var(--clr-text-muted); font-size: var(--type-p); line-height: var(--type-line-p); text-align: left; vertical-align: top; white-space: nowrap; } .su-data-panel .su-data-table th{ background: var(--grey-700, #3d3d3d); color: var(--clr-text); font-weight: var(--fw-bold); } .su-data-panel .su-data-table :is(th, td):first-child{ padding-left: 12px; } .su-data-panel .su-data-table :is(th, td):last-child{ padding-right: 12px; } .su-data-panel .su-data-table td.is-title, .su-data-panel .su-data-table td:first-child{ color: var(--clr-text); font-weight: var(--fw-bold); } .su-data-panel .su-data-table tr:last-child td{ border-bottom: 0; } .su-data-panel .su-data-panel__swipe-hint{ display: none; align-items: center; justify-content: center; width: 34px; height: 34px; margin-left: auto; border: 1px solid color-mix(in srgb, var(--clr-primary) 56%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--clr-primary) 18%, var(--clr-surface-alt)); color: var(--clr-primary); flex: 0 0 34px; } .su-data-panel .su-data-panel__swipe-hint .material-icons-outlined, .su-data-panel .su-data-panel__swipe-hint .material-symbols-outlined{ color: currentColor !important; font-size: 19px !important; line-height: 1 !important; } .mk-table-scroll:not(.su-data-panel__scroll){ width: 100%; overflow-x: auto; } .mk-data-table:not(.su-data-table){ width: 100%; min-width: 760px; border-collapse: collapse; color: rgba(255,255,255,0.78); font-size: var(--type-p); table-layout: fixed; } .mk-data-table:not(.su-data-table) th, .mk-data-table:not(.su-data-table) td{ padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); text-align: left; vertical-align: top; overflow-wrap: anywhere; word-break: break-word; } .mk-data-table:not(.su-data-table) th{ color: rgba(255,255,255,0.52); font-size: var(--type-p); font-weight: var(--fw-regular); letter-spacing: .04em; white-space: normal; } .mk-data-table:not(.su-data-table) td{ color: rgba(255,255,255,0.82); white-space: normal; } .mk-data-table:not(.su-data-table) tbody tr:hover td{ color: rgba(255,255,255,0.92); } .mk-data-table:not(.su-data-table) :is(th, td).mk-col-tight{ width: 110px; white-space: nowrap; } .mk-data-table:not(.su-data-table) :is(th, td):last-child{ text-align: right; } .su-listing-card{ display: grid; grid-template-rows: auto 1fr auto; min-height: 100%; } .su-listing-card__media{ position: relative; overflow: hidden; background-color: var(--clr-bg); background-position: center; background-repeat: no-repeat; } .su-listing-card__body{ display: grid; flex: 1 1 auto; gap: var(--sp-4); padding: var(--sp-5); } .su-listing-card__actions{ display: grid; gap: 10px; margin-top: auto; } .mk-status-label{ display: inline-flex; align-items: center; gap: 0.4rem; width: fit-content; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--clr-text-muted); box-shadow: none; font-size: var(--type-badge); font-weight: var(--fw-bold); line-height: var(--type-line-note); letter-spacing: 0.025em; pointer-events: none; } .mk-status-label::before{ content: ""; display: block; flex: 0 0 1rem; width: 1rem; height: 1rem; background: var(--clr-primary); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } .mk-status-label--beta::before{ -webkit-mask-image: url("../icons/material-symbols-outlined-wght200/new_releases.svg"); mask-image: url("../icons/material-symbols-outlined-wght200/new_releases.svg"); } .mk-status-label--coming-soon::before{ -webkit-mask-image: url("../icons/material-symbols-outlined-wght200/schedule.svg"); mask-image: url("../icons/material-symbols-outlined-wght200/schedule.svg"); } @media (max-width: 860px){ .su-data-panel > .su-data-panel__header, .su-data-panel > .su-data-panel__body{ padding: var(--sp-4); } .su-data-panel .su-data-panel__swipe-hint{ display: inline-flex; } .su-data-panel .su-data-table th:first-child, .su-data-panel .su-data-table td:first-child{ min-width: 220px; } .su-listing-card__body{ padding: var(--sp-4); } } :root{ --su-scrollbar-thumb: #1d1d1d; --su-scrollbar-track: transparent; --su-scrollbar-size: 6px; --su-scrollbar-radius: 999px; } .su-scrollbar{ overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--su-scrollbar-thumb) var(--su-scrollbar-track); } .su-scrollbar::-webkit-scrollbar{ width: var(--su-scrollbar-size); background: var(--su-scrollbar-track); } .su-scrollbar::-webkit-scrollbar-track{ background: var(--su-scrollbar-track); } .su-scrollbar::-webkit-scrollbar-thumb{ background-color: var(--su-scrollbar-thumb); border-radius: var(--su-scrollbar-radius); } .su-scrollbar::-webkit-scrollbar-thumb:hover{ background-color: var(--su-scrollbar-thumb); } .su-scrollbar--no-buttons::-webkit-scrollbar-button{ width: 0; height: 0; display: none; } :where( .mk-table-scroll, .mk-data-table-wrap, .client-record-table-wrap, .dash-table-wrap, .mini-table-wrap, body.has-subnav [class*="table-wrap"], body.has-subnav .admin-table-scroll, body.has-subnav .specs-grid ){ --su-table-scrollbar-thumb: var(--su-scrollbar-thumb); --su-table-scrollbar-track: var(--su-scrollbar-track); overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: var(--su-table-scrollbar-thumb) var(--su-table-scrollbar-track); } :where( .mk-table-scroll, .mk-data-table-wrap, .client-record-table-wrap, .dash-table-wrap, .mini-table-wrap, body.has-subnav [class*="table-wrap"], body.has-subnav .admin-table-scroll, body.has-subnav .specs-grid )::-webkit-scrollbar{ width: var(--su-scrollbar-size); height: var(--su-scrollbar-size); background: var(--su-table-scrollbar-track); } :where( .mk-table-scroll, .mk-data-table-wrap, .client-record-table-wrap, .dash-table-wrap, .mini-table-wrap, body.has-subnav [class*="table-wrap"], body.has-subnav .admin-table-scroll, body.has-subnav .specs-grid )::-webkit-scrollbar-track{ background: var(--su-table-scrollbar-track); } :where( .mk-table-scroll, .mk-data-table-wrap, .client-record-table-wrap, .dash-table-wrap, .mini-table-wrap, body.has-subnav [class*="table-wrap"], body.has-subnav .admin-table-scroll, body.has-subnav .specs-grid )::-webkit-scrollbar-thumb{ background-color: var(--su-table-scrollbar-thumb); border-radius: var(--su-scrollbar-radius); } :where( .mk-table-scroll, .mk-data-table-wrap, .client-record-table-wrap, .dash-table-wrap, .mini-table-wrap, body.has-subnav [class*="table-wrap"], body.has-subnav .admin-table-scroll, body.has-subnav .specs-grid )::-webkit-scrollbar-button{ width: 0; height: 0; display: none; } .mk-table-swipe-hint{ display: none; } @media (max-width: 1200px){ body.client-record-marketplace-page .mk-table-swipe-hint{ display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0 0 10px auto; padding: 0; border: 1px solid color-mix(in srgb, var(--clr-primary) 56%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--clr-primary) 18%, var(--clr-surface-alt)); color: var(--clr-primary); flex: 0 0 34px; pointer-events: none; } body.client-record-marketplace-page .mk-table-swipe-hint--header{ margin: 0 0 0 auto; } body.client-record-marketplace-page .mk-table-swipe-hint[hidden], body.client-record-marketplace-page .mk-table-swipe-hint.is-dismissed{ display: none !important; } body.client-record-marketplace-page .mk-table-swipe-hint .material-icons-outlined, body.client-record-marketplace-page .mk-table-swipe-hint .material-symbols-outlined{ width: 19px; height: 19px; color: currentColor !important; font-size: 19px !important; line-height: 1 !important; } } .su-scrollbar--buttons::-webkit-scrollbar-button{ background-color: var(--su-scrollbar-thumb); width: var(--su-scrollbar-size); height: var(--su-scrollbar-size); } .su-scrollbar-gutter{ padding-right: 15px; margin-right: -5px; } .su-scrollbar-stable{ scrollbar-gutter: stable; } body.modal-open{ overflow:hidden; } .su-modal-backdrop{ position:fixed; inset:0; background: rgba(0,0,0,.68); display:none; align-items:center; justify-content:center; padding: clamp(16px, 3vw, 28px); z-index: 9999; } .su-modal{ width: min(980px, 100%); max-height: calc(100vh - 40px); margin: 0 auto; border-radius: 8px; overflow:hidden; border: 1px solid rgba(255,255,255,.10); background: var(--clr-surface); box-shadow: 0 26px 80px rgba(0,0,0,.55); display:flex; flex-direction:column; } .su-modal .card-bar{ border-bottom: 1px solid rgba(255,255,255,.08); } .su-modal .card-bar .card-bar-main{ width:100%; display:flex; align-items:center; justify-content:space-between; gap: var(--sp-3); } .su-modal .card-body{ display:block !important; width:100% !important; max-width:none !important; margin:0 !important; padding: clamp(16px, 2.2vw, 24px) !important; overflow:auto; box-sizing:border-box; } .su-modal .card-body > form{ width:100% !important; max-width:none !important; margin:0 !important; } .su-form-grid{ width:100%; display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items:start; } .su-form-row{ display:flex; flex-direction:column; gap: 8px; min-width: 0; } .su-form-actions{ display:flex; gap: var(--sp-3); justify-content:flex-end; align-items:center; flex-wrap:wrap; margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid rgba(255,255,255,.08); } .su-form-actions.is-split{ justify-content:space-between; } .su-mini-input, .su-mini-textarea, .su-mini-select{ width:100%; } .su-mini-textarea{ min-height:110px; resize:vertical; } .su-mini-select{ appearance:none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.75) 50%), linear-gradient(135deg, rgba(255,255,255,.75) 50%, transparent 50%); background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 12px) calc(50% - 2px); background-size: 6px 6px, 6px 6px; background-repeat:no-repeat; } .su-mini-input[type="date"]::-webkit-calendar-picker-indicator{ filter: invert(1) brightness(1.2); opacity: 1; } .mk-tip-trigger{ margin-left: 6px; font-size: 18px; line-height: 1; vertical-align: middle; color: var(--clr-primary); cursor: help; opacity: 0.95; } .mk-tip-trigger:hover{ opacity: 1; } .mk-tooltip{ position: fixed; z-index: 999999; max-width: 260px; padding: 8px 10px; border-radius: 10px; background: rgba(20,20,22,0.96); border: 1px solid rgba(255,255,255,0.14); color: rgba(255,255,255,0.92); font-size: var(--type-note); line-height: 1.35; box-shadow: 0 14px 40px rgba(0,0,0,0.45); pointer-events: none; display: none; } .apu-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 9999; } .apu-modal-overlay.is-open { display: flex; } .apu-modal { width: min(980px, 100%); max-height: 85vh; overflow: hidden; border-radius: 14px; background: var(--clr-surface, #fff); border: 1px solid var(--clr-border-subtle); box-shadow: 0 18px 60px rgba(0,0,0,0.35); display: flex; flex-direction: column; padding: 20px; } .apu-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--clr-border-subtle); } .apu-modal-title { font-weight: 650; margin: 0; } .apu-modal-body { padding: 16px 18px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #1d1d1d transparent; } .apu-modal-body::-webkit-scrollbar { width: 6px; background: transparent; } .apu-modal-body::-webkit-scrollbar-track { background: transparent; } .apu-modal-body::-webkit-scrollbar-thumb { background-color: #1d1d1d; border-radius: 999px; } .apu-modal-body::-webkit-scrollbar-thumb:hover { background-color: #1d1d1d; } .apu-modal-body::-webkit-scrollbar-button { background-color: #1d1d1d; width: 6px; height: 6px; } .apu-modal-tools { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; } #apuLibrarySearchForm.search-bar { width: 100%; } .apu-library-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .apu-library-item { border: 1px solid var(--clr-border-subtle); border-radius: 12px; background: var(--clr-surface-alt, rgba(0,0,0,0.02)); overflow: hidden; display: flex; flex-direction: column; padding: 20px; } .apu-library-title { font-weight: 650; line-height: 1.2; margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .apu-library-thumb { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--clr-surface-alt, rgba(0,0,0,0.02)); display: block; } .apu-library-meta { padding: 10px 0; display: grid; gap: 6px; } .apu-library-meta small { color: var(--clr-text-muted); line-height: 1.5; } .apu-library-actions { margin-top: auto; padding-top: 0; display: flex; justify-content: flex-end; gap: 8px; } .apu-library-actions .pill-link{ text-align: center; width: 100%; } .apu-modal-close.pill-link { border: 0; background: transparent; } .sticky-actions{ position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998; background: color-mix(in oklab, var(--clr-surface) 92%, var(--grey-900)); border-top: 1px solid var(--clr-border); box-shadow: 0 -16px 40px rgba(0,0,0,0.35); } .sticky-actions__inner{ width: 100%; display: flex; align-items: stretch; justify-content: space-between; gap: 0; padding: 0; margin: 0; } .sticky-actions__left, .sticky-actions__right{ display: flex; align-items: stretch; gap: 0; } .sticky-actions__btn{ appearance: none; border: 0; border-radius: 0; height: 60px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 22px; font-weight: 700; cursor: pointer; white-space: nowrap; } .sticky-actions__btn--secondary{ background: var(--clr-btn-secondary); color: var(--clr-text); border-right: 1px solid var(--clr-border); } .sticky-actions__btn--secondary .material-icons-outlined, .sticky-actions__btn--secondary .material-symbols-outlined{ color: inherit; } .sticky-actions__btn--secondary:hover, .sticky-actions__btn--secondary:focus, .sticky-actions__btn--secondary:active{ background: #fff !important; color: var(--clr-text-dark, #111) !important; border-color: #fff !important; text-decoration: none !important; } .sticky-actions__btn--secondary:hover *, .sticky-actions__btn--secondary:focus *, .sticky-actions__btn--secondary:active *{ color: inherit !important; } .sticky-actions__btn--primary{ background: var(--clr-primary); color: var(--clr-on-primary); border-left: 1px solid color-mix(in oklab, var(--clr-border) 70%, transparent); } .sticky-actions__link{ display: flex; align-items: center; justify-content: center; height: 60px; padding: 0 22px; text-decoration: none; color: var(--clr-text); font-weight: 700; white-space: nowrap; border-left: 1px solid color-mix(in oklab, var(--clr-border) 70%, transparent); border-right: 1px solid color-mix(in oklab, var(--clr-border) 70%, transparent); } .sticky-actions__link:hover{ background: rgba(255,255,255,0.04); } .mk-filters{ display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .mk-filters-actions{ display: flex; align-items: center; gap: 12px; } .mk-listings-chips{ width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 2px; padding-top: 8px; } .mk-filter-badge{ margin-left: 8px; min-width: 18px; height: 18px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; font-size: var(--type-meta); line-height: 1; background: rgba(252,0,186,0.22); border: 1px solid rgba(252,0,186,0.45); color: #fff; } .mk-filter-chips{ display: flex; gap: 6px; flex-wrap: wrap; } button.mk-chip{ -webkit-appearance: none; appearance: none; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.82); border-radius: 999px; font-weight: 500; letter-spacing: 0; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; margin: 0; min-width: 0; text-transform: none; } button.mk-chip .material-icons-outlined{ font-size: var(--type-p); line-height: 1; opacity: 0.85; } .mk-flyout-backdrop{ position: fixed; inset: 0; background: rgba(0,0,0,0.55); opacity: 0; pointer-events: none; transition: opacity 160ms ease; z-index: 99980 !important; } .mk-flyout{ position: fixed; top: 0; right: 0; height: 100%; width: min(460px, 92vw); background: #181818; border-left: 1px solid rgba(255,255,255,0.10); transform: translateX(100%); transition: transform 200ms ease; z-index: 99990 !important; display: flex; flex-direction: column; } .mk-flyout__head{ padding: 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.10); } .mk-flyout__title{ font-family: var(--ff-heading); color: #fff; font-size:var(--type-p); } .mk-flyout__body{ padding: 14px; overflow: auto; display: grid; gap: 14px; } .mk-filter-group{ border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.03); border-radius: var(--radius-lg); padding: 12px; } .mk-filter-group__title{ color: rgba(255,255,255,0.85); font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; } .mk-filter-group__step{ width: 24px; height: 24px; flex: 0 0 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: color-mix(in oklab, var(--clr-primary) 16%, transparent); border: 1px solid color-mix(in oklab, var(--clr-primary) 50%, transparent); color: var(--clr-primary); font-size: var(--type-note); line-height: 1; font-weight: 700; } .mk-filter-group__locked{ display: flex; align-items: center; min-height: 42px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px dashed var(--clr-border); color: var(--clr-text-muted); font-size: var(--type-meta); line-height: 1.5; } .mk-filter-group__locked[hidden]{ display: none; } .mk-filter-group.is-locked .mk-filter-group__title{ color: var(--clr-text-muted); } .mk-filter-group.is-locked .mk-filter-group__step{ border-color: var(--clr-border); background: transparent; color: var(--clr-text-muted); } .mk-filter-group.is-locked .mk-filter-group__list{ display: none; } .mk-filter-group__list{ display: grid; gap: 10px; } .mk-check{ display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.80); font-size: var(--type-p); } .mk-check input{ width: 16px; height: 16px; } .mk-flyout__foot{ margin-top: auto; padding: 14px; border-top: 1px solid rgba(255,255,255,0.10); display: flex; gap: 10px; justify-content: space-between; align-items: center; } .mk-serial-label{ display: inline-flex; align-items: center; gap: 6px; } .mk-serial-info{ position: relative; display: inline-flex; align-items: center; cursor: help; } .mk-serial-info .material-icons-outlined{ font-size: var(--type-p); color: var(--clr-primary); opacity: 0.85; } .mk-serial-info:hover .material-icons-outlined{ opacity: 1; } .subnav-burger{ display: none; width: 60px; min-width: 60px; height: 60px; padding: 0; margin: 0; border: 0; border-left: 1px solid var(--clr-border); border-radius: 0; background: transparent; color: #fff; align-items: center; justify-content: center; flex-direction: column; gap: 5px; cursor: pointer; position: relative; z-index: 1102; } .subnav-burger:hover, .subnav-burger:focus-visible{ background: rgba(0,0,0,0.22) !important; color: #fff !important; box-shadow: none !important; border-color: var(--clr-border); } .subnav-burger span{ display: block; width: 22px; height: 2px; background: #fff; border-radius: 999px; transform-origin: center; transition: transform var(--dur-fast) var(--easing), opacity var(--dur-fast) var(--easing), background-color var(--dur-fast) var(--easing); } .subnav-burger.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); } .subnav-burger.is-open span:nth-child(2){ opacity: 0; } .subnav-burger.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } .subnav-mobile-backdrop{ position: fixed; top: 60px; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.45); opacity: 0; pointer-events: none; transition: opacity 180ms ease; z-index: 1098; } .subnav-mobile-backdrop.is-open{ opacity: 1; pointer-events: auto; } .subnav-mobile-panel{ position: fixed; top: 60px; left: 0; right: 0; width: 100%; height: calc(100vh - 60px); background: #1f1f1f; transform: translateY(-16px); opacity: 0; visibility: hidden; pointer-events: none; transition: transform 220ms ease, opacity 220ms ease, visibility 220ms ease; z-index: 1099; display: flex; flex-direction: column; overflow-y: auto; } .subnav-mobile-panel.is-open{ transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; } .subnav-mobile-panel__head{ display: none; } .subnav-mobile-nav{ display: grid; gap: 0; padding: 18px 0 0; } .subnav-mobile-link{ display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 0 24px; color: #fff; text-decoration: none !important; border-bottom: 1px solid rgba(255,255,255,0.08); transition: background-color var(--dur-fast) var(--easing), color var(--dur-fast) var(--easing); } .subnav-mobile-link .material-icons-outlined{ flex: 0 0 auto; font-size: 1.25rem; line-height: 1; color: var(--clr-primary); transition: color var(--dur-fast) var(--easing); } .subnav-mobile-link:hover, .subnav-mobile-link:focus-visible{ background: rgba(255,255,255,0.06); color: #fff; text-decoration: none !important; box-shadow: none; } .subnav-mobile-link:hover .material-icons-outlined, .subnav-mobile-link:focus-visible .material-icons-outlined, .subnav-mobile-link.is-active .material-icons-outlined{ color: #fff; } .subnav-mobile-link.is-active{ background: rgba(255,255,255,0.06); } .subnav-mobile-panel__foot{ margin-top: auto; padding: 24px; border-top: 1px solid var(--clr-border); } .nav-sign-in--mobile{ width: 100%; min-width: 0; min-height: 54px; height: auto; border-radius: var(--radius); } body.subnav-menu-open{ overflow: hidden; } @media (max-width: 1024px){ body.has-subnav{ padding-top: 60px; } body.subnav-menu-open{ overflow: hidden; touch-action: none; } .subnav-inner{ display: flex; align-items: center; justify-content: space-between; min-width: 0; padding: 0 0 0 20px; } .subnav-left{ display: flex; align-items: center; justify-content: space-between; flex: 1 1 auto; min-width: 0; } .subnav-main, .subnav-actions__desktop{ display: none !important; } .subnav-actions{ display: flex; align-items: center; flex: 0 0 auto; gap: 0; } .subnav-burger{ display: inline-flex; } .subnav-mobile-backdrop[hidden], .subnav-mobile-panel[hidden]{ display: none !important; } .subnav-mobile-backdrop:not([hidden]){ display: block !important; } .subnav-mobile-panel:not([hidden]){ display: flex !important; } .subnav-mobile-backdrop{ inset: 60px 0 0; z-index: 9997; visibility: hidden; } .subnav-mobile-backdrop.is-open{ opacity: 1; visibility: visible; pointer-events: auto; } .subnav-mobile-panel{ top: 60px; z-index: 9998; height: calc(100dvh - 60px); max-height: calc(100dvh - 60px); overflow: hidden; padding-bottom: env(safe-area-inset-bottom, 0); background: var(--clr-bg); border-top: 1px solid rgba(255,255,255,0.08); box-shadow: 0 14px 32px rgba(0,0,0,0.24); } .subnav-mobile-panel.is-open{ transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; } .subnav-mobile-nav{ display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-top: 0; } .subnav-mobile-panel__foot{ position: sticky; bottom: 0; z-index: 2; flex: 0 0 auto; padding-bottom: calc(env(safe-area-inset-bottom, 0) + 12px); background: inherit; border-top: 1px solid rgba(255,255,255,0.08); } .subnav-mobile-link, .subnav-mobile-panel__foot .nav-sign-in, .subnav-mobile-panel__foot .subnav-link{ display: flex; align-items: center; min-height: 60px; height: 60px; } } @media (min-width: 993px){ .subnav-mobile-panel, .subnav-mobile-backdrop{ display: none !important; } } button:disabled, button[disabled], button[aria-disabled="true"], .btn:disabled, .btn[disabled], .btn.is-disabled, .btn[aria-disabled="true"], .pill-link.is-disabled, .pill-link[aria-disabled="true"], .mk-auth-btn:disabled, .mk-listing-card__btn.is-disabled, .btn.mk-apu-action.is-disabled, .mk-apu-action.is-disabled, .client-record-download-all.is-disabled, .mk-cookie-consent__actions .btn[aria-disabled="true"], #instantQuoteContactSellerLink.is-disabled, #instantQuoteContactSellerLink[aria-disabled="true"], #mkAuthModal .pill-link.is-disabled { background: var(--grey-800) !important; background-color: var(--grey-800) !important; border-color: var(--grey-600) !important; border-bottom-color: var(--grey-600) !important; color: var(--clr-text-muted) !important; -webkit-text-fill-color: var(--clr-text-muted) !important; opacity: 0.68 !important; filter: grayscale(0.2) !important; cursor: not-allowed !important; pointer-events: none !important; box-shadow: none !important; transform: none !important; } button:disabled .material-icons-outlined, button[disabled] .material-icons-outlined, button[aria-disabled="true"] .material-icons-outlined, .btn:disabled .material-icons-outlined, .btn[disabled] .material-icons-outlined, .btn.is-disabled .material-icons-outlined, .btn[aria-disabled="true"] .material-icons-outlined, .pill-link.is-disabled .material-icons-outlined, .pill-link[aria-disabled="true"] .material-icons-outlined, .client-record-download-all.is-disabled .material-icons-outlined, #instantQuoteContactSellerLink.is-disabled .material-icons-outlined, #instantQuoteContactSellerLink[aria-disabled="true"] .material-icons-outlined, #mkAuthModal .pill-link.is-disabled .material-icons-outlined { color: var(--clr-text-muted) !important; -webkit-text-fill-color: var(--clr-text-muted) !important; } .client-record-download-link.is-disabled, .mk-document-download-link.is-disabled { color: var(--clr-text-muted) !important; -webkit-text-fill-color: var(--clr-text-muted) !important; opacity: 0.68 !important; filter: grayscale(0.2) !important; cursor: not-allowed !important; pointer-events: none !important; box-shadow: none !important; transform: none !important; } .client-record-download-link.is-disabled .material-icons-outlined, .mk-document-download-link.is-disabled .mk-document-download-link__icon, .mk-data-table .mk-document-download-link.is-disabled .mk-document-download-link__icon { background: var(--grey-800) !important; background-color: var(--grey-800) !important; border-color: var(--grey-600) !important; color: var(--clr-text-muted) !important; -webkit-text-fill-color: var(--clr-text-muted) !important; box-shadow: none !important; filter: none !important; } .form-group, .form-group.floating { min-width: 0; max-width: 100%; } .form-group label, .form-group.floating label, .mk-auth-label, .form-label { max-width: calc(100% - var(--sp-4)); line-height: 1.25; white-space: normal; overflow-wrap: anywhere; word-break: break-word; } .form-group.floating label { right: var(--sp-2); } .field-msg, .field-msg--success, .form-error-summary, .mk-field-live-msg, .mk-auth-help, .mk-password-checklist, .mk-password-checklist li { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; word-break: break-word; } .form-group.floating .field-msg { position: static; width: fit-content; max-width: 100%; margin-top: 6px; text-align: left; border-radius: 12px; } .form-group.floating { padding-bottom: 0; } @media (max-width: 640px) { .form-group.floating .field-msg { width: 100%; } }