:root {
    /* --- Typography --- */
    --tru-font-family-sans: "Montserrat", serif;
    --tru-font-family-info: "Inter", serif;
    --tru-font-weight-700: 700;
    --tru-font-weight-600: 600;
    --tru-font-weight-500: 500;
    --tru-font-weight-400: 400;
    --tru-font-size-xxl: 48px;
    --tru-font-size-xl: 24px;
    --tru-font-size-lg: 20px;
    --tru-font-size-md: 16px;
    --tru-font-size-sm: 14px;
    --tru-font-size-xs: 12px;
    --tru-font-size-xxs: 11px;
    --tru-line-height-xxl: 52px;
    --tru-line-height-xl: 32px;
    --tru-line-height-lg: 28px;
    --tru-line-height-md: 24px;
    --tru-line-height-sm: 20px;
    --tru-line-height-xs: 16px;
    --tru-letter-spacing-01: -0.2%;
    --tru-letter-spacing-02: -2%;
    --tru-letter-spacing-03: -5%;
    /* --- Color --- */
    --tru-color-white: #FFFFFF;
    --tru-color-black: #000000;
    --tru-color-primary-light: #3EC6FF;
    --tru-color-primary: #05ABF2;
    --tru-color-primary-dark: #007BBD;
    --tru-color-secondary-light: #45E3B8;
    --tru-color-secondary: #02C2A0;
    --tru-color-secondary-dark: #009F75;
    --tru-color-sub-light: #CF3E40;
    --tru-color-sub: #9B1316;
    --tru-color-sub-dark: #6E0E10;
    --tru-color-surface-01: #F9F9F9;
    --tru-color-surface-02: #F4F4F4;
    --tru-color-surface-03: #EAEAEA;
    --tru-color-surface-04: #E0E0E0;
    --tru-color-surface-05: #E0E0E0;
    --tru-color-surface-06: #B3B3B3;
    --tru-color-surface-07: #999999;
    --tru-color-surface-08: #666666;
    --tru-color-surface-09: #4D4D4D;
    --tru-color-surface-10: #333333;
    --tru-color-surface-11: #222222;
    --tru-color-surface-12: #1A1A1A;
    --tru-color-surface-blue-01: #F1F4F7;
    --tru-color-surface-blue-02: #E3E7EB;
    --tru-color-surface-blue-03: #D5DADE;
    --tru-color-surface-blue-04: #C7CDD2;
    --tru-color-surface-blue-05: #B9C0C6;
    --tru-color-surface-blue-06: #ABB3BB;
    --tru-color-surface-blue-07: #9DA6AF;
    --tru-color-surface-blue-08: #8F99A3;
    --tru-color-surface-blue-09: #818C97;
    --tru-color-surface-blue-10: #73808B;
    --tru-color-surface-blue-11: #65747F;
    --tru-color-surface-blue-12: #65747F;
    --tru-color-blue-01: #E0F7FF;
    --tru-color-blue-02: #B3E9FF;
    --tru-color-blue-03: #80D9FF;
    --tru-color-blue-04: #2CB7F2;
    --tru-color-blue-05: #05ABF2;
    --tru-color-blue-06: #0599D8;
    --tru-color-blue-07: #0486BF;
    --tru-color-blue-08: #0373A5;
    --tru-color-blue-09: #02608C;
    --tru-color-blue-10: #014E72;
    --tru-color-blue-11: #003C59;
    --tru-color-blue-12: #002840;
    --tru-color-torquoise-01: #E0F8F7;
    --tru-color-torquoise-02: #B3EBE9;
    --tru-color-torquoise-03: #80DEDA;
    --tru-color-torquoise-04: #4DD0CC;
    --tru-color-torquoise-05: #26C3BD;
    --tru-color-torquoise-06: #20B7B1;
    --tru-color-torquoise-07: #169F9A;
    --tru-color-torquoise-08: #1D8B87;
    --tru-color-torquoise-09: #147F78;
    --tru-color-torquoise-10: #0E6961;
    --tru-color-torquoise-11: #09524A;
    --tru-color-torquoise-12: #043B33;
    --tru-color-red-01: #FFE5E5;
    --tru-color-red-02: #FFB3B3;
    --tru-color-red-03: #FF8080;
    --tru-color-red-04: #FF4D4D;
    --tru-color-red-05: #FF1A1A;
    --tru-color-red-06: #E60000;
    --tru-color-red-07: #CC0000;
    --tru-color-red-08: #B30000;
    --tru-color-red-09: #990000;
    --tru-color-red-10: #700000;
    --tru-color-red-11: #6E0E10;
    --tru-color-red-12: #4D0000;
    --tru-color-orange-01: #FFF4E0;
    --tru-color-orange-02: #FFDBB3;
    --tru-color-orange-03: #FFBF80;
    --tru-color-orange-04: #FF9F43;
    --tru-color-orange-05: #FF8500;
    --tru-color-orange-06: #E67300;
    --tru-color-orange-07: #CC6600;
    --tru-color-orange-08: #B35900;
    --tru-color-orange-09: #994D00;
    --tru-color-orange-10: #803D00;
    --tru-color-orange-11: #662E00;
    --tru-color-orange-12: #4D1F00;
    --tru-color-green-01: #E6FFE6;
    --tru-color-green-02: #A1FBC9;
    --tru-color-green-03: #8AECB5;
    --tru-color-green-04: #5DDF97;
    --tru-color-green-05: #28C76F;
    --tru-color-green-06: #20B25F;
    --tru-color-green-07: #19974E;
    --tru-color-green-08: #127D3E;
    --tru-color-green-09: #0B632E;
    --tru-color-green-10: #06491E;
    --tru-color-green-11: #03300E;
    --tru-color-green-12: #001900;
    --tru-color-purple-01: #F5E6FF;
    --tru-color-purple-02: #E0B3FF;
    --tru-color-purple-03: #CC80FF;
    --tru-color-purple-04: #B34DFF;
    --tru-color-purple-05: #9900FF;
    --tru-color-purple-06: #7000E6;
    --tru-color-purple-07: #6600CC;
    --tru-color-purple-08: #4D00B3;
    --tru-color-purple-09: #330099;
    --tru-color-purple-10: #1A007F;
    --tru-color-purple-11: #0D0066;
    --tru-color-purple-12: #00004D;
    /* Spacing */
    --tru-spacing-01: 2px;
    --tru-spacing-02: 4px;
    --tru-spacing-03: 6px;
    --tru-spacing-04: 8px;
    --tru-spacing-05: 12px;
    --tru-spacing-06: 16px;
    --tru-spacing-07: 18px;
    --tru-spacing-08: 20px;
    --tru-spacing-09: 24px;
    --tru-spacing-10: 28px;
    --tru-spacing-11: 32px;
    --tru-spacing-12: 36px;
    --tru-spacing-13: 40px;
    --tru-spacing-14: 44px;
    --tru-spacing-15: 48px;
    --tru-spacing-16: 56px;
    --tru-spacing-17: 64px;
    --tru-spacing-18: 80px;
    /* Radius */
    --tru-radius-xxs: 2px;
    --tru-radius-xs: 4px;
    --tru-radius-sm: 6px;
    --tru-radius-md: 8px;
    --tru-radius-lg: 10px;
    --tru-radius-xl: 12px;
    --tru-radius-xxl: 20px;
    --tru-radius-xxxs: 30px;
    --tru-radius-pill: 9999px;
    /* ----- Button Control ----- */
    --tru-btn-height-lg: 42px;
    --tru-btn-height-md: 38px;
    --tru-btn-height-sm: 34px;
    --tru-btn-height-xs: 28px;
    --tru-btn-padding-lg: 20px;
    --tru-btn-padding-md: 18px;
    --tru-btn-padding-sm: 16px;
    --tru-btn-padding-xs: 14px;
    --tru-btn-font-size-lg: 18px;
    --tru-btn-font-size-md: 16px;
    --tru-btn-font-size-sm: 14px;
    --tru-btn-font-size-xs: 12px;
    --tru-btn-font-weight-lg: 700;
    --tru-btn-font-weight-md: 600;
    --tru-btn-font-weight-sm: 500;
    --tru-btn-font-weight-xs: 500;
    --tru-btn-radius: 2px;
    --tru-btn-gap: 8px;
    /* ----- Badge Control ----- */
    --tru-bdg-height-lg: 28px;
    --tru-bdg-height-sm: 20px;
    --tru-bdg-padding-lg: 8px;
    --tru-bdg-padding-sm: 6px;
    --tru-bdg-font-size-lg: 16px;
    --tru-bdg-font-size-sm: 12px;
    --tru-bdg-font-weight-lg: 700;
    --tru-bdg-font-weight-sm: 600;
    --tru-bdg-radius: 6px;
    --tru-bdg-radius-round: 9999px;
}
    /* === Components === */
    /* --- Button --- */

