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

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

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

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

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

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

.btn-app-primary-white{
    background-color: #ffffff !important;
    color: var(--primary-color) !important;
}
.btn-app-primary-white:hover{
    background-color: #ffffff !important;
    color: var(--primary-color) !important;
}
.btn-app-primary-white:focus{
    background-color: #ffffff  !important;
    color: var(--primary-color) !important;
}
/* ========================== */
/* CUSTOM BADGES */
/* ========================== */
.app-badge-orange{
    background-color: #ffe1c2 !important;
    color: #cf7316 !important;
}
.app-badge-purple{
    background-color: #e1c0ff !important;
    color: var(--background-purple) !important;
}
.app-badge-red{
    background-color: #ffdadb !important;
    color: var(--primary-red-color) !important;
}
.app-badge-light-green{
    background-color: #d9ffe8 !important;
    color: var(--app-light-green) !important;
}
/* ========================== */
/* CUSTOM BACKGROUNDS */
/* ========================== */
.app-bg-primary{
    background-color: var(--primary-color) !important;
    color: white !important;
}
.app-bg-purple{
    background-color: var(--background-purple) !important;
    color: white !important;
}
.app-bg-red{
    background-color: var(--primary-red-color) !important;
    color: white !important;
}
.app-bg-light-green{
    background-color: var(--app-light-green) !important;
    color: white !important;
}
.app-bg-orange{
    background-color: #ff7f00 !important;
}

.app-bg-gradient-primary{
    background: var( --primary-color);
    background: -webkit-linear-gradient(90deg, var( --primary-color) 0%, var(--quaternary-color) 140%);
    background: -moz-linear-gradient(90deg, var( --primary-color) 0%, var(--quaternary-color) 140%);
    background: linear-gradient(90deg, var( --primary-color) 0%, var(--quaternary-color) 140%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="var( --primary-color)", endColorstr="var(--quaternary-color)", GradientType=1);
}
/* ========================== */
/* CUSTOM TEXT COLORS */
/* ========================== */
.app-text-primary{
    color: var(--primary-color) !important;
}
.app-text-secondary{
    color: var(--secondary-color) !important;
}
.app-text-light-green{
    color: var(--app-light-green) !important;
}
.app-text-red{
    color: var(--primary-red-color) !important;
}
.app-text-yellow{
    color: var(--primary-yellow-color) !important;
}
.app-text-dark-purple{
    color: var(--background-dark-purple) !important;
}
.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;
}
/* ========================== */
/* CUSTOM PADDING */
/* ========================== */
.app-p-0{
    padding: 0 !important;
}
.app-width-full{
    width: -webkit-fill-available;
}
/* ========================== */
/* CUSTOM INPUT */
/* ========================== */
.app-label{
    font-size: 0.92rem !important;
    margin-bottom: 0.2rem !important;
}
.app-input{
    font-size: 0.90rem !important;
}