/* --- Icons --- */

/* --- Typography --- */
.t-display {
    font-family: var(--t-font-family-sans);
    font-size: var(--t-font-size-xxxl);
    font-weight: var(--t-font-weight-xl);
    line-height: var(--t-line-height-xxl);
    letter-spacing: var(--t-letter-spacing-01);
    color: var(--t-font-color) !important;
}

.t-title {
    font-family: var(--t-font-family-sans);
    font-size: var(--t-font-size-xxl);
    font-weight: var(--t-font-weight-xl);
    line-height: var(--t-line-height-xxl);
    letter-spacing: var(--t-letter-spacing-01);
    color: var(--t-font-color) !important;
}
.t-title-2 {
    font-family: var(--t-font-family-sans);
    font-size: var(--t-font-size-xl);
    font-weight: var(--t-font-weight-xl);
    line-height: var(--t-line-height-xl);
    letter-spacing: var(--t-letter-spacing-01);
    color: var(--t-font-color) !important;
}
.t-subtitle {
    font-family: var(--t-font-family-sans);
    font-size: var(--t-font-size-lg);
    font-weight: var(--t-font-weight-lg);
    line-height: var(--t-line-height-lg);
    letter-spacing: var(--t-letter-spacing-01);
    color: var(--t-font-color) !important;
}
.t-body-16-stronger {
    font-family: var(--t-font-family-sans);
    font-size: var(--t-font-size-md);
    font-weight: var(--t-font-weight-lg);
    line-height: var(--t-line-height-md);
    letter-spacing: var(--t-letter-spacing-01);
    color: var(--t-font-color) !important;
}

.t-body-16-strong {
    font-family: var(--t-font-family-sans);
    font-size: var(--t-font-size-md);
    font-weight: var(--t-font-weight-md);
    line-height: var(--t-line-height-md);
    letter-spacing: var(--t-letter-spacing-01);
    color: var(--t-font-color) !important;
}

.t-body-16 {
    font-family: var(--t-font-family-sans);
    font-size: var(--t-font-size-md);
    font-weight: var(--t-font-weight-sm);
    line-height: var(--t-line-height-md);
    letter-spacing: var(--t-letter-spacing-01);
    color: var(--t-font-color) !important;
}

.t-body-14-stronger {
    font-family: var(--t-font-family-sans);
    font-size: var(--t-font-size-sm);
    font-weight: var(--t-font-weight-lg);
    line-height: var(--t-line-height-sm);
    letter-spacing: var(--t-letter-spacing-01);
    color: var(--t-font-color) !important;
}

.t-body-14-strong {
    font-family: var(--t-font-family-sans);
    font-size: var(--t-font-size-sm);
    font-weight: var(--t-font-weight-md);
    line-height: var(--t-line-height-sm);
    letter-spacing: var(--t-letter-spacing-01);
    color: var(--t-font-color) !important;
}

.t-body-14 {
    font-family: var(--t-font-family-sans);
    font-size: var(--t-font-size-sm);
    font-weight: var(--t-font-weight-sm);
    line-height: var(--t-line-height-sm);
    letter-spacing: var(--t-letter-spacing-01);
    color: var(--t-font-color) !important;
}

.t-caption {
    font-family: var(--t-font-family-sans) !important;
    font-size: var(--t-font-size-xs) !important;
    font-weight: var(--t-font-weight-xs) !important;
    line-height: var(--t-line-height-xs) !important;
    letter-spacing: var(--t-letter-spacing-01) !important;
    color: var(--t-font-color) !important;
}
.t-info-22-stronger {
    font-family: var(--t-font-family-info);
    font-size: var(--t-font-size-xl);
    font-weight: var(--t-font-weight-xl);
    line-height: var(--t-line-height-xl);
    letter-spacing: var(--t-letter-spacing-03);
    color: var(--t-font-color) !important;
}

.t-info-16-stronger {
    font-family: var(--t-font-family-info);
    font-size: var(--t-font-size-md);
    font-weight: var(--t-font-weight-md);
    line-height: var(--t-line-height-md);
    letter-spacing: var(--t-letter-spacing-03);
    color: var(--t-font-color) !important;
}

.t-info-16-strong {
    font-family: var(--t-font-family-info);
    font-size: var(--t-font-size-md);
    font-weight: var(--t-font-weight-sm);
    line-height: var(--t-line-height-md);
    letter-spacing: var(--t-letter-spacing-03);
    color: var(--t-font-color) !important;
}

.t-info-16 {
    font-family: var(--t-font-family-info);
    font-size: var(--t-font-size-md);
    font-weight: var(--t-font-weight-md);
    line-height: var(--t-line-height-md);
    letter-spacing: var(--t-letter-spacing-03);
    color: var(--t-font-color) !important;
}

.t-info-14-stronger {
    font-family: var(--t-font-family-info);
    font-size: var(--t-font-size-sm);
    font-weight: var(--t-font-weight-sm);
    line-height: var(--t-line-height-sm);
    letter-spacing: var(--t-letter-spacing-03);
    color: var(--t-font-color) !important;
}

.t-info-14-strong {
    font-family: var(--t-font-family-info);
    font-size: var(--t-font-size-sm);
    font-weight: var(--t-font-weight-sm);
    line-height: var(--t-line-height-sm);
    letter-spacing: var(--t-letter-spacing-03);
    color: var(--t-font-color) !important;
}

.t-info-14 {
    font-family: var(--t-font-family-info);
    font-size: var(--t-font-size-sm);
    font-weight: var(--t-font-weight-sm);
    line-height: var(--t-line-height-sm);
    letter-spacing: var(--t-letter-spacing-03);
    color: var(--t-font-color) !important;
}
.t-info-12-stronger {
    font-family: var(--t-font-family-info);
    font-size: var(--t-font-size-xs);
    font-weight: var(--t-font-weight-md);
    line-height: var(--t-line-height-xs);
    letter-spacing: var(--t-letter-spacing-03);
    color: var(--t-font-color);
}
.t-info-12-strong {
    font-family: var(--t-font-family-info);
    font-size: var(--t-font-size-xs);
    font-weight: var(--t-font-weight-xs);
    line-height: var(--t-line-height-xs);
    letter-spacing: var(--t-letter-spacing-03);
    color: var(--t-font-color);
}

.t-info-12 {
    font-family: var(--t-font-family-info);
    font-size: var(--t-font-size-xs);
    font-weight: var(--t-font-weight-xs);
    line-height: var(--t-line-height-xs);
    letter-spacing: var(--t-letter-spacing-03);
    color: var(--t-font-color);
}

/* === Components === */



/* --- Button --- */

button {
    border: none !important;
    box-shadow: none !important;
}

/* Base Button Class */
.t-btn {
    display: inline-flex;
    box-sizing: border-box !important;
    align-items: center;
    justify-content: center;
    gap: var(--t-btn-gap);
    border-radius: var(--t-btn-radius);
    font-family: var(--t-font-family-sans);
    letter-spacing: var(--t-letter-spacing-01);
    white-space: nowrap !important;
    width:fit-content;
}
.t-btn-info {
    display: inline-flex;
    box-sizing: border-box !important;
    align-items: center;
    justify-content: center;
    gap: var(--t-btn-gap);
    border-radius: var(--t-btn-radius);
    font-family: var(--t-font-family-info);
    letter-spacing: var(--t-letter-spacing-03);
/*    white-space: nowrap !important;*/
    word-wrap:break-word;
    width:fit-content;
}
.t-btn:hover,
.t-btn-info:hover{
    transition: 0.2s ease-in;
    cursor: pointer !important;
}

/* Primary Button Variants */
.t-btn--primary-fill {
    border: none !important;
    background-color: var(--t-btn-color-primary);
    color: var(--t-color-white) !important;
}

.t-btn--primary-line {
    border: 1px solid var(--t-btn-color-primary) !important;
    background-color: transparent !important;
    color: var(--t-btn-color-primary) !important;
}

