:root {
    --rz-primary: rgb(29, 78, 216);
    --rz-primary-light: rgb(29, 78, 216, 0.5);
    --rz-primary-lighter: rgb(29, 78, 216, 0.12);
    --rz-on-primary-lighter: rgb(0, 104, 200, 1);
    --rz-base-900: rgb(33, 33, 33);
    --rz-success: rgba(22, 160, 133, 1);
    --rz-icon-font-family: 'Material Symbols Outlined';
    --rz-button-shadow: none;
    --rz-input-font-size: 12px;
}

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    src: url('https://cdn.jsdelivr.net/npm/material-symbols@0.2.3/material-symbols-outlined.woff2') format('woff2');
}

.rz-button {
    text-transform: none;
    letter-spacing: normal;
    font-weight: normal;
}

.rz-button-lg {
    font-size: 14px;
}

.rz-inputtext {
    font-size: 12px;
}

.rz-dropdown > .rz-inputtext {
    transform: translateY(2px);
}

.rz-dialog-title {
    font-size: 1.25rem;
}

.rz-dialog-confirm-buttons {
    display: flex;
    flex-direction: row-reverse;
}

.rz-dialog-confirm-buttons > .rz-button {
    padding-block-end: 14px;
    padding-block-start: 14px;
    padding-inline-end: 21px;
    padding-inline-start: 21px;
    padding: 14px 21px;
}

.rz-dialog-confirm-buttons > .rz-button.rz-secondary {
    color: var(--rz-base-900);
    background-color: transparent;
    border-color: var(--rz-base-900) !important;
    border-radius: 4px;
    box-shadow: var(--rz-base-900) 0 0 0 1px inset;
}

.side-nav-item > .active {
    background-color: #E5E5E5;
    color: var(--rz-primary);
    border-color: var(--rz-primary);
    font-weight: 600;
}

.shopping-cart-nav-item > .active {
    color: var(--rz-primary);
    border-color: var(--rz-primary);
    font-weight: 600;
}

.validation-message {
    font-size: 0.875rem;
    color: #b91c1c;
}