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

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

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

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

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

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

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

.btn-app-primary-white{
    background-color: #ffffff !important;
    color: var(--application-primary-color) !important;
}
.btn-app-primary-white:hover{
    background-color: #ffffff !important;
    color: var(--application-primary-color) !important;
}
.btn-app-primary-white:focus{
    background-color: #ffffff  !important;
    color: var(--application-primary-color)!important;
}
/* ========================== */
/* CUSTOM BACKGROUNDS */
/* ========================== */
.app-bg-gray{
    background-color: var(--application-gray-color) !important;
}
.app-bg-light-gray{
    background-color: var(--application-light-gray-color) !important;
}
.app-bg-primary{
    background-color: var(--application-primary-color) !important;
}
.app-bg-purple{
    background-color: var(--application-background-purple) !important;
}
.app-bg-red{
    background-color: var(--application-primary-red-color) !important;
}
.app-bg-light-green{
    background-color: var(--application-light-green) !important;
}
.app-bg-orange{
    background-color: var(--application-orange-color) !important;
}
.app-bg-yellow{
    background-color: var(--application-yellow-color) !important;
}
.app-bg-blue{
    background-color: var(--application-blue-color) !important;
}
/* ========================== */
/* CUSTOM TEXT COLORS */
/* ========================== */
.app-text-primary{ 
    color: var(--application-primary-color) !important;
}
.app-text-secondary{ 
    color: var(--application-secondary-color) !important;
}
.app-text-tertiary{ 
    color: var(--application-tertiary-color) !important;
}
.app-text-light-green{
    color: var(--application-light-green) !important;
}
.app-text-dark-green{
    color: var(--application-dark-green) !important;
}
.app-text-yellow{
    color: var(--application-yellow-color) !important;
}
.app-text-blue{
    color: var(--application-blue-color) !important;
}
.app-text-purple{
    color: var(--application-background-purple) !important;
}
.app-text-orange{
    color: var(--application-orange-color) !important;
}
.app-text-red{
    color: var(--application-primary-red-color) !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 BORDERS */
/* ========================== */
.app-border-orange{
    border: 2px solid var(--application-orange-color) !important;
}
/* ========================== */
/* CUSTOM BADGES */
/* ========================== */
.app-badge-primary{
    background-color: var(--application-primary-color) !important;
    color: white !important;
}
.app-badge-tertiary{
    background-color: var(--application-tertiary-color) !important;
    color: white !important;
}
.app-badge-yellow{
    background-color: var(--application-yellow-color) !important;
    color: white !important;
}
.app-badge-blue{
    background-color: var(--application-blue-color) !important;
    color: white !important;
}
.app-badge-light-green{
    background-color: var(--application-light-green) !important;
    color: white !important;
}
.app-badge-light-green{
    background-color: var(--application-light-green) !important;
    color: white !important;
}
/* ========================== */
/* CUSTOM Z-INDEX */
/* ========================== */
.app-z-top{
    z-index: 5555 !important;
}