:root {
    --font-mkt-primary: Segoe UI;
    --font-size-mkt-primary: 13px;
    --font-size-mkt-sm: 11px;
    --font-size-mkt-lg: 16px;
    --font-weight-mkt-semibold: 500;
    --color-txt-mkt-primary: rgba(7, 20, 55);
    --color-txt-mkt-secondary: rgba(153, 161, 183);
    --color-txt-mkt-light: rgba(255, 255, 255);
    --color-txt-mkt-info: rgba(27, 132, 255);
    --color-txt-mkt-success: rgba(16, 185, 129);
    --color-txt-mkt-danger: rgba(248, 40, 90);
    --color-txt-mkt-warning: rgba(224, 139, 20);
    --color-bg-mkt-primary: rgba(0, 0, 0, 0);
    --color-bg-mkt-secondary: rgba(245, 245, 245);
    --color-bg-mkt-dark: rgba(229, 231, 235);
    --color-bg-mkt-light: rgba(255, 255, 255);
    --color-bg-mkt-info: rgba(230, 242, 255);
    --color-bg-mkt-success: rgba(233, 249, 238);
    --color-bg-mkt-danger: rgba(255, 209, 220);
    --color-bg-mkt-warning: rgba(255, 228, 179);
    --border-radius-mkt-small: 4px;
    --border-radius-mkt-medium: 10px;
    --border-radius-mkt-circle: 50%;
}

.h-32 {
    height: 32px;
}

.lh-32 {
    line-height: 32px;
}

/*panel*/
.bg-mkt-primary {
    background-color: var(--color-bg-mkt-primary);
}

.bg-mkt-secondary {
    background-color: var(--color-bg-mkt-secondary);
}

.bg-mkt-basic {
    background-color: var(--color-bg-mkt-light);
}

[class*="bg-mkt"].radius,
[class*="table-mkt"].radius {
    border-radius: var(--border-radius-mkt-medium);
}

/*button*/
[class*="button-mkt"] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 8px;
    height: 32px;
    font-family: var(--font-mkt-primary);
    font-size: var(--font-size-mkt-primary);
    font-weight: var(--font-weight-mkt-semibold);
    font-style: normal;
    padding: 0px 12px;
    white-space: nowrap;
    border-radius: var(--border-radius-mkt-small);
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

    [class*="button-mkt"]::after {
        content: "";
        position: absolute;
        inset: 0;
        background-color: rgba(255, 255, 255, 0.3); /* lớp mờ trắng */
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none; /* không chặn click */
    }

    [class*="button-mkt"]:hover::after {
        opacity: 1;
    }

    [class*="button-mkt"]:disabled::before {
        content: "";
        position: absolute;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.2); /* lớp phủ đen mờ */
        pointer-events: none;
        z-index: 1;
    }

    [class*="button-mkt"]:disabled {
        cursor: not-allowed;
        opacity: 0.6; /* tuỳ chọn làm mờ toàn bộ */
    }

.button-mkt-primary {
    background-color: var(--color-txt-mkt-info);
    border: 1px solid var(--color-txt-mkt-info);
    color: var(--color-txt-mkt-light);
}


.button-mkt-basic {
    background-color: var(--color-bg-mkt-light);
    border: 1px solid var(--color-txt-mkt-info);
    color: var(--color-txt-mkt-info);
}



