/* Reset */
.winter-document {
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--winter-surface);
}

@media (min-width: 1200px) {
    .winter-template .container,
    .winter-template .container-lg,
    .winter-template .container-md,
    .winter-template .container-sm,
    .winter-template .container-xl {
        max-width: 1250px;
    }
}

.winter-template a,
.winter-template a:hover,
.winter-template a:active {
    text-decoration: none;
    background-color: transparent;
}

.winter-template h1,
.winter-template h2,
.winter-template h3,
.winter-template h4,
.winter-template h5,
.winter-template h6 {
    margin-top: 0;
    margin-bottom: 16px;
}

.winter-template .h1,
.winter-template .h2,
.winter-template .h3,
.winter-template .h4,
.winter-template .h5,
.winter-template .h6,
.winter-template h1,
.winter-template h2,
.winter-template h3,
.winter-template h4,
.winter-template h5,
.winter-template h6 {
    color: #17191c;
}

.winter-template .btn,
.winter-template input[type=button]:not(.btn),
.winter-template input[type=submit]:not(.btn) {
    display: inline-flex;
    height: 44px;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
    font-weight: var(--winter-font-weight-action);
    font-family: var(--winter-font-sans);
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    outline: none;
    user-select: none;
    background-color: transparent;
    padding: 8px 16px;
    font-size: var(--winter-font-size-body);
    line-height: var(--winter-line-height-body);
    transition: .24s ease;
}

.winter-template .btn.disabled,
.winter-template .btn:disabled {
    color: #acb0b9;
    background-color: #f7f7f8;
    border-color: transparent;
}

.winter-template .badge-primary {
    color: #FFF;
    background-color: #1062fe;
}

.winter-template .btn-group-lg > .btn,
.winter-template .btn-lg {
    height: 52px;
    padding: 8px 24px;
    font-size: var(--winter-font-size-control-lg);
    line-height: var(--winter-line-height-control-lg);
    border-radius: 4px;
    font-weight: var(--winter-font-weight-action);
    justify-content: center;
    align-items: center;
}

.winter-template .form-control,
.winter-template input[type=password]:not(.form-control),
.winter-template input[type=text]:not(.form-control),
.winter-template select:not(.form-control) {
    display: block;
    width: 100%;
    height: 44px;
    padding: 8px 16px;
    font-size: var(--winter-font-size-body);
    font-weight: var(--winter-font-weight-body);
    line-height: var(--winter-line-height-body);
    background: #FFF;
    background-clip: padding-box;
    border: 1px solid #DEE0E3;
    transition: border-color .24s ease, box-shadow .24s ease, background .24s ease;
}

.winter-template label {
    max-width: 100%;
    margin-bottom:  8px;
    color: #5E636E;
    font-size: var(--winter-font-size-body);
    font-weight: var(--winter-font-weight-body);
}

/*
* Sidebar
*/
#winterSidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 140px;
    z-index: 1000;
    transition: transform 0.24s;
    transform: translateX(calc(-1*140px));
    overflow-y: auto;
    overflow-x: hidden;
}

@media (min-width: 992px) {
    #winterSidebar {
        transform: none;
    }
    .overlay {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    .main-sidebar-open #winterSidebar {
        transform: translateX(0);
    }
}

.main-sidebar-sticky {
    position: relative;
    top: 0;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
    background-color: #1d2b40;
}

#winterSidebar .nav-link {
    /* font-weight: 500; */
    color: hsla(0, 0%, 100%, 80%);
    font-size: 1rem;
    text-align: center;
    padding: 16px;
}

#winterSidebar .nav-link.active
{
    color: #FFF;
    background-color: hsla(0, 0%, 100%, 6%);
}
#winterSidebar .nav-link:hover{
    color: #FFF;
}


/* 遮罩 */
.overflow-x-hidden {
    overflow-x: hidden !important;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(23, 25, 28, .34);
    z-index: 999;
    display: none;
}

/*
* 主体
*/
.winter-template main {
    display: flex;
    position: relative;
    margin-left: 0;
    min-height: 100vh;
    min-width: 0;
    flex-direction: column;
    transform: translateX(0);
    transition: transform 0.24s ease;
}

@media (min-width: 992px) {
    .winter-template main {
        margin-left: 140px;
        /* Use the document's available width so the vertical scrollbar is not
         * counted twice and the right edge cannot be clipped by overflow-x. */
        width: calc(100% - 140px);
        transform: none;
    }
}

@media (max-width: 991.98px) {
    .winter-template main {
        width: 100%;
        max-width: 100%;
    }

}

/* 注册页面 */
.registerpage {
    max-width: 768px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: calc(4 * 8px);
    border: 1px solid #E9EAEC;
    border-radius: 6px;
}

.registerpage .section{
    margin-bottom: calc(4 * 8px);
}

.winter-register-title {
    margin-bottom: 32px;
}

#registration .field, #registration .form-control,
#registration .prepend-icon .field-icon{
    height: 44px;
    line-height: 44px;
}

#registration .field, #registration .form-control{
    border: 1px solid #DEE0E3
}

#registration select.field.form-control {
    line-height: var(--winter-line-height-body);
}

.feather {
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
}

/* Winter design foundation */
:root {
    --winter-primary: #1062fe;
    --winter-primary-hover: #0754e8;
    --winter-heading: #17191c;
    --winter-text: #5e636e;
    --winter-muted: #656d79;
    --winter-border: #efeff1;
    --winter-input-border: #dee0e3;
    --winter-surface: #ffffff;
    --winter-surface-muted: #f7f7f8;
    --winter-sidebar: #1d2b40;
    --winter-radius: 6px;
    --winter-button-radius: 3px;
    --winter-shadow-soft: 0 8px 28px rgba(23, 25, 28, .045);
    /* Match the production Lagom fallback stack for CJK glyph metrics as well. */
    --winter-font-sans: Roboto, sans-serif;
    --winter-font-weight-body: 400;
    --winter-font-weight-action: 500;
    --winter-font-weight-page: 900;
    --winter-font-weight-display: 300;
    --winter-font-size-page: 40px;
    --winter-line-height-page: 52px;
    --winter-font-size-section: 26px;
    --winter-line-height-section: 34px;
    --winter-font-size-panel: 20px;
    --winter-line-height-panel: 28px;
    --winter-font-size-control-lg: 17px;
    --winter-line-height-control-lg: 28px;
    --winter-font-size-body: 14px;
    --winter-line-height-body: 24px;
    --winter-font-size-meta: 13px;
    --winter-line-height-meta: 20px;
    --winter-line-height-meta-flow: 24px;
    --winter-font-size-caption: 12px;
    --winter-line-height-caption: 18px;
    --winter-font-size-stat: 62px;
    --winter-line-height-stat: 62px;
}

body.winter-template {
    color: var(--winter-text);
    background: var(--winter-surface);
    font-family: var(--winter-font-sans);
    font-size: var(--winter-font-size-body);
    font-weight: var(--winter-font-weight-body);
    line-height: var(--winter-line-height-body);
    -webkit-font-smoothing: antialiased;
}

.winter-template a,
.winter-template a:hover,
.winter-template a:active {
    color: var(--winter-primary);
}

.winter-template a:focus,
.winter-template button:focus {
    outline: none !important;
    box-shadow: none !important;
}

html.winter-keyboard-focus .winter-template a:focus,
html.winter-keyboard-focus .winter-template button:focus {
    outline: 3px solid rgba(16, 98, 254, .22) !important;
    outline-offset: 2px;
}

.winter-template input:focus-visible,
.winter-template select:focus-visible,
.winter-template textarea:focus-visible {
    outline: 3px solid rgba(16, 98, 254, .22);
    outline-offset: 2px;
}

.winter-template tr[data-winter-row-url],
.winter-template tr[data-winter-popup-url] {
    cursor: pointer;
}

.winter-template .winter-table-row-link {
    color: inherit;
    text-decoration: none;
}

.winter-template .winter-table-row-link:hover {
    color: var(--winter-primary);
    text-decoration: underline;
}

.winter-template .btn {
    gap: 6px;
    border-radius: var(--winter-button-radius);
    box-shadow: none;
}

.winter-template input[type=button]:not(.btn),
.winter-template input[type=submit]:not(.btn) {
    border-radius: var(--winter-button-radius);
}

.winter-template .btn-primary {
    color: #fff;
    background: var(--winter-primary);
    border-color: var(--winter-primary);
}

.winter-template .btn-primary.focus,
.winter-template .btn-primary:hover,
.winter-template .btn-primary:focus,
.winter-template .btn-primary:not(:disabled):not(.disabled):active {
    color: #fff;
    background: var(--winter-primary-hover);
    border-color: var(--winter-primary-hover);
}

/*
 * Twenty-One applies w-hidden to inactive state controls. Keep that utility
 * stronger than Winter's inline-flex button display so mutually exclusive
 * actions cannot appear together.
 */
.winter-template .w-hidden {
    display: none;
}

.winter-template .btn-default,
.winter-template .btn-light,
.winter-template .btn-outline-primary {
    color: var(--winter-heading);
    background: #fff;
    border-color: var(--winter-input-border);
}

.winter-template .btn-default:hover,
.winter-template .btn-light:hover,
.winter-template .btn-outline-primary:hover {
    color: var(--winter-primary);
    background: #f8faff;
    border-color: #a9c4ff;
}

/*
 * The inherited security page exposes its current 2FA action as Bootstrap's
 * semantic success/danger variants. Present either state with Winter's shared
 * primary action treatment; the disable modal keeps its native danger submit.
 */
.winter-page-user-security .twofa-config-link.btn-success,
.winter-page-user-security .twofa-config-link.btn-danger {
    color: #fff;
    background: var(--winter-primary);
    border-color: var(--winter-primary);
}

.winter-page-user-security .twofa-config-link.btn-success:hover,
.winter-page-user-security .twofa-config-link.btn-success:focus,
.winter-page-user-security .twofa-config-link.btn-success:active,
.winter-page-user-security .twofa-config-link.btn-danger:hover,
.winter-page-user-security .twofa-config-link.btn-danger:focus,
.winter-page-user-security .twofa-config-link.btn-danger:active {
    color: #fff;
    background: var(--winter-primary-hover);
    border-color: var(--winter-primary-hover);
}

.winter-template .form-control,
.winter-template input[type=email],
.winter-template input[type=tel],
.winter-template input[type=password],
.winter-template input[type=text],
.winter-template select,
.winter-template textarea {
    color: var(--winter-heading);
    background-color: #fff;
    border-color: var(--winter-input-border);
    border-radius: 4px;
    box-shadow: none;
}

.winter-template .form-control:focus,
.winter-template input:focus,
.winter-template select:focus,
.winter-template textarea:focus {
    border-color: var(--winter-primary);
    box-shadow: 0 0 0 3px rgba(16, 98, 254, .1);
}

/* Keep native and inherited Twenty-One selection controls on Winter blue. */
.winter-template input[type="checkbox"],
.winter-template input[type="radio"] {
    accent-color: var(--winter-primary);
}

.winter-page-account-paymentmethods-manage .icheckbox_square-blue.hover:not(.disabled),
.winter-page-account-paymentmethods-manage .icheckbox_square-blue.checked:not(.disabled),
.winter-page-account-paymentmethods-manage .iradio_square-blue.hover:not(.disabled),
.winter-page-account-paymentmethods-manage .iradio_square-blue.checked:not(.disabled) {
    filter: hue-rotate(32deg) saturate(221%) brightness(93%) contrast(146%);
}

/* Match the reference payment-method form: stack the type label and choices. */
.winter-page-account-paymentmethods-manage #frmManagePaymentMethod > .form-group.row {
    display: block;
    margin-right: 0;
    margin-left: 0;
}

.winter-page-account-paymentmethods-manage #frmManagePaymentMethod > .form-group.row > .control-label,
.winter-page-account-paymentmethods-manage #frmManagePaymentMethod > .form-group.row > .col-md-8 {
    width: 100%;
    max-width: none;
    padding-right: 0;
    padding-left: 0;
    flex: 0 0 100%;
}

.winter-page-account-paymentmethods-manage #frmManagePaymentMethod > .form-group.row > .control-label {
    margin-bottom: 10px;
}

.winter-page-account-paymentmethods-manage #frmManagePaymentMethod > .form-group.row .form-check-inline {
    align-items: center;
    gap: 10px;
    margin: 0 20px 8px 0;
    padding-left: 0;
}

.winter-page-account-paymentmethods-manage #frmManagePaymentMethod .fieldgroup-loading .p-4 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 0 !important;
    text-align: left !important;
}

.winter-template textarea.form-control {
    height: auto;
    min-height: 132px;
}

.winter-template .card {
    background: var(--winter-surface);
    border: 1px solid var(--winter-border);
    border-radius: var(--winter-radius);
    box-shadow: none;
}

.winter-template .card-header,
.winter-template .card-footer {
    background: #fff;
    border-color: var(--winter-border);
}

.winter-template .card-body {
    padding: 24px;
}

.winter-template .card-title {
    color: var(--winter-heading);
    font-size: var(--winter-font-size-panel);
    font-weight: var(--winter-font-weight-display);
    line-height: var(--winter-line-height-panel);
}

/*
 * Shared typography roles
 *
 * Templates should use these semantic roles instead of introducing a new
 * page-specific font size. Component selectors below consume the same tokens.
 */
.winter-type-page-title {
    font-size: var(--winter-font-size-page);
    font-weight: var(--winter-font-weight-page);
    line-height: var(--winter-line-height-page);
}

