/* new design layer - loaded only when the "ui" cookie is "new" */
#productFilters.filters-sheet .modal-content {
    border: 0;
    border-radius: 22px 0 0 22px;
    background: #f5f5f7;
    box-shadow: -18px 0 50px rgba(0, 0, 0, .12);
}

#productFilters.filters-sheet .modal-header {
    padding: 24px 20px 14px;
    border-bottom: 0;
    background: transparent;
}

    #productFilters.filters-sheet .modal-header h1 {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 20px;
        font-weight: 600;
        letter-spacing: -.2px;
        color: #1d1d1f;
    }

        #productFilters.filters-sheet .modal-header h1 small {
            padding: 2px 9px;
            border-radius: 999px;
            background: #e8e8ed;
            color: #1d1d1f !important;
            font-size: 12px;
            font-weight: 600;
        }

    #productFilters.filters-sheet .btn-close {
        width: 26px;
        height: 26px;
        padding: 0;
        border-radius: 50%;
        background-color: #e8e8ed;
        background-size: 9px 9px;
        background-position: center;
        opacity: .75;
    }

        #productFilters.filters-sheet .btn-close:hover {
            opacity: 1;
        }

#productFilters.filters-sheet .filters-body {
    padding: 0 16px 20px;
    background: #f5f5f7;
}

#productFilters.filters-sheet .btn-close {
    transform: none !important;
}

#productFilters.filters-sheet .filters-selected {
    position: sticky;
    top: 0;
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 52px 12px 0;
    border: 0;
    background: #f5f5f7;
    overflow: visible;
}

#productFilters.filters-sheet .filters-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    height: 28px;
    padding: 0 9px 0 11px;
    border: 1px solid #e3e3e8;
    border-radius: 999px;
    background: #fff;
    color: #1d1d1f;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

    #productFilters.filters-sheet .filters-chip:hover {
        border-color: #154fef;
        color: #154fef;
    }

    #productFilters.filters-sheet .filters-chip i {
        font-size: 14px;
        color: #86868b;
    }

    #productFilters.filters-sheet .filters-chip:hover i {
        color: #154fef;
    }

#productFilters.filters-sheet .filters-clear {
    position: absolute;
    top: 10px;
    right: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #154fef;
    font-size: 12px;
    line-height: 28px;
    text-decoration: none;
    white-space: nowrap;
}

    #productFilters.filters-sheet .filters-clear:hover {
        color: #154fef;
        text-decoration: underline;
    }

#productFilters.filters-sheet .filters-item {
    position: relative;
    z-index: 0;
    margin: 0 0 12px;
    border: 0;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    box-shadow: none;
}

#productFilters.filters-sheet .accordion-header {
    margin: 0;
}

#productFilters.filters-sheet .accordion-button {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 50px;
    padding: 0 16px;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    color: #1d1d1f;
    font-size: 15px;
    letter-spacing: -.1px;
}

    #productFilters.filters-sheet .accordion-button .color {
        color: #86868b;
        font-weight: 400;
    }

    #productFilters.filters-sheet .accordion-button::after {
        content: "";
        width: 8px;
        height: 8px;
        margin-left: auto;
        border: 0;
        border-right: 2px solid #c7c7cc;
        border-bottom: 2px solid #c7c7cc;
        border-radius: 1px;
        background: none;
        transform: rotate(-45deg);
        transition: transform .28s cubic-bezier(.32, .72, 0, 1);
    }

    #productFilters.filters-sheet .accordion-button:not(.collapsed)::after {
        transform: rotate(45deg);
    }

    #productFilters.filters-sheet .accordion-button .accordion-pending {
        margin-left: auto;
        font-size: 16px;
        color: #86868b;
    }

    #productFilters.filters-sheet .accordion-button:has(.accordion-pending:not(.ng-hide))::after {
        display: none;
    }

#productFilters.filters-sheet .accordion-collapse.collapsing {
    transition: height .28s cubic-bezier(.32, .72, 0, 1);
}

#productFilters.filters-sheet .accordion-body {
    padding: 0 0 6px;
}

#productFilters.filters-sheet .attribute-value-list .form-control {
    flex: 1 1 auto !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #1d1d1f !important;
    font-size: 13px !important;
    line-height: 34px !important;
    box-shadow: none !important;
}

    #productFilters.filters-sheet .attribute-value-list .form-control::placeholder {
        color: #86868b;
    }

    #productFilters.filters-sheet .attribute-value-list .form-control:focus {
        background-color: rgba(118, 118, 128, .16);
    }

#productFilters.filters-sheet .attribute-value-list .input-group {
    gap: 8px;
    padding: 0 16px;
}

    #productFilters.filters-sheet .attribute-value-list .input-group .form-control {
        margin: 0;
        width: auto;
        padding: 0 12px;
        background-image: none;
        text-align: center;
    }

#productFilters.filters-sheet .attribute-value-list > .relative > .text-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 !important;
}

    #productFilters.filters-sheet .attribute-value-list > .relative > .text-center small {
        font-size: 12px;
        color: #86868b;
    }

    #productFilters.filters-sheet .attribute-value-list > .relative > .text-center::before {
        content: "";
        width: 13px;
        height: 13px;
        border: 2px solid #d8d8dd;
        border-top-color: #86868b;
        border-radius: 50%;
        animation: filtersSpin .7s linear infinite;
    }

#productFilters.filters-sheet .avl-label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #1d1d1f;
    font-size: 14px;
    cursor: pointer;
}

    #productFilters.filters-sheet .avl-label::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: #e5e5ea;
    }

    #productFilters.filters-sheet .avl-label:first-of-type::before {
        display: none;
    }

    #productFilters.filters-sheet .avl-label:hover {
        background: #f7f7f8;
    }

    #productFilters.filters-sheet .avl-label:active {
        background: #f0f0f2;
    }

    #productFilters.filters-sheet .avl-label input {
        display: none;
    }

    #productFilters.filters-sheet .avl-label span {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

#productFilters.filters-sheet .avl-check {
    display: block;
    flex: 0 0 auto;
    font-size: 22px;
    color: #154fef;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .18s ease, transform .18s ease;
}

#productFilters.filters-sheet .avl-label input:checked ~ .avl-check {
    opacity: 1;
    transform: none;
}

#productFilters.filters-sheet .modal-footer {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid #e5e5ea;
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

#productFilters.filters-sheet .filters-ghost {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: #154fef;
    font-size: 14px;
}

#productFilters.filters-sheet .filters-apply {
    flex: 1 1 auto;
    height: 46px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
}

#productFilters.filters-sheet .avl-search {
    display: flex !important;
    align-items: center;
    gap: 7px;
    height: 34px;
    margin: 8px 16px 6px !important;
    padding: 0 10px !important;
    border-radius: 10px;
    background: rgba(118, 118, 128, .12);
    overflow: hidden;
}

    #productFilters.filters-sheet .avl-search .avl-search-icon {
        display: block;
        flex: 0 0 auto;
        font-size: 15px;
        line-height: 1;
        color: #6e6e73;
        pointer-events: none;
    }

#productFilters.filters-sheet .avl-label {
    animation: none;
}

.quick-sheet .modal-content {
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .22);
}

.quick-sheet .modal-header {
    padding: 20px 22px 12px;
    border-bottom: 0;
}

    .quick-sheet .modal-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 17px;
        font-weight: 600;
        letter-spacing: -.2px;
        color: #1d1d1f;
    }

        .quick-sheet .modal-title i {
            color: #86868b;
        }

.quick-sheet .modal-header {
    position: relative;
}

.quick-sheet .btn-close {
    position: absolute;
    top: 18px;
    right: 20px;
    margin: 0 !important;
    transform: none !important;
    box-shadow: none;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    background-color: #e8e8ed;
    background-size: 9px 9px;
    background-position: center;
    opacity: .75;
}

    .quick-sheet .btn-close:hover,
    .quick-sheet .btn-close:focus,
    .quick-sheet .btn-close:active {
        opacity: 1;
        transform: none !important;
    }

.quick-sheet .modal-body {
    padding: 0 22px 18px;
}

.quick-sheet .quick-view-media {
    border-radius: 16px;
    background: #f5f5f7;
    overflow: hidden;
}

.quick-sheet .quick-view-stage {
    background: #f5f5f7;
}

.quick-sheet .quick-view-nav {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #1d1d1f;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

.quick-sheet .quick-view-360-hint,
.quick-sheet .quick-view-360-loading {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #fff;
    font-size: 12px;
}
.quick-view-thumbs {

    padding: 10px;
}
.quick-sheet .quick-view-thumbs button {
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    opacity: .55;
    transition: opacity .15s ease, box-shadow .15s ease;
}

    .quick-sheet .quick-view-thumbs button.active {
        opacity: 1;
        box-shadow: 0 0 0 2px #154fef;
    }

.quick-sheet .quick-view-name {
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.3px;
    color: #1d1d1f;
}

.quick-sheet .quick-view-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
    color: #86868b;
    font-size: 13px;
}

    .quick-sheet .quick-view-meta b {
        color: #1d1d1f;
        font-weight: 500;
    }

.quick-sheet .quick-view-tags {
    border-radius: 14px;
    background: #f5f5f7;
    overflow-y: auto;
    overscroll-behavior: contain;
    max-height: 52vh;
}

    .quick-sheet .quick-view-tags::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

.quick-sheet .quick-view-tag {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    padding: 8px 14px;
    border: 0;
    background: transparent;
}

    .quick-sheet .quick-view-tag::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: #e5e5ea;
    }

    .quick-sheet .quick-view-tag:first-child::before {
        display: none;
    }

    .quick-sheet .quick-view-tag span {
        flex: 0 0 42%;
        color: #86868b;
        font-size: 13px;
    }

    .quick-sheet .quick-view-tag b {
        flex: 1 1 auto;
        color: #1d1d1f;
        font-size: 13px;
        font-weight: 500;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.quick-sheet .quick-view-empty {
    padding: 18px;
    border-radius: 14px;
    background: #f5f5f7;
    color: #86868b;
    font-size: 13px;
    text-align: center;
}

.quick-sheet .modal-footer {
    gap: 10px;
    padding: 14px 22px 18px;
    border-top: 0;
}

    .quick-sheet .modal-footer .btn {
        height: 40px;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 500;
    }

    .quick-sheet .modal-footer .btn-outline-secondary {
        border: 0;
        background: #f5f5f7;
        color: #1d1d1f;
    }

#toast-container > div {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 240px;
    max-width: 380px;
    width: auto !important;
    margin: 10px auto 0 !important;
    padding: 13px 18px !important;
    border: 1px solid rgba(0, 0, 0, .06) !important;
    border-radius: 14px !important;
    background-color: rgba(255, 255, 255, .86) !important;
    background-image: none !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .16) !important;
    color: #1d1d1f !important;
    font-size: 13px;
    line-height: 1.45;
    letter-spacing: -.1px;
    opacity: 1 !important;
    animation: toastSheetIn .3s cubic-bezier(.32, .72, 0, 1);
}

    #toast-container > div::before {
        content: "";
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #8e8e93;
    }

    #toast-container > div:hover {
        box-shadow: 0 16px 44px rgba(0, 0, 0, .2) !important;
    }

#toast-container .toast-title {
    margin-bottom: 2px;
    font-size: 13px;
    font-weight: 600;
}

#toast-container .toast-message {
    font-size: 13px;
    color: #1d1d1f;
    word-break: break-word;
}

#toast-container .toast-close-button {
    align-self: flex-start;
    margin-left: 4px;
    color: #86868b;
    font-size: 16px;
    font-weight: 400;
    text-shadow: none;
    opacity: 1;
}

    #toast-container .toast-close-button:hover {
        color: #1d1d1f;
    }

#toast-container .toast-progress {
    height: 2px;
    background-color: #1d1d1f;
    opacity: .14;
}

@keyframes toastSheetIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.97);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.product-bottom-action .row {
    padding: 12px 16px !important;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 16px;
    background-color: rgba(255, 255, 255, .82) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .16) !important;
    color: #1d1d1f;
}

.product-bottom-action .text-white {
    color: #1d1d1f !important;
    font-size: 13px;
}

    .product-bottom-action .text-white b {
        font-weight: 600;
    }

    .product-bottom-action .text-white u {
        color: #154fef;
        text-decoration: none;
    }

        .product-bottom-action .text-white u:hover {
            text-decoration: underline;
        }

    .product-bottom-action .text-white .d-flex span {

        font-size: 12px;
    }

    .product-bottom-action .text-white input[type="checkbox"] {
        margin-right: 6px;
        accent-color: #154fef;
    }

.product-bottom-action .btn {
    height: 34px;
    padding: 0 14px;
    border: 0 !important;
    border-radius: 999px;
    background-color: rgba(118, 118, 128, .12) !important;
    color: #1d1d1f !important;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none !important;
    transition: background-color .15s ease;
}

    .product-bottom-action .btn:hover,
    .product-bottom-action .btn:focus,
    .product-bottom-action .btn.show {
        background-color: rgba(118, 118, 128, .2) !important;
        color: #1d1d1f !important;
    }

    .product-bottom-action .btn .bx {
        font-size: 16px;
        vertical-align: -2px;
    }

.product-bottom-action .dropdown-menu {
    border: 0;
    border-radius: 14px;
    padding: 6px;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .18);
}

    .product-bottom-action .dropdown-menu .dropdown-item {
        display: flex;
        align-items: center;
        gap: 10px;
        border-radius: 9px;
        padding: 8px 10px;
        color: #1d1d1f;
        font-size: 13px;
    }

        .product-bottom-action .dropdown-menu .dropdown-item:hover {
            background: rgba(118, 118, 128, .12);
        }

        .product-bottom-action .dropdown-menu .dropdown-item .bx {
            font-size: 17px;
            color: #86868b;
        }

    .product-bottom-action .dropdown-divider {
        margin: 6px 4px;
        border-top-color: #e5e5ea;
    }

.canva-modal .canva-close {
    transform: none !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.dropdown-menu:not(.ui-select-choices) {
    border: 0;
    border-radius: 14px;
    padding: 6px;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .18);
}

.dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 9px;
    padding: 8px 10px;
    color: #1d1d1f;
    font-size: 13px;
}

    .dropdown-menu .dropdown-item:hover,
    .dropdown-menu .dropdown-item:focus {
        background-color: rgba(118, 118, 128, .12);
        color: #1d1d1f;
    }

    .dropdown-menu .dropdown-item.active,
    .dropdown-menu .dropdown-item:active {
        background-color: rgba(21, 79, 239, .12);
        color: #154fef;
    }

    .dropdown-menu .dropdown-item.disabled,
    .dropdown-menu .dropdown-item:disabled {
        color: #b0b0b5;
    }

    .dropdown-menu .dropdown-item .bx,
    .dropdown-menu .dropdown-item > span[class^="bx"] {
        font-size: 17px;
        color: #86868b;
    }

.dropdown-menu .dropdown-divider {
    margin: 6px 4px;
    border-top-color: #e5e5ea;
}

.dropdown-menu .dropdown-header {
    padding: 6px 10px;
    color: #86868b;
    font-size: 12px;
    letter-spacing: 0;
}

#layout-menu.bg-menu-theme {
    background: #f7f7f8 !important;
    border-right:1px solid #eee;
}
.layout-menu.bg-menu-theme, .layout-menu.bg-menu-theme .menu-inner {
    background-color: #f7f7f8 !important;
}
#layout-menu .menu-inner {
    padding: 6px 8px !important;
}

#layout-menu .menu-item {
    margin: 0;
}

#layout-menu .menu-link {
    position: relative;
    min-height: 32px;
    height: 32px;
    margin: 1px 0;
    padding: 0 10px;
    border-radius: 10px;
    color: #1d1d1f;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -.1px;
    transition: background-color .15s ease, color .15s ease;
}

    #layout-menu .menu-link:hover {
        background-color: rgba(118, 118, 128, .1) !important;
        color: #1d1d1f !important;
    }

    #layout-menu .menu-link .menu-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        margin-right: 10px;
        font-size: 18px;
        line-height: 1;
        color: inherit;
    }

#layout-menu .menu-item.active > .menu-link {
    background-color: transparent !important;
    color: #154fef !important;
    font-weight: 500;
    box-shadow: none !important;
}

    #layout-menu .menu-item.active > .menu-link:hover {
        background-color: rgba(118, 118, 128, .1) !important;
        color: #154fef !important;
    }

   

#layout-menu .menu-item.open > .menu-link {
    background-color: transparent;
}

#layout-menu .menu-sub {
    padding: 2px 0 2px 26px;
}

    #layout-menu .menu-sub .menu-link {
        min-height: 32px;
        height: 32px;
        padding: 0 10px;
        font-size: 13px;
        color: #3a3a3c;
    }

        #layout-menu .menu-sub .menu-link::before {
            display: none !important;
            content: none !important;
        }

   

#layout-menu .menu-header {
    padding: 14px 12px 6px;
    color: #86868b;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

    #layout-menu .menu-header::before {
        display: none;
    }

.modal-title,
.modal-header h1,
.modal-header h5 {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.2px;
    color: #1d1d1f;
}

.modal .btn-close {
    position: absolute;
    top: 16px;
    right: 18px;
    margin: 0 !important;
    padding: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #e8e8ed;
    background-size: 9px 9px;
    background-position: center;
    box-shadow: none;
    opacity: .75;
    transform: none !important;
}

    .modal .btn-close:hover,
    .modal .btn-close:focus,
    .modal .btn-close:active {
        opacity: 1;
        transform: none !important;
    }

#layout-menu .menu-toggle::after,
#layout-menu .menu-sub .menu-toggle::after {
    display: none !important;
    content: none !important;
}

.product-item tbody:hover .tb-attributes-values {
    padding: 0 !important;
    border-radius: 0 0 12px 12px !important;
    background: rgb(247 247 248) !important;
    box-shadow: 0 16px 30px -10px rgba(0, 0, 0, .18) !important;
}

.tb-attributes-values > div {
    position: relative;
}

.tb-attributes-values > div > span {
align-items: center;
    gap: 12px;
    min-height: 24px;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.35;
}

    .tb-attributes-values > div > span > span {
        flex: 0 0 auto;
        max-width: 48%;
        color: #1d1d1f;
        text-align: left;
    }
.product-item-detail {
    padding: 15px 15px 0;
}
    .tb-attributes-values > div > span > b {
        flex: 1 1 auto;
        min-width: 0;
        color: #1d1d1f;
        font-weight: 600;
        text-align: right;
    }

.canva-modal .canva-close,
.quick-sheet .btn-close,
#productFilters.filters-sheet .btn-close {
    top: 16px;
    right: 18px;
}

.stickyProductHideOrShow {
    width: 36px !important;
    height: 36px !important;
    background: transparent !important;
    box-shadow: none !important;
}

    .stickyProductHideOrShow button {
        width: 36px;
        height: 36px;
        border: 1px solid rgba(0, 0, 0, .06);
        border-radius: 50%;
        background-color: rgba(255, 255, 255, .92) !important;
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
        box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
        color: #154fef !important;
    }

        .stickyProductHideOrShow button i {
            font-size: 20px;
        }

    .stickyProductHideOrShow.disable {
        right: 0 !important;
        width: 26px !important;
        height: 48px !important;
    }

        .stickyProductHideOrShow.disable button {
            width: 26px;
            height: 48px;
            border-right: 0;
            border-radius: 12px 0 0 12px;
        }

.modal-content {
    border: 0;
    border-radius: 18px;
}

.modal-header {
    position: relative;
    padding: 20px 22px 10px;
    border-bottom: 0;
}

.modal-footer {
    gap: 8px;
    padding: 12px 22px 18px;
    border-top: 0;
}

    .modal-footer .btn {
        border-radius: 999px;
    }

#productCollection .modal-body,
#productRecap .modal-body {
    padding: 0 22px 6px !important;
}

    #productCollection .modal-body .card,
    #productRecap .modal-body .card {
        border: 0;
        background: transparent;
    }

#productCollection .table,
#productRecap .table {
    margin: 0;
    background: transparent;
}

    #productCollection .table thead th,
    #productRecap .table thead th {
        padding: 0 0 12px;
        border: 0;
        background: transparent;
    }

    #productCollection .table .input-search-box .form-control,
    #productRecap .table .input-search-box .form-control {
        height: 34px;
        padding: 0 12px 0 34px;
        border: 0;
        border-radius: 10px;
        background: rgba(118, 118, 128, .12);
        font-size: 13px;
        box-shadow: none;
    }

    #productCollection .table .input-search-icon,
    #productRecap .table .input-search-icon {
        left: 10px;
        right: auto;
        color: #6e6e73;
    }

    #productCollection .table tbody tr,
    #productRecap .table tbody tr {
        background: transparent !important;
    }

    #productCollection .table tbody td,
    #productRecap .table tbody td {
        padding: 0;
        border: 0;
    }

    #productCollection .table tbody label,
    #productRecap .table tbody label {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        height: 44px;
        margin: 0;
        padding: 0 4px;
        color: #1d1d1f;
        font-size: 14px;
        cursor: pointer;
    }

        #productCollection .table tbody tr + tr label::before,
        #productRecap .table tbody tr + tr label::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: #e5e5ea;
        }

        #productCollection .table tbody label:hover,
        #productRecap .table tbody label:hover {
            background: #f7f7f8;
        }

        #productCollection .table tbody label input[type="checkbox"],
        #productRecap .table tbody label input[type="checkbox"] {
            position: static;
            width: 17px;
            height: 17px;
            margin: 0;
            accent-color: #154fef;
        }

#productCollection .alert-info,
#productRecap .alert-info {
    margin-top: 12px;
    padding: 12px 14px;
    border: 0;
    border-radius: 12px;
    background: #f5f5f7;
    color: #3a3a3c;
    font-size: 13px;
}

#createCollection .modal-body .w-100 {
    max-width: 520px;
    margin: 0 auto;
}

#createCollection .form-floating > .form-control,
#createCollection .search-user .form-control {
    height: 46px;
    border: 1px solid #e3e3e8;
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
}

    #createCollection .form-floating > .form-control:focus {
        border-color: #154fef;
        box-shadow: 0 0 0 3px rgba(21, 79, 239, .12);
    }

#createCollection .form-group {
    margin-bottom: 12px;
}

#createCollection .modal-footer .btn,
#createCollection .modal-body .btn-lg {
    height: 44px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
}

@media (min-width: 1200px) {
    #layout-navbar {
        display: none !important;
    }

    .layout-content-navbar .layout-menu {
        padding-top: 0 !important;
    }

    .layout-container {
        padding-top: 0 !important;
    }

    .layout-page .container-xxl.container-p-y {
        padding: 0 !important;
    }
}

#layout-menu {
    display: flex;
    flex-direction: column;
    overflow: visible;
    border-right: 0;
}
.collection-products-header {
    border-bottom: 1px solid #eee;
    margin: 0 -18px;
    padding: 0 18px 10px;
}
    #layout-menu .menu-inner {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 6px 5px !important;

    }

    #layout-menu .menu-inner-shadow {
        display: none;
    }

.menu-vertical .menu-block,
.menu-vertical .menu-inner > .menu-header,
.menu-vertical .menu-inner > .menu-item {
    width: 100%;
}

#layout-menu .menu-inner::-webkit-scrollbar {
    width: 0;
    height: 0;
}

#layout-menu .ps__rail-x,
#layout-menu .ps__rail-y,
#layout-menu .ps__thumb-x,
#layout-menu .ps__thumb-y {
    display: none !important;
}

#layout-menu .menu-inner,
#layout-menu .menu-inner > .menu-item,
#layout-menu .menu-sub,
#layout-menu .menu-item > .menu-link,
#layout-menu .menu-footer {
    border-left: 0 !important;
    border-right: 0 !important;
}



    #layout-menu .menu-inner::before,
    #layout-menu .menu-inner::after {
        display: none !important;
    }

.menu-brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    height: 30px;
    padding: 0 15px;
    margin-top: 10px;
}

    .menu-brand img {
        max-height: 15px;
        max-width: 100%;
    }

#layout-menu .menu-uygulamalar {
    margin: 14px 0 4px !important;
    padding: 0 10px !important;
    gap: 10px !important;
}

    #layout-menu .menu-uygulamalar .uygulama-rozeti img {
        max-width: 132px;
        height: auto;
    }

.menu-footer {
    position: relative;
    flex: 0 0 auto;
    padding: 6px 10px 10px;
    background: #f1f1f3;
    border-top: 1px solid #ececf0;
}

    .menu-footer .navbar-nav {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
        gap: 2px;
        margin: 0;
    }

    .menu-footer .nav-item {
        position: static;
        width: 100%;
    }

    .menu-footer .nav-link,
    .menu-footer .btn.nav-link {
        display: flex !important;
        align-items: center;
        justify-content: flex-start !important;
        gap: 10px;
        width: 100%;
        min-height: 36px;
        height: 36px;
        margin: 1px 0;
        padding: 0 10px !important;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: #1d1d1f !important;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: -.1px;
        text-align: left;
        transition: background-color .15s ease;
    }

        .menu-footer .nav-link:hover,
        .menu-footer .btn.nav-link:hover,
        .menu-footer .nav-link:focus,
        .menu-footer .btn.nav-link:focus {
            background-color: rgba(118, 118, 128, .1);
            color: #1d1d1f;
            box-shadow: none;
        }

        .menu-footer .nav-item.open > .nav-link,
        .menu-footer .nav-item.show > .nav-link,
        .menu-footer .nav-link.show,
        .menu-footer .nav-link:active,
        .menu-footer .btn.nav-link.show,
        .menu-footer .btn.nav-link:active {
            background-color: rgba(118, 118, 128, .14) !important;
            color: #1d1d1f !important;
            box-shadow: none !important;
        }

    .menu-footer .nav-glyph {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        font-size: 18px;
        line-height: 1;
        color: inherit;
    }

    .menu-footer .nav-label {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .menu-footer .nav-caret {
        flex: 0 0 auto;
        font-size: 16px;
        color: #c7c7cc;
    }

    .menu-footer .badge-notifications {
        position: static !important;
        top: auto !important;
        right: auto !important;
        flex: 0 0 auto;
        min-width: 18px;
        padding: 0 5px;
        line-height: 18px;
        font-size: 11px;
        font-weight: 500;
        transform: none !important;
    }

    .menu-footer .dropdown-menu {
        position: absolute !important;
        inset: auto auto 4px 100% !important;
        z-index: 1090;
        min-width: 0;
        margin: 0 0 0 10px !important;
        transform: none !important;
    }

    .menu-footer .notifications-sheet {
        width: 340px;
    }

    .menu-footer .user-sheet {
        width: 232px;
    }

.notifications-sheet {
    flex-direction: column;
    max-height: min(400px, calc(100vh - 32px));
    padding: 0 !important;
    overflow: hidden !important;
}

.open > .notifications-sheet,
.notifications-sheet.show {
    display: flex !important;
}

    .notifications-sheet .dropdown-menu-header {
        flex: 0 0 auto;
        padding: 0;
        border-bottom: 1px solid #ececf0;
    }

    .notifications-sheet .dropdown-header {
        display: flex;
        align-items: center;
        padding: 10px 14px;
    }

        .notifications-sheet .dropdown-header h5 {
            margin: 0;
            color: #1d1d1f;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: -.2px;
        }

.notifications-sheet .dropdown-notifications-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

    .notifications-sheet .list-group {
        max-height: none;
        margin: 0;
        padding: 0;
        border: 0;
        overflow: visible;
        background: transparent;
    }

    .notifications-sheet .dropdown-item {
        display: block;
        position: relative;
        width: 100%;
        margin: 0;
        padding: 8px 12px 8px 24px;
        border-radius: 0;
        color: #1d1d1f;
        font-size: 12.5px;
        line-height: 1.35;
        white-space: normal;
    }

        .notifications-sheet .dropdown-item + .dropdown-item::before {
            content: "";
            position: absolute;
            top: 0;
            left: 24px;
            right: 12px;
            height: 1px;
            background: #f0f0f3;
        }

        .notifications-sheet .dropdown-item:hover {
            background-color: rgba(118, 118, 128, .08);
        }

        .notifications-sheet .dropdown-item .text-muted {
            margin-top: 1px;
            color: #86868b !important;
            font-size: 11px;
        }

        .notifications-sheet .dropdown-item strong {
            font-weight: 600;
        }

    .notifications-sheet .dropdown-notifications-read {
        position: absolute;
        top: 13px;
        left: 10px;
        line-height: 0;
    }

        .notifications-sheet .dropdown-notifications-read .badge-dot {
            display: block;
            width: 6px;
            height: 6px;
            padding: 0;
            border-radius: 50%;
            background-color: #154fef;
        }

    .notifications-sheet .dropdown-notifications-list::-webkit-scrollbar {
        width: 6px;
    }

    .notifications-sheet .dropdown-notifications-list::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background: rgba(118, 118, 128, .3);
    }

.user-sheet {
    padding: 6px !important;
}

    .user-sheet .dropdown-header {
        padding: 6px 10px 4px;
        color: #86868b;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .user-sheet .dropdown-item,
    .user-sheet .btn {
        display: flex !important;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 34px;
        padding: 0 10px !important;
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: #1d1d1f;
        font-size: 13px;
        text-align: left;
    }

        .user-sheet .dropdown-item i,
        .user-sheet .btn i {
            font-size: 16px;
            color: #86868b;
        }

        .user-sheet .dropdown-item:hover,
        .user-sheet .btn:hover {
            background-color: rgba(118, 118, 128, .12);
            color: #1d1d1f;
        }

        .user-sheet .dropdown-item.active {
            background: transparent;
            color: #154fef;
            font-weight: 500;
        }

            .user-sheet .dropdown-item.active i {
                color: #154fef;
            }

    .user-sheet .dropdown-divider {
        margin: 5px 6px;
        border-top: 1px solid #ececf0;
        opacity: 1;
    }

    .user-sheet form {
        margin: 0;
    }

.date-filter .date-picker.form-control {
    height: 36px;
    padding: 0 34px 0 12px;
    border: 1px solid #e3e3e8;
    border-radius: 10px;
    background: #fff;
    color: #1d1d1f;
    font-size: 13px;
    box-shadow: none;
}

    .date-filter .date-picker.form-control:focus {
        border-color: #154fef;
        box-shadow: 0 0 0 3px rgba(21, 79, 239, .12);
    }

    .date-filter .date-picker.form-control::placeholder {
        color: #a1a1a6;
    }

.date-filter .dateClear {
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
}

    .date-filter .dateClear button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        padding: 0;
        border-radius: 50%;
        background-color: rgba(118, 118, 128, .14) !important;
        color: #6e6e73;
        font-size: 14px;
    }

        .date-filter .dateClear button:hover {
            background-color: rgba(118, 118, 128, .24) !important;
            color: #1d1d1f;
        }

.daterangepicker {
    z-index: 3001;
    margin-top: 6px;
    padding: 8px;
    border: 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, .98);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .18), 0 0 0 1px rgba(0, 0, 0, .05);
    font-family: inherit;
    font-size: 13px;
    color: #1d1d1f;
}

    .daterangepicker::before,
    .daterangepicker::after {
        display: none !important;
    }

    .daterangepicker .calendar {
        margin: 4px;
    }

    .daterangepicker .calendar-table {
        border: 0;
        border-radius: 12px;
        background: transparent;
    }

    .daterangepicker table {
        border-collapse: separate;
        border-spacing: 2px;
    }

    .daterangepicker th,
    .daterangepicker td {
        width: 32px;
        min-width: 32px;
        height: 30px;
        border: 0 !important;
        border-radius: 9px;
        font-size: 12.5px;
        font-weight: 400;
        line-height: 30px;
        vertical-align: middle;
    }

    .daterangepicker th {
        color: #86868b;
        font-weight: 500;
    }

        .daterangepicker th.month {
            color: #1d1d1f;
            font-size: 13.5px;
            font-weight: 600;
            letter-spacing: -.2px;
        }

    .daterangepicker td.available:hover,
    .daterangepicker th.available:hover {
        background-color: rgba(118, 118, 128, .12);
        color: #1d1d1f;
    }

    .daterangepicker td.off,
    .daterangepicker td.off.in-range,
    .daterangepicker td.off.start-date,
    .daterangepicker td.off.end-date {
        background: transparent;
        color: #c7c7cc;
    }

    .daterangepicker td.in-range {
        background-color: rgba(21, 79, 239, .1);
        border-radius: 0;
        color: #1d1d1f;
    }

    .daterangepicker td.active,
    .daterangepicker td.active:hover {
        background-color: #154fef !important;
        border-radius: 9px;
        color: #fff !important;
        font-weight: 500;
    }

    .daterangepicker td.start-date {
        border-radius: 9px 0 0 9px;
    }

    .daterangepicker td.end-date {
        border-radius: 0 9px 9px 0;
    }

    .daterangepicker td.start-date.end-date {
        border-radius: 9px;
    }

    .daterangepicker td.today {
        font-weight: 600;
    }

    .daterangepicker .next span,
    .daterangepicker .prev span {
        border-color: #6e6e73;
        border-width: 0 2px 2px 0;
    }

    .daterangepicker select {
        height: 28px;
        border: 1px solid #e3e3e8;
        border-radius: 8px;
        background: #fff;
        font-size: 12px;
        color: #1d1d1f;
    }

    .daterangepicker .daterangepicker_input .form-control,
    .daterangepicker .input-mini {
        height: 32px;
        padding-left: 30px;
        border: 1px solid #e3e3e8;
        border-radius: 9px;
        background: #fff;
        font-size: 12.5px;
        color: #1d1d1f;
        box-shadow: none;
    }

        .daterangepicker .input-mini.active {
            border-color: #154fef;
            box-shadow: 0 0 0 3px rgba(21, 79, 239, .12);
        }

    .daterangepicker .daterangepicker_input i {
        color: #86868b;
    }

    .daterangepicker .ranges {
        margin: 0;
        padding: 4px;
    }

        .daterangepicker .ranges li {
            margin: 1px 0;
            padding: 7px 12px;
            border: 0;
            border-radius: 9px;
            background: transparent;
            color: #1d1d1f;
            font-size: 13px;
        }

            .daterangepicker .ranges li:hover {
                background-color: rgba(118, 118, 128, .12);
                border: 0;
                color: #1d1d1f;
            }

            .daterangepicker .ranges li.active {
                background-color: rgba(21, 79, 239, .12);
                border: 0;
                color: #154fef;
                font-weight: 500;
            }

    .daterangepicker .range_inputs,
    .daterangepicker .drp-buttons {
        display: flex;
        gap: 8px;
        justify-content: flex-end;
        padding: 8px 4px 2px;
        border-top: 1px solid #ececf0;
    }

        .daterangepicker .range_inputs .btn,
        .daterangepicker .drp-buttons .btn {
            height: 32px;
            margin: 0;
            padding: 0 16px;
            border: 0;
            border-radius: 999px;
            font-size: 13px;
            font-weight: 500;
        }

        .daterangepicker .range_inputs .applyBtn,
        .daterangepicker .drp-buttons .applyBtn {
            background-color: #154fef;
            color: #fff;
        }

        .daterangepicker .range_inputs .cancelBtn,
        .daterangepicker .drp-buttons .cancelBtn {
            background-color: rgba(118, 118, 128, .12);
            color: #1d1d1f;
        }

.datalist_attribute {
    width: calc(100% + 70px);
    padding: 4px;
    border: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, .98);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .16), 0 0 0 1px rgba(0, 0, 0, .05) !important;
    top: calc(100% + 6px);
}

    .datalist_attribute label {
        display: block;
        margin: 1px 0;
        padding: 8px 10px;
        border-bottom: 0 !important;
        border-radius: 9px;
        color: #1d1d1f;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.3;
        cursor: pointer;
    }

        .datalist_attribute label:hover {
            background-color: rgba(118, 118, 128, .12);
            color: #1d1d1f;
            text-decoration: none;
        }

.datalist_search {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0 0 4px;
    padding: 4px 4px 6px;
    background: rgba(255, 255, 255, .98);
}

    .datalist_search input.form-control {
        height: 34px;
        padding: 0 12px;
        border: 0;
        border-radius: 10px !important;
        background: rgba(118, 118, 128, .12);
        font-size: 13px;
        color: #1d1d1f;
        box-shadow: none;
    }

        .datalist_search input.form-control:focus {
            background: rgba(118, 118, 128, .16);
            box-shadow: none;
        }

#layout-menu .menu-uygulamalar .uygulama-rozeti {
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.menu-footer .nav-label {
    display: block !important;
    max-width: none !important;
}

.user-sheet .dropdown-item,
.user-sheet .btn,
.user-sheet form > .btn {
    justify-content: flex-start !important;
    font-weight: 400 !important;
}

.user-sheet .dropdown-item.active {
    font-weight: 500 !important;
}

.daterangepicker .calendar,
.daterangepicker .calendar.left .calendar-table,
.daterangepicker .calendar.right .calendar-table,
.daterangepicker .calendar-table,
.daterangepicker .calendar-table table,
.daterangepicker table.table-condensed,
.daterangepicker table.table-condensed thead,
.daterangepicker table.table-condensed tbody {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.daterangepicker .calendar.left .calendar-table,
.daterangepicker .calendar.right .calendar-table {
    padding: 0 !important;
}

.daterangepicker .calendar.left {
    margin-right: 16px !important;
}

.daterangepicker .calendar.right {
    margin-right: 6px !important;
}

.menu-footer .navbar-nav {
    padding: 0 !important;
}

.layout-page .container-xxl.flex-grow-1.container-p-y {
    padding: 0 !important;
}

.table-special {
    margin: 0 !important;
}

.create-and-edit {
    width: calc(100% - 215px) !important;
    height: 52px;
    margin-left: 215px !important;
    padding: 0 22px !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, .94) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .05) !important;
}

    .create-and-edit .create-and-edit-title h2 {
        font-size: 16px;
        font-weight: 600;
        letter-spacing: -.2px;
        color: #1d1d1f;
    }

    .create-and-edit .btn-default {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background-color: #e8e8ed !important;
        color: #1d1d1f;
        font-size: 13px;
        white-space: nowrap;
    }

        .create-and-edit .btn-default .bx {
            font-size: 16px;
        }

        .create-and-edit .btn-default:hover {
            background-color: #dcdce2 !important;
        }

    .create-and-edit .btn-save,
    .create-and-edit .btn-primary,
    .create-and-edit .btn-outline-white,
    .create-and-edit .btn-group > .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 32px;
        margin: 0;
        padding: 0 18px;
        border: 0 !important;
        border-radius: 999px !important;
        font-size: 13.5px;
        font-weight: 500;
        line-height: 1;
        box-shadow: none !important;
    }

    .create-and-edit .btn-outline-white,
    .create-and-edit .btn-group > .btn:not(.btn-primary):not(.btn-save) {
        background-color: rgba(118, 118, 128, .12) !important;
        color: #1d1d1f !important;
    }

        .create-and-edit .btn-outline-white:hover,
        .create-and-edit .btn-group > .btn:not(.btn-primary):not(.btn-save):hover {
            background-color: rgba(118, 118, 128, .2) !important;
        }

    .create-and-edit .btn-group {
        gap: 0;
        box-shadow: none;
    }

    .create-and-edit .create-and-edit-title .h1 {
        display: block;
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: -.2px;
        line-height: 1.2;
        color: #1d1d1f;
    }

.create-and-edit ~ .form-horizontal {
    display: block;
    min-height: 100vh;
    padding-top: 65px;
    background: #ffffff;
}

.create-and-edit-form {
    padding: 0 22px;
}

.list-toolbar-outside {
    padding: 10px !important;
    padding-bottom: 0 !important;
}

.layout-page .table {
    margin-bottom: 0;
    border-radius: 0;
    box-shadow: none;
}

    .layout-page .table > :last-child,
    .layout-page .table > :last-child tr,
    .layout-page .table > :last-child tr td {
        border-radius: 0;
    }

body,
.layout-wrapper,
.layout-page,
.content-wrapper {
    background: #fff !important;
}

.layout-page tfoot tr:not(:has(nav)) {
    display: none;
}

.layout-page .pagination {
    gap: 4px;
    margin: 0;
    padding: 12px 0;
    justify-content: center;
}
#backToUp {
    position: fixed;
    right: 17px;
    bottom: 20px;
}
    .layout-page .pagination li a {
            display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #1d1d1f;
    font-size: 13px;
    }

        .layout-page .pagination li a:hover {
            background-color: rgba(118, 118, 128, .12);
        }

    .layout-page .pagination li.active a {
        background-color: #154fef;
        color: #fff;
        font-weight: 500;
    }

.layout-page .table td .btn-group {
    gap: 4px;
    border-radius: 0;
    box-shadow: none;
}

.layout-page .table td .btn-group .btn,
.layout-page .table td .btn-outline-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background-color: rgba(118, 118, 128, .12) !important;
    color: #1d1d1f !important;
    font-size: 13px;
    box-shadow: none !important;
    transition: background-color .15s ease, color .15s ease;
}

.layout-page .table td .btn-group .btn:has(> i):not(:has(> span)):not(.dropdown-toggle),
.layout-page .table td .btn-outline-secondary:has(> i):not(:has(> span)):not(.dropdown-toggle) {
    width: 32px;
    padding: 0;
    border-radius: 50% !important;
    background: transparent !important;
    color: #6e6e73 !important;
}

    .layout-page .table td .btn-group .btn i,
    .layout-page .table td .btn-outline-secondary i {
        font-size: 17px;
    }

    .layout-page .table td .btn-group .btn:hover,
    .layout-page .table td .btn-outline-secondary:hover,
    .layout-page .table td .btn-outline-secondary:has(> i):not(:has(> span)):not(.dropdown-toggle):hover,
    .layout-page .table td .btn-group .btn:has(> i):not(:has(> span)):not(.dropdown-toggle):hover {
        background: rgba(118, 118, 128, .2) !important;
        color: #1d1d1f !important;
    }

    .layout-page .table td .btn-group .btn.text-danger,
    .layout-page .table td .btn-outline-secondary.text-danger {
        color: #ff3b30 !important;
    }

        .layout-page .table td .btn-group .btn.text-danger:hover,
        .layout-page .table td .btn-outline-secondary.text-danger:hover {
            background-color: rgba(255, 59, 48, .12) !important;
            color: #ff3b30 !important;
        }

.layout-page .table .btn-transparent {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.layout-page .table thead .btn-primary,
.layout-page .table thead .btn-secondary,
.layout-page .table thead .btn-outline-primary {
    height: 34px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 500;
    box-shadow: none;
}


.table-special .table thead .heading-panel {
    padding: 0px 0px 10px;
}
.vs-meta-row.has-content {
    margin-top: 0;

}
    .layout-page .table thead .heading-panel h1,
    .layout-page .table thead .heading-panel .h1 {
        height: auto;
        min-height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: #1d1d1f !important;
        font-size: 22px;
        font-weight: 600;
        letter-spacing: -.4px;
        line-height: 1.2;
        white-space: nowrap;
        box-shadow: none;
    }

    .layout-page .table thead .heading-panel .btn.h1 {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        width: auto;
    }

        .layout-page .table thead .heading-panel .btn.h1.dropdown-toggle::after {
            border-top-color: #86868b;
        }

    .layout-page .table thead .heading-panel .total,
    .layout-page .table thead span.total {
        color: #86868b;
        font-size: 12px;
        font-weight: 400;
    }

    .layout-page .table thead .heading-panel .btn-primary {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 34px;
        padding: 0 16px;
        border: 0;
        border-radius: 999px;
        background-color: #154fef;
        font-size: 13.5px;
        font-weight: 500;
        box-shadow: none;
    }

        .layout-page .table thead .heading-panel .btn-primary:hover {
            background-color: #2d63f5;
        }

.layout-page .heading-panel .product-head-left {
    gap: 14px;
    align-items: center;
}

    .layout-page .heading-panel .product-head-left > * {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    .layout-page .heading-panel .product-head-left .total {
        line-height: 1;
    }

    .layout-page .heading-panel .product-head-left .top-button-list {
        gap: 6px;
    }

        .layout-page .heading-panel .product-head-left .top-button-list button {
            height: 30px;
            margin: 0 !important;
            padding: 0 12px;
            border: 0;
            border-radius: 999px;
            background-color: rgba(118, 118, 128, .12);
            color: #1d1d1f;
            font-size: 12.5px;
        }

            .layout-page .heading-panel .product-head-left .top-button-list button:hover,
            .layout-page .heading-panel .product-head-left .top-button-list button.active {
                background-color: rgba(21, 79, 239, .12);
                border-color: transparent;
                color: #154fef !important;
            }

.table-special > table > thead.sticky-head {
    top: 0;
}

.sticky-head {
    top: 0;
}

.menu-footer .notifications-sheet .dropdown-menu-header .dropdown-header h5 {
    font-size: 13px !important;
    line-height: 1.2;
}

.menu-footer .notifications-sheet .dropdown-item {
    font-weight: 400;
}

.menu-footer .notifications-sheet .dropdown-header {
    justify-content: space-between;
    gap: 8px;
    padding: 8px 8px 8px 14px;
}

.menu-footer .notifications-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #e8e8ed;
    color: #1d1d1f;
    font-size: 15px;
    line-height: 1;
}

    .menu-footer .notifications-close:hover {
        background-color: #dcdce2;
    }

.menu-footer .notifications-sheet .dropdown-item,
.menu-footer .notifications-sheet .dropdown-item:first-child,
.menu-footer .notifications-sheet .dropdown-item:last-child,
.menu-footer .notifications-sheet .list-group-item {
    border-radius: 0 !important;
}

.menu-footer .notifications-sheet #notificationList {
    max-height: none !important;
    overflow: visible !important;
}

.menu-footer .notifications-sheet .dropdown-notifications-list {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.layout-page .main-head .total {
    position: static;
    bottom: auto;
}

.create-and-edit {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    background: rgba(255, 255, 255, .72) !important;
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
}

.layout-page .heading-panel {
    flex-wrap: wrap;
    row-gap: 10px;
}

    .layout-page .heading-panel .product-head-left {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .layout-page .heading-panel .brand-slot {
        flex: 0 0 auto;
    }

    .layout-page .heading-panel .product-head-left .top-button-list {
        flex-wrap: wrap;
        row-gap: 6px;
    }

        .layout-page .heading-panel .product-head-left .top-button-list button:has(img) {
            width: 30px;
            padding: 0;
            border-radius: 50%;
        }

.layout-page .product-filter-wrapper .form-control,
.layout-page .product-filter-wrapper select.form-control,
.layout-page .product-filter-wrapper .input-search-box .form-control,
.layout-page .list-toolbar .form-control,
.layout-page .list-toolbar select.form-control {
    height: 36px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid #e3e3e8;
    border-radius: 9999px;
    background-color: #fff;
    color: #1d1d1f;
    font-size: 13px;
    box-shadow: none;
}

    .layout-page .product-filter-wrapper .form-control:focus,
    .layout-page .list-toolbar .form-control:focus {
        border-color: #154fef;
        box-shadow: 0 0 0 3px rgba(21, 79, 239, .12);
    }

    .layout-page .product-filter-wrapper .form-control::placeholder,
    .layout-page .list-toolbar .form-control::placeholder {
        color: #a1a1a6;
    }

.layout-page .input-search-box .form-control {
    padding-left: 34px !important;
}

.layout-page .input-search-box .input-search-icon {
    left: 0;
    right: auto;
    width: 34px;
    justify-content: center;
    color: #86868b;
}

.layout-page .product-filter-wrapper .ui-select-bootstrap > .ui-select-match > .btn,
.layout-page .product-filter-wrapper .ui-select-container .ui-select-toggle,
.layout-page .list-toolbar .ui-select-bootstrap > .ui-select-match > .btn,
.layout-page .list-toolbar .ui-select-container .ui-select-toggle,
.layout-page .product-filter-wrapper .select2-container .select2-selection,
.layout-page .list-toolbar .select2-container .select2-selection {
    display: flex;
    align-items: center;
    height: 36px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid #e3e3e8 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #1d1d1f;
    font-size: 13px;
    box-shadow: none !important;
}

.layout-page .product-filter-wrapper .btn.btn-xs,
.layout-page .product-filter-wrapper .btn-outline-secondary.btn-xs,
.layout-page .product-filter-wrapper .btn-outline-white.btn-xs,
.layout-page .list-toolbar-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 0 !important;
    border-radius: 999px !important;
    background-color: rgba(118, 118, 128, .12) !important;
    color: #1d1d1f !important;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none !important;
}

    .layout-page .product-filter-wrapper .btn.btn-xs:hover,
    .layout-page .list-toolbar-actions .btn:hover {
        background-color: rgba(118, 118, 128, .2) !important;
    }

    .layout-page .product-filter-wrapper .btn.btn-xs.active,
    .layout-page .product-filter-wrapper .btn-outline-white.btn-xs {
        background-color: rgba(21, 79, 239, .12) !important;
        color: #154fef !important;
    }

    .layout-page .product-filter-wrapper .btn.btn-xs .bx {
        font-size: 16px;
    }

.layout-page .list-toolbar-actions .btn-primary {
    background-color: #154fef !important;
    color: #fff !important;
}

    .layout-page .list-toolbar-actions .btn-primary:hover {
        background-color: #2d63f5 !important;
    }

.layout-page .product-filter-wrapper .filters-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background-color: #154fef;
    color: #fff;
    font-size: 11px;
}

.menu-vertical {
    width: 215px;
}

.app-menu-trigger {
    width: 215px;
}

.product-bottom-action {
    padding-left: 215px;
}

.layout-navbar-fixed .layout-navbar.navbar-detached {
    width: calc(100% - calc(1.625rem * 2) - 215px);
}

@media (min-width: 1200px) {
    .layout-menu-fixed-offcanvas:not(.layout-menu-collapsed) .layout-page,
    .layout-menu-fixed:not(.layout-menu-collapsed) .layout-page {
        padding-left: 215px;
    }

    .layout-menu-fixed-offcanvas.layout-navbar-fixed:not(.layout-menu-collapsed) .layout-content-navbar:not(.layout-without-menu) .layout-navbar,
    .layout-menu-fixed.layout-navbar-fixed:not(.layout-menu-collapsed) .layout-content-navbar:not(.layout-without-menu) .layout-navbar,
    .layout-navbar-fixed:not(.layout-menu-collapsed) .layout-content-navbar:not(.layout-without-menu) .layout-navbar {
        left: 215px;
    }
}

.layout-page .product-filter-wrapper-fixed {
    flex-wrap: wrap !important;
}

.layout-page .product-filter-wrapper {
    flex-wrap: wrap;
    row-gap: 8px;
}

.layout-page .product-filter-item {
    min-width: 0;
}

.layout-page .input-search-box .vs-trigger-btn,
.layout-page .input-search-box .barcode-search span {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    top: auto;
    right: auto;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50%;
    background: transparent;
    color: #6e6e73;
    font-size: 17px;
    transform: none;
}

.layout-page .input-search-box .btn.remove-search,
.layout-page .input-search-box .remove-search {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    top: 50%;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50%;
    background: transparent;
    color: #6e6e73;
    font-size: 17px;
    transform: translateY(-50%);
}

    .layout-page .input-search-box .vs-trigger-btn i,
    .layout-page .input-search-box .barcode-search span,
    .layout-page .input-search-box .btn.remove-search span,
    .layout-page .input-search-box .remove-search i{
        font-size: 17px;
    }

    .layout-page .input-search-box .vs-trigger-btn:hover,
    .layout-page .input-search-box .barcode-search label:hover span,
    .layout-page .input-search-box .btn.remove-search:hover,
    .layout-page .input-search-box .remove-search:hover {
        background-color: rgba(118, 118, 128, .12);
        color: #1d1d1f;
    }

    .layout-page .input-search-box .vs-trigger-btn.vs-trigger-active,
    .layout-page .input-search-box .barcode-search input:checked + span {
        background-color: rgba(21, 79, 239, .12);
        color: #154fef;
    }

.layout-page .input-search-box .barcode-search,
.layout-page .input-search-box .gorsel-ara {
    display: flex;
    align-items: center;
    top: 50%;
    height: auto;
    transform: translateY(-50%);
}

    .layout-page .input-search-box .barcode-search label {
        display: flex;
        margin: 0;
    }

.layout-page .input-search-box .barcode-search {
    right: 5px;
}

.layout-page .input-search-box .gorsel-ara {
    right: 5px;
}

.layout-page .input-search-box:has(.barcode-search) .gorsel-ara {
    right: 37px;
}

.layout-page .input-search-box .spinner-barcode {
    top: 50%;
    right: 8px;
    height: auto;
    transform: translateY(-50%);
}

    .layout-page .input-search-box .spinner-barcode .spinner-border {
        width: 1.1rem;
        height: 1.1rem;
    }

.layout-page .input-search-box .remove-search {
    right: 5px;
}

.layout-page .input-search-box:has(.gorsel-ara) .remove-search {
    right: 37px;
}

.layout-page .input-search-box:has(.gorsel-ara):has(.barcode-search) .remove-search {
    right: 69px;
}

.layout-page .input-search-box .form-control {
    padding-right: 40px !important;
}

.layout-page .input-search-box:has(.gorsel-ara) .form-control {
    padding-right: 72px !important;
}

.layout-page .input-search-box:has(.gorsel-ara):has(.barcode-search) .form-control {
    padding-right: 104px !important;
}

#layout-menu .menu-sub {
    position: relative;
    padding-left: 28px;
}

    #layout-menu .menu-sub::before {
          content: "";
    display: block !important;
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 18px;
    width: 1px;
    border-radius: 1px;
    background: #e3e3e8;
    }

    #layout-menu .menu-sub .menu-sub {
        padding-left: 18px;
    }

        #layout-menu .menu-sub .menu-sub::before {
            left: 9px;
        }




.layout-page .card {
    border: 0;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .04);
    border:1px solid #eee;
}

    .layout-page .card > .table-container > .table,
    .layout-page .card > .table-container {
        border-radius: 14px;
    }

    .layout-page .card > .table-container > .table > thead:first-child > tr:first-child > th {
        border-top-left-radius: 14px;
        border-top-right-radius: 14px;
    }

    .layout-page .card > .table-container > .table > tbody:last-child > tr:last-child > td {
        border-bottom-left-radius: 14px;
        border-bottom-right-radius: 14px;
    }

    .layout-page .card .heading-panel h1 {
        margin: 0;
        color: #1d1d1f;
        font-size: 17px;
        font-weight: 600;
        letter-spacing: -.2px;
    }

    .layout-page .card .heading-panel .btn-outline-secondary {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 34px;
        padding: 0 16px;
        border: 0 !important;
        border-radius: 999px !important;
        background-color: rgba(118, 118, 128, .12) !important;
        color: #1d1d1f !important;
        font-size: 13.5px;
        font-weight: 500;
        box-shadow: none !important;
    }

        .layout-page .card .heading-panel .btn-outline-secondary:hover {
            background-color: rgba(118, 118, 128, .2) !important;
        }

.modal-fullscreen .modal-content {
    border-radius: 0;
    background: #fff;
}

.modal-fullscreen .modal-header {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 18px;
    border-bottom: 1px solid #ececf0;
    background: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

    .modal-fullscreen .modal-header > .d-flex {
        width: 100%;
        align-items: center;
        gap: 12px;
    }

    .modal-fullscreen .modal-header .btn-outline-secondary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        margin: 0 !important;
        padding: 0;
        border: 0 !important;
        border-radius: 50% !important;
        background-color: #e8e8ed !important;
        color: #1d1d1f !important;
        font-size: 18px;
        box-shadow: none !important;
    }

        .modal-fullscreen .modal-header .btn-outline-secondary span {
            display: none;
        }

        .modal-fullscreen .modal-header .btn-outline-secondary:hover {
            background-color: #dcdce2 !important;
        }

    .modal-fullscreen .modal-title {
        margin: 0;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: -.2px;
        color: #1d1d1f;
    }

.modal-fullscreen .modal-body {
    padding: 0 !important;
    background: #fff;
}

    .modal-fullscreen .modal-body .table {
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .modal-fullscreen .modal-body .table > thead > tr > th {
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 14px 22px !important;
        border-bottom: 1px solid #ececf0;
        background: #fff;
    }

    .modal-fullscreen .modal-body .table > thead .form-control {
        max-width: 420px;
        height: 36px;
        padding: 0 12px;
        border: 1px solid #e3e3e8;
        border-radius: 10px;
        background: #fff;
        font-size: 13px;
        box-shadow: none;
    }

        .modal-fullscreen .modal-body .table > thead .form-control:focus {
            border-color: #154fef;
            box-shadow: 0 0 0 3px rgba(21, 79, 239, .12);
        }

    .modal-fullscreen .modal-body .product-grid {
        padding: 18px 22px !important;
    }

    .modal-fullscreen .modal-body .table > tfoot > tr > td {
        position: sticky;
        bottom: 0;
        z-index: 2;
        padding: 12px 22px !important;
        border-top: 1px solid #ececf0;
        background: rgba(255, 255, 255, .9);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
    }

        .modal-fullscreen .modal-body .table > tfoot .btn-primary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 36px;
            padding: 0 22px !important;
            border: 0;
            border-radius: 999px;
            background-color: #154fef;
            font-size: 13.5px;
            font-weight: 500;
            box-shadow: none;
        }

.modal-fullscreen .modal-footer {
    padding: 12px 22px;
    border-top: 1px solid #ececf0;
}

.form-horizontal .card-header {
    padding: 16px 18px 10px;
    border-bottom: 0;
    background: transparent;
}

    .form-horizontal .card-header .lead {
        margin: 0;
        color: #1d1d1f;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -.2px;
    }

.form-horizontal .card-body {
    padding: 6px 18px 18px;
}

.form-horizontal .form-group {
    margin-bottom: 10px;
}

.form-horizontal .form-control,
.form-horizontal select.form-control,
.form-horizontal .form-floating > .form-control {
    height: 39px;
    min-height: 39px;
    border: 1px solid #e3e3e8;
    border-radius: 12px;
    background-color: #fff;
    color: #1d1d1f;
    font-size: 14px;
    box-shadow: none;
}

.form-horizontal select.form-control {
    height: 39px;
    padding: 0 14px;
}

    .form-horizontal .form-control:focus,
    .form-horizontal select.form-control:focus {
        border-color: #154fef;
        box-shadow: 0 0 0 3px rgba(21, 79, 239, .12);
    }

.form-horizontal .form-floating > .form-control {
    height: 54px;
    min-height: 54px;
    padding: 23px 14px 7px;
}

.form-horizontal .form-floating > label {
    height: auto;
    padding: 16px 14px;
    border: 0;
    color: #86868b;
    font-size: 14px;
    line-height: 1.2;
    transform-origin: 0 0;
}

.form-horizontal .form-floating > .form-control:focus ~ label,
.form-horizontal .form-floating > .form-control:not(:placeholder-shown) ~ label {
    height: auto;
    padding: 8px 14px 0;
    color: #86868b;
    font-size: 11px;
    opacity: 1;
    transform: none;
}

.form-horizontal textarea.form-control {
    height: auto;
    min-height: 96px;
    padding: 12px 14px;
}

.form-horizontal .alert {
    padding: 12px 14px;
    border: 0;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.45;
}

.form-horizontal .alert-warning {
    background-color: rgba(255, 159, 10, .12);
    color: #7a4b00;
}

.form-horizontal .alert-info {
    background-color: rgba(21, 79, 239, .1);
    color: #0a4a8f;
}

.form-horizontal .list-group {
    border: 0;
    border-radius: 12px;
    background: #f5f5f7;
}

    .form-horizontal .list-group-item {
        position: relative;
        padding: 12px 14px;
        border: 0;
        background: transparent;
        font-size: 14px;
    }

        .form-horizontal .list-group-item + .list-group-item::before {
            content: "";
            position: absolute;
            top: 0;
            left: 14px;
            right: 14px;
            height: 1px;
            background: #e5e5ea;
        }

        .form-horizontal .list-group-item b {
            font-weight: 500;
        }

        .form-horizontal .list-group-item input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: #154fef;
        }

.form-horizontal .ui-select-container.ui-select-bootstrap,
.form-horizontal .ui-select-container.ui-select-multiple {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 48px;
    height: auto;
    padding: 7px 10px !important;
    border: 1px solid #e3e3e8 !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: none !important;
}

    .form-horizontal .ui-select-container.open {
        border-color: #154fef !important;
        box-shadow: 0 0 0 3px rgba(21, 79, 239, .12) !important;
    }

    .form-horizontal .ui-select-multiple .ui-select-match {
        display: contents;
    }

    .form-horizontal .ui-select-match-item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 28px;
        margin: 0 !important;
        padding: 0 8px 0 11px !important;
        border: 0 !important;
        border-radius: 999px !important;
        background-color: rgba(21, 79, 239, .1) !important;
        color: #154fef !important;
        font-size: 12.5px;
        font-weight: 500;
        line-height: 1;
        box-shadow: none !important;
    }

        .form-horizontal .ui-select-match-item > span:not(.ui-select-match-close) {
            order: 1;
        }

        .form-horizontal .ui-select-match-item .ui-select-match-close {
            order: 2;
            float: none !important;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 16px;
            height: 16px;
            margin: 0 !important;
            border-radius: 50%;
            background-color: rgba(21, 79, 239, .16);
            color: #154fef;
            font-size: 13px;
            line-height: 1;
            opacity: 1;
            text-shadow: none;
        }

            .form-horizontal .ui-select-match-item .ui-select-match-close:hover {
                background-color: #154fef;
                color: #fff;
            }

    .form-horizontal .ui-select-container .ui-select-search {
        flex: 1 1 90px;
        min-width: 90px;
        height: 28px !important;
        margin: 0 !important;
        padding: 0 2px !important;
        border: 0 !important;
        background: transparent !important;
        font-size: 14px;
        box-shadow: none !important;
    }

    .form-horizontal .ui-select-container .ui-select-toggle {
        display: flex;
        align-items: center;
        height: 46px;
        padding: 0 12px;
        border: 0 !important;
        border-radius: 12px !important;
        background: transparent !important;
        color: #1d1d1f;
        font-size: 14px;
        box-shadow: none !important;
    }

    .form-horizontal .ui-select-container .ui-select-dropdown,
    .form-horizontal .ui-select-container .ui-select-choices {
        margin-top: 6px;
        padding: 5px;
        border: 0;
        border-radius: 14px;
        background: rgba(255, 255, 255, .98);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
        box-shadow: 0 16px 38px rgba(0, 0, 0, .16), 0 0 0 1px rgba(0, 0, 0, .05);
    }

    .form-horizontal .ui-select-choices-row > .ui-select-choices-row-inner,
    .form-horizontal .ui-select-choices-row > a {
        display: block;
        padding: 8px 10px;
        border-radius: 9px;
        color: #1d1d1f;
        font-size: 13.5px;
    }

    .form-horizontal .ui-select-choices-row.active > .ui-select-choices-row-inner,
    .form-horizontal .ui-select-choices-row > .ui-select-choices-row-inner:hover {
        background-color: rgba(118, 118, 128, .12);
        color: #1d1d1f;
    }

    .form-horizontal .ui-select-choices-group-label {
        padding: 6px 10px 4px;
        color: #86868b;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .form-horizontal .ui-select-highlight {
        background: rgba(21, 79, 239, .16);
        border-radius: 3px;
        font-weight: 600;
    }

.form-horizontal .card-body > .btn,
.form-horizontal .card-footer .btn {
    height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
}

.form-horizontal .validationErrors {
    margin: 0 0 14px;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13px;
}

.form-horizontal .create-and-edit-form > .col-md-6 > h1 {
    margin: 0;
    color: #1d1d1f;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.4px;
}

.form-horizontal .create-and-edit-form > .col-md-6 > .lead.text-muted {
    margin: 2px 0 14px;
    color: #86868b !important;
    font-size: 13px;
}

.form-horizontal .btn.bg-label-danger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background-color: rgba(255, 59, 48, .12) !important;
    color: #ff3b30 !important;
    font-size: 13.5px;
    font-weight: 500;
    box-shadow: none;
}

    .form-horizontal .btn.bg-label-danger:hover {
        background-color: rgba(255, 59, 48, .2) !important;
    }

.invoice-preview-card .card-header {
    padding: 18px 20px !important;
    border-bottom: 1px solid #ececf0 !important;
}

    .invoice-preview-card .card-header .h1 {
        color: #1d1d1f;
        font-size: 20px;
        font-weight: 600;
        letter-spacing: -.3px;
    }

    .invoice-preview-card .card-header .lead {
        margin: 2px 0 0;
        color: #86868b;
        font-size: 13px;
        font-weight: 400;
    }

    .invoice-preview-card .card-header table {
        margin-top: 8px;
        font-size: 13px !important;
    }

        .invoice-preview-card .card-header table td {
            padding: 3px 0;
            color: #1d1d1f;
        }

            .invoice-preview-card .card-header table td:first-child {
                color: #86868b;
                white-space: nowrap;
            }

.invoice-preview-card .card-body .table {
    border-radius: 0;
    box-shadow: none;
}

    .invoice-preview-card .card-body .table > thead > tr > th {
        padding: 10px 12px;
        border-bottom: 1px solid #ececf0;
        background: transparent;
        color: #86868b;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .invoice-preview-card .card-body .table > tbody > tr > td {
        padding: 10px 12px;
        color: #1d1d1f;
        font-size: 13.5px;
        vertical-align: middle;
    }

    .invoice-preview-card .card-body .table .departmentImage img {
        max-height: 26px;
        max-width: 90px;
    }

.invoice-preview-card .pie-chart-1 {
    max-width: 420px;
    margin: 24px auto !important;
}

.form-horizontal .input-group {
    flex-wrap: nowrap;
    align-items: stretch;
}

    .form-horizontal .input-group > .form-control,
    .form-horizontal .input-group > .form-floating,
    .form-horizontal .input-group > .form-floating > .form-control,
    .form-horizontal .input-group > .input-group-text,
    .form-horizontal .input-group > .btn {
        border-radius: 0 !important;
    }

    .form-horizontal .input-group > .input-group-text,
    .form-horizontal .input-group > .btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 39px;
        padding: 0 14px;
        border: 1px solid #e3e3e8;
        background-color: #f5f5f7;
        color: #1d1d1f;
        font-size: 13.5px;
        font-weight: 500;
        white-space: nowrap;
        box-shadow: none;
    }

    .form-horizontal .input-group > .btn {
        border-left: 0;
    }

        .form-horizontal .input-group > .btn:hover:not(:disabled) {
            background-color: #ebebef;
        }

    .form-horizontal .input-group > .input-group-text + .form-control,
    .form-horizontal .input-group > .input-group-text + .form-floating > .form-control {
        border-left: 0;
    }

    .form-horizontal .input-group:has(> .form-floating) > .input-group-text,
    .form-horizontal .input-group:has(> .form-floating) > .btn {
        height: 54px;
    }

    .form-horizontal .input-group > :first-child,
    .form-horizontal .input-group > :first-child > .form-control {
        border-top-left-radius: 12px !important;
        border-bottom-left-radius: 12px !important;
    }

    .form-horizontal .input-group > :last-child,
    .form-horizontal .input-group > :last-child > .form-control {
        border-top-right-radius: 12px !important;
        border-bottom-right-radius: 12px !important;
    }

    .form-horizontal .input-group > .form-floating {
        flex: 1 1 auto;
        min-width: 0;
    }

.form-horizontal .form-floating > textarea.form-control {
    height: auto;
    min-height: 100px;
    padding: 24px 14px 8px;
}

.layout-page .card-body .btn-group > .btn,
.form-horizontal .btn-group > .btn {
    border-radius: 0 !important;
}

.layout-page .card-body .btn-group > .btn:first-child,
.form-horizontal .btn-group > .btn:first-child {
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}

.layout-page .card-body .btn-group > .btn:last-child,
.form-horizontal .btn-group > .btn:last-child {
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

.layout-page .card-body .btn-group > .btn:only-child,
.form-horizontal .btn-group > .btn:only-child,
.layout-page .card-body .canvasButtonGroup > .btn,
.form-horizontal .canvasButtonGroup > .btn {
    border-radius: 10px !important;
}

.layout-page .canvasButtonGroup > .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 0 !important;
    background-color: rgba(118, 118, 128, .12) !important;
    color: #1d1d1f !important;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none !important;
}

    .layout-page .canvasButtonGroup > .btn:hover {
        background-color: rgba(118, 118, 128, .2) !important;
    }

.form-horizontal .ui-select-match-item .ui-select-match-close {
    position: static !important;
    float: none !important;
    order: 2;
}

.create-and-edit-form {
    max-width: 1300px;
}

.product-delete-panel {
    margin-bottom: 30px;
}

    .product-delete-panel .alert-warning {
        background-color: rgba(255, 59, 48, .08);
        color: #7a1d16;
    }

    .product-delete-panel .alert-heading {
        margin-bottom: 4px;
        color: #1d1d1f;
        font-size: 14px;
        font-weight: 600;
    }

    .product-delete-panel .alert p {
        color: #6e6e73;
        font-size: 13px;
    }

    .product-delete-panel .btn-danger {
        height: 36px;
        padding: 0 16px;
        border: 0;
        border-radius: 999px;
        background-color: #ff3b30;
        font-size: 13.5px;
        font-weight: 500;
        box-shadow: none;
    }

.layout-page .card > .table-container {
    overflow: hidden;
}

.layout-page .card > .card-body > .table-container > .table > thead:first-child > tr:first-child > th {
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}

.layout-page .card > .card-body > .table-container > .table > tbody:last-child > tr:last-child > td,
.layout-page .card > .table-container > .table > tfoot:last-child > tr:last-child > td {
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}

.layout-page .card.p-0 > .table-container {
    border-radius: 14px;
}

.form-horizontal .card {
    margin-bottom: 16px;
}

.form-horizontal .card-header {
    padding: 14px 16px 6px;
}

.form-horizontal .card-body {
    padding: 4px 16px 14px;
}

.form-horizontal .form-group {
    margin-bottom: 8px;
}

    .form-horizontal .form-group:last-child {
        margin-bottom: 0;
    }

.form-horizontal .create-and-edit-form > [class^="col-"] {
    padding-left: 10px;
    padding-right: 10px;
}

.form-horizontal .ui-select-container.ui-select-multiple,
.form-horizontal .ui-select-container.ui-select-bootstrap {
    min-height: 44px;
    padding: 5px 8px !important;
    gap: 0;
}
.ui-select-multiple.ui-select-bootstrap > div {

    width: 100%;
    display: block;
}
.form-horizontal .ui-select-container input.ui-select-search,
.form-horizontal .ui-select-container input.ui-select-search.form-control {
    width: 100% !important;
    height: 31px  !important;
    min-height: 31px  !important;
    margin: 0 !important;
    padding: 0 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: #00000000 !important;
    color: #1d1d1f;
    font-size: 13.5px;
    line-height: 26px;
    box-shadow: none !important;
    cursor: pointer;
}

.form-horizontal .ui-select-match-item {
    height: 26px !important;
    padding: 0 6px 0 10px !important;
    font-size: 12.5px !important;
}

.form-horizontal .ui-select-container .ui-select-dropdown,
.form-horizontal .ui-select-container .ui-select-choices {
    max-height: 260px;
    overflow-y: auto;
}

.create-and-edit .navbar-nav-right {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    gap: 12px;
}

    .create-and-edit .navbar-nav-right > :first-child {
        justify-self: start;
    }

    .create-and-edit .navbar-nav-right > .create-and-edit-title {
        justify-self: center;
        margin: 0 !important;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .create-and-edit .navbar-nav-right > :last-child {
        display: flex;
        align-items: center;
        gap: 8px;
        justify-self: end;
    }

.form-horizontal .ui-select-match-item {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
        margin-bottom: 5px !important;
    margin-right: 5px !important;
}

    .form-horizontal .ui-select-match-item .ui-select-match-close,
    .form-horizontal .ui-select-match-item .close {
        position: static !important;
        float: none !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        order: 2;
        align-self: center !important;
        width: 15px !important;
        height: 15px !important;
        margin: 0 0 0 1px !important;
        padding: 0 !important;
        font-size: 12px !important;
        font-weight: 400 !important;
        line-height: 1 !important;
        vertical-align: middle !important;
        text-shadow: none !important;
        opacity: 1 !important;
    }

.form-horizontal .ui-select-bootstrap > .ui-select-match > .btn.ui-select-match-item,
.form-horizontal .ui-select-container .ui-select-match > .ui-select-match-item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 26px !important;
    min-height: 26px !important;
    margin: 0 !important;
    padding: 0 6px 0 10px !important;
    font-size: 12.5px !important;
    line-height: 1 !important;
}

    .form-horizontal .ui-select-container .ui-select-match > .ui-select-match-item > .ui-select-match-close,
    .form-horizontal .ui-select-container .ui-select-match > .ui-select-match-item > .close {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: center !important;
        flex: 0 0 auto !important;
        order: 2 !important;
        width: 16px !important;
        height: 16px !important;
        min-height: 0 !important;
        margin: 0 0 0 2px !important;
        padding: 0 !important;
        font-size: 13px !important;
        line-height: 1 !important;
    }

    .form-horizontal .ui-select-container .ui-select-match > .ui-select-match-item > span:not(.ui-select-match-close):not(.close) {
        order: 1 !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.form-horizontal .ui-select-bootstrap > .ui-select-match > .btn.ui-select-match-item,
.form-horizontal .ui-select-container .ui-select-match > .ui-select-match-item {
    position: relative !important;
    padding: 0 26px 0 11px !important;
}

    .form-horizontal .ui-select-container .ui-select-match > .ui-select-match-item > .ui-select-match-close,
    .form-horizontal .ui-select-container .ui-select-match > .ui-select-match-item > .close {
        position: absolute !important;
        top: 50% !important;
        right: 5px !important;
        left: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        transform: translateY(-50%) !important;
    }

.form-horizontal .card {
    margin-bottom: 24px;
}

.form-horizontal .card-header {
    padding: 16px 18px 10px;
}

    .form-horizontal .card-header .lead {
        color: #6e6e73;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0;
    }

.form-horizontal .card-body {
    padding: 6px 18px 18px;
}

.form-horizontal .form-group {
    margin-bottom: 12px;
}

    .form-horizontal .card-body > .form-group:last-child {
        margin-bottom: 0;
    }

.form-horizontal .ui-select-container .ui-select-choices.ui-select-dropdown,
.form-horizontal .ui-select-container .ui-select-dropdown.dropdown-menu {
    padding: 6px !important;
}

.form-horizontal .ui-select-container .ui-select-choices-group {
    padding: 0 !important;
}

.form-horizontal .ui-select-container .ui-select-choices-row {
    margin: 2px 0 !important;
    padding: 0 !important;
}

    .form-horizontal .ui-select-container .ui-select-choices-row > .ui-select-choices-row-inner,
    .form-horizontal .ui-select-container .ui-select-choices-row > span {
        display: block !important;
        padding: 9px 12px !important;
        border-radius: 9px !important;
        color: #1d1d1f;
        font-size: 13.5px;
        line-height: 1.3;
    }

    .form-horizontal .ui-select-container .ui-select-choices-row.active > .ui-select-choices-row-inner,
    .form-horizontal .ui-select-container .ui-select-choices-row.active > span,
    .form-horizontal .ui-select-container .ui-select-choices-row > .ui-select-choices-row-inner:hover,
    .form-horizontal .ui-select-container .ui-select-choices-row > span:hover {
        background-color: rgba(118, 118, 128, .12) !important;
        color: #1d1d1f !important;
    }

.product-attribute-list {
    margin: 4px -18px 0;
}

    .product-attribute-list > [class^="col-"] {
        padding: 0;
    }

    .product-attribute-list .form-group {
        margin: 0;
    }

    .product-attribute-list .input-group {
        border-bottom: 1px solid #ececf0;
    }

    .product-attribute-list > [class^="col-"]:first-child .input-group {
        border-top: 1px solid #ececf0;
    }

    .product-attribute-list .input-group > .form-floating > .form-control,
    .product-attribute-list .input-group > .form-control,
    .product-attribute-list .input-group > .btn {
        border-top: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    .product-attribute-list .input-group > .btn {
        width: 46px;
        padding: 0;
        justify-content: center;
    }

        .product-attribute-list .input-group > .btn:hover:not(:disabled) {
            background-color: rgba(255, 59, 48, .08) !important;
        }

    .product-attribute-list .input-group > .form-floating > .form-control:focus {
        box-shadow: none !important;
    }

    .product-attribute-list .input-group:focus-within {
        background-color: rgba(21, 79, 239, .04);
    }

    .product-attribute-list .datalist_attribute {
        left: 12px;
        right: 12px;
        width: auto !important;
    }

.form-horizontal .card {
    padding: 18px;
}

.form-horizontal .card-header,
.form-horizontal .card > .card-header {
    padding: 0 0 8px !important;
    margin-bottom: 6px;
}

.form-horizontal .card-body,
.form-horizontal .card > .card-body {
    padding: 0 !important;
}

.form-horizontal .card.p-0 {
    padding: 0 !important;
}

    .form-horizontal .card.p-0 > .card-header {
        padding: 18px 18px 0 !important;
        margin-bottom: 0;
    }

    .form-horizontal .card.p-0 > .card-body {
        padding: 18px !important;
    }

.form-horizontal .card.pb-0 {
    padding-bottom: 18px !important;
}

.form-horizontal .create-and-edit-form > [class^="col-"] > .card-header {
    padding: 0 0 10px !important;
    margin: 0;
}

.create-and-edit .create-and-edit-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .create-and-edit .create-and-edit-title .h1,
    .create-and-edit .create-and-edit-title h2 {
            display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        max-width: 700px;
    }

    .create-and-edit .create-and-edit-title a {
        display: inline-flex;
        align-items: center;
        color: #6e6e73;
        font-size: 16px;
        line-height: 1;
    }

.create-and-edit .navbar-nav-right {
    height: 100%;
    align-content: center;
    max-width: 1256px;
    margin: 0 auto;
    padding: 0 10px;
}    

.form-horizontal .lead,
.form-horizontal .card-header .lead,
.form-horizontal .card-body .lead {
    margin-bottom: 0;
    color: #6e6e73;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
}

    .form-horizontal .card-body > div > .lead.mb-3 {
        margin-bottom: 10px !important;
    }

.form-horizontal .card-body > .form-group-bg,
.form-horizontal .card-body > .form-group.form-group-bg,
.form-horizontal .card-body > div > .form-group-bg {
    margin: 0 -18px !important;
    padding: 12px 18px !important;
    border: 0 !important;
    border-top: 1px solid #ececf0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

    .form-horizontal .card-body > .form-group-bg b,
    .form-horizontal .card-body > .form-group.form-group-bg b {
        display: block;
        margin-bottom: 2px;
        color: #1d1d1f;
        font-size: 13.5px;
        font-weight: 600;
    }

    .form-horizontal .card-body > .form-group-bg a,
    .form-horizontal .card-body > .form-group.form-group-bg a {
        color: #154fef;
        font-size: 12.5px;
        line-height: 1.4;
        word-break: break-all;
    }

.form-horizontal .card-body > .form-group-bg:last-child {
    margin-bottom: -18px !important;
    padding-bottom: 16px !important;
}

.form-horizontal .ui-select-container .ui-select-choices-row > a,
.form-horizontal .ui-select-container .ui-select-choices-row > div {
    display: block !important;
    padding: 9px 12px !important;
    border-radius: 9px !important;
    color: #1d1d1f;
    font-size: 13.5px;
    line-height: 1.3;
}

.form-horizontal .ui-select-container .ui-select-choices-row {
    margin: 3px 0 !important;
}

    .form-horizontal .ui-select-container .ui-select-choices-row .small,
    .form-horizontal .ui-select-container .ui-select-choices-row small {
        display: block;
        margin-top: 2px;
        color: #86868b;
        font-size: 11.5px;
    }

    .form-horizontal .ui-select-container .ui-select-choices-row.active > a,
    .form-horizontal .ui-select-container .ui-select-choices-row.active > div,
    .form-horizontal .ui-select-container .ui-select-choices-row > a:hover,
    .form-horizontal .ui-select-container .ui-select-choices-row > div:hover {
        background-color: rgba(118, 118, 128, .12) !important;
        color: #1d1d1f !important;
    }

.form-horizontal .card.p-0 > .card-body > .table-container {
    margin: 0px -18px -18px;
}

    .form-horizontal .card.p-0 > .card-body > .table-container .product-grid.horizontal {
        padding: 0 !important;
    }

    .form-horizontal .card.p-0 > .card-body > .table-container .table {
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .form-horizontal .card.p-0 > .card-body > .table-container .table > tbody > tr > td {
        padding: 0;
        border: 0;
    }

    .form-horizontal .card.p-0 > .card-body > .table-container .product-item {
        width: 100%;
    }

        .form-horizontal .card.p-0 > .card-body > .table-container .product-item > tbody > tr > td {
            padding: 12px 18px;
            border-top: 1px solid #ececf0;
        }

        .form-horizontal .card.p-0 > .card-body > .table-container .product-item:hover > tbody > tr > td {
            background-color: #fafafa;
        }

    .form-horizontal .card.p-0 > .card-body > .table-container .table-sticky {
        margin: 0;
        padding: 10px 18px;
        border-top: 1px solid #ececf0;
        background: rgba(255, 255, 255, .92);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
    }

.form-horizontal .form-control[type="file"] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96px !important;
    padding: 0 16px !important;
    border: 2px dashed #dcdce2 !important;
    border-radius: 12px !important;
    background-color: #fafafa !important;
    color: #86868b;
    font-size: 13px;
    line-height: normal !important;
    cursor: pointer;
}

    .form-horizontal .form-control[type="file"]:hover {
        border-color: #154fef !important;
        background-color: rgba(21, 79, 239, .04) !important;
    }

    .form-horizontal .form-control[type="file"]::file-selector-button {
        height: 34px;
        margin-right: 12px;
        padding: 0 16px;
        border: 0;
        border-radius: 999px;
        background-color: rgba(21, 79, 239, .12);
        color: #154fef;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
    }

    .form-horizontal .form-control[type="file"]:hover::file-selector-button {
        background-color: rgba(21, 79, 239, .18);
    }

.form-horizontal .img-input {
    height: 110px;
    border: 2px dashed #dcdce2;
    border-radius: 12px;
    background-color: #fafafa;
    color: #86868b;
}

    .form-horizontal .img-input:hover {
        border-color: #154fef;
        background-color: rgba(21, 79, 239, .04);
    }

    .form-horizontal .img-input .badge {
        margin-bottom: 4px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 500;
    }

    .form-horizontal .img-input small {
        color: #86868b;
        font-size: 12px;
    }

    .form-horizontal .img-input .btn-primary {
        height: 32px;
        margin-top: 8px;
        padding: 0 16px;
        border: 0;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 500;
    }

.form-horizontal > .create-and-edit-form label + .form-control[type="file"],
.form-horizontal label {
    margin-bottom: 6px;
    color: #6e6e73;
    font-size: 13px;
}
.ur-chart {

    padding: 25px 16px 12px;
}
.ur-page {
    padding: 22px !important;
    background: #f7f7f8;
}

.ur-head {
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.ur-title {
    color: #1d1d1f;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.4px;
}

.ur-filters {
    gap: 8px;
}

    .ur-filters > * {
        margin: 0 !important;
    }

.ur-quick {
    gap: 0;
    padding: 3px;
    border-radius: 999px;
    background-color: rgba(118, 118, 128, .16);
}

.ur-totals {
    align-items: stretch;
}

    .ur-quick .btn,
    .ur-quick .btn.btn-xs {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 30px;
        padding: 0 14px;
        border: 0 !important;
        border-radius: 999px !important;
        background: transparent;
        color: #1d1d1f;
        font-size: 13px;
        font-weight: 500;
        box-shadow: none;
    }

        .ur-quick .btn:hover {
            color: #154fef !important;
        }

    .ur-quick-on,
    .ur-quick .ur-quick-on:hover,
    .ur-quick .ur-quick-on:focus {
        background: #fff !important;
        color: #1d1d1f !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .12) !important;
    }

.ur-filters .date-filter .date-picker.form-control,
.ur-page .ur-select.form-control,
.ur-page select.form-control {
    height: 36px !important;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid #e3e3e8;
    border-radius: 10px;
    background-color: #fff;
    color: #1d1d1f;
    font-size: 13px;
    box-shadow: none;
}

    .ur-page select.form-control:focus,
    .ur-filters .date-filter .date-picker.form-control:focus {
        border-color: #154fef;
        box-shadow: 0 0 0 3px rgba(21, 79, 239, .12);
    }

.ur-page .ui-select-container.ui-select-bootstrap {
    min-width: 200px;
}

    .ur-page .ui-select-container .ui-select-toggle,
    .ur-page .ui-select-container .ui-select-match .btn {
        display: flex;
        align-items: center;
        height: 36px !important;
        min-height: 36px;
        padding: 0 30px 0 12px;
        border: 1px solid #e3e3e8;
        border-radius: 10px;
        background: #fff !important;
        color: #1d1d1f !important;
        font-size: 13px;
        text-align: left;
        box-shadow: none !important;
        margin-top: 2px;
    }
.ur-filters .ui-select-toggle > .btn-link {
    width: 36px;
    border: 0 !important;
    margin: 0 !important;
    text-align: right !important;
    justify-content: center;
    right: 0 !important;
}
    .ur-page .ui-select-container.open .ui-select-toggle {
        border-color: #154fef !important;
        box-shadow: 0 0 0 3px rgba(21, 79, 239, .12) !important;
    }

    .ur-page .ui-select-container .ui-select-dropdown,
    .ur-page .ui-select-container .ui-select-choices {
        margin-top: 6px;
        padding: 6px;
        border: 0;
        border-radius: 14px;
        background: rgba(255, 255, 255, .98);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
        box-shadow: 0 16px 38px rgba(0, 0, 0, .16), 0 0 0 1px rgba(0, 0, 0, .05);
    }

    .ur-page .ui-select-container .ui-select-choices-row {
        margin: 3px 0 !important;
    }

        .ur-page .ui-select-container .ui-select-choices-row > .ui-select-choices-row-inner,
        .ur-page .ui-select-container .ui-select-choices-row > span,
        .ur-page .ui-select-container .ui-select-choices-row > a,
        .ur-page .ui-select-container .ui-select-choices-row > div {
            display: block !important;
            padding: 9px 12px !important;
            border-radius: 9px !important;
            color: #1d1d1f;
            font-size: 13.5px;
            line-height: 1.3;
        }

        .ur-page .ui-select-container .ui-select-choices-row .small {
            display: block;
            margin-top: 2px;
            color: #86868b;
            font-size: 11.5px;
        }

        .ur-page .ui-select-container .ui-select-choices-row.active > .ui-select-choices-row-inner,
        .ur-page .ui-select-container .ui-select-choices-row > .ui-select-choices-row-inner:hover {
            background-color: rgba(118, 118, 128, .12) !important;
            color: #1d1d1f !important;
        }

.ur-page .ur-export,
.ur-page .btn.ur-export {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    border: 0 !important;
    border-radius: 999px !important;
    background-color: rgba(118, 118, 128, .12) !important;
    color: #1d1d1f !important;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none !important;
}

    .ur-page .ur-export:hover:not(:disabled) {
        background-color: rgba(118, 118, 128, .2) !important;
    }

    .ur-page .ur-export:disabled {
        opacity: .5;
    }

.ur-loading {
    display: inline-flex;
    align-items: center;
    height: 36px;
    color: #86868b;
    font-size: 18px;
}

.ur-totals {
    gap: 14px;
    margin-bottom: 20px;
}

.ur-total {
    padding: 16px 18px;
    border: 0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .04);
}

.ur-total-value {
    color: #1d1d1f;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.6px;
    line-height: 1.1;
}

.ur-total-label {
    margin-top: 2px;
    color: #6e6e73;
    font-size: 13px;
}

.ur-total-note {
    margin-top: 2px;
    color: #86868b;
    font-size: 11.5px;
}

.ur-total.ur-total-paid .ur-total-value {
    color: #154fef;
}

.ur-section-title {
    margin-bottom: 8px;
    color: #6e6e73;
    font-size: 14px;
    font-weight: 500;
}
.et-bar {
    padding: 15px;
}
.ur-card {
    padding:  0;
    border: 0;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .04);
}

    .ur-card .table {
        margin: 0;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }

    .ur-card .table > thead > tr > th {
        padding: 10px 16px;
        border-bottom: 1px solid #ececf0;
        background: transparent;
        color: #86868b;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .ur-card .table > tbody > tr > td {
        padding: 10px 16px;
        border-top: 0;
        color: #1d1d1f;
        font-size: 13.5px;
        vertical-align: middle;
    }

    .ur-card .table > tbody > tr + tr > td {
        border-top: 1px solid #f2f2f5;
    }

    .ur-card .table.table-striped > tbody > tr {
        background: transparent !important;
    }

.ur-bar-track {
    height: 6px;
    border-radius: 999px;
    background-color: rgba(118, 118, 128, .14);
    overflow: hidden;
}

.ur-bar-fill {
    height: 100%;
    border-radius: 999px;
    background-color: #154fef;
}

.ur-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: 50%;
    background-color: #154fef;
    vertical-align: middle;
}

.ur-error {
    color: #ff3b30 !important;
    font-weight: 500;
}

.ur-empty {
    padding: 28px;
    border-radius: 14px;
    background: #fff;
    color: #86868b;
    font-size: 13.5px;
    text-align: center;
}

.ur-grid {
    gap: 18px;
}

.ur-section {
    margin-bottom: 18px;
}

.daterangepicker {
    width: auto;
}

    .daterangepicker::after {
        content: "";
        display: table;
        clear: both;
    }

    .daterangepicker .calendar {
        float: left !important;
    }

    .daterangepicker .ranges {
        float: none !important;
        clear: both !important;
        width: auto;
        margin: 0 !important;
        padding: 8px 4px 2px !important;
        border-top: 1px solid #ececf0;
    }

        .daterangepicker .ranges ul {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            width: auto;
            margin: 0 0 8px;
            padding: 0;
        }

            .daterangepicker .ranges ul:empty {
                display: none;
                margin: 0;
            }

    .daterangepicker .range_inputs,
    .daterangepicker .drp-buttons {
        justify-content: flex-end;
        padding: 0 !important;
        border-top: 0 !important;
    }

.form-horizontal .form-floating > label {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 14px;
    line-height: 1.2;
}

.form-horizontal .form-floating > .form-control:focus ~ label,
.form-horizontal .form-floating > .form-control:not(:placeholder-shown) ~ label {
    display: block;
    height: auto;
    padding: 9px 14px 0;
}

.ur-quick .btn.ur-quick-on,
.ur-quick .btn.btn-xs.ur-quick-on,
.ur-quick .btn.btn-xs.ur-quick-on:hover,
.ur-quick .btn.btn-xs.ur-quick-on:focus {
    background: #fff !important;
    color: #1d1d1f !important;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .14) !important;
}

.ur-page .ui-select-container .ui-select-placeholder {
    color: #a1a1a6;
}

.ur-page .ui-select-container .ui-select-match .btn-link,
.ur-page .ui-select-container .ui-select-match .ui-select-match-close {
    position: absolute !important;
    top: 50% !important;
    right: 28px !important;
    left: auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50%;
    background-color: rgba(118, 118, 128, .16);
    color: #6e6e73 !important;
    font-size: 11px;
    text-decoration: none;
    transform: translateY(-50%) !important;
}

    .ur-page .ui-select-container .ui-select-match .btn-link:hover {
        background-color: rgba(118, 118, 128, .28);
        color: #1d1d1f !important;
    }

.ur-page .ui-select-container .caret {
    position: absolute;
    top: 50%;
    right: 12px;
    margin: 0;
    border: 0;
    transform: translateY(-50%);
}

    .ur-page .ui-select-container .caret::before {
        content: "";
        display: block;
        width: 7px;
        height: 7px;
        border-right: 1.6px solid #86868b;
        border-bottom: 1.6px solid #86868b;
        transform: rotate(45deg) translate(-2px, -2px);
    }

#productFilters.filters-sheet .modal-content {
    border-radius: 0;
    background: #fff;
}

#productFilters.filters-sheet .modal-header {
    border-radius: 0;
    background: #fff;
}

#productFilters.filters-sheet .filters-body {
    background: #fff;
}

#productFilters.filters-sheet .accordion {
    border-radius: 14px;
    background: #f5f5f7;
    overflow: hidden;
}

#productFilters.filters-sheet .filters-item {
    margin: 0;
    border-radius: 0;
    border-bottom: 1px solid #ebebed;
    background: transparent;
    overflow: visible;
}

    #productFilters.filters-sheet .filters-item:last-child {
        border-bottom: 0;
    }

#productFilters.filters-sheet .accordion-button {
    background: transparent;
}

 

#productFilters.filters-sheet .accordion-body {
    background: transparent;
}

#createCollection.full-modal.fade .modal-dialog,
#addCategory.full-modal.fade .modal-dialog {
    transform: translateY(-14px) !important;
    opacity: 0;
    transition: transform .25s cubic-bezier(.22, .61, .36, 1), opacity .2s ease;
}

#createCollection.full-modal.show .modal-dialog,
#createCollection.full-modal.in .modal-dialog,
#addCategory.full-modal.show .modal-dialog,
#addCategory.full-modal.in .modal-dialog {
    transform: none !important;
    opacity: 1;
}

#createCollection .modal-dialog,
#addCategory .modal-dialog {
    max-width: 460px;
    margin: 1.75rem auto;
}

    #createCollection .modal-content,
    #addCategory .modal-content {
        width: 100%;
        border-radius: 18px;
        box-shadow: 0 24px 64px rgba(0, 0, 0, .22);
    }

.modal .modal-header,
.modal .modal-body,
.modal .modal-footer,
.bootbox .modal-header,
.bootbox .modal-body,
.bootbox .modal-footer {
    padding-left: 22px;
    padding-right: 22px;
}

.modal .modal-body.p-0,
.modal .modal-body.p-0 > .table-container {
    padding-left: 0;
    padding-right: 0;
}

.bootbox .modal-content {
    border: 0;
    border-radius: 18px;
}

.bootbox .modal-header {
    padding-top: 20px;
    padding-bottom: 8px;
    border-bottom: 0;
}

    .bootbox .modal-title {
        font-size: 17px;
        font-weight: 600;
        letter-spacing: -.2px;
        color: #1d1d1f;
    }

.bootbox .modal-body {
    padding-top: 0;
    padding-bottom: 8px;
    color: #3a3a3c;
    font-size: 14px;
    line-height: 1.5;
}

.bootbox .modal-footer {
    gap: 8px;
    padding-top: 12px;
    padding-bottom: 18px;
    border-top: 0;
}

    .bootbox .modal-footer .btn {
        height: 36px;
        padding: 0 18px;
        border: 0;
        border-radius: 999px;
        font-size: 13.5px;
        font-weight: 500;
    }

    .bootbox .modal-footer .btn-primary {
        background-color: #154fef;
    }

    .bootbox .modal-footer .btn-default,
    .bootbox .modal-footer .btn-secondary {
        background-color: rgba(118, 118, 128, .12);
        color: #1d1d1f;
    }

#productReports .modal-body {
    padding-top: 4px;
}

.quick-sheet .quick-view-media {
    border: 1px solid #ececf0;
    border-right: 1px solid #ececf0;
    background: #fff;
}

.quick-sheet .quick-view-stage {
    background: #fff;
}

.quick-sheet .quick-view-thumbs {
    background: #f5f5f7;
    border-top: 1px solid #ececf0;
}

.quick-sheet .modal-footer {
    justify-content: flex-end;
}

#productFilters.filters-sheet .accordion-button {
    border-radius: 0px !important;
}

    #productFilters.filters-sheet .accordion-button:hover {
        background: rgba(118, 118, 128, .1);
        box-shadow: none;
    }

#productFilters.filters-sheet .filters-item:hover {
    border-bottom-color: transparent;
}

#createCollection .modal-content {
    max-height: calc(100vh - 3.5rem);
}

#createCollection .modal-body {
    max-height: calc(100vh - 14rem);
    overflow-y: auto;
}

    #createCollection .modal-body .w-100 {
        max-width: none;
    }

#createCollection .form-group {
    margin-bottom: 10px;
}

#createCollection .modal-body .btn-lg {
    height: 40px;
    font-size: 14px;
}

.reports-sheet .modal-dialog {
    max-width: 440px;
}

.reports-sheet .modal-content {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .22);
}

.reports-sheet .modal-header {
    position: relative;
    min-height: 0;
    padding: 0;
    border-bottom: 0;
}

.reports-sheet .modal-body {
    padding: 0;
}

.reports-sheet .btn-close {
    position: absolute;
    top: 16px;
    right: 18px;
    z-index: 2;
    margin: 0;
}

.reports-pane {
    padding: 40px 36px 4px;
    text-align: center;
}

.reports-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    border-radius: 22px;
    background: linear-gradient(135deg, #4d8bff 0%, #154fef 100%);
    box-shadow: 0 10px 24px rgba(21, 79, 239, .25);
    color: #fff;
    font-size: 34px;
}

    .reports-mark.is-busy {
        background: #f5f5f7;
        box-shadow: none;
    }

.reports-title {
    margin: 0 0 8px;
    color: #1d1d1f;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.2px;
}

.reports-subtitle {
    max-width: 380px;
    margin: 0 auto 24px;
    color: #6e6e73;
    font-size: 14px;
    line-height: 1.6;
}

.reports-facts {
    margin-bottom: 4px;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 14px;
    background: #f5f5f7;
    text-align: left;
}

.reports-fact {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid #ebebed;
    color: #3a3a3c;
    font-size: 13px;
    line-height: 1.5;
}

    .reports-fact:last-child {
        border-bottom: 0;
    }

    .reports-fact i {
        flex: 0 0 auto;
        color: #86868b;
        font-size: 18px;
    }

.reports-sheet .modal-footer {
    display: block;
    padding: 20px 36px 28px;
    border-top: 0;
}

    .reports-sheet .modal-footer .btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        height: 46px;
        margin: 0 0 8px;
        padding: 0;
        border: 0 !important;
        border-radius: 999px !important;
        font-size: 14px;
        font-weight: 500;
        box-shadow: none !important;
    }

    .reports-sheet .modal-footer .btn-primary {
        order: -1;
        background-color: #154fef !important;
        color: #fff !important;
    }

    .reports-sheet .modal-footer .btn-outline-white {
        background-color: rgba(118, 118, 128, .12) !important;
        color: #1d1d1f !important;
    }

        .reports-sheet .modal-footer .btn-outline-white:hover {
            background-color: rgba(118, 118, 128, .2) !important;
        }

.bootbox .modal-header:empty {
    display: none;
}

.bootbox .modal-body h1 {
    margin: 0 0 12px;
    padding-bottom: 12px;
    color: #1d1d1f;
    font-size: 17px !important;
    font-weight: 600;
    letter-spacing: -.2px;
}

.bootbox .modal-body p {
    margin-bottom: 8px;
}

    .bootbox .modal-body p:last-child {
        margin-bottom: 0;
    }

#productCollection .input-search-box .input-search-icon,
#productRecap .input-search-box .input-search-icon,
#productCollection .table .input-search-icon,
#productRecap .table .input-search-icon {
    left: 0 !important;
    right: auto !important;
    width: 34px;
    justify-content: center;
    color: #86868b;
}

#productCollection .table .input-search-box .form-control,
#productRecap .table .input-search-box .form-control {
    height: 36px;
    padding: 0 12px 0 34px !important;
    border: 0;
    border-radius: 10px;
    background: rgba(118, 118, 128, .12);
    font-size: 13px;
    box-shadow: none;
}

    #productCollection .table .input-search-box .form-control:focus,
    #productRecap .table .input-search-box .form-control:focus {
        background: rgba(118, 118, 128, .16);
        box-shadow: none;
    }

#productCollection .modal-body,
#productRecap .modal-body {
    max-height: calc(100vh - 16rem);
    overflow-y: auto;
}

.reports-sheet .modal-dialog,
.create-sheet .modal-dialog {
    max-width: 460px;
}

.create-sheet .modal-content {
    position: relative;
    border: 0;
    border-radius: 22px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .22);
}

.create-sheet .modal-header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    min-height: 0;
    padding: 0;
    border-bottom: 0;
    background: transparent;
}

    .create-sheet .btn-close {
        position: absolute;
        top: 16px;
        right: 18px;
        z-index: 2;
        margin: 0;
    }

.create-sheet .modal-body {
    padding: 0;
}

.create-pane {
    padding: 40px 36px 28px;
}

.create-head {
    margin-bottom: 24px;
    text-align: center;
}

.create-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 20px;
    border-radius: 22px;
    background: linear-gradient(135deg, #4d8bff 0%, #154fef 100%);
    box-shadow: 0 10px 24px rgba(21, 79, 239, .25);
    color: #fff;
    font-size: 34px;
}
.create-mark i{
      font-size: 34px;
}

.create-title {
    margin: 0 0 8px;
    color: #1d1d1f;
    font-size: 22px !important;
    font-weight: 600;
    letter-spacing: -.2px;
}

.create-subtitle {
    max-width: 380px;
    margin: 0 auto 24px;
    color: #6e6e73;
    font-size: 14px;
    line-height: 1.6;
}

.create-fields {
    margin-bottom: 20px;
    text-align: left;
}

    .create-fields .form-group {
        margin-bottom: 10px;
    }

    .create-fields .form-floating > .form-control {
        height: 54px;
        min-height: 54px;
        padding: 23px 14px 7px;
        border: 1px solid #e3e3e8;
        border-radius: 12px;
        background: #fff;
        font-size: 14px;
        box-shadow: none;
    }

        .create-fields .form-floating > .form-control:focus {
            border-color: #154fef;
            box-shadow: 0 0 0 3px rgba(21, 79, 239, .12);
        }

    .create-fields .form-floating > label {
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0 14px;
        color: #86868b;
        font-size: 14px;
        line-height: 1.2;
    }

    .create-fields .form-floating > .form-control:focus ~ label,
    .create-fields .form-floating > .form-control:not(:placeholder-shown) ~ label {
        display: block;
        height: auto;
        padding: 9px 14px 0;
        font-size: 11px;
        transform: none;
    }

    .create-fields h1 {
        margin: 14px 0 6px;
        color: #6e6e73;
        font-size: 14px;
        font-weight: 500;
    }

.create-sheet .create-cta {
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: 999px;
    background-color: #154fef;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    box-shadow: none;
}

.create-sheet .create-ghost {
    width: 100%;
    height: 40px;
    margin-top: 8px;
    border: 0;
    background: transparent;
    color: #86868b;
    font-size: 14px;
    box-shadow: none;
}

    .create-sheet .create-ghost:hover {
        color: #1d1d1f;
    }

.bootbox.bootbox-sheet .modal-dialog {
    max-width: 440px;
}

.bootbox.bootbox-sheet .modal-content {
    border: 0;
    border-radius: 22px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .22);
}

.bootbox.bootbox-sheet .modal-header {
    display: block;
    padding: 36px 36px 0 !important;
    border-bottom: 0;
    text-align: center;
}

    .bootbox.bootbox-sheet .modal-header .modal-title,
    .bootbox.bootbox-sheet .modal-header h4,
    .bootbox.bootbox-sheet .modal-header h5 {
        margin: 0;
        color: #1d1d1f;
        font-size: 22px;
        font-weight: 600;
        letter-spacing: -.2px;
    }

    .bootbox.bootbox-sheet .modal-header .close,
    .bootbox.bootbox-sheet .modal-header .btn-close {
        position: absolute;
        top: 16px;
        right: 18px;
        width: 26px;
        height: 26px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background-color: #e8e8ed;
        color: #1d1d1f;
        font-size: 15px;
        line-height: 1;
        opacity: .75;
        text-shadow: none;
    }

.bootbox.bootbox-sheet .modal-body {
    padding: 12px 36px 0 !important;
    color: #6e6e73;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}

    .bootbox.bootbox-sheet .modal-body h1 {
        display: none;
    }

    .bootbox.bootbox-sheet .modal-body p {
        max-width: 360px;
        margin: 0 auto 10px;
    }

        .bootbox.bootbox-sheet .modal-body p:last-child {
            margin-bottom: 0;
        }

.bootbox.bootbox-sheet .modal-footer {
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    padding: 24px 36px 28px !important;
    border-top: 0;
}

    .bootbox.bootbox-sheet .modal-footer .btn {
        display: block;
        width: 100%;
        height: 46px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 999px;
        font-size: 15px;
        font-weight: 500;
        box-shadow: none;
    }

        .bootbox.bootbox-sheet .modal-footer .btn-primary {
            background-color: #154fef;
            color: #fff;
        }

        .bootbox.bootbox-sheet .modal-footer .btn-default,
        .bootbox.bootbox-sheet .modal-footer .btn-secondary {
            height: 40px;
            margin-bottom: 0;
            background: transparent;
            color: #86868b;
            font-size: 14px;
        }

            .bootbox.bootbox-sheet .modal-footer .btn-default:hover {
                background: transparent;
                color: #1d1d1f;
            }

#productFilters.filters-sheet .accordion-collapse,
#productFilters.filters-sheet .accordion-body,
#productFilters.filters-sheet .attribute-value-list {
    background: #fff;
}

#productFilters.filters-sheet .filters-item.is-open,
#productFilters.filters-sheet .filters-item:has(.accordion-collapse.show),
#productFilters.filters-sheet .filters-item:has(.accordion-collapse.in) {
    background: #fff;
    border-radius: 12px;
}

#createCollection.full-modal .modal-header,
#createCollection.full-modal .modal-footer,
#addCategory.full-modal .modal-header,
#addCategory.full-modal .modal-footer {
    height: auto;
}

#createCollection.full-modal .modal-body,
#addCategory.full-modal .modal-body {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
}

#createCollection.full-modal .modal-dialog,
#createCollection.full-modal .modal-content,
#addCategory.full-modal .modal-dialog,
#addCategory.full-modal .modal-content {
    border-radius: 22px;
}

#createCollection.full-modal .modal-content,
#addCategory.full-modal .modal-content {
    max-height: calc(100vh - 3.5rem);
    overflow-y: auto;
}

#createCollection.full-modal .btn-close,
#addCategory.full-modal .btn-close {
    margin-top: 0 !important;
    transform: none !important;
}

/* grouped list, iOS settings style */
#productFilters.filters-sheet .filters-body {
    background: #f5f5f7;
}

#productFilters.filters-sheet .accordion {
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

#productFilters.filters-sheet .filters-item,
#productFilters.filters-sheet .filters-item:hover,
#productFilters.filters-sheet .filters-item.is-open {
    position: relative;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    overflow: visible;
    box-shadow: none;
}

    #productFilters.filters-sheet .filters-item + .filters-item::before {
        content: "";
        position: absolute;
        top: 0;
        left: 16px;
        right: 0;
        height: 1px;
        background: #ececf0;
        z-index: 1;
    }

#productFilters.filters-sheet .accordion-header {
    margin: 0;
}

#productFilters.filters-sheet .accordion-button {
    height: 48px;
    padding: 0 16px;
    border-radius: 0;
    background: transparent;
    color: #1d1d1f;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: -.1px;
}

 

    #productFilters.filters-sheet .accordion-button .color {
        margin-left: 4px;
        color: #86868b;
        font-size: 14px;
        font-weight: 400;
    }

    #productFilters.filters-sheet .accordion-button::after {
        content: "";
        width: 7px;
        height: 7px;
        margin-left: auto;
        border: 0;
        border-right: 1.7px solid #000;
        border-bottom: 1.7px solid #000;
        border-radius: 1px;
        background: none;
        transform: rotate(-45deg);
        transition: transform .2s ease;
    }

    #productFilters.filters-sheet .accordion-button:not(.collapsed)::after {
        transform: rotate(45deg);
    }

#productFilters.filters-sheet .accordion-body {
    padding: 0 0 6px;
    background: #fff;
}

#productFilters.filters-sheet .avl-search {
    margin: 0 16px 6px;
}

    #productFilters.filters-sheet .avl-search .form-control {
        height: 34px;
        border: 0;
        border-radius: 10px;
        background: rgba(118, 118, 128, .12);
        font-size: 13px;
        box-shadow: none;
    }

#productFilters.filters-sheet .avl-label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    margin: 0;
    padding: 0 16px 0 16px;
    color: #1d1d1f;
    font-size: 14.5px;
    font-weight: 400;
    cursor: pointer;
}

    #productFilters.filters-sheet .avl-label + .avl-label::before {
        content: "";
        position: absolute;
        top: 0;
        left: 16px;
        right: 0;
        height: 1px;
        background: #f2f2f5;
    }

    #productFilters.filters-sheet .avl-label:hover {
        background: rgba(0, 0, 0, .035);
    }

    #productFilters.filters-sheet .avl-label input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    #productFilters.filters-sheet .avl-label > span {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #productFilters.filters-sheet .avl-label .avl-check {
        display: none !important;
        flex: 0 0 auto;
        color: #154fef;
        font-size: 20px;
    }

    #productFilters.filters-sheet .avl-label input[type="checkbox"]:checked ~ .avl-check {
        display: block !important;
    }

    #productFilters.filters-sheet .avl-label input[type="checkbox"]:checked ~ span {
        color: #154fef;
    }

/* add / remove collection list */
#productCollection .modal-body,
#productRecap .modal-body {
    padding: 0 22px 6px !important;
    background: #fff;
}

    #productCollection .modal-body .card,
    #productRecap .modal-body .card {
        border: 0;
        background: transparent;
        box-shadow: none !important;
    }

#productCollection .table thead th,
#productRecap .table thead th {
    padding: 0 0 12px !important;
    border: 0;
    background: transparent;
}

#productCollection .table,
#productCollection .table > :not(:first-child),
#productCollection .table thead,
#productCollection .table thead th,
#productCollection .table tbody tr,
#productCollection .table tbody td,
#productRecap .table,
#productRecap .table > :not(:first-child),
#productRecap .table thead,
#productRecap .table thead th,
#productRecap .table tbody tr,
#productRecap .table tbody td {
    border: 0 !important;
    box-shadow: none !important;
}

#productCollection .table tbody tr:first-child label::before,
#productRecap .table tbody tr:first-child label::before {
    display: none !important;
}

#productCollection .table tbody,
#productRecap .table tbody {
    border: 0;
    background: transparent;
}

    #productCollection .table tbody tr,
    #productRecap .table tbody tr {
        background: transparent !important;
    }

    #productCollection .table tbody td,
    #productRecap .table tbody td {
        padding: 0;
        border: 0;
    }

    #productCollection .table tbody tr:first-child label,
    #productRecap .table tbody tr:first-child label {
        border-radius: 12px 12px 0 0;
    }

    #productCollection .table tbody tr:last-child label,
    #productRecap .table tbody tr:last-child label {
        border-radius: 0 0 12px 12px;
    }

#productCollection .table tbody label,
#productRecap .table tbody label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 46px;
    margin: 0;
    padding: 0 14px;
    border-radius: 0;
    background: #f5f5f7;
    color: #1d1d1f;
    font-size: 14px;
    cursor: pointer;
}

    #productCollection .table tbody tr + tr label::before,
    #productRecap .table tbody tr + tr label::before {
        content: "";
        position: absolute;
        top: 0;
        left: 14px;
        right: 14px;
        height: 1px;
        background: #e5e5ea;
    }

    #productCollection .table tbody label:hover,
    #productRecap .table tbody label:hover {
        background: #ebebee;
    }

    #productCollection .table tbody label input[type="checkbox"],
    #productRecap .table tbody label input[type="checkbox"] {
        position: static;
        order: 2;
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        margin: 0;
        opacity: 1;
        pointer-events: auto;
        accent-color: #154fef;
    }

    #productCollection .table tbody label span,
    #productRecap .table tbody label span {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 500;
    }

#editFiltre.full-modal .modal-dialog {
    max-width: 460px;
    margin: 1.75rem auto;
}

#editFiltre.full-modal .modal-dialog,
#editFiltre.full-modal .modal-content {
    border-radius: 22px;
}

#editFiltre.full-modal .modal-content {
    border: 0;
    max-height: calc(100vh - 3.5rem);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .22);
}

#editFiltre.full-modal .modal-header {
    height: auto;
    padding: 24px 24px 12px !important;
    border-bottom: 0;
}

    #editFiltre .modal-title {
        font-size: 20px;
        font-weight: 600;
        letter-spacing: -.2px;
        color: #1d1d1f;
    }

    #editFiltre .btn-close {
        top: 18px;
        right: 20px;
        margin-top: 0 !important;
        transform: none !important;
    }

#editFiltre.full-modal .modal-body {
    height: auto;
    max-height: calc(100vh - 17rem);
    padding: 0 24px !important;
    overflow-y: auto !important;
}

    #editFiltre .modal-body > .w-100,
    #editFiltre .modal-body > div > .w-100 {
        border-radius: 14px;
        background: #f5f5f7;
        overflow: hidden;
    }

    #editFiltre .modal-body label {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        height: 46px;
        margin: 0;
        padding: 0 16px;
        color: #1d1d1f;
        font-size: 15px;
        cursor: pointer;
    }

    #editFiltre .modal-body > div > .w-100 > div + div label::before {
        content: "";
        position: absolute;
        top: 0;
        left: 16px;
        right: 0;
        height: 1px;
        background: #e5e5ea;
    }

    #editFiltre .modal-body label:hover {
        background: rgba(0, 0, 0, .04);
    }

    #editFiltre .modal-body label input[type="checkbox"] {
        position: static;
        order: 2;
        flex: 0 0 auto;
        width: 18px;
        height: 18px;
        margin: 0;
        opacity: 1;
        pointer-events: auto;
        accent-color: #154fef;
    }

    #editFiltre .modal-body label span {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 500;
    }

#editFiltre.full-modal .modal-footer {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    height: auto;
    padding: 14px 20px 20px !important;
    border-top: 0;
}

    #editFiltre .modal-footer .form-group {
        margin: 0;
    }

    #editFiltre .modal-footer .btn {
        width: auto;
        height: 38px;
        padding: 0 20px;
        border: 0;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 500;
        box-shadow: none;
    }

    #editFiltre .modal-footer .btn-primary {
        background-color: #154fef;
        color: #fff;
    }

    #editFiltre .modal-footer .btn-secondary {
        margin: 0;
        background-color: rgba(118, 118, 128, .12);
        color: #1d1d1f;
    }

        #editFiltre .modal-footer .btn-secondary:hover {
            background-color: rgba(118, 118, 128, .2);
            color: #1d1d1f;
        }

    .product-filter-wrapper {
       margin: 0 -7px !important; 
    }
.oneHead > tr > th, .main-head > tr > th {
    padding: 0 15px !important;

}
/* every pill-shaped control in a filter bar, regardless of btn-xs */
.layout-page .product-filter-wrapper .btn.btn-outline-secondary,
.layout-page .product-filter-wrapper .btn.btn-outline-white,
.layout-page .product-filter-wrapper .btn.btn-outline-primary,
.layout-page .product-filter-wrapper a.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 0 !important;
    border-radius: 999px !important;
    background-color: rgba(118, 118, 128, .12) !important;
    color: #1d1d1f !important;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none !important;
}

    .layout-page .product-filter-wrapper .btn.btn-outline-secondary:hover,
    .layout-page .product-filter-wrapper a.btn:hover {
        background-color: rgba(118, 118, 128, .2) !important;
    }

.trend-report-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.trend-report-filter .accordion-item,
.trend-report-filter .card {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.trend-report-filter .accordion-header {
    margin: 0;
}

.trend-report-filter .accordion-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    height: 36px !important;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: rgba(118, 118, 128, .12);
    color: #1d1d1f;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
}

    .trend-report-filter .accordion-button:hover {
        background: rgba(118, 118, 128, .2);
    }

    .trend-report-filter .accordion-button::after {
        content: "";
        flex: 0 0 auto;
        width: 7px;
        height: 7px;
        margin-left: 2px;
        border: 0;
        border-right: 1.7px solid #6e6e73;
        border-bottom: 1.7px solid #6e6e73;
        border-radius: 1px;
        background: none;
        transform: translateY(-2px) rotate(45deg);
        transition: transform .2s ease;
    }

    .trend-report-filter .accordion-button:not(.collapsed)::after {
        transform: translateY(2px) rotate(-135deg);
    }

    .trend-report-filter .accordion-button:has(.filters-count:not(.ng-hide)) {
        background: rgba(21, 79, 239, .12);
        color: #154fef;
    }

        .trend-report-filter .accordion-button:has(.filters-count:not(.ng-hide))::after {
            border-color: #154fef;
        }

.trend-report-filter .accordion-collapse {
    position: absolute;
    z-index: 30;
    min-width: 280px;
    margin-top: 6px;
}

.trend-report-filter .accordion-body {
    padding: 6px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .98);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .16), 0 0 0 1px rgba(0, 0, 0, .05);
}

.category-tree {
    max-height: 360px;
    overflow-y: auto;
}

.category-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 8px;
    border-radius: 9px;
}

    .category-row:hover {
        background: rgba(0, 0, 0, .035);
    }

.category-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #86868b;
    font-size: 17px;
}

    .category-toggle:hover {
        background: rgba(118, 118, 128, .16);
        color: #1d1d1f;
    }

.category-toggle-spacer {
    display: inline-block;
    width: 22px;
}

.category-label {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: #1d1d1f;
    font-size: 13.5px;
    cursor: pointer;
}

    .category-label input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .category-label > span {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .category-label::after {
        content: "\eca4";
        flex: 0 0 auto;
        margin-left: 6px;
        font-family: "boxicons";
        font-size: 18px;
        line-height: 1;
        color: #154fef;
        opacity: 0;
    }

    .category-label:has(input:checked)::after {
        opacity: 1;
    }

    .category-label:has(input:checked) > span {
        color: #154fef;
    }

.category-label-group {
    color: #86868b;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    cursor: default;
}

.category-badge {
    flex: 0 0 auto;
    min-width: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(21, 79, 239, .12);
    color: #154fef;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
}

.category-children {
    padding-left: 14px;
}

.category-empty {
    padding: 14px 10px;
    color: #86868b;
    font-size: 13px;
    text-align: center;
}





/* customize filtering: left sheet, same language as the Filters panel */
#editFiltre.full-modal .modal-dialog {
    max-width: 420px;
    width: 420px;
    height: 100%;
    margin: 0;
    border-radius: 0;
}

#editFiltre.full-modal .modal-content {
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0 22px 22px 0;
    background: #f5f5f7;
    box-shadow: 18px 0 50px rgba(0, 0, 0, .12);
}

#editFiltre.full-modal .modal-header {
    height: auto;
    padding: 24px 20px 14px !important;
    border-bottom: 0;
    background: transparent;
}

#editFiltre.full-modal .modal-body {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    max-height: none;
    padding: 0 16px !important;
    overflow-y: auto !important;
    background: transparent;
}

    #editFiltre .modal-body > div > .w-100 {
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 14px;
        background: #fff;
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    }

        #editFiltre .modal-body > div > .w-100 > div {
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
            background: transparent !important;
        }

    #editFiltre .modal-body label {
        height: 46px;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #editFiltre .modal-body > div > .w-100 > div + div label::before {
        background: #ececf0;
    }

#editFiltre.full-modal .modal-footer {
    height: auto;
    padding: 12px 16px 18px !important;
    border-top: 0;
    background: transparent;
}

#editFiltre .modal-body label {
    padding: 0 16px !important;
    gap: 10px;
}

    #editFiltre .modal-body label > span {
        margin: 0 !important;
        padding: 0 !important;
        text-indent: 0 !important;
    }

#productFilters.filters-sheet .avl-label input[type="checkbox"],
.category-label input[type="checkbox"] {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.form-horizontal .artwork-dropzone,
.form-horizontal .file-dropzone {
    border: 2px dashed #dcdce2;
    border-radius: 14px;
    background-color: #fafafa;
    color: #6e6e73;
}

    .form-horizontal .artwork-dropzone:hover,
    .form-horizontal .artwork-dropzone.artwork-dropzone-over,
    .form-horizontal .file-dropzone:hover,
    .form-horizontal .file-dropzone.artwork-dropzone-over {
        border-color: #154fef;
        background-color: rgba(21, 79, 239, .04);
    }

    .form-horizontal .file-dropzone b {
        color: #1d1d1f;
        font-size: 13.5px;
        font-weight: 500;
    }

    .form-horizontal .file-dropzone small {
        color: #86868b;
        font-size: 12px;
    }

/* export view modal */
#addExport .modal-dialog {
    max-width: 480px;
}

#addExport .modal-content {
    border: 0;
    border-radius: 22px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .22);
}

#addExport .modal-header {
    padding: 24px 24px 8px !important;
    border-bottom: 0;
}

    #addExport .modal-title {
        font-size: 20px;
        font-weight: 600;
        letter-spacing: -.2px;
        color: #1d1d1f;
    }

#addExport .modal-body {
    max-height: calc(100vh - 16rem);
    padding: 8px 24px 4px !important;
    overflow-y: auto;
}

    #addExport .modal-body > .form-group > label b,
    #addExport .modal-body > .form-group > label {
        display: block;
        margin-bottom: 6px;
        color: #6e6e73;
        font-size: 13px;
        font-weight: 500;
    }

    #addExport .modal-body select.form-control {
        height: 44px;
        padding: 0 12px;
        border: 1px solid #e3e3e8;
        border-radius: 12px;
        background-color: #fff;
        color: #1d1d1f;
        font-size: 14px;
        box-shadow: none;
    }

        #addExport .modal-body select.form-control:focus {
            border-color: #154fef;
            box-shadow: 0 0 0 3px rgba(21, 79, 239, .12);
        }

    #addExport .modal-body > .form-group {
        margin-bottom: 16px;
    }

/* each export option becomes a selectable card */
#addExport .radio-flexiy {
    position: relative;
    padding: 12px 44px 12px 14px;
    border: 1px solid #e5e5ea;
    border-radius: 14px;
    background: #fff;
    transition: border-color .15s ease, background-color .15s ease;
}

    #addExport .radio-flexiy:hover {
        background: #fafafa;
    }

    #addExport .radio-flexiy .radio-inline {
        display: block;
        margin: 0;
        padding: 0;
        cursor: pointer;
    }

        #addExport .radio-flexiy .radio-inline::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 14px;
        }

    #addExport .radio-flexiy input[type="radio"] {
        position: absolute;
        width: 0;
        height: 0;
        margin: 0;
        opacity: 0;
        pointer-events: none;
    }

    #addExport .radio-flexiy .radio-inline span b {
        color: #1d1d1f;
        font-size: 14.5px;
        font-weight: 500;
    }

    #addExport .radio-flexiy .radio-flexiy-text {
        margin-top: 2px;
        color: #86868b;
        font-size: 12.5px;
        line-height: 1.45;
    }

    #addExport .radio-flexiy::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 14px;
        width: 20px;
        height: 20px;
        border: 1.5px solid #d2d2d7;
        border-radius: 50%;
        background: #fff;
        transform: translateY(-50%);
    }

    #addExport .radio-flexiy:has(input:checked) {
        border-color: #154fef;
        background: rgba(21, 79, 239, .05);
    }

        #addExport .radio-flexiy:has(input:checked)::after {
            border-color: #154fef;
            background: #154fef radial-gradient(circle, #fff 0 3px, transparent 4px);
        }

#addExport .form-group.d-flex {
    gap: 8px;
    margin-left: 0 !important;
    padding: 0 0 0 14px;
}

    #addExport .form-group.d-flex .radio-flexiy {
        flex: 1 1 0;
        margin: 0 !important;
        padding: 9px 34px 9px 12px;
        border-radius: 12px;
    }

        #addExport .form-group.d-flex .radio-flexiy::after {
            right: 10px;
            width: 17px;
            height: 17px;
        }

        #addExport .form-group.d-flex .radio-flexiy .radio-inline span b {
            font-size: 13px;
        }

#addExport .modal-footer {
    gap: 8px;
    padding: 16px 24px 22px !important;
    border-top: 0;
}

    #addExport .modal-footer .btn {
        height: 42px;
        padding: 0 22px;
        border: 0 !important;
        border-radius: 999px !important;
        font-size: 14.5px;
        font-weight: 500;
        box-shadow: none !important;
    }

    #addExport .modal-footer .btn-primary {
        background-color: #154fef !important;
        color: #fff !important;
    }

    #addExport .modal-footer .btn-outline-secondary {
        background-color: rgba(118, 118, 128, .12) !important;
        color: #1d1d1f !important;
    }

/* product clone: identity fields and settings */
#productCloneForm,
.form-horizontal .card-body > h1 {
    margin: 18px 0 10px;
    color: #6e6e73;
    font-size: 14px;
    font-weight: 500;
}

.form-horizontal .card-body > .row {
    margin-left: -5px;
    margin-right: -5px;
    row-gap: 10px;
}

    .form-horizontal .card-body > .row > [class^="col-"] {
        padding-left: 5px;
        padding-right: 5px;
    }

        .form-horizontal .card-body > .row > [class^="col-"] > .form-group {
            margin-bottom: 0;
        }

.clone-replace {
    margin-top: 6px;
    padding: 12px 14px;
    border: 1px solid #ffd8d5;
    border-radius: 14px;
    background: rgba(255, 59, 48, .06);
}

    .clone-replace small {
        display: block;
        margin-top: 4px;
        padding-left: 30px;
        color: #86868b;
        font-size: 12.5px;
        line-height: 1.45;
    }

    .clone-replace label.is-on span {
        color: #ff3b30;
        font-weight: 600;
    }

.form-horizontal .card-body > .form-group > label:has(> input[type="checkbox"]) {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 0;
    color: #1d1d1f;
    font-size: 14px;
    cursor: pointer;
}

    .form-horizontal .card-body > .form-group > label > input[type="checkbox"] {
        flex: 0 0 auto;
        width: 20px;
        height: 20px;
        margin: 0;
        accent-color: #154fef;
    }


.form-horizontal .clone-replace > label:has(> input[type="checkbox"]) {
    border-top: 0 !important;
    min-height: 0;
}

/* selected filter chips outside the filters sheet, same look as the product list */
.trend-report-selected {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0 0 10px;
    border: 0;
    background: transparent;
}

    .trend-report-selected .filters-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto;
        height: 28px;
        padding: 0 9px 0 11px;
        border: 1px solid #e3e3e8;
        border-radius: 999px;
        background: #fff;
        color: #1d1d1f;
        font-size: 12px;
        white-space: nowrap;
        cursor: pointer;
        transition: border-color .15s ease, color .15s ease;
    }

        .trend-report-selected .filters-chip:hover {
            border-color: #154fef;
            color: #154fef;
        }

        .trend-report-selected .filters-chip i {
            font-size: 14px;
            color: #86868b;
        }

        .trend-report-selected .filters-chip:hover i {
            color: #154fef;
        }

    .trend-report-selected .filters-clear {
        position: static;
        order: 99;
        flex: 0 0 auto;
        margin: 0 0 0 2px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #154fef;
        font-size: 12px;
        line-height: 28px;
        text-decoration: underline;
        white-space: nowrap;
    }

        .trend-report-selected .filters-clear:hover {
            color: #0b3fcf;
            text-decoration: underline;
        }

.trend-report-filter .accordion-button .filters-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background-color: #154fef;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

.trend-report-filter .accordion-button .bx-filter-alt {
    font-size: 16px;
}

/* the filter trigger is just a pill: kill the card/accordion chrome around it */
.layout-page .product-filter-item:has(.trend-report-filter) {
    flex: 0 0 auto;
    width: auto !important;
}

.layout-page .trend-report-filter,
.layout-page .trend-report-filter > .card,
.layout-page .trend-report-filter > .accordion-item,
.layout-page .private-body,
.layout-page .private-body > div,
.layout-page .private-body > div > .w-100 {
    display: inline-block;
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.layout-page .trend-report-filter .accordion-header {
    margin: 0;
    padding: 0;
    background: transparent;
}

.layout-page .trend-report-filter .accordion-collapse {
    left: auto;
}

.layout-page .trend-report-filter .accordion-collapse,
.layout-page .trend-report-filter .accordion-collapse .accordion-body,
.layout-page .trend-report-filter .category-picker,
.layout-page .trend-report-filter .category-tree {
    border: 0 !important;
    background-image: none;
}

.layout-page .trend-report-filter .accordion-collapse {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.layout-page .trend-report-filter .accordion-collapse .accordion-body {
    border-radius: 14px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .16), 0 0 0 1px rgba(0, 0, 0, .05);
}

/* files: segmented tabs instead of underlined ones */
.document-tab-wrapper .nav-tabs {
    display: inline-flex;
    gap: 0;
    margin-bottom: 14px;
    padding: 3px;
    border: 0;
    border-radius: 999px;
    background-color: rgba(118, 118, 128, .12);
}

    .document-tab-wrapper .nav-tabs .nav-item {
        margin: 0;
    }

    .document-tab-wrapper .nav-tabs .nav-link {
        display: inline-flex;
        align-items: center;
        height: 30px;
        padding: 0 14px !important;
        border: 0 !important;
        border-radius: 999px !important;
        background: transparent !important;
        color: #1d1d1f !important;
        font-size: 13px;
        font-weight: 500;
        box-shadow: none !important;
    }

        .document-tab-wrapper .nav-tabs .nav-link:hover {
            color: #154fef !important;
        }

    .document-tab-wrapper .nav-tabs .nav-item.active .nav-link,
    .document-tab-wrapper .nav-tabs .nav-link.active {
        background: #fff !important;
        color: #1d1d1f !important;
        font-weight: 600;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .14) !important;
    }

.form-horizontal .card-header .btn-outline-secondary,
.form-horizontal .card-header .btn-transparent,
.form-horizontal .card-header .btn-outline-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    min-width: 34px;
    padding: 0 12px;
    border: 0 !important;
    border-radius: 999px !important;
    background-color: rgba(118, 118, 128, .12) !important;
    color: #1d1d1f !important;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none !important;
}

    .form-horizontal .card-header .btn-outline-secondary:has(> span.bx:only-child),
    .form-horizontal .card-header .btn-transparent:has(> span.bx:only-child) {
        width: 34px;
        padding: 0;
        border-radius: 50% !important;
    }

    .form-horizontal .card-header .btn-outline-secondary:hover,
    .form-horizontal .card-header .btn-transparent:hover {
        background-color: rgba(118, 118, 128, .2) !important;
    }

    .form-horizontal .card-header .btn .bx {
        font-size: 17px;
    }

/* attributes list stays edge to edge; the later .card-body > .row rule was winning */
.form-horizontal .card-body > .row.product-attribute-list {
    margin: 4px -18px 0 !important;
    row-gap: 0;
}

    .form-horizontal .card-body > .row.product-attribute-list > [class^="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

.product-attribute-list .datalist_attribute {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    top: calc(100% - 2px) !important;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .22), 0 0 0 1px rgba(0, 0, 0, .05) !important;
}

    .product-attribute-list .datalist_attribute .datalist_search {
        margin: 0;
        padding: 8px 14px;
    }

    .product-attribute-list .datalist_attribute label {
        margin: 0;
        padding: 8px 14px;
        border-radius: 0;
        font-size: 13px;
    }

        .product-attribute-list .datalist_attribute label:hover {
            background-color: rgba(118, 118, 128, .1);
        }

/* QR modal */
#createQR .modal-dialog {
    max-width: 380px;
}

#createQR .modal-content {
    border: 0;
    border-radius: 22px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .22);
}

#createQR .modal-header {
    position: relative;
    min-height: 0;
    padding: 0 !important;
    border-bottom: 0;
}

    #createQR .btn-close {
        position: absolute;
        top: 16px;
        right: 18px;
        z-index: 2;
        margin: 0;
    }

#createQR .modal-body {
    padding: 36px 30px 4px !important;
    text-align: center;
}

    #createQR .row {
        margin: 0;
    }

    #createQR [class^="col-"] {
        padding: 0;
    }

    #createQR .img-thumbnail {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 200px;
        height: 200px !important;
        margin: 0 auto 20px;
        padding: 14px;
        border: 1px solid #ececf0;
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
    }

        #createQR .img-thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

    #createQR br {
        display: none;
    }

    #createQR h5 {
        margin: 0 0 6px;
        color: #1d1d1f;
        font-size: 19px;
        font-weight: 600;
        letter-spacing: -.2px;
    }

    #createQR .lead {
        max-width: 300px;
        margin: 0 auto;
        color: #6e6e73;
        font-size: 13.5px;
        font-weight: 400;
        line-height: 1.5;
    }

#createQR .modal-footer {
    display: block;
    padding: 20px 30px 26px !important;
    border-top: 0;
}

    #createQR .modal-footer .btn {
        width: 100%;
        height: 44px;
        border: 0 !important;
        border-radius: 999px !important;
        background-color: rgba(118, 118, 128, .12) !important;
        color: #1d1d1f !important;
        font-size: 14.5px;
        font-weight: 500;
        box-shadow: none !important;
    }

        #createQR .modal-footer .btn:hover {
            background-color: rgba(118, 118, 128, .2) !important;
        }

/* "Only the chosen ones" sits next to the Files title */
.form-horizontal .card-header .lead:has(> label.small) {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .form-horizontal .card-header .lead > label.small {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        height: 28px;
        margin: 0;
        padding: 0 11px;
        border-radius: 999px;
        background-color: rgba(118, 118, 128, .12);
        color: #1d1d1f;
        font-size: 12.5px;
        font-weight: 400;
        white-space: nowrap;
        cursor: pointer;
    }

        .form-horizontal .card-header .lead > label.small:hover {
            background-color: rgba(118, 118, 128, .2);
        }

        .form-horizontal .card-header .lead > label.small input[type="checkbox"] {
            flex: 0 0 auto;
            margin: 0;
        }

/* breathing room between the tabs and the upload strip */
.document-tab-wrapper .nav-tabs {
    margin-bottom: 20px;
}

.document-tab-wrapper .tab-content {
    padding-top: 4px;
}

/* the value list spans the whole row, trash button included */
.product-attribute-list .input-group {
    position: relative;
}

    .product-attribute-list .input-group > .form-floating {
        position: static;
    }

    .product-attribute-list .form-floating > label {
        left: 0;
    }

.product-attribute-list .datalist_attribute {
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    z-index: 1000;
}

.document-tab-wrapper .nav-tabs {
    margin-bottom: 0;
}

.document-tab-wrapper .tab-content {
    padding-top: 18px;
}

    .document-tab-wrapper .tab-content:not(:has(.tab-pane.active > :not(.ng-hide))) {
        padding-top: 0;
    }

.form-horizontal .card-body > .document-tab-wrapper + .heading-panel,
.form-horizontal .document-tab-wrapper ~ .heading-panel {
    margin-top: 18px;
}

.form-horizontal .card-body .image-input {
    margin-top: 0;
}

/* attribute value list: search stays pinned, nothing peeks above it */
.product-attribute-list .datalist_attribute {
    padding: 0 !important;
    overflow-x: hidden;
}

    .product-attribute-list .datalist_attribute .datalist_search {
        position: sticky !important;
        top: 0;
        z-index: 3;
        margin: 0 !important;
        padding: 8px 10px !important;
        background: #fff !important;
        box-shadow: 0 1px 0 #f0f0f3;
    }

        .product-attribute-list .datalist_attribute .datalist_search input.form-control {
            height: 39px;
            min-height: 39px;
            padding: 0 12px;
            border: 0 !important;
            border-radius: 10px !important;
            background: rgba(118, 118, 128, .1) !important;
            color: #1d1d1f;
            font-size: 13px;
            box-shadow: none !important;
        }

            .product-attribute-list .datalist_attribute .datalist_search input.form-control:focus {
                background: rgba(118, 118, 128, .16) !important;
                box-shadow: none !important;
            }

    .product-attribute-list .datalist_attribute label {
        margin: 0 !important;
        padding: 9px 14px !important;
        border-radius: 0 !important;
    }

        .product-attribute-list .datalist_attribute label:first-of-type {
            margin-top: 2px !important;
        }

        .product-attribute-list .datalist_attribute label:last-of-type {
            margin-bottom: 6px !important;
        }

/* files gallery: a clean card grid inside the tab */
.document-tab-wrapper .document-slick {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 12px;
    padding: 0;
    border-top: 0;
    background: transparent;
}

    .document-tab-wrapper .document-slick .dz-item {
        position: relative;
        border-radius: 14px;
        background: #fff;
        overflow: hidden;
        box-shadow: 0 0 0 1px #ececf0;
        transition: box-shadow .15s ease;
    }

        .document-tab-wrapper .document-slick .dz-item:hover {
            box-shadow: 0 0 0 1px #dcdce2, 0 10px 24px rgba(0, 0, 0, .1);
        }

    .document-tab-wrapper .document-slick .ds-privew {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        margin: 0;
        padding: 10px;
        border: 0;
        border-radius: 14px;
        background: #fafafa;
    }

        .document-tab-wrapper .document-slick .ds-privew:hover {
            box-shadow: none;
        }

        .document-tab-wrapper .document-slick .ds-privew img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .document-tab-wrapper .document-slick .ds-privew > span {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 12px;
            color: #6e6e73;
            font-size: 12.5px;
            line-height: 1.4;
            text-align: center;
        }

    .document-tab-wrapper .document-slick .dz-item-info {
        position: absolute;
        top: 8px;
        left: 8px;
        z-index: 12;
        display: inline-flex;
        align-items: center;
        height: 20px;
        padding: 0 8px;
        border-radius: 999px;
        background: rgba(0, 0, 0, .55);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        color: #fff;
        font-size: 10.5px;
        font-weight: 500;
        letter-spacing: .01em;
    }

        .document-tab-wrapper .document-slick .dz-item-info:not(:has(span:not(.ng-hide))) {
            display: none;
        }

    .document-tab-wrapper .document-slick .dz-item-actions {
        position: absolute;
        top: 8px;
        right: 8px;
        bottom: auto;
        z-index: 14;
        display: flex;
        align-items: center;
        gap: 6px;
        opacity: 0;
        transition: opacity .15s ease;
    }

    .document-tab-wrapper .document-slick .dz-item:hover .dz-item-actions,
    .document-tab-wrapper .document-slick .dz-item:has(input:checked) .dz-item-actions {
        opacity: 1;
    }

        .document-tab-wrapper .document-slick .dz-item-actions > .d-flex {
            display: flex !important;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .92);
            box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
        }

            .document-tab-wrapper .document-slick .dz-item-actions > .d-flex label {
                display: flex;
                margin: 0;
            }

        .document-tab-wrapper .document-slick .dz-item-actions .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            min-width: 26px;
            margin: 0 !important;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, .92) !important;
            color: #ff3b30 !important;
            font-size: 16px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
        }

            .document-tab-wrapper .document-slick .dz-item-actions .btn:hover {
                background: #ff3b30 !important;
                color: #fff !important;
            }

/* every bootbox dialog, titled or not */
.bootbox .modal-dialog {
    max-width: 400px;
    margin: 1.75rem auto;
}

.bootbox .modal-content {
    border: 0;
    border-radius: 22px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .22);
}

.bootbox .modal-header {
    display: block;
    padding: 32px 28px 0 !important;
    border-bottom: 0;
    text-align: center;
}

    .bootbox .modal-header:empty {
        display: none;
    }

.bootbox .modal-body {
    padding: 32px 28px 0 !important;
    color: #1d1d1f;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
}

    .bootbox .modal-header:not(:empty) + .modal-body {
        padding-top: 10px !important;
        color: #6e6e73;
        font-size: 14px;
    }

    .bootbox .modal-body p {
        max-width: 320px;
        margin: 0 auto 10px;
    }

        .bootbox .modal-body p:last-child {
            margin-bottom: 0;
        }

    .bootbox .modal-body .bootbox-body {
        display: block;
    }

.bootbox .modal-footer {
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    padding: 24px 28px 26px !important;
    border-top: 0;
}

    .bootbox .modal-footer .btn {
        display: block;
        width: 100%;
        height: 46px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 999px;
        font-size: 15px;
        font-weight: 500;
        box-shadow: none;
    }

    .bootbox .modal-footer .btn-primary {
        background-color: #154fef;
        color: #fff;
    }

    .bootbox .modal-footer .btn-default,
    .bootbox .modal-footer .btn-secondary {
        height: 40px;
        background: transparent;
        color: #86868b;
        font-size: 14px;
    }

        .bootbox .modal-footer .btn-default:hover,
        .bootbox .modal-footer .btn-secondary:hover {
            background: transparent;
            color: #1d1d1f;
        }

/* product clone: settings as an edge-to-edge grouped list */
.form-horizontal .card-body:has(> .clone-replace) {
    padding-bottom: 0 !important;
}

    .form-horizontal .card-body:has(> .clone-replace) > .form-group {
        margin: 0 -18px !important;
    }

        .form-horizontal .card-body:has(> .clone-replace) > .form-group > label {
            position: relative;
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;
            min-height: 48px;
            margin: 0;
            padding: 0 18px;
            border: 0 !important;
            color: #1d1d1f;
            font-size: 14.5px;
            cursor: pointer;
            transition: background-color .15s ease;
        }

            .form-horizontal .card-body:has(> .clone-replace) > .form-group > label:hover {
                background-color: rgba(0, 0, 0, .035);
            }

            .form-horizontal .card-body:has(> .clone-replace) > .form-group > label > span {
                order: 1;
                flex: 1 1 auto;
                min-width: 0;
            }

            .form-horizontal .card-body:has(> .clone-replace) > .form-group > label > input[type="checkbox"] {
                order: 2;
                flex: 0 0 auto;
                margin: 0;
            }

        .form-horizontal .card-body:has(> .clone-replace) > .form-group + .form-group > label::before {
            content: "";
            position: absolute;
            top: 0;
            left: 18px;
            right: 0;
            height: 1px;
            background: #ececf0;
        }

.form-horizontal .card-body > .clone-replace {
    margin: 0 -18px !important;
    padding: 0 0 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(255, 59, 48, .05) !important;
}

    .form-horizontal .card-body > .clone-replace > label::before {
        background: #ffd8d5 !important;
    }

    .form-horizontal .card-body > .clone-replace > label:hover {
        background-color: rgba(255, 59, 48, .06) !important;
    }

    .form-horizontal .card-body > .clone-replace > label.is-on > span {
        color: #ff3b30;
        font-weight: 600;
    }

    .form-horizontal .card-body > .clone-replace > small {
        display: block;
        margin: 0;
        padding: 0 18px;
        color: #86868b;
        font-size: 12.5px;
        line-height: 1.45;
    }

/* edit tags: left sheet, grouped rows */
#bulkTags.full-modal .modal-dialog {
    width: 440px;
    max-width: 440px;
    height: 100%;
    margin: 0;
    border-radius: 0;
}

#bulkTags.full-modal .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0 22px 22px 0;
    background: #f5f5f7;
    box-shadow: 18px 0 50px rgba(0, 0, 0, .12);
}

#bulkTags.full-modal .modal-header {
    height: auto;
    padding: 24px 20px 14px !important;
    border-bottom: 0;
    background: transparent;
}

    #bulkTags .modal-title {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #1d1d1f;
        font-size: 20px;
        font-weight: 600;
        letter-spacing: -.2px;
    }

        #bulkTags .modal-title small {
            padding: 2px 9px;
            border-radius: 999px;
            background: #e8e8ed;
            color: #1d1d1f !important;
            font-size: 12px;
            font-weight: 600;
        }

    #bulkTags .btn-close {
        top: 24px;
        right: 20px;
        margin-top: 0 !important;
        transform: none !important;
    }

#bulkTags.full-modal .modal-body {
    height: auto;
    max-height: none;
    padding: 0 16px 8px !important;
    background: transparent;
}

#bulkTags .vs2-tag-group {
    margin-bottom: 10px;
    padding: 12px 14px;
    border: 0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

#bulkTags .vs2-tag-group-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    color: #6e6e73;
    font-size: 13px;
    font-weight: 500;
}

#bulkTags .bulk-tags-append {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    margin: 0 !important;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(118, 118, 128, .12);
    color: #1d1d1f;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}

#bulkTags .vs2-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 11px;
    border: 0;
    border-radius: 999px;
    background: rgba(21, 79, 239, .12);
    color: #154fef;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

    #bulkTags .vs2-add-btn:hover {
        background: rgba(21, 79, 239, .2);
    }

#bulkTags .vs2-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 9px 0 11px;
    border: 1px solid #e3e3e8;
    border-radius: 999px;
    background: #fff;
    color: #1d1d1f;
    font-size: 12.5px;
    cursor: pointer;
}

    #bulkTags .vs2-tag:hover {
        border-color: #154fef;
        color: #154fef;
    }

#bulkTags .vs2-tag-empty {
    color: #c7c7cc;
    font-size: 13px;
}

#bulkTags .vs2-picker {
    margin-top: 10px;
    border: 0;
    border-radius: 12px;
    background: #f5f5f7;
    overflow: hidden;
}

#bulkTags .vs2-picker-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
}

#bulkTags .vs2-picker-search {
    flex: 1 1 auto;
    height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    outline: 0;
}

#bulkTags .vs2-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(118, 118, 128, .14);
    color: #6e6e73;
    font-size: 15px;
}

#bulkTags .vs2-picker-list {
    max-height: 220px;
    padding: 0 6px 6px;
    overflow-y: auto;
}

#bulkTags .vs2-picker-item {
    padding: 9px 10px;
    border-radius: 9px;
    color: #1d1d1f;
    font-size: 13.5px;
    cursor: pointer;
}

    #bulkTags .vs2-picker-item:hover {
        background: rgba(118, 118, 128, .12);
    }

#bulkTags .vs2-picker-loading,
#bulkTags .vs2-picker-empty {
    padding: 10px;
    color: #86868b;
    font-size: 12.5px;
    text-align: center;
}

#bulkTags.full-modal .modal-footer {
    display: block;
    height: auto;
    padding: 12px 16px 18px !important;
    border-top: 0;
    background: transparent;
}

    #bulkTags .bulk-tags-hint {
        margin-bottom: 10px !important;
        padding: 10px 12px;
        border-radius: 12px;
        background: #fff;
        color: #6e6e73 !important;
        font-size: 12px;
        line-height: 1.5;
    }

        #bulkTags .bulk-tags-hint u {
            text-decoration: none;
            color: #1d1d1f;
            font-weight: 500;
        }

    #bulkTags .modal-footer .btn-primary {
        height: 46px;
        border: 0;
        border-radius: 999px;
        background-color: #154fef;
        font-size: 15px;
        font-weight: 500;
        box-shadow: none;
    }

/* quick share result */
#quickShareResult .modal-dialog {
    max-width: 480px;
}

#quickShareResult .modal-content {
    border: 0;
    border-radius: 22px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .22);
}

#quickShareResult .modal-header {
    padding: 24px 24px 4px !important;
    border-bottom: 0;
}

    #quickShareResult .modal-header h1 {
        color: #1d1d1f;
        font-size: 20px;
        font-weight: 600;
        letter-spacing: -.2px;
    }

#quickShareResult .modal-body {
    max-height: calc(100vh - 12rem);
    padding: 4px 24px 22px !important;
    overflow-y: auto;
}

    #quickShareResult .modal-body .lead {
        padding-right: 0 !important;
        margin-bottom: 16px;
        color: #6e6e73;
        font-size: 13.5px;
        font-weight: 400;
        line-height: 1.5;
    }

    #quickShareResult .form-group-bg {
        margin: 0 -24px !important;
        padding: 12px 24px !important;
        border: 0 !important;
        border-top: 1px solid #ececf0 !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

        #quickShareResult .form-group-bg b {
            display: block;
            margin-bottom: 2px;
            color: #1d1d1f;
            font-size: 13.5px;
            font-weight: 600;
        }

        #quickShareResult .form-group-bg a {
            color: #154fef;
            font-size: 12.5px;
            line-height: 1.4;
            word-break: break-all;
        }

    #quickShareResult .form-group.mt-3 h1 {
        margin-bottom: 2px !important;
        color: #1d1d1f;
        font-size: 15px;
        font-weight: 600;
    }

    #quickShareResult .form-group.mt-3 > p {
        margin-bottom: 10px;
        color: #86868b;
        font-size: 12.5px;
        line-height: 1.45;
    }

    #quickShareResult .modal-body > div > div > .btn,
    #quickShareResult .modal-body .btn {
        height: 44px;
        padding: 0 22px;
        border: 0 !important;
        border-radius: 999px !important;
        font-size: 14.5px;
        font-weight: 500;
        box-shadow: none !important;
    }

    #quickShareResult .modal-body .btn-primary {
        background-color: #154fef !important;
        color: #fff !important;
    }

    #quickShareResult .modal-body .btn-outline-secondary {
        background-color: rgba(118, 118, 128, .12) !important;
        color: #1d1d1f !important;
    }

    #quickShareResult .modal-body > div > .w-100 > div:last-child {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        margin-top: 18px;
    }

/* both sheets: the lists run edge to edge */
#productFilters.filters-sheet .filters-body {
    padding: 0 !important;
}

#productFilters.filters-sheet .filters-selected {
    padding: 10px 52px 12px 20px;
}

#productFilters.filters-sheet .accordion {
    border-radius: 0;
    border-top: 1px solid #ececf0;
    border-bottom: 1px solid #ececf0;
    box-shadow: none;
}

#productFilters.filters-sheet .accordion-button {
    padding: 0 20px;
    border-radius: 0;
}

#productFilters.filters-sheet .filters-item + .filters-item::before,
#productFilters.filters-sheet .avl-label + .avl-label::before {
    left: 20px;
}

#productFilters.filters-sheet .avl-search {
    margin: 0 20px 6px;
}

#productFilters.filters-sheet .avl-label {
    padding: 0 20px;
}

#bulkTags.full-modal .modal-body {
    padding: 0 0 8px !important;
}

#bulkTags .vs2-tags-body {
    border-top: 1px solid #ececf0;
}

#bulkTags .vs2-tag-group {
    margin: 0;
    padding: 12px 20px;
    border-radius: 0;
    border-bottom: 1px solid #ececf0;
    box-shadow: none;
}

    #bulkTags .vs2-tag-group:last-child {
        border-bottom: 0;
    }

#bulkTags .vs2-picker {
    margin: 10px -20px 0;
    border-radius: 0;
    border-top: 1px solid #ececf0;
}

    #bulkTags .vs2-picker-header {
        padding: 8px 20px;
    }

    #bulkTags .vs2-picker-list {
        padding: 0 14px 6px;
    }

#bulkTags.full-modal .modal-footer {
    padding: 12px 20px 18px !important;
}

#bulkTags .bulk-tags-hint {
    padding: 10px 14px;
}

#bulkTags .bulk-tags-append {
    height: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #6e6e73;
    font-size: 12.5px;
    font-weight: 400;
    margin-right: 10px !important;
}

    #bulkTags .bulk-tags-append:hover {
        background: transparent;
        color: #1d1d1f;
    }

/* "Other" shortcuts are secondary: smaller than the real menu entries */
#layout-menu .menu-link.view-menu-link {
    min-height: 32px;
    height: 32px;
    margin: 0;
    font-size: 13px;
    opacity: .85;
}

    #layout-menu .menu-link.view-menu-link .menu-icon {
        margin-right: 9px;
        font-size: 16px;
    }

    #layout-menu .menu-link.view-menu-link div {
        font-size: 13px;
        font-weight: 400;
    }
.table-container th {
    padding: 10px !important;
}
/* around 150% browser zoom the viewport lands here: narrower rail, smaller type */
@media (min-width: 1200px) and (max-width: 1440px) {
    .menu-vertical,
    .app-menu-trigger {
        width: 190px;
    }
.oneHead > tr > th, .main-head > tr > th {
    padding: 0 10px !important;
}
.table-container th {
    padding: 10px !important;
}
.list-toolbar-outside {
    padding: 10px !important;
    padding-bottom: 0 !important;
}
.table > thead > tr > th{
        padding: 10px;
}
    .product-bottom-action {
        padding-left: 190px;
    }

    .layout-menu-fixed-offcanvas:not(.layout-menu-collapsed) .layout-page,
    .layout-menu-fixed:not(.layout-menu-collapsed) .layout-page {
        padding-left: 190px;
    }

    .layout-menu-fixed-offcanvas.layout-navbar-fixed:not(.layout-menu-collapsed) .layout-content-navbar:not(.layout-without-menu) .layout-navbar,
    .layout-menu-fixed.layout-navbar-fixed:not(.layout-menu-collapsed) .layout-content-navbar:not(.layout-without-menu) .layout-navbar,
    .layout-navbar-fixed:not(.layout-menu-collapsed) .layout-content-navbar:not(.layout-without-menu) .layout-navbar {
        left: 190px;
    }

    .create-and-edit {
        width: calc(100% - 190px) !important;
        margin-left: 190px !important;
    }

    #layout-menu .menu-inner {
        padding: 6px 8px !important;
    }

    #layout-menu .menu-link {
        min-height: 30px;
        height: 30px;
        padding: 0 9px;
        font-size: 12.5px;
    }

        #layout-menu .menu-link .menu-icon {
            margin-right: 9px;
            font-size: 16px;
        }

    #layout-menu .menu-sub {
        padding-left: 24px;
    }

        #layout-menu .menu-sub::before {
            left: 16px;
        }

        #layout-menu .menu-sub .menu-link {
            min-height: 30px;
            height: 30px;
            font-size: 12px;
        }

    #layout-menu .menu-header {
        padding: 0px 10px 5px;
        font-size: 10px;
    }

    #layout-menu .menu-link.view-menu-link {
        height: 30px;
        min-height: 30px;
        padding: 0 9px;
        font-size: 12px;
    }

        #layout-menu .menu-link.view-menu-link div {
            height: auto;
            min-height: 0;
            line-height: 1.2;
            font-size: 12px;
        }

 

    #layout-menu .menu-uygulamalar .uygulama-rozeti img {
        max-width: 118px;
    }

    .menu-footer .nav-link,
    .menu-footer .btn.nav-link {
        min-height: 30px;
        height: 30px;
        font-size: 12.5px;
    }

        .menu-footer .nav-glyph {
            width: 16px;
            font-size: 16px;
        }

    .menu-footer .user-sheet {
        width: 200px;
    }
}

@media (min-width: 1200px) and (max-width: 1440px) {
    .layout-page .brand-link > div {
        height: 16px;
        margin-left: 7px;
        padding: 1px;
    }

    .layout-page .brand-wrapper {
        gap: 0;
    }

    .layout-page .brand-item .brand-link img,
    .layout-page .brand-link [afkl-lazy-image] {
        max-height: 16px;
    }

}

@media (min-width: 1200px) and (max-width: 1440px) {
    .layout-page .brand-link > div {
        height: 15px;
    }

    .layout-page .brand-link img {
        height: 12px !important;
        max-height: 15px !important;
        width: auto !important;
        max-width: none !important;
        object-fit: contain;
    }
    .layout-page .brand-link.stra img{
        height: 20px !important;
        max-height: 20px !important;
    }
    .layout-page .brand-link.brand-xs img{
        height: 9px !important;
        max-height: 9px !important;
    }
     .layout-page .brand-link.brand-lg img{
        height: 15px !important;
        max-height: 15px !important;
    }
    .layout-page .brand-link > div{
        font-size:16px!important;
    }
    .layout-page .product-filter-wrapper .btn.btn-outline-secondary, .layout-page .product-filter-wrapper .btn.btn-outline-white, .layout-page .product-filter-wrapper .btn.btn-outline-primary, .layout-page .product-filter-wrapper a.btn {
        padding: 0 10px;
        gap: 3px;
    }
    #layout-menu .menu-link .menu-icon,
    #layout-menu .menu-link.view-menu-link .menu-icon {
        width: 15px;
        margin-right: 8px;
        font-size: 15px;
    }

    .menu-footer .nav-glyph,
    .menu-footer .nav-link .bx {
        width: 15px;
        font-size: 15px !important;
    }

    .menu-footer .nav-caret {
        font-size: 14px;
    }
}

#layout-menu .menu-link.view-menu-link {
    display: flex;
    align-items: center;
    border-radius: 10px;
}

    #layout-menu .menu-link.view-menu-link div {
        height: auto;
        min-height: 0;
        line-height: 1.2;
    }

/* product clone settings: keep the rows inside the card */
.form-horizontal .card:has(.clone-replace) {
    padding-bottom: 0;
    overflow: hidden;
}

.form-horizontal .card-body:has(> .clone-replace) > .form-group > label,
.form-horizontal .card-body:has(> .clone-replace) > .clone-replace > label {
    padding: 0 18px !important;
}

.form-horizontal .card-body:has(> .clone-replace) > .clone-replace > small {
    padding: 0 18px !important;
}

.form-horizontal .card-body > .clone-replace {
    padding-bottom: 16px !important;
}

/* edit tags: wider sheet, no gaps between groups */
#bulkTags.full-modal .modal-dialog {
    width: 480px;
    max-width: 480px;
}

#bulkTags .vs2-tag-group {
    margin: 0 !important;
}

#bulkTags .vs2-picker {
    margin-top: 10px;
    margin-bottom: 0;
}

#bulkTags .vs2-tags-body > .vs2-tag-group:last-child {
    border-bottom: 1px solid #ececf0;
}

#bulkTags .bulk-tags-hint {
    font-size: 13px;
}

    #bulkTags .bulk-tags-hint small {
        font-size: 13px;
        line-height: 1.55;
    }

/* filters: heavier title, separators run edge to edge */
#productFilters.filters-sheet .modal-header h1 {
    font-weight: 700;
}

#productFilters.filters-sheet .filters-item + .filters-item::before,
#productFilters.filters-sheet .avl-label + .avl-label::before {
    left: 0;
}

/* the space between tag groups came from the flex gap, not margins */
#bulkTags .vs2-tags-body {
    gap: 0 !important;
    padding: 0 !important;
}

#bulkTags .vs2-tag-group {
    gap: 6px;
}

#productFilters.filters-sheet .modal-header h1 {
    font-weight: 700 !important;
}

#productFilters.filters-sheet .accordion-button {
    font-weight: bold !important;
}

    #productFilters.filters-sheet .accordion-button .color {
        font-weight: 400;
    }

/* picker keeps scrolling, just without a visible bar */
#bulkTags .vs2-picker-list {
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior: contain;
}

    #bulkTags .vs2-picker-list::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

/* clone settings: same look as the Options list on the user form */
.form-horizontal .card:has(.clone-replace) {
    padding-bottom: 18px;
    overflow: visible;
}

.form-horizontal .card-body:has(> .clone-replace) {
    padding-bottom: 0 !important;
    border-radius: 12px;
    background: #f5f5f7;
    overflow: hidden;
}

    .form-horizontal .card-body:has(> .clone-replace) > .form-group,
    .form-horizontal .card-body:has(> .clone-replace) > .clone-replace {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    .form-horizontal .card-body:has(> .clone-replace) > .form-group > label,
    .form-horizontal .card-body:has(> .clone-replace) > .clone-replace > label {
        min-height: 46px;
        padding: 0 14px !important;
        font-size: 14px;
    }

        .form-horizontal .card-body:has(> .clone-replace) > .form-group > label:hover,
        .form-horizontal .card-body:has(> .clone-replace) > .clone-replace > label:hover {
            background-color: rgba(0, 0, 0, .03);
        }

    .form-horizontal .card-body:has(> .clone-replace) > .form-group + .form-group > label::before,
    .form-horizontal .card-body:has(> .clone-replace) > .clone-replace > label::before {
        left: 14px !important;
        right: 14px !important;
        background: #e5e5ea !important;
    }

    .form-horizontal .card-body > .clone-replace {
        background: rgba(255, 59, 48, .06) !important;
        padding-bottom: 12px !important;
    }

        .form-horizontal .card-body:has(> .clone-replace) > .clone-replace > small {
            padding: 0 14px !important;
        }

/* chip close: match however deep the markup nests it */
.form-horizontal .ui-select-container .ui-select-match-item {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 26px !important;
    min-height: 26px !important;
    margin: 0 !important;
    padding: 0 26px 0 11px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background-color: rgb(163 163 163 / 10%) !important;
    color: #101a20 !important;
    font-size: 12.5px !important;
    font-weight: 500;
    line-height: 1 !important;
    box-shadow: none !important;
    margin-right: 5px !important;
    margin-bottom: 5px !important;
}

    .form-horizontal .ui-select-container .ui-select-match-item .ui-select-match-close,
    .form-horizontal .ui-select-container .ui-select-match-item .close,
    .form-horizontal .ui-select-container .ui-select-match-item > a.btn-link {
           position: absolute !important;
    top: 50% !important;
    right: 5px !important;
    left: auto !important;
    bottom: auto !important;
    /* display: inline-flex !important; */
    /* align-items: center !important; */
    /* justify-content: center !important; */
    float: none !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background-color: rgb(163 163 163 / 20%) !important;
    color: #154fef !important;
    font-size: 13px !important;
    line-height: 1 !important;
    text-shadow: none !important;
    text-decoration: none !important;
    opacity: 1 !important;
    transform: translateY(-50%) !important;
    text-align: center;
    line-height: 16px !important;
    padding-right: 2px !important;
    }

        .form-horizontal .ui-select-container .ui-select-match-item .ui-select-match-close:hover,
        .form-horizontal .ui-select-container .ui-select-match-item .close:hover {
            background-color: #154fef !important;
            color: #fff !important;
        }

/* dashboard */
collection-sharing-widget,
most-viewed-products,
favorite-products {
    display: flex;
    flex-wrap: wrap;
    padding: 0 22px;
}

collection-sharing-widget {
    padding-top: 22px;
    margin-bottom: 18px;
}

    collection-sharing-widget .card,
    most-viewed-products .card,
    favorite-products .card {
        margin-bottom: 18px;
        border: 0;
        border-radius: 16px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .04);
    }

    collection-sharing-widget .card-body {
        padding: 22px !important;
    }

    collection-sharing-widget .card-title {
        margin-bottom: 4px;
        color: #1d1d1f;
        font-size: 20px;
        font-weight: 600;
        letter-spacing: -.3px;
    }

    collection-sharing-widget p.mb-4 {
        margin-bottom: 20px !important;
        color: #6e6e73;
        font-size: 14px;
    }

    collection-sharing-widget .content-right div,
    collection-sharing-widget .content-right h4 {
        color: #1d1d1f !important;
    }

    collection-sharing-widget a.d-flex {
        flex: 1 1 220px;
        gap: 12px !important;
        margin: 0 !important;
        padding: 14px;
        border-radius: 14px;
        background: #f5f5f7;
        text-decoration: none;
        transition: background-color .15s ease, transform .15s ease;
    }

        collection-sharing-widget a.d-flex:hover {
            background: #eeeef1;
        }

    collection-sharing-widget .d-flex.justify-content-between.flex-wrap {
        gap: 12px !important;
        margin-right: 0 !important;
    }

    collection-sharing-widget span[class^="bg-label-"],
    collection-sharing-widget span[class*=" bg-label-"] {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        padding: 0 !important;
        border-radius: 12px !important;
    }

        collection-sharing-widget span[class^="bg-label-"] i,
        collection-sharing-widget span[class*=" bg-label-"] i {
            font-size: 20px;
        }

    collection-sharing-widget .content-right > div:first-child {
        color: #86868b !important;
        font-size: 12px;
    }

    collection-sharing-widget .content-right h4 {
        margin-top: 2px;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: -.2px;
    }

    collection-sharing-widget .avatar {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: rgba(21, 79, 239, .1);
        color: #154fef;
    }

        collection-sharing-widget .avatar span {
            font-size: 20px;
        }

    collection-sharing-widget .card-title.d-flex {
        margin-bottom: 14px;
    }

    collection-sharing-widget .fw-medium.d-block {
        color: #86868b;
        font-size: 12px;
        font-weight: 400 !important;
    }

    collection-sharing-widget h3.card-title {
        margin: 2px 0 6px !important;
        color: #1d1d1f;
        font-size: 19px;
        font-weight: 600;
        letter-spacing: -.3px;
    }

    collection-sharing-widget .text-success {
        color: #1d1d1f !important;
        font-size: 12.5px;
        font-weight: 400 !important;
    }

    collection-sharing-widget .dropdown .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: #86868b;
        font-size: 18px;
    }

        collection-sharing-widget .dropdown .btn:hover {
            background: rgba(118, 118, 128, .12);
            color: #1d1d1f;
        }

/* most viewed products */
most-viewed-products .card-header,
favorite-products .card-header {
    padding: 18px 20px 0 !important;
    border-bottom: 0;
    background: transparent;
}

    most-viewed-products .card-title,
    favorite-products .card-title {
        margin: 0;
        color: #1d1d1f;
        font-size: 17px !important;
        font-weight: 600;
        letter-spacing: -.2px;
    }

    most-viewed-products .card-header .btn-group,
    favorite-products .card-header .btn-group {
        gap: 0;
        padding: 3px;
        border-radius: 999px;
        background-color: rgba(118, 118, 128, .12);
        box-shadow: none;
    }

        most-viewed-products .card-header .btn-group > .btn,
        favorite-products .card-header .btn-group > .btn {
            height: 30px;
            padding: 0 13px;
            border: 0 !important;
            border-radius: 999px !important;
            background: transparent !important;
            color: #1d1d1f !important;
            font-size: 12.5px;
            font-weight: 500;
            box-shadow: none !important;
        }

            most-viewed-products .card-header .btn-group > .btn.active,
            favorite-products .card-header .btn-group > .btn.active {
                background: #fff !important;
                font-weight: 600;
                box-shadow: 0 1px 3px rgba(0, 0, 0, .14) !important;
            }

most-viewed-products .card-body,
favorite-products .card-body {
    padding: 14px 0 6px !important;
}

    most-viewed-products .table,
    favorite-products .table,
    most-viewed-products .table > tbody > tr > td,
    favorite-products .table > tbody > tr > td {
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    most-viewed-products .product-item,
    favorite-products .product-item {
        width: 100%;
    }

        most-viewed-products .product-item > tbody > tr > td,
        favorite-products .product-item > tbody > tr > td {
            padding: 10px 20px;
            border-top: 1px solid #f0f0f3;
        }

        most-viewed-products .product-item:first-child > tbody > tr > td,
        favorite-products .product-item:first-child > tbody > tr > td {
            border-top: 0;
        }

    most-viewed-products .jCgXN,
    favorite-products .jCgXN {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    most-viewed-products .productLink img,
    favorite-products .productLink img {
        width: 52px;
        height: 52px;
        border-radius: 12px;
        object-fit: cover;
        background: #f5f5f7;
    }

    most-viewed-products .product-title,
    favorite-products .product-title {
        color: #1d1d1f;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
    }

        most-viewed-products .product-title:hover,
        favorite-products .product-title:hover {
            color: #154fef;
        }

    most-viewed-products .text-end span,
    favorite-products .text-end span {
        color: #86868b;
        font-size: 12.5px;
    }

        most-viewed-products .text-end b.text-primary,
        favorite-products .text-end b.text-primary {
            color: #1d1d1f !important;
            font-weight: 600;
        }

    most-viewed-products .btn-outline-secondary,
    favorite-products .btn-outline-secondary {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 32px;
        padding: 0 14px;
        border: 0 !important;
        border-radius: 999px !important;
        background-color: rgba(118, 118, 128, .12) !important;
        color: #1d1d1f !important;
        font-size: 12.5px;
        font-weight: 500;
        box-shadow: none !important;
    }

        most-viewed-products .btn-outline-secondary:hover,
        favorite-products .btn-outline-secondary:hover {
            background-color: rgba(118, 118, 128, .2) !important;
        }

/* dashboard: trainings list */
most-viewed-products .card-header .card-title h5,
favorite-products .card-header .card-title h5 {
    margin: 0;
    color: #1d1d1f;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.2px;
}

most-viewed-products .table-responsive,
favorite-products .table-responsive {
    overflow: visible;
}

most-viewed-products .education-tbody td,
favorite-products .education-tbody td {
    padding: 0;
    border: 0;
}

most-viewed-products .table.border-top,
favorite-products .table.border-top {
    margin: 0;
    border-top: 0 !important;
}

most-viewed-products .education-tbody tr + tr td > a::before,
favorite-products .education-tbody tr + tr td > a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #f0f0f3;
}

most-viewed-products .education-tbody td > a,
favorite-products .education-tbody td > a {
    position: relative;
    gap: 0;
    padding: 12px 20px;
    border-radius: 0;
    text-decoration: none;
    transition: background-color .15s ease;
}

    most-viewed-products .education-tbody td > a:hover,
    favorite-products .education-tbody td > a:hover {
        background: rgba(118, 118, 128, .07);
    }

    most-viewed-products .education-tbody .avatar,
    favorite-products .education-tbody .avatar {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        border-radius: 11px;
        background: rgba(21, 79, 239, .1);
        color: #154fef;
    }

        most-viewed-products .education-tbody .avatar span,
        favorite-products .education-tbody .avatar span {
            font-size: 19px;
        }

    most-viewed-products .education-tbody h6,
    favorite-products .education-tbody h6 {
        margin-bottom: 1px !important;
        color: #1d1d1f;
        font-size: 13.5px;
        font-weight: 500;
    }

    most-viewed-products .education-tbody small,
    favorite-products .education-tbody small {
        color: #86868b !important;
        font-size: 12px;
        line-height: 1.35;
        white-space: normal;
    }

most-viewed-products .card-header.d-flex,
favorite-products .card-header.d-flex {
    padding-bottom: 12px !important;
}

most-viewed-products .education-tbody td > a h6,
favorite-products .education-tbody td > a h6,
most-viewed-products .education-tbody td > a .h6,
favorite-products .education-tbody td > a .h6 {
    margin-bottom: 1px !important;
    color: #1d1d1f !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
}

most-viewed-products .education-tbody td > a small,
favorite-products .education-tbody td > a small,
most-viewed-products .education-tbody td > a .text-muted,
favorite-products .education-tbody td > a .text-muted {
    color: #86868b !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
}

/* a selected day must light up in its own month only */
.daterangepicker td.off,
.daterangepicker td.off.active,
.daterangepicker td.off.active:hover,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date,
.daterangepicker td.off.today {
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    border-radius: 9px !important;
    color: #c7c7cc !important;
    font-weight: 400 !important;
}

    .daterangepicker td.off.available:hover {
        background-color: rgba(118, 118, 128, .08) !important;
        color: #86868b !important;
    }

.daterangepicker td.weekend {
    background-color: transparent;
}

.daterangepicker td.today:not(.active) {
    color: #154fef;
    font-weight: 600;
}
.product-grid {
    padding: 5px 10px !important;

}
@media (min-width: 1800px) {
    .product-item .productLink {
        height: 406px;
    }
}

@media (min-width: 1600px) and (max-width: 1799.98px) {
    .product-item .productLink {
        height: 360px;
    }
}

@media (min-width: 1441px) and (max-width: 1599.98px) {
    .product-item .productLink {
        height: 310px;
    }
}

/* product cards: the image has to be clipped by the card radius, otherwise
   the selection ring is rounded while the photo corners stay square */
.layout-page .product-grid:not(.horizontal) > .product-item tbody {
    border-radius: 14px;
}
.layout-page .product-grid:not(.horizontal) > .product-item tbody:hover{
    border-radius: 14px 14px 0 0;
}
.product-item tbody:hover .tb-attributes-values{
    margin-top: 0;
}
.layout-page .product-grid:not(.horizontal) > .product-item .productLink {
    border-radius: 14px;
    overflow: hidden;
}
.product-grid:not(.horizontal) > .product-item:hover .productLink{
      border-radius: 14px 14px 0 0;
}
.layout-page .product-grid > .product-item.is-selected tbody {
    border-radius: 14px;

}

/* three per row around 150% zoom */
@media (min-width: 1200px) and (max-width: 1440px) {
       .layout-page .product-grid:not(.horizontal):not(.grid-3) > .product-item {
        width: 25%;
        padding: 0 3px;
    }
    .product-item .productLink {
        height: 255px;
    }
    .product-item a {
        font-size: 12px !important;
    }
    .tb-attributes-values > div > span {
        font-size: 11px;
    }
    .product-item-like button {
        width: 23px;
        height: 23px;
    }
    .product-item-like button span {
        font-size: 13px !important;
    }
    .bzincir img,.target-image img {
        height: 11px;
    }

}

/* the count reads as a subtitle under the page title instead of competing
   with it for room on the same line */
.layout-page .heading-panel .product-head-left:not(.ng-hide) {
    display: grid !important;
    grid-template-columns: max-content max-content;
    justify-content: start;
    align-items: center;
    column-gap: 14px;
    row-gap: 0;
}

    .layout-page .heading-panel .product-head-left > .btn-group,
    .layout-page .heading-panel .product-head-left > div:first-child:not(.total) {
        grid-column: 1;
        grid-row: 1;
    }

    .layout-page .heading-panel .product-head-left > .total {
        grid-column: 1;
        grid-row: 2;
        margin-top: -1px;
        padding-left: 0px;
        color: #86868b;
        font-size: 12.5px;
        line-height: 1.2;
    }

    .layout-page .heading-panel .product-head-left > .top-button-list {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

/* selected filter chips under the search bar */
.layout-page .filtre-button-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

    .layout-page .filtre-button-list .val-it-wrapper {
        display: contents;
    }

    .layout-page .filtre-button-list .val-it-wrapper > span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        height: 28px;
        margin: 0;
        padding: 0 11px 0 9px;
        border: 1px solid #e3e3e8;
        border-radius: 999px;
        background-color: #fff;
        color: #1d1d1f;
        font-size: 12px;
        white-space: nowrap;
    }

    .layout-page .filtre-button-list .fbl-remove {
        position: static;
        left: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        padding: 0 !important;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: #86868b !important;
        font-size: 14px;
    }

        .layout-page .filtre-button-list .fbl-remove:hover {
            background: rgba(255, 59, 48, .12);
            color: #ff3b30 !important;
        }

    /* clear selections is a link, not a chip */
    .layout-page .filtre-button-list > .btn.btn-outline-primary {
        height: 28px;
        margin: 0;
        padding: 0 2px;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #154fef !important;
        font-size: 12px;
        font-weight: 400;
        line-height: 28px;
        text-decoration: underline;
        box-shadow: none !important;
    }

        .layout-page .filtre-button-list > .btn.btn-outline-primary:hover {
            background: transparent !important;
            color: #0a3bbf !important;
        }

@media (min-width: 1200px) and (max-width: 1440px) {
    .layout-page .filtre-button-list {
        gap: 5px;
    }

        .layout-page .filtre-button-list .val-it-wrapper > span {
            height: 24px;
            padding: 0 9px 0 7px;
            font-size: 11.5px;
        }

        .layout-page .filtre-button-list .fbl-remove {
            width: 14px;
            height: 14px;
            font-size: 13px;
        }

        .layout-page .filtre-button-list > .btn.btn-outline-primary {
            height: 24px;
            font-size: 11.5px;
            line-height: 24px;
        }

    .layout-page .heading-panel .product-head-left .top-button-list button {
        height: 26px;
        padding: 0 10px;
        font-size: 11.5px;
    }

        .layout-page .heading-panel .product-head-left .top-button-list button:has(img) {
            width: 26px;
            padding: 0;
        }

            .layout-page .heading-panel .product-head-left .top-button-list button img {
                width: 15px;
                height: 15px;
            }
}

/* visual search: the query bar scrolls away, the title/brand row is what sticks */
.layout-page .table-special > table > thead.sticky-head:has(.product-filter-item:not(.ng-hide) .vs-active-bar) {
    position: relative !important;
    top: auto !important;
    z-index: 1010 !important;
}

.layout-page .table-special > table > thead.sticky-head:has(.product-filter-item:not(.ng-hide) .vs-active-bar) + thead.main-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 1002 !important;
    background-color: #fff !important;
}

    .layout-page .table-special > table > thead.sticky-head:has(.product-filter-item:not(.ng-hide) .vs-active-bar) + thead.main-head > tr > th {
        background-color: #fff;
    }

/* the brand strip has to sit above the rows it shares the header with */
.layout-page .heading-panel .brand-slot {
    position: relative;
    z-index: 3;
}

/* visual search modal */
.vs2-dialog {
    max-width: 560px;
}

.vs2-content {
    border: 0;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .22);
}

.vs2-close-row {
    padding: 14px 16px 0;
}

.vs2-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #e8e8ed;
    color: #1d1d1f;
    font-size: 16px;
}

    .vs2-x:hover {
        background-color: #dcdce2;
    }

.vs2-upload-state .vs2-drop {
    margin: 6px 22px 26px;
    padding: 40px 20px;
    border: 2px dashed #dcdce2;
    border-radius: 16px;
    background: #fafafa;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

    .vs2-upload-state .vs2-drop:hover,
    .vs2-upload-state .vs2-drop.vs2-dragover {
        border-color: #154fef;
        background: rgba(21, 79, 239, .04);
    }

.vs2-drop-icon i {
    margin-bottom: 10px;
    color: #c7c7cc;
    font-size: 40px;
}

.vs2-drop-title {
    color: #1d1d1f;
    font-size: 15px;
    font-weight: 500;
}

.vs2-link {
    color: #154fef;
}

.vs2-drop-hint {
    margin: 2px 0 0;
    color: #86868b;
    font-size: 12.5px;
    letter-spacing: .02em;
}

.vs2-img-wrap {
    border-radius: 0;
    background: #f5f5f7;
}

.vs2-action-bar {
    gap: 10px;
    padding: 10px 18px;
    border-top: 1px solid #ececf0;
    border-bottom: 0;
}

.vs2-crop-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #86868b;
    font-size: 12.5px;
}

.vs2-crop-btns {
    display: flex;
    gap: 8px;
}

.vs2-img-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 13px;
    border: 0;
    border-radius: 999px;
    background-color: rgba(118, 118, 128, .12);
    color: #1d1d1f;
    font-size: 12.5px;
    font-weight: 500;
}

    .vs2-img-btn:hover {
        background-color: rgba(118, 118, 128, .2);
    }

    .vs2-img-btn.vs2-img-btn-del {
        color: #ff3b30;
    }

        .vs2-img-btn.vs2-img-btn-del:hover {
            background-color: rgba(255, 59, 48, .12);
        }

    .vs2-img-btn.vs2-img-btn-confirm {
        background-color: #154fef;
        color: #fff;
    }

        .vs2-img-btn.vs2-img-btn-confirm:hover {
            background-color: #2d63f5;
        }

.vs2-footer {
    padding: 14px 18px 18px;
    border-top: 0;
    background: #fff;
}

.vs2-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: 999px;
    background-color: #154fef;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
}

    .vs2-search-btn:hover {
        background-color: #2d63f5;
    }

.vs2-loading-state {
    padding: 46px 22px;
    text-align: center;
}

    .vs2-loading-state p {
        margin: 14px 0 0;
        color: #6e6e73;
        font-size: 13.5px;
    }

.vs2-dots span {
    background-color: #154fef;
}

/* tag edit state */
.vs2-tag-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #ececf0;
}

.vs2-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(118, 118, 128, .12);
    color: #1d1d1f;
    font-size: 17px;
}

    .vs2-back-btn:hover {
        background-color: rgba(118, 118, 128, .2);
    }

.vs2-tag-thumb {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: #f5f5f7;
    overflow: hidden;
}

    .vs2-tag-thumb canvas {
        width: 52px;
        height: 52px;
        object-fit: cover;
    }

.vs2-tag-title {
    color: #1d1d1f;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.1px;
    line-height: 1.3;
}

    .vs2-tag-title small {
        display: block;
        margin-top: 2px;
        color: #86868b;
        font-size: 12.5px;
        line-height: 1.4;
    }

.vs2-content .vs2-tags-body {
    gap: 0;
    padding: 0;
    max-height: 340px;
}

.vs2-content .vs2-tag-group {
    gap: 6px;
    padding: 12px 20px;
    border-bottom: 1px solid #ececf0;
    background: #fff;
}

    .vs2-content .vs2-tag-group:last-child {
        border-bottom: 0;
    }

.vs2-content .vs2-tag-group-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #6e6e73;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.vs2-content .vs2-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 11px;
    border: 0;
    border-radius: 999px;
    background: rgba(21, 79, 239, .12);
    color: #154fef;
    font-size: 12px;
    font-weight: 500;
}

    .vs2-content .vs2-add-btn:hover {
        background: rgba(21, 79, 239, .2);
    }

.vs2-content .vs2-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vs2-content .vs2-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 9px 0 11px;
    border: 1px solid #e3e3e8;
    border-radius: 999px;
    background: #fff;
    color: #1d1d1f;
    font-size: 12.5px;
    cursor: pointer;
}

    .vs2-content .vs2-tag:hover {
        border-color: #154fef;
        color: #154fef;
    }

.vs2-content .vs2-tag-empty {
    color: #c7c7cc;
    font-size: 13px;
}

.vs2-content .vs2-picker {
    margin-top: 10px;
    border: 0;
    border-radius: 12px;
    background: #f5f5f7;
    overflow: hidden;
}

.vs2-content .vs2-picker-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
}

.vs2-content .vs2-picker-search {
    flex: 1 1 auto;
    height: 34px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    outline: 0;
}

.vs2-content .vs2-picker-list {
    max-height: 200px;
    padding: 0 6px 6px;
    overflow-y: auto;
    scrollbar-width: none;
    overscroll-behavior: contain;
}

    .vs2-content .vs2-picker-list::-webkit-scrollbar {
        width: 0;
    }

.vs2-content .vs2-picker-item {
    padding: 9px 10px;
    border-radius: 9px;
    color: #1d1d1f;
    font-size: 13.5px;
    cursor: pointer;
}

    .vs2-content .vs2-picker-item:hover {
        background: rgba(118, 118, 128, .12);
    }

/* visual search: the waiting state shows what is actually happening */
.vs2-loading-state {
    padding: 34px 26px 30px;
    text-align: center;
}

.vs2-scan {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-bottom: 22px;
}

.vs2-scan-frame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    border-radius: 18px;
    background: linear-gradient(160deg, #f2f4f9 0%, #e8ecf6 100%);
    overflow: hidden;
}

    .vs2-scan-frame > .bx {
        color: #b9c0cf;
        font-size: 40px;
    }

.vs2-scan-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 34px;
    background: linear-gradient(180deg, rgba(21, 79, 239, 0) 0%, rgba(21, 79, 239, .18) 45%, rgba(21, 79, 239, .45) 50%, rgba(21, 79, 239, .18) 55%, rgba(21, 79, 239, 0) 100%);
    animation: vs2Scan 1.7s ease-in-out infinite;
}

@keyframes vs2Scan {
    0% {
        transform: translateY(-40px);
    }

    50% {
        transform: translateY(112px);
    }

    100% {
        transform: translateY(-40px);
    }
}

.vs2-scan-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid #154fef;
    opacity: .7;
}

    .vs2-scan-corner.tl {
        top: 10px;
        left: 10px;
        border-right: 0;
        border-bottom: 0;
        border-radius: 5px 0 0 0;
    }

    .vs2-scan-corner.tr {
        top: 10px;
        right: 10px;
        border-left: 0;
        border-bottom: 0;
        border-radius: 0 5px 0 0;
    }

    .vs2-scan-corner.bl {
        bottom: 10px;
        left: 10px;
        border-right: 0;
        border-top: 0;
        border-radius: 0 0 0 5px;
    }

    .vs2-scan-corner.br {
        bottom: 10px;
        right: 10px;
        border-left: 0;
        border-top: 0;
        border-radius: 0 0 5px 0;
    }

.vs2-scan-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .vs2-scan-cards span {
        display: block;
        width: 132px;
        height: 30px;
        border-radius: 10px;
        background: linear-gradient(90deg, #f1f2f5 0%, #e7e9ee 40%, #f1f2f5 80%);
        background-size: 220% 100%;
        animation: vs2Shimmer 1.4s linear infinite;
    }

        .vs2-scan-cards span:nth-child(2) {
            width: 110px;
            animation-delay: .18s;
        }

        .vs2-scan-cards span:nth-child(3) {
            width: 124px;
            animation-delay: .36s;
        }

@keyframes vs2Shimmer {
    0% {
        background-position: 120% 0;
    }

    100% {
        background-position: -120% 0;
    }
}

.vs2-loading-title {
    margin: 0 0 4px;
    color: #1d1d1f;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.2px;
}

.vs2-loading-hint {
    max-width: 330px;
    margin: 0 auto 16px;
    color: #86868b;
    font-size: 12.5px;
    line-height: 1.5;
}

.vs2-loading-state .vs2-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
}

    .vs2-loading-state .vs2-dots span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: #154fef;
        opacity: .35;
        animation: vs2Pulse 1.1s ease-in-out infinite;
    }

        .vs2-loading-state .vs2-dots span:nth-child(2) {
            animation-delay: .18s;
        }

        .vs2-loading-state .vs2-dots span:nth-child(3) {
            animation-delay: .36s;
        }

@keyframes vs2Pulse {
    0%, 100% {
        opacity: .25;
        transform: scale(.85);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

/* in visual search the filter row scrolls away but must still paint above the
   sticky title row, otherwise its brand dropdown opens behind it */
.layout-page .table-special > table > thead.sticky-head:has(.product-filter-item:not(.ng-hide) .vs-active-bar) .dropdown-menu,
.layout-page .table-special > table > thead.sticky-head:has(.product-filter-item:not(.ng-hide) .vs-active-bar) .ui-select-dropdown {
    z-index: 1100;
}

.layout-page .table-special > table > thead.sticky-head:has(.product-filter-item:not(.ng-hide) .vs-active-bar) + thead.main-head {
    z-index: 1001 !important;
}

/* an !important display must never win over Angular's ng-hide */
.layout-page .ng-hide,
.layout-page .heading-panel .product-head-left.ng-hide,
.vs2-content .ng-hide {
    display: none !important;
}

/* loading state: one centred column */
.vs2-loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 36px 26px 32px;
}

.vs2-scan {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.vs2-scan-cards {
    flex-direction: row;
    gap: 8px;
}

    .vs2-scan-cards span,
    .vs2-scan-cards span:nth-child(2),
    .vs2-scan-cards span:nth-child(3) {
        width: 58px;
        height: 44px;
        border-radius: 10px;
    }

.vs2-loading-title,
.vs2-loading-hint {
    text-align: center;
}

.vs2-loading-hint {
    max-width: 300px;
}

/* dashboard trend reports: the name has to stay readable in a narrow column,
   and a truncated flex child is what pushed the page into horizontal scroll */
product-pdf-directive .table {
    width: 100%;
    table-layout: fixed;
}

product-pdf-directive .pdf-image {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f5f5f7;
}

    product-pdf-directive .pdf-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

product-pdf-directive .education-tbody td > a {
    gap: 0;
}

    product-pdf-directive .education-tbody td > a > .d-flex.flex-column {
        min-width: 0;
        flex: 1 1 auto;
    }

product-pdf-directive .education-tbody h6 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 100%;
    overflow: hidden;
    white-space: normal;
    text-overflow: clip;
    line-height: 1.3;
}

product-pdf-directive .education-tbody small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: normal;
    text-overflow: clip;
}

product-pdf-directive .education-tbody tr + tr td > a::before {
    left: 0;
}
@media (min-width: 1200px) and (max-width: 1540px) {
      collection-sharing-widget h3.card-title {
        font-size: 16px !important;
    }
}
/* at 150% the hero and the report column are both too tight, so the left
   side gives up some width instead of squeezing the text */
@media (min-width: 1200px) and (max-width: 1440px) {
    collection-sharing-widget > .col-lg-8,
    most-viewed-products > .col-lg-8,
    favorite-products > .col-lg-8 {
        flex: 0 0 58%;
        width: 58%;
        max-width: 58%;
    }

    collection-sharing-widget > .col-lg-4,
    most-viewed-products > .col-lg-4,
    favorite-products > .col-lg-4 {
        flex: 0 0 42%;
        width: 42%;
        max-width: 42%;
    }

    collection-sharing-widget .card-body {
        padding: 16px !important;
    }

    collection-sharing-widget .card-title {
        font-size: 18px;
    }

    collection-sharing-widget h3.card-title {
        font-size: 16px !important;
    }

    collection-sharing-widget .fw-medium.d-block,
    collection-sharing-widget .text-success {
        font-size: 11.5px;
    }

    collection-sharing-widget .content-right h4 {
        font-size: 13px;
    }

    collection-sharing-widget .avatar,
    collection-sharing-widget span[class^="bg-label-"],
    collection-sharing-widget span[class*=" bg-label-"] {
        width: 34px;
        height: 34px;
        border-radius: 11px !important;
    }

        collection-sharing-widget .avatar span,
        collection-sharing-widget span[class^="bg-label-"] i,
        collection-sharing-widget span[class*=" bg-label-"] i {
            font-size: 17px;
        }

    product-pdf-directive .education-tbody td > a {
        padding: 10px 14px;
    }

    product-pdf-directive .pdf-image {
        width: 40px;
        height: 40px;
    }

    product-pdf-directive .education-tbody h6 {
        font-size: 12.5px !important;
    }

    product-pdf-directive .education-tbody small {
        font-size: 11px !important;
    }
}

/* dashboard: the trailing column margin is what pushed the page into scroll */
collection-sharing-widget > [class*="col-"],
most-viewed-products > [class*="col-"],
favorite-products > [class*="col-"] {
    margin-bottom: 0 !important;
}

most-viewed-products,
favorite-products {
    padding-bottom: 18px;
}

    most-viewed-products .card,
    favorite-products .card,
    collection-sharing-widget .card {
        margin-bottom: 18px;
    }


/* collection access links: the url is long, the copy button must not move */
.form-horizontal .access-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.access-row-text {
    min-width: 0;
    flex: 1 1 auto;
}

    .access-row-text a {
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #154fef;
        font-size: 13px;
    }

.access-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: rgba(118, 118, 128, .12);
    color: #1d1d1f;
    font-size: 17px;
}

    .access-copy:hover {
        background-color: rgba(118, 118, 128, .2);
    }

    .access-copy .bx-check {
        color: #248a3d;
    }

/* the notification link choice sits inside the options card */
.share-options .share-notify {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.share-notify-label {
    margin-bottom: 2px;
    color: #86868b;
    font-size: 12.5px;
}

.share-radio {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 8px 10px;
    border: 1px solid #e3e3e8;
    border-radius: 10px;
    background: #fff;
    color: #1d1d1f;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
}

    .share-radio.is-active {
        border-color: #154fef;
        background: rgba(21, 79, 239, .05);
    }

    .share-radio input[type="radio"] {
        position: absolute !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        opacity: 0 !important;
        pointer-events: none;
    }

.share-radio-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    border: 1.5px solid #c7c7cc;
    border-radius: 50%;
    background: #fff;
}

    .share-radio.is-active .share-radio-dot {
        border-color: #154fef;
    }

        .share-radio.is-active .share-radio-dot::after {
            content: "";
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: #154fef;
        }

/* collection products: the drag handle was absolutely placed for the card grid,
   in this horizontal list it landed on top of the remove button */
.product-grid.horizontal.product-grid-order-by > .product-item .productMove {
    position: static;
    left: auto;
    top: auto;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin-right: 8px;
    box-shadow: none;
}

.product-grid-order-by > .product-item:last-child tbody {
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}

.collection-products-header .cph-item .btn.btn-outline-primary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 15px;
    border: 0;
    border-radius: 999px;
    background-color: rgba(21, 79, 239, .1);
    color: #154fef;
    font-size: 13px;
    font-weight: 500;
    box-shadow: none;
}

    .collection-products-header .cph-item .btn.btn-outline-primary:hover,
    .collection-products-header .cph-item .btn.btn-outline-primary:focus {
        background-color: rgba(21, 79, 239, .18);
        color: #154fef;
        box-shadow: none;
    }

    .collection-products-header .cph-item .btn.btn-outline-primary .bx {
        font-size: 17px;
    }

/* liked product detail */
.like-hero .card-body {
    display: flex;
    align-items: center;
    gap: 20px;
}

.like-hero-media {
    flex: 0 0 auto;
    width: 150px;
    height: 190px;
    border-radius: 14px;
    background: #f5f5f7;
    overflow: hidden;
}

    .like-hero-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.like-hero-text {
    min-width: 0;
    flex: 1 1 auto;
}

.like-hero-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #86868b;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.like-hero-text h2 {
    margin: 0 0 10px;
    color: #1d1d1f;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.3px;
    line-height: 1.25;
}

.like-hero-stats {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.like-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 59, 48, .1);
    color: #d70015;
    font-size: 12.5px;
    font-weight: 500;
}

.like-hero-open {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 34px;
    padding: 0 15px;
    border-radius: 999px;
    background-color: rgba(21, 79, 239, .1);
    color: #154fef;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

    .like-hero-open:hover {
        background-color: rgba(21, 79, 239, .18);
        color: #154fef;
        text-decoration: none;
    }

.form-horizontal .like-users .list-group-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.like-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(21, 79, 239, .1);
    color: #154fef;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

.like-user-text {
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.3;
}

    .like-user-text b {
        display: block;
        color: #1d1d1f;
        font-size: 14px;
        font-weight: 500;
    }

    .like-user-text small {
        color: #86868b;
        font-size: 12px;
    }

.like-user-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    background-color: rgba(118, 118, 128, .12);
    color: #1d1d1f;
    font-size: 12.5px;
    text-decoration: none;
}

    .like-user-link:hover {
        background-color: rgba(118, 118, 128, .2);
        color: #1d1d1f;
        text-decoration: none;
    }

.form-horizontal .like-users .like-users-empty {
    color: #86868b;
    font-size: 13px;
}

/* product variants strip */
#productLinkData .product-link-wrapper {
    padding: 8px;
    border: 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 26px rgba(0, 0, 0, .1);
    scrollbar-width: none;
}

    #productLinkData .product-link-wrapper::-webkit-scrollbar {
        width: 0;
    }

#productLinkData .product-link-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#productLinkData .product-link-item {
    width: 56px;
    height: 56px;
    margin: 0;
    border: 0;
    border-radius: 12px;
    background: #f5f5f7;
    overflow: hidden;
    transition: box-shadow .15s ease, transform .15s ease;
}

    #productLinkData .product-link-item:hover {
        transform: scale(1.04);
        box-shadow: 0 0 0 2px rgba(118, 118, 128, .25);
    }

    #productLinkData .product-link-item.active {
        box-shadow: 0 0 0 2px #154fef;
    }

    #productLinkData .product-link-item [afkl-lazy-image],
    #productLinkData .product-link-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

/* version / colour switcher next to the canvas */
.layout-page .canvasButtonGroup .dropdown-menu {
    padding: 6px;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 12px 32px rgba(0, 0, 0, .14);
}

    .layout-page .canvasButtonGroup .dropdown-menu .dropdown-item {
        border-radius: 9px;
        padding: 7px 10px;
        font-size: 13px;
    }

        .layout-page .canvasButtonGroup .dropdown-menu .dropdown-item:hover {
            background-color: rgba(118, 118, 128, .12);
        }

        .canvas-button{
            border:0px;
        }


    .layout-page .canvas-button.enabledEditorActive .btn:hover {
        background-color: rgba(118, 118, 128, .2) !important;
    }

.modal-header .modal-subtitle {
    max-width: 380px;
    margin: 3px 0 0;
    color: #86868b;
    font-size: 12.5px;
    line-height: 1.5;
}

/* delete confirmation: text reads left to right, the option uses the shared list */
.delete-product-body p {
    margin: 0 0 14px;
    color: #6e6e73;
    font-size: 13.5px;
    line-height: 1.5;
}

.delete-product-body .list-group {
    border: 0;
    border-radius: 12px;
    background: #f5f5f7;
}

    .delete-product-body .list-group-item {
        padding: 12px 14px;
        border: 0;
        background: transparent;
        font-size: 14px;
    }

        .delete-product-body .list-group-item b {
            font-weight: 500;
        }

        .delete-product-body .list-group-item input[type="checkbox"] {
            width: 18px;
            height: 18px;
            margin: 0;
            accent-color: #154fef;
        }

/* customize tag: same grouped list as the share options, just taller */
.form-horizontal .overflow-customize-tag {
    max-height: 320px;
    padding: 0;
    border-radius: 12px;
    background: #f5f5f7;
    overflow-y: auto;
    scrollbar-width: none;
}

    .form-horizontal .overflow-customize-tag::-webkit-scrollbar {
        width: 0;
    }

    .form-horizontal .overflow-customize-tag > .w-100 > div {
        position: relative;
    }

        .form-horizontal .overflow-customize-tag > .w-100 > div + div::before {
            content: "";
            position: absolute;
            top: 0;
            left: 14px;
            right: 14px;
            height: 1px;
            background: #e5e5ea;
        }

    .form-horizontal .overflow-customize-tag label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        margin: 0;
        padding: 11px 14px;
        color: #1d1d1f;
        font-size: 14px;
        font-weight: 400;
        cursor: pointer;
    }

        .form-horizontal .overflow-customize-tag label:hover {
            background: rgba(118, 118, 128, .08);
        }

        .form-horizontal .overflow-customize-tag label > span {
            order: 1;
            min-width: 0;
            flex: 1 1 auto;
        }

        .form-horizontal .overflow-customize-tag label > input[type="checkbox"] {
            order: 2;
            flex: 0 0 auto;
            width: 18px;
            height: 18px;
            margin: 0;
            accent-color: #154fef;
        }

/* editor buttons beside the canvas */
.layout-page .canvas-button.enabledEditorActive {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

    .layout-page .canvas-button.enabledEditorActive .btn {
         display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    min-width: 0;
    height: 32px;
    padding: 0 12px;
    border: 0 !important;
    border-radius: 999px !important;
    background-color: rgb(238 238 240) !important;
    color: #1d1d1f !important;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    box-shadow: none !important;
    }

        .layout-page .canvas-button.enabledEditorActive .btn:hover {
            background-color: rgba(118, 118, 128, .2) !important;
        }

        .layout-page .canvas-button.enabledEditorActive .btn:has(> .bx:only-child),
        .layout-page .canvas-button.enabledEditorActive .btn:has(> i:only-child) {
            width: 32px;
            padding: 0;
            border-radius: 50% !important;
        }

        .layout-page .canvas-button.enabledEditorActive .btn .bx {
            font-size: 16px;
        }

/* customize filtering: same grouped list as the collection form options */
#editFiltre.full-modal .modal-content {
    background: #fff;
}

#editFiltre .modal-body > .w-100,
#editFiltre .modal-body > div > .w-100 {
    border-radius: 12px !important;
    background: #f5f5f7 !important;
    box-shadow: none !important;
}

#editFiltre .modal-body label {
    padding: 0 14px !important;
    height: 46px;
    font-size: 14px;
    background: transparent !important;
}

    #editFiltre .modal-body label:hover {
        background: #ebebee !important;
    }

#editFiltre .modal-body > div > .w-100 > div + div label::before {
    left: 14px;
    right: 14px;
    background: #e5e5ea;
}

/* the dashboard widgets carry Bootstrap's .row, whose negative side margins
   used to be absorbed by the container padding we removed - that overhang is
   what put a horizontal scrollbar at the bottom of the page */
collection-sharing-widget.row,
most-viewed-products.row,
favorite-products.row {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

/* most viewed: dividers run the full width of the card like the report list */
most-viewed-products .table-container,
favorite-products .table-container,
most-viewed-products .card-body > .table-container > .table,
favorite-products .card-body > .table-container > .table,
most-viewed-products .card-body > .table-container > .table > tbody > tr > td,
favorite-products .card-body > .table-container > .table > tbody > tr > td {
    padding: 0 !important;
    border: 0 !important;
}

most-viewed-products .product-item,
favorite-products .product-item {
    width: 100%;
    table-layout: fixed;
}

    most-viewed-products .product-item > tbody > tr > td,
    favorite-products .product-item > tbody > tr > td {
        padding: 10px 20px !important;
        border-top: 1px solid #f0f0f3 !important;
    }

    most-viewed-products .product-item:first-child > tbody > tr > td,
    favorite-products .product-item:first-child > tbody > tr > td {
        border-top: 0 !important;
    }

/* product clone settings: second line needs room inside the shared options list */
.form-horizontal .clone-settings .list-group-item small {
    display: block;
    margin-top: 2px;
    color: #86868b;
    font-size: 12px;
    line-height: 1.4;
}

.form-horizontal .clone-settings .list-group-item > div {
    min-width: 0;
    padding-right: 12px;
}

/* collection clone: pick what the copy becomes */
.clone-type-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.clone-type {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #e3e3e8;
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

    .clone-type:hover {
        border-color: #c9c9d1;
    }

    .clone-type.is-active {
        border-color: #154fef;
        background: rgba(21, 79, 239, .05);
    }

    .clone-type input[type="radio"] {
        position: absolute !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        opacity: 0 !important;
        pointer-events: none;
    }

.clone-type-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(118, 118, 128, .12);
    color: #6e6e73;
    font-size: 20px;
}

    .clone-type.is-active .clone-type-mark {
        background: rgba(21, 79, 239, .12);
        color: #154fef;
    }

.clone-type-text {
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.35;
}

    .clone-type-text b {
        display: block;
        color: #1d1d1f;
        font-size: 14px;
        font-weight: 600;
    }

    .clone-type-text small {
        color: #86868b;
        font-size: 12px;
    }

.clone-type-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    border: 1.5px solid #c7c7cc;
    border-radius: 50%;
    background: #fff;
}

    .clone-type.is-active .clone-type-dot {
        border-color: #154fef;
    }

        .clone-type.is-active .clone-type-dot::after {
            content: "";
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #154fef;
        }
.slick-carousel a{
        display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.slick-carousel img{
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100%;
    max-width: none;
    max-height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .6s cubic-bezier(.22, .61, .36, 1), opacity .45s ease;
    border-radius: 12px;
}

.product-canvas.slick-h{
    height: auto;
    max-height: max-content;
}
.slick-carousel {
    width: 100%;
    height: 100%;
}

.slick-next:before, .slick-prev:before {
    font-size: 25px;
    line-height: 1;
    opacity: .75;
    color: #000000;
    background-color: #ffffff;
    border-radius: 50%;
    padding: 5px;
}
.slick-next, .slick-prev {

    width: 35px;
    height: 35px;
}
.modal-backdrop {
    filter: blur(10px);
    background-color: rgb(106 106 106 / 50%) !important;
}

.product-grid > .product-item .productMove:hover span{
    color: #fff !important;
}


/* ---------- sign in / password pages ---------- */
.account-body {
    min-height: 100vh;
    background: #f5f5f7 !important;
    color: #1d1d1f;
}

    .account-body .layout-wrapper {
        min-height: 0;
    }

    .account-body .container-xxl {
        padding: 0 16px;
    }

    .account-body .authentication-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        padding: 0 !important;
    }

    .account-body .authentication-inner {
        width: 100%;
        max-width: 400px;
    }

    .account-body .card {
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 22px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 20px 50px rgba(0, 0, 0, .1);
    }

        .account-body .card-body {
            padding: 36px 34px 30px !important;
        }

    .account-body .card-body h1,
    .account-body .card-body h4 {
        margin: 0 0 6px;
        color: #1d1d1f;
        font-size: 24px;
        font-weight: 600;
        letter-spacing: -.4px;
        line-height: 1.2;
    }

    .account-body .card-body > p,
    .account-body .card-body form > p {
        margin: 0 0 22px;
        color: #6e6e73;
        font-size: 14px;
        line-height: 1.55;
    }

    .account-body .app-brand.justify-content-center {
        margin-bottom: 18px;
    }

        .account-body .app-brand.justify-content-center img {
            max-height: 26px;
            width: auto;
        }

    .account-body .mb-3 {
        margin-bottom: 14px !important;
    }

    .account-body .form-floating {
        position: relative;
    }

        .account-body .form-floating > .form-control {
            height: 54px;
            min-height: 54px;
            padding: 23px 14px 7px;
            border: 1px solid #e3e3e8;
            border-radius: 12px;
            background: #fff;
            color: #1d1d1f;
            font-size: 14px;
            box-shadow: none;
            transition: border-color .15s ease, box-shadow .15s ease;
        }

            .account-body .form-floating > .form-control:focus {
                border-color: #154fef;
                box-shadow: 0 0 0 3px rgba(21, 79, 239, .12);
            }

        .account-body .form-floating > label {
            display: flex;
            align-items: center;
            height: 100%;
            padding: 0 14px;
            border: 0;
            color: #86868b;
            font-size: 14px;
            font-weight: 400;
            transform-origin: 0 0;
        }

        .account-body .form-floating > .form-control:focus ~ label,
        .account-body .form-floating > .form-control:not(:placeholder-shown) ~ label {
            height: auto;
            padding: 8px 14px 0;
            color: #86868b;
            font-size: 11.5px;
            opacity: 1;
            transform: none;
        }

    .account-body form > .mb-3 > a,
    .account-body .card-body a:not(.btn) {
        color: #154fef;
        font-size: 13.5px;
        text-decoration: none;
    }

        .account-body form > .mb-3 > a b,
        .account-body .card-body a:not(.btn) b {
            font-weight: 500;
        }

        .account-body form > .mb-3 > a:hover,
        .account-body .card-body a:not(.btn):hover {
            text-decoration: underline;
        }

    .account-body .btn.btn-primary {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 48px;
        margin-top: 0;
        padding: 0 20px;
        border: 0;
        border-radius: 999px;
        background-color: #154fef;
        color: #fff;
        font-size: 15px;
        font-weight: 500;
        box-shadow: none;
    }

        .account-body .btn.btn-primary:hover,
        .account-body .btn.btn-primary:focus {
            background-color: #2d63f5;
            color: #fff;
            box-shadow: none;
        }

    .account-body .btn.btn-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 40px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #6e6e73;
        font-size: 13.5px;
        font-weight: 400;
        text-decoration: none;
        box-shadow: none;
    }

        .account-body .btn.btn-link:hover {
            color: #1d1d1f;
            background: transparent;
        }

        .account-body .btn.btn-link b {
            font-weight: 500;
        }

    .account-body .text-danger {
        color: #d70015 !important;
        font-size: 12.5px;
        line-height: 1.45;
    }

    .account-body .validation-summary-errors ul {
        margin: 0 0 14px;
        padding: 12px 14px;
        border-radius: 12px;
        background: rgba(255, 59, 48, .08);
        list-style: none;
    }

        .account-body .validation-summary-errors li {
            color: #d70015;
            font-size: 12.5px;
            line-height: 1.5;
        }

    .account-body span.text-danger {
        display: inline-block;
        margin-top: 5px;
    }

@media (max-width: 575.98px) {
    .account-body .card-body {
        padding: 28px 22px 24px !important;
    }

    .account-body .authentication-wrapper {
        min-height: 100vh;
    }
}

/* the base sheet styles these pages at .authentication-basic .authentication-inner,
   which outranks the block above - same anchor, so the new look actually lands */
.account-body .authentication-wrapper.authentication-basic .authentication-inner {
    max-width: 400px;
}

    .account-body .authentication-wrapper.authentication-basic .authentication-inner h1 {
        margin-bottom: 6px;
        font-size: 24px !important;
        font-weight: 600;
        letter-spacing: -.4px;
        line-height: 1.2;
    }

    .account-body .authentication-wrapper.authentication-basic .authentication-inner > .card {
        border: 0 !important;
        background-color: #fff !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 20px 50px rgba(0, 0, 0, .1) !important;
    }

    .account-body .authentication-wrapper.authentication-basic .authentication-inner .form-floating > .form-control,
    .account-body .authentication-wrapper.authentication-basic .authentication-inner .form-floating > .form-select {
        height: 54px;
    }

    .account-body .authentication-wrapper.authentication-basic .authentication-inner .form-floating > label {
        height: 54px;
        line-height: normal;
    }

    .account-body .authentication-wrapper.authentication-basic .authentication-inner .form-floating > .form-control:focus ~ label,
    .account-body .authentication-wrapper.authentication-basic .authentication-inner .form-floating > .form-control:not(:placeholder-shown) ~ label {
        height: auto;
        line-height: normal;
    }

    .account-body .authentication-wrapper.authentication-basic .authentication-inner::before,
    .account-body .authentication-wrapper.authentication-basic .authentication-inner::after {
        display: none;
    }

/* logo sits above the card, language below it - no header bar on these pages */
.account-body .auth-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 22px;
}

    .account-body .auth-logo img {
        height: 22px;
        width: auto;
        max-width: 100%;
    }

/* spacing: empty validation holders must not open a line, title breathes,
   the forgot link hugs the password field */
.account-body .validation-summary-valid,
.account-body .field-validation-valid {
    display: none !important;
}

.account-body .authentication-inner .card-body > h1 + form {
    margin-top: 22px;
}

.account-body .authentication-inner .card-body > h1 + p {
    margin-top: 0;
}

.account-body form > .mb-3:has(> a:not(.btn)) {
    margin: -2px 0 18px !important;
    text-align: right;
}

    .account-body form > .mb-3:has(> a:not(.btn)) > a {
        font-size: 13px;
    }

.account-body form > .mb-3:last-child {
    margin-bottom: 0 !important;
}

.account-body form > .mb-3:has(> .btn-link) {
    margin-top: 6px !important;
}

/* ---------- sign in: finishing ---------- */
.account-body {
    background:
        radial-gradient(900px 480px at 50% -8%, rgba(21, 79, 239, .11), rgba(21, 79, 239, 0) 70%),
        radial-gradient(700px 420px at 100% 100%, rgba(90, 200, 250, .08), rgba(90, 200, 250, 0) 70%),
        #f5f5f7 !important;
    background-attachment: fixed !important;
}

    .account-body .authentication-wrapper.authentication-basic .authentication-inner > .card {
        border: 1px solid rgba(0, 0, 0, .04) !important;
        border-radius: 24px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 24px 60px -12px rgba(16, 24, 64, .18) !important;
    }

    .account-body .authentication-wrapper.authentication-basic .authentication-inner h1 {
        text-align: center;
        letter-spacing: -.5px;
    }

    .account-body .authentication-inner .card-body > h1 + p,
    .account-body .authentication-inner .card-body > p {
        text-align: center;
    }

    /* every primary button on these pages is the same button, whatever id it carries */
    .account-body .btn.btn-primary,
    .account-body #buttonSubmit {
        display: flex !important;
        align-items: center;
        justify-content: center;
        height: 48px;
        border: 0;
        border-radius: 999px;
        background: linear-gradient(180deg, #2d63f5 0%, #154fef 100%);
        color: #fff;
        font-size: 15px !important;
        font-weight: 500;
        letter-spacing: -.1px;
        box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 8px 18px -6px rgba(21, 79, 239, .55);
        transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    }

        .account-body .btn.btn-primary:hover,
        .account-body #buttonSubmit:hover {
            background: linear-gradient(180deg, #3b6ef7 0%, #1a55f2 100%);
            box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 12px 24px -8px rgba(21, 79, 239, .6);
            transform: translateY(-1px);
        }

        .account-body .btn.btn-primary:active,
        .account-body #buttonSubmit:active {
            transform: translateY(0);
            filter: brightness(.96);
        }

    .account-body .btn.btn-link {
        font-size: 13.5px !important;
    }

.account-body .auth-foot {
    margin: 22px 0 0;
    color: #a1a1a6;
    font-size: 12px;
    text-align: center;
    letter-spacing: .01em;
}


/* ---------- chat ---------- */
.wa-chat {
    position: relative;
    display: flex;
    height: 100vh;
    min-height: 0;
    background: #fff;
    overflow: hidden;
}

/* sidebar */
.wa-side {
    display: flex;
    flex-direction: column;
    flex: 0 0 420px;
    width: 420px;
    min-height: 0;
    border-right: 1px solid #ececf0;
    background: #fff;
}

.wa-side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 16px 10px 20px;
}

.wa-side-title {
    margin: 0;
    color: #1d1d1f;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.5px;
}

.wa-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #154fef;
    font-size: 20px;
    transition: background-color .15s ease;
}

    .wa-icon-btn:hover {
        background: rgba(21, 79, 239, .1);
    }

.wa-search {
    position: relative;
    margin: 2px 16px 10px;
}

    .wa-search > .bx-search {
        position: absolute;
        top: 50%;
        left: 13px;
        transform: translateY(-50%);
        color: #8e8e93;
        font-size: 16px;
        pointer-events: none;
    }

    .wa-search input {
        width: 100%;
        height: 36px;
        padding: 0 32px 0 36px;
        border: 0;
        border-radius: 999px;
        background: rgba(118, 118, 128, .12);
        color: #1d1d1f;
        font-size: 14px;
        outline: 0;
    }

        .wa-search input::placeholder {
            color: #8e8e93;
        }

.wa-search-clear {
    position: absolute;
    top: 50%;
    right: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #aeaeb2;
    color: #fff;
    font-size: 14px;
    transform: translateY(-50%);
}

.wa-filters {
    display: flex;
    gap: 6px;
    padding: 0 16px 10px;
}

.wa-filter {
    height: 30px;
    padding: 0 13px;
    border: 0;
    border-radius: 999px;
    background: rgba(118, 118, 128, .12);
    color: #3a3a3c;
    font-size: 13px;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
}

    .wa-filter:hover {
        background: rgba(118, 118, 128, .2);
    }

    .wa-filter.is-active {
        background: rgba(21, 79, 239, .12);
        color: #154fef;
    }

.wa-list {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0 8px 12px;
    list-style: none;
    overflow-y: auto;
    scrollbar-width: thin;
}

.wa-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color .12s ease;
}

    .wa-item:hover {
        background: rgba(118, 118, 128, .08);
    }

    .wa-item.is-active {
        background: rgba(21, 79, 239, .1);
    }

.wa-item-body {
    min-width: 0;
    flex: 1 1 auto;
}

.wa-item-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .wa-item-row + .wa-item-row {
        margin-top: 2px;
    }

.wa-item-name {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    color: #1d1d1f;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.2px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wa-item-time {
    flex: 0 0 auto;
    color: #8e8e93;
    font-size: 12px;
}

.wa-item.is-unread .wa-item-time {
    color: #154fef;
    font-weight: 600;
}

.wa-item-preview {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    color: #8e8e93;
    font-size: 13.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wa-item.is-unread .wa-item-preview {
    color: #1d1d1f;
}

.wa-item-who {
    color: #6e6e73;
}

.wa-item-marks {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.wa-pin-mark {
    color: #aeaeb2;
    font-size: 14px;
    transform: rotate(45deg);
}

.wa-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #154fef;
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
}

/* row options caret slides in on hover, like WhatsApp */
.wa-item-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0;
    height: 22px;
    margin-left: -6px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #8e8e93;
    font-size: 22px;
    overflow: hidden;
    opacity: 0;
    transition: width .15s ease, margin .15s ease, opacity .15s ease;
}

.wa-item:hover .wa-item-caret,
.wa-item.is-menu-open .wa-item-caret {
    width: 22px;
    margin-left: 0;
    opacity: 1;
}

.wa-item-caret:hover,
.wa-item.is-menu-open .wa-item-caret {
    color: #1d1d1f;
    background: rgba(118, 118, 128, .14);
}

.wa-list-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 36px 16px;
    color: #8e8e93;
    font-size: 13px;
    text-align: center;
}

    .wa-list-state .bx {
        color: #c7c7cc;
        font-size: 30px;
    }

/* avatars */
.wa-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #e5e5ea;
    color: #6e6e73;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .02em;
}

    .wa-avatar .bx {
        font-size: 24px;
    }

    .wa-avatar.wa-avatar-sm {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }

        .wa-avatar.wa-avatar-sm .bx {
            font-size: 19px;
        }

    .wa-avatar.is-group {
        background: linear-gradient(180deg, #a8b4c8 0%, #8390a8 100%);
        color: #fff;
    }

    .wa-avatar.tone-0 { background: linear-gradient(180deg, #6e9bff 0%, #3b6ef7 100%); color: #fff; }
    .wa-avatar.tone-1 { background: linear-gradient(180deg, #5dd39e 0%, #2fb57a 100%); color: #fff; }
    .wa-avatar.tone-2 { background: linear-gradient(180deg, #ffb35c 0%, #f5902a 100%); color: #fff; }
    .wa-avatar.tone-3 { background: linear-gradient(180deg, #b58cff 0%, #8e5cf2 100%); color: #fff; }
    .wa-avatar.tone-4 { background: linear-gradient(180deg, #ff8fae 0%, #f25c86 100%); color: #fff; }
    .wa-avatar.tone-5 { background: linear-gradient(180deg, #5ccfe6 0%, #22a9c8 100%); color: #fff; }

.tone-text-0 { color: #3b6ef7; }
.tone-text-1 { color: #1f9e68; }
.tone-text-2 { color: #d9770f; }
.tone-text-3 { color: #7c45e8; }
.tone-text-4 { color: #e0426f; }
.tone-text-5 { color: #1592ad; }

/* conversation */
.wa-main {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    background:
        radial-gradient(rgba(16, 24, 64, .045) 1px, transparent 1.2px) 0 0 / 18px 18px,
        #f4f5f8;
}

.wa-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    min-height: 62px;
    padding: 10px 14px 10px 18px;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

.wa-head-text {
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.25;
}

    .wa-head-text h3 {
        margin: 0;
        overflow: hidden;
        color: #1d1d1f;
        font-size: 15.5px;
        font-weight: 600;
        letter-spacing: -.2px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .wa-head-text small {
        color: #8e8e93;
        font-size: 12.5px;
    }

.wa-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

.wa-thread {
    display: flex;
    flex-direction: column;
    padding: 14px 48px 18px;
}

.wa-day {
    display: flex;
    justify-content: center;
    margin: 14px 0 8px;
}

    .wa-day span {
        padding: 4px 11px;
        border-radius: 8px;
        background: rgba(255, 255, 255, .92);
        color: #6e6e73;
        font-size: 12px;
        font-weight: 500;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .06);
    }

.wa-msg {
    display: flex;
    margin-top: 2px;
}

    .wa-msg.is-first {
        margin-top: 10px;
    }

    .wa-msg.is-mine {
        justify-content: flex-end;
    }

.wa-bubble {
    position: relative;
    max-width: min(620px, 65%);
    padding: 7px 11px 7px 12px;
    border-radius: 18px;
    background: #fff;
    color: #1d1d1f;
    font-size: 14.5px;
    line-height: 1.4;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .06);
    overflow-wrap: anywhere;
}

.wa-msg.is-first:not(.is-mine) .wa-bubble {
    border-top-left-radius: 6px;
}

.wa-msg.is-mine .wa-bubble {
    background: linear-gradient(180deg, #2d63f5 0%, #154fef 100%);
    color: #fff;
    box-shadow: none;
}

.wa-msg.is-mine.is-first .wa-bubble {
    border-top-right-radius: 6px;
}

.wa-sender {
    margin-bottom: 1px;
    font-size: 12.5px;
    font-weight: 600;
}

.wa-text {
    white-space: pre-wrap;
}

/* time sits at the end of the last line, like a trailing word */
.wa-time {
    float: right;
    position: relative;
    top: 7px;
    margin: 0 0 0 10px;
    color: #8e8e93;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
}

.wa-msg.is-mine .wa-time {
    color: rgba(255, 255, 255, .72);
}

/* empty state */
.wa-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 48px 24px;
}

.wa-empty-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 380px;
    text-align: center;
}

.wa-empty-mark {
    position: relative;
    width: 112px;
    height: 96px;
    margin-bottom: 32px;
}

.wa-empty-bubble {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 26px;
}

    .wa-empty-bubble.is-back {
        top: 0;
        right: 0;
        width: 72px;
        height: 58px;
        border-bottom-right-radius: 8px;
        background: #e5e5ea;
    }

    .wa-empty-bubble.is-front {
        bottom: 0;
        left: 0;
        width: 82px;
        height: 66px;
        border: 1px solid #e5e5ea;
        border-bottom-left-radius: 8px;
        background: #fff;
        color: #3a3a3c;
        font-size: 34px;
        box-shadow: 0 10px 28px rgba(0, 0, 0, .08);
    }

.wa-empty h3 {
    margin: 0 0 12px;
    color: #1d1d1f;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.4px;
}

.wa-empty p {
    margin: 0 0 32px;
    color: #6e6e73;
    font-size: 14.5px;
    line-height: 1.6;
}

.wa-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 22px 0 18px;
    border: 0;
    border-radius: 999px;
    background: #1d1d1f;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    transition: background-color .15s ease, transform .15s ease;
}

    .wa-empty-cta:hover {
        background: #3a3a3c;
        transform: translateY(-1px);
    }

.wa-empty-tips {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    margin: 48px 0 0;
    padding: 28px 0 0;
    border-top: 1px solid rgba(0, 0, 0, .07);
    list-style: none;
    text-align: left;
}

    .wa-empty-tips li {
        display: flex;
        align-items: center;
        gap: 14px;
    }

        .wa-empty-tips li b {
            display: block;
            color: #1d1d1f;
            font-size: 13.5px;
            font-weight: 600;
        }

        .wa-empty-tips li small {
            display: block;
            margin-top: 2px;
            color: #8e8e93;
            font-size: 12.5px;
            line-height: 1.4;
        }

.wa-empty-tip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 1px solid #e5e5ea;
    border-radius: 12px;
    background: #fff;
    color: #3a3a3c;
    font-size: 19px;
}

@media (min-width: 1200px) and (max-width: 1440px) {
    .wa-empty {
        padding: 32px 20px;
    }

    .wa-empty-mark {
        transform: scale(.85);
        margin-bottom: 22px;
    }

    .wa-empty h3 {
        font-size: 21px;
    }

    .wa-empty p {
        margin-bottom: 24px;
        font-size: 13.5px;
    }

    .wa-empty-tips {
        gap: 14px;
        margin-top: 34px;
        padding-top: 22px;
    }
}

/* composer */
.wa-composer {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex: 0 0 auto;
    padding: 10px 16px 14px;
    border-top: 1px solid rgba(0, 0, 0, .06);
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

.wa-input {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 16px;
    border: 1px solid #e3e3e8;
    border-radius: 22px;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .wa-input:focus-within {
        border-color: #154fef;
        box-shadow: 0 0 0 3px rgba(21, 79, 239, .1);
    }

    .wa-input textarea {
        width: 100%;
        min-height: 22px;
        max-height: 140px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #1d1d1f;
        font-size: 14.5px;
        line-height: 22px;
        resize: none;
        outline: 0;
        overflow-y: hidden;
    }

        .wa-input textarea::placeholder {
            color: #8e8e93;
        }

.wa-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    padding: 0 0 0 2px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, #2d63f5 0%, #154fef 100%);
    color: #fff;
    font-size: 19px;
    box-shadow: 0 6px 14px -4px rgba(21, 79, 239, .55);
    transition: transform .12s ease, opacity .12s ease, box-shadow .12s ease;
}

    .wa-send:hover:not(:disabled) {
        transform: scale(1.05);
    }

    .wa-send:disabled {
        background: #d1d1d6;
        box-shadow: none;
        opacity: 1;
    }

/* new chat */
.wa-new-sheet .modal-dialog {
    max-width: 480px;
}

.wa-new-sheet .modal-content {
    border: 0;
    border-radius: 22px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .22);
}

.wa-new-sheet .modal-body {
    padding-top: 6px;
}

.wa-field + .wa-field {
    margin-top: 14px;
}

.wa-field > label {
    display: block;
    margin-bottom: 6px;
    color: #6e6e73;
    font-size: 12.5px;
    font-weight: 500;
}

.wa-field .form-control,
.wa-field textarea.form-control {
    border: 1px solid #e3e3e8;
    border-radius: 12px;
    font-size: 14px;
    box-shadow: none;
}

    .wa-field .form-control:focus {
        border-color: #154fef;
        box-shadow: 0 0 0 3px rgba(21, 79, 239, .12);
    }

.wa-field textarea.form-control {
    min-height: 84px;
    resize: vertical;
}

.wa-new-sheet .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

    .wa-new-sheet .modal-footer .btn {
        height: 38px;
        padding: 0 18px;
        border: 0;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 500;
    }

    .wa-new-sheet .modal-footer .btn-secondary {
        background: rgba(118, 118, 128, .12);
        color: #1d1d1f;
    }

@media (min-width: 1441px) and (max-width: 1599.98px) {
    .wa-side {
        flex-basis: 380px;
        width: 380px;
    }

    .wa-thread {
        padding: 14px 32px 18px;
    }
}

@media (min-width: 1200px) and (max-width: 1440px) {
    .wa-side {
        flex-basis: 340px;
        width: 340px;
    }

    .wa-avatar {
        width: 44px;
        height: 44px;
    }

    .wa-thread {
        padding: 12px 24px 16px;
    }
}

/* ---------- collapsible menu rail ----------
   one width drives the menu and everything that is offset by it,
   so the page slides together with the rail */
:root {
    --menu-w: 215px;
    --menu-ease: cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 1200px) and (max-width: 1440px) {
    :root {
        --menu-w: 190px;
    }
}

@media (min-width: 1200px) {
    html.menu-rail {
        --menu-w: 72px;
    }

    .menu-vertical,
    .app-menu-trigger {
        width: var(--menu-w);
    }

    .layout-menu-fixed-offcanvas:not(.layout-menu-collapsed) .layout-page,
    .layout-menu-fixed:not(.layout-menu-collapsed) .layout-page {
        padding-left: var(--menu-w);
    }

    .product-bottom-action {
        padding-left: var(--menu-w);
    }

    .create-and-edit {
        width: calc(100% - var(--menu-w)) !important;
        margin-left: var(--menu-w) !important;
    }

    html.menu-animate .menu-vertical {
        transition: width .3s var(--menu-ease);
    }

    html.menu-animate .layout-page,
    html.menu-animate .product-bottom-action {
        transition: padding-left .3s var(--menu-ease);
    }

    html.menu-animate .create-and-edit {
        transition: width .3s var(--menu-ease), margin-left .3s var(--menu-ease);
    }

    /* labels are clipped and faded instead of removed, so the icons never jump */
    #layout-menu .menu-brand,
    #layout-menu .menu-link,
    .menu-footer .nav-link,
    .menu-footer .btn.nav-link {
        overflow: hidden;
    }

    #layout-menu .menu-link > div,
    .menu-footer .nav-label,
    .menu-footer .nav-caret {
        white-space: nowrap;
        transition: opacity .18s ease;
    }

    html.menu-animate #layout-menu .menu-link .menu-icon,
    html.menu-animate .menu-footer .nav-glyph {
        transition: font-size .3s var(--menu-ease), width .3s var(--menu-ease), height .3s var(--menu-ease), margin .3s var(--menu-ease);
    }

    /* brand */
    #layout-menu .menu-brand .menu-brand-mark {
        display: none;
    }

    html.menu-rail #layout-menu .menu-brand {
        justify-content: center;
        padding: 0;
    }

        html.menu-rail #layout-menu .menu-brand .menu-brand-full {
            display: none;
        }

        html.menu-rail #layout-menu .menu-brand .menu-brand-mark {
            display: block;
            width: 30px;
            height: 30px;
            max-width: none;
            max-height: none;
            border-radius: 8px;
        }

    /* what the rail drops */
    html.menu-rail #layout-menu .menu-header,
    html.menu-rail #layout-menu .menu-uygulamalar,
    html.menu-rail #layout-menu .menu-item:has(> .view-menu-link),
    html.menu-rail #layout-menu .menu-sub {
        display: none !important;
    }

    /* entries become icons, centred in the 72px rail */
    html.menu-rail #layout-menu .menu-inner {
        padding: 6px 10px !important;
    }

        html.menu-rail #layout-menu .menu-inner > .menu-item > .menu-link {
            justify-content: flex-start;
            height: 44px;
            min-height: 44px;
            padding: 0 0 0 14px !important;
        }

            html.menu-rail #layout-menu .menu-inner > .menu-item > .menu-link > div {
                opacity: 0;
            }

            html.menu-rail #layout-menu .menu-inner > .menu-item > .menu-link .menu-icon {
                width: 24px;
                height: 24px;
                margin-right: 0 !important;
                font-size: 22px !important;
            }

    /* footer */
    .menu-rail-row {
        display: flex;
        justify-content: flex-end;
        padding: 0 2px 4px;
    }

    html.menu-rail .menu-footer {
        padding: 6px 10px 10px;
    }

        html.menu-rail .menu-footer .nav-link,
        html.menu-rail .menu-footer .btn.nav-link {
            position: relative;
            height: 44px;
            padding: 0 0 0 14px !important;
        }

        html.menu-rail .menu-footer .nav-label,
        html.menu-rail .menu-footer .nav-caret {
            opacity: 0;
        }

        html.menu-rail .menu-footer .nav-glyph {
            width: 24px;
            height: 24px;
            font-size: 22px;
        }

        html.menu-rail .menu-footer .badge-notifications {
            position: absolute !important;
            top: 5px !important;
            left: 32px !important;
            right: auto !important;
            min-width: 16px;
            padding: 0 4px;
            font-size: 10px;
            line-height: 16px;
        }
}

.menu-rail-row {
    display: flex;
    justify-content: flex-end;
}

.menu-rail-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #8e8e93;
    font-size: 18px;
    transition: background-color .15s ease, color .15s ease;
}

    .menu-rail-toggle:hover {
        background: rgba(118, 118, 128, .12);
        color: #1d1d1f;
    }

    .menu-rail-toggle .bx {
        transition: transform .3s var(--menu-ease);
    }

html.menu-rail .menu-rail-row {
    justify-content: center;
}

html.menu-rail .menu-rail-toggle .bx {
    transform: rotate(180deg);
}

/* the rail only exists on the fixed desktop menu */
@media (max-width: 1199.98px) {
    .menu-rail-row {
        display: none;
    }
}

/* the collapse control is new, so it carries the accent colour */
.menu-rail-toggle {
    background: rgba(21, 79, 239, .1);
    color: #154fef;
}

    .menu-rail-toggle:hover {
        background: rgba(21, 79, 239, .18);
        color: #154fef;
    }

/* the base sheet pins .menu-icon to 18px with !important while the footer
   glyphs shrink at 150%, so both sizes are set here together */
@media (min-width: 1200px) and (max-width: 1440px) {
    #layout-menu .menu-link .menu-icon,
    .menu-footer .nav-glyph,
    .menu-footer .nav-link .bx.nav-glyph {
        width: 16px;
        height: 16px;
        font-size: 16px !important;
    }

    html.menu-rail #layout-menu .menu-inner > .menu-item > .menu-link .menu-icon,
    html.menu-rail .menu-footer .nav-glyph,
    html.menu-rail .menu-footer .nav-link .bx.nav-glyph {
        width: 20px;
        height: 20px;
        font-size: 20px !important;
    }
}

@media (min-width: 1440.02px) {
    html.menu-rail .menu-footer .nav-glyph,
    html.menu-rail .menu-footer .nav-link .bx.nav-glyph {
        font-size: 22px !important;
    }
}

@media (min-width: 1200px) {
    /* collapsed: every entry is a 44px circle */
    html.menu-rail #layout-menu .menu-inner > .menu-item > .menu-link,
    html.menu-rail .menu-footer .nav-link,
    html.menu-rail .menu-footer .btn.nav-link {
        width: 44px;
        height: 44px;
        min-height: 44px;
        margin: 1px auto;
        padding: 0 0 0 10px !important;
        border-radius: 50% !important;
    }

    html.menu-rail .menu-footer .nav-item {
        display: flex;
        justify-content: center;
    }

    html.menu-rail .menu-footer .badge-notifications {
        top: 4px !important;
        left: 26px !important;
    }

    /* children of a parent open beside the rail */
    html.menu-rail #layout-menu .menu-item.rail-flyout-open > .menu-sub {
        display: block !important;
        position: fixed;
        top: var(--flyout-top, 80px);
        left: calc(var(--menu-w) + 8px);
        z-index: 1095;
        min-width: 210px;
        height: auto !important;
        margin: 0;
        padding: 6px !important;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 14px 34px rgba(0, 0, 0, .16);
        overflow: visible !important;
        animation: railFlyoutIn .18s var(--menu-ease);
    }

        html.menu-rail #layout-menu .menu-item.rail-flyout-open > .menu-sub::before {
            content: attr(data-title) !important;
            position: static !important;
            display: block !important;
            width: auto !important;
            height: auto !important;
            margin: 0 0 4px;
            padding: 6px 10px 4px;
            border-radius: 0;
            background: none !important;
            color: #86868b;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: .04em;
            text-transform: uppercase;
        }

        html.menu-rail #layout-menu .menu-item.rail-flyout-open > .menu-sub .menu-link {
            height: 34px;
            min-height: 34px;
            padding: 0 10px !important;
            border-radius: 9px;
            font-size: 13.5px;
        }

            html.menu-rail #layout-menu .menu-item.rail-flyout-open > .menu-sub .menu-link > div {
                opacity: 1;
            }

    html.menu-rail #layout-menu .menu-item.rail-flyout-open > .menu-link {
        background-color: rgba(118, 118, 128, .12);
    }

}

html:not(.menu-rail) #layout-menu .rail-flyout-parent {
    display: none !important;
}

@media (max-width: 1199.98px) {
    #layout-menu .rail-flyout-parent {
        display: none !important;
    }
}

@keyframes railFlyoutIn {
    from {
        opacity: 0;
        transform: translateX(-6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* hover label with an arrow, the rail's replacement for the hidden text */
.menu-rail-tip {
    position: fixed;
    z-index: 1100;
    display: flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    background: #1d1d1f;
    color: #fff;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    opacity: 0;
    pointer-events: none;
    transform: translate(-4px, -50%);
    transition: opacity .12s ease, transform .12s ease;
}

    .menu-rail-tip::before {
        content: "";
        position: absolute;
        top: 50%;
        left: -4px;
        width: 9px;
        height: 9px;
        border-radius: 2px;
        background: #1d1d1f;
        transform: translateY(-50%) rotate(45deg);
    }

    .menu-rail-tip.is-visible {
        opacity: 1;
        transform: translate(0, -50%);
    }

@media (min-width: 1200px) {
    /* collapsed: the icon is centred in its circle whatever its size,
       labels leave the flow so they cannot push it sideways */
    html.menu-rail #layout-menu .menu-inner > .menu-item > .menu-link,
    html.menu-rail .menu-footer .nav-link,
    html.menu-rail .menu-footer .btn.nav-link {
        justify-content: center !important;
        gap: 0 !important;
        padding: 0 !important;
    }

        html.menu-rail #layout-menu .menu-inner > .menu-item > .menu-link > div,
        html.menu-rail .menu-footer .nav-label,
        html.menu-rail .menu-footer .nav-caret {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

    /* a count does not fit on a 22px bell, a dot says the same */
    html.menu-rail .menu-footer .badge-notifications {
        top: 10px !important;
        left: 24px !important;
        width: 10px;
        height: 10px;
        min-width: 0;
        padding: 0;
        border: 2px solid #f1f1f3;
        border-radius: 50%;
        color: transparent;
        font-size: 0;
        line-height: 0;
    }

        html.menu-rail .menu-footer .badge-notifications.is-empty {
            display: none !important;
        }
}

@media (min-width: 1200px) and (max-width: 1440px) {
    html.menu-rail #layout-menu .menu-inner > .menu-item > .menu-link,
    html.menu-rail .menu-footer .nav-link,
    html.menu-rail .menu-footer .btn.nav-link {
        width: 40px;
        height: 40px;
        min-height: 40px;
        margin: 0 auto;
    }

    html.menu-rail .menu-footer .badge-notifications {
        top: 9px !important;
        left: 22px !important;
    }
}

/* ---------- new-notification toast ---------- */
.notiAlert {
    right: 24px;
    bottom: 24px;
    width: 340px;
    min-width: 0;
    max-width: calc(100vw - 32px);
}

    .notiAlert .alert-warning {
        position: relative;
        margin: 10px 0 0;
        padding: 14px 16px 14px 44px !important;
        border: 1px solid rgba(0, 0, 0, .06);
        border-radius: 16px;
        background-color: rgba(255, 255, 255, .92);
        color: #1d1d1f;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 16px 40px rgba(0, 0, 0, .16);
        animation: notiIn .32s var(--menu-ease, ease);
        transition: opacity .35s ease, transform .35s ease;
    }

        .notiAlert .alert-warning::before {
            content: "\e9bb";
            position: absolute;
            top: 14px;
            left: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border-radius: 6px;
            background: #154fef;
            color: #fff;
            font-family: "boxicons";
            font-size: 12px;
        }

        .notiAlert .alert-warning.is-leaving {
            opacity: 0;
            transform: translateX(24px);
        }

        .notiAlert .alert-warning * {
            color: #1d1d1f;
            font-size: 13px;
        }

    .notiAlert .flex-column {
        padding: 0 !important;
    }

    .notiAlert div.mb-0 {
        line-height: 1.45;
    }

        .notiAlert div.mb-0 b,
        .notiAlert div.mb-0 strong {
            font-weight: 600;
        }

    .notiAlert pre {
        margin: 4px 0 0;
        color: #6e6e73 !important;
        font-family: inherit;
        font-size: 13px !important;
        font-weight: 400;
        white-space: pre-wrap;
    }

    .notiAlert div.mb-0 a {
        display: inline-flex;
        align-items: center;
        height: 28px;
        margin-top: 10px;
        padding: 0 12px;
        border: 0;
        border-radius: 999px;
        background: rgba(21, 79, 239, .1);
        color: #154fef !important;
        font-size: 12.5px;
        font-weight: 600;
        text-decoration: none;
    }

        .notiAlert div.mb-0 a:hover {
            background: rgba(21, 79, 239, .18);
        }

    .notiAlert .btn-close {
        display: none !important;
    }

@keyframes notiIn {
    from {
        opacity: 0;
        transform: translateX(28px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- notification panel: unread dot ----------
   theme-default anchors the marker with right: 0 as well, which pulled it
   onto the text; its box is pinned explicitly here */
.notifications-sheet .dropdown-item {
    padding-left: 28px !important;
}

    .notifications-sheet .dropdown-item + .dropdown-item::before {
        left: 28px;
    }

.notifications-sheet #notificationList > li > div {
    position: static !important;
}

.notifications-sheet .dropdown-notifications-read {
    top: 13px !important;
    left: 12px !important;
    right: auto !important;
    bottom: auto !important;
    display: block;
    width: 8px;
    height: 8px;
    line-height: 0;
}

    .notifications-sheet .dropdown-notifications-read.d-none {
        display: none !important;
    }

    .notifications-sheet .dropdown-notifications-read .badge-dot {
        display: block;
        width: 8px;
        height: 8px;
        margin: 0;
        padding: 0;
        border-radius: 50%;
        background-color: #ff3b30;
    }

/* ---------- Chats counter in the menu ---------- */
#layout-menu .menu-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 18px;
    height: 18px;
    margin-left: auto;
    padding: 0 5px;
    border-radius: 999px;
    background: #ff3b30;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

    #layout-menu .menu-count.is-empty {
        display: none !important;
    }

@media (min-width: 1200px) {
    html.menu-rail #layout-menu .menu-count {
        position: absolute;
        top: 9px;
        left: 24px;
        width: 10px;
        height: 10px;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 2px solid #f7f7f8;
        color: transparent;
        font-size: 0;
    }
}

@media (min-width: 1200px) and (max-width: 1440px) {
    html.menu-rail #layout-menu .menu-count {
        top: 8px;
        left: 22px;
    }
}

/* around 125% browser zoom: halfway between the 100% and 150% menu */
@media (min-width: 1441px) and (max-width: 1599.98px) {
    :root {
        --menu-w: 205px;
    }

    #layout-menu .menu-link {
        min-height: 31px;
        height: 31px;
        font-size: 13px;
    }

        #layout-menu .menu-link .menu-icon,
        #layout-menu .menu-link.view-menu-link .menu-icon,
        .menu-footer .nav-glyph,
        .menu-footer .nav-link .bx.nav-glyph {
            width: 17px;
            height: 17px;
            font-size: 17px !important;
        }

    #layout-menu .menu-sub .menu-link {
        min-height: 31px;
        height: 31px;
        font-size: 12.5px;
    }

    #layout-menu .menu-header {
        font-size: 10.5px;
    }

    #layout-menu .menu-link.view-menu-link,
    #layout-menu .menu-link.view-menu-link div {
        font-size: 12.5px;
    }

    #layout-menu .menu-link.view-menu-link {
        min-height: 31px;
        height: 31px;
    }

    .menu-footer .nav-link,
    .menu-footer .btn.nav-link {
        min-height: 33px;
        height: 33px;
        font-size: 13px;
    }

    html.menu-rail #layout-menu .menu-inner > .menu-item > .menu-link,
    html.menu-rail .menu-footer .nav-link,
    html.menu-rail .menu-footer .btn.nav-link {
        width: 42px;
        height: 42px;
        min-height: 42px;
        margin: 1px auto;
    }

    html.menu-rail #layout-menu .menu-inner > .menu-item > .menu-link .menu-icon,
    html.menu-rail .menu-footer .nav-glyph,
    html.menu-rail .menu-footer .nav-link .bx.nav-glyph {
        width: 21px;
        height: 21px;
        font-size: 21px !important;
    }
}

/* ---------- collapsed rail at 125% / 150%: smaller circles, narrower rail ---------- */
@media (min-width: 1441px) and (max-width: 1599.98px) {
    html.menu-rail {
        --menu-w: 64px;
    }

        html.menu-rail #layout-menu .menu-inner > .menu-item > .menu-link,
        html.menu-rail .menu-footer .nav-link,
        html.menu-rail .menu-footer .btn.nav-link {
            width: 38px;
            height: 38px;
            min-height: 38px;
            margin: 1px auto;
        }

        html.menu-rail #layout-menu .menu-inner > .menu-item > .menu-link .menu-icon,
        html.menu-rail .menu-footer .nav-glyph,
        html.menu-rail .menu-footer .nav-link .bx.nav-glyph {
            width: 19px;
            height: 19px;
            font-size: 19px !important;
        }

        html.menu-rail .menu-footer .badge-notifications,
        html.menu-rail #layout-menu .menu-count {
            top: 9px !important;
            left: 21px !important;
            width: 9px;
            height: 9px;
        }

        html.menu-rail #layout-menu .menu-brand .menu-brand-mark {
            width: 26px;
            height: 26px;
        }
}

@media (min-width: 1200px) and (max-width: 1440px) {
    html.menu-rail {
        --menu-w: 58px;
    }

        html.menu-rail #layout-menu .menu-inner {
            padding: 6px 8px !important;
        }

        html.menu-rail #layout-menu .menu-inner > .menu-item > .menu-link,
        html.menu-rail .menu-footer .nav-link,
        html.menu-rail .menu-footer .btn.nav-link {
            width: 34px;
            height: 34px;
            min-height: 34px;
            margin: 1px auto;
        }

        html.menu-rail #layout-menu .menu-inner > .menu-item > .menu-link .menu-icon,
        html.menu-rail .menu-footer .nav-glyph,
        html.menu-rail .menu-footer .nav-link .bx.nav-glyph {
            width: 17px;
            height: 17px;
            font-size: 17px !important;
        }

        html.menu-rail .menu-footer {
            padding: 6px 8px 8px;
        }

        html.menu-rail .menu-footer .badge-notifications,
        html.menu-rail #layout-menu .menu-count {
            top: 8px !important;
            left: 19px !important;
            width: 8px;
            height: 8px;
            border-width: 1.5px;
        }

        html.menu-rail #layout-menu .menu-brand .menu-brand-mark {
            width: 24px;
            height: 24px;
            border-radius: 7px;
        }

        html.menu-rail .menu-rail-toggle {
            width: 26px;
            height: 26px;
            font-size: 16px;
        }
}

/* ---------- toast: at most three at a time, and smaller when zoomed ---------- */
.notiAlert .alert-warning:nth-last-child(n+4) {
    display: none !important;
}

@media (min-width: 1441px) and (max-width: 1599.98px) {
    .notiAlert {
        right: 18px;
        bottom: 18px;
        width: 300px;
    }

        .notiAlert .alert-warning {
            padding: 12px 14px 12px 40px !important;
            border-radius: 14px;
        }

            .notiAlert .alert-warning::before {
                top: 12px;
                left: 12px;
                width: 18px;
                height: 18px;
                font-size: 11px;
            }

            .notiAlert .alert-warning *,
            .notiAlert pre {
                font-size: 12.5px !important;
            }
}

@media (min-width: 1200px) and (max-width: 1440px) {
    .notiAlert {
        right: 14px;
        bottom: 14px;
        width: 260px;
    }

        .notiAlert .alert-warning {
            margin-top: 8px;
            padding: 10px 12px 10px 36px !important;
            border-radius: 12px;
        }

            .notiAlert .alert-warning::before {
                top: 10px;
                left: 10px;
                width: 17px;
                height: 17px;
                border-radius: 5px;
                font-size: 10px;
            }

            .notiAlert .alert-warning *,
            .notiAlert pre {
                font-size: 12px !important;
            }

        /* one line of message preview is enough at this size */
        .notiAlert pre {
            -webkit-line-clamp: 1;
        }

        .notiAlert div.mb-0 a {
            height: 24px;
            margin-top: 7px;
            padding: 0 10px;
            font-size: 11.5px !important;
        }
}

/* ---------- chat: side panels ---------- */
.wa-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.wa-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 16px 10px 10px;
}

    .wa-panel-head h3 {
        margin: 0;
        color: #1d1d1f;
        font-size: 18px;
        font-weight: 600;
        letter-spacing: -.3px;
    }

.wa-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #154fef;
    font-size: 22px;
}

    .wa-back:hover {
        background: rgba(21, 79, 239, .1);
    }

.wa-scroll {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 8px 16px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.wa-action-row,
.wa-contact {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #1d1d1f;
    text-align: left;
    transition: background-color .12s ease;
}

    .wa-action-row:hover,
    .wa-contact:hover {
        background: rgba(118, 118, 128, .08);
    }

.wa-action-row {
    margin: 2px 0 6px;
    font-size: 15px;
    font-weight: 500;
}

.wa-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(180deg, #2d63f5 0%, #154fef 100%);
    color: #fff;
    font-size: 21px;
}

.wa-letter {
    padding: 14px 12px 4px;
    color: #86868b;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
}

.wa-avatar.wa-avatar-md {
    width: 44px;
    height: 44px;
    font-size: 15px;
}

.wa-contact-text {
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.3;
}

    .wa-contact-text b {
        display: block;
        overflow: hidden;
        font-size: 14.5px;
        font-weight: 500;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .wa-contact-text small {
        display: block;
        overflow: hidden;
        color: #8e8e93;
        font-size: 12.5px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.wa-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border: 1.5px solid #c7c7cc;
    border-radius: 50%;
    color: transparent;
    font-size: 16px;
    transition: background-color .12s ease, border-color .12s ease;
}

.wa-contact.is-picked .wa-check {
    border-color: #154fef;
    background: #154fef;
    color: #fff;
}

.wa-group-step {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.wa-picked-wrap {
    padding: 0 16px 12px;
}

.wa-picked-count {
    margin: 0 2px 8px;
    color: #8e8e93;
    font-size: 12px;
    font-weight: 500;
}

.wa-picked {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 118px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.wa-picked-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    height: 34px;
    padding: 0 4px 0 4px;
    border: 1px solid #e5e5ea;
    border-radius: 999px;
    background: #fff;
    color: #1d1d1f;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    animation: wa-chip-in .16s ease-out;
}

@keyframes wa-chip-in {
    from {
        opacity: 0;
        transform: scale(.9);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.wa-avatar.wa-avatar-xs {
    width: 26px;
    height: 26px;
    font-size: 10.5px;
}

.wa-picked-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wa-picked-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(118, 118, 128, .12);
    color: #6e6e73;
    font-size: 16px;
    transition: background-color .12s ease, color .12s ease;
}

    .wa-picked-remove:hover {
        background: #ff3b30;
        color: #fff;
    }

.wa-fab {
    position: absolute;
    right: 18px;
    bottom: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, #2d63f5 0%, #154fef 100%);
    color: #fff;
    font-size: 26px;
    box-shadow: 0 10px 22px -6px rgba(21, 79, 239, .6);
    animation: waPop .18s ease;
}

.wa-group-name {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 24px;
    text-align: center;
}

.wa-group-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: linear-gradient(180deg, #a8b4c8 0%, #8390a8 100%);
    color: #fff;
    font-size: 40px;
}

.wa-group-title {
    width: 100%;
    height: 44px;
    padding: 0 4px;
    border: 0;
    border-bottom: 2px solid #154fef;
    background: transparent;
    color: #1d1d1f;
    font-size: 16px;
    outline: 0;
}

.wa-group-hint {
    margin: 10px 0 22px;
    color: #8e8e93;
    font-size: 13px;
}

.wa-primary {
    min-width: 170px;
    height: 42px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: #154fef;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

    .wa-primary:disabled {
        background: #d1d1d6;
    }

@keyframes waPop {
    from {
        opacity: 0;
        transform: scale(.8);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- chat: messages ---------- */
.wa-msg {
    align-items: center;
    gap: 6px;
}

    .wa-msg.is-mine {
        flex-direction: row-reverse;
        justify-content: flex-start;
    }

.wa-msg-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: #6e6e73;
    font-size: 17px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
    opacity: 0;
    transition: opacity .12s ease;
}

.wa-msg:hover .wa-msg-action {
    opacity: 1;
}

.wa-msg-action:hover {
    color: #154fef;
}

.wa-thread-empty {
    align-self: center;
    margin: 30px 0;
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .92);
    color: #6e6e73;
    font-size: 13px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .06);
}

.wa-quote {
    display: block;
    margin: 2px 0 6px;
    padding: 6px 10px;
    border-left: 3px solid #154fef;
    border-radius: 8px;
    background: rgba(118, 118, 128, .1);
    cursor: pointer;
    line-height: 1.3;
}

    .wa-quote b {
        display: block;
        font-size: 12.5px;
        font-weight: 600;
    }

    .wa-quote span {
        display: -webkit-box;
        overflow: hidden;
        color: #6e6e73;
        font-size: 13px;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

.wa-msg.is-mine .wa-quote {
    border-left-color: rgba(255, 255, 255, .8);
    background: rgba(255, 255, 255, .16);
}

    .wa-msg.is-mine .wa-quote b,
    .wa-msg.is-mine .wa-quote span {
        color: #fff;
    }

.tone-bar-0 { border-left-color: #3b6ef7 !important; }
.tone-bar-1 { border-left-color: #1f9e68 !important; }
.tone-bar-2 { border-left-color: #d9770f !important; }
.tone-bar-3 { border-left-color: #7c45e8 !important; }
.tone-bar-4 { border-left-color: #e0426f !important; }
.tone-bar-5 { border-left-color: #1592ad !important; }

.wa-msg.is-mine .wa-quote[class*="tone-bar-"] {
    border-left-color: rgba(255, 255, 255, .8) !important;
}

.wa-bubble.has-image {
    padding: 4px 4px 6px;
}

    .wa-bubble.has-image .wa-text {
        display: block;
        padding: 4px 7px 0;
    }

    .wa-bubble.has-image .wa-sender {
        padding: 2px 7px 4px;
    }

    .wa-bubble.has-image .wa-quote {
        margin: 2px 2px 6px;
    }

.wa-image {
    display: block;
}

    .wa-image img {
        display: block;
        max-width: min(320px, 100%);
        max-height: 340px;
        border-radius: 14px;
        object-fit: cover;
    }

.wa-file {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 230px;
    margin: 2px 0 4px;
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(118, 118, 128, .1);
    color: inherit;
    text-decoration: none;
}

    .wa-file:hover {
        background: rgba(118, 118, 128, .16);
        color: inherit;
        text-decoration: none;
    }

.wa-msg.is-mine .wa-file {
    background: rgba(255, 255, 255, .16);
}

    .wa-msg.is-mine .wa-file:hover {
        background: rgba(255, 255, 255, .24);
    }

.wa-file-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #fff;
    color: #e0426f;
    font-size: 22px;
}

.wa-file-text {
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.3;
}

    .wa-file-text b {
        display: block;
        overflow: hidden;
        font-size: 13.5px;
        font-weight: 500;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .wa-file-text small {
        font-size: 11.5px;
        opacity: .7;
    }

.wa-file-dl {
    flex: 0 0 auto;
    font-size: 19px;
    opacity: .7;
}

.wa-msg.is-flash .wa-bubble {
    animation: waFlash 1.2s ease;
}

@keyframes waFlash {
    0%, 60% {
        box-shadow: 0 0 0 3px rgba(21, 79, 239, .45);
    }

    100% {
        box-shadow: 0 1px 1px rgba(0, 0, 0, .06);
    }
}

/* ---------- chat: composer ---------- */
.wa-composer {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.wa-compose-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
}

.wa-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6e6e73;
    font-size: 23px;
    transition: color .12s ease, background-color .12s ease;
}

    .wa-tool:hover,
    .wa-tool.is-on {
        background: rgba(118, 118, 128, .1);
        color: #154fef;
    }

.wa-compose-row .wa-send {
    margin-left: 4px;
}

.wa-reply-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 12px;
    border-left: 3px solid #154fef;
    border-radius: 10px;
    background: rgba(118, 118, 128, .1);
    animation: waSlideUp .16s ease;
}

.wa-reply-bar-text {
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.3;
}

    .wa-reply-bar-text b {
        display: block;
        font-size: 12.5px;
        font-weight: 600;
    }

    .wa-reply-bar-text span {
        display: block;
        overflow: hidden;
        color: #6e6e73;
        font-size: 13px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.wa-reply-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6e6e73;
    font-size: 20px;
}

    .wa-reply-close:hover {
        background: rgba(118, 118, 128, .14);
        color: #1d1d1f;
    }

.wa-uploads {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wa-upload {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(118, 118, 128, .1);
    color: #1d1d1f;
    font-size: 13px;
    overflow: hidden;
}

    .wa-upload .bx {
        color: #154fef;
        font-size: 17px;
    }

    .wa-upload.is-failed {
        background: rgba(255, 59, 48, .1);
    }

        .wa-upload.is-failed .bx,
        .wa-upload.is-failed .wa-upload-state {
            color: #d70015;
        }

.wa-upload-name {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wa-upload-state {
    flex: 0 0 auto;
    color: #6e6e73;
    font-size: 12px;
}

.wa-upload-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
}

    .wa-upload-bar span {
        display: block;
        height: 100%;
        background: #154fef;
        transition: width .2s ease;
    }

.wa-emoji-pop {
    position: absolute;
    left: 14px;
    bottom: calc(100% + 8px);
    z-index: 20;
    min-width: 120px;
    min-height: 60px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 16px 40px rgba(0, 0, 0, .18);
    overflow: hidden;
    animation: waSlideUp .16s ease;
}

    .wa-emoji-pop emoji-picker {
        --border-size: 0;
        --background: #fff;
        --num-columns: 9;
        --emoji-size: 1.35rem;
        --indicator-color: #154fef;
        --input-border-radius: 10px;
        --input-border-color: transparent;
        --input-font-size: 13px;
        --outline-color: rgba(21, 79, 239, .3);
        width: 360px;
        height: 380px;
    }

@keyframes waSlideUp {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- chat: drag & drop ---------- */
.wa-drop-hint {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 12px;
    border: 2px dashed rgba(21, 79, 239, .5);
    border-radius: 18px;
    background: rgba(244, 245, 248, .92);
    color: #154fef;
    font-size: 15px;
    font-weight: 500;
    pointer-events: none;
}

    .wa-drop-hint .bx {
        font-size: 40px;
    }

.wa-main.can-drop.is-dragover .wa-drop-hint {
    display: flex;
}

@media (min-width: 1200px) and (max-width: 1440px) {
    .wa-emoji-pop emoji-picker {
        --num-columns: 8;
        width: 320px;
        height: 340px;
    }

    .wa-image img {
        max-width: min(260px, 100%);
        max-height: 280px;
    }
}

/* ---------- chat: list header, select mode, row menu ---------- */
.wa-side-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wa-new-btn,
.wa-soft-btn,
.wa-danger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    font-size: 20px;
    transition: background-color .15s ease, color .15s ease, transform .15s ease, opacity .15s ease;
}

.wa-new-btn {
    background: #154fef;
    color: #fff;
    font-size: 22px;
    box-shadow: 0 2px 6px rgba(21, 79, 239, .3);
}

    .wa-new-btn:hover {
        background: #0f42d1;
        transform: scale(1.05);
    }

.wa-soft-btn {
    background: rgba(118, 118, 128, .12);
    color: #3a3a3c;
}

    .wa-soft-btn:hover {
        background: rgba(118, 118, 128, .2);
        color: #1d1d1f;
    }

.wa-danger-btn {
    background: rgba(255, 59, 48, .1);
    color: #ff3b30;
}

    .wa-danger-btn:hover {
        background: #ff3b30;
        color: #fff;
    }

    .wa-soft-btn:disabled,
    .wa-danger-btn:disabled {
        background: rgba(118, 118, 128, .08);
        color: #c7c7cc;
        cursor: default;
    }

.wa-select-head {
    justify-content: flex-start;
    gap: 6px;
    padding-left: 10px;
}

.wa-select-count {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: #1d1d1f;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.3px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wa-select-all {
    flex: 0 0 auto;
    height: 30px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #154fef;
    font-size: 13px;
    font-weight: 500;
}

    .wa-select-all:hover {
        background: rgba(21, 79, 239, .1);
    }

.wa-item .wa-check {
    margin-right: -2px;
}

.wa-item.is-selected {
    background: rgba(21, 79, 239, .08);
}

    .wa-item.is-selected .wa-check {
        border-color: #154fef;
        background: #154fef;
        color: #fff;
    }

.wa-menu {
    position: absolute;
    z-index: 30;
    width: 210px;
    padding: 6px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .14), 0 0 0 1px rgba(0, 0, 0, .05);
    animation: wa-menu-in .12s ease-out;
}

    .wa-menu button {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        height: 38px;
        padding: 0 10px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #1d1d1f;
        font-size: 14px;
        text-align: left;
    }

        .wa-menu button .bx {
            width: 18px;
            color: #6e6e73;
            font-size: 18px;
        }

        .wa-menu button:hover {
            background: rgba(118, 118, 128, .1);
        }

        .wa-menu button.is-danger,
        .wa-menu button.is-danger .bx {
            color: #ff3b30;
        }

        .wa-menu button.is-danger:hover {
            background: rgba(255, 59, 48, .08);
        }

.wa-head-menu.is-on {
    background: rgba(21, 79, 239, .1);
}

@keyframes wa-menu-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (min-width: 1200px) and (max-width: 1440px) {
    .wa-new-btn,
    .wa-soft-btn,
    .wa-danger-btn {
        width: 30px;
        height: 30px;
        font-size: 18px;
    }

    .wa-new-btn {
        font-size: 20px;
    }

    .wa-select-count {
        font-size: 15px;
    }

    .wa-menu button {
        height: 34px;
        font-size: 13px;
    }
}

/* ---------- chat: send preview (stage) ---------- */
.wa-stage {
    position: absolute;
    inset: 0;
    z-index: 25;
    display: flex;
    flex-direction: column;
    background: #f4f5f8;
    animation: wa-stage-in .16s ease-out;
}

@keyframes wa-stage-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.wa-stage-top {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    background: #fff;
}

.wa-stage-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #3a3a3c;
    font-size: 26px;
}

    .wa-stage-close:hover {
        background: rgba(118, 118, 128, .12);
    }

.wa-stage-title {
    min-width: 0;
    line-height: 1.3;
}

    .wa-stage-title b {
        display: block;
        overflow: hidden;
        color: #1d1d1f;
        font-size: 15px;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .wa-stage-title small {
        color: #8e8e93;
        font-size: 12px;
    }

.wa-stage-view {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 0;
    padding: 24px;
}

    .wa-stage-view img {
        max-width: 100%;
        max-height: 100%;
        border-radius: 12px;
        object-fit: contain;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    }

    .wa-stage-view iframe {
        width: min(900px, 100%);
        height: 100%;
        border: 0;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
    }

.wa-stage-file {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    max-width: 360px;
    padding: 32px 36px;
    border-radius: 20px;
    background: #fff;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

    .wa-stage-file b {
        max-width: 100%;
        overflow: hidden;
        color: #1d1d1f;
        font-size: 15px;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .wa-stage-file small {
        color: #8e8e93;
        font-size: 12.5px;
    }

    .wa-stage-file p {
        margin: 10px 0 0;
        color: #6e6e73;
        font-size: 13px;
    }

.wa-stage-file-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 10px;
    border-radius: 18px;
    background: rgba(21, 79, 239, .1);
    color: #154fef;
    font-size: 40px;
}

.wa-stage-bottom {
    flex: 0 0 auto;
    padding: 12px 20px 16px;
    border-top: 1px solid rgba(0, 0, 0, .06);
    background: #fff;
}

.wa-stage-caption {
    max-width: 720px;
    margin: 0 auto 12px;
}

    .wa-stage-caption input {
        width: 100%;
        height: 42px;
        padding: 0 18px;
        border: 1px solid #e3e3e8;
        border-radius: 999px;
        background: #fff;
        color: #1d1d1f;
        font-size: 14.5px;
        outline: 0;
        transition: border-color .15s ease, box-shadow .15s ease;
    }

        .wa-stage-caption input:focus {
            border-color: #154fef;
            box-shadow: 0 0 0 3px rgba(21, 79, 239, .1);
        }

.wa-stage-strip {
    display: flex;
    align-items: center;
    gap: 16px;
}

.wa-stage-thumbs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.wa-stage-thumb,
.wa-stage-add {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 10px;
    cursor: pointer;
}

.wa-stage-thumb {
    border: 2px solid transparent;
    background: rgba(118, 118, 128, .12);
    color: #154fef;
    font-size: 24px;
    transition: border-color .12s ease;
}

    .wa-stage-thumb img {
        width: 100%;
        height: 100%;
        border-radius: 8px;
        object-fit: cover;
    }

    .wa-stage-thumb.is-active {
        border-color: #154fef;
    }

.wa-stage-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #3a3a3c;
    color: #fff;
    font-size: 13px;
    opacity: 0;
    transition: opacity .12s ease;
}

.wa-stage-thumb:hover .wa-stage-remove,
.wa-stage-thumb.is-active .wa-stage-remove {
    opacity: 1;
}

.wa-stage-add {
    padding: 0;
    border: 1.5px dashed #c7c7cc;
    background: transparent;
    color: #6e6e73;
    font-size: 24px;
}

    .wa-stage-add:hover {
        border-color: #154fef;
        color: #154fef;
    }

.wa-send.wa-stage-send {
    position: relative;
    width: 50px;
    height: 50px;
    font-size: 21px;
}

.wa-stage-count {
    position: absolute;
    top: -4px;
    right: -4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 2px solid #fff;
    border-radius: 999px;
    background: #1d1d1f;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

/* ---------- chat: uploading bubbles ---------- */
.wa-image.is-pending {
    position: relative;
}

    .wa-image.is-pending img {
        filter: brightness(.72);
    }

    .wa-image.is-pending .wa-progress {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 56px;
        height: 56px;
        margin: -28px 0 0 -28px;
        border-radius: 50%;
        background: rgba(0, 0, 0, .45);
    }

.wa-progress {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    color: #fff;
}

.wa-progress-ring {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    animation: wa-spin 1.1s linear infinite;
}

.wa-progress-track,
.wa-progress-arc {
    fill: none;
    stroke-width: 3;
}

.wa-progress-track {
    stroke: rgba(255, 255, 255, .28);
}

.wa-progress-arc {
    stroke: #fff;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset .25s ease;
}

@keyframes wa-spin {
    to {
        transform: rotate(360deg);
    }
}

.wa-progress-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 20px;
}

.wa-progress.is-failed .wa-progress-btn {
    width: 36px;
    height: 36px;
    background: #ff3b30;
    color: #fff;
}

.wa-file.is-pending .wa-progress {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(118, 118, 128, .16);
    color: #154fef;
}

    .wa-file.is-pending .wa-progress-track {
        stroke: rgba(21, 79, 239, .18);
    }

    .wa-file.is-pending .wa-progress-arc {
        stroke: #154fef;
    }

.wa-msg.is-mine .wa-file.is-pending .wa-progress {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

    .wa-msg.is-mine .wa-file.is-pending .wa-progress-track {
        stroke: rgba(255, 255, 255, .3);
    }

    .wa-msg.is-mine .wa-file.is-pending .wa-progress-arc {
        stroke: #fff;
    }

.wa-file.is-pending .wa-progress.is-failed {
    background: transparent;
}

.wa-upload-error {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 2px 2px;
    padding: 5px 8px;
    border-radius: 8px;
    background: rgba(255, 59, 48, .9);
    color: #fff;
    font-size: 12.5px;
}

    .wa-upload-error button {
        margin-left: auto;
        padding: 0 4px;
        border: 0;
        background: transparent;
        color: #fff;
        font-size: 12.5px;
        font-weight: 600;
        text-decoration: underline;
    }

.wa-time .bx-time-five {
    margin-right: 2px;
    font-size: 11px;
    vertical-align: -1px;
}

/* boxicons pins every icon to 1.15rem; inside chat the icon follows its button */
:where(.wa-chat) .bx {
    font-size: inherit;
}

.wa-item + .wa-item {
    margin-top: 3px;
}

.wa-empty-cta .bx {
    font-size: 18px;
}

.wa-stage-file-icon.is-pdf {
    background: rgba(224, 66, 111, .1);
    color: #e0426f;
}

@media (min-width: 1200px) and (max-width: 1440px) {
    .wa-stage-view {
        padding: 16px;
    }

    .wa-stage-thumb,
    .wa-stage-add {
        width: 46px;
        height: 46px;
    }

    .wa-send.wa-stage-send {
        width: 44px;
        height: 44px;
        font-size: 19px;
    }

    .wa-stage-caption input {
        height: 38px;
        font-size: 13.5px;
    }
}

/* ---------- chat: compact at 150% ---------- */
@media (min-width: 1200px) and (max-width: 1440px) {
    .wa-side {
        flex-basis: 320px;
        width: 320px;
    }

    .wa-side-head {
        padding: 12px 12px 8px 16px;
    }

    .wa-side-title {
        font-size: 19px;
    }

    .wa-new-btn,
    .wa-soft-btn,
    .wa-danger-btn {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }

    .wa-new-btn {
        font-size: 18px;
    }

    .wa-search {
        margin: 0 12px 8px;
    }

        .wa-search input {
            height: 30px;
            padding: 0 28px 0 32px;
            font-size: 12.5px;
        }

        .wa-search > .bx-search {
            left: 11px;
            font-size: 14px;
        }

    .wa-filters {
        gap: 5px;
        padding: 0 12px 8px;
    }

    .wa-filter {
        height: 25px;
        padding: 0 11px;
        font-size: 11.5px;
    }

    .wa-list {
        padding: 0 6px 10px;
    }

    .wa-item {
        gap: 10px;
        padding: 7px 8px;
        border-radius: 10px;
    }

    .wa-avatar {
        width: 38px;
        height: 38px;
        font-size: 13.5px;
    }

        .wa-avatar.is-group .bx {
            font-size: 19px;
        }

    .wa-item-name {
        font-size: 13px;
    }

    .wa-item-time {
        font-size: 10.5px;
    }

    .wa-item-preview {
        font-size: 12px;
    }

    .wa-badge {
        min-width: 17px;
        height: 17px;
        padding: 0 5px;
        font-size: 10px;
    }

    .wa-item-caret {
        height: 18px;
        font-size: 18px;
    }

    .wa-item:hover .wa-item-caret,
    .wa-item.is-menu-open .wa-item-caret {
        width: 18px;
    }

    .wa-panel-head {
        padding: 12px 12px 8px 8px;
    }

        .wa-panel-head h3 {
            font-size: 15px;
        }

    .wa-back {
        width: 30px;
        height: 30px;
        font-size: 19px;
    }

    .wa-contact {
        gap: 10px;
        padding: 6px 8px;
    }

    .wa-avatar.wa-avatar-md,
    .wa-action-icon {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .wa-action-row {
        font-size: 13px;
    }

    .wa-contact-text b {
        font-size: 13px;
    }

    .wa-contact-text small {
        font-size: 11px;
    }

    .wa-letter {
        padding: 10px 10px 3px;
        font-size: 10.5px;
    }

    .wa-head {
        gap: 10px;
        min-height: 50px;
        padding: 7px 12px 7px 16px;
    }

    .wa-avatar.wa-avatar-sm {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .wa-head-text h3 {
        font-size: 13.5px;
    }

    .wa-head-text small {
        font-size: 11px;
    }

    .wa-icon-btn {
        width: 30px;
        height: 30px;
        font-size: 18px;
    }

    .wa-day {
        margin: 10px 0 6px;
    }

        .wa-day span {
            padding: 3px 9px;
            font-size: 10.5px;
        }

    .wa-msg.is-first {
        margin-top: 8px;
    }

    .wa-bubble {
        padding: 5px 9px 5px 10px;
        border-radius: 15px;
        font-size: 13px;
    }

    .wa-time {
        top: 6px;
        margin-left: 8px;
        font-size: 10px;
    }

    .wa-sender {
        font-size: 11.5px;
    }

    .wa-quote {
        padding: 5px 9px;
    }

        .wa-quote b {
            font-size: 11.5px;
        }

        .wa-quote span {
            font-size: 12px;
        }

    .wa-msg-action {
        width: 26px;
        height: 26px;
        font-size: 15px;
    }

    .wa-file {
        gap: 8px;
        min-width: 200px;
        padding: 7px 9px;
    }

    .wa-file-icon,
    .wa-file.is-pending .wa-progress {
        width: 32px;
        height: 32px;
        font-size: 19px;
    }

    .wa-file-text b {
        font-size: 12.5px;
    }

    .wa-file-text small {
        font-size: 10.5px;
    }

    .wa-composer {
        gap: 6px;
        padding: 7px 12px 9px;
    }

    .wa-tool {
        width: 34px;
        height: 36px;
        font-size: 20px;
    }

    .wa-input {
        padding: 6px 14px;
        border-radius: 18px;
    }

        .wa-input textarea {
            min-height: 20px;
            font-size: 13px;
            line-height: 20px;
        }

    .wa-send {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .wa-reply-bar {
        padding: 6px 6px 6px 10px;
    }

    .wa-reply-bar-text b {
        font-size: 11.5px;
    }

    .wa-reply-bar-text span {
        font-size: 12px;
    }

    .wa-menu button {
        height: 32px;
        font-size: 12.5px;
    }
}

.wa-chat .wa-side-title {
    font-size: 24px !important;
}

.wa-chat .wa-head-text h3 {
    font-size: 15.5px !important;
}

.wa-chat .wa-panel-head h3 {
    font-size: 18px !important;
}

.wa-chat .wa-empty h3 {
    font-size: 24px !important;
}

@media (min-width: 1200px) and (max-width: 1440px) {
    .wa-chat .wa-side-title {
        font-size: 19px !important;
    }

    .wa-chat .wa-head-text h3 {
        font-size: 13.5px !important;
    }

    .wa-chat .wa-panel-head h3 {
        font-size: 15px !important;
    }

    .wa-chat .wa-empty h3 {
        font-size: 21px !important;
    }
}

/* ---------- chat: composer as one floating bar ---------- */
.wa-chat .wa-composer {
    gap: 6px;
    padding: 6px 16px 12px;
    border-top: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.wa-chat .wa-compose-row {
    align-items: flex-end;
    gap: 2px;
    padding: 4px 5px;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px rgba(0, 0, 0, .05);
    transition: box-shadow .15s ease;
}

    .wa-chat .wa-compose-row:focus-within {
        box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 0 0 1px rgba(0, 0, 0, .12);
    }

.wa-chat .wa-compose-row .wa-tool {
    width: 38px;
    height: 38px;
    font-size: 22px;
}

.wa-chat .wa-input,
.wa-chat .wa-input:focus-within {
    padding: 8px 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.wa-chat .wa-compose-row .wa-send {
    width: 38px;
    height: 38px;
    margin-left: 2px;
    font-size: 17px;
    box-shadow: none;
}

    .wa-chat .wa-compose-row .wa-send:disabled {
        background: transparent;
        color: #aeaeb2;
    }

.wa-chat .wa-composer .wa-reply-bar {
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px rgba(0, 0, 0, .05);
}

@media (min-width: 1200px) and (max-width: 1440px) {
    .wa-chat .wa-composer {
        padding: 4px 12px 9px;
    }

    .wa-chat .wa-compose-row {
        padding: 3px 4px;
        border-radius: 22px;
    }

        .wa-chat .wa-compose-row .wa-tool,
        .wa-chat .wa-compose-row .wa-send {
            width: 32px;
            height: 32px;
        }

        .wa-chat .wa-compose-row .wa-tool {
            font-size: 19px;
        }

        .wa-chat .wa-compose-row .wa-send {
            font-size: 15px;
        }

    .wa-chat .wa-input,
    .wa-chat .wa-input:focus-within {
        padding: 6px 4px;
    }
}

/* ---------- chat: image bubbles hug the picture ---------- */
.wa-bubble.has-image {
    width: min-content;
    max-width: none;
}

    .wa-bubble.has-image .wa-image img {
        width: auto;
        max-width: 320px;
        max-height: 340px;
    }

    .wa-bubble.has-image .wa-quote,
    .wa-bubble.has-image .wa-sender {
        min-width: 0;
    }

body:has(.wa-chat) #backToUp {
    display: none !important;
}

@media (min-width: 1200px) and (max-width: 1440px) {
    .wa-bubble.has-image .wa-image img {
        max-width: 260px;
        max-height: 280px;
    }
}

/* ---------- chat: neutral palette ---------- */
.wa-chat {
    --wa-ink: #1d1d1f;
    --wa-ink-soft: #3a3a3c;
    --wa-mine: #e2e7ee;
    --wa-mine-line: rgba(0, 0, 0, .08);
    --wa-hover: rgba(118, 118, 128, .12);
    --wa-active: rgba(118, 118, 128, .16);
}

.wa-chat .wa-msg.is-mine .wa-bubble {
    background: var(--wa-mine);
    color: var(--wa-ink);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

.wa-chat .wa-msg.is-mine .wa-time {
    color: #6e6e73;
}

.wa-chat .wa-msg.is-mine .wa-quote {
    border-left-color: #8e8e93;
    background: rgba(0, 0, 0, .05);
}

    .wa-chat .wa-msg.is-mine .wa-quote b {
        color: var(--wa-ink);
    }

    .wa-chat .wa-msg.is-mine .wa-quote span {
        color: #6e6e73;
    }

.wa-chat .wa-msg.is-mine .wa-quote[class*="tone-bar-"] {
    border-left-color: #8e8e93 !important;
}

.wa-chat .wa-msg.is-mine .wa-file {
    background: rgba(255, 255, 255, .7);
}

    .wa-chat .wa-msg.is-mine .wa-file:hover {
        background: #fff;
    }

.wa-chat .wa-msg.is-mine .wa-file.is-pending .wa-progress {
    background: rgba(0, 0, 0, .06);
    color: var(--wa-ink);
}

    .wa-chat .wa-msg.is-mine .wa-file.is-pending .wa-progress-track {
        stroke: rgba(0, 0, 0, .12);
    }

    .wa-chat .wa-msg.is-mine .wa-file.is-pending .wa-progress-arc {
        stroke: var(--wa-ink);
    }

.wa-chat .wa-quote,
.wa-chat .wa-reply-bar {
    border-left-color: #8e8e93;
}

.wa-chat .wa-msg.is-flash .wa-bubble {
    animation-name: waFlashNeutral;
}

@keyframes waFlashNeutral {
    0%, 60% {
        box-shadow: 0 0 0 3px rgba(0, 0, 0, .18);
    }

    100% {
        box-shadow: 0 1px 1px rgba(0, 0, 0, .06);
    }
}

.wa-chat .wa-send,
.wa-chat .wa-compose-row .wa-send,
.wa-chat .wa-new-btn,
.wa-chat .wa-fab,
.wa-chat .wa-primary,
.wa-chat .wa-action-icon {
    background: var(--wa-ink);
    color: #fff;
    box-shadow: none;
}

    .wa-chat .wa-send:hover:not(:disabled),
    .wa-chat .wa-new-btn:hover,
    .wa-chat .wa-fab:hover,
    .wa-chat .wa-primary:hover:not(:disabled) {
        background: var(--wa-ink-soft);
    }

.wa-chat .wa-compose-row .wa-send:disabled {
    background: transparent;
    color: #aeaeb2;
}

.wa-chat .wa-filter.is-active {
    background: var(--wa-ink);
    color: #fff;
}

.wa-chat .wa-item.is-active {
    background: var(--wa-active);
}

.wa-chat .wa-item.is-selected {
    background: var(--wa-hover);
}

.wa-chat .wa-item.is-unread .wa-item-time {
    color: var(--wa-ink);
}

.wa-chat .wa-item.is-selected .wa-check,
.wa-chat .wa-contact.is-picked .wa-check {
    border-color: var(--wa-ink);
    background: var(--wa-ink);
}

.wa-chat .wa-icon-btn,
.wa-chat .wa-back,
.wa-chat .wa-select-all {
    color: var(--wa-ink);
}

    .wa-chat .wa-icon-btn:hover,
    .wa-chat .wa-back:hover,
    .wa-chat .wa-select-all:hover,
    .wa-chat .wa-head-menu.is-on {
        background: var(--wa-hover);
    }

.wa-chat .wa-tool:hover,
.wa-chat .wa-tool.is-on,
.wa-chat .wa-msg-action:hover {
    color: var(--wa-ink);
}

.wa-chat .wa-group-title {
    border-bottom-color: var(--wa-ink);
}

.wa-chat .wa-drop-hint {
    border-color: rgba(0, 0, 0, .25);
    color: var(--wa-ink);
}

.wa-chat .wa-stage-thumb {
    color: var(--wa-ink-soft);
}

    .wa-chat .wa-stage-thumb.is-active {
        border-color: var(--wa-ink);
    }

.wa-chat .wa-stage-add:hover {
    border-color: var(--wa-ink);
    color: var(--wa-ink);
}

.wa-chat .wa-stage-caption input:focus {
    border-color: #c7c7cc;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .05);
}

.wa-chat .wa-stage-file-icon {
    background: rgba(118, 118, 128, .12);
    color: var(--wa-ink-soft);
}

    .wa-chat .wa-stage-file-icon.is-pdf {
        background: rgba(224, 66, 111, .1);
        color: #e0426f;
    }

.wa-chat .wa-emoji-pop emoji-picker {
    --indicator-color: var(--wa-ink);
    --outline-color: rgba(0, 0, 0, .2);
}

/* ---------- chat: image albums ---------- */
.wa-bubble.has-album {
    width: auto;
    padding: 4px 4px 6px;
}

.wa-album {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    width: 280px;
    border-radius: 14px;
    overflow: hidden;
}

.wa-album-tile {
    position: relative;
    display: block;
    height: 138px;
    background: rgba(0, 0, 0, .06);
    overflow: hidden;
}

    .wa-album-tile img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .2s ease;
    }

    .wa-album-tile:hover img {
        transform: scale(1.03);
    }

.wa-album.is-2 .wa-album-tile {
    height: 180px;
}

.wa-album.is-3 .wa-album-tile:first-child {
    grid-column: 1 / -1;
    height: 170px;
}

.wa-album-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.5px;
}

/* ---------- chat: image viewer ---------- */
.wa-viewer {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    background: rgba(20, 20, 22, .94);
    animation: wa-stage-in .16s ease-out;
}

.wa-viewer-top {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 12px 14px 12px 20px;
    color: #fff;
}

.wa-viewer-title {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.3;
}

    .wa-viewer-title b {
        display: block;
        font-size: 14px;
        font-weight: 600;
    }

    .wa-viewer-title small {
        color: rgba(255, 255, 255, .6);
        font-size: 12px;
    }

.wa-viewer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 22px;
    text-decoration: none;
}

    .wa-viewer-btn:hover {
        background: rgba(255, 255, 255, .12);
        color: #fff;
    }

.wa-viewer-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-height: 0;
    padding: 8px 72px;
}

    .wa-viewer-stage img {
        max-width: 100%;
        max-height: 100%;
        border-radius: 6px;
        object-fit: contain;
        box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
    }

.wa-viewer-nav {
    position: absolute;
    top: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 28px;
}

    .wa-viewer-nav:hover {
        background: rgba(255, 255, 255, .22);
    }

    .wa-viewer-nav.is-prev {
        left: 16px;
    }

    .wa-viewer-nav.is-next {
        right: 16px;
    }

.wa-viewer-strip {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 12px 16px 16px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.wa-viewer-thumb {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    background: none;
    opacity: .55;
    overflow: hidden;
    transition: opacity .15s ease, border-color .15s ease;
}

    .wa-viewer-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .wa-viewer-thumb:hover {
        opacity: .85;
    }

    .wa-viewer-thumb.is-active {
        border-color: #fff;
        opacity: 1;
    }

@media (min-width: 1200px) and (max-width: 1440px) {
    .wa-album {
        width: 236px;
    }

    .wa-album-tile {
        height: 116px;
    }

    .wa-album.is-2 .wa-album-tile {
        height: 150px;
    }

    .wa-album.is-3 .wa-album-tile:first-child {
        height: 140px;
    }

    .wa-album-more {
        font-size: 22px;
    }

    .wa-viewer-stage {
        padding: 6px 60px;
    }

    .wa-viewer-thumb {
        width: 44px;
        height: 44px;
    }
}

/* ---------- chat: soft blue own bubbles, time over pictures ---------- */
.wa-chat {
    --wa-mine: #e3ecfc;
}

.wa-chat .wa-msg.is-mine .wa-quote,
.wa-chat .wa-msg.is-mine .wa-quote[class*="tone-bar-"] {
    border-left-color: #8ea6d8 !important;
    background: rgba(21, 79, 239, .06);
}

.wa-chat .wa-msg.is-mine .wa-time {
    color: #6b7a99;
}

.wa-chat .wa-bubble.has-image.no-caption {
    position: relative;
    padding: 4px;
}

    .wa-chat .wa-bubble.has-image.no-caption .wa-time,
    .wa-chat .wa-msg.is-mine .wa-bubble.has-image.no-caption .wa-time {
        position: absolute;
        top: auto;
        right: 10px;
        bottom: 10px;
        float: none;
        margin: 0;
        padding: 3px 7px;
        border-radius: 9px;
        background: rgba(0, 0, 0, .42);
        color: #fff;
        line-height: 1.1;
        pointer-events: none;
    }

.wa-chat .wa-bubble.has-image:not(.no-caption) {
    position: relative;
    padding-bottom: 7px;
}

    .wa-chat .wa-bubble.has-image:not(.no-caption) .wa-text {
        display: block;
        padding: 6px 7px 0;
    }

        .wa-chat .wa-bubble.has-image:not(.no-caption) .wa-text::after {
            content: '';
            display: inline-block;
            width: 42px;
        }

    .wa-chat .wa-bubble.has-image:not(.no-caption) .wa-time {
        position: absolute;
        top: auto;
        right: 11px;
        bottom: 8px;
        float: none;
        margin: 0;
    }

/* ---------- chat: controls keep the brand blue ---------- */
.wa-chat .wa-send,
.wa-chat .wa-compose-row .wa-send,
.wa-chat .wa-fab,
.wa-chat .wa-action-icon {
    background: linear-gradient(180deg, #2d63f5 0%, #154fef 100%);
    color: #fff;
}

.wa-chat .wa-new-btn,
.wa-chat .wa-primary,
.wa-chat .wa-empty-cta {
    background: #154fef;
    color: #fff;
}

    .wa-chat .wa-send:hover:not(:disabled),
    .wa-chat .wa-new-btn:hover,
    .wa-chat .wa-fab:hover,
    .wa-chat .wa-primary:hover:not(:disabled),
    .wa-chat .wa-empty-cta:hover {
        background: #0f42d1;
    }

.wa-chat .wa-compose-row .wa-send:disabled {
    background: transparent;
    color: #aeaeb2;
}

.wa-chat .wa-filter.is-active {
    background: rgba(21, 79, 239, .12);
    color: #154fef;
}

.wa-chat .wa-item.is-active {
    background: rgba(21, 79, 239, .1);
}

.wa-chat .wa-item.is-selected {
    background: rgba(21, 79, 239, .08);
}

.wa-chat .wa-item.is-unread .wa-item-time {
    color: #154fef;
}

.wa-chat .wa-item.is-selected .wa-check,
.wa-chat .wa-contact.is-picked .wa-check {
    border-color: #154fef;
    background: #154fef;
}

.wa-chat .wa-icon-btn,
.wa-chat .wa-back,
.wa-chat .wa-select-all {
    color: #154fef;
}

    .wa-chat .wa-icon-btn:hover,
    .wa-chat .wa-back:hover,
    .wa-chat .wa-select-all:hover,
    .wa-chat .wa-head-menu.is-on {
        background: rgba(21, 79, 239, .1);
    }

.wa-chat .wa-tool:hover,
.wa-chat .wa-tool.is-on,
.wa-chat .wa-msg-action:hover {
    color: #154fef;
}

.wa-chat .wa-group-title {
    border-bottom-color: #154fef;
}

.wa-chat .wa-stage-thumb.is-active {
    border-color: #154fef;
}

.wa-chat .wa-stage-add:hover {
    border-color: #154fef;
    color: #154fef;
}

.wa-chat .wa-emoji-pop emoji-picker {
    --indicator-color: #154fef;
    --outline-color: rgba(21, 79, 239, .3);
}

.wa-chat .wa-bubble.has-file {
    position: relative;
    padding-bottom: 7px;
}

    .wa-chat .wa-bubble.has-file.no-caption {
        padding-bottom: 22px;
    }

    .wa-chat .wa-bubble.has-file .wa-text {
        display: block;
        padding: 2px 2px 0;
    }

        .wa-chat .wa-bubble.has-file .wa-text::after {
            content: '';
            display: inline-block;
            width: 42px;
        }

    .wa-chat .wa-bubble.has-file .wa-time {
        position: absolute;
        top: auto;
        right: 11px;
        bottom: 7px;
        float: none;
        margin: 0;
    }

.wa-chat .wa-kind {
    margin-right: 4px;
    color: #8e8e93;
    font-size: 15px;
    vertical-align: -2px;
}

    .wa-chat .wa-kind.bxs-file-pdf {
        color: #e0426f;
    }

.wa-chat .wa-item-preview .wa-hit {
    border-radius: 3px;
    background: rgba(21, 79, 239, .12);
    color: #1d1d1f;
    font-weight: 600;
}

/* fabric swatches fill the rounded card at any width */
.layout-page .product-grid.is-fabric:not(.horizontal) > .product-item .productLink img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
}

/* ---------- quick view: fits short screens, actions move under the tags ---------- */
.quick-sheet .quick-view-actions {
    display: none;
}

@media (min-width: 1200px) and (max-width: 1440px), (max-height: 820px) {
    .quick-sheet .modal-dialog {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .quick-sheet .modal-header {
        padding: 14px 20px 8px;
    }

    .quick-sheet .btn-close {
        top: 12px;
    }

    .quick-sheet .modal-body {
        padding: 0 20px 16px;
    }

    .quick-sheet .modal-footer {
        display: none;
    }

    .quick-sheet .quick-view {
        min-height: 0;
        max-height: calc(100vh - 124px);
    }

    .quick-sheet .quick-view-stage {
        min-height: 0;
        padding: 12px;
    }

        .quick-sheet .quick-view-stage img {
            max-height: calc(100vh - 264px);
        }

    .quick-sheet .quick-view-thumbs button {
        width: 44px;
        height: 56px;
    }

    .quick-sheet .quick-view-info {
        max-height: calc(100vh - 124px);
        padding: 16px 18px 0;
        overflow: hidden;
    }

    .quick-sheet .quick-view-name {
        font-size: 16px;
    }

    .quick-sheet .quick-view-meta {
        margin-bottom: 12px;
        font-size: 12px;
    }

    .quick-sheet .quick-view-tags {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
    }

    .quick-sheet .quick-view-tag {
        min-height: 34px;
        padding: 6px 12px;
    }

        .quick-sheet .quick-view-tag span,
        .quick-sheet .quick-view-tag b {
            font-size: 12px;
        }

    .quick-sheet .quick-view-actions {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        flex: 0 0 auto;
        margin-top: auto;
        padding: 12px 0 2px;
        background: #fff;
    }

        .quick-sheet .quick-view-actions .btn {
            height: 36px;
            padding: 0 16px;
            border-radius: 999px;
            font-size: 13px;
            font-weight: 500;
        }

        .quick-sheet .quick-view-actions .btn-outline-secondary {
            border: 0;
            background: #f5f5f7;
            color: #1d1d1f;
        }
}

/* ---------- filters & sheet modals: compact at 125% ---------- */
@media (min-width: 1441px) and (max-width: 1599.98px) {
    #productFilters.filters-sheet .modal-header {
        padding: 18px 18px 10px;
    }

        #productFilters.filters-sheet .modal-header h1 {
            font-size: 18px !important;
        }

    #productFilters.filters-sheet .accordion-button {
        height: 42px;
        padding: 0 14px;
        font-size: 14px;
    }

        #productFilters.filters-sheet .accordion-button .color {
            font-size: 12.5px;
        }

    #productFilters.filters-sheet .avl-search .form-control {
        height: 32px;
        font-size: 12.5px;
    }

    #productFilters.filters-sheet .avl-label {
        height: 36px;
        min-height: 36px;
        padding: 0 18px;
        font-size: 13.5px;
    }

    #productFilters.filters-sheet .modal-footer {
        padding: 10px 14px;
    }

    #productFilters.filters-sheet .filters-apply {
        height: 40px;
        font-size: 14px;
    }

    #productFilters.filters-sheet .filters-ghost {
        font-size: 13px;
    }

    #bulkTags.full-modal .modal-footer,
    #editFiltre.full-modal .modal-footer {
        padding: 10px 18px 14px !important;
    }

    #bulkTags .bulk-tags-hint {
        margin-bottom: 8px !important;
        padding: 8px 12px;
        font-size: 11.5px;
        line-height: 1.45;
    }

        #bulkTags .bulk-tags-hint small {
            font-size: 11.5px;
            line-height: 1.45;
        }

    #bulkTags .modal-footer .btn-primary,
    #editFiltre .modal-footer .btn,
    #createCollection .modal-footer .btn,
    #addCategory .modal-footer .btn {
        height: 40px;
        font-size: 14px;
    }
}

/* ---------- filters & sheet modals: compact at 150% ---------- */
@media (min-width: 1200px) and (max-width: 1440px) {
    #productFilters.filters-sheet .modal-header {
        padding: 14px 16px 8px;
    }

        #productFilters.filters-sheet .modal-header h1 {
            font-size: 16px !important;
        }

    #productFilters.filters-sheet .filters-body {
        padding: 0 12px 14px;
    }

    #productFilters.filters-sheet .accordion-button {
        height: 36px;
        padding: 0 12px;
        font-size: 12.5px;
    }

        #productFilters.filters-sheet .accordion-button::after {
            width: 6px;
            height: 6px;
        }

        #productFilters.filters-sheet .accordion-button .color {
            font-size: 11.5px;
        }

    #productFilters.filters-sheet .avl-search {
        margin: 0 14px 4px;
    }

        #productFilters.filters-sheet .avl-search .form-control {
            height: 28px;
            font-size: 12px;
        }

    #productFilters.filters-sheet .avl-label {
        height: 30px;
        min-height: 30px;
        gap: 8px;
        padding: 0 14px;
        font-size: 12.5px;
    }


    #productFilters.filters-sheet .accordion-body {
        padding-bottom: 4px;
    }

    #productFilters.filters-sheet .modal-footer {
        gap: 8px;
        padding: 8px 12px;
    }

    #productFilters.filters-sheet .filters-apply {
        height: 36px;
        font-size: 13px;
    }

    #productFilters.filters-sheet .filters-ghost {
        font-size: 12.5px;
    }

    #bulkTags.full-modal .modal-footer,
    #editFiltre.full-modal .modal-footer {
        padding: 8px 14px 12px !important;
    }

    #bulkTags .bulk-tags-hint {
        margin-bottom: 8px !important;
        padding: 7px 10px;
        border-radius: 10px;
        font-size: 10.5px;
        line-height: 1.4;
    }

        #bulkTags .bulk-tags-hint small {
            font-size: 10.5px;
            line-height: 1.4;
        }

    #bulkTags .modal-footer .btn-primary,
    #editFiltre .modal-footer .btn,
    #createCollection .modal-footer .btn,
    #addCategory .modal-footer .btn {
        height: 36px;
        font-size: 13px;
    }
}

/* ---------- department logo strips: smaller at 125% / 150% ---------- */
@media (min-width: 1441px) and (max-width: 1599.98px) {
    .dept-strip > .departmentImage {
        width: 60px;
        height: 33px;
        margin-right: 4px;
        padding: 3px;
    }

        .dept-strip > .departmentImage img {
            max-width: 52px;
            max-height: 17px;
        }

    .dept-owner {
        font-size: 12.5px;
        line-height: 1.3;
    }
}

@media (min-width: 1200px) and (max-width: 1440px) {
    .dept-strip > .departmentImage {
        width: 50px;
        height: 28px;
        margin-right: 3px;
        padding: 3px;
        border-radius: 5px;
    }

        .dept-strip > .departmentImage img {
            max-width: 42px;
            max-height: 14px;
        }

    .dept-owner {
        font-size: 11.5px;
        line-height: 1.3;
    }
}

/* ---------- chat: delete message ---------- */
.wa-msg-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.wa-msg.is-mine .wa-msg-actions {
    flex-direction: row-reverse;
}

.wa-chat .wa-msg-action.is-danger:hover {
    color: #d93025;
}

.wa-bubble.is-deleted .wa-deleted {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #86868b;
    font-style: italic;
}

    .wa-bubble.is-deleted .wa-deleted .bx {
        font-size: 15px;
    }

/* ---------- chat: conversation info panel ---------- */
.wa-avatar {
    position: relative;
    overflow: hidden;
}

    .wa-avatar .wa-avatar-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.wa-chat .is-clickable {
    cursor: pointer;
}

.wa-head-text.is-clickable {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wa-side .wa-panel.is-sub:not(.ng-hide) {
    animation: wa-slide-from-left .24s cubic-bezier(.2, .8, .2, 1);
}

@keyframes wa-slide-from-left {
    from {
        opacity: .4;
        transform: translateX(-100%);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes wa-slide-from-right {
    from {
        opacity: .4;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.wa-info {
    display: flex;
    flex-direction: column;
    flex: 0 0 420px;
    width: 420px;
    min-height: 0;
    border-left: 1px solid #ececf0;
    background: #fff;
    animation: wa-slide-from-right .24s cubic-bezier(.2, .8, .2, 1);
}

.wa-info-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    min-height: 62px;
    padding: 10px 14px 10px 10px;
}

    .wa-info-head h3 {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0 !important;
        overflow: hidden;
        color: #1d1d1f;
        font-size: 16px !important;
        font-weight: 500;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .wa-info-head .wa-back {
        color: #1d1d1f;
    }

        .wa-info-head .wa-back:hover {
            background: rgba(118, 118, 128, .12);
        }

.wa-info-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 24px 24px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.wa-info-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 0 22px;
    text-align: center;
}

.wa-info-photo {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 124px;
    height: 124px;
    border-radius: 50%;
    overflow: hidden;
    background: #e5e5ea;
    color: #fff;
    font-size: 42px;
    font-weight: 600;
}

    .wa-info-photo.is-group {
        background: linear-gradient(180deg, #a8b4c8 0%, #8390a8 100%);
    }

    .wa-info-photo.tone-0 { background: linear-gradient(180deg, #6e9bff 0%, #3b6ef7 100%); }
    .wa-info-photo.tone-1 { background: linear-gradient(180deg, #5dd39e 0%, #2fb57a 100%); }
    .wa-info-photo.tone-2 { background: linear-gradient(180deg, #ffb35c 0%, #f5902a 100%); }
    .wa-info-photo.tone-3 { background: linear-gradient(180deg, #b58cff 0%, #8e5cf2 100%); }
    .wa-info-photo.tone-4 { background: linear-gradient(180deg, #ff8fae 0%, #f25c86 100%); }
    .wa-info-photo.tone-5 { background: linear-gradient(180deg, #5ccfe6 0%, #22a9c8 100%); }

    .wa-info-photo > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .wa-info-photo > .bx {
        font-size: 56px;
    }

.wa-info-photo-edit {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-size: 12.5px;
    font-weight: 500;
    opacity: 0;
    transition: opacity .15s ease;
}

    .wa-info-photo-edit > span {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    .wa-info-photo-edit .bx {
        font-size: 24px;
    }

.wa-info-photo:hover .wa-info-photo-edit,
.wa-info-photo-edit.is-busy,
.wa-info-photo-edit:focus-visible {
    opacity: 1;
}

.wa-info-title {
    margin: 16px 0 4px !important;
    color: #1d1d1f;
    font-size: 22px !important;
    font-weight: 500;
    letter-spacing: -.2px;
    word-break: break-word;
}

.wa-info-sub {
    margin: 0;
    color: #6e6e73;
    font-size: 15px;
}

.wa-info-section {
    padding: 16px 0;
    border-top: 1px solid #e9e9ed;
}

    .wa-info-section.is-rows {
        padding: 8px 0;
    }

.wa-info-label {
    display: block;
    margin: 0 0 6px;
    color: #6e6e73;
    font-size: 13.5px;
    font-weight: 500;
}

.wa-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #1d1d1f;
    font-size: 20px;
}

    .wa-info-icon:hover {
        background: rgba(118, 118, 128, .12);
    }

.wa-info-desc {
    margin: 0 0 8px;
    color: #1d1d1f;
    font-size: 15px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.wa-info-muted {
    margin: 0 0 8px;
    color: #86868b;
    font-size: 14.5px;
}

.wa-info-meta {
    display: block;
    color: #86868b;
    font-size: 12.5px;
}

.wa-info-link {
    display: inline-block;
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #154fef;
    font-size: 14.5px;
    font-weight: 500;
}

.wa-info-hero .wa-info-link {
    margin: 10px 0 0;
    font-size: 13px;
}

.wa-info-link.is-danger {
    color: #d93025;
}

.wa-info-row {
    display: flex;
    align-items: center;
    gap: 18px;
    width: calc(100% + 24px);
    min-height: 52px;
    margin: 0 -12px;
    padding: 8px 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #1d1d1f;
    font-size: 15.5px;
    text-align: left;
    transition: background-color .12s ease;
}

    .wa-info-row:hover {
        background: rgba(118, 118, 128, .08);
    }

    .wa-info-row > .bx {
        flex: 0 0 auto;
        width: 24px;
        color: #54656f;
        font-size: 22px;
        text-align: center;
    }

    .wa-info-row.is-danger,
    .wa-info-row.is-danger > .bx {
        color: #d93025;
    }

    .wa-info-row.is-accent {
        gap: 14px;
        color: #154fef;
        font-weight: 500;
    }

.wa-info-row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(180deg, #2d63f5 0%, #154fef 100%);
    color: #fff;
    font-size: 21px;
}

.wa-info-row-text {
    flex: 1 1 auto;
    min-width: 0;
}

.wa-info-row-count {
    color: #86868b;
    font-size: 14px;
}

.wa-info-row .wa-info-row-go {
    width: auto;
    margin-left: -10px;
    color: #aeaeb2;
    font-size: 20px;
}

.wa-info-thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 4px 0 8px;
}

.wa-info-thumb {
    position: relative;
    display: block;
    aspect-ratio: 1;
    padding: 0;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #e5e5ea;
}

    .wa-info-thumb img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .2s ease;
    }

    .wa-info-thumb:hover img {
        transform: scale(1.04);
    }

.wa-info-member {
    display: flex;
    align-items: center;
    gap: 12px;
    width: calc(100% + 24px);
    margin: 0 -12px;
    padding: 8px 12px;
    border-radius: 12px;
}

    .wa-info-member:hover {
        background: rgba(118, 118, 128, .06);
    }

.wa-member-tag {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(21, 79, 239, .1);
    color: #154fef;
    font-size: 11.5px;
    font-weight: 600;
}

.wa-member-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #86868b;
    font-size: 18px;
    opacity: 0;
    transition: opacity .12s ease;
}

.wa-info-member:hover .wa-member-remove,
.wa-member-remove:focus-visible {
    opacity: 1;
}

.wa-member-remove:hover {
    background: rgba(217, 48, 37, .1);
    color: #d93025;
}

.wa-info-form .wa-info-label {
    margin-top: 2px;
}

.wa-info-input {
    display: block;
    width: 100%;
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid #d2d2d7;
    border-radius: 12px;
    background: #fff;
    color: #1d1d1f;
    font-size: 15px;
    resize: none;
}

    .wa-info-input:focus {
        border-color: #154fef;
        outline: 0;
        box-shadow: 0 0 0 3px rgba(21, 79, 239, .15);
    }

textarea.wa-info-input {
    margin-bottom: 4px;
}

.wa-info-count {
    display: block;
    margin-bottom: 12px;
    color: #86868b;
    font-size: 12px;
    text-align: right;
}

.wa-info-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

    .wa-info-actions .wa-primary {
        min-width: 110px;
        height: 38px;
    }

.wa-info-btn {
    height: 38px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: rgba(118, 118, 128, .12);
    color: #1d1d1f;
    font-size: 14px;
    font-weight: 500;
}

.wa-info-gallery {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.wa-info-tabs {
    display: flex;
    flex: 0 0 auto;
    padding: 0 16px;
    border-bottom: 1px solid #e9e9ed;
}

    .wa-info-tabs button {
        flex: 1 1 0;
        height: 44px;
        padding: 0;
        border: 0;
        border-bottom: 2px solid transparent;
        background: transparent;
        color: #6e6e73;
        font-size: 14.5px;
        font-weight: 500;
    }

        .wa-info-tabs button.is-active {
            border-bottom-color: #154fef;
            color: #154fef;
        }

.wa-info-gallery-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 12px 16px 24px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.wa-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

    .wa-info-grid .wa-info-thumb {
        border-radius: 6px;
    }

.wa-info-doc {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    border-radius: 12px;
    color: #1d1d1f;
    text-decoration: none;
}

    .wa-info-doc:hover {
        background: rgba(118, 118, 128, .08);
        color: #1d1d1f;
    }

    .wa-info-doc > .bx {
        flex: 0 0 auto;
        color: #86868b;
        font-size: 20px;
    }

    .wa-info-doc .wa-contact-text b {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .wa-info-doc .wa-file-icon {
        flex: 0 0 auto;
    }

        .wa-info-doc .wa-file-icon.is-link {
            background: rgba(21, 79, 239, .1);
            color: #154fef;
        }

.wa-info-add {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding-top: 6px;
}

/* ---------- chat: message context menu ---------- */
.wa-msg-menu {
    min-width: 190px;
}

.bootbox.bootbox-sheet.is-plain .modal-body {
    display: none;
}

.bootbox.bootbox-sheet.is-plain .modal-footer {
    padding-top: 22px !important;
}

@media (min-width: 1441px) and (max-width: 1599.98px) {
    .wa-info {
        flex-basis: 380px;
        width: 380px;
    }
}

@media (min-width: 1200px) and (max-width: 1440px) {
    .wa-info {
        flex-basis: 320px;
        width: 320px;
    }

    .wa-info-head {
        min-height: 54px;
    }

    .wa-info-body {
        padding: 0 16px 20px;
    }

    .wa-info-hero {
        padding: 12px 0 16px;
    }

    .wa-info-photo {
        width: 100px;
        height: 100px;
        font-size: 34px;
    }

        .wa-info-photo > .bx {
            font-size: 44px;
        }

    .wa-info-title {
        margin-top: 12px !important;
        font-size: 18px !important;
    }

    .wa-info-sub,
    .wa-info-desc,
    .wa-info-input {
        font-size: 13.5px;
    }

    .wa-info-section {
        padding: 12px 0;
    }

    .wa-info-row {
        gap: 14px;
        min-height: 44px;
        font-size: 14px;
    }

        .wa-info-row > .bx {
            font-size: 19px;
        }

    .wa-info-row-icon {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

    .wa-info-tabs button {
        height: 40px;
        font-size: 13.5px;
    }
}

@media (max-width: 1199.98px) {
    .wa-info {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        width: min(420px, 100%);
        box-shadow: -12px 0 32px rgba(0, 0, 0, .12);
    }
}

/* ---------- chat: info quick actions, search, description ---------- */
.wa-info-quick {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 16px;
}

.wa-info-quick-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 72px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #1d1d1f;
}

    .wa-info-quick-btn small {
        font-size: 12.5px;
        font-weight: 500;
    }

.wa-info-quick-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 48px;
    border-radius: 16px;
    background: rgba(118, 118, 128, .1);
    color: #154fef;
    font-size: 22px;
    transition: background-color .12s ease;
}

.wa-info-quick-btn:hover .wa-info-quick-icon {
    background: rgba(21, 79, 239, .12);
}

.wa-info-section .wa-info-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 28px;
}

.wa-info-icon.is-small {
    width: 28px;
    height: 28px;
    color: #6e6e73;
    font-size: 16px;
}

.wa-info-desc.is-clickable {
    border-radius: 8px;
    cursor: text;
}

    .wa-info-desc.is-clickable:hover {
        background: rgba(118, 118, 128, .06);
    }

.wa-info-search {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding-top: 4px;
}

.wa-info-search-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 4px 12px 24px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.wa-info-hit {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid #f0f0f3;
    border-radius: 0;
    background: transparent;
    color: #1d1d1f;
    text-align: left;
}

    .wa-info-hit:hover {
        border-radius: 12px;
        background: rgba(118, 118, 128, .08);
    }

.wa-info-hit-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px;
}

    .wa-info-hit-meta b {
        overflow: hidden;
        font-size: 13.5px;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .wa-info-hit-meta small {
        flex: 0 0 auto;
        color: #86868b;
        font-size: 12px;
    }

.wa-info-hit-text {
    display: -webkit-box;
    overflow: hidden;
    color: #3a3a3c;
    font-size: 14px;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-word;
}

@media (min-width: 1200px) and (max-width: 1440px) {
    .wa-info-quick {
        margin-top: 12px;
    }

    .wa-info-quick-icon {
        width: 52px;
        height: 42px;
        font-size: 19px;
    }

    .wa-info-hit-text {
        font-size: 13px;
    }
}

/* ---------- chat: header info hover ---------- */
.wa-head-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    margin: -6px 0 -6px -8px;
    padding: 6px 12px 6px 8px;
    border-radius: 14px;
    transition: background-color .15s ease;
}

    .wa-head-info.is-clickable {
        cursor: pointer;
    }

        .wa-head-info.is-clickable:hover,
        .wa-head-info.is-open {
            background: rgba(118, 118, 128, .1);
        }

        .wa-head-info.is-clickable:active {
            background: rgba(118, 118, 128, .16);
        }

    .wa-head-info .wa-head-text {
        flex: 1 1 auto;
        min-width: 0;
    }

        .wa-head-info .wa-head-text h3 {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

/* ---------- chat: attach menu ---------- */
.wa-attach-pop {
    position: absolute;
    left: 58px;
    bottom: calc(100% + 8px);
    z-index: 21;
    display: flex;
    flex-direction: column;
    min-width: 230px;
    padding: 6px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 16px 40px rgba(0, 0, 0, .18);
    animation: waSlideUp .16s ease;
}

    .wa-attach-pop > button {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 8px 10px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: #1d1d1f;
        font-size: 14.5px;
        font-weight: 500;
        text-align: left;
    }

        .wa-attach-pop > button:hover {
            background: rgba(118, 118, 128, .1);
        }

.wa-attach-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
}

    .wa-attach-icon.is-file { background: linear-gradient(180deg, #8e7bff 0%, #6a55f2 100%); }
    .wa-attach-icon.is-product { background: linear-gradient(180deg, #2d63f5 0%, #154fef 100%); }
    .wa-attach-icon.is-collection { background: linear-gradient(180deg, #ffb35c 0%, #f5902a 100%); }
    .wa-attach-icon.is-liked { background: linear-gradient(180deg, #ff8fae 0%, #f25c86 100%); }

/* ---------- chat: shared product / collection cards ---------- */
.wa-bubble.has-cards {
    width: 300px;
    max-width: 100%;
    padding: 4px 4px 6px;
}

    .wa-bubble.has-cards .wa-sender,
    .wa-bubble.has-cards .wa-quote,
    .wa-bubble.has-cards .wa-text {
        margin-left: 6px;
        margin-right: 6px;
    }

    .wa-bubble.has-cards .wa-text {
        display: block;
        margin-top: 6px;
    }

    .wa-bubble.has-cards .wa-time {
        margin-right: 6px;
    }

.wa-cards {
    display: grid;
    gap: 3px;
    overflow: hidden;
    border-radius: 12px;
}

.wa-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    border: 0;
    background: #fff;
    color: #1d1d1f;
    text-align: left;
}

.wa-card-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    overflow: hidden;
    background: #eef0f4;
    color: #aeaeb2;
    font-size: 34px;
}

    .wa-card-media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .2s ease;
    }

.wa-card:hover .wa-card-media img {
    transform: scale(1.03);
}

.wa-card-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    padding: 8px 10px 9px;
}

    .wa-card-body b {
        overflow: hidden;
        font-size: 14px;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .wa-card-body small {
        overflow: hidden;
        color: #6e6e73;
        font-size: 12.5px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        .wa-card-body small.is-muted {
            color: #86868b;
            font-style: italic;
        }

        .wa-card-body small .bx {
            margin-right: 3px;
            font-size: 12px;
        }

.wa-card.is-denied .wa-card-media,
.wa-card.is-gone .wa-card-media {
    background: repeating-linear-gradient(135deg, #f1f2f5 0 10px, #eaebef 10px 20px);
}

.wa-cards.is-product.is-many {
    grid-template-columns: 1fr 1fr;
}

    .wa-cards.is-product.is-many .wa-card-body {
        padding: 5px 7px 6px;
    }

        .wa-cards.is-product.is-many .wa-card-body b {
            font-size: 12.5px;
        }

        .wa-cards.is-product.is-many .wa-card-body small {
            display: none;
        }

.wa-cards.is-product.n-3 .wa-card:first-child {
    grid-column: span 2;
}

    .wa-cards.is-product.n-3 .wa-card:first-child .wa-card-media {
        aspect-ratio: 2 / 1;
    }

.wa-cards.is-collection .wa-card-media {
    aspect-ratio: 16 / 9;
}

.wa-cards.is-collection.is-many .wa-card {
    flex-direction: row;
    align-items: center;
}

    .wa-cards.is-collection.is-many .wa-card-media {
        flex: 0 0 64px;
        width: 64px;
        aspect-ratio: 1;
        font-size: 22px;
    }

.wa-card-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    grid-column: 1 / -1;
    height: 38px;
    padding: 0;
    border: 0;
    background: #fff;
    color: #154fef;
    font-size: 13.5px;
    font-weight: 600;
}

    .wa-card-cta:hover {
        background: #f5f7ff;
    }

/* ---------- chat: pinned bar ---------- */
.wa-pinbar {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    padding: 6px 10px 6px 14px;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

.wa-pinbar-main {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 6px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #1d1d1f;
    text-align: left;
}

    .wa-pinbar-main:hover {
        background: rgba(118, 118, 128, .08);
    }

.wa-pinbar-steps {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-self: stretch;
    width: 3px;
}

    .wa-pinbar-steps i {
        flex: 1 1 0;
        border-radius: 2px;
        background: rgba(21, 79, 239, .2);
    }

        .wa-pinbar-steps i.is-on {
            background: #154fef;
        }

.wa-pinbar-icon {
    color: #154fef;
    font-size: 18px;
}

.wa-pinbar-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

    .wa-pinbar-text b {
        color: #154fef;
        font-size: 12.5px;
        font-weight: 600;
    }

    .wa-pinbar-text > span {
        overflow: hidden;
        color: #3a3a3c;
        font-size: 13.5px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.wa-pinbar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #86868b;
    font-size: 18px;
}

    .wa-pinbar-close:hover {
        background: rgba(118, 118, 128, .12);
        color: #1d1d1f;
    }

.wa-bubble.is-pinned::after {
    content: "\eb64";
    position: absolute;
    top: -7px;
    right: -7px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #154fef;
    color: #fff;
    font-family: boxicons;
    font-size: 11px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.wa-bubble.is-pinned {
    position: relative;
}

/* ---------- chat: catalog picker ---------- */
.wa-picker .wa-search {
    margin-top: 2px;
}

.wa-picker-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 6px 14px 18px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.wa-picker-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

    .wa-picker-grid.is-collections {
        grid-template-columns: 1fr;
    }

.wa-picker-item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 14px;
    overflow: hidden;
    background: #f5f5f7;
    color: #1d1d1f;
    text-align: left;
    transition: border-color .12s ease, box-shadow .12s ease;
}

    .wa-picker-item:hover {
        box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
    }

    .wa-picker-item.is-picked {
        border-color: #154fef;
    }

.wa-picker-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    background: #eef0f4;
    color: #aeaeb2;
    font-size: 30px;
}

.wa-picker-grid.is-collections .wa-picker-media {
    aspect-ratio: 16 / 7;
}

.wa-picker-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wa-picker-check {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: rgba(0, 0, 0, .25);
    color: transparent;
    font-size: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.wa-picker-item.is-picked .wa-picker-check {
    background: #154fef;
    color: #fff;
}

.wa-picker-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 8px 10px 10px;
}

    .wa-picker-text b {
        overflow: hidden;
        font-size: 13.5px;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .wa-picker-text small {
        overflow: hidden;
        color: #86868b;
        font-size: 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.wa-picker-more {
    display: block;
    width: 100%;
    height: 40px;
    margin-top: 12px;
    border: 0;
    border-radius: 999px;
    background: rgba(118, 118, 128, .1);
    color: #154fef;
    font-size: 14px;
    font-weight: 500;
}

.wa-picker-foot {
    flex: 0 0 auto;
    padding: 10px 14px 12px;
    border-top: 1px solid #e9e9ed;
    background: #fff;
}

.wa-picker-picked {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.wa-picker-chip {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    background: #eef0f4;
}

    .wa-picker-chip img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .wa-picker-chip button {
        position: absolute;
        top: 2px;
        right: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(0, 0, 0, .55);
        color: #fff;
        font-size: 12px;
    }

.wa-picker-send {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wa-picker-caption {
    flex: 1 1 auto;
    min-width: 0;
    height: 42px;
    padding: 0 14px;
    border: 1px solid #d2d2d7;
    border-radius: 999px;
    color: #1d1d1f;
    font-size: 14px;
}

    .wa-picker-caption:focus {
        border-color: #154fef;
        outline: 0;
    }

.wa-picker-count {
    display: block;
    margin-top: 6px;
    color: #86868b;
    font-size: 12px;
}

.wa-shared-row {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
}

.wa-shared-thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 10px;
    overflow: hidden;
    background: #eef0f4;
    color: #aeaeb2;
    font-size: 22px;
}

    .wa-shared-thumb img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

@media (min-width: 1200px) and (max-width: 1440px) {
    .wa-bubble.has-cards {
        width: 250px;
    }

    .wa-card-body b {
        font-size: 13px;
    }

    .wa-picker-grid {
        gap: 8px;
    }

    .wa-picker-text b {
        font-size: 12.5px;
    }

    .wa-pinbar-text > span {
        font-size: 12.5px;
    }
}

/* ---------- chat: polish (time on cards, cta, avatars, tails, background) ---------- */
.wa-chat .wa-main {
    background: rgb(245 241 235);
}

.wa-chat .wa-bubble.has-cards .wa-time,
.wa-chat .wa-msg.is-mine .wa-bubble.has-cards .wa-time {
    position: static;
    top: auto;
    display: block;
    float: none;
    margin: 6px 8px 1px 0;
    text-align: right;
}

.wa-chat .wa-card:hover .wa-card-media img {
    transform: none;
}

.wa-chat .wa-card-cta {
    margin-top: 3px;
    border-radius: 10px;
    background: rgba(21, 79, 239, .08);
}

    .wa-chat .wa-card-cta:hover {
        background: rgba(21, 79, 239, .14);
    }

.wa-chat .wa-cards.is-single .wa-card,
.wa-chat .wa-cards.is-many .wa-card {
    border-radius: 0;
}

.wa-msg-avatar {
    display: flex;
    align-self: flex-start;
    flex: 0 0 30px;
    width: 30px;
    margin-right: 8px;
}

    .wa-msg-avatar .wa-avatar {
        width: 30px;
        height: 30px;
        font-size: 11px;
    }

.wa-chat .wa-msg.is-first .wa-bubble::before {
    content: "";
    position: absolute;
    top: 0;
    width: 9px;
    height: 13px;
}

.wa-chat .wa-msg.is-first:not(.is-mine) .wa-bubble {
    border-top-left-radius: 0;
}

    .wa-chat .wa-msg.is-first:not(.is-mine) .wa-bubble::before {
        left: -8px;
        background: #fff;
        clip-path: polygon(0 0, 100% 0, 100% 100%);
    }

.wa-chat .wa-msg.is-mine.is-first .wa-bubble {
    border-top-right-radius: 0;
}

    .wa-chat .wa-msg.is-mine.is-first .wa-bubble::before {
        right: -8px;
        background: var(--wa-mine);
        clip-path: polygon(0 0, 100% 0, 0 100%);
    }

.wa-chat .wa-msg.is-first .wa-bubble.is-deleted::before {
    background: inherit;
}

@media (min-width: 1200px) and (max-width: 1440px) {
    .wa-msg-avatar {
        flex-basis: 26px;
        width: 26px;
        margin-right: 6px;
    }

        .wa-msg-avatar .wa-avatar {
            width: 26px;
            height: 26px;
            font-size: 10px;
        }
}

/* ---------- chat: warm theme (own bubbles, active row, pattern) ---------- */
.wa-chat {
    --wa-mine: #d9fdd3;
}

.wa-chat .wa-item.is-active,
.wa-chat .wa-item.is-active:hover {
    background: rgba(118, 118, 128, .08);
}

.wa-chat .wa-main {
    background:
        radial-gradient(rgba(120, 96, 60, .16) 1.1px, transparent 1.4px) 0 0 / 20px 20px,
        radial-gradient(rgba(120, 96, 60, .09) 1px, transparent 1.3px) 10px 10px / 20px 20px,
        rgb(245 241 235);
}

.wa-chat .wa-msg.is-mine .wa-bubble {
    box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}

.wa-chat .wa-msg:not(.is-mine) .wa-bubble {
    box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}

.wa-chat .wa-msg.is-mine .wa-time,
.wa-chat .wa-msg.is-mine .wa-bubble.has-cards .wa-time {
    color: #667781;
}

.wa-chat .wa-msg.is-mine .wa-quote,
.wa-chat .wa-msg.is-mine .wa-quote[class*="tone-bar-"] {
    border-left-color: #06a95b !important;
    background: rgba(11, 20, 26, .05);
}

.wa-chat .wa-card-cta,
.wa-chat .wa-msg.is-mine .wa-card-cta {
    background: #154fef;
    color: #fff;
}

    .wa-chat .wa-card-cta:hover {
        background: #0f43d6;
        color: #fff;
    }

/* ---------- chat: uni-verse palette ---------- */
.wa-chat {
    --wa-mine: #ebe6fb;
}

.wa-chat .wa-main {
    background:
        radial-gradient(rgba(76, 64, 150, .15) 1.1px, transparent 1.4px) 0 0 / 20px 20px,
        radial-gradient(rgba(76, 64, 150, .08) 1px, transparent 1.3px) 10px 10px / 20px 20px,
        rgb(245 241 235);
}

.wa-chat .wa-msg.is-mine .wa-time,
.wa-chat .wa-msg.is-mine .wa-bubble.has-cards .wa-time {
    color: #6f6a86;
}

.wa-chat .wa-msg.is-mine .wa-quote,
.wa-chat .wa-msg.is-mine .wa-quote[class*="tone-bar-"] {
    border-left-color: #7c5cff !important;
    background: rgba(76, 64, 150, .07);
}

/* ---------- chat: blue palette on cool background ---------- */
.wa-chat {
    --wa-mine: #d9e6ff;
}

.wa-chat .wa-main {
    background:
        radial-gradient(rgba(21, 79, 239, .13) 1.1px, transparent 1.4px) 0 0 / 20px 20px,
        radial-gradient(rgba(21, 79, 239, .07) 1px, transparent 1.3px) 10px 10px / 20px 20px,
        #eef2f8;
}

.wa-chat .wa-msg.is-mine .wa-time,
.wa-chat .wa-msg.is-mine .wa-bubble.has-cards .wa-time {
    color: #5b6b8c;
}

.wa-chat .wa-msg.is-mine .wa-quote,
.wa-chat .wa-msg.is-mine .wa-quote[class*="tone-bar-"] {
    border-left-color: #154fef !important;
    background: rgba(21, 79, 239, .07);
}

/* ---------- chat: mist & navy palette ---------- */
.wa-chat {
    --wa-mine: #1f3b8f;
    --wa-mine-accent: #8ec5ff;
}

.wa-chat .wa-main {
    background:
        radial-gradient(rgba(30, 50, 110, .14) 1.1px, transparent 1.4px) 0 0 / 20px 20px,
        radial-gradient(rgba(30, 50, 110, .07) 1px, transparent 1.3px) 10px 10px / 20px 20px,
        #eceef2;
}

.wa-chat .wa-msg.is-mine .wa-bubble {
    background: var(--wa-mine);
    color: #fff;
    box-shadow: 0 1px 1px rgba(11, 20, 50, .18);
}

.wa-chat .wa-msg.is-mine .wa-time,
.wa-chat .wa-msg.is-mine .wa-bubble.has-cards .wa-time {
    color: rgba(255, 255, 255, .72);
}

.wa-chat .wa-msg.is-mine .wa-quote,
.wa-chat .wa-msg.is-mine .wa-quote[class*="tone-bar-"] {
    border-left-color: var(--wa-mine-accent) !important;
    background: rgba(255, 255, 255, .12);
}

    .wa-chat .wa-msg.is-mine .wa-quote b {
        color: var(--wa-mine-accent) !important;
    }

    .wa-chat .wa-msg.is-mine .wa-quote span {
        color: rgba(255, 255, 255, .86);
    }

.wa-chat .wa-msg.is-mine .wa-file {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

    .wa-chat .wa-msg.is-mine .wa-file:hover {
        background: rgba(255, 255, 255, .2);
        color: #fff;
    }

.wa-chat .wa-msg.is-mine .wa-file.is-pending .wa-progress {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

    .wa-chat .wa-msg.is-mine .wa-file.is-pending .wa-progress-track {
        stroke: rgba(255, 255, 255, .3);
    }

    .wa-chat .wa-msg.is-mine .wa-file.is-pending .wa-progress-arc {
        stroke: #fff;
    }

.wa-chat .wa-msg.is-mine .wa-bubble.is-deleted .wa-deleted {
    color: rgba(255, 255, 255, .7);
}

.wa-chat .wa-msg.is-mine .wa-upload-error {
    color: #ffd1d1;
}

.wa-chat .wa-card-cta {
    background: #154fef;
    color: #fff;
}

    .wa-chat .wa-card-cta:hover {
        background: #0f43d6;
        color: #fff;
    }

.wa-chat .wa-msg.is-mine .wa-card-cta {
    background: #fff;
    color: var(--wa-mine);
}

    .wa-chat .wa-msg.is-mine .wa-card-cta:hover {
        background: #e9efff;
        color: var(--wa-mine);
    }

.wa-chat .wa-msg.is-mine .wa-card {
    color: #1d1d1f;
}

.wa-quick-cache {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

/* ---------- chat: collection collage & fabric picker ---------- */
.wa-attach-icon.is-fabric {
    background: linear-gradient(180deg, #5ccfe6 0%, #22a9c8 100%);
}

.wa-collage {
    position: absolute;
    inset: 0;
    display: grid;
    gap: 2px;
    background: #fff;
}

    .wa-collage img {
        position: static;
        width: 100%;
        height: 100%;
        min-height: 0;
        object-fit: cover;
    }

    .wa-collage.n-2 {
        grid-template-columns: 1fr 1fr;
    }

    .wa-collage.n-3 {
        grid-template-columns: 3fr 2fr;
        grid-template-rows: 1fr 1fr;
    }

        .wa-collage.n-3 img:first-child {
            grid-row: span 2;
        }

    .wa-collage.n-4 {
        grid-template-columns: repeat(4, 1fr);
    }

/* ---------- chat: wider panels & bubbles, compact attach menu ---------- */
.wa-side {
    flex-basis: 460px;
    width: 460px;
}

.wa-info {
    flex-basis: 460px;
    width: 460px;
}

.wa-chat .wa-bubble {
    max-width: min(720px, 75%);
}

@media (min-width: 1441px) and (max-width: 1599.98px) {
    .wa-side,
    .wa-info {
        flex-basis: 410px;
        width: 410px;
    }
}

@media (min-width: 1200px) and (max-width: 1440px) {
    .wa-side,
    .wa-info {
        flex-basis: 350px;
        width: 350px;
    }

    .wa-chat .wa-bubble {
        max-width: 80%;
    }
}

@media (max-width: 1199.98px) {
    .wa-info {
        width: min(460px, 100%);
    }
}

@media (min-width: 1200px) and (max-width: 1599.98px) {
    .wa-attach-pop {
        left: 50px;
        min-width: 200px;
        padding: 5px;
        border-radius: 14px;
    }

        .wa-attach-pop > button {
            gap: 10px;
            padding: 6px 8px;
            font-size: 13.5px;
        }

    .wa-attach-icon {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }
}

@media (min-width: 1200px) and (max-width: 1440px) {
    .wa-attach-pop {
        left: 44px;
        min-width: 184px;
    }

        .wa-attach-pop > button {
            gap: 9px;
            padding: 5px 7px;
            font-size: 12.5px;
        }

    .wa-attach-icon {
        width: 26px;
        height: 26px;
        font-size: 14px;
    }
}

/* ---------- chat: steady slide-ins, larger side panels ---------- */
.wa-chat {
    overflow: clip;
}

.wa-side,
.wa-info {
    flex-basis: 500px;
    width: 500px;
}

@media (min-width: 1441px) and (max-width: 1599.98px) {
    .wa-side,
    .wa-info {
        flex-basis: 440px;
        width: 440px;
    }
}

@media (min-width: 1200px) and (max-width: 1440px) {
    .wa-side,
    .wa-info {
        flex-basis: 380px;
        width: 380px;
    }
}

@media (max-width: 1199.98px) {
    .wa-info {
        width: min(500px, 100%);
    }
}

/* ---------- chat: left list keeps its original width ---------- */
.wa-side {
    flex-basis: 420px;
    width: 420px;
}

@media (min-width: 1441px) and (max-width: 1599.98px) {
    .wa-side {
        flex-basis: 380px;
        width: 380px;
    }
}

@media (min-width: 1200px) and (max-width: 1440px) {
    .wa-side {
        flex-basis: 320px;
        width: 320px;
    }
}

/* ---------- chat: side panels scale down together at 125% / 150% ---------- */
@media (min-width: 1441px) and (max-width: 1599.98px) {
    .wa-side {
        flex-basis: 356px;
        width: 356px;
    }

    .wa-info {
        flex-basis: 424px;
        width: 424px;
    }
}

@media (min-width: 1200px) and (max-width: 1440px) {
    .wa-side {
        flex-basis: 300px;
        width: 300px;
    }

    .wa-info {
        flex-basis: 360px;
        width: 360px;
    }
}

/* ---------- chat: right panels smaller at 125% / 150% ---------- */
@media (min-width: 1441px) and (max-width: 1599.98px) {
    .wa-info {
        flex-basis: 380px;
        width: 380px;
    }
}

@media (min-width: 1200px) and (max-width: 1440px) {
    .wa-info {
        flex-basis: 320px;
        width: 320px;
    }
}

/* ---------- chat: jump-to-bottom button & older messages ---------- */
.wa-chat .wa-composer {
    position: relative;
}

.wa-down {
    position: absolute;
    right: 24px;
    bottom: calc(100% + 12px);
    z-index: 15;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #3a3a3c;
    font-size: 26px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 6px 16px rgba(0, 0, 0, .14);
    animation: waSlideUp .16s ease;
}

    .wa-down:hover {
        color: #154fef;
    }

.wa-down-badge {
    position: absolute;
    top: -6px;
    left: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #154fef;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}

.wa-older {
    display: flex;
    justify-content: center;
    padding: 10px 0 2px;
}

@media (min-width: 1200px) and (max-width: 1599.98px) {
    .wa-down {
        right: 18px;
        width: 36px;
        height: 36px;
        font-size: 22px;
    }
}

.wa-down {
    right: 10px;
    font-size: 22px;
}

@media (min-width: 1200px) and (max-width: 1599.98px) {
    .wa-down {
        right: 8px;
        font-size: 19px;
    }
}

/* ---------- chat: smooth scrolling (no blur, stable image boxes) ---------- */
.wa-chat .wa-head,
.wa-chat .wa-pinbar {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.wa-chat .wa-bubble.has-image .wa-image img,
.wa-chat .wa-image.is-pending img {
    display: block;
    width: 300px;
    max-width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: rgba(0, 0, 0, .06);
}

.wa-chat .wa-album-tile img,
.wa-chat .wa-card-media img,
.wa-chat .wa-info-thumb img,
.wa-chat .wa-picker-media img {
    background: rgba(0, 0, 0, .05);
}

@media (min-width: 1200px) and (max-width: 1440px) {
    .wa-chat .wa-bubble.has-image .wa-image img,
    .wa-chat .wa-image.is-pending img {
        width: 260px;
    }
}

.wa-chat .wa-bubble.has-image .wa-image img,
.wa-chat .wa-image.is-pending img {
    max-width: none;
}