.t-btn--primary-text {
    border: none !important;
    background-color: transparent !important;
    color: var(--t-btn-color-primary) !important;
    padding: 0 !important;
    height: fit-content !important;
}

/* Secondary Button Variants */
.t-btn--secondary-fill {
    border: none !important;
    background-color: var(--t-btn-color-secondary);
    color: var(--t-color-white) !important;
}

.t-btn--secondary-line {
    border: 1px solid var(--t-btn-color-secondary) !important;
    background-color: transparent !important;
    color: var(--t-btn-color-secondary) !important;
}

.t-btn--secondary-text {
    border: none !important;
    background-color: transparent !important;
    color: var(--t-btn-color-secondary) !important;
    padding: 0 !important;
    height: fit-content !important;
}

/* Tertiary Button Variants */
.t-btn--tertiary-fill {
    border: none !important;
    background-color: var(--t-btn-color-tertiary);
    color: var(--t-color-white) !important;
}

.t-btn--tertiary-line {
    border: 1px solid var(--t-btn-color-tertiary) !important;
    background-color: transparent !important;
    color: var(--t-btn-color-tertiary) !important;
}

.t-btn--tertiary-text {
    border: none !important;
    background-color: transparent !important;
    color: var(--t-btn-color-tertiary) !important;
    padding: 0 !important;
    height: fit-content !important;
}

/* Warning Button Variants */
.t-btn--warning-fill {
    border: none !important;
    background-color: var(--t-btn-color-warning);
    color: var(--t-color-white) !important;
}

.t-btn--warning-line {
    border: 1px solid var(--t-btn-color-warning) !important;
    background-color: transparent !important;
    color: var(--t-btn-color-warning) !important;
}

.t-btn--warning-text {
    border: none !important;
    background-color: transparent !important;
    color: var(--t-btn-color-warning) !important;
    padding: 0 !important;
    height: fit-content !important;
}

/* Size Variants */
.t-btn--lg {
    height: var(--t-btn-height-lg);
    padding: 0 var(--t-btn-padding-lg);
    font-size: var(--t-btn-font-size-lg);
    font-weight: var(--t-btn-font-weight-lg);
}

.t-btn--md {
    height: var(--t-btn-height-md);
    padding: 0 var(--t-btn-padding-md);
    font-size: var(--t-btn-font-size-md);
    font-weight: var(--t-btn-font-weight-md);
}

.t-btn--sm {
    height: var(--t-btn-height-sm);
    padding: 0 var(--t-btn-padding-sm);
    font-size: var(--t-btn-font-size-sm);
    font-weight: var(--t-btn-font-weight-sm);
}

.t-btn--xs {
    height: var(--t-btn-height-xs);
    padding: 0 var(--t-btn-padding-xs);
    font-size: var(--t-btn-font-size-xs);
    font-weight: var(--t-btn-font-weight-xs);
}

/* Hover States */
.t-btn--primary-fill:hover {
    background-color: var(--t-btn-color-primary-hover) !important;
}

.t-btn--primary-line:hover {
    background-color: var(--t-btn-color-primary) !important;
    color: var(--t-color-white) !important;
}

.t-btn--primary-text:hover {
    color: var(--t-btn-color-primary-hover) !important;
}

.t-btn--secondary-fill:hover {
    background-color: var(--t-btn-color-secondary-hover) !important;
}

.t-btn--secondary-line:hover {
    background-color: var(--t-btn-color-secondary) !important;
    color: var(--t-color-white) !important;
}

.t-btn--secondary-text:hover {
    color: var(--t-btn-color-secondary-hover) !important;
}

.t-btn--tertiary-fill:hover {
    background-color: var(--t-btn-color-tertiary-hover) !important;
    color: var(--t-color-white) !important;
}

.t-btn--tertiary-line:hover {
    background-color: var(--t-btn-color-tertiary) !important;
    color: var(--t-color-white) !important;
}

.t-btn--tertiary-text:hover {
    color: var(--t-btn-color-tertiary-hover) !important;
}

.t-btn--warning-fill:hover {
    background-color: var(--t-btn-color-warning-hover) !important;
}

.t-btn--warning-line:hover {
    background-color: var(--t-btn-color-warning) !important;
    color: var(--t-color-white) !important;
}

.t-btn--warning-text:hover {
    color: var(--t-btn-color-warning-hover) !important;
}

