:root {
    --brand-red: #F21822;
    --brand-red-hover: #D9131C;
    --brand-red-soft: #FFE8EA;

    --brand-grey-900: #4A4A4A;
    --brand-grey-700: #707070;
    --brand-grey-500: #8F8F8F;
    --brand-grey-300: #D6D6D6;
    --brand-grey-100: #F5F5F5;

    --brand-white: #FFFFFF;
    --brand-success: #067647;
    --brand-success-soft: #ECFDF3;
    --brand-warning: #B54708;
    --brand-warning-soft: #FFF7ED;
    --brand-danger: #D9131C;
    --brand-danger-soft: #FFE8EA;
}

.brand-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

.brand-logo--sidebar {
    width: auto;
    height: 40px;
    max-width: 90px;
    object-fit: contain;
}

.brand-logo--header {
    width: auto;
    height: 46px;
    max-width: 110px;
    object-fit: contain;
}

.brand-logo--login {
    width: auto;
    height: 110px;
    max-width: 260px;
    object-fit: contain;
}

.brand-logo--pdf {
    width: auto;
    height: auto;
    max-height: 120px;
    max-width: 240px;
    object-fit: contain;
}

.brand-logo-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 8px;
    background: #FFFFFF;
}

.brand-bg-primary {
    background-color: var(--brand-red);
}

.brand-text-primary {
    color: var(--brand-red);
}

.brand-border-primary {
    border-color: var(--brand-red);
}

.brand-button-primary {
    border-color: var(--brand-red);
    background-color: var(--brand-red);
    color: #FFFFFF;
}

.brand-button-primary:hover {
    border-color: var(--brand-red-hover);
    background-color: var(--brand-red-hover);
}

.brand-link {
    color: var(--brand-red);
}

.brand-link:hover {
    color: var(--brand-red-hover);
}