.winter-template .winter-type-section-title {
    font-size: var(--winter-font-size-section);
    font-weight: var(--winter-font-weight-display);
    line-height: var(--winter-line-height-section);
}

.winter-type-panel-title {
    font-size: var(--winter-font-size-panel);
    font-weight: var(--winter-font-weight-display);
    line-height: var(--winter-line-height-panel);
}

.winter-type-meta {
    font-size: var(--winter-font-size-meta);
    line-height: var(--winter-line-height-meta-flow);
}

.winter-type-caption {
    font-size: var(--winter-font-size-caption);
    line-height: var(--winter-line-height-caption);
}

/*
 * WHMCS and bundled Bootstrap helpers still contain relative `small`/`.label`
 * sizes. Keep reusable utility text on the Winter scale so nested markup does
 * not shrink below the 12px caption floor.
 */
.winter-template .label:not(.status) {
    font-size: var(--winter-font-size-caption);
    line-height: var(--winter-line-height-caption);
}

.winter-template .md-editor .small-font,
.winter-template .md-editor .markdown-save {
    font-size: var(--winter-font-size-caption);
    line-height: var(--winter-line-height-caption);
}

.winter-template .alert {
    border: 0;
    border-radius: var(--winter-radius);
}

/* Sidebar and top navigation */
.winter-template #winterSidebar {
    background: var(--winter-sidebar);
    box-shadow: 8px 0 30px rgba(15, 26, 43, .08);
}

.winter-template .main-sidebar-sticky {
    background: var(--winter-sidebar);
    padding-top: 20px;
}

.winter-sidebar-brand {
    margin-bottom: 22px;
}

.winter-template #winterSidebar .winter-sidebar-brand .nav-link {
    min-height: 96px;
    padding: 6px 16px 14px;
}

.winter-sidebar-brand img {
    display: block;
    width: auto;
    height: 60px;
    margin: 0 auto;
    object-fit: contain;
}

.winter-template #winterSidebar .nav-link {
    display: flex;
    min-height: 92px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 8px;
    color: rgba(255, 255, 255, .72);
    font-size: 16px;
    line-height: 24px;
    border-left: 3px solid transparent;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}

.winter-template #winterSidebar .nav-link:hover,
.winter-template #winterSidebar .nav-link:focus,
.winter-template #winterSidebar .nav-link.active {
    color: #fff;
    background: rgba(255, 255, 255, .06);
}

.winter-template #winterSidebar .nav-link.active {
    border-left-color: var(--winter-primary);
}

.winter-nav-icon {
    width: 30px;
    font-size: 25px;
    line-height: 30px;
}

.winter-template .main-top {
    position: relative;
    z-index: 990;
    align-items: center;
    height: 58px;
    padding: 10px 28px;
    background: #fff;
    border-bottom: 1px solid var(--winter-border);
}

.winter-template .main-top .navbar-toggler,
.winter-template .main-top .main-top-logo,
.winter-template .main-top .main-top-news {
    display: none;
}

.winter-template .main-top .main-top-news {
    max-width: min(680px, 55vw);
    overflow: hidden;
    color: var(--winter-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.winter-template .main-top .main-top-news .news-title {
    color: var(--winter-primary);
}

.winter-template .main-top .btn,
.winter-template .main-top .nav-link {
    color: var(--winter-muted);
}

.winter-top-actions-wrap,
.winter-top-actions {
    height: 100%;
}

.winter-top-actions {
    align-items: center;
}

.winter-template .main-top .winter-top-actions > .ml-auto {
    display: flex;
    height: 100%;
    align-items: center;
}

.winter-template .main-top .winter-top-action {
    position: relative;
    display: inline-flex;
    height: 36px;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    white-space: nowrap;
}

.winter-template .main-top .winter-top-action > i,
.winter-account-menu-icon {
    color: #acb0b9;
    font-size: 15px;
}

.winter-template .main-top .winter-top-action .badge {
    position: absolute;
    top: -3px;
    left: 18px;
    min-width: 16px;
    height: 16px;
    padding: 1px 5px;
    border-radius: 8px;
    font-size: 10px;
    line-height: 14px;
}

.winter-account-menu {
    min-width: 0;
    flex-direction: column;
    gap: 0;
    line-height: 20px;
}

.winter-account-menu strong,
.winter-account-menu small {
    overflow: hidden;
    max-width: 120px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.winter-account-menu strong {
    color: var(--winter-primary);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.winter-account-menu small {
    margin-top: -3px;
    color: #acafb9;
    font-size: 13px;
    line-height: 20px;
}

.winter-template .main-top .winter-account-trigger::after {
    display: none;
}

.winter-account-caret {
    width: 12px;
    height: 12px;
    margin-left: 8px;
    color: var(--winter-primary);
    font-size: 12px;
    line-height: 12px;
    text-align: center;
}

.winter-template .main-top .winter-account-trigger:focus,
.winter-template .main-top .winter-account-trigger:focus-visible {
    /* Bootstrap supplies the shadow; Winter's keyboard-focus rule owns the outline. */
    box-shadow: none;
}

.winter-template .main-top .btn:hover,
.winter-template .main-top .nav-link:hover {
    color: var(--winter-primary);
}

.winter-template .main-top .navbar-toggler {
    width: 40px;
    height: 40px;
    margin: -2px 8px 0 -10px;
    padding: 0;
    color: var(--winter-heading);
    border: 0;
}

.winter-template .main-top .navbar-toggler i {
    font-size: 22px;
}

.winter-template .main-top .main-top-logo img {
    display: block;
    max-width: 148px;
    height: 36px;
    margin-top: 0;
    object-fit: contain;
}

.winter-template .main-top .navbar-nav {
    margin-top: 0;
}

.winter-template .main-top .navbar-nav > li > a {
    display: flex;
    height: 36px;
    align-items: center;
    gap: 8px;
    padding: 2px 6px;
}

@media (min-width: 992px) {
    .winter-template .main-top {
        padding: 4px 28px 5px;
    }

    .winter-template .main-top .main-top-news {
        display: block;
    }

    .winter-template .main-top .winter-top-actions > .ml-auto > .winter-top-action {
        height: 49px;
        gap: 0;
        margin: 0;
        padding: 6px 8px;
        color: var(--winter-text);
        border: 0;
    }

    .winter-template .main-top .winter-top-action > i {
        width: 18px;
        height: 18px;
        font-size: 18px;
        line-height: 18px;
        text-align: center;
    }

    .winter-template .main-top .cart-btn > i {
        margin: 0 8px 2px 0;
    }

    .winter-template .main-top #accountNotifications .winter-top-action-label {
        margin-left: 10px;
    }

    .winter-template .main-top .cart-btn > .badge {
        position: static;
        min-width: 18px;
        height: 17px;
        margin-left: 8px;
        padding: 3px 6px;
        border-radius: 10px;
        font-size: 11px;
        line-height: 11px;
    }

    .winter-template .main-top #accountNotifications > .badge {
        top: 14px;
        left: 19px;
        width: 7px;
        min-width: 7px;
        height: 7px;
        padding: 0;
        border-radius: 10px;
        font-size: 0;
        line-height: 0;
    }

    .winter-template .main-top .navbar-nav > .winter-account-dropdown {
        display: flex;
        height: 49px;
        align-items: center;
    }

    .winter-template .main-top .winter-top-actions > .ml-auto > .navbar-nav .winter-account-trigger {
        height: 49px;
        gap: 0;
        margin: 0;
        padding: 6px 0 6px 8px;
        color: var(--winter-primary);
        line-height: 20px;
    }

    .winter-template .main-top .winter-account-menu-icon {
        width: 18px;
        height: 18px;
        margin-right: 8px;
        color: var(--winter-primary);
        font-size: 18px;
        line-height: 18px;
        text-align: center;
    }
}

.winter-template .main-top .dropdown-menu {
    padding: 8px;
    border: 1px solid var(--winter-border);
    border-radius: var(--winter-radius);
    box-shadow: 0 12px 36px rgba(23, 25, 28, .12);
}

.winter-template .main-top .winter-account-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    width: 240px;
    min-width: 240px;
    max-height: calc(100vh - 72px);
    margin: 8px 0 0;
    padding: 8px 0;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 6px;
    box-shadow: 0 0 1px rgba(0, 0, 0, .12), 0 8px 32px rgba(0, 0, 0, .08);
}

.winter-template .main-top .winter-account-dropdown-menu > .winter-account-dropdown-header {
    display: flex;
    min-height: 62px;
    flex-direction: column;
    justify-content: center;
    padding: 10px 24px 8px;
}

.winter-account-dropdown-header small,
.winter-account-dropdown-header strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.winter-account-dropdown-header small {
    color: #979ba4;
    font-size: 13px;
    line-height: 20px;
}

.winter-account-dropdown-header strong {
    color: var(--winter-heading);
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
}

.winter-template .main-top .winter-account-dropdown-menu .dropdown-divider {
    height: 1px;
    margin: 8px 0;
    border-color: var(--winter-border);
}

.winter-template .main-top .winter-account-dropdown-menu li {
    margin: 0;
    padding: 0;
}

.winter-template .main-top .dropdown-item.winter-account-dropdown-item {
    display: flex;
    height: 36px;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 6px 24px;
    color: var(--winter-heading);
    border-radius: 0;
    font-size: 14px;
    line-height: 24px;
}

.winter-template .main-top .winter-account-dropdown-item i {
    width: 14px;
    height: 12px;
    margin-right: 16px;
    flex: 0 0 14px;
    color: #acafb9;
    font-size: 12px;
    line-height: 12px;
    text-align: center;
}

.winter-template .main-top .winter-account-dropdown-item span:not(.badge) {
    overflow: hidden;
    flex: 1 1 auto;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 24px;
}

.winter-template .main-top .winter-account-dropdown-item:hover,
.winter-template .main-top .winter-account-dropdown-item:focus {
    color: var(--winter-primary);
    background: #f2f6ff;
}

.winter-template .main-top .winter-account-dropdown-item:hover i,
.winter-template .main-top .winter-account-dropdown-item:focus i {
    color: var(--winter-primary);
}

.winter-template .main-top .dropdown-item {
    border-radius: 4px;
}

.winter-template .main-top .dropdown-item:hover {
    background: #f2f6ff;
}

.winter-template .badge-primary-faded {
    color: var(--winter-primary);
    background: #dfe9ff;
}

@media (max-width: 575.98px) {
    .winter-template .main-top .winter-account-dropdown-menu {
        width: 240px;
        min-width: min(240px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
    }
}

.winter-template .overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: none;
    width: 100%;
    height: 100%;
    padding: 0;
    background: rgba(16, 24, 38, .45);
    border: 0;
}

.winter-template .overlay.is-active {
    display: block;
}

/* Main content */
.winter-template section#main-body {
    flex: 1 0 auto;
    min-height: 0;
    padding: 0;
}

.winter-template .container.primary-content {
    width: 100%;
    /*
     * Lagom2 uses a 1328px container with 40px horizontal gutters, leaving a
     * 1248px content column. Keep this shared geometry for every inherited
     * Twenty-One page instead of widening individual templates.
     */
    max-width: 1328px;
    margin: 0 auto;
    padding: 48px 40px;
}

.winter-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 36px;
}

.winter-page-header > div {
    min-width: 0;
}

.winter-page-header h1 {
    margin: 0;
    color: var(--winter-heading);
    font-size: var(--winter-font-size-page);
    font-weight: var(--winter-font-weight-page);
    line-height: var(--winter-line-height-page);
    letter-spacing: -.7px;
}

.winter-page-eyebrow,
.winter-card-kicker {
    margin: 0 0 6px;
    color: var(--winter-muted);
    font-size: var(--winter-font-size-caption);
    font-weight: 700;
    line-height: var(--winter-line-height-caption);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.winter-page-description {
    margin: 7px 0 0;
    color: var(--winter-text);
}

.winter-page-breadcrumb {
    margin: 7px 0 0;
    color: #a4a8b1;
    font-size: var(--winter-font-size-meta);
    line-height: var(--winter-line-height-meta-flow);
}

ol.winter-page-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0;
    list-style: none;
}

ol.winter-page-breadcrumb li {
    display: inline-flex;
    align-items: center;
}

ol.winter-page-breadcrumb li:not(:last-child)::after {
    margin: 0 8px;
    color: #a4a8b1;
    content: "/";
}

ol.winter-page-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

ol.winter-page-breadcrumb a:hover,
ol.winter-page-breadcrumb a:focus {
    color: var(--winter-primary);
    text-decoration: none;
}

.winter-addfunds-page-header {
    margin-bottom: 40px;
}

.winter-list-page-header {
    align-items: center;
}

.winter-billing-list-header {
    margin-bottom: 48px;
}

.winter-list-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.winter-list-search {
    position: relative;
    width: 214px;
    margin: 0;
}

.winter-list-search i {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 1;
    color: #aeb3bd;
    transform: translateY(-50%);
}

.winter-list-search input {
    width: 100%;
    height: 44px;
    padding: 8px 14px 8px 42px;
    color: var(--winter-heading);
    background: #fff;
    border: 1px solid var(--winter-input-border);
    border-radius: var(--winter-button-radius);
    outline: 0;
}

.winter-list-search input:focus {
    border-color: var(--winter-primary);
    box-shadow: 0 0 0 2px rgba(16, 98, 254, .08);
}

.winter-reference-page-header {
    margin-bottom: 48px;
}