/* Disabled States */
.t-btn--primary-fill:disabled,
.t-btn--primary-fill.disabled {
    background-color: var(--t-btn-color-primary-disabled) !important;
    color: var(--t-color-white) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.t-btn--primary-line:disabled,
.t-btn--primary-line.disabled {
    border-color: var(--t-btn-color-primary-disabled) !important;
    color: var(--t-btn-color-primary-disabled) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.t-btn--primary-text:disabled,
.t-btn--primary-text.disabled {
    color: var(--t-btn-color-primary-disabled) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.t-btn--secondary-fill:disabled,
.t-btn--secondary-fill.disabled {
    background-color: var(--t-btn-color-secondary-disabled) !important;
    color: var(--t-color-white) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.t-btn--secondary-line:disabled,
.t-btn--secondary-line.disabled {
    border-color: var(--t-btn-color-secondary-disabled) !important;
    color: var(--t-btn-color-secondary-disabled) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.t-btn--secondary-text:disabled,
.t-btn--secondary-text.disabled {
    color: var(--t-btn-color-secondary-disabled) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.t-btn--tertiary-fill:disabled,
.t-btn--tertiary-fill.disabled {
    background-color: var(--t-btn-color-tertiary-disabled) !important;
    color: var(--t-color-white) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.t-btn--tertiary-line:disabled,
.t-btn--tertiary-line.disabled {
    border-color: var(--t-btn-color-tertiary-disabled) !important;
    color: var(--t-btn-color-tertiary-disabled) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.t-btn--tertiary-text:disabled,
.t-btn--tertiary-text.disabled {
    color: var(--t-btn-color-tertiary-disabled) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.t-btn--warning-fill:disabled,
.t-btn--warning-fill.disabled {
    background-color: var(--t-btn-color-warning-disabled) !important;
    color: var(--t-color-white) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.t-btn--warning-line:disabled,
.t-btn--warning-line.disabled {
    border-color: var(--t-btn-color-warning-disabled) !important;
    color: var(--t-btn-color-warning-disabled) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.t-btn--warning-text:disabled,
.t-btn--warning-text.disabled {
    color: var(--t-btn-color-warning-disabled) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Active States */
.t-btn--primary-fill:active {
    outline: 2px solid var(--t-btn-color-primary) !important;
    outline-offset: 2px;
}

.t-btn--primary-line:active {
    outline: 2px solid var(--t-btn-color-primary) !important;
    outline-offset: 2px;
}

.t-btn--primary-text:active {
    outline: 2px solid var(--t-btn-color-primary) !important;
    outline-offset: 2px;
}

.t-btn--secondary-fill:active {
    outline: 2px solid var(--t-btn-color-secondary) !important;
    outline-offset: 2px;
}

.t-btn--secondary-line:active {
    outline: 2px solid var(--t-btn-color-secondary) !important;
    outline-offset: 2px;
}

.t-btn--secondary-text:active {
    outline: 2px solid var(--t-btn-color-secondary) !important;
    outline-offset: 2px;
}

.t-btn--tertiary-fill:active {
    outline: 2px solid var(--t-btn-color-tertiary) !important;
    outline-offset: 2px;
}

.t-btn--tertiary-line:active {
    outline: 2px solid var(--t-btn-color-tertiary) !important;
    outline-offset: 2px;
}

.t-btn--tertiary-text:active {
    outline: 2px solid var(--t-btn-color-tertiary) !important;
    outline-offset: 2px;
}

.t-btn--warning-fill:active {
    outline: 2px solid var(--t-btn-color-warning) !important;
    outline-offset: 2px;
}

.t-btn--warning-line:active {
    outline: 2px solid var(--t-btn-color-warning) !important;
    outline-offset: 2px;
}

.t-btn--warning-text:active {
    outline: 2px solid var(--t-btn-color-warning) !important;
    outline-offset: 2px;
}

/* Active States - .active class */
.t-btn--primary-fill.active {
    outline: 2px solid var(--t-btn-color-primary) !important;
    outline-offset: 2px;
}

.t-btn--primary-line.active {
    outline: 2px solid var(--t-btn-color-primary) !important;
    outline-offset: 2px;
}

.t-btn--primary-text.active {
    outline: 2px solid var(--t-btn-color-primary) !important;
    outline-offset: 2px;
}

.t-btn--secondary-fill.active {
    outline: 2px solid var(--t-btn-color-secondary) !important;
    outline-offset: 2px;
}

.t-btn--secondary-line.active {
    outline: 2px solid var(--t-btn-color-secondary) !important;
    outline-offset: 2px;
}

.t-btn--secondary-text.active {
    outline: 2px solid var(--t-btn-color-secondary) !important;
    outline-offset: 2px;
}

.t-btn--tertiary-fill.active {
    outline: 2px solid var(--t-btn-color-tertiary) !important;
    outline-offset: 2px;
}

.t-btn--tertiary-line.active {
    outline: 2px solid var(--t-btn-color-tertiary) !important;
    outline-offset: 2px;
}

.t-btn--tertiary-text.active {
    outline: 2px solid var(--t-btn-color-tertiary) !important;
    outline-offset: 2px;
}

.t-btn--warning-fill.active {
    outline: 2px solid var(--t-btn-color-warning) !important;
    outline-offset: 2px;
}

.t-btn--warning-line.active {
    outline: 2px solid var(--t-btn-color-warning) !important;
    outline-offset: 2px;
}

.t-btn--warning-text.active {
    outline: 2px solid var(--t-btn-color-warning) !important;
    outline-offset: 2px;
}
/*Utilities — Layout · Gap*/
.t-g-4 {
    gap: 4px !important;
}
.t-g-8 {
    gap: 8px !important;
}
.t-g-10 {
    gap: 10px !important;
}
.t-g-20 {
    gap: 20px !important;
}
.t-g-30 {
    gap: 30px !important;
}
.t-w-30 {
    width: 30px !important;
}
.t-w-60 {
    width: 60px !important;
}
.t-w-100 {
    width: 100px !important;
}
.t-w-120 {
    width: 120px !important;
}
.t-w-150 {
    width: 150px !important;
}
.t-w-180 {
    width: 180px !important;
}
.t-w-200 {
    width: 200px !important;
}
.t-w-500 {
    width: 500px !important;
}



.t-miw-100 {
    min-width: 100px !important;
}
.t-miw-150 {
    min-width: 150px !important;
}
t-miw-180 {
    min-width: 180px !important;
}
.t-miw-200 {
    min-width: 200px !important;
}
.t-miw-250 {
    min-width: 250px !important;
}
.t-miw-300 {
    min-width: 300px !important;
}
.t-miw-500 {
    min-width: 500px !important;
}




.t-mxw-100 {
    max-width: 100px !important;
}
.t-mxw-150 {
    max-width: 150px !important;
}
.t-mxw-200 {
    max-width:200px !important;
}
.t-mxw-250 {
    max-width: 250px !important;
}
.t-mxw-300 {
    max-width: 300px !important;
}
.t-mxw-350 {
    max-width: 350px !important;
}
.t-mxw-500 {
    max-width: 500px !important;
}


.t-mimxw-50 {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
}
.t-mimxw-100 {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
}
.t-mimxw-150 {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
}
.t-mimxw-200 {
    width:200px !important;
    min-width:200px !important;
    max-width:200px !important;
}
.t-mimxw-250 {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
}
/* Page */
/*promo page*/

.promo-card:hover {
    box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px !important;
    transform: scale(1.02) !important;
    transition: 0.15s ease-in !important;
}

    .promo-card:hover .promo-card-btn {
        background-color: var(--t-btn-color-primary) !important;
        color: var(--t-color-white) !important;
        transition: 0.15s ease-in;
    }

.expired, .exhausted {
    overflow: hidden;
}

    .expired::after,
    .exhausted::after {
        transform: translate(-10px,-10px);
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,0.8) !important;
    }



/* Badge Basic */
.t-bdg {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: auto 0;
    letter-spacing: var(--t-letter-spacing-02);
    text-align: center !important;
    font-family: var(--t-font-family-sans) !important;
    width: fit-content;
}

.t-bdg--lg {
    height: var(--t-bdg-height-lg) !important;
    font-size: var(--t-bdg-font-size-lg);
    font-weight: var(--t-bdg-font-weight-lg);
    padding: 0 var(--t-bdg-padding-lg) !important;
}

.t-bdg--sm {
    height: var(--t-bdg-height-sm) !important;
    font-size: var(--t-bdg-font-size-sm);
    font-weight: var(--t-bdg-font-weight-sm);
    padding: 0 var(--t-bdg-padding-sm) !important;
}

.t-bdg--square {
    border-radius: var(--t-bdg-radius-square);
}

.t-bdg--round {
    border-radius: var(--t-bdg-radius-round);
}

/* Badge Style Modifiers */
.t-bdg--fill {
    background-color: var(--t-bdg-color);
    color: var(--t-color-white) !important;
    border: none;
}

.t-bdg--line {
    background-color: transparent;
    border: 1px solid var(--t-bdg-color);
    color: var(--t-bdg-color);
}

.t-bdg--pastel {
    background-color: var(--t-bdg-color-lightgrey-bg);
    border: 1px solid var(--t-bdg-color-lightgrey-line);
    color: var(--t-bdg-color);
}


/* Blue Badges */
.t-bdg--blue,
.t-bdg--open,
.t-bdg--stock {
    --t-bdg-color: var(--t-bdg-color-blue) !important;
}

/* Green Badges */
.t-bdg--green,
.t-bdg--submitted,
.t-bdg--submit,
.t-bdg--approved,
.t-bdg--substatus-approved {
    --t-bdg-color: var(--t-bdg-color-green) !important;
}

/* Black Badges */
.t-bdg--black,
.t-bdg--cancel,
.t-bdg--hold,
.t-bdg--substatus-blank,
.t-bdg--surgicalguide {
    --t-bdg-color: var(--t-bdg-color-black) !important;
}

/* Red Badges */
.t-bdg--red,
.t-bdg--danger,
.t-bdg--confirm,
.t-bdg--clientresponseneeded,
.t-bdg--substatus-clientresponseneeded,
.t-bdg--sysinsync {
    --t-bdg-color: var(--t-bdg-color-red) !important;
}
/*Exeptional*/
.t-bdg--confirmed {
    background: var(--t-bdg-color-lightgrey-bg) !important;
    color: var(--t-bdg-color-red) !important;
}
/* Purple Badges */
.t-bdg--purple,
.t-bdg--invoiced,
.t-bdg--paid,
.t-bdg--processed,
.t-bdg--designing,
.t-bdg--substatus-designing,
.t-bdg--custom {
    --t-bdg-color: var(--t-bdg-color-purple) !important;
}

/* Navy Badges */
.t-bdg--navy,
.t-bdg--inprogress,
.t-bdg--shipped,
.t-bdg--accedpted,
.t-bdg--substatus-accedpted {
    --t-bdg-color: var(--t-bdg-color-navy) !important;
}

/* Orange Badges */
.t-bdg--orange,
.t-bdg--warning,
.t-bdg--inproduction,
.t-bdg--substatus-inproduction {
    --t-bdg-color: var(--t-bdg-color-orange) !important;
}

/* Yellow Badges */
.t-bdg--yellow,
.t-bdg--info {
    --t-bdg-color: var(--t-bdg-color-yellow) !important;
}

/* ===== ICON SYSTEM ===== */

/* Base Icon */
.t-ic {
    display: inline-block;
    vertical-align: middle;
    background-color: currentColor;
    flex-shrink: 0;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}
/* Size */
.t-ic--xl {
    width: 32px;
    height: 32px;
}

.t-ic--lg {
    width: 24px;
    height: 24px;
}

.t-ic--md {
    width: 20px;
    height: 20px;
}

.t-ic--sm {
    width: 16px;
    height: 16px;
}

.t-ic--xs {
    width: 12px;
    height: 12px;
}


/* Color */

.t-ic--inherit {
    color: inherit;
}

.t-ic--black {
    color: var(--t-color-black);
}

.t-ic--white {
    color: var(--t-color-white);
}

.t-ic--primary {
    color: var(--t-color-blue-05);
}


.t-nav-link:hover,
t-nav-link.active:hover {
    cursor: pointer !important;
}
/* Ensure icon color matches button text color in all states */
.t-btn:hover .t-ic,
.t-btn:active .t-ic,
.t-btn.active .t-ic,
.t-btn:disabled .t-ic,
.t-btn.disabled .t-ic,
.t-btn-info:hover .t-ic,
.t-btn-info:active .t-ic,
.t-btn-info.active .t-ic,
.t-btn-info:disabled .t-ic,
.t-btn-info.disabled .t-ic {
    color: inherit;
}

.t-ic--home.t-ic--xl,
.t-ic--home.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-home-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-home-2.svg");
}

.t-ic--home.t-ic--md,
.t-ic--home.t-ic--sm,
.t-ic--home.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-home-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-home-2.5.svg");
}


.t-ic--order.t-ic--xl,
.t-ic--order.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-order-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-order-2.svg");
}

.t-ic--order.t-ic--md,
.t-ic--order.t-ic--sm,
.t-ic--order.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-order-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-order-2.5.svg");
}



.t-ic--promo.t-ic--xl,
.t-ic--promo.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-promo-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-promo-2.svg");
}

.t-ic--promo.t-ic--md,
.t-ic--promo.t-ic--sm,
.t-ic--promo.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-promo-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-promo-2.5.svg");
}


.t-ic--rma.t-ic--xl,
.t-ic--rma.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-rma-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-rma-2.svg");
}

.t-ic--rma.t-ic--md,
.t-ic--rma.t-ic--sm,
.t-ic--rma.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-rma-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-rma-2.5.svg");
}


.t-ic--user.t-ic--xl,
.t-ic--user.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-user-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-user-2.svg");
}

.t-ic--user.t-ic--md,
.t-ic--user.t-ic--sm,
.t-ic--user.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-user-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-user-2.5.svg");
}


.t-ic--useredit.t-ic--xl,
.t-ic--useredit.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-useredit-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-useredit-2.svg");
}