.button-mkt-expand {
    --width-after-expand: 220px;
    --color-text: var(--color-txt-mkt-primary);
    background-color: transparent;
    border: 1px solid transparent;
    transition: width 0.3s ease;
    width: 40px;
}

    .button-mkt-expand .icon {
        font-size: 18px;
        transition: color 0.3s ease;
    }

    .button-mkt-expand .text {
        font-family: var(--font-mkt-primary);
        font-size: var(--font-size-mkt-primary);
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .button-mkt-expand:hover {
        background-color: var(--color-bg-mkt-light);
        border: 1px solid var(--color-text);
        width: var(--width-after-expand);
    }

        .button-mkt-expand:hover .text {
            opacity: 1;
            color: var(--color-text);
        }

        .button-mkt-expand:hover .icon {
            color: var(--color-text);
        }


/*.btn-mkt-primary {
    display: flex;
    height: 32px;
    padding: 0px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border-style: none;
    border-width: 0px;
    background: var(--color-mkt-primary-700);
    color: var(--color-mkt-primary-25);
    text-align: center;
    font-family: var(--font-mkt-primary);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 12px;
}


    .btn-mkt-primary:hover {
        background-color: var(--color-mkt-primary-700);
    }


    .btn-mkt-primary:focus {
        background-color: var(--color-mkt-primary-700);
        border: 3px solid var(--color-mkt-primary-100);
    }

    .btn-mkt-primary:disabled {
        color: var(--color-txt-mkt-black-disabled);
        background: var(--color-mkt-neutral-black-8);
    }

.btn-mkt-secondary {
    font-family: var(--font-mkt-primary);
    font-size: 14px;
    display: flex;
    height: 32px;
    padding: 0px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--color-mkt-primary-25);
    border-style: none;
    border-width: 0px;
}

    .btn-mkt-secondary:hover {
        background: var(--color-mkt-primary-50);
    }

    .btn-mkt-secondary:focus {
        border: 3px solid var(--color-mkt-primary-200);
        background: var(--color-mkt-primary-25);
    }

    .btn-mkt-secondary:disabled {
        color: var(--color-txt-mkt-black-disabled);
        background: var(--color-mkt-neutral-black-8);
    }

.btn-mkt-tertiary {
    font-family: var(--font-mkt-primary);
    font-size: 14px;
    display: flex;
    height: 32px;
    padding: 0px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: 1px solid var(--color-primary-700);
    background: var(--color-neutral-white-8);
}

    .btn-mkt-tertiary:hover {
        border: 1px solid var(--color-primary-800);
        background: var(--color-primary-25);
    }

    .btn-mkt-tertiary:focus {
        border: 3px solid var(--color-primary-100);
        background: var(--color-primary-25);
    }

    .btn-mkt-tertiary:disabled {
        color: var(--color-txt-mkt-black-disabled);
        background: var(--color-mkt-neutral-black-8);
    }


.btn-mkt-quaternary {
    display: flex;
    height: 32px;
    padding: 0px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--Neutral-White-White-8, rgba(255, 255, 255, 0.08));
    color: var(--color-mkt-primary-700);
    text-align: center;
    font-family: var(--font-mkt-primary);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 12px;
}


    .btn-mkt-quaternary:hover {
        background: var(--color-mkt-primary-25);
    }

    .btn-mkt-quaternary:focus {
        border: 3px solid var(--color-mkt-primary-100);
    }


    .btn-mkt-quaternary:disabled {
        color: var(--color-txt-mkt-black-disabled);
        background: var(--color-mkt-neutral-black-8);
    }

.btn-mkt-success {
    display: flex;
    height: 32px;
    padding: 0px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--color-mkt-success-800);
    color: var(--color-txt-mkt-black-pure);
    text-align: center;
    font-family: var(--font-mkt-primary);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 12px;
}

    .btn-mkt-success:hover {
        background: var(--color-mkt-success-900);
    }

    .btn-mkt-success:focus {
        border: 3px solid var(--color-mkt-success-100);
        background: var(--color-mkt-success-800);
    }

    .btn-mkt-success:disabled {
        color: var(--color-txt-mkt-black-disabled);
        background: var(--color-mkt-neutral-black-8);
    }

.btn-mkt-info {
    display: flex;
    height: 32px;
    padding: 0px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--color-mkt-info-800);
    color: var(--color-mkt-info-25);
    text-align: center;
    font-family: var(--font-mkt-primary);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 12px;
}


    .btn-mkt-info:hover {
        background: var(--color-mkt-info-900);
    }

    .btn-mkt-info:focus {
        border: 3px solid var(--color-mkt-primary-50);
        background: var(--color-mkt-info-800);
    }


    .btn-mkt-info:disabled {
        color: var(--color-txt-mkt-black-disabled);
        background: var(--color-mkt-neutral-black-8);
    }

.btn-mkt-warning {
    display: flex;
    height: 32px;
    padding: 0px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--color-mkt-warning-400);
    color: var(--color-txt-mkt-black-semi);
    text-align: center;
    font-family: var(--font-mkt-primary);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 12px;
}


    .btn-mkt-warning:hover {
        background: var(--color-mkt-warning-500);
    }

    .btn-mkt-warning:focus {
        border: 3px solid var(--color-mkt-warning-100);
        background: var(--color-mkt-warning-400);
    }

    .btn-mkt-warning:disabled {
        color: var(--color-txt-mkt-black-disabled);
        background: var(--color-mkt-neutral-black-8);
    }


.btn-mkt-danger {
    display: flex;
    height: 32px;
    padding: 0px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--color-mkt-danger-600);
    color: var(--color-txt-white-pure);
    text-align: center;
    font-family: var(--font-mkt-primary);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 12px;
}

    .btn-mkt-danger:hover {
        background: var(--color-mkt-danger-700);
    }

    .btn-mkt-danger:focus {
        border: 3px solid var(--color-mkt-danger-100);
        background: var(--color-mkt--danger-600);
    }

    .btn-mkt-danger:disabled {
        color: var(--color-txt-mkt-black-disabled);
        background: var(--color-mkt-neutral-black-8);
    }
*/

/***************************table*************************/
.table-mkt-primary {
    border-spacing: 0;
    border-collapse: separate;
    background-color: white;
    border: 1px solid rgb(109, 110, 112,16%);
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: auto;
    display: block;
}

    .table-mkt-primary thead {
        display: block;
        width: 100%;
        position: sticky;
        position: -webkit-sticky;
        top: 0px;
        background-color: rgb(207, 226, 255);
        z-index: 1;
    }

    .table-mkt-primary tbody {
        display: block;
        min-height: 40px;
    }



        .table-mkt-primary tbody tr, .table-mkt-primary thead tr {
            display: table;
            width: 100%;
            table-layout: fixed;
        }




    .table-mkt-primary th:first-child {
        border-radius: 10px 0 0 0;
        -moz-border-radius: 10px 0 0 0;
        -webkit-border-radius: 10px 0 0 0;
    }

    .table-mkt-primary th:last-child {
        border-radius: 0 10px 0 0;
        -moz-border-radius: 0 10px 0 0;
        -webkit-border-radius: 0 10px 0 0;
    }

    .table-mkt-primary td:first-child, .table-mkt-primary th:first-child {
        border-left: medium none;
    }

    .table-mkt-primary th {
        min-height: 40px;
        border-top: medium none;
        border-bottom: 1px solid rgb(109, 110, 112,16%);
        border-left: 1px solid rgb(109, 110, 112,16%);
        padding: 8px;
        vertical-align: middle;
        text-align: center;
        font-family: Inter,Helvetica,sans-serif;
        font-size: 13px;
        font-weight: 700;
        color: rgb(7,20,55);
    }


    .table-mkt-primary.noborder-cell th {
        min-height: 40px;
        border-top: medium none;
        border-bottom: 1px solid rgb(109, 110, 112,16%);
        border-left: none;
        padding: 8px;
        vertical-align: middle;
        text-align: left;
        font-family: Inter,Helvetica,sans-serif;
        font-size: 13px;
        font-weight: 700;
        color: rgb(7,20,55);
    }





    .table-mkt-primary td {
        border-left: 1px solid rgb(109, 110, 112, 16%);
        border-bottom: 1px solid rgb(109, 110, 112, 16%);
        padding: 8px;
        min-height: 40px;
        text-align: left;
        word-wrap: break-word;
    }

    .table-mkt-primary.noborder-cell td {
        border-left: none;
        border-bottom: 1px solid rgb(109, 110, 112, 16%);
        padding: 8px;
        min-height: 40px;
        text-align: left;
        word-wrap: break-word;
    }



    .table-mkt-primary tr.active {
        background-color: rgba(207, 226, 255, 0.45);
    }

    .table-mkt-primary tr.selected {
        background-color: rgba(207, 226, 255, 0.45);
    }

    .table-mkt-primary.table-hover tbody tr:hover {
        background-color: rgba(207, 226, 255, 0.15);
        cursor: pointer;
    }

    .table-mkt-primary.table-focused tbody tr:has(:focus) th,
    .table-mkt-primary.table-focused tbody tr:has(:focus) td {
        background-color: rgba(207, 226, 255, 0.45);
    }


    .table-mkt-primary tr:focus {
        outline: none;
        --dxbl-text-edit-border-width: 0px;
    }

    .table-mkt-primary .group-header {
        display: table;
        align-items: center;
    }

        .table-mkt-primary .group-header td {
            display: flex;
            align-items: center;
        }

            .table-mkt-primary .group-header td .group-toggle:before {
                content: "\f285";
                font-family: "bootstrap-icons";
                margin-left: 8px;
                margin-right: 8px;
            }

        .table-mkt-primary .group-header.expanded td .group-toggle:before {
            content: "\f282";
            font-family: "bootstrap-icons";
            margin-left: 8px;
            margin-right: 8px;
        }

    .table-mkt-primary tr.group-content {
        display: none;
    }



    .table-mkt-primary.table-striped tbody tr:nth-of-type(odd) {
        background-color: rgba(207, 226, 255, 0.3);
    }


    .table-mkt-primary td:has(.entry-input) {
        padding: 0;
    }


    .table-mkt-primary td .entry-input {
        min-height: 32px;
        height: 100%;
        width: 100%;
        border: none !important;
        box-sizing: border-box;
        resize: none;
        padding: 4px 6px;
        background-color: transparent;
        --dxbl-text-edit-btn-padding-x: 6px;
        --dxbl-text-edit-btn-padding-y: 4px;
        --dxbl-text-edit-border-color: transparent;
        --dxbl-text-edit-border-style: none;
        --dxbl-text-edit-border-width: 0px;
        --dxbl-text-edit-focus-border-color: transparent;
        --dxbl-text-edit-border-radius: 0px;
        --dxbl-text-edit-focus-shadow-color: transparent;
        --dxbl-text-edit-focus-border-color: transparent;
    }

        .table-mkt-primary td .entry-input:focus {
            outline: none;
            border: none;
            box-shadow: none;
            --dxbl-text-edit-border-color: transparent;
            --dxbl-text-edit-border-style: none;
            --dxbl-text-edit-border-width: 0px;
        }



/***************************table excel*************************/
.table-mkt-excel-blue {
    --color-excel-0: #fff;
    --color-excel-1: rgb(218, 226, 242);
    --color-excel-2: rgb(143, 169, 219);
    --color-excel-3: rgb(69, 116, 196);
    --color-excel-4: rgb(48, 84, 150);
    --color-excel-5: rgb(7,20,55);
    --color-excel-outline: rgb(33, 115, 70);
}

.table-mkt-excel-gray {
    --color-excel-0: #fff;
    --color-excel-1: rgb(237, 237, 237);
    --color-excel-2: rgb(201, 201, 201);
    --color-excel-3: rgb(166, 166, 166);
    --color-excel-4: rgb(122, 122, 122);
    --color-excel-5: rgb(64, 64, 64);
    --color-excel-outline: rgb(33, 115, 70);
}

.table-mkt-excel-orange {
    --color-excel-0: #fff;
    --color-excel-1: rgba(237, 125, 50, 0.2);
    --color-excel-2: rgba(237, 125, 50, 0.6);
    --color-excel-3: rgba(237, 125, 50, 1);
    --color-excel-4: rgb(199, 90, 18);
    --color-excel-5: rgb(64, 64, 64);
    --color-excel-outline: rgb(33, 115, 70);
}

[class*="table-mkt-excel"].color-md {
    --bg-mkt-table-header: var(--color-excel-3);
    --color-mkt-table-header: var(--color-excel-0);
    --border-width-mkt-table: 1px;
    --border-color-mkt-table: var(--color-excel-2);
    --color-mkt-table-body: inherit;
    --border-color-mkt-table-cell-editing: var(--color-excel-outline);
    --outline-color-mkt-table-cell-editing: var(--color-excel-outline);
    --bg-mkt-table-body-odd: var(--color-excel-1);
    --bg-mkt-table-body-even: var(--color-excel-0);
}

[class*="table-mkt-excel"].color-light {
    --bg-mkt-table-header: var(--color-excel-3);
    --color-mkt-table-header: var(--color-excel-0);
    --border-width-mkt-table: 1px;
    --border-color-mkt-table: var(--color-excel-3);
    --color-mkt-table-body: inherit;
    --border-color-mkt-table-cell-editing: var(--color-excel-outline);
    --outline-color-mkt-table-cell-editing: var(--color-excel-outline);
    --bg-mkt-table-body-odd: var(--color-excel-0);
    --bg-mkt-table-body-even: var(--color-excel-0);
}

[class*="table-mkt-excel"].color-dark {
    --bg-mkt-table-header: var(--color-excel-5);
    --color-mkt-table-header: var(--color-excel-0);
    --border-width-mkt-table: 0px;
    --border-color-mkt-table: transparent;
    --color-mkt-table-body: var(--color-excel-0);
    --border-color-mkt-table-cell-editing: var(--color-excel-0);
    --outline-color-mkt-table-cell-editing: var(--color-excel-outline);
    --bg-mkt-table-body-odd: var(--color-excel-4);
    --bg-mkt-table-body-even: var(--color-excel-3);
}



[class*="table-mkt-excel"] {
    border-spacing: 0;
    border-collapse: separate;
    background-color: var(--color-excel-0);
    border: var(--border-width-mkt-table) solid var(--border-color-mkt-table);
    -moz-border-radius: var(--border-radius-mkt-small);
    -webkit-border-radius: var(--border-radius-mkt-small);
    width: 100%;
    height: 100%;
    position: relative;
    overflow: auto;
    display: block;
}

    [class*="table-mkt-excel"] thead {
        display: block;
        width: 100%;
        position: sticky;
        position: -webkit-sticky;
        top: 0px;
        background-color: var(--bg-mkt-table-header);
        color: var(--color-mkt-table-header);
        z-index: 1;
    }

    [class*="table-mkt-excel"] tbody {
        display: block;
        min-height: 40px;
    }


    [class*="table-mkt-excel"] tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }


    [class*="table-mkt-excel"] th:first-child {
        border-radius: var(--border-radius-mkt-small) 0 0 0;
        -moz-border-radius: var(--border-radius-mkt-small) 0 0 0;
        -webkit-border-radius: var(--border-radius-mkt-small) 0 0 0;
    }

    [class*="table-mkt-excel"] th:last-child {
        border-radius: 0 var(--border-radius-mkt-small) 0 0;
        -moz-border-radius: 0 var(--border-radius-mkt-small) 0 0;
        -webkit-border-radius: 0 var(--border-radius-mkt-small) 0 0;
    }

    [class*="table-mkt-excel"] td:first-child, [class*="table-mkt-excel"] th:first-child {
        border-left: medium none;
    }

    [class*="table-mkt-excel"] th {
        min-height: 40px;
        border-top: medium none;
        border-bottom: var(--border-width-mkt-table) solid var(--border-color-mkt-table);
        border-left: var(--border-width-mkt-table) solid var(--border-color-mkt-table);
        padding: 8px;
        vertical-align: middle;
        text-align: center;
        font-family: var(--font-mkt-primary);
        font-size: var(--font-size-mkt-primary);
        font-weight: 700;
    }

    [class*="table-mkt-excel"] td {
        border-left: var(--border-width-mkt-table) solid var(--border-color-mkt-table);
        border-bottom: var(--border-width-mkt-table) solid var(--border-color-mkt-table);
        padding: 8px;
        min-height: 40px;
        text-align: left;
        word-wrap: break-word;
    }


    [class*="table-mkt-excel"] .group-header {
        display: table;
        align-items: center;
    }

        [class*="table-mkt-excel"] .group-header td {
            display: flex;
            align-items: center;
        }

            [class*="table-mkt-excel"] .group-header td .group-toggle:before {
                content: "\f285";
                font-family: "bootstrap-icons";
                margin-left: 8px;
                margin-right: 8px;
            }

        [class*="table-mkt-excel"] .group-header.expanded td .group-toggle:before {
            content: "\f282";
            font-family: "bootstrap-icons";
            margin-left: 8px;
            margin-right: 8px;
        }

    [class*="table-mkt-excel"] tr.group-content {
        display: none;
    }



    [class*="table-mkt-excel"] tbody tr:nth-of-type(odd) {
        background-color: var(--bg-mkt-table-body-odd);
    }

    [class*="table-mkt-excel"] tbody tr:nth-of-type(even) {
        background-color: var(--bg-mkt-table-body-even);
    }

    [class*="table-mkt-excel"] th:has(.entry-input),
    [class*="table-mkt-excel"] td:has(.entry-input) {
        padding: 0;
    }

    [class*="table-mkt-excel"] .entry-input {
        min-height: 32px;
        height: 100%;
        width: 100%;
        border: none !important;
        box-sizing: border-box;
        resize: none;
        padding: 1px 2px;
        background-color: transparent;
        --dxbl-text-edit-btn-padding-x: 2px;
        --dxbl-text-edit-btn-padding-y: 1px;
        --dxbl-text-edit-border-color: transparent;
        --dxbl-text-edit-border-style: none;
        --dxbl-text-edit-border-width: 0px;
        --dxbl-text-edit-focus-border-color: transparent;
        --dxbl-text-edit-border-radius: 0px;
        --dxbl-text-edit-focus-shadow-color: transparent;
        --dxbl-text-edit-focus-border-color: transparent;
    }

        [class*="table-mkt-excel"] .entry-input:focus {
            outline: none;
            border: none;
            box-shadow: none;
            --dxbl-text-edit-border-color: transparent;
            --dxbl-text-edit-border-style: none;
            --dxbl-text-edit-border-width: 0px;
        }


    [class*="table-mkt-excel"] tbody th.active,
    [class*="table-mkt-excel"] tbody td.active,
    [class*="table-mkt-excel"] tbody th:focus-within,
    [class*="table-mkt-excel"] tbody td:focus-within {
        background-color: var(--color-excel-0);
        border: 1px solid var(--border-color-mkt-table-cell-editing);
        outline: 1px solid var(--outline-color-mkt-table-cell-editing);
    }

    [class*="table-mkt-excel"].column-labels thead tr th {
        position: relative;
    }

        [class*="table-mkt-excel"].column-labels thead tr th::before {
            content: attr(data-col);
            position: absolute;
            top: 4px;
            left: 8px;
            font-weight: bold;
            color: var(--color-mkt-table-header);
            pointer-events: none;
        }


    [class*="table-mkt-excel"].row-labels tbody tr td:first-child {
        position: relative;
    }

        [class*="table-mkt-excel"].row-labels tbody tr td:first-child::before {
            content: attr(data-row);
            position: absolute;
            left: -40px; /* hoặc tùy vào table layout */
            top: 50%;
            transform: translateY(-50%);
            font-weight: bold;
            color: var(--color-mkt-table-header);
            white-space: nowrap;
            pointer-events: none;
        }



