/* ========================== */
/* CUSTOM BUTTONS */
/* ========================== */
.btn-app-primary{
    background-color: var(--color-accent) !important;
    color: #FFFFFF !important;
}
.btn-app-primary:hover{
    background-color: var(--color-accent)!important;
    color: #FFFFFF !important;
}
.btn-app-primary:focus{
    background-color: var(--color-accent) !important;
    color: #FFFFFF !important;
}
.btn-check:checked + .btn-app-primary{
    background-color: var(--color-brand-navy) !important;
    color: #FFFFFF !important;
}

.btn-app-secondary{
    background-color: var(--color-brand-navy) !important;
    color: #FFFFFF !important;
}
.btn-app-secondary:hover{
    background-color: var(--color-brand-navy)!important;
    color: #FFFFFF !important;
}
.btn-app-secondary:focus{
    background-color: var(--color-brand-navy) !important;
    color: #FFFFFF !important;
}

.btn-app-red{
    background-color: var(--color-danger) !important;
    color: #FFFFFF !important;
}
.btn-app-red:hover{
    background-color: var(--color-danger)!important;
    color: #FFFFFF !important;
}
.btn-app-red:focus{
    background-color: var(--color-danger) !important;
    color: #FFFFFF !important;
}

.btn-app-success{
    background-color: var(--color-success) !important;
    color: #FFFFFF !important;
}
.btn-app-success:hover{
    background-color: var(--color-success)!important;
    color: #FFFFFF !important;
}
.btn-app-success:focus{
    background-color: var(--color-success) !important;
    color: #FFFFFF !important;
}

.btn-app-yellow{
    background-color: var(--color-warning) !important;
    color: #FFFFFF !important;
}
.btn-app-yellow:hover{
    background-color: var(--color-warning)!important;
    color: #FFFFFF !important;
}
.btn-app-yellow:focus{
    background-color: var(--color-warning) !important;
    color: #FFFFFF !important;
}

.btn-purple{
    background-color: var(--color-accent) !important;
    color: #FFFFFF !important;
}
.btn-purple:hover{
    background-color: var(--background-dark-purple) !important;
    color: #FFFFFF !important;
}
.btn-purple:focus{
    background-color: var(--color-accent) !important;
    color: #FFFFFF !important;
}

.btn-light-green{
    background-color: var(--color-success) !important;
    color: #FFFFFF !important;
}
.btn-light-green:hover{
    background-color: var(--color-success) !important;
    color: #FFFFFF !important;
}
.btn-light-green:focus{
    background-color: var(--color-success) !important;
    color: #FFFFFF !important;
}