.winter-section-title {
    margin: 0 0 20px;
    color: var(--winter-heading);
    font-size: var(--winter-font-size-section);
    font-weight: var(--winter-font-weight-display);
    line-height: var(--winter-line-height-section);
}

.winter-text-link {
    display: inline-flex;
    align-items: center;
    color: var(--winter-primary);
    font-weight: 500;
}

.master-breadcrumb {
    margin: 0 0 28px !important;
}

.master-breadcrumb .container {
    max-width: none;
    padding: 0;
}

.master-breadcrumb .breadcrumb {
    margin: 0;
    padding: 0;
    color: var(--winter-muted);
    background: transparent;
    font-size: var(--winter-font-size-meta);
    line-height: var(--winter-line-height-meta-flow);
}

/* Dashboard */
.winter-page-clientareahome .container.primary-content {
    max-width: 1328px;
    padding-top: 48px;
}

@media (min-width: 992px) {
    body.winter-page-clientareahome main {
        width: calc(100% - 140px);
    }
}

.winter-dashboard-header {
    margin-bottom: 48px;
}

.winter-dashboard-breadcrumb {
    margin: 4px 0 0;
    color: var(--winter-muted);
    font-size: var(--winter-font-size-meta);
    line-height: var(--winter-line-height-meta-flow);
}

.winter-dashboard-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
}

.winter-dashboard-aside {
    display: grid;
    gap: 32px;
}

.winter-account-card {
    overflow: hidden;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--winter-border);
    border-radius: var(--winter-radius);
}

.winter-account-card h2 {
    margin: 0 0 24px;
    color: var(--winter-heading);
    font-size: var(--winter-font-size-section);
    font-weight: var(--winter-font-weight-display);
    line-height: var(--winter-line-height-section);
}

.winter-account-details {
    display: grid;
    margin-bottom: 18px;
    line-height: 24px;
}

.winter-account-details strong {
    color: var(--winter-heading);
    font-weight: 400;
}

.winter-account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.winter-account-actions .btn,
.winter-aside-section .btn {
    min-height: 36px;
    height: 36px;
    padding: 5px 14px;
}

.winter-aside-section h2 {
    margin: 0 0 18px;
    color: var(--winter-heading);
    font-size: var(--winter-font-size-panel);
    font-weight: var(--winter-font-weight-display);
    line-height: var(--winter-line-height-panel);
}

.winter-aside-section p {
    margin: 0 0 12px;
}

.winter-aside-section p i,
.winter-quick-links a i {
    width: 18px;
    margin-right: 8px;
    color: var(--winter-primary);
    text-align: center;
}

.winter-quick-links {
    display: grid;
    gap: 8px;
}

.winter-quick-links h2 {
    margin-bottom: 10px;
}

.winter-quick-links > a {
    display: flex;
    align-items: center;
    min-height: 28px;
}

.winter-dashboard-main {
    min-width: 0;
}

.winter-client-home-alerts {
    display: grid;
    gap: 12px;
    margin-bottom: 32px;
}

.winter-client-home-alert {
    display: flex;
    min-height: 56px;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 10px 12px 10px 16px;
    color: #7a5a00;
    background: #fff8dd;
    border-color: #f0d681;
    border-radius: var(--winter-radius);
}

.winter-client-home-alert-icon {
    flex: 0 0 auto;
    color: #c48a00;
}

.winter-client-home-alert-body {
    min-width: 0;
    flex: 1;
}

.winter-client-home-alert-body > :last-child {
    margin-bottom: 0;
}

.winter-client-home-alert-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.winter-client-home-alert-actions .btn-icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.winter-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.winter-stat-pagination {
    display: none;
}

.winter-template .winter-stat-card {
    position: relative;
    display: flex;
    height: 182px;
    min-height: 182px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 24px;
    color: var(--winter-text);
    text-align: center;
    background: #fff;
    border: 1px solid var(--winter-border);
    border-radius: var(--winter-radius);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.winter-stat-card:hover {
    border-color: #ccdaf7;
    box-shadow: var(--winter-shadow-soft);
    transform: translateY(-2px);
}

.winter-stat-icon {
    position: absolute;
    top: 10px;
    right: 16px;
    display: block;
    width: auto;
    height: 24px;
    color: #acafb9;
    font-size: 14px;
    line-height: 24px;
}

.winter-stat-card.has-alert .winter-stat-icon {
    color: #e3342f;
}

.winter-stat-value {
    padding: 4px 0 8px;
    color: var(--winter-primary);
    font-size: var(--winter-font-size-stat);
    font-weight: var(--winter-font-weight-display);
    line-height: var(--winter-line-height-stat);
}

.winter-stat-label {
    margin: 0;
    color: var(--winter-heading);
    font-size: var(--winter-font-size-control-lg);
    line-height: var(--winter-line-height-body);
}

.winter-dashboard-services {
    margin-bottom: 24px;
}

.winter-dashboard-services:empty {
    display: none;
}

.winter-panel-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.winter-panel-column {
    display: grid;
    gap: 24px;
}

.winter-dashboard-other-panels {
    display: grid;
    gap: 24px;
    margin-top: 24px;
}

.winter-home-panel {
    min-width: 0;
    margin: 0 !important;
}

.winter-home-panel .card-header {
    display: flex;
    min-height: 69px;
    align-items: center;
    padding: 20px 24px;
    background: var(--winter-surface-muted);
}

.winter-home-panel .card-title {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    font-size: var(--winter-font-size-panel);
    font-weight: var(--winter-font-weight-display);
    line-height: var(--winter-line-height-panel);
}

.winter-panel-title-text {
    min-width: 0;
}

.winter-panel-heading-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 16px;
}

.winter-panel-heading-actions .btn-xs {
    display: inline-flex;
    height: 30px;
    min-height: 0;
    align-items: center;
    gap: 7px;
    padding: 2px 8px;
    font-size: var(--winter-font-size-caption);
    line-height: var(--winter-line-height-caption);
}

.winter-panel-icon {
    color: #acb0b9;
    font-size: 14px;
}

.winter-home-panel > .list-group {
    border-top: 1px solid var(--winter-border);
}

.winter-home-panel > .list-group.has-scroll {
    max-height: 323px;
    overflow: hidden;
}

.winter-home-panel .list-group-item {
    position: relative;
    display: block;
    min-height: 0;
    padding: 16px 24px;
    color: var(--winter-text);
    border-width: 0 0 1px;
    border-color: var(--winter-border);
    border-radius: 0;
}

.winter-home-panel .list-group-item:last-child {
    border-bottom: 0;
}

.winter-home-panel small {
    color: var(--winter-muted);
    font-size: var(--winter-font-size-meta);
    line-height: var(--winter-line-height-meta-flow);
}

.winter-home-panel .winter-status-modern {
    min-width: 0;
}

.winter-home-panel .list-group-item:hover {
    color: var(--winter-primary);
    background: #fafbff;
}

.winter-home-panel-services .list-group-item {
    padding: 0;
}

.winter-home-panel-services .list-group-item-content {
    display: flex;
    min-height: 76px;
    align-items: center;
    gap: 24px;
    padding: 16px 24px;
}

.winter-home-panel-services .list-group-item-name {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
}

.winter-home-panel-services .list-group-item-status,
.winter-home-panel-services .list-group-item-actions {
    flex: 0 0 auto;
}

.winter-home-panel-services .list-group-item-status .label {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 4px 6px;
    color: #26873c;
    background: #cff2d7;
    border-radius: 4px;
    font-size: var(--winter-font-size-caption);
    font-weight: var(--winter-font-weight-action);
    line-height: var(--winter-line-height-caption);
}

.winter-home-panel-services .btn-view-details {
    display: inline-flex;
    min-width: 106px;
    height: 36px;
    align-items: center;
    justify-content: center;
    padding: 4px 16px;
    font-size: var(--winter-font-size-meta);
    line-height: var(--winter-line-height-meta);
}

.winter-home-panel-tickets .status {
    display: inline-block;
    min-height: 0;
    margin-left: 4px;
    padding: 0;
    color: var(--status-color, var(--winter-muted)) !important;
    background: transparent !important;
    border-radius: 0;
    font-size: var(--winter-font-size-body);
    font-weight: var(--winter-font-weight-body);
    line-height: var(--winter-line-height-body);
}

.winter-home-panel-news .text-last-updated {
    display: block;
    color: var(--winter-muted);
    font-size: var(--winter-font-size-meta);
    line-height: var(--winter-line-height-meta-flow);
}

.winter-dashboard-empty-state {
    display: flex;
    min-height: 180px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-direction: column;
    color: var(--winter-muted);
    text-align: center;
}

.winter-dashboard-empty-state > i {
    color: #acafb9;
    font-size: 30px;
}

.winter-dashboard-empty-state > span {
    color: var(--winter-muted);
}

.winter-home-panel .card-footer:empty {
    display: none;
}

.winter-home-panel .card-footer {
    padding: 14px 24px;
}

.winter-domain-promo {
    display: flex;
    min-height: 282px;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 24px;
    padding: 40px 48px;
    color: rgba(255, 255, 255, .8);
    text-align: center;
    background: linear-gradient(180deg, #071e63 0%, #074bd8 100%);
    border-radius: var(--winter-radius);
}

.winter-domain-promo h2 {
    color: #fff;
    margin: 0 0 18px;
    font-size: var(--winter-font-size-section);
    font-weight: var(--winter-font-weight-display);
    line-height: var(--winter-line-height-section);
}

.winter-domain-promo p {
    margin: 0;
}

.winter-domain-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.winter-domain-actions .btn {
    width: 100%;
}

#affiliatesPanel {
    color: var(--winter-primary);
    background: #d6e4ff;
    border-color: #b3ccff;
}

#affiliatesPanel .card-header,
#affiliatesPanel .card-footer {
    background: transparent;
    border-color: #b3ccff;
}

#affiliatesPanel .card-title,
#affiliatesPanel .winter-panel-icon {
    color: var(--winter-primary);
}

/* Tables and list pages */
.winter-template .dataTables_wrapper {
    margin-bottom: 14px;
}

.winter-template .dataTables_wrapper .row:first-child {
    align-items: center;
    margin-bottom: 18px;
}

.winter-template .dataTables_filter label,
.winter-template .dataTables_length label {
    margin: 0;
}

.winter-template .dataTables_filter input {
    min-width: 250px;
    margin-left: 8px;
}

.winter-table-card,
.winter-template .table-container {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--winter-border);
    border-radius: var(--winter-radius);
}

.winter-template .table-container .table {
    margin: 0;
}

.winter-template .table-container .dataTables_wrapper table.table-list {
    margin: 0 !important;
    border: 0;
    border-radius: 0;
}

.winter-template .table-container .dataTables_wrapper table.table-list > thead > tr > th,
.winter-template .table-container .dataTables_wrapper table.table-list > tbody > tr:last-child > td {
    border-radius: 0;
}

.winter-table-toolbar {
    display: flex;
    min-height: 37px;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 24px;
    background: var(--winter-surface-muted);
    border-bottom: 1px solid var(--winter-border);
}

.winter-table-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--winter-text);
    font-size: var(--winter-font-size-meta);
    line-height: var(--winter-line-height-meta-flow);
}

.winter-table-filter .form-control {
    width: 112px;
    height: 34px;
    padding: 5px 28px 5px 12px;
    font-size: 13px;
}

.winter-inactive-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: var(--winter-text);
    font-size: 13px;
    cursor: pointer;
}

.winter-inactive-toggle strong {
    color: var(--winter-heading);
    font-weight: 600;
}

.winter-inactive-toggle input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.winter-toggle-track {
    position: relative;
    width: 32px;
    height: 18px;
    flex: 0 0 auto;
    background: #c5c9d1;
    border-radius: 9px;
    transition: background-color .18s ease;
}

.winter-toggle-track::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    content: "";
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(23, 25, 28, .2);
    transition: transform .18s ease;
}

.winter-inactive-toggle input:checked + .winter-toggle-track {
    background: var(--winter-primary);
}

.winter-inactive-toggle input:checked + .winter-toggle-track::after {
    transform: translateX(14px);
}

.winter-inactive-toggle input:focus-visible + .winter-toggle-track {
    box-shadow: 0 0 0 3px rgba(16, 98, 254, .16);
}

.winter-unified-table-card .dataTables_filter,
.winter-unified-table-card .dataTables_info {
    display: none;
}

.winter-unified-table-card .dataTables_wrapper {
    margin-bottom: 0;
}

.winter-unified-table-card .dataTables_wrapper > .row:first-child {
    display: none;
}

/*
 * Twenty-One puts the row divider on tbody cells. A second divider on the
 * header creates the doubled line seen across services, domains, invoices,
 * referrals and tickets, so the shared table contract keeps one divider only.
 */
.winter-template .table-list > thead > tr > th {
    height: 24px;
    padding: 12px 24px;
    color: #656a75;
    background: #fff;
    border: 0;
    font-size: var(--winter-font-size-meta);
    font-weight: var(--winter-font-weight-body);
    line-height: var(--winter-line-height-meta-flow);
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
}

.winter-template .table-list > thead > tr > th.sorting_asc,
.winter-template .table-list > thead > tr > th.sorting_desc {
    background-color: #fff !important;
}

/*
 * DataTables' inherited triangles are pinned to the far edge of each cell.
 * Lagom2 places a compact two-state marker immediately after the label and
 * colours only the active direction. Font Awesome is already provided by
 * WHMCS, so these remain real icon glyphs without adding another asset.
 */