/*    button {
        border: none !important;
        box-shadow: none !important;
    }
*/
/*Order Status Badge*/
.status {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: auto 0;
    letter-spacing: var(--tru-letter-spacing-02);
    border-radius: var(--tru-bdg-radius-round);
    text-align: center !important;
    font-family: var(--tru-font-family-sans) !important;
    border: none !important;
}

.status-lg {
    height: var(--tru-bdg-height-lg) !important;
    width: fit-content !important;
    font-size: var(--tru-bdg-font-size-lg);
    font-weight: var(--tru-bdg-font-weight-lg) !important;
    padding: 0 var(--tru-bdg-padding-lg);
}

.status-sm {
    height: var(--tru-bdg-height-sm) !important;
    width: 100px !important;
    font-size: var(--tru-bdg-font-size-sm);
    font-weight: var(--tru-bdg-font-weight-sm);
    padding: 0 var(--tru-bdg-padding-sm);
}

.status-open {
    background: var(--tru-color-primary) !important;
    color: var(--tru-color-white) !important;
}

.status-cancel {
    background: #333333;
    color: var(--tru-color-white) !important;
    border: none;
}
.status-confirmed {
    background: var(--tru-color-surface-03) !important;
    color: var(--tru-color-red-05) !important;
}
.status-submitted {
    background: var(--tru-color-green-07) !important;
    color: var(--tru-color-white) !important;
    border: none;
}
.status-inprogress {
    background: #0456ac;
    color: var(--tru-color-white) !important;
    border: none;
}
.status-invoiced {
    background: #7759b1;
    color: var(--tru-color-white) !important;
    border: none;
}

.status-info {
    background: var(--tru-color-primary) !important;
    color: var(--tru-color-white) !important;
}

.status-success {
    background: var(--tru-color-green-07) !important;
    color: var(--tru-color-white) !important;
    border: none;
}

.status-warning {
    background: #f5ae10;
    color: #fff;
}

.status-danger {
    background: #be1d2c;
    color: #fff;
}

.status-submit {
    background: var(--tru-color-green-07) !important;
    color: var(--tru-color-white) !important;
    border: none;
}

.status-shipped {
    background: #0456ac;
    color: var(--tru-color-white) !important;
    border: none;
}

.status-paid,
.status-processed {
    background: #7759b1;
    color: var(--tru-color-white) !important;
    border: none;
}

.status-canceled,
.status-hold {
    background: #333333;
    color: var(--tru-color-white) !important;
    border: none;
}
/*Order Type Badge*/
.tru-ot-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 14px !important;
    letter-spacing: var(--tru-letter-spacing-02) !important;
    border: 1px solid var(--tru-color-surface-blue-02) !important;
    background: var(--tru-color-surface-01) !important;
    width: fit-content !important;
    height: var(--tru-bdg-height-sm) !important;
    border-radius: var(--tru-bdg-radius) !important;
    padding: 0 var(--tru-bdg-padding-sm) !important;
}
.ot-stock {
    color: var(--tru-color-blue-05) !important;
}
.ot-promo {
    color: var(--tru-color-blue-05) !important;
}
.ot-stockreorder {
    color: var(--tru-color-blue-05) !important;
}
.ot-custom {
    color: var(--tru-color-purple-10) !important;
}
.ot-customremill {
    color: var(--tru-color-purple-09) !important;
}
.ot-subscription{
    color:var(--tru-color-torquoise-07) !important;
}
.ot-surgicalguide {
    color: var(--tru-color-surface-10) !important;
}


/*.tru-ot-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: auto 0;
    letter-spacing: var(--tru-letter-spacing-02);
    border-radius: var(--tru-bdg-radius);
    border: none !important;
    text-align: center !important;
    font-family: var(--tru-font-family-sans) !important;
    height: var(--tru-bdg-height-sm) !important;
    width: fit-content !important;
    font-size: var(--tru-bdg-font-size-sm);
    font-weight: var(--tru-bdg-font-weight-sm);
    padding: 0 var(--tru-bdg-padding-sm);*/
/*    background: var(--tru-color-surface-02) !important;*/
    /*color:var(--tru-color-surface-12) !important;
}

.ot-stock::before {
    content: "";
    background: var(--tru-color-blue-07) !important;
    width:6px;
    height:6px;
    border-radius:2px;
    margin:1px;
    margin-right:4px;
}

.ot-promo::before {
    content: "";
    background: var(--tru-color-blue-10) !important;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    margin: 1px;
    margin-right: 4px;
}

.ot-stockreorder::before {
    content: "";
    background: var(--tru-color-green-08) !important;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    margin: 1px;
    margin-right: 4px;
}

.ot-custom::before {
    content: "";
    background: var(--tru-color-purple-07) !important;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    margin: 1px;
    margin-right: 4px;
}

.ot-customremill::before {
    content: "";
    background: var(--tru-color-purple-04) !important;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    margin: 1px;
    margin-right: 4px;
}

.ot-subscription::before {
    content: "";
    background: color: var(--tru-color-orange-08) !important;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    margin: 1px;
    margin-right: 4px;
}*/




/* Status Badge End */
/* SubStatus Badge Start*/
.substatus-designing {
    display: inline-block;
    width: 80px;
    color: #BB6BD9;
    font-size: 12px;
    padding: 1px;
    margin: 2px;
    margin-top: 3px;
    background-color: #F1E1F7;
    border-radius: 2px;
}