.t-ic--userdit.t-ic--md,
.t-ic--userdit.t-ic--sm,
.t-ic--userdit.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-userdit-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-userdit-2.5.svg");
}

/* User Settings Icon */
.t-ic--usersettings.t-ic--xl,
.t-ic--usersettings.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-usersettings-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-usersettings-2.svg");
}

.t-ic--usersettings.t-ic--md,
.t-ic--usersettings.t-ic--sm,
.t-ic--usersettings.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-usersettings-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-usersettings-2.5.svg");
}

/* Help Icon */
.t-ic--help.t-ic--xl,
.t-ic--help.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-help-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-help-2.svg");
}

.t-ic--help.t-ic--md,
.t-ic--help.t-ic--sm,
.t-ic--help.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-help-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-help-2.5.svg");
}

/* Review Icon */
.t-ic--review.t-ic--xl,
.t-ic--review.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-review-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-review-2.svg");
}

.t-ic--review.t-ic--md,
.t-ic--review.t-ic--sm,
.t-ic--review.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-review-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-review-2.5.svg");
}

/* Preference Icon */
.t-ic--preference.t-ic--xl,
.t-ic--preference.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-preference-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-preference-2.svg");
}

.t-ic--preference.t-ic--md,
.t-ic--preference.t-ic--sm,
.t-ic--preference.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-preference-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-preference-2.5.svg");
}

/* Design Review Icon */
.t-ic--designreview.t-ic--xl,
.t-ic--designreview.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-designreview-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-designreview-2.svg");
}

.t-ic--designreview.t-ic--md,
.t-ic--designreview.t-ic--sm,
.t-ic--designreview.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-designreview-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-designreview-2.5.svg");
}

/* Logout Icon */
.t-ic--logout.t-ic--xl,
.t-ic--logout.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-logout-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-logout-2.svg");
}

.t-ic--logout.t-ic--md,
.t-ic--logout.t-ic--sm,
.t-ic--logout.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-logout-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-logout-2.5.svg");
}

/* Search Icon */
.t-ic--search.t-ic--xl,
.t-ic--search.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-search-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-search-2.svg");
}

.t-ic--search.t-ic--md,
.t-ic--search.t-ic--sm,
.t-ic--search.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-search-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-search-2.5.svg");
}

/* Filter Icon */
.t-ic--filter.t-ic--xl,
.t-ic--filter.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-filter-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-filter-2.svg");
}

.t-ic--filter.t-ic--md,
.t-ic--filter.t-ic--sm,
.t-ic--filter.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-filter-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-filter-2.5.svg");
}

/* Filter Search Icon */
.t-ic--filtersearch.t-ic--xl,
.t-ic--filtersearch.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-filtersearch-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-filtersearch-2.svg");
}

.t-ic--filtersearch.t-ic--md,
.t-ic--filtersearch.t-ic--sm,
.t-ic--filtersearch.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-filtersearch-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-filtersearch-2.5.svg");
}

/* Add Icon */
.t-ic--add.t-ic--xl,
.t-ic--add.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-add-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-add-2.svg");
}

.t-ic--add.t-ic--md,
.t-ic--add.t-ic--sm,
.t-ic--add.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-add-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-add-2.5.svg");
}

/* Edit Icon */
.t-ic--edit.t-ic--xl,
.t-ic--edit.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-edit-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-edit-2.svg");
}

.t-ic--edit.t-ic--md,
.t-ic--edit.t-ic--sm,
.t-ic--edit.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-edit-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-edit-2.5.svg");
}

/* Delete Icon */
.t-ic--delete.t-ic--xl,
.t-ic--delete.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-delete-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-delete-2.svg");
}

.t-ic--delete.t-ic--md,
.t-ic--delete.t-ic--sm,
.t-ic--delete.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-delete-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-delete-2.5.svg");
}

/* Download Icon */
.t-ic--download.t-ic--xl,
.t-ic--download.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-download-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-download-2.svg");
}

.t-ic--download.t-ic--md,
.t-ic--download.t-ic--sm,
.t-ic--download.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-download-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-download-2.5.svg");
}

/* PDF Icon */
.t-ic--pdf.t-ic--xl,
.t-ic--pdf.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-pdf-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-pdf-2.svg");
}

.t-ic--pdf.t-ic--md,
.t-ic--pdf.t-ic--sm,
.t-ic--pdf.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-pdf-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-pdf-2.5.svg");
}

/* Cart Icon */
.t-ic--cart.t-ic--xl,
.t-ic--cart.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-cart-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-cart-2.svg");
}

.t-ic--cart.t-ic--md,
.t-ic--cart.t-ic--sm,
.t-ic--cart.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-cart-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-cart-2.5.svg");
}

/* Menu Icon */
.t-ic--menu.t-ic--xl,
.t-ic--menu.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-menu-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-menu-2.svg");
}

.t-ic--menu.t-ic--md,
.t-ic--menu.t-ic--sm,
.t-ic--menu.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-menu-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-menu-2.5.svg");
}

/* Previous Icon */
.t-ic--prev.t-ic--xl,
.t-ic--prev.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-prev-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-prev-2.svg");
}

.t-ic--prev.t-ic--md,
.t-ic--prev.t-ic--sm,
.t-ic--prev.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-prev-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-prev-2.5.svg");
}