.winter-template .table-list > thead > tr > th.sorting,
.winter-template .table-list > thead > tr > th.sorting_asc,
.winter-template .table-list > thead > tr > th.sorting_desc,
.winter-template .table-list > thead > tr > th.sorting_asc_disabled,
.winter-template .table-list > thead > tr > th.sorting_desc_disabled {
    position: relative;
    padding-right: 24px;
    white-space: nowrap;
}

.winter-template .table-list > thead > tr > th.sorting::before,
.winter-template .table-list > thead > tr > th.sorting::after,
.winter-template .table-list > thead > tr > th.sorting_asc::before,
.winter-template .table-list > thead > tr > th.sorting_asc::after,
.winter-template .table-list > thead > tr > th.sorting_desc::before,
.winter-template .table-list > thead > tr > th.sorting_desc::after,
.winter-template .table-list > thead > tr > th.sorting_asc_disabled::before,
.winter-template .table-list > thead > tr > th.sorting_asc_disabled::after,
.winter-template .table-list > thead > tr > th.sorting_desc_disabled::before,
.winter-template .table-list > thead > tr > th.sorting_desc_disabled::after {
    display: none !important;
}

.winter-template .table-list > thead > tr > th .sorting-arrows {
    position: relative;
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 8px;
    color: #acafb9;
    vertical-align: middle;
}

.winter-template .table-list > thead > tr > th .sorting-arrows::before,
.winter-template .table-list > thead > tr > th .sorting-arrows::after {
    position: absolute;
    left: 0;
    display: block;
    width: 12px;
    height: 6px;
    font-family: "Font Awesome 5 Pro";
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    line-height: 6px;
    text-align: center;
}

.winter-template .table-list > thead > tr > th .sorting-arrows::before {
    top: 0;
    content: "\f0d8";
}

.winter-template .table-list > thead > tr > th .sorting-arrows::after {
    bottom: 0;
    content: "\f0d7";
}

.winter-template .table-list > thead > tr > th.sorting_asc .sorting-arrows::before,
.winter-template .table-list > thead > tr > th.sorting_desc .sorting-arrows::after {
    color: var(--winter-primary);
}

.winter-template .table-list > thead > tr > th.sorting_disabled .sorting-arrows {
    display: none;
}

.winter-template .table-list > tbody > tr {
    cursor: pointer;
    transition: background-color .18s ease;
}

.winter-template .table-list > tbody > tr:hover {
    background: #fafbff;
}

.winter-template .table-list > tbody > tr > td {
    height: 50px;
    padding: 15px 24px;
    vertical-align: middle;
    border-color: var(--winter-border);
    font-size: var(--winter-font-size-body);
    font-weight: var(--winter-font-weight-body);
    line-height: var(--winter-line-height-body);
}

.winter-template .table-list > tbody > tr:last-child > td {
    border-bottom: 0;
}

.winter-template .dataTables_wrapper .pagination .page-link {
    color: var(--winter-text);
    font-size: var(--winter-font-size-body);
    line-height: var(--winter-line-height-body);
}

.winter-unified-table-card .dataTables_length {
    background: #fff;
    border-top: 1px solid var(--winter-border);
    border-radius: 0 0 var(--winter-radius) var(--winter-radius);
    font-size: var(--winter-font-size-meta);
}

.winter-unified-table-card .dataTables_length label {
    display: flex;
    min-height: 46px;
    align-items: center;
    padding: 8px 24px;
    font-size: var(--winter-font-size-meta);
    line-height: var(--winter-line-height-meta-flow);
    white-space: nowrap;
}

.winter-unified-table-card .dataTables_length select {
    width: 60px;
    height: 30px;
    margin: 0 8px;
    padding: 2px 24px 2px 8px;
    border-radius: 4px;
    font-size: var(--winter-font-size-meta);
    line-height: 20px;
}

.winter-unified-table-card .dataTables_paginate {
    display: flex;
    align-items: center;
    float: right;
    margin: 0;
    padding: 8px 24px;
}

.winter-template .winter-unified-table-card .dataTables_paginate .pagination {
    gap: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.winter-unified-table-card .dataTables_paginate .page-item {
    margin-left: 4px;
}

.winter-template .winter-unified-table-card .dataTables_paginate .page-link {
    display: flex;
    height: 30px;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: var(--winter-font-size-meta);
    line-height: 20px;
}

.winter-unified-table-card .dataTables_paginate .page-item.active .page-link {
    color: var(--winter-primary);
    background: #e0ebff;
    border-color: #e0ebff;
}

.winter-unified-table-card .dataTables_paginate .page-item.disabled .page-link {
    color: #979ba4;
    background: #efeff1;
    border-color: transparent;
}

.winter-template .label.status {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: var(--winter-font-size-caption);
    font-weight: 600;
    line-height: var(--winter-line-height-caption);
}

.winter-template .table-list .label.status {
    min-height: 0;
    justify-content: flex-start;
    gap: 8px;
    padding: 0;
    color: var(--winter-text);
    background: transparent !important;
    border: 0;
    border-radius: 0;
    font-size: var(--winter-font-size-meta);
    font-weight: var(--winter-font-weight-body);
    line-height: var(--winter-line-height-meta-flow);
}

.winter-template .table-list .label.status::before {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    content: "";
    background: #a7acb6;
    border-radius: 50%;
}

.winter-template .table-list .status-active,
.winter-template .table-list .status-paid,
.winter-template .table-list .status-completed,
.winter-template .table-list .status-open,
.winter-template .table-list .status-customer-reply {
    color: #21863a !important;
}

.winter-template .table-list .status-active::before,
.winter-template .table-list .status-paid::before,
.winter-template .table-list .status-completed::before,
.winter-template .table-list .status-open::before,
.winter-template .table-list .status-customer-reply::before {
    background: #21863a !important;
}

.winter-template .table-list .status-pending,
.winter-template .table-list .status-unpaid,
.winter-template .table-list .status-refunded,
.winter-template .table-list .status-inprogress {
    color: #df7a00 !important;
}

.winter-template .table-list .status-pending::before,
.winter-template .table-list .status-unpaid::before,
.winter-template .table-list .status-refunded::before,
.winter-template .table-list .status-inprogress::before {
    background: #df7a00 !important;
}

.winter-template .table-list .status-suspended,
.winter-template .table-list .status-overdue,
.winter-template .table-list .status-fraud {
    color: #d93c3c !important;
}

.winter-template .table-list .status-suspended::before,
.winter-template .table-list .status-overdue::before,
.winter-template .table-list .status-fraud::before {
    background: #d93c3c !important;
}

.winter-template .table-list .status-cancelled,
.winter-template .table-list .status-terminated,
.winter-template .table-list .status-closed {
    color: #9aa0aa !important;
}

.winter-template .table-list .status-cancelled::before,
.winter-template .table-list .status-terminated::before,
.winter-template .table-list .status-closed::before {
    background: #9aa0aa !important;
}

.winter-service-name strong,
.winter-service-name > span {
    display: block;
}

.winter-service-name strong {
    color: var(--winter-heading);
    font-size: var(--winter-font-size-body);
}

.winter-service-name > span {
    margin-top: 3px;
    color: var(--winter-text);
    font-size: var(--winter-font-size-meta);
    line-height: var(--winter-line-height-meta-flow);
}

.winter-table-primary-value,
.winter-table-secondary-value {
    display: block;
}

.winter-table-primary-value {
    color: var(--winter-heading);
}

.winter-table-secondary-value {
    margin-top: 4px;
    color: var(--winter-text);
    font-size: var(--winter-font-size-caption);
    line-height: var(--winter-line-height-caption);
}

.winter-table-actions-heading {
    width: 54px;
}

.winter-table-actions {
    width: 54px;
    text-align: center;
}

.winter-table-actions a {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    color: #a1a6b0;
    border-radius: 3px;
}

.winter-table-actions a:hover {
    color: var(--winter-primary);
    background: #edf3ff;
}

.winter-mobile-meta {
    display: none;
}

.winter-template .pagination {
    gap: 4px;
}

.winter-template .page-link {
    display: inline-flex;
    min-width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    color: var(--winter-text);
    font-size: var(--winter-font-size-meta);
    line-height: var(--winter-line-height-meta);
    border-color: var(--winter-border);
    border-radius: 4px;
}

.winter-template .page-item.active .page-link {
    color: #fff;
    background: var(--winter-primary);
    border-color: var(--winter-primary);
}

/* Account and ticket pages */
.winter-template .winter-account-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 28px;
    align-items: start;
}

.winter-template .winter-context-layout {
    position: relative;
    display: block;
    padding-left: 320px;
}

.winter-context-layout > .winter-context-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    width: 280px;
}

.winter-context-layout > :not(.winter-context-sidebar) {
    min-width: 0;
}

.winter-account-nav {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--winter-border);
    border-radius: var(--winter-radius);
}

.winter-context-nav {
    padding-top: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.winter-context-nav .winter-card-kicker {
    margin-bottom: 16px;
    padding: 0;
    color: var(--winter-heading);
    font-size: 20px;
    font-weight: 300;
    line-height: 28px;
}

.winter-context-nav a {
    min-height: 36px;
    margin: 1px;
    padding: 6px 0;
    color: var(--winter-primary);
    border-bottom: 0;
    border-radius: 4px;
}

.winter-account-nav a {
    display: flex;
    min-height: 48px;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    color: var(--winter-text);
    border-bottom: 1px solid var(--winter-border);
}

.winter-account-nav.winter-context-nav a {
    min-height: 36px;
    margin: 1px;
    padding: 6px 0;
    color: var(--winter-primary);
    border-bottom: 0;
}

.winter-account-nav a:last-child {
    border-bottom: 0;
}

.winter-account-nav a:hover,
.winter-account-nav a.active {
    color: var(--winter-primary);
    background: #f7f9ff;
}

.winter-account-nav.winter-context-nav a.active {
    padding-right: 12px;
    padding-left: 12px;
    background: #f0f5ff;
}

.winter-billing-due-summary {
    margin-bottom: 24px;
    overflow: hidden;
    color: rgba(255, 255, 255, .8);
    background: var(--winter-sidebar);
    border-radius: 6px;
    box-shadow: 0 0 1px rgba(0, 0, 0, .1), 0 2px 24px rgba(0, 0, 0, .08);
}

.winter-billing-due-body {
    min-height: 108px;
    padding: 24px;
}

.winter-billing-due-title,
.winter-billing-due-amount {
    display: block;
}

.winter-billing-due-title {
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
}

.winter-billing-due-amount {
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
}

.winter-billing-due-footer {
    margin-top: -8px;
    padding: 24px;
}

.winter-template .winter-billing-pay-button {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 16px;
    color: var(--winter-primary);
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    background: #e0ebff;
    border: 0;
    border-radius: 3px;
}

.winter-template .winter-billing-pay-button:hover {
    color: #0754e5;
    background: #d6e4ff;
}

/* Add funds: Lagom2 summary sidebar and centered payment form. */
.winter-funds-balance {
    margin-bottom: 24px;
    overflow: hidden;
    border: 1px solid #a9c4ff;
    border-radius: var(--winter-radius);
}

.winter-funds-balance-card {
    min-height: 211px;
    padding: 24px;
    color: #fff;
    background: var(--winter-sidebar);
}

.winter-funds-balance-card > p {
    margin: 0;
    color: rgba(255, 255, 255, .72);
    font-size: var(--winter-font-size-meta);
    line-height: var(--winter-line-height-meta);
}

.winter-funds-balance-card > strong {
    display: block;
    margin-top: 2px;
    color: #fff;
    font-size: 32px;
    font-weight: 500;
    line-height: 40px;
}

.winter-funds-balance-card dl {
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.winter-funds-balance-card dl > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: rgba(255, 255, 255, .62);
    font-size: var(--winter-font-size-meta);
    line-height: var(--winter-line-height-meta);
}

.winter-funds-balance-card dt,
.winter-funds-balance-card dd {
    margin: 0;
    font-weight: 400;
}

.winter-funds-balance-card dd {
    text-align: right;
}

.winter-funds-notice {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    color: var(--winter-primary);
    background: #d6e4ff;
    font-size: var(--winter-font-size-meta);
    line-height: var(--winter-line-height-meta);
}

.winter-funds-notice i {
    flex: 0 0 auto;
    font-size: 14px;
}

.winter-addfunds-card {
    margin: 0;
    border-color: var(--winter-border);
    border-radius: var(--winter-radius);
    box-shadow: none;
}

.winter-addfunds-card .card-body {
    padding: 40px;
}

.winter-addfunds-form {
    width: 100%;
    max-width: 548px;
    margin: 0 auto;
}

.winter-addfunds-description {
    margin: 0 0 8px;
    color: var(--winter-text);
    font-size: var(--winter-font-size-body);
    line-height: var(--winter-line-height-body);
}

.winter-addfunds-form .form-group {
    margin-bottom: 11px;
}

.winter-addfunds-form .col-form-label {
    padding: 0;
    margin-bottom: 6px;
    color: var(--winter-muted);
    font-size: var(--winter-font-size-body);
    line-height: var(--winter-line-height-body);
}

.winter-addfunds-form .form-control {
    height: 44px;
}

.winter-addfunds-amounts {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.winter-addfunds-amount-button {
    min-width: 0;
    height: 52px;
    padding: 10px 8px;
    color: var(--winter-heading);
    background: #fff;
    border: 1px solid var(--winter-border);
    border-radius: 4px;
    font-size: 17px;
    font-weight: 500;
    line-height: 24px;
}

.winter-addfunds-amount-button:hover,
.winter-addfunds-amount-button:focus {
    color: var(--winter-heading);
    background: #f7f8fa;
    border-color: #aeb4bf;
}

.winter-addfunds-amount-button.active,
.winter-addfunds-amount-button.active:hover,
.winter-addfunds-amount-button.active:focus {
    color: var(--winter-heading);
    background: #f5f6f8;
    border-color: #9299a6;
    box-shadow: none;
}

.winter-addfunds-form .winter-addfunds-amount-group {
    margin-bottom: 32px;
}

.winter-addfunds-submit {
    height: 52px;
    border-radius: var(--winter-button-radius);
    font-size: 17px;
    line-height: 24px;
}

.winter-form-card {
    margin-bottom: 20px;
}

.winter-form-card .card-header {
    padding: 18px 24px;
}

.winter-form-card .form-group {
    margin-bottom: 20px;
}

.winter-marketing-optin {
    margin-bottom: 28px;
}

.winter-marketing-optin-header {
    margin-bottom: 32px;
}

.winter-marketing-optin-header .winter-type-section-title {
    margin: 0 0 8px;
    color: var(--winter-heading);
}

.winter-marketing-optin-header p {
    margin: 0;
    color: var(--winter-text);
    line-height: 24px;
}

.winter-marketing-switch {
    --winter-marketing-label-color: var(--winter-text);
    --winter-marketing-label-size: 15px;
    --winter-marketing-label-weight: 400;

    display: flex;
    width: 288px;
    max-width: 100%;
    min-height: 78px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 24px 16px;
    color: var(--winter-heading);
    background: #fff;
    border: 1px solid #dee0e3;
    border-radius: 4px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.winter-marketing-switch:hover {
    border-color: var(--winter-primary);
}

.winter-marketing-switch-label,
#registration .winter-marketing-switch-label {
    display: block;
    margin: 0;
    color: var(--winter-marketing-label-color);
    font-size: var(--winter-marketing-label-size);
    font-weight: var(--winter-marketing-label-weight);
    line-height: 24px;
    cursor: pointer;
}

.winter-marketing-switch-control {
    position: relative;
    display: block;
    flex: 0 0 60px;
    width: 60px;
    height: 28px;
}

.winter-marketing-switch-input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.winter-marketing-switch-track {
    position: absolute;
    inset: 0;
    display: block;
    background: #dee0e3;
    border-radius: 50px;
    transition: background .15s ease, box-shadow .15s ease;
}

.winter-marketing-switch-track::after {
    position: absolute;
    top: 0;
    right: 8px;
    bottom: 0;
    display: flex;
    align-items: center;
    content: "OFF";
    color: #8d919b;
    font-size: 11px;
    font-weight: 400;
    line-height: 1;
}

.winter-marketing-switch-handle {
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 1;
    width: 24px;
    height: 24px;
    background: #fff;
    border-radius: 50%;
    transition: transform .15s ease;
}

.winter-marketing-switch-input:checked + .winter-marketing-switch-track {
    background: var(--winter-primary);
}

.winter-marketing-switch-input:checked + .winter-marketing-switch-track::after {
    right: auto;
    left: 8px;
    content: "ON";
    color: #fff;
}

.winter-marketing-switch-input:checked + .winter-marketing-switch-track .winter-marketing-switch-handle {
    transform: translateX(32px);
}

.winter-marketing-switch-input:focus-visible + .winter-marketing-switch-track {
    box-shadow: 0 0 0 3px rgba(16, 98, 254, .2);
}

/*
 * Generate-password is a native Bootstrap modal inherited by every Winter
 * page. Keep its WHMCS IDs and behavior while matching the Lagom2 dialog.
 */
#modalGeneratePassword {
    padding: 0 16px;
}

#modalGeneratePassword.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

#modalGeneratePassword .modal-dialog {
    display: flex;
    width: 448px;
    max-width: 100%;
    min-height: calc(100% - 48px);
    align-items: center;
    margin: 24px auto;
}