.substatus-clientresponseneeded {
    display: inline-block;
    width: 80px;
    color: #FF6060;
    font-size: 12px;
    padding: 1px;
    margin: 2px;
    margin-top: 3px;
    background-color: #F8D6D6;
    border-radius: 2px;
}

.substatus-approved {
    display: inline-block;
    width: 80px;
    color: #32CC25;
    font-size: 12px;
    padding: 1px;
    margin: 2px;
    margin-top: 3px;
    background-color: #DDF8D6;
    border-radius: 2px;
}

.substatus-inproduction {
    display: inline-block;
    width: 80px;
    color: #F39C12;
    font-size: 12px;
    padding: 1px;
    margin: 2px;
    margin-top: 3px;
    background-color: #FCEBDB;
    border-radius: 2px;
}

.substatus-accedpted {
    display: inline-block;
    width: 80px;
    color: #3498DB;
    font-size: 12px;
    padding: 1px;
    margin: 2px;
    margin-top: 3px;
    background-color: #D6EAF8;
    border-radius: 2px;
}

.substatus-blank {
    display: inline-block;
    width: 80px;
    color: #888888;
    font-size: 12px;
    padding: 1px;
    margin: 2px;
    margin-top: 3px;
    background-color: #e5e6e7;
    border-radius: 2px;
}



/* Button Primary Fill Large */
.tru-btn-primary-fill-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-lg);
    padding: 0 var(--tru-btn-padding-lg);
    border-radius: var(--tru-btn-radius);
    background-color: var(--tru-color-primary);
    color: var(--tru-color-white) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-lg);
    font-weight: var(--tru-btn-font-weight-lg);
    white-space: nowrap !important;
    border: none !important;
}

.tru-btn-primary-fill-lg.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-lg);
    padding: 0 var(--tru-btn-padding-lg);
    border-radius: var(--tru-btn-radius);
    background-color: var(--tru-color-blue-01);
    color: var(--tru-color-white) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-lg);
    font-weight: var(--tru-btn-font-weight-lg);
    white-space: nowrap;
    border: none !important;
    pointer-events: none !important;
}

/* Button Primary Line Large */

.tru-btn-primary-line-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-lg);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-lg);
    border-radius: var(--tru-btn-radius);
    background-color: transparent !important;
    color: var(--tru-color-primary) !important;
    box-shadow: inset 0 0 0 1px var(--tru-color-primary) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-lg);
    font-weight: var(--tru-btn-font-weight-lg);
    white-space: nowrap;
}

.tru-btn-primary-line-lg.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-lg);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-lg);
    border-radius: var(--tru-btn-radius);
    background-color: transparent !important;
    color: var(--tru-color-blue-01) !important;
    box-shadow: inset 0 0 0 1px var(--tru-color-blue-01) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-lg);
    font-weight: var(--tru-btn-font-weight-lg);
    border: none !important;
    white-space: nowrap;
    pointer-events: none !important;
}

/* Button Primary Fill Medium */
.tru-btn-primary-fill-md {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-md);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-md);
    border-radius: var(--tru-btn-radius);
    background-color: var(--tru-color-primary);
    color: var(--tru-color-white) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-md);
    font-weight: var(--tru-btn-font-weight-md);
    border: none !important;
    white-space: nowrap;
    border: none !important;
}

.tru-btn-primary-fill-md.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-md);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-md);
    border-radius: var(--tru-btn-radius);
    background-color: var(--tru-color-blue-01);
    color: var(--tru-color-white) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-md);
    font-weight: var(--tru-btn-font-weight-md);
    white-space: nowrap;
    border: none !important;
    pointer-events: none !important;
}

/* Button Primary Line Medium */
.tru-btn-primary-line-md {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-md);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-md);
    border-radius: var(--tru-btn-radius);
    background-color: transparent !important;
    color: var(--tru-color-primary) !important;
    box-shadow: inset 0 0 0 1px var(--tru-color-primary) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-md);
    font-weight: var(--tru-btn-font-weight-md);
    white-space: nowrap;
}

.tru-btn-primary-line-md.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-md);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-md);
    border-radius: var(--tru-btn-radius);
    background-color: transparent !important;
    color: var(--tru-color-blue-01) !important;
    box-shadow: inset 0 0 0 1px var(--tru-color-blue-01) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-md);
    font-weight: var(--tru-btn-font-weight-md);
    white-space: nowrap;
    pointer-events: none !important;
}

/* Button Primary Fill Small */
.tru-btn-primary-fill-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-sm);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-sm);
    border-radius: var(--tru-btn-radius);
    background-color: var(--tru-color-primary);
    color: var(--tru-color-white) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-sm);
    font-weight: var(--tru-btn-font-weight-sm);
    white-space: nowrap;
    border: none !important;
}

.tru-btn-primary-fill-sm.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-sm);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-sm);
    border-radius: var(--tru-btn-radius);
    background-color: var(--tru-color-blue-01);
    color: var(--tru-color-white) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-sm);
    font-weight: var(--tru-btn-font-weight-sm);
    white-space: nowrap;
    border: none !important;
    pointer-events: none;
    pointer-events: none !important;
}

/* Button Primary Line Small */
.tru-btn-primary-line-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-sm);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-sm);
    border-radius: var(--tru-btn-radius);
    background-color: transparent !important;
    color: var(--tru-color-primary) !important;
    box-shadow: inset 0 0 0 1px var(--tru-color-primary) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-sm);
    font-weight: var(--tru-btn-font-weight-sm);
    white-space: nowrap;
}

.tru-btn-primary-line-sm.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-sm);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-sm);
    border-radius: var(--tru-btn-radius);
    background-color: transparent !important;
    color: var(--tru-color-blue-01) !important;
    box-shadow: inset 0 0 0 1px var(--tru-color-blue-01) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-sm);
    font-weight: var(--tru-btn-font-weight-sm);
    white-space: nowrap;
    pointer-events: none !important;
}


/* Button Primary Fill Extra Small */
.tru-btn-primary-fill-xs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-xs);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-xs);
    border-radius: var(--tru-btn-radius);
    background-color: var(--tru-color-primary);
    color: var(--tru-color-white) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-xs);
    font-weight: var(--tru-btn-font-weight-xs);
    white-space: nowrap !important;
    border: none !important;
}

.tru-btn-primary-fill-xs.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-xs);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-xs);
    border-radius: var(--tru-btn-radius);
    background-color: var(--tru-color-blue-01);
    color: var(--tru-color-white) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-xs);
    font-weight: var(--tru-btn-font-weight-xs);
    white-space: nowrap;
    border: none !important;
    pointer-events: none !important;
}

/* Button Primary line Extra Small */

.tru-btn-primary-line-xs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-xs);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-xs);
    border-radius: var(--tru-btn-radius);
    background-color: transparent !important;
    color: var(--tru-color-primary) !important;
    box-shadow: inset 0 0 0 1px var(--tru-color-primary) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-xs);
    font-weight: var(--tru-btn-font-weight-xs);
    white-space: nowrap;
}

.tru-btn-primary-line-xs.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-xs);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-xs);
    border-radius: var(--tru-btn-radius);
    background-color: transparent !important;
    color: var(--tru-color-blue-01) !important;
    box-shadow: inset 0 0 0 1px var(--tru-color-blue-01) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-xs);
    font-weight: var(--tru-btn-font-weight-xs);
    border: none !important;
    white-space: nowrap;
    pointer-events: none !important;
}

