/* brand color */
:root {
    --brand-primary: #0B8482;
    --brand-info: #163D59;
    --brand-warning: #EFA52C;
    --brand-danger: #F26E2B;
}   

/* Text Color Utilities */
.brand-primary-color {
    color: var(--brand-primary) !important;
}

.brand-info-color {
    color: var(--brand-info) !important;
}

.brand-warning-color {
    color: var(--brand-warning) !important;
}

.brand-danger-color {
    color: var(--brand-danger) !important;
}

/* Background Color Utilities */
.brand-primary-background {
    background-color: var(--brand-primary) !important;
    color: #fff !important;
}

.brand-info-background {
    background-color: var(--brand-info) !important;
    color: #fff !important;
}

.brand-warning-background {
    background-color: var(--brand-warning) !important;
    color: #000 !important;
}

.brand-danger-background {
    background-color: var(--brand-danger) !important;
    color: #fff !important;
}


/* Base Button Styles */
.btn-brand {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1.1rem;
    line-height: 2;
    border-radius: 0.25rem;
    transition: all 0.15s ease-in-out;
    text-decoration: none;
    color: #fff;
}

/* Solid Buttons */
.btn-brand-primary {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-brand-info {
    background-color: var(--brand-info);
    border-color: var(--brand-info);
}

.btn-brand-warning {
    background-color: var(--brand-warning);
    border-color: var(--brand-warning);
    color: #000;
}

.btn-brand-danger {
    background-color: var(--brand-danger);
    border-color: var(--brand-danger);
}

/* Solid Hover */
.btn-brand-primary:hover {
    background-color: #086c6a;
    border-color: #086c6a;
}

.btn-brand-info:hover {
    background-color: #102c40;
    border-color: #102c40;
}

.btn-brand-warning:hover {
    background-color: #d89425;
    border-color: #d89425;
    color: #000;
}

.btn-brand-danger:hover {
    background-color: #d85f26;
    border-color: #d85f26;
}

/* Outline Buttons */
.btn-brand-outline-primary {
    background-color: transparent;
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.btn-brand-outline-info {
    background-color: transparent;
    color: var(--brand-info);
    border-color: var(--brand-info);
}

.btn-brand-outline-warning {
    background-color: transparent;
    color: var(--brand-warning);
    border-color: var(--brand-warning);
}

.btn-brand-outline-danger {
    background-color: transparent;
    color: var(--brand-danger);
    border-color: var(--brand-danger);
}

/* Outline Hover */
.btn-brand-outline-primary:hover {
    background-color: var(--brand-primary);
    color: #fff;
}

.btn-brand-outline-info:hover {
    background-color: var(--brand-info);
    color: #fff;
}

.btn-brand-outline-warning:hover {
    background-color: var(--brand-warning);
    color: #000;
}

.btn-brand-outline-danger:hover {
    background-color: var(--brand-danger);
    color: #fff;
}