#modalGeneratePassword .modal-content {
    width: 100%;
    overflow: hidden;
    background: #fff;
    border: 0;
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(23, 25, 28, .18);
}

#modalGeneratePassword .modal-header {
    position: relative;
    min-height: 69px;
    padding: 20px 56px 20px 24px;
    color: var(--winter-heading);
    background: #fff;
    border-bottom: 1px solid #efeff1;
}

#modalGeneratePassword .modal-title {
    margin: 0;
    color: var(--winter-heading);
    font-size: 20px;
    font-weight: 300;
    line-height: 28px;
}

#modalGeneratePassword .modal-header .close {
    position: absolute;
    top: 18px;
    right: 20px;
    display: flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    color: #9297a2;
    font-size: 16px;
    line-height: 1;
}

#modalGeneratePassword .modal-body {
    padding: 24px;
}

#modalGeneratePassword .form-group {
    margin-bottom: 16px;
}

#modalGeneratePassword label {
    margin-bottom: 0;
    color: var(--winter-text);
    text-align: right;
}

#modalGeneratePassword .form-control {
    min-height: 44px;
}

#modalGeneratePassword .copy-to-clipboard {
    margin-left: 8px;
}

#modalGeneratePassword .modal-footer {
    min-height: 68px;
    padding: 0 24px 24px;
    border-top: 0;
}

@media (max-width: 767.98px) {
    #modalGeneratePassword {
        align-items: flex-start;
        overflow-y: auto;
    }

    #modalGeneratePassword .modal-dialog {
        min-height: auto;
        margin: 16px auto;
    }

    #modalGeneratePassword label {
        margin-bottom: 6px;
        text-align: left;
    }

    #modalGeneratePassword .offset-md-4 {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    #modalGeneratePassword .copy-to-clipboard {
        margin-left: 0;
    }

    #modalGeneratePassword .modal-footer {
        flex-wrap: wrap;
        gap: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .winter-marketing-switch,
    .winter-marketing-switch-track,
    .winter-marketing-switch-handle {
        transition: none;
    }
}

.winter-users-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.winter-users-heading h2,
.winter-users-section .winter-section-heading h2 {
    margin: 0;
    color: var(--winter-heading);
    font-size: 28px;
    font-weight: 400;
    line-height: 36px;
}

.winter-user-list-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--winter-border);
    border-radius: var(--winter-radius);
}

.winter-user-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.winter-user-list-item {
    display: grid;
    min-height: 80px;
    grid-template-columns: minmax(0, 1fr) 220px 96px;
    gap: 24px;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--winter-border);
}

.winter-user-list-item:last-child {
    border-bottom: 0;
}

.winter-user-identity,
.winter-user-login {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.winter-user-identity strong {
    overflow: hidden;
    color: var(--winter-heading);
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.winter-user-identity span,
.winter-user-login small {
    color: var(--winter-muted);
    font-size: var(--winter-font-size-meta);
    line-height: var(--winter-line-height-meta);
}

.winter-user-login span {
    color: var(--winter-text);
}

.winter-user-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.winter-user-actions .btn {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.winter-users-note {
    margin: 12px 0 0;
    color: var(--winter-muted);
    font-size: var(--winter-font-size-meta);
    line-height: var(--winter-line-height-meta);
}

.winter-users-section + .winter-users-section {
    margin-top: 32px;
}

.winter-modal-source .modal-dialog {
    display: flex;
    width: calc(100% - 32px);
    max-width: 560px;
    min-height: calc(100% - 48px);
    align-items: center;
    margin: 24px auto;
}

.winter-modal-source .modal-content {
    width: 100%;
    margin: 30px 0;
}

.winter-modal-source .modal-header {
    padding: 20px 24px;
}

.winter-modal-source .modal-title {
    color: var(--winter-heading);
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
}

.winter-modal-source .modal-body {
    min-height: 276px;
    padding: 24px;
}

.winter-modal-source .modal-footer {
    min-height: 68px;
    padding: 0 24px 24px;
    border-top: 0;
}

.winter-template .col-form-label {
    line-height: var(--winter-line-height-body);
}

.winter-form-card .row {
    margin-bottom: -20px;
}

.winter-support-departments {
    margin-bottom: 24px;
}

.winter-department-list {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--winter-border);
    border-radius: var(--winter-radius);
}

.winter-department {
    display: grid;
    min-height: 100px;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    padding: 20px 24px;
    color: var(--winter-text);
    border-bottom: 1px solid var(--winter-border);
}

.winter-department:last-child {
    border-bottom: 0;
}

.winter-department:focus,
.winter-department:focus-visible,
.winter-department:hover {
    color: var(--winter-primary);
    background: #f0f5ff;
    text-decoration: none;
}

.winter-department-icon {
    display: inline-flex;
    width: 18px;
    height: 24px;
    margin-top: 2px;
    align-items: center;
    justify-content: center;
    color: var(--winter-primary);
    background: transparent;
    border-radius: 0;
    font-size: 18px;
    line-height: 24px;
}

.winter-department-icon > .fas {
    line-height: 24px;
}

.winter-department strong,
.winter-department small {
    display: block;
}

.winter-department strong {
    margin: 0;
    color: var(--winter-primary);
    font-size: 17px;
    font-weight: 400;
    line-height: 28px;
}

.winter-department small {
    margin-top: 8px;
    color: var(--winter-text);
    font-size: 14px;
    line-height: 24px;
}

.winter-ticket-form-section {
    margin-bottom: 34px;
}

.winter-ticket-section-card {
    margin: 0;
}

.winter-ticket-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
}

.winter-ticket-info-grid .form-group {
    margin: 0;
}

.winter-ticket-creator {
    display: flex;
    min-height: 74px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 14px 16px;
    background: var(--winter-surface-muted);
    border-radius: var(--winter-button-radius);
}

.winter-ticket-creator strong {
    color: var(--winter-heading);
    font-weight: 500;
}

.winter-ticket-creator span {
    color: var(--winter-muted);
    font-size: 13px;
}

.winter-ticket-select-with-icon {
    position: relative;
}

.winter-ticket-select-with-icon > i {
    position: absolute;
    top: 50%;
    left: 16px;
    z-index: 1;
    color: var(--winter-primary);
    transform: translateY(-50%);
}

.winter-ticket-select-with-icon .form-control {
    padding-left: 44px;
}

.winter-static-control {
    display: flex;
    align-items: center;
    color: var(--winter-text);
}

.winter-ticket-section-card .card-body {
    padding: 24px;
}

.winter-ticket-section-card .md-editor {
    margin-bottom: 0;
}

.winter-ticket-attachments {
    margin-top: 20px;
}

.winter-attachment-component {
    margin-bottom: 0;
}

.winter-attachment-label {
    display: block;
}

.winter-attachment-list {
    display: grid;
    gap: 8px;
}

.winter-attachment-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
}

.winter-attachment-row .custom-file,
.winter-attachment-row .custom-file-input,
.winter-attachment-row .custom-file-label {
    height: 44px;
}

.winter-attachment-row .custom-file-label {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 8px 104px 8px 16px;
    color: var(--winter-text);
    line-height: var(--winter-line-height-body);
    border-color: var(--winter-input-border);
    border-radius: 4px;
}

.winter-attachment-row .custom-file-label::after {
    content: attr(data-browse);
    display: flex;
    height: 42px;
    align-items: center;
    padding: 8px 14px;
    color: var(--winter-text);
    line-height: var(--winter-line-height-body);
    background: var(--winter-surface-muted);
    border-color: var(--winter-input-border);
}

.winter-attachment-action {
    min-width: 112px;
    height: 44px;
    padding: 8px 14px;
}

.winter-template .winter-attachment-remove {
    color: #c72c41;
}

.winter-template .winter-attachment-remove:hover,
.winter-template .winter-attachment-remove:focus {
    color: #a51f32;
    background: #fff7f8;
    border-color: #e5a8b1;
}

.winter-attachment-help {
    margin: 8px 0 0;
    font-size: var(--winter-font-size-caption);
    line-height: var(--winter-line-height-caption);
}

.winter-attachment-help small {
    font-size: inherit;
    line-height: inherit;
}

.winter-ticket-captcha {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--winter-border);
}

.winter-captcha {
    width: 100%;
    max-width: 560px;
    margin: 0 auto 24px;
    padding: 20px;
    background: var(--winter-surface-muted);
    border: 1px solid var(--winter-border);
    border-radius: 4px;
}

.winter-captcha-challenge {
    display: grid;
    gap: 14px;
    width: 100%;
}

.winter-captcha-copy {
    margin: 0;
    color: var(--winter-text);
    font-size: var(--winter-font-size-body);
    line-height: var(--winter-line-height-body);
    text-align: center;
}

.winter-captcha-controls {
    display: grid;
    grid-template-columns: 128px minmax(160px, 220px);
    gap: 12px;
    justify-content: center;
    align-items: center;
}

.winter-captcha-image {
    display: flex;
    width: 128px;
    height: 44px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--winter-input-border);
    border-radius: 4px;
}

.winter-captcha-image img {
    display: block;
    max-width: 100%;
    height: auto;
}

.winter-captcha-input {
    min-width: 0;
}

.winter-captcha-input .form-control {
    margin: 0;
    text-align: center;
    letter-spacing: .12em;
}

.winter-captcha-recaptcha {
    display: flex;
    justify-content: center;
    margin: 0;
}