/* Button Primary Text Large */
.tru-btn-primary-text-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    width: fit-content;
    color: var(--tru-color-primary) !important;
    background: transparent;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-lg);
    font-weight: var(--tru-btn-font-weight-lg);
    white-space: nowrap;
}

.tru-btn-primary-text-lg.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    width: fit-content;
    color: var(--tru-color-blue-01) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-lg);
    font-weight: var(--tru-btn-font-weight-lg);
    white-space: nowrap;
    pointer-events: none !important;
}

/* Button Primary Text Medium */
.tru-btn-primary-text-md {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    width: fit-content;
    color: var(--tru-color-primary) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-md);
    font-weight: var(--tru-btn-font-weight-md);
    white-space: nowrap;
}

.tru-btn-primary-text-md.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    width: fit-content;
    color: var(--tru-color-blue-01) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-md);
    font-weight: var(--tru-btn-font-weight-md);
    white-space: nowrap;
    pointer-events: none !important;
}

/* Button Primary Text Small */
.tru-btn-primary-text-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    width: fit-content;
    color: var(--tru-color-primary) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-sm);
    font-weight: var(--tru-btn-font-weight-sm);
    white-space: nowrap;
}

.tru-btn-primary-text-sm.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    width: fit-content;
    color: var(--tru-color-blue-01) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-sm);
    font-weight: var(--tru-btn-font-weight-sm);
    white-space: nowrap;
    pointer-events: none !important;
}


/* Button Primary Text Extra Small */
.tru-btn-primary-text-xs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    width: fit-content;
    color: var(--tru-color-primary) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-xs);
    font-weight: var(--tru-btn-font-weight-xs);
    white-space: nowrap;
}

.tru-btn-primary-text-xs.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    width: fit-content;
    color: var(--tru-color-blue-01) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-xs);
    font-weight: var(--tru-btn-font-weight-xs);
    white-space: nowrap;
    pointer-events: none !important;
}

/* Button secondary Fill Large */
.tru-btn-secondary-fill-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-lg);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-lg);
    border-radius: var(--tru-btn-radius);
    background-color: var(--tru-color-blue-12);
    color: var(--tru-color-white) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-lg);
    font-weight: var(--tru-btn-font-weight-lg);
    white-space: nowrap;
    border: none !important;
}

.tru-btn-secondary-fill-lg.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-lg);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-lg);
    border-radius: var(--tru-btn-radius);
    background-color: var(--tru-color-surface-blue-02);
    color: var(--tru-color-white) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-lg);
    font-weight: var(--tru-btn-font-weight-lg);
    white-space: nowrap;
    border: none !important;
    pointer-events:none !important;
}

/* Button secondary Line Large */
.tru-btn-secondary-line-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-lg);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-lg);
    border-radius: var(--tru-btn-radius);
    background-color: transparent !important;
    color: var(--tru-color-blue-12) !important;
    box-shadow: inset 0 0 0 1px var(--tru-color-blue-12) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-lg);
    font-weight: var(--tru-btn-font-weight-lg);
    white-space: nowrap;
}

.tru-btn-secondary-line-lg.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-lg);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-lg);
    border-radius: var(--tru-btn-radius);
    background-color: transparent !important;
    color: var(--tru-color-surface-blue-02) !important;
    box-shadow: inset 0 0 0 1px var(--tru-color-surface-blue-02) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-lg);
    font-weight: var(--tru-btn-font-weight-lg);
    white-space: nowrap;
    pointer-events: none !important;
}

/* Button secondary Fill Medium */

.tru-btn-secondary-fill-md {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-md);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-md);
    border-radius: var(--tru-btn-radius);
    background-color: var(--tru-color-blue-12);
    color: var(--tru-color-white) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-md);
    font-weight: var(--tru-btn-font-weight-md);
    white-space: nowrap;
    border: none !important;
}

.tru-btn-secondary-fill-md.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-md);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-md);
    border-radius: var(--tru-btn-radius);
    background-color: var(--tru-color-surface-blue-02);
    color: var(--tru-color-white) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-md);
    font-weight: var(--tru-btn-font-weight-md);
    white-space: nowrap;
    border: none !important;
    pointer-events: none !important;
}

/* Button secondary Line Medium */
.tru-btn-secondary-line-md {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-md);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-md);
    border-radius: var(--tru-btn-radius);
    background-color: transparent !important;
    color: var(--tru-color-blue-12) !important;
    box-shadow: inset 0 0 0 1px var(--tru-color-blue-12) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-md);
    font-weight: var(--tru-btn-font-weight-md);
    white-space: nowrap;
}

.tru-btn-secondary-line-md.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-md);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-md);
    border-radius: var(--tru-btn-radius);
    background-color: transparent !important;
    color: var(--tru-color-surface-blue-02) !important;
    box-shadow: inset 0 0 0 1px var(--tru-color-surface-blue-02) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-md);
    font-weight: var(--tru-btn-font-weight-md);
    white-space: nowrap;
    pointer-events: none !important;
}

/* Button Secondary Fill Small */

.tru-btn-secondary-fill-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-sm);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-sm);
    border-radius: var(--tru-btn-radius);
    background-color: var(--tru-color-blue-12);
    color: var(--tru-color-white) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-sm);
    font-weight: var(--tru-btn-font-weight-sm);
    white-space: nowrap;
    border: none !important;
}

.tru-btn-secondary-fill-sm.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-sm);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-sm);
    border-radius: var(--tru-btn-radius);
    background-color: var(--tru-color-surface-blue-02);
    color: var(--tru-color-white) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-sm);
    font-weight: var(--tru-btn-font-weight-sm);
    white-space: nowrap;
    border: none !important;
    pointer-events: none !important;
}

/* Button Secondary Line Small */
.tru-btn-secondary-line-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-sm);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-sm);
    border-radius: var(--tru-btn-radius);
    background-color: transparent !important;
    color: var(--tru-color-blue-12) !important;
    box-shadow: inset 0 0 0 1px var(--tru-color-blue-12) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-sm);
    font-weight: var(--tru-btn-font-weight-sm);
    white-space: nowrap;
}

.tru-btn-secondary-line-sm.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-sm);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-sm);
    border-radius: var(--tru-btn-radius);
    background-color: transparent !important;
    color: var(--tru-color-surface-blue-02) !important;
    box-shadow: inset 0 0 0 1px var(--tru-color-surface-blue-02) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-sm);
    font-weight: var(--tru-btn-font-weight-sm);
    white-space: nowrap;
    pointer-events: none !important;
}

/* Button Secondary Extra Small */

.tru-btn-secondary-fill-xs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-xs);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-xs);
    border-radius: var(--tru-btn-radius);
    background-color: var(--tru-color-blue-12);
    color: var(--tru-color-white) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-xs);
    font-weight: var(--tru-btn-font-weight-xs);
    white-space: nowrap;
    border: none !important;
}

.tru-btn-secondary-fill-xs.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-xs);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-xs);
    border-radius: var(--tru-btn-radius);
    background-color: var(--tru-color-surface-blue-02);
    color: var(--tru-color-white) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-xs);
    font-weight: var(--tru-btn-font-weight-xs);
    white-space: nowrap;
    border: none !important;
    pointer-events: none !important;
}