/* Next Icon */
.t-ic--next.t-ic--xl,
.t-ic--next.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-next-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-next-2.svg");
}

.t-ic--next.t-ic--md,
.t-ic--next.t-ic--sm,
.t-ic--next.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-next-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-next-2.5.svg");
}

/* Warning Icon */
.t-ic--warning.t-ic--xl,
.t-ic--warning.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-warning-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-warning-2.svg");
}

.t-ic--warning.t-ic--md,
.t-ic--warning.t-ic--sm,
.t-ic--warning.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-warning-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-warning-2.5.svg");
}

/* Info Icon */
.t-ic--info.t-ic--xl,
.t-ic--info.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-info-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-info-2.svg");
}

.t-ic--info.t-ic--md,
.t-ic--info.t-ic--sm,
.t-ic--info.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-info-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-info-2.5.svg");
}

/* Success Icon */
.t-ic--success.t-ic--xl,
.t-ic--success.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-success-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-success-2.svg");
}

.t-ic--success.t-ic--md,
.t-ic--success.t-ic--sm,
.t-ic--success.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-success-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-success-2.5.svg");
}

/* fail Icon */
.t-ic--fail.t-ic--xl,
.t-ic--fail.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-fail-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-fail-2.svg");
}

.t-ic--fail.t-ic--md,
.t-ic--fail.t-ic--sm,
.t-ic--fail.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-fail-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-fail-2.5.svg");
}

/* Check Icon */
.t-ic--check.t-ic--xl,
.t-ic--check.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-check-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-check-2.svg");
}

.t-ic--check.t-ic--md,
.t-ic--check.t-ic--sm,
.t-ic--check.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-check-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-check-2.5.svg");
}

/* Close Icon */
.t-ic--close.t-ic--xl,
.t-ic--close.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-close-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-close-2.svg");
}

.t-ic--close.t-ic--md,
.t-ic--close.t-ic--sm,
.t-ic--close.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-close-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-close-2.5.svg");
}

/* Mail Icon */
.t-ic--mail.t-ic--xl,
.t-ic--mail.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-mail-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-mail-2.svg");
}

.t-ic--mail.t-ic--md,
.t-ic--mail.t-ic--sm,
.t-ic--mail.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-mail-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-mail-2.5.svg");
}

/* Clock Icon */
.t-ic--clock.t-ic--xl,
.t-ic--clock.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-clock-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-clock-2.svg");
}

.t-ic--clock.t-ic--md,
.t-ic--clock.t-ic--sm,
.t-ic--clock.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-clock-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-clock-2.5.svg");
}

/* Company Icon */
.t-ic--company.t-ic--xl,
.t-ic--company.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-company-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-company-2.svg");
}

.t-ic--company.t-ic--md,
.t-ic--company.t-ic--sm,
.t-ic--company.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-company-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-company-2.5.svg");
}

/* Fax Icon */
.t-ic--fax.t-ic--xl,
.t-ic--fax.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-fax-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-fax-2.svg");
}

.t-ic--fax.t-ic--md,
.t-ic--fax.t-ic--sm,
.t-ic--fax.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-fax-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-fax-2.5.svg");
}

/* Call Icon */
.t-ic--call.t-ic--xl,
.t-ic--call.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-call-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-call-2.svg");
}

.t-ic--call.t-ic--md,
.t-ic--call.t-ic--sm,
.t-ic--call.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-call-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-call-2.5.svg");
}

/* Phone Icon */
.t-ic--phone.t-ic--xl,
.t-ic--phone.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-phone-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-phone-2.svg");
}

.t-ic--phone.t-ic--md,
.t-ic--phone.t-ic--sm,
.t-ic--phone.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-phone-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-phone-2.5.svg");
}

/* Puzzle Icon */
.t-ic--puzzle.t-ic--xl,
.t-ic--puzzle.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-puzzle-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-puzzle-2.svg");
}

.t-ic--puzzle.t-ic--md,
.t-ic--puzzle.t-ic--sm,
.t-ic--puzzle.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-puzzle-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-puzzle-2.5.svg");
}

/* System Icon */
.t-ic--system.t-ic--xl,
.t-ic--system.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-system-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-system-2.svg");
}

.t-ic--system.t-ic--md,
.t-ic--system.t-ic--sm,
.t-ic--system.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-system-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-system-2.5.svg");
}

/* Location Icon */
.t-ic--location.t-ic--xl,
.t-ic--location.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-location-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-location-2.svg");
}

.t-ic--location.t-ic--md,
.t-ic--location.t-ic--sm,
.t-ic--location.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-location-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-location-2.5.svg");
}

/* Resource Icon */
.t-ic--resource.t-ic--xl,
.t-ic--resource.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-resource-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-resource-2.svg");
}

.t-ic--resource.t-ic--md,
.t-ic--resource.t-ic--sm,
.t-ic--resource.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-resource-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-resource-2.5.svg");
}

/* Manual Icon */
.t-ic--manual.t-ic--xl,
.t-ic--manual.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-manual-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-manual-2.svg");
}

.t-ic--manual.t-ic--md,
.t-ic--manual.t-ic--sm,
.t-ic--manual.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-manual-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-manual-2.5.svg");
}

/* Video Icon */
.t-ic--video.t-ic--xl,
.t-ic--video.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-video-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-video-2.svg");
}

.t-ic--video.t-ic--md,
.t-ic--video.t-ic--sm,
.t-ic--video.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-video-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-video-2.5.svg");
}

/* Copy Icon */
.t-ic--copy.t-ic--xl,
.t-ic--copy.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-copy-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-copy-2.svg");
}

.t-ic--copy.t-ic--md,
.t-ic--copy.t-ic--sm,
.t-ic--copy.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-copy-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-copy-2.5.svg");
}

/* Remote Icon */
.t-ic--remote.t-ic--xl,
.t-ic--remote.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-remote-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-remote-2.svg");
}

.t-ic--remote.t-ic--md,
.t-ic--remote.t-ic--sm,
.t-ic--remote.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-remote-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-remote-2.5.svg");
}
/* light Icon */
.t-ic--light.t-ic--xl,
.t-ic--light.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-light-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-light-2.svg");
}

.t-ic--light.t-ic--md,
.t-ic--light.t-ic--sm,
.t-ic--light.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-light-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-light-2.5.svg");
}
/* dark Icon */
.t-ic--dark.t-ic--xl,
.t-ic--dark.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-dark-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-dark-2.svg");
}

.t-ic--dark.t-ic--md,
.t-ic--dark.t-ic--sm,
.t-ic--dark.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-dark-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-dark-2.5.svg");
}
/* resret Icon */
.t-ic--reset.t-ic--xl,
.t-ic--reset.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-reset-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-reset-2.svg");
}

.t-ic--reset.t-ic--md,
.t-ic--reset.t-ic--sm,
.t-ic--reset.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-reset-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-reset-2.5.svg");
}
/* sync Icon */
.t-ic--sync.t-ic--xl,
.t-ic--sync.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-sync-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-sync-2.svg");
}

.t-ic--sync.t-ic--md,
.t-ic--sync.t-ic--sm,
.t-ic--sync.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-sync-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-sync-2.5.svg");
}
/* synccart Icon */
.t-ic--synccart.t-ic--xl,
.t-ic--synccart.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-synccart-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-synccart-2.svg");
}

.t-ic--synccart.t-ic--md,
.t-ic--synccart.t-ic--sm,
.t-ic--synccart.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-synccart-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-synccart-2.5.svg");
}
/* orderstatus Icon */
.t-ic--orderstatus.t-ic--xl,
.t-ic--orderstatus.t-ic--lg {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-orderstatus-2.svg");
    mask-image: url("/Content/Images/Icons/t-ic-orderstatus-2.svg");
}