.winter-cap-captcha {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.winter-cap-captcha cap-widget {
    --cap-background: #fff;
    --cap-border-color: rgba(15, 23, 42, .14);
    --cap-border-radius: 10px;
    --cap-color: #1f2937;
    --cap-font: inherit;
    --cap-widget-width: 280px;
    max-width: 100%;
}

.winter-cap-captcha-error {
    margin: 0;
    max-width: 520px;
    width: 100%;
}

.winter-page-account-contacts-new .alert-info,
.winter-page-account-contacts-manage .alert-info {
    color: var(--winter-text);
    background: var(--winter-surface-muted);
    border-color: var(--winter-border);
}

.winter-page-account-contacts-new .alert-info .btn,
.winter-page-account-contacts-manage .alert-info .btn {
    background: #fff;
    border-color: var(--winter-input-border);
}

.winter-checkbox-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px;
}

.winter-checkbox-list .form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.winter-checkbox-list .form-check-input {
    position: static;
    flex: 0 0 auto;
    margin: 5px 0 0;
}

.winter-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
}

.winter-affiliate-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.winter-affiliate-stat {
    display: grid;
    min-height: 130px;
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 14px;
    padding: 22px;
    background: #fff;
    border: 1px solid var(--winter-border);
    border-radius: var(--winter-radius);
}

.winter-affiliate-stat .winter-stat-icon {
    grid-row: 1 / span 2;
}

.winter-affiliate-stat strong {
    align-self: end;
    color: var(--winter-heading);
    font-size: 25px;
    line-height: 32px;
}

.winter-affiliate-stat > span:last-child {
    align-self: start;
    color: var(--winter-muted);
    font-size: 13px;
}

.winter-affiliate-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .7fr);
    gap: 20px;
}

.winter-commission-card .card-body {
    display: grid;
    gap: 14px;
}

.winter-commission-card .card-body > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.winter-commission-card strong {
    color: var(--winter-heading);
}

.winter-section-heading {
    margin: 36px 0 18px;
}

.winter-section-heading h2 {
    margin: 0;
    color: var(--winter-heading);
    font-size: var(--winter-font-size-section);
    font-weight: var(--winter-font-weight-display);
    line-height: var(--winter-line-height-section);
}

/* Invoice details */
.winter-invoice-page-header {
    margin-top: 6px;
    margin-bottom: 41px;
}

.winter-invoice-layout {
    display: grid;
    grid-template-columns: minmax(0, 928px) minmax(0, 280px);
    align-items: start;
    gap: 40px;
}

.winter-invoice-main {
    min-width: 0;
}

.winter-invoice-card {
    overflow: hidden;
    padding: 48px 32px 32px;
    background: var(--winter-surface);
    border: 1px solid var(--winter-border);
    border-radius: var(--winter-radius);
}

.winter-invoice-overview,
.winter-invoice-addresses,
.winter-invoice-notes,
.winter-invoice-section {
    margin-bottom: 42px;
}

.winter-invoice-section:last-child {
    margin-bottom: 0;
}

.winter-invoice-title-row {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
    gap: 0;
}

.winter-invoice-title {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
}

.winter-invoice-title h2 {
    margin: 0;
    color: var(--winter-heading);
    font-size: 38px;
    font-weight: var(--winter-font-weight-display);
    line-height: 48px;
    letter-spacing: -.45px;
}

.winter-invoice-status {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    padding: 5px 10px;
    font-size: var(--winter-font-size-caption);
    font-weight: 500;
    line-height: 18px;
    border-radius: 3px;
}

.winter-invoice-status-success {
    color: #287d46;
    background: #dff3e5;
}

.winter-invoice-status-danger {
    color: #b52c3b;
    background: #fde5e8;
}

.winter-invoice-status-warning {
    color: #95621e;
    background: #fff0d6;
}

.winter-invoice-status-info {
    color: #276b94;
    background: #e2f1fa;
}

.winter-invoice-status-muted {
    color: #6f7580;
    background: #eceef1;
}

.winter-invoice-meta {
    display: grid;
    gap: 8px;
    margin: 0;
}

.winter-invoice-meta > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}

.winter-invoice-meta dt,
.winter-invoice-meta dd {
    margin: 0;
    font-size: var(--winter-font-size-meta);
    font-weight: var(--winter-font-weight-body);
    line-height: var(--winter-line-height-meta-flow);
}

.winter-invoice-meta dt {
    color: var(--winter-heading);
}

.winter-invoice-meta dd {
    overflow-wrap: anywhere;
    color: var(--winter-muted);
}

.winter-invoice-addresses {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 0;
}

.winter-invoice-addresses h3,
.winter-invoice-notes h3,
.winter-invoice-section > h3,
.winter-invoice-credit-card h3 {
    margin: 0 0 12px;
    color: var(--winter-heading);
    font-size: 17px;
    font-weight: 600;
    line-height: 26px;
}

.winter-invoice-addresses address {
    margin: 0;
    color: var(--winter-text);
    font-size: var(--winter-font-size-body);
    font-style: normal;
    line-height: var(--winter-line-height-body);
}

.winter-invoice-notes > div {
    padding: 16px 18px;
    color: var(--winter-text);
    background: #eef5ff;
    border-left: 3px solid var(--winter-primary);
    border-radius: 3px;
}

.winter-invoice-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.winter-invoice-table {
    width: 100%;
    margin: 0;
    color: var(--winter-heading);
    font-size: var(--winter-font-size-meta);
    line-height: var(--winter-line-height-meta-flow);
    border-collapse: collapse;
}

.winter-invoice-table th,
.winter-invoice-table td {
    padding: 12px 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--winter-border);
}

.winter-invoice-table th {
    color: var(--winter-muted);
    font-weight: var(--winter-font-weight-body);
}

.winter-invoice-table th:last-child,
.winter-invoice-table td:last-child {
    text-align: right;
}

.winter-invoice-items-table th:first-child {
    width: 61%;
}

.winter-invoice-items-table th:nth-child(2) {
    width: 20%;
}

.winter-invoice-items-table th:last-child {
    width: 19%;
}

.winter-invoice-subtotal-row td {
    padding-top: 8px;
    padding-bottom: 8px;
    color: var(--winter-text);
    border-bottom: 0;
}

.winter-invoice-subtotal-row:first-of-type td {
    padding-top: 16px;
}

.winter-invoice-total-row td {
    padding-top: 16px;
    padding-bottom: 16px;
    color: var(--winter-heading);
    font-weight: 600;
    background: var(--winter-surface-muted);
    border-top: 1px solid var(--winter-border);
    border-bottom: 0;
}

.winter-invoice-total-row td:first-child {
    padding-left: 16px;
}

.winter-invoice-total-row td:last-child {
    padding-right: 16px;
}

.winter-invoice-empty-row td {
    padding: 24px 12px;
    color: var(--winter-muted);
    text-align: center;
}

.winter-invoice-tax-note {
    margin: 10px 0 0;
    color: var(--winter-muted);
    font-size: var(--winter-font-size-caption);
    line-height: var(--winter-line-height-caption);
}

.winter-invoice-sidebar {
    display: grid;
    gap: 28px;
}

.winter-invoice-summary-card,
.winter-invoice-credit-card {
    padding: 24px;
    border: 1px solid var(--winter-border);
}

.winter-invoice-credit-card {
    background: var(--winter-surface);
    border-radius: var(--winter-radius);
    box-shadow: var(--winter-shadow-soft);
}

.winter-invoice-summary-card {
    color: #fff;
    background: var(--winter-sidebar);
    border-color: var(--winter-sidebar);
    border-radius: 6px;
    box-shadow: 0 12px 30px rgba(29, 43, 64, .12);
}

.winter-invoice-summary-card > span {
    display: block;
    color: #c2c8d1;
    font-size: var(--winter-font-size-meta);
    line-height: var(--winter-line-height-meta);
}

.winter-invoice-summary-card > strong {
    display: block;
    margin: 4px 0 18px;
    overflow-wrap: anywhere;
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    line-height: 42px;
}

.winter-invoice-gateway-form {
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.winter-invoice-gateway-form label,
.winter-invoice-payment-method > span {
    display: block;
    margin: 0 0 8px;
    color: #c2c8d1;
    font-size: var(--winter-font-size-caption);
    line-height: var(--winter-line-height-caption);
}

.winter-invoice-payment-method {
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.winter-invoice-payment-method > strong {
    color: #fff;
    font-size: var(--winter-font-size-meta);
    font-weight: 500;
    line-height: var(--winter-line-height-meta-flow);
}

.winter-invoice-payment-button {
    margin-top: 14px;
    color: #d9dde4;
    font-size: var(--winter-font-size-meta);
    line-height: var(--winter-line-height-meta-flow);
}

.winter-invoice-payment-button form,
.winter-invoice-payment-button .btn,
.winter-invoice-payment-button button,
.winter-invoice-payment-button input[type="submit"] {
    width: 100%;
}

.winter-invoice-payment-button .btn,
.winter-invoice-payment-button button,
.winter-invoice-payment-button input[type="submit"] {
    color: var(--winter-primary);
    background: #e0ebff;
    border-color: #e0ebff;
}

.winter-invoice-payment-button p:last-child {
    margin-bottom: 0;
}

.winter-invoice-credit-card p {
    margin: 0 0 16px;
    color: var(--winter-text);
    font-size: var(--winter-font-size-meta);
    line-height: var(--winter-line-height-meta-flow);
}

.winter-invoice-credit-card .btn {
    width: 100%;
    margin-top: 12px;
}

.winter-invoice-actions h3 {
    margin: 0 0 12px;
    color: #a4a8b1;
    font-size: 20px;
    font-weight: 300;
    line-height: 28px;
}

.winter-invoice-actions a {
    display: flex;
    min-height: 42px;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    color: var(--winter-primary);
    font-size: var(--winter-font-size-meta);
    line-height: var(--winter-line-height-meta-flow);
}

.winter-invoice-actions a i {
    width: 18px;
    color: var(--winter-primary);
    text-align: center;
}

.winter-invoice-actions a:hover {
    color: var(--winter-primary-hover);
}

.winter-quote-accept .btn {
    width: 100%;
    color: var(--winter-primary);
    background: #e0ebff;
    border-color: #e0ebff;
}

.winter-quote-accept .btn:disabled {
    cursor: not-allowed;
    opacity: .64;
}

@media (max-width: 1199.98px) {
    .winter-invoice-layout {
        grid-template-columns: minmax(0, 1fr) 240px;
        gap: 28px;
    }

    .winter-invoice-card {
        padding: 40px 28px 28px;
    }

    .winter-invoice-title-row,
    .winter-invoice-addresses {
        gap: 0;
    }
}

@media (max-width: 991.98px) {
    .winter-invoice-layout {
        grid-template-columns: 1fr;
    }

    .winter-invoice-sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-row: 1;
    }

    .winter-invoice-main {
        grid-row: 2;
    }

    .winter-invoice-actions {
        padding: 22px;
        border: 1px solid var(--winter-border);
        border-radius: var(--winter-radius);
    }

    .winter-invoice-sidebar > :only-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .winter-invoice-page-header {
        margin-bottom: 28px;
    }

    .winter-invoice-card {
        padding: 22px 18px;
    }

    .winter-invoice-title-row,
    .winter-invoice-addresses {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .winter-invoice-title h2 {
        font-size: 30px;
        line-height: 40px;
    }

    .winter-invoice-overview,
    .winter-invoice-addresses,
    .winter-invoice-notes,
    .winter-invoice-section {
        margin-bottom: 34px;
    }

    .winter-invoice-items-table th:first-child {
        width: 40%;
    }

    .winter-invoice-items-table th:nth-child(2) {
        width: 32%;
    }

    .winter-invoice-items-table th:last-child {
        width: 28%;
    }

    .winter-invoice-items-table td:last-child {
        white-space: nowrap;
    }

    .winter-invoice-sidebar {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .winter-invoice-transactions .winter-invoice-table {
        display: block;
    }

    .winter-invoice-transactions thead {
        display: none;
    }

    .winter-invoice-transactions tbody,
    .winter-invoice-transactions tr {
        display: block;
        width: 100%;
    }

    .winter-invoice-transactions tr {
        padding: 10px 0;
        border-bottom: 1px solid var(--winter-border);
    }

    .winter-invoice-transactions td {
        display: flex;
        width: 100%;
        align-items: flex-start;
        justify-content: space-between;
        gap: 18px;
        padding: 5px 0;
        text-align: right;
        border: 0;
    }

    .winter-invoice-transactions td::before {
        color: var(--winter-muted);
        content: attr(data-label);
        text-align: left;
    }

    .winter-invoice-transactions .winter-invoice-empty-row td {
        display: block;
        padding: 18px 0;
        text-align: center;
    }

    .winter-invoice-transactions .winter-invoice-empty-row td::before,
    .winter-invoice-transactions .winter-invoice-total-row td::before {
        content: none;
    }

    .winter-invoice-transactions .winter-invoice-total-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        padding: 0;
        background: var(--winter-surface-muted);
        border: 0;
    }

    .winter-invoice-transactions .winter-invoice-total-row td:empty {
        display: none;
    }

    .winter-invoice-transactions .winter-invoice-total-row td {
        display: block;
        width: auto;
        padding: 14px 16px;
        text-align: left;
        background: transparent;
        border: 0;
    }

    .winter-invoice-transactions .winter-invoice-total-row td:last-child {
        text-align: right;
    }
}

@media print {
    .winter-page-viewinvoice #winterSidebar,
    .winter-page-viewquote #winterSidebar,
    .winter-page-viewinvoice .main-top,
    .winter-page-viewquote .main-top,
    .winter-page-viewinvoice .winter-page-header,
    .winter-page-viewquote .winter-page-header,
    .winter-page-viewinvoice .winter-invoice-sidebar,
    .winter-page-viewquote .winter-invoice-sidebar,
    .winter-page-viewinvoice footer.footer,
    .winter-page-viewquote footer.footer {
        display: none !important;
    }

    .winter-page-viewinvoice main,
    .winter-page-viewquote main {
        margin-left: 0;
    }

    .winter-page-viewinvoice section#main-body,
    .winter-page-viewquote section#main-body,
    .winter-page-viewinvoice .container.primary-content,
    .winter-page-viewquote .container.primary-content {
        width: 100%;
        max-width: none;
        padding: 0;
    }

    .winter-page-viewinvoice .winter-invoice-card,
    .winter-page-viewquote .winter-invoice-card {
        padding: 0;
        border: 0;
    }
}

.winter-ticket-layout {
    align-items: flex-start;
    margin-top: 12px;
}

.winter-ticket-content {
    padding-right: 20px;
}

.winter-ticket-section-heading {
    display: flex;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 14px;
}

.winter-ticket-section-heading h2 {
    margin: 0;
    color: var(--winter-heading);
    font-size: var(--winter-font-size-panel);
    font-weight: var(--winter-font-weight-display);
    line-height: var(--winter-line-height-panel);
}

.winter-ticket-settings-card {
    overflow: hidden;
    border: 1px solid var(--winter-border);
    border-radius: var(--winter-radius);
    box-shadow: none;
}

.winter-ticket-tab-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.winter-ticket-tabs {
    display: flex;
    gap: 8px;
    padding: 0 20px;
    background: #fafafa;
    border-bottom: 1px solid var(--winter-border);
}

.winter-ticket-tabs .nav-item {
    margin: 0;
}

.winter-ticket-tabs .nav-link {
    position: relative;
    display: flex;
    min-height: 52px;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 14px 4px;
    color: var(--winter-heading);
    font-size: 14px;
    font-weight: 600;
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
}

.winter-ticket-tabs .nav-link::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    content: "";
    background: transparent;
}

.winter-ticket-tabs .nav-link:hover,
.winter-ticket-tabs .nav-link:focus {
    color: var(--winter-primary);
    background: transparent;
    border: 0;
    box-shadow: none;
}

.winter-ticket-settings-card #winterTicketReplyToggle:checked ~ .winter-ticket-tabs label[for="winterTicketReplyToggle"],
.winter-ticket-settings-card #winterTicketRecipientsToggle:checked ~ .winter-ticket-tabs label[for="winterTicketRecipientsToggle"],
.winter-ticket-settings-card #winterTicketAttachmentsToggle:checked ~ .winter-ticket-tabs label[for="winterTicketAttachmentsToggle"] {
    color: var(--winter-primary);
}