/* Button secondary Line extra small */
.tru-btn-secondary-line-xs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-xs);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-xs);
    border-radius: var(--tru-btn-radius);
    background-color: transparent !important;
    color: var(--tru-color-blue-12) !important;
    box-shadow: inset 0 0 0 1px var(--tru-color-blue-12) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-xs);
    font-weight: var(--tru-btn-font-weight-xs);
    white-space: nowrap;
}

.tru-btn-secondary-line-xs.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-xs);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-xs);
    border-radius: var(--tru-btn-radius);
    background-color: transparent !important;
    color: var(--tru-color-surface-blue-02) !important;
    box-shadow: inset 0 0 0 1px var(--tru-color-surface-blue-02) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-xs);
    font-weight: var(--tru-btn-font-weight-xs);
    white-space: nowrap;
    pointer-events: none !important;
}

/* Button secondary Text Large */
.tru-btn-secondary-text-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    width: fit-content;
    color: var(--tru-color-blue-12) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-lg);
    font-weight: var(--tru-btn-font-weight-lg);
    white-space: nowrap;
}

.tru-btn-secondary-text-lg.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    width: fit-content;
    color: var(--tru-color-surface-blue-02) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-lg);
    font-weight: var(--tru-btn-font-weight-lg);
    white-space: nowrap;
    pointer-events: none !important;
}

/* Button secondary Text Medium */
.tru-btn-secondary-text-md {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    width: fit-content;
    color: var(--tru-color-blue-12) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-md);
    font-weight: var(--tru-btn-font-weight-md);
    white-space: nowrap;
}

.tru-btn-secondary-text-md.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    width: fit-content;
    color: var(--tru-color-surface-blue-02) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-md);
    font-weight: var(--tru-btn-font-weight-md);
    white-space: nowrap;
    pointer-events: none !important;
}

/* Button secondary Text Small */
.tru-btn-secondary-text-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    width: fit-content;
    color: var(--tru-color-blue-12) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-sm);
    font-weight: var(--tru-btn-font-weight-sm);
    white-space: nowrap;
}

.tru-btn-secondary-text-sm.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    width: fit-content;
    color: var(--tru-color-surface-blue-02) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-sm);
    font-weight: var(--tru-btn-font-weight-sm);
    white-space: nowrap;
    pointer-events: none !important;
}

/* Button Secondary Text Extra Small */
.tru-btn-secondary-text-xs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    width: fit-content;
    color: var(--tru-color-blue-12) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-xs);
    font-weight: var(--tru-btn-font-weight-xs);
    white-space: nowrap;
}

.tru-btn-secondary-text-xs.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    width: fit-content;
    color: var(--tru-color-surface-blue-02) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-xs);
    font-weight: var(--tru-btn-font-weight-xs);
    white-space: nowrap;
    pointer-events: none !important;
}

/* Button Tertiary Fill Large */
.tru-btn-tertiary-fill-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-lg);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-lg);
    border-radius: var(--tru-btn-radius);
    background-color: var(--tru-color-surface-blue-05);
    color: var(--tru-color-white) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-lg);
    font-weight: var(--tru-btn-font-weight-lg);
    white-space: nowrap;
    border: none !important;
}

.tru-btn-tertiary-fill-lg.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-lg);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-lg);
    border-radius: var(--tru-btn-radius);
    background-color: var(--tru-color-surface-blue-01);
    color: var(--tru-color-white) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-lg);
    font-weight: var(--tru-btn-font-weight-lg);
    white-space: nowrap;
    border: none !important;
    pointer-events: none !important;
}

/* Button Tertiary Line Large */
.tru-btn-tertiary-line-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-lg);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-lg);
    border-radius: var(--tru-btn-radius);
    background-color: transparent !important;
    color: var(--tru-color-surface-blue-05) !important;
    box-shadow: inset 0 0 0 1px var(--tru-color-surface-blue-05) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-lg);
    font-weight: var(--tru-btn-font-weight-lg);
    white-space: nowrap;
}

.tru-btn-tertiary-line-lg.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-lg);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-lg);
    border-radius: var(--tru-btn-radius);
    background-color: transparent !important;
    color: var(--tru-color-surface-blue-01) !important;
    box-shadow: inset 0 0 0 1px var(--tru-color-surface-blue-01) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-lg);
    font-weight: var(--tru-btn-font-weight-lg);
    white-space: nowrap;
    pointer-events: none !important;
}

/* Button Tertiary Fill Medium */

.tru-btn-tertiary-fill-md {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-md);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-md);
    border-radius: var(--tru-btn-radius);
    background-color: var(--tru-color-surface-blue-05);
    color: var(--tru-color-white) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-md);
    font-weight: var(--tru-btn-font-weight-md);
    white-space: nowrap;
    border: none !important;
}

.tru-btn-tertiary-fill-md.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-md);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-md);
    border-radius: var(--tru-btn-radius);
    background-color: var(--tru-color-surface-blue-01);
    color: var(--tru-color-white) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-md);
    font-weight: var(--tru-btn-font-weight-md);
    white-space: nowrap;
    border: none !important;
    pointer-events: none !important;
}

/* Button Tertiary Line Medium */
.tru-btn-tertiary-line-md {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-md);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-md);
    border-radius: var(--tru-btn-radius);
    background-color: transparent !important;
    color: var(--tru-color-surface-blue-05) !important;
    box-shadow: inset 0 0 0 1px var(--tru-color-surface-blue-05) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-md);
    font-weight: var(--tru-btn-font-weight-md);
    white-space: nowrap;
}

.tru-btn-tertiary-line-md.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-md);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-md);
    border-radius: var(--tru-btn-radius);
    background-color: transparent !important;
    color: var(--tru-color-surface-blue-01) !important;
    box-shadow: inset 0 0 0 1px var(--tru-color-surface-blue-01) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-md);
    font-weight: var(--tru-btn-font-weight-md);
    white-space: nowrap;
    pointer-events: none !important;
}

/* Button Tertiary Fill Small */

.tru-btn-tertiary-fill-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-sm);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-sm);
    border-radius: var(--tru-btn-radius);
    background-color: var(--tru-color-surface-blue-05);
    color: var(--tru-color-white) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-sm);
    font-weight: var(--tru-btn-font-weight-sm);
    white-space: nowrap;
    border: none !important;
}

.tru-btn-tertiary-fill-sm.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-sm);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-sm);
    border-radius: var(--tru-btn-radius);
    background-color: var(--tru-color-surface-blue-01);
    color: var(--tru-color-white) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-sm);
    font-weight: var(--tru-btn-font-weight-sm);
    white-space: nowrap;
    border: none !important;
    pointer-events: none !important;
}

/* Button Tertiary Line Small */
.tru-btn-tertiary-line-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-sm);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-sm);
    border-radius: var(--tru-btn-radius);
    background-color: transparent !important;
    color: var(--tru-color-surface-blue-05) !important;
    box-shadow: inset 0 0 0 1px var(--tru-color-surface-blue-05) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-sm);
    font-weight: var(--tru-btn-font-weight-sm);
    white-space: nowrap;
}