/***************************chip*************************/
[class*="chip-mkt-"] {
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0 8px;
    height: 24px;
    border-radius: 12px;
    font-size: var(--font-size-mkt-sm);
    font-style: italic;
    border-width: 1px;
    border-style: solid;
    gap: 4px;
}

    [class*="chip-mkt-"] .img {
        flex-shrink: 0;
        height: 24px;
        width: 24px;
        border-radius: 50%;
    }

    [class*="chip-mkt-"] .text {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    [class*="chip-mkt-"] .close {
        flex-shrink: 0;
        color: var(--color-txt-mkt-danger);
        font-size: var(--font-size-mkt-primary);
        cursor: pointer;
        padding-left: 4px;
    }

.chip-mkt-primary {
    color: var(--color-txt-mkt-primary);
    background-color: var(--color-bg-mkt-light);
    border-color: var(--color-txt-mkt-primary);
}

.chip-mkt-secondary {
    color: var(--color-txt-mkt-primary);
    background-color: var(--color-bg-mkt-secondary);
    border-color: var(--color-txt-mkt-secondary);
}

.chip-mkt-danger {
    color: var(--color-txt-mkt-danger);
    background-color: var(--color-bg-mkt-danger);
    border-color: var(--color-txt-mkt-danger);
}

.chip-mkt-success {
    color: var(--color-txt-mkt-success);
    background-color: var(--color-bg-mkt-success);
    border-color: var(--color-txt-mkt-success);
}

.chip-mkt-warning {
    color: var(--color-txt-mkt-warning);
    background-color: var(--color-bg-mkt-warning);
    border-color: var(--color-txt-mkt-warning);
}

.chip-mkt-info {
    color: var(--color-txt-mkt-info);
    background-color: var(--color-bg-mkt-info);
    border-color: var(--color-txt-mkt-info);
}


.dxbl-checkbox.checkbox-mkt-primary {
    --dxbl-checkbox-check-element-checked-color: var(--color-txt-mkt-info);
    --dxbl-checkbox-checked-focus-shadow-color: var(--color-txt-mkt-info);
    --dxbl-checkbox-check-element-size: 16px;
    border-radius: var(--border-radius-mkt-small);
    align-items: center;
}

    .dxbl-checkbox.checkbox-mkt-primary:not(.dxbl-checkbox-switch):not(.dxbl-checkbox-radio) .dxbl-checkbox-check-element {
        width: 12px;
        height: 12px;
        border-radius: var(--border-radius-mkt-small);
    }

input[type=checkbox].checkbox-mkt-primary {
    -moz-appearance: none;
    -webkit-appearance: none;
    -o-appearance: none;
    outline: none;
    content: none;
    background-color: white;
    border-radius: var(--border-radius-mkt-small);
}

    input[type=checkbox].checkbox-mkt-primary:before {
        font-family: "FontAwesome";
        content: "\f00c";
        font-size: 12px;
        color: transparent !important;
        display: block;
        width: 16px;
        height: 16px;
        border: 1px solid rgb(109, 110, 112,32%);
        border-radius: var(--border-radius-mkt-small);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    input[type=checkbox].checkbox-mkt-primary:checked:before {
        color: var(--color-txt-mkt-info) !important;
        border: 1px solid var(--color-txt-mkt-info) !important;
    }


.txt-mkt-primary {
    border: 1px solid rgb(109, 110, 112, 16%);
    border-radius: var(--border-radius-mkt-small);
    box-sizing: border-box;
    resize: none;
    box-sizing: border-box;
    resize: none;
    height: 32px;
    width: 100%;
    padding: 4px 6px;
    --dxbl-text-edit-btn-padding-x: 4px;
    --dxbl-text-edit-btn-padding-y: 4px;
    --dxbl-text-edit-border-color: transparent;
    --dxbl-text-edit-border-style: none;
    --dxbl-text-edit-border-width: 0px;
    --dxbl-text-edit-focus-border-color: transparent;
    --dxbl-text-edit-border-radius: var(--border-radius-mkt-small);
    --dxbl-text-edit-focus-shadow-color: var(--color-bg-mkt-info);
    --dxbl-text-edit-focus-border-color: var(--color-txt-mkt-info);
}

    .txt-mkt-primary:focus {
        outline: none;
        border: 1px solid var(--color-txt-mkt-info);
        box-shadow: 0px 0px 2px 2px var(--color-bg-mkt-info);
        --dxbl-text-edit-border-color: transparent;
        --dxbl-text-edit-border-style: none;
        --dxbl-text-edit-border-width: 0px;
    }

    /*************************/
/*    .txt-mkt-primary ::placeholder {
        font-style: italic;
    }

    .txt-mkt-primary::placeholder {
        font-style: italic;
    }
*/    /*************************/

    .txt-mkt-primary .dxbl-image {
        --dxbl-image-height: 16px;
        --dxbl-image-width: 16px;
    }


    .txt-mkt-primary.small-img .dxbl-image {
        --dxbl-image-height: 10px;
        --dxbl-image-width: 10px;
    }


    .txt-mkt-primary .dxbl-text-edit > .dxbl-btn, .dxbl-text-edit > .dxbl-btn-group > .dxbl-btn {
        border: none;
    }



/*font*/
.font-mkt-primary {
    font-family: var(--font-mkt-primary);
    font-size: var(--font-size-mkt-primary);
    color: var(--color-txt-mkt-primary);
}

.font-mkt-secondary {
    font-family: var(--font-mkt-primary);
    font-size: var(--font-size-mkt-primary);
    color: var(--color-txt-mkt-secondary);
}

.font-mkt-info {
    font-family: var(--font-mkt-primary);
    font-size: var(--font-size-mkt-primary);
    color: var(--color-txt-mkt-info);
}

.font-mkt-danger {
    font-family: var(--font-mkt-primary);
    font-size: var(--font-size-mkt-primary);
    color: var(--color-txt-mkt-danger);
}

.font-mkt-success {
    font-family: var(--font-mkt-primary);
    font-size: var(--font-size-mkt-primary);
    color: var(--color-txt-mkt-success);
}

.font-mkt-warning {
    font-family: var(--font-mkt-primary);
    font-size: var(--font-size-mkt-primary);
    color: var(--color-txt-mkt-warning);
}

.sfont {
    font-size: var(--font-size-mkt-sm);
}

.hfont {
    font-size: var(--font-size-mkt-lg);
}

.semibold {
    font-weight: var(--font-weight-mkt-semibold);
}



.cs-pointer {
    cursor: pointer;
}