.t-ic--orderstatus.t-ic--md,
.t-ic--orderstatus.t-ic--sm,
.t-ic--orderstatus.t-ic--xs {
    -webkit-mask-image: url("/Content/Images/Icons/t-ic-orderstatus-2.5.svg");
    mask-image: url("/Content/Images/Icons/t-ic-orderstatus-2.5.svg");
}



/* Input */

/* ===== Form Group Layout ===== */

.t-formgroup {
    display: flex;
    flex-direction: column;
    gap: var(--t-spacing-02);
    margin-bottom: var(--t-spacing-08) !important;
}

.t-formgroup:last-child {
    margin-bottom: 0;
}

.row .t-formgroup {
    margin-bottom: 0;
}


/* Form Controls */
.t-form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: var(--t-form-control-size);
    height: var(--t-form-control-size);
    border: var(--t-form-control-border-width) solid var(--t-form-control-border-color);
    background-color: var(--t-form-control-background);
    border-radius: var(--t-form-control-radius);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    margin: 0 !important;
}

    .t-form-control:focus {
        outline: none;
        border-color: var(--t-form-control-color);
        box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.1);
    }

    .t-form-control:disabled {
        background-color: var(--t-form-control-disabled-background);
        border-color: var(--t-form-control-disabled-color);
        cursor: not-allowed;
        opacity: 0.6;
    }

    /* Checkbox */
    .t-form-control[type="checkbox"] {
        border-radius: var(--t-form-control-radius);
    }

        .t-form-control[type="checkbox"]:checked {
            background-color: var(--t-form-control-color);
            border-color: var(--t-form-control-color);
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
            background-size: 12px;
            background-position: center;
            background-repeat: no-repeat;
        }

    /* Radio */
    .t-form-control[type="radio"] {
        border-radius: 50%;
    }

        .t-form-control[type="radio"]:checked {
            background-color: var(--t-form-control-color);
            border-color: var(--t-form-control-color);
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3ccircle cx='10' cy='10' r='4' fill='%23fff'/%3e%3c/svg%3e");
            background-size: 8px;
            background-position: center;
            background-repeat: no-repeat;
        }

/* Form Control Labels */
.t-form-control-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--t-font-family-info);
    font-size: 14px;
    color: var(--t-font-color);
    cursor: pointer;
    margin-bottom: 0;
}


    .t-form-control-label:last-child {
        margin-bottom: 0;
    }

    .t-form-control-label:disabled {
        color: var(--t-form-control-disabled-color);
        cursor: not-allowed;
    }

/* Input Validation States */
.t-input--valid {
    border-color: var(--t-input-valid-border-color) !important;
    color: var(--t-input-valid-color);
}

    .t-input--valid:focus {
        border-color: var(--t-input-valid-border-color) !important;
        box-shadow: 0 0 0 2px rgba(0, 128, 0, 0.1);
    }

.t-input--invalid {
    border-color: var(--t-input-invalid-border-color) !important;
    color: var(--t-input-invalid-color);
}

    .t-input--invalid:focus {
        border-color: var(--t-input-invalid-border-color) !important;
        box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.1);
    }

.t-input--warning {
    border-color: var(--t-input-warning-border-color) !important;
    color: var(--t-input-warning-color);
}

    .t-input--warning:focus {
        border-color: var(--t-input-warning-border-color) !important;
        box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.1);
    }

/* Validation Message Styles */
.t-input-validation-message {
    font-family: var(--t-font-family-sans);
    font-size: 12px;
    line-height: 1.4;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.t-input-validation-message--valid {
    color: var(--t-input-valid-color);
}

.t-input-validation-message--invalid {
    color: var(--t-input-invalid-color);
}

.t-input-validation-message--warning {
    color: var(--t-input-warning-color);
}

/* Validation Icon */
.t-input-validation-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.t-input-validation-icon--valid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23007aff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.t-input-validation-icon--invalid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23dc3545' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 6 8 8m0-8-8 8'/%3e%3c/svg%3e");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.t-input-validation-icon--warning {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffc107' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M10 6v4m0 4h.01'/%3e%3c/svg%3e");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Textbox Component */
.t-textbox {
    font-family: var(--t-font-family-info);
    letter-spacing: var(--t-letter-spacing-01);
    border: 1px solid var(--t-color-surface-04);
    border-radius: var(--t-textbox-radius);
    padding: var(--t-textbox-padding-md);
    color: var(--t-color-surface-12);
    background-color: var(--t-color-white);
    width: 100%;
    min-width: 0;
    max-width: 100%;
    outline: none;
    transition: border-color 0.2s ease;
    resize: vertical;
    box-sizing: border-box;
}

    .t-textbox:focus {
        border-color: var(--t-color-surface-blue-07);
    }

    .t-textbox:disabled {
        background-color: var(--t-color-surface-02);
        color: var(--t-color-surface-06);
        cursor: not-allowed;
    }

/* Textbox Sizes */
.t-textbox--lg {
    height: var(--t-textbox-height-lg);
    font-size: var(--t-textbox-font-size-lg);
    font-weight: var(--t-textbox-font-weight-lg);
    line-height: var(--t-textbox-line-height-lg);
    padding: var(--t-textbox-padding-lg);
}

.t-textbox--md {
    height: var(--t-textbox-height-md);
    font-size: var(--t-textbox-font-size-md);
    font-weight: var(--t-textbox-font-weight-md);
    line-height: var(--t-textbox-line-height-md);
    padding: var(--t-textbox-padding-md);
}

.t-textbox--sm {
    height: var(--t-textbox-height-sm);
    font-size: var(--t-textbox-font-size-sm);
    font-weight: var(--t-textbox-font-weight-sm);
    line-height: var(--t-textbox-line-height-sm);
    padding: var(--t-textbox-padding-sm);
}

.t-textbox--xs {
    height: var(--t-textbox-height-xs);
    font-size: var(--t-textbox-font-size-xs);
    font-weight: var(--t-textbox-font-weight-xs);
    line-height: var(--t-textbox-line-height-xs);
    padding: var(--t-textbox-padding-xs);
}

/* Textbox Validation States */
.t-textbox--valid {
    border-color: var(--t-input-valid-border-color) !important;
    color: var(--t-input-valid-color);
}

    .t-textbox--valid:focus {
        border-color: var(--t-input-valid-border-color) !important;
        box-shadow: 0 0 0 2px rgba(0, 128, 0, 0.1);
    }

.t-textbox--invalid {
    border-color: var(--t-input-invalid-border-color) !important;
    color: var(--t-input-invalid-color);
}

    .t-textbox--invalid:focus {
        border-color: var(--t-input-invalid-border-color) !important;
        box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.1);
    }

.t-textbox--warning {
    border-color: var(--t-input-warning-border-color) !important;
    color: var(--t-input-warning-color);
}

    .t-textbox--warning:focus {
        border-color: var(--t-input-warning-border-color) !important;
        box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.1);
    }

/* Kendo UI Adjustment for Textbox */
.t-textbox.t-kendoadjust {
    border: 1px solid var(--t-color-surface-04);
    border-radius: var(--t-textbox-radius);
    padding: var(--t-textbox-padding-md);
    font-family: var(--t-font-family-sans);
    letter-spacing: var(--t-letter-spacing-01);
    color: var(--t-color-surface-12);
    background-color: var(--t-color-white);
    transition: border-color 0.2s ease;
}

    .t-textbox.t-kendoadjust:focus {
        border-color: var(--t-color-surface-blue-07);
    }

    .t-textbox.t-kendoadjust:disabled {
        background-color: var(--t-color-surface-02);
        color: var(--t-color-surface-06);
        cursor: not-allowed;
    }