.winter-ticket-settings-card #winterTicketReplyToggle:checked ~ .winter-ticket-tabs label[for="winterTicketReplyToggle"]::after,
.winter-ticket-settings-card #winterTicketRecipientsToggle:checked ~ .winter-ticket-tabs label[for="winterTicketRecipientsToggle"]::after,
.winter-ticket-settings-card #winterTicketAttachmentsToggle:checked ~ .winter-ticket-tabs label[for="winterTicketAttachmentsToggle"]::after {
    background: var(--winter-primary);
}

.winter-ticket-tab-count {
    display: inline-flex;
    min-width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    color: var(--winter-muted);
    font-size: 11px;
    line-height: 20px;
    background: #eef0f3;
    border-radius: 10px;
}

.winter-ticket-settings-card .tab-pane {
    display: none;
    padding: 24px;
}

.winter-ticket-settings-card #winterTicketReplyToggle:checked ~ .tab-content #winterTicketReply,
.winter-ticket-settings-card #winterTicketRecipientsToggle:checked ~ .tab-content #winterTicketRecipients,
.winter-ticket-settings-card #winterTicketAttachmentsToggle:checked ~ .tab-content #winterTicketAttachments {
    display: block;
}

.winter-ticket-reply-author {
    margin-bottom: 16px;
    padding: 14px 16px;
    color: var(--winter-heading);
    background: #f7f7f8;
    border-radius: var(--winter-radius);
}

.winter-ticket-reply-author strong,
.winter-ticket-reply-author span {
    display: block;
}

.winter-ticket-reply-author span {
    margin-top: 3px;
    color: var(--winter-muted);
    font-size: 12px;
}

.winter-ticket-reply-identity {
    margin-bottom: 0;
}

.winter-ticket-message-field {
    margin-bottom: 16px;
}

.winter-ticket-settings-card .md-editor {
    margin-bottom: 0;
    border-color: var(--winter-border);
    border-radius: var(--winter-radius);
    box-shadow: none;
}

.winter-ticket-reply-attachments {
    margin-bottom: 18px;
}

.winter-ticket-reply-attachments > label {
    color: var(--winter-muted);
}

.winter-ticket-form-actions {
    display: flex;
    gap: 10px;
}

.winter-ticket-cc-panel [menuItemName="Support"] {
    display: none !important;
}

.winter-ticket-cc-panel > .card {
    margin: 0 !important;
    border: 0;
    box-shadow: none;
}

.winter-ticket-cc-panel > .card > .card-header {
    display: none;
}

.winter-ticket-cc-panel > .card .card-body {
    padding: 0;
}

.winter-ticket-existing-attachments {
    min-height: 110px;
}

.winter-ticket-empty-state {
    margin: 34px 0;
    color: var(--winter-muted);
    text-align: center;
}

.winter-ticket-attachment-group + .winter-ticket-attachment-group {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--winter-border);
}

.winter-ticket-attachment-group > span {
    display: block;
    margin-top: 2px;
    color: var(--winter-muted);
    font-size: 12px;
}

.winter-ticket-messages {
    margin-top: 34px;
}

.winter-ticket-message-list {
    display: grid;
    gap: 20px;
}

.winter-template .view-ticket .winter-ticket-message {
    overflow: hidden;
    margin: 0;
    background: #fff;
    border: 1px solid var(--winter-border);
    border-radius: var(--winter-radius);
}

.winter-template .view-ticket .winter-ticket-message.staff {
    border-left: 3px solid var(--winter-primary);
}

.winter-template .view-ticket .winter-ticket-message .posted-by {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    color: var(--winter-muted);
    background: #fafafa;
    border-bottom: 1px solid var(--winter-border);
}