.tru-btn-tertiary-line-sm.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-sm);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-sm);
    border-radius: var(--tru-btn-radius);
    background-color: transparent !important;
    color: var(--tru-color-surface-blue-01) !important;
    box-shadow: inset 0 0 0 1px var(--tru-color-surface-blue-01) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-sm);
    font-weight: var(--tru-btn-font-weight-sm);
    white-space: nowrap;
    pointer-events: none !important;
}


/* Button Tertiary Extra small */
.tru-btn-tertiary-fill-xs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-xs);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-xs);
    border-radius: var(--tru-btn-radius);
    background-color: var(--tru-color-surface-blue-05);
    color: var(--tru-color-white) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-xs);
    font-weight: var(--tru-btn-font-weight-xs);
    white-space: nowrap;
    border: none !important;
}

.tru-btn-tertiary-fill-xs.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-xs);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-xs);
    border-radius: var(--tru-btn-radius);
    background-color: var(--tru-color-surface-blue-01);
    color: var(--tru-color-white) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-xs);
    font-weight: var(--tru-btn-font-weight-xs);
    white-space: nowrap;
    border: none !important;
    pointer-events: none !important;
}

/* Button Tertiary Line extra small */
.tru-btn-tertiary-line-xs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-xs);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-xs);
    border-radius: var(--tru-btn-radius);
    background-color: transparent !important;
    color: var(--tru-color-surface-blue-05) !important;
    box-shadow: inset 0 0 0 1px var(--tru-color-surface-blue-05) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-xs);
    font-weight: var(--tru-btn-font-weight-xs);
    white-space: nowrap;
}

.tru-btn-tertiary-line-xs.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-xs);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-xs);
    border-radius: var(--tru-btn-radius);
    background-color: transparent !important;
    color: var(--tru-color-surface-blue-01) !important;
    box-shadow: inset 0 0 0 1px var(--tru-color-surface-blue-01) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-xs);
    font-weight: var(--tru-btn-font-weight-xs);
    white-space: nowrap;
    pointer-events: none !important;
}


/* Button tertiary Text Large */
.tru-btn-tertiary-text-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    width: fit-content;
    color: var(--tru-color-surface-blue-05) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-lg);
    font-weight: var(--tru-btn-font-weight-lg);
    white-space: nowrap;
}

.tru-btn-tertiary-text-lg.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    width: fit-content;
    color: var(--tru-color-surface-blue-01) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-lg);
    font-weight: var(--tru-btn-font-weight-lg);
    white-space: nowrap;
    pointer-events: none !important;
}

/* Button tertiary Text Medium */
.tru-btn-tertiary-text-md {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    width: fit-content;
    color: var(--tru-color-surface-blue-05) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-md);
    font-weight: var(--tru-btn-font-weight-md);
    white-space: nowrap;
}

.tru-btn-tertiary-text-md.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    width: fit-content;
    color: var(--tru-color-surface-blue-01) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-md);
    font-weight: var(--tru-btn-font-weight-md);
    white-space: nowrap;
    pointer-events: none !important;
}

/* Button tertiary Text Small */
.tru-btn-tertiary-text-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    width: fit-content;
    color: var(--tru-color-surface-blue-05) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-sm);
    font-weight: var(--tru-btn-font-weight-sm);
    white-space: nowrap;
}

.tru-btn-tertiary-text-sm.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    width: fit-content;
    color: var(--tru-color-surface-blue-01) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-sm);
    font-weight: var(--tru-btn-font-weight-sm);
    white-space: nowrap;
    pointer-events: none !important;
}

/* Button tertiary Text Extra Small */
.tru-btn-tertiary-text-xs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    width: fit-content;
    color: var(--tru-color-surface-blue-05) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-xs);
    font-weight: var(--tru-btn-font-weight-xs);
    white-space: nowrap;
}

.tru-btn-tertiary-text-xs.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    width: fit-content;
    color: var(--tru-color-surface-blue-01) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-xs);
    font-weight: var(--tru-btn-font-weight-xs);
    white-space: nowrap;
    pointer-events: none !important;
}


/* Button warning Fill Large */
.tru-btn-warning-fill-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-lg);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-lg);
    border-radius: var(--tru-btn-radius);
    background-color: var(--tru-color-red-08);
    color: var(--tru-color-white) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-lg);
    font-weight: var(--tru-btn-font-weight-lg);
    white-space: nowrap;
    border: none !important;
}

.tru-btn-warning-fill-lg.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-lg);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-lg);
    border-radius: var(--tru-btn-radius);
    background-color: var(--tru-color-red-01);
    color: var(--tru-color-white) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-lg);
    font-weight: var(--tru-btn-font-weight-lg);
    white-space: nowrap;
    border: none !important;
    pointer-events: none !important;
}

/* Button warning Line Large */
.tru-btn-warning-line-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-lg);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-lg);
    border-radius: var(--tru-btn-radius);
    background-color: transparent !important;
    color: var(--tru-color-red-08) !important;
    box-shadow: inset 0 0 0 1px var(--tru-color-red-08) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-lg);
    font-weight: var(--tru-btn-font-weight-lg);
    white-space: nowrap;
}

.tru-btn-warning-line-lg.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-lg);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-lg);
    border-radius: var(--tru-btn-radius);
    background-color: transparent !important;
    color: var(--tru-color-red-01) !important;
    box-shadow: inset 0 0 0 1px var(--tru-color-red-01) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-lg);
    font-weight: var(--tru-btn-font-weight-lg);
    white-space: nowrap;
    pointer-events: none !important;
}

/* Button warning Fill Medium */

.tru-btn-warning-fill-md {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-md);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-md);
    border-radius: var(--tru-btn-radius);
    background-color: var(--tru-color-red-08);
    color: var(--tru-color-white) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-md);
    font-weight: var(--tru-btn-font-weight-md);
    white-space: nowrap;
    border: none !important;
}

.tru-btn-warning-fill-md.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-md);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-md);
    border-radius: var(--tru-btn-radius);
    background-color: var(--tru-color-red-01);
    color: var(--tru-color-white) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-md);
    font-weight: var(--tru-btn-font-weight-md);
    white-space: nowrap;
    border: none !important;
    pointer-events: none !important;
}

/* Button warning Line Medium */
.tru-btn-warning-line-md {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-md);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-md);
    border-radius: var(--tru-btn-radius);
    background-color: transparent !important;
    color: var(--tru-color-red-08) !important;
    box-shadow: inset 0 0 0 1px var(--tru-color-red-08) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-md);
    font-weight: var(--tru-btn-font-weight-md);
    white-space: nowrap;
}

.tru-btn-warning-line-md.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-md);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-md);
    border-radius: var(--tru-btn-radius);
    background-color: transparent !important;
    color: var(--tru-color-red-01) !important;
    box-shadow: inset 0 0 0 1px var(--tru-color-red-01) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-md);
    font-weight: var(--tru-btn-font-weight-md);
    white-space: nowrap;
    pointer-events: none !important;
}

/* Button warning Fill Small */