/* Callout Component */
.t-callout {
    position: relative;
    padding: var(--t-callout-padding);
    border-radius: var(--t-callout-radius);
    font-size: var(--t-callout-font-size);
    line-height: var(--t-callout-line-height);
    /*    margin-bottom: var(--t-callout-margin-bottom);*/
    font-family: var(--t-font-family-info) !important;
    letter-spacing: var(--t-letter-spacing-01);
    width: fit-content !important;
}

    .t-callout::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: var(--t-callout-accent-width);
        border-radius: var(--t-callout-radius) 0 0 var(--t-callout-radius);
    }

    .t-callout h4 {
        font-size: var(--t-callout-title-font-size);
        font-weight: var(--t-callout-title-font-weight);
        margin: 0 0 8px 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .t-callout p {
        margin: 0;
    }

/* Callout Variants */
.t-callout--basic,
.t-callout--grey {
    background-color: var(--t-color-surface-01);
    color: var(--t-color-surface-10);
}

    .t-callout--basic::before,
    .t-callout--grey::before {
        background-color: var(--t-color-surface-06);
    }


.t-callout--info,
.t-callout--blue {
    background-color: var(--t-color-blue-02);
    color: var(--t-color-blue-08);
}

    .t-callout--info::before,
    .t-callout--blue::before {
        background-color: var(--t-color-blue-05);
    }


.t-callout--warning,
.t-callout--yellow {
    background-color: var(--t-color-yellow-02);
    color: var(--t-color-yellow-08);
}

    .t-callout--warning::before,
    .t-callout--yellow::before {
        background-color: var(--t-color-yellow-05);
    }


.t-callout--success,
.t-callout--green {
    background-color: var(--t-color-green-02);
    color: var(--t-color-green-08);
}

    .t-callout--success::before,
    .t-callout--green::before {
        background-color: var(--t-color-green-05);
    }



.t-callout--error,
.t-callout--red {
    background-color: var(--t-color-red-02);
    color: var(--t-color-red-08);
}

    .t-callout--error::before,
    .t-callout--red::before {
        background-color: var(--t-color-red-05);
    }

.t-callout--purple {
    background-color: var(--t-color-purple-02);
    color: var(--t-color-purple-08);
}

    .t-callout--purple::before {
        background-color: var(--t-color-purple-05);
    }


/* Infobox Component */
.t-infobox {
    position: relative;
    padding: var(--t-infobox-padding);
    border-radius: var(--t-infobox-radius);
    font-size: var(--t-infobox-font-size);
    line-height: var(--t-infobox-line-height);
    margin-bottom: var(--t-infobox-margin-bottom);
    font-family: var(--t-font-family-info);
    letter-spacing: var(--t-letter-spacing-03);
}

    .t-infobox h4 {
        font-size: var(--t-infobox-title-font-size);
        font-weight: var(--t-infobox-title-font-weight);
        margin: 0 0 8px 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .t-infobox p {
        margin: 0;
    }

/* Infobox Variants */
.t-infobox--basic {
    background-color: var(--t-color-surface-01);
    color: var(--t-color-surface-10);
    border: 1px solid var(--t-color-surface-04);
}

.t-infobox--info {
    background-color: var(--t-color-blue-02);
    color: var(--t-color-blue-08);
    border: 1px solid var(--t-color-blue-04);
}

    .t-infobox--info h4 {
        color: var(--t-color-blue-08);
    }

.t-infobox--warning {
    background-color: var(--t-color-yellow-02);
    color: var(--t-color-yellow-08);
    border: 1px solid var(--t-color-yellow-04);
}

    .t-infobox--warning h4 {
        color: var(--t-color-yellow-08);
    }

.t-infobox--success {
    background-color: var(--t-color-green-02);
    color: var(--t-color-green-08);
    border: 1px solid var(--t-color-green-04);
}

    .t-infobox--success h4 {
        color: var(--t-color-green-08);
    }

.t-infobox--error {
    background-color: var(--t-color-red-02);
    color: var(--t-color-red-08);
    border: 1px solid var(--t-color-red-04);
}

    .t-infobox--error h4 {
        color: var(--t-color-red-08);
    }




/*main conetent with footer*/
/*.t-formcard-card {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: var(--t-formcard-radius);
    background-color: #fff;
}*/

/*.t-formcard-group {
    margin-bottom: 1.5rem;
    font-family: var(--t-font-family-info);
}*/




/* Patterns */

/* Page Header */

.t-page-header {
    padding: 0 30px !important;
    background: var(--t-page-header-bg);
    box-shadow: var(--t-page-header-shadow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    width: calc(100% - var(--t-navbar-width));
    height: var(--t-page-header-height) !important;
    z-index: 1000;
    top: 0;
}

.t-breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--t-font-color) !important;
    font-size: var(--t-font-size-sm) !important;
    font-weight: var(--t-font-weight-500) !important;
    letter-spacing: var(--t-letter-spacing-02) !important;
}

    .t-breadcrumb a {
        color: var(--t-font-color) !important;
        font-size: var(--t-font-size-sm) !important;
        font-weight: var(--t-font-weight-500) !important;
        padding: 4px 6px !important;
        background: transparent;
        text-decoration: underline !important;
        border-radius: 4px;
    }

        .t-breadcrumb a:hover {
            background: var(--t-color-surface-blue-04);
        }

        .t-breadcrumb a:active {
            outline: 2px solid var(--t-color-surface-blue-03) !important;
            outline-offset: 2px;
        }

/* Page Footer */

.t-page-footer {
    display: flex;
    height: var(--t-page-footer-height);
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: calc(100% - var(--t-navbar-width));
    z-index: 1000;
    bottom: 0;
    left: var(--t-navbar-width);
    padding: 0 30px;
    background: var(--t-page-footer-bg);
    box-shadow: var(--t-page-footer-shadow);
}

.t-nonav {
    left: 0 !important;
    width: 100% !important;
}
/* Layout */

/* Main body Layout*/

.t-body {
    display: flex;
    flex-direction: column;
    display: -ms-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: box;
    -ms-flex-direction: column;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -ms-box-orient: horizontal;
    box-orient: horizontal;
    /*flex-wrap: wrap;*/
    display: flex;
    background: var(--t-color-surface-blue-01);
}


.t-body-content {
    background:var(--t-page-body-color);
    flex: 1 1 0;
    flex-basis: auto;
    margin-left: var(--t-navbar-width) !important;
    -ms-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
    box-flex: 1;
    z-index: 100;
    /*width:100%;*/
}

.t-page-body {
    display:flex;
    flex-direction:column;
    gap:var(--t-page-component-gap) !important;
    margin: 20px 30px 30px 30px !important;
    padding-top: var(--t-page-header-height) !important;
}
.t-page-body.t-noheader {
    padding-top: 0 !important
}
    .t-page-body.t-isfooter {
        padding-bottom: var(--t-page-footer-height) !important;
    }
/*.t-filtergroup div{
    margin:2px !important;
}*/
/*custom*/
.t-noinput {
    color: var(--t-font-color) !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    width: fit-content !important;
    height: var(--t-input-height) !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
}


.orderinfosection--readonly {
    opacity: 0.7;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.orderinfosection--editable {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.2s ease;
}



/* 페이지 공용 CSS 어딘가(예: components.css 끝부분)에 */
#theme-toggle {
    cursor: pointer;
}

    #theme-toggle[aria-pressed="true"] .t-theme-label::after {
        content: " Light";
    }

    #theme-toggle[aria-pressed="false"] .t-theme-label::after {
        content: " Dark";
    }

/* 테마 전환 시 깜빡임 줄이기(선택) */
:root {
    transition: color 120ms ease, background-color 120ms ease;
}

/*Kendo */
/* for kendo grid*/
.t-card {
    background: var(--t-grid-bg) !important;
    border-radius: var(--t-radius-md) !important;
    padding: var(--t-spacing-06) !important;
    color: var(--t-font-color) !important;
    border: 1px solid var(--t-color-surface-03) !important;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    border-radius: 0.25rem;
}
/* for regular card*/

.t-card-2 {
    background: var(--t-grid-bg) !important;
    border-radius: var(--t-radius-md) !important;
    padding: var(--t-spacing-09) !important;
    padding-bottom: var(--t-spacing-15) !important;
    color: var(--t-font-color) !important;
    border: 1px solid var(--t-color-surface-03) !important;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    border-radius: 0.25rem;
}