.btn-app-primary-white{
    background-color: #ffffff !important;
    color: var(--color-accent) !important;
}
.btn-app-primary-white:hover{
    background-color: #ffffff !important;
    color: var(--color-accent) !important;
}
.btn-app-primary-white:focus{
    background-color: #ffffff  !important;
    color: var(--color-accent)!important;
}
/* ========================== */
/* CUSTOM BACKGROUNDS */
/* ========================== */
.app-bg-gray{
    background-color: var(--color-text-muted) !important;
}
.app-bg-light-gray{
    background-color: var(--color-bg-surface-alt) !important;
}
.app-bg-primary{
    background-color: var(--color-accent) !important;
}
.app-bg-secondary{
    background-color: var(--color-brand-navy) !important;
}
.app-bg-purple{
    background-color: var(--color-accent) !important;
}
.app-bg-red{
    background-color: var(--color-danger) !important;
}
.app-bg-light-green{
    background-color: var(--color-success) !important;
}
.app-bg-orange{
    background-color: var(--color-warning) !important;
}
.app-bg-yellow{
    background-color: var(--color-warning) !important;
}
.app-bg-blue{
    background-color: var(--color-info) !important;
}
.app-bg-pink{
    background-color: var(--color-accent) !important;
}
.app-bg-dark-pink{
    background-color: var(--color-accent-dark) !important;
}
/* ========================== */
/* CUSTOM TEXT COLORS */
/* ========================== */
.app-text-primary{ 
    color: var(--color-accent) !important;
}
.app-text-secondary{ 
    color: var(--color-brand-navy) !important;
}
.app-text-tertiary{ 
    color: var(--color-accent-dark) !important;
}
.app-text-light-green{
    color: var(--color-success) !important;
}
.app-text-dark-green{
    color: var(--color-success) !important;
}
.app-text-yellow{
    color: var(--color-warning) !important;
}
.app-text-blue{
    color: var(--color-info) !important;
}
.app-text-purple{
    color: var(--color-accent) !important;
}
.app-text-orange{
    color: var(--color-warning) !important;
}
.app-text-red{
    color: var(--color-danger) !important;
}
/* ========================== */
/* CUSTOM TEXT FONT SIZES */
/* ========================== */
.app-fs-1{
    font-size: 1.2rem !important;
}
.app-fs-2{
    font-size: 1.1rem !important;
}
.app-fs-3{
    font-size: 1rem !important;
}
.app-fs-4{
    font-size: 0.9rem !important;
}
.app-fs-5{
    font-size: 0.8rem !important;
}
.app-fs-6{
    font-size: 0.7rem !important;
}
.app-fs-7{
    font-size: 0.6rem !important;
}
.app-fs-8{
    font-size: 0.5rem !important;
}
/* ========================== */
/* CUSTOM TEXT FORMATS */
/* ========================== */
.app-text-uppercase{
    text-transform: uppercase !important;
}
.app-text-lowercase{
    text-transform: lowercase !important;
}
.app-text-capitalize{
    text-transform: capitalize !important;
}
/* ========================== */
/* CUSTOM BORDERS */
/* ========================== */
.app-border-orange{
    border: 2px solid var(--color-warning) !important;
}
/* ========================== */
/* CUSTOM BADGES */
/* ========================== */
.app-badge-primary{
    background-color: var(--color-accent) !important;
    color: white !important;
}
.app-badge-secondary{
    background-color: var(--color-brand-navy) !important;
    color: white !important;
}
.app-badge-tertiary{
    background-color: var(--color-accent-dark) !important;
    color: white !important;
}
.app-badge-yellow{
    background-color: var(--color-warning) !important;
    color: white !important;
}
.app-badge-blue{
    background-color: var(--color-info) !important;
    color: white !important;
}
.app-badge-light-green{
    background-color: var(--color-success) !important;
    color: white !important;
}
.app-badge-red{
    background-color: var(--color-danger) !important;
    color: white !important;
}

.app-badge-offer-1{
    background-color: #E53935 !important;
    color: white !important;
}
.app-badge-offer-2{
    background-color: #6A1B9A !important;
    color: white !important;
}
.app-badge-offer-3{
    background-color: #1565C0 !important;
    color: white !important;
}
.app-badge-offer-4{
    background-color: #FB8C00 !important;
    color: white !important;
}
.app-badge-offer-5{
    background-color: #43A047 !important;
    color: white !important;
}
.app-badge-offer-6{
    background-color: #00ACC1 !important;
    color: white !important;
}
.app-badge-offer-7{
    background-color: #546E7A !important;
    color: white !important;
}
/* ========================== */
/* CUSTOM Z-INDEX */
/* ========================== */
.app-z-top{
    z-index: 5555 !important;
}
/* ========================== */
/* CUSTOM PADDING */
/* ========================== */
.app-p-0{
    padding: 0 !important;
}
/* ========================== */
/* CUSTOM IMAGE CLASS */
/* ========================== */
.app-img-fluid{
    width: 100% !important;
    height: -webkit-fill-available !important;
}
/* ========================== */
/* CUSTOM WIDTH CLASS */
/* ========================== */
.app-w-100{
    width: 100% !important;
}
.app-w-90{
    width: 90% !important;
}
.app-w-80{
    width: 80% !important;
}
.app-w-70{
    width: 70% !important;
}
.app-w-60{
    width: 60% !important;
}
.app-w-50{
    width: 50% !important;
}
.app-w-40{
    width: 40% !important;
}
.app-w-30{
    width: 30% !important;
}
.app-w-20{
    width: 20% !important;
}
.app-w-10{
    width: 10% !important;
}
/* ========================== */
/* CUSTOM INPUT */
/* ========================== */
.app-label{
    font-size: 0.92rem !important;
    margin-bottom: 0.2rem !important;
}
.app-input{
    font-size: 0.90rem !important;
}