.tru-btn-warning-fill-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-sm);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-sm);
    border-radius: var(--tru-btn-radius);
    background-color: var(--tru-color-red-08);
    color: var(--tru-color-white) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-sm);
    font-weight: var(--tru-btn-font-weight-sm);
    white-space: nowrap;
    border: none !important;
}

.tru-btn-warning-fill-sm.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-sm);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-sm);
    border-radius: var(--tru-btn-radius);
    background-color: var(--tru-color-red-01);
    color: var(--tru-color-white) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-sm);
    font-weight: var(--tru-btn-font-weight-sm);
    white-space: nowrap;
    border: none !important;
    pointer-events: none !important;
}

/* Button warning Line Small */
.tru-btn-warning-line-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-sm);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-sm);
    border-radius: var(--tru-btn-radius);
    background-color: transparent !important;
    color: var(--tru-color-red-08) !important;
    box-shadow: inset 0 0 0 1px var(--tru-color-red-08) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-sm);
    font-weight: var(--tru-btn-font-weight-sm);
    white-space: nowrap;
}

.tru-btn-warning-line-sm.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-sm);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-sm);
    border-radius: var(--tru-btn-radius);
    background-color: transparent !important;
    color: var(--tru-color-red-01) !important;
    box-shadow: inset 0 0 0 1px var(--tru-color-red-01) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-sm);
    font-weight: var(--tru-btn-font-weight-sm);
    white-space: nowrap;
    pointer-events: none !important;
}


/* Button warning Fill Extra Small */
.tru-btn-warning-fill-xs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-xs);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-xs);
    border-radius: var(--tru-btn-radius);
    background-color: var(--tru-color-red-08);
    color: var(--tru-color-white) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-xs);
    font-weight: var(--tru-btn-font-weight-xs);
    white-space: nowrap;
    border: none !important;
}

.tru-btn-warning-fill-xs.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-xs);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-xs);
    border-radius: var(--tru-btn-radius);
    background-color: var(--tru-color-red-01);
    color: var(--tru-color-white) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-xs);
    font-weight: var(--tru-btn-font-weight-xs);
    white-space: nowrap;
    border: none !important;
    pointer-events: none !important;
}

/* Button warning Line Extra Small */
.tru-btn-warning-line-xs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-xs);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-xs);
    border-radius: var(--tru-btn-radius);
    background-color: transparent !important;
    color: var(--tru-color-red-08) !important;
    box-shadow: inset 0 0 0 1px var(--tru-color-red-08) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-xs);
    font-weight: var(--tru-btn-font-weight-xs);
    white-space: nowrap;
}

.tru-btn-warning-line-xs.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    height: var(--tru-btn-height-xs);
    width: fit-content;
    padding: 0 var(--tru-btn-padding-xs);
    border-radius: var(--tru-btn-radius);
    background-color: transparent !important;
    color: var(--tru-color-red-01) !important;
    box-shadow: inset 0 0 0 1px var(--tru-color-red-01) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-xs);
    font-weight: var(--tru-btn-font-weight-xs);
    white-space: nowrap;
    pointer-events: none !important;
}

/* Button warning Text Large */
.tru-btn-warning-text-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    width: fit-content;
    color: var(--tru-color-red-08) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-lg);
    font-weight: var(--tru-btn-font-weight-lg);
    white-space: nowrap;
}

.tru-btn-warning-text-lg.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    width: fit-content;
    color: var(--tru-color-red-01) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-lg);
    font-weight: var(--tru-btn-font-weight-lg);
    white-space: nowrap;
    pointer-events: none !important;
}

/* Button warning Text Medium */
.tru-btn-warning-text-md {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    width: fit-content;
    color: var(--tru-color-red-08) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-md);
    font-weight: var(--tru-btn-font-weight-md);
    white-space: nowrap;
}

.tru-btn-warning-text-md.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    width: fit-content;
    color: var(--tru-color-red-01) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-md);
    font-weight: var(--tru-btn-font-weight-md);
    white-space: nowrap;
    pointer-events: none !important;
}

/* Button warning Text Small */
.tru-btn-warning-text-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    width: fit-content;
    color: var(--tru-color-red-08) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-sm);
    font-weight: var(--tru-btn-font-weight-sm);
    white-space: nowrap;
}

.tru-btn-warning-text-sm.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    width: fit-content;
    color: var(--tru-color-red-01) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-sm);
    font-weight: var(--tru-btn-font-weight-sm);
    white-space: nowrap;
    pointer-events: none !important;
}


/* Button warning Text Extra Small */
.tru-btn-warning-text-xs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    width: fit-content;
    color: var(--tru-color-red-08) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-xs);
    font-weight: var(--tru-btn-font-weight-xs);
    white-space: nowrap;
}

.tru-btn-warning-text-xs.disabled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tru-btn-gap);
    width: fit-content;
    color: var(--tru-color-red-01) !important;
    font-family: var(--tru-font-family-sans);
    letter-spacing: var(--tru-letter-spacing-01);
    font-size: var(--tru-btn-font-size-xs);
    font-weight: var(--tru-btn-font-weight-xs);
    white-space: nowrap;
    pointer-events: none !important;
}

/* Button Hover */
.tru-btn-primary-fill-lg:hover,
.tru-btn-primary-fill-md:hover,
.tru-btn-primary-fill-sm:hover,
.tru-btn-primary-fill-xs:hover {
    background-color: var(--tru-color-blue-04) !important;
}

.tru-btn-primary-line-lg:hover,
.tru-btn-primary-line-md:hover,
.tru-btn-primary-line-sm:hover,
.tru-btn-primary-line-xs:hover {
    background-color: var(--tru-color-primary) !important;
    color: var(--tru-color-white) !important;
}

.tru-btn-primary-text-lg:hover,
.tru-btn-primary-text-md:hover,
.tru-btn-primary-text-sm:hover {
    color: var(--tru-color-blue-04) !important;
    text-decoration:underline !important;
}

.tru-btn-primary-text-lg:hover > .tru-icon-primary,
.tru-btn-primary-text-md:hover > .tru-icon-primary,
.tru-btn-primary-text-sm:hover > .tru-icon-primary {
    background-color: var(--tru-color-blue-04) !important;
}

.tru-btn-secondary-fill-lg:hover,
.tru-btn-secondary-fill-md:hover,
.tru-btn-secondary-fill-sm:hover,
.tru-btn-secondary-fill-xs:hover {
    background-color: var(--tru-color-blue-11) !important;
}

.tru-btn-secondary-line-lg:hover,
.tru-btn-secondary-line-md:hover,
.tru-btn-secondary-line-sm:hover,
.tru-btn-secondary-line-xs:hover {
    background-color: var(--tru-color-blue-12) !important;
    color:var(--tru-color-white) !important;
}

.tru-btn-secondary-text-lg:hover,
.tru-btn-secondary-text-md:hover,
.tru-btn-secondary-text-sm:hover {
    color: var(--tru-color-blue-11) !important;
    text-decoration: underline !important;
}

/*.tru-btn-secondary-text-lg:hover > .tru-icon-blue-12,
.tru-btn-secondary-text-md:hover > .tru-icon-blue-12,
.tru-btn-secondary-text-sm:hover > .tru-icon-blue-12 {
    background-color: var(--tru-color-blue-11) !important;
}
*/
.tru-btn-tertiary-fill-lg:hover,
.tru-btn-tertiary-fill-md:hover,
.tru-btn-tertiary-fill-sm:hover,
.tru-btn-tertiary-fill-xs:hover {
    background-color: var(--tru-color-surface-blue-04) !important;
}