.winter-ticket-message-author {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.winter-ticket-message-author > i {
    color: #a5aab4;
}

.winter-ticket-message-author strong,
.winter-ticket-message-author small {
    display: block;
}

.winter-ticket-message-author strong {
    overflow: hidden;
    color: var(--winter-heading);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.winter-ticket-message-author small {
    margin-top: 3px;
    color: var(--winter-muted);
    font-size: 12px;
}

.winter-ticket-message-tools {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
}

.winter-template .view-ticket .winter-ticket-message .message {
    min-height: 92px;
    padding: 24px;
    color: var(--winter-heading);
    line-height: 1.75;
}

.winter-template .view-ticket .winter-ticket-message .attachments {
    padding: 0 24px 24px;
}

.winter-ticket-ip {
    margin: 22px 0 0;
    padding-top: 14px;
    color: var(--winter-muted);
    font-size: 12px;
    border-top: 1px solid var(--winter-border);
}

.winter-ticket-status-card {
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid var(--winter-border);
    border-radius: var(--winter-radius);
}

.winter-ticket-status-card > div {
    display: grid;
    min-height: 74px;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--winter-border);
}

.winter-ticket-status-card > div:last-child {
    border-bottom: 0;
}

.winter-ticket-status-card > div > i {
    grid-row: 1 / span 2;
    color: #a5aab4;
    font-size: 13px;
}

.winter-ticket-status-card > div span {
    align-self: end;
    color: var(--winter-muted);
    font-size: 12px;
}

.winter-ticket-status-card > div strong {
    align-self: start;
    color: var(--winter-heading);
    font-size: 13px;
    font-weight: 500;
    line-height: 19px;
    text-align: left;
}

@media (max-width: 991.98px) {
    .winter-ticket-content {
        padding-right: 15px;
    }

    .winter-ticket-meta {
        margin-top: 34px;
    }
}

/* Footer */
.winter-template footer.footer {
    flex: 0 0 auto;
    margin-top: auto;
    background: #fff;
    border-top: 1px solid var(--winter-border);
}

.winter-template footer.footer > .winter-footer-container {
    width: 100%;
    max-width: 1328px;
    padding-right: 40px;
    padding-left: 40px;
}

.winter-template footer.footer p,
.winter-template footer.footer a,
.winter-template footer.footer .btn {
    color: var(--winter-muted);
    font-size: var(--winter-font-size-meta);
    line-height: var(--winter-line-height-meta-flow);
}

.winter-template footer.footer .winter-footer-actions > .list-inline-item {
    margin-right: 0;
    vertical-align: middle;
}

.winter-template footer.footer .winter-footer-back-to-top {
    display: inline-flex;
    width: 50px;
    height: 44px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    padding: 12px 15px;
    color: #acafb9;
    line-height: 20px;
    vertical-align: middle;
}

.winter-template footer.footer .winter-footer-back-to-top:hover {
    color: var(--winter-primary);
}

.winter-template footer.footer .winter-footer-back-to-top > i {
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 20px;
    text-align: center;
}

@media (max-width: 1199.98px) {
    .winter-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .winter-template footer.footer > .winter-footer-container {
        padding-right: 28px;
        padding-left: 28px;
    }

    .winter-template .main-top {
        position: sticky;
        top: 0;
        height: 74px;
        padding: 17px 20px;
    }

    .winter-template .main-top .navbar-toggler {
        display: inline-flex;
    }

    /*
     * The mobile trigger is vertically centred inside the 74px top bar.
     * Offset its Popper menu past the bar's bottom divider, matching the
     * desktop menu's small gap below that divider.
     */
    .winter-template .main-top .winter-account-dropdown-menu {
        max-height: calc(100vh - 88px);
        margin-top: 22px;
    }

    .winter-template .main-top > .flex-grow-1 {
        display: flex;
        height: 40px;
        min-width: 0;
        align-items: center;
    }

    .winter-template .main-top .main-top-logo {
        display: flex;
        width: 95px;
        height: 40px;
        flex: 0 0 95px;
        align-items: center;
    }

    .winter-template .main-top .main-top-logo img {
        width: 95px;
        height: 40px;
    }

    .winter-top-action-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    .winter-template .main-top .winter-top-action {
        width: 34px;
        justify-content: center;
        padding-right: 4px;
        padding-left: 4px;
    }

    .winter-template main {
        transform: none;
        will-change: auto;
    }

    .winter-template.main-sidebar-open main {
        transform: none;
    }

    .winter-template #winterSidebar {
        width: min(300px, 84vw);
        transform: translateX(-100%);
    }

    .winter-template.main-sidebar-open #winterSidebar {
        transform: translateX(0);
    }

    .winter-template #winterSidebar .nav-link {
        min-height: 54px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 14px;
        padding: 12px 24px;
        font-size: 14px;
    }

    .winter-template #winterSidebar .winter-sidebar-brand .nav-link {
        min-height: 78px;
        justify-content: center;
    }

    .winter-sidebar-brand img {
        height: 60px;
    }

    .winter-nav-icon {
        width: 26px;
        font-size: 21px;
        text-align: center;
    }

    .winter-template .container.primary-content {
        padding: 40px 28px;
    }

    .winter-dashboard-layout {
        grid-template-columns: 1fr;
    }

    .winter-dashboard-aside {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        order: 2;
    }

    .winter-dashboard-main {
        order: 1;
    }

    .winter-panel-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .winter-template footer.footer > .winter-footer-container {
        padding-right: 24px;
        padding-left: 24px;
    }

    .winter-template .container.primary-content {
        max-width: 100%;
        padding: 40px 24px;
    }

    .winter-page-header {
        align-items: stretch;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 28px;
    }

    .winter-page-header h1 {
        font-size: 32px;
        line-height: 40px;
        letter-spacing: -.4px;
    }

    .winter-page-header .btn {
        width: 100%;
    }

    .winter-list-header-actions {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .winter-list-search {
        width: 100%;
    }

    .winter-reference-page-header {
        margin-bottom: 34px;
    }

    .winter-section-title,
    .winter-template .winter-type-section-title {
        margin-bottom: 16px;
        font-size: 21px;
        line-height: 28px;
    }

    .winter-stat-grid {
        display: flex;
        gap: 12px;
        margin-bottom: 0;
        margin-right: -24px;
        padding-right: 24px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .winter-stat-grid::-webkit-scrollbar {
        display: none;
    }

    .winter-stat-pagination {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin: -20px 0 20px;
    }

    .winter-stat-pagination span {
        width: 8px;
        height: 8px;
        background: #b6bac3;
        border-radius: 50%;
    }

    .winter-stat-pagination .is-active {
        background: #8f949e;
    }

    .winter-stat-card {
        display: flex;
        height: 74px;
        min-width: 100%;
        min-height: 74px;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 32px;
        padding: 8px 20px;
        text-align: left;
        scroll-snap-align: start;
    }

    .winter-stat-icon {
        position: static;
        display: flex;
        width: 12px;
        height: 12px;
        flex: 0 0 12px;
        align-items: center;
        justify-content: center;
        order: 1;
        margin-right: 20px;
        font-size: 14px;
        line-height: 12px;
    }

    .winter-stat-label {
        order: 2;
        margin: 0;
        font-size: 14px;
        line-height: 22px;
    }

    .winter-stat-value {
        order: 3;
        margin-left: auto;
        padding: 4px 0 8px;
        font-size: 32px;
        line-height: 32px;
    }

    .winter-dashboard-aside {
        grid-template-columns: 1fr;
        margin-top: 32px;
    }

    .winter-dashboard-services {
        margin-bottom: 20px;
    }

    .winter-panel-columns {
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: 20px;
    }

    .winter-panel-column {
        display: contents;
    }

    #overdueInvoicesPanel,
    #renewingServicesPanel {
        order: 1;
    }

    #ticketsPanel {
        order: 2;
    }

    #registerDomainPanel {
        order: 3;
    }

    #affiliatesPanel {
        order: 4;
    }

    #announcementsPanel {
        order: 5;
    }

    .winter-home-panel .card-header {
        min-height: 61px;
        padding: 16px 20px;
    }

    .winter-home-panel > .list-group.has-scroll {
        overflow-y: auto;
    }

    .winter-home-panel .list-group-item {
        padding: 12px 20px;
    }

    .winter-home-panel-services .list-group-item {
        padding: 0;
    }

    .winter-home-panel-services .list-group-item-content {
        min-height: 0;
        flex-wrap: wrap;
        gap: 8px 12px;
        padding: 12px 20px;
    }

    .winter-home-panel-services .list-group-item-name {
        flex: 1 1 calc(100% - 72px);
    }

    .winter-home-panel-services .list-group-item-actions {
        flex: 0 0 100%;
    }

    .winter-client-home-alert {
        align-items: flex-start;
    }

    .winter-client-home-alert-actions {
        align-self: center;
    }

    .winter-dashboard-empty-state {
        min-height: 160px;
    }

    .winter-domain-promo {
        min-height: 260px;
        padding: 36px 40px;
    }

    .winter-template .dataTables_wrapper .row:first-child {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .winter-template .dataTables_wrapper .row:first-child > div {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .winter-template .dataTables_filter {
        text-align: left !important;
    }

    .winter-template .dataTables_filter label {
        display: block;
        width: 100%;
        font-size: 0;
    }

    .winter-template .dataTables_filter input {
        width: 100%;
        min-width: 0;
        margin: 0;
        font-size: 14px;
    }

    .winter-template .dataTables_length {
        display: none;
    }

    .winter-table-toolbar {
        min-height: 0;
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
        padding: 16px;
    }

    .winter-table-filter {
        justify-content: space-between;
    }

    .winter-table-filter .form-control {
        width: 130px;
    }

    .winter-inactive-toggle {
        justify-content: space-between;
    }

    .winter-template .table-list > thead > tr > th,
    .winter-template .table-list > tbody > tr > td {
        padding-right: 14px;
        padding-left: 14px;
    }

    .winter-responsive-table .winter-mobile-hide {
        display: none !important;
    }

    .winter-responsive-table {
        width: 100% !important;
        table-layout: fixed;
    }

    .winter-responsive-table th:nth-last-child(2):first-child,
    .winter-responsive-table td:nth-last-child(2):first-child,
    .winter-responsive-table th:not(.winter-mobile-hide):first-of-type,
    .winter-responsive-table td:not(.winter-mobile-hide):first-of-type {
        width: 70%;
    }

    .winter-responsive-table th:last-child,
    .winter-responsive-table td:last-child {
        width: 30%;
        text-align: right !important;
    }

    .winter-services-table-card .winter-responsive-table th:first-child,
    .winter-services-table-card .winter-responsive-table td:first-child {
        width: 70%;
    }

    .winter-services-table-card .winter-responsive-table th:nth-child(4),
    .winter-services-table-card .winter-responsive-table td:nth-child(4) {
        width: 30%;
        text-align: right !important;
    }

    .winter-services-table-card .winter-responsive-table .label.status {
        justify-content: flex-end;
    }

    .winter-invoices-table th:first-child,
    .winter-invoices-table td:first-child {
        width: 42%;
    }

    .winter-invoices-table th:nth-child(4),
    .winter-invoices-table td:nth-child(4) {
        width: 27%;
    }

    .winter-invoices-table th:last-child,
    .winter-invoices-table td:last-child {
        width: 31%;
    }

    .winter-responsive-table td.dataTables_empty {
        width: 100% !important;
        text-align: center !important;
    }

    .winter-mobile-meta {
        display: block;
        margin-top: 8px;
        color: var(--winter-muted);
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
    }

    .winter-domain-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }

    .winter-domain-actions > .btn,
    .winter-domain-actions > .btn-group {
        width: 100%;
        margin: 0 !important;
    }

    .winter-domain-actions > .btn-group > .btn {
        width: 100%;
    }

    .winter-template .table-list > tbody > tr > td {
        height: 88px;
    }

    .winter-template .dataTables_info {
        padding-top: 18px;
        color: var(--winter-muted);
        font-size: 12px;
        text-align: center;
    }

    .winter-template .dataTables_paginate {
        display: flex;
        justify-content: center;
        padding-top: 10px;
    }

    .winter-template .card-body {
        padding: 20px;
    }

    .winter-template .winter-account-layout {
        display: flex;
        flex-direction: column;
    }

    .winter-template .winter-context-layout {
        display: flex;
        padding-left: 0;
        padding-right: 0;
        flex-direction: column;
    }

    .winter-template .winter-account-layout > * {
        width: 100%;
    }

    .winter-template .winter-context-layout > * {
        width: 100%;
    }

    .winter-template .winter-account-layout .winter-account-nav {
        order: 2;
    }

    .winter-template .winter-context-layout .winter-context-nav {
        position: static;
        width: 100%;
    }

    .winter-template .winter-context-layout .winter-context-sidebar {
        position: static;
        width: 100%;
        margin-top: 24px;
        order: 99;
    }

    .winter-user-list-item {
        min-height: 0;
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 16px;
    }

    .winter-user-actions {
        justify-content: flex-start;
    }

    .winter-users-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .winter-modal-source .modal-dialog {
        width: calc(100% - 24px);
        min-height: calc(100% - 24px);
        margin: 12px auto;
    }

    .winter-department-list {
        grid-template-columns: 1fr;
    }

    .winter-department,
    .winter-department:nth-child(2n),
    .winter-department:nth-last-child(-n+2) {
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid var(--winter-border);
    }

    .winter-department:last-child {
        border-bottom: 0;
    }

    .winter-department {
        padding: 16px 20px;
    }

    .winter-department-icon {
        margin-top: 1px;
    }

    .winter-department strong {
        font-size: 16px;
        line-height: 26px;
    }

    .winter-ticket-info-grid {
        grid-template-columns: 1fr;
    }

    .winter-ticket-section-card .card-body {
        padding: 20px;
    }

    .winter-attachment-row {
        grid-template-columns: 1fr;
    }

    .winter-attachment-action {
        width: 100%;
    }

    .winter-captcha {
        padding: 18px 16px;
    }

    .winter-captcha-controls {
        grid-template-columns: 1fr;
    }

    .winter-captcha-image {
        width: 100%;
    }

    .winter-checkbox-list {
        grid-template-columns: 1fr;
    }

    .winter-affiliate-stats,
    .winter-affiliate-grid {
        grid-template-columns: 1fr;
    }

    .winter-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .winter-ticket-layout {
        display: flex;
        flex-direction: column;
    }

    .winter-ticket-meta,
    .winter-ticket-content {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .winter-ticket-meta {
        margin-top: 30px;
        margin-bottom: 0;
    }

    .winter-ticket-tabs {
        overflow-x: auto;
        gap: 18px;
        padding: 0 16px;
        white-space: nowrap;
    }

    .winter-ticket-tabs .nav-link {
        min-height: 50px;
    }

    .winter-ticket-settings-card .tab-pane {
        padding: 18px 16px;
    }

    .winter-ticket-reply-author {
        margin-bottom: 14px;
    }

    .winter-ticket-form-actions .btn {
        flex: 1;
    }

    .winter-ticket-message-list {
        gap: 16px;
    }

    .winter-template .view-ticket .winter-ticket-message .posted-by {
        min-height: 0;
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        padding: 14px 16px;
    }

    .winter-ticket-message-tools {
        width: 100%;
        justify-content: space-between;
    }

    .winter-template .view-ticket .winter-ticket-message .message {
        min-height: 0;
        padding: 18px 16px;
    }

    .winter-template .view-ticket .winter-ticket-message .attachments {
        padding: 0 16px 18px;
    }

    .winter-ticket-section-heading h2 {
        font-size: 20px;
        line-height: 28px;
    }

    .winter-addfunds-card .card-body {
        padding: 24px;
    }
}

@media (max-width: 359.98px) {
    .winter-template .container.primary-content {
        padding-right: 18px;
        padding-left: 18px;
    }

    .winter-template .main-top {
        padding-right: 14px;
        padding-left: 14px;
    }

    .winter-template .main-top .main-top-logo img {
        max-width: 120px;
    }

    .winter-addfunds-card .card-body {
        padding: 20px 16px;
    }

    .winter-addfunds-amounts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/*
 * Login page
 *
 * Source structure: production Lagom2 includes/login/login.tpl and
 * includes/login/password-reset.tpl, reduced onto Twenty-One's native login
 * and password-reset contracts. The cards stay inside Winter's global sidebar,
 * top navigation, content region and footer.
 */
.winter-template.winter-page-login section#main-body,
.winter-template.winter-page-password-reset-container section#main-body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 0;
}

.winter-page-login .container.primary-content,
.winter-page-password-reset-container .container.primary-content {
    display: flex;
    width: 100%;
    max-width: none;
    min-height: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.winter-login {
    width: 380px;
    max-width: calc(100vw - 32px);
    margin: 0 auto;
    color: var(--winter-text);
}

.winter-login-wrapper {
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--winter-border);
    border-radius: var(--winter-radius);
}

.winter-login-body {
    padding: 32px;
}

.winter-login-title {
    margin: 0 0 30px;
    color: var(--winter-heading);
    font-size: 32px;
    font-weight: 500;
    line-height: 45px;
    letter-spacing: 0;
    text-align: center;
}

.winter-login-form .form-group {
    margin: 0 0 16px;
}

.winter-login-form label {
    display: block;
    margin: 0 0 8px;
    color: var(--winter-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.winter-login-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.winter-login-label-row label {
    margin-bottom: 8px;
}

.winter-login-label-row a {
    margin-bottom: 8px;
    color: var(--winter-primary);
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.winter-login-form .form-control {
    width: 100%;
    height: 52px;
    padding: 0 24px;
    color: var(--winter-heading);
    background: #fff;
    border: 1px solid #d4d6da;
    border-radius: 4px;
    font-size: 16px;
    line-height: 50px;
}

.winter-login-form .form-control::placeholder {
    color: #a5a8b0;
    opacity: 1;
}

.winter-login-form .form-control:focus {
    border-color: var(--winter-primary);
    box-shadow: 0 0 0 1px var(--winter-primary);
}

.winter-login-form .winter-login-password-group {
    margin-bottom: 16px;
}

.winter-login-form .winter-login-remember {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.winter-login-remember label {
    display: inline-flex;
    min-height: 20px;
    align-items: center;
    gap: 14px;
    margin: 0;
    color: var(--winter-heading);
    cursor: pointer;
}

.winter-login-remember input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--winter-primary);
}

.winter-login-remember span {
    font-size: 14px;
    line-height: 20px;
}

.winter-login-risk {
    min-height: 34px;
    margin: 0 0 16px;
    padding: 7px 10px;
    color: #e2282f;
    background: #fff0f1;
    border: 1px solid #f8d5d8;
    border-radius: 5px;
    font-size: 12px;
    line-height: 18px;
}

.winter-login-captcha {
    margin: 0 0 16px;
}

.winter-login-form #login {
    width: 100%;
    height: 52px;
    padding: 0 24px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    line-height: 50px;
}

.winter-login-footer {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 24px;
    color: var(--winter-text);
    background: #fff;
    border-top: 1px solid var(--winter-border);
    font-size: 14px;
    line-height: 20px;
}

.winter-login-footer a {
    color: var(--winter-primary);
    font-weight: 400;
}

.winter-page-login .providerLinkingFeedback:empty,
.winter-page-login .social-signin-btns:empty {
    display: none;
}

.winter-password-reset .winter-login-title {
    margin-bottom: 18px;
}

.winter-password-reset {
    transform: translateY(20px);
}

.winter-password-reset-description,
.winter-password-reset-message {
    margin: 0 0 28px;
    color: var(--winter-muted);
    font-size: 14px;
    line-height: 20px;
}

.winter-password-reset .winter-login-form .form-group {
    margin-bottom: 12px;
}

.winter-password-reset .winter-login-form button[type="submit"] {
    width: 100%;
    height: 52px;
    padding: 0 24px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    line-height: 50px;
}

@media (max-width: 479.98px) {
    .winter-template.winter-page-login section#main-body,
    .winter-template.winter-page-password-reset-container section#main-body {
        align-items: flex-start;
        padding: 24px 0;
    }

    .winter-login-body {
        padding: 28px 24px;
    }

    .winter-login-title {
        margin-bottom: 28px;
        font-size: 28px;
        line-height: 40px;
    }

    .winter-password-reset .winter-login-title {
        margin-bottom: 18px;
    }

    .winter-password-reset {
        transform: none;
    }

    .winter-login-footer {
        padding-right: 18px;
        padding-left: 18px;
    }
}