.t-grid-scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1 !important;
    width: 30px;
    height: 100px;
    border: none;
    border-radius: var(--t-btn-radius);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    cursor: pointer;
    background: var(--t-font-color) !important;
    color: var(--t-color-surface-00) !important;
    opacity: 0.3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

    .t-grid-scroll-btn.left {
        left: 6px;
    }

    .t-grid-scroll-btn.right {
        right: 6px;
    }




.t-modal-container {
    display: flex;
    flex-direction:column !important;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    transform: translateX(-(var(--t-navbar-width)));
}
.t-modal-content {
    display: flex;
    flex-direction: column;
    align-items: start;
/*    justify-content: space-between;*/
    background: var(--t-color-white);
    border-radius: var(--t-radius-xl) !important;
    overflow:hidden;
    border:2px solid var(--t-color-blue-05) !important;
}
.t-modal-header {
    padding: 0 var(--t-spacing-06) !important;
    border-bottom: 1px solid var(--t-color-surface-03);
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    height: var(--t-modal-header-height);
    background: var(--t-color-surface-01);
}

.t-modal-body {
    font-family:var(--t-font-family-info) !important;
    padding: var(--t-spacing-10) !important;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--t-modal-body-gap);
    width: 100%;
    height: fit-content;
}
.t-modal-footer {
    padding: 0 var(--t-spacing-06) !important;
    border-top:1px solid var(--t-color-surface-03);
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    height: var(--t-modal-footer-height);
    background: var(--t-color-surface-01);
}




/* Kendo Grid Height Control*/


/*Order Info*/
.t-itemdetails-group, .t-orderinfo-group {
    height: 600px !important;
}

.t-promoorderinfo-group {
    height: 644px !important;
}



/* Order, RMA */
#OrdersGrid {
    height: 710px !important;
}
    #OrdersGrid .k-grid-content {
        height: 630px !important;
    }
    
    
    #RMAGrid {
        height: 700px !important;
    }

    #RMAGrid .k-grid-content {
        height: 600px !important;
    }




#stockItemGrid {
    height: 500px !important;
}

    #stockItemGrid .k-grid-content {
        height: 420px !important;
    }
/*    Promoorderscreen*/

.promoorderscreen #gdPromoPkgOrderLines {
    height: 240px !important;
}
.promoorderscreen #gdPromoPkgOrderLines .k-grid-content{
    height: 170px !important;
}

.promoorderscreen #gdOrderDetails {
    height: 240px !important;
}
    .promoorderscreen #gdOrderDetails .k-grid-content {
        height: 170px !important;
    }
/*Customer Pages*/
#gdUsers,
#gdOrders,
#gdPromoPkg {
    height: 700px !important;
}

    #gdUsers .k-grid-content,
    #gdOrders .k-grid-content,
    #gdPromoPkg .k-grid-content {
        height: 600px !important;
    }

/*Crown Page*/
#CrownGrid {
    height: 200px !important;
}
#CrownGrid .k-grid-content {
    height: 180px !important;
}

/*Admin Pages*/
#gdPageDisplayMgmt {
    height: 750px !important;
}

#gdPageDisplayMgmt .k-grid-content {
    height: 640px !important;
}

.orderreview #gdOrders {
    height: 620px !important;
}

.orderreview #gdOrders .k-grid-content {
    height: 520px !important;
}

.orderstatusreview #gdOrders {
    height: 620px !important;
}

    .orderstatusreview #gdOrders .k-grid-content {
        height: 520px !important;
    }

.designfilereview #gdOrders {
    height: 620px !important;
}

.designfilereview #gdOrders .k-grid-content {
    height: 520px !important;
}

.designorders #gdOrders {
    height: 620px !important;
}

.designorders #gdOrders .k-grid-content {
    height: 520px !important;
}

.promomanagement #gdPromoPkg {
    height:700px;
}

.promomanagement #k-grid-content {
    height: 600px;
}
/*DesignFile Page*/
.designfile #DesignFileGrid {
    height: 400px !important;
}
.designfile #DesignFileGrid .k-grid-order {
    height: 300px !important;
}
/*Profile page*/
.profile #contactGrid,
.profile #shippingGrid {

    height: 280px !important;
}

.profile #contactGrid .k-grid-profile,
.profile #shippingGrid .k-grid-profile
{
    height: 180px !important;
}

/*In-Modal Grid */

/*Crown Modal*/
#BridgeGrid {
    width: 800px !important;
    height: 400px !important;
}

/* Promo Item Detail */
.promoorder-modal #BridgeGrid {
    width: 600px !important;
    height: 300px !important;
}

/* Promo Item Add/Edit */
.promoorderscreen-modal #gdItemSelectTable {
    width: 700px !important;
    height: 600px !important;
}
.promoorderscreen-modal #gdOrderedItems {
    width: 400px !important;
    height: 600px !important;
}
/* RMA Info Modal*/
.rmainfo-modal #invoiceGrid {
    width: 800px !important;
    height: 300px !important;
}

/* Tax Exception Verification */
#vertex-wizard-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
}

body:has(#vertex-wizard-modal) {
    overflow: hidden !important;
}

/* By Pages */
.t-order-thumbnail {
    border-radius: var(--t-radius-sm);
    border: 1px solid var(--t-color-surface-blue-06) !important;
    overflow: hidden;
    padding: var(--t-spacing-02) var(--t-spacing-04) !important;
    background-color: var(--t-color-white) !important;
}

.t-order-thumbnail img {
    width:100px !important;
    height:auto;
}


/* ====== T Loader ====== */
.t-loader {
    --size: 18px;
    --color: var(--t-color-blue-05);
    --track: rgba(0,0,0,.10); 
    --duration: 1.8s; 
    --orbit-size: 200%; 
    --orbit-thickness: 1px;
    position: relative;
    width: var(--size);
    height: var(--size);
    display: inline-block;
}

    .t-loader::before {
        content: "";
        position: absolute;
        inset: 0;
        -webkit-mask: var(--mask-url) center/contain no-repeat;
        mask: var(--mask-url) center/contain no-repeat;
        background: var(--track);
    }

    .t-loader::after {
        content: "";
        position: absolute;
        inset: 0;
        -webkit-mask: var(--mask-url) center/contain no-repeat;
        mask: var(--mask-url) center/contain no-repeat;
        background: linear-gradient(to top, var(--color) 0 50%, transparent 50% 100%);
        background-size: 100% 200%;
        background-position: 0 100%;
        animation: t-fill var(--duration) ease-in-out infinite;
    }

    .t-loader .t-orbit,
    .t-loader .t-orbit2 {
        position: absolute;
        inset: calc((100% - var(--orbit-size))/ -2);
        width: var(--orbit-size);
        height: var(--orbit-size);
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        border-radius: 50%;
        pointer-events: none;
    }

    .t-loader .t-orbit {
        border: var(--orbit-thickness) solid transparent;
        border-top-color: var(--color);
        border-right-color: var(--color);
        animation: t-spin 1s linear infinite;
/*        filter: drop-shadow(0 0 4px color-mix(in oklab, var(--color) 60%, transparent));*/
    }

    .t-loader .t-orbit2 {
        border: var(--orbit-thickness) solid transparent;
        border-bottom-color: color-mix(in oklab, var(--color) 60%, white 20%);
        border-left-color: color-mix(in oklab, var(--color) 60%, white 20%);
        transform: translate(-50%,-50%) rotate(20deg);
        animation: t-spin 1.6s linear infinite reverse;
        opacity: .7;
    }

@keyframes t-fill {
    0% {
        background-position: 0 0%;
    }

    50% {
        background-position: 0 100%;
    }
}

@keyframes t-spin {
    to {
        transform: translate(-50%,-50%) rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .t-loader::after,
    .t-loader .t-orbit,
    .t-loader .t-orbit2 {
        animation: none;
    }
}