.tru-btn-tertiary-line-lg:hover,
.tru-btn-tertiary-line-md:hover,
.tru-btn-tertiary-line-sm:hover,
.tru-btn-tertiary-line-xs:hover {
    background-color: var(--tru-color-surface-blue-05) !important;
    color: var(--tru-color-white) !important;
}

.tru-btn-tertiary-text-lg:hover,
.tru-btn-tertiary-text-md:hover,
.tru-btn-tertiary-text-sm:hover {
    color: var(--tru-color-surface-blue-04) !important;
}

/*.tru-btn-tertiary-text-lg:hover > .tru-icon-surface-blue-05,
.tru-btn-tertiary-text-md:hover > .tru-icon-surface-blue-05,
.tru-btn-tertiary-text-sm:hover > .tru-icon-surface-blue-05 {
    background-color: var(--tru-color-surface-blue-04) !important;
}*/

.tru-btn-warning-fill-lg:hover,
.tru-btn-warning-fill-md:hover,
.tru-btn-warning-fill-sm:hover,
.tru-btn-warning-fill-xs:hover {
    background-color: var(--tru-color-red-07) !important;
}

.tru-btn-warning-line-lg:hover,
.tru-btn-warning-line-md:hover,
.tru-btn-warning-line-sm:hover,
.tru-btn-warning-line-xs:hover {
    background-color: var(--tru-color-red-08) !important;
    color: var(--tru-color-white) !important;
}

.tru-btn-warning-text-lg:hover,
.tru-btn-warning-text-md:hover,
.tru-btn-warning-text-sm:hover {
    color: var(--tru-color-red-08) !important;
}

/*    .tru-btn-warning-text-lg:hover > .tru-icon-red-08,
    .tru-btn-warning-text-md:hover > .tru-icon-red-08,
    .tru-btn-warning-text-sm:hover > .tru-icon-red-08 {
        background-color: var(--tru-color-red-10) !important;
    }*/

.tru-btn-primary-fill-lg.disabled:hover,
.tru-btn-primary-fill-md.disabled:hover,
.tru-btn-primary-fill-sm.disabled:hover,
.tru-btn-primary-fill-xs.disabled:hover,
.tru-btn-primary-line-lg.disabled:hover,
.tru-btn-primary-line-md.disabled:hover,
.tru-btn-primary-line-sm.disabled:hover,
.tru-btn-primary-line-xs.disabled:hover,
.tru-btn-primary-text-lg.disabled:hover,
.tru-btn-primary-text-md.disabled:hover,
.tru-btn-primary-text-sm.disabled:hover,
.tru-btn-secondary-fill-lg.disabled:hover,
.tru-btn-secondary-fill-md.disabled:hover,
.tru-btn-secondary-fill-sm.disabled:hover,
.tru-btn-secondary-fill-xs.disabled:hover,
.tru-btn-secondary-line-lg.disabled:hover,
.tru-btn-secondary-line-md.disabled:hover,
.tru-btn-secondary-line-sm.disabled:hover,
.tru-btn-secondary-line-xs.disabled:hover,
.tru-btn-secondary-text-lg.disabled:hover,
.tru-btn-secondary-text-md.disabled:hover,
.tru-btn-secondary-text-sm.disabled:hover,
.tru-btn-tertiary-fill-lg.disabled:hover,
.tru-btn-tertiary-fill-md.disabled:hover,
.tru-btn-tertiary-fill-sm.disabled:hover,
.tru-btn-tertiary-fill-xs.disabled:hover,
.tru-btn-tertiary-line-lg.disabled:hover,
.tru-btn-tertiary-line-md.disabled:hover,
.tru-btn-tertiary-line-sm.disabled:hover,
.tru-btn-tertiary-line-xs.disabled:hover,
.tru-btn-tertiary-text-lg.disabled:hover,
.tru-btn-tertiary-text-md.disabled:hover,
.tru-btn-tertiary-text-sm.disabled:hover,
.tru-btn-warning-fill-lg.disabled:hover,
.tru-btn-warning-fill-md.disabled:hover,
.tru-btn-warning-fill-sm.disabled:hover,
.tru-btn-warning-fill-xs.disabled:hover,
.tru-btn-warning-line-lg.disabled:hover,
.tru-btn-warning-line-md.disabled:hover,
.tru-btn-warning-line-sm.disabled:hover,
.tru-btn-warning-line-xs.disabled:hover,
.tru-btn-warning-text-lg.disabled:hover,
.tru-btn-warning-text-md.disabled:hover,
.tru-btn-warning-text-sm.disabled:hover {
    pointer-events:none !important;
}


.tru-btn-primary-fill-lg:hover,
.tru-btn-primary-fill-md:hover,
.tru-btn-primary-fill-sm:hover,
.tru-btn-primary-fill-xs:hover,
.tru-btn-primary-line-lg:hover,
.tru-btn-primary-line-md:hover,
.tru-btn-primary-line-sm:hover,
.tru-btn-primary-line-xs:hover,
.tru-btn-primary-text-lg:hover,
.tru-btn-primary-text-md:hover,
.tru-btn-primary-text-sm:hover,
.tru-btn-secondary-fill-lg:hover,
.tru-btn-secondary-fill-md:hover,
.tru-btn-secondary-fill-sm:hover,
.tru-btn-secondary-fill-xs:hover,
.tru-btn-secondary-line-lg:hover,
.tru-btn-secondary-line-md:hover,
.tru-btn-secondary-line-sm:hover,
.tru-btn-secondary-line-xs:hover,
.tru-btn-secondary-text-lg:hover,
.tru-btn-secondary-text-md:hover,
.tru-btn-secondary-text-sm:hover,
.tru-btn-tertiary-fill-lg:hover,
.tru-btn-tertiary-fill-md:hover,
.tru-btn-tertiary-fill-sm:hover,
.tru-btn-tertiary-fill-xs:hover,
.tru-btn-tertiary-line-lg:hover,
.tru-btn-tertiary-line-md:hover,
.tru-btn-tertiary-line-sm:hover,
.tru-btn-tertiary-line-xs:hover,
.tru-btn-tertiary-text-lg:hover,
.tru-btn-tertiary-text-md:hover,
.tru-btn-tertiary-text-sm:hover,
.tru-btn-warning-fill-lg:hover,
.tru-btn-warning-fill-md:hover,
.tru-btn-warning-fill-sm:hover,
.tru-btn-warning-fill-xs:hover,
.tru-btn-warning-line-lg:hover,
.tru-btn-warning-line-md:hover,
.tru-btn-warning-line-sm:hover,
.tru-btn-warning-line-xs:hover,
.tru-btn-warning-text-lg:hover,
.tru-btn-warning-text-md:hover,
.tru-btn-warning-text-sm:hover {
    cursor: pointer !important;
/*    transition: 0.1s ease-in;*/
}


.tru-bw-3 {
    width:120px !important;
}


.tru-bw-5 {
    width: 200px !important;
}